/**
 * Bloque: iink-as-nav
 * Blueprint: Animales Sueltos
 * Estética: sin barra/header — solo un botón de hamburguesa flotante,
 *           visible en todas las pantallas, que abre un panel a pantalla
 *           completa (estilo reframer). Hamburguesa y lang son
 *           position:absolute — se desplazan con el scroll.
 * Regla absoluta: cero valores hardcodeados — solo var(--iink-*)
 */

/* ── Variables locales del bloque ─────────────────────────────────────────── */
.iink-as-nav {
  --nav-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --nav-transition: 0.25s var(--nav-ease);
  --nav-z:          1000;
  --ham-bar-w:      59px;
  --ham-bar-h:      2px;
  --ham-gap:        8px;
}

/* ── Hamburger — botón flotante, visible en todas las pantallas ──────────── */
.iink-as-nav__hamburger {
  display: block;
  width: var(--ham-bar-w);
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  /* fixed, no absolute: .iink-as-nav solo declara custom properties y no crea
     bloque contenedor, así que con absolute el botón quedaba anclado al origen
     del documento y desaparecía a los ~64px de scroll. Es la única navegación
     del sitio en todos los breakpoints, así que tiene que seguir en pantalla. */
  position: fixed;
  top: clamp(1.25rem, 4vw, 2.5rem);
  right: clamp(1.25rem, 4vw, 2.5rem);
  z-index: calc(var(--nav-z) + 1);
}

.iink-as-nav__ham-linea {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--ham-bar-h);
  background-color: var(--iink-text-light);
  transform-origin: center;
  border-radius: 0;
  transition:
    top              var(--nav-transition),
    transform        var(--nav-transition),
    background-color var(--nav-transition);
}

.iink-as-nav__ham-linea--1 {
  top: calc(50% - var(--ham-gap) / 2 - var(--ham-bar-h));
}

.iink-as-nav__ham-linea--2 {
  top: calc(50% + var(--ham-gap) / 2);
}

/* Estado abierto → X oscura (el panel detrás es blanco) */
.iink-as-nav.menu-abierto .iink-as-nav__ham-linea {
  background-color: var(--iink-text);
}

.iink-as-nav.menu-abierto .iink-as-nav__ham-linea--1 {
  top: calc(50% - var(--ham-bar-h) / 2);
  transform: rotate(45deg);
}

.iink-as-nav.menu-abierto .iink-as-nav__ham-linea--2 {
  top: calc(50% - var(--ham-bar-h) / 2);
  transform: rotate(-45deg);
}

/* ── Selector de idioma ───────────────────────────────────────────────────── */
.iink-as-nav__lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: absolute;
  top: clamp(1.25rem, 4vw, 2.5rem);
  right: calc(clamp(1.25rem, 4vw, 2.5rem) + var(--ham-bar-w) + 16px);
  height: 44px;
  z-index: calc(var(--nav-z) + 1);
  font-family: var(--iink-font-mono);
  font-size: var(--iink-text-xs);
  letter-spacing: var(--iink-ls-caps);
  color: var(--iink-text-light);
  transition: color var(--nav-transition);
}

.iink-as-nav__lang-item {
  opacity: 0.5;
  color: inherit;
  text-decoration: none;
}

.iink-as-nav__lang-item--activo {
  opacity: 1;
}

.iink-as-nav__lang-sep {
  opacity: 0.3;
}

.iink-as-nav.menu-abierto .iink-as-nav__lang {
  color: var(--iink-text);
}

/* Mobile — mover el toggle de idioma a la izquierda */
@media (max-width: 639px) {
  .iink-as-nav__lang {
    right: auto;
    left: clamp(1.25rem, 4vw, 2.5rem);
  }
}

/* ── Panel — pantalla completa, fondo blanco, igual en toda resolución ───── */
.iink-as-nav__panel {
  position: fixed;
  inset: 0;
  z-index: calc(var(--nav-z) - 1);
  background-color: var(--iink-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-inline: clamp(2rem, 8vw, 4rem);

  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity   var(--nav-transition),
    transform var(--nav-transition);
  pointer-events: none;
}

.iink-as-nav__panel.panel-abierto {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Lista de links */
.iink-as-nav__panel-lista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 2vh, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.iink-as-nav__panel-item {
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(-40px);
  transition:
    opacity   0.5s var(--nav-ease),
    transform 0.5s var(--nav-ease);
}

.panel-abierto .iink-as-nav__panel-item {
  opacity: 1;
  transform: translateY(0);
}

.iink-as-nav__panel-item:nth-child(1) { transition-delay: 0.05s; }
.iink-as-nav__panel-item:nth-child(2) { transition-delay: 0.10s; }
.iink-as-nav__panel-item:nth-child(3) { transition-delay: 0.15s; }
.iink-as-nav__panel-item:nth-child(4) { transition-delay: 0.20s; }

/* Links — Inter Bold, tamaño lg, centrados */
.iink-as-nav__panel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--iink-font-heading);
  font-size: var(--iink-text-lg);
  font-weight: var(--iink-font-weight-bold);
  letter-spacing: var(--iink-ls-heading);
  color: var(--iink-text);
  text-decoration: none;
  padding-block: clamp(0.4rem, 1.5vh, 0.75rem);
  opacity: 1;
  transition:
    opacity var(--nav-transition),
    color   var(--nav-transition);
  line-height: 1.2;
  text-transform: none;
}

.iink-as-nav__panel-link:hover,
.iink-as-nav__panel-link:focus-visible {
  color: var(--iink-accent);
  opacity: 0.7;
}

/* ── Bottom del panel — email CTA + copyright ─────────────────────────────── */
.iink-as-nav__panel-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 1.5rem);
  margin-top: clamp(2rem, 6vh, 3.5rem);
  width: 100%;
  opacity: 0;
  transform: translateY(-40px);
  transition:
    opacity   0.5s var(--nav-ease),
    transform 0.5s var(--nav-ease);
  transition-delay: 0.25s;
}

.panel-abierto .iink-as-nav__panel-bottom {
  opacity: 1;
  transform: translateY(0);
}

.iink-as-nav__panel-email {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  border-bottom: 1px solid var(--iink-bg-dark);
  padding-bottom: 0.5rem;
  transition: opacity var(--nav-transition);
}

.iink-as-nav__panel-email:hover,
.iink-as-nav__panel-email:focus-visible {
  opacity: 0.7;
}

.iink-as-nav__panel-email-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--iink-radius-pill);
  background-color: var(--iink-bg-dark);
  flex-shrink: 0;
}

.iink-as-nav__panel-email-icon-v,
.iink-as-nav__panel-email-icon-h {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--iink-text-light);
}

.iink-as-nav__panel-email-icon-v {
  width: 1.5px;
  height: 0.9rem;
}

.iink-as-nav__panel-email-icon-h {
  width: 0.9rem;
  height: 1.5px;
}

.iink-as-nav__panel-email-text {
  font-family: var(--iink-font-heading);
  font-size: var(--iink-text-lg);
  font-weight: var(--iink-font-weight-bold);
  letter-spacing: var(--iink-ls-heading);
  line-height: 1.1;
  color: var(--iink-text);
}

/* Copyright */
.iink-as-nav__panel-footer {
  font-family: var(--iink-font-body);
  font-size: var(--iink-text-xs);
  letter-spacing: var(--iink-ls-body);
  color: var(--iink-text);
  opacity: 0.6;
}