/* =========================================================
   CLÍNICA DEL CORAZÓN — Design Tokens & Base
   Gómez Palacio, Durango · Cardiología
   ========================================================= */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- 2. Tokens ---------- */
:root {
  /* Marca — azul del logotipo (#02A7E8) */
  --brand:    #02A7E8;
  --brand-dk: #0088C4;
  --blue-950: #04263B;
  --blue-900: #063A5A;
  --blue-800: #084E78;
  --blue-700: #0A6293;
  --blue-600: #0080BF;
  --blue-500: #02A7E8;
  --blue-400: #46BFF0;
  --blue-300: #86D6F6;
  --blue-200: #BCE7FA;
  --blue-100: #E1F4FD;
  --blue-50:  #F2FAFE;

  /* Marca — rojo suave (acento, nunca protagonista) */
  --red-800: #A63741;
  --red-700: #C2444F;
  --red-600: #DC5761;
  --red-500: #E8737C;
  --red-400: #F09AA1;
  --red-100: #FBE3E5;
  --red-50:  #FDF4F5;

  /* Verde WhatsApp */
  --wa-600: #1EA855;
  --wa-700: #17833F;

  /* Neutros */
  --ink:      #062338;
  --ink-80:   #1E3D53;
  --ink-70:   #325061;
  --muted:    #557486;
  --muted-2:  #648394;
  --paper:    #FFFFFF;
  --bone:     #F4F9FC;
  --bone-2:   #E8F3F9;
  --line:     rgba(6, 35, 56, .11);
  --line-2:   rgba(6, 35, 56, .17);
  --line-inv: rgba(255, 255, 255, .14);

  /* Tipografía */
  --font-display: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-eyebrow: .735rem;
  --fs-body:    1rem;
  --fs-lead:    clamp(1.02rem, .95rem + .4vw, 1.2rem);
  --fs-h4:      clamp(1.04rem, .98rem + .3vw, 1.22rem);
  --fs-h3:      clamp(1.28rem, 1.13rem + .62vw, 1.72rem);
  --fs-h2:      clamp(1.82rem, 1.42rem + 1.92vw, 3.05rem);
  --fs-h1:      clamp(2.3rem, 1.66rem + 3.2vw, 4.2rem);

  /* Tracking (DM Sans pide un poco más cerrado que la media) */
  --tr-display: -.038em;
  --tr-h1:      -.052em;
  --tr-h2:      -.046em;
  --tr-h3:      -.04em;
  --tr-h4:      -.032em;
  --tr-body:    -.011em;
  --tr-label:   .13em;

  /* Espaciado */
  --container: 1240px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 8vw, 8.75rem);
  --block-gap: clamp(2rem, 4vw, 4rem);

  /* Radios y sombras */
  --r-xl: 34px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;
  --shadow-soft: 0 2px 4px -2px rgba(6, 58, 90, .07), 0 12px 28px -18px rgba(6, 58, 90, .22);
  --shadow-diffuse: 0 30px 60px -32px rgba(6, 58, 90, .35), 0 4px 14px -8px rgba(6, 58, 90, .12);
  --shadow-lift: 0 40px 80px -38px rgba(6, 58, 90, .45), 0 8px 20px -12px rgba(6, 58, 90, .16);
  --inset-hair: inset 0 1px 0 rgba(255, 255, 255, .65);

  /* Movimiento */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --t-fast: .22s;
  --t-mid: .42s;
  --t-slow: .7s;

  /* Superficies */
  --dot-grid: radial-gradient(circle at center, rgba(6, 35, 56, .085) 1px, transparent 1.4px);
  --dot-grid-inv: radial-gradient(circle at center, rgba(255, 255, 255, .12) 1px, transparent 1.4px);
}

/* ---------- 3. Base ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.64;
  letter-spacing: var(--tr-body);
  color: var(--ink-80);
  background: var(--paper);
  font-weight: 400;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: var(--tr-display);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.16; letter-spacing: var(--tr-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.28; letter-spacing: var(--tr-h4); }

p { max-width: 68ch; }
strong, b { font-weight: 700; color: var(--strong-color, var(--ink)); }

::selection { background: var(--brand); color: #fff; }

/* ---------- 4. Utilidades ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1440px; }
.container--narrow { max-width: 940px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 5.5vw, 5.5rem); }
.section--bone { background: var(--bone); }
.section--ink { background: var(--blue-950); color: rgba(255, 255, 255, .78); --strong-color: #fff; }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 1.05rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}
.eyebrow--blue { color: var(--blue-700); }
.eyebrow--red { color: var(--red-600); }
.eyebrow--light { color: var(--blue-300); }

.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.58; letter-spacing: -.014em; }
.section--ink .lead { color: rgba(255, 255, 255, .72); }

.muted { color: var(--muted); }
.text-red { color: var(--red-600); }
.text-brand { color: var(--brand); }
.text-blue { color: var(--blue-700); }

.section-head { max-width: 760px; margin-bottom: var(--block-gap); }
.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
@media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; align-items: start; } }
.section-head--center { max-width: 640px; margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after {
  content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; flex: none;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -60px; left: 1rem; z-index: 999;
  background: var(--blue-900); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- 5. Reveal (IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .82s var(--ease), transform .82s var(--ease);
  transition-delay: calc(var(--i, 0) * 85ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; }
.reveal--left { transform: translate3d(-28px, 0, 0); }
.reveal--scale { transform: translate3d(0, 22px, 0) scale(.975); }
.reveal--scale.is-visible { transform: translate3d(0, 0, 0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Superficies oscuras: <strong> y encabezados en blanco */
.card--ink,
.cta-band,
.footer,
.marquee,
.equip,
.video-caption,
.doctor__plate,
.mobile-panel__foot .btn--primary { --strong-color: #fff; }