/* ============================================================================
   Kinedu shell — clon 1:1 del nav de kinedu.com (píldora flotante) y del fondo
   de los funnels de masterclasses (crema + dos círculos suaves).

   Fuente de verdad: kinedu-landing/styles.css (.navbar/.nav-pill/.lang-toggle/
   .nav-dropdown) y kinedu-master-classes/src/components/SiteNav.tsx +
   globals.css (k-nav-*). Mismas métricas: píldora 1100px × 60px, blur 28,
   52px + fondo sólido al hacer scroll, links 0.86rem/700, toggle greige con
   chip blanco/azul, CTA #2B8BE4, portal 38px.

   Este archivo lo usan la landing (/assessment/*) y el app (/assessment/app)
   — cambiarlo aquí cambia los dos, que es la idea.
   ========================================================================== */

:root {
  --k-blue: #2B8BE4;
  --k-blue-action: #087BF3;
  --k-navy: #081B46;
  --k-ink: #1A1D2E;
  --k-ink-2: #4A5068;
  --k-ink-3: #8B93A7;
  --k-cream: #FBFAF8;
  --k-greige: #F5F4F0;
  --k-line: #EBE6DF;
  --k-yellow: #F9BA48;
  --k-font: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
}

/* ── barra ───────────────────────────────────────────────────────────────── */
.k-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  padding: 20px 32px; pointer-events: none;
  font-family: var(--k-font);
  transition: padding .5s cubic-bezier(.4, 0, .2, 1);
}
.k-navbar.scrolled { padding: 8px 32px; }
section[id], div[id] { scroll-margin-top: 96px; }

.k-nav-pill {
  max-width: 1100px; margin: 0 auto; padding: 0 12px 0 28px;
  display: flex; align-items: center; justify-content: space-between; height: 60px;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
  pointer-events: all; box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
  transition: all .5s cubic-bezier(.4, 0, .2, 1);
}
.k-navbar.scrolled .k-nav-pill {
  height: 52px; background: rgba(255, 255, 255, .95);
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .03);
}

.k-nav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; z-index: 10; background: none; border: 0; padding: 0; cursor: pointer; }
.k-nav-logo img { height: 30px; width: auto; display: block; }

/* ── links del centro ────────────────────────────────────────────────────── */
.k-nav-links { display: flex; gap: 4px; align-items: center; position: relative; }
.k-nav-links a, .k-nav-dd-toggle {
  white-space: nowrap; font-size: .86rem; font-weight: 700; color: var(--k-ink);
  text-decoration: none; padding: 7px 10px; border-radius: 999px; position: relative;
  transition: color .3s ease, background .3s ease;
}
.k-nav-links a:hover { color: var(--k-ink); }
.k-nav-links a.k-nav-active, .k-nav-schools.k-nav-active {
  color: var(--k-blue); background: rgba(43, 139, 228, .08); font-weight: 600;
}

/* dropdown "Team" */
.k-nav-dd { position: relative; }
.k-nav-dd::after { content: ''; position: absolute; left: -10px; right: -10px; top: 100%; height: 18px; }
.k-nav-dd-toggle {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
  cursor: pointer; font-family: inherit; padding: 7px 12px;
}
.k-nav-dd-toggle svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform .22s ease; }
.k-nav-dd.open .k-nav-dd-toggle svg { transform: rotate(180deg); }
.k-nav-dd-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #fff; border-radius: 18px; padding: 8px; min-width: 210px;
  box-shadow: 0 16px 48px rgba(14, 27, 44, .14), 0 2px 8px rgba(14, 27, 44, .06);
  border: 1px solid rgba(0, 0, 0, .07);
  opacity: 0; pointer-events: none; z-index: 1001;
  transition: opacity .18s ease, transform .18s ease;
}
.k-nav-dd:hover .k-nav-dd-menu, .k-nav-dd:focus-within .k-nav-dd-menu, .k-nav-dd.open .k-nav-dd-menu {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.k-nav-dd-menu.k-nav-dd-right { left: auto; right: 0; transform: translateY(-6px); }
.k-nav-dd:hover .k-nav-dd-menu.k-nav-dd-right, .k-nav-dd:focus-within .k-nav-dd-menu.k-nav-dd-right, .k-nav-dd.open .k-nav-dd-menu.k-nav-dd-right { transform: translateY(0); }
.k-nav-dd-item {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 10px 14px; border-radius: 12px; font-size: .86rem; font-weight: 700;
  color: var(--k-ink); text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.k-nav-dd-item:hover { background: var(--k-greige); color: var(--k-blue); }
.k-nav-dd-note { padding: 8px 14px 6px; font-size: .74rem; color: var(--k-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.k-nav-dd-sep { height: 1px; background: #F0EDE7; margin: 4px 6px; }

/* ── acciones de la derecha ──────────────────────────────────────────────── */
.k-nav-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* toggle EN / ES / PT — pista greige hundida, chip activo blanco con azul */
.k-lang {
  display: inline-flex; align-items: center; padding: 2px; gap: 0;
  background: var(--k-greige); border: 1px solid rgba(0, 0, 0, .06); border-radius: 999px; flex-shrink: 0;
}
.k-lang-btn {
  padding: 9px 13px; font-size: .72rem; font-weight: 600; font-family: var(--k-font);
  letter-spacing: .02em; color: var(--k-ink-3); background: transparent; border: 0;
  border-radius: 999px; cursor: pointer; line-height: 1; transition: all .25s ease;
}
.k-lang-btn:hover { color: var(--k-ink); }
.k-lang-btn.active, .k-lang-btn[aria-current="true"], .k-lang-btn[aria-pressed="true"] {
  background: #fff; color: var(--k-blue); box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.k-nav-schools {
  padding: 10px 22px; background: transparent; color: var(--k-ink-2); border-radius: 999px;
  font-size: .85rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .25s ease;
}
.k-nav-schools:hover { color: var(--k-blue); }

.k-nav-portal {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; width: 38px;
  flex-shrink: 0; color: var(--k-ink); text-decoration: none; border-radius: 999px;
  border: 1.5px solid var(--k-line); background: #fff; cursor: pointer; padding: 0;
  transition: color .25s ease, border-color .25s ease;
}
.k-nav-portal:hover, .k-nav-portal[aria-expanded="true"] { color: var(--k-blue); border-color: var(--k-blue); }

.k-nav-cta {
  padding: 10px 20px; background: var(--k-blue); color: #fff !important; border-radius: 999px;
  font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; border: none;
  display: inline-block; transition: all .25s ease;
}
.k-nav-cta:hover { background: #1D7DD9; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(43, 139, 228, .25); }

/* hamburguesa + menú móvil (bajo lg, donde los links del centro se esconden) */
.k-nav-burger {
  display: none; background: none; border: 0; width: 38px; height: 38px;
  align-items: center; justify-content: center; cursor: pointer; color: var(--k-ink);
  flex-shrink: 0; border-radius: 999px; padding: 0;
}
.k-nav-burger .ico-x { display: none; }
.k-nav-burger[aria-expanded="true"] .ico-x { display: block; }
.k-nav-burger[aria-expanded="true"] .ico-bars { display: none; }
.k-nav-mmenu {
  pointer-events: all; max-width: 1100px; margin: 8px auto 0; background: #fff;
  border-radius: 22px; border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 18px 50px rgba(8, 27, 70, .16); padding: 10px;
  display: none; flex-direction: column;
}
.k-nav-mmenu.open { display: flex; }
.k-nav-mmenu a { padding: 13px 16px; font-weight: 700; font-size: 15px; color: var(--k-ink); text-decoration: none; border-radius: 14px; }
.k-nav-mmenu a:hover, .k-nav-mmenu a:active { background: var(--k-greige); }
.k-nav-mmenu-lang { padding: 12px 16px 6px; border-top: 1px solid #F0EDE7; margin-top: 6px; display: flex; }

@media (max-width: 1023px) {
  .k-nav-links { display: none; }
  .k-nav-schools { display: none; }
  .k-nav-burger { display: inline-flex; }
}
@media (min-width: 1024px) { .k-nav-mmenu { display: none !important; } }
@media (max-width: 640px) {
  .k-navbar { padding: 12px 12px; }
  .k-navbar.scrolled { padding: 6px 12px; }
  .k-nav-pill { padding: 0 7px 0 14px; gap: 0; }
  .k-nav-actions { gap: 4px; }
  .k-nav-logo img { height: 20px; }
  .k-nav-cta { padding: 6px 10px; font-size: .7rem; }
  .k-nav-portal { height: 32px; width: 32px; }
  .k-nav-langwrap { display: none; }        /* el idioma se muda al menú */
  .k-nav-burger { width: 34px; height: 34px; }
}
@media (max-width: 470px) {
  .k-nav-pill { padding: 0 6px 0 10px; overflow: hidden; }
  .k-nav-logo img { height: 18px; }
  .k-nav-portal { height: 30px; width: 30px; }
  .k-nav-cta { padding: 6px 8px; }
  .k-nav-actions { gap: 3px; }
}

/* ── fondo de funnel (masterclasses: login / checkout / portal) ──────────── */
.k-funnel-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.k-funnel-bg span { position: absolute; border-radius: 999px; display: block; }
.k-funnel-bg .a { left: -180px; top: -120px; width: 460px; height: 460px; background: var(--k-blue-action); opacity: .06; }
.k-funnel-bg .b { right: -160px; bottom: -160px; width: 420px; height: 420px; background: var(--k-yellow); opacity: .07; }
@media print { .k-navbar, .k-funnel-bg { display: none !important; } }