/* Tokens de marca - Dra. Carolina Yi.
   Fuente de verdad: manual-marca.md. Idénticos al export de Claude Design.
   Estas variables las consume tanto el CSS propio como la config de Tailwind (theme.js). */
:root {
  /* Identidad (heredados del logo) */
  --color-green: #A5C98E;
  --color-green-deep: #6E8F58;
  --color-purple: #965B9E;
  --color-action: #73447B; /* purple-deep: EXCLUSIVO para CTAs / acción principal */
  --color-warm: #E9A178; /* acento cálido durazno, uso muy puntual */

  /* Base (neutros cálidos) */
  --color-bg: #FAF8F7;
  --color-surface: #FFFFFF;
  --color-border: #E8E3E6;
  --color-fg: #2B2630;
  --color-muted: #6B6570;
  --color-inverse: #FFFFFF;

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Escala modular: base 16px, ratio 1.250 */
  --text-xs: 0.8rem;
  --text-sm: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.563rem;
  --text-xl: 1.938rem;
  --text-2xl: 2.438rem;

  /* Espaciado base 8pt */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  /* Geometría: radios suaves (salud/pediatría) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --content-max: 720px;
  --touch-min: 44px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  /* Evita cualquier scroll horizontal accidental en móvil. */
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 600; }

/* Asegura el mínimo táctil del manual (44px) en cualquier elemento interactivo marcado. */
.tap { min-height: var(--touch-min); min-width: var(--touch-min); }

/* Gradiente cálido del hero, derivado de la paleta de marca (no es color plano grande:
   el manual reserva verde/morado para detalle, así que se usa muy sutil). */
.hero-grad {
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(165, 201, 142, 0.18), transparent 60%),
    radial-gradient(55% 60% at 10% 90%, rgba(150, 91, 158, 0.12), transparent 55%),
    var(--color-bg);
}