/* Layout: campos de color a sangre, como las placas de BARZOFIO. Bandas de esquinas redondas que se pisan
   entre sí, tarjetas claras con cada producto parado sobre la silueta de un personaje,
   y los dos personajes vivos arriba de cada grilla. */
:root{
  --violeta:#574696;--amarillo:#eec51b;--verde:#339609;--negro:#151616;--gota:#7dc8e4;
  --papel:#fffdf6;--papel2:#f1edde;--gris:#55564f;--linea:rgba(21,22,22,.17);
  --f-txt:"Outfit","Helvetica Neue",Arial,sans-serif;--f-dis:var(--f-txt);
  --f-ser:"Bodoni Moda","Didot",Georgia,serif;
  --m:#574696;--ms:#463979;--ml:#c2bbd9;--mt:#fffdf6;--mn:#8d7fc6;--am:#eec51b;
  --radio:26px;--rb:clamp(34px,5vw,72px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--violeta);color:var(--negro);font:400 1rem/1.5 var(--f-txt);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--papel)}
h1,h2,h3{font-family:var(--f-txt);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.012em}
p,dl,dd,ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gota);outline-offset:2px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.marco{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sub{font-weight:300;font-size:clamp(1.15rem,2.2vw,1.85rem);line-height:1.15;text-wrap:balance}

/* ───────── Barra ───────── */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--papel)}
.b-int{display:flex;align-items:center;gap:clamp(10px,1.5vw,20px);max-width:1320px;margin-inline:auto;height:58px;min-width:0}
.b-logo{flex:none;display:flex;align-items:center;gap:8px;color:var(--negro);text-decoration:none}
.b-iso{width:32px;height:30px;display:block}
.b-pal{width:96px;height:15px;display:block}
.b-tabs{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.b-tabs::-webkit-scrollbar{display:none}
.b-tabs a{flex:none;padding:6px 12px;border-radius:99px;font-size:.95rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.b-tabs a:hover{background:var(--papel2)}
.b-tabs a[aria-current]{background:var(--violeta);color:#fff}
.b-der{flex:none;display:flex;align-items:center;gap:8px;position:relative}
.chip{display:flex;align-items:center;gap:7px;max-width:165px;padding:5px 11px;background:none;border:2px solid var(--negro);border-radius:99px;font-size:.9rem;font-weight:600}
.chip i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--m)}
.chip span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.monedas{display:flex;border:2px solid var(--negro);border-radius:99px;overflow:hidden}
.mon{background:none;border:0;padding:5px 9px;font-size:.8rem;font-weight:700}
.mon[aria-pressed="true"]{background:var(--negro);color:#fff}
.btn-pedido{display:flex;align-items:center;gap:8px;padding:7px 15px;background:var(--amarillo);color:var(--negro);border:0;border-radius:99px;font-weight:800;font-size:.98rem;white-space:nowrap;transition:transform .12s}
.btn-pedido:hover{transform:scale(1.04)}
.btn-pedido b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding-inline:5px;background:var(--negro);color:#fff;border-radius:11px;font-size:.8rem}
.btn-pedido .pedido-total{font-variant-numeric:tabular-nums;font-weight:600}
.pop-marca{position:absolute;right:0;top:calc(100% + 12px);width:min(350px,calc(100vw - 32px));background:var(--papel);padding:16px;border-radius:var(--radio);box-shadow:0 16px 40px rgba(21,22,22,.28);z-index:5}

/* ───────── Portada ───────── */
.portada{position:relative;overflow:clip;background:var(--violeta);color:#fff;padding-bottom:var(--rb)}
.p-mancha{position:absolute;top:0;right:0;bottom:0;width:45%;background:var(--amarillo);border-top-left-radius:clamp(120px,20vw,320px)}
.hilo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hilo path{fill:none;stroke:var(--amarillo);stroke-width:2;stroke-dasharray:9 8;vector-effect:non-scaling-stroke;animation:hilo 26s linear infinite}
@keyframes hilo{to{stroke-dashoffset:-400}}
.p-int{position:relative;display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);max-width:1320px;margin-inline:auto}
.p-izq{min-width:0;padding-block:clamp(16px,2vw,26px) clamp(14px,1.6vw,20px)}
.p-arriba{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(16px,2.4vw,30px);margin-bottom:clamp(14px,2vw,24px)}
.p-logo{--iso1:#fff;--iso2:var(--amarillo);display:block;width:clamp(116px,12vw,158px);aspect-ratio:1.62;color:#fff;flex:none}
.pildoras{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.pildoras li{padding:3px 12px;border:1.5px solid rgba(255,255,255,.9);border-radius:99px;font-weight:300;font-size:.92rem;white-space:nowrap}
.portada h1{font-size:clamp(2.6rem,6vw,5.5rem);line-height:.96}
.portada .sub{margin-top:8px}
.datos{display:flex;flex-wrap:wrap;gap:8px clamp(18px,3vw,38px);margin-top:clamp(12px,1.6vw,20px)}
.datos div{min-width:0}
.datos strong{display:block;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;font-weight:800;color:var(--amarillo)}
.datos span{display:block;margin-top:2px;font-size:.84rem;font-weight:300;max-width:17ch;line-height:1.2}
.probador{position:relative;margin-top:clamp(12px,1.6vw,20px);padding:13px 18px 15px;background:var(--papel);color:var(--negro);border-radius:var(--radio);min-width:0}
.probador h2{font-size:clamp(1.02rem,1.5vw,1.25rem);line-height:1.15;margin-bottom:9px}
.probador h2{padding-right:clamp(90px,11vw,150px)}
.probador .campos{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:end}
.probador .muestras{flex-wrap:nowrap}
.campos{display:grid;gap:11px}
.campo{min-width:0}
.campo>span{display:block;margin-bottom:4px;font-size:.78rem;font-weight:600;color:var(--gris)}
.marca-campo{width:100%;background:#fff;color:var(--negro);border:2px solid var(--negro);border-radius:99px;padding:8px 15px;font:700 1.02rem var(--f-txt)}
.marca-campo::placeholder{color:var(--gris);font-weight:400}
.muestras{display:flex;flex-wrap:wrap;gap:5px}
.muestra{position:relative;width:27px;height:27px;padding:0;border:0;background:var(--c);border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(21,22,22,.25);transition:transform .15s}
.muestra:hover{transform:scale(1.16)}
.muestra[aria-pressed="true"]{box-shadow:0 0 0 2px var(--papel),0 0 0 4px var(--negro)}
.muestra.libre{background:conic-gradient(#e5533b,#eec51b,#339609,#1fa5a0,#2e4bd8,#f08bb4,#e5533b);cursor:pointer;overflow:hidden;display:block}
.muestra.libre input{position:absolute;inset:-4px;opacity:0;cursor:pointer;width:140%;height:140%}
.logo-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.btn-linea{display:inline-block;padding:7px 15px;border:2px solid currentColor;border-radius:99px;background:transparent;font-weight:700;font-size:.92rem;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;white-space:nowrap;transition:background .15s}
.btn-linea:hover{background:rgba(21,22,22,.09)}
.btn-linea input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.btn-texto{background:none;border:0;padding:3px 0;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}

.escena{position:relative;min-height:440px;min-width:0}
.sticker{position:absolute;left:var(--x);top:var(--y);width:clamp(72px,21%,132px);transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--r));filter:url(#troquel);cursor:grab;transition:rotate .25s,scale .25s;user-select:none;z-index:2}
.sticker:hover{scale:1.1;rotate:calc(var(--r) * -.4);z-index:6}
.sticker.agarrado{cursor:grabbing;scale:1.15;z-index:7;transition:scale .15s}
.sticker .sb{display:none}
.sticker.tipo{width:clamp(150px,42%,265px)}
.tipo-svg{display:block;width:100%;height:auto;overflow:visible}
.tipo-svg text{paint-order:stroke;stroke:#fff;stroke-linejoin:round}
.h-bicho{position:absolute;bottom:0;z-index:3}
.h-bicho.v{right:3%;width:clamp(128px,36%,262px)}
.h-bicho.a{right:clamp(14px,2vw,26px);bottom:calc(100% - 2px);width:clamp(84px,9.6vw,136px)}
.giro{position:absolute;right:1%;top:12px;width:clamp(88px,16%,118px);aspect-ratio:1;z-index:1}
.giro>svg{display:block;width:100%;height:100%;overflow:visible;animation:giro-texto 16s linear infinite}
.giro text{font:400 16.500px var(--f-txt);letter-spacing:.09em;fill:var(--negro)}
.giro .fuerte{font-weight:800}
.giro:hover>svg{animation-duration:3s}
.giro-mano{position:absolute;inset:0;display:grid;place-items:center}
.giro-mano svg{width:32%;fill:none;stroke:var(--negro);stroke-width:1.5;stroke-linejoin:round}
@keyframes giro-texto{to{transform:rotate(360deg)}}
.escena-pista{position:absolute;left:30%;bottom:6px;font-size:.84rem;font-weight:500;color:var(--negro);z-index:1;display:none}

/* ───────── Bandas ───────── */
.banda{position:relative;margin-top:calc(var(--rb) * -1);padding-block:clamp(26px,3.6vw,50px) calc(var(--rb) + clamp(30px,4vw,56px));border-radius:var(--rb) var(--rb) 0 0;scroll-margin-top:calc(58px + env(safe-area-inset-top,0px))}
.banda-int{max-width:1320px;margin-inline:auto}
.c-verde{background:var(--verde);color:#fff}
.c-amarillo{background:var(--amarillo);color:var(--negro)}
.c-violeta{background:var(--violeta);color:#fff}
.c-negro{background:var(--negro);color:#fff}
.c-papel{background:var(--papel);color:var(--negro)}
.b-cab{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:8px clamp(18px,3vw,44px);align-items:end;padding-right:clamp(90px,17vw,230px);margin-bottom:0;min-height:clamp(112px,14vw,180px);padding-bottom:clamp(12px,1.6vw,20px)}
.b-cab.con-dos{padding-right:clamp(140px,25vw,330px)}
.b-cab.sin-bicho{padding-right:0;min-height:0}
.b-cab h2{font-size:clamp(2.7rem,7.4vw,6.4rem);line-height:.94}
#t-como{font-size:clamp(2.2rem,5.4vw,4.7rem)}
.b-cab .sub{margin-top:5px}
.b-baj{font-size:1.04rem;line-height:1.35;max-width:44ch;min-width:0}
.c-verde .b-baj{color:var(--negro);font-weight:500}
.b-mascota{position:absolute;right:clamp(0px,1.4vw,18px);bottom:-2px;width:clamp(82px,14vw,180px);z-index:2}
.b-mascota.dos{display:flex;align-items:flex-end;gap:2px;width:clamp(128px,23vw,300px)}
.b-mascota.dos>*{flex:1 1 0;min-width:0}

.p-grilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.celda{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;padding:14px clamp(14px,1.5vw,20px) 16px;background:var(--papel);color:var(--negro);border-radius:var(--radio);transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.celda:hover{transform:translateY(-4px)}
.c-arte{position:relative;display:block;width:100%;background:none;border:0;padding:4px 0 0;cursor:pointer}
.c-plato{position:relative;display:block;width:min(74%,250px);margin-inline:auto;transition:transform .18s ease-out;will-change:transform}
.c-blob{position:absolute;left:5%;bottom:-1%;width:90%;height:auto;overflow:visible;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.c-blob .bp{fill:var(--am)}
.c-blob .bz{fill:var(--negro)}
.c-arte:hover .c-blob{transform:scale(1.05,1.03) translateY(-3px)}
.c-plato .pv{position:relative}
.c-plato .sb{display:none}
.c-ver{position:absolute;right:0;top:2px;padding:3px 10px;background:var(--negro);color:#fff;border-radius:99px;font-size:.76rem;font-weight:600;opacity:0;translate:0 4px;transition:opacity .15s,translate .15s}
.c-arte:hover .c-ver,.c-arte:focus-visible .c-ver{opacity:1;translate:0 0}
.c-datos{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.c-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.76rem;margin-top:5px}
.c-meta .sku{font-weight:700;letter-spacing:.04em;color:var(--gris)}
.c-meta .tec{padding:1px 9px;border:1.5px solid var(--negro);border-radius:99px;font-weight:400;text-align:right;line-height:1.3}
.celda h3{font-size:clamp(1.34rem,1.9vw,1.62rem);line-height:1.06}
.c-nombre{background:none;border:0;padding:0;text-align:left;font:inherit;letter-spacing:inherit;text-decoration:underline transparent 2px;text-underline-offset:3px;transition:text-decoration-color .15s}
.c-nombre:hover{text-decoration-color:currentColor}
.c-desc{color:var(--gris);font-size:.95rem;line-height:1.32;margin-bottom:auto;padding-bottom:5px}
.esc-tit{margin-top:4px;font-size:.76rem;font-weight:500;color:var(--gris)}
.escala{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:2px solid var(--negro);border-radius:14px;overflow:hidden}
.esc{min-width:0;padding:5px 1px;background:none;border:0;border-left:1px solid var(--linea);display:grid;gap:0;text-align:center;transition:background .12s;font-variant-numeric:tabular-nums}
.esc:first-child{border-left:0}
.esc span{font-size:.76rem;font-weight:400;color:var(--gris)}
.esc b{font-size:clamp(.76rem,.96vw,.88rem);font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.esc:hover{background:var(--papel2)}
.esc.on{background:var(--negro);color:#fff}
.esc.on span{color:#fff}
.c-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;min-height:42px}
.c-total{min-width:0;font-variant-numeric:tabular-nums;line-height:1.12}
.c-total span{display:flex;gap:6px;align-items:center;font-size:.8rem;color:var(--gris)}
.c-total em{font-style:normal;font-weight:700;padding:0 6px;border-radius:99px;background:var(--amarillo);color:var(--negro)}
.c-total strong{display:block;font-size:1.14rem;font-weight:800;white-space:nowrap}
.agregar{flex:none;padding:9px 17px;background:var(--negro);color:#fff;border:0;border-radius:99px;font-weight:700;font-size:.94rem;transition:transform .12s,background .15s}
.agregar:hover{background:var(--m);color:var(--mt);transform:scale(1.04)}
.agregar:active{transform:scale(.96)}
.agregar.listo{background:none;color:var(--negro);box-shadow:inset 0 0 0 2px var(--negro)}
.agregar.listo:hover{background:var(--papel2);color:var(--negro)}

.celda.dest{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(12px,2vw,26px);align-items:center}
.celda.dest .c-plato{width:min(100%,380px)}
.celda.dest .c-datos{align-self:stretch}
.celda.dest h3{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1}
.celda.dest .c-desc{font-size:1.04rem;margin-bottom:0}
.c-spec{display:grid;gap:0;margin-bottom:auto;border-top:2px solid var(--negro)}
.c-spec div{display:grid;grid-template-columns:minmax(0,6.6rem) minmax(0,1fr);gap:8px;padding-block:5px;border-bottom:1px solid var(--linea);font-size:.9rem;line-height:1.25}
.c-spec dt{font-weight:600;color:var(--gris)}

/* ───────── Personajes ───────── */
.bicho{display:block;width:100%;height:auto;overflow:visible;cursor:pointer;--piel:var(--violeta)}
.bicho .b-piel{fill:var(--piel)}
.bicho .b-zap,.bicho .b-trazo{fill:var(--negro)}
.bicho .b-gota{fill:var(--gota)}
.bicho .b-cuerpo{transform-box:fill-box;transform-origin:50% 100%;animation:bRespira 2.6s ease-in-out infinite alternate}
.bicho .b-parpa{transform-box:fill-box;transform-origin:center;animation:bParpa 5.4s linear infinite}
.bicho .b-mira{transition:transform .22s ease-out}
.bicho .b-zap{transition:transform .15s}
.bicho:hover .b-zap.z1{transform:translateY(-3px)}
.bicho.salta .b-cuerpo{animation:bSalto .78s cubic-bezier(.3,.7,.4,1) 1}
.bicho.salta .b-zap.z1{animation:bPata .39s ease-in-out 2 alternate}
.bicho.salta .b-zap.z2{animation:bPata .39s ease-in-out .1s 2 alternate}
.bicho.pausado *{animation-play-state:paused}
@keyframes bRespira{from{transform:scale(1,1)}to{transform:scale(1.012,.985)}}
@keyframes bParpa{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
@keyframes bSalto{0%,100%{transform:translateY(0) scale(1,1)}14%{transform:translateY(0) scale(1.08,.9)}48%{transform:translateY(-16%) scale(.96,1.05) rotate(-2.5deg)}82%{transform:translateY(0) scale(1.06,.93)}}
@keyframes bPata{to{transform:translateY(-5px)}}
@keyframes bAndar{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ───────── Packs ───────── */
.pack-control{min-width:0}
.pack-control>span{display:block;margin-bottom:5px;font-size:.92rem;font-weight:300}
.segs{display:flex;flex-wrap:wrap;gap:4px}
.seg{flex:1 0 auto;min-width:50px;padding:6px 11px;background:none;border:1.5px solid #fff;border-radius:99px;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.seg:hover{background:rgba(255,255,255,.16)}
.seg.on{background:#fff;color:var(--negro)}
.pack-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-top:clamp(12px,1.6vw,20px)}
.pack{display:flex;flex-direction:column;min-width:0;background:var(--papel);color:var(--negro);padding:18px;border-radius:var(--radio)}
.pack-arte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-bottom:8px}
.pack-arte span{display:block;min-width:0}
.pack-arte .sb{display:none}
.pack h3{font-size:clamp(1.8rem,2.7vw,2.4rem);line-height:1}
.pack-baj{margin:5px 0 12px;color:var(--gris)}
.pack ul{list-style:none;display:grid;gap:3px;margin-bottom:12px;border-top:2px solid var(--negro);padding-top:9px;flex:1;align-content:start}
.pack li{display:flex;gap:9px;font-size:.96rem;line-height:1.28}
.pack li span{flex:none;width:58px;font-weight:700;font-variant-numeric:tabular-nums}
.pack-pie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px;padding-top:9px;border-top:1px solid var(--linea)}
.pack-pie span{display:block;font-size:.8rem;color:var(--gris)}
.pack-pie strong{font-size:clamp(1.14rem,1.7vw,1.42rem);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.pack-nota{margin-top:12px;font-weight:300;max-width:70ch}
.btn-lleno{display:block;width:100%;padding:11px 18px;background:var(--negro);color:#fff;border:0;border-radius:99px;font-weight:800;font-size:1.02rem;text-align:center;text-decoration:none;transition:transform .12s,background .15s}
.btn-lleno:hover{background:var(--m);color:var(--mt);transform:scale(1.015)}
.btn-lleno:active{transform:scale(.98)}
.btn-lleno.apagado{background:var(--papel2);color:var(--negro)}

/* ───────── Cómo se compra ───────── */
.pasos-compra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);list-style:none;margin:clamp(8px,1vw,14px) 0 clamp(26px,3.4vw,44px)}
.pasos-compra li{padding:16px 18px 20px;min-width:0;border-radius:var(--radio)}
.f-v{background:var(--violeta);color:#fff}.f-a{background:var(--amarillo);color:var(--negro)}.f-g{background:var(--verde);color:#fff}.f-n{background:var(--negro);color:#fff}
.pasos-compra b{display:block;font-size:2.7rem;line-height:1;font-weight:900}
.pasos-compra h3{margin:6px 0 5px;font-size:1.34rem;line-height:1.08}
.pasos-compra p{font-size:.98rem;line-height:1.32}
.f-g p{color:var(--negro);font-weight:500}
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,56px)}
.dos-col h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:9px}
.lista-def{display:grid}
.lista-def div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:12px;padding-block:8px;border-top:1px solid var(--linea)}
.lista-def dt{font-weight:700}
.lista-def dd{color:var(--gris);font-size:.96rem;line-height:1.36}

/* ───────── Pie ───────── */
.pie{padding-bottom:clamp(28px,3.4vw,44px)}
.pie-int{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px clamp(20px,4vw,56px);align-items:end}
.pie-txt{min-width:0;padding-bottom:clamp(8px,1.4vw,18px)}
.pie h2{font-size:clamp(2.7rem,7.2vw,6.2rem);line-height:.94}
.pie .sub{margin-top:6px}
.pie-baj{margin-top:12px;max-width:50ch;font-weight:300;font-size:1.08rem}
.wa{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.wa-num{font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:800;font-variant-numeric:tabular-nums;user-select:all}
.btn-borde{background:none;border:1.5px solid #fff;border-radius:99px;padding:3px 13px;font-weight:400;font-size:.9rem;color:#fff}
.btn-amarillo{display:inline-block;margin-top:12px;padding:11px 21px;background:var(--amarillo);color:var(--negro);border-radius:99px;font-weight:800;text-decoration:none;transition:transform .12s}
.btn-amarillo:hover{transform:scale(1.04)}
.pie-bichos{display:flex;align-items:flex-end;justify-content:center;gap:6px;min-width:0}
.pie-bichos>*{flex:0 1 46%;min-width:0}
.pie-baja{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;max-width:1320px;margin:0 auto;padding-top:15px;border-top:1.5px dashed rgba(255,255,255,.5)}
.pie-logo{--iso1:#fff;--iso2:var(--amarillo);flex:none;width:96px;aspect-ratio:1.62;color:#fff}
.legal{flex:1 1 280px;min-width:0;font-size:.84rem;font-weight:300;line-height:1.38}

/* ───────── Ficha ───────── */
dialog{border:0;padding:0;color:var(--negro);background:var(--papel)}
dialog::backdrop{background:rgba(21,22,22,.66)}
.ficha{width:min(1080px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:auto;border-radius:30px}
.ficha[open]{animation:entra .28s cubic-bezier(.2,1,.3,1)}
@keyframes entra{from{transform:translateY(16px) scale(.985)}to{transform:none}}
.f-nav{position:sticky;top:0;z-index:4;display:flex;justify-content:flex-end;gap:5px;height:0}
.f-nav button{width:38px;height:38px;margin-top:11px;background:var(--negro);color:#fff;border:0;border-radius:50%;font-size:1.25rem;line-height:1;display:grid;place-items:center}
.f-nav button:hover{background:var(--m);color:var(--mt)}
.f-nav button:last-child{margin-right:11px}
.f-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.f-escena{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px clamp(16px,2.4vw,28px) 16px;background:var(--papel2);min-width:0}
.f-sup{align-self:stretch;display:flex;justify-content:space-between;gap:10px;font-size:.84rem;font-weight:600;color:var(--gris)}
.f-plato{position:relative;width:min(100%,370px);padding:4px;margin-block:auto}
.f-plato .c-blob{left:7%;width:86%;bottom:1%}
.f-plato .pv{position:relative}
.f-plato .sb{display:none}
.btn-accion{display:flex;align-items:center;gap:8px;padding:7px 16px;background:var(--papel);border:2px solid var(--negro);border-radius:99px;font-weight:700}
.btn-accion .punto{width:11px;height:11px;border-radius:50%;background:var(--papel2);box-shadow:inset 0 0 0 2px var(--negro)}
.btn-accion.on .punto{background:var(--verde)}
.f-muestras{justify-content:center}
.f-muestras .muestra{width:23px;height:23px}
.f-nota{font-size:.82rem;text-align:center;color:var(--gris);font-weight:300}
/* Galería: foto en unidad, la ilustración con tu marca y fotos por mayor */
.gal{position:relative;width:min(100%,410px);margin-top:2px}
.gal-pista{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:1;border-radius:24px;outline-offset:4px}
.gal-pista::-webkit-scrollbar{display:none}
.gal-diapo{position:relative;flex:0 0 100%;display:grid;place-items:center;margin:0;min-width:0;scroll-snap-align:center;scroll-snap-stop:always}
.gal-diapo.llena{background:var(--negro)}
.gal-llena{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal-plato{position:relative;height:86%;aspect-ratio:1;display:grid;place-items:center}
.gal-plato .c-blob{left:6%;width:88%;bottom:3%}
.gal-plato img{position:relative;display:block;width:auto;height:auto;max-width:90%;max-height:90%;filter:drop-shadow(0 14px 14px rgba(21,22,22,.22))}
.gal-diapo .f-plato{width:auto;height:90%;aspect-ratio:1;margin:0;padding:0}
.gal-chip{position:absolute;left:10px;top:10px;padding:3px 11px;border-radius:99px;background:var(--negro);color:#fff;font-size:.78rem;font-weight:700;pointer-events:none}
.gal-diapo[data-tipo="mayor"] .gal-chip{background:var(--amarillo);color:var(--negro)}
.gal-diapo[data-tipo="marca"] .gal-chip{background:var(--m);color:var(--mt)}
.gal-cred{position:absolute;right:8px;bottom:8px;max-width:calc(100% - 16px);padding:2px 9px;border-radius:99px;background:rgba(21,22,22,.58);color:#fff;font-size:.68rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.gal-cred:hover{background:var(--negro);text-decoration:underline}
.gal-diapo.recorte .gal-cred{background:transparent;color:var(--gris)}
.gal-cuenta{position:absolute;right:10px;top:10px;padding:2px 9px;border-radius:99px;background:rgba(255,253,246,.92);font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none}
.gal-flecha{position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;border:0;border-radius:50%;background:var(--papel);color:var(--negro);box-shadow:0 0 0 2px var(--negro);font-size:1.45rem;line-height:1;display:grid;place-items:center;padding-bottom:3px}
.gal-flecha.ant{left:-8px}
.gal-flecha.sig{right:-8px}
.gal-flecha:hover{background:var(--negro);color:#fff}
.gal-minis{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.gal-mini{position:relative;width:52px;height:52px;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--negro);box-shadow:inset 0 0 0 2px rgba(21,22,22,.14);opacity:.62;transition:opacity .15s}
.gal-mini:hover{opacity:1}
.gal-mini img{display:block;width:100%;height:100%;object-fit:cover}
.gal-mini.rec{background:var(--amarillo)}
.gal-mini.rec img{object-fit:contain;padding:4px}
.gal-mini.marca{display:grid;place-content:center;justify-items:center;gap:2px;background:var(--m);color:var(--mt)}
.gal-mini.marca svg{width:24px;height:22px;--iso1:var(--mt);--iso2:var(--amarillo)}
.gal-mini.marca span{font-size:.56rem;font-weight:800;line-height:1}
.gal-mini[aria-current]{opacity:1;box-shadow:0 0 0 2px var(--papel2),0 0 0 4px var(--negro)}
.f-datos{display:flex;flex-direction:column;gap:10px;padding:16px clamp(16px,2.6vw,30px) 22px;min-width:0}
.f-datos h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1;padding-right:128px}
.f-desc{color:var(--gris);font-size:1.04rem;line-height:1.36}
.f-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;border-top:2px solid var(--negro)}
.f-spec div{padding-block:5px;border-bottom:1px solid var(--linea);min-width:0}
.f-spec dt{font-size:.78rem;color:var(--gris)}
.f-spec dd{font-size:.95rem;font-weight:600;line-height:1.22}
.f-calc{display:grid;gap:9px;background:#fff;border:2px solid var(--negro);border-radius:22px;padding:13px}
.f-q{display:flex;justify-content:space-between;align-items:center;gap:12px}
.f-q label{font-weight:800;font-size:1.05rem}
.pasos{display:inline-flex;align-items:center;border:2px solid var(--negro);border-radius:99px;background:#fff;overflow:hidden}
.pasos button{width:30px;height:29px;background:none;border:0;font-weight:800;font-size:1.08rem;display:grid;place-items:center}
.pasos button:hover{background:var(--papel2)}
.pasos input{width:62px;height:29px;border:0;background:none;color:var(--negro);text-align:center;font:800 .96rem var(--f-txt);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.pasos input::-webkit-outer-spin-button,.pasos input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pasos.grande button{width:40px;height:39px}.pasos.grande input{width:86px;height:39px;font-size:1.16rem}
.f-slider{width:100%;height:24px;margin:0;appearance:none;-webkit-appearance:none;background:none;cursor:pointer}
.f-slider::-webkit-slider-runnable-track{height:9px;border-radius:9px;background:linear-gradient(90deg,var(--m) var(--avance,0%),var(--papel2) var(--avance,0%))}
.f-slider::-moz-range-track{height:9px;border-radius:9px;background:linear-gradient(90deg,var(--m) var(--avance,0%),var(--papel2) var(--avance,0%))}
.f-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-7.500px;background:var(--negro);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px var(--negro)}
.f-slider::-moz-range-thumb{width:18px;height:18px;background:var(--negro);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px var(--negro)}
.f-esc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.f-bar{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:0;min-width:0;font-variant-numeric:tabular-nums}
.f-bar b{font-size:.8rem;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.f-bar>span:last-child{font-size:.78rem;color:var(--gris);white-space:nowrap}
.f-col{display:flex;align-items:flex-end;width:100%;height:46px}
.f-col i{display:block;width:100%;background:var(--papel2);border-radius:9px 9px 0 0;transition:height .2s,background .15s}
.f-bar:hover .f-col i{background:var(--ml)}
.f-bar.on .f-col i{background:var(--m)}
.f-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;padding-top:8px;border-top:1px solid var(--linea)}
.f-res span{display:block;font-size:.8rem;color:var(--gris)}
.f-res strong{font-size:clamp(1.34rem,2.3vw,1.72rem);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.08}
.f-ahorro{grid-column:1/-1;font-size:.9rem;color:var(--gris)}
.f-empuje{grid-column:1/-1;text-align:left;background:var(--amarillo);color:var(--negro);border:0;border-radius:14px;padding:7px 13px;font-size:.94rem;font-weight:500}
.f-empuje b{font-weight:800}
.f-empuje:hover{filter:brightness(1.05)}

/* ───────── Pedido ───────── */
.carrito{margin:0 0 0 auto;width:min(490px,100vw);max-width:none;height:100dvh;max-height:none;overflow:hidden;border-radius:30px 0 0 30px}
.carrito[open]{display:flex;flex-direction:column;animation:lado .26s cubic-bezier(.2,1,.3,1)}
@keyframes lado{from{transform:translateX(40px)}to{transform:none}}
.car-cab{flex:none;display:flex;justify-content:space-between;align-items:center;padding:13px 20px}
.car-cab h2{font-size:2rem;line-height:1}
.btn-x{background:none;border:0;font-size:1.5rem;line-height:1;padding:2px 6px}
.car-cuerpo{flex:1;overflow:auto;padding:0 20px;min-height:0;border-top:2px solid var(--negro)}
.car-linea{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding-block:11px;border-bottom:1px solid var(--linea)}
.car-arte .sb{display:none}
.car-info{min-width:0;display:grid;gap:5px}
.car-nom{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-weight:800;font-size:1.1rem;line-height:1.1}
.car-fila{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.car-precio{text-align:right;font-variant-numeric:tabular-nums;line-height:1.12}
.car-precio span{display:block;font-size:.8rem;color:var(--gris)}
.car-precio strong{font-weight:800}
.car-empuje{text-align:left;background:none;border:0;padding:0;font-size:.86rem;color:var(--gris);text-decoration:underline;text-underline-offset:2px}
.car-empuje:hover{color:var(--negro)}
.car-empuje:disabled{text-decoration:none;cursor:default}
.car-vacio{display:grid;justify-items:center;gap:10px;padding-block:30px;text-align:center}
.car-vacio-bichos{display:flex;align-items:flex-end;gap:4px;width:190px}
.car-vacio-bichos>*{flex:1 1 0;min-width:0}
.car-horror{font:500 clamp(1.5rem,5vw,1.9rem)/1 var(--f-ser);letter-spacing:.005em;margin-top:6px}
.car-horror i{display:block;font-weight:700;font-size:1.34em;line-height:1.1;margin-top:.14em}
.car-vacio .sutil{color:var(--gris)}
.car-pie{flex:none;padding:10px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--negro);background:#fff;display:grid;gap:8px;border-bottom-left-radius:30px}
.car-pie:empty{display:none}
.car-avance{padding-top:30px}
.car-avance p{font-size:.88rem;margin-top:5px;line-height:1.28}
.car-barra{position:relative;height:11px;border-radius:9px;background:var(--papel2)}
.car-barra>i{display:block;height:100%;background:var(--m);border-radius:9px;transition:width .35s}
.car-caminante{position:absolute;bottom:100%;margin-bottom:-1px;width:34px;translate:-50% 0;transition:left .35s;--piel:var(--am)}
.car-caminante .bicho{animation:bAndar .6s ease-in-out 3}
.car-cuentas{display:grid;gap:1px;font-variant-numeric:tabular-nums}
.car-cuentas div{display:flex;justify-content:space-between;gap:12px;font-size:.95rem}
.car-cuentas .bon{font-weight:700}
.car-cuentas .tot{margin-top:3px;padding-top:4px;border-top:1px solid var(--linea);font-size:1.24rem;font-weight:800}
.car-ahorro{font-size:.86rem;color:var(--gris);line-height:1.28}
.car-sec{display:flex;justify-content:space-between;gap:12px}
.car-texto{width:100%;height:92px;font:.82rem var(--f-txt);background:#fff;color:var(--negro);border:2px solid var(--negro);border-radius:14px;padding:8px}
.pedido-flota{position:fixed;left:0;right:0;bottom:0;z-index:15;display:none;padding:9px max(16px,env(safe-area-inset-right,0px)) calc(9px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--papel);border-radius:22px 22px 0 0;box-shadow:0 -8px 24px rgba(21,22,22,.2)}
.pf-btn{width:100%;justify-content:space-between;padding:12px 16px;font-size:1.04rem}

/* ───────── Adaptación ───────── */
@media (max-width:1100px){
  .chip span{max-width:80px}
  .b-pal{display:none}
  .btn-pedido .pedido-total{display:none}
  .probador .campos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .probador .muestras{flex-wrap:wrap}
  .probador .logo-fila{grid-column:1/-1}
}
@media (max-width:1040px){
  .p-grilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .banda.n7 .celda:last-child:not(.dest){grid-column:span 2}
  .pack-lista{grid-template-columns:minmax(0,1fr)}
  .pack-arte{grid-template-columns:repeat(4,minmax(0,110px))}
  .pasos-compra{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-cab{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .hilo{display:none}
  .p-int,.dos-col,.pie-int{grid-template-columns:minmax(0,1fr)}
  .p-mancha{top:auto;width:100%;height:330px;border-top-left-radius:clamp(90px,26vw,180px)}
  .escena{min-height:310px;margin-top:6px}
  .sticker{width:clamp(66px,19%,108px)}
  .sticker.tipo{width:clamp(130px,38%,210px)}
  .h-bicho.v{width:clamp(110px,27%,170px)}
  .monedas,.chip{display:none}
  .f-cuerpo{grid-template-columns:minmax(0,1fr)}
  .f-plato{width:min(68%,250px)}
  .gal{width:min(100%,420px)}
  .gal-pista{aspect-ratio:5/4}
  .gal-plato{height:76%;margin-bottom:5%}
  .gal-diapo .f-plato{height:84%}
  .gal-flecha{width:36px;height:36px;margin-top:-18px}
  .gal-flecha.ant{left:6px}
  .gal-flecha.sig{right:6px}
  .gal-mini{width:46px;height:46px}
  .f-sup{padding-right:128px}
  .f-datos h2{padding-right:0}
  .ficha{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  .pie-bichos{justify-content:flex-start}
  .pie-bichos>*{flex:0 1 150px}
}
@media (max-width:720px){
  .btn-pedido#btn-pedido{display:none}
  .pedido-flota{display:block}
  .pedido-flota[hidden]{display:none}
  .pie{padding-bottom:96px}
}
@media (max-width:600px){
  .p-grilla{grid-template-columns:minmax(0,1fr)}
  .celda,.celda.dest,.banda.n7 .celda:last-child:not(.dest){grid-column:auto;display:flex}
  .celda.dest .c-plato{width:min(74%,250px)}
  .celda.dest h3{font-size:clamp(1.34rem,6vw,1.62rem)}
  .c-spec{display:none}
  .esc b{font-size:.78rem}
  .lista-def div{grid-template-columns:minmax(0,1fr);gap:1px}
  .pasos-compra{grid-template-columns:minmax(0,1fr)}
  .probador .campos{grid-template-columns:minmax(0,1fr)}
  .b-cab{padding-right:clamp(70px,24vw,110px)}
  .b-cab.con-dos{padding-right:0;padding-top:clamp(84px,24vw,112px)}
  .b-cab.sin-bicho{padding-right:0}
  .pildoras li{font-size:.84rem;padding:2px 10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hilo path,.giro>svg,.ficha[open],.carrito[open],.bicho *{animation:none!important}
  .c-plato{transition:none}
}

/* ───────── Arte de producto: colores ───────── */
.pv{display:block;width:100%;height:auto;overflow:visible;--k:#151616}
.pv *{transform-box:view-box}
.pv .k{stroke:var(--k);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.pv .k2{stroke:var(--k);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.pv .k5,.pv .k6,.pv .k7,.pv .k9,.pv .k11,.pv .k14,.pv .k16{stroke:var(--k);stroke-linecap:round;stroke-linejoin:round}
.pv .k5{stroke-width:6}.pv .k6{stroke-width:6.5}.pv .k7{stroke-width:9}.pv .k9{stroke-width:11}.pv .k11{stroke-width:13}.pv .k14{stroke-width:15}.pv .k16{stroke-width:18}
.pv .n{fill:none}
.pv .m{fill:var(--m)}.pv .ms{fill:var(--ms)}.pv .ml{fill:var(--ml)}
.pv .cr{fill:#fffdf6}.pv .cs{fill:#e6e2d1}.pv .wh{fill:#ffffff}.pv .ne{fill:var(--k)}
.pv .me{fill:#cfd0bb}.pv .md{fill:#8f9280}.pv .ma{fill:#d09556}.pv .mo{fill:#a66c38}
.pv .am{fill:var(--am)}.pv .vd{fill:#339609}.pv .ca{fill:#5a3a1f}.pv .chori{fill:#a8452a}
.pv .sb{fill:var(--k);opacity:.15}
.pv .hl{fill:#fff;opacity:.3}
.pv .sin{fill:var(--papel,#fffdf6);stroke:var(--k);stroke-width:2.2}

.pv .st{fill:none;stroke:var(--mt);stroke-opacity:.6;stroke-width:1.8;stroke-dasharray:5 4;stroke-linecap:round}
.pv .stk{fill:none;stroke:var(--k);stroke-opacity:.4;stroke-width:1.8;stroke-dasharray:5 4}
.pv .stc{fill:none;stroke:var(--mt);stroke-opacity:.5;stroke-width:1.4;stroke-dasharray:3 3}
.pv .ren{fill:none;stroke:var(--k);stroke-opacity:.2;stroke-width:2}
.pv .ren2{fill:none;stroke:#8f9280;stroke-width:3}
.pv .lin{fill:none;stroke:var(--mt);stroke-width:4.5;stroke-linecap:round;stroke-opacity:.75}
.pv .linc{fill:none;stroke:var(--k);stroke-width:4.5;stroke-linecap:round;stroke-opacity:.3}
.pv .vap{fill:none;stroke:var(--k);stroke-opacity:.5;stroke-width:3;stroke-linecap:round}
.pv .blanco{fill:none;stroke:#fff;stroke-opacity:.65;stroke-width:4;stroke-linecap:round}
.pv .metal{fill:none;stroke:#cfd0bb;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pv .asa{fill:none;stroke:#fffdf6;stroke-width:11;stroke-linecap:round}
.pv .asa2{fill:none;stroke:#fffdf6;stroke-width:5;stroke-linecap:round}
.pv .asa3{fill:none;stroke:#fffdf6;stroke-width:6.5}
.pv .cableluz{fill:none;stroke:#8f9280;stroke-width:2.2;stroke-linecap:round}
.pv .mango{fill:none;stroke:#d09556;stroke-width:6;stroke-linecap:round}
.pv .sorbete{fill:none;stroke:var(--am);stroke-width:8.5;stroke-linecap:round;stroke-linejoin:round}
.pv .malla{fill:none;stroke:var(--k);stroke-opacity:.35;stroke-width:2.2;stroke-dasharray:2 4;stroke-linecap:round}
.pv .teclas{fill:none;stroke:#fffdf6;stroke-opacity:.85;stroke-width:8.5;stroke-dasharray:8.5 3.6}
.pv .estria{fill:none;stroke:#fffdf6;stroke-opacity:.45;stroke-width:2}
.pv .surco{stroke:#a66c38;stroke-width:3.5}
.pv .veta{fill:none;stroke:#a66c38;stroke-opacity:.55;stroke-width:2;stroke-linecap:round}
.pv .firma{fill:none;stroke:var(--m);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.pv .firmita{fill:none;stroke:var(--k);stroke-opacity:.55;stroke-width:2.5;stroke-linecap:round}
.pv .corte{fill:none;stroke:var(--k);stroke-opacity:.35;stroke-width:1.4;stroke-dasharray:4 3}
.pv .agua{fill:#7fc6ea;stroke:var(--k);stroke-width:1.6}
.pv .agua2{fill:none;stroke:#3f9ad0;stroke-width:3.5;stroke-linecap:round}
.pv .brillo{fill:none;stroke:#fff;stroke-opacity:.85;stroke-width:7;stroke-linecap:round}
.pv .estrella{fill:#fffef6;stroke:var(--k);stroke-width:1.5}
.pv .neonlin{fill:none;stroke:#fffef6;stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--mn)) drop-shadow(0 0 10px var(--mn))}
.pv .a-halo{fill:var(--mn);filter:blur(18px);opacity:.42}
.pv .chiptx{font:800 12px var(--f-txt);fill:var(--k);letter-spacing:.04em}

.pv .spot text{font-family:var(--f-txt);font-weight:800;letter-spacing:-.005em}
.pv .tx-m{fill:var(--mt)}.pv .tx-c{fill:var(--m)}.pv .tx-k{fill:var(--k)}.pv .tx-g{fill:#7a4a20}.pv .tx-ne{fill:#fffdf6}
.pv .tx-neon{fill:#ffffff;font-family:var(--f-dis);font-weight:700;filter:drop-shadow(0 0 3px var(--mn)) drop-shadow(0 0 10px var(--mn))}

/* ───────── Arte de producto: movimiento en reposo y al pasar ───────── */
.pop{transform:scale(0);transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.accion .pop{transform:scale(1);transition-delay:var(--d,0s)}
.chispa{transform:scale(0)}
.accion .chispa{animation:chispa 1.1s ease-in-out infinite}
@keyframes chispa{0%,100%{transform:scale(0) rotate(0)}50%{transform:scale(1) rotate(45deg)}}

@keyframes colgar{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
@keyframes colgarF{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.a-colgar{animation:colgar 3s ease-in-out infinite alternate}
.accion .a-colgar{animation:colgarF .5s ease-in-out infinite alternate}

@keyframes flota{from{transform:translateY(2px)}to{transform:translateY(-4px)}}
.a-flota{animation:flota 2.6s ease-in-out infinite alternate}
.accion .a-flota{animation-duration:.5s}

@keyframes respira{from{transform:scale(1)}to{transform:scale(1.018)}}
.a-respira{animation:respira 2.4s ease-in-out infinite alternate}

@keyframes vapor{0%{transform:translateY(8px);opacity:0}35%{opacity:.85}100%{transform:translateY(-20px);opacity:0}}
.a-vapor{animation:vapor 2.8s ease-out infinite}
.a-vapor.b{animation-delay:-.9s}.a-vapor.c{animation-delay:-1.8s}
.accion .a-vapor{animation-duration:1.3s}
.a-vapor.solo{display:none}
.accion .a-vapor.solo{display:block}

/* Buzo */
@keyframes cordon{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.a-cordon{animation:cordon 1.7s ease-in-out infinite alternate}
.a-cordon.b{animation-delay:-.8s}
.accion .a-cordon{animation-duration:.28s}
.a-calor{opacity:0}
.accion .a-calor{animation:vapor 1.3s ease-out infinite}
.accion .a-calor.b{animation-delay:-.6s}
/* Gorra */
@keyframes gorra{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
@keyframes salto{0%,100%{transform:translateY(0) scale(1,1)}12%{transform:translateY(4px) scale(1.06,.92)}45%{transform:translateY(-34px) rotate(-10deg)}80%{transform:translateY(2px) scale(1.05,.94)}}
.a-gorra{animation:gorra 2.6s ease-in-out infinite alternate}
.accion .a-gorra{animation:salto .95s cubic-bezier(.3,.7,.4,1) infinite}
/* Medias */
@keyframes paso{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-6deg)}}
.a-paso{animation:paso 2.4s ease-in-out infinite}
.a-paso.b{animation-delay:-1.2s}
.accion .a-paso{animation-duration:.56s}
.accion .a-paso.b{animation-delay:-.28s}
/* Delantal */
@keyframes lazo{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.a-lazo{animation:lazo 1.5s ease-in-out infinite alternate}
.a-lazo.b{animation-direction:alternate-reverse}
.a-sube{transform:translateY(32px);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.accion .a-sube{transform:translateY(-8px)}
/* Cuaderno */
.a-libro{transition:transform .5s ease}
.a-tapa{transition:transform .5s cubic-bezier(.4,.1,.3,1)}
.frente{transition:opacity 0s .22s}
.a-elastico{transition:opacity .15s,transform .3s}
@keyframes cinta{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.a-cinta{animation:cinta 1.8s ease-in-out infinite alternate}
.accion .a-libro{transform:translateX(44px)}
.accion .a-tapa{transform:scaleX(-.9) skewY(-4deg)}
.accion .frente{opacity:0}
.accion .a-elastico{opacity:0;transform:translateX(16px)}
/* Lapicera */
@keyframes boton{0%,84%,100%{transform:translateY(0)}90%{transform:translateY(5px)}}
.a-boton{animation:boton 4.4s linear infinite}
@keyframes lap{0%{transform:translate(-34px,0)}15%{transform:translate(-22px,-3px)}30%{transform:translate(-4px,2px)}45%{transform:translate(12px,-3px)}60%{transform:translate(28px,2px)}80%,100%{transform:translate(66px,0)}}
@keyframes firma{from{stroke-dashoffset:1}80%,to{stroke-dashoffset:0}}
.a-firma{stroke-dasharray:1;stroke-dashoffset:0}
.accion .a-lap{animation:lap 1.8s ease-in-out infinite}
.accion .a-firma{animation:firma 1.8s ease-in-out infinite}
/* Taza */
@keyframes brindis{0%,100%{transform:rotate(0)}25%{transform:translateY(-10px) rotate(-7deg)}55%{transform:translateY(-16px) rotate(9deg)}80%{transform:translateY(2px) rotate(-1deg)}}
.accion .a-taza{animation:brindis 1.25s ease-in-out infinite}
/* Desk mat */
@keyframes raton{0%,100%{transform:translate(0,0)}25%{transform:translate(9px,-10px)}50%{transform:translate(-7px,9px)}75%{transform:translate(7px,11px)}}
@keyframes cursor{0%,100%{transform:translate(0,0)}25%{transform:translate(-64px,10px)}50%{transform:translate(-132px,34px)}75%{transform:translate(-46px,44px)}}
@keyframes tecla{0%,70%,100%{opacity:0}75%,85%{opacity:1}}
.a-raton{animation:raton 5s ease-in-out infinite}
.a-cursor{animation:cursor 5s ease-in-out infinite}
.a-tecla{opacity:0;animation:tecla 3.2s linear infinite}
.a-tecla.b{animation-delay:-1.1s}.a-tecla.c{animation-delay:-2.1s}
.accion .a-raton,.accion .a-cursor{animation-duration:1.5s}
.accion .a-tecla{animation-duration:.8s}
/* Power bank */
@keyframes rayo{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes ledcarga{0%,24%{opacity:.18}25%,100%{opacity:1}}
.a-led{animation:ledcarga 4s steps(1) infinite}
.a-led.b{animation-name:ledcargaB}.a-led.c{animation-name:ledcargaC}.a-led.d{animation-name:ledcargaD}
@keyframes ledcargaB{0%,44%{opacity:.18}45%,100%{opacity:1}}
@keyframes ledcargaC{0%,64%{opacity:.18}65%,100%{opacity:1}}
@keyframes ledcargaD{0%,84%{opacity:.18}85%,100%{opacity:1}}
.a-rayo{animation:rayo 1.6s ease-in-out infinite}
.accion .a-led{animation-duration:1s}
.accion .a-rayo{animation-duration:.4s}
/* Kit matero */
.a-termo{transition:transform .6s cubic-bezier(.4,1.3,.5,1)}
.accion .a-termo{transform:translateY(-4px) rotate(40deg)}
.a-agua{fill:none;stroke:#7fc6ea;stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s}
.accion .a-agua{stroke-dashoffset:0;transition-delay:.5s}
/* Botella */
.a-tapa2{transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.accion .a-tapa2{transform:translateY(-26px) rotate(-16deg)}
/* Vaso */
.a-sorbete{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.accion .a-sorbete{transform:translateY(-14px)}
@keyframes gota{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(0) scale(1)}90%{opacity:1}100%{transform:translateY(96px) scale(.9);opacity:0}}
.a-gota{animation:gota 3.4s ease-in infinite}
.a-gota.b{animation-delay:-1.6s}
.accion .a-gota{animation-duration:1.2s}
@keyframes vaso{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}}
.accion .a-vaso{animation:vaso .8s ease-in-out infinite}
/* Caja de bienvenida y bolsa: lo que sale de adentro */
.a-item{transform:translateY(72px);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.accion .a-item{transform:translateY(0);transition-delay:var(--d,0s)}
.a-tapacaja{transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.accion .a-tapacaja{transform:translate(-22px,-60px) rotate(-24deg)}
.confeti rect{transform-origin:122px 62px;transform:scale(0);opacity:0}
.accion .confeti rect{animation:confeti 1.5s cubic-bezier(.2,.7,.4,1) .3s infinite}
@keyframes confeti{0%{transform:scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--g)) scale(1.1);opacity:0}}
@keyframes sacude{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-1.6deg)}94%{transform:rotate(1.6deg)}97%{transform:rotate(-.8deg)}}
/* Mochila */
.a-laptop{transform:translateY(46px);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.accion .a-laptop{transform:translateY(-26px)}
/* Paraguas */
@keyframes copa{0%,100%{transform:scaleX(1)}35%,48%{transform:scaleX(.13) scaleY(1.05)}70%{transform:scaleX(1.07) scaleY(.97)}85%{transform:scaleX(.98)}}
@keyframes vaiven{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes lluvia{from{transform:translateY(-12px);opacity:0}25%{opacity:1}75%{opacity:1}to{transform:translateY(20px);opacity:0}}
.a-paraguas{animation:vaiven 2.8s ease-in-out infinite alternate}
.accion .a-copa{animation:copa 2.2s ease-in-out infinite}
.a-lluvia path{opacity:0}
.accion .a-lluvia path{animation:lluvia .7s linear infinite}
.accion .a-lluvia .b{animation-delay:-.25s}.accion .a-lluvia .c{animation-delay:-.45s}
/* Tabla */
@keyframes chop{0%,100%{transform:rotate(0)}40%{transform:rotate(-9deg)}55%{transform:rotate(19deg)}70%{transform:rotate(15deg)}}
@keyframes chori{0%,48%,100%{transform:scale(1,1)}58%{transform:scale(1.05,.9)}}
.accion .a-cuchillo{animation:chop .7s ease-in-out infinite}
.accion .a-chori{animation:chori .7s ease-in-out infinite}
/* Llavero */
@keyframes llave{from{transform:rotate(-7deg)}to{transform:rotate(10deg)}}
.a-llave{animation:llave 1.3s ease-in-out infinite alternate}
.accion .a-llave{animation-duration:.2s}
/* Stickers */
.a-stk{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.accion .a-stk{transform:translateY(-7px) rotate(var(--g)) scale(1.1);transition-delay:var(--d,0s)}
/* Pin */
@keyframes giro{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
@keyframes brillo{0%,80%,100%{opacity:.85}90%{opacity:.25}}
.a-brillo{animation:brillo 3s ease-in-out infinite}
.accion .a-giro{animation:giro 1.1s ease-in-out infinite}
/* Pulsera */
@keyframes loop{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes cola{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
@keyframes traba{0%,100%{transform:translateX(0)}50%{transform:translateX(-24px)}}
.a-loop{animation:loop 2.6s ease-in-out infinite alternate}
.a-cola{animation:cola 1.2s ease-in-out infinite alternate}
.accion .a-traba{animation:traba 1.1s ease-in-out infinite}
/* Globos */
@keyframes globo{from{transform:rotate(-2.6deg) translateY(1px)}to{transform:rotate(2.6deg) translateY(-5px)}}
.a-globo{animation:globo 2.7s ease-in-out infinite alternate}
.a-globo.b{animation-delay:-1s;animation-duration:3.1s}
.a-globo.c{animation-delay:-1.9s;animation-duration:2.3s}
.accion .a-globo{animation-duration:.8s}
.a-infla{transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.accion .a-infla{transform:scale(1.13)}
/* Roll-up */
@keyframes roll{0%,100%{transform:scaleY(1)}35%,50%{transform:scaleY(.05)}85%{transform:scaleY(1.02)}}
@keyframes rail{0%,100%{transform:translateY(0)}35%,50%{transform:translateY(169px)}85%{transform:translateY(-3.5px)}}
.accion .a-roll{animation:roll 2.2s cubic-bezier(.5,0,.3,1) infinite}
.accion .a-rail{animation:rail 2.2s cubic-bezier(.5,0,.3,1) infinite}
/* Bandera */
@keyframes bandera{from{transform:skewY(-1.6deg)}to{transform:skewY(2deg)}}
@keyframes viento{from{transform:translateX(-14px);opacity:0}35%{opacity:.9}to{transform:translateX(30px);opacity:0}}
.a-bandera{animation:bandera 1.3s ease-in-out infinite alternate}
.accion .a-bandera{animation-duration:.4s}
.a-viento{opacity:0}
.accion .a-viento{animation:viento .9s linear infinite}
.accion .a-viento.b{animation-delay:-.3s}.accion .a-viento.c{animation-delay:-.6s}
/* Gazebo */
@keyframes patas{0%,100%{transform:scaleY(1)}35%,50%{transform:scaleY(.3)}82%{transform:scaleY(1.04)}}
@keyframes techo{0%,100%{transform:translateY(0)}35%,50%{transform:translateY(84px)}82%{transform:translateY(-5px)}}
@keyframes cenefa{from{transform:skewX(-1.6deg)}to{transform:skewX(1.6deg)}}
.a-cenefa{animation:cenefa 1.2s ease-in-out infinite alternate}
.accion .a-patas{animation:patas 2.4s cubic-bezier(.5,0,.3,1) infinite}
.accion .a-techo{animation:techo 2.4s cubic-bezier(.5,0,.3,1) infinite}
/* Mostrador */
@keyframes campana{0%,100%{transform:rotate(0)}15%{transform:rotate(-10deg)}35%{transform:rotate(9deg)}55%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
@keyframes ding{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}
@keyframes folleto{from{transform:rotate(0)}to{transform:rotate(-7deg) translateY(-5px)}}
.a-ding{opacity:0}
.accion .a-campana{animation:campana .8s ease-in-out infinite}
.accion .a-ding{animation:ding .8s ease-out infinite}
.accion .a-ding.b{animation-delay:.12s}
.a-folleto{transition:transform .3s}
.accion .a-folleto{transform:rotate(-7deg) translateY(-5px)}
/* Back de prensa */
@keyframes flash{0%,91%,100%{opacity:0}93%{opacity:.85}96%{opacity:.1}97.5%{opacity:.55}}
.a-flash{opacity:0;animation:flash 5.5s linear infinite}
.a-foco{opacity:0;animation:flash 5.5s linear infinite}
rect.a-foco{opacity:.35;animation:none}
.accion .a-flash,.accion path.a-foco{animation-duration:1.3s}
/* Neón */
@keyframes neon{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.35}}
@keyframes neonEnc{0%,10%{opacity:.08}12%{opacity:.8}14%{opacity:.1}20%{opacity:.9}23%{opacity:.15}30%,100%{opacity:1}}
.a-neon{animation:neon 5s linear infinite}
.accion .a-neon{animation:neonEnc 1.7s linear infinite}
/* Credencial */
.a-flip{transition:transform .5s ease}
.dorso{opacity:0;transition:opacity 0s .2s}
.cara{transition:opacity 0s .2s}
.accion .a-flip{transform:scaleX(-1)}
.accion .dorso{opacity:1}
.accion .cara{opacity:0}

/* Fuera de pantalla no se anima nada */
.pv.pausado *{animation-play-state:paused!important}
.pv.quieto *{animation:none!important;transition:none!important}

@media (prefers-reduced-motion:reduce){
  .pv *{animation:none!important;transition:none!important}
}

/* Lo que suma el sitio de varias páginas: menú, cinta de temporada, páginas de contenido, tablas y el cierre */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;z-index:60;padding:8px 14px;background:var(--negro);color:#fff;border-radius:99px;font-weight:700}
.saltar:focus{top:10px}

/* ───────── Cinta de temporada ───────── */
.cinta{background:var(--negro);color:#fff;font-size:.92rem;line-height:1.25}
.cinta-a{display:block;max-width:1320px;margin-inline:auto;padding:7px max(16px,env(safe-area-inset-left,0px));color:inherit;text-decoration:none;text-align:center;text-wrap:balance}
.cinta-a b{color:var(--amarillo);font-weight:700}
.cinta-a:hover{text-decoration:underline;text-underline-offset:3px}

/* ───────── Menú ───────── */
.b-menu{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0}
.b-menu>a,.b-grupo>summary{display:block;padding:6px 11px;border-radius:99px;font-size:.95rem;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;list-style:none;transition:background .15s}
.b-grupo>summary::-webkit-details-marker{display:none}
.b-grupo>summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:2px solid;border-bottom:2px solid;transform:translateY(-2px) rotate(45deg)}
.b-menu>a:hover,.b-grupo>summary:hover,.b-grupo[open]>summary{background:var(--papel2)}
.b-menu>a[aria-current]{background:var(--violeta);color:#fff}
.b-grupo{position:relative}
.b-sub{position:absolute;left:0;top:calc(100% + 8px);z-index:6;display:grid;gap:1px;min-width:260px;padding:10px;background:var(--papel);border-radius:18px;box-shadow:0 16px 40px rgba(21,22,22,.28)}
.b-sub a{display:block;padding:7px 11px;border-radius:12px;text-decoration:none;font-size:.95rem;line-height:1.2}
.b-sub a:hover{background:var(--papel2)}
.b-ham{display:none;width:40px;height:40px;padding:0;background:none;border:2px solid var(--negro);border-radius:50%;place-items:center}
.b-ham span,.b-ham span::before,.b-ham span::after{display:block;width:17px;height:2px;background:var(--negro);border-radius:2px}
.b-ham span{position:relative}
.b-ham span::before,.b-ham span::after{content:"";position:absolute;left:0}
.b-ham span::before{top:-6px}.b-ham span::after{top:6px}

/* ───────── Portada: el lema se ve grande, el h1 dice qué vendemos ───────── */
.portada .lema{font-size:clamp(2.6rem,6vw,5.5rem);line-height:.96;font-weight:800;letter-spacing:-.012em;text-wrap:balance}
.portada h1{font-size:clamp(1.15rem,2.2vw,1.85rem);line-height:1.15;font-weight:300;letter-spacing:0;margin-top:8px}
.portada .sub{margin-top:0}
/* "Por mayor" es lo primero que se ve: la palabra grande, con copias que se apilan detrás como cajas de un pedido */
.portada .lema{font-size:clamp(1.75rem,3vw,2.7rem);line-height:1}
.mayor{position:relative;display:inline-block;margin-top:.04em;padding-right:.16em;font-size:clamp(3.9rem,8.6vw,8rem);line-height:.86;font-weight:900;letter-spacing:-.045em;color:var(--amarillo);white-space:nowrap}
.mayor span{position:relative;z-index:2}
.mayor::before,.mayor::after{content:attr(data-t);position:absolute;left:0;top:0;z-index:1;color:transparent;-webkit-text-stroke:2px var(--amarillo);pointer-events:none}
.mayor::before{opacity:.6;animation:apilaA 3.4s cubic-bezier(.45,0,.3,1) infinite}
.mayor::after{opacity:.32;animation:apilaB 3.4s cubic-bezier(.45,0,.3,1) infinite}
@keyframes apilaA{0%,12%{transform:translate(0,0)}38%,78%{transform:translate(.055em,.07em)}100%{transform:translate(0,0)}}
@keyframes apilaB{0%,18%{transform:translate(0,0)}46%,78%{transform:translate(.11em,.14em)}100%{transform:translate(0,0)}}
.portada h1{margin-top:clamp(10px,1.4vw,18px);padding-right:clamp(96px,11.5vw,160px)}

/* Cinta de embalar: cruza la pantalla y no se detiene */
.embalaje{--alto:clamp(118px,13vw,200px);position:relative;z-index:4;height:var(--alto);margin-top:calc(var(--rb) * -1 - 8px);margin-bottom:calc(var(--alto) * -.5);overflow-x:clip;pointer-events:none}
.emb{position:absolute;left:-6%;right:-6%;top:50%;display:flex;align-items:center;height:clamp(54px,6.4vw,100px);overflow:hidden;white-space:nowrap}
.emb-a{transform:translateY(-62%) rotate(-3.2deg);background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%,rgba(21,22,22,.06)),var(--amarillo);color:var(--negro);border-block:2px solid rgba(21,22,22,.22);box-shadow:0 8px 0 rgba(21,22,22,.18)}
.emb-b{transform:translateY(-30%) rotate(2.4deg);height:clamp(40px,4.4vw,68px);background:var(--negro);color:var(--amarillo)}
.emb-pista{display:flex;align-items:center;flex:none;animation:emb 34s linear infinite}
.emb-b .emb-pista{animation-duration:46s;animation-direction:reverse}
.emb span{padding-inline:.32em;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:1}
.emb-a span{font-size:clamp(2.3rem,5vw,4.7rem)}
.emb-b span{font-size:clamp(1.15rem,2.2vw,2rem);letter-spacing:.02em}
.emb i{font-style:normal;font-size:clamp(1rem,1.8vw,1.6rem)}
.emb-iso{--iso1:var(--violeta);--iso2:var(--papel);flex:none;width:clamp(30px,3.6vw,58px);height:clamp(28px,3.3vw,54px)}
@keyframes emb{to{transform:translateX(-50%)}}
.embalaje+main .ahora{padding-top:calc(var(--alto,160px) * .5 + clamp(22px,3vw,40px))}
@media (prefers-reduced-motion:reduce){.mayor::before,.mayor::after,.emb-pista{animation:none!important}}
.btn-lleno.ancho-auto{display:inline-block;width:auto}

/* ───────── Banda de la temporada ───────── */
.ahora{padding-bottom:calc(var(--rb) + clamp(22px,3vw,40px))}
.ahora-int{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,44px);align-items:center}
.ahora-etq{display:inline-block;padding:3px 12px;border:1.5px solid var(--negro);border-radius:99px;font-size:.9rem;font-weight:500}
.ahora h2{margin-top:10px;font-size:clamp(2rem,4.6vw,4rem);line-height:.98}
.ahora-baj{margin-top:10px;font-size:1.08rem;line-height:1.36;max-width:52ch;color:var(--gris)}
.ahora-plazo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px;padding:12px 16px;background:var(--amarillo);border-radius:20px}
.ahora-n{display:flex;align-items:center;gap:9px;flex:none}
.ahora-n strong{font-size:clamp(2.2rem,4vw,3rem);line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
.ahora-n span{font-size:.84rem;font-weight:600;line-height:1.1;max-width:9ch}
.ahora-plazo p{flex:1 1 220px;font-size:.96rem;line-height:1.3;min-width:0}
.ahora-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ahora-cta .btn-lleno{width:auto}
.ahora-cta .btn-linea{padding-block:10px;font-size:1rem}
.ahora-prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,12px);min-width:0}
.ahora-prods .mini{background:var(--papel2)}
.ahora-sigue{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:clamp(16px,2vw,24px);padding-top:12px;border-top:1.5px dashed var(--linea);font-size:.96rem}
.ahora-sigue span{font-weight:300}
.ahora-sigue a{font-weight:700;text-decoration:none}
.ahora-sigue a:hover{text-decoration:underline;text-underline-offset:3px}
.ahora-sigue small{font-weight:400;color:var(--gris);font-size:.86rem}
.ahora-sigue .todo{margin-left:auto;font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ───────── Tarjeta chica ───────── */
.mini{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 10px 12px;background:var(--papel);color:var(--negro);border-radius:20px;text-decoration:none;transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.mini:hover{transform:translateY(-3px)}
.mini .c-plato{width:min(88%,150px);margin-bottom:4px}
.mini .sb{display:none}
.mini strong{font-size:1.02rem;line-height:1.08;font-weight:800}
.mini-pr{font-size:.86rem;font-variant-numeric:tabular-nums;line-height:1.18;color:var(--gris)}
.mini-pr small{display:block;font-size:.78rem}
.grilla-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,12px);margin-block:12px}
.grilla-mini.n6{grid-template-columns:repeat(6,minmax(0,1fr))}
.c-papel .mini{background:var(--papel2)}
.celda.en-temporada{outline:3px solid var(--amarillo);outline-offset:-3px}
.celda.en-temporada::before{content:attr(data-sello);position:absolute;left:12px;top:12px;z-index:2;padding:2px 10px;background:var(--amarillo);color:var(--negro);border-radius:99px;font-size:.76rem;font-weight:700}
.p-grilla{grid-auto-flow:dense}

/* ───────── Cabecera de páginas internas ───────── */
.cab{position:relative;padding-block:clamp(16px,2.4vw,28px) calc(var(--rb) + clamp(22px,3vw,44px));overflow:clip}
.cab-int{position:relative;max-width:1320px;margin-inline:auto;padding-right:clamp(16px,24vw,330px)}
.cab h1{font-size:clamp(2.4rem,6.2vw,5.4rem);line-height:.96;max-width:17ch}
.cab .sub{margin-top:6px}
.lead{margin-top:clamp(12px,1.6vw,20px);font-size:clamp(1.08rem,1.45vw,1.28rem);line-height:1.38;max-width:62ch;font-weight:400}
.c-verde .lead,.c-verde .act{color:var(--negro);font-weight:500}
.act{margin-top:8px;font-size:.86rem;font-weight:300}
.cab-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cab-cta .btn-amarillo,.cab-cta .btn-lleno{margin:0;width:auto}
.c-amarillo .btn-amarillo{background:var(--negro);color:#fff}
.cab-bicho{position:absolute;right:clamp(16px,3vw,44px);bottom:calc((var(--rb) + clamp(22px,3vw,44px)) * -1);width:clamp(90px,19vw,250px)}
.migas ol{display:flex;flex-wrap:wrap;gap:3px 8px;list-style:none;margin-bottom:clamp(10px,1.4vw,18px);font-size:.86rem}
.migas li+li::before{content:"/";margin-right:8px;opacity:.6}
.migas a{text-decoration:underline;text-underline-offset:2px}

/* ───────── Texto ───────── */
.prosa{max-width:820px}
.prosa h2{font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1;margin-top:clamp(26px,3.4vw,44px);margin-bottom:10px}
.prosa>h2:first-child,.prosa>*:first-child{margin-top:0}
.prosa p{font-size:1.06rem;line-height:1.5;margin-block:9px}
.prosa a:not(.mini):not(.btn-lleno):not(.btn-linea){text-decoration:underline;text-underline-offset:3px;font-weight:500}
.ancha{max-width:none}
.lista{list-style:none;display:grid;gap:7px;margin-block:10px}
.lista li{position:relative;padding-left:20px;font-size:1.04rem;line-height:1.42}
.lista li::before{content:"";position:absolute;left:1px;top:.5em;width:9px;height:9px;background:var(--amarillo);border-radius:50%;box-shadow:0 0 0 1.5px var(--negro)}
.pasos-lista{counter-reset:p;list-style:none;display:grid;gap:9px;margin-block:10px}
.pasos-lista li{counter-increment:p;position:relative;padding-left:44px;font-size:1.04rem;line-height:1.42}
.pasos-lista li::before{content:counter(p);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:32px;height:32px;background:var(--violeta);color:#fff;border-radius:50%;font-weight:800}
.familias{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:8px;margin-block:12px}
.familias a{display:block;padding:12px 15px;border-radius:18px;text-decoration:none!important}
.familias b{display:block;font-size:1.2rem;font-weight:800;line-height:1.1}
.familias span{font-size:.92rem;line-height:1.25}

/* ───────── Tablas ───────── */
.so-m{display:none}
.tabla-wrap{overflow-x:auto;margin-block:12px;border:2px solid var(--negro);border-radius:18px;background:#fff;color:var(--negro);-webkit-overflow-scrolling:touch}
.tabla{width:100%;border-collapse:collapse;font-size:.98rem;line-height:1.25;font-variant-numeric:tabular-nums}
.tabla caption{padding:10px 14px 2px;text-align:left;font-size:.88rem;color:var(--gris);caption-side:top}
.tabla th,.tabla td{padding:8px 14px;text-align:left;border-top:1px solid var(--linea);vertical-align:baseline}
.tabla thead th{border-top:0;font-size:.84rem;font-weight:600;color:var(--gris);white-space:nowrap}
.tabla tbody th{font-weight:700}
.tabla small{color:var(--gris);font-size:.82rem;font-weight:400}
.tabla a{text-decoration:underline;text-underline-offset:2px}
.tabla .d{text-align:right;white-space:nowrap}
.tabla tr.activa{background:color-mix(in srgb,var(--amarillo) 26%,#fff)}
.tabla tr.vencida td,.tabla tr.vencida th{color:var(--gris);font-weight:400}
.btn-tabla{padding:3px 11px;background:var(--negro);color:#fff;border:0;border-radius:99px;font-size:.84rem;font-weight:700;white-space:nowrap}
.btn-tabla:hover{background:var(--violeta)}
.tabla-cal td:first-child{white-space:normal;min-width:110px}

/* ───────── Preguntas frecuentes ───────── */
.faq{margin-top:clamp(22px,3vw,40px)}
.faq h2{margin-bottom:10px}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-block:11px;font-size:1.1rem;font-weight:700;line-height:1.2;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.4rem;line-height:.8;font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:12px;font-size:1.03rem;line-height:1.45;color:var(--gris);max-width:68ch}

/* ───────── Producto ───────── */
.prod{padding-block:clamp(14px,2vw,24px) calc(var(--rb) + clamp(26px,3.4vw,44px));border-radius:0;margin-top:0}
.prod-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(16px,2.6vw,36px);align-items:start}
.prod .f-escena{border-radius:26px;position:sticky;top:calc(70px + env(safe-area-inset-top,0px))}
.prod .f-datos{padding:0}
.prod h1{font-size:clamp(2rem,4vw,3.5rem);line-height:.98}
.lead-prod{font-size:1.1rem;line-height:1.4}
.prod-fecha{padding:9px 14px;background:var(--amarillo);border-radius:14px;font-size:.95rem;line-height:1.3}
.prod-info{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,44px)}
.prod-info h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;margin-bottom:9px}
.prod-info p{font-size:1.06rem;line-height:1.46}
.prod-info .tabla-wrap{margin-top:0}
.prod-enlaces{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.prod-enlaces a{padding:4px 12px;border:1.5px solid currentColor;border-radius:99px;font-size:.92rem;text-decoration:none}
.prod-enlaces a:hover{background:rgba(255,255,255,.14)}
.c-papel .prod-enlaces a:hover{background:var(--papel2)}
.f-mas-info{font-size:.92rem;text-decoration:underline;text-underline-offset:3px;text-align:center}

/* ───────── Lo que acompaña la lectura ───────── */
.con-lateral{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(22px,4vw,56px);align-items:start}
.cl-main{min-width:0}
.cl-main .prosa{max-width:none}
.lateral{position:sticky;top:calc(92px + env(safe-area-inset-top,0px));display:grid;gap:9px;margin-top:56px;padding:16px;background:var(--amarillo);border-radius:24px}
.lat-bicho{position:absolute;right:18px;bottom:calc(100% - 3px);width:78px}
.lat-t{font-size:1.5rem;font-weight:800;line-height:1.02;letter-spacing:-.012em}
.lateral p:not(.lat-t){font-size:.98rem;line-height:1.32}
.lateral .btn-linea{text-align:center;padding-block:9px;white-space:normal}
.ped-mini{gap:7px}
.ped-mini h2{margin-top:10px;font-size:1.5rem;line-height:1}
.ped-mini ul{list-style:none;display:grid;gap:4px;padding-bottom:8px;border-bottom:1px solid var(--linea)}
.ped-mini li{display:flex;gap:9px;font-size:.94rem;line-height:1.24}
.ped-mini li span{flex:none;min-width:60px;font-weight:700;font-variant-numeric:tabular-nums}

/* ───────── Llamado final ───────── */
.cta-band h2{font-size:clamp(2.1rem,5vw,4.2rem);line-height:.96;max-width:18ch}
.cta-band p{margin-top:8px;font-size:1.1rem;line-height:1.36;max-width:56ch}
.cta-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cta-acc .btn-lleno{width:auto}
.cta-acc .btn-linea{padding-block:10px;font-size:1rem}
.casos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px;margin-top:12px;list-style:none}
.casos li{padding:13px 16px;background:var(--papel2);border-radius:18px;line-height:1.3}

/* ───────── Pie con mapa del sitio ───────── */
.pie-mapa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px clamp(14px,2vw,28px);max-width:1320px;margin:clamp(20px,3vw,34px) auto 0;padding-top:16px;border-top:1.5px dashed rgba(255,255,255,.5)}
.pie-mapa h2{font-size:1.05rem;font-weight:800;line-height:1.1;letter-spacing:0;margin-bottom:7px}
.pie-mapa ul{list-style:none;display:grid;gap:4px}
.pie-mapa a{font-size:.92rem;font-weight:300;line-height:1.25;text-decoration:none}
.pie-mapa a:hover{text-decoration:underline;text-underline-offset:3px}
.pie-baja{margin-top:16px;border-top:0;padding-top:0}

/* ───────── El cierre ───────── */
.ped-cab{padding-block:clamp(14px,2vw,22px) calc(var(--rb) + clamp(16px,2vw,26px))}
.ped-cab h1{font-size:clamp(2rem,4.8vw,3.8rem);line-height:.98}
.ped-pasos{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin-top:12px;counter-reset:s}
.ped-pasos li{counter-increment:s;display:flex;align-items:center;gap:7px;padding:4px 13px 4px 5px;border:1.5px solid rgba(255,255,255,.7);border-radius:99px;font-size:.92rem;font-weight:300}
.ped-pasos li::before{content:counter(s);display:grid;place-items:center;width:23px;height:23px;border-radius:50%;border:1.5px solid currentColor;font-weight:700;font-size:.82rem}
.ped-pasos li[aria-current]{background:var(--amarillo);color:var(--negro);border-color:var(--amarillo);font-weight:700}
.ped-pasos li.hecho::before{content:"✓";background:#fff;color:var(--violeta);border-color:#fff}
.ped{scroll-margin-top:70px;padding-bottom:calc(var(--rb) + clamp(26px,3.4vw,44px))}
.ped-dos{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,44px);align-items:start}
.ped-lineas{min-width:0;border-top:2px solid var(--negro)}
.ped-sumar{display:inline-block;margin-top:10px}
.ped-resumen{position:sticky;top:calc(70px + env(safe-area-inset-top,0px));display:grid;gap:9px;padding:6px 18px 18px;background:#fff;border:2px solid var(--negro);border-radius:24px;min-width:0}
.ped-pregunta{margin-top:6px;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1}
.ped-aclara{font-size:1rem;line-height:1.38;color:var(--gris)}
.ped-no{text-align:center}
.ped-form{display:grid;gap:12px;max-width:820px}
.ped-form h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1}
.f-grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px}
.f-campo{display:grid;gap:4px;min-width:0}
.f-campo>span{font-size:.88rem;font-weight:600}
.f-campo input,.f-campo select,.f-campo textarea{width:100%;min-height:44px;padding:9px 14px;background:#fff;color:var(--negro);border:2px solid var(--negro);border-radius:14px;font:500 1rem var(--f-txt)}
.f-campo textarea{resize:vertical}
.f-campo [aria-invalid="true"]{border-color:#c0392b;box-shadow:0 0 0 2px rgba(192,57,43,.2)}
.f-error{font-size:.86rem;font-style:normal;font-weight:600;color:#b03224}
.f-extras{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0;padding:0}
.f-extras legend{padding:0;margin-bottom:6px;font-size:.88rem;font-weight:600}
.f-extras label{cursor:pointer}
.f-extras input{position:absolute;opacity:0}
.f-extras span{display:block;padding:7px 14px;border:2px solid var(--negro);border-radius:99px;font-size:.94rem;font-weight:500}
.f-extras input:checked+span{background:var(--negro);color:#fff}
.f-extras input:focus-visible+span{outline:3px solid var(--gota);outline-offset:2px}
.f-priv{font-size:.86rem;line-height:1.32;color:var(--gris)}
.f-acc{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
.f-acc .btn-lleno{width:auto;flex:1 1 240px}
.f-acc .btn-linea{padding-block:10px}
.ped-nota{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(18px,3vw,40px);align-items:start}
.ped-acciones{position:sticky;top:calc(70px + env(safe-area-inset-top,0px));display:grid;gap:10px;min-width:0}
.ped-acciones h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1}
.btn-whatsapp{display:block;padding:14px 18px;background:#1ea952;color:#fff;border-radius:99px;font-weight:800;font-size:1.12rem;text-align:center;text-decoration:none;transition:transform .12s,background .15s}
.btn-whatsapp:hover{background:#178f45;transform:scale(1.015)}
.ped-post{padding:11px 14px;background:var(--amarillo);border-radius:16px;font-size:.96rem;line-height:1.34}
.ped-sec{display:flex;flex-wrap:wrap;gap:6px}
.ped-sec .btn-linea{padding:5px 12px;font-size:.88rem}
.wa-num-sel{user-select:all;white-space:nowrap}
.car-nota{font-size:.84rem;color:var(--gris);line-height:1.2}
.visor-acc{display:grid;gap:10px;justify-items:start;margin-bottom:14px}
.visor-aviso{padding:9px 14px;background:var(--amarillo);border-radius:14px;font-size:.96rem;line-height:1.3}

/* ───────── La hoja: la nota de pedido, con forma de remito ───────── */
.hoja{min-width:0;padding:clamp(16px,2.4vw,30px);background:#fff;color:var(--negro);border:2px solid var(--negro);border-radius:6px;font-size:.96rem}
.hoja-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-bottom:12px;border-bottom:2px solid var(--negro)}
.hoja-marca{display:flex;gap:12px;align-items:center;min-width:0}
.hoja-logo{--iso1:var(--violeta);--iso2:var(--amarillo);flex:none;width:92px;aspect-ratio:1.62;color:var(--negro)}
.hoja-marca p{font-size:.84rem;line-height:1.28}
.hoja-num{text-align:right;margin-left:auto}
.hoja-num h2{font:700 clamp(1.3rem,3vw,1.9rem)/1 var(--f-ser);font-style:italic;letter-spacing:0}
.hoja-n{margin-block:3px;font-weight:800;font-size:1.06rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.hoja-num p:last-child{font-size:.84rem;line-height:1.28}
.hoja-aviso{margin-block:9px;padding:5px 10px;background:var(--papel2);font-size:.84rem;line-height:1.28}
.hoja-cliente{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin-bottom:10px}
.hoja-cliente div{display:grid;grid-template-columns:minmax(0,7.2rem) minmax(0,1fr);gap:8px;padding-block:3px;border-bottom:1px solid var(--linea);font-size:.92rem;line-height:1.25}
.hoja-cliente dt{color:var(--gris)}
.hoja-cliente dd{font-weight:600;overflow-wrap:anywhere}
.hoja .tabla-wrap{border-width:1.5px;border-radius:4px}
.hoja-tabla{font-size:.9rem}
.hoja-tabla th,.hoja-tabla td{padding:5px 9px}
.hoja-cuentas{max-width:360px;margin:8px 0 8px auto}
.hoja-extra{margin-block:5px;font-size:.92rem;line-height:1.3}
.hoja-plazo{margin-block:8px;padding:6px 10px;background:var(--papel2);font-size:.88rem;line-height:1.3}
.hoja-plazo.justo{background:var(--amarillo)}
.hoja-pie{margin-top:9px;padding-top:8px;border-top:1px dashed var(--linea);font-size:.8rem;line-height:1.32;color:var(--gris)}
.hoja-origen{margin-top:3px}

/* ───────── Error 404 ───────── */
.error404{display:grid;justify-items:center;gap:12px;padding-block:clamp(26px,5vw,60px);text-align:center}
.error404 .car-vacio-bichos{width:clamp(200px,28vw,330px)}
.error404 .car-horror{font-size:clamp(2rem,6vw,4rem)}

/* ───────── Adaptación ───────── */
@media (max-width:1240px){
  .b-menu>a,.b-grupo>summary{padding-inline:8px;font-size:.9rem}
  .monedas{display:none}
}
@media (max-width:1040px){
  .b-ham{display:grid;flex:none}
  .b-menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:2px;max-height:calc(100dvh - 70px);overflow:auto;padding:10px 16px 16px;background:var(--papel);box-shadow:0 16px 30px rgba(21,22,22,.24)}
  .b-menu.abierto{display:flex}
  .b-int{justify-content:space-between}
  .b-menu>a,.b-grupo>summary{padding:10px 8px;font-size:1.05rem}
  .b-sub{position:static;box-shadow:none;background:none;padding:0 0 8px 12px;min-width:0}
  .b-sub a{padding:8px}
  .ahora-int,.prod-info,.ped-dos,.ped-nota{grid-template-columns:minmax(0,1fr)}
  .ahora-prods{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grilla-mini.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ped-resumen,.ped-acciones{position:static}
  .con-lateral{grid-template-columns:minmax(0,1fr)}
  .lateral{display:none}
  .prod-grid{grid-template-columns:minmax(0,1fr)}
  .prod .f-escena{position:static}
  .prod .f-plato{width:min(70%,280px)}
  .pie-mapa{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .cab-int{padding-right:clamp(0px,12vw,90px)}
  .cab-bicho{width:clamp(78px,18vw,140px);right:12px}
  .chip{display:none}
}
@media (max-width:720px){
  /* Las tablas con muchas columnas pasan a tarjetas: lo importante no queda fuera de pantalla */
  .tabla-tarjetas thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tabla-tarjetas,.tabla-tarjetas tbody,.tabla-tarjetas tr,.tabla-tarjetas td,.tabla-tarjetas tbody th{display:block}
  .tabla-tarjetas caption{display:block}
  .tabla-tarjetas tr{display:flex;flex-direction:column;padding:9px 12px;border-top:1px solid var(--linea)}
  .tabla-tarjetas tbody th{order:-1}
  .tabla-tarjetas td[data-vacio]{display:none}
  .tabla-tarjetas td>small{grid-column:2;margin-top:-3px}
  .tabla-tarjetas td,.tabla-tarjetas tbody th{padding:0;border:0}
  .tabla-tarjetas tbody th{font-size:1.06rem;margin-bottom:3px}
  .tabla-tarjetas td{display:grid;grid-template-columns:minmax(0,9.4rem) minmax(0,1fr);gap:8px;padding-block:1px}
  .tabla-tarjetas td::before{content:attr(data-et);font-size:.82rem;color:var(--gris)}
  .ahora-prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ahora-sigue .todo{margin-left:0}
  .tabla{font-size:.92rem}
  .tabla th,.tabla td{padding:7px 10px}
  .prosa p{font-size:1.02rem}
  .f-grilla,.hoja-cliente{grid-template-columns:minmax(0,1fr)}
  .ped-resumen{padding-inline:14px}
  .hoja-num{text-align:left;margin-left:0}
}
@media (max-width:600px){
  .grilla-mini,.grilla-mini.n6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oc-m{display:none}
  .so-m{display:block}
  .hoja-tabla th,.hoja-tabla td{padding:5px 6px}
  .hoja-tabla{font-size:.84rem}
  .hoja{padding:14px 10px}
  .cab-int{padding-right:0}
  .cab h1{font-size:clamp(2.2rem,10.5vw,3rem)}
  .cab-bicho{display:none}
  .pie-mapa{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 12px}
  .ahora h2{font-size:clamp(1.9rem,9vw,2.6rem)}
  .prod .f-spec{grid-template-columns:minmax(0,1fr)}
  .cinta{font-size:.84rem}
}
@media print{
  body{background:#fff}
  .cinta,.barra,.pie,.pedido-flota,.ped-cab,.ped-acciones,.visor-acc,.saltar,.ped-sumar{display:none!important}
  .banda{margin:0;padding:0;border-radius:0;background:#fff!important}
  .ped-nota{display:block}
  .hoja{border:0;padding:0;font-size:11pt}
  .tabla-wrap{overflow:visible}
  @page{size:A4;margin:14mm}
}

.creditos img{display:block;width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--amarillo)}
.creditos-nota{margin-top:16px;max-width:70ch}