/* aramara.css — Sistema visual compartido de las páginas del dominio.
Fuente de verdad: docs/Rediseno/brandbook Aramara final/ (rebranding 2026,
aprobado por Adán 8-ago-2026). Sustituye a la paleta del mockup de julio.
Uso:
Tema: estas páginas son SIEMPRE claras. No siguen la preferencia del sistema
a propósito — son públicas, y un prospecto en modo oscuro vería una marca
distinta a la del que está en claro. El oscuro solo se fuerza a mano con
. La app y el tablero sí siguen el tema; tienen su
propio CSS (mismos tokens, ver pwa/src/styles.css y ops/src/styles.css). */
:root {
/* Registro del programa Regulación (cap. 04 del brandbook) — el que aplica a
app, OPS y páginas del programa. El nopal y la terracota se quedan para
Adaptógenos/marca madre; aquí el acento de acción es el teal. */
--fondo: #EEF4F0;
--card: #FBFDFB;
--accion: #2E7D74; /* CTA, progreso, kickers — el acento del programa */
--accion-hover: #25675F;
--mar: #1F3A4A; /* oscuro institucional del programa */
--nopal: #2F4B3A; /* solo Adaptógenos/frascos — nunca en headers */
--salvia: #6E8A74;
--arena: #E9E1D4;
--luz: #D4B98A;
--tinta: #232720;
--texto: #232720;
--texto-suave: #5C6B66;
--borde: #DEEDE6;
--rojo: #B4553C; /* alerta/urgente */
/* Capa semántica — SOLO como punto/barra/etiqueta junto a un dato, nunca
como fondo de sección ni botón (regla dura del brandbook, cap. 04). */
--sem-energia: #F3B38D;
--sem-claridad: #F1D477;
--sem-regulacion: #9ED7CE;
--sem-descanso: #C8BDE7;
--sem-soporte: #EAF0E4;
/* Alias retrocompatibles — código viejo que aún nombra --verde/--terracota
sigue viéndose correcto con la paleta nueva mientras se re-estiliza cada
página (Fase 1-3 del rediseño). No usar estos nombres en markup nuevo. */
--verde: var(--accion);
--verde-deep: var(--mar);
--verde-suave: var(--texto-suave);
--verde-claro: var(--sem-soporte);
--beige: var(--arena);
--terracota: var(--rojo);
--amarillo: var(--sem-claridad);
--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Sombra verde desaturada — nunca negra dura (cap. 09 del brandbook). */
--sombra: 0 1px 2px rgba(31,58,74,.05), 0 10px 30px -18px rgba(31,58,74,.20);
--radius-sm: 14px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 32px;
}
/* Oscuro — derivado (el brandbook no define una paleta oscura canónica), a
partir de mar profundo + nopal + base fría. No se activa por preferencia
del sistema en las páginas públicas: un prospecto en oscuro vería una marca
distinta a la del que está en claro. Se enciende a mano con
. La app y el tablero SÍ siguen el tema. */
:root[data-theme="oscuro"] {
--fondo: #14201F; --card: #1B2A28;
--accion: #6FBDB2; --accion-hover: #8ECEC4;
--mar: #E4EEF2; --nopal: #8FAE97; --salvia: #9CB7A4;
--arena: #2A2F26; --luz: #C9A876;
--tinta: #E7EFEA; --texto: #E7EFEA; --texto-suave: #9FB3AC;
--borde: #2C3D3A; --rojo: #DE8468;
--sem-energia: #E3A377; --sem-claridad: #D9C06E;
--sem-regulacion: #7EC2B8; --sem-descanso: #B3A0D6; --sem-soporte: #24322F;
--sombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -18px rgba(0,0,0,.6);
}
/* ── Fuentes auto-hospedadas ─────────────────────────────────────────────
La PWA es instalable/offline: no puede depender de un CDN de fuentes, y
las páginas públicas dejan de pegarle a Google Fonts de paso. Pesos según
cap. 05 del brandbook: Cormorant 300-500 + itálicas (nunca bold — títulos
editoriales, no cuerpos largos); Outfit 300-700 (UI y datos). */
@font-face {
font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 500;
font-display: swap; src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 500;
font-display: swap; src: url("/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 300 700;
font-display: swap; src: url("/fonts/outfit-latin.woff2") format("woff2");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--fondo); color: var(--texto);
font-family: var(--sans); font-size: 16px; line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
button { -webkit-text-fill-color: currentColor; font-family: inherit; }
img { max-width: 100%; height: auto; }
/* ── Tipografía ──────────────────────────────────────────────────────── */
/* lining-nums: Cormorant trae cifras antiguas por defecto y "día 1" se lee "día ɪ". */
h1, h2, h3, .titulo, .ancla-muestra { font-variant-numeric: lining-nums; }
h1, h2, h3 { font-family: var(--serif); color: var(--mar); font-weight: 400; line-height: 1.15; }
h1 { font-size: 2rem; font-weight: 300; }
h2 { font-size: 1.4rem; font-weight: 300; }
h3 { font-size: 1.12rem; }
.etiqueta {
font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--texto-suave);
}
.suave { color: var(--texto-suave); }
.chico { font-size: .82rem; }
/* ── Contenedor ──────────────────────────────────────────────────────── */
/* .envoltura documento de lectura corrida (aviso legal) — no crece: 680px es
el ancho donde un párrafo se lee sin perder el renglón.
.angosto flujo tipo formulario (el quiz).
.ancho página de marketing — SÍ crece en escritorio, porque a 520px en
una pantalla de 1900 se ve como una franja perdida en el centro.
.columna dentro de .ancho, devuelve el texto corrido a ancho legible. */
.envoltura { max-width: 680px; margin: 0 auto; padding: 0 16px; }
.angosto { max-width: 520px; }
.ancho { max-width: 680px; }
@media (min-width: 860px) {
.ancho { max-width: 940px; padding: 0 32px; }
.angosto { max-width: 560px; }
.columna { max-width: 640px; margin-left: auto; margin-right: auto; }
}
/* ── Cards — la superficie base de todo ──────────────────────────────── */
.card {
background: var(--card); border: 1px solid var(--borde);
border-radius: var(--radius-sm); padding: 18px 20px;
}
.card + .card { margin-top: 12px; }
.card .titulo {
font-family: var(--serif); font-size: 1.12rem; font-weight: 400;
color: var(--mar); line-height: 1.15; margin-bottom: 8px;
}
/* ── Botones ─────────────────────────────────────────────────────────── */
.btn {
display: block; width: 100%; padding: 13px; border: none; border-radius: var(--radius-sm);
font-size: .95rem; font-weight: 700; cursor: pointer; text-align: center;
text-decoration: none; transition: filter .15s ease, background .15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.btn-cta { background: var(--accion); color: #fff; }
.btn-cta:hover { background: var(--accion-hover); filter: none; }
.btn-verde { background: var(--accion); color: #fff; }
.btn-linea { background: transparent; color: var(--accion); border: 1px solid var(--borde); }
/* ── Chips ───────────────────────────────────────────────────────────── */
.chip {
display: inline-block; padding: 3px 10px; border-radius: 99px;
font-size: .72rem; font-weight: 700;
}
.chip-verde { background: var(--sem-soporte); color: var(--accion); }
.chip-terra { background: #F7E7E0; color: var(--rojo); }
.chip-neutro { background: var(--arena); color: var(--texto-suave); }
/* ── Campos ──────────────────────────────────────────────────────────── */
input, select, textarea {
width: 100%; padding: 11px 13px; border: 1px solid var(--borde); border-radius: var(--radius-sm);
background: var(--card); color: var(--texto); font-family: var(--sans); font-size: .95rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accion); outline-offset: 1px; }
label { display: block; font-size: .78rem; font-weight: 700; color: var(--texto-suave); margin-bottom: 5px; }
.campo + .campo { margin-top: 12px; }
/* ── Caja destacada ──────────────────────────────────────────────────── */
.destacado {
background: var(--sem-soporte); border-left: 3px solid var(--accion);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 16px;
}
.destacado-terra { background: #F7E7E0; border-left-color: var(--rojo); }
/* ── Barra de progreso ───────────────────────────────────────────────── */
.barra { height: 6px; background: var(--arena); border-radius: 99px; overflow: hidden; }
.barra > div { height: 100%; background: var(--accion); border-radius: 99px; transition: width .35s ease; }
/* ── Encabezado de página ────────────────────────────────────────────── */
.nav {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0; border-bottom: 1px solid var(--borde); margin-bottom: 22px;
}
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--mar); }
.marca svg { width: 22px; height: 22px; color: var(--accion); }
.nav a { color: var(--texto-suave); text-decoration: none; font-size: .85rem; }
.pie {
margin-top: 40px; padding: 22px 0 32px; border-top: 1px solid var(--borde);
font-size: .78rem; color: var(--texto-suave); text-align: center;
}
.pie a { color: var(--accion); }
/* ── Motivo: anillos de Regulación, decoración de hero/splash ────────────
8-ago: se apagó por confundirla con "el logo" que seguía animado en la
landing — pero esa vez el logo real era el isotipo del nav (ya arreglado
aparte) y esto es la decoración ambiental de fondo, pieza distinta. Adán
la marcó en captura pidiendo que se mueva de nuevo: "no funciona, no hay
movimiento". Vuelve a respirar; la regla "sin animación salvo login" es
del isotipo/wordmark de marca, no de esta decoración. */
@keyframes ara-respirar { 0%, 100% { transform: scale(.95); opacity: .75; } 50% { transform: scale(1.05); opacity: 1; } }
.ara-anillos-respira { animation: ara-respirar 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ara-anillos-respira { animation: none; } }
@media (max-width: 480px) {
h1 { font-size: 1.6rem; }
.card { padding: 15px 16px; }
}
/* ── Turno 2 (aprobado por Adán, 8-ago) — 2b "Las capas restantes": los anillos
también cambian de color, medio compás después que las vocales del wordmark.
Vive en splash, onboarding, login y header — nunca en favicon/impresión/tamaños
chicos. Uso: (sin fill en el , cada lleva su clase). */
.ara-anillos-viva .rb1, .ara-anillos-viva .rb2, .ara-anillos-viva .rb3 { fill: var(--mar); }
@keyframes ara-rB1 { 0%, 78%, 100% { fill: var(--mar); } 40%, 66% { fill: #F3B38D; } }
@keyframes ara-rB2 { 0%, 76%, 100% { fill: var(--mar); } 34%, 64% { fill: #C16F4A; } }
@keyframes ara-rB3 { 0%, 80%, 100% { fill: var(--mar); } 46%, 68% { fill: #C8BDE7; } }
.ara-anillos-viva .rb1 { animation: ara-rB1 7s ease-in-out infinite; }
.ara-anillos-viva .rb2 { animation: ara-rB2 7s ease-in-out infinite; }
.ara-anillos-viva .rb3 { animation: ara-rB3 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.ara-anillos-viva .rb1 { animation: none; }
.ara-anillos-viva .rb2 { animation: none; }
.ara-anillos-viva .rb3 { animation: none; }
}