/* CUADRE — minisitio de presentación. Identidad: azul-corte, papel, verde Cuadre.
   Regla: solo transform/opacity en animaciones. Nada queda invisible si falla el JS. */

@font-face {
  font-family: "Archivo";
  src: url("../assets/Archivo-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
}

:root {
  --azul: #0A2733;
  --azul-2: #123646;
  --azul-3: #1B4658;
  --papel: #F6F2E9;
  --papel-2: #EDE7D9;
  --blanco: #FFFFFF;
  --tinta: #10222B;
  --gris: #4F6068;
  --filete: #DDD6C6;
  --verde: #12C48B;
  --verde-hondo: #06724F;
  --verde-fondo: #E1F4EA;
  --ambar: #F0A030;
  --ambar-tinta: #3A2400;
  --rojo: #B3362E;
  --rojo-fondo: #FBE6E3;
  --wa: #DCF8C6;
  --font: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --radio: 14px;
  --sombra: 0 10px 28px rgba(10, 39, 51, .12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--azul); scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
}
h1, h2, h3, h4, p, ul, ol { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.015em; font-weight: 800; }
h1, h2 { font-stretch: 112%; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.w { width: 100%; max-width: 960px; margin: 0 auto; padding-left: 18px; padding-right: 18px; }

/* ====== PORTADA ====== */
.portada {
  position: relative;
  background: var(--azul);
  color: var(--papel);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cuadricula {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 100%; max-width: 1100px;
  transform: translateX(-50%);
  z-index: 0; pointer-events: none; overflow: hidden;
  display: grid; grid-template-columns: repeat(10, 1fr); align-content: start;
  gap: 3px; padding: 3px; opacity: .55;
}
.cuadricula i {
  display: block; border-radius: 3px; aspect-ratio: 1;
  background: var(--azul-2);
  opacity: .55;
  transition: opacity .7s ease, background-color .7s ease;
}
.cuadricula i.on { background: var(--verde); opacity: .85; }
@supports not (aspect-ratio: 1) { .cuadricula i { height: 40px; } }
.cuadricula i.am { background: var(--ambar); opacity: .8; }
.portada > .w { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding-top: 22px; padding-bottom: 26px; }

.marca { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .2em; font-size: 19px; font-stretch: 125%; }
.marca svg { width: 42px; height: 42px; flex: none; }
.marca .punto-vivo { margin-left: auto; flex: none; white-space: nowrap; font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--verde); text-transform: uppercase; border: 1px solid rgba(18,196,139,.5); padding: 5px 10px; border-radius: 99px; }

.portada h1 {
  margin-top: 24px;
  font-size: clamp(32px, 8.8vw, 60px);
  line-height: 1.02;
  letter-spacing: -.025em;
  max-width: 14ch;
}
.portada h1 em { font-style: normal; color: var(--verde); }
.portada .lead { margin-top: 16px; font-size: clamp(18px, 4.6vw, 21px); color: rgba(246,242,233,.84); max-width: 44ch; }
.portada .pista { margin-top: 26px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--verde); display: flex; align-items: center; gap: 10px; }
.portada .pista::after { content: ""; flex: 1; height: 1px; background: rgba(246,242,233,.18); }

.tarjetas { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tarjeta {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  min-height: 124px; padding: 14px 14px 12px;
  background: var(--azul-2);
  border: 1px solid rgba(246,242,233,.12);
  border-radius: var(--radio);
  color: var(--papel);
  text-decoration: none;
  position: relative;
  transition: transform .18s ease, background-color .18s ease;
}
.tarjeta:active { transform: scale(.965); }
@media (hover: hover) { .tarjeta:hover { background: var(--azul-3); transform: translateY(-2px); } }
.tarjeta .ico { width: 44px; height: 44px; color: var(--verde); }
.tarjeta .ico svg { width: 100%; height: 100%; }
.tarjeta b { font-size: clamp(18px, 4.8vw, 21px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; padding-right: 26px; }
.tarjeta .num { position: absolute; top: 12px; right: 14px; font-size: 13px; font-weight: 700; color: rgba(246,242,233,.5); letter-spacing: .1em; }
.tarjeta .flecha { position: absolute; right: 14px; bottom: 16px; width: 22px; height: 22px; color: var(--verde); opacity: .8; }
.tarjeta--cta { background: var(--verde); color: var(--azul); border-color: var(--verde); }
.tarjeta--cta .ico, .tarjeta--cta .flecha, .tarjeta--cta .num { color: var(--azul); }
.tarjeta--cta .num { color: rgba(10,39,51,.6); }
@media (hover: hover) { .tarjeta--cta:hover { background: #2fd79f; } }

.portada .pie-portada { margin-top: auto; padding-top: 22px; display: grid; gap: 4px; font-size: 14px; line-height: 1.35; color: rgba(246,242,233,.66); }
.portada .pie-portada strong { color: var(--papel); font-size: 16px; }

/* ====== VISTAS ====== */
.vista { background: var(--papel); position: relative; }
.vista__barra {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 20;
  background: var(--azul); color: var(--papel);
  box-shadow: 0 2px 14px rgba(10,39,51,.25);
}
.vista__barra .w { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; }
.volver {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 16px 0 10px;
  border-radius: 12px;
  background: rgba(246,242,233,.1);
  color: var(--papel); text-decoration: none; font-weight: 700; font-size: 17px;
  transition: transform .15s ease, background-color .15s ease;
}
.volver svg { width: 24px; height: 24px; }
.volver:active { transform: scale(.95); }
@media (hover: hover) { .volver:hover { background: rgba(246,242,233,.18); } }
.paso { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--verde); display: flex; align-items: center; gap: 10px; }
.paso .puntos { display: flex; gap: 4px; }
.paso .puntos i { width: 7px; height: 7px; border-radius: 2px; background: rgba(246,242,233,.25); display: block; }
.paso .puntos i.on { background: var(--verde); }

.vista__cab {
  background: var(--azul); color: var(--papel);
  padding: 8px 0 34px;
  position: relative; overflow: hidden;
}
.vista__cab .w { position: relative; z-index: 1; }
.vista__cab .cuadricula { opacity: .3; }
.icono-grande {
  width: 92px; height: 92px; border-radius: 26px;
  background: var(--azul-2); border: 1px solid rgba(18,196,139,.35);
  display: grid; place-items: center; color: var(--verde);
  margin-top: 14px;
}
.icono-grande svg { width: 60px; height: 60px; }
.etiqueta { display: inline-block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; padding: 5px 10px; border-radius: 6px; background: var(--ambar); color: var(--ambar-tinta); margin-top: 16px; }
.vista__cab h2 { margin-top: 18px; font-size: clamp(28px, 7.4vw, 44px); max-width: 18ch; }
.vista__cab h2:focus { outline: none; }
.vista__cab .lead { margin-top: 12px; font-size: clamp(18px, 4.6vw, 20px); color: rgba(246,242,233,.84); max-width: 46ch; }

.vista__cuerpo { padding: 26px 0 10px; }
.vista__cuerpo > .w > * + * { margin-top: 20px; }
.bloque-titulo { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--verde-hondo); margin-bottom: 10px; }
.nota { font-size: 15px; color: var(--gris); }
.nota--clara { color: rgba(246,242,233,.66); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 20px;
  border-radius: 12px; border: 2px solid transparent;
  font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer;
  background: var(--azul); color: var(--papel);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
  user-select: none; -webkit-user-select: none;
}
.celda, details.acordeon summary, .tarjeta, .volver { touch-action: manipulation; }
.btn:active { transform: scale(.96); }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn--verde { background: var(--verde); color: var(--azul); }
@media (hover: hover) { .btn--verde:hover { background: #2fd79f; } .btn:hover { opacity: .94; } }
.btn--borde { background: var(--blanco); color: var(--azul); border-color: var(--azul); }
.btn--claro { background: var(--papel-2); color: var(--azul); }
.btn--grande { min-height: 58px; font-size: 18px; width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.fila-botones .btn { flex: 1 1 220px; }

/* Maqueta (pantalla de ejemplo) */
.mock { background: var(--blanco); border: 1px solid var(--filete); border-radius: var(--radio); overflow: hidden; position: relative; box-shadow: var(--sombra); }
.mock__top { background: var(--azul); color: var(--papel); padding: 12px 104px 12px 14px; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sello { position: absolute; top: 0; right: 10px; background: var(--ambar); color: var(--ambar-tinta); font-size: 11px; font-weight: 800; letter-spacing: .14em; padding: 4px 9px; border-radius: 0 0 6px 6px; z-index: 2; }
.mock__body { padding: 14px; }

/* Tablero interactivo */
.ayuda { display: block; background: var(--papel); border: 1px dashed var(--filete); border-radius: 10px; padding: 10px 12px; font-size: 16px; color: var(--gris); margin-bottom: 12px; min-height: 48px; }
.ayuda b { color: var(--verde-hondo); }
.ayuda.aviso { border-color: var(--ambar); color: var(--ambar-tinta); background: #FFF4E0; }
.tablero { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.celda {
  appearance: none; -webkit-appearance: none;
  border: 2px solid var(--filete); border-radius: 10px; background: var(--blanco);
  padding: 7px 2px 6px; min-height: 60px; text-align: center; cursor: pointer;
  font-variant-numeric: tabular-nums; line-height: 1.1; position: relative;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.celda span { display: block; font-size: 13px; color: var(--gris); font-weight: 600; }
.celda b { display: block; font-size: 20px; color: var(--tinta); margin-top: 2px; min-height: 22px; }
.celda:active { transform: scale(.93); }
.celda.hit { background: var(--verde-fondo); border-color: var(--verde); }
.celda.hit b { color: var(--verde-hondo); }
.celda.sel { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(10,39,51,.18); }
.celda.sel span { color: var(--azul); }
.celda.pulso { animation: pulso .45s ease; }
.celda .dudoso { position: absolute; top: -8px; right: -4px; background: var(--ambar); color: var(--ambar-tinta); font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 2px 5px; border-radius: 5px; text-transform: uppercase; }
@keyframes pulso { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.sumas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.sumas .btn { min-height: 54px; font-size: 20px; padding: 0 6px; }
.quitar { margin-top: 8px; width: 100%; }
.totales { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--filete); font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; }
.totales span:last-child { color: var(--verde-hondo); font-size: 24px; }

/* Chat */
.chat { background: #E8E0D2; padding: 14px; min-height: 120px; }
.burbuja { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 16px; margin-bottom: 8px; line-height: 1.4; background: var(--blanco); border: 1px solid var(--filete); color: var(--tinta); position: relative; }
.burbuja small { display: block; font-size: 12px; opacity: .6; margin-top: 3px; text-align: right; }
.burbuja .n { display: block; font-size: 13px; color: var(--verde-hondo); margin-bottom: 2px; font-weight: 700; }
.burbuja.out { background: var(--wa); margin-left: auto; border-color: #c6e7ad; }
.burbuja .opciones { display: flex; gap: 8px; margin-top: 8px; }
.burbuja .opciones span { flex: 1; text-align: center; padding: 8px; border-radius: 9px; border: 2px solid var(--filete); font-weight: 700; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.burbuja .opciones span.si { border-color: var(--verde); color: var(--verde-hondo); }
.burbuja .opciones span.si.pulsado { background: var(--verde); color: var(--azul); transform: scale(.96); }
.burbuja .enlace { color: #1a56c8; text-decoration: underline; }
.escribiendo { display: inline-flex; gap: 5px; padding: 6px 4px; }
.escribiendo i { width: 8px; height: 8px; border-radius: 50%; background: var(--gris); display: block; animation: rebote 1s infinite ease-in-out; }
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
.anim-in { animation: aparecer .4s ease both; }

/* Foto de la lista */
.foto { position: relative; background: #F3EBDA; border-radius: 10px; padding: 14px 16px; overflow: hidden; border: 1px solid var(--filete); }
.foto .hoja { font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive; font-size: 22px; line-height: 1.6; color: #2b3b7a; }
.foto .hoja i { font-style: normal; color: var(--gris); font-size: 14px; display: block; font-family: var(--font); }
.foto .hoja s { text-decoration: none; background: linear-gradient(transparent 55%, #f7d58a 55%); }
.foto .escaner { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--verde); box-shadow: 0 0 14px var(--verde); opacity: 0; }
.foto.escaneando .escaner { animation: escanear 1.6s ease-in-out forwards; }
@keyframes escanear { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }
.leido { display: grid; gap: 6px; margin-top: 10px; }
.leido div { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 9px; background: var(--verde-fondo); color: var(--verde-hondo); font-weight: 700; }
.leido div.revisar { background: #FFF4E0; color: var(--ambar-tinta); }
.leido div.revisar em { font-style: normal; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--ambar); padding: 2px 6px; border-radius: 5px; align-self: center; }

/* Panel demo auxiliar */
.panel-demo { margin-top: 12px; }
.panel-demo[hidden] { display: none; }

/* Premios */
.gan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.gan div { background: var(--papel-2); border-radius: 10px; padding: 10px 6px; text-align: center; font-size: 13px; font-weight: 700; color: var(--gris); letter-spacing: .06em; }
.gan div b { display: block; font-size: 32px; color: var(--tinta); line-height: 1.1; font-variant-numeric: tabular-nums; min-height: 36px; }
.gan div:first-child { background: var(--ambar); color: var(--ambar-tinta); }
.gan div:first-child b { color: #2a1a00; }
.gan div.gira { animation: girar .5s ease both; }
@keyframes girar { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); font-weight: 700; padding: 6px 0; }
td { padding: 9px 0; border-top: 1px solid var(--filete); vertical-align: middle; }
td:last-child, th:last-child { text-align: right; }
td b { font-weight: 800; }
tr.anim-in td { animation: aparecer .4s ease both; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill--ok { background: var(--verde-fondo); color: var(--verde-hondo); }
.pill--pend { background: #FDF0D5; color: #8A5A00; }
.pill--cerrada { background: var(--verde); color: var(--azul); }
.balance { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--verde-fondo); color: var(--verde-hondo); display: flex; justify-content: space-between; gap: 10px; align-items: center; font-weight: 700; }
.balance small { display: block; font-weight: 500; font-size: 14px; }
.balance b { font-size: 26px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Corte */
.alerta { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--rojo-fondo); border: 1px solid #E7B3AD; color: var(--rojo); font-size: 16px; }
.alerta strong { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.alerta strong svg { width: 18px; height: 18px; }
.alerta .okline { color: var(--verde-hondo); display: block; margin-top: 6px; }
.alerta .linea { display: block; }
.alerta.sacudir { animation: sacudir .5s ease; }
@keyframes sacudir { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* Monitor en vivo */
.vivo { display: grid; gap: 8px; }
.vend { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--filete); background: var(--blanco); transition: background-color .5s ease; }
.vend.nuevo { background: var(--verde-fondo); border-color: var(--verde); }
.vend .ini { width: 44px; height: 44px; border-radius: 50%; background: var(--azul); color: var(--papel); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.vend .nombre { font-weight: 700; font-size: 17px; }
.vend .hace { font-size: 14px; color: var(--gris); }
.vend .cifras { text-align: right; font-variant-numeric: tabular-nums; }
.vend .cifras b { display: block; font-size: 18px; }
.vend .cifras span { font-size: 15px; color: var(--verde-hondo); font-weight: 700; }
.vivo-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; color: var(--gris); }
.punto-verde { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); margin-right: 6px; animation: latido 1.6s infinite ease-in-out; vertical-align: middle; }
@keyframes latido { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }

/* Lista WhatsApp */
.wa-list { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 15px; line-height: 1.55; white-space: pre-wrap; background: var(--wa); padding: 14px; border-radius: 12px; border: 1px solid #c6e7ad; }

/* Acordeones */
.acordeones { display: grid; gap: 8px; }
details.acordeon { background: var(--blanco); border: 1px solid var(--filete); border-radius: 12px; overflow: hidden; }
details.acordeon summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 14px; font-weight: 700; font-size: 17px; line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
details.acordeon summary::-webkit-details-marker { display: none; }
details.acordeon summary .mas { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--verde-fondo); color: var(--verde-hondo); display: grid; place-items: center; transition: transform .25s ease; }
details.acordeon summary .mas svg { width: 18px; height: 18px; }
details.acordeon[open] summary .mas { transform: rotate(45deg); }
details.acordeon summary:active { background: var(--papel); }
details.acordeon .cont { padding: 0 14px 16px; font-size: 16px; color: var(--gris); }
details.acordeon .cont > * + * { margin-top: 10px; }
details.acordeon[open] .cont { animation: aparecer .3s ease both; }
details.acordeon .cont strong { color: var(--tinta); }
.lista-simple { list-style: none; padding: 0; display: grid; gap: 8px; }
.lista-simple li { position: relative; padding-left: 26px; }
.lista-simple li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 3px solid var(--verde); border-bottom: 3px solid var(--verde); transform: rotate(-45deg); }
.lista-x li::before { border: 0; width: 12px; height: 3px; background: var(--rojo); top: .65em; transform: none; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills span { padding: 8px 12px; border-radius: 10px; background: var(--papel-2); font-weight: 700; color: var(--tinta); }
.pills span b { color: var(--verde-hondo); }
.mini-tablero { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 260px; }
.mini-tablero i { aspect-ratio: 1; border-radius: 2px; background: var(--papel-2); display: block; }
.mini-tablero i.on { background: var(--verde); }
@supports not (aspect-ratio: 1) { .mini-tablero i { height: 20px; } }

/* Dos columnas sí/no */
.si-no { display: grid; gap: 10px; }
.si-no > div { border-radius: 12px; padding: 16px; border: 1px solid var(--filete); background: var(--blanco); }
.si-no h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.si-no .si h3 { color: var(--verde-hondo); }
.si-no .no h3 { color: var(--rojo); }
.si-no ul { font-size: 16px; }
@media (min-width: 640px) { .si-no { grid-template-columns: 1fr 1fr; } }

/* Pasos */
.pasos { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: paso; }
.pasos li { position: relative; padding: 0 0 26px 64px; counter-increment: paso; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--verde); color: var(--azul); font-weight: 800; display: grid; place-items: center; font-size: 20px; }
.pasos li::after { content: ""; position: absolute; left: 22px; top: 50px; bottom: 4px; width: 2px; background: var(--filete); transform-origin: top; }
.pasos li:last-child::after { display: none; }
.pasos h3 { font-size: 20px; line-height: 1.25; padding-top: 8px; }
.pasos p { font-size: 16px; color: var(--gris); margin-top: 4px; }
.js .pasos.animar li { animation: aparecer .5s ease both; }
.js .pasos.animar li:nth-child(2) { animation-delay: .35s; }
.js .pasos.animar li:nth-child(3) { animation-delay: .7s; }
.js .pasos.animar li::after { animation: crecer .5s ease both; animation-delay: .25s; }
.js .pasos.animar li:nth-child(2)::after { animation-delay: .6s; }
@keyframes crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Contacto */
.contacto { background: var(--azul); color: var(--papel); border-radius: var(--radio); padding: 22px 18px; }
.contacto h3 { font-size: clamp(22px, 5.6vw, 28px); }
.contacto p { margin-top: 8px; font-size: 17px; color: rgba(246,242,233,.84); }
.contacto .btn { margin-top: 16px; }
.contacto .numero { margin-top: 10px; font-size: 18px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.contacto .otros { margin-top: 12px; display: grid; gap: 8px; font-size: 16px; }
.contacto .otros a { color: var(--verde); font-weight: 700; word-break: break-all; }
.contacto .sin-numero { margin-top: 14px; padding: 14px; border-radius: 10px; background: rgba(246,242,233,.08); border: 1px dashed rgba(246,242,233,.3); font-size: 17px; }

.firma { padding: 26px 0 36px; font-size: 14px; color: var(--gris); display: grid; gap: 4px; }

/* Pie de vista: anterior / siguiente */
.vista__pie { padding: 10px 0 30px; }
.vista__pie .w { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vista__pie .btn { min-height: 58px; }
.vista__pie .btn small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.vista__pie .btn span { display: grid; text-align: left; line-height: 1.15; }
.vista__pie .btn.sig span { text-align: right; }

/* Tarjetas de confianza */
.fichas { display: grid; gap: 10px; }
.ficha { background: var(--blanco); border: 1px solid var(--filete); border-radius: 12px; padding: 14px 16px; }
.ficha h4 { font-size: 17px; margin-bottom: 4px; }
.ficha p { font-size: 15px; color: var(--gris); }
@media (min-width: 640px) { .fichas { grid-template-columns: repeat(3, 1fr); } }

/* ====== Enrutado (solo con JS) ====== */
.js .vista { display: none; }
.js .vista.activa { display: block; }
.js .portada { display: none; }
.js .portada.activa { display: flex; }
.js .vista.activa.entra-der { animation: entrar-der .36s cubic-bezier(.2,.7,.2,1) both; }
.js .vista.activa.entra-izq { animation: entrar-izq .36s cubic-bezier(.2,.7,.2,1) both; }
.js .vista.activa.entra-sube { animation: entrar-sube .4s cubic-bezier(.2,.7,.2,1) both; }
.js .portada.activa.entra-fundido { animation: aparecer .35s ease both; }
@keyframes entrar-der { from { transform: translateX(10%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes entrar-izq { from { transform: translateX(-10%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes entrar-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparecer { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Entrada escalonada (solo con JS; si la animación no corre, todo se ve igual) */
.js .escalona > * { animation: aparecer .5s ease both; }
.js .escalona > *:nth-child(1) { animation-delay: .05s; }
.js .escalona > *:nth-child(2) { animation-delay: .12s; }
.js .escalona > *:nth-child(3) { animation-delay: .19s; }
.js .escalona > *:nth-child(4) { animation-delay: .26s; }
.js .escalona > *:nth-child(5) { animation-delay: .33s; }
.js .escalona > *:nth-child(6) { animation-delay: .4s; }
.js .escalona > *:nth-child(n+7) { animation-delay: .47s; }

/* Sin JS: el pie "Volver" sobra arriba de la portada; la portada no necesita altura completa */
html:not(.js) .portada { min-height: 0; }
html:not(.js) .vista { border-top: 6px solid var(--verde); }

/* ====== Escritorio ====== */
@media (min-width: 700px) {
  .tarjetas { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .tarjeta { min-height: 160px; padding: 20px 18px 18px; }
  .tarjeta .ico { width: 52px; height: 52px; }
  .portada > .w { padding-top: 30px; padding-bottom: 34px; }
  .vista__cab { padding: 14px 0 44px; }
  .vista__cab .w { display: grid; grid-template-columns: 110px 1fr; column-gap: 24px; align-items: start; }
  .vista__cab .icono-grande { grid-row: 1 / span 3; margin-top: 18px; width: 110px; height: 110px; }
  .vista__cab .icono-grande svg { width: 70px; height: 70px; }
  .vista__cab .etiqueta { grid-column: 2; justify-self: start; }
  .vista__cab h2, .vista__cab .lead { grid-column: 2; }
  .vista__cuerpo { padding-top: 32px; }
  .mock, .panel-demo, .fila-botones { max-width: 640px; }
  .dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .dos-col > * + * { margin-top: 0 !important; }
  .vista__pie .w { grid-template-columns: 1fr 1fr; }
  .vista__pie .btn { max-width: 320px; }
  .vista__pie .btn.sig { justify-self: end; }
}

/* ====== Movimiento reducido ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .punto-verde { animation: none; }
}