/* ============================================================
   santa-ia · brand.css · hoja de marca CANÓNICA para todo front del vault
   Espejo EXACTO de ~/Documents/Proyectos/SantaIA/santaia-landing
   (BRAND.md + brand/tokens.json v1.0.0). NO inventar tokens acá.
   Regla dura: la marca es LIGHT/crema/cálida. Oscuro PROHIBIDO por defecto.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Acento naranja (idéntico en ambos temas) */
  --accent-50:#FFF7ED; --accent-100:#FFEDD5; --accent-300:#FDBA74;
  --accent-400:#FB923C; --accent-500:#F97316; --accent-600:#EA580C; --accent-700:#C2410C;
  /* Light theme (tokens.json color.light) */
  --bg:#FFFBF5; --surface:#FFFFFF; --surface-2:#FEF7EC;
  --fg:#0F172A; --fg-muted:#475569; --fg-subtle:#94A3B8;
  --border:#F1EFE7; --border-strong:#E5E0D2; --dot:#E7E5E4;
  /* Semánticos (light) */
  --success:#16A34A; --warning:#D97706; --danger:#DC2626; --donate:#E11D48; --info:#0284C7;
  --hat-red:#DC2626;
  /* Tipografía */
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',monospace;
  /* Radius (tokens.json) */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-pill:9999px;
  /* Sombras suaves cálidas (basadas en slate, no negro puro) */
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 8px 16px rgba(15,23,42,.08);
  --shadow-lg:0 16px 32px rgba(15,23,42,.10);
  --glow:0 0 0 4px rgba(249,115,22,.18);
  /* Motion (tokens.json) */
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1);
  --dur-fast:150ms; --dur-base:200ms; --dur-slow:300ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;position:relative;min-height:100vh}

/* ---- Texturas de fondo de marca ---- */
.bg-dotted{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size:22px 22px;opacity:.6}
.bg-stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85}
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-glow .halo{position:absolute;border-radius:50%;filter:blur(120px);opacity:.16}
.bg-glow .halo.a{width:460px;height:460px;background:var(--accent-300);top:-150px;right:-90px}
.bg-glow .halo.b{width:340px;height:340px;background:var(--accent-100);bottom:-110px;left:-70px}

.wrap{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 24px}

/* ---- Wordmark (BRAND.md §1: uppercase, SIN punto, -IA en accent) ---- */
.wordmark{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:1.25rem;
  color:var(--fg);text-transform:uppercase}
.wordmark .ia{color:var(--accent-600)}

/* ---- Tipografía ---- */
h1{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--fg)}
h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--fg)}
h3{font-family:var(--display);font-weight:600;color:var(--fg)}
.accent{color:var(--accent-600)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:.76rem;color:var(--accent-600);
  letter-spacing:.05em;text-transform:uppercase}
.lead{color:var(--fg-muted)}
.mono{font-family:var(--mono)}
.underline-mark{box-shadow:inset 0 -8px 0 var(--accent-300)}

/* ---- Pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 15px;border-radius:var(--r-pill);
  font-family:var(--display);font-weight:600;font-size:.74rem;background:var(--accent-100);
  color:var(--accent-700);border:1px solid transparent}
.pill.ghost{background:var(--surface);color:var(--fg-muted);border-color:var(--border-strong)}
.pill.on{background:rgba(22,163,74,.1);color:#15803d}
.pill.wait{background:rgba(217,119,6,.1);color:#b45309}
.pill .led{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---- Card ---- */
.card{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base),border-color var(--dur-base)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent-300)}

/* ---- Botones (BRAND.md §5) ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:500;font-size:.95rem;
  padding:12px 24px;border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent;transition:all var(--dur-base) var(--ease)}
.btn-primary{background:var(--accent-500);color:#fff}
.btn-primary:hover{background:var(--accent-600);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline{background:var(--surface);color:var(--fg);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--accent-500)}
.btn-inverse{background:var(--fg);color:var(--bg)}

/* ---- Mascota ---- */
.mascota{filter:drop-shadow(0 12px 28px rgba(249,115,22,.18));animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- Reveal ---- */
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}