/* ============================================================
   DINASTÍA INSURANCE SOLUTIONS — TOKENS DE DISEÑO
   Fuente de verdad: Dinastia_Phase_5_Design_Tokens.json (Fase 5).

   Este archivo va PRIMERO en todas las páginas, antes que
   cualquier otra hoja. Existe porque 17 páginas (calculadora,
   cotizador, guiones, roleplay…) no cargan styles.css y se
   quedaban sin paleta.

   Si hace falta un color, radio, sombra o tiempo nuevo: se añade
   al JSON del handoff primero y aquí después. No inventar valores
   sueltos en las hojas de abajo.
   ============================================================ */

:root{
  /* ---- Tokens del handoff (Fase 5) ---- */
  --dinastia-navy-950:#08152D;
  --dinastia-navy-900:#0B1C3A;
  --dinastia-navy-700:#203A67;
  --dinastia-blue-500:#496DA9;
  --dinastia-gold-600:#BE8B3D;
  --dinastia-gold-300:#E6C890;
  --dinastia-ivory-50:#FBFAF7;
  --dinastia-paper-100:#F4F5F8;
  --dinastia-lavender-100:#E7E4F3;
  --dinastia-peach-100:#F5DDD0;
  --dinastia-mint-100:#DCEBE4;
  --dinastia-success-500:#2F8F71;
  --dinastia-warning-500:#C98A28;
  --dinastia-danger-500:#B6545B;
  --dinastia-ink:#14213D;
  --dinastia-muted:#64718A;
  --dinastia-on-dark:#FFFFFF;

  /* ---- Superficies ---- */
  --black:var(--dinastia-ivory-50);    /* fondo de página */
  --black-2:var(--dinastia-paper-100); /* campos, insets, pistas */
  --panel:#FFFFFF;                     /* tarjetas */
  --panel-2:var(--dinastia-paper-100); /* cabeceras de tabla */
  --line:#DFE3EB;                      /* borde suave */

  /* ---- Oro: acento, progreso y premio. Nunca texto corrido ---- */
  --gold:var(--dinastia-gold-600);
  --gold-deep:#C9A96A;                 /* bordes y números decorativos */
  /* --gold-bright era el color de TÍTULOS sobre fondo negro. Sobre
     marfil el oro claro no se lee, y el handoff prohíbe el oro en
     texto: los títulos pasan a navy. El nombre se conserva para no
     tocar 900 líneas; el ROL cambió a propósito. */
  --gold-bright:var(--dinastia-navy-900);

  /* ---- Navy: acción, enlaces, confianza ---- */
  --blue:var(--dinastia-blue-500);       /* rellenos y bordes */
  --blue-bright:var(--dinastia-navy-700);/* texto y enlaces */
  --blue-deep:var(--dinastia-navy-900);

  /* ---- Contenido ---- */
  --text:var(--dinastia-ink);
  --text-dim:var(--dinastia-muted);
  --text-faint:#8A94A8;
  --on-gold:#14100A;                   /* tinta sobre relleno dorado */

  /* ── ROJO: NO ES COLOR DE MARCA ──────────────────────────────
     La marca es marfil, navy y oro. El rojo es un color de SISTEMA
     y se usa SOLO para lo que detiene al usuario: un error, una
     validación que falla, borrar algo, un "no" definitivo.
     Nunca decora, nunca rellena, nunca es un acento.
     Para llamar la atención sin alarmar se usa el ORO. */
  --danger:var(--dinastia-danger-500);
  --danger-soft:var(--dinastia-danger-500);
  --success:var(--dinastia-success-500);
  --warning:var(--dinastia-warning-500);

  /* ---- Radio (token: control/card/feature/hero/pill) ---- */
  --radius-control:8px;
  --radius:16px;
  --radius-feature:24px;
  --radius-hero:32px;
  --radius-pill:999px;

  /* ---- Elevación (token) ---- */
  --elev-1:0 8px 24px rgba(11,28,58,.08);
  --elev-2:0 18px 48px rgba(11,28,58,.13);
  --elev-3:0 32px 80px rgba(11,28,58,.20);
  --shadow:var(--elev-2);

  /* ---- Movimiento (token) ---- */
  --motion-instant:120ms;
  --motion-quick:220ms;
  --motion-standard:360ms;
  --motion-scene:480ms;
  --motion-reward:700ms;
  --ease-soft:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.16,1.2,.3,1);

  /* ---- Tipografía (token) ---- */
  --font-ui:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:Georgia,'Times New Roman',serif;

  /* ---- Objetivo táctil mínimo del handoff ---- */
  --touch-target:44px;

  --maxw:1060px;
  /* Relleno dorado: lleva SIEMPRE tinta oscura encima (--on-gold). */
  --grad-gold:linear-gradient(135deg,rgb(150,110,45) 0%,rgb(222,176,86) 16%,rgb(250,212,124) 30%,rgb(214,164,60) 46%,rgb(176,120,32) 72%,rgb(138,90,26) 100%);
  /* Oro para TEXTO recortado sobre marfil. El degradado de relleno se blanquea
     sobre fondo claro y el titular deja de leerse — comprobado en pantalla.
     Este baja los tonos hasta que contrasta. Solo para .accent y titulares. */
  --grad-gold-text:linear-gradient(135deg,#7A4E14 0%,#A97A24 28%,#C79A3C 50%,#9C6F20 76%,#6E4512 100%);
}

/* Movimiento reducido — exigido por el handoff (Fase 5, §5 y motion token).
   Quien lo pida en su sistema operativo recibe opacidad y foco, nada más. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
}

/* Objetivo táctil mínimo de 44px (handoff §6 "Responsive acceptance").
   Se aplica a los controles reales, no a los enlaces de texto corrido. */
button,
.btn,
input[type=button],
input[type=submit],
select{
  min-height:var(--touch-target);
}

/* Escala de capas — declarada en la Fase 1 de la auditoría (16-ago).
   Nada de números mágicos de cinco cifras: si necesitas una capa
   nueva, cabe en esta escala o no existe.
     0-5      contenido y decoración local
     10-90    elementos pegajosos dentro de la página
     100-200  barras fijas (progreso, navegación)
     900-1000 ventanas emergentes y su fondo
     1090-1150 celebraciones y cargadores
     1200     botones flotantes
     1300     avisos del sistema — SIEMPRE encima de todo */

/* Icono vectorial de la familia (assets/iconos.svg) — Fase 2.
   Hereda currentColor: navy en reposo, dorado/activo según el padre. */
.ic{width:18px;height:18px;flex-shrink:0;vertical-align:-3px;display:inline-block}
.ptab .ic{margin-right:7px}
.nav-link .ic{width:17px;height:17px;vertical-align:-3px}

/* Títulos de apertura — unificados en TODA la plataforma (orden del 17-ago):
   todo h1 abre con peso, relieve 3D y la tinta navy de la casa. Las clases
   propias (.pt-h1, .hero-title, .lesson-title…) pueden subir el tamaño,
   pero ninguna página se queda con un título plano. */
body h1{font-family:var(--font-display);font-weight:800;line-height:1.05;text-wrap:balance;
  color:var(--dinastia-navy-900);letter-spacing:.3px;
  font-size:clamp(34px,5.5vw,60px);
  text-shadow:0 1px 0 #26406E,0 2px 0 #1E3560,0 3px 0 #172B51,0 4px 0 #112343,0 14px 30px rgba(11,28,58,.32)}
body h1 .accent{text-shadow:none}

/* Transición entre páginas (Fase 4) — fundido corto de entrada al llegar
   a cada página. Se eligió esta vía y NO @view-transition porque la
   versión de documento cruzado dejaba pegada la instantánea vieja en
   algunos navegadores (visto en pruebas el 17-ago). */
@media (prefers-reduced-motion: no-preference){
  body{animation:paginaEntra .28s ease-out}
  @keyframes paginaEntra{from{opacity:.55}to{opacity:1}}
}