.hw,.hw *{pointer-events:none}
.hw-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── Encabezado de la página de pedidos (sobre el comal) ─────────────────── */
.hw-tela{position:absolute;top:0;width:86px;height:86px;z-index:5;opacity:.55}
.hw-tela.izq{left:0}
.hw-tela.der{right:0;transform:scaleX(-1)}
.hw-arana{position:absolute;top:0;left:34px;z-index:5;width:14px;animation:hw-arana 4.8s ease-in-out infinite}
@keyframes hw-arana{0%,100%{transform:translate3d(0,26px,0)}50%{transform:translate3d(0,46px,0)}}
.hw-calabaza{position:absolute;bottom:4px;z-index:2;width:42px}
.hw-calabaza.c1{left:2%}
.hw-calabaza.c2{right:3%;width:34px;bottom:6px}
.hw-calabaza .ojos{animation:hw-brillo 2.6s ease-in-out infinite}
@keyframes hw-brillo{0%,100%{opacity:1}50%{opacity:.55}}

/* ── Murciélagos ──────────────────────────────────────────────────────────
   Cruzan en la primera parte de su vuelta y esperan fuera de la vista el
   resto: todo el tiempo dando vueltas cansa y distrae del menú. Cada uno con
   su ruta, su tamaño y su espera: si salen juntos se ve fabricado. */
/* Por TODA la página (Héctor, 8-oct): fijos sobre la pantalla, debajo de la
   barra del carrito (20), del ES|EN (20) y del botón de buscar (40). */
.hw-murcielagos{position:fixed;inset:0;z-index:15;overflow:hidden}
.hw-murc{position:absolute;top:0;left:0;width:40px;will-change:transform;animation:hw-vuelo-a 14s linear infinite}
.hw-murc svg{display:block;width:100%;height:auto;animation:hw-bamboleo 1.3s ease-in-out infinite}
.hw-murc .ala{transform-box:view-box;transform-origin:32px 15px;animation:hw-aleteo .24s ease-in-out infinite alternate}
@keyframes hw-aleteo{from{transform:scaleY(1)}to{transform:scaleY(-.45)}}
@keyframes hw-bamboleo{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(6px) rotate(5deg)}}
.hw-murc.m2{animation-name:hw-vuelo-b;animation-duration:18s;animation-delay:-6s;width:30px;opacity:.85}
.hw-murc.m3{animation-name:hw-vuelo-c;animation-duration:22s;animation-delay:-11s;width:24px;opacity:.7}
.hw-murc.m4{animation-duration:26s;animation-delay:-19s;width:34px}
/* Las rutas van en vh: cruzan la pantalla a distintas alturas, sin bajar de
   ~75% para no pasar por encima de la barra del carrito. */
@keyframes hw-vuelo-a{
  0%{transform:translate3d(-60px,18vh,0)}
  15%{transform:translate3d(25vw,8vh,0)}
  30%{transform:translate3d(55vw,30vh,0)}
  45%,100%{transform:translate3d(105vw,12vh,0)}}
@keyframes hw-vuelo-b{
  0%{transform:translate3d(105vw,55vh,0) scaleX(-1)}
  20%{transform:translate3d(60vw,38vh,0) scaleX(-1)}
  35%{transform:translate3d(30vw,62vh,0) scaleX(-1)}
  50%,100%{transform:translate3d(-60px,45vh,0) scaleX(-1)}}
@keyframes hw-vuelo-c{
  0%{transform:translate3d(-40px,72vh,0)}
  25%{transform:translate3d(40vw,50vh,0)}
  40%{transform:translate3d(70vw,66vh,0)}
  55%,100%{transform:translate3d(105vw,28vh,0)}}

/* Con el encabezado fuera de la vista, la araña y las calabazas quietas (igual
   que el vapor). Los murciélagos NO: vuelan por toda la página. */
.top.quieto .hw-arana,.top.quieto .hw-calabaza .ojos{animation-play-state:paused}

/* ── Calabazas en algunas tarjetas del menú (una de cada tres) ───────────────
   Sentadas en el borde de arriba, del lado del nombre o del precio según la
   tarjeta: por fuera del texto, así no tapan ni el nombre ni el precio. */
.cat .item:nth-of-type(3n+1){position:relative}
.cat .item:nth-of-type(3n+1)::after{content:"";position:absolute;top:-13px;left:14px;width:26px;height:22px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2050%22%3E%3Cpath%20d%3D%22M30%209c1-5%204-7%207-7%22%20stroke%3D%22%234d7c0f%22%20stroke-width%3D%224%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2218%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2217%22%20fill%3D%22%23c2410c%22%2F%3E%3Cellipse%20cx%3D%2242%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2217%22%20fill%3D%22%23c2410c%22%2F%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2230%22%20rx%3D%2215%22%20ry%3D%2218%22%20fill%3D%22%23ea580c%22%2F%3E%3Cg%20fill%3D%22%23fde68a%22%3E%3Cpath%20d%3D%22M19%2024l5%207h-10z%22%2F%3E%3Cpath%20d%3D%22M41%2024l5%207h-10z%22%2F%3E%3Cpath%20d%3D%22M17%2037q13%209%2026%200l-4%201-2%203-3-3-4%204-4-4-3%203-2-3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;pointer-events:none}
.cat .item:nth-of-type(6n+4)::after{left:auto;right:16px;transform:rotate(9deg)}

/* ── Telarañas abajo, en las esquinas del pie ─────────────────────────────── */
.piecli,main.hw-on footer{position:relative}
.piecli::before,.piecli::after,main.hw-on footer::before,main.hw-on footer::after{content:"";position:absolute;bottom:0;
  width:84px;height:84px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23a8968a%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%200L100%206M0%200L88%2046M0%200L60%2080M0%200L28%20100M0%200L4%20100%22%2F%3E%3Cpath%20d%3D%22M20%201Q19%209%2017%208Q12%2013%2013%2014Q7%2016%206%2021Q2%2020%201%2021%22%2F%3E%3Cpath%20d%3D%22M42%203Q38%2018%2035%2017Q25%2027%2026%2029Q14%2033%2012%2042Q4%2041%202%2043%22%2F%3E%3Cpath%20d%3D%22M66%204Q59%2027%2054%2027Q40%2042%2041%2045Q22%2051%2019%2064Q7%2062%203%2066%22%2F%3E%3Cpath%20d%3D%22M90%206Q80%2037%2074%2037Q55%2058%2056%2061Q30%2070%2026%2087Q10%2085%204%2090%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.6;pointer-events:none}
.piecli::before,main.hw-on footer::before{left:0;transform:scaleY(-1)}
.piecli::after,main.hw-on footer::after{right:0;transform:scale(-1,-1)}
/* En la portada el pie es angosto y tiene más texto: más chicas y más tenues. */
main.hw-on footer::before,main.hw-on footer::after{width:60px;height:60px;opacity:.4}

/* ── La calabaza que mastica ─────────────────────────────────────────────── */
.hw-cara{position:relative;display:block;width:100%;aspect-ratio:100/90;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2090%22%3E%3Cpath%20d%3D%22M50%2020c0-7%202-12%207-15%22%20stroke%3D%22%234d7c0f%22%20stroke-width%3D%226%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56%209c5-6%2013-7%2018-3-5%204-12%205-18%203z%22%20fill%3D%22%2365a30d%22%2F%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2254%22%20rx%3D%2224%22%20ry%3D%2231%22%20fill%3D%22%23c2410c%22%2F%3E%3Cellipse%20cx%3D%2272%22%20cy%3D%2254%22%20rx%3D%2224%22%20ry%3D%2231%22%20fill%3D%22%23c2410c%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2254%22%20rx%3D%2228%22%20ry%3D%2235%22%20fill%3D%22%23ea580c%22%2F%3E%3Cg%20fill%3D%22%23fde68a%22%3E%3Cpath%20d%3D%22M29%2047l8-13%208%2013z%22%2F%3E%3Cpath%20d%3D%22M55%2047l8-13%208%2013z%22%2F%3E%3Cpath%20d%3D%22M46%2056l4-6%204%206z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat}
/* El hueco de la boca: arriba casi recto, abajo redondo. Los radios de arriba y
   de abajo suman 100% del alto: si pasan, el navegador los achica todos. */
.hw-boca{position:absolute;left:28%;top:66.67%;width:44%;height:22.22%;overflow:hidden;
  border-radius:8% 8% 50% 50%/10% 10% 90% 90%;
  background:radial-gradient(ellipse at 50% 20%,#fff7c2,#fcd34d 45%,#f59e0b 80%,#b45309)}
.hw-boca::before,.hw-boca::after{content:"";position:absolute;inset:0;background:center/100% 100% no-repeat}
.hw-boca::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2044%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M8%200h7v6.5H8zM29%200h7v6.5h-7z%22%20fill%3D%22%23ea580c%22%2F%3E%3C%2Fsvg%3E");z-index:1}
/* La quijada: abajo, la boca abierta; arriba (2%), cerrada entre los dientes. */
.hw-boca::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2044%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%206.5h18.5v-6h7v6H44V20H0z%22%20fill%3D%22%23ea580c%22%2F%3E%3C%2Fsvg%3E");transform:translateY(55%)}

/* La marca de agua: grande, tenue y quieta en el centro de la pantalla, por
   encima del menú pero sin tapar nada (no recibe toques) y debajo de los
   murciélagos (15) y del carrito (20). Abre la boca siempre; cada tanto mastica
   dos veces y vuelve a quedarse quieta. */
.hw-marca{position:fixed;left:50%;top:50%;z-index:14;width:min(70vw,400px);transform:translate(-50%,-50%);opacity:.09}
.hw-marca .hw-cara{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2090%22%3E%3Cpath%20d%3D%22M50%2020c0-7%202-12%207-15%22%20stroke%3D%22%234d7c0f%22%20stroke-width%3D%226%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56%209c5-6%2013-7%2018-3-5%204-12%205-18%203z%22%20fill%3D%22%2365a30d%22%2F%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2254%22%20rx%3D%2224%22%20ry%3D%2231%22%20fill%3D%22%23c2410c%22%2F%3E%3Cellipse%20cx%3D%2272%22%20cy%3D%2254%22%20rx%3D%2224%22%20ry%3D%2231%22%20fill%3D%22%23c2410c%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2254%22%20rx%3D%2228%22%20ry%3D%2235%22%20fill%3D%22%23ea580c%22%2F%3E%3Cg%20fill%3D%22%233b1206%22%3E%3Cpath%20d%3D%22M29%2047l8-13%208%2013z%22%2F%3E%3Cpath%20d%3D%22M55%2047l8-13%208%2013z%22%2F%3E%3Cpath%20d%3D%22M46%2056l4-6%204%206z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.hw-marca .hw-boca{background:#3b1206}
.hw-marca .hw-boca::after{animation:hw-masca 7s ease-in-out infinite}
@keyframes hw-masca{0%,74%,100%{transform:translateY(55%)}78%{transform:translateY(2%)}
  82%{transform:translateY(55%)}86%{transform:translateY(6%)}90%{transform:translateY(55%)}}

/* En la espera entre páginas (y "Enviando tu pedido…"): la calabaza toma el
   lugar del ícono, con el mismo rebote (el de transicion.ts, que nunca pasa de
   su tamaño) y el vapor saliéndole del tallo. Cierra la boca al aplastarse. */
.esp-icono .hw-cara{position:absolute;left:0;bottom:0;z-index:1;transform-origin:50% 85%;
  animation:rebota 1.15s cubic-bezier(.45,0,.55,1) infinite}
.esp-icono .hw-boca::after{animation:hw-masca-salta 1.15s cubic-bezier(.45,0,.55,1) infinite}
@keyframes hw-masca-salta{0%,44%,76%,100%{transform:translateY(55%)}22%{transform:translateY(2%)}60%{transform:translateY(30%)}}

/* ── Portada (fondo claro) ─────────────────────────────────────────────── */
main.hw-on{position:relative;overflow:hidden}
.hw-portada{position:absolute;left:0;right:0;top:0;height:230px;z-index:2}
.hw-portada .hw-tela,.hw-arriba .hw-tela{opacity:.5}
.hw-portada .hw-tela path,.hw-arriba .hw-tela path{stroke:#a8968a}
/* "Buscar mi pedido": en las esquinas de arriba de la pantalla. */
.hw-arriba{position:absolute;left:0;right:0;top:0;height:86px}
.hw-portada .hw-murcielagos{z-index:2}
/* Dos calabazas sentadas en las esquinas de abajo de un recuadro: el de la demo
   en la portada y la tarjeta del negocio cerrado. */
.hw-demo{position:relative}
.hw-demo .hw-calabaza{bottom:-6px;width:38px}
.hw-demo .hw-calabaza.c1{left:-6px}
.hw-demo .hw-calabaza.c2{right:-4px;width:32px;bottom:-4px}

@media (prefers-reduced-motion:reduce){
  .hw-murcielagos{display:none}
  .hw-arana,.hw-calabaza .ojos,.hw-cara,.hw-boca::after{animation:none}
}