/* ==========================================================================
Inolvidia · tokens de marca v2 («La I que sale del sobre») · /brand/tokens.css
COPIA PUBLICADA de marca/tokens.css (la fuente de verdad; la publica tools/kit-web-v2.py). Diferencia con la fuente:
sin el @import de Google Fonts: cada página carga Jost con (más rápido que @import):
Interfaces propias (landing, /crear, /frases, /pago, legales, 404, /marca, panel, admin, editor, álbum, puerta,
cinta de pago y crédito). NO los temas de invitación, que llevan las fuentes y colores de su evento.
Paleta: NOCHE + ORO ROSA, con VIOLETA como puente. Color SÓLIDO como principal.
marca/tokens.css es copia de marca/logo/tokens-v2.css (kit v2). El v1 quedó en marca/archivo/tokens-v1.css.
REEMPLAZO DIRECTO de public/brand/tokens.css (v1, terracota y ciruela):
- Define TODAS las variables del v1 con los mismos nombres (--t-*, --e-*, --radio-*, --sombra-*, --dur-*,
--ease-*, --color-*, --color-evento*, --interletrado-*, --interlineado-*, --peso-*, --hilo-*, --font-*,
--anillo-foco) y además los nombres de la paleta v1 (--ino-terracota*, --ino-ciruela*, --ino-champan…)
como ALIAS de la paleta v2, para que las páginas que los usan directo no se rompan. Los alias están en
desuso: en código nuevo van --ino-noche, --ino-oro-rosa* y --ino-violeta / --ino-lavanda.
- Modo oscuro: automático (prefers-color-scheme) o forzado con data-theme="dark" o "noche" en ;
una página solo clara se fija con data-theme="light" o "claro". Los dos juegos de nombres valen igual.
- Fuentes: --font-display y --font-texto pasan a Jost (Google Fonts, OFL). Cada página debe cargarla con
(el v1 cargaba Fraunces y Zen Maru Gothic). --font-bodas: Libre Caslon Display, solo línea bodas.
- Aprobado por el dueño el 19-oct-2026 (marca/_trabajo/visto-bueno-v2.txt): reemplaza al v1 en web, redes e impresos.
Contrastes WCAG 2.x medidos con la luminancia relativa sRGB (marca/v2/_trabajo/rev/contraste.py).
Texto normal: AA >= 4,5:1 · texto grande (>= 24 px, o >= 18,66 px en negrita) y objetos gráficos: >= 3:1.
--------------------------------------------------------------------------
TEXTO (color · fondo · contraste · nivel)
* --ino-noche #1B1630 marfil 16,25:1 AA · arena 14,69:1 AA · blanco 17,44:1 AA
* --ino-texto-suave #5C5370 marfil 6,69:1 AA · arena 6,04:1 AA · blanco 7,18:1 AA
* --ino-violeta #5B3E8A marfil 7,82:1 AA · arena 7,07:1 AA · blanco 8,40:1 AA
* --ino-oro-rosa-profundo #94524C marfil 5,48:1 AA · arena 4,95:1 AA · blanco 5,88:1 AA
* --ino-oro-rosa #B06E66 marfil 3,71:1 AA grande / objeto · arena 3,36:1 AA grande / objeto · blanco 3,99:1 AA grande / objeto
* --color-exito #3F6E45 marfil 5,55:1 AA · arena 5,01:1 AA · blanco 5,95:1 AA
* --color-error #A3392E marfil 6,15:1 AA · arena 5,56:1 AA · blanco 6,60:1 AA
* --ino-marfil #FBF6F2 noche 16,25:1 AA · noche-2 13,80:1 AA
* --ino-oro-rosa-luz #E3B2A4 noche 9,28:1 AA · noche-2 7,88:1 AA
* --ino-oro-rosa-luz-hover #EDC6BA noche 11,12:1 AA · noche-2 9,44:1 AA
* --ino-lavanda #A88FD0 noche 6,23:1 AA · noche-2 5,29:1 AA
* --ino-niebla #B9AFC6 noche 8,31:1 AA · noche-2 7,06:1 AA
* --color-exito (oscuro) #93C9A0 noche 9,22:1 AA · noche-2 7,83:1 AA
* --color-error (oscuro) #F4A497 noche 8,81:1 AA · noche-2 7,48:1 AA
*
* OJO: --ino-oro-rosa (#B06E66) sobre marfil da 3,71:1 -> NO sirve para texto chico ni botones.
* Es el color del HILO del logo y de íconos y bordes (objeto gráfico >= 3:1). Para texto de acento sobre claro
* va --ino-oro-rosa-profundo (5,48:1) o --ino-violeta (7,82:1).
* El oro rosa luz y la lavanda NUNCA van como texto sobre claro (1,75:1 y 2,61:1).
* Sobre noche NO van ni el oro rosa profundo (2,97:1) ni el violeta (2,08:1), tampoco
* como botón: por eso en modo oscuro los botones de acento y secundario pasan a oro rosa luz y lavanda.
*
* BOTONES (texto · fondo · contraste · el botón contra el fondo de la página, mínimo 3:1 como objeto)
* Principal · claro marfil sobre noche texto 16,25:1 AA · botón/fondo de página 16,25:1 AA · hover 13,80:1
* Acento · claro marfil sobre oro rosa profundo texto 5,48:1 AA · botón/fondo de página 5,48:1 AA · hover 7,02:1
* Secundario · claro marfil sobre violeta texto 7,82:1 AA · botón/fondo de página 7,82:1 AA · hover 9,83:1
* Principal · oscuro noche sobre oro rosa luz texto 9,28:1 AA · botón/fondo de página 9,28:1 AA · hover 11,12:1
* Acento · oscuro noche sobre oro rosa luz texto 9,28:1 AA · botón/fondo de página 9,28:1 AA · hover 11,12:1
* Secundario · oscuro noche sobre lavanda texto 6,23:1 AA · botón/fondo de página 6,23:1 AA · hover 7,98:1
* En modo oscuro el principal y el acento coinciden (oro rosa luz). Si una pantalla necesita los dos, el
* segundo va como botón de contorno: borde 2 px --color-hilo, texto --color-acento-texto.
* Foco: anillo de 2 px --ino-violeta sobre claro (7,82:1) y --ino-oro-rosa-luz sobre noche (9,28:1).
========================================================================== */
:root {
/* ---------- Paleta de marca v2 ---------- */
--ino-noche: #1B1630; /* la I y el nombre del logo sobre claro · fondo de marca · texto */
--ino-noche-2: #2A2342; /* superficies sobre noche (tarjetas, modales) */
--ino-marfil: #FBF6F2; /* papel · fondo claro principal · la I y el nombre sobre noche */
--ino-arena: #F3EAE3; /* superficie clara alterna */
--ino-blanco: #FFFFFF;
--ino-oro-rosa: #B06E66; /* EL HILO sobre claro · íconos y bordes · solo objeto gráfico (3,71:1 marfil) */
--ino-oro-rosa-profundo: #94524C; /* texto y botones de acento sobre claro (5,48:1) · paños con logo marfil */
--ino-oro-rosa-profundo-hover: #7E443F;
--ino-oro-rosa-luz: #E3B2A4; /* EL HILO sobre noche · texto y botones sobre noche (9,28:1) */
--ino-oro-rosa-luz-hover: #EDC6BA;
--ino-violeta: #5B3E8A; /* subtítulo del logo, enlaces, botón secundario y foco sobre claro (7,82:1) */
--ino-violeta-hover: #4A3272;
--ino-lavanda: #A88FD0; /* subtítulo del logo y acentos sobre noche (6,23:1) · botón secundario oscuro */
--ino-lavanda-hover: #BBA6DD;
--ino-niebla: #B9AFC6; /* texto secundario sobre noche (8,31:1) */
--ino-texto-suave: #5C5370; /* texto secundario sobre claro (6,69:1) */
--ino-linea: #E4D9D1; /* divisores sobre claro (decorativo) */
--ino-linea-noche: #3B3358; /* divisores sobre noche (decorativo) */
--ino-salvia: #8FA98B; /* acento de evento (bodas de día, bautizos, comuniones) · encima solo noche (6,82:1) */
/* solo usos grandes (>= 120 px): nunca en texto chico, íconos ni favicon */
--ino-metal: linear-gradient(115deg, #8F5650 0%, #C98E82 18%, #F4D5C8 36%, #B9776C 55%, #EBC0B2 76%, #9C5F58 100%); /* oro rosa metálico, siempre sobre noche */
--ino-degradado: linear-gradient(60deg, #C98C80 0%, #8B5E92 45%, #2E2350 100%); /* isotipo grande sobre claro */
/* ---------- Alias de la paleta v1 (EN DESUSO: compatibilidad con páginas que la usan directo) ---------- */
--ino-terracota: var(--ino-oro-rosa); /* era el hilo -> el hilo */
--ino-terracota-profunda: var(--ino-oro-rosa-profundo); /* botón y texto de acento sobre claro: 5,48:1 marfil · 4,95:1 arena · 5,88:1 blanco */
--ino-terracota-honda: var(--ino-oro-rosa-profundo-hover); /* texto de acento sobre arena y hover: 6,35:1 arena */
--ino-terracota-luz: var(--ino-oro-rosa-luz); /* el hilo y el acento sobre oscuro: 9,28:1 noche */
--ino-terracota-luz-2: var(--ino-oro-rosa-luz-hover); /* acento sobre superficies oscuras y hover: 9,44:1 noche-2 */
--ino-ciruela: var(--ino-noche);
--ino-ciruela-noche: var(--ino-noche);
--ino-ciruela-2: var(--ino-noche-2);
--ino-ciruela-suave: var(--ino-texto-suave);
--ino-lino: var(--ino-linea);
--ino-malva: var(--ino-niebla);
--ino-champan: var(--ino-oro-rosa-luz); /* la línea bodas pasa de champán a oro rosa (sobre noche) */
--ino-champan-metal: var(--ino-metal);
/* --ino-marfil, --ino-arena, --ino-lavanda y --ino-salvia conservan el nombre (valores v2 arriba) */
/* ---------- Roles (modo claro por defecto) ---------- */
--ino-fondo: var(--ino-marfil);
--ino-superficie: var(--ino-blanco);
--ino-texto: var(--ino-noche);
--ino-texto-acento: var(--ino-oro-rosa-profundo);
--ino-enlace: var(--ino-violeta);
--ino-foco: var(--ino-violeta);
--color-fondo: var(--ino-marfil);
--color-fondo-calido: var(--ino-arena);
--color-superficie: var(--ino-blanco);
--color-texto: var(--ino-noche); /* 16,25:1 */
--color-texto-suave: var(--ino-texto-suave); /* 6,69:1 marfil · 6,04:1 arena */
--color-borde: var(--ino-linea);
--color-hilo: var(--ino-oro-rosa); /* líneas, subrayados, íconos de acento (objeto 3,71:1) */
--color-acento-texto: var(--ino-oro-rosa-profundo); /* 5,48:1 marfil */
--color-acento-texto-calido: var(--ino-oro-rosa-profundo-hover); /* 6,35:1 arena */
--color-acento-texto-superficie: var(--ino-oro-rosa-profundo); /* 5,88:1 blanco */
--color-enlace: var(--ino-violeta); /* 7,82:1 */
--color-boton: var(--ino-noche);
--color-boton-hover: var(--ino-noche-2);
--color-boton-texto: var(--ino-marfil); /* 16,25:1 */
--color-boton-acento: var(--ino-oro-rosa-profundo);
--color-boton-acento-hover: var(--ino-oro-rosa-profundo-hover);
--color-boton-acento-texto: var(--ino-marfil); /* 5,48:1 */
--color-boton-secundario: var(--ino-violeta);
--color-boton-secundario-hover: var(--ino-violeta-hover);
--color-boton-secundario-texto: var(--ino-marfil); /* 7,82:1 */
--color-foco: var(--ino-violeta);
--color-exito: #3F6E45; /* 5,55:1 marfil · 5,01:1 arena · 5,95:1 blanco */
--color-error: #A3392E; /* 6,15:1 marfil · 5,56:1 arena · 6,60:1 blanco */
/* ---------- Tipografía ---------- */
--ino-fuente: "Jost", "Segoe UI", system-ui, sans-serif;
--ino-fuente-bodas: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
--font-display: var(--ino-fuente); /* titulares: Jost 300; en MAYÚSCULAS con --interletrado-versalita (eco del logo) */
--font-texto: var(--ino-fuente);
--font-bodas: var(--ino-fuente-bodas); /* solo línea bodas: nombres, portadas, impresos con foil */
--fraunces-ajustes: normal; /* v1: ajustes de Fraunces. En v2 no aplica (se deja «normal» para no romper) */
--peso-titular: 300; /* Jost Light: el trazo fino del logotipo */
--peso-texto: 400; /* Jost Regular */
--peso-fuerte: 560; /* Jost entre Medium y SemiBold: botones y énfasis */
/* Escala (razón 1,25, fluida entre 360 y 1280 px de ancho): igual que el v1 */
--t-xs: 0.8125rem; /* 13 px · pies, notas */
--t-sm: 0.9375rem; /* 15 px · etiquetas */
--t-base: 1.0625rem; /* 17 px · texto */
--t-lg: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);/* 19–22 px · entradilla */
--t-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); /* 24–32 px · h3 */
--t-2xl: clamp(2rem, 1.6rem + 1.8vw, 3rem); /* 32–48 px · h2 */
--t-3xl: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem); /* 40–72 px · h1 / nombres */
--interlineado-titular: 1.1;
--interlineado-texto: 1.6;
--interletrado-titular: 0.01em;
--interletrado-versalita: 0.2em; /* MAYÚSCULAS finas espaciadas: etiquetas y titulares cortos */
--ino-interletrado-versalitas: 0.24em; /* el del subtítulo del logo: solo piezas de marca */
/* ---------- Espacios (base 4): igual que el v1 ---------- */
--e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
--e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
/* ---------- Radios: igual que el v1 ---------- */
--radio-xs: 6px; /* chips, campos chicos */
--radio-sm: 10px; /* campos de formulario */
--radio-md: 16px; /* tarjetas */
--radio-lg: 24px; /* paneles, hojas */
--radio-xl: 32px; /* tarjetas de invitación */
--radio-pildora: 999px; /* botones */
--radio-icono: 22%; /* baldosa del ícono de app (favicon.svg: rx 14 de 64) */
--ino-radio: 14px; /* v2: tarjetas de marca */
--ino-radio-boton: 999px;
/* ---------- Sombras (teñidas de noche; nunca negro puro) ---------- */
--sombra-1: 0 1px 2px rgba(27, 22, 48, .06), 0 1px 1px rgba(27, 22, 48, .04);
--sombra-2: 0 4px 12px -2px rgba(27, 22, 48, .10), 0 2px 4px rgba(27, 22, 48, .05);
--sombra-3: 0 14px 32px -8px rgba(27, 22, 48, .18), 0 4px 10px -2px rgba(27, 22, 48, .07);
--sombra-4: 0 30px 60px -18px rgba(27, 22, 48, .30), 0 10px 22px -8px rgba(27, 22, 48, .12);
--sombra-papel: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 40px -20px rgba(60, 40, 52, .32);
--sombra-boton: 0 6px 16px -6px rgba(27, 22, 48, .45);
--sombra-lacre: 0 3px 4px rgba(70, 30, 28, .28), 0 10px 18px -6px rgba(70, 30, 28, .35);
--anillo-foco: 0 0 0 3px var(--color-fondo), 0 0 0 5px var(--color-foco);
/* ---------- El hilo como recurso gráfico ---------- */
/* Mismo grosor que el hilo del isotipo con el que convive: 2,3 % del alto del isotipo fino (4 u de 174).
Sin logo cerca: 2 / 3 / 4 px. */
--hilo-fino: 2px;
--hilo-medio: 3px;
--hilo-grueso: 4px;
--hilo-proporcion: 0.023; /* stroke-width = alto del isotipo × 0,023 */
--hilo-remate: butt; /* ronda 3: stroke-linecap del hilo de marca = corte recto, como el logo y el nombre */
--hilo-union: round; /* stroke-linejoin del hilo: doblado, nunca en punta */
--icono-remate: round; /* íconos de interfaz (48 u): remates y uniones redondas */
--ino-hilo: 2px;
/* ---------- Movimiento ---------- */
--ease-hilo: cubic-bezier(.65, 0, .25, 1); /* el hilo que se dibuja */
--ease-salida: cubic-bezier(.2, .8, .2, 1); /* entradas suaves */
--ease-resorte: cubic-bezier(.3, 1.4, .5, 1);/* botones, lacre (sin exagerar) */
--dur-rapida: 160ms;
--dur-media: 320ms;
--dur-lenta: 700ms;
--dur-logo: 1800ms; /* hilo-trazo.svg (LEEME §9) */
color-scheme: light;
}
/* ---------- Modo oscuro: automático (sistema) o forzado con data-theme="dark" / "noche" ---------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="claro"]) {
--ino-fondo: var(--ino-noche);
--ino-superficie: var(--ino-noche-2);
--ino-texto: var(--ino-marfil);
--ino-texto-acento: var(--ino-oro-rosa-luz);
--ino-enlace: var(--ino-oro-rosa-luz);
--ino-foco: var(--ino-oro-rosa-luz);
--color-fondo: var(--ino-noche);
--color-fondo-calido: var(--ino-noche-2);
--color-superficie: var(--ino-noche-2);
--color-texto: var(--ino-marfil); /* 16,25:1 noche · 13,80:1 noche-2 */
--color-texto-suave: var(--ino-niebla); /* 8,31:1 · 7,06:1 */
--color-borde: var(--ino-linea-noche);
--color-hilo: var(--ino-oro-rosa-luz);
--color-acento-texto: var(--ino-oro-rosa-luz); /* 9,28:1 */
--color-acento-texto-calido: var(--ino-oro-rosa-luz); /* sobre noche-2 7,88:1 */
--color-acento-texto-superficie: var(--ino-oro-rosa-luz-hover); /* sobre noche-2 9,44:1 */
--color-enlace: var(--ino-oro-rosa-luz);
--color-boton: var(--ino-oro-rosa-luz);
--color-boton-hover: var(--ino-oro-rosa-luz-hover);
--color-boton-texto: var(--ino-noche); /* 9,28:1 */
--color-boton-acento: var(--ino-oro-rosa-luz); /* el oro rosa profundo sobre noche da 2,97:1: no llega a 3:1 */
--color-boton-acento-hover: var(--ino-oro-rosa-luz-hover);
--color-boton-acento-texto: var(--ino-noche); /* 9,28:1 */
--color-boton-secundario: var(--ino-lavanda); /* el violeta sobre noche da 2,08:1: no llega a 3:1 */
--color-boton-secundario-hover: var(--ino-lavanda-hover);
--color-boton-secundario-texto: var(--ino-noche); /* 6,23:1 */
--color-foco: var(--ino-oro-rosa-luz);
--color-exito: #93C9A0; /* 9,22:1 noche · 7,83:1 noche-2 */
--color-error: #F4A497; /* 8,81:1 noche · 7,48:1 noche-2 */
--sombra-1: 0 1px 2px rgba(0, 0, 0, .25);
--sombra-2: 0 4px 12px -2px rgba(0, 0, 0, .35);
--sombra-3: 0 14px 32px -8px rgba(0, 0, 0, .45);
--sombra-4: 0 30px 60px -18px rgba(0, 0, 0, .55);
--sombra-boton: 0 6px 16px -6px rgba(0, 0, 0, .5);
color-scheme: dark;
}
}
:root[data-theme="dark"],
:root[data-theme="noche"] {
--ino-fondo: var(--ino-noche);
--ino-superficie: var(--ino-noche-2);
--ino-texto: var(--ino-marfil);
--ino-texto-acento: var(--ino-oro-rosa-luz);
--ino-enlace: var(--ino-oro-rosa-luz);
--ino-foco: var(--ino-oro-rosa-luz);
--color-fondo: var(--ino-noche);
--color-fondo-calido: var(--ino-noche-2);
--color-superficie: var(--ino-noche-2);
--color-texto: var(--ino-marfil); /* 16,25:1 noche · 13,80:1 noche-2 */
--color-texto-suave: var(--ino-niebla); /* 8,31:1 · 7,06:1 */
--color-borde: var(--ino-linea-noche);
--color-hilo: var(--ino-oro-rosa-luz);
--color-acento-texto: var(--ino-oro-rosa-luz); /* 9,28:1 */
--color-acento-texto-calido: var(--ino-oro-rosa-luz); /* sobre noche-2 7,88:1 */
--color-acento-texto-superficie: var(--ino-oro-rosa-luz-hover); /* sobre noche-2 9,44:1 */
--color-enlace: var(--ino-oro-rosa-luz);
--color-boton: var(--ino-oro-rosa-luz);
--color-boton-hover: var(--ino-oro-rosa-luz-hover);
--color-boton-texto: var(--ino-noche); /* 9,28:1 */
--color-boton-acento: var(--ino-oro-rosa-luz); /* el oro rosa profundo sobre noche da 2,97:1: no llega a 3:1 */
--color-boton-acento-hover: var(--ino-oro-rosa-luz-hover);
--color-boton-acento-texto: var(--ino-noche); /* 9,28:1 */
--color-boton-secundario: var(--ino-lavanda); /* el violeta sobre noche da 2,08:1: no llega a 3:1 */
--color-boton-secundario-hover: var(--ino-lavanda-hover);
--color-boton-secundario-texto: var(--ino-noche); /* 6,23:1 */
--color-foco: var(--ino-oro-rosa-luz);
--color-exito: #93C9A0; /* 9,22:1 noche · 7,83:1 noche-2 */
--color-error: #F4A497; /* 8,81:1 noche · 7,48:1 noche-2 */
--sombra-1: 0 1px 2px rgba(0, 0, 0, .25);
--sombra-2: 0 4px 12px -2px rgba(0, 0, 0, .35);
--sombra-3: 0 14px 32px -8px rgba(0, 0, 0, .45);
--sombra-4: 0 30px 60px -18px rgba(0, 0, 0, .55);
--sombra-boton: 0 6px 16px -6px rgba(0, 0, 0, .5);
color-scheme: dark;
}
/* Forzar claro (data-theme="light" / "claro"): usa los valores de :root; solo se fija el esquema. */
:root[data-theme="light"], :root[data-theme="claro"] { color-scheme: light; }
/* ---------- Acentos por tipo de evento (opcionales, en la invitación) ---------- */
[data-evento="boda"] { --color-evento: var(--ino-oro-rosa-luz); --color-evento-fondo: var(--ino-noche); }
[data-evento="boda-dia"] { --color-evento: var(--ino-salvia); --color-evento-fondo: var(--ino-marfil); }
[data-evento="xv"],
[data-evento="18"],
[data-evento="baby-shower"],
[data-evento="infantil"] { --color-evento: var(--ino-lavanda); --color-evento-fondo: var(--ino-marfil); }
[data-evento="bautizo"],
[data-evento="comunion"] { --color-evento: var(--ino-salvia); --color-evento-fondo: var(--ino-marfil); }
[data-evento="cumpleanos"] { --color-evento: var(--ino-oro-rosa); --color-evento-fondo: var(--ino-arena); }
[data-evento="empresa"] { --color-evento: var(--ino-noche); --color-evento-fondo: var(--ino-marfil); }
[data-evento="pareja"],
[data-evento="mesiversario"],
[data-evento="aniversario"] { --color-evento: var(--ino-oro-rosa-luz); --color-evento-fondo: var(--ino-noche); }
/* --color-evento es para fondos, bandas e íconos, no para texto chico. Sobre salvia, lavanda u oro rosa luz el texto
y el logo van en noche (logo a una tinta noche): 6,82:1, 6,23:1 y 9,28:1.
Sobre oro rosa (#B06E66) va el logo a una tinta NOCHE (4,38:1); el marfil ahí da 3,71:1 (LEEME §7). */
/* ---------- Superficies con su acento de texto ya resuelto ---------- */
.ino-fondo-calido { background: var(--color-fondo-calido); --color-acento-texto: var(--color-acento-texto-calido); }
.ino-superficie { background: var(--color-superficie); --color-acento-texto: var(--color-acento-texto-superficie); }
/* ---------- Ejemplos mínimos de uso ---------- */
.ino-titular {
font-family: var(--font-display);
font-weight: var(--peso-titular);
line-height: var(--interlineado-titular);
letter-spacing: var(--interletrado-titular);
color: var(--color-texto);
}
.ino-versalita { /* etiquetas y titulares cortos en MAYÚSCULAS finas (eco del logo) */
font-family: var(--font-display);
font-weight: 430;
text-transform: uppercase;
letter-spacing: var(--interletrado-versalita);
}
.ino-frase { /* lema, nombres de anfitriones, frases destacadas */
font-family: var(--font-display);
font-weight: var(--peso-titular);
font-style: normal;
}
.ino-boton {
font-family: var(--font-texto);
font-weight: var(--peso-fuerte);
font-size: var(--t-base);
letter-spacing: .02em;
padding: 14px 28px;
border: 0;
border-radius: var(--radio-pildora);
background: var(--color-boton);
color: var(--color-boton-texto);
box-shadow: var(--sombra-boton);
transition: background var(--dur-rapida) var(--ease-salida), transform var(--dur-rapida) var(--ease-salida);
}
.ino-boton:hover { background: var(--color-boton-hover); }
.ino-boton:active { transform: translateY(1px); }
.ino-boton:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.ino-boton--acento { background: var(--color-boton-acento); color: var(--color-boton-acento-texto); }
.ino-boton--acento:hover { background: var(--color-boton-acento-hover); }
.ino-boton--violeta, .ino-boton--secundario { background: var(--color-boton-secundario); color: var(--color-boton-secundario-texto); }
.ino-boton--violeta:hover, .ino-boton--secundario:hover { background: var(--color-boton-secundario-hover); }
.ino-boton--contorno { background: transparent; color: var(--color-acento-texto); box-shadow: inset 0 0 0 2px var(--color-hilo); }
@media (prefers-reduced-motion: reduce) {
:root { --dur-rapida: 0ms; --dur-media: 0ms; --dur-lenta: 0ms; --dur-logo: 0ms; }
}