/* ============================================================================
   COMANDA — página de inicio
   ----------------------------------------------------------------------------
   Misma paleta, misma tipografía y mismos componentes que el panel: quien
   entra a la landing y después al sistema tiene que ver el mismo producto.
   La coreografía de scroll es la de antes (--p de 0 a 1 por sección); lo que
   cambia es el lenguaje.

   Registro: claro, ordenado, con cara de sistema de gestión. Lo único oscuro
   es el plano del salón — igual que en el panel.
   ============================================================================ */
:root{
  --f:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono','SF Mono',ui-monospace,monospace;

  --mk:#F04E23; --mk2:#C2360F; --mk-suave:#FDEDE7; --mk-borde:#F8C9B8;
  --grad:linear-gradient(103deg,#F4622F 0%,#DC3F13 52%,#B93108 100%);

  --fondo:#F6F7F9; --sup:#FFFFFF; --sup2:#F9FAFB; --sup3:#F1F3F6;
  --tinta:#15181D; --gris:#5C6672; --gris2:#8A94A1; --gris3:#A7B0BB;
  --linea:#E9ECF1; --linea2:#D8DDE5;
  --plano:#141C24;

  --verde:#127C4F; --verde-bg:#E5F5EC;
  --ambar:#956009; --ambar-bg:#FEF4E2; --ambar-bd:#F3D9A6;

  --r:14px; --r2:10px;
  --som:0 1px 2px rgba(21,24,29,.05);
  --som2:0 10px 30px -16px rgba(21,24,29,.28);
  --som3:0 30px 70px -30px rgba(21,24,29,.45);

  /* alias que todavía usa el marcado */
  --mk-legacy:var(--mk);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--f);font-size:14px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.045em;line-height:1.05}
/* La palabra clave del titular va en el color de marca, no en bastardilla */
h1 em,h2 em,h3 em{font-style:normal;color:var(--mk2)}
p{margin:0}
a{color:inherit;text-decoration:none}
.w{max-width:1120px;margin:0 auto;padding:0 22px}
:focus-visible{outline:2px solid var(--mk);outline-offset:2px}

/* El fondo animado se va: un sistema de gestión no tiene manchas derivando. */
.fondo{display:none}

/* ================================================================= barras */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:56px;background:var(--grad);color:#fff;
  transition:transform .38s cubic-bezier(.2,.8,.25,1)}
.nav.oculto{transform:translateY(-100%)}
.nav.claro{background:var(--grad)}
.nav-in{max-width:1120px;margin:0 auto;padding:0 22px;height:100%;display:flex;align-items:center;gap:26px}
.nav-lg{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:-.03em}
.nav-lg i{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;flex:none}
.nav-lg i s{width:12px;height:12px;text-decoration:none;
  background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px),
             repeating-linear-gradient(0deg,#fff 0 2px,transparent 2px 4px)}
.nav-l{display:flex;gap:6px;font-size:13px}
.nav-l a{padding:7px 12px;border-radius:8px;color:rgba(255,255,255,.82)}
.nav-l a:hover{background:rgba(255,255,255,.16);color:#fff}
.nav-r{margin-left:auto;display:flex;gap:9px;align-items:center;font-size:13px}
.nav-r a{padding:9px 15px;border-radius:8px;font-weight:600;color:rgba(255,255,255,.9)}
.nav-r a:hover{background:rgba(255,255,255,.16)}
.nav-r .c{background:#fff;color:var(--mk2)}
.nav-r .c:hover{background:#fff;opacity:.92}
.nav.claro .nav-r .c{background:#fff;color:var(--mk2)}
@media(max-width:820px){.nav-l{display:none}}

.sub{position:fixed;top:0;left:0;right:0;z-index:75;height:56px;background:var(--grad);color:#fff;
  transform:translateY(-110%);transition:transform .38s cubic-bezier(.2,.8,.25,1)}
.sub.on{transform:none}
.sub-in{max-width:1120px;margin:0 auto;padding:0 22px;height:100%;display:flex;align-items:center;gap:22px}
.sub-in b{font-size:16px;font-weight:700;letter-spacing:-.03em}
.sub-l{display:flex;gap:6px;margin-left:10px;font-size:12.5px}
.sub-l a{padding:6px 11px;border-radius:8px;color:rgba(255,255,255,.82)}
.sub-l a:hover{background:rgba(255,255,255,.16);color:#fff}
.sub-r{margin-left:auto;display:flex;gap:9px;align-items:center}
.sub-r .p{background:#fff;color:var(--mk2);height:34px;padding:0 16px;border-radius:8px;
  display:grid;place-items:center;font-size:12.5px;font-weight:700}
.sub-r .p:hover{opacity:.92}
.sub-r .s{font-size:12.5px;color:rgba(255,255,255,.85);font-weight:600;padding:8px 13px;border-radius:8px}
.sub-r .s:hover{background:rgba(255,255,255,.16)}
@media(max-width:760px){.sub{display:none}}

/* ============================================================ bloque base */
.esc{position:relative;padding:104px 0 0;text-align:center;background:var(--fondo)}
.esc.claro{background:var(--sup)}
.esc.hueso{background:var(--fondo)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mk2);background:var(--mk-suave);
  padding:6px 14px;border-radius:99px;margin-bottom:20px}
.esc h1{font-size:clamp(38px,6.2vw,66px);letter-spacing:-.05em}
.esc h2{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.045em}
.baja{margin:18px auto 0;font-size:clamp(15.5px,1.6vw,19px);line-height:1.5;color:var(--gris);
  max-width:30em}

.links{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.links a{display:grid;place-items:center;height:44px;padding:0 22px;border-radius:8px;
  font-size:14px;font-weight:700;background:var(--mk);color:#fff;transition:background .15s}
.links a:hover{background:var(--mk2)}
.links a:nth-child(2){background:var(--sup);color:var(--tinta);border:1px solid #C3CBD6}
.links a:nth-child(2):hover{background:var(--sup3)}
.links a::after{content:''}

.ap{opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.16,.84,.24,1),transform .8s cubic-bezier(.16,.84,.24,1)}
.ap.in{opacity:1;transform:none}

/* ============================================== 1. tapa: el panel de verdad */
#hero{padding-bottom:0}
#hero .glow{display:none}
#hero .escena{margin-top:44px;perspective:1600px;padding-bottom:0}
#hero .tab{
  transform:rotateX(calc(26deg - var(--p,0) * 26deg)) scale(calc(.84 + var(--p,0) * .16))
            translateY(calc(40px - var(--p,0) * 40px));
  transform-origin:50% 0;
  box-shadow:0 calc(24px + var(--p,0)*40px) calc(50px + var(--p,0)*50px) -30px rgba(21,24,29,.4);
}

/* El tablero de muestra ES el panel: mismas celdas, mismos filetes, mismo
   plano oscuro. Si la landing muestra otra cosa, el producto miente. */
.tab{max-width:1040px;margin:0 auto;background:var(--sup);color:var(--tinta);
  border:1px solid var(--linea);border-radius:16px;overflow:hidden;text-align:left}
.tab-h{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--linea)}
.tab-h b{font-size:14px;font-weight:700;letter-spacing:-.03em}
.tab-h .tab-sub{font-size:11.5px;color:var(--gris2)}
.tab-h .v{margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--verde-bg);
  color:var(--verde);padding:4px 11px;border-radius:99px;font-size:9.5px;font-weight:700;letter-spacing:.11em}
.tab-h .v u{width:6px;height:6px;border-radius:50%;background:var(--verde);text-decoration:none;
  animation:lat 2s infinite}
@keyframes lat{0%,100%{opacity:1}50%{opacity:.25}}
.tab-k{display:flex;border-bottom:1px solid var(--linea)}
.tab-k div{flex:1;padding:12px 16px;border-right:1px solid var(--linea)}
.tab-k div:last-child{border-right:0}
.tab-k label{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris2)}
.tab-k b{display:block;font-size:19px;font-weight:700;letter-spacing:-.05em;margin-top:5px;
  font-variant-numeric:tabular-nums}
.tab-k b .u{font-size:12px;font-weight:600;color:var(--gris2);letter-spacing:0}
.tab-k small{display:block;font-size:10.5px;color:var(--gris2);margin-top:4px}
.tab-k div{padding:11px 14px}
.tab-k b.v{color:var(--verde)} .tab-k b.a{color:var(--mk2)}
.tab-z{display:flex;gap:2px;padding:9px 14px;border-bottom:1px solid var(--linea)}
.tab-z span{font-size:12.5px;font-weight:600;color:var(--gris);padding:6px 12px;border-radius:8px}
.tab-z span u{text-decoration:none;font-family:var(--mono);font-size:10.5px;opacity:.65}
.tab-z span.on{background:var(--mk);color:#fff}
.tab-cuerpo{display:grid;grid-template-columns:1fr 262px}
@media(max-width:760px){.tab-cuerpo{grid-template-columns:1fr}.tab-feed{display:none}}
.tab-feed{border-left:1px solid var(--linea);background:var(--sup2);padding:12px 13px}
.tab-feed h5{margin:0 0 1px;font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris2)}
.tab-feed .sub{position:static;transform:none;height:auto;background:none;border:0;
  font-size:10.5px;color:var(--gris2);margin-bottom:8px}
.fe{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linea)}
.fe:last-child{border-bottom:0}
.fe u{width:28px;height:28px;border-radius:50%;background:var(--sup3);color:var(--gris);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;
  text-decoration:none;flex:none}
.fe u.am{background:var(--mk-suave);color:var(--mk2)} .fe u.vd{background:var(--verde-bg);color:var(--verde)}
.fe .d{min-width:0}
.fe .d b{display:block;font-size:11.5px;font-weight:700}
.fe .d span{font-size:10px;color:var(--gris2)}
.fe .mt{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-weight:600;white-space:nowrap}

/* ------------------------------------------------ el plano, igual que allá
   Claro y sobrio: la mesa es una celda con filete, el número manda y el color
   sólo aparece en el borde. Tiene que leerse como planilla, no como tablero. */
.plano{position:relative;aspect-ratio:16/9.4;background:#FBFCFD;margin:12px;border-radius:var(--r2);
  border:1px solid var(--linea)}
.plano::before{content:'';position:absolute;inset:0;border-radius:var(--r2);
  background-image:radial-gradient(circle,rgba(21,24,29,.09) 1px,transparent 1px);
  background-size:26px 26px}
.mz{position:absolute;transform:translate(-50%,-50%) scale(var(--s,1));width:10.5%;aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
.mz.cuad{border-radius:22%}
.mz.doble{width:15%;aspect-ratio:1.4;border-radius:13%}
.mz::before,.mz::after{content:'';position:absolute;border-radius:inherit;transition:.5s}
.mz::before{inset:0;opacity:0;
  background:conic-gradient(var(--c,var(--gris2)) calc(var(--p2,0)*1%),#E7EBF0 0)}
.mz.viva::before{opacity:1}
.mz::after{inset:3px;background:var(--sup2);box-shadow:inset 0 0 0 1.5px var(--linea2)}
.mz:not(.viva)::after{background:var(--sup2)}
.mz.viva::after{background:var(--sup);box-shadow:inset 0 0 0 1.5px var(--gris2),var(--som)}
.mz i{display:none}
.mz .num,.mz .mto,.mz .tmp,.mz .pax,.mz .met{position:relative;z-index:2}
.mz .num{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--gris2);line-height:1.25}
.mz.viva .num{color:var(--gris)}
.mz .mto{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:-.05em;color:var(--tinta);
  line-height:1.25;opacity:0;transition:opacity .45s}
.mz .tmp{font-size:8px;color:var(--gris2);font-weight:600;line-height:1.3;opacity:0;transition:opacity .45s}
/* el mozo y los comensales, arriba de la mesa: es lo que se pregunta el encargado */
.mz .pax{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:7.5px;font-weight:700;
  letter-spacing:.06em;color:var(--gris2);white-space:nowrap;background:#FBFCFD;padding:0 5px;
  opacity:0;transition:opacity .45s;z-index:3}
/* la mesa libre dice para cuántos es y hace cuánto está vacía */
.mz .cap{position:relative;z-index:2;font-size:7.5px;font-weight:600;color:var(--gris2);
  line-height:1.3;white-space:nowrap}
.mz.viva .cap{display:none}
.mz.viva .mto,.mz.viva .tmp,.mz.viva .pax{opacity:1}
.mz.viva.a{--c:var(--gris2);--p2:44}
.mz.viva.c{--c:#F04E23;--p2:82}
.mz.viva.c::after{background:var(--mk-suave);box-shadow:inset 0 0 0 2px var(--mk)}
.mz.viva.c .mto,.mz.viva.c .num{color:var(--mk2)}
.mz.viva.p{--c:#127C4F;--p2:100}
.mz.viva.p::after{background:var(--verde-bg);box-shadow:inset 0 0 0 2px var(--verde)}
.mz.viva.p .mto,.mz.viva.p .num{color:var(--verde)}
.mz .met{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);background:var(--mk);color:#fff;
  font-size:7.5px;font-weight:700;letter-spacing:.05em;padding:2px 6px;border-radius:4px;
  white-space:nowrap;opacity:0;transition:opacity .45s;text-transform:uppercase;z-index:3}
.mz.viva.c .met{opacity:1}

/* la barra del local: sin un objeto fijo el plano no es de nadie */
.tab-barra{position:absolute;left:2%;top:10%;width:3.6%;height:74%;border-radius:7px;
  background:var(--sup3);border:1px solid var(--linea2);display:grid;place-items:center;
  font-size:7.5px;font-weight:700;letter-spacing:.16em;color:var(--gris2);
  writing-mode:vertical-rl;text-orientation:mixed}

/* leyenda al pie del plano */
.tab-ley{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:2px 16px 12px;
  font-size:10.5px;color:var(--gris)}
.tab-ley u{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;
  text-decoration:none;vertical-align:-1px}
.tab-ley .l-a{background:var(--sup);border:1.5px solid var(--gris2)}
.tab-ley .l-c{background:var(--mk-suave);border:1.5px solid var(--mk)}
.tab-ley .l-p{background:var(--verde-bg);border:1.5px solid var(--verde)}
.tab-ley .l-l{background:var(--sup2);border:1.5px dashed var(--linea2)}
.tab-ley .d{margin-left:auto;color:var(--gris2)}

/* tabla al pie: es lo que termina de decir que esto es un sistema */
.tab-tabla{border-top:1px solid var(--linea);overflow:auto}
.tab-tabla table{width:100%;border-collapse:collapse}
.tab-tabla th{text-align:left;padding:8px 16px;font-size:8.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gris2);background:var(--sup2);
  border-bottom:1px solid var(--linea);white-space:nowrap}
.tab-tabla td{padding:8px 16px;border-bottom:1px solid var(--linea);font-size:11.5px;white-space:nowrap}
.tab-tabla tr:last-child td{border-bottom:0}
.tab-tabla .r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.tab-tabla .tfin td{background:var(--sup2);font-weight:700;border-top:1px solid var(--linea2)}
.tab-tabla .pz-c,.tab-tabla .pz-v,.tab-tabla .pz-n{display:inline-block;padding:2px 8px;border-radius:99px;
  font-size:10px;font-weight:700}
.tab-tabla .pz-c{background:var(--mk-suave);color:var(--mk2)}
.tab-tabla .pz-v{background:var(--verde-bg);color:var(--verde)}
.tab-tabla .pz-n{background:var(--sup3);color:var(--gris)}
@media(max-width:760px){ .tab-ley .d{display:none} }

/* ============================================= 2. el flujo con el celular */
.pin{position:relative;height:320vh;background:var(--sup)}
.pin-st{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.pin-rot{position:absolute;top:96px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris2)}
@media(max-width:860px){.pin-rot{top:74px;font-size:9px}}
.pin-in{display:grid;grid-template-columns:1fr 300px;gap:62px;align-items:center;
  max-width:960px;width:100%;padding:0 22px}
.pin-tx{display:flex;flex-direction:column;justify-content:center}
.paso-area{position:relative;min-height:240px}
.paso{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;text-align:left;
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.8,.25,1),transform .5s cubic-bezier(.2,.8,.25,1)}
.paso.on{opacity:1;transform:none;pointer-events:auto}
.paso u{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--mk-suave);color:var(--mk2);font-family:var(--mono);font-size:12.5px;font-weight:600;
  text-decoration:none;margin-bottom:16px}
.paso h3{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.045em}
.paso p{margin-top:13px;font-size:16px;color:var(--gris);line-height:1.5;max-width:22em}
.pasos-lista{display:grid;gap:2px;margin-top:28px}
.pl{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r2);
  cursor:pointer;transition:background .3s,opacity .3s;opacity:.5}
.pl.on{opacity:1;background:var(--sup3)}
.pl:hover{opacity:.85}
.pl u{font-family:var(--mono);font-size:11px;font-weight:600;text-decoration:none;color:var(--mk2);flex:none}
.pl b{font-size:13.5px;font-weight:600}
.pl::before{display:none}
@media(max-width:860px){.pasos-lista{display:none}.paso-area{min-height:auto}}
.pin-bar{display:none;gap:6px;margin-top:20px}
@media(max-width:860px){.pin-bar{display:flex}}
.pin-bar i{flex:1;height:3px;border-radius:99px;background:var(--linea2);transition:background .4s}
.pin-bar i.on{background:var(--mk)}
@media(max-width:860px){
  .pin-in{grid-template-columns:1fr;gap:24px;text-align:center}
  .paso{text-align:center;align-items:center}.pin-bar{justify-content:center}.pin{height:290vh}
}

/* el celular: la mesa del comensal */
.fono{width:298px;max-width:76vw;margin:0 auto;background:#0F1319;border-radius:42px;padding:9px;
  box-shadow:var(--som3),0 0 0 1px rgba(21,24,29,.14)}
.pant{background:var(--fondo);border-radius:34px;overflow:hidden;position:relative;height:552px}
.vp{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .5s,transform .5s;overflow:hidden}
.vp.on{opacity:1;transform:none}
.v-h{background:var(--grad);color:#fff;padding:26px 16px 16px}
.v-h .l{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.v-h .t{font-size:21px;font-weight:700;letter-spacing:-.04em;margin-top:4px}
.it{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--linea);
  background:var(--sup);text-align:left}
.it u{width:34px;height:34px;border-radius:9px;background:var(--sup3);display:grid;place-items:center;
  flex:none;text-decoration:none;overflow:hidden}
.it u img{width:100%;height:100%;object-fit:cover;display:block}
.it.foto u{width:50px;height:50px;border-radius:10px}
.it.foto{padding:10px 14px}
.it .t{min-width:0;flex:1;overflow:hidden}
.it .t b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .t span{display:block;font-size:11px;color:var(--gris2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .pz{margin-left:auto;font-family:var(--mono);font-size:12.5px;font-weight:600;white-space:nowrap;flex:none}
.it .add{width:25px;height:25px;border-radius:50%;background:var(--mk);color:#fff;display:grid;
  place-items:center;font-size:14px;flex:none;margin-left:9px}
.dest{position:relative;margin:10px 12px 4px;border-radius:var(--r2);overflow:hidden;height:104px}
.dest img{width:100%;height:100%;object-fit:cover;display:block}
.dest .cap{position:absolute;inset:auto 0 0 0;padding:24px 12px 10px;color:#fff;
  background:linear-gradient(transparent,rgba(12,14,18,.86))}
.dest .cap b{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em}
.dest .cap span{font-size:10.5px;opacity:.85}
.dest .pz2{position:absolute;top:9px;right:9px;background:#fff;color:var(--tinta);font-family:var(--mono);
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px}
.tot{position:absolute;left:12px;right:12px;bottom:12px;background:var(--tinta);color:#fff;
  border-radius:var(--r);padding:12px 14px;text-align:left}
.tot .r{display:flex;align-items:center;font-size:11.5px;opacity:.65}
.tot .r b{margin-left:auto;font-family:var(--mono);font-weight:600}
.tot .g{display:flex;align-items:center;font-size:18px;font-weight:700;letter-spacing:-.04em;margin-top:7px}
.tot .g b{margin-left:auto;font-family:var(--mono)}
.tot .btn{margin-top:12px;height:40px;border-radius:8px;background:var(--mk);display:grid;
  place-items:center;font-size:13.5px;font-weight:700;color:#fff}
.mp{display:flex;gap:7px;padding:11px 13px}
.mp span{flex:1;border:1px solid var(--linea2);border-radius:9px;padding:8px 4px;text-align:center;
  font-size:10.5px;font-weight:700;color:var(--gris);background:var(--sup);white-space:nowrap;line-height:1.35}
.mp span b{display:block;font-size:8.5px;font-weight:500;color:var(--gris2);margin-top:1px}
.mp span.sel{border-color:var(--mk);background:var(--mk-suave);color:var(--mk2)}
.mp span.sel b{color:var(--mk2);opacity:.75}
.busca{margin:10px 12px 0;height:34px;border-radius:9px;background:var(--sup3);display:flex;
  align-items:center;gap:7px;padding:0 11px;font-size:11.5px;color:var(--gris2)}
.chips{display:flex;gap:5px;padding:10px 12px 2px;overflow:hidden}
.chips span{font-size:11px;font-weight:700;padding:5px 11px;border-radius:99px;background:var(--sup3);
  color:var(--gris);white-space:nowrap}
.chips span.on{background:var(--mk);color:#fff}
.qty{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
.qty u{width:22px;height:22px;border-radius:7px;background:var(--sup3);color:var(--gris);
  display:grid;place-items:center;font-size:12px;font-weight:700;text-decoration:none}
.qty b{font-family:var(--mono);font-size:12px;font-weight:600;min-width:16px;text-align:center}
/* el nombre manda: si el stepper lo comprime, no se lee qué se pidió */
.it .qty{margin-left:12px}
.it .t{min-width:70px}
.ln{display:flex;align-items:baseline;padding:7px 15px;font-size:12px;color:var(--gris)}
.ln b{margin-left:auto;font-family:var(--mono);font-weight:600;color:var(--tinta)}
.ln.sm{font-size:11px;color:var(--gris2);padding-top:2px}
.ln.sm b{color:var(--gris2)}
.ln.vd b{color:var(--verde)}
.sep{height:1px;background:var(--linea);margin:6px 15px}
.split{margin:8px 13px 0;border:1px dashed var(--linea2);border-radius:var(--r2);padding:9px 11px;
  display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--gris)}
.split span{margin-left:auto;font-size:11px;font-weight:700;color:var(--mk2)}
.est{background:var(--sup);padding:18px 15px;text-align:center}
.est .n{font-family:var(--mono);font-size:42px;font-weight:600;letter-spacing:-.06em;line-height:1}
.est .n span{font-family:var(--f);font-size:12px;font-weight:600;color:var(--gris2);margin-left:6px;letter-spacing:0}
.est .b2{height:6px;border-radius:99px;background:var(--sup3);margin-top:13px;overflow:hidden}
.est .b2 i{display:block;height:100%;width:85%;background:var(--grad);border-radius:99px}
.est .f{margin-top:10px;font-size:12px;color:var(--gris2)}

/* ============================================================ grilla bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:196px;gap:12px;
  max-width:1000px;margin:44px auto 0;padding-bottom:104px;text-align:left}
.bx{background:var(--sup);color:var(--tinta);border:1px solid var(--linea);border-radius:var(--r);
  padding:20px;overflow:hidden;position:relative;box-shadow:var(--som);
  transition:transform .4s cubic-bezier(.16,.84,.24,1),box-shadow .3s}
.bx:hover{transform:translateY(-3px);box-shadow:var(--som2)}
.bx h4{margin:0;font-size:16px;font-weight:700;letter-spacing:-.03em}
.bx p{margin-top:8px;font-size:13px;color:var(--gris);line-height:1.5}
.bx .big{font-family:var(--mono);font-size:46px;font-weight:600;letter-spacing:-.06em;
  color:var(--mk2);line-height:1}
.bx.w2{grid-column:span 2} .bx.h2{grid-row:span 2}
.bx.oscura{background:var(--plano);color:#fff;border-color:transparent}
.bx.oscura p{color:rgba(255,255,255,.7)}
.bx.foto{padding:0}
.bx.foto img{width:100%;height:100%;object-fit:cover;display:block}
.bx.foto .cap{position:absolute;inset:auto 0 0 0;padding:38px 18px 16px;color:#fff;
  background:linear-gradient(transparent,rgba(12,14,18,.88))}
.bx.foto .cap b{display:block;font-size:16px;font-weight:700;letter-spacing:-.03em}
.bx.foto .cap span{font-size:12px;opacity:.86}
.bx .mini{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.bx .mini span{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:99px;
  background:var(--sup3);color:var(--gris)}
.bx.oscura .mini span{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:186px}
  .bx.w2{grid-column:span 2}.bx.h2{grid-row:span 1}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bx.w2{grid-column:span 1}}

/* ================================================================== cifras
   La misma tira de celdas con borde que el panel. */
.cif{display:grid;grid-template-columns:repeat(4,1fr);max-width:900px;margin:44px auto 0;
  background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--som);
  overflow:hidden;text-align:left}
.cif div{padding:18px 20px;border-right:1px solid var(--linea)}
.cif div:last-child{border-right:0}
.cif b{display:block;font-family:var(--mono);font-size:clamp(26px,3.2vw,38px);font-weight:600;
  letter-spacing:-.06em;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.cif span{display:block;margin-top:8px;font-size:12.5px;color:var(--gris);line-height:1.4}
.esc.claro .cif,.esc.hueso .cif{background:var(--sup)}
@media(max-width:720px){.cif{grid-template-columns:1fr 1fr}
  .cif div{border-bottom:1px solid var(--linea)}.cif div:nth-child(2n){border-right:0}}
#numeros{padding-bottom:104px}

/* ================================================================= precios */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;
  text-align:left;padding-bottom:104px;align-items:start}
@media(max-width:880px){.planes{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
.plan{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);padding:26px 24px;
  position:relative;box-shadow:var(--som);transition:transform .4s cubic-bezier(.16,.84,.24,1),box-shadow .3s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--som2)}
.plan.d{border-color:var(--mk);box-shadow:0 0 0 1px var(--mk),var(--som2)}
.plan .tg{position:absolute;top:-11px;left:24px;background:var(--mk);color:#fff;font-size:9.5px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:5px 12px;border-radius:6px}
.plan h3{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gris2)}
.plan .pz{font-size:34px;font-weight:700;letter-spacing:-.055em;margin-top:11px;line-height:1}
.plan .pz small{font-size:13px;font-weight:600;color:var(--gris2);letter-spacing:0}
.plan .sb{font-size:12.5px;color:var(--gris);margin-top:7px}
.plan ul{list-style:none;margin:20px 0 0;padding:19px 0 0;display:grid;gap:10px;
  border-top:1px solid var(--linea)}
.plan li{font-size:13px;line-height:1.45;padding-left:19px;text-indent:-19px;color:var(--gris)}
.plan a.b{display:grid;place-items:center;height:44px;border-radius:8px;margin-top:22px;
  font-size:13.5px;font-weight:700;background:var(--sup3);color:var(--tinta);transition:background .15s}
.plan a.b:hover{background:var(--linea)}
.plan.d a.b{background:var(--mk);color:#fff}
.plan.d a.b:hover{background:var(--mk2)}

/* =============================================================== contratapa */
.cierre{padding:104px 0;text-align:center;background:var(--plano);color:#fff;position:relative}
.cierre h2{color:#fff}
.cierre h2 em{color:#FF8A5E}
.cierre .baja{color:rgba(255,255,255,.68)}
.bs{display:flex;gap:11px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.bp{display:grid;place-items:center;height:46px;padding:0 26px;border-radius:8px;font-size:14px;
  font-weight:700;transition:background .15s}
.bp.p{background:var(--mk);color:#fff} .bp.p:hover{background:var(--mk2)}
.bp.s{background:rgba(255,255,255,.12);color:#fff} .bp.s:hover{background:rgba(255,255,255,.22)}
footer{background:var(--plano);border-top:1px solid rgba(255,255,255,.1);padding:24px 0;
  font-size:12.5px;color:rgba(255,255,255,.55)}
.f-in{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.f-in nav{margin-left:auto;display:flex;gap:8px}
.f-in nav a{padding:6px 12px;border-radius:8px}
.f-in nav a:hover{background:rgba(255,255,255,.1);color:#fff}

/* ==================================================================== móvil */
@media(max-width:760px){
  .esc{padding:72px 0 0}
  .esc h1{font-size:clamp(31px,8.4vw,42px)}
  .baja{font-size:15.5px;margin-top:14px}
  .links{flex-direction:column;gap:9px;margin-top:24px;padding:0 22px}
  .links a{height:50px;font-size:15px}
  .nav{height:56px} .nav-r a{padding:9px 14px;font-size:13px}
  #hero .escena{margin-top:30px;padding:0 12px;perspective:900px}
  #hero .tab{transform:none;box-shadow:var(--som2)}
  .tab{border-radius:13px}
  .tab-k{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tab-k::-webkit-scrollbar{display:none}
  .tab-k div{flex:0 0 auto;min-width:124px;padding:11px 14px}
  .tab-k b{font-size:17px}
  .plano{aspect-ratio:1/1}
  .mz{width:17.5%} .mz.doble{width:25%}
  .pin{height:250vh}
  .pin-in{gap:20px;padding:0 18px}
  .pin-tx{min-height:auto;order:2}
  .paso{position:relative;inset:auto}
  .paso:not(.on){display:none}
  .paso h3{font-size:25px} .paso p{font-size:15px}
  .fono{order:1;width:248px} .pant{height:462px}
  .cif{margin-top:30px}
  .planes{gap:14px;margin-top:30px}
  .plan{padding:22px 20px}
  .bp{height:50px;width:100%;max-width:320px} .bs{padding:0 22px}
  .bento{gap:10px;margin-top:30px}
  .bx{padding:17px}
  footer{padding:20px 0}
  .f-in{gap:10px}
  .f-in nav{margin-left:0;width:100%;gap:4px;flex-wrap:wrap}
  .f-in nav a{flex:1;min-width:104px;text-align:center;background:rgba(255,255,255,.08)}
}
@media(max-width:420px){.cif{grid-template-columns:1fr}.cif div{border-right:0}}

@media(prefers-reduced-motion:reduce){
  .ap{opacity:1;transform:none;transition:none}
  #hero .tab{transform:none}
  .pin{height:auto}.pin-st{position:static;height:auto;padding:60px 0}
  .paso{position:static;opacity:1;transform:none;margin-bottom:36px}
  .vp{position:static;opacity:1;transform:none}
  .pant{height:auto}.tab-h .v u{animation:none}
}