/* ARTINA CAFÉ · app del socio. Crema, cacao, rosa pintura y los seis colores de las letras. */
:root{
  --crema:#F5EDE3; --papel:#FFF9F2; --nude:#E6D3C0; --arena:#D3B89C; --caramelo:#B0835D; --canela:#8B5A3C;
  --cacao:#5C3A27; --espresso:#3A2419; --tinta:#2B1B13; --pintura:#B8468F; --pintura-o:#6B1A2A;
  --rosa:#E9A2CF; --rosa-cl:#F3C6E2; --salmon:#F4A693;
  --l1:#02B3B3; --l2:#D02694; --l3:#7D2596; --l4:#139DDE; --l5:#64C23B; --l6:#FC9501;
  --f-tit:'Fraunces', Georgia, serif; --f-txt:'Nunito', system-ui, -apple-system, sans-serif; --f-mano:'Caveat Brush', 'Fraunces', cursive;
  --gut:16px; --barra:70px; --safe-b:env(safe-area-inset-bottom, 0px); --safe-t:env(safe-area-inset-top, 0px);
  --pinc-salmon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23F4A693' d='M7 9C42 3 118 5 193 7c3 3-2 6 1 9-2 3 2 6-1 9 2 3-1 5 2 8-48 5-121 6-187 4 3-3-3-5 1-8-3-3 2-5-2-8 3-3-2-6 0-9z'/%3E%3Cpath fill='%23EE9583' d='M14 13c50-3 110-3 170-1v2c-60-1-120-1-170 2zM20 27c55-2 105-1 160 1v2c-55-2-105-2-160 0z'/%3E%3C/svg%3E");
  --pinc-rosa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23F3C6E2' d='M7 9C42 3 118 5 193 7c3 3-2 6 1 9-2 3 2 6-1 9 2 3-1 5 2 8-48 5-121 6-187 4 3-3-3-5 1-8-3-3 2-5-2-8 3-3-2-6 0-9z'/%3E%3C/svg%3E");
  --pinc-blanca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23FFF9F2' d='M7 9C42 3 118 5 193 7c3 3-2 6 1 9-2 3 2 6-1 9 2 3-1 5 2 8-48 5-121 6-187 4 3-3-3-5 1-8-3-3 2-5-2-8 3-3-2-6 0-9z'/%3E%3C/svg%3E");
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--crema)}
html.con-hoja{overflow:hidden}
body{margin:0;background:var(--crema);color:var(--tinta);font:600 16px/1.4 var(--f-txt);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
h1,h2,h3,p{margin:0}
.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ───── piezas de la marca ───── */
.pincelada{position:relative;display:inline-block;z-index:0;padding:0 .22em;font-family:var(--f-mano);font-weight:400}
.pincelada::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.12em;top:.24em;bottom:-.02em;background:var(--pinc-salmon) center/100% 100% no-repeat;transform:rotate(-1.6deg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 22px;border:0;border-radius:999px;background:var(--pintura);color:#fff;font:800 17px/1.1 var(--f-txt);box-shadow:0 5px 0 var(--pintura-o);transition:transform .08s,box-shadow .08s;text-decoration:none}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--pintura-o)}
.btn .i{width:21px;height:21px}
.btn.grande{width:100%;min-height:58px;font-size:18px}
.btn.chico{min-height:44px;padding:10px 18px;font-size:15.5px}
.btn.crema{background:var(--papel);color:var(--tinta);box-shadow:0 5px 0 rgba(43,27,19,.3)}
.btn.cacao{background:var(--cacao);box-shadow:0 5px 0 var(--tinta)}
.btn.verde{background:var(--l5);color:var(--tinta);box-shadow:0 5px 0 #3E8A1E;width:100%}
.btn[aria-disabled="true"]{background:var(--arena);box-shadow:0 5px 0 var(--caramelo)}
.btn-llano{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border:2.5px dashed var(--arena);border-radius:999px;background:transparent;color:var(--cacao);font:800 15px/1.2 var(--f-txt)}
.btn-llano:active{background:var(--nude)}
.btn-llano.ancho{width:100%}
.tag{display:inline-block;padding:3px 9px 4px;border-radius:999px;background:var(--l6);color:var(--tinta);font:900 11px/1 var(--f-txt);letter-spacing:.4px;text-transform:uppercase;vertical-align:middle}
.tag.halloween{background:var(--l6)}
.nota{font:700 13.5px/1.35 var(--f-txt);color:var(--canela);margin-top:8px}
.titulo{font:400 36px/1.05 var(--f-mano);color:var(--cacao);margin:34px 0 14px}
.titulo.chico{font-size:30px;margin-top:22px}
.tab-tit{font:400 44px/1 var(--f-mano);color:var(--cacao);margin:calc(var(--safe-t) + 22px) 0 18px}
.sub-tit{font:900 22px/1.1 var(--f-tit);font-style:italic;margin:0 0 12px}
.h-tit{font:900 28px/1.05 var(--f-tit);letter-spacing:-.3px;margin:4px 46px 14px 0}

/* sello redondo con texto en aro */
.sello{position:relative;display:inline-grid;place-items:center;width:var(--d,72px);aspect-ratio:1;flex:none;filter:drop-shadow(0 3px 0 rgba(43,27,19,.22))}
.sello svg{position:absolute;inset:0;width:100%;height:100%}
.s-f{fill:var(--sf,#FFF6EA)}
.s-l{fill:none;stroke:var(--sa,var(--cacao));stroke-width:1.3;stroke-dasharray:2.2 2.6}
.s-a{font:900 10.5px var(--f-txt);fill:var(--sa,var(--cacao));text-transform:uppercase}
.s-c{position:relative;display:grid;place-items:center;text-align:center;color:var(--sa,var(--cacao));font:900 calc(var(--d,72px) * .21)/1 var(--f-tit);letter-spacing:-.3px}
.s-c small{display:block;font:800 calc(var(--d,72px) * .11)/1 var(--f-txt);letter-spacing:0;margin-top:1px}
.s-c .i{width:calc(var(--d,72px) * .34);height:calc(var(--d,72px) * .34)}

/* letras: pintadas y en bizcocho */
.letras{--u:calc((100cqw - 8px) / 2010);display:flex;align-items:flex-end;justify-content:center;gap:calc(var(--u) * 15)}
.letra{position:relative;flex:none;width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.letra img:not(.pincel),.letra i{position:absolute;inset:0;width:100%;height:100%}
.letra.pintada{filter:drop-shadow(0 1.5px 0 rgba(43,27,19,.25)) drop-shadow(0 7px 6px rgba(92,58,39,.22))}
.letra.pintada::after{content:"";position:absolute;inset:0;-webkit-mask:var(--img) center/100% 100% no-repeat;mask:var(--img) center/100% 100% no-repeat;background:linear-gradient(150deg,rgba(255,255,255,.55) 0 12%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 70%,rgba(0,0,0,.08));pointer-events:none}
.letra.bizcocho{filter:drop-shadow(0 1.5px 0 rgba(139,90,60,.32)) drop-shadow(0 7px 6px rgba(92,58,39,.2))}
.letra.bizcocho i{-webkit-mask:var(--img) center/100% 100% no-repeat;mask:var(--img) center/100% 100% no-repeat;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23B79A7C' fill-opacity='.35'%3E%3Ccircle cx='7' cy='9' r='.9'/%3E%3Ccircle cx='31' cy='4' r='.7'/%3E%3Ccircle cx='48' cy='22' r='1'/%3E%3Ccircle cx='19' cy='33' r='.6'/%3E%3Ccircle cx='40' cy='45' r='.8'/%3E%3Ccircle cx='9' cy='52' r='.7'/%3E%3Ccircle cx='55' cy='55' r='.6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 34% 22%,#FFFEFB 0,#F7F1E7 38%,#EBE1D2 78%,#DED1BE 100%)}
.letra .pincel{position:absolute;left:50%;top:-4%;width:calc(330 * var(--u) + 26px);max-width:none;transform-origin:4% 5%;transform:rotate(-78deg);animation:amaga 1.8s ease-in-out infinite;filter:drop-shadow(0 4px 4px rgba(43,27,19,.25));pointer-events:none;z-index:2}
@keyframes amaga{0%,100%{transform:rotate(-78deg) translate(0,0)}45%{transform:rotate(-70deg) translate(3px,-5px)}70%{transform:rotate(-82deg) translate(-1px,1px)}}
.letras.chicas{--u:.072px;gap:5px;margin:14px 0 4px}
.letras.mini{--u:.06px;gap:4px}

/* ───── entrada: una pincelada rosa enorme deja el logo ───── */
#entrada{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--crema);clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.75,0,.25,1)}
#entrada.abre{clip-path:inset(50% 0 50% 0);pointer-events:none}
#entrada .trazo{position:absolute;inset:0;width:100%;height:100%}
#entrada path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
#entrada .t1{stroke:#EBA3CF;stroke-width:170}
#entrada .t2{stroke:#D97DB6;stroke-width:34;opacity:.55}
#entrada .t3{stroke:#F6CFE6;stroke-width:30;opacity:.9}
#entrada.va path{animation:trazar .72s cubic-bezier(.6,.05,.3,1) forwards}
#entrada.va .t2{animation-delay:.07s}
#entrada.va .t3{animation-delay:.12s}
@keyframes trazar{to{stroke-dashoffset:0}}
#entrada .logo{position:relative;width:min(64vw,340px);opacity:0;transform:scale(.55) rotate(-8deg);filter:drop-shadow(0 10px 18px rgba(107,26,42,.22))}
#entrada.va .logo{animation:logo .6s .5s cubic-bezier(.3,1.55,.5,1) forwards}
@keyframes logo{to{opacity:1;transform:none}}

/* ───── marco general ───── */
#app{min-height:100dvh}
.vista{max-width:1180px;margin:0 auto;padding:0 var(--gut) calc(var(--barra) + var(--safe-b) + 96px)}
#conexion{position:fixed;top:calc(var(--safe-t) + 8px);left:50%;transform:translateX(-50%);z-index:55;padding:7px 14px;border-radius:999px;background:var(--tinta);color:#fff;font:800 13px var(--f-txt);box-shadow:0 6px 16px rgba(43,27,19,.3)}

/* barra de abajo */
#barra{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--barra) + var(--safe-b));padding:0 6px var(--safe-b);display:grid;grid-template-columns:1fr 1fr 88px 1fr 1fr;align-items:center;background:var(--papel);border-radius:26px 26px 0 0;box-shadow:0 -1px 0 var(--nude),0 -12px 28px -14px rgba(92,58,39,.35)}
.tab{position:relative;display:grid;justify-items:center;gap:2px;padding:6px 0;border:0;background:none;color:var(--canela);font:800 12px/1 var(--f-txt)}
.tab .ic{display:grid;place-items:center;width:50px;height:32px;border-radius:16px;transition:background .2s}
.tab .i{width:25px;height:25px}
.tab[aria-current]{color:var(--pintura)}
.tab[aria-current] .ic{background:var(--rosa-cl)}
.tab .num{position:absolute;top:1px;left:calc(50% + 8px);min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--pintura);color:#fff;font:900 11.5px/16px var(--f-txt);text-align:center;border:2px solid var(--papel)}
#centro{justify-self:center;width:74px;height:74px;margin-top:-36px;padding:5px;border:0;border-radius:50%;background:conic-gradient(var(--l1),var(--l2),var(--l3),var(--l4),var(--l5),var(--l6),var(--l1));box-shadow:0 5px 0 var(--pintura-o),0 12px 22px -6px rgba(107,26,42,.45);transition:transform .08s,box-shadow .08s}
#centro img{width:100%;height:100%;padding:13px 9px 11px;border-radius:50%;background:var(--pintura);object-fit:contain;border:3px solid var(--papel)}
#centro:active{transform:translateY(4px);box-shadow:0 1px 0 var(--pintura-o)}

#pedido-flota{position:fixed;z-index:29;left:var(--gut);right:var(--gut);bottom:calc(var(--barra) + var(--safe-b) + 14px);display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;border:0;border-radius:999px;background:var(--tinta);color:#fff;font:800 16px var(--f-txt);box-shadow:0 5px 0 #000,0 14px 26px -8px rgba(43,27,19,.5);animation:subeFlota .35s cubic-bezier(.3,1.4,.5,1)}
#pedido-flota span{flex:1;text-align:left}
#pedido-flota b{padding:8px 14px;border-radius:999px;background:var(--pintura);font:900 16px var(--f-txt);font-variant-numeric:tabular-nums}
@keyframes subeFlota{from{transform:translateY(30px);opacity:0}}

/* ───── INICIO ───── */
.s-cab{margin:0 calc(-1 * var(--gut))}
.banderines{display:block;margin-top:var(--safe-t)}
.banderines .bd{transform-box:fill-box;transform-origin:50% 0;animation:mece 3.2s ease-in-out infinite alternate}
@keyframes mece{from{rotate:-4deg}to{rotate:4deg}}
.cab-fila{display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);margin-top:-4px}
.logo-chico{height:62px;width:auto}
.campana{position:relative;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--papel);color:var(--cacao);box-shadow:0 4px 0 var(--nude)}
.campana .i{width:25px;height:25px}
.campana .num{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--pintura);color:#fff;font:900 12px/18px var(--f-txt);border:2px solid var(--crema);text-align:center}
.s-saludo{padding:6px 0 14px}
.hola{font:400 27px/1.1 var(--f-mano);color:var(--cacao)}
.quien{margin-top:4px;font:900 40px/1 var(--f-tit);letter-spacing:-.8px;color:var(--tinta)}
.quien i{color:var(--pintura)}

/* tu tarjeta: la repisa con las letras */
.tarjeta{position:relative;display:block;padding:14px 14px 16px;border-radius:30px;background:var(--papel);box-shadow:0 6px 0 var(--arena),0 22px 34px -22px rgba(92,58,39,.55);cursor:pointer;transition:transform .1s}
.tarjeta:active{transform:translateY(3px)}
.tarjeta>header{display:flex;align-items:flex-start;justify-content:space-between;padding:2px 2px 0 6px}
.t-sobre{font:900 12px/1 var(--f-txt);letter-spacing:1.6px;text-transform:uppercase;color:var(--pintura)}
.tarjeta h2{margin-top:4px;font:900 30px/1 var(--f-tit);font-style:italic;letter-spacing:-.5px}
.sello-tarjeta{--d:78px;--sf:var(--pintura);--sa:#FFF6EA;margin:-8px -6px -26px 0;transform:rotate(10deg);z-index:3}
.pared{position:relative;margin-top:10px;padding:56px 10px 0;border-radius:22px 22px 10px 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96'%3E%3Cg fill='none' stroke='%23C9AE92' stroke-width='1.6' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M18 14c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z'/%3E%3Cpath d='M86 62s-6-3.7-6-8a3.4 3.4 0 0 1 6-2 3.4 3.4 0 0 1 6 2c0 4.3-6 8-6 8z'/%3E%3Cpath d='M60 26c3-3 6 3 9 0'/%3E%3Cpath d='M22 74c3-3 6 3 9 0'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(#E9D7C2,#E0CAB1);overflow:hidden}
.escena{container-type:inline-size;position:relative;z-index:1}
.repisa{position:relative;z-index:2;height:15px;margin:0 -10px;background:linear-gradient(#DDAF80,#BE8B5C);border-radius:5px 5px 2px 2px;box-shadow:0 9px 0 #8B5A3C,0 22px 18px -8px rgba(58,36,25,.45)}
.repisa span::before,.repisa span::after{content:"";position:absolute;top:24px;width:14px;height:12px;background:#8B5A3C;clip-path:polygon(0 0,100% 0,100% 100%)}
.repisa span::before{left:16%}
.repisa span::after{right:16%;transform:scaleX(-1)}
.pared::after{content:"";display:block;height:30px}
.tarjeta>footer{display:flex;align-items:center;gap:12px;margin-top:14px;padding:0 4px 0 6px}
.vas{flex:1;font:700 15.5px/1.3 var(--f-txt);color:var(--canela)}
.vas b{display:block;font:900 26px/1.05 var(--f-tit);color:var(--tinta);letter-spacing:-.4px;margin-bottom:2px}
.ver-qr{display:inline-flex;align-items:center;gap:7px;flex:none;padding:12px 16px;border-radius:999px;background:var(--tinta);color:#fff;font:800 15px var(--f-txt);box-shadow:0 4px 0 #000}
.ver-qr .i{width:20px;height:20px}

/* regalo vigente: ticket con sello */
.s-regalos{margin-top:22px}
.regalos{display:grid;gap:14px;filter:drop-shadow(0 5px 0 var(--pintura-o))}
.ticket{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 12px 14px 16px;border-radius:22px;background:var(--pintura);color:#fff;cursor:pointer;
  -webkit-mask:radial-gradient(circle 11px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.ticket::after{content:"";position:absolute;top:12px;bottom:12px;right:94px;border-left:2.5px dashed rgba(255,246,234,.45)}
.t-foto{width:72px;height:72px;border-radius:50%;object-fit:cover;border:4px solid #FFF6EA;background:#FFF6EA}
.t-txt small{font:900 11.5px/1 var(--f-txt);letter-spacing:1.4px;text-transform:uppercase;color:var(--rosa-cl)}
.t-txt h3{margin:3px 0 3px;font:900 22px/1.05 var(--f-tit);letter-spacing:-.3px}
.t-txt p{font:700 13.5px/1.3 var(--f-txt);color:#FCE6F2}
.sello-regalo{--d:74px;--sf:#FFF6EA;--sa:var(--pintura);transform:rotate(-12deg);margin-left:6px}

/* Pintá y descubrí */
.s-lienzo{margin-top:22px}
.lienzo-card{position:relative;display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center;padding:16px 16px 18px 10px;border-radius:28px;background:var(--l1);color:var(--tinta);box-shadow:0 6px 0 #017C7C;cursor:pointer;overflow:hidden}
.lienzo-card:active{transform:translateY(3px)}
.lc-arte{position:relative}
.caballete{width:112px;height:auto;filter:drop-shadow(0 6px 4px rgba(0,60,60,.3));animation:lienzoVa 3s ease-in-out infinite}
@keyframes lienzoVa{50%{transform:rotate(-2deg) translateY(-2px)}}
.manchita{position:absolute;border-radius:50% 45% 55% 48%;opacity:.95}
.m1{width:18px;height:15px;background:var(--l2);left:30px;top:40px;transform:scale(0);animation:mancha 3s 0s infinite}
.m2{width:14px;height:12px;background:var(--l6);left:58px;top:56px;transform:scale(0);animation:mancha 3s .4s infinite}
.m3{width:16px;height:13px;background:var(--l3);left:72px;top:30px;transform:scale(0);animation:mancha 3s .8s infinite}
@keyframes mancha{0%,15%{transform:scale(0)}30%,80%{transform:scale(1)}100%{transform:scale(0)}}
.lc-txt h2{font:400 34px/1 var(--f-mano);color:#fff;text-shadow:0 2px 0 rgba(0,90,90,.35)}
.lc-txt p{margin:6px 0 12px;font:700 15px/1.32 var(--f-txt)}
.lc-txt .btn{box-shadow:0 4px 0 #017C7C}

/* tu pieza */
.s-pieza,.s-pedido{margin-top:22px}
.pieza-card,.pedido-card{display:block;padding:16px;border-radius:28px;background:var(--papel);box-shadow:0 5px 0 var(--nude),0 18px 30px -24px rgba(92,58,39,.6);cursor:pointer}
.pc-cab{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center}
.pc-cab img{width:74px;height:74px;border-radius:20px;object-fit:cover;border:3px solid #fff;box-shadow:0 3px 0 var(--nude)}
.pc-cab small,.pedido-card small{font:900 11.5px/1 var(--f-txt);letter-spacing:1.4px;text-transform:uppercase;color:var(--l3)}
.pc-cab h3,.pedido-card h3{margin:3px 0 2px;font:900 22px/1.05 var(--f-tit);letter-spacing:-.3px}
.pc-cab p{font:700 14px/1.3 var(--f-txt);color:var(--canela)}
.pieza-card.lista{background:#F4ECFA;box-shadow:0 5px 0 var(--l3)}
.pasos{position:relative;list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.pasos::before,.pasos::after{content:"";position:absolute;left:12.5%;top:18px;height:6px;border-radius:3px}
.pasos::before{right:12.5%;background:var(--nude)}
.pasos::after{width:calc(75% * var(--k) / 3);background:var(--l3)}
.pasos li{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:6px;text-align:center;font:800 12px/1.15 var(--f-txt);color:var(--caramelo)}
.pasos .pi{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--papel);border:3px solid var(--nude);color:var(--arena)}
.pasos .pi .i{width:20px;height:20px}
.pasos li.hecho{color:var(--l3)}
.pasos li.hecho .pi{background:var(--l3);border-color:var(--l3);color:#fff}
.pasos li.ahora{color:var(--tinta)}
.pasos li.ahora .pi{background:var(--l6);border-color:#fff;color:var(--tinta);box-shadow:0 0 0 3px var(--l6);animation:late 1.5s ease-in-out infinite}
.pasos li.ahora b{font-weight:900}
@keyframes late{50%{transform:scale(1.1)}}
.pasos.vert{grid-template-columns:1fr;gap:12px;margin-top:16px}
.pasos.vert::before,.pasos.vert::after{left:19px;top:20px;width:6px;height:auto}
.pasos.vert::before{bottom:20px;right:auto}
.pasos.vert::after{height:calc((100% - 40px) * var(--k) / 3);width:6px}
.pasos.vert li{grid-template-columns:44px 1fr;justify-items:start;align-items:center;text-align:left;font-size:15.5px;column-gap:12px;row-gap:0}
.pasos.vert li small{grid-column:2;font:700 13px var(--f-txt);color:var(--canela);margin-top:-4px}

/* pedido en curso */
.pedido-card small{color:#3E8A1E}
.pedido-card.listo{background:#EAF7E1;box-shadow:0 5px 0 var(--l5)}
.pasos3{position:relative;list-style:none;margin:14px 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.pasos3::before,.pasos3::after{content:"";position:absolute;left:16.6%;top:18px;height:6px;border-radius:3px}
.pasos3::before{right:16.6%;background:var(--nude)}
.pasos3::after{width:calc(66.6% * var(--k) / 2);background:var(--l5);transition:width .5s}
.pasos3 li{position:relative;z-index:1;display:grid;justify-items:center;gap:6px;text-align:center;font:800 12.5px/1.15 var(--f-txt);color:var(--caramelo)}
.pasos3 .pi{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--papel);border:3px solid var(--nude);color:var(--arena)}
.pasos3 .pi .i{width:20px;height:20px}
.pasos3 li.hecho,.pasos3 li.ahora{color:var(--tinta)}
.pasos3 li.hecho .pi,.pedido-card.listo .pasos3 li.ahora .pi{background:var(--l5);border-color:var(--l5);color:#fff}
.pasos3 li.ahora .pi{background:#fff;border-color:var(--l5);color:#3E8A1E;animation:late 1.5s ease-in-out infinite}
.pedido-card .items{font:700 14px/1.35 var(--f-txt);color:var(--canela);margin:10px 0 6px}
.pedido-card .pagas{font:700 14px var(--f-txt);color:var(--cacao)}
.pedido-card .pagas b{font-variant-numeric:tabular-nums}
.pedido-card .btn{margin-top:8px}

/* para hoy: recortes saliendo de la tarjeta */
.prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 12px;padding-top:34px}
.prod{position:relative;display:flex;flex-direction:column;padding:0 12px 12px;border-radius:26px;background:var(--bg);color:var(--tinta);box-shadow:0 5px 0 rgba(43,27,19,.32)}
.prod.cla{color:#fff}
.p-img{position:relative;height:104px;margin:0 -12px 6px;cursor:pointer}
.p-img img.recorte{position:absolute;left:-4%;bottom:0;width:108%;height:146px;max-width:none;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 12px 10px rgba(43,27,19,.38));transition:transform .25s}
.p-img:active img{transform:scale(.96)}
.p-img.real img{position:absolute;left:50%;bottom:2px;width:118px;height:118px;border-radius:50%;object-fit:cover;transform:translateX(-50%);border:5px solid var(--papel);box-shadow:0 10px 16px -6px rgba(43,27,19,.45)}
.sello-precio{--d:64px;position:absolute;top:-22px;right:-10px;transform:rotate(12deg);z-index:2}
.sello-precio .s-c{font-size:14.5px;font-variant-numeric:tabular-nums}
.prod h3{font:900 19px/1.05 var(--f-tit);letter-spacing:-.3px}
.prod p{margin:4px 0 12px;font:700 13px/1.3 var(--f-txt);opacity:.86;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.btn-agregar{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:0;border-radius:999px;background:var(--papel);color:var(--tinta);font:900 15px var(--f-txt);box-shadow:0 4px 0 rgba(43,27,19,.4);transition:transform .08s,box-shadow .08s}
.btn-agregar:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,27,19,.4)}
.btn-agregar .i{width:19px;height:19px;stroke-width:3}
.en-pedido{position:absolute;top:-14px;left:10px;z-index:2;padding:5px 10px;border-radius:999px;background:var(--tinta);color:#fff;font:900 11.5px var(--f-txt);box-shadow:0 3px 0 #000}

/* experiencias */
.exps{display:grid;gap:14px;margin-bottom:18px}
.exp{position:relative;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:10px 14px 10px 10px;border-radius:24px;background:var(--papel);box-shadow:0 5px 0 var(--nude);cursor:pointer}
.exp img{width:96px;height:118px;border-radius:18px;object-fit:cover}
.e-txt{padding-right:40px}
.e-txt small{font:900 11.5px/1 var(--f-txt);letter-spacing:1.4px;text-transform:uppercase;color:var(--pintura)}
.e-txt h3{margin:3px 0 4px;font:900 24px/1 var(--f-tit);font-style:italic;letter-spacing:-.4px}
.e-txt p{font:700 13.5px/1.32 var(--f-txt);color:var(--canela)}
.sello-exp{--d:66px;--sf:var(--l6);--sa:var(--tinta);position:absolute;top:-12px;right:-6px;transform:rotate(9deg)}
.sello-exp .s-c{font-size:13px;font-variant-numeric:tabular-nums}
.exp:nth-child(2) .sello-exp{--sf:var(--l2);--sa:#fff}
.exp:nth-child(3) .sello-exp{--sf:var(--l3);--sa:#fff}

/* ───── CARTA ───── */
.carta-cab{position:sticky;top:0;z-index:5;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 10px;background:var(--crema);box-shadow:0 10px 14px -14px rgba(92,58,39,.55)}
.carta-cab .tab-tit{margin-bottom:10px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 8px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:10px 16px;border:0;border-radius:999px;background:var(--papel);color:var(--cacao);font:800 14.5px/1 var(--f-txt);box-shadow:0 3px 0 var(--nude)}
.chip.on{background:var(--tinta);color:#fff;box-shadow:0 3px 0 #000}
.cat{scroll-margin-top:140px}
.cat h2{margin:26px 0 12px;font:900 26px/1 var(--f-tit);font-style:italic;letter-spacing:-.4px}
.filas{display:grid;gap:10px}
.fila{display:grid;grid-template-columns:74px minmax(0,1fr) 46px;gap:12px;align-items:center;padding:10px;border-radius:22px;background:var(--papel);box-shadow:0 3px 0 var(--nude);cursor:pointer}
.fila img{width:74px;height:74px;border-radius:17px;object-fit:cover;background:var(--nude)}
.fila h3{font:800 16.5px/1.15 var(--f-txt)}
.fila h3 .tag{font-size:9.5px;padding:3px 7px;margin-left:3px}
.fila p{margin:3px 0 4px;font:600 13.5px/1.3 var(--f-txt);color:var(--canela);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fila .precio{font:900 15.5px var(--f-txt);font-variant-numeric:tabular-nums}
.mas{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--pintura);color:#fff;box-shadow:0 4px 0 var(--pintura-o);transition:transform .08s,box-shadow .08s}
.mas:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pintura-o)}
.mas .i{width:22px;height:22px;stroke-width:3}
.mas.con{background:var(--tinta);box-shadow:0 4px 0 #000}
.mas .cuantos{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--l6);color:var(--tinta);font:900 12px/22px var(--f-txt)}

/* ───── PINTAR ───── */
.pintar-grid{display:grid;gap:0}
.mi-pieza{display:grid;gap:16px;padding:14px;border-radius:30px;background:var(--papel);box-shadow:0 6px 0 var(--nude),0 22px 34px -24px rgba(92,58,39,.6)}
.mi-pieza.lista{background:#F4ECFA;box-shadow:0 6px 0 var(--l3)}
.mp-foto{position:relative}
.mp-foto img{width:100%;height:280px;border-radius:22px;object-fit:cover}
.calor{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;background:var(--l6);color:var(--tinta);font:900 14px var(--f-txt);box-shadow:0 3px 0 rgba(43,27,19,.3)}
.calor .i{animation:late 1.2s infinite}
.mp-txt{padding:0 4px 6px}
.mp-txt small{font:900 11.5px/1 var(--f-txt);letter-spacing:1.4px;text-transform:uppercase;color:var(--l3)}
.mp-txt h2{margin:4px 0 6px;font:900 28px/1.05 var(--f-tit);letter-spacing:-.5px}
.mp-txt>p{font:700 14.5px/1.38 var(--f-txt);color:var(--canela)}
.mp-txt .btn-llano{margin-top:16px;width:100%}
.aviso-listo{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:var(--l3);color:#fff!important}
.mi-pieza.vacia{padding:22px 18px}
.mis-res{display:grid;gap:10px}
.res{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;padding:12px;border-radius:20px;background:var(--papel);box-shadow:0 3px 0 var(--nude)}
.res>.i{width:46px;height:46px;padding:11px;border-radius:50%;background:var(--l4);color:#fff}
.res b{font:800 16px var(--f-txt)}
.res p{font:700 13.5px/1.3 var(--f-txt);color:var(--canela)}
.piezas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pz{position:relative;padding:8px 8px 12px;border-radius:24px;background:var(--papel);box-shadow:0 5px 0 var(--nude);cursor:pointer}
.pz-foto{border-radius:18px;overflow:hidden;background:linear-gradient(#F3C6E2,#E9A2CF);aspect-ratio:1}
.pz-foto img{width:100%;height:100%;object-fit:cover}
.pz.recortada .pz-foto img{object-fit:contain;padding:8px;filter:drop-shadow(0 8px 8px rgba(107,26,42,.3))}
.pz .tag{position:absolute;top:14px;left:14px}
.pz h3{margin:10px 4px 2px;font:900 17px/1.1 var(--f-tit)}
.pz p{margin:0 4px;font:700 12.5px/1.3 var(--f-txt);color:var(--canela)}

/* ───── AVISOS ───── */
.bandeja{display:grid;gap:10px}
.item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:start;width:100%;padding:12px;border:0;border-radius:22px;background:var(--papel);color:var(--tinta);text-align:left;box-shadow:0 3px 0 var(--nude)}
.item.nuevo{background:#fff;box-shadow:0 3px 0 var(--rosa),inset 5px 0 0 var(--pintura)}
.a-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff}
.a-ic .i{width:22px;height:22px}
.c-l1{background:var(--l1)}.c-l2{background:var(--l2)}.c-l3{background:var(--l3)}.c-l4{background:var(--l4)}.c-l5{background:var(--l5)}.c-l6{background:var(--l6)}
.c-pintura{background:var(--pintura)}.c-cacao{background:var(--cacao)}.c-caramelo{background:var(--caramelo)}
.a-txt b{display:block;font:800 15.5px/1.22 var(--f-txt)}
.a-txt span{display:block;margin-top:2px;font:600 14px/1.35 var(--f-txt);color:var(--canela)}
.a-hace{font:800 12px var(--f-txt);color:var(--caramelo);white-space:nowrap;padding-top:2px}
.vacio{padding:18px;text-align:center;color:var(--canela);font-weight:700}
.col-der{display:grid;gap:0}
.como,.datos{margin-top:30px;padding:18px;border-radius:28px;background:var(--papel);box-shadow:0 5px 0 var(--nude)}
.canal{padding:14px 0;border-bottom:2px dashed var(--nude)}
.canal:first-of-type{padding-top:2px}
.c-cab{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start;margin-bottom:12px}
.c-cab b{font:900 17px var(--f-txt)}
.c-cab p{font:600 13.5px/1.35 var(--f-txt);color:var(--canela)}
.c-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--l4);color:#fff}
.c-ic.negro{background:#000}
.c-ic .wl{width:30px}
.btn-wallet{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:52px;padding:8px 18px;border:0;border-radius:13px;background:#000;color:#fff;text-decoration:none;font:600 18px/1.05 -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;box-shadow:0 4px 0 #444}
.btn-wallet .wl{width:34px;height:auto}
.btn-wallet span{display:grid;text-align:left}
.btn-wallet small{font-size:11.5px;font-weight:500;opacity:.9}
.prefs{padding-top:14px}
.p-tit{font:900 15px var(--f-txt);margin-bottom:6px}
.pref{display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;border:0;background:none;text-align:left}
.pref span{flex:1}
.pref b{display:block;font:800 15.5px/1.2 var(--f-txt)}
.pref small{display:block;font:600 13px/1.3 var(--f-txt);color:var(--canela)}
.sw{position:relative;flex:none;width:52px;height:31px;border-radius:16px;background:var(--arena);transition:background .2s}
.sw::after{content:"";position:absolute;top:3.5px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 3px rgba(43,27,19,.25);transition:transform .2s}
.sw.on{background:var(--l5)}
.sw.on::after{transform:translateX(20px)}
.datos label{display:grid;gap:6px;font:800 14px var(--f-txt);color:var(--cacao);margin-bottom:12px}
.datos input,.datos select{width:100%;min-height:48px;padding:10px 14px;border:2.5px solid var(--nude);border-radius:15px;background:#fff;color:var(--tinta);font:700 16px var(--f-txt);appearance:none;-webkit-appearance:none}
.datos input:focus,.datos select:focus{outline:none;border-color:var(--pintura)}
.cumple{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;align-items:end}
.cumple label{margin-bottom:0}
.datos .nota{margin:8px 0 14px}
.datos .nro{margin-top:14px;font:700 12.5px var(--f-txt);color:var(--caramelo)}
.s-demo,[data-a="demo"]{margin-top:26px}

/* ───── hojas ───── */
#velo{position:fixed;inset:0;z-index:40;background:rgba(43,27,19,.48);opacity:0;transition:opacity .25s}
#velo.abierto{opacity:1}
#hoja{position:fixed;left:0;right:0;bottom:0;z-index:41;display:flex;flex-direction:column;max-height:calc(100dvh - 24px);background:var(--crema);border-radius:28px 28px 0 0;box-shadow:0 -12px 40px rgba(43,27,19,.28);transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.9,.25,1)}
#hoja.abierta{transform:none}
#hoja .asa{flex:none;width:46px;height:5px;margin:9px auto 2px;border-radius:3px;background:var(--arena)}
#hoja .cerrar{position:absolute;top:12px;right:12px;z-index:5;width:40px;height:40px;border:0;border-radius:50%;background:var(--papel);box-shadow:0 3px 0 var(--nude)}
#hoja .cerrar::before,#hoja .cerrar::after{content:"";position:absolute;left:11px;right:11px;top:18.5px;height:3px;border-radius:2px;background:var(--cacao);transform:rotate(45deg)}
#hoja .cerrar::after{transform:rotate(-45deg)}
#hoja .cuerpo{overflow-y:auto;overscroll-behavior:contain;padding:6px var(--gut) calc(18px + var(--safe-b))}
.flota{position:sticky;bottom:calc(8px + var(--safe-b));z-index:4;margin-top:18px;padding-top:10px;background:linear-gradient(rgba(245,237,227,0),var(--crema) 34%)}
.flota .pagas{margin-top:10px;text-align:center;font:800 13.5px var(--f-txt);color:var(--canela)}
.cant{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--papel);box-shadow:0 3px 0 var(--nude)}
.cant button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--nude);color:var(--tinta)}
.cant button .i{width:19px;height:19px;stroke-width:3}
.cant b{min-width:30px;text-align:center;font:900 18px var(--f-txt);font-variant-numeric:tabular-nums}
.cant.chica button{width:34px;height:34px}
.cant.grande b{min-width:46px;font-size:22px}

/* tu tarjeta (QR) */
.h-tarjeta{display:grid;justify-items:center;text-align:center;padding-top:4px}
.h-tarjeta .h-tit{margin:4px 0 14px;font-style:italic;font-size:32px}
.qr-caja{position:relative;width:min(76vw,300px);padding:14px 14px 36px;border-radius:26px;background:#fff;box-shadow:0 6px 0 var(--arena),0 20px 30px -18px rgba(92,58,39,.5)}
.qr-caja svg{display:block;width:100%;height:auto}
.qr-nro{position:absolute;left:0;right:0;bottom:10px;font:900 16px var(--f-txt);letter-spacing:1px;font-variant-numeric:tabular-nums}
.t-nombre{margin-top:14px;font:900 24px var(--f-tit);font-style:italic}
.ayuda{font:700 14.5px/1.35 var(--f-txt);color:var(--canela);margin:4px 0 16px}
.t-bot{display:grid;gap:12px;width:100%;max-width:420px}
.t-bot .nota{margin-top:-4px}

/* ficha */
.h-ficha .f-foto{position:relative;height:min(58vh,540px);margin-top:2px;border-radius:24px;overflow:hidden;background:var(--nude)}
.h-ficha .borroso{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);max-width:none;object-fit:cover;filter:blur(22px) saturate(1.15);opacity:.9}
.h-ficha .entera{position:relative;height:100%;width:auto;max-width:100%;margin:0 auto;object-fit:contain}
.f-datos{padding:16px 4px 0}
.f-cat{font:900 12px/1 var(--f-txt);letter-spacing:1.4px;text-transform:uppercase;color:var(--pintura);margin-top:6px}
.f-datos h2{margin:4px 0 8px;font:900 32px/1.02 var(--f-tit);letter-spacing:-.6px}
.f-d{font:600 16px/1.42 var(--f-txt);color:var(--cacao)}
.f-precio{margin-top:10px;font:900 24px var(--f-tit);font-variant-numeric:tabular-nums}
.h-ficha .flota{display:flex;gap:10px;align-items:center;padding:8px;border-radius:999px;background:var(--tinta);box-shadow:0 12px 26px -6px rgba(43,27,19,.55)}
.h-ficha .flota .cant{background:#4A3327;box-shadow:none}
.h-ficha .flota .cant button{background:#6A4C3B;color:#fff}
.h-ficha .flota .cant b{color:#fff}
.h-ficha .flota .btn{flex:1;min-width:0;min-height:50px;padding-inline:14px;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 4px 0 var(--pintura-o)}

/* pedido */
.lineas{display:grid;gap:10px}
.linea{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:18px;background:var(--papel);box-shadow:0 3px 0 var(--nude)}
.linea img{width:54px;height:54px;border-radius:14px;object-fit:cover}
.linea b{display:block;font:800 15.5px/1.15 var(--f-txt)}
.linea small{font:700 13.5px var(--f-txt);color:var(--canela);font-variant-numeric:tabular-nums}
.p-sub{margin:20px 0 10px;font:900 13px/1 var(--f-txt);letter-spacing:1.3px;text-transform:uppercase;color:var(--cacao)}
.regs{display:grid;gap:10px}
.reg-op{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;width:100%;padding:12px;border:2.5px solid var(--rosa);border-radius:18px;background:#fff;text-align:left}
.reg-op.on{border-color:var(--pintura);background:#FCEBF5}
.reg-op .caja{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:2.5px solid var(--pintura);color:#fff}
.reg-op.on .caja{background:var(--pintura)}
.reg-op.sugerido{border-style:dashed}
.reg-op.sugerido .caja{border:0;color:var(--pintura)}
.reg-op b{display:block;font:800 15px/1.2 var(--f-txt)}
.reg-op small{font:700 13px var(--f-txt);color:var(--canela)}
.btn-mini{padding:8px 14px;border:0;border-radius:999px;background:var(--pintura);color:#fff;font:800 14px var(--f-txt);box-shadow:0 3px 0 var(--pintura-o)}
.chips-fila{display:flex;gap:10px;flex-wrap:wrap}
.ch{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:10px 16px;border:2.5px solid var(--nude);border-radius:999px;background:var(--papel);color:var(--cacao);font:800 15px var(--f-txt)}
.ch .i{width:18px;height:18px}
.ch.on{border-color:var(--tinta);background:var(--tinta);color:#fff}
.totales{margin-top:18px;padding:14px 16px;border-radius:18px;background:var(--papel)}
.totales p{display:flex;justify-content:space-between;font:700 15px var(--f-txt);font-variant-numeric:tabular-nums}
.totales .desc{color:var(--pintura)}
.totales .tot{font-size:17px}
.totales .tot b{font:900 24px var(--f-tit)}

/* reserva */
.exp-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.exp-op{display:grid;justify-items:center;gap:4px;padding:8px 6px 10px;border:2.5px solid var(--nude);border-radius:20px;background:var(--papel);color:var(--tinta)}
.exp-op img{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover}
.exp-op b{font:900 15px var(--f-tit);font-style:italic}
.exp-op small{font:800 12.5px var(--f-txt);color:var(--canela);font-variant-numeric:tabular-nums}
.exp-op.on{border-color:var(--pintura);background:#FCEBF5;box-shadow:0 4px 0 var(--pintura)}
.dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dia{position:relative;display:grid;justify-items:center;gap:2px;padding:9px 0 8px;border:2.5px solid var(--nude);border-radius:16px;background:var(--papel);color:var(--tinta)}
.dia small{font:800 11.5px var(--f-txt);color:var(--canela)}
.dia b{font:900 20px var(--f-tit);font-variant-numeric:tabular-nums}
.dia em{position:absolute;bottom:-9px;padding:1px 5px;border-radius:6px;background:var(--crema);font:800 9.5px var(--f-txt);font-style:normal;color:var(--caramelo)}
.dia.finde{border-color:var(--rosa)}
.dia.on{border-color:var(--tinta);background:var(--tinta);color:#fff}
.dia.on small{color:var(--rosa-cl)}
.dia:disabled{opacity:.45}
.nota.finde{color:var(--pintura)}
.horas{display:flex;flex-wrap:wrap;gap:8px}
.ch.hora{min-width:78px;justify-content:center;font-variant-numeric:tabular-nums}
.h-reserva.hecha{display:grid;justify-items:center;text-align:center;padding-top:10px}
.ok-sello .sello{--d:120px;--sf:var(--pintura);--sa:#FFF6EA;transform:rotate(-8deg);animation:sellar .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes sellar{from{transform:scale(1.8) rotate(10deg);opacity:0}}
.h-reserva.hecha .h-tit{margin:16px 0 8px}
.resumen{font:700 16px/1.5 var(--f-txt);color:var(--cacao);margin-bottom:6px}
.h-reserva.hecha .btn{margin-top:18px}
.h-confirma p{font:600 16px/1.45 var(--f-txt);color:var(--cacao);margin-bottom:20px}

/* Pintá y descubrí */
.h-lienzo{display:grid;justify-items:center;text-align:center}
.h-lienzo .h-tit{margin:4px 0 6px}
.h-lienzo .h-tit .pincelada{font-size:40px}
.h-lienzo .sub{font:700 15px/1.35 var(--f-txt);color:var(--cacao);max-width:340px;margin-bottom:14px}
.marco{position:relative;width:min(100%,calc(52dvh * .8),420px);aspect-ratio:4/5;border-radius:6px;background:#FFFCF6;box-shadow:6px 8px 0 #E2CFB9,0 18px 30px -12px rgba(92,58,39,.45);touch-action:none;overflow:hidden}
.marco canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.pista{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--rosa-cl);color:var(--pintura);font:900 15px var(--f-txt);pointer-events:none;animation:late 1.6s ease-in-out infinite;transition:opacity .25s}
.pista.fuera{opacity:0;animation:none}
.premio{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(255,252,246,.35)}
.pr-in{display:grid;justify-items:center;gap:4px;width:100%;padding:22px 16px 18px;border-radius:24px;background:#fff;box-shadow:0 10px 30px rgba(43,27,19,.3);animation:sale-premio .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes sale-premio{from{transform:scale(.4) rotate(-6deg);opacity:0}}
.sello-premio{--d:76px;--sf:var(--pintura);--sa:#FFF6EA;margin:-50px 0 2px;transform:rotate(-10deg)}
.pr-in small{font:900 12px var(--f-txt);letter-spacing:1.5px;text-transform:uppercase;color:var(--pintura)}
.pr-in h3{font:900 25px/1.05 var(--f-tit);letter-spacing:-.4px}
.pr-in img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid var(--rosa-cl);margin:6px 0}
.pr-in p{font:700 14px/1.35 var(--f-txt);color:var(--cacao);margin-bottom:12px}
.pr-in.nada h3{margin-bottom:4px}
.paleta{display:flex;gap:10px;margin:18px 0 12px}
.pc{width:36px;height:36px;border:3px solid var(--papel);border-radius:50% 46% 52% 44%;background:var(--c);box-shadow:0 3px 0 rgba(43,27,19,.25)}
.pc.on{transform:translateY(-5px) scale(1.12);box-shadow:0 0 0 3px var(--tinta),0 6px 0 rgba(43,27,19,.25)}
.medidor{width:min(100%,320px);height:10px;border-radius:5px;background:var(--nude);overflow:hidden}
.medidor span{display:block;width:0;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--l1),var(--l2),var(--l3),var(--l4),var(--l5),var(--l6));transition:width .15s}

/* ───── cartel de aviso (como una notificación) ───── */
#cartel{position:fixed;left:0;right:0;top:0;z-index:80;padding:calc(var(--safe-t) + 8px) 8px 0;pointer-events:none;transform:translateY(-140%);transition:transform .5s cubic-bezier(.2,1.25,.35,1)}
#cartel.baja{transform:none}
#cartel.sale{transform:translateY(-140%);transition:transform .3s ease-in}
.noti{pointer-events:auto;display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:start;width:100%;max-width:440px;margin:0 auto;padding:11px 14px 12px 11px;border:0;border-radius:24px;background:rgba(255,252,248,.88);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:0 14px 36px rgba(43,27,19,.3),0 0 0 .5px rgba(43,27,19,.14);color:#1b120d;text-align:left;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','Nunito',sans-serif}
.noti img{width:38px;height:38px;border-radius:9px;margin-top:2px}
.n-app{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;line-height:1.2;color:#85766d}
.n-app b{font-weight:600;letter-spacing:.3px}
.n-t{display:block;margin-top:1px;font-size:15px;font-weight:650;line-height:1.25}
.n-x{display:block;font-size:14.5px;line-height:1.3;color:#3a2b22}

/* ───── festejo de letra ───── */
#festejo{position:fixed;inset:0;z-index:70;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:end;overflow:hidden;opacity:0;transition:opacity .3s}
#festejo.va{opacity:1}
#festejo.sale{opacity:0}
.f-fondo{position:absolute;inset:0;background:radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--c) 20%,#FFF9F2) 0,var(--crema) 72%)}
.f-svg{position:relative;width:min(100vw,56dvh,640px);height:auto;margin-bottom:-4dvh;overflow:visible}
.f-letra{transform-box:view-box}
#festejo.pintada .f-letra{animation:rebote .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes rebote{30%{transform:scale(1.08,.94)}60%{transform:scale(.97,1.04)}}
.salp{transform-box:fill-box;transform-origin:center;transform:scale(0)}
#festejo.pintada .salp{animation:salpica .5s var(--d) cubic-bezier(.3,1.7,.5,1) forwards}
@keyframes salpica{to{transform:scale(1)}}
.f-pincel{transition:opacity .4s .15s}
#festejo.pintada .f-pincel{opacity:0}
.f-txt{position:relative;display:grid;justify-items:center;gap:10px;width:100%;max-width:480px;padding:0 var(--gut) calc(26px + var(--safe-b));text-align:center;opacity:0;transform:translateY(18px);transition:opacity .4s .2s,transform .4s .2s}
#festejo.pintada .f-txt{opacity:1;transform:none}
.f-t1{font:400 52px/1 var(--f-mano);color:var(--tinta)}
.f-t1 b{font-weight:400;font-size:1.25em}
.f-t2{font:800 17px/1.3 var(--f-txt);color:var(--cacao);max-width:320px}
.f-bot{display:grid;gap:12px;width:100%;margin-top:8px}
.f-bot .btn{width:100%}
#festejo.completa .f-t1{font-size:46px}
.f-regalo{position:relative;display:grid;grid-template-columns:86px 1fr;gap:14px;align-items:center;text-align:left;padding:10px 14px 10px 10px;border-radius:24px;background:var(--papel);box-shadow:0 5px 0 var(--nude)}
.f-regalo img{width:86px;height:86px;border-radius:18px;object-fit:cover}
.f-regalo .f-t2{font-size:15.5px}
.sello-f{--d:54px;--sf:var(--pintura);--sa:#FFF6EA;position:absolute;left:58px;top:-14px;transform:rotate(-12deg)}
#festejo.completa .f-t1 b{color:var(--pintura)}

/* aviso corto */
#aviso-corto{position:fixed;left:50%;bottom:calc(var(--barra) + var(--safe-b) + 78px);z-index:90;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:16px;background:var(--tinta);color:#fff;font:800 14.5px/1.3 var(--f-txt);text-align:center;box-shadow:0 10px 24px rgba(43,27,19,.35);transform:translate(-50%,16px);opacity:0;transition:transform .25s,opacity .25s;pointer-events:none}
#aviso-corto.ve{transform:translate(-50%,0);opacity:1}
html.con-hoja #aviso-corto{top:calc(var(--safe-t) + 14px);bottom:auto;transform:translate(-50%,-16px)}
html.con-hoja #aviso-corto.ve{transform:translate(-50%,0)}

/* ───── pantallas chicas ───── */
@media (max-width:370px){
  .quien{font-size:34px}
  .tarjeta h2{font-size:26px}
  .vas b{font-size:23px}
  .ver-qr{padding:11px 13px;font-size:14px}
  .prod h3{font-size:17px}
  .titulo{font-size:32px}
  .lienzo-card{grid-template-columns:92px 1fr}
  .caballete{width:92px}
  .t-txt h3{font-size:20px}
  .ticket{grid-template-columns:62px minmax(0,1fr) auto}
  .t-foto{width:62px;height:62px}
  .sello-regalo{--d:64px}
  .ticket::after{right:80px}
  .h-ficha .flota .btn{font-size:15.5px}
  .cant button{width:36px;height:36px}
}

/* ───── iPad y escritorio: la app ocupa la ventana ───── */
@media (min-width:700px){
  :root{--gut:28px;--barra:76px}
  .inicio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;align-items:stretch}
  .inicio>.sec{grid-column:1/-1}
  .inicio>.s-regalos,.inicio>.s-lienzo,.inicio>.s-pieza,.inicio>.s-pedido{grid-column:auto}
  .inicio>.sec.solo{grid-column:1/-1}
  .s-saludo{display:flex;align-items:baseline;gap:16px;padding-top:12px}
  .quien{font-size:48px}
  .tarjeta{padding:20px 22px 22px}
  .tarjeta h2{font-size:38px}
  .sello-tarjeta{--d:96px}
  .pared{padding-top:72px;margin-top:16px}
  .escena{max-width:760px;margin:0 auto}
  .vas b{font-size:30px}
  .lienzo-card{height:100%}
  .regalos{height:100%;grid-auto-rows:1fr}
  .prods{grid-template-columns:repeat(4,minmax(0,1fr))}
  .exps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .exp{grid-template-columns:1fr;padding:10px 10px 16px}
  .exp img{width:100%;height:200px}
  .e-txt{padding:0 6px}
  .exps+.btn.grande{max-width:420px;display:flex;margin:0 auto}
  .filas{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cat{scroll-margin-top:150px}
  .avisos-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;align-items:start}
  .col-der .como{margin-top:0}
  .mi-pieza{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;padding:18px}
  .mp-foto img{height:100%;min-height:340px}
  .piezas{grid-template-columns:repeat(4,minmax(0,1fr))}
  #barra{grid-template-columns:1fr 1fr 96px 1fr 1fr;padding-inline:max(16px,calc(50% - 330px))}
  #pedido-flota{left:auto;right:var(--gut);min-width:360px}
  #hoja{left:50%;right:auto;top:50%;bottom:auto;width:min(580px,calc(100vw - 48px));max-height:min(88dvh,900px);border-radius:30px;transform:translate(-50%,-44%) scale(.97);opacity:0;transition:transform .28s cubic-bezier(.2,.9,.25,1),opacity .2s}
  #hoja.abierta{transform:translate(-50%,-50%);opacity:1}
  #hoja .asa{visibility:hidden}
  .h-ficha .f-foto{height:min(52dvh,520px)}
  .f-svg{width:min(100vw,52dvh,620px)}
  #aviso-corto{bottom:calc(var(--barra) + 30px)}
}
@media (min-width:1100px){
  :root{--barra:0px}
  #app{padding-left:112px}
  #barra{top:0;bottom:0;right:auto;width:112px;height:auto;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:20px 0;border-radius:0 32px 32px 0;box-shadow:1px 0 0 var(--nude),12px 0 30px -18px rgba(92,58,39,.35)}
  #centro{order:-1;margin:0 0 18px}
  .tab{width:100%;font-size:13px}
  .vista{padding-bottom:110px}
  .prods{gap:46px 18px}
  #pedido-flota{bottom:28px;right:32px}
  #aviso-corto{bottom:34px;margin-left:56px}
  .exp img{height:240px}
  .s-cab{margin:0 calc(-1 * var(--gut))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ═════════ VIBRA · color pleno, condensada gruesa, destacado, cinta y movimiento ═════════ */
:root{--f-cond:'Oswald','Arial Narrow',Impact,sans-serif}
#app{overflow-x:clip}
/* cada banderín se mece desde su punto de la cuerda */
.banderines .bd{transform-box:view-box;transform-origin:0 0}
.s-cab .banderines,.tab-cab .banderines{overflow:visible}
.btn.oscuro{background:var(--espresso);color:#FFF6EA;box-shadow:0 5px 0 #120A06}
.btn.oscuro:active{box-shadow:0 1px 0 #120A06}

/* cabecera espresso a todo el ancho que baja por detrás de la tarjeta */
.s-cab{position:relative;isolation:isolate;overflow:hidden;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 112px;background:var(--espresso);color:#FFF6EA;border-radius:0 0 36px 36px}
.s-cab .banderines,.tab-cab .banderines{width:calc(100% + 2 * var(--gut));max-width:none;margin-left:calc(-1 * var(--gut))}
.cab-agua{position:absolute;z-index:-1;right:-70px;top:calc(var(--safe-t) + 44px);width:310px;color:#FFF6EA;opacity:.075;transform:rotate(-12deg);pointer-events:none}
.s-cab .cab-fila{gap:12px;padding:0;margin-top:-2px}
.s-cab .logo-chico{height:68px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.28))}
.estado{flex:1;min-width:0;display:grid;gap:3px}
.estado b{display:flex;align-items:center;gap:7px;font:800 14.5px/1.2 var(--f-txt);color:#fff}
.estado b i{flex:none;width:9px;height:9px;border-radius:50%;background:#5BE08B;box-shadow:0 0 0 3px rgba(91,224,139,.25);animation:late 1.8s ease-in-out infinite}
.estado.cerrado b i{background:#FFB020;box-shadow:0 0 0 3px rgba(255,176,32,.22);animation:none}
.estado small{font:700 12.5px/1.25 var(--f-txt);color:rgba(255,246,234,.62)}
.s-cab .campana{flex:none;background:rgba(243,198,226,.16);color:#FFF6EA;box-shadow:none}
.s-cab .campana .num{border-color:var(--espresso)}
.s-cab .hola{margin-top:16px;font:400 31px/1 var(--f-mano);color:var(--rosa);transform:rotate(-2.5deg);transform-origin:left}
.s-cab .quien{margin-top:6px;font:900 40px/1 var(--f-tit);color:#FFF6EA;letter-spacing:-.8px}
.s-cab .quien i{color:var(--rosa)}
.s-tarjeta{position:relative;z-index:2;margin-top:-92px}

/* tu tarjeta con color pleno: pared pintada, manchas, pincel que gotea, sello que gira */
.tarjeta{padding:16px 12px;background:#F6BEDF;color:var(--espresso);box-shadow:0 7px 0 var(--pintura),0 28px 36px -20px rgba(43,27,19,.65)}
.t-sobre{color:#8E1F63}
.tarjeta h2{margin-top:3px;font:700 38px/.95 var(--f-cond);font-style:normal;text-transform:uppercase;letter-spacing:.3px;color:var(--espresso)}
.sello-tarjeta{--d:86px;--sf:var(--espresso);--sa:#FFF6EA}
.sello-tarjeta svg,.sello-dest svg{animation:gira 26s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.pared{margin:12px -2px 0;padding:60px 4px 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' opacity='.42'%3E%3Cpath d='M18 14c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z'/%3E%3Cpath d='M86 62s-6-3.7-6-8a3.4 3.4 0 0 1 6-2 3.4 3.4 0 0 1 6 2c0 4.3-6 8-6 8z'/%3E%3Cpath d='M60 26c3-3 6 3 9 0'/%3E%3Cpath d='M22 74c3-3 6 3 9 0'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(#EE97C9,#E27BB7)}
.pared::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath fill='%23C2307F' d='M0 0h300v6c-5 0-6 2-7 8s-4 7-5 0-3-8-11-7c-8 1-5 13-10 13s-3-13-13-14h-44c-7 0-6 20-11 20s-4-19-11-19h-36c-6 0-5 10-9 10s-3-10-10-10H90c-7 0-6 15-10 15s-4-15-10-15H32c-5 0-4 8-8 8s-3-8-8-8H0z'/%3E%3C/svg%3E") top/100% 100% no-repeat}
.manch{position:absolute;z-index:0;width:var(--s);aspect-ratio:1;border-radius:46% 54% 42% 58%/55% 45% 55% 45%;background:var(--c);box-shadow:calc(var(--s) * .9) calc(var(--s) * -.3) 0 calc(var(--s) * -.3) var(--c),calc(var(--s) * -.5) calc(var(--s) * .8) 0 calc(var(--s) * -.36) var(--c)}
.letra .pincel{animation:balancea 2.6s ease-in-out infinite}
@keyframes balancea{0%,100%{transform:rotate(-78deg)}35%{transform:rotate(-66deg) translate(4px,-6px)}70%{transform:rotate(-86deg) translate(-2px,2px)}}
.letra .gota{position:absolute;left:46%;top:-3%;z-index:3;width:9px;height:12px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:#D02694;box-shadow:inset -2px -2px 0 rgba(0,0,0,.12);opacity:0;pointer-events:none;animation:gota 2.6s ease-in infinite}
@keyframes gota{0%,40%{opacity:0;transform:translateY(-4px) scale(.3)}50%{opacity:1;transform:none}72%{opacity:1;transform:translateY(30px) scale(.9,1.12)}78%{opacity:1;transform:translateY(34px) scale(1.8,.4)}100%{opacity:0;transform:translateY(34px) scale(2.1,.25)}}
.tarjeta .letra{cursor:pointer;transform-origin:50% 100%}
.letra.salta{animation:saltaL .62s cubic-bezier(.3,1.6,.5,1)}
@keyframes saltaL{30%{transform:translateY(-18px) rotate(-6deg) scale(1.06)}55%{transform:scale(1.1,.88)}75%{transform:scale(.97,1.05)}}
.vas{color:#7A2152}
.vas b{font:700 31px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.3px;color:var(--espresso)}
.ver-qr{padding:13px 18px;background:var(--espresso);box-shadow:0 5px 0 #000}

/* destacado: la campaña de ahora */
.s-destacado{margin-top:70px}
.destacado{position:relative;isolation:isolate;container-type:inline-size;min-height:440px;padding:20px 18px 24px;border-radius:32px;background:var(--l6);color:var(--espresso);box-shadow:0 8px 0 #B86400,0 30px 36px -22px rgba(58,36,25,.7)}
.d-in{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden}
.d-halo{position:absolute;right:-22%;top:-18%;width:84%;aspect-ratio:1;border-radius:50%;background:#FFB43C;box-shadow:0 0 0 26px rgba(255,190,80,.45)}
.d-cut{position:absolute;z-index:2;right:-30px;top:-78px;width:min(72%,300px);max-width:none;filter:drop-shadow(0 22px 16px rgba(58,36,25,.45));pointer-events:none;animation:subeD .9s cubic-bezier(.3,1.45,.5,1) backwards,flotaD 5.2s .9s ease-in-out infinite}
@keyframes subeD{from{transform:translateY(60px) rotate(12deg) scale(.7);opacity:0}}
@keyframes flotaD{50%{transform:translateY(-9px) rotate(2.5deg)}}
.d-chip{position:relative;z-index:3;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px 0 11px;border-radius:99px;background:var(--espresso);color:#FFE2B0;font:800 11.5px/1 var(--f-txt);letter-spacing:.6px;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.d-chip i{width:7px;height:7px;border-radius:50%;background:var(--l6);animation:late 1.4s ease-in-out infinite}
.d-mano{position:relative;z-index:3;margin:16px 0 0 4px;max-width:52%;font:400 29px/1.02 var(--f-mano);color:var(--espresso);transform:rotate(-4deg);transform-origin:left}
.d-tit{position:relative;z-index:3;margin-top:20px;font:700 clamp(54px,19.5cqw,104px)/.9 var(--f-cond);text-transform:uppercase;letter-spacing:.2px}
.d-pinc{position:relative;z-index:0;display:inline-block;margin:2px 0 0 6px;padding:2px 14px 6px;font:400 .56em/1 var(--f-mano);text-transform:none;letter-spacing:0;color:#fff;transform:rotate(-3deg)}
.d-pinc::before{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23D02694' d='M7 9C42 3 118 5 193 7c3 3-2 6 1 9-2 3 2 6-1 9 2 3-1 5 2 8-48 5-121 6-187 4 3-3-3-5 1-8-3-3 2-5-2-8 3-3-2-6 0-9z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.d-pie{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.d-txt{max-width:62%;font:800 15.5px/1.32 var(--f-txt)}
.sello-dest{--d:112px;--sf:var(--l2);--sa:#fff;flex:none;margin:-8px -4px -14px 0;transform:rotate(-10deg);animation:sellaD .55s .5s cubic-bezier(.3,1.6,.5,1) backwards}
.sello-dest .s-c{font-size:17px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
@keyframes sellaD{from{transform:rotate(30deg) scale(0)}}
.d-bot{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:16px}
.d-lnk{padding:6px 2px;border:0;background:none;color:var(--espresso);font:900 15px var(--f-txt);text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:4px}

/* cinta inclinada en movimiento, dos cruzadas */
.s-cinta{position:relative;height:136px;margin:34px calc(-1 * var(--gut)) 0;overflow:hidden}
.cinta{position:absolute;left:-10%;right:-10%;top:50%;padding:11px 0 10px;overflow:hidden;white-space:nowrap}
.cinta div{display:inline-block;font:700 21px/1 var(--f-cond);letter-spacing:.8px;text-transform:uppercase;animation:corre 60s linear infinite}
.cinta span{display:inline-block}
.cinta i{display:inline-block;margin:0 14px;font-style:normal;font-family:var(--f-txt)}
.cinta.c1{z-index:2;background:var(--l2);color:#fff;box-shadow:0 5px 0 #8E1F63;transform:translateY(-50%) rotate(-6deg)}
.cinta.c1 i{color:var(--rosa-cl)}
.cinta.c2{z-index:1;background:var(--l1);color:var(--espresso);box-shadow:0 5px 0 #017C7C;transform:translateY(-50%) rotate(4.6deg)}
.cinta.c2 div{animation-direction:reverse;animation-duration:70s}
@keyframes corre{to{transform:translateX(-50%)}}

/* para hoy: recortes más grandes saliendo de la tarjeta y flotando */
.prods{gap:84px 12px;padding-top:70px}
.p-img{height:112px}
.p-img img.recorte{left:-8%;width:116%;height:186px;animation:flotaP 4.8s ease-in-out infinite}
.prod:nth-child(2) img.recorte{animation-delay:-1.2s}
.prod:nth-child(3) img.recorte{animation-delay:-2.4s}
.prod:nth-child(4) img.recorte{animation-delay:-3.6s}
@keyframes flotaP{50%{transform:translateY(-8px) rotate(-1.5deg)}}
.sello-precio{--d:80px;top:-38px;right:-14px}
.sello-precio .s-c{font-size:17px}
.prod h3{font:700 23px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.3px}
.prod{box-shadow:0 6px 0 rgba(43,27,19,.38)}
.titulo{font-size:40px}

/* barra de abajo oscura con el botón central de color */
#barra{background:var(--espresso);box-shadow:0 -12px 30px -12px rgba(43,27,19,.6)}
#barra::before{content:"";position:absolute;z-index:-1;left:50%;top:-20px;width:104px;height:58px;transform:translateX(-50%);border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--espresso)}
.tab{color:rgba(243,198,226,.66)}
.tab[aria-current]{color:#fff}
.tab[aria-current] .ic{background:var(--pintura);color:#fff;box-shadow:0 3px 0 var(--pintura-o)}
.tab .num{border-color:var(--espresso)}
#centro{box-shadow:0 5px 0 #000,0 12px 22px -6px rgba(0,0,0,.5)}
#centro img{border-color:var(--espresso)}
#pedido-flota{background:var(--pintura);box-shadow:0 5px 0 var(--pintura-o),0 14px 26px -8px rgba(43,27,19,.5)}
#pedido-flota b{background:var(--espresso)}

/* las otras pestañas: la misma cabecera */
.tab-cab{position:relative;margin:0 calc(-1 * var(--gut)) 24px;padding:0 var(--gut) 22px;background:var(--espresso);color:#FFF6EA;border-radius:0 0 32px 32px;overflow:hidden}
.tab-cab.pegada{margin-bottom:0;padding-bottom:6px;border-radius:0}
.tc-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:2px}
.tab-tit{margin:0;font:700 54px/.92 var(--f-cond);text-transform:uppercase;letter-spacing:.6px;color:#FFF6EA}
.tc-logo{height:56px;width:auto;flex:none}
.carta-cab{background:var(--espresso);border-radius:0 0 28px 28px;padding:4px var(--gut) 14px;box-shadow:0 12px 18px -14px rgba(43,27,19,.7)}
.chip{background:transparent;color:var(--rosa-cl);box-shadow:inset 0 0 0 2px rgba(243,198,226,.38)}
.chip.on{background:var(--rosa);color:var(--espresso);box-shadow:0 3px 0 var(--pintura)}
.cat h2{font:700 30px/1 var(--f-cond);font-style:normal;text-transform:uppercase;letter-spacing:.4px}

/* aparición escalonada al bajar (solo donde el navegador lo hace con el desplazamiento) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .prod,.exp,.ticket,.pieza-card,.pedido-card,.fila,.pz,.item{animation:aparece linear forwards;animation-timeline:view();animation-range:entry 0% entry 55%}
    .prod:nth-child(2n),.exp:nth-child(2),.pz:nth-child(2n){animation-range:entry 12% entry 67%}
    .exp:nth-child(3){animation-range:entry 22% entry 77%}
  }
}
@keyframes aparece{from{opacity:0;transform:translateY(46px) scale(.94)}}

@media (max-width:419px){ .estado .dir{display:none} }
@media (max-width:370px){
  .s-cab .quien{font-size:34px}
  .s-cab .logo-chico{height:60px}
  .estado b{font-size:13.5px}
  .tarjeta h2{font-size:33px}
  .vas b{font-size:27px}
  .d-mano{font-size:26px}
  .d-txt{font-size:14.5px}
  .sello-dest{--d:102px}
  .sello-dest .s-c{font-size:15.5px}
  .prod h3{font-size:20px}
  .tab-tit{font-size:48px}
}
@media (min-width:700px){
  .s-cab{padding-bottom:124px}
  .s-cab .logo-chico{height:80px}
  .s-cab .hola{font-size:36px}
  .s-cab .quien{font-size:52px}
  .cab-agua{width:440px;right:-30px;top:calc(var(--safe-t) + 20px)}
  .s-tarjeta{margin-top:-100px}
  .tarjeta h2{font-size:46px}
  .sello-tarjeta{--d:104px}
  .pared{padding-top:76px}
  .escena{max-width:820px}
  .s-destacado{margin-top:84px}
  .destacado{min-height:0;padding:28px 30px 30px}
  .d-cut{width:min(52%,470px);right:-36px;top:-70px}
  .d-pie{position:static;max-width:56%}
  .sello-dest{--d:132px;position:absolute;z-index:4;right:48px;bottom:40px;margin:0}
  .sello-dest .s-c{font-size:21px}
  .d-halo{width:64%;right:-8%;top:-14%}
  .d-mano{font-size:36px;max-width:50%}
  .d-tit{font-size:clamp(64px,11.4cqw,110px);max-width:60%}
  .s-cinta{height:170px}
  .cinta.c1{transform:translateY(-50%) rotate(-4.6deg)}
  .cinta.c2{transform:translateY(-50%) rotate(3.6deg)}
  .cinta div{font-size:25px}
  .tab-tit{font-size:66px}
  .tc-logo{height:70px}
}
@media (min-width:1100px){
  #barra::before{display:none}
}