/* Hola Chef · landing. La página es la carta: hojas de papel sobre fondo negro, una sola tinta de acento. */
:root{
  --campo:#0D0D0D;      /* fondo negro de la marca */
  --papel:#F2F2F2;      /* hoja */
  --papel-2:#E2E2E2;    /* un tono más: mesa, segunda página */
  --blanco:#FFFFFF;
  --tinta:#0D0D0D;
  --tinta-2:#45443F;    /* texto secundario sobre papel (contraste > 8:1) */
  --claro:#F2F2F2;      /* texto sobre negro */
  --claro-2:#BDBDBD;    /* bajada sobre negro */
  --acento:#EE5F28;     /* naranja de marca: la acción */
  --acento-hondo:#B9431A;
  --foto:#D6D6D6;       /* gris del fondo de las fotos de platos */
  --wa-fondo:#0B141A; --wa-in:#1F2C34; --wa-out:#005C4B; --wa-txt:#E9EDEF; --wa-sub:#9AA8B1;

  --f-titulo:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-texto:"Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* cinco tamaños */
  --t-1:clamp(38px, 4.2vw, 60px);   /* h1 */
  --t-2:clamp(30px, 3.3vw, 46px);   /* h2 */
  --t-3:clamp(20px, 1.7vw, 24px);   /* frase grande, h3 */
  --t-4:17px;                        /* texto */
  --t-5:14px;                        /* notas */

  --margen:clamp(16px, 3vw, 40px);
  --ancho:1240px;
  --sep:clamp(96px, 12vw, 176px);
  --radio:999px;
  --mov:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--acento);color:var(--tinta);font:400 var(--t-4)/1.55 var(--f-texto);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titulo);font-stretch:80%;margin:0;letter-spacing:-.02em;line-height:1}
h1{font-size:var(--t-1);font-weight:850;line-height:.98;letter-spacing:-.03em}
h2{font-size:var(--t-2);font-weight:820}
h3{font-size:var(--t-3);font-weight:760;line-height:1.15;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
::selection{background:var(--acento);color:var(--tinta)}

.saltar{position:absolute;left:-999px;top:8px;z-index:50;background:var(--blanco);padding:10px 14px}
.saltar:focus{left:8px}
.marco{width:min(var(--ancho), 100% - 2*var(--margen));margin-inline:auto}

/* ---------- botones (una sola forma: redondo completo) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--radio);
  font:700 var(--t-4)/1 var(--f-texto);text-decoration:none;border:0;cursor:pointer;
  transition:transform .18s var(--mov), background-color .18s, color .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-wa{background:var(--acento);color:var(--tinta)}
.btn-wa:hover{background:#F27443}
.btn-sec{background:var(--papel-2);color:var(--tinta)}
.btn-sec:hover{background:#D6D3CB}
.btn-tinta{background:var(--tinta);color:var(--claro)}
.btn-tinta:hover{background:#2A2A28}
.btn-chico{min-height:42px;padding:0 18px;font-size:15px;background:var(--acento);color:var(--tinta)}
.btn-link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 6px;font-weight:700;color:var(--tinta);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--tinta-2);transition:text-decoration-color .15s}
.btn-link:hover{text-decoration-color:var(--acento)}

/* ---------- telón: el contenido sube y deja ver el pie ---------- */
.telon{position:relative;z-index:1;background:var(--campo)}

/* ---------- barra ---------- */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:12px var(--margen);background:var(--campo);color:var(--claro)}
.marca{font:850 22px/1 var(--f-titulo);font-stretch:80%;letter-spacing:-.01em;text-decoration:none;color:var(--claro)}
.nav{display:flex;gap:28px}
.nav a{font-size:15px;font-weight:500;color:var(--claro);padding:6px 0;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .2s}
.nav a:hover{text-decoration-color:var(--acento)}

/* ---------- 1. la carta abierta ---------- */
.hero{padding:clamp(28px, 5vw, 64px) var(--margen) clamp(48px, 6vw, 88px);background:var(--campo)}
.carta{position:relative;width:min(1240px, 100%);margin-inline:auto;display:grid;grid-template-columns:1.12fr .88fr;background:var(--papel)}
/* esquinas recortadas como la carta impresa */
.carta::before,.carta::after{content:"";position:absolute;top:-16px;width:32px;height:32px;border-radius:50%;background:var(--campo);z-index:2}
.carta::before{left:-16px}.carta::after{right:-16px}
.pagina{padding:clamp(28px, 4.4vw, 64px)}
.pagina-izq{display:flex;flex-direction:column;gap:28px}
.pagina-der{background:var(--papel-2);display:flex;flex-direction:column;gap:14px;padding-inline:clamp(20px, 2.4vw, 36px)}
.hero h1{max-width:17ch}
.bajada{font-size:var(--t-3);line-height:1.4;max-width:30ch;margin-top:4px}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.micro{font-size:var(--t-5);color:var(--tinta-2);margin-top:-14px}
.acciones{align-items:center}
.hechos{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;max-width:620px}
.hechos > div{background:var(--papel-2);padding:16px 18px;display:grid;gap:4px;align-content:start}
.hechos > div:first-child{background:var(--tinta);color:var(--claro)}
.hechos dt{font:800 21px/1.15 var(--f-titulo);font-stretch:80%}
.hechos dd{margin:0;font-size:15px;line-height:1.45}
.hechos > div:first-child dd{color:var(--claro-2)}
.qr-bloque{display:flex;gap:18px;align-items:center;margin-top:12px;padding:18px;background:var(--papel-2);align-self:start}
.qr-bloque p{font-size:var(--t-5);color:var(--tinta-2);max-width:28ch;line-height:1.45}
.qr-bloque a{color:var(--tinta);font-weight:700;text-underline-offset:3px}
.qr{width:112px;height:112px;flex:none;background:var(--blanco);padding:8px}
.qr img,.qr canvas{width:100%!important;height:100%!important;image-rendering:pixelated}

.plato-3d{margin:0;position:relative;background:var(--foto)}
model-viewer{display:block;width:100%;aspect-ratio:1/1;height:auto;background:var(--foto);--poster-color:var(--foto);--progress-bar-color:var(--acento)}
.plato-foto{width:100%;aspect-ratio:1/1;object-fit:cover}
.plato-3d figcaption{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:14px 18px;background:var(--tinta);color:var(--claro);
  font:760 var(--t-3)/1.15 var(--f-titulo);font-stretch:80%}
.btn-ar{position:absolute;right:14px;top:14px;min-height:44px;padding:0 18px;border:0;border-radius:var(--radio);background:var(--tinta);color:var(--claro);font:700 15px/1 var(--f-texto);cursor:pointer}
.nota-demo{font-size:var(--t-5);color:var(--tinta-2)}
.lista-platos{list-style:none;margin:6px 0 0;padding:0;display:grid}
.lista-platos button{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 12px;margin:0 -12px;width:calc(100% + 24px);
  border:0;background:transparent;font:500 var(--t-4)/1.3 var(--f-texto);color:var(--tinta);text-align:left;cursor:pointer;border-radius:8px;transition:background-color .15s, transform .15s}
.lista-platos button:hover{background:rgba(13,13,13,.06)}
.lista-platos button:active{transform:scale(.99)}
.lista-platos .p{font-variant-numeric:tabular-nums;font-weight:700}
.lista-platos button[aria-pressed="true"]{background:var(--tinta);color:var(--claro)}

/* ---------- 2. lo que se va ---------- */
.problema{background:var(--papel-2);padding:var(--sep) 0}
.problema-grilla{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px, 6vw, 96px);align-items:center}
.problema-texto{display:grid;gap:22px}
.problema-texto h2{margin-bottom:10px}
.problema-texto p{font-size:var(--t-3);line-height:1.4;max-width:34ch}
.problema-texto strong{font-weight:700}
.ticket{background:var(--blanco);padding:44px clamp(24px, 3vw, 40px) 48px;max-width:460px;justify-self:end;width:100%;
  clip-path:polygon(0.000% 9px,2.778% 0,5.556% 9px,8.333% 0,11.111% 9px,13.889% 0,16.667% 9px,19.444% 0,22.222% 9px,25.000% 0,27.778% 9px,30.556% 0,33.333% 9px,36.111% 0,38.889% 9px,41.667% 0,44.444% 9px,47.222% 0,50.000% 9px,52.778% 0,55.556% 9px,58.333% 0,61.111% 9px,63.889% 0,66.667% 9px,69.444% 0,72.222% 9px,75.000% 0,77.778% 9px,80.556% 0,83.333% 9px,86.111% 0,88.889% 9px,91.667% 0,94.444% 9px,97.222% 0,100.000% 9px,100.000% calc(100% - 9px),97.222% 100%,94.444% calc(100% - 9px),91.667% 100%,88.889% calc(100% - 9px),86.111% 100%,83.333% calc(100% - 9px),80.556% 100%,77.778% calc(100% - 9px),75.000% 100%,72.222% calc(100% - 9px),69.444% 100%,66.667% calc(100% - 9px),63.889% 100%,61.111% calc(100% - 9px),58.333% 100%,55.556% calc(100% - 9px),52.778% 100%,50.000% calc(100% - 9px),47.222% 100%,44.444% calc(100% - 9px),41.667% 100%,38.889% calc(100% - 9px),36.111% 100%,33.333% calc(100% - 9px),30.556% 100%,27.778% calc(100% - 9px),25.000% 100%,22.222% calc(100% - 9px),19.444% 100%,16.667% calc(100% - 9px),13.889% 100%,11.111% calc(100% - 9px),8.333% 100%,5.556% calc(100% - 9px),2.778% 100%,0.000% calc(100% - 9px));
  transform:rotate(1.2deg)}
.ticket h3{text-align:center}
.ticket-sub{text-align:center;font-size:var(--t-5);color:var(--tinta-2);margin:6px 0 24px}
.ticket dl{margin:0;display:grid;gap:14px}
.ticket dl div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.ticket dt{font-size:16px;max-width:22ch}
.ticket dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ticket .total{padding-top:12px}
.ticket .total dt,.ticket .total dd{font-family:var(--f-titulo);font-stretch:80%;font-weight:820;font-size:var(--t-3)}
.ticket-sep{color:var(--tinta-2);text-align:center;letter-spacing:.1em;overflow:hidden;white-space:nowrap;margin:20px 0;min-width:0;max-width:100%}
.ticket .nos dd{background:var(--acento);padding:4px 10px}
.ticket .nos dt{font-weight:700}
.ticket-nota{font-size:var(--t-5);color:var(--tinta-2);margin-top:22px}

/* ---------- 3. cómo funciona ---------- */
.como{background:var(--papel);padding:var(--sep) 0}
.como-cabeza{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.como-cabeza p{font-size:var(--t-3);line-height:1.4;max-width:30ch}
.progreso{display:none;width:min(var(--ancho), 100% - 2*var(--margen));margin:28px auto 0;height:6px;background:var(--papel-2)}
.progreso span{display:block;height:100%;width:33.4%;background:var(--tinta);transition:width .25s}
.momentos{list-style:none;margin:40px auto 0;padding:0 var(--margen);width:min(var(--ancho) + 2*var(--margen), 100%);
  display:grid;grid-template-columns:repeat(3, 1fr);gap:32px}
.momento{display:flex;flex-direction:column}
.momento p{color:var(--tinta);margin-top:10px;max-width:32ch}
.momento:nth-child(1) .momento-img{margin-top:40px}
.momento:nth-child(2) .momento-img{margin-top:112px}
.momento:nth-child(3) .momento-img{margin-top:72px}
.momento-img{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--papel-2)}
.m-wa{background:#0B141A;display:flex;align-items:center;justify-content:flex-end;padding:22px}
.wa-burbuja-foto{background:var(--wa-out);padding:5px;border-radius:10px 10px 2px 10px;width:82%;color:var(--wa-txt)}
.wa-burbuja-foto img{border-radius:7px;aspect-ratio:1/1;object-fit:cover}
.wa-burbuja-foto span{display:flex;justify-content:space-between;gap:8px;padding:7px 5px 3px;font-size:15px}
.wa-burbuja-foto small{color:#B8DDD5;font-size:12.5px;align-self:end}
.m-3d img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.m-qr{background:var(--campo);display:grid;place-items:center}
.atril{background:var(--blanco);width:70%;padding:22px 18px 20px;display:grid;justify-items:center;gap:8px;text-align:center;transform:rotate(-2deg)}
.atril .qr{width:68%;height:auto;aspect-ratio:1/1;padding:0;margin-bottom:6px}
.atril strong{font:820 20px/1.1 var(--f-titulo);font-stretch:80%}
.atril span{font-size:var(--t-5);color:var(--tinta-2)}

/* ---------- 4. pedidos ---------- */
.pedidos{background:var(--acento);padding:var(--sep) 0 0;overflow:hidden}
.pedidos-grilla{display:grid;grid-template-columns:1fr minmax(320px, 380px) 260px;gap:clamp(28px, 4vw, 64px);align-items:start}
.pedidos-texto{display:grid;gap:20px;padding-bottom:var(--sep)}
.pedidos-texto h2{margin-bottom:8px}
.pedidos-texto p{max-width:40ch}
.pedidos-texto p:nth-of-type(1){font-size:var(--t-3);line-height:1.4}
.pedidos-demo{display:grid;gap:14px;justify-items:center}
.asi{font-weight:700;font-size:var(--t-5)}
.telefono{width:100%;max-width:380px;background:var(--wa-fondo);color:var(--wa-txt);border:10px solid var(--tinta);border-radius:40px;overflow:hidden;
  display:flex;flex-direction:column;height:640px}
.tel-cabeza{display:flex;gap:12px;align-items:center;background:#1F2C34;padding:14px 16px}
.tel-cabeza strong{display:block;font-size:16px}
.tel-cabeza small{display:block;font-size:13px;color:var(--wa-sub)}
.tel-avatar{width:38px;height:38px;border-radius:50%;background:var(--acento);color:var(--tinta);display:grid;place-items:center;font-weight:700;font-size:14px}
.chat{list-style:none;margin:0;padding:14px 12px 20px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1;scroll-behavior:smooth;font-size:15px;line-height:1.38}
.m{max-width:84%;padding:7px 10px 6px;border-radius:10px;position:relative}
.m time{display:block;text-align:right;font-size:11.5px;color:var(--wa-sub);margin-top:2px}
.m.in{align-self:flex-start;background:var(--wa-in);border-top-left-radius:2px}
.m.out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:2px}
.m.out time{color:#B8DDD5}
.mp{display:grid;margin-top:8px;background:#0B141A;border-radius:8px;padding:10px 12px;gap:3px}
.mp-tit{font-size:13px;color:var(--wa-sub)}
.mp-monto{font-weight:700;color:#53BDEB}
.aviso{align-self:center;background:#182229;color:#FFD279;font-size:13px;padding:5px 12px;border-radius:8px;margin:4px 0}
.escribiendo{align-self:flex-start;background:var(--wa-in);border-radius:10px;padding:10px 14px;display:flex;gap:4px}
.escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--wa-sub);animation:punto 1s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes punto{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.js .chat .m,.js .chat .aviso{display:none}
.js .chat .ver{display:block;animation:entra .32s var(--mov) both}
@keyframes entra{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.btn-repetir{min-height:46px;padding:0 20px;border-radius:var(--radio);border:0;background:var(--tinta);color:var(--claro);font:700 15px/1 var(--f-texto);cursor:pointer;transition:transform .15s}
.btn-repetir:hover{transform:translateY(-2px)}
.btn-repetir:active{transform:scale(.97)}
.comanda{align-self:end;background:var(--blanco);color:var(--tinta);padding:26px 22px 60px;font-size:15px;line-height:1.5;transform:rotate(-1.5deg);margin-bottom:-24px;
  clip-path:polygon(0.000% 9px,2.778% 0,5.556% 9px,8.333% 0,11.111% 9px,13.889% 0,16.667% 9px,19.444% 0,22.222% 9px,25.000% 0,27.778% 9px,30.556% 0,33.333% 9px,36.111% 0,38.889% 9px,41.667% 0,44.444% 9px,47.222% 0,50.000% 9px,52.778% 0,55.556% 9px,58.333% 0,61.111% 9px,63.889% 0,66.667% 9px,69.444% 0,72.222% 9px,75.000% 0,77.778% 9px,80.556% 0,83.333% 9px,86.111% 0,88.889% 9px,91.667% 0,94.444% 9px,97.222% 0,100.000% 9px,100% 100%,0 100%)}
.comanda-tit{font:820 24px/1.1 var(--f-titulo);font-stretch:80%;margin-top:6px}
.comanda-sub{font-weight:700;margin-bottom:4px}
.comanda-sep{color:var(--tinta-2);letter-spacing:.08em;overflow:hidden;white-space:nowrap}
.comanda-total{font-weight:700;font-size:var(--t-4)}
.comanda-dir{color:var(--tinta-2);font-size:var(--t-5);margin-top:8px}
.comanda{transition:transform .8s var(--mov), opacity .5s}
.comanda.espera{opacity:0;transform:translateY(60px) rotate(-1.5deg)}

/* ---------- 5. panel ---------- */
.panel{background:var(--papel);padding:var(--sep) 0}
.panel-grilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px, 5vw, 80px)}
.panel-vista{background:var(--campo);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:48px 24px}
.telefono-claro{background:var(--papel);color:var(--tinta);height:600px;max-width:360px}
.pv-cabeza{display:flex;justify-content:space-between;align-items:baseline;padding:18px 18px 10px;background:var(--blanco)}
.pv-cabeza strong{font:850 20px/1 var(--f-titulo);font-stretch:80%}
.pv-cabeza span{font-size:13px;color:var(--tinta-2)}
.pv{padding:14px 12px;overflow:auto;flex:1}
.pv[hidden]{display:none}
.pv-tit{font:800 19px/1.1 var(--f-titulo);font-stretch:80%;margin:4px 4px 12px;display:flex;align-items:center;gap:8px}
.cuenta{background:var(--acento);color:var(--tinta);font:700 13px/1 var(--f-texto);padding:4px 8px;border-radius:999px}
.pv-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pv-lista li{background:var(--blanco);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:14px;line-height:1.35}
.pv-lista li b{font-size:15px}
.pv-lista li span{color:var(--tinta-2);grid-column:1}
.pv-lista li em{font-style:normal;font-weight:700;grid-column:2;grid-row:2;align-self:end}
.pv-lista .est{grid-column:1/-1;justify-self:start;font-weight:700;font-size:12.5px;padding:3px 9px;border-radius:999px;margin-bottom:4px;color:var(--tinta)}
.est-nuevo{background:var(--acento)}
.est-cocina{background:#F6C445}
.est-salio{background:#9ED3F5}
.est-ok{background:var(--papel-2)}
.est-reclamo{background:var(--acento)}
.est-preg{background:#F6C445}
.pv-charlas li em{grid-row:1;font-weight:500;color:var(--tinta-2);font-size:13px}
.pv-vos li{grid-template-columns:1fr}
.pv-abierta{background:var(--blanco);margin-top:8px;padding:12px 14px 14px;display:grid;gap:8px;font-size:14px;line-height:1.35}
.pv-quien{display:flex;justify-content:space-between}
.pv-quien em{font-style:normal;color:var(--tinta-2);font-size:13px}
.pb{max-width:86%;padding:7px 10px;border-radius:10px}
.pb-cli{background:var(--papel-2);justify-self:start;border-top-left-radius:2px}
.pb-ia{background:var(--tinta);color:var(--claro);justify-self:end;border-top-right-radius:2px}
.pv-derivado{justify-self:center;background:var(--acento);font-weight:700;font-size:12.5px;padding:3px 10px;border-radius:999px}
.pv-btn{margin-top:8px;justify-self:start;background:var(--tinta);color:var(--claro)!important;font-weight:700;padding:8px 12px;border-radius:999px;font-size:13px}
.nota-clara{color:var(--claro-2)}
.nota-clara a{color:inherit;font-weight:700;text-underline-offset:3px}
.panel-texto{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.pestanas{display:flex;gap:6px;flex-wrap:wrap}
.pestanas button{border:0;background:transparent;font:600 18px/1 var(--f-texto);color:var(--tinta-2);padding:12px 14px;border-radius:var(--radio);cursor:pointer;transition:background-color .15s, color .15s}
.pestanas button:hover{background:var(--papel-2);color:var(--tinta)}
.pestanas button[aria-selected="true"]{background:var(--tinta);color:var(--claro)}
.panel-medio{display:grid;gap:20px}
.panel-medio h2{margin-bottom:8px}
.panel-medio p{max-width:38ch}
.panel-medio p:first-of-type{font-size:var(--t-3);line-height:1.4}
.celdas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.celda{display:flex;align-items:center;justify-content:center;text-align:center;min-height:72px;padding:0 16px;font-weight:700;text-decoration:none;border-radius:var(--radio);transition:transform .15s, background-color .15s}
.celda:hover{transform:translateY(-2px)}
.celda:active{transform:scale(.98)}
.celda-tinta{background:var(--acento);color:var(--tinta)}
.celda-tono{background:var(--papel-2);color:var(--tinta)}

/* ---------- 6. precios ---------- */
.precios{background:var(--campo);padding:var(--sep) var(--margen)}
.hoja-precios{position:relative;width:min(var(--ancho), 100%);margin-inline:auto;background:var(--papel);display:grid;grid-template-columns:3fr 9fr;gap:clamp(32px, 5vw, 72px);padding:clamp(28px, 5vw, 72px)}
.hoja-precios::before,.hoja-precios::after{content:"";position:absolute;top:-16px;width:32px;height:32px;border-radius:50%;background:var(--campo)}
.hoja-precios::before{left:-16px}.hoja-precios::after{right:-16px}
.precios-cabeza{display:flex;flex-direction:column;gap:18px}
.precios-cabeza p{color:var(--tinta-2)}
.precios-cabeza img{width:80%;aspect-ratio:4/5;object-fit:cover;margin-top:12px}
.precios-lista{display:grid;grid-template-columns:1fr 1fr;gap:48px 56px;align-items:start}
.grupo{display:grid;gap:12px;align-content:start}
.grupo h3{font-size:var(--t-3)}
.grupo-desc{color:var(--tinta);max-width:38ch}
.grupo ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px}
.grupo li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:18px}
.grupo li span:last-child{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.grupo-destacado{grid-row:span 2;background:var(--acento);padding:32px;margin:-8px 0}
.grupo-destacado .grupo-desc{color:var(--tinta)}
.grupo-destacado li{font-size:20px}
.grupo-destacado li span:last-child{font-family:var(--f-titulo);font-stretch:80%;font-weight:850;font-size:clamp(24px, 2vw, 28px)}
.grupo-destacado .btn{margin-top:14px;justify-self:start}
.grupo-reco{font-weight:700}
.link-grupo{font-weight:700;justify-self:start;margin-top:6px;text-decoration-thickness:2px;text-underline-offset:4px;padding:6px 0}
.link-grupo:hover{text-decoration-color:var(--acento)}
.lanzamiento{width:min(var(--ancho), 100%);margin:24px auto 0;background:var(--acento);color:var(--tinta);padding:clamp(28px, 4vw, 48px) clamp(24px, 5vw, 72px);
  display:grid;grid-template-columns:1.2fr 1fr;gap:12px 56px;align-items:center}
.lanzamiento h3{font-size:var(--t-2);font-weight:820;line-height:1.02;letter-spacing:-.02em;grid-column:1}
.lanzamiento > p{grid-column:1;font-size:var(--t-3)}
.lanzamiento ul{grid-column:2;grid-row:1/span 3;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lanzamiento li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;font-size:17px}
.lanzamiento s{color:var(--tinta);font-variant-numeric:tabular-nums}
.lanzamiento b{font:850 24px/1 var(--f-titulo);font-stretch:80%;font-variant-numeric:tabular-nums}
.lanzamiento .btn{grid-column:1;justify-self:start;margin-top:10px}

/* ---------- 7. preguntas ---------- */
.preguntas{background:var(--papel);padding:var(--sep) 0}
.preguntas-grilla{display:grid;grid-template-columns:3fr 9fr;gap:clamp(32px, 5vw, 72px)}
.preguntas-cabeza{display:grid;gap:16px;align-content:start;position:sticky;top:96px}
.preguntas-cabeza p{color:var(--tinta-2);max-width:24ch}
.respuestas{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
.respuestas details{background:var(--blanco)}
.respuestas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:64px;padding:16px 18px;font-weight:700;font-size:var(--t-4);line-height:1.3;transition:background-color .15s}
.respuestas summary::-webkit-details-marker{display:none}
.respuestas summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--papel-2);display:grid;place-items:center;
  font:700 20px/1 var(--f-texto);transition:transform .2s var(--mov), background-color .15s}
.respuestas summary:hover{background:#FAFAFA}
.respuestas details[open] summary::after{transform:rotate(45deg);background:var(--acento)}
.respuestas details p{padding:0 18px 18px;line-height:1.55;max-width:60ch}
.respuestas details a{font-weight:700;text-underline-offset:3px}
.preguntas-cierre{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(40px, 5vw, 64px);justify-content:flex-end}
.preguntas-cierre p{font:800 var(--t-3)/1.2 var(--f-titulo);font-stretch:80%;margin-right:auto}

/* ---------- 8. cierre ---------- */
.cierre{background:var(--campo);color:var(--claro);padding:var(--sep) 0 0;overflow:hidden}
.cierre-grilla{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px, 5vw, 80px);align-items:end;min-height:min(80svh, 760px)}
.cierre-texto{font-size:clamp(22px, 2vw, 28px);line-height:1.35;max-width:22ch;padding-bottom:96px}
.tarjeta{background:var(--papel);color:var(--tinta);padding:clamp(32px, 4vw, 56px);text-align:center;transform:rotate(-2deg);margin-bottom:-60px;
  display:grid;gap:18px;justify-items:center;max-width:680px;justify-self:end;width:100%;padding-bottom:110px}
.tarjeta h2{font-size:var(--t-2)}
.tarjeta p{font-size:var(--t-4);max-width:36ch}
.barra-accion{display:flex;align-items:center;justify-content:center;width:100%;min-height:60px;background:var(--acento);color:var(--tinta);font:700 18px/1 var(--f-texto);text-decoration:none;border-radius:var(--radio);transition:transform .15s, background-color .15s}
.barra-accion:hover{background:#F27443;transform:translateY(-2px)}
.barra-accion:active{transform:scale(.98)}
.tarjeta-chica{font-size:var(--t-5)!important;color:var(--tinta-2)}

/* ---------- pie (debajo del telón) ---------- */
.pie{position:sticky;bottom:0;z-index:0;background:var(--acento);color:var(--tinta);padding:56px var(--margen) 40px}
.pie-marca{font:900 clamp(56px, 12vw, 200px)/.9 var(--f-titulo);font-stretch:75%;letter-spacing:-.04em;margin-bottom:28px;overflow-wrap:anywhere}
.pie-fila{display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;font-size:15px}
.pie a{font-weight:700;text-underline-offset:3px}

/* ---------- botón flotante (solo celular) ---------- */
.flota{display:none}

/* ---------- entradas ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--mov), transform .6s var(--mov);transition-delay:var(--d, 0ms)}
.js .rv.in{opacity:1;transform:none}
/* La primera vista no espera a la animación: titular y botones se ven al instante. */
.js .hero .rv{opacity:1;transform:none;transition:none}
.js .ticket.rv{transform:translateY(24px) rotate(1.2deg)}
.js .ticket.rv.in{transform:rotate(1.2deg)}
.js .tarjeta.rv{transform:translateY(40px) rotate(-2deg)}
.js .tarjeta.rv.in{transform:rotate(-2deg)}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .pedidos-grilla{grid-template-columns:1fr 1fr}
  .pedidos-texto{grid-column:1/-1;padding-bottom:0}
  .pedidos-texto h2{max-width:none}
  .comanda{margin-bottom:-24px}
  .precios-lista{grid-template-columns:1fr}
  .grupo-destacado{grid-row:auto;margin:0}
}
@media (max-width:900px){
  .nav{display:none}
  .carta{grid-template-columns:1fr}
  .hero h1{max-width:14ch}
  .bajada{max-width:34ch}
  .qr-bloque{display:none}
  .problema-grilla{grid-template-columns:minmax(0,1fr)}
  .ticket{justify-self:start}
  .panel-grilla{grid-template-columns:1fr;min-height:0}
  .panel-grilla{gap:24px}
  .panel-texto{display:contents}
  .panel-medio{order:1}
  .pestanas{order:2;margin-top:8px}
  .panel-vista{order:3}
  .celdas{order:4;margin-top:8px}
  .hoja-precios{grid-template-columns:1fr}
  .precios-cabeza img{display:none}
  .preguntas-grilla{grid-template-columns:1fr}
  .preguntas-cabeza{position:static}
  .respuestas{grid-template-columns:1fr}
  .cierre-grilla{grid-template-columns:1fr;min-height:0}
  .cierre-texto{padding-bottom:0}
  .tarjeta{justify-self:center;width:94%}
  .lanzamiento{grid-template-columns:1fr}
  .lanzamiento ul{grid-column:1;grid-row:auto}
}

/* ---------- celular ---------- */
@media (max-width:640px){
  :root{--t-4:16px;--sep:88px}
  .barra{padding:10px 16px}
  .hero{padding:12px 12px 72px}
  .pagina{padding:24px 20px}
  .pagina-izq{gap:20px}
  .hero h1{font-size:clamp(34px, 10vw, 44px)}
  .bajada{font-size:18px}
  .acciones{flex-direction:column;gap:2px}
  .acciones .btn{width:100%;min-height:58px;font-size:18px}
  .hechos{grid-template-columns:1fr}
  .btn-chico{padding:0 14px;font-size:14px}
  .pagina-der{padding-top:8px}
  .marco{width:calc(100% - 32px)}
  .ticket{transform:rotate(.6deg)}
  .js .ticket.rv.in{transform:rotate(.6deg)}
  .progreso{display:block}
  .momentos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;gap:16px;padding:0 16px 8px;scrollbar-width:none}
  .momentos::-webkit-scrollbar{display:none}
  .momento{flex:0 0 76vw;scroll-snap-align:start}
  .momento:nth-child(1) .momento-img{margin-top:24px}
  .momento:nth-child(2) .momento-img{margin-top:56px}
  .momento:nth-child(3) .momento-img{margin-top:40px}
  .pedidos-grilla{grid-template-columns:1fr}
  .telefono{height:580px;max-width:340px}
  .comanda{width:84%;justify-self:center}
  .panel-vista{padding:32px 12px}
  .telefono-claro{height:540px}
  .celdas{grid-template-columns:1fr}
  .celda{min-height:60px}
  .precios{padding:72px 12px}
  .hoja-precios{padding:28px 20px}
  .grupo-destacado{padding:24px 20px;margin:0 -8px}
  .grupo li{font-size:16px}
  .grupo-destacado li{font-size:17px}
  .lanzamiento{padding:28px 20px}
  .lanzamiento li{grid-template-columns:1fr auto;font-size:15px}
  .lanzamiento li span{grid-column:1/-1}
  .respuestas summary{min-height:58px;padding:14px 16px}
  .respuestas details p{padding:0 16px 16px}
  .preguntas-cierre{flex-direction:column;align-items:stretch}
  .preguntas-cierre .btn{width:100%}
  .tarjeta{transform:rotate(-1deg);padding:32px 22px 96px}
  .js .tarjeta.rv.in{transform:rotate(-1deg)}
  .pie{padding:40px 16px 96px}
  .flota{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;gap:8px;
    transition:transform .25s var(--mov), opacity .25s}
  .flota a{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:var(--radio);font-weight:700;text-decoration:none;outline:3px solid var(--tinta);outline-offset:0}
  .flota-prueba{flex:1;background:var(--acento);color:var(--tinta);font-size:17px}
  .flota-wa{flex:none;width:54px;background:var(--blanco);color:var(--tinta)}
  .flota a:active{transform:scale(.97)}
  .js .flota{opacity:0;transform:translateY(90px);pointer-events:none}
  .js .flota.ver{opacity:1;transform:none;pointer-events:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
}

/* =================== v2 =================== */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* aviso de pedido sobre el plato: la IA trabajando */
.aviso-pedido{position:absolute;left:14px;top:14px;z-index:2;max-width:min(300px, calc(100% - 28px));display:grid;gap:2px;
  background:var(--wa-in);color:var(--wa-txt);padding:10px 14px 11px;border-radius:12px;font-size:14px;line-height:1.35;
  transition:transform .5s var(--mov), opacity .4s}
.aviso-pedido b{font-size:14.5px}
.aviso-pedido span{color:var(--wa-sub)}
.aviso-pedido .pagado{color:#FFD279;font-weight:700}
.js .aviso-pedido.espera{opacity:0;transform:translateY(-12px)}

/* ---------- 2. promo de lanzamiento ---------- */
.promo{background:var(--acento);color:var(--tinta);padding:clamp(40px, 5vw, 64px) 0}
.promo-grilla{display:grid;grid-template-columns:minmax(0,1.25fr) auto auto;gap:24px clamp(28px, 4vw, 56px);align-items:center}
.promo-texto{display:grid;gap:12px}
.promo h2{font-size:clamp(24px, 2.4vw, 34px);line-height:1.05;max-width:22ch}
.promo-texto p{font-size:var(--t-4);max-width:46ch}
.promo-texto b{font-weight:700}
.promo-texto s{color:var(--tinta)}
.reloj-caja{display:grid;gap:8px}
.reloj{display:flex;gap:6px}
.reloj span{display:grid;justify-items:center;min-width:68px;padding:10px 6px 8px;background:var(--tinta);color:var(--claro)}
.reloj b{font:850 clamp(30px, 3vw, 40px)/1 var(--f-titulo);font-stretch:80%;font-variant-numeric:tabular-nums}
.reloj small{font-size:12.5px;color:var(--claro-2);margin-top:4px}
.reloj-nota{font-size:13px;color:#3A1A0B;max-width:30ch}
.promo-btn{justify-self:end}

/* ---------- 4. la IA ---------- */
.hace{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;max-width:640px}
.hace li{padding-left:18px;position:relative;line-height:1.4}
.hace li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--tinta);border-radius:50%}
.hace b{font-weight:700}
.incluida{background:var(--tinta);color:var(--claro);padding:18px 20px;max-width:46ch;font-size:var(--t-4)!important;line-height:1.5!important}
.incluida strong{color:var(--acento)}

/* ---------- 7. precios: moneda ---------- */
.moneda{border:0;margin:0;padding:0;display:grid;gap:8px}
.moneda legend{padding:0;font-weight:700;font-size:15px;margin-bottom:8px}
.moneda-ops{display:flex;flex-wrap:wrap;gap:6px;background:var(--papel-2);padding:5px;border-radius:var(--radio);width:max-content;max-width:100%}
.moneda label{position:relative;cursor:pointer}
.moneda input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.moneda label span{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--radio);font-weight:700;font-size:15px;color:var(--tinta-2);transition:background-color .15s, color .15s}
.moneda label:hover span{color:var(--tinta)}
.moneda input:checked + span{background:var(--tinta);color:var(--claro)}
.moneda input:focus-visible + span{outline:3px solid var(--acento);outline-offset:2px}
.precio-ia{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:4px}
.precio-ia s{font:760 24px/1 var(--f-titulo);font-stretch:80%;color:var(--tinta)}
.precio-ia b{font:900 clamp(48px, 5vw, 68px)/.95 var(--f-titulo);font-stretch:78%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.precio-ia > span{font-weight:700;font-size:18px}
.precio-cond{font-weight:700;max-width:40ch}
.reloj-mini{background:var(--tinta);color:var(--claro);padding:1px 7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.grupo-destacado .micro{margin-top:-2px;color:var(--tinta)}

/* ---------- 8. prueba gratis: explica y manda a /empezar ---------- */
.prueba{background:var(--acento);padding:var(--sep) 0}
.prueba-grilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:clamp(40px, 6vw, 96px);align-items:start}
.prueba-texto{display:grid;gap:28px;position:sticky;top:96px}
.prueba-bajada{font-size:var(--t-3);line-height:1.4;max-width:30ch}
.a-mano{display:grid;gap:14px;max-width:460px}
.a-mano h3{font-size:var(--t-3)}
.a-mano ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.a-mano li{padding-left:22px;position:relative;line-height:1.45}
.a-mano li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;background:var(--tinta)}
.a-mano a{font-weight:700;text-underline-offset:3px;text-decoration-thickness:2px;white-space:nowrap}
.arranque{background:var(--blanco);padding:clamp(28px, 3.6vw, 48px);display:grid;gap:22px}
.arranque h3{font-size:clamp(26px, 2.4vw, 34px);font-weight:820}
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:20px;counter-reset:paso}
.pasos li{display:grid;grid-template-columns:44px 1fr;gap:2px 16px;counter-increment:paso}
.pasos li::before{content:counter(paso);grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--tinta);color:var(--claro);
  display:grid;place-items:center;font:850 22px/1 var(--f-titulo);font-stretch:80%}
.pasos b{font:800 21px/1.2 var(--f-titulo);font-stretch:80%;align-self:end}
.pasos span{color:var(--tinta-2);line-height:1.45}
.arranque-btn{width:100%;min-height:62px;font-size:19px;margin-top:6px}
.arranque-nota{font-size:var(--t-5);color:var(--tinta-2);text-align:center;margin-top:-8px}
.arranque-wa{justify-self:center;font-weight:700;text-underline-offset:4px;text-decoration-thickness:2px;padding:10px 4px;min-height:44px}
.arranque-wa:hover{text-decoration-color:var(--acento)}

/* ---------- cierre ---------- */
.link-wa{font-weight:700;text-underline-offset:4px;padding:6px 0}
.link-wa:hover{text-decoration-color:var(--acento)}

@media (max-width:1080px){
  .promo-grilla{grid-template-columns:1fr auto}
  .promo-btn{grid-column:1/-1;justify-self:start}
  .prueba-grilla{grid-template-columns:1fr}
  .prueba-texto{position:static}
}
@media (max-width:900px){
  .hace{grid-template-columns:1fr}
}
@media (max-width:640px){
  .micro{margin-top:-8px}
  .aviso-pedido{left:10px;top:10px;font-size:13px;padding:8px 12px}
  .aviso-pedido b{font-size:13.5px}
  .promo{padding:36px 0 40px}
  .promo-grilla{grid-template-columns:1fr;gap:20px}
  .reloj span{min-width:0;flex:1}
  .promo-btn{width:100%}
  .moneda-ops{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:26px}
  .moneda label span{justify-content:center;padding:0 4px;font-size:14px;white-space:nowrap}
  .precio-ia b{font-size:54px}
  .arranque{padding:28px 18px 24px;margin-inline:-4px}
  .pasos li{grid-template-columns:38px 1fr;gap:2px 12px}
  .pasos li::before{width:38px;height:38px;font-size:19px}
  .prueba{padding:72px 0}
}

/* evita el corrimiento lateral de 4px en celulares (animaciones de entrada) */
html,body{overflow-x:clip}