/* ==========================================
   ESTILOS ESPECÍFICOS - PROYECTO MF77
   ========================================== */

/* Contenedor General con el fondo marrón de la maqueta y ajuste superior para navbar */
.mf77-container {
    width: 100%;
    max-width: 100%;
    background-color: #5C4740; /* Tono marrón exacto de la maqueta */
    margin-top: 80px; /* Salva el navbar fijo */
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Distancia uniforme entre las secciones */
    color: #F3EBE6;
    font-family: 'Satoshi', sans-serif;
}

/* ==========================================================================
   CLASES PARA IMÁGENES INYECTADAS EN HTML
   ========================================================================== */
/* Para los mockups: mantiene transparencias y proporciones originales */
.responsive-img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
    border-radius: inherit;
}

/* Para el encabezado superior: llena por completo el espacio panorámico */
.hero-img {
    width: 100%;
    height: auto; 
    display: block;
}

/* ==========================================================================
   HERO BANNER (BANNER SUPERIOR) - SE QUEDA COMO ESTABA
   ========================================================================== */
.mf77-hero-banner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ==========================================================================
   ESTILOS BASE PARA CONTENEDORES DE IMÁGENES
   ========================================================================== */
.color-banner-vertical, .logo-quadrant-box, .gray-mockup-box {
    border-radius: 2px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Sin color gris de fondo */
.gray-mockup-box {
    background-color: transparent; 
}

/* ==========================================================================
   BLOQUE 1: TEXTOS IZQUIERDA & IMÁGENES VERTICALES DERECHA
   ========================================================================== */
.mf77-row-showcase {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.left-text-column {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.left-text-column p {
    font-size: 16px;
    line-height: 1.6;
    max-width: 480px;
}

.left-text-column .subtitle-note {
    font-size: 14px;
    opacity: 0.7;
    margin-top: 8px;
}

.right-images-column {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
}

.color-banner-vertical {
    width: 150px; /* Ligeramente más anchas para mayor presencia visual */
    aspect-ratio: 1 / 3.8; 
}

/* ==========================================================================
   BLOQUE 2: CUADRANTE DE LOGOS & TEXTO DER
   ========================================================================== */
.mf77-row-grid-logo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.logo-quadrant-box {
    width: 340px; /* Escalado sutil del cuadrante de logos */
    aspect-ratio: 1 / 1; 
    margin-left: 60px; 
}

.right-desc-box p {
    font-size: 16px;
    line-height: 1.6;
    max-width: 420px;
}

/* ==========================================================================
   BLOQUE 3: TEXTO FILOSOFÍA & MOCKUP HORIZONTAL LARGO (MÁS GRANDE)
   ========================================================================== */
.mf77-row-mixed {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* Le da más espacio en la cuadrícula al mockup */
    gap: 60px;
    align-items: center;
}

.left-philosophy-box p {
    font-size: 16px;
    line-height: 1.7;
    max-width: 450px;
}

.horizontal-large {
    width: 100%;
    aspect-ratio: 16 / 11; /* Se aumenta la altura y proporción del contenedor del mockup */
}

/* ==========================================================================
   BLOQUE 4: FILA DE DOS RECTÁNGULOS HORIZONTALES (MÁS GRANDES)
   ========================================================================== */
.mf77-double-horizontal-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.horizontal-medium {
    width: 100%;
    aspect-ratio: 16 / 11; /* Incremento de escala vertical y tamaño general */
}

/* ==========================================================================
   BLOQUE 5: SECCIÓN CARTELERÍA (TEXTO CENTRADO + DOS VERTICALES GRANDES)
   ========================================================================== */
.mf77-posters-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.section-label {
    font-size: 15px;
    letter-spacing: 1px;
    opacity: 0.9;
    text-align: center;
}

.posters-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px; /* Mayor separación limpia */
}

.vertical-large {
    width: 100%;
    aspect-ratio: 3 / 4.2; /* Estira el lienzo verticalmente para que los pósters resalten con fuerza */
}

/* ==========================================
   ADAPTACIÓN RESPONSIVE (MÓVIL / TABLET)
   ========================================== */
@media (max-width: 850px) {
    .mf77-container {
        margin-top: 60px;
        gap: 50px;
    }

    .mf77-row-showcase, 
    .mf77-row-grid-logo, 
    .mf77-row-mixed, 
    .mf77-double-horizontal-row, 
    .posters-grid {
        grid-template-columns: 1fr; 
        gap: 30px;
    }

    .right-images-column {
        justify-content: center;
    }

    .logo-quadrant-box {
        margin: 0 auto;
    }

    .left-text-column p, 
    .right-desc-box p, 
    .left-philosophy-box p {
        max-width: 100%;
        text-align: left;
    }
}