/* ── Nav ─────────────────────────────────────────────────── */
/* Único <header> de la página: sin clase, se selecciona por etiqueta. */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
  transition: box-shadow var(--dur-short) var(--ease-out);
}
/* Estado "se ha hecho scroll": sin equivalente ARIA, atributo data-* */
header[data-scrolled] { box-shadow: 0 1px 20px oklch(from var(--color-ink) l c h / 0.08); }

nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: var(--space-lg);
}
nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
/* Logo: único <a> dentro de nav-left */
nav-left > a {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
nav-left > a svg {
  display: block;
  height: 28px;
  width: auto;
  fill: var(--color-accent);
}
/* Enlaces del nav principal: se identifica por data-nav, no por clase (el aria-label se traduce, no sirve como selector) */
nav[data-nav="primary"] > ul {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
}
nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
nav[data-nav="primary"] a {
  display: block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  transition:
    color            var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}
nav[data-nav="primary"] a:hover { color: var(--color-ink); background-color: var(--color-paper-2); }
nav[data-nav="primary"] a[aria-current="page"] {
  color: var(--color-accent);
  background-color: oklch(from var(--color-accent) l c h / 0.12);
}
nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* ── Nav: language dropdown ──────────────────────────────── */
nav-lang {
  display: block;
  position: relative;
}
/* Botón del globo: único <button> dentro de nav-lang */
nav-lang > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  cursor: pointer;
  transition:
    color            var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}
nav-lang > button:hover { color: var(--color-ink); background-color: var(--color-paper-2); }
nav-lang > button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Icono del globo: antes era un <svg> (circle+ellipse+line), ahora una
   máscara CSS sobre el propio botón — mismo dibujo, hereda currentColor. */
nav-lang > button::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7.25' stroke='%23000' stroke-width='1.5'/%3E%3Cellipse cx='10' cy='10' rx='3.1' ry='7.25' stroke='%23000' stroke-width='1.5'/%3E%3Cline x1='2.75' y1='10' x2='17.25' y2='10' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7.25' stroke='%23000' stroke-width='1.5'/%3E%3Cellipse cx='10' cy='10' rx='3.1' ry='7.25' stroke='%23000' stroke-width='1.5'/%3E%3Cline x1='2.75' y1='10' x2='17.25' y2='10' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* Menú de idiomas: único <ul> dentro de nav-lang, justo tras el botón */
nav-lang > ul {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  right: 0;
  z-index: 210;
  min-width: 160px;
  list-style: none;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px -8px oklch(from var(--color-ink) l c h / 0.18);
  padding: var(--space-xs) 0;
  opacity: 0;
  visibility: hidden;
  transform-origin: top right;
  transform: translateY(-10px) scale(0.94);
  transition:
    opacity    var(--dur-long) var(--ease-out),
    transform  var(--dur-long) var(--ease-out),
    visibility 0s var(--dur-long);
}
/* Idiomas de derecha a izquierda (hebreo, árabe...): el desplegable cuelga
   del mismo botón pero debe abrirse hacia la izquierda, no hacia la derecha
   — <html dir="rtl"> ya lo pone index.php según el catálogo de idiomas
   (core/languages.php), aquí solo se responde a ese atributo. */
html[dir="rtl"] nav-lang > ul {
  right: auto;
  left: 0;
  transform-origin: top left;
}
/* Abierto: se deriva del aria-expanded del propio botón, sin clase ni JS extra */
nav-lang > button[aria-expanded="true"] + ul {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity    var(--dur-long) var(--ease-out),
    transform  var(--dur-long) var(--ease-out),
    visibility 0s;
}
nav-lang ul a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  transition:
    color            var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}
nav-lang ul a:hover { color: var(--color-ink); background-color: var(--color-paper-2); }
lang-greeting {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  color: var(--color-accent);
  transition:
    max-width calc(var(--dur-short) * 3) var(--ease-out),
    opacity   calc(var(--dur-short) * 3) var(--ease-out),
    transform calc(var(--dur-short) * 3) var(--ease-out);
}
nav-lang ul a:hover lang-greeting {
  max-width: 100px;
  opacity: 1;
  transform: translateX(4px);
}
/* RTL: translateX es una transformación física (no respeta dir por sí
   sola) — el flex de nav-lang ul a ya coloca lang-greeting a la izquierda
   del nombre del idioma en RTL (orden de flex invertido automáticamente),
   pero sin esto el desliz de aparición seguiría yendo hacia la derecha,
   contra el propio texto en vez de alejándose de él. */
html[dir="rtl"] lang-greeting { transform: translateX(6px); }
html[dir="rtl"] nav-lang ul a:hover lang-greeting { transform: translateX(-4px); }

/* ── Nav: hamburguesa móvil ───────────────────────────────── */
/* Único <button> dentro de nav-left */
nav-left > button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--color-ink-2);
  line-height: 0;
  transition:
    color            var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}
nav-left > button:hover { color: var(--color-ink); background-color: var(--color-paper-2); }
nav-left > button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Icono hamburguesa: antes era un <svg> con 3 <line>, ahora <ham-icon>
   (la barra del medio) + ::before/::after (arriba/abajo) — sin SVG.
   Las 3 barras nacen apiladas en el mismo punto (el propio centro de
   ham-icon) y la separación en reposo es solo un translateY(); así el
   transform-origin por defecto de cada una (su propio centro) ya
   coincide con el pivote compartido, y rotar no descentra nada. */
ham-icon {
  display: block;
  position: relative;
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background-color: currentColor;
  transition: background-color var(--dur-short) var(--ease-out);
}
ham-icon::before,
ham-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background-color: currentColor;
  transition:
    transform        var(--dur-short) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}
/* Misma forma de función en los dos estados (rotate + translateY),
   solo cambian los números — así el navegador interpola cada parámetro
   por separado en vez de tener que decidir cómo mezclar dos transforms
   de forma distinta (que es lo que causaba el desplazamiento raro). */
ham-icon::before { transform: rotate(0deg) translateY(-6px); }
ham-icon::after  { transform: rotate(0deg) translateY(6px); }
/* background-color, no opacity: opacity en ham-icon apagaría también
   sus propios ::before/::after (son parte del mismo árbol de pintado). */
nav-left > button[aria-expanded="true"] ham-icon { background-color: transparent; }
nav-left > button[aria-expanded="true"] ham-icon::before { transform: rotate(45deg) translateY(0px); }
nav-left > button[aria-expanded="true"] ham-icon::after  { transform: rotate(-45deg) translateY(0px); }

/* ── Nav: menú móvil ──────────────────────────────────────── */
/* Se identifica por data-nav, no por clase (el aria-label se traduce, no sirve como selector) */
nav[data-nav="mobile"] {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  transition:
    grid-template-rows calc(var(--dur-long) * 1.4) var(--ease-out),
    visibility 0s calc(var(--dur-long) * 1.4);
}
/* Abierto: se deriva del aria-expanded del botón hamburguesa (norma 5) */
nav-row:has(nav-left > button[aria-expanded="true"]) + nav[data-nav="mobile"] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--dur-long) var(--ease-out),
    visibility 0s;
}
nav-mobile-inner {
  display: block;
  overflow: hidden;
  min-height: 0;
  padding: 0;
  border-top: 0 solid var(--color-rule);
  transition:
    padding calc(var(--dur-long) * 1.4) var(--ease-out),
    border-top-width calc(var(--dur-long) * 1.4) var(--ease-out);
}
nav-row:has(nav-left > button[aria-expanded="true"]) + nav[data-nav="mobile"] nav-mobile-inner {
  padding: var(--space-lg) 0;
  border-top-width: 1px;
  transition:
    padding var(--dur-long) var(--ease-out),
    border-top-width var(--dur-long) var(--ease-out);
}
nav-mobile-inner > ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-lg);
}
nav-mobile-inner ul a {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-rule);
}
nav-mobile-inner ul a[aria-current="page"] { color: var(--color-accent); }
nav-mobile-inner ul li:last-child a { border-bottom: none; }
nav-mobile-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
  nav-left { gap: var(--space-sm); }
  nav[data-nav="primary"] { display: none; }
  nav-actions { display: none; }
  nav-left > button { display: flex; }
}
@media (min-width: 992px) {
  nav[data-nav="mobile"] { display: none; }
}