/* ========================================================================== tokens.css — CAPA DE FUNDACIÓN (todos los anchos) Carga inmediatamente DESPUÉS del tema compilado y ANTES de mobile-opt / desktop-opt, para poder redefinir los tokens de marca globales sin tocar el build de Astro. Regla del proyecto: capa aditiva. -------------------------------------------------------------------------- Objetivo de esta primera pieza (auditoría awwwards · tarea #1): · Matar el gradiente CANDY y ascender el RAMP GRADEADO a marca única. · Definir 3 tokens de motion (colapsan las ~5 curvas dispersas). · Teñir la oscuridad (un colorista no firma con negro plano). ========================================================================== */ :root{ /* ---- MARCA CROMÁTICA: ramp gradeado (sustituye al candy) -------------- Nace del ADN que ya vive en el sitio: la spine (#2b7fc7→#c6487e→#e6a579) y las auras warm-key/cool-fill. Es un "sunset grade": teal frío (log) → malva → rosa apagado → terracota → bronce (color). Luminancia controlada para que el texto display pase AA ≥3:1 sobre el blanco hueso del hero. */ /* [B1 · 19-jul-2026] RAMPA EMULSIÓN — sustituye al candy (decisión de Ginder). ----------------------------------------------------------------------- El candy (naranja→rosa→lila→azul) recorría el círculo cromático entero a saturación plena: es el degradado que genera una herramienta automática, no el que firma un colorista. Decía lo contrario del concepto de la web. La rampa nueva es fotoquímica y VIVA (no el ramp desaturado que Ginder rechazó en su día por apagado: aquí los cálidos van saturados, sin tierras grises): densidad de sombra → naranja incandescente → ámbar → alta luz. Un degradado que sirve para una superficie no sirve para tipografía: ese era el error del candy, usar el mismo en todo. Estado tras el veredicto de Ginder (19-jul-2026): --grad SUPERFICIES (botón WhatsApp, barra de progreso) → rampa emulsión. APROBADA: "el botón de ese color está bueno". --grad-candy TIPOGRAFÍA sobre claro (hero) → sigue el candy. Probó aquí la rampa emulsión y la rechazó. --grad-on-dark «Hablemos.» sobre la ola del atardecer → altas luces cálidas. Pendiente de su veredicto. (--grad-on-light quedó SIN USO al revertir hero y comparador; se conserva por si vuelve a probarse en tipografía sobre fondo claro.) */ --grad:linear-gradient(96deg,#C4462A 0%,#E8622A 30%,#F58A32 62%,#FFC46B 100%); --grad-on-light:linear-gradient(96deg,#A8321C 0%,#C4462A 30%,#D4551F 62%,#E8801F 100%); --grad-on-dark:linear-gradient(96deg,#FF8A4C 0%,#FFB06A 38%,#FFD9A0 72%,#FFEFD6 100%); /* CANDY: Ginder lo mantiene en la TIPOGRAFÍA del hero y del comparador (19-jul-2026: probó la rampa emulsión ahí y la rechazó — "ese color no me gusta, ponlo como estaba antes"). En las SUPERFICIES sí se queda la rampa nueva: el botón de WhatsApp con el naranja incandescente SÍ le gustó. */ --grad-candy:linear-gradient(108deg,#ffd9a0,#ff9b5e 30%,#ff5fa2 56%,#a78bff 80%,#7fb4e8); /* Variante profunda para texto sobre fondos CLAROS-CÁLIDOS (contacto): mismo recorrido pero más oscuro, para no bajar de 3:1 sobre lavanda/peach. */ --grad-ink:linear-gradient(105deg, #2b5c72 0%, #6b5570 38%, #8f4a5a 62%, #7f4f37 100%); /* Anclas discretas del ramp, por si algún gesto necesita un stop sólido */ --grade-cold:#1f5a72; /* log */ --grade-warm:#ad4a29; /* color */ /* ---- SOMBRAS CON COLOR ------------------------------------------------ --ink pasa de negro neutro #070709 a un negro con tinte frío imperceptible (recomendación del audit). */ --ink:#08090e; /* ---- 3 TOKENS DE MOTION ---------------------------------------------- Un solo vocabulario: entrada expo-out, salida más rápida, muelle único. (--ease del tema se conserva; estos estandarizan el código nuevo.) */ --ease-enter:cubic-bezier(.22,1,.36,1); --ease-exit:cubic-bezier(.32,.94,.6,1); --spring:cubic-bezier(.34,1.45,.5,1); } /* ========================================================================== EMULSIÓN — FUNDACIÓN (concepto base: la web como copia de 35mm). Química de color fotoquímico + ease "lens". NO se pisa el --ink del tema (controla el fondo global); la tinta cálida vive en --ink-em. Guía: docs/superpowers/specs/2026-07-18-emulsion-mapa-maestro-design.md ========================================================================== */ :root{ --print-white:#F4EDE0; --print-cream:#EAE0CD; --film-black:#171210; --shadow-500t:#1A2226; --ink-em:#251E17; --bone:#EFE6D6; --halation:#FF6A33; --gold-250d:#E2A94A; --teal-2383:#3E7A72; --teal-light:#7FB3AB; --cherry-print:#B0392C; --emulsion-green:#6E7C5C; --ease-lens:cubic-bezier(.22,.61,.36,1); } /* Seleccionar texto = pasarlo por la luz (halation). Una línea, cero conflicto. */ ::selection{ background:var(--halation); color:var(--print-white); } ::-moz-selection{ background:var(--halation); color:var(--print-white); } /* Reset global del flash gris/azul del sistema al pulsar (peleaba con los :active cuidados). Aplica en todos los anchos. */ a,button,[role="button"],.card,.link,.chip,.mo-fchip,.dt-fchip,.reel-thumb, .cg-ba,.langbtn,.gh-mist-item,.cta-float,.mo-top,.mo-grab{ -webkit-tap-highlight-color:transparent; } /* CTA WhatsApp regradeada (#4): fuera la sombra rosa fija "add to cart"; sombra neutra-cálida acorde al ramp. Reglas base → ganan al tema (misma especificidad, cargan después). */ .cta-float{ box-shadow: inset 0 1px #ffffff66, 0 0 34px -4px rgba(255,140,72,0.50), /* halation: halo de luz cálido que emite */ 0 20px 48px -16px rgba(80,44,24,0.50); /* elevación cálida */ } /* [A5 · 19-jul-2026] El hover va dentro de @media (hover:hover): en táctil el navegador "pega" el estado :hover tras el tap y el bloom se quedaba encendido hasta tocar otra cosa. */ @media (hover:hover) and (pointer:fine){ .cta-float:hover{ box-shadow: inset 0 1px #ffffff80, 0 0 54px 0 rgba(255,150,84,0.68), /* el halo florece al hover */ 0 26px 60px -14px rgba(80,44,24,0.60); } } /* ========================================================================== GRADE GLOBAL (#5) — EL SITIO SE GRADA DEL LOG AL COLOR CON EL SCROLL -------------------------------------------------------------------------- La firma: la intro y el proceso arrancan DESATURADOS y planos (look "log") y suben a COLOR PLENO al llegar a «05 — Color»; el comparador (sin filtrar) demuestra su antes/después vívido justo después, y el portafolio ya vive en color. Nace de que Ginder ES colorista → intransferible. · premium.js (SOLO escritorio, solo durante scroll) escribe --g-sat/-con/-bri en :root con el comparador «05 — Color» como culminación del grade. · Default = color pleno (1/1/1): móvil, sin-JS y reduced-motion quedan SEGUROS (color pleno fijo). El hero queda fuera (reel flotante = fixed). · .intro y .journey ya son position:relative+overflow:hidden → el filtro no mueve la spine ni las auras (mismo bloque contenedor). ========================================================================== */ :root{ --g-sat:1; --g-con:1; --g-bri:1; } .intro{ filter:saturate(var(--g-sat)) contrast(var(--g-con)) brightness(var(--g-bri)); } @media (prefers-reduced-motion:reduce){ .intro{ filter:none; } } /* ========================================================================== PROCESO (.journey) — mundo LUZ (EMULSIÓN). NADA de oscuridad (regla de Ginder para este proyecto): fondo AZUL iridiscente LUMINOSO (skylrk) y la química de emulsión ENCIMA — grano, halation cálido puntual, tensión cálido/frío tipo print 2383 (luces cálidas sobre azul frío). El texto claro se lee por la HALATION que lo rodea (la luz que sangra), no oscureciendo el fondo. El shader (premium.js) da el azul en movimiento; este gradiente es el fondo/fallback. ========================================================================== */ .journey{ position:relative; } .gh-journey-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; /* Rango skylrk: azul un punto más PROFUNDO (contraste del texto blanco) + una ZONA de azul oscuro + PEDAZOS de blanco brillante (como la animación de la referencia). Mismo tono, más cuerpo. */ background: radial-gradient(88% 66% at 84% 80%, rgba(240,246,250,0.92) 0%, rgba(240,246,250,0) 42%), radial-gradient(120% 104% at 10% 90%, #2c5280 0%, rgba(44,82,128,0) 54%), linear-gradient(125deg,#4a7aa8 0%,#6f9fc9 46%,#8ebbd9 100%); } .journey > .spine, .journey > .act, .journey > .color-sec{ z-index:1; } /* [B2 · REVERTIDO 19-jul-2026] Se probó COSER la entrada y la salida del azul (fundidos largos + halation en las costuras, con máscaras para que el naranja de 05 emergiera sobre el shader). Técnicamente funcionaba —los saltos medidos por píxel bajaron de 229 y 247 a 8 y 6— pero Ginder lo RECHAZÓ: prefiere el corte directo, con el azul entrando y saliendo limpio. NO volver a fundir estas dos costuras sin que lo pida. */ /* ========================================================================== SPINE — el glow, hecho como se hace de verdad -------------------------------------------------------------------------- [19-jul-2026] Corrección de Ginder: «el glow debe ser sutil, y la técnica de un buen glow es realzar las altas luces con un desenfoque gaussiano y expandirlo donde haya luz — pero debe verse REAL». Tenía razón y lo anterior estaba mal planteado. Yo estaba PINTANDO un halo: una banda con degradado y un foco radial inventados alrededor de la línea, más cinco box-shadow encadenadas. Un halo pintado nunca se ve real, por dos motivos: la caída de una `box-shadow` NO es gaussiana (es más dura y más uniforme), y el halo no sabe dónde hay luz — se dibuja igual de fuerte donde la línea es naranja oscuro que donde es casi blanca. Un glow de verdad es una operación de compositing, la misma que hace Dehancer o el bloom de Resolve: 1. AISLAR las altas luces de la propia imagen, 2. DESENFOCARLAS con una gaussiana, 3. SUMARLAS sobre el original. Aquí se hace literalmente eso: los dos pseudos son una COPIA EXACTA de la línea (`background:inherit`, `inset:0`), desenfocada con `filter:blur()` —que sí es una gaussiana de verdad— y compuesta en `screen`, que suma luz en vez de pintar encima. Como la copia lleva el mismo degradado, la parte alta de la spine (casi blanca, #FFF3E0) irradia mucho más que la baja (#FF8A4C): la luz se expande DONDE HAY LUZ, sola, sin tener que dibujarlo. Dos escalas, como en composición: un blur corto para el núcleo y otro largo y muy tenue para el derrame. Las opacidades son bajas a propósito — esto tiene que verse como luz, no como un tubo de neón. COSTE: blurear una capa de 2px de ancho es barato aunque la línea sea larga, y en móvil el tema le da display:none a la spine, así que no se paga nada. CALIBRACIÓN: intensidad = las dos `opacity`; alcance = los dos `blur()`. ========================================================================== */ #spineFill, .spine-fill{ background:linear-gradient(#FF8A4C 0%, #FFD9A0 55%, #FFF3E0 100%) !important; position:relative; /* un rastro mínimo pegado al filo, para que la línea no recorte en seco */ box-shadow:0 0 3px rgba(255,190,130,0.55) !important; } #spineFill::before, .spine-fill::before, #spineFill::after, .spine-fill::after{ content:""; position:absolute; inset:0; background:inherit; /* la MISMA luz, no un halo inventado */ pointer-events:none; /* `screen` como respaldo y `plus-lighter` —la suma lineal del compositing— para quien lo soporte. MEDIDO: sobre este azul (claro, luminancia ~0.55) `screen` NO tiene margen y el glow desaparece por mucho que se amplifique la fuente; se probó con brightness(4.5) y seguía sin verse. Es física, no un fallo: un bloom se ve contra la sombra, no contra un cielo claro. `plus-lighter` suma de verdad y sí se percibe manteniéndose sutil. */ mix-blend-mode:screen; mix-blend-mode:plus-lighter; } /* `brightness()` ANTES del `blur()` = el realce de altas luces previo al desenfoque. Sin él no hay glow: al desenfocar una línea de 2px a 18px, su energía se reparte en ~110px y cae al 2%. Y como el realce actúa sobre el propio degradado, la parte ALTA de la spine (casi blanca) irradia mucho más que la baja (naranja, más oscuro que el azul de fondo): la luz se expande donde hay luz, sin dibujarlo. */ #spineFill::before, .spine-fill::before{ filter:brightness(1.8) blur(5px); opacity:0.70; } #spineFill::after, .spine-fill::after { filter:brightness(2.2) blur(18px); opacity:0.38; } .spine{ background:rgba(255,255,255,0.20) !important; } /* Tarjetas: cristal TRANSPARENTE luminoso (se respira el azul) + texto claro legible por HALATION cálido (+ micro-peso frío tipo subtítulo), sin negro. */ .journey .act-card{ background:rgba(255,255,255,0.20); -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5); border:1px solid rgba(255,255,255,0.38); box-shadow: 0 30px 70px -40px rgba(30,54,82,0.42), inset 0 1px 0 rgba(255,255,255,0.45); } .journey .act-card h2{ color:#FFFFFF; } /* blanco puro — CERO sombra */ .journey .act-card p{ color:rgba(255,255,255,0.94); } /* blanco — CERO sombra */ .journey .act-card .num{ /* cejilla MELOCOTÓN + glow mínimo (halation de cámara, no sombra) */ color:#FFD9A0; text-shadow:0 0 12px rgba(255,170,100,0.45); } .journey .act-card .dots span{ background:rgba(255,255,255,0.60); } /* [20-jul-2026] El acento del numeral fantasma se retiró junto con los numerales (ver desktop-opt.css): sin content, no hay nada que teñir. */ /* ========================================================================== #12 — RIEL DE METADATA EN LOS MÁRGENES (adcker / mason-wong) Convierte el vacío lateral en firma y unifica la numeración. Space Mono con mix-blend difference → lee sobre claro Y oscuro. Solo ≥1200px (donde hay márgenes vacíos). Izquierda = índice de sección (JS scrollspy); derecha = geo + copyright. pointer-events:none (decorativo). ========================================================================== */ .gh-rail{ position:fixed; top:50%; z-index:35; font-family:"Space Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#fff; mix-blend-mode:difference; writing-mode:vertical-rl; white-space:nowrap; pointer-events:none; font-variant-numeric:tabular-nums; } .gh-rail-l{ left:20px; transform:translateY(-50%) rotate(180deg); } /* lee de abajo-arriba */ .gh-rail-r{ right:20px; transform:translateY(-50%); } /* lee de arriba-abajo */ @media (max-width:1199px){ .gh-rail{ display:none; } } /* #18 — los AVIF no deben alterar el layout (comparador/about): display:contents hace que el se comporte como hijo directo. */ .cg-frame picture, .about-photo picture{ display:contents; } /* ========================================================================== ÚLTIMA SECCIÓN OSCURA OCULTA (petición de Ginder): los enlaces a artículos (.dt-articles) y el footer (.foot © + @). Reversible = quitar esta regla. OJO: .dt-articles son enlaces SEO internos a los artículos (los artículos y el JSON-LD del siguen; solo se oculta el enlazado visible de la home). ========================================================================== */ .dt-articles, .foot{ display:none !important; } /* ========================================================================== [B1 · 19-jul-2026] LA RAMPA, APLICADA SEGÚN EL FONDO -------------------------------------------------------------------------- `.grad` del tema pinta texto con background-clip. Los tres sitios donde vive tienen fondos distintos, así que cada uno recibe la variante que le corresponde. `--grad` a secas se queda para las SUPERFICIES (el tema ya lo usa en .cta-float y #scrollBar; no hay que tocarlos). ========================================================================== */ /* 1) HERO — «al ÚLTIMO COLOR» sobre hueso #f2f1ee: SE QUEDA EL CANDY. Como --grad ya no es el candy (ahora lleva la rampa emulsión de las superficies), el hero necesita recuperarlo. Se hace REDEFINIENDO LA VARIABLE en su ámbito, no sobrescribiendo `background-image`. Por qué: el tema pinta este texto con DOS reglas encadenadas que ajustan juntas `background-image`, `background-blend-mode`, `background-repeat` y `background-size` (110px de grano + 100% del degradado, luego simplificadas a `auto`). Al declarar solo `background-image` desde fuera, esa maquinaria se quedaba descuadrada y el degradado salía A BLOQUES en vez de continuo. Redefiniendo la variable, el tema hace exactamente lo de siempre — solo que con el candy. */ .hero-light .grad{ --grad:var(--grad-candy); } /* 2) COMPARADOR — «La misma toma. Otra alma.»: se deja el degradado ORIGINAL del tema (azul→malva→rosa→arena). Mismo criterio que el hero: la rampa emulsión en tipografía sobre claro está rechazada. */ /* 3) CONTACTO — «Hablemos.» sobre la ola oscura del atardecer. Aquí la rampa densa sería ilegible: va la de altas luces cálidas (halation). */ .contact .sub.grad, .contact .sub.grad .w{ background-image:var(--grad-on-dark); } /* [A5b · 19-jul-2026] Neutralizar los :hover DEL TEMA en táctil. Meter los míos en @media (hover:hover) no bastaba: el tema declara `.cta-float:hover{box-shadow:…}` y `.about-photo:hover{transform:scale(1.045)}` SIN media query, así que en un móvil seguían quedándose "encendidos" tras el tap. Aquí se devuelven a su estado de reposo cuando no hay hover real. */ @media (hover:none), (pointer:coarse){ .cta-float:hover{ box-shadow: inset 0 1px #ffffff66, 0 0 34px -4px rgba(255,140,72,0.50), 0 20px 48px -16px rgba(80,44,24,0.50) !important; } .about-photo:hover{ transform:none !important; } } /* ========================================================================== [A1 · 19-jul-2026] MENÚ LEGIBLE EN TODA LA WEB -------------------------------------------------------------------------- Problema medido: el tema alterna dos estados de nav con la clase `nav-lite`, que un script inline del HTML activa SOLO si a 42px del top hay una sección con `.hero-light` o `.sec-light`. Las secciones que añadimos después (proceso azul, 05 color, about y contacto sobre la foto del mar) no llevan esas clases, así que el nav entraba en su estado "fondo oscuro" —texto #a6a6b0 sobre píldora rgba(255,255,255,.06)— encima de fondos que en realidad son CLAROS. Contrastes medidos: 1,35:1 sobre el azul del proceso, 1,9:1 sobre el naranja de 05, 2,1:1 sobre el atardecer. Ilegible. Decisión: en esta web NO hay ninguna sección oscura bajo el nav (la foto del mar tiene el cielo cálido justo en esa franja), así que el menú va SIEMPRE en clave clara. Una identidad única de navegación en todo el recorrido, cero JS añadido, cero coste de scroll. Se le da algo más de cuerpo que al `nav-lite` del tema (.72 → .86) y `saturate` en el backdrop para que aguante sobre los fondos vivos — el patrón skylrk: tono con cuerpo + glass saturado, NUNCA sombra. Reversible: borrar este bloque devuelve el comportamiento del tema. ========================================================================== */ .nav.glass, .langbtn.glass{ background:rgba(242,241,238,0.86) !important; border-color:rgba(13,13,16,0.14) !important; -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6); box-shadow:0 10px 30px -16px rgba(40,26,16,0.34); } .nav.glass .brand{ color:#0d0d10 !important; } .nav.glass a, .langbtn.glass{ color:#3c3c44 !important; } .nav.glass a:hover, .langbtn.glass:hover{ color:#0d0d10 !important; background:rgba(13,13,16,0.07) !important; } .nav.glass a[aria-current], .nav.glass a.active{ color:#0d0d10 !important; } /* [A4 · REVERTIDO 19-jul-2026] Aquí vivía `.cta-float.gh-cta-away`, que desvanecía el CTA flotante mientras el titular de contacto entraba por abajo. Ginder lo rechazó: prefiere el recorrido continuo del tema (el CTA "aparecía corrido") antes que un fundido de salida y reaparición. Ver la nota en premium.js. */ /* ========================================================================== Retrato del ABOUT — aro dorado fino + bloom cálido (halation, NO sombra). El tema no le da aro; aquí "emite" luz cálida (hora mágica) sobre la foto del mar. overflow:hidden recorta el contenido, no el glow exterior. ========================================================================== */ .about-photo{ box-shadow: 0 0 0 1px rgba(226,169,74,0.40), /* aro dorado (Vision3 250D) */ 0 0 36px -6px rgba(255,140,72,0.34), /* bloom cálido */ 0 16px 44px -16px rgba(60,34,18,0.42); /* elevación cálida */ } /* [A5 · 19-jul-2026] Mismo motivo que el CTA: en táctil el aro dorado se quedaba "florecido" tras el tap (el tema añade además un scale(1.045)). */ @media (hover:hover) and (pointer:fine){ .about-photo:hover{ box-shadow: 0 0 0 1px rgba(226,169,74,0.55), 0 0 56px 0 rgba(255,150,84,0.50), /* el bloom florece al hover */ 0 20px 50px -14px rgba(60,34,18,0.46); } } /* ========================================================================== [C2 · 19-jul-2026] LA FIRMA MÍNIMA — el cierre de la web. -------------------------------------------------------------------------- Hasta ahora la web terminaba en seco sobre la ola. Ginder eligió "solo una firma mínima", NO un bloque de end-credits. Vive DENTRO de .gh-photo-zone (sobre la foto del mar), como última línea del bloque de contacto. NO resucita .foot ni .dt-articles: siguen ocultos más arriba en este fichero. Sin caja, sin filete, sin sombra. COLOR: tono SÓLIDO cálido, no alfa. Un rgba(244,234,217,.58) compuesto sobre el agua daba #a29e93 —gris verdoso frío— y solo 4,0-4,3:1 en el peor punto, por debajo de AA para 11px. #b4a893 mantiene el calor y mide ≈6,2:1 sobre la media del agua y ≈4,9:1 sobre su punto más claro. AVISO: eso vale mientras siga CENTRADA y estrecha. El tercio derecho del pie de sea.jpg tiene una mancha cálida donde el contraste cae a 3,7:1. No alinearla a un lado ni ensancharla sin volver a medir. ========================================================================== */ .gh-sign{ margin:clamp(34px, 6vh, 58px) 0 0; font-family:"Space Mono", ui-monospace, monospace; font-size:11px; /* el mínimo del sitio (= .gh-rail) */ line-height:1.5; letter-spacing:.16em; text-transform:uppercase; font-variant-numeric:tabular-nums slashed-zero; color:#b4a893; text-shadow:none; /* explícito: aquí jamás una sombra */ } /* SITIO PARA LA FIRMA. Sustituye el padding-bottom del tema, que no deja hueco. ESCRITORIO: el caso peor es prefers-reduced-motion, donde el IIFE del tema hace return y .cta-float se queda fijo y centrado en bottom:38px → su borde superior cae a 100px. 116px de suelo lo libra. MÓVIL: además hay que salvar el dock (.mo-dock, borde superior a 64px). La media query es (max-width:760px) a secas porque el dock lo inyecta mobile-enhance.js por ancho, no por pointer:coarse. */ .gh-photo-zone .contact{ padding-bottom:max(9vh, 116px); } @media (max-width:760px){ .gh-photo-zone .contact{ padding-bottom:calc(max(9vh, 76px) + 64px + env(safe-area-inset-bottom, 0px)); } } /* ========================================================================== [E7 · 19-jul-2026] FOCO DE TECLADO VISIBLE EN TODOS LOS ANCHOS. El bloque de :focus-visible de desktop-opt.css vive dentro de @media (min-width:761px): en tablet, en móvil con teclado externo y en cualquier dispositivo de puntero grueso con navegación por teclado NO había ningún indicador de foco. Aquí va la red de seguridad, sin media query, y añadiendo los interactivos que faltaban en aquella lista. ========================================================================== */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, .gh-mist-item:focus-visible, .about-photo:focus-visible, .mo-fchip:focus-visible, .mo-top:focus-visible, .skip-link:focus-visible, .dt-articles a:focus-visible, video:focus-visible{ outline:2px solid #ff9b5e; outline-offset:3px; border-radius:12px; } /* ========================================================================== [gooey · 19-jul-2026] EL ACTO 05, SIN DESBORDAMIENTO. En ≤760px y con prefers-reduced-motion el JS del tema escribe el texto de fallback («El más importante.» / "The most important one."), que es mucho más largo que el sizer, pero el CSS del tema mantiene #gooeyT1 en absoluto y con white-space:nowrap → scroll horizontal. En inglés es peor: "The most important one." mide ~345px en un ancho útil de 338px a 390px de viewport. Aquí se replica lo que el tema ya hace en reduced-motion y se añade lo que faltaba: white-space:normal. Va en tokens.css y no en mobile-opt.css porque aquel se enlaza con media="(max-width:760px),(pointer:coarse)" y dejaría fuera el caso de una ventana estrecha de escritorio con puntero fino. ========================================================================== */ @media (max-width: 760px), (prefers-reduced-motion: reduce) { .gooey-stage { filter: none; } .gooey-sizer, .gooey-stage #gooeyT2 { display: none; } .gooey-stage #gooeyT1 { position: static; white-space: normal; filter: none !important; opacity: 1 !important; } }