/* ============================================================
   Line by Fraxuo — layout.css  (wrap, nav, secciones, footer)
   ============================================================ */

.line-wrap{ width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto; }

section{ position:relative; padding-block:var(--pad-sec); }

/* ---------- Nav ---------- */
.line-nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:1.4rem;
  padding:1rem clamp(1.2rem,3vw,2.4rem);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.line-nav.is-stuck{
  background:rgba(10,14,22,.72); backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--linea-debil); padding-block:.7rem;
}
.line-nav__brand{ display:flex; align-items:baseline; gap:.6rem; margin-right:auto; transition:transform .25s var(--ease); }
.line-nav__brand:hover{ transform:translateY(-1px); }
.line-nav__logo{
  width:18px; height:18px; align-self:center; border-radius:5px;
  background:var(--grad-voz); box-shadow:0 0 18px rgba(77,107,255,.55);
  position:relative; flex:none; transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.line-nav__logo::after{ content:""; position:absolute; inset:5px; border-radius:2px; background:var(--abismo); }
.line-nav__brand:hover .line-nav__logo{ box-shadow:0 0 26px rgba(77,107,255,.85); transform:scale(1.06) rotate(-3deg); }
.line-nav__name{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:-.02em; background:var(--grad-voz); -webkit-background-clip:text; background-clip:text; color:transparent; }
.line-nav__by{ font-family:var(--font-mono); font-size:.66rem; color:var(--color-muted); letter-spacing:.1em; }
.line-nav__links{ display:flex; gap:2rem; }
.line-nav__links a{ font-size:.95rem; color:var(--color-muted); position:relative; transition:color .25s; }
.line-nav__links a:hover{ color:var(--color-text); }
.line-nav__links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--grad-voz); transition:width .3s var(--ease); }
.line-nav__links a:hover::after,
.line-nav__links a.is-current::after{ width:100%; }
.line-nav__links a.is-current{ color:var(--color-text); }
.line-nav__burger{ display:none; background:none; border:0; cursor:pointer; width:34px; height:34px; flex-direction:column; gap:6px; justify-content:center; align-items:center; }
.line-nav__burger span{ width:22px; height:2px; background:var(--color-text); transition:transform .3s var(--ease), opacity .3s; }
.line-nav.is-open .line-nav__burger span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.line-nav.is-open .line-nav__burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* ---------- Footer ---------- */
.line-foot{ border-top:1px solid var(--linea-debil); padding-block:clamp(3rem,5vw,5rem) 2rem; background:var(--noche-senal); }
.line-foot__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2rem; padding-bottom:3rem; }
.line-foot__brand{ display:flex; flex-direction:column; gap:1rem; }
.line-foot__claim{ font-family:var(--font-display); font-size:1.3rem; max-width:18ch; line-height:1.2; }
.line-foot__col h4{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--color-muted); margin-bottom:1rem; font-weight:400; }
.line-foot__col a{ display:block; color:var(--color-muted); padding:.32rem 0; font-size:.95rem; transition:color .2s; }
.line-foot__col a:hover{ color:var(--color-text); }
.line-foot__bottom{ display:flex; justify-content:space-between; gap:1rem; padding-top:1.6rem; border-top:1px solid var(--linea-debil); color:var(--color-muted); font-size:.85rem; font-family:var(--font-mono); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .line-nav__links{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px);
    flex-direction:column; justify-content:center; gap:1.4rem; padding:2rem;
    background:rgba(10,14,22,.96); backdrop-filter:blur(20px);
    transform:translateX(100%); transition:transform .45s var(--ease);
  }
  .line-nav.is-open .line-nav__links{ transform:translateX(0); }
  .line-nav__links a{ font-size:1.3rem; color:var(--color-text); }
  .line-nav__burger{ display:flex; }
  .line-nav__cta{ display:none; }
  .line-foot__grid{ grid-template-columns:1fr 1fr; }
  .line-foot__bottom{ flex-direction:column; }
}
@media (max-width:560px){
  .line-foot__grid{ grid-template-columns:1fr; }
}