/* =========================================
   PÁGINA LEGADO MULTIMEDIA: ESTILOS
   ========================================= */

/* CABECERA (Hero) */
.legado-hero {
    width: 100%;
    height: 50vh;
    min-height: 350px;
    background-color: #0B1713; 
    background-image: linear-gradient(to bottom, rgba(11,23,19,0.8), #0B1713), url('IMAGENES/textura_papel.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 5rem;
}

.legado-tag {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #A86442;
    display: block;
    margin-bottom: 1.5rem;
}

.legado-hero-content h1 {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 5vw, 4.5rem);
    color: #FDFBF7;
    font-weight: 400;
}

.legado-hero-content h1 .italic-text {
    font-style: italic;
    color: #E3D3C1;
}

/* ESTRUCTURA GENERAL */
.legado-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    margin-bottom: 4rem;
}

.center-header {
    text-align: center;
}

.center-header h2 {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    color: #2D2522;
    margin: 0.5rem 0 1rem;
}

.center-header p {
    font-family: var(--font-sans);
    color: #5A4D45;
    font-size: 1.1rem;
}

.deco-star {
    color: #A86442;
    font-size: 1.5rem;
}

/* =========================================
   SECCIÓN 1: MODELO 3D
   ========================================= */
.legado-3d-section {
    background-color: #FDFBF7; /* Beige crema */
    padding: 6rem 1.5rem;
}

.grid-3d-layout {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr; /* El centro es más ancho */
    gap: 2rem;
    align-items: center;
}

.process-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.process-img {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.process-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(80%); /* Efecto elegante, quítalo si quieres color */
    transition: filter 0.3s;
}

.process-img:hover img {
    filter: grayscale(0%);
}

.model-center {
    background-color: #EFEBE4; /* Un beige un poco más oscuro para hacer base */
    border-radius: 8px;
    padding: 2rem;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.03);
    border: 1px solid rgba(45,37,34,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* La magia del visor 3D */
model-viewer {
    width: 100%;
    height: 500px;
    outline: none;
    background-color: transparent;
    --poster-color: transparent;
}

.model-caption {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1rem;
}

/* =========================================
   SECCIÓN 2: REVISTA (Flipbook) Corregido
   ========================================= */
.legado-magazine-section {
    background-color: #0B1713; 
    padding: 6rem 1.5rem 8rem;
}

.dark-bg-header h2 { color: #FDFBF7; }
.dark-bg-header p { color: #9CA89B; }

.magazine-wrapper {
    width: 1005;
    max-width: 1100px;
    height: 700px; /* Aumentamos un poco la altura para que respire el flipbook */
    margin: 0 auto;
    background-color: transparent; /* Quitamos el fondo negro sólido */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    /* Eliminamos bordes y cajas pesadas para que el iframe flote limpio */
}

/* Hacemos que el Iframe de Heyzine llene exactamente el espacio limpio */
.magazine-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
}

.magazine-hint {
    text-align: center;
    font-family: var(--font-sans);
    color: #9CA89B;
    font-size: 0.9rem;
    margin-top: 2rem;
    font-style: italic;
}

/* RESPONSIVE MÓVIL */
@media (max-width: 900px) {
    .grid-3d-layout {
        grid-template-columns: 1fr;
    }
    
    /* Movemos el modelo 3D arriba en celulares */
    .model-center {
        order: -1; 
    }

    .process-col {
        flex-direction: row;
    }

    model-viewer {
        height: 350px;
    }

    .magazine-wrapper {
        height: 400px; /* Más pequeño en celular */
    }
}