/* Sistema visual de jidoka.mx: Barlow Condensed para títulos, Manrope para texto,
   papel #f4f6f8 con bandas oscuras #080e12 y un solo azul. */
@font-face { font-family: Barlow; src: url('./fuentes/barlow-condensed-800.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: Manrope; src: url('./fuentes/manrope-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url('./fuentes/manrope-600.ttf') format('truetype'); font-weight: 500 800; font-display: swap; }

:root {
  --escena: #080e12;
  --papel: #f4f6f8;
  --blanco: #fff;
  --tinta: #151515;
  --suave: #63717d;
  --gris: #929da5;
  --acero: #a8b3be;
  --linea: #d5dce1;
  --linea-campo: #cbd5dd;
  --azul: #1f6bb8;
  --azul-claro: #4597eb;
  --azul-suave: #eef5fc;
  --error: #c2412d;
  --display: Barlow, Impact, 'Arial Narrow', sans-serif;
  --texto: Manrope, Arial, sans-serif;
  --ancho: 600px;
  --gutter: 22px;
  --arriba: 30px;
  --facil: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding: 130px 0 110px; }
body {
  margin: 0; min-height: 100svh; overflow-x: clip; background: var(--papel); color: var(--tinta);
  font-family: var(--texto); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, dl, dd, ol, figure { margin: 0; }
h1, h2, h3 { font-weight: 800; }
ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; opacity: .35; }
::selection { background: var(--azul); color: var(--blanco); }
:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dato { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .01em; }
.icono { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.azul { color: var(--azul); }
.gris { color: var(--gris); }

/* ---------- Encabezado y línea de avance ---------- */

.barra {
  position: sticky; top: 0; z-index: 20; padding: 0 max(var(--gutter), calc((100% - var(--ancho)) / 2));
  background: rgba(244, 246, 248, .96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(21, 21, 21, .07); transition: background 250ms, color 250ms;
}
.barra-fila { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.marca { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.marca-nombre { font-family: var(--display); font-weight: 800; font-size: 32px; letter-spacing: -.035em; line-height: .85; }
.marca-punto { display: inline-block; width: 6px; height: 6px; background: var(--azul); margin-left: 3px; }
.marca-desc { font-size: 8px; margin-top: 5px; letter-spacing: .01em; }
.barra-etiqueta { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--suave); }
body[data-pantalla="bienvenida"] .barra, body[data-pantalla="gracias"] .barra { background: var(--escena); color: var(--blanco); box-shadow: none; }
body[data-pantalla="bienvenida"] .barra-etiqueta, body[data-pantalla="gracias"] .barra-etiqueta { color: var(--acero); }
body[data-pantalla="gracias"] .linea .estacion { color: var(--acero); }
body[data-pantalla="gracias"] .tramo { background: rgba(255, 255, 255, .16); }
body[data-pantalla="gracias"] .relleno { background: var(--azul-claro); }
body[data-pantalla="gracias"] .linea .hecha .estacion-punto { background: var(--azul-claro); border-color: var(--azul-claro); }

.linea { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 0 13px; }
.linea[hidden] { display: none; }
.linea li { display: grid; gap: 8px; }
.tramo { position: relative; height: 2px; background: var(--linea); overflow: hidden; }
.relleno { position: absolute; inset: 0; background: var(--azul); transform-origin: left; transform: scaleX(var(--avance)); transition: transform 420ms var(--facil); }
.estacion { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--suave); white-space: nowrap; }
.estacion .dato { font-size: 10px; }
.estacion-punto {
  display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #b9c3cc; flex-shrink: 0; transition: background 200ms, border-color 200ms;
}
.estacion-punto .icono { width: 10px; height: 10px; stroke-width: 3; color: var(--blanco); }
.linea .actual .estacion, .linea .hecha .estacion { color: inherit; }
.linea .actual .estacion-punto { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(31, 107, 184, .15); }
.linea .hecha .estacion-punto { background: var(--azul); border-color: var(--azul); }

/* ---------- Pantalla ---------- */

.pantalla { max-width: calc(var(--ancho) + var(--gutter) * 2); margin: 0 auto; padding: var(--arriba) var(--gutter) 44px; }
.pantalla.entra > * { animation: entra 360ms var(--facil) both; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } }

.banda {
  margin: calc(-1 * var(--arriba)) calc(50% - 50vw) 34px; padding: 34px max(var(--gutter), calc(50vw - var(--ancho) / 2)) 46px;
  background: var(--escena); color: var(--blanco);
}
.banda .ceja { color: var(--acero); }
.banda .azul { color: var(--azul-claro); }
.banda .entrada { color: #c3ccd4; }

.ceja { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .095em; text-transform: uppercase; line-height: 1.5; margin-bottom: 18px; }
.raya { width: 30px; height: 1px; background: currentColor; flex-shrink: 0; }
.titulo { font-family: var(--display); font-weight: 800; font-size: clamp(50px, 14.5vw, 96px); line-height: .94; letter-spacing: -.025em; text-wrap: balance; }
.entrada { margin-top: 20px; font-size: 16px; color: var(--suave); line-height: 1.75; text-wrap: pretty; }
.entrada strong { color: var(--tinta); font-weight: 600; }
.ayuda { font-size: 13px; color: var(--suave); margin-top: 6px; line-height: 1.6; }
.nota { margin-top: 16px; font-size: 13px; color: var(--suave); }
.opcional { font-size: 11px; font-weight: 400; color: var(--suave); letter-spacing: .02em; }
.error { color: var(--error); font-size: 13px; font-weight: 600; margin-top: 10px; }
.error:empty { display: none; }
.enlace { font-weight: 600; text-decoration: underline; text-decoration-color: var(--linea-campo); text-underline-offset: 4px; }
.enlace:hover { text-decoration-color: currentColor; }

/* Cabeza de página (Parte 1) y de bloque (Parte 2) */
.pagina-cabeza, .bloque-cabeza { display: flex; align-items: flex-end; gap: 16px; }
.pagina-cabeza .ceja, .bloque-cabeza .ceja { margin-bottom: 8px; color: var(--suave); }
.contador-num { font-family: var(--display); font-weight: 800; font-size: 96px; line-height: .76; letter-spacing: -.03em; color: var(--azul); }
.titulo-bloque { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 10.5vw, 58px); line-height: .94; letter-spacing: -.02em; text-wrap: balance; }

.pregunta-bloque { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--linea); }
.num-pregunta { font-size: 11px; color: var(--suave); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.num-pregunta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); }
.pregunta { font-family: var(--display); font-weight: 800; font-size: clamp(29px, 8vw, 38px); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.ayuda-pregunta { margin-top: 12px; font-size: 14px; }
.control { margin-top: 22px; }
.grupo + .grupo { margin-top: 26px; }
.subpregunta { font-size: 15px; font-weight: 600; margin-bottom: 10px; line-height: 1.45; }

/* ---------- Controles ---------- */

.tarjetas, .escalera { display: grid; gap: 8px; }
.tarjeta, .peldano {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 12px 16px 12px 18px;
  text-align: left; font-size: 15px; font-weight: 600; line-height: 1.35;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px;
  transition: border-color 160ms, background 160ms, box-shadow 160ms, transform 160ms var(--facil);
}
.tarjeta > span:first-child, .peldano-texto { flex: 1; }
.tarjeta:active, .peldano:active, .chip:active { transform: scale(.985); }
.tarjeta[aria-pressed="true"], .peldano[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-suave); box-shadow: inset 0 0 0 1px var(--azul); }
.marca-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #b9c3cc; flex-shrink: 0; transition: background 160ms, border-color 160ms; }
.marca-check .icono { width: 13px; height: 13px; stroke-width: 3; color: var(--blanco); opacity: 0; }
[aria-pressed="true"] > .marca-check { background: var(--azul); border-color: var(--azul); }
[aria-pressed="true"] > .marca-check .icono { opacity: 1; }

.peldano-texto { font-variant-numeric: tabular-nums; }
.nivel { display: flex; align-items: flex-end; gap: 2px; height: 18px; flex-shrink: 0; }
.nivel i { display: block; width: 3px; min-height: 3px; background: #e1e6ea; transition: background 160ms; }
.nivel i.on { background: #8d99a4; }
.peldano[aria-pressed="true"] .nivel i.on { background: var(--azul); }
.escalera-aparte { display: grid; gap: 8px; margin-top: 10px; }
.peldano-aparte { border-style: dashed; border-color: var(--linea-campo); background: transparent; }
.peldano-aparte .peldano-texto { color: var(--suave); }
.peldano-aparte[aria-pressed="true"] .peldano-texto { color: var(--tinta); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; font-size: 14px; font-weight: 600;
  transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--facil);
}
.chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.chips-meses { display: grid; grid-template-columns: repeat(4, 1fr); }
.chips-meses .chip { padding: 0 6px; }
.matriz-fila + .matriz-fila { margin-top: 20px; }
.matriz .chip { padding: 0 14px; font-variant-numeric: tabular-nums; }

.escala { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.escala-num { min-height: 50px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background 160ms, border-color 160ms, color 160ms; }
.escala-num[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.escala-extremos { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--suave); }

.de10 { display: flex; align-items: stretch; gap: 3px; }
.de10-cero { flex: 0 0 40px; min-height: 50px; margin-right: 4px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; font-weight: 600; color: var(--suave); }
.de10-cero[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.figura { flex: 1; min-height: 50px; display: grid; place-items: center; border-radius: 6px; }
.figura svg { width: 72%; max-width: 22px; height: auto; fill: #cdd5dc; transition: fill 140ms, transform 200ms var(--facil); }
.figura svg .trazo { fill: none; stroke: var(--papel); stroke-width: 2.4; }
.figura.llena svg { fill: var(--azul); }
.figura[aria-pressed="true"] svg { transform: translateY(-2px); }
.lectura { margin-top: 10px; font-size: 13px; color: var(--suave); }
.embudo-fila + .embudo-fila { margin-top: 22px; }
.embudo-cabeza { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-weight: 600; }
.embudo-cabeza .dato { font-size: 13px; color: var(--suave); }

/* Campos (como el formulario de contacto del sitio) */
.formulario { display: grid; gap: 18px; }
.bienvenida .formulario { margin-top: 34px; }
.campo-etiqueta { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input:not([type]), textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; line-height: 1.4;
  background: var(--blanco); border: 1px solid var(--linea-campo); border-radius: 3px; color: var(--tinta);
  transition: border-color 160ms, box-shadow 160ms; -webkit-appearance: none; appearance: none;
}
textarea { resize: vertical; min-height: 104px; }
input::placeholder, textarea::placeholder { color: #8a96a1; }
input:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(31, 107, 184, .15); }
.con-error input { border-color: var(--error); }
.campo-texto { position: relative; }
.cuenta { display: block; text-align: right; font-size: 11px; color: var(--suave); margin-top: 6px; }
.con-prefijo { display: flex; align-items: center; position: relative; }
.con-prefijo > .dato { position: absolute; left: 14px; color: var(--suave); pointer-events: none; }
.con-prefijo input { padding-left: 50px; }
.campo-monto, .campo-detalle { margin-top: 18px; }
.campo-monto .con-prefijo input { padding-left: 30px; font-variant-numeric: tabular-nums; }

.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; position: relative; }
.casilla input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.casilla-caja { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; background: var(--blanco); border: 1.5px solid #b9c3cc; border-radius: 3px; transition: background 160ms, border-color 160ms; }
.casilla-caja .icono { width: 14px; height: 14px; stroke-width: 3; color: var(--blanco); opacity: 0; }
.casilla input:checked + .casilla-caja { background: var(--azul); border-color: var(--azul); }
.casilla input:checked + .casilla-caja .icono { opacity: 1; }
.casilla input:focus-visible + .casilla-caja { outline: 3px solid var(--azul-claro); outline-offset: 3px; }
.con-error .casilla-caja { border-color: var(--error); }

/* ---------- Botones (como "Agenda tu diagnóstico") ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 0 20px;
  border-radius: 3px; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  transition: background 200ms, color 200ms, border-color 200ms, transform 250ms var(--facil), opacity 160ms;
}
.boton:active:not(:disabled) { transform: scale(.985); }
.boton-principal { background: var(--azul); color: var(--blanco); padding: 0 12px 0 22px; justify-content: space-between; }
.boton-principal:hover { background: #1a5d9f; }
.boton-principal .icono { width: 30px; height: 30px; padding: 7px; background: rgba(255, 255, 255, .16); border-radius: 2px; stroke-width: 1.8; }
.boton-principal[aria-disabled="true"] { opacity: .45; }
.boton-secundario { background: var(--blanco); border: 1px solid var(--linea-campo); }
.boton-secundario:hover { border-color: var(--tinta); }
.boton-fantasma { color: var(--suave); padding: 0 12px; gap: 10px; }
.boton-fantasma:hover:not(:disabled) { color: var(--tinta); }
.boton-chico { min-height: 40px; }
.boton-ancho { width: 100%; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.acciones {
  position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px;
  padding: 20px max(var(--gutter), calc((100% - var(--ancho)) / 2)) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--papel) 64%, rgba(244, 246, 248, 0));
}
.acciones[hidden] { display: none; }
.acciones .boton-principal { flex: 1; }

.pie { max-width: calc(var(--ancho) + var(--gutter) * 2); margin: 0 auto; padding: 26px var(--gutter) calc(116px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); font-size: 12px; color: var(--suave); display: grid; gap: 8px; justify-items: start; }
.pie .enlace { font-size: 12px; min-height: 40px; }
.pie a { color: var(--suave); }
.pie [hidden] { display: none; }

.conexion {
  position: fixed; z-index: 31; left: 0; right: 0; top: 0; padding: 10px var(--gutter); text-align: center;
  background: var(--tinta); color: var(--blanco); font-size: 13px; font-weight: 600;
}
.conexion[hidden] { display: none; }
body[data-pantalla="gracias"] .pie { padding-bottom: 34px; }

.aviso-flotante {
  position: fixed; z-index: 30; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--tinta); color: var(--blanco); border-radius: 999px; padding: 11px 18px; font-size: 13px; font-weight: 600;
  box-shadow: 0 14px 34px rgba(21, 21, 21, .22); transition: opacity 200ms, transform 260ms var(--facil);
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }

.dialogo { width: 520px; max-width: calc(100% - 32px); padding: 38px 28px 28px; background: var(--papel); color: var(--tinta); border: 0; border-radius: 8px; box-shadow: 0 40px 130px rgba(0, 0, 0, .27); }
.dialogo::backdrop { background: rgba(8, 14, 18, .7); backdrop-filter: blur(7px); }
.dialogo h2 { font-family: var(--display); font-size: 46px; line-height: .95; letter-spacing: -.02em; margin-bottom: 16px; }
.dialogo p { color: var(--suave); font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
.dialogo form { margin-top: 22px; }
.dialogo a { color: var(--azul); font-weight: 600; }

/* ---------- Bienvenida ---------- */

.partes { border-bottom: 1px solid var(--linea); }
.partes li { display: grid; grid-template-columns: 54px 1fr auto; gap: 4px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--linea); }
.partes-num { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: .8; color: var(--azul); }
.partes strong { display: block; font-size: 15px; font-weight: 600; }
.partes div span { display: block; color: var(--suave); font-size: 14px; margin-top: 2px; }
.partes .dato { font-size: 12px; color: var(--suave); }

/* ---------- Revise su correo ---------- */

.sobre, .sello { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; margin-bottom: 26px; }
.sobre { border: 1px solid var(--linea-campo); background: var(--blanco); }
.sobre .icono { width: 26px; height: 26px; stroke-width: 1.5; color: var(--azul); }
.sello { background: var(--azul-claro); }
.sello .icono { width: 28px; height: 28px; stroke-width: 2.6; color: var(--blanco); }
.correo-destino { word-break: break-all; }
.prueba a { color: inherit; }
.prueba { margin-top: 30px; padding: 14px 16px; background: var(--azul-suave); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--azul); }

/* ---------- Parte 2 ---------- */

/* Secciones en orden: línea vertical de estaciones; la actual en azul, las siguientes en gris. */
.secciones { margin-top: 30px; }
.secciones li { position: relative; }
.secciones li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 46px; bottom: -6px; width: 2px; background: var(--linea); }
.secciones li.hecha:not(:last-child)::after { background: var(--azul); }
.secciones button { display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; width: 100%; min-height: 56px; padding: 6px 0; text-align: left; }
.secciones button:disabled { opacity: 1; }
.sec-punto { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--linea-campo); background: var(--papel); font-size: 13px; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.sec-punto .icono { width: 16px; height: 16px; stroke-width: 2.6; color: var(--blanco); }
.sec-nombre { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--gris); }
.sec-estado { display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; margin-top: 2px; }
.sec-min { font-size: 12px; color: var(--gris); }
.secciones .actual .sec-punto { background: var(--azul); border-color: var(--azul); color: var(--blanco); box-shadow: 0 0 0 5px rgba(31, 107, 184, .15); }
.secciones .actual .sec-nombre { color: var(--azul); font-size: 17px; }
.secciones .actual .sec-min { color: var(--azul); }
.secciones .hecha .sec-punto { background: var(--azul); border-color: var(--azul); }
.secciones .hecha .sec-nombre { color: var(--tinta); }
.secciones .hecha .sec-min { color: var(--suave); }
.secciones .hecha button:hover .sec-nombre { text-decoration: underline; text-underline-offset: 4px; }

.bloque-cabeza + .entrada { margin-top: 22px; }

.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-top: 28px; background: #e6ebef; border-radius: 999px; }
.pestana { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 999px; font-weight: 600; color: var(--suave); transition: background 160ms, color 160ms, box-shadow 160ms; }
.pestana[aria-selected="true"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(21, 21, 21, .12); }
.pestana .icono { width: 15px; height: 15px; color: var(--azul); stroke-width: 2.6; }
.indicacion { margin-top: 18px; font-size: 15px; font-weight: 600; }

.estaciones { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 18px; scroll-margin-top: 140px; }
.estaciones li { position: relative; }
.estaciones li:not(:last-child)::after { content: ''; position: absolute; top: 12px; left: calc(50% + 15px); right: calc(-50% + 15px); height: 2px; background: var(--linea); transition: background 200ms; }
.estaciones li.hecha:not(:last-child)::after { background: var(--azul); }
.estaciones button { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; min-height: 72px; padding: 0 2px; text-align: center; color: var(--suave); }
.estaciones .estacion-punto { width: 26px; height: 26px; border-width: 2px; background: var(--papel); }
.estaciones .estacion-punto .icono { width: 14px; height: 14px; }
.estaciones .dato { font-size: 11px; line-height: 1; }
.estaciones .estacion-nombre { font-size: 11px; line-height: 1.25; }
.estaciones .hecha .estacion-punto { background: var(--azul); border-color: var(--azul); }
.estaciones .actual button { color: var(--tinta); }
.estaciones .actual .estacion-punto { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(31, 107, 184, .15); }
.paso-actual { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--linea); }
.paso-actual .ceja { color: var(--azul); margin-bottom: 12px; }
.paso-actual > .boton { margin-top: 20px; }

/* ---------- Parte 3 ---------- */

.privacidad { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; background: var(--azul-suave); border-radius: 8px; font-size: 14px; font-weight: 600; }
.privacidad .icono { margin-top: 2px; color: var(--azul); }
.capturas { display: grid; gap: 14px; margin-top: 24px; }
.captura { padding: 20px 18px 18px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; transition: border-color 200ms, box-shadow 200ms; }
.captura.subida { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.captura-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.captura-id { font-family: var(--display); font-size: 26px; line-height: .8; color: var(--azul); letter-spacing: 0; }
.captura-estado { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--suave); }
.captura.subida .captura-estado { color: var(--azul); }
.captura-nombre { font-family: var(--display); font-size: 27px; line-height: 1; letter-spacing: -.01em; }
.ejemplo { margin-top: 16px; transition: opacity 200ms; }
.captura.no-aplica .ejemplo { opacity: .35; }
.ejemplo-svg, .ejemplo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.ejemplo img { max-height: 260px; object-fit: contain; background: #eef2f5; }
.ejemplo figcaption { margin-top: 8px; font-size: 11px; color: var(--suave); }
.e-fondo { fill: #eef2f5; }
.e-barra { fill: #e2e8ed; }
.e-gris { fill: #cfd7de; }
.e-panel { fill: var(--blanco); stroke: var(--linea); }
.e-resalte { fill: rgba(31, 107, 184, .07); stroke: var(--azul); stroke-dasharray: 3 3; }
.e-texto { fill: var(--tinta); font-family: var(--texto); font-weight: 600; font-size: 7.5px; }
.e-dato { fill: #9aa6b1; }
.e-linea { fill: none; stroke: var(--azul); stroke-width: 1.5; }
.archivo { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; word-break: break-all; }
.archivo .icono { color: var(--azul); stroke-width: 2.6; width: 16px; height: 16px; }
.captura .fila-botones { margin-top: 14px; }
.captura .fila-botones .boton { flex: 1; }

/* ---------- Revisión y gracias ---------- */

.revision-parte { margin-top: 38px; }
.revision-cabeza { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--tinta); }
.revision-cabeza h2 { font-family: var(--display); font-size: 28px; line-height: 1; letter-spacing: -.01em; }
.revision-cabeza .boton { margin-left: auto; }
.pendiente { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--error); }
.resumen > div { padding: 13px 0; border-bottom: 1px solid var(--linea); }
.resumen dt { font-size: 13px; color: var(--suave); line-height: 1.5; }
.resumen dt .dato { color: var(--azul); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-right: 4px; }
.resumen dd { margin-top: 4px; font-size: 15px; font-weight: 600; word-break: break-word; }
.resumen .falta dd { color: var(--error); }

.siguiente-paso { padding: 24px 20px 22px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; }
.siguiente-paso .ceja { color: var(--azul); margin-bottom: 12px; }
.siguiente-paso h2 { font-family: var(--display); font-size: 36px; line-height: .98; letter-spacing: -.015em; }
.siguiente-paso p:not(.ceja) { margin-top: 12px; color: var(--suave); }
.siguiente-paso .boton { margin-top: 20px; width: 100%; }

.aviso-js { padding: 24px 0; }

/* ---------- Pantallas anchas ---------- */

@media (min-width: 720px) {
  :root { --gutter: 40px; --ancho: 640px; --arriba: 52px; }
  .barra-fila { height: 82px; }
  .marca-nombre { font-size: 38px; }
  .banda { padding-top: 56px; padding-bottom: 64px; }
  .contador-num { font-size: 120px; }
  .linea { gap: 10px; }
}

@media (hover: hover) {
  .tarjeta:hover:not([aria-pressed="true"]), .peldano:hover:not([aria-pressed="true"]), .chip:hover:not([aria-pressed="true"]),
  .escala-num:hover:not([aria-pressed="true"]) { border-color: #9aa6b1; }
  .figura:hover svg { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}

/* ---------- Aviso de privacidad ---------- */

a.marca { color: inherit; text-decoration: none; }
.aviso-legal { padding-bottom: 64px; }
.aviso-legal h2 { font-family: var(--display); font-size: 26px; line-height: 1.05; margin: 34px 0 10px; }
.aviso-legal p, .aviso-legal li { color: #2b3036; font-size: 15px; line-height: 1.7; }
.aviso-legal p + p { margin-top: 10px; }
.aviso-legal ul { padding-left: 20px; list-style: disc; display: grid; gap: 6px; margin-bottom: 10px; }
.aviso-legal a:not(.boton) { color: var(--azul); }
.aviso-legal .nota { margin-top: 30px; }
.aviso-legal .boton { margin-top: 18px; }