/* ============================================================
   TOKENS — psicologa.co Design System
   Variables CSS extraídas del código real de index.html.
   Importar PRIMERO en todas las páginas.
   ============================================================ */

:root {

  /* ── Colores de marca ── */
  --color-navy:        #00254D;   /* Navy principal — headings, botones, footer bg */
  --color-navy-dark:   #003a75;   /* Navy hover — botones :hover */
  --color-navy-brand:  #1e385b;   /* Navy Tailwind (brand.blue) — nav text, hero CTA */
  --color-blue:        #1D4ED8;   /* Azul — convenios, consultorios, badges azul */
  --color-blue-dark:   #1e40af;   /* Azul hover — links :hover */
  --color-teal:        #0D9488;   /* Verde azulado — blog, precios accents */
  --color-purple:      #7C3AED;   /* Violeta — especialistas, psibanner */
  --color-pink:        #BE185D;   /* Rosa — video section */
  --color-green:       #059669;   /* Verde — cursos digitales */
  --color-sky:         #38BDF8;   /* Azul cielo — servicios badge, team bio links */

  /* ── Colores de fondo / superficies ── */
  --color-cream:       #fdfbf7;   /* Crema — hero bg, avatar ring */
  --color-bg-hero:     radial-gradient(ellipse 80% 60% at 70% 50%, #e8f0fe 0%, #fdfbf7 70%);
  --color-bg-light:    #f5f7fa;   /* Fondo general claro */

  /* ── Texto ── */
  --color-text-body:   #717487;   /* Subtítulos / párrafos de sección */
  --color-text-label:  #8a95a8;   /* Labels, direcciones, notas */
  --color-text-muted:  #9ca3af;   /* Texto muy sutil */
  --color-text-card:   #3d4256;   /* Cuerpo de cards */
  --color-text-table:  #4e5a72;   /* Filas de tabla de precios */

  /* ── Acentos claros (para footer / stats) ── */
  --color-light-blue:  #60a5fa;   /* Footer heading em, sufijo stats */
  --color-teal-light:  #5ecfbd;   /* Links de stats banner */

  /* ── Tipografía ── */
  --font-sans:   'Inter', sans-serif;
  --font-serif:  'Playfair Display', Georgia, serif;

  /* ── Tamaños de fuente (usar con clamp) ── */
  --text-badge:     11px;   /* Badge / pill label */
  --text-small:     12px;   /* Texto muy pequeño */
  --text-body-sm:   13px;   /* Body pequeño */
  --text-body:      14px;   /* Body estándar */
  --text-body-lg:   15px;   /* Body grande / subtítulos */
  --text-body-xl:   16px;   /* Subtítulos importantes */

  /* ── Contenedor ── */
  --container-max:     1100px;
  --container-pad-h:   32px;   /* Padding horizontal desktop */
  --container-pad-h-sm: 20px; /* Padding horizontal mobile */

  /* ── Espaciados de sección ── */
  --section-pt:  72px;   /* Padding top estándar */
  --section-pb:  80px;   /* Padding bottom estándar */
  --section-gap: 52px;   /* Gap entre heading y contenido */

  /* ── Border radius ── */
  --radius-pill: 999px;  /* Badges / chips */
  --radius-xl:   20px;   /* Cards grandes, banners */
  --radius-lg:   18px;   /* Cards medianas (consultorios, convenios) */
  --radius-md:   16px;   /* Cards pequeñas (porque-item) */
  --radius-sm:   14px;   /* Cards de precios */
  --radius-btn-lg: 12px; /* Botones grandes */
  --radius-btn:    11px; /* Botones estándar */
  --radius-btn-sm: 10px; /* Botones pequeños */

  /* ── Sombras ── */
  --shadow-card:        0 4px 24px rgba(0,37,77,0.07);
  --shadow-card-md:     0 4px 28px rgba(0,37,77,0.08);
  --shadow-card-hover:  0 8px 32px rgba(0,37,77,0.10);
  --shadow-card-lift:   0 14px 40px rgba(0,37,77,0.13);
  --shadow-banner:      0 4px 24px rgba(0,37,77,0.08);
  --shadow-video:       0 8px 40px rgba(0,37,77,0.15);
  --shadow-stats:       0 8px 40px rgba(0,37,77,0.22);

  /* ── Transiciones ── */
  --transition-fast:   0.2s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.3s ease;
  --transition-hover:  0.28s ease;
}