/* Cartoncito brand lockup — shared by every page. */
.logo-link{
  display:inline-flex;
  align-items:center;
  gap:.72rem;
  min-height:44px;
  min-width:max-content;
  text-decoration:none;
  flex-shrink:0;
}
.logo-mark{
  width:42px;
  height:42px;
  flex:0 0 42px;
  filter:drop-shadow(0 5px 8px rgba(2,18,11,.28));
  transform-origin:50% 55%;
  transition:transform .2s ease,filter .2s ease;
}
.logo-link:hover .logo-mark{
  transform:translateY(-1px) rotate(-3deg);
  filter:drop-shadow(0 7px 10px rgba(2,18,11,.4));
}
.logo-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1;
}
.logo-row{
  display:flex;
  align-items:flex-start;
  gap:.38rem;
}
.logo-text{
  color:var(--text);
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.58rem;
  font-weight:900;
  letter-spacing:.015em;
  line-height:.86;
  text-transform:none;
  white-space:nowrap;
}
.logo-accent{color:var(--gold-bright)}
.logo-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:.16rem .34rem .13rem;
  border:1px solid rgba(240,204,122,.55);
  border-radius:999px;
  background:rgba(212,175,90,.13);
  color:var(--gold-bright);
  font-family:'IBM Plex Mono',monospace;
  font-size:.48rem;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  transform:translateY(-.08rem);
  vertical-align:initial;
}
.logo-kicker{
  margin-top:.32rem;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:.48rem;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
.footer-logo{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.footer-logo .logo-mark{
  width:32px;
  height:32px;
  flex-basis:32px;
  filter:none;
}
.footer-logo .logo-text{font-size:1.2rem;color:var(--text)}
.footer-logo .logo-kicker{font-size:.42rem}

/* Estado actual visible aun sin depender solo del color. */
.nav-links a.active,
.nav-links a[aria-current="page"]{
  position:relative;
  color:var(--gold-bright,var(--gold));
}
@media (min-width:769px){
  .nav-links a.active::after,
  .nav-links a[aria-current="page"]::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-.52rem;
    left:0;
    height:2px;
    border-radius:99px;
    background:currentColor;
  }
}

/* El header es un control principal: en mobile toda la fila debe recibir el tap. */
@media (max-width:768px){
  nav{
    background:var(--ink);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .logo-link{min-height:48px}
  .nav-toggle{
    align-items:center;
    justify-content:center;
    min-width:48px;
    min-height:48px;
    padding:0;
    border-radius:8px;
  }
  .nav-toggle:focus-visible,
  .logo-link:focus-visible,
  .nav-links a:focus-visible{
    outline:2px solid var(--gold-bright,var(--gold));
    outline-offset:3px;
  }
  .nav-links li{padding:0!important}
  .nav-links li > a{
    display:flex;
    align-items:center;
    width:100%;
    min-height:48px;
    padding:.12rem 0;
    font-size:.95rem;
  }
  .nav-links li > a.active,
  .nav-links li > a[aria-current="page"]{
    padding-left:.8rem;
    box-shadow:inset 3px 0 currentColor;
  }
}

@media (max-width:420px){
  .logo-link{gap:.58rem}
  .logo-mark{width:38px;height:38px;flex-basis:38px}
  .logo-text{font-size:1.38rem}
  .logo-kicker{font-size:.43rem;letter-spacing:.13em}
}
@media (max-width:360px){
  .logo-kicker{letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  .logo-mark{transition:none}
}