/* ============================================================
AUREA · design tokens
Identidad: oro rosa sobre neutro. Fondo casi blanco con grano, hero en ciruela
oscura, oro rosa solo en la acción y en los adornos. Ver MARCA.md.
Sirve para cualquier stack (HTML plano, Astro, React, etc.).
Se importa UNA vez y luego se usan las variables var(--...).
============================================================ */
/* --- Fuentes ---
Opción A (recomendada): pega este en el del sitio:
Opción B: si prefieres solo CSS, descomenta la línea de abajo. */
/* @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..700&family=Inter:wght@400;500;600;700&display=swap'); */
:root{
/* Color · oro rosa sobre neutro. Cambiado el 01-10-2026 (antes era oro/bronce).
El neutro hace el trabajo; el oro rosa aparece solo donde hay que mirar o tocar. */
--hueso: #FFFDFC; /* FONDO PRINCIPAL. Casi blanco, un punto más luminoso (27-10-2026) */
--rosa-tenue: #FFF5FB; /* fondo de lo destacado. Rosa clarísimo, de la familia del acento.
Sustituye al gris, que se quitó el 01-10-2026: no había gris en la marca */
--degradado-rosa: linear-gradient(165deg, #FFFAFE 0%, #FFE3F3 100%); /* relleno de la tarjeta recomendada */
--arena: var(--rosa-tenue); /* nombre antiguo */
--oscuro: #240E27; /* hero y bandas oscuras. Ciruela-violeta, la de la paleta 3 */
--tinta: #1B1418; /* texto, titulares y CIFRAS. 16,5 sobre el fondo */
--taupe: #6B5C60; /* texto secundario */
--oro-rosa: #C71F7E; /* COLOR DE ACCION (paleta 3, 27-10-2026): botones y enlaces.
Blanco encima 5,49; sobre el fondo 5,30; sobre la banda 4,97 */
blanco encima 5,14 y sobre el fondo 4,84. Saturación 73 % */
--oro-rosa-hondo: #99125F; /* hover y énfasis. 8,00 sobre el fondo */
--champan: #E0489F; /* ROSA VIVO DECORATIVO (antes oro rosa apagado). Barras, líneas y puntos. No escribe */
--champan-claro: #FFC7E8; /* sobre oscuro sí escribe: 12,06 */
--trigo: #FFE3F3; /* fondos de etiquetas y de pastillas */
--si: #35755A; /* el tic. Verde apagado, 5,28 sobre el fondo */
--no: #A8443C; /* la cruz. Rojo terracota, 5,71 sobre el fondo */
/* Nombres antiguos, mantenidos para no romper nada que ya los use */
--papel: var(--hueso);
--marfil: var(--hueso);
--ciruela: var(--oscuro);
--bronce: var(--oro-rosa);
--bronce-hondo: var(--oro-rosa-hondo);
--rosa: var(--oro-rosa);
--vino: var(--oro-rosa-hondo);
--blush: var(--trigo);
/* Texto sobre cada fondo (usa estos para no fallar el contraste) */
--sobre-marfil: #1B1418;
--sobre-rosa: #FFFDFC;
--sobre-ciruela: #FFFDFC;
/* Tipografía */
--font-display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
--font-sans: "Inter", system-ui, -apple-system, sans-serif;
/* Radios y sombras (coherentes con el style tile) */
--radio-sm: 10px;
--radio: 16px;
--radio-pill: 999px;
--sombra: 0 1px 2px rgba(43,30,34,.06), 0 8px 24px rgba(43,30,34,.06);
--linea: 1px solid rgba(43,30,34,.10);
}
/* ============================================================
PRIMITIVOS opcionales — cópialos solo si te sirven.
Si el sitio ya tiene sus botones, ignora esta parte y usa
solo las variables de arriba dentro de vuestros estilos.
============================================================ */
.aurea-btn{
font-family:var(--font-sans); font-size:15px; font-weight:500;
padding:12px 22px; border-radius:var(--radio-pill);
border:1px solid transparent; cursor:pointer; display:inline-block;
transition:background .18s, color .18s, border-color .18s;
}
.aurea-btn--primario{ background:var(--rosa); color:var(--sobre-rosa); }
.aurea-btn--primario:hover{ background:var(--vino); }
.aurea-btn--fantasma{ background:transparent; color:var(--tinta); border-color:rgba(43,30,34,.30); }
.aurea-btn--fantasma:hover{ border-color:var(--tinta); }
.aurea-pill{
display:inline-block; background:var(--blush); color:var(--vino);
font-family:var(--font-sans); font-size:13px; font-weight:500;
padding:6px 14px; border-radius:var(--radio-pill);
}
.aurea-estrellas{ color:var(--champan); font-size:18px; letter-spacing:2px; }