/*
 * La Escalera — lab.kntor.io
 * Suizo estructural: blanco, tinta y un solo azul. Profundidad solo con
 * bordes (1px sólido; dashed = midiendo), sin sombras ni radios. La
 * numeración 0→5 es la arquitectura de toda la página.
 */

/* ---------- Tokens ---------- */
/* La Escalera — tokens. Suizo estructural: blanco, tinta, un azul. */
:root {
  --papel: #ffffff; --superficie: #fafaf8;
  --reticula: #e4e4e0; --reticula-suave: #f1f1ee;
  --tinta: #161616; --tinta-2: #71716a; --tinta-3: #9c9c94; --tinta-mute: #b9b9b2;
  --nivel: #2563eb; /* único acento: CTA, marcador, FALLA */
  --paso: 8px; /* unidad base de espaciado */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fuente-ui: "Archivo", system-ui, sans-serif;
  --fuente-dato: "Spline Sans Mono", ui-monospace, monospace;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Reset y base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* [hidden] manda incluso sobre los display de layout (flex/grid) */
[hidden] { display: none !important; }
body {
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.55 var(--fuente-ui);
  -webkit-font-smoothing: antialiased;
  /* El marco: la retícula también delimita la página */
  max-width: 1280px;
  margin-inline: auto;
  border-inline: 1px solid var(--reticula);
  min-height: 100dvh;
}
a { color: inherit; }
ul { list-style: none; }
em { font-style: italic; }

/* ---------- Tipografía ---------- */
/* Titulares y números monumentales: Archivo 900, mayúsculas, tracking apretado */
h1, h2, h3, .monumental {
  font-family: var(--fuente-ui);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: .95;
}
h1 { font-size: clamp(44px, 7.5vw, 96px); }
h2 { font-size: clamp(28px, 4.5vw, 56px); }
h3 { font-size: clamp(20px, 2.5vw, 26px); }
/* Verbo rotante del hero (encuentra ↔ descubre): el azul de marca como acento
   DINÁMICO. El texto real vive en el DOM (lo leen crawlers/agentes); app.js
   alterna las palabras con un slide-up y reserva el ancho del verbo más largo.
   Sin JS o con prefers-reduced-motion queda estático en azul (degrada elegante). */
.rota { display: inline-block; overflow: hidden; vertical-align: top; }
.rota-palabra { display: inline-block; color: var(--nivel); will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .rota { overflow: visible; }
  .rota-palabra { will-change: auto; }
}
/* Labels y datos: mono pequeño, espaciado, gris */
.etiqueta {
  font: 500 11px/1.5 var(--fuente-dato);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-2);
}
.micro { font: 400 12px/1.7 var(--fuente-dato); color: var(--tinta-3); }

/* ---------- Header ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--paso) * 2);
  padding: calc(var(--paso) * 2) calc(var(--paso) * 4);
  background: var(--papel);
  border-bottom: 1px solid var(--reticula);
}
.marca {
  font: 900 18px/1 var(--fuente-ui);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
#toggle-agente {
  font: 500 11px/1 var(--fuente-dato);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-2);
  text-decoration: none;
  border: 1px solid var(--reticula);
  padding: var(--paso) calc(var(--paso) * 1.5);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
#toggle-agente:hover { color: var(--nivel); border-color: var(--nivel); }

/* ---------- Formularios y botones: esquinas rectas, sin radius ---------- */
input[type="url"], input[type="email"] {
  appearance: none;
  border: 2px solid var(--tinta);
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 500 16px/1.2 var(--fuente-dato);
  padding: calc(var(--paso) * 1.5) calc(var(--paso) * 2);
  width: 100%;
}
input::placeholder { color: var(--tinta-mute); }
:focus-visible { outline: 2px solid var(--nivel); outline-offset: 2px; }

button, .btn {
  appearance: none;
  display: inline-block;
  border: 2px solid var(--tinta);
  border-radius: 0;
  background: var(--tinta);
  color: var(--papel);
  font: 700 14px/1 var(--fuente-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: calc(var(--paso) * 1.75) calc(var(--paso) * 3);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
button:hover, .btn:hover { background: var(--papel); color: var(--tinta); }
.btn-azul { background: var(--nivel); border-color: var(--nivel); }
.btn-azul:hover { background: var(--papel); color: var(--nivel); }
button:disabled { background: var(--tinta-mute); border-color: var(--tinta-mute); color: var(--papel); cursor: default; }

/* ---------- Secciones ---------- */
main > section {
  padding: calc(var(--paso) * 8) calc(var(--paso) * 4);
  border-bottom: 1px solid var(--reticula);
}

/* ---------- Hero + escalera ---------- */
#hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 28vw, 360px);
  gap: calc(var(--paso) * 6);
  align-items: stretch;
}
.sub {
  margin-top: calc(var(--paso) * 3);
  max-width: 56ch;
  font-size: 18px;
  color: var(--tinta-2);
}
#audit-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso);
  margin-top: calc(var(--paso) * 5);
  max-width: 620px;
}
#audit-form label { flex-basis: 100%; }
#url-input { flex: 1 1 260px; width: auto; }
#hero .micro { margin-top: calc(var(--paso) * 2); max-width: 52ch; }

/* La escalera: 6 bandas, 0 abajo y 5 arriba (column-reverse mantiene el DOM 0→5) */
.escalera {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  min-height: 460px;
  border-left: 1px solid var(--reticula);
}
.peldano {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--paso) * 1.5);
  padding: var(--paso) calc(var(--paso) * 2);
  border-top: 1px solid var(--reticula);
}
.peldano-num {
  font: 900 30px/1 var(--fuente-ui);
  letter-spacing: -0.02em;
}
.peldano-nombre {
  font: 500 10px/1.3 var(--fuente-dato);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-2);
  padding-bottom: 3px;
}
/* El marcador enmarca la banda actual; --nivel-actual lo mueve app.js.
   bottom = nivel/6 del alto total: cada banda mide 1/6. */
.marcador {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(100% / 6);
  bottom: calc(var(--nivel-actual) / 6 * 100%);
  border: 2px solid var(--nivel);
  pointer-events: none;
  transition: bottom 1.2s var(--ease), left 1.2s var(--ease);
}
.marcador::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--nivel);
  transform: translateY(-50%);
}

/* ---------- Panel de medición: la carga es narrativa ---------- */
#medicion-msg {
  font: 500 14px/1.7 var(--fuente-dato);
  min-height: calc(2 * 1.7em); /* dos líneas de log: sin saltos de layout */
  max-width: 72ch;
}
/* Contador y barra de progreso del scan (los actualiza el ticker de app.js) */
#medicion-tiempo {
  margin-top: calc(var(--paso) * 2);
  font-variant-numeric: tabular-nums;
}
#medicion-progreso {
  margin-top: var(--paso);
  max-width: 560px;
  height: 6px;
  border: 1px solid var(--reticula);
}
#medicion-progreso-fill {
  height: 100%;
  width: 0%;
  background: var(--nivel);
  transition: width 1s linear;
}
.reticula {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--paso);
  margin-top: calc(var(--paso) * 4);
}
.celda {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--paso) * 3);
  min-height: 84px;
  padding: calc(var(--paso) * 1.5);
  border: 1px solid var(--reticula);
  background: var(--papel);
}
.celda-id {
  font: 500 11px/1.4 var(--fuente-dato);
  color: var(--tinta-2);
  word-break: break-all;
}
.celda-estado {
  font: 500 11px/1 var(--fuente-dato);
  letter-spacing: .08em;
}
/* Estados (los pone app.js). Color = significado: azul solo para FALLA. */
.celda.midiendo { border-style: dashed; border-color: var(--tinta-3); }
.celda.midiendo .celda-estado { color: var(--tinta-3); }
.celda.pasa { border-color: var(--tinta); }
.celda.pasa .celda-estado { color: var(--tinta); }
.celda.falla { border-color: var(--nivel); }
.celda.falla .celda-id, .celda.falla .celda-estado { color: var(--nivel); }
.celda.neutral { border-color: var(--reticula); }
.celda.neutral .celda-id, .celda.neutral .celda-estado { color: var(--tinta-mute); }
/* Barrido durante el scan: la celda "bajo medición" se enmarca en tinta */
.celda.activa { border-style: dashed; border-color: var(--tinta); }
.celda.activa .celda-id, .celda.activa .celda-estado { color: var(--tinta); }

/* Revelado en stagger al cambiar de estado */
.celda.midiendo, .celda.pasa, .celda.falla, .celda.neutral {
  animation: celdaIn .4s var(--ease) both;
}
@keyframes celdaIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.celda:nth-child(1) { animation-delay: 0ms; }
.celda:nth-child(2) { animation-delay: 45ms; }
.celda:nth-child(3) { animation-delay: 90ms; }
.celda:nth-child(4) { animation-delay: 135ms; }
.celda:nth-child(5) { animation-delay: 180ms; }
.celda:nth-child(6) { animation-delay: 225ms; }
.celda:nth-child(7) { animation-delay: 270ms; }
.celda:nth-child(8) { animation-delay: 315ms; }
.celda:nth-child(9) { animation-delay: 360ms; }
.celda:nth-child(10) { animation-delay: 405ms; }
.celda:nth-child(11) { animation-delay: 450ms; }
.celda:nth-child(12) { animation-delay: 495ms; }
.celda:nth-child(13) { animation-delay: 540ms; }
.celda:nth-child(14) { animation-delay: 585ms; }
.celda:nth-child(15) { animation-delay: 630ms; }
.celda:nth-child(16) { animation-delay: 675ms; }
.celda:nth-child(17) { animation-delay: 720ms; }
.celda:nth-child(18) { animation-delay: 765ms; }
.celda:nth-child(19) { animation-delay: 810ms; }
.celda:nth-child(20) { animation-delay: 855ms; }
.celda:nth-child(21) { animation-delay: 900ms; }

#medicion-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--paso) * 2);
  margin-top: calc(var(--paso) * 4);
  padding: calc(var(--paso) * 3);
  border: 1px solid var(--nivel);
}
#medicion-error p { font: 500 14px/1.7 var(--fuente-dato); max-width: 64ch; }

/* ---------- Resultado ---------- */
#cached-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--paso) * 2);
  padding: calc(var(--paso) * 2) calc(var(--paso) * 3);
  margin-bottom: calc(var(--paso) * 4);
  border: 1px dashed var(--tinta-3);
}
#cached-banner p, .cached-texto { font: 500 13px/1.6 var(--fuente-dato); }

.resultado-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--paso) * 8);
  padding-bottom: calc(var(--paso) * 4);
  border-bottom: 1px solid var(--reticula);
}
/* Resalte de llegada del resultado: el borde del head respira en azul y se apaga */
#resultado.recien-llegado .resultado-head { animation: llegada 1.6s var(--ease) both; }
@keyframes llegada {
  from { border-bottom-color: var(--nivel); }
  to { border-bottom-color: var(--reticula); }
}
/* Score y nivel monumentales; tabular para que el count-up no baile */
.monumental {
  font-size: clamp(64px, 12vw, 160px);
  font-variant-numeric: tabular-nums;
}
.medida-sufijo {
  font: 700 clamp(16px, 2vw, 24px)/1 var(--fuente-ui);
  letter-spacing: -0.02em;
  color: var(--tinta-3);
  margin-left: calc(var(--paso) / 2);
}
.medida-nombre { max-width: 9ch; }
.nivel-nombre {
  font: 900 clamp(24px, 3.5vw, 40px)/1 var(--fuente-ui);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.bloque-etiqueta { margin-top: calc(var(--paso) * 5); }
#top-hallazgos {
  display: grid;
  gap: var(--paso);
  margin-top: calc(var(--paso) * 1.5);
}
#top-hallazgos li {
  border: 1px solid var(--reticula);
  border-left: 4px solid var(--nivel);
  padding: calc(var(--paso) * 2) calc(var(--paso) * 2.5);
  font: 500 14px/1.6 var(--fuente-dato);
}

#resultado-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--paso);
  margin-top: calc(var(--paso) * 1.5);
}
.check-det { border: 1px solid var(--reticula); background: var(--papel); }
.check-det summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--paso);
  padding: calc(var(--paso) * 1.5) calc(var(--paso) * 2);
  font: 500 13px/1.4 var(--fuente-dato);
  cursor: pointer;
  list-style: none;
}
.check-det summary::-webkit-details-marker { display: none; }
.check-estado { font: 500 11px/1 var(--fuente-dato); letter-spacing: .08em; }
.check-det.pasa { border-color: var(--tinta); }
.check-det.falla { border-color: var(--nivel); }
.check-det.falla .check-estado, .check-det.falla .check-label { color: var(--nivel); }
.check-det.neutral .check-label, .check-det.neutral .check-estado { color: var(--tinta-mute); }
.check-detalle {
  padding: 0 calc(var(--paso) * 2) calc(var(--paso) * 2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinta-2);
}

#seo-bloque, #intel-bloque {
  margin-top: calc(var(--paso) * 5);
  border: 1px solid var(--reticula);
  padding: calc(var(--paso) * 3);
}
.seo-score { font: 700 14px/1 var(--fuente-dato); letter-spacing: .04em; text-transform: uppercase; }
.seo-checks { margin-top: calc(var(--paso) * 2); display: grid; gap: calc(var(--paso) / 2); }
.seo-check { font: 500 13px/1.6 var(--fuente-dato); color: var(--tinta-2); }
.seo-check.falla { color: var(--nivel); }
.seo-check.neutral { color: var(--tinta-mute); }
.intel-linea { font: 500 13px/1.8 var(--fuente-dato); color: var(--tinta-2); }

/* ---------- Email-gate del detalle ---------- */
/* Borde sólido tinta (dashed se reserva para "midiendo"); replica el checkout */
#gate {
  margin-top: calc(var(--paso) * 5);
  max-width: 560px;
  border: 1px solid var(--tinta);
  background: var(--superficie);
  padding: calc(var(--paso) * 4);
}
.gate-sub {
  margin-top: calc(var(--paso) * 2);
  max-width: 52ch;
  font-size: 14px;
  color: var(--tinta-2);
}
#gate-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--paso) * 2);
  margin-top: calc(var(--paso) * 3);
}
#gate-form .etiqueta { margin-bottom: calc(var(--paso) * -1); }
#gate-error { font: 500 13px/1.5 var(--fuente-dato); color: var(--nivel); }
#gate-error:empty { display: none; }
#gate-ok { margin-top: calc(var(--paso) * 3); }
#gate-ok:empty { display: none; }

#cta-informe { margin-top: calc(var(--paso) * 5); }

/* ---------- Peldaños 0→5: número monumental como fondo ---------- */
#peldanos { padding: 0; }
.nivel {
  position: relative;
  isolation: isolate; /* el número de fondo queda detrás solo dentro del artículo */
  overflow: hidden;
  padding: calc(var(--paso) * 8) calc(var(--paso) * 4);
}
.nivel + .nivel { border-top: 1px solid var(--reticula); }
.nivel::before {
  content: attr(data-nivel);
  position: absolute;
  z-index: -1;
  right: calc(var(--paso) * 4);
  top: 50%;
  transform: translateY(-50%);
  font: 900 clamp(64px, 12vw, 160px)/1 var(--fuente-ui);
  letter-spacing: -0.02em;
  color: var(--reticula-suave);
  -webkit-text-stroke: 1px var(--reticula);
}
.nivel h2 { margin-top: var(--paso); max-width: 14ch; }
.nivel-desc { margin-top: calc(var(--paso) * 2); max-width: 58ch; color: var(--tinta-2); }
.nivel-lista-tag { margin-top: calc(var(--paso) * 3); }
.nivel-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso);
  margin-top: var(--paso);
}
.nivel-lista li {
  border: 1px solid var(--reticula);
  padding: var(--paso) calc(var(--paso) * 1.5);
  font: 500 12px/1.4 var(--fuente-dato);
}
.nivel-nota { margin-top: calc(var(--paso) * 2); font-size: 13px; color: var(--tinta-3); }

/* ---------- El informe ---------- */
#informe {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: calc(var(--paso) * 8);
  align-items: start;
}
.informe-oferta h2 { max-width: 18ch; }
.bajada { margin-top: calc(var(--paso) * 3); max-width: 56ch; font-size: 17px; color: var(--tinta-2); }
.incluye { margin-top: calc(var(--paso) * 1.5); }

/* ---------- Para agentes (#agentes) ---------- */
#agentes code {
  font: 500 13px/1.6 var(--fuente-dato);
  background: var(--reticula-suave);
  border: 1px solid var(--reticula);
  padding: 1px 5px;
  word-break: break-all;
}
.incluye li {
  display: flex;
  gap: calc(var(--paso) * 1.5);
  padding: calc(var(--paso) * 1.5) 0;
  border-top: 1px solid var(--reticula);
  font-size: 15px;
}
.incluye li::before { content: "→"; font-family: var(--fuente-dato); color: var(--nivel); flex: none; }
.precio { margin-top: calc(var(--paso) * 4); color: var(--tinta-2); }
.precio strong {
  display: block;
  font: 900 clamp(32px, 5vw, 56px)/1 var(--fuente-ui);
  letter-spacing: -0.02em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.confianza { margin-top: calc(var(--paso) * 2); max-width: 48ch; font-size: 13px; color: var(--tinta-2); }

#checkout-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--paso) * 2);
  border: 1px solid var(--reticula);
  background: var(--superficie);
  padding: calc(var(--paso) * 4);
}
#checkout-form .etiqueta { margin-bottom: calc(var(--paso) * -1); }
.consent {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--paso) * 1.5);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tinta-2);
  cursor: pointer;
}
input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--tinta);
  border-radius: 0;
  background: var(--papel);
  cursor: pointer;
  display: grid;
  place-content: center;
}
input[type="checkbox"]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--nivel);
}
#checkout-error { font: 500 13px/1.5 var(--fuente-dato); color: var(--nivel); }
#checkout-error:empty { display: none; }

/* Código de descuento del checkout */
#coupon-row { display: flex; gap: var(--paso); }
#coupon-input { flex: 1; text-transform: uppercase; }
#coupon-btn { flex: none; }
#coupon-msg { font: 500 13px/1.5 var(--fuente-dato); color: var(--nivel); }
#coupon-msg:empty { display: none; }

/* ---------- FAQ ---------- */
#faq h2 { margin-bottom: calc(var(--paso) * 4); }
.faq-item { border-top: 1px solid var(--reticula); }
.faq-item:last-of-type { border-bottom: 1px solid var(--reticula); }
.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--paso) * 2);
  padding: calc(var(--paso) * 2.5) 0;
  font: 700 17px/1.35 var(--fuente-ui);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font: 500 16px/1 var(--fuente-dato);
  color: var(--tinta-3);
  flex: none;
}
.faq-item[open] summary::after { content: "–"; color: var(--nivel); }
.faq-item p { padding: 0 0 calc(var(--paso) * 3); max-width: 64ch; color: var(--tinta-2); }

/* ---------- Footer ---------- */
.pie {
  display: grid;
  gap: calc(var(--paso) * 4);
  padding: calc(var(--paso) * 6) calc(var(--paso) * 4) calc(var(--paso) * 4);
}
.pie-marca { font: 700 15px/1.4 var(--fuente-ui); }
.pie-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--paso) * 3);
}
.pie-cols ul { margin-top: var(--paso); }
.pie-cols a {
  font: 500 13px/2.1 var(--fuente-dato);
  color: var(--tinta-2);
  text-decoration: none;
  transition: color .15s var(--ease);
}
.pie-cols a:hover { color: var(--nivel); }
.pie-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--paso) * 2);
  border: 1px solid var(--reticula);
  padding: calc(var(--paso) * 2) calc(var(--paso) * 3);
}
.pie-toggle a {
  font: 500 12px/1 var(--fuente-dato);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  transition: color .15s var(--ease);
}
.pie-toggle a:hover { color: var(--nivel); }
.pie-toggle p { font: 400 12px/1.6 var(--fuente-dato); color: var(--tinta-3); }
.pie-cierre { font: 700 14px/1.5 var(--fuente-ui); }
.pie-cierre a { color: var(--nivel); text-underline-offset: 3px; }
.pie-legal {
  font: 500 11px/1 var(--fuente-dato);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  #informe { grid-template-columns: 1fr; gap: calc(var(--paso) * 5); }
  .resultado-head { gap: calc(var(--paso) * 5); }
}

@media (max-width: 720px) {
  body { border-inline: none; }
  main > section { padding: calc(var(--paso) * 6) calc(var(--paso) * 2.5); }
  .cabecera { padding-inline: calc(var(--paso) * 2.5); }
  .cabecera-etiqueta { display: none; }

  #hero { grid-template-columns: 1fr; gap: calc(var(--paso) * 5); }

  /* La escalera pasa a horizontal compacta: 0 a la izquierda, 5 a la derecha */
  .escalera {
    flex-direction: row;
    min-height: 0;
    height: 92px;
    border-left: none;
  }
  .peldano {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2px;
    padding: var(--paso);
    border-top: 1px solid var(--reticula);
    border-left: 1px solid var(--reticula);
  }
  .peldano-nombre { display: none; }
  .peldano-num { font-size: 20px; }
  /* El marcador se desplaza por left con la misma --nivel-actual */
  .marcador {
    top: 0;
    bottom: 0;
    height: auto;
    right: auto;
    width: calc(100% / 6);
    left: calc(var(--nivel-actual) / 6 * 100%);
  }
  .marcador::before { left: 50%; top: -6px; transform: translateX(-50%); }

  .nivel { padding: calc(var(--paso) * 6) calc(var(--paso) * 2.5); }
  .nivel::before { top: auto; bottom: calc(var(--paso) * 2); right: calc(var(--paso) * 2); transform: none; }

  #checkout-form { padding: calc(var(--paso) * 3); }
  .pie { padding-inline: calc(var(--paso) * 2.5); }
  .pie-cols { grid-template-columns: 1fr; }
}