/* =========================================================
   SNIPEX · la cara pública (portada, planes, precios, guías)
   Va encima de ui.css. Las páginas de venta cargan SOLO ui.css + esto (no admin.css ni
   panel.css): tienen que ser ligeras (Core Web Vitals). Soporte y los textos legales cargan
   además los del panel, porque usan sus formularios.
   ========================================================= */

/* ---- sin JS se ve todo; con JS, lo de más abajo entra al hacer scroll ---- */
html:not(.js) [data-rv]{opacity:1; transform:none}

/* ---- saltar al contenido (teclado y lectores de pantalla) ---- */
.saltar{
  position:fixed; left:12px; top:-60px; z-index:100; padding:10px 14px; border-radius:var(--r-sm);
  background:var(--accent); color:var(--on-accent); font-weight:600; font-size:.85rem; transition:top .2s;
}
.saltar:focus{top:12px}

/* ---- barra superior ----
   Una cápsula de cristal que flota sobre la página (la capa a todo el ancho de ui.css ya no hace falta) y
   que se afirma al hacer scroll. Misma altura de siempre (--nav-h): nada de debajo se mueve. */
.nav,.nav[data-stuck]{height:var(--nav-h); border-bottom-color:transparent}
.nav::before{display:none}
.nav .shell{
  position:relative; gap:6px; padding:7px 8px 7px 18px; border-radius:var(--r-full);
  border:1px solid var(--border-soft);
  background:linear-gradient(180deg,rgba(26,30,38,.6),rgba(21,24,31,.6));
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px -16px rgba(0,0,0,.7);
  transition:background .35s var(--out), border-color .35s var(--out), box-shadow .35s var(--out);
}
.nav .shell::after{
  content:""; position:absolute; left:14%; right:14%; top:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.5; transition:opacity .35s var(--out);
}
.nav[data-stuck] .shell{
  border-color:var(--border);
  background:linear-gradient(180deg,rgba(26,30,38,.88),rgba(14,16,20,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -16px rgba(0,0,0,.85);
}
.nav[data-stuck] .shell::after{opacity:.8}
.nav .brand img{height:28px}
.nav[data-stuck] .brand img{height:26px}
.nav-links{margin-left:14px; gap:2px}
.nav-links a{position:relative; padding:9px 14px; border-radius:var(--r-full)}
.nav-links a::after{
  content:""; position:absolute; left:50%; bottom:4px; width:4px; height:4px; border-radius:50%;
  background:var(--accent); transform:translateX(-50%) scale(0); transition:transform .35s var(--spring);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:translateX(-50%) scale(1)}
.nav-actions .btn{border-radius:var(--r-full)}
.nav-actions .btn-accent{box-shadow:0 0 0 1px var(--accent-ring), 0 8px 24px -10px rgba(224,182,75,.6)}
.nav-links a[aria-current="page"]{color:var(--accent)}
/* los botones del pie del menú móvil: `.sheet a` (ui.css) los ponía grandes y alineados a la izquierda */
.sheet .foot a.btn{justify-content:center; font-size:.96rem; letter-spacing:0; padding:14px 24px}
.sheet .foot a.btn-line{border-color:var(--border)}
.sheet .foot a.btn-accent{border-color:transparent}
.nav-actions .btn-accent .arw{margin-left:2px}
@media (max-width:480px){
  .nav .shell{gap:10px}
  .nav .brand img{height:26px; width:auto}
  .nav-actions{gap:6px}
  .nav-actions .btn-sm{padding:7px 11px}
}

/* ---- pie ---- */
.fbrand img{width:clamp(190px,17vw,236px); height:auto; margin:0;
  filter:drop-shadow(0 10px 28px rgba(224,182,75,.18)); transition:filter .4s var(--out), transform .5s var(--spring)}
.fbrand a:hover img{filter:drop-shadow(0 12px 32px rgba(224,182,75,.34)); transform:translateY(-2px)}
.fbot .sp{max-width:72ch; line-height:1.55}
@media (max-width:760px){ .fbot .sp{margin-left:0} }

/* =========================================================
   SECCIONES (las del mockup, más cortas)
   ========================================================= */
.sec{position:relative; padding:clamp(64px,9vh,112px) 0}
.sec-head{position:relative; isolation:isolate; max-width:760px; margin-bottom:clamp(30px,4.5vh,52px)}
/* una luz cálida detrás del título */
.sec-head::before{content:""; position:absolute; z-index:-1; left:-6%; top:-40%; width:62%; aspect-ratio:1.6; border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,182,75,.11),transparent); pointer-events:none}
.sec-head.center::before{left:50%; translate:-50% 0; width:70%}
.sec-head .h-xl{font-size:clamp(2.3rem,4.4vw,3.7rem); letter-spacing:-.035em; line-height:1.05; text-wrap:balance}
.sec-head .lead{font-size:1.1rem}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{margin-top:22px}
.sec-head p{margin:14px 0 0}
.sec-cta{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,4vh,40px)}
.trampa{position:absolute; left:-9999px}
.lnk{color:var(--accent); font-weight:600}
.lnk:hover{text-decoration:underline}

/* ---- héroe ---- */
.hero{position:relative; padding:clamp(36px,6vh,72px) 0 clamp(36px,6vh,64px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(28px,4vw,60px); align-items:center}
.pill{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px; padding:6px 14px 6px 9px;
  border-radius:var(--r-full); background:rgba(26,30,38,.7); border:1px solid var(--border);
  font-size:.75rem; color:var(--text-dim);
}
.pill b{color:var(--text); font-weight:600}
.hero-copy{container-type:inline-size}
.hero h1{font-size:clamp(2.3rem,6vw,4.9rem); font-size:clamp(1.9rem,11cqw,4.9rem); line-height:.99; letter-spacing:-.038em}
.hero h1 span{display:block}
.hero h1 .grad{font-family:var(--display); font-style:italic}
.hero .lead{margin:22px 0 0; max-width:52ch}
.hero .lead b{color:var(--text)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero-nota{display:flex; flex-wrap:wrap; gap:6px 16px; margin:16px 0 0; font-size:.8rem; color:var(--text-dim)}
.hero-nota span{display:inline-flex; align-items:center; gap:6px}
.hero-nota svg{color:var(--accent)}
.hero-nota .precio{color:var(--accent); font-weight:700}

/* ---- el héroe: una captura del panel de escritorio trabajando (HTML, datos de ejemplo) ---- */
.app-cap{margin:0; position:relative}
.app-cap::before{content:""; position:absolute; inset:8% -6% -4%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,182,75,.16),transparent); filter:blur(10px)}
.ac-ventana{border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--e4);
  background:#0c0e12; transform:perspective(1400px) rotateY(-4deg) rotateX(2deg); transform-origin:left center}
.ac-barra{display:flex; align-items:center; gap:12px; padding:9px 12px; border-bottom:1px solid var(--border-soft); background:#08090c}
.ac-barra span{font-family:var(--mono); font-size:.66rem; color:var(--text-faint)}
.dots{display:flex; gap:6px}
.dots i{width:10px; height:10px; border-radius:50%; background:var(--border-hover)}
.dots i:first-child{background:#f0564a} .dots i:nth-child(2){background:#f0883e} .dots i:nth-child(3){background:#3fd07f}
.ac-app{display:grid; grid-template-columns:44px minmax(0,1fr)}
.ac-rail{display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 0; border-right:1px solid var(--border-soft); background:rgba(8,9,12,.6)}
.ac-rail span{display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:var(--text-faint); position:relative}
.ac-rail .on{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-ring)}
.ac-rail .vivo::after{content:""; position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.ac-main{padding:14px; display:grid; gap:12px; min-width:0}
.ac-top{display:flex; align-items:center; gap:10px; min-width:0}
.ac-tarea{display:grid; gap:2px; min-width:0; margin-right:auto}
.ac-tarea b{font-size:.92rem}
.ac-tarea span{font-size:.68rem; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ac-trab{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-full); border:1px solid var(--accent-ring);
  background:var(--accent-soft); color:var(--accent); font-size:.68rem; font-weight:600; white-space:nowrap}
.ac-trab i{width:6px; height:6px; border-radius:50%; background:var(--accent); animation:ac-latido 1.6s ease-in-out infinite}
.ac-trab .mono{font-family:var(--mono)}
.ac-det{padding:4px 10px; border-radius:var(--r-sm); border:1px solid rgba(240,86,74,.4); background:var(--red-soft); color:var(--red);
  font-size:.68rem; font-weight:600; white-space:nowrap}
.ac-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.ac-stats div{padding:10px; border-radius:var(--r-sm); border:1px solid var(--border-soft); background:var(--bg-card); display:grid; gap:2px; min-width:0}
.ac-stats b{font-size:1.05rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.ac-stats b.ac{color:var(--accent)}
.ac-stats b.pos{color:var(--green)}
.ac-stats div{transition:border-color .3s, background .3s}
.ac-stats div.pulso{border-color:var(--accent-ring); background:var(--accent-soft)}
.ac-stats span{font-size:.64rem; color:var(--text-faint)}
.ac-logs-h{display:flex; align-items:center; gap:6px; font-size:.7rem}
.ac-logs-h span{padding:4px 12px; border-radius:var(--r-full); color:var(--text-faint)}
.ac-logs-h span.on{background:var(--bg-hover); color:var(--text); border:1px solid var(--border)}
.ac-logs-h em{margin-left:auto; font-style:normal; display:inline-flex; align-items:center; gap:6px; color:var(--green); font-size:.66rem}
.ac-logs-h em i{width:6px; height:6px; border-radius:50%; background:var(--green); animation:ac-latido 1.6s ease-in-out infinite}
.ac-logs{border-radius:var(--r-sm); border:1px solid var(--border-soft); background:#07080a; padding:10px 12px; font-family:var(--mono);
  font-size:.7rem; line-height:1.85; color:var(--text-dim); overflow:hidden;
  /* siempre diez líneas de alto y las nuevas entran por abajo: el bucle no mueve la página */
  height:calc(10 * 1.85em + 22px); display:flex; flex-direction:column; justify-content:flex-end}
.ac-logs p{margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ac-logs .f{color:var(--text-faint)}
.ac-logs .ok{color:var(--text)}
.ac-logs b{color:var(--accent); font-weight:600}
.ac-logs .cn{color:var(--text); font-weight:600}
.ac-logs .pos{color:var(--green); font-weight:600}
.ac-logs .cursor::after{content:"▌"; margin-left:4px; color:var(--accent); animation:ac-cursor 1s steps(1) infinite}
.app-cap figcaption{margin-top:12px; text-align:center; font-family:var(--mono); font-size:.62rem; color:var(--text-faint)}
@keyframes ac-latido{50%{opacity:.35}}
@keyframes ac-cursor{50%{opacity:0}}
/* las líneas que añade el bucle (heroe.js) entran con un pequeño deslizamiento */
.ac-logs p.nueva{animation:ac-linea .35s var(--out) both}
@keyframes ac-linea{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .ac-logs p.nueva,.ac-trab i,.ac-logs-h em i,.ac-logs .cursor::after{animation:none}
}
@media (max-width:1040px){
  .ac-ventana{transform:none}
  /* el resplandor de detrás del héroe se salía 6 % por cada lado: en pantallas estrechas ensanchaba la página */
  .app-cap::before{inset:8% 0 -4%}
}
@media (max-width:560px){
  .ac-app{grid-template-columns:minmax(0,1fr)}
  .ac-rail{display:none}
  .ac-main{padding:12px}
  .ac-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-det{display:none}
  .ac-logs{font-size:.64rem}
}

/* ---- cifras reales ---- */
.metrics{border-block:1px solid var(--border-soft); background:rgba(21,24,31,.45)}
.metrics .shell{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-soft)}
.metric{background:var(--bg); padding:22px}
.metric .n{font-size:clamp(1.55rem,2.6vw,2.3rem); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1}
.metric .n em{font-style:normal; color:var(--accent); font-size:.6em}
.metric .l{margin-top:8px; font-size:.8rem; color:var(--text-dim)}
.metric .s{margin-top:4px; font-family:var(--mono); font-size:.62rem; color:var(--text-faint)}

/* =========================================================
   PLANES (portada, /precios/ y «muy pronto»)
   ========================================================= */
.temporada{display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 14px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--bg-deep); font-size:.8rem; color:var(--text-dim)}
.temporada svg{color:var(--accent); flex-shrink:0}
.temporada b{color:var(--text); font-weight:600}
.planes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; max-width:1120px; margin-inline:auto}
.plan{display:flex; flex-direction:column; padding:clamp(22px,2.4vw,30px); border-radius:var(--r-lg)}
.plan.dest{
  border-color:var(--accent-ring);
  background:linear-gradient(160deg,rgba(224,182,75,.10),var(--bg-card) 46%);
  box-shadow:0 0 0 1px var(--accent-ring), 0 50px 90px -48px rgba(224,182,75,.42);
}
.plan-top{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:26px}
.plan h3{font-size:1.2rem; letter-spacing:-.02em}
.plan-lema{margin:8px 0 0; font-size:.86rem; color:var(--text-dim); line-height:1.5; min-height:2.6em}
.plan-precio{display:flex; align-items:flex-start; gap:5px; margin:20px 0 4px}
.plan-precio .v{font-size:clamp(2.8rem,5vw,3.6rem); font-weight:700; letter-spacing:-.05em; line-height:.9; font-variant-numeric:tabular-nums}
.plan-precio .cur{font-size:1.4rem; font-weight:700; color:var(--accent); margin-top:4px}
.plan-per{margin:0; font-size:.78rem; color:var(--text-faint)}
.plan-per b{color:var(--text-dim); font-weight:600}
.inc{list-style:none; padding:0; margin:20px 0 22px; display:grid; gap:11px; flex:1; align-content:start}
.inc li{display:flex; gap:10px; font-size:.86rem; color:var(--text-dim); line-height:1.45}
.inc li svg{flex-shrink:0; margin-top:2px; color:var(--accent)}
.inc li.no, .inc li.no svg{color:var(--text-faint)}
.inc li b{color:var(--text); font-weight:600}
.plan-mas{display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; font-size:.8rem; color:var(--text-dim); transition:color .2s}
.plan-mas:hover{color:var(--accent)}
.planes-nota{max-width:66ch; margin:22px auto 0; text-align:center; font-size:.82rem; color:var(--text-faint); line-height:1.6}

/* ---- cómo funciona ---- */
.pasos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0}
.paso{padding:26px}
.paso .num{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; margin-bottom:16px;
  font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-ring);
}
.paso h3{font-size:1.04rem; margin-bottom:8px}
.paso p{margin:0; font-size:.87rem; color:var(--text-dim); line-height:1.6}

/* ---- por qué Snipex: la pila de monedas ----
   Fuera del modo pegajoso (sin JS, pantalla baja o estrecha, «reducir movimiento») es una sección normal:
   la pila, ya montada, arriba, y el texto y el desglose debajo. Con `.pegajosa` (la pone publica.js) el
   escenario se queda fijo durante 2,5 pantallas y las monedas, que antes flotaban por el fondo, se juntan
   en una pila al hacer scroll mientras las cuatro razones se van encendiendo. */
.monedas{position:relative}
.monedas-escena{
  position:relative; isolation:isolate; overflow:hidden; border-block:1px solid var(--border-soft);
  padding:clamp(48px,7vh,84px) 0 clamp(56px,8vh,100px);
  background:linear-gradient(180deg,var(--bg),#0b0d11 55%,var(--bg));
}
/* viñeta: oscurece los bordes para que la pila (y la luz sobre ella) sea lo único que brilla */
.monedas-escena::after{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(ellipse 95% 85% at 74% 45%,transparent 52%,rgba(8,9,12,.5) 100%);
}
.arena{position:relative; height:clamp(210px,32vh,300px); margin-bottom:clamp(8px,2vh,20px); pointer-events:none}
/* la luz cálida que cae sobre la pila y la sombra de contacto en el suelo: los pone publica.js (--cx, --cy, --w, --base) */
.arena-brillo{
  position:absolute; left:var(--cx,50%); top:var(--cy,50%); translate:-50% -50%;
  width:calc(var(--w,300px) * 3.4); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(224,182,75,.36) 0%,rgba(224,182,75,.22) 22%,rgba(224,182,75,.09) 44%,rgba(224,182,75,.025) 58%,transparent 70%);
  transform:scale(calc(.5 + var(--p,1) * .5)); opacity:calc(.1 + var(--p,1) * .9);
}
.arena-suelo{
  position:absolute; left:var(--cx,50%); top:var(--base,70%); translate:-50% -50%;
  width:calc(var(--w,300px) * 1.05); height:calc(var(--w,300px) * .15); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.8),rgba(0,0,0,.35) 60%,transparent);
  filter:blur(4px); transform:scaleX(calc(.35 + var(--p,1) * .65)); opacity:var(--p,1);
}
/* el charco de luz sobre el que «descansa» la pila */
.arena-suelo::before{
  content:""; position:absolute; left:50%; top:46%; translate:-50% -50%; z-index:-1;
  width:230%; height:290%; border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,182,75,.34),rgba(224,182,75,.1) 58%,transparent);
}
.pila{position:absolute; inset:0}
.moneda{
  position:absolute; left:0; top:0; height:auto; transform-origin:50% 50%; will-change:transform,opacity;
  filter:drop-shadow(0 calc(var(--sh,6) * .5px) calc(var(--sh,6) * .9px) rgba(0,0,0,.5));
}
.monedas-contenido{
  position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,64px); align-items:center;
}
.monedas-texto{min-width:0}
.monedas-texto h2,#modos .sec-head h2{text-wrap:balance}
.monedas-texto .lead{margin:14px 0 0; max-width:54ch}
.flujo{position:relative; isolation:isolate; list-style:none; margin:clamp(18px,3vh,32px) 0 0; padding:0 0 0 40px; --p:1}
.flujo::before,.flujo::after{content:""; position:absolute; z-index:0; left:11px; width:2px; border-radius:2px}
.flujo::before{top:12px; bottom:12px; background:var(--border-soft)}
.flujo::after{
  top:12px; height:calc((100% - 24px) * var(--p));
  background:linear-gradient(180deg,var(--accent-dim),var(--accent) 60%,#fff2cf);
  box-shadow:0 0 14px rgba(224,182,75,.55);
}
.paso-f{position:relative; padding-bottom:clamp(13px,2.2vh,22px)}
.paso-f h3,.paso-f p{transition:opacity .3s var(--out)}
.paso-f:last-child{padding-bottom:0}
.paso-f .marca{
  position:absolute; z-index:1; left:-40px; top:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  /* opaco, con un aro del color del fondo: la línea de tiempo pasa POR DETRÁS y nunca cruza el número */
  background:var(--bg-card); border:1px solid var(--border); font-family:var(--mono); font-size:.62rem;
  color:var(--text-faint); box-shadow:0 0 0 5px var(--bg); transition:.38s var(--spring);
}
.paso-f h3{font-size:1rem; margin:0 0 4px; color:var(--text); transition:color .3s}
.paso-f p{margin:0; font-size:.86rem; color:var(--text-dim); line-height:1.55; max-width:50ch}
.paso-f.on .marca,.monedas:not(.pegajosa) .paso-f .marca{
  border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 18%,var(--bg-card));
  box-shadow:0 0 0 5px var(--bg), 0 0 0 6px var(--accent-ring), var(--glow, 0 0 18px rgba(224,182,75,.35));
}
/* lo aún no «encendido» se atenúa solo en el texto (si se atenuara todo el paso, el número dejaría ver la línea) */
.monedas.pegajosa .paso-f:not(.on) h3,.monedas.pegajosa .paso-f:not(.on) p{opacity:.34}
.ticket{border:1px solid var(--border); border-radius:var(--r); background:var(--bg-deep); overflow:hidden}
.ticket-flota{width:100%; max-width:480px; margin-left:auto; background:rgba(14,16,20,.84); box-shadow:var(--e4);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.t-pie{margin:0; padding:12px 16px 14px; border-top:1px solid var(--border-soft); font-size:.78rem; line-height:1.6; color:var(--text-faint)}
.t-row.total{transition:background .5s var(--out)}
.t-row.total.hecho{background:rgba(63,208,127,.14)}
.t-row.total.hecho b{text-shadow:0 0 16px rgba(63,208,127,.55)}
/* el escenario pegajoso: solo con espacio de sobra (publica.js decide) */
.monedas.pegajosa{height:260svh}
.monedas.pegajosa .monedas-escena{
  position:sticky; top:0; height:100svh; padding:calc(var(--nav-h) + 10px) 0 clamp(18px,3vh,36px);
  display:flex; flex-direction:column; justify-content:center; border-block:0;
}
.monedas.pegajosa .arena{position:absolute; inset:0; height:auto; margin:0; z-index:-1}
.monedas.pegajosa .monedas-contenido{width:min(var(--shell),100% - 40px); align-items:stretch}
.monedas.pegajosa .ticket-flota{align-self:end}
.ticket .t-h{
  display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--border-soft);
  background:rgba(224,182,75,.05); font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.ticket .t-h .chip{margin-left:auto; letter-spacing:.04em}
.t-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 16px; font-size:.86rem; color:var(--text-dim)}
.t-row b{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--text-dim); font-weight:500; white-space:nowrap}
.t-row.total{border-top:1px solid var(--border); padding:12px 16px; background:rgba(63,208,127,.08)}
.t-row.total span{color:var(--text); font-weight:600}
.t-row.total b{color:var(--green); font-weight:700; font-size:1.02rem}

/* ---- modos (pestañas con su consola; sin JS se ven todos seguidos) ---- */
.modes{display:grid; grid-template-columns:320px minmax(0,1fr); gap:20px; align-items:start}
.mtabs{display:grid; gap:7px}
.mtab{
  position:relative; display:flex; gap:13px; align-items:center; padding:14px 16px; width:100%;
  text-align:left; cursor:pointer; border-radius:var(--r); border:1px solid transparent; transition:.35s var(--out);
}
.mtab::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0;
  background:var(--accent); transform:scaleY(0); transition:transform .4s var(--spring);
}
.mtab:hover{background:var(--bg-hover)}
.mtab:hover::before{transform:scaleY(.5)}
.mtab[aria-selected="true"]{background:var(--bg-card); border-color:var(--border); box-shadow:var(--e2)}
.mtab[aria-selected="true"]::before{transform:scaleY(1)}
.mtab-ico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex-shrink:0;
  background:var(--bg-deep); border:1px solid var(--border-soft); color:var(--text-faint); transition:.4s var(--spring);
}
.mtab:hover .mtab-ico{color:var(--text-dim); border-color:var(--border-hover); transform:scale(1.06)}
.mtab[aria-selected="true"] .mtab-ico{
  background:var(--accent-soft); border-color:var(--accent-ring); color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);
}
.mtab-cuerpo{flex:1; min-width:0}
.mtab-top{display:flex; align-items:center; gap:8px; margin-bottom:3px}
.mtab-n{font-family:var(--mono); font-size:.6rem; color:var(--text-faint); flex-shrink:0}
.mtab b{font-size:.9rem; font-weight:600; transition:color .3s}
.mtab[aria-selected="true"] b{color:var(--accent)}
.mtab small{display:block; font-size:.76rem; color:var(--text-dim); line-height:1.5}
.mtab-arw{flex-shrink:0; color:var(--text-faint); opacity:0; transform:translateX(-5px); transition:.32s var(--out)}
.mtab:hover .mtab-arw,.mtab[aria-selected="true"] .mtab-arw{opacity:1; transform:none}
.mtab[aria-selected="true"] .mtab-arw{color:var(--accent)}
.mtab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mpanel{
  display:grid; gap:16px; padding:clamp(18px,2.2vw,26px); border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--bg-card);
}
.mpanel[hidden]{display:none}
.mpanel + .mpanel{margin-top:12px}
.modes.con-js .mpanel + .mpanel{margin-top:0}
.mpanel-cab{display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap}
.mpanel h3{font-size:1.15rem; margin:0}
.mpanel p{margin:0; font-size:.9rem; color:var(--text-dim); line-height:1.7; max-width:78ch}
.en-planes{display:flex; flex-wrap:wrap; gap:7px}
.en-planes .chip.fuera{text-decoration:line-through; opacity:.6}
.ajustes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--border-soft);
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden}
.ajuste{background:var(--bg-deep); padding:13px 15px; min-width:0}
.ajuste .k{font-family:var(--mono); font-size:.57rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint)}
.ajuste .v{margin-top:4px; font-size:.9rem; font-weight:600}
.ajuste .v.acc{color:var(--accent)}
.consola{
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
  background:linear-gradient(180deg,rgba(26,30,38,.94),rgba(14,16,20,.96)); box-shadow:var(--e3);
}
.consola .c-head{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border-soft); background:rgba(8,9,12,.5)}
.consola .c-title{font-family:var(--mono); font-size:.72rem; color:var(--text-faint)}
.consola .c-title b{color:var(--text-dim); font-weight:500}
.consola .c-sim{margin-left:auto}
.consola .log-body{height:214px}
.consola .log{animation-delay:calc(var(--n,0) * 90ms)}
.modes:not(.con-js){grid-template-columns:minmax(0,1fr)}
.modes:not(.con-js) .mtabs{display:none}
@media (prefers-reduced-motion:reduce){ .consola .log{animation:none} }

/* ---- capturas reales ---- */
.capturas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.captura{padding:20px}
.captura .cab{display:flex; align-items:center; justify-content:space-between; gap:10px}
.captura .nom{font-weight:600; font-size:1rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.captura .desc{font-family:var(--mono); font-weight:700; color:var(--green); font-size:1.05rem}
.captura dl{margin:14px 0 0; display:grid; gap:7px}
.captura dl div{display:flex; justify-content:space-between; gap:10px; font-size:.82rem}
.captura dt{color:var(--text-faint)}
.captura dd{margin:0; font-family:var(--mono); color:var(--text-dim)}
.captura dd.ok{color:var(--green)}
.captura-vacia{display:grid; justify-items:center; gap:10px; max-width:640px; margin-inline:auto; padding:clamp(26px,4vw,44px); text-align:center}
.captura-vacia h2{font-size:1.25rem; margin:6px 0 0}
.captura-vacia p{margin:0; color:var(--text-dim); font-size:.92rem; line-height:1.65; max-width:48ch}
.nota-datos{margin:16px 0 0; font-size:.76rem; color:var(--text-faint); line-height:1.55; text-align:center}

/* ---- dudas ---- */
.faq{max-width:820px; margin-inline:auto; display:grid; gap:9px}
details.q{border:1px solid var(--border); border-radius:var(--r); background:var(--bg-card); padding:15px 19px; transition:.3s var(--out)}
details.q:hover{border-color:var(--border-hover)}
details.q[open]{background:linear-gradient(180deg,rgba(224,182,75,.05),var(--bg-card) 60%); border-color:var(--accent-ring)}
details.q summary{cursor:pointer; font-size:.94rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+"; color:var(--accent); font-size:1.3rem; line-height:1; flex-shrink:0}
details.q[open] summary::after{content:"–"}
details.q summary:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:4px}
details.q p{margin:12px 0 0; color:var(--text-dim); font-size:.88rem; line-height:1.7}
details.q p + p{margin-top:10px}
details.q a{color:var(--accent)}
/* la de la portada, a todo el ancho del contenido y en dos columnas (cada pregunta crece sola al abrirse) */
.faq.faq-ancha{max-width:none; margin-inline:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start}
.faq-col{display:grid; gap:12px; align-content:start; min-width:0}
.faq.faq-tabla{max-width:1120px; margin-inline:auto}

/* ---- cierre ---- */
.cta-final{position:relative; isolation:isolate; overflow:hidden; border-top:1px solid var(--border-soft);
  padding:clamp(70px,11vh,128px) 0; text-align:center}
.cta-final .bgi{position:absolute; inset:-4%; z-index:-3; background:url("../img/banner.4cf44c371ab6.webp") center 62%/cover no-repeat; opacity:.3; filter:saturate(.8)}
.cta-final .veil{position:absolute; inset:0; z-index:-2; background:radial-gradient(ellipse 72% 86% at 50% 50%, rgba(14,16,20,.5), var(--bg) 76%)}
.cta-final .mark{width:56px; height:56px; margin:0 auto 22px}
.cta-final h2{max-width:18ch; margin-inline:auto}
.cta-final .lead{margin:18px auto 0; max-width:48ch}

/* =========================================================
   PÁGINA DE UN PLAN, /precios/ y «muy pronto»
   ========================================================= */
.migas{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 18px; padding:0; list-style:none; font-size:.78rem; color:var(--text-faint)}
.migas li{display:flex; align-items:center; gap:6px}
.migas li + li::before{content:"/"; color:var(--border-hover)}
.migas a{color:var(--text-dim)}
.migas a:hover{color:var(--accent)}
.plan-hero{position:relative; isolation:isolate; padding:clamp(30px,5vh,56px) 0 clamp(26px,4vh,48px)}
.plan-hero::before{content:""; position:absolute; z-index:-1; left:-8%; top:-30%; width:60%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(224,182,75,.09),transparent 65%)}
.plan-hero-copy .eyebrow{margin-bottom:20px}
.plan-hero-copy .hero-cta{margin-top:26px}
.plan-hero-copy .hero-nota{margin-top:18px}
.plan-hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(26px,4vw,56px); align-items:start}
.plan-hero h1{font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.035em}
.plan-hero .lead{margin-top:18px; max-width:58ch}
.compra{position:sticky; top:calc(var(--nav-h) + 16px); padding:clamp(22px,2.4vw,30px); border-radius:var(--r-lg)}
.compra .plan-precio{margin-top:6px}
.until{display:flex; gap:11px; align-items:flex-start; margin:18px 0; padding:13px 15px; border-radius:var(--r); border:1px solid var(--border); background:var(--bg-deep); font-size:.8rem; color:var(--text-dim)}
.until svg{flex-shrink:0; color:var(--accent); margin-top:2px}
.until b{color:var(--text); font-weight:600}
.garantias{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:7px; font-size:.78rem; color:var(--text-faint)}
.garantias li{display:flex; gap:8px; align-items:center}
.garantias svg{color:var(--green); flex-shrink:0}
.limites{padding:clamp(18px,2.2vw,26px)}
.card.limites h2{font-size:1.05rem; margin:0 0 14px}
.limites p{margin:14px 0 0; font-size:.84rem; color:var(--text-faint)}
.cta-final .sec-cta .btn-line{background:rgba(26,30,38,.5)}
/* ---- multimedia de un plan: capturas y vídeos de la herramienta funcionando ---- */
.media-lead{margin:-4px 0 18px; max-width:62ch; color:var(--text-dim); line-height:1.65}
.media-grid{position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); grid-template-areas:"a b" "c b"; gap:18px; align-items:start}
.m1{grid-area:a} .m2{grid-area:b} .m3{grid-area:c}
.media-grid::before{content:""; position:absolute; z-index:-1; inset:-6% -4%; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at 38% 34%,rgba(224,182,75,.09),transparent 62%)}
.media-marco{transition:transform .5s var(--out), border-color .35s}
.media-item:hover .media-marco{transform:translateY(-3px); border-color:var(--border-hover)}
.media-item{margin:0; display:grid; gap:12px; min-width:0}
.media-marco{position:relative; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:#0c0e12; box-shadow:var(--e3)}
.media-barra{display:flex; align-items:center; gap:12px; padding:9px 12px; border-bottom:1px solid var(--border-soft); background:#08090c}
.media-barra span{font-family:var(--mono); font-size:.66rem; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.media-marco img,.media-marco video{display:block; width:100%; height:auto; background:#07080a}
.media-ampliar{display:block; position:relative; width:100%; padding:0; border:0; background:none; cursor:zoom-in}
.media-lupa{position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:var(--r-full);
  background:rgba(8,9,12,.82); border:1px solid var(--border); color:var(--text); font-size:.74rem; opacity:0; transform:translateY(4px); transition:.3s var(--out)}
.media-ampliar:hover .media-lupa,.media-ampliar:focus-visible .media-lupa{opacity:1; transform:none}
.media-ampliar:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.media-item figcaption{font-size:.86rem; color:var(--text-dim); line-height:1.6}
.media-item figcaption b{color:var(--text); font-weight:600; margin-right:4px}
.media-hueco{display:grid; justify-items:center; align-content:center; gap:8px; padding:24px; text-align:center; color:var(--text-faint);
  aspect-ratio:16/9; background:radial-gradient(closest-side,rgba(224,182,75,.07),transparent); border:1px dashed var(--border-hover); margin:10px; border-radius:var(--r)}
.media-hueco[data-forma="vertical"]{aspect-ratio:3/4}
.media-hueco svg{color:var(--accent)}
.media-hueco b{color:var(--text-dim); font-weight:600; font-size:.92rem}
.media-hueco span{font-size:.74rem; line-height:1.5; max-width:30ch}
.media-hueco code{font-family:var(--mono); font-size:.9em; color:var(--text-dim)}
/* el visor para ampliar una captura */
.visor{width:min(96vw,1700px); max-height:94vh; padding:0; border:1px solid var(--border); border-radius:var(--r-md); background:#07080a; color:var(--text); overflow:auto}
.visor::backdrop{background:rgba(8,9,12,.86); backdrop-filter:blur(6px)}
.visor img{display:block; width:100%; height:auto}
.visor-cerrar{position:sticky; top:10px; float:right; margin:10px 10px -46px 0; z-index:2; display:grid; place-items:center; width:36px; height:36px;
  border-radius:50%; border:1px solid var(--border); background:rgba(8,9,12,.85); color:var(--text); cursor:pointer}
.visor-cerrar:hover{border-color:var(--accent-ring); color:var(--accent)}
@media (max-width:1080px){
  .media-grid{grid-template-columns:minmax(0,1fr); grid-template-areas:"a" "b" "c"}
  .m2{max-width:460px}
}
.sec-plan{padding:clamp(34px,5.5vh,64px) 0}
.sec-plan .sec-head{margin-bottom:clamp(24px,3.6vh,40px)}
.sec-plan .sec-head h2{margin-top:22px}
.sec-plan .sec-head .lead{margin:14px 0 0}
.dos-col{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.cartel{padding:clamp(20px,2.4vw,28px)}
.cartel-cab{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.cartel-cab h2{font-size:1.2rem; letter-spacing:-.02em; margin:0}
.cartel-ico{display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border-radius:11px;
  background:var(--accent-soft); border:1px solid var(--accent-ring); color:var(--accent)}
.sec-plan .sec-cta{margin-top:clamp(20px,3vh,30px)}
.lista-ok{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.lista-ok li{display:flex; gap:10px; font-size:.9rem; color:var(--text-dim); line-height:1.55}
.lista-ok li svg{flex-shrink:0; margin-top:3px; color:var(--accent)}
.lista-ok li.no, .lista-ok li.no svg{color:var(--text-faint)}
.lista-ok li b{color:var(--text); font-weight:600}
.momentos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.momento{padding:clamp(18px,2vw,24px); display:grid; gap:10px; align-content:start}
.momento h3{font-size:1.05rem; letter-spacing:-.015em; margin:6px 0 0}
.momento p{margin:0; font-size:.88rem; color:var(--text-dim); line-height:1.6}
.momentos-cierre{display:flex; align-items:flex-start; gap:12px; margin:18px 0 0; padding:16px 20px;
  border:1px solid var(--accent-ring); border-radius:var(--r-md); background:var(--accent-soft);
  font-size:.98rem; line-height:1.6; color:var(--text)}
.momentos-cierre svg{flex-shrink:0; margin-top:4px; color:var(--accent)}

/* ---- formulario de la lista de espera ---- */
.form-espera{display:flex; gap:10px; margin-top:6px}
.form-espera .inp{flex:1; min-width:0}
.form-espera .btn{flex-shrink:0}
.form-espera-nota{margin:10px 0 0; font-size:.76rem; color:var(--text-faint); line-height:1.5}

/* ---- tabla comparativa (/precios/): cada plan con su precio y su acceso a comprar y a saber más ---- */
.comp-wrap{max-width:1120px; margin-inline:auto; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg-card); box-shadow:var(--e3)}
.comp{width:100%; border-collapse:collapse; table-layout:fixed; font-size:.86rem}
.comp th,.comp td{padding:13px 16px; border-bottom:1px solid var(--border-soft); text-align:center; vertical-align:middle}
.comp th[scope="row"]{text-align:left; font-weight:500; color:var(--text-dim)}
.comp td{color:var(--text-dim)}
.comp td .si{color:var(--green)}
.comp td .no{color:var(--text-faint)}
.comp .col-dest{background:rgba(224,182,75,.05)}
.comp tbody tr:last-child th,.comp tbody tr:last-child td{border-bottom:0}
.comp .esquina{text-align:left; vertical-align:bottom; width:25%; padding:22px 18px 22px 22px}
#comparar .sec-head h1,#preguntas .sec-head h2{text-wrap:balance}
.comp .esquina b{display:block; font-size:1.05rem; color:var(--text); letter-spacing:-.01em}
.comp .esquina span{display:block; margin-top:5px; font-size:.78rem; color:var(--text-faint); line-height:1.5}
.comp thead th,.comp thead .esquina{background:linear-gradient(180deg,var(--bg-deep),var(--bg-card)); border-bottom:1px solid var(--border)}
.comp thead th{padding:20px 14px 22px; vertical-align:top; font-weight:400}
.comp thead th.col-dest{background:linear-gradient(180deg,rgba(224,182,75,.17),rgba(224,182,75,.05)); box-shadow:inset 0 2px 0 var(--accent)}
.cab-plan{display:grid; justify-items:center; gap:4px}
.cab-etiqueta{display:flex; align-items:center; justify-content:center; min-height:24px}
.cab-plan .nom{font-size:1.12rem; font-weight:700; letter-spacing:-.02em; color:var(--text)}
.cab-plan .precio{display:flex; align-items:flex-start; gap:4px; margin-top:6px; line-height:.9}
.cab-plan .precio .v{font-size:clamp(2.3rem,3.6vw,3rem); font-weight:700; letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--text)}
.cab-plan .precio .cur{font-size:1.15rem; font-weight:700; color:var(--accent); margin-top:3px}
.cab-plan .por-mes{font-size:.74rem; color:var(--text-faint); line-height:1.4}
.cab-plan .por-mes b{color:var(--text-dim); font-weight:600}
.cab-acc{display:grid; gap:8px; width:100%; max-width:210px; margin-inline:auto}
.cab-plan .cab-acc{margin-top:14px}
.cab-acc .btn{padding:11px 16px; font-size:.86rem; border-radius:var(--r)}
.cab-acc .mas{display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:.78rem; color:var(--text-dim); transition:color .2s}
.cab-acc .mas:hover{color:var(--accent)}
.comp tfoot td{padding:20px 14px 22px; border-top:1px solid var(--border); border-bottom:0; background:var(--bg-deep); vertical-align:middle}
.comp tfoot td.col-dest{background:linear-gradient(0deg,rgba(224,182,75,.14),rgba(224,182,75,.04))}
.comp tfoot .esquina{background:var(--bg-deep); border-top:1px solid var(--border); border-bottom:0; vertical-align:middle}

/* ---- «muy pronto» ---- */
.pronto{max-width:620px; margin:clamp(30px,6vh,70px) auto clamp(60px,9vh,110px)}
.pronto h1{font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.03em; margin-top:20px}
.pronto .lead{margin-top:14px}
.pronto .card{margin-top:26px}
.pronto .resumen{display:flex; justify-content:space-between; align-items:center; gap:14px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border-soft)}
.pronto .resumen b{font-size:1.05rem}
.pronto .resumen .pr{font-family:var(--mono); color:var(--accent); font-weight:700; font-size:1.2rem}
.pronto .volver{margin-top:20px; display:flex; flex-wrap:wrap; gap:10px}

/* ---- comprar ---- */
.compra-form{display:grid; gap:16px}
.compra-form .resumen{margin-bottom:0}
.campos-compra{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.campos-compra .field{margin:0}
.nota-compra{display:flex; gap:10px; margin:0; padding:12px 14px; border-radius:var(--r); background:var(--bg-deep); border:1px solid var(--border); font-size:.82rem; color:var(--text-dim); line-height:1.55}
.nota-compra svg{flex-shrink:0; margin-top:2px; color:var(--accent)}
.nota-compra b{color:var(--text)}
.consentimientos{display:grid; gap:12px; padding-top:4px}
.consentimientos .check{line-height:1.55}
.consentimientos .check b{color:var(--text); font-weight:600}
.consentimientos .check.con-error input{border-color:var(--red)}
.consentimientos .err-msg{margin:-6px 0 0 28px}
.codigo-promo{display:grid; gap:8px}
.codigo-fila{display:flex; gap:10px}
.codigo-fila .inp{flex:1; min-width:0; text-transform:uppercase}
.codigo-fila .inp::placeholder{text-transform:none}
.codigo-ok{display:flex; align-items:center; gap:7px; margin:0; font-size:.8rem; color:var(--green)}
.codigo-ok b{color:var(--text)}
.tachado{color:var(--text-faint); font-weight:500; font-size:.85em; margin-right:4px}
.pie-pago{margin:-6px 0 0; text-align:center; font-size:.74rem; color:var(--text-faint)}
.pasos-lista{margin:10px 0 0; padding-left:20px; display:grid; gap:8px; color:var(--text-dim); font-size:.9rem; line-height:1.6}
.pasos-lista b{color:var(--text)}
@media (max-width:560px){ .campos-compra{grid-template-columns:1fr} }

/* ---- comprar (/comprar/<plan>/): formulario a la izquierda e imagen con lo que incluye a la derecha, a la misma altura ---- */
.cp{margin:clamp(24px,5vh,56px) auto clamp(50px,8vh,100px)}
.cp h1{font-size:clamp(1.8rem,3.6vw,2.5rem); letter-spacing:-.03em; margin-top:20px}
.cp .lead{margin-top:12px}
.cp-solo{max-width:620px; margin-inline:auto}
.cp-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,56px);
  align-items:stretch; margin-top:30px}
.cp-col{display:flex; flex-direction:column}
.cp-col .cp-form{margin-top:26px}
.cp-col .volver{margin-top:auto; padding-top:24px; display:flex; flex-wrap:wrap; gap:10px}
.cp-h2{font-size:1rem; font-weight:700; letter-spacing:-.01em; margin:0 0 14px}
.cp-sub{font-size:.84rem; color:var(--text-dim); line-height:1.55; margin:0}
.cp-sub b{color:var(--text)}
.cp-nota{font-size:.82rem; color:var(--text-dim); line-height:1.55; margin:0}
.cp-nota b{color:var(--text)}
.cp-nota .lnk{white-space:nowrap}
.cp-precio{font-family:var(--mono); color:var(--accent); font-weight:700}
.cp-incluye{gap:10px}
.cp-incluye li{font-size:.88rem}
.cp-form{display:grid; gap:16px}
.cp-linea{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin:0}
.cp-linea .cp-precio{font-size:1.7rem}
.cp-imagen{position:relative; overflow:hidden; display:flex; align-items:flex-end; border:1px solid var(--border); border-radius:var(--r-lg)}
.cp-imagen .bg{position:absolute; inset:0; background:url("../img/banner.4cf44c371ab6.webp") center/cover no-repeat; opacity:.6}
.cp-imagen .veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,16,20,.3),rgba(14,16,20,.88) 55%,var(--bg) 92%)}
.cp-imagen-texto{position:relative; padding:clamp(20px,2.6vw,32px); width:100%}
/* «Ya tienes el plan»: una ficha centrada, con el aro dorado de las tarjetas de compra */
.cp-ya{text-align:center; display:grid; justify-items:center; gap:16px; padding:clamp(28px,4vw,48px) clamp(20px,3vw,40px);
  border-color:var(--accent-ring); box-shadow:0 30px 70px -40px rgba(224,182,75,.35)}
.cp-ya-ico{display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-ring)}
.cp-ya h1{margin:6px 0 0}
.cp-ya .lead{margin:0}
.cp-ya-datos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; margin:10px 0 6px; padding:16px 0;
  border-block:1px solid var(--border-soft)}
.cp-ya-datos div{display:grid; gap:4px; padding:0 12px; border-left:1px solid var(--border-soft)}
.cp-ya-datos div:first-child{border-left:0}
.cp-ya-datos dt{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint)}
.cp-ya-datos dd{margin:0; font-weight:600; color:var(--text)}
.cp-ya-botones{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
@media (max-width:900px){
  .cp-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .cp-ya-datos{grid-template-columns:minmax(0,1fr); gap:12px}
  .cp-ya-datos div{border-left:0; padding:0}
}

/* =========================================================
   TEXTOS LEGALES (aviso legal, términos, privacidad, cookies)
   ========================================================= */
.legal-pag{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:clamp(24px,4vw,56px); align-items:start}
.legal-pag .legal{max-width:780px; gap:30px}
.legal section{display:grid; gap:10px; scroll-margin-top:calc(var(--nav-h) + 16px)}
.legal h2{font-size:1.12rem; margin:0}
.legal ul,.legal ol{margin:0; padding-left:20px; display:grid; gap:7px; color:var(--text-dim); font-size:.92rem; line-height:1.7}
.legal ol.letras{list-style:lower-alpha}
.legal li b,.legal p b{color:var(--text); font-weight:600}
.legal ul.datos{list-style:none; padding:16px 18px; border:1px solid var(--border); border-radius:var(--r); background:var(--bg-card)}
.legal-cab{display:grid; gap:8px}
.legal-cab h1{margin:6px 0 0}
.legal-fecha{margin:0; font-family:var(--mono); font-size:.72rem; color:var(--text-faint)}
.legal .destacado{display:grid; gap:10px; padding:16px 18px; border-radius:var(--r); border:1px solid var(--accent-ring); background:var(--accent-soft)}
.legal .destacado p,.legal .destacado li{color:var(--text)}
.resumen-legal{padding:18px 20px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-card)}
.formulario-legal{display:grid; gap:8px; padding:16px 18px; border:1px dashed var(--border-hover); border-radius:var(--r)}
.tabla-legal{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r)}
.tabla-legal table{width:100%; border-collapse:collapse; font-size:.86rem}
.tabla-legal th,.tabla-legal td{padding:11px 14px; border-bottom:1px solid var(--border-soft); text-align:left; vertical-align:top; color:var(--text-dim); line-height:1.6}
.tabla-legal thead th{background:var(--bg-deep); color:var(--text); font-size:.8rem}
.tabla-legal th[scope="row"]{color:var(--text); font-weight:600; white-space:nowrap}
.tabla-legal tbody tr:last-child th,.tabla-legal tbody tr:last-child td{border-bottom:0}
.legal code{font-family:var(--mono); font-size:.85em; color:var(--text)}
mark.pendiente{background:rgba(240,136,62,.16); color:var(--amber); padding:1px 5px; border-radius:4px; font-family:var(--mono); font-size:.82em; font-weight:600}
.legal-falta{margin:0}
.legal-pie{display:grid; gap:6px; padding-top:20px; border-top:1px solid var(--border-soft)}
.legal-pie p{margin:0; font-size:.86rem}
.legal-indice{position:sticky; top:calc(var(--nav-h) + 16px); padding:16px 18px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-card); max-height:calc(100vh - var(--nav-h) - 40px); overflow:auto}
.legal-indice b{display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px}
.legal-indice ol{margin:0; padding:0; list-style:none; display:grid; gap:6px; font-size:.82rem; color:var(--text-faint)}
.legal-indice a{color:var(--text-dim)}
.legal-indice a:hover{color:var(--accent)}
@media print{
  .nav,.sheet,footer,.legal-indice,.saltar,.toasts,.grain{display:none !important}
  .legal-pag{display:block}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:34px}
  .planes{grid-template-columns:minmax(0,1fr); max-width:560px}
  .planes .plan.dest{order:-1}          /* el recomendado, el primero cuando van uno debajo de otro (solo en las tarjetas, no en la de compra de la página de un plan) */
  .plan-lema{min-height:0}
  .modes{grid-template-columns:minmax(0,1fr)}
  .mtabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .monedas-contenido{grid-template-columns:minmax(0,1fr)}
  .ticket-flota{margin-left:0}
  .faq.faq-ancha{grid-template-columns:minmax(0,1fr)}
  .metrics .shell{grid-template-columns:repeat(2,1fr)}
  .plan-hero-grid{grid-template-columns:minmax(0,1fr)}
  .compra{position:static}
  .capturas{grid-template-columns:minmax(0,1fr); max-width:560px; margin-inline:auto}
  .pasos{grid-template-columns:minmax(0,1fr); max-width:620px; margin-inline:auto}
  /* en una columna no cabe el índice al lado: se lee el texto seguido */
  .legal-pag{grid-template-columns:minmax(0,1fr)}
  .legal-indice{display:none}
}
@media (max-width:1040px){
  .momentos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .mtabs,.dos-col,.momentos{grid-template-columns:minmax(0,1fr)}
  .ajustes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-espera{flex-direction:column}
  /* la tabla comparativa pasa a tarjetas: el nombre de cada fila arriba y un valor por plan */
  .comp,.comp thead,.comp tbody,.comp tr,.comp th,.comp td{display:block; width:100%}
  .comp thead tr{display:grid; gap:10px; padding:14px; border-bottom:1px solid var(--border)}
  .comp thead .esquina{display:none}
  .comp thead th{padding:18px 16px; border:1px solid var(--border); border-radius:var(--r-md)}
  .comp thead th.col-dest{border-color:var(--accent-ring)}
  .comp tfoot{display:none}
  .comp tr{padding:12px 14px; border-bottom:1px solid var(--border-soft)}
  .comp tbody tr:last-child{border-bottom:0}
  .comp th[scope="row"]{padding:0 0 8px; border:0; color:var(--text); font-weight:600}
  .comp td{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border:0; text-align:right}
  .comp td::before{content:attr(data-plan); color:var(--text-faint); text-align:left; flex-shrink:0}
  .comp .col-dest{background:none}
  /* las tablas de los textos legales: cada fila, su nombre arriba y el texto debajo */
  .tabla-legal thead{display:none}
  .tabla-legal table,.tabla-legal tbody,.tabla-legal tr,.tabla-legal th,.tabla-legal td{display:block; width:100%}
  .tabla-legal tr{padding:12px 14px; border-bottom:1px solid var(--border-soft)}
  .tabla-legal tbody tr:last-child{border-bottom:0}
  .tabla-legal th,.tabla-legal td{padding:0; border:0}
  .tabla-legal th[scope="row"]{white-space:normal; margin-bottom:4px}
}
@media (max-width:480px){
  .metric{padding:18px 16px}
  .hero-cta .btn{flex:1 1 100%}
}