/* ══════════════════════════════════════════════════════════════
   CODENTMED IPS — Hoja de estilos única
   ══════════════════════════════════════════════════════════════

   Todo el CSS del sitio vive acá. Antes estaba repartido entre
   styles/globals.css y un bloque <style jsx> dentro de cada
   componente de React; al quitar Next.js esos bloques se
   consolidaron en este archivo, conservando los mismos nombres
   de clase y los mismos valores.

   Orden del archivo:
      1. Tokens
      2. Reset
      3. Tipografía
      4. Layout
      5. Botones
      6. Tarjetas y píldoras
      7. Animaciones de entrada
      8. Utilidades
      9. Cabecera (franja + nav + menú móvil)
     10. Pie de página
     11. Botón flotante de WhatsApp
     12. Piezas reutilizables (título de sección, acordeón, CTA…)
     13. Inicio
     14. Reseñas
     15. Mapa / ubicación
     16. Páginas de especialidad
     17. Quiénes somos
     18. Equipo
     19. Especialidades (índice)
     20. Pacientes
     21. Contacto
     22. Blog
     23. Artículo
     24. Páginas legales
     25. Página 404

   Los estilos del editor de contenido NO están acá: viven en
   assets/css/editor.css y solo se cargan cuando alguien entra a
   editar. Así el visitante normal no descarga nada de eso.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   1. TOKENS
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Verdes ── */
  --forest: #1a6b3a;
  --forest-2: #104224;
  --forest-3: #2e9e57;
  --forest-deep: #0a2d18;

  /* ── Neutros cálidos ── */
  --sage: #d3dfd5;
  --cream: #f6f2e8;
  --cream-2: #efe9d7;
  --ivory: #fbf8ef;

  /* ── Tinta ── */
  --ink: #0f1a13;
  --ink-2: #2a3630;
  --muted-c: #747872;
  --muted-2: #9fa39e;

  /* ── Líneas ── */
  --line: #cbd2ce;
  --line-2: #e2e5e3;

  /* ── Acentos ── */
  --gold: #c79a3a;
  --gold-2: #a67b22;
  --wa: #25d366;
  --ok: #2e7d4f;
  --danger: #b44a3d;

  /* ── Forma ── */
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-pill: 999px;

  /* ── Superficies ── */
  --surface-card: var(--ivory);
  --surface-border: 1px solid var(--line-2);
  --surface-elev: 0 20px 50px -25px rgba(15, 26, 19, .3);
  --surface-elev-sm: 0 8px 24px -14px rgba(15, 26, 19, .25);

  /* ── Ritmo vertical ── */
  --section-pad: 48px;
  --section-pad-lg: 120px;
  --maxw: 1280px;
  /* Ancho de lectura para grillas de tarjetas y bloques de texto.
     El sitio original limita sus grillas a 896px CENTRADOS dentro
     del contenedor ancho, y eso es justo lo que le da densidad.
     Estirarlas a los 1280px completos deja tarjetas enormes con
     mucho aire adentro y la página se siente vacía. */
  --maxw-contenido: 940px;
  --gutter: 24px;

  /* ── Tipografía ── */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Curvas de animación ── */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* ── Alto de la cabecera fija ──
     Dos medidas, porque la cabecera tiene dos tamaños:

     --header-h          arriba del todo: franja (38) + barra (74).
                         Lo consume el padding-top del <main>, que
                         solo importa en esa posición.
     --header-compacta   una vez que se hace scroll: la franja se
                         retira y la barra adelgaza. Es la que usan
                         los elementos pegajosos, porque ellos se
                         pegan justo cuando ya estamos scrolleando. */
  --header-h: 112px;
  --header-compacta: 60px;

  --background: var(--ivory);
  --foreground: var(--ink);
  --border: var(--line-2);
}

@media (max-width: 860px) {
  :root { --header-h: 98px; --header-compacta: 56px; }
}


/* ══════════════════════════════════════════════════════════════
   2. RESET
   ══════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Lenis maneja el scroll — desactivamos el nativo para que no peleen */
  scroll-behavior: auto;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

/* Respeta a quien pidió menos movimiento — accesibilidad, no opcional */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   3. TIPOGRAFÍA — escala editorial

   El salto de tamaño entre titular y cuerpo es lo que da la
   sensación "de alto perfil". Los tamaños siguen la escala del
   sitio original (títulos de sección hasta ~46px), pero
   conservando la serif.
   ══════════════════════════════════════════════════════════════ */

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 4.1rem);
  line-height: 1.05;
  letter-spacing: -.026em;
  text-wrap: balance;
}

.h-xl {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.5vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.h-lg {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -.018em;
}

.h-md {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.h-sm {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
}

/* Kicker: la etiqueta chiquita en mayúsculas sobre cada título */
.kicker {
  font-family: var(--font-ui);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-2);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.kicker--center::before { display: none; }
.kicker--light { color: var(--gold); }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.68;
  color: var(--muted-c);
}

.body-muted { color: var(--muted-c); }

/* Palabra en cursiva serif dentro de un titular — el detalle
   que le da carácter sin cambiar la paleta */
.accent-italic {
  font-style: italic;
  color: var(--forest);
}


/* ══════════════════════════════════════════════════════════════
   4. LAYOUT
   ══════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: 860px; }

/* Bloque centrado al ancho de lectura. Se usa para las grillas de
   tarjetas y los encabezados de sección: mantiene la página densa
   en vez de estirar dos tarjetas a lo ancho de toda la pantalla. */
.medio { max-width: var(--maxw-contenido); margin-left: auto; margin-right: auto; }

/* Ritmo vertical.
   El sitio original respira 40–96px según la sección, y por eso
   se ve armado en vez de disperso. */
.section { padding: clamp(40px, 5vw, 68px) 0; }
.section--tight { padding: clamp(32px, 3.5vw, 48px) 0; }
.section--amplia { padding: clamp(56px, 6.5vw, 88px) 0; }
.section--cream { background: var(--cream); }
.section--ivory { background: var(--ivory); }
.section--sage { background: var(--sage); }
.section--forest { background: var(--forest-2); color: #fff; }
.section--forest .lead,
.section--forest .body-muted { color: rgba(255, 255, 255, .72); }

.stack-sm > * + * { margin-top: 12px; }
.stack > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 34px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.center { text-align: center; }
.center .kicker::before { display: none; }

/* Contenido principal: deja lugar a la cabecera fija.
   El inicio es la excepción (el hero pasa por debajo). */
.main { padding-top: var(--header-h); }
.main--sin-padding { padding-top: 0; }


/* ══════════════════════════════════════════════════════════════
   5. BOTONES
   ══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: transform .35s var(--ease-out), background .25s ease,
              color .25s ease, border-color .25s ease, box-shadow .35s var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--forest);
  color: #fff;
  box-shadow: 0 10px 26px -14px rgba(26, 107, 58, .85);
}
.btn--primary:hover { background: var(--forest-2); box-shadow: 0 16px 34px -14px rgba(26, 107, 58, .9); }

.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-2); }

.btn--ghost {
  background: transparent;
  color: var(--forest-2);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--forest); background: rgba(26, 107, 58, .05); }

.btn--light {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--light:hover { background: rgba(255, 255, 255, .18); }

.btn--solid-light { background: #fff; color: var(--forest-2); }
.btn--solid-light:hover { background: var(--cream); }

.btn--sm { padding: 10px 18px; font-size: .85rem; }
.btn--block { width: 100%; }

/* Enlace con flecha que se desplaza al pasar el mouse */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--forest);
  transition: gap .3s var(--ease-out), color .25s ease;
}
.link-arrow { cursor: pointer; }
.link-arrow:hover { gap: 14px; color: var(--forest-2); }
.link-arrow--gold { color: var(--gold-2); }
.link-arrow--light { color: var(--gold); }

/* ⚠ EL HOVER GENÉRICO NO SIRVE SOBRE VERDE.
   `.link-arrow:hover` pinta el texto de `--forest-2` (#104224) y las
   variantes claras viven sobre fondos verde oscuro — la tarjeta de
   título del pentágono es #103d22, o sea PRÁCTICAMENTE EL MISMO
   COLOR. El hover existía y funcionaba; simplemente no se veía, y de
   ahí venía el reporte de "estos enlaces no tienen estado hover".

   Van después de las dos declaraciones de arriba a propósito: tienen
   la misma especificidad (0,2,0) que `.link-arrow:hover`, así que lo
   que decide es el orden. */
.link-arrow--light:hover { color: #fff; }
.link-arrow--gold:hover { color: var(--gold); }


/* ══════════════════════════════════════════════════════════════
   6. TARJETAS Y PÍLDORAS
   ══════════════════════════════════════════════════════════════ */

.card {
  background: var(--surface-card);
  border: var(--surface-border);
  border-radius: var(--radius-card);
  padding: 26px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
              border-color .35s ease;
}
.card--hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--surface-elev);
  border-color: var(--line);
}
.card--flat { background: transparent; box-shadow: none; }
.card--pad-lg { padding: 40px; }

/* Tarjeta con un filo dorado que crece al hacer hover.
   Reemplaza al glassmorphism como recurso de énfasis. */
.card--edge { position: relative; overflow: hidden; }
.card--edge::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s var(--ease-out);
}
.card--edge:hover::before { transform: scaleY(1); }

.icon-box {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(26, 107, 58, .09);
  color: var(--forest);
  flex-shrink: 0;
}
.icon-box--gold { background: rgba(199, 154, 58, .13); color: var(--gold-2); }
.icon-box--light { background: rgba(255, 255, 255, .12); color: #fff; }

/* Píldora / chip */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--ivory);
}
.pill--gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.pill--forest { background: rgba(26, 107, 58, .08); border-color: rgba(26, 107, 58, .2); color: var(--forest); }
.pill--light {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.divider { height: 1px; background: var(--line-2); border: 0; margin: 0; }


/* ══════════════════════════════════════════════════════════════
   7. ANIMACIONES DE ENTRADA

   REGLA DE ORO: el contenido es visible por defecto. Solo se
   esconde cuando el JS confirma que puede animarlo.

   Antes era al revés — `[data-reveal] { opacity: 0 }` sin
   condición — y bastaba con que la animación fallara por
   cualquier motivo para que secciones enteras quedaran
   invisibles para siempre. Eso pasó en producción (2026-08-06).

   La clase `js-anim` la pone un script inline en <head>, antes
   del primer pintado, así que no hay destello. Si el JS no
   corre, no hay clase, y todo se ve.
   ══════════════════════════════════════════════════════════════ */

html.js-anim [data-reveal] { opacity: 0; will-change: transform, opacity; }

/* Una vez que el revelado terminó (animando o por la red de
   seguridad), se marca el elemento y deja de esconderse. */
html.js-anim [data-reveal][data-reveal-listo] {
  opacity: 1;
  will-change: auto;
}

/* Si el usuario pidió menos movimiento, nunca escondemos nada */
@media (prefers-reduced-motion: reduce) {
  html.js-anim [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   8. UTILIDADES
   ══════════════════════════════════════════════════════════════ */

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 999;
  background: var(--forest);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.only-mobile { display: none; }
@media (max-width: 860px) {
  .hide-mobile { display: none !important; }
  .only-mobile { display: block; }
}


/* ══════════════════════════════════════════════════════════════
   8b. PANTALLA DE CARGA

   Tapa la página hasta que estén las piezas pesadas —las fotos y
   las tipografías—, para que nadie vea el sitio armándose a
   pedazos.

   REGLA DE ORO, igual que con las animaciones: si el JS no corre,
   esto NO PUEDE dejar la página tapada para siempre. Por eso la
   pantalla solo se muestra cuando la clase `js-carga` está puesta,
   y esa clase la pone un script en el <head>. Sin JS no hay clase,
   no hay pantalla, y el sitio se ve de una.
   ══════════════════════════════════════════════════════════════ */

.cargador { display: none; }

html.js-carga .cargador {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--forest-deep);
  transition: opacity .6s var(--ease-out), visibility .6s;
}
/* Mientras carga no se puede scrollear: si no, se llega al medio
   de la página sin haber visto nunca el arranque. */
html.js-carga.esta-cargando body { overflow: hidden; }

html.js-carga .cargador.is-listo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cargador__logo {
  width: clamp(48px, 8vw, 64px);
  height: clamp(48px, 8vw, 64px);
  object-fit: contain;
  margin-bottom: -6px;
}
.cargador__marca {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--cream);
}
.cargador__tag {
  margin-top: -14px;
  font-family: var(--font-ui);
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

.cargador__barra {
  position: relative;
  width: min(62vw, 300px);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.cargador__barra span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--gold);
  border-radius: 2px;
  /* Sin transición: el avance lo suaviza el JS cuadro a cuadro.
     Una transición CSS acá se pelearía con él y daría tirones. */
}

.cargador__pct {
  font-family: var(--font-ui);
  font-size: .68rem;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .45);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html.js-carga .cargador { transition: none; }
}


/* ══════════════════════════════════════════════════════════════
   9. CABECERA
   ══════════════════════════════════════════════════════════════ */

/* ── Franja superior ──
   Es información de contexto para el primer vistazo (horario,
   sede, idioma), no navegación. Por eso al bajar se retira del
   todo y no vuelve: lo que hace falta mientras se recorre la
   página es la barra de navegación, sola y delgada. Entre las dos
   ocupaban 112px fijos encima del diseño; después del primer
   scroll quedan 60px. */
/* Antes era transparente y dependía de que hubiera un fondo oscuro
   justo debajo (el hero) para poder leerse — se veía perfecto en
   home, pero en las páginas sin hero oscuro arriba (blog, contacto)
   quedaba blanco sobre claro, casi invisible. Ahora lleva el mismo
   cristal líquido verde que la barra de navegación, siempre, sin
   depender de qué haya detrás. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  height: 38px;
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: .78rem;
  color: rgba(255, 255, 255, .78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(165deg, rgba(46, 158, 87, .5) 0%, rgba(16, 66, 36, .64) 55%, rgba(10, 45, 24, .72) 100%);
  backdrop-filter: saturate(200%) blur(18px);
  -webkit-backdrop-filter: saturate(200%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transform: translateY(0);
  transition: transform .42s var(--ease-out), background .45s var(--ease-out),
              color .45s ease, opacity .3s ease;
}
.topbar--solid { background: var(--forest-deep); color: rgba(255, 255, 255, .72); }
.topbar.is-oculta {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar__left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.topbar__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.topbar__estado { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar__estado .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--forest-3);
  box-shadow: 0 0 0 3px rgba(46, 158, 87, .22);
  flex-shrink: 0;
}
/* El teléfono ya está como botón en la barra de navegación, justo
   debajo. Tenerlo también acá lo mostraba dos veces, casi uno
   encima del otro. En móvil sí se queda, porque ahí la
   navegación se colapsa. */
.topbar__tel { display: none; font-weight: 600; color: #fff; white-space: nowrap; }
.topbar__tel:hover { color: var(--gold); }
@media (max-width: 860px) {
  .topbar__tel { display: inline; }
}
.topbar__loc { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__loc:hover { opacity: 1; color: var(--gold); }
.lang { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .04em; }
.lang strong { color: #fff; font-weight: 600; }
.lang__sep { opacity: .45; }
.lang__off { opacity: .5; cursor: not-allowed; }

/* ── Barra principal ──
   Va anclada en top:0 y se coloca con `transform`, no con `top`:
   así el bajar-para-esconderse, el subir-para-volver y el
   correrse-bajo-la-franja son todos el mismo movimiento y nunca
   pelean entre sí.

   Tres estados, en este orden de prioridad:
     (por defecto)  corrida 38px hacia abajo, debajo de la franja
     .is-compacta   pegada arriba, más delgada y sólida
     .is-oculta     fuera de la vista

   `is-oculta` gana porque viene después en el archivo. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 89;
  transform: translateY(38px);
  transition: transform .42s var(--ease-out), background .45s var(--ease-out),
              box-shadow .45s var(--ease-out), border-color .45s ease;
  border-bottom: 1px solid transparent;
}
/* Liquid glass verde: dos capas de degradado (una sutil de luz
   arriba, para el brillo "de vidrio"; otra de marca en verde) más
   blur+saturate fuerte, y un filo claro de 1px que simula el borde
   pulido del cristal. */
.nav--solid {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(165deg, rgba(46, 158, 87, .52) 0%, rgba(16, 66, 36, .66) 55%, rgba(10, 45, 24, .74) 100%);
  backdrop-filter: saturate(200%) blur(22px);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  border-bottom-color: rgba(255, 255, 255, .16);
  box-shadow: 0 1px 28px -12px rgba(6, 26, 14, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.nav.is-compacta { transform: translateY(0); }
.nav.is-oculta   { transform: translateY(-101%); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: 74px;
  transition: height .42s var(--ease-out);
}
/* Al compactarse baja de 74 a 60 y el logotipo se ajusta con ella */
.nav.is-compacta .nav__inner { height: 60px; }
.nav.is-compacta .brand__mark svg { width: 30px; height: 30px; }
.nav.is-compacta .brand__name { font-size: 1.18rem; }
.nav.is-compacta .brand__tag { font-size: .54rem; margin-top: 3px; }
.brand__mark svg { transition: width .42s var(--ease-out), height .42s var(--ease-out); }
.brand__name, .brand__tag { transition: font-size .42s var(--ease-out); }

.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; transition: color .45s ease; }
.nav--solid .brand { color: #fff; }
.brand__mark { display: grid; place-items: center; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-serif);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: .07em;
}
.brand__tag {
  font-family: var(--font-ui);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .68;
  margin-top: 4px;
}
.nav--solid .brand__tag { color: var(--gold); opacity: 1; }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__link {
  position: relative;
  font-size: .93rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
  padding: 6px 0;
  transition: color .3s ease;
}
.nav--solid .nav__link { color: rgba(255, 255, 255, .92); }
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav--solid .nav__link.is-active { color: var(--gold); }

.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  transition: all .3s ease;
}
.nav--solid .nav__phone { border-color: rgba(255, 255, 255, .32); color: #fff; }
.nav__phone:hover { border-color: var(--gold); color: var(--gold); }

.nav__burger {
  display: none;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
}
@media (max-width: 860px) {
  .nav__burger { display: grid; }
}
.nav--solid .nav__burger { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* ── Menú móvil ── */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  z-index: 120;
  background: var(--forest-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .55s var(--ease-out);
  overflow-y: auto;
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.drawer__brand {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: .07em;
}
.drawer__head button { color: #fff; display: grid; place-items: center; }
.drawer__nav { padding: 18px 12px; flex: 1; }
.drawer__link {
  display: block;
  padding: 13px 14px;
  border-radius: 8px;
  font-size: 1.02rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
  transition: background .25s ease, color .25s ease;
}
.drawer__link:hover { background: rgba(255, 255, 255, .07); }
.drawer__link.is-active { color: var(--gold); }
.drawer__link--sub {
  padding-left: 30px;
  font-size: .92rem;
  color: rgba(255, 255, 255, .62);
  position: relative;
}
.drawer__link--sub::before {
  content: '';
  position: absolute;
  left: 15px; top: 50%;
  width: 7px; height: 1px;
  background: rgba(255, 255, 255, .35);
}
.drawer__foot {
  padding: 20px 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.drawer__tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .9rem;
  color: rgba(255, 255, 255, .85);
  margin-top: 6px;
}
.drawer__mail { font-size: .82rem; color: rgba(255, 255, 255, .5); }
.drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(10, 45, 24, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.drawer__scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 860px) {
  .topbar { font-size: .72rem; height: 34px; }
  .topbar__left { gap: 14px; }
  .nav { transform: translateY(34px); }
  .nav__inner { height: 64px; }
  .nav.is-compacta .nav__inner { height: 56px; }
  .brand__name { font-size: 1.14rem; }
}

/* Quien pidió menos movimiento no quiere una barra que aparezca y
   desaparezca: se queda quieta y sólida desde el principio. */
@media (prefers-reduced-motion: reduce) {
  .topbar, .nav, .nav__inner { transition: none; }
  .nav.is-oculta { transform: translateY(0); }
  .topbar.is-oculta { transform: translateY(-100%); }
}
@media (max-width: 420px) {
  .topbar__estado { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   10. PIE DE PÁGINA
   ══════════════════════════════════════════════════════════════ */

.foot {
  background: var(--forest-deep);
  color: rgba(255, 255, 255, .72);
  padding: clamp(56px, 7vw, 88px) 0 34px;
  font-size: .89rem;
}
.foot__top {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr) 1.3fr;
  gap: 42px;
  padding-bottom: 48px;
}
.foot__logo { display: flex; align-items: center; gap: 13px; color: #fff; margin-bottom: 18px; }
.foot__logo > div { display: flex; flex-direction: column; line-height: 1; }
.foot__name {
  font-family: var(--font-serif);
  font-size: 1.42rem;
  letter-spacing: .07em;
}
.foot__tag {
  font-family: var(--font-ui);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 5px;
}
.foot__desc { max-width: 300px; line-height: 1.65; margin-bottom: 22px; }
.foot__social { display: flex; gap: 10px; }
.foot__social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .75);
  transition: all .3s var(--ease-out);
}
.foot__social a:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.foot__coltitle {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.foot__col ul { display: flex; flex-direction: column; gap: 11px; }
.foot__col a { transition: color .25s ease; }
.foot__col a:hover { color: var(--gold); }

.foot__contact li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.foot__contact svg { color: var(--gold); flex-shrink: 0; margin-top: 3px; }

.foot__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: rgba(255, 255, 255, .5);
}
.foot__legal { display: flex; gap: 12px; align-items: center; }
.foot__legal a:hover { color: var(--gold); }

@media (max-width: 1080px) {
  .foot__top { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .foot__top { grid-template-columns: 1fr; gap: 34px; }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
}


/* ══════════════════════════════════════════════════════════════
   11. BOTÓN FLOTANTE DE WHATSAPP
   ══════════════════════════════════════════════════════════════ */

.fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 58px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 14px 34px -12px rgba(37, 211, 102, .65);
  opacity: 0;
  transform: translateY(20px) scale(.9);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out),
              gap .45s var(--ease-out), padding .45s var(--ease-out);
  overflow: hidden;
}
.fab.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.fab.is-visible:hover { transform: translateY(-3px) scale(1.02); }
.fab__icon { display: grid; place-items: center; flex-shrink: 0; }
.fab__label {
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  transition: max-width .5s var(--ease-out), opacity .35s ease;
}
.fab.is-wide { gap: 10px; padding: 0 22px 0 18px; }
.fab.is-wide .fab__label { max-width: 140px; opacity: 1; }

@media (max-width: 640px) {
  .fab { right: 16px; bottom: 16px; height: 54px; padding: 0 14px; }
  .fab.is-wide { padding: 0 18px 0 15px; }
}


/* ══════════════════════════════════════════════════════════════
   12. PIEZAS REUTILIZABLES
   ══════════════════════════════════════════════════════════════ */

/* ── Encabezado de sección ── */
.ts { max-width: 720px; }
.ts.center { margin-left: auto; margin-right: auto; }
.ts__titulo { margin: 16px 0 0; color: var(--forest-2); }
.ts--claro .ts__titulo { color: #fff; }
.ts__sub { margin-top: 16px; }

/* ── Acordeón de preguntas frecuentes ── */
.acc { border-top: 1px solid var(--line-2); }
.acc__item { border-bottom: 1px solid var(--line-2); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  text-align: left;
  transition: color .25s ease;
}
.acc__btn:hover { color: var(--forest); }
.acc__q {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
}
.acc__ico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--forest);
  flex-shrink: 0;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.acc__item.is-open .acc__ico { background: var(--forest); border-color: var(--forest); color: #fff; }
/* El icono cambia de + a − sin recrear el SVG: la barra vertical
   se esconde cuando el panel está abierto. */
.acc__ico .acc__ico-v { transition: opacity .25s ease; }
.acc__item.is-open .acc__ico .acc__ico-v { opacity: 0; }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner p {
  padding: 0 4px 24px;
  color: var(--muted-c);
  line-height: 1.72;
  max-width: 68ch;
}

/* ── Tarjeta de condición / patología ── */
.cond__etq {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-2);
  display: inline-block;
  transition: transform .4s var(--ease-out);
}
.card--edge:hover .cond__etq { transform: translateX(3px); }
.cond__nombre { margin: 12px 0 10px; color: var(--forest-2); }
.cond__desc { color: var(--muted-c); font-size: .93rem; line-height: 1.66; }
.cond__link { margin-top: 16px; }

/* ── Bloque CTA de cierre ── */
.cta {
  background: linear-gradient(140deg, var(--forest-2) 0%, var(--forest-deep) 100%);
  position: relative;
  overflow: hidden;
}
/* Textura sutil: un círculo enorme apenas visible.
   Reemplaza a las partículas flotantes, que distraían. */
.cta::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -12%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .06);
}
.cta::after {
  content: '';
  position: absolute;
  bottom: -55%;
  left: -8%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .05);
}
.cta .container { position: relative; z-index: 1; }
.cta__titulo { color: #fff; margin: 18px auto 16px; max-width: 18ch; }
.cta__sub { color: rgba(255, 255, 255, .7); max-width: 54ch; margin: 0 auto; }
.cta__botones {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* ── Hero de páginas internas ── */
.hi {
  background: linear-gradient(150deg, var(--forest) 0%, var(--forest-2) 55%, var(--forest-deep) 100%);
  color: #fff;
  padding: clamp(60px, 8vw, 100px) 0 clamp(64px, 8vw, 108px);
  position: relative;
  overflow: hidden;
}
.hi--compacto { padding: clamp(48px, 6vw, 72px) 0 clamp(52px, 6vw, 80px); }
.hi::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -6%;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .07);
  pointer-events: none;
}
.hi .container { position: relative; z-index: 1; }
.hi__chip { margin-bottom: 26px; }
.hi__titulo { max-width: 16ch; }
.hi__parrafo {
  margin-top: 24px;
  max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.72;
  color: rgba(255, 255, 255, .82);
}

/* ── Bloque "próximamente" con borde punteado ──
   Aparece en Especialidades, Equipo y Blog. Comunica que algo
   está creciendo en vez de esconderlo. */
.proximo {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 30px 40px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  background: transparent;
}
.proximo > div { flex: 1; }
.proximo__titulo { color: var(--forest-2); }
.proximo__desc { margin-top: 7px; color: var(--muted-c); font-size: .92rem; line-height: 1.6; }
@media (max-width: 960px) {
  .proximo { flex-direction: column; align-items: flex-start; padding: 26px; gap: 18px; }
}


/* ══════════════════════════════════════════════════════════════
   13. INICIO
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ──
   Antes ocupaba 100svh: en un portátil son ~900px de alto solo
   para el titular, y todo lo demás quedaba fuera de vista. El
   sitio original usa min-height 700px, que deja asomar la
   sección siguiente e invita a bajar. */
.hero {
  position: relative;
  min-height: 660px;
  max-height: 860px;
  height: 82svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--header-h) + 24px) 0 72px;
  background: var(--forest-deep);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
/* Un degradado que deja respirar la imagen arriba y garantiza
   contraste del texto abajo-izquierda. */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 45, 24, .93) 0%, rgba(10, 45, 24, .74) 42%, rgba(10, 45, 24, .38) 100%),
    linear-gradient(to top, rgba(10, 45, 24, .82) 0%, transparent 45%);
}
.hero__inner { position: relative; z-index: 1; color: #fff; }
.hero__titulo { max-width: 17ch; margin: 26px 0 0; }
.hero__acento { color: var(--gold); }
.hero__sub {
  margin-top: 24px;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.68;
  color: rgba(255, 255, 255, .8);
}
.hero__acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }
.hero__badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 46px; }
.hero__badge {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .84rem;
  color: rgba(255, 255, 255, .88);
}
.hero__badge strong {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--gold);
  font-weight: 500;
}
.hero__scroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.hero__scroll svg { animation: flotar 2.2s ease-in-out infinite; }
@keyframes flotar {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ── Especialidades ── */
.esp__grid { margin-top: 40px; }
.esp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
}
.esp__nombre { margin: 18px 0 10px; color: var(--forest-2); }
.esp__desc { color: var(--muted-c); line-height: 1.65; flex: 1; font-size: .95rem; }
.esp__link { margin-top: 20px; }

/* ── Equipo destacado ── */
.eq__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.eq__grid { margin-top: 40px; }
.miembro {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--forest-deep);
  display: block;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.miembro:hover { transform: translateY(-5px); box-shadow: var(--surface-elev); }
.miembro__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.miembro__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: transform 1s var(--ease-out);
}
.miembro:hover .miembro__foto img { transform: scale(1.05); }
/* Espacio reservado para quien todavía no tiene foto propia */
.miembro__pendiente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, .035) 0 10px,
      transparent 10px 20px
    ),
    var(--forest-2);
  color: rgba(255, 255, 255, .4);
}
.miembro__pendiente em {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.miembro__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 45, 24, .95) 8%, rgba(10, 45, 24, .35) 48%, transparent 78%);
}
.miembro__info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 28px;
  color: #fff;
}
.miembro__nombre { color: #fff; }
.miembro__cargo {
  margin-top: 6px;
  font-size: .87rem;
  color: rgba(255, 255, 255, .68);
  line-height: 1.5;
}
.miembro__ico {
  position: absolute;
  right: 24px;
  bottom: 26px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--gold);
  transition: background .35s ease, transform .45s var(--ease-out);
}
.miembro:hover .miembro__ico { background: var(--gold); color: var(--forest-deep); transform: translateX(3px); }

/* ── Respaldo (contadores) ── */
.resp { background: var(--forest-2); color: #fff; }
.resp__grid { margin-top: 56px; }
.metrica { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .18); }
.metrica__valor {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -.03em;
}
.metrica__desc {
  margin-top: 18px;
  color: rgba(255, 255, 255, .7);
  font-size: .93rem;
  line-height: 1.66;
  max-width: 32ch;
}

@media (max-width: 860px) {
  .hero { padding-top: calc(var(--header-h) + 20px); padding-bottom: 90px; }
  .hero__badges { margin-top: 34px; }
  .hero__scroll { display: none; }
  .miembro__foto { aspect-ratio: 3 / 2.4; }
}


/* ══════════════════════════════════════════════════════════════
   14. RESEÑAS

   La sección se pinta vacía y el JS la rellena con lo que
   devuelva /reviews. Si la API falla, queda oculta (display:none
   mientras no tenga la clase is-lista) en vez de dejar un hueco.
   ══════════════════════════════════════════════════════════════ */

.res { background: var(--forest-deep); display: none; }
.res.is-lista { display: block; }
.res__head { text-align: center; max-width: 640px; margin: 0 auto; }
.res__titulo { color: #fff; margin: 14px 0 16px; }
.res__marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .9rem;
  color: rgba(255, 255, 255, .72);
}
.res__marca strong { color: #fff; font-size: 1.02rem; }

.estrellas { display: inline-flex; gap: 2px; }
.estrellas svg { color: var(--gold); }
.estrellas svg.off { color: rgba(255, 255, 255, .22); }

.res__grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: var(--maxw-contenido);
  margin-left: auto;
  margin-right: auto;
}
.res__card {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color .4s ease, transform .5s var(--ease-out);
}
.res__card:hover { border-color: rgba(199, 154, 58, .5); transform: translateY(-3px); }
.res__texto {
  margin: 14px 0 20px;
  color: rgba(255, 255, 255, .82);
  font-size: .92rem;
  line-height: 1.68;
  flex: 1;
  /* Recorta a 6 líneas para que las tarjetas queden parejas */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res__pie {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
/* La inicial es la base — siempre está ahí, por si Google no trae
   foto de perfil para esa cuenta o la imagen no carga. La foto (si
   llega) va como <img> ENCIMA, cubriendo el círculo entero; si esa
   imagen falla (`onerror`), se quita a sí misma y la inicial queda
   visible sin que haga falta JS extra para reaccionar al fallo. */
.res__avatar {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(199, 154, 58, .18);
  color: var(--gold);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .85rem;
  flex-shrink: 0;
  overflow: hidden;
}
.res__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.res__pie strong {
  display: block;
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
}
.res__pie em {
  font-style: normal;
  font-size: .78rem;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 900px) { .res__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .res__grid { grid-template-columns: 1fr; } }


/* ══════════════════════════════════════════════════════════════
   15. MAPA / UBICACIÓN
   ══════════════════════════════════════════════════════════════ */

.mapa__grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 26px;
  margin-top: 52px;
  align-items: stretch;
}
.mapa__datos {
  background: var(--forest-2);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 36px;
  display: flex;
  flex-direction: column;
}
.mapa__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.mapa__marca > div { display: flex; flex-direction: column; line-height: 1; }
.mapa__nombre { font-family: var(--font-serif); font-size: 1.3rem; letter-spacing: .07em; }
.mapa__tag {
  font-family: var(--font-ui);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 5px;
}
.mapa__dir {
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: .93rem;
}
.mapa__lista { margin: 22px 0 0; display: flex; flex-direction: column; gap: 15px; flex: 1; }
.mapa__lista > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mapa__lista dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.mapa__lista dt svg { color: var(--gold); }
.mapa__lista dd { margin: 0; font-size: .9rem; font-weight: 500; text-align: right; }
.mapa__lista dd a:hover { color: var(--gold); }
.mapa__estado { display: inline-flex; align-items: center; gap: 8px; color: var(--forest-3); }
.mapa__estado i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--forest-3);
  box-shadow: 0 0 0 3px rgba(46, 158, 87, .25);
}
.mapa__cta { margin-top: 26px; background: var(--gold); }

.mapa__marco {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: var(--surface-border);
  min-height: 420px;
  background: var(--cream);
}
.mapa__marco iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
/* El iframe de Google Maps se carga solo cuando el usuario hace
   clic — antes se cargaba en cada página del sitio, lo que sumaba
   medio megabyte de scripts de terceros por visita. */
.mapa__placeholder {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(26, 107, 58, .07), transparent 62%),
    var(--cream);
  transition: background .35s ease;
}
.mapa__placeholder:hover { background: var(--cream-2); }
.mapa__pin {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  margin-bottom: 4px;
}
.mapa__placeholder strong { font-family: var(--font-sans); font-size: 1.05rem; color: var(--forest-2); }
.mapa__hint { font-size: .85rem; color: var(--muted-c); max-width: 30ch; text-align: center; }

@media (max-width: 900px) {
  .mapa__grid { grid-template-columns: 1fr; }
  .mapa__marco, .mapa__marco iframe, .mapa__placeholder { min-height: 320px; }
}


/* ══════════════════════════════════════════════════════════════
   16. PÁGINAS DE ESPECIALIDAD
   ══════════════════════════════════════════════════════════════ */

.esp-hero {
  background: linear-gradient(150deg, var(--forest) 0%, var(--forest-2) 52%, var(--forest-deep) 100%);
  color: #fff;
  padding: clamp(56px, 7vw, 92px) 0 clamp(60px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}
.esp-hero::after {
  content: '';
  position: absolute;
  top: -25%;
  right: -8%;
  width: 560px; height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .07);
  pointer-events: none;
}
.esp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.55fr .85fr;
  gap: 48px;
  align-items: center;
}
.esp-hero__titulo { margin: 24px 0 0; max-width: 15ch; }
.esp-hero__acento { color: inherit; }
.esp-hero__parrafo {
  margin-top: 24px;
  max-width: 64ch;
  font-size: clamp(.98rem, 1.3vw, 1.08rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, .8);
}
.esp-hero__acciones { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 34px; }
.esp-hero__figura {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
}
.esp-hero__figura img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.esp-hero__figura:hover img { transform: scale(1.045); }

.serv__grid { margin-top: 32px; }
.serv__n {
  position: absolute;
  top: -6px;
  right: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.1rem;
  color: var(--line);
  line-height: 1;
  pointer-events: none;
}
.serv__nombre { margin: 0 58px 8px 0; color: var(--forest-2); }
.serv__desc { margin: 0 58px 0 0; color: var(--muted-c); font-size: .93rem; line-height: 1.62; }

.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.intro__titulo { margin: 16px 0 22px; color: var(--forest-2); }
.intro__p { color: var(--muted-c); line-height: 1.75; margin-bottom: 16px; }
.intro__figura {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--surface-elev);
}
.intro__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.cond__grid { margin-top: 34px; }
.cond__cta { margin-top: 30px; }

.medico { background: var(--forest-2); color: #fff; }
.medico__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: center;
}
.medico__nombre { color: #fff; margin: 16px 0 22px; }
.medico__p { color: rgba(255, 255, 255, .76); line-height: 1.75; margin-bottom: 16px; }
.medico__nota {
  margin-top: 22px;
  padding: 22px 24px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
}
.medico__notatitulo { color: var(--gold); }
.medico__notatexto {
  margin: 9px 0 14px;
  color: rgba(255, 255, 255, .74);
  font-size: .91rem;
  line-height: 1.65;
}
.medico__cta { margin-top: 20px; }
.medico__figura {
  border-radius: var(--radius-card);
  overflow: hidden;
}
.medico__figura img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 18%;
  transition: transform .7s var(--ease-out);
}
.medico__figura:hover img { transform: scale(1.045); }

.faq {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 44px;
  align-items: start;
}
.faq__titulo { margin: 16px 0 16px; color: var(--forest-2); }
.faq__sub { margin-bottom: 18px; }
.faq__intro { position: sticky; top: calc(var(--header-compacta) + 24px); }

@media (max-width: 960px) {
  .esp-hero__inner { grid-template-columns: 1fr; }
  .esp-hero__figura { max-width: 300px; }
  .intro, .medico__grid, .faq { grid-template-columns: 1fr; gap: 38px; }
  .faq__intro { position: static; }
  .medico__figura { max-width: 420px; }
}


/* ══════════════════════════════════════════════════════════════
   17. QUIÉNES SOMOS
   ══════════════════════════════════════════════════════════════ */

.hist { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hist__titulo { margin: 16px 0 22px; color: var(--forest-2); }
.hist__p { color: var(--muted-c); line-height: 1.75; margin-bottom: 16px; }
.hist__figura { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--surface-elev); }
.hist__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.mv__card {
  background: var(--surface-card);
  border: var(--surface-border);
  border-radius: var(--radius-card);
  padding: 40px;
  border-top: 3px solid var(--forest);
}
.mv__card--gold { border-top-color: var(--gold); }
.mv__titulo { margin: 22px 0 16px; color: var(--forest-2); }
.mv__texto { color: var(--muted-c); line-height: 1.78; }

.val__grid { margin-top: 52px; }
.val {
  padding: 32px 30px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line-2);
  background: var(--surface-card);
  transition: transform .45s var(--ease-out), border-color .35s ease,
              box-shadow .45s var(--ease-out);
}
.val:hover, .val.is-activo {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--surface-elev-sm);
}
.val__n {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold-2);
}
.val__nombre { margin: 12px 0 10px; color: var(--forest-2); }
.val__desc { color: var(--muted-c); font-size: .93rem; line-height: 1.68; }

.eqcta {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 34px 40px;
  border-radius: var(--radius-card);
  background: var(--ivory);
  border: var(--surface-border);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.eqcta:hover { transform: translateY(-4px); box-shadow: var(--surface-elev); }
.eqcta__texto { flex: 1; }
.eqcta__titulo { color: var(--forest-2); }
.eqcta__desc { margin-top: 7px; color: var(--muted-c); font-size: .93rem; }

@media (max-width: 900px) {
  .hist { grid-template-columns: 1fr; gap: 34px; }
  .eqcta { flex-direction: column; align-items: flex-start; padding: 28px; gap: 18px; }
}


/* ══════════════════════════════════════════════════════════════
   18. EQUIPO
   ══════════════════════════════════════════════════════════════ */

.perfiles { display: flex; flex-direction: column; gap: 30px; margin-top: 52px; }
.perfil {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 46px;
  align-items: center;
  padding: 40px;
  border-radius: var(--radius-card);
  border: var(--surface-border);
  background: var(--surface-card);
}
.perfil--invertido { grid-template-columns: 1fr 340px; }
.perfil--invertido .perfil__figura { order: 2; }
.perfil--invertido .perfil__cuerpo { order: 1; }
.perfil__figura { position: relative; border-radius: var(--radius-card); overflow: hidden; }
.perfil__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}
.perfil__cargo {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
}
.perfil__nombre { margin: 14px 0 20px; color: var(--forest-2); }
.perfil__bio { color: var(--muted-c); line-height: 1.8; }
.perfil__link { margin-top: 22px; }

.cal__grid { margin-top: 50px; }
.cal__nombre { margin: 20px 0 12px; color: var(--forest-2); }
.cal__desc { color: var(--muted-c); line-height: 1.7; font-size: .94rem; }

@media (max-width: 960px) {
  .perfil, .perfil--invertido { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .perfil--invertido .perfil__figura { order: 0; }
  .perfil--invertido .perfil__cuerpo { order: 0; }
  .perfil__figura { max-width: 320px; }
}


/* ══════════════════════════════════════════════════════════════
   19. ESPECIALIDADES (índice)
   ══════════════════════════════════════════════════════════════ */

.lista-areas { display: flex; flex-direction: column; gap: 22px; }
.area {
  display: grid;
  grid-template-columns: 84px 1fr 240px;
  gap: 34px;
  align-items: center;
  padding: 40px;
  border: var(--surface-border);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
              border-color .35s ease;
}
.area:hover {
  transform: translateY(-4px);
  box-shadow: var(--surface-elev);
  border-color: var(--line);
}
.area__num {
  font-family: var(--font-serif);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--sage);
}
.area__chip {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.area__titulo { margin: 10px 0 12px; color: var(--forest-2); }
.area__desc { color: var(--muted-c); line-height: 1.68; max-width: 62ch; }
.area__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.area__tags li {
  font-size: .78rem;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: rgba(26, 107, 58, .07);
  color: var(--forest);
  font-weight: 500;
}
.area__tags-mas { background: transparent !important; color: var(--muted-2) !important; }
.area__pie {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  text-align: right;
}
.area__meta { font-size: .8rem; color: var(--muted-2); }

@media (max-width: 960px) {
  .area { grid-template-columns: 1fr; gap: 20px; padding: 30px; }
  .area__num { font-size: 2.4rem; }
  .area__pie { align-items: flex-start; text-align: left; }
}


/* ══════════════════════════════════════════════════════════════
   20. PACIENTES
   ══════════════════════════════════════════════════════════════ */

.doc { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.doc__figura {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--surface-elev);
  background: var(--cream);
}
.doc__figura img { width: 100%; object-fit: cover; }
.doc__titulo { margin: 16px 0 22px; color: var(--forest-2); }
.doc__p { color: var(--muted-c); line-height: 1.78; margin-bottom: 16px; }
.doc__cta { margin-top: 12px; }
.doc__acciones { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 12px; }

.acceso { display: flex; flex-direction: column; align-items: flex-start; }
.acceso__titulo { margin: 20px 0 10px; color: var(--forest-2); }
.acceso__texto { color: var(--muted-c); font-size: .93rem; line-height: 1.65; flex: 1; }
.acceso__link { margin-top: 20px; }

@media (max-width: 960px) {
  .doc, .doc--invertido { grid-template-columns: 1fr; gap: 34px; }
  .doc--invertido .doc__figura { order: -1; }
}


/* ══════════════════════════════════════════════════════════════
   21. CONTACTO
   ══════════════════════════════════════════════════════════════ */

.canal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 30px;
  border-radius: var(--radius-card);
  border: var(--surface-border);
  background: var(--surface-card);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.canal:hover { transform: translateY(-5px); box-shadow: var(--surface-elev); }
.canal--destacado {
  background: var(--forest-2);
  border-color: var(--forest-2);
  color: #fff;
}
.canal__etq {
  margin-top: 20px;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.canal--destacado .canal__etq { color: var(--gold); }
.canal__titulo { margin: 9px 0 6px; color: var(--forest-2); }
.canal--destacado .canal__titulo { color: #fff; }
.canal__valor { color: var(--muted-c); font-size: .93rem; }
.canal--destacado .canal__valor { color: rgba(255, 255, 255, .74); }
.canal__ico {
  position: absolute;
  top: 30px;
  right: 28px;
  color: var(--gold);
  transition: transform .4s var(--ease-out);
}
.canal:hover .canal__ico { transform: translateX(4px); }

.form-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.form-wrap__intro { position: sticky; top: calc(var(--header-compacta) + 24px); }
.form__titulo { margin: 16px 0 16px; color: var(--forest-2); }
.form__puntos { margin-top: 28px; display: flex; flex-direction: column; gap: 13px; }
.form__puntos li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .92rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.form__puntos svg { color: var(--forest); flex-shrink: 0; margin-top: 3px; }

.form {
  background: var(--ivory);
  border: var(--surface-border);
  border-radius: var(--radius-card);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label {
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
}
.campo input, .campo select, .campo textarea {
  padding: 13px 16px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(26, 107, 58, .1);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--muted-2); }

.consent { display: flex; gap: 11px; align-items: flex-start; }
.consent input { margin-top: 3px; accent-color: var(--forest); flex-shrink: 0; }
.consent span { font-size: .82rem; color: var(--muted-c); line-height: 1.6; }

.ok {
  background: var(--ivory);
  border: var(--surface-border);
  border-radius: var(--radius-card);
  padding: 56px 40px;
  text-align: center;
}
.ok__ico {
  display: inline-grid;
  place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: rgba(46, 158, 87, .12);
  color: var(--ok);
  margin-bottom: 22px;
}
.ok__titulo { color: var(--forest-2); }
.ok__texto { margin: 14px 0 26px; color: var(--muted-c); line-height: 1.7; }
.ok__texto a { color: var(--forest); font-weight: 600; }

@media (max-width: 960px) {
  .form-wrap { grid-template-columns: 1fr; gap: 36px; }
  .form-wrap__intro { position: static; }
  .form { padding: 28px; }
  .form__fila { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   22. BLOG
   ══════════════════════════════════════════════════════════════ */

.lista-art { align-items: stretch; }
.art { display: flex; flex-direction: column; align-items: flex-start; }
.art__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.art__fecha { font-size: .82rem; color: var(--muted-2); }
.art__titulo { color: var(--forest-2); }
.art__resumen { margin-top: 14px; color: var(--muted-c); line-height: 1.7; font-size: .95rem; flex: 1; }
.art__autor {
  display: block;
  margin-top: 22px;
  font-size: .84rem;
  color: var(--muted-2);
}
.art__link { margin-top: 22px; }

/* Variante con foto de portada — grilla principal del blog.
   Tamaño compacto (~50% del original): imagen más baja, paddings
   y tipografía reducidos. */
.art--foto { padding: 0; overflow: hidden; }
.art--foto .art__img {
  width: 100%;
  aspect-ratio: 16 / 5.2;
  overflow: hidden;
  background: var(--ivory);
}
.art--foto .art__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
.art--foto:hover .art__img img { transform: scale(1.045); }
.art--foto .art__body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; width: 100%; }
.art--foto .art__meta { margin-bottom: 8px; }
.art--foto .art__titulo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.32;
}
.art--foto .art__resumen {
  font-size: .78rem;
  line-height: 1.5;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art--foto .pill { padding: 3px 10px; font-size: .66rem; }
.art__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.art__pie-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  color: var(--muted-2);
}
.art__pie-item svg { flex-shrink: 0; opacity: .7; width: 11px; height: 11px; }

/* Variante vertical del bloque "próximamente" usada en el blog */
.proximo--col {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 34px;
}
.proximo--col .proximo__titulo { margin: 18px 0 8px; }

.news {
  background: linear-gradient(140deg, var(--forest-2) 0%, var(--forest-deep) 100%);
  color: #fff;
}
.news__titulo { color: #fff; margin: 18px auto 14px; max-width: 20ch; }
.news__sub { color: rgba(255, 255, 255, .7); max-width: 52ch; margin: 0 auto; }
.news__form {
  display: flex;
  gap: 11px;
  justify-content: center;
  margin-top: 34px;
  flex-wrap: wrap;
}
.news__input {
  width: min(340px, 100%);
  padding: 14px 20px;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .95rem;
}
.news__input::placeholder { color: rgba(255, 255, 255, .45); }
.news__input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .13); }
.news__nota { margin-top: 16px; font-size: .82rem; color: rgba(255, 255, 255, .45); }

/* ══════════════════════════════════════════════════════════════
   23. ARTÍCULO
   ══════════════════════════════════════════════════════════════ */

.barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 130;
}

.cab {
  background: linear-gradient(150deg, var(--forest) 0%, var(--forest-2) 55%, var(--forest-deep) 100%);
  color: #fff;
  padding: clamp(40px, 5vw, 64px) 0 clamp(52px, 6vw, 78px);
}
.cab__volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  color: rgba(255, 255, 255, .68);
  margin-bottom: 30px;
  transition: color .25s ease;
}
.cab__volver:hover { color: var(--gold); }
.cab__volver svg { transform: rotate(180deg); }
.cab__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cab__fecha { font-size: .84rem; color: rgba(255, 255, 255, .55); }
.cab__titulo { font-size: clamp(2rem, 4.6vw, 3.5rem); }
.cab__resumen {
  margin-top: 20px;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  max-width: 60ch;
}
.cab__autor {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.cab__avatar {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--gold);
  flex-shrink: 0;
  overflow: hidden;
}
.cab__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.cab__autor > div { display: flex; flex-direction: column; }
.cab__autor strong { font-size: .95rem; }
.cab__autor span { font-size: .82rem; color: rgba(255, 255, 255, .55); }

.bloque { margin-bottom: 42px; }
.bloque__titulo { color: var(--forest-2); margin-bottom: 18px; }

.refs {
  margin-top: 18px;
  padding: 32px 34px;
  border-radius: var(--radius-card);
  background: var(--cream);
  border: var(--surface-border);
}
.refs__titulo { color: var(--forest-2); margin-bottom: 16px; }
.refs__lista { display: flex; flex-direction: column; gap: 10px; }
.refs__lista li {
  display: flex;
  gap: 10px;
  font-size: .85rem;
  line-height: 1.62;
  color: var(--muted-c);
}
.refs__lista li > span:first-child { color: var(--gold-2); font-weight: 600; flex-shrink: 0; }
.refs__lista li > span:last-child { flex: 1 1 auto; min-width: 0; }

.compartir {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid var(--line-2);
}
.compartir__label {
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.compartir__botones { display: flex; gap: 9px; }
.compartir__botones a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--forest);
  transition: all .3s var(--ease-out);
}
.compartir__botones a:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
  transform: translateY(-2px);
}

.aviso {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 34px;
  padding: 26px 28px;
  border-radius: var(--radius-card);
  background: rgba(26, 107, 58, .05);
  border: 1px solid rgba(26, 107, 58, .16);
}
.aviso p { font-size: .89rem; line-height: 1.68; color: var(--muted-c); }
.aviso a { color: var(--forest); font-weight: 600; }

.otros__titulo { color: var(--forest-2); margin: 14px 0 0; }
.otros__grid { margin-top: 36px; }
.otro { display: flex; flex-direction: column; align-items: flex-start; }
.otro__titulo { margin: 16px 0 10px; color: var(--forest-2); }
.otro__resumen { color: var(--muted-c); font-size: .92rem; line-height: 1.66; flex: 1; }
.otro__link { margin-top: 18px; }

/* ── Prosa del artículo ── */
.prosa-art p { color: var(--muted-c); line-height: 1.85; margin-bottom: 18px; font-size: 1.02rem; }
.prosa-art p:last-child { margin-bottom: 0; }
.prosa-art strong { color: var(--ink); font-weight: 600; }
.prosa-art em { color: var(--forest); font-style: italic; }
.prosa-art h3 {
  font-family: var(--font-sans);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--forest-2);
  margin: 30px 0 14px;
}
.prosa-art ul, .prosa-art ol { margin: 0 0 20px; display: flex; flex-direction: column; gap: 11px; }
.prosa-art li {
  position: relative;
  padding-left: 26px;
  color: var(--muted-c);
  line-height: 1.76;
}
.prosa-art ul li::before {
  content: '';
  position: absolute;
  left: 5px; top: 12px;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--gold);
}
.prosa-art ol { counter-reset: n; }
.prosa-art ol li { counter-increment: n; }
.prosa-art ol li::before {
  content: counter(n) '.';
  position: absolute;
  left: 0; top: 0;
  color: var(--gold-2);
  font-weight: 600;
  font-size: .9rem;
}
.prosa-art blockquote {
  margin: 26px 0;
  padding: 20px 26px;
  border-left: 3px solid var(--gold);
  background: var(--cream);
  border-radius: 0 8px 8px 0;
}
.prosa-art blockquote p { margin: 0; font-size: 1.02rem; color: var(--ink-2); }


/* ══════════════════════════════════════════════════════════════
   23b. ENTRADAS DEL BLOG ESCRITAS DESDE EL PANEL

   Las cinco entradas viejas son HTML escrito a mano y usan
   `.prosa-art`. Las que se escriben desde el panel salen del
   editor de texto (Quill) y usan `.prosa-blog`: el mismo aire y
   la misma tipografía, más las clases que produce ese editor
   (alineación, sangrías, tamaños) y el manejo de imágenes.

   Vive separado de `.prosa-art` a propósito: si algún día hay que
   ajustar cómo se ve lo que escribe el doctor, se toca acá sin
   riesgo de mover los artículos que ya están publicados.
   ══════════════════════════════════════════════════════════════ */

.prosa-blog { overflow: hidden; }   /* contiene las imágenes flotadas */

.prosa-blog p { color: var(--muted-c); line-height: 1.85; margin-bottom: 18px; font-size: 1.02rem; }
.prosa-blog p:last-child { margin-bottom: 0; }
.prosa-blog strong { color: var(--ink); font-weight: 600; }
.prosa-blog em { color: var(--forest); font-style: italic; }
.prosa-blog u { text-decoration: underline; text-underline-offset: 3px; }
.prosa-blog a { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prosa-blog a:hover { color: var(--forest-2); }

.prosa-blog h2 {
  font-family: var(--font-serif, var(--font-sans));
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 600;
  color: var(--forest-2);
  margin: 42px 0 16px;
  line-height: 1.25;
}
.prosa-blog h3 {
  font-family: var(--font-sans);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--forest-2);
  margin: 30px 0 14px;
}
.prosa-blog h4 {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin: 26px 0 10px;
}
.prosa-blog h2:first-child,
.prosa-blog h3:first-child,
.prosa-blog h4:first-child { margin-top: 0; }

/* ── Listas ──
   Ojo con la estructura: este editor de texto escribe SIEMPRE
   <ol>, con o sin viñetas, y distingue una cosa de la otra con
   data-list="bullet" / data-list="ordered" en cada <li>. Por eso
   los selectores contemplan las dos formas: la del editor y la
   clásica (<ul>/<ol> a secas), que es la que llega cuando alguien
   pega contenido desde Word. */
.prosa-blog ul, .prosa-blog ol {
  margin: 0 0 20px;
  padding-left: 4px;
  counter-reset: lista;
  list-style: none;
}
.prosa-blog li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  color: var(--muted-c);
  line-height: 1.76;
  list-style: none;
}

/* El editor mete un <span class="ql-ui"> por cada ítem para pintar
   su propia viñeta. Acá esa viñeta la pone el CSS, así que el span
   sobra — pero se oculta en vez de borrarse, porque borrarlo del
   HTML guardado rompería el ítem al reabrirlo en el editor. */
.prosa-blog .ql-ui { display: none; }

.prosa-blog ul > li::before,
.prosa-blog li[data-list="bullet"]::before {
  content: '';
  position: absolute;
  left: 5px; top: 12px;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--gold);
}

.prosa-blog li[data-list="ordered"],
.prosa-blog ol > li:not([data-list]) { counter-increment: lista; }

.prosa-blog li[data-list="ordered"]::before,
.prosa-blog ol > li:not([data-list])::before {
  content: counter(lista) '.';
  position: absolute;
  left: 0; top: 0;
  color: var(--gold-2);
  font-weight: 600;
  font-size: .9rem;
}

.prosa-blog blockquote {
  margin: 26px 0;
  padding: 20px 26px;
  border-left: 3px solid var(--gold);
  background: var(--cream);
  border-radius: 0 8px 8px 0;
}
.prosa-blog blockquote p { margin: 0; font-size: 1.02rem; color: var(--ink-2); }

.prosa-blog hr { border: 0; border-top: 1px solid var(--line-2); margin: 34px 0; }

.prosa-blog table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin: 26px 0;
}
.prosa-blog th {
  background: var(--forest-2);
  color: #fff;
  text-align: left;
  padding: .6rem .8rem;
  font-weight: 600;
}
.prosa-blog td { padding: .6rem .8rem; border-bottom: 1px solid var(--line-2); color: var(--muted-c); }

/* ── Imágenes dentro del artículo ──
   El tamaño lo fija el editor con el atributo width (un número), y
   la ubicación con una de estas cuatro clases. Nunca posiciones
   absolutas: una imagen anclada a una coordenada exacta se
   descoloca en cuanto cambia el ancho de la pantalla. */
.prosa-blog img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 22px 0;
}
.blog-img--centro { margin: 26px auto !important; }
.blog-img--izq { float: left; margin: 6px 26px 16px 0 !important; }
.blog-img--der { float: right; margin: 6px 0 16px 26px !important; }
.blog-img--ancho { width: 100% !important; margin: 30px 0 !important; }

.prosa-blog figure { margin: 26px 0; }
.prosa-blog figure img { margin: 0 auto; }
.prosa-blog figcaption {
  margin-top: 10px;
  font-size: .82rem;
  color: var(--muted-2);
  text-align: center;
}

/* Alineación y sangría que produce el editor de texto */
.prosa-blog .ql-align-center { text-align: center; }
.prosa-blog .ql-align-right { text-align: right; }
.prosa-blog .ql-align-justify { text-align: justify; }
.prosa-blog .ql-indent-1 { padding-left: 3em; }
.prosa-blog .ql-indent-2 { padding-left: 6em; }
.prosa-blog .ql-indent-3 { padding-left: 9em; }
.prosa-blog .ql-indent-4 { padding-left: 12em; }
.prosa-blog .ql-size-small { font-size: .86rem; }
.prosa-blog .ql-size-large { font-size: 1.25rem; }
.prosa-blog .ql-size-huge { font-size: 1.6rem; }

/* En pantallas angostas una imagen flotada deja columnas de texto
   de tres palabras. Se pasan todas a ancho completo. */
@media (max-width: 640px) {
  .blog-img--izq,
  .blog-img--der {
    float: none;
    width: 100% !important;
    margin: 22px auto !important;
  }
  .prosa-blog .ql-indent-1,
  .prosa-blog .ql-indent-2,
  .prosa-blog .ql-indent-3,
  .prosa-blog .ql-indent-4 { padding-left: 1.5em; }
}

/* Portada de la entrada: pisa un poco la cabecera oscura, igual
   que la tarjeta del médico en las páginas de especialidad. */
.blog-portada {
  margin: -60px 0 44px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 28px 60px -28px rgba(15, 26, 19, .5);
  background: var(--cream);
}
.blog-portada img { width: 100%; height: auto; display: block; }

@media (max-width: 768px) {
  .blog-portada { margin: -34px 0 32px; }
}


/* ══════════════════════════════════════════════════════════════
   24. PÁGINAS LEGALES
   ══════════════════════════════════════════════════════════════ */

.legal { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }

.legal__indice { position: sticky; top: calc(var(--header-compacta) + 24px); }
.legal__fecha {
  font-family: var(--font-ui);
  font-size: .76rem;
  color: var(--muted-2);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
.legal__indicetitulo {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin: 20px 0 14px;
}
.legal__indice ol { display: flex; flex-direction: column; gap: 2px; }
.legal__indice a {
  display: flex;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: .87rem;
  line-height: 1.45;
  color: var(--muted-c);
  border-left: 2px solid transparent;
  transition: all .28s ease;
}
.legal__indice a:hover { color: var(--forest); background: rgba(26, 107, 58, .05); }
.legal__indice a.is-activa {
  color: var(--forest);
  font-weight: 600;
  border-left-color: var(--gold);
  background: rgba(199, 154, 58, .07);
}
.legal__n { font-family: var(--font-ui); font-size: .72rem; color: var(--muted-2); flex-shrink: 0; }

.legal__sec { padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--line-2); }
.legal__sec:last-of-type { border-bottom: 0; }
.legal__sectitulo { color: var(--forest-2); margin-bottom: 20px; scroll-margin-top: 140px; }
.legal__secn { color: var(--gold); }

.legal__pie { display: flex; gap: 13px; flex-wrap: wrap; padding-top: 12px; }

/* ── Prosa de los textos legales ── */
.prosa p { color: var(--muted-c); line-height: 1.82; margin-bottom: 16px; }
.prosa p:last-child { margin-bottom: 0; }
.prosa strong { color: var(--ink); font-weight: 600; }
.prosa a { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prosa a:hover { color: var(--gold-2); }
.prosa ul { margin: 0 0 18px; display: flex; flex-direction: column; gap: 11px; }
.prosa ul li {
  position: relative;
  padding-left: 24px;
  color: var(--muted-c);
  line-height: 1.72;
}
.prosa ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold);
}

@media (max-width: 960px) {
  .legal { grid-template-columns: 1fr; gap: 34px; }
  .legal__indice { position: static; }
}


/* ══════════════════════════════════════════════════════════════
   25. RECORRIDO DEL CONSULTORIO (inicio)

   El video real del consultorio, avanzado con el scroll. No se
   reproduce solo: sus 468 cuadros se dibujan uno a uno en un
   <canvas> y cuál se dibuja depende de dónde está el scroll, así
   que el visitante lo adelanta y lo devuelve con la rueda.

   TRES PARADAS, no un avance parejo. El recorrido frena en tres
   fotogramas concretos y corre entre ellos:

     parada 1 · la placa del Dr. Bautista → hero
     parada 2 · el escritorio             → respaldo + reseñas
     parada 3 · el consultorio            → agenda

   Cada bloque de texto va donde su fotograma está vacío, y no
   donde caiga: sobre la pared lisa en la primera, sobre la
   superficie del escritorio en la segunda, centrado sobre la
   madera en la tercera. Por eso hay tres colocaciones distintas
   (--izq, --banda, --centro) y tres velos distintos: el velo
   oscurece solo la zona donde va el texto, no la toma entera.
   ══════════════════════════════════════════════════════════════ */

/* Sin JS la sección se aplana: los momentos quedan apilados como
   secciones normales (.recorrido--plano, más abajo). El scroll
   largo solo existe si las animaciones están vivas. */
.recorrido {
  position: relative;
  height: 100svh;
  background: var(--forest-deep);
}

html.js-anim .recorrido {
  /* Reparto: parada · viaje · parada larga · viaje · parada.
     La segunda parada vale por dos porque ahí se leen respaldo y
     reseñas sin que la cámara se mueva.

     ── POR QUÉ SUBIÓ DE 620 A 700 ──
     Los tramos de VIAJE eran demasiado cortos para la cantidad de
     fotogramas que tienen que recorrer. Con 620vh el primer viaje
     movía 223 cuadros en 124vh: en un portátil de 900px eso son 5
     píxeles de scroll por cuadro, y como una vuelta de rueda son
     unos 100px, cada golpecito saltaba 20 cuadros de una vez. Peor
     en el medio del tramo, donde el suavizado va un 50% más rápido:
     30 cuadros por golpe. De ahí venía la sensación de que las
     escenas "aparecen de la nada" — no es que saltara, es que
     pasaba a tres veces la velocidad real del video.

     Con 700vh los viajes se llevan 189 y 182vh, o sea 8px de scroll
     por cuadro: una vuelta de rueda mueve unos 12 cuadros, que a 30
     fps es casi exactamente la velocidad a la que se grabó. Se lee
     como un video reproduciéndose, no como una diapositiva
     cambiando.

     El otro medio arreglo está en el JS (scrub con número: le da
     inercia, así que un tirón brusco se convierte en un barrido
     rápido en vez de un corte). Los dos hacen falta: más recorrido
     sin inercia sigue cortando, e inercia sin recorrido solo
     retrasa el corte.

     ── SUBIÓ OTRA VEZ, A 1000vh ──
     Pedido explícito: que TODAS las animaciones necesiten bastante
     más scroll para apreciarse, un 50% más. El sticky se queda en
     100svh (una pantalla, fijo — es lo que tarda en llegar a estar
     pegado, no una duración), así que el recorrido REAL —lo que
     ScrollTrigger reparte entre las tres paradas— era 700−100=600vh
     y ahora es 900vh (×1.5). Las fracciones de VENTANAS no cambian:
     son las mismas, solo que ahora cada una vale 1.5× más scroll
     físico para recorrerse. */
  height: 1000vh;
}

.recorrido__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.recorrido__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Primer cuadro como fondo inmediato: se ve mientras el lienzo
   todavía no pinta nada. El JS lo apaga en cuanto dibuja. */
.recorrido__base {
  position: absolute;
  inset: 0;
  background: var(--forest-deep) url('../images/recorrido/momento-1.jpg') center / cover no-repeat;
  transition: opacity .5s ease;
}

/* ── Velo ──
   Cuatro capas: una fija que oscurece la franja de la cabecera
   (si no, el menú blanco se pierde sobre las paredes claras del
   consultorio) y tres que el JS cruza según la parada, cada una
   sombreando justo donde cae el texto de ese momento. */
.recorrido__velo { position: absolute; inset: 0; pointer-events: none; }
.recorrido__velo-capa { position: absolute; inset: 0; display: block; }

/* La franja de arriba no es decorativa: sin ella el menú blanco
   se pierde sobre la ventana quemada del tercer fotograma. Medido
   contra los tres cuadros ancla, este degradado deja el peor caso
   en 5.2:1 (la norma pide 4.5). El de abajo separa el texto del
   borde inferior de la pantalla. */
.recorrido__velo-capa--fijo {
  background:
    linear-gradient(180deg,
      rgba(6, 26, 14, .74) 0%,
      rgba(6, 26, 14, .42) 12%,
      rgba(6, 26, 14, .14) 26%,
      transparent 40%),
    linear-gradient(0deg, rgba(6, 26, 14, .3) 0%, transparent 26%);
}

/* Parada 1 — el texto va sobre la pared lisa de la izquierda y la
   placa queda libre a la derecha. */
.recorrido__velo-capa--izq {
  opacity: 0;
  background: linear-gradient(95deg,
    rgba(6, 26, 14, .94) 0%,
    rgba(6, 26, 14, .86) 26%,
    rgba(6, 26, 14, .52) 47%,
    rgba(6, 26, 14, .2) 66%,
    rgba(6, 26, 14, .06) 100%);
}

/* Parada 2 — banda inferior sobre el escritorio. */
.recorrido__velo-capa--banda {
  opacity: 0;
  background: linear-gradient(0deg,
    rgba(6, 26, 14, .86) 0%,
    rgba(6, 26, 14, .81) 26%,
    rgba(6, 26, 14, .59) 47%,
    rgba(6, 26, 14, .2) 72%,
    transparent 100%);
}

/* Parada 3 — foco bajo y centrado sobre la madera, dejando ver
   los diplomas de la izquierda y la biblioteca de la derecha.

   Este velo es bastante más suave que los otros dos, y no por
   capricho: el escritorio de esta toma ya es oscuro de por sí, así
   que con menos sombra el texto sigue leyéndose igual de bien y se
   ve casi el cuádruple de consultorio. Medido: al bajarlo, el
   contraste del cuerpo cae de 9.0:1 a 5.6:1 —de sobra sobre el 4.5
   que pide la norma— y la escena a la vista pasa del 13% al 48%
   de la pantalla. */
.recorrido__velo-capa--centro {
  opacity: 0;
  background:
    radial-gradient(128% 92% at 50% 92%,
      rgba(6, 26, 14, .59) 0%,
      rgba(6, 26, 14, .51) 34%,
      rgba(6, 26, 14, .27) 62%,
      rgba(6, 26, 14, .06) 84%,
      transparent 100%),
    linear-gradient(0deg, rgba(6, 26, 14, .25) 0%, transparent 46%);
}

/* ── Paneles de cada momento ──
   Todos ocupan la misma posición; el JS los cruza con opacidad.
   El que no está activo no recibe clics, para que sus botones no
   se puedan pulsar sin querer.

   Aparecen enfocándose, no deslizándose: el JS les pone un
   desenfoque corto y una escala mínima que se asientan a la vez
   que sube la opacidad. Deslizar delata que el texto es una capa
   pegada encima del video; enfocar hace que parezca que ya estaba
   en la escena y la cámara acaba de fijarse en él. */
/* La fila se limita a la altura útil (minmax(0,1fr)) a propósito.
   Sin eso, los cuatro paneles comparten celda y la celda crece
   hasta el más alto: bastaba con que el hero no cupiera para que
   empujara a los otros tres fuera de la pantalla, aunque ellos
   solos cupieran de sobra. Medido en 1280×712: el hero pedía
   607px, cabían 500, y respaldo, reseñas y agenda terminaban 27px
   por debajo del borde inferior. */
.recorrido__paneles {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: calc(var(--header-h) + 20px) 0 80px;
}
/* `visibility: hidden` y no solo `opacity: 0`: la opacidad apaga
   el panel a la vista pero sus enlaces siguen en el orden de
   tabulación. Sin esto, quien navega con el teclado pasaba por los
   botones "Agendar cita" y "Contáctenos" de las paradas que no
   están en pantalla, y el marco de foco se dibujaba sobre nada.
   La transición de visibility va sin duración para que se apague
   justo al final del fundido y no antes. */
.recorrido__panel {
  grid-area: 1 / 1;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .28s;
}
.recorrido__panel.is-activo {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* will-change solo en el panel que se está moviendo: reservar una
   capa de composición a pantalla completa para los cuatro, desde el
   primer pintado, es memoria de GPU pagada por adelantado para tres
   paneles que no se ven. */
.recorrido__panel.is-activo { will-change: opacity, transform, filter; }

/* Sombra propia del texto, con la caída de luz de cada toma. Va
   en el texto y no en una caja de fondo: una tarjeta translúcida
   se lee como algo pegado encima; una sombra suave se lee como
   algo que está en la escena. */
.recorrido__panel :is(h1, h2, p, span, strong, li, a) {
  text-shadow: 0 1px 2px rgba(4, 18, 10, .5), 0 10px 30px rgba(4, 18, 10, .42);
}

/* ── Colocación por parada ── */

/* Parada 1 · columna izquierda, sobre la pared lisa.

   El título va más chico que el de una portada normal y sin tope
   de caracteres: en media pantalla, a 65px y con 13ch de ancho,
   se partía en cuatro renglones y el hero entero pedía 607px de
   los 500 disponibles. A este tamaño entra en tres y sobra sitio.
   Los márgenes también se aprietan, por lo mismo. */
.recorrido__panel--izq {
  align-self: center;
  transform-origin: 12% 50%;
}
.recorrido__panel--izq .container { max-width: none; }
.recorrido__panel--izq > .container > * { max-width: min(46vw, 620px); }
/* Ojo con el max-width: acá NO puede ir `none`. La regla de la
   columna (> .container > *) tiene la misma especificidad que
   esta, así que `none` le ganaba por ir después y el título se
   iba a todo el ancho de la pantalla, encima de la placa. Se
   quita el tope de caracteres heredado dejando que mande la
   columna, que es lo que corresponde. */
.recorrido__panel--izq .recorrido__titulo {
  margin-top: 18px;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
}
.recorrido__panel--izq .recorrido__sub { max-width: 40ch; margin-top: 18px; }
.recorrido__panel--izq .recorrido__acciones { margin-top: 28px; }

/* Parada 2 · banda inferior, sobre el escritorio */
.recorrido__panel--banda {
  align-self: end;
  transform-origin: 50% 100%;
}
.recorrido__panel--banda .recorrido__titulo { max-width: 26ch; margin-top: 16px; }
.recorrido__panel--banda .recorrido__sub { margin-top: 14px; }

/* Parada 3 · centrado bajo, sobre la madera */
.recorrido__panel--centro {
  align-self: end;
  text-align: center;
  transform-origin: 50% 88%;
  padding-bottom: 4vh;
}
.recorrido__panel--centro .recorrido__titulo { max-width: 22ch; margin-inline: auto; }
.recorrido__panel--centro .recorrido__sub { margin-inline: auto; }
.recorrido__panel--centro .recorrido__acciones { justify-content: center; }

.recorrido__titulo { max-width: 17ch; margin: 26px 0 0; }
.recorrido__acento { color: inherit; }
.recorrido__sub {
  margin-top: 24px;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.68;
  color: rgba(255, 255, 255, .82);
}
.recorrido__acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }

/* Parada 2a — respaldo.
   Las tres métricas (15+ / 5.000+ / 249+) que iban acá se quitaron:
   ver el comentario en index.html. El título pasa directo a la
   tabla de Scholar. */

/* ── Tabla de Google Scholar ──
   Antes era una sola línea de texto corrido; pedido explícito:
   "la tabla con datos de scholar". Ahora es una fila de verdad —
   tres celdas con separador— y no solo texto con guiones en medio.

   Nace con `hidden` en el HTML y el JS se lo quita cuando llegan
   los datos. Si la API falla, esta tabla no existe y el panel se
   ve exactamente como antes. */
.recorrido__scholar {
  max-width: var(--maxw-contenido);
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.recorrido__scholar[hidden] { display: none; }
.recorrido__scholar-cab {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .74rem;
}
.recorrido__scholar-marca {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.recorrido__scholar-marca:hover { border-bottom-color: currentColor; }
/* El nombre se va al final y se hace a un lado en cuanto falta
   sitio: importa menos que la marca. */
.recorrido__scholar-quien {
  margin-left: auto;
  font-size: .68rem;
  color: rgba(255, 255, 255, .45);
}
.recorrido__scholar-tabla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 10px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  overflow: hidden;
}
.recorrido__scholar-celda {
  background: rgba(6, 26, 14, .55);
  padding: 7px 14px;
  text-align: center;
}
.recorrido__scholar-celda strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.1rem;
  color: #fff;
}
.recorrido__scholar-celda span {
  display: block;
  margin-top: 1px;
  font-size: .6rem;
  color: rgba(255, 255, 255, .6);
}

/* ── Bloques de reseñas y artículos ──
   Cada uno nace `hidden` (mismo patrón que Scholar) y el JS se lo
   quita solo si hay datos que mostrar. Nada de mostrar un título
   sobre una tira vacía. */
.recorrido__bloque { margin-top: 14px; }
.recorrido__bloque[hidden] { display: none; }
.recorrido__bloque-marca {
  font-size: .74rem;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 8px;
}

/* ── Red de seguridad contra el desborde ──
   Dos bloques (tabla de Scholar, carrusel de reseñas) en una
   banda pensada para caber en una pantalla, sobre una sección con
   `overflow: hidden`. Si en algún tamaño de pantalla no cupiera —un
   móvil bajo, una ventana de escritorio corta— antes el sobrante se
   recortaba en silencio, invisible, contra el borde de arriba (el
   mismo tipo de bug que ya pasó una vez con el aviso de bajar). Con
   esto, en vez de desaparecer, el panel se vuelve desplazable por
   sí mismo: peor que si cupiera entero, pero nunca invisible. */
[data-momento="respaldo"] .container {
  max-height: calc(100svh - var(--header-h) - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
  padding-right: 4px;
}
[data-momento="respaldo"] .container::-webkit-scrollbar { width: 5px; }
[data-momento="respaldo"] .container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .25);
  border-radius: 3px;
}

/* ── Carrusel que se desliza solo ──
   Las reseñas ya no caben en un grid de tarjetas grandes —van en el
   MISMO fotograma que la tabla de Scholar—, así que se comprimen en
   una tira horizontal que avanza sola. El JS duplica la lista una vez
   (grid.innerHTML = html+html) para que el salto de -50% a 0% sea
   invisible: un ciclo completo termina exactamente donde el
   siguiente vuelve a empezar. (Esta misma clase la sigue usando el
   carrusel de artículos, por si vuelve a aparecer en otra página.) */
.recorrido__carrusel {
  overflow: hidden;
  margin-inline: -24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.recorrido__carrusel-pista {
  display: flex;
  gap: 14px;
  width: max-content;
  padding-inline: 24px;
  animation: recorridoCarrusel 40s linear infinite;
}
/* Antes se detenía al pasar el mouse por encima. Pedido explícito:
   que NO se pare con el hover — sigue deslizando aunque el cursor
   esté encima. Se deja el pausado por teclado (`:focus-within`): si
   alguien tabula hasta una tarjeta, esa sí necesita quedarse quieta
   para poder leerla y hacerle clic. */
.recorrido__carrusel:focus-within .recorrido__carrusel-pista {
  animation-play-state: paused;
}
@keyframes recorridoCarrusel {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .recorrido__carrusel-pista { animation: none; }
  .recorrido__carrusel {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Reseñas: reutiliza .res__card (ver sección 14) pero más chica —
   acá comparte pantalla con la tabla de Scholar, no tiene una
   sección entera para ella sola. */
.recorrido__carrusel .res__card {
  flex: 0 0 240px;
  padding: 12px 15px;
}
.recorrido__carrusel .res__texto {
  margin: 7px 0 9px;
  font-size: .78rem;
  line-height: 1.42;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.recorrido__carrusel .res__pie { padding-top: 8px; gap: 8px; }
.recorrido__carrusel .res__avatar { width: 26px; height: 26px; font-size: .78rem; }
.recorrido__carrusel .res__pie strong { font-size: .8rem; }
.recorrido__carrusel .res__pie em { display: none; }
.recorrido__carrusel .estrellas svg { width: 12px; height: 12px; }

/* Artículos: tarjeta propia, más simple — título, revista/año y
   citas, con enlace al artículo cuando lo trae SerpApi. */
.recorrido__tarjetita {
  flex: 0 0 220px;
  display: block;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius-card);
  padding: 12px 15px;
  color: inherit;
  text-decoration: none;
  transition: border-color .35s ease, transform .45s var(--ease-out);
}
.recorrido__tarjetita:hover { border-color: rgba(199, 154, 58, .5); transform: translateY(-3px); }
.recorrido__tarjetita-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .8rem;
  line-height: 1.4;
  color: #fff;
}
.recorrido__tarjetita-pie {
  display: block;
  margin-top: 7px;
  font-size: .66rem;
  color: rgba(255, 255, 255, .58);
}

/* Indicador de avance del recorrido */
.recorrido__pasos {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 11px;
  z-index: 2;
}
.recorrido__paso {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  transition: background .35s ease, transform .35s ease;
}
.recorrido__paso.is-activo { background: var(--gold); transform: scale(1.7); }

/* ── Aviso de bajar ──
   Va centrado abajo, fuera de los paneles: si estuviera dentro del
   hero heredaría su desenfoque y su escala en cada cruce de
   momento, y esto tiene que encenderse y apagarse limpio.

   El punto que baja por el riel es la parte que hace el trabajo:
   una flecha quieta se lee como decoración, algo que se mueve hacia
   abajo se lee como una instrucción. Dura 1.9s y descansa entre
   repeticiones, para insistir sin ponerse pesado. */
.recorrido__guia {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  text-align: center;
}
.recorrido__guia-texto {
  font-family: var(--font-ui);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 2px rgba(4, 18, 10, .6), 0 8px 24px rgba(4, 18, 10, .5);
}
.recorrido__guia-riel {
  position: relative;
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
  overflow: hidden;
}
.recorrido__guia-punto {
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 9px;
  border-radius: 2px;
  background: var(--gold);
  animation: recorridoGuia 1.9s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes recorridoGuia {
  0%, 12%  { transform: translateY(-10px); opacity: 0; }
  30%      { opacity: 1; }
  75%      { transform: translateY(40px); opacity: 0; }
  100%     { transform: translateY(40px); opacity: 0; }
}

/* Con "reducir movimiento" el aviso se queda, pero quieto: la
   información sigue haciendo falta; lo que sobra es el movimiento. */
@media (prefers-reduced-motion: reduce) {
  .recorrido__guia-punto { animation: none; top: 4px; opacity: 1; }
}

/* Aplanado: no hay recorrido que anunciar, el contenido está
   apilado y se baja como en cualquier página. */
.recorrido--plano .recorrido__guia { display: none; }

/* ── Recorrido aplanado ──
   Sin JS o con "reducir movimiento": no hay scroll largo ni
   lienzo, cada momento pasa a ser una sección normal sobre su
   propio fotograma. Se pierde el recorrido, no el contenido. */
/* Ojo con la especificidad de estas reglas: el alto largo lo pone
   `html.js-anim .recorrido` (0,2,1), así que un `.recorrido--plano`
   pelado (0,1,0) NO puede anularlo. Sin el `html.js-anim` delante,
   la sección se quedaba con 620vh de scroll vacío debajo del
   contenido ya aplanado. Lo mismo vale para el padding. */
html.js-anim .recorrido--plano { height: auto; }
.recorrido--plano .recorrido__sticky { position: static; height: auto; }
.recorrido--plano .recorrido__lienzo,
.recorrido--plano .recorrido__base,
.recorrido--plano .recorrido__pasos { display: none; }

/* El velo se quita del todo. Estaba en `position: fixed`, y como
   ningún ancestro lo recorta (el sticky no crea bloque contenedor:
   no tiene transform ni filter), se quedaba pegado al viewport
   para siempre y oscurecía el equipo y el pie de la página entera.
   Acá no hace falta: cada panel ya lleva su propio degradado. */
.recorrido--plano .recorrido__velo { display: none; }

html.js-anim .recorrido--plano .recorrido__paneles,
.recorrido--plano .recorrido__paneles {
  position: static;
  display: block;
  padding: 0;
}
.recorrido--plano .recorrido__panel {
  opacity: 1;
  pointer-events: auto;
  text-align: left;
  padding: calc(var(--header-h) + 60px) 0 70px;
  background-size: cover;
  background-position: center;
}
.recorrido--plano .recorrido__panel[data-parada="0"] { background-image: linear-gradient(90deg, rgba(6,26,14,.92), rgba(6,26,14,.55)), url('../images/recorrido/momento-1.jpg'); }
.recorrido--plano .recorrido__panel[data-parada="1"] { background-image: linear-gradient(0deg, rgba(6,26,14,.92), rgba(6,26,14,.72)), url('../images/recorrido/momento-2.jpg'); }
.recorrido--plano .recorrido__panel[data-parada="2"] { background-image: linear-gradient(0deg, rgba(6,26,14,.92), rgba(6,26,14,.7)), url('../images/recorrido/momento-3.jpg'); }
.recorrido--plano .recorrido__panel--centro .recorrido__acciones { justify-content: flex-start; }

@media (max-width: 960px) {
  /* Menos recorrido: en móvil no se recorren los 468 cuadros sino
     que se disuelve entre los tres fotogramas ancla, así que no
     hace falta tanto scroll para que se vea fluido. */
  /* Con `html.js-anim` delante a propósito: el alto de escritorio
     lo pone `html.js-anim .recorrido`, y un `.recorrido` pelado
     dentro de un media query no le gana (los media queries no
     suman especificidad). Sin esto, el móvil se quedaba con los
     620vh de escritorio para un simple fundido de 3 imágenes. */
  /* Mismo ×1.5: recorrido real 400→600vh, +100svh del sticky = 700vh. */
  html.js-anim .recorrido { height: 700vh; }
  .recorrido__pasos { right: 14px; }
  .recorrido__paneles { padding: calc(var(--header-h) + 12px) 0 52px; }

  /* ── Tira horizontal en vez de columnas apiladas ──
     Apiladas, las tres métricas medían 802px: no caben en ningún
     teléfono, se salían 38px en un iPhone normal y 242px en uno
     chico. En tira solo cuenta el alto de UNA y se pasan con el
     dedo. Reseñas y artículos ya son tira por su cuenta (el
     carrusel que se desliza solo), así que esto ya no hace falta
     ahí — solo para las métricas, que siguen siendo un grid fijo. */
  .recorrido__metricas {
    display: flex;
    gap: 12px;
    margin-inline: -24px;
    padding-inline: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .recorrido__metricas::-webkit-scrollbar { display: none; }
  .recorrido__metricas > * {
    flex: 0 0 min(76%, 290px);
    scroll-snap-align: start;
  }
  .recorrido__metrica span { max-width: none; }

  /* En vertical no hay ancho para una columna a un lado: los tres
     momentos pasan a banda inferior, que es lo que mejor aguanta
     un recorte de la imagen a los lados. */
  .recorrido__panel--izq {
    align-self: end;
    transform-origin: 50% 100%;
  }
  .recorrido__panel--izq > .container > * { max-width: none; }
  .recorrido__panel--izq .recorrido__titulo { max-width: 18ch; }
  .recorrido__panel--izq .recorrido__sub { max-width: 46ch; }
  .recorrido__panel--centro { text-align: left; }
  .recorrido__panel--centro .recorrido__titulo,
  .recorrido__panel--centro .recorrido__sub { margin-inline: 0; }
  .recorrido__panel--centro .recorrido__acciones { justify-content: flex-start; }

  /* El velo lateral no sirve si el texto ya no va al lado */
  .recorrido__velo-capa--izq,
  .recorrido__velo-capa--centro {
    background: linear-gradient(0deg,
      rgba(6, 26, 14, .95) 0%,
      rgba(6, 26, 14, .88) 30%,
      rgba(6, 26, 14, .55) 55%,
      rgba(6, 26, 14, .18) 78%,
      transparent 100%);
  }
}

/* Pantallas bajas — portátiles de 720p y teléfonos pequeños.
   No es cuestión de ancho sino de alto: en un teléfono de 640px
   el hero pedía 522px de los 428 útiles y se metía debajo de la
   cabecera. Se recorta el tipo y el aire, no el contenido. */
@media (max-height: 700px) {
  .recorrido__paneles { padding: calc(var(--header-h) + 8px) 0 46px; }
  .recorrido__panel--izq .recorrido__titulo { font-size: clamp(1.55rem, 3.6vw, 2.4rem); margin-top: 12px; }
  .recorrido__panel--izq .recorrido__sub { margin-top: 12px; font-size: .95rem; }
  .recorrido__panel--izq .recorrido__acciones { margin-top: 18px; }
  .recorrido__titulo { margin-top: 12px; }
  .recorrido__sub { margin-top: 14px; }
  .recorrido__metricas { margin-top: 16px; }
  .recorrido__metrica { padding-top: 12px; }
  .recorrido__metrica strong { font-size: clamp(1.6rem, 3vw, 2.2rem); }
  .recorrido__metrica span { margin-top: 6px; font-size: .78rem; }
  .recorrido__bloque { margin-top: 14px; }
  .recorrido__acciones { margin-top: 22px; }
  .recorrido__scholar { margin-top: 12px; padding-top: 10px; }
  .recorrido__scholar-cab { font-size: .68rem; }
  .recorrido__scholar-celda { padding: 8px 10px; }
  .recorrido__scholar-celda strong { font-size: 1.1rem; }
}

/* ── El aviso de bajar, en pantallas chicas o bajas ──
   ⚠ Este bloque estaba metido dentro del @media (max-height: 700px)
     y ahí no servía para casi nada: un teléfono típico mide 740 u
     932 de alto, así que se quedaba con el tamaño de escritorio.
     Medido en el navegador: en un iPhone de 430×932 el aviso se
     encimaba con el texto del hero, que en vertical baja a la banda
     inferior. Va en su propio media query combinado. */
@media (max-width: 960px), (max-height: 700px) {
  .recorrido__guia { bottom: 12px; gap: 7px; }
  .recorrido__guia-texto { font-size: .56rem; letter-spacing: .13em; }
  .recorrido__guia-riel { height: 26px; }
  .recorrido__guia-punto { height: 7px; }
  @keyframes recorridoGuia {
    0%, 12%  { transform: translateY(-8px); opacity: 0; }
    30%      { opacity: 1; }
    75%      { transform: translateY(26px); opacity: 0; }
    100%     { transform: translateY(26px); opacity: 0; }
  }
}

/* Solo el hero le deja sitio al aviso, y solo cuando comparten el
   borde inferior. Los otros momentos no lo necesitan: para cuando
   se ven, el aviso ya se apagó. */
@media (max-width: 960px) {
  .recorrido__panel--izq { padding-bottom: 46px; }
}




/* ══════════════════════════════════════════════════════════════
   26. ESPECIALIDADES — proyección desde el centro

   Un solo centro para todo. El escenario ocupa la pantalla entera
   y el punto de fuga está en el medio: de ahí nacen las tarjetas y
   hacia afuera se van, cada una en su dirección.

   Tres momentos:

     ENTRADA   el pentágono con las cinco etiquetas y el título.
     RECORRIDO el pentágono se retira. Por cada especialidad salen
               del centro tres tarjetas —título, foto y perfil— que
               vienen de frente, SE DETIENEN en una composición
               definida, y siguen de largo hasta salirse de cuadro.
     CIERRE    el pentágono vuelve y da paso a la sección de Equipo.

   ── CÓMO SE MUEVEN LAS TARJETAS ──
   El JS solo escribe --z. Todo lo demás lo hace el CSS y la
   perspectiva del navegador. Una tarjeta puesta en el centro con
   un desvío (--ox/--oy) se proyecta cerca del punto de fuga cuando
   está lejos y se separa sola del centro al acercarse. No hay
   ninguna trayectoria programada: la dibuja la perspectiva.

   ── LA PAUSA ──
   El viaje ya no es de un tirón: tiene tres tramos —entra, se
   queda quieta, se va— y el de en medio se lleva más de la mitad.
   Sin él, lo que el visitante alcanzaba a ver de cada especialidad
   dependía de a qué velocidad hubiera scrolleado, y la sección se
   leía como un efecto de paso en vez de como contenido.

   Con la pausa a escala natural (Z = 0) hay un beneficio que no es
   solo visual: --ox/--oy dejan de ser "hacia dónde se va" y pasan a
   ser "dónde está". La composición de cada especialidad se puede
   corregir moviendo dos números y mirando el resultado, sin tener
   que imaginarse un instante concreto de una animación.

   ── EL TEXTO TAMBIÉN ES UNA TARJETA ──
   Hubo una versión con el texto en una columna aparte a la
   derecha, quieta, bajando con la página (que es como lo resuelve
   nominal.so). Se quitó: se comía un tercio de la pantalla para él
   solo y partía la sección en dos zonas, una "de escena" y otra
   "de texto". Ahora es la cuarta tarjeta del grupo y viaja con las
   demás. Una sola cosa, no dos.

   ⚠ EL REPARTO ESTÁ ATADO AL JS. La altura de la sección tiene que
     cuadrar con INTRO_FIN / CIERRE_INI de home.js: son 140svh de
     entrada, 100svh por especialidad y 80svh de cierre.
   ══════════════════════════════════════════════════════════════ */

/* Por defecto —sin JS, o con "menos movimiento" activado— esta
   sección es una lista normal. */
.hiw {
  position: relative;
  height: auto;
  background: var(--forest-deep);
  padding: clamp(56px, 6.5vw, 92px) 0;
  color: rgba(255, 255, 255, .75);
}
.hiw__sticky { position: static; }
.hiw__escena { display: none; }
.hiw__lista-plana { display: block; }

/* ── El reparto del scroll ──
     entrada        210svh
     5 × 180svh     900svh   ← una pantalla y pico y media por especialidad
     cierre         120svh
     ─────────────────────
     recorrido     1230svh
     + la pantalla anclada  100svh (sticky, no es duración, es alto fijo)
     ─────────────────────
     alto total    1330svh

   De ahí salen las dos marcas de home.js — Y NO CAMBIAN, porque son
   fracciones del recorrido, no cifras absolutas:
     INTRO_FIN  = 210/1230 = 0.1707
     CIERRE_INI = 1020/1230 = 0.9024

   ── ×1.5, PEDIDO EXPLÍCITO ──
   Antes el recorrido real eran 820svh (100·120·120·120·120·120·80,
   sumando entrada+5+cierre). Ahora es 1230svh: la MISMA coreografía
   —mismas fracciones, mismo E1/E2, mismo RETRASO/DESPUES— pero hace
   falta un 50% más de scroll físico para recorrerla entera. Nada en
   home.js tuvo que tocarse: todo ahí está escrito en fracciones de
   `self.progress` (0 a 1), así que estirar el alto de la sección ya
   estira automáticamente cuánto scroll pide cada tramo.

   Subió de 100 a 120svh por especialidad la vez pasada porque las
   tarjetas dejaron de solo pasar: se detienen. De esos 120 (ahora
   180) svh, la pausa se lleva el 56% —el rato en que la composición
   está quieta y se puede leer— y el resto se reparte entre la
   llegada y la salida. */
html.js-anim .hiw {
  height: 1330svh;
  padding: 0;
}
html.js-anim .hiw__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  z-index: 1;
}
html.js-anim .hiw__escena { display: block; }
html.js-anim .hiw__lista-plana { display: none; }

/* ── Vuelta atrás si GSAP no llegó ──
   La clase `js-anim` la pone el <head> mirando solo si el visitante
   pidió menos movimiento, no si la librería de animación cargó. Si
   el CDN falla, `js-anim` está puesta pero no hay nadie animando:
   quedaban 820svh de scroll, la escena congelada y —lo peor— la
   lista plana escondida, o sea el contenido de las cinco
   especialidades invisible.

   home.js marca la sección con `hiw--plano` cuando detecta que GSAP
   no está, y esto la devuelve al mismo estado que sin JS. Va con
   `html.js-anim` delante a propósito: sin eso no le gana en
   especificidad a las reglas de arriba. */
html.js-anim .hiw--plano { height: auto; padding: clamp(56px, 6.5vw, 92px) 0; }
html.js-anim .hiw--plano .hiw__sticky { position: static; height: auto; overflow: visible; }
html.js-anim .hiw--plano .hiw__escena { display: none; }
html.js-anim .hiw--plano .hiw__lista-plana { display: block; }

.hiw__lista-plana li { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.hiw__lista-plana li:last-child { border-bottom: 0; }


/* ── Modo edición del CMS ──
   El editor en vivo no puede depender del scroll: mientras se está
   editando, `--o` (la opacidad de cada tarjeta) nunca llega a 1
   porque nada dispara el onUpdate del ScrollTrigger que la pone en
   1 en su ventana exacta. Resultado, antes de este bloque: el
   pentágono se veía vacío dentro del editor, aunque las 15 tarjetas
   ya tenían sus atributos data-cms-caja/data-cms listos para
   arrastrar y escribir — el mismo mecanismo que ya usan las fotos
   del equipo.

   home.js pone `hiw--edicion` en la sección cuando detecta
   window.__cmeEditorVivo, en vez de arrancar el ScrollTrigger. Acá
   se la saca del scroll-jack (igual que `hiw--plano`) y además se
   aplanan las 5 disposiciones en 3D: sin esto, las 5 quedan
   exactamente superpuestas (.hiw__grupo es position:absolute;inset:0
   ×5) y las 15 tarjetas se pisarían entre sí. Se muestran en fila,
   una especialidad debajo de la otra, sin animación ni cámara —tal
   como pidió Nicolás. El marco del pentágono, la rejilla de fondo y
   los rótulos de los vértices dependen del mismo JS que no corre acá,
   así que se ocultan en este modo (no son las tarjetas que hay que
   editar, y a medio armar se ven peor que ausentes). */
html.js-anim .hiw--edicion { height: auto; padding: clamp(56px, 6.5vw, 92px) 0; }
html.js-anim .hiw--edicion .hiw__sticky { position: static; height: auto; overflow: visible; }
html.js-anim .hiw--edicion .hiw__lista-plana { display: none; }
html.js-anim .hiw--edicion .hiw__escena {
  display: block;
  position: relative;
  inset: auto;
  perspective: none;
  height: auto;
}
html.js-anim .hiw--edicion .hiw__marco,
html.js-anim .hiw--edicion .hiw__rotulos,
html.js-anim .hiw--edicion .hiw__rejilla,
html.js-anim .hiw--edicion .hiw__capa {
  display: none;
}
html.js-anim .hiw--edicion .hiw__pila {
  position: relative;
  inset: auto;
  transform-style: flat;
}
html.js-anim .hiw--edicion .hiw__grupo {
  position: relative;
  inset: auto;
  transform-style: flat;
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  padding: 22px 16px 48px;
  margin-bottom: 22px;
  border-bottom: 1px dashed rgba(255, 255, 255, .16);
}
html.js-anim .hiw--edicion .hiw__grupo:last-child { border-bottom: 0; margin-bottom: 0; }
html.js-anim .hiw--edicion .hiw__t {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  visibility: visible !important;
  --o: 1;
}
html.js-anim .hiw--edicion .hiw__cara { display: none; }


/* ── El escenario ──
   Toda la pantalla, un único punto de fuga en el centro. El JS le
   corre el punto de fuga con el scroll: es lo que hace que la
   escena se sienta mirada por una cámara que se mueve, y no por
   una foto fija que hace zoom. */
.hiw__escena {
  position: absolute;
  inset: 0;
  perspective: 1300px;
  perspective-origin: 50% 50%;
}


/* ══════════════════════════════════════════════════════════════
   FONDO — resplandor + grano

   El verde plano dejaba la escena sin aire: las tarjetas parecían
   recortadas sobre una cartulina. Dos capas baratas lo arreglan.

   El resplandor va anclado al punto de fuga (--pox/--poy, las
   mismas que usa la perspectiva), no al centro. Así el brillo se
   corre con la cámara y refuerza hacia dónde converge todo, en vez
   de ser una mancha decorativa quieta.
   ══════════════════════════════════════════════════════════════ */
.hiw__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Dos resplandores, no uno: un núcleo pequeño y fuerte donde nacen
   las tarjetas, y un halo grande y suave que llena el resto. Con
   uno solo había que elegir entre marcar el punto de fuga o llenar
   la pantalla; con dos se hacen las dos cosas y ninguna tapa nada,
   porque los dos son luz sobre el verde, no formas. */
.hiw__brillo {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(
      22% 22% at var(--pox, 50%) var(--poy, 50%),
      rgba(120, 205, 150, .30) 0%,
      rgba(60, 140, 90, .13) 45%,
      rgba(10, 45, 24, 0) 100%
    ),
    radial-gradient(
      64% 64% at var(--pox, 50%) var(--poy, 50%),
      rgba(72, 150, 96, .40) 0%,
      rgba(30, 92, 52, .23) 34%,
      rgba(10, 45, 24, 0) 74%
    );
}

/* ── Rayos que convergen al punto de fuga ──
   Es lo que más profundidad da por lo poco que cuesta: el ojo
   interpreta líneas que convergen como distancia antes que
   cualquier otra pista, y acá salen de un solo degradado cónico.
   Ni un elemento por rayo ni una línea de JS: se mueven porque el
   punto de fuga se mueve, y esa variable ya la escribía el JS.

   La máscara es lo que los hace aceptables. Sin ella se juntan
   todos en el centro formando una mancha y llegan hasta los bordes
   compitiendo con las tarjetas. Con ella solo existen en la corona
   media: aparecen al separarse y se apagan antes del borde. */
.hiw__rayos {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg at var(--pox, 50%) var(--poy, 50%),
    rgba(158, 226, 184, .085) 0deg .5deg,
    rgba(158, 226, 184, 0) .5deg 7.5deg
  );
  -webkit-mask-image: radial-gradient(58% 58% at var(--pox, 50%) var(--poy, 50%),
    transparent 0%, #000 26%, #000 60%, transparent 96%);
  mask-image: radial-gradient(58% 58% at var(--pox, 50%) var(--poy, 50%),
    transparent 0%, #000 26%, #000 60%, transparent 96%);
}
/* Grano: ruido SVG en un data-URI, sin pedir ningún archivo. Muy
   por debajo del umbral de "textura visible" — solo rompe el
   degradado para que no se le vean las bandas. */
.hiw__grano {
  position: absolute;
  inset: 0;
  opacity: .0625; /* +25% sobre el .05 original */
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ══════════════════════════════════════════════════════════════
   REJILLA DE PROFUNDIDAD

   Cuadrados de alambre viajando en Z. Es el truco de las
   ilusiones de túnel: sin nada de referencia, una tarjeta que
   crece se lee como un zoom; con marcos pasando de largo a otra
   velocidad se lee como algo que ATRAVIESA un espacio.

   ⚠ La `perspective` va acá y no más arriba: solo alcanza a los
     hijos directos. Es el mismo bug que costó media sección
     entera de depuración con las tarjetas.

   A diferencia de las tarjetas, estos NO cancelan el giro de
   cámara: giran con ella a propósito. Un cuadrado torcido en
   perspectiva es justo lo que hace leer el volumen del espacio;
   si mirara siempre al frente volvería a parecer un plano.
   ══════════════════════════════════════════════════════════════ */
.hiw__rejilla {
  position: absolute;
  inset: 0;
  z-index: 0;
  perspective: 1300px;
  perspective-origin: var(--pox, 50%) var(--poy, 50%);
  transform-style: preserve-3d;
  pointer-events: none;
}
.hiw__cubo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--rs, 100px);
  height: var(--rs, 100px);
  --o: 0;
  opacity: var(--o);
  border: 1px solid rgba(170, 230, 190, .58);
  border-radius: 3px;
  /* Un relleno mínimo: los deja de leer como alambre y los pasa a
     leer como paneles de vidrio atravesando el aire. Es tan tenue
     que no tapa nada de lo que quede detrás, pero basta para que
     al cruzarse entre ellos se note cuál está delante. */
  background: linear-gradient(150deg, rgba(150, 220, 175, .05), rgba(150, 220, 175, .012));
  transform-origin: 0 0;
  transform:
    rotateX(var(--gx, 0deg))
    rotateY(var(--gy, 0deg))
    translate(-50%, -50%)
    translate(var(--rx, 0px), var(--ry, 0px))
    translateZ(var(--rz, -2600px));
  /* Sin will-change a propósito. Son 16 cuadrados de fondo, tenues
     y siempre en movimiento: reservarles capa de composición a cada
     uno costaba memoria de vídeo desde el primer pintado, con la
     sección todavía a seis pantallas de distancia. El navegador ya
     los promueve solo cuando hacen falta, porque el transform lleva
     translateZ. */
}


/* ── Viñeta ──
   Va después de la rejilla en el HTML para que también apague los
   cuadrados de los bordes. Sin ella el fondo tiene la misma luz en
   el centro y en las esquinas, y la profundidad se pierde: lo que
   la construye es el contraste entre un centro encendido —hacia
   donde converge todo— y unos bordes en penumbra.

   De paso despega las tarjetas cuando pasan cerca del borde, que
   es justo cuando más grandes están. */
.hiw__vineta {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(118% 96% at 50% 50%,
    rgba(3, 18, 9, 0) 38%,
    rgba(3, 18, 9, .28) 72%,
    rgba(3, 18, 9, .6) 100%);
}


/* ── Pentágono ──
   +25% sobre los 520px originales, pedido explícito. */
.hiw__marco {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: min(77.5vmin, 650px);
  aspect-ratio: 1;
}

/* Misma medida y posición que .hiw__marco (el JS les aplica el
   mismo transform, ver home.js), pero en su propia capa por
   encima de .hiw__pila (z-index:2) — así ninguna tarjeta puede
   tapar el nombre de la especialidad. pointer-events:none para
   que el hueco entre etiquetas deje pasar los clics hacia las
   tarjetas de abajo; cada <a class="hiw__vertice"> reactiva su
   propio pointer-events cuando corresponde (lo hace el JS). */
.hiw__rotulos {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: min(77.5vmin, 650px);
  aspect-ratio: 1;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

/* ⚠ LA OPACIDAD DEL RECORRIDO VA ACÁ, NO EN .hiw__marco.
   Estaba en el marco y era el motivo de que "a duras penas se vean
   las especialidades": los rótulos son HIJOS del marco, así que la
   opacidad se multiplicaba. Un rótulo al 100% dentro de un marco al
   22% se veía al 22% — invisible.

   Ahora el marco no lleva opacidad nunca (solo se mueve en Z), el
   trazo se atenúa por su cuenta acá, y cada rótulo maneja la suya.
   Así el rótulo activo puede estar al 100% de verdad mientras el
   pentágono sigue tenue detrás. */
.hiw__poli {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: opacity;
}
.hiw__poli polygon {
  fill: none;
  /* .35 → 1.05: un 200% más gruesas, pedido explícito. Con
     `non-scaling-stroke` el grosor se mide en píxeles de pantalla y
     NO cambia con el escalado ni con la distancia, así que este
     número vale igual en la entrada, en el recorrido y en el
     cierre — que es justo lo que se pidió. */
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
}
/* La guía: la figura completa, muy apagada. Sin ella el trazo que
   avanza no diría nada, porque no se sabría cuánto falta. */
.hiw__poli-guia {
  stroke: rgba(255, 255, 255, .1);
}
/* El trazo que se rearma con el scroll. Dorado, para que se
   distinga de la guía de un vistazo y para que sea el mismo acento
   que ya usan los rótulos y el botón. */
.hiw__poli-trazo {
  stroke: var(--gold, #e0b458);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hiw__vertice {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(
    calc(-50% + var(--dx, 0px)),
    calc(-50% + var(--dy, 0px))
  );
  padding: 8px 17px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(10, 45, 24, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  /* Sube de .6 a .82: antes se perdía contra el verde del fondo,
     sobre todo ahora que el fondo está un 25% más presente. */
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  text-decoration: none;
  transition: color .35s ease, border-color .35s ease, background .35s ease;
}

/* Ahora es un <a>: solo se deja "agarrar" cuando las 5 etiquetas
   están en su estado base (inicio y final del recorrido). Durante
   el tramo intermedio home.js pone pointer-events:none por JS —
   este cursor de acá es nada más la pista visual para cuando SÍ
   se puede. */
.hiw__vertice { cursor: pointer; }
.hiw__vertice:hover {
  color: var(--gold);
  border-color: rgba(201, 162, 75, .4);
  background: rgba(8, 34, 18, .95);
}

/* ── El rótulo de la especialidad que está en pantalla ──
   Es el que dice de qué especialidad son las tarjetas que están por
   salir, así que tiene que ganarle claramente al resto: dorado,
   fondo más oscuro y un halo suave para despegarlo del fondo.

   El JS le pone la clase al entrar la especialidad y se la quita al
   pasar a la siguiente. */
.hiw__vertice.es-activa {
  color: var(--gold);
  border-color: rgba(201, 162, 75, .55);
  background: rgba(8, 34, 18, .95);
  box-shadow: 0 0 0 1px rgba(201, 162, 75, .18), 0 10px 34px -12px rgba(0, 0, 0, .9);
}


/* ── Las tarjetas ──
   `preserve-3d` mantiene viva la cadena hasta cada tarjeta; sin
   eso translateZ se aplanaría y sería un simple escalado.

   La pila entera gira con el scroll (lo escribe el JS). Ese giro
   es la diferencia entre un zoom y una cámara: las tarjetas dejan
   de venir de frente y empiezan a pasar de costado. */
.hiw__pila {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform;
  /* Cubre TODA la sección (inset:0) y nunca tuvo su propio
     pointer-events — solo .hiw__grupo (su hijo) lo tenía en none.
     Eso dejaba un hueco real: en cualquier punto vacío de la escena
     (donde ninguna tarjeta cae exactamente encima), el clic caía
     sobre .hiw__pila mismo en vez de atravesarla, porque pila
     heredaba el valor inicial `auto`. Cerrado acá para que todo el
     escenario sea invisible al clic salvo los enlaces reales
     (.hiw__enlace, .hiw__accion, .hiw__vertice), que se reactivan
     cada uno por su cuenta. */
  pointer-events: none;
}

/* El grupo solo agrupa. Nunca lleva opacidad propia: aplanaría el
   3D de sus tres hijas y dejarían de ordenarse por profundidad. */
.hiw__grupo {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Acá está el truco entero:
     translate(-50%, -50%)   la pone en el centro exacto
     translate(--ox, --oy)   le da su dirección de salida
     rotateX/Y(--gx/--gy)    gira la ESCENA (el giro de cámara)
     translate(-50%, -50%)   la pone en el centro exacto
     translate(--ox, --oy)   le da su dirección de salida
     translateZ(--z)         la acerca
     rotateY/X(--gyi/--gxi)  le CANCELA el giro para que mire al frente

   El giro de cámara va acá adentro y no en la pila: si estuviera
   en un ancestro, la perspectiva no lo alcanzaría (ver el aviso de
   abajo). Con `transform-origin: 0 0` el giro ocurre alrededor del
   centro de la pantalla, porque la tarjeta está anclada en
   left:50%/top:50% y su esquina superior izquierda cae justo ahí.

   ── POR QUÉ SE CANCELA EL GIRO ──
   La pila entera gira ±13° para dar la sensación de cámara. Ese
   giro también volteaba las tarjetas, y en buena parte del
   recorrido quedaban tan de lado que no se podían leer.

   La solución es la de siempre en 3D: que la tarjeta gire lo mismo
   pero al revés. Así el giro le sigue moviendo LA POSICIÓN —que es
   de donde sale el efecto de cámara— pero la cara queda siempre
   mirando al frente.

   Y no se pierde el volumen: una tarjeta corrida del centro se ve
   igual de costado, porque la perspectiva la mira en diagonal
   aunque ella esté derecha. Las caras del bloque siguen a la
   vista.

   --gy/--gx los escribe el JS UNA sola vez sobre la pila; las
   veinte tarjetas los heredan, que para eso las variables CSS
   heredan. */

/* ── POR QUÉ LA OPACIDAD NO VA ACÁ ──
   `opacity` distinto de 1 es una "propiedad de agrupación": obliga
   a transform-style:flat y aplasta el 3D de todo lo que la tarjeta
   tenga adentro. Con la opacidad puesta en .hiw__t, las caras del
   bloque se colapsaban y la tarjeta volvía a ser un papel.

   Por eso el JS escribe --o (un número) y la opacidad la aplica
   cada cara por su cuenta, que son hojas y aplastarlas da igual. */
.hiw__t {
  position: absolute;
  left: 50%;
  top: 50%;
  --fondo: 14px;
  --o: 0;
  transform-origin: 0 0;
  transform:
    rotateX(var(--gx, 0deg))
    rotateY(var(--gy, 0deg))
    translate(-50%, -50%)
    translate(var(--ox, 0px), var(--oy, 0px))
    translateZ(var(--z, -1600px))
    rotateY(var(--gyi, 0deg))
    rotateX(var(--gxi, 0deg));
  transform-style: preserve-3d;
  /* El will-change de las 20 tarjetas lo pone y lo quita el JS
     según estén en vuelo o apagadas (ver home.js). Fijo en el CSS
     eran 20 capas de composición reservadas desde el primer
     pintado, cuando en cualquier instante hay 4 en movimiento. */
}

/* ── Las caras del bloque ──
   Las cuatro salen hacia ATRÁS desde el borde de la tarjeta. No
   hay que decidir cuál mostrar: `backface-visibility: hidden` deja
   ver solo las que de verdad dan la cara a la cámara, así que una
   tarjeta a la izquierda enseña su costado derecho y una de abajo
   enseña su techo, solas, según dónde estén.

   Esto es lo que da el volumen. Nominal lo resuelve con geometría
   de Three.js; acá son cuatro divs girados 90°, que pesan nada. */
.hiw__cara {
  position: absolute;
  opacity: var(--o);
  background: #0d3a1f;
  border: 1px solid rgba(255, 255, 255, .13);
  backface-visibility: hidden;
  pointer-events: none;
}
.hiw__cara--der { top: 0;    right: 0; width: var(--fondo); height: 100%; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.hiw__cara--izq { top: 0;    left: 0;  width: var(--fondo); height: 100%; transform-origin: 0 50%;    transform: rotateY(90deg); }
.hiw__cara--sup { top: 0;    left: 0;  width: 100%; height: var(--fondo); transform-origin: 50% 0;    transform: rotateX(-90deg); }
.hiw__cara--inf { bottom: 0; left: 0;  width: 100%; height: var(--fondo); transform-origin: 50% 100%; transform: rotateX(90deg); }

/* La cara de adelante: acá vive el contenido y el aspecto */
.hiw__frente {
  position: relative;
  z-index: 1;
  opacity: var(--o);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 34px 80px -32px rgba(0, 0, 0, .85);
}

/* ── Medida única ──
   Las tres tarjetas —título, foto y perfil— comparten el mismo
   ancho y son casi cuadradas (aspect-ratio 1/1). Con la misma
   silueta se leen de una vez como un conjunto: son la misma
   especialidad viajando junta.

   Eran cuatro. El botón "Ver perfil completo" era la cuarta y
   volaba por su cuenta a otra esquina de la pantalla, lo que
   obligaba al visitante a atar el botón con la cara del médico a
   la que se refería. Ahora cuelga de la propia foto (.hiw__accion,
   más abajo) y no hay nada que atar.

   Ojo: esto vale para escritorio. En pantallas angostas (abajo,
   @media max-width:1099px) se vuelve a alto automático — un
   cuadrado de 60px no alcanza para un párrafo, así que ahí se
   prioriza que se pueda leer sobre que sea cuadrado. */
.hiw__t--titulo,
.hiw__t--perfil,
.hiw__t--foto {
  width: min(14vw, 190px);
  aspect-ratio: 1 / 1;
}

/* En pantallas angostas el 17vw no sirve: en un teléfono de 390px
   son 66px de tarjeta, menos 32 de padding = 34px útiles. Una
   palabra por renglón, y encima recortada porque .hiw__frente
   lleva overflow:hidden. Que las tarjetas se agranden al acercarse
   no lo arregla: la ampliación es visual, el texto ya se partió a
   34px y lo que crece es el pedazo roto.

   34vw da 133px en ese mismo teléfono. No más, porque a partir de
   ahí las cuatro tarjetas de una especialidad no caben sin
   encimarse y las cinco disposiciones dejan de poder ser distintas
   entre sí (a 40vw solo sobreviven 3 de los 5 ángulos de partida).
   Las posiciones del bloque de abajo están calculadas para ESTE
   ancho: si se cambia, hay que volver a correr el buscador. */
@media (max-width: 1099px) {
  .hiw__t--titulo,
  .hiw__t--perfil,
  .hiw__t--foto { width: min(34vw, 190px); }
}

/* OJO CON LOS DESVÍOS: tienen que ser bastante mayores que media
   tarjeta, o esta nunca llega a salirse de cuadro. Una tarjeta
   desviada poco queda a caballo del centro: por mucho que crezca
   siempre le queda un pedazo dentro y hay que apagarla a la fuerza
   en mitad del viaje. */
.hiw__t--foto .hiw__frente {
  position: absolute;
  inset: 0;
  background: var(--forest-2);
}
.hiw__t--foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.hiw__t-pendiente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    repeating-linear-gradient(-45deg,
      rgba(255, 255, 255, .04) 0 10px,
      transparent 10px 20px),
    var(--forest-2);
  color: rgba(255, 255, 255, .4);
}
.hiw__t-pendiente em {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: .46rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.hiw__t-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 45, 24, .95) 4%, rgba(10, 45, 24, .35) 44%, transparent 72%);
}
/* El nombre se queda a la izquierda y le cede el 46% derecho al
   botón, que cuelga de esa esquina. La letra baja respecto de antes
   por lo mismo: con la mitad del ancho, al tamaño anterior "Dr.
   Wilson Bautista" se partía en cuatro renglones. */
.hiw__t-quien {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 11px 13px 13px;
  padding-right: 46%;
  color: var(--cream);
}
.hiw__t-quien strong {
  display: block;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.24;
}
.hiw__t-quien span {
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  color: rgba(243, 237, 227, .68);
}

/* ── El botón, colgado de la foto ──
   Va FUERA de .hiw__frente y por eso puede asomar por la esquina:
   el frente lleva overflow:hidden para recortar la imagen a su
   radio, y ahí adentro el botón quedaría encerrado.

   Que sobresalga no es un adorno. Una pieza que rompe el borde de
   la tarjeta se lee como algo pegado ENCIMA de ella —una etiqueta,
   una pestaña— y no como parte de la foto; es lo que hace evidente
   que es un botón y no un pie de imagen.

   No lleva translateZ propio: hereda el plano de la tarjeta, así
   que viaja con ella, se detiene con ella en la pausa y aprovecha
   la cancelación del giro que ya hace la tarjeta. Cualquier Z
   propio lo despegaría de la foto en cuanto la cámara girara. */
/* ⚠ LA OPACIDAD ES OBLIGATORIA ACÁ.
   El JS no anima `opacity` sobre la tarjeta —aplastaría su 3D y el
   bloque volvería a verse como un papel—: escribe el número en la
   variable --o y cada pieza la aplica por su cuenta. Las cuatro
   caras y el frente ya lo hacían; este botón es una pieza nueva y
   sin esta línea se quedaba a plena luz mientras su propia tarjeta
   se desvanecía, flotando sobre el fondo sin nada debajo. */
.hiw__accion {
  position: absolute;
  right: -6%;
  bottom: -6%;
  z-index: 2;
  width: 44%;
  opacity: var(--o, 1);
  /* .hiw__grupo trae pointer-events:none de fábrica y ya no hay
     ningún JS que lo reactive por tiempo o por z-index (ver el
     comentario grande en home.js, junto a donde se escribe --z).
     Este SÍ es un enlace de verdad ("Ver perfil completo"), así que
     se reactiva acá mismo, siempre, mientras la tarjeta no esté en
     visibility:hidden. */
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--gold);
  color: var(--forest-deep);
  font-family: var(--font-ui);
  font-size: .44rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .8);
  transition: background .25s ease;
}
.hiw__accion:hover { background: #e8c063; }
.hiw__accion svg { flex-shrink: 0; }

/* ── Área de clic más generosa ──
   El botón mide 84 × 28 px proyectados. Se puede pulsar, pero está
   pegado a la esquina de una tarjeta que además se está moviendo, y
   errarle por dos píxeles es errarle. Este ::after le agrega 9 px de
   margen invisible por los cuatro lados sin cambiar nada de lo que
   se ve ni empujar a la foto. Mismo truco que el enlace de la
   tarjeta de título, en pequeño. */
.hiw__accion { cursor: pointer; }
.hiw__accion::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 12px;
}

/* 2 · Perfil. Fondo sólido: al cruzarse con las otras tiene que
   taparlas, no transparentarse. Contenido corto: se centra en el
   cuadrado en vez de quedar pegado arriba. */
.hiw__t--perfil .hiw__frente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 15px 16px;
  background: #14492a;
  border: 1px solid rgba(255, 255, 255, .15);
}
.hiw__t-rotulo {
  font-family: var(--font-ui);
  font-size: .44rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.hiw__t-texto {
  margin: 0;
  font-size: .57rem;
  line-height: 1.42;
  color: rgba(255, 255, 255, .78);
}

/* 4 · La tarjeta de la especialidad.

   Antes esto era una columna aparte a la derecha, quieta, con su
   propio espacio reservado. Ahora es una tarjeta más: viaja con
   las otras tres y comparte su suerte. La sección dejó de tener
   una zona "de texto" y otra "de escena": es una sola cosa.

   Es la que tiene MÁS contenido y a la vez la que define la
   medida de las cuatro (pedido explícito). La letra baja bastante
   para que el número + encabezado + párrafo + enlace quepan en un
   cuadrado sin recortar ninguno. */
.hiw__t--titulo .hiw__frente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 15px;
  background: #103d22;
  border: 1px solid rgba(255, 255, 255, .14);
  /* Solo color: la opacidad la maneja --o cuadro a cuadro y no
     puede llevar transición o iría siempre medio paso atrás. */
  transition: background .25s ease, border-color .25s ease;
}
.hiw__n {
  display: block;
  font-family: var(--font-ui);
  font-size: .4rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold);
}
.hiw__titulo {
  margin: 6px 0 5px;
  font-family: var(--font-serif);
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.22;
  color: #fff;
}
.hiw__t--titulo p {
  margin: 0;
  font-size: .5rem;
  line-height: 1.42;
  color: rgba(255, 255, 255, .7);
}
.hiw__enlace {
  margin-top: 6px;
  font-size: .48rem;
  align-self: flex-start;
  cursor: pointer;
  /* Mismo trato que .hiw__accion: .hiw__grupo trae pointer-events:
     none de fábrica, y este SÍ es el enlace real ("Ver
     especialidad"), así que se reactiva acá, siempre, mientras la
     tarjeta no esté oculta. Ver el comentario grande en home.js. */
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════
   TODA LA TARJETA DE TÍTULO ES EL ENLACE

   ── QUÉ ESTABA PASANDO ──
   Medido con scripts/simular-hiw-clic.mjs (reproduce la matemática
   de home.js y la proyección en perspectiva de este archivo):

     · la tarjeta se ve a 185 px en pantalla…
     · …y el único punto que navegaba era el <a>, de 86 × 13 px.
       O sea el 0,3% de la superficie de la tarjeta.
     · el otro 99,7% caía sobre el <article> de la tarjeta, no sobre
       un enlace: se tragaba el clic y no hacía nada (esto fue antes
       de que .hiw__t dejara de recibir pointer-events por JS —
       ahora ese 99,7% ni siquiera intercepta, ver home.js).

   Esa es la mitad del "el click no hace nada": no es que el clic no
   llegue, es que llega a un elemento que no lleva a ninguna parte.

   El simulador descartó de paso las sospechas de apilamiento: en las
   cinco disposiciones, en plena pausa, NADA cae encima del enlace
   (0 solapes). Ni .hiw__rotulos (pointer-events:none, y sus vértices
   los apaga el JS), ni .hiw__capa (pointer-events:none, heredado por
   intro y cierre), ni .hiw__marco (pinta debajo de .hiw__pila, que
   tiene z-index:2). Y --z durante la pausa es 0, escala 1: la
   tarjeta está exactamente en el plano natural, no fuera de rango.

   ── LA SOLUCIÓN ──
   El truco del "enlace estirado": un ::after del propio <a> que
   cubre la cara entera. No agrega un elemento, no cambia el HTML, no
   toca el 3D (es un hijo del <a>, dentro de .hiw__frente, que ya es
   el contenedor posicionado) y el <a> sigue siendo uno solo, con su
   texto editable desde el CMS.

   Como el área pertenece al <a>, `:hover` se dispara al pasar por
   CUALQUIER punto de la tarjeta: la flecha se desplaza y el texto se
   aclara aunque el puntero esté sobre el título.
   ══════════════════════════════════════════════════════════════ */
.hiw__enlace::after {
  content: '';
  position: absolute;   /* contra .hiw__t--titulo .hiw__frente */
  inset: 0;
  z-index: 2;
  border-radius: 14px;
}

/* En modo edición el área estirada se apaga.
   Si no, tapa el número, el título y el párrafo de la tarjeta —que
   ahora son editables, cada uno con su data-cms— y el cliente no
   tendría cómo hacerles clic para escribir encima. Fuera del modo
   edición vuelve, que es cuando importa que la tarjeta entera lleve
   a la página de la especialidad. `html.cme-editando` la pone
   assets/js/editor.js. */
html.cme-editando .hiw__enlace::after { display: none; }

/* El hover de la tarjeta entera. Sin esto el visitante no tiene
   forma de saber que la tarjeta completa es pulsable. */
.hiw__t--titulo:hover .hiw__frente {
  background: #15522f;
  border-color: rgba(199, 154, 58, .5);
}
.hiw__t--titulo:hover .hiw__titulo { color: #fff; }
.hiw__t--titulo:hover .hiw__n { color: #e3c179; }



/* ══════════════════════════════════════════════════════════════
   LAS CINCO DISPOSICIONES

   Ninguna especialidad repite el reparto de la anterior. Es lo
   que hace que valga la pena seguir scrolleando: si las cinco
   salieran igual, a la segunda ya se sabe lo que viene.

   Cada disposición tiene que cumplir dos cosas a la vez:
     · verse entera en algún momento del viaje
     · alcanzar a cruzar el borde de la pantalla

   Eso limita mucho dónde se puede poner cada una. Los números
   están medidos con outputs/medir-geometria.mjs, que las prueba
   las cinco en ocho tamaños de pantalla. Si se toca uno, hay que
   volver a correrlo.

   ── AHORA ESTOS NÚMEROS SON POSICIONES, NO DIRECCIONES ──
   Antes --ox/--oy solo decían HACIA DÓNDE se iba una tarjeta: el
   viaje era de un tirón y la tarjeta no se paraba en ninguna parte,
   así que lo que se veía dependía de a qué velocidad hubiera
   scrolleado cada visitante.

   Ahora la tarjeta se detiene en medio del viaje, y se detiene a
   escala natural (Z = 0). A esa escala la proyección en perspectiva
   es la identidad: el centro de la tarjeta cae EXACTAMENTE en
   (--ox, --oy) respecto del centro de la pantalla. O sea que estos
   pares son literalmente dónde descansa cada tarjeta, y para mover
   una composición basta con cambiarlos.

   (La cámara sigue girando durante la pausa, así que en la práctica
   la escala anda entre 0.91× y 1.00× y la posición se corre unos
   pocos píxeles. Es a propósito: congelar también el giro dejaría
   la escena como una foto pegada.) */
@media (min-width: 1100px) {
  /* ── DE DÓNDE SALEN ──
     No están puestos a ojo. Los encontró outputs/buscar-disposiciones.mjs
     probando 7200 repartos contra las 5 ranuras × 5 pantallas, y
     quedándose solo con los que cumplen las CINCO cosas a la vez:

       · durante TODA la pausa la tarjeta está entera dentro de la
         pantalla (no basta con que se vea entera en un instante)
       · durante toda la pausa se ve a tamaño de lectura (≥ 0.85×)
       · ninguna pareja del grupo se pisa
       · al apagarse ya está saliendo, no se esfuma en el aire
       · ninguna llega a tapar más de media pantalla

     Las 3 tarjetas van repartidas a 120° sobre una elipse (Rx en vw,
     Ry en vh) girada φ grados. A 120° quedan siempre a un tercio de
     vuelta una de otra: por eso la pausa se lee como un triángulo
     compuesto y no como tres cosas que quedaron por ahí.

     Cada especialidad usa un φ DISTINTO —90°, 0°, 60°, 15°, 105°—
     y por eso ninguna repite la figura de otra.

     ── POR QUÉ NO SON SIMÉTRICAS ──
     El giro de cámara no solo mueve las tarjetas de costado: también
     las mueve en Z. En la primera mitad del recorrido empuja hacia
     el fondo lo que esté a la derecha y hacia adelante lo que esté a
     la izquierda, y en la segunda mitad al revés. Por eso cada
     reparto va corrido del centro (el cx del buscador) en una
     dirección distinta según en qué punto del recorrido caiga. No
     hay que "enderezarlos" a ojo: se romperían. */

  /* 1 · Reumatología — título a la derecha, columna a la izquierda (φ 0°) */
  [data-hiw-paso="0"] .hiw__t--titulo { --ox:  30vw; --oy:   0vh; }
  [data-hiw-paso="0"] .hiw__t--foto   { --ox: -24vw; --oy:  28vh; }
  [data-hiw-paso="0"] .hiw__t--perfil { --ox: -24vw; --oy: -28vh; }

  /* 2 · Medicina Interna — diagonal ascendente (φ 105°) */
  [data-hiw-paso="1"] .hiw__t--titulo { --ox: -23vw; --oy: -21vh; }
  [data-hiw-paso="1"] .hiw__t--foto   { --ox:  -7vw; --oy:  28vh; }
  [data-hiw-paso="1"] .hiw__t--perfil { --ox:  37vw; --oy:  -8vh; }

  /* 3 · Hematología — triángulo tumbado, foto al centro (φ 15°) */
  [data-hiw-paso="2"] .hiw__t--titulo { --ox: -33vw; --oy:  16vh; }
  [data-hiw-paso="2"] .hiw__t--foto   { --ox:  22vw; --oy:   6vh; }
  [data-hiw-paso="2"] .hiw__t--perfil { --ox: -19vw; --oy: -22vh; }

  /* 4 · Medicina Alternativa — casi vertical, corrida a la izquierda (φ 75°) */
  [data-hiw-paso="3"] .hiw__t--titulo { --ox:   7vw; --oy: -23vh; }
  [data-hiw-paso="3"] .hiw__t--foto   { --ox: -33vw; --oy:  -8vh; }
  [data-hiw-paso="3"] .hiw__t--perfil { --ox:  -4vw; --oy:  31vh; }

  /* 5 · Medicina General — triángulo apoyado arriba (φ 30°) */
  [data-hiw-paso="4"] .hiw__t--titulo { --ox: -11vw; --oy:  16vh; }
  [data-hiw-paso="4"] .hiw__t--foto   { --ox:  10vw; --oy: -32vh; }
  [data-hiw-paso="4"] .hiw__t--perfil { --ox:  31vw; --oy:  16vh; }
}


/* ── Entrada y cierre ──
   Su propia perspectiva: están centrados en la pantalla entera. */
.hiw__capa {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1300px;
  pointer-events: none;
  z-index: 4;
}
.hiw__intro,
.hiw__cierre {
  grid-area: 1 / 1;
  width: min(86%, 680px);
  text-align: center;
  color: #fff;
  opacity: 0;
  will-change: transform, opacity;
}
.hiw__intro .h-xl,
.hiw__cierre .h-xl { color: #fff; margin-top: 16px; }


/* ── Pantallas verticales ──
   Una tarjeta ancha no puede salirse por los lados: no le queda
   camino. Acá se estrechan y se reparten —una a la izquierda, otra
   a la derecha, el botón hacia abajo— para que cada una tenga por
   dónde irse.

   La regla: el ancho tiene que quedar por debajo del 39% del ancho
   de pantalla. Por encima de eso, entre que la tarjeta tiene que
   verse entera en algún momento y que después tiene que cruzar el
   borde, no hay ningún desvío que cumpla las dos cosas. */
@media (max-width: 1099px) {
  .hiw__marco { width: min(92.5vmin, 500px); }   /* +25%, igual que en escritorio */
  .hiw__rotulos { width: min(92.5vmin, 500px); }
  .hiw__vertice { font-size: .66rem; padding: 6px 12px; letter-spacing: .05em; }

  .hiw__t { --fondo: 10px; }

  /* ── El cuadrado se deshace acá ──
     Casi-cuadrado es un pedido de escritorio: en una pantalla
     angosta el ancho de la tarjeta ya es chico de por sí (sigue
     siendo un % del ancho, como siempre), y forzar la altura a
     igualarlo dejaría un cuadrado de un puñado de píxeles sin
     espacio para el párrafo. Acá vuelve a ser alto automático,
     como antes de unificar las cuatro. */
  .hiw__t--titulo,
  .hiw__t--perfil {
    aspect-ratio: auto;
  }
  .hiw__t--titulo .hiw__frente,
  .hiw__t--perfil .hiw__frente {
    position: relative;
    inset: auto;
  }

  .hiw__t--titulo .hiw__frente { padding: 16px 17px; }
  .hiw__n { font-size: .5rem; }
  .hiw__titulo { font-size: 1.08rem; margin: 9px 0 8px; }
  .hiw__t--titulo p { font-size: .78rem; line-height: 1.5; }
  .hiw__enlace { margin-top: 13px; font-size: .74rem; }

  /* Acá el nombre NO se aparta a un lado: se sube.
     En escritorio le sobra ancho para cederle casi la mitad al
     botón, pero en una tarjeta de 133px el 44% que quedaría son 60
     píxeles y "Dr. Wilson" ya no cabe en un renglón. Así que el
     botón se queda abajo a la derecha y el nombre se levanta por
     encima con padding-bottom, conservando el ancho entero. */
  .hiw__t-quien { padding: 12px 13px 34px; }
  .hiw__t-quien strong { font-size: .78rem; }
  .hiw__t-quien span { font-size: .62rem; }

  .hiw__t--perfil .hiw__frente { padding: 18px 19px; gap: 9px; }
  .hiw__t-rotulo { font-size: .48rem; }
  .hiw__t-texto { font-size: .8rem; line-height: 1.5; }

  /* En una tarjeta de 133px el botón a dos renglones queda ilegible.
     Acá va a un solo renglón, sin flecha —el color dorado ya dice
     que es pulsable— y algo más ancho en proporción. */
  .hiw__accion {
    width: 56%;
    right: -5%;
    bottom: -5%;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: .54rem;
    justify-content: center;
    text-align: center;
  }
  .hiw__accion svg { display: none; }

  /* Estos desvíos salen del mismo buscador que los de escritorio,
     corrido con --movil: mismas cinco exigencias, pero contra las
     pantallas de 1024 para abajo y con las alturas de acá (solo la
     foto sigue cuadrada; título y perfil tienen alto automático).

     Hacen falta números propios y no sirve reescalar los de
     escritorio: acá la tarjeta ocupa el 34% del ancho en vez del
     17%, y el giro de cámara se reduce a un tercio.

     También acá cada especialidad usa un φ distinto —105°, 45°, 60°,
     15°, 0°— así que ninguna repite la figura de otra.

     ⚠ Estos números salen de ALTURAS MEDIDAS EN CHROME, no
       estimadas. La primera versión usaba una estimación y se
       equivocaba por más de 100px en la tarjeta de título, que en
       móvil crece o se encoge según lo largo que sea su texto. El
       resultado fue una disposición que el buscador daba por buena
       y que en un teléfono de 360px se salía de la pantalla. Si se
       cambia el texto de una especialidad, hay que volver a medir. */
  /* 1 · Reumatología (φ 105°) */
  [data-hiw-paso="0"] .hiw__t--titulo { --ox:  16vw; --oy:  -8vh; }
  [data-hiw-paso="0"] .hiw__t--foto   { --ox: -29vw; --oy: -21vh; }
  [data-hiw-paso="0"] .hiw__t--perfil { --ox: -17vw; --oy:  28vh; }

  /* 2 · Medicina Interna (φ 45°) */
  [data-hiw-paso="1"] .hiw__t--titulo { --ox:  27vw; --oy:  23vh; }
  [data-hiw-paso="1"] .hiw__t--foto   { --ox: -13vw; --oy:   8vh; }
  [data-hiw-paso="1"] .hiw__t--perfil { --ox:  16vw; --oy: -31vh; }

  /* 3 · Hematología (φ 60°) */
  [data-hiw-paso="2"] .hiw__t--titulo { --ox:  28vw; --oy: -25vh; }
  [data-hiw-paso="2"] .hiw__t--foto   { --ox:  28vw; --oy:  25vh; }
  [data-hiw-paso="2"] .hiw__t--perfil { --ox: -26vw; --oy:   0vh; }

  /* 4 · Medicina Alternativa (φ 15°) */
  [data-hiw-paso="3"] .hiw__t--titulo { --ox: -15vw; --oy: -25vh; }
  [data-hiw-paso="3"] .hiw__t--foto   { --ox: -29vw; --oy:  18vh; }
  [data-hiw-paso="3"] .hiw__t--perfil { --ox:  26vw; --oy:   7vh; }

  /* 5 · Medicina General (φ 0°) */
  [data-hiw-paso="4"] .hiw__t--titulo { --ox: -28vw; --oy:  23vh; }
  [data-hiw-paso="4"] .hiw__t--foto   { --ox:  26vw; --oy:   0vh; }
  [data-hiw-paso="4"] .hiw__t--perfil { --ox: -28vw; --oy: -23vh; }
}

@media (max-width: 560px) {
  .hiw__t { --fondo: 8px; }
  .hiw__t--titulo .hiw__frente { padding: 14px 16px; }
  .hiw__t--perfil .hiw__frente { padding: 14px 16px; }
  .hiw__titulo { font-size: .9rem; }
  .hiw__t--titulo p, .hiw__t-texto { font-size: .7rem; }

  /* ── Fuera la descripción de la especialidad ──
     Medido en el navegador, en un teléfono de 360px: la tarjeta de
     título llegaba a 331px de alto —el 45% de la pantalla— porque
     ese párrafo se partía en trece renglones de ocho caracteres.
     No es que quedara apretado: a ese ancho no se puede leer.

     Sin él la tarjeta baja a la altura de las otras dos y la
     composición vuelve a caber. No se pierde la información: está
     entera en la página de la especialidad, a un toque del enlace
     que queda justo debajo, y en la lista plana que ve quien pidió
     menos movimiento. */
  .hiw__t--titulo p { display: none; }
  .hiw__titulo { margin-bottom: 0; }
}

/* No hace falta una regla para `prefers-reduced-motion`: en ese
   caso el script del <head> no agrega la clase `js-anim`, así que
   nunca se aplica nada de lo de arriba y queda la lista plana,
   que es el estado por defecto. */



/* ══════════════════════════════════════════════════════════════
   27. EQUIPO — grilla de retratos

   Réplica de la grilla de coffee-tech.com/about, medida en vivo:
   tarjeta de 262×320 (retrato ~4:5), radio 11px, separación de
   37px, foto que llena la tarjeta y nombre + cargo superpuestos
   abajo en texto claro.

   Única diferencia deliberada: allá son 4 columnas; acá son 3,
   porque con 9 personas una grilla de 4 deja una última fila con
   una sola tarjeta suelta. 3×3 queda pareja.
   ══════════════════════════════════════════════════════════════ */

.equipo9__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 37px;
  margin-top: 52px;
}

.equipo9__card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 262 / 320;
  border-radius: 11px;
  overflow: hidden;
  background: var(--forest-2);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.equipo9__card:hover { transform: translateY(-5px); box-shadow: var(--surface-elev); }

.equipo9__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.equipo9__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: transform 1s var(--ease-out);
}
/* Jenny Cobos: en la foto original ella está corrida hacia la
   derecha del encuadre, así que "center" la deja casi fuera de
   cuadro por la izquierda. Se corre el encuadre hacia donde está. */
.equipo9__foto--jenny img {
  object-position: 75% 15%;
}
.equipo9__card:hover .equipo9__foto img { transform: scale(1.05); }

/* Espacio reservado mientras no llega la foto real */
.equipo9__pendiente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    repeating-linear-gradient(-45deg,
      rgba(255, 255, 255, .035) 0 10px,
      transparent 10px 20px),
    var(--forest-2);
  color: rgba(255, 255, 255, .38);
}
.equipo9__pendiente em {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.equipo9__velo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgba(10, 45, 24, .92) 6%, rgba(10, 45, 24, .3) 46%, transparent 74%);
}

.equipo9__nombre {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 26px 32px;
  color: var(--cream);
}
.equipo9__nombre strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}
.equipo9__nombre span {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(243, 237, 227, .68);
}

/* Botón de contacto en la esquina, como en la referencia */
.equipo9__accion {
  position: absolute;
  right: 18px;
  bottom: 22px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--gold);
  transition: background .35s ease, color .35s ease, transform .45s var(--ease-out);
}
.equipo9__card:hover .equipo9__accion {
  background: var(--gold);
  color: var(--forest-deep);
  transform: translateY(-2px);
}

/* Acá había una copia exacta del bloque de tarjetas de
   especialidad de la línea 3638 — copiada por error en medio de la
   sección de EQUIPO, y encima pisando la regla que debía bajar la
   grilla a una columna. Se quedaba a dos columnas de ~145px en un
   teléfono, con 81px útiles para "Director Científico · Medicina
   Interna y Reumatología". */
@media (max-width: 900px) { .equipo9__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 620px) { .equipo9__grid { grid-template-columns: 1fr; gap: 18px; } }

.e404__num {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 16vw, 10rem);
  line-height: 1;
  color: var(--sage);
  letter-spacing: -.04em;
}
.e404__titulo { margin: 10px 0 16px; color: var(--forest-2); }
.e404__texto { color: var(--muted-c); max-width: 46ch; margin: 0 auto 32px; line-height: 1.7; }
.e404__botones { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   SCHOLAR — panel de Google Scholar (portado de components/Scholar.js)
   Migrado desde el bloque <style jsx> del componente React al
   convertir el blog a HTML estático.
   ══════════════════════════════════════════════════════════════ */
.scholar__cab { text-align: center; max-width: 62ch; margin: 0 auto; }
.scholar__titulo { margin: 14px 0 12px; color: var(--forest-2); }
.scholar__sub { color: var(--muted-c); }

.scholar__tarjeta {
  margin-top: 44px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: var(--surface-border);
  background: var(--surface-card);
  box-shadow: var(--surface-elev);
}

.scholar__autor {
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: #fff;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.scholar__avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
  border: 3px solid rgba(255, 255, 255, .28);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .7);
}
.scholar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.scholar__nombre { font-family: var(--font-serif); font-size: .98rem; line-height: 1.3; }
.scholar__afiliacion { font-size: .78rem; color: rgba(255, 255, 255, .68); }
.scholar__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.scholar__tags span {
  font-size: .64rem;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .14);
}

.scholar__grafico { width: 100%; margin-top: 6px; }
.scholar__grafico-etq {
  display: block;
  text-align: center;
  font-size: .62rem;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 6px;
}
.scholar__barras {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 44px;
}
.scholar__barra {
  width: 11px;
  border-radius: 2px 2px 0 0;
  background: rgba(255, 255, 255, .45);
  transition: background .25s ease;
}
.scholar__barra:hover { background: var(--gold); }
.scholar__anios { display: flex; gap: 3px; justify-content: center; margin-top: 4px; }
.scholar__anios span { width: 11px; font-size: .56rem; text-align: center; color: rgba(255, 255, 255, .5); }

.scholar__link {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: .72rem;
  transition: background .25s ease;
}
.scholar__link:hover { background: rgba(255, 255, 255, .18); }

.scholar__cuerpo { display: flex; flex-direction: column; min-width: 0; }
.scholar__metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: var(--surface-border);
}
.scholar__metricas div {
  text-align: center;
  padding: 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.scholar__metricas div:not(:last-child) { border-right: var(--surface-border); }
.scholar__metricas strong { font-family: var(--font-serif); font-size: 1.35rem; color: var(--forest-2); }
.scholar__metricas span { font-size: .7rem; color: var(--muted-2); }

.scholar__carrusel {
  max-height: 250px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.scholar__carrusel:focus-within .scholar__articulos { animation-play-state: paused; }
.scholar__articulos {
  list-style: none;
  margin: 0; padding: 0;
  animation: scholarCarrusel var(--scholar-dur, 26s) linear infinite;
}
.scholar__articulos--estatico { animation: none; max-height: 250px; overflow-y: auto; }
@keyframes scholarCarrusel {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .scholar__articulos { animation: none; }
  .scholar__carrusel {
    overflow-y: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}
.scholar__articulos li {
  padding: 13px 22px;
  border-bottom: 1px solid var(--line-2);
}
.scholar__articulos li:last-child { border-bottom: none; }
.scholar__articulos a, .scholar__articulos span {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.5;
  text-decoration: none;
}
.scholar__articulos a:hover { color: var(--forest); }
.scholar__articulo-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.scholar__articulo-meta span { font-size: .74rem; color: var(--muted-2); }
.scholar__articulo-citas { color: var(--forest); font-weight: 600; }
.scholar__articulo-rev {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .scholar__tarjeta { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   CONTACTO — grilla de datos + formulario (portado de pages/contacto.js)
   Migrado desde el bloque <style jsx> de la página al convertir a
   HTML estático.
   ══════════════════════════════════════════════════════════════ */
.canal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 30px;
  border-radius: var(--radius-card);
  border: var(--surface-border);
  background: var(--surface-card);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.canal:hover { transform: translateY(-5px); box-shadow: var(--surface-elev); }
.canal--destacado {
  background: var(--forest-2);
  border-color: var(--forest-2);
  color: #fff;
}
.canal__etq {
  margin-top: 20px;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.canal--destacado .canal__etq { color: var(--gold); }
.canal__titulo { margin: 9px 0 6px; color: var(--forest-2); }
.canal--destacado .canal__titulo { color: #fff; }
.canal__valor { color: var(--muted-c); font-size: .93rem; }
.canal--destacado .canal__valor { color: rgba(255, 255, 255, .74); }
.canal__ico {
  position: absolute;
  top: 30px;
  right: 28px;
  color: var(--gold);
  transition: transform .4s var(--ease-out);
}
.canal:hover .canal__ico { transform: translateX(4px); }

.contacto-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; align-items: start; }

.datos { display: flex; flex-direction: column; gap: 20px; }
.datos__tarjeta {
  background: #fff;
  border: var(--surface-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.datos__mapa { padding: 0; }
.datos__marco { position: relative; height: 230px; background: var(--cream-2); }
.datos__marco iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.15) contrast(1.02); }
.datos__marco-link {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--forest-2);
  font-size: .8rem;
  font-weight: 600;
  box-shadow: var(--surface-elev);
  transition: transform .3s var(--ease-out), background .3s ease, color .3s ease;
}
.datos__marco-link:hover { background: var(--forest); color: #fff; transform: translateY(-2px); }
.datos__marco-link svg { flex-shrink: 0; }
.datos__cuerpo { padding: 20px 22px; }
.datos__tarjeta:not(.datos__mapa) { padding: 20px 22px; }
.datos__etq {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.datos__etq svg { color: var(--forest); }
.datos__dir {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.datos__linea { margin: 10px 0 0; font-size: .9rem; color: var(--ink-2); }
.datos__linea a { color: var(--forest); font-weight: 600; }
.datos__horario { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.datos__horario div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .88rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.datos__horario div:last-child { border-bottom: none; padding-bottom: 0; }
.datos__horario span { color: var(--muted-c); }
.datos__horario strong { color: var(--forest-2); font-weight: 600; }

.form-wrap__form {
  background: var(--ivory);
  border: var(--surface-border);
  border-radius: var(--radius-card);
  padding: 40px;
}
.form__titulo { margin: 14px 0 8px; color: var(--forest-2); }
.form__sub { margin-bottom: 24px; }

.form { display: flex; flex-direction: column; gap: 20px; }
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label {
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
}
.campo input, .campo select, .campo textarea {
  padding: 13px 16px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(26, 107, 58, .1);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--muted-2); }

.consent { display: flex; gap: 11px; align-items: flex-start; }
.consent input { margin-top: 3px; accent-color: var(--forest); flex-shrink: 0; }
.consent span { font-size: .82rem; color: var(--muted-c); line-height: 1.6; }

.ok {
  background: var(--ivory);
  border: var(--surface-border);
  border-radius: var(--radius-card);
  padding: 56px 40px;
  text-align: center;
}
.ok__ico {
  display: inline-grid;
  place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: rgba(46, 158, 87, .12);
  color: var(--ok);
  margin-bottom: 22px;
}
.ok__titulo { color: var(--forest-2); }
.ok__texto { margin: 14px 0 26px; color: var(--muted-c); line-height: 1.7; }
.ok__texto a { color: var(--forest); font-weight: 600; }

@media (max-width: 960px) {
  .contacto-grid { grid-template-columns: 1fr; gap: 24px; }
  .form-wrap__form { padding: 28px; }
  .form__fila { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   TEXTOS CON FORMATO PUESTO DESDE EL CMS

   El editor guarda el formato dentro del propio bloque, como
   HTML: <b>, <a>, y <span style="color:…"> para color, tamaño y
   tipografía. Todo eso funciona solo, sin ninguna regla acá.

   La excepción es la ALINEACIÓN. Un bloque editable puede ser un
   <p> o un <h3> del sitio, y lo que se guarda en la base es su
   contenido, no el elemento — así que la alineación no puede ir
   en el elemento: se perdería al guardar. Se guarda envolviendo
   el contenido en un <span style="text-align:…">, y un <span> en
   línea no alinea nada. Esta regla es la que lo convierte en
   bloque, y solo dentro de un campo editable del CMS.
   ══════════════════════════════════════════════════════════════ */

[data-cms] > span[style*="text-align"] { display: block; }


/* ══════════════════════════════════════════════════════════════
   20. SECCIONES NUEVAS DE ESPECIALIDAD (2026-08-24)

   Cuatro piezas probadas por separado en pruebas-secciones/ y
   aprobadas ahí antes de integrarse acá. El JS que las anima vive
   en assets/js/secciones-nuevas.js (aparte de main.js para no
   ensuciarlo) y se activa solo si encuentra el marcado de cada
   una — misma filosofía que main.js: nada se rompe si una página
   no trae alguna de las cuatro.

      20.1 Header — bloques que revelan el título/párrafo
      20.2 Servicios — columnas en zigzag con inclinación al scroll
      20.3 Condiciones — paneles que se expanden
      20.4 Médico — tarjeta que sube y cubre a la anterior
   ══════════════════════════════════════════════════════════════ */

/* ── 20.1 HEADER — bloques ──
   Ver assets/js/secciones-nuevas.js para cómo se arman las barras.
   `.bloques` va en el <h1> y el <p> del hero (esp-hero__titulo y
   esp-hero__parrafo); el resto del hero sigue con el fundido de
   siempre (data-hero-anim, en main.js). */
.bloques { position: relative; }
.bloques .palabra { opacity: 0; will-change: opacity; }
.bloques__barra {
  position: absolute;
  pointer-events: none;
  background: var(--bloque-color, var(--gold));
  border-radius: 2px;
  clip-path: inset(0 calc(var(--a, 100) * 1%) 0 calc(var(--b, 0) * 1%));
  will-change: clip-path;
}
@media (prefers-reduced-motion: reduce) {
  .bloques .palabra { opacity: 1 !important; }
  .bloques__barra { display: none !important; }
}
/* Mientras se edita en el panel del CMS el efecto estorba —
   taparía el texto que se está escribiendo. */
.cme-editando .bloques .palabra { opacity: 1 !important; }
.cme-editando .bloques__barra { display: none !important; }

/* ── 20.2 SERVICIOS — timeline editorial ──
   Inspirado en la trayectoria del sitio del Dr. Wilson: un punto
   por paso, conectado por una guía gris; una capa dorada se dibuja
   encima a medida que se hace scroll (secciones-nuevas.js escribe
   --seg de 0 a 1 en cada item, leyendo cuánto de ESE tramo ya pasó
   por el viewport — no depende de medir la sección completa, así
   que el CMS puede agregar o quitar pasos sin que nadie recalcule
   nada). El número grande es una marca de agua, no un contador. */
.serv-timeline {
  margin-top: 32px;
  max-width: var(--maxw-contenido);
  margin-inline: auto;
}
.serv-timeline__item {
  position: relative;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.serv-timeline__item:not(:last-child) { margin-bottom: 24px; }
.serv-timeline__item:not(:last-child)::before,
.serv-timeline__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 20px;
  bottom: -24px;
  width: 2px;
}
.serv-timeline__item:not(:last-child)::before { background: var(--line); }
.serv-timeline__item:not(:last-child)::after {
  background: var(--gold);
  transform: scaleY(var(--seg, 0));
  transform-origin: top;
  will-change: transform;
}
.serv-timeline__marker {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--ivory);
  position: relative;
  z-index: 1;
  transition: border-color .4s ease, background-color .4s ease;
}
.serv-timeline__item.is-recorrido .serv-timeline__marker { border-color: var(--gold); background: var(--gold); }
.serv-timeline__body { position: relative; flex: 1; min-width: 0; }
.serv-timeline__item:not(:last-child) .serv-timeline__body {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 560px) {
  .serv-timeline__item { gap: 14px; }
  .serv__n { position: static; display: block; margin-bottom: 4px; font-size: 1.6rem; }
  .serv__nombre, .serv__desc { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .serv-timeline__item:not(:last-child)::after { transform: scaleY(1); }
}

/* ── 20.3 CONDICIONES — paneles que se expanden ──
   Reemplaza la grilla de tarjetas por una fila de paneles: uno
   abierto y el resto en franjas con el nombre en vertical. PC:
   hover abre. Táctil: primer toque abre, segundo toque entra al
   artículo (ver secciones-nuevas.js). Ancho por flex-grow, no por
   porcentaje — el CMS puede agregar o quitar paneles sin que nadie
   recalcule nada. */
.cond-fila {
  display: flex;
  gap: 8px;
  height: 460px;
  max-width: var(--maxw-contenido);
  margin: 34px auto 0;
}
.cond-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: var(--surface-border);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  cursor: pointer;
  transition: flex-grow .55s var(--ease-out), box-shadow .55s var(--ease-out),
              border-color .35s ease;
}
.cond-panel.is-abierto {
  flex-grow: 4.5;
  box-shadow: var(--surface-elev);
  border-color: var(--line);
}
.cond-panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Imagen — degradado de marca solo de fondo, por si el panel
   todavía no tiene foto propia (placeholder). Una vez hay <img>,
   el degradado queda tapado por completo y no se ve. */
.cond-panel__img {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-2) 55%, var(--forest-deep) 100%);
  display: grid; place-items: center;
}
.cond-panel__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cond-panel__pendiente {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  border: 1px dashed rgba(255, 255, 255, .35);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  writing-mode: vertical-rl;
  white-space: nowrap;
}
.cond-panel.is-abierto .cond-panel__pendiente { writing-mode: horizontal-tb; }

/* Sin velo oscuro: con fotos reales de por medio, el degradado
   tapaba tanto la imagen como el texto. El contraste del texto
   queda solo a cargo de text-shadow en .cond-panel__nombre / __desc. */

.cond-panel__vert {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 18px 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .92rem;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .3s ease;
}
.cond-panel.is-abierto .cond-panel__vert { opacity: 0; pointer-events: none; }

.cond-panel__cuerpo {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s var(--ease-out) .12s, transform .55s var(--ease-out) .12s;
  pointer-events: none;
}
.cond-panel.is-abierto .cond-panel__cuerpo { opacity: 1; transform: none; pointer-events: auto; }
.cond-panel__cuerpo .cond__etq { color: var(--gold); }
.cond-panel__nombre {
  color: #fff;
  margin: 10px 0 8px;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 14px rgba(0, 0, 0, .4);
}
.cond-panel__desc {
  color: rgba(255, 255, 255, .93);
  font-size: .92rem;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 12px rgba(0, 0, 0, .4);
}
.cond-panel__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
}
.cond-panel__link:hover { gap: 11px; }
.cond-panel__link svg { transition: transform .3s var(--ease-out); }
.cond-panel__toque {
  display: none;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
}
/* Aviso chico en las condiciones que todavía no tienen artículo
   propio en el blog — para no prometer un enlace que no existe. */
.cond-panel__sinarticulo {
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-style: italic;
  color: rgba(255, 255, 255, .5);
}
/* `hover: none` detecta la CAPACIDAD del dispositivo, no el ancho de
   pantalla: una tableta con mouse conectado se sigue comportando
   como PC. */
@media (hover: none) {
  .cond-panel.is-abierto .cond-panel__toque { display: block; }
}
@media (max-width: 860px) {
  .cond-fila { flex-direction: column; height: auto; }
  .cond-panel {
    flex: 0 0 auto;
    height: 70px;
    transition: height .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .35s ease;
  }
  .cond-panel.is-abierto { height: 380px; }
  .cond-panel__vert { writing-mode: horizontal-tb; transform: none; place-items: center start; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cond-panel, .cond-panel::after, .cond-panel__cuerpo { transition: none; }
}

/* ── 20.4 MÉDICO — tarjeta que sube y cubre ──
   `.pila__anterior` va en la sección que queda tapada (Condiciones,
   justo antes de .medico). `.medico--tarjeta` va en la sección
   .medico. El JS (secciones-nuevas.js) las engancha con dos pines
   de ScrollTrigger: uno sostiene a la anterior mientras la tarjeta
   sube y la cubre, y un segundo la "atraca" a un 25% del tope
   antes de soltar — ver los comentarios largos en ese archivo. */
.medico--tarjeta {
  position: relative;
  z-index: 3;
  border-radius: 30px 30px 0 0;
  /* Eje del giro: abajo a la izquierda, a una altura fija en vh
     (no en % de la tarjeta — es enorme, un % de su alto la mandaría
     kilómetros fuera de pantalla). */
  transform-origin: 0 92vh;
  will-change: transform;
  overflow: hidden;
}
.medico--tarjeta > .container { padding-top: 18px; }
@media (max-width: 720px) {
  .medico--tarjeta { border-radius: 22px 22px 0 0; }
}
.pila__anterior { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .medico--tarjeta { transform: none !important; }
}