@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/PlayfairDisplay.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {

    --fuentePrincipal: 'Playfair Display', serif;
    --fuenteParrafos: 'Roboto', sans-serif;
    --blanco: #FFF;
    --negro: #000;
    --rojo: rgb(242, 34, 51);

    --rojoclaro: #fc949c;
    --crema: #e5c984;
    --verdebase: #025928;
    --verdeClaro: #6a8e6f;
    --cremaClaro: #dbd8c5;
    --oro: #a48405;

}
html {
    box-sizing: border-box;
    font-size: 62.5%; /** 1rem = 10Px **/
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-family: var(--fuenteParrafos);
    font-size: 1.4rem;
    line-height: 1.2;
}

/** GLOBALES **/
.contenedor {
    max-width: 120rem;
    width: 90%;
    margin: 0 auto; /**para centrar el contenido **/
}
a {
    text-decoration: none;
    color: var(--blanco);
}

a:hover {
    color: var(--rojoclaro);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}
h1, h2, h3, h4{
    font-family: var(--fuentePrincipal);
    line-height:1;
    color: var(--rojo);

}
h1 {
    font-size: 4.8rem;
}
h2 {
    font-size: 4rem;
}
h3 {
    font-size: 3.2rem;
}
h4 {
    font-size: 2.8rem;
}
img {
    max-width: 100%;
    height: auto;

}
p {
    color: var(--verdebase);
    font-size: 1.8rem;
}


/** UTILIDADES **/
.no-margin {
    margin: 0;
}
.no-padding {
    padding: 0;
}
.centrar-texto{
    text-align: center;
}

img {
    max-width: 100%;
    height: auto; /* Mantener la proporción de la imagen */
    display: block;
}

/* Para dispositivos pequeños */
@media (max-width: 768px) {
    .entrada__imagen img {
        width: 100%;
    }

    .imagen_invierte {
        width: 80%; /* Reducir tamaño en móviles */
    }
    .contenedor {
        width: 95%; /* Reducir ancho en móviles */
    }

    .entrada {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }
}
@media (max-width: 768px) {
    h1 {
        font-size: 5.5vw;
    }
    h2 {
        font-size: 4.5vw;
    }
    h3 {
        font-size: 5vw;
    }
    h4 {
        font-size: 4.2vw;
    }
    p {
        font-size: 1rem;
        margin: 1rem 0;
        line-height: 1.5;
    }
}



/**HEADER**/
.webp .header {
    background-image: url(../img/Chilaquiles2.webp);
}
.no-webp .header {
    background-image: url(../img/Chilaquiles2.jpg);
}
.header{
    background-image: url(../img/Chilaquiles2.webp);
    /* height: 40rem; */
    height: 50vh;
    background-size: cover; /*Para que la imagen se ajuste al espacio indicado de 60rem*/
    background-position: center;


}

@media (max-width: 1100px) {
    .header {
        height: 25vh;
    }

    .header__texto {
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    .header {
        height: 30vh;
    }

    .header__texto {
        margin-top: 1rem;
    }
}



 @media (min-width: 480px) {
    .header{
    background-position: center center;
    }
} 
.header__texto{
    text-align: center;
    color: var(--rojo);
    margin-top: 5rem;
}
@media (min-width: 768px) {
    .header__texto{
        margin-top: 2rem;
    }

}
.barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem;
}
.logo {
    width: 70%;
    padding: 1rem;
}

.video-container {
    padding-top: 100%; /* Relación de aspecto 4:3 para móviles */
}
/* ESTILOS PARA LA NAVEGACIÓN RESPONSIVE */
.logo {
    width: 20%;
}
.menu-toggle {

    display: none; /* Ocultamos el botón en escritorio */
    font-size: 3rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--blanco);
    position: absolute;
    top: 20px;
    right: 20px;
}

.navegacion  {
    display: block;
    text-align: center;
    font-size: 2rem;
    color: var(--blanco);
    text-shadow: 1.2px 1.2px var(--negro);

}

/* Ocultar el menú en móviles por defecto */
@media (max-width: 768px) {
    .logo {
        width: 20%;
    }
    .navegacion {
        display: none;
        flex-direction: column;
        background-color: var(--verdebase);
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        text-align: center;
        padding: 1rem 0;
        z-index: 1000;
    }

    .navegacion a {
        display: block;
        padding: 1rem;
        color: var(--blanco);
        font-size: 2rem;
    }


    /* Mostrar el botón hamburguesa en móviles */
    .menu-toggle {
        display: block;
    }

    /* Cuando se active el menú, se mostrará */
    .navegacion.activo {
        display: flex;
    }

}

.chila {

    color: var(--rojo);
    font-size: 2rem;
    text-shadow: 1px 1px var(--cremaClaro);


}
.kiles {

    color: var(--verdebase);
    font-size: 2rem;
    text-shadow: 1px 1px var(--cremaClaro);

}
.premium{
    line-height: .5;
    font-size: 1rem;
    color: var(--oro);
    text-shadow: 1.5px 1.5px var(--cremaClaro);

}


@media (max-width: 3500px) {
    .chila,
    .kiles {
        margin-top: -10rem;
        font-size: 11rem;
    }
    .premium {
        font-size: 6rem;
    }

}

@media (max-width: 1300px) {
    .chila,
    .kiles {
        margin-top: -4rem;
        font-size: 10rem;
    }
    .premium {
        font-size: 6rem;
    }

}


@media (max-width: 921px) {
    .chila,
    .kiles {
        margin-top: 1rem;
        font-size: 9rem;
    }
    .premium {
        font-size: 5rem;
    }

}

@media (max-width: 768px) {

    .kiles,
    .chila {
        margin-top: -7rem;
        font-size: 7rem;
    }
    .premium {
        font-size: 3rem;
        padding-top: 1rem;
    }

}

@media (max-width: 400px) {
    .kiles,
    .chila {
        margin-top: -7rem;
        font-size: 2rem;
    }
    .premium {
        font-size: 2.5rem;
        padding-top: 1rem;
    }

}


.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Relación de aspecto 16:9 */
    overflow: hidden;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ajuste específico para pantallas pequeñas */

@media (max-width: 768px) {
    .video-container {
        padding-top: 90%; /* Relación de aspecto 4:3 para móviles */
    }
}
@media (max-width: 480px) {
    .video-container {
        padding-top: 100% !important; /* Relación de aspecto 4:3 para móviles */
    }
}

/**BODY**/

@media (min-width: 768px) {
    .contenido-principal{
        display: grid;
        grid-template-columns: 2fr 1fr;
        column-gap: 4rem;
    }

}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background-color: rgba(0,0,0,0.75);
}


.entrada {
    border-bottom: 1px solid var(--rojoclaro);/*Nos da una linea inferior para separar cada seccion*/
    margin-bottom: 2rem;
    padding: 1rem;
}


.entrada:last-of-type { /*seleccionamos el ultimo elemento que tenga clase .entrada */
    border: none;
    margin-bottom: 0;
}
.entrada__imagen{
    text-align: center;
    margin-bottom: 2rem;

}
.crecer-imagen:hover {
    cursor: pointer;

}
.crecer-imagen2:hover {
    cursor: pointer;
    transform: scale(120.5%);
}
.boton {
    display: block;
    font-family: var(--fuentePrincipal);
    color: var(--crema);
    text-align: center;
    padding: 1rem 3rem; /*1 rem arriba y abajo y 3 rem izquierda y derecha */
    font-size: 2rem;
    text-transform: uppercase; /*convertimos el texto en mayúsculas*/
    font-weight: 700; /*la ponemos nivel de 700 en negrita */
    margin-top: 2rem; /*donde se ponga un boton se separe 2rem*/
    border: none;

}
@media (min-width: 768px) {
    .boton {
        display: inline-block; /*Hace que el boton tome el ancho solo que requiere */
    }
}
.boton:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}
.boton--primario {
    background-color: var(--verdebase);
}
.boton--secundario {
    background-color: var(--verdebase);
}
.cursos {
    list-style: none;
}
.widget-curso{
    border-bottom: 1px solid var(--rojoclaro);
    margin-bottom: 2rem;
    padding: 1rem;
}
.widget-curso:last-of-type {
    border: none;
    margin-bottom: 0;
}
.widget-curso_label {
    font-weight: bold;
    font-size: 2rem;

}
.widget-curso__info {
    font-weight: 400;
    font-size: 1.7rem;

}
/* pie de pagina*/



.apie {
    color: var(--blanco);
}

.texfoot{
    color: var(--blanco);
}

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: var(--verdebase);
    padding: 1.5rem;
    text-align: center;
    color: var(--blanco);
}

@media (max-width: 768px) {
    .footer {
        padding: .1rem; /* Reducir el padding */
    }
    

    .derechos p,
    .derechos a {
        font-size: 1.2rem; /* Reducir el tamaño de la fuente */
    }
}

@media (max-width: 480px) {
     .footer {
       
        padding: 1rem !important;
    } 
    
   
    .derechos p,
    .derechos a {
        font-size: .8rem; /* Reducir el tamaño de la fuente */
    }
}


/** Sobre nosotros **/
.just {
    text-align: justify;
    max-width: 90%;
    margin-left: 4rem;
    margin-right: 4rem;
}
.sobre-nosotros__imagen {
    width: 20%;
    margin-left: 15rem;

}
@media (min-width: 768px) {
    .sobre-nosotros {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
        align-items: center;
    }
    .sobre-nosotros__imagen {
        width: 50%;

}
}

/** Sucursales **/
.curso {
    padding: 3rem 0;
    border-bottom: 1px solid var(--verdebase);
    align-items: center;
}
.curso__imagen {
    width: 80%;
}


    @media (max-width: 768px) {
        .curso {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .curso__imagen {
            width: 100%;
        }
    }



.curso:last-of-type {
    border: none;
}

.curso_label {
    font-weight: bold;
    font-size: 2rem;

}
.curso__info {
    font-weight: 400;
    font-size: 1.7rem;
}
.curso__label,
.curso__info {
    font-size: 2rem;
}

/** Invierte **/
.imagen_invierte {
    width: 10%;
}

.contenedorInvierte {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    gap: 7rem;
}

@media (max-width: 768px) {
    .contenedorInvierte {
        padding: 1rem;
        text-align: center;
    }

    .contenedorInvierte p {
        font-size: 1rem;
        line-height: 1.6;
    }
}


/** contacto **/
.contacto-bg {
    background-image: url(../img/Chili.png);
    height: 20rem;
    background-position: left;
    background-repeat: no-repeat;
}




/* Nuevo formulario*/

.justf {
    text-align: justify;
    max-width: 100%;
    margin-left: 4rem;
    margin-right: 4rem;
}

.explicafacturacion {
    display:flex;
    align-items: center;
    justify-content: space-between;
}
/* 🛠️ Estilos Generales del Formulario */
/* 🔹 Ajustes Generales del Contenedor del Formulario */
.form-container {
    width: 100%;
    max-width: 600px;
    margin: auto;
    padding: 2rem;
    border: 2px solid var(--verdebase);
    border-radius: 8px;
    background-color: var(--blanco);
    box-sizing: border-box;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}


.form-container h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
}

.form-container label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--verdebase);
    font-size: 1.6rem;
}

/* 🛠️ Estilos para los Inputs y Select */
.form-container input,
.form-container select,
.form-container textarea {
    width: 100%;
    font-size: 1.6rem;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--verdeClaro);
    border-radius: 4px;
    box-sizing: border-box;
}

/* 🛠️ Botón de Envío */
.form-container input[type="submit"] {
    background-color: var(--verdebase);
    color: var(--blanco);
    border: none;
    padding: 12px;
    font-size: 1.8rem;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
    max-width: 250px;
    margin-top: 1rem;
    display: block;
    margin: 1rem auto;;
    }

.form-container input[type="submit"]:hover {
    background-color: var(--rojoclaro);
    transition: background-color 0.4s ease;
    }



 /* Estilos responsivos para pantallas maximo 768px */

 @media (max-width: 768px) {
    .form-container {
        width: 100%;
        padding: 3rem auto;
        margin-top: 5rem;
        margin-bottom: 5rem;
    }

    .form-container label {
        font-size: 1.4rem;
        margin-bottom: 0.5 rem;
    }

    .form-container input,
    .form-container select,
    .form-container textarea {
        font-size: 1.4rem;
        padding: .8rem;
        margin-bottom: 2rem;
    }

    .form-container input[type="submit"] {
        font-size: 1.6rem;
        padding: 1rem;
        width: 100%;
        max-width: none;
    }

    .explicafacturacion {
        flex-direction: column; /* Asegurar que se ajuste en móviles */
        align-items: center;
        text-align: center;
    }

    .explicafacturacion img {
        width: 7%; /* Ajustar imagen en móviles */
        margin-bottom: 1rem;
    }
    .justf {
        font-size: 1.4rem;
        margin-left: 1.2rem;
        margin-right: 1.2rem;
    }

    .header__texto h1, .header__texto h2 {
        font-size: 6rem; /* Ajustar tamaño de encabezado en móviles */
    }
 }




/* Gracias */

.gracias {
    font-size: 4rem;
    padding: 5rem;
}

/* Sugerencias */
.just2 {
    text-align: justify;
    max-width: 90%;
    margin-left: 4rem;
    margin-right: 4rem;
    padding: 1rem;
    color: var(--verdebase);
    font-size: 1.8rem;

}

/* Pagina de descarga */
/* Centrar el contenedor de la imagen descargable */
.contenedor2 {
    max-width: 120rem;
    width: 100%;
    margin: 0 auto; /**para centrar el contenido **/
    padding: 2rem;
}
.centro-descarga {
    display: flex;
    justify-content: center;
    align-items: center;
   /* height: 60vh; /* Ocupa el 60% de la altura de la pantalla */
    text-align: center;
}

/* Estilo para la imagen */
.imagen-descargable img {
    max-width: 100%; /* La imagen ocupa el ancho completo del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    cursor: pointer;
    transition: transform 0.3s ease; /* Efecto de zoom */
    padding: 3rem;
}

.imagen-descargable img:hover {
    transform: scale(1.05); /* Pequeño zoom al pasar el cursor */
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 480px) {
    .centro-descarga {
        height: 50vh; /* Reduce la altura en pantallas pequeñas */
    }

    .imagen-descargable img {
        max-width: 90%; /* Ajusta el tamaño en pantallas más pequeñas */
    }
    h2 {
        text-align: center;
    }
}
/* 🔹 Ajustes para Pantallas Pequeñas */
@media (max-width: 480px) {
    .form-container {
        width: 95% !important;
        padding: 1.5rem !important;
        border: 2px solid var(--verdebase) !important;
        background-color: var(--blanco) !important;
    }

    

    .form-container input,
    .form-container select,
    .form-container textarea {
        margin-bottom: 18px !important;
        padding: 12px !important;
        font-size: 1.6rem !important;
    }
}

.mapa-container {
    text-align: center;
    margin: 2rem auto;
    max-width: 1000px;
}

#map {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}