:root{
  --bg:#071a33;
  --bg2:#06162b;
  --ink:#eaf3ff;

  --gold1:#ffd34a;
  --gold2:#ffb300;
  --gold3:#ff8f00;

  --aqua:#2ab2ff;
  --aqua2:#7ae0ff;

  --shadow2:0 10px 26px rgba(0,0,0,.28);
  --shadow3:0 24px 70px rgba(0,0,0,.40);

  --r2:20px;
  --max:1120px;
  --container-pad:84px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; color:var(--ink); }
body{
  min-height:100vh;
  background:none;
  position:relative;
  font-family:Poppins,system-ui,sans-serif;
  overflow-x:hidden;
}

/* Background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(1200px 700px at 50% 0%, #2b66b6 0%, #0b2b57 45%, #071a33 100%);
}

/* Grain + blobs */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:-2; }
.fx--grain{
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.fx--blob{
  inset:auto;
  width:520px;
  height:520px;
  border-radius:999px;
  filter: blur(40px);
  opacity:.18;
  transform: translate3d(0,0,0);
}
.fx--blob1{
  top:-160px; left:-140px;
  background: radial-gradient(circle at 30% 30%, var(--aqua), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(255,211,74,.9), transparent 58%);
  animation: blobFloat 10s var(--ease) infinite alternate;
}
.fx--blob2{
  bottom:-220px; right:-180px;
  background: radial-gradient(circle at 35% 30%, rgba(255,211,74,.85), transparent 60%),
              radial-gradient(circle at 70% 70%, var(--aqua), transparent 58%);
  animation: blobFloat2 12s var(--ease) infinite alternate;
}

@keyframes blobFloat{
  from{ transform: translate(0,0) scale(1); }
  to{ transform: translate(60px,40px) scale(1.08); }
}
@keyframes blobFloat2{
  from{ transform: translate(0,0) scale(1); }
  to{ transform: translate(-70px,-30px) scale(1.1); }
}

/* Links/Images */
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  width:min(var(--max), calc(100% - var(--container-pad)));
  margin:0 auto;
}
.center{ display:flex; justify-content:center; }

/* Skip link */
.skipLink{
  position:absolute;
  left:-999px;
  top:12px;
  background:#000;
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  z-index:9999;
}
.skipLink:focus{ left:12px; }

/* ================= TOPBAR ================= */
.topbar{
  position:sticky;
  top:0;
  z-index:999;
  height:72px;
  display:flex;
  align-items:center;
  background: rgba(17,59,105,.55);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding-inline:6px;
}

.topbar__row{
  width:100%;
  display:flex;
  align-items:center;
  gap:18px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#eaf2ff;
  min-width:240px;
}
.brand__logo{ width:44px; height:44px; object-fit:contain; }
.brand__text{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:"Montserrat",system-ui,sans-serif;
}
.brand__name{
  font-weight:900;
  font-size:20px;
  letter-spacing:.2px;
  line-height:1;
}

/* Nav */
.nav{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:34px;
  position:relative;
}
.nav__link{
  position:relative;
  color:#eaf2ff;
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:800;
  font-size:18px;
  opacity:.95;
  padding:10px 4px;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.nav__link:hover{ opacity:1; transform: translateY(-1px); }
.nav__link.is-active{ opacity:1; }

.nav__indicator{
  position:absolute;
  height:34px;
  border-radius:999px;
  background: rgba(255,211,74,.14);
  border:1px solid rgba(255,211,74,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  transform: translateX(0);
  transition: all .22s var(--ease);
  z-index:-1;
  opacity:0;
}

/* Right */
.topbar__right{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:260px;
  justify-content:flex-end;
}

.topbar__phone{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(8px);
  transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), filter .15s var(--ease);
}
.topbar__phone:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.22);
  filter: brightness(1.03);
}
.topbar__phone:active{ transform: translateY(0px) scale(.98); }
.phone__icon{ font-size:16px; }
.phone__text{ color:#f6c23e; font-size:16px; white-space:nowrap; }

/* Hamburger */
.menuBtn{
  width:44px;
  height:44px;
  display:none;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:10px;
}
.menuBtn span{
  display:block;
  height:2px;
  width:100%;
  background: rgba(255,255,255,.9);
  margin:6px 0;
  border-radius:2px;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.menuBtn.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menuBtn.is-open span:nth-child(2){ opacity:0; }
.menuBtn.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile panel */
.navPanel{
  display:none;
  position:absolute;
  top:72px;
  left:50%;
  transform: translateX(-50%);
  width:min(520px, calc(100% - 32px));
  padding:14px;
  border-radius:16px;
  background: rgba(17,59,105,.98);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  z-index:1000;
}
.navPanel.is-open{ display:block; }
.navPanel a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:800;
}
.navPanel a:hover{ background: rgba(255,255,255,.08); }

/* ================= HERO ================= */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.10);
  min-height: calc(100dvh - 72px);
  display:flex;
  align-items:center;
}

.hero__bg{
  position:absolute;
  inset:0;
  background-image:url("../img/fondo_hero.png");
  background-size:cover;
  background-position:center;
  filter:saturate(1.15) contrast(1.02);
  transform: scale(1.02);
  will-change: transform;
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 50% 45%, rgba(255,255,255,.20), transparent 62%),
    radial-gradient(900px 520px at 50% 70%, rgba(42,178,255,.24), transparent 68%),
    linear-gradient(180deg, rgba(2,10,20,.35), rgba(7,26,51,.88) 80%);
}

.hero__shine{
  position:absolute;
  inset:-120px -80px auto -80px;
  height:380px;
  background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.25), transparent 70%);
  filter: blur(6px);
  opacity:.9;
  pointer-events:none;
}

.hero__particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
}
.hero__particles span{
  position:absolute;
  width:6px; height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 6px rgba(42,178,255,.10);
  animation: floatP 8s var(--ease) infinite;
}
.hero__particles span:nth-child(1){ left:12%; top:22%; animation-delay:0s; }
.hero__particles span:nth-child(2){ left:26%; top:60%; animation-delay:1s; }
.hero__particles span:nth-child(3){ left:46%; top:30%; animation-delay:2s; }
.hero__particles span:nth-child(4){ left:62%; top:68%; animation-delay:1.2s; }
.hero__particles span:nth-child(5){ left:78%; top:36%; animation-delay:2.6s; }
.hero__particles span:nth-child(6){ left:86%; top:58%; animation-delay:.8s; }
.hero__particles span:nth-child(7){ left:34%; top:40%; animation-delay:3.1s; }
.hero__particles span:nth-child(8){ left:56%; top:52%; animation-delay:2.1s; }

@keyframes floatP{
  0%{ transform: translateY(0) scale(1); opacity:.5; }
  50%{ transform: translateY(-18px) scale(1.2); opacity:.9; }
  100%{ transform: translateY(0) scale(1); opacity:.55; }
}

.hero__content{
  position:relative;
  padding:72px 0 120px;
  text-align:center;
}

.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  font-family: "Montserrat",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.4px;
  font-size:12px;
  color: rgba(255,255,255,.92);
  margin:0 auto 16px;
}
.hero__badgeDot{
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--gold1), var(--gold3));
  box-shadow: 0 0 0 6px rgba(255,211,74,.10);
}

.hero__title{
  margin:0;
  font-family: "Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.8px;
  line-height:1.05;
  text-transform:uppercase;
  font-size: clamp(34px, 4.1vw, 58px);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.hero__title span{ display:inline-block; margin-top:10px; font-weight:800; }
.hero__accent{ color:var(--gold1); }

.hero__meta{
  margin:18px 0 22px;
  letter-spacing:2px;
  font-size:12.5px;
  opacity:.92;
  text-shadow: 0 6px 18px rgba(0,0,0,.45);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:13px 26px;
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  border:1px solid rgba(0,0,0,.25);
  box-shadow: 0 18px 35px rgba(0,0,0,.35);
  transition: transform .15s var(--ease), filter .15s var(--ease), background .15s var(--ease);
  position:relative;
  user-select:none;
}
.btn:active{ transform: translateY(0px) scale(.98); }
.btn--gold{
  color:#0a1c34;
  background: linear-gradient(180deg, var(--gold1), var(--gold2) 55%, var(--gold3));
}
.btn--gold::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:11px;
  background: linear-gradient(180deg, rgba(255,255,255,.45), transparent 55%);
  opacity:.55;
  pointer-events:none;
}
.btn--gold:hover{ transform: translateY(-1px) scale(1.02); }

.btn--ghost{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover{ transform: translateY(-1px) scale(1.02); filter: brightness(1.08); }

.btn--wide{ min-width:260px; }

.hero__cta{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Stats */
.hero__stats{
  margin-top: 26px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.stat{
  min-width: 150px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.stat__num{
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  font-size: 28px;
  letter-spacing:.6px;
}
.stat__label{
  margin-top: 2px;
  font-size: 12.5px;
  opacity:.9;
}

/* Scroll hint */
.scrollHint{
  margin: 24px auto 0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  opacity:.9;
  font-size: 12px;
  letter-spacing:.3px;
}
.scrollHint__mouse{
  width:22px; height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  position:relative;
}
.scrollHint__mouse::after{
  content:"";
  width:4px; height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.8);
  position:absolute;
  left:50%; top:8px;
  transform: translateX(-50%);
  animation: wheel 1.2s var(--ease) infinite;
}
@keyframes wheel{
  0%{ transform: translate(-50%,0); opacity:.9; }
  60%{ transform: translate(-50%,10px); opacity:.2; }
  100%{ transform: translate(-50%,0); opacity:.9; }
}

/* Transparent sections */
.cards,.software{ background:transparent !important; }

/* ================= 3 CARDS ================= */
.cards{
  padding:0 0 44px;
  margin-top:-90px;
  position:relative;
  z-index:5;
}
.cards__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}

.glassCard{
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.20);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transform: translateY(0);
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.glassCard:hover{
  transform: translateY(-6px);
  filter: brightness(1.04);
}
.glassCard__shine{
  position:absolute;
  inset:-80px -120px auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.32), transparent 60%);
  transform: rotate(18deg);
  opacity:.55;
  pointer-events:none;
}

.glassCard__media{
  height:124px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.10);
}
.glassCard__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.06);
  transition: transform .35s var(--ease);
}
.glassCard:hover .glassCard__media img{ transform: scale(1.12); }

.glassCard__body{ padding:16px 18px 18px; }
.glassCard__title{
  margin:0 0 6px;
  text-align:center;
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.6px;
  font-size:16px;
  color: rgba(255,255,255,.92);
}
.glassCard__text{
  margin:0;
  text-align:center;
  color: rgba(255,255,255,.78);
  font-size:13px;
}
.glassCard__more{
  position:absolute;
  right:14px;
  bottom:12px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background: rgba(255,179,0,.22);
  border:1px solid rgba(255,179,0,.40);
  color:#ffde9a;
  font-weight:900;
  transition: transform .18s var(--ease);
}
.glassCard:hover .glassCard__more{ transform: translateX(2px); }

/* Titles */
.sectionTitle{ text-align:center; margin: 8px 0 18px; }
.sectionTitle h2{
  margin:0;
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size: clamp(18px, 2.1vw, 28px);
  color:#fff;
  text-shadow: 0 12px 28px rgba(0,0,0,.40);
}
.sectionTitle p{
  margin:8px 0 0;
  color: rgba(255,255,255,.90);
  font-size: 13px;
}
.sectionTitle--line{ position:relative; padding:16px 0 12px; }
.sectionTitle--line::before,
.sectionTitle--line::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.sectionTitle--line::before{ top:0; }
.sectionTitle--line::after{ bottom:0; }

/* ================= SOFTWARE ================= */
.software{ padding: 22px 0 52px; }
.software__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
  margin-top:18px;
}

.softCard{
  position:relative;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  overflow:hidden;
  min-height:305px;
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.softCard:hover{ transform: translateY(-6px); filter: brightness(1.05); }
.softCard__glow{
  position:absolute;
  inset:auto -80px -80px auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(42,178,255,.28), transparent 65%),
              radial-gradient(circle at 70% 70%, rgba(255,211,74,.20), transparent 60%);
  filter: blur(10px);
  opacity:.85;
  pointer-events:none;
}
.softCard__img{
  height:120px;
  border-bottom:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.10);
}
.softCard__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .35s var(--ease);
}
.softCard:hover .softCard__img img{ transform: scale(1.08); }

.softCard__content{ padding:12px 14px 14px; }
.softCard h3{
  margin:0 0 8px;
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  font-size: 13.5px;
  color: rgba(255,255,255,.92);
}
.softCard ul{
  margin:0;
  padding-left:16px;
  color: rgba(255,255,255,.80);
  font-size: 12.6px;
  line-height:1.45;
}
.softCard li{ margin:4px 0; }
.softCard__more{
  position:absolute;
  right:12px;
  bottom:12px;
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(255,179,0,.18);
  border:1px solid rgba(255,179,0,.35);
  color:#ffde9a;
  font-weight:900;
}

/* ================= SUPPORT ================= */
.support--pro{
  position:relative;
  padding:54px 0 40px;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1200px 520px at 20% 10%, rgba(42,178,255,.18), transparent 55%),
    radial-gradient(900px 520px at 85% 70%, rgba(255,211,74,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}
.support__bg{ position:absolute; inset:0; opacity:.85; pointer-events:none; }
.support__row{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:26px;
  align-items:center;
}
.supportPanel{
  position:relative;
  border-radius:22px;
  padding:26px 26px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow3);
  backdrop-filter: blur(12px);
  overflow:hidden;
}
.supportKicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  letter-spacing:.4px;
  color: rgba(255,255,255,.88);
  margin-bottom:10px;
}
.supportDot{
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--gold1), var(--gold3));
  box-shadow: 0 0 0 6px rgba(255,211,74,.10);
}
.support__title{
  margin:0;
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size: clamp(28px, 3.3vw, 48px);
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.support__accent{
  padding:2px 10px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,211,74,.22), rgba(255,211,74,.06));
  border:1px solid rgba(255,211,74,.25);
  color: var(--gold1);
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
}
.supportLead{
  margin:10px 0 18px;
  color: rgba(255,255,255,.90);
  line-height:1.55;
  max-width:54ch;
}
.support__icons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.supportIcon{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:190px;
}
.supportIcon__circle{
  width:48px; height:48px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:18px;
  color: rgba(10,38,74,.96);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
}
.supportIcon span{
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(255,255,255,.92);
}
.supportActions{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.supportMini{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.supportMini__badge{
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.8px;
  padding:6px 10px;
  border-radius:999px;
  color:#0a1c34;
  background: linear-gradient(180deg, var(--gold1), var(--gold2) 55%, var(--gold3));
  border:1px solid rgba(0,0,0,.25);
}
.supportMini__text{
  font-size:12.5px;
  color: rgba(255,255,255,.88);
}
.supportVisual{
  position:relative;
  height:270px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow3);
  background: rgba(0,0,0,.10);
}
.supportVisual img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.05);
  filter:saturate(1.05) contrast(1.03);
}
.supportVisual__glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 260px at 40% 20%, rgba(42,178,255,.28), transparent 60%),
    radial-gradient(520px 260px at 70% 70%, rgba(255,211,74,.18), transparent 60%),
    linear-gradient(180deg, rgba(2,10,20,.10), rgba(7,26,51,.45));
  pointer-events:none;
}
.supportVisual__cut{
  position:absolute;
  inset:-40px -120px auto auto;
  width:320px;
  height:240px;
  background: linear-gradient(135deg, rgba(255,211,74,.55), rgba(42,178,255,.10));
  transform: rotate(18deg);
  opacity:.55;
  pointer-events:none;
}
.support__divider{
  margin-top:26px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
}

/* ================= FOOTER ================= */
.footer{
  padding:14px 0;
  background: rgba(255,255,255,.04);
  border-top:1px solid rgba(255,255,255,.10);
}
.footer__row{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  color: rgba(255,255,255,.78);
  font-size:12px;
}

/* ================= MODAL ================= */
.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:2000;
  transition: opacity .18s var(--ease), visibility .18s var(--ease);
  padding:18px;
}
.modal.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
}
.modal__content{
  position:relative;
  width:min(1100px, 100%);
  max-height: calc(100dvh - 36px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  background: linear-gradient(180deg, #0b2b57, #071a33);
  padding:40px 30px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  text-align:center;

  transform: translateY(10px) scale(.98);
  opacity:0;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.modal.active .modal__content{
  transform: translateY(0) scale(1);
  opacity:1;
}
.modal__close{
  position:sticky;
  top:12px;
  margin-left:auto;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  width:38px;
  height:38px;
  border-radius:50%;
  cursor:pointer;
  font-size:18px;
  display:grid;
  place-items:center;
  z-index:3;
}
.modal__title{
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  margin: 10px 0 6px;
  letter-spacing:.6px;
}
.modal__subtitle{ margin:0 0 18px; opacity:.9; }

.catalogoGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top: 16px;
}
.catalogoCard{
  border-radius:18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.catalogoCard:hover{ transform: translateY(-6px); filter: brightness(1.06); }
.catalogoCard h3{
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.5px;
  margin: 12px 0 6px;
}
.catalogoCard p{ margin:0; opacity:.85; }

/* Floating WhatsApp */
.waFloat{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2500;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;

  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);

  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.waFloat:hover{ transform: translateY(-3px); filter: brightness(1.06); }
.waFloat__icon{
  width: 34px; height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(42,178,255,.22), rgba(255,211,74,.12));
  border: 1px solid rgba(255,255,255,.14);
}
.waFloat__text{
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.3px;
}

/* Back to top */
.toTop{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 2500;

  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  cursor: pointer;

  display: grid;
  place-items: center;

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), filter .18s var(--ease);
}
.toTop.is-show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.toTop:hover{ filter: brightness(1.08); }

/* ================= REVEAL ANIMATIONS ================= */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ transition:none; transform:none; opacity:1; }
  .fx--blob1, .fx--blob2, .hero__particles span{ animation:none !important; }
}

/* ================= RESPONSIVE ================= */
@media (max-width:1100px){
  .software__grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 980px){
  :root{ --container-pad: 54px; }
  .nav{ display:none; }
  .menuBtn{ display:inline-block; }
  .topbar__right{ min-width:auto; }
  .phone__text{ font-size:14px; }
  .brand{ min-width:auto; }
  .brand__name{ font-size:18px; }
  .cards__grid{ grid-template-columns: 1fr; }
  .support__row{ grid-template-columns: 1fr; }
  .hero__content{ padding: 48px 0 110px; }
  .cards{ margin-top: -60px; }
  .supportVisual{ height: 220px; }
  .catalogoGrid{ grid-template-columns: 1fr; }
  .modal__content{ padding:22px 16px; border-radius:18px; }
}

@media (max-width:560px){
  :root{ --container-pad: 32px; }
  .software__grid{ grid-template-columns: 1fr; }
  .hero{ min-height: 420px; }
  .cards{ margin-top: -48px; }
  .glassCard__media{ height: 140px; }
  .softCard__img{ height: 140px; }
  .waFloat__text{ display:none; } /* más limpio en móvil */
}

@media (max-width:520px){
  .phone__text{ display:none; }
  .topbar__phone{ padding:10px; gap:0; }
}