/* web/styles/layout.css — nav, hero, footer, and the media queries that
 * reflow them. Page-level structure, not reusable components. */

.nav{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);
  background-color:var(--c-ink-950);
  background-image:
    linear-gradient(var(--grid-line-nav) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line-nav) 1px,transparent 1px);
  background-size:40px 40px}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:26px;height:26px;display:block}
.brand span{font-family:var(--f-display);font-weight:800;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-max)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-2);text-decoration:none;transition:color .18s}
.nav-links a:hover{color:var(--accent)}
.nav-cta{border-width:1px;border-style:solid;border-color:var(--accent-line);color:var(--accent)!important;
  padding:9px 16px;border-radius:var(--r-sm);transition:.18s}
.nav-cta:hover{background:var(--accent);color:var(--c-green-950)!important}

.hero{padding:var(--sp-24) 0 var(--sp-24);
  background-color:var(--c-ink-900);
  background-image:
    radial-gradient(640px 460px at 71% 46%,var(--glow-accent-hero),transparent 70%),
    linear-gradient(var(--grid-line-hero) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line-hero) 1px,transparent 1px);
  background-size:auto,40px 40px,40px 40px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--sp-16);align-items:center}
.hero h1{font-size:clamp(36px,5vw,56px);line-height:1.05;color:var(--fg-max);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.mark-stage{position:relative;
  background-image:
    radial-gradient(closest-side at 50% 46%,var(--glow-accent-mark),transparent 68%),
    radial-gradient(closest-side at 50% 48%,var(--glow-neutral-mark),transparent 78%)}
.hero-mark{width:100%;max-width:400px;height:auto;display:block;margin:0 auto;position:relative}
.hero-cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);text-align:center;margin-top:16px}
.hero-mark .seg,.hero-mark .pt{opacity:0;animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d)}
@keyframes rise{from{opacity:0;transform:translate3d(-10px,6px,0)}to{opacity:1;transform:none}}

.cta{padding:var(--sp-24) 0}
.cta h2{color:var(--fg-max);max-width:20ch}
.cta p{margin-top:20px;color:var(--fg-2);font-size:19px;line-height:1.6;max-width:54ch;text-wrap:pretty}

/* :not(.pie): a bare `footer` selector would otherwise paint the legacy
 * pages' <footer class="pie"> with this dark background too — same
 * collision class as .board table above. */
footer:not(.pie){padding:var(--sp-12) 0;border-top:1px solid var(--line);background:var(--c-ink-850)}
.foot-in{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand svg{width:24px;height:24px;display:block}
.foot-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-3)}
.foot-links a{text-decoration:none;transition:color .18s}
.foot-links a:hover{color:var(--fg)}
.foot-in small{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-3)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-12)}
  .grid-2,.faq-grid,.stats,.term-read,.fit{grid-template-columns:1fr;gap:var(--sp-8)}
  .grid-2,.stats,.term-read{gap:1px}
  .nav-links a:not(.nav-cta){display:none}
  section,.term-band,.hero,.cta{padding:var(--sp-16) 0}
  .shell{padding:0 20px}
  .board{overflow-x:auto}
  .board table{min-width:680px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .hero-mark .seg,.hero-mark .pt{opacity:1}}

/* ============================================================
   LEGADO — el resto de web/estilos.css: cabecera y pie de las
   páginas heredadas (pricing, methodology, bot, blog,
   scan.html.j2). Mismo criterio que la sección legado de
   components.css: primitivas directas porque estas páginas no
   llevan todavía una clase de superficie, elegidas para el tema
   claro por defecto. index.html es la única página en tema
   oscuro; su desviación se resuelve en su propio HTML (ver el
   commit de esta fase), no aquí.
   ============================================================ */
.cabecera{display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--c-line-light)}
.lockup{display:flex;align-items:center;gap:var(--sp-2);color:var(--c-slate-900);
  text-decoration:none;font-weight:500}
.meta-cabecera{display:flex;gap:var(--sp-4);font-family:var(--f-mono);
  font-size:12px;color:var(--c-slate-700)}
.pie{display:flex;gap:var(--sp-4);padding:var(--sp-6);font-size:12px;
  color:var(--c-slate-700);border-top:1px solid var(--c-line-light)}

/* body.plano-marketing: la única página que la usa es index.html
 * (tema oscuro). Reemplaza el antiguo --mk-bg/--mk-text por las
 * primitivas que .s-ink le asignaría como --bg/--fg si ya llevara esa
 * clase de superficie — no la lleva todavía, por regla de esta fase. */
body.plano-marketing{background:var(--c-ink-800);color:var(--c-slate-100)}