/* sitio.css — La cabecera y el pie del sitio: una sola definición para las
   cuatro páginas (atlas, chapters, how-we-work y capítulo).
   No hay build ni includes: el MARKUP se repite en cada página, pero el estilo
   vive aquí para que no derive. Los tokens llevan valor de reserva, así que
   este archivo funciona tanto en páginas que definen la paleta como en las que no.

   La cabecera tiene TRES zonas — navegación · marca · canal — que es la anatomía
   que ya tenía la página de capítulo; aquí solo se generaliza. */

:root {
  --sitio-alto-cabecera: 68px;
  --sitio-alto-barra: 34px;    /* la franja de pie del atlas */
  --sitio-margen: clamp(18px, 4vw, 48px);
}

/* ======================================================================
   CABECERA
   ====================================================================== */

.sitio-cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: var(--sitio-alto-cabecera);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sitio-margen);
  background: rgba(11, 14, 18, 0.92);
  border-bottom: 1px solid var(--borde-suave, rgba(214, 204, 188, 0.16));
}

/* Sobre el globo o sobre la película del capítulo: sin barra, solo un velo
   que garantiza la lectura del texto contra cualquier fondo. */
.sitio-cabecera--escena {
  background: none;
  border-bottom: 0;
  align-items: flex-start;
  padding-top: 26px;
  height: auto;
  pointer-events: none;   /* el gesto pertenece a la escena; ver .sitio-nav/.sitio-canal */
}
.sitio-cabecera--escena::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 132px;
  z-index: -1;
  background: linear-gradient(to bottom,
              rgba(11, 14, 18, 0.82) 0%,
              rgba(11, 14, 18, 0.45) 55%,
              rgba(11, 14, 18, 0) 100%);
}

.sitio-nav,
.sitio-canal { pointer-events: auto; }

.sitio-nav {
  /* Sobre la marca, que es absoluta y de ancho completo: sin esto se lleva
     los clics de la navegación (pasó el 31-ago en /chapters/ y /how-we-work/,
     donde la cabecera es sólida y no hereda el pointer-events: none). */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sitio-nav a {
  text-decoration: none;
  color: var(--tierra, rgba(214, 204, 188, 0.55));
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.sitio-nav a:hover { color: var(--texto, #E8E3DA); }
.sitio-nav a[aria-current="page"] {
  color: var(--ambar, #D9A441);
  border-bottom-color: var(--ambar, #D9A441);
}

/* La marca se centra ópticamente en la ventana, no entre sus vecinos: por eso
   es absoluta (el mismo recurso que usaba la página de capítulo). Y por eso
   mismo es una lámina de ancho completo tendida sobre sus vecinos: NO puede
   capturar el puntero, o se come los clics de la navegación. Su enlace a la
   home sí lo recupera. */
.sitio-marca {
  position: absolute;
  left: 0; right: 0;
  margin: 0;
  pointer-events: none;
  text-align: center;
  font-family: var(--serif, Georgia, "Iowan Old Style", "Times New Roman", serif);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.45em;
  text-indent: 0.45em;   /* compensa el tracking del último carácter */
  color: rgba(232, 227, 218, 0.85);
}
.sitio-marca a { color: inherit; text-decoration: none; pointer-events: auto; }

.sitio-canal {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ambar, #D9A441);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sitio-canal svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.sitio-canal:hover { color: var(--texto, #E8E3DA); }

/* ======================================================================
   BARRA DE PIE DEL ATLAS
   El atlas no puede tener un pie normal: sus 500 vh de scroll SON el viaje
   en el tiempo, así que no hay final de página donde apoyarlo. La franja es
   fija, mide 34 px y el dial se apoya sobre ella (ver .dial en atlas/estilos.css).
   Lleva el aviso de reconstrucción dramatizada, que es regla del canal y no
   puede quedar escondido tras un clic.
   ====================================================================== */

.sitio-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  height: var(--sitio-alto-barra);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sitio-margen);
  background: var(--fondo, #0B0E12);
  border-top: 1px solid var(--borde-suave, rgba(214, 204, 188, 0.16));
}

.sitio-barra-aviso {
  margin: 0;
  font-size: 11px;
  color: var(--tierra, rgba(214, 204, 188, 0.55));
}

.sitio-barra-enlaces {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sitio-barra-enlaces a {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: rgba(214, 204, 188, 0.78);
  border-bottom: 1px solid var(--borde-suave, rgba(214, 204, 188, 0.16));
  transition: color 0.25s ease, border-color 0.25s ease;
}
.sitio-barra-enlaces a:hover {
  color: var(--ambar, #D9A441);
  border-bottom-color: var(--ambar, #D9A441);
}
.sitio-barra-separador {
  width: 1px;
  height: 12px;
  background: var(--borde-suave, rgba(214, 204, 188, 0.16));
}

/* ======================================================================
   PIE COMPLETO (páginas con scroll de documento)
   ====================================================================== */

.sitio-pie {
  border-top: 1px solid var(--borde-suave, rgba(214, 204, 188, 0.16));
  padding: 30px var(--sitio-margen) 44px;
}
.sitio-pie-interior {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.sitio-pie p {
  margin: 0 auto;
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tierra, rgba(214, 204, 188, 0.55));
}
.sitio-pie-enlaces {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.sitio-pie-enlaces a {
  text-decoration: none;
  color: rgba(214, 204, 188, 0.78);
  border-bottom: 1px solid var(--borde-suave, rgba(214, 204, 188, 0.16));
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.sitio-pie-enlaces a:hover {
  color: var(--ambar, #D9A441);
  border-bottom-color: var(--ambar, #D9A441);
}

/* Redes: iconos SVG en línea, monocromos de la casa (sin peticiones externas) */
.sitio-redes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin: 8px 0 2px;
}
.sitio-redes a {
  display: inline-flex;
  padding: 4px;
  color: var(--tierra, rgba(214, 204, 188, 0.55));
  transition: color 0.25s ease;
}
.sitio-redes a:hover,
.sitio-redes a:focus-visible { color: var(--ambar, #D9A441); }
.sitio-redes svg { width: 19px; height: 19px; fill: currentColor; display: block; }

/* ======================================================================
   MÓVIL
   En el atlas la navegación baja al pulgar: una barra de pestañas de 56 px
   con objetivos de 44. «How we work» y el contacto no caben en 390 px de
   ancho, así que viven tras el botón de información.
   ====================================================================== */

.sitio-tabbar { display: none; }

@media (max-width: 720px) {
  .sitio-marca { font-size: 12px; letter-spacing: 0.38em; text-indent: 0.38em; }
  .sitio-canal span { display: none; }         /* solo el icono */
  .sitio-cabecera { height: 52px; }
  .sitio-cabecera--escena { padding-top: 16px; }

  /* En el atlas la nav de arriba se retira: su sitio es la barra de pestañas */
  .sitio-cabecera--escena .sitio-nav { display: none; }

  /* Y al revés en las páginas de documento, que no tienen barra de pestañas:
     ahí manda la navegación y la marca se va. En 375 px no caben las dos —la
     marca es absoluta y centrada, así que se tumbaba sobre la nav— y el nombre
     del sitio ya está en el pie. «Atlas» ES el enlace a la home. */
  .sitio-cabecera:not(.sitio-cabecera--escena) .sitio-marca { display: none; }

  .sitio-barra { display: none; }

  .sitio-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    height: 56px;
    display: flex;
    align-items: stretch;
    background: var(--fondo, #0B0E12);
    border-top: 1px solid var(--borde-suave, rgba(214, 204, 188, 0.16));
  }
  .sitio-tabbar a,
  .sitio-tabbar button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tierra, rgba(214, 204, 188, 0.55));
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
  }
  .sitio-tabbar a[aria-current="page"] {
    color: var(--ambar, #D9A441);
    border-bottom-color: var(--ambar, #D9A441);
  }
  .sitio-tabbar svg { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .sitio-tabbar .sitio-tab-info {
    flex: 0 0 56px;
    border-left: 1px solid var(--borde-suave, rgba(214, 204, 188, 0.16));
  }

  .sitio-pie-enlaces { flex-direction: column; gap: 12px; }
}