/* ============================================================
   AMA Pediatrics — Design Tokens
   Paleta y variables de diseño (ver docs/01-brand-design-system.md)
   ⚠️ Colores aproximados del logo — muestrear HEX exactos antes de producción.
   ============================================================ */

:root {
  /* --- Colores de marca --- */
  --c-lila:   #9B6BC7;
  --c-lila-d: #7E4EAE;   /* oscuro para hover/contraste texto */
  --c-verde:  #57A578;
  --c-verde-d:#3F8560;
  --c-coral:  #F26B5C;
  --c-coral-d:#D9503F;
  --c-navy:   #2E3A5F;

  /* --- Fondos --- */
  --bg:        #FFFFFF;
  --bg-alt:    #FAF8FC;
  --lila-soft: #F1E9F9;
  --verde-soft:#E6F3EC;
  --coral-soft:#FDE8E4;

  /* --- Texto --- */
  --tx:        #2E3A5F;
  --tx-body:   #52526A;
  --tx-muted:  #8A8A9A;
  --border:    #ECEAF2;

  /* --- WhatsApp --- */
  --wa: #25D366;
  --wa-d: #1EB456;

  /* --- Forma --- */
  --radius:      20px;
  --radius-sm:   12px;
  --radius-lg:   28px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 14px rgba(46,58,95,0.06);
  --shadow:    0 12px 34px rgba(46,58,95,0.09);
  --shadow-lg: 0 24px 60px rgba(46,58,95,0.14);
  --shadow-lila: 0 14px 30px rgba(155,107,199,0.28);
  --shadow-coral:0 14px 30px rgba(242,107,92,0.28);

  /* --- Tipografía --- */
  --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:  clamp(2.3rem, 5.2vw, 3.75rem);
  --fs-h2:    clamp(1.75rem, 3.6vw, 2.6rem);
  --fs-h3:    clamp(1.15rem, 2.4vw, 1.45rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* --- Espaciado (escala 4px) --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* --- Layout --- */
  --maxw: 1160px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --header-h: 76px;

  /* --- Transición --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.35s var(--ease);
}