/* ======= Variables y base ======= */
:root{
  --bg1:#070b12; --bg2:#0f1622; --fg:#eaf2fb; --muted:#9aa3ad;
  --card:#0e1420cc; --border:#223149;
  --accent:#ff7a00; --accent2:#ffd23f; --neon:#00e0ff;
  --tilt-x:0; --tilt-y:0; /* Parallax */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--fg);
  background:var(--bg1);
  overflow-x:hidden;
}

/* ======= Fondos ======= */
.bg-anim,
.bg-road{pointer-events:none}
.bg-anim{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(900px 600px at 75% -10%, rgba(255,122,0,.22), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgba(0,224,255,.25), transparent 60%),
    linear-gradient(130deg,var(--bg1),var(--bg2));
  filter:saturate(1.15) contrast(1.05);
  animation:bgMove 14s ease-in-out infinite alternate;
  transform:translate3d(calc(var(--tilt-x)*8px), calc(var(--tilt-y)*-6px), 0);
  transition:transform .08s linear;
}
@keyframes bgMove{
  0%{background-position: 75% -10%, 10% 110%, 0 0}
  100%{background-position: 65% -6%, 16% 96%, 100% 0}
}
.bg-road{
  position:fixed; inset:0; z-index:-1; opacity:.18;
  background:repeating-linear-gradient(-12deg, #ffffff16 0 2px, transparent 2px 12px);
  animation:roadParallax 9s linear infinite;
}
@keyframes roadParallax{
  from{background-position:0 0}
  to{background-position:600px 0}
}

/* ======= Layout / Card ======= */
.wrap{max-width:1100px;margin:0 auto;padding:20px}
.header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo-text{font-weight:900;letter-spacing:.3px}
.badge{
  padding:6px 10px;border:1px solid #334155;border-radius:999px;
  color:#cbd5e1;font-size:13px;background:#0b1220a8;backdrop-filter:blur(4px)
}
.card{
  position:relative; overflow:hidden; background:var(--card);
  border:1px solid var(--border); border-radius:26px; padding:32px;
  padding-bottom:120px; /* espacio para altimetría ABS en desktop */
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translate3d(calc(var(--tilt-x)*5px), calc(var(--tilt-y)*-3px), 0);
  transition:transform .08s linear;
  z-index:10;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:26px;
  padding:1px; background:linear-gradient(135deg, #ffffff30, transparent 40%, #ff7a0040 70%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.halo{
  position:absolute; inset:auto 0 -120px 0; height:240px; filter:blur(60px);
  background:radial-gradient(closest-side, rgba(255,208,63,.28), transparent 70%);
  pointer-events:none;
}

/* ======= Tipografía ======= */
.title{margin:0 0 10px; font-size:clamp(30px,7vw,64px); line-height:1.05; font-weight:900}
.grad{
  background:linear-gradient(90deg,#fff,#cfe3ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:pulseTitle 3.6s ease-in-out infinite;
}
@keyframes pulseTitle{
  0%,100%{text-shadow:0 0 0 rgba(255,208,63,0)}
  50%{text-shadow:0 0 18px rgba(255,208,63,.5)}
}
.sub{margin:6px 0 18px; color:var(--muted); font-size:clamp(14px,3vw,18px)}

/* ======= Countdown ======= */
.countdown{
  display:grid; grid-template-columns:repeat(4,minmax(80px,1fr));
  gap:12px; margin:12px 0 20px;
}
.cd-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;border:1px solid #2a354a;border-radius:16px;background:#0c152280;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04)
}
.num{font-size:clamp(24px,5.5vw,36px);font-weight:900}
.lbl{margin-top:4px;color:#95a3b5;font-size:12px;letter-spacing:.4px}
.countdown .cd-item:nth-child(4) .num{animation:beat 1s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ======= CTAs ======= */
.cta-row{
  display:flex; gap:14px; flex-wrap:wrap; margin:6px 0 14px;
  justify-content:center; position:relative; z-index:20;
}
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px; border-radius:14px; text-decoration:none; font-weight:900; letter-spacing:.3px;
  border:1px solid #2f3a51; background:#0e1726cc; color:#eaf2fb; cursor:pointer;
  transition:transform .15s ease, box-shadow .25s ease, background .25s ease, filter .25s ease;
  overflow:hidden; isolation:isolate;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 18px 40px rgba(0,0,0,.35)}
.btn:active,.btn.press{transform:translateY(0) scale(.98); filter:brightness(1.1)}
.btn[aria-disabled="true"]{opacity:.65; pointer-events:none}
.btn .shine,.btn .glow{pointer-events:none}

.btn.primary{
  background:linear-gradient(180deg,var(--accent),#ff6a00);
  color:#111; border-color:#0000;
  box-shadow:0 10px 30px rgba(255,122,0,.45), 0 0 0 2px #ffb86b22 inset;
  animation:breatheGlow 2.8s ease-in-out infinite;
}
@keyframes breatheGlow{
  0%,100%{box-shadow:0 10px 30px rgba(255,122,0,.45), 0 0 0 2px #ffb86b22 inset}
  50%{box-shadow:0 18px 46px rgba(255,122,0,.65), 0 0 0 2px #ffb86b33 inset}
}
.btn.primary .shine{
  position:absolute; content:""; inset:-2px; border-radius:inherit;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.95) 45%,transparent 55%);
  transform:translateX(-120%); filter:blur(1px); mix-blend-mode:screen;
  animation:shine 3s ease-in-out infinite;
}
@keyframes shine{
  0%{transform:translateX(-120%)}
  55%,100%{transform:translateX(120%)}
}

.btn.neon{
  background:linear-gradient(180deg,#0b1a28,#0e2234);
  border-color:#103a46; color:#cfefff;
  box-shadow:0 0 0 2px #00e0ff33 inset,0 6px 20px rgba(0,224,255,.25);
}
.btn.neon .glow{
  position:absolute; inset:-2px; border-radius:inherit;
  box-shadow:0 0 22px rgba(0,224,255,.65),0 0 48px rgba(0,224,255,.32);
  opacity:.8; filter:blur(2px);
}

/* Chip INSCRIBIRME */
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:999px; font-weight:900; text-decoration:none;
  background:#00d084; color:#052b1a; letter-spacing:.3px;
  box-shadow:0 10px 24px rgba(0,208,132,.35);
  position:relative; z-index:30;
}
.chip.pulse{ animation:pulse 1.25s ease-out infinite }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,208,132,.6) }
  70%{ box-shadow:0 0 0 16px rgba(0,208,132,0) }
  100%{ box-shadow:0 0 0 0 rgba(0,208,132,0) }
}

/* ======= Altimetría (ABS en desktop) ======= */
.altimetry{
  position:absolute; left:0; right:0; bottom:0; height:150px;
  opacity:.98; pointer-events:none; z-index:1;
}
.altimetry svg{width:100%; height:100%; display:block}
#alt-line{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
  stroke-dasharray:6 10; opacity:.9; animation:altDash 4s linear infinite;
}
@keyframes altDash{to{stroke-dashoffset:-200}}
#alt-dot{
  filter:drop-shadow(0 0 6px rgba(255,210,63,.9)) drop-shadow(0 0 16px rgba(255,210,63,.35))
}

/* HUD para altitud/km */
.alt-hud{
  position:absolute; transform:translate(-50%,-100%);
  background:rgba(0,0,0,.55); color:#fff;
  font:800 12px/1.2 Inter,system-ui,sans-serif;
  padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.2);
  white-space:nowrap; pointer-events:none; z-index:3;
}

/* ======= Footer ======= */
.footer{
  display:flex; justify-content:center; gap:10px;
  color:#93a0b3; margin:18px 0 28px
}
.footer a{color:#cfe2ff}
.sep{opacity:.5}

/* ======= FAB (botón flotante) ======= */
.fab{
  position:fixed; right:16px; bottom:16px;
  width:52px; height:52px; border-radius:50%;
  border:none; cursor:pointer; z-index:999;
  font-size:22px; font-weight:700; color:#111;
  background:linear-gradient(180deg,var(--accent),#ff6a00);
  box-shadow:0 14px 30px rgba(255,122,0,.45);
}
.fab:active{transform:translateY(1px)}
.fab-menu{
  position:fixed; right:16px; bottom:76px; display:flex; flex-direction:column; gap:10px;
  z-index:999; /* botones dentro reutilizan .btn */
}
.fab-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:998;
}

/* ======= Mobile tuning ======= */
@media (max-width:640px){
  .wrap{padding:16px}
  .card{padding:22px;border-radius:22px;padding-bottom:24px} /* altimetría pasa a flujo */
  .countdown{grid-template-columns:repeat(2,1fr)}
  .bg-road{opacity:.24}
  .bg-anim{transform:translate3d(calc(var(--tilt-x)*14px), calc(var(--tilt-y)*-10px), 0)}

  /* Mantener CTAs visibles en móvil (no ocultarlas) */
  .cta-row{gap:10px}
  .cta-row .btn{flex:1; min-width:220px}
  
  /* Altimetría dentro del flujo en móvil */
  .altimetry{position:relative; bottom:auto; height:140px; margin-top:12px}
  .alt-hud{font-size:11px}
}

/* ======= Accesibilidad ======= */
@media (prefers-reduced-motion: reduce){
  .bg-anim,.bg-road,.altimetry svg,#alt-line,.btn.primary .shine,.grad{animation:none}
}

/* ======= Imagen principal (si se usa clase) ======= */
.hero-img{
  width:100%; max-width:1200px; height:auto;
  border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.25);
  display:block; margin:1rem auto 0;
}

.btn.wa{background:#25D366;color:#071a14;border:0}
.btn.gray{background:#152033;color:#cfe2ff;border:1px solid #2a3a56}

.cc-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.38rem .6rem; border:1px solid #2a2a3a; border-radius:999px;
  background:#1b1b25; color:#cfe2ff; cursor:pointer; user-select:none;
}
.cc-pill input{ accent-color:#ff7a00; }