/* ============================================================
   GEO-FIBER.COM · Web comercial
   Design system cosmic (derivado de _shared/cosmic.css de la
   plataforma): deep-space, glassmorphism, acento azul-violeta
   + acento naranja de marca en momentos puntuales.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Fondo deep-space (nunca #000) */
  --bg-void: #060814;
  --bg-deep: #0B0F1F;
  --bg-elevated: #111729;

  /* Texto alto contraste (nunca #fff) */
  --text-hi: #E8ECF7;
  --text-mid: #A6AEC4;
  --text-low: #5C6685;

  /* Acento principal: azul-violeta cósmico (plataforma) */
  --accent: #6E8BFF;
  --accent-soft: #8FA3FF;
  --accent-glow: rgba(110, 139, 255, 0.25);

  /* Acento de marca (el naranja del logo) — solo momentos clave */
  --brand-orange: #F5A623;
  --brand-orange-glow: rgba(245, 166, 35, 0.18);

  /* Estados */
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;

  /* Hairlines glassmórficos */
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-hi: rgba(255, 255, 255, 0.14);

  --radius: 20px;
  --radius-sm: 12px;
  --maxw: 1160px;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--bg-void);
  color: var(--text-mid);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* --------- fondo: grilla uniforme tipo pantalla de osciloscopio ---------
   (pedido del dueño 07-12: sin halos ni puntos de luz fosforescentes) */
.cosmic-bg { display: none; }
.cosmic-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(118, 160, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 160, 255, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(118, 160, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 160, 255, 0.09) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
}

/* --------- tipografía --------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-hi); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; }
.display { font-size: clamp(2.3rem, 5.6vw, 4.2rem); font-weight: 700; }
.h2 { font-size: clamp(1.55rem, 3.2vw, 2.35rem); }
.h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-low); }
.eyebrow.orange { color: var(--brand-orange); }
.lead { font-size: clamp(1rem, 2vw, 1.18rem); color: var(--text-mid); max-width: 80ch; }
.muted { color: var(--text-low); }
.gradient-text { background: linear-gradient(135deg, var(--text-hi), var(--accent-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
a { color: inherit; text-decoration: none; }
strong { color: var(--text-hi); font-weight: 700; }
.mono { font-family: var(--font-mono); }

/* --------- layout --------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(64px, 9vw, 112px) 0; }
/* Encabezados de sección SIEMPRE centrados y a lo ancho (pedido dueño 07-12):
   el título entra en UNA línea en desktop y el lead aprovecha el ancho. */
.section-head {
  max-width: 1080px; margin: 0 auto clamp(32px, 5vw, 56px);
  display: flex; flex-direction: column; gap: 14px;
  text-align: center; align-items: center;
}
/* Título de sección SIEMPRE en una línea (pedido dueño 07-12): nowrap + fuente
   que escala con el viewport (el título más largo mide ~23.5em → 3vw nunca
   desborda). En móvil (<640px) se permite envolver, centrado y parejo. */
.section-head .h2 { white-space: nowrap; font-size: clamp(1rem, 3vw, 2.35rem); }
@media (max-width: 640px) {
  .section-head .h2 { white-space: normal; text-wrap: balance; font-size: clamp(1.35rem, 5.5vw, 1.6rem); }
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.row { display: flex; gap: 16px; align-items: center; }
.row.wrap-row { flex-wrap: wrap; }
.between { justify-content: space-between; }

/* --------- glass card --------- */
.glass {
  background: rgba(17, 23, 41, 0.55);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 0 var(--hairline-hi), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
@supports not (backdrop-filter: blur(1px)) { .glass { background: var(--bg-elevated); } }
.card-pad { padding: clamp(22px, 3.4vw, 36px); }

/* --------- header / nav --------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .25s, border-color .25s, box-shadow .25s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(6, 8, 20, 0.82);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--hairline);
}
.nav { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 26px; width: auto; display: block; transition: transform .22s cubic-bezier(.2,.7,.2,1), filter .25s; }
.brand .brand-icon { height: 48px; width: 48px; border-radius: 11px; box-shadow: 0 0 18px -6px var(--accent-glow); }
.brand:hover img { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(110, 139, 255, 0.55)); }
.nav-links { display: flex; gap: clamp(14px, 1.8vw, 24px); align-items: center; }
.nav-links a { color: var(--text-mid); font-size: 0.9rem; font-weight: 600; transition: color .2s; white-space: nowrap; }
.nav-links a:hover { color: var(--text-hi); }
.nav-cta { display: flex; gap: 12px; align-items: center; }

.lang-switch {
  display: inline-flex; align-items: center; border: 1px solid var(--hairline-hi);
  border-radius: 999px; overflow: hidden; font-family: var(--font-mono); font-size: 0.72rem;
}
.lang-switch a { padding: 6px 12px; color: var(--text-low); transition: color .2s, background .2s; }
.lang-switch a:hover { color: var(--text-hi); }
.lang-switch a.active { color: var(--bg-void); background: var(--accent); font-weight: 700; }

.nav-burger { display: none; background: none; border: 1px solid var(--hairline-hi); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; color: var(--text-hi); font-size: 1.2rem; align-items: center; justify-content: center; }

.mobile-menu {
  display: none; position: fixed; top: 72px; left: 0; right: 0; z-index: 49;
  background: rgba(6, 8, 20, 0.96); border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 18px 24px 26px; flex-direction: column; gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 12px 4px; color: var(--text-mid); font-weight: 600; border-bottom: 1px solid var(--hairline); }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--text-hi); }

/* --------- botones --------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; padding: 13px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--bg-void); box-shadow: 0 0 40px -8px var(--accent); }
.btn-primary:hover { background: var(--accent-soft); box-shadow: 0 0 52px -6px var(--accent); }
.btn-ghost { background: transparent; color: var(--text-hi); border-color: var(--hairline-hi); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-orange { background: var(--brand-orange); color: var(--bg-void); box-shadow: 0 0 40px -10px var(--brand-orange); }
.btn-orange:hover { filter: brightness(1.1); box-shadow: 0 0 52px -8px var(--brand-orange); }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: wait; }

/* --------- pills / badges --------- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hairline); font-size: 0.78rem; color: var(--text-mid); background: rgba(255,255,255,0.03); white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.dot.warn { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.dot.danger { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.dot.pulse { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

.tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }
.tag-orange { background: var(--brand-orange-glow); color: var(--brand-orange); border: 1px solid rgba(245, 166, 35, 0.35); }
.tag-accent { background: var(--accent-glow); color: var(--accent-soft); border: 1px solid rgba(110, 139, 255, 0.35); }
.tag-ok { background: rgba(52, 211, 153, 0.12); color: var(--ok); border: 1px solid rgba(52, 211, 153, 0.3); }

/* --------- hero full-bleed (imagen de fondo completa, texto centrado) --------- */
.hero-full {
  position: relative; overflow: hidden;
  min-height: clamp(600px, 96vh, 980px);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.hero-full::before {
  content: ""; position: absolute; inset: 0;
  background: url('/assets/img/hero_bg.webp') center / cover no-repeat;
}
/* Línea de pulso óptico al pie del HERO (pedido dueño 07-12): el mismo
   separador del footer, cerrando el hero contra el resto de la página. */
.hero-full::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%, rgba(56, 189, 248, 0) 6%, rgba(56, 189, 248, 0.75) 30%,
    var(--brand-orange) 50%, rgba(56, 189, 248, 0.75) 70%,
    rgba(56, 189, 248, 0) 94%, transparent 100%);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4), 0 0 34px -6px var(--brand-orange-glow);
}
.hero-veil::after { /* pulso viajero, desfasado del que corre en el footer */
  content: ""; position: absolute; bottom: -3px; left: -10%; width: 84px; height: 8px; z-index: 3;
  border-radius: 999px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 220, 150, 0.95), rgba(245, 166, 35, 0.55) 45%, transparent 75%);
  filter: blur(1px);
  animation: gf-pulso-footer 6s cubic-bezier(.45, .05, .55, .95) infinite;
  animation-delay: 3s;
}
@media (prefers-reduced-motion: reduce) { .hero-veil::after { display: none; } }

.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 64% at 50% 44%, rgba(6, 8, 20, 0.82) 0%, rgba(6, 8, 20, 0.42) 58%, rgba(6, 8, 20, 0.12) 100%),
    linear-gradient(to bottom, rgba(6, 8, 20, 0.78) 0%, rgba(6, 8, 20, 0.22) 26%, rgba(6, 8, 20, 0.30) 64%, var(--bg-void) 100%);
}
.hero-full-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding-top: 104px; padding-bottom: 56px;
}
.hero-title {
  font-family: var(--font-display); color: var(--text-hi);
  font-size: clamp(2.7rem, 6.6vw, 5.2rem); font-weight: 700;
  line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance;
  text-shadow: 0 6px 34px rgba(0, 0, 0, 0.65);
  max-width: 18ch;
}
.hero-lead {
  font-size: clamp(1.02rem, 2vw, 1.28rem); color: #CBD1E4; max-width: 58ch;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7); line-height: 1.65;
}
/* Eslogan: UNA sola línea, centrado y resaltado (azul→naranja de marca) */
.hero-tagline {
  display: block; white-space: nowrap; margin-top: 4px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(1rem, 3.3vw, 1.7rem);
  background: linear-gradient(90deg, var(--accent-soft) 0%, #E8ECF7 45%, var(--brand-orange) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.7));
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; justify-content: center; }
.hero-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; justify-content: center; }
.hero-full .pill { background: rgba(6, 8, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* (layout viejo del hero, conservado por si se reusa en otra sección) */
.hero { padding: clamp(120px, 16vw, 180px) 0 clamp(48px, 7vw, 88px); }
.hero-grid { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

.hero-shot { position: relative; }
@media (min-width: 1240px) { .hero-shot { margin-right: -5vw; } }
.hero-shot .frame {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline-hi);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 90px -25px var(--accent-glow);
  transform: perspective(1600px) rotateY(-3deg) rotateX(1deg);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero-shot:hover .frame { transform: perspective(1600px) rotateY(0deg) rotateX(0deg); }
.hero-shot img { display: block; width: 100%; height: auto; }
.hero-shot .glow { position: absolute; inset: -8%; z-index: -1; background: radial-gradient(50% 50% at 60% 40%, var(--accent-glow) 0%, transparent 70%); filter: blur(30px); }

/* --------- problema / solución --------- */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vs-card { position: relative; display: flex; flex-direction: column; gap: 16px; }
.vs-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.vs-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.96rem; }
.vs-card li .ic { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 0.72rem; margin-top: 2px; }
.vs-bad .ic { background: rgba(251, 113, 133, 0.12); color: var(--danger); }
.vs-good .ic { background: rgba(52, 211, 153, 0.12); color: var(--ok); }
.vs-good { border-color: rgba(110, 139, 255, 0.35); box-shadow: inset 0 1px 0 0 var(--hairline-hi), 0 24px 60px -20px rgba(0,0,0,.7), 0 0 60px -25px var(--accent); }

.stats-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
.stat { text-align: center; padding: 22px 16px; }
.stat .num { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--text-hi); font-weight: 700; line-height: 1.1; }
.stat .num .accent { color: var(--accent-soft); }
.stat .lbl { font-size: 0.85rem; color: var(--text-low); margin-top: 6px; }

/* --------- cómo funciona (pasos) --------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: paso; }
.step { position: relative; display: flex; flex-direction: column; gap: 14px; counter-increment: paso; }
.step::before {
  content: "0" counter(paso);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.2em;
  color: var(--accent-soft); background: var(--accent-glow);
  width: fit-content; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(110,139,255,.3);
}
.step h3 { font-size: 1.2rem; }
.step p { font-size: 0.95rem; }
.step .gps {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--ok);
  background: rgba(6, 8, 20, 0.6); border: 1px solid var(--hairline-hi);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-top: auto;
}

/* --------- plataforma (features + screenshots) --------- */
.shot-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.shot-tab {
  font-family: var(--font-body); font-weight: 700; font-size: 0.86rem; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--hairline-hi);
  background: transparent; color: var(--text-mid); transition: all .2s;
}
.shot-tab:hover { color: var(--text-hi); }
.shot-tab.active { background: var(--accent); color: var(--bg-void); border-color: transparent; box-shadow: 0 0 30px -10px var(--accent); }
.shot-stage { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline-hi); box-shadow: 0 40px 90px -30px rgba(0,0,0,.85); position: relative; }
.shot-stage img { display: block; width: 100%; height: auto; }
.shot-stage img.hidden { display: none; }
.shot-caption { font-size: 0.85rem; color: var(--text-low); margin-top: 12px; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(32px, 5vw, 56px); }
.feature { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.feature .fic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-glow); color: var(--accent-soft); font-size: 1.3rem; border: 1px solid var(--hairline); }
.feature h3 { font-size: 1.08rem; }
.feature p { font-size: 0.92rem; color: var(--text-mid); }

/* --------- banda demo --------- */
.demo-band { position: relative; overflow: hidden; }
.demo-band .glass { border-color: rgba(52, 211, 153, 0.25); }
.demo-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.demo-inner .stack { gap: 10px; max-width: 560px; }

/* --------- Connect --------- */
.connect-hero { border-color: rgba(245, 166, 35, 0.3); box-shadow: inset 0 1px 0 0 var(--hairline-hi), 0 24px 60px -20px rgba(0,0,0,.7), 0 0 80px -30px var(--brand-orange-glow); }
.connect-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: center; }
/* Título de Connect ARRIBA, abarcando las dos columnas, cada oración en su
   línea (pedido dueño 07-12). En móvil vuelve a envolver. */
.connect-head { margin-bottom: clamp(20px, 3vw, 32px); }
.connect-head .h2 { white-space: nowrap; }
@media (max-width: 640px) { .connect-head .h2 { white-space: normal; text-wrap: balance; } }
.proto-list { display: flex; flex-direction: column; gap: 14px; }
.proto { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: rgba(6, 8, 20, 0.45); }
.proto .pic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-orange-glow); color: var(--brand-orange); font-size: 1.1rem; border: 1px solid rgba(245,166,35,.25); }
.proto h4 { font-size: 0.98rem; }
.proto p { font-size: 0.86rem; color: var(--text-mid); }

/* --------- parrilla comercial --------- */
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 16px; padding: 26px 24px; position: relative; }
/* Vida al pasar el mouse: la tarjeta se eleva/amplía y enciende el resplandor
   naranja del destacado — en CUALQUIER plan (pedido del dueño 07-12).
   .plans-grid .plan gana especificidad sobre la transition de .reveal
   (conserva opacity .6s para no romper el reveal on-scroll). */
.plans-grid .plan {
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .28s ease,
              box-shadow .28s ease, border-color .28s ease;
}
.plans-grid .plan:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: rgba(245, 166, 35, 0.45);
  box-shadow: inset 0 1px 0 0 var(--hairline-hi), 0 30px 70px -22px rgba(0,0,0,.8), 0 0 70px -22px var(--brand-orange);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .plans-grid .plan, .plans-grid .plan:hover { transform: none; } }
.plan .plan-head { display: flex; flex-direction: column; gap: 8px; min-height: 118px; }
.plan h3 { font-size: 1.15rem; }
.plan .plan-sub { font-size: 0.86rem; color: var(--text-low); }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; }
.plan li::before { content: "✓"; color: var(--ok); font-weight: 700; flex: none; }
.plan .btn { margin-top: 8px; }
/* El destacado conserva borde + ribbon; su resplandor ahora vive en :hover (de todos). */
.plan-featured { border-color: rgba(245, 166, 35, 0.4); }
.plan-featured .ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; max-width: calc(100% - 24px);
  background: #2B1F0A; box-shadow: 0 0 20px -6px var(--brand-orange);
}

.integrators { margin-top: 18px; }
.integrators .glass { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 26px; }

/* --------- comparativa --------- */
.table-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--hairline); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; background: rgba(17, 23, 41, 0.5); }
.compare th, .compare td { padding: 16px 20px; text-align: left; font-size: 0.92rem; border-bottom: 1px solid var(--hairline); }
.compare thead th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); background: rgba(6, 8, 20, 0.5); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td.gf { color: var(--text-hi); }
.compare td .yes { color: var(--ok); }
.compare td .no { color: var(--danger); }
.compare th.gf-col { color: var(--accent-soft); }
.compare-note { font-size: 0.8rem; color: var(--text-low); margin-top: 12px; }

/* --------- FAQ --------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
details.faq { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: rgba(17, 23, 41, 0.5); overflow: hidden; transition: border-color .2s; }
details.faq[open] { border-color: rgba(110, 139, 255, 0.35); }
details.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 1rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent-soft); font-size: 1.2rem; transition: transform .2s; flex: none; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq-body { padding: 0 22px 20px; font-size: 0.94rem; color: var(--text-mid); }
details.faq .faq-body a { color: var(--accent-soft); }

/* --------- contacto --------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
.contact-aside { display: flex; flex-direction: column; gap: 18px; }
.contact-aside .pill { width: fit-content; }
.contact-aside .h2 { white-space: nowrap; font-size: clamp(1.5rem, 2.3vw, 2.2rem); }
.form-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

.field { display: flex; flex-direction: column; gap: 8px; }
.label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-low); }
.input, .select, .textarea {
  width: 100%; background: rgba(6, 8, 20, 0.6); border: 1px solid var(--hairline-hi);
  border-radius: var(--radius-sm); padding: 13px 16px; color: var(--text-hi); font-family: var(--font-body); font-size: 0.96rem;
  transition: border-color .2s, box-shadow .2s; outline: none;
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-low) 50%), linear-gradient(135deg, var(--text-low) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.select option { background: var(--bg-elevated); color: var(--text-hi); }
.input::placeholder, .textarea::placeholder { color: var(--text-low); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-note { font-size: 0.78rem; color: var(--text-low); }
.form-status { display: none; padding: 13px 16px; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 600; }
.form-status.ok { display: block; background: rgba(52, 211, 153, 0.12); color: var(--ok); border: 1px solid rgba(52, 211, 153, 0.3); }
.form-status.err { display: block; background: rgba(251, 113, 133, 0.12); color: var(--danger); border: 1px solid rgba(251, 113, 133, 0.3); }
/* honeypot fuera de vista (no display:none — algunos bots lo detectan) */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* --------- footer (con traza de reflectometría "en vivo" de fondo) --------- */
/* Separación del footer (pedido dueño 07-12): "línea de pulso óptico" — un
   hairline con gradiente cian→naranja y glow, recorrido por un pulso de luz
   (como el pulso del SIRFO viaja por la fibra). El fondo del footer se oscurece
   levemente para leerse como zona propia sobre la señal de reflectometría. */
.footer {
  position: relative; overflow: hidden; border-top: none;
  padding: 54px 0 36px; color: var(--text-low); font-size: 0.88rem;
  margin-top: clamp(48px, 7vw, 96px);
  background: linear-gradient(180deg, rgba(4, 6, 16, 0.55) 0%, rgba(4, 6, 16, 0.9) 100%);
}
.footer::before { /* la línea */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%, rgba(56, 189, 248, 0) 6%, rgba(56, 189, 248, 0.75) 30%,
    var(--brand-orange) 50%, rgba(56, 189, 248, 0.75) 70%,
    rgba(56, 189, 248, 0) 94%, transparent 100%);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4), 0 0 34px -6px var(--brand-orange-glow);
}
.footer::after { /* el pulso que la recorre */
  content: ""; position: absolute; top: -3px; left: -10%; width: 84px; height: 8px; z-index: 3;
  border-radius: 999px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 220, 150, 0.95), rgba(245, 166, 35, 0.55) 45%, transparent 75%);
  filter: blur(1px);
  animation: gf-pulso-footer 6s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes gf-pulso-footer { from { left: -10%; } to { left: 105%; } }
@media (prefers-reduced-motion: reduce) { .footer::after { display: none; } }
.footer > .wrap { position: relative; z-index: 1; }
/* Señal de reflectometría del footer RETIRADA (pedido dueño 07-12): fondo
   limpio; la separación la da la línea de pulso óptico de arriba. */
.footer-scope { display: none; }
.footer-brand img { transition: transform .22s cubic-bezier(.2,.7,.2,1), filter .25s; }
.footer-brand img:hover { transform: scale(1.02); filter: drop-shadow(0 0 20px rgba(110, 139, 255, 0.45)); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; align-items: start; }
.footer-brand img { width: min(430px, 100%); height: auto; margin-bottom: 18px; }
.footer h4 { font-size: 0.8rem; font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); font-weight: 500; margin-bottom: 14px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: var(--text-mid); transition: color .2s; }
.footer a:hover { color: var(--text-hi); }
.footer-legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.8rem; }

/* --------- animaciones on-scroll --------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .dot.pulse { animation: none; }
  .hero-shot .frame { transform: none; transition: none; }
}

/* --------- responsive --------- */
/* El nav con 6 links + botón no cabe entre 860 y ~1160px → colapsa antes a burger
   (el botón "Acceder al NOC" sigue visible hasta 860px). */
@media (max-width: 1160px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 1024px) {
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-burger { display: inline-flex; }
  .nav { gap: 10px; }
  .brand { gap: 7px; }
  .brand img { height: 18px; max-width: 32vw; object-fit: contain; object-position: left center; }
  .brand .brand-icon { height: 34px; width: 34px; border-radius: 8px; }
  .lang-switch a { padding: 5px 9px; }
  .nav-burger { width: 38px; height: 38px; }
  .hero { padding-top: 104px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-shot .frame { transform: none; }
  .vs-grid, .steps, .connect-grid, .contact-grid { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .plans-grid, .features-grid { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
  .demo-inner { flex-direction: column; align-items: flex-start; }
}