/* ==================================== */
/* 1. Estilos Generales        */
/* ==================================== */

html {
    font-size: 62.5%; /* Base para rems: 1rem = 10px */
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
    min-height: 100vh;
    
    /* Propiedades para la imagen de fondo */
    background-image: url('../style/img/Fondos_vector2.jpg'); /* VERIFICA ESTA RUTA */
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: top center;
    background-color: transparent; /* Color de respaldo para evitar parpadeo */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* Ocultamos los Hx de texto que fueron reemplazados por imágenes */
h1, h2 {
    display: none;
}

p {
    font-size: 1.8em;
}

/* ==================================== */
/* NUEVOS ESTILOS PARA IMÁGENES DE TÍTULO */
/* (Aseguran centrado y responsividad)     */
/* ==================================== */
.titulo-imagen {
    display: block; /* Necesario para que margin: auto funcione */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    max-width: 90%; /* Responsivo: No desborda la pantalla */
    height: auto; /* Mantiene la proporción */
    object-fit: contain; /* Asegura que la imagen se muestre completa */
}

.titulo-principal {
    /* Ajuste para el título grande del encabezado: "Nuestra Historia" */
      max-width: 280px; 
    margin-bottom: 5px; 
}

.titulo-seccion {
    max-width: 320px;
    margin-top: 50px; 
    margin-bottom: 40px; 
}


/* ==================================== */
/* 2. Estilos del Encabezado    */
/* ==================================== */
.header {
    background-color: #ffffffea;
   /* background-image: url('../style/img/seccion1.jpg'); */    
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 60px 20px;
    
    /* Centrado robusto para el contenido */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header-content {
    max-width: 1000px;
    margin: 0 auto;
}

/* Ocultamos el H1 de texto */
.header-content h1 {
    display: none; 
}

.header-text {
    font-size: 1.25em;
    line-height: 1.8;
    margin-bottom: 20px;
    color: rgb(3, 3, 3); /* Asegura la legibilidad sobre el fondo */
}

/* ==================================== */
/* 3. Estilos de Secciones        */
/* ==================================== */
.seccion-historia,
.seccion-valores {
    padding: 50px 0;
}

.seccion-mvv {
    padding: 10px 0;
}

/* Ocultamos los H2 de texto */
.seccion-historia h2,
.seccion-mvv h2,
.seccion-valores h2 {
    display: none;
}

/* Ocultamos la clase del H2 anterior */
.titulo-seccion-historia {
    display: none;
}

/* ==================================== */
/* 4. Grid de Historia         */
/* (Optimizado para Flexbox responsivo) */
/* ==================================== */
.grid-nosotros {
    display: flex;
    flex-direction: column; /* Apilado vertical por defecto (móvil y escritorio) */
    gap: 60px;
    align-items: center; /* Centra los items en el eje cruzado */
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
}

.grid-item {
    display: flex;
    flex-direction: column; /* Apilado por defecto en móvil */
    background-color: transparent;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(12, 12, 12, 0); 
    border-radius: 10px;
    gap: 30px;
    backdrop-filter: blur(6px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 900px;
    width: 100%; 
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.grid-item img {
    width: 100%; /* Flexible para móvil */
    max-width: 250px; /* Límite de tamaño en móvil */
    height: auto;
    border-radius: 10px; 
    object-fit: cover;
    border: 5px solid transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto; /* Centra la imagen en móvil */
}

.grid-item .text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    flex-grow: 1;
}

.grid-item .text-content h2,
.grid-item .text-content h3 {
    color: #003366;
    margin: 0 0 10px 0;
}

.grid-item .text-content h3 {
    font-weight: 500;

    font-size: 2em;
}
.text-sabor{
    font-size: 2.6rem;
    text-align: center;
    color: #dd1d23;
    font-weight: bold;
    
}
/* ==================================== */
/* 5. Sección de Misión y Visión   */
/* ==================================== */
.grid-mvv {
    display: flex;
    flex-direction: column; /* Apilado por defecto en móvil */
    gap: 20px;
    text-align: center;
    margin-top: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.grid-mvv .item {
    padding: 30px;

  
    transition: background 0.3s ease;
    flex: 1; /* Necesario para que crezca en escritorio */
}

.grid-mvv .item:hover {
    background: #f0f6ff;
}

.grid-mvv .item h3 {
    font-size: 2.8em;
    margin-bottom: 10px;
    color:  #003cac;
    text-transform: uppercase;
    font-weight: bold;
}

.grid-mvv .item p {
    font-size: 2em;
    color: #003cac;
}

/* ==================================== */
/* 6. Sección de Valores       */
/* ==================================== */
.seccion-valores {
    padding-top: 0;
    margin-top: 50px;
}
.valores-imagen{
    display: block; /* Necesario para que margin: auto funcione */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    max-width: 270px; /* Responsivo: No desborda la pantalla */
    height: auto; /* Mantiene la proporción */
    object-fit: contain; /* Asegura que la imagen se muestre completa */

}

/* ==================================== */
/* 7. Media Queries (Móviles)     */
/* ==================================== */
@media (max-width: 767px) {
    html { font-size: 55%; } /* Reduce la base de rems para móviles */
    p { font-size: 1.1em; }
    h3 { font-size: 1.5em; }

    .header {
        padding: 40px 15px;
    }

    /* Ajuste de títulos en móvil */
    .titulo-principal {
        max-width: 90%;
        margin-bottom: 20px;
    }
    .titulo-seccion {
        max-width: 80%;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    /* Ajuste del Grid de Historia en móvil */
    .grid-item {
        flex-direction: column; 
        padding: 20px;
        gap: 20px;
    }

    .grid-item img {
        width: 80%;
        max-width: 200px; 
        margin: 0 auto 15px auto;
    }
    
    .grid-item .text-content {
        text-align: center; /* Centra el texto en móvil */
    }

    .grid-item .text-content h3 {
        text-align: center;
    }

    .grid-mvv {
        flex-direction: column; /* Apila Misión y Visión */
        gap: 30px;
    }

    .grid-mvv .item {
        padding: 15px;
    }
}

/* ==================================== */
/* 8. Media Queries (Escritorio)     */
/* ==================================== */
@media (min-width: 768px) {
    html { font-size: 62.5%; } /* Restaura la base de rems para escritorio */

    /* Diseño de dos columnas para la Historia */
    .grid-item {
        display: flex;
        flex-direction: row; /* Texto - Imagen */
        align-items: center; /* Centra verticalmente imagen y texto */
        padding: 40px;
        gap: 40px; /* Espacio entre imagen y texto */
    }

    .grid-item:nth-child(even) {
        flex-direction: row-reverse; /* Imagen - Texto */
    }
    
    .grid-item img {
        width: 35%; /* La imagen ocupa el 35% del espacio */
        max-width: 300px; 
        margin: 0; /* Elimina el margen automático horizontal de móvil */
    }

    .grid-item .text-content {
        width: 65%; /* El texto ocupa el 65% restante */
        padding: 0; 
    }

    /* Misión y Visión lado a lado */
    .grid-mvv {
        flex-direction: row;
        justify-content: center;
        gap: 80px;
    }

    .grid-mvv .item {
        flex: 1; /* Permite que crezcan y compartan el espacio */
    }
}