/*
 * Lunako — cabecera, conmutador de idioma y menú a pantalla completa
 * Los estados son clases; el JS solo las conmuta. Nada de estilos en línea.
 */

/* ============================== cabecera ============================== */

.lk-header {
  position: fixed; top: var(--lk-admin); left: 0; right: 0; z-index: 90;
  height: var(--lk-header);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--lk-gutter);
  background: var(--lk-header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lk-header-line);
  transition: background var(--lk-dur-veil) var(--lk-ease),
              border-color var(--lk-dur-veil) var(--lk-ease);
}
.lk-header.is-scrolled {
  background: var(--lk-header-bg-scrolled);
  border-bottom-color: var(--lk-header-line-scrolled);
}

/* Transparente y sin filete en reposo, para que lo que abre la página —el
   sello de la Home, el mapa de Contacto— pase por debajo sin velo. Al hacer
   scroll vuelve el fondo: sin él, el logotipo se pierde sobre el contenido.
   Qué páginas lo llevan lo decide la clase del body, en setup.php. */
.lk-header-transparente .lk-header:not(.is-scrolled) {
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Sobre grafito (archivo de Proyectos). El modificador lo pone el body. */
.lk-chrome-dark .lk-header               { background: var(--lk-header-bg-dark); border-bottom-color: var(--lk-header-line-dark); }
.lk-chrome-dark .lk-header.is-scrolled   { background: var(--lk-header-bg-dark-scrolled); border-bottom-color: var(--lk-header-line-dark); }
.lk-chrome-dark .lk-header__logo         { color: var(--lk-light); }
.lk-chrome-dark .lk-lang__toggle         { color: var(--lk-header-tint-dark); }
.lk-chrome-dark .lk-burger__line         { background: var(--lk-header-burger-dark); }

.lk-header__logo {
  display: flex; align-items: center;   /* 44 px de objetivo dentro de los 64 de
     la cabecera: el isotipo sigue a 22 px y centrado, solo crece el área */
  color: var(--lk-ink);
  opacity: .9;
  transition: opacity .4s var(--lk-ease), color var(--lk-dur-veil) var(--lk-ease);
}
.lk-header__logo:hover, .lk-header__logo:focus-visible { opacity: 1; }

.lk-header__end { display: flex; align-items: center; gap: 32px; }

/* ------------------------------ hamburguesa ------------------------------ */
/* Rollover: 20/14/20 → 14/20/20 */

.lk-burger {
  /* 36 px de dibujo dentro de un objetivo de 44. Las líneas van alineadas al
     borde derecho, así que el área extra crece hacia dentro y no se ve. */
  width: 44px; height: 44px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 5px; padding: 0;
}
.lk-burger__line {
  display: block; height: 1px; background: var(--lk-header-burger);
  transition: width var(--lk-dur-micro) var(--lk-ease), background var(--lk-dur-veil) var(--lk-ease);
}
.lk-burger__line:nth-child(1) { width: 20px; }
.lk-burger__line:nth-child(2) { width: 14px; transition-delay: .05s, 0s; }
.lk-burger__line:nth-child(3) { width: 20px; transition-delay: .1s, 0s; }

.lk-burger:hover .lk-burger__line:nth-child(1),
.lk-burger:focus-visible .lk-burger__line:nth-child(1) { width: 14px; }
.lk-burger:hover .lk-burger__line:nth-child(2),
.lk-burger:focus-visible .lk-burger__line:nth-child(2) { width: 20px; }

/* ========================= conmutador de idioma ========================= */

.lk-lang { position: relative; }

.lk-lang__toggle {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0;
  font-family: var(--lk-font-display); font-weight: 425;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--lk-header-tint);
  transition: color var(--lk-dur-veil) var(--lk-ease);
}
.lk-lang__toggle:hover, .lk-lang__toggle[aria-expanded="true"] { color: var(--lk-accent); }

.lk-lang__caret {
  width: 7px; height: 7px; flex: none;
  transition: transform var(--lk-dur-micro) var(--lk-ease);
}
.lk-lang__toggle[aria-expanded="true"] .lk-lang__caret { transform: rotate(180deg); }

.lk-lang__list {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 1;
  /* Sin min-width: la caja se ajusta a lo que hay dentro, y así el margen es
     el mismo a los dos lados. Con un ancho mínimo mayor que el contenido, y
     los códigos alineados a la derecha, todo el sobrante se acumulaba a la
     izquierda. */
  display: flex; flex-direction: column;
  padding: 10px 16px;

  /* Nueve idiomas caben en una ventana de 560 px; a partir de ahí la lista
     empezaría a salirse por abajo. No es un escenario probable, pero cuesta
     dos líneas cerrarlo del todo y así «¿cabrá otro idioma?» deja de ser una
     pregunta. */
  max-height: calc(100vh - var(--lk-admin) - var(--lk-header) - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--lk-header-bg-scrolled);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--lk-header-line-scrolled);
  /* visibility, además de opacity: sin ella los idiomas siguen siendo
     tabulables con el desplegable cerrado y el teclado entra en enlaces que
     no se ven. Se retrasa hasta que acaba el fundido para no cortarlo. */
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  visibility: hidden;
  transition: opacity var(--lk-dur-micro) var(--lk-ease),
              transform var(--lk-dur-micro) var(--lk-ease),
              visibility 0s linear var(--lk-dur-micro);
}
.lk-chrome-dark .lk-lang__list {
  background: var(--lk-header-bg-dark-scrolled);
  border-color: var(--lk-header-line-dark);
}
.lk-lang.is-open .lk-lang__list {
  opacity: 1; transform: none; pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.lk-lang__item {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 30px;
  font-family: var(--lk-font-display); font-weight: 425;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--lk-header-tint);
}

/*
 * Con ratón las filas van a 30 px, que es lo que hace que el panel esté
 * equilibrado con su contenido. Con el dedo eso se queda corto y filas
 * contiguas de 30 px se pulsan mal, así que ahí vuelven a los 44 del resto del
 * cromo. Es lo mismo que miden el hamburguesa y el propio conmutador.
 */
@media (pointer: coarse) {
  .lk-lang__item { min-height: 44px; }
}

/* El filete responde al ratón en toda la fila, no solo sobre las tres letras. */
.lk-lang__item:hover .lk-link,
.lk-lang__item:focus-visible .lk-link {
  background-size: 100% 1px;
  color: var(--lk-accent);
}
.lk-chrome-dark .lk-lang__item { color: var(--lk-header-tint-dark); }

.lk-lang__item.is-current { color: var(--lk-ink); }
.lk-chrome-dark .lk-lang__item.is-current { color: var(--lk-light); }

/* Traducción que no existe: se ve el hueco, al 20 %, y no es clicable. */
.lk-lang__item.is-missing { opacity: .2; pointer-events: none; }

/* ====================== menú a pantalla completa ====================== */

.lk-nav-overlay[hidden] { display: none; }

.lk-nav-overlay {
  position: fixed; inset: var(--lk-admin) 0 0 0; z-index: 150;
  background: var(--lk-dark);
  display: flex; flex-direction: column; justify-content: center;
  padding-inline: clamp(20px, 10vw, 192px);
  overflow: auto;
  opacity: 0;
  transition: opacity var(--lk-dur-veil) var(--lk-ease);
}
.lk-nav-overlay.is-open { opacity: 1; }

.lk-nav-overlay__bar {
  position: absolute; inset: 0 0 auto 0; height: var(--lk-header);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--lk-gutter);
}
.lk-nav-overlay__bar { color: var(--lk-light); }
.lk-nav-overlay__bar .lk-marca { opacity: .85; }

.lk-nav-close {
  padding: 8px 0;
  font-family: var(--lk-font-display); font-weight: 425;
  font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--lk-header-tint-dark);
  transition: color var(--lk-dur-micro) var(--lk-ease);
}
.lk-nav-close:hover, .lk-nav-close:focus-visible { color: var(--lk-light); }

.lk-nav { display: flex; flex-direction: column; }

.lk-nav__item {
  display: flex; align-items: center; gap: 28px;
  padding: 8px 0; min-height: 0;
}

@keyframes lkNavIn { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
.lk-nav-overlay.is-open .lk-nav__item {
  animation: lkNavIn var(--lk-dur-page) var(--lk-ease) both;
  animation-delay: calc(var(--lk-i, 0) * var(--lk-stagger));
}

.lk-nav__num {
  display: inline-block; width: 26px; flex: none;
  font-family: var(--lk-font-body); font-weight: 400;
  font-size: 11px; letter-spacing: 2px;
  color: transparent; transform: translateX(-10px);
  transition: color var(--lk-dur-veil) var(--lk-ease),
              transform .6s var(--lk-ease);
}
.lk-nav__text {
  display: inline-block;
  font-family: var(--lk-font-display); font-weight: 300;
  font-size: var(--lk-t-nav); line-height: 1.1; letter-spacing: -.02em;
  color: rgba(240, 237, 232, .85);
  transition: color var(--lk-dur-veil) var(--lk-ease),
              transform .7s var(--lk-ease);
}

.lk-nav__item:hover .lk-nav__num,
.lk-nav__item:focus-visible .lk-nav__num { color: var(--lk-accent-dark); transform: none; }
.lk-nav__item:hover .lk-nav__text,
.lk-nav__item:focus-visible .lk-nav__text { color: var(--lk-light); transform: translateX(14px); }

.lk-nav__item[aria-current="page"] .lk-nav__num { color: var(--lk-accent-dark); transform: none; }
.lk-nav__item[aria-current="page"] .lk-nav__text { color: var(--lk-light); }

/* Con el menú abierto no se hace scroll detrás */
.lk-menu-open { overflow: hidden; }

/* ================================ cursor ================================ */

/*
 * El sello en terracota persigue a la flecha. La flecha es la del sistema y
 * no se toca: va siempre por encima de la página, así que cuando el ratón se
 * para queda dibujada sobre el sello, con la punta en su centro. Solo existe
 * con ratón; cursor.js lo enseña cuando lo confirma.
 */
.lk-cursor {
  position: fixed; left: 0; top: 0; z-index: 100000;
  width: 0; height: 0;
  pointer-events: none;
  color: var(--lk-accent);
  opacity: 0;
  transition: opacity .3s var(--lk-ease);
}
.lk-cursor.is-on { opacity: 1; }

.lk-cursor .lk-sello {
  position: absolute; left: -11px; top: -11px;
  width: 22px; height: 22px;
  max-width: none;   /* base.css limita los svg al 100 % de una caja que mide 0 */
  transition: transform var(--lk-dur-micro) var(--lk-ease),
              opacity var(--lk-dur-micro) var(--lk-ease);
}

/* Sobre un enlace crece, y se vuelve translúcido para no tapar lo que se va
   a pulsar: el icono del menú, por ejemplo, desaparecía entero debajo. */
.lk-cursor.is-link .lk-sello { transform: scale(1.6); opacity: .5; }
.lk-cursor.is-down .lk-sello { transform: scale(.8); }

/* Sobre un campo de texto se aparta: taparía lo que se está escribiendo. */
.lk-cursor.is-text { opacity: 0; }