/* ============================================================================ SOMOS TRUFAS — LA MARCA ============================================================================ Las dos tipografías y los tokens de color y medida. NADA MÁS: aquí no hay componentes, ni reset, ni maqueta. Eso vive en base.css. POR QUÉ ESTÁ SEPARADO DE base.css, QUE ES DE DONDE SALIÓ. Porque el panel interno (admin.somostrufas.org) es OTRO Worker, en otro origen, y necesita la marca pero no necesita el nav, el hero ni las tarjetas de la web pública. Cargando base.css entero se traería 950 líneas que no usa —y, lo que de verdad importa, se traería `.panel`, que en base.css es el desplegable del menú móvil y en el panel sería la pantalla entera. Dos componentes con el mismo nombre es el bug que aún no ha pasado. ASÍ QUE ESTE ARCHIVO ES LA FRONTERA: lo que comparten la web pública y el panel, y solo eso. CÓMO LE LLEGA AL PANEL (desde el 28 sep 2026): COPIADO AL PUBLICAR. El `build` de panel/wrangler.jsonc corre scripts/comun-panel.mjs, que copia este archivo a panel/assets/comun/ y las fuentes a panel/assets/fonts/. Los `url('/assets/fonts/…')` de abajo resuelven igual en los dos sitios. Hasta ese día el panel lo leía de somostrufas.org en cada visita, con CORS para las fuentes: un cambio aquí cambiaba el panel sin probarlo, y en las previews del panel las fuentes no cargaban. Los componentes que comparten los dos sitios (botones, píldoras, cajas, menú de cuenta) están en componentes.css, que viaja igual. NO SE ENLAZA CON @import DESDE base.css, y no es un detalle: un @import obliga al navegador a pedir base.css, leerlo y ENTONCES pedir este —dos viajes en fila antes de pintar una letra. Es exactamente el paso que se quitó de encima el día que Poppins dejó de venir de Google. Va con su propio en cada página, ANTES del de base.css, y los dos se piden a la vez. ========================================================================== */ /* ---------- LA TIPOGRAFÍA DE LA MARCA ---------- DHARMA GOTHIC M, LA DE VERDAD. Hasta ahora el sitio pedía Big Shoulders Display a Google Fonts como SUSTITUTO: la del manual es Dharma Gothic M, que es de pago y no está en ningún servicio público. El parecido llegaba para el aire condensado, pero no es la letra de la marca, y en el manual la letra no es un detalle. Los archivos viven en /assets/fonts/ y salen de la carpeta de marca (Drive → Somos Trufas → Directiva → Branding Público → Fonts). Se sirven desde nuestro dominio por velocidad. La licencia de la organización es completa (aclarado el 27 sep 2026): no obliga a servirla solo desde aquí. VAN EN WOFF2 Y NO EN TTF, que es como llegaron: 15 KB por peso en vez de 55. El navegador que no entienda woff2 —ninguno de los últimos diez años— se queda con Impact, que es la reserva condensada de la pila. LOS ARCHIVOS CONVERTIDOS ESTÁN EN EL REPOSITORIO Y ESO NO ES PROVISIONAL: Drive guarda los .ttf originales, esto guarda lo que sirve el sitio. La conversión se hace UNA VEZ por peso, con `python3 scripts/fuentes.py`, y no vuelve a hacer falta ni al clonar ni al desplegar. TRES PESOS Y NO CATORCE: el sitio pide 500, 700 y 800 a la display, y cada peso que se declara es un archivo que alguien descarga. Las cursivas no entran porque la display nunca va en cursiva (el `em` del titular está puesto a font-style:normal a propósito). `font-display:swap` es el mismo trato que había con Google Fonts: primero se lee con la letra de reserva y la de marca entra cuando llega. Nunca hay un hueco en blanco esperando a una fuente. Los rangos de peso —100 600, 800 900— cubren de sobra lo que se pida: sin ellos, un font-weight:600 suelto en cualquier hoja se quedaría sin cara y el navegador engordaría la Regular a la fuerza. */ @font-face{ font-family:'Dharma Gothic M'; src:url('/assets/fonts/DharmaGothicM-Regular.woff2') format('woff2'); font-weight:100 600;font-style:normal;font-display:swap; } @font-face{ font-family:'Dharma Gothic M'; src:url('/assets/fonts/DharmaGothicM-Bold.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap; } @font-face{ font-family:'Dharma Gothic M'; src:url('/assets/fonts/DharmaGothicM-ExBold.woff2') format('woff2'); font-weight:800 900;font-style:normal;font-display:swap; } /* ---------- DHARMA GOTHIC E, LA DE LO PEQUEÑO (26 sep 2026) ---------- La misma familia en un ancho mayor: el mismo titular ocupa un 26 % más que en la M. La M sigue en hero, títulos y cifras, donde luce; la E entra en subtítulos, datos y numerales, que es donde la M no se leía —en pequeño los trazos de la M se juntan y la I, la L y el 1 se confunden—. Elegido sobre el muestrario de tipografías (skill diseno-trufas). Dos pesos y ni uno más, los que se usan: Bold (subtítulo y dato) y ExBold (numeral). Salen de Drive → Fonts/Website/ (.woff) pasados a woff2. Misma licencia completa que la M. */ @font-face{ font-family:'Dharma Gothic E'; src:url('/assets/fonts/DharmaGothicE-Bold.woff2') format('woff2'); font-weight:100 700;font-style:normal;font-display:swap; } @font-face{ font-family:'Dharma Gothic E'; src:url('/assets/fonts/DharmaGothicE-ExBold.woff2') format('woff2'); font-weight:800 900;font-style:normal;font-display:swap; } /* ---------- POPPINS, LA DE TEXTO, TAMBIÉN NUESTRA ---------- ANTES VENÍA DE GOOGLE FONTS y ahora se sirve desde /assets/fonts/, como la display. Los archivos salen de la misma carpeta de marca en Drive (Somos Trufas → Directiva → Branding Público → Fonts → Poppins) y se convirtieron con `python3 scripts/fuentes.py`, igual que Dharma. POR QUÉ SE MUDÓ. Cada visita pedía la hoja a fonts.googleapis.com y los archivos a fonts.gstatic.com: dos dominios ajenos, con su DNS y su TLS, en el camino crítico antes de pintar una sola letra de texto. Y cada persona que abría la web le hacía una petición a Google sin haberlo pedido, que para una organización benéfica no es un detalle menor. CUATRO PESOS, LOS MISMOS QUE PEDÍA A GOOGLE: 300, 400, 500 y 600. Ni uno más, y esto importa: el sitio usa font-weight:700 y 800 en varios sitios, pero SIEMPRE sobre la pila de Dharma, nunca sobre esta. Antes tampoco los servía Google, así que lo que se pintaba con 700 en Poppins —nada, hoy— seguiría engordándose igual. El cambio es exacto: mismas caras, mismos pesos, otro servidor. NÚMEROS SUELTOS Y NO RANGOS, al revés que Dharma. Allí la Regular cubre 100 600 porque solo hay tres caras y hay que tapar los huecos; aquí las cuatro caras son contiguas, y un rango ancho en la Regular se comería a la Light, la Medium y la SemiBold. El script lo detecta solo desde que se convirtió esta familia: ver `RANGO_REGULAR` en scripts/fuentes.py. PESAN 11 KB CADA UNA Y NO 47 porque se les quitó el devanagari, que Poppins trae entero: 94 caracteres hindi y unas 650 ligaduras para componerlos, dos tercios del archivo, para un alfabeto que esta web no escribe. Ninguna letra latina se tocó. El porqué largo está en la cabecera de scripts/fuentes.py. */ @font-face{ font-family:'Poppins'; src:url('/assets/fonts/Poppins-Light.woff2') format('woff2'); font-weight:300;font-style:normal;font-display:swap; } @font-face{ font-family:'Poppins'; src:url('/assets/fonts/Poppins-Regular.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'Poppins'; src:url('/assets/fonts/Poppins-Medium.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap; } @font-face{ font-family:'Poppins'; src:url('/assets/fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap; } /* ---------- TOKENS ---------- Marca: Mikado Yellow #FFC621 · Liver #583F37 (Manual TRUFAS) Display: Dharma Gothic M → la del manual, servida desde /assets/fonts/ Texto: Poppins → según manual, servida desde /assets/fonts/ Este es el único sitio donde se declaran los colores de marca. EL SITIO ES DICROMÁTICO: amarillo y marrón, sus variantes tonales, y una escala de grises neutra. No hay un tercer matiz, y eso es una regla y no una casualidad — si aparece uno nuevo, es que algo se coló. AQUÍ VIVÍA `--live:#FF4D3D`, el rojo, y conviene saber por qué se fue. Hacía dos trabajos a la vez: era «está pasando ahora» (la barra superior, el botón de únete, la píldora, el borde de la tarjeta en directo) y era «algo va mal» (los errores de formulario, el sello negativo del panel, el aviso de plantilla del media kit). Un color que significa dos cosas opuestas no significa ninguna, y encima el amarillo de marca —que es el que debería llevarse la mirada— competía con él en cada pantalla. EL REPARTO DE AHORA, y es lo único que hay que recordar para no romperlo: amarillo → lo que se puede pulsar y lo que está pasando ahora marrón → el soporte: superficies, tinta sobre amarillo, estados tibios gris → lo que avisa pero NO se pulsa: errores, betas, datos sin verificar, lo apagado Un error en gris se lee raro la primera vez y es correcto: el error no es una llamada a la acción, y el día que todo lo importante sea amarillo, el amarillo habrá dejado de decir nada. Lo que salva al error no es el color —nunca lo fue, ver a quien no distingue matices— sino el icono y la frase, que ya estaban. `--live` NO se dejó como alias de nada. Un token llamado «live» que ya no pinta lo que está en vivo es el resto que engaña dentro de seis meses. */ :root{ --ink:#17110D; --surface:#241A15; --surface-2:#2E211A; --line:#4A362B; --cream:#F2E8DC; --muted:#B09781; --yellow:#FFC621; --brown:#583F37; /* EL COLOR DE CADA REGIÓN. Solo pinta el tag de región de un torneo (esports), relleno y con el texto en --ink. Comprobados el 26 sep 2026 contra --ink y con simulación de daltonismo (Machado 2009): norte #E23DFF contraste 5,7:1; distinto del amarillo y del verde en deuteranopia, protanopia y tritanopia. sur #2FFFB0 contraste 14:1. NO #89FF2F, el primero que se eligió: con daltonismo rojo-verde quedaba a ΔE 6 del --yellow, o sea que se leía como el amarillo de la marca. El menta se separa (ΔE ~50) sin dejar de ser verde. Aun así el color nunca va solo: el tag dice la región en texto, y es el único relleno de su fila. */ --region-norte:#E23DFF; --region-sur:#2FFFB0; /* LAS VARIANTES DEL AMARILLO. Las tres estaban ya escritas a mano repartidas por el sitio —#FFD558 en seis hovers, #C99000 y #8A6200 en la rampa del media kit—, así que esto no inventa color: le pone nombre al que había. */ --yellow-alto:#FFD558; /* el hover: un punto más encendido */ --yellow-bajo:#C99000; /* apagado, pero todavía amarillo */ --yellow-hondo:#8A6200; /* el fondo de la rampa, y el amarillo del papel */ /* La tinta sobre amarillo. Más oscura que --ink a propósito: sobre un fondo tan luminoso, el casi-negro puro es lo único que no vibra. */ --sobre-amarillo:#1A1207; /* LA ESCALA DE GRISES — lo que avisa y no se pulsa. Neutros de verdad, no marrones desaturados: si llevaran tinte cálido se leerían como una variante más de la marca, que es justo lo contrario de lo que tienen que decir. Cuatro pasos y ni uno más. */ --gris-1:#3A3633; /* superficie de un aviso */ --gris-2:#6E6864; /* su filete */ --gris-3:#9A938D; /* su texto y su icono. El error vive aquí */ --gris-4:#C6C1BC; /* claro, para banda con tinta oscura (la beta) */ /* LA RAMPA ORDINAL — sube en PESO, no cambia de matiz, que es lo que la hace legible para quien no distingue colores. Vivía suelta en el media kit (--ord-1..4); subió aquí el día que /esports/ la necesitó para los tres niveles del calendario, que antes se separaban por matiz y uno era rojo. */ --ord-1:#FFE09A; --ord-2:#FFC621; --ord-3:#C99000; --ord-4:#8A6200; --bevel: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); --bevel-sm: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); /* EL DE LAS ETIQUETAS (26 sep 2026). El corte va en proporción a la altura: 9px sobre un botón de ~40px es casi un cuarto, pero sobre una etiqueta de ~21px es casi la mitad y la pieza se leía como un rombo. 5px devuelve la proporción del botón. Solo para lo que mide --tipo-etiqueta. */ --bevel-xs: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); /* Y ESO ES UNA REGLA PARA TODO BISEL (27 sep 2026): el chaflán va en proporción al alto de la caja. `clip-path` no sabe leer ese alto —en un `polygon()` el % de la x es del ancho y el de la y del alto, y un chaflán a 45° necesita la misma medida en los dos—, así que va por escalones: ≤ 30px etiqueta, píldora, chip, tooltip → --bevel-xs · 5px 31–60px botón, control, chip de red → --bevel-sm · 9px > 60px tarjeta, panel, aviso, caja → --bevel · 14px Cada uno con su aro (--filo-*) y su foco (--filo-foco-*) del mismo tamaño: un aro de otro escalón no casa con el recorte. */ /* EL FILO DEL BISEL — el contorno que `clip-path` no sabe dibujar. ──────────────────────────────────────────────────────────────────── Un clip recorta TODO lo que pinta el elemento, el borde incluido. Y el borde —sea `border:1px solid` o `box-shadow:inset 0 0 0 1px`— se dibuja sobre el RECTÁNGULO, así que las dos esquinas cortadas se llevan su trozo por delante y el contorno se queda con dos huecos, justo en los chaflanes. Se veía en la píldora del premio, en el Discord de la barra, en la hamburguesa y en otras veinte cajas. Esto lo arregla dibujando el contorno como lo que es: UN ARO con la forma del bisel. La `polygon()` lleva los dos contornos —el de fuera y el de dentro— y `evenodd` deja hueco lo de en medio. LA GEOMETRÍA DE DENTRO NO ES «LO MISMO MENOS 1px». Correr la diagonal 1px hacia dentro la mueve 1/√2 en cada eje, así que sus extremos caen en 9.414 y no en 10: el chaflán interior mide 8.414 y no 8. Si se escriben los 10 a ojo, el aro sale de grosor variable y se nota en el chaflán. Y LOS DOS CONTORNOS VAN EN UNA SOLA LISTA, CON UNA COSTURA QUE SE ANULA. Esto es lo que más fácil se rompe al retocarlo, así que conviene leerlo antes de tocar un punto: `polygon()` NO admite dos contornos: es UN camino cerrado y nada más. Los catorce puntos de abajo son el de fuera, luego una costura hasta el de dentro, el de dentro AL REVÉS, y la vuelta por la misma costura (el cierre automático del último punto al primero). Que la ida y la vuelta de esa costura sean EXACTAMENTE la misma línea es lo único que hace que funcione: así encierra área cero y `evenodd` la ignora. Por eso `0 0` y `1px 1px` aparecen dos veces, y por eso el contorno de dentro se recorre en sentido contrario al de fuera. La primera versión no lo hacía —saltaba de `0 calc(100% - 9px)` a `1px 1px` y volvía por otro sitio—, y esas dos costuras distintas encerraban una cuña que corría justo por el canto izquierdo: `evenodd` le daba la vuelta a la paridad y EL FILO IZQUIERDO SALÍA CASI BORRADO mientras el derecho salía entero. Medido a 8×: 2.3 de cobertura a la izquierda contra 8.0 a la derecha, donde 8.0 es 1px justo. Con la costura anulada los cuatro cantos miden 8.0. Y HAY RESERVA PARA QUIEN NO LO ENTIENDA, que es de lo que va `--filo-borde`. El `border`/`box-shadow` de antes NO se ha borrado: se queda declarado como `var(--filo-borde, var(--filo-color))`, o sea del color del filo. El `@supports` que enciende el aro pone `--filo-borde:transparent` en el `:root` una sola vez, y con eso apaga todas las reservas del documento de golpe — sin tener que repetir un `border-color:transparent` regla por regla, y sin que un `:hover` que toque el color lo vuelva a encender por especificidad. Así el navegador que entienda el `fill-rule` ve el aro limpio, y el que no lo entienda ve EXACTAMENTE lo de hoy: el contorno con sus dos huecos. Lo que no ve nadie es una caja sin contorno. ⚠ PARA UNA CAJA OPACA GRANDE NO SE USA ESTO: se usa `.caja` (componentes.css), la capa doble, que no pierde raya en medio píxel ni depende de `evenodd` (medido el 28 sep 2026). El aro es para lo pequeño o translúcido: botones, píldoras, chips. CÓMO SE USA — en un `::after`, nunca en el elemento: .algo{position:relative; --filo-color:var(--line); box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color))} @supports (clip-path:polygon(evenodd,0 0,1px 1px,0 1px)){ :root{--filo-borde:transparent} · una vez por documento .algo::after{content:''; position:absolute; inset:0; pointer-events:none; clip-path:var(--filo-sm); background:var(--filo-color)} } · Si el elemento tiene `border:1px` de verdad (que aporta caja), el borde se deja pero en `transparent` y el pseudo va a `inset:-1px`, que es lo que alcanza la caja de borde: `inset:0` se queda en la de relleno y el aro saldría 1px por dentro, en doble raya. · Si el filo era un `box-shadow:inset`, se queda como reserva, pero leyendo `--filo-borde`: apagado, no pinta nada y no se suma al aro — que con un filo translúcido importa, porque dos capas del mismo color al 30 % sumarían en los tramos rectos y no en las diagonales. · El color se cambia en un solo sitio, `--filo-color`, y por eso los estados (`:hover`, `.destacada`) tocan esa variable y no el borde: así cambian el aro y su reserva a la vez, con una línea. ⚠ SIEMPRE DENTRO DE SU `@supports`. Si un navegador no acepta el `fill-rule` dentro de `polygon()`, la declaración entera es inválida, `clip-path` vuelve a su valor inicial (`none`) y el pseudo se pintaría como UN RECTÁNGULO MACIZO tapando el elemento. Sin la guarda el fallo no es un hueco, es una mancha. La condición que hay que escribir es: @supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)) { … } */ --filo: polygon(evenodd, 0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 0, 1px 1px, 1px calc(100% - 14.414px), 14.414px calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 14.414px, calc(100% - 14.414px) 1px, 1px 1px); --filo-sm: polygon(evenodd, 0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px), 0 0, 1px 1px, 1px calc(100% - 9.414px), 9.414px calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 9.414px, calc(100% - 9.414px) 1px, 1px 1px); --filo-xs: polygon(evenodd, 0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px), 0 0, 1px 1px, 1px calc(100% - 5.414px), 5.414px calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 5.414px, calc(100% - 5.414px) 1px, 1px 1px); /* Y LOS MISMOS A 2px, PARA EL FOCO. El `:focus-visible` del sitio es un `outline` con `outline-offset:3px`, o sea que en cualquier cosa biselada cae ENTERO fuera del recorte: hoy ningún botón con bisel enseña dónde está el teclado. El anillo tiene que ir por dentro, y es el mismo aro con otro color y otro grosor. Es la salida que el panel ya tomó — ver la cabecera de panel/assets/panel.css. */ --filo-foco: polygon(evenodd, 0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 0, 2px 2px, 2px calc(100% - 14.828px), 14.828px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 14.828px, calc(100% - 14.828px) 2px, 2px 2px); --filo-foco-sm: polygon(evenodd, 0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px), 0 0, 2px 2px, 2px calc(100% - 9.828px), 9.828px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 9.828px, calc(100% - 9.828px) 2px, 2px 2px); --filo-foco-xs: polygon(evenodd, 0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px), 0 0, 2px 2px, 2px calc(100% - 5.828px), 5.828px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 5.828px, calc(100% - 5.828px) 2px, 2px 2px); /* En rem, no en px, y esto importa más de lo que parece: toda la tipografía del sitio va en rem, así que si alguien tiene la fuente base del navegador por encima de 16px el texto crecía mientras el ancho de columna se quedaba clavado. Resultado: las tarjetas se estiraban a lo alto, la miniatura seguía igual de baja y las fechas se partían en dos renglones. Con la maqueta en la misma unidad que el texto, todo escala junto y la proporción se mantiene. 73.75rem × 16 = los 1180px de siempre. */ --wrap: 73.75rem; /* UNA SOLA ALTURA DE BARRA PARA TODO EL SITIO. Antes la portada iba a 68 y el media kit a 64, y cada página redeclaraba la suya. Cuatro píxeles no los identifica nadie a simple vista, pero al pasar de una página a otra se percibe que la barra "encoge", que es peor que si la diferencia fuera grande: se nota y no se sabe por qué. Si alguna página necesitara otra medida, que la sobrescriba con un motivo escrito al lado — no por haberse quedado así. */ --nav-h: 68px; /* ════════════════════════════════════════════════════════════════════ EL SISTEMA DE DISEÑO — 26 sep 2026 ════════════════════════════════════════════════════════════════════ Tipografía, texto, espaciado y movimiento, sacados del home y aprobados sobre un muestrario con las fuentes de verdad. Los usa toda la web pública desde el mismo día; el panel, todavía no. Las reglas de uso, el porqué y la lista de lo que falta migrar están en la skill `.claude/skills/diseno-trufas/`, que es donde hay que mirar antes de tocar nada visual. `--tipo-*` Y NO `--t-*`: el panel ya usa `--t-rapido/medio/lento` para DURACIONES y lee este archivo. Un `--t-titulo` al lado de un `--t-medio` que es un tiempo es la confusión que se evita con cuatro letras más. */ /* LAS DOS VOCES DE LA DISPLAY. M para lo grande (hero, título, cifra); E, más ancha, para lo pequeño (subtítulo, dato, numeral): ahí la M no se lee. Subtítulo y dato van en E Bold 700; el numeral en E ExBold 800. */ --fuente-display: 'Dharma Gothic M', 'Oswald', Impact, sans-serif; --fuente-display-e: 'Dharma Gothic E', 'Dharma Gothic M', 'Oswald', Impact, sans-serif; /* TIPOGRAFÍA · DISPLAY (mayúsculas, interlínea .9) */ --tipo-hero: clamp(4.7rem, 8.5vw, 6.4rem); /* 75 → 102 · h1 */ --tipo-titulo: clamp(3.1rem, 5.5vw, 4.75rem); /* 50 → 76 · h2 de sección */ --tipo-cifra: clamp(4.1rem, 9vw, 5.6rem); /* 66 → 90 · cifras de impacto */ --tipo-subtitulo: clamp(2.125rem, 1.45rem + 1.6vw, 2.625rem);/* 34 → 42 · tarjeta, evento, creador · en E */ --tipo-numeral: 2.75rem; /* 44 · números de paso · en E */ --tipo-dato: 2rem; /* 32 · cifra pequeña, chip de logo · en E */ /* TIPOGRAFÍA · TEXTO (Poppins). Por debajo de 10px no se escribe nada. */ --tipo-entradilla: 1.0625rem; /* 17 · bajada del hero; h3 de caja en 600 */ --tipo-cuerpo: .9375rem; /* 15 · párrafos de lectura */ --tipo-descripcion: .875rem; /* 14 · bajada de sección, texto de tarjeta, pie */ --tipo-control: .8rem; /* 13 · botones y enlaces de la barra */ --tipo-leyenda: .75rem; /* 12 · fuentes, notas, copyright */ --tipo-antetitulo: .875rem; /* 14 · «01 / …» y el antetítulo del hero, en todas las páginas */ --tipo-rotulo: .6875rem; /* 11 · rótulo de panel, del pie, del selector de idioma: no es antetítulo */ --tipo-etiqueta: .625rem; /* 10 · tags, píldoras, metadatos. UN tamaño, tres niveles: relleno / contorno amarillo / contorno gris. La jerarquía no va en el tamaño. */ /* TEXTO · TRES NIVELES. Había cinco tonos que medían como tres (crema al 86 % y la mezcla de la bajada, 11,6 y 11,9:1; crema al 62 % y --muted, 6,8 y 6,8:1). En pantalla lo más claro es el crema: los titulares también. Contrastes sobre --ink. */ --texto-1: var(--cream); /* 15,5:1 · títulos y texto principal */ --texto-2: color-mix(in srgb, var(--cream) 65%, var(--muted)); /* 11,9:1 · bajadas y apoyo */ --texto-3: var(--muted); /* 6,8:1 · metadatos, leyendas, pies */ /* ESPACIADO. Los dos que cambian con la pantalla se redefinen abajo. */ --esp-seccion: 6rem; /* 96 · entre secciones (64 en ≤900) */ --esp-cabecera: 2.75rem; /* 44 · cabecera de sección → contenido */ --esp-bloque: 3rem; /* 48 · entre bloques de una sección, antes del cierre */ --esp-rejilla: 1.25rem; /* 20 · hueco entre tarjetas */ --esp-caja: 2.5rem; /* 40 · relleno de una caja biselada (24 en ≤520) */ /* MOVIMIENTO AL HACER SCROLL. Desvanecido (el del home, conducido por el scroll) + colocación: el bloque salta a su sitio con un rebote leve. En inglés: scroll reveal, fade-up, ease-out-back, stagger. */ --mov-tramo: 160px; /* scroll que dura el desvanecido */ --mov-desde: 1.25rem; /* 20 · de dónde sube al colocarse */ --mov-colocar: .6s; /* duración del salto */ --mov-escalon: 80ms; /* retraso entre hermanos de una rejilla */ --mov-rebote: cubic-bezier(.34, 1.56, .64, 1); /* se pasa ~2px y vuelve */ } @media (max-width:900px){ :root{ --esp-seccion:4rem } } @media (max-width:520px){ :root{ --esp-caja:1.5rem } }