/*
 * DuDoctor · site.css
 *
 * Componentes de la WEB PÚBLICA, el flujo "Empezar consulta" y el ÁREA DE PACIENTE.
 * Se carga siempre DESPUÉS de branding.css y tokens.css (layouts/head.php). Catálogo con snippets:
 * docs/DESIGN-site.md.
 *
 * LA MARCA NO ESTÁ AQUÍ: la letra, los títulos, los enlaces, el foco y las piezas comunes (botones,
 * .link-arrow, campos, casillas, tarjetas de opción, insignias, píldoras, chips de estado y avisos)
 * vienen de branding.css, la copia literal de /branding/css/branding.css, en su registro de la web.
 * Esta hoja no las redefine: las coloca y, en un sitio concreto, las ajusta.
 *
 * MOBILE FIRST ESTRICTO: los estilos base son para móvil (320–599px). Las mejoras van SOLO en
 * bloques @media (min-width: 600px | 900px | 1200px), al final de cada sección, más UN intermedio,
 * 400px: el selector de idioma de la cabecera, que en un móvil más estrecho no cabe junto a los
 * botones (§ 5; sigue en el menú y en el pie). Ninguna max-width. Las únicas media
 * queries que no son de ancho son (hover: hover), (pointer: fine), print, forced-colors y
 * (prefers-reduced-motion: reduce) en el carril del equipo médico (§ 10).
 * Color, espaciado, radios y sombras: exclusivamente variables de branding.css (o color-mix sobre
 * ellas); las medidas de maquetación (contenedor, cabecera, banner), de tokens.css.
 * Nomenclatura: BEM ligero (.bloque, .bloque__elemento, .bloque--variante) + estados .is-*.
 *
 * ÍNDICE
 *   1. Base                         9. Tarjetas de tema y beneficios   17. Cuestionario (.quiz)
 *   2. Maquetación y utilidades    10. Confianza y doctores           18. Autenticación (.auth)
 *   3. Enlaces                     11. Testimonios                    19. Área de paciente
 *   4. Avatares, tarjeta, precio   12. FAQ                            20. Flash, toasts, vacío
 *   5. Cabecera y menú             13. Banda CTA                      21. Tablas y paginación
 *   6. Pie                         14. Prosa (.prose)                 22. Impresión y accesibilidad
 *   7. Banner fijo, cookies y      15. Formularios (maquetación)
 *      cuestionarios sin enviar
 *   8. Hero, métricas y pasos      16. (las tarjetas de opción son de la marca)
 */

/* ==========================================================================
   1. BASE
   ========================================================================== */

/* La letra, los títulos, los párrafos, los enlaces, el foco y la selección los pone branding.css.
   Aquí, la maquetación base de la web. */

html {
  scroll-behavior: smooth;
  /* Las anclas (/#como-funciona) no deben quedar debajo de la cabecera fija. */
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Fondo quieto con una ventana modal abierta (ui.js, «fondo quieto»; también en panel.css y
   patient.css): la página de detrás no se desplaza, y el hueco de su barra se conserva. */
html.has-modal { overflow: hidden; overscroll-behavior: none; }
html.has-modal-gutter { scrollbar-gutter: stable; }

/* El banner fijo "Empezar consulta" y la navegación fija del cuestionario (solo móvil) tapan
   el final de la página: el body les reserva su alto. Las clases las pone el servidor; el :has()
   es el cinturón, y va en su propia regla en este y en los demás bloques que lo usan: un navegador
   sin :has() descarta la regla ENTERA, y con ella las clases. */
body.has-cta,
body.has-quiz-nav { padding-bottom: calc(var(--cta-h) + var(--safe-b)); }
body:has(.quiz__nav) { padding-bottom: calc(var(--cta-h) + var(--safe-b)); }
/* Sin el pie (el cuestionario, layouts/site: $hideFooter), el hueco de lo que va fijo abajo y se ve (los
   avisos de los cuestionarios sin enviar, el de las cookies), con el fondo del cuestionario: lo mide ui.js
   (initDock). */
body.no-footer main::after { content: ""; display: block; height: var(--dock-h, 0px); background: var(--bg-soft); }

main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > * { flex-shrink: 0; }
main:focus { outline: none; }

img { height: auto; display: block; }

/* Enlace "Saltar al contenido": primer elemento del body, visible solo al recibir foco. */
.skip-link {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  z-index: 300;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--bg);
  font-weight: 650;
  border-radius: var(--r-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; color: var(--bg); }

/* ==========================================================================
   2. MAQUETACIÓN Y UTILIDADES
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--s-7); }
.section--tight { padding-block: var(--s-6); }
.section--flush-top { padding-top: 0; }
.section--soft { background: var(--bg-soft); }
.section--tint {
  background:
    radial-gradient(42rem 22rem at 100% 0%, var(--accent-soft), transparent 65%),
    var(--accent-softer);
}
.section--night {
  background:
    radial-gradient(40rem 24rem at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--night);
  color: var(--night-ink);
}
.section--night h1, .section--night h2, .section--night h3, .section--night h4 { color: #fff; }
.section--night a:not(.btn) { color: #fff; }
.section--night :focus-visible { outline-color: #fff; }

.section-head { margin-bottom: var(--s-6); max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.section--night .section-head__eyebrow { color: color-mix(in srgb, var(--accent) 45%, #fff); }
.section-head__title { font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.625rem); letter-spacing: -0.03em; }
.section-head__subtitle { margin-top: var(--s-3); font-size: var(--fs-md); color: var(--ink-soft); }
.section--night .section-head__subtitle { color: var(--night-ink); }

/* Rejilla genérica: 1 columna en móvil; --2/--3/--4 crecen con el ancho. */
.grid { display: grid; gap: var(--s-4); }
.grid > * { min-width: 0; }

/* Dos columnas texto + lateral (landing de tema, confianza). En móvil, apiladas. */
.split { display: grid; gap: var(--s-6); }
.split > * { min-width: 0; }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack > * { margin-block: 0; }
.stack--sm { gap: var(--s-3); }
.stack--lg { gap: var(--s-6); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.cluster--center { justify-content: center; }

.u-hidden-visually {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.u-muted { color: var(--muted); }
.u-small { font-size: var(--fs-sm); }
.u-xs { font-size: var(--fs-xs); }
.u-lead { font-size: var(--fs-md); color: var(--ink-soft); }
.u-mono { font-family: var(--font-mono); letter-spacing: 0; }
/* Un código dentro de una frase (la referencia de un pago, P-…): sin partirse por su guion. */
.u-nowrap { white-space: nowrap; }
.u-mt-3 { margin-top: var(--s-3) !important; }
.u-mt-4 { margin-top: var(--s-4) !important; }
.u-mt-5 { margin-top: var(--s-5) !important; }
.u-mt-6 { margin-top: var(--s-6) !important; }
.u-mb-3 { margin-bottom: var(--s-3) !important; }
.u-mb-4 { margin-bottom: var(--s-4) !important; }
.u-mb-5 { margin-bottom: var(--s-5) !important; }
/* Mismo par que en el panel: la clase js del <html> la pone head.php antes de que corra nada. */
.js .no-js-only { display: none !important; }
html:not(.js) .js-only { display: none !important; }

@media (min-width: 600px) {
  .grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { gap: var(--s-5); }
}
@media (min-width: 900px) {
  .section { padding-block: var(--s-9); }
  .section--tight { padding-block: var(--s-7); }
  .section--flush-top { padding-top: 0; }
  .section-head { margin-bottom: var(--s-7); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
  .split--aside { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .split--aside > :last-child { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* ==========================================================================
   3. ENLACES
   ========================================================================== */

/* Los botones (.btn y sus variantes) y los enlaces de acción (.link-arrow) son de branding.css. */
.topic-card:hover .link-arrow::after { transform: translateX(4px); }

/* ==========================================================================
   4. AVATARES, ICONOS EN RECUADRO, TARJETA GENÉRICA
   ========================================================================== */

/* Las insignias (.badge), las píldoras (.pill) y los chips de estado (.status, con su burbuja
   .status-pop) son de branding.css. */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent-soft), var(--accent-line));
  color: var(--accent-hover);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
}
.avatar--sm { width: 36px; height: 36px; font-size: var(--fs-xs); }
.avatar--lg { width: 64px; height: 64px; font-size: var(--fs-lg); }
.avatar--solid { background: var(--accent); color: var(--accent-ink); }
/* Avatar con foto: el <img> ocupa el círculo entero sin deformarse. */
.avatar--photo { object-fit: cover; background: var(--bg-sunken); }

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.icon-tile--sm { width: 36px; height: 36px; border-radius: var(--r-sm); }
.icon-tile--lg { width: 64px; height: 64px; border-radius: var(--r-lg); }
.icon-tile--round { border-radius: 50%; }
.icon-tile--ok { background: var(--ok-soft); color: var(--ok); }
.icon-tile--muted { background: var(--bg-sunken); color: var(--muted); }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}
.card__title { font-size: var(--fs-md); letter-spacing: -0.015em; }
.card__body { padding: var(--s-5); }
.card--tint { background: var(--accent-softer); border-color: var(--accent-line); }

/* Precio orientativo (hero de tema, laterales). */
.price { display: flex; flex-direction: column; gap: 2px; }
.price__label { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.02em; color: var(--ink); }
.price__note { font-size: var(--fs-sm); color: var(--muted); }
/* El precio ANTERIOR de una oferta: delante del actual, tachado y en segundo plano. */
.price__old { margin-right: var(--s-1); color: var(--muted); font-size: var(--fs-base); font-weight: 500; letter-spacing: 0; }
/* Varios precios (el paciente elige uno al final del cuestionario): uno debajo de otro, separados. */
.price-options { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.price-options > .price + .price { padding-top: var(--s-3); border-top: 1px solid var(--accent-line); }

/* Migas de pan. */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); list-style: none; font-size: var(--fs-sm); color: var(--muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--s-2); }
.breadcrumb li + li::before { content: "/"; color: var(--line); }
/* La miga es letra pequeña: su ::after agranda la zona táctil hasta 44px de alto sin moverla (en
   horizontal no pasa del hueco entre migas, así que dos no se pisan). */
.breadcrumb a { position: relative; color: var(--ink-soft); text-decoration: none; }
.breadcrumb a::after { content: ""; position: absolute; inset: calc((var(--tap-sm) - 100%) / -2) calc(var(--s-1) * -1); }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

@media (min-width: 900px) {
  .card__body { padding: var(--s-6); }
  .card__head { padding-inline: var(--s-6); }
}

/* ==========================================================================
   5. CABECERA Y MENÚ
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
/* El desenfoque va en un pseudo-elemento: backdrop-filter en la propia cabecera la convertiría
   en bloque contenedor de los hijos position: fixed (el velo del menú móvil). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
          backdrop-filter: saturate(1.6) blur(14px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--header-h);
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--s-3);
}

/* Marca. El logotipo (texto) solo se muestra si CABE: .brand es un flex con salto de línea y
   alto fijo, así que cuando falta sitio el nombre cae a una segunda línea que queda recortada.
   Funciona con cualquier longitud de site_name y sin media queries. Por debajo de 900px el enlace
   es un objetivo táctil entero (--tap): el logo (36px) va centrado con un relleno, y el hueco entre
   líneas (row-gap) es ese mismo relleno, así la segunda línea empieza justo donde se recorta. */
.site-header__brand { flex: 1 1 0; min-width: 0; display: flex; }
.brand {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  column-gap: var(--s-2);
  row-gap: calc((var(--tap) - 36px) / 2);
  flex: 0 1 auto;
  min-width: 34px;
  height: var(--tap);
  padding-block: calc((var(--tap) - 36px) / 2);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.brand:hover { color: var(--ink); }
.brand__mark { display: flex; align-items: center; flex: none; height: 36px; color: var(--brand-accent); }
.brand__name {
  flex: none;
  line-height: 36px;
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.brand__img { flex: 0 1 auto; min-width: 0; height: 36px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.brand--footer { margin-block: calc((36px - var(--tap)) / 2); color: #fff; height: auto; overflow: visible; flex-wrap: nowrap; }
.brand--footer:hover { color: #fff; }
.brand--footer .brand__mark { color: color-mix(in srgb, var(--brand-accent) 60%, #fff); }

/* Botón hamburguesa: <details> para que el menú funcione SIN JavaScript. ui.js añade
   aria-expanded, cierre con Escape, al navegar y al pulsar fuera. */
.nav-toggle { flex: none; }
.nav-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 44px;
  height: var(--tap);
  margin-left: -8px;
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.nav-toggle__btn::-webkit-details-marker { display: none; }
.nav-toggle__btn::marker { content: ""; }
.nav-toggle__btn:hover { background: var(--bg-sunken); }
.nav-toggle__label { display: none; }
.nav-toggle__icon-close { display: none; }
.nav-toggle[open] .nav-toggle__icon-open { display: none; }
.nav-toggle[open] .nav-toggle__icon-close { display: block; }
/* Velo: forma parte del <summary>, así que pulsarlo cierra el menú también sin JS. */
.nav-toggle[open] > .nav-toggle__btn::before {
  content: "";
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: color-mix(in srgb, var(--night) 45%, transparent);
  cursor: default;
  animation: ddr-fade .2s var(--ease);
}

.nav-panel {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-x: hidden;                    /* con `overflow-y: auto` el otro eje queda en `auto`: una
                                            vista que entre desplazada sacaría barra horizontal */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-3) var(--s-4) var(--s-5);
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: ddr-drop .22s var(--ease);
}
.nav-panel__heading {
  margin: var(--s-3) var(--s-3) var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-panel__list { list-style: none; }
.nav-panel__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.nav-panel__link:hover, .nav-panel__link[aria-current="page"] { background: var(--accent-softer); color: var(--accent-hover); }
.nav-panel__link > span:not(.icon-tile) { flex: 1; min-width: 0; }
.nav-panel__link > svg:last-child { color: var(--muted); }
.nav-panel__foot { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }

/* Menú en línea de escritorio (≥1200px). Nunca salta a una segunda línea: los enlaces se
   encogen y, si aún así no cabe alguno, se recorta con puntos suspensivos. Antes se dejaba
   envolver y se recortaba la fila de abajo con `overflow: hidden`, pero eso escondía enlaces sin
   decirlo y además recortaba el desplegable de una categoría. Que quepa de verdad lo decide
   site.php antes ($sBurgerAlways); esto es la red. "Preguntas frecuentes" va el último. */
.site-nav { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 6px; flex: none; }
/* La cabecera del FLUJO de una consulta (layouts/site.php, $flowHeader; lo pidió Pablo): solo el logotipo y, siempre a
   la derecha, «Guardar y salir». */
.site-header--flow .site-header__actions { margin-left: auto; }
.site-header__exit { min-height: 44px; padding-inline: var(--s-3); font-size: var(--fs-sm); white-space: nowrap; }
.header-login {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 44px;
  height: var(--tap);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.header-login:hover { background: var(--bg-sunken); color: var(--ink); }
.header-login:focus-visible { border-radius: var(--r-pill); }
/* En móvil el texto sigue existiendo para lectores de pantalla; visualmente queda el icono. */
.header-login__text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.header-login__dot {
  position: absolute;
  top: 9px; left: 26px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg);
}
/* Hasta 900px el botón puede partirse en dos líneas: en otros idiomas el texto es mucho más
   largo que «Empezar consulta» («Commencer une consultation») y, en una sola, con el selector de
   idioma al lado, empujaba la cabecera fuera de la pantalla. Desde 900px, una línea. */
.site-header__cta { max-width: 10.5rem; min-height: 44px; padding: var(--s-1) 14px; font-size: var(--fs-sm); line-height: 1.15; text-align: center; white-space: normal; }

/* Selector de idioma. Es un <details data-nav>, así que abre sin JavaScript y ui.js le da
   lo mismo que al menú: aria-expanded, Escape y cierre al pulsar fuera o al elegir. En móvil es
   un botón de 44px con el globo y el código encima, y la lista cuelga de la CABECERA (el
   .lang-switch no se posiciona hasta 600px): colgada del botón se saldría por la izquierda. */
.lang-switch { flex: none; }
/* Por debajo de 400px no cabe al lado del botón: el selector sale en el menú (.nav-panel__lang). */
.site-header__actions .lang-switch { display: none; }
.lang-switch__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: var(--tap);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.lang-switch__btn::-webkit-details-marker { display: none; }
.lang-switch__btn::marker { content: ""; }
.lang-switch__btn:hover,
.lang-switch[open] > .lang-switch__btn { background: var(--bg-sunken); }
.lang-switch__code {
  position: absolute;
  right: 2px; bottom: 6px;
  padding: 0 3px;
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.lang-switch__chev { display: none; transition: transform .2s var(--ease); }
.lang-switch[open] .lang-switch__chev { transform: rotate(180deg); }
.lang-switch__list {
  position: absolute;
  top: 100%;
  right: var(--s-3);
  z-index: 1;
  width: min(240px, calc(100vw - 2 * var(--s-3)));
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: ddr-drop .18s var(--ease);
}
.lang-switch__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  padding-inline: var(--s-3);
  border-radius: var(--r-md);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.lang-switch__link:hover { background: var(--bg-sunken); color: var(--ink); }
.lang-switch__link[aria-current] { background: var(--accent-softer); color: var(--accent-hover); }
.lang-switch__iso {
  flex: none;
  width: 2.25em;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.lang-switch__link[aria-current] .lang-switch__iso { color: inherit; }
.lang-switch__tick { margin-left: auto; color: var(--accent); }

/* Variante del pie: una fila de enlaces con el nombre de cada idioma en su propio idioma. */
.lang-list { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.lang-list > svg { flex: none; }
.lang-list ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); margin: 0; padding: 0; list-style: none; }
.lang-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s-2);
  border-radius: var(--r-sm);
  color: inherit;
  text-decoration: none;
}
.lang-list a:hover { color: var(--accent-hover); text-decoration: underline; }
.lang-list a[aria-current] { color: var(--accent-hover); font-weight: 700; }
/* En el pie (fondo oscuro), en blanco. */
.site-footer .lang-list a:hover,
.site-footer .lang-list a[aria-current] { color: #fff; }
/* Dentro del menú de hamburguesa, al pie, separado de los botones. */
.nav-panel__lang { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); color: var(--ink-soft); font-size: var(--fs-sm); }
/* El único punto intermedio de esta hoja (ver la cabecera): por debajo de 400px el selector de la
   cabecera no cabe junto a los botones, y el idioma se cambia desde el menú o el pie. */
@media (min-width: 400px) {
  .site-header__actions .lang-switch { display: block; }
}

@keyframes ddr-fade { from { opacity: 0; } }
@keyframes ddr-drop { from { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 600px) {
  .site-header__inner { gap: var(--s-3); padding-inline: var(--gutter); }
  .nav-toggle__btn { width: auto; padding-inline: var(--s-3); margin-left: calc(var(--s-3) * -1); }
  .nav-toggle__label { display: inline; }
  .nav-panel {
    top: calc(100% + var(--s-2));
    left: var(--gutter); right: auto;
    width: 380px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }
  .site-header__actions { gap: var(--s-2); }
  .header-login { width: auto; padding-inline: var(--s-3); }
  .header-login__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
  .header-login__dot { left: 24px; }
  .site-header__cta { min-height: 46px; padding-inline: var(--s-4); }
  .lang-switch { position: relative; }
  .lang-switch__btn { width: auto; padding-inline: var(--s-3); }
  .lang-switch__code { position: static; padding: 0; background: none; font-size: var(--fs-sm); line-height: inherit; }
  .lang-switch__chev { display: block; }
  .lang-switch__list { top: calc(100% + var(--s-2)); right: 0; }
}
@media (min-width: 900px) {
  .site-header__cta { max-width: none; padding-inline: var(--s-5); font-size: var(--fs-base); white-space: nowrap; }
  .brand, .brand__mark, .brand__img { height: 40px; }
  .brand { row-gap: 0; padding-block: 0; }
  .brand--footer { margin-block: 0; }
  .brand__name { line-height: 40px; font-size: 1.3125rem; }
}
@media (min-width: 1200px) {
  /* Con pocos temas (site.php lo decide y omite .site-header--burger) el menú pasa a la barra. */
  .site-header:not(.site-header--burger) .nav-toggle { display: none; }
  .site-header:not(.site-header--burger) .site-header__brand { flex: none; }
  .site-header:not(.site-header--burger) .site-nav {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 0 2px;
    min-width: 0;
    height: 44px;
    margin-left: var(--s-5);
    list-style: none;
  }
  .site-nav__link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 44px;
    padding-inline: var(--s-3);
    border-radius: var(--r-pill);
    color: var(--ink-soft);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  .site-nav__link:hover { background: var(--bg-sunken); color: var(--ink); }
  .site-nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-hover); }
  .site-nav__link:focus-visible { outline-offset: -2px; border-radius: var(--r-pill); }
}

/* Segundo nivel del menú: los tratamientos de una categoría.

   El panel de hamburguesa funciona por VISTAS: la raíz y una por categoría, apiladas en el mismo
   sitio y conmutadas por ui.js con el atributo `hidden`. No se deslizan lateralmente porque el
   panel tiene su propio scroll vertical (`overflow-y: auto` fuerza el recorte del otro eje), así
   que una vista que entrara desde el lado se recortaría o sacaría barra horizontal: entra con el
   mismo `ddr-drop` que usa el panel entero.

   En el menú EN LÍNEA de escritorio es un desplegable: lo abre `.is-open` (ui.js, al pasar el
   ratón o al pulsar el botón, que es quien lleva el `aria-expanded`) y lo mantiene abierto el
   `:focus-within` mientras se recorre con el teclado. Sin JavaScript lo abre el `:hover` a pelo,
   que es lo único que se puede hacer sin él. */

.nav-panel__view { animation: ddr-drop .18s var(--ease); }
.nav-panel__view[hidden] { display: none; }

/* La fila de una categoría son DOS controles: el enlace a su página y el botón que abre su vista.
   Así el submenú no le roba el enlace, que es lo que pasa cuando la fila entera es un botón. */
.nav-panel__row { display: flex; align-items: center; gap: var(--s-1); }
/* Solo se ve sin JavaScript: los tratamientos de la categoría, sangrados debajo de ella. */
.nav-panel__sublist { margin-left: var(--s-6); border-left: 1px solid var(--line-soft); }
.nav-panel__row > .nav-panel__link { flex: 1 1 auto; min-width: 0; }
.nav-panel__more,
.nav-panel__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.nav-panel__more {
  flex: none;
  width: var(--tap);
  height: 56px;                          /* el mismo alto que la fila, para que el toque no falle */
  border-radius: var(--r-md);
}
.nav-panel__more:hover { background: var(--accent-softer); color: var(--accent-hover); }
.nav-panel__back {
  width: 100%;
  min-height: var(--tap);
  justify-content: flex-start;
  padding: 0 var(--s-3);
  margin-bottom: var(--s-2);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.nav-panel__back:hover { background: var(--bg-sunken); color: var(--ink); }
.nav-panel__back svg { flex: none; }

/* El desplegable de escritorio solo existe donde existe el menú en línea. */
@media (min-width: 1200px) {
  /* `min-width: 0` para que pueda encoger como los enlaces sueltos: sin eso, una categoría de
     nombre largo empujaría al resto fuera de la barra. */
  .site-nav__item { position: relative; display: inline-flex; align-items: center; min-width: 0; }
  .site-nav__item > .site-nav__link { padding-right: var(--s-1); }
  .site-nav__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: transform .2s var(--ease), color .2s var(--ease);
  }
  .site-nav__more:hover { color: var(--ink); }
  .site-nav__item.is-open .site-nav__more { transform: rotate(180deg); color: var(--accent-hover); }

  .site-nav__sub {
    position: absolute;
    top: calc(100% + var(--s-1));
    left: calc(var(--s-2) * -1);
    z-index: 1;
    min-width: 260px;
    max-width: 320px;
    padding: var(--s-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    /* `visibility` y no `display`: mientras está escondido sus enlaces NO son enfocables, que es lo
       que evita que el tabulador se meta en un menú cerrado. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  }
  /* Con JavaScript, `.is-open` es la ÚNICA forma de abrirlo: lo pone ui.js al pasar el ratón, al
     entrar el foco y al pulsar el botón, y así el `aria-expanded` nunca dice lo contrario de lo
     que se ve. Un `:focus-within` suelto aquí lo abriría por detrás del JS, y entonces ni Escape
     ni el botón podrían cerrarlo mientras el foco siguiera dentro. */
  .site-nav__item.is-open .site-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* Sin JavaScript no hay quien ponga `.is-open`: ahí lo abren el ratón y el foco a secas. */
  html:not(.js) .site-nav__item:hover .site-nav__sub,
  html:not(.js) .site-nav__item:focus-within .site-nav__sub { opacity: 1; visibility: visible; transform: none; }

  .site-nav__sublist { display: grid; gap: 2px; list-style: none; }
  .site-nav__sublink {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: var(--s-2);
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
  }
  .site-nav__sublink:hover,
  .site-nav__sublink[aria-current="page"] { background: var(--accent-softer); color: var(--accent-hover); }
  .site-nav__sublink > span:not(.icon-tile) { min-width: 0; }
}

/* ==========================================================================
   6. PIE
   ========================================================================== */

.site-footer {
  margin-top: auto;
  padding-block: var(--s-7) var(--s-6);
  background: var(--night);
  color: var(--night-ink);
  font-size: var(--fs-sm);
}
.site-footer :focus-visible { outline-color: #fff; }
.site-footer a { color: var(--night-ink); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; gap: var(--s-6); }
.site-footer__brand { display: grid; gap: var(--s-3); justify-items: start; align-content: start; }
.site-footer__tagline { max-width: 28rem; color: color-mix(in srgb, var(--night-ink) 80%, var(--night)); font-size: var(--fs-base); }
.site-footer__heading {
  margin-bottom: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
}
.site-footer__links { list-style: none; }
/* En el móvil, cada enlace del pie es un objetivo táctil entero (--tap); desde 900px, más juntos. */
.site-footer__links a, .site-footer__links button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
}
.site-footer__links button { padding: 0; border: 0; background: none; color: var(--night-ink); text-align: left; }
.site-footer__links button:hover { color: #fff; text-decoration: underline; }
.site-footer__contact { list-style: none; display: grid; gap: var(--s-1); }
.site-footer__contact li { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); }
.site-footer__contact a { display: inline-flex; align-items: center; min-height: var(--tap); overflow-wrap: anywhere; }
.site-footer__contact svg { flex: none; color: color-mix(in srgb, var(--brand-accent) 55%, #fff); }
.site-footer__bottom {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
  color: color-mix(in srgb, var(--night-ink) 72%, var(--night));
  font-size: var(--fs-xs);
}

@media (min-width: 600px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .site-footer { padding-block: var(--s-8) var(--s-6); }
  .site-footer__links a, .site-footer__links button { min-height: 40px; }
  .site-footer__contact li { align-items: flex-start; min-height: 32px; }
  .site-footer__contact a { display: inline; min-height: 0; }
  .site-footer__contact svg { margin-top: 3px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
  .site-footer__brand { grid-column: auto; }
  .site-footer__bottom { grid-template-columns: 1fr auto; align-items: center; }
}

/* --- El pie con los tratamientos (el de footer-dudoctor/, que pidió Pablo el 2026-11-02, hecho dinámico) ---
   Fila 1 (.site-footer__grid--seo): la marca y una columna por categoría (con su enlace), la de los tratamientos sin
   categoría y la de las categorías sin tratamientos en ese idioma. Fila 2 (.site-footer__grid--info): los sellos, la
   columna del sitio y la legal (a dos columnas). Las columnas que sobren pasan a otra fila. */

/* En el móvil, los grupos a dos columnas. */
.site-footer__grid--seo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.site-footer__grid--seo > .site-footer__brand { grid-column: 1 / -1; }

/* El texto de marca: un párrafo corto y legible. */
.site-footer__about { max-width: 30rem; color: color-mix(in srgb, var(--night-ink) 80%, var(--night)); line-height: 1.6; }

/* El encabezado que es el enlace a la landing de su categoría. */
.site-footer__heading a { color: #fff; }
.site-footer__heading a:hover { color: #fff; }

/* Los enlaces largos de tratamiento pueden partir línea sin perder el objetivo táctil. */
.site-footer__links--long a { line-height: 1.35; padding-block: var(--s-1); }

/* Los sellos de confianza. */
.site-footer__badges { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.site-footer__badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding: var(--s-1) var(--s-3);
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, #fff 4%, transparent);
  color: #fff; font-size: var(--fs-xs); font-weight: 600;
}
.site-footer__badge svg { flex: none; color: color-mix(in srgb, var(--brand-accent) 55%, #fff); }

/* La segunda fila: los sellos, el sitio y lo legal. */
.site-footer__grid--info {
  display: grid; gap: var(--s-6);
  margin-top: var(--s-6); padding-top: var(--s-6);
  border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
}
.site-footer__links--cols { display: grid; gap: 0 var(--s-5); }

@media (min-width: 600px) {
  .site-footer__grid--seo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__grid--info { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .site-footer__links--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .site-footer__grid--seo { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .site-footer__grid--seo > .site-footer__brand { grid-column: auto; }
  .site-footer__grid--info { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-7); }
  .site-footer__grid--info > nav:last-child { grid-column: span 2; }
  .site-footer__links--cols { gap: 0 var(--s-6); }
  .site-footer__grid--info > .site-footer__badges { align-self: start; }
  .site-footer__links--long a, .site-footer__links--long button { min-height: 34px; padding-block: 5px; }
}

/* --- El pie A MEDIDA (la 133: Páginas › Pie, App\Services\SiteFooter) ---
   Sus FILAS (.site-footer__row, «En columnas», o .site-footer__bottom, «Barra final») con sus COLUMNAS
   (.site-footer__col), cada una con sus bloques uno debajo de otro. La fila que empieza con la marca
   (.site-footer__row--lead) tiene su primera columna más ancha, como el pie de antes; las columnas que no caben pasan a
   otra línea de la rejilla. «Pie centrado» (templates/footer-centered.php) añade .site-footer--centered. */
.site-footer__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.site-footer__row + .site-footer__row {
  margin-top: var(--s-6); padding-top: var(--s-6);
  border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
}
.site-footer__col { display: grid; gap: var(--s-3); align-content: start; justify-items: start; min-width: 0; }
.site-footer__col > nav { width: 100%; }
.site-footer__col--lead { grid-column: 1 / -1; }
/* Los sellos, con su ancho: toda la fila en el móvil y dos columnas desde 900px. */
.site-footer__col--badges { grid-column: 1 / -1; }
/* Un texto: legible y corto. El primero debajo de la marca (el lema), como el lema de antes. */
.site-footer__text { max-width: 30rem; color: color-mix(in srgb, var(--night-ink) 80%, var(--night)); line-height: 1.6; }
.site-footer__text > * + * { margin-top: var(--s-2); }
.site-footer__text a { text-decoration: underline; }
.site-footer__text ul { list-style: none; }
.site-footer__col > .brand + .site-footer__text { font-size: var(--fs-base); line-height: var(--lh-base); }
/* Un enlace de dentro de otro (un submenú). */
.site-footer__links--sub { padding-left: var(--s-3); }
/* La barra final: cada bloque en su sitio; desde 900px, en una línea. */
.site-footer__bottom p { margin: 0; }
.site-footer__bar-item { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; }
.site-footer__bottom .site-footer__text { max-width: none; color: inherit; font-size: inherit; }

@media (min-width: 600px) {
  .site-footer__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .site-footer__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
  .site-footer__row--lead { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); }
  .site-footer__col--lead { grid-column: auto; }
  .site-footer__col--badges { grid-column: span 2; }
  .site-footer__row + .site-footer__row { margin-top: var(--s-7); }
  .site-footer__bottom { grid-auto-flow: column; grid-template-columns: none; justify-content: space-between; }
  .site-footer__bottom > .site-footer__bar-item:last-child { justify-items: end; }
}

/* El pie CENTRADO: cada fila, centrada. */
.site-footer--centered { text-align: center; }
.site-footer--centered .site-footer__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-6) var(--s-8); }
.site-footer--centered .site-footer__col { justify-items: center; flex: 0 1 16rem; }
.site-footer--centered .site-footer__col--lead,
.site-footer--centered .site-footer__col--badges { flex-basis: 100%; }
.site-footer--centered .site-footer__text { margin-inline: auto; }
.site-footer--centered .site-footer__badges { justify-content: center; }
.site-footer--centered .site-footer__contact li { justify-content: center; }
.site-footer--centered .site-footer__links a, .site-footer--centered .site-footer__links button { text-align: center; }
.site-footer--centered .site-footer__links--sub { padding-left: 0; }
.site-footer--centered .site-footer__bottom { justify-items: center; text-align: center; }
.site-footer--centered .site-footer__bar-item { justify-items: center; }
@media (min-width: 900px) {
  .site-footer--centered .site-footer__bottom { grid-auto-flow: row; justify-content: center; }
  .site-footer--centered .site-footer__bottom > .site-footer__bar-item:last-child { justify-items: center; }
}

/* La cabecera COMPACTA (templates/header-compact.php): el menú siempre en su botón. */
.site-header--compact .site-nav { display: none !important; }

/* ==========================================================================
   7. BANNER FIJO "EMPEZAR CONSULTA", BANNER DE COOKIES Y CUESTIONARIOS SIN ENVIAR
   ========================================================================== */

/* Capas: cabecera y menú 100 · cookies 95 · cuestionarios sin enviar 94 · banner CTA y navegación del
   cuestionario 90 · toasts 200. */
.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding-bottom: var(--safe-b);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
          backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 -10px 30px color-mix(in srgb, var(--ink) 9%, transparent);
  animation: ddr-cta-in .55s var(--ease) .2s both;
}
.cta-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: var(--cta-h);
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
.cta-bar__text { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; line-height: 1.25; }
.cta-bar__title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.cta-bar__title-more { display: none; }
.cta-bar__sub { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); color: var(--muted); }
.cta-bar__sub svg { color: var(--brand-accent); } /* el reloj, con el color FIJO de la marca (lo pidió Pablo) */
.cta-bar__sub-prefix { display: none; }
/* Misma receta que .site-header__cta: en otros idiomas el texto es mucho más largo («Commencer
   une consultation») y en nowrap dejaba a .cta-bar__text una columna de migajas en un móvil de
   320px. En dos líneas cabe dentro de --cta-h; desde 600px vuelve a una sola. */
.cta-bar__btn { flex: none; max-width: 11rem; padding-inline: var(--s-4); line-height: 1.15; white-space: normal; }
.cta-bar__btn svg { display: none; }

@keyframes ddr-cta-in { from { transform: translateY(100%); } }

.cookie-banner {
  position: fixed;
  left: var(--s-3); right: var(--s-3);
  bottom: calc(var(--s-3) + var(--safe-b));
  z-index: 95;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--night);
  color: var(--night-ink);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg);
  animation: ddr-rise .35s var(--ease);
}
body.has-cta .cookie-banner,
body.has-quiz-nav .cookie-banner { bottom: calc(var(--cta-h) + var(--safe-b) + var(--s-3)); }
body:has(.quiz__nav) .cookie-banner { bottom: calc(var(--cta-h) + var(--safe-b) + var(--s-3)); }
.cookie-banner__title { color: #fff; font-size: var(--fs-base); font-weight: 700; }
.cookie-banner a { color: #fff; }
.cookie-banner :focus-visible { outline-color: #fff; }
.cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.cookie-banner .btn { min-height: 44px; }
/* Con la publicidad de Meta (data-cookie-ads): «Elegir qué acepto» debajo de los dos botones, que siguen igual de
   visibles, y las dos casillas, sin marcar, con su botón de guardar. Sobre el fondo oscuro, su texto en claro. */
.cookie-banner__choose { grid-column: 1 / -1; justify-self: center; color: #fff; text-decoration: underline; }
.cookie-banner__choose:hover { color: #fff; }
.cookie-banner__choices { display: grid; gap: var(--s-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.cookie-banner__choices .check small { color: var(--night-ink); }
.cookie-banner__choices .btn { margin-top: var(--s-2); }

@keyframes ddr-rise { from { opacity: 0; transform: translateY(12px); } }

/* Los avisos de los CUESTIONARIOS SIN ENVIAR (partials/quiz-reminders + quiz-reminders.js): uno por
   cuestionario guardado en el navegador, en todas las páginas de la web y del área de paciente.
   Capa 94, justo por debajo de las cookies. En el móvil van a todo el ancho, encima del banner fijo
   (o de la navegación del cuestionario), dos como mucho, y esperan mientras se ve el aviso de
   cookies, que ocupa ese mismo sitio; desde 600px, una columna de 360px abajo a la IZQUIERDA (las
   cookies van a la derecha) con los tres que pinta el script y, en el área de paciente, a la
   derecha (a la izquierda está su menú). Compactos a propósito: el título arriba y, debajo, el
   tratamiento y el botón en la misma fila; la franja de la izquierda hace de icono (la del
   terminado, con el color de «falta enviarlo»). */
.quiz-reminders {
  position: fixed;
  left: var(--s-3); right: var(--s-3);
  bottom: calc(var(--s-3) + var(--safe-b));
  z-index: 94;
  display: grid;
  gap: var(--s-2);
  pointer-events: none;
}
.quiz-reminders[hidden] { display: none; }
body.has-cta .quiz-reminders,
body.has-quiz-nav .quiz-reminders { bottom: calc(var(--cta-h) + var(--safe-b) + var(--s-3)); }
body:has(.quiz__nav) .quiz-reminders { bottom: calc(var(--cta-h) + var(--safe-b) + var(--s-3)); }
body:has([data-cookie-banner]:not([hidden])) .quiz-reminders { display: none; }
.quiz-reminder {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-2) var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: ddr-rise .35s var(--ease);
}
.quiz-reminder--done { border-left-color: var(--warn); }
.quiz-reminder:nth-child(n+3) { display: none; }
.quiz-reminder__body { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; padding-top: 2px; }
.quiz-reminder__title { flex: 1 0 100%; color: var(--ink); font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; }
.quiz-reminder__name { flex: 1 1 6rem; min-width: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.quiz-reminder__go { flex: none; margin-left: auto; }
/* 44px de objetivo táctil sin agrandar el aviso: los márgenes negativos absorben el crecimiento. */
.quiz-reminder__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: -6px 0 -6px 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.quiz-reminder__close:hover { background: var(--bg-soft); color: var(--ink); }

@media (min-width: 600px) {
  .cta-bar__inner { padding-inline: var(--gutter); gap: var(--s-5); }
  .cta-bar__title { font-size: var(--fs-base); }
  .cta-bar__title-more, .cta-bar__sub-prefix { display: inline; }
  .cta-bar__sub { font-size: var(--fs-sm); }
  .cta-bar__btn { max-width: none; padding-inline: var(--s-6); white-space: nowrap; }
  .cta-bar__btn svg { display: block; }
  .cookie-banner { left: auto; right: var(--s-5); width: 420px; padding: var(--s-5); border-radius: var(--r-lg); }
  /* Desde tablet la navegación del cuestionario deja de ser fija: no hay nada que reservar. */
  body.has-quiz-nav:not(.has-cta) { padding-bottom: 0; }
  body:has(.quiz__nav):not(.has-cta) { padding-bottom: 0; }
  body.has-quiz-nav:not(.has-cta) .cookie-banner { bottom: var(--s-5); }
  body:has(.quiz__nav):not(.has-cta) .cookie-banner { bottom: var(--s-5); }
  .quiz-reminders { right: auto; left: var(--s-5); width: 360px; bottom: calc(var(--s-5) + var(--safe-b)); }
  .quiz-reminder:nth-child(n+3) { display: flex; }
  body.has-quiz-nav:not(.has-cta) .quiz-reminders { bottom: calc(var(--s-5) + var(--safe-b)); }
  body:has(.quiz__nav):not(.has-cta) .quiz-reminders { bottom: calc(var(--s-5) + var(--safe-b)); }
  body:has([data-cookie-banner]:not([hidden])) .quiz-reminders:not([hidden]) { display: grid; }
  .account-body .quiz-reminders { left: auto; right: var(--s-5); }
}

/* ==========================================================================
   8. HERO, CABECERA DE PÁGINA, MÉTRICAS Y PASOS
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--s-6) var(--s-7);
  background:
    radial-gradient(38rem 24rem at 105% -5%, var(--accent-soft), transparent 62%),
    radial-gradient(26rem 18rem at -10% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(180deg, var(--accent-softer), var(--bg) 88%);
}
.hero__inner { display: grid; gap: var(--s-7); align-items: center; }
.hero__inner > * { min-width: 0; }
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.hero__eyebrow { margin-bottom: calc(var(--s-1) * -1); }
.hero__title {
  font-size: min(var(--fs-3xl), 10.4vw);   /* 320px: ~33px, para que quepa "desplazamientos" */
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.hero__title em, .hero__title mark { font-style: normal; background: none; color: var(--accent); }
.hero__subtitle { max-width: 36rem; font-size: var(--fs-md); color: var(--ink-soft); }
.hero__actions { display: grid; gap: var(--s-3); width: 100%; margin-top: var(--s-2); }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); list-style: none; }
.hero__badge { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.hero__badge::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ddr-check-w) center / 12px no-repeat, var(--accent);
}

/* Hero de landing de tema: icono del tema + precio orientativo. */
.hero__icon { margin-bottom: var(--s-1); box-shadow: var(--shadow-sm); background: var(--bg); border: 1px solid var(--accent-line); }
.hero__price {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}
/* Ilustración del titular: la elige cada plantilla del tema (su $heroArt: visible, sin-movil u oculta). Mobile-first: la variante «sin móvil» la
   esconde en la base y la devuelve a 900px, que es donde el hero pasa a dos columnas; la variante
   «oculta» no llega ni a pintarse, y el titular ocupa entonces todo el ancho (si no, quedaría
   encajonado en la columna de 1.1fr con medio hero en blanco).

   La vista pinta SIEMPRE una de las tres clases, también la de «visible». */
.hero--art-sin-movil .hero__art { display: none; }

/* Con «mostrar siempre» en el móvil se verían DOS iconos: el .icon-tile del hero y el de 96px del
   arte. Esta regla es la gemela en la base de la que ya existía a 900px. */
.hero--topic.hero--art-visible .hero__icon { display: none; }

/* Arte decorativo del hero de inicio: composición de "tarjetas" de interfaz, 100 % CSS. */
.hero-art {
  position: relative;
  display: grid;
  align-content: center;
  width: 100%;
  max-width: 440px;
  min-height: 340px;
  margin-inline: auto;
  padding: var(--s-7) var(--s-4);
}
/* Disco y anillo se dimensionan por el ALTO de la caja: así nunca invaden lo que haya encima o debajo. */
.hero-art::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  height: 88%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--accent-line), var(--accent-soft) 70%);
}
.hero-art::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  height: 100%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px dashed var(--accent-line);
}
.hero-art__card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
}
.hero-art__row { display: flex; align-items: center; gap: var(--s-3); }
.hero-art__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.hero-art__who strong { font-size: var(--fs-sm); }
.hero-art__who span { font-size: var(--fs-xs); color: var(--muted); }
.hero-art__lines { display: grid; gap: var(--s-2); }
.hero-art__lines i { display: block; height: 10px; border-radius: var(--r-pill); background: var(--bg-sunken); }
.hero-art__lines i:nth-child(2) { width: 86%; }
.hero-art__lines i:nth-child(3) { width: 58%; }
.hero-art__plan {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--accent-softer);
  border: 1px solid var(--accent-line);
  color: var(--accent-hover);
  font-size: var(--fs-sm);
  font-weight: 650;
}
.hero-art__chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-xs);
  line-height: 1.3;
  animation: ddr-float 7s ease-in-out infinite alternate;
}
.hero-art__chip svg { color: var(--accent); }
.hero-art__chip span { display: flex; flex-direction: column; }
.hero-art__chip strong { font-size: var(--fs-sm); }
.hero-art__chip small { font-size: var(--fs-xs); color: var(--muted); }
/* Los chips van DENTRO de .hero-art__card y muerden sus esquinas. */
.hero-art__chip--a { top: -30px; left: -10px; }
.hero-art__chip--b { bottom: -30px; right: -10px; animation-delay: -3.5s; }
.topic-art > .hero-art__chip--b { bottom: 9%; right: 0; }
/* Con la imagen del CREATIVO (Páginas › Portada › Titular › Creativo): la foto llena la tarjeta, vertical, y los dos
   avisos siguen mordiendo sus esquinas. */
.hero-art--photo .hero-art__card { width: min(100%, 300px); justify-self: center; padding: 0; background: var(--bg-soft); }
.hero-art__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); }
@keyframes ddr-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }

/* Arte del hero de tema: icono grande sobre anillos concéntricos. */
/* Nunca se había pintado por debajo de 900px (la landing tenía el arte cableado a «sin móvil»):
   sin este tope, «mostrar siempre» dejaba un cuadrado de 400px en un móvil de 360. */
.topic-art { position: relative; display: grid; place-items: center; width: 100%; max-width: 260px; aspect-ratio: 1; margin-inline: auto; }
.topic-art::before, .topic-art::after { content: ""; position: absolute; border-radius: 50%; }
.topic-art::before { inset: 0; border: 1.5px dashed var(--accent-line); }
.topic-art::after { inset: 12%; background: radial-gradient(circle at 30% 25%, var(--accent-line), var(--accent-soft) 70%); }
.topic-art__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 28%;
  background: var(--bg);
  color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.topic-art__icon svg { width: 52%; height: 52%; }

/* Cabecera sencilla de página (FAQ, páginas legales, selector de tema…). */
.page-hero {
  padding-block: var(--s-6);
  background: linear-gradient(180deg, var(--accent-softer), var(--bg));
  border-bottom: 1px solid var(--line-soft);
}
.page-hero__title { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.035em; }
.page-hero__subtitle { max-width: 42rem; margin-top: var(--s-3); font-size: var(--fs-md); color: var(--ink-soft); }
.page-hero .breadcrumb { margin-bottom: var(--s-4); }

/* Franja de métricas. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  box-shadow: var(--shadow-sm);
}
.stats__item { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5) var(--s-4); background: var(--bg); text-align: center; }
.stats__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stats__value { font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--accent); }
.stats__label { font-size: var(--fs-sm); color: var(--ink-soft); }
/* Variante pegada al hero: sube la franja para que "muerda" la sección anterior. */
.stats--overlap { position: relative; z-index: 1; margin-top: calc(var(--s-5) * -1); }

/* Pasos numerados ("Cómo funciona"). El número lo genera el CSS con un contador. */
.steps { display: grid; gap: var(--s-5); list-style: none; counter-reset: ddr-step; }
.steps__item { position: relative; min-height: 48px; padding-left: 68px; counter-increment: ddr-step; }
.steps__item::before {
  content: counter(ddr-step);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-md);
  font-weight: 750;
  box-shadow: 0 0 0 6px var(--accent-soft);
}
.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px; top: 60px; bottom: calc(var(--s-5) * -1 + 12px);
  width: 2px;
  border-radius: 2px;
  background: var(--accent-line);
}
.steps__title { font-size: var(--fs-md); letter-spacing: -0.015em; }
.steps__text { margin-top: var(--s-1); color: var(--ink-soft); }
.steps__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-3);
  padding: 2px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: var(--fs-xs);
  font-weight: 650;
}
.section--night .steps__text { color: var(--night-ink); }

@media (min-width: 600px) {
  .hero { padding-block: var(--s-7) var(--s-8); }
  .hero__actions { display: flex; flex-wrap: wrap; width: auto; }
  .hero-art { min-height: 400px; padding-inline: var(--s-7); }
  .hero-art--photo .hero-art__card { width: min(100%, 360px); }
  .page-hero { padding-block: var(--s-7); }
  .stats__item { padding: var(--s-5); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .steps__item:not(:last-child)::after { display: none; }
}
@media (min-width: 900px) {
  .hero { padding-block: var(--s-8) var(--s-9); }
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-8); }
  .hero__content { gap: var(--s-5); }
  .hero__subtitle { font-size: var(--fs-lg); line-height: 1.5; }
  .hero-art { min-height: 460px; }
  .hero--art-sin-movil .hero__art { display: block; }
  .topic-art { max-width: 400px; }          /* el tope de 260px es solo para el móvil */
  .hero--art-oculta .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero--topic:has(.hero__art) .hero__icon { display: none; }   /* el arte ya muestra el icono en grande */
  .stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .stats__item:last-child:nth-child(odd) { grid-column: auto; }
  .stats__item { padding: var(--s-6) var(--s-5); }
  .stats__value { font-size: var(--fs-2xl); }
  .stats--overlap { margin-top: calc(var(--s-7) * -1); }
  .steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-6); }
  .steps__item { padding: 72px 0 0; }
  .steps__item:not(:last-child)::after {
    display: block;
    left: 66px; right: calc(var(--s-6) * -1 + 10px); top: 23px; bottom: auto;
    width: auto; height: 2px;
  }
  /* Con más de cuatro pasos no caben en una fila: se reparten en varias y se retira el conector,
     que está calculado para una sola línea horizontal. */
  .steps--wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .steps--wrap .steps__item:not(:last-child)::after { display: none; }
}

/* ==========================================================================
   9. TARJETAS DE TEMA Y BENEFICIOS
   ========================================================================== */

.topic-grid { display: grid; gap: var(--s-4); list-style: none; }
.topic-grid > * { min-width: 0; }
.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.topic-card:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.topic-card__icon { margin-bottom: var(--s-1); transition: background-color .3s var(--ease), color .3s var(--ease); }
.topic-card__name { font-size: var(--fs-lg); letter-spacing: -0.025em; }
.topic-card__desc { color: var(--ink-soft); }
.topic-card__pricing { margin-top: auto; padding-top: var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.topic-card__price { font-weight: 700; color: var(--ink); }
.topic-card__note { font-size: var(--fs-xs); color: var(--muted); }
.topic-card__old { margin-right: var(--s-1); color: var(--muted); font-weight: 500; }
.topic-card__link { margin-top: var(--s-1); align-self: flex-start; }
/* Toda la tarjeta es clicable: el enlace se estira con un pseudo-elemento. */
.topic-card__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.topic-card__link:focus-visible { outline: none; box-shadow: none; }

.benefits { display: grid; gap: var(--s-4); list-style: none; }
.benefits__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.benefits__title { font-size: var(--fs-md); letter-spacing: -0.015em; }
.benefits__text { margin-top: var(--s-1); color: var(--ink-soft); }

/* Lista con "checks" (puntos de confianza, qué incluye…). El check lo pinta el CSS. */
.check-list { display: grid; gap: var(--s-3); list-style: none; }
.check-list li { position: relative; padding-left: 36px; min-height: 24px; }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ddr-check-w) center / 13px no-repeat, var(--accent);
}
.section--night .check-list li::before { background-color: color-mix(in srgb, var(--accent) 80%, #fff); }

@media (hover: hover) {
  .topic-card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow-lg); }
  .topic-card:hover .topic-card__icon { background: var(--accent); color: var(--accent-ink); }
}
@media (min-width: 600px) {
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}
@media (min-width: 900px) {
  .topic-card { padding: var(--s-6); }
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .benefits--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  /* 4 temas en una fila; con otro número de temas se reparten solos. */
  .topic-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .topic-card { padding: var(--s-5); }
}

/* --------------------------------------------------------------------------
   Medicamentos de la landing de un tratamiento (site/topic/medicamentos.php).
   Bloque PROPIO, `.topic-med*`, y no `.med-card`: ese nombre ya es la tarjeta «Tu medicamento»
   del área de paciente (patient.css § 8) y de la ficha del médico (panel-consultas.css
   § 10), y el área de paciente carga ESTA hoja antes que la suya: cualquier regla de aquí se
   colaría en una tarjeta clínica.
   .topic-meds  rejilla de tarjetas: 1 columna; 2 desde 600px; 3 desde 900px.
   .topic-med   tarjeta blanca (la sección va sobre fondo `soft`) SIN enlace ni botón: es
                información, no una oferta (ni dosis, ni precio, ni condiciones).
     __media    caja de proporción FIJA 16:9 (el recorte de la foto en el cuestionario): la carga
                diferida no mueve la página y todas las tarjetas miden lo mismo arriba.
     __img      la foto ENTERA (object-fit: contain, no cover): aquí se enseña el producto, no un
                fondo, y recortarlo podía comerse el nombre del envase. Posición absoluta: una
                altura en % contra una caja con aspect-ratio no es fiable en todos los navegadores.
                Sin foto, un .icon-tile con la píldora, centrado.
     __name     nombre (h3), __badges las etiquetas (.badge que pueden partirse en dos líneas) y
     __desc     la descripción, que viene de un textarea: pre-line respeta sus saltos sin nl2br.
   -------------------------------------------------------------------------- */
.topic-meds { display: grid; gap: var(--s-4); list-style: none; }
.topic-meds > * { min-width: 0; }
.topic-med {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}
.topic-med__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}
.topic-med__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: var(--s-3);
  object-fit: contain;
}
.topic-med__body { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); }
.topic-med__name { font-size: var(--fs-md); letter-spacing: -0.015em; }
.topic-med__badges { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.topic-med__badges .badge { white-space: normal; }   /* una etiqueta puede llevar dos palabras largas */
.topic-med__desc { color: var(--ink-soft); font-size: var(--fs-sm); white-space: pre-line; }

@media (min-width: 600px) {
  .topic-meds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}
@media (min-width: 900px) {
  .topic-meds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- El BLOG (la 120): la lista /blog, la sección «Artículos del blog» de la landing de un tratamiento y cada
   artículo. Tarjetas como las de los tratamientos (toda la tarjeta es clicable: el enlace del título se estira). --- */
.blog-grid { display: grid; gap: var(--s-4); list-style: none; }
.blog-grid > * { min-width: 0; }
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.blog-card:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.blog-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-soft); }
.blog-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.blog-card__date { font-size: var(--fs-xs); color: var(--muted); }
.blog-card__title { font-size: var(--fs-lg); letter-spacing: -0.02em; line-height: 1.3; }
.blog-card__link { color: var(--ink); text-decoration: none; }
.blog-card__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.blog-card__link:focus-visible { outline: none; box-shadow: none; }
.blog-card__excerpt { color: var(--ink-soft); }
.blog-card__more { margin-top: auto; padding-top: var(--s-2); align-self: flex-start; }

.blog-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.blog-post__img { display: block; width: 100%; height: auto; margin-bottom: var(--s-6); border-radius: var(--r-lg); }
.blog-post__cta {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  margin-top: var(--s-7);
  padding: var(--s-5);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--accent-softer);
}
.blog-post__cta-title { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.blog-post__cta-text { color: var(--ink-soft); }

@media (hover: hover) {
  .blog-card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow-lg); }
}
@media (min-width: 600px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}

/* ==========================================================================
   10. CONFIANZA Y DOCTORES
   ========================================================================== */

.trust__title { font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.625rem); letter-spacing: -0.03em; }
.trust__text { margin-top: var(--s-4); font-size: var(--fs-md); color: var(--ink-soft); }
.trust__points { margin-top: var(--s-5); }
.section--night .trust__text { color: var(--night-ink); }

/* --------------------------------------------------------------------------
   Equipo médico: carril de tarjetas verticales.

   La tarjeta es la FOTO: ocupa el recuadro entero (2:3) y el texto va encima, sobre un degradado
   que nace del color de la banda. Todas miden lo mismo —también la de quien no tiene foto, que
   recibe un panel de iniciales—: en un carril, una tarjeta más baja que las demás canta.

   El carril se desplaza a mano SIEMPRE (`.doctor-rail__viewport` es un contenedor con scroll) y,
   mientras las tarjetas quepan, la pista se centra sola: `margin-inline: auto` sobre un
   `width: max-content` deja de hacer efecto en cuanto desbordan, así que no hay que apagarlo.
   Encima de eso, home.js mide y SOLO si no caben duplica las tarjetas y pone `.is-marquee`: ahí el
   contenedor deja de desplazarse y la pista se mueve sola. El desplazamiento de un ciclo lo mide
   el JS en píxeles (`--rail-shift`) porque un 50 % no cae justo: entre las dos copias hay un hueco
   más que dentro de cada una.

   Sin JavaScript no hay marquesina ni duplicados: queda un carril desplazable normal.
   -------------------------------------------------------------------------- */
.doctor-rail { margin-top: var(--s-7); }
/* Fuera del .container a propósito: el carril corre de borde a borde de la pantalla. El padding
   lateral devuelve el margen del contenedor cuando las tarjetas caben; el vertical deja sitio a
   la sombra, que un contenedor con scroll recorta. */
.doctor-rail__viewport {
  padding: var(--s-2) var(--gutter) var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.doctor-rail__viewport::-webkit-scrollbar { display: none; }
/* La región llega a los bordes de la pantalla: con el `outline-offset` positivo de siempre, el
   contorno del foco se dibujaría fuera de la vista. */
.doctor-rail__viewport:focus-visible { outline-offset: -2px; }
.doctor-rail__track {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Marquesina: la enciende home.js tras medir. `linear` a propósito: una marquesina con curva de
   entrada y salida se nota en el bucle. La velocidad se traduce a duración en el JS. */
.doctor-rail.is-marquee .doctor-rail__viewport {
  padding-inline: 0;                 /* en movimiento el carril corre de borde a borde */
  overflow-x: hidden;
  /* El gesto horizontal es nuestro: así home.js se entera de que alguien arrastra y le cede el
     mando. El vertical sigue siendo del navegador, que la página tiene que poder desplazarse. */
  touch-action: pan-y;
  /* Las tarjetas entran y salen difuminadas; si el navegador no sabe de máscaras, se cortan y ya. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.doctor-rail.is-marquee .doctor-rail__track {
  margin-inline: 0;
  animation: doctor-rail-run var(--rail-duration, 60s) linear infinite;
}
@keyframes doctor-rail-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--rail-shift, 0px) * -1), 0, 0); }
}
/* Parar el movimiento (WCAG 2.2.2). El BOTÓN lo para de verdad: home.js retira `.is-marquee` y el
   carril vuelve a desplazarse a mano, que es lo que quiere quien lo para. Estas tres solo lo
   congelan un momento: el foco dentro, un dedo encima (.is-held) y estar fuera de la pantalla
   (.is-idle, ni un repintado de más).

   El ratón y el foco cuentan solo dentro del VISOR: si colgaran del carril entero, el botón
   «Reanudar» —que vive fuera— dejaría la cinta congelada justo al pulsarlo. */
.doctor-rail.is-held .doctor-rail__track,
.doctor-rail.is-idle .doctor-rail__track,
.doctor-rail__viewport:focus-within .doctor-rail__track { animation-play-state: paused; }
@media (hover: hover) {
  .doctor-rail.is-marquee .doctor-rail__viewport:hover .doctor-rail__track { animation-play-state: paused; }
}

.doctor-rail__controls { display: flex; justify-content: center; margin: 0; padding-inline: var(--gutter); }
.doctor-rail__pause-on,
.doctor-rail__pause-off { display: inline-flex; align-items: center; gap: var(--s-2); }
.doctor-rail:not(.is-paused) .doctor-rail__pause-off,
.doctor-rail.is-paused .doctor-rail__pause-on { display: none; }

/* La tarjeta es un RETRATO: 2:3, la foto a sangre y encima solo lo justo —el número profesional
   arriba a la izquierda y, abajo, el nombre con sus especialidades—. La presentación va plegada
   detrás de «Leer más»: así, en reposo, casi todo lo que se ve es la fotografía.

   El alto se calcula del ancho con `height` y no con `aspect-ratio`: así es DEFINITIVO —ni el texto
   puede estirar la tarjeta ni el `stretch` del flex la iguala a la más alta— y los porcentajes de
   dentro tienen contra qué resolverse. */
.doctor-card {
  --card-w: min(70vw, 240px);
  position: relative;
  flex: 0 0 var(--card-w);
  height: calc(var(--card-w) * 3 / 2);
  scroll-snap-align: start;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, #fff 6%, transparent);
  box-shadow: var(--shadow-lg);
  color: #fff;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* La foto va a sangre detrás del texto. El encuadre tira hacia arriba: en un retrato la cara casi
   nunca está en el centro geométrico. El acercamiento al pasar el ratón es lento y corto a
   propósito: se nota que la tarjeta responde sin que parezca que se mueve. */
.doctor-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transition: transform .7s var(--ease);
}
/* Sin foto, las iniciales con la MISMA proporción, subidas para que no las tape el texto. */
.doctor-card__photo--initials {
  display: grid;
  place-items: center;
  padding-bottom: 30%;
  background:
    radial-gradient(16rem 14rem at 50% 30%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 72%),
    color-mix(in srgb, #fff 7%, transparent);
  color: color-mix(in srgb, #fff 86%, transparent);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.03em;
}
/* Chapa flotante arriba a la izquierda. El velo propio es lo que la hace legible sobre CUALQUIER
   foto —una bata blanca incluida—: sin él, el número profesional sería lo primero que se pierde. */
.doctor-card__license {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 3;                              /* por encima del panel de texto */
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  max-width: calc(100% - var(--s-6));
  padding: 5px var(--s-3) 5px var(--s-2);
  border-radius: var(--r-pill);
  /* Fondo PROPIO, y opaco de verdad: aquí arriba no llega el velo del pie y la foto puede ser una
     bata blanca. Al 82 % de --night, el blanco encima da ~9,8:1 sobre lo más claro posible. */
  background: color-mix(in srgb, var(--night) 82%, transparent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .doctor-card__license {
    background: color-mix(in srgb, var(--night) 74%, transparent);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }
}
.doctor-card__license svg { flex: none; opacity: .85; }
/* El texto se apoya abajo sobre un degradado del color de la banda y ocupa lo MÍNIMO: en reposo,
   nombre y especialidades. El tope del 76 % es la red de seguridad para una ficha con muchas
   especialidades o una presentación desplegada. */
.doctor-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 76%;
  padding: var(--s-8) var(--s-4) var(--s-4);
  overflow-y: auto;
  scrollbar-width: none;
  /* El fundido se ancla a una LONGITUD —el hueco del relleno de arriba, 64 px— y no a un %: el
     alto del panel lo decide su contenido, y con paradas en porcentaje el nombre se metía en la
     parte transparente en cuanto la tarjeta traía texto. Así el texto SIEMPRE cae sobre el velo
     opaco, se lea sobre una bata blanca o sobre un fondo oscuro. La parada intermedia es lo que
     evita el canto duro: sin ella el velo se corta en una banda horizontal visible. */
  background: linear-gradient(to top,
    color-mix(in srgb, var(--night) 96%, transparent) 0%,
    color-mix(in srgb, var(--night) 93%, transparent) calc(100% - var(--s-8)),
    color-mix(in srgb, var(--night) 52%, transparent) calc(100% - var(--s-5)),
    transparent 100%);
}
.doctor-card__body::-webkit-scrollbar { display: none; }
.doctor-card__name { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: #fff; }
/* Una o varias especialidades del MÉDICO (no tratamientos), cada una en su .badge--night: la fila
   envuelve si no caben. El .badge de catálogo va en una sola línea (white-space: nowrap), que aquí
   desbordaría la tarjeta con un nombre largo: en esta lista sí se le deja partir. */
.doctor-card__specialty { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.doctor-card__specialty .badge { white-space: normal; overflow-wrap: anywhere; }
/* La presentación se pliega con el truco de la fila de rejilla (0fr → 1fr), que SÍ se puede animar,
   en vez de con un `max-height` a ojo. Donde el navegador no sepa interpolarlo, el plegado sigue
   funcionando: simplemente cambia de golpe. */
.doctor-card__reveal {
  min-height: 0;                           /* es un ítem flex: sin esto no encoge y empuja el botón fuera */
  display: grid;
  grid-template-rows: 1fr;                 /* sin JavaScript la presentación se ve entera */
  margin-top: var(--s-2);                  /* el hueco va AQUÍ, no en el hijo: un margen suyo */
  transition: grid-template-rows .32s var(--ease), margin-top .32s var(--ease);
}
/* …asomaría por debajo de la fila plegada, porque el `0fr` no cuenta el contenido pero sí su margen. */
.js .doctor-card__reveal { grid-template-rows: 0fr; margin-top: 0; }
.js .doctor-card.is-open .doctor-card__reveal { grid-template-rows: 1fr; margin-top: var(--s-2); }
/* La presentación se publica ENTERA: `pre-line` respeta los párrafos que escribió el médico (el
   modelo ya dejó los saltos en '\n' y colapsó los seguidos) y `anywhere` evita que una palabra
   larga —un hospital, una titulación— desborde la tarjeta. Si es larguísima, se desplaza aquí
   dentro: el `min-height: 0` y el `overflow` son además lo que permite que la fila se pliegue. */
.doctor-card__bio {
  min-height: 0;
  max-height: 11rem;
  margin: 0;
  overflow-y: auto;
  scrollbar-width: none;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: color-mix(in srgb, #fff 86%, transparent);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.doctor-card__bio::-webkit-scrollbar { display: none; }
/* Solo tiene sentido con JS: sin él la presentación ya se ve entera y no hay nada que desplegar. */
.doctor-card__more {
  display: none;
  align-items: center;
  align-self: flex-start;
  gap: var(--s-1);
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.js .doctor-card__more { display: inline-flex; }
.doctor-card__more svg { flex: none; transition: transform .25s var(--ease); }
.doctor-card.is-open .doctor-card__more svg { transform: rotate(180deg); }

/* Al pasar el ratón la tarjeta se levanta un poco, la foto se acerca y el borde se enciende: la
   marquesina ya está parada en ese momento, así que no compite con nada. Solo con ratón: en táctil
   el :hover se queda pegado después de tocar. */
@media (hover: hover) and (pointer: fine) {
  .doctor-card:hover {
    border-color: color-mix(in srgb, #fff 34%, transparent);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .38);
  }
  .doctor-card:hover .doctor-card__photo { transform: scale(1.045); }
}

@media (min-width: 600px) {
  .doctor-card { --card-w: 250px; }
}
@media (min-width: 900px) {
  .doctor-rail { margin-top: var(--s-8); }
  .doctor-rail__track { gap: var(--s-5); }
  .doctor-card { --card-w: 265px; }
}
@media (min-width: 1200px) {
  .doctor-card { --card-w: 285px; }
}
/* La regla global de branding.css deja cualquier animación en .01ms, así que la marquesina saltaría
   a su último fotograma. Aquí se apaga del todo y el carril vuelve a desplazarse a mano: si el
   movimiento fuera la única forma de llegar a la última tarjeta, quien pide menos movimiento no
   la vería nunca. (home.js tampoco la enciende; esto cubre el cambio de ajuste en caliente.) */
@media (prefers-reduced-motion: reduce) {
  .doctor-rail.is-marquee .doctor-rail__viewport {
    padding-inline: var(--gutter);
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .doctor-rail.is-marquee .doctor-rail__track { margin-inline: auto; animation: none; }
  /* Si el ajuste se enciende con la marquesina ya montada, los duplicados sobran. */
  .doctor-rail__track > [data-rail-clone] { display: none; }
}

/* ==========================================================================
   11. TESTIMONIOS
   ========================================================================== */

/* En móvil es un carrusel con scroll-snap que sangra hasta los bordes de la pantalla (debe ir
   dentro de un .container); desde tablet, rejilla. */
.testimonials {
  display: flex;
  gap: var(--s-4);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--s-1) var(--gutter) var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.testimonials::-webkit-scrollbar { display: none; }
.testimonial {
  flex: 0 0 min(86%, 340px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}
.testimonial:only-child { flex-basis: 100%; }
.testimonial__body { margin: 0; color: var(--ink); font-size: var(--fs-base); }
.testimonial__footer { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; }
.testimonial__author { display: block; font-weight: 700; font-size: var(--fs-sm); }
.testimonial__detail { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* Estrellas: <span class="rating" role="img" aria-label="Valoración: 4 de 5"> con 5 iconos star-fill. */
.rating { display: inline-flex; gap: 2px; color: color-mix(in srgb, var(--warn) 72%, #fff); }
.rating__star--off { color: var(--line); }

@media (min-width: 600px) {
  .testimonials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .testimonial:only-child { grid-column: 1 / -1; max-width: 40rem; margin-inline: auto; }
}
@media (min-width: 900px) {
  .testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testimonial { padding: var(--s-6); }
}

/* ==========================================================================
   12. FAQ (ACORDEÓN)
   ========================================================================== */

.faq { display: grid; gap: var(--s-7); }
.faq__group { display: grid; gap: var(--s-3); }
.faq__category { margin-bottom: var(--s-2); font-size: var(--fs-lg); letter-spacing: -0.02em; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq__item[open] { border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 60px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-weight: 650;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:focus-visible { border-radius: var(--r-md); }
/* Indicador +/− dibujado con CSS: no hace falta icono en el HTML. */
.faq__q::after {
  content: "";
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 12px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 12px no-repeat,
    var(--accent-soft);
  transition: transform .3s var(--ease), background-size .3s var(--ease);
}
.faq__item[open] > .faq__q::after {
  transform: rotate(180deg);
  background-size: 12px 2px, 2px 0, auto;
}
.faq__a { padding: 0 var(--s-4) var(--s-5); color: var(--ink-soft); animation: ddr-faq .3s var(--ease); }
.faq__a > :first-child { margin-top: 0; }
@keyframes ddr-faq { from { opacity: 0; transform: translateY(-6px); } }

/* Apertura/cierre animados donde el navegador lo permite (mejora progresiva). */
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s var(--ease), content-visibility .3s allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

@media (hover: hover) {
  .faq__item:hover { border-color: var(--accent-line); }
}
@media (min-width: 600px) {
  .faq__q { padding: var(--s-4) var(--s-5); font-size: var(--fs-md); }
  .faq__a { padding: 0 var(--s-7) var(--s-5) var(--s-5); }
}

/* ==========================================================================
   13. BANDA CTA FINAL
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  padding: var(--s-7) var(--s-5);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--night)));
  color: var(--accent-ink);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-band::before, .cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, #fff 18%, transparent);
  pointer-events: none;
}
.cta-band::before { width: 22rem; height: 22rem; right: -9rem; top: -11rem; background: color-mix(in srgb, #fff 7%, transparent); }
.cta-band::after { width: 16rem; height: 16rem; left: -7rem; bottom: -9rem; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band__title { max-width: 22ch; color: inherit; font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.625rem); letter-spacing: -0.03em; }
.cta-band__text { max-width: 38rem; font-size: var(--fs-md); color: color-mix(in srgb, var(--accent-ink) 88%, transparent); }
.cta-band__actions { display: grid; gap: var(--s-3); width: 100%; margin-top: var(--s-2); }
.cta-band :focus-visible { outline-color: #fff; }

@media (min-width: 600px) {
  .cta-band { padding: var(--s-8) var(--s-7); }
  .cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ==========================================================================
   14. PROSA (HTML de MarkdownService y páginas legales)
   ========================================================================== */

.prose { color: var(--ink-soft); font-size: var(--fs-base); line-height: 1.7; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2, .prose h3, .prose h4 { color: var(--ink); }
.prose h2 { margin-top: var(--s-7); font-size: var(--fs-xl); }
.prose h3 { margin-top: var(--s-6); font-size: var(--fs-lg); }
.prose h4 { margin-top: var(--s-5); font-size: var(--fs-md); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--accent); font-weight: 700; }
.prose li > ul, .prose li > ol { margin-top: var(--s-2); }
.prose a { color: var(--accent); font-weight: 600; text-decoration: underline; }
.prose a:hover { color: var(--accent-hover); }
.prose strong { color: var(--ink); }
.prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-sunken);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.prose blockquote {
  margin-inline: 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--accent-softer);
  color: var(--ink);
}
.prose hr { margin-block: var(--s-6); }

/* ==========================================================================
   15. FORMULARIOS (maquetación)
   ========================================================================== */

/* Los campos (.field, .input, .select, .textarea, .input-unit, .password-field), las casillas
   (.check) y sus estados son de branding.css. Aquí, cómo se reparten en la página. */

.form-grid { display: grid; gap: var(--s-4); }
.form-grid > * { min-width: 0; }
.form-actions { display: flex; flex-direction: column-reverse; gap: var(--s-3); margin-top: var(--s-5); }
.form-section + .form-section { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line-soft); }
.form-section__title { margin-bottom: var(--s-4); font-size: var(--fs-md); }
.form-section__hint { margin-top: calc(var(--s-3) * -1); margin-bottom: var(--s-4); font-size: var(--fs-sm); color: var(--muted); }

/* Documento de identidad (partials/document-fields): país + número en un <fieldset>. El legend
   flota, como el de las preguntas del cuestionario, para que respete su margen y no se monte sobre
   la rejilla de los dos campos. */
.doc-fields::after { content: ""; display: block; clear: both; }
.doc-fields__legend { float: left; width: 100%; margin-bottom: var(--s-3); font-size: var(--fs-base); font-weight: 700; color: var(--ink); }
.doc-fields__legend + * { clear: both; }

/* Casillas legales (privacidad, datos de salud, comunicaciones). */
.consent {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.consent .check + .check { border-top: 1px solid var(--line); }
.consent a { font-weight: 600; }
.consent__note { padding-block: var(--s-2); font-size: var(--fs-xs); color: var(--muted); }

@media (min-width: 600px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
  .form-grid__full { grid-column: 1 / -1; }
  .form-actions { flex-direction: row; justify-content: flex-end; align-items: center; }
}

/* ==========================================================================
   17. CUESTIONARIO (flujo "Empezar consulta")
   ========================================================================== */

.quiz { flex: 1; padding-block: var(--s-5) var(--s-7); background: var(--bg-soft); }
.quiz__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.quiz__topic { display: flex; align-items: center; gap: var(--s-3); font-weight: 700; letter-spacing: -0.01em; }
.quiz__topic > span:not(.icon-tile) { flex: 1; min-width: 0; }
.quiz__exit { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.quiz__progress { display: grid; gap: var(--s-2); }
.quiz__count { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.quiz__count strong { color: var(--ink); }
.quiz__intro { margin-bottom: var(--s-5); color: var(--ink-soft); }

/* Barra de progreso: <progress> nativo (accesible y actualizable con .value desde JS). */
.progress {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  color: var(--accent);
  -webkit-appearance: none;
          appearance: none;
}
.progress::-webkit-progress-bar { background: var(--bg-sunken); border-radius: var(--r-pill); }
.progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-pill); transition: width .4s var(--ease); }
.progress::-moz-progress-bar { background: var(--accent); border-radius: var(--r-pill); }

/* Tarjeta de pregunta. Suele ser un <fieldset> con <legend class="quiz__label">: el float
   evita que el legend se monte sobre el borde de la tarjeta. */
.quiz__question {
  display: block;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}
.quiz__question + .quiz__question { margin-top: var(--s-4); }
.quiz__question::after { content: ""; display: block; clear: both; }
.quiz__label {
  float: left;
  width: 100%;
  font-size: var(--fs-lg);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.quiz__label + * { clear: both; }
.quiz__help { padding-top: var(--s-2); color: var(--muted); }
/* padding y no margin: el margen se lo "comería" el clear del legend flotante. */
.quiz__field { padding-top: var(--s-5); clear: both; }
.quiz__question--info { background: var(--accent-softer); border-color: var(--accent-line); }

/* Aviso de alerta clínica: el mensaje del primer bloque «flag» que se cumple. */
.quiz-flag {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--bg));
  border-left: 4px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--warn-soft);
  color: color-mix(in srgb, var(--warn) 55%, var(--ink));
  font-size: var(--fs-sm);
  animation: ddr-rise .3s var(--ease);
}
.quiz-flag svg { margin-top: 1px; color: var(--warn); }
.quiz-flag strong { display: block; color: var(--ink); }

/* Navegación Atrás / Siguiente: fija al fondo en móvil (el body reserva su alto), normal desde tablet. */
.quiz__nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: calc(var(--cta-h) + var(--safe-b));
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + var(--safe-b));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
          backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 -10px 30px color-mix(in srgb, var(--ink) 9%, transparent);
}
/* El botón de avanzar es .btn--primary o, en el cuestionario y en /datos, .btn--brand (el color fijo de la marca). */
.quiz__nav > :is(.btn--primary, .btn--brand) { flex: 1; }
.quiz__nav > .btn--ghost, .quiz__nav > .btn--secondary { flex: none; }

/* Selector de tema inicial: "¿Sobre qué tema quieres consultar?" */
.topic-picker { display: grid; gap: var(--s-3); list-style: none; }
.topic-picker__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 88px;
  padding: var(--s-4);
  border: 1.5px solid color-mix(in srgb, var(--muted) 30%, var(--line));
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
.topic-picker__card:hover { color: var(--ink); }
.topic-picker__card:focus-visible { border-radius: var(--r-lg); }
.topic-picker__card:active { transform: scale(.995); }
.topic-picker__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.topic-picker__name { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.015em; }
.topic-picker__desc { font-size: var(--fs-sm); color: var(--ink-soft); }
.topic-picker__meta { margin-top: var(--s-1); font-size: var(--fs-xs); font-weight: 650; color: var(--accent-hover); }
.topic-picker__arrow { flex: none; color: var(--muted); transition: transform .25s var(--ease), color .25s var(--ease); }
.topic-picker__card:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); box-shadow: inset 0 0 0 1px var(--accent); }
.topic-picker__card:has(input:focus-visible) { box-shadow: var(--ring); }

/* Subida de foto. Sin JS se ve el <input type="file"> nativo; consulta.js añade .is-enhanced
   a .upload para ocultarlo y usar la zona de toque + la vista previa. */
.upload { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.upload__input { width: 100%; min-height: var(--tap); font-size: var(--fs-base); }
.upload__drop {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  border: 2px dashed var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--accent-softer);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.upload__drop strong { font-size: var(--fs-base); color: var(--ink); }
.upload__drop svg { color: var(--accent); }
.upload.is-enhanced .upload__input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.upload.is-enhanced .upload__drop { display: flex; }
.upload.is-enhanced .upload__input:focus-visible + .upload__drop { border-color: var(--accent); box-shadow: var(--ring); }
.upload.is-dragover .upload__drop, .upload__drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.upload.has-file .upload__drop { display: none; }
.upload__preview {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.upload__thumb { flex: none; width: 72px; height: 72px; border-radius: var(--r-sm); object-fit: cover; background: var(--bg-sunken); }
.upload__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-sm); }
.upload__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__size { color: var(--muted); }

/* Pantalla de confirmación (consulta enviada). */
.quiz-done { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-6) var(--s-5); text-align: center; }
.quiz-done__icon {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok-soft) 55%, transparent);
  animation: ddr-pop .5s var(--ease);
}
.quiz-done__title { font-size: var(--fs-xl); letter-spacing: -0.03em; }
.quiz-done__text { max-width: 34rem; color: var(--ink-soft); }
.quiz-done__next { width: 100%; margin-top: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); text-align: left; }

/* El PAGO EN LÍNEA (partials/online-pay, online-pay.js y el .js de cada pasarela, que son plugins:
   docs/PLUGINS.md): los botones de Apple Pay, Google Pay y PayPal (cada uno en su hueco,
   .online-pay__slot, los que el dispositivo y la pasarela admiten), el divisor «o paga con tarjeta» y
   el formulario de la tarjeta (.online-pay__host), que pinta la pasarela en sus marcos. Las clases de
   dentro (.online-pay__element, __fields, __field, __row, __apple) son las que usa el JavaScript de las
   pasarelas para pintar lo suyo con el aspecto de la web: forman parte del estándar de los plugins. Lo
   comparten la pantalla de pago de la consulta y el área de paciente (que carga también site.css). */
/* `isolation`: sus propios planos. El SDK de PayPal pone `z-index: 100` a sus marcos (y 200 al de mientras
   carga), el mismo que la cabecera fija: sin esto, sus botones y su formulario de tarjeta pasaban por
   ENCIMA de la cabecera y de la barra del cuestionario al hacer scroll (lo vio Pablo). */
.online-pay { display: grid; gap: var(--s-4); width: 100%; max-width: 34rem; margin: 0 auto; text-align: left; isolation: isolate; }
.online-pay__consent { text-align: left; }
.online-pay__express { display: grid; gap: var(--s-3); }
.online-pay__slot { min-height: var(--tap); }
/* Un botón que espera a su pasarela tras pulsarlo (el de tarjeta de PayPal mientras se crea su pedido): un
   velo con la ruedita encima de su marco, sin quitarle los clics. */
.online-pay__slot.is-waiting { position: relative; }
.online-pay__slot.is-waiting::after {
  content: ""; position: absolute; inset: 0; z-index: 300; pointer-events: none; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.online-pay__slot.is-waiting::before {
  content: ""; position: absolute; top: calc(var(--tap) / 2 - 11px); right: var(--s-4); z-index: 301; pointer-events: none;
  width: 22px; height: 22px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  color: var(--ink); animation: ddr-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .online-pay__slot.is-waiting::before { animation-duration: 2s; } }
.online-pay__divider { display: flex; align-items: center; gap: var(--s-3); margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.online-pay__divider::before, .online-pay__divider::after { content: ""; flex: 1 1 0; border-top: 1px solid var(--line); }
.online-pay__card { display: grid; gap: var(--s-4); }
.online-pay__host { display: grid; gap: var(--s-2); }
.online-pay__host:empty { display: none; }
/* El elemento de una pasarela que pinta la tarjeta entera en su marco (el Payment Element de Stripe). */
.online-pay__element { min-height: 2rem; }
/* Los campos de una tarjeta, cada uno en su marco (los de PayPal), y la fila de la caducidad y el código. */
.online-pay__fields { display: grid; gap: var(--s-2); }
.online-pay__field { min-height: var(--tap); }
.online-pay__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); }
.online-pay__btn { min-height: var(--tap); }
/* El botón nativo de Apple Pay de Safari, para una pasarela que no trae el suyo (su aspecto lo dibuja el
   propio navegador). */
.online-pay__apple { display: block; width: 100%; height: var(--tap); border: 0; border-radius: var(--r-md); -webkit-appearance: -apple-pay-button; -apple-pay-button-type: pay; -apple-pay-button-style: black; cursor: pointer; }
.online-pay__status[hidden], .online-pay__error[hidden], .online-pay__express[hidden], .online-pay__slot[hidden],
.online-pay__divider[hidden], .online-pay__card[hidden], .online-pay__element[hidden], .online-pay__fields[hidden] { display: none; }
.online-pay__secure { display: flex; align-items: center; justify-content: center; gap: var(--s-1); text-align: center; }
.online-pay__noscript { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); }
/* La RETENCIÓN (la 097): el pago de un tratamiento nuevo se reserva y se cobra cuando un médico lo declara apto. Lo dice
   una nota con el candado, en el acento de la web (no es un aviso: no hay nada que corregir). */
.online-pay__hold { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-softer); color: var(--ink); font-size: var(--fs-sm); }
.online-pay__hold svg { flex: none; margin-top: 2px; color: var(--accent); }
/* Con la transferencia elegida, el pago en línea queda plegado debajo (consulta/pay). */
.pay-alt { width: 100%; max-width: 34rem; margin: 0 auto; text-align: left; }
.pay-alt > summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: flex; align-items: center; gap: var(--s-2); }
.pay-alt[open] > summary { margin-bottom: var(--s-3); }
@keyframes ddr-pop { from { opacity: 0; transform: scale(.6); } }

/* Código de consulta (DT-7K2M9Q). */
.code-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1.5px dashed var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-softer);
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.code-badge--sm { padding: 2px var(--s-2); border-width: 1px; font-size: var(--fs-sm); letter-spacing: 0.04em; }

@media (hover: hover) {
  .topic-picker__card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .topic-picker__card:hover .topic-picker__arrow { color: var(--accent); transform: translateX(4px); }
}
@media (min-width: 600px) {
  .quiz { padding-block: var(--s-7) var(--s-8); }
  .quiz__question { padding: var(--s-6); }
  .quiz__label { font-size: var(--fs-xl); }
  .quiz__nav {
    position: static;
    min-height: 0;
    margin-top: var(--s-5);
    padding: 0;
    justify-content: space-between;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: none;
  }
  .quiz__nav > :is(.btn--primary, .btn--brand) { flex: none; min-width: 220px; margin-left: auto; }
  .topic-picker__card { padding: var(--s-5); }
  .quiz-done { padding: var(--s-7); }
  .quiz-done__title { font-size: var(--fs-2xl); }
}

/* ==========================================================================
   18. AUTENTICACIÓN DE PACIENTES
   ========================================================================== */

.auth {
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: var(--s-5) var(--gutter) var(--s-7);
  background:
    radial-gradient(36rem 22rem at 100% 0%, var(--accent-soft), transparent 65%),
    var(--bg-soft);
}
.auth__card {
  width: 100%;
  max-width: 460px;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-md);
}
.auth__card--wide { max-width: 640px; }
.auth__title { margin-top: var(--s-5); font-size: var(--fs-xl); letter-spacing: -0.03em; }
.auth__card > .auth__title:first-child { margin-top: 0; }
.auth__subtitle { margin-top: var(--s-2); margin-bottom: var(--s-5); color: var(--ink-soft); }
.auth__footer { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--ink-soft); text-align: center; }
.auth__footer a { font-weight: 650; }
.auth__aside { max-width: 460px; margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--muted); text-align: center; }
/* La 106: el código de la verificación en dos pasos del paciente (patient/verify), grande y espaciado, y la nota de
   «Recordar este dispositivo»; el pie que es un formulario («Enviarme otro código»), sin raya doble. */
.input--code { font-family: var(--font-mono); font-size: var(--fs-xl); letter-spacing: .3em; text-align: center; }
.check__hint { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
form.auth__footer + .auth__footer { margin-top: var(--s-2); padding-top: 0; border-top: 0; }

/* Pestañas tipo control segmentado (Entrar / Crear cuenta). Son enlaces, no JS. */
.tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
}
.tabs__tab {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab:focus-visible { border-radius: var(--r-pill); }
.tabs__tab.is-active, .tabs__tab[aria-current="page"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sm); }

@media (min-width: 600px) {
  .auth { padding-block: var(--s-7) var(--s-8); }
  .auth__card { padding: var(--s-7); }
}

/* ==========================================================================
   19. ÁREA DE PACIENTE
   ========================================================================== */

/* El MARCO del área de paciente —menú lateral, cabecera, tablero, tarjetas de consulta y
   detalle— vive en patient.css, que solo cargan las páginas de /cuenta: es una
   aplicación a todo el ancho y no tiene por qué pesar en cada página de la web. Aquí quedan las
   piezas que comparte con el flujo de consulta (/consulta/…/datos y la pantalla de enviada):
   .meta-grid, .answers, .attachments y el hilo .thread. */

.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0; }
.meta-grid dt { font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.meta-grid dd { margin: 2px 0 0; font-weight: 600; }
.meta-grid__full { grid-column: 1 / -1; }

/* Respuestas del cuestionario (lista de definición). */
.answers { margin: 0; }
.answers__item { padding-block: var(--s-3); border-bottom: 1px solid var(--line-soft); }
.answers__item:first-child { padding-top: 0; }
.answers__item:last-child { padding-bottom: 0; border-bottom: 0; }
.answers__q { font-size: var(--fs-sm); color: var(--muted); }
.answers__a { margin: 2px 0 0; font-weight: 600; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.answers__a ul { padding-left: 1.2em; font-weight: 600; }
.answers__edit { float: right; margin-left: var(--s-3); font-size: var(--fs-sm); font-weight: 650; }
.answers__item--flag { margin-block: var(--s-2); padding: var(--s-3); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--bg)); border-radius: var(--r-sm); background: var(--warn-soft); }
.answers__flag { display: flex; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--fs-sm); color: color-mix(in srgb, var(--warn) 60%, var(--ink)); }
.answers__flag svg { margin-top: 2px; color: var(--warn); }

/* Adjuntos en miniatura. */
.attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--s-3); list-style: none; }
.attachments__item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.attachments__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.attachments__item:focus-visible { border-radius: var(--r-md); }

/* Hilo de mensajes. El cuerpo se imprime con e() SIN nl2br: el CSS conserva los saltos. */
.thread { display: flex; flex-direction: column; gap: var(--s-4); list-style: none; }
.thread__msg { display: flex; flex-direction: column; gap: var(--s-1); max-width: 90%; }
.thread__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--fs-xs); color: var(--muted); }
.thread__author { font-weight: 700; color: var(--ink-soft); }
.thread__bubble {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
.thread__msg--doctor { align-self: flex-start; align-items: flex-start; }
.thread__msg--doctor .thread__bubble { border: 1px solid var(--line); border-bottom-left-radius: 6px; background: var(--bg-soft); color: var(--ink); }
.thread__msg--patient { align-self: flex-end; align-items: flex-end; }
.thread__msg--patient .thread__bubble { border-bottom-right-radius: 6px; background: var(--accent); color: var(--accent-ink); }
.thread__msg--patient .thread__meta { justify-content: flex-end; }
.thread__msg--system { align-self: center; align-items: center; max-width: 100%; }
/* Radio de tarjeta y no de píldora: un hito puede llevar la nota del médico (varias
   líneas), y con un radio de 999px el texto de la primera y la última línea se salía del fondo. */
.thread__msg--system .thread__bubble {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
}
.thread__form { display: grid; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
.thread__form .textarea { min-height: 112px; }

@media (hover: hover) {
  .attachments__item:hover img { transform: scale(1.06); }
}
@media (min-width: 600px) {
  .thread__msg { max-width: 78%; }
}

/* ==========================================================================
   20. FLASH, TOASTS Y ESTADO VACÍO
   ========================================================================== */

/* Los avisos (.alert y sus variantes) son de branding.css. */

/* Flash visible sin JS (layouts/site.php lo pinta antes del contenido). */
.flash-inline { display: grid; gap: var(--s-3); padding-top: var(--s-4); padding-bottom: var(--s-4); }

/* Toasts (ui.js). Arriba, bajo la cabecera: abajo ya viven el banner CTA y el de cookies. */
.toast-host {
  position: fixed;
  top: calc(var(--header-h) + var(--s-3));
  left: var(--s-3); right: var(--s-3);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  max-width: 440px;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-left: 4px solid var(--muted);
  border-radius: var(--r-md);
  background: var(--night);
  color: #fff;
  font-size: var(--fs-sm);
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: ddr-toast-in .3s var(--ease);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast--ok   { border-left-color: color-mix(in srgb, var(--ok) 60%, #fff); }
.toast--err  { border-left-color: color-mix(in srgb, var(--danger) 55%, #fff); }
.toast--warn { border-left-color: color-mix(in srgb, var(--warn) 55%, #fff); }
.toast--info { border-left-color: color-mix(in srgb, var(--info) 50%, #fff); }
.toast__msg { flex: 1; min-width: 0; padding-block: 4px; }
/* 44px de objetivo táctil sin agrandar el toast: los márgenes negativos absorben el crecimiento. */
.toast__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: -8px -8px -8px 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  opacity: .7;
}
.toast__close:hover { opacity: 1; background: color-mix(in srgb, #fff 12%, transparent); }
.toast__close:focus-visible { outline-color: #fff; }
.toast.is-leaving { opacity: 0; transform: translateY(-8px); }
@keyframes ddr-toast-in { from { opacity: 0; transform: translateY(-12px); } }

/* Estado vacío. */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-5);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  text-align: center;
}
.empty__title { font-size: var(--fs-lg); }
.empty__text { max-width: 30rem; color: var(--ink-soft); }
.empty .btn { margin-top: var(--s-2); }

@media (min-width: 900px) {
  .toast-host { left: auto; right: var(--s-5); width: 400px; align-items: flex-end; }
}

/* ==========================================================================
   21. TABLAS Y PAGINACIÓN
   ========================================================================== */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.table th { background: var(--bg-soft); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-5); }
.pagination__pages { display: none; align-items: center; gap: var(--s-1); list-style: none; }
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-width: var(--tap); min-height: var(--tap);
  padding-inline: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 650;
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.pagination__link:hover { border-color: var(--accent); color: var(--accent-hover); }
.pagination__link:focus-visible { border-radius: var(--r-md); }
.pagination__link.is-current { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.pagination__link.is-disabled { opacity: .45; pointer-events: none; }
.pagination__gap { display: inline-grid; place-items: center; min-width: 28px; color: var(--muted); }
/* Móvil: Anterior ←→ Siguiente en una fila y "Página X de Y" debajo; los números, desde tablet. */
.pagination__info { order: 5; flex: 1 0 100%; font-size: var(--fs-sm); color: var(--muted); text-align: center; }

@media (min-width: 600px) {
  .pagination { justify-content: center; gap: var(--s-3); }
  .pagination__pages { display: flex; }
}

/* ==========================================================================
   22. IMPRESIÓN Y ACCESIBILIDAD
   ========================================================================== */

@media (forced-colors: active) {
  .topic-picker__card { border: 1px solid currentColor; }
  .hero__badge::before, .check-list li::before, .steps__item::before { forced-color-adjust: none; }
  /* El texto de la tarjeta de médico pasa a ser el del sistema y el degradado deja de sostenerlo:
     sin un fondo opaco quedaría escrito sobre la foto. */
  .doctor-card__body { background: Canvas; }
}

@media print {
  .site-header, .cta-bar, .cookie-banner, .quiz-reminders, .toast-host, .quiz__nav, .skip-link, .site-footer__grid, .site-footer__grid--info, .thread__form { display: none !important; }
  body, body.has-cta { padding-bottom: 0; background: #fff; }
  .site-footer { background: none; color: #000; padding-block: var(--s-4); }
  .section, .quiz { padding-block: var(--s-4); background: none; }
  .card, .quiz__question, .consult-card { box-shadow: none; break-inside: avoid; }
  a { color: inherit; }
}

/* La VENTANA de confirmación de ui.js (UI.confirm(), [data-confirm]; lo pidió Pablo: «nada de avisos del
   navegador, modales»): centrada, con el título, el texto y los dos botones; la misma en la web, el área de
   paciente y el panel (por eso va en site.css y en panel.css). */
.ui-dialog {
  width: calc(100% - 2 * var(--s-4));
  max-width: 460px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.ui-dialog[open] { animation: ui-dialog-in .2s var(--ease); }
.ui-dialog::backdrop { background: rgba(12, 26, 38, .55); }
.ui-dialog__body { display: grid; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-4); }
.ui-dialog__title { margin: 0; color: var(--ink); font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; }
.ui-dialog__text { margin: 0; color: var(--ink-soft); white-space: pre-line; }
.ui-dialog__text[hidden] { display: none; }
.ui-dialog__foot { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-5); }
.ui-dialog__foot .btn { flex: 1 1 auto; }
@media (min-width: 520px) { .ui-dialog__foot .btn { flex: 0 0 auto; } }
@keyframes ui-dialog-in { from { transform: translateY(12px); } to { transform: none; } }