/* ══════════════════════════════════════════════
   HAZTEUNSITIO.NET — 2027 Design System
   Glass · Aurora · Bento · 3D
   ══════════════════════════════════════════════ */

/* ─── 0. TOKENS ─────────────────────────────── */
:root{
  --bg:#03080f;
  --bg2:#080f1e;
  --bg3:#0d1628;
  --surface:rgba(255,255,255,.04);
  --surface2:rgba(255,255,255,.07);
  --surface3:rgba(255,255,255,.11);
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.14);
  --border3:rgba(255,255,255,.22);
  --blue:#2563eb;--blue-l:#3b82f6;--blue-d:#1d4ed8;
  --blue-glow:rgba(37,99,235,.35);
  --purple:#7c3aed;--purple-l:#8b5cf6;
  --purple-glow:rgba(124,58,237,.3);
  --cyan:#06b6d4;--cyan-glow:rgba(6,182,212,.3);
  --green:#10b981;--green-glow:rgba(16,185,129,.25);
  --amber:#f59e0b;--pink:#ec4899;
  --text:#f1f5f9;--text2:#94a3b8;--text3:#475569;--text-dark:#0f172a;
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-heading:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --r:10px;--r-lg:16px;--r-xl:22px;--r-2xl:32px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:0 12px 48px rgba(0,0,0,.6);
  --shadow-blue:0 0 40px rgba(37,99,235,.2);
  --t:.22s cubic-bezier(.4,0,.2,1);
  --t-slow:.4s cubic-bezier(.4,0,.2,1);
  --t-spring:.5s cubic-bezier(.34,1.56,.64,1);
  --ann-h:0px;--nav-h:68px;
}

/* ─── 1. RESET ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;border:none;outline:none;background:none}
button{cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);font-weight:700;
  line-height:1.15;letter-spacing:-.025em;color:var(--text);
}
code,pre,kbd,samp{font-family:var(--font-mono);font-size:.88em}
svg{display:inline-block;vertical-align:middle}

/* ─── 2. SCROLL PROGRESS ─────────────────────── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0d1628}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:99px}
#scroll-bar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--cyan));
  transition:width .1s linear;box-shadow:0 0 12px var(--blue-glow);
}

/* ─── 3. CONTAINER ───────────────────────────── */
.container{max-width:1240px;margin:0 auto;padding:0 24px}

/* ─── 4. ANNOUNCE BAR ───────────────────────── */
.announce-bar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--ann-h);
  background:linear-gradient(90deg,#1d4ed8,var(--purple),#1d4ed8);
  background-size:200% 100%;animation:annGrad 6s ease infinite;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:.8rem;font-weight:500;color:#fff;padding:0 52px 0 20px;
}
@keyframes annGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.ann-badge{
  background:rgba(255,255,255,.2);border-radius:99px;
  padding:2px 10px;font-size:.72rem;font-weight:700;letter-spacing:.04em;
}
.ann-link{color:#fff;font-weight:700;margin-left:8px;border-bottom:1px solid rgba(255,255,255,.5)}
.ann-close{
  position:absolute;right:14px;background:rgba(255,255,255,.15);
  width:26px;height:26px;border-radius:50%;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;transition:background var(--t);
}
.ann-close:hover{background:rgba(255,255,255,.3)}

/* ─── 5. NAVBAR ─────────────────────────────── */
.navbar{
  position:fixed;top:var(--ann-h);left:0;right:0;z-index:950;
  padding:8px 20px;transition:top var(--t),padding var(--t);
}
body.ann-hidden .navbar{top:0}

.nav-wrap{
  display:flex;align-items:center;gap:6px;
  height:var(--nav-h);padding:0 20px;
  background:rgba(5,12,32,.72);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:0 0 0 1px rgba(37,99,235,.12),var(--shadow-lg);
  transition:background var(--t),box-shadow var(--t);
}
.navbar.scrolled .nav-wrap{
  background:rgba(3,8,15,.88);
  box-shadow:0 0 0 1px rgba(37,99,235,.2),0 24px 80px rgba(0,0,0,.7);
}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-right:6px}
.nav-logo-img{height:40px;width:auto;display:block;filter:brightness(1.05);transition:filter var(--t)}
.nav-logo:hover .nav-logo-img{filter:brightness(1.2)}
.footer-logo-img{height:36px;width:auto;display:block;margin-bottom:16px;opacity:.9}
.nav-logo-mark{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 0 20px var(--blue-glow);
  animation:logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.nav-logo-name{
  font-family:var(--font-heading);font-size:.95rem;font-weight:800;
  color:#fff;letter-spacing:.02em;line-height:1;
}
.nav-logo-dot{
  background:linear-gradient(90deg,var(--blue),var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.nav-logo-sub{font-size:.6rem;color:var(--text2);font-weight:400;line-height:1;display:block;margin-top:3px}

/* Nav links */
.nav-links{display:flex;align-items:center;gap:1px;flex:1;overflow:visible}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:4px;padding:7px 13px;border-radius:9px;
  font-size:.82rem;font-weight:600;color:var(--text2);
  white-space:nowrap;cursor:pointer;transition:color var(--t),background var(--t);
}
.nav-arrow{
  font-size:.65rem;display:inline-block;
  transition:transform var(--t);opacity:.6;
  margin-left:-1px;
}
.nav-link svg{width:14px;height:14px;flex-shrink:0;transition:transform var(--t)}
.nav-link:hover,.nav-item.mega-open .nav-link{color:#fff;background:var(--surface2)}
.nav-item.mega-open .nav-link svg{transform:rotate(180deg)}
.nav-item.mega-open .nav-arrow{transform:rotate(180deg);opacity:1}
/* Per-category accent colors */
.nav-item:nth-child(1).mega-open .nav-link{background:rgba(37,99,235,.12);color:var(--blue-l)}
.nav-item:nth-child(2).mega-open .nav-link{background:rgba(16,185,129,.1);color:rgba(52,211,153,1)}
.nav-item:nth-child(3).mega-open .nav-link{background:rgba(124,58,237,.12);color:var(--purple-l)}
.nav-item:nth-child(4).mega-open .nav-link{background:rgba(245,101,28,.1);color:rgba(251,146,60,1)}
.nav-item:nth-child(5).mega-open .nav-link{background:rgba(6,182,212,.1);color:rgba(34,211,238,1)}
.nav-item:nth-child(6).mega-open .nav-link{background:rgba(168,85,247,.12);color:rgba(192,132,252,1)}
.nav-item:nth-child(7).mega-open .nav-link{background:rgba(20,184,166,.1);color:rgba(45,212,191,1)}

.nav-link-ai{
  background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(99,102,241,.12));
  color:var(--purple-l) !important;
}
.nav-ai-dot{
  width:7px;height:7px;background:var(--green);border-radius:50%;
  animation:pulse 2s ease-in-out infinite;flex-shrink:0;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,.4)}
  50%{opacity:.8;box-shadow:0 0 0 6px rgba(16,185,129,0)}
}

/* Dropdown/Mega */
.dropdown,.mega{
  position:absolute;top:calc(100% + 10px);left:0;
  background:rgba(5,12,32,.95);
  backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid var(--border2);border-radius:var(--r-lg);padding:8px;
  min-width:200px;box-shadow:0 32px 80px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
  pointer-events:none;z-index:200;
}
.dropdown::before,.mega::before{
  content:'';position:absolute;left:0;right:0;top:-14px;height:14px;
  background:transparent;pointer-events:auto;
}
.nav-item.mega-open .dropdown,.nav-item.mega-open .mega{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:all;
}
.dd-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  font-size:.82rem;font-weight:500;color:var(--text2);
  transition:background var(--t),color var(--t);cursor:pointer;
}
.dd-item:hover{background:var(--surface2);color:#fff}
.dd-icon{
  width:28px;height:28px;border-radius:7px;background:rgba(37,99,235,.15);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;
}
.dd-sep{height:1px;background:var(--border);margin:5px 8px}

/* ─── MEGA MENU V2 — Professional with images ─── */
.mega{
  min-width:700px;padding:0;overflow:hidden;
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
}

/* Two-column layout: image panel left + body right */
.mega-layout{display:grid;grid-template-columns:200px 1fr}

/* Left: featured image panel */
.mega-feature{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:260px;padding:20px 18px;
  background-image:var(--mf-img,linear-gradient(135deg,#0a1628,#0f2044));
  background-size:cover;background-position:center;
  border-right:1px solid var(--border);
  transition:background-size .4s ease;
}
.mega-feature:hover{background-size:110%}
.mega-feature::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(3,8,15,.98) 0%,rgba(3,8,15,.84) 30%,rgba(3,8,15,.65) 60%,rgba(3,8,15,.45) 100%);
}
.mf-inner{position:relative;z-index:1}
.mf-tag{
  display:inline-block;padding:3px 9px;margin-bottom:10px;
  background:rgba(37,99,235,.28);border:1px solid rgba(37,99,235,.45);
  border-radius:20px;font-size:.62rem;font-weight:700;color:var(--blue-l);
  letter-spacing:.07em;text-transform:uppercase;
}
.mf-title{
  font-family:var(--font-heading);font-size:.95rem;font-weight:800;
  color:#fff;line-height:1.2;margin-bottom:7px;
}
.mf-desc{
  font-size:.7rem;color:rgba(255,255,255,.6);line-height:1.5;margin-bottom:16px;
}
.mf-cta{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 13px;background:var(--blue);border-radius:8px;
  font-size:.74rem;font-weight:700;color:#fff;
  transition:background var(--t),gap var(--t);width:fit-content;
}
.mf-cta:hover{background:#1d4ed8;gap:8px}

/* Right: body with item grid */
.mega-body{
  padding:12px 12px 0;display:flex;flex-direction:column;
}
.mb-label{
  font-size:.62rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.08em;padding:0 8px;margin-bottom:6px;
}
.mb-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;flex:1}
.mb-item{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;
  transition:background var(--t),transform var(--t);cursor:pointer;text-decoration:none;
}
.mb-item:hover{background:var(--surface2);transform:translateX(2px)}
.mb-icon{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;border:none;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  transition:transform var(--t),box-shadow var(--t),filter var(--t);
}
.mb-item:hover .mb-icon{transform:scale(1.1) translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.45);filter:brightness(1.1)}
/* SVG icon class used inside .mb-icon and .mob-link-icon */
.mi{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mb-texts strong{display:block;font-size:.78rem;font-weight:700;color:#fff;line-height:1.2;margin-bottom:1px}
.mb-texts span{display:block;font-size:.68rem;color:var(--text2);line-height:1.3}
.mb-badge{
  display:inline-block;padding:1px 5px;border-radius:4px;
  font-size:.58rem;font-weight:800;background:rgba(37,99,235,.3);color:var(--blue-l);
  margin-left:4px;vertical-align:middle;letter-spacing:.03em;
}

/* Game thumbnail grid for GameHost mega */
.mb-games{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 0 8px}
.mb-games + div .mb-item{transform:none!important}
.mb-game{
  border-radius:9px;overflow:hidden;position:relative;
  aspect-ratio:16/9;background:var(--surface2);border:1px solid var(--border);
  transition:transform var(--t),border-color var(--t);cursor:pointer;text-decoration:none;
}
.mb-game:hover{transform:translateY(-3px);border-color:rgba(37,99,235,.4)}
.mb-game img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.mb-game:hover img{transform:scale(1.08)}
.mb-game-label{
  position:absolute;bottom:0;left:0;right:0;
  padding:12px 6px 6px;
  background:linear-gradient(to top,rgba(3,8,15,.92),transparent);
  font-size:.67rem;font-weight:700;color:#fff;text-align:center;
}

/* Promo bar — full width below layout */
.mega-promo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:8px;padding:10px 14px;border-radius:10px;
  background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(124,58,237,.1));
  border:1px solid rgba(37,99,235,.2);
}
.mega-promo span{font-size:.77rem;font-weight:500;color:var(--text2)}
.mega-promo span strong{color:#fff;font-weight:700}
.mega-promo-link{
  font-size:.73rem;font-weight:700;color:var(--blue-l);white-space:nowrap;
  transition:color var(--t);flex-shrink:0;
}
.mega-promo-link:hover{color:#fff}

/* Support panel extras */
.mega-feature--support{background-color:#050c20}
.mf-contact-info{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.mf-contact-row{display:flex;align-items:center;gap:7px;font-size:.7rem;color:rgba(255,255,255,.7)}
.mf-contact-row .mi{color:rgba(255,255,255,.5);flex-shrink:0}
.mf-status-pill{
  display:flex;align-items:center;gap:6px;margin-top:3px;
  background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);
  border-radius:20px;padding:4px 9px;width:fit-content;
  font-size:.65rem;font-weight:600;color:rgba(52,211,153,1);
}
.mf-status-dot{
  width:6px;height:6px;border-radius:50%;background:#10b981;flex-shrink:0;
  box-shadow:0 0 6px rgba(16,185,129,.6);animation:pulse 2s ease-in-out infinite;
}
.mb-sep{height:1px;background:var(--border);margin:4px 6px}

/* Legacy compat */
.mega-item{display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px;transition:background var(--t);cursor:pointer;text-decoration:none}
.mega-item:hover{background:var(--surface2)}
.mega-icon{width:34px;height:34px;border-radius:9px;background:rgba(37,99,235,.15);display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0}
.mega-item div{display:flex;flex-direction:column;gap:2px}
.mega-item div strong{display:block;font-size:.82rem;font-weight:700;color:#fff;line-height:1.2}
.mega-item div span{display:block;font-size:.72rem;color:var(--text2);line-height:1.2}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px}
.mega-promo-text{display:block;font-size:.8rem;font-weight:700;color:#fff}
.mega-promo-sub{display:block;font-size:.7rem;color:var(--text2);margin-top:2px}

/* ─── NAV UTILS & SELECTORS ──────────────────── */
.nav-utils{display:flex;align-items:center;gap:6px;flex-shrink:0}
.nav-divider{width:1px;height:22px;background:var(--border2);margin:0 4px;flex-shrink:0}
/* Mobile-only login button in navbar */
.mob-login-btn{
  display:none;align-items:center;gap:5px;
  padding:7px 13px;border-radius:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);font-size:.76rem;font-weight:700;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  transition:background var(--t),color var(--t);
}
.mob-login-btn:hover{background:rgba(255,255,255,.13);color:#fff}
.sel-wrap{position:relative}
.sel-btn{
  display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:9px;
  background:var(--surface);border:1px solid var(--border);
  font-size:.74rem;font-weight:600;color:var(--text2);
  transition:background var(--t),color var(--t),border-color var(--t);cursor:pointer;
}
.sel-btn:hover{background:var(--surface2);color:#fff;border-color:var(--border2)}
.sel-btn svg{width:12px;height:12px;transition:transform var(--t);opacity:.6}
.sel-btn.open svg{transform:rotate(180deg)}

/* Real flag images */
.flag-img{
  width:18px;height:13px;object-fit:cover;border-radius:2px;
  display:inline-block;flex-shrink:0;vertical-align:middle;
  border:1px solid rgba(255,255,255,.08);
}
.sel-code{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--text)}

/* Selector popup */
.sel-popup{
  position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(5,12,32,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border2);border-radius:var(--r-lg);padding:6px;min-width:200px;
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);
  transition:opacity var(--t),transform var(--t),visibility var(--t);z-index:300;
}
.sel-popup.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sel-popup-title{
  font-size:.6rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.09em;padding:6px 10px 4px;
}
.sel-popup-div{height:1px;background:var(--border);margin:5px 4px}
.sel-opt{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;
  font-size:.78rem;font-weight:500;color:var(--text2);
  transition:background var(--t),color var(--t);cursor:pointer;
}
.sel-opt:hover,.sel-opt.active{background:var(--surface2);color:#fff}
.sel-opt-sym{
  width:22px;height:22px;border-radius:5px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:#fff;
}
.sel-opt-flag{flex-shrink:0;display:flex;align-items:center}
.sel-opt-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.sel-opt-name{font-size:.79rem;font-weight:700;color:#fff;white-space:nowrap}
.sel-opt-sub{font-size:.67rem;color:var(--text2)}
.sel-opt-check{color:var(--blue-l);font-size:.75rem;font-weight:700;flex-shrink:0}

/* ─── HAMBURGER ──────────────────────────────── */
.hamburger{
  display:none;flex-direction:column;gap:5px;
  width:38px;height:38px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);
  align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--t),border-color var(--t);
}
.hamburger:hover{background:var(--surface2);border-color:var(--border2)}
.hamburger span{
  display:block;width:18px;height:2px;background:var(--text2);
  border-radius:2px;transition:all .22s ease;
}
.hamburger.open{background:var(--surface2);border-color:var(--border2)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:#fff}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:#fff}

/* ─── MOBILE NAV — hidden on desktop ────────── */
.mobile-nav{display:none}

/* Mobile nav overlay backdrop */
.mob-backdrop{
  display:none;position:fixed;inset:0;z-index:934;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .22s ease;
}
.mob-backdrop.open{opacity:1}

/* Mobile nav accordion sections */
.mob-acc{margin-bottom:2px}
.mob-acc+.mob-acc{border-top:1px solid var(--border);padding-top:2px;margin-top:2px}
.mob-acc-hdr{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;
  background:none;border:none;cursor:pointer;text-align:left;
  transition:background var(--t);
}
.mob-acc-hdr:hover,.mob-acc-hdr[aria-expanded="true"]{background:rgba(255,255,255,.05)}
.mob-acc-ico{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.mob-acc-label{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.06em;flex:1}
.mob-acc-arrow{color:var(--text3);transition:transform .2s ease;flex-shrink:0}
.mob-acc-hdr[aria-expanded="true"] .mob-acc-arrow{transform:rotate(180deg)}
.mob-acc-body{padding:0 4px 4px}
.mob-acc-body[hidden]{display:none}
.mob-sub-label{
  display:block;
  font-size:.58rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.09em;
  padding:6px 14px 3px;
}
.mob-sub-label:first-child{padding-top:2px}

/* Links inside accordion body */
.mob-link{
  display:flex;align-items:center;gap:9px;
  padding:6px 8px;border-radius:10px;margin:1px 2px;
  font-size:.83rem;color:var(--text2);
  transition:background var(--t),color var(--t);text-decoration:none;
}
.mob-link:hover,.mob-link:active{background:var(--surface2);color:#fff}
.mob-link-ico{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.mob-link-ico .mi{width:13px;height:13px}
.mob-link-texts{flex:1;min-width:0}
.mob-link-texts strong{display:block;font-size:.79rem;font-weight:700;color:#fff;line-height:1.2}
.mob-link-texts span{display:block;font-size:.64rem;color:var(--text2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mob-link-arrow{margin-left:auto;color:var(--text3);font-size:.75rem;flex-shrink:0;padding-left:2px}

/* Bottom selectors + CTA */
.mob-bottom{
  margin-top:10px;padding-top:12px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;
}
.mob-sels{display:flex;gap:8px}
.mob-sels .sel-btn{flex:1;justify-content:center}
.mob-utils{display:flex;gap:8px}
.mob-utils .btn{flex:1;justify-content:center;text-align:center}

@media(max-width:1024px){
  .hamburger{display:flex}
  .mob-backdrop{display:block}
  .mobile-nav{
    display:flex;flex-direction:column;
    position:fixed;
    top:calc(var(--ann-h) + var(--nav-h) + 8px);
    left:8px;right:8px;bottom:12px;
    height:calc(100dvh - var(--ann-h) - var(--nav-h) - 20px);
    max-height:calc(100dvh - var(--ann-h) - var(--nav-h) - 20px);
    background:rgba(4,10,26,.98);
    backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
    border:1px solid var(--border2);border-radius:22px;
    padding:14px 12px calc(16px + env(safe-area-inset-bottom,0px));
    z-index:960;
    visibility:hidden;opacity:0;
    transform:translateY(-12px) scale(.97);
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;touch-action:pan-y;
    box-shadow:0 40px 80px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
  }
  body.ann-hidden .mobile-nav{
    top:calc(var(--nav-h) + 8px);
    height:calc(100dvh - var(--nav-h) - 20px);
    max-height:calc(100dvh - var(--nav-h) - 20px);
  }
  .mobile-nav.open{
    visibility:visible;opacity:1;
    transform:translateY(0) scale(1);
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear;
  }
}

/* ─── 6. BUTTONS ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r);font-weight:700;cursor:pointer;
  transition:all var(--t);white-space:nowrap;border:1px solid transparent;font-size:.85rem;
}
.btn-sm{padding:8px 18px;font-size:.78rem;border-radius:9px}
.btn-lg{padding:14px 28px;font-size:.9rem;border-radius:13px}
.btn-primary{
  background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;
  box-shadow:0 4px 20px var(--blue-glow);border-color:rgba(255,255,255,.1);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--blue-l),var(--blue));
  transform:translateY(-2px);box-shadow:0 8px 32px rgba(37,99,235,.5);
}
.btn-secondary{
  background:var(--surface2);color:var(--text);border:1px solid var(--border2);
}
.btn-secondary:hover{background:var(--surface3);transform:translateY(-1px);border-color:var(--border3)}
.btn-glass{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:#fff;backdrop-filter:blur(12px);
}
.btn-glass:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.13)}
.btn-ghost:hover{background:rgba(255,255,255,.11);color:#fff;border-color:rgba(255,255,255,.22)}

/* ─── 7. TAGS ────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:99px;font-size:.75rem;font-weight:700;letter-spacing:.04em;
}
.tag-blue{background:rgba(37,99,235,.15);color:#60a5fa;border:1px solid rgba(37,99,235,.2)}
.tag-green{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.2)}
.tag-new{background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(99,102,241,.15));color:#a78bfa;border:1px solid rgba(124,58,237,.25)}
.tag-amber{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.2)}

/* ─── 8. HERO ESPACIAL PROFESIONAL ───────────── */
/* gradient-text preserved for section headers */
.gradient-text{
  background:linear-gradient(135deg,var(--blue-l),var(--purple-l),var(--cyan));
  background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:gradShift 5s ease infinite;
}
.gradient-text-cyan{background:linear-gradient(135deg,var(--cyan),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.gradient-text-purple{background:linear-gradient(135deg,var(--purple-l),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.hero-space{
  position:relative;min-height:auto;
  margin-top:calc(var(--ann-h) + var(--nav-h));
  background:
    radial-gradient(ellipse at 72% 20%, rgba(37,99,235,.38) 0%, transparent 42%),
    radial-gradient(ellipse at 18% 65%, rgba(109,40,217,.28) 0%, transparent 40%),
    radial-gradient(ellipse at 55% 95%, rgba(14,60,180,.22) 0%, transparent 35%),
    radial-gradient(ellipse at 85% 75%, rgba(79,70,229,.18) 0%, transparent 30%),
    #020810;
  overflow:hidden;display:flex;align-items:center;
}
body.ann-hidden .hero-space{margin-top:var(--nav-h)}

.star-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* Fuente de luz (estrella distante) */
.star-flare{position:absolute;top:-10px;right:-10px;width:100px;height:100px;z-index:1;pointer-events:none}
.sf-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#fffce0 28%,#ffd050 55%,rgba(255,170,30,0) 100%);
  box-shadow:0 0 18px 7px rgba(255,200,70,.6),0 0 55px 18px rgba(255,150,30,.28);
}
.sf-rays{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg,transparent 48%,rgba(255,240,170,.38) 50%,transparent 52%),
    linear-gradient(45deg,transparent 48%,rgba(255,240,170,.22) 50%,transparent 52%),
    linear-gradient(90deg,transparent 48%,rgba(255,240,170,.38) 50%,transparent 52%),
    linear-gradient(135deg,transparent 48%,rgba(255,240,170,.22) 50%,transparent 52%);
  animation:rayRot 25s linear infinite;
}
.sf-halo{
  position:absolute;inset:-35px;border-radius:50%;
  background:radial-gradient(circle,transparent 28%,rgba(255,195,90,.05) 48%,transparent 68%);
}
@keyframes rayRot{to{transform:rotate(360deg)}}

/* ── PLANETA FOTORREALISTA ── */
.planet-rig{
  position:absolute;top:-60px;right:-80px;z-index:2;
  width:300px;height:300px;
  animation:planetBob 10s ease-in-out infinite;
}
.planet-glow-out{
  position:absolute;inset:-55px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,90,220,.1) 35%,transparent 70%);
}
.planet-body{
  width:300px;height:300px;border-radius:50%;
  position:relative;overflow:hidden;
  background:
    /* Night side (shadow from lower-left) */
    radial-gradient(circle at 22% 72%,rgba(0,2,18,.95) 0%,rgba(0,5,28,.72) 28%,transparent 62%),
    /* Cloud wisps upper */
    radial-gradient(circle at 50% 28%,rgba(220,235,255,.20) 0%,transparent 22%),
    /* Cloud mass center-right */
    radial-gradient(circle at 74% 52%,rgba(200,220,255,.12) 0%,transparent 20%),
    /* Ocean deep blue */
    radial-gradient(circle at 40% 46%,rgba(5,35,90,.60) 0%,transparent 42%),
    /* Continent hint */
    radial-gradient(circle at 62% 40%,rgba(25,80,35,.24) 0%,transparent 22%),
    /* Main lit side (sunlit from upper-right) */
    radial-gradient(circle at 72% 28%,#4490d0 0%,#1850b0 24%,#0a1e68 52%,#020a2a 78%,#010616 100%);
  box-shadow:
    /* Atmospheric rim (Rayleigh scattering) */
    0 0 0 3px rgba(55,115,240,.28),
    0 0 0 9px rgba(38,88,200,.12),
    0 0 0 22px rgba(22,62,175,.05),
    /* Night side depth */
    inset 22px 14px 55px rgba(0,0,22,.68),
    /* Lit side gloss */
    inset -18px 12px 42px rgba(100,185,255,.06);
}
.planet-dark{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 20% 74%,rgba(0,0,18,.92) 0%,rgba(0,2,24,.66) 24%,rgba(0,5,32,.28) 46%,transparent 65%);
}
.planet-clouds{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 55% 32%,rgba(255,255,255,.18) 0%,transparent 18%),
    radial-gradient(circle at 68% 55%,rgba(255,255,255,.10) 0%,transparent 14%),
    radial-gradient(circle at 38% 60%,rgba(255,255,255,.07) 0%,transparent 12%);
  animation:cloudDrift 65s linear infinite;
}
@keyframes cloudDrift{to{transform:rotate(360deg)}}
.planet-atmo{
  position:absolute;inset:-5px;border-radius:50%;
  box-shadow:
    0 0 0 5px rgba(65,140,250,.22),
    0 0 0 12px rgba(42,95,205,.10),
    0 0 0 25px rgba(28,68,182,.04);
}
.planet-spec{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 72% 28%,rgba(255,255,255,.12) 0%,rgba(200,220,255,.04) 16%,transparent 36%);
}
/* Anillos del planeta */
.planet-ring-a,.planet-ring-b{
  position:absolute;top:50%;left:50%;border-radius:50%;
  transform:translate(-50%,-50%) rotateX(75deg);
}
.planet-ring-a{
  width:440px;height:48px;
  border:2.5px solid rgba(150,185,228,.20);
  box-shadow:0 0 20px rgba(100,150,220,.08);
}
.planet-ring-b{
  width:375px;height:38px;
  border:7px solid rgba(130,168,218,.12);
}
@keyframes planetBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ── LUNA ── */
.moon-rig{
  position:absolute;bottom:20%;right:7%;z-index:2;
  animation:moonBob 8s ease-in-out infinite 2s;
}
.moon-body{
  width:72px;height:72px;border-radius:50%;
  position:relative;overflow:hidden;
  background:radial-gradient(circle at 65% 30%,#d8dfe8 0%,#a8b4c0 30%,#707880 65%,#3a3e44 100%);
  box-shadow:0 0 0 1px rgba(120,140,160,.28),0 0 22px rgba(80,100,120,.14),inset -5px 3px 18px rgba(0,0,22,.55);
}
.moon-dark{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 24% 72%,rgba(0,0,16,.78) 0%,rgba(0,2,20,.42) 28%,transparent 55%);
}
.moon-c1,.moon-c2{position:absolute;border-radius:50%;background:transparent;border:1px solid rgba(70,85,100,.35);box-shadow:inset 1px 2px 5px rgba(0,0,0,.55)}
.moon-c1{width:13px;height:10px;top:26%;left:36%}
.moon-c2{width:8px;height:7px;top:52%;left:62%}
@keyframes moonBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── ESTRELLAS FUGACES ── */
.shoot-wrap{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.sh{
  position:absolute;height:1.5px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 50%,rgba(255,255,255,0) 100%);
  border-radius:99px;opacity:0;animation:shootIt 5.5s linear infinite;
}
.sh1{width:110px;top:12%;left:-110px;animation-delay:0s}
.sh2{width:85px;top:30%;left:-85px;animation-delay:1.9s}
.sh3{width:140px;top:50%;left:-140px;animation-delay:3.7s}
.sh4{width:70px;top:66%;left:-70px;animation-delay:.9s}
.sh5{width:95px;top:80%;left:-95px;animation-delay:2.8s}
@keyframes shootIt{
  0%{opacity:0;transform:translate(0,0) rotate(-15deg)}
  8%{opacity:1}
  82%{opacity:.5}
  100%{opacity:0;transform:translate(calc(100vw + 260px),calc((100vw + 260px)*.27)) rotate(-15deg)}
}

/* ── COHETE REALISTA ── */
.rocket-rig{
  position:absolute;bottom:30px;right:2%;z-index:3;
  width:58px;transform-origin:bottom center;
  animation:rocketIdle 4s ease-in-out infinite;
  opacity:.85;
}
.rocket-rig.rumble{animation:rocketRumble .08s linear infinite}
.rocket-rig.launch{animation:rocketLaunch 3s ease-in forwards}
.rocket-svg{
  width:100%;
  filter:drop-shadow(0 0 14px rgba(37,99,235,.38)) drop-shadow(0 6px 35px rgba(0,18,80,.55));
}
@keyframes rocketIdle{
  0%,100%{transform:translateY(0) rotate(-.8deg)}
  50%{transform:translateY(-10px) rotate(.8deg)}
}
@keyframes rocketRumble{
  0%,100%{transform:translateX(0)}
  33%{transform:translateX(-2.5px) rotate(-.8deg)}
  66%{transform:translateX(2.5px) rotate(.8deg)}
}
@keyframes rocketLaunch{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  8%{transform:translateY(-12px) rotate(1deg);opacity:1}
  100%{transform:translateY(-130vh) rotate(4deg);opacity:0}
}

/* Exhaust / pluma del motor */
.exhaust-rig{
  position:absolute;bottom:-42px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.rocket-rig.rumble .exhaust-rig,
.rocket-rig.launch .exhaust-rig{opacity:1}
/* Plasma (núcleo azul-blanco eléctrico) */
.exh-plasma{
  width:8px;height:18px;
  background:linear-gradient(to bottom,#fff 0%,#c0e8ff 28%,#3880f8 62%,rgba(30,60,200,0) 100%);
  border-radius:50% 50% 42% 42%;
  animation:plsmF .06s linear infinite alternate;
}
/* Cono caliente interior (naranja-blanco) */
.exh-core{
  width:14px;height:30px;margin-top:-14px;
  background:linear-gradient(to bottom,rgba(255,255,255,.88) 0%,#f8c040 22%,#f05820 52%,rgba(220,40,10,0) 100%);
  border-radius:50% 50% 46% 46%;
  animation:plsmF .08s linear infinite alternate-reverse;
}
/* Pluma exterior */
.exh-inner{
  width:22px;height:46px;margin-top:-28px;
  background:linear-gradient(to bottom,rgba(240,160,60,.7) 0%,rgba(200,60,20,.5) 38%,rgba(180,20,20,.18) 68%,rgba(120,0,0,0) 100%);
  border-radius:50% 50% 48% 48%;
  animation:plsmF .1s linear infinite alternate;
}
/* Mach diamonds (ondas de choque supersónicas) */
.exh-mach{border-radius:50%;background:rgba(180,220,255,.35)}
.em1{width:10px;height:5px;margin-top:-22px}
.em2{width:8px;height:4px;margin-top:2px}
.em3{width:6px;height:3px;margin-top:3px;opacity:.55}
@keyframes plsmF{0%{transform:scaleY(1) scaleX(1)}100%{transform:scaleY(1.2) scaleX(.86)}}

/* ── SAM — ZORRO ESPACIAL PROFESIONAL ── */
.sam-rig{
  position:relative;z-index:4;
  width:180px;cursor:pointer;user-select:none;
  animation:samFloat 4.5s ease-in-out infinite;
  flex-shrink:0;
}
.sam-rig:hover{animation-play-state:paused}
.sam-svg{
  width:100%;display:block;
  filter:drop-shadow(0 14px 35px rgba(8,25,80,.7)) drop-shadow(0 0 22px rgba(37,99,235,.18));
}
.sam-wave-arm{
  transform-origin:120px 148px;
  animation:samWaveArm 2.2s ease-in-out infinite;
}
@keyframes samWaveArm{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(16deg)}}
@keyframes samFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* Anillos orbitales holográficos */
.sam-orbit-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(37,99,235,.28);
  pointer-events:none;
  left:50%;top:38%;
  transform:translate(-50%,-50%) rotateX(68deg);
}
.r1{width:210px;height:210px;animation:orbitSpin 9s linear infinite}
.r2{width:255px;height:255px;border-color:rgba(37,99,235,.13);animation:orbitSpin 16s linear infinite reverse}
.r1::after{
  content:'';position:absolute;top:-4px;left:50%;
  width:8px;height:8px;border-radius:50%;
  background:#60a5fa;box-shadow:0 0 12px #60a5fa,0 0 24px rgba(96,165,250,.4);
  transform:translateX(-50%);
}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(360deg)}}

.sam-badge{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:.64rem;font-weight:700;color:rgba(255,255,255,.42);
  margin-top:-6px;
}
.sam-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);box-shadow:0 0 8px var(--green);
  animation:pulse 2s ease-in-out infinite;
}
.sam-speech{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.72rem;font-weight:700;color:#fff;
  background:rgba(4,10,40,.94);border:1px solid rgba(37,99,235,.45);
  border-radius:12px;padding:8px 14px;pointer-events:none;
  opacity:0;transition:opacity .3s;
  box-shadow:0 8px 32px rgba(0,0,0,.55);backdrop-filter:blur(14px);
}
.sam-speech.visible{opacity:1}
.sam-speech::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:rgba(37,99,235,.45);
}

/* ═══ HERO LAYOUT COMPACTO ═══ */
.hero-content{position:relative;z-index:5;width:100%;padding:28px 0 24px}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:36px;
  align-items:center;
  width:100%;
}
.hero-left{display:flex;flex-direction:column;gap:14px}
.hero-right{position:relative;z-index:5}
.hero-h1-sub,.hero-trust-row,.hero-trust-item,.hero-stats{display:none}

/* H1 */
.hero-h1{
  font-size:clamp(2.1rem,3.8vw,3.9rem);font-family:var(--font-heading);
  font-weight:700;color:#fff;line-height:1.08;margin:0;
  letter-spacing:-.035em;
}
.hero-gradient{
  display:block;
  background:linear-gradient(120deg,#60a5fa 0%,#818cf8 35%,#a78bfa 55%,#34d399 100%);
  background-size:220% 220%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradShift 5s ease infinite;
}
.hero-desc{color:rgba(255,255,255,.55);font-size:.9rem;line-height:1.6;margin:0}

/* Domain inline en hero-left */
.hero-domain{display:flex;flex-direction:column;gap:8px}
.hero-domain-bar{
  display:flex;align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;overflow:hidden;
}
.hero-domain-bar .domain-input{
  flex:1;padding:11px 14px;font-size:.88rem;color:#fff;
  background:transparent;border:none;border-right:1px solid rgba(255,255,255,.1);min-width:0;
}
.hero-domain-bar .domain-input::placeholder{color:rgba(255,255,255,.3)}
.hero-domain-bar .domain-ext{
  padding:11px 26px 11px 10px;font-size:.82rem;font-weight:700;color:#60a5fa;
  background:transparent;border:none;border-right:1px solid rgba(255,255,255,.1);cursor:pointer;min-width:80px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%2360a5fa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.hero-domain-bar .domain-ext option{background:#0d1628;color:#fff}
.hero-domain-bar .domain-btn{
  display:flex;align-items:center;gap:6px;
  padding:11px 16px;font-size:.82rem;font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--blue-d));
  color:#fff;cursor:pointer;white-space:nowrap;flex-shrink:0;
  border:none;transition:background .2s;
}
.hero-domain-bar .domain-btn:hover{background:linear-gradient(135deg,var(--blue-l),var(--blue))}
.domain-result{font-size:.8rem;font-weight:600;padding:0 2px;transition:all .2s}
.domain-result.ok{color:var(--green)}
.domain-result.no{color:#f87171}
.domain-result.loading{color:var(--text2)}
.hero-domain-pills{display:flex;flex-wrap:wrap;gap:5px}
.hero-domain-pills .dpill{
  font-size:.7rem;font-weight:600;color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:99px;padding:3px 10px;cursor:pointer;transition:all .2s;
}
.hero-domain-pills .dpill em{font-style:normal;color:rgba(255,255,255,.65);margin-left:2px}
.hero-domain-pills .dpill:hover{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.3);color:#fff}
.hero-domain-pills .dpill.dpill-hot{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#fbbf24}

/* Features compactas */
.hero-feats{display:flex;flex-direction:column;gap:6px}
.hf-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hf-item{
  display:flex;align-items:flex-start;gap:7px;
  font-size:.78rem;
}
.hf-item svg{flex-shrink:0;margin-top:1px}
.hf-item strong{color:#fff;font-weight:700;font-size:.78rem;display:block;line-height:1.2}
.hf-item small{color:rgba(255,255,255,.42);font-size:.68rem;display:block;line-height:1.2}

/* CTAs */
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
.btn-hero-main{
  display:inline-flex;align-items:center;gap:7px;
  padding:12px 24px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue-d));
  color:#fff;font-weight:800;font-size:.88rem;
  box-shadow:0 6px 24px rgba(37,99,235,.48);
  text-decoration:none;transition:all .22s;white-space:nowrap;
}
.btn-hero-main:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(37,99,235,.6)}
.btn-hero-ghost{
  display:inline-flex;align-items:center;gap:7px;
  padding:12px 20px;border-radius:10px;
  border:1.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.82);font-weight:700;font-size:.88rem;
  background:rgba(255,255,255,.05);backdrop-filter:blur(10px);
  text-decoration:none;transition:all .22s;white-space:nowrap;
}
.btn-hero-ghost:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.09);transform:translateY(-2px);color:#fff}

/* Badge hero */
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.28);
  border-radius:99px;padding:5px 12px;
  font-size:.73rem;font-weight:700;color:#60a5fa;width:fit-content;
}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s ease-in-out infinite}

/* ═══ HERO SCENE ═══ */
.hero-scene{
  position:relative;width:100%;height:480px;
  display:flex;align-items:center;justify-content:center;
}
#samSlot{display:none}

/* Glow central */
.hs-glow{
  position:absolute;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.38) 0%,rgba(109,40,217,.22) 40%,rgba(37,99,235,.06) 65%,transparent 76%);
  filter:blur(48px);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:0;
  animation:haloP 5s ease-in-out infinite;
}
@keyframes haloP{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}

/* Satélite */
.hs-sat{position:absolute;top:4%;right:10%;display:flex;align-items:center;z-index:6;pointer-events:none;animation:satDrift 7s ease-in-out infinite}
@keyframes satDrift{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}}
.hs-sat-body{width:26px;height:14px;border-radius:4px;background:linear-gradient(135deg,#8898b8,#c8d8e8);box-shadow:0 0 12px rgba(100,150,255,.35);position:relative}
.hs-sat-antenna{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:1.5px;height:8px;background:rgba(200,220,255,.7)}
.hs-sat-antenna::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,rgba(100,180,255,.8),transparent)}
.hs-sat-panel{width:20px;height:9px;border-radius:2px;background:linear-gradient(180deg,#1a3a6a,#2563eb);border:1px solid rgba(96,165,250,.5)}
.hs-sat-l{margin-right:3px}
.hs-sat-r{margin-left:3px}

/* Planetas */
.hs-planet{position:absolute;display:flex;align-items:center;gap:8px;z-index:6;pointer-events:none}
.hp1{top:10%;right:4%;animation:hpFloat1 4.2s ease-in-out infinite}
.hp2{bottom:18%;right:2%;animation:hpFloat2 5.5s ease-in-out infinite .6s}
@keyframes hpFloat1{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hpFloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.hp-orb{position:relative;width:52px;height:52px;flex-shrink:0}
.hp-body{width:52px;height:52px;border-radius:50%;position:relative;z-index:2}
/* Planeta Tierra */
.hp-earth{
  background:
    radial-gradient(ellipse at 38% 28%, rgba(34,197,94,.72) 0%, transparent 24%),
    radial-gradient(ellipse at 68% 60%, rgba(34,197,94,.55) 0%, transparent 18%),
    radial-gradient(ellipse at 52% 18%, rgba(134,239,172,.55) 0%, transparent 13%),
    radial-gradient(ellipse at 20% 65%, rgba(34,197,94,.4) 0%, transparent 14%),
    radial-gradient(circle at 32% 30%, #7dd3fc 0%, #1d6fc4 35%, #0e3a8a 60%, #020c28 100%);
  box-shadow:0 0 0 2px rgba(34,197,94,.35),0 0 20px rgba(34,197,94,.45),0 0 42px rgba(37,99,235,.3),inset 10px 7px 22px rgba(0,0,25,.55);
}
/* Luna */
.hp-moon{
  background:
    radial-gradient(circle at 30% 32%, rgba(240,240,248,.38) 0%, transparent 22%),
    radial-gradient(circle at 62% 66%, rgba(100,100,115,.5) 0%, transparent 12%),
    radial-gradient(circle at 40% 74%, rgba(80,80,95,.4) 0%, transparent 10%),
    radial-gradient(circle at 74% 38%, rgba(130,130,145,.3) 0%, transparent 9%),
    radial-gradient(circle at 55% 22%, rgba(110,110,125,.25) 0%, transparent 8%),
    radial-gradient(circle at 32% 28%, #e8e8f2 0%, #b4b4c4 34%, #7a7a8c 62%, #404050 100%);
  box-shadow:0 0 0 2px rgba(180,180,205,.3),0 0 16px rgba(180,180,210,.35),0 0 36px rgba(160,160,190,.15),inset 8px 6px 18px rgba(0,0,20,.65);
}
/* Anillo órbita Tierra (línea orbital sutil) */
.hp-ring{position:absolute;width:78px;height:15px;border:2px solid rgba(100,180,255,.55);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(72deg);z-index:3;box-shadow:0 0 8px rgba(100,180,255,.35)}
.hp-ring--orbit{border-color:rgba(100,220,130,.45);box-shadow:0 0 8px rgba(100,220,130,.3)}
.hp-badge{background:rgba(3,8,38,.92);border:1px solid rgba(37,99,235,.5);border-radius:99px;padding:4px 10px;font-size:.65rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:4px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.hp-badge--earth{border-color:rgba(34,197,94,.55)}
.hp-badge--moon{border-color:rgba(180,180,210,.45)}

/* Cards flotantes */
.hs-card{position:absolute;background:rgba(3,8,38,.92);border:1px solid rgba(37,99,235,.32);border-radius:12px;padding:9px 12px;backdrop-filter:blur(18px);box-shadow:0 6px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);z-index:6;pointer-events:none}
.hs-rating{top:6%;left:4%;display:flex;flex-direction:column;align-items:center;gap:3px;animation:hscFloat 4s ease-in-out infinite .2s}
.hs-rating-stars{display:flex;gap:2px}
.hs-rating-num{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;color:#fff;line-height:1}
.hs-rating-lbl{font-size:.6rem;color:rgba(255,255,255,.42);white-space:nowrap}
.hs-speed{left:2%;top:42%;display:flex;align-items:center;gap:8px;animation:hscFloat 3.8s ease-in-out infinite .8s}
.hs-speed-info{display:flex;flex-direction:column;gap:4px}
.hs-speed-info strong{font-size:.7rem;font-weight:700;color:#fff;white-space:nowrap}
.hs-speed-bar{width:82px;height:3px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.hs-speed-fill{height:100%;width:0;background:linear-gradient(90deg,#3b82f6,#60a5fa,#34d399);border-radius:99px;animation:sFill 2s ease-out 1s forwards}
@keyframes sFill{to{width:90%}}
.hs-projects{bottom:22%;left:3%;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;animation:hscFloat 4.5s ease-in-out infinite 1.4s;border-color:rgba(109,40,217,.35)}
.hs-proj-n{font-family:var(--font-heading);font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.hs-proj-l{font-size:.6rem;color:rgba(255,255,255,.42);line-height:1.3}
@keyframes hscFloat{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-9px) rotate(.5deg)}}

/* Astronauta */
.hero-astronaut{position:relative;z-index:5;cursor:pointer;user-select:none;animation:astroFloat 4.8s ease-in-out infinite}
@keyframes astroFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-16px) rotate(1.5deg)}}
/* Anillos orbitales SAM */
.sam-scene-ring{position:absolute;border-radius:50%;pointer-events:none;top:50%;left:50%}
.sr1{width:220px;height:220px;border:1px solid rgba(37,99,235,.22);transform:translate(-50%,-50%);animation:samSceneRing 5s ease-in-out infinite}
.sr2{width:305px;height:305px;border:1px solid rgba(240,128,40,.12);transform:translate(-50%,-50%);animation:samSceneRing 5s ease-in-out infinite 1.4s}
@keyframes samSceneRing{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
.astro-svg{width:240px;display:block;filter:drop-shadow(0 0 26px rgba(37,99,235,.55)) drop-shadow(0 0 10px rgba(232,120,32,.3));transition:filter .3s}
.hero-astronaut:hover .astro-svg{filter:drop-shadow(0 0 36px rgba(37,99,235,.75)) drop-shadow(0 0 16px rgba(240,130,30,.5))}
.hero-astronaut .sam-wave-arm{transform-origin:148px 162px}
/* Sam boost on click/auto */
.hero-astronaut.sam-boost .astro-svg{animation:samBoost .9s cubic-bezier(.36,.07,.19,.97) forwards}
@keyframes samBoost{0%{transform:scale(1) translateY(0) rotate(0deg)}15%{transform:scale(1.09) translateY(-10px) rotate(-3deg)}38%{transform:scale(1.15) translateY(-26px) rotate(3.5deg)}62%{transform:scale(1.07) translateY(-12px) rotate(-2deg)}80%{transform:scale(1.11) translateY(-20px) rotate(2.5deg)}100%{transform:scale(1) translateY(0) rotate(0deg)}}
/* Rings pulse faster on boost */
.hero-astronaut.sam-boost .sr1{animation-duration:1.1s!important;border-color:rgba(37,99,235,.55)!important}
.hero-astronaut.sam-boost .sr2{animation-duration:1.5s!important;border-color:rgba(240,130,30,.35)!important}
/* Hover rings speed up */
.hero-astronaut:hover .sr1{animation-duration:2.8s}
.hero-astronaut:hover .sr2{animation-duration:3.2s}
/* Thruster jets */
.sam-thruster{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);display:flex;gap:32px;z-index:3;pointer-events:none}
.sam-thrust-l,.sam-thrust-r{width:10px;height:0;border-radius:50% 50% 60% 60%;background:linear-gradient(to bottom,rgba(96,165,250,.9),rgba(37,99,235,.5),rgba(37,99,235,0));opacity:0;transition:all .18s}
.sam-boost .sam-thrust-l,.sam-boost .sam-thrust-r{height:48px;opacity:1;animation:thrustFlicker .12s ease-in-out infinite}
@keyframes thrustFlicker{0%,100%{height:44px;opacity:.85}50%{height:54px;opacity:1}}
/* Status LED blink */
.sam-status{animation:statusBlink 2.8s ease-in-out infinite}
@keyframes statusBlink{0%,44%,56%,100%{opacity:1}50%{opacity:.25}}
.astro-speech{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.72rem;font-weight:700;color:#fff;background:rgba(4,10,42,.95);border:1px solid rgba(37,99,235,.5);border-radius:9px;padding:7px 13px;opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:0 6px 24px rgba(0,0,0,.55);backdrop-filter:blur(14px)}
.astro-speech.visible{opacity:1}
.astro-speech::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(37,99,235,.5)}

/* Domain panel viejo (oculto en hero, aún activo en otras partes) */
.domain-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:20px 22px;backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(37,99,235,.08);width:100%;box-sizing:border-box}
.domain-panel-label{font-size:.75rem;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.domain-bar{display:flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden}
.domain-input{flex:1;padding:13px 16px;font-size:.9rem;color:#fff;background:transparent;border-right:1px solid rgba(255,255,255,.1);min-width:0}
.domain-input::placeholder{color:rgba(255,255,255,.28)}
.domain-ext{
  padding:13px 28px 13px 12px;font-size:.85rem;font-weight:700;color:#60a5fa;
  background:transparent;border-right:1px solid rgba(255,255,255,.1);cursor:pointer;min-width:90px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%2360a5fa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.domain-ext option{background:#0d1628;color:#fff}
.domain-ext::-ms-expand{display:none}
.domain-btn{display:flex;align-items:center;gap:7px;padding:13px 20px;font-size:.85rem;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;cursor:pointer;transition:all var(--t);white-space:nowrap;flex-shrink:0;border:none}
.domain-btn:hover{background:linear-gradient(135deg,var(--blue-l),var(--blue))}
.domain-result{min-height:20px;font-size:.82rem;font-weight:600;margin-top:10px;padding:0 4px;transition:all var(--t)}
.domain-result.ok{color:var(--green)}
.domain-result.no{color:#f87171}
.domain-result.loading{color:var(--text2)}
.domain-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.dpill{font-size:.73rem;font-weight:600;color:rgba(255,255,255,.45);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:99px;padding:4px 11px;cursor:pointer;transition:all var(--t)}
.dpill em{font-style:normal;color:rgba(255,255,255,.7);margin-left:3px}
.dpill:hover{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.3);color:#fff}
.dpill.dpill-hot{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#fbbf24}
.dpill.dpill-hot b{font-weight:normal;font-size:.65rem;margin-left:2px}
.hero-stats{display:flex;align-items:center;flex-wrap:wrap}
.hstat{display:flex;flex-direction:column;gap:2px;padding:0 20px}
.hstat:first-child{padding-left:0}
.hstat-n{font-family:var(--font-heading);font-size:1.35rem;font-weight:900;color:#fff;line-height:1}
.hstat-l{font-size:.7rem;color:rgba(255,255,255,.4);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.hstat-sep{width:1px;height:32px;background:rgba(255,255,255,.12)}

/* Responsive */
@media(max-width:1100px){
  .hero-grid{gap:28px}
  .planet-rig{width:200px;height:200px;right:-50px;top:-30px}
  .planet-body{width:200px;height:200px}
  .planet-ring-a{width:300px;height:32px}
  .planet-ring-b{width:250px;height:26px}
  #samSlot .sam-rig{width:180px}
  .r1{width:160px;height:160px}
  .r2{width:195px;height:195px}
  .hs-glow{width:280px;height:280px}
  .hero-scene{height:420px}
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-left{order:1}
  .hero-right{display:none}
  .hero-content{padding:28px 0 24px}
  .planet-rig{width:170px;height:170px;right:-40px;top:-25px}
  .planet-body{width:170px;height:170px}
  .planet-ring-a{width:250px;height:26px}
  .planet-ring-b{width:210px;height:20px}
  .hero-scene{height:360px}
  .hs-glow{width:240px;height:240px}
  .astro-svg{width:200px}
  .rocket-rig{right:1%;width:46px;bottom:16px}
  .r1{width:140px;height:140px}
  .r2{width:170px;height:170px}
}
@media(max-width:600px){
  .hero-content{padding:22px 0 18px}
  .hero-h1{font-size:1.9rem;letter-spacing:-.02em}
  .hero-grid{gap:0}
  .hero-right{margin-top:16px}
  .hs-rating,.hs-speed,.hs-projects,.hp1,.hp2,.hs-sat{display:none}
  .planet-rig{width:120px;height:120px;right:-24px;top:-16px}
  .planet-body{width:120px;height:120px}
  .planet-ring-a{width:180px;height:18px}
  .planet-ring-b{width:150px;height:14px}
  .hero-scene{height:280px}
  .hs-glow{width:200px;height:200px;filter:blur(34px)}
  .astro-svg{width:165px}
  .rocket-rig{right:0;width:40px;bottom:8px}
  .r1{width:110px;height:110px}
  .r2{width:136px;height:136px}
  .hf-row{grid-template-columns:1fr 1fr}
  .hero-ctas{gap:8px}
  .btn-hero-main,.btn-hero-ghost{padding:10px 16px;font-size:.82rem}
  .hero-domain-bar{flex-wrap:wrap}
  .hero-domain-bar .domain-ext{border-right:none;border-bottom:1px solid rgba(255,255,255,.1);min-width:auto;width:40%}
  .hero-domain-bar .domain-btn{width:60%;justify-content:center}
}

/* ─── 9. TRUST CARDS ─────────────────────────── */
.trust-section{padding:40px 0 44px;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-track-wrap{position:relative}

/* Desktop: 5 columnas en 1 fila */
.trust-track{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

/* Card base */
.trust-card{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,rgba(18,34,78,.9) 0%,rgba(9,18,46,.95) 100%);
  border:1px solid rgba(96,165,250,.1);
  border-radius:18px;
  padding:28px 20px 24px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  box-shadow:0 4px 28px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .28s;
  cursor:default;
}
/* Línea de color superior */
.trust-card::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:2px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,transparent,hsl(var(--tc-hue,217),85%,62%),transparent);
  opacity:.7;
}
/* Glow difuso de fondo */
.trust-card-glow{
  position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:130%;height:70%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,hsl(var(--tc-hue,217),80%,52%,.08),transparent 70%);
}
.trust-card:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:hsl(var(--tc-hue,217),80%,60%,.28);
  box-shadow:0 16px 52px rgba(0,0,0,.5),0 0 0 1px hsl(var(--tc-hue,217),80%,60%,.18),inset 0 1px 0 rgba(255,255,255,.07);
}
.trust-card:hover .trust-card-glow{
  background:radial-gradient(ellipse at center,hsl(var(--tc-hue,217),80%,52%,.14),transparent 70%);
}

/* Icono — contenedor neutro, el SVG ya lleva los colores */
.trust-card-icon{
  width:68px;height:68px;border-radius:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:hsl(var(--tc-hue,217),70%,50%,.12);
  border:1px solid hsl(var(--tc-hue,217),70%,58%,.22);
  box-shadow:0 4px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;
}
.trust-card:hover .trust-card-icon{
  transform:scale(1.08) translateY(-2px);
  box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1);
}
.trust-card-icon svg{width:38px;height:38px}

/* Textos */
.trust-card-body{display:flex;flex-direction:column;gap:5px;flex:1}
.tc-title{font-size:.93rem;font-weight:700;color:var(--text);letter-spacing:.01em;line-height:1.25}
.tc-sub{font-size:.73rem;color:var(--text2);line-height:1.4}

/* Chip */
.tc-chip{
  font-size:.6rem;font-weight:800;letter-spacing:.12em;
  padding:3px 10px;border-radius:99px;
  background:hsl(var(--tc-hue,217),75%,50%,.13);
  border:1px solid hsl(var(--tc-hue,217),75%,55%,.3);
  color:hsl(var(--tc-hue,217),85%,72%);
  text-transform:uppercase;
}

/* Dots (sólo visibles en móvil) */
.trust-dots{display:none;justify-content:center;gap:6px;margin-top:18px;padding:0 20px}
.trust-dot{
  display:block;width:7px;height:7px;border-radius:50%;
  background:rgba(96,165,250,.22);border:1px solid rgba(96,165,250,.3);
  transition:all .35s cubic-bezier(.2,.8,.3,1);cursor:pointer;
}
.trust-dot.active{width:24px;border-radius:4px;background:rgba(96,165,250,.9);border-color:rgba(96,165,250,.85)}

/* Barra de progreso auto-rotación */
.trust-dot.active::after{content:'';display:none}

/* ── Mobile: slider horizontal con auto-rotación ────────────── */
@media(max-width:767px){
  .trust-section{padding:28px 0 36px}
  .trust-section>.container{padding-left:0;padding-right:0;overflow:hidden}
  .trust-track{
    display:flex;
    grid-template-columns:none;
    overflow-x:scroll;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    padding:4px 20px 6px;
  }
  .trust-track::-webkit-scrollbar{display:none}
  .trust-card{
    flex:0 0 76vw;min-width:0;
    scroll-snap-align:start;
    padding:24px 16px 20px;
    gap:12px;
  }
  .trust-card-icon{width:58px;height:58px;border-radius:15px}
  .trust-card-icon svg{width:32px;height:32px}
  .tc-title{font-size:.87rem}
  .trust-dots{display:none}
}

/* ─── 10. STATS ──────────────────────────────── */
.stats-section{padding:80px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat-card{
  position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 24px;
  text-align:center;transition:transform var(--t),border-color var(--t),box-shadow var(--t),background var(--t);
}
.stat-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--sc,#3b82f6) 55%,transparent),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--t);pointer-events:none;
}
.stat-card:hover{transform:translateY(-6px);border-color:transparent;background:rgba(255,255,255,.035);box-shadow:0 20px 44px rgba(0,0,0,.35)}
.stat-card:hover::before{opacity:1}
.stat-card-glow{
  position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  width:120px;height:120px;background:rgba(37,99,235,.15);
  border-radius:50%;filter:blur(40px);pointer-events:none;
}
.stat-icon{font-size:2rem;display:block;margin-bottom:12px}
.stat-ico-chip{
  width:42px;height:42px;border-radius:12px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--sc,#3b82f6) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--sc,#3b82f6) 32%,transparent);
  color:var(--sc,#3b82f6);
  transition:transform var(--t);
}
.stat-card:hover .stat-ico-chip{transform:scale(1.08) rotate(-4deg)}
.stat-ico-chip svg{width:20px;height:20px}
.stat-num{
  display:block;font-family:var(--font-heading);font-size:2.6rem;font-weight:800;
  background:linear-gradient(135deg,#fff,var(--blue-l));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;
}
.stat-label{font-size:.82rem;color:var(--text2);font-weight:500}

/* ─── 10b. FEATURE GRID (reusable, tarjetas con acento por icono) ─── */
.feat-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.feat-card{
  position:relative;flex:1 1 240px;max-width:300px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  border-radius:18px;padding:26px 24px;
  transition:border-color .25s,transform .25s,box-shadow .25s,background .25s;
  overflow:hidden;
}
.feat-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--fc,#60a5fa) 55%,transparent),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.feat-card:hover{border-color:transparent;background:rgba(255,255,255,.04);transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.38)}
.feat-card:hover::before{opacity:1}
.feat-ico{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;color:var(--fc,#60a5fa);
  background:color-mix(in srgb,var(--fc,#60a5fa) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--fc,#60a5fa) 30%,transparent);
  transition:transform .25s;
}
.feat-card:hover .feat-ico{transform:scale(1.08) rotate(-4deg)}
.feat-ico svg{width:21px;height:21px}
.feat-ico.feat-ico-img{padding:9px;box-sizing:border-box}
.feat-ico.feat-ico-img img{width:100%;height:100%;object-fit:contain;display:block}
.feat-t{font-size:1rem;font-weight:800;color:#fff;margin-bottom:8px}
.feat-d{font-size:.83rem;color:var(--text2);line-height:1.65}

/* ─── 11. SECTION HEADER ─────────────────────── */
.section-header{text-align:center;margin-bottom:56px}
.section-eyebrow{margin-bottom:14px;display:flex;justify-content:center}
.section-h2{font-size:clamp(1.7rem,3.5vw,2.8rem);color:#fff;margin-bottom:14px}
.section-desc{font-size:1rem;color:var(--text2);max-width:560px;margin:0 auto;line-height:1.72}

/* ─── 11. SERVICES CARDS — 3×2 bento premium ─── */
.services-section{padding:40px 0 0;background:var(--bg2)}
.srv-outer{padding:20px 0 72px}

/* Grid 3 columnas × 2 filas — todas iguales */
.srv-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,390px);
  gap:12px;
  padding:0 max(20px,calc(50vw - 620px));
  max-width:1360px;margin:0 auto;
}

/* Card base */
.srv-card{
  position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--cb,rgba(255,255,255,.1));
  display:flex;flex-direction:column;justify-content:space-between;
  background:#070815;
  transition:transform .32s cubic-bezier(.2,.8,.3,1),box-shadow .32s,border-color .32s;
}
/* Línea de acento superior en color de marca */
.srv-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--c1,rgba(255,255,255,.4)),transparent);
  opacity:.65;transition:opacity .3s;
}
.srv-card:hover{
  transform:translateY(-8px);
  border-color:var(--c1,rgba(255,255,255,.3));
  box-shadow:0 32px 80px rgba(0,0,0,.65),0 0 0 1px var(--cb,transparent),0 0 60px var(--cbg,transparent);
}
.srv-card:hover::before{opacity:1}

/* Número decorativo fantasma */
.srv-num{
  position:absolute;bottom:-16px;right:10px;z-index:2;
  font-size:8rem;font-weight:900;line-height:1;letter-spacing:-.06em;
  color:rgba(255,255,255,.042);pointer-events:none;user-select:none;
  transition:color .35s;
}
.srv-card:hover .srv-num{color:rgba(255,255,255,.08)}

/* Foto full-bleed */
.srv-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .7s cubic-bezier(.2,.8,.3,1);z-index:0;
}
.srv-card:hover .srv-bg{transform:scale(1.08)}

/* Overlay: radial brand top-left + gradiente oscuro abajo */
.srv-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at 10% 0%,var(--cbg,transparent) 0%,transparent 55%),
    linear-gradient(to bottom,rgba(0,0,0,.18) 0%,rgba(0,0,0,.04) 22%,rgba(0,0,0,.68) 56%,rgba(0,0,0,.97) 100%);
}

/* Zona superior: badge sólido + precio */
.srv-top{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:18px 18px 0;flex-shrink:0;
}
.srv-cat{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 16px;border-radius:99px;
  background:var(--c1,rgba(255,255,255,.15));
  color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.srv-price-b{
  padding:6px 13px 7px;border-radius:99px;
  background:rgba(0,0,0,.52);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-size:.62rem;font-weight:600;white-space:nowrap;
  backdrop-filter:blur(12px);display:flex;align-items:baseline;gap:3px;
  line-height:1;
}
.srv-price-b strong{font-weight:900;font-size:1.38rem;letter-spacing:-.03em;color:#fff;line-height:1}
.srv-price-b small{opacity:.48;font-size:.58rem;align-self:flex-end;padding-bottom:2px}

/* Zona inferior: chips → título → desc → cta */
.srv-bottom{
  position:relative;z-index:3;
  padding:0 18px 20px;
  display:flex;flex-direction:column;gap:9px;flex-shrink:0;
}

/* Chips */
.srv-chips{display:flex;gap:5px;flex-wrap:wrap}
.srv-chips span{
  padding:4px 10px;border-radius:7px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.85);font-size:.62rem;font-weight:700;
  backdrop-filter:blur(4px);letter-spacing:.04em;
}

/* Título */
.srv-title{
  font-size:2.05rem;font-weight:900;color:#fff;
  line-height:1.04;letter-spacing:-.03em;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}

/* Descripción */
.srv-desc{
  font-size:.77rem;color:rgba(255,255,255,.52);line-height:1.52;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* CTA — glass default, sólido en hover */
.srv-btn{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 22px;border-radius:12px;
  background:rgba(0,0,0,.38);
  border:1.5px solid rgba(255,255,255,.28);
  color:#fff;font-size:.82rem;font-weight:800;letter-spacing:.01em;
  backdrop-filter:blur(10px);
  transition:background .25s,border-color .25s,transform .22s,box-shadow .22s;
  margin-top:2px;
}
.srv-btn:hover{
  background:var(--c1,rgba(255,255,255,.2));
  border-color:var(--c1,transparent);
  transform:translateY(-2px);
  box-shadow:0 10px 30px var(--cbg,rgba(0,0,0,.3));
}
.srv-btn svg{width:15px;height:15px;transition:transform .2s;flex-shrink:0}
.srv-btn:hover svg{transform:translateX(3px)}

/* ─── 13. PRICING ────────────────────────────── */
.pricing-section{padding:80px 0;background:var(--bg)}

/* Tabs con imagen + icono */
.pricing-tabs{
  display:flex;gap:10px;justify-content:center;
  margin:0 auto 48px;flex-wrap:wrap;
  max-width:960px;
}
.ptab{
  position:relative;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;align-items:stretch;
  border-radius:18px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);width:148px;padding:0;
  transition:border-color .25s,box-shadow .25s,transform .22s;
  flex-shrink:0;
}
.ptab:hover{border-color:rgba(255,255,255,.22);transform:translateY(-3px)}
.ptab.active{
  border-color:var(--pt-c,var(--blue));
  box-shadow:0 0 0 1px var(--pt-c,var(--blue)),0 12px 32px rgba(0,0,0,.38);
}
/* Línea de acento inferior en el tab activo */
.ptab.active::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:40px;height:3px;border-radius:3px 3px 0 0;
  background:var(--pt-c,var(--blue));
}
.ptab-thumb{height:78px;overflow:hidden;position:relative;flex-shrink:0}
.ptab-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s;filter:brightness(.48) saturate(1.3)}
.ptab:hover .ptab-thumb img,.ptab.active .ptab-thumb img{transform:scale(1.08);filter:brightness(.72) saturate(1.5)}
.ptab-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 25%,rgba(0,0,0,.74) 100%)}
.ptab-body{padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:3px}
.ptab-ico{width:20px;height:20px;color:rgba(255,255,255,.28);transition:color .25s;flex-shrink:0}
.ptab.active .ptab-ico{color:var(--pt-c,var(--blue))}
.ptab-name{font-size:.8rem;font-weight:800;color:rgba(255,255,255,.42);letter-spacing:.02em;transition:color .25s}
.ptab.active .ptab-name{color:#fff}
.ptab-sub{font-size:.6rem;font-weight:600;color:rgba(255,255,255,.26);letter-spacing:.04em;transition:color .25s}
.ptab.active .ptab-sub{color:rgba(255,255,255,.55)}

.pricing-panel{display:none}
.pricing-panel.active{display:block}
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:22px;max-width:980px;margin:0 auto;
}

/* ─── 3D Coverflow (planes en perspectiva, como carrusel de producto) ─── */
.pricing-coverflow-wrap{position:relative;max-width:1080px;margin:0 auto}
.pricing-grid.cf-ready{
  display:block;position:relative;
  height:var(--cf-h,560px);
  perspective:1700px;
  margin:0 auto;max-width:1080px;
  transition:height .45s cubic-bezier(.22,.9,.32,1);
  outline:none;
}
.pricing-grid.cf-ready .p-card{
  position:absolute;top:0;left:50%;
  width:min(320px,78vw);
  --cf-x:0px;--cf-z:0px;--cf-ry:0deg;--cf-s:1;
  will-change:transform;cursor:pointer;
  transition:transform .6s cubic-bezier(.22,.9,.32,1),opacity .6s ease,filter .6s ease,box-shadow .4s;
}
.pricing-grid.cf-ready .p-card,
.pricing-grid.cf-ready .p-card:hover,
.pricing-grid.cf-ready .p-card.featured,
.pricing-grid.cf-ready .p-card.featured:hover{
  transform:translate3d(-50%,0,0) translate3d(var(--cf-x),0,var(--cf-z)) rotateY(var(--cf-ry)) scale(var(--cf-s));
}
.pricing-grid.cf-ready .p-card.cf-active{box-shadow:0 40px 100px rgba(0,0,0,.55);z-index:5}
.pricing-grid.cf-ready .p-card.cf-active.featured{box-shadow:0 0 0 1px rgba(37,99,235,.35),0 40px 100px rgba(37,99,235,.32)}
.pricing-grid.cf-ready .p-card:not(.cf-active){pointer-events:auto}
.pricing-grid.cf-ready .p-card.cf-active{cursor:default}

.cf-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(8,12,36,.85);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:20;backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .2s,opacity .3s;
}
.cf-nav:hover{background:rgba(37,99,235,.75);border-color:rgba(37,99,235,.55);transform:translateY(-50%) scale(1.08)}
.cf-nav-prev{left:-6px}
.cf-nav-next{right:-6px}
@media(min-width:1160px){.cf-nav-prev{left:-56px}.cf-nav-next{right:-56px}}

.cf-dots{display:flex;justify-content:center;gap:9px;margin-top:24px}
.cf-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);border:none;cursor:pointer;padding:0;transition:background .25s,transform .25s}
.cf-dot:hover{background:rgba(255,255,255,.4)}
.cf-dot.active{background:linear-gradient(90deg,#2563eb,#7c3aed);transform:scale(1.3)}

/* ─── Hero slider — tarjeta única, sin tilt 3D, look "producto destacado" ─── */
.hero-cf-wrap{width:100%}
.hero-cf-wrap .pricing-coverflow-wrap{max-width:400px;margin:0 auto}
.hero-cf-wrap .pricing-grid.cf-ready{max-width:400px;perspective:none}
.hero-cf-wrap .p-card{width:min(340px,84vw);padding:0}

/* Neutraliza el motor de coverflow: sin profundidad, sin rotación, solo crossfade */
.hero-cf-wrap .p-card{
  --cf-x:0px!important;--cf-z:0px!important;--cf-ry:0deg!important;--cf-s:1!important;
  transition:opacity .45s ease!important;
  filter:none!important;
}
.hero-cf-wrap .p-card.cf-active{opacity:1!important}
.hero-cf-wrap .p-card:not(.cf-active){opacity:0!important;pointer-events:none!important;box-shadow:none!important}

.hero-cf-wrap .cf-nav{
  width:38px;height:38px;
  background:rgba(6,10,26,.72);border-color:rgba(255,255,255,.16);
}
.hero-cf-wrap .cf-nav-prev{left:-4px}
.hero-cf-wrap .cf-nav-next{right:-4px}
@media(min-width:1160px){
  .hero-cf-wrap .cf-nav-prev{left:-48px}
  .hero-cf-wrap .cf-nav-next{right:-48px}
}
.hero-cf-wrap .cf-dots{margin-top:20px}

.hero-cf-wrap .p-card::before{content:none}
.hero-cf-wrap .p-badge{z-index:3;max-width:calc(100% - 24px);white-space:normal;text-align:center;line-height:1.3;padding-top:7px;padding-bottom:7px}
/* El icono flotante chocaba con el título (lo tapaba) — se quita en el hero */
.hero-cf-wrap .hc-card-icon{display:none}
.hero-cf-wrap .hc-card-body{padding:26px 26px 26px}
.hero-cf-wrap .p-card.featured .p-name{margin-top:20px}
.hero-cf-wrap .p-name{color:rgba(255,255,255,.8);white-space:normal;overflow-wrap:break-word;text-shadow:0 2px 8px rgba(0,0,0,.85)}
.hero-cf-wrap .p-price{gap:7px}
.hero-cf-wrap .p-price strong{font-size:2.6rem;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.85)}
.hero-cf-wrap .p-price span{color:rgba(255,255,255,.6);white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.hero-cf-wrap .p-price strong.p-price-free{color:#4ade80}
.hero-cf-wrap .p-features li{color:rgba(255,255,255,.88);font-size:.76rem;white-space:normal;overflow-wrap:break-word;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.hero-cf-wrap .p-features{margin-bottom:18px;gap:9px}
.hero-cf-wrap .p-card.featured{box-shadow:0 0 0 1px rgba(37,99,235,.45),0 40px 100px rgba(37,99,235,.35)}

/* Franja de confianza bajo la tarjeta */
.hero-slider-stats{
  display:flex;justify-content:space-between;gap:8px;
  max-width:400px;margin:22px auto 0;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.09);
}
.hss-item{display:flex;align-items:center;gap:8px;min-width:0}
.hss-item svg{flex-shrink:0;color:#60a5fa}
.hss-item strong{display:block;font-size:.82rem;font-weight:800;color:#fff;line-height:1.25;white-space:nowrap}
.hss-item span{display:block;font-size:.62rem;color:rgba(255,255,255,.42);line-height:1.25;white-space:nowrap}
@media(max-width:1080px){
  .hss-item span{white-space:normal}
}

/* Imagen de fondo a pantalla completa dentro de la tarjeta, con overlay tintado por servicio (--pc-c) */
.hc-card-img-wrap{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.hc-card-img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.85) saturate(1.2)}
.hc-card-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(175deg,
    color-mix(in srgb,var(--pc-c,#3b82f6) 45%,rgba(6,10,26,.65)) 0%,
    rgba(7,11,28,.86) 16%,
    rgba(6,10,26,.93) 32%,
    rgba(5,8,22,.96) 50%,
    rgba(4,7,20,.98) 70%,
    rgba(3,6,16,.98) 100%);
}
.hc-card-icon{
  position:absolute;top:14px;left:14px;z-index:2;
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,12,36,.72);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);color:var(--pc-c,#3b82f6);
}
.hc-card-icon svg{width:16px;height:16px}
.hc-card-body{position:relative;z-index:1;padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}

/* ─── Cards de precio ─── */
.p-card{
  background:rgba(255,255,255,.032);
  border:1px solid rgba(255,255,255,.09);
  border-radius:26px;padding:30px 24px 26px;
  position:relative;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,border-color .35s,background .35s;
  display:flex;flex-direction:column;
}
/* Línea superior sutil */
.p-card::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}
.p-card:hover{
  transform:translateY(-10px);
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.048);
  box-shadow:0 34px 80px rgba(0,0,0,.55);
}
/* Card destacada — elevada por defecto, con brillo animado sutil */
.p-card.featured{
  background:linear-gradient(158deg,rgba(37,99,235,.18) 0%,rgba(8,4,28,.96) 52%,rgba(124,58,237,.13) 100%);
  border-color:rgba(37,99,235,.4);
  box-shadow:0 0 0 1px rgba(37,99,235,.22),0 36px 90px rgba(37,99,235,.3);
  transform:translateY(-10px);
  animation:pFeaturedGlow 4.5s ease-in-out infinite;
}
@keyframes pFeaturedGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(37,99,235,.22),0 36px 90px rgba(37,99,235,.3)}
  50%{box-shadow:0 0 0 1px rgba(124,58,237,.4),0 36px 100px rgba(124,58,237,.42)}
}
@media(prefers-reduced-motion:reduce){.p-card.featured{animation:none}}
.p-card.featured::before{
  background:linear-gradient(90deg,transparent,#3b82f6 25%,#7c3aed 75%,transparent);
  opacity:.55;height:2px;left:0;right:0;
}
.p-card.featured:hover{transform:translateY(-18px);animation-play-state:paused}
.p-badge{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,#2563eb,#7c3aed);
  color:#fff;border-radius:99px;padding:5px 22px;
  font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 4px 20px rgba(37,99,235,.55),0 0 0 4px rgba(37,99,235,.1);
  display:flex;align-items:center;gap:4px;
}
.p-name{
  font-size:.63rem;font-weight:700;color:rgba(255,255,255,.28);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;
}
.p-card.featured .p-name{margin-top:22px}
.p-orig{font-size:.78rem;color:rgba(255,255,255,.22);text-decoration:line-through;margin-bottom:4px}
.p-price{display:flex;align-items:baseline;gap:2px;line-height:1;margin-bottom:6px}
.p-price strong{font-size:3.6rem;font-weight:900;color:#fff;letter-spacing:-.05em}
.p-price sup{font-size:1rem;font-weight:800;color:rgba(255,255,255,.62);align-self:flex-start;margin-top:9px}
.p-price span,.p-price sub{font-size:.78rem;color:rgba(255,255,255,.28);align-self:flex-end;padding-bottom:7px;margin-left:1px}
.p-save{
  font-size:.69rem;font-weight:700;color:#22c55e;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.22);
  border-radius:7px;padding:3px 10px;display:inline-block;margin-bottom:16px;
}
.p-divider{height:1px;background:rgba(255,255,255,.07);margin:12px 0 16px}
.p-features{display:flex;flex-direction:column;gap:10px;flex:1;margin-bottom:22px}
.p-features li{display:flex;align-items:center;gap:9px;font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.3}
.p-check{color:rgba(255,255,255,.8)}
.p-check::before{
  content:'✓';flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:rgba(34,197,94,.13);border:1.5px solid rgba(34,197,94,.34);
  color:#22c55e;font-size:.63rem;font-weight:900;
}
.p-cross{color:rgba(255,255,255,.2);text-decoration:line-through}
.p-cross::before{
  content:'✕';flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.16);font-size:.57rem;
}
/* Botón CTA ancho completo dentro de las cards */
.p-card .btn{
  display:block;text-align:center;width:100%;
  padding:13px 20px;border-radius:14px;
  font-size:.84rem;font-weight:800;transition:all .22s;
}
.p-card .btn-glass{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.p-card .btn-glass:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.p-card.featured .btn-primary{
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  border:none;box-shadow:0 8px 24px rgba(37,99,235,.45);
}
.p-card.featured .btn-primary:hover{box-shadow:0 12px 36px rgba(37,99,235,.65);transform:translateY(-3px)}

/* ─── Cards Radio/TV (precios fijos en COP) ─── */
.rt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.rt-card{
  background:rgba(255,255,255,.032);
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;padding:28px 22px 24px;
  position:relative;display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s;
}
.rt-card::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}
.rt-card:hover{transform:translateY(-9px);border-color:rgba(255,255,255,.18);box-shadow:0 30px 72px rgba(0,0,0,.52)}
.rt-card.featured{
  background:linear-gradient(158deg,var(--rc,rgba(124,58,237,.18)) 0%,rgba(8,4,28,.96) 52%,rgba(124,58,237,.13) 100%);
  border-color:rgba(124,58,237,.4);
  box-shadow:0 0 0 1px rgba(124,58,237,.22),0 36px 90px rgba(124,58,237,.25);
  transform:translateY(-8px);
}
.rt-card.featured:hover{transform:translateY(-16px)}
.rt-ribbon{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,#f59e0b,#dc2626);
  color:#fff;border-radius:99px;padding:5px 20px;
  font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 4px 20px rgba(245,158,11,.5);
}
.rt-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:8px}
.rt-cat{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fc,#dc2626);background:color-mix(in srgb,var(--fc,#dc2626) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--fc,#dc2626) 30%,transparent);
  border-radius:99px;padding:4px 11px;
}
.rt-cur{
  font-size:.62rem;font-weight:700;color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:99px;padding:4px 10px;letter-spacing:.03em;white-space:nowrap;
}
.rt-name{font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:6px}
.rt-card.featured .rt-name{margin-top:6px}
.rt-desc{font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.5);margin-bottom:18px;min-height:58px}
.rt-price{display:flex;align-items:baseline;gap:4px;line-height:1;margin-bottom:20px}
.rt-price strong{font-size:2.4rem;font-weight:900;color:#fff;letter-spacing:-.03em}
.rt-price sup{font-size:.95rem;font-weight:800;color:rgba(255,255,255,.62);align-self:flex-start;margin-top:4px}
.rt-price.free strong{font-size:1.9rem;color:#22c55e}
.rt-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);
}
.rt-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.rt-stat-ic{font-size:1.05rem}
.rt-stat-v{font-size:.74rem;font-weight:800;color:#fff}
.rt-stat-l{font-size:.6rem;color:rgba(255,255,255,.35);letter-spacing:.02em}
.rt-cta{
  display:block;text-align:center;width:100%;
  padding:13px 18px;border-radius:14px;
  font-size:.84rem;font-weight:800;transition:all .22s;
  background:linear-gradient(135deg,var(--fc,#dc2626),#7c3aed);
  color:#fff;border:none;box-shadow:0 8px 24px color-mix(in srgb,var(--fc,#dc2626) 45%,transparent);
}
.rt-cta:hover{transform:translateY(-3px);box-shadow:0 12px 36px color-mix(in srgb,var(--fc,#dc2626) 60%,transparent)}
.rt-cta.free{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 8px 24px rgba(34,197,94,.4)}
.rt-cta.free:hover{box-shadow:0 12px 36px rgba(34,197,94,.55)}

/* ─── 15. PERF SECTION ───────────────────────── */
.perf-section{padding:100px 0;background:var(--bg2)}
.perf-head{text-align:center;margin-bottom:52px}
.perf-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

/* feature cards */
.perf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.perf-card{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  height:196px;cursor:default;
  transition:border-color .35s,box-shadow .35s;
  transform-style:preserve-3d;will-change:transform;
}
.perf-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--pc-c),transparent);
  opacity:0;transition:opacity .35s;
}
.perf-card:hover::before{opacity:1}
.perf-card:hover{
  border-color:var(--pc-c);
  box-shadow:0 0 0 1px var(--pc-c),0 16px 48px rgba(0,0,0,.5),0 0 40px var(--pc-glow);
}
.pc-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:brightness(.22) saturate(1.4);
  transition:filter .4s,transform .5s;
}
.perf-card:hover .pc-bg{filter:brightness(.35) saturate(1.7);transform:scale(1.07)}
.pc-veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.3) 55%,transparent 100%);
}
.pc-body{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  justify-content:flex-end;padding:14px;gap:7px;
}
.pc-icon{
  width:38px;height:38px;border-radius:11px;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .3s,border-color .3s,background .3s;
}
.pc-icon svg{width:18px;height:18px;stroke:var(--pc-c,currentColor);stroke-width:2}
.perf-card:hover .pc-icon{
  transform:translateY(-4px) scale(1.12);
  border-color:var(--pc-c);background:rgba(0,0,0,.72);
}
.pc-text{display:flex;flex-direction:column;gap:3px}
.pc-name{font-size:.8rem;font-weight:800;color:#fff;line-height:1.2;font-family:var(--font-heading)}
.pc-desc{font-size:.66rem;color:rgba(255,255,255,.42);line-height:1.35}
.pc-badge{
  position:absolute;top:10px;right:10px;z-index:3;
  font-size:.58rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--pc-c);background:rgba(0,0,0,.6);
  border:1px solid var(--pc-c);
  backdrop-filter:blur(6px);
  padding:3px 8px;border-radius:99px;
  transition:transform .3s;
}
.perf-card:hover .pc-badge{transform:translateY(-2px)}
.pc-glow-line{
  position:absolute;bottom:0;left:0;right:0;height:1px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--pc-c),transparent);
  opacity:0;transition:opacity .35s;
}
.perf-card:hover .pc-glow-line{opacity:1}

/* real-time panel */
/* ─── 15b. PERF PANEL (dashboard) ────────────── */
.perf-panel{
  background:rgba(5,10,28,.96);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 0 1px rgba(37,99,235,.1);
  backdrop-filter:blur(16px);
  align-self:flex-start;
}
/* Topbar */
.pp-topbar{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pp-dots{display:flex;gap:5px;flex-shrink:0}
.pp-dots span{width:10px;height:10px;border-radius:50%;opacity:.8}
.pp-url-bar{
  flex:1;display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);
  border-radius:6px;padding:4px 9px;
  font-size:.6rem;color:rgba(255,255,255,.35);font-family:var(--font-mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pp-url-bar svg{flex-shrink:0;opacity:.5}
.pp-live-badge{display:flex;align-items:center;gap:5px;font-size:.57rem;font-weight:800;letter-spacing:.1em;color:#22c55e;flex-shrink:0}
.pp-live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:ppLivePulse 1.6s ease-in-out infinite}
@keyframes ppLivePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.6)}60%{opacity:.5;box-shadow:0 0 0 5px rgba(34,197,94,0)}}
/* Nav tabs */
.pp-nav-tabs{
  display:flex;align-items:center;
  padding:0 14px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.06);
  gap:2px;
  overflow-x:auto;scrollbar-width:none;
}
.pp-nav-tabs::-webkit-scrollbar{display:none}
.pp-tab{
  display:flex;align-items:center;gap:5px;
  padding:9px 12px;
  font-size:.63rem;font-weight:600;color:rgba(255,255,255,.32);
  white-space:nowrap;cursor:default;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
  line-height:1;
}
.pp-tab-active{color:rgba(255,255,255,.82);border-color:#2563eb}
/* Body */
.pp-body{padding:14px;display:flex;flex-direction:column;gap:12px}
/* Stat bars row */
.pp-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pp-stat-block{
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:10px 11px;display:flex;flex-direction:column;gap:6px;
}
.pp-stat-hd{display:flex;align-items:center;justify-content:space-between}
.pp-stat-lbl{font-size:.58rem;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.06em}
.pp-stat-val{font-size:.85rem;font-weight:800;color:#fff;font-family:var(--font-mono);transition:color .5s}
.pp-val-green{color:#4ade80}
.pp-stat-bar{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.pp-stat-fill{height:100%;border-radius:2px;transition:width .9s cubic-bezier(.2,.8,.3,1)}
/* Dot indicators (reused) */
.pp-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pp-dot-green{background:#22c55e;box-shadow:0 0 5px rgba(34,197,94,.7)}
.pp-dot-cyan{background:#06b6d4;box-shadow:0 0 5px rgba(6,182,212,.7)}
.pp-dot-blue{background:#3b82f6;box-shadow:0 0 5px rgba(59,130,246,.7)}
.pp-pulse{animation:ppDotBlink 2.2s ease-in-out infinite}
@keyframes ppDotBlink{0%,100%{opacity:1}50%{opacity:.35}}
/* Sites section */
.pp-sites-section{
  background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;overflow:hidden;
}
.pp-sites-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.05);
}
.pp-sec-title{font-size:.62rem;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em}
.pp-add-btn{
  font-size:.58rem;font-weight:700;color:#3b82f6;
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);
  border-radius:5px;padding:3px 8px;cursor:default;
}
.pp-site-row{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;font-size:.7rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .2s;
}
.pp-site-row:last-child{border-bottom:none}
.pp-site-row:hover{background:rgba(255,255,255,.03)}
.pp-site-domain{flex:1;color:rgba(255,255,255,.7);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pp-site-tech{font-size:.6rem;color:rgba(255,255,255,.3);white-space:nowrap;padding:2px 6px;background:rgba(255,255,255,.04);border-radius:4px}
.pp-site-speed{font-size:.6rem;color:rgba(255,255,255,.28);white-space:nowrap;font-family:var(--font-mono)}
.pp-site-status{font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.pp-status-on{background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.18)}
.pp-status-live{background:rgba(6,182,212,.1);color:#67e8f9;border:1px solid rgba(6,182,212,.18)}
/* Quick actions */
.pp-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pp-action-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 6px;border-radius:10px;cursor:default;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.4);font-size:.6rem;font-weight:600;
  transition:background .2s,color .2s,border-color .2s;
}
.pp-action-btn:hover{background:rgba(37,99,235,.15);border-color:rgba(37,99,235,.3);color:#93c5fd}

/* ─── 16. TESTIMONIALS ───────────────────────── */
/* ─── Testimonios ─── */
/* ─── 16. BLOG ───────────────────────────────── */
.blog-section{padding:90px 0 80px;background:var(--bg3);overflow:hidden}
.blog-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:44px;flex-wrap:wrap;
}
.blog-see-all{
  font-size:.8rem;font-weight:700;color:rgba(255,255,255,.45);
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  transition:color .2s;border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:2px;
}
.blog-see-all:hover{color:#fff;border-color:rgba(255,255,255,.4)}
/* Slider */
.blog-slider-wrap{position:relative}
.blog-outer{
  overflow-x:auto;scrollbar-width:none;
  margin:0 -20px;padding:8px 20px 22px;
  scroll-behavior:smooth;
}
.blog-outer::-webkit-scrollbar{display:none}
.blog-track{display:flex;gap:20px;width:max-content;scroll-snap-type:x mandatory}
.blog-nav{
  position:absolute;top:42%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(8,12,36,.85);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.8);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:5;backdrop-filter:blur(10px);
  transition:background .2s,transform .2s,opacity .3s;
  flex-shrink:0;
}
.blog-nav:hover{background:rgba(37,99,235,.7);border-color:rgba(37,99,235,.5);transform:translateY(-50%) scale(1.1)}
.blog-nav-prev{left:-6px}
.blog-nav-next{right:-6px}
/* Card */
.blog-card{
  width:310px;flex-shrink:0;scroll-snap-align:start;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .32s cubic-bezier(.2,.8,.3,1),box-shadow .32s,border-color .32s;
}
.blog-card--featured{width:420px}
.blog-card:hover{
  transform:translateY(-8px);
  border-color:color-mix(in srgb,var(--bc,#2563eb) 40%,transparent);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
/* Image */
.blog-card-img-wrap{
  display:block;overflow:hidden;
  aspect-ratio:16/9;flex-shrink:0;position:relative;
}
.blog-card--featured .blog-card-img-wrap{aspect-ratio:21/9}
.blog-card-img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.blog-card:hover .blog-card-img{transform:scale(1.05)}
/* Category pill */
.blog-card-cat{
  position:absolute;top:14px;left:14px;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;
  background:var(--bc,#2563eb);color:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
/* Body */
.blog-card-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card--featured .blog-card-body{padding:24px 26px 26px}
.blog-card-title{font-size:.88rem;font-weight:800;line-height:1.45;margin:0}
.blog-card--featured .blog-card-title{font-size:1.05rem}
.blog-card-title a{
  color:#fff;text-decoration:none;
  transition:color .2s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-title a:hover{color:var(--bc,#60a5fa)}
.blog-card-exc{
  font-size:.76rem;color:rgba(255,255,255,.45);line-height:1.7;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  flex:1;
}
.blog-card--featured .blog-card-exc{-webkit-line-clamp:3}
/* Meta */
.blog-card-meta{
  display:flex;align-items:center;gap:7px;
  flex-wrap:wrap;margin-top:auto;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.05);
}
.blog-author-av{
  width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.15);
}
.blog-author-name{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.7)}
.blog-meta-sep{font-size:.55rem;color:rgba(255,255,255,.18)}
.blog-date,.blog-read{font-size:.67rem;color:rgba(255,255,255,.3)}
/* Responsive */
@media(max-width:768px){
  .blog-head{flex-direction:column;align-items:flex-start;gap:12px}
  .blog-card{width:78vw}
  .blog-card--featured{width:82vw}
  .blog-nav{display:none}
}

/* ─── 17. RATINGS ────────────────────────────── */
.ratings-section{padding:80px 0 72px;background:var(--bg);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden}
.rat-top{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;margin-bottom:44px}
.rat-platforms{display:flex;gap:12px;flex-shrink:0}
.rat-platform{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 22px;text-decoration:none;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:18px;min-width:148px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s,box-shadow .3s;
}
.rat-tp{border-color:rgba(0,182,122,.14)}
.rat-tp:hover{border-color:rgba(0,182,122,.5);box-shadow:0 8px 32px rgba(0,182,122,.2);transform:translateY(-4px)}
.rat-g:hover{border-color:rgba(66,133,244,.5);box-shadow:0 8px 32px rgba(66,133,244,.18);transform:translateY(-4px)}
.rat-fb{border-color:rgba(24,119,242,.18)}
.rat-fb:hover{border-color:rgba(24,119,242,.55);box-shadow:0 8px 32px rgba(24,119,242,.22);transform:translateY(-4px)}
.rat-fb .rat-plat-logo{color:#1877F2}
.rat-fb-recommend{display:flex;align-items:center;gap:5px;font-size:.71rem;font-weight:700;color:#1877F2}
.rat-percent{font-size:.88rem;font-weight:700}
.rat-plat-logo{display:flex;align-items:center;gap:7px;font-size:.79rem;font-weight:800;color:#fff}
.rat-tp .rat-plat-logo{color:#00b67a}
.rat-tp-icon{width:16px;height:16px;flex-shrink:0}
.rat-g-icon{width:16px;height:16px;flex-shrink:0}
.rat-plat-stars{font-size:.95rem;letter-spacing:2px;line-height:1}
.rat-half-star{opacity:.28}
.tp-green{color:#00b67a}
.g-amber{color:#fbbc04}
.rat-plat-score{display:flex;align-items:baseline;gap:5px}
.rat-plat-score strong{font-family:var(--font-heading);font-size:1.45rem;font-weight:800;color:#fff}
.rat-plat-score span{font-size:.67rem;color:rgba(255,255,255,.42);font-weight:600}
.rat-plat-count{font-size:.61rem;color:rgba(255,255,255,.28);font-weight:500}
/* review slider */
.rat-slider-wrap{display:flex;align-items:center;gap:12px;margin:32px 0 0}
.rat-nav{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.65);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;padding:0;
}
.rat-nav:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
/* review track */
.rat-outer{flex:1;min-width:0;overflow-x:auto;overflow-y:visible;scrollbar-width:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 4px 18px}
.rat-outer::-webkit-scrollbar{display:none}
.rat-track{display:flex;gap:12px;width:max-content;padding-bottom:2px}
.rat-card{
  width:265px;flex-shrink:0;scroll-snap-align:start;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:20px;padding:18px 16px;
  display:flex;flex-direction:column;gap:9px;
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s;
}
.rat-card::before{content:'';position:absolute;top:0;left:12px;right:12px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.rat-card:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.rat-card-tp:hover{border-color:rgba(0,182,122,.22)}
.rat-card-g:hover{border-color:rgba(66,133,244,.22)}
.rat-card-fb:hover{border-color:rgba(24,119,242,.28)}
.rat-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.rat-source{display:flex;align-items:center;gap:4px;font-size:.59rem;font-weight:800;padding:3px 8px;border-radius:99px}
.rat-source svg{width:11px;height:11px;flex-shrink:0}
.rat-src-tp{background:rgba(0,182,122,.1);color:#00b67a;border:1px solid rgba(0,182,122,.18)}
.rat-src-g{background:rgba(66,133,244,.08);color:#93c5fd;border:1px solid rgba(66,133,244,.18)}
.rat-src-fb{background:rgba(24,119,242,.08);color:#60a5fa;border:1px solid rgba(24,119,242,.18)}
.rat-date{font-size:.59rem;color:rgba(255,255,255,.25)}
.rat-stars{font-size:.86rem;letter-spacing:1px;line-height:1}
.rat-card-tp .rat-stars{color:#00b67a}
.rat-card-g .rat-stars{color:#fbbc04}
.rat-recommend{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;color:#1877F2}
.rat-text{font-size:.76rem;color:rgba(255,255,255,.55);line-height:1.72;flex:1;margin:0;font-style:italic;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rat-footer{display:flex;align-items:center;gap:9px;border-top:1px solid rgba(255,255,255,.05);padding-top:12px;margin-top:auto}
.rat-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.1)}
.rat-avatar-letter{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--av-c,#2563eb),oklch(from var(--av-c,#2563eb) calc(l - .15) c h));
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:#fff;
  border:2px solid rgba(255,255,255,.15);
}
.rat-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.rat-name{font-size:.73rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.rat-loc{font-size:.59rem;color:rgba(255,255,255,.3)}
.rat-cta{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:40px}
.rat-cta-chat{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 28px;border-radius:18px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#1d4ed8,#2563eb 50%,#7c3aed);
  color:#fff;font-family:var(--font-heading);
  box-shadow:0 8px 32px rgba(37,99,235,.45),0 0 0 1px rgba(124,58,237,.25);
  transition:transform .25s,box-shadow .25s;
}
.rat-cta-chat:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(37,99,235,.55),0 0 0 1px rgba(124,58,237,.35)}
.rat-cta-icon{
  width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.18);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rat-cta-text{display:flex;flex-direction:column;text-align:left}
.rat-cta-text strong{font-size:.95rem;font-weight:800;letter-spacing:-.01em;display:block}
.rat-cta-text small{font-size:.7rem;color:rgba(255,255,255,.68);margin-top:2px;font-weight:500}
.rat-cta-arrow{font-size:1.1rem;opacity:.7;margin-left:4px;transition:transform .2s}
.rat-cta-chat:hover .rat-cta-arrow{transform:translateX(4px)}
.rat-see-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.rat-see-all{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.71rem;font-weight:600;padding:9px 16px;
  border-radius:12px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  text-decoration:none;color:rgba(255,255,255,.5);
  transition:all .22s;
}
.rat-see-all:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.rat-see-tp:hover{border-color:rgba(0,182,122,.4);color:#00b67a}
.rat-see-g:hover{border-color:rgba(66,133,244,.4)}
.rat-see-fb:hover{border-color:rgba(24,119,242,.4);color:#60a5fa}
.chat-trigger{display:inline-flex;align-items:center;gap:8px}

/* ─── 18. FOOTER FEATURES BAR ────────────────── */
.footer-features-bar{
  background:var(--bg2);
  border-top:1px solid rgba(255,255,255,.05);
  padding:30px 0;
}
.ffbar{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ff-item{
  position:relative;display:flex;align-items:center;gap:13px;padding:16px 18px;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--fc,#3b82f6) 22%,rgba(255,255,255,.07));
  background:linear-gradient(160deg,color-mix(in srgb,var(--fc,#3b82f6) 8%,rgba(255,255,255,.035)),rgba(255,255,255,.015));
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
  overflow:hidden;
}
.ff-item::after{
  content:'';position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--fc,#3b82f6) 50%,transparent);
  opacity:.7;
}
.ff-item::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--fc,#3b82f6) 55%,transparent),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.ff-item:hover{
  background:linear-gradient(160deg,color-mix(in srgb,var(--fc,#3b82f6) 14%,rgba(255,255,255,.05)),rgba(255,255,255,.02));
  border-color:color-mix(in srgb,var(--fc,#3b82f6) 45%,transparent);
  transform:translateY(-4px);
  box-shadow:0 16px 38px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--fc,#3b82f6) 18%,transparent);
}
.ff-item:hover::before{opacity:1}
.ff-icon-wrap{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(155deg,color-mix(in srgb,var(--fc,#3b82f6) 32%,transparent),color-mix(in srgb,var(--fc,#3b82f6) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--fc,#3b82f6) 48%,transparent);
  box-shadow:0 4px 16px color-mix(in srgb,var(--fc,#3b82f6) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;color:var(--fc,#6da4ff);
  transition:transform .25s,box-shadow .25s;
}
.ff-item:hover .ff-icon-wrap{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 6px 20px color-mix(in srgb,var(--fc,#3b82f6) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.18);
}
.ff-name{display:block;font-size:.8rem;font-weight:700;color:#fff;line-height:1.2}
.ff-sub{display:block;font-size:.65rem;color:rgba(255,255,255,.35);margin-top:2px}

/* ─── 19. FOOTER ─────────────────────────────── */
.footer{background:var(--bg);position:relative;overflow:hidden;padding:0}
.footer::before{
  content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:1100px;height:420px;pointer-events:none;
  background:radial-gradient(ellipse at top,rgba(37,99,235,.1),transparent 70%);
}
.footer::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:900px;height:350px;pointer-events:none;
  background:radial-gradient(ellipse at bottom,rgba(124,58,237,.07),transparent 70%);
}
.footer-top-bar{height:3px;background:linear-gradient(90deg,transparent,#2563eb 30%,#7c3aed 70%,transparent);opacity:.6}
.footer .container{padding-top:68px;padding-bottom:36px;position:relative;z-index:1}
/* Layout */
.footer-main{display:grid;grid-template-columns:280px 1fr;gap:60px;margin-bottom:56px}
.footer-brand{display:flex;flex-direction:column}
.footer-logo-link{display:inline-block;margin-bottom:20px}
.footer-logo-img{display:block;height:40px;width:auto}
.footer-desc{font-size:.83rem;color:rgba(255,255,255,.42);line-height:1.8;margin-bottom:24px;max-width:250px}
/* Contact */
.footer-contact{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.footer-contact-item{
  display:flex;align-items:center;gap:10px;
  font-size:.79rem;font-weight:600;color:rgba(255,255,255,.55);
  transition:color .2s,transform .2s;text-decoration:none;
}
.footer-contact-item svg{
  flex-shrink:0;width:30px;height:30px;padding:8px;box-sizing:border-box;
  border-radius:9px;color:#6da4ff;
  background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.22);
  transition:background .2s,border-color .2s;
}
.footer-contact-item:hover{color:#fff;transform:translateX(2px)}
.footer-contact-item:hover svg{background:rgba(37,99,235,.28);border-color:rgba(37,99,235,.5)}
/* Social — colored brand icons */
.footer-social-label{display:block;font-size:.63rem;font-weight:800;color:rgba(255,255,255,.32);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.footer-social{display:flex;gap:8px;flex-wrap:wrap}
.fsoc-btn{
  width:38px;height:38px;border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.45);
  transition:all .22s;flex-shrink:0;
}
/* Brand hover colors */
.fsoc-fb{border-color:rgba(24,119,242,.18);color:rgba(90,150,255,.7)}
.fsoc-fb:hover{background:#1877F2;border-color:#1877F2;color:#fff;transform:translateY(-3px);box-shadow:0 6px 18px rgba(24,119,242,.4)}
.fsoc-ig{border-color:rgba(225,48,108,.18);color:rgba(230,120,160,.7)}
.fsoc-ig:hover{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:#E1306C;color:#fff;transform:translateY(-3px);box-shadow:0 6px 18px rgba(225,48,108,.4)}
.fsoc-yt{border-color:rgba(255,0,0,.18);color:rgba(255,100,100,.7)}
.fsoc-yt:hover{background:#FF0000;border-color:#FF0000;color:#fff;transform:translateY(-3px);box-shadow:0 6px 18px rgba(255,0,0,.4)}
.fsoc-dc{border-color:rgba(88,101,242,.18);color:rgba(140,155,255,.7)}
.fsoc-dc:hover{background:#5865F2;border-color:#5865F2;color:#fff;transform:translateY(-3px);box-shadow:0 6px 18px rgba(88,101,242,.4)}
.fsoc-wa{border-color:rgba(37,211,102,.18);color:rgba(80,210,120,.7)}
.fsoc-wa:hover{background:#25d366;border-color:#25d366;color:#fff;transform:translateY(-3px);box-shadow:0 6px 18px rgba(37,211,102,.4)}
/* Link columns */
.footer-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.footer-col-title{
  display:flex;align-items:center;gap:9px;
  font-size:.68rem;font-weight:800;
  color:rgba(255,255,255,.6);
  letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:18px;
}
.fct-icon{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--fc,#3b82f6) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--fc,#3b82f6) 30%,transparent);
  color:var(--fc,#3b82f6);
}
.footer-links{display:flex;flex-direction:column;gap:2px;list-style:none}
.footer-links li{border-radius:8px;transition:background .18s}
.footer-links li:hover{background:rgba(255,255,255,.035)}
.footer-links a{
  display:flex;align-items:center;gap:0;
  font-size:.79rem;color:rgba(255,255,255,.42);
  transition:color .2s,gap .2s;line-height:1.3;
  padding:7px 8px;border-radius:8px;
}
.footer-links a::before{
  content:'';width:0;height:1px;
  background:var(--fc,#60a5fa);flex-shrink:0;
  transition:width .2s;
}
.footer-links a:hover{color:#fff;gap:7px}
.footer-links a:hover::before{width:9px}
/* Divider */
.footer-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent);margin-bottom:26px}
/* Bottom row */
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.footer-copy{font-size:.75rem;color:rgba(255,255,255,.3);font-weight:500}
/* Payment methods */
.footer-payments{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fp-label{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.64rem;font-weight:700;color:rgba(255,255,255,.38);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
.fp-label svg{color:#22c55e;flex-shrink:0}
.fp-logos{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fp-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 12px;border-radius:7px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.1);
  font-size:.68rem;font-weight:800;
  letter-spacing:.01em;
  transition:transform .2s,box-shadow .2s;
  cursor:default;
}
.fp-badge:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.fp-paypal strong:first-child{color:#003087;margin-right:0}
.fp-paypal strong:last-child{color:#009CDE}
.fp-nequi{color:#8B2FBF;font-style:italic;letter-spacing:-.02em}
.fp-mp{letter-spacing:-.01em}
.fp-mp span:first-child{color:#009EE3}
.fp-mp span:last-child{color:#009EE3;font-weight:900}
.fp-pse{color:#009949;letter-spacing:.05em}
/* Legal links */
.footer-legal{display:flex;align-items:center;gap:10px}
.footer-legal a{font-size:.74rem;color:rgba(255,255,255,.3);transition:color .2s;text-decoration:none}
.footer-legal a:hover{color:rgba(255,255,255,.85)}
.footer-legal span{color:rgba(255,255,255,.14)}
/* Social Proof Popup */
.spopup{
  position:fixed;bottom:24px;left:20px;z-index:1200;
  width:316px;max-width:calc(100vw - 32px);
  background:rgba(6,10,26,.97);
  border:1px solid rgba(37,99,235,.22);
  border-radius:18px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 0 1px rgba(37,99,235,.1);
  backdrop-filter:blur(16px);
  transform:translateY(110%) scale(.95);
  opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .45s;
  pointer-events:none;
}
.spopup:not([hidden]){pointer-events:all}
.spopup.spopup-show{transform:translateY(0) scale(1);opacity:1}
.spopup.spopup-hide{transform:translateY(110%) scale(.95);opacity:0}
.spopup-inner{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 10px}
.spopup-avatar-wrap{position:relative;flex-shrink:0}
.spopup-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(37,99,235,.35)}
.spopup-live-dot{
  position:absolute;bottom:1px;right:1px;
  width:12px;height:12px;border-radius:50%;
  background:#22c55e;border:2px solid rgba(6,10,26,.97);
  animation:ppLivePulse 1.6s ease-in-out infinite;
}
.spopup-body{flex:1;min-width:0}
.spopup-action{font-size:.76rem;color:rgba(255,255,255,.55);margin-bottom:3px;line-height:1.3}
.spopup-action strong{color:#fff;font-weight:800}
.spopup-plan{
  display:block;font-size:.8rem;font-weight:700;
  color:#60a5fa;text-decoration:none;
  margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .2s;
}
.spopup-plan:hover{color:#93c5fd}
.spopup-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.spopup-price{
  font-size:.7rem;font-weight:800;
  color:#22c55e;
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.2);
  padding:2px 7px;border-radius:99px;
}
.spopup-sep{color:rgba(255,255,255,.2);font-size:.65rem}
.spopup-loc{font-size:.68rem;color:rgba(255,255,255,.4)}
.spopup-time{
  display:inline-block;margin-top:4px;
  font-size:.62rem;color:rgba(255,255,255,.25);
  font-style:italic;
}
.spopup-close{
  position:absolute;top:10px;right:10px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.4);font-size:.9rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;z-index:1;
}
.spopup-close:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.3);color:#f87171}
.spopup-bar{height:3px;background:rgba(255,255,255,.05)}
.spopup-bar-fill{height:100%;background:linear-gradient(90deg,#2563eb,#7c3aed);width:100%}
@media(max-width:580px){.spopup{width:calc(100vw - 32px);bottom:16px;left:16px}}
/* Responsive footer */
@media(max-width:1200px){
  .footer-main{grid-template-columns:240px 1fr;gap:40px}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .footer-main{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(3,1fr);gap:20px}
  .footer-desc{max-width:100%}
}
@media(max-width:768px){
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:580px){
  .ffbar{grid-template-columns:1fr 1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
  .ff-item{padding:11px 12px}
  .ff-icon-wrap{width:32px;height:32px}
  .footer-payments{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ─── 20. FLOATING ───────────────────────────── */
/* ── Botones flotantes ── */
/* ── Botones flotantes — alineados con gap uniforme de 12px ── */
/* Rocket: bottom 22, top 76  |  WA: bottom 88, top 142  |  SAM: bottom 154, top 208 */

.float-sam{
  position:fixed;bottom:154px;right:20px;z-index:850;
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,#1a3a70 0%,#1e4eb0 50%,#f08028 100%);
  border:2px solid rgba(255,180,80,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-shadow:0 4px 24px rgba(240,128,40,.38),0 0 0 0 rgba(240,128,40,.3);
  transition:all var(--t);cursor:pointer;overflow:hidden;
  animation:samBtnPulse 3s ease-in-out infinite;
}
@keyframes samBtnPulse{0%,100%{box-shadow:0 4px 24px rgba(240,128,40,.35),0 0 0 0 rgba(240,128,40,.25)}60%{box-shadow:0 4px 28px rgba(240,128,40,.55),0 0 0 8px rgba(240,128,40,0)}}
.float-sam:hover{transform:scale(1.1) translateY(-2px);animation:none;box-shadow:0 8px 36px rgba(240,128,40,.55)}
.float-sam-face{width:34px;height:34px}
.float-sam-badge{font-size:.45rem;font-weight:900;letter-spacing:.08em;color:rgba(255,255,255,.75);text-transform:uppercase;line-height:1}

.float-wa{
  position:fixed;bottom:88px;right:20px;z-index:800;
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.4);transition:all var(--t);
  color:#fff;text-decoration:none;
}
.float-wa:hover{transform:scale(1.1);box-shadow:0 8px 36px rgba(37,211,102,.6)}

/* ── Cohete scroll-to-top ── */
.scroll-top{
  position:fixed;bottom:22px;right:20px;z-index:800;
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(160deg,#0c1e48,#1a3a80);
  border:1.5px solid rgba(100,160,240,.4);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s,box-shadow .3s,border-color .3s;
  box-shadow:0 4px 20px rgba(37,99,235,.4);overflow:hidden;cursor:pointer;
}
.scroll-top.visible{opacity:1;pointer-events:all}
.scroll-top:hover{box-shadow:0 6px 28px rgba(37,99,235,.65)}
/* Glow anaranjado-azul durante el lanzamiento */
.scroll-top.launching{
  border-color:rgba(251,191,36,.7)!important;
  box-shadow:0 0 28px rgba(251,191,36,.65),0 0 56px rgba(249,115,22,.35),0 8px 32px rgba(37,99,235,.5)!important;
}

.rkt-wrap{
  position:relative;display:flex;flex-direction:column;align-items:center;
  transition:transform .65s cubic-bezier(.22,.9,.36,1);
}
.rkt-svg{width:22px;height:36px;display:block;transition:filter .3s}
.scroll-top:hover .rkt-svg{filter:drop-shadow(0 0 7px rgba(96,165,250,.95))}
.scroll-top.launching .rkt-svg{filter:drop-shadow(0 0 10px rgba(251,191,36,.9)) drop-shadow(0 0 4px rgba(249,115,22,.7))}

/* Llamas */
.rkt-flames{
  display:flex;gap:2px;align-items:flex-start;justify-content:center;
  height:0;overflow:visible;margin-top:-2px;
}
.rkt-f{
  display:block;
  border-radius:48% 48% 62% 62% / 38% 38% 62% 62%;
  opacity:0;
  transform-origin:center top;
}
/* Llama izquierda — azul cálido */
.rkt-f1{
  width:7px;height:26px;
  background:linear-gradient(to bottom,#fde68a 0%,#f97316 45%,rgba(239,68,68,.2) 85%,transparent);
  filter:blur(.7px);
}
/* Llama central — núcleo brillante */
.rkt-f2{
  width:11px;height:40px;
  background:linear-gradient(to bottom,#fff 0%,#fef08a 18%,#f59e0b 42%,#f97316 65%,rgba(239,68,68,.15) 88%,transparent);
  filter:blur(.3px);
}
/* Llama derecha — azul cálido */
.rkt-f3{
  width:7px;height:26px;
  background:linear-gradient(to bottom,#fde68a 0%,#f97316 45%,rgba(239,68,68,.2) 85%,transparent);
  filter:blur(.7px);
}
/* Lanzamiento: cohete sube + llamas aparecen */
.scroll-top.launching .rkt-wrap{transform:translateY(-95px) scale(.55)}
.scroll-top.launching .rkt-f1{opacity:1;animation:flameL .09s ease-in-out infinite}
.scroll-top.launching .rkt-f2{opacity:1;animation:flameC .11s ease-in-out infinite}
.scroll-top.launching .rkt-f3{opacity:1;animation:flameR .08s ease-in-out infinite}
@keyframes flameL{
  0%,100%{height:26px;transform:scaleX(1) translateX(0)}
  50%{height:22px;transform:scaleX(.8) translateX(-1px)}
}
@keyframes flameC{
  0%,100%{height:40px;transform:scaleX(1)}
  33%{height:46px;transform:scaleX(.88)}
  66%{height:38px;transform:scaleX(1.08)}
}
@keyframes flameR{
  0%,100%{height:26px;transform:scaleX(1) translateX(0)}
  50%{height:30px;transform:scaleX(.82) translateX(1px)}
}

/* Panel chat SAM */
.sam-chat-panel{
  position:fixed;bottom:20px;right:86px;z-index:1000;
  width:320px;
  background:rgba(4,10,32,.97);
  border:1px solid rgba(37,99,235,.35);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(240,128,40,.1);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(16px) scale(.96);
  transition:opacity .25s,transform .25s;
  backdrop-filter:blur(20px);
}
.sam-chat-panel.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.scp-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:rgba(14,30,70,.9);border-bottom:1px solid rgba(37,99,235,.25);flex-shrink:0}
.scp-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#0a1628;border:2px solid rgba(240,128,40,.4);flex-shrink:0}
.scp-avatar svg{width:100%;height:100%}
.scp-info{flex:1;min-width:0}
.scp-info strong{display:block;font-size:.85rem;font-weight:800;color:#fff;font-family:var(--font-heading)}
.scp-info span{display:flex;align-items:center;gap:4px;font-size:.68rem;color:rgba(255,255,255,.5)}
.scp-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;animation:pulse 2s ease-in-out infinite;flex-shrink:0}
.scp-close{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}
.scp-close:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.4);color:#f87171}
.scp-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:220px;max-height:300px;scrollbar-width:thin;scrollbar-color:rgba(37,99,235,.3) transparent}
.scp-msg{max-width:80%;padding:9px 13px;border-radius:14px;font-size:.78rem;line-height:1.5;animation:scpMsgIn .25s ease-out}
@keyframes scpMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.scp-msg.sam{background:rgba(30,78,176,.25);border:1px solid rgba(37,99,235,.2);color:rgba(255,255,255,.88);align-self:flex-start;border-radius:4px 14px 14px 14px}
.scp-msg.user{background:linear-gradient(135deg,rgba(37,99,235,.5),rgba(109,40,217,.4));border:1px solid rgba(37,99,235,.35);color:#fff;align-self:flex-end;border-radius:14px 4px 14px 14px}
.scp-typing{display:flex;gap:4px;align-items:center;padding:9px 13px;background:rgba(30,78,176,.2);border:1px solid rgba(37,99,235,.15);border-radius:4px 14px 14px 14px;align-self:flex-start;width:fit-content}
.scp-typing span{width:6px;height:6px;border-radius:50%;background:#60a5fa;animation:scpDot 1.2s ease-in-out infinite}
.scp-typing span:nth-child(2){animation-delay:.2s}
.scp-typing span:nth-child(3){animation-delay:.4s}
@keyframes scpDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.scp-bottom{padding:10px 12px 12px;border-top:1px solid rgba(37,99,235,.18);flex-shrink:0}
.scp-input-wrap{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:4px 4px 4px 12px}
.scp-input{flex:1;background:transparent;border:none;color:#fff;font-size:.8rem;padding:6px 0}
.scp-input::placeholder{color:rgba(255,255,255,.3)}
.scp-send{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--blue-d));border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s}
.scp-send:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(37,99,235,.5)}
.scp-footer{font-size:.6rem;color:rgba(255,255,255,.28);text-align:center;margin-top:8px}
@media(max-width:420px){.sam-chat-panel{right:0;left:0;bottom:0;width:100%;border-radius:18px 18px 0 0;max-height:90vh}}

/* ─── 21. PWA / COOKIE ───────────────────────── */
.pwa-popup{
  position:fixed;top:calc(var(--ann-h) + var(--nav-h) + 14px);left:50%;z-index:900;
  width:320px;max-width:calc(100vw - 32px);
  background:linear-gradient(160deg,rgba(11,17,42,.98),rgba(5,9,24,.98));
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);
  padding:18px 20px 20px;box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(37,99,235,.12);
  opacity:0;pointer-events:none;transform:translate(-50%,-14px);transition:opacity var(--t),transform var(--t);
  backdrop-filter:blur(20px);overflow:hidden;
}
body.ann-hidden .pwa-popup{top:calc(var(--nav-h) + 14px)}
.pwa-popup::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#3b82f6,#7c3aed,transparent);opacity:.75;
}
.pwa-popup.visible{opacity:1;pointer-events:all;transform:translate(-50%,0)}
.pwa-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-right:22px}
.pwa-icon{width:44px;height:44px;flex-shrink:0;border-radius:12px;box-shadow:0 6px 18px rgba(37,99,235,.4);object-fit:cover;display:block}
.pwa-header-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pwa-header-text strong{font-size:.88rem;font-weight:700;color:#fff;line-height:1.3}
.pwa-site{font-size:.7rem;color:var(--text2)}
.pwa-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:24px;height:24px;border-radius:50%;
  background:var(--surface2);color:var(--text2);font-size:.8rem;
  display:flex;align-items:center;justify-content:center;transition:all var(--t);
}
.pwa-close:hover{background:var(--surface3);color:#fff}
.pwa-desc{font-size:.79rem;color:var(--text2);line-height:1.65;margin-bottom:16px}
.pwa-btns{display:flex;gap:8px}
.pwa-btns .btn{flex:1;justify-content:center}

.cookie-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:850;
  background:rgba(4,9,22,.97);border-top:1px solid rgba(255,255,255,.1);
  padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  backdrop-filter:blur(18px);overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity var(--t),transform var(--t);
}
.cookie-bar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#3b82f6,#7c3aed,transparent);opacity:.6;
}
.cookie-bar.visible{opacity:1;pointer-events:all;transform:translateY(0)}
.cookie-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;
  background:rgba(37,99,235,.14);border:1px solid rgba(37,99,235,.28);
  display:flex;align-items:center;justify-content:center;color:#60a5fa;
}
.cookie-content{flex:1 1 380px;min-width:220px}
.cookie-content p{font-size:.8rem;color:var(--text2);line-height:1.55}
.cookie-content a{color:var(--blue-l);border-bottom:1px solid rgba(59,130,246,.3);white-space:nowrap}
.cookie-btns{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;margin-left:auto}

/* ─── 22. REVEAL ANIMATIONS ──────────────────── */
.reveal{opacity:0;transition:opacity .6s ease,transform .6s ease}
.reveal.up{transform:translateY(30px)}
.reveal.left{transform:translateX(-30px)}
.reveal.right{transform:translateX(30px)}
.reveal.visible{opacity:1 !important;transform:none !important}

/* Particles */
.particle{position:absolute;border-radius:50%;pointer-events:none;animation:particleDrift linear infinite}
@keyframes particleDrift{
  0%{opacity:0;transform:translateY(0)}10%{opacity:.6}90%{opacity:.6}100%{opacity:0;transform:translateY(-60px)}
}
@keyframes particle{
  0%{opacity:0;transform:translateY(0)}10%{opacity:.6}90%{opacity:.6}100%{opacity:0;transform:translateY(-60px)}
}

/* ─── 23. RESPONSIVE ─────────────────────────── */
@media(max-width:1200px){
  .nav-links{gap:0}
  .nav-link{padding:7px 10px;font-size:.79rem}
  .mega{min-width:600px}
  .mega-feature{min-height:240px}
  .srv-grid{grid-template-rows:repeat(2,340px);padding:0 20px}
  .ptab{width:130px}
}
@media(max-width:1024px){
  .nav-links,.nav-login,.nav-utils{display:none}
  .mob-login-btn{display:flex}
  .slide-inner{grid-template-columns:1fr;gap:32px}
  .slide-visual{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .perf-layout{grid-template-columns:1fr}
  .perf-cards{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  :root{--nav-h:60px;--ann-h:0px}
  .section-h2{font-size:clamp(1.5rem,4vw,2.3rem)}
  .ptab{width:120px}
  .ptab-thumb{height:65px}
}
@media(max-width:768px){
  .domain-ext{display:none}
  .stats-grid{grid-template-columns:1fr 1fr}
  /* Services: slider horizontal en mobile */
  .services-section{padding-top:28px}
  .srv-outer{padding:16px 0 50px}
  .srv-grid{
    display:flex;
    grid-template-columns:none;grid-template-rows:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:10px;padding:4px 18px 6px;max-width:none;
  }
  .srv-grid::-webkit-scrollbar{display:none}
  .srv-card{
    flex:0 0 74vw;min-width:0;height:400px;
    scroll-snap-align:start;
    grid-column:auto;grid-row:auto;border-radius:18px;
  }
  .srv-top{padding:15px 15px 0}
  .srv-bottom{padding:0 15px 17px;gap:7px}
  .srv-title{font-size:1.7rem}
  .srv-num{font-size:6.5rem}
  .srv-btn{padding:10px 18px;font-size:.8rem;border-radius:10px}
  /* Pricing tabs — scroll horizontal en mobile */
  .pricing-tabs{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:4px 24px 12px;
    margin:0 -24px 28px;max-width:none;
  }
  .pricing-tabs::-webkit-scrollbar{display:none}
  .ptab{width:122px;flex-shrink:0;scroll-snap-align:start}
  .ptab-thumb{height:66px}
  /* Pricing cards — el panel hace el scroll */
  .pricing-panel.active{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 -24px;
  }
  .pricing-panel.active::-webkit-scrollbar{display:none}
  .pricing-grid,.pricing-grid.cf-ready{
    display:flex;flex-wrap:nowrap;width:max-content;height:auto;
    gap:14px;padding:16px 24px 28px;max-width:none;margin:0;perspective:none;
  }
  .pricing-grid.cf-ready .p-card,.p-card{
    position:static;width:auto;flex:0 0 80vw;min-width:0;scroll-snap-align:start;border-radius:20px;
    transform:none !important;opacity:1 !important;filter:none !important;
  }
  .p-card.featured{flex:0 0 84vw}
  .cf-nav,.cf-dots{display:none}
  .rat-top{grid-template-columns:1fr;gap:24px}
  .rat-platforms{justify-content:flex-start;flex-wrap:wrap;gap:8px}
  .rat-platform{min-width:130px;padding:14px 16px}
  .rat-cta-chat{padding:12px 20px}
  .rat-cta-icon{width:38px;height:38px;border-radius:10px}
  .rat-cta-text strong{font-size:.88rem}
  .rat-see-links{gap:6px}
  .trust-inner{justify-content:flex-start;gap:18px}
  .trust-sep{display:none}
  /* perf section mobile — slider horizontal */
  .perf-section{padding:70px 0}
  .perf-layout{grid-template-columns:1fr;gap:32px}
  .perf-cards{
    display:flex;flex-wrap:nowrap;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;padding:8px 24px 20px;margin:0 -24px;
    height:auto;
  }
  .perf-cards::-webkit-scrollbar{display:none}
  .perf-card{flex:0 0 230px;flex-shrink:0;scroll-snap-align:start;height:190px}
}
@media(max-width:580px){
  :root{--ann-h:0px}
  .container{padding:0 16px}
  .nav-wrap{border-radius:16px;padding:0 14px}
  .slide-h1{font-size:clamp(1.7rem,7vw,2.4rem)}
  .hero-domain{padding:16px}
  .domain-input{padding:11px 13px;font-size:.85rem}
  .domain-btn{padding:11px 15px;font-size:.8rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat-num{font-size:2rem}
  .slide-stats{gap:14px}
  .slide-stat-num{font-size:1rem}
  .pricing-tabs{gap:7px;padding:4px 16px 10px;margin:0 -16px 22px}
  .ptab{width:108px}
  .ptab-thumb{height:56px}
  .ptab-name{font-size:.74rem}
  .ptab-sub{display:none}
  .pricing-panel.active{margin:0 -16px}
  .pricing-grid{padding:14px 16px 24px}
  .p-card{flex:0 0 88vw}
  .p-price strong{font-size:3rem}
  body.ann-hidden .mobile-nav{top:calc(var(--nav-h) + 8px)}
  .perf-cards{gap:10px;margin:0 -16px;padding:8px 16px 18px;scroll-snap-type:x mandatory}
  .perf-card{flex:0 0 200px;height:175px;scroll-snap-align:start}
  .pp-stats-row{grid-template-columns:1fr 1fr}
  .rat-nav{display:none}
  .rat-card{width:82vw;scroll-snap-align:start}
  .rat-plat-score strong{font-size:1.25rem}
}
@media(max-width:400px){
  .slide-h1{font-size:1.65rem}
  .hero-domain-pills{gap:4px}
  .hdp{font-size:.68rem;padding:2px 8px}
  .pwa-popup{left:10px;right:10px;width:auto;max-width:none;transform:translateY(-14px)}
  .pwa-popup.visible{transform:translateY(0)}
  .cookie-btns{width:100%;margin-left:0}
  .cookie-btns .btn{flex:1}
}

/* ─── 24. SELECTOR OPTS ─────────────────────── */
.sel-opt-sym{width:18px;height:18px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0}
.sel-opt-flag{font-size:1.2rem;flex-shrink:0}
.sel-opt-info{display:flex;flex-direction:column;flex:1}
.sel-opt-name{font-size:.79rem;font-weight:700;color:#fff;line-height:1}
.sel-opt-sub{font-size:.67rem;color:var(--text2);margin-top:2px}
.sel-opt-check{color:var(--blue-l);font-weight:800;font-size:.85rem;margin-left:auto}

/* ─── 25. GEO TOAST ──────────────────────────── */
.geo-toast{
  position:fixed;bottom:80px;right:22px;z-index:850;
  display:flex;align-items:center;gap:12px;
  background:rgba(5,12,32,.96);border:1px solid var(--border2);
  border-radius:var(--r-xl);padding:14px 18px;
  box-shadow:var(--shadow-lg);
  width:290px;
  transform:translateX(110%);opacity:0;transition:all .4s var(--t);
  backdrop-filter:blur(20px);
}
.geo-toast.show{transform:translateX(0);opacity:1}
.geo-toast-flag{font-size:1.8rem;flex-shrink:0}
.geo-toast-body{flex:1}
.geo-toast-title{font-size:.82rem;font-weight:700;color:#fff}
.geo-toast-sub{font-size:.72rem;color:var(--text2);margin-top:2px}
.geo-toast-close{
  width:22px;height:22px;border-radius:50%;background:var(--surface2);
  color:var(--text2);font-size:.75rem;display:flex;align-items:center;justify-content:center;
  transition:all var(--t);flex-shrink:0;
}
.geo-toast-close:hover{background:var(--surface3);color:#fff}

/* ─── 26. NO-MOTION ──────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .aurora{display:none}
}

/* ─── 27. TECH LOGOS SECTION ─────────────────── */
/* ─── Tech Stack — 3D Cards ─── */
.tech-section{padding:56px 0 60px;background:var(--bg2);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);overflow:hidden}
.tech-header{text-align:center;margin-bottom:36px}

/* Cinta de logos — una sola fila, rotación automática infinita */
.ts-marquee-wrap{
  overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ts-marquee{
  display:flex;width:max-content;
  animation:tsScroll 34s linear infinite;
}
.ts-marquee-wrap:hover .ts-marquee{animation-play-state:paused}
.ts-track{display:flex;gap:12px;flex-shrink:0;padding:2px 6px}
@keyframes tsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ts-marquee{animation:none}}

.ts-chip{
  display:flex;align-items:center;gap:10px;flex-shrink:0;white-space:nowrap;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:10px 18px 10px 10px;cursor:default;
  transition:border-color .3s,background .3s,transform .3s;
}
.ts-chip:hover{
  border-color:var(--tl-c,rgba(255,255,255,.28));
  background:rgba(255,255,255,.06);
  transform:translateY(-3px);
}
.ts-chip-ico{
  width:32px;height:32px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);
  transition:border-color .3s;
}
.ts-chip:hover .ts-chip-ico{border-color:var(--tl-c,rgba(255,255,255,.3))}
.ts-chip-ico svg,.ts-chip-ico img{height:17px;width:auto;max-width:20px}
.ts-chip-name{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.82);letter-spacing:.01em;transition:color .3s}
.ts-chip:hover .ts-chip-name{color:#fff}

@media(max-width:640px){
  .ts-chip{padding:8px 14px 8px 8px;gap:8px}
  .ts-chip-ico{width:28px;height:28px}
  .ts-chip-ico svg,.ts-chip-ico img{height:15px;max-width:17px}
  .ts-chip-name{font-size:.72rem}
  .ts-marquee{animation-duration:24s}
}

/* ─── 28. SKIP NAV ───────────────────────────── */
.skip-nav{
  position:absolute;top:-100%;left:16px;z-index:9999;
  padding:8px 20px;background:var(--blue);color:#fff;border-radius:0 0 8px 8px;
  font-weight:700;font-size:.85rem;transition:top .2s;
}
.skip-nav:focus{top:0}

/* ─── 29. FAQ SECTION ────────────────────────── */
/* ─── FAQ Split ─── */
.faq-section{padding:90px 0;background:var(--bg)}
.faq-split{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:0;max-width:980px;margin:0 auto;
  border:1px solid rgba(255,255,255,.07);border-radius:24px;overflow:hidden;
}
/* Lista de preguntas — columna izquierda */
.faq-list{
  background:rgba(255,255,255,.025);
  border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;
}
.faq-qbtn{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;cursor:pointer;
  background:none;border:none;border-bottom:1px solid rgba(255,255,255,.05);
  text-align:left;transition:background .2s;
  width:100%;
}
.faq-qbtn:last-child{border-bottom:none}
.faq-qbtn:hover{background:rgba(255,255,255,.04)}
.faq-qbtn.active{background:rgba(37,99,235,.1);border-left:3px solid var(--blue)}
.faq-qnum{
  font-size:.65rem;font-weight:900;color:rgba(255,255,255,.2);
  letter-spacing:.08em;flex-shrink:0;font-family:var(--font-heading);
  transition:color .2s;
}
.faq-qbtn.active .faq-qnum{color:var(--blue)}
.faq-qtxt{
  font-size:.82rem;font-weight:600;color:rgba(255,255,255,.55);
  line-height:1.35;flex:1;transition:color .2s;
}
.faq-qbtn.active .faq-qtxt{color:#fff;font-weight:700}
.faq-qarrow{
  width:16px;height:16px;flex-shrink:0;color:rgba(255,255,255,.18);
  transition:color .2s,transform .2s;
}
.faq-qbtn.active .faq-qarrow{color:var(--blue);transform:translateX(3px)}
/* Panel de respuestas — columna derecha */
.faq-answer-area{
  position:relative;min-height:420px;background:rgba(255,255,255,.012);
}
.faq-panel{
  position:absolute;inset:0;padding:36px 32px;
  opacity:0;pointer-events:none;
  transform:translateY(12px);
  transition:opacity .32s,transform .32s;
  display:flex;flex-direction:column;
}
.faq-panel.active{
  position:relative;opacity:1;pointer-events:auto;transform:none;
}
.faq-panel-icon{
  width:44px;height:44px;border-radius:13px;
  background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.25);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-shrink:0;
}
.faq-panel-icon svg{width:22px;height:22px;color:#6da4ff}
.faq-panel-q{
  font-size:1.1rem;font-weight:800;color:#fff;
  line-height:1.3;margin-bottom:16px;letter-spacing:-.02em;
}
.faq-panel-a{
  font-size:.87rem;color:rgba(255,255,255,.58);line-height:1.75;flex:1;
}
.faq-panel-a strong{color:rgba(255,255,255,.85);font-weight:700}
.faq-panel-cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:24px;font-size:.8rem;font-weight:700;
  color:var(--blue-l);transition:gap .2s;align-self:flex-start;
}
.faq-panel-cta:hover{gap:10px}
@media(max-width:768px){
  .faq-split{grid-template-columns:1fr;border-radius:18px}
  .faq-list{border-right:none;border-bottom:1px solid rgba(255,255,255,.07)}
  .faq-answer-area{min-height:auto}
  .faq-panel{position:relative;inset:auto;padding:26px 22px}
  .faq-panel:not(.active){display:none}
}

/* ─── 30. CTA SECTION ────────────────────────── */
.cta-section{
  padding:100px 0;
  background:linear-gradient(135deg,rgba(37,99,235,.12) 0%,rgba(124,58,237,.08) 100%);
  border-top:1px solid rgba(37,99,235,.15);
  text-align:center;
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(37,99,235,.15),transparent 70%);
  pointer-events:none;
}
.cta-content{position:relative;z-index:1}
.cta-h2{font-size:clamp(1.8rem,4vw,3rem);color:#fff;margin-bottom:16px}
.cta-sub{font-size:1rem;color:var(--text2);margin-bottom:36px;max-width:540px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.rating-block{display:flex;flex-direction:column;align-items:center;gap:4px}
.rating-source{font-size:.75rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.08em}
.rating-stars{color:#f59e0b;font-size:1.1rem}
.rating-score{font-size:1.4rem;font-weight:800;color:#fff}
.rating-divider{width:1px;height:60px;background:var(--border)}

/* ─── SPACE ANIMATION (firma del old site) ──────────────────── */
.stars-bg{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.stars-bg::before,.stars-bg::after{
  content:'';position:absolute;
  background:transparent;
  border-radius:50%;
}
@keyframes starsAnim{
  0%{transform:translateY(0)}
  100%{transform:translateY(-2000px)}
}
.star-particle{
  position:absolute;border-radius:50%;background:#fff;
  animation:starFloat linear infinite;
  opacity:0;
}
@keyframes starFloat{
  0%{opacity:0;transform:translateY(0)}
  10%{opacity:1}
  90%{opacity:.8}
  100%{opacity:0;transform:translateY(-100vh)}
}

/* ─── AGENCIA PAGE ───────────────────────────────────────────── */
.agencia-hero{
  padding:140px 0 80px;text-align:center;
  background:linear-gradient(160deg,rgba(37,99,235,.12),rgba(124,58,237,.08));
  border-bottom:1px solid var(--border);
}
.agencia-hero h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:16px}
.agencia-hero p{font-size:1.05rem;color:var(--text2);max-width:640px;margin:0 auto 32px}

.portfolio-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;
}
.portfolio-card{
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  transition:all var(--t);position:relative;
}
.portfolio-card:hover{transform:translateY(-6px);border-color:rgba(37,99,235,.3);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.portfolio-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.portfolio-card-info{padding:16px}
.portfolio-card-info h3{font-size:.9rem;font-weight:700;color:#fff;margin-bottom:4px}
.portfolio-card-info p{font-size:.78rem;color:var(--text2)}
@media(max-width:768px){.portfolio-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.portfolio-grid{grid-template-columns:1fr}}

.agencia-services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;
}
.agencia-service-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;transition:all var(--t);
}
.agencia-service-card:hover{background:var(--surface2);border-color:rgba(37,99,235,.3);transform:translateY(-3px)}
.agencia-service-icon{font-size:2rem;margin-bottom:12px;display:block}
.agencia-service-card h3{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:8px}
.agencia-service-card p{font-size:.82rem;color:var(--text2);line-height:1.6}
@media(max-width:768px){.agencia-services-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.agencia-services-grid{grid-template-columns:1fr}}

/* ─── NOSOTROS PAGE ──────────────────────────────────────────── */
.nosotros-hero{padding:140px 0 80px;text-align:center}
.nosotros-hero h1{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.15;margin-bottom:20px;max-width:700px;margin-left:auto;margin-right:auto}
.nosotros-hero p{color:var(--text2);font-size:1rem;line-height:1.7;max-width:640px;margin:0 auto}
.nosotros-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.nosotros-section{padding:100px 0}
.nosotros-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.nosotros-content h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:20px}
.nosotros-content p{color:var(--text2);line-height:1.8;font-size:.95rem}
.nosotros-text h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:20px}
.nosotros-text p{color:var(--text2);line-height:1.8;margin-bottom:16px;font-size:.95rem}
.nosotros-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.ns-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 20px;text-align:center}
.ns-stat-num{font-family:var(--font-heading);font-size:2.4rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.ns-stat-label{font-size:.78rem;color:var(--text2);margin-top:6px;display:block}
.nosotros-servicios-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px}
.nosotros-service-item{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px;text-decoration:none;transition:all var(--t)}
.nosotros-service-item:hover{background:var(--surface2);border-color:rgba(37,99,235,.3);transform:translateY(-2px)}
.ns-svc-icon{font-size:1.6rem;flex-shrink:0}
.nosotros-service-item strong{display:block;color:#fff;font-size:.9rem;font-weight:700;margin-bottom:4px}
.nosotros-service-item span{display:block;color:var(--text2);font-size:.78rem;line-height:1.5}
.feature-chip{background:var(--surface);border:1px solid var(--border);border-radius:40px;padding:10px 20px;font-size:.88rem;color:var(--text2);transition:all var(--t)}
.feature-chip:hover{border-color:rgba(37,99,235,.4);color:#fff}
@media(max-width:900px){.nosotros-stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.nosotros-grid{grid-template-columns:1fr}.nosotros-stats{grid-template-columns:1fr 1fr}.nosotros-servicios-grid{grid-template-columns:1fr}}

/* ─── BILINGUAL CONTENT (ES/EN) ─────────────────── */
.t-en{display:none}
html[lang="en"] .t-es{display:none}
html[lang="en"] .t-en{display:revert}
/* El toggle de idioma (main.js) oculta el idioma inactivo con el atributo
   hidden. Si un elemento .t-es/.t-en también tiene una clase propia de la
   página con su propio display (ej. botones .xx-plan-btn), esa regla puede
   ganarle a [hidden] por orden de cascada y el texto oculto queda visible.
   Esta regla lo garantiza siempre, sin importar qué otras clases tenga. */
[hidden]{display:none!important}

/* ─── UTILITY: SECTION PAD & TEXT ALIGN ─────────── */
.section-pad{padding:80px 0}
.text-center{text-align:center}
@media(max-width:768px){.section-pad{padding:56px 0}}
@media(max-width:480px){.section-pad{padding:40px 0}}

/* ─── TRUST BAR (domain services pages) ─────────── */
.trust-bar{
  background:var(--bg2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:0;
}
.trust-bar .container{padding-top:0;padding-bottom:0}
.trust-bar>div>div{
  display:flex;flex-wrap:wrap;width:100%;
}
.trust-item{
  display:flex;align-items:center;gap:12px;
  padding:18px 24px;
  flex:1 1 160px;
  border-right:1px solid var(--border);
}
.trust-item:last-child{border-right:none}
.trust-ico{
  font-size:1.4rem;line-height:1;flex-shrink:0;
}
.trust-title{
  display:block;font-weight:700;font-size:.85rem;color:var(--text);line-height:1.3;
}
.trust-sub{
  display:block;font-size:.75rem;color:var(--text3);margin-top:2px;
}
@media(max-width:900px){
  .trust-item{flex:1 1 140px;padding:14px 16px}
}
@media(max-width:600px){
  .trust-bar>div>div{flex-direction:column}
  .trust-item{border-right:none;border-bottom:1px solid var(--border);flex:none}
  .trust-item:last-child{border-bottom:none}
}

/* ─── 31. BLOG POST (artículos individuales) ──── */
.bp-breadcrumb{padding:18px 0;font-size:.78rem;color:var(--text2)}
.bp-breadcrumb a{color:var(--text2);text-decoration:none;transition:color .2s}
.bp-breadcrumb a:hover{color:#60a5fa}
.bp-breadcrumb span{color:rgba(255,255,255,.2);margin:0 6px}
.bp-breadcrumb .current{color:rgba(255,255,255,.55)}

.bp-hero{padding:16px 0 40px}
.bp-cat{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  padding:5px 14px;border-radius:20px;margin-bottom:18px;
  background:color-mix(in srgb,var(--bc,#2563eb) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--bc,#2563eb) 35%,transparent);
  color:var(--bc,#60a5fa);
}
.bp-title{
  font-family:var(--font-heading);font-size:clamp(1.9rem,4vw,3rem);font-weight:900;
  letter-spacing:-.03em;line-height:1.14;color:#fff;margin:0 0 20px;max-width:820px;
}
.bp-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.bp-meta-av{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.15);flex-shrink:0}
.bp-meta-name{font-size:.85rem;font-weight:700;color:#fff;line-height:1.3}
.bp-meta-role{font-size:.7rem;color:var(--text2);display:block}
.bp-meta-sep{color:rgba(255,255,255,.18)}
.bp-meta-info{font-size:.78rem;color:var(--text2)}
.bp-cover{width:100%;border-radius:20px;overflow:hidden;aspect-ratio:16/8}
.bp-cover img{width:100%;height:100%;object-fit:cover;display:block}

.bp-layout{display:grid;grid-template-columns:1fr 260px;gap:60px;align-items:start;padding:20px 0 60px}
.bp-content{max-width:720px;color:rgba(255,255,255,.68);font-size:1rem;line-height:1.85}
.bp-content p{margin:0 0 22px}
.bp-content h2{font-family:var(--font-heading);font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin:44px 0 16px;scroll-margin-top:100px}
.bp-content h3{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:#fff;margin:32px 0 12px}
.bp-content ul,.bp-content ol{margin:0 0 22px;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.bp-content li{padding-left:4px}
.bp-content li::marker{color:var(--bc,#60a5fa);font-weight:700}
.bp-content strong{color:#fff;font-weight:700}
.bp-content a{color:#60a5fa;text-decoration:underline;text-decoration-color:rgba(96,165,250,.35);text-underline-offset:3px}
.bp-content a:hover{text-decoration-color:#60a5fa}
.bp-quote{
  border-left:3px solid var(--bc,#2563eb);padding:4px 0 4px 22px;margin:32px 0;
  font-size:1.1rem;font-weight:600;color:#fff;font-style:italic;line-height:1.6;
}
.bp-tip{
  background:color-mix(in srgb,var(--bc,#2563eb) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--bc,#2563eb) 24%,transparent);
  border-radius:14px;padding:20px 22px;margin:28px 0;display:flex;gap:14px;
}
.bp-tip-ico{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bc,#2563eb) 18%,transparent);color:var(--bc,#60a5fa)}
.bp-tip-ico svg{width:16px;height:16px}
.bp-tip-body{font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.65}
.bp-tip-body strong{display:block;color:#fff;margin-bottom:4px;font-size:.9rem}
.bp-table-wrap{overflow-x:auto;margin:28px 0;border-radius:12px;border:1px solid var(--border)}
.bp-table{width:100%;border-collapse:collapse;font-size:.85rem}
.bp-table th{background:rgba(255,255,255,.04);color:#fff;font-weight:700;text-align:left;padding:12px 16px;white-space:nowrap}
.bp-table td{padding:12px 16px;color:rgba(255,255,255,.6);border-top:1px solid var(--border)}

.bp-share{display:flex;align-items:center;gap:10px;padding-top:32px;margin-top:8px;border-top:1px solid var(--border)}
.bp-share-label{font-size:.72rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}
.bp-share-btn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text2);transition:all .2s}
.bp-share-btn:hover{background:var(--bc,#2563eb);color:#fff;border-color:var(--bc,#2563eb)}

.bp-author-box{
  display:flex;gap:16px;align-items:center;margin-top:36px;padding:22px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
}
.bp-author-box img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid rgba(255,255,255,.15)}
.bp-author-box-name{font-weight:700;color:#fff;font-size:.92rem;margin-bottom:4px}
.bp-author-box-bio{font-size:.8rem;color:var(--text2);line-height:1.5}

/* Sidebar */
.bp-sidebar{display:flex;flex-direction:column;gap:24px;position:sticky;top:100px}
.bp-side-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px}
.bp-side-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text2);margin-bottom:16px}
.bp-toc{display:flex;flex-direction:column;gap:10px}
.bp-toc a{font-size:.82rem;color:rgba(255,255,255,.55);text-decoration:none;line-height:1.4;transition:color .2s}
.bp-toc a:hover{color:#60a5fa}
.bp-cta-side{
  background:linear-gradient(155deg,color-mix(in srgb,var(--bc,#2563eb) 18%,transparent),transparent);
  border:1px solid color-mix(in srgb,var(--bc,#2563eb) 30%,transparent);
  border-radius:16px;padding:24px 22px;text-align:center;
}
.bp-cta-side strong{display:block;color:#fff;font-size:.95rem;margin-bottom:8px}
.bp-cta-side p{font-size:.78rem;color:var(--text2);margin:0 0 16px;line-height:1.5}
.bp-cta-side a{
  display:block;text-align:center;padding:11px;border-radius:10px;
  background:var(--bc,#2563eb);color:#fff;font-weight:700;font-size:.85rem;text-decoration:none;
  transition:filter .2s;
}
.bp-cta-side a:hover{filter:brightness(1.1)}

/* Related */
.bp-related-section{padding:20px 0 90px;border-top:1px solid var(--border)}
.bp-related-title{font-family:var(--font-heading);font-size:1.5rem;font-weight:800;color:#fff;margin:40px 0 26px}
.bp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bp-related-grid .blog-card{width:100%}

/* Blog listing (blog/index.html) */
.blog-listing-hero{padding:60px 0 20px;text-align:center}
.blog-listing-h1{font-family:var(--font-heading);font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#fff;letter-spacing:-.03em;margin:0 0 14px}
.blog-listing-sub{font-size:.95rem;color:var(--text2);max-width:560px;margin:0 auto;line-height:1.7}
.blog-listing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;max-width:1200px;margin:0 auto;padding:40px 0 90px}
.blog-listing-grid .blog-card{width:100%}
@media(max-width:640px){.blog-listing-grid{grid-template-columns:1fr}}

@media(max-width:1000px){
  .bp-layout{grid-template-columns:1fr}
  .bp-sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .bp-side-card{flex:1 1 260px}
}
@media(max-width:640px){
  .bp-title{font-size:1.7rem}
  .bp-related-grid{grid-template-columns:1fr}
  .bp-sidebar{flex-direction:column}
}
@media(max-width:580px){.nosotros-stats-grid{grid-template-columns:1fr 1fr}}