.ancla-menu {
    display: block;
    position: relative;
    top: -110px; /* Ajusta la altura del menú para que el marco quede perfecto */
    visibility: hidden;
}
/* ==========================================================================
   1. CONFIGURACIÓN BASE Y TIPOGRAFÍA
   ========================================================================== */
@font-face {
    font-family: 'PalatinoCustom';
    src: url('../fonts/Palatino_reg.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    /* Cambiado a 'PalatinoCustom' para que coincida con tu @font-face */
    font-family: "PalatinoCustom", "Palatino", "Georgia", serif;
    background-color: #000;
    scroll-behavior: smooth; /* ¡AÑADE ESTA LÍNEA! */
    
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}
.scroll-wrapper {
    position: relative;
    width: 100%;
}

.pantalla-portada {
    width: 100%;
    height: 100dvh; /* Obliga a la portada a congelar el tamaño de la pantalla */
    position: relative;
}
/* ==========================================================================
   2. CARRUSEL DE FONDO (FLUIDO)
   ========================================================================== */
.carrusel-fondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Transición suave entre fotos */
}

/* La foto activa se muestra */
.slide.activa {
    opacity: 1;
}
/* ==========================================================================
   3. REGLA DE LOS TERCIOS (ESTÁTICA)
   ========================================================================== */
.cuadricula-tercios {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1; /* Por encima del fondo, por debajo del menú */
    pointer-events: none; /* Permite hacer clic a través de las líneas */
}

/* Estilo sutil para las líneas de la cuadrícula */
.linea-vertical, .linea-horizontal {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.15); /* Blanco semi-transparente muy fino */
}

.linea-vertical {
    width: 1px;
    height: 100%;
}

.linea-horizontal {
    height: 1px;
    width: 100%;
}

/* Posicionamiento exacto en los tercios (33.33% y 66.66%) */
.v1 { left: 33.33%; }
.v2 { left: 66.66%; }
.h1 { top: 33.33%; }
.h2 { top: 66.66%; }
 
/* ==========================================================================
   4. INTERFAZ DE USUARIO (AL FRENTE)
   ========================================================================== */
.interfaz-contenedor {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px; /* Margen elegante alrededor de la pantalla */
}

/* MENÚ SUPERIOR RESPONSIVO */
.menu-superior {
    position: fixed;
    top: 40px;
    right: 65px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 9999 !important;
}

.navegacion {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Color por defecto en fondos oscuros */
.menu-superior a {
    color: #eeeeee;
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.menu-superior a:hover {
    opacity: 0.6;
}

.navegacion a {
    margin-left: 25px;
}

/* Cuando toca un telón claro (blanco o salmón), las letras se vuelven oscuras */
.menu-superior.modo-oscuro a {
    color: #222222 !important;
}


/* ==========================================================================
   5. TRANSICIÓN DE LOGO INTERACTIVO ANCLADO AL SCROLL DEL RATÓN
   ========================================================================== */

.logo-central {
    /* DEFINICIÓN DE TAMAÑOS PARA ESCRITORIO */
    --logo-ancho-inicio: 78vw;
    --logo-ancho-fin: 180px;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(
        calc(-50% - (var(--scroll-progress, 0) * (50vw - 76px - 50%))), 
        calc(-50% - (var(--scroll-progress, 0) * (50vh - 40px - 50%)))
    );
    width: auto;
    height: auto;
    z-index: 9999 !important; /* Subido de 10 a 9999 para ganarle al telón blanco */
    pointer-events: none;      /* Evita que la caja invisible bloquee los clicks de la pantalla */
}
.enlace-logo {
    pointer-events: auto !important; /* Desbloquea los clicks solo en las letras */
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    width: 100%; /* Obliga al enlace a estirarse junto con el logo */
}

.logo-svg-wrapper img {
    width: calc(var(--logo-ancho-inicio) - (var(--scroll-progress, 0) * (var(--logo-ancho-inicio) - var(--logo-ancho-fin))));
    max-width: none; /* Mantén el none para que no haya brincos bruscos */
    height: auto;
    display: block;
    animation: aparecerConBlur 5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* ==========================================================================
   6. DISEÑO FINAL DEL TELÓN BLANCO
   ========================================================================== */
.telon-blanco {
    width: 100%;
    height: 100dvh;
    background-color: #ffffff;
    color: #808080;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 40px;
    position: sticky;
    top: 0;
    z-index: 10; /* Corre por debajo del logo y el menú (z-index 9999) */
    box-shadow: 0 -2px 23px rgba(0, 0, 0, 0.09);  
}

.contenido-telon {
    max-width: 800px;
    text-align: center;
}

.contenido-telon p {
    font-size: 16px;
    line-height: 1.8;
    color: #3a3a3a; /* Un tono grafito más nítido que el gris anterior */
}

/* ==========================================================================
   7. SECCIÓN TRABAJO (TELÓN DE CATEGORÍAS ASIMÉTRICO)
   ========================================================================== */

.telon-trabajo {
    width: 100%;
    min-height: 100vh;
    background-color: #2c2c2d;
    color: #ffffff;
    padding: 100px 15px 140px 15px !important; /* 👈 Solo 15px a los lados */
    position: sticky;
    top: calc(100vh - 100%);
    z-index: 20;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
    scroll-margin-top: 110px;
}

.contenedor-galeria {
    width: 100%;
    max-width: 96% !important; /* 👈 Aprovecha el 96% del ancho del monitor */
    margin: 0 auto;
    z-index: 20;
}

.titulo-seccion {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-family: "PalatinoCustom", serif;
    margin-bottom: 80px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 300;
    color: rgb(255, 255, 255);
}

/* Rejilla base de 12 columnas */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 60px 40px; /* Más espacio vertical entre filas */
    align-items: start;
}

/* Todas las tarjetas comparten el formato horizontal y la transición */
.galeria-item {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.galeria-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: grayscale(20%);
    transition: transform 0.6s ease, filter 0.6s ease;
}

.galeria-item:hover img {
    transform: scale(1.02);
    filter: grayscale(0%);
}

.info-proyecto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra perfectamente horizontal y vertical */
    margin-top: 0 !important;
    z-index: 2;
    text-align: center;
    width: 90%;
    pointer-events: none; /* Permite que el clic atraviese hacia el enlace */
}

.info-proyecto h3 {
    font-family: "PalatinoCustom", serif;
    font-size: 26px; /* Aumentado para destacar sobre la foto */
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f65a4f;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Opcional: da legibilidad si la imagen es clara */
}

.info-proyecto p {
    display: none;
    font-size: 13px;
    opacity: 0.6;
    letter-spacing: 0.5px;
}

/* 🧱 DISTRIBUCIÓN EQUILIBRADA (3 ARRIBA, 2 ABAJO CENTRADAS) */

/* Fila Superior: 3 imágenes de 4 columnas cada una */
.item-1 { grid-column: 1 / 5; }
.item-2 { grid-column: 5 / 9; }
.item-3 { grid-column: 9 / 13; }

/* Fila Inferior: 2 imágenes de 4 columnas cada una (mismo tamaño exacto que arriba)
   centradas ocupando las columnas 3 a 7 y 7 a 11 */
.item-4 { grid-column: 3 / 7; }
.item-5 { grid-column: 7 / 11; }

/* Posicionamiento superior para las dos primeras */
.item-1 img,
.item-2 img {
    object-position: top center !important;
}

/* ==========================================================================
   8. SUBGALERÍA INTERNA: COLLAGE EDITORIAL (LOOK ESQUIRE / MAGAZINE)
   ========================================================================== */

.btn-volver-flecha {
    color: rgb(148, 148, 148);
    text-decoration: none;
    font-size: 40px; /* Tamaño generoso pero fino */
    font-weight: 300;
    line-height: 1;
    display: inline-block;
    opacity: 0.5;
    
    /* El truco: Usamos una flecha apuntando a la derecha en el HTML 
       y la giramos 180 grados con CSS para que se vea perfectamente alineada */
    transform: rotate(180deg); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}
/* Hover sutil: la flecha se desplaza ligeramente a la izquierda y se ilumina */
.btn-volver-flecha:hover {
    opacity: 1;
    transform: rotate(180deg) translateX(5px); /* Pequeño empuje elegante */
}

.body-subgaleria {
    background-color: #000000;
    color: #ffffff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Cabecera elegante y sutil */
.header-editorial {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 60px 40px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    box-sizing: border-box;
}

.titulo-editorial {
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-family: "PalatinoCustom", serif;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0;
    color: rgb(148, 148, 148);
}

/* Contenedor del ensayo visual */
.collage-editorial {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* --- TIPOS DE BLOQUES DE FOTO --- */

.bloque-foto {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.bloque-foto img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* A. Pantalla Completa Sangrada (Edge-to-Edge) */
.bloque-foto.full-screen {
    width: 100%;
    height: auto; /* No rompe el scroll, se siente masiva */
}
.bloque-foto.full-screen img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.bloque-foto.full-screen.live {
    width: 100%;
    height: auto; /* No rompe el scroll, se siente masiva */
}
.bloque-foto.full-screen.live img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* B. Bloque Doble Asimétrico */
.bloque-doble {
    width: 100%;
    max-width: 1500px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 40px;
    padding: 0 40px;
    box-sizing: border-box;
}

.bloque-foto.vertical.izquierda {
    grid-column: 2 / 7; /* Toma 5 columnas a la izquierda dejando un margen */
}

.bloque-foto.vertical.derecha {
    grid-column: 8 / 12; /* Toma 4 columnas y se desfasa un poco hacia abajo */
    margin-top: 100px; 
}

.bloque-foto.vertical.izquierda.live {
    grid-column: 3 / 7; /* Toma 5 columnas a la izquierda dejando un margen */
}

.bloque-foto.vertical.derecha.live {
    grid-column: 8 / 13; /* Toma 4 columnas y se desfasa un poco hacia abajo */
    margin-top: 100px; 
}

/* C. Centrado y Enmarcado con Aire */
.bloque-foto.centrado-enmarcado {
    max-width: 1100px;
    padding: 0 40px;
    box-sizing: border-box;
}

/* --- RITMO Y ESPACIADORES (El secreto del lujo) --- */
.espaciador-editorial {
    height: 140px;
}
.espaciador-editorial.largo {
    height: 240px; /* Para generar suspenso visual antes de una foto enorme */
}

/* ==========================================================================
   9. SUBGALERÍA INTERNA: ILUSTRACIÓN (CANVAS BLANCO & ESTILO MUSEO)
   ========================================================================== */

/* Esto obliga al navegador a pintar de blanco la pantalla completa SOLO en esta página */
html:has(body.body-ilustracion) {
    background-color: #ffffff !important;
}

body.body-ilustracion {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #111111 !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Cabecera minimalista oscura */
.header-ilustracion {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 60px 40px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    box-sizing: border-box;
}

.titulo-ilustracion {
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-family: "PalatinoCustom", serif;
    font-weight: 300;
    letter-spacing: 2px;
    margin: 0;
    color: rgb(148, 148, 148);
}

/* Contenedor principal de la galería blanca */
.galeria-blanca {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px 140px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 160px; /* Espacio masivo tipo museo */
}

/* Reset de imágenes transparentes para marcos barrocos */
.galeria-blanca img {
    width: 100%;
    height: auto;
    display: block;
}

/* Textos informativos tipo ficha técnica */
.info-obra {
    display: block;
    margin-top: 15px;
    font-size: 11px;
    letter-spacing: 2px;
    color: #888888;
    text-transform: uppercase;
    font-family: sans-serif;
}

/* --- REJILLAS Y DISTRIBUCIONES POR NIVELES --- */

/* Nivel 1: Horizontal Centrada */
.bloque-ilustracion.destacada {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* Nivel 2: Díptico de 2 Verticales Desfasadas */
.bloque-diptico {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.ilustracion-item.v-2 {
    margin-top: 80px; /* El desfase asimétrico que rompe la monotonía */
}

/* Nivel 3: Cuadrada + Texto */
.bloque-cuadrada-texto {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.ilu-media-cuadrada {
    grid-column: 1 / 7; /* Ocupa 6 columnas de la izquierda */
}
.ilu-texto-curatorial {
    grid-column: 8 / 13; /* Ocupa 5 columnas de la derecha (dejando 1 de aire en medio) */
}
.descripcion-obra {
    font-family: "PalatinoCustom", serif;
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    line-height: 1.7;
    color: #555555;
    font-style: italic;
    margin: 0;
}

/* Nivel 4: Tríptico (3 Verticales) */
.bloque-triptico-vertical {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
}

/* Nivel 5: Asimétrico Final (1 Horizontal + 1 Vertical) */
.bloque-asimetrico-final {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 60px;
    align-items: flex-start;
    width: 100%;
}
.ilustracion-item.h-final {
    grid-column: 1 / 8; /* Horizontal a la izquierda (7 columnas) */
}
.ilustracion-item.v-final {
    grid-column: 9 / 13; /* Vertical a la derecha (4 columnas) */
}

/* ==========================================================================
   10. SUBGALERÍA INTERNA: AUDIOVISUAL (CINE OSCURO)
   ========================================================================== */

/* Corrección de scroll para la página/subgalería audiovisual */
html:has(.body-audiovisual),
html:has(.body-ilustracion),
html:has(.body-diseno),
body.body-audiovisual,
body.body-ilustracion,
body.body-diseno {
    overflow-y: scroll !important;
    height: auto !important;
    min-height: 100% !important;
    position: relative !important;
    overscroll-behavior-y: auto !important;
}

/* Cabecera clara minimalista */
.header-audiovisual {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 60px 40px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    box-sizing: border-box;
}

.titulo-audiovisual {
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-family: "PalatinoCustom", serif;
    font-weight: 300;
    letter-spacing: 2px;
    margin: 0;
    color: rgb(148, 148, 148);
}

/* Contenedor principal de videos (Alineados uno abajo del otro) */
.galeria-oscura-video {
    width: 100%;
    max-width: 1000px; /* Limita el ancho de los reproductores para que no se vean gigantescos */
    margin: 0 auto;
    padding: 0 40px 140px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 100px; /* Espaciado generoso y elegante entre videos */
}

/* Estructura de cada item de video */
.video-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Truco moderno de relación de aspecto 16:9 */
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Forzamos la relación de aspecto cinematográfica */
    background-color: #111111; /* Fondo de carga elegante */
    border-radius: 2px; /* Un micro-borde redondeado apenas perceptible */
    overflow: hidden;
}

/* Ajuste responsivo absoluto del reproductor de YouTube */
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* <--- Esto reemplaza al viejo frameborder="0" */
}

/* Texto del nombre de la pieza debajo del video */
.info-video {
    display: block;
    margin-top: 18px;
    font-size: clamp(12px, 1vw, 14px);
    letter-spacing: 2px;
    color: #888888;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: 300;
    transition: color 0.3s ease;
}

/* Pequeño detalle interactivo al pasar el mouse sobre el bloque del video */
.video-item:hover .info-video {
    color: #ffffff; /* El texto se ilumina a blanco cuando interactúas */
}

.body-audiovisual .footer-proyecto {
    display: flex !important;
    position: relative !important;
    z-index: 9999 !important;
    margin: 60px auto 40px auto !important;
    color: #ffffff !important;
}

.body-audiovisual .footer-proyecto .link-volver,
.body-audiovisual .footer-proyecto p {
    color: #888888 !important; /* Tono gris elegante */
    opacity: 1 !important;
}

.body-audiovisual .footer-proyecto .link-volver:hover {
    color: #ffffff !important; /* Se ilumina a blanco al pasar el mouse */
}

/* ==========================================================================
   ESTILO FACADE PARA REPRODUCTORES DE VIDEO (CARGA DIFERIDA ULTRA RÁPIDA)
   ========================================================================== */
.video-facade {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
    filter: brightness(0.85);
}
.video-facade:hover img {
    transform: scale(1.02);
    filter: brightness(1);
}
/* Botón Play circular (Escritorio: 64px) */
.btn-play-custom {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(4px); /* Soporte para Safari en iOS / macOS */
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none; /* El click atraviesa directamente hacia el contenedor */
}
.btn-play-custom svg {
    width: 22px;
    height: 22px;
    fill: #ffffff;
    margin-left: 3px; /* Ajuste óptico para centrar el triángulo */
    transition: transform 0.3s ease;
}
/* Hover interactivo con el rojo coral de BELTNATION (Escritorio) */
.video-facade:hover .btn-play-custom {
    background: rgba(246, 90, 79, 0.9);
    border-color: transparent;
    transform: scale(1.1);
}
.video-facade:hover .btn-play-custom svg {
    transform: scale(1.05);
}

/* ==========================================================================
   11. SUBGALERÍA INTERNA: DISEÑO (ÍNDICE MODULAR HÍBRIDO H/V)
   ========================================================================== */

html:has(body.body-diseno) {
    background-color: #f8f9fa !important;
}

body.body-diseno {
    background-color: #f8f9fa !important;
    background: #f8f9fa !important;
    color: #000000 !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.header-diseno {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 60px 40px 40px 40px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    box-sizing: border-box;
}

.titulo-diseno {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-family: "PalatinoCustom", serif;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
    color: rgb(148, 148, 148);
}

/* GRILLA MODULAR CON AUTO-FLOW DENSO */
.grid-diseno-masivo {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 40px 140px 40px;
    box-sizing: border-box;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-flow: dense; /* Rellena espacios vacíos automáticamente */
    gap: 60px 40px;
}

.pieza-diseno-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    width: 100%;
    position: relative;
    cursor: default;
}

.contenedor-img-diseno {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background-color: #f8fafb;
}

.contenedor-img-diseno img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    display: block;
    object-fit: contain;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.pieza-diseno-link:hover .contenedor-img-diseno img {
    transform: scale(1.04);
}
/* --- PROPORCIONES ESPECÍFICAS H/V --- */

/* Estándar Horizontal (6:4 o 3:2) */
.pieza-diseno-link.horizontal .contenedor-img-diseno {
    aspect-ratio: 3 / 2;
}

/* Estándar Vertical (4:6 o 2:3) */
.pieza-diseno-link.vertical .contenedor-img-diseno {
    aspect-ratio: 2 / 3;
}

/* PIE DE FOTO */
.detalles-pieza-diseno {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: "PalatinoCustom", serif;
}

.detalles-pieza-diseno h3 {
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.5px;
    color: #111111;
    margin: 0;
}

.detalles-pieza-diseno span {
    font-family: sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #888888;
    text-transform: uppercase;
}
/* ==========================================================================
   12. SECCIÓN CV (TELÓN EDITORIAL OBSCURO)
   ========================================================================== */
.telon-cv{
    width: 100%;
    max-width: 100%;
    background-color: #111111;
    color: #ffffff;
    padding: 60px 150px;
    position: sticky;
    top: calc(-25vh - 100%);
    z-index: 30; 
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
    scroll-margin-top: 110px;
}

.contenedor-cv {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
.columna-datos-cv{
    width: 100%;
    margin-bottom: 20px;
    }

.contenedor-cv img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
    margin-bottom: 20px;
}

.titulo-seccion-cv {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-family: "PalatinoCustom", serif;
    margin-bottom: 80px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 300;
    color: rgb(148, 148, 148);
}

.grid-cv {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
}

.subtitulo-cv {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888888;
    margin-bottom: 22px;
    font-family: sans-serif;
    font-weight: 400;
}

.item-cv {
    margin-bottom: 45px;
}

.fecha-cv {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #666666;
    display: block;
    margin-bottom: 6px;
    font-family: sans-serif;
}

.item-cv h4 {
    font-size: 20px;
    font-family: "PalatinoCustom", serif;
    font-weight: normal;
    margin-bottom: 4px;
}

.empresa-cv {
    font-size: 13px;
    opacity: 0.6;
    font-style: italic;
    margin-bottom: 10px;
}

.descripcion-cv {
    font-size: 14px;
    line-height: 1.6;
    color: #aaaaaa;
    font-weight: 300;
}
/* 1. Layout general: Columna izquierda a ~30% (o 300px), columna derecha toma el resto */
.layout-cv-editorial {
    display: grid;
    grid-template-columns: 26% 1fr; /* 320px equivale aprox a 1/3 en la mayoría de laptops */
    gap: 30px;
    align-items: start;
}

/* 2. Ajuste de la foto para que llene su columna sin salirse */
.contenedor-foto-cv img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ==========================================
   TELÓN CONTACTO (#ffb9ac)
========================================== */
.telon-contacto {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background-color: #ffb9ac;
    color: #808080;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    /* CAPAS Y POSICIÓN SOBRE EL CV */
    position: sticky;
    top:calc(60vh - 100%);
    z-index: 40;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
    
}

.contenedor-contacto {
    width: 100%;
    max-width: 1200px; /* O el ancho que estés usando */
    height: auto !important;
    min-height: auto !important;
    margin: 0 auto;
    position: relative;
    top: 0;
}

#contacto .titulo-seccion-contacto {
    font-family: 'Palatino', serif !important;
    font-size: 42px !important; /* Puedes probar con 36px, 42px o 48px */
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 70px !important;
    color: #f65a4f !important;
    opacity: 1 !important;
    padding-top: 80px;
}

.bloque-contacto {
    margin-top: 120px;
}

.subtitulo-contacto {
    font-family: 'Palatino', serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: #111111;
    opacity: 0.6;
}

.texto-contacto {
    font-family: 'Palatino', serif;
    font-size: 24px;
    line-height: 2.9;
    color: #111111;
    margin-bottom: 8px;
}

/* ESCRITORIO */
#contacto .email-contacto {
    font-family: 'Palatino', serif !important;
    font-size: 31px !important; /* Ajusta aquí el tamaño (ej. 42px, 48px o 56px) */
    line-height: 1.2 !important;
    color: #111111 !important;
    text-decoration: underline !important;
    text-underline-offset: 8px !important;
    transition: opacity 0.3s ease !important;
}

#contacto .email-contacto:hover {
    opacity: 0.6 !important;
}

.email-contacto:hover {
    opacity: 0.6;
}
.whatsapp-contacto {
    font-family: 'Palatino', serif;
    font-size: 32px;
    color: #111111;
    text-decoration: underline;
    text-underline-offset: 6px;
    transition: opacity 0.3s ease;
    display: inline-block;
}

.whatsapp-contacto:hover {
    opacity: 0.6;
}

.footer-contacto {
    margin-top: auto;
    padding-top: 20px;
    padding-bottom: 28px;
    border-top: 1px solid rgba(17, 17, 17, 0.15); /* Línea muy sutil */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-contacto p {
    font-family: 'Palatino', serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #111111;
    opacity: 0.5;
}



    

.footer-proyecto {
    width: 100%;
    max-width: 1000px; /* 👈 Controla qué tan juntos quedan (reduce a 800px si los quieres aún más al centro) */
    margin: 100px auto 0 auto; /* 👈 El 'auto' a los lados lo centra en la pantalla */
    padding: 40px 20px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* O usa rgba(0, 0, 0, 0.1) si el fondo es claro */
}

.link-volver, .footer-proyecto p {
    font-family: 'PalatinoCustom', serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.link-volver:hover {
    opacity: 1;
}



/* ==========================================================================
   LIGHTBOX EDITORIAL (VISOR A PANTALLA COMPLETA)
   ========================================================================== */

/* Cursor de lupa para que el usuario sepa que puede ampliar */
.bloque-foto img,
.galeria-blanca img,
.contenedor-img-diseno img {
    cursor: zoom-in;
}

/* Telón de fondo oscuro con efecto de cristal */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: zoom-out;
    padding: 30px;
    box-sizing: border-box;
}

/* Estado activo cuando se abre */
.lightbox-overlay.activo {
    opacity: 1;
    pointer-events: auto;
}

/* La imagen ampliada */
.lightbox-img {
    max-width: 90vw;
    max-height: 82vh;
    object-fit: contain;
    transform: scale(0.95);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    user-select: none;
}

.lightbox-overlay.activo .lightbox-img {
    transform: scale(1);
}

/* Título o ficha técnica de la obra debajo de la imagen */
.lightbox-caption {
    margin-top: 18px;
    color: #888888;
    font-family: 'PalatinoCustom', serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    max-width: 800px;
}

/* Botón cerrar sutil en la esquina */
.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.lightbox-close:hover {
    opacity: 1;
    transform: scale(1.1);
}








/* ==========================================================================
   KEYFRAMESSSSSS
   ========================================================================== */

@keyframes aparecerConBlur {
    0% {
        filter: blur(15px);
        opacity: 0;
        transform: scale(1.1); /* Empieza un poco más grande */
    }
    100% {
        filter: blur(0);
        opacity: 1;
        transform: scale(1.25); /* Lo escala a 1.25 veces su tamaño para que rompa los límites como tu boceto */
    }
}
    
/* Animación optimizada para móviles (evita saltos de escala bruscos) */
@keyframes aparecerConBlurMobile {
    0% {
        filter: blur(10px);
        opacity: 0;
    }
    100% {
        filter: blur(0);
        opacity: 1;
    }
}






/* ==========================================================================
   MEDIA QUERY: MÓVIL
   ========================================================================== */
@media (max-width: 768px) {
    html, body {
    width: 100%;
    max-width: 100vw;
    
}

    .interfaz-contenedor {
        padding: 24px 20px;
    }

    .menu-superior {
        position: fixed;
        top: 44px;
        right: 30px;
        width: auto;
        display: flex;
        justify-content: flex-end;
        z-index: 9999 !important;
        
    }

    .navegacion a {
    margin-left: 8px;     /* Más separación entre palabras */
    padding: 8px 4px;      /* Área táctil cómoda para el pulgar */
    font-size: 11px;
    letter-spacing: 1.5px;
}

    .logo-central {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(
            calc(-50% - (var(--scroll-progress, 0) * (50vw - 40px - 50%))), 
            calc(-50% - (var(--scroll-progress, 0) * (50vh - 42px - 50%)))
        );
    }

    .logo-central .logo-svg-wrapper img {
        width: calc(76vw - (var(--scroll-progress, 0) * (76vw - 120px))) !important;
        max-width: none !important; 
        min-width: 0 !important;
        z-index: 9999 !important;
    }

    /* 1. TELÓN TRABAJO: Rueda sobre el blanco, permite ver los 5 proyectos y se congela al final */
    .telon-trabajo {
        position: sticky !important;
        top: var(--top-sticky-trabajo, -1000px) !important;
        z-index: 20 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        padding: 80px 20px 80px 20px !important;
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.4) !important;
    }

    
    /* 2. TELÓN CV: Rueda sobre trabajo, permite leer todo el CV completo y se congela al final */
    .telon-cv {
        position: sticky !important;
        top: var(--top-sticky-cv, -3000px) !important;
        z-index: 30 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        padding: 80px 20px 100px 20px !important;
        box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.6) !important;
    }

    .contenedor-cv {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .telon-cv img, .contenedor-cv img {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        margin-top: 0 !important;
    }

    .header-editorial,
    .header-ilustracion,
    .header-audiovisual,
    .header-diseno {
        padding: 40px 20px;
        flex-direction: column-reverse;
        gap: 15px;
    }

    .bloque-doble {
        display: flex;
        flex-direction: column;
        gap: 60px;
        padding: 0 20px;
    }

    .bloque-foto.vertical.derecha,
    .bloque-foto.vertical.derecha.live {
        margin-top: 0;
    }

    .bloque-foto.full-screen, 
    .bloque-foto.full-screen img {
        height: auto !important;
        width: 100% !important;
    }

    .bloque-foto.centrado-enmarcado { padding: 0 20px; }
    .espaciador-editorial { height: 80px; }
    .espaciador-editorial.largo { height: 100px; }

    .galeria-grid {
        display: flex !important;
        flex-direction: column;
        gap: 30px !important;
    }

    .galeria-item {
        grid-column: auto !important;
        margin-top: 0 !important;
        width: 100% !important;
    }

    .galeria-item img {
        max-height: 100vh !important;
        object-fit: cover !important;
    }

    .telon-blanco { 
        position: sticky;
        box-shadow: 0 0 17px rgba(0, 0, 0, 0.4);
    
    }

    .galeria-blanca {
        gap: 80px;
        padding: 0 20px 80px 20px;
    }

    .bloque-diptico {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .ilustracion-item.v-2 { margin-top: 0; }

    .bloque-cuadrada-texto,
    .bloque-triptico-vertical,
    .bloque-asimetrico-final {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .galeria-oscura-video {
        padding: 0 20px 80px 20px;
        gap: 60px;
    }

    .grid-diseno-masivo {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 20px 15px;
    }

    .pieza-diseno-link.destacada-horizontal,
    .pieza-diseno-link.destacada-vertical,
    .pieza-diseno-link.horizontal,
    .pieza-diseno-link.vertical {
        width: 100%;
    }

    .contenedor-img-diseno { height: auto; }

    .grid-cv {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .columna-perfil-cv img { 
        padding: 0;
        margin-bottom: 45px;
    }

    .ubicacion-cv { margin-bottom: 0; }

    .pieza-diseno-link.destacada-horizontal { grid-column: span 2; }
    .pieza-diseno-link.destacada-horizontal .contenedor-img-diseno { aspect-ratio: 16 / 9; }

    .pieza-diseno-link.destacada-vertical { grid-row: span 2; }
    .pieza-diseno-link.destacada-vertical .contenedor-img-diseno {
        aspect-ratio: 9 / 16;
        height: 100%;
    }

    .layout-cv-editorial { grid-template-columns: 1fr; }
    .columna-datos-cv { padding: 0 20px; }
    .columna-perfil-cv { padding: 0 24px; }

    .contenedor-foto-cv img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    margin-bottom: 25px;
}

/* 3. TELÓN CONTACTO: Entra por encima del CV y cierra la página */
    .telon-contacto {
        position: relative !important;
        top: 0;
        z-index: 40 !important;
        width: 100% !important;
        min-height: 100dvh !important;
        padding: 80px 24px !important;
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.3) !important;
    }

    .contenedor-contacto {
    height: auto!important;
    margin: 0;
    position: relative;
    top: 10px;
}

    .titulo-seccion-contacto {
        font-size: 12px !important;
        margin-bottom: 40px !important;
    }
    
    .footer-contacto p {
    font-family: 'Palatino', serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #111111;
    opacity: 0.5;
    margin-bottom: 0;
}

    .bloque-contacto {
        margin-bottom: 36px !important;
    }

    .subtitulo-contacto {
        font-size: 10px !important;
    }

    .texto-contacto {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .email-contacto {
        font-size: 20px !important;
        word-break: break-all;            /* Evita que el correo rompa el ancho del cel */
    }
    .whatsapp-contacto {
    font-size: 22px !important;
    white-space: nowrap; /* Mantiene la clave de número en una sola línea */
    }
    .btn-play-custom {
        width: 50px;
        height: 50px;
    }
    .btn-play-custom svg {
        width: 18px;
        height: 18px;
        margin-left: 2px;
    }
    .bloque-foto,
    .ilustracion-item,
    .contenedor-img-diseno {
        background-color: rgba(255, 255, 255, 0.03); /* Un tono muy tenue que reserva el área */
    }
    .body-ilustracion .ilustracion-item,
    .body-diseno .contenedor-img-diseno {
        background-color: #ffffff; /* Tono tenue para las páginas de fondo claro */
    }
    
    .lightbox-close {
        top: 20px;
        right: 25px;
        font-size: 24px;
    }
    .lightbox-img {
        max-width: 95vw;
        max-height: 75vh;
    }
    
}