/* ========== HEADER ========== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 44px;
  transition: background 0.5s, padding 0.4s;
}
.site-header.scrolled {
  background: #1a3326;
  padding: 16px 44px;
}
.site-header.page-header {
  background: #1a3326;
  padding: 16px 44px;
}
/* Logo button — siempre visible, con micro-affordance que indica "volver a home" */
.header-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.3s ease, transform 0.4s cubic-bezier(.2,.6,.2,1);
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.header-logo svg {
  width: 68px; height: 68px;
  filter: brightness(0) invert(1);
  transition: transform 0.55s cubic-bezier(.34,1.56,.64,1), filter 0.4s ease;
}
.header-logo-hint {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 3.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  opacity: 0;
  transform: translateX(-10px);
  transition: max-width 0.55s cubic-bezier(.6,0,.2,1),
              opacity 0.4s ease 0.06s,
              transform 0.6s cubic-bezier(.34,1.5,.5,1) 0.04s;
}
.header-logo:hover, .header-logo:focus-visible {
  background: rgba(255,255,255,0.14);
  box-shadow: 0 8px 26px -12px rgba(0,0,0,0.45);
}
.header-logo:hover svg, .header-logo:focus-visible svg {
  transform: scale(1.13) rotate(-4deg);
}
.header-logo:hover .header-logo-hint, .header-logo:focus-visible .header-logo-hint {
  max-width: 130px;
  opacity: 1;
  transform: translateX(0);
}
.header-logo:active svg { transform: scale(0.94); }
.header-logo:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 4px;
}
/* Cuando el logo es verde profundo (sobre fondo claro), el hint también */
.site-header:not(.scrolled):not(.page-header) .header-logo:hover { background: rgba(0,0,0,0.05); }

.header-right { display: flex; align-items: center; gap: 10px; }
.lang-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.65);
  cursor: pointer; transition: all 0.3s;
  font-family: 'Jost', sans-serif;
  background: transparent;
}
.lang-btn.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.75);
}
.lang-btn:hover:not(.active) { border-color: rgba(255,255,255,0.6); color: rgba(255,255,255,0.85); }
.menu-toggle {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; margin-left: 6px;
}
.menu-toggle span {
  display: block; width: 22px; height: 1px;
  background: rgba(255,255,255,0.85);
  transition: all 0.3s;
}
.menu-toggle:hover span { background: #fff; }



/* ========== NAV MENU OVERLAY ========== */
.nav-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: #182e22;
  display: flex; flex-direction: column;
  padding: 24px 44px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
  overflow: hidden;
}
/* Noise texture */
.nav-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  opacity: 1; pointer-events: none;
}
.nav-overlay.open { opacity: 1; pointer-events: all; }

.nav-overlay-header {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.nav-logo-circle {
  width: 52px; height: 52px; border-radius: 50%;
  background: #0e1f16;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-logo-circle svg { width: 32px; height: 32px; }

.nav-header-right { display: flex; align-items: center; gap: 10px; }
.nav-lang-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(245,240,220,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; letter-spacing: 0.05em;
  color: rgba(245,240,220,0.55); cursor: pointer;
  font-family: 'Jost', sans-serif;
  transition: all 0.3s; background: transparent;
}
.nav-lang-btn.active {
  background: rgba(245,240,220,0.1);
  color: #f5f0dc; border-color: rgba(245,240,220,0.65);
}
.nav-close {
  background: none; border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(245,240,220,0.3);
  display: flex; align-items: center; justify-content: center;
  color: rgba(245,240,220,0.7); font-size: 16px; line-height: 1;
  transition: all 0.3s;
}
.nav-close:hover { border-color: rgba(245,240,220,0.7); color: #f5f0dc; }

/* Navigation links */
.nav-content {
  flex: 1; display: flex; align-items: center;
  position: relative; z-index: 1; padding-top: 20px;
}
.nav-links { flex: 0 0 auto; }

.nav-link-item {
  display: block;
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 200;
  letter-spacing: 0.04em;
  line-height: 1.22;
  font-family: 'Jost', sans-serif;
  cursor: pointer;
  position: relative;
  /* base color — faint outline look */
  color: rgba(245,240,220,0.28);
  transition: letter-spacing 0.4s ease;
  user-select: none;
}
/* The solid white fill layer — clips from left */
.nav-link-item::before {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  color: #f5f0dc;
  font-weight: 200;
  white-space: nowrap;
  /* start hidden — right inset covers 100% */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link-item:hover::before {
  clip-path: inset(0 0% 0 0); /* fully revealed */
}
.nav-link-item:hover { letter-spacing: 0.07em; }

/* Ghost "Explorá Kemay." watermark */
.nav-ghost {
  position: absolute; right: -20px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Playfair Display', serif;
  font-size: clamp(72px, 11vw, 148px);
  font-weight: 700; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,240,220,0.1);
  pointer-events: none; white-space: nowrap;
  user-select: none;
}
.nav-plus {
  position: absolute; left: 47%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  color: rgba(245,240,220,0.35);
  pointer-events: none;
  font-weight: 200;
}