/* 🎨 MARCOS DE LA MARCA elpizzero — 03/10/2026.
   Ángel: «marcos personalizados con el branding… en vez de poner sombras, algo realmente completo que no parezca creado con IA».
   Idea: todo lo que enmarca parece IMPRESO o HECHO A MANO (tinta, ticket troquelado, cinta de carrocero, sello de goma,
   rotulador), nunca la sombra difuminada de plantilla. Va después de brand.css (usa sus colores).
   Piezas:
     .m-tinta      borde de tinta + sombra SÓLIDA desplazada (la firma de la marca). .m-vivo = se levanta al pasar el ratón.
     .m-ticket     papel con el borde troquelado arriba y abajo, como el ticket de la impresora.
     .m-cinta      dos tiras de cinta de carrocero en las esquinas (para fotos, capturas y el vídeo).
     .m-sello      sello de goma redondo que gira despacio con el gato en el centro (markup: elp_sello()).
     .m-ruta       marco del MAPA: carretera encima con el gato en moto yendo y viniendo + borde de ruta animado.
     .m-rotu       subrayado de rotulador beige bajo una palabra de un título.
     .m-huellas    rastro de huellas del gato para separar secciones.
     .m-pegatina   etiqueta tipo pegatina, un poco torcida.
     [data-m-aparece]  aparece al llegar con el scroll (marcos.js). Sin JS o con «reducir movimiento» se ve todo quieto. */

:root{ --m-ink:var(--elp-ink,#2E2E31); --m-crema:var(--elp-crema,#FFF8EC); --m-beige:var(--elp-beige,#D9D1C4); --m-gris:var(--elp-gris,#BFB8AD); --m-linea:var(--elp-linea,#ebe3d5); --m-som:6px; }

/* 1 · TINTA */
.m-tinta{background:#fff;border:2px solid var(--m-ink);border-radius:20px;box-shadow:var(--m-som) var(--m-som) 0 var(--m-ink);transition:transform .18s ease,box-shadow .18s ease}
.m-tinta.m-beige{box-shadow:var(--m-som) var(--m-som) 0 var(--m-beige)}
.m-tinta.m-crema{background:var(--m-crema)}
a.m-tinta,.m-tinta.m-vivo{cursor:pointer}
a.m-tinta{color:inherit;text-decoration:none;display:block}
a.m-tinta:hover,.m-tinta.m-vivo:hover,a.m-tinta:focus-visible{transform:translate(-3px,-3px);box-shadow:calc(var(--m-som) + 3px) calc(var(--m-som) + 3px) 0 var(--m-ink)}
a.m-tinta.m-beige:hover{box-shadow:calc(var(--m-som) + 3px) calc(var(--m-som) + 3px) 0 var(--m-beige)}
a.m-tinta:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--m-ink)}

/* 2 · TICKET (troquel arriba y abajo con máscara: dos medias capas que se suman) */
.m-ticket{position:relative;background:#fff;padding:26px 22px;
  --r:6px;--w:16px;
  -webkit-mask:radial-gradient(var(--r) at 50% 0,#0000 97%,#000) top/var(--w) 51% repeat-x,radial-gradient(var(--r) at 50% 100%,#0000 97%,#000) bottom/var(--w) 51% repeat-x;
          mask:radial-gradient(var(--r) at 50% 0,#0000 97%,#000) top/var(--w) 51% repeat-x,radial-gradient(var(--r) at 50% 100%,#0000 97%,#000) bottom/var(--w) 51% repeat-x}
.m-ticket-sombra{filter:drop-shadow(5px 5px 0 var(--m-beige))}   /* envoltorio: la sombra sigue el troquel */
.m-ticket .m-corte{border:0;border-top:2px dashed var(--m-linea);margin:14px -22px}
.m-ticket .m-num{font:600 .7rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--m-gris);text-transform:uppercase}

/* 3 · CINTA DE CARROCERO */
.m-cinta{position:relative}
.m-cinta::before,.m-cinta::after{content:"";position:absolute;z-index:3;width:92px;height:28px;top:-13px;pointer-events:none;
  background:rgba(217,209,196,.88);box-shadow:0 1px 0 rgba(46,46,49,.08);
  -webkit-mask:linear-gradient(90deg,#0000 0 3px,#000 3px calc(100% - 3px),#0000 0),repeating-linear-gradient(0deg,#000 0 3px,#0000 3px 5px) left/3px 100% no-repeat,repeating-linear-gradient(0deg,#000 0 2px,#0000 2px 5px) right/3px 100% no-repeat;
          mask:linear-gradient(90deg,#0000 0 3px,#000 3px calc(100% - 3px),#0000 0),repeating-linear-gradient(0deg,#000 0 3px,#0000 3px 5px) left/3px 100% no-repeat,repeating-linear-gradient(0deg,#000 0 2px,#0000 2px 5px) right/3px 100% no-repeat}
.m-cinta::before{left:22px;transform:rotate(-7deg)}
.m-cinta::after{right:22px;transform:rotate(6deg)}

/* 4 · SELLO DE GOMA (gira; el gato del centro no) */
.m-sello{position:relative;display:inline-grid;place-items:center;width:var(--tam,136px);aspect-ratio:1;color:var(--m-ink)}
.m-sello svg{position:absolute;inset:0;width:100%;height:100%;animation:m-gira 22s linear infinite}
.m-sello svg text{font-family:var(--elp-font,'Poppins',sans-serif);font-weight:700;fill:currentColor}
.m-sello svg circle{fill:none;stroke:currentColor}
.m-sello img{width:52%;height:52%;object-fit:contain;position:relative}
.m-sello.m-claro{color:var(--m-crema)}
@keyframes m-gira{to{transform:rotate(360deg)}}

/* 5 · RUTA (el mapa): carretera arriba con el gato repartidor y borde de ruta que avanza */
.m-ruta{position:relative;border:2px solid var(--m-ink);border-radius:22px;background:#fff;box-shadow:var(--m-som) var(--m-som) 0 var(--m-ink);padding:48px 10px 10px}
.m-ruta .m-carretera{position:absolute;left:14px;right:14px;top:10px;height:28px;border-radius:999px;background:var(--m-crema);border:2px solid var(--m-ink);overflow:hidden}
.m-ruta .m-carretera::before{content:"";position:absolute;left:0;right:0;top:50%;height:0;border-top:2px dashed var(--m-gris);animation:m-asfalto 1.2s linear infinite}
.m-ruta .m-moto{position:absolute;top:-30px;left:0;width:74px;height:74px;z-index:2;object-fit:contain;animation:m-reparto 14s ease-in-out infinite;will-change:left,transform}
.m-ruta .m-destino{position:absolute;top:2px;right:8px;font-size:.95rem;line-height:1}
.m-ruta .m-origen{position:absolute;top:2px;left:8px;font-size:.95rem;line-height:1}
.m-ruta > .m-dentro{border-radius:14px;overflow:hidden;position:relative}
.m-ruta > .m-dentro::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(90deg,var(--m-ink) 50%,#0000 0) top/18px 2px repeat-x,linear-gradient(90deg,var(--m-ink) 50%,#0000 0) bottom/18px 2px repeat-x,
             linear-gradient(0deg,var(--m-ink) 50%,#0000 0) left/2px 18px repeat-y,linear-gradient(0deg,var(--m-ink) 50%,#0000 0) right/2px 18px repeat-y;
  opacity:.35;animation:m-hormiga 1.6s linear infinite}
@keyframes m-asfalto{from{transform:translateX(0)}to{transform:translateX(-24px)}}
@keyframes m-reparto{0%{left:calc(0% + 34px);transform:scaleX(1)}46%{left:calc(100% - 108px);transform:scaleX(1)}50%{left:calc(100% - 108px);transform:scaleX(-1)}96%{left:calc(0% + 34px);transform:scaleX(-1)}100%{left:calc(0% + 34px);transform:scaleX(1)}}
@keyframes m-hormiga{to{background-position:18px 0,-18px 100%,0 -18px,100% 18px}}

/* 6 · ROTULADOR bajo una palabra */
.m-rotu{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15c40-7 92-9 150-8 52 1 98 3 144-1 2 0 3 2 1 3-46 6-92 6-145 5-55-1-104 1-148 7-3 0-4-5-2-6z' fill='%23D9D1C4'/%3E%3C/svg%3E") 0 92%/100% .42em no-repeat;padding:0 .06em}
.m-oscuro .m-rotu,.m-rotu.m-claro{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15c40-7 92-9 150-8 52 1 98 3 144-1 2 0 3 2 1 3-46 6-92 6-145 5-55-1-104 1-148 7-3 0-4-5-2-6z' fill='%235b5750'/%3E%3C/svg%3E")}

/* 7 · HUELLAS (separador) */
.m-huellas{height:44px;margin:10px auto;max-width:560px;opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='44' viewBox='0 0 76 30'%3E%3Cg fill='%23BFB8AD'%3E%3Cg transform='translate(6 12) rotate(-12)'%3E%3Cellipse cx='6' cy='9' rx='4.2' ry='3.6'/%3E%3Ccircle cx='1.6' cy='3.8' r='1.6'/%3E%3Ccircle cx='4.8' cy='1.6' r='1.6'/%3E%3Ccircle cx='8.2' cy='1.8' r='1.6'/%3E%3Ccircle cx='10.8' cy='4.4' r='1.5'/%3E%3C/g%3E%3Cg transform='translate(42 2) rotate(10)'%3E%3Cellipse cx='6' cy='9' rx='4.2' ry='3.6'/%3E%3Ccircle cx='1.6' cy='3.8' r='1.6'/%3E%3Ccircle cx='4.8' cy='1.6' r='1.6'/%3E%3Ccircle cx='8.2' cy='1.8' r='1.6'/%3E%3Ccircle cx='10.8' cy='4.4' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/110px 44px repeat-x}

/* 8 · PEGATINA */
.m-pegatina{display:inline-flex;align-items:center;gap:.35rem;background:var(--m-ink);color:var(--m-crema);font-weight:700;font-size:.74rem;letter-spacing:.04em;
  padding:.32rem .7rem;border-radius:8px;border:2px solid #fff;box-shadow:2px 2px 0 var(--m-beige);transform:rotate(-3deg)}
.m-pegatina.m-clara{background:#fff;color:var(--m-ink);border-color:var(--m-ink);box-shadow:2px 2px 0 var(--m-ink)}

/* 9 · NÚMERO de paso escrito a mano en un círculo de tinta */
.m-paso{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--m-ink);background:var(--m-crema);font-weight:800;font-size:1rem;color:var(--m-ink);box-shadow:3px 3px 0 var(--m-ink)}

/* 10 · APARECER con el scroll (solo si marcos.js ha puesto .m-js en <html>) */
.m-js [data-m-aparece]{opacity:0;transform:translateY(18px) rotate(var(--m-rot,0deg));transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.m-js [data-m-aparece].m-visto{opacity:1;transform:none}
.m-js [data-m-aparece="2"]{transition-delay:.08s}.m-js [data-m-aparece="3"]{transition-delay:.16s}.m-js [data-m-aparece="4"]{transition-delay:.24s}

@media (max-width:640px){
  :root{--m-som:4px}
  .m-cinta::before,.m-cinta::after{width:64px;height:22px;top:-10px}
  .m-ruta{padding-top:44px}
  .m-ruta .m-moto{width:58px;height:58px;top:-22px}
}
@media (prefers-reduced-motion:reduce){
  .m-sello svg,.m-ruta .m-moto,.m-ruta .m-carretera::before,.m-ruta > .m-dentro::after{animation:none}
  .m-js [data-m-aparece]{opacity:1;transform:none;transition:none}
}