/* BASE360 · Tienda Oficina Virtual (planes → carrito → checkout → pago)
   Usa los colores y tipografías de ../assets/base.css
   ─────────────────────────────────────────────────────────────────────────
   24-sep-2026 · TRES CAMBIOS. Nada más se tocó.

   1) .volver — ERROR REAL, ya se veía mal.
      Decía  font-weight:600 ... font:inherit
      La forma corta "font" borra el font-weight declarado antes, así que
      «Cambiar oficina» y «Cambiar de plan» salían en peso normal y no en
      semi negrita. Ahora la forma corta va PRIMERO y el peso después.

   2) .opt input — ERROR REAL, es el salto de pantalla en el iPhone.
      Estaba en position:absolute con opacity:0 y SIN coordenadas. Al tocar
      la etiqueta, Safari le da el foco al radio y hace scroll hasta donde
      cree que está: eso es «la pantalla corrida al seleccionar». Ahora
      queda anclado en 0,0 dentro de su propia etiqueta y recortado a 1 px.
      Sigue invisible, sigue siendo un radio de verdad para el teclado y el
      lector de pantalla, y ya no arrastra la página.
      OJO: .sw input (el interruptor de los servicios) NO se tocó. Ese SÍ
      debe cubrir todo el switch con inset:0, porque es el área que se toca.

   3) :before / :after → ::before / ::after
      Notación estándar desde CSS3. Cambio cosmético, cero efecto visual.

   ─────────────────────────────────────────────────────────────────────────
   LO QUE NO SE CAMBIÓ, Y POR QUÉ

   rgba() se queda como está. Los linters modernos piden rgb() con cuatro
   valores, pero esa forma es CSS Color 4 y NO funciona en navegadores
   viejos donde rgba() sí funciona. Cambiarlo BAJARÍA la compatibilidad.
   El aviso del editor está equivocado para este caso.

   Si tu editor sigue marcando triángulos en casi todas las líneas, fíjate
   dónde caen: sobre var(--...), gap, clamp() y display:grid. Las líneas sin
   nada de eso no tienen marca. Eso significa que el editor valida contra una
   versión de CSS anterior a Grid, no que el archivo esté malo. Este archivo
   pasa un parser real sin un solo error: 350 reglas, 1.280 declaraciones.
   ───────────────────────────────────────────────────────────────────────── */
/* ---------- Encabezado de la tienda ---------- */
.ov-top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:70}
.ov-top-in{max-width:1160px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:18px}
.ov-top .brand img{height:46px}
.ov-links{display:flex;gap:20px;margin-left:auto;align-items:center}
.ov-links a{color:var(--tx-dim);font-size:14.5px;font-weight:600}
.ov-links a:hover,.ov-links a.on{color:var(--navy)}
.ov-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  border:1.5px solid var(--line);color:var(--navy);background:#fff;flex:0 0 auto}
.ov-cart:hover{border-color:var(--navy)}
.ov-cart svg{width:22px;height:22px}
.ov-badge{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--red);
  color:#fff;font-size:11.5px;font-weight:700;display:none;align-items:center;justify-content:center;line-height:1}
.ov-badge.on{display:inline-flex}
@media(max-width:760px){.ov-links a:not(.keep){display:none}.ov-top .brand small{display:none}.ov-top .brand img{height:40px}}

/* ---------- utilidades ---------- */
.ov-ic{display:inline-flex;width:1em;height:1em}
.ov-ic svg{width:100%;height:100%}
.muted{color:var(--tx-mute)} .dim{color:var(--tx-dim)}
.num{font-variant-numeric:tabular-nums}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.pill-navy{background:var(--navy);color:#fff}
.pill-red{background:var(--red);color:#fff}
.pill-gold{background:rgba(143,100,32,.12);color:var(--gold-d);border:1px solid rgba(143,100,32,.3)}
.pill-leaf{background:rgba(63,90,52,.12);color:var(--leaf-d);border:1px solid rgba(63,90,52,.3)}
.btn[disabled],.btn.off{opacity:.45;pointer-events:none;filter:grayscale(.3)}
.btn-sm{padding:10px 18px;font-size:14.5px}
.btn-block{width:100%}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--navy);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--navy-d)}

/* ---------- Portada ---------- */
.ov-hero{background:radial-gradient(900px 420px at 80% -10%,rgba(31,78,154,.45),transparent 60%),linear-gradient(160deg,var(--navy-dd),var(--navy-d));color:#fff}
.ov-hero-in{max-width:1000px;margin:0 auto;padding:62px 22px 70px;text-align:center}
.ov-hero h1{font-family:var(--serif);font-size:clamp(30px,5vw,52px);line-height:1.07;margin:0 0 16px;font-weight:600;letter-spacing:-.01em}
.ov-hero h1 em{font-style:normal;color:#F4B740}
.ov-hero p{color:#C9D6E8;font-size:clamp(15.5px,2vw,18.5px);max-width:640px;margin:0 auto 28px}
.ov-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.ov-chips span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#F3E3C3;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:999px}
.ov-chips svg{width:16px;height:16px;color:#F4B740}
.ov-hero .addr{margin-top:18px;font-size:13.5px;color:#9FB2CC}

/* selector de años */
.cyc{display:flex;justify-content:center;gap:6px;margin:0 auto 34px;background:var(--card-2);border:1px solid var(--line);
  border-radius:999px;padding:5px;width:max-content;max-width:100%;flex-wrap:wrap}
.cyc button{font-family:inherit;font-size:14px;font-weight:700;color:var(--tx-dim);background:none;border:0;padding:10px 20px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap}
.cyc button.on{background:var(--navy);color:#fff}
.cyc .off{display:inline-block;margin-left:7px;font-size:11px;font-weight:700;color:var(--red);background:rgba(192,40,40,.10);padding:1px 7px;border-radius:999px}
.cyc button.on .off{color:#fff;background:rgba(255,255,255,.22)}

/* tarjetas de plan */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px 26px;display:flex;flex-direction:column;position:relative}
.plan.top{border:2px solid var(--red);box-shadow:var(--shadow)}
.plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.plan .pn{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mute);font-weight:700}
.plan h3{font-family:var(--serif);font-size:28px;margin:4px 0 6px;font-weight:600}
.plan .pd{color:var(--tx-dim);font-size:14px;margin:0 0 16px;line-height:1.55;min-height:44px}
.plan .amt{font-family:var(--serif);font-size:42px;font-weight:700;color:var(--navy-d);line-height:1;font-variant-numeric:tabular-nums}
.plan .per{font-size:13px;color:var(--tx-dim);margin:6px 0 2px}
.plan .tot{font-size:12.5px;color:var(--tx-mute);min-height:19px}
.plan .btn{margin:18px 0 20px;width:100%}
.plan .inh{font-size:13px;font-weight:700;color:var(--tx-dim);margin:0 0 10px}
.feat{list-style:none;margin:0;padding:0}
.feat li{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:14px;line-height:1.45;position:relative}
.feat li>.ck{flex:0 0 18px;width:18px;height:18px;color:var(--leaf-d);margin-top:1px}
.feat li>.tx{flex:1}
.info{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--tx-mute);
  font:700 11.5px/1 var(--serif);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-top:0}
.info:hover,.info[aria-expanded=true]{border-color:var(--navy);color:var(--navy)}
.tip{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:var(--navy-dd);color:#E6EEF9;font-size:13px;line-height:1.5;
  padding:11px 13px;border-radius:12px;box-shadow:var(--shadow);display:none}
.tip.on{display:block}

/* pack */
.pack{margin-top:26px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:linear-gradient(135deg,var(--navy-d),#0B2651);
  color:#fff;border-radius:var(--r-lg);padding:28px 30px}
.pack h3{font-family:var(--serif);font-size:25px;margin:6px 0 6px;font-weight:600}
.pack p{margin:0;color:#C9D6E8;font-size:14.5px;max-width:560px}
.pack .pr{text-align:right}
.pack .pr b{display:block;font-family:var(--serif);font-size:36px;line-height:1}
.pack .pr small{display:block;color:#AFC2DC;font-size:12.5px;margin:4px 0 12px}

/* carrusel caso real */
.caso{max-width:880px;margin:0 auto}
.car{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.car-track{display:flex;transition:transform .45s ease}
.car-slide{flex:0 0 100%;padding:38px 70px 34px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.car-hora{font-family:var(--serif);font-size:48px;font-weight:700;color:var(--navy-d);line-height:1;font-variant-numeric:tabular-nums}
.car-hora small{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mute);margin-top:8px}
.car-slide h4{font-family:var(--serif);font-size:22px;margin:0 0 6px;font-weight:600}
.car-slide p{margin:0;color:var(--tx-dim);font-size:15px}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.car-btn:hover{border-color:var(--navy)}
.car-btn svg{width:18px;height:18px}
.car-prev{left:14px}.car-next{right:14px}
.car-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.car-dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0}
.car-dots button.on{background:var(--navy);width:26px;border-radius:999px}
.nota{font-size:12.5px;color:var(--tx-mute);text-align:center;margin:14px auto 0;max-width:640px;line-height:1.55}

/* cifras de velocidad */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cifra{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;text-align:center}
.cifra .ci{width:54px;height:54px;border-radius:16px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(31,78,154,.12),rgba(192,40,40,.08));color:var(--navy)}
.cifra .ci svg{width:27px;height:27px}
.cifra b{display:block;font-family:var(--serif);font-size:40px;line-height:1;color:var(--navy-d);font-weight:700}
.cifra span{display:block;margin-top:9px;font-size:14px;color:var(--tx-dim);line-height:1.45}

/* carpeta y faq */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.doc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.doc i{font-style:normal;font-family:var(--serif);font-weight:700;color:var(--gold-d)}
.doc b{display:block;font-size:14.5px;margin:4px 0 3px}
.doc span{font-size:13px;color:var(--tx-dim);line-height:1.5}
.faq{max-width:800px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px}
.faq summary{cursor:pointer;padding:17px 20px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:22px;line-height:1;color:var(--navy)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 20px 18px;color:var(--tx-dim);font-size:15px;line-height:1.65}

/* ---------- Pasos (stepper) ---------- */
.steps{display:flex;gap:0;list-style:none;margin:0 0 30px;padding:0;counter-reset:s}
.steps li{flex:1;position:relative;text-align:center;font-size:13.5px;font-weight:600;color:var(--tx-mute)}
.steps li::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0 auto 8px;
  border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--tx-mute);font-weight:700;position:relative;z-index:2}
.steps li::after{content:"";position:absolute;top:17px;left:calc(-50% + 18px);right:calc(50% + 18px);height:2px;background:var(--line);z-index:1}
.steps li:first-child::after{display:none}
.steps li.done{color:var(--tx-dim);cursor:pointer}
.steps li.done::before{content:"✓";background:var(--leaf-d);border-color:var(--leaf-d);color:#fff}
.steps li.done::after,.steps li.on::after{background:var(--leaf-d)}
.steps li.on{color:var(--navy)}
.steps li.on::before{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 0 0 5px rgba(31,78,154,.14)}
.steps li button{all:unset;cursor:inherit}

.flujo{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;min-width:0}
.panel h2{font-family:var(--serif);font-size:27px;margin:0 0 4px;font-weight:600}
.panel .sub{color:var(--tx-dim);margin:0 0 22px;font-size:15px}
.paso{display:none}.paso.on{display:block;animation:ovIn .25s ease}
@keyframes ovIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.volver{display:inline-flex;align-items:center;gap:6px;margin-top:22px;font:inherit;font-size:14.5px;font-weight:600;color:var(--navy);background:none;border:0;cursor:pointer;padding:0}
.volver svg{width:16px;height:16px}

/* opciones tipo radio */
.opts{display:grid;gap:14px}
.opts.c3{grid-template-columns:repeat(3,1fr)}
.opt{position:relative;display:block;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;transition:.15s}
.opt:hover{border-color:#C9B999}
.opt input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;padding:0;border:0;
  opacity:0;pointer-events:none;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}
.opt.sel{border-color:var(--navy);box-shadow:0 0 0 4px rgba(31,78,154,.12)}
.opt.dis{opacity:.5;cursor:not-allowed}
.opt .t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;font-size:15.5px}
.opt .v{display:block;font-family:var(--serif);font-size:26px;font-weight:700;color:var(--navy-d);margin:8px 0 2px;line-height:1.1}
.opt .d{display:block;font-size:13px;color:var(--tx-dim);line-height:1.5}
.opt .ahorro{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--leaf-d)}
.opt .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:0 0 20px;position:relative}
.opt.sel .dot{border-color:var(--navy)}
.opt.sel .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--navy)}
.opt-pack{background:linear-gradient(135deg,#F6F0E3,#EFE4CE)}

/* oficina */
.ofi{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
.ofi-map{height:130px;border-radius:12px;background:linear-gradient(160deg,var(--navy-d),var(--navy-dd));display:flex;align-items:center;justify-content:center;color:#F4B740;position:relative;overflow:hidden}
.ofi-map::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 22px)}
.ofi-map svg{width:46px;height:46px;position:relative}
.ofi h3{font-family:var(--serif);font-size:23px;margin:0 0 2px;font-weight:600}
.ofi ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--tx-dim)}
.ofi li{display:flex;gap:6px;align-items:center}
.ofi li svg{width:15px;height:15px;color:var(--leaf-d)}

/* otras ciudades (próximamente) */
.ciudades{margin-top:26px}
.ciudades h3{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);margin:0 0 4px;font-weight:700}
.ciudades>p{font-size:13.5px;color:var(--tx-dim);margin:0 0 12px}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cprox{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1.5px dashed #D8CBB3;border-radius:12px;padding:11px 12px}
.cprox b{display:block;font-size:14px;color:var(--tx-dim)}
.cprox small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mute)}
.cprox a{font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap;border:1.5px solid var(--line);border-radius:999px;padding:5px 10px;background:#fff}
.cprox a:hover{border-color:var(--navy)}
@media(max-width:820px){.cgrid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){
  .cgrid{grid-template-columns:1fr;gap:8px}
  .cprox{padding:10px 12px;gap:10px}
  .cprox b{font-size:14.5px}
  .cprox a{padding:6px 12px}
  .ciudades{margin-left:-4px;margin-right:-4px}
}

/* servicios adicionales con interruptor */
.grupo{margin-bottom:26px}
.grupo>h3{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);margin:0 0 10px;font-weight:700}
.sv{display:flex;align-items:flex-start;gap:16px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:10px;transition:.15s}
.sv.on{border-color:var(--navy);background:#F7F9FD}
.sv.lock{background:#F4F7F1;border-color:rgba(63,90,52,.45)}
.sv.dis{opacity:.5}
.sv .txt{flex:1;min-width:0}
.sv b{display:block;font-size:15px}
.sv p{margin:3px 0 0;font-size:13.5px;color:var(--tx-dim);line-height:1.5}
.sv .pz{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--navy-d);white-space:nowrap;text-align:right}
.sv .pz small{display:block;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--tx-mute)}
.sv .aviso{display:none;margin-top:6px;font-size:12.5px;color:var(--red-d);font-weight:600}
.sv.warn .aviso{display:block}
.sw{position:relative;flex:0 0 48px;width:48px;height:28px;margin-top:2px}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.sw span{position:absolute;inset:0;border-radius:999px;background:#D9CFBE;transition:.2s}
.sw span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.sw input:checked+span{background:var(--navy)}
.sw input:checked+span::after{transform:translateX(20px)}
.sw input:disabled{cursor:not-allowed}
.sw input:focus-visible+span{box-shadow:var(--ring)}
.sv.lock .sw input:checked+span{background:var(--leaf-d)}

/* resumen lateral "Tu selección" */
.resumen{min-width:0;position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}
.resumen h3{font-family:var(--serif);font-size:20px;margin:0 0 14px;font-weight:600}
.rs-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.rs-row:first-of-type{border-top:0}
.rs-row .k{color:var(--tx-mute);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:3px}
.rs-row .v{font-weight:600}
.rs-row .p{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-x{background:none;border:0;color:var(--tx-mute);cursor:pointer;font-size:17px;line-height:1;padding:0 0 0 6px}
.rs-x:hover{color:var(--red)}
.rs-tot{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--tx);margin-top:6px;padding-top:14px}
.rs-tot b{font-family:var(--serif);font-size:28px;color:var(--navy-d);font-variant-numeric:tabular-nums}
.rs-note{font-size:12px;color:var(--tx-mute);margin:10px 0 0;line-height:1.5}
.resumen .btn{margin-top:16px}
.barra{display:none}

/* ---------- Carrito ---------- */
.titulo{font-family:var(--serif);font-size:clamp(28px,4vw,38px);font-weight:600;margin:0 0 6px}
.cart{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.tabla{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tabla th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mute);font-weight:700;padding:14px 16px;background:var(--card-2)}
.tabla td{padding:16px;border-top:1px solid var(--line);vertical-align:middle;font-size:14.5px}
.tabla .it b{display:block;font-size:15px}
.tabla .it span{font-size:13px;color:var(--tx-dim)}
.tabla .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.qty button{width:32px;height:32px;border:0;background:none;cursor:pointer;font-size:17px;color:var(--navy);font-weight:700}
.qty span{min-width:22px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.trash{background:none;border:0;cursor:pointer;color:var(--tx-mute);padding:6px;border-radius:8px;display:inline-flex}
.trash:hover{color:var(--red);background:rgba(192,40,40,.08)}
.trash svg{width:19px;height:19px}
.vacio{text-align:center;padding:60px 20px;background:var(--card);border:1px dashed #D5C7AE;border-radius:var(--r-lg)}
.vacio svg{width:54px;height:54px;color:var(--tx-mute);margin:0 auto 12px}
.upsell{margin-top:26px}
.upsell h3{font-family:var(--serif);font-size:20px;margin:0 0 12px;font-weight:600}
.up{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px}
.up .txt{flex:1;min-width:0}.up b{display:block;font-size:14.5px}.up span{font-size:13px;color:var(--tx-dim)}
.up .pz{font-weight:700;white-space:nowrap}

/* ---------- Checkout ---------- */
.ck{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.fld input,.fld select{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--tx)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--navy);box-shadow:var(--ring)}
.fld.err input,.fld.err select{border-color:var(--red)}
.fld .msg{display:none;font-size:12.5px;color:var(--red-d);margin-top:5px;font-weight:600}
.fld.err .msg{display:block}
.fld .hint{font-size:12.5px;color:var(--tx-mute);margin-top:5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tel{display:flex;gap:8px}
.tel .pref{flex:0 0 92px;display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--line);border-radius:12px;background:var(--card-2);font-weight:600;font-size:15px}
.tel .pref svg{width:22px;height:auto;border-radius:2px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--tx-dim);cursor:pointer;margin:6px 0 4px}
.chk input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--navy);flex:0 0 18px}
.acciones{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
.mini{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:16px}
.mini td{padding:9px 0;border-bottom:1px solid var(--line)}
.mini td.r{text-align:right;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.cupon{display:none;gap:8px;margin:0 0 18px}.cupon.on{display:flex}
.cupon input{flex:1;font:inherit;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;min-width:0;text-transform:uppercase}
.cupon-msg{font-size:13px;margin:-10px 0 16px;font-weight:600}
.cupon-msg.ok{color:var(--leaf-d)}.cupon-msg.err{color:var(--red-d)}
.cli{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:18px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.cli div{font-size:14px;line-height:1.7}
.cli b{font-size:15px}
.caja{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:18px}
.caja h4{margin:0 0 10px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mute)}
.envio{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tx-dim)}
.envio svg{width:20px;height:20px;color:var(--leaf-d)}
.totales{width:100%;border-collapse:collapse;font-size:15px}
.totales td{padding:9px 0;border-bottom:1px solid var(--line)}
.totales td.r{text-align:right;font-variant-numeric:tabular-nums}
.totales tr.fin td{border-top:2px solid var(--tx);border-bottom:0;font-weight:700;font-size:17px;padding-top:12px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg label{display:flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;font-weight:600;background:#fff}
.seg label.sel{border-color:var(--navy);box-shadow:0 0 0 4px rgba(31,78,154,.1)}
.seg input{accent-color:var(--navy);width:18px;height:18px;margin:0}
.fact{display:none;margin-top:16px}.fact.on{display:block}
.medio{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;background:#fff;margin-bottom:10px}
.medio.sel{border-color:var(--navy);box-shadow:0 0 0 4px rgba(31,78,154,.1)}
.medio input{accent-color:var(--navy);width:18px;height:18px;margin:0}
.medio b{display:block;font-size:15px}.medio span{font-size:13px;color:var(--tx-dim)}
.medio .logo{margin-left:auto;font-weight:800;font-size:13px;letter-spacing:.02em;color:var(--navy-d);background:var(--card-2);border-radius:8px;padding:5px 9px;white-space:nowrap}
.alerta{background:rgba(192,40,40,.07);border:1px solid rgba(192,40,40,.3);color:var(--red-d);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;margin-top:14px;display:none}
.alerta.on{display:block}
.seguro{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12.5px;color:var(--tx-mute);margin-top:12px}
.seguro svg{width:15px;height:15px}

/* ---------- Página final ---------- */
.fin{max-width:980px;margin:0 auto}
.fin-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:26px}
.fin-head h1{font-family:var(--serif);font-size:clamp(30px,4.6vw,44px);margin:0 0 10px;font-weight:600;color:var(--leaf-d)}
.fin-head.mal h1{color:var(--red-d)}
.fin-head p{margin:0 0 8px;font-size:16px;color:var(--tx-dim);max-width:640px}
.fin-ok{flex:0 0 96px;width:96px;height:96px;border-radius:50%;background:linear-gradient(145deg,#7FA35F,var(--leaf-d));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(63,90,52,.35)}
.fin-head.mal .fin-ok{background:linear-gradient(145deg,#D75A5A,var(--red-d));box-shadow:0 12px 30px rgba(158,31,31,.3)}
.fin-ok svg{width:48px;height:48px}
.fin h2{font-family:var(--serif);font-size:24px;font-weight:600;margin:30px 0 12px;color:var(--tx-dim)}
.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.det{list-style:none;margin:0;padding:0}
.det li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.det li b{font-weight:700}
.sigue{list-style:none;margin:0;padding:0;counter-reset:q}
.sigue li{counter-increment:q;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.sigue li::before{content:counter(q);width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.sigue b{display:block}
.sigue span{color:var(--tx-dim);font-size:13.5px}
.demo{background:#FFF6DE;border:1px dashed #D9B25B;color:#7A5518;border-radius:12px;padding:10px 14px;font-size:13px;margin-bottom:20px}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .flujo,.cart,.ck{grid-template-columns:minmax(0,1fr)}
  .resumen{position:static}
  .cifras{grid-template-columns:1fr 1fr}
  .docs{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .planes{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .pack{grid-template-columns:1fr}.pack .pr{text-align:left}
  .opts.c3{grid-template-columns:1fr}
  .car-slide{grid-template-columns:1fr;padding:30px 56px;gap:12px;text-align:center}
}
@media(max-width:680px){
  .panel{padding:20px 16px}
  .steps li{font-size:11.5px}
  .steps li::before{width:30px;height:30px}
  .steps li::after{top:14px}
  .cifras{grid-template-columns:1fr 1fr;gap:12px}
  .cifra{padding:18px 12px}.cifra b{font-size:30px}.cifra span{font-size:13px}
  .docs{grid-template-columns:1fr}
  .two{grid-template-columns:1fr;gap:0}
  .ofi{grid-template-columns:1fr}.ofi-map{height:100px}
  .ofi ul{gap:6px 12px;font-size:13px}
  .opt{padding:14px}
  .sv{padding:14px;gap:12px;flex-wrap:wrap}
  .sv .txt{flex:1 1 calc(100% - 64px)}
  .sv .pz{order:3;flex:1 1 100%;text-align:left;padding-left:60px}
  .sv .pz small{display:inline;margin-left:6px}
  .car-slide{padding:26px 22px 22px}
  .car-btn{top:auto;bottom:10px;transform:none;width:34px;height:34px}
  .car-hora{font-size:40px}
  .tabla thead{display:none}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla tr{border-top:1px solid var(--line);padding:12px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center}
  .tabla.fin-t tr{grid-template-columns:1fr auto}
  .tabla tr:first-child{border-top:0}
  .tabla td{border:0;padding:0}
  .tabla td.it{grid-column:1/-1}
  .tabla td.pu{display:none}
  .tabla td.r{text-align:right}
  .up{flex-wrap:wrap}.up .txt{flex:1 1 100%}.up .pz{margin-right:auto}
  .tabla td.tr{text-align:right}
  .fin-head{flex-direction:column-reverse}.fin-ok{width:72px;height:72px;flex-basis:72px}
  .fin-grid{grid-template-columns:1fr;gap:10px}
  .fin-grid h2.vac{display:none}
  .fin-grid .totales{margin-top:14px}
  .seg{grid-template-columns:1fr 1fr}
  .acciones .btn{flex:1 1 auto}
  body.con-barra{padding-bottom:86px}
  .barra{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(42,29,20,.12);
    padding:12px 16px;gap:12px;align-items:center}
  .barra .t{flex:1;min-width:0}
  .barra .t small{display:block;font-size:11.5px;color:var(--tx-mute);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra .t b{font-family:var(--serif);font-size:22px;color:var(--navy-d)}
  .barra .btn{padding:12px 18px;font-size:15px}
  .wa-float{bottom:96px}
}