/* ==========================================================================
   CIFRE MEDIA — Design tokens + base.
   Sistema tonal carbón/amarillo. Luz virtual única: superior-izquierda.
   ========================================================================== */

:root {
    /* --- Color (única familia permitida) --- */
    --carbon-950: #0A0A0B;
    --carbon-900: #101013;
    --carbon-800: #17171B;
    --line:       #26262C;
    --yellow:      #FFD800;
    --yellow-deep: #E6C200;
    --yellow-glow: rgba(255, 216, 0, 0.08);
    --white: #F4F1E8;
    --grey:  #9C9CA3;
    --grey-dim: #5F5F66;

    /* --- Tipografía --- */
    --font-display: 'Archivo', 'Arial Narrow', sans-serif;
    --font-ui: 'Space Grotesk', ui-monospace, 'Segoe UI', sans-serif;

    /* Escala con saltos amplios (contraste de tamaño 3x+ entre display y body) */
    --fs-display: clamp(3.25rem, 9vw, 8rem);   /* hero */
    --fs-h1: clamp(2.5rem, 6vw, 5rem);
    --fs-h2: clamp(2rem, 4.5vw, 3.5rem);       /* títulos de sección */
    --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
    --fs-body: clamp(1rem, 1.05vw, 1.15rem);
    --fs-small: 0.8125rem;
    --fs-label: 0.72rem;                       /* Space Grotesk uppercase */

    --lh-tight: 0.98;
    --lh-snug: 1.15;
    --lh-body: 1.6;
    --ls-label: 0.18em;                        /* letter-spacing amplio */
    --ls-wide: 0.06em;

    /* --- Espaciado --- */
    --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
    --sp-5: 3rem;    --sp-6: 4.5rem; --sp-7: 7rem;    --sp-8: 10rem;
    --section-y: clamp(4.5rem, 10vw, 10rem);   /* aire vertical entre secciones */
    --gutter: clamp(1.25rem, 5vw, 4rem);       /* margen lateral */
    --maxw: 1440px;

    /* --- Esquinas (4–8px, editorial) --- */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;

    /* --- Sombras: luz desde superior-izquierda => sombra cae abajo-derecha --- */
    --shadow-sm: 3px 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-md: 6px 9px 28px rgba(0, 0, 0, 0.5);
    --shadow-lg: 10px 16px 48px rgba(0, 0, 0, 0.55);
    /* Halo amarillo sutil detrás de elementos destacados (mismo amarillo diluido) */
    --glow: 0 0 60px -12px var(--yellow-glow);

    /* --- Motion --- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.5s;

    --z-nav: 100;
    --z-spotlight: 1;
    --z-grain: 9999;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    background: var(--carbon-950);
    color: var(--white);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100vh;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

/* --- Tipografía base --- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.02em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }

.display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.03em; }

/* Label en Space Grotesk: mayúsculas, tracking amplio (metadata, kickers) */
.label {
    font-family: var(--font-ui);
    font-size: var(--fs-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--grey);
}
.mono { font-family: var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-wide); }

/* --- Layout utils --- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.stack > * + * { margin-top: var(--sp-3); }

/* --- Acento lineal amarillo (firma visual) --- */
.accent-line {
    display: inline-block;
    width: 2.5rem; height: 2px;
    background: var(--yellow);
    box-shadow: var(--glow);
}
/* Kicker de sección: label + línea amarilla */
.kicker {
    display: inline-flex; align-items: center; gap: 0.75rem;
    margin-bottom: var(--sp-3);
}
.kicker::before {
    content: ""; width: 2rem; height: 2px; background: var(--yellow);
    box-shadow: var(--glow);
}

/* Subrayado que crece en hover/activo */
.underline-grow { position: relative; }
.underline-grow::after {
    content: ""; position: absolute; left: 0; bottom: -3px;
    width: 100%; height: 2px; background: var(--yellow);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur) var(--ease);
}
.underline-grow:hover::after,
.underline-grow[aria-current="page"]::after { transform: scaleX(1); }

/* --- Detalles de productora --- */
.timecode { font-family: var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: 0.12em; color: var(--grey-dim); font-size: var(--fs-small); }
.rec-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--yellow); box-shadow: 0 0 8px var(--yellow);
    animation: rec-pulse 1.6s var(--ease) infinite;
}
@keyframes rec-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }

/* --- Botones --- */
.btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-small);
    text-transform: uppercase; letter-spacing: var(--ls-wide);
    padding: 0.85rem 1.5rem; border-radius: var(--r-sm);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform 0.2s var(--ease);
}
.btn-solid { background: var(--yellow); color: var(--carbon-950); }
.btn-solid:hover { background: var(--yellow-deep); transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--line); color: var(--white); }
.btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); }

/* --- Grano de película (overlay global, no interfiere clics) --- */
.grain {
    position: fixed; inset: 0; z-index: var(--z-grain);
    pointer-events: none; opacity: 0.045; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* --- Spotlight que sigue el cursor (desktop, degradado radial amarillo diluido) --- */
.spotlight {
    position: fixed; inset: 0; z-index: var(--z-spotlight);
    pointer-events: none;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), var(--yellow-glow), transparent 45%);
    opacity: 0; transition: opacity 0.6s var(--ease);
}
body.spotlight-on .spotlight { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) { .spotlight { display: none; } }

/* --- Reveal fotográfico: arranca subexpuesto, "expone" al entrar --- */
.reveal { opacity: 0; transform: translateY(28px); filter: brightness(0.6); }
.reveal.is-in {
    opacity: 1; transform: none; filter: brightness(1);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 1.1s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; filter: none; }
}

/* --- Accesibilidad --- */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 10000;
    background: var(--yellow); color: var(--carbon-950); padding: 0.75rem 1.25rem;
    font-family: var(--font-ui); font-weight: 500;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}