/* ============================================================================
   Nav flotante — thinkhub (sitio completo)

   Píldora fija, separada de los bordes, fondo esmerilado (backdrop-filter),
   SIN marco/outline alrededor. Reemplaza la navbar de borde a borde de
   main.css línea 166 (.navbar) manteniendo las mismas clases/selectores
   (.navbar, .navbar__logo, .navbar__links, .navbar__toggle) para no romper
   setupNavbarTone() ni setupDrawer() en motion.js.

   Agrega el switch de idioma (.navbar__lang) y el CTA propio (.navbar__cta)
   que en mobile se ven siempre, sin esconderse detrás del burger.
   ============================================================================ */

:root{
  /* Variante default (texto oscuro, para fondos claros). */
  --nav-glass-light: rgba(255,255,255,.28);
  --nav-glass-light-deep: rgba(255,255,255,.42);
  /* Variante .navbar--light del sitio = texto BLANCO, para fondos oscuros
     (el nombre lo pone motion.js, no lo elegimos nosotros). Vidrio más tenue
     y más oscuro para no lavar el fondo. */
  --nav-glass: rgba(255,255,255,.08);
  --nav-glass-deep: rgba(255,255,255,.12);
  --nav-shadow: 0 10px 30px -12px rgba(20,16,10,.28);
  --nav-shadow-deep: 0 14px 36px -14px rgba(20,16,10,.34);
}

.navbar{
  position: fixed;
  inset: auto;
  top: clamp(12px, 2.2vw, 22px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - clamp(24px, 5vw, 64px)));
  height: 62px;
  padding: 0 8px 0 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  z-index: 100;
  background: var(--nav-glass-light);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--nav-shadow);
  /* Sin border, sin ring: a pedido, solo el vidrio hace de límite visual. */
  border: none;
  outline: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Variante clara (texto oscuro, secciones claras) — mismo gatillo que ya usa
   el sitio (.navbar--light la pone setupNavbarTone() según la banda de atrás). */
.navbar--light{
  background: var(--nav-glass);
}

/* Tras el scroll el vidrio se cierra un poco (setupNavbar() en motion.js
   agrega/saca .is-stuck). */
.navbar.is-stuck{ background: var(--nav-glass-light-deep); box-shadow: var(--nav-shadow-deep); }
.navbar.is-stuck.navbar--light{ background: var(--nav-glass-deep); }

.navbar__logo{ flex: 0 0 auto; }

/* Agrupa burger + switch + CTA. En desktop es invisible (display:contents:
   los hijos se comportan como si fueran directos de .navbar) — la agrupación
   real solo existe para poder armar la píldora aparte en mobile. */
.navbar__controls{
  display: contents;
}

.navbar__links{
  display: flex;
  align-items: center;
  gap: 28px;
  margin-inline: auto;
}

.navbar__links a{
  font-size: .875rem;
  font-weight: var(--fw-medium);
}

/* --- Switch de idioma ------------------------------------------------------
   Segmented control de dos estados. El track queda siempre oscuro (no sigue
   el tono claro/oscuro de la página, como el CTA e isotipo): es un elemento
   de marca, no de contenido. */
.navbar__lang{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  background: rgba(23,18,14,.92);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.navbar__lang-btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.5);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.navbar__lang-btn.is-active{
  background: #F4F3EF;
  color: #171310;
}

.navbar__lang-btn:not(.is-active):hover{ color: rgba(255,255,255,.8); }

/* --- CTA -------------------------------------------------------------------
   Siempre naranja de marca, texto oscuro (mismo motivo que el isotipo: sobre
   naranja pleno un texto casi negro da 5,1:1, blanco solo 3,4:1). No usa
   .btn--primary del sitio (que es blanco sobre degradé) para no heredar
   cambios pensados para CTAs de página. */
.navbar__cta{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--c-orange, #FF5800);
  color: #1A1006;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 10px -5px rgba(0,0,0,.4);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.navbar__cta:hover{ background: #FF7A2E; transform: translateY(-1px); }

/* --- Burger (mobile) ---------------------------------------------------- */
.navbar__toggle{
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(23,18,14,.92);
  border: 0;
}
.navbar__toggle img{ width: 18px; height: 18px; filter: invert(1); }

/* ===================== Responsive ===================== */
@media (max-width: 1100px){
  .navbar{ padding-left: 20px; }
}

@media (max-width: 640px){
  /* El logo flota solo, sin píldora atrás — la píldora es solo del grupo de
     controles, a la derecha. .navbar deja de ser un contenedor visual: pasa
     a ser puro layout (flex entre logo y píldora). */
  .navbar{
    top: 14px;
    width: calc(100% - 24px);
    height: auto;
    padding: 0 12px;
    gap: 10px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .navbar.is-stuck,
  .navbar.is-stuck.navbar--light{ background: none; box-shadow: none; }

  .navbar__links{ display: none; }
  .navbar__logo{ width: 108px; height: 29px; }

  /* La píldora real: burger, switch e idioma, CTA, todos adentro. */
  .navbar__controls{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 6px 6px 6px 6px;
    border-radius: 999px;
    background: var(--nav-glass-light-deep);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--nav-shadow);
  }
  .navbar--light .navbar__controls{ background: var(--nav-glass-deep); }

  .navbar__toggle{ display: inline-flex; order: 1; width: 40px; height: 40px; }
  .navbar__lang{ order: 2; padding: 2px; }
  .navbar__lang-btn{ padding: 7px 10px; font-size: .625rem; }
  .navbar__cta{ order: 3; height: 40px; padding: 0 16px; font-size: .8125rem; }
}