:root {
  --color-primary: #00AEEF;
  --color-deep: #001b3f;
  --color-white: #ffffff;
  --color-text: rgba(255, 255, 255, 0.92);
  --color-text-soft: rgba(255, 255, 255, 0.78);

  --header-base: rgba(2, 13, 28, 0.84);
  --header-scrolled: rgba(2, 13, 28, 0.94);

  --overlay-base: rgba(0, 12, 28, 0.34);
  --overlay-strong: rgba(0, 18, 40, 0.80);

  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.28);
  --shadow-button: 0 10px 30px rgba(0, 174, 239, 0.22);
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.34);

  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;

  --nav-height: 82px;
  --container-width: 1440px;
  --content-width: 640px;

  --transition-fast: 220ms ease;
  --transition-base: 320ms ease;
  --transition-slow: 1000ms ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  background: #06111f;
  color: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 4000;
  background: var(--header-base);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.7),
    inset 0 0 12px rgba(0,0,0,0.5),
    inset 0 0 30px rgba(0,20,40,0.3);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 45%, rgba(9, 92, 128, 0.14), transparent 24%),
    radial-gradient(circle at 82% 32%, rgba(9, 92, 128, 0.10), transparent 22%);
  pointer-events: none;
}

.site-header.scrolled {
  background: var(--header-scrolled);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.nav-wrap {
  position: relative;
  z-index: 2;
  max-width: var(--container-width);
  min-height: var(--nav-height);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 174, 239, 0.22));
}

.brand-nombre {
  height: 22px;
  width: auto;
  object-fit: contain;
  margin-left: 10px;
  /* nombre.png tiene fondo blanco — screen lo elimina sobre fondos oscuros */
  mix-blend-mode: screen;
  filter: drop-shadow(0 1px 6px rgba(0,174,239,0.18));
}

/* Desktop nav */

.nav-desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-link {
  padding: 10px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  font-weight: 600;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.96rem;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.nav-cta,
.btn-primary,
.mobile-menu-cta {
  background: var(--color-primary);
  color: #04131f;
  box-shadow: var(--shadow-button);
}

.btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
}

.nav-cta:hover,
.btn:hover,
.floating-wa:hover,
.mobile-menu-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.nav-cta-desktop {
  display: inline-flex;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(120, 225, 255, 0.18);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 260ms ease, opacity 260ms ease;
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu */

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(1, 8, 16, 0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 260ms ease;
  z-index: 4050;
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu {
  position: fixed;
  top: calc(var(--nav-height) + 12px);
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 4090;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(0.985);
  transition: opacity 280ms ease, visibility 280ms ease, transform 280ms ease;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.mobile-menu[hidden],
.mobile-menu-overlay[hidden] {
  display: none !important;
}

.mobile-menu-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 22px 18px 18px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background-image: url("../img/menu-mobile-bg.jpg");
  background-size: cover;
  background-position: center;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.mobile-menu-header,
.mobile-menu-nav,
.mobile-menu-cta {
  position: relative;
  z-index: 2;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 174, 239, 0.22));
}

.menu-close {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.mobile-menu-nav {
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 2px;
}

.mobile-menu-link {
  min-height: 52px;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.96);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
}

.mobile-menu-link.active {
  background: rgba(255,255,255,0.14);
}

.mobile-menu-cta {
  min-height: 56px;
  width: 100%;
  padding: 0 18px;
  border-radius: 16px;
}

/* Sections */

.section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + 56px) 8vw 72px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
  isolation: isolate;
}

.section::before,
.section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section::before {
  background: var(--overlay-base);
  z-index: 0;
}

.section.text-left::after {
  background: linear-gradient(
    90deg,
    var(--overlay-strong) 0%,
    rgba(0, 18, 40, 0.58) 24%,
    rgba(0, 18, 40, 0.18) 48%,
    rgba(0, 18, 40, 0) 72%
  );
  z-index: 0;
}

.section.text-right::after {
  background: linear-gradient(
    270deg,
    var(--overlay-strong) 0%,
    rgba(0, 18, 40, 0.58) 24%,
    rgba(0, 18, 40, 0.18) 48%,
    rgba(0, 18, 40, 0) 72%
  );
  z-index: 0;
}

.section-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
}

.section.text-left .section-inner {
  justify-content: flex-start;
}

.section.text-right .section-inner {
  justify-content: flex-end;
}

.content-box {
  width: min(var(--content-width), 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 34px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.content-box-wide {
  width: min(760px, 100%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
}

h1,
h2,
h3 {
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 800;
  max-width: 12ch;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 800;
  max-width: 14ch;
}

h3 {
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  font-weight: 700;
}

.content-box p {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  color: var(--color-text);
  max-width: 62ch;
}

.feature-list {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.feature-list li {
  position: relative;
  padding-left: 28px;
  color: var(--color-text);
  font-size: clamp(0.98rem, 1.08vw, 1.06rem);
}

.feature-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 800;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 4px;
}

.mini-card {
  padding: 18px 18px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.mini-list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.mini-list li {
  position: relative;
  padding-left: 22px;
  color: var(--color-text);
  font-size: 0.96rem;
}

.mini-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1;
}

.contact-lines {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.contact-lines a,
.contact-lines span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--color-text);
}

.contact-lines strong {
  color: var(--color-white);
}

.floating-wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 3000;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1ee66a 0%, #11b955 100%);
  box-shadow: 0 4px 18px rgba(18, 185, 85, 0.45), 0 18px 40px rgba(0,0,0,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-wa:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(18, 185, 85, 0.6), 0 20px 44px rgba(0,0,0,0.32);
}

.floating-wa svg {
  width: 36px;
  height: 36px;
  display: block;
}

.site-footer {
  padding: 22px 8vw 34px;
  background: #05111f;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--color-text-soft);
  font-size: 0.92rem;
}

.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.15s ease, transform 1.15s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Background images */

.section-inicio {
  background-image: url("../img/inicio.jpg");
}
.section-servicios {
  background-image: url("../img/servicios.jpg");
}
.section-particulares {
  background-image: url("../img/particulares.jpg");
}
.section-empresas {
  background-image: url("../img/empresas.jpg");
}
.section-soluciones {
  background-image: url("../img/soluciones.jpg");
}
.section-remoto {
  background-image: url("../img/remoto.jpg");
}
.section-forma {
  background-image: url("../img/forma-trabajo.jpg");
}
.section-contacto {
  background-image: url("../img/contacto.jpg");
}

/* Responsive */

@media (max-width: 1180px) {
  .nav-desktop,
  .nav-cta-desktop {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }
}

@media (min-width: 1181px) {
  .mobile-menu,
  .mobile-menu-overlay {
    display: none;
  }
}

@media (max-width: 900px) {
  .section {
    min-height: auto;
    background-attachment: scroll;
    padding: calc(var(--nav-height) + 42px) 20px 48px;
  }

  .content-box,
  .content-box-wide {
    width: 100%;
    padding: 26px 22px;
    gap: 16px;
    border-radius: 22px;
  }

  h1,
  h2 {
    max-width: none;
  }

  .split-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-inicio {
    background-image: url("../img/inicio-mobile.jpg");
  }
  .section-servicios {
    background-image: url("../img/servicios-mobile.jpg");
  }
  .section-particulares {
    background-image: url("../img/particulares-mobile.jpg");
  }
  .section-empresas {
    background-image: url("../img/empresas-mobile.jpg");
  }
  .section-soluciones {
    background-image: url("../img/soluciones-mobile.jpg");
  }
  .section-remoto {
    background-image: url("../img/remoto-mobile.jpg");
  }
  .section-forma {
    background-image: url("../img/forma-trabajo-mobile.jpg");
  }
  .section-contacto {
    background-image: url("../img/contacto-mobile.jpg");
  }
}

@media (max-width: 640px) {
  :root {
    --nav-height: 72px;
  }

  .brand-logo {
    width: 38px;
    height: 38px;
  }

  .cta-row {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .floating-wa {
    width: 58px;
    height: 58px;
    right: 16px;
    bottom: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP FULLSCREEN MENU — ByteFix Circuit Menu
   All rules namespaced with .fs- or .circuit- to avoid conflicts.
   Mobile styles deliberately untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Circuit hamburger button ─────────────────────────────────────── */

.circuit-menu-btn {
  display: none; /* shown via media query below */
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.9);
  padding: 6px 4px;
  transition: color var(--transition-fast);
}

.circuit-menu-btn:hover {
  color: var(--color-primary);
}

.circuit-btn-svg {
  width: 36px;
  height: 28px;
  transition: transform var(--transition-fast);
  overflow: visible;
}

.circuit-menu-btn:hover .circuit-btn-svg {
  transform: scale(1.05);
}

.circuit-btn-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-primary);
}

/* Active (open) state — morph to X */
.circuit-menu-btn.active .circuit-btn-svg line:nth-child(1) {
  transform-origin: 14px 4px;
  transform: rotate(45deg) scaleX(0.85);
  transition: transform 300ms ease;
}
.circuit-menu-btn.active .circuit-btn-svg line:nth-child(2) {
  opacity: 0;
  transition: opacity 200ms ease;
}
.circuit-menu-btn.active .circuit-btn-svg line:nth-child(3) {
  transform-origin: 14px 24px;
  transform: rotate(-45deg) scaleX(0.85);
  transition: transform 300ms ease;
}
.circuit-menu-btn.active .circuit-btn-svg circle {
  opacity: 0;
  transition: opacity 200ms ease;
}

/* ── Fullscreen overlay — wrapper + inner container ────────────────── */

/* Wrapper: ocupa todo el viewport, centra el inner */
.fs-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1),
              visibility 0.45s cubic-bezier(0.4,0,0.2,1);
}

/* Inner: aspect-ratio 1672:941 fijo, todo vive aquí */
.fs-overlay-inner {
  position: relative;
  width:  min(100vw, calc(100vh * 1672 / 941));
  height: min(100vh, calc(100vw * 941 / 1672));
  background-image: url("../img/menu-bg-mother.jpg");
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: none;
}

/* Dark overlay encima del fondo */
.fs-overlay-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(1, 8, 18, 0.72);
  z-index: 0;
  pointer-events: none;
}

.fs-menu-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* ── Close button ──────────────────────────────────────────────────── */

.fs-close-btn {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 10;
  width: 44px;
  height: 44px;
  background: rgba(9,92,128,0.15);
  border: 1px solid rgba(9,92,128,0.4);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  backdrop-filter: blur(8px);
}

.fs-close-btn svg {
  width: 20px;
  height: 20px;
}

.fs-close-btn:hover {
  background: rgba(9,92,128,0.35);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Logo top ──────────────────────────────────────────────────────── */

.fs-logo-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 40px 0;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}

.fs-menu-overlay.open .fs-logo-top {
  opacity: 1;
  transform: translateY(0);
}

.fs-logo-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0,174,239,0.4));
}

.fs-logo-nombre {
  height: 26px;
  width: auto;
  object-fit: contain;
}

/* ── Fullscreen traces SVG overlay ─────────────────────────────── */

.fs-traces-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── Main layout ──────────────────────────────────────────────────── */
/* Nav stays in a narrow left column (before the motherboard).
   Screen is positioned absolutely on the right side of the overlay,
   past the right edge of the motherboard photo. */

.fs-content {
  position: relative;
  z-index: 2;
  /* Must fill full overlay height so absolutely-positioned nav children
     can use top values that match SVG cy coordinates (which are in viewport px). */
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 0;
  max-width: 1440px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
/* ── Nav links (left column) ──────────────────────────────────────── */

.fs-nav {
  /* Direct child of the fixed overlay (inset:0), so position:absolute
     coordinates map 1:1 with SVG viewBox at 1440px viewport.
     width=315px = pad cx. padding-left=28px → link width=287px.
     ::after left:0 width:100% → right edge at 28+287=315px = pad cx ✓ */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 315px;
  padding-left: 28px;
  pointer-events: none;
  z-index: 6;
}

.fs-nav-list {
  list-style: none;
  position: relative;
  width: 287px;
  height: 100%;
}

.fs-nav-item {
  position: absolute;
  /* top is set dynamically by JS (alignNavToPads) reading real SVG pad positions */
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: auto;
}

.fs-menu-overlay.open .fs-nav-item:nth-child(1) { opacity:1; transform:none; transition-delay:0.18s; }
.fs-menu-overlay.open .fs-nav-item:nth-child(2) { opacity:1; transform:none; transition-delay:0.23s; }
.fs-menu-overlay.open .fs-nav-item:nth-child(3) { opacity:1; transform:none; transition-delay:0.28s; }
.fs-menu-overlay.open .fs-nav-item:nth-child(4) { opacity:1; transform:none; transition-delay:0.33s; }
.fs-menu-overlay.open .fs-nav-item:nth-child(5) { opacity:1; transform:none; transition-delay:0.38s; }
.fs-menu-overlay.open .fs-nav-item:nth-child(6) { opacity:1; transform:none; transition-delay:0.43s; }
.fs-menu-overlay.open .fs-nav-item:nth-child(7) { opacity:1; transform:none; transition-delay:0.48s; }
.fs-menu-overlay.open .fs-nav-item:nth-child(8) { opacity:1; transform:none; transition-delay:0.53s; }

.fs-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 66px height = exact spacing between trace y-positions in SVG */
  height: 66px;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.85rem, 1.3vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.22s ease, text-shadow 0.22s ease;
  white-space: nowrap;
  overflow: visible;
  max-width: none;
}

.fs-nav-link::before {
  content: attr(data-label);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  opacity: 0.7;
  min-width: 22px;
  transition: opacity 0.22s ease;
}

.fs-nav-link::after {
  content: '';
  position: absolute;
  /* left:0 so underline starts at link left edge (x=28 in viewport).
     At width:100% it ends at x = 28 + 287 = 315px = pad cx exactly. */
  left: 0;
  bottom: 6px;
  height: 1.5px;
  width: 0;
  background: var(--color-primary);
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px rgba(0,174,239,0.6);
}

.fs-nav-link:hover,
.fs-nav-link.active {
  color: rgba(255,255,255,0.95);
}

.fs-nav-link:hover::before,
.fs-nav-link.active::before {
  opacity: 1;
}

.fs-nav-link:hover::after,
.fs-nav-link.active::after {
  width: 100%;
}

/* Electric pulse on nav link hover — keyframe defined below */
.fs-nav-link.pulsing {
  animation: fsNavPulse 0.35s ease forwards;
}

@keyframes fsNavPulse {
  0%   { text-shadow: none; }
  40%  { text-shadow: 0 0 18px rgba(0,174,239,0.9), 0 0 40px rgba(0,174,239,0.4); }
  100% { text-shadow: 0 0 6px rgba(0,174,239,0.3); }
}


/* Static trace — elegant solid line, dimmed when idle */
.fs-trace {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

/* When a trace is active, base trace brightens slightly */
.fs-trace.active-trace {
  opacity: 1;
  stroke: rgba(0, 174, 239, 0.5) !important;
}

/* Glow trace — invisible until active */
.fs-trace-glow {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.fs-trace-glow.running {
  opacity: 0.88;
  animation: tracePulse 2.5s ease-in-out infinite;
}

/* Sparkle — white traveling dot */
.fs-trace-sparkle {
  stroke: rgba(180,240,255,0.9);
  stroke-width: 4;
  /* Wider, softer pulse — more like energy flowing than a ping-pong ball */
  filter: drop-shadow(0 0 4px rgba(0,200,255,0.7)) drop-shadow(0 0 10px rgba(0,174,239,0.4));
  stroke-linecap: round;
  fill: none;
}

.fs-trace-sparkle.running {
  opacity: 1;
  animation: sparkleTravel 2s ease-in-out infinite;
  animation-delay: var(--sd, 0.4s);
}

@keyframes tracePulse {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}

@keyframes sparkleTravel {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 0.85; }
  100% { stroke-dashoffset: -800; opacity: 0; }
}

/* Pad glow on active */
.fs-pad {
  transition: fill 0.3s ease, filter 0.3s ease, stroke 0.3s ease;
}
.fs-pad.lit {
  fill: rgba(0,174,239,0.35) !important;
  stroke: #00AEEF !important;
  stroke-width: 2 !important;
  filter: drop-shadow(0 0 7px rgba(0,174,239,1));
}

/* Endpoint dots on collector bar */
.fs-endpoint {
  transition: fill 0.3s ease, filter 0.3s ease, stroke 0.3s ease;
}
.fs-endpoint.lit {
  fill: rgba(0,174,239,0.35) !important;
  stroke: #00AEEF !important;
  filter: drop-shadow(0 0 5px rgba(0,174,239,0.9));
}

/* ── Collector bar ────────────────────────────────────────────────── */

/* Output glow (cyan) — opacity set by JS */
#fsOutputGlow {
  opacity: 0;
  stroke: #00AEEF;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(0,174,239,0.9)) drop-shadow(0 0 8px rgba(0,174,239,0.5));
  transition: opacity 0.25s ease;
}
/* Output sparkle (white dot travelling right to screen) */
/* Output sparkle — animated entirely via JS rAF */
#fsOutputSparkle {
  opacity: 0;
  stroke: #ffffff;
  stroke-width: 5;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.8));
}

/* ── Video screen ──────────────────────────────────────────────────── */

.fs-screen-wrap {
  position: absolute;
  left: 68.15%;
  top: 22.6%;
  width: 20.05%;
  height: 39.05%;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 5;
  pointer-events: none;
}
/* Fade in when a section is active (JS adds .section-active to overlay) */
.fs-menu-overlay.open.section-active .fs-screen-wrap {
  opacity: 1;
}


.fs-screen-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(2,12,30,0.88);
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  /* Clip-path: rectangular with corner cuts (8px) + notches on each side
     Top/Bottom: 3 notches each | Left/Right: 4 notches each
     Notch: 5px wide, 6px deep — creates "connector bite" effect
     Going clockwise from top-left corner */
  clip-path: polygon(
    /* top-left corner cut */
    12px 0%,
    /* top edge: 3 notches at 22%, 50%, 78% — wider+deeper */
    calc(22% - 7px) 0%, calc(22% - 7px) 12px, calc(22% + 7px) 12px, calc(22% + 7px) 0%,
    calc(50% - 7px) 0%, calc(50% - 7px) 12px, calc(50% + 7px) 12px, calc(50% + 7px) 0%,
    calc(78% - 7px) 0%, calc(78% - 7px) 12px, calc(78% + 7px) 12px, calc(78% + 7px) 0%,
    /* top-right corner cut */
    calc(100% - 12px) 0%, 100% 12px,
    /* right edge: 4 notches at 20%, 40%, 60%, 80% */
    100% calc(20% - 7px), calc(100% - 12px) calc(20% - 7px), calc(100% - 12px) calc(20% + 7px), 100% calc(20% + 7px),
    100% calc(40% - 7px), calc(100% - 12px) calc(40% - 7px), calc(100% - 12px) calc(40% + 7px), 100% calc(40% + 7px),
    100% calc(60% - 7px), calc(100% - 12px) calc(60% - 7px), calc(100% - 12px) calc(60% + 7px), 100% calc(60% + 7px),
    100% calc(80% - 7px), calc(100% - 12px) calc(80% - 7px), calc(100% - 12px) calc(80% + 7px), 100% calc(80% + 7px),
    /* bottom-right corner cut */
    100% calc(100% - 12px), calc(100% - 12px) 100%,
    /* bottom edge: 3 notches at 78%, 50%, 22% */
    calc(78% + 7px) 100%, calc(78% + 7px) calc(100% - 12px), calc(78% - 7px) calc(100% - 12px), calc(78% - 7px) 100%,
    calc(50% + 7px) 100%, calc(50% + 7px) calc(100% - 12px), calc(50% - 7px) calc(100% - 12px), calc(50% - 7px) 100%,
    calc(22% + 7px) 100%, calc(22% + 7px) calc(100% - 12px), calc(22% - 7px) calc(100% - 12px), calc(22% - 7px) 100%,
    /* bottom-left corner cut */
    12px 100%, 0% calc(100% - 12px),
    /* left edge: 4 notches at 80%, 60%, 40%, 20% */
    0% calc(80% + 7px), 12px calc(80% + 7px), 12px calc(80% - 7px), 0% calc(80% - 7px),
    0% calc(60% + 7px), 12px calc(60% + 7px), 12px calc(60% - 7px), 0% calc(60% - 7px),
    0% calc(40% + 7px), 12px calc(40% + 7px), 12px calc(40% - 7px), 0% calc(40% - 7px),
    0% calc(20% + 7px), 12px calc(20% + 7px), 12px calc(20% - 7px), 0% calc(20% - 7px),
    0% 12px
  );
}

.fs-screen-frame::before { display: none; }

.fs-screen-frame::after { display: none; }

.fs-screen-topbar { display: none; }
.fs-screen-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.fs-screen-dot.red    { background: #ff5f57; }
.fs-screen-dot.yellow { background: #ffbd2e; }
.fs-screen-dot.green  { background: #28ca41; }

.fs-screen-label {
  margin-left: 8px;
  font-family: "Montserrat", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.8;
}

.fs-screen-inner {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Individual video/placeholder panels */
.fs-video-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: rgba(4,18,40,0.85);
}

.fs-video-panel.active {
  opacity: 1;
  pointer-events: auto;
}

/* Placeholder panel styling */
.fs-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

/* Grid pattern overlay on placeholder */
.fs-ph-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,174,239,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,174,239,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: gridDrift 12s linear infinite;
}

@keyframes gridDrift {
  from { background-position: 0 0; }
  to   { background-position: 32px 32px; }
}

.fs-ph-icon {
  position: relative;
  z-index: 1;
  font-size: 2.8rem;
  filter: drop-shadow(0 0 12px rgba(0,174,239,0.5));
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.fs-ph-name {
  position: relative;
  z-index: 1;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* Scanlines */
.fs-screen-scanlines { display: none; }

/* Screen reflection */
.fs-screen-reflection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
  border-radius: 2px 2px 0 0;
}

/* Monitor stand */
.fs-monitor-stand { display: none; }

.fs-stand-neck { display: none; }

.fs-stand-base { display: none; }

/* ── Footer info line ──────────────────────────────────────────────── */

.fs-footer-line {
  position: absolute;
  z-index: 2;
  left: 78.175%;
  transform: translateX(-50%);
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease 0.55s;
}

.fs-menu-overlay.open .fs-footer-line {
  opacity: 1;
}

.fs-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.fs-footer-link svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.fs-footer-link:hover {
  color: var(--color-primary);
}

.fs-footer-sep {
  color: rgba(255,255,255,0.2);
  font-size: 0.8rem;
}

/* ── Show circuit button on desktop, hide on mobile ──────────────── */

@media (min-width: 1181px) {
  .circuit-menu-btn {
    display: inline-flex;
  }
  /* Hide the old desktop nav (it no longer exists in HTML, but safety rule) */
  .nav-desktop {
    display: none;
  }
}

@media (max-width: 1180px) {
  .circuit-menu-btn {
    display: none;
  }
  .fs-menu-overlay {
    display: none !important; /* fullscreen menu is desktop-only */
  }
}

/* Reduce font size for smaller desktops */
@media (max-width: 1300px) {
  .fs-nav-link {
    font-size: clamp(0.88rem, 1.4vw, 1.3rem);
    height: 60px;
  }
  .fs-screen-wrap {
    left: 62%;
  }
  .fs-screen-frame {
    width: 400px;
    max-width: 400px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT HIGHLIGHT SPRITE LAYER
   Image: img/menu-components-glow.png — transparent PNG, 1672×941px
   Coordinates measured pixel-by-pixel from the actual PNG alpha channel.
   No mix-blend-mode needed — image already has transparent background.
   ═══════════════════════════════════════════════════════════════════ */

.fs-hl-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.fs-hl-chip {
  position: absolute;
  inset: 0;
  background-image: url("../img/menu-components-glow.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  opacity: 0;
  will-change: opacity, filter;
}

/* Active: fade in dimly first, then scanline brightens top→bottom via filter animation */
.fs-hl-chip.active {
  opacity: 0;
  animation:
    chipReveal  0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    chipPulse   2.6s ease-in-out 0.65s infinite;
}

/* ── Scanline reveal ──────────────────────────────────────────────────
   Component fades in dark, then a brightness wave sweeps through it
   top-to-bottom via a mask-image gradient that animates its position.
   The bright leading edge simulates a scan head moving down.
──────────────────────────────────────────────────────────────────── */
@keyframes chipReveal {
  0%   {
    opacity: 1;
    filter: brightness(0.1) saturate(0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 0%, transparent 0%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 0%, transparent 0%);
  }
  15%  {
    filter: brightness(2.5) saturate(1.8);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #fff 14%, rgba(255,255,255,0.15) 20%, transparent 20%);
    mask-image: linear-gradient(to bottom, #000 0%, #fff 14%, rgba(255,255,255,0.15) 20%, transparent 20%);
  }
  35%  {
    filter: brightness(2.8) saturate(2);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #fff 34%, rgba(255,255,255,0.15) 42%, transparent 42%);
    mask-image: linear-gradient(to bottom, #000 0%, #fff 34%, rgba(255,255,255,0.15) 42%, transparent 42%);
  }
  55%  {
    filter: brightness(2.5) saturate(1.6);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #fff 54%, rgba(255,255,255,0.15) 62%, transparent 62%);
    mask-image: linear-gradient(to bottom, #000 0%, #fff 54%, rgba(255,255,255,0.15) 62%, transparent 62%);
  }
  78%  {
    filter: brightness(2) saturate(1.3);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #fff 77%, rgba(255,255,255,0.15) 85%, transparent 85%);
    mask-image: linear-gradient(to bottom, #000 0%, #fff 77%, rgba(255,255,255,0.15) 85%, transparent 85%);
  }
  100% {
    opacity: 1;
    filter: brightness(1.1) saturate(1.1);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #fff 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #fff 100%);
  }
}

/* ── Stable pulse after scan settles ─────────────────────────────── */
@keyframes chipPulse {
  0%   { opacity: 0.80; filter: brightness(1)    drop-shadow(0 0 4px  rgba(0,174,239,0.5)); }
  50%  { opacity: 1;    filter: brightness(1.25) drop-shadow(0 0 12px rgba(0,174,239,0.9)); }
  100% { opacity: 0.80; filter: brightness(1)    drop-shadow(0 0 4px  rgba(0,174,239,0.5)); }
}


/* ── Pixel-perfect clip-paths (measured from 1672×941px PNG) ─────────
   inset(top% right% bottom% left%)
   Sprite and overlay share identical dimensions → percentages map 1:1.
─────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   COMPONENT HIGHLIGHTS — clip-path only (no transform)
   Sprite is already aligned with the background.
   inset(top% right% bottom% left%) — adjust to fine-tune each component.
   Measured from the 1672×941px PNG alpha channel.
══════════════════════════════════════════════════════════════ */

/* INICIO — CPU socket */
.fs-hl-chip[data-section="inicio"] {
  clip-path: inset(27.3% 54.5% 51.9% 35.9% round 3px);
}

/* SERVICIOS — RAM slots */
.fs-hl-chip[data-section="servicios"] {
  clip-path: inset(19.0% 46.8% 42.4% 46.8% round 3px);
}

/* PARTICULARES — VRM heatsink */
.fs-hl-chip[data-section="particulares"] {
  clip-path: inset(19.2% 69.4% 48.2% 23.4% round 3px);
}

/* EMPRESAS — PCIe + M.2 heatsink bar */
.fs-hl-chip[data-section="empresas"] {
  clip-path: inset(52.4% 56.2% 40.1% 26.3% round 3px);
}

/* SOLUCIONES — TUF chipset heatsink */
.fs-hl-chip[data-section="soluciones"] {
  clip-path: inset(61.0% 43.9% 20.5% 46.2% round 3px);
}

/* REMOTO — Power connector */
.fs-hl-chip[data-section="remoto"] {
  clip-path: inset(28.6% 41.8% 53.9% 54.2% round 3px);
}
.fs-hl-chip[data-section="remoto"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  clip-path: inset(5% 36% 80% 33% round 3px);
  animation: inherit;
}
/* CÓMO TRABAJAMOS — M.2 long slot */
.fs-hl-chip[data-section="como-trabajamos"] {
  clip-path: inset(84.0% 55.0% 10.05% 27.8% round 3px);
}

/* CONTACTO — Front panel / SATA */
.fs-hl-chip[data-section="contacto"] {
  clip-path: inset(88.5% 47.3% 6.3% 45.2% round 3px);
}




/* ═══════════════════════════════════════════════════════════════════
   TRACE ANIMATIONS — restored
   Glow trace pulses while active; sparkle dot travels the path.
   ═══════════════════════════════════════════════════════════════════ */

.fs-trace-glow.running {
  opacity: 0.88 !important;
  animation: tracePulse 2.5s ease-in-out infinite;
}

@keyframes tracePulse {
  0%,100% { opacity: 0.72; }
  50%      { opacity: 1;    }
}

.fs-trace-sparkle.running {
  opacity: 1 !important;
  animation: sparkleTravel 2.2s ease-in-out infinite;
  animation-delay: var(--sd, 0.4s);
}

@keyframes sparkleTravel {
  0%   { stroke-dashoffset: 0;    opacity: 0;   }
  8%   { opacity: 1; }
  88%  { opacity: 0.85; }
  100% { stroke-dashoffset: -900; opacity: 0;   }
}