:root{
  /* Dark theme default = Blue Futurista */
  --bg0:#0a0e2a;
  --bg1:#0f1538;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --border: rgba(0,212,255,.22);
  --text:#ffffff;
  --muted: rgba(160,168,214,.92);

  --primary:#0066ff;
  --secondary:#00ffff;
  --accent:#00d4ff;
  --silver:#c9d4ff;

  --shadow: 0 18px 60px rgba(0,102,255,.20);
  --radius: 18px;
  --topbar-h: 68px;
}

:root[data-theme="light"]{
  /* Light theme = White/clean, still futuristic */
  --bg0:#f5f8ff;
  --bg1:#ffffff;
  --panel: rgba(11,16,32,.04);
  --panel2: rgba(11,16,32,.06);
  --border: rgba(0,212,255,.24);
  --text:#0b1020;
  --muted: rgba(11,16,32,.65);

  --primary:#0066ff;
  --secondary:#00d4ff;
  --accent:#00bfe6;
  --silver:#335dff;

  --shadow: 0 18px 60px rgba(0,102,255,.14);
}

/* ===== Rest of UI ===== */

/* ===== Scrollbar (desktop) ===== */
@media (hover:hover) and (pointer:fine){
  :root{
    scrollbar-width: thin;
    scrollbar-color: rgba(0,212,255,.32) transparent;
  }
  :root[data-theme="light"]{
    scrollbar-color: rgba(0,102,255,.28) transparent;
  }
  /* WebKit */
  ::-webkit-scrollbar{width: 8px; height:8px}
  ::-webkit-scrollbar-track{background: transparent}

  ::-webkit-scrollbar-thumb{
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    background: linear-gradient(180deg, rgba(0,212,255,.44), rgba(0,102,255,.24));
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08) inset,
      0 0 14px rgba(0,212,255,.16);
  }
  ::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(180deg, rgba(0,212,255,.62), rgba(0,102,255,.30));
    box-shadow:
      0 0 0 1px rgba(255,255,255,.10) inset,
      0 0 18px rgba(0,212,255,.22);
  }

  :root[data-theme="light"] ::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(0,102,255,.34), rgba(0,212,255,.18));
    box-shadow:
      0 0 0 1px rgba(11,16,32,.10) inset,
      0 0 14px rgba(0,102,255,.14);
  }
  :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(180deg, rgba(0,102,255,.46), rgba(0,212,255,.22));
    box-shadow:
      0 0 0 1px rgba(11,16,32,.12) inset,
      0 0 18px rgba(0,102,255,.18);
  }
  ::-webkit-scrollbar-corner{background: transparent}
}


*{box-sizing:border-box}

/* Always respect the HTML hidden attribute (strict auth header rules rely on this) */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: linear-gradient(135deg, var(--bg0) 0%, var(--bg1) 50%, var(--bg0) 100%);
  font-family: "Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}
/* ===== Background FX (CSS only) =====
   Inspired by a "UCL ball" neon feel: deep blue/purple + glowing arcs. */
/* Stadium / Champions-league style lighting (CSS only)
   No logos, just luxury light beams + haze.
   Very transparent so it won't bother readability. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background:
    /* ambient haze */
    radial-gradient(1000px 700px at 50% 30%, rgba(90,120,255,.10), transparent 70%),
    radial-gradient(900px 640px at 50% 85%, rgba(0,212,255,.06), transparent 72%),

    /* subtle vignette */
    radial-gradient(1400px 1000px at 50% 50%, rgba(0,0,0,.20), transparent 72%),

    /* faint texture */
    radial-gradient(circle at 0 0, rgba(255,255,255,.02) 0 2px, transparent 2px 22px);

  opacity: .60;
  mix-blend-mode: screen;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background:
    /* Left floodlight beams */
    linear-gradient(115deg,
      transparent 0 22%,
      rgba(180,220,255,.08) 22% 24%,
      transparent 24% 30%,
      rgba(0,212,255,.07) 30% 32%,
      transparent 32% 38%,
      rgba(180,220,255,.06) 38% 40%,
      transparent 40% 100%),

    /* Right floodlight beams */
    linear-gradient(245deg,
      transparent 0 26%,
      rgba(180,220,255,.07) 26% 28%,
      transparent 28% 34%,
      rgba(0,212,255,.06) 34% 36%,
      transparent 36% 43%,
      rgba(180,220,255,.05) 43% 45%,
      transparent 45% 100%),

    /* glow sources (like stadium lamps) */
    radial-gradient(420px 220px at 8% 18%, rgba(235,246,255,.18), transparent 62%),
    radial-gradient(520px 260px at 92% 16%, rgba(235,246,255,.16), transparent 64%),

    /* thin horizon glow */
    linear-gradient(180deg, rgba(0,0,0,0) 0 58%, rgba(0,212,255,.05) 62%, rgba(0,0,0,0) 70%);

  opacity: .42;
  filter: blur(.25px) saturate(1.05);
  mix-blend-mode: screen;
}

:root[data-theme="light"] body::before{
  opacity:.22;
  mix-blend-mode: multiply;
}
:root[data-theme="light"] body::after{
  opacity:.14;
  mix-blend-mode: multiply;
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.top{
  position:sticky; top:0; z-index:20;
  height: var(--topbar-h);
  border-bottom:1px solid var(--border);
  background: rgba(6,11,22,.62);
  backdrop-filter: blur(14px);
}

/* Topbar should always use full viewport width (not the 1180px container cap) */
.top .container{max-width:none;}
:root[data-theme="light"] .top{background: rgba(244,247,255,.72)}
.top__inner{height:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; min-width:0; width:100%;}

/* Give the logo + menu a bit of breathing room from screen edges */
.top__inner{padding-left: 5px; padding-right: 5px;}

.brand{display:flex; align-items:center; gap:12px; flex: 1 1 auto; min-width:0;}
.brand__link{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.brand__link:hover{text-decoration:none; opacity:.95}
.brand__mark{
  /* Moebius ribbon (CSS-only) */
  width: 30px;
  height: 18px;
  position: relative;
  flex: 0 0 auto;
  filter: drop-shadow(0 14px 22px rgba(0,212,255,.18));
}
.brand__mark::before,
.brand__mark::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 999px;
  border: 2px solid rgba(0,212,255,.85);
  box-shadow: 0 0 22px rgba(0,212,255,.18);
}
.brand__mark::before{
  transform: rotate(18deg);
  border-left-color: rgba(74,125,255,.75);
  border-bottom-color: rgba(74,125,255,.35);
}
.brand__mark::after{
  transform: rotate(-18deg);
  border-right-color: rgba(74,125,255,.75);
  border-top-color: rgba(74,125,255,.35);
  mix-blend-mode: screen;
}

.brand__logo{
  height: calc(var(--topbar-h) - 16px);
  max-height: 46px;
  width: auto;
  border-radius: 10px;
  filter:
    drop-shadow(0 18px 34px rgba(0,212,255,.18))
    drop-shadow(0 0 22px rgba(74,125,255,.10));
}
.brand__link{position:relative}
.brand__link::after{
  content:"";
  position:absolute;
  inset:-10px -12px;
  background: radial-gradient(closest-side, rgba(0,212,255,.18), transparent 70%);
  filter: blur(6px);
  opacity:.9;
  z-index:-1;
}
@media (max-width: 520px){
  .brand__logo{height: calc(var(--topbar-h) - 24px); max-height: 36px}
  .brand__mark{width:28px; height:16px}
}
.brand__name{display:none}

.nav{display:flex; align-items:center; gap:10px; justify-content:flex-end; flex-wrap:nowrap; flex: 0 0 auto;}

/* Top links (PC only) */
.topLinks{display:none; align-items:center; gap:10px; justify-self:center; padding:6px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); box-shadow: 0 10px 30px rgba(0,0,0,.22)}
.topLinks__a{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:1000;
  font-size: .92rem;
  line-height: 1;
  color: color-mix(in srgb, var(--text) 92%, transparent);
  text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.topLinks__a:hover{
  transform: translateY(-1px);
  border-color: rgba(0,212,255,.30);
  box-shadow: 0 14px 38px rgba(74,125,255,.18), 0 0 0 1px rgba(0,212,255,.10) inset;
  text-decoration:none;
}
.topLinks__a.is-active{
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(135deg, rgba(0,212,255,.12), rgba(74,125,255,.10));
  box-shadow: 0 16px 44px rgba(0,212,255,.10), 0 0 0 1px rgba(0,212,255,.14) inset;
}
.topLinks__ico{opacity:.92; font-size: 1.02em; filter: drop-shadow(0 10px 22px rgba(0,212,255,.10));}

@media (min-width: 921px){
  /* 3-column header: brand | center links | actions */
  .top__inner{display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:12px}
  .brand{justify-self:start}
  .topLinks{display:inline-flex}
  .nav{justify-self:end}
}
@media (min-width: 921px) and (max-width: 1120px){
  .topLinks{gap:8px}
  .topLinks__a{padding:7px 9px; font-size:.9rem}
}
@media (max-width: 920px){
  .topLinks{display:none !important}
}

/* Mobile/topbar optimization: keep header in ONE line (no wrap). Put secondary actions in drawer. */
@media (max-width: 720px){
  :root{ --topbar-h: 60px; }
  .top__inner{padding:10px 0}
  .brand{min-width:0}
  .brand__name{font-size:1.05rem; max-width: 52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .nav{gap:8px; min-width:0}
  .nav .btn{padding:9px 12px; font-size:.92rem; white-space:nowrap}

  /* Mobile: hide auth buttons in the topbar (keep only the menu icon).
     Login/Registro live inside the drawer. */
  #hdrLogin, #hdrRegister, #hdrAccount, #hdrLogout{display:none !important}

  /* Keep dropdown compact on mobile too */
  .drawer{
    top: calc(var(--topbar-h) + 8px);
    right: max(10px, env(safe-area-inset-right));
    width: min(360px, calc(100vw - 20px));
    max-height: min(82dvh, calc(100dvh - var(--topbar-h) - 16px));
    padding:12px;
  }
}

@media (max-width: 420px){
  .brand__name{font-size:1rem}
  .nav .btn{padding:8px 10px; font-size:.9rem}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color:var(--text);
  font-weight:900;
  letter-spacing:.2px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.btn:hover{box-shadow: 0 14px 38px rgba(74,125,255,.18), 0 0 0 1px rgba(0,212,255,.10) inset}
.btn:hover{transform: translateY(-1px); border-color: rgba(0,212,255,.35); text-decoration:none}
.btn:active{transform: translateY(0)}

.btn--primary{
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 70%, var(--accent) 30%),
    color-mix(in srgb, var(--accent) 85%, transparent)
  );
  color: #061021;
  box-shadow: 0 16px 54px rgba(93,138,255,.22), 0 0 34px rgba(0,212,255,.12);
}
.btn--primary:hover{box-shadow: 0 18px 60px rgba(93,138,255,.28), 0 0 40px rgba(0,212,255,.16)}

.btn--ghost{background: rgba(255,255,255,.03);}
.btn--outline{border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent);}
.btn--outline:hover{border-color: rgba(0,212,255,.55); background: rgba(0,212,255,.10);}

.btn--shine{position:relative; overflow:hidden;}
.btn--shine::after{
  content:"";
  position:absolute;
  inset:-2px;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: transform .6s ease;
}
.btn--shine:hover::after{transform: translateX(130%) skewX(-18deg);}

.iconbtn{
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: var(--panel);
  color:var(--text);
  display:grid; place-items:center;
}

.drawer{
  position:fixed;
  /* anchored under topbar, aligned to the menu button on the right */
  top: calc(var(--topbar-h) + 10px);
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  width: min(420px, calc(100vw - 24px));
  max-width: 92vw;
  background: rgba(8,14,30,.92);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateY(-10px) scale(.98);
  opacity: 0;
  pointer-events:none;
  transition: transform .18s ease, opacity .16s ease;
  will-change: transform, opacity;
  z-index:30;
  padding:14px;
  border-radius: 18px;
  max-height: min(78dvh, calc(100dvh - var(--topbar-h) - 24px));
  overflow:auto;
}
:root[data-theme="light"] .drawer{background: rgba(255,255,255,.92)}
.drawer.is-open{transform: translateY(0) scale(1); opacity:1; pointer-events:auto}
.drawer__head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 0 12px; position:sticky; top:0; background: transparent}
.drawer__headActions{display:flex; align-items:center; gap:10px}
.drawer__title{font-family:"Orbitron"; font-weight:1000; letter-spacing:.6px; font-size:1.15rem}
.drawer__item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  padding:16px 14px;
  border-radius:18px;
  border:1px solid transparent;
  font-weight:1000;
  margin-bottom:10px;
  color:inherit;
  background: rgba(255,255,255,.04);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  font: inherit;
}
.drawer__icon{width:26px; display:inline-flex; align-items:center; justify-content:center; opacity:.9}
.drawer__item:hover{border-color: rgba(0,212,255,.25); background: rgba(0,212,255,.06); text-decoration:none}
.drawer__item.is-active{border-color: rgba(0,212,255,.40); background: rgba(0,212,255,.10)}
.drawer__item:disabled{opacity:.6; cursor:not-allowed}
.drawer__foot{margin-top:10px; border-top:1px solid var(--border); padding-top:10px; color:var(--muted); font-size:.92rem}

.backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index:25;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.backdrop.is-open{opacity:1; pointer-events:auto}

/* Hero */
.hero{width:min(1180px, 92vw); margin:18px auto 0;}
.hero__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:14px; align-items:stretch}
@media (max-width: 900px){.hero__grid{grid-template-columns:1fr}}

.hero__card{
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow:hidden;
}
:root[data-theme="light"] .hero__card{background: rgba(11,16,32,.03)}

.hero__copy{padding:18px}
.hero__kicker{display:inline-flex; gap:8px; align-items:center; font-weight:900; color:rgba(234,243,255,.84)}
:root[data-theme="light"] .hero__kicker{color:rgba(11,16,32,.80)}
.hero__kdot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--secondary),var(--silver));box-shadow:0 0 24px rgba(0,212,255,.25)}
.hero__h{font-family:Orbitron; font-weight:900; letter-spacing:.7px; font-size: clamp(1.25rem, 2.2vw, 2.05rem); margin:10px 0 8px}
.hero__p{color:rgba(234,243,255,.74); line-height:1.55; font-weight:700; max-width:54ch}
:root[data-theme="light"] .hero__p{color:rgba(11,16,32,.70)}
.hero__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}

@media (max-width: 520px){
  .hero{margin-top:12px}
  .hero__copy{padding:14px}
  .hero__h{font-size: 1.22rem; margin:8px 0 6px}
  .hero__p{font-size:.95rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .hero__actions{gap:8px}
  .mediaSim{min-height:160px}
}

.mediaSim{
  position:relative;
  height: 100%;
  min-height: 230px;
  border-left:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 20% 30%, rgba(0,212,255,.22), transparent 58%),
    radial-gradient(760px 420px at 80% 40%, rgba(47,123,255,.20), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
:root[data-theme="light"] .mediaSim{border-left-color:rgba(14,22,45,.10)}
.mediaSim::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 6px);
  opacity:.22;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.mediaSim::after{
  content:"";
  position:absolute; inset:-20% -30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-60%) rotate(8deg);
  animation: shimmer 4.6s ease-in-out infinite;
  opacity:.55;
}
@keyframes shimmer{0%{transform:translateX(-60%) rotate(8deg)}50%{transform:translateX(60%) rotate(8deg)}100%{transform:translateX(-60%) rotate(8deg)}}

.mediaSim__badge{
  position:absolute; left:16px; bottom:16px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(8,14,30,.62);
  backdrop-filter: blur(10px);
  font-weight:900;
  max-width: 90%;
}
:root[data-theme="light"] .mediaSim__badge{background: rgba(255,255,255,.72)}

.carousel{width:min(1180px, 92vw); margin:12px auto 0;}
.carousel__track{display:flex; gap:12px; overflow:auto; scroll-snap-type:x mandatory; padding:0; border-radius: var(--radius); scrollbar-width: none;}
.carousel__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%; scroll-snap-align:start; border:1px solid var(--border); background: rgba(255,255,255,.04); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);}
.slide img{width:100%; height: clamp(200px, 28vw, 380px); object-fit:cover; object-position:center; display:block;}
@media (max-width:520px){.slide img{height:200px;}}

/* CSS slides (no images) */
.slide--css{position:relative;}
.cssSlide{
  position:relative;
  height: clamp(190px, 28vw, 360px);
  padding: 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  background:
    radial-gradient(900px 520px at 20% 25%, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 60%),
    radial-gradient(700px 420px at 80% 30%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg0) 92%, #000 8%), color-mix(in srgb, var(--bg1) 92%, #000 8%));
}
.slide[data-css-slide="2"] .cssSlide{
  background:
    radial-gradient(900px 520px at 10% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(700px 420px at 85% 35%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg0) 90%, #000 10%), color-mix(in srgb, var(--bg1) 90%, #000 10%));
}
.slide[data-css-slide="3"] .cssSlide{
  background:
    radial-gradient(900px 520px at 20% 25%, rgba(46,204,113,.12), transparent 62%),
    radial-gradient(700px 420px at 80% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg0) 92%, #000 8%), color-mix(in srgb, var(--bg1) 92%, #000 8%));
}
.cssSlide::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
  pointer-events:none;
}
.cssSlide__badge{
  position:absolute;
  top: 14px;
  left: 14px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  font-weight:1000;
  letter-spacing:.3px;
}
.cssSlide__center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top: 8px;
}
.cssSlide__icon{
  width:56px;
  height:56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-size:30px;
  /* no border; just glow */
  background: transparent;
  box-shadow: 0 0 34px rgba(0,212,255,.12);
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
.cssSlide__word{
  font-family: Orbitron;
  font-weight:1000;
  letter-spacing:1px;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  color: rgba(235,246,255,.95);
  text-shadow: 0 14px 46px rgba(0,0,0,.50);
}
.cssSlide__title{
  font-family: Orbitron;
  font-weight:1000;
  font-size: clamp(1.25rem, 3.0vw, 2.05rem);
  letter-spacing:.7px;
  text-shadow: 0 14px 50px rgba(0,0,0,.45);
  max-width: 22ch;
}
/* removed sub lines (keep slides clean / informational) */
@media (max-width:520px){
  .cssSlide{height:190px; padding:14px}
  .cssSlide__center{gap:10px; margin-top:6px}
  .cssSlide__icon{width:52px; height:52px; font-size:28px}
  .cssSlide__word{font-size: 1.05rem}
  .cssSlide__title{font-size: 1.35rem}
}
.carousel__dots{display:flex; justify-content:center; gap:8px; margin-top:10px}
.dot{width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.14)}
.dot.is-on{background: linear-gradient(135deg, rgba(0,212,255,.8), rgba(201,212,255,.65))}

.section{padding:22px 0 10px}
.section__head{display:flex; justify-content:space-between; align-items:end; gap:10px; flex-wrap:wrap; margin: 6px 0 14px}
.section__title{font-family:Orbitron; font-weight:900; letter-spacing:.6px; font-size:1.2rem}
.section__sub{color:var(--muted); font-weight:700; font-size:.95rem}

.svc{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 900px){.svc{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 520px){.svc{grid-template-columns: 1fr}}

.svc__card{
  position:relative;
  border-radius: calc(var(--radius) + 4px);
  background: rgba(255,255,255,.04);
  border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  overflow:hidden;
  padding:20px 18px;
  box-shadow: var(--shadow);
  text-align:center;
}
:root[data-theme="light"] .svc__card{background: rgba(255,255,255,.70)}

.svc__icon{
  width:56px; height:56px;
  margin: 6px auto 10px;
  display:grid; place-items:center;
  border-radius: 18px;
  color: var(--secondary);
  font-size: 30px;
  background: radial-gradient(circle at 30% 30%, rgba(0,212,255,.18), transparent 55%),
              rgba(255,255,255,.03);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 26px rgba(0,212,255,.10);
}

.svc__name{
  font-weight:1000;
  font-family:Orbitron;
  letter-spacing:.9px;
  margin-top:6px;
  font-size: 1.05rem;
}
.svc__text{
  color: color-mix(in srgb, var(--text) 70%, transparent);
  font-weight:700;
  line-height:1.5;
  margin-top:10px;
  min-height: 44px;
}
.svc__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:14px;
  font-weight:1000;
  color: var(--accent);
  text-decoration:none;
}
.svc__cta:hover{text-decoration:underline}


.ctaRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.sitefoot{margin-top:24px; border-top:1px solid var(--border); padding:20px 0 0}
.sitefoot__grid{display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:14px}
@media (max-width: 900px){.sitefoot__grid{grid-template-columns:1fr}}
.sitefoot__brand{font-family:Orbitron; font-weight:1000; letter-spacing:.6px; font-size:1.2rem}
.sitefoot__muted{color:var(--muted); font-weight:700; margin-top:6px; line-height:1.45}
.sitefoot__h{font-weight:1000; margin-bottom:8px}
.sitefoot__a{display:block; color:var(--muted); font-weight:800; margin:6px 0}
.sitefoot__a:hover{color:var(--text); text-decoration:none}
.sitefoot__bar{margin-top:18px; padding:12px 0; color:var(--muted); text-align:center}

/* modal */
.modal{position:fixed; inset:0; z-index:60;}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55);}
.modal__panel{position:relative; width:min(520px, 92vw); margin:6vh auto 0; border:1px solid var(--border); border-radius:18px; background:rgba(8,14,30,.92); box-shadow: var(--shadow); overflow:hidden; max-height: 88vh; display:flex; flex-direction:column}
:root[data-theme="light"] .modal__panel{background:rgba(255,255,255,.92)}
.modal__head{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border); flex: 0 0 auto}
.modal__body{padding:0; overflow:auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto}
.modal__body .form{padding:14px}
.modal__title{font-family:Orbitron; font-weight:1000; display:flex; align-items:center; gap:10px}
.modalLogo{
  height: 28px;
  width: auto;
  max-width: min(320px, 64vw);
  filter:
    drop-shadow(0 18px 34px rgba(0,212,255,.18))
    drop-shadow(0 0 22px rgba(74,125,255,.10));
}
@media (max-width: 520px){
  .modalLogo{height:24px; max-width: 72vw}
}
.modal__foot{padding:12px 14px; color:var(--muted); font-weight:800; border-top:1px solid var(--border); flex: 0 0 auto}

.form{display:flex; flex-direction:column; gap:8px; padding:14px}
.form label{font-weight:900; color:var(--muted)}
.form input, .form select{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:800;
  outline:none;
}

/* Make selects look consistent (and visible) across browsers */
.form select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right: 42px;
  background-image:
    radial-gradient(16px 16px at calc(100% - 18px) 50%, rgba(0,212,255,.14), transparent 70%),
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 22px) 52%,
    calc(100% - 16px) 52%;
  background-size:
    30px 30px,
    7px 7px,
    7px 7px;
  background-repeat:no-repeat;
}
.form select:focus{
  box-shadow: 0 0 0 2px rgba(0,212,255,.16), 0 0 22px rgba(0,212,255,.10);
}
/* Placeholder option ("Elige moneda") is disabled+selected, so it can look too faint on mobile.
   Use :invalid to style the unselected state clearly. */
.form select:required:invalid{ color: var(--muted); }
.form select option{ color: #0b1020; }
:root:not([data-theme="light"]) .form select option{ color: #0b1020; }
:root[data-theme="light"] .form input, :root[data-theme="light"] .form select{background:rgba(11,16,32,.04); color:var(--text)}
:root[data-theme="light"] .form select{
  background-image:
    radial-gradient(16px 16px at calc(100% - 18px) 50%, rgba(0,102,255,.10), transparent 70%),
    linear-gradient(45deg, transparent 50%, rgba(11,16,32,.72) 50%),
    linear-gradient(135deg, rgba(11,16,32,.72) 50%, transparent 50%);
}
.form__msg{min-height:18px; font-weight:900}

/* account area */
.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.05); font-weight:1000}
:root[data-theme="light"] .pill{background:rgba(11,16,32,.04)}

.txCards{display:flex; flex-direction:column; gap:10px; min-height: 64px}
.txCards.is-loading{opacity:.65}
.txCards.is-loading::after{content:"Actualizando…"; display:block; padding:8px 0; color:var(--muted); font-weight:900}
.txCard{border:1px solid var(--border); border-radius:16px; padding:12px; background:rgba(255,255,255,.04)}
:root[data-theme="light"] .txCard{background:rgba(11,16,32,.03)}
.txRow{display:flex; justify-content:space-between; gap:10px; font-weight:900}
.txK{color:var(--muted); font-weight:900}
.txV{text-align:right}

@media (min-width: 980px){
  .txTable{width:100%; border-collapse:separate; border-spacing:0;}
  .txTable th, .txTable td{padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.10);}
  :root[data-theme="light"] .txTable th, :root[data-theme="light"] .txTable td{border-bottom-color: rgba(14,22,45,.10)}
  .txTable th{color:var(--muted); text-align:left}
  .txTable td{text-align:left}
  .txTable td.num{text-align:right}
}

.drawer__hint{
  margin:6px 2px 2px;
  color: var(--muted);
  font-size:.88rem;
  line-height:1.35;
}