/* ORTHIC · página de producto — hereda tokens y componentes de style.css
 * Solo lo que la ficha de producto agrega: hero en video, visor 3D,
 * tablas de medidas, instrumental, pasos quirúrgicos y documentos.
 */

/* ── hero · video a sangre, solo marca y producto ───────────── */
.phero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:clip;
  padding-bottom:clamp(3rem, 8vh, 6rem);
}
.phero__bg{ position:absolute; inset:0; z-index:0; }
.phero__bg video,
.phero__bg img{
  width:100%; height:100%; object-fit:cover;
  /* el metal queda frío y apagado: el video es textura, no protagonista */
  filter:grayscale(0.72) contrast(1.06) brightness(0.42);
}
/* velos: oscurece abajo-izquierda para que el texto siempre lea */
.phero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(10,10,11,0.55) 38%, rgba(10,10,11,0.28) 70%),
    linear-gradient(to right, rgba(10,10,11,0.82), rgba(10,10,11,0.25) 55%, transparent 80%);
}
.phero .wrap{ position:relative; z-index:2; width:100%; }

.phero__eyebrow{
  font-size:var(--t-xs); font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--grey-1);
  margin:0 0 var(--s3);
  display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap;
}
.phero__eyebrow::before{
  content:""; width:2.5rem; height:1px;
  background:linear-gradient(to right, #C9A85C, transparent);
}
/* la marca del producto, en el mismo metal pulido del hero de portada */
.phero__mark{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(3rem, 12vw, 11rem);
  line-height:0.86;
  letter-spacing:-0.02em;
  margin:0;
  background:linear-gradient(180deg,
    #F6F4EF 0%, #D9D6CD 38%, #9B968A 62%, #8F8878 74%, #C9A85C 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.phero__mark .tm{ font-size:0.13em; font-weight:700; vertical-align:super; letter-spacing:0; }
.phero__rol{
  margin:var(--s3) 0 0;
  font-size:clamp(1.05rem, 1.4vw + 0.4rem, 1.5rem);
  font-weight:300; color:var(--grey-1);
  letter-spacing:0.02em;
}
/* fila de datos al pie del hero */
.phero__facts{
  margin-top:clamp(2rem, 5vh, 3.5rem);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px;
  border-top:1px solid var(--line-2);
  max-width:58rem;
}
.phero__facts div{ padding-top:var(--s2); }
.phero__facts b{
  display:block;
  font-family:var(--font-display); font-weight:900;
  font-size:1.15rem; line-height:1.1; letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.phero__facts span{
  display:block; margin-top:2px;
  font-size:0.68rem; line-height:1.35; color:var(--grey-2);
  letter-spacing:0.09em; text-transform:uppercase;
}
/* señal de scroll — el único movimiento del hero */
.phero__cue{
  position:absolute; z-index:2;
  right:clamp(1.25rem,4vw,4rem); bottom:clamp(3rem,8vh,6rem);
  writing-mode:vertical-rl;
  font-size:0.62rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--grey-2);
  display:flex; align-items:center; gap:0.9rem;
}
.phero__cue::after{
  content:""; width:1px; height:3.5rem;
  background:linear-gradient(to bottom, var(--grey-2), transparent);
  animation:cue 3.4s var(--ease) infinite;
}
@keyframes cue{
  0%,100%{ opacity:0.25; transform:scaleY(0.65); transform-origin:top; }
  50%    { opacity:1;    transform:scaleY(1);    transform-origin:top; }
}

/* ── ritmo de secciones · tres pesos ────────────────────────────
   El especialista baja descubriendo. No todo pesa lo mismo:
   --key  las decisiones clínicas y el implante. Mucho aire, título grande.
   (base) referencia técnica que se consulta.
   --min  material de soporte. Compacto, se pasa rápido. */
.psec{ padding-block:clamp(4rem, 10vh, 8rem); }
.psec--line{ border-top:1px solid var(--line); }

.psec--key{ padding-block:clamp(6rem, 16vh, 12rem); }
.psec--key .sec-t{
  font-size:clamp(2.4rem, 4.6vw + 0.5rem, 4.6rem);
  line-height:1.04; max-width:18ch;
}
.psec--key .sec-d{ font-size:var(--t-med); max-width:46ch; }
/* la marca del bloque protagonista: un filo dorado que arranca la sección */
.psec--key > .wrap > .sec-t .sec-num::after{ width:6rem; }

.psec--min{ padding-block:clamp(3rem, 7vh, 5rem); }
.psec--min .sec-t{ font-size:clamp(1.25rem, 1.6vw + 0.6rem, 1.9rem); max-width:34ch; }
.psec--min .sec-d{ font-size:var(--t-sm); }

/* ── clip con lectura sincronizada ──────────────────────────────
   El texto va SOBRE el video, no al lado: una sola cosa que mirar.
   Cada momento entra y sale solo, al ritmo de lo que se ve. */
.sync{
  margin-top:var(--s5);
  max-width:68rem;
  margin-inline:auto;          /* centrado en su sección */
}
/* El video se ve completo y el texto vive en su propia franja, dentro del
   mismo marco: aparece igual de sincronizado, pero sin tapar nada. */
.sync__pantalla{
  position:relative;
  background:#08080A; border:1px solid var(--line);
  overflow:hidden;
}
.sync__pantalla video{
  width:100%; height:auto; aspect-ratio:16/9;
  object-fit:contain; display:block;
}
.sync__pantalla i[data-c]{
  position:absolute; width:12px; height:12px;
  border:0 solid rgba(232,232,230,0.28); pointer-events:none;
}
.sync__pantalla i[data-c="tl"]{ top:7px; left:7px;  border-top-width:1px; border-left-width:1px; }
.sync__pantalla i[data-c="tr"]{ top:7px; right:7px; border-top-width:1px; border-right-width:1px; }
.sync__pantalla i[data-c="bl"]{ bottom:7px; left:7px;  border-bottom-width:1px; border-left-width:1px; }
.sync__pantalla i[data-c="br"]{ bottom:7px; right:7px; border-bottom-width:1px; border-right-width:1px; }
/* avance del clip: justo bajo el video, separando imagen de lectura */
.sync__prog{
  position:relative; height:2px;
  background:rgba(232,232,230,0.12);
}
.sync__prog i{
  display:block; height:100%; width:100%;
  background:#C9A85C; transform-origin:left; transform:scaleX(0);
}

/* ── el texto ───────────────────────────────────────────────────
   Sin JS queda debajo del video, como lista normal y legible.
   Con JS sube sobre el video y solo se ve el momento en curso. */
.sync__beats{
  list-style:none; margin:0; padding:var(--s3) 0 0;
}
.sync__beats li{ max-width:52ch; }
.sync__beats li + li{ margin-top:var(--s3); }

/* la franja de lectura: altura fija para que el texto no haga saltar el marco */
.sync--vivo .sync__beats{
  display:grid;
  padding:var(--s3) var(--s4) var(--s4);
  min-height:9.5rem;
  align-content:start;
  border-top:1px solid var(--line);
  background:linear-gradient(to bottom, #0C0C0E, #090909);
}
.sync--vivo .sync__beats li{
  grid-area:1/1;
  max-width:64ch;
  opacity:0; transform:translateY(10px);
  transition:opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events:none;
}
.sync--vivo .sync__beats li + li{ margin-top:0; }
.sync--vivo .sync__beats li[aria-current="true"]{
  opacity:1; transform:none; pointer-events:auto;
}

.sync__beats b{
  display:block;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.05rem, 1.4vw + 0.4rem, 1.6rem);
  color:#fff; line-height:1.2; letter-spacing:-0.01em;
  text-wrap:balance;
}
.sync__beats p{
  margin:0.5rem 0 0;
  font-size:var(--t-sm); color:#C8C8C4; line-height:1.6;
  max-width:52ch;
}
.sync__t{
  display:inline-block; margin-bottom:0.5rem;
  font-size:0.6rem; letter-spacing:0.2em;
  font-variant-numeric:tabular-nums;
  color:#C9A85C;
  padding-left:1.4rem; position:relative;
}
.sync__t::before{
  content:""; position:absolute; left:0; top:50%;
  width:1rem; height:1px; background:#C9A85C;
}

/* ── capítulos: navegar sin quitar espacio al video ─────────── */
.sync__nav{
  display:flex; gap:1px; margin-top:1px;
  background:var(--line);
  border:1px solid var(--line); border-top:0;
}
.sync__nav button{
  flex:1; background:var(--bg); border:0; cursor:pointer;
  padding:0.7rem 0.6rem;
  text-align:left; color:var(--grey-2);
  font-family:inherit;
  font-size:0.63rem; letter-spacing:0.1em; text-transform:uppercase;
  transition:color 0.3s var(--ease), background-color 0.3s var(--ease);
  position:relative;
}
.sync__nav button::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:#C9A85C; transform:scaleX(0); transform-origin:left;
  transition:transform 0.4s var(--ease);
}
.sync__nav button:hover{ color:var(--text); background:var(--bg-2); }
.sync__nav button[aria-current="true"]{ color:var(--text); background:var(--bg-2); }
.sync__nav button[aria-current="true"]::before{ transform:scaleX(1); }
.sync__nav i{
  display:block; font-style:normal; color:var(--grey-2);
  font-size:0.58rem; margin-bottom:0.2rem;
  font-variant-numeric:tabular-nums;
}

/* quien pide menos movimiento lo lee todo de una vez, sin video */
@media (prefers-reduced-motion:reduce){
  .sync__beats li{ opacity:1; transform:none; transition:none; }
  .sync__pantalla::after{ display:none; }
  .sync__prog{ display:none; }
}
@media (max-width:48rem){
  .sync--vivo .sync__beats{ min-height:11rem; padding:var(--s3); }
  .sync__nav{ display:none; }
}

/* enunciado grande: el argumento del producto */
.claim{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.5rem, 2.6vw + 0.4rem, 2.6rem);
  line-height:1.16; letter-spacing:-0.015em;
  max-width:26ch;
  margin:0;
}
.claim em{ font-style:normal; color:var(--grey-2); }

.two{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
}
.prose{ max-width:44ch; color:var(--grey-1); font-size:var(--t-med); }
.prose p{ margin:0 0 var(--s3); }
.prose p:last-child{ margin-bottom:0; }
.prose b{ color:var(--text); font-weight:400; }

/* ── movimiento: los cuatro ejes ────────────────────────────── */
.motions{
  margin-top:var(--s5);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:1px solid var(--line-2);
}
.motions div{
  padding:var(--s3) var(--s2) 0 0;
  border-right:1px solid var(--line);
}
.motions div:last-child{ border-right:0; }
.motions b{ display:block; font-size:var(--t-base); font-weight:400; }
.motions span{
  display:block; margin-top:0.35rem;
  font-size:var(--t-xs); color:var(--grey-2); line-height:1.45;
}

/* ── visor 3D · el bloque protagonista ──────────────────────────
   Es lo único de la página que el cirujano puede tomar y girar.
   Ocupa más que cualquier otra cosa y no comparte fila con nada. */
.viewer{
  position:relative; margin-top:var(--s5);
  border:1px solid var(--line-2);
  background:
    radial-gradient(120% 90% at 50% 38%, #17171A 0%, var(--bg) 72%);
}
/* halo frío muy tenue: separa el objeto del fondo sin ensuciarlo */
.viewer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 40% at 50% 45%, rgba(127,168,196,0.07), transparent 70%);
}
/* la capa del modelo: aquí viven las esquinas, los chips y el pie */
.viewer__stage{ position:relative; }
.viewer model-viewer{
  width:100%; height:clamp(28rem, 76vh, 52rem);
  background:transparent; display:block;
  --poster-color:transparent;
}
/* dato al pie del visor, para que el bloque no sea solo un juguete */
.viewer__spec{
  display:flex; flex-wrap:wrap; gap:0 var(--s4);
  border-top:1px solid var(--line);
  padding:var(--s3);
}
.viewer__spec div{ padding-right:var(--s4); }
.viewer__spec b{
  display:block;
  font-family:var(--font-display); font-weight:900;
  font-size:1.05rem; letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.viewer__spec span{
  display:block; margin-top:2px;
  font-size:0.63rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grey-2);
}
/* escuadras: la retícula de instrumento que ya usa el sitio */
.viewer i[data-c]{
  position:absolute; width:14px; height:14px;
  border:1px solid var(--line-2); pointer-events:none;
}
.viewer i[data-c="tl"]{ top:12px; left:12px;  border-right:0; border-bottom:0; }
.viewer i[data-c="tr"]{ top:12px; right:12px; border-left:0;  border-bottom:0; }
.viewer i[data-c="bl"]{ bottom:12px; left:12px;  border-right:0; border-top:0; }
.viewer i[data-c="br"]{ bottom:12px; right:12px; border-left:0;  border-top:0; }

.viewer__hint{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s2) var(--s3);
  font-size:0.65rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grey-2);
  pointer-events:none;
}
button[slot="ar-button"]{
  position:absolute; right:var(--s3); top:var(--s3);
  background:rgba(10,10,11,0.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:0.7rem 1.1rem;
  font-family:var(--font); font-size:0.65rem; font-weight:400;
  letter-spacing:0.16em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color 0.3s var(--ease);
}
button[slot="ar-button"]:hover{ border-color:var(--text); }

/* ── medidas ────────────────────────────────────────────────── */
.sizes{
  margin-top:var(--s5);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.sizes article{
  background:var(--bg);
  padding:var(--s4) var(--s3);
  transition:background-color 0.4s var(--ease);
}
.sizes article:hover{ background:var(--bg-2); }
.sizes b{
  font-family:var(--font-display); font-weight:900;
  font-size:1.9rem; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  display:block;
}
.sizes span{
  display:block; margin-top:0.5rem;
  font-size:var(--t-xs); color:var(--grey-2);
  letter-spacing:0.1em; text-transform:uppercase;
}
.heights{
  margin-top:var(--s4);
  display:flex; flex-wrap:wrap; gap:0.5rem;
}
.heights i{
  font-style:normal;
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:0.5rem 0.85rem;
  font-size:var(--t-sm); color:var(--grey-1);
  font-variant-numeric:tabular-nums;
}

/* ── tabla genérica (instrumental) ──────────────────────────── */
.tbl{ width:100%; border-collapse:collapse; margin-top:var(--s4); }
.tbl caption{
  text-align:left; padding-bottom:var(--s2);
  font-size:var(--t-xs); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grey-2);
}
.tbl th, .tbl td{
  text-align:left; padding:var(--s2) var(--s2) var(--s2) 0;
  border-bottom:1px solid var(--line);
  font-weight:300; font-size:var(--t-base);
}
.tbl th{
  font-size:var(--t-xs); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grey-2); font-weight:400;
  border-bottom-color:var(--line-2);
}
.tbl td:last-child{
  color:var(--grey-2); font-variant-numeric:tabular-nums;
  white-space:nowrap; text-align:right; padding-right:0;
}

/* ── pasos quirúrgicos ──────────────────────────────────────── */
.steps{
  margin-top:var(--s5);
  border-top:1px solid var(--line-2);
  counter-reset:paso;
}
.steps li{
  list-style:none;
  display:grid; grid-template-columns:4.5rem minmax(0,1fr);
  gap:var(--s3);
  padding-block:var(--s3);
  border-bottom:1px solid var(--line);
  counter-increment:paso;
}
.steps li::before{
  content:"0" counter(paso);
  font-family:var(--font); font-size:var(--t-sm);
  letter-spacing:0.2em; color:#C9A85C;
  font-variant-numeric:tabular-nums;
  padding-top:0.2rem;
}
/* título y descripción comparten la segunda columna; el número ocupa la primera */
.steps b, .steps span{ grid-column:2; }
.steps b{ display:block; font-weight:400; font-size:var(--t-med); }
.steps span{
  display:block; margin-top:0.4rem;
  color:var(--grey-2); font-size:var(--t-sm); line-height:1.6;
  max-width:62ch;
}

/* ── indicaciones / contraindicaciones ──────────────────────── */
/* las columnas se reparten por lo que pesa cada lista, no a medias */
.clin{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.45fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
  margin-top:var(--s5);
}
.clin section{ background:var(--bg); padding:var(--s4); }
.clin h3{
  font-family:var(--font-display); font-weight:800;
  font-size:var(--t-med); letter-spacing:-0.01em; text-transform:none;
  color:var(--text);
  margin:0 0 var(--s3);
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
}
.clin h3 em{
  display:block; margin-top:0.3rem;
  font-style:normal; font-family:var(--font); font-weight:300;
  font-size:var(--t-xs); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grey-2);
}
.clin ul{ margin:0; padding:0; list-style:none; }
/* la lista larga fluye en dos columnas y deja de estirar la sección */
.clin section:last-child ul{
  columns:2; column-gap:var(--s4);
}
.clin li{
  padding:0.3rem 0 0.3rem 1.1rem;
  position:relative;
  font-size:var(--t-base); color:var(--grey-1); line-height:1.5;
  break-inside:avoid;
}
.clin li::before{
  content:""; position:absolute; left:0; top:0.95rem;
  width:5px; height:1px; background:#C9A85C; opacity:0.7;
}

/* ── manejo del producto ────────────────────────────────────────
   Era un párrafo de letra chica que nadie lee. Los datos que cambian
   la programación de quirófano se leen de un vistazo. */
.manejo{
  margin-top:var(--s4);
  border:1px solid var(--line);
  border-left:2px solid #C9A85C;
}
.manejo > h3{
  margin:0; padding:var(--s3) var(--s3) 0;
  font-family:var(--font-display); font-weight:800;
  font-size:var(--t-med); letter-spacing:-0.01em; color:var(--text);
}
.manejo__g{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px; background:var(--line);
  margin:var(--s3) 0 0;
  border-top:1px solid var(--line);
}
.manejo__g div{ background:var(--bg); padding:var(--s3); }
.manejo__g b{
  display:block;
  font-family:var(--font-display); font-weight:900;
  font-size:1.05rem; letter-spacing:-0.01em; color:var(--text);
}
.manejo__g span{
  display:block; margin-top:0.4rem;
  font-size:var(--t-sm); color:var(--grey-1); line-height:1.5;
}
.manejo > p{
  margin:0; padding:var(--s3);
  border-top:1px solid var(--line);
  font-size:var(--t-sm); color:var(--grey-2); line-height:1.7;
}

@media (max-width:60rem){
  .clin{ grid-template-columns:1fr; }
  .clin section:last-child ul{ columns:1; }
  .manejo__g{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:38rem){
  .manejo__g{ grid-template-columns:1fr; }
}
.nota{
  margin-top:var(--s4);
  padding:var(--s3);
  border:1px solid var(--line);
  border-left:2px solid #C9A85C;
  font-size:var(--t-sm); color:var(--grey-2); line-height:1.65;
  max-width:70ch;
}

/* documentos: ver docviewer.css */

/* ── clip explicado ─────────────────────────────────────────────
   Una pantalla reproduciendo un fragmento del video, con el texto
   que lo explica al lado. Como una cédula de museo. */
.museo{
  margin:var(--s5) 0 0;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:var(--s4);
  align-items:center;
}
.museo--rev .museo__pantalla{ order:2; }
.museo--wide{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); }

.museo__pantalla{
  position:relative;
  aspect-ratio:16/9;
  background:#08080A;
  border:1px solid var(--line);
  overflow:hidden;
}
.museo__pantalla video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* escuadras en las esquinas: la pantalla como instrumento */
.museo__pantalla i{
  position:absolute; width:12px; height:12px;
  border:0 solid rgba(232,232,230,0.28);
  pointer-events:none;
}
.museo__pantalla i[data-c="tl"]{ top:7px; left:7px; border-top-width:1px; border-left-width:1px; }
.museo__pantalla i[data-c="tr"]{ top:7px; right:7px; border-top-width:1px; border-right-width:1px; }
.museo__pantalla i[data-c="bl"]{ bottom:7px; left:7px; border-bottom-width:1px; border-left-width:1px; }
.museo__pantalla i[data-c="br"]{ bottom:7px; right:7px; border-bottom-width:1px; border-right-width:1px; }

.museo__txt{
  display:grid; gap:var(--s2); align-content:center;
  padding-left:var(--s3);
  border-left:1px solid var(--line-2);
  max-width:46ch;
}
.museo--rev .museo__txt{
  padding-left:0; padding-right:var(--s3);
  border-left:0; border-right:1px solid var(--line-2);
  text-align:right; justify-items:end;
}
.museo__k{
  font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase;
  color:#C9A85C;
}
.museo__txt b{
  font-weight:300; font-size:var(--t-med); color:var(--text);
  line-height:1.25; letter-spacing:-0.01em;
}
.museo__txt p{
  font-size:var(--t-sm); color:var(--grey-1); line-height:1.7;
}

/* ── imagenología ───────────────────────────────────────────── */
/* misma caja para las tres: los pies quedan a la misma altura */


/* ── imagen suelta con pie ──────────────────────────────────── */
.shot{ margin:var(--s5) 0 0; }
.shot img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line);
  background:#0E0E10;
}
.shot--par img{ max-width:34rem; }
.shot--mid img{ max-width:44rem; }
.shot figcaption{
  margin-top:var(--s2);
  font-size:var(--t-xs); color:var(--grey-2);
}

/* ── video del producto ─────────────────────────────────────── */
.tube{
  margin-top:var(--s5);
  position:relative; aspect-ratio:16/9;
  border:1px solid var(--line);
  background:var(--bg-2);
}
.tube iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ── navegación de vuelta ───────────────────────────────────── */
.back{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:var(--t-xs); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grey-2);
  transition:color 0.3s var(--ease);
}
.back:hover{ color:var(--text); }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:60rem){
  .two{ grid-template-columns:1fr; }
  .sizes{ grid-template-columns:1fr; }
  .clin{ grid-template-columns:1fr; }
  .motions{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .motions div:nth-child(2){ border-right:0; }
  .phero__facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) 1px; }
  .phero__cue{ display:none; }

  /* el clip se apila sobre su explicación */
  .museo, .museo--wide{ grid-template-columns:1fr; gap:var(--s3); }
  .museo--rev .museo__pantalla{ order:0; }
  .museo__txt, .museo--rev .museo__txt{
    padding:0 0 0 var(--s3); border:0; border-left:1px solid var(--line-2);
    text-align:left; justify-items:start; max-width:none;
  }
  }
@media (max-width:38rem){
  .motions{ grid-template-columns:1fr; }
  .motions div{ border-right:0; border-bottom:1px solid var(--line); padding-bottom:var(--s2); }
  .steps li{ grid-template-columns:1fr; gap:0.35rem; }
  .steps b, .steps span{ grid-column:1; }
  }

/* ── respeto por quien pide menos movimiento ────────────────── */
@media (prefers-reduced-motion: reduce){
  .phero__cue::after{ animation:none; }
  .phero__bg video{ display:none; }
  }
/* sin video: el póster hace el trabajo */
@media (prefers-reduced-motion: reduce){
  .museo__pantalla video{
    background-size:cover; background-position:center;
  }
}

/* ═══════════ selector de modelos 3D · chips dentro del visor ═══════════ */
.mvpick{
  position:absolute; z-index:3;
  left:50%; bottom:0.9rem; transform:translateX(-50%);
  display:flex; gap:0.3rem;
  padding:0.28rem;
  background:rgba(10,10,11,0.62);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(232,232,230,0.14);
  border-radius:999px;
  max-width:calc(100% - 1.5rem);
}
.mvpick__b{
  background:none; border:0; cursor:pointer;
  padding:0.42rem 0.85rem;
  border-radius:999px;
  white-space:nowrap;
  transition:background-color 0.3s var(--ease);
}
.mvpick__b b{
  font-family:var(--font-display); font-weight:700;
  font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--grey-1);
  transition:color 0.3s var(--ease);
}
.mvpick__b:hover{ background:rgba(232,232,230,0.08); }
.mvpick__b:hover b{ color:var(--text); }
.mvpick__b[aria-pressed="true"]{ background:rgba(201,168,92,0.16); }
.mvpick__b[aria-pressed="true"] b{ color:#C9A85C; }
.mvpick__b:focus-visible{ outline:1px solid #C9A85C; outline-offset:1px; }

/* el hint sube para no chocar con los chips */
.viewer__hint{ bottom:3.6rem; }

/* ═══════════ clips de manufactura ═══════════ */
.clip{
  margin:var(--s5) 0 0; position:relative;
  border-radius:4px; overflow:hidden;
  box-shadow:0 0 0 1px var(--line);
}
.clip video{
  width:100%; height:clamp(11rem, 26vh, 17rem); display:block;
  object-fit:cover;
  filter:saturate(0.7) contrast(1.05) brightness(0.78);
}
.clip::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,11,0.55), transparent 42%);
}
.clip figcaption{
  position:absolute; left:var(--s3); bottom:var(--s3); z-index:2;
  font-size:var(--t-xs); color:var(--grey-1);
  letter-spacing:0.06em;
  text-shadow:0 1px 8px rgba(0,0,0,0.9);
}

/* ═══════════ render del set ═══════════ */
.setshot{
  margin:var(--s5) 0 0;
  border-radius:4px; overflow:hidden;
  box-shadow:0 0 0 1px var(--line);
  background:#0E0E10;
}
/* la foto del set viene sobre fondo de estudio blanco: se atenúa para que
   no queme la página y se lea como el resto del material */
.setshot img{
  width:100%; max-width:46rem; height:auto; display:block;
  filter:grayscale(0.4) brightness(0.68) contrast(1.1);
  transition:filter 0.6s var(--ease);
}
.setshot:hover img{ filter:grayscale(0) brightness(0.92) contrast(1.02); }
.setshot figcaption{
  padding:var(--s2) var(--s3);
  font-size:var(--t-xs); color:var(--grey-2);
  border-top:1px solid var(--line);
}

@media (max-width:48rem){
  .mvpick{ bottom:0.6rem; gap:0.2rem; padding:0.22rem; }
  .mvpick__b{ padding:0.38rem 0.6rem; }
  .mvpick__b b{ font-size:0.55rem; letter-spacing:0.06em; }
  .viewer__hint{ bottom:3.1rem; font-size:0.62rem; }
}
@media (prefers-reduced-motion:reduce){
  .clip video{ display:none; }
  .clip{ background-image:var(--poster); background-size:cover; min-height:14rem; }
}

/* ═══════════ hero · video de PROCORAL en bucle ═══════════
   Servido desde el sitio, no incrustado: así no aparecen controles,
   título ni marca de la plataforma sobre el hero. */
.phero__bg video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}
.phero__fallback{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-1;
}

/* ═══════════ pestañas de ficha técnica ═══════════ */
.tabs{ margin-top:var(--s5); }
.tabs__bar{
  display:flex; gap:0; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.tabs__bar button{
  background:none; border:0; cursor:pointer;
  padding:0.9rem 1.4rem;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--t-xs); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--grey-2);
  position:relative;
  transition:color 0.3s var(--ease);
}
.tabs__bar button::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:#C9A85C; transform:scaleX(0); transform-origin:center;
  transition:transform 0.35s var(--ease);
}
.tabs__bar button:hover{ color:var(--grey-1); }
.tabs__bar button[aria-selected="true"]{ color:var(--text); }
.tabs__bar button[aria-selected="true"]::after{ transform:scaleX(1); }
.tabs__bar button:focus-visible{ outline:1px solid #C9A85C; outline-offset:-3px; }
.tabs__panels{ padding-top:var(--s4); }
.tabs__panels > div{ animation:tabin 0.45s var(--ease); }
@keyframes tabin{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ═══════════ técnica quirúrgica · acordeón ═══════════ */

/* la cruz gira a menos al abrir */

@media (max-width:48rem){
  .tabs__bar button{ padding:0.75rem 0.9rem; font-size:0.6rem; letter-spacing:0.08em; }
  }
@media (prefers-reduced-motion:reduce){
  .tabs__panels > div, }

/* ═══════════ códigos de referencia ═══════════
   Lo que de verdad se usa para pedir: talla + número de parte. */
.refs__t{
  margin-top:var(--s6);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.15rem, 1.4vw + 0.5rem, 1.6rem);
  letter-spacing:-0.01em;
}
.refs__grid{
  margin-top:var(--s4);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s4);
  align-items:start;
}
.tbl.refs{ margin-top:0; }
.tbl.refs caption{
  text-align:left; padding-bottom:var(--s2);
  font-size:var(--t-xs); letter-spacing:0.16em; text-transform:uppercase;
  color:#C9A85C;
}
.tbl.refs td{ font-variant-numeric:tabular-nums; }
.tbl.refs td:last-child{ color:var(--grey-1); white-space:nowrap; }

/* ═══════════ descarga directa del documento ═══════════ */
.docitem{ position:relative; display:grid; }
.docitem .doccard{ padding-right:2.8rem; }
.docdl{
  position:absolute; top:var(--s3); right:0.7rem;
  width:1.7rem; height:1.7rem; border-radius:2px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  color:var(--grey-2); font-size:0.9rem; line-height:1;
  transition:border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.docdl:hover{ border-color:#C9A85C; color:var(--text); }

/* ═══════════ respaldo del visor 3D ═══════════
   Red hospitalaria filtrada: el modelo no carga, la pieza sí se ve. */
.mv__poster{ display:grid; place-items:center; height:100%; background:transparent; }
.mv__poster img{ max-width:min(52%, 30rem); height:auto; opacity:0.9; }


/* dato operativo, con el filo de aviso */
.nota--op{ border-left-color:#C9A85C; }

/* ═══════════ acciones siempre a la mano ═══════════ */
.hdr__cta{
  border:1px solid var(--line-2); border-radius:999px;
  padding:0.4rem 0.95rem;
  color:var(--text) !important;
  transition:border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.hdr__cta:hover{ border-color:#C9A85C; background:rgba(201,168,92,0.1); }

/* barra fija: solo en celular, que es donde la abre el representante */
.cta-fija{ display:none; }
@media (max-width:48rem){
  .cta-fija{
    position:fixed; z-index:60; left:0; right:0; bottom:0;
    display:grid; grid-template-columns:1fr 1.25fr; gap:1px;
    background:var(--line);
    border-top:1px solid var(--line-2);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  .cta-fija__b{
    padding:0.95rem 0.6rem; text-align:center;
    background:rgba(10,10,11,0.94); color:var(--text);
    font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  }
  .cta-fija__b--alt{ color:var(--grey-1); }
  /* que la barra no tape el final de la página */
  body{ padding-bottom:3.4rem; }
  .hdr__cta{ display:none; }
  .refs__grid{ grid-template-columns:1fr; }
}
@media (max-width:60rem){
  .refs__grid{ grid-template-columns:1fr 1fr; }
}

/* ═══════════ tiempos quirúrgicos ═══════════
   Nueve pasos no se leen como lista de nueve renglones: se recorren.
   Índice compacto a un lado, un solo tiempo a la vista. */
.tiempos{
  margin-top:var(--s5);
  display:grid; grid-template-columns:minmax(13rem, 19rem) minmax(0, 1fr);
  gap:var(--s4);
  align-items:start;
}

/* la regleta: los nueve, pero sin gritar */
.tiempos__regleta{
  display:grid;
  border-top:1px solid var(--line);
}
.tiempos__regleta button{
  position:relative;
  background:none; border:0; border-bottom:1px solid var(--line);
  cursor:pointer; text-align:left;
  padding:0.62rem 0.5rem 0.62rem 0;
  display:flex; align-items:baseline; gap:0.85rem;
  font-family:inherit;
  transition:padding-left 0.35s var(--ease);
}
.tiempos__regleta button::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:2px;
  background:#C9A85C; transform:scaleY(0); transform-origin:center;
  transition:transform 0.35s var(--ease);
}
.tiempos__regleta i{
  font-style:normal; flex:none;
  font-family:var(--font-display); font-weight:700;
  font-size:0.62rem; letter-spacing:0.1em;
  color:var(--grey-2); font-variant-numeric:tabular-nums;
  transition:color 0.3s var(--ease);
}
.tiempos__regleta span{
  font-size:var(--t-sm); font-weight:300; color:var(--grey-2);
  line-height:1.3;
  transition:color 0.3s var(--ease);
}
.tiempos__regleta button:hover span{ color:var(--grey-1); }
.tiempos__regleta button:hover{ padding-left:0.4rem; }
.tiempos__regleta button[aria-selected="true"]{ padding-left:0.7rem; }
.tiempos__regleta button[aria-selected="true"]::before{ transform:scaleY(1); }
.tiempos__regleta button[aria-selected="true"] i{ color:#C9A85C; }
.tiempos__regleta button[aria-selected="true"] span{ color:var(--text); }
.tiempos__regleta button:focus-visible{ outline:1px solid #C9A85C; outline-offset:-2px; }

/* el tiempo en curso */
.tiempos__panel{
  position:relative;
  border:1px solid var(--line); border-radius:3px;
  background:linear-gradient(160deg, #101012 0%, var(--bg) 62%);
  padding:var(--s4);
  min-height:20rem;
  display:grid; grid-template-rows:1fr auto;
}
.tiempo[hidden]{ display:none; }
.tiempo{ animation:tiempoEntra 0.5s var(--ease) both; }
@keyframes tiempoEntra{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
.tiempo__n{
  font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase;
  color:#C9A85C; font-variant-numeric:tabular-nums;
}
.tiempo__n em{ font-style:normal; color:var(--grey-2); }
.tiempo__t{
  margin:var(--s2) 0 0;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.3rem, 2vw + 0.4rem, 2rem);
  line-height:1.15; letter-spacing:-0.015em;
  max-width:22ch; text-wrap:balance;
}
.tiempo__d{
  margin:var(--s3) 0 0;
  color:var(--grey-1); font-size:var(--t-med); line-height:1.7;
  max-width:52ch;
}
/* el instrumental que pide ese tiempo, con su referencia */
.tiempo__ins{ margin-top:var(--s4); }
.tiempo__ins-t{
  font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--grey-2); margin-bottom:var(--s2);
}
.tiempo__ins ul{
  list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:2px;
}
.tiempo__ins li{
  background:var(--bg);
  padding:0.6rem 0.8rem;
  display:flex; justify-content:space-between; gap:var(--s3); align-items:baseline;
  flex-wrap:wrap;
}
.tiempo__ins b{ font-weight:400; font-size:var(--t-sm); color:var(--text); }
.tiempo__ins span{
  font-size:var(--t-xs); color:var(--grey-2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* avance entre tiempos */
.tiempos__nav{
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1px solid var(--line);
  display:flex; align-items:center; gap:var(--s3);
}
.tiempos__nav button{
  background:none; border:1px solid var(--line); border-radius:999px;
  width:2.2rem; height:2.2rem; flex:none; cursor:pointer; color:var(--grey-1);
  transition:border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.tiempos__nav button:hover:not(:disabled){ border-color:#C9A85C; color:var(--text); }
.tiempos__nav button:disabled{ opacity:0.3; cursor:default; }
.tiempos__barra{
  flex:1; height:1px; background:var(--line); display:block; position:relative;
}
.tiempos__barra i{
  position:absolute; inset:0; display:block;
  background:#C9A85C; transform-origin:left; transform:scaleX(0.111);
  transition:transform 0.45s var(--ease);
}

@media (max-width:60rem){
  .tiempos{ grid-template-columns:1fr; }
  /* la regleta se vuelve carrete horizontal: sigue sin ser lista larga */
  .tiempos__regleta{
    grid-auto-flow:column; grid-auto-columns:minmax(9rem, auto);
    overflow-x:auto; border-top:0; border-bottom:1px solid var(--line);
    scrollbar-width:thin; scrollbar-color:rgba(201,168,92,0.4) transparent;
  }
  .tiempos__regleta button{
    border-bottom:0; border-right:1px solid var(--line);
    flex-direction:column; gap:0.3rem; padding:0.7rem 0.8rem;
  }
  .tiempos__regleta button::before{
    width:auto; height:2px; left:0; right:0; top:auto; bottom:0;
    transform:scaleX(0);
  }
  .tiempos__regleta button[aria-selected="true"]::before{ transform:scaleX(1); }
  .tiempos__regleta button:hover,
  .tiempos__regleta button[aria-selected="true"]{ padding-left:0.8rem; }
  .tiempos__panel{ min-height:0; padding:var(--s3); }
}
@media (prefers-reduced-motion:reduce){
  .tiempo{ animation:none; }
  .tiempos__regleta button, .tiempos__barra i{ transition:none; }
}

/* ═══════════ galería clínica ═══════════
   Una radiografía en miniatura no sirve de nada: la pieza va grande,
   con su lectura al lado y la tira para cambiar. */
.gal{
  margin-top:var(--s5);
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas:
    "vista info"
    "tira  info";
  gap:var(--s4);
  align-items:start;
}
.gal__vista{
  grid-area:vista; margin:0; position:relative;
  border:1px solid var(--line);
  background:#08080A;
}
.gal__lupa{
  display:block; width:100%; padding:0; border:0; cursor:zoom-in;
  background:none; position:relative;
}
.gal__lupa img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  display:block;
  filter:contrast(1.06);
  transition:opacity 0.3s var(--ease);
}
.gal__lupa img.cambia{ opacity:0; }
.gal__lupa-i{
  position:absolute; right:0.9rem; bottom:0.9rem;
  padding:0.4rem 0.8rem;
  background:rgba(8,8,9,0.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(232,232,230,0.18); border-radius:2px;
  font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text);
  opacity:0; transform:translateY(4px);
  transition:opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.gal__lupa:hover .gal__lupa-i,
.gal__lupa:focus-visible .gal__lupa-i{ opacity:1; transform:none; }
.gal__lupa--plana{ cursor:default; }
.gal__lupa--plana .gal__lupa-i{ display:none; }
/* escuadras del marco */
.gal__vista i[data-c]{
  position:absolute; width:12px; height:12px;
  border:0 solid rgba(232,232,230,0.28); pointer-events:none;
}
.gal__vista i[data-c="tl"]{ top:7px; left:7px;  border-top-width:1px; border-left-width:1px; }
.gal__vista i[data-c="tr"]{ top:7px; right:7px; border-top-width:1px; border-right-width:1px; }
.gal__vista i[data-c="bl"]{ bottom:7px; left:7px;  border-bottom-width:1px; border-left-width:1px; }
.gal__vista i[data-c="br"]{ bottom:7px; right:7px; border-bottom-width:1px; border-right-width:1px; }

/* la lectura */
/* el panel llena el alto de la imagen: nada de bloque flotando al centro */
.gal__info{
  grid-area:info; align-self:stretch;
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:3px;
  background:linear-gradient(160deg, #101012 0%, var(--bg) 60%);
  display:grid; grid-template-rows:auto 1fr auto;
  align-content:stretch;
}
.gal__top{ align-self:start; }
/* el pie se ancla abajo y cierra la columna */
.gal__pie{
  grid-row:3; align-self:end;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap;
  padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.gal__mov{ display:flex; gap:0.4rem; }
.gal__mov button{
  background:none; border:1px solid var(--line); border-radius:999px;
  width:2.2rem; height:2.2rem; cursor:pointer; color:var(--grey-1);
  transition:border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.gal__mov button:hover{ border-color:#C9A85C; color:var(--text); }
.gal__ver{
  background:none; cursor:pointer;
  border:1px solid var(--line-2); border-radius:2px;
  padding:0.6rem 1.1rem;
  color:var(--text); font-family:inherit;
  font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase;
  transition:border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.gal__ver:hover{ border-color:#C9A85C; background:rgba(201,168,92,0.1); }
.gal__n{
  display:flex; align-items:baseline; gap:0.6rem; flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.gal__n b{
  font-family:var(--font-display); font-weight:900;
  font-size:1.6rem; color:#C9A85C; line-height:1;
}
.gal__n em{ font-style:normal; font-size:var(--t-xs); color:var(--grey-2); }
.gal__n span{
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--grey-2);
  padding-left:0.8rem; margin-left:0.2rem;
  border-left:1px solid var(--line-2);
}
.gal__t{
  margin:var(--s3) 0 0;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem, 2.5vw + 0.4rem, 2.6rem);
  line-height:1.15; letter-spacing:-0.015em;
  max-width:20ch; text-wrap:balance;
}
.gal__d{
  margin:var(--s4) 0 0;
  color:var(--grey-1); font-size:var(--t-med); line-height:1.75;
  max-width:44ch;
}

/* la tira */
.gal__tira{
  grid-area:tira;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.gal__tira button{
  position:relative; padding:0; border:0; cursor:pointer;
  background:var(--bg); display:block; text-align:left;
  font-family:inherit;
}
.gal__tira img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block;
  opacity:0.4; filter:grayscale(0.3);
  transition:opacity 0.35s var(--ease), filter 0.35s var(--ease);
}
.gal__tira button:hover img{ opacity:0.75; filter:grayscale(0); }
.gal__tira button[aria-selected="true"] img{ opacity:1; filter:none; }
.gal__tira span{
  display:block; padding:0.5rem 0.6rem;
  font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--grey-2); line-height:1.3;
  transition:color 0.3s var(--ease);
}
.gal__tira button[aria-selected="true"] span{ color:var(--text); }
.gal__tira button[aria-selected="true"]::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:#C9A85C;
}
.gal__tira button:focus-visible{ outline:1px solid #C9A85C; outline-offset:-2px; }

/* ═══════════ imagen a tamaño completo ═══════════ */
.lupa{
  border:0; padding:0; background:transparent;
  max-width:min(96vw, 78rem); max-height:94vh;
  color:var(--text);
}
.lupa::backdrop{
  background:rgba(6,6,7,0.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lupa img{
  display:block; max-width:100%; max-height:84vh;
  width:auto; height:auto; margin:0 auto;
  border:1px solid var(--line-2);
  background:#08080A;
}
.lupa__pie{
  margin-top:var(--s2); text-align:center;
  font-size:var(--t-xs); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--grey-2);
}
.lupa__x{
  position:absolute; top:-0.5rem; right:-0.5rem;
  width:2.2rem; height:2.2rem; border-radius:999px;
  background:var(--bg-2); border:1px solid var(--line-2);
  color:var(--text); font-size:1.2rem; line-height:1; cursor:pointer;
}
.lupa__x:hover{ border-color:#C9A85C; }

@media (max-width:60rem){
  .gal{
    grid-template-columns:1fr;
    grid-template-areas: "vista" "info" "tira";
  }
  .gal__info{ padding-left:0; border-left:0; grid-template-rows:auto auto; gap:var(--s3); }
  .gal__pie{ grid-row:auto; }
  .lupa__x{ top:0.4rem; right:0.4rem; }
}

/* ═══════════ ficha con índice lateral ═══════════
   El patrón de la opción B: los temas a un lado, uno solo abierto.
   Nada de cuatro pestañas con tablas largas cayendo de golpe. */
.tabs--lado{
  display:grid;
  grid-template-columns:minmax(14rem, 21rem) minmax(0, 1fr);
  gap:var(--s5);
  align-items:start;
}
.tabs--lado .tabs__bar{
  display:grid;
  flex-wrap:nowrap;
  border-bottom:0;
  border-top:1px solid var(--line);
  position:sticky; top:calc(var(--s5) + 1rem);
}
.tabs--lado .tabs__bar button{
  position:relative;
  display:grid; gap:0.25rem;
  text-align:left;
  padding:1.25rem 0.6rem 1.25rem 0;
  border-bottom:1px solid var(--line);
  text-transform:none; letter-spacing:0;
  transition:padding-left 0.35s var(--ease);
}
.tabs--lado .tabs__bar button::after{ display:none; }
.tabs--lado .tabs__bar button::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:2px;
  background:#C9A85C; transform:scaleY(0); transform-origin:center;
  transition:transform 0.35s var(--ease);
}
.tabs--lado .tabs__bar button[aria-selected="true"]{ padding-left:0.75rem; }
.tabs--lado .tabs__bar button:hover{ padding-left:0.45rem; }
.tabs--lado .tabs__bar button[aria-selected="true"]::before{ transform:scaleY(1); }

.tabs--lado .tabs__bar b{
  font-family:var(--font-display); font-weight:800;
  font-size:var(--t-med); letter-spacing:-0.01em;
  color:var(--grey-1);
  transition:color 0.3s var(--ease);
}
.tabs--lado .tabs__bar span{
  font-family:var(--font); font-weight:300;
  font-size:var(--t-sm); color:var(--grey-2);
  line-height:1.45; text-transform:none; letter-spacing:0;
}
.tabs--lado .tabs__bar button:hover b{ color:var(--grey-1); }
.tabs--lado .tabs__bar button[aria-selected="true"] b{ color:var(--text); }

/* el panel ya vive dentro de la retícula: sin caja ni sangría de sección */
.tabs--lado .tabs__panels{ margin-top:0; }
.tabs--lado .tabs__panels .wrap{
  width:100%; max-width:none; padding-inline:0; margin-inline:0;
}
.tabs--lado .tabs__panels .two{ margin-top:0 !important; }
.tabs--lado .tabs__panels > div > .wrap > :first-child{ margin-top:0; }

@media (max-width:60rem){
  .tabs--lado{ grid-template-columns:1fr; gap:var(--s3); }
  .tabs--lado .tabs__bar{
    position:static;
    grid-auto-flow:column; grid-auto-columns:minmax(10rem, auto);
    overflow-x:auto;
    border-top:0; border-bottom:1px solid var(--line);
    scrollbar-width:thin; scrollbar-color:rgba(201,168,92,0.4) transparent;
  }
  .tabs--lado .tabs__bar button{
    border-bottom:0; border-right:1px solid var(--line);
    padding:0.75rem 0.9rem;
  }
  .tabs--lado .tabs__bar button::before{
    width:auto; height:2px; left:0; right:0; top:auto; bottom:0;
    transform:scaleX(0);
  }
  .tabs--lado .tabs__bar button[aria-selected="true"]::before{ transform:scaleX(1); }
  .tabs--lado .tabs__bar button:hover,
  .tabs--lado .tabs__bar button[aria-selected="true"]{ padding-left:0.9rem; }
}

/* ═══════════ hero con fotografía ═══════════
   El bodegón ya viene sobre negro: no necesita el apagado del video. */
.phero--foto .phero__bg img{
  filter:grayscale(0.15) contrast(1.05) brightness(0.62);
  object-position:center 42%;
}
.phero--foto .phero__bg::after{
  background:
    linear-gradient(to top, var(--bg) 4%, rgba(10,10,11,0.62) 34%, rgba(10,10,11,0.3) 68%),
    linear-gradient(to right, rgba(10,10,11,0.88), rgba(10,10,11,0.35) 52%, transparent 78%);
}

/* ═══════════ las versiones de una familia ═══════════
   Tres piezas que solo se diferencian en un detalle: se comparan de frente. */
.vers{
  margin-top:var(--s5);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.vers__c{
  margin:0; background:var(--bg);
  display:grid; grid-template-rows:auto 1fr;
  transition:background-color 0.4s var(--ease);
}
.vers__c:hover{ background:var(--bg-2); }
.vers__c img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; display:block;
  background:#0E0E10;
  padding:var(--s3);
}
.vers__c figcaption{
  padding:var(--s3);
  border-top:1px solid var(--line);
  display:grid; gap:0.4rem; align-content:start;
}
.vers__c b{
  font-family:var(--font-display); font-weight:800;
  font-size:var(--t-med); letter-spacing:-0.01em; color:var(--text);
}
.vers__c em{
  font-style:normal;
  font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase;
  color:#C9A85C;
}
.vers__c p{
  margin:0.4rem 0 0;
  font-size:var(--t-sm); color:var(--grey-1); line-height:1.7;
}

@media (max-width:60rem){
  .vers{ grid-template-columns:1fr; }
  .vers__c{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); grid-template-rows:auto; }
  .vers__c figcaption{ border-top:0; border-left:1px solid var(--line); }
}
@media (max-width:38rem){
  .vers__c{ grid-template-columns:1fr; }
  .vers__c figcaption{ border-left:0; border-top:1px solid var(--line); }
}

/* ═══════════ página de categoría ═══════════ */
.chero{
  padding-block:clamp(8rem, 18vh, 13rem) clamp(3rem, 7vh, 5rem);
  border-bottom:1px solid var(--line);
  background:radial-gradient(120% 80% at 12% 0%, #131316 0%, var(--bg) 62%);
}
.chero__ruta{
  font-size:var(--t-xs); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--grey-2); margin:0 0 var(--s3);
}
.chero__ruta a{ color:var(--grey-1); transition:color 0.3s var(--ease); }
.chero__ruta a:hover{ color:var(--text); }
.chero__ruta span{ margin:0 0.5rem; color:#4A4A4A; }
.chero__t{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.4rem, 5.2vw + 0.5rem, 5rem);
  line-height:1.02; letter-spacing:-0.03em;
  margin:0; max-width:16ch;
}
.chero__d{
  margin:var(--s4) 0 0;
  font-size:var(--t-med); color:var(--grey-1); line-height:1.7;
  max-width:56ch;
}
.chero__d em{ font-style:normal; color:var(--text); }
.chero__facts{
  margin-top:clamp(2.5rem, 6vh, 4rem);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px;
  border-top:1px solid var(--line-2);
  max-width:58rem;
}
.chero__facts div{ padding-top:var(--s2); }
.chero__facts b{
  display:block;
  font-family:var(--font-display); font-weight:900;
  font-size:1.35rem; line-height:1.1; letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.chero__facts span{
  display:block; margin-top:0.3rem;
  font-size:0.68rem; line-height:1.35; color:var(--grey-2);
  letter-spacing:0.09em; text-transform:uppercase;
}

/* ── las dos vías: fusionar o conservar ─────────────────────── */
.via{
  margin-top:var(--s5);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.via__c{
  background:var(--bg); padding:var(--s4);
  display:grid; grid-template-rows:auto auto auto 1fr auto; gap:0;
  transition:background-color 0.4s var(--ease);
}
.via__c:hover{ background:var(--bg-2); }
.via__k{
  margin:0;
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:#C9A85C;
}
.via__t{
  margin:var(--s2) 0 0;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.4rem, 2vw + 0.4rem, 2.1rem);
  line-height:1.15; letter-spacing:-0.015em;
}
.via__d{
  margin:var(--s3) 0 0;
  font-size:var(--t-base); color:var(--grey-1); line-height:1.7;
  max-width:44ch;
}
.via__l{
  margin:var(--s3) 0 0; padding:0; list-style:none;
  border-top:1px solid var(--line);
}
.via__l li{
  position:relative;
  padding:0.55rem 0 0.55rem 1.1rem;
  font-size:var(--t-sm); color:var(--grey-2); line-height:1.5;
  border-bottom:1px solid var(--line);
}
.via__l li::before{
  content:""; position:absolute; left:0; top:1.15rem;
  width:5px; height:1px; background:#C9A85C; opacity:0.7;
}
.via__go{
  margin-top:var(--s4);
  display:inline-flex; align-items:center; gap:0.9rem;
  font-size:var(--t-sm); color:var(--text);
  transition:gap 0.35s var(--ease);
}
.via__go svg{
  width:26px; height:11px; fill:none; stroke:#C9A85C; stroke-width:1.4;
}
.via__c:hover .via__go{ gap:1.4rem; }

/* ── retícula de productos de la categoría ──────────────────── */
.pgrid{
  margin-top:var(--s5);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.pcard{
  background:var(--bg);
  display:grid; grid-template-rows:auto 1fr;
  transition:background-color 0.4s var(--ease);
}
a.pcard:hover{ background:var(--bg-2); }
.pcard__im{
  display:block; overflow:hidden; background:#0E0E10;
  border-bottom:1px solid var(--line);
}
.pcard__im img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:contain;
  padding:var(--s3);
  transition:transform 0.6s var(--ease);
}
a.pcard:hover .pcard__im img{ transform:scale(1.04); }
.pcard__b{ display:grid; gap:0.35rem; align-content:start; padding:var(--s4); }
.pcard__b b{
  font-family:var(--font-display); font-weight:800;
  font-size:var(--t-med); letter-spacing:-0.01em; color:var(--text);
}
.pcard__b em{
  font-style:normal;
  font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase;
  color:#C9A85C;
}
.pcard__d{
  margin-top:0.5rem;
  font-size:var(--t-sm); color:var(--grey-1); line-height:1.65;
}
.pcard__m{
  margin-top:var(--s2); padding-top:var(--s2);
  border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--grey-2);
}
/* las fichas que aún no existen no fingen ser enlaces */
.pcard--espera{ opacity:0.55; }
.pcard--espera .pcard__b{ padding-top:var(--s4); }

/* ── comparativa ────────────────────────────────────────────── */
.tbl.cmp{ margin-top:var(--s5); }
.tbl.cmp td:first-child{ color:var(--grey-2); }
.tbl.cmp td:not(:first-child){ color:var(--text); }
.tbl.cmp th:not(:first-child){ color:#C9A85C; }

@media (max-width:60rem){
  .via, .pgrid{ grid-template-columns:1fr; }
  .chero__facts{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s2) 1px; }
}


/* ═══════════ imágenes de producto del fabricante ═══════════
   Llegan sobre fondo de estudio claro. No se recortan —el recorte come
   los bordes del implante— así que se atenúan para que convivan con el
   fondo oscuro sin quemar la página. */
.vers__c img,
.shot img,
.trio__im img,
.pcard__im img,
.mv__poster img{
  filter:grayscale(0.18) brightness(0.86) contrast(1.04);
  transition:filter 0.5s var(--ease);
}
.vers__c:hover img,
.shot:hover img,
.trio__c:hover .trio__im img,
a.pcard:hover .pcard__im img{
  filter:grayscale(0) brightness(1) contrast(1);
}
/* el fondo del marco acompaña al de la propia imagen */
.vers__c img, .trio__im img, .pcard__im img{ background:#F4F4F2; }
.shot img{ background:#F4F4F2; }

/* procedencia: manufactura y origen de materiales, separados (minuta 1 oct 2026) */
.phero__origen{
  margin:var(--s2) 0 0;
  font-size:0.72rem; letter-spacing:0.06em; color:var(--grey-1);
}
.phero__origen span{
  font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--grey-2);
  margin-right:0.35em;
}
.phero__origen i{ font-style:normal; color:var(--grey-2); margin:0 0.6em; }

/* «En resumen»: la definición que citan los buscadores con IA, a la vista de todos */
.resumen-b{ border-bottom:1px solid var(--line); padding:var(--s4) 0; }
.resumen{ margin:0; max-width:78ch; font-size:clamp(1rem, 0.6vw + 0.8rem, 1.15rem); line-height:1.7; color:var(--grey-1); }
.resumen b{ display:block; margin-bottom:0.4rem; font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:#C9A85C; font-weight:400; }
.resumen__pie{ margin:var(--s2) 0 0; font-size:0.68rem; letter-spacing:0.04em; color:var(--grey-2); }