/* Navigation shares the soft, responsive disclosure behavior of Hola Mundo. */
@font-face {
  font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/manrope-latin-822bc47d.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/manrope-cyrillic-397e3398.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
.masthead {
  --nav-ink:#302d28; --nav-muted:#81796f; --nav-accent:#9c4b18;
  --nav-tint:#fff1df; --nav-line:#eae4db;
  position:sticky; top:0; z-index:5; background:#fffffff5;
  border-bottom:1px solid var(--nav-line); backdrop-filter:blur(12px);
  font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;
  color:var(--nav-ink); -webkit-font-smoothing:antialiased;
}
.masthead-inner { display:flex; align-items:center; gap:1.65rem; min-height:5rem; }
.masthead .brand { display:flex; flex-shrink:0; border-radius:.6rem; }
.brand-logo { display:block; width:auto; height:4.25rem; flex-shrink:0; }
.desktop-links { display:flex; align-items:center; gap:.2rem; }
.nav-link,.my-words-link {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.65rem .9rem; border-radius:999px; white-space:nowrap;
  font-size:.9375rem; font-weight:500; letter-spacing:-.02em; line-height:1.4;
  color:#514d47; text-decoration:none;
  transition:color 140ms ease,background-color 140ms ease,border-color 140ms ease;
}
.nav-link:hover,details[open]>.nav-trigger { color:var(--nav-ink); background:#f5f3ef; }
.nav-link.is-active { color:var(--nav-accent); background:var(--nav-tint); font-weight:650; }
.nav-link.is-active:hover,details[open]>.nav-trigger.is-active { background:#ffe8c9; }
.nav-trigger,.mobile-menu-toggle { list-style:none; cursor:pointer; user-select:none; }
.nav-trigger::-webkit-details-marker,.mobile-menu-toggle::-webkit-details-marker { display:none; }
.nav-chevron { flex-shrink:0; color:#a0998f; transition:transform 140ms ease; }
details[open]>.nav-trigger .nav-chevron { transform:rotate(180deg); }
.nav-dropdown { position:relative; }
.nav-panel {
  position:absolute; top:calc(100% + .65rem); left:0; z-index:6;
  width:21.5rem; max-width:calc(100vw - 2rem); padding:1rem;
  background:white; border:1px solid #e9e3d9; border-radius:1.15rem;
  box-shadow:0 14px 40px -12px #51402b30,0 3px 10px #51402b08;
}
.nav-panel::before { content:""; position:absolute; left:0; right:0; top:-.8rem; height:.8rem; }
details[open]>.nav-panel { animation:nav-panel-in 120ms ease-out; }
.nav-panel-label { margin:.1rem .6rem .65rem; color:var(--nav-muted); font-size:.64rem; line-height:1.5; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.nav-panel-link { display:flex; flex-direction:column; gap:.25rem; padding:.75rem .65rem; border-radius:.65rem; color:var(--nav-ink); font-size:.9375rem; line-height:1.4; font-weight:600; transition:background-color 120ms ease,color 120ms ease; }
.nav-panel-link small { color:var(--nav-muted); font-size:.75rem; line-height:1.5; font-weight:450; }
.nav-panel-link:hover { color:var(--nav-accent); background:#fff7ed; }
.nav-panel-link.is-active { color:var(--nav-accent); background:var(--nav-tint); }
.nav-panel-footer { display:flex; align-items:center; justify-content:space-between; margin:.75rem .6rem 0; padding:.85rem 0 .1rem; border-top:1px solid var(--nav-line); color:#756c60; font-size:.78rem; line-height:1.4; font-weight:500; }
.nav-panel-footer:hover { color:var(--nav-accent); }
.my-words-link { margin-left:auto; border:1px solid #ded7cd; padding:.6rem 1rem; background:white; }
.my-words-link:hover { background:#faf7f2; border-color:#cfc4b4; color:var(--nav-ink); }
.my-words-link.is-active { color:var(--nav-accent); background:var(--nav-tint); border-color:#eed4ac; font-weight:650; }
.masthead :is(a,summary):focus-visible { outline:2px solid #cf8b37; outline-offset:4px; }
.mobile-menu { display:none; }
@keyframes nav-panel-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:760px) {
  .masthead-inner { display:grid; grid-template-columns:1fr auto 1fr; position:relative; min-height:4rem; gap:.75rem; }
  .masthead .brand { grid-column:2; }
  .brand-logo { height:3.25rem; }
  .desktop-links,.my-words-link { display:none; }
  .mobile-menu { display:block; justify-self:end; }
  .mobile-menu-toggle { display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border-radius:.75rem; color:var(--nav-ink); transition:background-color 140ms ease; }
  .mobile-menu-toggle:hover,.mobile-menu[open]>.mobile-menu-toggle { background:#f4f1ec; }
  .menu-line { stroke:currentColor; stroke-width:1.7; stroke-linecap:round; transform-origin:center; transition:transform 140ms ease; }
  .mobile-menu[open] .menu-line-top { transform:rotate(45deg) translateY(4px); }
  .mobile-menu[open] .menu-line-bottom { transform:rotate(-45deg) translateY(-4px); }
  .mobile-nav-panel { left:1rem; right:1rem; top:calc(100% + .5rem); width:auto; padding:.9rem; max-height:calc(100dvh - 6rem); overflow-y:auto; }
  .mobile-nav-panel .nav-panel-link { padding:.85rem .7rem; min-height:2.75rem; font-size:1rem; font-weight:500; }
  .mobile-nav-panel .nav-panel-link.is-active { font-weight:650; }
  .mobile-words-link { margin-top:.65rem; border-top:1px solid var(--nav-line); border-radius:0 0 .65rem .65rem; }
}
@media(prefers-reduced-motion:reduce) {
  .masthead *,details[open]>.nav-panel { animation:none; transition:none; }
}