/* Archivo — hospedada localmente. Evita o bloqueio de render do fonts.googleapis.com
   (932 ms medidos no Lighthouse em 14/09/2026). Subset latin + latin-ext. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100% 125%;
  font-display:swap;
  src:url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100% 125%;
  font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   LIFE · Clínica de la Columna
   Sistema visual "Regla Vertebral"
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marca */
  --navy-900:#0C2231;
  --navy-800:#12324A;
  --navy-700:#183F54;
  --navy-600:#21455C;
  --navy-500:#2B4C63;
  --green:#7DCD82;
  --green-600:#4FA45A;
  --green-ink:#2E7D48;
--green-chip:#2B7544;
  --teal:#5DC4C3;
  --sand:#B7A87F;

  /* Neutros con sesgo frío-verdoso */
  --paper:#FFFFFF;
  --bone:#F4F7F6;
  --bone-2:#EAF0EE;
  --line:#DCE5E4;
  --line-soft:#E8EEED;
  --muted:#5E7480;
  --on-dark:#E4EDEF;
  --on-dark-muted:#93AAB6;
  --line-dark:rgba(255,255,255,.13);

  /* Tipografía */
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Ritmo */
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section-y:clamp(4.5rem,9vw,8.5rem);
  --rail:0px; /* espacio reservado a la regla vertebral (ver media query) */

  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bone);
  color:var(--navy-700);
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.72;
  font-weight:400;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

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

::selection{background:var(--green);color:var(--navy-900)}

/* ---------- 3. Tipografía ---------- */
h1,h2,h3,h4{
  margin:0;
  font-weight:600;
  font-variation-settings:"wdth" 118;
  letter-spacing:-.018em;
  line-height:1.06;
  text-wrap:balance;
  color:var(--navy-700);
}
p{margin:0}

.t-display{font-size:clamp(2.35rem,4.4vw,4.05rem);line-height:1.04;letter-spacing:-.028em}
.t-h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.05;letter-spacing:-.024em}
.t-h2{font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.08;letter-spacing:-.02em}
.t-h3{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.22;letter-spacing:-.012em}
.t-h4{font-size:1.0625rem;line-height:1.3;font-variation-settings:"wdth" 108}

.t-lead{
  font-size:clamp(1.09rem,1.5vw,1.32rem);
  line-height:1.6;
  color:var(--navy-500);
  max-width:56ch;
  font-weight:400;
}
.t-body{max-width:66ch;color:var(--navy-500)}
.t-small{font-size:.9375rem;line-height:1.62;color:var(--muted)}

/* Etiqueta clínica: código vertebral + nombre de sección */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-ink);
  font-variation-settings:"wdth" 100;
  margin:0 0 1.15rem;
}
.eyebrow__code{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.5rem;height:1.45rem;padding:0 .45rem;
  border:1px solid var(--green);border-radius:1px;
  background:rgba(125,205,130,.12);
  color:var(--green-chip);
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
}
.eyebrow__line{flex:1;height:1px;background:var(--line);max-width:5rem}

.on-dark .eyebrow,.section--dark .eyebrow,
.hero .eyebrow,.cta .eyebrow,.phead .eyebrow{color:var(--green)}
.on-dark .eyebrow__code,.section--dark .eyebrow__code,
.hero .eyebrow__code,.cta .eyebrow__code,.phead .eyebrow__code{
  border-color:rgba(125,205,130,.45);background:rgba(125,205,130,.1);
  color:var(--green);
}
.on-dark .eyebrow__line,.section--dark .eyebrow__line,
.hero .eyebrow__line,.cta .eyebrow__line,.phead .eyebrow__line{background:var(--line-dark)}

@media (min-width:1340px){:root{--rail:118px}}

/* ---------- 4. Layout ---------- */
.wrap{
  width:min(1260px,100% - (var(--gutter) * 2));
  margin-inline:auto;
}
.wrap--rail{padding-left:var(--rail)}
.wrap--narrow{width:min(880px,100% - (var(--gutter) * 2));margin-inline:auto}

.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.section--dark{background:var(--navy-900);color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark .t-lead,.section--dark .t-body{color:var(--on-dark-muted)}
.section--dark .t-small{color:var(--on-dark-muted)}
.section--paper{background:var(--paper)}

.stack{display:flex;flex-direction:column}
.stack-sm{gap:.65rem}.stack-md{gap:1.15rem}.stack-lg{gap:2rem}.stack-xl{gap:3rem}

.section__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.section__head--solo{grid-template-columns:1fr;max-width:70ch}
@media (max-width:820px){.section__head{grid-template-columns:1fr;align-items:start}}

/* ---------- 5. Regla vertebral (rail) ---------- */
.spine{
  position:fixed;
  left:clamp(18px,2.4vw,40px);
  top:0;height:100vh;
  width:64px;
  display:none;
  z-index:40;
  pointer-events:none;
}
@media (min-width:1340px){.spine{display:block}}

.spine__inner{
  position:absolute;top:50%;left:0;
  transform:translateY(-50%);
  height:min(66vh,620px);width:100%;
}
.spine__track{
  position:absolute;left:11px;top:0;bottom:0;width:1px;
  background:var(--line);
}
.section--dark-ctx .spine__track{background:var(--line-dark)}

.spine__fill{
  position:absolute;left:11px;top:0;width:1px;
  height:100%;
  background:linear-gradient(180deg,var(--teal),var(--green));
  transform:scaleY(var(--spine-progress,0));
  transform-origin:top center;
  transition:transform .12s linear;
}

.spine__node{
  position:absolute;left:0;
  transform:translateY(-50%);
  display:flex;align-items:center;gap:.55rem;
  pointer-events:auto;
  text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer;
}
.spine__dot{
  width:23px;height:7px;border-radius:1px;
  background:var(--line);
  transition:background .35s var(--ease),width .35s var(--ease),height .35s var(--ease);
  flex:none;
}
.spine__label{
  display:flex;align-items:baseline;gap:.4rem;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums;
  opacity:0;transform:translateX(-4px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  white-space:nowrap;
}
.spine__label i{
  font-style:normal;letter-spacing:.1em;font-weight:500;
  max-width:0;overflow:hidden;opacity:0;
  transition:max-width .4s var(--ease),opacity .3s var(--ease);
}
.spine__node:hover .spine__label i,
.spine__node:focus-visible .spine__label i{max-width:12rem;opacity:.7}
.spine__node:hover .spine__label,
.spine__node:focus-visible .spine__label{opacity:.75;transform:none}
.spine__node[aria-current="true"] .spine__dot{
  background:var(--green);width:23px;height:11px;
}
.spine__node[aria-current="true"] .spine__label{opacity:1;transform:none;color:var(--navy-700)}

/* Rail sobre fondo oscuro */
.spine.is-dark .spine__dot{background:rgba(255,255,255,.22)}
.spine.is-dark .spine__label{color:var(--on-dark-muted)}
.spine.is-dark .spine__track{background:var(--line-dark)}
.spine.is-dark .spine__node[aria-current="true"] .spine__dot{background:var(--green)}
.spine.is-dark .spine__node[aria-current="true"] .spine__label{color:#fff}

/* ---------- 6. Botones ---------- */
.btn{
  --btn-bg:var(--green);
  --btn-fg:var(--navy-900);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92rem 1.6rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid transparent;border-radius:999px;
  font-size:.95rem;font-weight:600;
  font-variation-settings:"wdth" 104;
  letter-spacing:.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:#6FC275;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy-700);border-color:var(--line)}
.btn--ghost:hover{background:transparent;border-color:var(--navy-700)}
.on-dark .btn--ghost,.section--dark .btn--ghost,
.hero .btn--ghost,.cta .btn--ghost,.phead .btn--ghost{--btn-fg:#fff;border-color:rgba(255,255,255,.28)}
.on-dark .btn--ghost:hover,.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,.cta .btn--ghost:hover,.phead .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}

.btn--solid-navy{--btn-bg:var(--navy-700);--btn-fg:#fff}
.btn--solid-navy:hover{background:var(--navy-600)}

.btn--sm{padding:.66rem 1.15rem;font-size:.875rem}
@media (max-width:420px){
  .hdr__actions .btn--sm{padding:.58rem .85rem;font-size:.8rem}
}

/* Enlace con subrayado progresivo */
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.95rem;
  color:var(--green-ink);text-decoration:none;
  font-variation-settings:"wdth" 104;
}
.link-arrow::after{
  content:"";width:1.1rem;height:1px;background:currentColor;
  transition:width .3s var(--ease);
}
.link-arrow:hover::after{width:1.9rem}
.section--dark .link-arrow,.hero .link-arrow,.cta .link-arrow,.phead .link-arrow{color:var(--green)}

/* ---------- 7. Encabezado ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:90;
  padding-top:env(safe-area-inset-top,0px);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),
             border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr__bar{
  width:min(1400px,100% - (var(--gutter) * 2));
  margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  height:78px;
  transition:height .35s var(--ease);
}
.hdr__logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.hdr__logo img{width:40px;height:40px}
.hdr__logo-text{display:flex;flex-direction:column;line-height:1.05}
.hdr__logo-name{
  font-size:1.02rem;font-weight:700;letter-spacing:.11em;
  font-variation-settings:"wdth" 112;color:#fff;
}
.hdr__logo-sub{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:500;
}

.hdr__nav{display:none;margin-left:auto;align-items:center;gap:clamp(.5rem,1.6vw,1.6rem)}
@media (min-width:1040px){.hdr__nav{display:flex}}

.hdr__link{
  position:relative;
  padding:.55rem .1rem;
  font-size:.92rem;font-weight:500;
  color:rgba(255,255,255,.85);
  text-decoration:none;
  transition:color .25s var(--ease);
  white-space:nowrap;
}
.hdr__link::after{
  content:"";position:absolute;left:0;bottom:.15rem;
  width:0;height:1.5px;background:var(--green);
  transition:width .3s var(--ease);
}
.hdr__link:hover,.hdr__link[aria-current="page"]{color:#fff}
.hdr__link:hover::after,.hdr__link[aria-current="page"]::after{width:100%}

.hdr__actions{display:flex;align-items:center;gap:.75rem;margin-left:auto}
@media (min-width:1040px){.hdr__actions{margin-left:0}}
.hdr__phone{
  display:none;align-items:center;gap:.5rem;
  font-size:.92rem;font-weight:600;color:#fff;text-decoration:none;
  font-variant-numeric:tabular-nums;
}
@media (min-width:1280px){.hdr__phone{display:inline-flex}}

/* Estado desplazado: papel */
.hdr.is-scrolled{
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--line);
}
.hdr.is-scrolled .hdr__bar{height:64px}
.hdr.is-scrolled .hdr__logo-name{color:var(--navy-700)}
.hdr.is-scrolled .hdr__logo-sub{color:var(--muted)}
.hdr.is-scrolled .hdr__link{color:var(--navy-500)}
.hdr.is-scrolled .hdr__link:hover,
.hdr.is-scrolled .hdr__link[aria-current="page"]{color:var(--navy-700)}
.hdr.is-scrolled .hdr__phone{color:var(--navy-700)}
.hdr.is-scrolled .hdr__burger{color:var(--navy-700)}

/* Páginas con encabezado claro desde el inicio */
.hdr--light:not(.is-scrolled){background:rgba(255,255,255,.93);border-bottom-color:var(--line)}
.hdr--light:not(.is-scrolled) .hdr__logo-name{color:var(--navy-700)}
.hdr--light:not(.is-scrolled) .hdr__logo-sub{color:var(--muted)}
.hdr--light:not(.is-scrolled) .hdr__link{color:var(--navy-500)}
.hdr--light:not(.is-scrolled) .hdr__phone{color:var(--navy-700)}
.hdr--light:not(.is-scrolled) .hdr__burger{color:var(--navy-700)}

/* Menú desplegable */
.hdr__group{position:relative;display:flex;align-items:center}
.hdr__panel{
  position:absolute;top:calc(100% + .5rem);left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:min(680px,88vw);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 26px 60px -28px rgba(12,34,49,.34);
  padding:1.4rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1.6rem;
  opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.hdr__group:hover .hdr__panel,
.hdr__group:focus-within .hdr__panel{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.hdr__panel-item{
  display:block;padding:.65rem .75rem;border-radius:2px;
  text-decoration:none;color:var(--navy-700);
  transition:background .2s var(--ease);
}
.hdr__panel-item:hover{background:var(--bone)}
.hdr__panel-item strong{
  display:block;font-size:.95rem;font-weight:600;
  font-variation-settings:"wdth" 108;
}
.hdr__panel-item span{display:block;font-size:.82rem;color:var(--muted);line-height:1.45}
.hdr__panel-head{
  grid-column:1/-1;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-ink);font-weight:600;padding:0 .75rem .4rem;
}

/* Botón hamburguesa */
.hdr__burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:none;border:0;color:#fff;cursor:pointer;
}
@media (min-width:1040px){.hdr__burger{display:none}}
.hdr__burger span{
  display:block;width:21px;height:1.5px;background:currentColor;position:relative;
  transition:background .2s var(--ease);
}
.hdr__burger span::before,.hdr__burger span::after{
  content:"";position:absolute;left:0;width:21px;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease);
}
.hdr__burger span::before{top:-6.5px}
.hdr__burger span::after{top:6.5px}
.hdr__burger[aria-expanded="true"] span{background:transparent}
.hdr__burger[aria-expanded="true"] span::before{transform:translateY(6.5px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span::after{transform:translateY(-6.5px) rotate(-45deg)}

/* Menú móvil */
.mobnav{
  position:fixed;inset:0;z-index:85;
  background:var(--navy-900);
  padding:calc(96px + env(safe-area-inset-top,0px)) var(--gutter) 2rem;
  overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s;
}
.mobnav.is-open{opacity:1;visibility:visible}
.mobnav a{
  display:block;padding:.9rem 0;
  border-bottom:1px solid var(--line-dark);
  color:#fff;text-decoration:none;
  font-size:1.35rem;font-weight:600;
  font-variation-settings:"wdth" 112;letter-spacing:-.01em;
}
.mobnav a.is-sub{
  font-size:1rem;font-weight:400;padding-left:1rem;
  color:var(--on-dark-muted);font-variation-settings:"wdth" 100;
}
.mobnav__cta{margin-top:1.8rem;display:flex;flex-direction:column;gap:.75rem}
.mobnav__cta .btn{width:100%}
body.nav-open{overflow:hidden}

/* ---------- 8. Hero ---------- */
.hero{
  position:relative;
  background:var(--navy-900);
  color:var(--on-dark);
  padding-top:calc(78px + env(safe-area-inset-top,0px));
  overflow:hidden;
  isolation:isolate;
}
/* Aurora clínica: luz suave verde/teal, lenta */
.hero::before{
  content:"";position:absolute;z-index:-2;
  width:min(90vw,1000px);aspect-ratio:1;
  top:-34%;right:-16%;
  background:radial-gradient(circle at 50% 50%,
    rgba(93,196,195,.20),rgba(125,205,130,.09) 42%,transparent 68%);
  filter:blur(6px);
  animation:drift 26s var(--ease) infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(12,34,49,0) 55%,rgba(12,34,49,.75) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 88px);
  pointer-events:none;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-5%,6%,0) scale(1.14)}
}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  padding-block:clamp(3.5rem,7vw,6rem) clamp(3.5rem,6vw,5.5rem);
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:2.75rem;padding-block:3rem 3.5rem}
}

.hero h1{color:#fff}
.hero h1 .accent{
  color:var(--green);
  font-variation-settings:"wdth" 118;
}
.hero__lead{color:var(--on-dark-muted);max-width:50ch;margin-top:1.5rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.3rem}

/* Hechos verificables bajo el hero */
.hero__facts{
  display:flex;flex-wrap:wrap;gap:0;
  margin-top:3rem;
  border-top:1px solid var(--line-dark);
}
.hero__fact{
  flex:1 1 150px;
  padding:1.15rem 1.35rem 0 0;
}
.hero__fact dt{
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-dark-muted);font-weight:600;margin-bottom:.3rem;
}
.hero__fact dd{
  margin:0;font-size:1.02rem;font-weight:600;color:#fff;
  font-variation-settings:"wdth" 108;line-height:1.3;
}

/* Radiografía: imagen con barrido de escáner */
.scan{
  position:relative;
  border:1px solid var(--line-dark);
  border-radius:2px;
  overflow:hidden;
  background:var(--navy-800);
}
.scan img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.72) contrast(1.06) brightness(.94);
}
/* El marco 4:5 está pensado para foto en pie, como una placa. La mayoría de las fotos
   de consulta son apaisadas (1200 × 840): metidas ahí se les recorta el 44 % del ancho
   y queda un trozo de escena sin contexto. Con --wide el marco sigue a la foto. */
.scan--wide img{aspect-ratio:auto}

/* ── .scan--pase · las tres sesiones pasando solas ────────────────────────────
   Pedido del Thiago el 16/09/2026: el material nuevo es un tríptico (tres fotos
   en una), y puesto entero en el hero la tarjeta "Evaluación inicial" le tapaba
   el 52 % del ancho. Recortado en tres, cada foto se ve completa y pasan una a
   una en el mismo marco.

   La proporción sale de las fotos (530 × 711 ≈ 3/4), no al revés: el marco 4:5 de
   .scan les recortaría un 7 % y aquí no hace falta recortar nada.

   Sin JavaScript: tres capas superpuestas y un solo @keyframes desfasado por
   --i. Cada foto está 5 s en pantalla y funde en 1 s; el ciclo completo son 15 s. */
/* El recorte tiene 530 px de ancho y no hay original mayor: el tríptico que mandó el
   cliente es de 1600 × 711 y cada foto es un tercio. En un marco de 545 px, una pantalla
   retina la estira al doble (densidad 0,49×) y se ve blanda. Limitando el marco a 340 px
   la densidad cae a 0,49× y se ve blanda. Dos medidas juntas, el 16/09/2026, después de
   que el Thiago dijera "a qualidade está muito baixa e ficou esticado":

   1. El marco baja a 480 px (de 545), con la tarjeta quedándose en su ancho normal —
      encogerlo más la hacía ocupar el 82 % de la foto y partía sus líneas en dos.
   2. Los WebP se sirven al DOBLE (1060 × 1420, lanczos + un unsharp suave) en calidad 78:
      pesan 57 KB cada uno, MENOS que los de 530 px en calidad 93, y en pantalla retina la
      densidad pasa de 0,49× a 1,10× — el navegador ya no tiene que estirar nada.

   El límite sigue siendo el origen: el tríptico del cliente es de 1600 × 711 y cada foto
   es un tercio. Si llegan las originales del fotógrafo, se regeneran sin el upscale. */
.scan--pase{--pase:15s;max-width:480px;margin-inline:auto}
.scan--pase img{
  aspect-ratio:530/711;
  grid-area:1/1;
  animation:pase var(--pase) var(--ease-out) infinite;
  /* Retraso NEGATIVO: la animación arranca ya empezada. Con retraso positivo las
     dos últimas se quedan opacas hasta que les toca, y se ven tres fotos a la vez. */
  animation-delay:calc(var(--pase) / 3 * var(--i, 0) * -1);
}
.scan--pase{display:grid}
/* --i va al revés a propósito: con retraso negativo, cuanto MÁS se adelanta la
   animación más tarde vuelve a entrar. Así el orden en pantalla es el del HTML
   (descompresión → láser → cervical) y no 1-3-2. */
.scan--pase img:nth-of-type(2){--i:2}
.scan--pase img:nth-of-type(3){--i:1}
@keyframes pase{
  0%      {opacity:1}
  26.67%  {opacity:1}   /* 4 s visible */
  33.33%  {opacity:0}   /* 1 s de fundido */
  93.33%  {opacity:0}
  100%    {opacity:1}   /* vuelve a entrar */
}
/* Con movimiento reducido no hay pase: queda la primera, quieta. */
@media (prefers-reduced-motion:reduce){
  .scan--pase img{animation:none;opacity:0}
  .scan--pase img:first-of-type{opacity:1}
}
.scan::after{
  content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--green),var(--teal),transparent);
  box-shadow:0 0 22px 3px rgba(125,205,130,.45);
  animation:scanline 7s var(--ease-out) infinite;
  opacity:.9;
}
@keyframes scanline{
  0%{top:-2%;opacity:0}
  8%{opacity:.9}
  70%{opacity:.9}
  85%{top:101%;opacity:0}
  100%{top:101%;opacity:0}
}
@media (prefers-reduced-motion:reduce){.scan::after{animation:none;opacity:0}}

/* Marcas de vértebra en el borde de la radiografía */
.scan__ticks{
  position:absolute;top:0;bottom:0;right:0;width:54px;
  display:flex;flex-direction:column;justify-content:space-evenly;
  align-items:flex-end;padding:1.1rem .85rem;
  background:linear-gradient(90deg,transparent,rgba(12,34,49,.72));
}
.scan__tick{
  display:flex;align-items:center;gap:.4rem;
  font-size:.56rem;letter-spacing:.1em;font-weight:600;
  color:rgba(255,255,255,.52);font-variant-numeric:tabular-nums;
}
.scan__tick::after{content:"";width:9px;height:1px;background:rgba(255,255,255,.34)}


/* ---------- 9. Tabla de síntomas (registro clínico) ---------- */
.symptoms{border-top:1px solid var(--line)}
.symptom{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;
  gap:1rem clamp(1rem,3vw,2.5rem);
  align-items:center;
  padding:1.35rem 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
  position:relative;
  transition:padding-left .35s var(--ease);
}
.symptom::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--green);transform:scaleY(0);transform-origin:center;
  transition:transform .35s var(--ease);
}
.symptom:hover{padding-left:1.15rem}
.symptom:hover::before{transform:scaleY(1)}
.symptom__name{
  font-size:clamp(1.05rem,1.7vw,1.32rem);font-weight:600;
  font-variation-settings:"wdth" 112;letter-spacing:-.012em;
  line-height:1.24;color:var(--navy-700);
}
.symptom__origin{
  font-size:.86rem;color:var(--muted);line-height:1.45;
}
.symptom__origin b{
  color:var(--green-ink);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.symptom__go{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);
  display:grid;place-items:center;color:var(--navy-500);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.symptom:hover .symptom__go{background:var(--green);border-color:var(--green);color:var(--navy-900)}
@media (max-width:760px){
  .symptom{grid-template-columns:1fr auto;gap:.35rem 1rem}
  .symptom__origin{grid-column:1/2}
  .symptom__go{grid-row:1/3}
}

/* ---------- 10. Proceso numerado (secuencia real) ---------- */
/* Los pasos nacieron dentro de .section--dark y daban por hecho el fondo oscuro:
   en claro el título salía blanco sobre blanco. El color base es ahora el del
   documento, y el fondo oscuro lo sobreescribe. Vale para tratamiento-descompresion,
   que ya usaba .steps sobre .section--paper. */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:0;
  border-top:1px solid var(--line);
}
.step{
  padding:1.9rem 1.5rem 2.1rem 0;
  border-right:1px solid var(--line);
  position:relative;
}
.step:last-child{border-right:0}
.step::before{
  content:"";position:absolute;top:-1px;left:0;width:0;height:2px;
  background:var(--green);
  transition:width .7s var(--ease-out);
}
.step.is-in::before{width:calc(100% - 1.5rem)}
.step__n{
  display:block;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;
  color:var(--green);margin-bottom:1rem;
  font-variant-numeric:tabular-nums;
}
.step h3{color:var(--navy-900);margin-bottom:.6rem}
.step p{font-size:.9rem;line-height:1.6;color:var(--muted)}
.section--dark .steps{border-top-color:var(--line-dark)}
.section--dark .step{border-right-color:var(--line-dark)}
.section--dark .step h3{color:#fff}

/* ── .steps--media · cada recurso con la foto que lo identifica ──────────────
   La T11 de terapia tenía cuatro bloques de texto y, debajo, una galería de
   seis fotos casi iguales: ninguna decía de qué recurso hablaba y tres eran la
   misma sala. Ahora la foto va dentro del recurso, que es lo que hace el resto
   del sitio — la imagen informa, no decora.
   Sin numerar de propósito: no son etapas. El propio texto de la sección dice
   que se eligen según la lesión y el momento, y un 01/02/03 diría lo contrario.
   La proporción es la real del archivo (900 × 1080 = 5:6), así que no se
   recorta nada; el margen derecho es el mismo del .step para que la foto no
   toque la línea divisoria. */
.steps--media .step{padding-top:1.4rem}
/* La holgura hasta la linea divisoria ya la da el padding-right del .step: dar
   ademas margen a la foto la estrechaba, y quitarselo al ultimo la ensanchaba
   24 px — en 5:6 eso son 29 px mas de alto y los cuatro titulos dejaban de
   alinearse. Una sola fuente para esa holgura. */
.step__foto{margin:0 0 1.2rem 0;overflow:hidden;background:var(--bone-2)}
.step__foto img{display:block;width:100%;aspect-ratio:5/6;object-fit:cover;filter:saturate(.85)}
.section--dark .step__foto{background:var(--navy-800)}
.section--dark .step p{color:var(--on-dark-muted)}
@media (max-width:640px){
  .step{border-right:0;border-bottom:1px solid var(--line-dark);padding-right:0}
  .step.is-in::before{width:100%}
}

/* ---------- 11. Tarjetas de tratamiento ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:1.5rem;
}
.card{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  text-decoration:none;color:inherit;
  overflow:hidden;
  transition:border-color .35s var(--ease),transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.card:hover{
  border-color:var(--navy-700);
  transform:translateY(-4px);
  box-shadow:0 24px 48px -30px rgba(12,34,49,.42);
}
.card__media{position:relative;overflow:hidden;background:var(--bone-2)}
.card__media img{
  width:100%;aspect-ratio:16/11;object-fit:cover;
  filter:saturate(.85);
  transition:transform .8s var(--ease-out),filter .5s var(--ease);
}
.card:hover .card__media img{transform:scale(1.045);filter:saturate(1)}
.card__media::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  background:var(--green);transition:width .55s var(--ease-out);
}
.card:hover .card__media::after{width:100%}
.card__body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card__body h3{color:var(--navy-700)}
.card__body p{font-size:.9rem;line-height:1.58;color:var(--muted)}
.card__go{
  margin-top:auto;padding-top:1rem;
  font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green-ink);display:flex;align-items:center;gap:.5rem;
}
.card__go::after{content:"";width:1rem;height:1px;background:currentColor;transition:width .3s var(--ease)}
.card:hover .card__go::after{width:1.7rem}

/* Variante compacta para condiciones */
.card--compact .card__media img{aspect-ratio:3/2}
.card--compact .card__body{padding:1.1rem 1.15rem 1.3rem}
.card--compact .card__body h3{font-size:1.05rem}

/* ---------- 12. Diagrama de descompresión ---------- */
.decomp{
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;
  padding:1.6rem;border:1px solid var(--line-dark);border-radius:2px;
  background:rgba(255,255,255,.03);
}
.decomp__viz{
  width:88px;height:140px;position:relative;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.vert{
  width:74px;height:26px;border-radius:5px;
  background:linear-gradient(180deg,#DCE5E4,#A9BCC2);
  position:relative;
}
.vert--mid{
  width:56px;height:13px;border-radius:7px;
  background:var(--green);
  transition:transform .9s var(--ease);
}
.decomp__viz{animation:none}
.decomp:hover .vert--top,.decomp.is-in .vert--top{animation:sep-up 3.4s var(--ease) infinite alternate}
.decomp:hover .vert--bot,.decomp.is-in .vert--bot{animation:sep-down 3.4s var(--ease) infinite alternate}
.decomp:hover .vert--mid,.decomp.is-in .vert--mid{animation:disc 3.4s var(--ease) infinite alternate}
@keyframes sep-up{from{transform:translateY(0)}to{transform:translateY(-9px)}}
@keyframes sep-down{from{transform:translateY(0)}to{transform:translateY(9px)}}
@keyframes disc{
  from{transform:scaleY(1);opacity:.75}
  to{transform:scaleY(2.1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .decomp .vert{animation:none !important}
}
.decomp__txt h3,.decomp__txt h4{color:#fff;margin-bottom:.4rem}
.decomp__txt p{font-size:.88rem;line-height:1.6;color:var(--on-dark-muted);margin:0}
@media (max-width:560px){.decomp{grid-template-columns:1fr;justify-items:start}}

/* Especificaciones del equipo.
   Nació sólo para fondo oscuro: el valor era #fff fijo, así que sobre papel quedaba
   blanco sobre blanco y la ficha se leía como una columna de etiquetas sin datos.
   Ahora el tema entra por tokens y la variante oscura los redefine. */
.specs{
  --spec-line:var(--line);
  --spec-label:var(--muted);
  --spec-value:var(--navy-700);
  display:grid;gap:0;margin-top:1.75rem;border-top:1px solid var(--spec-line);
}
.spec{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--spec-line);
}
.spec dt{font-size:.85rem;color:var(--spec-label)}
.spec dd{
  margin:0;font-size:.9rem;font-weight:600;color:var(--spec-value);text-align:right;
  font-variation-settings:"wdth" 106;font-variant-numeric:tabular-nums;
}
.section--dark .specs,
.phead .specs,
.hero .specs{
  --spec-line:var(--line-dark);
  --spec-label:var(--on-dark-muted);
  --spec-value:#fff;
}

/* ---------- 13. Mapa vertebral interactivo ---------- */
.vmap{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:stretch;
}
@media (max-width:920px){.vmap{grid-template-columns:1fr}}

/* Zigzag. La cabecera de página ya lleva su foto a la derecha; si la sección que
   viene después repite el lado, las dos quedan apiladas en una columna de fotos con
   el lado izquierdo vacío. Con --flip la imagen pasa a la izquierda y el texto a la
   derecha, y la página alterna. En una sola columna el orden vuelve a ser texto y
   luego foto: en el móvil, abrir con la imagen deja el titular fuera de la vista. */
.vmap--flip{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
@media (min-width:921px){
  .vmap--flip > *:first-child{order:2}
  .vmap--flip > *:last-child{order:1}
}
@media (max-width:920px){.vmap--flip{grid-template-columns:1fr}}

.vmap__panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  padding:clamp(1.25rem,2.5vw,2rem);
  display:flex;flex-direction:column;
}
.vmap__panel-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;margin-bottom:1.25rem;border-bottom:1px solid var(--line);
}
.vmap__panel-head h3{font-size:1.05rem}
.vmap__panel-head span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Panel izquierdo: botones · columna completa · detalle de la vértebra */
.vmap__body{
  display:grid;
  grid-template-columns:auto auto minmax(132px,1fr);
  gap:clamp(.9rem,2vw,1.6rem);
  align-items:stretch;
}
.vlist{display:flex;flex-direction:column;gap:3px}

.vbtn{
  display:flex;align-items:center;justify-content:center;
  min-width:52px;padding:.24rem .5rem;
  background:var(--green);color:#fff;
  border:0;border-radius:3px;cursor:pointer;
  font-size:.68rem;font-weight:700;letter-spacing:.05em;line-height:1.25;
  font-variant-numeric:tabular-nums;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.vbtn:hover{background:var(--green-600);transform:translateX(2px)}
.vbtn[aria-selected="true"]{background:var(--navy-700)}
.vbtn--region-t{background:#74C47C}
.vbtn--region-l{background:#6BBA79}
.vbtn--region-s{background:#63B075}
.vbtn--region-t:hover,.vbtn--region-l:hover,.vbtn--region-s:hover{background:var(--green-600)}
.vbtn--region-t[aria-selected="true"],
.vbtn--region-l[aria-selected="true"],
.vbtn--region-s[aria-selected="true"]{background:var(--navy-700)}

/* Columna vertebral completa, a la altura exacta de la lista */
.vspine{
  position:relative;
  width:clamp(92px,13vw,140px);
}
/* absoluta: la altura de la fila la marca la lista de botones, no la imagen */
.vspine img{
  position:absolute;top:0;bottom:0;left:50%;
  transform:translateX(-50%);
  height:100%;width:auto;max-width:none;
  object-fit:contain;
  filter:drop-shadow(0 10px 26px rgba(12,34,49,.14));
}

/* Detalle: código, nombre y la vértebra suelta */
.vdetail{align-self:start;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.vdetail__code{
  font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;
  font-variation-settings:"wdth" 120;letter-spacing:-.03em;
  line-height:.98;color:var(--navy-700);margin:0;
}
.vdetail__name{font-size:.88rem;color:var(--muted);margin:0 0 .5rem}
.vdetail__img{
  width:100%;max-width:130px;height:86px;object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 6px 14px rgba(12,34,49,.18));
}

/* Órganos y efectos: bajo el panel, a todo el ancho */
.vdetail__more{
  margin-top:clamp(1.1rem,2.5vw,1.6rem);
  padding-top:clamp(1rem,2vw,1.35rem);
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.9rem;
}
.vdetail__organs{display:flex;flex-wrap:wrap;gap:.4rem}
.vchip{
  display:inline-flex;align-items:center;
  padding:.28rem .68rem;
  border:1px solid var(--green);border-radius:999px;
  background:rgba(125,205,130,.1);
  font-size:.76rem;font-weight:600;color:var(--green-ink);
  line-height:1.3;
}
.vdetail__effects{
  font-size:.88rem;line-height:1.6;color:var(--navy-500);margin:0;
}
.vdetail__effects b{
  display:block;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:.35rem;
}

@media (max-width:820px){
  .vmap__body{gap:1rem}
  .vspine{width:clamp(78px,11vw,110px)}
  .vdetail__img{max-width:110px;height:70px}
}
@media (max-width:600px){
  .vmap__body{grid-template-columns:1fr;gap:1.25rem}
  .vspine{display:none}
  .vlist{flex-direction:row;flex-wrap:wrap;gap:4px}
  .vbtn{min-width:46px;padding:.3rem .55rem}
  .vdetail{flex-direction:row;align-items:center;gap:1rem;flex-wrap:wrap}
  .vdetail__name{margin:0}
  .vdetail__img{max-width:96px;height:62px;margin-left:auto}
}

/* Cuerpo con órganos: la silueta cambia según la vértebra elegida.
   Geometría y anclaje de los rótulos replicados del tema actual de la clínica. */
.vbody{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  padding:clamp(4.5rem,8vw,6rem) clamp(1rem,2vw,1.6rem) clamp(1.25rem,2.5vw,1.75rem);
  display:flex;align-items:center;justify-content:center;
  min-height:440px;
}
.vbody__stage{
  position:relative;
  width:100%;max-width:430px;
  aspect-ratio:390/449;
}
.vbody__stage img{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  height:97%;width:auto;max-width:none;
  transition:opacity .28s var(--ease);
}
.vbody__stage img.is-swapping{opacity:0}
.vbody__layer{position:absolute;inset:0;pointer-events:none}

.organ{
  position:absolute;
  padding:.24rem .6rem;
  border:1px solid var(--line);border-radius:10px;
  background:var(--paper);
  font-size:.72rem;font-weight:600;line-height:1.35;
  color:var(--muted);
  white-space:nowrap;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),
             background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.organ.is-active{
  opacity:1;transform:none;
  background:var(--green);
  color:var(--navy-900);
  border-color:var(--green);
  box-shadow:0 0 0 5px rgba(125,205,130,.16);
}
@media (prefers-reduced-motion:reduce){
  .organ{transition:opacity .2s linear;transform:none}
}
@media (max-width:760px){
  .vbody{padding-inline:.5rem}
  .organ{font-size:.6rem;padding:.18rem .4rem;border-radius:8px}
}

/* ---------- 14. Cifras ---------- */
.figures{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:0;border-top:1px solid var(--line);
}
.figure{
  padding:1.75rem 1.5rem 1.75rem 0;
  border-right:1px solid var(--line);
}
.figure:last-child{border-right:0}
.figure__n{
  font-size:clamp(2.3rem,4.2vw,3.2rem);font-weight:600;
  font-variation-settings:"wdth" 120;letter-spacing:-.035em;line-height:1;
  color:var(--navy-700);font-variant-numeric:tabular-nums;
  display:block;margin-bottom:.55rem;
}
.figure__n .unit{color:var(--green-600);font-size:.5em;vertical-align:.32em;margin-left:.06em}
.figure p{font-size:.86rem;line-height:1.5;color:var(--muted);max-width:24ch}
.section--dark .figure{border-color:var(--line-dark)}
.section--dark .figures{border-color:var(--line-dark)}
.section--dark .figure__n{color:#fff}
.section--dark .figure__n .unit{color:var(--green)}
.section--dark .figure p{color:var(--on-dark-muted)}
@media (max-width:560px){
  .figure{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .section--dark .figure{border-bottom-color:var(--line-dark)}
}

/* ---------- 15. Pilares / lista de valor ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:2.25rem}
.pillar{display:flex;flex-direction:column;gap:.7rem}
.pillar__icon{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:var(--paper);margin-bottom:.35rem;
}
.pillar__icon img{width:24px;height:24px}
.pillar p{font-size:.92rem;line-height:1.62;color:var(--muted)}
.section--dark .pillar__icon{border-color:var(--line-dark);background:rgba(255,255,255,.05)}
.section--dark .pillar__icon img{filter:brightness(0) invert(1) opacity(.9)}
.section--dark .pillar p{color:var(--on-dark-muted)}

/* Lista de comprobación */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.checks--pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));column-gap:2.75rem}
.checks li{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem;line-height:1.6}
.checks li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:.24rem;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------- 16. Cabecera de página interna ---------- */
.phead{
  background:var(--navy-900);color:var(--on-dark);
  padding-top:calc(78px + env(safe-area-inset-top,0px));
  position:relative;overflow:hidden;isolation:isolate;
}
.phead::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:
    radial-gradient(ellipse 70% 100% at 88% 0%,rgba(93,196,195,.16),transparent 62%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 88px);
}
.phead__inner{padding-block:clamp(2.75rem,5vw,4.25rem) clamp(2.75rem,5vw,4rem)}
.phead h1{color:#fff;max-width:20ch}
.phead .t-lead{color:var(--on-dark-muted);margin-top:1.15rem}

/* Ruta de navegación */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.78rem;color:var(--on-dark-muted);margin-bottom:1.6rem;
  list-style:none;padding:0;
}
.crumbs a{color:var(--on-dark-muted);text-decoration:none;transition:color .2s var(--ease)}
.crumbs a:hover{color:#fff}
.crumbs li:not(:last-child)::after{content:"/";margin-left:.5rem;opacity:.42}
.crumbs [aria-current="page"]{color:#fff}

/* Cabecera con imagen lateral */
.phead--media .phead__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
}
@media (max-width:900px){.phead--media .phead__inner{grid-template-columns:1fr}}

/* ---------- 17. Contenido editorial ---------- */
.prose{max-width:68ch}
.prose > * + *{margin-top:1.15rem}
.prose h2{font-size:clamp(1.45rem,2.4vw,1.95rem);margin-top:2.6rem;line-height:1.14}
.prose h3{font-size:1.18rem;margin-top:2rem}
.prose p{color:var(--navy-500);line-height:1.78}
.prose ul,.prose ol{padding-left:1.15rem;color:var(--navy-500);display:grid;gap:.5rem}
.prose li{line-height:1.7}
.prose a{color:var(--green-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{color:var(--navy-700);font-weight:600}
.prose blockquote{
  margin:2rem 0;padding:1.25rem 0 1.25rem 1.5rem;
  border-left:2px solid var(--green);
  font-size:1.12rem;line-height:1.6;color:var(--navy-700);
  font-variation-settings:"wdth" 106;
}

/* Diseño de artículo con índice lateral */
.article{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
@media (max-width:980px){.article{grid-template-columns:1fr}}
.aside-box{
  position:sticky;top:96px;
  border:1px solid var(--line);border-radius:3px;
  background:var(--paper);padding:1.4rem;
  display:flex;flex-direction:column;gap:1rem;
}
.aside-box h3,.aside-box h4{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--green-ink)}
.aside-box ol{margin:0;padding-left:1.1rem;display:grid;gap:.5rem}
.aside-box a{font-size:.88rem;color:var(--navy-500);text-decoration:none;line-height:1.45}
.aside-box a:hover{color:var(--green-ink)}
@media (max-width:980px){.aside-box{position:static}}

/* Acordeón de preguntas */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.3rem 0;cursor:pointer;list-style:none;
  font-size:clamp(1rem,1.4vw,1.14rem);font-weight:600;
  font-variation-settings:"wdth" 110;color:var(--navy-700);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:var(--navy-500);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg);background:var(--green-600)}
.faq__a{padding:0 0 1.5rem;max-width:68ch;color:var(--navy-500);line-height:1.75;font-size:.98rem}

/* ---------- 18. Blog ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:2rem}
.post{display:flex;flex-direction:column;gap:.9rem;text-decoration:none;color:inherit}
.post__media{overflow:hidden;border-radius:2px;background:var(--bone-2)}
.post__media img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.post:hover .post__media img{transform:scale(1.04)}
.post__meta{
  display:flex;align-items:center;gap:.6rem;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.post__meta .tag{color:var(--green-ink)}
.post h3{font-size:1.14rem;line-height:1.28;transition:color .25s var(--ease)}
.post:hover h3{color:var(--green-ink)}
.post p{font-size:.9rem;line-height:1.6;color:var(--muted)}

.post--feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.post--feature .post__media img{aspect-ratio:16/10}
.post--feature h3{font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.12}
@media (max-width:820px){.post--feature{grid-template-columns:1fr}}

/* ---------- 19. Contacto ---------- */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* Resenas: una sola fila que se desplaza de lado, sin libreria (scroll-snap) */
/* La nota: el unico elemento con voz alta de esta seccion. Sin tarjeta, sin sombra,
   sin degradado: solo tipografia y el verde de la marca en las estrellas. */
/* Seis cifras: columnas explicitas para que ninguna fila quede con una sola.
   La regla base de .figures se deja intacta, porque index.html tiene cuatro. */
@media (min-width:600px){ .figures--6{grid-template-columns:repeat(2,1fr)} }
@media (min-width:860px){ .figures--6{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1240px){ .figures--6{grid-template-columns:repeat(6,1fr)} }

.nota{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.nota__valor{
  margin:0;font-size:clamp(2.6rem,4.6vw,3.6rem);line-height:.88;
  letter-spacing:-.03em;color:var(--navy-700);font-variation-settings:"wdth" 104;
}
.nota__estrellas{display:flex;gap:.2rem}
.nota__estrellas svg{width:1.05rem;height:1.05rem;fill:var(--green);flex:0 0 auto}
.nota__enlace{
  font-size:.85rem;color:var(--navy-500);text-decoration:none;
  border-bottom:1px solid var(--line);transition:color .3s var(--ease),border-color .3s var(--ease);
}
.nota__enlace:hover{color:var(--green-ink);border-color:var(--green)}
@media (min-width:761px){ .nota{align-items:flex-end;text-align:right} }

.resenas-wrap{position:relative}
/* Cuantas tarjetas se ven a la vez, igual que el carrusel anterior:
   4 desde 1026px, 3 hasta 1025px, 1 hasta 760px. */
.resenas{
  --g:1.25rem;--n:1;
  display:flex;gap:var(--g);align-items:stretch;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:.25rem 0 1.1rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
@media (min-width:761px){ .resenas{--n:3} }
@media (min-width:1026px){ .resenas{--n:4} }
.resenas::-webkit-scrollbar{display:none}
.resena{
  flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:.8rem;margin:0;
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:1.25rem 1.25rem 1.1rem;
}
.resena figcaption{
  font-size:.92rem;font-weight:600;color:var(--navy-700);
  font-variation-settings:"wdth" 106;
}
.resena blockquote{margin:0}
.resena blockquote p{
  margin:0;font-size:.875rem;line-height:1.58;color:var(--muted);
  overflow-wrap:anywhere;
}
.resena__estrellas{
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
  display:flex;gap:.18rem;
}
.resena__estrellas svg{width:.9rem;height:.9rem;fill:var(--green);flex:0 0 auto}

.resenas__nav{
  position:absolute;top:calc(50% - 1.2rem);z-index:2;
  width:2.4rem;height:2.4rem;display:none;place-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:50%;
  cursor:pointer;transition:border-color .3s var(--ease);
}
.resenas__nav[data-dir=prev]{left:-1.5rem}
.resenas__nav[data-dir=next]{right:-1.5rem}
.resenas__nav svg{width:1.05rem;height:1.05rem;fill:none;stroke:var(--navy-700);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.resenas__nav:hover{border-color:var(--green)}
@media (min-width:1026px){ .resenas__nav{display:grid} }

.info-row{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;
  padding:1.15rem 0;border-bottom:1px solid var(--line);
  align-items:start;
}
.info-row:first-child{border-top:1px solid var(--line)}
.info-row dt{
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);font-weight:600;min-width:7.5rem;padding-top:.2rem;
}
.info-row dd{margin:0;font-size:1rem;line-height:1.55;color:var(--navy-700);overflow-wrap:anywhere}
.info-row dd a{color:var(--navy-700);text-decoration:none;border-bottom:1px solid var(--green)}
.info-row dd a:hover{color:var(--green-ink)}

.hours{width:100%;border-collapse:collapse;font-size:.92rem}
.hours th,.hours td{padding:.68rem 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.hours th{
  font-weight:600;color:var(--navy-700);width:38%;
  font-variation-settings:"wdth" 106;
}
.hours td{color:var(--muted);font-variant-numeric:tabular-nums}
.hours tr.is-today th{color:var(--green-ink)}
.hours tr.is-today td{color:var(--navy-700);font-weight:500}
.section--dark .hours th,.cta .hours th{color:#fff}
.section--dark .hours td,.cta .hours td{color:var(--on-dark-muted)}
.section--dark .hours th,.section--dark .hours td,
.cta .hours th,.cta .hours td{border-color:var(--line-dark)}
.cta .hours tr.is-today th,.section--dark .hours tr.is-today th{color:var(--green)}
.cta .hours tr.is-today td,.section--dark .hours tr.is-today td{color:#fff}
.cta .t-small{color:var(--on-dark-muted)}

.form{display:grid;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--muted);
}
.field input,.field textarea,.field select{
  font:inherit;font-size:.98rem;
  padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:2px;
  background:var(--paper);color:var(--navy-700);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
  width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(125,205,130,.2);
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:520px){.field--row{grid-template-columns:1fr}}
.form__note{font-size:.8rem;color:var(--muted);line-height:1.5}

.map-frame{
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:var(--bone-2);aspect-ratio:16/10;
}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.82)}

/* ---------- 20. Llamada final ---------- */
.cta{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--navy-700);color:var(--on-dark);
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 60% 90% at 12% 110%,rgba(125,205,130,.22),transparent 60%),
    radial-gradient(ellipse 50% 80% at 92% -10%,rgba(93,196,195,.18),transparent 60%);
}
.cta__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
@media (max-width:860px){.cta__grid{grid-template-columns:1fr}}
.cta h2{color:#fff}
.cta .t-lead{color:rgba(255,255,255,.76)}

/* ---------- 21. Pie ---------- */
.ftr{background:var(--navy-900);color:var(--on-dark-muted);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.ftr__grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3rem);
  padding-bottom:2.75rem;border-bottom:1px solid var(--line-dark);
}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.ftr__grid{grid-template-columns:1fr}}
.ftr h3,.ftr h4{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:1.1rem;font-variation-settings:"wdth" 100;font-weight:600;
}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ftr a{color:var(--on-dark-muted);text-decoration:none;font-size:.9rem;transition:color .22s var(--ease)}
.ftr a:hover{color:var(--green)}
.ftr__brand{display:flex;flex-direction:column;gap:1rem;max-width:34ch}
.ftr__brand img{width:46px;height:46px}
.ftr__brand p{font-size:.9rem;line-height:1.65}
.ftr__social{display:flex;gap:.6rem;margin-top:.35rem}
.ftr__social a{
  width:38px;height:38px;border:1px solid var(--line-dark);border-radius:50%;
  display:grid;place-items:center;color:var(--on-dark-muted);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.ftr__social a:hover{border-color:var(--green);color:var(--navy-900);background:var(--green)}
.ftr__bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  padding-top:1.75rem;font-size:.8rem;
}
.ftr__bottom a{font-size:.8rem}

/* Botón flotante de WhatsApp */
.wa{
  position:fixed;z-index:70;
  right:clamp(14px,2.5vw,26px);
  bottom:calc(clamp(14px,2.5vw,26px) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:.6rem;
  height:54px;padding:0 1.1rem;
  background:#25D366;color:#06301A;
  border-radius:999px;text-decoration:none;
  font-size:.9rem;font-weight:600;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.42);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(0,0,0,.5)}
.wa span{display:none}
@media (min-width:720px){.wa span{display:inline}}

/* ---------- 22. Revelado al desplazar ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- 23. 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{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--green);color:var(--navy-900);
  padding:.7rem 1.1rem;border-radius:2px;font-weight:600;text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.divider{height:1px;background:var(--line);border:0;margin:0}
.section--dark .divider{background:var(--line-dark)}
.text-green{color:var(--green-ink)}
.section--dark .text-green{color:var(--green)}
.mt-lg{margin-top:2.5rem}
.mt-md{margin-top:1.5rem}

.vmap__note{
  font-size:.78rem;line-height:1.5;color:var(--muted);
  margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--line);
  max-width:60ch;
}

/* ---------- 24. Cabecera del panel de órganos ---------- */
.vbody__head{
  position:absolute;top:clamp(1.1rem,2vw,1.5rem);left:clamp(1.25rem,2.5vw,2rem);
  right:clamp(1.25rem,2.5vw,2rem);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line);
}
.vbody__head h3{font-size:1.05rem}
.vbody__head span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vbody{padding-top:clamp(4.5rem,8vw,6rem)}

/* ---------- 25. Credenciales ---------- */
.creds{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1.75rem,5vw,4rem);
  padding-block:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.creds__label{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;flex:none;max-width:12rem;line-height:1.5;
}
.creds img{
  height:clamp(30px,4vw,42px);width:auto;
  opacity:.92;
  transition:opacity .35s var(--ease);
}
.creds a:hover img,.creds img:hover{opacity:1}
.section--dark .creds{
  border:0;background:var(--paper);border-radius:4px;
  padding:clamp(1.25rem,2.5vw,1.75rem) clamp(1.25rem,3vw,2.25rem);
}
.section--dark .creds__label{color:var(--muted)}

/* ---------- 26. Galería ---------- */
/* Las fotos de sala están todas en pie (900 × 1080). La caja seguía 4:3 tumbada y
   recortaba el 37,5 % de cada una por el centro — de ahí los cuerpos sin cabeza. Ahora
   la celda sigue la proporción real, 5:6, y no se recorta nada.
   Tres columnas anchas, no cinco estrechas: son fotos en pie de una sala, y a 226 px
   no se distinguía el equipo. Además el destaque de 2 × 2 dejaba la última fila con dos
   fotos y tres huecos; sin él, las nueve llenan tres filas exactas en escritorio. */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:.85rem;
}
.gallery figure{margin:0;overflow:hidden;border-radius:2px;background:var(--bone-2)}
.gallery img{
  display:block;
  width:100%;aspect-ratio:5/6;object-fit:cover;
  filter:saturate(.88);
  transition:transform .7s var(--ease-out),filter .4s var(--ease);
}
.gallery figure:hover img{transform:scale(1.05);filter:saturate(1)}

/* Credenciales: equilibrio óptico — las proporciones reales van de 1:1 a 5,5:1,
   así que la altura se ajusta por logo en vez de usar una sola para todos. */
.creds img.creds__sq{height:clamp(40px,4.8vw,52px)}
.creds img.creds__wide{height:clamp(15px,1.9vw,21px)}

/* ---------- 27. Par comparativo (descompresión + láser) ---------- */
.duo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(1rem,2.5vw,1.75rem);
}
.duo__col{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.section--dark .duo__col{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
.duo__head{
  display:flex;align-items:center;gap:.8rem;
  padding:1.1rem 1.35rem;
  background:var(--green);color:var(--navy-900);
}
.duo__head h3{color:var(--navy-900);font-size:1rem;line-height:1.25}
.duo__head svg{flex:none}
.duo__body{padding:1.35rem;display:flex;flex-direction:column;gap:1rem;flex:1}
/* ── .duo--foto · la ficha con la foto arriba del rótulo ────────────────────
   La T8 de descompresión mostraba una foto de catálogo del fabricante y, debajo,
   una galería de nueve fotos casi iguales de la misma sala. Ahora la sección
   enseña lo que la página ya afirma y nunca mostraba: las dos zonas que trata
   el equipo, cada una con la foto de su montaje real.
   La proporción es 4:3 apaisada de propósito — las fotos son verticales (≈8:9)
   y a lo ancho de la ficha medirían unos 600 px de alto, más que el texto que
   acompañan. El .duo__col ya recorta con su overflow. */
.duo__foto{margin:0;overflow:hidden;background:var(--bone-2)}
.duo__foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.duo__body .checks li{font-size:.92rem}
.section--dark .duo__body .checks li{color:var(--on-dark)}
.duo__join{
  grid-column:1/-1;
  text-align:center;
  font-size:clamp(1.02rem,1.7vw,1.24rem);
  line-height:1.55;
  color:var(--navy-500);
  max-width:64ch;margin-inline:auto;
  font-variation-settings:"wdth" 104;
}
.section--dark .duo__join{color:var(--on-dark)}
.duo__join b{color:var(--green-ink);font-weight:600}
.section--dark .duo__join b{color:var(--green)}

/* ---------- 28. Vídeo ---------- */
.vids{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(1rem,2.5vw,1.5rem);
}
.vid{
  margin:0;position:relative;
  border:1px solid var(--line);border-radius:3px;
  overflow:hidden;background:var(--navy-900);
}
.section--dark .vid{border-color:var(--line-dark)}
.vid video{
  display:block;width:100%;aspect-ratio:3/4;
  object-fit:cover;background:var(--navy-900);
}
/* Vídeos verticales (9:16). La caja 3/4 de arriba recorta un 12,5 % arriba y abajo:
   con los montajes del M8 eso se comía la última línea de texto. Aquí la caja sigue
   la proporción del archivo. El ancho va limitado a propósito — reducidos, no se nota
   la compresión del material original. */
.vids--vertical{max-width:680px;margin-inline:auto}
.vids--vertical .vid video{aspect-ratio:9/16}

.vid figcaption{
  padding:.85rem 1.1rem;
  font-size:.84rem;line-height:1.5;color:var(--muted);
  background:var(--paper);
  border-top:1px solid var(--line);
}
.section--dark .vid figcaption{
  background:rgba(255,255,255,.04);color:var(--on-dark-muted);
  border-top-color:var(--line-dark);
}

/* Par de resonancias antes/después. Las placas son mucho más altas que anchas
   (0,45 y 0,43) y no entran en ninguno de los marcos del sitio sin recortarse, así que
   aquí la imagen manda: la caja sigue su proporción. Las dos se muestran a la misma
   altura para que la comparación sea justa, aunque el ancho salga algo distinto. */
.rmpair{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(.75rem,2vw,1.5rem);
  max-width:660px;margin-inline:auto;
  align-items:end;
}
.rmpair figure{margin:0;display:flex;flex-direction:column;gap:.9rem}
.rmpair figcaption{
  font-size:.82rem;line-height:1.5;color:var(--on-dark-muted);
  padding-top:.7rem;border-top:1px solid var(--line-dark);
  text-align:center;
}
.rmpair figcaption b{display:block;color:var(--on-dark);font-size:.95rem;margin-bottom:.15rem}

/* El marcador tiene que ir encima de la placa, así que la imagen va dentro de un
   contenedor posicionado en vez de suelta en la figura. */
.rmshot__frame{position:relative;border-radius:2px;overflow:hidden;border:1px solid var(--line-dark);background:var(--navy-900)}
.rmshot__frame img{display:block;width:100%;height:auto}

/* El anillo señala el nivel L5-S1, que está escrito en la propia placa: indica dónde
   mirar, no interpreta nada. --mx/--my lo colocan en cada imagen. */
.rmshot__mark{
  position:absolute;left:var(--mx);top:var(--my);
  width:clamp(42px,13%,58px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(1.7);
  border:2px solid var(--green);border-radius:50%;
  box-shadow:0 0 0 6px rgba(125,205,130,.14);
  opacity:0;pointer-events:none;
}

/* La franja de tiempo entre las dos placas: la línea se dibuja de izquierda a
   derecha, en el sentido en que corre el tiempo. */
.rmspan{
  align-self:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding-bottom:clamp(2.5rem,7vw,4.5rem);
}
.rmspan__label{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-variation-settings:"wdth" 112;color:var(--green);white-space:nowrap;
  opacity:0;transform:translateY(6px);
}
.rmspan__line{
  display:block;width:clamp(28px,6vw,52px);height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:left center;
}

/* Una sola secuencia, al entrar la sección: placas, línea, rótulo y anillos. */
.js .rmpair.is-in .rmspan__line{transform:scaleX(1);transition:transform .7s var(--ease-out) .55s}
.js .rmpair.is-in .rmspan__label{opacity:1;transform:none;transition:opacity .5s var(--ease-out) .95s,transform .5s var(--ease-out) .95s}
.js .rmpair.is-in .rmshot__mark{animation:rmMark .8s var(--ease-out) 1.15s forwards, rmPulse 2.4s ease-in-out 2s 3}
@keyframes rmMark{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes rmPulse{
  0%,100%{box-shadow:0 0 0 6px rgba(125,205,130,.14)}
  50%{box-shadow:0 0 0 13px rgba(125,205,130,0)}
}
@media (prefers-reduced-motion:reduce){
  .rmshot__mark{opacity:1;transform:translate(-50%,-50%) scale(1);animation:none}
  .rmspan__line{transform:scaleX(1)}
  .rmspan__label{opacity:1;transform:none}
}
@media (max-width:560px){
  .rmpair{grid-template-columns:1fr;max-width:340px}
  .rmspan{padding:0;flex-direction:row;gap:.75rem}
  .rmspan__line{width:100%;min-width:60px}
}

/* ---------- 29. Aviso clínico ---------- */
.notice{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.15rem 1.35rem;
  border:1px solid var(--line);
  border-left:3px solid var(--sand);
  border-radius:2px;
  background:var(--paper);
}
.section--dark .notice{
  background:rgba(255,255,255,.04);
  border-color:var(--line-dark);border-left-color:var(--sand);
}
.notice p{font-size:.9rem;line-height:1.62;color:var(--navy-500);margin:0}
.section--dark .notice p{color:var(--on-dark-muted)}
.notice b{
  display:block;color:var(--navy-700);font-weight:600;margin-bottom:.3rem;
  font-variation-settings:"wdth" 106;
}
.section--dark .notice b{color:#fff}

/* ---------- 30. Rejilla de indicaciones ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag-item{
  display:inline-flex;align-items:center;
  padding:.5rem .95rem;
  border:1px solid var(--line);border-radius:999px;
  background:var(--paper);
  font-size:.9rem;font-weight:500;color:var(--navy-700);
}
.section--dark .tag-item{
  background:rgba(255,255,255,.05);border-color:var(--line-dark);color:var(--on-dark);
}

/* ---------- 40. Diagrama didático dentro de un texto ----------
   Los esquemas que la clínica ya usaba en el WP (disco, subluxación, escoliosis,
   artrosis, nervio ciático, curva cervical) llegan en tamaños muy distintos: de
   510 × 215 a 540 × 993. Por eso la imagen NO se estira — `width:auto` la deja en
   su tamaño natural y `max-width:100%` la encoge cuando la columna es más estrecha.
   Estirar un esquema de 400 px a los 68ch de `.prose` lo deja pixelado y el texto
   de las etiquetas deja de leerse, que es justo lo que el esquema viene a resolver. */
.diagrama{
  margin:1.9rem 0;padding:clamp(.9rem,2vw,1.35rem);
  background:var(--bone-2);border:1px solid var(--line);border-radius:3px;
}
.diagrama img{
  width:auto;max-width:100%;height:auto;display:block;margin:0 auto;border-radius:2px;
}
.diagrama figcaption{
  margin-top:.85rem;font-size:.85rem;line-height:1.55;color:var(--muted);
}
.section--dark .diagrama{
  background:rgba(255,255,255,.04);border-color:var(--line-dark);
}
.section--dark .diagrama figcaption{color:var(--on-dark-muted,#A8BDC7)}

/* Galería de tres: con `auto-fit` la franja 768–1023 px cae a dos columnas y deja
   una foto huérfana ocupando media línea. Con tres fotos se fijan tres columnas
   desde 768 px (celda ≈ 215 px, todavía legible) y una sola columna por debajo. */
.gallery--3{grid-template-columns:1fr}
@media (min-width:768px){.gallery--3{grid-template-columns:repeat(3,1fr)}}