/* ==========================================================================
   Health Support A.R. — base del prototipo v0.2 · Dirección A «Clínica editorial» (P2, 8-oct-2026)
   Blanco + gris mineral · Nunito Sans variable (300 display, 700 énfasis, 200 cifras) ·
   esquinas de 2 px, filetes, botones rectangulares · el cian como único gesto gráfico.
   ========================================================================== */

:root {
  /* Paleta por roles */
  --navy: #0B2545;          /* texto, titulares, pie */
  --muted: #4A5A73;         /* texto secundario (7,0:1 sobre blanco) */
  --mineral: #EEF2F1;       /* capítulos (respaldo) */
  --vino: #900733;          /* única acción: CTA (blanco 9,3:1) */
  --vino-h: #7A062B;
  --cian: #00B7E1;          /* gesto gráfico: filete de la credencial y marcas. Nunca texto sobre blanco */
  --cian-prof: #0079A6;     /* enlaces sobre blanco (4,9:1) */
  --linea: rgba(11, 37, 69, .16);
  --sobre-oscuro: #B9C7D8;  /* texto secundario sobre azul marino */
  --wa: #128C7E;            /* única excepción: botón de WhatsApp */

  /* Tipografía (Nunito Sans variable: peso 200–1000, ancho 75–125 %) */
  --t-display: clamp(44px, 5.3vw, 80px);
  --t-h2: clamp(36px, 3.9vw, 58px);
  --t-h3: clamp(26px, 2.6vw, 40px);
  --t-cifra: clamp(64px, 6vw, 96px);
  --t-monumental: clamp(120px, 15vw, 232px);

  /* Espacio y forma */
  --cont: 1320px; --gutter: 40px; --header-h: 84px;
  --seccion: 136px;
  --radio: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
@media (max-width: 900px) { :root { --gutter: 20px; --header-h: 64px; --seccion: 88px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
body { margin: 0; font-family: 'Nunito Sans', system-ui, sans-serif; font-optical-sizing: auto; font-size: 18px; line-height: 1.6; color: var(--navy); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@media (max-width: 767px) { body { font-size: 17px; } }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cian-prof); outline-offset: 3px; }
.contenedor { width: 100%; max-width: var(--cont); margin-inline: auto; padding-inline: var(--gutter); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--gutter); top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }

/* ---------- Tipografía ---------- */
.display { margin: 0 0 32px; font-size: var(--t-display); font-weight: 300; line-height: 1.02; letter-spacing: -.032em; text-wrap: balance; }
.h2 { margin: 0; font-size: var(--t-h2); font-weight: 300; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.display em, .h2 em, .h3 em { font-style: normal; font-weight: 700; }
.h3 { margin: 0; font-size: var(--t-h3); font-weight: 300; line-height: 1.12; letter-spacing: -.02em; }
.lead { margin: 0; max-width: 44ch; font-size: 20px; line-height: 1.55; color: var(--muted); }
.etiqueta { margin: 0 0 20px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 767px) { .lead { font-size: 18px; } }

/* ---------- Botones y enlaces ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 0; border-radius: var(--radio); background: var(--vino); color: #fff; font: 700 16px/1 'Nunito Sans', sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease); }
.btn:hover { background: var(--vino-h); }
.enlace { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-weight: 700; font-size: 16px; text-decoration: none; transition: color .2s var(--ease); }
.enlace:hover { color: var(--cian-prof); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.ico { display: inline-flex; flex: none; width: 20px; height: 20px; }
.ico svg { width: 100%; height: 100%; }

/* ---------- Encabezado (el logo solo vive sobre blanco) ---------- */
.hs-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--linea); transition: box-shadow .2s var(--ease); }
.hs-header.is-compacto { box-shadow: 0 6px 18px rgba(11, 37, 69, .06); }
.hs-header__fila { display: flex; align-items: center; gap: 40px; height: var(--header-h); transition: height .2s var(--ease); }
.hs-header.is-compacto .hs-header__fila { height: 68px; }
.hs-header__logo img { height: 44px; width: auto; transition: height .2s var(--ease); }
.hs-header.is-compacto .hs-header__logo img { height: 38px; }
.hs-nav { margin-left: auto; }
.hs-nav ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.hs-nav a { display: flex; flex-direction: column; line-height: 1.25; text-decoration: none; padding: 6px 0; }
.hs-nav b { font-size: 15px; font-weight: 700; }
.hs-nav small { font-size: 12.5px; color: var(--muted); }
.hs-header.is-compacto .hs-nav small { display: none; }
.hs-nav a:hover b { color: var(--cian-prof); }
.hs-menu-btn { display: none; margin-left: auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--navy); border-radius: var(--radio); background: #fff; color: var(--navy); font: 700 15px 'Nunito Sans', sans-serif; cursor: pointer; }
@media (max-width: 1140px) { .hs-nav, .hs-header__cta { display: none; } .hs-menu-btn { display: inline-flex; } }
@media (max-width: 767px) { .hs-header__logo img { height: 34px; } .hs-header.is-compacto .hs-header__logo img { height: 32px; } .hs-header.is-compacto .hs-header__fila { height: 60px; } }

/* ---------- Menú móvil ---------- */
.menu-movil { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: 18px var(--gutter) 28px; overflow-y: auto; background: #fff; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; }
.menu-movil.is-abierto { visibility: visible; opacity: 1; transform: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.menu-movil__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.menu-movil__cab img { height: 34px; width: auto; }
.menu-movil__lista { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--navy); }
.menu-movil__lista a { display: block; padding: 16px 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.menu-movil__lista b { display: block; font-size: 26px; font-weight: 300; letter-spacing: -.01em; }
.menu-movil__lista small { display: block; font-size: 15px; color: var(--muted); }

/* ---------- Pie (design.md §8 · sello Vigilado Supersalud, numeral 1.2.3.4) ---------- */
.pie__marca { background: #fff; padding: 36px 0; border-top: 1px solid var(--linea); }
.pie__marca-fila { display: flex; align-items: center; gap: 72px; flex-wrap: wrap; }
.pie__sello { display: block; padding: 10px; margin: -10px; }
.pie__sello img { width: 190px; height: auto; }
.pie__hs { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.pie__hs img { height: 42px; width: auto; }
.pie__hs p { margin: 0; max-width: 36ch; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.pie__hs strong { color: var(--navy); }
.pie__cuerpo { background: var(--navy); color: #fff; padding: 72px 0 40px; }
.pie__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 64px; }
.pie__cols h2 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(230, 247, 252, .22); font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--sobre-oscuro); }
.pie__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie__cols a, .pie__cols li { color: #E6F7FC; text-decoration: none; font-size: 15.5px; }
.pie__cols a:hover { color: #fff; text-decoration: underline; }
/* Créditos estándar Sainet (19-oct-2026): una sola línea centrada, último elemento del pie; el aire a ambos lados deja
   libre el WhatsApp flotante y mantiene el centrado. El corazón tiene caja de 1em: ♥ en el prototipo, fas fa-heart en WP. */
.pie__legal { display: flex; justify-content: center; text-align: center; padding: 22px 84px 0; border-top: 1px solid rgba(230, 247, 252, .18); font-size: 14px; color: var(--sobre-oscuro); }
.pie__creditos { margin: 0; }
.pie__corazon { display: inline-block; width: 1em; text-align: center; color: var(--cian); }
/* Font Awesome (WP) trae line-height: 1 en su `font` y otras métricas de fuente: dos clases para que la caja herede el
   interlineado y se alinee arriba (alineada a la línea base, la glifa de FA estiraba la línea 1 px) */
.pie__creditos .pie__corazon { line-height: inherit; vertical-align: top; }
.pie__legal a { color: #fff; font-weight: 700; }
:where(.pie__cuerpo, .cierre) :focus-visible { outline-color: var(--cian); }
@media (max-width: 991px) { .pie__cols { grid-template-columns: 1fr 1fr; } .pie__hs { margin-left: 0; } }
@media (max-width: 767px) { .pie__cols { grid-template-columns: 1fr; } .pie__sello img { width: 160px; } .pie__legal { padding-right: 0; padding-left: 0; padding-bottom: 72px; } }

/* ---------- WhatsApp flotante (Joinchat): aparece cuando el WhatsApp del hero sale de la vista ---------- */
.wa-flotante { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 8px 22px rgba(11, 37, 69, .22); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.wa-flotante .ico { width: 30px; height: 30px; }
.wa-flotante:hover { transform: translateY(-2px); }
.js .wa-flotante.is-oculto { opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; }
@media (max-width: 767px) { .wa-flotante { right: 14px; bottom: 14px; width: 54px; height: 54px; } }

/* ---------- Movimiento: estados iniciales solo con JS y sin reduced-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revela], .js [data-grupo] > [data-item] { opacity: 0; transform: translateY(22px); }
}

/* ---------- Pantallas táctiles (auditoría móvil v1.0, 19-oct-2026): objetivos de ~44 px (WCAG 2.5.8 pide ≥ 24) ----------
   Solo con puntero grueso: en escritorio con ratón nada cambia. En el pie los enlaces pasan a bloque y el aire
   lo pone el propio enlace; en filas sueltas, relleno con margen negativo para no mover el diseño. */
@media (pointer: coarse) {
  .hs-nav a { padding-block: 12px; }
  .pie__cols ul { gap: 0; }
  .pie__cols a { display: block; padding-block: 11px; }
  .pie__legal a { display: inline-block; padding-block: 11px; margin-block: -11px; }
}