/* ============================================================ tokens.css — Albacetea F1.4, F1.5, F1.7 de PLAN.md ESTE ES EL ÚNICO ARCHIVO DEL PROYECTO DONDE PUEDE APARECER UN HEX. Si un color se escribe en otro sitio, el sistema se ha roto. ============================================================ */ /* ---------- Tipografía autoalojada (F1.3) ---------- Variables: un fichero por familia cubre todo el rango de pesos. Ver docs/tipografia.md. Cero peticiones a dominios de terceros. */ /* Montserrat: el cuerpo y la UI (decisión de Diego, 18 sep 2026). Sustituye a Inter en todo lo que no sea titular; los titulares siguen en Montserrat. Variable 300-800, asi que normal y bold salen del mismo fichero: una peticion, 37 KB. Autoalojada como las demas (§9): cero peticiones a fonts.googleapis.com. */ @font-face { font-family: 'Montserrat'; src: url('../../public/fonts/montserrat-latin.woff2') format('woff2-variations'); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; } :root { /* ---------- Color (CLAUDE.md §4) ---------- Los valores salen de la foto real de El 18: negro de sala, globos de luz ámbar, baño azul de escenario. */ --ink: #0A0A0B; /* fondo, casi negro */ --paper: #F5F5F3; /* texto sobre negro */ --amber: #E8A33D; /* acento cálido — los globos. ÚNICO acento de interfaz */ --stage: #1E36B8; /* azul de escenario. SOLO en el fondo animado, nunca en UI */ /* Texto secundario. El valor original de CLAUDE.md §4 (#6E6E72) daba 3,9:1 sobre --ink: SUSPENDE el AA que exige §9. Aclarado al mínimo que pasa con margen (5,8:1) conservando el carácter del gris. Cuando dos reglas de la especificación chocan, gana la accesibilidad. */ --smoke: #8A8A90; /* Derivados. Se añaden solo cuando se necesitan, no por adelantado. Van en rgb() para poder modular alpha sin repetir el hex. */ --ink-rgb: 10, 10, 11; --paper-rgb: 245, 245, 243; --amber-rgb: 232, 163, 61; /* ---------- Familias ---------- */ /* Una sola familia para todo (decisión de Diego, 18 sep 2026): los titulares también en Montserrat, en bold. --font-display se queda como token para no tocar las seis reglas que lo usan, y por si algún día vuelve a separarse del cuerpo. */ --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---------- Escala tipográfica fluida (F1.5) ---------- 4 tamaños y ya. El mínimo de cada clamp() está calculado PARA 360px, no para 1440. Comprobado con el titular real: "Una hora. Dos sillas. Ninguna pregunta pactada." A 360px el display no parte palabras ni desborda, y el cuerpo mantiene entre 35 y 45 caracteres por línea. */ --step-display: clamp(2.75rem, 1.30rem + 6.45vw, 7.5rem); /* 44px → 120px */ --step-section: clamp(1.75rem, 1.36rem + 1.74vw, 2.75rem); /* 28px → 44px */ --step-body: clamp(1rem, 0.96rem + 0.19vw, 1.125rem); /* 16px → 18px */ --step-caption: clamp(0.9375rem, 0.92rem + 0.11vw, 1rem); /* 15px → 16px */ /* Tratamiento de la display: enorme y apretada (CLAUDE.md §4). Montserrat es geométrica y de caja alta generosa: aguanta algo más de apretado que las display anteriores sin que las mayúsculas choquen entre líneas. NOTA: public/fonts/syne-latin.woff2 ya no lo usa la web, pero NO se borra: el vídeo promo, los carteles y el pipeline de Instagram siguen tirando de él. */ --display-tracking: -0.02em; --display-leading: 0.98; /* Medida del cuerpo: máx. 55 caracteres por línea (CLAUDE.md §5.3). El `ch` es más estrecho que el carácter medio real, así que 38ch rinde ~40 caracteres por línea: dentro del objetivo de 35-45 de F1.5 y por debajo del techo de 55. Montserrat es algo más ancha que Inter, así que la medida real baja un poco: mejor, no peor. */ --measure: 38ch; /* ---------- Espaciado ---------- Escala de 4px. El aire es parte del diseño: la última línea de "Cómo funciona" necesita mucho espacio alrededor. */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; /* ---------- Utilidades móviles (F1.7) ---------- Se definen una vez aquí y se usan en todas partes. Ninguna tarea posterior debe repetir estos valores a mano. */ /* Zona táctil mínima. PLAN.md regla transversal 5: 44×44px, con 8px de separación entre pulsables. */ --tap-min: 44px; --tap-gap: 8px; /* Alto cómodo de botón en móvil (F3.1 pide 48px). */ --control-h: 48px; /* Tamaño mínimo de input. Por debajo de 16px iOS hace zoom automático al enfocar y descoloca la página entera. PLAN.md regla transversal 7. NO BAJAR DE AQUÍ. */ --input-size: 1rem; /* Safe area del notch y de la barra de gestos. PLAN.md regla transversal 8. env() devuelve 0px donde no aplica. */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); /* Canal lateral de la página, ya con safe-area sumada. */ --gutter: max(1.25rem, var(--safe-l)); /* Ancho máximo de contenido en escritorio. */ --max-w: 68rem; /* ---------- Motion ---------- Duraciones de brand_fluentia.md. Se anulan enteras en prefers-reduced-motion (ver base.css). */ --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 500ms; --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* ---------- Foco ---------- Siempre en ámbar, siempre visible. Nunca outline: none (§9). */ --focus-w: 3px; --focus-offset: 3px; } /* ---------- Altura de viewport (F1.7, regla transversal 4) ---------- En iOS, 100vh se cuela por debajo de la barra de navegación y corta el CTA del hero. Es el fallo más común y el más caro aquí. --vh-full se declara primero en vh (fallback para navegadores viejos) y se pisa con dvh donde exista. Usar SIEMPRE var(--vh-full), nunca 100vh directamente. */ :root { --vh-full: 100vh; } @supports (height: 100dvh) { :root { --vh-full: 100dvh; } }