/* ============================================================
   KOI — TOKENS DE MARCA (identidad oficial, manual 2026)
   Paleta: Azul #3F0DC9 · Verde #5AF955 · Negro #221E22
   Secundarios: Rosa #E2056F · Naranja #F57F00 · Amarillo #FFD400
   Tipografía: Satoshi (Fontshare).
   Reglas del manual: nunca verde sobre blanco (trazo/texto),
   nunca azul sobre negro. Fuente de verdad para color, tipo,
   radios y motion.
   ============================================================ */

/* --- Satoshi (self-hosted; la API de Fontshare restringe hotlinking) --- */
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/Satoshi-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/Satoshi-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/Satoshi-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/Satoshi-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* --- Núcleo de marca --- */
  --azul:       #3F0DC9;   /* primario — acción, links, isotipo, fondos hero */
  --azul-deep:  #300A99;   /* hover / profundidad */
  --azul-bright:#4B1BE0;   /* tope de gradiente azul */
  --verde:      #5AF955;   /* primario/acento — CTA, highlights (no sobre blanco) */
  --verde-deep: #2ED32A;   /* hover de verde */
  --negro:      #221E22;   /* tinta de marca / fondos oscuros */
  --negro-2:    #2B262C;   /* paneles oscuros elevados */
  --negro-3:    #353036;   /* superficie oscura superior */
  --rosa:       #E2056F;   /* secundario — pop cálido puntual */
  --naranja:    #F57F00;   /* secundario */
  --amarillo:   #FFD400;   /* secundario (estrellas, datos) */

  /* --- Neutros (derivados del negro de marca, tinte lavanda) --- */
  --slate:      #5A5560;   /* texto secundario */
  --steel:      #8A8590;   /* texto terciario / iconos suaves */
  --mist:       #F4F1FB;   /* fondo claro suave (lavanda muy tenue) */
  --mist-2:     #EAE5F8;
  --line:       #E4E0EC;   /* bordes */
  --white:      #FFFFFF;

  /* --- Gradientes de marca (la marca es plana: gradientes muy sutiles) --- */
  --grad-koi:    linear-gradient(120deg, var(--azul-bright) 0%, var(--azul) 100%);
  --grad-koi-2:  linear-gradient(120deg, var(--azul-deep) 0%, var(--azul) 55%, var(--azul-bright) 100%);
  --grad-warm:   linear-gradient(120deg, var(--rosa) 0%, var(--naranja) 100%);
  --grad-verde:  linear-gradient(120deg, var(--verde-deep) 0%, var(--verde) 100%);
  --grad-hero:   radial-gradient(120% 120% at 80% -10%, rgba(90,249,85,.16) 0%, rgba(90,249,85,.03) 40%, transparent 70%),
                 linear-gradient(160deg, var(--azul-deep) 0%, var(--azul) 55%, var(--azul-bright) 100%);
  /* Escena oscura con vida: índigo profundo → negro de marca (no negro plano) */
  --grad-ink:    linear-gradient(150deg, #261E3D 0%, #241E2F 55%, var(--negro) 100%);

  /* --- Semánticos (TEMA CLARO / día = por defecto) ---
     Se re-definen en :root[data-theme="dark"] para el tema noche.
     Las secciones "siempre oscuras" (hero, footer, .section--dark, banner,
     contact-info) NO usan estos tokens: se mantienen oscuras en ambos temas. */
  --bg:          #ffffff;   /* fondo de página */
  --bg-soft:     #F4F1FB;   /* secciones suaves */
  --surface:     #ffffff;   /* tarjetas */
  --surface-2:   #F4F1FB;   /* superficies anidadas / inputs / chips */
  --surface-3:   #EAE5F8;
  --bg-dark:     var(--negro);
  --text:        #221E22;
  --text-soft:   #5A5560;
  --text-mut:    #8A8590;
  --text-invert: #FFFFFF;
  --line:        #E4E0EC;   /* bordes (theme-aware) */
  --input-bg:    #F4F1FB;
  --accent:      var(--verde);
  --link:        var(--azul);
  --border:      var(--line);
  --shadow-color: 34,30,34;
  --header-bg:   rgba(255,255,255,.88);   /* header/subnav/mcta glass */
  color-scheme: light;

  /* --- Tipografía --- */
  --font-display: 'Satoshi', system-ui, sans-serif;  /* títulos, números, CTA */
  --font-body:    'Satoshi', system-ui, sans-serif;  /* cuerpo */

  /* --- Escala tipográfica fluida (clamp) --- */
  --fs-hero:  clamp(2.7rem, 7vw, 5.8rem);
  --fs-h1:    clamp(2.1rem, 4.6vw, 3.5rem);
  --fs-h2:    clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.65rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.125rem);
  --fs-small: 0.875rem;

  /* --- Radios --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* --- Sombras (tinte azul) --- */
  --shadow-sm: 0 2px 10px rgba(34,30,34,.07);
  --shadow-md: 0 14px 38px rgba(48,10,153,.12);
  --shadow-lg: 0 28px 70px rgba(48,10,153,.20);
  --shadow-azul:  0 16px 40px rgba(63,13,201,.32);
  --shadow-verde: 0 16px 40px rgba(46,211,42,.30);

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);

  /* --- Layout --- */
  --maxw: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.4rem);
}

/* ============================================================
   TEMA OSCURO (noche) — re-define solo los tokens de superficie.
   Regla del manual: sobre fondo oscuro la marca vive en VERDE y
   BLANCO (nunca azul puro). Links y acentos cambian a verde.
   ============================================================ */
:root[data-theme="dark"] {
  /* Oscuro con tinte índigo de marca (no negro neutro plano) */
  --bg:        #1C1626;
  --bg-soft:   #221B30;
  --surface:   #2B2338;
  --surface-2: #221B30;
  --surface-3: #342B46;
  --text:      #F5F3F6;
  --text-soft: #B7B0C2;
  --text-mut:  #867E93;
  --line:      rgba(255,255,255,.13);
  --input-bg:  #221B30;
  --accent:    var(--verde);
  --link:      var(--verde);
  --shadow-color: 0,0,0;
  --header-bg: rgba(28,22,38,.85);
  color-scheme: dark;
}
/* Sombras un poco más suaves en oscuro */
:root[data-theme="dark"] {
  --shadow-sm: 0 2px 12px rgba(0,0,0,.35);
  --shadow-md: 0 14px 40px rgba(0,0,0,.45);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.55);
}

/* ============================================================
   BOTONES (compartidos por todo el sitio)
   pill + display bold; primario VERDE con tinta negra (funciona
   sobre claro y oscuro), acento AZUL sólido con blanco.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--r-pill);
  padding: .95rem 1.7rem;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), color .2s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
:root[data-theme="dark"] .btn:focus-visible { outline-color: var(--verde); }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1.06rem; }

/* CTA principal: verde de marca + tinta negra (fondo verde → negro ✓) */
.btn--primary { background: var(--verde); color: var(--negro); box-shadow: var(--shadow-verde); }
.btn--primary:hover { background: var(--verde-deep); box-shadow: 0 22px 50px rgba(46,211,42,.40); }

/* CTA alterno: azul sólido + blanco (fondo azul → blanco ✓) */
.btn--accent { background: var(--azul); color: #fff; box-shadow: var(--shadow-azul); }
.btn--accent:hover { background: var(--azul-deep); box-shadow: 0 22px 50px rgba(63,13,201,.42); }

.btn--dark { background: var(--negro); color: #fff; box-shadow: var(--shadow-md); }
.btn--dark:hover { background: var(--negro-3); }

.btn--ghost { background: rgba(255,255,255,.06); color: #fff; border: 2px solid rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* Outline: azul en claro; verde en oscuro (regla del manual) */
.btn--outline { background: transparent; color: var(--azul); border: 2px solid var(--azul); }
.btn--outline:hover { background: var(--azul); color: #fff; }
:root[data-theme="dark"] .btn--outline { color: var(--verde); border-color: var(--verde); }
:root[data-theme="dark"] .btn--outline:hover { background: var(--verde); color: var(--negro); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}