/* ==========================================================================
   Dr. Ricardo Alberto Montes Ríos · Otorrinolaringólogo en Reynosa
   Hoja de estilos única. Valores tomados de docs/01-sistema-de-diseno.md.
   Índice:
     1. Tipografías
     2. Variables
     3. Reset mínimo
     4. Contenedor y secciones
     5. Tipografía
     6. Botones
     7. Utilidades
   ========================================================================== */

/* 1. Tipografías ========================================================== */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/figtree-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/figtree-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
}
/* Great Vibes (SIL Open Font License 1.1, docs/01): solo la frase manuscrita
   de la portada del Inicio («Tu salud en manos expertas»). Subconjunto latino. */
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/great-vibes-latin-400-normal.woff2') format('woff2');
}

/* 2. Variables ============================================================ */

:root {
  /* Oscuros */
  --bg:            #141210;
  --bg-deep:       #0E0C0B;
  --bg-strip:      #181614;
  --surface:       #1E1B18;
  --bg-ilus:       #151210; /* fondo de las ilustraciones SVG */
  --line-dark:     #2A2621;
  --line-dark-2:   #2E2A25;
  --line-dark-3:   #5A5148;
  --line-paso:     #4A4038; /* línea base de los pasos animados del Inicio */
  /* Texto sobre oscuro */
  --ink-on-dark:   #F5EFE6;
  --text-on-dark:  #EDE6DC;
  --lead-on-dark:  #C9C1B6;
  --muted-on-dark: #B5ADA3;
  --meta-on-dark:  #8F877D;
  /* Marca */
  --gold:          #C49A6C;
  --gold-hover:    #E0C49E;
  --gold-ink:      #7A5631;
  --gold-ink-2:    #5C3F22;
  /* Claros */
  --cream:         #F5F0E8;
  --cream-2:       #FBF8F3;
  --white:         #FFFFFF;
  --line-light:    #E4DCD0;
  --line-light-2:  #D8CEC0;
  --line-light-3:  #CFC4B5;
  --cream-pildora: #EAE1D3; /* fondo de las píldoras de Estudios de audición */
  /* Texto sobre claro */
  --ink:           #1C1A18;
  --text:          #3D3833;
  --text-2:        #4A443D;
  --muted:         #5E5750;
  --text-nota:     #3A342D; /* nota al pie de Estudios de audición */
  /* Estado */
  --disponible:    #6FBF8B;
  /* Tipografía */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Medidas */
  --container: 1200px;
  --gutter: 24px;
  --section-y: 104px;
  /* Altura real del header fijo y de la barra superior (se reasignan en
     ≤ 900 px). El header: 18 + 56 del logo + 18, más 1 de borde. La barra:
     10 + 32 del selector de idioma + 10, más 1 de borde. */
  --header-h: 93px;
  --topbar-h: 53px;
  --radius-card: 4px;
  --radius-field: 8px;
  --radius-pill: 999px;

  /* Tokens de contexto. El sitio es oscuro por defecto; las secciones claras
     y las islas oscuras los reasignan (ver .on-light / .on-dark). Los
     componentes usan solo estos, así sirven en los dos fondos. */
  --c-ink:          var(--ink-on-dark);
  --c-text:         var(--text-on-dark);
  --c-lead:         var(--lead-on-dark);
  --c-muted:        var(--muted-on-dark);
  --c-meta:         var(--meta-on-dark);
  --c-accent:       var(--gold);
  --c-accent-hover: var(--gold-hover);
  --c-line:         var(--line-dark);
  --c-line-2:       var(--line-dark-2);
  --c-line-3:       var(--line-dark-3);
  --c-surface:      var(--surface);
  --c-focus:        var(--gold);
}

/* Islas claras dentro de un fondo oscuro, y viceversa. Las secciones claras
   aplican .on-light automáticamente más abajo. */
.on-light {
  --c-ink:          var(--ink);
  --c-text:         var(--text);
  --c-lead:         var(--muted);
  --c-muted:        var(--muted);
  --c-meta:         var(--muted);
  --c-accent:       var(--gold-ink);
  --c-accent-hover: var(--gold-ink-2);
  --c-line:         var(--line-light);
  --c-line-2:       var(--line-light-2);
  --c-line-3:       var(--line-light-3);
  --c-surface:      var(--white);
  --c-focus:        var(--gold-ink);
  color: var(--c-text);
}

.on-dark {
  --c-ink:          var(--ink-on-dark);
  --c-text:         var(--text-on-dark);
  --c-lead:         var(--lead-on-dark);
  --c-muted:        var(--muted-on-dark);
  --c-meta:         var(--meta-on-dark);
  --c-accent:       var(--gold);
  --c-accent-hover: var(--gold-hover);
  --c-line:         var(--line-dark);
  --c-line-2:       var(--line-dark-2);
  --c-line-3:       var(--line-dark-3);
  --c-surface:      var(--surface);
  --c-focus:        var(--gold);
  color: var(--c-text);
}

/* 3. Reset mínimo ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Red de seguridad contra el scroll horizontal. clip y no hidden: hidden
     convierte al body en contenedor de scroll y rompe el header sticky. */
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; }
ul.list-plain,
ol.list-plain { list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--c-accent); }
a:hover { color: var(--c-accent-hover); }

button { font: inherit; color: inherit; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Destino de anclas: que el header fijo no tape el título. */
:target,
#contenido,
#doctor,
#consultorio, #office,
#chatbot { scroll-margin-top: var(--header-h); }
/* Paneles de pestañas abiertos por # (p. ej. #ronquido o #cx-panel-3, que
   main.js abre y desplaza): 16px de aire bajo el header, como .orienta-panel.
   Va después de :target, con la misma especificidad, para ganarle; #ronquido
   y #snoring salieron de la regla de arriba porque su id le ganaría. */
[role="tabpanel"] { scroll-margin-top: calc(var(--header-h) + 16px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 4. Contenedor y secciones =============================================== */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* Fondos del sitio, en el orden de docs/01 */
.section--dark   { background: var(--bg); }
.section--deep   { background: var(--bg-deep); }
.section--strip  { background: var(--bg-strip); }
.section--cream  { background: var(--cream); }
.section--cream2 { background: var(--cream-2); }

/* Las secciones claras heredan los tokens claros sin repetir clase. */
.section--cream,
.section--cream2 {
  --c-ink:          var(--ink);
  --c-text:         var(--text);
  --c-lead:         var(--muted);
  --c-muted:        var(--muted);
  --c-meta:         var(--muted);
  --c-accent:       var(--gold-ink);
  --c-accent-hover: var(--gold-ink-2);
  --c-line:         var(--line-light);
  --c-line-2:       var(--line-light-2);
  --c-line-3:       var(--line-light-3);
  --c-surface:      var(--white);
  --c-focus:        var(--gold-ink);
  color: var(--c-text);
}

/* 5. Tipografía =========================================================== */

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--c-ink);
}

h1 {
  font-size: clamp(44px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

/* Portada del Inicio: el antetítulo va dentro del h1 (frase clave de SEO
   local), por eso el h1 se compone en columna. */
.h1-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.h1-hero .eyebrow { color: var(--c-accent); }
.h1-main {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.h1-main em {
  font-style: italic;
  color: var(--gold);
}

h2 {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
}
/* H2 de páginas internas */
.h2-sm {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
}
/* H2 de las secciones del Inicio que en el mockup llegan a 52px:
   El doctor, Preguntas frecuentes y Consultorio. */
.h2-md {
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 1.05;
}

h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-ink);
}
.h3-sm { font-size: 20px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.label--wide { letter-spacing: 0.18em; }
.label--tight { letter-spacing: 0.14em; }

.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--c-lead);
  max-width: 34em;
}
.lead--sm { font-size: 17px; }

.meta {
  font-size: 13px;
  color: var(--c-meta);
}

/* Números decorativos: pasos, «01 · Nariz», cifras de la portada.
   El color lo pone el contexto: dorado en pasos y antetítulos de tarjeta,
   --c-ink en las cifras de la portada. */
.serif-num {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
}
.serif-num--ink { color: var(--c-ink); }

/* 6. Botones ============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--bg);
}

.btn--secondary {
  background: transparent;
  border-color: var(--c-line-3);
  color: var(--c-ink);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--c-accent);
  color: var(--c-ink);
}

/* Píldora oscura sobre fondo claro: «Enviar WhatsApp» de las preguntas
   frecuentes del Inicio. 48px de alto. */
.btn--oscuro {
  min-height: 48px;
  padding: 12px 22px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.btn--oscuro:hover,
.btn--oscuro:focus-visible {
  background: var(--text);
  border-color: var(--text);
  color: var(--cream);
}

/* Botón del header y botones compactos: píldora de 44px. */
.btn--nav {
  min-height: 44px;
  padding: 12px 20px;
}

.btn--block {
  display: flex;
  width: 100%;
  min-height: 48px;
}

.btn svg { flex: none; }

/* Enlace de texto con flecha: «Ver tratamiento →» */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-accent);
}

/* 7. Utilidades =========================================================== */

/* Marca de agua del isotipo. */
.watermark {
  position: absolute;
  opacity: .05;
  pointer-events: none;
  width: auto;
  max-width: none;
}

.stack {
  display: flex;
  flex-direction: column;
}

/* Evita que un número de cédula o certificación se parta en dos líneas. */
.nowrap { white-space: nowrap; }

/* Variantes de texto por ancho. Se invierten en la media query de ≤ 900 px. */
.solo-movil { display: none; }
.solo-escritorio { display: inline; }

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: invisible hasta recibir el foco con el teclado. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 110;
}
.skip-link:focus {
  left: var(--gutter);
  top: 8px;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--bg);
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
}

/* 8. Barra superior ======================================================= */

.topbar {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-dark);
  font-size: 13px;
  color: var(--muted-on-dark);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
  padding-block: 10px;
}
.topbar__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
}
.topbar__item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.topbar__item svg {
  flex: none;
  stroke: var(--gold);
}

/* Selector de idioma: el activo en --ink-on-dark 600, el otro en --muted. */
.langsel {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0;
}
.langsel__on {
  color: var(--ink-on-dark);
  font-weight: 600;
}
.langsel__sep { color: var(--text-2); }
.langsel__off {
  color: var(--muted-on-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.langsel__off:hover { color: var(--ink-on-dark); }

/* 9. Header =============================================================== */

/* Fijo arriba al hacer scroll; la barra superior no se fija y se va con la
   página. Fondo sólido para que el contenido no se vea por debajo.
   Escala de z-index (docs/01): contenido sin z-index · botones flotantes 30 ·
   barra de acciones móvil 90 · header 100 (el panel del menú va dentro, así que también queda encima) ·
   salto al contenido 110. Ningún elemento de contenido lleva z-index. */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line-dark);
}
.header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}
.header__logo {
  display: block;
  line-height: 0;
}
.header__logo img { height: 56px; width: auto; }

/* Logo y botón «Inicio» juntos, para que el space-between del header no
   reparta el botón al centro. */
.header__marca {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
/* Botón «Inicio» («B · Píldora»): 40px de alto visible (no hace crecer el
   header) y 44px de área táctil con ::after. En el Inicio no se muestra. */
.header__inicio {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(196, 154, 108, .45);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ink-on-dark);
  text-decoration: none;
}
.header__inicio::after {
  content: "";
  position: absolute;
  inset: -3px;
}
.header__inicio svg {
  flex: none;
  color: var(--gold);
}
.header__inicio:hover { color: var(--ink-on-dark); }
@media (hover: hover) {
  .header__inicio:hover { background: rgba(196, 154, 108, .12); }
}
.header__inicio:focus-visible { border-radius: var(--radius-pill); }
/* En el Inicio el botón no se ve mientras la portada está en pantalla. Al
   bajar de ella main.js pone .header--inicio-visible y aparece con un
   fundido. Se oculta con visibility (y no con display) para poder animarlo:
   sigue fuera del tabulador y de los lectores de pantalla, y conserva su
   espacio, así que al aparecer no mueve el logo ni el menú. Sin JS, oculto. */
body[data-pagina="inicio"] .header__inicio {
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
body[data-pagina="inicio"] .header--inicio-visible .header__inicio {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  body[data-pagina="inicio"] .header__inicio { transition: none; }
  .btn { transition: none; }
}

/* Solo la casita (círculo de 40px), con el texto visualmente oculto pero
   presente para lectores de pantalla: en ≤ 360px. Con las etiquetas cortas
   del menú, la píldora completa cabe en escritorio (ver .nav). */
@media (max-width: 360px) {
  .header__inicio { padding: 9px; }
  .header__inicio-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-dark-3);
  border-radius: var(--radius-pill);
  color: var(--ink-on-dark);
  cursor: pointer;
}
.header__toggle svg { stroke: currentColor; }
.header__toggle .icono-cerrar { display: none; }
.header__toggle[aria-expanded="true"] .icono-abrir { display: none; }
.header__toggle[aria-expanded="true"] .icono-cerrar { display: block; }

/* Seis enlaces cortos por prioridades más el botón: con 24px entre enlaces,
   logo, píldora «Inicio» y menú suman ≈ 893px en español (≈ 837 en inglés),
   así que caben en un renglón desde 1000px de ancho (952 de contenedor),
   con margen. Por debajo, el menú pasa al botón ☰. */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
}
.nav__link {
  color: var(--text-on-dark);
  text-decoration: none;
  padding-block: 12px;
}
.nav__link:hover { color: var(--gold-hover); }

/* Enlace activo en dorado. El atributo lo pone cada página en el <body>,
   así la barra y el header quedan idénticos en los 21 archivos. */
body[data-pagina="tratamientos"]  .nav__link[data-nav="tratamientos"],
body[data-pagina="audiologia"]    .nav__link[data-nav="audiologia"],
body[data-pagina="adaptacion"]    .nav__link[data-nav="adaptacion"],
body[data-pagina="doctor"]        .nav__link[data-nav="doctor"],
body[data-pagina="consultorio"]   .nav__link[data-nav="consultorio"] {
  color: var(--gold);
}

/* 10. Pie de página ======================================================= */

.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-dark);
  color: var(--muted-on-dark);
  font-size: 14px;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-block: 64px 32px;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.site-footer__marca {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.site-footer__marca img { width: 220px; height: auto; }

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__col a {
  color: #D6CEC3;
  text-decoration: none;
}
.site-footer__col a:hover { color: var(--gold-hover); }

/* Columna de enlaces («Tratamientos») en <details>. En escritorio se ve igual
   que una columna normal: summary = el rótulo, sin «+» ni aspecto clicable;
   los enlaces en columna con 10px entre sí y 10px bajo el rótulo (el gap de
   .site-footer__col). En móvil, desplegable (adaptación 16). */
.site-footer__resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
}
.site-footer__resumen::-webkit-details-marker { display: none; }
/* Doble clase: .acordeon__mas (más abajo) lo pondría en --gold-ink. */
.site-footer__resumen .site-footer__mas {
  flex: none;
  color: var(--gold);
}
.site-footer__det[open] .site-footer__mas { transform: rotate(45deg); }
.site-footer__enlaces {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
}
@media (min-width: 901px) {
  .site-footer__resumen {
    cursor: default;
    pointer-events: none;
  }
  .site-footer__mas { display: none; }
}
@supports selector(::details-content) {
  @media (min-width: 901px) {
    .site-footer__det::details-content { content-visibility: visible; }
  }
}

.redes { display: flex; gap: 10px; }
.redes a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark-2);
  border-radius: var(--radius-pill);
  color: #D6CEC3;
}
.redes a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.site-footer__legal {
  border-top: 1px solid var(--line-dark);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  font-size: 13px;
}
.site-footer__fin {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--meta-on-dark);
}
.site-footer__fin a { color: var(--muted-on-dark); }
.site-footer__fin a:last-child {
  color: var(--meta-on-dark);
  text-decoration: none;
}

/* 11. Botones flotantes (redes y WhatsApp) ================================ */

/* «Opción A»: TikTok y Facebook en círculos oscuros con borde dorado, apilados
   arriba del WhatsApp y centrados con él. El contenedor es el que va fijo, en
   el sitio que antes tenía el WhatsApp, así que este no se mueve. */
.flotantes {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.flotante {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  border: 1px solid rgba(196, 154, 108, .45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  color: var(--ink-on-dark);
}
.flotante svg {
  width: 22px;
  height: 22px;
}
.flotante:hover { color: var(--ink-on-dark); }
@media (hover: hover) {
  .flotante:hover {
    border-color: var(--gold);
    color: var(--gold);
  }
}

.fab-wa {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
.fab-wa:hover {
  background: var(--gold-hover);
  color: var(--bg);
}

/* Móvil y tableta (≤ 999px, el mismo corte del ☰): el WhatsApp se oculta
   (11 b) y TikTok y Facebook, de 44px, van apilados (TikTok arriba) a la
   derecha, encima de la barra de acciones: su borde derecho coincide con el
   de la barra (12px o, en tableta, (100% − 560px) / 2) y quedan 12px sobre
   ella (12 + 66 de la barra + 12 = 90px), con 10px entre los dos. Fondo .95
   con desenfoque, como la barra, y borde dorado fino para que se lean como
   botones al pasar sobre texto.
   Mientras la portada (.hero o .hero-trat) está en pantalla, main.js pone
   .redes-sobre-portada en <html> y las redes se ocultan (opacity +
   visibility, para que no se puedan tocar); sin JS se ven siempre. La
   transición solo se activa con .redes-animadas, que main.js pone después de
   la primera medición, para que no se vea un fundido al cargar.
   En /agendar/ y /en/book/ se ocultan mientras se ve la barra de resultados
   de la orientación, que va a esa misma altura y a todo el ancho. */
@media (max-width: 999px) {
  .flotantes {
    right: max(12px, calc(50% - 280px));
    bottom: calc(90px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .flotante {
    width: 44px;
    height: 44px;
    background: rgba(20, 18, 16, .95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: var(--gold);
  }
  .flotante svg {
    width: 20px;
    height: 20px;
  }
  .redes-sobre-portada .flotantes {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
  }
  .redes-animadas .flotantes {
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
  }
  .redes-animadas.redes-sobre-portada .flotantes {
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  body:has(.orienta-barra:not([hidden])) .flotantes { display: none; }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) {
  .redes-animadas .flotantes,
  .redes-animadas.redes-sobre-portada .flotantes { transition: none; }
}
/* Escritorio (≥ 1000px), solo en el Inicio (:has(.pv2)): mientras la portada
   está en pantalla (.redes-sobre-portada, de main.js) se ocultan los tres
   flotantes (TikTok, Facebook y WhatsApp), que tapaban o rozaban la frase
   «Tu salud / en manos expertas» de la esquina (a 1280×800 y 1440×900).
   Igual que en ≤ 999px: opacity + visibility en el contenedor, con la
   misma transición. Sin JS o sin :has se ven siempre. */
@media (min-width: 1000px) {
  .redes-sobre-portada:has(.pv2) .flotantes {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
  }
  .redes-animadas:has(.pv2) .flotantes {
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
  }
  .redes-animadas.redes-sobre-portada:has(.pv2) .flotantes {
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
}
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
  .redes-animadas:has(.pv2) .flotantes,
  .redes-animadas.redes-sobre-portada:has(.pv2) .flotantes { transition: none; }
}

@media print {
  .flotante { display: none; }
}

/* 11 b. Barra de acciones móvil =========================================== */

/* Píldora fija abajo, solo en ≤ 999px: Agendar · WhatsApp · Llamar. Va en el
   bloque común de WhatsApp y sustituye en móvil al botón flotante. z-index 90:
   encima del contenido y por debajo del header, que lleva dentro el menú.
   Sola en su renglón y centrada: 12px a cada lado y, en tableta, 560px como
   máximo (left/right 12px + margin auto). Tres columnas iguales; 8px de
   padding, así que la píldora de WhatsApp (48px) queda a 8px del borde
   arriba y abajo: la barra mide 8 + 48 + 8 + 2 de borde = 66px. */
.barra-movil { display: none; }

@media (max-width: 999px) {
  .fab-wa { display: none; }
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .barra-movil {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    max-width: 560px;
    margin-inline: auto;
    padding: 8px;
    border-radius: var(--radius-pill);
    /* .95 y desenfoque: el texto de atrás ya no se lee a través. */
    background: rgba(20, 18, 16, .95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid #3A342D;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  }
  .barra-movil__btn {
    min-width: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px 8px;
    padding-inline: 4px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-on-dark);
    text-decoration: none;
  }
  .barra-movil__btn svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--gold);
  }
  .barra-movil__btn span { white-space: nowrap; }
  .barra-movil__btn:hover { color: var(--text-on-dark); }
  .barra-movil__btn--wa,
  .barra-movil__btn--wa:hover {
    background: var(--gold);
    color: var(--bg);
  }
  .barra-movil__btn--wa svg { color: var(--bg); }
}

/* Por debajo de 360px las columnas miden < 100px y «WhatsApp» con su ícono
   no cabe en un renglón: el ícono va arriba, en los tres botones a la vez.
   El texto nunca se corta. */
@media (max-width: 359px) {
  .barra-movil__btn { flex-direction: column; }
}

@media print {
  .barra-movil { display: none; }
  body { padding-bottom: 0; }
}

/* 12. Página 404 ========================================================== */

.p404 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 720px;
}
/* La página de gracias del formulario usa la misma composición. */
.p404__bloque,
.gracias {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gracias { max-width: 720px; }
.p404__acciones,
.gracias__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.p404__sep {
  border: 0;
  border-top: 1px solid var(--line-dark);
  margin: 0;
}

/* 13. Bloques y encabezados de sección ==================================== */

.bloque {
  display: flex;
  flex-direction: column;
}
.bloque--48 { gap: 48px; }
.bloque--56 { gap: 56px; }
.encabezado__titulo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}
.encabezado__titulo--ancho { max-width: 720px; }

/* Frase de hospitales, con el icono del edificio. */
.nota-hospitales {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--text-2);
  font-size: 15px;
}
.nota-hospitales svg {
  flex: none;
  stroke: var(--c-accent);
}

/* 14. Portada ============================================================= */

/* Base de la portada (.hero): la usan el Inicio v2 (.pv2, sección 26.1) y
   main.js. Las reglas de la portada anterior y de su franja de datos (antes
   secciones 14 y 15) se quitaron el 27/10/2026.
   Toda sección con marca de agua la recorta: hidden para navegadores viejos
   y clip donde se admite (clip no crea contenedor de scroll). */
.hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--bg);
}
.hero__marca { display: contents; }

/* 16. Ilustraciones de tratamientos ======================================= */

/* Las tarjetas de tratamiento del Inicio anterior se quitaron el 27/10/2026;
   las ilustraciones las usan el Inicio v2 y las portadas de servicios. */

/* Ilustraciones de las tarjetas de tratamientos (SVG en línea, clase .ilus-v).
   Sin JS o con «reducir movimiento»: el dibujo se ve completo y quieto.
   main.js agrega .v-anim cuando la tarjeta entra en pantalla y .v-pausa cuando sale. */
/* overflow: hidden para que ningún dibujo pinte fuera de su viewBox. */
.ilus-v { display: block; width: 100%; height: auto; overflow: hidden; }
.ilus-v .v-flow { stroke-dasharray: 2 7; }

@media (prefers-reduced-motion: no-preference) {
  .ilus-v.v-anim .v-mesh { animation: v-in 1.4s ease-out both; }
  .ilus-v.v-anim .v-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: v-draw 1.8s .2s ease-out forwards; }
  .ilus-v.v-anim .v-flow { animation: v-flow 1.1s linear infinite; }
  .ilus-v.v-anim .v-f2 { animation-delay: -.4s; }
  .ilus-v.v-anim .v-f3 { animation-delay: -.8s; }
  .ilus-v.v-anim .v-breathe { animation: v-breathe 4s ease-in-out infinite; }
  .ilus-v.v-anim .v-pulse { animation: v-pulse 3.2s ease-in-out infinite; }
  .ilus-v.v-anim .v-alt { animation-delay: -1.6s; }
  .ilus-v.v-anim .v-sway { transform-box: view-box; transform-origin: 200px 52px; animation: v-sway 3.4s ease-in-out infinite; }
  .ilus-v.v-anim .v-scan { animation: v-scan 3.2s ease-in-out infinite; }
  .ilus-v.v-anim .v-s2 { animation-delay: .8s; }
  .ilus-v.v-anim .v-s3 { animation-delay: 1.6s; }
  .ilus-v.v-anim .v-probe { animation: v-probe 3.2s ease-in-out infinite; }
  .ilus-v.v-anim .v-glow { transform-box: fill-box; transform-origin: center; animation: v-glow 1.6s ease-in-out infinite; }
  .ilus-v.v-anim .v-wave { opacity: 0; animation: v-wave 2.1s ease-out infinite; }
  .ilus-v.v-anim .v-w2 { animation-delay: .5s; }
  .ilus-v.v-anim .v-w3 { animation-delay: 1s; }
  .ilus-v.v-anim .v-graph { stroke-dasharray: 1; stroke-dashoffset: 1; animation: v-graph 4.4s ease-in-out infinite; }
  .ilus-v.v-anim .v-dot { opacity: 0; animation: v-dot 4.4s ease-out infinite; }
  .ilus-v.v-anim .v-p1 { animation-delay: .5s; }
  .ilus-v.v-anim .v-p2 { animation-delay: .95s; }
  .ilus-v.v-anim .v-p3 { animation-delay: 1.4s; }
  .ilus-v.v-anim .v-p4 { animation-delay: 1.85s; }
  .ilus-v.v-anim .v-p5 { animation-delay: 2.3s; }
  .ilus-v.v-pausa * { animation-play-state: paused !important; }
}

@keyframes v-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v-draw { to { stroke-dashoffset: 0; } }
@keyframes v-flow { to { stroke-dashoffset: -9; } }
@keyframes v-breathe { 0%, 100% { fill-opacity: .18; } 50% { fill-opacity: .62; } }
@keyframes v-pulse { 0%, 100% { fill-opacity: .22; } 50% { fill-opacity: .62; } }
@keyframes v-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes v-scan { 0% { fill-opacity: .22; } 18% { fill-opacity: .78; } 45%, 100% { fill-opacity: .22; } }
@keyframes v-probe { 0%, 100% { transform: translate(-9px, 5px); } 50% { transform: translate(0, 0); } }
@keyframes v-glow { 0%, 100% { transform: scale(.7); fill-opacity: .15; } 50% { transform: scale(1.5); fill-opacity: .4; } }
@keyframes v-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes v-graph { 0% { stroke-dashoffset: 1; opacity: 1; } 45% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes v-dot { 0% { opacity: 0; } 8%, 70% { opacity: 1; } 85%, 100% { opacity: 0; } }

/* Portadas de servicios: amígdalas, audiometría y aparatos auditivos (mismo sistema .ilus-v) */
@media (prefers-reduced-motion: no-preference) {
  .ilus-v.v-anim .v-knob { transform-box: fill-box; animation: v-knob 3.6s ease-in-out infinite; }
  .ilus-v.v-anim .v-e2 { animation-delay: -.7s; }
  .ilus-v.v-anim .v-e3 { animation-delay: -1.4s; }
  .ilus-v.v-anim .v-e4 { animation-delay: -2.1s; }
  .ilus-v.v-anim .v-e5 { animation-delay: -2.8s; }
}
@keyframes v-knob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Tarjetas del Inicio: en la miniatura de móvil (120 × 90) las etiquetas no se leen; se ocultan. */

/* 19. El doctor =========================================================== */

/* Las secciones 17 (Estudios audiológicos) y 18 (Padecimientos) del Inicio
   anterior se quitaron el 27/10/2026. */

.doctor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px 80px;
  align-items: center;
}
/* Página El doctor, portada: nombre, formación y firma (en escritorio,
   seguidos y centrados en vertical; ver abajo) y a la derecha el retrato con marco y
   ficha (componente .doctor-v2__*, el mismo de El doctor del Inicio, 26.7).
   Rejilla con áreas: en móvil la foto queda entre el subtítulo y la
   formación sin repetir HTML. Mismo corte que el Inicio: dos columnas
   desde 1000px. */
.doctor-portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.doctor-portada__abajo {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark-2);
}
.doctor-portada__formacion {
  max-width: 34em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-on-dark);
}
.doctor-portada .doctor__firma { max-width: 300px; }
/* Escritorio: como El doctor del Inicio, el texto (migas, eyebrow, nombre,
   subtítulo, línea, formación y firma) va seguido, con 24px entre
   elementos, y centrado en vertical respecto al retrato (2:3, hasta 460px
   de ancho); 88px de separación, que dejan sitio a la ficha, que sobresale
   48px a la izquierda. Las migas están fuera de .doctor-portada, así que la
   rejilla es la de .hero-trat__inner (.doctor-portada pasa a
   display: contents); las filas 1fr de arriba y abajo se quedan con el
   alto que sobra y centran el texto. En móvil no cambia nada. */
@media (min-width: 1000px) {
  body[data-pagina="doctor"] .hero-trat__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(460px, 40%);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      ".      foto"
      "migas  foto"
      "arriba foto"
      "abajo  foto"
      ".      foto";
    gap: 24px 88px;
  }
  body[data-pagina="doctor"] .hero-trat__inner > .migas { grid-area: migas; }
  body[data-pagina="doctor"] .doctor-portada { display: contents; }
  body[data-pagina="doctor"] .doctor-portada__arriba {
    grid-area: arriba;
    gap: 24px;
  }
  body[data-pagina="doctor"] .doctor-portada__abajo {
    grid-area: abajo;
    padding-top: 24px;
  }
  body[data-pagina="doctor"] .doctor-portada__foto {
    grid-area: foto;
    align-self: center;
  }
}
@media (max-width: 999px) {
  .doctor-portada .doctor__firma { max-width: 220px; }
}

/* Inicio: versión compacta (sin el párrafo de formación, que repetía las
   credenciales; sigue completo en /el-doctor/). */
#doctor h2 { font-size: clamp(34px, 3.4vw, 44px); }
#doctor .doctor__firma { max-width: 280px; }
#doctor .doctor__mas { align-self: flex-start; }

/* Inicio, escritorio: 2 columnas; el texto va en la izquierda y la derecha
   queda libre para la foto integrada (26.7). */
@media (min-width: 901px) {
  #doctor { padding-block: 88px; }
  #doctor .doctor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* Inicio, > 1099px: credenciales en 3 columnas iguales (2 renglones). En
   ~160px por columna, «Otorrinolaringología» y los números largos deben
   poder partirse. */
@media (min-width: 1100px) {
  #doctor .credenciales__item {
    min-width: 0;
    padding-right: 12px;
  }
  #doctor .credenciales dt {
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  #doctor .credenciales .nowrap { white-space: normal; }
}
.doctor__texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.doctor__firma {
  width: 100%;
  max-width: 440px;
  height: auto;
}
/* Página El doctor, «Formación y certificación»: sin foto (el retrato de
   traje de la portada ya presenta al doctor) y sin párrafo ni firma, que
   están en la portada. El título y las credenciales ocupan todo el
   contenedor; las credenciales van en 3 columnas en escritorio. */
.doctor--solo-texto { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) {
  .doctor--solo-texto .credenciales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.credenciales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--line-dark-2);
  margin-top: 8px;
}
.credenciales__item {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--line-dark-2);
}
.credenciales dd { margin-top: 4px; }
/* El doctor, Formación: cuando una credencial lleva dos renglones (<dd>),
   como Cirugía nasal desde el 31/10/2026, 10px entre ellos para que no se
   lean como un solo párrafo. No aplica a Publicaciones médicas. */
.credenciales:not(.credenciales--pub) dd + dd { margin-top: 10px; }
/* «Publicaciones médicas» (El doctor, ES y EN): la misma rejilla y las
   mismas líneas que las credenciales; cambia solo el texto. Revista en
   dorado (11.5px, «Médico-Quirúrgicas» en .nowrap y &nbsp;·&nbsp; antes
   del año), título claro (--c-ink) y datos de la cita en gris (--c-muted),
   cada uno en su renglón. En una columna, la línea entre las dos es el
   borde inferior de la primera (no se agrega otra). */
.credenciales--pub dd { margin-top: 0; }
.credenciales--pub .credenciales__item { padding-block: 30px; }
.credenciales--pub .credenciales__revista {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  overflow-wrap: normal;
  text-wrap: balance;
}
.credenciales__titulo {
  display: block;
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--c-ink);
  text-wrap: pretty;
}
.credenciales__cita {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-muted);
}
@media (min-width: 1000px) {
  .credenciales--pub { column-gap: 48px; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .credenciales--pub { column-gap: 32px; }
}
@media (max-width: 699px) {
  .credenciales--pub .credenciales__item { padding-block: 26px; }
  .credenciales__titulo { font-size: 16px; }
}

/* 20. Preguntas frecuentes: acordeón ====================================== */

/* Acordeón de las páginas internas. Las preguntas «opción E» del Inicio
   anterior se quitaron el 27/10/2026; las del Inicio v2 están en 26.10. */

.acordeon {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-light-3);
}
.acordeon__item { border-bottom: 1px solid var(--line-light-3); }
.acordeon__resumen {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.acordeon__resumen::-webkit-details-marker { display: none; }
.acordeon__mas {
  color: var(--gold-ink);
  font-size: 24px;
  line-height: 1;
  transition: transform .15s ease;
}
.acordeon__item[open] .acordeon__mas { transform: rotate(45deg); }
.acordeon__txt {
  margin-bottom: 22px;
  color: var(--text-2);
}

/* 21. Consultorio y contacto ============================================== */

/* /consultorio/, «Dónde y cuándo»: el título en su propia fila; debajo,
   2 columnas iguales alineadas arriba (izquierda: dirección, horario y
   «Cómo llegar»; derecha: la agenda y la lista de contacto) y, al
   final, el mapa a todo el ancho con alto fijo de 360px. */
.consultorio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 48px;
  align-items: stretch;
}
.consultorio__titulo { grid-column: 1 / -1; }
/* Las 2 columnas miden lo mismo; el bloque de la izquierda (Dirección |
   Horario y, 20px debajo, «Cómo llegar») va centrado en vertical frente a
   la derecha, con el espacio libre repartido arriba y abajo. */
.consultorio__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
/* Dirección | Horario: cada columna con su rótulo dorado y 5 renglones,
   uno por elemento. Los 3 primeros a 16px en claro y los 2 últimos
   (.consultorio__nota) a 14px en gris, todos con line-height 1.6 para que
   los renglones queden alineados entre columnas. Si un renglón no cabe, se
   parte de forma natural. */
.consultorio__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.consultorio__col { min-width: 0; }
.consultorio__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.consultorio__rotulo svg { flex: none; }
.consultorio__lineas {
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-on-dark);
}
.consultorio__nota {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-on-dark);
}
.consultorio .como-llegar { font-size: 16px; }
/* El mapa queda a 32px (el gap de la rejilla) debajo de las columnas. */
.consultorio .mapa {
  grid-column: 1 / -1;
  height: 360px;
}

/* Lista de contacto (/consultorio/): botón de agenda a todo el ancho y 3
   filas sin recuadro, separadas por líneas finas. Cada fila es un enlace
   completo: ícono, etiqueta y, a la derecha, el número. Si no caben en una
   línea, el número pasa debajo de la etiqueta. */
.contacto-lista {
  display: flex;
  flex-direction: column;
}
.contacto-lista__agenda {
  width: 100%;
  justify-content: flex-start;
}
.contacto-lista__agenda-txt { flex: 1 1 auto; }
.contacto-lista__filas {
  list-style: none;
  margin-top: 18px;
  border-top: 1px solid var(--line-dark-2);
}
.contacto-lista__filas li { border-bottom: 1px solid var(--line-dark-2); }
.contacto-lista__fila {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 14px 4px;
  color: var(--ink-on-dark);
  text-decoration: none;
}
.contacto-lista__fila svg {
  flex: none;
  color: var(--gold);
}
.contacto-lista__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}
.contacto-lista__etiqueta {
  font-size: 14px;
  color: var(--muted-on-dark);
}
.contacto-lista__numero {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-on-dark);
  transition: color .15s ease;
}
@media (hover: hover) {
  .contacto-lista__fila:hover .contacto-lista__numero { color: var(--gold); }
}
/* Mapa de Google visible directamente (docs/05 C), con el radio, el borde y
   la sombra de las fotos principales. Se estira para llenar su columna y el
   iframe ocupa todo el recuadro. Nada va encima: un botón superpuesto
   tapaba el de pantalla completa de Google. */
.mapa {
  position: relative;
  flex-grow: 1;
  min-height: 340px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(196, 154, 108, .25);
  border-radius: 16px;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, .6), 0 12px 24px -8px rgba(0, 0, 0, .45);
}
.mapa__marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Enlace transparente sobre el mapa: abre la ficha del consultorio en
   Google Maps (el mapa ya no se arrastra ni hace zoom dentro del iframe,
   que sale del orden de tabulación con tabindex="-1"). El foco va por
   dentro (offset negativo), porque .mapa recorta con overflow: hidden. */
.mapa__enlace {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.mapa__enlace:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: -3px;
  border-radius: inherit;
}
/* «Cómo llegar»: enlace con flecha debajo de la dirección (Inicio y
   Consultorio), en su propio renglón. */
.como-llegar {
  display: flex;
  width: fit-content;
}
.como-llegar:hover { text-decoration: underline; }

/* Inicio · Consultorio («opción A con formulario»): encabezado con el botón
   de agenda; mapa con dirección y horario | formulario; teléfonos. */
.cons-a {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.cons-a__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
}
/* Botón de agenda: el mismo .btn--primary del hero, en un renglón, con el
   ancho de su texto; alineado con la base del H2. */
.cons-a__agenda { max-width: 100%; }
.cons-a__cuerpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: stretch;
}
.cons-a__lugar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.cons-a__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  color: var(--lead-on-dark);
  font-size: 15px;
}
.cons-a__dato {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.cons-a__dato svg {
  flex: none;
  margin-top: 3px;
  color: var(--gold);
}
.cons-a__contacto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Formulario de contacto (Web3Forms, docs/05 F). */
.form-contacto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line-dark-2);
  border-radius: 16px;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, .6), 0 12px 24px -8px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
.form-contacto__encabezado {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.form-contacto__titulo {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink-on-dark);
}
.form-contacto__apoyo {
  font-size: 14px;
  color: var(--muted-on-dark);
}
.form-contacto__fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.campo__etiqueta {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-on-dark);
}
.campo__opcional {
  font-weight: 400;
  color: var(--muted-on-dark);
}
.campo__control {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--meta-on-dark);
  border-radius: var(--radius-field);
  color: var(--ink-on-dark);
  font: inherit;
  font-size: 16px;
}
textarea.campo__control {
  min-height: 96px;
  resize: vertical;
}
.campo__control::placeholder { color: var(--meta-on-dark); }
.campo__control:focus,
.campo__control:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.campo-casilla {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--lead-on-dark);
  font-size: 15px;
}
.campo-casilla input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--gold);
}
.form-contacto__nota {
  margin-top: -8px;
  font-size: 13px;
  color: var(--muted-on-dark);
}
.form-contacto__enviar { align-self: flex-start; }
.form-contacto__enviar:disabled {
  opacity: .6;
  cursor: progress;
}
/* Resultado del envío con JS (aria-live). Vacío, no ocupa sitio. */
.form-contacto__estado:empty { display: none; }
.form-contacto__estado {
  padding: 12px 14px;
  border: 1px solid rgba(196, 154, 108, .35);
  border-radius: var(--radius-field);
  background: rgba(196, 154, 108, .1);
  color: var(--ink-on-dark);
  font-size: 14px;
}
/* 4 tarjetas (WhatsApp, 2 teléfonos y correo) en 2 × 2; en ≤ 900px, una
   columna (adaptación 13). */
.cons-a__telefonos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contacto__tarjeta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line-dark-2);
  border-radius: var(--radius-card);
  color: var(--ink-on-dark);
  text-decoration: none;
}
/* El borde dorado solo aparece con el cursor encima (en pantallas táctiles
   no, porque ahí :hover se queda pegado tras tocar) o al enfocar con
   teclado; nunca fijo. */
@media (hover: hover) {
  .contacto__tarjeta:hover {
    border-color: var(--gold);
    color: var(--ink-on-dark);
  }
}
.contacto__tarjeta:focus-visible { border-color: var(--gold); }
.contacto__tarjeta svg {
  flex: none;
  stroke: var(--gold);
}
/* Tarjeta compacta: los teléfonos del Inicio. */
.contacto__tarjeta--compacta {
  gap: 14px;
  height: 100%;
  padding: 16px 20px;
  border-radius: 8px;
}
.contacto__tarjeta--compacta .contacto__etiqueta { font-size: 11px; }
.contacto__tarjeta--compacta .contacto__valor { font-size: 18px; }
/* Tarjeta del correo (Inicio): no es enlace. El enlace .js-email envuelve
   solo el texto (main.js lo reemplaza por el correo) y su ::after cubre la
   tarjeta, para que se toque completa, con el mismo hover y foco que las
   demás. El correo no se parte. */
.contacto__tarjeta--correo { position: relative; }
.contacto__correo {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.contacto__correo:hover { color: inherit; }
.contacto__correo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
}
@media (hover: hover) {
  .contacto__tarjeta--correo:hover { border-color: var(--gold); }
}
.contacto__correo:focus-visible { outline: none; }
.contacto__correo:focus-visible::after {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.contacto__tarjeta--correo:has(.contacto__correo:focus-visible) { border-color: var(--gold); }
/* Contacto del Inicio en pantallas angostas. Cortes medidos el 03/11/2026
   con el correo de contacto, el valor más largo (240px a 18px; el espacio
   libre es el ancho de pantalla − 126px): 18px cabe con ≥ 8px de holgura
   desde 375px; 16px desde 348px; 15px desde 335px; por debajo, 15px con
   padding 16px y gap 12px. Se aplican a las 4 tarjetas, para que la lista
   apilada se vea pareja. */
@media (max-width: 374px) {
  .cons-a__telefonos .contacto__valor { font-size: 16px; }
}
@media (max-width: 347px) {
  .cons-a__telefonos .contacto__valor { font-size: 15px; }
}
@media (max-width: 334px) {
  .cons-a__telefonos .contacto__tarjeta {
    padding: 16px;
    gap: 12px;
  }
}

.contacto__lineas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.contacto__etiqueta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.contacto__valor {
  font-size: 24px;
  font-weight: 600;
}

/* 22. Plantilla de tratamiento ============================================ */

/* Recorta su marca de agua, igual que .hero. */
.hero-trat {
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--bg);
}
.hero-trat__watermark {
  right: -60px;
  top: -60px;
  height: 560px;
}
.hero-trat__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 48px 80px;
}
.hero-trat__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 48px 72px;
  align-items: end;
}
/* Consultorio: menos aire entre la portada y «Dónde y cuándo» (92px en
   escritorio, 48px en móvil; en el resto de las páginas, 184px y 144px).
   Solo esa transición; .hero-trat__inner y .section no cambian. */
body[data-pagina="consultorio"] .hero-trat__inner { padding-bottom: 40px; }
body[data-pagina="consultorio"] .hero-trat + .section { padding-top: 52px; }
@media (max-width: 900px) {
  body[data-pagina="consultorio"] .hero-trat__inner { padding-bottom: 24px; }
  body[data-pagina="consultorio"] .hero-trat + .section { padding-top: 24px; }
}
.hero-trat__texto {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero-trat__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--line-dark-2);
}
/* Portadas de Amígdalas, Audiometría y Aparatos auditivos: SVG en línea
   (480 × 300) en lugar de la foto, con la misma proporción, radio y borde
   que .hero-trat__img en todos los anchos. overflow: hidden para que el SVG
   respete el radio. Animación en «Ilustraciones de tratamientos». */
.trat-portada__ilus {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--line-dark-2);
}

/* Migas de pan */
.migas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: var(--meta-on-dark);
}
.migas a {
  color: var(--muted-on-dark);
  text-decoration: none;
}
.migas a:hover { color: var(--gold-hover); }
.migas__actual { color: var(--text-on-dark); }

/* Cuerpo claro en dos columnas: contenido y tarjeta lateral */
.cuerpo-trat {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
  padding-block: 88px;
}
/* Contenedor de consulta: el panel del selector de cirugía se reacomoda según
   el ancho real de esta columna, que depende de si la tarjeta lateral va al
   lado o debajo. */
.cuerpo-trat__main {
  container: cuerpo-trat / inline-size;
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.bloque-trat {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bloque-trat--20 { gap: 20px; }
.bloque-trat--8 { gap: 8px; }
.bloque-trat__h2 { margin-bottom: 12px; }

/* Tarjetas con ícono («Cómo se atiende»): hoy solo en Consultorio. Las
   páginas de tratamiento usan el selector (.selector-cx). Mismo alto en las
   3; la línea dorada de arriba sigue el radio gracias a overflow: hidden. */
.tipos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.tipo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 28px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 16px;
  box-shadow: 0 24px 48px -28px rgba(28, 26, 24, .35);
}
.tipo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gold);
}
.tipo__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-ink);
}
.tipo__dato {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
}
/* Móvil («A · tarjetas compactas»): una columna; en cada tarjeta, el ícono a
   la izquierda y el texto a la derecha, y la línea dorada pasa al borde
   izquierdo. */
@media (max-width: 900px) {
  .tipos {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .tipo {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 2px 14px;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 12px 24px -18px rgba(28, 26, 24, .3);
  }
  .tipo::before {
    inset: 0 auto 0 0;
    width: 3px;
    height: auto;
  }
  .tipo__icono {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 44px;
    height: 44px;
    margin-bottom: 0;
  }
  .tipo > :not(.tipo__icono) { grid-column: 2; }
  .tipo .label { font-size: 11px; }
  .tipo__dato { font-size: 22px; }
  /* Acotado: .tipo__txt también es el párrafo de marcas de Aparatos
     auditivos, que no cambia. */
  .tipo .tipo__txt { font-size: 13px; }
}
.tipo__txt {
  font-size: 15px;
  color: var(--c-muted);
}

/* Señales: lista a dos columnas con filas separadas */
.senales {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--line-light-3);
}
.senales li {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--line-light-3);
}

/* Texto de «Tu cirugía en un entorno seguro». */
.proceso__txt { color: var(--muted); }

/* Selector de cirugía o de estudios («opción A»: nariz, amígdalas, senos y
   audiometría). Cada procedimiento es una pestaña con su panel:
   descripción, recuperación si la hay y recuadros de dato (estancia,
   regreso y anestesia en cirugías; duración y preparación en estudios).
   Usa el JS de pestañas de main.js (data-pestanas), que también abre la
   pestaña cuyo id o panel coincide con el hash. Sin JS no se ven las
   pestañas y los paneles van uno debajo de otro. */
.selector-cx__encabezado {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.selector-cx__apoyo { color: var(--muted); }
.selector-cx__pestanas { display: none; }
.selector-cx--tabs .selector-cx__pestanas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.selector-cx__pestana {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease;
}
@media (hover: hover) {
  .selector-cx__pestana:hover { border-color: var(--gold-ink); }
}
.selector-cx__etiqueta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.selector-cx__nombre {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}
.selector-cx__frase {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.selector-cx__pestana[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.selector-cx__pestana[aria-selected="true"] .selector-cx__etiqueta { color: var(--gold); }
.selector-cx__pestana[aria-selected="true"] .selector-cx__frase { color: var(--lead-on-dark); }
@media (prefers-reduced-motion: reduce) {
  .selector-cx__pestana { transition: none; }
  .acordeon__mas,
  .contacto-lista__numero { transition: none; }
}

.selector-cx__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 12px;
}
/* Sin esto, el display: grid de arriba ganaría sobre el [hidden]. */
.selector-cx__panel[hidden] { display: none; }
.selector-cx__texto {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  color: var(--text-2);
}
.selector-cx__h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}
.selector-cx__datos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start;
  min-width: 0;
}
.dato-cx {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: var(--cream);
  border-radius: 10px;
}
.dato-cx__etiqueta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.dato-cx__valor {
  font-weight: 600;
  color: var(--ink);
}
.selector-cx__agendar { align-self: flex-start; }
/* «También realiza: …» debajo del panel (senos y audiometría). */
.selector-cx__tambien {
  font-size: 15px;
  color: var(--text-2);
}
.selector-cx__tambien .label { margin-right: 6px; }
/* Franja «L2» (nariz, amígdalas y senos): debajo del panel, después de
   «También realiza» si la hay. Fondo tostado, el texto a la izquierda y
   el botón de contorno oscuro a la derecha; en ≤ 699px, el texto arriba
   y el botón debajo a todo el ancho. */
.otra-cx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px 26px;
  border-radius: 14px;
  background: var(--cream-pildora);
}
.otra-cx__txt {
  flex: 1 1 280px;
  min-width: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.otra-cx__btn { flex: none; }
@media (max-width: 699px) {
  .otra-cx {
    flex-direction: column;
    align-items: stretch;
  }
  .otra-cx__txt { flex: none; }
  .otra-cx__btn { width: 100%; justify-content: center; }
}
/* Columna principal de menos de 700px (p. ej. ~620px a 1024 con la tarjeta
   lateral al lado): el panel va en una columna y los recuadros de dato, en
   fila debajo del texto. En ≤ 900px manda la adaptación 14. */
@container cuerpo-trat (max-width: 699px) {
  .selector-cx__panel { grid-template-columns: minmax(0, 1fr); }
  .selector-cx__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
  .selector-cx__agendar { grid-column: 1 / -1; }
}
/* Estudios (solo audiometría, .selector-cx--estudios): el título y la
   descripción arriba y, debajo, una sola fila con Duración, Preparación
   (más ancha) y «Agendar valoración», centrado en vertical. Así el
   recuadro no se estira a la altura de las fichas cuando el texto es
   corto. Las cirugías no llevan el modificador y no cambian. Con la
   columna principal de menos de 700px (p. ej. a 1024) las dos fichas
   siguen en fila y el enlace baja; en ≤ 900px, una debajo de otra. */
.selector-cx--estudios .selector-cx__panel { grid-template-columns: minmax(0, 1fr); }
.selector-cx--estudios .selector-cx__datos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: 12px 24px;
}
.selector-cx--estudios .selector-cx__agendar {
  grid-column: auto;
  align-self: center;
}
@container cuerpo-trat (max-width: 699px) {
  .selector-cx--estudios .selector-cx__datos {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 12px;
  }
  .selector-cx--estudios .selector-cx__agendar {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@media (max-width: 900px) {
  .selector-cx--estudios .selector-cx__datos {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* «Cómo es la recuperación» y «Señales»: en móvil son <details> cerrados; en
   escritorio el contenido se ve siempre (::details-content), el summary se
   oculta y aparece el título aparte. Sin soporte, quedan como acordeón
   también en escritorio y el título aparte no se muestra. */
.recup-det__resumen,
.senales-det__resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.recup-det__resumen::-webkit-details-marker,
.senales-det__resumen::-webkit-details-marker { display: none; }
.recup-det[open] .acordeon__mas,
.senales-det[open] .acordeon__mas { transform: rotate(45deg); }
.recup-det__txt { padding-top: 6px; }
.selector-cx__recup-titulo,
.senales-bloque__h2 { display: none; }
@supports selector(::details-content) {
  @media (min-width: 901px) {
    .recup-det__resumen,
    .senales-det__resumen { display: none; }
    .recup-det::details-content,
    .senales-det::details-content { content-visibility: visible; }
    .selector-cx__recup-titulo,
    .senales-bloque__h2 { display: block; }
    .recup-det__txt { padding-top: 0; }
  }
}

/* Proceso en una fila: número en círculo dorado, línea que los une, título y
   una frase. En ≤ 900px, lista vertical (adaptación 14). */
.pasos-cx {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.pasos-cx__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pasos-cx__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 42px;
  right: -14px;
  height: 1px;
  background: var(--gold);
}
.pasos-cx__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: var(--gold-ink);
}
.pasos-cx__titulo {
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.pasos-cx__txt {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* Señales | Preguntas frecuentes, lado a lado en escritorio. */
.dos-col-trat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}
.dos-col-trat > * { min-width: 0; }
.senales--check { grid-template-columns: minmax(0, 1fr); }
.senales--check li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.senales--check svg {
  flex: none;
  margin-top: 4px;
  color: var(--gold-ink);
}

/* «Tu cirugía en un entorno seguro», entre el proceso y la frase de hospitales */
.entorno-seguro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Fotos dentro de «Cómo es el proceso» de las páginas de tratamiento
   (.foto-seccion pone el ancho, el recorte y el radio): 3:2 por defecto,
   16:9 en «Tu cirugía en un entorno seguro», con 16px más de aire sobre
   ella porque ese bloque va apretado (8px). */
.foto-trat { aspect-ratio: 3 / 2; }
.foto-trat--16-9 {
  aspect-ratio: 16 / 9;
  object-position: 50% 35%;
}
.entorno-seguro picture { margin-top: 16px; }

/* «¿Estás considerando una cirugía?»: el botón conserva su ancho natural */
.cta-trat { align-items: flex-start; }

/* Notas de tiempos aproximados, al final de las páginas de cirugía */
.notas-trat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line-light-2);
  padding-top: 24px;
}

/* Acordeón de páginas internas: 2px menos de respiro que el del Inicio */
.acordeon--interna .acordeon__resumen { padding-block: 20px; }
.acordeon--interna .acordeon__txt { margin-bottom: 20px; }

/* Tarjeta lateral oscura. Va en el flujo, no fija. */
.aside-agenda {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background: var(--bg);
  border-radius: var(--radius-card);
}
.aside-agenda__isotipo {
  width: 64px;
  height: auto;
}
.aside-agenda__titulo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink-on-dark);
}
.aside-agenda__txt {
  font-size: 15px;
  color: var(--muted-on-dark);
}
.aside-agenda__datos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--line-dark-2);
  padding-top: 16px;
  font-size: 13px;
  color: var(--meta-on-dark);
}

/* Tratamientos relacionados */
.relacionados__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 88px;
}
.relacionados__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.rel-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line-dark-2);
  border-radius: var(--radius-card);
  text-decoration: none;
}
.rel-card:hover { border-color: var(--gold); }
.rel-card__zona {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--gold);
}
.rel-card__nombre {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-on-dark);
}

/* 23. El doctor, Consultorio y Aviso de privacidad ======================== */

/* El doctor, «Semblanza» («Opción A · cita y mosaico»): la cita a la
   izquierda y un mosaico de 3 fotos a la derecha. La comilla es un SVG
   decorativo, no un carácter, para que no se encime con el eyebrow. */
.semblanza {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.semblanza__texto {
  display: flex;
  flex-direction: column;
}
.semblanza__cita { margin-top: 20px; }
/* Comilla y cita comparten un bloque de 17em del tamaño de la cita (≈510px a
   30px), alineado a la izquierda; la comilla se centra sobre ese ancho y no
   sobre la columna, que puede ser más ancha que los renglones. */
.semblanza__bloque {
  display: flex;
  flex-direction: column;
  max-width: 17em;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.3;
  color: var(--ink);
}
.semblanza__comilla {
  width: auto;
  height: 44px;
  margin-inline: auto;
  color: var(--gold);
}
.semblanza__bloque blockquote { margin-top: 16px; }
.semblanza__autor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 28px;
  font-size: 14px;
  color: var(--muted);
}
.semblanza__firma {
  width: 220px;
  max-width: 100%;
  height: auto;
}

/* Mosaico: 2 columnas (1.15fr | 1fr) y 2 filas de 300px. La foto grande
   (--retrato: quirofano-vertical) ocupa la columna izquierda entera; a la
   derecha, arriba --lupas (consulta-endoscopia-pantalla) y abajo --monitor
   (doctor-modelo-oido). Los nombres de las clases vienen del mosaico
   anterior; qa.ps1 los comprueba. Cada pie va dentro de la foto, abajo,
   sobre un degradado oscuro. */
.mosaico {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, 300px);
  gap: 16px;
}
.mosaico__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: 16px;
  box-shadow: 0 30px 60px -24px rgba(28, 26, 24, .45);
}
.mosaico__foto--retrato { grid-row: 1 / 3; }
.mosaico__foto picture { display: contents; }
.mosaico__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mosaico__foto--retrato img { object-position: 50% 22%; }
.mosaico__foto--lupas img { object-position: 78% 50%; }
.mosaico__foto--monitor img { object-position: 72% 40%; }
.mosaico__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(0deg, rgba(20, 18, 16, .8) 0%, rgba(20, 18, 16, 0) 100%);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cream);
}

/* Móvil: una columna; la foto grande a todo lo ancho y las 2 chicas en
   pareja debajo. */
@media (max-width: 900px) {
  .semblanza {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .semblanza__comilla { height: 36px; }
  .semblanza__bloque { font-size: 22px; }
  .mosaico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 300px 200px;
    gap: 10px;
  }
  .mosaico__foto--retrato {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .mosaico__pie { padding: 32px 12px 12px; }
}

/* Consultorio, «Conoce el consultorio». Escritorio: rejilla de 3 columnas y
   2 filas de 260px; la sala de exploración ocupa la columna 1 entera y la
   oficina, la fila de abajo de las columnas 2 y 3. Cada pie va dentro de la
   foto, abajo, sobre un degradado oscuro. */
.galeria-cons {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: repeat(2, 260px);
  gap: 16px;
}
.galeria-cons__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 20px 40px -16px rgba(28, 26, 24, .3);
}
.galeria-cons__foto--grande { grid-column: 1; grid-row: 1 / 3; }
.galeria-cons__foto--recepcion { grid-column: 2; grid-row: 1; }
.galeria-cons__foto--espera { grid-column: 3; grid-row: 1; }
.galeria-cons__foto--ancha { grid-column: 2 / 4; grid-row: 2; }
.galeria-cons__foto picture { display: contents; }
.galeria-cons__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.galeria-cons__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 48px 20px 16px;
  background: linear-gradient(0deg, rgba(20, 18, 16, .8) 0%, rgba(20, 18, 16, 0) 100%);
  color: var(--cream);
}
.galeria-cons__titulo {
  font-size: 15px;
  font-weight: 600;
}
.galeria-cons__txt { font-size: 13px; }

/* Cada foto es un enlace a su versión de 1200px (sin JS abre la imagen; con
   JS, el visor). Ícono de «ampliar» arriba a la derecha. El pie deja pasar
   el toque a la foto. */
.galeria-cons__ampliar {
  display: block;
  height: 100%;
  color: var(--cream);
}
.galeria-cons__ampliar:hover { color: var(--cream); }
.galeria-cons__ampliar:focus-visible {
  outline-offset: -4px;
  border-radius: 16px;
}
@media (hover: hover) {
  .galeria-cons__ampliar { cursor: zoom-in; }
}
.galeria-cons__ampliar-icono {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(20, 18, 16, .55);
  pointer-events: none;
}
.galeria-cons__pie { pointer-events: none; }

/* Visor de fotos (<dialog> creado por main.js). Ocupa toda la pantalla sobre
   fondo casi negro: contador y cerrar arriba, la foto centrada con su pie y
   las flechas a los lados (abajo en móvil). Con el visor abierto la página
   no hace scroll. */
html.visor-abierto { overflow: hidden; }
.visor {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 9, 8, .94);
  color: var(--cream);
  touch-action: pan-y pinch-zoom;
}
.visor::backdrop { background: transparent; }
.visor[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.visor__barra {
  position: absolute;
  top: 16px;
  left: 24px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.visor__contador {
  font-size: 14px;
  color: var(--muted-on-dark);
}
.visor__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(245, 239, 230, .2);
  border-radius: 50%;
  background: rgba(245, 239, 230, .08);
  color: var(--cream);
  cursor: pointer;
}
.visor__boton:focus-visible { border-radius: 50%; }
@media (hover: hover) {
  .visor__boton:hover { background: rgba(245, 239, 230, .16); }
}
.visor__figura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.visor__img {
  display: block;
  width: auto;
  max-width: 90vw;
  height: auto;
  max-height: 75vh;
  border-radius: 8px;
}
.visor__pie {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline: 16px;
  text-align: center;
}
.visor__titulo {
  font-size: 16px;
  font-weight: 600;
}
.visor__txt {
  font-size: 14px;
  color: var(--muted-on-dark);
}
.visor__txt[hidden] { display: none; }
.visor__flecha {
  position: absolute;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
}
.visor__flecha--ant { left: 24px; }
.visor__flecha--sig { right: 24px; }
.visor__ayuda { display: none; }
/* Móvil: la foto a todo el ancho y las flechas abajo, de 48px, con la ayuda
   «Desliza o usa las flechas» entre ellas. También se pasa de foto
   deslizando con el dedo. */
@media (max-width: 900px) {
  .visor__img {
    max-width: 100vw;
    border-radius: 0;
  }
  .visor__flecha {
    top: auto;
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    transform: none;
  }
  .visor__flecha--ant { left: calc(50% - 130px); }
  .visor__flecha--sig { right: calc(50% - 130px); }
  .visor__ayuda {
    position: absolute;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    height: 48px;
    transform: translateX(-50%);
    font-size: 12px;
    white-space: nowrap;
    color: var(--meta-on-dark);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .visor[open] { animation: visor-entra .2s ease-out; }
}
@keyframes visor-entra { from { opacity: 0; } to { opacity: 1; } }

/* Móvil: carrusel horizontal solo con CSS. Cada foto mide el 82% del ancho
   para que asome la siguiente; el contenedor llega al borde de la pantalla
   y se puede desplazar con teclado (tabindex="0"). */
@media (max-width: 900px) {
  .galeria-cons {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }
  .galeria-cons:focus-visible { outline-offset: -2px; }
  .galeria-cons__foto {
    flex: 0 0 82%;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }
}

/* Controles del carrusel («1 · Puntos y flechas»), solo en móvil: puntos y
   «1 de 4» a la izquierda, flechas a la derecha. Llegan con hidden y main.js
   los muestra; en escritorio no se ven nunca. */
.galeria-cons__controles { display: none; }
@media (max-width: 900px) {
  .galeria-cons__controles:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* El bloque separa sus hijos 48px; la fila va a 16px de las fotos
       (12px del padding del carrusel + 4px). */
    margin-top: -44px;
  }
  .galeria-cons__indicador {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .galeria-cons__puntos { display: flex; }
  /* Área táctil de 24 × 24px; el punto visible (7px de alto) es ::before. */
  .galeria-cons__punto {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .galeria-cons__punto::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--meta-on-dark);   /* 3.34:1 contra crema-2 y 3.12:1 contra crema */
    transition: width .2s ease, background-color .2s ease;
  }
  .galeria-cons__punto[aria-current="true"]::before {
    width: 22px;
    background: var(--gold-ink);
  }
  .galeria-cons__punto[aria-current="true"] { min-width: 30px; }
  .galeria-cons__contador {
    font-size: 13px;
    white-space: nowrap;
    color: var(--muted);
  }
  .galeria-cons__flechas {
    display: flex;
    flex: none;
    gap: 8px;
  }
  /* 40px visibles; el área táctil llega a 44px con ::after. */
  .galeria-cons__flecha {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-light-2);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
  }
  .galeria-cons__flecha::after {
    content: "";
    position: absolute;
    inset: -2px;
  }
  .galeria-cons__flecha--sig {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
  }
  /* Sin esto, el display: block del reset ganaría sobre el [hidden] del
     ícono que no toca («siguiente» o «volver al inicio»). */
  .galeria-cons__flecha svg[hidden] { display: none; }
  .galeria-cons__punto:focus-visible,
  .galeria-cons__flecha:focus-visible { border-radius: var(--radius-pill); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .galeria-cons__punto::before { transition: none; }
}

/* Banda de agenda centrada («Opción A»): cierre de El doctor. */
.banda-agenda {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.banda-agenda__eyebrow { font-size: 12px; }
.banda-agenda__titulo {
  margin-top: 14px;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.1;
}
.banda-agenda__apoyo {
  max-width: 32em;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-on-dark);
}
.banda-agenda__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}
.banda-agenda__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-on-dark);
}
.banda-agenda__wa svg {
  flex: none;
  color: var(--gold);
}
.banda-agenda__wa:hover {
  color: var(--text-on-dark);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}
@media (max-width: 900px) {
  .banda-agenda__acciones {
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
  }
  .banda-agenda__btn { width: 100%; }
}

/* Aviso de privacidad */
.legal {
  max-width: 760px;
  margin-inline: auto;
}
.legal__lista {
  list-style: none;
  counter-reset: legal;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.legal__item {
  counter-increment: legal;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line-light-3);
}
.legal__item h2::before {
  content: counter(legal) " · ";
  font-family: var(--font-display);
  color: var(--c-accent);
}
.legal__item p { color: var(--text-2); }
/* Viñetas del aviso (01/11/2026): sin esto, el reset (ul sin padding)
   las dejaba colgando fuera del margen del texto y, por ir dentro del
   <ol>, salían como círculos huecos. Punto relleno en el color de acento
   y el texto con sangría, alineado consigo mismo. */
.legal__item ul {
  padding-left: 1.25em;
  list-style: disc;
  color: var(--text-2);
}
.legal__item li::marker { color: var(--c-accent); }

/* 24. Agenda en línea ===================================================== */

/* «Chat protagonista»: encabezado centrado, pasos, ventana del chat y,
   debajo, privacidad y contacto, y la fila de datos. Contenedor de 1000px. */
.agenda {
  max-width: calc(1000px + 2 * var(--gutter));
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 72px 96px;
}
.agenda__encabezado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* Pasos. Escritorio: barra blanca tipo píldora, número en círculo oscuro y
   una línea dorada que llena el espacio entre pasos. El ícono solo se ve en
   móvil. */
.agenda-pasos {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-pill);
}
.agenda-paso {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.agenda-paso:last-child { flex: 0 1 auto; }
.agenda-paso:not(:last-child)::after {
  content: "";
  flex: 1 1 24px;
  min-width: 24px;
  height: 1px;
  margin-left: 4px;
  background: var(--gold);
}
.agenda-paso__marca {
  flex: none;
  display: flex;
}
.agenda-paso__icono { display: none; }
.agenda-paso__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
}
.agenda-paso__txt {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* Ventana del chat. La barra oscura es el encabezado del asistente: el
   chatbot, al integrarse, no debe mostrar el suyo (docs/04 A). */
.chat {
  background: var(--cream-2);
  border: 1px solid var(--line-light);
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(28, 26, 24, .28);
  overflow: hidden;
}
.chat__barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg);
}
.chat__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-dark-2);
}
.chat__avatar picture { display: flex; }
.chat__avatar img {
  width: auto;
  height: 22px;
}
.chat__id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat__nombre {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink);
}
.chat__estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--c-muted);
}
.chat__punto {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--disponible);
}
.chat__nota {
  margin-left: auto;
  font-size: 13px;
  color: var(--c-meta);
}

/* Cuerpo del chat: espacio reservado del asistente (docs/04 A). Crece si el
   aviso provisional no cabe; el iframe lleva alto fijo. */
.chatbot-slot {
  width: 100%;
  min-height: 560px;
  display: flex;
}
.chatbot-slot iframe {
  width: 100%;
  height: 560px;
  border: 0;
  display: block;
}
/* El ancla #chatbot cae en el cuerpo: se deja ver también la barra del chat
   debajo del header fijo. */
.chat #chatbot { scroll-margin-top: calc(var(--header-h) + 88px); }
.chatbot-placeholder {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  text-align: center;
}
.chatbot-placeholder__pendiente {
  font-size: 14px;
  color: var(--muted);
}
.chatbot-placeholder__txt {
  color: var(--muted);
  max-width: 34em;
}

/* Debajo del chat: privacidad a la izquierda y contacto a la derecha. */
.agenda__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  font-size: 15px;
  color: var(--text-2);
}
.agenda__privacidad,
.agenda__dato {
  display: flex;
  align-items: center;
  gap: 10px;
}
.agenda__privacidad svg,
.agenda__dato svg {
  flex: none;
  color: var(--c-accent);
}
.agenda__privacidad a { font-weight: 600; }
.agenda__contacto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.agenda__contacto p {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.agenda__botones {
  display: flex;
  gap: 12px;
}

/* «Opción A»: píldoras grandes con el ícono en círculo y dos líneas de texto
   (título y número). WhatsApp dorado y Llamar oscuro. */
.agenda__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 24px 10px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 24px -12px rgba(28, 26, 24, .55);
  text-decoration: none;
}
.agenda__btn--wa { background: var(--gold); color: var(--bg); }
.agenda__btn--tel { background: var(--ink); color: var(--ink-on-dark); }
.agenda__btn-icono {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.agenda__btn--wa .agenda__btn-icono { background: rgba(20, 18, 16, .12); color: var(--bg); }
.agenda__btn--tel .agenda__btn-icono { background: rgba(196, 154, 108, .18); color: var(--gold); }
.agenda__btn-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.agenda__btn-titulo { font-size: 16px; font-weight: 700; }
.agenda__btn-sub { font-size: 12.5px; opacity: .8; }
.agenda__btn--wa:hover { color: var(--bg); }
.agenda__btn--tel:hover { color: var(--ink-on-dark); }
@media (hover: hover) {
  .agenda__btn:hover { box-shadow: 0 14px 30px -12px rgba(28, 26, 24, .7); }
  .agenda__btn--wa:hover { filter: brightness(.93); }
  .agenda__btn--tel:hover { background: var(--bg); }
}

/* ≤ 900px: la pregunta arriba y los botones uno debajo del otro, a todo
   el ancho. */
@media (max-width: 900px) {
  .agenda__pie,
  .agenda__contacto {
    flex-direction: column;
    align-items: stretch;
  }
  .agenda__botones { flex-direction: column; }
}

/* Fila final: horario, dirección y hospitales. */
.agenda__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line-light-2);
  font-size: 14px;
  color: var(--text-2);
}

/* Móvil: pasos en 3 columnas con el ícono en círculo y el número en
   insignia. El contacto se apila desde 900px (arriba). */
@media (max-width: 640px) {
  .agenda {
    gap: 28px;
    padding-block: 48px 64px;
  }

  .agenda-pasos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .agenda-paso {
    position: relative;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .agenda-paso:not(:last-child)::after {
    content: "›";
    content: "›" / "";
    /* Centrado en el hueco de 8px entre columnas. */
    position: absolute;
    top: 26px;
    right: -4px;
    transform: translate(50%, -50%);
    min-width: 0;
    height: auto;
    margin: 0;
    background: none;
    color: var(--gold-ink);
    font-size: 20px;
    line-height: 1;
  }
  .agenda-paso__marca {
    position: relative;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line-light);
    box-shadow: 0 6px 16px rgba(28, 26, 24, .08);
  }
  .agenda-paso__icono {
    display: block;
    color: var(--gold-ink);
  }
  .agenda-paso__n {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
  }
  .agenda-paso__txt {
    font-size: 13px;
    overflow-wrap: break-word;
  }

  .chat__barra { padding: 12px 16px; }
  .chat__nota { display: none; }
  .chatbot-slot { min-height: min(70vh, 520px); }
  .chatbot-slot iframe { height: min(70vh, 520px); }
  .chatbot-placeholder { padding: 32px 20px; }
  .chatbot-placeholder .btn { width: 100%; }

  .agenda__privacidad { align-items: flex-start; }

  .agenda__datos {
    flex-direction: column;
    align-items: flex-start;
  }
  .agenda__dato { align-items: flex-start; }
  .agenda__privacidad svg,
  .agenda__dato svg { margin-top: 2px; }
}

/* 25. Orientación por síntomas ============================================ */

/* «Opción A · tarjetas por zona y panel de resultados». Escritorio: zonas a
   la izquierda y el panel «Tu orientación» fijo (sticky) a la derecha. */
.orienta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
}
/* El JS quita el atributo `hidden` al arrancar. Sin esta regla, el
   `display: flex` de arriba ganaría sobre el [hidden] del navegador y la
   herramienta se vería vacía cuando no hay JS. */
.orienta[hidden] { display: none; }
.orienta__noscript {
  max-width: 48em;
  color: var(--text-2);
}

.orienta__grupos {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Zonas: <details> por zona. En móvil son desplegables; en escritorio van
   siempre abiertas (::details-content y, sin soporte, el JS las abre) y el
   summary es solo el encabezado de la tarjeta. */
.orienta__zona {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 16px;
}
.orienta__zona-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  list-style: none;
  cursor: pointer;
}
.orienta__zona-cab::-webkit-details-marker { display: none; }
/* Mini malla, como Padecimientos, en un recuadro del mismo tamaño que el
   círculo anterior (40px), para no cambiar el alto del encabezado. El span
   con data-icono (lo que clona orientacion.js) no cuenta para el centrado. */
.orienta__zona-icono {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-ilus);
}
.orienta__zona-svg { display: contents; }
.orienta__zona-icono .icono-pad {
  width: 35px;
  height: 35px;
}
.orienta__zona-nombre {
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
/* Contador de la zona: siempre en texto («0 marcadas»); con 1 o más, además
   en píldora oscura. */
.orienta__zona-cuenta {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
}
.orienta__zona-cuenta--activa {
  background: var(--ink);
  color: var(--cream);
}
.orienta__zona-mas {
  flex: none;
  width: 24px;
  text-align: center;
}
.orienta__zona[open] .orienta__zona-mas { transform: rotate(45deg); }
.orienta__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
}
@media (min-width: 901px) {
  .orienta__zona-cab {
    min-height: 0;
    cursor: default;
    pointer-events: none;
  }
  .orienta__zona-cuenta,
  .orienta__zona-mas { display: none; }
}
@supports selector(::details-content) {
  @media (min-width: 901px) {
    .orienta__zona::details-content { content-visibility: visible; }
  }
}

.chip-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--white);
  border: 1px solid var(--meta-on-dark);   /* 3.54:1 contra el blanco */
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
@media (prefers-reduced-motion: reduce) {
  .chip-boton { transition: none; }
}
.chip-boton:hover { border-color: var(--gold-ink); }
.chip-boton__check {
  display: none;
  flex: none;
  color: var(--gold);
}
/* Marcada: fondo --ink, texto claro y palomita dorada (y aria-pressed). */
.chip-boton[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}
.chip-boton[aria-pressed="true"] .chip-boton__check { display: block; }

/* Panel «Tu orientación». */
.orienta-panel {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 24px 24px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 16px;
  box-shadow: 0 24px 48px -28px rgba(28, 26, 24, .35);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.orienta-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gold);
}
.orienta-panel__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.orienta-panel__titulo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
}
.orienta-panel__cuenta {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
}

.orienta__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.orienta__vacio {
  padding: 18px;
  border: 1px dashed var(--line-light-3);
  border-radius: 12px;
  font-size: 14px;
  color: var(--muted);
}

/* Escritorio: la lista de resultados tiene altura máxima para que el panel
   completo quepa en la pantalla, con los botones, «Limpiar selección» y los
   avisos siempre visibles. 548px = 24px arriba y abajo del panel + ~500px
   del resto del panel (padding, título, botones, Limpiar y avisos). Si hay
   más contenido abajo, el JS añade --mas y aparece un degradado; si se
   puede desplazar, la lista recibe tabindex="0" y el foco visible normal. */
@media (min-width: 901px) {
  .orienta__resultados {
    max-height: max(140px, calc(100vh - var(--header-h) - 548px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .orienta__resultados--mas::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    height: 40px;
    margin-top: -40px;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
    pointer-events: none;
  }
}

/* Resultado: mini tarjeta crema con la zona y el tipo, el procedimiento, la
   descripción y las molestias que lo originan. */
.res-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--cream);
  border-radius: 12px;
}
.res-card__zona {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.res-card__nombre {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
}
.res-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.res-card__por {
  font-size: 13px;
  color: var(--muted);
}

.orienta-panel__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.orienta-panel__limpiar {
  align-self: center;
  min-height: 44px;
  margin-top: -8px;
  padding: 0 12px;
  background: none;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.orienta-panel__limpiar:hover { color: var(--gold-ink-2); }

.orienta__avisos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line-light);
  padding-top: 16px;
}
.orienta__aviso {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.orienta__aviso--fuerte { font-weight: 600; }
.orienta-panel .nota-hospitales {
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  font-size: 13px;
}

/* Barra fija de móvil (solo con al menos 1 molestia marcada). Va dentro de
   .orienta, así que no baja más allá de la herramienta ni tapa el pie; flota
   justo encima de la barra de acciones móvil (11 b). */
.orienta-barra { display: none; }

/* Móvil: una columna; el panel sin sticky. .orienta pasa a flex porque en
   una rejilla el sticky de la barra quedaría atrapado en su celda. */
@media (max-width: 900px) {
  .orienta {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .orienta__grupos { gap: 12px; }
  .orienta__zona { padding: 4px 16px; }
  .orienta__chips { padding: 4px 0 16px; }
  .orienta-panel {
    position: static;
    padding: 24px 18px 20px;
  }
  .orienta-panel__titulo { font-size: 26px; }
  .orienta-barra:not([hidden]) {
    position: sticky;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    margin-right: 0;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--ink);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cream);
    text-decoration: none;
  }
  .orienta-barra:hover { color: var(--cream); }
  .orienta-barra__txt { min-width: 0; }
  .orienta-barra__n {
    font-size: 17px;
    color: var(--gold);
  }
  .orienta-barra__ver {
    flex: none;
    color: var(--gold);
  }
  .orienta-barra__corto { display: none; }
}
/* ≤ 360px: forma corta («3 sugeridos · Ver ↓») para que quepa en un
   renglón. */
@media (max-width: 360px) {
  .orienta-barra__largo { display: none; }
  .orienta-barra__corto { display: inline; }
}

/* 26. Inicio v2 (lote 1) ================================================== */

/* Inicio por prioridades (referencia/inicio-v2-mockup.html): portada,
   cirugía, proceso, síntomas, audición, adaptación, doctor, banda en
   inglés, consulta, preguntas, siguiente paso y consultorio. Solo tokens de
   :root. Las secciones 14 a 20 quedan para el Inicio en inglés hasta el
   lote 2; su limpieza va en la fase 9. */

/* Fotos de sección (Consulta y Adaptación del Inicio, y «Cómo es el
   proceso» de las páginas de tratamiento): a todo el ancho de su columna, recortadas con object-fit y radio de 6px. Cada una pone su
   proporción y su encuadre. */
.foto-seccion {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

/* Botón con borde dorado sobre oscuro (7.3:1 contra --bg). */
.btn--borde-dorado {
  background: transparent;
  border-color: var(--gold);
  color: var(--ink-on-dark);
}
.btn--borde-dorado:hover,
.btn--borde-dorado:focus-visible {
  background: rgba(196, 154, 108, .12);
  border-color: var(--gold-hover);
  color: var(--ink-on-dark);
}

/* 26.1 Portada (desde 1000px; por debajo, foto arriba en 4:3, 26.12), como
        en el mockup: la foto (quirofano-vertical, 2:3) pasa por detrás del
        texto y se oscurece con un degradado largo, así que bajo el titular
        se ven, muy oscuras, las lupas y la lámpara. Todo se mide desde T, el
        inicio del texto (borde izquierdo del contenedor): 24px por debajo
        de 1248px y 50% − 576 por encima. El texto termina en T + 580 como
        máximo. La foto empieza en T + 260 y llega al borde derecho, a todo
        el alto (franja de datos incluida). */
.pv2 {
  --pv2-t: max(var(--gutter), calc(50% - 576px));
  display: flex;
  flex-direction: column;
}
.pv2__foto {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pv2-t) + 260px);
  right: 0;
}
.pv2__foto picture { display: contents; }
.pv2__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto es más alta que ancha y la caja de la portada mucho más ancha
     que alta: se escala al ancho, así que la posición horizontal no mueve
     nada y solo cuenta la vertical. Los ojos están hacia el 56% del ancho
     de la foto: en T + 260 + 0.56 × ancho quedan siempre a la derecha del
     párrafo (tabla en docs/01); las lupas y la lámpara pasan por detrás
     del titular, bajo el velo. Con 18% en vertical la cara se ve grande,
     con las lupas y la lámpara; el gorro se recorta arriba. */
  object-position: 50% 18%;
}
/* El velo cubre toda la portada y sus paradas se miden desde T: --bg
   sólido hasta T + 290, .85 en T + 550 y transparente desde T + 940.
   Abajo, 140px de fundido hacia --bg. Encima de todo, una sombra radial
   solo en la esquina inferior derecha, bajo la frase («opción P2»), que no
   llega a la cara. */
.pv2__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(34% 34% at 90% 80%, rgba(20, 18, 16, .78) 0%, rgba(20, 18, 16, .45) 50%, rgba(20, 18, 16, 0) 100%),
    linear-gradient(0deg, var(--bg) 0, rgba(20, 18, 16, 0) 140px),
    linear-gradient(90deg,
      var(--bg) 0,
      var(--bg) calc(var(--pv2-t) + 290px),
      rgba(20, 18, 16, .85) calc(var(--pv2-t) + 550px),
      rgba(20, 18, 16, 0) calc(var(--pv2-t) + 940px));
}
/* width: 100% porque .pv2 es flex en columna: ahí un hijo con margin-inline
   auto (el .container) no se estira, se encoge a su contenido y se centra,
   y el texto dejaba de alinearse con el header. */
.pv2__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 72px;
  width: 100%;
  padding-top: 112px;
}
.pv2__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  max-width: 580px;
}
.pv2 .h1-main {
  font-size: clamp(48px, 6.4vw, 84px);
  line-height: 1;
}
.pv2__lead { max-width: 32em; }
.pv2__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pv2__consulta {
  font-weight: 500;
  color: var(--muted-on-dark);
}
.pv2__consulta:hover { color: var(--gold-hover); }
/* Firma («opción P2» del canvas, 31/10/2026): sola, debajo de los botones,
   a 340px (230px en ≤ 699px, 26.12). Es la de El doctor. Hasta entonces iba
   al lado de la frase (.pv2__lema, «opción A»). */
.pv2__firma {
  display: block;
  width: 340px;
  height: auto;
}
/* Frase «Tu salud / en manos expertas» («opción P2»; tipografía «V2-S» del
   canvas Portada-Frase-Serif, 02/11/2026): primer renglón con la familia,
   el peso y el color del h1 de la portada (--font-display, 400, --c-ink,
   sin cursiva) y segundo en Great Vibes, --gold. Recta, sin inclinación,
   sobre la esquina inferior derecha de la foto. Va en
   .pv2__pie, el bloque de la franja, así que se mide desde la franja.
   Su borde derecho va a 44px del borde derecho de la portada en cualquier
   ancho: .pv2__pie mide lo que el contenedor (100%) y la portada, 100cqw
   (.pv2 es contenedor de consultas desde 1000px), así que el margen que
   deja el contenedor a cada lado es (100cqw − 100%) / 2. No sirve
   var(--pv2-t): su 50% se resuelve aquí contra .pv2__pie, no contra la
   portada, y la frase quedaba a 156px del borde a 1440 y a 396px a 1920.
   La línea con vw es el respaldo para navegadores sin cqw (incluye la
   barra de desplazamiento). Todo escala con --pv2-frase (62px hasta
   1442px, 4.3vw después y 84px desde 1954px), en las proporciones del
   mockup a 1440: segundo renglón 44/62, primer renglón 70/62 a la
   izquierda del segundo, raya de 40/62 × 2px con 12/62 de aire y 96/62 a
   la izquierda del borde derecho, y base 46/62 por encima de la franja
   (46px a 1440). El primer renglón mide clamp(52px, 3.6vw, 70px), 52/62
   de --pv2-frase, con interlineado .95. El texto lleva
   text-shadow 0 2px 14px rgba(0,0,0,.55); el
   fondo oscuro es la capa radial de .pv2__velo. Por debajo
   de 1000px se mide desde la foto, con tamaños fijos (26.12). */
@media (min-width: 1000px) {
  .pv2 { container-type: inline-size; }
}
.pv2__pie { position: relative; }
.pv2__frase {
  --pv2-frase: clamp(62px, 4.3vw, 84px);
  position: absolute;
  right: calc(44px - (100vw - 100%) / 2);
  right: calc(44px - (100cqw - 100%) / 2);
  bottom: calc(100% + var(--pv2-frase) * 46 / 62);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.pv2__frase-1 {
  margin-right: calc(var(--pv2-frase) * 70 / 62);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(52px, 3.6vw, 70px);
  line-height: .95;
  color: var(--c-ink);
}
.pv2__frase-2 { font-size: calc(var(--pv2-frase) * 44 / 62); }
.pv2__frase::after {
  content: "";
  width: calc(var(--pv2-frase) * 40 / 62);
  height: 2px;
  margin-top: calc(var(--pv2-frase) * 12 / 62);
  margin-right: calc(var(--pv2-frase) * 96 / 62);
  background: var(--gold);
}
/* Borde superior a todo el ancho del contenedor (fondo .85 solo desde 1000px),
   sobre el fundido inferior de la foto. 4 columnas desde 1000px y 2 por
   debajo (26.12), separadas por líneas verticales finas. */
.pv2__datos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}
/* Desde 1000px, como en el mockup: fondo .85 y borde superior a todo el
   ancho de la pantalla, con los textos alineados al contenedor. Los pinta un
   ::before que sale 100vw a cada lado; .hero lo recorta (overflow: clip), así
   que no hay scroll horizontal. isolation crea el contexto de apilamiento
   para que el z-index: -1 (local) lo deje detrás de los textos de la franja
   y por encima de la foto. */
@media (min-width: 1000px) {
  .pv2__datos {
    position: relative;
    isolation: isolate;
    border-top: 0;
  }
  .pv2__datos::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    z-index: -1;
    border-top: 1px solid var(--line-dark);
    background: rgba(20, 18, 16, .85);
  }
}
/* Cada dato: ícono de línea --gold (SVG en línea, aria-hidden) y dos
   renglones de texto. */
.pv2__dato {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 22px 24px;
}
.pv2__dato:first-child { padding-left: 0; }
.pv2__dato + .pv2__dato { border-left: 1px solid var(--line-dark); }
.pv2__dato-icono {
  flex: none;
  display: block;
  color: var(--gold);
}
.pv2__dato-textos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pv2__dato-txt {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-on-dark);
}
.pv2__dato-sub {
  font-size: 14px;
  color: var(--muted-on-dark);
}

/* 26.2 Cirugía: dos tarjetas marfil con la ilustración animada (la tarjeta
        entera es clicable por el ::after del enlace), píldoras y cierre. */
.cx2__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.cx2__encabezado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 24px 56px;
  align-items: end;
}
/* Adaptación («Ajustes de fotos · A»): desde 1000px, el eyebrow, el título y
   el párrafo (.ad2__intro) a la izquierda y doctor-modelo-oido completa a la
   derecha (5fr / 6fr, centradas en vertical); por debajo, la foto después
   del párrafo. */
.ad2__encabezado {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 56px;
  align-items: center;
}
.ad2__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1000px) {
  .ad2__encabezado { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
/* Mínimo de 320px: 2 columnas desde ~690px de contenedor (a 768 y 1024 iba
   una sola, con ilustraciones de 400 a 550px de alto). */
.cx2__tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}
.cx2__tarjeta {
  --c-ink:          var(--ink);
  --c-accent:       var(--gold-ink);
  --c-accent-hover: var(--gold-ink-2);
  --c-focus:        var(--gold-ink);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius-card);
}
/* La ilustración es 4:3; en la caja 16:9 se ve completa, centrada sobre su
   mismo fondo. */
.cx2__ilus,
.au2__ilus {
  display: flex;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-ilus);
}
.cx2__ilus .ilus-v,
.au2__ilus .ilus-v {
  width: auto;
  height: 100%;
}
.cx2__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 12px;
  padding: 32px;
}
.cx2__zona {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.cx2__titulo {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.05;
}
.cx2__txt {
  font-size: 16px;
  color: var(--text);
}
.cx2__cta { margin-top: auto; }
.cx2__cta::after {
  content: "";
  position: absolute;
  inset: 0;
}
.cx2__tarjeta:hover .cx2__cta { color: var(--gold-ink-2); }

.cx2__tambien {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cx2__tambien-titulo { color: var(--muted-on-dark); }
.pildoras {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pildora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--meta-on-dark);
  border-radius: var(--radius-pill);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-on-dark);
  text-decoration: none;
}
/* Sin enlace (hoy, las cuatro de «También realizamos»): sin flecha y con
   borde más tenue, para que no parezca un enlace. */
.pildora--fija {
  border-color: var(--line-dark-3);
  color: var(--text-on-dark);
}
.cx2__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
}
.cx2__hospitales {
  max-width: 46em;
  font-size: 15px;
  color: var(--muted-on-dark);
}

/* 26.3 Proceso quirúrgico: 5 pasos con punto unidos por una línea. Desde
        1000px van en un renglón con la línea horizontal; por debajo, en una
        columna con la línea vertical. La línea son tramos de paso a paso:
        el ::before de cada paso (menos el último) es el tramo base
        (--line-paso) y el ::after, el tramo dorado que se llena encima. El
        punto es un <span> (.camino__punto) para que esos pseudoelementos
        queden libres; cada tramo va de borde a borde de los puntos, así que
        no los tapa. El estado por defecto es el final (todo encendido); la
        animación está en «Pasos animados», más abajo. */
.camino {
  padding-block: 88px;
  background: var(--surface);
  border-block: 1px solid var(--line-dark);
}
.camino__inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.camino__pasos {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 0;
}
/* En columna (< 1000px): el punto va arriba a la izquierda, a la altura del
   rótulo, y el texto se recorre 36px para que la línea vertical no lo
   cruce. */
.camino__paso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 0 36px;
}
.camino__punto {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--gold);
}
/* Tramos en columna: verticales, del borde inferior de un punto (18px) al
   borde superior del siguiente (el alto del paso más los 24px de
   separación). */
.camino__paso:not(:last-child)::before,
.camino__paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 8px;
  width: 2px;
  height: calc(100% + 24px - 18px);
  background: var(--line-paso);
}
.camino__paso:not(:last-child)::after {
  background: var(--gold);
  transform-origin: top;
}
.camino__nombre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.camino__txt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--lead-on-dark);
}
/* Desde 1000px, los 5 en un renglón: tramos horizontales, del borde derecho
   de un punto (18px) al borde izquierdo del siguiente (el ancho del paso,
   sin separación entre columnas). */
@media (min-width: 1000px) {
  .camino__pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .camino__paso { padding: 40px 20px 0 0; }
  .camino__punto { top: 8px; }
  .camino__paso:not(:last-child)::before,
  .camino__paso:not(:last-child)::after {
    top: 16px;
    left: 18px;
    width: calc(100% - 18px);
    height: 2px;
  }
  .camino__paso:not(:last-child)::after { transform-origin: left; }
}

/* 26.4 Síntomas («opción B · colores»): fondo oscuro y tarjetas marfil. Usa
        los tokens oscuros por defecto (eyebrow --gold, título
        --ink-on-dark, foco dorado). Sin JS no se ve el selector y los dos
        grupos van uno debajo de otro, cada uno con su título; main.js añade
        .sintomas--tabs. */
.sintomas {
  background: var(--bg);
  border-top: 1px solid var(--line-dark);
  color: var(--c-text);
}
.sintomas__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.sintomas__encabezado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 900px;
  text-align: center;
}
.sintomas__selector { display: none; }
/* Selector sobre --surface con borde --meta-on-dark: 4.9:1 contra --surface
   y 5.3:1 contra --bg (con --line-dark-3 era 2.2:1 y 2.4:1). La pestaña
   activa es la píldora marfil (14.9:1 contra --surface); la inactiva,
   texto --ink-on-dark sobre --surface. */
.sintomas--tabs .sintomas__selector {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--meta-on-dark);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.sintomas__pestana {
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-on-dark);
  cursor: pointer;
}
.sintomas__pestana[aria-selected="true"] {
  background: var(--cream);
  color: var(--ink);
}
.sintomas__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.sintomas__panel[hidden] { display: none; }
.sintomas__grupo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.sintomas--tabs .sintomas__grupo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.sintomas__lista {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 14px;
}
.sintoma {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  height: 100%;
  min-height: 120px;
  padding: 28px;
  border-radius: 6px;
  background: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .15s ease;
}
.sintoma:hover {
  background: var(--white);
  color: var(--ink);
}
.sintoma__flecha {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
}
.sintomas__nota {
  max-width: 44em;
  font-size: 16px;
  text-align: center;
  color: var(--lead-on-dark);
}

/* 26.5 Estudios de audición («opción C», píldoras C1): desde 1000px, dos
        columnas 5fr / 6fr alineadas arriba: la tarjeta oscura del estudio
        principal y, a la derecha, «Estudios» y «Especializados» en píldoras
        y la ficha de equipo en dos columnas. Debajo, a todo el ancho, las
        notas al pie. Por debajo de 1000px, primero la tarjeta y luego los
        bloques. Las píldoras son li informativos: sin hover, cursor ni
        foco. */
.au2 {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.au2__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 40px 56px;
}
@media (min-width: 1000px) {
  .au2__cuerpo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.au2__principal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--text-on-dark);
}
.au2__principal-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px;
}
.au2__principal-titulo {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1.02;
}
.au2__principal-txt {
  font-size: 16px;
  color: var(--lead-on-dark);
}
.au2__detalle {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.au2__grupo-titulo {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
/* Píldoras: se acomodan en varias filas; el texto puede partirse dentro de
   la píldora (min-width: 0), así que ninguna se sale del ancho a 390px. */
.au2__pildoras {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.au2__pildoras li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 9px 16px;
  border: 1px solid var(--cream-pildora);
  border-radius: var(--radius-pill);
  background: var(--cream-pildora);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}
.au2__pildoras li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.au2__pildoras--borde li {
  border-color: var(--line-light-2);
  background: transparent;
}
/* Ficha de equipo: dos columnas (una por debajo de 480px), nombre arriba y
   valor abajo, con línea superior. */
.au2__equipo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.au2__equipo-fila {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 0;
  border-top: 1px solid var(--line-light-2);
}
.au2__equipo-fila dt {
  font-size: 13px;
  color: var(--muted);
}
.au2__equipo-fila dd {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
@media (max-width: 479px) {
  .au2__equipo { grid-template-columns: minmax(0, 1fr); }
}
/* Notas al pie a todo el ancho del contenedor: dos columnas desde 900px. */
.au2__notas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line-light-2);
}
@media (min-width: 900px) {
  .au2__notas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.au2__proceso {
  font-size: 16px;
  color: var(--text-nota);
}
.au2__colabora {
  font-size: 13px;
  color: var(--muted);
}

/* 26.6 Adaptación auditiva: proceso de 5 pasos en línea. Cada paso lleva su
        borde superior base (--line-paso) y, encima, un segmento dorado
        (::before) del mismo ancho. Por defecto, todo encendido; la animación
        de llenado está en «Pasos animados», más abajo. Funciona igual en una
        fila, en varias o en una columna. */
.ad2 {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.ad2__titulo {
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.04;
}
/* doctor-modelo-oido completa: la foto ya es 3:2, así que no se recorta. */
.ad2__foto { aspect-ratio: 3 / 2; }
.ad2__titulo em {
  font-style: italic;
  color: var(--gold);
}
.ad2__pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 16px 0;
}
.ad2__paso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px 0 0;
  border-top: 2px solid var(--line-paso);
}
.ad2__paso::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform-origin: left;
}
.ad2__num {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  color: var(--gold);
}
.ad2__nombre {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-on-dark);
}
.ad2__txt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lead-on-dark);
}
.ad2__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 26.6 b La confianza de mis pacientes (#opiniones), «opción B»: marfil
          (.section--cream, tokens claros). Encabezado con el eyebrow y el
          título a la izquierda y el resumen de Google a la derecha, alineado
          abajo con el título (debajo del título por debajo de 700px).
          Debajo, las reseñas en una fila deslizable con scroll-snap: 3
          tarjetas desde 1000px, 2 entre 700 y 999px y, por debajo, una al
          85% con la siguiente asomándose. La fila es una rejilla de un solo
          renglón, así que todas las tarjetas miden lo mismo de alto. Sin JS
          se desliza con el dedo, el trackpad o la barra; las flechas llegan
          con [hidden] y main.js las muestra. */
.confianza__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: 40px;
}
.confianza__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.confianza__calif {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.confianza__fuente,
.confianza__cuantas {
  font-size: 13px;
  color: var(--muted);
}
.confianza__fuente { font-weight: 600; }
.confianza__nota {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  color: var(--ink);
}
/* Resumen «D1»: Doctoralia y Google lado a lado, separados por una línea
   vertical fina (.confianza__separador, en su propia columna para que
   recorra los dos renglones). Cada uno, su calificación (estrellas en SVG,
   role="img") arriba y su botón al perfil debajo. Las cuatro piezas son
   hijas directas de la rejilla para que en móvil los botones puedan bajar
   juntos, debajo de los dos datos. */
.confianza__resumen {
  display: grid;
  grid-template-columns: auto 1px auto;
  grid-template-areas:
    "doc-calif sep goo-calif"
    "doc-boton sep goo-boton";
  align-items: end;
  gap: 16px 32px;
}
.confianza__calif--doctoralia { grid-area: doc-calif; }
.confianza__calif--google { grid-area: goo-calif; }
.confianza__boton--doctoralia { grid-area: doc-boton; }
.confianza__boton--google { grid-area: goo-boton; }
.confianza__boton { justify-self: start; }
.confianza__separador {
  grid-area: sep;
  align-self: stretch;
  background: var(--line-light-2);
}
.confianza__nota-fila {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Estrellas en el dorado oscuro de los textos de la sección (el SVG usa
   currentColor), con más contraste sobre el marfil que --gold. */
.confianza__estrellas {
  display: block;
  flex: none;
  color: var(--gold-ink);
}
/* Solo en EN: las reseñas van en su español original. */
.confianza__idioma {
  font-size: 13px;
  color: var(--muted);
}
.confianza__fila {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: 16px;
  padding-bottom: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Sin JS: barra fina dorada sobre transparente (la gris nativa de Windows
     desentona). */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.confianza__fila::-webkit-scrollbar { height: 6px; }
.confianza__fila::-webkit-scrollbar-track { background: transparent; }
.confianza__fila::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--gold);
}
/* Con JS, cuando main.js muestra las flechas: sin barra. La fila se sigue
   desplazando con las flechas, el teclado, el trackpad y el dedo. */
.confianza__fila--con-flechas {
  padding-bottom: 0;
  scrollbar-width: none;
}
.confianza__fila--con-flechas::-webkit-scrollbar { display: none; }
.confianza__fila:focus-visible { outline-offset: 4px; }
/* Tarjeta «T3»: arriba, la inicial en un círculo, el nombre con «Opinión en
   Google / Doctoralia» y las cinco estrellas; debajo, la cita sin comillas.
   Todas miden lo mismo (la fila es un solo renglón de rejilla); el contenido
   va arriba y el espacio que sobra queda abajo. */
.confianza__resena {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px 28px;
  border: 1px solid var(--line-light-2);   /* #D8CEC0 */
  border-radius: 16px;
  background: var(--white);
  scroll-snap-align: start;
}
.confianza__quien {
  display: flex;
  align-items: center;
  gap: 12px;
}
.confianza__inicial {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--cream);
}
.confianza__datos {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.confianza__autor {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
/* En las tarjetas, único lugar donde puede ir «Doctoralia»; fuera de
   ellas, solo el bloque de calificación del encabezado (qa.ps1). */
.confianza__resena-fuente {
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}
.confianza__estrellas-resena {
  flex: none;
  display: block;
  color: var(--gold-ink);
}
/* Cita: serif de 18px con interlineado 1.45; el texto es el del paciente,
   tal cual, sin comillas. */
.confianza__cita {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
}
/* Entre párrafos, exactamente un renglón (1.45em): así todo el texto de la
   cita cae en la misma rejilla y el recorte de 6 renglones nunca corta a
   media línea, tenga uno o varios párrafos (con 12px, el segundo párrafo
   se desfasaba y el corte caía a mitad de un renglón). */
.confianza__cita p + p { margin-top: 1.45em; }
/* «Leer más» (main.js): con JS, la fila lleva --recorte y cada cita se
   limita a 6 renglones (alto máximo de 6 × el interlineado); el botón solo
   aparece en las que pasan de 6. Al abrirla, --completa quita el límite.
   Sin JS no hay clase ni botón: se ven completas. */
.confianza__fila--recorte .confianza__cita:not(.confianza__cita--completa) {
  max-height: calc(1.45em * 6);
  overflow: hidden;
}
.confianza__mas {
  align-self: flex-start;
  min-height: 44px;
  margin-top: -12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-ink);
  cursor: pointer;
}
.confianza__mas[hidden] { display: none; }
/* Con una reseña abierta (main.js): las tarjetas dejan de estirarse a la
   altura del renglón; la abierta crece y las demás conservan la altura de
   la fila cerrada, que main.js les fija. */
.confianza__fila--abierta { align-items: start; }
.confianza__flechas {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}
/* Sin esto, el display: flex de arriba ganaría sobre el [hidden]. */
.confianza__flechas[hidden] { display: none; }
.confianza__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.confianza__flecha:focus-visible { border-radius: 50%; }
/* ← al inicio de la fila y → al final. */
.confianza__flecha:disabled {
  border-color: var(--line-light-3);
  color: var(--meta-on-dark);
  cursor: not-allowed;
}
@media (min-width: 700px) {
  .confianza__fila { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (min-width: 1000px) {
  .confianza__fila { grid-auto-columns: calc((100% - 32px) / 3); }
}
@media (max-width: 699px) {
  .confianza__cab {
    flex-direction: column;
    align-items: flex-start;
  }
  /* D1 en móvil: los dos datos en dos columnas (número, estrellas debajo
     y texto) y los dos botones a todo el ancho, Doctoralia primero. Las
     estrellas se encogen si la columna no llega a 116px. */
  .confianza__resumen {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    grid-template-areas:
      "doc-calif sep goo-calif"
      "doc-boton doc-boton doc-boton"
      "goo-boton goo-boton goo-boton";
    align-items: start;
    gap: 12px 20px;
  }
  .confianza__nota-fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .confianza__estrellas {
    max-width: 100%;
    height: auto;
  }
  .confianza__boton { justify-self: stretch; }
  .confianza__boton--doctoralia { margin-top: 12px; }
}

/* 26.7 El doctor: el bloque .doctor (sección 19) con el texto primero y una
        sola foto. Credenciales en 2 columnas (las reglas #doctor de la
        sección 19, del Inicio anterior que aún usa el inglés, las ponían en
        3 desde 1100px, con la cuarta sola), 1 por debajo de 480px. En una
        sola columna (≤ 900px) la foto no pasa de 480px. Llevan #doctor para
        ganarles. Desde que Confianza va entre Adaptación y El doctor, ya no
        comparten fondo y El doctor recupera su padding superior. */
.doctor--v2 .doctor__firma { max-width: 240px; }
#doctor .doctor--v2 .credenciales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479px) {
  #doctor .doctor--v2 .credenciales { grid-template-columns: minmax(0, 1fr); }
}
/* Retrato con marco y ficha («A + ficha», doctor-retrato-traje, 4:3).
   Componente compartido: lo usan El doctor del Inicio (#doctor, abajo) y la
   portada de la página El doctor (.doctor-portada, sección 19). En el
   Inicio, desde 1000px, el texto va a la izquierda y el retrato en 2:3 a la
   derecha (hasta 460px de ancho, 88px de separación). Doctor centrado
   («Retrato centrado», acercamiento 1.4×, 29/10/2026): el <picture> es la
   caja redondeada que recorta (overflow: hidden) y la foto va absoluta
   dentro, al 244% del ancho del marco y anclada a la izquierda: el centro
   del doctor, al 20.5% del ancho de la foto, cae justo al centro. El top
   negativo deja la cara (medida en captura: al 33% del alto de la foto) a
   un 26-27% del alto del marco, con aire sobre la cabeza: -14% en 2:3 y
   -21% en 4:5; en los dos la foto sigue cubriendo el borde inferior.
   Detrás, un
   marco dorado de 1px del mismo tamaño y radio, desplazado 22px, y un
   brillo cálido tenue que sale 90px alrededor; los dos son decorativos.
   La ficha del certificado flota sobre la esquina inferior izquierda
   (sobresale 48px, a 44px del borde inferior) y no llega a la cara. La
   sección recorta el brillo (overflow: clip: .doctor-v2 en el Inicio,
   .hero-trat en El doctor), así que no hay scroll horizontal. */
.doctor-v2 { overflow: clip; }
.doctor-v2__figura {
  position: relative;
  isolation: isolate;
  aspect-ratio: 2 / 3;
}
.doctor-v2__figura picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: 28px;
}
.doctor-v2__img {
  position: absolute;
  left: 0;
  top: -14%;
  display: block;
  width: 244%;
  max-width: none;
  height: auto;
}
.doctor-v2__marco {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid var(--gold);
  border-radius: 28px;
  transform: translate(22px, 22px);
}
.doctor-v2__brillo {
  position: absolute;
  inset: -90px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(196, 154, 108, .22), rgba(196, 154, 108, 0));
  pointer-events: none;
}
.doctor-v2__ficha {
  position: absolute;
  left: -48px;
  bottom: 44px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 340px;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--cream);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.doctor-v2__ficha-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.doctor-v2__ficha-titulo {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
}
.doctor-v2__ficha-dato {
  font-size: 13px;
  color: var(--muted);
}
@media (min-width: 1000px) {
  #doctor .doctor--v2 {
    grid-template-columns: minmax(0, 1fr) min(460px, 40%);
    gap: 88px;
    align-items: center;
  }
}
/* Por debajo de 1000px: la foto a todo el ancho en 4:5, con el mismo radio;
   el marco se desplaza solo 12px y la ficha queda dentro de la foto (16px
   a la izquierda y abajo) para no salirse de la pantalla. En el Inicio la
   foto pasa arriba del texto (order); en El doctor va donde está en el
   HTML, debajo del nombre. */
@media (max-width: 999px) {
  #doctor .doctor--v2 { grid-template-columns: minmax(0, 1fr); }
  .doctor--v2 > .doctor-v2__figura { order: -1; }
  .doctor-v2__figura {
    aspect-ratio: 4 / 5;
    margin-bottom: 12px;
  }
  .doctor-v2__img { top: -21%; }
  .doctor-v2__marco { transform: translate(12px, 12px); }
  .doctor-v2__ficha {
    left: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
  }
}
/* En celular la ficha es más compacta, para que no suba hasta la cara (en
   inglés el nombre del consejo ocupa tres renglones). */
@media (max-width: 479px) {
  .doctor-v2__ficha { padding: 14px 18px; }
  .doctor-v2__ficha-titulo { font-size: 20px; }
}

/* 26.8 Banda «Pacientes de Texas» (en español desde el 29/10/2026; antes
        «Patients from Texas», en inglés). */
.texas { background: var(--bg); }
.texas__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  padding-block: 40px;
  border-block: 1px solid var(--gold);
}
.texas__grupo {
  display: flex;
  align-items: center;
  gap: 24px;
}
.texas__sello {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.texas__texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.texas__titulo {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.1;
}
.texas__apoyo {
  font-size: 15px;
  color: var(--lead-on-dark);
}

/* 26.9 Consulta especializada: desde 1000px, dos columnas con la foto
        (consulta-endoscopia-pantalla, 3:2) a la izquierda y el título y el
        texto a la derecha; por debajo, la foto arriba. */
.consulta2 {
  padding-block: 72px;
  border-bottom: 1px solid var(--line-dark);
}
.consulta2__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 32px 56px;
}
.consulta2__foto { aspect-ratio: 3 / 2; }
.consulta2__contenido {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1000px) {
  .consulta2__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.consulta2__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* 26.10 Preguntas frecuentes («opción B», por tema): <details> nativos sobre
         oscuro, en el contenedor normal del sitio (alineado con el logo).
         Dos grupos, Cirugía y Audición, en dos columnas iguales con 56px de
         separación desde 900px y en una sola por debajo (Cirugía primero).
         align-items: start, para que abrir una pregunta no estire la otra
         columna. Cada grupo lleva un h3 en mayúsculas de 13px. */
.faq2__inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.faq2__grupos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 40px 56px;
}
@media (min-width: 900px) {
  .faq2__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Cada grupo, alineado arriba y a su propio alto: al abrir una pregunta de
   una columna, la otra no se estira ni se mueve. */
.faq2__grupo { align-self: start; }

/* Pestañas «Cirugía / Audición» («M1»), solo por debajo de 900px y con JS
   (.faq2--tabs; main.js pone los roles con matchMedia). Selector como el de
   síntomas en oscuro, entre el título y las preguntas; solo se ve el grupo
   activo y los h3 se ocultan, porque la pestaña ya dice el tema. Sin JS o
   desde 900px, el selector no se ve. */
.faq2__selector { display: none; }
.faq2__pestana {
  flex: 1;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-on-dark);
  cursor: pointer;
}
.faq2__pestana[aria-selected="true"] {
  background: var(--cream);
  color: var(--ink);
}
@media (max-width: 899px) {
  .faq2--tabs .faq2__selector {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--meta-on-dark);
    border-radius: var(--radius-pill);
    background: var(--surface);
  }
  .faq2--tabs .faq2__grupo[hidden] { display: none; }
  .faq2--tabs .faq2__grupo-titulo { display: none; }
  /* Preguntas un poco más compactas en una columna. */
  .faq2__pregunta {
    padding-block: 18px;
    font-size: 17px;
  }
}
.faq2__grupo-titulo {
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--meta-on-dark);
}
.faq2__lista { border-top: 1px solid var(--line-dark); }
.faq2__item { border-bottom: 1px solid var(--line-dark); }
.faq2__pregunta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 22px 0;
  font-size: 18px;
  color: var(--ink-on-dark);
  cursor: pointer;
  list-style: none;
}
.faq2__pregunta::-webkit-details-marker { display: none; }
.faq2__mas {
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  transition: transform .15s ease;
}
.faq2__item[open] .faq2__mas { transform: rotate(45deg); }
.faq2__respuesta {
  margin-bottom: 22px;
  font-size: 16px;
  color: var(--lead-on-dark);
}
/* Respuestas de varios párrafos: menos aire entre ellos que al final. */
.faq2__respuesta:not(:last-child) { margin-bottom: 12px; }

/* 26.11 Siguiente paso («opción A», marfil): --cream con bordes arriba y
         abajo --line-light-2. Título --ink con «para ti» en itálica serif
         --gold-ink (5.8:1). El botón principal es .btn--oscuro (relleno
         --ink) y los otros dos, .btn--contorno-oscuro. Foco oscuro. */
.siguiente {
  --c-ink:   var(--ink);
  --c-focus: var(--ink);
  padding-block: 88px;
  background: var(--cream);
  border-block: 1px solid var(--line-light-2);
  color: var(--ink);
}
.siguiente__titulo em {
  font-style: italic;
  color: var(--gold-ink);
}
/* Píldora con contorno oscuro sobre fondo claro, misma altura que
   .btn--oscuro (48px). */
.btn--contorno-oscuro {
  min-height: 48px;
  padding: 12px 22px;
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--contorno-oscuro:hover,
.btn--contorno-oscuro:focus-visible {
  background: rgba(28, 26, 24, .08);
  border-color: var(--ink);
  color: var(--ink);
}
.siguiente__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.siguiente__titulo { font-size: clamp(36px, 4.4vw, 56px); }
.siguiente__botones,
.siguiente__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.siguiente__botones { gap: 12px; }
.siguiente__enlaces {
  gap: 8px 28px;
  font-size: 15px;
}
.siguiente__enlace,
.siguiente__enlace:hover {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-underline-offset: 3px;
}
.siguiente__enlace:hover { text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sintoma,
  .faq2__mas { transition: none; }
}

/* 26.12 Móvil y tableta. Por debajo de 1000px la foto va arriba, recortada
         en 4:3 (máximo 520px de alto) y anclada cerca del borde superior
         (5%): se ven la cara, las lupas y la lámpara, con un fundido hacia
         --bg desde el 65% del alto; el texto va debajo, sobre fondo
         oscuro. Hasta el 31/10/2026 entraba 40px en el fundido
         (margin-top: -40px); desde la «opción P2» empieza donde termina la
         foto, para dejar sitio a la frase. */
@media (max-width: 999px) {
  /* Alto explícito (4:3 del ancho, tope 520px) y no aspect-ratio: con
     max-height, aspect-ratio encoge el ancho del velo y no cubre la foto. */
  .pv2__foto {
    position: relative;
    inset: auto;
    width: 100%;
    height: min(75vw, 520px);
  }
  .pv2__img { object-position: 50% 5%; }
  .pv2__velo {
    inset: 0 0 auto 0;
    height: min(75vw, 520px);
    background:
      radial-gradient(60% 40% at 85% 88%, rgba(20, 18, 16, .75) 0%, rgba(20, 18, 16, 0) 100%),
      linear-gradient(180deg, rgba(20, 18, 16, 0) 65%, var(--bg) 100%);
  }
  .pv2__inner {
    margin-top: 0;
    padding-top: 0;
  }
  /* Frase («opción P2») sobre la esquina inferior derecha de la foto, a
     12px del borde: .pv2__pie deja de ser su referencia y la frase se mide
     desde .pv2__inner, que empieza donde termina la foto. Su altura sobre
     el texto y sus tamaños van en cada rango (tableta y ≤ 699px). */
  .pv2__pie { position: static; }
  .pv2__frase { right: 12px; }
  /* Datos en 2 columnas: línea vertical solo entre las dos de cada renglón
     y línea horizontal entre los renglones. */
  .pv2__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv2__dato:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .pv2__dato:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}
/* Tableta (700–999px): frase de 37 y 32px (primer renglón 52/62 de 44) y
   raya de 30px a 68px del borde derecho de la frase (96/62 de la fuente,
   como el mockup), 30px sobre el texto, y la foto
   anclada al 16% (no al 5%) para que la cara suba y deje libre esa esquina
   (la foto se escala al ancho: el valor horizontal no mueve nada). */
@media (min-width: 700px) and (max-width: 999px) {
  .pv2__img { object-position: 50% 16%; }
  .pv2__frase { bottom: calc(100% + 30px); }
  .pv2__frase-1 {
    margin-right: 48px;
    font-size: 37px;
  }
  .pv2__frase-2 { font-size: 32px; }
  .pv2__frase::after {
    width: 30px;
    margin-top: 10px;
    margin-right: 68px;
  }
}
@media (max-width: 799px) {
  .pv2__inner { gap: 48px; }
  .pv2 .h1-main { font-size: clamp(40px, 11vw, 48px); }
  .pv2__lead { font-size: 16px; }
  .pv2__dato { padding: 16px 12px 16px 16px; }
}
/* En ≤ 699px: la foto, con el mismo encuadre (5%), mide al menos 350px de
   alto (a 390px, 350 en lugar de 292): así queda libre la parte baja, bajo
   el cubrebocas, para la frase de 30 y 26px (primer renglón, 52/62 de 36,
   40px a la
   izquierda, raya de 25px a 56px del borde derecho de la frase, 96/62 de
   la fuente), 26px sobre el texto. Firma de 230px, sola debajo de los botones (el
   orden del HTML, sin order). Íconos de 24px. */
@media (max-width: 699px) {
  .pv2__foto,
  .pv2__velo { height: max(350px, min(75vw, 520px)); }
  .pv2__frase { bottom: calc(100% + 26px); }
  .pv2__frase-1 {
    margin-right: 40px;
    font-size: 30px;
  }
  .pv2__frase-2 { font-size: 26px; }
  .pv2__frase::after {
    width: 25px;
    margin-top: 8px;
    margin-right: 56px;
  }
  .pv2__firma { width: 230px; }
  .pv2__dato { gap: 10px; }
  .pv2__dato-icono {
    width: 24px;
    height: 24px;
  }
}
/* Por debajo de 480px: botones a todo el ancho (desde 480px, uno al lado del
   otro a su ancho natural), datos en 2 columnas (26.12) y antetítulo más apretado para
   que quepa en un renglón a 390px (≈ 325px de texto en 342 disponibles); si
   no cabe, solo se corta después de un «·» (los demás espacios son &nbsp;). */
@media (max-width: 479px) {
  .pv2__botones {
    flex-direction: column;
    align-self: stretch;
  }
  .pv2__botones .btn { width: 100%; }
  .pv2 .h1-hero .eyebrow { letter-spacing: 0.06em; }
}

@media (max-width: 900px) {
  .camino { padding-block: 72px; }
  .cx2__cuerpo,
  .au2__principal-cuerpo { padding: 24px; }
  .sintoma {
    min-height: 96px;
    padding: 22px;
  }
  .sintomas__pestana { padding-inline: 20px; }
  .texas__grupo { align-items: flex-start; }
  .texas__sello {
    width: 56px;
    height: 56px;
  }
  .consulta2 { padding-block: 56px; }
  .siguiente { padding-block: 72px; }
  .siguiente__botones { align-self: stretch; }
  .siguiente__botones .btn { width: 100%; }
}

/* 26.13 Pasos animados (Proceso y Adaptación del Inicio, [data-pasos-anim]).
         El estado por defecto es el final (todo encendido): así se ve sin JS,
         sin IntersectionObserver o con «reducir movimiento». Solo cuando
         main.js va a animar pone .pasos--inicio (estado inicial: tramos y
         segmentos en 0, puntos con el fondo, rótulos y números en
         --meta-on-dark); al entrar la lista en pantalla (35%) pone
         .pasos--activo, que vuelve al estado final con transiciones
         escalonadas por nth-child. Corre una sola vez.
         - Proceso: la línea dorada avanza 0.6s lineal por tramo (2.4s en
           total) y cada punto se rellena con un pulso (1.4 → 1) y su rótulo
           se vuelve dorado justo cuando la línea llega: 0, 0.6, 1.2, 1.8 y
           2.4s. En una columna, la línea crece hacia abajo.
         - Adaptación: cada segmento se llena en 0.5s, uno tras otro (0, 0.5,
           1, 1.5 y 2s), y su número se vuelve dorado al empezar. */
@media (prefers-reduced-motion: no-preference) {
  .pasos--inicio:not(.pasos--activo) .camino__paso::after { transform: scaleY(0); }
  .pasos--inicio:not(.pasos--activo) .camino__punto { background: var(--surface); }
  .pasos--inicio:not(.pasos--activo) .camino__nombre,
  .pasos--inicio:not(.pasos--activo) .ad2__num { color: var(--meta-on-dark); }
  .pasos--inicio:not(.pasos--activo) .ad2__paso::before { transform: scaleX(0); }

  .pasos--activo .camino__paso::after { transition: transform .6s linear; }
  .pasos--activo .camino__punto {
    transition: background-color .15s ease;
    animation: paso-pulso .4s ease-out;
  }
  .pasos--activo .camino__nombre { transition: color .15s ease; }
  .pasos--activo .camino__paso:nth-child(2)::after,
  .pasos--activo .camino__paso:nth-child(2) .camino__punto,
  .pasos--activo .camino__paso:nth-child(2) .camino__nombre { transition-delay: .6s; animation-delay: .6s; }
  .pasos--activo .camino__paso:nth-child(3)::after,
  .pasos--activo .camino__paso:nth-child(3) .camino__punto,
  .pasos--activo .camino__paso:nth-child(3) .camino__nombre { transition-delay: 1.2s; animation-delay: 1.2s; }
  .pasos--activo .camino__paso:nth-child(4)::after,
  .pasos--activo .camino__paso:nth-child(4) .camino__punto,
  .pasos--activo .camino__paso:nth-child(4) .camino__nombre { transition-delay: 1.8s; animation-delay: 1.8s; }
  .pasos--activo .camino__paso:nth-child(5) .camino__punto,
  .pasos--activo .camino__paso:nth-child(5) .camino__nombre { transition-delay: 2.4s; animation-delay: 2.4s; }

  .pasos--activo .ad2__paso::before { transition: transform .5s linear; }
  .pasos--activo .ad2__num { transition: color .15s ease; }
  .pasos--activo .ad2__paso:nth-child(2)::before,
  .pasos--activo .ad2__paso:nth-child(2) .ad2__num { transition-delay: .5s; }
  .pasos--activo .ad2__paso:nth-child(3)::before,
  .pasos--activo .ad2__paso:nth-child(3) .ad2__num { transition-delay: 1s; }
  .pasos--activo .ad2__paso:nth-child(4)::before,
  .pasos--activo .ad2__paso:nth-child(4) .ad2__num { transition-delay: 1.5s; }
  .pasos--activo .ad2__paso:nth-child(5)::before,
  .pasos--activo .ad2__paso:nth-child(5) .ad2__num { transition-delay: 2s; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .pasos--inicio:not(.pasos--activo) .camino__paso::after { transform: scaleX(0); }
}
@keyframes paso-pulso {
  from { transform: scale(1.4); }
  to   { transform: scale(1); }
}

/* Adaptaciones móviles (docs/01) ========================================== */

/* El botón flotante de WhatsApp es fijo y se sale del contenedor de 1200 px
   solo a partir de 1368 px de ancho (1200 + 2 × (24 de margen + 60 del botón)).
   Por debajo de eso se monta sobre el final del pie, así que el pie reserva
   el alto del botón más su margen. */
@media (max-width: 1367px) {
  .site-footer__inner { padding-bottom: 96px; }
}

/* 1 · Menú hamburguesa. El menú por prioridades (seis enlaces) no cabe en un
      renglón por debajo de 1000px, así que el botón ☰ aparece ahí y no solo
      en ≤ 900px (main.js usa el mismo punto de quiebre). */
@media (max-width: 999px) {
  .header__toggle { display: inline-flex; }

  /* El panel cabe en pantalla aunque la barra superior todavía se vea;
     si no cabe, tiene su propio scroll. Va dentro del header (z-index 100),
     así que queda por encima de todo el contenido y del botón de WhatsApp. */
  .nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--header-h) - var(--topbar-h));
    max-height: calc(100dvh - var(--header-h) - var(--topbar-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px var(--gutter) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-dark);
    box-shadow: 0 24px 40px rgba(0, 0, 0, .45);
  }
  .nav[data-abierto="true"] { display: flex; }

  .nav__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-dark);
    font-size: 17px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav__cta {
    margin-top: 20px;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .solo-movil { display: inline; }
  .solo-escritorio { display: none; }

  /* 2 · En la barra superior solo quedan el horario y el selector de idioma:
        la dirección ya aparece más abajo en la página. Todo en un renglón:
        horario corto a la izquierda y selector a la derecha. */
  .topbar__item--direccion { display: none; }

  .topbar__inner {
    flex-wrap: nowrap;
    gap: 12px;
  }
  .topbar__datos {
    flex-wrap: nowrap;
    min-width: 0;
  }
  .topbar__item { white-space: nowrap; }
  /* Zona táctil de 44px (32 + 6 + 6) sin cambiar el texto ni el alto de la
     barra: el ::after cabe en los 10px de padding de .topbar__inner. */
  .langsel__off { position: relative; }
  .langsel__off::after {
    content: "";
    position: absolute;
    inset: -6px -8px;
  }
  .langsel {
    flex: none;
    gap: 10px;
  }

  /* 1 · Menú hamburguesa. En el mockup el menú se parte en varias líneas,
        que no sirve en celular. Header compacto: 10 + 44 del logo + 10,
        más 1 de borde = 65px. */
  :root { --header-h: 65px; }

  .header__inner { padding-block: 10px; }
  .header__logo img { height: 44px; }
  .header__marca { gap: 12px; }

  /* 3 · Portadas: H1 más chico (el Inicio v2 lo ajusta en 26.12) y marca de
        agua de las portadas internas. */
  .h1-main { font-size: clamp(36px, 11vw, 44px); }
  .hero-trat__watermark { height: 336px; }

  /* 5 · Agenda: la ventana del chat tiene su propio corte en 640px
        (sección 24); la orientación por síntomas, el suyo en 900px
        (sección 25). */

  /* 6 · Espaciado vertical de las secciones más corto, en todo el sitio. */
  :root { --section-y: 64px; }

  /* 16 · Pie: las columnas de enlaces son desplegables, cerradas al cargar,
         con línea --line-dark-2 arriba y abajo. Cédulas y Consultorio no
         cambian. */
  .site-footer__det { border-block: 1px solid var(--line-dark-2); }
  .site-footer__resumen {
    min-height: 48px;
    padding-block: 8px;
    cursor: pointer;
  }
  .site-footer__enlaces { padding: 2px 0 16px; }

  /* 9 · Inicio, El doctor (#doctor): firma más chica y credenciales
        compactas (las 2 columnas las pone 26.7; la foto, también 26.7). */
  #doctor .doctor__firma { max-width: 240px; }
  #doctor .credenciales__item { padding: 12px 12px 12px 0; }
  #doctor .credenciales dd { font-size: 14px; }
  /* En columnas de ~160px «Certificación MOR-2230/11» no cabe en un renglón:
     se parte en el espacio; el número no se corta (guion y barra entre
     dígitos no son puntos de corte). */
  #doctor .credenciales .nowrap { white-space: normal; }
  /* «OTORRINOLARINGOLOGÍA» / «OTORHINOLARYNGOLOGY» es una sola palabra: con
     0.14em mide ~186px. Con 0.04em baja a ~161px y cabe en 2 columnas desde
     401px; si aun así no cabe, se parte. Vale también para la página El
     doctor (ES y EN). */
  .credenciales dt {
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
  }

  /* 13 · Inicio, Consultorio: todo apilado. Encabezado, botón de agenda a
         todo el ancho, mapa de 220px, dirección y horario, formulario,
         teléfonos en lista. /consultorio/ va en una columna: dirección
         y horario, agenda, lista de contacto (número a 16px) y, al
         final, el mapa de 260px. */
  .consultorio { grid-template-columns: minmax(0, 1fr); }
  .consultorio__datos { grid-template-columns: minmax(0, 1fr); }
  .contacto-lista__numero { font-size: 16px; }
  .cons-a__encabezado {
    flex-direction: column;
    align-items: stretch;
  }
  .cons-a__agenda { width: 100%; }
  .cons-a__cuerpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .mapa {
    flex-grow: 0;
    height: 220px;
    min-height: 220px;
    border-radius: 12px;
  }
  .consultorio .mapa { height: 260px; }
  .cons-a__datos { grid-template-columns: minmax(0, 1fr); }
  .cons-a__telefonos {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .form-contacto { padding: 22px; }
  .form-contacto__titulo { font-size: 26px; }
  .form-contacto__fila { grid-template-columns: minmax(0, 1fr); }
  .form-contacto__enviar {
    align-self: stretch;
    width: 100%;
  }

  /* 14 · Páginas de tratamiento (selector): las pestañas son una fila
         de 3 botones con el nombre corto (≥ 48px de alto; los nombres
         largos llevan &shy; para partirse sin desbordar a 320px). El panel
         va en una columna con los 2 datos lado a lado y la recuperación en
         un <details>. El proceso pasa a lista vertical; señales y
         preguntas se apilan y las señales van en un <details> cerrado. */
  .selector-cx--tabs .selector-cx__pestanas { gap: 6px; }
  .selector-cx__pestana {
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 6px;
    text-align: center;
  }
  .selector-cx__etiqueta,
  .selector-cx__frase { display: none; }
  .selector-cx__nombre {
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .selector-cx__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
  }
  .selector-cx__h3 { font-size: 26px; }
  .selector-cx__datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .dato-cx { padding: 12px 14px; }
  .dato-cx__etiqueta {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .dato-cx__valor { font-size: 15px; }
  .selector-cx__agendar { grid-column: 1 / -1; }

  .pasos-cx {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .pasos-cx__item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 2px;
  }
  .pasos-cx__num { grid-row: 1 / span 2; }
  .pasos-cx__item:not(:last-child)::after { display: none; }

  .dos-col-trat {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

/* Móvil angosto (≤ 699px; desde 700px, tablet incluida, no cambia nada).
   Tablero «Móvil · También realizamos y pestañas», 29/10/2026.
   T1 · «También realizamos» del Inicio: las píldoras pasan a una lista a
   todo el ancho, con una línea fina arriba y entre renglones (48px como
   mínimo por renglón). Los cuatro son iguales: sin enlace, sin flecha y
   con el mismo color de texto.
   P2 · pestañas del selector (cirugías, senos y audiometría): 2 columnas
   y, si son impares, la última a todo el ancho. Los nombres no se parten
   (sin guion ni segundo renglón: hyphens: none también anula los &shy;
   del HTML). */
@media (max-width: 699px) {
  .cx2__tambien .pildoras {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    border-top: 1px solid var(--line-dark-3);
  }
  .cx2__tambien .pildoras > li { border-bottom: 1px solid var(--line-dark-3); }
  /* El último renglón no lleva línea: la de arriba de «Hospitales»
     (.cx2__pie) ya cierra la sección. */
  .cx2__tambien .pildoras > li:last-child { border-bottom: 0; }
  .cx2__tambien .pildora {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
  }

  .selector-cx--tabs .selector-cx__pestanas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .selector-cx--tabs .selector-cx__pestana:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .selector-cx--tabs .selector-cx__pestana { min-height: 48px; }
  .selector-cx--tabs .selector-cx__nombre {
    overflow-wrap: normal;
    hyphens: none;
    white-space: nowrap;
  }
  /* Fichas de las cirugías en una columna a todo el ancho: en 2 columnas,
     a 360 «Aproximadamente» se salía de su recuadro. Audiometría
     (.selector-cx--estudios) ya va apilada desde 900px. */
  .selector-cx:not(.selector-cx--estudios) .selector-cx__datos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .fab-wa {
    right: 16px;
    bottom: 16px;
  }
}

/* Hasta 400px la palabra más larga de las credenciales no cabe en media
   fila: el Inicio las pasa a una sola columna. */