/* ═══════════════════════════════════════════════════════════
   DuoDent · DESIGN TOKENS
   Sistema de diseño extraído del logotipo de marca.
   Light Premium + secciones navy · Glassmorphism ligero
═══════════════════════════════════════════════════════════ */

:root {
  /* ── PALETA DE MARCA (extraída del logo) ── */
  --brand-teal:        #2FB8C6;   /* turquesa del diente */
  --brand-cyan:        #00B4D8;   /* cian vivo / hover */
  --brand-ocean:       #0E5C8A;   /* azul medio */
  --brand-navy:        #0A2A43;   /* azul profundo / texto fuerte */
  --brand-navy-deep:   #06203A;   /* navy secciones oscuras */
  --brand-indigo:      #6C63F0;   /* violeta — SOLO CTA principal */
  --brand-indigo-dark: #564fd1;

  /* ── GRADIENTES DE MARCA ── */
  --grad-brand:   linear-gradient(120deg, #2FB8C6 0%, #00B4D8 45%, #0E5C8A 100%);
  --grad-cta:     linear-gradient(120deg, #6C63F0 0%, #00B4D8 130%);
  --grad-navy:    linear-gradient(160deg, #0A2A43 0%, #06203A 60%, #0E3654 100%);
  --grad-soft:    linear-gradient(180deg, #F4F8FE 0%, #EAF1FC 100%);
  --grad-hero:    radial-gradient(1200px 600px at 80% -10%, rgba(108,99,240,.12), transparent 60%),
                  radial-gradient(900px 500px at 10% 10%, rgba(0,180,216,.12), transparent 55%),
                  linear-gradient(180deg, #F4F8FE 0%, #E9F1FC 100%);

  /* ── NEUTROS ── */
  --white:    #ffffff;
  --ink:      #0F2335;   /* títulos */
  --body:     #46586B;   /* cuerpo */
  --muted:    #7C8DA0;   /* secundario */
  --line:     #E2EAF4;   /* bordes claros */
  --bg:       #F4F8FE;   /* fondo página */
  --bg-2:     #EAF1FC;

  /* ── GLASSMORPHISM (ligero) ── */
  --glass-light:   rgba(255,255,255,.66);
  --glass-light-2: rgba(255,255,255,.85);
  --glass-border:  rgba(255,255,255,.7);
  --glass-dark:    rgba(255,255,255,.06);
  --glass-dark-2:  rgba(255,255,255,.10);
  --glass-dark-bd: rgba(255,255,255,.14);
  --blur:          16px;

  /* ── SOMBRAS (azuladas, nunca negro puro) ── */
  --sh-xs: 0 1px 2px rgba(10,42,67,.06);
  --sh-sm: 0 4px 14px rgba(10,42,67,.08);
  --sh-md: 0 12px 30px rgba(14,92,138,.12);
  --sh-lg: 0 24px 60px rgba(14,92,138,.16);
  --sh-cta: 0 12px 28px rgba(108,99,240,.35);

  /* ── RADIOS ── */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ── ESPACIADO (escala 4/8) ── */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* ── TIPOGRAFÍA ── */
  --font-display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  /* Escala fluida (clamp) */
  --t-h1: clamp(2.2rem, 1.3rem + 3.8vw, 4rem);
  --t-h2: clamp(1.7rem, 1.2rem + 2.2vw, 2.75rem);
  --t-h3: clamp(1.2rem, 1rem + .8vw, 1.5rem);
  --t-lead: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  --t-body: 1rem;
  --t-sm: .875rem;
  --t-xs: .78rem;

  /* ── LAYOUT ── */
  --container: 1200px;
  --container-wide: 1320px;
  --px: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3.5rem, 6vw, 6rem);

  /* ── MOVIMIENTO ── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .2s var(--ease);
  --t-base: .3s var(--ease);
  --t-slow: .5s var(--ease-out);

  --z-header: 100;
  --z-fab: 200;
  --z-modal: 300;
}

/* Modo dark de secciones (no del sitio): aplicar .surface-navy */