/* v27.1: the free online test in the menu, shown as a tool button (not a page about the app) */
.navlinks a.nav-test{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid rgba(25,195,230,.55);background:rgba(25,195,230,.12);color:#E9FBFF!important;font-weight:600;white-space:nowrap;text-decoration:none}
.navlinks a.nav-test::before{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #19C3E6}
.navlinks a.nav-test:hover,.navlinks a.nav-test[aria-current="page"]{background:rgba(25,195,230,.22);border-color:#19C3E6}
.navlinks a.nav-test[aria-current="page"]::after{display:none}
@media (max-width:900px){.navlinks a.nav-test{align-self:flex-start;margin:6px 0}}

/* v27.2: on phones and tablets the menu is collapsed, so the free test gets its own button in the header bar */
.nav-test-m{display:none}
@media (max-width:1180px){
 .nav .wrap{gap:0}
 .nav .wrap .nav-test-m{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto;margin-inline-end:10px;height:38px;padding:0 15px;border-radius:999px;
   background:linear-gradient(135deg,#1FD0EE,#0A8FBF);color:#04131C!important;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;text-decoration:none;
   box-shadow:0 8px 22px -10px rgba(25,195,230,.85)}
 .nav .wrap .nav-test-m::before{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
 .nav .wrap .nav-test-m:active{filter:brightness(.95)}
 /* Menu button drawn as three bars that turn into a cross (the ☰ character looked different on each phone) */
 .nav .navtoggle{position:relative;flex:none;width:42px;height:40px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.05);font-size:0;color:transparent}
 .nav .navtoggle::before,.nav .navtoggle::after{content:"";position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:#E9EEF3;transition:transform .2s ease,top .2s ease,box-shadow .2s ease}
 .nav .navtoggle::before{top:12px;box-shadow:0 6px 0 #E9EEF3}
 .nav .navtoggle::after{top:24px}
 .nav .navtoggle[aria-expanded="true"]{background:rgba(25,195,230,.14);border-color:rgba(25,195,230,.6)}
 .nav .navtoggle[aria-expanded="true"]::before{top:18px;transform:rotate(45deg);box-shadow:none}
 .nav .navtoggle[aria-expanded="true"]::after{top:18px;transform:rotate(-45deg)}
}
@media (max-width:1180px){.nav .brand{margin-inline-end:8px}}
@media (max-width:390px){
 .nav .wrap .nav-test-m{padding:0 11px;font-size:13px;gap:6px;margin-inline-end:8px}
 .nav .navtoggle{width:40px}
 .nav .brand{gap:7px}
 .nav .brand b{font-size:14.5px}
 html[lang^="es"] .nav .wrap .nav-test-m{font-size:12.5px;padding:0 10px}
}
@media (max-width:350px){.nav .brand b{display:none}}
@media (prefers-reduced-motion:reduce){.nav .navtoggle::before,.nav .navtoggle::after{transition:none}}
