/* Lupa — lista de espera. Estilo oscuro tipo Apple, con movimiento. */
:root {
  --fondo: #000;
  --texto: #f5f5f7;
  --gris: #86868b;
  --gris-claro: #a1a1a6;
  --linea: rgba(255, 255, 255, .09);
  --tarjeta: #0e0e11;
  --lima: #d8ff3e;
  --verde: #3ef0a5;
  --cian: #2ec8ff;
  --rojo: #ff5f6d;
  --grad: linear-gradient(100deg, var(--lima) 0%, var(--verde) 45%, var(--cian) 100%);
  --curva: cubic-bezier(.2, .8, .2, 1);
  --radio: 28px;
  --ancho: 1120px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 17px/1.5 Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img, svg { display: block; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 8px; }

.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gris { color: var(--gris); }

/* ---------- Barra de progreso y cabecera ---------- */
.progreso { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }
.cab {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 max(16px, env(safe-area-inset-left)); padding-top: env(safe-area-inset-top);
  background: rgba(0, 0, 0, .82); border-bottom: 1px solid transparent;
  transition: transform .45s var(--curva), border-color .3s, background .3s;
}
.cab.con-borde { border-bottom-color: var(--linea); }
.cab.oculta { transform: translateY(-100%); }
@media (min-width: 900px) and (hover: hover) {
  .cab { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; font-size: 19px; }
.logo-ico {
  width: 22px; height: 22px; border-radius: 50%; position: relative; flex: none;
  background: conic-gradient(from 200deg, var(--lima), var(--verde), var(--cian), var(--lima));
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 5.5px, #000 6px); mask: radial-gradient(circle at 50% 50%, transparent 5.5px, #000 6px);
}
.logo-ico::after { content: ""; position: absolute; width: 8px; height: 3px; background: var(--cian); right: -5px; bottom: 0; transform: rotate(45deg); border-radius: 2px; }
.cab-nav { display: none; gap: 28px; font-size: 14px; color: var(--gris-claro); }
.cab-nav a { text-decoration: none; transition: color .2s; }
.cab-nav a:hover { color: var(--texto); }
@media (min-width: 900px) { .cab-nav { display: flex; } }

/* ---------- Botones ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 28px; border-radius: 999px; border: 0; cursor: pointer; overflow: hidden;
  background: var(--grad); color: #04110b; font-weight: 650; letter-spacing: -.01em; text-decoration: none;
  box-shadow: 0 10px 40px -8px rgba(62, 240, 165, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .35s var(--curva), box-shadow .35s;
  -webkit-tap-highlight-color: transparent;
}
.btn::after {   /* brillo que cruza */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: brillo 4.5s 2s infinite;
}
@keyframes brillo { 0%, 70% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } }
.btn:hover { box-shadow: 0 16px 60px -8px rgba(62, 240, 165, .75), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn:active { transform: scale(.97); }
.btn-grande { font-size: 18px; padding: 18px 32px; }
.btn-chico { padding: 9px 18px; font-size: 14px; box-shadow: none; }
.btn-ancho { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn-wa { background: #25d366; box-shadow: 0 10px 40px -8px rgba(37, 211, 102, .5); }

/* ---------- Animaciones de entrada ---------- */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--curva), transform 1s var(--curva); transition-delay: var(--d, 0s); }
.js .rv.vis { opacity: 1; transform: none; }
[data-split] .p { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .p > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--curva); transition-delay: calc(var(--n) * 70ms + .1s); }
[data-split].vis .p > span { transform: none; }

/* ---------- Inicio ---------- */
section { padding: 96px 16px; scroll-margin-top: 40px; }
.hero { position: relative; padding-top: 128px; padding-bottom: 40px; text-align: center; overflow: hidden; }
.hero-txt { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; }
.aurora { position: absolute; inset: -10% -20% auto; height: 900px; z-index: 0; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.aurora span:nth-child(1) { width: 520px; height: 520px; left: 8%; top: 40px; background: radial-gradient(circle, rgba(62, 240, 165, .55), transparent 65%); }
.aurora span:nth-child(2) { width: 600px; height: 600px; right: 4%; top: 120px; background: radial-gradient(circle, rgba(46, 200, 255, .45), transparent 65%); }
.aurora span:nth-child(3) { width: 420px; height: 420px; left: 40%; top: 380px; background: radial-gradient(circle, rgba(216, 255, 62, .28), transparent 65%); }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .aurora span:nth-child(1) { animation: flota 16s ease-in-out infinite alternate; }
  .aurora span:nth-child(2) { animation: flota 19s ease-in-out -6s infinite alternate-reverse; }
  .aurora span:nth-child(3) { animation: flota 23s ease-in-out -3s infinite alternate; }
}
@keyframes flota { to { transform: translate3d(80px, 60px, 0) scale(1.15); } }
.pildora {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 8px 16px; border-radius: 999px;
  font-size: 14px; color: var(--gris-claro); background: rgba(255, 255, 255, .06); border: 1px solid var(--linea);
}
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(62, 240, 165, .6); animation: late 2s infinite; }
@keyframes late { 70% { box-shadow: 0 0 0 10px rgba(62, 240, 165, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 240, 165, 0); } }
.titulo { margin: 0 auto; font-size: clamp(46px, 10.5vw, 112px); line-height: .98; font-weight: 750; letter-spacing: -.055em; max-width: 12ch; text-wrap: balance; }
.bajada { margin: 26px auto 0; max-width: 640px; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.45; color: var(--gris-claro); text-wrap: pretty; }
.bajada b { color: var(--texto); font-weight: 600; }
.hero-cta { margin-top: 34px; }
.nota { margin: 14px 0 0; font-size: 14px; color: var(--gris); }
.nota a { color: var(--gris-claro); }

/* ---------- Escena animada (la extensión sobre una búsqueda) ---------- */
.escena { position: relative; z-index: 2; width: min(100%, 1000px); margin: 64px auto 0; aspect-ratio: 760 / 500; }
.mock { position: absolute; left: 0; top: 0; width: 760px; height: 500px; text-align: left; transform: scale(var(--s, .45)); transform-origin: 0 0; }
.m-ventana {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden; background: #f4f4f6;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 120px -20px rgba(46, 200, 255, .35), 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.m-barra { height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: #1c1c1f; }
.m-luces { display: flex; gap: 7px; }
.m-luces i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.m-luces i:nth-child(2) { background: #febc2e; } .m-luces i:nth-child(3) { background: #28c840; }
.m-url { flex: 1; height: 28px; border-radius: 8px; background: #2a2a2e; color: #b4b4ba; font-size: 14px; display: flex; align-items: center; gap: 8px; padding: 0 12px; white-space: nowrap; overflow: hidden; }
.m-candado { width: 10px; height: 12px; border-radius: 2px; background: #8a8a90; position: relative; flex: none; }
.m-candado::before { content: ""; position: absolute; left: 2px; top: -5px; width: 6px; height: 6px; border: 2px solid #8a8a90; border-bottom: 0; border-radius: 4px 4px 0 0; }
.m-ext { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #2a2a2e; transition: background .3s, box-shadow .3s; }
.mock.panel-on .m-ext { background: #10251c; box-shadow: 0 0 0 1px rgba(62, 240, 165, .5), 0 0 18px rgba(62, 240, 165, .5); }
.m-cuerpo { position: absolute; inset: 46px 0 0; display: flex; gap: 16px; padding: 18px; }
.m-lista { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.m-fila {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 80px; gap: 14px; align-items: center;
  background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  opacity: 0; transform: translateY(14px); transition: opacity .6s var(--curva), transform .6s var(--curva), box-shadow .5s;
  transition-delay: calc(var(--i) * 120ms);
}
.mock.filas-on .m-fila { opacity: 1; transform: none; }
.m-fila.top { box-shadow: 0 0 0 2px var(--verde), 0 10px 30px -10px rgba(62, 240, 165, .7); }
.m-foto { height: 96px; border-radius: 10px; display: grid; place-items: center; }
.m-foto-auris { background: linear-gradient(140deg, #e8ecff, #c9d3ff); }
.m-foto-deporte { background: linear-gradient(140deg, #ffe9e0, #ffc9b5); }
.m-foto-estuche { background: linear-gradient(140deg, #e3fff3, #b7f5dc); }
.m-foto span { width: 46px; height: 46px; border-radius: 50%; border: 7px solid rgba(20, 20, 40, .75); border-bottom-color: transparent; position: relative; }
.m-foto span::before, .m-foto span::after { content: ""; position: absolute; bottom: -12px; width: 14px; height: 20px; border-radius: 6px; background: rgba(20, 20, 40, .8); }
.m-foto span::before { left: -11px; } .m-foto span::after { right: -11px; }
.m-tit { font-size: 17px; line-height: 1.25; color: #222; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-precio { font-size: 24px; color: #111; font-weight: 400; margin: 2px 0 8px; letter-spacing: -.01em; }
.m-chips { display: flex; gap: 6px; flex-wrap: nowrap; }
.chip {
  font-size: 13px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; font-weight: 500;
  opacity: 0; transform: scale(.7) translateY(6px); transition: opacity .45s var(--curva), transform .55s cubic-bezier(.3, 1.6, .5, 1);
}
.chip b { font-weight: 700; }
.chip-v { background: #0d1f18; color: #7dffc6; }
.chip-g { background: #e9fff5; color: #067a4c; transition-delay: .08s; }
.chip-t { background: #e8f7ff; color: #0a6aa0; transition-delay: .16s; }
.m-fila.on .chip { opacity: 1; transform: none; }
.m-spark { width: 80px; height: 40px; }
.m-info { min-width: 0; }
.m-spark path { fill: none; stroke: #18c98a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.2s var(--curva) .1s; }
.m-fila.on .m-spark path { stroke-dashoffset: 0; }
.m-panel {
  width: 230px; flex: none; border-radius: 16px; padding: 16px; color: #f5f5f7;
  background: linear-gradient(180deg, #121417, #0b0c0e); box-shadow: 0 0 0 1px rgba(62, 240, 165, .25), 0 20px 50px -10px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateX(40px) scale(.96); transition: opacity .7s var(--curva), transform .8s var(--curva);
}
.mock.panel-on .m-panel { opacity: 1; transform: none; }
.mp-cab { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.mp-cab small { font-weight: 400; color: #8b8b93; font-size: 12px; margin-left: auto; }
.mp-grande { margin: 14px 0 10px; padding: 14px; border-radius: 12px; background: rgba(62, 240, 165, .08); }
.mp-grande b { display: block; font-size: 38px; letter-spacing: -.03em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mp-grande small { color: #9a9aa2; font-size: 12px; }
.mp-dato { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 2px; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #a1a1a8; }
.mp-dato b { color: #f5f5f7; font-weight: 600; }
.mp-op { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mp-op svg { width: 50px; height: 50px; transform: rotate(-90deg); }
.mp-op circle { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 5; }
.mp-op .mp-arco { stroke: var(--verde); stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 113; transition: stroke-dashoffset 1.4s var(--curva) .4s; }
.mock.panel-on .mp-arco { stroke-dashoffset: 26; }
.mp-op small { display: block; color: #8b8b93; font-size: 12px; }
.mp-op b { font-size: 20px; color: var(--verde); }
.m-cursor {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2L16 21l-2.6 1.2-3.4-6.9L5 19.5z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  transform: translate(700px, 470px); transition: transform 1.1s cubic-bezier(.45, 0, .2, 1); opacity: 0;
}
.mock.filas-on .m-cursor { opacity: 1; }
/* Versión compacta para celular: filas más grandes y panel horizontal abajo */
.mock.compacto { width: 440px; height: 600px; }
.compacto .m-cuerpo { flex-direction: column; gap: 12px; }
.compacto .m-fila { grid-template-columns: 76px minmax(0, 1fr); padding: 12px; gap: 12px; }
.compacto .m-foto { height: 84px; }
.compacto .m-spark, .compacto .chip-t { display: none; }
.compacto .m-tit { font-size: 17px; }
.compacto .m-precio { font-size: 23px; margin-bottom: 6px; }
.compacto .chip { font-size: 13.5px; }
.compacto .m-panel { width: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 14px 16px; transform: translateY(30px) scale(.97); }
.compacto .mp-cab { grid-column: 1 / -1; }
.compacto .mp-grande { margin: 6px 0 0; padding: 10px 14px; }
.compacto .mp-grande b { font-size: 34px; }
.compacto .mp-dato { display: none; }
.compacto .mp-op { margin: 6px 0 0; }

/* ---------- El problema (texto que se enciende al bajar) ---------- */
.problema { max-width: 980px; margin: 0 auto; padding-top: 120px; padding-bottom: 120px; }
.leer { margin: 0; font-size: clamp(30px, 5.4vw, 60px); line-height: 1.12; font-weight: 650; letter-spacing: -.035em; text-wrap: pretty; }
.leer .w { color: #2a2a2e; transition: color .35s; }
.leer .w.lit { color: var(--texto); }
.problema-fin { margin: 40px 0 0; font-size: clamp(22px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; color: var(--gris-claro); }

/* ---------- Funciones (bento) ---------- */
.h2 { margin: 0 auto 20px; font-size: clamp(36px, 6.4vw, 72px); line-height: 1.02; font-weight: 750; letter-spacing: -.05em; text-align: center; max-width: 20ch; text-wrap: balance; }
.sub { margin: 0 auto 40px; max-width: 560px; text-align: center; color: var(--gris-claro); font-size: 19px; text-wrap: pretty; }
.funciones, .calc, .pasos, .precio, .preguntas { max-width: var(--ancho); margin: 0 auto; }
.funciones .h2 { margin-bottom: 56px; }
.bento { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(3, 1fr); } .t-ancha { grid-column: span 2; } .t-full { grid-column: 1 / -1; } }
.tarjeta {
  position: relative; overflow: hidden; border-radius: var(--radio); padding: 30px 28px; min-height: 280px;
  background: var(--tarjeta); border: 1px solid var(--linea); display: flex; flex-direction: column;
}
.tarjeta h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.025em; font-weight: 700; }
.tarjeta p { margin: 0; color: var(--gris-claro); font-size: 16px; max-width: 46ch; }
.t-ancha { flex-direction: column; gap: 24px; }
@media (min-width: 760px) { .t-ancha { flex-direction: row; align-items: flex-end; } .t-ancha .t-txt { flex: 1; align-self: flex-start; } }
.luz::before {   /* luz que sigue al puntero */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(62, 240, 165, .13), transparent 60%);
}
.luz:hover::before { opacity: 1; }
.viz { margin-top: auto; padding-top: 26px; }
.viz-barras { display: flex; align-items: flex-end; gap: 10px; height: 150px; flex: none; max-width: 360px; width: 100%; }
@media (min-width: 760px) { .viz-barras { flex: 1; } }
.viz-barras i { flex: 1; height: var(--h); border-radius: 9px 9px 4px 4px; background: linear-gradient(180deg, var(--verde), rgba(46, 200, 255, .35)); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--curva); }
.viz-barras i:last-child { background: var(--grad); box-shadow: 0 0 30px rgba(62, 240, 165, .5); }
.vis .viz-barras i { transform: none; }
.viz-barras i:nth-child(2) { transition-delay: .06s; } .viz-barras i:nth-child(3) { transition-delay: .12s; } .viz-barras i:nth-child(4) { transition-delay: .18s; }
.viz-barras i:nth-child(5) { transition-delay: .24s; } .viz-barras i:nth-child(6) { transition-delay: .3s; } .viz-barras i:nth-child(7) { transition-delay: .36s; }
.viz-ganancia { display: flex; align-items: baseline; gap: 12px; font-weight: 700; letter-spacing: -.03em; flex-wrap: wrap; }
.vg-de { font-size: 26px; color: var(--gris); text-decoration: line-through; text-decoration-thickness: 2px; }
.vg-flecha { color: var(--gris); font-size: 22px; }
.vg-a { font-size: 46px; }
.viz-escribe { min-height: 92px; padding: 16px; border-radius: 16px; background: #050506; border: 1px solid var(--linea); font-size: 15px; line-height: 1.4; color: var(--texto); margin-top: auto; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: var(--verde); vertical-align: -3px; margin-left: 2px; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.viz-wa .burbuja {
  position: relative; max-width: 300px; padding: 10px 12px 20px; border-radius: 4px 14px 14px 14px; background: #1f2c34; color: #e9edef; font-size: 15px; line-height: 1.35;
  transform: translateY(16px) scale(.94); opacity: 0; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1) .2s, opacity .5s .2s;
}
.vis .viz-wa .burbuja { transform: none; opacity: 1; }
.burbuja b { display: block; color: var(--verde); font-size: 13px; margin-bottom: 2px; }
.burbuja small { position: absolute; right: 10px; bottom: 4px; font-size: 11px; color: #8696a0; }
.viz-tend { display: flex; align-items: center; gap: 14px; font-size: 20px; color: var(--gris-claro); }
.viz-tend b { font-size: 52px; color: var(--texto); letter-spacing: -.04em; }
.flecha-sube { font-size: 56px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.viz-linea { width: 100%; height: 110px; overflow: visible; }
.viz-linea path { fill: none; stroke: var(--verde); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.8s var(--curva) .2s; filter: drop-shadow(0 0 8px rgba(62, 240, 165, .6)); }
.vis .viz-linea path { stroke-dashoffset: 0; }

/* ---------- Calculadora ---------- */
.calc-caja { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .calc-caja { grid-template-columns: 1.1fr 1fr; } }
.calc-campos, .calc-res { border-radius: var(--radio); border: 1px solid var(--linea); background: var(--tarjeta); padding: 26px; }
.campo-r { display: block; padding: 12px 0; }
.campo-r + .campo-r { border-top: 1px solid var(--linea); }
.cr-et { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--gris-claro); margin-bottom: 10px; }
.cr-et output { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--verde) var(--p, 50%), #2a2a2f var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--verde) var(--p, 50%), #2a2a2f var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; margin-top: -10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); transition: transform .2s; }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc-res { display: flex; flex-direction: column; justify-content: center; text-align: center; position: relative; overflow: hidden; }
.cr-titulo { margin: 0; color: var(--gris-claro); font-size: 17px; }
.cr-numero { margin: 6px 0 2px; font-size: clamp(56px, 9vw, 88px); font-weight: 750; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cr-numero.neg { background: linear-gradient(100deg, #ff9a7a, var(--rojo)); -webkit-background-clip: text; background-clip: text; }
.cr-margen { margin: 0 0 24px; color: var(--gris-claro); }
.cr-margen b { color: var(--texto); }
.cr-barra { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: #1a1a1e; gap: 2px; }
.cr-barra i { height: 100%; transition: width .6s var(--curva); width: 0; }
.cr-ref { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 13px; color: var(--gris-claro); }
.cr-ref li { display: flex; align-items: center; gap: 6px; }
.cr-ref i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.b-costo { background: #4a4a52; } .b-comision { background: #f5a524; } .b-envio { background: #8b5cf6; }
.b-publicidad { background: #ff5a8a; } .b-impuestos { background: #64748b; } .b-ganancia { background: var(--grad); }
.cr-aviso { margin: 18px 0 0; font-size: 13px; color: var(--gris); }

/* ---------- Pasos ---------- */
.pasos-lista { list-style: none; padding: 0; margin: 56px 0 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pasos-lista { grid-template-columns: repeat(3, 1fr); } }
.pasos-lista li { padding: 30px 28px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--tarjeta); }
.num { display: block; font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-bottom: 18px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pasos-lista h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.pasos-lista p { margin: 0; color: var(--gris-claro); }

/* ---------- Precio ---------- */
.planes { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 860px; margin: 56px auto 28px; }
@media (min-width: 760px) { .planes { grid-template-columns: 1fr 1fr; } }
.plan { position: relative; overflow: hidden; border-radius: var(--radio); padding: 32px 28px; background: var(--tarjeta); border: 1px solid var(--linea); }
.plan h3 { margin: 0; font-size: 22px; color: var(--gris-claro); font-weight: 600; }
.plan-precio { margin: 6px 0 22px; font-size: 44px; font-weight: 750; letter-spacing: -.04em; line-height: 1.05; }
.plan-precio small { font-size: 16px; font-weight: 500; color: var(--gris); letter-spacing: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { padding: 9px 0 9px 28px; position: relative; border-top: 1px solid var(--linea); color: #d9d9de; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); }
.plan li.no { color: var(--gris); }
.plan li.no::before { border: 0; width: 10px; height: 2px; background: var(--gris); top: 20px; transform: none; }
.plan-pro { border: 1px solid transparent; background: linear-gradient(var(--tarjeta), var(--tarjeta)) padding-box, var(--grad) border-box; box-shadow: 0 30px 80px -30px rgba(62, 240, 165, .45); }
.plan-pro h3 { color: var(--texto); }
.plan-sello { display: inline-block; margin-bottom: 14px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgba(62, 240, 165, .12); color: var(--verde); }

/* ---------- Lista de espera ---------- */
.lista { padding-top: 64px; }
.lista-caja {
  position: relative; overflow: hidden; max-width: 640px; margin: 0 auto; padding: 40px 22px; border-radius: 32px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(62, 240, 165, .1), transparent 60%), #0b0b0e;
  border: 1px solid rgba(62, 240, 165, .22); box-shadow: 0 40px 120px -40px rgba(46, 200, 255, .35);
}
@media (min-width: 600px) { .lista-caja { padding: 48px 44px; } }
.lista-caja .h2 { font-size: clamp(34px, 6vw, 52px); }
.lista-caja .sub { margin-bottom: 30px; }
.campo { display: block; margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.campo > span, .campo legend { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; padding: 0; }
.campo small { color: var(--gris); font-weight: 400; }
.campo input[type=email], .campo input[type=text], .campo input[type=tel], .campo select, .otra {
  width: 100%; height: 56px; padding: 0 16px; border-radius: 14px; font-size: 17px;
  background: #151518; border: 1px solid #2a2a30; outline: 0; transition: border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo select:focus, .otra:focus { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(62, 240, 165, .15); }
.campo.mal input, .campo.mal .chips { border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(255, 95, 109, .15); }
.campo > .tel { display: flex; align-items: stretch; margin: 0; font-size: 17px; }
.tel-pre { display: grid; place-items: center; padding: 0 14px; border-radius: 14px 0 0 14px; background: #1d1d21; border: 1px solid #2a2a30; border-right: 0; color: var(--gris-claro); font-size: 16px; }
.tel input { border-radius: 0 14px 14px 0 !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 16px; transition: box-shadow .2s; }
.ch {
  padding: 11px 16px; border-radius: 999px; font-size: 15px; cursor: pointer; background: #151518; border: 1px solid #2a2a30;
  transition: background .2s, border-color .2s, color .2s, transform .15s; -webkit-tap-highlight-color: transparent;
}
.ch:hover { border-color: #44444c; }
.ch:active { transform: scale(.96); }
.ch.sel { background: var(--grad); color: #04110b; border-color: transparent; font-weight: 600; }
.otra { margin-top: 10px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 20px; padding: 16px; border-radius: 16px; background: rgba(62, 240, 165, .06); border: 1px solid rgba(62, 240, 165, .2); cursor: pointer; font-size: 16px; }
.check input { width: 22px; height: 22px; accent-color: var(--verde); flex: none; margin: 1px 0 0; }
.check small { display: block; color: var(--gris-claro); font-size: 14px; }
.trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.error { min-height: 0; margin: 0 0 12px; color: var(--rojo); font-size: 15px; }
.error:empty { display: none; }
.exito { text-align: center; }
.omitir { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--gris); font-size: 15px; text-decoration: underline; cursor: pointer; padding: 8px; }
.exito-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--grad); color: #04110b; font-size: 32px; font-weight: 800; margin-bottom: 16px; animation: aparece .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes aparece { from { transform: scale(.3); opacity: 0; } }
#paso2:not([hidden]), #paso3:not([hidden]) { animation: sube .6s var(--curva); }
@keyframes sube { from { opacity: 0; transform: translateY(20px); } }

/* ---------- Preguntas ---------- */
.acordeon { max-width: 760px; margin: 40px auto 0; }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; position: relative; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 300; color: var(--gris-claro); transition: transform .3s var(--curva); }
.acordeon details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.acordeon p { margin: 0 0 22px; color: var(--gris-claro); max-width: 62ch; }

/* ---------- Cierre y pie ---------- */
.final { text-align: center; padding-top: 140px; padding-bottom: 140px; }
.titulo-final { margin: 0 0 40px; font-size: clamp(44px, 9vw, 104px); line-height: 1; font-weight: 750; letter-spacing: -.055em; }
.pie { border-top: 1px solid var(--linea); padding: 32px 16px calc(40px + env(safe-area-inset-bottom)); text-align: center; color: var(--gris); font-size: 13px; }
.pie p { margin: 6px auto; max-width: 720px; }

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rv, [data-split] .p > span { opacity: 1; transform: none; }
}