/* Menú de celular, compartido por las tres páginas. Usa los tokens de cada hoja
   (--line, --ink, --cy, --head, --mono), que existen tanto en site.css como en
   speedtest.css. Aparece justo donde cada hoja esconde los enlaces del encabezado:
   1080px por defecto, 720px en la prueba de velocidad (.nav--720). */
.nav__toggle{
  display:none;flex:none;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-2);background:transparent;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:border-color .18s ease,background-color .18s ease;
}
.nav__toggle:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.nav__toggle-bar{display:block;width:16px;height:1.5px;border-radius:2px;background:var(--ink);
  transition:transform .22s ease}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.menu-movil{
  border-top:1px solid var(--line);background:#000;
  padding:10px 22px 24px;max-height:calc(100vh - 70px);overflow-y:auto;overscroll-behavior:contain;
}
.menu-movil a{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 2px;border-bottom:1px solid var(--line);
  font-family:var(--head);font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--ink);
}
.menu-movil a::after{content:"→";font-family:var(--mono);font-size:14px;color:var(--ink-3)}
.menu-movil a:hover{color:var(--cy)}
.menu-movil a[aria-current="page"]{color:var(--cy)}
.menu-movil a[aria-current="page"]::after{content:"estás aquí";font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.menu-movil__cta{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.menu-movil__cta a{justify-content:center;border-bottom:0;font-family:var(--body);font-size:15px;font-weight:600;
  padding:15px 20px;border-radius:999px}
.menu-movil__cta a::after{content:none}
.menu-movil__cta .menu-movil__primario{background:#fff;color:#000}
.menu-movil__cta .menu-movil__secundario{border:1px solid var(--line-2)}

@media (max-width:1080px){
  .nav:not(.nav--720) .nav__toggle{display:inline-flex}
  /* Sin los enlaces del medio, nada empujaba los botones a la derecha */
  .nav:not(.nav--720) .nav__actions{margin-left:auto}
}
@media (min-width:1081px){
  .nav:not(.nav--720) .menu-movil{display:none!important}
}
@media (max-width:720px){
  .nav--720 .nav__toggle{display:inline-flex}
  .nav--720 .nav__links + .btn{margin-left:auto}
}
@media (min-width:721px){
  .nav--720 .menu-movil{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .nav__toggle-bar{transition:none}
}