/* ═══════════════════════════════════════════════════════════════════════════ FestiVal · Golden Hour 2026 — LA CAPA DE MARCA · v1.0 · 17·sep·2026 Rectora: el Brand Book de Val (VLM_GEN_DOC_Brandbook-Editorial-FestiVal_260916). POR QUE EXISTE ESTE ARCHIVO `tokens.css` declara los VALORES de la marca —los colores, las rampas, las dos tipografias—. Pero declararlos no basta: una pantalla podia enlazarlo y seguir pintando su titulo en amarillo plano, su fondo sin grano y su foco en el azul del sistema. Eso es lo que pasaba en trece de las diecinueve. Esta hoja APLICA esos valores. Se enlaza despues de tokens.css y toca solo lo transversal: lo que debe verse igual en todas partes sin que nadie lo repita. 🔴 LO QUE ESTA HOJA NO HACE, Y ES DELIBERADO No rediseña la operacion. Las pantallas de mesa, puerta, karaoke y produccion se operan de pie, a oscuras y con prisa: conservan sus tamaños, sus botones y su disposicion exactos. Aqui solo entran materia y legibilidad. 🔴 EL FRENO, EN PALABRAS DE VAL: «el dorado es la firma, no el ruido». Por eso el metal se aplica con la clase `.fv-firma`, a mano y donde firma —la cifra grande, el titulo de la pantalla—, y NUNCA a todos los titulos de golpe. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · EL GRANO ────────────────────────────────────────────────────────── Lo que impide que una pantalla se lea plana. Sin el, una proyeccion de tres metros se ve como un PDF y un telefono se ve como una plantilla. Va fijo, detras de todo, y no intercepta un solo toque. */ body::after{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:var(--fv-grano); opacity:.085; mix-blend-mode:overlay; } /* 🔴 El grano se salta a si mismo en las pantallas que ya lo traen propio (sala, jardin, invitacion): dos capas de ruido encima de la otra ensucian el texto en vez de dar materia. */ body.fv-grano-propio::after{display:none} /* ── 2 · EL FOCO ─────────────────────────────────────────────────────────── 🔴 El navegador pinta el foco en AZUL. En una pantalla tactil a media alfombra roja, rodeada de la marca de Val, un halo azul de sistema es lo primero que se nota — y no aparece en ningun CSS, porque no lo pone el CSS. El foco NO se quita: se viste. Quitarlo deja sin navegacion a quien usa teclado, y esa noche hay gente operando con un teclado bluetooth. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--fv-oro, #EFB63C); outline-offset:2px; border-radius:1px; } /* ── 3 · LA FIRMA ────────────────────────────────────────────────────────── El metal, a mano y donde firma. `.fv-firma` sobre un texto lo convierte en oro fisico con rampa; `.fv-firma-barra` hace lo mismo con una barra o filete. 🔴 Con @supports y fallback: estas pantallas rotan solas toda la noche sin nadie atendiendolas y no pueden quedarse en blanco por un degradado. */ .fv-firma{color:var(--fv-champan, #F0DCA8)} @supports (background-clip:text) or (-webkit-background-clip:text){ .fv-firma{ background-image:var(--fv-metal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } } .fv-firma-barra{background-image:var(--fv-metal)} /* ── 3b · EL TITULO DE LA PANTALLA ──────────────────────────────────────── El `h1` es, en todas las pantallas de este sistema, el nombre de la pantalla: Mesa, Karaoke, Producción, El Pulso, La Memoria Viva. Uno por pantalla, en Italiana y sobre fondo oscuro. **Ese es el sitio donde el oro firma** — y por eso el metal se aplica ahí de forma transversal y en ningún otro título. 🔴 No baja a h2 ni a las cifras de una rejilla: cuatro cifras doradas a la vez son el ruido que el manual de Val prohíbe. Una pantalla que quiera metal en su cifra grande lo pide a mano con `.fv-firma`, como hacen la sala y el jardín. */ /* ═══════════════════════════════════════════════════════════════════════════ 0 · LAS DOS FAMILIAS, APLICADAS · 260917 🔴 ENLAZAR TOKENS NO ES APLICARLOS, otra vez. `tokens.css` declaraba --fv-display y --fv-texto desde el 16-sep y **nada las ponia en el documento**: cada pantalla repetia su propio font-family a mano. Las tres que no lo repetian —el guion del ensayo, el paseo de Val y el pulso— salian en **-apple-system**, medido en produccion. O sea: tres pantallas del festival sin una sola letra de la marca, y el CSS «correcto». 🔴 Va con la especificidad mas baja posible y SIN !important: la pantalla que declare su propia familia mas abajo sigue ganando, y ninguna de las 22 que ya estaban bien cambia. Esto es el piso, no el techo. ═══════════════════════════════════════════════════════════════════════════ */ /* 🔴 `[hidden]` TIENE QUE GANAR SIEMPRE (pagado en la invitacion, 260917). Es un `display:none` del navegador con la especificidad mas baja que existe: cualquier regla con un id le gana. En la invitacion, `#mapa-pin{display:block}` dejaba visible un boton que abria Google Maps con la direccion de la sede, aunque el HTML lo marcara `hidden`. Media plataforma esconde cosas con este atributo —el alta de la hostess, el saldo, los bloques de la noche—, asi que la proteccion va en la capa comun y no pantalla por pantalla. */ [hidden]{display:none!important} body{font-family:var(--fv-texto, 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif)} h1, h2, h3{font-family:var(--fv-display, 'Italiana', Georgia, serif); font-weight:400} h1{color:var(--fv-champan, #F0DCA8)} @supports (background-clip:text) or (-webkit-background-clip:text){ h1:not(.fv-sin-firma){ background-image:var(--fv-metal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } } /* 🔴 EL METAL NO VA SOBRE FONDO CLARO, y esto se vio proyectando la pantalla, no leyendo el CSS. Producción y la Vista de Val tienen tema claro/oscuro propio —lo necesitan: Fernanda trabaja con ellas a plena luz—. Sobre el crema del tema claro, la rampa del metal pasa por #FFE1A0 justo en el centro y las letras de en medio DESAPARECEN: «Pro‗‗‗ión». Ilegible a media palabra. Y no es un ajuste de gusto: el manual de Val define la versión preferida como «champán y oro sobre TINTA NOCHE». Sobre claro, el metal no es la marca. Estas dos declaran su tema en el elemento raíz, así que basta con escuchar lo mismo que ellas escuchan. */ :root[data-theme="light"] h1, :root[data-theme="light"] .fv-firma{ background-image:none !important; -webkit-text-fill-color:currentColor !important; color:var(--fv-carmin, #9B2033); } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) h1, :root:not([data-theme="dark"]) .fv-firma{ background-image:none !important; -webkit-text-fill-color:currentColor !important; color:var(--fv-carmin, #9B2033); } } /* 🔴 La excepción de la excepción: las pantallas que SON oscuras siempre —la sala, el jardín, la invitación, la mesa— no deben perder su metal solo porque el sistema operativo de quien mira esté en modo claro. Lo declaran con esta clase en el y la regla de arriba ya no las toca. */ /* 🔴 Con `!important` en los dos lados, quien gana es el selector MAS ESPECIFICO — y `:root:not([data-theme=dark]) h1` (0,2,1) le ganaba a `body.fv-siempre-oscura h1` (0,1,2). Resultado medido: la Memoria Viva perdia su metal solo porque el sistema operativo de quien miraba estaba en claro, con su fondo intacto en Tinta Noche. Se arregla subiendo la especificidad de la excepcion, no añadiendo otro !important encima. */ :root body.fv-siempre-oscura h1, :root body.fv-siempre-oscura .fv-firma{ background-image:var(--fv-metal) !important; -webkit-text-fill-color:transparent !important; } /* ── 3c · LA DIVISION DE LAS DOS TIPOGRAFIAS ────────────────────────────── 🔴 Ed, 260917: «siento que esa font es complicada para los fondos». Medido, y tenia razon — y el manual de Val ya traia la respuesta escrita: · «Italiana: titulares, grandes gestos editoriales y MOMENTOS MEMORABLES» · «Plus Jakarta Sans: INFORMACION, invitacion, SEÑALETICA y piezas digitales» La plataforma estaba usando Italiana donde el manual dice Jakarta: «Ya cantó» y «No está» a 15 px —botones que el DJ opera de pie a las 23:40—, y los datos de la ficha a 19 px. Italiana es una display de trazo finisimo y contraste alto: a 15 px sobre fondo oscuro los finos casi desaparecen. No es un defecto de la tipografia; es usarla fuera de su trabajo. Aqui no se cambia la tipografia de la marca: se respeta la division que la dueña de la marca ya definio. En las pantallas de OPERACION —las que llevan `fv-operacion` en el body— los controles y los datos van en Jakarta. Los titulos siguen en Italiana, porque ahi si es un titular. */ body.fv-operacion button, body.fv-operacion input, body.fv-operacion select, body.fv-operacion textarea, body.fv-operacion label, body.fv-operacion th, body.fv-operacion td, body.fv-operacion .boton, body.fv-operacion .chip, body.fv-operacion .pildora{ font-family:var(--fv-texto) !important; } /* 🔴 Y el suelo duro: Italiana nunca por debajo de 20 px, en ningun sitio. Bajo ese tamaño deja de leerse como elegancia y empieza a leerse como un error de render — que es exactamente lo que Ed noto. */ .fv-dato, .fv-etiqueta{font-family:var(--fv-texto)} /* ── 4 · LA PLACA ────────────────────────────────────────────────────────── El metal cepillado del Golden Passport, disponible para cualquier tarjeta o ficha que deba sentirse como un objeto y no como un div. */ .fv-placa{ background-image:var(--fv-cepillado); box-shadow:inset 0 1px 0 rgba(255,225,160,.08); } /* ── 5 · EL ISOLOGO MAESTRO ──────────────────────────────────────────────── 🔴 El archivo de Val, sin tocarlo: su manual dice «no recolorear ni añadir efectos al archivo maestro». Viene recortado a su caja real, asi que `height` manda y el ancho sale solo. */ .fv-iso{display:inline-block; height:1em; width:auto; object-fit:contain; vertical-align:-.10em} /* ── 6 · LOS CAMPOS ──────────────────────────────────────────────────────── Un campo de texto por debajo de 16px hace que Safari en iPhone haga ZOOM al tocarlo, y la pantalla se descuadra en plena operacion. Es un defecto clasico de movil que no se ve en el escritorio. */ input, select, textarea{font-size:max(16px, 1em)} /* ── 7 · LA SELECCION ────────────────────────────────────────────────────── Hasta el resaltado al seleccionar texto es de la marca, no del sistema. */ ::selection{background:var(--fv-oro-hondo, #C9922B); color:var(--fv-noche, #14101F)} /* ── 8 · NADIE SE MAREA ──────────────────────────────────────────────────── Quien pidio menos movimiento en su telefono no recibe una pantalla que late. */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 9 · LOS DOS TEMAS · quién los tiene y por qué · 260917 Ed pidió «un skin dark y uno light». La respuesta no es darles los dos a todas: es repartirlos POR FUNCIÓN, y hay una razón física detrás. 🔴 LAS PANTALLAS DE LA NOCHE SON OSCURAS SIEMPRE, sin interruptor. No es preferencia: es una fiesta de noche en una sala a oscuras. Un tema claro proyectado a las 22:21 —el reveal, con 66 personas mirando a la vez— deslumbra a toda la sala y arruina el único momento que no se repite. Y el teléfono del invitado a las 23:40 en la cara, en blanco, es lo mismo en pequeño. La rectora de Val además lo fija: el fondo de esta marca es oscuro y eso no se negocia. Son: la invitación, la sala, el jardín, la tarima, la memoria, el aviso, /faltan/ y la puerta. 🟢 LAS PANTALLAS DE TRABAJO LLEVAN LOS DOS, y la persona elige. Fernanda arma el programa a las once de la mañana, a plena luz y junto a una ventana. Producción y la Vista de Val ya lo tenían y por eso funcionan; el resto de las de trabajo lo reciben ahora con el mismo mecanismo. Son: producción, la consola, la vista de Val, el tablero, el pulso, el mapa y el guion del ensayo. 🔴 El tema NO se adivina cada vez: se guarda. Quien lo puso en claro no quiere volver a ponerlo mañana. Y quien no ha elegido nada recibe lo que su teléfono ya dice con `prefers-color-scheme`, que es lo que espera. ═══════════════════════════════════════════════════════════════════════════ */ /* 🔴 CADA COLOR SE DEFINE COMO TOKEN, Y SOLO LOS TOKENS SE REDEFINEN. La primera version pintaba `h2`, `p` y `a` directamente dentro del bloque del tema claro. Resultado medido: en tema OSCURO el h2 daba 1.56:1 y el cuerpo 2.22:1 — ILEGIBLES—, porque esas reglas seguian aplicando y nada las redefinia. Es el error clasico del tema doble: se cambia el fondo y se olvida la mitad de la tinta. Asi que los colores viven en tokens propios de esta capa, el bloque claro es el de partida, y cada bloque oscuro los redefine TODOS. Ningun color se pinta solo en un lado. */ body.fv-dos-temas{ --t-fondo: var(--fv-marfil, #F7EFDD); --t-tinta: #584A4C; --t-titulo: var(--fv-carmin, #9B2033); --t-sub: #5E2230; --t-etq: var(--fv-oro-fondo, #8E6318); --t-link: #7A1828; --t-grano-modo: multiply; --t-grano-op: .05; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body.fv-dos-temas{ --t-fondo: var(--fv-noche, #14101F); --t-tinta: var(--fv-tenue, #C0B5B3); --t-titulo: var(--fv-champan, #F0DCA8); --t-sub: var(--fv-champan, #F0DCA8); --t-etq: var(--fv-oro-hondo, #C9922B); --t-link: var(--fv-oro, #EFB63C); --t-grano-modo: overlay; --t-grano-op: .085; } } :root[data-theme="dark"] body.fv-dos-temas{ --t-fondo: var(--fv-noche, #14101F); --t-tinta: var(--fv-tenue, #C0B5B3); --t-titulo: var(--fv-champan, #F0DCA8); --t-sub: var(--fv-champan, #F0DCA8); --t-etq: var(--fv-oro-hondo, #C9922B); --t-link: var(--fv-oro, #EFB63C); --t-grano-modo: overlay; --t-grano-op: .085; } /* 🔴 Y LOS TOKENS QUE LA PROPIA PANTALLA USA, tambien. Un `

` sin clase de la consola seguia en gris claro sobre el papel (3.61:1) porque la pantalla lo pinta con SU token `--tenue`, y su regla es mas especifica que la mia. Pelear selector por selector es una carrera que se pierde; redefinir los tokens que ellas ya usan lo arregla de una vez y para todas, sin tocar una sola pantalla. Los nombres son los que el sistema ya tiene. */ body.fv-dos-temas{ --tenue:var(--t-tinta); --texto:var(--t-tinta); --muted:var(--t-tinta); --marfil:var(--t-titulo); --champan:var(--t-sub); --linea:rgba(94,34,48,.20); --line:rgba(94,34,48,.20); --noche:var(--t-fondo); --terciopelo:#EFE4CE; --brasa:#E6D9C0; --vino:#EFE4CE; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body.fv-dos-temas{ --tenue:#8A7A6C; --texto:#C6B6A4; --muted:#C0B5B3; --marfil:#F7EFDD; --champan:#F0DCA8; --linea:#3A2226; --line:rgba(240,220,168,.24); --noche:#14101F; --terciopelo:#2A1520; --brasa:#33202C; --vino:#2A1520; } } :root[data-theme="dark"] body.fv-dos-temas{ --tenue:#8A7A6C; --texto:#C6B6A4; --muted:#C0B5B3; --marfil:#F7EFDD; --champan:#F0DCA8; --linea:#3A2226; --line:rgba(240,220,168,.24); --noche:#14101F; --terciopelo:#2A1520; --brasa:#33202C; --vino:#2A1520; } /* Y todo se pinta UNA sola vez, desde los tokens. */ body.fv-dos-temas{background:var(--t-fondo); color:var(--t-tinta)} body.fv-dos-temas h1{color:var(--t-titulo)} body.fv-dos-temas h2, body.fv-dos-temas h3{color:var(--t-sub)} body.fv-dos-temas p, body.fv-dos-temas li, body.fv-dos-temas td, body.fv-dos-temas .nota, body.fv-dos-temas .sutil, body.fv-dos-temas .dim{color:var(--t-tinta)} body.fv-dos-temas .eyebrow, body.fv-dos-temas .etq, body.fv-dos-temas [class*="eyebrow"]{color:var(--t-etq)} body.fv-dos-temas a{color:var(--t-link)} body.fv-dos-temas ::selection{background:var(--t-titulo); color:var(--t-fondo)} body.fv-dos-temas::after{mix-blend-mode:var(--t-grano-modo); opacity:var(--t-grano-op)} /* El interruptor. Discreto y siempre en el mismo sitio: quien lo busca ya sabe dónde está, y quien no lo busca no lo ve. */ /* 🔴 260918 · 40 px, cuatro por debajo del minimo para un dedo (44, WCAG 2.5.5 y Apple HIG). Cuatro pixeles no suenan a nada hasta que fallas el toque tres veces con una copa en la mano. Aparecia asi en tres pantallas a la vez —consola, tablero y mapa— porque vive aqui: un solo arreglo las cura. El circulo se ve igual de discreto a 44; lo que crece es el blanco para el dedo, no la presencia visual. */ .fv-tema{ position:fixed; top:14px; right:14px; z-index:90; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:rgba(240,220,168,.10); border:1px solid var(--fv-filete, rgba(240,220,168,.24)); color:var(--fv-oro-hondo, #C9922B); font-size:17px; line-height:1; padding:0; font-family:var(--fv-texto); } .fv-tema:hover{border-color:var(--fv-oro, #EFB63C)} body.fv-dos-temas .fv-tema{background:rgba(155,32,51,.07); color:var(--fv-carmin,#9B2033)} @media print{.fv-tema{display:none}}