/* Bartemon 157 — landing
   Negro plancha + ámbar brasa. Anton (display) + Inter (texto).
   El hero cabe en una pantalla: una sola decisión, ¿en qué local pides? */

:root{
  --negro:#0D0B09;
  --negro-2:#171310;
  --crema:#F7F1E6;
  --crema-2:#C9BFB0;
  --brasa:#E8871E;
  --aji:#C93B22;
  --linea:rgba(247,241,230,.14);
}

*{box-sizing:border-box;margin:0;padding:0}

html{overflow-x:hidden;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--negro);
  color:var(--crema);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
/* <picture> no debe existir para la maqueta: sin esto el <img> mide el 100%
   del <picture> y no del contenedor, y el hero se descuadra. */
picture{display:contents}

a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--brasa);outline-offset:3px}

/* ---------------------------------------------------------- botones */
/* Todo el transform de los botones se compone desde custom properties.
   Así el imán (--ix/--iy), el hover (--ty) y "la prensa" (--pz/--pw) conviven
   sin pisarse y sin que el JS tenga que escribir style.transform. */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:Anton,Impact,sans-serif;
  font-size:clamp(1.15rem,3.2vw,1.5rem);
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  background:var(--brasa);
  color:var(--negro);
  padding:.75rem 1.5rem;
  border-radius:2px;
  line-height:1.1;
  touch-action:manipulation;
  transform:translate3d(var(--ix,0px),calc(var(--iy,0px) + var(--ty,0px)),0)
            scaleY(var(--pz,1)) scaleX(var(--pw,1));
  transition:transform .38s cubic-bezier(.34,1.56,.64,1), background .18s ease, color .18s ease;
}
.btn:hover{background:var(--crema);--ty:-2px}
.btn__sup{
  display:block;
  font-family:Inter,sans-serif;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.18em;
  opacity:.75;
  margin-bottom:.1rem;
}
.btn--full{width:100%}

/* ---------------------------------------------------------- hero */
/* ═════════════════════════════════════════════════════════════════════════
   HERO — LA BARTEMON SOBRE LA PLANCHA

   🔴 POR QUÉ NO SE DESPIEZA.
   Se probó armarla capa por capa cortando la foto con alfa. Se ve CORTADA, y
   no tiene arreglo: una foto plana no guarda ninguna información de lo que hay
   DEBAJO de cada ingrediente, así que al separarlos siempre aparece el canto
   recto del corte. La única forma de tener despiece de verdad es generar los
   ingredientes con IA — y ahí la hamburguesa deja de ser la del cliente, que
   es justo lo que no se transa. Va entera.

   El movimiento es el aterrizaje: cae, golpea y rebota. Es lo que significa
   "smash", y no necesita mentir sobre el producto.

   🔴 El estado por defecto es POSADA. Sin JS, con prefers-reduced-motion o
   para un buscador el hero se ve entero y correcto; el JS sólo la levanta para
   dejarla caer. Al revés, un fallo de JS dejaría el hero vacío.
   ═════════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100dvh;
  overflow:hidden;
  background:var(--negro);
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
}

/* ── el fondo: la plancha con hamburguesas cocinándose ─────────────────── */
.hero__fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__fondo img,
.hero__fondo video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 58%;
  /* Un poco de desenfoque y menos brillo: la plancha llena de medallones es
     apetitosa, pero nítida le pelea a la hamburguesa y al titular. Así queda
     como profundidad de campo, que es lo que sería en una foto de verdad.
     El scale evita que el blur deje los bordes transparentes. */
  filter:blur(2.5px) brightness(.78) saturate(1.05);
  transform:scale(1.04);
}
.hero__humo{opacity:0;transition:opacity 1.1s ease}
.hero__humo.on{opacity:.78}
/* Velo: sostiene el contraste del texto y hunde los bordes en negro. Va
   DELANTE del video y DETRÁS de la hamburguesa. Más suave que antes: si se
   tapa mucho, los medallones de la plancha dejan de leerse. */
.hero__fondo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(125% 68% at 50% 97%, rgba(232,135,30,.20), transparent 63%),
    linear-gradient(to bottom, rgba(13,11,9,.90) 0%, rgba(13,11,9,.46) 30%,
                    rgba(13,11,9,.78) 72%, var(--negro) 100%);
}

/* ── botón de pausa del humo — WCAG 2.2.2: el movimiento automático que dura
      más de 5 s necesita una forma de detenerlo. Discreto hasta que lo buscas. */
.hero__pausa{
  position:absolute;z-index:4;left:.9rem;top:.9rem;
  width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(13,11,9,.55);color:var(--crema);
  border:1px solid rgba(247,241,230,.24);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  cursor:pointer;opacity:.35;transition:opacity .25s ease;
  font-size:.62rem;line-height:1;
}
.hero__pausa:hover,.hero__pausa:focus-visible{opacity:1}
.hero__pausa[hidden]{display:none}

/* ── la hamburguesa ────────────────────────────────────────────────────── */
.hero__arma{
  position:relative;z-index:1;
  grid-row:1;grid-column:1;
  justify-self:center;align-self:center;
  /* Se mide por la ALTURA que sobra, no por el ancho: la fila 1 es
     minmax(0,1fr) y con un ancho fijo la foto impone su alto y empuja el hero
     más allá de la pantalla. Se limita por max-height, nunca por max-width. */
  height:calc(100% - 1.5rem);width:auto;
  /* Lienzo CUADRADO, el mismo de sus fotos. Recortar al borde de la
     hamburguesa le quitaba el aire que tiene en la foto original y la dejaba
     enorme: en el encuadre real ocupa el 76 % del ancho y el 84 % del alto,
     no el 100 %. Se replica ese encuadre. */
  aspect-ratio:1;
  max-height:82vw;
}
.bt-burger{
  position:absolute;inset:0;
  /* La base de la hamburguesa está al 94 % del lienzo, no al 100 %: si el
     pivote se deja abajo del todo, el aplastón del golpe se ve desanclado. */
  transform-origin:50% 94%;
  filter:drop-shadow(0 .5rem .9rem rgba(0,0,0,.55));
}
.bt-burger img{display:block;width:100%;height:100%;object-fit:contain}

/* La sombra que la asienta sobre la plancha: se aplasta con el golpe. */
.bt-sombra{
  position:absolute;z-index:-1;
  left:17%;right:17%;bottom:3.4%;height:6%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.78), transparent 72%);
  filter:blur(7px);
  transform-origin:50% 50%;
}
/* El fogonazo de brasa del impacto: no existe hasta que golpea. */
.bt-golpe{
  position:absolute;z-index:-1;
  left:6%;right:6%;bottom:-3%;height:20%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,
    rgba(255,186,92,.5) 0%, rgba(255,138,30,.26) 42%, rgba(255,130,26,0) 72%);
  mix-blend-mode:screen;opacity:0;
  transform-origin:50% 70%;
}

/* ── el aterrizaje ─────────────────────────────────────────────────────── */
/* `backwards` es obligatorio: sin él se ve posada durante el retardo y después
   pega un salto. */
.hero.armando .bt-burger{animation:btCae 1.05s cubic-bezier(.36,.66,.3,1) .18s backwards}
.hero.armando .bt-sombra{animation:btSombra 1.05s cubic-bezier(.36,.66,.3,1) .18s backwards}
.hero.armando .bt-golpe {animation:btGolpe 1.05s ease-out .18s backwards}

@keyframes btCae{
  0%   {transform:translate3d(0,-46%,0) scale(1.07);opacity:0}
  26%  {opacity:1}
  56%  {transform:translate3d(0,0,0) scale(1,1)}
  66%  {transform:translate3d(0,0,0) scale(1.07,.87)}   /* el golpe: se aplasta */
  78%  {transform:translate3d(0,-3.5%,0) scale(.975,1.045)}  /* y despega apenas */
  88%  {transform:translate3d(0,0,0) scale(1.02,.985)}
  95%  {transform:translate3d(0,-.8%,0) scale(.995,1.008)}
  100% {transform:none;opacity:1}
}
@keyframes btSombra{
  0%   {transform:scale(.42);opacity:0}
  56%  {transform:scale(.55);opacity:.45}
  66%  {transform:scale(1.22);opacity:1}
  78%  {transform:scale(.9);opacity:.72}
  100% {transform:scale(1);opacity:.9}
}
@keyframes btGolpe{
  0%,55% {opacity:0;transform:scale(.55)}
  66%    {opacity:1;transform:scale(1)}
  100%   {opacity:0;transform:scale(1.45)}
}

/* Ya posada, respira: un vaivén mínimo y lento para que el hero no quede
   muerto. Se apaga con reduced-motion junto con todo lo demás. */
.hero.posada .bt-burger{animation:btRespira 7s ease-in-out 1.4s infinite}
@keyframes btRespira{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-1.1%,0)}
}

/* ── el rótulo ─────────────────────────────────────────────────────────── */
.bt-ticker{
  position:relative;z-index:2;grid-row:1;grid-column:1;
  align-self:end;justify-self:center;
  height:1.5em;width:100%;
  margin-bottom:.2rem;
  pointer-events:none;
}
.bt-ticker b{
  position:absolute;left:50%;top:0;
  transform:translateX(-50%);
  white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;
  font:700 clamp(.62rem,2.6vw,.74rem)/1.5 Inter,system-ui,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--crema-2);
}
.hero.armando .bt-ticker b{animation:btRotulo .6s ease both 1.05s}
@keyframes btRotulo{
  0%  {opacity:0;transform:translate(-50%,.55em)}
  100%{opacity:1;transform:translate(-50%,0)}
}

/* ── el texto ──────────────────────────────────────────────────────────── */
.hero__txt{
  position:relative;z-index:2;grid-row:2;
  width:100%;
  padding:0 1.35rem clamp(1.1rem,3vh,2.2rem);
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:.7rem;
}
.hero h1{
  font-family:Anton,Impact,sans-serif;
  font-weight:400;
  font-size:clamp(3.4rem,17vw,7rem);
  line-height:.86;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.hero__bajada{
  font-size:clamp(1rem,4vw,1.15rem);
  color:var(--crema-2);
  max-width:34ch;
}
.hero__botones{
  display:flex;flex-wrap:wrap;gap:.7rem;
  width:100%;
  margin-top:.35rem;
}
.hero__botones .btn{flex:1 1 auto;min-width:9.5rem}
.hero__botones .btn:last-child{background:transparent;color:var(--crema);border:2px solid var(--crema)}
.hero__botones .btn:last-child:hover{background:var(--crema);color:var(--negro)}
.hero__desde{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--crema-2);
}

@media (max-width:599px){
  .hero__arma{max-height:76vw}
}
/* El botón del asistente es fixed abajo a la derecha y flota sobre el hero. */
@media (max-width:899px){
  .hero__txt{padding-bottom:3.9rem}
}

/* Tablet: 17vw hace el titular enorme y el hero deja de caber. Se acota. */
@media (min-width:600px) and (max-width:899px){
  .hero h1{font-size:clamp(3.4rem,9vw,5rem)}
  .hero__bajada{max-width:46ch}
  .hero__arma{max-height:58vw}
}

/* Escritorio: la hamburguesa a la derecha, el texto a la izquierda. */
@media (min-width:900px){
  .hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
    align-items:center;
  }
  .hero__txt{
    grid-row:1;grid-column:1;
    width:100%;
    padding:clamp(1.5rem,4dvh,3rem) clamp(2rem,4vw,4.5rem);
    gap:1.25rem;
  }
  .hero__arma{
    grid-row:1;grid-column:2;
    height:min(100%,78dvh);width:auto;
    max-height:42vw;
  }
  .hero__fondo::after{
    background:
      radial-gradient(70% 78% at 74% 62%, rgba(232,135,30,.18), transparent 66%),
      linear-gradient(to right, var(--negro) 0%, rgba(13,11,9,.88) 26%, rgba(13,11,9,.52) 58%, rgba(13,11,9,.66) 100%);
  }
  .hero h1{font-size:clamp(4.5rem,7.5vw,7.5rem)}
  .hero__botones{max-width:32rem}
  .bt-ticker{
    grid-row:1;grid-column:2;align-self:end;
    margin-bottom:clamp(1.5rem,5dvh,3.5rem);
  }
}

/* Sin movimiento: la hamburguesa aparece posada y no se anima nada. */
@media (prefers-reduced-motion:reduce){
  .hero.armando .bt-burger,
  .hero.armando .bt-sombra,
  .hero.armando .bt-golpe,
  .hero.armando .bt-ticker b,
  .hero.posada .bt-burger{animation:none}
  .bt-golpe{opacity:0}
}

/* ---------------------------------------------------------- secciones */
.seccion{
  padding:clamp(3.25rem,9vw,6rem) clamp(1.35rem,4vw,3rem);
  max-width:82rem;margin:0 auto;
}
.seccion--alt{background:var(--negro-2)}
.seccion--alt{max-width:none}
.seccion--alt > *{max-width:82rem;margin-left:auto;margin-right:auto}

.seccion__head{margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.seccion__head h2{
  font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:clamp(2rem,7vw,3.25rem);
  line-height:1;text-transform:uppercase;letter-spacing:-.005em;
}
.seccion__head h2::after{
  content:"";display:block;width:3.5rem;height:4px;
  background:var(--brasa);margin-top:.85rem;
}
.seccion__head p{color:var(--crema-2);margin-top:.85rem;max-width:48ch}
.seccion__pie{margin-top:2rem;text-align:center}
.seccion__pie a{
  font-family:Anton,Impact,sans-serif;font-size:1.15rem;text-transform:uppercase;
  color:var(--brasa);text-decoration:none;letter-spacing:.02em;
}
.seccion__pie a:hover{color:var(--crema)}

/* ---------------------------------------------------------- burgers */
.burgers{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:clamp(1rem,2.5vw,1.75rem);
}
.burger{
  background:var(--negro-2);
  border:1px solid var(--linea);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.burger:hover{border-color:var(--brasa);transform:translateY(-3px)}
.burger__foto{aspect-ratio:1/1;overflow:hidden;background:#000;isolation:isolate}
.burger__foto img{width:100%;height:100%;object-fit:cover}
.sinfoto{width:100%;height:100%;background:linear-gradient(135deg,#241d17,#12100d)}
.burger__txt{padding:1rem 1.1rem 1.25rem;display:flex;flex-direction:column;gap:.4rem}
.burger h3{
  font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:1.4rem;line-height:1.1;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
}
.burger p{font-size:.86rem;color:var(--crema-2);line-height:1.5}
.precio{
  font-family:Inter,sans-serif;font-weight:700;font-size:.95rem;
  color:var(--brasa);white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------- minis */
.minis{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  gap:clamp(.75rem,2vw,1.25rem);
}
.minis--tragos{margin-top:clamp(.75rem,2vw,1.25rem)}
.mini{
  background:var(--negro);
  border:1px solid var(--linea);
  padding-bottom:.9rem;
  text-align:center;
  display:flex;flex-direction:column;gap:.45rem;
}
.mini__foto{aspect-ratio:1/1;overflow:hidden;background:#000}
.mini__foto img{width:100%;height:100%;object-fit:cover}
.mini h4{
  font-family:Inter,sans-serif;font-weight:500;font-size:.88rem;
  padding:0 .6rem;line-height:1.3;
}
.mini .precio{font-size:.88rem}

/* ---------------------------------------------------------- locales */
.locales{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1rem,3vw,2rem);
}
.local{
  background:var(--negro-2);
  border:1px solid var(--linea);
  border-top:4px solid var(--brasa);
  padding:clamp(1.35rem,3vw,2rem);
  display:flex;flex-direction:column;gap:.85rem;
}
.local h3{
  font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:clamp(1.85rem,5vw,2.5rem);line-height:1;text-transform:uppercase;
}
.local__dir{color:var(--crema-2);font-size:.95rem}

/* ── "Abierto ahora · cierra 23:30" ─────────────────────────────────────────
   Va DENTRO del h3 para que el lector de pantalla lo lea junto al nombre del
   local ("San Felipe, abierto ahora"), pero en su propia línea y con la
   tipografía del cuerpo: heredar el Anton de 2,5rem lo volvería un segundo
   titular. El verde es semántico (abierto/cerrado), no el acento de la marca:
   la naranja sigue siendo sólo del botón de pedir. */
.estado{
  display:block;margin-top:.4rem;
  font:700 .74rem/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--crema-2);
}
.estado::before{
  content:"";display:inline-block;vertical-align:.05em;
  width:.5rem;height:.5rem;margin-right:.45rem;border-radius:50%;
  background:currentColor;opacity:.55;
}
.estado--on{color:#63d493}
.estado--on::before{
  opacity:1;
  box-shadow:0 0 0 .18rem rgba(99,212,147,.22);
}
.estado[hidden]{display:none}

.local__hor{list-style:none;display:flex;flex-direction:column;gap:.2rem}
.local__hor li{
  font-size:.85rem;color:var(--crema-2);
  padding-left:1rem;position:relative;
}
.local__hor li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;background:var(--brasa);border-radius:50%;
}
/* La línea que rige hoy. Con 3 tramos por local, buscarla a ojo es trabajo que
   la página puede ahorrar. */
.local__hor li.hoy{color:var(--crema);font-weight:600}
.local__hor li.hoy::before{width:7px;height:7px;left:-1px;top:.55em}
.local .btn{margin-top:.35rem}
.local__links{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;font-size:.82rem}
.local__links a{color:var(--crema-2);text-decoration:underline;text-underline-offset:3px}
.local__links a:hover{color:var(--brasa)}

/* ---------------------------------------------------------- pie */
.pie{
  border-top:1px solid var(--linea);
  padding:clamp(2.5rem,6vw,3.5rem) 1.35rem;
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  text-align:center;
}
.pie img{border-radius:50%;border:2px solid var(--linea)}
.pie p{color:var(--crema-2);font-size:.9rem}
.pie__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem}
.pie__links a{
  font-family:Anton,Impact,sans-serif;font-size:1rem;text-transform:uppercase;
  letter-spacing:.03em;text-decoration:none;
}
.pie__links a:hover{color:var(--brasa)}
.pie__legal{font-size:.72rem;color:#6E6459;max-width:44ch}

/* ═══════════════════════════════════════════════════════════════
   Antojo: entrada, prueba social, sellos y cierre
   ═══════════════════════════════════════════════════════════════ */

/* --- reveal (solo si el JS lo activa; sin JS todo se ve igual) --- */
.con-anim .anim{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.con-anim .anim.visible{opacity:1;transform:none}

/* --- el titular entra "aplastándose", como la carne en la plancha --- */
@keyframes pop{
  0%{opacity:0;transform:translateY(46px) scaleY(.72) scaleX(1.06)}
  62%{opacity:1;transform:translateY(-5px) scaleY(1.04) scaleX(.99)}
  100%{opacity:1;transform:none}
}
.hero h1 .pop{display:inline-block;animation:pop .85s cubic-bezier(.34,1.56,.64,1) both}
.hero h1 .pop--2{animation-delay:.11s}
@media (prefers-reduced-motion:reduce){
  .hero h1 .pop{animation:none}
}

.hero__eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--brasa);
}

/* --- prueba social: por qué confiar, en 4 segundos --- */
.prueba{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1px;background:var(--linea);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
.prueba__item{
  background:var(--negro);padding:1.15rem 1rem;
  display:flex;flex-direction:column;align-items:center;gap:.1rem;text-align:center;
  position:relative;
}
/* la línea de brasa crece bajo el dato que tocas — 100% CSS, :hover y :active,
   así funciona con el dedo sin una sola línea de JS */
.prueba__item::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--brasa);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.prueba__item:hover::after,.prueba__item:active::after{transform:scaleX(1)}
.prueba__item strong{
  font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:clamp(1.1rem,3.4vw,1.5rem);text-transform:uppercase;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.prueba__item span{font-size:.76rem;color:var(--crema-2);line-height:1.35}

/* --- sello sobre la foto: baja la parálisis de elegir entre 14 --- */
.burger__foto{position:relative}
.sello{
  position:absolute;top:.7rem;left:.7rem;
  background:var(--brasa);color:var(--negro);
  font-family:Anton,Impact,sans-serif;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem .55rem;border-radius:2px;
}

/* la foto respira al pasar el mouse — el producto es el héroe */
.burger__foto img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.burger:hover .burger__foto img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .burger:hover .burger__foto img{transform:none}
}

/* --- cierre: el antojo ya está, sacarle la fricción --- */
.cierre{
  background:var(--brasa);color:var(--negro);
  padding:clamp(2.75rem,8vw,4.5rem) clamp(1.35rem,4vw,3rem);
  display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;
  position:relative;overflow:hidden;isolation:isolate;
}
/* El contenido SIEMPRE por encima del rescoldo: si una capa tapa un CTA,
   se perdió la conversión entera y no se nota mirando. */
.cierre > *:not(.rescoldo){position:relative;z-index:1}
.cierre h2{
  font-family:Anton,Impact,sans-serif;font-weight:400;
  font-size:clamp(2rem,7.5vw,3.5rem);line-height:1;text-transform:uppercase;
}
.cierre p{color:rgba(13,11,9,.78);max-width:38ch;font-size:1.02rem}
.cierre__botones{
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;
  margin-top:.5rem;width:100%;max-width:34rem;
}
.cierre__botones .btn{flex:1 1 auto;min-width:10rem;background:var(--negro);color:var(--crema)}
.cierre__botones .btn:hover{background:var(--crema);color:var(--negro)}
.cierre__botones .btn:last-child{background:transparent;border:2px solid var(--negro);color:var(--negro)}
.cierre__botones .btn:last-child:hover{background:var(--negro);color:var(--crema)}

/* ═══════════════════════════════════════════════════════════════
   Movimiento: el titular que se aplasta, la cinta de burgers,
   los botones con imán y el asistente
   ═══════════════════════════════════════════════════════════════ */

/* --- titular: cada palabra sube desde su propia ranura, con desenfoque --- */
.wr{display:block;overflow:hidden;padding-bottom:.04em}
.wr > span{
  display:inline-block;
  animation:wordReveal .95s cubic-bezier(.16,1,.3,1) both;
}
.wr--2 > span{animation-delay:.13s}
@keyframes wordReveal{
  0%{transform:translateY(100%) scaleY(.78);filter:blur(9px);opacity:0}
  100%{transform:none;filter:blur(0);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .wr > span{animation:none}
}

/* --- botones con imán: se acercan al cursor --- */
.iman{will-change:transform}

/* --- la cinta: hamburguesas pasando sin parar --- */
.cinta{
  overflow:hidden;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  background:var(--negro-2);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.cinta__pista{
  display:flex;width:max-content;
  animation:correCinta 42s linear infinite;
}
.cinta:hover .cinta__pista{animation-play-state:paused}
@keyframes correCinta{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.cinta__item{
  flex:0 0 auto;width:clamp(7rem,15vw,10rem);
  padding:.7rem .45rem;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
}
.cinta__item img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  filter:grayscale(.22) brightness(.9);
  transition:filter .35s ease, transform .35s ease;
}
.cinta__item:hover img{filter:none;transform:scale(1.06)}
.cinta__item span{
  font-family:Anton,Impact,sans-serif;font-size:.78rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--crema-2);
  text-align:center;line-height:1.1;
}
.cinta__item:hover span{color:var(--brasa)}
@media (prefers-reduced-motion:reduce){
  .cinta__pista{animation:none;width:100%;overflow-x:auto}
}

/* --- parallax suave de la foto del hero --- */
.hero__foto img{will-change:transform}

/* ---------------------------------------------------------- asistente */
.chat-abrir{
  position:fixed;right:1rem;bottom:1rem;z-index:60;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--brasa);color:var(--negro);
  border:none;border-radius:999px;cursor:pointer;
  padding:.7rem 1.1rem .7rem .8rem;
  font-family:Anton,Impact,sans-serif;font-size:1rem;
  letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  animation:latido 3.6s ease-in-out 2s infinite;
}
.chat-abrir:hover{transform:translateY(-3px) scale(1.03)}
.chat-abrir.oculto{opacity:0;pointer-events:none;transform:scale(.85)}
.chat-abrir.dormido{opacity:0;pointer-events:none;transform:translateY(12px) scale(.9)}
.chat-abrir__ico{width:1.75rem;height:1.75rem;flex:0 0 auto;line-height:1;border-radius:50%;overflow:hidden}
@keyframes latido{
  0%,92%,100%{transform:none}
  94%{transform:scale(1.07) rotate(-2deg)}
  97%{transform:scale(1.03) rotate(1.5deg)}
}
@media (prefers-reduced-motion:reduce){
  .chat-abrir{animation:none}
}

.chat{
  position:fixed;right:1rem;bottom:1rem;z-index:61;
  width:min(23rem,calc(100vw - 2rem));
  max-height:min(34rem,calc(100dvh - 2rem));
  background:var(--negro-2);
  border:1px solid var(--linea);
  border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .26s ease, transform .26s cubic-bezier(.16,1,.3,1);
}
.chat.abierto{opacity:1;transform:none}
/* ⚠️ El atributo [hidden] NO oculta nada si una regla define display.
   Sin esto, el panel invisible queda encima y se come los clics del botón. */
.chat[hidden]{display:none}
.chat__top{
  display:flex;align-items:center;gap:.65rem;
  padding:.8rem .9rem;background:var(--negro);
  border-bottom:1px solid var(--linea);
}
.chat__top img{border-radius:50%;flex:0 0 auto}
.chat__top div{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.chat__top strong{font-size:.92rem}
.chat__top span{font-size:.72rem;color:var(--brasa)}
.chat__cerrar{
  background:none;border:none;color:var(--crema-2);
  font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .2rem;
}
.chat__cerrar:hover{color:var(--crema)}

.chat__hilo{
  flex:1;overflow-y:auto;padding:.9rem;
  display:flex;flex-direction:column;gap:.6rem;
  min-height:9rem;
}
.burbuja{
  max-width:88%;padding:.6rem .8rem;border-radius:12px;
  font-size:.88rem;line-height:1.5;
  animation:entraBurbuja .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes entraBurbuja{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.burbuja--bot{background:var(--negro);color:var(--crema);align-self:flex-start;border-bottom-left-radius:3px}
.burbuja--yo{background:var(--brasa);color:var(--negro);align-self:flex-end;border-bottom-right-radius:3px;font-weight:500}

.puntos{display:inline-flex;gap:.25rem;padding:.15rem 0}
.puntos i{
  width:6px;height:6px;border-radius:50%;background:var(--crema-2);
  animation:puntea 1.1s ease-in-out infinite;
}
.puntos i:nth-child(2){animation-delay:.15s}
.puntos i:nth-child(3){animation-delay:.3s}
@keyframes puntea{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ficha{
  display:flex;flex-direction:column;gap:.12rem;
  background:var(--negro-2);border-left:2px solid var(--brasa);
  padding:.5rem .65rem;margin:.4rem 0;border-radius:4px;
}
.ficha strong{font-family:Anton,Impact,sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:.02em}
.ficha em{font-style:normal;font-weight:700;color:var(--brasa);font-size:.9rem}
.ficha span{font-size:.78rem;color:var(--crema-2);line-height:1.4}

.cta-chat{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.cta-chat a{
  background:var(--brasa);color:var(--negro);text-decoration:none;
  font-family:Anton,Impact,sans-serif;font-size:.8rem;text-transform:uppercase;
  padding:.4rem .7rem;border-radius:3px;letter-spacing:.02em;
}
.cta-chat a:hover{background:var(--crema)}

.chat__rapidas{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 .9rem .6rem}
.chat__rapidas button{
  background:transparent;border:1px solid var(--linea);color:var(--crema-2);
  font-size:.76rem;padding:.32rem .6rem;border-radius:999px;cursor:pointer;
  font-family:Inter,sans-serif;transition:border-color .2s ease,color .2s ease;
}
.chat__rapidas button:hover{border-color:var(--brasa);color:var(--brasa)}

.chat__form{display:flex;gap:.4rem;padding:.7rem .9rem .9rem;border-top:1px solid var(--linea)}
.chat__form input{
  flex:1;min-width:0;background:var(--negro);border:1px solid var(--linea);
  color:var(--crema);border-radius:999px;padding:.55rem .85rem;
  font-family:Inter,sans-serif;font-size:.86rem;
}
.chat__form input:focus{outline:none;border-color:var(--brasa)}
.chat__form button{
  flex:0 0 auto;background:var(--brasa);color:var(--negro);border:none;
  width:2.3rem;height:2.3rem;border-radius:50%;cursor:pointer;font-size:.95rem;
}
.chat__form button:hover{background:var(--crema)}

/* --- pedir desde la propia burger: la decisión se toma mirando la foto --- */
.burger__pedir{
  display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;
  margin-top:.65rem;padding-top:.7rem;
  border-top:1px solid var(--linea);
}
.burger__pedir > span{
  font-family:ui-monospace,Menlo,monospace;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3,#857A6E);color:var(--crema-2);
  width:100%;
}
.pide{
  flex:1 1 0;min-width:5.5rem;text-align:center;
  font-family:Anton,Impact,sans-serif;font-size:.88rem;
  letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  padding:.45rem .5rem;border-radius:3px;
  background:var(--brasa);color:var(--negro);
  touch-action:manipulation;
  transform:translate3d(0,var(--ty,0px),0) scaleY(var(--pz,1)) scaleX(var(--pw,1));
  transition:transform .38s cubic-bezier(.34,1.56,.64,1), background .18s ease, color .18s ease;
}
.pide + .pide{background:transparent;color:var(--crema);border:1px solid var(--linea)}
.pide:hover{background:var(--crema);color:var(--negro);--ty:-2px}
.pide + .pide:hover{background:var(--crema);color:var(--negro);border-color:var(--crema)}
.ficha .opts{font-size:.72rem;color:var(--brasa);margin-top:.15rem}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PLANCHA RESPONDE
   El dedo del visitante es el calor: donde pasa, la foto se enciende, la cinta
   se arrastra, la card se inclina y el botón se aplasta contra la plancha.
   Todo se paga con transform y opacity. Cero imágenes nuevas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────── 0. EL SELLO (logo grande)
   El logo original es un JPG de 394 px: agrandado se ve blando. Aquí la pieza
   GRANDE es el anillo SVG (vectorial, nítido a cualquier tamaño) y el raster
   —logo-disco.png, ya recortado con transparencia— nunca se muestra por encima
   de su tamaño nativo: 394 px de archivo para 66% de un disco de 250 px. */
.sello-bt{
  position:relative;display:block;flex:0 0 auto;
  width:var(--d,220px);height:var(--d,220px);
  color:var(--brasa);
}
.sello-bt__anillo{
  position:absolute;inset:0;width:100%;height:100%;
  transform-origin:50% 50%;
  animation:giraSello 26s linear infinite;
}
.sello-bt__disco{
  position:absolute;top:50%;left:50%;width:66%;height:66%;
  transform:translate(-50%,-50%);object-fit:contain;
}
@keyframes giraSello{to{transform:rotate(360deg)}}

.sello-bt--hero{--d:min(52vw,215px);margin:calc(var(--d) * -.46) 0 -.15rem}
.sello-bt--pie{--d:118px;color:#8A7E71}

/* En móvil el sello subía con margen negativo y se montaba sobre la foto: eso
   era deliberado con el hero viejo y se veía bien. Con el hero nuevo cae justo
   encima del rótulo de ingredientes y del botón "Ver qué lleva", que ocupan esa
   misma franja. Se reduce a insignia y se le quita el tiro hacia arriba: la
   marca sigue, el choque no. Va DESPUÉS de la regla base o pierde por orden. */
@media (max-width:899px){
  .sello-bt--hero{--d:92px;margin:0 0 .15rem}
}

@media (min-width:600px) and (max-width:899px){
  .sello-bt--hero{--d:min(34vw,232px);margin:calc(var(--d) * -.42) 0 -.15rem}
}
@media (min-width:900px){
  /* En escritorio el sello vive dentro de la columna de texto: sin solape. */
  .sello-bt--hero{--d:min(19vw,275px);margin:0 0 -.35rem -.4rem}
}

/* ─────────────────────────────────────────────── 1. LA LENTE DE BRASA (hero)
Sobrevive al hero nuevo, pero cambia de forma: antes recortaba un círculo de la
foto plana y le subía el calor. Ahora la hamburguesa son 7 capas con alfa
flotando sobre la plancha, así que el círculo se convierte en lo que siempre
quiso ser: una FUENTE DE LUZ que se pasea por encima y calienta lo que toca.
Polaridad intacta — nunca oscurece, sólo agrega brasa.
Si el JS falla, .brasa queda en opacity:0 y el hero se ve idéntico. */
.brasa{
  position:absolute;top:0;left:0;
  --r:150px;
  width:calc(var(--r) * 2);height:calc(var(--r) * 2);
  margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius:50%;
  pointer-events:none;opacity:0;z-index:3;
  transition:opacity .35s ease;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,178,74,.34) 0%, rgba(255,141,32,.19) 44%, rgba(255,130,26,0) 74%);
  mix-blend-mode:screen;
  will-change:transform;
}
@media (min-width:900px){.brasa{--r:210px}}
.brasa.on{opacity:1}

.pista{
  /* arriba a la derecha: abajo al centro chocaba con el sello, que en móvil
     sube y se monta sobre la hamburguesa */
  position:absolute;top:.85rem;right:.85rem;
  z-index:4;pointer-events:none;
  display:inline-block;white-space:nowrap;
  background:rgba(13,11,9,.62);color:var(--crema);
  border:1px solid rgba(247,241,230,.22);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:999px;
  opacity:0;transition:opacity .5s ease;
}
.pista.on{opacity:1}
/* abajo a la izquierda choca con el botón de pausa del humo → se sube. */
@media (min-width:900px){.pista{top:1.6rem;right:1.6rem}}

/* El chip es la pista de la lente de brasa, que sólo existe con mouse.
   ⚠️ Va DESPUÉS del bloque .pista o pierde: `.pista{display:inline-block}` está
   más abajo en el archivo y le gana por orden a un display:none anterior. */
@media (hover:none){ .pista{display:none} }

/* ─────────────────────────────────────────────── 2. LA PRENSA (34 CTA)
   Aprietas y se aplasta a lo ancho, como la bola de carne cuando la espátula la
   baja a la plancha; al soltar rebota. Es SÓLO una clase: los <a> siguen siendo
   anchors normales, sin wrappers y sin preventDefault. */
.btn.prensa,.pide.prensa{
  --pz:.93;--pw:1.045;
  transition-duration:.09s;transition-timing-function:ease-out;
}
/* el imán escribe --ix/--iy por frame: mientras imanta, transición corta */
.iman.imantado{transition:transform .14s linear, background .18s ease, color .18s ease}

/* ─────────────────────────────────────────────── 3. LA CINTA SE AGARRA */
.cinta{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.cinta.agarrada{cursor:grabbing}
.cinta__item{-webkit-user-drag:none}
.cinta__item img{pointer-events:none;-webkit-user-drag:none}
.cinta.agarrada .cinta__item img{filter:none}
.cinta.viva .cinta__pista{animation:none}
.cinta.viva:hover .cinta__pista{animation:none}

/* ─────────────────────────────────────────────── 4. LA CARTA: reveal + card viva
   BLINDAJE: si el navegador no entiende la máscara, la foto se ve normal.
   Nunca se enmascara sin soporte y nunca sin la clase .con-anim que pone el JS. */
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .con-anim .burger__foto{
    -webkit-mask-image:linear-gradient(to top,#000 0 34%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to top,#000 0 34%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%);
    -webkit-mask-size:100% 300%;        mask-size:100% 300%;
    -webkit-mask-repeat:no-repeat;      mask-repeat:no-repeat;
    -webkit-mask-position:0 0;          mask-position:0 0;
    transition:-webkit-mask-position .62s cubic-bezier(.22,1,.36,1),
                       mask-position .62s cubic-bezier(.22,1,.36,1);
  }
  .con-anim .burger.visible .burger__foto{
    -webkit-mask-position:0 100%;mask-position:0 100%;
  }
}

/* la card viva: tilt acotado (6-8°) y scale 1.012, no 1.05 — con perspective y
   escalas grandes el nombre y el precio se ensucian en pantallas no-retina */
.con-anim .burger.visible{
  transform:perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));
  backface-visibility:hidden;
}
.con-anim .burger.lista{transition:border-color .2s ease}
@media (hover:hover) and (pointer:fine){
  .con-anim .burger.lista{transition:border-color .2s ease, transform .3s cubic-bezier(.22,1,.36,1)}
  .con-anim .burger.visible.viva{--sc:1.012;border-color:var(--brasa)}
}
/* brillo especular que sigue al puntero (o al scroll, en teléfono) */
.burger__foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),
             rgba(255,203,130,.34),rgba(255,203,130,0) 62%);
  mix-blend-mode:screen;
  transition:opacity .25s ease;
}
.burger.viva .burger__foto::after{opacity:1}

/* ─────────────────────────────────────────────── 5. EL RESCOLDO (cierre)
   Una capa con gradiente ESTÁTICO que sólo se traslada. Nunca
   "radial-gradient at var(--cx)" sobre el fondo de la sección: eso repinta el
   ancho completo de pantalla cada frame y es lo que voltea un gama media. */
.rescoldo{
  position:absolute;top:0;left:0;
  width:560px;height:560px;margin:-280px 0 0 -280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,214,.62) 0%,rgba(255,205,130,.34) 38%,rgba(255,180,90,0) 72%);
  mix-blend-mode:screen;pointer-events:none;
  opacity:0;z-index:0;
  transition:opacity .5s ease;
}
.rescoldo.on{opacity:1}

/* ─────────────────────────────────────────────── 6. QUIETO
   prefers-reduced-motion apaga los SEIS momentos, no cuatro. */
@media (prefers-reduced-motion:reduce){
  .brasa,.pista,.rescoldo{display:none}
  .sello-bt__anillo{animation:none}
  .btn,.pide{transition:background .18s ease, color .18s ease;transform:none}
  .btn.prensa,.pide.prensa{transform:none}
  .con-anim .burger.visible,.burger{transform:none}
  .burger__foto::after{display:none}
  .cinta{cursor:auto}
  @supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
    .con-anim .burger__foto{-webkit-mask-image:none;mask-image:none}
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SE ARMA SOLA — la foto real cortada en 7 capas que caen en orden.
   Cada .arma__capa es la MISMA foto con un clip-path distinto; cuando todas
   aterrizan, reconstituyen la foto original. Nada de dibujos: es su producto.
   Solo se anima transform y opacity (compositor), y el disparo es un
   IntersectionObserver — no un scroll-scrub, que en un teléfono de gama media
   es donde aparece el jank.
   ══════════════════════════════════════════════════════════════════════════ */
.arma__caja{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
@media (max-width:860px){.arma__caja{grid-template-columns:1fr;gap:1.6rem}}

.arma__foto{position:relative;aspect-ratio:1;width:100%;max-width:34rem;margin-inline:auto}
.arma__entera{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* La entera existe solo para el lector de pantalla y el buscador: las capas
   ya la dibujan. Misma URL = 0 bytes extra. */
.arma__entera{opacity:0;pointer-events:none}

/* La foto entera. El despiece por capas se descartó: se veía cortada — una
   foto plana no guarda lo que hay debajo de cada ingrediente. La lista de al
   lado dice qué lleva, que es lo que había que comunicar. */
.arma__entera{opacity:1;pointer-events:none}
.js .arma .arma__entera{opacity:0;transform:translate3d(0,-22px,0);
  transition:opacity .6s var(--curva,cubic-bezier(.22,1,.36,1)),
             transform .7s cubic-bezier(.34,1.4,.5,1)}
.js .arma.armada .arma__entera{opacity:1;transform:none}

.arma__lista{list-style:none;margin:0 0 1.3rem;padding:0;display:flex;flex-direction:column;gap:.62rem}
.arma__lista li{
  display:flex;align-items:baseline;gap:.75rem;
  font-size:clamp(.95rem,2.2vw,1.06rem);color:var(--crema,#F7F1E6);line-height:1.35;
}
.arma__n{
  flex:0 0 auto;width:1.65rem;height:1.65rem;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:700;
  background:rgba(232,135,30,.16);border:1px solid rgba(232,135,30,.42);
  color:var(--brasa,#E8871E);
}
.js .arma__lista li{
  opacity:0;transform:translate3d(-14px,0,0);
  transition:opacity .45s ease,transform .5s var(--curva,cubic-bezier(.22,1,.36,1));
  transition-delay:calc(var(--orden) * 150ms + 90ms);
}
.js .arma.armada .arma__lista li{opacity:1;transform:none}

.arma__precio{font-size:.95rem;color:var(--crema-2,#A29484);margin-bottom:1rem}
.arma__precio b{color:var(--brasa,#E8871E);font-size:1.15rem}
.arma__pedir{display:flex;flex-wrap:wrap;gap:.6rem}
.btn--arma{flex:1 1 11rem;min-width:11rem}

/* Si el visitante pidió menos movimiento, la hamburguesa ya está armada. */
@media (prefers-reduced-motion:reduce){
  .js .arma__capa,.js .arma__lista li{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* El botón del asistente lleva una hamburguesa de verdad, no un emoji: el
   emoji lo dibuja cada sistema a su manera y no es la marca. */
.chat-abrir__ico img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
}
/* El segundo local va delineado, como en el hero: dos naranjos sólidos lado a
   lado compiten y ninguno gana. */
.arma__pedir .btn--arma:last-child{background:transparent;color:var(--crema,#F7F1E6);
  border:1px solid rgba(247,241,230,.34)}
.arma__pedir .btn--arma:last-child:hover{border-color:var(--brasa,#E8871E)}