/* Identidade R02: azul escuro, branco e marca em vetor. */
:root{--brand-navy:#082d50;--brand-white:#fff;--coral:var(--brand-navy)}
::selection{background:var(--brand-navy);color:var(--brand-white)}
.logo,.footer-wordmark{display:inline-flex;align-items:center;min-height:44px;font-size:0!important;letter-spacing:0;line-height:0;color:transparent!important}
.logo span{display:none!important}
.logo::before,.footer-wordmark::before{content:"";display:block;width:112px;height:28px;aspect-ratio:4/1;background:url(/images/brand/logo-88lab-branco-v3.svg) center/contain no-repeat;flex:none}
.footer-wordmark::before{width:128px;height:32px}
.nav.nav-scrolled{background:#082d50;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff;border-color:#ffffff22}
.nav.nav-scrolled .links,.nav.nav-scrolled .links a,.nav.nav-scrolled .menu{color:#fff}
.nav.nav-scrolled .links a:hover{color:#cde7f7}
.nav a:focus-visible,.nav button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.nav .nav-contact,.nav:not(.nav-scrolled) .nav-contact,.nav.nav-scrolled .nav-contact,
.button.cream,.button.lime,.offer-page .button,.not-found .button,.lp-btn,
.contact button[type=submit],.contact form .button,.whatsapp-float{background:#082d50;color:#fff;border-color:#082d50}
.nav .nav-contact,.nav.nav-scrolled .nav-contact{border:1px solid #ffffff70;min-height:44px}
.button.cream:hover,.button.lime:hover,.offer-page .button:hover,.not-found .button:hover,
.lp-btn:hover,.contact button[type=submit]:hover,.nav .nav-contact:hover,.whatsapp-float:hover{background:#124b78;color:#fff}
.whatsapp-float{box-shadow:0 8px 26px #082d5033}
.not-found>.logo{background:#082d50;padding:8px 12px;border-radius:4px}
@media(max-width:700px){
 .logo::before{width:96px;height:24px}
 .footer-wordmark::before{width:112px;height:28px}
 .nav.nav-scrolled .links.open,.nav.nav-scrolled .links.open a{color:#082d50}
 .nav.nav-scrolled .links.open a:hover{color:#082d50;background:#d2e9f8}
}

/* Imagem SVG nativa e contornos simples no lugar de fundo com mascara. */
.logo:has(>.brand-logo-image)::before,.footer-wordmark:has(>.brand-logo-image)::before{display:none}
.logo>.brand-logo-image,.footer-wordmark>.brand-logo-image{display:block;flex:none;width:112px;height:28px;max-width:none;object-fit:contain;image-rendering:auto;transform:none;filter:none}
.footer-wordmark>.brand-logo-image{width:128px;height:32px}
@media(max-width:700px){.logo>.brand-logo-image{width:96px;height:24px}.footer-wordmark>.brand-logo-image{width:112px;height:28px}}

/* Logo do cabecalho: reducao discreta, mantendo a proporcao 4:1. */
.nav .logo::before,.nav .logo>.brand-logo-image{width:104px;height:26px}
@media(max-width:700px){.nav .logo::before,.nav .logo>.brand-logo-image{width:88px;height:22px}}