/* ═══════════════════════════════════════════════════════════════
   MacWorld Ecuador — Tema "noche dorada"
   Inspirado en el lenguaje editorial oscuro de dataijam-web:
   fondos profundos, fotografía a sangre, titulares grandes en dos
   tonos y un degradado de acento (aquí dorado en lugar de verde/cian).
   Se carga después del CSS inline y de site.css.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#07080b;
  --bg-2:#0b0d12;
  --surface:var(--panel);
  --surface-2:var(--panel);
  --line:rgba(var(--tint),.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#f6f4ef;
  --ink-2:#d6d8de;
  --muted:#a4a9b3;
  --gold-1:#ffe08a;
  --gold-2:#f2bd45;
  --gold-3:#cf8f1c;
  --grad:linear-gradient(100deg,var(--gold-1) 0%,var(--gold-2) 48%,var(--gold-3) 100%);
  --font-display:"Sora",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Variables heredadas del CSS original → modo oscuro */
  --dark:var(--bg);--black:var(--bg);--hero-bg:var(--bg);
  --card:var(--surface);--card2:var(--bg-2);
  --white:var(--ink);--text:var(--ink-2);
  --gray:var(--muted);--gray2:#8d929c;
  --border:var(--line);--border2:var(--line-2);
  --nav-bg:rgba(var(--bg-rgb),.78);
  --product-img-bg:var(--img-bg);
  --gold:#f2bd45;--gold-light:#ffe08a;--gold-dark:#f2bd45;
  --font-ui:var(--font-body);
  --focus:#ffe08a;
  --ok:#3ddc97;--danger:#ff7a6b;--wa-dark:#4be08a;
  --shadow:0 30px 80px rgba(0,0,0,.45);
  --radius:22px;
  --heading:#ffffff;--tint:255,255,255;--bg-rgb:7,8,11;--panel:var(--panel);--img-bg:var(--img-bg);--footer-bg:var(--footer-bg);
  --grad-text:var(--grad);
  color-scheme:dark;
}
html{background:var(--bg)}
body,body.mw-sub{background:var(--bg)!important;color:var(--ink-2);font-family:var(--font-body);letter-spacing:0}
::selection{background:var(--gold-2);color:#111}
h1,h2,h3,.display,.cart-title,.modal-name,.checkout-title,.product-name,.cat-name{font-family:var(--font-display)}
a{color:inherit}
.container{max-width:1240px;padding:0 24px}
@media(max-width:600px){.container{padding:0 16px}}
.section{padding:110px 0;background:transparent!important}
@media(max-width:640px){.section{padding:72px 0}}
section[id]{scroll-margin-top:110px}

/* ── Tipografía editorial ──────────────────────────────────────── */
.eyebrow{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin:0 0 16px}
.display{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.05;letter-spacing:-.035em;font-weight:700;color:var(--ink);margin:0;max-width:880px}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-intro{color:var(--muted);font-size:17px;line-height:1.7;max-width:680px;margin-top:18px}
.note{color:var(--muted)!important}
.grad-bar{display:block;width:96px;height:3px;border-radius:3px;background:var(--grad);margin:28px 0}
.link-gold{color:var(--gold-1);font-weight:600;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:4px}

/* ── Botones ───────────────────────────────────────────────────── */
.btn-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;border:0;background:var(--grad);color:#15110a;font-family:var(--font-body);font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;box-shadow:0 14px 40px rgba(242,189,69,.22);transition:transform .25s ease,box-shadow .25s ease;white-space:nowrap}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(242,189,69,.32)}
.btn-pill.btn-sm{min-height:44px;padding:10px 20px;font-size:14px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:999px;border:1px solid rgba(242,189,69,.45);background:rgba(242,189,69,.06);color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.btn-ghost:hover{background:rgba(242,189,69,.14);border-color:var(--gold-2);transform:translateY(-2px)}
.btn-ghost svg{color:var(--gold-1)}
/* Botones heredados */
.btn{font-family:var(--font-body)}
.btn-gold{background:var(--grad)!important;border:0!important;color:#15110a!important;box-shadow:0 14px 34px rgba(242,189,69,.22)!important}
.btn-outline,.btn-dark{background:rgba(var(--tint),.04)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important}
.btn-outline:hover,.btn-dark:hover{background:rgba(var(--tint),.09)!important;border-color:var(--gold-2)!important}
.btn-wa{background:rgba(37,211,102,.08)!important;border:1px solid rgba(37,211,102,.4)!important;color:var(--ink)!important}
.btn-wa svg{color:#4be08a}
.btn-wa:hover{background:rgba(37,211,102,.16)!important}

/* ── Header ────────────────────────────────────────────────────── */
.site-header{background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.scroll-progress{position:absolute;left:0;right:0;top:0;height:3px;z-index:3;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
.top-strip{background:transparent;border-bottom:1px solid var(--line);color:var(--muted);font-weight:600;font-size:12px}
.top-strip ul{height:32px}
.top-strip svg{color:var(--gold-2)}
#navbar nav.nav-inner{height:72px!important;max-width:1240px;margin:0 auto;padding:0 24px;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;backdrop-filter:none!important}
.nav-logo{gap:12px;flex:0 0 auto}
.logo-img{height:38px!important;width:38px!important}
.logo-word{font-family:Georgia,"Times New Roman",serif;font-size:19px;letter-spacing:.06em;color:var(--ink)}
.logo-word b{font-weight:400;color:var(--gold-2)}
.nav-links{gap:2px}
.nav-links a{position:relative;color:var(--muted)!important;font-weight:500;font-size:14px;padding:10px 12px!important;background:none!important}
.nav-links a:hover,.nav-links a.is-active{color:var(--ink)!important}
.nav-links a::after{content:'';position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transition:transform .3s ease}
.nav-links a.is-active::after{transform:scaleX(1)}
.nav-search,.cart-btn,.nav-menu-btn{background:rgba(var(--tint),.05)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important}
.nav-search input{color:var(--ink)!important;width:110px!important}
.nav-search input::placeholder{color:var(--muted)}
.cart-btn{min-height:44px}
.cart-count{background:var(--gold-2)!important;color:#111!important}
.nav-cta{min-height:44px;padding:10px 20px;font-size:14px}
.nav-mobile-panel{background:rgba(11,13,18,.97)!important;border:1px solid var(--line)!important;margin:0 12px 12px!important;width:auto!important}
.nav-mobile-links a{color:var(--ink)!important;background:rgba(var(--tint),.03)!important}
@media(max-width:1180px){.nav-search{display:none}.nav-links a{padding:10px 9px!important}}
@media(max-width:1024px){.nav-cta{display:none}}
@media(max-width:900px){.logo-word{display:none}}
@media(max-width:640px){#navbar nav.nav-inner{height:60px!important;padding:0 14px}.top-strip ul{height:28px}}

/* ── Hero ──────────────────────────────────────────────────────── */
.hero2{position:relative;padding:150px 0 90px;overflow:hidden;background:
  radial-gradient(60% 50% at 75% 40%,rgba(242,189,69,.10),transparent 70%),var(--bg)}
.hero2::after{content:'';position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero2-grid{max-width:1240px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.02fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
.hero2-title{font-size:clamp(2.9rem,6.2vw,5.6rem);line-height:.98;letter-spacing:-.045em;font-weight:800;color:var(--ink);margin:0 0 26px}
.fx-line{display:block;overflow:hidden;padding-bottom:.06em}
.fx-line>span{display:inline-block;animation:lineUp 1s cubic-bezier(.2,.7,.2,1) both}
.fx-line:nth-child(2)>span{animation-delay:.08s}
.fx-line:nth-child(3)>span{animation-delay:.16s}
.fx-line.grad{background:none;color:inherit}
.fx-line.grad>span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes lineUp{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
.fx-in{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) .25s both}
.fx-d2{animation-delay:.35s}.fx-d3{animation-delay:.45s}.fx-d4{animation-delay:.55s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero2-sub{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:560px;margin:0 0 26px}
.hero2-meta{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-wrap:wrap;gap:12px 26px;color:var(--ink);font-size:14.5px;font-weight:500}
.hero2-meta li{display:flex;align-items:center;gap:10px}
.hero2-meta svg{color:var(--gold-2);flex-shrink:0}
.hero2-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero2-visual{position:relative;min-height:560px}
.hero2-art{margin:0;position:relative;border-radius:46% 0 0 0/30% 0 0 0;overflow:hidden;aspect-ratio:1/1;max-width:640px;margin-left:auto;
  mask-image:radial-gradient(120% 100% at 60% 40%,#000 62%,transparent 100%);-webkit-mask-image:radial-gradient(120% 100% at 60% 40%,#000 62%,transparent 100%);animation:artIn 1.4s cubic-bezier(.2,.7,.2,1) .1s both}
.hero2-art img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes artIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.hero2-wordmark{position:absolute;left:0;right:0;bottom:12%;text-align:center;pointer-events:none}
.hero2-wordmark .wm{display:block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.2rem,4.6vw,4rem);letter-spacing:.06em;color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.6)}
.hero2-wordmark .wm b{font-weight:400;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2-wordmark .tag{display:block;margin-top:14px;font-size:12px;letter-spacing:.42em;color:var(--ink-2);font-weight:600}
.hero2-wordmark .tag i{font-style:normal;color:var(--gold-2);font-weight:800;margin:0 .6em}
/* Tarjeta destacada flotante (reusa #heroShowcase de store.js) */
.hero2-visual .hero-device-card{position:absolute;left:0;bottom:-10px;width:min(330px,80%);max-width:none;padding:14px!important;border-radius:22px!important;background:rgba(16,19,26,.78)!important;border:1px solid var(--line-2)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 70px rgba(0,0,0,.5)!important;transform:none!important;animation:fadeUp 1s cubic-bezier(.2,.7,.2,1) .7s both}
.hero-card-label{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-1);font-weight:700;margin:0 0 10px}
#heroShowcase{display:grid;grid-template-columns:92px 1fr;gap:4px 12px;align-items:center}
#heroShowcase .product-showcase-media{grid-row:span 3;height:112px!important;margin:0!important;border-radius:14px!important;background:var(--img-bg)!important}
#heroShowcase .product-showcase-media img{transform:none!important;filter:none!important}
#heroShowcase .cond-chip{margin:0;justify-self:start;font-size:10px;padding:3px 8px}
#heroShowcase .product-showcase-name{font-size:15px!important;color:var(--ink)!important;margin:0!important;line-height:1.25}
#heroShowcase .product-showcase-price{font-size:20px!important;color:var(--gold-1)!important;margin:0!important;font-family:var(--font-display)}
#heroShowcase .product-showcase-features{display:none}
#heroShowcase>div:last-child{grid-column:1/-1;margin-top:10px}
#heroShowcase .btn{min-height:42px;padding:10px 14px;font-size:13px}
.hero-dot-ind{background:rgba(var(--tint),.2)!important;width:8px!important;height:8px!important;border:0;padding:0;cursor:pointer;border-radius:8px!important}
.hero-dot-ind.active{background:var(--gold-2)!important;width:26px!important}
.hero-indicators{margin-top:12px!important}
@media(max-width:900px){
  .hero2{padding:124px 0 60px}
  .hero2-grid{grid-template-columns:1fr}
  .hero2-visual{min-height:0}
  .hero2-art{max-width:520px;margin:0 auto;border-radius:36% 36% 0 0/24% 24% 0 0}
  .hero2-visual .hero-device-card{position:relative;left:auto;bottom:auto;margin:-60px auto 0;width:min(360px,100%)}
}
@media(max-width:640px){.hero2{padding:112px 0 40px}.hero2-sub{font-size:16px}.hero2-meta{font-size:13.5px}}

/* ── Galería que se expande ────────────────────────────────────── */
.xp{position:relative;height:260vh;background:var(--bg)}
.xp-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.xp-stage{position:absolute;inset:0;perspective:1400px}
.xp-card{position:absolute;top:50%;width:min(19vw,260px);aspect-ratio:3/4;height:auto;object-fit:cover;border-radius:18px;opacity:.85;box-shadow:0 30px 60px rgba(0,0,0,.55);filter:saturate(.85) brightness(.8);will-change:transform,opacity;transition:none}
.xp-l1{left:calc(50% - 31vw)}.xp-l2{left:calc(50% - 46vw)}.xp-l3{left:calc(50% - 61vw)}
.xp-r1{left:calc(50% + 12vw)}.xp-r2{left:calc(50% + 27vw)}.xp-r3{left:calc(50% + 42vw)}
.xp-center{position:absolute;inset:0;clip-path:inset(22% 31% 22% 31% round 24px);will-change:clip-path}
.xp-center img{width:100%;height:100%;object-fit:cover;display:block}
.xp-center::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,11,.35),rgba(7,8,11,.15) 40%,rgba(7,8,11,.85))}
.xp-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;pointer-events:none;padding:0 16px}
.xp-title{font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:1;letter-spacing:-.04em;font-weight:800;color:#fff;margin:0 0 18px;text-shadow:0 10px 40px rgba(0,0,0,.6)}
.xp-hint{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:#fff}
.xp-hint svg{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}
.xp-outro{position:absolute;left:max(24px,calc(50% - 596px));bottom:12vh;max-width:560px;z-index:2;opacity:0;transform:translateY(30px)}
.xp-outro h3{font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.03em;color:#fff;margin:0 0 14px}
.xp-outro p{color:var(--ink-2);font-size:17px;line-height:1.7;margin:0 0 24px}
.photo-credit{position:absolute;right:16px;bottom:10px;z-index:3;font-size:10.5px;color:rgba(255,255,255,.55);margin:0}
@media(max-width:768px){
  /* svh: altura fija aunque la barra del navegador aparezca o desaparezca */
  .xp{height:220vh;height:220svh}
  .xp-sticky{height:100vh;height:100svh}
  .xp-card{width:30vw;filter:none;box-shadow:0 16px 30px rgba(0,0,0,.4)}
  .xp-l1{left:calc(50% - 50vw)}.xp-r1{left:calc(50% + 20vw)}
  .xp-l2,.xp-l3,.xp-r2,.xp-r3{display:none}
  .xp-stage{perspective:none}
  /* en el celular se anima con scale (GPU) en vez de clip-path */
  .xp-center{clip-path:none;border-radius:20px;overflow:hidden;transform:scale(.64);transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
  .xp-outro{bottom:8vh;padding-right:16px}
}
.xp.is-static .xp-center{transform:none}
/* Sin movimiento: estado final estático */
.xp.is-static{height:auto}
.xp.is-static .xp-sticky{position:relative;height:100vh;min-height:560px}
.xp.is-static .xp-center{clip-path:none}
.xp.is-static .xp-card,.xp.is-static .xp-intro{display:none}
.xp.is-static .xp-outro{opacity:1;transform:none}

/* ── Secciones con foto de fondo ───────────────────────────────── */
.photo-surface{position:relative;overflow:hidden;isolation:isolate}
.photo-bg{position:absolute;inset:0;z-index:-1}
.photo-bg img{width:100%;height:115%;object-fit:cover;display:block;will-change:transform}
.editorial{padding:140px 0 70px;min-height:100vh}
.editorial .photo-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.9) 38%,rgba(var(--bg-rgb),.35) 75%,rgba(var(--bg-rgb),.55)),linear-gradient(180deg,var(--bg),transparent 18%,transparent 70%,var(--bg))}
.editorial-copy{max-width:600px}
.muted-word{color:rgba(246,244,239,.38)}
.reveal-words{font-size:clamp(17px,1.6vw,20px);line-height:1.75;color:var(--ink);max-width:560px}
.reveal-words .w{opacity:.22;transition:opacity .25s linear}
.reveal-words .w.on{opacity:1}
.editorial-caption{position:absolute;right:max(24px,calc(50% - 596px));top:58%;font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:700;line-height:1.15;color:#fff;text-align:left;margin:0;text-shadow:0 8px 30px rgba(0,0,0,.6)}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:90px;border:1px solid var(--line-2);border-radius:20px;background:rgba(var(--bg-rgb),.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden;position:relative}
.stats-strip::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad)}
.stats-strip>div{padding:26px 24px;border-right:1px solid var(--line)}
.stats-strip>div:last-child{border-right:0}
.stats-strip .hero-stat-num{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.2rem)!important;font-weight:700;color:var(--ink)!important;letter-spacing:-.02em;line-height:1.1}
.stats-strip .hero-stat-num svg{color:var(--gold-2);flex-shrink:0}
.stats-strip .hero-stat-num span{font-size:inherit!important;color:inherit!important}
.stats-strip .hero-stat-label{font-size:13px;color:var(--muted)!important;margin-top:8px}
@media(max-width:900px){.stats-strip{grid-template-columns:1fr 1fr}.stats-strip>div:nth-child(2){border-right:0}.stats-strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.editorial-caption{display:none}}
@media(max-width:640px){.editorial{padding:100px 0 50px;min-height:0}.editorial .photo-bg::after{background:linear-gradient(180deg,var(--bg) 0%,rgba(var(--bg-rgb),.82) 30%,rgba(var(--bg-rgb),.9) 100%)}}

/* Guayaquil */
.city{min-height:92vh;display:flex;align-items:center;padding:120px 0}
.city .photo-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),rgba(7,8,11,.2) 25%,rgba(7,8,11,.25) 70%,var(--bg)),linear-gradient(90deg,rgba(7,8,11,.5),transparent 50%)}
.city-ghost{position:absolute;left:0;right:0;bottom:-0.12em;margin:0;text-align:center;font-family:var(--font-display);font-weight:800;font-size:clamp(5rem,17vw,16rem);letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,224,138,.22);pointer-events:none;z-index:0;white-space:nowrap}
.city-grid{display:grid;grid-template-columns:1fr 440px;gap:40px;align-items:end;position:relative;z-index:1;width:100%}
.city-slogan{font-family:var(--font-display);font-size:clamp(1.9rem,3.6vw,3rem);font-weight:700;line-height:1.1;color:#fff;margin:0;letter-spacing:-.03em;text-shadow:0 8px 30px rgba(0,0,0,.6)}
.city-card{background:rgba(7,8,11,.62);border:1px solid var(--line-2);border-radius:24px;padding:30px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.city-kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin:0}
.city-title{font-size:clamp(3rem,6vw,4.6rem);line-height:1;letter-spacing:-.05em;font-weight:800;color:#fff;margin:6px 0 14px}
.city-title span{color:var(--gold-2)}
.city-addr{display:flex;gap:8px;align-items:center;color:var(--ink);font-weight:600;margin:0 0 10px}
.city-addr svg{color:var(--gold-2)}
.city-card p{color:var(--ink-2);line-height:1.7;margin:0 0 20px}
@media(max-width:900px){.city-grid{grid-template-columns:1fr}.city{min-height:0}}

/* ── Categorías y catálogo ─────────────────────────────────────── */
.categories-grid{gap:16px!important}
.cat-card,.cat-card:nth-child(n){background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:22px!important;height:300px!important}
.cat-card .cat-img-wrap img{filter:brightness(.85)}
.cat-card::before{background:linear-gradient(to top,rgba(7,8,11,.95) 0%,rgba(7,8,11,.25) 55%,transparent 100%)!important}
.cat-card:hover{border-color:rgba(242,189,69,.5)!important;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(242,189,69,.3)!important}
.cat-name{font-size:22px!important;color:#fff!important}
.cat-count{color:var(--gold-1)!important;font-weight:600}
@media(max-width:1024px){.categories-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:640px){.categories-grid{grid-template-columns:1fr 1fr!important}.cat-card,.cat-card:nth-child(n){height:220px!important}}

.filters-bar{background:transparent!important}
.filter-btn{background:rgba(var(--tint),.04)!important;border:1px solid var(--line-2)!important;color:var(--ink-2)!important;min-height:42px}
.filter-btn.active,.filter-btn:hover{background:var(--grad)!important;border-color:transparent!important;color:#15110a!important}
.catalog-search,.catalog-tools select,.sort-select,.cmp-selects select{background:var(--surface)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important}
.catalog-search input{color:var(--ink)!important}
.catalog-tools select option,.cmp-selects select option{background:var(--panel);color:#f6f4ef}
.results-count{color:var(--muted)!important}

.product-card,.product-card:nth-child(n){background:linear-gradient(180deg,var(--surface),var(--bg-2))!important;border:1px solid var(--line)!important;border-radius:24px!important;color:var(--ink-2)!important}
.product-card::after{box-shadow:0 0 0 1px rgba(242,189,69,.55),0 24px 60px rgba(242,189,69,.12)!important}
.product-img-area,.product-card:nth-child(n) .product-img-area{background:var(--img-bg)!important}
.product-brand{color:var(--gold-2)!important}
.product-name{color:var(--ink)!important;font-weight:600;letter-spacing:-.015em}
.product-spec{color:var(--muted)!important}
.product-price{color:var(--ink)!important;font-family:var(--font-display);font-weight:700}
.price-cash{color:var(--muted)}
.price-trust{color:var(--muted)}
.price-trust svg{color:var(--ok)}
.btn-cart-icon{background:var(--grad)!important;border:0!important;color:#15110a!important}
.btn-cart-icon svg{stroke:currentColor!important}
.btn-view-text{color:var(--ink-2)!important}
.btn-view-text:hover{color:var(--gold-1)!important}
.product-img-ph{background:var(--img-bg)!important;color:var(--muted)}

/* Chips de estado sobre oscuro */
.cond-nuevo{color:#5ff0aa;border-color:rgba(95,240,170,.35);background:rgba(95,240,170,.08)}
.cond-sinsellos{color:#8ec5ff;border-color:rgba(142,197,255,.35);background:rgba(142,197,255,.08)}
.cond-openbox{color:#e3e5ea;border-color:rgba(227,229,234,.3);background:rgba(227,229,234,.06)}
.cond-generico{color:#ffb86b;border-color:rgba(255,184,107,.35);background:rgba(255,184,107,.08)}
.tag-new{background:#0f8a52!important}
.tag-last{background:#111;color:var(--gold-1);border:1px solid rgba(242,189,69,.5)}

/* ── Pasos (stepper) ───────────────────────────────────────────── */
.steps-section{background:radial-gradient(70% 60% at 50% 0%,rgba(242,189,69,.07),transparent 70%)!important}
.stepper{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:56px 0 28px}
.stepper-line{position:absolute;left:12.5%;right:12.5%;top:27px;height:2px;background:var(--line-2);z-index:0;border-radius:2px}
.stepper-line span{display:block;height:100%;width:0;background:var(--grad);border-radius:2px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.step-tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--muted);cursor:pointer;font-family:var(--font-body);padding:0 6px;text-align:center;min-height:44px}
.step-dot{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);margin-bottom:8px;transition:all .35s ease}
.step-tab small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold-2)}
.step-tab strong{font-size:15px;color:var(--ink-2);font-weight:600}
.step-tab[aria-selected="true"] .step-dot{background:var(--grad);color:#15110a;border-color:transparent;box-shadow:0 0 0 8px rgba(242,189,69,.12),0 0 40px rgba(242,189,69,.35)}
.step-tab[aria-selected="true"] strong{color:var(--heading)}
.step-panel{display:grid;grid-template-columns:auto 1fr 260px;gap:32px;align-items:center;padding:34px 38px;border-radius:26px;border:1px solid var(--line-2);background:linear-gradient(135deg,rgba(242,189,69,.06),rgba(var(--tint),.02));position:relative;overflow:hidden}
.step-num{font-family:var(--font-display);font-size:clamp(4rem,9vw,7rem);font-weight:300;line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(255,224,138,.65);letter-spacing:-.04em}
.step-body h3{font-size:22px;color:var(--heading);margin:0 0 8px}
.step-body p{margin:0;color:var(--ink-2);line-height:1.7}
.step-deliver{border:1px solid rgba(242,189,69,.3);border-radius:18px;padding:16px 18px;background:rgba(var(--bg-rgb),.5)}
.step-deliver small{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);font-weight:700;margin-bottom:6px}
.step-deliver strong{color:var(--heading);font-size:14.5px;font-weight:600}
.step-panel.swap .step-body,.step-panel.swap .step-num,.step-panel.swap .step-deliver{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
@media(max-width:900px){.step-panel{grid-template-columns:auto 1fr}.step-deliver{grid-column:1/-1}}
@media(max-width:640px){
  .stepper{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .step-tab strong{display:none}
  .step-dot{width:46px;height:46px}
  .stepper-line{top:22px}
  .step-panel{grid-template-columns:1fr;padding:26px 22px;gap:14px}
}

/* ── Tarjetas y paneles ────────────────────────────────────────── */
.why-card,.panel,.cmp-wrap,.faq-item,.review-card,.contact-item,.contact-form{background:linear-gradient(180deg,var(--surface),var(--bg-2))!important;border:1px solid var(--line)!important;box-shadow:none!important}
.why-card{border-radius:24px;padding:30px;transition:border-color .3s ease,transform .3s ease}
.why-card:hover{border-color:rgba(242,189,69,.4)!important;transform:translateY(-4px)}
.why-icon{background:rgba(242,189,69,.12)!important;color:var(--gold-1)!important;border:1px solid rgba(242,189,69,.3)}
.why-card h3,.panel h3{color:var(--heading)!important}
.why-card p{color:var(--muted)!important}
.why-card a,.faq-a a,.legal a{color:var(--gold-1)!important}
.grid-why{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important}
.pay-list li{background:rgba(var(--tint),.03)!important;color:var(--ink)!important;border:1px solid var(--line)}
.pay-list li small{color:var(--muted)!important}
.pay-ico{background:rgba(242,189,69,.1)!important;border-color:rgba(242,189,69,.3)!important;color:var(--gold-1)!important}
.ship-table th{color:var(--muted)!important}
.ship-table td{color:var(--ink)!important}
.ship-table th,.ship-table td{border-color:var(--line)!important}
.todo{background:rgba(255,193,7,.12)!important;color:#ffd970!important;border-color:rgba(255,193,7,.45)!important}
.cmp-table thead th{background:rgba(var(--tint),.04)!important;color:var(--heading)!important}
.cmp-table th,.cmp-table td{border-color:var(--line)!important}
.cmp-table td{color:var(--ink-2)!important}
.cmp-price{color:var(--heading)!important;font-family:var(--font-display)}
.cmp-selects label{color:var(--muted)!important}

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:60px;align-items:start}
.faq-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.faq-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(var(--tint),.03);color:var(--ink-2);font-family:var(--font-body);font-weight:600;font-size:14px;cursor:pointer}
.faq-tab span{font-size:11px;background:rgba(var(--tint),.08);border-radius:999px;padding:1px 7px}
.faq-tab.active{background:var(--grad);border-color:transparent;color:#15110a}
.faq-tab.active span{background:rgba(0,0,0,.15)}
.faq-list{margin-top:0!important;max-width:none!important}
.faq-item{border-radius:18px!important}
.faq-item summary{color:var(--heading)!important;display:flex;align-items:center;gap:14px;font-family:var(--font-body);font-weight:600}
.faq-n{font-family:var(--font-display);font-size:12px;color:var(--gold-2);font-weight:700;min-width:22px}
.faq-item summary::after{border-color:var(--gold-2)!important}
.faq-item[open]{border-color:rgba(242,189,69,.35)!important}
.faq-a{color:var(--ink-2)!important;padding-left:58px!important}
.faq-aside{position:sticky;top:130px}
.faq-q{position:absolute;right:-10px;top:-60px;font-family:var(--font-display);font-size:16rem;line-height:1;font-weight:300;color:transparent;-webkit-text-stroke:1.5px rgba(255,224,138,.16);pointer-events:none;z-index:-1}
.faq-aside{isolation:isolate}
.faq-help{margin-top:26px;padding:22px;border-radius:20px;border:1px solid var(--line-2);background:rgba(var(--tint),.03)}
.faq-help svg{color:var(--gold-1)}
.faq-help p{color:var(--ink);margin:10px 0 6px}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr;gap:30px}.faq-aside{position:relative;top:auto;order:-1}.faq-q{font-size:9rem;top:-30px}}

/* ── CTA final ─────────────────────────────────────────────────── */
.cta-panel{position:relative;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:56px;border-radius:32px;background:
  radial-gradient(60% 120% at 100% 0%,rgba(242,189,69,.16),transparent 60%),linear-gradient(180deg,var(--panel),#0a0c10);overflow:hidden}
.cta-panel::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,rgba(255,224,138,.7),rgba(var(--tint),.08) 40%,rgba(207,143,28,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cta-panel .hero2-meta{margin:24px 0 0}
.cta-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media(max-width:900px){.cta-panel{grid-template-columns:1fr;padding:36px 24px}}

/* ── Contacto y formularios ────────────────────────────────────── */
.section-contacto{background:transparent!important}
.contact-label{color:var(--gold-2)!important;font-family:var(--font-body)}
.contact-value{color:var(--heading)!important}
.contact-sub{color:var(--muted)!important}
.contact-icon{color:var(--gold-1)}
.form-title{font-size:22px;color:var(--heading);margin:0 0 6px}
.form-label{color:var(--ink-2)!important}
.form-input,.form-textarea,.form-select{background:rgba(var(--tint),.04)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important}
.form-input::placeholder,.form-textarea::placeholder{color:#8d929c!important}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--gold-2)!important;box-shadow:0 0 0 4px rgba(242,189,69,.15)!important}
.form-select option{background:var(--panel)}
.form-check{color:var(--ink-2)}
.form-check input{accent-color:var(--gold-2)}
.form-check a{color:var(--gold-1)!important}
.form-hint{color:var(--muted)!important}
.radio-pill span{background:rgba(var(--tint),.03)!important;border-color:var(--line-2)!important;color:var(--ink)!important}
.radio-pill input:checked+span{background:var(--grad)!important;color:#15110a!important;border-color:transparent!important}
.map-box{border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.map-ph{background:linear-gradient(135deg,var(--surface),var(--bg-2))!important;color:var(--ink)!important}
.map-ph svg{color:var(--gold-1)}
.map-ph small{color:var(--muted)!important}

/* ── Carrito, ficha, checkout, lightbox ────────────────────────── */
.cart-drawer,.product-modal,.checkout-modal{background:var(--panel)!important;color:var(--ink-2)!important;border:1px solid var(--line-2)!important}
.cart-overlay,.modal-overlay{background:rgba(0,0,0,.6)!important}
.cart-title,.modal-name,.checkout-title{color:var(--heading)!important}
.cart-item,.modal-features,.checkout-items-summary,.modal-desc,.modal-box,.checkout-banks,.pay-card-panel,.bank-card{background:rgba(var(--tint),.03)!important;border:1px solid var(--line)!important}
.modal-desc,.modal-desc p{color:var(--ink-2)!important}
.modal-desc strong,.cart-item-name,.qty-val,.bank-holder-val,.checkout-item-name,.checkout-total-row,.cart-total-row{color:var(--heading)!important}
.modal-box h3{color:var(--muted)!important}
.modal-box ul{color:var(--ink-2)!important}
.modal-price,.cart-item-price,.cart-total-row span:last-child,.checkout-item-price,.checkout-total-row span:last-child,.bank-acc{color:var(--gold-1)!important}
.modal-brand{color:var(--gold-2)!important}
.modal-spec,.modal-cond-note,.cart-item-spec,.cart-row,.bank-name,.bank-holder-label,.checkout-sub,.checkout-disclaimer{color:var(--muted)!important}
.close-btn,.modal-close,.qty-btn,.remove-item,.btn-copy{background:rgba(var(--tint),.05)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important}
.bank-avatar,.pay-card-icon{background:rgba(242,189,69,.12)!important;color:var(--gold-1)!important}
.checkout-banks-title{color:var(--gold-1)!important}
.checkout-banks-note{background:rgba(37,211,102,.08)!important;border-color:rgba(37,211,102,.3)!important;color:#7ff0b0!important}
.pay-card-text{color:var(--ink-2)!important}
.mini-item{background:rgba(var(--tint),.03)!important;border-color:var(--line)!important;color:var(--ink)!important}
.mini-item small{color:var(--muted)!important}
.mini-item b{color:var(--gold-1)!important}
.mini-add{background:rgba(var(--tint),.05)!important;color:var(--ink)!important;border-color:var(--line-2)!important}
.cart-suggest h3,.related h3{color:var(--muted)!important}
/* Foto de la ficha: alto fijo para que la imagen siempre sea visible */
.modal-visual{background:var(--img-bg)!important;border-color:var(--line)!important;position:sticky!important;top:0;height:min(88vh,660px)!important;min-height:0!important;padding:20px!important}
.modal-visual::before{background:radial-gradient(circle at center,rgba(242,189,69,.10),transparent 70%)!important}
.modal-visual img{width:100%!important;height:100%!important;max-height:100%;object-fit:contain!important}
.modal-grid{align-items:start}
@media(max-width:700px){.modal-visual{position:relative!important;height:340px!important}}
.carousel-dot{background:rgba(var(--tint),.3)}
.carousel-dot.active{background:var(--gold-2)!important}

/* ── Barra móvil, toast, cookies, WhatsApp ─────────────────────── */
@media(max-width:768px){.mobile-bar{background:rgba(var(--bg-rgb),.94)!important;border-top:1px solid var(--line-2)!important}.mobile-bar .mb-total strong{color:var(--heading)!important}.mobile-bar .mb-total{color:var(--muted)!important}}
.mobile-bar .mb-count{background:#111!important;color:var(--gold-1)!important}
.mw-toast{background:var(--panel)!important;border:1px solid rgba(242,189,69,.4)}
.mw-toast button{background:var(--grad)!important}
.cookie-banner{background:var(--panel)!important;border:1px solid var(--line-2)}
.cookie-btn-primary{background:var(--grad)!important;border:0!important}
.cookie-modal{background:var(--panel)!important;color:var(--ink-2)!important;border:1px solid var(--line-2)}
.cookie-modal h2,.cookie-opt strong{color:var(--heading)!important}
.cookie-opt{border-color:var(--line)!important}
.cookie-modal .cookie-btn{color:var(--ink)!important;border-color:var(--line-2)!important}
.cookie-modal .cookie-btn-primary{color:#15110a!important}
.wa-float{background:rgba(16,19,26,.9)!important;color:var(--ink)!important;border:1px solid rgba(37,211,102,.45)!important}
.wa-float svg{color:#4be08a!important}

/* ── Footer editorial ──────────────────────────────────────────── */
#siteFooter,footer{background:var(--footer-bg)!important;border-top:1px solid var(--line)!important}
.footer-heading{color:var(--heading)!important;font-family:var(--font-body);letter-spacing:.16em!important;font-size:12px!important}
.footer-desc,.footer-links a,.footer-contact,.footer-disclaimer,.footer-legal a,.footer-legal button{color:var(--muted)!important}
.footer-contact a{color:var(--ink)!important}
.footer-links a:hover,.footer-legal a:hover,.footer-contact a:hover{color:var(--gold-1)!important}
.social-btn{background:rgba(var(--tint),.04)!important;border-color:var(--line-2)!important;color:var(--ink-2)!important}
.footer-tag{font-size:11px;letter-spacing:.32em;color:var(--muted);margin:6px 0 18px}
.footer-tag i{font-style:normal;color:var(--gold-2);margin:0 .5em}

/* ── Páginas internas (legales, gracias, 404) ──────────────────── */
.sub-header{background:rgba(var(--bg-rgb),.88)!important;border-bottom:1px solid var(--line)!important}
.sub-btn{background:rgba(var(--tint),.04)!important;border-color:var(--line-2)!important;color:var(--ink)!important}
.sub-btn-gold{background:var(--grad)!important;color:#15110a!important;border:0!important}
.legal h1,.legal h2,.legal h3,.center-card h1,.center-card .big{color:var(--heading)!important}
.legal p,.legal li,.legal td{color:var(--ink-2)!important}
.legal th{background:rgba(var(--tint),.04)!important;color:var(--heading)}
.legal th,.legal td{border-color:var(--line-2)!important}
.legal .toc,.steps li{background:rgba(var(--tint),.03)!important;color:var(--ink-2)!important}
.legal .callout{background:rgba(242,189,69,.07)!important;color:var(--ink)}
.legal .updated,.center-card p{color:var(--muted)!important}
.center-card .big span{color:var(--gold-2)!important}
.steps b{background:var(--grad)!important;color:#15110a!important}
.check-big{background:rgba(61,220,151,.12)!important;color:var(--ok)!important}
body.mw-sub .btn{background:rgba(var(--tint),.04);border-color:var(--line-2);color:var(--ink)}
body.mw-sub .btn-gold{color:#15110a!important}

/* ── Movimiento reducido ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fx-line>span,.fx-in,.hero2-art,.hero2-visual .hero-device-card,.xp-hint svg,.step-panel.swap *{animation:none!important}
  .reveal-words .w{opacity:1!important}
  .photo-bg img{transform:none!important}
}

/* ── Ajustes tras revisión visual ──────────────────────────────── */
.logo-img{border-radius:50%;object-fit:cover;clip-path:circle(48% at 50% 50%)}
.hero2-title{font-size:clamp(2.7rem,5.2vw,4.7rem)}
@media(min-width:901px){.hero2-grid{grid-template-columns:1.1fr 1fr}}
.hero2-wordmark{bottom:30%}
.hero2-visual .hero-device-card{left:-24px;bottom:-70px;width:min(310px,80%)}
.hero2{padding-bottom:130px}
.categories-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.cat-card,.cat-card:nth-child(n){height:340px!important}
@media(max-width:1024px){.categories-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:640px){.categories-grid{grid-template-columns:1fr 1fr!important}.cat-card,.cat-card:nth-child(n){height:220px!important}}
@media(max-width:900px){.hero2-visual .hero-device-card{left:auto;bottom:auto;margin:-70px auto 0}.hero2-wordmark{bottom:22%}.hero2{padding-bottom:60px}}

/* Móvil: WhatsApp dentro de la barra inferior (no tapa los botones de las tarjetas) */
.mb-wa{display:none}
@media(max-width:768px){
  .wa-float{display:none!important}
  .mb-wa{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;flex-shrink:0;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.5);color:#4be08a}
}
@media(max-width:640px){.categories-grid .cat-card:last-child{grid-column:1/-1}}
/* Catálogo: 2 filas visibles + botón "Ver más" */
.product-card.is-extra{display:none!important}
.catalog-more{display:flex;justify-content:center;margin-top:34px}
.catalog-more[hidden]{display:none}
.catalog-more-n{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--gold-2);color:var(--bg)}
/* Si una categoría queda sin productos, la cuadrícula se ajusta a 4 tarjetas */
.categories-grid[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:1024px){.categories-grid[data-count="4"]{grid-template-columns:1fr 1fr!important}.categories-grid[data-count="4"] .cat-card:last-child{grid-column:auto}}
[tabindex="-1"]:focus{outline:none!important;box-shadow:none!important}

/* Páginas internas: que hereden los tokens del tema (site.css define una base clara en body.mw-sub) */
body.mw-sub{--dark:var(--bg);--black:var(--bg);--card:var(--surface);--card2:var(--bg-2);--white:var(--ink);--text:var(--ink-2);--gray:var(--muted);--border:var(--line);--border2:var(--line-2)}

/* Botón de modo claro / oscuro */
.mode-toggle{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;background:rgba(var(--tint),.05);border:1px solid var(--line-2);color:var(--ink)}
.mode-toggle:hover{border-color:var(--gold-2)}
.mode-toggle .i-sun{display:none}
html[data-mode="light"] .mode-toggle .i-sun{display:block}
html[data-mode="light"] .mode-toggle .i-moon{display:none}
.art-light{display:none}

/* ═══════════════════════════════════════════════════════════════
   MODO CLARO — marfil cálido, tinta casi negra y dorado profundo.
   Las secciones con fotografía (galería, Guayaquil) se mantienen
   como bandas oscuras para conservar el carácter cinematográfico.
   ═══════════════════════════════════════════════════════════════ */
html[data-mode="light"]{
  --bg:#f7f5f0;--bg-rgb:247,245,240;--bg-2:#efece4;
  --surface:#ffffff;--surface-2:#fbfaf6;--panel:#ffffff;--img-bg:#efece6;--footer-bg:#efece4;
  --line:rgba(20,20,25,.10);--line-2:rgba(20,20,25,.18);
  --ink:#15151a;--ink-2:#33353c;--muted:#5d616a;--heading:#121216;--tint:20,20,25;
  --gold-1:#8a5c00;--gold-2:#8a5c00;--gold-3:#6f4a00;
  --grad:linear-gradient(100deg,#ffd970 0%,#f2bd45 48%,#e0a12a 100%);
  --grad-text:linear-gradient(100deg,#a87400 0%,#8a5c00 55%,#6f4a00 100%);
  --gold:#f2bd45;--gold-light:#ffd970;--gold-dark:#8a5c00;
  --gray2:#6b6f77;
  --product-img-bg:#efece6;
  --focus:#15151a;--ok:#0a7d47;--danger:#b42318;--wa-dark:#0f7a3a;
  --shadow:0 24px 60px rgba(20,20,25,.10);
  color-scheme:light;
}
html[data-mode="light"] ::selection{background:#f2bd45;color:#111}
html[data-mode="light"] .hero2{background:radial-gradient(60% 50% at 75% 40%,rgba(242,189,69,.18),transparent 70%),var(--bg)}
html[data-mode="light"] .art-dark{display:none}
html[data-mode="light"] .art-light{display:block}
html[data-mode="light"] .hero2-wordmark .wm{color:var(--heading);text-shadow:none}
html[data-mode="light"] .hero2-wordmark .tag{color:var(--ink-2)}
html[data-mode="light"] .hero2-visual .hero-device-card{background:rgba(255,255,255,.82)!important;box-shadow:0 30px 70px rgba(20,20,25,.16)!important}
html[data-mode="light"] .btn-ghost{background:rgba(242,189,69,.10);border-color:rgba(138,92,0,.45)}
html[data-mode="light"] .btn-pill,html[data-mode="light"] .btn-gold{box-shadow:0 14px 34px rgba(224,161,42,.28)!important}
html[data-mode="light"] .cart-count{background:#f2bd45!important}
html[data-mode="light"] .hero-dot-ind.active,html[data-mode="light"] .carousel-dot.active{background:#e0a12a!important}

/* Galería: la escena central sigue siendo oscura */
html[data-mode="light"] .xp-card{box-shadow:0 30px 60px rgba(20,20,25,.25);filter:none}
html[data-mode="light"] .xp-outro p{color:#e9e6de}
html[data-mode="light"] .xp-intro .eyebrow,html[data-mode="light"] .xp-outro .btn-ghost{color:#ffe08a}
html[data-mode="light"] .xp-intro .eyebrow{color:#ffe08a}
html[data-mode="light"] .xp-outro .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,224,138,.55);color:#fff}

/* Editorial: velo claro sobre la foto, texto oscuro */
html[data-mode="light"] .muted-word{color:rgba(21,21,26,.38)}
html[data-mode="light"] .editorial-caption{color:var(--heading);text-shadow:none}
html[data-mode="light"] .stats-strip{background:rgba(255,255,255,.75)}

/* Guayaquil: banda oscura con bordes que se funden al marfil */
html[data-mode="light"] .city .photo-bg::after{background:linear-gradient(180deg,var(--bg),rgba(7,8,11,.25) 22%,rgba(7,8,11,.3) 75%,var(--bg)),linear-gradient(90deg,rgba(7,8,11,.5),transparent 50%)}
html[data-mode="light"] .city-card{color:#e9e6de}
html[data-mode="light"] .city-card .eyebrow,html[data-mode="light"] .city-addr svg,html[data-mode="light"] .city-title span{color:#ffe08a}
html[data-mode="light"] .city-kicker,html[data-mode="light"] .city-card p{color:#e9e6de}
html[data-mode="light"] .city-addr{color:#fff}
html[data-mode="light"] .city .photo-credit{color:rgba(20,20,25,.6)}
html[data-mode="light"] .city-ghost{-webkit-text-stroke:1px rgba(138,92,0,.28)}

/* Tarjetas de categoría (foto + degradado oscuro: el texto se mantiene claro) */
html[data-mode="light"] .cat-count{color:#ffe08a!important}
html[data-mode="light"] .cat-card{box-shadow:0 10px 30px rgba(20,20,25,.08)}

/* Chips de estado con contraste sobre blanco */
html[data-mode="light"] .cond-nuevo{color:#0a7d47;border-color:rgba(10,125,71,.3);background:rgba(10,125,71,.06)}
html[data-mode="light"] .cond-sinsellos{color:#1f5fa8;border-color:rgba(31,95,168,.3);background:rgba(31,95,168,.06)}
html[data-mode="light"] .cond-openbox{color:#3a3a3e;border-color:rgba(58,58,62,.3);background:rgba(58,58,62,.06)}
html[data-mode="light"] .cond-generico{color:#8a4b00;border-color:rgba(138,75,0,.35);background:rgba(138,75,0,.06)}
html[data-mode="light"] .product-card,html[data-mode="light"] .why-card,html[data-mode="light"] .panel,html[data-mode="light"] .faq-item,html[data-mode="light"] .contact-item,html[data-mode="light"] .contact-form,html[data-mode="light"] .cmp-wrap{box-shadow:0 10px 30px rgba(20,20,25,.05)!important}

/* Pasos, CTA y FAQ */
html[data-mode="light"] .steps-section{background:radial-gradient(70% 60% at 50% 0%,rgba(242,189,69,.14),transparent 70%)!important}
html[data-mode="light"] .step-panel{background:linear-gradient(135deg,rgba(242,189,69,.12),#fff)}
html[data-mode="light"] .step-deliver{background:#fff}
html[data-mode="light"] .step-num{-webkit-text-stroke:1.5px rgba(138,92,0,.7)}
html[data-mode="light"] .faq-q{-webkit-text-stroke:1.5px rgba(138,92,0,.18)}
html[data-mode="light"] .cta-panel{background:radial-gradient(60% 120% at 100% 0%,rgba(242,189,69,.22),transparent 60%),linear-gradient(180deg,#ffffff,#f6f2e8)}
html[data-mode="light"] .cta-panel::before{background:linear-gradient(120deg,rgba(224,161,42,.8),rgba(20,20,25,.08) 40%,rgba(176,120,20,.7))}

/* Carrito, modales y avisos */
html[data-mode="light"] .cart-overlay,html[data-mode="light"] .modal-overlay{background:rgba(20,20,25,.45)!important}
html[data-mode="light"] .checkout-banks-note{color:#0f7a3a!important}
html[data-mode="light"] .btn-wa svg,html[data-mode="light"] .wa-float svg,html[data-mode="light"] .mb-wa{color:#128c4a!important}
html[data-mode="light"] .wa-float{background:rgba(255,255,255,.92)!important}
html[data-mode="light"] .mw-toast{background:#15151a!important;color:#fff}
html[data-mode="light"] .cookie-banner{background:#ffffff!important;color:var(--ink-2);box-shadow:0 20px 60px rgba(20,20,25,.18)}
html[data-mode="light"] .cookie-text a{color:#8a5c00}
html[data-mode="light"] .cookie-btn{color:var(--ink);border-color:var(--line-2)}
html[data-mode="light"] .cookie-btn-primary{color:#15110a}
html[data-mode="light"] .todo{color:#7a4b00!important;background:#fff3cd!important}
html[data-mode="light"] .photo-credit{color:rgba(255,255,255,.7)}
html[data-mode="light"] .catalog-tools select option,html[data-mode="light"] .cmp-selects select option,html[data-mode="light"] .form-select option{background:#fff;color:#15151a}
html[data-mode="light"] .mobile-bar .mb-count{background:#15151a!important;color:#ffd970!important}
/* Ajustes tras revisión del modo claro */
.nav-links a{white-space:nowrap}
@media(max-width:1340px){.nav-search{display:none!important}}
/* Sobre fotografía oscura el degradado de texto siempre es el brillante */
.city-slogan .grad,.xp .grad{background:linear-gradient(100deg,#ffe08a 0%,#f2bd45 48%,#cf8f1c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Pagos a todo el ancho (sin tabla de envíos) */
.pay-ship.pay-only{grid-template-columns:1fr}
@media(min-width:900px){.pay-only .pay-list{grid-template-columns:repeat(4,1fr)}}

/* Hero: render 3D de MacBook */
.hero2-art{border-radius:40px;mask-image:radial-gradient(80% 80% at 50% 50%,#000 72%,transparent 100%);-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 72%,transparent 100%);max-width:680px}
.hero2-visual .hero-device-card{bottom:-40px}
@media(min-width:901px){.hero2-visual .hero-device-card{bottom:-95px;left:-40px}}
/* Hero sin tarjeta destacada: la MacBook ocupa el espacio */
.hero2{padding-bottom:90px}
.hero2-art{max-width:720px}

/* ═══════════════════════════════════════════════════════════════
   MENOS CAJAS — estilo editorial: líneas finas, aire y tipografía.
   Solo los productos del catálogo conservan forma de tarjeta.
   ═══════════════════════════════════════════════════════════════ */

/* Pagos: columnas separadas por líneas, sin panel ni cajitas */
#pagos-envios .panel{background:none!important;border:0!important;box-shadow:none!important;padding:0;border-radius:0}
#pagos-envios .panel>h3{display:none}
.pay-only .pay-list{gap:0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin-top:8px}
.pay-list li{background:none!important;border:0!important;border-radius:0!important;padding:28px 24px 28px 0!important;flex-direction:column;align-items:flex-start!important;gap:14px!important}
@media(min-width:900px){.pay-only .pay-list li+li{border-left:1px solid var(--line)!important;padding-left:24px!important}}
@media(max-width:899px){.pay-list li+li{border-top:1px solid var(--line)!important}}
.pay-list li>span:last-child{font-family:var(--font-display);font-size:18px;font-weight:600}
.pay-list li small{font-family:var(--font-body);font-size:14px;font-weight:400;margin-top:6px;line-height:1.55}
.pay-ico{background:none!important;border:0!important;width:auto!important;height:auto!important;color:var(--gold-2)!important}
.pay-ico svg{width:26px;height:26px}
#finNote{margin-top:16px}

/* Por qué MacWorld: columnas con línea superior */
.grid-why{gap:0!important;border-top:1px solid var(--line-2);margin-top:44px}
.why-card{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:32px 32px 8px 0!important;transform:none!important;position:relative}
.why-card:hover{transform:none!important}
@media(min-width:900px){.why-card+.why-card{border-left:1px solid var(--line)!important;padding-left:32px!important}}
.why-card::before{content:'';position:absolute;top:-1px;left:0;width:56px;height:2px;background:var(--grad)}
@media(min-width:900px){.why-card+.why-card::before{left:32px}}
.why-icon{background:none!important;border:0!important;width:auto!important;height:auto!important;margin-bottom:18px!important;justify-content:flex-start!important}
.why-icon svg{width:28px;height:28px}
.why-card h3{font-size:21px!important}

/* Pasos: sin recuadro, número grande + texto con línea divisoria */
.step-panel,html[data-mode="light"] .step-panel{background:none!important;border:0!important;border-radius:0!important;padding:34px 0 0!important;border-top:1px solid var(--line-2)!important;overflow:visible}
.step-deliver,html[data-mode="light"] .step-deliver{background:none!important;border:0!important;border-left:2px solid var(--gold-2)!important;border-radius:0!important;padding:4px 0 4px 18px!important}
.step-dot{background:var(--bg)!important}
.step-tab[aria-selected="true"] .step-dot{background:var(--grad)!important}

/* FAQ: filas con línea, pestañas como texto subrayado */
.faq-tabs{gap:24px!important;border-bottom:1px solid var(--line-2);margin-bottom:6px!important}
.faq-tab{background:none!important;border:0!important;border-radius:0!important;padding:10px 0!important;color:var(--muted)!important;position:relative;min-height:44px}
.faq-tab span{background:none!important;color:var(--gold-2);padding:0!important}
.faq-tab.active{color:var(--heading)!important}
.faq-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad)}
.faq-list{gap:0!important}
.faq-item,.faq-item[open]{background:none!important;border:0!important;border-bottom:1px solid var(--line-2)!important;border-radius:0!important;box-shadow:none!important}
.faq-item summary{padding:24px 48px 24px 0!important;font-size:17px!important}
.faq-item summary::after{right:6px!important}
.faq-a{padding:0 0 24px 36px!important}
.faq-help{background:none!important;border:0!important;border-top:1px solid var(--line-2)!important;border-radius:0!important;padding:22px 0 0!important}

/* Comparador: sin marco exterior, solo filas */
.cmp-wrap{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-top:1px solid var(--line-2)!important}
.cmp-table thead th{background:none!important}

/* Contacto: datos como lista con líneas, sin tarjetas */
.contact-info{gap:0!important}
.contact-item{background:none!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:22px 0!important}
.contact-item:first-child{border-top:1px solid var(--line)!important}
.contact-form{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
@media(min-width:769px){.contact-form{border-left:1px solid var(--line)!important;padding-left:48px!important}}
.map-box{border:0!important;border-radius:18px;margin-top:22px}

/* CTA final: banda abierta con líneas, sin caja */
.cta-panel,html[data-mode="light"] .cta-panel{background:none!important;border-radius:0!important;padding:56px 0!important;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.cta-panel::before{display:none!important}

/* Cifras: sin caja, líneas arriba y abajo */
.stats-strip,html[data-mode="light"] .stats-strip{background:none!important;border:0!important;border-radius:0!important;border-top:1px solid var(--line-2)!important;border-bottom:1px solid var(--line-2)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.stats-strip::before{display:none}

/* Guayaquil: texto directo sobre la foto, sin recuadro */
.city-card{background:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;text-shadow:0 2px 20px rgba(0,0,0,.6)}

/* Productos: tarjeta más ligera (sin borde visible) */
.product-card,.product-card:nth-child(n){border-color:transparent!important;background:rgba(var(--tint),.025)!important}
html[data-mode="light"] .product-card,html[data-mode="light"] .product-card:nth-child(n){background:#fff!important;box-shadow:0 1px 2px rgba(20,20,25,.04)!important}

/* Sin sombras que dibujen contornos en modo claro */
html[data-mode="light"] .why-card,html[data-mode="light"] .panel,html[data-mode="light"] .faq-item,html[data-mode="light"] .contact-item,html[data-mode="light"] .contact-form,html[data-mode="light"] .cmp-wrap{box-shadow:none!important}
/* Hero: la imagen se funde con el fondo, sin bordes rectangulares */
.hero2-art{border-radius:0!important;mask-image:radial-gradient(closest-side at 50% 52%,#000 62%,transparent 100%)!important;-webkit-mask-image:radial-gradient(closest-side at 50% 52%,#000 62%,transparent 100%)!important}
/* El render ya termina en el color de fondo: sin máscara (no se recortan las esquinas de la laptop) */
.hero2-art{mask-image:none!important;-webkit-mask-image:none!important;background:none}

/* Hero: bordes de la imagen desvanecidos (sin rectángulo visible en ningún ancho) */
.hero2-art{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)!important;-webkit-mask-composite:source-in!important;mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)!important;mask-composite:intersect!important}

/* Ficha de producto: bloques con línea divisoria, no cajas */
.modal-desc,.modal-box{background:none!important;border:0!important;border-top:1px solid var(--line-2)!important;border-radius:0!important;padding:20px 0 4px!important;margin:20px 0 0!important}
.modal-box h3{margin-bottom:8px!important}
/* Etiquetas de estado algo más oscuras en modo claro (contraste AA sobre marfil) */
html[data-mode="light"] .cond-nuevo{color:#066338!important}
html[data-mode="light"] .cond-sinsellos{color:#174f8f!important}
html[data-mode="light"] .cond-openbox{color:#2f2f33!important}
html[data-mode="light"] .cond-generico{color:#723e00!important}

/* Barras de desplazamiento ocultas dentro de ficha, carrito y checkout
   (se salían por las esquinas redondeadas). El contenido sigue
   desplazándose con rueda, toque o teclado. */
.product-modal,.checkout-body,.cart-items,.checkout-modal{scrollbar-width:none;-ms-overflow-style:none}
.product-modal::-webkit-scrollbar,.checkout-body::-webkit-scrollbar,.cart-items::-webkit-scrollbar,.checkout-modal::-webkit-scrollbar{display:none;width:0;height:0}
.product-modal{overflow-x:hidden}

/* Barra de desplazamiento fina DENTRO de la ficha (no toca las esquinas).
   Escritorio: solo se desplaza la columna de información; la foto queda fija. */
.product-modal{overflow:hidden!important;max-height:90vh}
.modal-grid{max-height:90vh}
@media(min-width:701px){
  .modal-details{overflow-y:auto;max-height:90vh;overscroll-behavior:contain}
}
@media(max-width:700px){
  .product-modal{max-height:92vh}
  .modal-grid{overflow-y:auto;max-height:92vh;overscroll-behavior:contain}
}
.modal-details,.modal-grid,.cart-items,.checkout-body{scrollbar-width:thin!important;scrollbar-color:var(--gold-2) transparent!important;-ms-overflow-style:auto}
.modal-details::-webkit-scrollbar,.modal-grid::-webkit-scrollbar,.cart-items::-webkit-scrollbar,.checkout-body::-webkit-scrollbar{display:block!important;width:6px!important}
.modal-details::-webkit-scrollbar-track,.modal-grid::-webkit-scrollbar-track,.cart-items::-webkit-scrollbar-track,.checkout-body::-webkit-scrollbar-track{background:transparent;margin:28px 0}
.modal-details::-webkit-scrollbar-thumb,.modal-grid::-webkit-scrollbar-thumb,.cart-items::-webkit-scrollbar-thumb,.checkout-body::-webkit-scrollbar-thumb{background:var(--gold-2);border-radius:6px}

/* Foto real del local en Contacto */
.local-photo{margin:26px 0 0}
.local-photo a{position:relative;display:block;border-radius:20px;overflow:hidden;isolation:isolate}
.local-photo img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.local-photo a:hover img{transform:scale(1.03)}
.local-photo-cta{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:var(--grad);color:#15110a;font-weight:700;font-size:13px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.local-photo figcaption{display:flex;gap:10px;align-items:flex-start;margin-top:14px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.local-photo figcaption svg{color:var(--gold-2);flex-shrink:0;margin-top:2px}
.local-photo figcaption strong{color:var(--heading)}
.city-ref{font-size:14px;color:#ffe08a!important;margin:-4px 0 14px!important;font-weight:600}
@media (prefers-reduced-motion:reduce){.local-photo a:hover img{transform:none}}

/* Foto del local (izquierda) y mapa (derecha), mismo tamaño */
.local-row{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px;align-items:start}
.local-row .local-photo{margin:0}
.local-row .map-box{margin:0!important;aspect-ratio:1400/1120;border-radius:20px;overflow:hidden}
.local-row .map-ph{height:100%!important;border-radius:20px}
.local-row .map-box iframe{width:100%;height:100%!important;display:block;border:0}
@media(max-width:768px){.local-row{grid-template-columns:1fr;gap:20px;margin-top:36px}}