/* ══════════════════════════════════════════════════════════════════
   TUBOX · bloque de resultados
   El caso no tiene galería: su contenido fuerte son los números,
   así que la métrica ocupa el lugar que en la plantilla tenía el video.
   ══════════════════════════════════════════════════════════════════ */
/* ── FICHA SOBRE LA PORTADA ───────────────────────────────────────
   Va dentro del hero pero fuera de .scale_w y de .media_c: esos dos
   se escalan y hacen parallax, y la ficha tiene que quedarse quieta. */
.hero{position:relative}
.hero_ficha{
  position:absolute;left:0;bottom:0;z-index:3;width:100%;
  display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  gap:0 56px;padding:22px 40px;
  color:var(--color-light);mix-blend-mode:difference;
  font-size:var(--fontXS);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.hero_ficha div{display:flex;flex-direction:column;gap:5px}
.hero_ficha dt{opacity:.6}
.hero_ficha dd{margin:0;font-size:var(--fontS);letter-spacing:.04em}

/* ── DATOS · las cifras repartidas a lo largo del scroll ──────────
   Aparecen entre las piezas, chicas, sin fondo propio: aportan
   mientras se leen los textos y se ven las imágenes. ── */
/* ── COMPARATIVO · mismo lenguaje que la ficha del pie ────────────
   Filete de un pelo por fila, divisor entre columnas y rótulo en gris:
   son las mismas reglas de .credits_row, con una columna más. */
/* bloque con max-width y margen automático, no flex + min(): sobre un
   item flex el porcentaje no se resolvía contra el contenedor y el
   ancho colapsaba al max-content del grid (722px en vez de 1000) */
.comparativo{width:100%;padding:9vh 40px 12vh}
/* 580px, el mismo ancho que la ficha del pie */
.comp_c{width:100%;max-width:580px;margin-inline:auto}
.comp_fila{
  display:grid;grid-template-columns:min(180px,33%) 1fr 1fr;gap:0;
  font-family:var(--sans);font-size:var(--fontS);font-weight:500;line-height:150%;
  /* toda la tabla en caja alta. El cuarto de espacio es la corrección
     de siempre para versalita: sin él las palabras largas se apelmazan */
  text-transform:uppercase;letter-spacing:.04em;
  border-top:1px solid #06040320;
}
.comp_fila>*{padding:11px 14px}
.comp_fila>:first-child{padding-left:0}
.comp_fila h4{color:#6d6f68;border-right:1px solid #06040320}
.comp_fila>:nth-child(2){border-right:1px solid #06040320;color:#8b8d85}

/* encabezado: sin filete arriba y con los rótulos en versalita. No cambia
   de cuerpo — lo único que lo separa de las filas es la caja alta. */
.comp_head{
  border-top:0;
  letter-spacing:.10em;text-transform:uppercase;
}
.comp_head h4{color:var(--color-dark)}
.comp_head>:nth-child(3){color:var(--color-dark)}

/* Toda la tabla en una sola cara y un solo cuerpo. La jerarquía la
   llevan el gris del rótulo, el gris de la columna "antes" y el filete
   de la fila de cierre — no el tamaño ni un color de realce. */
.comp_fila>:nth-child(2),
.comp_fila>:nth-child(3){
  font-variant-numeric:tabular-nums;
}
.comp_head>:nth-child(2),
.comp_head>:nth-child(3){
  letter-spacing:.10em;
}
/* la fila de cierre carga el peso: es la comparación que da sentido al resto */
.comp_cierre{
  border-top:1px solid #06040347;border-bottom:1px solid #06040347;
  background-color:#0604030a;
}
.comp_cierre h4{color:var(--color-dark)}
/* Todo el peso de la fila de cierre está en su filete y su fondo. El
   selector va cargado porque .comp_fila>:nth-child(3) tiene más
   especificidad que .comp_acento a secas. */
.comp_fila.comp_cierre>.comp_acento{
  color:var(--color-dark);font-weight:500;
}

/* OJO — las celdas .comp_ref siguen llevando datos de REFERENCIA, no
   reales. La marca visual está apagada a pedido, para previsualizar sin
   ruido. Para volver a verlas, descomentar el bloque de abajo.
   Se encuentran con:  grep -n "comp_ref\|data-pendiente" tubox.html
.comp_ref{
  color:#8b8d85;
  text-decoration:underline dotted #C9142B;
  text-underline-offset:5px;
  cursor:help;
}
*/

@media (max-width:768px){
  .comparativo{padding:7vh 20px 9vh}
  /* tres columnas no entran en 375px: cada fila pasa a ser un bloque con
     el rótulo arriba y las dos columnas debajo, una al lado de la otra */
  .comp_fila{grid-template-columns:1fr 1fr}
  .comp_fila h4{
    grid-column:1 / -1;border-right:0;padding:12px 0 4px;
    letter-spacing:.08em;text-transform:uppercase;
  }
  .comp_fila>:nth-child(2){padding-left:0}
  .comp_fila>*{padding:0 12px 13px}
  .comp_head{display:none}
}




/* ── marquesina infinita ─────────────────────────────────────────── */
.marquesina{overflow:hidden;width:100%;padding:22px 0;
  border-block:1px solid #06040320}
.marquesina_pista{display:flex;gap:40px;width:max-content;will-change:transform}
.marquesina span{
  font-size:var(--fontS);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;color:#6d6f68;
}
.marquesina.oscura{background-color:var(--color-dark);border-block-color:#ffffff1f}
.marquesina.oscura span{color:#8b8d85}

@media(max-width:900px){
  .hero_ficha{grid-template-columns:1fr;gap:8px;padding:16px 20px}
  .hero_ficha div{flex-direction:row;align-items:baseline;gap:10px}
  .hero_ficha dt{min-width:64px}
  .marquesina{padding:16px 0}
}

/* ── bloques de texto numerados ─────────────────────────────────── */
/* mucho aire arriba y abajo: el texto necesita recorrido para
   atravesar la zona de foco y que el efecto se lea */
/* Sin el efecto de lectura estas secciones están quietas, así que se
   dimensionan por su contenido: un 100svh con 26vh de padding era aire
   muerto que sólo se sostenía mientras el texto entraba fundiéndose. */
/* ── ETAPAS · panel de pestañas ────────────────────────────────────
   Ya no se avanza con el scroll: el panel ocupa una pantalla, queda
   centrado con aire arriba y abajo, y las pestañas pasan solas. El
   marco con filete lo vuelve un instrumento y no un tramo de página.

   El scroll se sacó a propósito: atarlo obligaba a scrollear para leer
   y la lectura quedaba a merced de la rueda. Con temporizador, el
   contenido se lee quieto. ── */
.etapas{
  display:grid;place-items:center;
  width:100%;height:100svh;padding:0 40px;
}
/* Sin contornos: el recuadro encerraba el relato como si fuera un
   formulario. Lo que ordena ahora es la línea de tiempo de abajo, que
   además dice algo —dónde estás en la historia— que un borde no decía. */
.etapas_marco{
  display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;
  width:min(100%,1000px);height:calc(100svh - 176px);
}
/* el relato arriba y la línea de tiempo abajo, aunque en el marcado el
   menú venga primero: se reordena con grid para no tocar las cuatro
   fichas ni volver a numerar nada */
.etapas_caja{grid-row:1}
.etapas_menu{
  grid-row:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:26px 0 8px;
}

/* ── LÍNEA DE TIEMPO ───────────────────────────────────────────────
   Los nodos se reparten el ancho en partes iguales y la línea corre de
   uno al siguiente. El tramo que va del nodo activo al que sigue se
   llena con el turno, así que el avance no es una barra suelta: es el
   camino que falta para el próximo capítulo. */
.etapas_lista{
  display:flex;list-style:none;
  width:min(100%,620px);
}
.etapas_lista li{position:relative;flex:1 1 0;min-width:0}
/* La pista va del centro de este nodo al del siguiente, a la altura del
   punto: 4px es el centro del punto de 8px, que es el primer hijo del
   botón. Antes cruzaba por encima de los números. */
.etapas_lista li::before,
.etapas_lista li::after{
  content:'';position:absolute;left:50%;right:-50%;top:4px;height:1px;
  z-index:0;
}
/* El recorrido se enciende en verde. Es el único color del sitio que no
   es la marca ni el acento del caso, y por eso funciona: no compite con
   nada y se lee como estado —esto ya pasó— y no como decoración. */
.etapas{--hecho:#1B8A4B}
.etapas_lista li::before{background-color:#06040324}
.etapas_lista li::after{
  background-color:var(--hecho);
  transform:scaleX(0);transform-origin:left;
}
/* sólo el tramo del nodo activo se llena, y lo hace con el turno */
.etapas_lista li[data-corriendo]::after{transform:scaleX(var(--avance,0))}
/* los tramos ya recorridos quedan pintados */
.etapas_lista li[data-hecho]::after{transform:scaleX(1)}
.etapas_lista li:last-child::before,
.etapas_lista li:last-child::after{display:none}
/* El gris de las inactivas era #b9bbb4 sobre #e9eae4: una relación de
   contraste de 1,6:1. No es un gris tenue, es un texto que no se ve —
   sólo se leían la activa y el epígrafe de la ficha, y la navegación
   parecía tener dos entradas en vez de seis. #5a5c55 da 5,6:1, que se
   lee sin dejar de estar en segundo plano respecto de la activa. */
/* El punto es el ::before del botón y entra como un item más del flex:
   así queda arriba del número sin posicionamiento absoluto, y los dos
   se alinean solos. Antes el punto colgaba del número con un top
   negativo y bastaba que cambiara el cuerpo para descalzarlos. */
.etapas_lista button{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  width:100%;padding:0;cursor:pointer;
  color:#5a5c55;
  transition:color .25s var(--ease);
}
.etapas_lista button::before{
  content:'';
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background-color:#dcddd6;
  box-shadow:0 0 0 1px #06040340 inset;
  transition:transform .35s var(--ease),background-color .35s var(--ease),
             box-shadow .35s var(--ease);
}
.etapas_lista button:hover,
.etapas_lista button:focus-visible{color:var(--color-dark)}
.etapas_lista button:hover::before{background-color:#bfc1b8}
.etapas_lista button[aria-current]{color:var(--color-dark)}
.etapas_lista button[aria-current]::before{
  background-color:var(--hecho);
  box-shadow:0 0 0 1px var(--hecho) inset, 0 0 0 4px #1b8a4b26;
  transform:scale(1.55);
}
/* los ya vistos quedan encendidos: la línea cuenta el recorrido */
.etapas_lista li[data-hecho] button::before{
  background-color:var(--hecho);
  box-shadow:0 0 0 1px var(--hecho) inset;
}
.etapas_lista li[data-hecho] .etapa_n{color:var(--hecho)}
.etapas_lista button[aria-current] .etapa_n{color:var(--color-dark)}
/* el anillo del foco iba a dar contra el punto de 8px: se lo corre */
.etapas_lista button:focus-visible{outline-offset:6px;border-radius:3px}

.etapa_n{
  font-family:var(--sans);font-size:12px;line-height:1;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:.1em;
  color:inherit;
}
/* el rótulo sigue en el botón para que un lector de pantalla lo lea:
   sin él el botón se llamaría "03" a secas. Se oculta a la vista, no al
   árbol de accesibilidad, así que nada de display:none. */
.etapa_rot{
  position:absolute;width:1px;height:1px;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
}

/* El título de la etapa activa: fuera de la lista, centrado contra la
   línea entera. Lo inyecta el JS. */
.etapas_titulo{
  margin:0;min-height:1.2em;
  font-family:var(--texto);font-size:var(--fontS);font-weight:600;
  letter-spacing:.13em;line-height:130%;
  text-transform:uppercase;text-align:center;text-wrap:balance;
  color:var(--color-dark);
}

/* La ficha de números no es el paso siguiente del relato: es el saldo.
   Por eso baja al pie de la columna, detrás de un filete y sin número
   — numerarla la haría parecer la continuación de la secuencia, que es
   justo lo que no es. La sangría hacia la izquierda remata la idea. */
/* La ficha de números no es un paso más del relato: es el saldo. Por eso
   queda fuera de la línea de tiempo, debajo y en una fila propia. Sin
   filete que la separe —los contornos se fueron—: alcanzan el aire y el
   epígrafe en gris. */
/* La ficha va centrada bajo la línea, como todo lo demás, y ahora es un
   botón con cuerpo: como texto suelto en gris se perdía entre el título
   de la etapa y el borde de la pantalla, y era justamente lo que había
   que encontrar. */
.etapas_aparte{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding-top:2px;text-align:center;
}
.etapas_corte{
  margin:0;
  font-family:var(--sans);font-size:var(--fontXXS);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:#8b8d85;
}
.etapas_lista_datos{display:flex;width:auto;padding:0}
.etapas_lista_datos li{flex:0 0 auto}
.etapas_lista_datos li::before,
.etapas_lista_datos li::after{display:none}
.etapas_lista_datos button::before{display:none}
.etapas_lista_datos button{
  flex-direction:row;width:auto;gap:0;
  padding:9px 17px;border-radius:100px;
  background-color:var(--color-dark);color:var(--color-light);
  font-family:var(--texto);font-size:var(--fontXS);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.etapas_lista_datos button:hover,
.etapas_lista_datos button:focus-visible{
  background-color:var(--hecho);color:var(--color-light);transform:translateY(-1px);
}
.etapas_lista_datos button[aria-current]{background-color:var(--hecho)}
/* acá el rótulo sí se ve: es el texto del botón */
.etapas_lista_datos .etapa_rot{
  position:static;width:auto;height:auto;margin:0;overflow:visible;
  clip:auto;white-space:nowrap;
}

/* grid en vez de position:absolute: apila las etapas en la misma celda
   y aun así la caja toma el alto de la más alta */
/* position:relative es lo que ancla el seguidor del puntero: sin esto
   se posicionaba contra un ancestro lejano y el GIF terminaba flotando
   sobre la portada. El overflow además lo recorta a la caja, que es lo
   que hace que la reacción viva sólo donde están los párrafos. */
.etapas_caja{position:relative;display:grid;overflow:hidden}
.etapas_caja > .etapa{grid-area:1/1;align-self:center}

.etapa{
  display:flex;flex-direction:column;
  padding:34px;overflow-y:auto;max-height:100%;
  /* con puntero fino la reacción flota a la derecha, así que el texto
     reserva su lugar: sin esto, en una ventana angosta el párrafo le
     pasaba por debajo. La misma consulta que usa el JS para decidir si
     la pieza flota o va en el flujo. */
  opacity:0;transform:translateY(30px);
  pointer-events:none;
  transition:opacity .24s var(--ease),transform .3s var(--ease);
}
/* La entrante ESPERA a que la saliente se haya ido. Se cruzaban en el
   fundido y por medio segundo se veían los dos textos encimados —con
   párrafos largos eso no se lee como una transición, se lee como que
   algo se rompió. */
.etapa.activa{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity .42s var(--ease) .26s,transform .5s var(--ease) .26s;
}

.etapa.saliendo{opacity:0;transform:translateY(-28px)}

/* el gif encabeza la etapa: el aire va abajo, no arriba */
/* ── EL ÁNIMO DE LA ETAPA ──────────────────────────────────────────
   Cada etapa nombra el estado de ánimo del momento —la bronca, la
   desconfianza, la rosca— antes de contarlo. Sirve para dos cosas: le
   da al relato un arco en vez de una lista de tareas, y deja explícito
   qué tiene que transmitir el GIF de esa etapa. Va en mono, chico y en
   el gris de las etiquetas: es un rótulo, no un título. */
/* El ánimo de cada etapa sigue en el marcado —le dice al GIF qué tiene
   que transmitir y sirve de nota para quien escriba— pero no se muestra:
   con la línea de tiempo abajo y el título de la etapa ahí, un tercer
   rótulo arriba del párrafo era una capa de más. */
article.etapa p.etapa_animo{display:none}
/* respiro entre el título y el cuerpo */
.etapa .entrada{margin-bottom:16px}
.etapa p{
  font-family:var(--texto);font-size:19px;font-weight:500;line-height:166%;
  /* tope de ancho atado al tamaño: sobre los 700px de la columna, sin
     esto quedaban ~80 caracteres por renglón, largo para leer de corrido */
  max-width:62ch;
  /* Justificado no: en una columna de 600px abría ríos de espacio entre
     palabras —se ve clarísimo en "queda sin nada que mostrar"— y encima
     obligaba a cortar con guiones. Alineado a la izquierda se lee mejor
     aunque el borde derecho quede irregular. */
  text-align:left;hyphens:manual;
}
/* los párrafos venían pegados uno al otro y se leían como un bloque */
.etapa p + p{margin-top:15px}
/* Todos los párrafos del capítulo miden lo mismo, en escritorio y en el
   teléfono. La entrada se distingue SÓLO por el peso y por la tinta: en
   negrita y en el negro pleno, contra el gris del cuerpo. Antes iba a
   24px contra 17 y el salto partía la pestaña en dos piezas que
   parecían de secciones distintas —un título y su texto— cuando en
   realidad la entrada es el primer párrafo del mismo relato. */
.etapa p:not(.entrada){font-size:17px;font-weight:400;color:#4a4c46}
/* Va después del :not() a propósito: los dos selectores pesan (0,2,1) y
   con la misma especificidad manda el orden. */
article.etapa .entrada{
  font-size:17px;font-weight:700;line-height:166%;
  text-align:left;margin-bottom:16px;
}
.etapa strong{font-weight:600}

@media(max-width:900px){
  /* En táctil el marco deja de ser una sola pantalla: las pestañas se
     apilan arriba en una tira y el panel toma el alto que necesite. Un
     alto fijo con texto de tres párrafos obliga a scrollear adentro de
     una caja adentro de la página, que se siente atrapado. */
  /* La línea de tiempo ya es horizontal en escritorio, así que en el
     teléfono no hay que darla vuelta: sólo apretarla. Los nodos siguen
     repartiéndose el ancho —con seis entran igual, son números de dos
     cifras— y el título de la activa sigue centrado abajo, que es lo
     que evita que la fila se ensanche. */
  .etapas{height:auto;padding:9vh 20px}
  .etapas_marco{height:auto;min-height:74svh}
  .etapas_menu{padding:22px 0 4px;gap:16px}
  .etapas_lista{width:100%;padding-bottom:30px}
  .etapas_lista button{gap:11px}
  .etapa_n{font-size:11px}
  .etapa_rot{font-size:var(--fontXS);letter-spacing:.09em}
  .etapas_aparte{padding-top:2px}
  .etapa{padding:22px 4px 26px;max-height:none;overflow:visible}
}

@media(max-width:900px){
  .metricas{padding:72px 20px;gap:30px}
  .metricas_grid{grid-template-columns:1fr}
  .metrica{padding:20px 0 0}
  .metrica_principal .cifra{font-size:clamp(56px,17vw,110px)}
  .etapa p{font-size:17px;max-width:none}
  /* Todos los párrafos del mismo cuerpo. La entrada se distingue por el
     peso y no por el tamaño: en una columna angosta el salto de 21 a 17
     partía el bloque en dos piezas que parecían de secciones distintas. */
  /* La entrada ya se define arriba, para las dos anchuras. Acá sólo
     queda el interlineado parejo del resto. */
  article.etapa p{font-size:17px;line-height:166%}
  .ficha_corta{grid-template-columns:1fr 1fr;gap:16px;padding:20px}
}
.banda .lazy_wrapper{width:min(100%,1180px);margin-inline:auto;aspect-ratio:3000/992}
@media(max-width:768px){.banda{padding:12px 0}}

/* ── GALERÍA · una pieza por vez ──────────────────────────────────
   Arriba el archivo y las acciones; abajo la navegación, más grande
   porque es lo que se usa. El escenario va oscuro para que la pieza
   se despegue del fondo claro de la página. ── */
.galeria{padding:0}
.gal{width:100%}

/* La barra se pega al tope mientras la galería ocupa la pantalla. No
   puede ganarle al header por z-index: vive dentro de .inner, que tiene
   z-index:1 y crea contexto de apilamiento, así que el 14 del header
   siempre pintaría encima. En vez de pelear, el header se corre — el JS
   lo retrae mientras la barra manda y lo devuelve al pasar la galería. */
.gal_barra{
  position:sticky;top:0;z-index:12;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;
  background-color:var(--color-light);
  border-top:1px solid #06040326;border-bottom:1px solid #06040326;
}
.gal_celda{
  display:flex;align-items:center;gap:10px;padding:12px 20px;
  font-size:12px;font-weight:500;letter-spacing:.10em;
  text-transform:uppercase;white-space:nowrap;
}
.gal_alt{overflow:hidden;text-overflow:ellipsis;color:#6d6f68;min-width:0}

/* Acciones: son interfaz, así que llevan etiqueta además del ícono.
   Sin aspect-ratio — con texto adentro el botón se ensancha y esa regla
   le forzaba la misma altura, dejándolo enorme (97x97).
   Sin stretch heredaría el align-items:center de .gal_celda. */
.gal_acciones{padding:0;gap:0;justify-content:flex-end;align-items:stretch}
.gal_acciones button{
  display:flex;align-items:center;gap:9px;
  padding:0 20px;cursor:pointer;
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  border-left:1px solid #06040326;
  transition:background-color .18s ease-out,color .18s ease-out;
}
.gal_acciones button svg{flex:0 0 auto}
.gal_acciones button:hover{background-color:#060403;color:#eeeeee}
.gal_aviso{
  display:flex;align-items:center;padding-right:16px;
  font-size:var(--fontXXS);letter-spacing:.08em;text-transform:uppercase;
  color:#6d6f68;opacity:0;transition:opacity .25s var(--ease);
}
.gal_aviso.visible{opacity:1}

.gal_escena{
  position:relative;height:min(68svh,720px);overflow:hidden;
  background-color:#dedede;
}
.gal_pieza{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease);
}
.gal_pieza.activa{opacity:1;pointer-events:auto}
.gal_pieza .lazy_wrapper{
  width:100%;height:100%;aspect-ratio:auto;padding:34px;
  display:flex;align-items:center;justify-content:center;cursor:zoom-in;
}
.gal_pieza img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.gal_pieza .placeholder{background-color:transparent}

.gal_progreso{height:1px;background-color:#06040320;overflow:hidden}
.gal_progreso i{
  display:block;height:100%;width:100%;background-color:var(--color-dark);
  transform:scaleX(0);transform-origin:left center;
}

/* pie: la navegación centrada, no estirada a los bordes */
.gal_pie{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:26px 20px 34px;
}
.gal_nav{
  display:flex;align-items:stretch;
  border:1px solid #06040326;
}
.gal_nav button{
  padding:15px 26px;cursor:pointer;
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  transition:background-color .18s ease-out,color .18s ease-out;
}
.gal_nav button:hover{background-color:#060403;color:#eeeeee}
.gal_idx{
  display:flex;align-items:center;gap:7px;padding:15px 26px;
  font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;
  border-inline:1px solid #06040326;
}
.gal_idx em{font-style:normal;color:#8b8d85;font-size:15px}

/* indicador de posición: un segmento por pieza */
.gal_puntos{display:flex;gap:6px}
.gal_puntos button{
  width:26px;height:3px;cursor:pointer;
  background-color:#06040326;transition:background-color .25s var(--ease);
}
.gal_puntos button:hover{background-color:#06040359}
.gal_puntos button[aria-current]{background-color:var(--color-dark)}

/* ── PORTADAS DE REELS · carrusel horizontal ──────────────────────
   La sección se fija mientras el riel se desplaza en X; cuando la
   última portada termina de pasar, el scroll vertical sigue solo.
   En táctil no se fija nada: es un scroll horizontal nativo, que es
   el gesto que la gente ya espera en un teléfono.
   ── */
/* El alto de la sección lo pone el JS: ventana + recorrido horizontal.
   Se usa position:sticky y NO el pin de ScrollTrigger, porque el pin del
   footer deja un transform en #work_wrapper y eso vuelve al contenedor
   bloque de referencia de cualquier descendiente fixed: el pin anidado
   terminaba dibujándose fuera de pantalla. */
/* Gris claro y no negro: sobre negro cada pieza quedaba recortada
   flotando, y las capturas de app —que son casi todas blancas— se
   veían como agujeros. El gris sale de mezclar el claro del sitio con
   el oscuro, así que pertenece a la paleta y no es un gris cualquiera. */
.reels{
  position:relative;width:100%;
  background-color:#dcddd6;color:var(--color-dark);
}
.reels_sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;
}
.reels_inner{display:flex;flex-direction:column;gap:28px;width:100%}
.reels_title{
  padding:0 40px;
  font-size:var(--fontXS);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  /* el gris de antes era para fondo negro: sobre el claro daba 2,46:1 */
  color:#5a5c55;
}
.reels_pista{
  display:flex;align-items:center;gap:20px;
  padding:0 40px;width:max-content;will-change:transform;
}
/* las portadas son 9:16: se dimensionan por altura, no por ancho.
   Así llenan la sección y el riel gana recorrido para desplazarse. */
.reel{flex:0 0 auto}
.reel .lazy_wrapper{height:min(70svh,660px);width:auto;aspect-ratio:var(--ar,9/16)}
.reel img,.reel video{width:100%;height:100%;object-fit:cover;display:block}
/* mismo radio en las tres galerías del sitio: las portadas de reel, las
   capturas de la app y las piezas de video. El recorte lo hace el
   .lazy_wrapper, que es el que tiene overflow:hidden */
.reel .lazy_wrapper{border-radius:15px}

@media(max-width:900px){
  .reels{height:auto!important;padding:64px 0}
  .reels_sticky{position:static;height:auto;overflow:visible}
  .reels_pista{
    width:auto;overflow-x:auto;padding:0 20px 8px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .reels_pista::-webkit-scrollbar{height:0}
  .reel{scroll-snap-align:center}
  .reel .lazy_wrapper{height:auto;width:62vw}
  .reels_title{padding:0 20px}
}

/* ── puntos del riel de reels (los inyecta el JS en táctil) ─────── */
.reels_puntos{
  display:flex;justify-content:center;gap:7px;
  padding:20px 20px 0;
}
.reels_puntos button{
  width:24px;height:3px;cursor:pointer;
  /* claro translúcido servía sobre negro; sobre el gris desaparecía */
  background-color:#0604032e;
  transition:background-color .3s var(--ease);
}
.reels_puntos button[aria-current]{background-color:var(--color-dark)}

/* ── EL SITIO · portada primero, sitio real recién al pedirlo ─────
   Cargar un sitio entero en un iframe cuesta una página de red completa;
   hasta que no hacen clic se muestra sólo la portada. El iframe se sirve
   a 1512px —el mismo ancho con el que está diseñada la portada— y se
   escala, así las proporciones coinciden y no salta al cargar. ── */
.sitio{
  display:flex;flex-direction:column;
  width:100%;padding:120px 0;
}
.sitio_barra{
  display:grid;grid-template-columns:1fr auto;align-items:stretch;
  width:min(100%,1180px);margin-inline:auto;
  border:1px solid #06040326;border-bottom:0;
}
.sitio_url{
  display:flex;align-items:center;padding:12px 20px;
  font-size:12px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:#6d6f68;
}
/* mismo botón cuadrado que las redes del header y las acciones de galería */
.sitio_abrir{
  display:grid;place-items:center;
  height:100%;aspect-ratio:1;width:auto;
  border-left:1px solid #06040326;
  transition:background-color .18s ease-out,color .18s ease-out;
}
.sitio_abrir:hover{background-color:#060403;color:#eeeeee}

.sitio_visor{
  position:relative;overflow:hidden;
  width:min(100%,1180px);margin-inline:auto;
  aspect-ratio:1512/982;
  border:1px solid #06040326;background-color:#111;
}
.sitio_visor iframe{
  position:absolute;top:0;left:0;width:1512px;height:945px;border:0;
  transform:scale(var(--k,.5));transform-origin:0 0;
  pointer-events:none;                 /* inerte hasta que se active */
}
.sitio_visor.activo iframe{pointer-events:auto}

/* portada y botón comparten celda: así el botón queda centrado encima
   de la imagen sin depender de una posición estática */
.sitio_previa{
  position:absolute;inset:0;z-index:2;display:grid;
  background-color:#1a1b19;
}
.sitio_previa > *{grid-area:1/1}
.sitio_previa img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .55s var(--ease)}
.sitio_entrar{
  place-self:center;
  display:flex;align-items:center;gap:12px;
  padding:17px 30px;cursor:pointer;
  border-radius:999px;
  background-color:var(--color-light);color:var(--color-dark);
  box-shadow:0 16px 44px #06040340;
  font-size:var(--fontS);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  transition:transform .28s var(--ease),background-color .2s ease-out;
}
.sitio_entrar::after{content:'↗';font-size:15px;line-height:1}
.sitio_entrar:hover{transform:scale(1.045);background-color:#fff}
.sitio_visor.cargado .sitio_previa{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}

/* ── LA PREVIA VIVA ────────────────────────────────────────────────
   Con .viva el sitio ya está cargado y quieto detrás: se va la captura
   y queda el botón encima. Se apaga la captura y NO la previa entera,
   como hace .cargado, justamente para que el botón siga estando —el
   sitio de atrás todavía no se puede tocar. */
.sitio_visor.viva .sitio_previa{background-color:transparent}
.sitio_visor.viva .sitio_previa img{opacity:0;transition:opacity .55s var(--ease)}
/* sobre una portada real el botón necesita separarse del fondo */
.sitio_visor.viva:not(.cargado) .sitio_entrar{box-shadow:0 18px 50px #06040359}

/* una vez cargado, la capa devuelve el scroll a la página */
.sitio_capa{
  position:absolute;inset:0;z-index:3;display:none;
  align-items:center;justify-content:center;
  background-color:#06040338;cursor:pointer;
}
.sitio_visor.cargado:not(.activo) .sitio_capa{display:flex}
.sitio_capa span{
  padding:12px 20px;background-color:var(--color-light);color:var(--color-dark);
  font-size:var(--fontXS);font-weight:500;letter-spacing:.10em;text-transform:uppercase;
}
.sitio_aviso{
  position:absolute;left:0;bottom:0;z-index:4;padding:8px 12px;
  background-color:var(--color-dark);color:var(--color-light);
  font-size:var(--fontXXS);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.sitio_visor.activo .sitio_aviso{opacity:1}

@media(max-width:768px){
  /* sin gap: la barra tiene que quedar pegada al visualizador */
  .sitio{padding:70px 0;gap:0}
  /* En el teléfono el alto lo pone la captura y no una proporción fija:
     con 1512/982 impuesta, una imagen de otra forma quedaba con bandas
     arriba y abajo o recortada. La imagen entra entera y el contenedor
     la sigue. */
  .sitio_barra,.sitio_visor{width:auto;margin-inline:20px}
  .sitio_visor{aspect-ratio:auto;height:auto}
  .sitio_previa{position:relative;height:auto}
  .sitio_previa img{position:relative;width:100%;height:auto;object-fit:contain}
  .sitio_entrar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
  /* en táctil el iframe compite con el gesto de scroll: sólo el enlace */
  .sitio_entrar{padding:14px 22px;font-size:var(--fontXS)}
}

/* ── REACCIONES · sólo el GIF, en una píldora angosta ─────────────
   Sin texto: la reacción la da la imagen, no una leyenda. ── */
/* Sin contenedor: el GIF es la reacción. Cada uno con su proporción y
   ancho propios — uno es apaisado y el otro casi 4:3, forzarlos al mismo
   recuadro los deformaría. */
/* Cuadrado, derecho y con las esquinas redondeadas. Sin hover: la
   reacción es un guiño, no un control — invitar a pasarle el mouse
   prometía algo que después no pasaba. */
/* ── LA REACCIÓN ───────────────────────────────────────────────────
   Está siempre a la vista, no sólo al pasar el puntero: escondida
   detrás de un hover, nadie se enteraba de que había un GIF.

   Lo que hace el puntero es INCLINARLA. Con perspectiva sobre la caja y
   dos rotaciones que el JS escribe una vez por cuadro, la pieza gira
   hacia el lado por el que pasás. Encima van dos capas fijas: un brillo
   que se corre con el puntero —da el reflejo del vidrio— y una textura
   de ruido que le saca el aspecto de recorte pegado.

   Todo lo que se anima es transform y una posición de fondo, o sea
   compositor. El ruido es un feTurbulence dentro de un background-image,
   así que el navegador lo rasteriza una vez y después es una imagen. */
.etapas_caja{perspective:900px}

/* el brillo: un óvalo claro que sigue al puntero, como el reflejo de una
   fuente de luz sobre un vidrio */
.reaccion_luz{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--lx,50%) var(--ly,50%),
    #ffffff40 0%, #ffffff14 32%, #00000000 62%);
  mix-blend-mode:screen;
}
/* la textura: le saca el aspecto de recorte pegado sobre el fondo */
.reaccion_grano{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22r%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23r%29%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:repeat;
  opacity:.2;mix-blend-mode:overlay;
}

/* en táctil no hay puntero que incline nada, pero la luz y la textura
   van igual: la pieza queda fija y visible desde el arranque */
/* La caja base de la reacción, igual en la ficha y en el relato: con
   perspectiva propia para que el giro no dependa del contenedor. */
.reaccion{
  position:relative;width:var(--w,190px);margin:0 0 26px;
  /* el radio va acá y no en el <img>: el overflow:hidden ya recorta la
     imagen, la luz y el grano contra la misma forma */
  overflow:hidden;border-radius:14px;
  background-color:#0f0f0e;
  perspective:900px;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 16px 38px -18px #06040359;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
  will-change:transform;
}
.reaccion.viva{
  transition:transform .16s linear,box-shadow .5s var(--ease);
  box-shadow:0 24px 56px -20px #06040370;
}
.reaccion img{width:100%;height:auto;display:block}


/* ── VISOR AMPLIADO · la pieza de galería a pantalla completa ─────
   Este bloque faltaba entero, así que [data-gal-ampliar] agregaba la
   clase a un div sin estilos y no pasaba nada visible. ── */
.visor{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  padding:60px 40px 76px;
  background-color:#060403f5;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s var(--ease),visibility .34s var(--ease);
}
.visor.abierto{opacity:1;visibility:visible;pointer-events:auto}
/* el reset pone img{width:100%}: sin width:auto la imagen se deforma */
.visor img{
  width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;display:block;
  transform:scale(.97);transition:transform .42s var(--ease);
}
.visor.abierto img{transform:none}
.visor_pie{
  position:absolute;left:0;bottom:0;width:100%;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
  padding:15px 24px;
  border-top:1px solid #ffffff1f;
  color:#b9bbb4;font-size:var(--fontXS);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
}
.visor_pie [data-visor-n]{color:var(--color-light);font-variant-numeric:tabular-nums}
.visor_pie [data-visor-t]{color:#8b8d85;text-transform:none;letter-spacing:.02em}
.visor_pie span:last-child{color:#6d6f68}
@media (max-width:768px){
  /* En táctil la galería va a sangre: los instrumentos se tocan entre sí
     y llegan a los dos bordes, sin aire alrededor. */
  .gal_escena{height:auto;aspect-ratio:4/5}
  .gal_pieza .lazy_wrapper{padding:0}

  .gal_barra{grid-template-columns:minmax(0,1fr) auto}
  .gal_celda{padding:11px 14px;gap:8px}
  .gal_alt{font-size:var(--fontXXS)}
  .gal_acciones button span{display:none}
  .gal_acciones button{padding:0 15px}

  /* el pie pierde su marco y la navegación se estira de borde a borde */
  .gal_pie{padding:0;gap:0}
  .gal_nav{width:100%;border-inline:0;border-bottom:0}
  .gal_nav button{flex:1;padding:15px 0}
  .gal_idx{flex:0 0 auto;padding:15px 18px}
  .gal_puntos{padding:15px 0 20px}

  .visor{padding:40px 16px 64px}
  .visor_pie{grid-template-columns:1fr;gap:4px;padding:12px 16px}
  .visor_pie [data-visor-t]{display:none}
}


/* ── VIBE · reproductor de la portada ─────────────────────────────
   Mismo cuadrado instrumental del header. La pista es opcional: si el
   archivo no está, el botón queda inerte y lo dice, en vez de fallar
   en silencio al hacer clic. ── */
.hero_vibe{
  position:absolute;right:20px;bottom:22px;z-index:4;
  display:flex;align-items:stretch;
  border:1px solid #e9eae43d;
  /* sin backdrop-filter: acá está sobre la portada, que hace parallax,
     así que el fondo cambia y se volvía a desenfocar en cada cuadro del
     scroll. Un negro plano más opaco se lee igual sobre una foto. */
  background-color:#060403ad;
  color:var(--color-light);
}
.vibe_btn{
  display:grid;place-items:center;
  aspect-ratio:1;width:auto;padding:0 13px;cursor:pointer;
  border-right:1px solid #e9eae43d;
  transition:background-color .18s ease-out,color .18s ease-out;
}
.vibe_btn:hover{background-color:#eeeeee;color:#060403}
.vibe_pause{display:none}
.hero_vibe.sonando .vibe_play{display:none}
.hero_vibe.sonando .vibe_pause{display:block}
.hero_vibe.sin_pista .vibe_btn{cursor:not-allowed;opacity:.45}
.vibe_txt{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:9px 14px;
}
.vibe_rotulo{
  font-size:var(--fontXXS);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
.vibe_estado{
  font-size:var(--fontXXS);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:#e9eae499;
}
/* las ondas sólo se mueven mientras suena */
.vibe_ondas{
  display:flex;align-items:center;gap:3px;padding:0 14px 0 0;
}
.vibe_ondas i{
  width:2px;height:7px;background-color:#e9eae466;
  transition:background-color .3s;
}
.hero_vibe.sonando .vibe_ondas i{
  background-color:var(--color-light);
  animation:vibe_onda .9s ease-in-out infinite;
}
.hero_vibe.sonando .vibe_ondas i:nth-child(2){animation-delay:.15s}
.hero_vibe.sonando .vibe_ondas i:nth-child(3){animation-delay:.3s}
.hero_vibe.sonando .vibe_ondas i:nth-child(4){animation-delay:.45s}
@keyframes vibe_onda{0%,100%{height:5px}50%{height:15px}}
@media (max-width:900px){.hero_vibe{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero_vibe.sonando .vibe_ondas i{animation:none;height:11px}
}

/* ══ ENTRADA Y CIERRE DEL CASO ══════════════════════════════════ */

/* ── cierre ── */
.cierre_caso{
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
  width:100%;max-width:1180px;margin-inline:auto;
  padding:0 40px 14vh;
}
.cierre_caso h2{
  margin:0;max-width:22ch;
  font-family:var(--display);font-size:clamp(28px,4vw,54px);
  font-weight:300;line-height:102%;letter-spacing:-.03em;text-wrap:balance;
}
.cierre_caso p{
  margin:0;max-width:56ch;
  font-family:var(--texto);font-size:18px;line-height:170%;color:#4a4c46;
}
.cierre_caso strong{color:var(--color-dark);font-weight:600}
.cierre_cta{
  margin-top:14px;padding:16px 28px;border-radius:100px;
  background-color:var(--color-dark);color:var(--color-light);
  font-family:var(--texto);font-size:var(--fontS);font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.cierre_cta:hover,.cierre_cta:focus-visible{
  background-color:var(--hecho,#1B8A4B);transform:translateY(-2px);
}

@media(max-width:900px){
  .cierre_caso{padding:0 20px 10vh}
}

/* la reacción dentro de un capítulo: flota a la derecha del texto en
   escritorio y encabeza el capítulo en el teléfono */
.cap .reaccion{width:var(--w,190px)}
@media(min-width:901px){
  .cap .reaccion{float:right;margin:4px 0 20px 34px;shape-margin:20px}
}
@media(max-width:900px){
  .cap .reaccion{width:min(var(--w,190px),52vw);margin:0 0 22px}
}

/* ── el servicio de la etapa, bajo el título de la línea ──────────
   Es dato del trabajo —Meta Ads, Google Ads, desarrollo— y no un
   rótulo que repita el título. Por eso vive en la navegación y no
   arriba del párrafo, que es de donde se sacó. */
.etapas_servicio{
  margin:5px 0 0;min-height:1em;
  font-family:var(--sans);font-size:var(--fontXXS);
  letter-spacing:.15em;text-transform:uppercase;text-align:center;
  color:#8b8d85;
}

/* ── NOTAS AL PIE DEL CAPÍTULO ─────────────────────────────────────
   Antes eran destacados en medio del texto, en otra tipografía y más
   grandes: cortaban la lectura justo en el medio para decir algo que
   en realidad es un comentario al margen. Bajan al pie, chicas y en
   gris, separadas por un filete. El que quiere leer de corrido lo hace
   sin tropezar, y el que llega al final las encuentra ahí. */
.etapa_notas{
  margin-top:26px;padding-top:16px;
  border-top:1px solid #0604031f;
  display:flex;flex-direction:column;gap:9px;
}
/* El selector va cargado porque .etapa p:not(.entrada) tiene (0,2,1) y
   le ganaba: la nota salía en 17px y en el gris del cuerpo, o sea
   idéntica a un párrafo más. */
article.etapa .etapa_notas p{
  position:relative;
  margin:0;padding-left:18px;max-width:56ch;
  font-family:var(--texto);font-size:14px;font-weight:400;line-height:158%;
  color:#6d6f68;
}
/* el asterisco marca que es una nota y no un párrafo más */
.etapa_notas p::before{
  content:'*';position:absolute;left:0;top:0;
  font-family:var(--sans);color:#8b8d85;
}
.etapa_pie{
  display:block;margin-top:18px;
  font-family:var(--sans);font-size:var(--fontXS);
  letter-spacing:.1em;text-transform:uppercase;color:#8b8d85;
}
.etapa p em{font-style:normal;font-weight:600;color:var(--color-dark)}


/* ══════════════════════════════════════════════════════════════════
   LA LÍNEA DE TIEMPO, VERTICAL EN ESCRITORIO
   Al costado del contenido y no debajo: con ocho capítulos la fila
   horizontal dejaba ocho números sueltos sin lugar para el título de
   cada uno. En vertical cada capítulo lleva su nombre al lado, que es
   lo que hace que un índice sirva para elegir y no sólo para contar.
   ══════════════════════════════════════════════════════════════════ */
@media(min-width:901px){
  /* La línea va del lado DERECHO: el ojo entra por el texto, que es el
     relato, y la línea queda al costado ilustrando dónde está parado.
     A la izquierda se leía primero el índice y después el capítulo, que
     es el orden inverso al que se quiere contar. */
  .etapas_marco{
    grid-template-columns:1fr 300px;grid-template-rows:1fr;
    height:calc(100svh - 150px);
    gap:clamp(30px,4vw,64px);
  }
  .etapas_caja{grid-row:1;grid-column:1}
  .etapas_menu{
    grid-row:1;grid-column:2;
    align-items:stretch;justify-content:center;gap:26px;padding:0;
  }
  .etapas_lista{flex-direction:column;width:100%}
  .etapas_lista li{flex:0 0 auto}

  /* el tramo pasa a ser vertical: del centro de este punto al del que
     sigue, y se llena de arriba hacia abajo */
  .etapas_lista li::before,
  .etapas_lista li::after{
    left:4px;right:auto;top:50%;bottom:-50%;
    width:1px;height:auto;
  }
  .etapas_lista li::after{
    transform:scaleY(0);transform-origin:top;
  }
  .etapas_lista li[data-corriendo]::after{transform:scaleY(var(--avance,0))}
  .etapas_lista li[data-hecho]::after{transform:scaleY(1)}

  /* punto, número y título en una fila */
  .etapas_lista button{
    display:grid;grid-template-columns:9px auto 1fr;
    align-items:center;gap:0 15px;
    padding:19px 0;text-align:left;
  }
  .etapas_lista button::before{margin:0}
  .etapa_n{font-size:11px}
  /* acá el rótulo sí se ve: hay lugar al lado del número */
  .etapas_lista li .etapa_rot{
    position:static;width:auto;height:auto;margin:0;overflow:visible;
    clip:auto;white-space:normal;
    font-family:var(--texto);font-size:13.5px;font-weight:600;
    letter-spacing:.01em;line-height:126%;text-transform:none;
  }
  /* el título centrado de abajo era para la fila horizontal */
  .etapas_titulo{display:none}
  .etapas_servicio{
    text-align:left;padding-left:22px;margin:0;
    min-height:0;
  }
  .etapas_aparte{align-items:flex-start;text-align:left;padding-top:14px}
  /* La ficha NO es un nodo de la línea: la grilla de tres columnas del
     nodo le metía el texto en una columna que colapsaba y el botón
     quedaba en 35px con el rótulo cortado. */
  .etapas_lista_datos button{
    display:inline-flex;align-items:center;
    grid-template-columns:none;width:auto;
    padding:9px 17px;
  }
  .etapas_lista_datos li .etapa_rot{
    font-family:var(--texto);font-size:var(--fontXS);font-weight:600;
    letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  }
}

/* La reacción flota dentro del texto: en la columna angosta que deja la
   línea vertical, una pieza a ancho completo empujaba todo hacia abajo. */
@media(min-width:901px){
  .etapa .reaccion{float:right;margin:2px 0 16px 22px;width:var(--w,168px)}
}
@media(max-width:900px){
  .etapa .reaccion{width:min(var(--w,190px),50vw);margin:0 0 20px}
}

/* El botón de la ficha no se estira con la columna: se ajusta a su
   texto. Con align-items:stretch en el menú quedaba aplastado en un
   círculo con el rótulo cortado. */
.etapas_aparte{align-self:center}
.etapas_lista_datos button{white-space:nowrap;flex:0 0 auto}
@media(min-width:901px){
  .etapas_aparte{align-self:flex-start}
}

/* ── LA TIRA CON FLECHAS (teléfono) ────────────────────────────────
   La línea entra entera y los nodos se reparten el ancho: con ocho
   capítulos quedan a 31px, que alcanza de sobra para un número de dos
   cifras en mono de 11px. Las flechas recorren la línea. */
/* min-width:0 en toda la cadena: un item de flex arranca en
   min-width:auto, así que la tira no encogía —se iba a 608px sobre 375
   de pantalla y arrastraba la sección entera con ella. */
.etapas_riel{display:flex;align-items:center;gap:4px;width:100%;min-width:0}
.etapas_riel > .etapas_lista{flex:1 1 0;min-width:0}
/* Antes era un chevrón fino del color del texto, sin fondo ni borde, en
   el extremo de la fila: no se leía como un botón y por lo tanto nadie
   se enteraba de que la tira se podía correr. Ahora es un disco lleno,
   del oscuro de la marca sobre el claro del fondo. */
.etapas_flecha{
  flex:0 0 auto;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;cursor:pointer;border:0;
  background-color:var(--color-dark);color:var(--color-light);
  transition:opacity .25s var(--ease),transform .18s var(--ease);
}
.etapas_flecha svg{width:18px;height:18px}
.etapas_flecha_atras svg{transform:scaleX(-1)}
.etapas_flecha:active{transform:scale(.9)}
/* apagada, no invisible: sigue diciendo que de ese lado no hay más */
.etapas_flecha:disabled{opacity:.16;cursor:default}

@media(max-width:900px){
  /* La navegación se queda pegada al borde de abajo mientras se lee.
     Con capítulos largos la sección mide más que la pantalla —1174px
     contra 812— y la tira quedaba fuera del pliegue: leías el capítulo
     y las flechas para pasar al siguiente no estaban a la vista. */
  .etapas_menu{
    position:sticky;bottom:0;z-index:3;
    min-width:0;width:100%;
    padding:14px 0 10px;
    background-color:var(--color-light);
    box-shadow:0 -14px 18px -8px var(--color-light);
  }
  /* La línea entera a la vista, siempre, tenga cuatro capítulos u ocho:
     los nodos se reparten el ancho de la tira en vez de medir todos lo
     mismo y salirse. Antes la tira se corría —con ocho sólo se veían
     tres y había que empujarla— y cada ficha se veía distinta según
     cuántos capítulos tuviera. Una línea de tiempo que hay que
     descubrir a los empujones no cuenta el recorrido; una que se ve
     completa, sí. Las flechas quedan: son la forma de recorrerla. */
  .etapa_n{font-size:11px}
}
@media(min-width:901px){
  /* en vertical se ve la lista entera: no hay nada que desplazar */
  .etapas_riel{display:block}
  .etapas_flecha{display:none}
}

/* ── EL CAMBIO DE ETAPA EN EL TELÉFONO ─────────────────────────────
   Se desliza en el sentido en que va la línea, en vez de subir y bajar:
   con la tira horizontal arriba, un movimiento vertical no contaba lo
   mismo que estaba pasando en la navegación. */
@media(max-width:900px){
  .etapa{transform:translateX(26px)}
  .etapa.activa{transform:none}
  [data-sentido="atras"] .etapa{transform:translateX(-26px)}
  .etapa.saliendo{transform:translateX(-30px)}
  [data-sentido="atras"] .etapa.saliendo{transform:translateX(30px)}
  .etapa.activa{transform:none !important}
}