/* =====================================================================
   home.css — estilos page-scoped del home nuevo (Doco style library).

   Solo lo que los parciales de landings/principal/ds/ necesitan y que NO
   existe ya en los componentes del bundle: el drawer móvil (offcanvas de
   Bootstrap) y los dropdowns del nav.

   Reglas del sistema: selectores con clase (nunca elementos sueltos),
   valores vía var(--token) de tokens.css, breakpoints en 767.98px /
   991.98px. Se enlaza SOLO desde páginas que extienden base_ds.html
   (en su block extra_css), después del bundle.
   ===================================================================== */

/* --- Contención de gutters de Bootstrap (root fix) ---
   Las filas .row.g-5 de docoweb usan gutters de 48px, que Bootstrap implementa
   con márgenes negativos de -24px en la fila. El .container del DS solo tiene
   12px de padding lateral, así que esos -24px sobresalen 12px y provocan scroll
   horizontal en cualquier viewport donde el container toca los bordes (<1200px).
   En vez de bajar el gutter por fila (perdíamos la fidelidad de 48px en tablet),
   recortamos el pequeño desborde a nivel de sección: overflow-x: clip corta lo
   que sale por los lados SIN crear un scroll-container (no afecta position:
   sticky ni el scroll vertical, a diferencia de overflow: hidden). Así g-5
   rinde 48px de gutter en TODOS los anchos ≥768px, igual que docoweb, y la
   página nunca hace scroll lateral. Se aplica a las tres bandas: cada sección
   y el footer son wrappers full-bleed, el recorte cae fuera del contenido. */
/* overflow-x: clip contiene los gutters negativos de g-5 (ver comentario largo
   abajo). El hero se incluye porque .section--hero NO es .home-section y también
   usa filas con gutter; sin clip volvería el scroll lateral. */
.home-section,
.section--hero,
.site-footer { overflow-x: clip; }

/* --- Ritmo vertical del home. Override scoped: section.css queda intacto.
   ESCRITORIO: whitespace generoso (6rem/space-7) para que la página respire en
   un scroll ancho — un scroll de web pide más aire que una escala de deck, y
   como quitamos los hairlines entre secciones, el espacio es AHORA el único
   separador, así que tiene que hacer bien ese trabajo. MÓVIL: apretado
   (space-5) para no alargar el scroll en pantalla chica.
   OJO: home.css se carga DESPUÉS de section.css, así que estas reglas sin
   media query también ganarían en móvil y pisarían el ritmo de section.css.
   Por eso repetimos abajo el bloque móvil (space-5/6) para conservarlo. */
.home-section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.section--hero {
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}
@media (max-width: 767.98px) {
  .home-section {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .section--hero {
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
  }
}

/* =====================================================================
   Capa de calidez de marca (BRAND_DOCOKIDS.md) — con moderación.
   La base sigue siendo editorial; esto es un toque suave, NO un rediseño.
   ===================================================================== */

/* --- Acento de marca "marcador teal v2" (paridad con /welcome-ds/, jul 2026):
   UNA frase clave por titular, resaltada como con subrayador (highlighter) en
   vez de texto teal. .ds-accent es el genérico para los h2; .ds-accent-real se
   reserva para la frase bandera "pediatra real" (hero + cta-band), que además
   NUNCA se parte de línea (&nbsp; en el markup). Por qué marcador y no color de
   texto: Clarity mostraba taps en los glifos teal (texto de color dentro de la
   prosa = link para el usuario) → rage clicks. El marcador lee como énfasis, no
   como acción; el teal-relleno queda reservado a lo tocable (botones). El
   gradiente pinta SOLO la mitad inferior de la línea (corte al 55%) y SIN
   padding, para no engordar las palabras ni romper el wrap del H1;
   box-decoration-break: clone repite el brochazo si la frase se parte en varias
   líneas. Contraste del texto: pasa de ~2.4:1 (teal sobre blanco, reprobado en
   WCAG) a ~16:1. Mismo patrón que ds/components/welcome-landing.css. Color del
   brochazo: CSS no admite rgba(var(--hex)), así que la primera declaración es el
   literal rgba(24,179,175,.35) = --p-verde al 35% (fallback) y la segunda lo
   re-expresa con color-mix DESDE el token (mejora progresiva). */
.ds-accent,
.ds-accent-real {
  color: var(--gris-oscuro);
  background: linear-gradient(transparent 55%, rgba(24, 179, 175, 0.35) 55%);
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--p-verde) 35%, transparent) 55%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Insignia RECOMENDADO: override de marca — pill rosa (BRAND_DOCOKIDS.md);
   subir a docoweb después. NO se edita ds/components/pricing.css (componente
   compartido intacto); este override scoped documenta la decisión y es
   reversible. El borde teal de la tarjeta recomendada se conserva (on-brand). */
.pricing-card__eyebrow.ds-badge-recomendado {
  display: inline-block;
  background-color: var(--p-rosado);
  color: var(--paper-pure);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;      /* pill */
  letter-spacing: 0.08em;    /* un pelín menos que el eyebrow suelto, cabe en la pill */
}

/* --- Anatomía de tarjeta de precio (BRAND_DOCOKIDS.md "Tarjeta de precio").
   Overrides scoped en home.css; ds/components/pricing.css queda intacto.

   Hairline divisoria entre el bloque precio/lead y las features (como el deck).
   La lista trae margin/padding 0 del componente; aquí le ponemos el borde
   superior + un padding-top consistente para que lea como un divisor editorial
   limpio. Se ve igual en la tarjeta estándar y en la recomendada. */
.pricing-card__features {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-4);
}

/* Footer de la tarjeta en itálica (como el deck). En la recomendada, teal. */
.pricing-card__guarantee { font-style: italic; }
.pricing-card--popular .pricing-card__guarantee { color: var(--p-verde); }

/* --- Alinear el bloque CTA (botón + nota) al fondo de las 3 tarjetas.
   Las tarjetas ya son de igual altura (grid). El problema: la lista de features
   trae flex:1 en el componente, así absorbe TODO el espacio libre y el
   margin-top:auto del .pricing-card__cta se queda en 0 → el botón queda justo
   debajo de las features y, como cada tarjeta tiene distinto nº de features,
   los botones caen a alturas distintas. Solución scoped: quitamos el flex:1 de
   las features (que se dimensionen a su contenido) y devolvemos el empuje al
   bloque CTA con margin-top:auto → botón Y nota bajan juntos al fondo y las 3
   tarjetas alinean botones entre sí y notas entre sí. */
.pricing-card__features { flex: 0 0 auto; }
.pricing-card__cta { margin-top: auto; }

/* Aire entre el botón y la nota "*Pago único" / "*Renovación…": sin esto la
   nota queda pegada al botón. Separación deliberada (~16px). */
.pricing-card__guarantee { margin-top: var(--space-3); }

/* La nota "*Pago único" es 1 línea; "*Renovación… — cancela cuando quieras" son
   2. Sin reservar altura, la tarjeta de pago único tiene un bloque CTA una línea
   más corto → su botón cae más abajo que los otros dos. Reservamos 2 líneas de
   la propia nota (line-height 1.5 × --fs-small, ×2) para que las 3 notas ocupen
   lo mismo y así los botones Y las notas queden alineados entre las 3 tarjetas.
   Derivado (no un px suelto): si cambia el tamaño/interlineado, sigue cuadrando. */
.pricing-card__guarantee { min-height: calc(2 * 1.5 * var(--fs-small)); }

/* --- Marcador de features: "+" rosa (como el deck consumer de Nati) en vez del
   em-dash del componente. El "+" lee como "incluido/lo sumas" y amarra con el
   rol del rosa en la marca. Override scoped; pricing.css intacto. */
.pricing-card__features li::before {
  content: "+";
  color: var(--p-rosado);
  font-weight: 700;
}

/* --- Banda de prueba (prueba de 6h): off-ramp para el indeciso, DEBAJO de los 3
   planes. Jerarquía DELIBERADAMENTE menor que la grilla para no competir con el
   CTA ni reanclar barato: borde punteado, fondo apenas gris, botón atenuado y el
   precio en tono caption. El único acento fuerte sigue siendo "Empieza ya". */
.pricing-trial-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--gris-claro);
}
.pricing-trial-band__lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--gris-oscuro);
  margin: 0;
}
/* Precio en tono caption (gris, pequeño): NO precio-héroe, para no reanclar barato. */
.pricing-trial-band__meta {
  font-size: var(--fs-small);
  color: var(--gris-secundario);
  margin: var(--space-1) 0 0;
}
.pricing-trial-band__cta { flex: 0 0 auto; margin: 0; }
/* Botón atenuado (gris), nunca teal. */
.pricing-trial-band .btn-outline {
  border-color: var(--hairline);
  color: var(--gris-secundario);
}
/* Hover: se MANTIENE outline (solo vira gris→teal). El .btn-outline base rellena
   el fondo teal con texto blanco; aquí lo dejamos transparente para que el texto
   siga legible (evita teal sobre teal) y para no competir con "Empieza ya". */
.pricing-trial-band .btn-outline:hover,
.pricing-trial-band .btn-outline:focus,
.pricing-trial-band .btn-outline:active {
  background-color: transparent;
  border-color: var(--p-verde);
  color: var(--p-verde);
}
/* --- Banda de prueba: el botón NO puede quedar angosto y pegado al filo
   derecho del contenedor, porque ahí vive la burbuja de Soporte ---
   La burbuja es position:fixed abajo a la derecha (welcome-support-float.css),
   así que NO sirve moverla de altura: el botón viaja con el scroll y tarde o
   temprano cruza la franja vertical donde está la burbuja. Lo único que
   despega de verdad es la geometría HORIZONTAL. De ahí las dos reglas de abajo
   (teléfono: ancho completo; de tableta arriba: carril reservado).

   MEDIDO en navegador con el botón de 111.48px que había antes ("Empezar",
   plan de 6h — el cuarto botón que paga del home), con la burbuja en el estado
   que produce el observer dentro de #planes:
       600px  → 43px de solape = 38.6 % del ancho (35.4 % del ÁREA por hit-test)
       768px y 900px → 27px = 24.2 %
       992px y 1024px → 90.05px = 80.8 % (59 % del área)
       1200px → 60.05px = 53.9 %   ·   1280px → 20.05px = 18.0 %
       1320px en adelante → 0
   Un clic en ese filo abría WhatsApp en vez del checkout. */

/* Teléfono (≤767.98px): la banda se apila y el botón va a ANCHO COMPLETO,
   igual que los tres botones de la grilla en esta franja. El corte era
   575.98px y sube a 767.98px: con el botón ancho el solape se queda en el FILO
   derecho y el texto del botón queda libre — es el MISMO costo ya aceptado
   para las tarjetas (ver el bloque de la burbuja colapsada, más abajo). Medido
   después del cambio, siempre 43px de solape porque la burbuja colapsada no
   cambia de tamaño, pero sobre un botón mucho más ancho: 43px de 301 = 14.3 %
   en 375px · 43px de 526 = 8.2 % en 600px · 43px de 693 = 6.2 % en 767px (por
   hit-test: 13.3 %, 7.1 % y 5.8 % del área). Los botones de las tarjetas en
   esos mismos anchos ceden 16.1 %, 9.4 % y 5.8 %, o sea que la banda queda
   igual o mejor que lo ya aceptado.
   Por qué NO sube hasta 991.98px (que es donde la grilla sigue apilada): de
   768px arriba .pricing-grid queda capada a var(--measure-narrow) (720px,
   pricing.css:20) y la banda NO, así que el botón de ancho completo rendía
   826px en 900px contra los 686px de los botones de las tarjetas — el CTA más
   ancho de la sección siendo el de menor jerarquía. De 768px arriba se usa el
   carril reservado (abajo), que no toca el ancho del botón. */
@media (max-width: 767.98px) {
  .pricing-trial-band { flex-direction: column; align-items: stretch; }
  .pricing-trial-band .btn-outline { width: 100%; }
}
/* El centrado se queda SOLO en teléfono chico, como estaba aprobado. */
@media (max-width: 575.98px) {
  .pricing-trial-band { text-align: center; }
}

/* De tableta arriba (≥768px): la banda sigue siendo una fila con el botón
   angosto a la derecha (jerarquía menor, decisión de panel), así que en vez de
   ensanchar el botón se le RESERVA UN CARRIL a la burbuja dentro de la banda.

   La cuenta, para poder auditarla sin abrir el navegador. La burbuja se mide
   desde el filo derecho del VIEWPORT (es fixed):
     var(--space-3)                → su right (welcome-support-float.css:16) = 16px
     --home-bubble-w               → su ancho (cambia con el estado, ver abajo)
     var(--space-3)                → respiro entre el filo del botón y la
                                     burbuja; también absorbe que 100vw INCLUYE
                                     la barra de scroll clásica (~15px), que si
                                     no haría el descuento de abajo un poco más
                                     grande de lo real
   Ese carril se descuenta del aire que el contenedor ya deja a la derecha:
   .container tiene max-width var(--measure-content) (1140px, base.css:96-100) y
   va centrado, así que de 1140px arriba cada lado regala (100vw − 1140px) / 2.
   El max() externo es el que apaga la regla sola: cuando el contenedor ya está
   lo bastante lejos del filo (≈1396px arriba), el padding vuelve al
   var(--space-4) del componente y la banda se ve idéntica a antes. Los 12px de
   padding propios de .container NO se descuentan a propósito: son holgura
   extra a favor.

   Resultado medido (hueco entre el filo del botón y la burbuja, donde antes
   había solape): 29px en 768, 900 y 991px · 37.95px en 992, 1024, 1200, 1280 y
   1320px · 59.95px en 1440px, donde la regla ya se apagó. La copia no se
   aprieta: en 992px sigue en UN renglón con 591.8px de ancho.

   Degradación: si un navegador viejo no entiende max() (existe desde Chrome 79
   / Safari 11.1 / Firefox 75), ignora la declaración completa y la banda se
   queda con el padding del componente — o sea, vuelve al comportamiento de
   antes, sin romper nada de layout.

   OJO con el ancho de la burbuja en 768-991.98px: son 48px porque ahí el
   observer la COLAPSA sobre #planes. En el camino degradado sin
   IntersectionObserver (el JS revela la burbuja a ciegas y nunca pone
   .is-collapsed, ver index_ds.html) queda expandida y el carril se queda corto
   ~30px. Se acepta: en ese camino la burbuja también flota sobre los botones de
   ancho completo de las tarjetas, y el texto del botón sigue libre. */
@media (min-width: 768px) {
  .pricing-trial-band {
    /* Colapsada = 16 de padding + 16 del svg + 16 de padding (gap 0). */
    --home-bubble-w: 48px;
    --home-bubble-keepout: calc(var(--space-3) + var(--home-bubble-w) + var(--space-3));
    padding-right: max(
      var(--space-4),
      calc(var(--home-bubble-keepout) - max(0px, (100vw - var(--measure-content)) / 2))
    );
  }
}
@media (min-width: 992px) {
  /* De 992px arriba la burbuja NUNCA se colapsa ni se oculta (ver su bloque más
     abajo), así que el carril se calcula con la píldora COMPLETA: medida en
     111.05px y redondeada a 120 porque depende del ancho del texto "Soporte" y
     de la fuente que alcance a cargar. Solo cambia la variable: la fórmula del
     padding es la misma de arriba. */
  .pricing-trial-band { --home-bubble-w: 120px; }
}

/* --- Planes: gap párrafo→tarjetas = 56px, igual que pediatras. Pediatras lo
   hereda del gutter g-5 (48px de padding de columna + 8px del mt-2); el
   pricing-grid es CSS grid y no tiene ese padding, así que el gap va explícito. */
.pricing-grid { margin-top: 3.5rem; }

/* --- Gap título→contenido consistente (56px) en las secciones con grid CSS.
   Las secciones con fila Bootstrap (pasos g-4, testimonios g-4) ya dan 56px
   por el padding del gutter; los grids CSS (beneficios, FAQ) se quedaban en
   32px. El h2 aporta 24px (mb-4) + estos 32px = 56px, igual que las filas. */
.value-props-grid,
.faq { margin-top: 2rem; }

/* --- Cierre (cta-band): sin borde superior. El deck separa bandas con
   whitespace, no con líneas ("hairlines de más"). El borde propio del
   componente cta-band.css se anula aquí (scoped, componente intacto). */
.cta-band { border-top: 0; }

/* --- Bandas de prueba social (prensa bajo el hero + empresas junto a B2B).
   Son STRIPS quietos, no secciones: menos padding vertical que .home-section,
   sin h2 display (solo el kicker rosa las rotula). Los logos van en .logo-row
   / .logo (logos.css: grises que colorean al hover). overflow-x: clip para que
   la fila de logos NUNCA cause scroll lateral al envolver en móvil. */
.ds-proof-band {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  overflow-x: clip;
}
@media (max-width: 767.98px) {
  .ds-proof-band {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
}
/* Etiqueta "Con el apoyo de" sobre la fila de backers institucionales: caption
   quieto en gris (NO el kicker rosa de la banda), para distinguir los backers
   de la prensa. El margin-top separa la fila de backers de los logos de prensa. */
.ds-proof-band__label {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--gris);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--space-5) 0 var(--space-3) 0;
}

/* --- Pediatras: bio INLINE recortada a altura pareja (decisión de panel:
   Copywriter/Rams/Marketing/Editorial). La bio vive en la tarjeta (ya no en un
   modal); line-clamp la recorta por LÍNEAS visuales reales — no por palabras —
   así las 3 tarjetas miden idéntico sin importar el largo de cada bio (que viene
   libre de la BD). min-height reserva el alto también para las bios cortas, para
   que los pies queden alineados. En el template va con |striptags porque
   description es RichText/HTML (truncar el HTML crudo rompería las etiquetas). */
.doctor__bio {
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(4 * 1.6em);
}
@media (max-width: 767.98px) {
  /* En móvil las tarjetas ya se apilan; suelta el clamp para leer la bio entera. */
  .doctor__bio {
    -webkit-line-clamp: unset;
    overflow: visible;
    min-height: 0;
  }
}

/* --- Planes: estado vacío (sin precios para el país) ---
   Bloque full-width (fuera de .pricing-grid), texto a tamaño lead/body, con
   una salida real (WhatsApp / contacto) porque refrescar no trae precios. */
.ds-planes-empty {
  max-width: var(--measure-narrow);
  margin-top: var(--space-5);
}
.ds-planes-empty p { color: var(--gris-secundario); margin: 0 0 var(--space-3); }
.ds-planes-empty .btn { margin-top: var(--space-2); }
.ds-planes-empty__alt { margin-left: var(--space-3); }

/* --- Planes: el aviso de renovación automática sube de --fs-caption (12px, la
   letra más chica) a --fs-small (14px). Un aviso de pago recurrente NO debe ir
   en la letra más chica: en 12px se lee como letra chica engañosa. */
.pricing-fine { font-size: var(--fs-small); }

/* --- Planes: la nota fina (.pricing-fine) trae un link real ("cancelarla en
   cualquier momento"). Sin esto queda en #666 igual que el texto y no se lee
   como link. Subrayado + color de acción para que se note que es clickeable. */
.pricing-fine a {
  color: var(--gris-secundario);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pricing-fine a:hover,
.pricing-fine a:focus { color: var(--p-verde); }

/* --- .btn-link: el componente traía DOS subrayados (text-decoration: underline
   pegado al texto + un border-bottom hairline más abajo) = doble línea. Dejamos
   solo el hairline editorial y quitamos el text-decoration. (Bug del componente
   button.css de docoweb: subir el fix upstream.) */
.btn-link { text-decoration: none; }

/* --- Hero CTAs: el flex estiraba el .btn-link a la altura del botón (47px), así
   que el hairline (border-bottom) quedaba pegado al fondo de la caja, ~27px
   DEBAJO del texto = subrayado despegado. Centrando los CTAs el link vuelve a su
   altura de contenido y la línea le queda pegada al texto. */
.hero-ctas { align-items: center; }

/* --- Botones edge-to-edge en móvil (paridad con el welcome-ds y con la propia
   banda de prueba del home, que ya iba full-width en ≤767.98px). El hero se
   apila (col-lg → 1 columna <992px) y la grilla de planes colapsa a 1 columna
   (pricing.css, ≤991.98px): apilados, sus botones deben llenar el ancho como el
   resto. Sin esto quedaban a ancho automático (angostos y centrados) mientras la
   banda de prueba ya iba edge-to-edge → se veía inconsistente. Se usa el MISMO
   991.98px del colapso de la grilla para que hero y tarjetas cambien a la vez.
   El .btn-link ("Ver cómo funciona") se centra (no es botón, es enlace). */
@media (max-width: 991.98px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas .btn-link { text-align: center; }
  .pricing-card__cta .btn { display: block; width: 100%; }
}

/* --- Barra CTA fija: oculta mientras el hero O #planes están a la vista (ver
   los dos IntersectionObserver en index_ds.html). transform en vez de display
   para no pelear con la media query de sticky-cta.css que ya la esconde en
   desktop, y para poder animar el deslizamiento.

   visibility:hidden es OBLIGATORIO, no decorativo: transform SOLO desplaza la
   caja. Sin él, el enlace "Habla con un pediatra" seguía en el árbol de
   accesibilidad y en el orden de tabulación estando fuera de pantalla — quien
   navega con Tab sobre la grilla de precios caía en un botón invisible, con el
   anillo de foco fuera de la ventana (WCAG 2.4.3 Focus Order y 2.4.7 Focus
   Visible). pointer-events solo tapa el ratón, no el teclado.
   La transición incluye visibility para que la salida siga deslizándose
   (visibility no interpola, se aplica al final del transform). */
@media (max-width: 767.98px) {
  .sticky-cta { transition: transform 200ms ease, visibility 200ms ease; }
  .sticky-cta--hidden {
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
  }
}

/* --- Nav responsivo: el nav de 6 ítems + login + CTA necesita ~1087px para caber
   en una fila; abajo de eso se amontona (links a 2 filas, "Empieza ya" partido).
   Colapsamos al drawer bajo 1200px (xl); nav.css solo lo oculta bajo 768px, aquí
   extendemos el corte. Las utilities d-xl-* del markup mueven login/dropdown a la
   hamburguesa en el mismo rango. */
@media (max-width: 1199.98px) {
  .site-nav .nav-links { display: none; }
}

/* --- Nav: botón hamburguesa (visible <1200px vía la utility d-xl-none) --- */
.ds-nav-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: var(--space-1);
  color: var(--gris-secundario);
  cursor: pointer;
  transition: color 150ms ease;
}
.ds-nav-toggle:hover,
.ds-nav-toggle:focus { color: var(--p-verde); }

/* --- Nav: saludo del usuario autenticado (desktop) ---
   Mismo look que .nav-login para que el cluster derecho se vea uniforme. */
.ds-nav-user-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--gris-secundario);
  cursor: pointer;
  transition: color 150ms ease;
}
.ds-nav-user-btn:hover,
.ds-nav-user-btn:focus { color: var(--p-verde); }

/* Avatar de inicial (círculo teal) del menú de cuenta: da anclaje visual de
   "estás dentro" sin foto que gestionar. Con nombre = inicial; sin nombre =
   ícono genérico de persona (el color no cambia en hover, solo el texto). */
.ds-nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: var(--space-2);
  background: var(--p-verde);
  color: var(--paper-pure);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1;
}

/* --- Nav: toggle de los dropdowns (Soluciones/Recursos) con look de link ---
   Mismo tratamiento que .nav-links a y .ds-nav-user-btn: un <button> que no se
   distingue de los links de texto. La flecha ▾ la pone Bootstrap (.dropdown-toggle::after),
   hereda el color y también vira a teal en hover/abierto. */
.nav-links .nav-dropdown-toggle {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--gris-secundario);
  cursor: pointer;
  transition: color 150ms ease;
}
.nav-links .nav-dropdown-toggle:hover,
.nav-links .nav-dropdown-toggle:focus,
.nav-links .nav-dropdown-toggle[aria-expanded="true"] { color: var(--p-verde); }

/* --- Dropdowns del nav (Soluciones, Recursos y cuenta): tipografía y colores del sistema --- */
.site-nav .dropdown-menu {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  border: 1px solid var(--hairline);
  border-radius: 4px; /* mismo radio literal que usa .btn en components/button.css */
}
.site-nav .dropdown-item {
  color: var(--gris-secundario);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
  color: var(--p-verde);
  background-color: var(--gris-claro);
}

/* --- Drawer móvil (offcanvas de Bootstrap) --- */
.ds-nav-drawer {
  /* Variable propia de Bootstrap: su default (400px) desborda un viewport
     de 375px. No existe token de ancho, por eso el literal. */
  --bs-offcanvas-width: min(320px, 85vw);
}
.ds-nav-drawer .offcanvas-header {
  border-bottom: 1px solid var(--hairline);
}
.ds-drawer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ds-drawer-links a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--gris-secundario);
  display: block; /* toda la fila es área de tap */
  transition: color 150ms ease;
}
.ds-drawer-links a:hover,
.ds-drawer-links a:focus { color: var(--p-verde); }

/* El <span data-bs-dismiss> debe llenar el <a> completo: si el tap cae fuera
   del span, el drawer no se cerraría (ver comentario en _nav.html). */
.ds-drawer-links .ds-drawer-dismiss { display: block; }

/* Sub-encabezado de grupo en el drawer (Familias / Soluciones / Recursos): eyebrow
   discreto en mayúsculas para separar audiencias sin gritar. */
.ds-drawer-heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gris);
  margin: var(--space-4) 0 var(--space-2);
}
.ds-drawer-heading:first-child { margin-top: 0; }
/* Espacio entre un grupo y el siguiente sub-encabezado (los <ul> no traen margen). */
.ds-drawer-links + .ds-drawer-heading { margin-top: var(--space-4); }

/* Link de utilidad al fondo del drawer (reclutamiento): más pequeño = secundario. */
.ds-drawer-utility { margin-top: var(--space-3); }
.ds-drawer-utility a { font-size: var(--fs-small); color: var(--gris); }

.ds-drawer-divider {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-4) 0;
  opacity: 1;
}
.ds-drawer-user {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--gris-oscuro);
  margin: 0 0 var(--space-3);
}

/* CTA fijado al fondo del drawer: va después de .offcanvas-body (que crece
   y scrollea), así que queda pegado abajo sin position ni JS. */
.ds-drawer-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.ds-drawer-footer .ds-drawer-cta { display: block; }
.ds-drawer-footer .btn {
  display: block;
  width: 100%;
  text-align: center;
}

/* =====================================================================
   Paquete de usabilidad del home (panel de 6 usuarios, ago 2026).
   Todo lo de abajo es page-scoped: los componentes compartidos
   (pricing.css, nav.css, sticky-cta.css, welcome-support-float.css)
   quedan INTACTOS porque también los usa /welcome-ds/.
   ===================================================================== */

/* --- Colchón de anclaje bajo el nav pegajoso ---
   El nav es sticky en TODOS los anchos (nav.css:8-14), así que sin
   scroll-margin-top cualquier salto a un ancla mete el destino DEBAJO de la
   barra: el usuario aterriza y lo primero que debía leer ya está tapado.
   Ninguna ancla del home lo tenía.

   --home-nav-h NO es un número adivinado: es el alto real de la barra, medido
   en el navegador (375px y 1280px) y luego escrito como fórmula para que se
   pueda auditar. OJO, ACOPLAMIENTO: solo el espaciado sale de tokens
   (var(--space-3), var(--fs-small)). El padding vertical del botón (0.75rem) y
   el grosor de su borde (1px por lado) son COPIA A MANO de button.css:24 y
   button.css:26 — hoy no existe token para ninguno de los dos. Si alguien
   recalibra el .btn allá, hay que actualizar esta fórmula aquí (y la de
   --home-sticky-bar-h, más abajo, que copia lo mismo). La barra es un flex de
   una fila:
   su alto = padding vertical + el alto del elemento MÁS ALTO + el borde.
     .site-nav .container → padding-top + padding-bottom = 2 × var(--space-3) = 32px
     el más alto NO es el logo (32px en escritorio, 26px en ≤767.98px) ni la
     hamburguesa (32px): es el botón "Empieza ya", que rinde 47px =
       2 × 0.75rem (padding de .btn) + 1.5 × var(--fs-small) (línea) + 2px (borde)
     .site-nav → border-bottom: 1px
   32 + 47 + 1 = 80px, IGUAL en móvil y escritorio (medido: 80px en ambos).
   Con sesión iniciada el botón no se renderiza y la barra baja a ~65px; usar 80
   ahí solo regala un poco más de aire, nunca tapa.
   El respiro extra (var(--space-3)) despega el texto del filo de la barra:
   pegado al borde se lee como cortado. */
:root {
  /* alto real del .btn del nav (el elemento más alto de la barra).
     0.75rem y 2px son copia a mano de button.css:24 y :26 (no hay token). */
  --home-nav-btn-h: calc(2 * 0.75rem + 1.5 * var(--fs-small) + 2px);
  --home-nav-h: calc(2 * var(--space-3) + var(--home-nav-btn-h) + 1px);
  --home-anchor-offset: calc(var(--home-nav-h) + var(--space-3));
}
#elige-plan,
#inicio,
#clientes-nuevos,
#bonos,
.home-section,
.section--hero,
.ds-proof-band {
  scroll-margin-top: var(--home-anchor-offset);
}

/* El ancla #elige-plan vive ENTRE el h2 y la línea puente, dentro de un bloque
   de texto. Un <span> vacío sigue siendo inline: el navegador le arma una caja
   de línea con el alto del strut (~26px) y empujaría la línea puente hacia
   abajo, justo el espacio que estamos peleando en móvil. Con display:block y
   height:0 el ancla no ocupa nada y sigue siendo un destino de scroll válido.
   Scoped a #elige-plan: las otras anclas (#inicio, #clientes-nuevos, #bonos)
   están ENTRE secciones, donde ese renglón fantasma no molesta a nadie, y
   tocarlas movería espaciados que hoy están aprobados. */
#elige-plan {
  display: block;
  height: 0;
}

/* --- Línea "¿Es para regalar?" bajo la banda de prueba ---
   Tercera vía discreta: hereda el tono de nota fina (.pricing-fine) y se
   separa menos de la banda que la nota de renovación (space-4 en vez del
   space-5 del componente), para que se lea COMO parte del bloque de planes y
   no como una nota legal suelta. */
.pricing-gift { margin-top: var(--space-4); }

/* --- Nav: "Empieza ya" sin taps muertos ---
   Bajo 1200px los links del nav se esconden (regla de arriba) y este botón
   queda como única acción del encabezado; si el usuario YA está viendo la
   grilla de precios, tocarlo no hace nada visible = tap muerto. El observer de
   index_ds.html le pone la clase mientras #planes está a la vista.

   Se oculta con el patrón COMPLETO del repo (welcome-support-float.css:38-43,
   sticky-cta): opacity + visibility + pointer-events. Con opacity sola el botón
   seguiría siendo clickeable y tabulable — un fantasma es peor que el tap
   muerto original. visibility:hidden además CONSERVA la caja, así que el
   cluster derecho del nav no se reacomoda (cero brinco de layout).

   Solo bajo 1200px: en escritorio los links siguen visibles y el botón no es la
   única salida, así que se queda tal cual. */
@media (max-width: 1199.98px) {
  .ds-nav-cta {
    transition: opacity 200ms ease, visibility 200ms ease;
  }
  .ds-nav-cta--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
/* Sin animación para quien pidió menos movimiento (el cambio de estado sigue
   ocurriendo, solo que instantáneo). Los TRES flotantes, no dos: la barra fija
   es la única que se DESPLAZA de verdad (translateY del 100% de su alto, ~88px,
   cada vez que el hero o la grilla de precios cruzan el viewport), justo el tipo
   de movimiento que la preferencia pide apagar; el nav-cta y la burbuja solo
   funden opacidad. */
@media (prefers-reduced-motion: reduce) {
  .ds-nav-cta { transition: none; }
  .ds-support-float--home { transition: none; }
  .sticky-cta { transition: none; }
}

/* --- Burbuja de Soporte del home (.ds-support-float--home) ---
   Ajustes PROPIOS del home. welcome-support-float.css es compartida con
   /welcome-ds/ y no se toca; de ahí el modificador.

   DOS estados, DOS clases, y el CSS decide dónde surte efecto cada una (el JS
   de index_ds.html las alterna a cualquier ancho, sin lógica de breakpoints):

     .ds-support-float--hidden  → la pone el observer del HERO. La define el
       componente (opacity + visibility + pointer-events) y aquí NO se redefine,
       solo se NEUTRALIZA de 992px para arriba (ver el bloque min-width de abajo).
       En móvil se conserva tal cual: la burbuja se montaba sobre el CTA "Habla
       con un pediatra" con un solape medido de 127×39px en 375×667.
     .is-collapsed  → la pone el observer de #PLANES. Solo hace algo en
       ≤991.98px. Antes ahí también se ocultaba del todo; ahora se encoge a
       ícono para no dejar sin soporte justo la pantalla donde se decide pagar.

   La burbuja arranca con --hidden puesta EN EL MARKUP (nunca con .is-collapsed).
   z-index: el componente lo fija en 30 (encima de la barra fija, que va en 20).
   NO subirlo — de 1040 en adelante taparía el drawer/backdrop de Bootstrap. */
/* Objetivo táctil: el componente rinde ~30px de alto (14px de texto + 2 ×
   space-2) y con el pulgar se necesitan 48px. El piso cubre TODA la franja
   donde la grilla está apilada (teléfono y tableta), no solo teléfono: hasta
   este paquete vivía en el bloque de ≤767.98px, así que en 768-991.98px la
   burbuja colapsada medía 48×32. Ahí antes se OCULTABA del todo sobre #planes y
   ahora se colapsa (o sea, pasó a ser un blanco táctil visible de 32px), así
   que el piso tiene que llegar hasta el mismo corte que el colapso.
   Solo cambia el ALTO: el padding lateral sigue saliendo del componente de
   768px arriba, así que la burbuja colapsada se queda en 48px de ancho y
   NINGUNA medida horizontal se mueve (los solapes medidos siguen valiendo).
   inline-flex con align-items:center ya centra el contenido dentro del
   min-height. */
@media (max-width: 991.98px) {
  .ds-support-float--home { min-height: 48px; }
}
@media (max-width: 767.98px) {
  /* Píldora más ancha para el pulgar en teléfono (y con ella, 64×48 colapsada). */
  .ds-support-float--home {
    padding-left: var(--space-4);
    padding-right: var(--space-4);

    /* El componente sube la burbuja 5rem (80px) "el espacio que reserva
       body.has-sticky-cta". Medido en el navegador, la barra NO mide 80px sino
       88: 2 × var(--space-3) de padding + un botón de 55px (el .btn de la barra
       lleva su PROPIO padding extra de var(--space-3) arriba y abajo,
       sticky-cta.css:32-38) MÁS el border-top de 1px de la propia barra
       (sticky-cta.css:28). Resultado: la burbuja se montaba 8px sobre el filo
       de la barra. Aquí se recalcula el alto real y se deja un respiro.
       Se corrige SOLO para el home (modificador --home): welcome-support-float.css
       es compartida con /welcome-ds/ y no se toca en este paquete — el mismo
       desfase existe allá y va en un ticket aparte.
       env(safe-area-inset-bottom) NO se cuenta doble: el alto de aquí lo
       EXCLUYE (la barra lo mete en su padding-bottom) y se vuelve a sumar
       abajo, sobre un alto que no lo traía. */
    /* 16+16 (padding de la barra) + 16+16 (padding propio del .btn) + 21 (línea)
       + 2 (borde del botón) + 1 (border-top de la barra) = 88px. */
    --home-sticky-bar-h: calc(2 * var(--space-3) + 2 * var(--space-3) + 1.5 * var(--fs-small) + 2px + 1px);
    bottom: calc(var(--home-sticky-bar-h) + var(--space-2) + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Burbuja COLAPSADA sobre la sección de planes (solo móvil) ---
   El corte es 991.98px porque es el MISMO de .hero-ctas .btn y de
   .pricing-card__cta .btn (los dos bloques 991.98 de esta hoja): ahí los botones
   pasan a ancho completo, y solo entonces la burbuja les roba área. La regla vive
   DENTRO del media query a propósito: así el JS alterna .is-collapsed a cualquier
   ancho y el CSS decide dónde aplica — en escritorio la clase queda puesta y no
   hace nada (cero lógica de breakpoints en JS, un solo lugar donde cambiar el
   corte).

   Geometría medida en el navegador (375×667 y 390×844): 127.05×48 expandida →
   64×48 colapsada (24 de padding + 16 del svg + 24 de padding, con gap 0). El
   solape contra el botón de compra baja de 114.05px a 51px, o sea de 36 % a
   16.1 % de sus 317px en 375 (34.4 % → 15.4 % de 332px en 390), y el texto
   "Empezar ahora" (termina en x=241.25) queda libre porque la burbuja arranca en
   x=295. Ese 16 % es costo asumido, no un descuido: ver
   ds/_soporte_whatsapp.html, que documenta la decisión completa.

   En 768-991.98px la burbuja hereda el padding lateral del componente (16px),
   así que ahí colapsada mide 48px de ancho (y 48 de alto: el piso táctil ahora
   llega hasta 991.98px, ver el bloque de min-height más arriba). Medido en
   900px: el solape contra el botón de ancho completo de la tarjeta pasa de
   20.05px a CERO.

   El CTA de la banda de prueba ya NO queda debajo de la burbuja en esta franja
   (antes se llevaba 38.6 % de su ancho en 600px y 24.2 % en 768 y 900px). En
   ≤767.98px por la misma vía que las tarjetas —ancho completo, solape en el
   filo: 43px de 526 = 8.2 % en 600px y 43px de 693 = 6.2 % en 767px, contra el
   9.4 % y 5.8 % que ceden las tarjetas ahí— y en 768-991.98px por el carril
   reservado, que lo deja en CERO con 29px libres.
   Los dos bloques están arriba en esta hoja (.pricing-trial-band).

   Se oculta la ETIQUETA (.ds-support-float__label), no el svg: el ícono es lo
   que queda. min-height, border-radius de píldora, z-index y el nombre accesible
   (aria-label, que empieza por "Soporte") NO se tocan: en ≤991.98px el objetivo
   táctil sigue midiendo 48px de alto y el enlace se sigue llamando igual. No se
   anima nada nuevo (display no es animable) y la transición de opacidad del
   componente no se altera; el bloque prefers-reduced-motion de esta hoja ya la
   apaga para --home. */
@media (max-width: 991.98px) {
  .ds-support-float--home.is-collapsed {
    /* Sin etiqueta el gap dejaría 8px muertos a la derecha del ícono y la
       píldora saldría descentrada. */
    gap: 0;
  }
  .ds-support-float--home.is-collapsed .ds-support-float__label {
    display: none;
  }
}

/* --- Escritorio (≥992px): la burbuja NUNCA se oculta ---
   El observer del hero pone .ds-support-float--hidden a cualquier ancho y esa
   clase la define el componente COMPARTIDO (welcome-support-float.css, que no se
   toca), así que sin este bloque el escritorio también perdía el soporte
   mientras el hero estaba en pantalla. Medido: en 1280×800 y 1440×900 el solape
   de la burbuja expandida contra el CTA del hero es CERO (el CTA vive en la
   columna izquierda, y=571.98-618.98; la burbuja abajo a la derecha, y=752-784 y
   y=852-884). Sin tap robado que justifique esconderla, se queda: siempre
   visible y siempre expandida.

   CONTRA LOS TRES BOTONES DE LA GRILLA el cero es cierto de 1024px arriba, NO
   desde 992px: entre 992 y 1023.98px el contenedor todavía es de ancho completo
   y el botón de la tercera tarjeta ("Empezar ahora") llega a x=871.83 mientras
   la burbuja expandida arranca en x=864.95 → 6.88px de roce, o sea 4.4 % de su
   ancho y 2.5 % de su área por hit-test (medido en 992px). El texto del botón
   queda libre. Es una franja de ~32px de ancho de ventana y no se corrige
   metiéndole un carril a la grilla, porque eso angostaría las tres columnas en
   escritorio; si algún día molesta, el arreglo barato es el mismo de la banda
   (reservar carril) aplicado al .pricing-grid solo en esa franja.

   EL CTA DE LA BANDA DE PRUEBA (.pricing-trial-band__cta, "Empezar", plan de 6h)
   sí era grave y YA ESTÁ ARREGLADO arriba en esta hoja: es el cuarto botón que
   paga del home, medía 111.48px pegado al filo derecho del contenedor y vive
   DENTRO de <section id="planes">, así que antes lo protegía el ocultado que el
   observer hacía a cualquier ancho. Al dejar de ocultarse en escritorio quedó
   debajo de la burbuja (992 y 1024px → 90.05px = 80.8 % de su ancho y 59 % de su
   área; 1200px → 60.05px = 53.9 %; 1280px → 20.05px = 18 %; 1320px → 0), y por
   debajo de 992px pasaba lo mismo con la burbuja colapsada (600px → 43px =
   38.6 %; 768 y 900px → 27px = 24.2 %), porque el botón solo iba a ancho
   completo en ≤575.98px. Ahora: ancho completo hasta 767.98px y carril reservado
   de 768px arriba (ver el bloque .pricing-trial-band). NO se "arregla" volviendo
   a ocultar la burbuja en escritorio: que esté siempre visible ahí es decisión
   tomada.

   Gana por especificidad (0,2,0 vs 0,1,0 de .ds-support-float--hidden), no por
   orden de fuente, así que sigue funcionando si mañana se reordenan las hojas.
   Se repiten las CUATRO declaraciones del estado oculto —incluido el transform—
   porque basta con que una se quede para que la burbuja siga corrida u opaca. */
@media (min-width: 992px) {
  .ds-support-float--home.ds-support-float--hidden {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
}

/* =====================================================================
   Tarjetas de precio en móvil (≤991.98px = el corte donde pricing.css
   colapsa la grilla a 1 columna). Todo scoped a .pricing-grid: la banda de
   prueba (.pricing-trial-band) y los botones B2B (.b2b-track) quedan FUERA
   del selector a propósito.
   ===================================================================== */
@media (max-width: 991.98px) {
  /* --- T4: botón sólido en las tarjetas de la grilla ---
     Apiladas, el botón outline de los planes NO recomendados se leía como
     "deshabilitado" (borde fino, fondo blanco) al lado del teal del
     recomendado; en desktop el contraste entre los tres tiene sentido porque
     se comparan de un vistazo, en una sola columna no hay comparación, solo un
     botón que parece apagado. Mismo look que .btn-primary (button.css:33-37).
     El condicional del template (:359) se queda como está: esto es CSS puro.
     Hover/focus/active viran al teal oscuro por AMBOS lados (borde y fondo);
     .btn-primary usa borde blanco en hover, que en táctil deja un halo raro. */
  .pricing-grid .pricing-card__cta .btn {
    background-color: var(--p-verde);
    color: var(--paper-pure);
    border-color: var(--p-verde);
    /* Piso táctil: el .btn base rinde 47px (12 + 12 de padding + 21 de línea +
       2 de borde). 48px es el mínimo del paquete; +1px no mueve nada. */
    min-height: 48px;
  }
  .pricing-grid .pricing-card__cta .btn:hover,
  .pricing-grid .pricing-card__cta .btn:focus,
  .pricing-grid .pricing-card__cta .btn:active {
    background-color: var(--p-verde-hover);
    border-color: var(--p-verde-hover);
    color: var(--paper-pure);
  }

  /* --- T5: el plan recomendado, primero ---
     Solo ORDEN VISUAL: el DOM no cambia, así que en móvil la pantalla muestra
     Mensual → Único → Anual mientras el Tab y el lector de pantalla recorren
     Único → Mensual → Anual.

     DEUDA DE A11Y ACEPTADA, no un no-problema: eso es exactamente la
     desincronía que señalan WCAG 1.3.2 (Meaningful Sequence) y 2.4.3 (Focus
     Order) — reordenar con `order` de flex/grid es el caso de manual. Se acepta
     porque el daño medible es bajo (son 3 tarjetas autónomas: cada una se
     anuncia con su nombre, su precio y su propio botón, no son una secuencia
     con significado) y porque cerrarlo del todo exige reordenar en el servidor
     (que la vista entregue el plan con text_header primero), y este paquete NO
     toca views.py. Si algún día se hace, quitar esta regla y usar `order` solo
     en ≥992px para devolverle el centro a la grilla de 3 columnas.
     En escritorio no aplica: esto vive dentro de la media query. */
  .pricing-grid .pricing-card--popular { order: -1; }

  /* --- T6: compactar la tarjeta ---
     Los min-height de pricing.css (60-91) existen para ALINEAR las 3 tarjetas
     fila por fila en escritorio. En una sola columna no alinean nada: solo
     inflan cada tarjeta con aire muerto (insignia 2rem, nombre 4.5rem, bloque
     de precio 5rem) y empujan el botón fuera de pantalla. Se colapsan a auto.
     Lo mismo con la reserva de 2 renglones de la nota de garantía (arriba en
     este archivo): sin tarjetas vecinas, no hay nada que emparejar.
     PISOS: la escala tipográfica NO baja (los tamaños son los del sistema) y
     ningún objetivo táctil queda bajo 48px. Lo que se recorta es aire. */
  .pricing-card__badge-slot { min-height: 0; }
  .pricing-card__name { min-height: 0; }
  .pricing-card__price-block { min-height: 0; }
  .pricing-card__guarantee { min-height: 0; }

  /* Paddings y gaps: space-5 (40px) es whitespace de escritorio. En 375px cada
     40px cuesta un renglón de contenido visible. Bajar el padding lateral a
     space-3 tiene un segundo efecto medible: ensancha el texto de la tarjeta
     ~32px, y con eso las viñetas largas ("Puedes agregar más números…") pierden
     un renglón de wrap cada una. */
  .pricing-card {
    padding: var(--space-3);
    /* space-1 (4px) y no space-2: la tarjeta recomendada rendía 521px y, con la
       línea puente ya recortada a 2 renglones, seguía sin caber bajo el nav en
       375×667 (faltaban ~38px). La tarjeta es un flex column de 5 hijos = 4
       gaps, así que cada escalón de gap vale 4 × 4px = 16px de alto. Los
       separadores reales del bloque son el hairline de features y el padding
       del CTA, no este gap. */
    gap: var(--space-1);
  }
  /* -8px cada uno. El hairline de .pricing-card__features (pricing.css) sigue
     separando precio de viñetas; lo que se recorta es el aire sobre la línea. */
  .pricing-card__features { padding-top: var(--space-2); }
  .pricing-card__cta { padding-top: var(--space-2); }
  /* -4px. La nota de garantía cuelga del botón: pegarla un escalón no la
     despega de su dueño y devuelve holgura al criterio A2, que en 375×667
     cierra con pocos píxeles de margen. */
  .pricing-card__guarantee { margin-top: var(--space-1); }

  /* El gap párrafo→tarjetas (56px, pensado para igualar a pediatras en
     escritorio) es justo el espacio entre la línea puente y la primera
     tarjeta: en móvil se recorta para que ambas quepan tras el salto.
     space-3 (16px) y no space-4: los 8px de diferencia son parte del
     presupuesto del criterio A2 (ver el cálculo del ancla, más arriba). */
  .pricing-grid { margin-top: var(--space-3); }
}