/* ===== Topbar ===== */
:root{
  /* Colores */
  --tb-bg:#0f1214;         /* fondo oscuro */
  --tb-ink:#e8eef2;        /* texto principal */
  --tb-ink-dim:#b9c3ca;    /* texto tenue */
  --tb-accent:#E63B3F;     /* CTA rojo 7Speaking */
  --tb-line:#2a3136;       /* línea separadora inferior */

  /* Pesos tipográficos */
  --tb-w-logo: 700;
  --tb-w-link: 600;
  --tb-w-cta: 700;
}

.topbar{
  position:sticky; top:0; z-index:1000;
  background:var(--tb-bg); color:var(--tb-ink);
  border-bottom:1px solid var(--tb-line);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.tb-wrap{
  width:min(1200px,92%); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  min-height:56px; gap:16px;
}

/* ===== Logo ===== */
.tb-logo{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--tb-ink);
  font-family:"MuseoModerno",system-ui,sans-serif;
  font-weight:var(--tb-w-logo);
  font-size:1.15rem; letter-spacing:.2px;
}
.tb-logo span{
  display:inline-grid; place-items:center;
  width:26px; height:26px; border-radius:7px;
  background:var(--tb-accent); color:#fff; font-weight:900;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* ===== Nav ===== */
.tb-nav{
  display:flex; align-items:center; gap:20px;
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.tb-link{
  position:relative; display:inline-block;
  padding:14px 6px; color:var(--tb-ink); text-decoration:none;
  font-weight:var(--tb-w-link);
  letter-spacing:.1px;
}
.tb-link::after{
  content:""; position:absolute; left:0; right:0; bottom:8px; height:2px;
  background:currentColor; opacity:.9; transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.tb-link:hover::after,
.tb-link[aria-current="page"]::after{ transform:scaleX(1); }

/* Lado derecho */
.tb-right{ display:flex; align-items:center; gap:12px; margin-left:8px; }
.tb-lang{
  padding:.35rem .55rem; border:1px solid #2a3136; border-radius:.5rem;
  font-weight:var(--tb-w-link); color:var(--tb-ink-dim);
}

/* CTA */
.tb-cta{
  display:inline-block; text-decoration:none;
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:var(--tb-w-cta); color:#e8eef2;
  background:var(--tb-accent);
  padding:.55rem .9rem; border-radius:999px;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.tb-cta:hover{ filter:brightness(1.05); }

/* ===== Burger (móvil) ===== */
.tb-burger{
  display:none; background:none; border:0; cursor:pointer;
  width:38px; height:38px; border-radius:8px;
}
.tb-burger span{
  display:block; height:2px; margin:7px 6px; background:#cfd6da; border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .tb-burger{ display:inline-block; }
  .tb-nav{
    position:fixed; inset:56px 0 auto 0; background:var(--tb-bg);
    border-top:1px solid var(--tb-line);
    display:grid; gap:6px; padding:10px 16px 16px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
  }
  .tb-nav.open{ transform:none; opacity:1; pointer-events:auto; }
  .tb-right{ justify-content:flex-start; }
  .tb-link{ padding:12px 2px; }
}

/* Burger animada cuando está abierto */
.tb-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.tb-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.tb-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }