/* ==========================================================================
   Home Page: Our Legacy Section
   Estructura: Base Global -> Desktop -> Móvil
   ========================================================================== */

/* =========================================
   1. ESTILOS BASE Y GLOBALES
   ========================================= */
.legacy-section {
    background-color: #FAF9F6; 
    width: 100%;
    padding: 120px 0;
    overflow: hidden;
}

.legacy-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 60px;
}

/* Tipografías y Textos */
.legacy-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 64px;
    color: #000;
    margin: 0 0 30px 0;
    text-transform: uppercase;
}

.legacy-desc {
    font-family: 'General Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 40px 0;
    max-width: 500px;
}

.btn-about-us {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 35px;
    height: 56px;
    border: 1px solid #000;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 20px;
    color: #000;
    transition: background-color 0.3s, color 0.3s;
}

.btn-about-us:hover {
    background-color: #000;
    color: #fff;
}

/* =========================================
   GRILLA DE IMÁGENES Y ANIMACIÓN (Corregido)
   ========================================= */
.legacy-images-col {
    display: grid;
    /* La matemática aplicada: 67% izq, 31% der y el espacio restante es para el gap */
    grid-template-columns: 67% 31%; 
    grid-template-rows: 1fr 1fr; /* Dos filas exactamente iguales para la altura */
    justify-content: space-between; /* Empuja las imágenes a los bordes */
    row-gap: 4px; /* El gap exacto de 4px (240+240+4 = 484) */
    width: 100%;
}

.large-img {
    grid-column: 1 / 2;
    grid-row: 1 / 3; /* Le decimos que ocupe las dos filas de alto (484px) */
    width: 100%;
    height: 100%;
}

.small-img-top {
    grid-column: 2 / 3;
    grid-row: 1 / 2; /* Ocupa solo la fila superior (240px) */
    width: 100%;
    height: 100%;
}

.small-img-bottom {
    grid-column: 2 / 3;
    grid-row: 2 / 3; /* Ocupa solo la fila inferior (240px) */
    width: 100%;
    height: 100%;
}

/* Contenedores con máscara */
.legacy-img-wrap {
    overflow: hidden; 
    background-color: #faf9f6; 
    border-radius: 4px; 
}

/* Estados iniciales de las imágenes */
.legacy-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garantiza que las imágenes no se estiren ni se deformen */
    display: block;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* Animaciones */
.slide-down-img {
    transform: translateY(-100%); 
}

.slide-up-img {
    transform: translateY(100%); 
}

/* =========================================
   ESTADO ACTIVO (Cuando el JS entra en acción)
   ========================================= */
/* Al agregar la clase .is-inview a la sección, las imágenes regresan a 0 (su posición natural) */
.legacy-section.is-inview .slide-down-img,
.legacy-section.is-inview .slide-up-img {
    transform: translateY(0);
}

/* =========================================
   2. DESKTOP VIEW (>= 1024px)
   ========================================= */
@media (min-width: 1024px) {
    .legacy-wrapper {
        flex-direction: row;
        align-items: center;
        padding: 0 5%;
        gap: 80px;
    }

    .legacy-images-col {
        width: 50%;
    }

    .legacy-text-col {
        width: 50%;
        padding-left: 40px;
    }
}

/* =========================================
   3. MOBILE VIEW (< 1024px)
   ========================================= */
/* =========================================
   3. MOBILE VIEW (< 1024px)
   Ajustes de tipografía y tamaños exactos
   ========================================= */
@media (max-width: 1023px) {
    .legacy-section {
        padding: 60px 0;
    }

    .legacy-wrapper {
        gap: 40px; /* Reducimos un poco el espaciado general entre fotos y texto para móvil */
    }

    /* TEXTOS */
    .legacy-title {
        font-size: 48px; /* Tamaño solicitado */
        margin-bottom: 20px;
    }

    .legacy-desc {
        font-size: 16px; /* Tamaño solicitado */
        margin-bottom: 30px;
    }

    /* BOTÓN EXACTO */
    .btn-about-us {
        font-size: 20px; /* Tamaño de fuente solicitado */
        width: 157px;    /* Ancho exacto */
        height: 56px;    /* Alto exacto */
        padding: 0;      /* Importante: quitamos el padding base para que respete el ancho de 157px */
        justify-content: center; /* Centramos perfectamente el texto y la flecha dentro del botón */
    }
}