/* REGALITOS by RXDG · sitio web
   Tokens = los del par aprobado "Regalos RXDG" (Regalos/sq/tokens.md). Tema único de marca: azul tienda claro (sin azul marino).
   Formas: placas y botones = paralelogramo skew -6° sin radio (como las placas de la marca); paneles 20 px; tarjetas 16 px.
   Acento único de acción = amarillo. Rosa solo para Bloque 2 y avisos (regla de la marca). */
@font-face{font-family:'Burbank';src:url(/fonts/burbank.woff2) format('woff2');font-display:swap}
:root{
  --azul:#0a63d8; --azul-2:#1a7ff0;
  --panel:rgba(5,22,138,.55); --panel-borde:rgba(0,195,254,.5);
  --chip:#0084e6; --chip-borde:#00c3fe;
  --soft:#dcf3ff; --hi:#b4f1ff;
  --am:#fdff00; --am-osc:#1b1b00;
  --rosa:#f5327d; --rosa-2:#c70061; --rosa-soft:#ff8fbf;
  --ok:#b6f400;
  --txt:#fff;
  --r-panel:20px; --r-card:16px;
  --ancho:1240px; --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;color:var(--txt);background:var(--azul);line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit}
.fondo{position:fixed;inset:0;z-index:-1;background:var(--azul) url(/img/shop_bg.jpg) center/cover no-repeat}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--am);outline-offset:3px}

/* Burbank: centrado en su placa (REGLAS.md) */
.bb{font-family:'Burbank',Impact,sans-serif;font-weight:400;line-height:1;padding-top:.25em;text-transform:uppercase;letter-spacing:.005em}
.sk{transform:skew(-6deg)}
.am{color:var(--am)}
.pr{font-family:'Archivo',sans-serif;font-style:italic;font-weight:800;font-variation-settings:"wdth" 125;font-variant-numeric:tabular-nums}

section{width:min(var(--ancho),100% - 2*var(--gut));margin-inline:auto;padding-block:clamp(44px,6vw,80px)}
.titulo{font-size:clamp(40px,6vw,72px);text-shadow:0 4px 0 rgba(5,22,138,.35);margin-bottom:28px}

/* ---------- botones (placa en paralelogramo, como las de la marca) ---------- */
.btn{--bg:var(--am);--fg:#06156b;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:0;cursor:pointer;
  background:var(--bg);color:var(--fg);transform:skew(-6deg);text-decoration:none;font:800 16px/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
  box-shadow:0 5px 0 rgba(5,22,138,.45);transition:transform .15s,box-shadow .15s,filter .15s}
.btn>span{transform:skew(6deg);display:inline-flex;align-items:center;gap:10px}
.btn i{font-size:20px}
.btn:hover{filter:brightness(1.06);transform:skew(-6deg) translateY(-2px);box-shadow:0 7px 0 rgba(5,22,138,.45)}
.btn:active{transform:skew(-6deg) translateY(2px);box-shadow:0 2px 0 rgba(5,22,138,.45)}
.btn-linea{--bg:rgba(5,22,138,.35);--fg:#fff;box-shadow:inset 0 0 0 2px var(--chip-borde),0 5px 0 rgba(5,22,138,.45)}
.btn-linea:hover{box-shadow:inset 0 0 0 2px var(--chip-borde),0 7px 0 rgba(5,22,138,.45)}
.btn-sm{min-height:42px;padding:0 18px;font-size:14px}
.btn-brillo{position:relative;overflow:hidden}
.btn-brillo::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.btn-brillo:hover::after{transform:translateX(120%)}
.btn i{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.btn:hover .ph-arrow-right{transform:translateX(4px)}

/* ---------- nav (navigation-patterns: barra superior en escritorio, barra inferior en celular; activo = barra amarilla + peso) ---------- */
.saltar{position:absolute;left:12px;top:-60px;z-index:99;background:var(--am);color:#06156b;font-weight:800;padding:10px 14px;border-radius:8px}
.saltar:focus{top:10px}
.nav{position:sticky;top:0;z-index:50;height:68px;display:flex;align-items:center;gap:24px;padding:0 var(--gut);
  background:rgba(8,70,190,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,195,254,.25)}
.nav-logo img{height:40px;width:auto}
.nav-links{display:flex;gap:2px;margin-left:auto;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.nav-links a{position:relative;text-decoration:none;padding:10px 14px;opacity:.85;transition:opacity .15s,color .15s}
.nav-links a:hover{opacity:1;color:var(--am)}
.nav-links a[aria-current=page]{opacity:1;color:#fff}
.nav-links a[aria-current=page]::after{content:'';position:absolute;left:14px;right:14px;bottom:-14px;height:4px;background:var(--am);transform:skew(-20deg)}
.nav>.btn{margin-left:10px}
.nav{transition:box-shadow .25s,background-color .25s}
.nav.bajo{background:rgba(7,58,175,.92);box-shadow:0 10px 30px rgba(3,14,70,.28)}
.centinela{position:absolute;top:0;left:0;width:1px;height:8px;pointer-events:none}
.nav-cart{position:relative;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:23px;
  background:rgba(5,22,138,.45);box-shadow:inset 0 0 0 2px var(--chip-borde);transition:transform .15s cubic-bezier(.16,1,.3,1),background-color .15s}
.nav-cart:hover{background:rgba(5,22,138,.7);transform:translateY(-1px)}
.nav-cart:active{transform:scale(.94)}
.cart-n{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--am);color:#06156b;font:900 12px/21px 'Inter',sans-serif;text-align:center;box-shadow:0 0 0 2px #0a4fc4}
.cart-n.salta{animation:salta .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes salta{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.tabbar{display:none}
@media (max-width:820px){
  .nav-links{display:none}.nav>.btn,.nav-cart{display:none}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(6,1fr);height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:rgba(6,40,150,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(0,195,254,.35)}
  .tabbar button{border:0;background:none;cursor:pointer;font:inherit}
  .tabbar .cart-n{top:6px;right:calc(50% - 26px)}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;font-size:11.5px;font-weight:800;color:#cfe6ff}
  .tabbar i{font-size:24px;transition:transform .15s}
  .tabbar a:active i,.tabbar button:active i{transform:scale(.88)}
  .tabbar a[aria-current=page]{color:var(--am)}
  .tabbar a[aria-current=page]::before{content:'';position:absolute;top:0;left:28%;right:28%;height:3px;background:var(--am)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom))}
}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr;gap:12px;padding-top:clamp(28px,5vw,64px);padding-bottom:0;min-height:min(calc(100dvh - 150px),760px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#e6f9ff;margin-bottom:14px}
.hero h1{font-size:clamp(58px,9vw,118px);text-shadow:0 6px 0 rgba(5,22,138,.4);margin-left:.04em}
.hero h1 .am{display:block}
.hero-sub{font-size:clamp(17px,1.6vw,20px);font-weight:600;color:#eaf6ff;max-width:34ch;margin:18px 0 28px}
.hero-sub b{color:var(--am);font-weight:800}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px}
.hero-vis{position:relative;height:clamp(360px,52vw,600px);align-self:end}
/* .pj llega hasta arriba del hueco para que lo que sube sobre la cabeza (brazos, armas, sombreros) no se corte;
   la caja que se encuadra (.pj-art) sigue empezando en el 30 %, así el busto no cambia */
.pj{position:absolute;bottom:0;top:0;width:56%;overflow:hidden;cursor:pointer;
  -webkit-mask-image:linear-gradient(#000 85%,transparent 100%);mask-image:linear-gradient(#000 85%,transparent 100%)}
.pj-art{position:absolute;inset:30% 0 0;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pj:hover .pj-art{transform:translateY(-8px)}
.pj-art img{position:absolute;max-width:none;opacity:0;transition:opacity .45s ease}
.pj-art img.ok.on{opacity:1}
/* featured.png es cuadrado con el personaje entero: alto 175 % del hueco = se ve hasta bajo el cinturón (60 %), como la imagen 1 */
.pj-a{left:-4%}.pj-b{right:-4%}
.pj,.precio-barra{transition:translate .5s cubic-bezier(.16,1,.3,1)}
.pj-a{translate:calc(var(--px,0) * -22px) calc(var(--py,0) * -10px)}
.pj-b{translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -8px)}
.precio-barra{translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 8px)}
.hero-halo{position:absolute;left:8%;right:8%;top:22%;bottom:-6%;border-radius:50%;background:radial-gradient(closest-side,rgba(110,230,255,.42),rgba(110,230,255,.12) 60%,transparent);pointer-events:none}
.h-l{display:inline-block}
.hero h1 .h-l.am{display:block}
.precio-barra{position:absolute;left:50%;top:4%;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(6px,1.2vw,12px);width:min(560px,96%);z-index:2;filter:drop-shadow(0 7px 0 rgba(5,22,138,.4))}
/* Placas con borde real (impeccable: sin bordes que se escapan). Cada placa = capa de borde (el ::before, misma forma)
   + relleno recortado 4 px hacia adentro con la misma forma; así el borde sigue también las diagonales de la punta. */
.pb-pavos,.pb-soles{--b:4px;position:relative;isolation:isolate;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:96px;padding-top:.12em;line-height:1}
.pb-pavos::before,.pb-soles::before,.pb-pavos::after,.pb-soles::after{content:'';position:absolute;z-index:-1}
.pb-pavos::before,.pb-soles::before{inset:0}
.pb-pavos::after,.pb-soles::after{inset:var(--b)}
.pb-pavos{font-size:72px;padding-right:7%}
.pb-pavos::before{background:#b4570a;clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%)}
.pb-pavos::after{background:linear-gradient(#ffc04d,#f59a1b 55%,#ec8a0c);clip-path:polygon(0 0,calc(86% - 1px) 0,100% 50%,calc(86% - 1px) 100%,0 100%)}
.pb-pavos img{width:58px;height:58px;margin-top:-.12em;filter:drop-shadow(0 2px 0 rgba(120,50,0,.45))}
.pb-x{font-size:64px;padding-top:.12em;color:#fff;text-shadow:0 4px 0 rgba(5,22,138,.45)}
.pb-soles{font-size:66px;color:var(--hi);padding-left:7%;white-space:nowrap}
.pb-soles::before{background:var(--chip-borde);clip-path:polygon(12% 0,100% 0,100% 100%,12% 100%,0 50%)}
.pb-soles::after{background:linear-gradient(#0a7fe0,#0560c2);clip-path:polygon(calc(12% + 1px) 0,100% 0,100% 100%,calc(12% + 1px) 100%,0 50%)}
@media (min-width:900px){
  .hero{grid-template-columns:1.05fr 1fr;gap:32px}
  .hero-vis{height:min(600px,72dvh)}
}
@media (max-width:520px){.pb-pavos,.pb-soles{--b:3px;height:68px;font-size:46px}.pb-soles{font-size:40px}.pb-x{font-size:40px}.pb-pavos img{width:42px;height:42px}}

/* ---------- cinta (una sola en el sitio) ---------- */
.cinta{position:relative;z-index:4;overflow:hidden;background:var(--am);color:#06156b;transform:skewY(-2deg);margin:-52px 0 0;box-shadow:0 8px 0 rgba(5,22,138,.35)}
.cinta-pista{display:flex;align-items:center;gap:28px;width:max-content;padding:16px 0 12px;font:400 clamp(26px,3vw,36px)/1 'Burbank',Impact,sans-serif;text-transform:uppercase;white-space:nowrap}
.cinta-pista img{width:30px;height:30px;margin-top:-6px}
@media (prefers-reduced-motion:no-preference){.cinta-pista{animation:cinta 38s linear infinite}.cinta:hover .cinta-pista{animation-play-state:paused}}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ---------- cómo funciona ---------- */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:p}
.paso{position:relative;padding:22px 22px 24px;background:rgba(0,132,230,.55);border:2px solid var(--chip-borde);transform:skew(-6deg)}
.paso>*{transform:skew(6deg)}
.paso .num{display:block;font-size:44px;color:var(--am)}
.paso b{display:block;font-size:30px;margin:2px 0 8px}
.paso p{color:#e3f4ff;font-weight:500;font-size:15.5px}
.paso:not(:last-child)::after{content:'';position:absolute;right:-15px;top:50%;width:12px;height:18px;margin-top:-9px;background:var(--am);clip-path:polygon(0 0,100% 50%,0 100%);z-index:2}
@media (max-width:980px){.paso:not(:last-child)::after{display:none}}
@media (max-width:600px){.pasos{gap:12px}.paso{padding:16px 18px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline}.paso .num{font-size:34px}.paso b{font-size:26px;margin:0}.paso p{grid-column:1/-1;margin-top:6px}}
.aviso{display:flex;align-items:center;gap:12px;margin-top:26px;padding:16px 20px;background:rgba(5,22,138,.6);border-left:6px solid var(--am);font-weight:800;font-size:18px;width:fit-content;max-width:100%}
.aviso i{font-size:26px;color:var(--rosa-soft)}
.aviso b{color:var(--am)}

/* ---------- comunes: reloj, entradas ---------- */
.reloj{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--panel);border:1px solid var(--panel-borde);border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap}
.reloj b{font-variant-numeric:tabular-nums;color:var(--am)}
input,select{font:600 16px 'Inter',sans-serif;color:#fff;background:rgba(5,22,138,.55);border:2px solid var(--panel-borde);border-radius:10px;padding:12px 14px;width:100%}
input::placeholder{color:#a9cdf2}
input:focus,select:focus{outline:none;border-color:var(--am)}
input[type=search]::-webkit-search-cancel-button{display:none}
mark{background:rgba(253,255,0,.9);color:#06156b;border-radius:3px;padding:0 1px}

/* ---------- inicio: hoy en la tienda (carril horizontal) ---------- */
.hoy-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-bottom:22px}
.hoy-cab .titulo{margin-bottom:0}
.hoy-ctrl{display:flex;align-items:center;gap:10px}
.flecha{width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:20px;color:#fff;background:var(--panel);box-shadow:inset 0 0 0 2px var(--panel-borde);transition:transform .15s,background-color .15s}
.flecha:hover{background:rgba(5,22,138,.8)}
.flecha:active{transform:scale(.92)}
@media (hover:none){.flecha{display:none}}
.carril{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(180px,22vw,250px);gap:16px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:6px 2px 18px;
  margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none}
.carril::-webkit-scrollbar{display:none}
/* arrastrar con el mouse (gesture-patterns): mano abierta / cerrada; mientras se arrastra no hay snap ni scroll suave */
@media (hover:hover) and (pointer:fine){.carril{cursor:grab}}
.carril.arrastra{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.carril.arrastra .card{pointer-events:none}
.carril img{-webkit-user-drag:none;user-select:none}
/* progreso del carril (reemplaza la barra de scroll): cuánto ya viste */
.carril-prog{height:6px;border-radius:99px;background:rgba(5,22,138,.55);overflow:hidden;margin-top:4px;max-width:320px}
.carril-prog i{display:block;height:100%;width:var(--w,20%);border-radius:inherit;background:var(--am);transform:translateX(var(--x,0));transition:transform .12s linear}
.flecha:disabled{opacity:.35;cursor:default;transform:none}
.carril>*{scroll-snap-align:start}
.carril{scroll-behavior:smooth}

/* ---------- cabecera de página (Tienda / Preguntas) ---------- */
.pag-cab{width:min(var(--ancho),100% - 2*var(--gut));margin:0 auto;padding:clamp(28px,4vw,48px) 0 18px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.pag-cab h1{font-size:clamp(48px,7vw,88px);text-shadow:0 5px 0 rgba(5,22,138,.4)}
.pag-cab p{font-size:17px;font-weight:600;color:#eaf6ff;max-width:56ch;margin-top:8px}
.pag-cab p b{color:var(--am)}
.pag-cab .reloj{margin-bottom:6px}
.pag-tienda .pag-cab{width:min(1360px,100% - 2*var(--gut))}

/* ---------- tienda: barra lateral de secciones + resultados ---------- */
.tienda-layout{width:min(1360px,100% - 2*var(--gut));margin:0 auto 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
@media (min-width:1080px){.tienda-layout{grid-template-columns:250px minmax(0,1fr)}}
.secs{display:none}
@media (min-width:1080px){.secs{display:block;position:sticky;top:84px;max-height:calc(100dvh - 100px);overflow:auto;padding:16px 10px 16px 16px;
  background:var(--panel);border:2px solid var(--panel-borde);border-radius:var(--r-panel);scrollbar-width:thin;scrollbar-color:var(--chip-borde) transparent}}
.secs-tit{font:400 30px/1 'Burbank',Impact,sans-serif;padding-top:.25em;text-transform:uppercase;transform:skew(-6deg);margin-bottom:6px}
.secs-cat{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#dff7ff;margin:14px 0 4px}
.secs-sep{border:0;border-top:1px solid rgba(0,195,254,.3);margin:10px 0}
.secs-it{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;font-weight:700;font-size:14.5px;line-height:1.25;border-left:4px solid transparent}
.secs-it b{font-size:12px;font-weight:800;min-width:26px;text-align:center;padding:2px 6px;border-radius:999px;background:rgba(5,22,138,.6);color:var(--soft)}
.secs-it:hover{background:rgba(0,132,230,.35)}
.secs-it[aria-current]{background:rgba(0,132,230,.55);border-left-color:var(--am)}
.secs-it[aria-current] b{background:var(--am);color:#06156b}
.secs-it[aria-disabled=true]{opacity:.4}

.barra{position:sticky;top:68px;z-index:30;display:flex;gap:10px;align-items:center;padding:12px 0;margin-bottom:6px;
  background:linear-gradient(rgba(10,99,216,.96),rgba(10,99,216,.88));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.buscar{position:relative;flex:1;min-width:0}
.buscar>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--soft);font-size:19px;pointer-events:none}
.buscar input{padding:13px 78px 13px 44px;min-height:52px}
.q-borrar{position:absolute;right:44px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;color:var(--soft);font-size:22px;display:grid;padding:4px}
.q-borrar[hidden]{display:none}
.q-atajo{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:700 13px 'Inter',sans-serif;color:var(--soft);border:1px solid var(--panel-borde);border-radius:6px;padding:2px 8px}
@media (hover:none){.q-atajo{display:none}.q-borrar{right:10px}}
.orden select{min-height:52px;padding-right:34px;width:auto;cursor:pointer;appearance:none;
  background:rgba(5,22,138,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fdff00' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") right 12px center no-repeat}
.orden option{background:#06156b}
.btn-secs{min-height:52px}
.btn-secs b{background:var(--am);color:#06156b;border-radius:999px;padding:2px 7px;font-size:12px}
@media (min-width:1080px){.btn-secs{display:none}}
@media (max-width:640px){.barra{flex-wrap:wrap}.buscar{flex-basis:100%}.btn-secs,.orden{flex:1 1 0;min-width:0}.orden select{width:100%;font-size:14px;padding-left:12px}.btn-secs{padding:0 12px}}

/* sugerencias (search-ux: secciones primero = búsqueda como navegación, luego objetos con precio) */
.sugerencias{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;list-style:none;background:#06209a;border:2px solid var(--chip-borde);border-radius:14px;padding:6px;
  box-shadow:0 18px 40px rgba(3,14,70,.45);max-height:min(60dvh,440px);overflow:auto}
.sugerencias[hidden]{display:none}
.sugerencias li[role=option]{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer}
.sugerencias li[role=option]:hover,.sugerencias li[aria-selected=true]{background:rgba(0,132,230,.55)}
.sugerencias li>i{font-size:20px;color:var(--soft);width:40px;text-align:center}
.sugerencias img{width:40px;height:40px;object-fit:contain;border-radius:8px;background:rgba(0,132,230,.35)}
.sugerencias span{flex:1;min-width:0;font-weight:700;line-height:1.25}
.sugerencias small{display:block;font-size:12.5px;font-weight:600;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugerencias .pr{font-size:18px}
.sug-tit{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--hi);padding:6px 10px 2px}

/* filtros con conteos (search-ux: conteos, activos visibles y removibles) */
.filtros{display:grid;gap:8px;margin-bottom:12px}
.filtros-fila{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.filtros-fila::-webkit-scrollbar{display:none}
.fchip{flex:none;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;font:800 13.5px 'Inter',sans-serif;color:#fff;
  background:rgba(5,22,138,.5);padding:9px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,195,254,.45);transition:background .15s}
.fchip i{font-size:15px}
.fchip b{font-size:11.5px;font-weight:800;padding:1px 6px;border-radius:999px;background:rgba(0,132,230,.6)}
.fchip:hover{background:rgba(5,22,138,.8)}
.fchip[aria-pressed=true]{background:var(--am);color:#06156b;box-shadow:none}
.fchip[aria-pressed=true] b{background:#06156b;color:var(--am)}
.fchip:disabled{opacity:.4;cursor:default}
.resumen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:4px 0 18px;font-weight:600;color:#eaf6ff}
.resumen b{color:#fff}
.aplicados{display:flex;flex-wrap:wrap;gap:8px}
.aplicado{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font:700 13px 'Inter',sans-serif;background:#fff;color:#06156b;padding:6px 10px;border-radius:999px}
.limpiar,.enlace{border:0;background:none;cursor:pointer;font:800 13.5px 'Inter',sans-serif;color:var(--am);text-decoration:underline;text-underline-offset:3px}
.enlace{font-size:inherit}

.sec{width:auto;padding:0;margin:0 0 36px;margin-inline:0;scroll-margin-top:150px;content-visibility:auto;contain-intrinsic-size:auto 700px}
.sec-cab{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:-18px}
.sec-cab h2{font-size:clamp(30px,3.4vw,42px);text-shadow:0 3px 0 rgba(5,22,138,.35)}
.sec-cab span{font-size:13.5px;font-weight:700;color:var(--soft)}
.sec-hoja{margin:auto auto 0;width:100%;max-width:560px;max-height:80dvh;border:0;border-top:4px solid var(--chip-borde);border-radius:20px 20px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));color:#fff;background:#0846b4;overflow:auto}
.sec-hoja::backdrop{background:rgba(3,14,70,.7)}
.sec-hoja .secs-it{padding:12px 10px;font-size:16px}

.cero{text-align:center;padding:48px 20px;background:var(--panel);border:2px dashed var(--panel-borde);border-radius:var(--r-panel);font-weight:600}
.cero[hidden]{display:none}
.cero>i{font-size:44px;display:block;margin:0 auto 6px;color:var(--soft)}
.cero h2{font-size:clamp(30px,4vw,44px)}
.cero p{margin-top:8px;color:#eaf6ff}
.cero-acc{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:20px}
.cero-pop{margin-top:26px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--hi)}
.cero-secs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 18px}}
/* Tarjeta: degradado con los colores de la oferta (color1 -> color3 de la API) + luz arriba + franjas sutiles.
   Movimiento (emilkowalski-motion): inclinación 3D y brillo que siguen al mouse, elevación al pasar, entrada escalonada. */
.card{position:relative;aspect-ratio:.627;container-type:inline-size;color:#fff;text-align:left;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
/* Plantilla Prime: el tile es transparente; la tarjeta de color ocupa el 85 % inferior y la imagen puede asomar por arriba */
.card-fondo{position:absolute;inset:15% 0 0;z-index:0;border-radius:var(--r-card);overflow:hidden;
  background:radial-gradient(130% 70% at 50% -8%,color-mix(in srgb,var(--c1) 50%,#fff) 0%,transparent 60%),
             linear-gradient(165deg,var(--c1) 0%,color-mix(in srgb,var(--c1) 45%,var(--c3)) 55%,var(--c3) 100%);
  box-shadow:0 6px 0 rgba(5,22,138,.35),inset 0 0 0 1.5px rgba(255,255,255,.16);transition:box-shadow .35s}
.card-fondo::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(120deg,rgba(255,255,255,.07) 0 9px,transparent 9px 22px);
  -webkit-mask-image:linear-gradient(#000,transparent 55%);mask-image:linear-gradient(#000,transparent 55%)}
/* la imagen: se recorta a los lados y abajo (con el radio de la tarjeta) pero puede salir por arriba */
.card-art{position:absolute;inset:0;z-index:1;pointer-events:none;clip-path:inset(-30% 0 0 0 round 0 0 var(--r-card) var(--r-card));
  -webkit-mask-image:linear-gradient(#000 0,#000 64%,transparent 90%);mask-image:linear-gradient(#000 0,#000 64%,transparent 90%)}
.card[data-cols]:not([data-cols="1"]) .card-art{
  -webkit-mask-image:linear-gradient(#000 0,#000 70%,transparent 95%),linear-gradient(90deg,transparent 0,transparent 26%,#000 40%);
  mask-image:linear-gradient(#000 0,#000 70%,transparent 95%),linear-gradient(90deg,transparent 0,transparent 26%,#000 40%);
  -webkit-mask-composite:source-over;mask-composite:add}
.card[data-modo=gesto] .card-art,.card[data-modo=obj] .card-art,.card[data-modo=icono] .card-art{-webkit-mask-image:none;mask-image:none}
.card-art img{position:absolute;max-width:none;opacity:0;transform-origin:50% 100%;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.card-art img.ok.on{opacity:1}
.card-art img.plana{border-radius:12px;box-shadow:0 10px 24px rgba(3,14,70,.35)}
.card-art.sin-img::after{content:'\e9a0';font-family:'Phosphor-Bold';position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:56px;color:rgba(255,255,255,.5)}
.card[data-cols="2"]{grid-column:span 2;aspect-ratio:1.254}
@media (min-width:700px){.card[data-cols="3"],.card[data-cols="4"]{grid-column:span 3;aspect-ratio:1.88}}
@media (min-width:1000px){.card[data-cols="3"]{grid-column:span 3;aspect-ratio:1.88}.card[data-cols="4"]{grid-column:span 4;aspect-ratio:2.508}}
@media (max-width:699px){.card[data-cols="3"],.card[data-cols="4"]{grid-column:span 2;aspect-ratio:1.254}}
.card:hover,.card.tilt,.card:focus-within{--ty:-6px}
.card:hover .card-fondo,.card.tilt .card-fondo,.card:focus-within .card-fondo{box-shadow:0 14px 0 rgba(5,22,138,.3),0 24px 40px rgba(3,14,70,.35),inset 0 0 0 1.5px rgba(255,255,255,.24)}
.card.tilt{transition:transform .12s linear}
/* el zoom al pasar el mouse va en el contenedor (todas las capas de estilo juntas), así el cambio de estilo no salta */
.card-art{transition:transform .6s cubic-bezier(.16,1,.3,1);transform-origin:50% 100%}
.card:hover .card-art,.card.tilt .card-art{transform:translateY(-1.5%) scale(1.02)}
.card-brillo{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.7),transparent 50%)}
.card.tilt .card-brillo{opacity:1}
.card-txt{position:absolute;left:0;right:0;bottom:0;padding:12px 64px 14px 14px;z-index:3;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.card[data-cols]:not([data-cols="1"]) .card-txt{padding-right:14px;max-width:min(60%,360px)}
.card-sec{display:table;max-width:100%;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--am);background:rgba(6,21,107,.82);padding:3px 7px 2px;border-radius:5px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none}
.chapas{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
/* placas como fortnite.com / Plantilla Prime: blanca para el descuento, negra con lima para "Termina hoy" */
.chapa{display:inline-block;white-space:nowrap;font:italic 900 11px/1 'Archivo','Inter',sans-serif;font-variation-settings:"wdth" 112;text-transform:uppercase;letter-spacing:.02em;padding:5px 7px 4px;border-radius:6px;background:#fff;color:#000;text-shadow:none}
.chapa.hoy{background:#000;color:var(--ok)}
.card-tipo{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.85)}
.card-nombre{display:-webkit-box;font-size:15px;font-weight:800;line-height:1.2;margin:2px 0 6px;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .pr{font-size:clamp(24px,2.4vw,32px);line-height:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.card .pr s{font-size:.55em;opacity:.85}
.card-pv{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.9);margin-top:4px}
.card-pv img{width:14px;height:14px}
.card-abrir{position:absolute;inset:15% 0 0;z-index:4;border:0;background:none;cursor:pointer;border-radius:var(--r-card)}
.card-abrir:focus-visible{outline:3px solid var(--am);outline-offset:2px}
/* botón +: agrega al carrito; con el objeto dentro pasa a check verde */
.card-add{position:absolute;right:12px;bottom:14px;z-index:5;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:21px;
  background:var(--am);color:#06156b;box-shadow:0 4px 0 rgba(5,22,138,.5);transition:transform .18s cubic-bezier(.34,1.56,.64,1),background-color .2s}
.card-add i{grid-area:1/1;transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .15s}
.card-add .ph-check{opacity:0;transform:scale(.3) rotate(-90deg)}
.card-add[aria-pressed=true]{background:var(--ok)}
.card-add[aria-pressed=true] .ph-plus{opacity:0;transform:scale(.3) rotate(90deg)}
.card-add[aria-pressed=true] .ph-check{opacity:1;transform:none}
.card-add:hover{transform:scale(1.1)}
.card-add:active{transform:scale(.9)}
.card.en-carro .card-fondo{box-shadow:0 6px 0 rgba(5,22,138,.35),inset 0 0 0 3px var(--ok)}
.card-mas{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:20px;text-decoration:none;color:#06156b;
  background:linear-gradient(transparent 15%,var(--am) 15%);clip-path:inset(15% 0 0 round var(--r-card))}
.card-mas:hover{--ty:-6px}
.card-mas .bb{font-size:40px}
.card-mas small{font-weight:700;font-size:14px}
.card-mas i{position:absolute;top:calc(15% + 18px);right:18px;font-size:32px;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.card-mas:hover i{transform:translateX(5px)}
.esqueleto{position:relative;aspect-ratio:.627}
.esqueleto::before{content:'';position:absolute;inset:15% 0 0;border-radius:var(--r-card);background:linear-gradient(100deg,rgba(5,22,138,.35) 40%,rgba(86,221,245,.25) 50%,rgba(5,22,138,.35) 60%) 0 0/300% 100%;animation:brillo 1.3s linear infinite}
@keyframes brillo{to{background-position:-150% 0}}
.carril{padding-top:10px}
/* entrada escalonada (solo opacidad + translate, así no pisa la inclinación 3D) */
@media (prefers-reduced-motion:no-preference){
  .grid .card,.carril .card{animation:aparece .55s calc(var(--i,0) * 45ms) cubic-bezier(.16,1,.3,1) backwards}
}
@keyframes aparece{from{opacity:0;translate:0 22px}}

/* ---------- preguntas (skill faq-page: búsqueda + categorías + acordeón) ---------- */
.pag-faq .pag-cab{width:min(900px,100% - 2*var(--gut))}
.faq-herr{width:min(900px,100% - 2*var(--gut));margin:0 auto 26px;display:grid;gap:12px;position:sticky;top:68px;z-index:20;padding:12px 0;
  background:linear-gradient(rgba(10,99,216,.96),rgba(10,99,216,.88));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.faq-herr .buscar input{padding-right:14px}
.faq-cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.faq-n{font-size:14px;font-weight:700;color:var(--soft)}
.faq-n:empty{display:none}
.faq{width:min(900px,100% - 2*var(--gut));margin:0 auto 40px;display:grid;gap:30px}
.faq-grupo{width:auto;margin:0;padding:0;display:grid;gap:10px}
.faq-grupo[hidden],.faq details[hidden]{display:none}
.faq-grupo h2{font-size:clamp(28px,3vw,36px);margin-bottom:4px;color:var(--am)}
.faq details{background:var(--panel);border:2px solid var(--panel-borde);border-radius:14px;padding:0 20px;scroll-margin-top:200px;transition:border-color .2s}
.faq details[open]{border-color:var(--chip-borde)}
.faq summary{cursor:pointer;list-style:none;font-weight:800;font-size:18px;padding:18px 36px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font:400 34px 'Burbank',Impact;color:var(--am);padding-top:.2em}
.faq details[open] summary::after{content:'\2212'}
.faq details p{padding:0 0 18px;color:#e3f4ff;font-weight:500;max-width:65ch}
.faq details a{color:var(--am);font-weight:700}
@media (prefers-reduced-motion:no-preference){.faq details[open] p{animation:abre .25s ease}}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}}

/* ---------- contacto ---------- */
.canal{--wa:#25d366;--wa-osc:#075e54;position:relative;overflow:hidden;display:grid;gap:28px;align-items:center;margin-bottom:28px;padding:clamp(26px,5vw,52px);border-radius:var(--r-panel);
  background:radial-gradient(120% 140% at 100% 0%,#1fbf5c 0%,#0b8a52 45%,#075e54 100%);border:4px solid #3be37f;box-shadow:0 18px 40px rgba(3,40,30,.35)}
.canal::before{content:"";position:absolute;inset:auto -60px -90px auto;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
@media (min-width:860px){.canal{grid-template-columns:1fr auto}}
.canal-eti{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:rgba(0,0,0,.22);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.canal-eti i{font-size:18px;color:#b9ffd2}
.canal .titulo{margin-bottom:16px;max-width:16ch}
.canal-lista{list-style:none;display:grid;gap:8px;margin-bottom:22px}
.canal-lista li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:#eafff2}
.canal-lista i{font-size:20px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(0,0,0,.2);color:#b9ffd2;flex:none}
.btn-wa{--bg:#fff;--fg:var(--wa-osc);box-shadow:0 5px 0 rgba(3,40,30,.45)}
.btn-wa i{color:var(--wa);font-size:22px}
.canal-nota{margin-top:12px;font-size:13px;font-weight:600;color:#c9f5da}
.canal-qr{display:grid;justify-items:center;gap:10px;margin:0}
.canal-qr img{width:240px;height:240px;border-radius:18px;box-shadow:0 0 0 6px rgba(255,255,255,.18),0 16px 30px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.canal-qr:hover img{transform:scale(1.03) rotate(-1deg)}
.canal-qr figcaption{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#eafff2}
/* en el celular el QR no sirve (no te escaneas a ti mismo): manda el botón */
@media (max-width:859px){.canal-qr{display:none}.canal .btn-wa{width:100%;justify-content:center}}
.pie-wa{display:inline-flex;align-items:center;gap:5px;color:#7dffb0!important}
.pie-wa i{font-size:17px}
.contacto{display:grid;gap:32px;align-items:center;margin-bottom:40px;padding:clamp(28px,5vw,56px);background:var(--panel);border:4px solid var(--chip-borde);border-radius:var(--r-panel)}
@media (min-width:860px){.contacto{grid-template-columns:1fr auto}}
.contacto .titulo{margin-bottom:14px}
.pagos{margin-top:28px;padding-top:22px;border-top:2px solid var(--chip-borde)}
.pagos-tit{display:flex;align-items:center;gap:8px;font:800 14px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);margin-bottom:14px}
.pagos-tit i{font-size:20px}
.pagos-grupos{display:flex;flex-wrap:wrap;gap:16px 28px}
.pagos-g small{display:block;font-size:13px;font-weight:700;color:var(--soft);margin-bottom:8px}
.pagos-g ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
/* logos sobre placa blanca (los colores de marca no se leen sobre el azul de la web) */
.pagos-g li{display:grid;place-items:center;height:48px;padding:0 14px;background:#fff;border-radius:12px;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.pagos-g img{display:block;height:auto;width:auto;max-height:26px;max-width:110px}
.pagos-g li.yape{padding:0 8px;background:#9117a0}
.pagos-g li.yape img{max-height:48px}
.pagos-g li.plin{padding:0;background:none}
.pagos-g li.plin img{max-height:48px;max-width:none;border-radius:12px}
.pagos-nota{display:block;margin-top:14px;font-size:14px;line-height:1.5;color:var(--soft);max-width:60ch}
.contacto-txt>p{font-size:18px;font-weight:600;color:#eaf6ff;max-width:46ch;margin-bottom:26px}
.redes{display:flex;flex-wrap:wrap;gap:16px}
.red{display:flex;align-items:center;gap:14px;text-decoration:none;padding:14px 22px 14px 18px;transform:skew(-6deg);transition:transform .15s,filter .15s;box-shadow:0 5px 0 rgba(5,22,138,.45)}
.red>*{transform:skew(6deg)}
.red i{font-size:34px}
.red span{display:flex;flex-direction:column;font-weight:600;font-size:14px;line-height:1.25}
.red b{font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.red-ig{background:var(--am);color:#06156b}
.red-fb{background:#0062c4;color:#fff;box-shadow:inset 0 0 0 2px var(--chip-borde),0 5px 0 rgba(5,22,138,.45)}
.red:hover{transform:skew(-6deg) translateY(-2px);filter:brightness(1.06)}
.qr-fb{display:grid;justify-items:center;gap:10px;margin:0;justify-self:center}
.qr{width:220px;height:220px;border-radius:18px;background:#fff;box-shadow:0 0 0 6px var(--chip-borde),0 16px 30px rgba(3,14,70,.35);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.qr-fb:hover .qr{transform:scale(1.03) rotate(1deg)}
.qr-fb figcaption{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--soft)}

/* ---------- pie ---------- */
.pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:26px var(--gut) 34px;background:rgba(5,22,138,.6);border-top:5px solid var(--am)}
.pie-marca{display:flex;align-items:center;gap:10px}
.pie-marca .bb{font-size:40px}
.pie-marca small{font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.pie p{font-size:13px;color:#e4f1ff;max-width:60ch}
.pie-links{display:flex;flex-wrap:wrap;gap:10px 20px;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.pie-links a{text-decoration:none;opacity:.85}
.pie-links a:hover{opacity:1;color:var(--am)}

/* ---------- diálogos (hoja del producto y carrito) ---------- */
dialog{color:#fff}
dialog::backdrop{background:rgba(3,14,70,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hoja{margin:auto;width:min(900px,100% - 24px);border:0;border-radius:var(--r-panel);padding:0;background:none;overflow:visible}
.hoja-in{position:relative;display:grid;grid-template-rows:clamp(210px,36dvh,330px) minmax(0,1fr);height:min(92dvh,760px);overflow:hidden;
  border:4px solid var(--chip-borde);border-radius:var(--r-panel);background:linear-gradient(#0a63d8,#0846b4);box-shadow:0 30px 80px rgba(3,14,70,.55)}
@media (min-width:760px){.hoja-in{grid-template-columns:1.05fr 1fr;grid-template-rows:minmax(0,1fr);height:min(86dvh,600px)}}
.hoja-cerrar{position:absolute;top:12px;right:12px;z-index:3}
.hoja-cerrar button,.c-cerrar{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:rgba(5,22,138,.7);color:#fff;font-size:18px;display:grid;place-items:center;transition:transform .15s,background-color .15s}
.hoja-cerrar button:hover,.c-cerrar:hover{background:rgba(5,22,138,.95);transform:rotate(90deg)}
.hoja-art{position:relative;min-height:0;overflow:hidden;
  background:radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--c1) 50%,#fff),transparent 60%),linear-gradient(165deg,var(--c1),var(--c3))}
.hoja-art::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(120deg,rgba(255,255,255,.07) 0 9px,transparent 9px 22px);-webkit-mask-image:linear-gradient(#000,transparent 60%);mask-image:linear-gradient(#000,transparent 60%)}
.hoja-art img{position:absolute;max-width:none;opacity:0;transition:opacity .35s ease}
.hoja-art img.ok.on{opacity:1}
/* difuminado abajo: si el render corta las piernas, se funden con el color de la tarjeta */
.hoja-art::after{content:'';position:absolute;left:0;right:0;bottom:0;height:24%;z-index:2;pointer-events:none;background:linear-gradient(transparent,color-mix(in srgb,var(--c3) 92%,transparent))}
.hoja-estilos{margin:-4px 0 18px}
.hoja-estilos:empty{display:none}
.hoja-estilos>b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--hi);margin-bottom:8px}
.hoja-estilos>div{display:flex;flex-wrap:wrap;gap:8px}
.est-mini{width:60px;height:60px;padding:0;border-radius:12px;border:2px solid rgba(0,195,254,.35);cursor:pointer;overflow:hidden;
  background:linear-gradient(165deg,var(--c1,#2a7be0),var(--c3,#0c2f8a));transition:transform .15s,border-color .2s}
.est-mini img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.est-mini:hover{transform:translateY(-2px)}
.est-mini.on{border-color:var(--am);box-shadow:0 0 0 2px var(--am)}
.hoja-art img.plana{border-radius:14px;box-shadow:0 14px 30px rgba(3,14,70,.4)}
.hoja-info{display:flex;flex-direction:column;min-height:0}
.hoja-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:26px 24px 16px;scrollbar-width:thin;scrollbar-color:var(--chip-borde) transparent}
.hoja-tipo{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);padding-right:48px}
.hoja h3{font-size:clamp(34px,4.6vw,48px);margin:4px 0 8px;padding-right:20px}
.hoja-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:18px;font-weight:700;color:#d7ecff}
.hoja-precio b.pr{font-size:48px;color:#fff}
.hoja-precio s.pr{font-size:22px;opacity:.75}
.hoja-precio s.pr:empty{display:none}
.hoja-incluye{margin-bottom:16px}
.hoja-incluye:empty{display:none}
.hoja-incluye>b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--hi);margin-bottom:8px}
.hoja-incluye ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:8px}
.hoja-incluye li{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:12px;background:rgba(5,22,138,.45);box-shadow:inset 0 0 0 1px rgba(0,195,254,.25);font-weight:700;font-size:13.5px;line-height:1.2;min-width:0}
.hoja-incluye li>span:last-child{min-width:0;display:grid}
.hoja-incluye small{color:var(--soft);font-weight:600;font-size:12px}
.inc-img{flex:none;width:46px;height:46px;border-radius:9px;overflow:hidden;background:linear-gradient(165deg,var(--c1,#2a7be0),var(--c3,#0c2f8a))}
.inc-img img{width:100%;height:100%;object-fit:contain}
.hoja .ayuda{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;margin-top:4px}
.hoja .ayuda i{font-size:18px;color:var(--am);flex:none}
.hoja-btns{flex:none;display:grid;gap:10px;padding:14px 24px 20px;border-top:1px solid rgba(0,195,254,.3);background:rgba(5,22,138,.35)}
@media (max-width:759px){.hoja-btns{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);padding:12px 12px calc(14px + env(safe-area-inset-bottom))}.hoja-btns .btn{min-height:48px;padding:0 10px;font-size:13px;letter-spacing:.02em}.hoja-btns .btn i{font-size:17px}.hoja-scroll{padding:18px 16px 12px}}

.carrito{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(460px,100%);max-width:100%;border:0;padding:0;background:none;overflow:visible}
.carrito-in{display:flex;flex-direction:column;height:100%;overflow:auto;overscroll-behavior:contain;background:linear-gradient(#0a63d8,#0742ab);border-left:4px solid var(--chip-borde);box-shadow:-20px 0 60px rgba(3,14,70,.4)}
.c-cab{position:sticky;top:0;z-index:2;background:#0a5fd4;display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid rgba(0,195,254,.3)}
.c-cab h2{font-size:38px}
.c-cuenta{margin-right:auto;font-weight:800;font-size:13px;padding:4px 10px;border-radius:99px;background:rgba(5,22,138,.6);color:var(--soft)}
.c-cuenta:empty{visibility:hidden}
.c-lista{list-style:none;flex:none;padding:14px 18px;display:grid;align-content:start;gap:10px}
.c-it{display:grid;grid-template-columns:62px 1fr auto auto;align-items:center;gap:12px;padding:8px;border-radius:14px;background:rgba(5,22,138,.45);box-shadow:inset 0 0 0 1px rgba(0,195,254,.3)}
.c-img{width:62px;height:62px;border-radius:10px;overflow:hidden;background:linear-gradient(165deg,var(--c1),var(--c3))}
.c-img img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.c-info{min-width:0;display:grid}
.c-info b{font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-info small{font-size:12.5px;color:var(--soft);font-weight:600}
.c-it .pr{font-size:22px}
.c-quitar{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:18px;color:#ffd2e3;background:rgba(199,0,97,.25);transition:background-color .15s,transform .15s}
.c-quitar:hover{background:rgba(199,0,97,.55)}
.c-quitar:active{transform:scale(.9)}
.c-it.sale{transition:opacity .18s ease-in,transform .18s ease-in;opacity:0;transform:translateX(30px)}
.c-vacio{display:grid;justify-items:center;gap:10px;text-align:center;padding:40px 10px;color:#d7ecff;font-weight:600}
.c-vacio>i{font-size:56px;color:var(--am)}
.c-vacio .bb{font-size:34px;color:#fff}
.c-vacio .btn{margin-top:8px}
.c-form{display:flex;flex-direction:column;flex:1}
/* pie fijo abajo: total + botones siempre a mano (fitts-law) */
.c-pie{position:sticky;bottom:0;z-index:2;margin-top:auto;padding:14px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid rgba(0,195,254,.3);background:#0846b4;box-shadow:0 -14px 30px rgba(3,14,70,.35);display:grid;gap:10px}
/* ruta del pedido */
.c-ruta{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 18px 0;counter-reset:r}
.c-ruta li{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:10px;font-size:13px;font-weight:800;color:var(--soft);background:rgba(5,22,138,.45);transition:background-color .25s,color .25s}
.c-ruta li i{font-size:16px}
.c-ruta li.on{background:var(--am);color:#06156b}
.c-ruta li[aria-current]{box-shadow:0 0 0 3px rgba(253,255,0,.3)}
.c-ruta li.on:not([aria-current]){background:rgba(253,255,0,.16);color:var(--am)}
/* vista previa del mensaje: burbuja de chat */
.c-msg{width:auto;margin:0 18px 16px;padding:12px;border-radius:16px;background:rgba(3,14,70,.4);box-shadow:inset 0 0 0 1px rgba(0,195,254,.25)}
.carrito.vacio .c-msg{display:none}
.c-msg-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.c-msg-cab h3{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--soft)}
.c-msg-cab h3 i{font-size:18px}
.c-copiar{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:99px;cursor:pointer;font:800 13px 'Inter',sans-serif;color:#fff;background:rgba(0,195,254,.22);transition:background-color .15s,transform .15s}
.c-copiar:hover{background:rgba(0,195,254,.4)}
.c-copiar:active{transform:scale(.95)}
.c-burbuja{position:relative;white-space:pre-wrap;word-break:break-word;font:600 13.5px/1.55 'Inter',sans-serif;color:#0b1b4d;background:#e7f6ff;border-radius:16px 16px 4px 16px;padding:12px 14px;max-height:220px;overflow:auto;margin-left:18px}
.c-msg-ayuda{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--soft)}
.c-pagos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 6px;font-size:13px;font-weight:600;color:var(--soft);text-align:center}
.c-pagos i{font-size:16px}
.carrito.vacio .c-pie{display:none}
.c-total{display:flex;align-items:baseline;gap:10px}
.c-total span{font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--soft)}
.c-total .pr{font-size:38px}
.c-total small{font-weight:700;color:#d7ecff;margin-right:auto}
input.falta{border-color:var(--rosa);animation:tiembla .35s}
@keyframes tiembla{25%{translate:-6px 0}50%{translate:5px 0}75%{translate:-3px 0}}
.c-btns{display:grid;gap:10px;margin-top:6px}

/* entradas de diálogos (emilkowalski-motion: entra con ease-out, rápido) */
@media (prefers-reduced-motion:no-preference){
  .hoja[open] .hoja-in{animation:pop .32s cubic-bezier(.16,1,.3,1)}
  .carrito[open] .carrito-in{animation:panel .38s cubic-bezier(.16,1,.3,1)}
  dialog[open]::backdrop{animation:velo .3s ease}
  .c-it{animation:aparece .3s cubic-bezier(.16,1,.3,1) backwards}
}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes panel{from{transform:translateX(100%)}}
@keyframes velo{from{opacity:0}}

/* ---------- avisos y vuelo al carrito ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:150;display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;border-radius:14px;background:#06156b;border:2px solid var(--am);font-weight:600;
  box-shadow:0 14px 40px rgba(3,14,70,.45);max-width:calc(100% - 32px);transform:translate(-50%,160%);visibility:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility .35s}
.toast.ver{transform:translate(-50%,0);visibility:visible}
.toast b{color:var(--am)}
.toast button{flex:none;border:0;cursor:pointer;background:var(--am);color:#06156b;font:800 13px 'Inter',sans-serif;text-transform:uppercase;padding:9px 12px;border-radius:8px}
.vuelo{position:fixed;z-index:200;object-fit:contain;pointer-events:none;border-radius:12px;filter:drop-shadow(0 10px 20px rgba(3,14,70,.4))}

/* ---------- 404 ---------- */
.error404{min-height:60dvh;display:grid;place-content:center;justify-items:center;text-align:center;gap:14px}
.e-num{font-size:clamp(120px,22vw,220px);color:var(--am);text-shadow:0 8px 0 rgba(5,22,138,.4)}
.error404 h1{font-size:clamp(36px,5vw,60px)}
.error404 p{font-weight:600;color:#eaf6ff}

/* ---------- movimiento de página (scroll, hero) ---------- */
@media (prefers-reduced-motion:no-preference){
  .rev{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
  .rev.dentro{opacity:1;transform:none}
  .rev .paso{opacity:0;translate:0 24px;transition:opacity .6s ease,translate .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 90ms + 150ms)}
  .rev.dentro .paso{opacity:1;translate:0 0}
  .h-l{animation:linea .8s calc(var(--i) * 120ms + 80ms) cubic-bezier(.16,1,.3,1) backwards}
  .eyebrow,.hero-sub,.hero-ctas{animation:aparece .7s cubic-bezier(.16,1,.3,1) backwards}
  .eyebrow{animation-delay:0ms}.hero-sub{animation-delay:320ms}.hero-ctas{animation-delay:420ms}
  .pj-a .pj-art{animation:sube .9s .15s cubic-bezier(.16,1,.3,1) backwards}
  .pj-b .pj-art{animation:sube .9s .3s cubic-bezier(.16,1,.3,1) backwards}
  .hero-halo{animation:velo 1.2s .2s ease backwards}
  .precio-barra{animation:entra .7s .5s cubic-bezier(.34,1.56,.64,1) backwards}
  .pag-cab h1{animation:linea .7s cubic-bezier(.16,1,.3,1) backwards}
  .pag-cab p,.pag-cab .reloj{animation:aparece .6s .15s cubic-bezier(.16,1,.3,1) backwards}
}
@keyframes linea{from{opacity:0;transform:translateY(40%) skewY(4deg)}}
@keyframes sube{from{translate:0 20%;opacity:0}}
@keyframes entra{from{transform:translateX(-50%) scale(.8);opacity:0}}

/* ---------- transiciones entre páginas (page-transition-animation: View Transitions entre documentos) ---------- */
@view-transition{navigation:auto}
.nav{view-transition-name:nav}
.tabbar{view-transition-name:tabbar}
::view-transition-old(root){animation:vt-sale .16s ease-in both}
::view-transition-new(root){animation:vt-entra .34s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-sale{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(14px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .esqueleto{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
.error404 .e-num{color:var(--am)}

/* tarjetas angostas (franja del inicio, celular): placa de descuento corta y sin la línea de pavos */
.chapa .corto{display:none}
@container (max-width:270px){.chapa .largo{display:none}.chapa .corto{display:inline}.n-est{display:none}.card .pr{font-size:23px}.card-txt{padding:10px 52px 12px 12px}.card-add{width:38px;height:38px;font-size:18px;right:10px;bottom:12px}}
section.hoy{padding-top:clamp(28px,4vw,48px)}

/* ---------- estilos que rotan (Plantilla Prime §6b: fundido + destello + luz diagonal) ---------- */
/* cambio de estilo (emilkowalski-motion / micro-interaction): fundido cruzado EN EL MISMO SITIO, sin escala ni movimiento */
.card-art img.sale,.hoja-art img.sale,.pj-art img.sale{transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.card-art img.entra,.hoja-art img.entra,.pj-art img.entra{animation:est-entra .8s cubic-bezier(.4,0,.2,1)}
@keyframes est-entra{from{opacity:0;filter:brightness(1.25) saturate(1.1)}}
.barrido{position:absolute;top:-30%;bottom:-30%;left:0;width:45%;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.1) 70%,transparent);transform:translateX(-160%) skewX(-18deg)}
.barrido.barre{animation:barre .85s ease-in-out}
@keyframes barre{0%{opacity:1;transform:translateX(-160%) skewX(-18deg)}100%{opacity:1;transform:translateX(330%) skewX(-18deg)}}
.hero-vis>.barrido{display:none}
/* puntos: cuántos estilos tiene y cuál se ve */
.est-puntos{position:absolute;top:10px;right:12px;z-index:3;display:flex;gap:4px;padding:4px 6px;border-radius:999px;background:rgba(6,21,107,.45)}
.est-puntos i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.5);transition:width .3s cubic-bezier(.16,1,.3,1),background-color .3s}
.est-puntos i.on{width:14px;background:#fff}
@media (prefers-reduced-motion:reduce){.barrido{display:none}}

/* ---------- carrito: cliente / nuevo (skills form-design + ux-writing) ---------- */
#cForm{display:flex;flex-direction:column;flex:1}
.c-nota-info{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600;padding:8px 10px;border-radius:10px;background:rgba(5,22,138,.45);color:#d7ecff}
.c-nota-info i{font-size:17px;color:var(--hi);flex:none}
.c-nota-info.c-hoy i,.c-nota-info.c-hoy{color:var(--ok)}
.c-it em{font-style:normal;color:var(--ok);font-weight:800}
.c-listo{display:grid;justify-items:center;text-align:center;gap:12px;padding:34px 22px 28px}
.c-listo-ico i{font-size:76px;color:var(--ok);display:block}
.c-listo h3{font-size:44px}
.c-listo>p{font-weight:600;color:#eaf6ff}
.c-listo>p b{color:#fff}
.c-listo-pasos{list-style:none;counter-reset:paso;display:grid;gap:8px;width:100%;text-align:left;margin:4px 0}
.c-listo-pasos li{counter-increment:paso;display:flex;gap:10px;align-items:center;line-height:1.4;padding:10px 12px;border-radius:12px;background:rgba(5,22,138,.45);font-weight:600;font-size:14px}
.c-listo-pasos li::before{content:counter(paso);width:24px;height:24px;border-radius:50%;background:var(--am);color:#06156b;display:grid;place-items:center;font-weight:900;font-size:13px;flex:none}
.c-listo .c-btns{width:100%}
@media (prefers-reduced-motion:no-preference){
  .c-listo:not([hidden]) .c-listo-ico{animation:entra-check .55s cubic-bezier(.34,1.56,.64,1)}
  .c-listo:not([hidden]) .c-listo-pasos li{animation:aparece .45s cubic-bezier(.16,1,.3,1) backwards}
  .c-listo-pasos li:nth-child(2){animation-delay:.08s!important}.c-listo-pasos li:nth-child(3){animation-delay:.16s!important}
  #cCampos:not([hidden]){animation:aparece .3s cubic-bezier(.16,1,.3,1)}
}
@keyframes entra-check{from{transform:scale(.3) rotate(-30deg);opacity:0}}

/* enlace Especiales: destacado sutil en el menú */
.nav-links .nav-esp{color:var(--am)}
.tabbar a,.tabbar button{font-size:10px;letter-spacing:-.01em}
.tabbar i{font-size:22px!important}
/* auditoría: con 6 botones, ningún botón de la barra inferior puede empujar el ancho de la página */
.tabbar>*{min-width:0;overflow:hidden}
main{overflow-x:clip}   /* auditoría: lo que asoma de las tarjetas nunca ensancha la página (clip no rompe sticky) */

/* ===== Plantilla Prime en las tarjetas de la web (Regalos/seccion/PLANTILLA_PRIME.md §1, §3, §4) ===== */
/* §3 colores: degradado SUAVE color1 → color3 (sin luz ni franjas); serie = textura oficial; Íconos = color1 → color3 → color2 */
.card-fondo{background:linear-gradient(var(--c1),var(--c3))}
.card-fondo::before{display:none}
.card.serie .card-fondo{background:var(--tex) center/cover}
.card.web3 .card-fondo{background:linear-gradient(var(--c1),var(--c3),var(--c2,var(--c3)))}
/* §3 solo la imagen se difumina, suave: opaca hasta 72 % del tile, transparente al 95 % */
.card-art{-webkit-mask-image:linear-gradient(#000 0,#000 72%,transparent 95%);mask-image:linear-gradient(#000 0,#000 72%,transparent 95%)}
/* tarjeta ancha: se difumina SOLO la zona del precio (izquierda, 24 % → 36 % del ancho); a la derecha se ve completa */
.card[data-cols]:not([data-cols="1"]) .card-art{
  -webkit-mask-image:linear-gradient(#000 0,#000 72%,transparent 95%),linear-gradient(90deg,transparent 0,transparent 24%,#000 36%);
  mask-image:linear-gradient(#000 0,#000 72%,transparent 95%),linear-gradient(90deg,transparent 0,transparent 24%,#000 36%)}
/* ===== auditoría 2026-10-21 (critique-composition, -typography, -affordance, -information-density, layout-grid) ===== */
/* layout-grid: en celular/tablet las filas de 4 de la web no caben; las tarjetas fluyen en una sola grilla densa
   (antes cada fila dejaba huecos: una tarjeta sola al lado de una doble) */
@media (max-width:999px){
  .filas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense}
  .fila{display:contents}
}
@media (min-width:700px) and (max-width:999px){.filas{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* typography: la etiqueta de tipo nunca se parte en 2 líneas ni choca con el precio */
.card-tipo{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* composition: menos aire muerto entre "Así de fácil" y "Hoy en la tienda" */
section.como{padding-bottom:clamp(24px,3vw,40px)}
/* information-density: el QR solo sirve en escritorio (en el celular no te escaneas a ti mismo) */
@media (max-width:859px){.contacto .qr-fb{display:none}}
/* affordance: en celular los 2 CTA del hero miden lo mismo y ocupan el ancho */
@media (max-width:600px){.hero-ctas{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hero-ctas .btn{padding:0 12px;font-size:14px}.hero-ctas .btn i{display:none}}
.btn-ico{padding:0;min-width:52px}

.card .barrido,.hoja-art .barrido{display:none}   /* sin destello diagonal: el cambio es solo un fundido */

/* ===== PLANTILLA PRIME en la web (2026-10-21; skills critique-composition, critique-visual-hierarchy, layout-grid) =====
   Módulo u = ancho de 1 columna. Prime (1920 px): u = 405, separación 20 (4,94 % de u), radio 20 (4,9 %), precio 66 (16,3 %),
   placas 22 (5,4 %), margen interno 24 / 30 (5,9 % / 7,4 %). Todo se escala con u, así se ve igual en cualquier ancho. */
/* 1) separación = 4,94 % del módulo. La grilla mide W = n·u + (n−1)·g → g = W·0,0494/(n + (n−1)·0,0494) */
.sec,:has(> .grid:not(.fila)){container-type:inline-size}
.filas,.grid{--g:max(8px,2.41cqi)}
@media (min-width:700px){.filas,.grid{--g:max(8px,1.59cqi)}}
@media (min-width:1000px){.filas,.grid{--g:max(10px,1.19cqi)}}
.filas{display:grid}
.grid,.filas{gap:var(--g)}
/* 2) la imagen SOLO asoma en la primera fila de cada grilla (data-abajo lo pone encuadre.js según la posición real,
   en celular, tablet y escritorio); abajo el tile = la tarjeta y la separación real es g, igual que entre columnas */
.card[data-cols="2"]{aspect-ratio:1.285}
@media (min-width:700px){.card[data-cols="3"],.card[data-cols="4"]{aspect-ratio:1.943}}
@media (min-width:1000px){.card[data-cols="3"]{aspect-ratio:1.943}.card[data-cols="4"]{aspect-ratio:2.601}}
@media (max-width:699px){.card[data-cols="3"],.card[data-cols="4"]{aspect-ratio:1.285}}
.card[data-abajo]{aspect-ratio:.738}
.card[data-abajo][data-cols="2"]{aspect-ratio:1.511}
@media (min-width:700px){.card[data-abajo][data-cols="3"],.card[data-abajo][data-cols="4"]{aspect-ratio:2.286}}
@media (min-width:1000px){.card[data-abajo][data-cols="3"]{aspect-ratio:2.286}.card[data-abajo][data-cols="4"]{aspect-ratio:3.06}}
@media (max-width:699px){.card[data-abajo][data-cols="3"],.card[data-abajo][data-cols="4"]{aspect-ratio:1.511}}
.card[data-abajo] .card-fondo,.card[data-abajo] .card-abrir{inset:0}
.card[data-abajo] .card-art{clip-path:inset(0 round var(--r-card))}
/* 3) medidas internas en unidades del módulo: cqi = ancho de la tarjeta; --k la lleva a 1 columna */
.card{--k:1}
.card[data-cols="2"]{--k:.488}
.card[data-cols="3"]{--k:.3227}
.card[data-cols="4"]{--k:.241}
@media (max-width:699px){.card[data-cols="3"],.card[data-cols="4"]{--k:.488}}
@media (min-width:700px) and (max-width:999px){.card[data-cols="4"]{--k:.3227}}
.card>*{--r-card:max(10px,calc(4.9cqi * var(--k)))}
.card-txt{padding:0 calc(22cqi * var(--k)) calc(7.4cqi * var(--k)) calc(5.9cqi * var(--k))}
.card[data-cols]:not([data-cols="1"]) .card-txt{padding-right:calc(5.9cqi * var(--k))}
/* criterio propio: Prime usa 16,3 % pero no tiene botón +; al 14 % "S/22.50" y el + conviven sin chocar */
.card .pr{font-size:max(20px,calc(14cqi * var(--k)));gap:2px calc(3cqi * var(--k))}
.card .pr s{font-size:.5em}
.chapa{font-size:max(9.5px,calc(4.6cqi * var(--k)));padding:.42em .6em .34em;border-radius:max(5px,calc(2cqi * var(--k)))}
.card-tipo{font-size:max(9.5px,calc(4.4cqi * var(--k)));margin-bottom:calc(1cqi * var(--k))}
.card-add{width:clamp(34px,calc(15cqi * var(--k)),48px);height:clamp(34px,calc(15cqi * var(--k)),48px);right:calc(5.9cqi * var(--k));bottom:calc(7.4cqi * var(--k));font-size:clamp(16px,calc(7cqi * var(--k)),22px)}
/* Prime: "S/6 DE DESCUENTO" completo siempre que entre (antes se acortaba a "-S/6" bajo 270 px) */
@container (min-width:190px){.chapa .largo{display:inline}.chapa .corto{display:none}}
@container (max-width:189px){.chapa .largo{display:none}.chapa .corto{display:inline}}
/* 4) Prime §2: cada sección de la tienda es un "lienzo" con su fondo (radial del color de la sección → negro, trama de
   puntos arriba a la izquierda que se desvanece, diagonal suave). Los márgenes internos siguen la proporción del post. */
.sec.lz{position:relative;isolation:isolate;padding:clamp(16px,2.4vw,34px) clamp(10px,1.8vw,28px) clamp(14px,2.2vw,30px);border-radius:clamp(16px,1.8vw,26px);
  box-shadow:0 0 0 3px rgba(0,195,254,.18),0 18px 40px rgba(3,14,70,.35)}
.sec.lz{margin:0 0 clamp(16px,2vw,28px)}
.sec.lz::before,.sec.lz::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.sec.lz::before{background:radial-gradient(ellipse 90% 70% at 70% 75%,color-mix(in srgb,var(--f,#1b3fa0) 90%,#000) 0,color-mix(in srgb,var(--f,#1b3fa0) 55%,#000) 45%,color-mix(in srgb,var(--f,#1b3fa0) 20%,#000) 85%)}
.sec.lz::after{background:radial-gradient(rgba(0,0,0,.45) 1.3px,transparent 1.8px) 0 0/8px 8px,linear-gradient(115deg,transparent 40%,rgba(0,0,0,.22) 40.2%,transparent 75%);
  -webkit-mask:linear-gradient(160deg,#000 0,rgba(0,0,0,.6) 18%,transparent 40%);mask:linear-gradient(160deg,#000 0,rgba(0,0,0,.6) 18%,transparent 40%)}
.sec.lz-morado::before{background:radial-gradient(ellipse 80% 70% at 80% 70%,#7b2fc9 0,#5a1f9e 40%,#30105f 80%,#220a45 100%)}
.sec.lz-pesadillas::before{background:linear-gradient(rgba(8,4,20,.35),rgba(8,4,20,.6) 40%,rgba(8,4,20,.92) 100%),url(/img/fondo_pesadillas.webp) center top/100% auto no-repeat,#0e0a1d}
.sec.lz .sec-cab{position:relative}
.sec.lz .sec-cab span{color:rgba(255,255,255,.78)}
.c-noabre{width:100%;padding:10px 12px;border-radius:12px;background:rgba(3,14,70,.4);font-size:13.5px;font-weight:600;line-height:1.45;color:#d7ecff;text-align:left}
.c-noabre b{color:#fff}