/* Yool Center — skin tienda pública, clonado del look Dhru Fusion clásico
   (referencia: pkunlocker.com) — morado + camel/dorado + navy oscuro, tema claro. */
:root{
  --purple:#3D1152; --purple-dark:#2A0C3A; --purple-soft:#5A1E78;
  --tan:#B08D5C; --tan-dark:#96733F; --tan-soft:#D9C097;
  --navy:#0F1B2E; --navy-2:#16233D;
  --ink:#1F2430; --ink-soft:#4B5265; --muted:#6B7280; --faint:#9AA1AE;
  --bg:#F1F2F5; --white:#FFFFFF; --border:#E5E7EB;
  --green:#25D366; --blue-tg:#229ED9; --orange:#E2472A;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow:0 2px 10px rgba(17,17,17,.06); --shadow-md:0 8px 28px rgba(17,17,17,.10);
  --wrap:1180px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15px; line-height:1.6;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:20px}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
input,select{font-family:inherit}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-0.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--tan); outline-offset:2px}
::selection{background:rgba(176,141,92,.35)}
.tiny{font-size:12px; color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---------- barra superior ---------- */
.microbar{background:var(--navy); color:#cfd6e4; font-size:12.5px}
.microbar .wrap{display:flex; justify-content:space-between; align-items:center; padding-block:7px; flex-wrap:wrap; gap:8px}
.microbar-left{display:flex; gap:18px; flex-wrap:wrap}
.microbar-left span{display:inline-flex; align-items:center; gap:6px}
.microbar-lang{display:flex; align-items:center; gap:5px; color:#cfd6e4}

/* ---------- header ---------- */
.site-header{background:var(--white); border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex; align-items:center; gap:24px; padding-block:14px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--purple); white-space:nowrap}
.brand .mark{width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--tan),var(--tan-dark));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; flex:none}
.brand b{color:var(--tan-dark)}
.main-nav{display:flex; gap:22px; margin-left:8px; flex:1}
.main-nav a{font-size:14px; font-weight:500; color:var(--ink-soft)}
.main-nav a:hover{color:var(--purple)}
.hdr-account{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.hdr-saldo{font-size:12.5px; color:var(--ink-soft); white-space:nowrap}
.hdr-saldo b{color:var(--tan-dark); font-variant-numeric:tabular-nums}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:600;
  padding:10px 18px; border-radius:var(--r-sm); border:none; color:#fff;
  background:linear-gradient(135deg,var(--tan),var(--tan-dark)); box-shadow:0 3px 10px rgba(176,141,92,.35);
  transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(176,141,92,.45)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--purple);
  background:#fff; border:1.5px solid var(--purple); padding:9px 17px; border-radius:var(--r-sm)}
.btn-ghost:hover{background:rgba(61,17,82,.05)}
.btn-sm{font-size:12.5px; padding:7px 13px}
.btn-full{width:100%}
.btn-green{background:var(--green); box-shadow:0 3px 10px rgba(37,211,102,.35)}
.btn-tg{background:var(--blue-tg); box-shadow:0 3px 10px rgba(34,158,217,.35)}

/* ---------- barra morada de categorías ---------- */
.cat-nav{background:linear-gradient(90deg,var(--purple),var(--purple-soft)); position:relative; z-index:30}
.cat-nav .wrap{display:flex; align-items:center; gap:4px; padding-block:0; position:relative}
.cat-nav-item{font-size:13.5px; font-weight:600; color:#fff; padding:13px 16px; opacity:.92; border:none; background:none;
  display:flex; align-items:center; gap:5px}
.cat-nav-item:hover{opacity:1; background:rgba(255,255,255,.08)}
.cat-nav-item.active, .cat-nav-item[aria-expanded="true"]{opacity:1; background:rgba(255,255,255,.14)}
.cat-nav-item .car{font-size:9px; transition:transform .15s}
.cat-nav-item[aria-expanded="true"] .car{transform:rotate(180deg)}
.cat-nav-search{margin-left:auto; color:#fff; opacity:.85; padding:10px; display:flex}
.cat-nav-search:hover{opacity:1}

/* mega-menú desplegable (clon del dropdown de Dhru Fusion) — a todo el ancho */
.mega-menu{position:absolute; left:0; right:0; top:100%; background:#fff; border-top:2px solid var(--tan);
  box-shadow:var(--shadow-md); max-height:420px; overflow-y:auto; padding:22px 0; z-index:35}
.mega-menu[hidden]{display:none}
.mega-cols{display:flex; gap:28px; align-items:flex-start}
.mega-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column}
.mega-link{display:block; font-size:13px; color:var(--ink-soft); padding:6px 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mega-link:hover{color:var(--purple); text-decoration:underline}
.mega-menu::-webkit-scrollbar{width:9px}
.mega-menu::-webkit-scrollbar-track{background:#f4f4f6}
.mega-menu::-webkit-scrollbar-thumb{background:#d3cbe0; border-radius:99px}
@media (max-width:900px){ .mega-cols{flex-wrap:wrap} .mega-col{flex-basis:45%} }
@media (max-width:640px){ .mega-col{flex-basis:100%} }

/* botón flotante de WhatsApp */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:60; width:56px; height:56px; border-radius:50%;
  background:var(--green); color:#fff; display:grid; place-items:center; box-shadow:0 8px 22px rgba(37,211,102,.5);
  animation:waPulse 2.4s ease-in-out infinite}
.wa-float:hover{transform:scale(1.06)}
@keyframes waPulse{0%,100%{box-shadow:0 8px 22px rgba(37,211,102,.5)} 50%{box-shadow:0 8px 22px rgba(37,211,102,.5),0 0 0 8px rgba(37,211,102,.14)}}

/* puntos de carrusel del hero (decorativo) */
.hero-dots{display:flex; gap:6px; margin-top:26px}
.hero-dots span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35)}
.hero-dots span.active{background:var(--tan-soft); width:20px; border-radius:4px}

/* ---------- hero ---------- */
.hero-banner{background:radial-gradient(circle at 20% 20%, var(--purple-soft), var(--purple) 60%, var(--purple-dark));
  color:#fff; position:relative; overflow:hidden}
.hero-banner::after{content:""; position:absolute; inset:0;
  background:radial-gradient(500px 300px at 85% 30%, rgba(176,141,92,.35), transparent 70%)}
.hero-banner .wrap{position:relative; z-index:1; padding-block:52px 34px}
.hero-eyebrow{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tan-soft); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:5px 12px; border-radius:99px; margin-bottom:16px}
.hero-banner h1{font-size:clamp(28px,5vw,44px); line-height:1.15; max-width:16ch; text-wrap:balance}
.hero-banner h1 span{color:var(--tan-soft)}
.hero-banner p{margin-top:14px; font-size:15px; color:#d9d3e2; max-width:56ch}
.hero-cta{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
.contact-strip{margin-top:30px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md); padding:14px 20px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; font-size:13px}
.contact-strip span{display:inline-flex; align-items:center; gap:8px; color:#e7e2ee}

/* ---------- tarjetas de confianza ---------- */
.trust-wrap{margin-top:-30px; position:relative; z-index:2}
.trust-grid{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.trust-card{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:22px}
.trust-card h4{font-size:15px; margin-bottom:4px}
.trust-card p{font-size:12.5px; color:var(--muted)}
.trust-stats{display:flex; gap:10px; margin-top:14px}
.trust-stat{flex:1; text-align:center; background:var(--bg); border-radius:var(--r-sm); padding:10px 6px}
.trust-stat b{display:block; font-size:18px; color:var(--purple)}
.trust-stat span{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.trust-badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#0a8a3f;
  background:#eafaf0; padding:6px 10px; border-radius:99px; margin-top:12px}
.stars{color:#f5a623; letter-spacing:2px; font-size:14px; margin-top:6px}
.trust-actions{display:flex; flex-direction:column; gap:8px; margin-top:14px}

/* ---------- banners oscuros ---------- */
.dark-banner{background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:18px 22px;
  text-align:center; margin-top:24px}
.dark-banner .pill{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); background:var(--tan-soft); padding:4px 11px; border-radius:99px; margin-bottom:8px}
.dark-banner strong{font-size:15px}
.dark-banner p{font-size:12.5px; color:#aab3c6; margin-top:6px}

.feature-banner{background:linear-gradient(120deg,var(--navy-2),var(--navy)); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg); padding:24px 26px; margin-top:20px; display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between; color:#fff}
.feature-banner .fb-badge{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#8fe3c7; background:rgba(37,211,102,.12); padding:4px 10px; border-radius:99px; margin-bottom:10px}
.feature-banner h3{font-size:19px}
.feature-banner p{font-size:13px; color:#b7bfd1; margin-top:6px; max-width:46ch}
.fb-chips{display:flex; gap:8px; flex-wrap:wrap}
.fb-chip{font-size:11.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  padding:8px 13px; border-radius:var(--r-sm)}
.fb-chip.hi{background:var(--tan); border-color:transparent; color:#241a0d}

/* ---------- grid de logos ---------- */
.logos-section{margin-top:28px}
.logos-head{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.logos-head .bar{width:4px; height:18px; background:var(--tan); border-radius:2px}
.logos-head h3{font-size:15px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink)}
.logos-card{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:22px;
  border-top:3px solid var(--tan)}
.logos-grid{display:grid; grid-template-columns:repeat(9,1fr); gap:10px}
.logo-tile{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:8px 4px;
  border-radius:var(--r-sm); border:1px solid var(--border)}
.logo-tile .ic{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px}
.logo-tile span{font-size:9.5px; font-weight:600; color:var(--ink-soft); line-height:1.2}

/* ---------- banner comunidad ---------- */
.community-banner{background:var(--navy); border-radius:var(--r-lg); padding:34px 24px; text-align:center;
  color:#fff; margin-top:28px}
.community-banner .eyebrow-c{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tan-soft); font-weight:700}
.community-banner h3{font-size:21px; margin-top:8px}
.community-banner p{font-size:13px; color:#a9b1c4; margin-top:8px; max-width:52ch; margin-inline:auto}
.community-btns{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:20px}
.cb-btn{font-size:12.5px; font-weight:600; color:#fff; border:1.5px solid rgba(255,255,255,.25);
  padding:10px 18px; border-radius:99px}
.cb-btn:hover{border-color:#fff; background:rgba(255,255,255,.06)}

/* ---------- catálogo ---------- */
.cat-section{margin-top:32px}
.cat-title{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.cat-title .bar{width:4px; height:20px; background:var(--tan); border-radius:2px}
.cat-title h2{font-size:20px}
.cat-sub{font-size:13px; color:var(--muted); margin-bottom:18px}

.cat-panel-wrap{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px}
.cat-toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.cat-search-wrap{position:relative; flex:1 1 240px; display:flex; align-items:center; color:var(--faint)}
.cat-search-wrap svg{position:absolute; left:13px; pointer-events:none}
.cat-search{width:100%; font-size:13.5px; color:var(--ink); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 14px 10px 36px; outline:none}
.cat-search:focus{border-color:var(--tan)}
.cat-search::placeholder{color:var(--faint)}
.cat-group-select{font-size:13px; color:var(--ink); background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:10px 13px; outline:none; min-width:150px}
.cat-hot-toggle{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft);
  padding:9px 13px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--border); white-space:nowrap}
.cat-hot-toggle input{accent-color:var(--tan)}
.cat-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.cat-pill{font-size:12.5px; font-weight:600; padding:7px 15px; border-radius:99px;
  color:var(--purple); background:#f4effa; border:1px solid #e6dced}
.cat-pill:hover{background:#ece2f5}
.cat-pill.active{color:#fff; background:linear-gradient(135deg,var(--purple),var(--purple-soft)); border-color:transparent}

.cat-summary{font-size:12px; color:var(--muted); margin:16px 2px 4px}
.cat-groups{display:flex; flex-direction:column; gap:14px; margin-top:10px}
.cat-groups-wrap{overflow-x:auto}
.group-card{border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:#fff}
.group-head{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bg);
  border-bottom:1px solid var(--border)}
.group-head h4{font-size:13.5px; font-weight:700; color:var(--purple); margin:0}
.group-count{font-size:11px; color:var(--muted); background:#fff; border:1px solid var(--border); padding:2px 8px; border-radius:99px}
.cat-table{width:100%; border-collapse:collapse; min-width:520px; font-size:13.5px}
.cat-table td{padding:11px 16px; border-bottom:1px solid var(--border); color:var(--ink-soft); white-space:nowrap}
.cat-table tbody tr:hover td{background:#faf8fb}
.cat-table tbody tr:last-child td{border-bottom:none}
.cat-name{color:var(--ink); font-weight:500; white-space:normal; max-width:340px}
.cat-name .hotdot{color:var(--orange); margin-right:5px}
.cat-time{font-size:12px; color:var(--blue-tg)}
.cat-price{font-weight:700; color:var(--tan-dark); font-variant-numeric:tabular-nums; font-size:14.5px}
.cat-price small{font-weight:400; color:var(--faint); font-size:10.5px}
.cat-buy{font-size:11.5px; padding:7px 14px; border-radius:var(--r-sm)}
.cat-empty{padding:40px 20px; text-align:center; color:var(--faint); font-size:13.5px}
.cat-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:12px}

/* mis compras */
.mycomp{margin-top:16px; padding:18px 20px; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow)}
.mc-row{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px}
.mc-row:last-child{border-bottom:none}
.mc-name{color:var(--ink)}
.mc-meta{color:var(--faint); font-size:11.5px}

/* ---------- footer ---------- */
.site-footer{margin-top:44px; background:#fff; border-top:1px solid var(--border)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px; padding-block:32px}
.footer-grid h5{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.footer-grid .fbrand{font-weight:800; font-size:18px; color:var(--purple); margin-bottom:8px}
.footer-grid p{font-size:12.5px; color:var(--muted)}
.footer-links{display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--ink-soft)}
.footer-links a:hover{color:var(--purple)}
.footer-bottom{background:var(--navy); color:#aab3c6}
.footer-bottom .wrap{display:flex; justify-content:space-between; align-items:center; padding-block:14px;
  flex-wrap:wrap; gap:10px; font-size:12px}
.pay-icons{display:flex; gap:10px; align-items:center; opacity:.85}
.pay-icons svg{height:18px}

/* ---------- modales (registro/login/recarga/google) ---------- */
.modal-backdrop{position:fixed; inset:0; z-index:100; background:rgba(15,15,20,.55);
  backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px}
.modal{width:100%; max-width:400px; padding:26px 24px; position:relative; background:#fff;
  border-radius:var(--r-lg); box-shadow:var(--shadow-md)}
.modal h3{font-size:19px; margin-bottom:4px; color:var(--purple)}
.modal .tiny{margin-bottom:18px; display:block}
.modal-close{position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center; color:var(--faint); background:var(--bg); border:none}
.modal-close:hover{color:var(--ink)}
.field{margin-bottom:14px}
.field label{display:block; font-size:12px; color:var(--ink-soft); margin-bottom:6px}
.field input, .field select{width:100%; font-size:14px; color:var(--ink); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 13px; outline:none}
.field input:focus{border-color:var(--tan)}
.modal-msg{font-size:12.5px; padding:10px 13px; border-radius:var(--r-sm); margin-bottom:14px; display:none}
.modal-msg.show{display:block}
.modal-msg.err{background:#fdecea; color:#c0392b}
.modal-msg.ok{background:#eafaf0; color:#0a8a3f}
.modal-switch{text-align:center; margin-top:16px; font-size:12.5px; color:var(--muted)}
.modal-switch a{font-weight:600; color:var(--purple)}
.code-banner{background:#faf6ef; border:1px solid var(--tan-soft); border-radius:var(--r-sm);
  padding:12px 14px; margin-bottom:14px; font-size:12.5px; color:var(--ink-soft)}
.code-banner b{display:block; font-size:20px; letter-spacing:.3em; color:var(--tan-dark); margin-top:5px}

.g-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  font-size:14px; font-weight:600; color:#3c4043; background:#fff; border:1px solid #dadce0;
  border-radius:99px; padding:10px 16px}
.g-btn:hover{background:#f8f9fa; box-shadow:0 1px 6px rgba(0,0,0,.14)}
.g-divider{display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--faint); font-size:12px}
.g-divider::before, .g-divider::after{content:""; flex:1; height:1px; background:var(--border)}
.g-badge{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); border:1px solid var(--border); padding:2px 6px; border-radius:5px; margin-left:8px; vertical-align:2px}
.g-chooser{max-width:360px; padding:0; overflow:hidden; text-align:center}
.g-chooser-head{padding:26px 24px 18px; border-bottom:1px solid var(--border)}
.g-chooser-head h4{font-size:17px; font-weight:500; color:var(--ink); margin-bottom:4px}
.g-chooser-head p{font-size:12.5px; color:var(--faint)}
.g-acc{display:flex; align-items:center; gap:13px; padding:13px 24px; text-align:left; width:100%; background:none; border:none}
.g-acc:hover{background:var(--bg)}
.g-avatar{width:34px; height:34px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--tan),var(--tan-dark));
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px}
.g-acc-name{font-size:13.5px; color:var(--ink); font-weight:500}
.g-acc-email{font-size:12px; color:var(--faint)}
.g-chooser-foot{padding:14px 24px 22px; font-size:11px; color:var(--faint); text-align:center}

/* pago demo */
.qr-wrap{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:16px}
.qr-card{background:#fff; padding:12px; border-radius:14px; border:1px solid var(--border)}
.qr-label{font-size:12px; color:var(--muted); text-align:center}
.amt-chips{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.amt-chip{flex:1; min-width:60px; text-align:center; font-size:13px; font-weight:600; padding:9px;
  border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--border); color:var(--ink-soft)}
.amt-chip.active{color:#fff; background:linear-gradient(135deg,var(--tan),var(--tan-dark)); border-color:transparent}
.btn.loading{opacity:.75; pointer-events:none}
.spin{display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; margin-right:7px; vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.demo-flag{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tan-dark); background:#faf1e3; padding:3px 8px; border-radius:6px; margin-bottom:10px}

/* toasts */
.toast-wrap{position:fixed; top:16px; right:16px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:320px}
.toast{padding:12px 16px; border-radius:var(--r-sm); font-size:13px; color:var(--ink);
  background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-md); animation:toastIn .3s both}
.toast.ok{border-color:#bfe8cf}
.toast.err{border-color:#f3c3bc}
@keyframes toastIn{from{opacity:0; transform:translateX(20px)} to{opacity:1; transform:none}}

@media (max-width:900px){
  .trust-grid{grid-template-columns:1fr}
  .logos-grid{grid-template-columns:repeat(5,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .site-header .wrap{flex-wrap:wrap; row-gap:8px}
  .main-nav{display:none}
  .hdr-account{gap:8px; width:100%}
  .hdr-saldo{width:100%; order:-1; white-space:normal}
  .cat-nav .wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; justify-content:flex-start}
  .cat-nav .wrap::-webkit-scrollbar{display:none}
  .cat-nav-item{padding:11px 12px; font-size:12.5px; white-space:nowrap; flex:none}
  .cat-nav-search{flex:none}
  .logos-grid{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .feature-banner{flex-direction:column; align-items:flex-start}
  .trust-stats{flex-wrap:wrap}

  /* catálogo: tabla → tarjeta apilada, SIN scroll lateral — así el precio y "Comprar"
     siempre quedan visibles */
  .cat-groups-wrap{overflow-x:visible}
  .cat-table{min-width:0; width:100%}
  .cat-table, .cat-table tbody{display:block; width:100%}
  .cat-table tr{
    display:flex; flex-wrap:wrap; align-items:center; row-gap:8px; column-gap:10px;
    padding:13px 16px; border-bottom:1px solid var(--border);
  }
  .cat-table tr:last-child{border-bottom:none}
  .cat-table td{display:block; padding:0; border:none; white-space:normal}
  .cat-table tbody tr:hover td{background:none}
  .cat-table .cat-name{flex:1 1 100%; order:1; max-width:100%}
  .cat-table .cat-time{order:2; flex:none}
  .cat-table .cat-price{order:3; margin-left:auto; flex:none; white-space:nowrap}
  .cat-table td:last-child{order:4; flex:none}
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important} .ticker-track{animation-duration:32s !important} }