/* 🔹 IMPORTAR FUENTE POPPINS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* 🔹 ESTILOS GENERALES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root{
    --color_text-primary: #222;
    --main_color-primary:white;
    --main_color-secundary:#f9e846;
    --lowText_font_size: 16px;
    --text_size_title: 40px;
    --text_paragraph: 20px;
    --btn_whatsapp_color: #107c41;
 }

body {
    background-color: #f9e846;
    color: #222;
}

h1, h2 {
    color: #222;
}

/***********************************************/
/* 🔹 HEADER */

.container_header {
    max-width: 1900px;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    background:#f9e846;
    color: white;
}

.logo img {
    max-width: 150px;
}

/***********************************************/
/* MENÚ */
.menu {
    display: flex;
    align-items: center;
    margin: 0px 20px;
}

.menu nav ul {
    
    list-style: none;
    display: flex;
    gap: 100px;
    padding: 0;
    
}

.menu nav ul li a {
    color: black;
    text-decoration: none;
    font-size: 16px;
}

.menu nav ul li a:hover{
    color: #555;
}

/***********************************************/
/*BOTON WHATSAPP*/
.btn_quote { 
    display: block;
    background: #107C41;
    color: white;
    padding: 10px 15px;
    margin-left: 200px;
    margin-right: 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 300ms;
}

.btn_quote:hover{ /*TRANSICIÓN DE COLOR BOTON WHATSAPP*/
    color: white;
    background: #75A242;
}

/***********************************************/
/*TAMA�0�5O ICONOS SOCIAL MEDIA HEADER*/
.socialMedia a img {
    width: 15px;
    margin-left: 10px;
}

/***********************************************/
/* CONTENEDORES INICIO */
.container_coverInicio{ /*Portada*/
    padding-top: 50px;
    padding-bottom: 20px;
    background: var(--main_color-secundary);
    display: flex;
}

.coverInicio{
    max-width: 1900px;
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

.text_coverInicio{ /*ALINEACION TEXTO PORTADA*/
    width: 100%;
    position: relative;
    left: 50px;
}

.text_coverInicio h1{ /*TAMA�1�70�1�75O DEL TEXTO DE PORTADA*/
    font-size: var(--text_size_title);
    }

.text_coverInicio p{
    font-size: var(--text_paragraph);
    margin-top: 40px;
    }

.image_coverInicio {
    width: 100%;
    text-align: center; /* Centra el contenido */
}

.image_coverInicio img {
    max-width: 100%;
    width: 600px; /* Tama�1�70�1�79o base en pantallas grandes */
    border-radius: 15px;
    height: auto;
    display: block;
    margin: 0 auto; /* Centra la imagen */
}

/***********************************************/
/*NOSOTROS*/

.container_coverNosotros{ /*Portada*/
    padding-top: 50px;
    padding-bottom: 20px;
    background: var(--main_color-secundary);
    display: flex;
}

.coverNosotros{
    max-width: 1900px;
    margin: auto;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

.text_coverNosotros{ /*ALINEACION TEXTO PORTADA*/
    width: 100%;
    position: relative;
    left: 50px;
}

.text_coverNosotros h1{ /*TAMA�1�70�1�75O DEL TEXTO DE PORTADA*/
    font-size: var(--text_size_title);
}

.text_coverNosotros p{
    font-size: var(--text_paragraph);
    margin-top: 40px;
}

.image_coverNosotros {
    width: 100%;
    text-align: center; /* Centra el contenido */
}

.image_coverNosotros img {
    max-width: 100%;
    width: 600px; /* Tama�1�70�1�79o base en pantallas grandes */
    border-radius: 15px;
    height: auto;
    display: block;
    margin: 0 auto; /* Centra la imagen */
}

/***********************************************/
/* SERVICIOS */

/* Estilos generales */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
        }
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f9e846;
        }
        
         .coverServicios {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 20px;
            text-align: center;
        }
        .text_coverServicios {
            flex: 1;
            min-width: 300px;
        }
        .image_coverServicios img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }
        
        @media (max-width: 768px) {
            .coverServicios {
                flex-direction: column;
            }
            
            .text_coverServicios {
                order: 2;
            }
            
            .image_coverServicios {
                order: 1;
            }
        }
    
        /* Carrusel responsivo */
        .swiper {
            width: 90%;
            max-width: 800px;
            height: auto;
            margin: 20px auto;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        .swiper-slide img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        /* Dise�0�9o responsivo */
        .container_header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }
        .menu nav ul {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            list-style: none;
        }
        .menu nav ul li a {
            text-decoration: none;
            padding: 10px;
            display: block;
        }

        /* RESPONSIVE Ajustes para dispositivos m��viles */
        @media (max-width: 768px) {
            .menu nav ul {
                flex-direction: column;
                text-align: center;
            }
            .swiper {
                width: 100%;
            }
        }


/************* UBICACION *****************/

.container_coverUbicacion{
    max-width: 1900px;
    margin-top: 80px; /* Separaci��n superior del Header*/
    display: flex;
    align-items: center;
    }

.coverUbicacion{
    max-width: 1900px;
    margin-top: 20px; /* Separaci��n superior del Header*/
    display: flex;
    align-items: center;
    }
        
.text_coverUbicacion h1{ /*Tama�0�9o del texto portada*/
    font-size: var(--text_size_title);
    margin-left: 400px;
    }
    
 .image_coverUbicacion {
    width: 100%;
    text-align: center; /* Centra el contenido */
}
        
.image_coverUbicacion img {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    border-radius: 15px;
    width: 650px;
    margin-left: 300px;  
    object-fit:cover;
}

.image_coverUbicacion img:hover {
    transform: scale(1.05);
}

.image_UbicacionIcon img{
    width: 50px;
    margin-left: 500px;
}


/***********************************************/
/* FOOTER */

footer{
    width: 100%; 
    padding: 10px 0px; 
    background-image: url(../css/footer.png); /*imagen de fondo del footer*/
    background-size: cover; /*Tamaño imágen footer*/
    font-size: 12px; /*Tamaño letra contendo CONTACTO footer*/
}

.container_footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1700px;
    margin: auto;
    margin-top: 50px;
    }

    .box_footer{
        display: flex;
        flex-direction: column;
    }

    .box_footer .logo img{ /*TAMAÑO LOGO FOOTER*/
        width: 100px;
    }

    .box_footer .terms{ /*Tamaño de la sección del logo y la leyenda FOOTER*/
        /*max-width: 350px;   <<<<Es un ejemplo para determinar el tamaño de la sección>>>>>*/
        /*margin-top: 20px;    <<<<Es un ejemplo para separar el texto de la leyenda del logo>>>>>*/
        font-size: 12px;
        font-weight: 550; /*Grosor de la letra de la leyenda*/
        color: #333; /*Color texto leyenda*/
    }

    .box_footer h2{
        margin-bottom: 10px; /*Separación de los títulos del FOOTER con el contenido*/
        color: #333;
        font-weight: 700; /*grosor letras*/
        font-size: 18px;
   }

    .box_footer a{ /*FORMATO ETIQUETAS a  - Links Dirección y Redes Sociales*/
        margin-top: 10px;
        color: #333;
        text-decoration: none; /*Quita las líneas de los liks*/
        font-size: 12px;
    }

    .box_footer a:hover{/*Animación transparencia cuando se pasa el mouse por encima de los links*/
        opacity: 0.6;
    }

.box_copyright {
    max-width: 1900px;
    margin: auto;
    text-align: center;
    background: #f9e846;
    font-size: 12px;
}

.box_copyright p{
    margin-top: 20px;
}

.box_copyright hr{
    height: 1px;
    margin-top: 20px;
}

/***********************************************/
/* RESPONSIVE DESIGN */

/* TABLET (Menos de 1024px) */

@media (max-width: 1024px) {
    
/* CARACTERISTICAS GENERALES */
    
    .container_header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .menu {
        flex-direction: column;
    }

    .menu nav ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .cover {
        flex-direction: column;
        text-align: center;
    }

/* INICIO - CARACTERISTICAS */
    .coverInicio {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

/* NOSOTROS - CARACTERISTICAS */
    
    .coverNosotros {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
/* UBICACION - CARACTERISTICAS */
    

    /* SERVICIOS */
    


}