.header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,247,250,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--stroke);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
}
.brand{display:flex; align-items:center; gap:14px; font-weight:800}
.brand img{width:44px;height:44px;border-radius:12px}
.menu{display:flex; gap:18px; align-items:center}
.menu a{
  color:rgba(11,15,20,.78);
  font-weight:700;
  padding:10px 10px;
  border-radius:12px;
}
.menu a:hover{background:rgba(20,87,255,.08); color:var(--black)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px;
  font-weight:800; border:1px solid transparent;
  gap:10px;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:var(--yellow); color:var(--black);
  border-color:rgba(11,15,20,.12);
  box-shadow:0 14px 34px rgba(255,196,0,.26);
}
.btn--primary:hover{background:#FFD53A}
.btn--dark{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-color:rgba(255,255,255,.18);
}
.btn--dark:hover{background:rgba(255,255,255,.14)}

.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(11,15,20,.55);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.90);
  font-weight:800; font-size:12px;
}

/* HEADER: blanco sólido (no translúcido) */
.header{
  background:#FFF;
  backdrop-filter:none;
  border-bottom:1px solid rgba(11,15,20,.10);
}

/* LOGO más grande */
.brand img{
  width:94px;
  height:auto;
  border-radius:12px;
}

/* MENÚ: más negro, sin negrita */
.menu a{
  color:rgba(11,15,20,.92);
  font-weight:500; /* antes 700 */
}

/* BOTONES: menos bold (amarillo sin negrita) */
.btn{
  font-weight:600; /* antes 800 */
}
.btn--primary{
  font-weight:600; /* asegura que no se vea bold */
}

:root{
  --brand-offset: 0px; /* si el logo tiene más padding visual, pon 6px u 8px */
}

/* =========================
   Header · Indicador activo
   Línea inferior elegante
========================= */

.menu a{
  position:relative;
}

/* Línea oculta por defecto */
.menu a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:6px;
  width:0;
  height:2px;
  background:#FFC400;
  border-radius:2px;
  transform:translateX(-50%);
  transition:width .25s ease;
}

/* Hover */
.menu a:hover::after{
  width:70%;
}

/* Página activa */
.menu a[aria-current="page"]::after{
  width:70%;
}