/* ============================================================
   Layout: LATERAL — menú vertical fijo a la izquierda
   El nav se vuelve una barra lateral (logo arriba, links en
   columna, botones al fondo) y todo el contenido corre al lado.
   En pantallas chicas vuelve a la barra superior clásica.
   Solo consume variables del tema activo → sirve con los 5 temas.
   ============================================================ */

/* Contenido un poco más angosto: se lee como app/estudio */
[data-layout="lateral"] { --maxw: 1080px; }

/* Títulos con subrayado de acento (firma de esta estructura) */
[data-layout="lateral"] .sec-title::after {
  content: ""; display: block; width: 64px; height: 4px;
  background: var(--accent); margin-top: 14px; border-radius: 2px;
}
[data-layout="lateral"] .sec-title.center::after { margin-inline: auto; }

/* ---------- Solo escritorio: la barra lateral ---------- */
@media (min-width: 1001px) {
  [data-layout="lateral"] .nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: 272px;
    background: var(--surface);
    border-right: 1px solid var(--border, rgba(128,128,128,.15));
    border-bottom: 0; backdrop-filter: none;
  }
  [data-layout="lateral"] .nav.scrolled { background: var(--surface); border-bottom: 0; }
  [data-layout="lateral"] .nav-in {
    max-width: none; margin: 0; padding: 26px 18px;
    flex-direction: column; align-items: stretch; height: 100%;
  }
  [data-layout="lateral"] .logo { margin-bottom: 6px; }
  [data-layout="lateral"] .nav-links {
    flex-direction: column; align-items: stretch; gap: 6px;
    margin-top: 22px; flex: 1; overflow-y: auto; width: 100%;
  }
  [data-layout="lateral"] .nav-links > a { padding: 11px 14px; border-radius: 12px; }
  [data-layout="lateral"] .nav-links > a:not(.btn):hover { background: var(--surface-2); color: var(--ink); }
  /* Botones al fondo de la barra, a lo ancho */
  [data-layout="lateral"] .nav-links > a.nav-cta { width: 100%; text-align: center; margin-top: 10px; }
  [data-layout="lateral"] .nav-links > a:not(.nav-cta) + a.nav-cta { margin-top: auto; }

  /* El contenido corre al lado de la barra */
  [data-layout="lateral"] main,
  [data-layout="lateral"] .footer { margin-left: 272px; }

  /* Hero inmersivo dentro de la columna de contenido */
  [data-layout="lateral"] .hero { min-height: 100vh; }
}