/* Importacion de estilo de fuente desde google */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');

/*receteo*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
/*agregamos la fuente(estilo de las letras)*/
body{
    font-family: "Poppins", sans-serif;
}
/*disminuir el tamaño  del contenido*/
.container{
    max-width: 1200px;
    margin: 0 auto;
}
/*agregado de imagen de fondo con poco de oscuridad*/
.header{
    background-image: linear-gradient(
        rgba(0,0,0,0.7),
        rgba(0,0,0,0.7)),
        url(images/bg.png);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 70vh;
        display: flex;
        align-items: center;
}
/*estilo para la parte de menu*/
.menu{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/*estilo para logo*/
.logo{
    color: #FFFDFC;
    font-size: 25px;
    font-weight: 800;
}
/*Mandar enlaces a la derecha */
.menu .navbar ul li{
    position: relative;
    float: left;
}
/*estilo para enlaces de la derecha*/
.menu .navbar ul li a{
    font-size: 18px;
    padding: 20px;
    color: #FFFDFC;
    display: block;
    font-weight: 600;
}
/*colocacion hover para pasar cursor sobre los enlaces y cambien de color*/
.menu .navbar ul li a:hover{
    color: #CE967B;
}
/*ocultar input*/
#menu {
    display: none;
}
/*cambio de tamaño para icono*/
.menu-icono{
    width: 25px;
}
/*mostrarlo cuando sea responsive*/
.menu label{
    cursor: pointer;/*mostrar cursor cuando se coloque sobre el menu*/
    display: none;
}
/*modificar la parte del header*/
.header-content{
    text-align: center;
}
/*Modificacion parte del titulo*/
.header-content h1{
    font-size: 75px;
    line-height: 80px;
    color: #f9fafc;
    text-transform: uppercase;
    margin-bottom: 35px;
}
/*Modificacion parte del parrafo*/
.header-content p{
    font-size: 20px;
    color: #C5C5C5;
    padding: 0 250px;
    margin-bottom: 25px;
    text-align: center;/**/
}
/*Modificar boton*/
.btn-1 {
    display: inline-block;/*para enlaces tipo texto, Lo convertimos a block para poder aplicar bien parametros*/
    padding: 11px 35px;
    background-color: #CE967B;
    color: #F9FAFC;
    text-transform: uppercase;
}
/*hover para cambiar el color cuando pase el cursor*/
.btn-1:hover{
    background-color: #EBAD8D;
}
/*Llamado de la siguiente clase*/
.proyectos{
    padding: 100px 0;
    background-color: #E1E2E6;
    position: relative;
}
/*alineado contenido clase proyectos*/
.proyectos-content{
    text-align: center;
}
/*edicion contenido h2 clase proyectos*/
.proyectos-content h2{
    font-size: 35px;
    line-height: 70px;
    color: #323337;
    text-transform: uppercase;/*transformar texto a mayusculas*/
    padding: 0 250px;
    margin-bottom: 15px;
}
/*edicion contenido txt parrafo clase proyectos*/
.txt-p{
    font-size: 16px;
    color: #414247;
    padding: 0 250px;
    margin-bottom:  35px;
}
/*colocar elementos uno delante de cada uno*/
.proyectos-group{
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
.proyecto-1{
    padding: 0 25px;
}
/*tamaño a la imagen*/
.proyecto-1 img{
    width: 200px;
    border-radius: 10px;
    transition: all 500ms ease;/*efecto de transicion para la imagen*/
}
/*dar efecto de escala ala imagen*/
.proyecto-1 img:hover{
    transform: scale(1.2);
}
/*edicion parte de la imagen de luvelca*/
.LuvelcaLogo-img{
    position: absolute;
    top: 0;
    right: 0;
}
/*tamaño para la img*/
.LuvelcaLogo-img{
    width: 200px;
}
.proyecto-1 h3{
    color: #323337;
    font-size: 20px;
    margin-bottom: 15px;
}
/*apartado de codigo de Etica*/
.codigoEtica{
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0.7)),
        url(images/bg3.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        padding: 100px 0;
}
/*modicacion contenido codigo de etica*/
.codigoEtica-content{
    text-align: center;
}
/*modificar h2 de codigo de etica*/
.codigoEtica-content h2{
    font-size: 35px;
    line-height: 70px;
    color: #F9FAFC;
    text-transform: uppercase;
    margin-bottom: 50px;
}
/*modificar parrafo*/
.codigoEtica-content p{
    font-size: 16px;
    color: #C5C5C5;
    margin-bottom: 10px;
}
/*modificar grupo de codigo de etica*/
.codigoEtica-group{
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
/*clase codigo-1 del grupo codigoEtica*/
.codigo-1{
    padding: 0 50px;
}
.codigoEtica img{
    width: 75px;
    margin-bottom: 15px;
    color: #CE967B;
}
.codigoEtica h3{
    color: #EACCB3;
    font-size: 18px;
    margin-bottom: 50px;
}
/*clase general*/
.general{
    display: flex;
}
/*contenedor principal*/
.general-1{
    width: 70%;
    padding: 100px 250px 100px 100px;
    background-color: #E1E2E6;
}
/*contenedores del apartado general imagenes en sizac*/
.general-2{
    background-image: url(images/EnergiasRenovables.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30%;
    border-radius: 15px;
}
.general-3{
    background-image: url(images/InstalacionFotovoltaica.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30%;
    border-radius: 15px;
}
.general-4{
    background-image: url(images/imgL.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30%;
    border-radius: 15px;
}
.general-7{
    background-image: url(images/imgL.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30%;
    border-radius: 15px;
}
.general-8{
    background-image: url(images/instalacion.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30%;
    border-radius: 15px;
}
.general-9{
    background-image: url(images/lavado-1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30%;
    border-radius: 15px;
    margin-bottom: 15px;
}
/*modificar los h2 en general apartir de aqui*/
h2{
    font-size: 45px;
    line-height: 70px;
    color: #323337;
    text-transform: uppercase;
    margin-bottom: 10px;
}
/*modificar parrafos en general apartir de aqui*/
p{
    font-size: 16px;
    color: #414247;
    margin-bottom: 25px 0 45px 0;
    justify-content: center;
}
/*edicion apartado blog*/
.blog{
    padding: 100px 0;
    text-align: center;
}
/*edicion contenedor blog*/
.blog-content{
    display: flex;
    justify-content: space-around;
}

/*edicion clase blog-1*/
.blog-1{
    padding: 15px 55px;
}
/*formato img*/
.blog-1 img{
    width: 300px;
    border-radius: 15px;
    margin-bottom: 15px;
    transition: all 500ms ease;/*efecto de transicion para la imagen*/
}
/*dar efecto de escala ala imagen*/
.blog-1 img:hover{
    transform: scale(1.2);
}
/*Estilo para el titulo*/
.blog-1 h3{
    font-size: 20px;
    color: #323337;
}

/*edicion clase blog-*/
.blog-2{
    padding: 15px 55px;
}
/*formato img*/
.blog-2 img{
    width: 350px;
    border-radius: 15px;
    margin-bottom: 15px;
    transition: all 500ms ease;/*efecto de transicion para la imagen*/
}
/*dar efecto de escala ala imagen*/
.blog-2 img:hover{
    transform: scale(1.2);
}
/*Estilo para el titulo*/
.blog-2 h3{
    font-size: 25px;
    color: #323337;
}
/*Estilo para footer Final*/
.footer{
    padding: 100px 0;
    background-color: #000000;
}
/*Estilo para contenido*/
.footer-content{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.link h3{
    font: 18px;
    color: #F9FAFC;
    margin-bottom: 15px;
    justify-content: space-between;
}
.link a{
    font-size: 16px;
    color: #C5C5C5;
    display: block;
    margin-bottom: 15px;
}
/*estilo parrafos*/
.link p{
    margin-bottom: 10px;
    color: #EACCB3;
    justify-content: space-between;
}
/*animacion para las imagenes*/
@keyframes show{
    /*inicio transparen, tamaño a un 25%*/
    from{
        opacity: 0;
        scale: 25%;
    }
    /*finalizar se ve la img, tamaño 100%*/
    to{
        opacity: 1;
        scale: 100%;
    }
}
/*estirar img*/
img{
    view-timeline-name: --image;
    view-timeline-axis: block; /*efecto vertical*/

    /*enlace entre scrool y elemento*/
    animation-timeline: --image;
    animation-name: show;

    /*rango para la animacion*/
    animation-range: entry 25% cover 30%;
    animation-fill-mode: both;

    /*modo de relleno para la animacion(adelante y atras)*/
}
/* Animaciones para h2, h3 y párrafos dentro de la clase "proyecto" */

/* Estilo para h2 */
.proyectos-content h2 {
    font-size: 35px;
    line-height: 70px;
    color: #323337;
    text-transform: uppercase;
    padding: 0 250px;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUp 1s ease-in-out forwards;
}

/* Estilo para h3 */
.proyecto-1 h3 {
    color: #323337;
    font-size: 20px;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUp 1s ease-in-out forwards 0.5s;
}

/* Estilo para párrafos */
.txt-p {
    font-size: 16px;
    color: #414247;
    padding: 0 250px;
    margin-bottom: 35px;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUp 1s ease-in-out forwards 0.3s;
}

/* Animación complementaria para h2, h3 y párrafos */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Efecto hover en los enlaces del footer */
.footer-content a {
    color: #C5C5C5;
    transition: color 0.3s ease;
}

.footer-content a:hover {
    color: #CE967B;
}
/* Estilo de los enlaces en el footer */
.footer a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px; /* espacio entre el ícono y el texto */
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #ffcc00; /* Color al pasar el cursor */
}

/* Ajustes de tamaño y espacio en los íconos */
.footer i {
    font-size: 1.2em;
}
/* Estilos para la imagen en el footer */
.footer-image img {
    width: 250px; /* Tamaño de la imagen, ajusta según prefieras */
    height: auto;
}
/* Aplica color blanco al h3 dentro del contenedor de la imagen QR */
.footer-image h3 {
    color: #ffffff;
}
/* Contenedor de los enlaces a la derecha */
.footer-links {
    display: flex;
    flex-direction: column;
    color: white;
}
/*diseño para la parte responsiba*/
/*todo el codigo va incluido aqui*/
@media(max-width:520px){
    /*parte del manu*/
    .menu{
        padding: 30px;
    }

    .menu label{
        display: initial;
    }

    .menu .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #323337;
        display: none;
    }

    .menu .navbar ul li{
        width: 100%;
    }

    #menu:checked ~ .navbar{
        display: initial;
    }
    /*parte de header*/
    .header{
        min-height: 0vh;
    }
    .header-content{
        padding: 60px 30px;
    }
    .header-content p{
        padding: 0;
    }
   .header-content h1{
        font-size: 60px;
    }
    .proyectos{
        padding: 30px;
    }
    .proyectos-content h2{
        padding: 0;
    }
    .txt-p{
        padding: 0;
    }
    .proyectos-group{
        align-items: center;
        flex-direction: column;
        margin-bottom: 15;
    }
    .LuvelcaLogo-img{
        display: none;
    }
    /*apartadoo del codigo de etica*/
    .codigoEtica{
        padding: 30px;
    }
    .codigoEtica-content p{
        padding: 0;
    }
    .codigoEtica-group{
        flex-direction: column;
        margin-bottom: 0;
    }
    .codigo-1{
        margin-bottom: 25px;
    }
    /*apartado general*/
    .general{
        flex-direction: column;
    }
    .general-1{
        width: 100%;
        padding: 30px;
        text-align: center;
    }
    .general h2{
        font-size: 25px;
    }
    .general-2, .general-3, .general-4{
        display: none;
    }
    .blog{
        padding: 30px;
    }
    .blog h2{
        font-size: 25px;
    }
    .blog-content{
        flex-direction: column;
    }
    .blog-1{
        padding: 0;
    }
   .blog-1 img{
        width: 270px;
    }
    .blog-2{
        padding: 0;
    }
  .blog-2 img{
        width: 270px;
    }
    .footer{
        padding: 30px;
    }
    .footer-content{
        flex-direction: column;
        text-align: center;
    }
}/* Carrusel emergente */
.carousel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro para el overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que esté encima de todo */
}

.carousel {
    position: relative;
    width: 80%;
    max-width: 600px; /* Ajusta el tamaño máximo del carrusel */
    height: auto;
    background-color: white; /* Fondo blanco para el carrusel */
}

.carousel-container {
    display: flex;
    overflow: hidden; /* Ocultar imágenes fuera del contenedor */
    width: 100%; /* El contenedor tiene el ancho completo */
}

.carousel-slide {
    width: 100%;  /* Cada imagen ocupa el 100% del contenedor */
    height: auto;
    display: none; /* Inicialmente ocultamos todas las imágenes */
}

/* Mostrar solo la imagen activa */
.carousel-slide.active {
    display: block; /* Solo la imagen con la clase 'active' será visible */
}

/* Estilo para el botón de cerrar */
.close-carousel {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #000;
    border-radius: 50%;
    z-index: 10000;
}

/* Estilos para el contenido principal */
.main-content {
    display: none; /* Inicialmente ocultamos el contenido principal */
    padding: 20px;
}

/* Mostrar contenido principal al cerrar el carrusel */
.main-content.visible {
    display: block;
}

/* Responsividad para pantallas pequeñas (menos de 500px) */
@media screen and (max-width: 500px) {
    .carousel {
        width: 95%; /* Carrusel ajustado a pantallas más pequeñas */
    }
    .carousel-container {
        width: 100%;
    }
}