:root{
  --ventaIndigo: 104 72 255;
  --ventaEmerald: 20 220 160;
  --ventaGold: 245 196 88;

  --bg0: 6 8 14;
  --bg1: 10 14 26;

  --text0: 244 246 255;
  --text1: 187 196 220;
  --text2: 150 160 186;

  --blur: 16px;

  --rSm: 12px;
  --rMd: 16px;
  --rLg: 22px;

  --shadow1: 0 12px 34px rgba(0,0,0,0.45);
  --shadow2: 0 22px 70px rgba(0,0,0,0.55);

  --max: 1120px;
  --pad: 20px;

  --fontBody: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --fontDisplay: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: var(--fontBody);
  background: rgb(var(--bg0));
  color: rgb(var(--text0));
  line-height:1.55;
  text-rendering: optimizeLegibility;
}

a{color:inherit}
img{max-width:100%;height:auto}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace}

.skipLink{
  position:absolute; left:-999px; top:10px;
  padding:10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  z-index:9999;
}
.skipLink:focus{left:10px}

/* Ambient background */
.ambient{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1100px 600px at 18% 0%, rgba(var(--ventaIndigo),0.22), transparent 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(var(--ventaEmerald),0.18), transparent 60%),
    radial-gradient(800px 520px at 50% 95%, rgba(var(--ventaGold),0.14), transparent 60%),
    linear-gradient(180deg, rgb(var(--bg0)), rgb(var(--bg1)));
}
.ambientGlow{
  position:absolute; inset:-20%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.06), transparent);
  filter: blur(26px);
  opacity:0.55;
}

.wrap{min-height:100%; display:flex; flex-direction:column}
.main{flex:1; position:relative}
.container{width:min(var(--max), calc(100% - (var(--pad) * 2))); margin:0 auto}

/* Header */
.topbar{
  position:sticky; top:0; z-index:50;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(var(--bg0),0.40);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.topbar.isScrolled{ background: rgba(var(--bg0),0.70); }

.row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding: 14px 0;
}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logoMark{position:relative; width:38px; height:38px; display:inline-block}
.logoDot{
  position:absolute; inset:0; border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.logoRing{
  position:absolute; inset:-6px; border-radius: 18px;
  background:
    radial-gradient(closest-side, rgba(var(--ventaGold),0.26), transparent 65%),
    radial-gradient(closest-side, rgba(var(--ventaEmerald),0.14), transparent 60%),
    radial-gradient(closest-side, rgba(var(--ventaIndigo),0.16), transparent 60%);
  filter: blur(10px); opacity:0.9;
}
.brandText{line-height:1.1}
.brandTitle{
  font-family: var(--fontDisplay);
  font-weight: 800;
  letter-spacing:-0.02em
}
.brandSub{font-size:12px; color: rgba(var(--text1),0.92)}

.nav{display:flex; align-items:center; gap:6px}
.nav a{
  text-decoration:none; font-size:14px;
  color: rgba(var(--text1),0.92);
  padding: 8px 10px; border-radius: 999px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  border: 1px solid transparent;
}
.nav a:hover{ color: rgb(var(--text0)); background: rgba(255,255,255,0.06); }
.nav a[data-active="true"]{
  color: rgb(var(--text0));
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

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

.navToggle{
  display:none;
  width:42px; height:42px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgb(var(--text0));
}
.navBars{display:block; width:18px; height:12px; margin: 0 auto; position:relative}
.navBars::before,.navBars::after{
  content:""; position:absolute; left:0; right:0;
  height:2px; border-radius: 2px;
  background: rgba(255,255,255,0.85);
}
.navBars::before{top:1px}
.navBars::after{bottom:1px}

/* Mobile nav */
.navMobile{
  padding: 10px 0 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display:none;
  flex-direction:column;
  gap:6px;
}
.navMobile.isOpen{ display:flex; }
.navMobile[hidden]{ display:none !important; }

.navMobile a{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(var(--text1),0.92);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.navMobile a:hover{color: rgb(var(--text0)); background: rgba(255,255,255,0.06)}
.navMobileCtas{display:flex; gap:10px; flex-wrap:wrap; padding-top:10px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 10px 14px; border-radius: 14px;
  text-decoration:none; font-weight: 800; font-size: 14px;
  border: 1px solid rgba(var(--ventaEmerald),0.25);
  background: rgba(var(--ventaEmerald),0.92);
  color: rgb(var(--bg0));
  box-shadow: var(--shadow1);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover{filter: brightness(1.03); box-shadow: 0 18px 54px rgba(0,0,0,0.55);}
.btn:active{transform: translateY(1px)}
.btnGhost{
  background: rgba(255,255,255,0.055);
  color: rgb(var(--text0));
  border-color: rgba(255,255,255,0.14);
  box-shadow:none;
}

/* Sections */
.section{padding: 56px 0}
.hero{padding: 46px 0 14px}
.heroTint{
  position:absolute; inset:0 0 auto 0; height: 280px;
  pointer-events:none; z-index:-1; opacity:0.9;
  background:
    radial-gradient(700px 320px at 12% 0%, rgba(var(--ventaIndigo),0.16), transparent 60%),
    radial-gradient(700px 320px at 88% 0%, rgba(var(--ventaEmerald),0.12), transparent 60%);
}

/* Hero card */
.heroCard{border-radius: var(--rLg); overflow:hidden; position:relative}
.strip{
  position:absolute; inset:0;
  background: linear-gradient(120deg,
      rgba(var(--ventaIndigo),0.22),
      rgba(var(--ventaGold),0.12),
      rgba(var(--ventaEmerald),0.18)
    );
  opacity:0.45;
}

/* Surfaces */
.heroInner, .panel, .card{position:relative; overflow:hidden}

/* Keep text above effects */
.heroInner > *, .panel > *, .card > *{ position: relative; z-index: 2; }
.heroInner::before, .heroInner::after,
.panel::before, .panel::after,
.card::before, .card::after{ z-index: 1; }

.heroInner{
  border-radius: var(--rLg);
  padding: 26px;
  background:
    /* cockpit grid */
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 92px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 72px),
    radial-gradient(1100px 520px at 18% 0%, rgba(var(--ventaIndigo),0.10), transparent 58%),
    radial-gradient(900px 420px at 86% 10%, rgba(var(--ventaEmerald),0.08), transparent 60%),
    rgba(255,255,255,0.050);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.60),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 40px rgba(var(--ventaIndigo),0.10);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

/* Subtle static glow */
.heroInner::after, .panel::after, .card::after{
  content:"";
  position:absolute; inset:-70% -45%;
  transform: rotate(16deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  opacity:0.12;
  pointer-events:none;
}

/* Micro-sheen (hover only) */
.heroInner::before, .panel::before, .card::before{
  content:"";
  position:absolute;
  inset:-60% -40%;
  transform: rotate(16deg) translateX(-18%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.heroInner:hover::before,
.panel:hover::before,
.card:hover::before{
  opacity: 0.85;
  animation: ventaSheen 900ms ease-out both;
}
@keyframes ventaSheen{
  from { transform: rotate(16deg) translateX(-22%); }
  to   { transform: rotate(16deg) translateX(22%); }
}

/* Pills */
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  font-size: 12px; color: rgba(var(--text1),0.96);
}

/* Typography */
.h1{
  margin: 12px 0 0;
  max-width: 22ch;
  font-family: var(--fontDisplay);
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;

  /* IMPORTANT: fallback color so it never disappears */
  color: rgba(var(--text0),0.98);
}

/* Apply gradient ONLY when supported */
@supports (-webkit-background-clip: text) or (background-clip: text){
  @media (min-width: 860px){
    .h1{
      background: linear-gradient(
        90deg,
        rgba(var(--text0),0.98),
        rgba(var(--ventaGold),0.92),
        rgba(var(--text0),0.98)
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
}

.h2{
  font-family: var(--fontDisplay);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.h2xl{
  margin: 12px 0 0;
  max-width: 28ch;
  font-family: var(--fontDisplay);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: rgba(var(--text0),0.98);
}
.sub{
  margin: 12px 0 0;
  color: rgba(var(--text1),0.92);
  font-size: 16px;
  max-width: 62ch;
}
.p{color: rgba(var(--text1),0.92); margin: 10px 0 0}
.note{color: rgba(var(--text2),0.92); font-size: 13px; line-height:1.65}
.link{text-decoration: underline; text-underline-offset: 3px}

/* Hero split layout */
.heroGrid{
  display: grid;
  gap: 18px;
  margin-top: 6px;
  align-items: start;
}
@media (min-width: 960px){
  .heroGrid{ grid-template-columns: 1.05fr 0.95fr; }
}
.heroLeft{ display:flex; flex-direction:column; gap: 10px; }
.heroLeft .sub{ max-width: 54ch; }
.heroRight{ display: grid; gap: 14px; }

.chipRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 2px;
}
.chip{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(var(--text1),0.95);
  font-size: 12px;
  font-weight: 700;
}

.ctaBar{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; }

/* Panels/Cards */
.grid{display:grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px}

.panel{
  border-radius: var(--rLg);
  padding: 16px;
  background:
    radial-gradient(1200px 420px at 10% 0%, rgba(var(--ventaIndigo),0.10), transparent 55%),
    radial-gradient(900px 380px at 90% 10%, rgba(var(--ventaEmerald),0.08), transparent 58%),
    rgba(255,255,255,0.040);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow1);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.cards{display:grid; grid-template-columns: 1fr; gap: 12px}
.card{
  border-radius: var(--rMd);
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.030));
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: var(--shadow1);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.080), rgba(255,255,255,0.040));
}
.card h3{
  margin:0;
  font-family: var(--fontDisplay);
  font-size:14px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.card p{margin:8px 0 0; color: rgba(var(--text1),0.92); font-size: 14px}

/* KPI row */
.kpiRow{display:grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px}
.kpi{
  border-radius: var(--rMd);
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.kpi .label{font-size:12px; color: rgba(var(--text1),0.90); font-weight:800}
.kpi .value{
  font-family: var(--fontDisplay);
  font-size:18px;
  font-weight:800;
  color: rgba(var(--ventaGold),0.95);
  margin-top:2px
}
.kpi .hint{font-size:12px; color: rgba(var(--text2),0.95); margin-top:2px}

/* Product bullets */
.list{ padding-left: 0; list-style: none; margin: 10px 0 0; }
.list li{
  margin: 10px 0;
  padding-left: 16px;
  position: relative;
  color: rgba(var(--text1),0.92);
}
.list li::before{
  content:"";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(var(--ventaGold),0.90);
  position: absolute;
  left: 0;
  top: 0.55em;
  box-shadow: 0 0 0 4px rgba(var(--ventaGold),0.10);
}

/* Forms */
.label{display:block; font-size:12px; font-weight:800; color: rgba(var(--text1),0.92)}
.input, textarea, select{
  width:100%;
  margin-top:6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgb(var(--text0));
  outline:none;
}
textarea{min-height:120px; resize: vertical}
.input:focus, textarea:focus, select:focus{
  border-color: rgba(var(--ventaEmerald),0.45);
  box-shadow: 0 0 0 4px rgba(var(--ventaEmerald),0.10);
}
.fieldError{ border-color: rgba(var(--ventaGold),0.55) !important; }
.errorText{margin-top:6px; color: rgba(var(--ventaGold),0.95); font-size: 12px}
.formGrid{display:grid; grid-template-columns: 1fr; gap: 12px}

/* Footer */
.footer{
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(var(--bg0),0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 36px 0 26px;
}
.footerGrid{display:grid; grid-template-columns: 1fr; gap: 18px}
.footerTitle{font-family: var(--fontDisplay); font-weight: 800; letter-spacing:-0.02em}
.footerSub{margin-top:6px; color: rgba(var(--text1),0.90); font-size: 14px; line-height:1.6}
.footerNote{margin-top:10px; color: rgba(var(--text2),0.92); font-size: 12px}
.footerCol{display:flex; flex-direction:column; gap:8px}
.footerHead{font-weight: 800; font-size: 12px; color: rgba(var(--text1),0.92); text-transform: uppercase; letter-spacing:0.08em}
.footerCol a{text-decoration:none; color: rgba(var(--text1),0.92)}
.footerCol a:hover{color: rgb(var(--text0)); text-decoration: underline; text-underline-offset: 3px}

.footerBottom{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display:flex; flex-direction:column; gap:8px; align-items:flex-start; justify-content:space-between;
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  font-size: 12px; color: rgba(var(--text1),0.92);
}
.smallLinks{font-size: 12px; color: rgba(var(--text2),0.95)}
.smallLinks .dot{opacity:0.6; padding: 0 6px}

/* Responsive */
@media (min-width: 860px){
  .grid{grid-template-columns: 1.2fr 0.8fr}
  .cards{grid-template-columns: repeat(3, 1fr)}
  .kpiRow{grid-template-columns: repeat(3, 1fr)}
  .formGrid{grid-template-columns: repeat(2, 1fr)}
  .footerGrid{grid-template-columns: 1.3fr 1fr 1fr 1fr}
  .footerBottom{flex-direction:row; align-items:center}
}
@media (max-width: 860px){
  .nav, .ctaRow{display:none}
  .navToggle{display:inline-flex}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important}
  .heroInner::before, .panel::before, .card::before{ animation:none !important; }
}