:root{
  --azul-profundo:#0a2463;
  --azul-energetico:#3e92cc;
  --verde-vibrante:#4CB944;
  --verde-fluorescente:#2ecc71;
  --naranja-energia:#FF6B35;
  --amarillo-sinergia:#FFD166;
  --magenta-dinamico:#D8315B;

  --bg:#0b0f1a;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);

  --r: 18px;
  --r2: 28px;

  --ease: cubic-bezier(.16,1,.3,1);
  --t: all .45s var(--ease);
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 20% 10%, rgba(62,146,204,.20), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(216,49,91,.16), transparent 55%),
              radial-gradient(900px 700px at 50% 85%, rgba(46,204,113,.12), transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ---------- Ambient BG ---------- */
.bg{position:fixed; inset:0; z-index:-1; pointer-events:none}
.bg__noise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.06;
}
.bg__grid{
  position:absolute; inset:-2px;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,.9), transparent 62%);
  opacity:.10;
}
.bg__blob{
  position:absolute;
  width:520px; height:520px;
  filter: blur(40px);
  border-radius: 50%;
  opacity:.30;
  transform: translate3d(0,0,0);
}
.bg__blob--a{
  left:-120px; top:120px;
  background: radial-gradient(circle at 30% 30%, rgba(255,209,102,.9), rgba(255,107,53,.55), rgba(62,146,204,.25));
  animation: floatA 12s var(--ease) infinite alternate;
}
.bg__blob--b{
  right:-160px; bottom:60px;
  background: radial-gradient(circle at 30% 30%, rgba(46,204,113,.85), rgba(216,49,91,.45), rgba(10,36,99,.35));
  animation: floatB 14s var(--ease) infinite alternate;
}
@keyframes floatA{
  from{transform: translate(0,0) scale(1)}
  to{transform: translate(70px,-40px) scale(1.06)}
}
@keyframes floatB{
  from{transform: translate(0,0) scale(1)}
  to{transform: translate(-60px,30px) scale(1.07)}
}

/* ---------- Layout ---------- */
.container{
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.section{padding: 92px 0}
.section--alt{background: linear-gradient(180deg, transparent, rgba(255,255,255,.03) 40%, transparent)}
.section__head{margin-bottom: 26px}
.section__title{
  font-size: clamp(1.8rem, 2.4vw, 2.35rem);
  letter-spacing:.2px;
}
.section__sub{
  margin-top: 10px;
  color: var(--muted);
  max-width: 70ch;
}

/* ---------- Topbar ---------- */
.topbar{
  position: fixed;
  inset: 18px 18px auto 18px;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-radius: 22px;
  background: rgba(10,12,18,.40);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
  transition: var(--t);
}
.topbar.is-scrolled{
  inset: 10px 10px auto 10px;
  background: rgba(10,12,18,.56);
  border-color: rgba(255,255,255,.12);
}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand__mark{
  width:40px; height:40px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(255,209,102,.9), rgba(255,107,53,.6), rgba(62,146,204,.35));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.brand__dot{
  position:absolute;
  width: 8px; height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.85);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.brand__dot:nth-child(1){left:10px; top:10px; opacity:.8}
.brand__dot:nth-child(2){left:18px; top:20px; opacity:.55}
.brand__dot:nth-child(3){left:26px; top:12px; opacity:.7}

.brand__name{font-weight:800; letter-spacing:.2px}
.brand__name span{
  background: linear-gradient(90deg, var(--amarillo-sinergia), var(--verde-fluorescente), var(--azul-energetico));
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}
.brand__tag{font-size:.78rem; color: var(--muted); margin-top:-2px}

.topnav{display:flex; align-items:center; gap: 10px}
.topnav__link{
  text-decoration:none;
  color: rgba(255,255,255,.84);
  font-weight: 500;
  font-size: .95rem;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: var(--t);
}
.topnav__link:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.topnav__link.is-active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.topnav__cta{
  background: linear-gradient(135deg, rgba(255,107,53,.95), rgba(216,49,91,.85));
  border-color: rgba(255,255,255,.18);
}

.social{display:flex; gap:10px; margin-right:10px}
.social a{
  width:38px; height:38px; border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  text-decoration:none;
  transition: var(--t);
}
.social a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.burger{
  display:none;
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: white;
  cursor:pointer;
  transition: var(--t);
}
.burger span{display:block; height:2px; width:18px; background:rgba(255,255,255,.9); margin:4px auto; border-radius:2px}
.burger:hover{transform: translateY(-1px); background: rgba(255,255,255,.10)}

/* ---------- Mobile sheet ---------- */
.sheet{position:fixed; inset:0; z-index:80; pointer-events:none}
.sheet.is-open{pointer-events:auto}
.sheet__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  opacity:0;
  transition: var(--t);
}
.sheet.is-open .sheet__backdrop{opacity:1}
.sheet__panel{
  position:absolute;
  right: 10px; top: 10px; bottom: 10px;
  width: min(420px, calc(100% - 20px));
  background: rgba(10,12,18,.68);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  transform: translateX(110%);
  transition: var(--t);
  display:flex;
  flex-direction:column;
  padding: 18px;
}
.sheet.is-open .sheet__panel{transform: translateX(0)}
.sheet__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.sheet__title{font-weight:800; font-size:1.25rem}
.sheet__sub{color:var(--muted); font-size:.9rem}
.sheet__close{
  width:44px; height:44px;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: white;
  cursor:pointer;
  transition: var(--t);
}
.sheet__close:hover{transform: rotate(2deg); background: rgba(255,255,255,.10)}
.sheet__links{margin-top: 18px; display:flex; flex-direction:column; gap:10px}
.sheet__link{
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  transition: var(--t);
}
.sheet__link:hover{transform: translateY(-2px); background: rgba(255,255,255,.10)}
.sheet__link--cta{
  background: linear-gradient(135deg, rgba(255,107,53,.92), rgba(46,204,113,.58));
  border-color: rgba(255,255,255,.18);
}
.sheet__foot{margin-top:auto; display:flex; gap:10px}
.sheet__pill{
  flex:1;
  text-decoration:none;
  padding: 12px 12px;
  border-radius: 16px;
  text-align:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  transition: var(--t);
}
.sheet__pill:hover{background: rgba(255,255,255,.10); transform: translateY(-2px)}

/* ---------- WhatsApp ---------- */
.fab-wa{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 58px; height: 58px;
  border-radius: 18px;
  background: #25D366;
  color: white;
  display:grid; place-items:center;
  box-shadow: 0 18px 40px rgba(37,211,102,.35);
  text-decoration:none;
  transition: var(--t);
}
.fab-wa:hover{transform: translateY(-6px) rotate(-1deg)}
.fab-wa i{font-size: 1.6rem}

/* ---------- Orbital Menu ---------- */
.orbital{
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 60;
}
.orbital__btn{
  width: 58px; height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
  transition: var(--t);
  position:relative;
  overflow:hidden;
}
.orbital__btn:hover{transform: translateY(-5px)}
.orbital__icon{display:grid; place-items:center; width:100%; height:100%}
.orbital__icon i{font-size: 1.25rem}
.orbital__glow{
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,209,102,.30), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(46,204,113,.20), transparent 55%);
  opacity:.9;
  transform: rotate(15deg);
}
.orbital__items{
  position:absolute;
  left: 50%; bottom: 50%;
  transform: translate(-50%, 50%) scale(.9);
  width: 220px; height: 220px;
  pointer-events:none;
  opacity:0;
  transition: var(--t);
}
.orbital.is-open .orbital__items{
  opacity:1;
  pointer-events:auto;
  transform: translate(-50%, 50%) scale(1);
}
.orbital__item{
  position:absolute;
  width: 46px; height:46px;
  border-radius: 16px;
  background: rgba(10,12,18,.66);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.92);
  display:grid; place-items:center;
  text-decoration:none;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  transition: var(--t);
}
.orbital__item:hover{transform: translateY(-4px) scale(1.05)}
/* positions in orbit */
.orbital__item:nth-child(1){left: 86px; top: 10px}
.orbital__item:nth-child(2){right: 10px; top: 86px}
.orbital__item:nth-child(3){left: 86px; bottom: 10px}
.orbital__item:nth-child(4){left: 10px; top: 86px}

/* ---------- HERO ---------- */
.hero{
  padding-top: 110px; /* space for topbar */
  min-height: 100svh;
  display:flex;
  align-items:center;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 30px;
  padding: 40px 0 10px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}
.chip__dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(90deg, var(--amarillo-sinergia), var(--verde-fluorescente));
  box-shadow: 0 0 18px rgba(255,209,102,.35);
}
.hero__title{
  margin-top: 14px;
  font-size: clamp(2.15rem, 3.4vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -.5px;
}
.hero__title span{
  background: linear-gradient(90deg, var(--amarillo-sinergia), var(--verde-fluorescente), var(--azul-energetico));
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}
.hero__lead{
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 62ch;
}
.hero__cta{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration:none;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  transition: var(--t);
  cursor:pointer;
  font-weight: 600;
}
.btn:hover{transform: translateY(-2px); background: rgba(255,255,255,.10)}
.btn--primary{
  background: linear-gradient(135deg, rgba(255,107,53,.95), rgba(216,49,91,.85));
  border-color: rgba(255,255,255,.18);
}
.btn--ghost{
  background: rgba(10,12,18,.45);
}
.btn--mini{
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 600;
}
.btn--miniAlt{
  background: linear-gradient(135deg, rgba(62,146,204,.55), rgba(46,204,113,.35));
  border-color: rgba(255,255,255,.16);
}
.btn--block{width:100%}

.hero__kpis{
  margin-top: 20px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.kpi{
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.kpi__n{
  font-weight: 800;
  font-size: 1.25rem;
  background: linear-gradient(90deg, var(--amarillo-sinergia), var(--verde-fluorescente));
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}
.kpi__t{color: var(--muted); font-size:.92rem; margin-top:2px}

.glassCard{
  border-radius: var(--r2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.glassCard::before{
  content:"";
  position:absolute; inset:-60%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,209,102,.18), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(46,204,113,.12), transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(62,146,204,.12), transparent 45%);
  transform: rotate(10deg);
}
.glassCard__top, .glassCard__list, .glassCard__bottom{position:relative}
.glassCard__top{padding: 18px}
.glassCard__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-weight: 600;
  font-size: .9rem;
}
.glassCard__title{margin-top: 12px; font-size: 1.35rem; font-weight: 800}
.glassCard__desc{margin-top: 8px; color: var(--muted)}
.glassCard__list{
  padding: 0 18px 18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.pill{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(10,12,18,.35);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  font-weight: 600;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.glassCard__bottom{
  padding: 14px 18px 18px;
  display:flex;
  gap: 10px;
}

.hero__ring{
  margin-top: 14px;
  height: 120px;
  border-radius: 24px;
  border: 1px dashed rgba(255,255,255,.16);
  opacity:.55;
}

/* ---------- Split ---------- */
.split{display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px}
.media{
  border-radius: var(--r2);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
  position:relative;
}
.media img{width:100%; height: 360px; object-fit:cover; display:block}
.media__badge{
  position:absolute;
  left: 14px; bottom: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(10,12,18,.65);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  display:inline-flex;
  gap:10px;
  align-items:center;
  color: rgba(255,255,255,.92);
}
.textCard{
  border-radius: var(--r2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  padding: 18px;
  box-shadow: var(--shadow2);
}
.textCard h3{font-size: 1.5rem}
.textCard p{margin-top: 10px; color: var(--muted)}
.ticks{list-style:none; margin-top: 12px; display:grid; gap:10px}
.ticks li{display:flex; gap:10px; align-items:flex-start; color: rgba(255,255,255,.86)}
.ticks i{color: var(--amarillo-sinergia); margin-top: 3px}
.textCard__cta{margin-top: 14px; display:flex; gap:12px; flex-wrap:wrap}

/* ---------- Services Cards ---------- */
.cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
.card{
  border-radius: var(--r2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  box-shadow: var(--shadow2);
  transition: var(--t);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:-60%;
  background: radial-gradient(circle at 30% 30%, rgba(255,209,102,.12), transparent 50%),
              radial-gradient(circle at 70% 70%, rgba(62,146,204,.10), transparent 55%);
  transform: rotate(12deg);
  opacity:.9;
}
.card > *{position:relative}
.card:hover{transform: translateY(-6px); border-color: rgba(255,255,255,.18)}
.card__icon{
  width:52px; height:52px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 12px;
}
.card h3{font-size:1.15rem}
.card p{margin-top:8px; color: var(--muted)}
.card__meta{display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px}
.tag{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .85rem;
  background: rgba(10,12,18,.35);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
}

/* ---------- Case Study ---------- */
.case{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
  border-radius: var(--r2);
}
.case__left, .case__right{
  border-radius: var(--r2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  box-shadow: var(--shadow2);
}
.case__badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 700;
}
.case__left h3{margin-top: 12px; font-size: 1.55rem}
.case__left p{margin-top: 10px; color: var(--muted)}
.case__kpis{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.kpiBox{
  border-radius: 18px;
  padding: 14px;
  background: rgba(10,12,18,.35);
  border: 1px solid rgba(255,255,255,.10);
}
.kpiBox__n{
  font-weight: 900;
  font-size: 1.25rem;
  background: linear-gradient(90deg, var(--amarillo-sinergia), var(--verde-fluorescente));
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}
.kpiBox__t{color: var(--muted); font-size:.92rem; margin-top: 2px}
.case__cta{margin-top: 14px; display:flex; gap:12px; flex-wrap:wrap}

.compare{
  border-radius: 22px;
  background: rgba(10,12,18,.35);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.compare__head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
}
.compare__hint{color: var(--muted); font-size:.9rem}
.compare__wrap{
  position:relative;
  height: 300px;
}
.compare__pane{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.compare__pane--after{
  background: radial-gradient(circle at 30% 20%, rgba(46,204,113,.14), transparent 55%),
              radial-gradient(circle at 75% 70%, rgba(62,146,204,.14), transparent 55%),
              rgba(255,255,255,.02);
}
.compare__pane--before{
  background: radial-gradient(circle at 30% 20%, rgba(255,107,53,.16), transparent 55%),
              radial-gradient(circle at 75% 70%, rgba(216,49,91,.14), transparent 55%),
              rgba(255,255,255,.02);
  width: 50%;
  overflow:hidden;
}
.compare__card{
  width: min(360px, calc(100% - 28px));
  border-radius: 20px;
  padding: 16px;
  background: rgba(10,12,18,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.compare__card h4{font-size:1.15rem}
.compare__card ul{margin-top: 10px; padding-left: 18px; color: rgba(255,255,255,.86)}
.compare__handle{
  position:absolute;
  inset: 0 auto 0 50%;
  width: 2px;
  transform: translateX(-1px);
  background: rgba(255,255,255,.28);
  cursor: ew-resize;
}
.compare__line{position:absolute; inset: 0; background: rgba(255,255,255,.25)}
.compare__knob{
  position:absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 42px; height:42px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  display:grid; place-items:center;
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.case__note{
  margin-top: 10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: var(--muted);
  font-size:.92rem;
}
.case__note i{margin-top: 3px; color: var(--amarillo-sinergia)}

/* ---------- Allies ---------- */
.allies{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ally{
  border-radius: var(--r2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  box-shadow: var(--shadow2);
  transition: var(--t);
}
.ally:hover{transform: translateY(-6px); border-color: rgba(255,255,255,.18)}
.ally__top{display:flex; gap:12px; align-items:flex-start}
.ally__icon{
  width:52px; height:52px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(255,209,102,.18), rgba(62,146,204,.12));
  border: 1px solid rgba(255,255,255,.14);
}
.ally h3{font-size: 1.2rem}
.ally p{color: var(--muted); margin-top: 2px}
.ally__desc{margin-top: 10px; color: rgba(255,255,255,.82)}
.ally__cta{margin-top: 12px}

/* ---------- Team ---------- */
.team{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}
.person{
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow: var(--shadow2);
  transition: var(--t);
}
.person:hover{transform: translateY(-6px)}
.person__img{width:100%; height: 180px; object-fit: cover; display:block}
.person__body{padding: 14px}
.person__role{color: var(--amarillo-sinergia); font-weight: 600; font-size: .9rem; margin-top: 3px}
.person p{margin-top: 8px; color: var(--muted); font-size: .95rem}

/* ---------- Contact ---------- */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-radius: var(--r2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.contact__left{
  padding: 18px;
  background: radial-gradient(circle at 30% 20%, rgba(255,209,102,.14), transparent 55%),
              radial-gradient(circle at 75% 70%, rgba(62,146,204,.14), transparent 55%);
}
.contact__left h2{font-size: 1.8rem}
.contact__left p{margin-top: 10px; color: var(--muted)}
.contact__items{margin-top: 12px; display:grid; gap:10px}
.contact__item{
  text-decoration:none;
  display:flex; gap:12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(10,12,18,.35);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  transition: var(--t);
}
.contact__item:hover{transform: translateY(-3px); background: rgba(10,12,18,.45)}
.contact__item i{font-size: 1.2rem; margin-top: 3px; color: var(--amarillo-sinergia)}
.contact__k{font-size:.85rem; color: var(--muted)}
.contact__v{font-weight: 700}
.contact__social{margin-top: 12px; display:flex; gap:10px}
.contact__social a{
  width:42px; height:42px; border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  text-decoration:none;
  transition: var(--t);
}
.contact__social a:hover{transform: translateY(-3px); background: rgba(255,255,255,.10)}

.contact__form{padding: 18px}
.field{display:grid; gap:6px; margin-bottom: 12px}
label{color: rgba(255,255,255,.86); font-weight: 600; font-size: .95rem}
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,12,18,.35);
  color: rgba(255,255,255,.92);
  outline:none;
  transition: var(--t);
}
textarea{min-height: 120px; resize: vertical}
input:focus, textarea:focus{
  border-color: rgba(255,209,102,.40);
  box-shadow: 0 0 0 4px rgba(255,209,102,.10);
}
.formNote{margin-top: 10px; color: var(--muted); font-size: .9rem}

/* ---------- Footer ---------- */
.footer{
  padding: 50px 0 20px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 18px;
}
.footer__brand{font-weight: 900; font-size: 1.2rem}
.footer__brand span{
  background: linear-gradient(90deg, var(--amarillo-sinergia), var(--verde-fluorescente), var(--azul-energetico));
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}
.footer__col a{
  display:block;
  margin-top: 8px;
  color: rgba(255,255,255,.78);
  text-decoration:none;
  transition: var(--t);
}
.footer__col a:hover{color: rgba(255,255,255,.95); transform: translateX(2px)}
.footer__h{font-weight: 800; margin-bottom: 6px}
.footer__copy{
  margin-top: 20px;
  text-align:center;
  color: rgba(255,255,255,.55);
  font-size: .9rem;
}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform: translateY(18px); transition: all .8s var(--ease)}
.reveal.is-in{opacity:1; transform: translateY(0)}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .team{grid-template-columns: repeat(3, minmax(0,1fr))}
  .hero__inner{grid-template-columns: 1fr; gap: 18px}
  .hero__ring{display:none}
  .split{grid-template-columns: 1fr}
  .case{grid-template-columns: 1fr}
  .contact{grid-template-columns: 1fr}
}
@media (max-width: 860px){
  .topnav{display:none}
  .burger{display:block}
  .social{display:none}
  .hero__kpis{grid-template-columns: 1fr}
}
@media (max-width: 520px){
  .section{padding: 76px 0}
  .topbar{inset: 10px 10px auto 10px}
  .allies{grid-template-columns: 1fr}
  .team{grid-template-columns: repeat(2, minmax(0,1fr))}
  .compare__wrap{height: 320px}
  .orbital{left: 12px; bottom: 12px}
  .fab-wa{right: 12px; bottom: 12px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}