:root{
  --bg0:#ffffff;
  --bg1:#f6f7fb;
  --panel: rgba(255,255,255,0.92);
  --panel2: rgba(255,255,255,0.70);
  --stroke: rgba(30, 40, 70, 0.14);
  --stroke2: rgba(30, 40, 70, 0.08);
  --text: rgba(18, 22, 35, 0.92);
  --muted: rgba(18, 22, 35, 0.62);
  --accent: #2563eb;
  --accent2:#7c3aed;
  --shadow: 0 18px 55px rgba(2,6,23,0.14);
  --radius: 18px;
}

html[data-theme="dark"]{
  --bg0:#070a10;
  --bg1:#0b1020;
  --panel: rgba(18, 22, 35, 0.72);
  --panel2: rgba(10,14,24,0.55);
  --stroke: rgba(160,170,200,0.16);
  --stroke2: rgba(160,170,200,0.10);
  --text: rgba(235,240,255,0.92);
  --muted: rgba(235,240,255,0.65);
  --accent: #7cf7ff;
  --accent2:#a78bfa;
  --shadow: 0 18px 60px rgba(0,0,0,0.55);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1000px 600px at 10% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}
a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration: underline; }
.container{ width:min(1120px, 92vw); margin:0 auto; }

/* Topbar */
.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg0) 78%, transparent);
  border-bottom: 1px solid var(--stroke2);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.brand{ display:flex; align-items:center; }
.brand__logo{ height: 84px; width: auto; display:block; }

.nav{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.nav__link{
  font-size: 13px;
  color: color-mix(in srgb, var(--text) 76%, transparent);
  padding: 8px 10px;
  border-radius: 12px;
}
.nav__link:hover{ background: color-mix(in srgb, var(--panel2) 70%, transparent); text-decoration:none; }
.nav__link--cta{
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: color-mix(in srgb, var(--accent) 90%, var(--text));
}

.topbar__actions{ display:flex; align-items:center; gap: 10px; }

.iconToggle{
  width: 42px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  color: color-mix(in srgb, var(--text) 88%, transparent);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.iconToggle.activeLight{ color: color-mix(in srgb, var(--accent) 92%, var(--text)); }
.iconToggle.activeDark{ color: #fbbf24; }

.seg{
  display:flex;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  border-radius: 999px;
  overflow:hidden;
}
.seg__btn{
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-weight: 900;
  font-size: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.seg__btn.active{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: color-mix(in srgb, var(--accent) 92%, var(--text));
}

.menuBtn{
  display:none;
  width: 42px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  cursor:pointer;
}
.menuBtn span{
  display:block;
  height:2px;
  background: color-mix(in srgb, var(--text) 80%, transparent);
  margin: 6px 10px;
  border-radius: 99px;
}
.mobileNav{ display:none; border-top: 1px solid var(--stroke2); }
.mobileNav__inner{ padding: 10px 0 16px; display:grid; gap: 8px; }
.mobileNav__link{ padding: 10px 12px; border-radius: 12px; background: var(--panel2); border:1px solid var(--stroke2); font-size: 13px; }
.mobileNav button.mobileNav__link{ text-align:left; cursor:pointer; }
.mobileNav__link--cta{ border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: color-mix(in srgb, var(--accent) 92%, var(--text)); }

@media (max-width: 980px){
  .nav{ display:none; }
  .menuBtn{ display:block; }
  .mobileNav.show{ display:block; }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
  background: var(--panel2);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  text-decoration:none;
}
.btn:hover{ border-color: color-mix(in srgb, var(--accent) 26%, transparent); text-decoration:none; }
.btn--primary{
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent2) 14%, transparent));
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}

.iconBtn{
  width: 40px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  color: color-mix(in srgb, var(--text) 88%, transparent);
  cursor:pointer;
}
.iconBtn:hover{ border-color: color-mix(in srgb, var(--accent) 26%, transparent); }

/* Hero */
.hero{ padding: 40px 0 20px; }
.hero--compact{ padding-bottom: 8px; }
.hero__grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: center; }
@media (max-width: 980px){ .hero__grid{ grid-template-columns: 1fr; } }
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: color-mix(in srgb, var(--accent) 92%, var(--text));
  font-size: 12px;
  font-weight: 800;
}
.hero__title{ margin: 14px 0 0; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06; letter-spacing: -0.02em; }
.hero__subtitle{ margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.hero__cta{ margin-top: 16px; display:flex; gap: 10px; flex-wrap: wrap; }
.note{ margin-top: 12px; font-size: 12px; color: var(--muted); }

.hero__media{ position: relative; min-height: 250px; }
.heroGlow{
  position:absolute;
  inset: 22% 12% 18% 16%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%),
              radial-gradient(closest-side, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 65%);
  filter: blur(24px);
  z-index: 0;
}
.heroCard{
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 16px;
}
.heroCard__big{ font-size: 16px; font-weight: 900; }
.osIcons{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--stroke2); display:flex; flex-direction: column; align-items:center; gap: 12px; color: color-mix(in srgb, var(--text) 72%, transparent); }
.osIcons__title{ font-size: 12px; font-weight: 950; letter-spacing: .18em; color: var(--muted); text-align:center; }
.osIcons__row{ display:flex; justify-content:center; gap: 14px; }
.osIcons__icon{ width: 38px; height: 38px; border-radius: 14px; border: 1px solid var(--stroke2); background: var(--panel2); display:grid; place-items:center; }
.list{ margin: 12px 0 0; padding-left: 18px; color: color-mix(in srgb, var(--text) 88%, transparent); }
.list li{ margin: 8px 0; }
.list--tight li{ margin: 6px 0; }

/* Sections */
.section{ padding: 40px 0 54px; }
.section__head{ margin-bottom: 14px; }
.section__head--center{ text-align:center; }
.section__head h2{ margin:0; font-size: 26px; letter-spacing: -0.02em; }
.muted{ color: var(--muted); }

/* Carousel */
.carousel{ position: relative; }
.carousel__controls{ display:flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.carousel__track{
  display:flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 2px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  cursor: grab;
  background: transparent;
}
.carousel__track:active{ cursor: grabbing; }
.carousel__track::-webkit-scrollbar{ display:none; }

.slide{ scroll-snap-align: start; flex: 0 0 auto; }

/* Plan cards */
.plan{
  width: min(360px, 86vw);
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 65%, transparent));
  padding: 16px;
  box-shadow: 0 16px 42px rgba(2,6,23,0.10);
}
html[data-theme="dark"] .plan{ box-shadow: 0 16px 52px rgba(0,0,0,0.35); }
.plan:hover{ transform: translateY(-2px); transition: transform .18s ease; }
.plan--featured{ border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.plan{ display:flex; flex-direction: column; }
.plan__top{ display:grid; grid-template-columns: 1fr auto; align-items:start; column-gap: 14px; row-gap: 8px; }

/* Price row (used by helpdesk cards) */
.plan__priceRow{ margin-top: 12px; display:grid; grid-template-columns: 1fr auto; align-items:end; column-gap: 10px; min-height: 42px; }
.plan__priceLabel{ font-size: 12px; font-weight: 900; letter-spacing: .02em; color: var(--muted); }
.plan__headLeft{ min-height: 56px; }
.plan__name{ font-weight: 950; letter-spacing: .02em; }
.plan__tag{ margin-top: 6px; font-size: 12px; line-height: 1.25; color: var(--muted); max-width: 240px; }
.plan__price{ font-weight: 950; color: color-mix(in srgb, var(--accent) 92%, var(--text)); display:flex; align-items: baseline; gap: 4px; justify-self:end; white-space: nowrap; }
.plan__currency{ font-size: 18px; opacity: .95; }
.plan__mxn{ font-size: 22px; }
.plan__unit{ font-size: 12px; font-weight: 800; color: var(--muted); }

.plan__facts{ margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap; }
.fact{ display:flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-radius: 999px; border:1px solid var(--stroke2); background: var(--panel2); }
.fact__v{ font-weight: 950; }
.fact__k{ font-size: 12px; color: var(--muted); font-weight: 800; }
.plan__meta{ margin-top: 10px; font-size: 12px; color: var(--muted); }
.plan__foot{ margin-top: 14px; display:flex; gap: 10px; flex-wrap: wrap; }

.fineprint{ margin-top: 8px; font-size: 12px; color: var(--muted); text-align: right; }
.fineprint--left{ text-align:left; }

/* Helpdesk grid */
.hdGrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 980px){ .hdGrid{ grid-template-columns: 1fr; } }

/* Helpdesk cards should fill their grid column (override carousel plan width) */
.hdGrid{ align-items: stretch; }
.hdGrid .plan{ width: 100%; height: 100%; }

.hdCard{ position: relative; padding-top: 22px; padding-bottom: 28px; width: 100%; height: 610px; display:flex; flex-direction: column; }

.hdTopTag{
  width: fit-content;
  margin: 0 auto 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: var(--panel2);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.hdTopTag--recommended{
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 92%, var(--text));
}
.hdTopTag--offer{
  border-color: color-mix(in srgb, var(--accent2) 32%, transparent);
  background: color-mix(in srgb, var(--accent2) 14%, transparent);
  color: color-mix(in srgb, var(--accent2) 92%, var(--text));
}

.hdSpacer{ flex: 1 1 auto; min-height: 14px; }

/* Packs: add breathing room above the buttons while keeping footer pinned to bottom */
/* pack list removed (using dropdown) */

/* centered layout for helpdesk */
.hdPrice{ text-align:center; margin-top: 6px; }
.hdPrice__regular{ font-weight: 900; color: var(--muted); font-size: 13px; }
.hdPrice__main{ margin-top: 6px; display:inline-flex; align-items: baseline; gap: 6px; justify-content:center; }
.hdPrice__currency{ font-size: 18px; opacity: .95; font-weight: 950; }
.hdPrice__amount{ font-size: 40px; line-height: 1; font-weight: 950; letter-spacing: -0.03em; color: color-mix(in srgb, var(--accent) 92%, var(--text)); }
.hdPrice__month{ font-size: 12px; font-weight: 950; letter-spacing: .02em; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.hdCard--premium .hdPrice__amount{ color: color-mix(in srgb, var(--accent2) 92%, var(--text)); }
.hdPrice__unit{ margin-top: 6px; font-size: 12px; font-weight: 900; color: var(--muted); letter-spacing: .02em; }

.hdTitle{ margin-top: 14px; text-align:center; font-weight: 950; letter-spacing: .02em; font-size: 16px; }
.hdKicker{ margin-top: 6px; min-height: 16px; text-align:center; font-size: 12px; font-weight: 950; color: color-mix(in srgb, var(--accent) 90%, var(--text)); transition: opacity .18s ease, transform .18s ease; }
.hdKicker--top{ margin-top: 2px; }
.hdKicker.isHidden{ opacity: 0; transform: translateY(-4px); visibility: hidden; }
.hdBadge{ margin: 10px auto 0; width: fit-content; padding: 6px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent); background: color-mix(in srgb, var(--accent2) 14%, transparent); font-size: 12px; font-weight: 950; }

.hdDesc{ margin-top: 10px; text-align:center; font-size: 13px; line-height: 1.55; color: var(--muted);
  display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow:hidden;
}

.plan__foot--center{ margin-top: auto; display:flex; justify-content:center; }

/* Packs dropdown */
.hdSelect{ margin-top: 16px; text-align:center; }
.hdSelect__label{ display:block; font-size: 12px; font-weight: 950; color: var(--muted); margin: 0 0 10px; letter-spacing: .02em; text-align:center; }

.hdSelect__row{ display:flex; align-items:center; justify-content:center; gap: 10px; }

.hdSelect__control{
  width: 50%;
  max-width: 220px;
  min-width: 160px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  padding: 12px 12px;
  height: 44px;
  font-weight: 950;
  font-size: 14px;
  outline: none;
  text-align: center;
  text-align-last: center;
}
.hdSelect__control option{ text-align:center; }
.hdSelect__control:focus{ border-color: color-mix(in srgb, var(--accent) 36%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }

.hdSelect__units{ font-size: 12px; font-weight: 950; color: var(--muted); letter-spacing:.02em; }

.hdSelect__hint{ margin-top: 10px; font-size: 12px; color: var(--muted); text-align:center; }
.hdSelect__asterisk{ font-weight: 950; color: color-mix(in srgb, var(--accent) 86%, var(--text)); }

/* Packs: add breathing room above the buttons while keeping footer pinned to bottom */
.hdCard--recommended .hdSelect{ margin-bottom: 20px; }

.hdCard--recommended{ border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
/* ribbon removed (using in-flow hdTopTag) */
/* pack rows removed (using dropdown) */

.hdCard--premium{
  border-color: color-mix(in srgb, var(--accent2) 38%, transparent);
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--accent2) 10%, transparent));
}
/* seal removed (using in-flow offer tag) */
.premiumMeta{ margin-top: 12px; }
.premiumPromo{ margin-top: 6px; font-weight: 950; color: color-mix(in srgb, var(--accent2) 92%, var(--text)); }

.sectionNotice{ margin-top: 14px; text-align:center; font-size: 12px; color: var(--muted); }

/* Supported OS (single container) */
.osCard{ border-radius: var(--radius); border:1px solid var(--stroke); background: var(--panel); padding: 16px; box-shadow: 0 12px 34px rgba(2,6,23,0.08); }
html[data-theme="dark"] .osCard{ box-shadow: 0 14px 44px rgba(0,0,0,0.30); }
.osCard__grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 980px){ .osCard__grid{ grid-template-columns: 1fr; } }
.osItem{ border-radius: 16px; border:1px solid var(--stroke2); background: var(--panel2); padding: 12px; display:flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.osItem__name{ font-weight: 950; }
.osItem__meta{ font-size: 12px; color: var(--muted); font-weight: 800; letter-spacing:.02em; }

/* Footer */
.footer{ padding: 22px 0 30px; border-top: 1px solid var(--stroke2); background: color-mix(in srgb, var(--bg0) 55%, transparent); }
.footer__inner{ display:flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items:center; }
.footer__left{ font-size: 13px; color: var(--muted); }
.footer__right{ display:flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.footer__right a{ color: color-mix(in srgb, var(--text) 80%, transparent); }
.footer__right a:hover{ color: color-mix(in srgb, var(--accent) 90%, var(--text)); }

/* Anchors to keep header menu */
.anchor{ height: 1px; }


/* Chat icon (replaces Contact) */
}