/* ============================================================
   29A LABS — Layout: contenedores, header, footer, hero
   ============================================================ */

.site-main {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 60vh;
  /* <main> es un ítem flex (el body es una columna flex, por el pie pegajoso),
     y un ítem flex sin ancho definido se ensancha para dar cabida al hijo más
     terco que lleve dentro. Turnstile se planta en 300px, así que en pantallas
     de 320px estiraba <main> a 332 y aparecía scroll horizontal — que en este
     sitio no se permite.
     Con un ancho DEFINIDO, <main> ya no negocia: mide lo que mide la pantalla,
     y si un hijo no cabe, el problema se resuelve dentro del hijo (el widget se
     escala en components.css) en vez de arrastrar a toda la página. */
  width: 100%;
  min-width: 0;
}

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgb(10 10 12 / 0.82);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}

/* La regla del header solo aparece cuando ya scrolleaste: al inicio, el
   header flota sobre el hero sin cortarlo. */
.site-header.is-stuck {
  border-bottom-color: var(--c-border);
  background: rgb(10 10 12 / 0.94);
}

.site-header__inner {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--s-4) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* ── Marca ────────────────────────────────────────────────── */
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-right: auto;
  background-image: none; /* anula el subrayado global de <a> */
  color: var(--c-text-strong);
}

.brand__mark {
  display: block;
  width: auto;
  height: 34px;
  color: var(--c-accent);
  flex: none;
}
.brand__mark svg { height: 100%; width: auto; }

.brand__word {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-1);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  white-space: nowrap;
  /* "29ALABS" es una sola palabra: sin espacio entre 29A y LABS. */
  word-spacing: 0;
}

.brand__cursor { color: var(--c-accent); }

/* ── Navegación ───────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list li { margin: 0; }

.site-nav__list a {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
  background-image: none;
  white-space: nowrap;   /* "SOBRE MI" es un item, no dos líneas */
  transition: color var(--d-fast) var(--e-out);
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
  color: var(--c-accent);
}

/* El item activo lleva el prompt delante, centrado con el texto.
   Sin top/translate heredaba el line-height del enlace (23px sobre 18px de
   alto) y quedaba flotando por encima de la línea. */
.site-nav__list .current-menu-item > a::before {
  content: '▸';
  position: absolute;
  left: -0.9em;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  color: var(--c-accent);
}

/* ── Buscador del header ──────────────────────────────────── */
.site-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: var(--hairline);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  transition: border-color var(--d-fast) var(--e-out), width var(--d-base) var(--e-out);
}
.site-search:focus-within { border-color: var(--c-accent); }
.site-search__prompt { color: var(--c-accent); font-family: var(--font-mono); }
.site-search input {
  /* 14ch es lo que mide "grep ./posts …": menos, y el placeholder
     se corta a media palabra y parece un bug. */
  width: 14ch;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--t--1);
  text-overflow: ellipsis;
  transition: width var(--d-base) var(--e-out);
}
.site-search input:focus { width: 22ch; box-shadow: none; }

/* ── Botón de menú (solo móvil) ───────────────────────────── */
.nav-toggle { display: none; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  padding: var(--s-9) 0 var(--s-8);
  border-bottom: 1px solid var(--c-border);
}

.hero__prompt {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  color: var(--c-accent);
  margin-bottom: var(--s-4);
}

.hero__title {
  font-size: var(--t-4);
  line-height: 1.15;
  max-width: 22ch;
  color: var(--c-text-strong);
}

.hero__meta {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* ── Cabecera de archivo / búsqueda ───────────────────────── */
.page-head {
  padding: var(--s-8) 0 var(--s-6);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--s-4);
}
.page-head__title { font-size: var(--t-3); }
.page-head__count {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--c-text-faint);
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  margin-top: var(--s-10);
  border-top: 1px solid var(--c-border);
  background: linear-gradient(to bottom, transparent, rgb(252 97 33 / 0.03));
}

.site-footer__inner {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--s-8) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
}

.site-footer__brand {
  display: flex;
  align-items: center;   /* la figura y el bloque de texto, a la misma altura */
  gap: var(--s-4);
  margin-right: auto;
}
.site-footer__brand > div { display: flex; flex-direction: column; gap: var(--s-1); }
/* El tagline es un <p> que sigue a otro <p>, así que heredaba la regla global
   `p + p { margin-top: 24px }` y se despegaba del wordmark. Acá van juntos. */
.site-footer__tagline { margin-top: 0; }
.site-footer__name { line-height: 1.15; }
.site-footer__mark {
  display: block;
  height: 56px;
  color: var(--c-accent);
  opacity: 0.85;
  flex: none;
}
.site-footer__mark svg { height: 100%; width: auto; }

.site-footer__name {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-tight);
  color: var(--c-text-strong);
}
.site-footer__tagline {
  font-size: var(--t--1);
  color: var(--c-text-dim);
  max-width: 34ch;
}

.site-footer__nav {
  display: flex;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__nav a {
  font-family: var(--font-mono);
  font-size: var(--t--1);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--c-text-dim);
  background-image: none;
}
.site-footer__nav a:hover { color: var(--c-accent); }

.site-footer__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: var(--t--1);
  color: var(--c-text-faint);
}
.site-footer__sig { margin-left: auto; color: var(--c-accent); }

/* ── Móvil ────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;   /* objetivo táctil mínimo */
    height: 44px;
    padding: 0;
    border-color: var(--c-border);
  }
  .nav-toggle__bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 18px;
  }
  .nav-toggle__bars span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--c-text);
    transition: transform var(--d-base) var(--e-out), opacity var(--d-fast) linear;
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  /* El menú se despliega debajo del header, a ancho completo.
     Nunca desborda: la regla es cero scroll horizontal en móvil. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--gutter);
    /* Opaco del todo, no 0.98: sobre un fondo casi negro, un 2% del titular
       blanco del hero se cuela por detrás y se lee como un fantasma. */
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--d-base) var(--e-out), padding var(--d-base) var(--e-out);
  }
  .site-nav.is-open {
    max-height: 70vh;
    padding: var(--s-4) var(--gutter) var(--s-6);
    overflow-y: auto;
  }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a {
    display: block;
    padding: var(--s-4) 0;
    font-size: var(--t-0);
    border-bottom: 1px solid var(--c-border);
  }
  .site-nav__list .current-menu-item > a::before { left: 0; position: static; margin-right: var(--s-2); }

  .site-search { margin-top: var(--s-4); }
  .site-search input,
  .site-search input:focus { width: 100%; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__brand { margin-right: 0; }
  .site-footer__meta { flex-wrap: wrap; }
  .site-footer__sig { margin-left: 0; }
}

/* ── Enlaces a los otros sitios de Rolo (pie) ─────────────── */
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-left: var(--s-2);
}

/* Separador entre el año y el primer enlace: sin él, "© 2026 FB" se leen
   pegados, como si fueran lo mismo. */
.site-footer__links::before {
  content: '·';
  color: var(--c-border-lit);
}

/* El separador "·" entre enlaces, generado, no escrito a mano: así añadir o
   quitar un sitio no obliga a tocar los puntos. */
.site-footer__links a + a::before {
  content: '·';
  margin-right: var(--s-4);
  color: var(--c-border-lit);
}

.site-footer__links a {
  color: var(--c-text-dim);
  background-image: none;
  letter-spacing: var(--tr-wide);
  transition: color var(--d-fast) var(--e-out);
}
.site-footer__links a:hover { color: var(--c-accent); }

@media (max-width: 640px) {
  /* En móvil los cinco enlaces no caben en una línea: se apilan en dos y los
     separadores estorban más que ayudan. Fuera también el "·" de cabecera, que
     sin sus compañeros quedaba colgando solo al principio de la fila. */
  .site-footer__links a + a::before { content: none; margin-right: 0; }
  .site-footer__links::before { content: none; }
  .site-footer__links { margin-left: 0; gap: var(--s-2) var(--s-4); }
}