/* =========================================================
   Verified Technology — Design System (main.css)
   Premium Apple-like store · light/dark aware · responsive
   ========================================================= */
:root{
  --bg:#ffffff; --bg-soft:#f5f5f7; --bg-elev:#ffffff;
  --text:#1d1d1f; --text-soft:#6e6e73; --text-mut:#86868b;
  --line:#e5e5ea; --line-soft:#f0f0f2;
  --brand:#0071e3; --brand-ink:#0a84ff; --brand-2:#5e5ce6;
  --ok:#1a9e57; --ok-bg:#e7f6ee; --warn:#b25000; --sale:#d6103a; --sale-bg:#fff0f2;
  --card:#ffffff; --shadow:0 6px 24px -12px rgba(0,0,0,.18); --shadow-lg:0 20px 60px -24px rgba(0,0,0,.28);
  --radius:18px; --radius-sm:12px; --radius-lg:26px;
  --wa:#25d366;
  --maxw:1200px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000000; --bg-soft:#0a0a0c; --bg-elev:#141416;
    --text:#f5f5f7; --text-soft:#a1a1a6; --text-mut:#86868b;
    --line:#2a2a2e; --line-soft:#1c1c1f;
    --card:#141416; --shadow:0 6px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -24px rgba(0,0,0,.75);
    --ok-bg:#0e2a1c; --sale-bg:#2a0d14;
  }
}
:root[data-theme="light"]{--bg:#fff;--bg-soft:#f5f5f7;--bg-elev:#fff;--text:#1d1d1f;--text-soft:#6e6e73;--line:#e5e5ea;--card:#fff;}
:root[data-theme="dark"]{--bg:#000;--bg-soft:#0a0a0c;--bg-elev:#141416;--text:#f5f5f7;--text-soft:#a1a1a6;--line:#2a2a2e;--card:#141416;}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:.95rem;padding:12px 22px;border-radius:980px;
  transition:transform .12s ease,filter .15s ease,background .15s ease;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--bg-soft);color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--line-soft)}
.btn-wa{background:var(--wa);color:#04240f}
.btn-wa:hover{filter:brightness(1.05)}
.btn-lg{padding:15px 30px;font-size:1.02rem}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Announcement bar ---------- */
.annc{background:#0071e3;color:#fff;text-align:center;
  font-size:.83rem;font-weight:600;letter-spacing:.01em;padding:9px 16px;transition:opacity .3s;line-height:1.3}
@media (prefers-color-scheme:dark){.annc{background:#0a84ff}}
:root[data-theme="dark"] .annc{background:#0a84ff}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:18px;height:76px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.logo img{height:48px;width:auto}
/* logo blanco -> oscuro en modo claro para que SIEMPRE se vea */
:root[data-theme="light"] .logo img,
:root[data-theme="light"] .mmenu-logo img{filter:brightness(0) saturate(100%)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .logo img,:root:not([data-theme="dark"]) .mmenu-logo img{filter:brightness(0) saturate(100%)}}
.nav{display:flex;align-items:center;gap:4px;margin-left:6px}
.nav a{padding:8px 12px;border-radius:10px;color:var(--text-soft);font-size:.9rem;font-weight:500}
.nav a:hover{color:var(--text);background:var(--bg-soft)}
.hdr-sp{flex:1}
.hdr-act{display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--text-soft)}
.icon-btn:hover{background:var(--bg-soft);color:var(--text)}
.icon-btn svg{width:20px;height:20px}
.burger{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 80% -10%,rgba(0,113,227,.16),transparent 60%),
  radial-gradient(90% 80% at 0% 110%,rgba(94,92,230,.14),transparent 55%),var(--bg-soft)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;
  padding:60px 22px 50px;max-width:var(--maxw);margin:0 auto}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.hero h1 .g{background:linear-gradient(100deg,var(--brand-ink),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:16px 0 26px;color:var(--text-soft);font-size:1.12rem;max-width:460px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-fin{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 18px;max-width:520px;box-shadow:var(--shadow)}
.hero-fin>span{font-size:.9rem;font-weight:600;color:var(--text-soft)}
.hero-fin img{height:26px;width:auto}
.hero-fin .hero-fin-box{height:34px;border-radius:6px}
.hero-fin .soon{font-size:.62rem;font-weight:700;color:var(--text-mut);background:var(--bg-soft);border:1px solid var(--line);padding:2px 7px;border-radius:999px;text-transform:uppercase}
.hero-media{position:relative;display:grid;place-items:center;min-height:280px}
.hero-media img{max-height:420px;width:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.28))}
.hero-badge{position:absolute;top:18px;left:-6px;z-index:5;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:10px 15px;box-shadow:var(--shadow-lg);font-size:.82rem;font-weight:600;white-space:nowrap}
.hero-badge small{display:block;color:var(--text-mut);font-weight:500}
.hero-frame{background:#fff;border-radius:28px;padding:22px 26px;box-shadow:var(--shadow-lg);
  max-width:340px;width:100%;display:block;transition:transform .2s}
.hero-frame:hover{transform:translateY(-4px)}
.hero-frame img{width:100%;aspect-ratio:1/1;object-fit:contain}

/* ---------- Trust bar ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:20px 22px;max-width:var(--maxw);margin:0 auto}
.trust-i{display:flex;align-items:center;gap:11px}
.trust-i svg{width:24px;height:24px;color:var(--brand);flex:none}
.trust-i b{display:block;font-size:.9rem}
.trust-i span{font-size:.78rem;color:var(--text-mut)}

/* ---------- Sections ---------- */
.sec{padding:60px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.sec-h h2{font-size:clamp(1.5rem,3.6vw,2.1rem);font-weight:700;letter-spacing:-.02em}
.sec-h p{color:var(--text-soft);font-size:.98rem;margin-top:4px}
.sec-h a{color:var(--brand);font-weight:600;font-size:.95rem;white-space:nowrap}

/* ---------- Category chips / model grid ---------- */
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.model-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 16px;text-align:center;transition:transform .15s,box-shadow .15s,border-color .15s}
.model-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.model-card .mc-ic{font-size:1.7rem;margin-bottom:8px}
.model-card .mc-ph{height:96px;display:grid;place-items:center;margin-bottom:10px}
.model-card .mc-ph img{max-height:96px;max-width:100%;object-fit:contain}
.model-card b{display:block;font-size:1rem;letter-spacing:-.01em}
.model-card span{font-size:.78rem;color:var(--text-mut)}
.conds{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cond-chip{border:1px solid var(--line);background:var(--card);border-radius:980px;padding:9px 16px;
  font-size:.86rem;font-weight:600;display:inline-flex;gap:7px;align-items:center;transition:.15s}
.cond-chip:hover{border-color:var(--brand);color:var(--brand)}
.cond-chip i{width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* ---------- Product grid & card ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card-p{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s,border-color .16s;position:relative}
.card-p:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.card-p .ph{position:relative;aspect-ratio:1/1;background:var(--bg-soft);display:grid;place-items:center;padding:18px}
.card-p .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.card-p .ph img{mix-blend-mode:normal}}
.card-p .bd{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-p .cond{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand)}
.card-p h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.card-p .price{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:6px}
.card-p .price .now{font-size:1.15rem;font-weight:700}
.card-p .price .was{font-size:.86rem;color:var(--text-mut);text-decoration:line-through}
.card-p .cuotas{font-size:.76rem;color:var(--text-mut);margin-top:2px}
.card-p .cuotas b{color:var(--text-soft);font-weight:600}
.card-p .row{display:flex;gap:8px;margin-top:10px}
.card-p .row .btn{flex:1;padding:10px 12px;font-size:.85rem}
.badge{position:absolute;top:12px;left:12px;z-index:2;font-size:.72rem;font-weight:700;
  padding:5px 10px;border-radius:980px;background:var(--sale-bg);color:var(--sale)}
.badge.stock{left:auto;right:12px;background:var(--ok-bg);color:var(--ok)}
.fav{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--card) 80%,transparent);display:grid;place-items:center;color:var(--text-mut)}

/* ---------- Shop ---------- */
.shop{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start;padding:34px 0 60px}
.shop-side{position:sticky;top:74px}
.fgroup{margin-bottom:22px}
.fgroup h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mut);margin-bottom:10px}
.fchips{display:flex;flex-direction:column;gap:6px}
.fchips .cond-chip{justify-content:flex-start}
.cond-chip.active{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card))}
.cond-chip.active i{background:var(--brand)}
.shop-main{min-width:0}
.shop-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.shop-top h1{font-size:1.7rem;letter-spacing:-.02em}
.shop-top .muted{color:var(--text-mut);font-size:.9rem}
.shop-tools{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.search-box{flex:1;min-width:200px;position:relative}
.search-box input{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--text);font-size:.92rem}
.search-box input:focus{outline:none;border-color:var(--brand)}
.search-box svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-mut)}
.sortsel{padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-size:.9rem}
.filters-toggle{display:none}
@media (max-width:820px){
  .shop{grid-template-columns:1fr;gap:16px}
  .shop-side{display:block;position:fixed;inset:0;z-index:200;background:var(--bg);border:none;border-radius:0;
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.25,1,.5,1);overflow-y:auto;padding:0 20px 96px;max-width:none}
  .shop-side.open{transform:none}
  .filters-toggle{display:inline-flex}
}

/* ---------- Product detail (PDP) ---------- */
.crumb{padding:22px 0 6px;font-size:.85rem;color:var(--text-mut)}
.crumb a{color:var(--text-soft)}.crumb a:hover{color:var(--brand)}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:20px 0 40px;align-items:start}
.pdp-gallery{position:sticky;top:74px}
.pdp-main{background:#fff;border-radius:var(--radius-lg);padding:34px;display:grid;place-items:center;box-shadow:var(--shadow)}
.pdp-main img{width:100%;max-height:460px;object-fit:contain}
.pdp-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.pdp-thumb{width:70px;height:70px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:6px;overflow:hidden}
.pdp-thumb.active{border-color:var(--brand);border-width:2px}
.pdp-thumb img{width:100%;height:100%;object-fit:contain}
.pdp-info .cond{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand)}
.pdp-info h1{font-size:clamp(1.6rem,3.5vw,2.3rem);letter-spacing:-.02em;margin:6px 0 14px;line-height:1.1}
.pdp-price{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.pdp-price .now{font-size:2rem;font-weight:700}
.pdp-price .was{font-size:1.1rem;color:var(--text-mut);text-decoration:line-through}
.pdp-price .pct{background:var(--sale-bg);color:var(--sale);font-size:.85rem;font-weight:700;padding:3px 9px;border-radius:980px}
.pdp-cuotas{display:inline-block;background:var(--accent-bg,var(--bg-soft));color:var(--brand);border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;font-size:.85rem;margin-bottom:14px}
.pdp-cuotas b{font-weight:700}
.pdp-stock{font-size:.9rem;font-weight:600;margin-bottom:16px}
.pdp-stock.ok{color:var(--ok)}.pdp-stock.no{color:var(--warn)}
.pdp-lead{color:var(--text-soft);margin-bottom:16px;line-height:1.6}
.pdp-attr{margin-bottom:10px;font-size:.92rem}
.pdp-attr b{color:var(--text-soft)}
.pdp-attr .opt{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:3px 10px;margin:3px 4px 0 0;font-size:.84rem}
.pdp-cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 20px}
.pdp-cta .btn-wa{flex:1;min-width:220px}
.pdp-trust{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 0 0;border-top:1px solid var(--line)}
.pdp-trust li{font-size:.9rem;color:var(--text-soft);padding-left:22px;position:relative}
.pdp-trust li::before{content:"";position:absolute;left:2px;top:.35em;width:6px;height:10px;
  border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pdp-desc-sec{padding:20px 0 10px;max-width:820px}
.pdp-desc-sec h2{font-size:1.4rem;margin-bottom:12px}
.pdp-desc{color:var(--text-soft);line-height:1.7}
.pdp-desc img{border-radius:12px;margin:12px 0}
@media (max-width:820px){.pdp{grid-template-columns:1fr;gap:24px}.pdp-gallery{position:static}.pdp-trust{grid-template-columns:1fr}}
.pdp-sticky{display:none}
@media (max-width:820px){
  .pdp-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--card);
    border-top:1px solid var(--line);padding:10px 14px;gap:12px;align-items:center;
    box-shadow:0 -8px 24px -12px rgba(0,0,0,.35)}
  .pdp-sticky-info{display:flex;flex-direction:column;line-height:1.15;flex-shrink:0}
  .pdp-sticky-info b{font-size:1.1rem;font-weight:700}
  .pdp-sticky-info span{font-size:.7rem;color:var(--text-mut)}
  .pdp-sticky .btn-wa{flex:1;justify-content:center;padding:12px}
  body.is-pdp{padding-bottom:70px}
  body.is-pdp .wa-float{display:none}
}

/* ---------- Banner / CTA strip ---------- */
.cta-strip{background:linear-gradient(105deg,#0071e3,#5e5ce6);color:#fff;border-radius:var(--radius-lg);
  padding:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-strip h2{font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.02em}
.cta-strip p{opacity:.9;margin-top:6px;max-width:480px}
.cta-strip .btn-primary{background:#fff;color:#0071e3}

/* ---------- Legal pages ---------- */
.legal{max-width:820px;margin:0 auto;padding:44px 0 64px}
.legal h1{font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:-.02em;margin-bottom:6px}
.legal .legal-meta{color:var(--text-mut);font-size:.85rem;margin-bottom:26px}
.legal h2{font-size:1.15rem;margin:28px 0 10px}
.legal p,.legal li{color:var(--text-soft);line-height:1.7;margin-bottom:10px}
.legal ul{padding-left:22px;margin-bottom:12px}
.legal a{color:var(--brand)}
.legal b{color:var(--text)}

/* ---------- Lifestyle band ---------- */
.life-band{position:relative;min-height:440px;display:grid;place-items:center;text-align:center;color:#fff;
  background-image:linear-gradient(rgba(8,12,20,.5),rgba(8,12,20,.68)),var(--img);
  background-size:cover;background-position:center;margin:0}
.life-inner{max-width:660px;padding:70px 24px}
.life-inner .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7dd3fc}
.life-inner h2{font-size:clamp(1.9rem,4.4vw,2.8rem);font-weight:700;letter-spacing:-.02em;color:#fff;text-wrap:balance;margin-top:10px}
.life-inner p{font-size:1.12rem;margin:16px auto 28px;color:rgba(255,255,255,.9);max-width:520px}
.life-band .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(6px)}
.life-band .btn-ghost:hover{background:rgba(255,255,255,.2)}

/* ---------- Pagos / Financiamiento ---------- */
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pay-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;display:flex;flex-direction:column;gap:12px;position:relative;transition:box-shadow .15s}
.pay-card:hover{box-shadow:var(--shadow)}
.pay-logo{height:36px;width:auto;object-fit:contain;align-self:flex-start;max-width:170px}
.pay-logo-box{height:auto;max-height:60px;border-radius:10px;max-width:190px}
.pay-badge{position:absolute;top:16px;right:16px;font-size:.66rem;font-weight:700;padding:4px 10px;
  border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.pay-badge.ok{background:var(--ok-bg);color:var(--ok)}
.pay-badge.soon{background:var(--bg-soft);color:var(--text-mut);border:1px solid var(--line)}
.pay-card p{color:var(--text-soft);font-size:.88rem;line-height:1.55;margin:0}
.pay-card p b{color:var(--text);font-weight:600}
.pay-methods{font-size:1.02rem;font-weight:600;margin-top:4px}
.pdp-fin{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:.86rem;color:var(--text-soft);margin:14px 0;display:flex;gap:10px;align-items:center}
.pdp-fin img{height:20px;width:auto}
@media(max-width:820px){.pay-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:820px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 18px}
.faq summary{list-style:none;cursor:pointer;padding:15px 0;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--text-mut);transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 16px;color:var(--text-soft);font-size:.94rem}

/* ---------- Footer ---------- */
.ft{background:var(--bg-soft);border-top:1px solid var(--line);margin-top:40px}
.ft-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding:52px 22px 30px;max-width:var(--maxw);margin:0 auto}
.ft h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mut);margin-bottom:14px}
.ft a{display:block;color:var(--text-soft);font-size:.9rem;padding:5px 0}
.ft a:hover{color:var(--text)}
.ft-brand p{color:var(--text-soft);font-size:.9rem;margin:12px 0;max-width:280px}
.ft-soc{display:flex;gap:10px}
.ft-soc a{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--text-soft)}
.ft-soc a:hover{color:var(--brand);border-color:var(--brand)}
.ft-bot{border-top:1px solid var(--line);padding:18px 22px;text-align:center;color:var(--text-mut);font-size:.82rem;max-width:var(--maxw);margin:0 auto}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed;bottom:22px;right:22px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform .15s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;color:#fff}

/* ---------- Mobile menu ---------- */
.mmenu{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);visibility:hidden}
.mmenu.open{transform:none;visibility:visible}
.mmenu-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
.mmenu-logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.05rem}
.mmenu-logo img{height:28px}
.mmenu-x{font-size:2rem;line-height:1;color:var(--text-soft);width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.mmenu-x:hover{background:var(--bg-soft);color:var(--text)}
.mmenu-nav{display:flex;flex-direction:column;padding:8px 0;overflow-y:auto}
.mmenu-nav a{padding:16px 24px;font-size:1.12rem;font-weight:500;border-bottom:1px solid var(--line-soft)}
.mmenu-nav a:active{background:var(--bg-soft)}

/* ---------- Lightbox ---------- */
.lbox{position:fixed;inset:0;z-index:220;background:rgba(0,0,0,.92);display:grid;place-items:center;
  padding:28px;opacity:0;visibility:hidden;transition:opacity .2s;cursor:zoom-out}
.lbox.open{opacity:1;visibility:visible}
.lbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:14px;background:#fff}
.lbox-x{position:fixed;top:16px;right:20px;font-size:2.6rem;line-height:1;color:#fff;width:48px;height:48px}

/* ---------- Search overlay ---------- */
.srch{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .2s}
.srch.open{opacity:1;visibility:visible}
.srch-box{background:var(--card);max-width:620px;margin:8vh auto 0;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.srch-in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.srch-in svg{width:20px;height:20px;color:var(--text-mut);flex:none}
.srch-in input{flex:1;border:none;background:none;font-size:1.05rem;color:var(--text);outline:none;min-width:0}
.srch-x{font-size:1.7rem;line-height:1;color:var(--text-mut);width:36px;height:36px;border-radius:50%;flex:none}
.srch-x:hover{background:var(--bg-soft);color:var(--text)}
.srch-res{max-height:60vh;overflow-y:auto}
.srch-item{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.srch-item:hover{background:var(--bg-soft)}
.srch-item img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:8px;flex:none}
.srch-item b{display:block;font-size:.95rem}
.srch-item span{font-size:.85rem;color:var(--brand);font-weight:600}
.srch-empty{padding:26px;text-align:center;color:var(--text-mut)}

/* ---------- Scroll reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.rv.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- Skeleton ---------- */
.skel{background:linear-gradient(90deg,var(--bg-soft),var(--line-soft),var(--bg-soft));
  background-size:200% 100%;animation:sk 1.3s infinite;border-radius:var(--radius)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-media{order:-1;min-height:220px}
  .trust-in{grid-template-columns:repeat(2,1fr)}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav{display:none}
  .burger{display:grid}
  .hdr-act .btn-wa{display:none}
  .hdr-in{height:62px;gap:10px}
  .logo img{height:44px}
  .logo span{font-size:1.05rem}
  .sec{padding:44px 0}
  .cta-strip{padding:30px}
  .ft-in{grid-template-columns:1fr 1fr;gap:20px}
  .ft-brand{grid-column:1/-1}
  /* Grid de productos: SIEMPRE 2 columnas en móvil */
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .rec-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .models{grid-template-columns:repeat(2,1fr);gap:10px}
  .card-p .ph{padding:12px}
  .card-p .bd{padding:11px 12px 14px;gap:4px}
  .card-p h3{font-size:.88rem;line-height:1.2}
  .card-p .cond{font-size:.64rem}
  .card-p .price .now{font-size:1rem}
  .card-p .price .was{font-size:.75rem}
  .card-p .price .from{font-size:.6rem}
  .card-p .cuotas{font-size:.68rem}
  .card-p .row{flex-direction:column;gap:6px;margin-top:8px}
  .card-p .row .btn{width:100%;padding:9px 10px;font-size:.8rem}
  .sec-h h2{font-size:1.35rem}
}
@media (max-width:360px){
  .card-p .bd{padding:10px}
  .card-p h3{font-size:.82rem}
}

/* ---------- Libro de Reclamaciones ---------- */
.legal-meta{color:var(--text-mut);font-size:.9rem;margin-top:2px}
.rec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.rec-badge{background:var(--bg-soft);border:1px solid var(--line);color:var(--text-mut);
  font-size:.78rem;font-weight:600;padding:8px 12px;border-radius:999px;white-space:nowrap}
.rec-form h2{font-size:1.02rem;margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.rec-form label{display:flex;flex-direction:column;gap:6px;font-size:.86rem;font-weight:600;color:var(--text)}
.rec-form label.col2{grid-column:1/-1}
.rec-form input,.rec-form select,.rec-form textarea{font:inherit;font-weight:500;color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px;width:100%}
.rec-form input:focus,.rec-form select:focus,.rec-form textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.rec-form textarea{resize:vertical;min-height:80px}
.rec-form .btn-lg{margin-top:22px}
.rec-note{font-size:.82rem;color:var(--text-mut);margin-top:14px;line-height:1.6}
.rec-ok{background:color-mix(in srgb,var(--brand) 8%,var(--card));border:1px solid var(--line);
  border-radius:16px;padding:26px;margin-top:10px}
.rec-ok p{margin:8px 0}
.rec-code{display:inline-block;background:var(--text);color:var(--bg);font-weight:700;
  letter-spacing:.5px;padding:4px 12px;border-radius:8px;font-size:1.05rem}
.rec-err{background:#fee;border:1px solid #f2b8b8;color:#b3261e;padding:12px 16px;border-radius:12px;margin:12px 0;font-size:.9rem}
.ft-legalinfo{font-size:.8rem;color:var(--text-mut);line-height:1.6;margin-top:10px}
@media (max-width:640px){.rec-grid{grid-template-columns:1fr}}

/* ---------- "Desde" + selector de capacidad ---------- */
.card-p .price .from,.pdp-price .from{font-size:.72rem;font-weight:600;color:var(--text-mut);
  text-transform:uppercase;letter-spacing:.4px;margin-right:2px}
.pdp-price .from{display:block;margin-bottom:2px}
.pdp-caps{margin:18px 0 4px}
.pdp-caps-lbl{display:block;font-size:.82rem;font-weight:600;color:var(--text-mut);margin-bottom:9px}
.cap-row{display:flex;flex-wrap:wrap;gap:10px}
.cap-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:9px 15px;
  font:inherit;color:var(--text);transition:border-color .15s,box-shadow .15s,background .15s;min-width:86px}
.cap-btn b{font-size:.95rem;font-weight:700}
.cap-btn .cap-price{font-size:.78rem;color:var(--text-mut);font-weight:600}
.cap-btn:hover{border-color:var(--brand)}
.cap-btn.active{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.cap-btn.active .cap-price{color:var(--brand)}

/* ---------- Carrusel 3D de TikTok (hero) ---------- */
.hero-media{min-height:560px}
.hero-badge{z-index:25}
.tt-carousel{position:relative;width:100%;height:540px;display:flex;align-items:center;justify-content:center;
  perspective:1100px;overflow:hidden}
.tt-track{position:relative;width:300px;height:520px;transform-style:preserve-3d}
.tt-slide{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#000;opacity:0;z-index:0;
  pointer-events:none;border:2px solid transparent;box-shadow:0 20px 50px -12px rgba(0,0,0,.45);
  transition:transform .6s cubic-bezier(.25,1,.5,1),opacity .6s,filter .6s,box-shadow .3s}
.tt-slide iframe{width:100%;height:100%;border:none;display:block;background:#000}
.tt-slide.active{opacity:1;z-index:10;pointer-events:auto;border-color:var(--brand);
  box-shadow:0 0 44px rgba(0,113,227,.32)}
.tt-loader{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:#111;
  font-size:.82rem;letter-spacing:.5px;z-index:-1}
.tt-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);color:var(--text);font-size:1.15rem;cursor:pointer;z-index:30;
  display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .2s,background .2s}
.tt-nav:hover{background:var(--card);transform:translateY(-50%) scale(1.08)}
.tt-nav.prev{left:0}.tt-nav.next{right:0}
.tt-handle{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);z-index:20;
  display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--text-soft);
  background:var(--card);border:1px solid var(--line);padding:6px 13px;border-radius:999px;box-shadow:var(--shadow)}
.tt-handle:hover{color:var(--text)}
@media (max-width:900px){
  .hero-media{min-height:520px;order:-1}
  .tt-carousel{height:500px}
  .tt-track{width:272px;height:480px}
}
@media (max-width:420px){
  .tt-track{width:240px;height:426px}
  .tt-nav{width:38px;height:38px;font-size:1rem}
}

/* ==================== E-COMMERCE UI (favoritos, carrito, cuenta, filtros) ==================== */
/* Header: iconos + badges */
.hdr-icons{display:flex;align-items:center;gap:2px}
.hdr-i{position:relative}
.hdr-badge{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:.6rem;font-weight:700;line-height:16px;text-align:center;display:none}
.hdr-badge.on{display:block}
.hdr-acc{position:relative}
.hdr-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:214px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;z-index:60;display:none}
.hdr-menu.open{display:block;animation:vtpop .16s ease}
@keyframes vtpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hdr-menu-t{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mut);padding:8px 12px 6px}
.vt-menu-i{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:.92rem;font-weight:500;color:var(--text)}
.vt-menu-i svg{width:18px;height:18px;color:var(--text-soft);flex:none}
.vt-menu-i:hover{background:var(--bg-soft)}
.vt-acc-hi{padding:8px 12px 10px;font-size:.95rem;border-bottom:1px solid var(--line-soft);margin-bottom:4px}

/* Corazon en tarjetas + boton carrito */
.fav-btn{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--card) 85%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line);display:grid;place-items:center;transition:transform .15s,background .15s}
.fav-btn svg{width:18px;height:18px;fill:none;stroke:var(--text-mut);stroke-width:2}
.fav-btn:hover{transform:scale(1.1)}
.fav-btn.on svg{fill:var(--sale);stroke:var(--sale)}
.btn-cart{gap:6px}
.btn-cart svg{width:15px;height:15px}
@media (max-width:640px){.btn-cart span{display:none}.btn-cart{flex:0 0 44px}}

/* Drawers (carrito + favoritos) */
.vt-drawer{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s}
.vt-drawer.open{opacity:1;visibility:visible}
.vt-drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);background:var(--bg);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.25,1,.5,1);box-shadow:var(--shadow-lg)}
.vt-drawer.open .vt-drawer-panel{transform:none}
.vt-drawer-h{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line)}
.vt-drawer-h h3{font-size:1.15rem}
.vt-drawer-x{width:34px;height:34px;border-radius:50%;font-size:1.5rem;color:var(--text-soft)}
.vt-drawer-x:hover{background:var(--bg-soft)}
.vt-drawer-b{flex:1;overflow-y:auto;padding:12px 20px}
.vt-drawer-f{padding:18px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.vt-drawer-f:empty{display:none}
.vt-empty{text-align:center;color:var(--text-mut);padding:50px 16px;line-height:1.7}
.vt-line{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.vt-line>img{width:56px;height:56px;object-fit:contain;background:var(--bg-soft);border-radius:10px;flex:none}
.vt-line-i{flex:1;min-width:0}
.vt-line-i b{display:block;font-size:.9rem;line-height:1.2}
.vt-line-i span{font-size:.78rem;color:var(--text-mut)}
.vt-line-p{font-weight:700;color:var(--brand);font-size:.9rem;margin-top:2px}
.vt-line-q{display:flex;align-items:center;gap:6px;background:var(--bg-soft);border-radius:999px;padding:3px}
.vt-line-q button{width:26px;height:26px;border-radius:50%;font-size:1rem;font-weight:700;color:var(--text)}
.vt-line-q button:hover{background:var(--card)}
.vt-line-q span{min-width:16px;text-align:center;font-weight:600;font-size:.88rem}
.vt-line-x{color:var(--text-mut);font-size:1.3rem;width:28px;height:28px;flex:none}
.vt-line-x:hover{color:var(--sale)}
.vt-cart-total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.02rem}
.vt-cart-total b{font-size:1.35rem}
.vt-cart-clear{color:var(--text-mut);font-size:.85rem;text-decoration:underline;align-self:center}
.vt-fav-card{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.vt-fav-card>a img{width:56px;height:56px;object-fit:contain;background:var(--bg-soft);border-radius:10px}
.vt-fav-card>div{flex:1}
.vt-fav-card b{font-size:.9rem}

/* Modal de auth */
.vt-modal{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:20px}
.vt-modal.open{display:flex;animation:vtfade .2s}
@keyframes vtfade{from{opacity:0}to{opacity:1}}
.vt-modal-box{background:var(--bg);border-radius:20px;box-shadow:var(--shadow-lg);width:min(400px,100%);padding:30px;position:relative}
.vt-modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;font-size:1.4rem;color:var(--text-soft)}
.vt-modal-box h3{font-size:1.35rem;margin-bottom:18px}
.vt-auth-form{display:flex;flex-direction:column;gap:12px}
.vt-auth-form label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:600}
.vt-auth-form input{font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--text)}
.vt-auth-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.vt-auth-err{background:var(--sale-bg);color:var(--sale);font-size:.82rem;padding:9px 12px;border-radius:10px}
.vt-auth-alt{text-align:center;font-size:.85rem;color:var(--text-mut);margin-top:14px}
.vt-auth-alt a{color:var(--brand);font-weight:600}

/* Toast */
.vt-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:300;
  background:var(--text);color:var(--bg);font-size:.88rem;font-weight:600;padding:12px 20px;border-radius:999px;
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;max-width:90vw;text-align:center}
.vt-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* Mega-menu */
.mega{position:absolute;top:calc(100% - 6px);left:50%;width:min(560px,92vw);
  background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:blur(26px) saturate(165%);-webkit-backdrop-filter:blur(26px) saturate(165%);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translate(-50%,-8px) scale(.98);transform-origin:top center;
  transition:opacity .18s,transform .2s cubic-bezier(.2,.7,.3,1),visibility .18s;z-index:60}
.mega.open{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.mega-in{padding:18px;display:grid;grid-template-columns:1.15fr .8fr 1fr;gap:14px}
.mega-col h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mut);margin-bottom:12px}
.mega-col>a{display:block;padding:7px 0;font-weight:600;color:var(--text);font-size:.95rem}
.mega-col>a:hover{color:var(--brand)}
.mega-col>a small{display:block;font-weight:400;font-size:.8rem;color:var(--text-mut)}
.mega-feat{background:var(--bg-soft);border-radius:14px;padding:18px}
.mega-cta{color:var(--brand)!important}
.mega-note{font-size:.85rem;color:var(--text-mut)!important}
@media (max-width:640px){.mega{display:none!important}}

/* Filtros facetados */
.fopts{display:flex;flex-direction:column;gap:2px}
.fopt{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;cursor:pointer;font-size:.9rem;transition:background .12s}
.fopt:hover{background:var(--bg-soft)}
.fopt input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;flex:none}
.fopt span{flex:1}
.fopt i{font-style:normal;font-size:.8rem;color:var(--text-mut)}
.fopt.on{font-weight:600}
.fopt.dim{opacity:.42}
.cap-pills{display:flex;flex-wrap:wrap;gap:8px}
.cap-pill{padding:7px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:.85rem;font-weight:600;color:var(--text);cursor:pointer}
.cap-pill:hover{border-color:var(--brand)}
.cap-pill.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card));color:var(--brand)}
.price-inputs{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.price-inputs input{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text)}
.price-inputs span{color:var(--text-mut)}
.price-presets{display:flex;flex-direction:column;gap:8px}
.price-preset{padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:.82rem;font-weight:500;color:var(--text);cursor:pointer;text-align:left;width:100%}
.price-preset:hover{border-color:var(--brand)}
.price-preset.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card));color:var(--brand);font-weight:600}
.fchips-active{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.fchips-active:empty{display:none}
.achip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:999px;font-size:.82rem;font-weight:600;color:var(--text)}
.achip b{color:var(--text-mut);font-weight:700}
.achip:hover b{color:var(--sale)}
.achip.clear{background:transparent;border-color:transparent;color:var(--brand);text-decoration:underline}
.shop-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-mut)}
.shop-empty b{font-size:1.2rem;color:var(--text);display:block;margin-bottom:6px}
.shop-empty p{margin-bottom:18px}
.fhead{display:none}
.fbtns{display:none}
@media (max-width:820px){
  .fhead{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg);
    padding:18px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px;z-index:2}
  .fhead h3{font-size:1.2rem}
  .fclose{width:34px;height:34px;font-size:1.5rem;color:var(--text-soft)}
  .fbtns{display:flex;gap:10px;position:fixed;bottom:0;left:0;right:0;padding:14px 20px;background:var(--bg);
    border-top:1px solid var(--line);z-index:3}
  .fbtns .btn{flex:1}
}

/* ---------- PDP: highlights, pagos, favorito ---------- */
.pdp-highlights{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pdp-highlights li{position:relative;padding-left:26px;font-size:.9rem;color:var(--text-soft);line-height:1.4}
.pdp-highlights li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;
  background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a9e57' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.pdp-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pdp-cta .btn-wa{flex:1 1 200px}
.pdp-cta #pdpAddCart{flex:1 1 160px}
.pdp-fav{flex:0 0 52px;width:52px;padding:0 !important}
.pdp-fav svg{width:22px;height:22px;fill:none;stroke:var(--text-mut);stroke-width:2}
.pdp-fav.on svg{fill:var(--sale);stroke:var(--sale)}
.pdp-pay{margin-top:20px;padding:16px;background:var(--bg-soft);border-radius:14px}
.pdp-pay-t{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mut);margin-bottom:10px}
.pdp-pay-methods{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.pdp-pay-methods span{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:.78rem;font-weight:600}
.pdp-pay-secure{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;color:var(--text-soft);line-height:1.45}
.pdp-pay-secure svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:1px}

.nav a.active{color:var(--text);font-weight:600;background:var(--bg-soft)}

/* ---------- Menú cuenta (separador) + página Mi cuenta ---------- */
.vt-menu-sep{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:12px !important}
.cuenta{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start;padding:34px 0 60px}
.cuenta-side{position:sticky;top:90px;display:flex;flex-direction:column;gap:6px}
.cuenta-user{display:flex;align-items:center;gap:12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
.cuenta-av{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:1.2rem;display:grid;place-items:center;flex:none}
.cuenta-user b{display:block;font-size:.95rem;line-height:1.2}
.cuenta-user span{font-size:.8rem;color:var(--text-mut);word-break:break-all}
.cuenta-tabs{display:flex;flex-direction:column;gap:2px}
.cuenta-tabs a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;font-size:.92rem;font-weight:500;color:var(--text-soft)}
.cuenta-tabs a svg{width:18px;height:18px;flex:none}
.cuenta-tabs a:hover{background:var(--bg-soft);color:var(--text)}
.cuenta-tabs a.active{background:color-mix(in srgb,var(--brand) 10%,var(--card));color:var(--brand);font-weight:600}
.cuenta-count{margin-left:auto;background:var(--brand);color:#fff;font-style:normal;font-size:.7rem;font-weight:700;min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.cuenta-main{min-width:0}
.cuenta-sec{display:none}
.cuenta-sec.active{display:block;animation:vtfade .25s}
.cuenta-sec>h1{font-size:1.6rem;letter-spacing:-.02em;margin-bottom:6px}
.cuenta-lead{color:var(--text-soft);margin-bottom:20px}
.cuenta-form{display:flex;flex-direction:column;gap:14px;max-width:440px}
.cuenta-form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600}
.cuenta-form input{font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--text)}
.cuenta-form input:disabled{background:var(--bg-soft);color:var(--text-mut)}
.cuenta-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.cuenta-err{background:var(--sale-bg);color:var(--sale);font-size:.85rem;padding:9px 12px;border-radius:10px}
.cuenta-ok{background:var(--ok-bg);color:var(--ok);font-size:.85rem;padding:9px 12px;border-radius:10px}
.cuenta-empty{text-align:center;padding:50px 20px;background:var(--card);border:1px solid var(--line);border-radius:16px;color:var(--text-mut)}
.cuenta-empty b{display:block;font-size:1.1rem;color:var(--text);margin-bottom:6px}
.cuenta-empty p{margin-bottom:16px}
.cuenta-orders{display:flex;flex-direction:column;gap:12px}
.cuenta-order{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card)}
.cuenta-order-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cuenta-badge{background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:600;text-transform:capitalize}
.cuenta-order-b{font-size:.85rem;color:var(--text-mut)}
.cuenta-guest{max-width:460px;margin:60px auto;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:44px 30px}
.cuenta-guest h1{font-size:1.5rem;margin:16px 0 8px}
.cuenta-guest p{color:var(--text-soft);margin-bottom:24px}
.cuenta-guest-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:820px){.cuenta{grid-template-columns:1fr}.cuenta-side{position:static}.cuenta-tabs{flex-direction:row;overflow-x:auto}.cuenta-tabs a{white-space:nowrap}}

/* ---------- Reseñas en ficha ---------- */
.pdp-reviews{padding:30px 0;border-top:1px solid var(--line)}
.pdp-reviews h2{font-size:1.4rem;margin-bottom:18px}
.rev-summary{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.rev-summary>b{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.rev-stars{color:#e0a52a;letter-spacing:2px;font-size:1.05rem}
.rev-count{color:var(--text-mut);font-size:.9rem}
.rev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.rev{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.rev-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:10px}
.rev-h b{font-size:.95rem}
.rev p{color:var(--text-soft);font-size:.9rem;line-height:1.5;margin:0}
/* ---------- Cupón en carrito ---------- */
.vt-coupon{display:flex;gap:8px}
.vt-coupon input{flex:1;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--text);text-transform:uppercase}
.vt-coupon input:focus{outline:none;border-color:var(--brand)}
.vt-coupon-msg{font-size:.8rem}
.vt-coupon-msg.err{color:var(--sale)}
.vt-cart-disc{color:var(--ok);font-size:.9rem}

/* ---------- Color: swatches en ficha + filtro ---------- */
.pdp-colors{margin:16px 0 4px}
.swatch-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.swatch{width:30px;height:30px;border-radius:50%;background:var(--sw);border:1px solid var(--line);cursor:pointer;transition:transform .12s;box-shadow:inset 0 0 0 2px var(--card)}
.swatch:hover{transform:scale(1.1)}
.swatch.active{box-shadow:inset 0 0 0 2px var(--card),0 0 0 2px var(--brand)}
.pdp-igv{font-size:.78rem;color:var(--text-mut);margin-top:6px}
.col-pills{display:flex;flex-wrap:wrap;gap:8px}
.col-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;border:1.5px solid var(--line);border-radius:999px;font-size:.82rem;font-weight:600;color:var(--text);cursor:pointer}
.col-pill:hover{border-color:var(--brand)}
.col-pill.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card));color:var(--brand)}
.col-dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);flex:none}

/* ==================== FIX responsive móvil (anti-desbordamiento) ==================== */
html,body{overflow-x:hidden;max-width:100%}
.hero-in>div,.shop-main,.card-p,.card-p .bd{min-width:0}
@media (max-width:640px){
  /* grids que encogen de verdad */
  .grid,.rec-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .models{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card-p,.card-p .bd,.card-p .ph{min-width:0}
  .card-p h3{overflow-wrap:anywhere;font-size:.86rem}
  .card-p .price{flex-wrap:wrap;row-gap:0;align-items:baseline}
  .card-p .cuotas{white-space:normal}
  .card-p .row{flex-direction:column;gap:6px}
  .card-p .row .btn{width:100%}
  .btn-cart{flex:none}
  .btn-cart span{display:inline}       /* muestra "Añadir" (el ícono solo se veía vacío) */
  /* hero: dejar quebrar el título y achicar */
  .hero h1{font-size:clamp(1.7rem,7vw,2rem)}
  .hero h1 br{display:none}
  .hero p{font-size:1rem}
  .hero-in{padding:34px 18px 30px}
  /* header: caben los iconos */
  .hdr-in{gap:6px}
  .hdr-act{gap:2px}
  .hdr-icons{gap:0}
  .icon-btn{width:36px;height:36px}
  #themeBtn{display:none}               /* tema sigue el sistema; se libera espacio */
  /* herramientas de tienda apiladas */
  .shop-tools{flex-direction:column;align-items:stretch}
  .shop-tools .search-box,.shop-tools .sortsel{width:100%}
  .trust-in{gap:12px}
  .life-inner{padding:0 18px}
}
@media (max-width:380px){
  .card-p .cond{font-size:.62rem}
  .card-p .price .now{font-size:.95rem}
}

/* datos del invitado en checkout */
.vt-lead{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--bg-soft);border-radius:12px}
.vt-lead-t{font-size:.78rem;font-weight:600;color:var(--text-soft)}
.vt-lead input{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text)}
.vt-lead input:focus{outline:none;border-color:var(--brand)}

/* ==================== Card: foto protagonista (móvil) ==================== */
@media (max-width:640px){
  .card-p .ph{padding:8px}                       /* menos padding = producto más grande */
  .card-p .bd{padding:10px 11px 12px;gap:3px}
  .card-p .cond{font-size:.6rem}
  .card-p h3{font-size:.84rem;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card-p .price{gap:5px;margin-top:4px}
  .card-p .price .now{font-size:.98rem}
  .card-p .price .was{font-size:.72rem}
  .card-p .price .from{font-size:.58rem}
  .card-p .cuotas{font-size:.66rem;margin-top:0}
  .card-p .row{flex-direction:row;gap:6px;margin-top:8px}   /* una sola fila, no apilados */
  .card-p .row .btn-wa{flex:1;padding:9px 8px;font-size:.82rem}
  .card-p .btn-cart{flex:0 0 42px;width:42px;padding:0}
  .card-p .btn-cart span{display:none}            /* solo el ícono del carrito */
  .card-p .btn-cart svg{width:17px;height:17px}
}

/* ==================== Card: foto dominante en móvil (v11) ==================== */
@media (max-width:640px){
  .card-p .cuotas{display:none}                 /* secundario: se ve en la ficha */
  .card-p .price .was{display:none}             /* el badge -% ya comunica el descuento */
  .card-p .price{flex-wrap:nowrap;margin-top:3px}
  .card-p .bd{padding:9px 11px 11px;gap:2px}
  .card-p .row{margin-top:9px}
}

/* ==================== Card: precio antes+ahora en 1 línea (v12) ==================== */
@media (max-width:640px){
  .card-p .price{flex-wrap:nowrap;gap:5px;white-space:nowrap;align-items:baseline;margin-top:3px}
  .card-p .price .from{display:inline;font-size:.56rem}
  .card-p .price .now{font-size:.95rem}
  .card-p .price .was{display:inline;font-size:.7rem}   /* precio "antes" tachado, se mantiene */
}

/* ==================== Sello Libro de Reclamaciones (footer) ==================== */
.ft-libro{display:flex;justify-content:center;padding:4px 22px 18px}
.libro-badge{display:inline-flex;align-items:center;gap:11px;background:#fff;border:2px solid #0071e3;
  border-radius:12px;padding:9px 16px;box-shadow:0 3px 12px rgba(0,0,0,.1);transition:transform .15s,border-color .15s}
.libro-badge svg{width:30px;height:30px;color:#0071e3;flex:none}
.libro-badge span{display:flex;flex-direction:column;line-height:1.14;color:#0a3d91;font-size:.8rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;text-align:left}
.libro-badge span b{font-weight:800}
.libro-badge:hover{border-color:#0a3d91;transform:translateY(-1px)}

/* ==================== Diseño premium: aurora 3D + glass + fondos suaves ==================== */
/* Fondo 3D animado del hero (canvas aurora, detrás del contenido) */
.hero{isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  filter:blur(22px) saturate(125%);opacity:.9}
.hero .hero-in{position:relative;z-index:1}
:root[data-theme="dark"] .hero-bg{opacity:.7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-bg{opacity:.7}}

/* Glassmorphism (frost) en superficies flotantes */
.hdr{background:color-mix(in srgb,var(--bg) 66%,transparent);
  backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px)}
.hero-badge,.hero-fin,.tt-handle{
  background:color-mix(in srgb,var(--card) 58%,transparent) !important;
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid color-mix(in srgb,#ffffff 34%,var(--line))}
.tt-nav{background:color-mix(in srgb,var(--card) 62%,transparent);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%)}
.hdr-menu,.mega,.srch-box,.mmenu,.vt-drawer-panel{
  background:color-mix(in srgb,var(--card) 82%,transparent) !important;
  backdrop-filter:blur(26px) saturate(165%);-webkit-backdrop-filter:blur(26px) saturate(165%)}

/* Fondos muy suaves intercalados (glow de marca, apenas perceptible) */
.sec-tint{position:relative;background:var(--bg-soft);overflow:hidden}
.sec-tint::before{content:"";position:absolute;width:min(700px,72vw);height:min(700px,72vw);
  right:-12%;top:-26%;pointer-events:none;z-index:0;filter:blur(46px);
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 13%,transparent),transparent 70%)}
.sec-tint::after{content:"";position:absolute;width:min(560px,62vw);height:min(560px,62vw);
  left:-14%;bottom:-30%;pointer-events:none;z-index:0;filter:blur(52px);
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-2) 11%,transparent),transparent 70%)}
.sec-tint>.wrap{position:relative;z-index:1}

/* ==================== Navbar píldora glass flotante (v16) ==================== */
.hdr-in{position:relative}
.nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;gap:3px;padding:5px;
  background:color-mix(in srgb,var(--card) 52%,transparent);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid color-mix(in srgb,#ffffff 30%,var(--line));border-radius:999px;
  box-shadow:0 12px 36px -18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5)}
.nav a{padding:9px 17px;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--text-soft);
  transition:color .15s,background .15s;white-space:nowrap;display:inline-flex;align-items:center}
.nav a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.nav a.active{color:#fff;background:var(--brand);
  box-shadow:0 5px 16px -5px color-mix(in srgb,var(--brand) 70%,transparent)}
.nav a[data-mega]::after{content:"";width:6px;height:6px;margin-left:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55}
/* la píldora solo cuando hay espacio; abajo, menú hamburguesa */
@media (max-width:1180px){ .hdr-act .btn-wa{display:none} }
@media (max-width:900px){ .nav{display:none} .burger{display:grid} }

/* ==================== Fondo rico del primer bloque (grid + glow) ==================== */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--brand) 7%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--brand) 7%,transparent) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(135% 105% at 50% 0%,#000 22%,transparent 72%);
  mask-image:radial-gradient(135% 105% at 50% 0%,#000 22%,transparent 72%)}
:root[data-theme="dark"] .hero::before{background-image:
  linear-gradient(color-mix(in srgb,var(--brand-ink) 12%,transparent) 1px,transparent 1px),
  linear-gradient(90deg,color-mix(in srgb,var(--brand-ink) 12%,transparent) 1px,transparent 1px)}

/* ==================== Coherencia y detalle (premium) ==================== */
/* Tarjetas de producto: elevación fina + borde de marca al hover */
.card-p{transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s}
.card-p:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(2,10,40,.32);
  border-color:color-mix(in srgb,var(--brand) 32%,var(--line))}
.card-p .ph img{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.card-p:hover .ph img{transform:scale(1.045)}
.fav-btn{transition:transform .15s,background .15s,color .15s}
/* Tarjetas de modelo */
.model-card{transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s}
.model-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -24px rgba(2,10,40,.3);
  border-color:color-mix(in srgb,var(--brand) 28%,var(--line))}
/* Botones con profundidad sutil y press */
.btn-primary{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--brand) 60%,transparent)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-wa{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--wa) 60%,transparent)}
.btn-lg:hover{transform:translateY(-1px)}
/* Foco visible coherente (accesibilidad + acabado) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.icon-btn:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:10px}
/* Íconos del header un poco más glass */
.icon-btn:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.hdr-badge{box-shadow:0 2px 6px -1px color-mix(in srgb,var(--brand) 60%,transparent)}
/* Chips de filtro y cápsulas: transición suave */
.cond-chip,.cap-pill,.col-pill,.price-preset,.achip{transition:border-color .15s,background .15s,color .15s,transform .12s}
.cond-chip:active,.cap-pill:active,.col-pill:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .card-p:hover,.model-card:hover,.btn-primary:hover,.btn-lg:hover{transform:none}
  .card-p:hover .ph img{transform:none}
}

/* ==================== Sello Libro de Reclamaciones dentro de "Legal" ==================== */
.ft-libro{display:block;padding:0;margin-top:16px}
.libro-badge{padding:8px 13px}
.libro-badge svg{width:26px;height:26px}
.libro-badge span{font-size:.72rem}

/* ==================== Fondo suave del sitio (para que el glass se aprecie) ==================== */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 45% at 88% 3%, color-mix(in srgb,var(--brand) 6%,transparent), transparent 60%),
    radial-gradient(52% 46% at 4% 26%, color-mix(in srgb,var(--brand-2) 5%,transparent), transparent 55%)}
/* aire premium arriba de la tienda / páginas interiores */
.shop{position:relative}

/* ==================== Tarjeta de producto GLASS + enriquecida ==================== */
.card-p{position:relative;background:color-mix(in srgb,var(--card) 68%,transparent);
  backdrop-filter:blur(13px) saturate(155%);-webkit-backdrop-filter:blur(13px) saturate(155%);
  border:1px solid color-mix(in srgb,#ffffff 46%,var(--line));
  box-shadow:0 10px 34px -20px rgba(2,12,45,.22), inset 0 1px 0 rgba(255,255,255,.55)}
.card-p .ph{background:color-mix(in srgb,#ffffff 52%,transparent)}
.card-p:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));
  box-shadow:0 28px 54px -26px rgba(2,12,45,.3),0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.7)}
/* cabecera de la tarjeta: condición + capacidades */
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-caps{font-size:.66rem;font-weight:700;color:var(--text-mut);background:color-mix(in srgb,var(--bg-soft) 80%,transparent);
  border:1px solid var(--line-soft);border-radius:7px;padding:2px 7px;white-space:nowrap}
/* swatches de color */
.card-sw{display:flex;align-items:center;gap:5px;margin:1px 0 2px}
.card-sw i{width:13px;height:13px;border-radius:50%;border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.card-sw span{font-size:.7rem;color:var(--text-mut);font-weight:700;margin-left:1px}
/* línea de confianza */
.card-trust{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:.68rem;color:var(--text-soft);font-weight:600;margin-top:3px}
.card-trust span{white-space:nowrap}
/* la píldora de condición hereda color de marca */
.card-p .cond{color:var(--brand)}

/* Dark: glass más oscuro */
:root[data-theme="dark"] .card-p{background:color-mix(in srgb,var(--card) 62%,transparent);
  border-color:color-mix(in srgb,#ffffff 12%,var(--line))}
:root[data-theme="dark"] .card-p .ph{background:color-mix(in srgb,#ffffff 6%,transparent)}

/* Móvil: mantener compacto y con buen rendimiento */
@media (max-width:640px){
  .card-trust,.card-caps{display:none}
  .card-sw{gap:4px}
  .card-sw i{width:11px;height:11px}
  .card-p{backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%)}
}

/* ==================== Nosotros: muro de clientes felices (glass masonry) ==================== */
.clientes-wall{columns:4;column-gap:16px;margin-top:6px}
@media (max-width:1000px){.clientes-wall{columns:3}}
@media (max-width:680px){.clientes-wall{columns:2;column-gap:12px}}
.cli-card{break-inside:avoid;margin:0 0 16px;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid color-mix(in srgb,#ffffff 46%,var(--line));
  box-shadow:0 12px 30px -20px rgba(2,12,45,.3), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.cli-card img{display:block;width:100%;height:auto;border-radius:18px}
.cli-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  background:linear-gradient(180deg,transparent 66%,rgba(3,12,40,.28));opacity:.55;transition:opacity .25s}
.cli-card:hover{transform:translateY(-6px);
  box-shadow:0 28px 54px -24px rgba(2,12,45,.42),0 0 0 1px color-mix(in srgb,var(--brand) 26%,transparent)}
.cli-card:hover::after{opacity:.85}
:root[data-theme="dark"] .cli-card{border-color:color-mix(in srgb,#ffffff 14%,var(--line))}
@media (max-width:680px){.cli-card{border-radius:14px;margin-bottom:12px}.cli-card img{border-radius:14px}}
@media (prefers-reduced-motion:reduce){.cli-card:hover{transform:none}}
.cli-note{text-align:center;margin-top:24px;color:var(--text-soft);font-size:.92rem}
.cli-note a{color:var(--brand);font-weight:600}

/* ==================== Página de resultado de pago (MercadoPago) ==================== */
.pago-card{max-width:560px;margin:0 auto;text-align:center;padding:40px 30px;border-radius:24px;
  background:color-mix(in srgb,var(--card) 74%,transparent);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid color-mix(in srgb,#ffffff 46%,var(--line));
  box-shadow:0 24px 60px -30px rgba(2,12,45,.4), inset 0 1px 0 rgba(255,255,255,.55)}
.pago-ic{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;
  font-size:2.2rem;font-weight:700;color:#fff;box-shadow:0 12px 28px -10px rgba(0,0,0,.35)}
.pago-ok  .pago-ic{background:linear-gradient(135deg,#25d366,#128c4b)}
.pago-pend .pago-ic{background:linear-gradient(135deg,#f5a623,#e07b00)}
.pago-err .pago-ic{background:linear-gradient(135deg,#ff5a5f,#d32f3a)}
.pago-card h1{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.pago-card p{color:var(--text-soft);font-size:1.02rem;line-height:1.55;max-width:440px;margin:0 auto}
.pago-ref{margin:22px auto 0;display:inline-flex;flex-direction:column;gap:2px;padding:11px 20px;border-radius:14px;
  background:color-mix(in srgb,var(--bg-soft) 80%,transparent);border:1px solid var(--line-soft);
  font-size:.72rem;color:var(--text-mut);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pago-ref b{font-size:1.05rem;color:var(--text);letter-spacing:0;text-transform:none}
.pago-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
@media (max-width:560px){.pago-card{padding:32px 20px}.pago-acts .btn{width:100%}}

/* ==================== Botón "Pagar ahora" (MercadoPago) en el carrito ==================== */
.vt-pay-mp{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  background:#009ee3;color:#fff;border:0;border-radius:14px;padding:14px 16px;font-weight:700;font-size:1rem;cursor:pointer;
  box-shadow:0 12px 26px -12px rgba(0,158,227,.7);transition:transform .15s,box-shadow .15s,filter .15s}
.vt-pay-mp:hover{transform:translateY(-1px);filter:brightness(1.04)}
.vt-pay-mp:disabled{opacity:.7;cursor:default;transform:none}
.vt-pay-mp svg{width:20px;height:20px}
.vt-pay-or{display:flex;align-items:center;gap:12px;margin:14px 0 12px;color:var(--text-mut);font-size:.78rem;font-weight:600}
.vt-pay-or::before,.vt-pay-or::after{content:"";flex:1;height:1px;background:var(--line)}
.vt-pay-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;color:var(--text-mut);font-size:.74rem}
.vt-pay-secure svg{width:13px;height:13px}

/* ==================== Modal de pago embebido (MercadoPago Payment Brick) ==================== */
.vt-pay-ov{position:fixed;inset:0;z-index:4000;display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 16px 16px;overflow-y:auto;background:rgba(6,12,30,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .2s}
.vt-pay-ov.open{opacity:1}
.vt-pay-panel{width:100%;max-width:460px;border-radius:22px;overflow:hidden;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid color-mix(in srgb,#ffffff 44%,var(--line));
  box-shadow:0 32px 70px -30px rgba(2,12,45,.55), inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateY(14px) scale(.98);transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.vt-pay-ov.open .vt-pay-panel{transform:none}
.vt-pay-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--line-soft)}
.vt-pay-head b{font-size:1.05rem;font-weight:700}
.vt-pay-x{border:0;background:transparent;font-size:1.6rem;line-height:1;color:var(--text-mut);cursor:pointer;padding:0 4px}
.vt-pay-x:hover{color:var(--text)}
.vt-pay-body{padding:18px 20px 22px}
.vt-pay-total{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px 15px;border-radius:14px;
  background:color-mix(in srgb,var(--bg-soft) 80%,transparent);border:1px solid var(--line-soft)}
.vt-pay-total span{color:var(--text-soft);font-size:.9rem}
.vt-pay-total b{margin-left:auto;font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.vt-pay-test{margin-left:8px;font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.08em;
  color:#b26b00;background:#ffe7bf;border:1px solid #ffcf87;border-radius:6px;padding:2px 6px}
.vt-pay-load{display:flex;align-items:center;justify-content:center;gap:10px;padding:30px 0;color:var(--text-mut);font-size:.9rem}
.vt-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand);animation:vtspin .7s linear infinite}
@keyframes vtspin{to{transform:rotate(360deg)}}
#vtBrickBox{min-height:20px}
:root[data-theme="dark"] .vt-pay-ov{background:rgba(2,6,18,.66)}
:root[data-theme="dark"] .vt-pay-test{color:#ffd28a;background:rgba(255,180,60,.14);border-color:rgba(255,180,60,.35)}
@media (max-width:480px){.vt-pay-ov{padding:2vh 10px 10px}.vt-pay-panel{border-radius:18px}}

/* ==================== Checkout profesional ==================== */
.co-sec{padding-top:26px}
.co-back{display:inline-block;color:var(--text-soft);font-size:.9rem;font-weight:600;margin-bottom:6px;text-decoration:none}
.co-back:hover{color:var(--brand)}
.co-title{font-size:clamp(1.5rem,3.4vw,2rem);font-weight:800;letter-spacing:-.02em;margin:2px 0 20px}
.co-empty{text-align:center;padding:60px 0;color:var(--text-soft)}
.co-empty .btn{margin-top:14px}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:22px;align-items:start}
.co-forms{display:flex;flex-direction:column;gap:16px;min-width:0}
.co-card{background:color-mix(in srgb,var(--card) 74%,transparent);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid color-mix(in srgb,#ffffff 44%,var(--line));border-radius:18px;padding:20px 20px 22px;
  box-shadow:0 12px 34px -24px rgba(2,12,45,.28), inset 0 1px 0 rgba(255,255,255,.5)}
.co-h{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.co-step{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;font-size:.9rem;font-weight:800;
  color:#fff;background:var(--brand);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--brand) 70%,transparent)}
.co-h h2{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.co-fields{display:flex;flex-direction:column;gap:13px}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.co-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.co-f label{font-size:.8rem;font-weight:600;color:var(--text-soft)}
.co-f input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  font-size:.98rem;color:var(--text);transition:border-color .15s,box-shadow .15s}
.co-f input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.co-f input.err{border-color:var(--sale)}
/* métodos de envío */
.co-ships{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.co-ship{display:flex;gap:11px;padding:14px;border-radius:14px;border:1.5px solid var(--line);cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;align-items:flex-start}
.co-ship input{margin-top:3px;accent-color:var(--brand);width:17px;height:17px;flex:0 0 auto}
.co-ship.sel{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.co-ship-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.co-ship-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.co-ship-t b{font-weight:700;font-size:.98rem}
.co-ship-t em{font-style:normal;font-weight:800;color:var(--brand)}
.co-ship-d{font-size:.82rem;color:var(--text-soft);line-height:1.4}
.co-note{margin-top:10px;font-size:.84rem;color:var(--text-soft);background:color-mix(in srgb,var(--bg-soft) 80%,transparent);
  border:1px solid var(--line-soft);border-radius:10px;padding:9px 12px;line-height:1.45}
.co-pay-lead{color:var(--text-soft);font-size:.92rem;line-height:1.5;margin-bottom:14px}
.co-brick-wrap{margin-top:4px}
.co-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.co-trust span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-soft);font-weight:600}
.co-trust svg{width:15px;height:15px;color:var(--brand)}
.co-wa{margin-top:12px;font-size:.86rem;color:var(--text-soft);text-align:center}
.co-wa a{color:var(--brand);font-weight:600}
/* resumen */
.co-aside{position:sticky;top:88px}
.co-sum{background:color-mix(in srgb,var(--card) 78%,transparent);
  backdrop-filter:blur(16px) saturate(155%);-webkit-backdrop-filter:blur(16px) saturate(155%);
  border:1px solid color-mix(in srgb,#ffffff 46%,var(--line));border-radius:18px;overflow:hidden;
  box-shadow:0 16px 40px -26px rgba(2,12,45,.32), inset 0 1px 0 rgba(255,255,255,.5)}
.co-sum-toggle{display:none;width:100%;align-items:center;gap:10px;padding:15px 18px;border:0;background:transparent;
  font-size:1rem;font-weight:700;color:var(--text);cursor:pointer}
.co-sum-toggle b{margin-left:auto;font-size:1.1rem;font-weight:800}
.co-sum-toggle svg{width:18px;height:18px;transition:transform .2s;color:var(--text-mut)}
.co-sum-toggle.open svg{transform:rotate(180deg)}
.co-sum-body{padding:18px}
.co-sum-items{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.co-it{display:flex;align-items:center;gap:11px}
.co-it img{width:46px;height:46px;border-radius:10px;object-fit:contain;background:var(--bg-soft);border:1px solid var(--line-soft);padding:3px}
.co-it-i{flex:1;min-width:0}
.co-it-i b{display:block;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-it-i span{font-size:.8rem;color:var(--text-mut)}
.co-it-p{font-weight:700;font-size:.9rem;white-space:nowrap}
.co-sum-line{display:flex;justify-content:space-between;align-items:center;font-size:.92rem;color:var(--text-soft);margin:7px 0}
.co-sum-line b{color:var(--text);font-weight:700}
.co-sum-disc b{color:var(--wa)}
.co-sum-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.co-sum-total span{font-weight:700}
.co-sum-total b{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.co-sum-pays{margin-top:12px;font-size:.74rem;color:var(--text-mut);text-align:center}
@media (max-width:900px){
  .co-grid{grid-template-columns:1fr}
  .co-aside{position:static;order:-1}
  .co-sum-toggle{display:flex}
  .co-sum-body{display:none;padding-top:0}
  .co-sum-body.open{display:block;padding-top:4px}
}
@media (max-width:560px){ .co-row{grid-template-columns:1fr} }

/* ==================== /pago: resumen del pedido ==================== */
.pago-order{margin:20px auto 0;max-width:400px;text-align:left;padding:14px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--bg-soft) 80%,transparent);border:1px solid var(--line-soft)}
.pago-oi{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--text-soft);padding:5px 0}
.pago-oi b{color:var(--text);font-weight:600}
.pago-oi-total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-size:1rem}
.pago-oi-total b{font-weight:800}

/* ==================== /cuenta: Mis tarjetas ==================== */
.acc-cards{display:flex;flex-direction:column;gap:10px}
.acc-card{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 70%,transparent)}
.acc-card svg{width:30px;height:30px;color:var(--brand);flex:0 0 auto}
.acc-card-i{flex:1;min-width:0}
.acc-card-i b{font-weight:700;font-size:.96rem;letter-spacing:.02em}
.acc-card-i span{display:block;font-size:.8rem;color:var(--text-mut)}
.acc-card-del{border:0;background:transparent;color:var(--text-mut);cursor:pointer;font-size:.85rem;font-weight:600}
.acc-card-del:hover{color:var(--sale)}
.acc-cards-empty{color:var(--text-soft);font-size:.9rem;padding:8px 0}

/* ==================== /cuenta: pedidos enriquecidos ==================== */
.cuenta-order-items{font-size:.86rem;color:var(--text-soft);margin:6px 0 2px;line-height:1.4}
.cuenta-order-track{margin-top:8px;font-size:.82rem;color:var(--text-soft);background:color-mix(in srgb,var(--bg-soft) 80%,transparent);
  border:1px solid var(--line-soft);border-radius:9px;padding:7px 10px}
.cuenta-order-track b{color:var(--text)}

/* ==================== Checkout: selector de método de pago + subida DNI ==================== */
.co-pays{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.co-pay{display:flex;gap:11px;padding:14px;border-radius:14px;border:1.5px solid var(--line);cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;align-items:flex-start}
.co-pay input{margin-top:3px;accent-color:var(--brand);width:17px;height:17px;flex:0 0 auto}
.co-pay.sel{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.co-pay-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.co-pay-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.co-pay-t b{font-weight:700;font-size:.98rem}
.co-pay-t em{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.04em;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,transparent);border-radius:6px;padding:2px 7px}
.co-pay-d{font-size:.82rem;color:var(--text-soft);line-height:1.4}
.co-file{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border:1.5px dashed var(--line);
  border-radius:12px;cursor:pointer;color:var(--text-soft);font-size:.9rem;font-weight:600;text-align:center;transition:border-color .15s,background .15s}
.co-file:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,transparent)}
.co-dni-prev{margin-top:10px;max-width:100%;max-height:180px;border-radius:10px;border:1px solid var(--line);display:block}