/* ============================================================================
   CABECERA Y PIE DEL SITIO — hoja UNICA y compartida
   ============================================================================

   POR QUE EXISTE
       Hasta el 2026-08-06 estas reglas estaban COPIADAS en cinco sitios:
       home_v3.html, hub.html, capitulo.html, mapa.html, libro-completo.html y la
       envoltura de construir-sitio.py. Nada obligaba a que coincidieran, y se
       separaron: el menu de la home se veia a 18 px y el del libro a 14,4.

       Y lo curioso es que las dos escribian el MISMO numero: 0.9. La home en 'em'
       (0,9 x 20 px del cuerpo = 18) y las demas en 'rem' (0,9 x 16 px de la raiz
       del navegador = 14,4). Es la leccion de memoria/18, que se aplico a la home
       y nunca llego a las plantillas del libro.

       WordPress no tiene este problema porque la cabecera vive en un solo sitio,
       dentro del tema. Esta hoja es nuestro equivalente: se toca AQUI y cambia en
       todo el sitio a la vez.

   REGLA AL EDITARLA
       Los tamanos de letra van en 'em', nunca en 'rem'. 'em' cuelga del cuerpo
       (20 px, y sube con el control de Tamano); 'rem' cuelga de la raiz del
       navegador, que es fija, y deja la barra sorda a los ajustes de lectura.

   VARIABLES
       Todas con valor de respaldo: var(--x, #hex). Esta hoja la cargan paginas con
       paletas declaradas de forma distinta, y sin respaldo una de ellas se quedaria
       sin color.

   DONDE VIVE Y COMO VIAJA
       Fuente unica: Libros/comun/sitio.css
         - construir.py       la copia a <hub>/assets/sitio.css
         - construir-sitio.py la copia a _sitio/assets/sitio.css
       Se copia en vez de enlazarse porque el libro se publica como carpeta
       autonoma: un fichero fuera de ella daria 404 (mismo motivo que el logo).
   ========================================================================= */

/* ---------------------------------------------------------------- CABECERA */

/* Dos estructuras distintas, y las dos tienen que funcionar:
     libro      <header class="site-header"><nav class="site-nav"><div class="nav-inner">
     home y     <header class="site-nav"><nav class="nav-inner">
     envoltura
   En el libro se pega .site-header porque dentro van la barra Y el panel de ajustes:
   si solo se pegara la barra, al abrir el panel con la pagina desplazada se
   desplegaria fuera de la pantalla. En la home ese papel lo hace el propio
   <header class="site-nav">, de ahi el segundo selector. */
.site-header,
header.site-nav { position: sticky; top: 0; z-index: 100; }

.site-nav {
  background: #1A1A1A;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

/* flex-wrap: la barra tiene TRES hijos (marca, menu y boton) y en movil no caben
   en una linea. Sin el, a 375 px el boton se sale de la pantalla.
   Ojo al orden: 'gap' es atajo de row-gap + column-gap, asi que un row-gap escrito
   DESPUES manda, y escrito ANTES lo borra el atajo. */
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  row-gap: 0.6rem;
  flex-wrap: wrap;
  min-height: 62px;
}

.nav-brand { display: inline-flex; align-items: center; text-decoration: none; }
.nav-logo { height: 34px; width: auto; flex-shrink: 0; display: block; }
.nav-logo-fallback {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 600;
  font-size: 1.25em;
  letter-spacing: 0.06em;
  color: #fff;
}

.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.nav-links a {
  color: #fff;
  font-size: 0.9em;
  font-weight: 500;
  text-decoration: none;
}
.nav-links a:hover { color: var(--color-cta, #EC8118); opacity: 1; }
.nav-links a[aria-current="page"] { color: var(--color-cta, #EC8118); font-weight: 600; }

/* El borde al 38 % no es capricho: WCAG 1.4.11 pide 3:1 para el contorno de un
   control, y al 14 % daba 1,53:1. Al 38 % da 3,57:1 (medido, memoria/18). */
.nav-aa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.38);
  color: #fff;
  cursor: pointer;
  border-radius: var(--radius-pill, 9999px);
  font-size: 0.85em;
  font-weight: 600;
  font-family: inherit;
  transition: all var(--trans, 0.18s ease);
}
.nav-aa-btn:hover { border-color: var(--color-cta, #EC8118); color: var(--color-cta, #EC8118); }
.nav-aa-btn .aa,
.nav-aa-btn .aa-glyph { font-family: var(--font-display, 'Oswald', sans-serif); font-weight: 600; }

/* --------------------------------------------------------------------- PIE */
/* Tres columnas iguales, clonando el pie del sitio vivo. El original tenia CUATRO;
   la que se cayo era la de los sellos de pago, porque aqui no se vende nada y
   anunciaba algo que no existe. */

.site-footer {
  background: #0D0D0D;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: clamp(2.2rem, 5vw, 3.2rem) 0 clamp(1.6rem, 4vw, 2.4rem);
  font-family: var(--font-body, 'Atkinson Hyperlegible Next', system-ui, sans-serif);
}
.footer-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 3rem;
  align-items: start;
  text-align: center;
}
.footer-col { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }

/* "Un poco mas pequeno" que el del sitio vivo, que iba a 230 px (decision de
   Alfred). El ancho manda y el alto va solo: asi no se deforma. */
.footer-logo { width: 190px; max-width: 100%; height: auto; display: block; }
.footer-logo-fallback {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 600; font-size: 1.5em; letter-spacing: 0.06em; color: #fff;
}
.footer-copy { font-size: 0.8em; color: rgba(255,255,255,0.72); margin: 0; }
.footer-nota { font-size: 0.72em; color: rgba(255,255,255,0.52); margin: 0; line-height: 1.5; }

.footer-titulo {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 600;
  font-size: 0.82em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0 0 0.35rem;
}

/* Los tres datos de contacto son enlaces: el correo abre el programa de correo, el
   telefono marca en el movil (tel:) y WhatsApp abre la conversacion. En el sitio
   vivo el telefono era texto muerto. */
.footer-contacto { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-contacto a {
  color: #fff;
  font-size: 0.85em;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.28);
  align-self: center;
  padding-bottom: 1px;
}
.footer-contacto a:hover { color: var(--color-cta, #EC8118); border-bottom-color: currentColor; }

.footer-wa {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-bottom: 0 !important;
  margin-top: 0.2rem;
}
.footer-wa svg { width: 26px; height: 26px; display: block; }
.footer-wa:hover svg { opacity: 0.85; }

.footer-legal { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-legal a {
  color: rgba(255,255,255,0.86);
  font-size: 0.85em;
  text-decoration: none;
}
.footer-legal a:hover { color: var(--color-cta, #EC8118); text-decoration: underline; }

.site-footer :focus-visible { outline: 3px solid var(--color-cta, #EC8118); outline-offset: 3px; }

/* Tres columnas no admiten "dos y una huerfana": del ancho completo se pasa a una
   sola columna. El original iba de 4 a 2 porque 4 se parte en dos pares limpios. */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}

@media (max-width: 640px) {
  .nav-inner { justify-content: center; }
}

/* ------------------------------------------ MENU PLEGABLE EN MOVIL (2026-08-28) */
/* El markup y el guion viven en Libros/comun/menu.html; aqui solo el aspecto.

   TRES ESTADOS, y el orden importa:
     1. Por defecto (escritorio, y CUALQUIER pantalla sin JavaScript): el boton no
        existe y los enlaces se ven. Es el estado seguro: si el guion no corre, el
        menu sigue ahi, doblado a una segunda fila como hasta ahora.
     2. Movil CON el guion en marcha (.nav-inner[data-menu="on"]): aparece el boton
        y los enlaces se pliegan.
     3. Movil con el menu abierto ([data-menu-open="true"]): los enlaces bajan a su
        propia fila, uno debajo de otro.

   El panel NO flota (position:absolute): ocupa una fila entera dentro de la barra,
   que ya es flexible y con salto de linea. Asi no hay z-index que ajustar ni riesgo
   de que se salga por un lado, que es el fallo que estamos arreglando. */

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  /* 44 px: el minimo que se pulsa comodo con el dedo sin apuntar. */
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
  background: transparent;
  /* Mismo 38 % de borde que el boton "Aa", por lo mismo: WCAG 1.4.11 pide 3:1
     para el contorno de un control y al 14 % daba 1,53:1. */
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: var(--radius-sm, 4px);
  color: #fff;
  cursor: pointer;
  transition: border-color var(--trans, 0.18s ease), color var(--trans, 0.18s ease);
}
.nav-burger:hover { border-color: var(--color-cta, #EC8118); color: var(--color-cta, #EC8118); }

/* Las tres barras: una es el <span> y las otras dos, sus pseudoelementos. */
.nav-burger-bars { position: relative; display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px; }
.nav-burger-bars::before,
.nav-burger-bars::after { content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-burger-bars::before { top: -6px; }
.nav-burger-bars::after { top: 6px; }

@media (max-width: 720px) {
  /* El nombre largo del boton "Aa" se va: en un movil de 360 px no caben a la vez
     el logo, un boton de cinco palabras y el de tres barras. Se queda el glifo, y
     el nombre completo sigue existiendo para los lectores de pantalla en el
     aria-label del boton (por eso hubo que ponerselo a las plantillas del libro,
     que no lo tenian). */
  .aa-txt { display: none; }

  /* El logo baja a 28 px (de 34) y el hueco entre piezas se acorta. MEDIDO: con el
     logo a 34 px la barra suma 352 px y en un movil de 360 px solo hay 345 utiles,
     asi que el boton saltaba a una segunda fila y la cabecera pasaba de 66 a 120 px
     de alto. Y va fija arriba: 120 px son un tercio de pantalla comidos mientras se
     lee. Con 28 px suma 304 y cabe de sobra, incluso en pantallas de 320.

     OJO: home_v3.html ya tenia este .nav-logo{height:28px} en su bloque de 720 px,
     pero NO servia de nada: esta hoja se carga DESPUES y su regla .nav-logo{34px}
     lo pisaba con la misma especificidad. No se noto porque hasta hoy la home
     escondia el menu y sobraba sitio. Por eso vive aqui ahora. */
  .nav-logo { height: 28px; }
  .nav-inner { column-gap: 0.75rem; }

  /* Logo a la izquierda; el margen automatico empuja "Aa" y las tres barras a la
     derecha, juntos. Gana al justify-content:center de mas abajo por especificidad,
     no por orden. */
  /* El hueco sobrante se lo queda el LOGO a su derecha, no el boton "Aa". Es la
     diferencia entre que el menu quede a la derecha SIEMPRE o solo cuando hay dos
     botones: el "Aa" no existe en las paginas de herramientas ni en las legales, y
     con el margen puesto en el, alli no habia nada que empujara y las tres barras
     se quedaban pegadas al logo. Empujando desde el logo da igual cuantas piezas
     vengan detras: la ultima acaba contra el borde derecho. */
  .nav-inner[data-menu="on"] { justify-content: flex-start; }
  .nav-inner[data-menu="on"] .nav-brand { order: 1; margin-right: auto; }
  .nav-inner[data-menu="on"] .nav-aa-btn { order: 2; }
  .nav-inner[data-menu="on"] .nav-burger { order: 3; display: inline-flex; }
  .nav-inner[data-menu="on"] .nav-links { order: 4; display: none; flex-basis: 100%; }

  .nav-inner[data-menu="on"][data-menu-open="true"] .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0.2rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
  /* Cada enlace, una franja ancha y alta: se pulsa con el dedo sin apuntar, y la
     linea de separacion dice donde acaba uno y empieza el siguiente. */
  .nav-inner[data-menu="on"][data-menu-open="true"] .nav-links a {
    padding: 0.85rem 0.15rem;
    font-size: 1em;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-inner[data-menu="on"][data-menu-open="true"] .nav-links a:last-child { border-bottom: 0; }
}

.site-nav :focus-visible,
.site-header :focus-visible { outline: 3px solid var(--color-cta, #EC8118); outline-offset: 2px; }