/*
  ============================================================
  VARIABLES DE DISEÑO — Clínica Las Torres
  ============================================================
  Paleta oficial: #42B5C4 (principal), #07879A (CTA),
  #071A2A (oscuro premium), #F8FBFC (fondo suave),
  #EEF9FB (acento azul suave), #64748B (texto secundario)
  ============================================================
*/

:root {
  /* ── TIPOGRAFÍA ── */
  --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans:    "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── COLORES PRINCIPALES (formato HSL — requerido por Tailwind) ── */
  --background:          196 38% 98%;   /* #F8FBFC — azul-blanco suave */
  --foreground:          207 71% 10%;   /* #071A2A — azul oscuro premium */

  --primary:             188 91% 32%;   /* #07879A — teal CTA */
  --primary-foreground:    0  0% 100%;  /* blanco puro — texto sobre primary */

  --secondary:           196 30% 93%;   /* tono suave de fondo */
  --secondary-foreground:207 71% 10%;   /* mismo que foreground */

  --muted:               196 30% 93%;   /* igual que secondary */
  --muted-foreground:    215 16% 47%;   /* #64748B — texto secundario */

  --accent:              189 61% 96%;   /* #EEF9FB — azul muy suave */
  --accent-foreground:   207 71% 10%;

  --card:                  0  0% 100%;  /* blanco puro */
  --card-foreground:     207 71% 10%;

  --popover:               0  0% 100%;
  --popover-foreground:  207 71% 10%;

  --border:              196 20% 88%;   /* borde suave azulado */
  --input:               196 20% 88%;
  --ring:                188 91% 32%;   /* mismo que primary */

  --destructive:           0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  /* ── RADIO DE BORDES ── */
  --radius: 0.5rem;

  /* ── SOMBRAS PERSONALIZADAS ── */
  --shadow-cta:         0 8px 28px -6px rgba(7,135,154,0.38), 0 2px 6px -2px rgba(7,135,154,0.18);
  --shadow-cta-hover:   0 14px 40px -6px rgba(7,135,154,0.52), 0 4px 12px -2px rgba(7,135,154,0.26);
  --shadow-card:        0 2px 8px rgba(15,23,42,0.04), 0 12px 36px -6px rgba(15,23,42,0.08);
  --shadow-card-hover:  0 8px 32px -4px rgba(7,135,154,0.18), 0 2px 8px rgba(15,23,42,0.05);
  --shadow-step:        0 8px 28px -6px rgba(7,135,154,0.35);
  --shadow-glass:       0 8px 32px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.92);

  /* ── COLORES LITERALES (para referencias directas) ── */
  --color-primary-hex:     #07879A;
  --color-primary-hover:   #065f6e;
  --color-primary-light:   #42B5C4;
  --color-primary-mid:     #42B5C4;
  --color-whatsapp:        #25D366;
  --color-google-star:     #FBBC04;
  --color-bg-hex:          #F8FBFC;
  --color-fg-hex:          #071A2A;

  /* ── ESPACIADOS BASE ── */
  --section-py:   6rem;
  --section-py-lg: 8rem;
  --container-max: 1400px;
  --container-px:  1.5rem;
}