/* FIBRA: portada (EXPERIENCIA §3). Dueño: frente PUBLICA.
   Las tres escenas fijadas (#entrada, #balanza, #carne-propia) y el tejido del cierre tienen sus
   estilos en escenas.css (INTEGRACIÓN); acá queda solo el clima de cada sección.
   Climas: la sala oscura (--noche) y el informe (--papel). Cada cambio de clima es un borde
   diagonal a -8° (tan 8° = 0,1405): fijo en todos los modos; el primero, además, con la cortina
   que se traslada con el scroll en el modo completo. */

:root {
  --sec: clamp(5rem, 3.2rem + 7vw, 10rem);
  --diagonal: 14.05vw;
  --cab: 64px;
}
@media (min-width: 1024px) { :root { --cab: 76px; } }

.portada:focus { outline: none; }
.portada > section:not(.entrada) { position: relative; scroll-margin-top: var(--cab); }

/* Borde diagonal al entrar a un clima nuevo (la sección de arriba asoma por la cuña). */
.clima-papel, .informe, .programa, .preguntas {
  background: var(--papel);
  color: var(--tinta);
  color-scheme: light;
}
.corte-diagonal, .informe, .programa, .preguntas, .carne, .recorrido, .postulacion, .cierre {
  margin-top: calc(-1 * var(--diagonal));
  padding-top: calc(var(--sec) + var(--diagonal));
  clip-path: polygon(0 var(--diagonal), 100% 0, 100% 100%, 0 100%);
}
.informe :focus-visible, .programa :focus-visible, .preguntas :focus-visible { outline-color: var(--roja-informe); }

/* 3.1 Entrada: escena fijada, en escenas.css (INTEGRACIÓN). */

/* ============================================================================================
   3.2 Hero
   ============================================================================================ */
.heroe {
  position: relative;
  isolation: isolate;
  min-height: var(--pantalla);
  display: grid;
  align-content: end;
  padding: calc(var(--cab) + 1rem) var(--margen-seguro) clamp(2.5rem, 6vh, 4.5rem);
  overflow: clip;
  background: var(--noche);
}
.heroe__fondo { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: clip; }
.heroe__logo {
  position: absolute;
  top: calc(var(--cab) + 2svh);
  left: -12vw;
  width: 150vw;
  opacity: 0.12;
}
.heroe__logo-img { width: 100%; height: auto; }
.heroe__hebra {
  position: absolute; left: 0;
  width: 72vw; height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--fibra-brillo) 32%, var(--sangre) 50%, var(--fibra-brillo) 68%, transparent);
  opacity: 0.55;
  transform: translate3d(-80vw, 15vw, 0) rotate(-8deg);
  transform-origin: 0 50%;
  animation: hebra 11s linear infinite;
  will-change: transform;
}
.heroe__hebra--1 { top: 34%; animation-duration: 9.5s; animation-delay: -2.5s; }
.heroe__hebra--2 { top: 52%; height: 1px; animation-duration: 13s; animation-delay: -8s; opacity: 0.4; }
.heroe__hebra--3 { top: 66%; height: 2px; animation-duration: 11.5s; animation-delay: -5s; }
.heroe__hebra--4 { top: 82%; height: 1px; animation-duration: 14s; animation-delay: -11s; opacity: 0.35; }
/* En el celular el texto del hero ocupa la mitad de abajo: las hebras cruzan solo por arriba (a
   la altura de la figura), nunca sobre la bajada, donde se leían como texto tachado. */
@media (max-width: 1023px) {
  .heroe__hebra--1 { top: 10%; }
  .heroe__hebra--2 { top: 17%; }
  .heroe__hebra--3 { top: 24%; }
  .heroe__hebra--4 { top: 31%; }
}
@keyframes hebra {
  from { transform: translate3d(-80vw, 15vw, 0) rotate(-8deg); }
  to { transform: translate3d(130vw, -14.5vw, 0) rotate(-8deg); }
}
.heroe--fuera .heroe__hebra, html.pagina-oculta .heroe__hebra { animation-play-state: paused; }
/* fuera de pantalla, sin capas: las cuatro hebras animadas forzaban capas por superposición en toda la
   portada (medido en el banco móvil: más capas que componer en cada cuadro de las escenas fijadas) */
.heroe--fuera .heroe__hebra { display: none; }
html.calmo .heroe__hebra { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { html:not(.movimiento) .heroe__hebra { animation: none; opacity: 0; } }

.heroe__figura {
  position: absolute;
  z-index: -1;
  right: -2vw;
  top: calc(var(--cab) + 0.5rem);
  /* 800 px de alto nativo: a DPR 2,625 alcanzan para 305 px CSS (BRIEF, regla de resolución). */
  height: min(305px, 42svh);
  aspect-ratio: 589 / 800;
}
.heroe__halo {
  position: absolute;
  left: 50%; top: 46%;
  width: 190%; max-width: none; height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.85;
}
.heroe__miguel { position: relative; height: 100%; }
.heroe__miguel-img { height: 100%; width: auto; max-width: none; }

.heroe__texto { position: relative; display: grid; gap: var(--e-5); max-width: 36rem; }
/* texto agrandado (html.texto-grande, sitio.js): la foto va en el flujo, arriba del texto; encimada,
   la bajada quedaba sobre la piel y tapaba el tatuaje (EXPERIENCIA 3.5) */
html.texto-grande .heroe { align-content: start; }
html.texto-grande .heroe__figura { position: relative; top: auto; right: auto; bottom: auto; justify-self: end; margin-bottom: var(--e-5); }
.heroe__titulo {
  font-family: var(--f-titular);
  font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: min(var(--t-heroe), 12.6vw);
  line-height: var(--interlinea-titular);
  letter-spacing: -0.01em;
}
.heroe__linea { display: block; white-space: nowrap; }
.heroe__linea:last-child { color: var(--sangre); }
.heroe__bajada { max-width: 34ch; color: var(--hueso-2); }
.heroe__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); }
.heroe__prueba { font-size: var(--t-nota); color: var(--hueso-3); max-width: 36ch; }

/* Celulares de pantalla baja (SE, 360x640): la foto se achica para que la bajada empiece debajo de
   ella (medido antes: la bajada caía sobre el pecho de Miguel, 39 % a 320x568, con 2,14:1 de contraste). */
@media (max-width: 400px) and (max-height: 700px) {
  .heroe__figura { height: min(305px, 32svh); }
}
@media (max-width: 400px) and (max-height: 600px) {
  .heroe__figura { height: min(305px, 24svh); }
}
@media (min-width: 640px) {
  .heroe__figura { height: min(305px, 46svh); right: 4vw; }
}
@media (min-width: 1024px) {
  .heroe { align-content: center; padding-top: calc(var(--cab) + 3rem); }
  .heroe__logo { top: 14%; left: auto; right: -34vw; width: 118vw; }
  .heroe__figura {
    top: auto; bottom: 0;
    right: max(3vw, calc((100vw - 1400px) / 2));
    /* Escritorio a DPR 1: el archivo alcanza para 800 px de alto. */
    height: min(88svh, 800px);
  }
  .heroe__texto { width: var(--ancho-seguro); max-width: none; margin-inline: auto; }
  .heroe__titulo { font-size: min(var(--t-heroe), 7.6vw); max-width: 9.6em; }
  .heroe__bajada, .heroe__acciones, .heroe__prueba { max-width: 30rem; }
}
/* con lugar, los tres llamados van en un renglón ("Si usás un GLP-1" quedaba solo en el segundo) */
@media (min-width: 1280px) { .heroe__acciones { max-width: 40rem; } }

/* 3.3 La balanza miente: escena fijada, en escenas.css (INTEGRACIÓN). Acá solo el clima y el aire
   de la sección (el borde diagonal del informe se apoya en su padding de abajo). */
.balanza { background: var(--noche); padding-block: var(--sec) calc(var(--sec) + var(--diagonal)); }
/* después de carne propia (misma sala, sin diagonal): el aire lo da el final de esa escena */
.carne + .balanza { padding-top: 0; }

/* ============================================================================================
   GLP-1: "No importa cuánto peso perdés." (BRIEF, addendum). Sala oscura entre la balanza y el
   informe: se apoya en el aire de abajo de la balanza (mismo color, sin borde) y deja el suyo para
   la diagonal del informe.
   ============================================================================================ */
.glp { background: var(--noche); margin-top: calc(-1 * var(--diagonal)); padding-block: var(--e-7) calc(var(--sec) + var(--diagonal)); }
.glp__grilla { display: grid; gap: var(--e-7); }
.glp__cabeza { display: grid; gap: var(--e-4); max-width: 62rem; }
/* un solo estilo de rótulo en la sección: .glp__rotulo, .glp__figura-rotulo, .glp__estudios-rotulo
   y .glp__aviso-rotulo (el mismo de la ficha técnica y la tabla de productos) */
.glp__rotulo, .glp__figura-rotulo, .glp__estudios-rotulo, .glp__aviso-rotulo {
  font-family: var(--f-texto); font-style: normal; font-size: var(--t-nota); font-weight: 600; line-height: 1.3;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--hueso-2);
}
.glp__intro { max-width: 52ch; color: var(--hueso-2); font-size: 1.125rem; }
.glp__titulo {
  margin-top: var(--e-4);
  font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: var(--t-h2); line-height: var(--interlinea-titular); letter-spacing: -0.01em;
}
.glp__linea { display: block; text-wrap: balance; }
.glp__linea:first-child { font-size: 0.56em; color: var(--hueso-2); margin-bottom: 0.18em; }
.glp__linea--roja { color: var(--sangre); }

/* El haz: 20 fibras = el peso perdido. portada.js elige la etapa por umbral; solo opacidad. */
.glp__figura { display: grid; gap: var(--e-4); max-width: 34rem; }
/* Filas fijas: las etiquetas (dos renglones) no separan las fibras; se centran y desbordan su tramo. */
/* La etiqueta del rango crece hacia arriba (sobre la columna vacía de la grasa) y la de la masa
   magra hacia abajo (la última fila crece con ella): a 320 px y con el texto al 200 % se pisaban
   (8 y 57 px). Las fibras quedan arriba de su fila. */
.haz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 42%); grid-template-rows: repeat(19, 4px) minmax(4px, auto); column-gap: var(--e-4); row-gap: 7px; align-items: center; }
.haz__fibra { grid-column: 1; align-self: start; position: relative; display: block; height: 4px; border-radius: 2px; background: rgb(242 239 233 / 0.2); }
.haz__fibra::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--sangre); opacity: 0;
  transition: opacity 420ms var(--ease-suave);
}
.haz__fibra--rango::after { background: var(--fibra-brillo); }
.haz[data-etapa="1"] .haz__fibra--magra::after, .haz[data-etapa="2"] .haz__fibra--magra::after { opacity: 1; }
.haz[data-etapa="2"] .haz__fibra--rango::after { opacity: 0.55; }
/* se encienden de abajo hacia arriba (12 de grasa, 3 de rango, 5 de masa magra: data/contenido.json) */
.haz__fibra:nth-child(19)::after { transition-delay: 50ms; }
.haz__fibra:nth-child(18)::after { transition-delay: 100ms; }
.haz__fibra:nth-child(17)::after { transition-delay: 150ms; }
.haz__fibra:nth-child(16)::after { transition-delay: 200ms; }
.haz__fibra:nth-child(14)::after { transition-delay: 60ms; }
.haz__fibra:nth-child(13)::after { transition-delay: 120ms; }
.haz__etiqueta {
  grid-column: 2; align-self: stretch;
  display: flex; align-items: center;
  padding-left: var(--e-3);
  font-size: var(--t-nota); line-height: 1.2; color: var(--hueso-2);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 400ms var(--ease-suave), transform 400ms var(--ease-suave);
}
.haz__etiqueta--rango { grid-row: 13 / span 3; align-self: end; min-height: 100%; border-left: 2px dashed var(--fibra-brillo); }
.haz__etiqueta--magra { grid-row: 16 / span 5; align-self: start; min-height: 100%; border-left: 2px solid var(--sangre); color: var(--hueso); font-weight: 600; }
.haz[data-etapa="1"] .haz__etiqueta--magra,
.haz[data-etapa="2"] .haz__etiqueta { opacity: 1; transform: none; }
.haz__leyenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font-size: var(--t-nota); color: var(--hueso-2); }
.haz__clave { display: inline-flex; align-items: center; gap: var(--e-2); }
.haz__clave::before { content: ""; flex: none; width: 18px; height: 4px; border-radius: 2px; background: rgb(242 239 233 / 0.2); }
.haz__clave--magra::before { background: var(--sangre); }
.glp__pie { font-size: var(--t-chico); color: var(--hueso-2); max-width: 44ch; }

.glp__texto { display: grid; gap: var(--e-5); align-content: start; }
.glp__parrafo { color: var(--hueso-2); max-width: 58ch; }
/* lo que dicen los estudios: siempre a la vista, como una nota del informe con su filete arriba */
.glp__estudios { display: grid; gap: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea-noche); }
.glp__remate { margin: var(--e-3) 0; padding-left: var(--e-5); border-left: 2px solid var(--fibra-brillo); }
.glp__remate p {
  font-family: var(--f-cita); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); line-height: 1.15; color: var(--hueso); max-width: 26ch;
}
.glp__aviso { display: grid; gap: var(--e-2); padding: var(--e-5); background: var(--noche-2); border-top: 2px solid var(--fibra); border-radius: var(--r-s); }
.glp__aviso-rotulo { color: var(--hueso); }
.glp__aviso-texto { font-size: var(--t-chico); color: var(--hueso-2); max-width: 62ch; }
@media (min-width: 1024px) {
  .glp__grilla { grid-template-columns: 5fr 7fr; column-gap: var(--e-9); grid-template-areas: "cabeza cabeza" "figura texto"; }
  .glp__cabeza { grid-area: cabeza; }
  .glp__figura { grid-area: figura; position: sticky; top: calc(var(--cab) + 3rem); align-self: start; }
  .glp__texto { grid-area: texto; }
}

/* ============================================================================================
   3.4 El informe: "Medimos, no adivinamos."
   ============================================================================================ */
.informe { overflow: clip; padding-bottom: calc(var(--sec) + var(--diagonal)); }
.informe .titulo-seccion, .programa .titulo-seccion, .preguntas .titulo-seccion { color: var(--roja-informe); }
/* La cortina: una capa de noche con el borde a -8° que sube más rápido que el scroll y "prende la
   luz". Solo en el modo completo (portada.js la traslada; nunca se repinta el fondo). */
.informe__cortina { display: none; }
html.movimiento .informe { clip-path: none; }
html.movimiento .informe__cortina {
  display: block;
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  height: calc(var(--pantalla) * 1.15);
  background: var(--noche);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diagonal)), 0 100%);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.informe__intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.informe__bajada { max-width: 56ch; color: var(--tinta-2); font-size: 1.125rem; }
@media (min-width: 1024px) {
  .informe__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--e-8); }
}

/* Mapa corporal */
.mapa { display: grid; gap: var(--e-6); margin-top: var(--e-8); }
.mapa__lamina { display: grid; gap: var(--e-4); align-content: start; }
.mapa__figuras { width: min(100%, 520px); }
.mapa__svg { width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }
.mapa__contorno { fill: var(--papel-2); stroke: var(--tinta); stroke-width: 1.3; stroke-linejoin: round; }
.mapa__detalle { fill: none; stroke: var(--tinta-2); stroke-width: 1; opacity: 0.55; }
circle.mapa__detalle { fill: var(--tinta-2); stroke: none; }
.mapa__vista { font-family: var(--f-texto); font-size: 15px; fill: var(--tinta-2); }
.mapa__punto { cursor: pointer; outline: none; }
.mapa__toque { fill: transparent; }
.mapa__foco { fill: none; stroke: var(--roja-informe); stroke-width: 2; opacity: 0; }
.mapa__punto:focus-visible .mapa__foco { opacity: 1; }
.mapa__anillo {
  fill: rgb(142 17 22 / 0.12); stroke: var(--roja-informe); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center;
}
.mapa__nucleo { fill: var(--roja-informe); transform-box: fill-box; transform-origin: center; transition: transform 200ms var(--ease-suave); }
.mapa__punto--activo .mapa__nucleo { transform: scale(1.5); }
.mapa__punto--activo .mapa__anillo { fill: rgb(142 17 22 / 0.24); stroke-width: 2; }
/* Respiración de los puntos: bucle lento permitido (EXPERIENCIA §5), solo en pantalla. */
/* Solo con puntero fino: en SVG la respiración se pinta en el hilo principal en cada cuadro y en
   el celular se come el presupuesto de la escena (medido con banco_movil a x4). */
@media (pointer: fine) {
  html.movimiento .mapa--visible .mapa__anillo { animation: respirar 3.2s var(--ease-suave) infinite; }
  html.movimiento .mapa--visible .mapa__punto:nth-of-type(2n) .mapa__anillo { animation-delay: -1.1s; }
  html.movimiento .mapa--visible .mapa__punto:nth-of-type(3n) .mapa__anillo { animation-delay: -2.2s; }
}
@keyframes respirar { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } }
.mapa__leyenda { display: grid; gap: var(--e-1); min-height: 5.6em; padding-top: var(--e-3); border-top: 1px solid var(--linea-papel); }
.mapa__leyenda-nombre { font-family: var(--f-titular); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 1.5rem; line-height: 1; color: var(--roja-informe); }
.mapa__leyenda-texto { color: var(--tinta-2); font-size: var(--t-chico); max-width: 44ch; }
.mapa__titulo { font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); line-height: 1; margin-bottom: var(--e-4); }
.mapa__filas { border-top: 1px solid var(--linea-papel); }
.mapa__fila {
  position: relative;
  display: grid; gap: var(--e-1);
  padding: var(--e-4) 0 var(--e-4) 2rem;
  border-bottom: 1px solid var(--linea-papel);
}
.mapa__fila-hebra {
  position: absolute; left: 0; top: calc(var(--e-4) + 0.72rem);
  width: 1.2rem; height: 2px;
  background: rgb(46 15 18 / 0.28);
  transform: scaleX(0.4); transform-origin: 0 50%;
  transition: transform 260ms var(--ease-suave), background-color 200ms var(--ease-suave);
}
.mapa__fila-nombre { font-family: var(--f-titular); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; transition: color 200ms var(--ease-suave); }
/* el nombre es un botón (objetivo táctil de 44 px o más) que se ve como el rótulo de la fila */
.mapa__fila-boton {
  display: inline-flex; align-items: center; min-height: 44px; margin-block: -6px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mapa__fila-boton:focus-visible { outline: 2px solid var(--roja-informe); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mapa__fila-boton:hover { color: var(--roja-informe); } }
.mapa__fila-boton:active { transform: scale(0.97); transition: transform 100ms var(--ease-suave); }
.mapa__fila-texto { font-size: var(--t-chico); color: var(--tinta-2); max-width: 48ch; }
.mapa__fila--activa .mapa__fila-hebra { transform: scaleX(1); background: var(--roja-informe); }
.mapa__fila--activa .mapa__fila-nombre { color: var(--roja-informe); }
@media (min-width: 1024px) {
  .mapa { grid-template-columns: 6fr 5fr; column-gap: var(--e-8); align-items: start; }
  .mapa__lamina { position: sticky; top: calc(var(--cab) + 2rem); }
  .mapa__fila { padding-block: var(--e-5); }
}

/* Plicómetro */
.plico { display: grid; gap: var(--e-5); margin-top: var(--e-9); align-items: center; }
.plico__dibujo { width: min(100%, 560px); }
.plico__svg { width: 100%; height: auto; overflow: visible; }
.plico__piel { fill: none; stroke: var(--tinta-2); stroke-width: 1.5; }
.plico__carne { fill: rgb(142 17 22 / 0.14); }
.plico__carne-borde { fill: none; stroke: var(--tinta); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plico__barra { fill: var(--papel-2); stroke: var(--tinta); stroke-width: 1.5; }
.plico__marcas { stroke: var(--tinta); stroke-width: 1; }
.plico__brazo { fill: none; stroke: var(--tinta); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.plico__punta { fill: var(--roja-informe); }
.plico__agarre { fill: var(--tinta); }
.plico__lectura { display: grid; gap: var(--e-3); }
.plico__num {
  display: flex; align-items: baseline; gap: var(--e-2);
  font-family: var(--f-titular); font-weight: 800; font-style: italic;
  font-size: clamp(5rem, 3rem + 9vw, 10rem); line-height: 0.85;
  color: var(--roja-informe);
  font-variant-numeric: tabular-nums;
}
.plico__mm { font-size: 0.34em; color: var(--tinta); }
.plico__pie { max-width: 36ch; color: var(--tinta-2); }
@media (min-width: 1024px) { .plico { grid-template-columns: 7fr 5fr; column-gap: var(--e-8); } }

/* Ficha técnica de las ecuaciones */
.ficha-tecnica { margin-top: var(--e-9); display: grid; gap: var(--e-5); }
.ficha-tecnica__titulo { font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); line-height: 1; }
.ficha-tecnica__lista { border-top: 2px solid var(--tinta); }
.ficha-tecnica__fila {
  /* con el texto al 200 % (WCAG 1.4.4 y 1.4.10) la columna del rótulo no pasa del 40 % */
  display: grid; grid-template-columns: minmax(min(9rem, 40%), 1fr) minmax(0, 2fr); gap: var(--e-4);
  align-items: baseline;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea-papel);
}
.ficha-tecnica__fila dt { font-size: var(--t-nota); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); }
.ficha-tecnica__fila dt, .ficha-tecnica__fila dd { min-width: 0; overflow-wrap: anywhere; }
.ficha-tecnica__fila dd { font-family: var(--f-titular); font-weight: 700; font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.05; }
.ficha-tecnica__nota { color: var(--tinta-2); max-width: 48ch; }
@media (min-width: 1024px) {
  .ficha-tecnica { grid-template-columns: 5fr 7fr; column-gap: var(--e-8); }
  .ficha-tecnica__titulo { grid-row: span 2; }
}
.informe__cita {
  margin-top: var(--e-9);
  font-family: var(--f-cita); font-style: italic; font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem);
  line-height: 1.12;
  color: var(--tinta);
}
.informe__cita p { max-width: 24ch; }

/* 3.5 En carne propia: escena fijada, en escenas.css (INTEGRACIÓN). */
.carne { background: var(--noche); padding-bottom: var(--e-6); }
/* desde 1024 px la cita va dentro de la escena fija, que ya cierra con su propio aire */
@media (min-width: 1024px) { .carne { padding-bottom: 0; } }
/* estáticas (calmo, texto agrandado, pantalla baja): la cita queda en el flujo y necesita su aire */
html.calmo .carne, html.texto-grande .carne { padding-bottom: var(--e-8); }
@media (max-height: 560px) { .carne { padding-bottom: var(--e-8); } }
/* del hero a carne propia no hay cambio de clima (las dos son la sala oscura): sin el --sec entero
   quedaban unos 400 px de negro a 1440 antes de la escena */
.heroe + .carne { padding-top: calc(var(--e-7) + var(--diagonal)); }

/* ============================================================================================
   3.6 El recorrido
   ============================================================================================ */
/* Va después del informe (papel): entra con el borde diagonal (portada.css, arriba). */
.recorrido { background: var(--noche); padding-bottom: var(--sec); }
.recorrido__mapa { position: relative; margin-top: var(--e-8); }
.recorrido__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.recorrido__fibra-base { fill: none; stroke: var(--linea-noche); stroke-width: 2; }
.recorrido__fibra { fill: none; stroke: var(--sangre); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Sin JS la fibra no existe: una línea fija hace de guía. */
html.sin-js .recorrido__estaciones { border-left: 2px solid var(--fibra); }
.recorrido__estaciones { position: relative; display: grid; gap: clamp(3rem, 7vh, 5.5rem); padding-left: 3rem; }
.estacion { position: relative; display: grid; gap: var(--e-2); max-width: 30rem; }
.estacion__nudo {
  position: absolute; left: calc(-3rem + 14px); top: 0.55rem;
  width: 14px; height: 14px;
  margin-left: -7px;
  border: 2px solid var(--hueso-3);
  border-radius: 50%;
  background: var(--noche);
  transition: background-color 220ms var(--ease-suave), border-color 220ms var(--ease-suave);
}
.estacion--alcanzada .estacion__nudo, html.calmo .estacion__nudo { background: var(--sangre); border-color: var(--sangre); }
.estacion__nombre { font-family: var(--f-titular); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1; }
.estacion__texto { color: var(--hueso-2); }
.recorrido__bajada { margin-top: var(--e-5); max-width: 44ch; color: var(--hueso-2); font-size: 1.125rem; }
.estacion__cuando { font-size: var(--t-nota); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hueso-3); }
/* Los controles son mediciones: su nudo lleva un anillo (el del mapa corporal). */
.estacion--control .estacion__nudo { box-shadow: 0 0 0 3px var(--noche), 0 0 0 4px var(--hueso-3); }
.estacion--control.estacion--alcanzada .estacion__nudo, html.calmo .estacion--control .estacion__nudo { box-shadow: 0 0 0 3px var(--noche), 0 0 0 4px var(--sangre); }
.recorrido__lazo { margin-top: var(--e-7); padding-left: 3rem; max-width: 30rem; }
.recorrido__lazo-nota { color: var(--hueso-2); margin-bottom: var(--e-2); }
.recorrido__lazo-frase {
  font-family: var(--f-titular); font-weight: 700; font-style: italic; text-transform: uppercase;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.05;
  color: var(--hueso); max-width: 26ch;
}
@media (min-width: 1024px) {
  .recorrido__estaciones { padding-left: 0; }
  .estacion { width: calc(50% - 4rem); }
  .estacion--izq { justify-self: start; text-align: right; }
  .estacion--der { justify-self: end; }
  .estacion--izq .estacion__nudo { left: auto; right: -1.5rem; margin-left: 0; margin-right: -7px; }
  .estacion--der .estacion__nudo { left: -1.5rem; }
  .recorrido__lazo { padding-left: 0; margin-left: calc(50% + 4rem); }
}

/* ============================================================================================
   3.7 Resultados
   ============================================================================================ */
.resultados { background: var(--noche); padding-block: var(--sec) calc(var(--sec) + var(--diagonal)); }
.resultados__cabeza { display: grid; gap: var(--e-5); }
.resultados__cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); }
.resultados__num {
  font-family: var(--f-titular); font-weight: 800; font-style: italic;
  font-size: min(clamp(4.5rem, 2.6rem + 9vw, 11rem), 26vw); line-height: 0.85;
  color: var(--sangre);
  font-variant-numeric: tabular-nums;
  /* el conteo no cambia el ancho (medido: al contar, el texto de al lado saltaba de renglón y
     corría el muro: CLS 0,118 en el celular) */
  display: inline-block; min-width: 5.6ch;
}
.resultados__num-texto { font-size: 1.125rem; font-weight: 600; text-wrap: balance; }
.resultados__bajada { max-width: 48ch; color: var(--hueso-2); }
.resultados__bajada strong { color: var(--hueso); }
@media (min-width: 1024px) {
  .resultados__cabeza { grid-template-columns: 6fr 6fr; column-gap: var(--e-8); align-items: end; }
  .resultados__cabeza .titulo-seccion { grid-column: 1 / -1; }
}

.muro { margin-top: var(--e-8); display: grid; overflow: clip; }
.muro__set { display: grid; gap: 10px; }
.muro__set--ancho { display: none; }
@media (min-width: 1024px) {
  .muro__set--movil { display: none; }
  .muro__set--ancho { display: grid; gap: 14px; }
}
.muro__pista { overflow: visible; }
.muro__fila { display: flex; gap: 10px; width: max-content; }
@media (min-width: 1024px) { .muro__fila { gap: 14px; } }
html.movimiento .muro__fila { will-change: transform; }
/* Modo calmo: las filas quietas y deslizables a mano. */
html.calmo .muro__pista, html.sin-js .muro__pista {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--linea-noche) transparent;
  padding-bottom: 6px;
}
html.calmo .tesela, html.sin-js .tesela { scroll-snap-align: start; }
html.calmo .muro__pista, html.sin-js .muro__pista { scroll-padding-inline: var(--margen-seguro); }
/* los ecos de las puntas (generar.py) solo llenan el margen del muro que se desplaza */
html.calmo .tesela--eco, html.sin-js .tesela--eco { display: none; }
.tesela--eco .tesela__boton { cursor: default; pointer-events: none; }
html.calmo .muro__fila, html.sin-js .muro__fila { padding-inline: var(--margen-seguro); }
.tesela { width: 44vw; max-width: 300px; }
@media (min-width: 1024px) { .tesela { width: 21vw; } }
.tesela__boton {
  display: block; width: 100%;
  padding: 0; border: 0;
  background: var(--noche-2);
  border-radius: var(--r-s);
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.tesela__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 300ms var(--ease-suave); }
/* presión (EXPERIENCIA 5): en el botón de la tesela, no en la fila, que ya anima transform con el scroll */
.tesela__boton { transition: transform 100ms var(--ease-suave); }
.tesela__boton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .tesela__boton:hover .tesela__img { transform: scale(1.03); }
}
.resultados__nota { margin-top: var(--e-4); font-size: var(--t-nota); color: var(--hueso-3); }

/* Fichas de casos: hojas sueltas del informe sobre la sala oscura */
.casos { margin-top: var(--e-9); display: grid; gap: var(--e-6); }
.casos__titulo { font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); line-height: 1; }
.casos__hojas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.hoja {
  display: grid; gap: var(--e-3); align-content: start; min-width: 0;
  padding: var(--e-5) var(--e-5) var(--e-6);
  background: var(--papel-2);
  color: var(--tinta);
  border-radius: var(--r-s);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.7);
  transition: translate 200ms var(--ease-suave);
}
.hoja:nth-child(1) { rotate: -1.1deg; }
.hoja:nth-child(2) { rotate: 0.7deg; }
.hoja:nth-child(3) { rotate: -0.4deg; }
.hoja:nth-child(4) { rotate: 1deg; }
.hoja:nth-child(5) { rotate: -0.8deg; }
@media (hover: hover) and (pointer: fine) { .hoja:hover { translate: 0 -4px; } }
.hoja__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3); padding-bottom: var(--e-2); border-bottom: 1px solid var(--linea-papel); }
.hoja__paciente { font-weight: 600; }
.hoja__etiqueta { color: var(--tinta-2); font-size: var(--t-chico); }
.hoja__titular { overflow-wrap: anywhere; font-family: var(--f-titular); font-weight: 800; font-style: italic; font-size: min(clamp(2.2rem, 1.6rem + 2vw, 3rem), 12vw); line-height: 1; color: var(--roja-informe); font-variant-numeric: tabular-nums; }
.hoja__texto { font-size: var(--t-chico); color: var(--tinta); }
.casos__otros { max-width: 60ch; color: var(--hueso-2); font-size: var(--t-chico); }
.casos__otros strong { color: var(--hueso); }
@media (min-width: 768px) {
  .casos__hojas { grid-template-columns: repeat(6, 1fr); }
  .hoja:nth-child(1) { grid-column: 1 / span 3; }
  .hoja:nth-child(2) { grid-column: 4 / span 3; margin-top: 3rem; }
  .hoja:nth-child(3) { grid-column: 1 / span 2; }
  .hoja:nth-child(4) { grid-column: 3 / span 2; margin-top: 2rem; }
  .hoja:nth-child(5) { grid-column: 5 / span 2; margin-top: -1rem; }
}
@media (min-width: 1200px) {
  .casos__hojas { grid-template-columns: repeat(12, 1fr); column-gap: var(--e-5); }
  .hoja:nth-child(1) { grid-column: 1 / span 5; }
  .hoja:nth-child(2) { grid-column: 6 / span 4; margin-top: 4rem; }
  .hoja:nth-child(3) { grid-column: 10 / span 3; margin-top: 1.5rem; }
  .hoja:nth-child(4) { grid-column: 2 / span 4; margin-top: 0; }
  .hoja:nth-child(5) { grid-column: 7 / span 5; margin-top: -2rem; }
}

/* Visor */
.visor {
  width: min(92vw, 980px); max-height: 92svh;
  padding: 0; border: 0;
  background: var(--noche-2);
  color: var(--hueso);
  border-radius: var(--r-m);
  overflow: hidden;
}
.visor::backdrop { background: rgb(11 10 9 / 0.92); }
.visor__marco { display: grid; }
.visor__figura { display: grid; }
.visor__img { width: 100%; height: auto; max-height: calc(92svh - 150px); object-fit: contain; background: var(--noche); }
.visor__pie { display: grid; gap: var(--e-1); padding: var(--e-4) var(--e-5) 0; }
.visor__rotulo { font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.6rem; line-height: 1; }
.visor__alt { font-size: var(--t-chico); color: var(--hueso-2); }
.visor__controles { display: flex; flex-wrap: wrap; gap: var(--e-2); padding: var(--e-4) var(--e-5) var(--e-5); }
.visor__boton {
  min-height: 44px; padding: 0 var(--e-4);
  border: 1px solid var(--linea-noche); border-radius: var(--r-m);
  background: transparent; color: var(--hueso);
  cursor: pointer;
}
.visor__boton--cerrar { margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .visor__boton:hover { border-color: var(--hueso-3); } }
.visor[open] { animation: visor-abrir 240ms var(--ease-salida); }
@keyframes visor-abrir { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
html.calmo .visor[open] { animation-name: menu-fundido; }

/* ============================================================================================
   3.8 El programa (informe)
   ============================================================================================ */
.programa { padding-bottom: calc(var(--sec) + var(--diagonal)); }
.programa__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-7); }
.programa__cabeza { display: grid; gap: var(--e-5); align-content: start; }
.modalidades { display: grid; gap: var(--e-1); color: var(--tinta-2); }
.modalidades strong { color: var(--tinta); }
/* Todo lo que recibís: la frase literal, con su comienzo en tinta; la hebra se dibuja al entrar. */
.incluye { border-top: 1px solid var(--linea-papel); }
.incluye__item { position: relative; padding: var(--e-5) 0 var(--e-5) 2.4rem; border-bottom: 1px solid var(--linea-papel); }
.incluye__hebra { position: absolute; left: 0; top: calc(var(--e-5) + 0.85rem); width: 1.5rem; height: 2px; background: var(--roja-informe); transform-origin: 0 50%; }
.incluye__texto { overflow-wrap: anywhere; color: var(--tinta-2); max-width: 50ch; font-size: 1.125rem; }
.incluye__fuerte { color: var(--tinta); font-weight: 600; }

/* Qué vas a lograr: una ficha del informe, objetivo a la izquierda y qué significa a la derecha. */
.logros { margin-top: var(--e-9); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
.logros__cabeza { display: grid; gap: var(--e-4); }
.logros__titulo, .inversion__titulo {
  font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); line-height: var(--interlinea-titular); color: var(--roja-informe);
}
.logros__intro { color: var(--tinta-2); max-width: 52ch; font-size: 1.125rem; }
.logros__lista { border-bottom: 1px solid rgb(46 15 18 / 0.28); }
.logro { position: relative; display: grid; gap: var(--e-2); padding: var(--e-5) 0; }
.logro__regla { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(46 15 18 / 0.28); transform-origin: 0 50%; }
.logro__nombre { font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); line-height: 0.95; color: var(--tinta); }
.logro__texto { color: var(--tinta-2); max-width: 50ch; }
.logros__aviso { max-width: 70ch; padding-left: var(--e-4); border-left: 2px solid var(--roja-informe); color: var(--tinta-2); font-size: var(--t-chico); }
@media (min-width: 1024px) {
  .logros { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--e-8); }
  .logros__cabeza { position: sticky; top: calc(var(--cab) + 2rem); align-self: start; }
  .logros__lista, .logros__aviso { grid-column: 2; }
  .logro { grid-template-columns: 5fr 6fr; column-gap: var(--e-6); align-items: baseline; }
}

/* Inversión: el mensual es un renglón del informe; el trimestral recomendado, una placa de la sala
   oscura sobre el papel (no dos tarjetas iguales). */
.inversion { margin-top: var(--e-9); display: grid; gap: var(--e-6); }
.inversion[hidden] { display: none; }
.planes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.plan { display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.plan--mensual { padding-top: var(--e-5); border-top: 2px solid var(--tinta); }
.plan--trimestral {
  padding: var(--e-6) var(--e-5) var(--e-6);
  background: var(--noche); color: var(--hueso);
  border-top: 3px solid var(--sangre);
  border-radius: var(--r-s);
  box-shadow: 0 22px 44px -22px rgb(46 15 18 / 0.55);
}
.plan--trimestral :focus-visible { outline-color: var(--sangre); }
.plan__recomendado { font-family: var(--f-titular); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 1.25rem; line-height: 1; color: var(--sangre); letter-spacing: 0.02em; }
.plan__nombre { font-family: var(--f-titular); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 1.6rem; line-height: 1; }
/* el monto nunca pasa del ancho de la pantalla, ni con el texto al 200 % (el tope va en vw) */
.plan__monto { font-family: var(--f-titular); font-weight: 800; font-style: italic; font-size: min(clamp(3.4rem, 2rem + 5.6vw, 6rem), 18vw); line-height: 0.9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan--mensual .plan__monto { color: var(--roja-informe); }
.plan__periodo { font-weight: 500; }
.plan--mensual .plan__periodo, .plan--mensual .plan__detalle { color: var(--tinta-2); }
.plan--trimestral .plan__periodo, .plan--trimestral .plan__detalle { color: var(--hueso-2); }
/* Sin mayúsculas: "Bs" es el formato boliviano (en mayúsculas quedaba "BS 400"). */
.plan__ahorro { font-family: var(--f-titular); font-weight: 700; font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--sangre); }
.plan__detalle { font-size: var(--t-chico); max-width: 40ch; text-wrap: pretty; }
.plan--trimestral .boton { justify-self: start; margin-top: var(--e-4); }
.inversion__por-que { max-width: 68ch; color: var(--tinta-2); }
.inversion__por-que strong { color: var(--tinta); }
@media (min-width: 768px) {
  .planes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e-7); }
  .plan--trimestral { padding: var(--e-7) var(--e-7) var(--e-7); }
  /* los dos montos en la misma línea base: el mensual baja lo que ocupa el "Recomendado" de arriba */
  .plan--mensual { margin-top: calc(var(--e-7) + 3px + 1.25rem + var(--e-2) - var(--e-5) - 2px); }
}
.productos { margin-top: var(--e-9); display: grid; gap: var(--e-5); }
.productos__titulo { font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); line-height: 1; }
.productos__caja { max-width: 100%; overflow-x: auto; }
.productos__tabla { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
.productos__tabla th, .productos__tabla td { padding: var(--e-4) var(--e-3) var(--e-4) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea-papel); }
.productos__tabla thead th { font-size: var(--t-nota); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); border-bottom: 2px solid var(--tinta); }
.productos__tabla tbody th { font-weight: 600; width: 48%; }
.productos__detalle { display: block; font-weight: 400; color: var(--tinta-2); }
.productos__estado { white-space: nowrap; font-weight: 600; color: var(--roja-informe); }
.productos__modalidad-angosta { display: none; font-weight: 400; color: var(--tinta-2); }
/* En pantallas angostas la modalidad va debajo del nombre (la tabla no entra en tres columnas a 320 px). */
@media (max-width: 479px) {
  .productos__modalidad { display: none; }
  .productos__modalidad-angosta { display: block; }
  .productos__tabla tbody th { width: auto; }
}
.productos__estado--proximamente { color: var(--tinta-2); font-weight: 500; }
/* texto agrandado (html.texto-grande): cada línea en un bloque; en tres columnas, la del precio
   quedaba fuera de la pantalla a 375 */
html.texto-grande .productos__tabla, html.texto-grande .productos__tabla tbody, html.texto-grande .productos__tabla tr,
html.texto-grande .productos__tabla th, html.texto-grande .productos__tabla td { display: block; width: auto; }
html.texto-grande .productos__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html.texto-grande .productos__tabla tr { padding: var(--e-4) 0; border-bottom: 1px solid var(--linea-papel); }
html.texto-grande .productos__tabla th, html.texto-grande .productos__tabla td { padding: 0; border: 0; }
html.texto-grande .productos__tabla .productos__modalidad { display: none; }
html.texto-grande .productos__tabla .productos__modalidad-angosta { display: block; }
@media (min-width: 1024px) {
  .programa__grilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e-9); }
  .programa__cabeza { position: sticky; top: calc(var(--cab) + 2rem); }
  .productos__tabla { font-size: var(--t-texto); }
}

/* ============================================================================================
   3.9 Postulación
   ============================================================================================ */
.postulacion { background: var(--noche); padding-bottom: var(--sec); overflow: clip; }
.postulacion::before {
  content: ""; position: absolute; z-index: 0;
  right: -20vw; top: 10%;
  width: 90vw; aspect-ratio: 4 / 5;
  background: url("../fotos/halo-rojo.webp") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}
.postulacion__grilla { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-7); }
.postulacion__cabeza { display: grid; gap: var(--e-4); }
.postulacion__titulo { font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(3rem, 1.8rem + 6.4vw, 8rem); line-height: var(--interlinea-titular); letter-spacing: -0.01em; max-width: 11ch; }
.postulacion__titulo2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 500; color: var(--hueso-2); max-width: 28ch; }
.postulacion__cuerpo { display: grid; gap: var(--e-6); justify-items: start; align-content: start; }
.postulacion__bajada { max-width: 52ch; font-size: 1.125rem; }
.postulacion__despues { font-size: var(--t-nota); color: var(--hueso-3); max-width: 52ch; }
@media (min-width: 1024px) {
  .postulacion__grilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e-8); align-items: end; }
  .postulacion::before { right: -8vw; width: 54vw; }
}

/* Para quién es y para quién no: la fibra entera marca lo que sí; la cortada, lo que no. */
.filtro { position: relative; z-index: 1; margin-top: var(--e-9); padding-top: var(--e-7); border-top: 1px solid var(--linea-noche); display: grid; gap: var(--e-8); }
.filtro__titulo, .pasos__titulo {
  font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); line-height: var(--interlinea-titular); letter-spacing: -0.01em;
}
.filtro__no { color: var(--sangre); }
.filtro__col .filtro__lista { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.filtro__item { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: var(--e-3); }
.filtro__marca { display: block; width: 1.6rem; height: 3px; margin-top: 0.72em; transform: skewX(var(--angulo)); background: var(--sangre); }
/* la misma hebra, apagada y cortada una sola vez cerca de la punta (en dos mitades iguales se leía "– –") */
.filtro__item--no .filtro__marca { background: linear-gradient(90deg, var(--hueso-3) 0 72%, transparent 72% 84%, var(--hueso-3) 84%); height: 2px; }
.filtro__col--si .filtro__texto { color: var(--hueso); }
.filtro__col--no .filtro__texto { color: var(--hueso-2); }
.filtro__califica { margin-top: var(--e-6); max-width: 40ch; font-weight: 600; color: var(--hueso); }
@media (min-width: 1024px) {
  .filtro { grid-template-columns: 7fr 5fr; column-gap: var(--e-8); }
}

/* Cómo empezamos: el orden lo da la fibra que une los pasos (sin números). */
.pasos { position: relative; z-index: 1; margin-top: var(--e-9); display: grid; gap: var(--e-7); }
.pasos__lista { display: grid; gap: var(--e-6); }
.paso { position: relative; padding-top: var(--e-5); }
.paso__fibra { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--fibra-brillo); transform-origin: 0 50%; }
.paso__nudo { position: absolute; left: 0; top: -6px; width: 14px; height: 14px; border: 2px solid var(--sangre); border-radius: 50%; background: var(--noche); }
.paso__texto { max-width: 34ch; font-size: 1.125rem; color: var(--hueso); }
.pasos__intro { max-width: 52ch; margin-top: calc(-1 * var(--e-4)); color: var(--hueso-2); }
@media (min-width: 1024px) {
  .pasos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--e-6); }
  .paso { padding-right: var(--e-4); }
  .paso:not(:last-child) .paso__fibra { right: calc(-1 * var(--e-6)); }
}

/* ============================================================================================
   3.10 Dónde y cómo
   ============================================================================================ */
.donde { background: var(--noche); padding-block: 0 calc(var(--sec) + var(--diagonal)); }
.donde__grilla { display: grid; gap: var(--e-6); padding-top: var(--sec); border-top: 1px solid var(--linea-noche); }
.donde__lista { border-top: 1px solid var(--linea-noche); }
.donde__fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1); padding: var(--e-4) 0; border-bottom: 1px solid var(--linea-noche); }
.donde__fila dt { font-family: var(--f-titular); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 1.4rem; line-height: 1; }
.donde__fila dd { color: var(--hueso-2); }
.donde__contacto { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
@media (min-width: 768px) { .donde__fila { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; } }
.donde__fila dd, .donde__fila dt { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .donde__grilla { grid-template-columns: 5fr 7fr; column-gap: var(--e-8); } }

/* ============================================================================================
   3.11 Preguntas y cierre
   ============================================================================================ */
.preguntas { padding-bottom: calc(var(--sec) + var(--diagonal)); }
.preguntas__grilla { display: grid; gap: var(--e-6); }
.preguntas__lista { border-top: 2px solid var(--tinta); }
.pregunta { border-bottom: 1px solid var(--linea-papel); }
.pregunta__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  min-height: 60px; padding: var(--e-4) 0;
  font-weight: 600; font-size: 1.125rem;
  cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.pregunta__q::-webkit-details-marker { display: none; }
.pregunta__q { transition: color var(--d-hover) var(--ease-suave), opacity 100ms var(--ease-suave); }
.pregunta__q:active { opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .pregunta__q:hover { color: var(--roja-informe); }
  .pregunta__q:hover .pregunta__signo::before { transform: scaleX(1.25); }
}
.pregunta__signo { position: relative; flex: none; width: 16px; height: 16px; }
.pregunta__signo::before, .pregunta__signo::after {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--roja-informe);
  transition: transform 220ms var(--ease-suave);
}
.pregunta__signo::after { transform: rotate(90deg); }
.pregunta[open] .pregunta__signo::after { transform: rotate(0deg); }
.pregunta__r { padding: 0 0 var(--e-5); max-width: 62ch; color: var(--tinta-2); }
.pregunta[open] .pregunta__r { animation: menu-fundido 260ms var(--ease-suave); }
@media (min-width: 1024px) { .preguntas__grilla { grid-template-columns: 4fr 8fr; column-gap: var(--e-8); } }

.cierre { background: var(--noche); padding-bottom: var(--sec); }
.cierre__marco { width: var(--ancho-seguro); margin-inline: auto; display: grid; justify-items: center; gap: var(--e-6); text-align: center; }
.cierre__logo-caja { width: min(86vw, 640px); }
.cierre__logo { width: 100%; height: auto; }
.cierre__frase { font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--t-h2); line-height: var(--interlinea-titular); }
.cierre__linea { display: block; text-wrap: balance; }
.cierre__linea--roja { color: var(--sangre); }
.cierre__lema { font-family: var(--f-titular); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 1.25rem; line-height: 1; letter-spacing: 0.04em; color: var(--hueso-3); }
.cierre__bajada { max-width: 36ch; color: var(--hueso-2); font-size: 1.125rem; }
.cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-3) var(--e-5); }