/* ============================================================
AURA — Landing Page
Implementado a partir do Figma: Aura | Landing Page (1165:38)
------------------------------------------------------------
FONTES
O design usa "Owners", da MCKL (Jeremy Mickel). É comercial,
mas há dois caminhos para tê-la de verdade — a pilha em
--f-display já aceita os dois, então basta habilitar um.
CAMINHO 1 — Adobe Fonts (mais rápido; incluída no Creative Cloud)
Owners está na biblioteca do Adobe Fonts, liberada para uso
comercial. Crie um Web Project em fonts.adobe.com, adicione
Owners e cole o gerado no , logo abaixo do link
do Google Fonts:
O Adobe expõe a família como "owners", em minúsculas — já
previsto na pilha. Nada mais a fazer.
CAMINHO 2 — Licença de self-hosting direto na MCKL
Compre em mckltype.com a licença web, coloque os .woff2 em
/fonts e descomente o bloco abaixo.
FALLBACK — Bricolage Grotesque (OFL, Google Fonts)
Escolhida medindo: "Ninguém" a 180px dá 690px contra os 695px
do Owners no arquivo — 0,7% de desvio, contra 6,3% da Archivo
que estava aqui antes. A proporção x-height/cap também é a mais
próxima (0,807). E, como o Owners, é uma grotesca de origem
vernacular com eixo óptico, então o texto pequeno recebe um
corte próprio — o mesmo papel do "Owners Text".
Para voltar à Archivo, troque o nome na pilha abaixo e no
do Google Fonts.
------------------------------------------------------------ */
/*
@font-face {
font-family: 'Owners';
src: url('fonts/Owners-Regular.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Owners';
src: url('fonts/Owners-Medium.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
*/
:root {
/* ---- ASSETS -------------------------------------------------
WebP q80 (65% mais leves que os JPEG que substituíram).
Originais em alta e versões alternativas (fotos com AirPod,
fone3.png da cena) ficam em /_fontes — fora do deploy.
Caminhos relativos a este arquivo.
------------------------------------------------------------ */
--img-textura: url('../img/textura.webp');
/* Textura dedicada do painel .etapas. A geral e amostrada ali a 3,1x (uma
regiao de 606x225 esticada para 1866x699), e essa ampliacao trazia junto
os blocos da compressao. Esta e a MESMA arte: a composicao tonal daquele
recorte, limpa e reampliada, com o grao reextraido da propria textura em
escala 1:1. Em tons de cinza porque o .etapas::after aplica
mix-blend-mode:color — so a luminosidade sobrevive, a cor era bit jogado
fora (e o arquivo caiu de 141 KB para 53 KB). */
--img-textura-etapas: url('../img/textura-etapas.webp');
--img-painel-lider: url('../img/painel-lider.webp');
/* Fotos com o fone preto (open-ear) */
--img-foto-fabio: url('../img/foto-fabio-fone.webp');
--img-foto-juliana: url('../img/foto-juliana-fone.webp');
--img-cred-juliana: url('../img/cred-juliana.webp');
--img-logo-marca: url('../img/logo-marca.svg');
--img-logo-texto: url('../img/logo-texto.svg');
--img-logo-marca-f: url('../img/logo-marca-branco.svg');
--img-logo-texto-f: url('../img/logo-texto-branco.svg');
/* Foto da cena do ouvido (fonte: _fontes/fone3.png) */
--img-foto-ouvido: url('../img/foto-ouvido.webp');
/* ---- COR ---- */
--bg: #dddbd7;
--ink: #181818;
--ink-68: rgba(24,24,24,.68);
--ink-45: rgba(24,24,24,.45);
--ink-40: rgba(24,24,24,.40);
--verde: #2f3a33;
--verde-base: #525a54; /* rgba(47,58,51,.8) resolvido sobre o fundo da página */
--creme: #f2ede4; /* Spring Wood */
--acento: #c56720;
--areia: #ffd98a; /* Salomie */
--branco-10: rgba(255,255,255,.10);
--branco-05: rgba(255,255,255,.05);
/* ---- BORDAS ----
O Figma aplica mix-blend nos nós de fundo, e o traço entra na mesclagem
junto. Por isso o mesmo #b8b8b8 do arquivo resolve em três cores. */
--borda-clara: #b8b8b8; /* sem mesclagem (cartões de foto) */
--borda-mesclada: #bab8b4; /* #b8b8b8 em luminosity sobre a página */
--borda-vidro: #b8b8b8; /* entra na mesclagem soft-light junto com o preenchimento */
/* ---- GRADIENTES ----
Valores crus do Figma à esquerda; à direita o resultado real depois do
modo de mesclagem do nó. Trocar por mix-blend-mode no CSS daria o mesmo
pixel, mas fica refém do contexto de empilhamento — então já vai resolvido.
escuro #595959 → #181818 luminosity/página => #5b5955 → #1a1814
claro #d2d2d2 → #e4e4e4 luminosity/página => #d4d2ce → #e6e4e0
cartão #e4e4e4 → #d2d2d2 luminosity/página => #e6e4e0 → #d4d2ce
O vidro é a exceção: o fundo atrás dele varia de laranja a verde ao longo
do painel, então não existe valor fixo — ali o soft-light é aplicado de
verdade, via mix-blend-mode, e os valores ficam crus. */
--grad-escuro: linear-gradient(78.43deg, #5b5955 0%, #1a1814 100%);
--grad-claro: linear-gradient(78.43deg, #d4d2ce 0%, #e6e4e0 100%);
--grad-cartao: linear-gradient(85.58deg, #e6e4e0 0%, #d4d2ce 100%);
--grad-vidro: linear-gradient(84.74deg, rgba(228,228,228,.2) 0%, rgba(210,210,210,.2) 100%);
/* ---- TIPO ---- */
/* 'owners' = nome no Adobe Fonts | 'Owners' = self-hosted via @font-face */
--f-display: 'owners', 'Owners', 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
--f-rotulo: 'Doto', ui-monospace, 'SF Mono', monospace;
--f-dado: 'Bricolage Grotesque', var(--f-display);
/* NB: --f-dado e o fallback de --f-display são a mesma família de
propósito — o Figma já usava Bricolage nos números das métricas. */
/* ---- LAYOUT ---- */
--raio-painel: 2.5rem; /* 40px */
--raio-cartao: 2.92rem; /* 46.7px */
--margem-painel: 1.875rem;/* 30px */
--margem-texto: 8.75rem; /* 140px */
}
/* ---- ESCALA ----
Toda a composição desktop é em rem, então a página inteira encolhe
mantendo as proporções do Figma. A raiz responde às DUAS dimensões:
100vw / 120 → 1rem = 16px numa janela de 1920px de largura
100vh / 75 → a primeira dobra (navbar 122px + hero 1045px + 30px
de folga = 74,8rem) cabe inteira na altura da janela
Vence a menor das duas, então o hero nunca é cortado. O termo de
LARGURA não tem piso: um piso fixo faria o layout de 120rem estourar
a janela entre ~900 e 1320px (o conteúdo era cortado à direita).
Abaixo de 1100px o layout mobile assume com 16px — então na prática
o termo de largura só desce até ~9,2px (1101/120). O piso de 11px
continua valendo para a ALTURA: em janelas muito baixas a legibilidade
ganha do enquadramento e o hero volta a ser cortado. */
html {
font-size: min(calc(100vw / 120), clamp(11px, calc(100vh / 75), 16px));
scroll-behavior: smooth;
/* a trava do menu fixa o body e tira o documento do fluxo; sem a calha
reservada, a página salta lateralmente onde a barra ocupa espaço */
scrollbar-gutter: stable;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--f-display);
font-weight: 500;
font-optical-sizing: auto; /* usa o eixo opsz: corte de texto no corpo, display nos títulos */
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
/* Conteúdo só para leitores de tela e crawlers (fatos fora da arte) */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* Anel de duas cores (design.md §10). O laranja sozinho mede 2,85:1 sobre a
página e 1,78:1 na ponta clara dos painéis escuros — abaixo dos 3:1 que a
WCAG 1.4.11 pede para o indicador de foco. Mantemos o laranja da marca e o
cercamos por um par creme/tinta: sobre qualquer superfície do sistema uma
das duas bordas contrasta. */
:focus-visible {
outline: 2px solid var(--acento);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(242,237,228,.92), 0 0 0 6px rgba(24,24,24,.72);
border-radius: 3px;
}
/* A navbar sticky cobre ~8rem do topo: âncoras param abaixo dela.
#atendimento fica de fora — o palco full-viewport já reserva o espaço. */
#lidera, #privacidade, #demonstracao { scroll-margin-top: 8rem; }
/* ============================================================
PRIMITIVOS
============================================================ */
.rotulo {
font-family: var(--f-rotulo);
font-weight: 900;
font-variation-settings: 'ROND' 0;
text-transform: uppercase;
letter-spacing: .125em;
line-height: 1.4;
}
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .625rem;
width: 18.3125rem; /* 293px */
height: 3.75rem; /* 60px */
border-radius: 2.5rem;
font-size: 1.125rem; /* 18px */
line-height: 1.75rem;
font-weight: 400;
text-align: center;
transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 .625rem 1.75rem rgba(24,24,24,.18); }
.botao:active { transform: translateY(0); }
.botao--escuro {
background-image: var(--grad-escuro);
border: .5px solid #fff;
color: #fff;
}
.botao--claro {
background-image: var(--grad-claro);
border: .5px solid var(--borda-mesclada);
color: var(--ink);
}
.traco-curto { width: 3.25rem; height: 3px; background: #fff; }
.regua { width: 100%; height: 1px; background: #fff; border: 0; margin: 0; }
/* Painel arredondado de largura quase total */
.painel {
position: relative;
margin: 0 var(--margem-painel);
border-radius: var(--raio-painel);
overflow: hidden;
isolation: isolate;
}
.painel__textura {
position: absolute; inset: 0;
background-image: var(--img-textura);
background-repeat: no-repeat;
mix-blend-mode: hard-light;
pointer-events: none;
z-index: -1;
}
/* Os painéis compartilham UMA arte de textura e cada um amostra uma região
diferente dela. No Figma isso é um ![]()
em escala; aqui vira size/position. */
.recursos .painel__textura {
background-size: 198.39% 355.18%;
background-position: 100% 64.75%;
opacity: .7;
}
/* A arte ja e o recorte, entao cobre o painel sem ampliar nada. */
.etapas .painel__textura {
background-image: var(--img-textura-etapas);
background-size: cover;
background-position: center;
}
/* ============================================================
NAVBAR
============================================================ */
.nav {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center;
gap: 1.25rem; /* 20px: vão entre CTA e menu */
padding: 1.9375rem var(--margem-painel) 2.5rem; /* botões em y=31, hero em y=131 */
background: linear-gradient(to bottom, var(--bg) 60%, rgba(221,219,215,0));
}
/* No Figma marca e texto se sobrepõem ~2px e não são centrados entre si:
o texto desce 15,3px em relação ao topo da marca. */
.logo {
position: relative; flex: none;
width: 11.8080rem; height: 2.3340rem; /* 60% do Figma */
}
.logo__marca {
position: absolute; left: 0; top: 0;
width: 1.2114rem; height: 1.0614rem;
background: var(--img-logo-marca) center/contain no-repeat;
}
.logo__texto {
position: absolute; left: 1.1250rem; top: 0.5736rem;
width: 10.6836rem; height: 1.7514rem;
background: var(--img-logo-texto) left center/contain no-repeat;
}
.rodape__logo { width: 16.69rem; height: 3.3rem; }
.rodape__logo .logo__marca { width: 1.706rem; height: 1.531rem; }
.rodape__logo .logo__texto { left: 1.581rem; top: .813rem; width: 15.094rem; height: 2.488rem; }
/* Vão de 129px, medido dos centros no Figma (573 / 836,5 / 1142,5).
Lá o espaçamento é irregular porque os links foram posicionados à mão;
aqui fica uniforme, o que é mais robusto e cai a 7px do original.
O grupo centra entre o logo e o botão — no Figma o centro é 875, e o
centro entre logo (fim 219) e botão (início 1517) é 868. */
.nav__links {
display: flex; gap: 8.0625rem; /* 129px */
margin: 0 auto;
font-size: .75rem; /* 12px */
line-height: 1.75rem; /* 28px */
letter-spacing: .2em; /* 2,4px */
text-transform: uppercase;
font-weight: 400;
}
.nav__links a { position: relative; padding-bottom: .25rem; }
.nav__links a::after {
content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
height: 1px; background: currentColor;
transition: right .3s cubic-bezier(.2,.7,.3,1);
}
.nav__links a:hover::after { right: 0; }
.nav__menu {
flex: none;
width: 3.75rem; height: 3.75rem;
border-radius: 50%;
background-image: linear-gradient(225deg, #d4d2ce 0%, #e6e4e0 100%);
border: .5px solid #fff;
display: flex; flex-direction: column; /* existe no desktop também, em x=1830 */
align-items: center; justify-content: center;
}
.nav__menu span {
display: block; width: 1.25rem; height: 4px; /* 20 × 4px */
background: var(--ink); margin: .5px 0; /* vãos de 1px */
transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .2s;
}
/* Aberto: as três barras viram um X (deslocamento = altura 4px + vão 1px) */
.nav__menu.aberto span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__menu.aberto span:nth-child(2) { opacity: 0; }
.nav__menu.aberto span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* Painel do menu, aberto pelo botão redondo (mobile e desktop).
É irmão da nav (ver comentário no HTML) e fica logo abaixo dela no
empilhamento: a barra com o logo e o X continua visível e clicável. */
.nav__painel {
position: fixed; inset: 0; z-index: 45;
background: var(--bg);
display: flex; flex-direction: column;
justify-content: center;
gap: 2.25rem;
padding: 8rem var(--margem-texto) 4rem;
/* telas baixas (paisagem) rolam o próprio painel, sem vazar para a página */
overflow-y: auto;
overscroll-behavior: contain;
}
.nav__painel[hidden] { display: none; }
/* Com o painel aberto a barra fica só com o logo e o X: os links e o CTA
do desktop repetiriam o que já está no painel, por cima dele. */
.nav__links, .nav > .botao { transition: opacity .25s; }
.menu-aberto .nav__links,
.menu-aberto .nav > .botao { opacity: 0; pointer-events: none; }
.nav__painel a:not(.botao) {
font-size: 3.125rem;
line-height: 1.1;
letter-spacing: -.01em;
}
.nav__painel .botao { margin-top: 1.5rem; }
/* Links entram em cascata a cada abertura */
.nav__painel a { opacity: 0; transform: translateY(1.25rem); }
.nav__painel:not([hidden]) a { animation: menu-entra .55s cubic-bezier(.2,.7,.3,1) forwards; }
.nav__painel:not([hidden]) a:nth-child(2) { animation-delay: .06s; }
.nav__painel:not([hidden]) a:nth-child(3) { animation-delay: .12s; }
.nav__painel:not([hidden]) a:nth-child(4) { animation-delay: .18s; }
@keyframes menu-entra { to { opacity: 1; transform: none; } }
/* ============================================================
HERO
============================================================ */
.hero {
display: grid;
grid-template-columns: 795fr 1035fr;
gap: 1.875rem;
margin: 0 var(--margem-painel);
align-items: stretch;
}
.hero__cartao {
position: relative;
border-radius: var(--raio-painel);
background-image: linear-gradient(88.17deg, #e6e4e0 0%, #d4d2ce 100%);
border: .5px solid var(--borda-mesclada);
padding: 2.85rem 2.5rem 2.25rem;
display: flex; flex-direction: column;
min-height: 65.3rem; /* 1045px */
}
.hero__rotulo { font-size: 1rem; letter-spacing: .03em; }
.hero__titulo {
font-size: 11.25rem; /* 180px */
line-height: .78;
letter-spacing: -.01em;
margin-top: 2.475rem;
}
.hero__sub {
font-size: 2.25rem; /* 36px */
line-height: 2.5rem;
font-weight: 400;
color: var(--ink-68);
margin-top: auto;
max-width: 45rem;
}
.hero__acoes { display: flex; gap: .625rem; margin-top: 9.125rem; }
.hero__nota {
font-size: 1rem; letter-spacing: .03em;
margin-top: 3.4rem; line-height: 1.25rem;
}
.hero__foto { position: relative; }
/* Cartão de foto com credencial (hero e seção do líder) */
.fotocard {
position: relative;
border-radius: var(--raio-painel);
border: .5px solid var(--borda-clara);
overflow: hidden;
min-height: 65.3rem;
/* a figure que o envolve estica junto com a linha do grid (hero e líder);
100% faz a foto acompanhar o painel vizinho quando ele cresce */
height: 100%;
background: #999 center / cover no-repeat;
}
.fotocard--juliana { background-image: var(--img-foto-juliana); }
.fotocard--fabio { background-image: var(--img-foto-fabio); }
/* ---- CREDENCIAL ----
No Figma isto não é um selo acima do texto: é um cartão de 331,113×161px
recortado por máscara sobre a arte, com o nome, a linha e o cargo dentro.
Fica a 30px da esquerda e 30px da base da foto.
O preenchimento é uma região específica da arte — daí size/position. */
.credencial {
position: absolute; z-index: 2;
left: 1.875rem; bottom: 1.875rem;
width: 20.6946rem; /* 331.113px */
height: 10.0625rem; /* 161px */
border-radius: 1.8986rem; /* 30.377px */
overflow: hidden;
color: #fff;
}
.credencial__fundo {
position: absolute; inset: 0;
background-repeat: no-repeat;
background-size: 391.91% 1007.32%;
}
.credencial--juliana .credencial__fundo {
background-image: var(--img-cred-juliana);
background-position: 10% 75.29%;
}
/* Duas camadas de branco por cima do recorte — é o que dá o aspecto leitoso.
No export o Figma traz estas camadas só no cartão da Juliana; aplicadas
aos dois a pedido. Para voltar ao que o arquivo descreve, prefixe os dois
seletores abaixo com .credencial--juliana. */
.credencial__fundo::before,
.credencial__fundo::after {
content: ''; position: absolute; inset: 0;
}
.credencial__fundo::before {
background: rgba(255,255,255,.2); mix-blend-mode: lighten;
}
.credencial__fundo::after {
background: rgba(255,255,255,.4); mix-blend-mode: overlay;
}
.credencial--fabio .credencial__fundo {
background-image: var(--img-textura);
background-position: 23.57% 92.96%;
}
.credencial__nome {
position: absolute; z-index: 1;
left: 1.70875rem; /* 27.34px */
top: 1.34625rem;
font-size: 1.6138rem; /* 25.821px */
line-height: 2.5014rem; /* 40.022px */
}
.credencial__regua {
position: absolute; z-index: 1;
left: 1.70875rem;
top: 4.6836rem; /* 74.937px */
width: 17.2769rem; /* 276.43px */
height: 1.519px;
background: #fff;
}
.credencial__papel {
position: absolute; z-index: 1;
left: 1.70875rem;
top: 5.3269rem; /* 85.23px */
font-size: 1.2341rem; /* 19.745px */
line-height: 1.666rem; /* 26.656px */
}
/* ============================================================
CITAÇÕES SOLTAS
============================================================ */
.citacao {
margin: 6.25rem var(--margem-texto) 0;
}
/* Miniaturas de foto embutidas na frase (só no mobile — no desktop a
citação segue o Figma). Medidas em em: escalam com o texto. */
.chip { display: none; }
.citacao .traco-curto { margin-bottom: 1.875rem; }
.citacao__texto {
font-size: 3.125rem; /* 50px */
line-height: 3.5625rem;
}
/* ============================================================
PAINEL: NO SEU OUVIDO (scrollytelling)
A foto ocupa a viewport (sticky) e as mensagens da Aura surgem
ancoradas ao ouvido conforme os .ouvido__passo — divs vazias que
dirigem os beats — cruzam o centro da tela (js/main.js).
AJUSTE FINO: --ouvido-x / --ouvido-y marcam o fone na foto, em %
da moldura. Trocou a foto ou o corte? Ajuste ali (e no bloco
mobile, onde o corte vertical desloca o fone).
============================================================ */
.ouvido { position: relative; margin-top: 6.25rem; }
.ouvido__palco {
position: sticky; top: 0;
/* svh, não dvh: dvh muda quando a barra do browser recolhe e a moldura
saltaria no meio da cena; svh é estável durante todo o scroll */
height: 100vh; height: 100svh;
padding: var(--margem-painel);
--ouvido-x: 55%;
--ouvido-y: 34%;
}
.ouvido__moldura {
position: relative; width: 100%; height: 100%;
border-radius: var(--raio-painel);
overflow: hidden;
background: #6b5744 var(--img-foto-ouvido) center 30% / cover no-repeat;
}
.ouvido__titulo {
/* top folgado: a navbar sticky cobre o alto da moldura (até ~5.7rem
de viewport) durante toda a cena — o título entra abaixo dela */
position: absolute; left: 3.5rem; top: 5rem; z-index: 2;
color: #fff;
}
.ouvido__titulo .rotulo { font-size: .85rem; color: rgba(255,255,255,.75); }
.ouvido__titulo h2 {
margin-top: .9rem;
font-size: 3rem;
line-height: 1.03;
letter-spacing: -.01em;
text-shadow: 0 2px 28px rgba(0,0,0,.35);
}
/* ---- AS CAIXAS DA AURA ---- */
.caixa {
position: absolute; z-index: 2;
left: calc(var(--ouvido-x) + var(--dx));
top: calc(var(--ouvido-y) + var(--dy));
width: min(24.5rem, 46vw); /* 40% maior que o original do protótipo */
opacity: 0;
/* visibility zera a camada composta do backdrop-filter enquanto a caixa
não entrou em cena (o delay acompanha a duração do fade) */
visibility: hidden;
transform: translateY(.7rem) scale(.98);
transition: opacity .28s ease-out, transform .28s cubic-bezier(.2,.7,.3,1), visibility 0s .28s;
pointer-events: none;
}
.caixa.viva {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .28s ease-out, transform .28s cubic-bezier(.2,.7,.3,1), visibility 0s;
}
.caixa.antiga { opacity: .38; } /* as anteriores recuam, sem sumir */
.caixa__cartao {
background: rgba(24,24,24,.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: .5px solid rgba(255,255,255,.35);
border-radius: 1.55rem;
padding: 1.35rem 1.6rem 1.5rem;
color: #fff;
}
.caixa__cab {
display: flex; align-items: center; gap: .7rem;
margin-bottom: .6rem;
}
.caixa__cab .rotulo { font-size: .95rem; }
.caixa__cab time {
font-size: .95rem; color: rgba(255,255,255,.55);
margin-left: auto; font-weight: 400;
}
.caixa__aro {
width: 1.2rem; height: 1.2rem; border-radius: 50%;
border: 2px dashed #fff; flex: none;
}
.caixa.viva:not(.antiga) .caixa__aro { animation: pulso 1.3s ease-out; }
@keyframes pulso {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
100% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}
.caixa p { font-size: 1.43rem; line-height: 1.3; font-weight: 400; }
/* filete ligando a caixa ao ouvido */
.caixa__filete {
position: absolute;
width: var(--fw, 3rem); height: 1px;
background: rgba(255,255,255,.6);
}
.caixa[data-lado="dir"] .caixa__filete { right: 100%; top: 1.4rem; }
.caixa[data-lado="esq"] .caixa__filete { left: 100%; top: 1.4rem; }
/* fecho discreto e dica de rolagem */
.ouvido__fecho {
position: absolute; left: 3.5rem; bottom: 3rem; z-index: 2;
color: #fff; max-width: 26rem;
opacity: 0; transform: translateY(.6rem);
transition: opacity .6s, transform .6s;
}
.ouvido__fecho.vivo { opacity: 1; transform: none; }
.ouvido__fecho p {
font-size: 1.15rem; line-height: 1.4; font-weight: 400;
text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.ouvido__dica {
position: absolute; right: 3.5rem; bottom: 3rem; z-index: 2;
color: rgba(255,255,255,.65); font-size: .82rem;
transition: opacity .4s;
}
.ouvido__dica.fora { opacity: 0; }
/* passos que dirigem o scroll: abertura + 3 mensagens + fecho.
O último é mais alto para o fecho respirar antes de o quadro sair.
NB: o palco também é div — :first-of-type pegaria ele, não o 1º passo. */
.ouvido__passo { height: 80vh; }
.ouvido__palco + .ouvido__passo { height: 100vh; }
.ouvido__passo:last-of-type { height: 120vh; }
/* ============================================================
COMO FUNCIONA (texto em duas colunas)
============================================================ */
.explica {
margin: 6.25rem var(--margem-texto) 0;
display: grid;
grid-template-columns: 32.5625rem 30.125rem 37.625rem;
column-gap: 0;
align-items: start;
}
/* Coluna do título: 3 + 30 + 171 + 36 + 60 = 300px, exatamente como no Figma.
O botão faz parte desta coluna — não é uma linha nova da grade, senão ele
é empurrado para baixo do texto mais alto. */
.explica__titulo { grid-column: 1; }
.explica__titulo .traco-curto { margin-bottom: 1.875rem; } /* 30px */
.explica__titulo h2 { font-size: 3.125rem; line-height: 3.5625rem; }
.explica__coluna {
padding-top: 2.9375rem; /* 47px abaixo do topo da seção */
font-size: 1.125rem; /* 18px */
line-height: 1.625rem; /* 26px */
display: flex; flex-direction: column; gap: 1.625rem;
}
.explica__coluna:last-of-type { padding-left: 7.5rem; } /* calha de 120px */
.explica__acao { margin-top: 2.25rem; } /* 36px */
/* ============================================================
PAINEL: OUVE / ENTENDE / LEMBRA
============================================================ */
.etapas {
margin-top: 6.25rem;
background: var(--verde-base);
color: #fff;
padding: 8.25rem 0 9rem;
}
/* Camada #898b86 em mix-blend-color por cima da textura, como no Figma.
Sem a textura exportada o resultado é #565853. */
.etapas::after {
content: ''; position: absolute; inset: 0;
background: #898b86;
mix-blend-mode: color;
pointer-events: none;
z-index: -1;
}
.etapas__interno { width: 64.75rem; margin: 0 auto; }
.etapas__rotulo { font-size: .72rem; letter-spacing: .16em; }
.etapas__titulo {
font-size: 3.375rem; /* 54px */
line-height: 3.4375rem;
margin-top: 3.4rem;
}
.etapas__grade {
display: grid;
grid-template-columns: repeat(3, 19.75rem);
gap: 2.75rem;
margin-top: 6.9rem;
}
.etapa__arco {
width: 2.375rem; height: 1.1875rem;
border: 2px solid #fff; border-bottom: 0;
border-radius: 2.375rem 2.375rem 0 0;
margin-bottom: 2.4rem;
}
.etapa h3 {
font-size: 1.875rem; /* 30px */
line-height: 1.9125rem;
letter-spacing: -.03em;
margin-bottom: 1.6rem;
}
.etapa p {
font-size: .875rem; /* 14px */
line-height: 1.5rem;
letter-spacing: .02em;
}
/* ============================================================
PARA QUEM LIDERA (foto + painel de dados)
============================================================ */
.lider {
display: grid;
grid-template-columns: 1035fr 795fr;
gap: 1.875rem;
margin: 1.875rem var(--margem-painel) 0; /* calha de painel: 30px */
}
.lider__painel {
position: relative;
border-radius: var(--raio-painel);
overflow: hidden;
color: #fff;
padding: 6.59rem 9.125rem; /* 105,5px / 146px */
background: #1d211e var(--img-painel-lider) no-repeat;
background-size: 412.38% 197.07%;
background-position: 16.98% 77.48%;
min-height: 65.3rem;
}
.lider__conteudo { position: relative; }
.lider__rotulo { font-size: .75rem; letter-spacing: .16em; }
.lider__titulo {
font-size: 4rem; /* 64px */
line-height: 4.08rem;
letter-spacing: -.038em;
margin-top: 1.05rem;
}
.lider__lead {
font-size: 1.25rem;
line-height: 1.875rem;
margin-top: 3.25rem;
max-width: 34.8rem;
}
.painel-metricas {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .75rem;
margin-top: 2.125rem;
}
.metrica {
background: var(--branco-05);
border: 1px solid var(--branco-10);
border-radius: .5rem;
padding: 1.3125rem;
}
.metrica__valor {
font-family: var(--f-dado);
font-weight: 600;
font-variation-settings: 'opsz' 14, 'wdth' 100;
font-size: 2.5rem; /* 40px */
line-height: 3.2rem;
letter-spacing: -.035em;
}
.metrica__rotulo {
font-size: .84375rem; /* 13.5px */
line-height: 1.164rem;
margin-top: .4rem;
}
.regra {
background: var(--branco-05);
border-left: 2px solid var(--acento);
padding: 1.25rem 1.375rem 1.25rem 1.5rem;
margin-top: 2.125rem;
font-size: 1rem;
line-height: 1.5rem;
color: var(--creme);
}
.regra strong { font-weight: 500; color: #fff; }
/* ============================================================
PRIVACIDADE
============================================================ */
.privacidade { margin: 4.0625rem var(--margem-texto) 0; } /* 65px */
.privacidade__topo {
display: grid;
grid-template-columns: 1fr 27.748rem 27.748rem;
gap: 2.2rem;
align-items: start;
}
.privacidade__rotulo { font-size: .75rem; color: var(--ink-45); letter-spacing: .17em; }
.privacidade__titulo {
font-size: 3.625rem; /* 58px */
line-height: 3.6975rem;
margin-top: 3.2rem;
}
.privacidade__texto {
font-size: 1.125rem;
line-height: 1.875rem;
margin-top: 2.5rem;
}
.cartao-escuta {
background-image: var(--grad-cartao);
border: .584px solid var(--borda-mesclada);
border-radius: var(--raio-cartao);
padding: 2.1rem 2.1rem 2.4rem;
min-height: 15.04rem;
margin-top: 2.2rem; /* no Figma os cartões descem do eyebrow, rumo ao título */
}
.cartao-escuta__rotulo {
font-size: .767rem; /* 12.3px */
line-height: 1.188rem;
letter-spacing: .15em;
color: var(--ink-40);
}
.cartao-escuta__nome {
font-size: 2.337rem; /* 37.4px */
line-height: 2.383rem;
margin: 1.85rem 0 1.65rem;
}
.cartao-escuta__texto {
font-size: 1.095rem; /* 17.5px */
line-height: 1.643rem;
}
.cartao-escuta--nao { color: var(--ink-40); }
.cartao-escuta--nao .cartao-escuta__nome { text-decoration: line-through; }
.privacidade__regua { margin: 4.08rem 0 4.375rem; } /* 65,3px / 70px */
.beneficios {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12.5rem; /* vão largo do Figma: o texto quebra em ~40ch por coluna */
}
.beneficio h3 {
font-size: 2rem; /* 32px */
line-height: 2rem;
letter-spacing: .03em;
margin-bottom: .39rem; /* 6,25px — bem mais apertado do que parece */
}
.beneficio p { font-size: 1.25rem; line-height: 1.875rem; }
/* ============================================================
PAINEL: O QUE VEM JUNTO
============================================================ */
.recursos {
margin-top: 4.9844rem; /* 80px */
background: var(--verde);
color: #fff;
padding: 8.1rem 6.875rem 9.75rem;
}
.recursos__rotulo { font-size: .75rem; letter-spacing: .24em; }
.recursos__titulo {
font-size: 7.486rem; /* 119.8px */
line-height: 7.62rem;
letter-spacing: -.02em;
margin-top: 3.2rem;
}
.recursos__grade {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.09rem;
margin-top: 6.9rem;
}
.recurso {
position: relative;
border-radius: var(--raio-cartao);
padding: 1.85rem 1.9rem 2rem;
min-height: 11.125rem;
transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
/* A camada de vidro mescla com o gradiente atrás; o texto fica acima, fora
da mesclagem — igual ao Figma, onde o blend está no nó de fundo. */
.recurso::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background-image: var(--grad-vidro);
border: .584px solid var(--borda-vidro);
mix-blend-mode: soft-light;
pointer-events: none;
z-index: 0;
}
.recurso > * { position: relative; z-index: 1; }
.recurso:hover { transform: translateY(-4px); }
.recurso__rotulo { font-size: .75rem; line-height: 1.25rem; letter-spacing: .083em; }
.recurso h3 {
font-size: 2.337rem;
line-height: 2.383rem;
margin: 1.5rem 0 1.1rem;
}
.recurso p { font-size: .875rem; line-height: 1.125rem; }
/* ============================================================
CTA FINAL
============================================================ */
.fecho {
text-align: center;
padding: 9.25rem var(--margem-texto) 10.5rem;
}
.fecho__titulo {
font-size: 5.125rem; /* 82px */
line-height: 5.2275rem;
}
.fecho__sub {
font-size: 1.125rem;
line-height: 1.74375rem;
color: var(--ink-68);
margin-top: 2.9rem;
}
.fecho__acoes {
display: flex; gap: .625rem; justify-content: center;
margin-top: 2.75rem;
}
/* ============================================================
RODAPÉ
============================================================ */
.rodape {
background: var(--ink);
color: #fff;
padding: 6.2rem 0 3rem;
}
.rodape__interno { width: 67.5rem; margin: 0 auto; }
.rodape__topo {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 0 3.4rem;
}
.rodape__logo { align-self: start; }
.rodape__logo .logo__marca { background-image: var(--img-logo-marca-f); }
.rodape__logo .logo__texto { background-image: var(--img-logo-texto-f); }
.rodape__coluna { min-width: 10.6rem; }
.rodape__coluna h4 {
font-family: var(--f-rotulo);
font-weight: 900;
font-variation-settings: 'ROND' 0;
font-size: .656rem;
line-height: 1.017rem;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
margin-bottom: 1.05rem;
}
.rodape__coluna li + li { margin-top: .5rem; }
.rodape__coluna a {
display: inline-block;
padding: .25rem 0; /* engorda o alvo de toque sem mudar o visual */
font-size: .9375rem;
line-height: 1.453rem;
font-weight: 400;
opacity: .92;
transition: opacity .2s;
}
.rodape__coluna a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .25rem; }
.rodape__regua {
height: 1px; background: rgba(255,255,255,.1);
margin: 3.2rem 0 1.3rem;
}
.rodape__base {
display: flex; justify-content: space-between;
font-family: var(--f-rotulo);
font-weight: 900;
font-variation-settings: 'ROND' 0;
font-size: .75rem;
line-height: 1.308rem;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.3);
}
/* ============================================================
MOVIMENTO
============================================================ */
.revela {
opacity: 0;
transform: translateY(1.5rem);
transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.revela.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.revela { opacity: 1; transform: none; transition: none; }
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ============================================================
MOBILE / TABLET
Até 1100px: iPad em pé e deitado caem aqui. De 1101 a 1320px o
desktop escala por largura (ver ---- ESCALA ----); acima disso,
a composição do Figma vale inteira.
============================================================ */
@media (max-width: 1100px) {
html { font-size: 16px; }
:root {
--margem-painel: 1rem;
--margem-texto: 1.5rem;
--raio-painel: 1.5rem;
--raio-cartao: 1.5rem;
}
.nav { padding: 1rem; gap: 1rem; }
.nav__links, .nav > .botao { display: none; }
/* logo na esquerda, menu ancorado na direita */
.nav__menu { flex-direction: column; width: 3rem; height: 3rem; margin-left: auto; }
.nav__menu span { height: 3px; }
.nav__painel { gap: 1.75rem; padding: 7rem 1.5rem 3rem; }
.nav__painel a:not(.botao) { font-size: 1.75rem; }
.botao { width: 100%; max-width: 22rem; height: 3.5rem; font-size: 1rem; }
/* miniaturas embutidas na frase, como na ref (em: escalam com o texto) */
.chip {
display: inline-block;
width: 2.5em; height: 1em;
border-radius: .5em;
margin: 0 .15em;
vertical-align: -.1em;
background: #999 center / cover no-repeat;
}
.chip--loja { background-image: var(--img-foto-ouvido); background-position: 50% 28%; }
.chip--fone { background-image: var(--img-foto-juliana); background-position: 62% 30%; }
.ouvido { margin-top: 5rem; }
.ouvido__palco { padding: 1rem; }
.ouvido__titulo { left: 1.5rem; top: 4.5rem; } /* abaixo da navbar mobile */
.ouvido__titulo h2 { font-size: 1.5rem; }
.caixa p { font-size: .9375rem; }
.ouvido__fecho p { font-size: 1rem; line-height: 1.45; }
/* no corte em pé o fone desloca demais: as caixas abandonam a âncora
do ouvido e empilham à esquerda, abaixo do título, sem filete */
.caixa { width: min(16rem, 78vw); left: 8%; }
.caixa__filete { display: none; }
.ouvido__fecho { left: 1.5rem; right: 4.5rem; bottom: 1.5rem; }
.ouvido__dica { right: 1.5rem; bottom: 1.5rem; }
.fecho { text-align: left; padding: 6rem 1.5rem 6.5rem; }
.fecho__titulo { font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em; }
.fecho__sub { font-size: 1rem; line-height: 1.5rem; margin-top: 1.25rem; }
.fecho__acoes { flex-wrap: wrap; justify-content: flex-start; gap: .5rem; margin-top: 2rem; }
.fecho__acoes .botao { width: auto; max-width: none; height: 2.75rem; padding: 0 1.25rem; font-size: .875rem; }
.rodape { padding: 3.5rem 1.5rem 2rem; }
.rodape__interno { width: 100%; }
/* grupos empilhados com divisórias, alvos de toque generosos */
.rodape__topo { grid-template-columns: 1fr; gap: 0; }
.rodape__logo { grid-column: 1; margin-bottom: 2rem; }
.rodape__coluna { min-width: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 1.5rem 0; }
.rodape__coluna h4 { font-size: .6875rem; margin-bottom: 1rem; }
.rodape__coluna li + li { margin-top: .25rem; }
.rodape__coluna a { font-size: .9375rem; padding: .4rem 0; }
.rodape__regua { margin: .5rem 0 1rem; }
/* a navbar mobile tem ~76px; 8rem deixaria 52px de folga sobrando */
#lidera, #privacidade, #demonstracao, #atendimento { scroll-margin-top: 5.5rem; }
.rodape__base { flex-direction: column; gap: .5rem; font-size: .625rem; }
}
/* ============================================================
MOBILE — CONCEITO V2 (≤1100px)
O desktop mantém a composição do Figma; no mobile as seções
so-desktop somem e entram as do conceito aprovado (hero da
ruiva, brinde, tecnologia, ficha de números, placar, dois
tons e cards), tudo com os tokens da casa.
============================================================ */
.so-mobile { display: none; }
@media (max-width: 1100px) {
.so-desktop { display: none !important; }
.so-mobile { display: block; }
/* ---- nav do conceito: barra translúcida com fio ---- */
.nav {
padding: 1rem 1.25rem;
background: rgba(221,219,215,.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(24,24,24,.16);
}
/* Sem moldura, mas com alvo de toque de 44px: a caixa cresce e a margem
negativa devolve o alinhamento óptico das barras com a borda do texto. */
.nav__menu {
background: none; border: 0; border-radius: 0;
width: 2.75rem; height: 2.75rem; padding: 0;
margin-right: -.5625rem;
gap: 5px;
}
.nav__menu span { width: 26px; height: 2.5px; margin: 0; }
.nav__menu.aberto span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__menu.aberto span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* ---- pílulas do conceito ---- */
.pilula {
display: inline-flex; align-items: center; justify-content: center;
height: 2.5rem; padding: 0 1.125rem;
border-radius: 999px; font-size: .875rem; font-weight: 400;
}
.pilula--clara { background-image: var(--grad-claro); border: .5px solid #fff; color: var(--ink); }
.pilula--vazada { border: 1px solid rgba(255,255,255,.85); color: #fff; }
.pilula--tinta { border: 1px solid var(--ink); color: var(--ink); height: 2.75rem; padding: 0 1.375rem; }
/* ---- hero: a ruiva é a primeira dobra ---- */
.m-hero { position: relative; }
.m-hero__foto {
position: relative;
height: calc(100svh - 4rem);
background: #6b5744 var(--img-foto-juliana) center 20% / cover no-repeat;
}
.m-hero__foto::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(24,24,24,0) 45%, rgba(24,24,24,.55) 100%);
}
.m-hero__sobre {
position: absolute; left: 0; right: 0; bottom: 1.875rem; z-index: 2;
display: grid; justify-items: center; gap: 1rem;
padding: 0 1.5rem; text-align: center; color: #fff;
}
.m-hero__sobre h1 {
font-size: 1.875rem; line-height: 1.08; letter-spacing: -.015em; font-weight: 500;
text-wrap: balance;
text-shadow: 0 2px 24px rgba(24,24,24,.4);
}
.m-hero__acoes { display: flex; gap: .5rem; }
/* ---- brinde editorial ---- */
.m-brinde { padding: 3.5rem 1.5rem 3rem; }
.m-brinde p { font-size: 1.5625rem; line-height: 1.32; letter-spacing: -.01em; font-weight: 500; }
.m-seta { vertical-align: -.05em; margin: 0 .08em; }
/* ---- cena do ouvido: full-bleed, sem calha ---- */
.ouvido { margin-top: 0; }
.ouvido__palco { padding: 0; }
.ouvido__moldura { border-radius: 0; }
.ouvido__titulo { left: 1.5rem; right: 1.5rem; top: 5rem; }
/* caixas na medida compacta do conceito (o 40% maior é só desktop) */
.caixa__cartao { border-radius: .875rem; padding: .875rem 1rem .95rem; }
.caixa__cab { gap: .5rem; margin-bottom: .45rem; }
.caixa__cab .rotulo, .caixa__cab time { font-size: .625rem; }
.caixa__aro { width: .8125rem; height: .8125rem; border-width: 1.4px; }
.caixa { transition-duration: .5s, .5s, 0s; }
#cx-0 { top: 33%; }
#cx-1 { top: 49%; }
#cx-2 { top: 65%; }
.ouvido__fecho { left: 1.5rem; right: 4.75rem; bottom: 1.75rem; }
.ouvido__fecho p { font-size: .9375rem; line-height: 1.45; }
.ouvido__dica { right: 1.5rem; bottom: 1.875rem; }
/* ---- tecnologia ---- */
.m-tec { padding: 4rem 1.5rem 3rem; }
.m-olho { font-size: .6875rem; color: var(--ink-68); margin-bottom: 1rem; display: block; }
.m-tec h2 { font-size: 1.875rem; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.m-tec__corpo { font-size: .9375rem; line-height: 1.6; color: var(--ink-68); margin: 1rem 0 1.5rem; max-width: 34ch; }
/* ---- ficha de números ---- */
.m-specs { padding: 3.5rem 1.5rem 3rem; }
.m-specs__cab {
display: flex; justify-content: space-between;
font-size: .625rem; color: var(--ink-68);
padding-bottom: .75rem; border-bottom: 1px solid rgba(24,24,24,.16);
}
.m-spec {
display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
padding: 1.125rem 0; border-bottom: 1px solid rgba(24,24,24,.16);
}
.m-spec b { display: block; font-size: .9375rem; font-weight: 600; }
.m-spec small { font-size: .8125rem; color: rgba(24,24,24,.55); }
.m-spec__valor { font-size: .9375rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-specs__mais { font-size: 1.5625rem; font-weight: 500; letter-spacing: -.01em; margin-top: 1.625rem; }
/* ---- dois tons ---- */
.m-viante { padding: 3.75rem 1.5rem 2rem; }
.m-viante p { font-size: 1.5rem; line-height: 1.3; font-weight: 500; letter-spacing: -.015em; }
.m-suave { color: rgba(24,24,24,.55); }
/* ---- privacidade: o contraste ouvir x escutar ---- */
.m-priv { padding: 1rem 1.5rem 0; }
.m-priv__cab h2 { font-size: 1.625rem; line-height: 1.2; letter-spacing: -.015em; margin-top: .25rem; }
.m-priv__lead { font-size: .9375rem; line-height: 1.6; color: var(--ink-68); margin-top: 1rem; }
.m-priv__cartoes { display: grid; gap: .875rem; margin-top: 1.75rem; }
.m-priv__regra {
border-left: 2px solid var(--acento);
padding: .25rem 0 .25rem 1rem;
margin-top: 1.75rem;
font-size: .9375rem; line-height: 1.55; color: var(--ink-68);
}
.m-priv__regra strong { color: var(--ink); font-weight: 600; }
/* ---- O que vem junto: cards com os degradês do desktop ---- */
.m-junto { padding-top: 3.5rem; }
.m-junto__cab { padding: 0 1.5rem; }
.m-junto__cab h2 { font-size: 1.875rem; line-height: 1.08; letter-spacing: -.02em; }
.m-cards { display: grid; gap: .875rem; padding: 1.5rem 1.5rem; }
.m-card {
border-radius: 1.5rem; min-height: 21.875rem;
padding: 1.375rem;
display: flex; flex-direction: column; justify-content: space-between;
}
.m-card__icone {
width: 2.875rem; height: 2.875rem; border-radius: .8125rem;
background: #fff; display: grid; place-items: center;
}
.m-card__base { display: grid; gap: .3rem; }
.m-card__rotulo { font-size: .625rem; opacity: .8; }
.m-card h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
.m-card p:not(.m-card__rotulo) { font-size: .9375rem; line-height: 1.55; max-width: 32ch; }
.m-card--claro { background-image: var(--grad-claro); color: var(--ink); }
.m-card--cartao { background-image: var(--grad-cartao); color: var(--ink); }
.m-card--escuro { background-image: var(--grad-escuro); color: var(--creme); }
.m-card--escuro .m-card__icone { background: rgba(255,255,255,.12); }
}