/* ==========================================================================
   LIBRAPHOTOS v3 — PRINT-BRUTALISMO MINIMAL
   Sistema: tokens MASTER (Negro/Ámbar/Violeta · Syne/Lora/IBM Plex Mono)
   Arquetipos por zona: OBRA claro (Swiss Industrial Print) → quiebre violeta →
   zona noche (tactical dark) · ÁMBAR = sala oscura contemplativa.
   Reglas: radius 0 · max-width en media queries · solo transform/opacity/filter
   ========================================================================== */

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

img {
    user-select: none;
    -webkit-user-drag: none;
    max-width: 100%;
    display: block;
}

:root {
    /* Paleta oficial (LIBRAPHOTOS_MASTER.md) */
    --negro: #000000;
    --blanco: #FFFFFF;
    --accent-amber: #F7A810;
    --accent-violet: #4B0082;
    --gray-dark: #333333;
    --gray-mid: #666666;
    --gray-light: #CCCCCC;
    --paper-text: #F0F0F0;

    /* Tema activo (lo redefine cada zona/página) */
    --bg: var(--blanco);
    --text: var(--negro);
    --accent: var(--accent-amber);

    /* Tipografía oficial */
    --font-display: 'Syne', 'Avenir Next Heavy', 'Avenir Next', sans-serif;
    --font-body: 'Lora', 'Georgia', serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', Courier, monospace;

    /* Escala tipográfica fluida */
    --text-mono-xs: 0.625rem;
    --text-mono-sm: 0.75rem;
    --text-body: 1.0625rem;
    --text-h3: clamp(1.4rem, 2.6vw, 2.2rem);
    --text-h2: clamp(1.4rem, 7vw, 6.5rem);
    --text-display: clamp(2.4rem, 11.6vw, 11.6rem);
    --text-numeral: clamp(4rem, 12vw, 12rem);

    /* Escala de espaciado */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;
    --space-7: 9rem;
    --space-8: 13rem;

    /* Curva del sitio (ease-out custom — M1) */
    --transition-stiff: 0.35s cubic-bezier(0.19, 1, 0.22, 1);
    --transition-fast: 0.16s cubic-bezier(0.19, 1, 0.22, 1);

    /* Z-INDEX SCALE (documentada — M2)
     *   1-99 componentes locales · 500 navbar · 950 grain
     *   1000-1499 viewer · 1600 modal · 20000 loader
     */
    --z-base: 1;
    --z-above-local: 5;
    --z-navbar: 500;
    --z-grain: 950;
    --z-lightbox: 1000;
    --z-lightbox-story: 1200;
    --z-modal: 1600;
    --z-skip: 10000;
    --z-preloader: 20000;
}

/* ==========================================================================
   BASE
   ========================================================================== */
/* Sin background propio: los tokens de tema viven en body, así que el fondo
   del body se propaga al lienzo y cada página pinta el suyo. Con un color aquí,
   html se quedaba con el --bg del :root (blanco) y asomaba al rebotar el scroll
   en las páginas oscuras. */
/* overflow-x: clip, nunca hidden: con `hidden` en un eje el otro pasa de
   `visible` a `auto` por spec, html/body se vuelven contenedores de scroll y
   el `position: sticky` de la sala de Ámbar se pega a algo que nunca se mueve.
   `clip` recorta igual sin crear contenedor de scroll (computa "clip visible"). */
html {
    color: var(--text);
    overflow-x: clip;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-display);
    min-height: 100vh;
    overflow-x: clip; /* ver nota en html: `hidden` rompe el sticky de Ámbar */
    position: relative;
}

body.obra {
    --bg: var(--blanco);
    --text: var(--negro);
    --accent: var(--accent-amber);
}

body.ambar {
    --bg: var(--negro);
    --text: var(--paper-text);
    --accent: var(--accent-amber);
    font-family: var(--font-body);
}

/* Zona oscura de OBRA: música + cierre. Mismo mecanismo de tokens. */
.zona-noche {
    --bg: var(--negro);
    --text: var(--paper-text);
    background-color: var(--bg);
    color: var(--text);
}

.mono {
    font-family: var(--font-mono);
    font-size: var(--text-mono-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: var(--space-2);
    z-index: var(--z-skip);
    background: var(--negro);
    color: var(--blanco);
    padding: 10px 16px;
    text-decoration: none;
}

.skip-link:focus-visible {
    top: var(--space-2);
}

:focus-visible {
    outline: 2px solid var(--accent-amber);
    outline-offset: 2px;
}

::selection {
    background: var(--accent-amber);
    color: var(--negro);
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 0;
}

/* Feedback físico en todo lo presionable (M1) */
button:active,
.cover-frame:active {
    transform: scale(0.97);
}

/* ==========================================================================
   GRAIN (capa fixed + pointer-events none — M2)
   ========================================================================== */
.grain-overlay {
    position: fixed;
    inset: -100px;
    pointer-events: none;
    z-index: var(--z-grain);
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain-shift 1.2s steps(10) infinite;
}

@keyframes grain-shift {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-30px, 20px); }
    40%  { transform: translate(20px, -35px); }
    60%  { transform: translate(-25px, -15px); }
    80%  { transform: translate(30px, 25px); }
    100% { transform: translate(0, 0); }
}

/* ==========================================================================
   LOADER DE PRIMERA VISITA
   ========================================================================== */
.site-loader[hidden] {
    display: none;
}

.site-loader {
    position: fixed;
    inset: 0;
    z-index: var(--z-preloader);
    background: var(--negro);
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.site-loader.exit {
    opacity: 0;
    visibility: hidden;
}

.loader-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.loader-brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 7vw, 4rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.loader-counter {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--accent-amber);
    letter-spacing: 0.2em;
}

.loader-label {
    color: var(--gray-mid);
    font-size: var(--text-mono-xs);
}

body.pre-reveal .obra-view,
body.pre-reveal .site-footer {
    opacity: 0;
}

body:not(.pre-reveal) .obra-view,
body:not(.pre-reveal) .site-footer {
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--space-3);
    background: var(--bg);
    color: var(--text);
    border-bottom: 1px solid var(--text);
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* El quiebre conmuta la navbar al arquetipo oscuro (toggle scroll-driven de motion.js) */
body.tema-noche .navbar {
    background: var(--negro);
    color: var(--paper-text);
    border-bottom-color: var(--gray-dark);
}

.brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nav-links a,
.nav-links button {
    text-decoration: none;
    font-size: var(--text-mono-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    white-space: nowrap;
    opacity: 0.55;
    transition: opacity var(--transition-fast);
}

.nav-links a[aria-current="page"] {
    opacity: 1;
    color: var(--accent);
}

.nav-links a:hover,
.nav-links button:hover {
    opacity: 1;
}

/* ==========================================================================
   HERO — tipográfico sobre grilla de registro
   ========================================================================== */
.obra-view {
    /* Grilla de marcas de registro "+" (solo zona claro; zona-noche la tapa) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M10 2v16M2 10h16' stroke='%23000000' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E");
}

.zona-noche {
    background-image: none;
}

.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(52px + var(--space-3)) var(--space-3) var(--space-3);
}

.hero-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--text);
    color: var(--gray-mid);
    font-size: var(--text-mono-xs);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-display);
    line-height: 0.85;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: auto 0;
}

.hero-sub {
    font-size: var(--text-mono-sm);
    letter-spacing: 0.22em;
    margin-bottom: var(--space-5);
}

.hero-foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--text);
    font-size: var(--text-mono-xs);
    color: var(--gray-mid);
}

.hero-foot .hero-foot-mid {
    color: var(--text);
}

/* ==========================================================================
   CAPÍTULOS
   ========================================================================== */
.chapter {
    padding: var(--space-7) var(--space-3) var(--space-5);
}

.chapter-meta {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--text);
    padding-top: var(--space-2);
    margin-bottom: var(--space-5);
    color: var(--gray-mid);
}

.chapter-meta span:first-child {
    color: var(--accent);
}

.chapter-line {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-h2);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.chapter-sub {
    margin-top: var(--space-3);
    color: var(--gray-mid);
    max-width: 60ch;
}

/* ==========================================================================
   COVERS (índice de proyectos = la navegación)
   ========================================================================== */
.covers {
    display: flex;
    flex-direction: column;
}

.cover-item {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-3);
    align-items: end;
    padding: var(--space-6) var(--space-3);
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

/* Composición alternada (M3: secciones consecutivas no comparten layout) */
.cover-item:nth-child(odd) .cover-frame  { grid-column: 1 / 8; grid-row: 1; }
.cover-item:nth-child(odd) .cover-meta   { grid-column: 8 / 13; grid-row: 1; }
.cover-item:nth-child(even) .cover-frame { grid-column: 6 / 13; grid-row: 1; }
.cover-item:nth-child(even) .cover-meta  { grid-column: 1 / 6; grid-row: 1; text-align: right; }

.cover-frame {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.cover-img {
    width: 100%;
    height: auto;
    max-height: 82vh;
    object-fit: cover;
    object-position: center 20%;
    transition: filter var(--transition-stiff);
}

.cover-hint {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    background: var(--negro);
    color: var(--blanco);
    padding: 6px 10px;
    font-size: var(--text-mono-xs);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.cover-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
}

.cover-item:nth-child(even) .cover-meta {
    align-items: flex-end;
}

.cover-numeral {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-numeral);
    line-height: 0.8;
    letter-spacing: -0.04em;
}


.cover-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h3);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.cover-data {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-mono-xs);
    color: var(--gray-mid);
}

.cover-data span:first-child {
    color: var(--accent);
}

/* ==========================================================================
   QUIEBRE VIOLETA — frontera ceremonial pasarela → música
   ========================================================================== */
.quiebre {
    background: var(--accent-violet);
    color: var(--paper-text);
    min-height: 55vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-3);
    text-align: center;
}

.quiebre-marks {
    letter-spacing: 0.3em;
    opacity: 0.6;
}

.quiebre-text {
    font-family: var(--font-mono);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    line-height: 2;
}

/* ==========================================================================
   EL OJO — about mínimo (zona noche)
   ========================================================================== */
.el-ojo {
    max-width: 760px;
    padding: var(--space-7) var(--space-3);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ojo-label {
    color: var(--accent);
}

.ojo-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h3);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.ojo-bio {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--gray-light);
}

.ojo-gear,
.ojo-registro {
    font-size: var(--text-mono-xs);
    line-height: 2;
    color: var(--gray-mid);
    border-top: 1px solid var(--gray-dark);
    padding-top: var(--space-2);
}

.ojo-gear-title,
.ojo-registro-title {
    color: var(--accent);
    margin-right: var(--space-1);
}

/* ==========================================================================
   CONTACTO (zona noche)
   ========================================================================== */
.contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-7) var(--space-3) var(--space-8);
    text-align: center;
}

.agenda-line {
    color: var(--gray-mid);
}

.btn-hablemos {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 5vw, 3.4rem);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    padding: var(--space-3) var(--space-5);
    border: 2px solid currentColor;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-hablemos:hover {
    background: var(--accent-amber);
    color: var(--negro);
    border-color: var(--accent-amber);
}

.alt-contact-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}

.alt-contact-btn {
    text-decoration: none;
    font-size: var(--text-mono-xs);
    color: var(--gray-mid);
    transition: color var(--transition-fast);
}

.alt-contact-btn:hover {
    color: var(--accent);
}

.link-ambar {
    margin-top: var(--space-5);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gray-light);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-amber);
    padding-bottom: 4px;
    transition: color var(--transition-fast);
}

.link-ambar:hover {
    color: var(--accent-amber);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3);
    border-top: 1px solid var(--gray-dark);
    background: var(--negro);
    color: var(--gray-mid);
    font-size: var(--text-mono-xs);
}

.footer-left,
.footer-right {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.footer-logo {
    color: var(--paper-text);
    font-family: var(--font-display);
    font-weight: 700;
}

.footer-link {
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--accent-amber);
}

/* ==========================================================================
   MODAL DE CONTACTO (formulario print sobre velo oscuro)
   ========================================================================== */
.contact-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    padding: var(--space-2);
}

.contact-modal.open {
    display: flex;
}

.modal-content {
    position: relative;
    background: var(--blanco);
    color: var(--negro);
    width: min(560px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    border: 2px solid var(--negro);
    box-shadow: 10px 10px 0 var(--accent-amber);
    padding: var(--space-4);
}

.modal-close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    letter-spacing: 0.08em;
    padding: 6px;
}

.modal-close:hover {
    color: var(--accent-violet);
}

.modal-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.modal-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--gray-dark);
    margin: var(--space-2) 0 var(--space-3);
    line-height: 1.6;
}

.contact-form-fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    letter-spacing: 0.08em;
    color: var(--gray-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 12px;
    border: 1px solid var(--negro);
    border-radius: 0;
    background: var(--blanco);
    color: var(--negro);
    resize: vertical;
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--accent-amber);
    outline-offset: 0;
}

.form-submit-btn {
    font-family: var(--font-mono);
    font-size: var(--text-mono-sm);
    letter-spacing: 0.1em;
    padding: 16px;
    background: var(--negro);
    color: var(--blanco);
    border: 1px solid var(--negro);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.form-submit-btn:hover:not(:disabled) {
    background: var(--accent-amber);
    color: var(--negro);
}

.form-submit-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.modal-footer-info {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding-top: var(--space-2);
    border-top: 1px solid var(--gray-light);
    color: var(--gray-mid);
    font-size: var(--text-mono-xs);
}

/* ==========================================================================
   VIEWER DE ÁLBUMES (full-bleed, herencia del lightbox v2)
   ========================================================================== */
.album-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
    display: none;
    background: var(--negro);
    color: var(--paper-text);
}

.album-lightbox.open {
    display: flex;
}

.lightbox-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.lightbox-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px var(--space-3);
    border-bottom: 1px solid var(--gray-dark);
    font-size: var(--text-mono-xs);
}

.lightbox-project-id {
    color: var(--accent-amber);
}

.lightbox-project-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gray-light);
}

.lightbox-fullscreen,
.lightbox-close {
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    letter-spacing: 0.08em;
    color: var(--gray-light);
    padding: 6px;
    transition: color var(--transition-fast);
}

.lightbox-fullscreen:hover,
.lightbox-close:hover {
    color: var(--accent-amber);
}

.lightbox-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.lightbox-img-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-6);
}

.lightbox-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.19s ease;
}

.lightbox-img-container.loading::after {
    content: '[ CARGANDO ]';
    position: absolute;
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    letter-spacing: 0.2em;
    color: var(--gray-mid);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-above-local);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: var(--space-3) var(--space-2);
    color: var(--paper-text);
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.lightbox-nav:hover {
    color: var(--accent-amber);
}

.lightbox-nav.prev { left: var(--space-1); }
.lightbox-nav.next { right: var(--space-1); }

.lightbox-nav:active {
    transform: translateY(-50%) scale(0.94);
}

/* Portada álbum-relato */
.lightbox-intro {
    position: absolute;
    inset: 0;
    z-index: var(--z-lightbox-story);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.86);
    cursor: pointer;
}

.lightbox-stage.showing-intro .lightbox-intro {
    display: flex;
}

.lightbox-intro-inner {
    max-width: 640px;
    width: 92%;
    border: 1px solid var(--gray-dark);
    background: var(--negro);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lightbox-intro-eyebrow {
    color: var(--gray-mid);
    font-size: var(--text-mono-xs);
}

.lightbox-intro-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    text-transform: uppercase;
    line-height: 1;
}

.lightbox-intro-text {
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--gray-light);
}

.lightbox-intro-exif {
    color: var(--accent-amber);
    font-size: var(--text-mono-xs);
}

.lightbox-intro-cta {
    margin-top: var(--space-2);
    font-size: var(--text-mono-xs);
    color: var(--paper-text);
}

.lightbox-swipe-hint {
    display: none;
    position: absolute;
    bottom: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
    color: var(--gray-mid);
    font-size: var(--text-mono-xs);
    transition: opacity 0.5s ease;
}

.lightbox-swipe-hint.fade-out {
    opacity: 0;
}

/* Filmstrip */
.filmstrip-wrapper {
    border-top: 1px solid var(--gray-dark);
}

.filmstrip-rail {
    height: 8px;
    background: repeating-linear-gradient(90deg, var(--negro) 0 16px, #1c1c1c 16px 22px);
}

.filmstrip-scroll {
    overflow-x: auto;
    scrollbar-width: none;
}

.filmstrip-scroll::-webkit-scrollbar {
    display: none;
}

.filmstrip-scroll.dragging {
    cursor: grabbing;
}

.filmstrip-track {
    display: flex;
}

.filmstrip-frame {
    position: relative;
    flex: none;
    width: 86px;
    height: 62px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity var(--transition-fast);
}

.filmstrip-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.filmstrip-frame.active {
    opacity: 1;
    outline: 1px solid var(--accent-amber);
    outline-offset: -1px;
}

.filmstrip-frame:hover {
    opacity: 0.85;
}

.frame-number {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--paper-text);
    text-shadow: 0 0 4px var(--negro);
}

.lightbox-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 12px var(--space-3);
    border-top: 1px solid var(--gray-dark);
    font-size: var(--text-mono-xs);
    color: var(--gray-mid);
}

.lightbox-counter {
    color: var(--accent-amber);
}

/* ==========================================================================
   ÁMBAR — sala oscura contemplativa (dial de motion bajo, D14)
   ========================================================================== */
.ambar-view {
    padding-top: 52px;
}

.galeria-intro {
    padding: var(--space-6) var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* La sala. El alto de .galeria-stage lo fija ambar-motion.js como
   (pantalla + recorrido del track): así cada píxel de scroll mueve un píxel
   de galería y la sala se suelta justo cuando el recorrido termina.
   Sin JS (o en móvil) queda en altura automática y la galería se arrastra. */
.galeria-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    padding-top: 52px;
    display: flex;
    flex-direction: column;
}

.galeria-hud {
    flex: none;
    padding: var(--space-2) var(--space-3);
}

.galeria-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 11vw, 9rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.galeria-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--gray-light);
    line-height: 1.8;
    max-width: 62ch;
}

.scroll-indicator {
    color: var(--gray-mid);
    font-size: var(--text-mono-xs);
}

.galeria-progress {
    width: 220px;
    height: 1px;
    background: var(--gray-dark);
}

.galeria-progress-fill {
    width: 0%;
    height: 100%;
    background: var(--accent-amber);
}

.galeria-horizontal-scroll {
    flex: 1;
    min-height: 0; /* deja que el hijo flex encoja para que la obra encaje */
    overflow-x: auto;
    overflow-y: hidden;
    /* Al llegar al extremo horizontal, iOS/Android libera el scroll vertical
       para que la página pueda seguir hacia el footer. */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    display: flex;
    align-items: center;
}

.galeria-horizontal-scroll::-webkit-scrollbar {
    display: none;
}

/* Recorrido por scroll (GSAP desktop): el track se mueve por translateX,
   no por scrollLeft — el scroll nativo se apaga para que no compitan. */
body.ambar-scrolldriven .galeria-horizontal-scroll {
    overflow-x: hidden;
}

.galeria-track {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: var(--space-7);
    padding: var(--space-4) var(--space-6);
}

/* La obra encaja sola a cualquier alto de pantalla: la descripción toma lo
   que necesita y la imagen ocupa exactamente lo que sobra. */
.art-item {
    flex: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
}

.art-img-container {
    flex: none;
}

/* El alto es definido (no un % de un padre flexible) por dos razones:
   con alto definido el navegador deriva el ancho del aspecto real de la foto
   — si no, lo calcula con el tamaño natural del archivo y deja cientos de
   píxeles muertos entre obra y obra —, y el descuento de 340px reserva el
   espacio de la descripción, el HUD y el navbar para que nada quede cortado. */
.art-img-container img {
    display: block;
    height: min(calc(100svh - 340px), 680px);
    width: auto;
    max-width: 84vw;
    object-fit: contain;
}

.art-meta {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 520px;
}

.art-id {
    color: var(--accent-amber);
    font-size: var(--text-mono-xs);
}

.art-desc {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.2rem;
}

.art-desc-long {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--gray-mid);
}

.galeria-about {
    flex: none;
    width: min(78vw, 560px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    padding-right: var(--space-6);
}

.galeria-about-title {
    color: var(--gray-mid);
    font-size: var(--text-mono-xs);
}

.galeria-about-text {
    font-family: var(--font-body);
    font-style: italic;
    line-height: 1.9;
    color: var(--gray-light);
    white-space: pre-line;
}

.galeria-about-cta {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    text-transform: uppercase;
    line-height: 1.2;
}

.galeria-about-cta span {
    display: block;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: 1.15rem;
    text-transform: none;
    color: var(--accent-amber);
}

/* ==========================================================================
   VIEW TRANSITIONS entre páginas (corte rápido, fallback = corte seco)
   ========================================================================== */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.22s;
}

/* ==========================================================================
   INTERACCIÓN — hover solo con puntero fino (M2)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .cover-frame:hover .cover-hint {
        opacity: 1;
    }

    .cover-frame:hover .cover-img {
        filter: contrast(1.06);
    }
}

@media (hover: none) {
    .cover-hint {
        opacity: 1;
    }

    .lightbox-swipe-hint {
        display: block;
    }
}

/* ==========================================================================
   RESPONSIVE (patrón max-width — lección §10.3)
   ========================================================================== */
@media (max-width: 1024px) {
    .cover-item,
    .cover-item:nth-child(odd),
    .cover-item:nth-child(even) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .cover-item:nth-child(even) .cover-meta {
        align-items: flex-start;
        text-align: left;
    }

    .cover-numeral {
        font-size: clamp(3rem, 14vw, 6rem);
    }

    .cover-img {
        max-height: 70vh;
    }

    .chapter {
        padding-top: var(--space-6);
    }

    .lightbox-img-container {
        padding: var(--space-2) var(--space-4);
    }

    .galeria-track {
        gap: var(--space-5);
        padding: var(--space-3);
    }

    .art-img-container img {
        height: min(48vh, 520px);
    }
}

@media (max-width: 640px) {
    .navbar {
        padding: 12px var(--space-2);
    }

    .brand {
        font-size: 0.85rem;
    }

    .nav-links {
        gap: var(--space-1);
    }

    .nav-links a,
    .nav-links button {
        font-size: 0.55rem;
        /* MOB-03: área táctil ≥44px sin tocar el tamaño de la tipografía —
           solo el blanco que rodea al texto. */
        padding: var(--space-2) var(--space-1);
    }

    .hero {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .hero-foot .hero-foot-mid {
        display: none;
    }

    .hero-sub {
        letter-spacing: 0.12em;
        font-size: var(--text-mono-xs);
    }

    .chapter,
    .el-ojo {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .cover-item {
        padding: var(--space-4) var(--space-2);
    }

    .site-footer,
    .footer-left,
    .footer-right {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    /* MOB-02: el botón de cierre rompía en 3 líneas y se salía del viewport
       (376px dentro de 375px) — clamp(1.6rem,5vw,3.4rem) tocaba su piso
       (25.6px) + 128px de padding horizontal. Fuente y padding más chicos,
       nowrap fuerza 1 línea. El [ HABLEMOS ] del navbar no tiene este
       problema (ya trae nowrap) — no se toca. */
    .btn-hablemos {
        font-size: 1.15rem;
        padding: 20px 32px;
        white-space: nowrap;
    }

    /* MOB-03: áreas táctiles bajo el mínimo recomendado de 44px — mismo
       criterio que .nav-links arriba, solo blanco alrededor del texto. */
    .footer-link,
    .alt-contact-btn {
        display: inline-block;
        padding: var(--space-2) 0;
    }

    .modal-content {
        padding: var(--space-3);
        box-shadow: 6px 6px 0 var(--accent-amber);
    }

    .filmstrip-frame {
        width: 68px;
        height: 50px;
    }

    .lightbox-header {
        gap: var(--space-2);
    }

    /* MOB-03: cerrar (25px) y pantalla completa (26px) bajo el mínimo. Las
       flechas del viewer (75×68) ya están bien, no se tocan. */
    .lightbox-fullscreen,
    .lightbox-close {
        padding: var(--space-2);
    }

    .galeria-intro {
        padding: var(--space-5) var(--space-2) var(--space-3);
    }

    .art-meta {
        max-width: 84vw;
    }
}

/* ==========================================================================
   CHAT WIDGET (Bloque 1 / E5)
   FAB z=100 · panel z=1500 (viewer<panel<modal)
   ========================================================================== */

:root {
    --z-chat-fab:   100;
    --z-chat-panel: 1500;
    --chat-bg:      #0a0a0a;
    --chat-border:  #222222;
    --chat-text:    #d8d8d8;
    --chat-shadow:  -10px -10px 0 var(--accent-amber);
}

.chat-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: var(--z-chat-fab);
    background: var(--negro);
    color: var(--accent-amber);
    border: 1px solid var(--accent-amber);
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.chat-fab:hover,
.chat-fab:focus-visible {
    background: var(--accent-amber);
    color: var(--negro);
    outline: none;
}

.chat-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: var(--z-chat-panel);
    width: 380px;
    height: 520px;
    max-height: 100dvh;
    background: var(--chat-bg);
    box-shadow: var(--chat-shadow);
    display: flex;
    flex-direction: column;
}

.chat-panel[hidden] {
    display: none;
}

.chat-panel-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chat-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--chat-border);
    flex-shrink: 0;
}

.chat-panel-title {
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-amber);
    display: block;
}

.chat-panel-subtitle {
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    color: #555555;
    margin-top: 0.25rem;
    line-height: 1.4;
}

.chat-panel-close {
    background: none;
    border: none;
    color: #555555;
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.chat-panel-close:hover,
.chat-panel-close:focus-visible {
    color: var(--accent-amber);
    outline: none;
}

.chat-consent {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: #3a3a3a;
    line-height: 1.5;
    padding: 0.4rem 1.25rem;
    border-bottom: 1px solid var(--chat-border);
    flex-shrink: 0;
}

.chat-consent-link {
    color: inherit;
    text-decoration: underline;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--chat-border); }

.chat-msg {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.65;
    max-width: 88%;
}

.chat-msg--bot {
    color: var(--chat-text);
    align-self: flex-start;
    border-left: 2px solid var(--accent-amber);
    padding-left: 0.625rem;
}

.chat-msg--user {
    color: var(--negro);
    background: var(--accent-amber);
    align-self: flex-end;
    padding: 0.4rem 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    letter-spacing: 0.05em;
}

.chat-msg--error {
    color: #cc3333;
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    align-self: flex-start;
}

.chat-cursor {
    display: inline-block;
    width: 0.55em;
    height: 0.95em;
    background: var(--accent-amber);
    vertical-align: text-bottom;
    margin-left: 0.1em;
    animation: chat-blink 1s step-end infinite;
}

@keyframes chat-blink {
    50% { opacity: 0; }
}

.chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.625rem 1.25rem;
    flex-shrink: 0;
}

.chat-chips:empty {
    padding: 0;
}

.chat-chip {
    background: none;
    border: 1px solid var(--chat-border);
    color: #777777;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    text-align: left;
}

.chat-chip:hover,
.chat-chip:focus-visible {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    outline: none;
}

.chat-human-bar {
    display: flex;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--chat-border);
    flex-shrink: 0;
}

.chat-human-btn {
    background: none;
    border: none;
    color: #555555;
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
}

.chat-human-btn:hover,
.chat-human-btn:focus-visible {
    color: var(--accent-amber);
    outline: none;
}

.chat-input-row {
    display: flex;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--chat-border);
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    background: none;
    border: 1px solid var(--chat-border);
    border-right: none;
    color: var(--chat-text);
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    padding: 0.6rem 0.75rem;
    outline: none;
    transition: border-color var(--transition-fast);
}

.chat-input:focus {
    border-color: #444444;
}

.chat-input::placeholder {
    color: #3a3a3a;
}

.chat-input:disabled {
    opacity: 0.4;
}

.chat-send {
    background: none;
    border: 1px solid var(--chat-border);
    color: #555555;
    font-family: var(--font-mono);
    font-size: var(--text-mono-xs);
    letter-spacing: 0.08em;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.chat-send:hover:not(:disabled),
.chat-send:focus-visible {
    background: var(--accent-amber);
    color: var(--negro);
    outline: none;
}

.chat-send:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

@media (max-width: 639px) {
    .chat-panel {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
    }

    .chat-fab[aria-expanded="true"] {
        display: none;
    }
}

/* ==========================================================================
   REDUCED MOTION (M2: reducido ≠ cero — se quitan desplazamientos)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .grain-overlay {
        animation: none;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    .cover-img,
    .lightbox-main-img {
        transition: none;
    }

    body:not(.pre-reveal) .obra-view,
    body:not(.pre-reveal) .site-footer {
        transition: none;
    }
}