/* ============================================================
   base.css — Sistema visual MediLink DR
   Tokens (color, tipografía, espacio, forma, movimiento), reset
   y tipografía base. Todo lo demás consume estas variables.
   ============================================================ */

:root {
  /* ---------- Color ----------
     El azul es protagonista solo en acciones y detalles; la base es blanca
     y neutra. El cian del logo (--brand) es decorativo: no lleva texto
     blanco encima (contraste 2.96:1). Para botones y enlaces: --blue. */
  --brand: #1FA0DA;          /* cian del logo: iconos, acentos, focus */
  --blue: #0A6FAE;           /* acción: botones, enlaces (5.4:1 sobre blanco) */
  --blue-hover: #085C91;
  --blue-deep: #084B78;
  --blue-50: #F1F7FC;        /* fondos de sección alternos */
  --blue-100: #E3F0FA;       /* fondos de icono, chips */
  --blue-200: #C9E2F4;

  --navy: #0B2A45;           /* titulares y bloque oscuro */
  --navy-900: #071D31;       /* footer */
  --ink: #0B2A45;
  --text: #46566A;           /* texto de párrafo (7:1) */
  --text-soft: #5B6B7E;      /* texto secundario (5.4:1) */
  --on-dark: #FFFFFF;
  --on-dark-soft: #B5CADB;   /* texto secundario sobre navy (8:1) */

  --bg: #FFFFFF;
  --surface: #F6F9FC;
  --line: #E3EAF1;
  --line-strong: #D2DDE8;

  --success: #0B6B4B;
  --success-bg: #E6F5EF;
  --closed: #526173;
  --closed-bg: #EEF2F6;
  --error: #B42335;
  --error-bg: #FCECEE;
  --whatsapp: #0E7A40;       /* verde de WhatsApp oscurecido para texto blanco (5.3:1) */

  /* ---------- Tipografía ---------- */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 4.75rem);
  --fs-h1: clamp(2.3rem, 1.6rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;

  /* ---------- Espacio (escala de 4) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --s-11: 80px; --s-12: 96px; --s-13: 128px;
  --section-y: clamp(72px, 4.5rem + 4vw, 136px);
  --gutter: clamp(20px, 4vw, 40px);
  --container: 1240px;

  /* ---------- Forma ---------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Sombras muy suaves, teñidas de navy (no gris puro) */
  --shadow-xs: 0 1px 2px rgba(11, 42, 69, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 42, 69, 0.04), 0 4px 12px rgba(11, 42, 69, 0.05);
  --shadow-md: 0 2px 4px rgba(11, 42, 69, 0.04), 0 12px 32px rgba(11, 42, 69, 0.08);
  --shadow-lg: 0 4px 8px rgba(11, 42, 69, 0.04), 0 24px 64px rgba(11, 42, 69, 0.12);
  --ring: 0 0 0 3px rgba(31, 160, 218, 0.45);

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);       /* salida suave (entradas, hovers) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 700ms;

  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
/* Lenis (escritorio): el scroll nativo suave se apaga para que no compitan */
html.lenis { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.3; }
p { text-wrap: pretty; }
strong { color: var(--ink); font-weight: 650; }

/* Palabra resaltada en titulares: azul de marca, sin cambiar de familia */
.hl { color: var(--blue); }

.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text); }
.caption { font-size: var(--fs-caption); color: var(--text-soft); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Accesibilidad ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: var(--r-full);
  background: var(--navy);
  color: var(--on-dark);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus-visible { transform: none; }

::selection { background: var(--blue-200); color: var(--navy); }

/* Transición suave entre páginas (Chrome, Edge, Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 200ms ease both; }
::view-transition-new(root) { animation: vt-in 360ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}