/* ==========================================================================
Smart Localiza . v3 . camada sobria
Carrega DEPOIS de main-final.css e style.css. Duas funcoes:
1) site inteiro: fontes novas, fundo liso, menu novo, cards sobrios,
fim das pilulas e dos efeitos (regras !important de proposito: elas
precisam vencer 29 mil linhas de seletores mais especificos)
2) home: componentes .v3-* das secoes refeitas
Direcao em DIRECAO_V3.md na raiz do projeto.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens. A convencao do tema: = claro,
atributo ausente (ou "dark") = escuro.
-------------------------------------------------------------------------- */
:root {
--v3-page: #FFFFFF;
--v3-page-alt: #F5F6F8;
--v3-card: #FFFFFF;
--v3-line: #E4E7EB;
--v3-line-strong: #C9D0D8;
--v3-ink: #111827;
--v3-ink-2: #4B5563;
--v3-ink-3: #6B7280;
--v3-brand: #F16000;
--v3-brand-hover: #D45400;
/* Laranja escurecido para TEXTO pequeno: o #F16000 sobre branco da ~3,1:1
e reprova em texto corrido. Este da ~4,8:1. */
--v3-brand-text: #B84A00;
--v3-brand-soft: rgba(241, 96, 0, .10);
--v3-ok: #16A34A;
--v3-shadow-menu: 0 12px 32px rgba(17, 24, 39, .10);
--v3-display: "Archivo", "Arial Narrow", Arial, sans-serif;
--v3-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--v3-mono: "Azeret Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
/* O resto do site le estas tres; trocar aqui troca as paginas internas. */
--sl-font-display: var(--v3-display);
--sl-font-body: var(--v3-body);
--sl-font-mono: var(--v3-mono);
}
:root:not([data-theme="light"]) {
--v3-page: #0F1215;
--v3-page-alt: #14181D;
--v3-card: #171C22;
--v3-line: #262D35;
--v3-line-strong: #37404A;
--v3-ink: #EDEFF2;
--v3-ink-2: #AEB6C0;
--v3-ink-3: #88919C;
--v3-shadow-menu: 0 12px 32px rgba(0, 0, 0, .45);
--v3-brand-text: #FF9147;
--v3-brand-soft: rgba(241, 96, 0, .16);
}
/* --------------------------------------------------------------------------
2. Base do site inteiro
-------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body,
[data-theme="light"] body {
background: var(--v3-page) !important;
background-image: none !important;
color: var(--v3-ink);
font-family: var(--v3-body);
font-size: 16px;
line-height: 1.6;
}
/* Grao e mesh de gradiente do fundo, e o pontilhado diagonal do tema claro. */
body::before,
body::after,
[data-theme="light"] body::before,
[data-theme="light"] body::after {
display: none !important;
content: none !important;
}
h1, h2, h3, h4,
.sl-display {
font-family: var(--v3-display);
color: var(--v3-ink);
margin: 0;
}
h1, h2 { font-variation-settings: "wdth" 110, "wght" 700; letter-spacing: -.02em; }
h3 { font-variation-settings: "wdth" 104, "wght" 650; letter-spacing: -.01em; }
h4 { font-variation-settings: "wdth" 100, "wght" 600; }
:focus-visible {
outline: 2px solid var(--v3-brand);
outline-offset: 2px;
}
.sl-wrap { max-width: 1200px; }
/* Palavra em laranja dentro de titulo: agora herda a cor do titulo. */
.sl-gt,
.sl-gt-grad,
.sl-s-head .sl-gt,
.sl-s-head .sl-gt-grad {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
color: inherit !important;
animation: none !important;
}
/* Pilulas (eyebrow) em qualquer pagina. */
.sl-chip,
.sl-bx-eyebrow,
.sl-bxnum-eyebrow,
.sl-personas-content__chip,
.sl-page-hero .sl-chip {
display: none !important;
}
/* Cabecalho de secao das paginas internas: esquerda, nao centro. */
/* Paginas internas continuam centralizadas (os blocos abaixo delas sao
centralizados no main-final.css). So a home refeita usa cabecalho a esquerda. */
.sl-s-head { gap: .75rem; }
.sl-s-head h2 {
font-size: clamp(1.7rem, 2.6vw + .6rem, 2.5rem) !important;
font-weight: 700 !important;
line-height: 1.08;
}
.sl-s-head p { color: var(--v3-ink-2); font-size: 1.05rem; }
/* Efeitos: revelacao com blur, letras fatiadas, blob do mouse, halos, orbs. */
.sl-reveal,
.sl-reveal.is-in,
.sl-reveal-children > *,
.sl-char {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
animation: none !important;
will-change: auto !important;
}
.sl-char { display: inline; }
.sl-cursor-blob,
.sl-hero::before,
.sl-hero::after,
.sl-fpx-bg,
.sl-fpx-orb,
.sl-fpx-grid,
.sl-aurora-bg,
.sl-sav-teaser-grid,
.sl-stack-map-grid,
.sl-fpx-card-shine,
.sl-bx-spot,
.sl-fpx-card-num,
.sl-fpx-card-arrow {
display: none !important;
}
/* Botoes antigos (paginas internas): retos, sem brilho, sem ima do mouse. */
.sl-btn,
.sl-btn-primary,
.sl-btn-ghost,
.sl-btn-lg,
.sl-brand-lockup {
transform: none !important;
border-radius: 8px !important;
box-shadow: none !important;
font-family: var(--v3-body) !important;
font-weight: 600 !important;
transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.sl-btn-primary::before,
.sl-btn-primary::after { display: none !important; }
.sl-btn-primary { background: var(--v3-brand) !important; color: #fff !important; }
.sl-btn-primary:hover { background: var(--v3-brand-hover) !important; }
.sl-btn-ghost {
background: transparent !important;
color: var(--v3-ink) !important;
box-shadow: inset 0 0 0 1px var(--v3-line-strong) !important;
}
.sl-btn-ghost:hover { background: var(--v3-page-alt) !important; }
/* Cards antigos (paginas internas): branco, borda, quieto. */
.sl-fpx-card, .sl-bx-card, .sl-sav-card, .sl-office-card, .sl-roi-card,
.sl-fab-card, .sl-tudo-card, .sl-smartsms-card, .sl-personas-card,
.sl-int-card, .sl-phone-card, .sl-hscroll-card, .sl-boleto-card,
.sl-team-card, .sl-id-card, .sl-tier, .sl-pkg, .sl-principle,
.sl-bento-cell, .sl-api-panel, .sl-sav-panel, .sl-pri, .sl-faq,
.sl-persona-feat, .sl-persona-pain, .sl-server, .sl-sav-highlight {
background: var(--v3-card) !important;
background-image: none !important;
border: 1px solid var(--v3-line) !important;
border-radius: 10px !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transform: none !important;
animation: none !important;
color: var(--v3-ink);
}
.sl-fpx-card:hover, .sl-bx-card:hover, .sl-sav-card:hover, .sl-office-card:hover,
.sl-roi-card:hover, .sl-fab-card:hover, .sl-tudo-card:hover, .sl-smartsms-card:hover,
.sl-personas-card:hover, .sl-int-card:hover, .sl-phone-card:hover, .sl-hscroll-card:hover,
.sl-boleto-card:hover, .sl-team-card:hover, .sl-tier:hover, .sl-pkg:hover,
.sl-principle:hover, .sl-bento-cell:hover, .sl-persona-feat:hover,
.sl-persona-pain:hover, .sl-server:hover {
border-color: var(--v3-line-strong) !important;
box-shadow: none !important;
transform: none !important;
}
.sl-fpx-card::before, .sl-fpx-card::after,
.sl-bx-card::before, .sl-bx-card::after,
.sl-sav-card::before, .sl-sav-card::after,
.sl-office-card::before, .sl-office-card::after,
.sl-roi-card::before, .sl-roi-card::after,
.sl-fab-card::before, .sl-fab-card::after,
.sl-tudo-card::before, .sl-tudo-card::after,
.sl-smartsms-card::before, .sl-smartsms-card::after,
.sl-personas-card::before, .sl-personas-card::after,
.sl-int-card::before, .sl-int-card::after,
.sl-tier::before, .sl-tier::after,
.sl-bento-cell::before, .sl-bento-cell::after,
.sl-server::before, .sl-server::after,
.sl-sav-highlight::before, .sl-sav-highlight::after {
display: none !important;
}
/* Icones com gradiente viram traco cinza; tags coloridas viram texto. */
.sl-fpx-card-icon, .sl-bx-icon {
background: none !important;
box-shadow: none !important;
border: 0 !important;
color: var(--v3-ink-3);
}
.sl-fpx-card-icon svg, .sl-bx-icon svg { stroke: var(--v3-ink-3) !important; }
.sl-fpx-card-icon svg [fill], .sl-bx-icon svg [fill] { fill: var(--v3-ink-3) !important; }
.sl-fpx-card-tag, .sl-bx-tag {
background: none !important;
border: 0 !important;
padding: 0 !important;
color: var(--v3-ink-3) !important;
font-family: var(--v3-mono) !important;
font-size: 12px !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* Rodape: sem brilho laranja subindo do chao. */
.sl-footer {
background: var(--v3-page-alt) !important;
background-image: none !important;
border-top: 1px solid var(--v3-line) !important;
color: var(--v3-ink-2);
}
.sl-footer h4 { color: var(--v3-ink); font-size: 14px; margin-bottom: 12px; }
.sl-footer a { color: var(--v3-ink-2); }
.sl-footer a:hover { color: var(--v3-ink); }
.sl-footer-bottom { border-top: 1px solid var(--v3-line); color: var(--v3-ink-3); font-size: 13px; }
/* --------------------------------------------------------------------------
3. Menu (site inteiro). Marcacao vem do walker em inc/menu-walker.php.
Barra solida, 68px, borda fina embaixo. Igual parado ou rolado.
-------------------------------------------------------------------------- */
.sl-header,
.sl-header.is-scrolled,
[data-theme="light"] .sl-header,
[data-theme="light"] .sl-header.is-scrolled {
position: sticky;
top: 0;
z-index: 50;
padding: 0 !important;
background: var(--v3-page) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid var(--v3-line) !important;
box-shadow: none !important;
transition: none !important;
}
.sl-header-inner,
.sl-header.is-scrolled .sl-header-inner,
[data-theme="light"] .sl-header.is-scrolled .sl-header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px !important;
min-height: 68px;
display: flex;
align-items: center;
gap: 28px;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: none !important;
}
.sl-brand-lockup { display: flex; align-items: center; flex: none; gap: 10px; }
.sl-brand-logo { height: 36px; width: auto; max-height: 36px; }
[data-theme="light"] .sl-brand-logo--dark { display: none; }
:root:not([data-theme="light"]) .sl-brand-logo--light { display: none; }
.sl-brand-mark { width: 30px; }
.sl-brand-name {
font-family: var(--v3-display);
font-variation-settings: "wdth" 106, "wght" 700;
font-size: 17px;
color: var(--v3-ink);
}
.sl-brand-tag { display: none; }
.sl-nav { flex: 1; min-width: 0; display: flex; }
.sl-nav-list,
.sl-nav ul.sl-nav-static {
display: flex;
align-items: center;
gap: 2px;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.sl-nav-item { position: relative; }
.sl-nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 12px;
border: 0;
border-radius: 6px;
background: none;
font-family: var(--v3-body);
font-weight: 500;
font-size: 15px;
line-height: 1;
color: var(--v3-ink-2);
text-decoration: none;
cursor: pointer;
transition: color .15s ease, background-color .15s ease;
}
.sl-nav-link:hover { color: var(--v3-ink); background: var(--v3-page-alt); }
.sl-nav-item.is-active > .sl-nav-link,
.sl-nav-link[aria-current="page"] {
color: var(--v3-ink);
background: none;
border-radius: 0;
box-shadow: inset 0 -2px 0 var(--v3-brand);
}
.sl-nav-chevron { width: 12px; height: 12px; opacity: .55; }
.sl-nav-cta-dot,
.sl-nav-cta-arrow,
.sl-nav-indicator,
.sl-nav-magic { display: none !important; }
/* "Area do cliente": botao de contorno, encostado a direita da lista. */
.sl-nav-item--cta { margin-left: auto; }
.sl-nav-item--cta > .sl-nav-link {
padding: 9px 16px;
border: 1px solid var(--v3-line-strong);
border-radius: 8px;
color: var(--v3-ink);
box-shadow: none;
}
.sl-nav-item--cta > .sl-nav-link:hover { background: var(--v3-page-alt); }
.sl-nav-item--cta.is-active > .sl-nav-link { box-shadow: none; border-color: var(--v3-brand); }
/* Dropdown: painel branco, borda, uma sombra so. Sem icones, sem barra
de gradiente (a inline do functions.php foi removida). */
.sl-nav-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 60;
min-width: 300px;
padding: 8px;
background: var(--v3-card);
border: 1px solid var(--v3-line);
border-radius: 10px;
box-shadow: var(--v3-shadow-menu);
opacity: 0;
visibility: hidden;
transform: none !important;
transition: opacity .15s ease, visibility .15s ease;
overflow: visible !important;
}
.sl-nav-dropdown::before,
.sl-nav-dropdown::after { display: none !important; }
.sl-nav-item--has-dropdown:hover > .sl-nav-dropdown,
.sl-nav-item--has-dropdown.is-open > .sl-nav-dropdown,
.sl-nav-item--has-dropdown:focus-within > .sl-nav-dropdown,
.sl-nav-link[aria-expanded="true"] + .sl-nav-dropdown,
.sl-nav-dropdown.is-open {
opacity: 1;
visibility: visible;
}
.sl-nav-dropdown ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sl-nav-dropdown-item {
display: block;
padding: 10px 12px;
border-radius: 6px;
color: var(--v3-ink);
text-decoration: none;
transition: background-color .15s ease;
}
.sl-nav-dropdown-item:hover { background: var(--v3-page-alt); }
.sl-nav-dropdown-icon { display: none !important; }
.sl-nav-dropdown-text { display: flex; flex-direction: column; gap: 2px; }
.sl-nav-dropdown-text strong { font-family: var(--v3-body); font-weight: 600; font-size: 15px; line-height: 1.3; }
.sl-nav-dropdown-text small { font-family: var(--v3-body); font-size: 13px; line-height: 1.35; color: var(--v3-ink-3); }
.sl-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.sl-theme-toggle {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 1px solid var(--v3-line);
border-radius: 8px;
background: none;
color: var(--v3-ink-2);
box-shadow: none !important;
transform: none !important;
}
.sl-theme-toggle:hover { border-color: var(--v3-line-strong); color: var(--v3-ink); }
[data-theme="light"] .sl-theme-toggle-moon { display: none; }
:root:not([data-theme="light"]) .sl-theme-toggle-sun { display: none; }
.sl-menu-toggle {
display: none;
width: 40px;
height: 36px;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 0 9px;
border: 1px solid var(--v3-line);
border-radius: 8px;
background: none;
}
.sl-menu-toggle span { display: block; height: 2px; width: 100%; background: var(--v3-ink); border-radius: 1px; }
@media (max-width: 1000px) {
.sl-nav { display: none; }
.sl-menu-toggle { display: flex; }
.sl-header-inner { gap: 12px; }
}
/* Gaveta mobile: fundo solido, links simples. */
.sl-mobile-drawer-panel {
background: var(--v3-card) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-left: 1px solid var(--v3-line);
box-shadow: var(--v3-shadow-menu) !important;
}
.sl-mobile-drawer-overlay { background: rgba(17, 24, 39, .45) !important; backdrop-filter: none !important; }
.sl-mobile-drawer-head { border-bottom: 1px solid var(--v3-line); }
.sl-mobile-drawer-link {
color: var(--v3-ink) !important;
background: none !important;
border: 0 !important;
font-family: var(--v3-body);
font-weight: 500;
}
.sl-mobile-drawer-link.is-active { color: var(--v3-brand) !important; }
.sl-mobile-drawer-icon { display: none !important; }
.sl-mobile-drawer-nav ul a { color: var(--v3-ink-2) !important; }
.sl-mobile-drawer-group { animation: none !important; opacity: 1 !important; transform: none !important; }
.sl-mobile-drawer-cta {
background: var(--v3-brand) !important;
color: #fff !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.sl-mobile-drawer-theme { color: var(--v3-ink-2) !important; background: none !important; border: 1px solid var(--v3-line) !important; border-radius: 8px !important; }
/* --------------------------------------------------------------------------
4. Componentes v3 (home)
-------------------------------------------------------------------------- */
.v3-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.v3-section { padding: 88px 0; }
.v3-section--alt { background: var(--v3-page-alt); }
.v3-section--line { border-top: 1px solid var(--v3-line); }
.v3-head { max-width: 680px; margin-bottom: 40px; }
.v3-head h2 {
font-size: clamp(1.7rem, 2.6vw + .6rem, 2.5rem);
line-height: 1.08;
text-wrap: balance;
}
.v3-head p {
margin: 14px 0 0;
font-size: 17px;
line-height: 1.55;
color: var(--v3-ink-2);
text-wrap: pretty;
}
.v3-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.v3-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v3-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px;
background: var(--v3-card);
border: 1px solid var(--v3-line);
border-radius: 10px;
color: var(--v3-ink);
text-decoration: none;
transition: border-color .15s ease;
}
.v3-card:hover { border-color: var(--v3-line-strong); }
.v3-card-title { font-size: 1.2rem; line-height: 1.25; }
.v3-card-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v3-ink-2); }
.v3-card-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.v3-card-list li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--v3-ink-2); }
/* Tique desenhado com duas bordas: nao depende de fonte nem de SVG.
E o principal detalhe de cor da marca no corpo da pagina. */
.v3-card-list li::before {
content: "";
position: absolute;
left: 2px;
top: .38em;
width: 5px;
height: 9px;
border: solid var(--v3-brand);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.v3-card-list strong { color: var(--v3-ink); font-weight: 600; }
.v3-card-meta {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--v3-line);
font-family: var(--v3-mono);
font-size: 13px;
line-height: 1.4;
color: var(--v3-ink-3);
}
.v3-card-actions { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.v3-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
border: 1px solid transparent;
border-radius: 8px;
font-family: var(--v3-body);
font-weight: 600;
font-size: 15px;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.v3-btn--primary { background: var(--v3-brand); color: #fff; }
.v3-btn--primary:hover { background: var(--v3-brand-hover); color: #fff; }
.v3-btn--secondary { background: transparent; color: var(--v3-ink); border-color: var(--v3-line-strong); }
.v3-btn--secondary:hover { background: var(--v3-page-alt); }
.v3-status-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--v3-ok);
vertical-align: middle;
}
.v3-link {
color: var(--v3-ink);
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--v3-line-strong);
text-underline-offset: 3px;
}
.v3-link:hover { text-decoration-color: var(--v3-ink); }
@media (max-width: 1000px) {
.v3-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.v3-section { padding: 56px 0; }
.v3-grid-2, .v3-grid-3 { grid-template-columns: minmax(0, 1fr); }
.v3-card { padding: 22px; }
}
/* --------------------------------------------------------------------------
5. Hero (home): pitch a esquerda, calculadora de preco a direita
-------------------------------------------------------------------------- */
.v3-hero {
padding: 72px 0 88px;
border-bottom: 1px solid var(--v3-line);
}
.v3-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: 56px;
align-items: center;
}
.v3-hero-title {
font-size: clamp(2.2rem, 4.4vw + .6rem, 3.6rem);
line-height: 1.02;
letter-spacing: -.025em;
text-wrap: balance;
}
.v3-hero-lede {
max-width: 520px;
margin: 22px 0 0;
font-size: 18px;
line-height: 1.55;
color: var(--v3-ink-2);
text-wrap: pretty;
}
.v3-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.v3-hero-note { margin: 20px 0 0; font-size: 14px; color: var(--v3-ink-3); }
/* Estatisticas do hero: numero na cor da marca, legenda quieta. */
.v3-hero-stats {
display: flex;
flex-wrap: wrap;
gap: 20px 40px;
margin-top: 34px;
padding-top: 26px;
border-top: 1px solid var(--v3-line);
}
.v3-hero-stat-n {
display: block;
font-family: var(--v3-display);
font-variation-settings: "wdth" 100, "wght" 700;
font-size: clamp(1.65rem, 2.4vw, 2.15rem);
line-height: 1;
letter-spacing: -.02em;
color: var(--v3-brand);
}
.v3-hero-stat-l {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.35;
color: var(--v3-ink-3);
}
/* Calculadora. Os ganchos data-pri-* / #sl-pri-qty sao lidos por
initPricingSlider() em main.js; o JS grava --sl-fill no . */
.v3-calc {
padding: 28px;
background: var(--v3-card);
border: 1px solid var(--v3-line);
border-radius: 12px;
}
.v3-calc-title { font-size: 1.25rem; line-height: 1.25; }
.v3-calc-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--v3-ink-2); }
.v3-calc-qty {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-top: 26px;
}
.v3-calc-qty label { font-size: 14px; font-weight: 500; color: var(--v3-ink-2); }
.v3-calc-qty output {
font-family: var(--v3-mono);
font-size: 26px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--v3-ink);
}
/* Trilho do slider: as duas cores sao funcao (preenchido/vazio), nao enfeite. */
.v3-calc-range,
input[type="range"].v3-calc-range,
[data-theme="light"] input[type="range"].v3-calc-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
margin: 12px 0 8px;
border: 0;
border-radius: 2px;
background: linear-gradient(to right, var(--v3-brand) 0, var(--v3-brand) var(--sl-fill, 12%), var(--v3-line) var(--sl-fill, 12%), var(--v3-line) 100%);
outline: none;
cursor: pointer;
}
.v3-calc-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--v3-card);
border: 2px solid var(--v3-brand);
cursor: grab;
}
.v3-calc-range::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--v3-card);
border: 2px solid var(--v3-brand);
cursor: grab;
}
.v3-calc-range:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 6px; }
.v3-calc-bounds {
display: flex;
justify-content: space-between;
font-family: var(--v3-mono);
font-size: 12px;
color: var(--v3-ink-3);
}
/* Plano inicial: valor FIXO por mes para quem tem poucos rastreadores. Fica
colado nos limites do slider, que e onde o visitante ve o minimo de 20 e se
pergunta o que acontece abaixo disso. */
.v3-calc-starter {
margin: 14px 0 0;
padding: 12px 14px;
background: var(--v3-brand-soft);
border-radius: 8px;
font-size: 14px;
line-height: 1.45;
color: var(--v3-ink-2);
}
.v3-calc-starter strong {
font-weight: 600;
color: var(--v3-brand-text);
}
.v3-calc-results {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 12px;
margin: 24px 0 0;
}
.v3-calc-result {
padding: 14px 16px;
border: 1px solid var(--v3-line);
border-radius: 8px;
background: var(--v3-page-alt);
}
.v3-calc-result--main { background: var(--v3-card); border-color: var(--v3-line-strong); }
.v3-calc-result dt { margin: 0; font-size: 13px; color: var(--v3-ink-3); }
.v3-calc-result dd {
margin: 4px 0 0;
display: flex;
align-items: baseline;
gap: 4px;
font-family: var(--v3-mono);
font-variant-numeric: tabular-nums;
color: var(--v3-ink);
}
.v3-calc-result dd span { font-size: 13px; color: var(--v3-ink-3); }
.v3-calc-result dd strong { font-size: 22px; font-weight: 500; line-height: 1.1; }
.v3-calc-result--main dd strong { font-size: 30px; }
.v3-calc-result small { display: block; margin-top: 6px; font-size: 12px; color: var(--v3-ink-3); }
.v3-calc-foot {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--v3-line);
}
.v3-calc-hint { font-size: 13px; line-height: 1.4; color: var(--v3-ink-3); }
@media (max-width: 1000px) {
.v3-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.v3-hero { padding: 56px 0 64px; }
}
@media (max-width: 720px) {
.v3-hero { padding: 40px 0 56px; }
.v3-calc { padding: 22px; }
.v3-calc-results { grid-template-columns: minmax(0, 1fr); }
.v3-hero-ctas .v3-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* --------------------------------------------------------------------------
6. Secoes da home (CSS devolvido por cada agente, na ordem da pagina)
-------------------------------------------------------------------------- */
/* === personas === */
/* --------------------------------------------------------------------------
Personas (home, #personas): para quem e a plataforma.
No celular e um empilhamento simples: primeiro a narrativa (h2, lede,
estatisticas, botao), depois os dois cartoes em fluxo normal, um abaixo do
outro. A partir de 1001px vira duas colunas, a dos cartoes um pouco maior,
e os cartoes passam a ser absolutos e escalonados, um sobrepondo o outro.
-------------------------------------------------------------------------- */
.v3-personas-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
align-items: center;
}
/* Coluna dos cartoes. No celular e so uma pilha vertical, sem sobreposicao. */
.v3-personas-stack {
display: grid;
gap: 20px;
}
/* O cabecalho mora dentro da coluna da narrativa: sem o teto de 680px e sem a
margem de cabecalho de secao (quem espaca e a barra das estatisticas). */
.v3-personas-head {
max-width: none;
margin-bottom: 0;
}
.v3-personas-acao { margin-top: 30px; }
/* Quadro da imagem no topo do cartao. E o mesmo com foto ou sem foto. */
.v3-personas-img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
background: var(--v3-page-alt);
border: 1px solid var(--v3-line);
border-radius: 8px;
}
/* Sem imagem no Customizer: retangulo liso dizendo onde subir o arquivo. */
.v3-personas-img--vazia {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
font-family: var(--v3-mono);
font-size: 12px;
line-height: 1.5;
text-align: center;
text-wrap: balance;
color: var(--v3-ink-3);
}
/* Linha de destaque do cartao: o unico texto laranja da secao. */
.v3-personas-hl {
margin: -4px 0 0;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: var(--v3-brand-text);
}
/* Botao sempre no rodape do cartao, mesmo com textos de alturas diferentes. */
.v3-personas-card .v3-card-actions {
margin-top: auto;
padding-top: 8px;
}
/* Duas estatisticas, agora dentro da narrativa. */
.v3-personas-stats {
display: flex;
flex-wrap: wrap;
gap: 24px 56px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--v3-line);
}
.v3-personas-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.v3-personas-stat-n {
font-family: var(--v3-display);
font-weight: 700;
font-variation-settings: "wdth" 106, "wght" 700;
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
line-height: 1.05;
letter-spacing: -.02em;
color: var(--v3-brand);
}
.v3-personas-stat-l {
font-size: 13px;
line-height: 1.4;
color: var(--v3-ink-3);
}
/* --------------------------------------------------------------------------
Desktop: duas colunas e os dois cartoes escalonados.
-------------------------------------------------------------------------- */
@media (min-width: 1001px) {
.v3-personas-grid {
grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
gap: 56px;
}
/* A narrativa vem antes no HTML (para a secao abrir pelo h2 no celular e
para quem usa leitor de tela); aqui a coluna dos cartoes volta para a
esquerda e a narrativa para a direita. */
.v3-personas-narrativa { grid-column: 2; grid-row: 1; }
/* Os dois cartoes sao absolutos, entao a altura da coluna vem daqui. O de
cima cresce para baixo a partir do topo e o de baixo cresce para cima a
partir da base: texto maior aumenta a sobreposicao em vez de vazar para
a secao seguinte. Com imagem 16/10 o cartao fica em torno de 500px, o
que deixa cerca de 200px de sobreposicao. */
.v3-personas-stack {
display: block;
position: relative;
grid-column: 1;
grid-row: 1;
min-height: 800px;
--v3-personas-sombra: 0 8px 24px rgba(17, 24, 39, .08);
--v3-personas-sombra-alta: 0 14px 30px rgba(17, 24, 39, .13);
}
:root:not([data-theme="light"]) .v3-personas-stack {
--v3-personas-sombra: 0 8px 24px rgba(0, 0, 0, .45);
--v3-personas-sombra-alta: 0 14px 30px rgba(0, 0, 0, .55);
}
/* A unica sombra do padrao sobrio, e ela e funcional: cartao branco sobre
cartao branco so le como pilha com ela. Preta, nunca colorida. */
.v3-personas-card {
position: absolute;
width: 78%;
box-shadow: var(--v3-personas-sombra);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.v3-personas-card--topo { top: 0; left: 0; z-index: 2; }
.v3-personas-card--base { right: 0; bottom: 0; z-index: 1; }
/* focus-within junto do hover: quem chega de teclado ao botao do cartao de
baixo tambem o traz para a frente. */
.v3-personas-card:hover,
.v3-personas-card:focus-within {
z-index: 3;
border-color: var(--v3-line-strong);
box-shadow: var(--v3-personas-sombra-alta);
}
.v3-personas-card:hover { transform: translateY(-4px); }
}
/* Entre 1001 e 1200px a coluna e mais estreita e o cartao encolhe junto. */
@media (min-width: 1001px) and (max-width: 1200px) {
.v3-personas-stack { min-height: 760px; }
}
@media (max-width: 720px) {
.v3-personas-grid { gap: 32px; }
.v3-personas-stats {
gap: 22px 36px;
margin-top: 26px;
}
.v3-personas-stat { flex: 1 1 40%; }
.v3-personas-acao .v3-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.v3-personas-card { transition: none; }
.v3-personas-card:hover { transform: none; }
}
/* === bento === */
/* Recursos (#recursos): o que a sua empresa recebe. As classes prontas
(.v3-card, .v3-card-list, .v3-card-meta, .v3-card-actions) bastam;
so o titulo de cada item da lista fica em linha propria. */
.v3-recursos-list strong {
display: block;
margin-bottom: 2px;
color: var(--v3-ink);
}
/* === features === */
/* Funcionalidades (home): icone da marca no topo do card + rodape com o botao.
O resto do card usa .v3-card / .v3-card-title / -text / -meta e a grade
usa .v3-grid-3, sem regra propria. */
.v3-feat-icon {
display: grid;
place-items: center;
align-self: flex-start;
flex: none;
width: 40px;
height: 40px;
margin-bottom: 4px;
border-radius: 8px;
background: var(--v3-brand-soft);
color: var(--v3-brand);
transition: background-color .15s ease, color .15s ease;
}
.v3-feat-icon svg {
display: block;
width: 20px;
height: 20px;
}
.v3-card:hover .v3-feat-icon {
background: var(--v3-brand);
color: #fff;
}
.v3-features-more {
margin-top: 32px;
}
@media (max-width: 720px) {
.v3-features-more {
margin-top: 24px;
}
.v3-features-more .v3-btn {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.v3-feat-icon {
transition: none;
}
}
/* === logos === */
/* --------------------------------------------------------------------------
Rastreadores compativeis (template-parts/section-logos.php)
Cabecalho centralizado + galeria regular de logos, sem card e sem borda.
Cinza por padrao, cor cheia no hover ou no foco.
SUBSTITUI o bloco antigo .v3-logos-row / .v3-logos-item (linhas 800-844).
-------------------------------------------------------------------------- */
/* unica secao da home com cabecalho centralizado, porque a galeria abaixo e centralizada */
.v3-head--centro {
max-width: 720px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.v3-logos-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 32px 24px;
margin: 0;
padding: 0;
list-style: none;
}
.v3-logos-item {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
}
.v3-logos-item img {
display: block;
width: auto;
max-width: 100%;
max-height: 40px;
object-fit: contain;
filter: grayscale(1);
opacity: .45;
transition: filter .2s ease, opacity .2s ease;
}
.v3-logos-item:hover img,
.v3-logos-item:focus-within img {
filter: grayscale(0);
opacity: 1;
}
/* em tela sem mouse o hover nunca acontece: sobe o piso para o logo continuar legivel */
@media (hover: none) {
.v3-logos-item img { opacity: .7; }
}
.v3-logos-cta {
margin-top: 44px;
text-align: center;
}
@media (max-width: 1000px) {
.v3-logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.v3-logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.v3-logos-item { min-height: 34px; }
.v3-logos-item img { max-height: 34px; }
.v3-logos-cta { margin-top: 32px; }
.v3-logos-cta .v3-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.v3-logos-item img { transition: none; }
}
/* === bignum === */
/* --------------------------------------------------------------------------
Disponibilidade da plataforma (template-parts/section-bignum.php)
Substitui o bloco "=== bignum ===" inteiro que ja existe no v3.css.
Tres sinais de vida, todos honestos porque o dado e mesmo atualizado:
1. ponto verde pulsando no rotulo "atualizado a cada 90 segundos";
2. sparkline laranja por servidor (desenhado pelo JS, some sem historico);
3. flash laranja na linha quando o valor muda (classe .is-updated do JS).
Os estados por data-status continuam no bloco de compatibilidade do fim do
arquivo e nao sao repetidos aqui.
-------------------------------------------------------------------------- */
.v3-uptime-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: 48px;
align-items: start;
}
/* Rotulo ao vivo: unica animacao continua da pagina. */
@keyframes v3-uptime-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
.v3-uptime-live {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
font-family: var(--v3-mono);
font-size: 13px;
line-height: 1.2;
color: var(--v3-ink-3);
}
.v3-uptime-live .v3-status-dot {
flex: 0 0 auto;
animation: v3-uptime-pulse 2.4s ease-in-out infinite;
}
.v3-uptime-big-value {
margin: 0;
/* Fonte de titulo, nao mono: em mono a virgula ganhava uma cela inteira ("99 , 8"). */
font-family: var(--v3-display);
font-variation-settings: "wdth" 100, "wght" 600;
font-size: clamp(3rem, 6vw, 4.5rem);
font-weight: 600;
line-height: 1;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
/* Mesma regra do hero e das personas: numero de estatistica grande sai na
cor da marca. Tambem garante laranja nesta secao ja no primeiro acesso,
quando o sparkline ainda nao tem historico para desenhar. */
color: var(--v3-brand);
}
.v3-uptime-big-pct {
margin-left: .06em;
font-size: .5em;
color: var(--v3-brand);
opacity: .55;
}
.v3-uptime-big-legend {
margin: 12px 0 0;
font-size: 15px;
line-height: 1.5;
color: var(--v3-ink-3);
}
.v3-uptime-list {
list-style: none;
margin: 0;
padding: 0;
}
.v3-uptime-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 8px 24px;
padding: 18px 0;
border-top: 1px solid var(--v3-line);
background: transparent;
transition: background .6s ease;
}
/* O JS acende .is-updated por 1,4s quando o valor muda: acende e apaga sozinho. */
.v3-uptime-row.is-updated { background: var(--v3-brand-soft); }
.v3-uptime-row-id {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.v3-uptime-row-label {
font-family: var(--v3-mono);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
color: var(--v3-ink);
}
.v3-uptime-row-sub {
font-size: 14px;
line-height: 1.4;
color: var(--v3-ink-3);
}
/* Sparkline + valor andam juntos, para a linha continuar com 3 colunas. */
.v3-uptime-metric {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
}
/* O detalhe laranja da secao. Nasce escondido e so aparece quando o JS escreve
pontos reais no polyline (historico acumulado no navegador). */
.v3-uptime-spark {
display: none;
width: 44px;
height: 14px;
flex: 0 0 auto;
color: var(--v3-brand);
}
.v3-uptime-spark:has(polyline:not([points=""])) { display: inline-flex; }
/* main-final.css desliga .sl-status-spark com !important (era a barra do topo)
e ainda poe um brilho no traco. Os dois sao desfeitos so aqui dentro. */
.v3-uptime-spark .sl-status-spark {
display: block !important;
width: 100%;
height: 100%;
}
.v3-uptime-spark .sl-status-spark polyline {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
filter: none;
}
/* O span interno e o gancho do JS ao vivo (.sl-server-uptime-value). O
main-final.css o pinta em fonte display e teal (linhas 17532 e 26112);
o reset escopado abaixo desfaz isso so dentro desta secao. */
.v3-uptime-srv-val,
.v3-uptime-row .v3-uptime-srv-val .sl-server-uptime-value {
font-family: var(--v3-mono);
font-size: 17px;
font-weight: 500;
letter-spacing: 0;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--v3-ink);
transition: none;
}
.v3-uptime-row-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 1;
color: var(--v3-ink-2);
}
.v3-uptime-source {
margin: 28px 0 0;
font-family: var(--v3-mono);
font-size: 13px;
line-height: 1.5;
color: var(--v3-ink-3);
}
.v3-uptime-foot {
margin: 10px 0 0;
font-size: 15px;
}
@media (max-width: 1000px) {
.v3-uptime-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 720px) {
.v3-uptime-row { gap: 6px 16px; padding: 16px 0; }
.v3-uptime-metric { gap: 8px; }
.v3-uptime-spark { width: 32px; height: 12px; }
.v3-uptime-srv-val,
.v3-uptime-row .v3-uptime-srv-val .sl-server-uptime-value { font-size: 16px; }
.v3-uptime-source { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.v3-uptime-live .v3-status-dot { animation: none; }
.v3-uptime-row { transition: none; }
}
/* === faq === */
/* --------------------------------------------------------------------------
FAQ (home, planos, contato): lista de separados por hairline.
Sinal + / – e feito em ::after, sem rotacao nem animacao.
-------------------------------------------------------------------------- */
.v3-faq-wrap { max-width: 800px; }
.v3-faq-item { border-top: 1px solid var(--v3-line); }
.v3-faq-item:last-child { border-bottom: 1px solid var(--v3-line); }
.v3-faq-q {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 18px 0;
list-style: none;
font-family: var(--v3-body);
font-weight: 600;
font-size: 16px;
line-height: 1.4;
color: var(--v3-ink);
cursor: pointer;
}
.v3-faq-q::-webkit-details-marker { display: none; }
.v3-faq-q::after {
content: "+";
flex: none;
font-family: var(--v3-mono);
font-weight: 400;
font-size: 18px;
line-height: 1.2;
color: var(--v3-ink-3);
}
.v3-faq-item[open] > .v3-faq-q::after { content: "\2013"; }
.v3-faq-a {
max-width: 68ch;
padding: 0 0 18px;
font-size: 15px;
line-height: 1.6;
color: var(--v3-ink-2);
}
.v3-faq-more { margin: 24px 0 0; font-size: 15px; }
@media (max-width: 720px) {
.v3-faq-q { padding: 16px 0; gap: 14px; }
.v3-faq-a { padding-bottom: 16px; }
}
/* === cta === */
/* Chamada final da home (template-parts/section-cta.php) */
.v3-cta-box { max-width: 760px; }
.v3-cta-box .v3-head { max-width: none; margin-bottom: 28px; }
.v3-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.v3-cta-note {
margin: 18px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--v3-ink-3);
}
@media (max-width: 720px) {
.v3-cta-actions .v3-btn { width: 100%; }
}
/* --------------------------------------------------------------------------
7. Ajustes pos-render (primeira rodada de fotos)
-------------------------------------------------------------------------- */
/* Icone do toggle: o CSS antigo empilha sol e lua por grid e esconde por opacity. */
.sl-theme-toggle svg {
opacity: 1 !important;
transform: none !important;
grid-area: auto !important;
position: static !important;
width: 18px;
height: 18px;
}
/* Marca SVG de fallback (sem logo no Customizer): parada. */
.sl-brand-mark,
.sl-brand-lockup:hover .sl-brand-mark {
animation: none !important;
transform: none !important;
}
/* Preco na fonte de titulo: em mono a virgula ganhava uma cela inteira ("3 , 00"). */
.v3-calc-result dd strong {
font-family: var(--v3-display);
font-variation-settings: "wdth" 100, "wght" 600;
letter-spacing: -.01em;
}
/* Titulos das colunas do rodape: texto normal, nao mono em caixa alta. */
.sl-footer-col h4 {
font-family: var(--v3-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--v3-ink) !important;
}
/* Banner de cookies: cartao branco com borda, sem blur, sem seta. */
.sl-cookies { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.sl-cookies {
background: var(--v3-card) !important;
background-image: none !important;
color: var(--v3-ink) !important;
border: 1px solid var(--v3-line) !important;
border-radius: 10px !important;
box-shadow: var(--v3-shadow-menu) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.sl-cookies-title { font-family: var(--v3-body) !important; font-weight: 600 !important; color: var(--v3-ink) !important; }
.sl-cookies-text { color: var(--v3-ink-2) !important; }
.sl-cookies-text a { color: var(--v3-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
.sl-cookies-cat { color: var(--v3-ink-2) !important; }
.sl-cookies-btn {
border-radius: 8px !important;
box-shadow: none !important;
transform: none !important;
font-family: var(--v3-body) !important;
font-weight: 600 !important;
background-image: none !important;
}
.sl-cookies-btn--primary { background: var(--v3-brand) !important; color: #fff !important; border: 1px solid transparent !important; }
.sl-cookies-btn--primary:hover { background: var(--v3-brand-hover) !important; }
.sl-cookies-btn--ghost { background: transparent !important; color: var(--v3-ink) !important; border: 1px solid var(--v3-line-strong) !important; }
/* --------------------------------------------------------------------------
8. Revisao adversarial (5 lentes + ceticos): o que sobreviveu
-------------------------------------------------------------------------- */
html { scroll-padding-top: 84px; }
/* Enfeites que o main-final ainda gerava por pseudo-elemento ou por JS. */
.sl-nav-link::after,
.sl-nav-dropdown-item::before,
.sl-nav-dropdown-item::after,
.sl-theme-toggle::before,
.sl-scroll-bar,
.sl-copies-toast,
.sl-mobile-drawer-link::before,
.sl-mobile-drawer-arrow,
.sl-footer-col a::after,
.sl-btn-arrow::after,
.sl-persona-hero::before,
.sl-persona-hero::after,
.sl-plat-hero-who,
.sl-plat-bridge-eyebrow,
.sl-contact-mapsplit-eyebrow {
content: none !important;
display: none !important;
}
/* Menu no tema claro: as variantes [data-theme="light"] do main-final venciam. */
[data-theme="light"] .sl-nav-link { color: var(--v3-ink-2); }
[data-theme="light"] .sl-nav-link:hover { color: var(--v3-ink); background: var(--v3-page-alt); }
[data-theme="light"] .sl-nav-item.is-active > .sl-nav-link,
[data-theme="light"] .sl-nav-link[aria-current="page"] { color: var(--v3-ink); background: none; }
[data-theme="light"] .sl-nav-dropdown {
background: var(--v3-card);
border-color: var(--v3-line);
box-shadow: var(--v3-shadow-menu);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-theme="light"] .sl-nav-dropdown-item:hover,
.sl-nav-dropdown-item:hover { background: var(--v3-page-alt); color: var(--v3-ink); }
[data-theme="light"] .sl-nav-dropdown-text strong { color: var(--v3-ink); }
[data-theme="light"] .sl-nav-dropdown-text small { color: var(--v3-ink-3); }
.sl-theme-toggle:hover,
:root[data-theme="light"] .sl-theme-toggle:hover {
background: none;
border-color: var(--v3-line-strong);
color: var(--v3-ink);
}
.sl-theme-toggle:focus-visible,
:root[data-theme="light"] .sl-theme-toggle:focus-visible { outline-color: var(--v3-brand); }
/* Logo igual parado ou rolado; marca de fallback sem caixa, brilho ou shimmer. */
.sl-brand-logo,
.sl-header.is-scrolled .sl-brand-logo,
.sl-header.is-scrolled .sl-brand-lockup img { height: 36px; max-height: 36px; width: auto; transition: none; }
.sl-brand-mark,
.sl-header.is-scrolled .sl-brand-mark {
width: 30px;
height: auto;
filter: none !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
transition: none;
}
.sl-brand-lockup:hover .sl-brand-name {
background: none !important;
-webkit-text-fill-color: currentColor !important;
color: var(--v3-ink) !important;
animation: none !important;
}
.sl-magnetic:active,
.sl-brand-lockup.sl-magnetic:active,
.sl-btn-primary.sl-magnetic:active { transform: none !important; }
/* Gaveta mobile: sem seta teal, sem giro no fechar, botao Tema em texto normal. */
.sl-mobile-drawer-close { border-color: var(--v3-line) !important; color: var(--v3-ink-2) !important; border-radius: 8px !important; }
.sl-mobile-drawer-close:hover { background: var(--v3-page-alt) !important; border-color: var(--v3-line-strong) !important; color: var(--v3-ink) !important; transform: none !important; }
.sl-mobile-drawer-cta:hover { transform: none !important; }
.sl-mobile-drawer-theme { font-family: var(--v3-body) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
/* Rodape: links e icones sociais sem seta, sem salto, sem laranja. */
.sl-footer-col a,
.sl-footer-col a:hover { transform: none !important; }
.sl-footer-social a { background: none !important; border-color: var(--v3-line) !important; color: var(--v3-ink-2) !important; }
.sl-footer-social a:hover { background: var(--v3-page-alt) !important; border-color: var(--v3-line-strong) !important; color: var(--v3-ink) !important; transform: none !important; }
/* Banner de cookies, painel "Personalizar": texto que ficava branco sobre branco. */
.sl-cookies-custom { border-top-color: var(--v3-line) !important; }
.sl-cookies-custom h4 {
font-family: var(--v3-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--v3-ink) !important;
}
.sl-cookies-cat { border-bottom-color: var(--v3-line) !important; }
.sl-cookies-cat strong { color: var(--v3-ink) !important; }
.sl-cookies-cat small { color: var(--v3-ink-3) !important; }
.sl-cookies-text a { text-decoration: underline !important; text-underline-offset: 3px; }
/* Disponibilidade: o JS grava data-status no ; o ponto e o texto reagem. */
.v3-uptime-row[data-status="down"] .v3-status-dot,
.v3-uptime-row[data-status="degraded"] .v3-status-dot,
.v3-uptime-row[data-status="maintenance"] .v3-status-dot { background: var(--v3-ink-3); }
.v3-uptime-row[data-status="down"] .v3-uptime-row-status-text,
.v3-uptime-row[data-status="degraded"] .v3-uptime-row-status-text,
.v3-uptime-row[data-status="maintenance"] .v3-uptime-row-status-text { font-size: 0; }
.v3-uptime-row[data-status="down"] .v3-uptime-row-status-text::before,
.v3-uptime-row[data-status="degraded"] .v3-uptime-row-status-text::before,
.v3-uptime-row[data-status="maintenance"] .v3-uptime-row-status-text::before { font-size: 13px; }
.v3-uptime-row[data-status="down"] .v3-uptime-row-status-text::before { content: "fora do ar"; }
.v3-uptime-row[data-status="degraded"] .v3-uptime-row-status-text::before { content: "instável"; }
.v3-uptime-row[data-status="maintenance"] .v3-uptime-row-status-text::before { content: "em manutenção"; }
/* Paginas internas: o que a camada generica deixava ERRADO (nao so diferente). */
.sl-btn-arrow {
color: var(--v3-ink) !important;
text-decoration: underline;
text-decoration-color: var(--v3-line-strong);
text-underline-offset: 3px;
}
.sl-btn-arrow:hover { color: var(--v3-ink) !important; text-decoration-color: var(--v3-ink); }
.sl-page-hero h1 { letter-spacing: -.025em; }
.sl-s-head h2 { letter-spacing: -.02em; }
.sl-tier.is-highlighted { border-color: var(--v3-brand) !important; box-shadow: inset 0 0 0 1px var(--v3-brand) !important; }
.sl-tier.is-highlighted .sl-tier-cta { background: var(--v3-brand) !important; color: #fff !important; box-shadow: none !important; }
.sl-pft-panel { background: none !important; border: 0 !important; }
.sl-hist-panel, .sl-rep-panel { background: var(--v3-card) !important; border: 0 !important; border-radius: 0 !important; }
.sl-sim-panel { background: var(--v3-card) !important; border: 0 !important; border-left: 1px solid var(--v3-line) !important; border-radius: 0 !important; }
.sl-contact-mapsplit-left { padding-left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem)) !important; }
.sl-screen-tag {
background: none !important;
border: 0 !important;
padding: 0 !important;
color: var(--v3-ink-3) !important;
font-family: var(--v3-mono) !important;
font-size: 12px !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.sl-screen-tag::before, .sl-screen-tag::after { display: none !important; }
.sl-roi-card-value, .sl-roi-annual-value {
background: none !important;
-webkit-text-fill-color: currentColor !important;
color: var(--v3-ink) !important;
}
.sl-sav-step {
background: none !important;
-webkit-text-fill-color: currentColor !important;
color: var(--v3-ink-3) !important;
font-family: var(--v3-mono) !important;
font-size: 13px !important;
}
.sl-404-code, .sl-special-kicker {
margin: 0 0 12px;
font-family: var(--v3-mono);
font-size: 13px;
color: var(--v3-ink-3);
}