/* ============================================================================
   ADASSA · brand.css — "Cumbre Serena"
   Sistema de marca ganador (Ruta B) para los mockups del preview.
   Marca serena afuera · energía cálida adentro · coral como chispa.
   Derivado de packages/ui/tokens.ts + ADASSA_Final_Brand_System_v0.md
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ---- superficie (heredado del producto) ---- */
  --paper:#F6EFE8; --paper-muted:#EFE5DC; --paper-hover:#E7DCD2;
  --backdrop-warm:#EBE0D5; --backdrop-deep:#E2D2C5;
  --ambient:radial-gradient(120% 80% at 50% -10%, #EBE0D5, #E2D2C5);
  --ink:#2B2230; --text-secondary:#605469; --text-muted:#6E6279; --on-dark:#FFFFFF;
  --border:rgba(43,34,48,.10); --border-subtle:rgba(43,34,48,.06); --border-strong:rgba(43,34,48,.16);

  /* ---- marca (Cumbre Serena) ---- */
  --bosque:#294436; --bosque-deep:#1E3329; --bosque-soft:#3A5A48;
  --arena:#C7A667; --arena-deep:#7A621F; --arena-line:#A9884B; --arena-tint:rgba(199,166,103,.14);
  --spark:#CE4C6E;            /* chispa = peak, une marca y producto */
  --bosque-tint:rgba(41,68,54,.08); --bosque-tint-border:rgba(41,68,54,.18);

  /* ---- energía (producto, sin cambios) ---- */
  --e-calm:#5E7C8E; --e-steady:#E0A23C; --e-build:#B65A86; --e-peak:#CE4C6E;
  /* variantes accesibles (AA >=4.5:1 sobre paper) para USAR EN TEXTO; el color crudo queda para dots/bordes/barras */
  --e-calm-ink:#3E5563; --e-steady-ink:#7A5A16; --e-build-ink:#863C60; --e-peak-ink:#9E2F4B;
  --e-calm-tint:rgba(94,124,142,.10); --e-steady-tint:rgba(224,162,60,.12);
  --e-build-tint:rgba(182,90,134,.10); --e-peak-tint:rgba(206,76,110,.10);
  --success:#5E8C6E; --warning:#E0A23C; --danger:#C0453B;

  /* ---- tipografía ---- */
  --font-display:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- radius / sombra / motion ---- */
  --r-sm:8px; --r-md:11px; --r-lg:13px; --r-xl:18px; --r-sheet:26px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(43,34,48,.05), 0 10px 30px -16px rgba(43,34,48,.28);
  --shadow-lift:0 2px 6px rgba(43,34,48,.08), 0 24px 60px -22px rgba(43,34,48,.42);
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-fast:140ms; --dur-base:200ms; --dur-enter:500ms;

  /* layout */
  --content-max:1180px; --sidebar-w:248px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ambient); background-attachment:fixed;
  color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:0}
p{margin:0}
a{color:inherit; text-decoration:none}
::selection{background:var(--arena-tint)}
:focus-visible{outline:2.5px solid var(--spark); outline-offset:2px; border-radius:4px}

/* ---- helpers ---- */
.wrap{max-width:var(--content-max); margin:0 auto; padding:0 32px}
.kicker{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--arena-deep); font-weight:500}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-secondary)}
.center{text-align:center}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:14px;
  padding:12px 20px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:transform var(--dur-fast) var(--ease),background var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);min-height:44px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--bosque);color:#F3EEE7}
.btn-primary:hover{background:var(--bosque-deep);box-shadow:var(--shadow-card)}
.btn-spark{background:var(--spark);color:#fff}
.btn-spark:hover{background:#B8385A;box-shadow:var(--shadow-card)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--ink)}
.btn-ghost:hover{background:var(--paper-hover)}

/* ---- superficies ---- */
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-card)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--border);font-size:12.5px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:600;letter-spacing:.02em}

/* ---- marcador de energía ---- */
.energy-dot{width:9px;height:9px;border-radius:50%}
.e-calm{background:var(--e-calm)} .e-steady{background:var(--e-steady)}
.e-build{background:var(--e-build)} .e-peak{background:var(--e-peak)}

/* ---- isotipo ∧ (apex) como marca ---- */
.apex{display:inline-block}
.apex svg{display:block}

/* ---- throughline (motivo firma) ---- */
.throughline{position:relative;padding-left:22px}
.throughline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border-strong);border-radius:2px}

/* ---- momento agentic: pulso vivo (dosis medida, ruta C) ---- */
@keyframes apexpulse{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}}
.agentic .apex{animation:apexpulse 2.4s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- entradas escalonadas ---- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:rise var(--dur-enter) var(--ease) both}