/* =====================================================================
Service Outsourcing — styles.css
Ordem: 0. Fontes · 1. Tokens · 2. Base · 3. Layout · 4. Componentes
5. Seções · 6. Movimento (revelação, animações e reduced-motion)
===================================================================== */
/* =====================================================================
0. FONTES
Google Fonts hospedadas no próprio site (subset latin, que cobre
o português). Licença SIL Open Font License.
===================================================================== */
@font-face {
font-family: "League Spartan";
font-style: normal;
font-weight: 300 800; /* fonte variável: um arquivo para 300, 400, 700 e 800 */
font-display: swap;
src: url("../fonts/league-spartan-variable-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/anton-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Oswald";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/oswald-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins: usada só no bloco D.A.R. */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/poppins-300-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("../fonts/poppins-italic-300-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/poppins-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("../fonts/poppins-italic-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =====================================================================
1. TOKENS
===================================================================== */
:root {
/* Service Outsourcing */
--so-roxo: #6702F4; /* cor principal: botões, caixas, texto roxo no branco */
--so-roxo-profundo: #5202C3; /* hover, padrão tom sobre tom */
--so-roxo-destaque: #7C2AE8; /* palavras destacadas, bordas de card, divisores */
--so-lilas: #9958FF; /* overlays, destaque de título em fundo escuro */
--so-lavanda: #DBC4FF; /* números gigantes decorativos */
--so-lavanda-clara: #F7F2FF; /* fundo de seções claras */
--so-noite: #0C091B; /* fundos escuros; também cor de títulos sobre branco */
--so-noite-roxo: #28026B; /* brilhos e degradês no escuro */
--so-neon: #AE32F5; /* linhas finas, glow, sobretítulo no escuro */
--so-logo-roxo: #7C00FF; /* cores da logo: SÓ em detalhes */
--so-logo-azul: #010AE5;
--so-logo-verde: #00B300;
--so-logo-amarelo: #FFD900;
--so-texto: #545454;
--so-texto-sec: #737373;
--so-cinza-claro: #EBEBEB;
--so-branco: #FFFFFF;
/* D.A.R.: usar SOMENTE dentro de .bloco-dar */
--dar-azul: #2E3091;
--dar-azul-profundo: #2B2D85;
--dar-azul-destaque: #195EC6;
--dar-texto: #737373;
/* Layout */
--container: 1240px;
--gutter: 24px; /* 16px no mobile */
--secao-y: clamp(72px, 9vw, 120px);
--raio-card: 24px;
--raio-destaque: 28px;
--raio-pill: 999px;
--sombra-card: 0 10px 30px rgba(82, 2, 195, .10);
--degrade-noite: radial-gradient(circle at 30% 20%, #28026B 0%, #0C091B 55%, #04020F 100%);
/* Tipografia */
--fonte-base: "League Spartan", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
--fonte-impacto: "Anton", Impact, "Arial Narrow", sans-serif;
--fonte-rotulo: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
--fonte-dar: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
--fs-h1: clamp(2.5rem, 5.2vw, 4.5rem);
--fs-h2: clamp(2rem, 3.6vw, 3rem);
--fs-h3: clamp(1.625rem, 2.6vw, 2.125rem);
--fs-corpo: 1.0625rem;
/* Cabeçalho e movimento */
--header-h: 80px;
--header-h-rolado: 68px;
--ease: cubic-bezier(.2, .7, .2, 1);
--transicao: .3s var(--ease);
}
@media (max-width: 767.98px) {
:root {
--gutter: 16px;
--header-h: 68px;
--header-h-rolado: 60px;
}
}
/* =====================================================================
2. BASE
===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
overflow-x: clip;
font-family: var(--fonte-base);
font-size: var(--fs-corpo);
font-weight: 400;
line-height: 1.6;
color: var(--so-texto);
background: var(--so-branco);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.menu-aberto { overflow: hidden; }
img,
svg,
video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
/* parágrafos e itens: evita uma palavra sozinha na última linha */
p, li, dd, td { text-wrap: pretty; }
/* frase que sempre começa em linha nova dentro de um título (cada linha
é balanceada sozinha; um
atrapalharia o balanceamento) */
.titulo__linha { display: block; }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
button,
input,
select,
textarea { font: inherit; color: inherit; }
address { font-style: normal; }
:focus-visible {
outline: 3px solid var(--so-neon);
outline-offset: 2px;
}
::selection { background: var(--so-lavanda); color: var(--so-noite); }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
main:focus { outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* telefones nunca quebram no meio do número */
.tel { white-space: nowrap; }
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.pular-link {
position: absolute;
top: -120px;
left: 16px;
z-index: 1000;
padding: 12px 20px;
border-radius: var(--raio-pill);
background: var(--so-roxo);
color: #fff;
font-weight: 700;
text-decoration: none;
}
.pular-link:focus { top: 16px; }
/* Ícones SVG (traço estilo Lucide) */
.icone {
width: 1.25em;
height: 1.25em;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =====================================================================
3. LAYOUT
===================================================================== */
.container {
width: min(100% - var(--gutter) * 2, var(--container));
margin-inline: auto;
}
.secao {
position: relative;
padding-block: var(--secao-y);
}
.secao--lavanda { background: var(--so-lavanda-clara); }
.secao--escura { background: var(--degrade-noite); color: #fff; }
.secao--compacta { padding-block: clamp(56px, 6vw, 88px); }
.secao__cabeca {
max-width: 780px;
margin-bottom: clamp(40px, 5vw, 64px);
}
.secao__cabeca--centro {
margin-inline: auto;
text-align: center;
}
.secao__lead {
margin-top: 20px;
font-size: 1.125rem;
}
.grade { display: grid; gap: 24px; }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) {
.grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
.grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
.grade--2,
.grade--3,
.grade--4 { grid-template-columns: minmax(0, 1fr); }
}
/* =====================================================================
4. COMPONENTES
===================================================================== */
/* ---------- Sobretítulo ---------- */
.sobretitulo {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
font-family: var(--fonte-rotulo);
font-size: .8125rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--so-roxo-destaque);
}
.sobretitulo::before {
content: "";
flex-shrink: 0;
width: 32px;
height: 3px;
border-radius: 2px;
background: currentColor;
}
.sobretitulo--escuro { color: var(--so-neon); }
.sobretitulo--branco { color: #fff; }
/* ---------- Títulos com contraste de peso (assinatura da marca) ---------- */
.titulo {
font-size: var(--fs-h2);
font-weight: 300;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--so-texto);
}
.titulo strong {
font-weight: 800;
color: var(--so-roxo-destaque);
}
.titulo--h3 { font-size: var(--fs-h3); }
.secao--escura .titulo,
.titulo--branco { color: #fff; }
.secao--escura .titulo strong { color: var(--so-lilas); }
.titulo--branco strong { color: #fff; }
/* Título de impacto (só em "O setor mudou") */
.titulo-impacto {
margin-bottom: 24px;
font-family: var(--fonte-impacto);
font-size: clamp(2.75rem, 5.4vw, 4.75rem);
font-weight: 400;
line-height: 1.02;
letter-spacing: .005em;
text-transform: uppercase;
color: #fff;
}
.titulo-impacto strong {
font-weight: 400;
color: var(--so-neon);
text-shadow: 0 0 28px rgba(174, 50, 245, .55);
}
/* ---------- Botões ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 15px 28px 13px;
border: 2px solid transparent;
border-radius: var(--raio-pill);
font-family: var(--fonte-base);
font-size: 1rem;
font-weight: 700;
line-height: 1.15;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--transicao), color var(--transicao),
border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.btn .icone { width: 1.2em; height: 1.2em; margin-top: -2px; }
.btn__seta { transition: transform var(--transicao); }
.btn:hover .btn__seta { transform: translateX(4px); }
.btn--primario {
background: var(--so-roxo);
color: #fff;
box-shadow: 0 8px 22px rgba(103, 2, 244, .28);
}
.btn--primario:hover {
background: var(--so-roxo-profundo);
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(82, 2, 195, .36);
}
.btn--secundario {
background: #fff;
color: var(--so-roxo);
border-color: var(--so-roxo);
}
.btn--secundario:hover {
background: var(--so-lavanda-clara);
transform: translateY(-2px);
}
/* Secundário em fundo escuro */
.btn--no-escuro {
background: transparent;
color: #fff;
border-color: #fff;
}
.btn--no-escuro:hover { background: rgba(255, 255, 255, .1); }
.btn--branco {
background: #fff;
color: var(--so-roxo);
box-shadow: 0 10px 26px rgba(12, 9, 27, .18);
}
.btn--branco:hover {
background: var(--so-lavanda-clara);
transform: translateY(-2px);
}
.btn--contorno-branco {
background: transparent;
color: #fff;
border-color: #fff;
}
.btn--contorno-branco:hover {
background: rgba(255, 255, 255, .12);
transform: translateY(-2px);
}
/* Link com seta */
.link-seta {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
font-weight: 700;
color: var(--so-roxo);
text-decoration: none;
}
.link-seta .icone { width: 18px; height: 18px; margin-top: -2px; transition: transform var(--transicao); }
.link-seta:hover .icone { transform: translateX(4px); }
.link-seta:hover { color: var(--so-roxo-profundo); }
/* ---------- Cards ---------- */
.card {
position: relative;
padding: 32px;
background: #fff;
border: 1px solid var(--so-cinza-claro);
border-radius: var(--raio-card);
box-shadow: var(--sombra-card);
transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.card:hover {
border-color: var(--so-roxo-destaque);
transform: translateY(-4px);
}
.card__titulo {
margin-bottom: 10px;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.25;
color: var(--so-noite);
}
.card p { font-size: 1rem; }
/* Card assinatura: borda grossa roxa */
.card-assinatura {
background: #fff;
border: 6px solid var(--so-roxo-destaque);
border-radius: var(--raio-destaque);
}
/* Caixa roxa sólida (com padrão tom sobre tom) */
.caixa-roxa {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 32px;
border-radius: var(--raio-card);
background: var(--so-roxo);
color: #fff;
}
.caixa-roxa > :not(.rede) { position: relative; z-index: 1; }
/* Badge de ícone */
.badge-icone {
display: inline-grid;
place-items: center;
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--so-lavanda-clara);
color: var(--so-roxo);
}
.badge-icone .icone { width: 26px; height: 26px; }
.badge-icone--branco { background: #fff; }
/* Lista com check */
.lista-check li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-top: 1px solid var(--so-cinza-claro);
line-height: 1.45;
}
.lista-check li:first-child { border-top: 0; padding-top: 0; }
.lista-check li:last-child { padding-bottom: 0; }
.lista-check .icone {
width: 24px;
height: 24px;
padding: 4px;
margin-top: -1px;
border-radius: 50%;
background: var(--so-lavanda-clara);
color: var(--so-roxo);
stroke-width: 3;
}
.lista-check--branca li { border-color: rgba(255, 255, 255, .2); }
.lista-check--branca .icone { background: rgba(255, 255, 255, .16); color: #fff; }
/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
padding: 8px 16px 7px;
border: 1px solid var(--so-neon);
border-radius: var(--raio-pill);
background: rgba(174, 50, 245, .08);
box-shadow: inset 0 0 14px rgba(174, 50, 245, .16), 0 0 12px rgba(174, 50, 245, .12);
font-size: .875rem;
line-height: 1.3;
color: #fff;
}
/* ---------- Accordion ---------- */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.accordion__item {
background: #fff;
border: 1px solid var(--so-cinza-claro);
border-radius: 18px;
transition: border-color var(--transicao), box-shadow var(--transicao);
}
.accordion__item.is-aberto {
border-color: var(--so-roxo-destaque);
box-shadow: var(--sombra-card);
}
.accordion__cabeca { font-size: inherit; font-weight: inherit; }
.accordion__botao {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
min-height: 68px;
padding: 18px 22px 16px 24px;
border: 0;
border-radius: 18px;
background: none;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
text-align: left;
color: var(--so-noite);
cursor: pointer;
}
.accordion__botao:hover { color: var(--so-roxo); }
.accordion__sinal {
position: relative;
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--so-lavanda-clara);
transition: background-color var(--transicao);
}
.accordion__sinal::before,
.accordion__sinal::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 2px;
margin: -1px 0 0 -6px;
border-radius: 2px;
background: var(--so-roxo);
transition: transform var(--transicao), background-color var(--transicao);
}
.accordion__sinal::after { transform: rotate(90deg); }
.is-aberto .accordion__sinal { background: var(--so-roxo); }
.is-aberto .accordion__sinal::before,
.is-aberto .accordion__sinal::after { background: #fff; }
.is-aberto .accordion__sinal::after { transform: rotate(0deg); }
.accordion__painel { display: grid; grid-template-rows: 1fr; }
.js .accordion__painel {
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows .35s var(--ease), visibility 0s linear .35s;
}
.js .accordion__item.is-aberto .accordion__painel {
grid-template-rows: 1fr;
visibility: visible;
transition: grid-template-rows .35s var(--ease), visibility 0s;
}
.accordion__conteudo { min-height: 0; overflow: hidden; }
.accordion__conteudo p { padding: 0 24px 22px; }
/* ---------- Padrão de rede geométrica (SVG clonado pelo JS) ---------- */
.rede {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.rede svg { width: 100%; height: 100%; }
.rede__linhas path {
fill: none;
stroke: var(--rede-linha);
stroke-opacity: var(--rede-linha-op, 1);
stroke-width: var(--rede-linha-w, 2);
stroke-linecap: round;
}
.rede .rn {
fill: var(--rede-fundo, none);
stroke: var(--rede-no);
stroke-opacity: var(--rede-no-op, 1);
stroke-width: var(--rede-no-w, 2.5);
stroke-linejoin: round;
}
/* a) neon — fundos escuros */
.rede--neon {
--rede-linha: var(--so-neon);
--rede-linha-op: .38;
--rede-linha-w: 1.6;
--rede-no-op: .6;
--rede-no-w: 1.6;
}
/* sem filtro de brilho no SVG animado: o filtro obrigava a repintar uma área enorme a cada quadro */
.rede--neon .rn { fill-opacity: .25; }
.rede--neon .rn--roxo { fill: var(--so-logo-roxo); stroke: var(--so-logo-roxo); }
.rede--neon .rn--azul { fill: var(--so-logo-azul); stroke: var(--so-logo-azul); }
.rede--neon .rn--verde { fill: var(--so-logo-verde); stroke: var(--so-logo-verde); }
.rede--neon .rn--amarelo { fill: var(--so-logo-amarelo); stroke: var(--so-logo-amarelo); }
/* b) tom sobre tom — caixas e faixas roxas */
.rede--tom {
--rede-linha: var(--so-roxo-profundo);
--rede-no: var(--so-roxo-profundo);
--rede-fundo: var(--so-roxo);
--rede-linha-w: 2.5;
--rede-no-w: 3;
}
/* c) claro — seções brancas ou lavanda */
.rede--clara {
--rede-linha: var(--so-lavanda);
--rede-no: var(--so-lavanda);
--rede-fundo: var(--so-lavanda-clara);
--rede-linha-w: 2;
--rede-no-w: 2.5;
}
/* ---------- Tiles de logos ---------- */
.tile {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 200px;
height: 96px;
padding: 16px 22px;
overflow: hidden;
border: 1px solid var(--so-cinza-claro);
border-radius: 16px;
background: #fff;
}
.tile img {
width: auto;
height: auto;
max-width: 100%;
max-height: 56px;
object-fit: contain;
}
/* Logos com fundo próprio preenchem o tile */
.tile--cheio { position: relative; padding: 0; border: 0; }
.tile--cheio img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-height: none;
}
/* Segware: o fundo segue o degradê vertical da própria imagem (some a emenda
quando sobra espaço) e, onde o formato do quadro permite sem cortar o logo
(proporção entre 1,8 e 3,5), a imagem cobre o quadro inteiro.
Os limites valem para quadros de 96px de altura: refaça se o .tile mudar. */
.tile--segware { background: linear-gradient(180deg, #00445F 0%, #01728C 100%); }
@media (min-width: 390px) and (max-width: 729.98px), (min-width: 768px) {
.tile--segware img { object-fit: cover; }
}
.tile--intelbras { background: #33AF2E; }
.tile--issabel { background: #443B63; }
/* ---------- Banner de consentimento (LGPD) ---------- */
/* Faixa fixa na base. Fica acima do botão flutuante (90) e abaixo do
cabeçalho e do menu mobile (100), que continuam por cima dele. */
.consent {
position: fixed;
left: 50%;
bottom: 16px;
z-index: 98;
width: min(100% - var(--gutter) * 2, var(--container));
max-height: calc(100% - 32px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 22px 28px;
border: 1px solid var(--so-cinza-claro);
border-radius: var(--raio-card);
background: #fff;
box-shadow: var(--sombra-card);
color: var(--so-texto);
translate: -50% 0;
}
.consent[hidden] { display: none; }
/* no celular, enquanto o botão "Quero uma proposta" está na tela, o banner
sobe para o topo e não cobre o botão (nem os campos, com o teclado aberto) */
.consent.is-topo {
top: calc(var(--header-h-rolado) + 8px);
bottom: auto;
max-height: calc(100% - var(--header-h-rolado) - 24px);
}
.consent__corpo {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px 32px;
}
.consent__titulo {
margin-bottom: 4px;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.3;
color: var(--so-noite);
}
.consent__texto {
font-size: .9375rem;
line-height: 1.5;
}
.consent__texto a {
font-weight: 700;
color: var(--so-roxo);
text-underline-offset: 3px;
}
.consent__acoes {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.consent__acoes .btn,
.consent__salvar {
min-height: 48px;
padding: 13px 24px 11px;
white-space: nowrap;
}
/* "Personalizar" usa o visual do botão secundário; com o painel aberto, fica marcado */
.consent__personalizar[aria-expanded="true"] { background: var(--so-lavanda-clara); }
.consent__painel {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--so-cinza-claro);
}
.consent__painel[hidden] { display: none; }
.consent__opcoes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
border: 0;
}
.consent__opcao {
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 44px;
padding: 14px 16px;
border: 1px solid var(--so-cinza-claro);
border-radius: 16px;
font-size: .875rem;
line-height: 1.45;
cursor: pointer;
}
.consent__opcao:has(input:checked:not(:disabled)) {
border-color: var(--so-roxo-destaque);
background: var(--so-lavanda-clara);
}
.consent__opcao input {
flex-shrink: 0;
width: 22px;
height: 22px;
margin: 1px 0 0;
accent-color: var(--so-roxo);
cursor: pointer;
}
.consent__opcao input:disabled { cursor: not-allowed; }
.consent__opcao strong {
display: block;
font-size: 1rem;
color: var(--so-noite);
}
.consent__salvar { margin-top: 14px; }
@media (max-width: 767.98px) {
.consent {
bottom: 12px;
max-height: calc(100% - 24px);
padding: 18px 16px 16px;
}
.consent__corpo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.consent__texto { font-size: .875rem; }
/* Aceitar e Personalizar lado a lado, com o mesmo tamanho */
.consent__acoes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.consent__acoes .btn { padding-inline: 12px; }
.consent__opcoes { grid-template-columns: minmax(0, 1fr); }
.consent__salvar { width: 100%; }
}
/* ---------- Trilha de navegação (breadcrumb) ---------- */
.trilha {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 18px;
font-size: .875rem;
color: rgba(255, 255, 255, .72);
}
.trilha li + li::before {
content: "/";
margin: 0 10px;
color: var(--so-neon);
}
.trilha a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
.trilha a:hover { color: var(--so-lavanda); }
.trilha [aria-current="page"] { color: rgba(255, 255, 255, .72); }
/* ---------- Tabela ---------- */
.tabela-rolagem {
margin-top: 18px;
overflow-x: auto;
border: 1px solid var(--so-cinza-claro);
border-radius: 16px;
}
.tabela {
width: 100%;
min-width: 560px;
border-collapse: collapse;
font-size: .9375rem;
line-height: 1.45;
text-align: left;
}
.tabela th {
padding: 14px 16px 12px;
background: var(--so-lavanda-clara);
font-weight: 700;
color: var(--so-noite);
white-space: nowrap;
}
.tabela td {
padding: 14px 16px;
border-top: 1px solid var(--so-cinza-claro);
vertical-align: top;
}
.tabela td:first-child { font-weight: 700; color: var(--so-noite); }
.tabela code {
font-family: Consolas, "SFMono-Regular", Menlo, monospace;
font-size: .875em;
color: var(--so-roxo);
}
/* No celular, a tabela não cabe: cada linha vira um cartão e cada célula
mostra o nome da coluna (atributo data-label, igual ao ). Antes, as
colunas da direita (ex.: "Base legal") ficavam escondidas na rolagem. */
@media (max-width: 639.98px) {
.tabela-rolagem { overflow: visible; border: 0; border-radius: 0; }
.tabela { min-width: 0; }
.tabela, .tabela tbody, .tabela tr, .tabela td { display: block; }
.tabela thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.tabela tr {
padding: 4px 18px;
border: 1px solid var(--so-cinza-claro);
border-radius: 16px;
}
.tabela tr + tr { margin-top: 12px; }
.tabela td { padding: 10px 0; }
.tabela td:first-child { border-top: 0; }
.tabela td::before {
content: attr(data-label);
display: block;
margin-bottom: 2px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--so-roxo);
}
}
/* ---------- Caixa de aviso ---------- */
.caixa-aviso {
margin-top: 16px;
padding: 18px 22px;
border-left: 4px solid var(--so-roxo);
border-radius: 0 16px 16px 0;
background: var(--so-lavanda-clara);
}
.caixa-aviso p + p { margin-top: 10px; }
.caixa-aviso strong { color: var(--so-noite); }
/* iframe do GTM para quem navega sem JavaScript (substitui o style inline do snippet) */
.gtm-noscript { display: none; visibility: hidden; }
/* =====================================================================
5. SEÇÕES
===================================================================== */
/* ---------- 7.1 Topbar ---------- */
.topbar {
background: var(--so-noite);
color: rgba(255, 255, 255, .8);
font-size: .8125rem;
line-height: 1.3;
}
.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 44px;
}
.topbar__itens { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.topbar__itens li,
.topbar__contato a {
display: inline-flex;
align-items: center;
gap: 8px;
}
.topbar .icone { width: 16px; height: 16px; color: var(--so-neon); }
.topbar__contato { display: flex; align-items: center; gap: 8px; }
.topbar__contato a {
min-height: 44px;
padding-inline: 6px;
text-decoration: none;
transition: color var(--transicao);
}
.topbar__contato a:hover { color: #fff; }
.topbar__insta { justify-content: center; min-width: 44px; }
.topbar__insta .icone { width: 18px; height: 18px; }
@media (max-width: 1179.98px) {
.topbar__itens li:nth-child(3) { display: none; }
}
@media (max-width: 1023.98px) {
.topbar__itens li:nth-child(2) { display: none; }
}
@media (max-width: 767.98px) {
.topbar__inner { justify-content: center; }
.topbar__itens,
.topbar__insta { display: none; }
}
/* ---------- 7.2 Cabeçalho ---------- */
.cabecalho {
position: sticky;
top: 0;
z-index: 100;
height: var(--header-h);
background: #fff;
transition: height var(--transicao), margin var(--transicao), box-shadow var(--transicao);
}
/* encolhe sem deslocar a página: a diferença de altura vira margem */
.cabecalho.is-rolado {
height: var(--header-h-rolado);
margin-bottom: calc(var(--header-h) - var(--header-h-rolado));
box-shadow: 0 8px 28px rgba(12, 9, 27, .09);
}
.cabecalho__barra {
display: flex;
align-items: center;
gap: 28px;
height: 100%;
}
.cabecalho__logo {
display: flex;
align-items: center;
margin-right: auto;
min-height: 44px;
}
.cabecalho__logo img {
width: auto;
height: 42px;
transition: height var(--transicao);
}
.is-rolado .cabecalho__logo img { height: 36px; }
.menu { display: flex; align-items: center; }
.menu__lista { display: flex; gap: clamp(16px, 1.8vw, 28px); }
.menu__link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: .9688rem;
font-weight: 400;
color: var(--so-noite);
text-decoration: none;
transition: color var(--transicao);
}
.menu__link::after {
content: "";
position: absolute;
left: 0;
bottom: 4px;
width: 0;
height: 3px;
border-radius: 2px;
background: var(--so-roxo);
transition: width var(--transicao);
}
.menu__link:hover,
.menu__link.is-ativo { color: var(--so-roxo); }
.menu__link.is-ativo::after { width: 22px; }
.menu__topo,
.menu__rodape,
.menu-botao { display: none; }
.menu-fundo {
position: fixed;
inset: 0;
z-index: 95;
background: rgba(12, 9, 27, .55);
opacity: 0;
transition: opacity .3s ease;
}
.menu-fundo.is-visivel { opacity: 1; }
@media (max-width: 1179.98px) {
.menu-botao {
display: inline-grid;
place-items: center;
width: 48px;
height: 48px;
border: 0;
border-radius: 14px;
background: var(--so-lavanda-clara);
color: var(--so-roxo);
cursor: pointer;
}
.menu-botao .icone { width: 24px; height: 24px; }
.menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 300;
flex-direction: column;
align-items: stretch;
width: min(86vw, 380px);
padding: 16px 24px 28px;
overflow-y: auto;
background: #fff;
box-shadow: -24px 0 60px rgba(12, 9, 27, .25);
transform: translateX(100%);
visibility: hidden;
transition: transform .35s var(--ease), visibility 0s linear .35s;
}
.menu.is-aberto {
transform: none;
visibility: visible;
transition: transform .35s var(--ease), visibility 0s;
}
.menu__topo {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.menu__topo img { width: auto; height: 32px; }
.menu__fechar {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 12px;
background: var(--so-lavanda-clara);
color: var(--so-roxo);
cursor: pointer;
}
.menu__fechar .icone { width: 22px; height: 22px; }
.menu__lista { flex-direction: column; gap: 0; }
.menu__link {
width: 100%;
min-height: 54px;
font-size: 1.125rem;
border-bottom: 1px solid var(--so-cinza-claro);
}
.menu__link::after { bottom: 10px; }
.menu__rodape {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: auto;
padding-top: 28px;
}
.menu__telefone {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
font-weight: 700;
color: var(--so-noite);
text-decoration: none;
}
.menu__telefone .icone { color: var(--so-roxo); width: 18px; height: 18px; }
}
@media (max-width: 639.98px) {
.cabecalho__cta { display: none; }
.cabecalho__logo img { height: 34px; }
.is-rolado .cabecalho__logo img { height: 30px; }
}
/* ---------- 7.3 Hero ---------- */
.hero {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-height: max(640px, 88vh);
padding-top: clamp(56px, 8vh, 104px);
padding-bottom: 168px;
overflow: hidden;
background: var(--so-noite);
color: #fff;
}
.hero__midia {
position: absolute;
inset: 0;
z-index: -2;
}
.hero__midia picture { display: block; width: 100%; height: 100%; }
.hero__foto {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% center;
}
.hero__midia::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(12, 9, 27, .96) 0%, rgba(12, 9, 27, .85) 40%, rgba(40, 2, 107, .45) 70%, rgba(40, 2, 107, .15) 100%);
}
.hero__rede {
inset: 0 auto 0 0;
z-index: -1;
width: 46%;
opacity: .55;
-webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
}
.hero__texto { max-width: 720px; }
.hero__titulo {
margin: 4px 0 24px;
font-size: var(--fs-h1);
line-height: 1.05;
letter-spacing: -.02em;
}
.hero__titulo span { display: block; }
.hero__titulo-forte { font-weight: 800; }
.hero__titulo-destaque { font-weight: 800; color: var(--so-lilas); }
.hero__titulo-leve { font-weight: 300; }
.hero__lead {
max-width: 610px;
font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
line-height: 1.6;
color: rgba(255, 255, 255, .86);
}
.hero__acoes {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 32px;
}
.hero__destaques {
display: flex;
margin-top: 48px;
}
.hero__destaques li {
display: flex;
flex-direction: column;
gap: 4px;
padding: 2px 22px;
border-left: 1px solid rgba(174, 50, 245, .3);
}
.hero__destaques li:first-child { padding-left: 0; border-left: 0; }
.hero__destaques strong {
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-weight: 800;
line-height: 1.1;
color: #fff;
white-space: nowrap;
}
.hero__destaques span {
max-width: 150px;
font-size: .875rem;
font-weight: 300;
line-height: 1.35;
color: rgba(255, 255, 255, .82);
}
/* Card flutuante */
.hero__card {
position: absolute;
right: max(var(--gutter), (100% - var(--container)) / 2);
bottom: 124px;
z-index: 2;
display: flex;
align-items: flex-start;
gap: 16px;
width: 340px;
padding: 22px 24px 18px;
color: var(--so-texto);
box-shadow: 0 28px 60px rgba(12, 9, 27, .4);
}
.hero__card-titulo {
margin-bottom: 4px;
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.25;
color: var(--so-noite);
}
.hero__card-texto {
margin-bottom: 6px;
font-size: .9375rem;
line-height: 1.45;
}
/* abaixo de 1200px o card encostaria na linha de destaques */
@media (max-width: 1199.98px) {
.hero__card { display: none; }
}
@media (max-width: 1023.98px) {
.hero__midia::after {
background: linear-gradient(90deg, rgba(12, 9, 27, .96) 0%, rgba(12, 9, 27, .88) 55%, rgba(40, 2, 107, .55) 100%);
}
.hero__rede { width: 70%; }
}
@media (max-width: 767.98px) {
.hero {
align-items: flex-start;
min-height: 640px;
padding-top: 48px;
padding-bottom: 96px;
}
.hero__midia::after {
background: linear-gradient(180deg, rgba(12, 9, 27, .8) 0%, rgba(12, 9, 27, .9) 45%, rgba(12, 9, 27, .97) 100%);
}
.hero__rede { width: 100%; opacity: .4; }
.hero__destaques {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 0;
margin-top: 40px;
}
.hero__destaques li { padding: 0 0 0 16px; }
.hero__destaques li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 479.98px) {
.hero__acoes .btn { width: 100%; }
}
/* ---------- 7.4 Barra de proposta ---------- */
.proposta {
position: relative;
z-index: 3;
margin-top: -80px;
}
.proposta__card {
padding: 28px 32px 24px;
border: 1px solid var(--so-cinza-claro);
border-radius: var(--raio-card);
background: #fff;
box-shadow: 0 28px 64px rgba(12, 9, 27, .14);
}
.proposta__cabeca {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 20px;
margin-bottom: 20px;
}
.proposta__titulo {
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-weight: 700;
line-height: 1.2;
color: var(--so-noite);
}
.proposta__apoio { font-size: .9375rem; color: var(--so-texto-sec); }
.proposta__form {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
align-items: start;
gap: 16px;
}
.campo label {
display: block;
margin-bottom: 6px;
font-size: .875rem;
font-weight: 700;
line-height: 18px;
color: var(--so-noite);
}
.campo label span { margin-left: 2px; color: var(--so-roxo); }
.campo input,
.campo select {
width: 100%;
height: 52px;
padding: 0 16px;
border: 1px solid #D6D0E4;
border-radius: 12px;
background-color: #fff;
font-size: 1rem;
color: var(--so-noite);
transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input::placeholder { color: var(--so-texto-sec); opacity: 1; }
.campo select {
padding-right: 44px;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236702F4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
}
.campo input:hover,
.campo select:hover { border-color: var(--so-lilas); }
.campo input:focus,
.campo select:focus {
border-color: var(--so-roxo);
box-shadow: 0 0 0 4px rgba(103, 2, 244, .12);
}
.campo [aria-invalid="true"] { border-color: #B3261E; }
.campo__erro {
margin-top: 6px;
font-size: .8125rem;
font-weight: 700;
line-height: 1.3;
color: #B3261E;
}
.campo__erro:empty { display: none; }
.proposta__botao {
height: 52px;
margin-top: 24px; /* alinha com os campos (altura do label) */
white-space: nowrap;
}
.proposta__nota {
margin-top: 14px;
font-size: .8125rem;
color: var(--so-texto-sec);
}
@media (max-width: 1199.98px) {
.proposta__form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proposta__botao { grid-column: 1 / -1; justify-self: end; margin-top: 4px; }
}
@media (max-width: 1023.98px) {
.proposta__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proposta__botao { justify-self: stretch; }
}
@media (max-width: 767.98px) {
.proposta { margin-top: -40px; }
.proposta__card { padding: 24px 20px 20px; }
.proposta__form { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* ---------- 7.5 O que a central atende ---------- */
.servicos { padding-top: clamp(64px, 7vw, 104px); }
.servicos__grade .badge-icone { margin-bottom: 22px; }
.servicos__faixa {
display: flex;
align-items: center;
gap: 24px;
margin-top: 32px;
padding: clamp(28px, 3.6vw, 40px) clamp(24px, 4vw, 52px);
}
.servicos__faixa-icone {
display: grid;
place-items: center;
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 18px;
background: rgba(255, 255, 255, .14);
color: #fff;
}
.servicos__faixa-icone .icone { width: 28px; height: 28px; }
.servicos__faixa p {
font-size: clamp(1.125rem, 1.8vw, 1.4375rem);
font-weight: 300;
line-height: 1.4;
}
.servicos__faixa strong { font-weight: 800; }
.servicos__faixa .rede { opacity: .9; }
@media (max-width: 767.98px) {
/* cards mais compactos: ícone ao lado do título */
.servicos__grade .card {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: center;
column-gap: 16px;
padding: 24px 22px;
}
.servicos__grade .badge-icone { grid-row: 1; margin-bottom: 0; }
.servicos__grade .card__titulo { margin: 0; }
.servicos__grade .card p { grid-column: 1 / -1; margin-top: 14px; }
.servicos__faixa { flex-direction: column; align-items: flex-start; gap: 18px; }
}
/* ---------- 7.6 Como funciona ---------- */
.como { overflow: hidden; }
.como > .container { position: relative; z-index: 1; }
/* padrão claro só nas laterais, sumindo antes do conteúdo */
.como__rede {
inset: 72px auto 72px auto;
width: 260px;
opacity: .9;
-webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 62%);
mask-image: linear-gradient(90deg, #000 30%, transparent 62%);
}
.como__rede--esq { left: -90px; }
.como__rede--dir { right: -90px; transform: scaleX(-1); }
.linha-tempo {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 28px;
}
/* linha que conecta os nós (do 1º ao 5º) */
.linha-tempo::before {
content: "";
position: absolute;
top: 25px;
left: 26px;
right: calc((100% - 28px * 4) / 5 - 26px);
height: 2px;
background: linear-gradient(90deg, var(--so-lavanda), var(--so-lilas) 50%, var(--so-lavanda));
}
.passo {
position: relative;
display: grid;
grid-template-areas: "no" "num" "titulo" "texto";
align-content: start;
}
.passo__no {
grid-area: no;
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 52px;
height: 52px;
margin-bottom: 18px;
border: 2px solid var(--so-lavanda);
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 20px rgba(82, 2, 195, .1);
}
.passo__no svg { width: 26px; height: 26px; }
.passo__forma { stroke: var(--so-noite); stroke-width: 1.6; stroke-linejoin: round; }
.passo__forma--roxo { fill: var(--so-logo-roxo); }
.passo__forma--azul { fill: var(--so-logo-azul); }
.passo__forma--verde { fill: var(--so-logo-verde); }
.passo__forma--amarelo { fill: var(--so-logo-amarelo); }
/* número gigante decorativo (fora da árvore de acessibilidade) */
.passo::before {
content: attr(data-num);
content: attr(data-num) / "";
grid-area: num;
font-size: clamp(4.5rem, 6.6vw, 6rem);
font-weight: 800;
line-height: .85;
letter-spacing: -.04em;
color: var(--so-lavanda);
}
.passo__titulo {
grid-area: titulo;
margin: 10px 0 8px;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.25;
color: var(--so-noite);
}
.passo p { grid-area: texto; font-size: 1rem; }
@media (max-width: 1023.98px) {
.como__rede { display: none; }
.linha-tempo {
grid-template-columns: minmax(0, 1fr);
gap: 36px;
max-width: 640px;
margin-inline: auto;
}
.linha-tempo::before {
top: 26px;
bottom: 26px;
left: 25px;
right: auto;
width: 2px;
height: auto;
background: linear-gradient(180deg, var(--so-lavanda), var(--so-lilas) 50%, var(--so-lavanda));
}
.passo {
grid-template-columns: 52px minmax(0, 1fr);
grid-template-areas: "no num" ". titulo" ". texto";
column-gap: 22px;
}
.passo__no { margin-bottom: 0; }
.passo::before { font-size: 4rem; align-self: center; }
.passo__titulo { margin-top: 6px; }
}
/* Quem faz o quê */
.papeis { margin-top: clamp(72px, 8vw, 112px); }
.papeis__titulo { margin-bottom: 40px; text-align: center; }
.papeis__grade {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
.papeis__card { padding: clamp(28px, 3.6vw, 44px); }
.papeis__cabeca {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 26px;
}
.papeis__cabeca .card__titulo { margin: 0; font-size: 1.375rem; }
.papeis__card--service .card__titulo { color: #fff; }
.papeis__card--service .badge-icone { color: var(--so-roxo); }
.papeis__mais {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 60px;
height: 60px;
border: 3px solid var(--so-lavanda);
border-radius: 50%;
background: #fff;
color: var(--so-roxo);
box-shadow: 0 10px 24px rgba(82, 2, 195, .18);
translate: -50% -50%;
}
.papeis__mais .icone { width: 26px; height: 26px; stroke-width: 2.6; }
@media (max-width: 767.98px) {
.papeis__grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
.papeis__mais {
position: relative;
top: auto;
left: auto;
margin: -14px auto;
translate: none;
}
}
/* ---------- 7.7 Por que terceirizar ---------- */
.beneficios__grade {
display: grid;
grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
align-items: stretch;
gap: clamp(32px, 5vw, 64px);
}
.beneficios__foto {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-height: 600px;
overflow: hidden;
border-radius: var(--raio-destaque);
background: var(--so-noite);
color: #fff;
}
.beneficios__foto img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 40% center;
}
.beneficios__foto::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(0deg, rgba(12, 9, 27, .92) 0%, rgba(103, 2, 244, .35) 100%);
}
.beneficios__foto-conteudo { padding: clamp(28px, 3.6vw, 44px); }
.beneficios__foto-titulo {
margin-bottom: 16px;
font-size: clamp(1.75rem, 2.6vw, 2.25rem);
font-weight: 800;
line-height: 1.1;
}
.beneficios__foto-conteudo > p:not(.sobretitulo) {
margin-bottom: 28px;
color: rgba(255, 255, 255, .88);
}
.beneficios__lado { align-self: center; }
.beneficios__itens { gap: 16px; margin-top: 32px; }
.mini-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 22px 20px;
border: 1px solid var(--so-cinza-claro);
border-radius: 20px;
background: #fff;
transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.mini-card:hover {
border-color: var(--so-roxo-destaque);
transform: translateY(-4px);
box-shadow: var(--sombra-card);
}
.mini-card__icone {
display: grid;
place-items: center;
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--so-lavanda-clara);
color: var(--so-roxo);
}
.mini-card__icone .icone { width: 24px; height: 24px; }
.mini-card__titulo {
margin-bottom: 6px;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.25;
color: var(--so-noite);
}
.mini-card p { font-size: .9375rem; line-height: 1.5; }
@media (max-width: 1199.98px) {
.beneficios__grade { grid-template-columns: minmax(0, 1fr); }
.beneficios__foto { min-height: 460px; }
.beneficios__foto-conteudo { max-width: 680px; }
}
@media (max-width: 767.98px) {
.beneficios__foto { min-height: 460px; }
}
/* ---------- 7.8 Nossa estrutura ---------- */
.estrutura__grade { align-items: stretch; }
.card--foto {
display: flex;
flex-direction: column;
padding: 0;
}
.card__midia {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: calc(var(--raio-card) - 1px) calc(var(--raio-card) - 1px) 0 0;
}
.card__midia img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}
.card--foto:hover .card__midia img { transform: scale(1.04); }
.estrutura__foto-vertical { object-position: center 58%; }
.card--foto .badge-icone {
position: relative;
z-index: 1;
margin: -28px 0 0 24px;
box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(82, 2, 195, .16);
}
.card__corpo { padding: 16px 24px 28px; }
.estrutura__roxo {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
padding: 32px 26px 28px;
}
.estrutura__icones { display: flex; flex-wrap: wrap; gap: 10px; }
.estrutura__icones .icone {
width: 50px;
height: 50px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 14px;
background: rgba(255, 255, 255, .1);
color: #fff;
}
.estrutura__roxo .card__titulo { color: #fff; }
.estrutura__roxo p { color: rgba(255, 255, 255, .9); }
/* ---------- 7.9 Tecnologias ---------- */
.tecnologias .secao__cabeca { margin-bottom: 40px; }
.marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__trilha { display: flex; width: max-content; }
.marquee__lista { display: flex; gap: 20px; padding-right: 20px; }
@media (max-width: 767.98px) {
.marquee {
-webkit-mask-image: none;
mask-image: none;
}
.marquee__trilha {
display: block;
width: min(100% - var(--gutter) * 2, var(--container));
margin-inline: auto;
}
.marquee__lista {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
padding: 0;
}
.marquee__lista--copia { display: none; }
.tile { width: auto; }
}
/* ---------- 7.10 O setor mudou ---------- */
.setor { isolation: isolate; overflow: hidden; }
.setor__brilhos {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(560px 420px at 78% 38%, rgba(174, 50, 245, .2), transparent 70%),
radial-gradient(520px 520px at 8% 96%, rgba(103, 2, 244, .2), transparent 70%);
}
/* partículas */
.setor__brilhos::before,
.setor__brilhos::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(255, 255, 255, .7) 0 1px, transparent 1.6px),
radial-gradient(circle, rgba(174, 50, 245, .9) 0 1.2px, transparent 2px);
background-size: 170px 170px, 230px 230px;
background-position: 0 0, 80px 110px;
opacity: .35;
}
.setor__brilhos::after {
background-size: 260px 260px, 310px 310px;
background-position: 120px 40px, 30px 200px;
opacity: .25;
}
.setor__rede {
z-index: -1;
opacity: .5;
-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 70%);
mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 70%);
}
.setor__grade {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: center;
gap: clamp(40px, 6vw, 88px);
}
.setor__lead {
max-width: 560px;
font-size: 1.125rem;
color: rgba(255, 255, 255, .84);
}
.setor .chips { margin: 28px 0 36px; }
/* Mapa neon */
.setor__visual { width: 100%; max-width: 500px; justify-self: center; }
.mapa { width: min(100%, 440px); margin: 0 auto; }
.mapa__arte {
position: relative;
aspect-ratio: 992 / 1004;
}
.mapa__preenchimento,
.mapa__brilho,
.mapa__contorno,
.mapa__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.mapa__preenchimento {
background: radial-gradient(circle at 63% 82%, rgba(174, 50, 245, .38) 0%, rgba(103, 2, 244, .14) 42%, rgba(40, 2, 107, .22) 100%);
/* máscara gerada de icon-brazil-map-purple.png, embutida para funcionar também abrindo o arquivo direto */
--mascara: url("data:image/webp;base64,UklGRvgDAABXRUJQVlA4TOwDAAAv70F9EI04bttIkiDZv8k/4p6jajeBiP5PAM+how8XwTN8uwABASYChJefPN6Xj376vHaNtZCwu1XdsV2JrYAbXdCn0gHzBNQBX2GXqEv8mP/lAO2bTOBdwuMnj8yRQx1KdnKXTKlC5mglG7TZGYQEt40kSdL/P51z71VVmwpHZEcICAr9H80VbCtxY8jwRLK0pUjU2OUT9AJiWf+U4Bj9YmHTSLGGe9vzu8t19C8NkW816E6c3FZ62yZVF4h1axTRul7/8HxAOIbxxiTfSkgNXHulR7WneI/bSLcNIt2VDPISRRbg+3T9Rw8WNtlagcXg5j0E0Fq8vpLdwBBb/53Hzh7vbFlfb8fbF4fhcTv2sTlVM6wOsV7/0zciro62lK1v/8qs/0zDyOU9rkA3Q9g+wvUeFjvorMF9HhVvbxXxHOBOZdgmfwGNXamyAR4noruLaM8Mk9kZ/1dny+JGQsV7pGg3v4vzDKPECa9RuYd9BnjHuy5GLQuxMwLluy1hVejeFLpdDHxXK/AdScB47GgbICRUq4UIOJ3YGA1BRnDOSrSI68DRpMf+UHZFHLDdotYAB02hyIiFC8NNTN116Sf5uaoJ0Z+fcfn9mZZ0chTMtUEMiYdxYbQBZKuL/wZ8sd4cxgWuAb6AYCtAN4BwoWxC2/7GfBnPI875CnAj/u3Ot2HZTpBfcYTY6GDel0B34vk9FesRbYF6kxvZMQS6e6TArnnItdk1b97lSLfHQTW4DgjHEF4K4wGjTEHrV4dxdeGgXHaZ7tADsK0R7HAD6iwO9aERszLo/qIZuJ8/0byiHqIEKOOQ1QA/sad+6uaVGtJt90h3xYZ0R64I96UpPxgJh0P8A3KxkQLYFuBxpxf52JTt18jYxPV53Y3yUHKLXhrbAFloEcrle5AD3qnT9ljncrfo519tE2NuoPzZRDngNOAY+yZqYeQcRFyQcfVDW+LWNnT02OJOEW9/Kpwj3ZwaOkc3Ly9w2UDjKG0+0q75S1u7y3Fu59rjO8/xzseb8/C+6CeOd76dc4639usxjn5ejnRzIvTzr1hPgG+O/9Rq/HtbuQawDaB9vK/qzduhIOH3ZsG6Q2zn81fX5T7g2JpYq+SPzckrCtaKh0CyiVQTXJNwjyb89VZNCFsfXbjNuptIz+VqI3YfJ8BIjtOd5XQrs+4ZfJHFHaNhEPxQwEUBT8NhrM6k/Wco1slGa9uIoo3GRTPuaS1heLt3brPzf2W7HFOjHZ2brCzffGS0o3On7RZ9NbZggrOzOoDwsRuomyN1ZPX5Owrjfm023KVvTP+7skYu4tk9+QQbtaS5PgUF0jzMBtLtbv2pezBdCA==");
-webkit-mask: var(--mascara) center / contain no-repeat;
mask: var(--mascara) center / contain no-repeat;
}
.mapa__brilho { filter: drop-shadow(0 0 5px rgba(174, 50, 245, .95)) drop-shadow(0 0 18px rgba(174, 50, 245, .5)); }
.mapa__contorno {
background: var(--so-neon);
/* máscara gerada de icon-brazil-map-purple.png, embutida para funcionar também abrindo o arquivo direto */
--mascara: url("data:image/webp;base64,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");
-webkit-mask: var(--mascara) center / contain no-repeat;
mask: var(--mascara) center / contain no-repeat;
}
.mapa__svg { overflow: visible; }
.mapa__rotas path {
fill: none;
stroke: #D9A8FB;
stroke-width: 3.5;
stroke-linecap: round;
stroke-dasharray: 2 14;
opacity: .9;
}
.mapa__destinos circle {
fill: var(--so-noite);
stroke: #fff;
stroke-width: 4;
}
.mapa__ponto { fill: #fff; }
.mapa__onda {
fill: none;
stroke: var(--so-neon);
stroke-width: 4;
opacity: 0;
}
.mapa__forma { opacity: .8; }
.mapa__forma--roxo { fill: var(--so-logo-roxo); }
.mapa__forma--azul { fill: var(--so-logo-azul); }
.mapa__forma--verde { fill: var(--so-logo-verde); }
.mapa__forma--amarelo { fill: var(--so-logo-amarelo); }
.mapa__legenda {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 18px;
font-size: .9375rem;
line-height: 1.4;
color: rgba(255, 255, 255, .84);
}
.mapa__legenda-ponto {
flex-shrink: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 4px rgba(174, 50, 245, .35), 0 0 12px rgba(174, 50, 245, .9);
}
/* Card de dado de mercado (vidro) */
.dado-mercado {
margin-top: 28px;
padding: 22px 26px 18px;
border: 1px solid rgba(174, 50, 245, .35);
border-radius: 20px;
background: rgba(255, 255, 255, .04);
}
.dado-mercado__lista {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.dado-mercado__lista > div + div {
padding-left: 20px;
border-left: 1px solid rgba(174, 50, 245, .3);
}
.dado-mercado dt {
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
font-weight: 800;
line-height: 1.1;
color: var(--so-lilas);
}
.dado-mercado dd {
margin-top: 6px;
font-size: .9375rem;
font-weight: 300;
line-height: 1.4;
color: rgba(255, 255, 255, .88);
}
.dado-mercado__fonte {
margin-top: 14px;
font-size: .75rem;
letter-spacing: .04em;
color: rgba(255, 255, 255, .62);
}
@media (max-width: 1023.98px) {
.setor__grade { grid-template-columns: minmax(0, 1fr); }
.setor__visual { max-width: 520px; }
}
@media (max-width: 479.98px) {
.dado-mercado__lista { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dado-mercado__lista > div + div {
padding: 14px 0 0;
border-left: 0;
border-top: 1px solid rgba(174, 50, 245, .3);
}
}
/* ---------- 7.11 Nossa origem + bloco D.A.R. ---------- */
.origem__grade {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(40px, 6vw, 88px);
}
.origem__texto .titulo { margin-bottom: 24px; }
.origem__texto p + p { margin-top: 16px; }
.origem__logos {
display: flex;
justify-content: center;
margin-top: 32px;
padding: 26px 28px;
border: 1px solid var(--so-cinza-claro);
border-radius: var(--raio-card);
background: #fff;
}
.origem__logos img { width: 100%; max-width: 440px; }
/* Ilha com a identidade da D.A.R.: sem roxo, sem neon, sem degradê, sem glow */
.bloco-dar {
overflow: hidden;
border: 1px solid var(--so-cinza-claro);
border-top: 6px solid var(--dar-azul);
border-radius: 8px;
background: #fff;
font-family: var(--fonte-dar);
color: var(--dar-texto);
box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}
.bloco-dar ::selection { background: #D5E0F4; color: var(--dar-azul-profundo); }
.bloco-dar :focus-visible { outline-color: var(--dar-azul-destaque); }
.bloco-dar__midia { aspect-ratio: 16 / 9; overflow: hidden; }
.bloco-dar__midia img { width: 100%; height: 100%; object-fit: cover; }
.bloco-dar__corpo { padding: 26px 32px 30px; }
.bloco-dar__logo { width: 132px; margin-bottom: 18px; }
.bloco-dar__rotulo {
margin-bottom: 10px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dar-azul);
}
.bloco-dar__titulo {
margin-bottom: 12px;
font-size: clamp(1.375rem, 2.1vw, 1.75rem);
font-weight: 700;
line-height: 1.25;
color: var(--dar-azul-profundo);
}
.bloco-dar__texto {
font-size: .9688rem;
font-weight: 300;
line-height: 1.7;
}
.bloco-dar__itens {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 22px 0 18px;
padding: 20px 0;
border-top: 1px solid var(--so-cinza-claro);
border-bottom: 1px solid var(--so-cinza-claro);
}
.bloco-dar__itens li {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.bloco-dar__itens img { width: 40px; height: 40px; }
.bloco-dar__itens span {
font-size: .9375rem;
font-style: italic;
font-weight: 700;
line-height: 1.3;
color: var(--dar-azul-destaque);
}
.bloco-dar__linha { font-size: .9375rem; font-weight: 300; }
.bloco-dar__acoes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 22px;
margin-top: 20px;
}
.bloco-dar__botao {
display: inline-flex;
align-items: center;
min-height: 46px;
padding: 12px 24px;
border-radius: 6px;
background: var(--dar-azul);
font-size: .9375rem;
font-weight: 700;
color: #fff;
text-decoration: none;
transition: background-color .2s ease;
}
.bloco-dar__botao:hover { background: var(--dar-azul-profundo); }
.bloco-dar__link {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: .9375rem;
font-weight: 700;
color: var(--dar-azul-destaque);
text-decoration: underline;
text-underline-offset: 3px;
}
.bloco-dar__link:hover { color: var(--dar-azul-profundo); }
.bloco-dar__link--central { font-weight: 300; color: var(--dar-texto); }
@media (max-width: 1023.98px) {
.origem__grade { grid-template-columns: minmax(0, 1fr); }
/* 640px no máximo (a foto tem 800px: maior que isso, ela ficaria ampliada)
e centralizado, em vez de encostado à esquerda com um vão à direita */
.bloco-dar { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 479.98px) {
.bloco-dar__corpo { padding: 22px 20px 24px; }
.bloco-dar__itens span { font-size: .875rem; }
}
/* ---------- 7.12 FAQ ---------- */
.faq__grade {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
gap: clamp(40px, 6vw, 88px);
}
.faq__lado {
position: sticky;
top: calc(var(--header-h) + 40px);
}
.faq__lado .btn { margin-top: 28px; }
@media (max-width: 1023.98px) {
.faq__grade { grid-template-columns: minmax(0, 1fr); }
.faq__lado { position: static; }
}
/* ---------- 7.13 CTA final ---------- */
.cta__bloco {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 48px;
padding: clamp(40px, 6vw, 76px);
overflow: hidden;
border-radius: var(--raio-destaque);
background: var(--so-roxo);
color: #fff;
}
.cta__fundo {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.cta__bloco::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(103, 2, 244, .94), rgba(82, 2, 195, .86));
}
.cta__conteudo { max-width: 660px; }
.cta__texto {
margin-top: 18px;
font-size: 1.125rem;
color: rgba(255, 255, 255, .92);
}
.cta__acoes {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 32px;
}
.cta__logo {
padding: 30px 34px;
border-radius: 24px;
background: #fff;
}
.cta__logo img { width: 150px; }
@media (max-width: 767.98px) {
.cta__bloco { grid-template-columns: minmax(0, 1fr); padding: 36px 22px; }
.cta__logo { display: none; }
.cta__acoes .btn { width: 100%; }
}
/* ---------- 7.14 Rodapé ---------- */
.rodape {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--so-noite);
color: rgba(255, 255, 255, .76);
font-size: .9375rem;
}
.rodape::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: rgba(174, 50, 245, .4);
box-shadow: 0 0 14px rgba(174, 50, 245, .5);
}
.rodape__rede { z-index: -1; opacity: .22; }
/* marca · navegação · a central · integrações · contato */
.rodape__grade {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.4fr);
gap: 40px 32px;
padding-block: 72px 56px;
}
.rodape__logo {
display: inline-block;
margin-bottom: 20px;
padding: 18px 22px;
border-radius: 20px;
background: #fff;
}
.rodape__logo img { width: 104px; }
.rodape__marca p { max-width: 300px; line-height: 1.55; }
.rodape__social {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
margin-top: 20px;
border: 1px solid rgba(174, 50, 245, .45);
border-radius: 12px;
color: #fff;
transition: background-color var(--transicao), border-color var(--transicao);
}
.rodape__social:hover { background: rgba(174, 50, 245, .18); border-color: var(--so-neon); }
.rodape__social .icone { width: 20px; height: 20px; }
.rodape__titulo {
margin-bottom: 14px;
font-family: var(--fonte-rotulo);
font-size: .8125rem;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: #fff;
}
.rodape a {
color: rgba(255, 255, 255, .76);
text-decoration: none;
transition: color var(--transicao);
}
.rodape a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rodape__coluna ul { margin: 0; padding: 0; list-style: none; }
.rodape__coluna > ul > li > a {
display: inline-flex;
align-items: center;
min-height: 40px;
}
/* Integrações: tipo (rótulo) em cima, link do parceiro embaixo */
.rodape__integracoes li + li { margin-top: 6px; }
.rodape__rotulo {
display: block;
font-size: .75rem;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255, 255, 255, .56);
}
.rodape__integracoes a { line-height: 1.4; }
.rodape__contato li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 7px 0;
line-height: 1.5;
}
.rodape__contato .icone {
width: 18px;
height: 18px;
margin-top: 2px;
color: var(--so-neon);
}
.rodape__faixa { background: #fff; color: var(--so-texto-sec); }
.rodape__faixa-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 32px;
padding-block: 18px;
}
.rodape__faixa img { width: auto; height: 48px; }
.rodape__faixa p { font-size: .875rem; }
/* espaço para o botão flutuante de WhatsApp não cobrir os links legais */
@media (min-width: 768px) {
.rodape__faixa-inner { padding-right: 170px; }
}
.rodape__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0 20px;
}
.rodape__cookies,
.rodape .rodape__legal a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0;
border: 0;
background: none;
font-family: var(--fonte-base);
font-size: .875rem;
color: var(--so-texto-sec);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.rodape__cookies:hover,
.rodape .rodape__legal a:hover { color: var(--so-roxo); }
/* sem JavaScript não há banner nem GTM: o link não faria nada */
html:not(.js) .rodape__cookies { display: none; }
/* 3 colunas: a marca ocupa duas linhas à esquerda */
@media (max-width: 1279.98px) {
.rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rodape__marca { grid-row: span 2; }
}
/* 2 colunas: a marca em cima, ocupando a largura toda */
@media (max-width: 1023.98px) {
.rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rodape__marca { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
.rodape__grade { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 56px 40px; }
.rodape__faixa-inner { flex-direction: column; text-align: center; }
.rodape__faixa img { height: auto; width: min(100%, 300px); }
.rodape__legal { flex-direction: column; justify-content: center; }
}
/* ---------- 7.15 Botão flutuante de WhatsApp ---------- */
.whats-flutuante {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 10px;
height: 56px;
padding: 2px 24px 0 18px;
border-radius: var(--raio-pill);
background: var(--so-roxo);
box-shadow: 0 14px 34px rgba(103, 2, 244, .42);
font-weight: 700;
color: #fff;
text-decoration: none;
transition: opacity .3s ease, translate .3s var(--ease), visibility 0s, background-color .2s ease;
}
.whats-flutuante:hover { background: var(--so-roxo-profundo); }
.whats-flutuante .icone { width: 26px; height: 26px; margin-top: -2px; }
.js .whats-flutuante:not(.is-visivel),
.consent-aberto .whats-flutuante {
opacity: 0;
visibility: hidden;
translate: 0 16px;
transition: opacity .3s ease, translate .3s var(--ease), visibility 0s linear .3s, background-color .2s ease;
}
@media (max-width: 767.98px) {
.whats-flutuante {
right: 16px;
bottom: 16px;
justify-content: center;
width: 56px;
padding: 0;
}
.whats-flutuante .icone { margin-top: 0; }
.whats-flutuante__texto { display: none; }
}
/* ---------- 7.16 Páginas internas: topo ---------- */
/* Faixa escura no estilo "tech/neon" da home, mais baixa que o hero */
.pagina-topo {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px);
background: var(--degrade-noite);
color: #fff;
}
.pagina-topo__rede {
inset: 0 0 0 auto;
z-index: -1;
width: 48%;
opacity: .55;
-webkit-mask-image: linear-gradient(270deg, #000 20%, transparent 95%);
mask-image: linear-gradient(270deg, #000 20%, transparent 95%);
}
.pagina-topo__conteudo { max-width: var(--container); }
.pagina-topo__titulo {
margin: 4px 0 18px;
font-size: clamp(2.25rem, 4.6vw, 3.75rem);
font-weight: 300;
line-height: 1.05;
letter-spacing: -.02em;
}
.pagina-topo__titulo strong { font-weight: 800; color: var(--so-lilas); }
.pagina-topo__lead {
max-width: 680px;
font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
color: rgba(255, 255, 255, .86);
}
.pagina-topo .chips { margin-top: 26px; }
@media (max-width: 767.98px) {
.pagina-topo__rede { width: 100%; opacity: .35; }
}
/* ---------- 7.17 Política de privacidade ---------- */
.politica__grade {
display: grid;
grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
align-items: start;
gap: clamp(40px, 6vw, 88px);
}
.politica__sumario {
position: sticky;
top: calc(var(--header-h) + 32px);
padding: 26px 24px 18px;
border-radius: var(--raio-card);
background: var(--so-lavanda-clara);
}
.politica__sumario .sobretitulo { margin-bottom: 10px; }
.politica__sumario ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: sumario;
}
.politica__sumario li { counter-increment: sumario; }
.politica__sumario a {
display: flex;
align-items: center;
gap: 12px;
min-height: 40px;
font-size: .9688rem;
color: var(--so-texto);
text-decoration: none;
transition: color var(--transicao);
}
.politica__sumario a::before {
content: counter(sumario, decimal-leading-zero);
font-size: .8125rem;
font-weight: 800;
color: var(--so-roxo-destaque);
}
.politica__sumario a:hover { color: var(--so-roxo); }
.politica__artigo { max-width: 780px; }
.politica__resumo { padding: 28px 30px; }
.politica__resumo-titulo {
margin-bottom: 18px;
font-size: var(--fs-h3);
font-weight: 300;
line-height: 1.15;
color: var(--so-texto);
}
.politica__resumo-titulo strong { font-weight: 800; color: var(--so-roxo-destaque); }
.politica__secao {
margin-top: 44px;
padding-top: 40px;
border-top: 1px solid var(--so-cinza-claro);
}
.politica__titulo {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 16px;
font-size: clamp(1.5rem, 2.4vw, 1.875rem);
font-weight: 700;
line-height: 1.2;
color: var(--so-noite);
}
.politica__num {
font-size: .75em;
font-weight: 800;
color: var(--so-roxo-destaque);
}
.politica__secao h3 {
margin: 26px 0 8px;
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.3;
color: var(--so-noite);
}
.politica__secao p + p,
.politica__secao .politica__lista + p,
.politica__secao p + .politica__lista { margin-top: 14px; }
.politica__secao a:not(.btn) {
font-weight: 700;
color: var(--so-roxo);
text-underline-offset: 3px;
}
.politica__secao strong { color: var(--so-noite); }
/* lista com marcadores quadrados, como os nós da rede */
.politica__lista {
margin: 0;
padding: 0;
list-style: none;
}
.politica__lista li {
position: relative;
padding-left: 22px;
}
.politica__lista li + li { margin-top: 10px; }
.politica__lista li::before {
content: "";
position: absolute;
top: .62em;
left: 2px;
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--so-roxo-destaque);
}
.politica__nota {
margin-top: 10px;
font-size: .875rem;
color: var(--so-texto-sec);
}
.politica__preferencias {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin-top: 22px;
padding: 18px 22px;
border: 1px solid var(--so-cinza-claro);
border-radius: 18px;
}
.politica__preferencias + p { margin-top: 18px; }
.politica__contato {
margin: 16px 0 0;
padding: 0;
list-style: none;
}
.politica__contato li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-top: 1px solid var(--so-cinza-claro);
}
.politica__contato li:first-child { border-top: 0; }
.politica__contato .icone {
width: 20px;
height: 20px;
margin-top: 3px;
color: var(--so-roxo);
}
@media (max-width: 1023.98px) {
.politica__grade { grid-template-columns: minmax(0, 1fr); }
.politica__sumario { position: static; }
.politica__sumario ol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 18px;
}
}
@media (max-width: 767.98px) {
.politica__sumario ol { grid-template-columns: minmax(0, 1fr); }
.politica__resumo { padding: 22px 20px; }
.politica__secao { margin-top: 36px; padding-top: 32px; }
.politica__preferencias .btn { width: 100%; }
}
/* =====================================================================
6. MOVIMENTO
As animações decorativas contínuas só começam quando o main.js coloca
.anima no (logo depois do load), para não atrasar a primeira
pintura. Tudo aqui respeita prefers-reduced-motion.
===================================================================== */
/* O padrão de rede entra com um fade depois do carregamento */
.rede svg {
opacity: 0;
transition: opacity 1.2s ease;
}
.anima .rede svg { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
/* Revelação suave ao rolar (uma vez por elemento) */
.js .revelar { opacity: 0; }
.js .revelar.is-visivel {
animation: revelar .7s var(--ease) both;
animation-delay: var(--atraso, 0s);
}
/* terminada a animação, volta ao estado normal (libera a camada composta) */
.js .revelar.is-revelado { opacity: 1; animation: none; }
/* Padrão de rede: linhas se desenhando e nós pulsando */
.anima .rede__linhas path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: rede-linha 12s ease-in-out infinite;
}
.anima .rede__linhas path:nth-child(3n + 1) { animation-delay: -1s; }
.anima .rede__linhas path:nth-child(3n + 2) { animation-delay: -5s; }
.anima .rede__linhas path:nth-child(3n) { animation-delay: -8.5s; }
.anima .rede__linhas path:nth-child(4n) { animation-duration: 10s; }
.anima .rede .rn {
animation: rede-no 8s ease-in-out infinite; /* só opacidade: escala em SVG custa caro */
}
.anima .rede .rn:nth-child(2n) { animation-delay: -2.5s; animation-duration: 9s; }
.anima .rede .rn:nth-child(3n) { animation-delay: -5s; animation-duration: 7s; }
.anima .rede:not(.em-tela) path,
.anima .rede:not(.em-tela) .rn { animation-play-state: paused; }
/* Mapa: rotas tracejadas, pulsos e formas flutuando */
.anima .mapa__rotas path { animation: mapa-fluxo 1.6s linear infinite; }
.anima .mapa__rotas path:nth-child(2n) { animation-duration: 2.1s; }
.anima .mapa__destinos circle {
animation: mapa-destino 3.2s ease-in-out infinite;
}
.anima .mapa__destinos circle:nth-child(2n) { animation-delay: -1.1s; }
.anima .mapa__destinos circle:nth-child(3n) { animation-delay: -2.2s; }
.anima .mapa__onda {
transform-box: fill-box;
transform-origin: center;
animation: mapa-onda 2.8s ease-out infinite;
}
.anima .mapa__onda--2 { animation-delay: 1.4s; }
.anima .mapa__forma {
animation: flutuar 9s ease-in-out infinite alternate;
}
.anima .mapa__forma:nth-child(2n) { animation-duration: 11s; animation-delay: -3s; }
.anima .mapa__forma:nth-child(3n) { animation-duration: 7s; animation-delay: -5s; }
.anima .mapa__legenda-ponto { animation: pulso 2.4s ease-in-out infinite; }
.anima .mapa:not(.em-tela) * { animation-play-state: paused; }
/* Partículas do fundo escuro */
.anima .setor__brilhos::before { animation: cintilar 7s ease-in-out infinite alternate; }
.anima .setor__brilhos::after { animation: cintilar 9s ease-in-out infinite alternate-reverse; }
/* Carrossel de logos (desktop) */
.anima .marquee__trilha { animation: marquee 55s linear infinite; }
.anima .marquee:hover .marquee__trilha { animation-play-state: paused; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
.anima .marquee__trilha { animation: none; }
}
/* Movimento reduzido: tudo estático e visível */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.marquee {
-webkit-mask-image: none;
mask-image: none;
}
.marquee__trilha {
width: min(100% - var(--gutter) * 2, var(--container));
margin-inline: auto;
}
.marquee__lista {
flex-wrap: wrap;
justify-content: center;
padding-right: 0;
}
.marquee__lista--copia { display: none; }
.mapa__onda { display: none; }
}
@keyframes revelar {
from { opacity: 0; translate: 0 16px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes rede-linha {
0% { stroke-dashoffset: 1; }
30%, 78% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -1; }
}
@keyframes rede-no {
0%, 100% { opacity: 1; }
50% { opacity: .45; }
}
@keyframes mapa-fluxo {
to { stroke-dashoffset: -32; }
}
@keyframes mapa-destino {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
@keyframes mapa-onda {
0% { opacity: .9; transform: scale(1); }
100% { opacity: 0; transform: scale(4.2); }
}
@keyframes flutuar {
0% { transform: translateY(0); }
100% { transform: translateY(-18px); }
}
@keyframes pulso {
0%, 100% { box-shadow: 0 0 0 3px rgba(174, 50, 245, .35), 0 0 10px rgba(174, 50, 245, .8); }
50% { box-shadow: 0 0 0 7px rgba(174, 50, 245, .12), 0 0 16px rgba(174, 50, 245, 1); }
}
@keyframes cintilar {
from { opacity: .15; }
to { opacity: .45; }
}
@keyframes marquee {
to { transform: translateX(-50%); }
}
|