/* ============================================================
   LAYOUT — page shell: header/nav, hero, section scaffolding, footer
   ============================================================ */

#vx-root{
  position:relative;
  min-height:100vh;
  background:radial-gradient(1200px 800px at 50% -10%, #0b1226 0%, var(--bg) 60%);
  overflow-x:hidden;
}

#vx-stars{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

/* ---------- Header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%;
  min-height:72px;
  box-sizing:border-box;
  padding:16px 40px;
  background:rgba(5,6,14,0.82);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}

.logo{ display:flex; align-items:center; gap:12px; color:var(--text-primary); flex:0 0 auto }
.logo-svg{ height:26px; width:auto; max-width:132px; display:block }

nav.main-nav{
  display:flex; align-items:center; gap:26px;
  flex:1 1 auto; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
}
nav.main-nav a{ color:var(--text-tertiary) }
nav.main-nav a:hover, nav.main-nav a:focus-visible{ color:#fff }

.nav-toggle{ display:none }

@media (max-width: 860px){
  header{ min-height:68px; padding:12px 16px; gap:10px }
  .logo-svg{ height:24px; max-width:112px }
  nav.main-nav{ display:none }

  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:8px;
    border:1px solid var(--border-strong); background:var(--panel-2);
    cursor:pointer; flex:none;
  }
  .nav-toggle span{ display:block; width:16px; height:2px; background:var(--text-secondary); position:relative }
  .nav-toggle span::before, .nav-toggle span::after{
    content:''; position:absolute; left:0; width:16px; height:2px;
    background:var(--text-secondary); transition:transform .2s ease;
  }
  .nav-toggle span::before{ top:-5px }
  .nav-toggle span::after{ top:5px }

  .mobile-nav{
    position:fixed; top:68px; left:0; right:0; z-index:999;
    display:flex; flex-direction:column; gap:2px;
    max-height:0; overflow:hidden;
    background:rgba(5,6,14,0.96); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-soft);
    transition:max-height .25s ease;
  }
  .mobile-nav.open{ max-height:320px }
  .mobile-nav a{
    font-family:var(--mono); font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--text-secondary); padding:16px 24px; border-top:1px solid var(--border-soft);
  }
  .mobile-nav a:hover, .mobile-nav a:focus-visible{ color:#fff }
}
@media (min-width:861px){ .mobile-nav{ display:none } }

@media (max-width: 520px){
  header{ min-height:64px; padding:10px 12px }
  .logo-svg{ height:22px; max-width:98px }
  .mobile-nav{ top:64px }
}

/* ---------- Hero ---------- */
#inicio{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:78px 20px 90px;
}

.hero-art{
  position:relative; width:460px; height:380px; max-width:88vw;
  display:flex; align-items:center; justify-content:center;
  animation:vxFloat 7s ease-in-out infinite;
}
.hero-deco{ position:absolute; display:block }
.hero-deco.d1{ left:-10px; top:44px; width:120px; height:120px; transform:rotate(45deg); border:1px solid rgba(140,170,255,0.28); border-radius:14px }
.hero-deco.d2{ right:6px; bottom:50px; width:76px; height:76px; transform:rotate(45deg); border:1px solid rgba(140,170,255,0.18); border-radius:10px }
.hero-deco.d3{ right:40px; top:6px; width:14px; height:14px; transform:rotate(45deg); background:var(--accent); border-radius:3px; box-shadow:0 0 14px rgba(59,130,246,.6) }
.hero-glow{
  position:absolute; width:60%; height:60%; border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,0.35) 0%, rgba(59,130,246,0.08) 55%, transparent 75%);
  filter:blur(6px); z-index:0;
}
.hero-photo{
  display:block;
  max-width:100%; max-height:100%; width:auto; height:auto;
  position:relative; z-index:1;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));
}

.hero-eyebrow{
  margin:52px 0 0; max-width:640px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); line-height:1.5;
}
h1.hero-title{ margin:18px 0 0; font-size:clamp(32px,6vw,58px); line-height:1.1; font-weight:700; max-width:820px }
h1.hero-title .accent{ color:var(--accent) }
.hero-sub{ margin:22px 0 0; max-width:580px; font-size:16px; line-height:1.7; color:var(--text-secondary) }
.hero-cta-row{ margin-top:40px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center }
.hero-cta-row .btn-panel{ margin-top:0 }
.hero-microcopy{ margin:20px 0 0; max-width:440px; font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--text-muted) }

@media (max-width: 520px){
  #inicio{ padding:42px 16px 72px }
  .hero-art{
    width:min(330px, 92vw);
    height:260px;
    max-width:none;
  }
  .hero-photo{
    max-width:94%;
    max-height:240px;
  }
  .hero-eyebrow{ margin-top:28px }
}

/* ---------- Section shell ---------- */
section{ position:relative; z-index:1; scroll-margin-top:92px }
.section-inner{ max-width:1080px; margin:0 auto; padding:0 24px }
h2.section-title{ font-size:clamp(24px,4vw,32px); font-weight:700; margin:0 0 8px }
.section-sub{ margin:0 0 40px; color:var(--text-tertiary); font-size:14px; font-family:var(--mono) }

#ecosistema{ padding:70px 0 40px }
#metodologia{ padding:60px 0 40px }
#trabajos{ padding:70px 0 }
#equipo{ padding:50px 0 70px }
#mision{ padding:60px 24px }
#vendemos{ padding:40px 0 60px }
#contacto{ padding:60px 20px 100px }

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--border-soft);
  background:rgba(8,10,20,0.8);
  padding:40px 24px 24px;
}
.footer-inner{
  max-width:1080px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-start; gap:28px; flex-wrap:wrap;
}
.footer-tagline{ margin:8px 0 0; font-size:13px; color:var(--text-tertiary); max-width:320px; line-height:1.6 }
.footer-contact{
  text-align:right; font-family:var(--mono); font-size:12px; color:var(--text-tertiary);
  display:flex; flex-direction:column; gap:8px;
}
.footer-contact .label{ color:var(--text-secondary); letter-spacing:0.1em; text-transform:uppercase }
.footer-bottom{
  max-width:1080px; margin:28px auto 0; padding-top:18px;
  border-top:1px solid var(--border-soft);
  font-family:var(--mono); font-size:10px; color:var(--text-muted);
  text-align:center; letter-spacing:0.05em;
}