/* ====== Paleta base (misma identidad) ====== */
:root{
  --bg:#02183D;
  --ink:#FFFFFF;
  --muted:#9FB3D1;
  --brand:#F21651;
  --brand-2:#F9921C;
  --surface:#0B1430;
  --outline:#ffffff22;
  --radius:14px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
}
h1,h2,h3{ font-weight:800; margin:0 0 10px; letter-spacing:.2px }
h1{ font-size:clamp(36px,5.2vw,72px); line-height:1.1 }
h2{ font-size:clamp(22px,3.2vw,38px) }
h3{ font-size:clamp(18px,2vw,22px) }
p{ margin:0 0 10px }
.muted{ color:var(--muted) }
.small{ font-size:.9rem }
.center{ text-align:center }
.wrap{ max-width:1100px; margin:0 auto; padding:0 20px }

/* ====== Topbar ====== */
.topbar{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg,#020a1dcc,#020a1d99 70%,transparent);
  border-bottom:1px solid var(--outline);
  backdrop-filter: blur(6px);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff }
.brand-logo{ width:36px; height:36px; object-fit:contain }
.brand-text{ font-weight:900; letter-spacing:1px }
.brand-text span{ color:var(--brand) }
.mainnav{ display:flex; gap:18px; align-items:center }
.mainnav a{ color:#fff; opacity:.9; text-decoration:none; text-transform:uppercase; letter-spacing:.06em }
.mainnav a:hover{ opacity:1; color:var(--brand) }

/* ====== Botones ====== */
.btn{
  display:inline-block;
  background:var(--brand);
  color:#fff; text-decoration:none;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  border:1px solid transparent;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn.small{ padding:8px 12px }
.btn.ghost{ background:transparent; color:#fff; border-color:#ffffff55 }

/* ====== Hero ====== */
.hero-exp{
  position:relative;
  min-height:clamp(560px,76vh,900px);
  display:flex; align-items:center;
  border-bottom:1px solid var(--outline);
  overflow:hidden;
  background:linear-gradient(90deg,#071b3b 0%, #57324c 100%);
}
.hero-grid{ position:relative; z-index:2; padding:72px 0 }
.eyebrow{ text-transform:uppercase; letter-spacing:.14em; opacity:.85; color:var(--brand-2); font-weight:900; margin-bottom:4px }
.lead{ color:var(--muted); margin-top:10px; max-width:760px }
.cta-row{ display:flex; gap:12px; margin-top:16px }

/* Canvas de telemetría */
#telemetry{ position:absolute; inset:0; z-index:1; pointer-events:none; }
#telemetryCanvas{ width:100%; height:100%; display:block; }

/* ====== Secciones ====== */
.section{ padding:64px 0 }
.section.alt{ background:#ffffff08; border-top:1px solid var(--outline); border-bottom:1px solid var(--outline) }

/* Tarjetas / grids */
.cards{ display:grid; gap:18px; grid-template-columns:repeat(4,1fr); margin-top:14px }
.card{
  background:var(--surface);
  border:1px solid var(--outline);
  border-radius:var(--radius);
  padding:18px;
  transition:.15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px #00000040 }

.grid-4{ display:grid; gap:18px; grid-template-columns:repeat(4,1fr) }
.split{ display:grid; gap:24px; grid-template-columns:1.2fr .8fr; align-items:center }

.steps .step{ background:var(--surface); border:1px solid var(--outline); border-radius:var(--radius); padding:18px }
.step-num{
  width:36px; height:36px; border-radius:50%;
  display:inline-grid; place-items:center; font-weight:900;
  background:linear-gradient(135deg,var(--brand),#ff4d7e); color:#fff; margin-bottom:10px;
}

.deliverables{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:18px }
.deliverables .d-col{ background:var(--surface); border:1px solid var(--outline); border-radius:var(--radius); padding:18px }
.deliverables ul{ margin:6px 0 0; padding-left:18px }
.check{ margin:10px 0 0; padding-left:18px }
.check li{ margin:6px 0 }

.panel{
  background:var(--surface); border:1px solid var(--outline); border-radius:var(--radius);
  padding:18px;
}

/* Stats */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px;
}
.stat{
  background:#0f1a3b; border:1px solid var(--outline); border-radius:12px; padding:18px;
  text-align:center;
}
.stat-num{ font-size:42px; font-weight:900 }
.stat-label{ color:var(--muted); margin-top:6px }

/* CTA final + Footer */
.cta-final .cta-row{ justify-content:center }
.foot{ border-top:1px solid var(--outline); padding:20px 0; color:var(--muted) }
.foot-flex{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.foot-nav{ display:flex; gap:14px }
.foot-nav a{ color:var(--muted); text-decoration:none }
.foot-nav a:hover{ color:#fff }

/* ====== Responsive ====== */
@media (max-width:1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .split{ grid-template-columns:1fr }
}
@media (max-width:720px){
  .grid-4, .cards{ grid-template-columns:1fr }
  .deliverables{ grid-template-columns:1fr }
  .stats{ grid-template-columns:1fr }
  .cta-row{ flex-direction:column; align-items:flex-start }
}



:root{ --hero-offset: clamp(100px, 22vh, 320px); }

.exp-copy, .hero-content, .hero-intro, .hero-copy{
  position: relative;
  z-index: 3;
  margin-top: var(--hero-offset);
}

/* Si quieres menos en móvil: */
@media (max-width: 720px){
  :root{ --hero-offset: clamp(60px, 18vh, 220px); }
}