/* ========================================================================= FestiVal · Golden Hour 2026 — TOKENS DE MARCA · v2.0 Rectora: la pieza de Val · https://soyvalmosquera.com/festival/ v2.1 · 16 sep 2026 · rectora: el Brand Book de Val VLM_GEN_DOC_Brandbook-Editorial-FestiVal_260916_v1.0.html (07_RECTORA/VLM) ───────────────────────────────────────────────────────────────────────── POR QUE CAMBIA EL CANON (leelo antes de tocar un valor) La v1.0 declaraba la LEY DEL TROQUEL: «en esta marca NO EXISTE EL DEGRADADO», y prohibia degradado radial, brillo pintado, sombra interior y falso relieve. La plataforma la ejecuto con fidelidad durante tres semanas. El 15·sep Val mostro su propia pieza del festival. Usa las cuatro cosas que la v1.0 prohibia, y son exactamente las que producen el corazon facetado, el lacre de cera con relieve y los halos de luz. Su paleta resulto ser LA MISMA que la nuestra, medida color por color en el CSS servido: night, velvet, champagne, gold, amber, carmine coinciden. Es decir: la plataforma no se desvio de la marca. Se quedo en la version anterior de la marca. Lo que fallaba no era la paleta sino la MATERIA. 🔴 DOS LEYES DEL MANUAL DE VAL, en sus palabras: · «Elegante, si. Solemne, nunca.» — respalda la Ley del Luto y descarta cualquier direccion que se sienta ceremonia funebre. · «El dorado es la firma, no el ruido.» — la Ley de la Materia NO autoriza llenar de oro: el metal se usa donde firma, no en todas partes. · Del isologo: «No recolorear ni añadir efectos al archivo maestro.» 🔴 LA LEY DEL TROQUEL QUEDA DEROGADA (Ed, 260915). En su lugar manda la LEY DE LA MATERIA: el oro de FestiVal es METAL, no color plano. Tiene rampa, tiene angulo de luz y tiene grano. La cera es cera. Un degradado que simula material es correcto; un degradado decorativo, que no simula nada, sigue prohibido. ═══════════════════════════════════════════════════════════════════════ */ /* 🔴 LAS FUENTES SE SIRVEN DE CASA, NO DE GOOGLE (260917). Los woff2 ya estaban en /f/ y ninguna pantalla los usaba. La noche del 19 todo corre sobre el wifi de una casa: si Google no contesta, cada pantalla cae a Georgia y Arial y la marca se apaga con 66 personas mirando. Desde el mismo dominio, si la pagina cargo, la tipografia cargo. */ @import url('/f/fuentes.css'); :root{ /* ── TIPOGRAFIA ──────────────────────────────────────────────────────── 🔴 CORRECCION 260916 (v2.1). El 16-sep saque Italiana y Plus Jakarta del canon porque MEDI SU SITIO (soyvalmosquera.com/festival), que usa Marcellus y Karla. Me equivoque de fuente: su BRAND BOOK oficial declara Italiana para titulares y Plus Jakarta Sans para texto. Su sitio se desvio de su propio manual; la plataforma siempre tuvo la tipografia correcta. Regla que queda: manda el MANUAL, no una pieza suelta, por reciente que sea. */ --fv-display: 'Italiana', Georgia, 'Times New Roman', serif; /* titulares */ --fv-texto: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Arial, sans-serif; /* cuerpo */ /* La micro-etiqueta NO es una tercera familia: es --fv-texto en mayusculas con tracking. El manual de Val declara DOS tipografias y solo dos. */ --fv-micro: var(--fv-texto); /* El dato-etiqueta (19 · 09 · 26 · ACCESO RESERVADO) va SIEMPRE en --fv-micro, mayusculas y con este tracking. Es la firma del sistema. */ --fv-micro-tracking: .1em; --fv-display-tracking: -.025em; /* ── COLOR · sin cambios respecto de v1.0 ────────────────────────────── Verificado contra el CSS de la pieza de Val el 260915: identicos. */ --fv-noche: #14101F; /* «Tinta Noche» · base */ --fv-terciopelo: #2A1520; /* «Terciopelo» · profundidad */ --fv-brasa: #33202C; /* superficie elevada */ --fv-champan: #F0DCA8; /* «Champan Palido» · luz alta */ --fv-oro: #EFB63C; /* «Oro Luz» · la firma */ --fv-oro-hondo: #C9922B; /* «Oro Profundo» · sombra dorada */ --fv-oro-fondo: #8E6318; /* escalon mas hondo */ --fv-ambar: #D07A28; /* «Ambar» · calor */ --fv-carmin: #9B2033; /* «Carmin» · acento, un solo uso por pieza */ --fv-carmin-hondo: #6E1524; /* reborde de lacre */ /* 🔴 CORRECCION v2.0: el marfil era #F4F0E6 y en la pieza de Val es #F7EFDD. Se adopta el de Val. La diferencia es minima en una muestra y visible en un parrafo largo sobre fondo noche. */ --fv-marfil: #F7EFDD; /* «Marfil Vela» · papel */ /* Derivados de opacidad — se usan TAL CUAL, no se recalculan a ojo */ --fv-filete: rgba(240,220,168,.24); /* bordes · su --line, 24% no 20% */ --fv-campo: #F0DCA829; /* inputs · champan 16% */ --fv-tenue: #C0B5B3; /* su --muted · gris calido, NO marfil translucido */ /* ── MATERIA · lo que v1.0 prohibia y ahora es el corazon del canon ──── 1 · EL ORO ES METAL. Seis paradas y un angulo de 100deg. No se improvisa otra: esta rampa es la que produce el reflejo que el ojo lee como oro fisico. Se aplica como background-image, y sobre texto con background-clip:text. */ --fv-metal: linear-gradient(100deg, #6D350E 0%, #BD721D 18%, #F2C15D 42%, #FFE1A0 51%, #C17C23 76%, #69340E 100%); /* Variante vertical, para cantos y filos de ficha */ --fv-metal-canto: linear-gradient(180deg, #FFE1A0, #C9922B 46%, #6D350E); /* 2 · EL BRILLO QUE RECORRE (shimmer). Angulo fijo: 20deg. */ --fv-brillo-angulo: 20deg; --fv-brillo: linear-gradient(var(--fv-brillo-angulo), transparent 40%, #FFE1A066 50%, transparent 60%); /* 3 · EL HALO. Reemplaza al «brillo pintado» prohibido en v1.0. Se pone DETRAS del objeto, nunca encima. */ --fv-halo: radial-gradient(circle, rgba(239,182,60,.18), rgba(208,122,40,.07) 38%, transparent 69%); --fv-halo-carmin: radial-gradient(circle, rgba(155,32,51,.42), transparent 48%); /* 4 · EL GRANO. Es lo que impide que el degradado se vea «de CSS». Textura feTurbulence en data-URI: sin peticion de red, sin archivo. */ --fv-grano: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); --fv-grano-opacidad: .35; /* 5 · EL METAL CEPILLADO. Microrrayado a 92deg: la tarjeta del passport. */ --fv-cepillado: repeating-linear-gradient(92deg, transparent 0px, transparent 2px, rgba(78,37,5,.03) 2px, rgba(78,37,5,.03) 3px); /* 6 · LA CERA DEL LACRE. Marrones profundos + relieve. */ --fv-cera: linear-gradient(145deg, #5C2A10, #3B1E0C 58%, #2A1408); --fv-cera-luz: #7A3D16; --fv-cera-sombra: #24110A; /* 7 · EL VELO DE PANTALLA. Viñeteo vertical: asienta cualquier escena. */ --fv-velo: linear-gradient(rgba(20,16,31,.52), transparent 31%, transparent 57%, rgba(20,16,31,.9)); /* ── FORMA ───────────────────────────────────────────────────────────── 🔴 Val trabaja con esquina RECTA: --radius:0 en todo su sistema. Las pantallas de la plataforma usaban 9px heredado de ningun lado. El radio 0 es decision de marca, no de gusto. */ --fv-radio: 0; --fv-radio-suave: 0; /* existe solo para no romper hojas antiguas */ /* Escala de escena — tamaños relativos al viewport, no en px */ --fv-lacre: min(91vw, 72svh, 38rem); --fv-moneda: clamp(2.2rem, 11vw, 3rem); /* ── MOVIMIENTO ──────────────────────────────────────────────────────── Val no hace transiciones: hace coreografia. Su pieza declara mas de treinta keyframes con nombre propio por momento narrativo. Regla: toda animacion de marca se nombra por lo que NARRA (sello-se-funde), nunca por lo que hace (fade-in). */ --fv-ease: cubic-bezier(.4, 0, .2, 1); --fv-ritual: 2.6s; /* lo que tarda un gesto que vale una sola vez */ --fv-gesto: .42s; /* respuesta a un toque */ --fv-aliento: 4s; /* respiracion de un objeto en reposo */ } /* ═══════════════════════════════════════════════════════════════════════ APLICACIONES CANONICAS — copiar estas, no reinventarlas ═══════════════════════════════════════════════════════════════════════ */ /* Texto de oro real. Sustituye a todo `color: var(--fv-oro)` en titulos. */ .fv-oro-metal{ background-image: var(--fv-metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Etiqueta-dato. La firma tipografica del sistema. */ .fv-micro{ font-family: var(--fv-micro); text-transform: uppercase; letter-spacing: var(--fv-micro-tracking); font-size: .75rem; color: var(--fv-tenue); } /* Grano de pantalla. Va como ultima capa, encima de todo, sin capturar el toque. */ .fv-grano::after{ content:''; position:absolute; inset:0; pointer-events:none; background-image: var(--fv-grano); opacity: var(--fv-grano-opacidad); mix-blend-mode: overlay; } /* Superficie metalica (tarjeta del Golden Passport). */ .fv-placa{ background-image: var(--fv-cepillado), var(--fv-metal); border-radius: var(--fv-radio); color: var(--fv-noche); } @media (prefers-reduced-motion: reduce){ :root{ --fv-ritual:.01ms; --fv-gesto:.01ms; --fv-aliento:.01ms; } } /* ═══════════════════════════════════════════════════════════════════════ ALIAS CORTOS — puente entre los nombres propios de cada pantalla y el prefijo --fv- del canon. Inventariados con un grep de --[a-z-]+: sobre el index.html de cada pantalla (aqui NO se escribe la ruta con barra-asterisco-barra literal: esa secuencia cierra este comentario CSS antes de tiempo y se comio todo este bloque la primera vez). Solo se alian los nombres cuyo VALOR coincide con el canon en la mayoria de pantallas que los usan. Donde una pantalla ya declara el mismo nombre con un valor distinto, su :root local sigue mandando (cascada: su