/* ===== bloque 1, sacado de index.html ===== */
/* =========================================================================
KOKOM STORE
Principios: fondo negro, tipografía grande y precisa, mucho aire,
un solo acento (violeta de la marca) y color solo en los iconos.
Sin frameworks. CSS propio.
========================================================================= */
:root{
--black:#000000;
--ink:#08080A;
--surface:#121214;
--surface-2:#18181C;
--line:rgba(255,255,255,.08);
--line-2:rgba(255,255,255,.14);
--text:#F5F5F7;
--muted:#A1A1A6;
--muted-2:#8A8A90;
--violet:#9B8ADB;
--violet-2:#B6A9EE;
--ok:#30D158;
--warn:#FFD60A;
--danger:#FF453A;
--r:18px;
--r-sm:12px;
--max:1100px;
--display:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
--body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--black);color:var(--text);
font-family:var(--body);font-size:16px;line-height:1.55;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
-webkit-tap-highlight-color:transparent;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--violet);color:#000}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ---------- tipografía ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.03em;line-height:1.04}
h1{font-size:clamp(2.7rem,6.2vw,4.5rem);letter-spacing:-.045em}
h2{font-size:clamp(1.9rem,3.6vw,2.85rem)}
h3{font-size:1.06rem;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
.lead{color:var(--muted);font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.5;max-width:52ch}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-2)}
.accent{color:var(--violet-2)}
/* ---------- secciones ---------- */
.section{padding:clamp(52px,7vw,104px) 0;scroll-margin-top:76px}
.section--tight{padding-top:clamp(40px,5vw,64px)}
.section__head{max-width:660px;margin:0 auto clamp(24px,3.4vw,44px);text-align:center}
.section__head h2{margin-top:12px}
.section__head p{color:var(--muted);margin-top:14px;font-size:16.5px}
.hairline{height:1px;background:var(--line);max-width:var(--max);margin:0 auto}
/* ---------- botones ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:48px;padding:0 26px;border-radius:980px;
font-size:15px;font-weight:600;letter-spacing:-.01em;
transition:background .2s var(--ease),transform .12s var(--ease),box-shadow .2s;
white-space:nowrap;border:1px solid transparent;
}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--text);color:#000}
.btn-primary:hover{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.09)}
.btn-gray{background:rgba(255,255,255,.1);color:var(--text)}
.btn-gray:hover{background:rgba(255,255,255,.16)}
.btn-ghost{border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-block{width:100%}
.btn-sm{min-height:44px;padding:0 18px;font-size:13.5px}
.btn[disabled]{opacity:.4;pointer-events:none}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* ---------- barra superior ---------- */
.topbar{background:var(--ink);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted-2)}
.trustbar{background:linear-gradient(100deg,rgba(37,211,102,.18),rgba(37,211,102,.06));
border-bottom:1px solid rgba(37,211,102,.30)}
.trustbar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;
padding:9px 0;flex-wrap:wrap;min-height:44px}
.trustbar__t{font-size:12.5px;color:#CDEFDB;font-weight:600;line-height:1.35;text-align:center}
.trustbar__t b{color:#fff;font-weight:800}
.trustbar__btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
background:linear-gradient(100deg,#1FA855,#25D366);color:#06220F;
font-size:12px;font-weight:900;letter-spacing:.04em;padding:9px 15px;border-radius:100px;
box-shadow:0 8px 20px rgba(37,211,102,.30);white-space:nowrap}
.trustbar__btn:active{transform:scale(.98)}
@media (max-width:560px){
.trustbar__t{font-size:11.5px}
.trustbar .wrap{gap:8px;padding:8px 0}
.trustbar__btn{width:100%;justify-content:center}
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;padding-top:4px;padding-bottom:4px}
.status{display:inline-flex;align-items:center;gap:7px;font-weight:500;color:var(--muted)}
.status__dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.status[data-state="closed"] .status__dot{background:var(--danger)}
.status[data-state="online"] .status__dot{background:var(--warn)}
.topbar__right{display:inline-flex;align-items:center;gap:18px}
.topbar__right span{display:inline-flex;align-items:center;gap:6px}
.topbar__right svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
/* En el telefono la barra de arriba partia el texton en dos lineas y
se leia a 12px. Se sube a 12.5, se centra y se deja solo lo
imprescindible para que quepa en una linea. */
@media (max-width:620px){
.topbar{font-size:12.5px}
.topbar .wrap{gap:10px;min-height:40px;justify-content:center}
.topbar__right{gap:10px}
.status{gap:6px}
.status__txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* el horario se repite: ya va en el estado de la izquierda, y en
390px obligaba a partir el texto en dos lineas */
.topbar__right span:last-child{display:none}
}
/* ---------- header ---------- */
.site-header{
position:sticky;top:0;z-index:60;
background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.site-header.is-scrolled{border-bottom-color:var(--line);background:rgba(0,0,0,.86)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand img{height:52px;width:auto}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto;margin-right:auto}
.nav a{font-size:13.5px;color:var(--muted);font-weight:500;transition:color .2s}
.nav a:hover{color:var(--text)}
.cart-btn{
display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
border-radius:980px;background:rgba(255,255,255,.1);font-size:13px;font-weight:600;
transition:background .2s;
}
.cart-btn:hover{background:rgba(255,255,255,.16)}
.cart-btn .icon{width:16px;height:16px}
.cart-btn__count{
min-width:19px;height:19px;padding:0 5px;border-radius:999px;
background:var(--violet);color:#000;font-size:11px;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;
transition:transform .2s var(--ease);
}
.cart-btn__count[hidden]{display:none}
.cart-btn__count.is-bump{transform:scale(1.28)}
/* ---------- hero ---------- */
.hero{padding:clamp(22px,3.2vw,56px) 0 0;text-align:center;position:relative;overflow:hidden}
.hero::before{
content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);
width:900px;height:620px;pointer-events:none;
background:radial-gradient(ellipse at center,rgba(155,138,219,.16),transparent 66%);
}
.hero__inner{position:relative;z-index:2;max-width:820px}
.hero h1{margin:16px 0 18px}
.hero .lead{margin:0 auto;max-width:44ch}
.hero__cta{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero__note{margin-top:26px;font-size:12.5px;color:var(--muted-2)}
.hero__note span{white-space:nowrap}
.hero__note i{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--line-2);vertical-align:middle;margin:0 10px}
/* destacado */
.featured{
position:relative;z-index:2;margin:clamp(24px,3vw,36px) auto 0;max-width:760px;
display:flex;align-items:center;gap:18px;text-align:left;
padding:16px 18px;border-radius:22px;
background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
border:1px solid var(--line);
box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
.featured__icon{width:60px;height:60px;flex:none;border-radius:16px;overflow:hidden;box-shadow:0 6px 18px -6px rgba(0,0,0,.8);background:var(--surface-2)}
.featured__icon img{width:100%;height:100%;object-fit:cover;display:block}
.featured__info{flex:1;min-width:0}
.featured__kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-2);font-weight:600}
.featured__name{display:block;font-family:var(--display);font-size:1.08rem;font-weight:600;letter-spacing:-.02em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.featured__meta{display:block;font-size:12px;color:var(--muted-2);margin-top:1px}
.featured__price{font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.featured__price small{font-size:.66em;color:var(--muted-2);font-weight:500;margin-right:3px}
.featured .btn{flex:none}
/* ---------- catálogo ---------- */
.rail{
display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;
padding:2px 2px 20px;
}
.game{
display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;
padding:0;border-radius:16px;transition:transform .2s var(--ease);
}
.game:hover{transform:translateY(-3px)}
.game__icon{
width:100%;height:auto;aspect-ratio:1;border-radius:20px;overflow:hidden;display:block;background:var(--surface-2);
box-shadow:0 0 0 1px rgba(255,255,255,.07),0 10px 24px -12px rgba(0,0,0,.9);
transition:box-shadow .2s,transform .2s var(--ease);
}
.game__icon img{width:100%;height:100%;object-fit:cover;display:block}
.game__letter{
width:100%;height:auto;aspect-ratio:1;border-radius:20px;display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-size:1.7rem;font-weight:600;color:#fff;background:var(--surface-2);
box-shadow:0 0 0 1px rgba(255,255,255,.07);
}
.game__name{
font-size:12px;font-weight:500;color:var(--muted-2);text-align:center;line-height:1.2;
max-width:100%;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;transition:color .2s;
}
.game.is-active .game__icon,.game.is-active .game__letter{box-shadow:0 0 0 2px var(--violet-2),0 12px 28px -10px rgba(155,138,219,.5)}
.game.is-active .game__name{color:var(--text);font-weight:600}
.panel{display:none}
.panel.is-active{display:block;animation:fadeUp .35s var(--ease)}
.panel__note{
display:flex;align-items:flex-start;gap:10px;margin-bottom:20px;padding:13px 16px;
border-radius:14px;background:rgba(255,214,10,.07);border:1px solid rgba(255,214,10,.18);
color:#E9D98A;font-size:13px;line-height:1.5;text-align:left;
}
.panel__note svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none;margin-top:1px}
.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quicksteps{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
margin:clamp(28px,4vw,44px) 0 0;text-align:left;
}
.quickstep{
display:flex;align-items:center;gap:11px;padding:13px 15px;
border-radius:16px;background:var(--surface);border:1px solid var(--line);
}
.quickstep i{
width:26px;height:26px;flex:none;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
background:rgba(155,138,219,.14);color:var(--violet-2);font-style:normal;
font-family:var(--display);font-size:12px;font-weight:600;
}
.quickstep b{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.quickstep span{display:block;font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:2px}
.p-card{
text-align:left;display:flex;flex-direction:column;
padding:18px 18px 15px;border-radius:var(--r);background:var(--surface);
border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
transition:background .2s,transform .18s var(--ease),box-shadow .2s,border-color .2s;
position:relative;min-height:150px;
}
.p-card:hover{background:var(--surface-2);border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(0,0,0,.9)}
.p-card:active{transform:scale(.985)}
.p-card__unit{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);font-weight:600;min-height:13px}
.p-card__name{font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:-.03em;margin-top:5px;line-height:1.1;word-break:break-word}
.p-card__price{display:flex;align-items:baseline;gap:4px;margin-top:auto;padding-top:16px}
.p-card__price small{font-size:11px;color:var(--muted-2);font-weight:500}
.p-card__price b{font-family:var(--display);font-size:1.32rem;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.p-card__add{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--violet-2)}
.p-card__add svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}
/* ---------- pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{padding:26px 24px 28px;border-radius:var(--r);background:var(--surface)}
.step__num{
width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;
background:rgba(155,138,219,.14);color:var(--violet-2);
font-family:var(--display);font-size:13px;font-weight:600;
}
.step h3{margin:16px 0 7px}
.step p{color:var(--muted);font-size:13.5px;line-height:1.55}
/* ---------- pagos ---------- */
.pay{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;text-align:left}
.pay h2{margin-top:12px}
.pay__list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.pay__list li{display:flex;gap:11px;font-size:14px;color:var(--muted);line-height:1.5}
.pay__list svg{width:17px;height:17px;stroke:var(--violet-2);fill:none;stroke-width:2;flex:none;margin-top:2px}
.pay__list b{color:var(--text);font-weight:600}
.no-ubii{margin-top:20px;font-size:12px;color:#D98A8A;display:inline-flex;align-items:center;gap:8px}
.no-ubii svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.ubii-aviso{
display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:11px 13px;border-radius:12px;
background:rgba(255,69,58,.08);border:1px solid rgba(255,69,58,.22);
color:#FF8A80;font-size:11.5px;line-height:1.45;text-align:left;
}
.ubii-aviso svg{width:14px;height:14px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.8}
.ubii-aviso b{color:#FFB4AD}
.ubii-aviso.is-warn{background:rgba(255,159,10,.10);border-color:rgba(255,159,10,.28);color:#FFB340}
.ubii-aviso.is-warn b{color:#FFCF7A}
.pago-aviso{margin-top:20px;padding:14px 16px;border-radius:14px;background:rgba(255,159,10,.08);
border:1px solid rgba(255,159,10,.24);display:flex;flex-direction:column;gap:6px}
.pago-aviso__t{display:flex;align-items:center;gap:8px;font-weight:600;color:#FFB340;font-size:12px}
.pago-aviso__t svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.pago-aviso__d{font-size:11.5px;color:var(--muted);line-height:1.4}
.pago-aviso__d b{color:#FFCF7A}
.input--error{border-color:#FF453A !important;box-shadow:0 0 0 3px rgba(255,69,58,.18) !important}
.ck-help{display:block;text-align:center;margin:4px 0 14px;font-size:12.5px;color:#C9B8FF;text-decoration:underline;text-underline-offset:3px}
.trust-pay{margin:16px 0 8px;padding:16px;border-radius:16px;
background:linear-gradient(160deg,rgba(37,211,102,.14),rgba(37,211,102,.05));
border:1px solid rgba(37,211,102,.34)}
.trust-pay__t{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
color:#7FE3A6;margin-bottom:12px}
.tp-btn{display:block;text-decoration:none;border-radius:12px;padding:13px 15px;margin-top:9px}
.tp-btn:first-of-type{margin-top:0}
.tp-btn b{display:block;font-size:14.5px;font-weight:800;line-height:1.2}
.tp-btn small{display:block;margin-top:3px;font-size:11.5px;font-weight:600;line-height:1.35;opacity:.8}
.tp-btn--primary{background:linear-gradient(100deg,#1FA855,#25D366);color:#06220F;
box-shadow:0 10px 24px rgba(37,211,102,.24)}
.tp-btn--sec{background:rgba(255,255,255,.045);border:1px solid rgba(37,211,102,.38);color:#D7F5E2}
.tp-btn--sec b{color:#EAFFF2}
.tp-btn:active{transform:scale(.99)}
.ck-sticky{position:sticky;bottom:-26px;z-index:3;margin:6px -26px -26px;padding:14px 26px 22px;
background:var(--surface);box-shadow:0 -20px 26px -20px rgba(0,0,0,.95)}
#kfaOpen{display:none !important}
.wa-fab{position:fixed;right:16px;bottom:18px;z-index:70;width:58px;height:58px;border-radius:50%;
border:0;background:linear-gradient(180deg,#4ef08a,#25D366);cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 30px rgba(37,211,102,.45),0 0 0 6px rgba(37,211,102,.10)}
.wa-fab svg{width:30px;height:30px;fill:#06210f;stroke:none}
.wa-fab:active{transform:scale(.95)}
.sup-faq{display:block;width:100%;min-height:44px;margin-top:14px;background:transparent;border:0;
color:#8f8aa4;font:inherit;font-size:11.5px;font-weight:700;text-decoration:underline;cursor:pointer}
.modal--canal .canal-pop{text-align:center;position:relative;padding-top:34px}
.canal-x{position:absolute;top:10px;right:10px}
.canal-ico{width:62px;height:62px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.5)}
.canal-ico svg{width:30px;height:30px;fill:#25D366;stroke:none}
.canal-tag{display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:.14em;color:#5BE38A;
background:rgba(91,227,138,.12);border:1px solid rgba(91,227,138,.35);padding:5px 11px;border-radius:20px}
.canal-t{font-size:19px;font-weight:800;margin-top:12px;line-height:1.25}
.canal-s{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:8px}
.canal-list{list-style:none;margin:16px 0 18px;padding:0;text-align:left}
.canal-list li{font-size:12px;color:#B5AFC6;padding:9px 12px;border-radius:10px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);margin-bottom:7px;font-weight:600}
.canal-pop .btn-primary{background:linear-gradient(180deg,#4ef08a,#25D366);color:#06210f}
.canal-now{display:block;width:100%;margin-top:12px;background:transparent;border:0;color:#6f6a80;
font:inherit;font-size:11.5px;font-weight:700;padding:8px;cursor:pointer}
.ckbar{display:flex;align-items:center;gap:10px;margin:14px 0 18px}
.ckbar__i{display:flex;align-items:center;gap:8px;opacity:.45}
.ckbar__i span{width:24px;height:24px;flex:none;border-radius:50%;background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.18);color:#C7C2D6;font-size:12px;font-weight:800;
display:flex;align-items:center;justify-content:center}
.ckbar__i small{font-size:11px;font-weight:800;color:#C7C2D6;letter-spacing:.02em}
.ckbar__i.is-on{opacity:1}
.ckbar__i.is-on span{background:#9B8ADB;border-color:#9B8ADB;color:#08080A}
.ckbar__i.is-on small{color:#fff}
.ckbar__i.is-done{opacity:1}
.ckbar__i.is-done span{background:#5BE38A;border-color:#5BE38A;color:#06210f}
.ckbar__i.is-done small{color:#5BE38A}
.ckbar__line{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.ck-screen{display:none}
.ck-screen.on{display:block}
.ck-cta{margin-top:4px}
.sup-intro{color:var(--muted);font-size:13px;line-height:1.55;margin-bottom:16px}
.sup-motivos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.sup-motivo{padding:12px 10px;border-radius:11px;background:#101019;border:1px solid rgba(255,255,255,.12);
color:#B5AFC6;font:inherit;font-size:11.5px;font-weight:700;text-align:center;cursor:pointer;line-height:1.3}
.sup-motivo.on{background:rgba(91,227,138,.14);border-color:rgba(91,227,138,.7);color:#C9FFDD}
.sup-ok{color:#5BE38A;font-weight:800}
.field.is-verified > label,
.field.is-verified > .hint,
.field.is-verified > .id-row{display:none}
.idcard{margin-top:2px;padding:14px;border-radius:14px;
background:linear-gradient(165deg,rgba(20,32,24,.95),rgba(12,20,15,.95));
border:1px solid rgba(91,227,138,.45);box-shadow:0 0 30px rgba(91,227,138,.10)}
.idcard__top{display:flex;align-items:center;gap:12px}
.idcard__ava{width:40px;height:40px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,#2aa85c,#12603a);color:#eafff2;font-weight:900;font-size:17px}
.idcard__info{min-width:0}
.idcard__info b{display:block;font-size:14.5px;color:#fff;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idcard__info small{display:block;font-size:11px;color:#8fbfa4;margin-top:2px;font-variant-numeric:tabular-nums}
.idcard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;
padding-top:11px;border-top:1px solid rgba(91,227,138,.18)}
.idcard__ok{font-size:11.5px;font-weight:800;color:#5BE38A;letter-spacing:.02em}
.idcard__chg{background:transparent;border:1px solid rgba(255,255,255,.18);color:#C7C2D6;
font:inherit;font-size:11.5px;font-weight:700;padding:7px 14px;border-radius:9px;cursor:pointer}
.lbl-req{font-size:10.5px;font-weight:900;color:#0a0814;background:#C9B8FF;padding:3px 8px;border-radius:6px;letter-spacing:.06em;margin-left:6px}
.lbl-opt{font-size:10.5px;font-weight:800;color:#8f8aa4;background:rgba(255,255,255,.08);padding:3px 8px;border-radius:6px;letter-spacing:.06em;margin-left:6px}
.cantpay{width:100%;margin-top:12px;padding:13px;border-radius:12px;background:transparent;
border:1px solid rgba(255,255,255,.16);color:#C7C2D6;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.cantpay:active{background:rgba(255,255,255,.04)}
.cantpay-box{margin-top:12px;padding:14px;border-radius:12px;background:rgba(155,138,219,.1);
border:1px solid rgba(155,138,219,.35);font-size:12px;line-height:1.55;color:#D8CFF5}
.cantpay-box b{color:#fff;display:block;margin-bottom:6px;font-size:12.5px}
.cantpay-box ol{margin:8px 0 10px 16px;padding:0}
.cantpay-box li{margin-bottom:6px}
.cantpay-box a{display:inline-block;margin-top:4px;padding:11px 16px;border-radius:10px;
background:#5BE38A;color:#06210f;font-weight:800;font-size:12px;text-decoration:none}
.paybox{background:var(--surface);border-radius:22px;padding:8px 20px}
.payrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.payrow:last-of-type{border-bottom:0}
.payrow__label{font-size:13px;color:var(--muted)}
.payrow__value{font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.banks{display:flex;flex-wrap:wrap;gap:7px;padding:16px 0 14px;border-top:1px solid var(--line)}
.bank{font-size:11px;padding:5px 10px;border-radius:980px;background:rgba(255,255,255,.06);color:var(--muted)}
/* ---------- faq ---------- */
.faq{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;text-align:left}
.faq-q span{font-family:var(--display);font-size:1.06rem;font-weight:500;letter-spacing:-.015em}
.faq-q svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.8;transition:transform .3s var(--ease),stroke .2s;flex:none}
.faq-item.open .faq-q svg{transform:rotate(45deg);stroke:var(--violet-2)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-item.open .faq-a{max-height:360px}
.faq-a p{color:var(--muted);font-size:14px;line-height:1.6;padding:0 2px 24px;max-width:64ch}
.faq-a b{color:var(--text);font-weight:600}
/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--ink)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;text-align:left}
.footer__brand img{height:58px;width:auto;margin-bottom:14px}
.footer__brand p{color:var(--muted);font-size:12.5px;max-width:32ch;line-height:1.6}
.footer h3{font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:600;margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
/* En el telefono los enlaces del pie median 20px: el dedo necesita 44.
Se amplia el area tactil sin cambiar el texto (el gap baja para que
el pie no crezca de alto). El selector va por estructura porque los
del pie no llevan la clase .footer. */
footer ul a,
footer ul button,
.footer ul a,
.footer ul .link-btn{
display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
}
@media (max-width:620px){
footer ul,
.footer ul{gap:2px}
}
.footer ul a,.footer ul li{font-size:13px;color:var(--muted)}
.footer ul a:hover{color:var(--text)}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--muted-2)}
.link-btn{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:11px 0;min-height:44px;display:inline-flex;align-items:center}
.link-btn:hover{color:var(--text)}
/* ---------- barra de carrito ---------- */
.cartbar{
position:fixed;left:0;right:0;bottom:0;z-index:70;
transform:translateY(120%);transition:transform .3s var(--ease);
padding:12px 0 calc(12px + env(safe-area-inset-bottom));
background:rgba(18,18,20,.92);border-top:1px solid var(--line);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.cartbar.is-visible{transform:translateY(0)}
.cartbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cartbar__meta{font-size:12.5px;color:var(--muted)}
.cartbar__total{font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* ---------- modales ---------- */
.modal{
position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
padding:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
opacity:0;visibility:hidden;transition:opacity .08s linear,visibility .08s linear;
}
.modal.is-open{opacity:1;visibility:visible}
.modal__panel{
width:100%;max-width:460px;max-height:92vh;overflow-y:auto;
background:var(--surface);border-radius:26px;padding:26px;position:relative;
box-shadow:0 50px 100px -40px #000;
transform:translateY(8px) scale(.995);transition:transform .12s var(--ease);
scrollbar-width:thin;
}
.modal.is-open .modal__panel{transform:none}
/* En celular el desenfoque de fondo es lo que mas tarda: se quita */
@media (max-width:560px){
.modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.88)}
}
.modal__panel::-webkit-scrollbar{width:8px}
.modal__panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
.modal--drawer{padding:0;align-items:stretch;justify-content:flex-end}
.modal--drawer .modal__panel{
max-width:420px;height:100%;max-height:none;border-radius:0;
display:flex;flex-direction:column;padding:24px;
transform:translateX(30px);transition:transform .32s var(--ease);
}
.modal--drawer.is-open .modal__panel{transform:none}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.modal__title{font-family:var(--display);font-size:1.35rem;font-weight:600;letter-spacing:-.03em}
.icon-btn{
width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.09);
display:inline-flex;align-items:center;justify-content:center;transition:background .2s;
}
.icon-btn:hover{background:rgba(255,255,255,.16)}
.icon-btn svg{width:15px;height:15px;stroke:var(--text);fill:none;stroke-width:2}
/* carrito */
.cart-list{flex:1;overflow-y:auto;display:grid;gap:10px;align-content:start;min-height:120px;padding-right:2px}
.cart-empty{text-align:center;padding:46px 10px;color:var(--muted-2);font-size:13.5px;line-height:1.6}
.cart-row{display:flex;align-items:center;gap:12px;padding:13px;border-radius:16px;background:rgba(255,255,255,.045)}
.cart-row__info{flex:1;min-width:0}
.cart-row__game{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-2);font-weight:600}
.cart-row__name{display:block;font-size:13.5px;font-weight:600;line-height:1.3;margin-top:2px}
.cart-row__price{font-size:13px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px}
.qty{display:inline-flex;align-items:center;background:rgba(255,255,255,.07);border-radius:980px}
.qty button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;transition:color .15s}
.qty button:hover{color:#fff}
.qty span{min-width:20px;text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:20px 0 16px;margin-top:10px;border-top:1px solid var(--line)}
.cart-total__label{font-size:13px;color:var(--muted)}
.cart-total__value{font-family:var(--display);font-size:1.6rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* checkout */
.step-label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--text);margin:0 0 12px}
.step-label em{
width:22px;height:22px;border-radius:999px;background:rgba(155,138,219,.18);color:var(--violet-2);
font-style:normal;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.paybox{background:rgba(255,255,255,.045);border-radius:18px;padding:6px 16px;margin-bottom:24px}
.paybox__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.paybox__row:last-of-type{border-bottom:0}
.paybox__label{font-size:12px;color:var(--muted)}
.paybox__data{display:inline-flex;align-items:center;gap:10px}
.paybox__data b{font-size:13.5px;font-variant-numeric:tabular-nums;font-weight:600}
.copy{font-size:11.5px;font-weight:600;color:var(--violet-2);padding:0 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:980px;background:rgba(155,138,219,.14);transition:background .2s,color .2s}
.copy:hover{background:rgba(155,138,219,.26)}
.copy.is-copied{background:var(--violet-2);color:#000}
.paybox__total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:4px;padding:13px 0;border-top:1px solid var(--line)}
.paybox__total span{font-size:12.5px;color:var(--muted)}
.paybox__total b{font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin:0 0 7px 2px;font-weight:500}
.input{
width:100%;min-height:48px;padding:12px 15px;border-radius:14px;border:1px solid transparent;
background:rgba(255,255,255,.07);color:var(--text);font-size:15px;font-family:inherit;
transition:background .2s,box-shadow .2s;
}
.input::placeholder{color:var(--muted-2)}
.input:focus{outline:none;background:rgba(255,255,255,.1);box-shadow:0 0 0 2px rgba(155,138,219,.55)}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:11.5px;color:var(--muted-2);margin-top:7px;margin-left:2px;line-height:1.5}
.hint--safe{color:var(--ok);font-weight:500}
.id-row{display:flex;gap:8px;margin-top:7px}
.id-row .input{margin:0}
.verify-btn{
flex:none;width:96px;border-radius:14px;background:rgba(155,138,219,.16);color:var(--violet-2);
font-size:12px;font-weight:600;transition:background .2s,color .2s;
}
.verify-btn:hover{background:rgba(155,138,219,.26)}
.verify-btn.is-ok{background:rgba(48,209,88,.18);color:#7EE2A0}
.verify-btn.is-bad{background:rgba(255,69,58,.18);color:#FF8A80}
.verify-msg{font-size:11.5px;margin-top:7px;margin-left:2px;font-weight:500;display:none}
.verify-msg.is-ok{display:block;color:#7EE2A0}
.verify-msg.is-bad{display:block;color:#FF8A80}
.verify-msg.is-warn{display:block;color:#E9D98A}
.verify-msg.is-loading{display:block;color:#C9B8FF;animation:kkFade 1.4s ease-in-out infinite}
@keyframes kkFade{0%,100%{opacity:.55}50%{opacity:1}}
.verify-btn.is-loading{color:transparent;position:relative;pointer-events:none}
.verify-btn.is-loading::after{
content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
border-radius:50%;border:2px solid rgba(201,184,255,.25);border-top-color:#C9B8FF;
animation:kkSpin .7s linear infinite;
}
@keyframes kkSpin{to{transform:rotate(360deg)}}
.id-row.is-loading .input{border-color:rgba(155,138,219,.55);animation:kkPulse 1.5s ease-in-out infinite}
@keyframes kkPulse{0%,100%{box-shadow:0 0 0 0 rgba(155,138,219,0)}50%{box-shadow:0 0 0 4px rgba(155,138,219,.10)}}
@media (prefers-reduced-motion: reduce){
.verify-msg.is-loading,.verify-btn.is-loading::after,.id-row.is-loading .input{animation:none}
}
.alert{display:none;margin:0 0 18px;padding:12px 15px;border-radius:14px;font-size:12.5px;line-height:1.5}
.alert.is-visible{display:block}
.alert--warn{background:rgba(255,214,10,.08);color:#E9D98A}
.alert--info{background:rgba(155,138,219,.1);color:var(--violet-2)}
.file-field{position:relative}
.file-field input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file-box{
display:flex;align-items:center;gap:13px;padding:14px;border-radius:14px;
background:rgba(255,255,255,.05);border:1px dashed var(--line-2);transition:background .2s,border-color .2s;
}
.file-field:hover .file-box{background:rgba(255,255,255,.08);border-color:rgba(155,138,219,.5)}
.file-box svg{width:20px;height:20px;stroke:var(--violet-2);fill:none;stroke-width:1.7;flex:none}
.file-box b{display:block;font-size:13px;font-weight:600}
.file-box span{display:block;font-size:11px;color:var(--muted-2)}
.file-box.is-selected{border-style:solid;border-color:rgba(48,209,88,.45);background:rgba(48,209,88,.06)}
.file-box.is-bad{border-style:solid;border-color:rgba(255,69,58,.5);background:rgba(255,69,58,.07)}
/* éxito */
.modal--success .modal__panel{text-align:center;max-width:430px}
.success-mark{
width:66px;height:66px;margin:0 auto 18px;border-radius:999px;
background:rgba(48,209,88,.14);display:flex;align-items:center;justify-content:center;
}
.success-mark svg{width:28px;height:28px;stroke:#7EE2A0;fill:none;stroke-width:2.4}
.success-box{display:none;text-align:left;margin:18px 0 20px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05)}
.success-box.is-visible{display:block}
.success-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.success-row span{font-size:12px;color:var(--muted)}
.success-row b{font-size:13px;font-variant-numeric:tabular-nums}
.order-code{margin:0 0 18px}
.order-code__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet,#9B8ADB);font-weight:700;text-align:center}
.order-code__box{display:block;width:100%;margin-top:8px;padding:16px 12px 12px;border-radius:16px;cursor:pointer;
background:linear-gradient(165deg,rgba(155,138,219,.16),rgba(155,138,219,.06));
border:1px dashed rgba(155,138,219,.65);color:inherit;font:inherit;transition:transform .12s ease,border-color .2s ease}
.order-code__box:active{transform:scale(.98)}
.order-code__box.is-copied{border-color:#5BE38A;border-style:solid}
.order-code__box b{display:block;font-size:26px;letter-spacing:.06em;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.order-code__hint{display:block;margin-top:6px;font-size:11px;color:var(--muted)}
.order-code__note{margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
/* buscador */
.buscador{position:relative;max-width:520px;margin:0 auto 26px}
.buscador svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--muted-2);fill:none;stroke-width:1.8;pointer-events:none}
.buscador input{
width:100%;min-height:50px;padding:0 18px 0 45px;border-radius:980px;
background:var(--surface);border:0;color:var(--text);font-size:14.5px;font-family:inherit;
transition:background .2s,box-shadow .2s;
}
.buscador input::placeholder{color:var(--muted-2)}
.buscador input:focus{outline:none;background:var(--surface-2);box-shadow:0 0 0 2px rgba(155,138,219,.5)}
.buscar-count{font-size:12px;color:var(--muted-2);margin-bottom:14px;text-align:center}
.buscar-vacio{text-align:center;color:var(--muted);font-size:14px;padding:44px 12px;line-height:1.6}
/* estado del pedido */
.estado-card{margin-top:20px;padding:18px;border-radius:16px;background:rgba(255,255,255,.05);text-align:left}
.estado-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.estado-top b{font-family:var(--display);font-size:1.02rem;letter-spacing:-.01em}
.badge-estado{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:980px;white-space:nowrap}
.badge-estado[data-e="Pendiente"]{background:rgba(255,214,10,.15);color:#E9D98A}
.badge-estado[data-e="Entregado"]{background:rgba(48,209,88,.16);color:#7EE2A0}
.badge-estado[data-e="Rechazado"]{background:rgba(255,69,58,.16);color:#FF8A80}
.estado-item{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:var(--muted);padding:5px 0}
.estado-item b{color:var(--text);font-weight:600;text-align:right}
.estado-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.estado-total span{font-size:12px;color:var(--muted)}
.estado-total b{font-family:var(--display);font-size:1.12rem;letter-spacing:-.02em}
.estado-error{margin-top:18px;padding:13px 15px;border-radius:14px;background:rgba(255,69,58,.1);color:#FF8A80;font-size:12.5px;line-height:1.5}
/* reseñas / entregas */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{
display:flex;flex-direction:column;padding:20px;border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
border:1px solid var(--line);
box-shadow:0 30px 60px -44px rgba(0,0,0,.95);
}
.review__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.review__who{display:flex;align-items:center;gap:10px;min-width:0}
.review__avatar{
width:44px;height:44px;border-radius:999px;flex:none;
display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--violet-2);
background:linear-gradient(140deg,#2b2440,#14121c);
border:1px solid rgba(155,138,219,.28);
}
.review__who b{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.review__who small{display:block;font-size:11px;color:var(--muted-2)}
.review__badge{
font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:#7EE2A0;background:rgba(48,209,88,.13);
padding:5px 9px;border-radius:999px;white-space:nowrap;
}
.review__chat{display:grid;gap:8px;flex:1;margin-bottom:16px;place-items:start}
.bubble{
font-size:12.5px;line-height:1.45;padding:9px 12px;border-radius:13px;max-width:94%;margin:0;
}
.bubble--in{background:rgba(255,255,255,.07);color:var(--text);border-bottom-left-radius:5px}
.bubble--out{
background:rgba(37,211,102,.12);color:#DDF6E7;border:1px solid rgba(37,211,102,.16);
border-bottom-right-radius:5px;justify-self:end;text-align:left;
}
.review__foot{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted-2);
}
.review__foot b{color:var(--text);font-weight:600}
.review__big{font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--text);letter-spacing:-.02em}
@media (max-width:940px){.reviews{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.reviews{grid-template-columns:1fr}}
/* aviso del canal (discreto, no tapa la pantalla) */
.channel{
position:fixed;left:50%;bottom:16px;z-index:80;transform:translate(-50%,150%);
width:min(540px,calc(100% - 28px));
display:flex;align-items:center;gap:13px;
padding:13px 14px;border-radius:20px;
background:rgba(24,24,28,.94);border:1px solid var(--line-2);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
box-shadow:0 26px 70px -24px #000;
/* Oculto de raiz: con transform solo, el banner se asomaba 53 px cuando
"tiene-carrito" lo subia 86 px y el translate de 150 % no alcanzaba. */
opacity:0;visibility:hidden;
transition:transform .45s var(--ease),opacity .3s linear,visibility .3s;
}
.channel.is-visible{transform:translate(-50%,0);opacity:1;visibility:visible}
body.tiene-carrito .channel{bottom:86px}
/* Oculto de verdad al abrir carrito/checkout: el translate solo no basta
porque con "tiene-carrito" el banner sube 86px y quedaba asomado. */
body.no-scroll .channel{transform:translate(-50%,150%);opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:760px){body{padding-bottom:96px}}
.channel__icon{
width:40px;height:40px;flex:none;border-radius:13px;
background:rgba(37,211,102,.14);display:flex;align-items:center;justify-content:center;
}
.channel__icon svg{width:21px;height:21px;fill:#25D366;stroke:none}
.channel__text{flex:1;min-width:0}
.channel__text strong{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.channel__text span{display:block;font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:1px}
.channel__close{
width:28px;height:28px;flex:none;border-radius:999px;color:var(--muted-2);
display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;
}
.channel__close:hover{background:rgba(255,255,255,.08);color:var(--text)}
@media (max-width:560px){
.channel{gap:10px;padding:12px}
.channel__text span{display:none}
.channel .btn{min-height:40px;padding:0 14px;font-size:12.5px}
}
/* toast */
.toast{
position:fixed;left:50%;bottom:100px;z-index:200;transform:translate(-50%,14px);
background:var(--text);color:#000;font-size:13px;font-weight:600;
padding:11px 18px;border-radius:980px;opacity:0;pointer-events:none;
transition:opacity .25s,transform .25s var(--ease);box-shadow:0 20px 50px -14px rgba(0,0,0,.8);
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
/* animaciones */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.loader{width:16px;height:16px;border:2px solid rgba(0,0,0,.25);border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite;flex:none}
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-in{opacity:1;transform:none}
/* ---------- responsive ---------- */
@media (max-width:1100px){
.rail{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:940px){
.pay{grid-template-columns:1fr;gap:32px}
.grid-cards{grid-template-columns:repeat(3,1fr)}
.footer__grid{grid-template-columns:1fr 1fr}
.featured{max-width:100%}
}
@media (max-width:760px){
.nav{display:none}
.section__head h2{font-size:1.6rem;letter-spacing:-.035em}
.topbar__right span:nth-child(2){display:none}
.site-header .wrap{height:60px}
.brand img{height:46px}
.cart-btn span:not(.cart-btn__count){display:none}
.cart-btn{padding:0 12px}
.steps{grid-template-columns:1fr}
.grid-cards{grid-template-columns:repeat(2,1fr)}
.quicksteps{grid-template-columns:1fr;gap:8px;margin-top:24px}
.quickstep{padding:11px 13px}
.footer__grid{grid-template-columns:1fr;gap:32px}
.modal--drawer .modal__panel{max-width:100%}
.modal{padding:10px}
.modal__panel{padding:22px 18px}
.featured{flex-wrap:wrap;gap:14px;padding:15px}
.featured__info{flex:1 1 60%}
.featured .btn{width:100%}
.hero__note{display:none} .p-card{min-height:142px;padding:15px}
.p-card__name{font-size:1.22rem}
.cartbar__meta{display:none}
}
@media (max-width:420px){
.wrap{padding:0 18px}
.input-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.js .reveal{opacity:1;transform:none}
}
/* ===== bloque 2, sacado de index.html ===== */
.k4{padding:40px 0 18px}
.k4__head{text-align:center;margin-bottom:20px}
.k4__k{display:inline-block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#9B8ADB;font-weight:700;margin-bottom:8px}
.k4__h{font-family:Anton,Bebas Neue,sans-serif;font-size:clamp(1.55rem,6.2vw,2.1rem);line-height:1.05;text-transform:uppercase;margin:0}
.k4__h em{font-style:normal;color:#9B8ADB}
.k4__stage{position:relative;border-radius:20px;background:#0F0C18;border:1px solid rgba(155,138,219,.22);padding:14px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.k4__scene{display:none;min-height:186px}
.k4__scene.is-on{display:block;animation:k4in .42s cubic-bezier(.22,1,.36,1) both}
@keyframes k4in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.k4__ttl{font-family:Anton,Bebas Neue,sans-serif;font-size:1.15rem;text-transform:uppercase;margin:0 0 2px}
.k4__sub{font-size:.76rem;color:#8F8AA4;margin:0 0 10px}
.k4__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.k4__gm{background:#161026;border:1px solid rgba(155,138,219,.18);border-radius:12px;padding:9px 5px;text-align:center;font-size:.62rem;font-weight:700;color:#B5AFC6;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.k4__gm img{width:42px;height:42px;border-radius:10px;object-fit:cover;display:block;margin:0 auto 5px}
.k4__gm.is-pick{border-color:#9B8ADB;background:#241A45;box-shadow:0 0 26px rgba(155,138,219,.5);color:#fff;transform:translateY(-3px) scale(1.03)}
.k4__row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#161026;border:1px solid rgba(155,138,219,.16);border-radius:12px;padding:9px 12px;margin-bottom:7px}
.k4__row.is-pick{border-color:#9B8ADB;background:#241A45}
.k4__row b{font-family:Anton,Bebas Neue,sans-serif;font-size:.92rem}
.k4__row .p{font-family:Anton,Bebas Neue,sans-serif;font-size:.92rem;color:#C9B8FF;white-space:nowrap}
.k4__row small{display:block;font-size:.58rem;color:#8F8AA4;font-weight:500}
.k4__add{font-size:.6rem;font-weight:800;color:#B9A8FF;border:1px solid rgba(155,138,219,.4);border-radius:8px;padding:5px 9px;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.k4__add.is-on{background:#5BE38A;color:#062514;border-color:#5BE38A}
.k4__fld{margin-top:4px;border:2px solid #9B8ADB;border-radius:14px;background:#0B0814;padding:14px;font-family:Anton,Bebas Neue,sans-serif;font-size:1.4rem;letter-spacing:.12em;box-shadow:0 0 30px rgba(155,138,219,.35)}
.k4__safe{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 14px;border-radius:999px;background:#12321F;border:1px solid rgba(91,227,138,.45);color:#5BE38A;font-size:.72rem;font-weight:800}
.k4__caret{display:inline-block;width:2px;height:1.1em;background:#9B8ADB;margin-left:6px;vertical-align:-2px;animation:k4blink 1s steps(1) infinite}
@keyframes k4blink{50%{opacity:0}}
.k4__where{margin-top:16px;border-top:1px dashed rgba(155,138,219,.25);padding-top:14px}
.k4__where-h{display:block;font-size:.74rem;font-weight:800;color:#fff;margin-bottom:8px}
.k4__prof{display:flex;align-items:center;gap:10px;background:#161026;border:1px solid rgba(155,138,219,.22);border-radius:12px;padding:10px}
.k4__prof img{width:42px;height:42px;border-radius:10px;object-fit:cover}
.k4__prof b{display:block;font-size:.72rem;font-weight:700}
.k4__prof span{display:block;font-family:Anton,Bebas Neue,sans-serif;font-size:1rem;color:#C9B8FF;letter-spacing:.06em}
.k4__pay{background:#161026;border:1px solid rgba(155,138,219,.16);border-radius:14px;padding:14px}
.k4__pr{display:flex;justify-content:space-between;font-size:.76rem;color:#8F8AA4;padding:4px 0}
.k4__pr b{color:#fff;font-size:.8rem}
.k4__pr.tot{border-top:1px dashed rgba(155,138,219,.3);margin-top:6px;padding-top:8px}
.k4__pr.tot b{font-family:Anton,Bebas Neue,sans-serif;font-size:1.2rem;color:#C9B8FF}
.k4__shot{margin-top:10px;border:2px dashed rgba(155,138,219,.4);border-radius:14px;padding:16px;text-align:center;color:#8F8AA4;font-size:.74rem}
.k4__shot.is-on{border-style:solid;border-color:#2E9E5B;background:#0E2416;color:#5BE38A;font-weight:800}
.k4__steps{display:flex;gap:8px;margin-top:16px}
.k4__st{flex:1;height:5px;border-radius:99px;background:rgba(155,138,219,.2);overflow:hidden}
.k4__st i{display:block;height:100%;width:0;background:#9B8ADB;border-radius:99px}
.k4__st.is-done i{width:100%}
.k4__st.is-on i{animation:k4bar 3.6s linear forwards}
@keyframes k4bar{from{width:0}to{width:100%}}
.k4__foot{text-align:center;margin-top:12px;font-size:.74rem;color:#8F8AA4}
@media (prefers-reduced-motion: reduce){
.k4__scene{display:block !important;animation:none !important}
.k4__st i{width:100% !important;animation:none !important}
}
/* ===== bloque 3, sacado de index.html ===== */
.kfa__btn{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:8px;
padding:13px 18px;border-radius:999px;border:0;background:#9B8ADB;color:#08080A;font:800 .82rem/1 Inter,sans-serif;
box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 30px rgba(155,138,219,.45);cursor:pointer}
.kfa__btn span{font-size:1rem}
.kfa__ov{position:fixed;inset:0;z-index:61;background:rgba(4,4,8,.72);opacity:0;visibility:hidden;transition:opacity .2s}
.kfa__ov.on{opacity:1;visibility:visible}
.kfa__sheet{position:fixed;left:0;right:0;bottom:0;z-index:62;max-height:82vh;overflow:auto;
background:#0F0C18;border-top:1px solid rgba(155,138,219,.3);border-radius:22px 22px 0 0;
padding:18px 16px 22px;transform:translateY(100%);transition:transform .26s cubic-bezier(.22,1,.36,1)}
.kfa__sheet.on{transform:none}
.kfa__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kfa__hd b{font-family:Anton,Bebas Neue,sans-serif;font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em}
.kfa__x{border:0;background:rgba(255,255,255,.08);color:#fff;width:44px;height:44px;border-radius:50%;font-size:1rem;cursor:pointer}
.kfa__q{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;
padding:14px;margin-bottom:8px;border-radius:14px;background:#161026;border:1px solid rgba(155,138,219,.18);
color:#fff;font:700 .84rem/1.25 Inter,sans-serif;cursor:pointer}
.kfa__q i{color:#9B8ADB;font-style:normal;font-weight:900;transition:transform .2s}
.kfa__q[aria-expanded="true"]{border-color:#9B8ADB;background:#241A45}
.kfa__q[aria-expanded="true"] i{transform:rotate(45deg)}
.kfa__a{display:none;padding:0 14px 14px;margin:-6px 0 8px;color:#B5AFC6;font-size:.8rem;line-height:1.5}
.kfa__a.on{display:block;animation:kfaIn .22s ease both}
@keyframes kfaIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.kfa__note{margin-top:6px;padding:12px 14px;border-radius:14px;background:#12321F;border:1px solid rgba(91,227,138,.45);
color:#5BE38A;font-size:.74rem;font-weight:700;line-height:1.4}
.kfa__wa{display:block;width:100%;margin-top:12px;padding:15px;border-radius:14px;border:0;background:#9B8ADB;color:#08080A;
font:800 .86rem/1 Inter,sans-serif;cursor:pointer}
/* ===== bloque 4, sacado de index.html ===== */
/* Aviso y pasos del pago */
.payalert{margin:4px 0 16px;padding:14px 16px;border-radius:14px;background:rgba(155,138,219,.10);
border:1px solid rgba(155,138,219,.45);color:#DCD2FF;font-size:.8rem;line-height:1.45}
.payalert b{display:block;color:#fff;font-size:.86rem;margin-bottom:2px}
.paysteps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.paysteps>div{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:12px;
padding:10px 8px;text-align:center}
.paysteps i{display:flex;width:22px;height:22px;margin:0 auto 6px;border-radius:50%;background:#9B8ADB;color:#08080A;
font-style:normal;font-weight:900;font-size:.72rem;align-items:center;justify-content:center}
.paysteps span{display:block;font-size:.66rem;line-height:1.25;color:#B5AFC6;font-weight:700}
/* Precios premium: degradado violeta en vez de blanco plano */
.p-card__price b,.featured__price,.paybox__total b{
background:linear-gradient(180deg,#FFFFFF 0%,#DCD2FF 45%,#A48BF5 100%);
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 1px 10px rgba(155,138,219,.28));
letter-spacing:-.03em;
}
.p-card__price small,.paybox__total span{color:#9C96AE}
.cartbar__total{
background:linear-gradient(180deg,#FFFFFF 0%,#DCD2FF 50%,#A48BF5 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
font-family:var(--display);letter-spacing:-.02em;
}
/* ============================================================
Burbuja de WhatsApp (flotante, abajo a la derecha)
Se apila encima del boton de dudas para no taparse.
En las paginas sin .kfa__btn cae sola al fondo.
============================================================ */
.kwa {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 59; /* debajo del boton de dudas (60) */
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
background: linear-gradient(180deg,#2BE07A,#25D366);
box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 22px rgba(37,211,102,.4);
transition: transform .15s;
}
.kwa:active { transform: scale(.94); }
.kwa svg { width: 30px; height: 30px; fill: #073B22; }
.kwa__txt {
position: absolute;
right: 66px;
white-space: nowrap;
background: #0F0C18;
color: #F5F5F7;
font: 700 .74rem/1 Inter, system-ui, sans-serif;
padding: 8px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
opacity: 0;
transform: translateX(6px);
transition: opacity .18s, transform .18s;
pointer-events: none;
}
/* El texto de ayuda se ve al pasar el dedo/raton */
.kwa:hover .kwa__txt, .kwa:focus-visible .kwa__txt {
opacity: 1;
transform: none;
}
@media (max-width: 400px) {
.kwa { width: 52px; height: 52px; right: 12px; }
.kwa svg { width: 27px; height: 27px; }
}
/* =====================================================================
Checkout paso 2 — compacto
El cliente se cansaba de bajar: datos bancarios arriba, y justo debajo
referencia y comprobante sin aire de mas. Todo el recorrido queda en una
sola pasada de pulgar.
===================================================================== */
.field--tight{margin-top:10px}
.field--tight .hint{margin-bottom:6px}
.ubii-aviso--corto{margin:2px 0 8px;padding:9px 12px;font-size:11.5px;line-height:1.35}
.ubii-aviso--corto svg{flex:0 0 auto}
/* Aviso legal del comprobante: se lee, pero no grita ni asusta. */
.hint--legal{margin-top:8px;font-size:10.5px;line-height:1.45;color:#9A9AA8}
.hint--legal::before{content:"⚖ ";color:#8B7BD8}
/* El boton de subir comprobante ahora es obligatorio: se marca mas. */
.file-box{border-color:rgba(124,92,255,.45)}
.file-box--error{border-color:#F87171!important;box-shadow:0 0 0 3px rgba(248,113,113,.12)}
/* En pantallas cortas el pie fijo no debe tapar el aviso legal. */
@media (max-height:700px){
.ck-sticky{padding-bottom:env(safe-area-inset-bottom,0px)}
}
/* =====================================================================
Panel de rescate del pedido
Sustituye al confirm() gris del navegador, que parecia un error del
sistema y asustaba al cliente.
===================================================================== */
.modal--respaldo .modal__panel{max-width:420px}
.respaldo-mark{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
display:grid;place-items:center;background:rgba(232,195,106,.13);color:#E8C36A}
.respaldo-mark svg{width:26px;height:26px}
.respaldo-txt{color:var(--muted);font-size:13.5px;margin-top:8px;text-align:center}
.respaldo-txt b{color:#fff}
.respaldo-motivo{margin:12px 0 16px;padding:12px 14px;border-radius:12px;
background:rgba(255,255,255,.05);font-size:12.5px;line-height:1.45;color:#D6D6E0;text-align:center}
/* Aire al final del paso 2: el pie fijo con "Enviar pedido" tapaba el
aviso legal del comprobante. */
#cks2{padding-bottom:22px}
#cks2 .hint--legal{margin-bottom:4px}
.hint--fuerte{color:#D6D6E0!important;font-size:11.5px!important}
.respaldo-mark{box-shadow:0 0 0 6px rgba(37,211,102,.07)}
.respaldo-mark svg{width:26px;height:26px;fill:#25D366}
/* =====================================================================
Paso 2 mas compacto todavia — ronda 20
El bloque de datos bancarios medía 409px, el 44% del paso. Aqui se aprieta
sin bajar de 44px de area tactil en los botones de copiar.
===================================================================== */
#cks2 .paybox{padding:2px 16px;border-radius:18px;margin-bottom:12px}
#cks2 .paybox__row{padding:7px 0}
#cks2 .paybox__total{padding:9px 0;margin-top:0}
#cks2 .paybox__total b{font-size:1.12rem}
#cks2 .paybox__label{font-size:11.5px}
#cks2 .paybox__data b{font-size:13px}
/* Los botones "Copiar" quedan mas bajos pero siguen tocando bien (44px de
alto real via padding vertical). */
#cks2 .copy{padding:0 14px;font-size:11px;min-height:44px;line-height:1;display:inline-flex;align-items:center}
#cks2 .copy[style*="width:100%"]{margin:4px 0 8px!important;min-height:44px;justify-content:center}
/* El aviso "Monto exacto" se mete dentro del flujo, sin aire de mas. */
#cks2 .ubii-aviso--corto{margin:0 0 6px;padding:7px 10px;font-size:11px}
#cks2 .ubii-aviso--corto svg{width:13px;height:13px}
/* Cabecera del paso: el payalert amarillo a una sola linea. */
#cks2 .payalert{padding:9px 12px;font-size:11.5px;line-height:1.35;margin:2px 0 10px}
/* Campos: etiqueta y ayuda mas juntas. */
#cks2 .field--tight{margin-top:8px;margin-bottom:8px}
#cks2 .field--tight label{font-size:11.5px;margin-bottom:5px}
#cks2 .field--tight .hint{font-size:10.5px;line-height:1.3;margin:4px 0 0}
#cks2 .input{padding:11px 13px}
/* La caja de subir comprobante, mas baja. */
#cks2 .file-box{padding:11px 13px;gap:10px}
#cks2 .file-box b{font-size:12.5px}
#cks2 .file-box span{font-size:10.5px}
#cks2 .hint--legal{font-size:10.5px;margin-top:5px}
/* El pie con "Enviar pedido" no necesita tanto aire encima. */
#cks2 .ck-sticky .hint{font-size:10.5px;margin-top:6px!important}
/* Sin botones "Copiar" por fila, las lineas pueden respirar menos y los
datos siguen alineados. El boton grande "Copiar todo" hace el trabajo. */
#cks2 .paybox__row{padding:6px 0}
#cks2 .paybox__data b{font-size:13.5px}
/* =====================================================================
El pie del paso 2 ya NO se queda pegado
Estaba en position:sticky y tapaba 129px del final, justo el comprobante
obligatorio. Ahora baja con el contenido: se ve todo y el boton aparece
al terminar de leer.
===================================================================== */
#cks2 .ck-sticky{position:static;bottom:auto;margin:10px -26px -26px;padding:12px 26px 20px;
background:transparent;border-top:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Compresion final del paso 2: el contenido medía 956px dentro de un panel
de 776px. Se quita aire sin perder nada de informacion.
Objetivo: que datos + referencia + comprobante + boton se vean de una vez. */
#cks2 .hint{line-height:1.4}
#cks2 label{font-size:11.5px!important}
#cks2 .lbl-req{font-size:10.5px;padding:2px 6px}
#cks2 .paybox__label{font-size:11px}
#cks2 .paybox__data b{font-size:13px}
#cks2 .paybox__row{padding:5px 0}
#cks2 .paybox__total{padding:7px 0}
#cks2 .file-box{padding:10px 12px}
#cks2 .file-box svg{width:20px;height:20px}
#cks2 .ck-sticky{margin-top:6px;padding:10px 26px 16px}
/* La linea de "entrega estimada" se ve arriba en el aviso del horario:
repetirla aqui gastaba 29px justo donde falta espacio. */
#cks2 #entrega-estimada{display:none}
#cks2 .payalert{font-size:11px;padding:8px 11px;line-height:1.3}
#cks2 .ubii-aviso--corto{padding:6px 9px;font-size:10.5px}
#cks2 .ubii-aviso--corto span{line-height:1.3}
#cks2 .field--tight{margin-top:6px;margin-bottom:6px}
#cks2 .field--tight .hint{font-size:10.5px;margin-top:4px}
#cks2 .input{padding:10px 12px;font-size:14px}
#cks2 .hint--legal{font-size:10.5px;margin-top:5px;line-height:1.3}
#cks2 .paybox__total{padding:8px 0 4px}
#cks2 .paybox__total b{font-size:1.05rem}
#cks2 .copy--todo{width:100%;margin:2px 0 8px;min-height:44px;justify-content:center;
background:rgba(124,92,255,.16);border:1px solid rgba(124,92,255,.42);color:#CFC4FF;font-weight:600}
#cks2 .copy--todo:active{background:rgba(124,92,255,.26)}
#cks2 .montonota{margin:0 0 6px;text-align:center;font-size:10.5px;line-height:1.3;color:#B9A87A}
#cks2 .montonota::before{content:"◈ ";color:#E8C36A}
#cks2 .field--tight{margin-top:5px;margin-bottom:5px}
#cks2 .ck-sticky{margin-top:4px;padding:9px 26px 14px}
#cks2 .ck-sticky .hint{font-size:10.5px;margin-top:5px!important}
#cks2 .hint--legal{margin-top:4px;font-size:10.5px}
#cks2 .paybox{border-radius:16px;padding:0 15px}
#cks2 #cks2, #cks2{padding-bottom:14px}