/* =============================================================
MÍDIA KIT — FOLHA DE ESTILO
Para trocar as cores do site, mude apenas os valores em :root
============================================================= */
/* -------------------------------------------------------------
PALETA MONOCROMÁTICA
Nenhuma cor: só papel, tinta e os cinzas entre os dois.
Tipografia escolhida a partir do Fonts In Use, categoria
Fashion/Apparel — onde a grotesca geométrica domina
(Futura é a 2ª mais usada, com 1.238 registros).
Jost é a melhor interpretação livre da Futura;
Inter cobre a linhagem Helvetica do texto corrido.
------------------------------------------------------------- */
:root{
/* fundos, do mais claro ao mais escuro */
--preto: #F3F2F0; /* papel — fundo da página */
--carvao: #EAE8E5; /* papel 2 — faixas alternadas */
--superficie: #FFFFFF; /* cartões */
--superficie-2: #E6E4E0; /* trilhos, campos */
--borda: rgba(17,17,17,.30);
--borda-suave: rgba(17,17,17,.11);
/* o "realce" é a própria tinta: monocromático de verdade */
--ouro: #111111;
--ouro-claro: #2E2E2E;
--ouro-escuro: #000000;
--texto: #111111;
--texto-suave: #55534F;
--texto-fraco: #8A8781;
--fonte-titulo: 'Jost', 'Futura', 'Century Gothic', sans-serif;
--fonte-corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--raio: 10px;
--raio-g: 16px;
--largura: 1180px;
--transicao: .45s cubic-bezier(.22,1,.36,1);
}
/* -------------------------------------------------------------
VARIANTE ESCURA (opcional)
Para voltar ao fundo preto, acrescente class="escuro" na tag
do index.html. A paleta continua monocromática.
------------------------------------------------------------- */
html.escuro{
--preto: #0B0B0B;
--carvao: #131313;
--superficie: #1A1A1A;
--superficie-2: #242424;
--borda: rgba(255,255,255,.28);
--borda-suave: rgba(255,255,255,.10);
--ouro: #FFFFFF;
--ouro-claro: #E4E4E4;
--ouro-escuro: #B8B8B8;
--texto: #F2F2F2;
--texto-suave: #A5A5A5;
--texto-fraco: #6E6E6E;
}
*,*::before,*::after{ box-sizing:border-box; }
/* O atributo hidden tem que ganhar de qualquer display de classe.
Sem isto, um placeholder com display:flex continua aparecendo
mesmo depois de escondido pelo JS. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
margin:0;
background:var(--preto);
color:var(--texto);
font-family:var(--fonte-corpo);
font-size:16px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
.container{
width:100%;
max-width:var(--largura);
margin-inline:auto;
padding-inline:24px;
}
/* ---------- Tipografia ---------- */
h1,h2,h3{ font-family:var(--fonte-titulo); font-weight:500; line-height:1.15; margin:0; }
h2{ font-size:clamp(2rem, 4vw, 3.1rem); letter-spacing:-.01em; }
.h2--pequeno{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
h3{ font-size:1.15rem; letter-spacing:.01em; }
.sobretitulo{
font-family:var(--fonte-corpo);
font-size:.72rem;
font-weight:600;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--ouro);
margin:0 0 14px;
}
.secao__sub{
color:var(--texto-suave);
max-width:58ch;
margin:16px auto 0;
font-size:1.02rem;
}
/* ---------- Botões ---------- */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:15px 30px;
border:none;
border-radius:100px;
background:var(--ouro);
color:var(--preto);
font-family:var(--fonte-corpo);
font-size:.9rem;
font-weight:500;
letter-spacing:.01em;
cursor:pointer;
transition:transform var(--transicao), box-shadow var(--transicao), filter var(--transicao);
box-shadow:0 4px 18px rgba(17,17,17,.12);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(17,17,17,.2); }
.btn:active{ transform:translateY(0); }
.btn--vazado{
background:transparent;
color:var(--texto);
border:1px solid var(--borda);
box-shadow:none;
}
.btn--vazado:hover{ border-color:var(--ouro); color:var(--ouro-claro); box-shadow:none; }
.btn--pequeno{ padding:11px 22px; font-size:.84rem; }
.btn--largo{ width:100%; padding:16px; }
/* ============================================================
NAVEGAÇÃO
============================================================ */
.nav{
position:fixed; inset:0 0 auto 0; z-index:45;
transition:background .3s ease, border-color .3s ease,
backdrop-filter .3s ease, opacity .4s ease, transform .4s var(--transicao);
border-bottom:1px solid transparent;
}
/* fica escondido enquanto o topo cinematográfico está na tela */
.nav--oculta{
opacity:0; pointer-events:none;
transform:translateY(-100%);
}
.nav--fixa{
background:color-mix(in srgb, var(--preto) 86%, transparent);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom-color:var(--borda-suave);
}
.nav__inner{
display:flex; align-items:center; justify-content:space-between;
gap:24px; height:74px;
}
.nav__marca{
font-family:var(--fonte-titulo);
font-size:1.22rem;
letter-spacing:.02em;
white-space:nowrap;
}
.nav__links{ display:flex; gap:30px; margin-left:auto; }
.nav__links a{
font-size:.88rem; color:var(--texto-suave);
position:relative; padding:4px 0;
transition:color .25s ease;
}
.nav__links a::after{
content:''; position:absolute; left:0; bottom:0;
width:0; height:1px; background:var(--ouro);
transition:width .3s ease;
}
.nav__links a:hover{ color:var(--texto); }
.nav__links a:hover::after{ width:100%; }
.nav__menu{
display:none; flex-direction:column; gap:5px;
background:none; border:none; cursor:pointer; padding:8px;
}
.nav__menu span{ width:24px; height:2px; background:var(--texto); border-radius:2px; transition:.3s; }
.nav__menu.aberto span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__menu.aberto span:nth-child(2){ opacity:0; }
.nav__menu.aberto span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* ============================================================
HERO
============================================================ */
.hero{
position:relative;
padding:150px 0 90px;
overflow:hidden;
background:var(--preto);
}
.hero__brilho{ display:none; }
.hero__inner{
position:relative;
display:grid;
grid-template-columns:1.15fr .85fr;
gap:70px; align-items:center;
}
.hero__nome{
font-size:clamp(2.8rem, 6.2vw, 4.8rem);
font-weight:400;
line-height:1;
letter-spacing:-.035em;
color:var(--texto);
margin-bottom:10px;
}
.hero__arroba{
color:var(--ouro); font-size:1.02rem; font-weight:500;
letter-spacing:.06em; margin:0 0 22px;
}
.hero__frase{
font-size:1.12rem; color:var(--texto-suave);
max-width:46ch; margin:0 0 34px;
}
.hero__acoes{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px; }
.hero__redes{ display:flex; gap:10px; flex-wrap:wrap; }
.hero__redes a{
display:inline-flex; align-items:center; gap:9px;
padding:9px 16px;
border:1px solid var(--borda-suave); border-radius:100px;
font-size:.84rem; color:var(--texto-suave);
transition:.3s var(--transicao);
}
.hero__redes a:hover{ border-color:var(--ouro); color:var(--ouro-claro); transform:translateY(-2px); }
.hero__redes svg{ width:16px; height:16px; }
/* Foto do hero */
.hero__foto{ position:relative; }
.moldura{
position:relative;
aspect-ratio:4/5;
border-radius:var(--raio-g);
overflow:hidden;
border:1px solid var(--borda);
background:var(--superficie);
box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.moldura img{ width:100%; height:100%; object-fit:cover; }
.moldura::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 58%, rgba(10,10,12,.5));
pointer-events:none;
}
.hero__local{ color:#fff; mix-blend-mode:difference; }
.moldura__vazia{
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px; text-align:center; padding:24px;
background:linear-gradient(150deg,var(--superficie-2),var(--carvao));
}
.moldura__vazia span{
font-family:var(--fonte-titulo); font-size:3.4rem;
color:var(--ouro); letter-spacing:.04em;
}
.moldura__vazia small{ color:var(--texto-fraco); font-size:.76rem; line-height:1.7; }
.moldura__vazia code{ color:var(--texto-suave); font-size:.74rem; }
.hero__local{
position:absolute; bottom:20px; left:20px; right:20px;
z-index:2;
font-size:.8rem; color:var(--texto-suave);
display:flex; align-items:center; gap:8px;
}
.hero__local::before{
content:''; width:5px; height:5px; border-radius:50%;
background:var(--ouro); flex:none;
box-shadow:0 0 0 3px rgba(17,17,17,.2);
}
/* ============================================================
FAIXA DE TOTAIS
============================================================ */
.faixa{
border-block:1px solid var(--borda-suave);
background:var(--carvao);
}
.faixa__inner{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:1px;
background:var(--borda-suave);
}
.faixa__item{
background:var(--carvao);
padding:34px 20px;
text-align:center;
}
.faixa__num{
font-family:var(--fonte-titulo);
font-size:clamp(1.9rem,3.4vw,2.7rem);
color:var(--ouro-claro);
line-height:1;
}
.faixa__rot{
font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--texto-fraco); margin-top:10px;
}
/* ============================================================
SEÇÕES
============================================================ */
.secao{ padding:110px 0; position:relative; }
.secao--alt{ background:var(--carvao); }
.secao--fina{ padding:70px 0; }
.secao__cabecalho{ text-align:center; max-width:700px; margin:0 auto 60px; }
/* ---------- Sobre ---------- */
.sobre__grid{
display:grid; grid-template-columns:.85fr 1.15fr;
gap:70px; align-items:center;
}
.sobre__foto{
aspect-ratio:3/4; border-radius:var(--raio-g); overflow:hidden;
border:1px solid var(--borda-suave); background:var(--superficie);
}
.sobre__foto img{ width:100%; height:100%; object-fit:cover; }
.sobre__texto h2{ margin-bottom:22px; }
.sobre__texto p{ color:var(--texto-suave); margin:0 0 18px; }
.sobre__destaques{
display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
gap:18px; margin-top:36px;
padding-top:30px; border-top:1px solid var(--borda-suave);
}
.destaque__num{
font-family:var(--fonte-titulo); font-size:1.7rem;
color:var(--ouro-claro); line-height:1.1;
}
.destaque__txt{ font-size:.82rem; color:var(--texto-fraco); margin-top:4px; }
/* ---------- Plataformas ---------- */
.plataformas{
display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px;
}
.plataforma{
background:var(--superficie);
border:1px solid var(--borda-suave);
border-radius:var(--raio-g);
padding:32px;
transition:.5s var(--transicao);
position:relative; overflow:hidden;
}
.plataforma::before{
content:''; position:absolute; inset:0 0 auto 0; height:1px;
background:linear-gradient(90deg,transparent,var(--ouro),transparent);
opacity:0; transition:opacity .5s ease;
}
.plataforma:hover{ transform:translateY(-6px); border-color:var(--borda); }
.plataforma:hover::before{ opacity:1; }
.plataforma__topo{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.plataforma__icone{
width:40px; height:40px; flex:none;
display:grid; place-items:center;
border-radius:11px;
background:rgba(17,17,17,.1); color:var(--ouro);
border:1px solid var(--borda);
}
.plataforma__icone svg{ width:19px; height:19px; }
.plataforma__nome{ font-size:.94rem; font-weight:600; }
.plataforma__seg{
font-family:var(--fonte-titulo);
font-size:2.9rem; line-height:1;
color:var(--ouro-claro);
margin:6px 0 4px;
}
.plataforma__seglabel{
font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--texto-fraco); margin-bottom:24px;
}
.plataforma__metricas{ display:grid; gap:1px; background:var(--borda-suave); border-radius:10px; overflow:hidden; }
.metrica{
display:flex; justify-content:space-between; align-items:baseline;
padding:13px 16px; background:var(--superficie-2);
font-size:.88rem;
}
.metrica span:first-child{ color:var(--texto-fraco); }
.metrica span:last-child{ font-weight:600; color:var(--texto); }
/* ---------- Audiência ---------- */
.audiencia__grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px;
}
.cartao{
background:var(--superficie);
border:1px solid var(--borda-suave);
border-radius:var(--raio-g);
padding:30px;
}
.cartao h3{ margin-bottom:6px; }
.cartao__nota{
margin:0 0 24px;
font-size:.72rem; font-weight:500;
letter-spacing:.14em; text-transform:uppercase;
color:var(--texto-fraco);
}
/* rosca de gênero */
.rosca{ display:grid; place-items:center; margin-bottom:20px; }
.rosca svg{ width:170px; height:170px; transform:rotate(-90deg); }
.rosca__centro{
position:absolute; text-align:center;
}
.rosca__wrap{ position:relative; display:grid; place-items:center; }
.rosca__valor{ font-family:var(--fonte-titulo); font-size:2rem; color:var(--ouro-claro); line-height:1; }
.rosca__rot{ font-size:.72rem; color:var(--texto-fraco); letter-spacing:.1em; text-transform:uppercase; }
.legenda{ display:flex; flex-direction:column; gap:10px; }
.legenda__item{ display:flex; align-items:center; gap:10px; font-size:.88rem; }
.legenda__cor{ width:10px; height:10px; border-radius:3px; flex:none; }
.legenda__item span:last-child{ margin-left:auto; color:var(--texto-suave); font-weight:600; }
/* barras */
.barras{ display:flex; flex-direction:column; gap:18px; }
/* align-items:center porque a caixa do odômetro é um pouco mais
alta que uma linha de texto normal; sem isto o número fica
alguns pixels acima do rótulo. */
.barra__topo{
display:flex; justify-content:space-between; align-items:center;
font-size:.88rem; margin-bottom:8px;
}
.barra__topo span:last-child{ color:var(--ouro-claro); font-weight:600; }
.barra__trilho{ height:7px; border-radius:100px; background:var(--superficie-2); overflow:hidden; }
.barra__preenche{
height:100%; width:0; border-radius:100px;
background:linear-gradient(90deg,var(--ouro-escuro),var(--ouro-claro));
transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.interesses{ margin-top:40px; text-align:center; }
.interesses h3{ margin-bottom:20px; }
.etiquetas{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.etiqueta{
padding:9px 18px; border-radius:100px;
border:1px solid var(--borda-suave);
font-size:.85rem; color:var(--texto-suave);
transition:.3s ease;
}
.etiqueta:hover{ border-color:var(--ouro); color:var(--ouro-claro); }
/* ============================================================
A MARCA (Anisty)
============================================================ */
.marca__grid{ display:flex; justify-content:center; }
.marca__texto{ max-width:74ch; text-align:center; }
.marca__texto h2{ margin-bottom:26px; }
.marca__texto p{ color:var(--texto-suave); margin:0 0 18px; font-size:1.02rem; }
.marca__texto .etiquetas{ margin-top:34px; }
/* ============================================================
TIPOS DE COLABORAÇÃO
============================================================ */
/* O fundo é o mesmo dos cards e as divisórias saem de um
box-shadow em cada um. Assim, quando o número de itens não
fecha a última linha, a sobra continua branca em vez de
aparecer como um bloco cinza solto. */
.colabs{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
background:var(--superficie);
border:1px solid var(--borda-suave);
border-radius:var(--raio-g);
overflow:hidden;
}
.colab{
padding:38px 30px 42px;
display:flex; flex-direction:column;
transition:background .45s var(--transicao);
box-shadow:1px 0 0 var(--borda-suave), 0 1px 0 var(--borda-suave);
}
.colab:hover{ background:var(--carvao); }
.colab__num{
font-family:var(--fonte-titulo);
font-size:.78rem; font-weight:500;
letter-spacing:.2em;
color:var(--texto-fraco);
margin-bottom:20px;
}
.colab__nome{
font-size:1.18rem; font-weight:500;
letter-spacing:-.01em;
margin-bottom:12px;
}
.colab__txt{
margin:0;
font-size:.9rem; line-height:1.6;
color:var(--texto-suave);
}
/* ---------- Direção visual & curadoria ---------- */
.metodo{
margin-top:52px;
padding-top:44px;
border-top:1px solid var(--borda-suave);
}
.metodo h3{
text-align:center;
margin-bottom:36px;
font-size:1.3rem;
}
.metodo__lista{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px 40px;
}
.metodo__item b{
display:block;
font-family:var(--fonte-corpo);
font-size:.72rem; font-weight:600;
letter-spacing:.18em; text-transform:uppercase;
color:var(--texto);
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px solid var(--borda-suave);
}
.metodo__item span{
font-size:.88rem; line-height:1.6;
color:var(--texto-suave);
}
/* ---------- Marcas ---------- */
/* Mesma técnica da grade de parcerias: o fundo é o das células e
as divisórias saem de um box-shadow em cada uma. Assim a sobra
da última linha continua limpa em vez de virar bloco cinza. */
.marcas{
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
background:var(--preto);
border:1px solid var(--borda-suave); border-radius:var(--raio-g); overflow:hidden;
}
.marca{
box-shadow:1px 0 0 var(--borda-suave), 0 1px 0 var(--borda-suave);
min-height:98px;
display:grid; place-items:center;
padding:22px;
font-family:var(--fonte-titulo); font-size:1.1rem;
color:var(--texto-fraco);
transition:.4s ease;
}
.marca:hover{ color:var(--ouro-claro); background:var(--carvao); }
.marca img{ max-height:40px; width:auto; object-fit:contain; opacity:.7; transition:.4s ease; }
.marca:hover img{ opacity:1; }
/* ---------- Cases ---------- */
.cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; }
.case{
background:var(--superficie);
border:1px solid var(--borda-suave);
border-radius:var(--raio-g);
overflow:hidden;
display:flex; flex-direction:column;
transition:.5s var(--transicao);
}
.case:hover{ transform:translateY(-6px); border-color:var(--borda); }
.case__img{
aspect-ratio:16/10; background:linear-gradient(150deg,var(--superficie-2),var(--carvao));
position:relative; overflow:hidden;
}
.case__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--transicao); }
.case:hover .case__img img{ transform:scale(1.05); }
.case__vazia{
position:absolute; inset:0; display:grid; place-items:center;
font-family:var(--fonte-titulo); font-size:1.6rem; color:var(--texto-fraco);
}
.case__corpo{ padding:28px; display:flex; flex-direction:column; flex:1; }
.case__marca{
font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--ouro); margin-bottom:10px;
}
.case__campanha{ font-size:1.18rem; margin-bottom:10px; }
.case__desc{ font-size:.89rem; color:var(--texto-suave); margin:0 0 24px; flex:1; }
.case__res{
display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
padding-top:20px; border-top:1px solid var(--borda-suave);
}
.case__res div{ text-align:center; }
.case__res strong{
display:block; font-family:var(--fonte-titulo); font-size:1.35rem;
color:var(--ouro-claro); font-weight:500; line-height:1.1;
}
.case__res small{ font-size:.7rem; color:var(--texto-fraco); letter-spacing:.06em; }
/* ---------- Depoimentos ---------- */
.depoimentos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:22px; }
.depoimento{
background:var(--superficie); border:1px solid var(--borda-suave);
border-radius:var(--raio-g); padding:34px;
position:relative;
}
.depoimento::before{
content:'"'; position:absolute; top:6px; left:24px;
font-family:var(--fonte-titulo); font-size:5rem; line-height:1;
color:rgba(17,17,17,.18);
}
.depoimento p{
font-family:var(--fonte-titulo); font-style:italic;
font-size:1.08rem; line-height:1.65; color:var(--texto);
margin:0 0 22px; position:relative;
}
.depoimento__autor{ font-size:.9rem; font-weight:600; }
.depoimento__cargo{ font-size:.8rem; color:var(--texto-fraco); }
/* ---------- Contato ---------- */
.contato{ background:var(--preto); }
.contato__grid{
display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
}
.contato__diretos{ display:flex; flex-direction:column; gap:12px; margin-top:32px; }
.direto{
display:flex; align-items:center; gap:14px;
padding:16px 20px;
background:var(--superficie); border:1px solid var(--borda-suave);
border-radius:var(--raio);
transition:.4s var(--transicao);
}
.direto:hover{ border-color:var(--ouro); transform:translateX(4px); }
.direto__icone{
width:38px; height:38px; flex:none; display:grid; place-items:center;
border-radius:10px; background:rgba(17,17,17,.1); color:var(--ouro);
}
.direto__icone svg{ width:18px; height:18px; }
.direto__rot{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-fraco); }
.direto__val{ font-size:.94rem; font-weight:500; }
/* formulário */
.formulario{
background:var(--superficie);
border:1px solid var(--borda-suave);
border-radius:var(--raio-g);
padding:38px;
display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.campo{ display:flex; flex-direction:column; gap:8px; }
.campo--largo{ grid-column:1 / -1; }
.formulario .btn{ grid-column:1 / -1; }
.campo label{
font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--texto-fraco);
}
.campo input,.campo select,.campo textarea{
width:100%;
background:var(--carvao);
border:1px solid var(--borda-suave);
border-radius:10px;
padding:13px 15px;
color:var(--texto);
font-family:var(--fonte-corpo); font-size:.92rem;
transition:.3s ease;
resize:vertical;
}
.campo input::placeholder,.campo textarea::placeholder{ color:var(--texto-fraco); }
.campo input:focus,.campo select:focus,.campo textarea:focus{
outline:none; border-color:var(--ouro);
box-shadow:0 0 0 3px rgba(17,17,17,.12);
}
.campo select{ appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
padding-right:42px;
}
.campo select option{ background:var(--carvao); color:var(--texto); }
.formulario__aviso{
grid-column:1 / -1; margin:0; font-size:.85rem; text-align:center; min-height:1.2em;
}
.formulario__aviso.ok{ color:var(--ouro-claro); }
.formulario__aviso.erro{ color:#E4736B; }
/* ---------- Rodapé ---------- */
.rodape{
border-top:1px solid var(--borda-suave);
background:var(--carvao);
padding:56px 0;
}
.rodape__inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.rodape__nome{ font-family:var(--fonte-titulo); font-size:1.5rem; margin:0; }
.rodape__redes{ display:flex; gap:12px; }
.rodape__redes a{
width:42px; height:42px; display:grid; place-items:center;
border:1px solid var(--borda-suave); border-radius:50%;
color:var(--texto-suave); transition:.35s var(--transicao);
}
.rodape__redes a:hover{ border-color:var(--ouro); color:var(--ouro); transform:translateY(-3px); }
.rodape__redes svg{ width:17px; height:17px; }
.rodape__texto{ margin:0; font-size:.78rem; color:var(--texto-fraco); letter-spacing:.06em; }
/* ============================================================
EFEITOS ADAPTADOS DO NÃO CODEI
============================================================ */
/* --- j16 · revelar palavra por palavra --- */
.palavra{
display:inline-block;
opacity:0; transform:translateY(18px);
transition:opacity .55s cubic-bezier(.16,1,.3,1),
transform .55s cubic-bezier(.16,1,.3,1);
}
.palavra.dentro{ opacity:1; transform:none; }
/* --- j04 · texto que se preenche ---
A cor de cada palavra é escrita pelo JS. A transição curta
suaviza o degradê sem atrasar o acompanhamento da rolagem. */
.preencher span{
color:rgba(17,17,17,.16);
transition:color .25s linear;
}
html.escuro .preencher span{ color:rgba(255,255,255,.16); }
/* --- j17 · palavras que se alternam --- */
.hero__rotativo{
display:flex; align-items:center; gap:10px;
flex-wrap:wrap;
font-family:var(--fonte-titulo);
font-size:clamp(1.1rem, 1.9vw, 1.55rem);
font-weight:400;
letter-spacing:-.01em;
color:var(--texto-suave);
margin:0 0 30px;
}
.hero__rotativo .janela{
position:relative;
height:1.4em;
overflow:hidden;
display:inline-block;
vertical-align:bottom;
}
.hero__rotativo .fita{ display:block; will-change:transform; }
.hero__rotativo .fita span{
display:block;
height:1.4em; line-height:1.4em;
color:var(--texto);
white-space:nowrap;
}
/* --- j18 · odômetro ---
Cada algarismo é uma fita de 0 a 9 que desliza até parar.
Janela, fita e caracteres fixos usam EXATAMENTE a mesma altura
(--alt-digito), senão o deslocamento de 10% por dígito acumula
erro e os números saem desalinhados. */
/* O odômetro NÃO define display no elemento hospedeiro: ele entra
em cima de títulos, spans e blocos que já têm o próprio display
(alguns com especificidade de ID, que venceria qualquer regra de
classe aqui). Quem garante a linha horizontal são os filhos, em
inline-block — isso funciona dentro de block, inline ou flex.
vertical-align:top alinha tudo pelo topo, porque inline-block com
overflow:hidden encosta na linha de base e desalinharia. */
.odometro{
--alt-digito:1.15em;
line-height:var(--alt-digito);
white-space:nowrap;
}
/* herda tudo do elemento hospedeiro; só zera o itálico do */
.odometro i{
font-style:normal;
font-size:inherit;
font-weight:inherit;
letter-spacing:inherit;
text-transform:none;
opacity:1;
margin:0;
}
.odometro .digito,
.odometro .fixo{
display:inline-block;
vertical-align:top;
height:var(--alt-digito);
line-height:var(--alt-digito);
}
.odometro .digito{ overflow:hidden; }
.odometro .fita{
display:block;
transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}
.odometro .fita i{
display:block;
height:var(--alt-digito);
line-height:var(--alt-digito);
text-align:center;
}
/* --- j12 · luz que segue o mouse --- */
.com-luz{ position:relative; }
.com-luz::after{
content:''; position:absolute; inset:0;
pointer-events:none; opacity:0;
transition:opacity .35s ease;
border-radius:inherit;
background:radial-gradient(260px circle at var(--lx,50%) var(--ly,50%),
rgba(17,17,17,.13), transparent 68%);
}
.com-luz:hover::after{ opacity:1; }
/* --- fotos em cor original ---
Nenhum filtro em imagem nenhuma do site. A paleta monocromática
continua valendo para a INTERFACE (fundo, texto, botões, linhas);
as fotos entram como foram tiradas. */
.moldura img, .sobre__foto img, .case__img img, .pn-card img{
filter:none;
transition:transform 1.5s cubic-bezier(.22,1,.36,1);
}
/* --- revelar imagem por máscara ---
A foto é descoberta de baixo para cima em vez de simplesmente
aparecer. O zoom de saída dá o deslize por trás da máscara. */
.mascara{
clip-path:inset(100% 0 0 0 round var(--raio-g));
transition:clip-path 1.15s cubic-bezier(.22,1,.36,1);
}
.mascara.aberta{ clip-path:inset(0 0 0 0 round var(--raio-g)); }
.mascara img:not([data-paralaxe]){
transform:scale(1.1);
transition:transform 1.5s cubic-bezier(.22,1,.36,1);
}
.mascara.aberta img:not([data-paralaxe]){ transform:scale(1); }
/* --- inclinação do cartão ---
O giro é aplicado pelo JS. Aqui só desligamos o translate do
:hover para os dois não brigarem pelo mesmo transform. */
.plataforma:hover, .case:hover{ transform:none; }
/* --- j14 · botão elástico --- */
.btn, .hero__redes a, .rodape__redes a, .etiqueta{
transition:transform .45s cubic-bezier(.16,1,.3,1),
box-shadow var(--transicao), border-color .3s ease,
color .3s ease, filter var(--transicao);
}
/* --- métrica ainda não preenchida --- */
.metrica--vazia span:last-child{ color:var(--texto-fraco); font-weight:400; }
/* ============================================================
VÍDEOS (embeds do TikTok)
============================================================ */
.videos{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:24px;
align-items:start;
}
.video-card{
background:var(--superficie);
border:1px solid var(--borda-suave);
border-radius:var(--raio-g);
overflow:hidden;
transition:.5s var(--transicao);
}
.video-card:hover{ border-color:var(--borda); transform:translateY(-4px); }
.video-card__embed{
position:relative;
aspect-ratio:9/16;
background:linear-gradient(155deg,var(--superficie-2),var(--carvao));
overflow:hidden;
}
.video-card__embed iframe{
position:absolute; inset:0; z-index:2;
width:100%; height:100%;
border:0;
opacity:0; transition:opacity .5s ease;
}
.video-card__embed iframe.pronto{ opacity:1; }
/* fica por baixo do player: aparece se o TikTok não carregar */
.video-fallback{
position:absolute; inset:0; z-index:1;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px; text-align:center; padding:24px;
font-size:.92rem; color:var(--texto-suave);
transition:.4s var(--transicao);
}
.video-fallback:hover{ color:var(--ouro-claro); }
.video-fallback__ico{
width:56px; height:56px; display:grid; place-items:center;
border:1px solid var(--borda); border-radius:50%;
color:var(--ouro); font-size:1.05rem;
}
.video-card__pe{
padding:18px 24px 22px;
border-top:1px solid var(--borda-suave);
display:flex; flex-direction:column; gap:4px;
}
.video-card__pe strong{
font-family:var(--fonte-titulo);
font-size:1.5rem; font-weight:500;
color:var(--ouro-claro); line-height:1.1;
}
.video-card__pe span{ font-size:.84rem; color:var(--texto-suave); }
/* ============================================================
ANIMAÇÃO DE ENTRADA
============================================================ */
.reveal{
opacity:0; transform:translateY(26px);
transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.visivel{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
*{ animation:none !important; transition-duration:.01ms !important; }
.reveal{ opacity:1; transform:none; }
html{ scroll-behavior:auto; }
}
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width:980px){
.hero__inner,.sobre__grid,.contato__grid{ grid-template-columns:1fr; gap:48px; }
.hero{ padding:120px 0 70px; }
.hero__foto{ max-width:380px; margin-inline:auto; width:100%; }
.sobre__foto{ max-width:400px; margin-inline:auto; }
.sobre__grid > .sobre__foto{ order:2; }
.secao{ padding:80px 0; }
}
@media (max-width:760px){
.nav__links{
position:fixed; inset:74px 0 auto 0;
flex-direction:column; gap:0;
background:rgba(10,10,12,.97);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--borda-suave);
padding:10px 24px 22px;
transform:translateY(-105%);
opacity:0;
visibility:hidden;
transition:transform .4s var(--transicao), opacity .3s ease, visibility .4s;
}
.nav__links.aberto{ transform:translateY(0); opacity:1; visibility:visible; }
.nav__links a{ padding:15px 0; border-bottom:1px solid var(--borda-suave); font-size:.95rem; }
.nav__menu{ display:flex; }
.nav__inner > .btn{ display:none; }
.formulario{ grid-template-columns:1fr; padding:28px 22px; }
.case__res{ grid-template-columns:repeat(3,1fr); gap:6px; }
.container{ padding-inline:20px; }
}
/* ============================================================
IMPRESSÃO / SALVAR COMO PDF
============================================================ */
@media print{
:root{ --preto:#fff; --carvao:#fff; --superficie:#fff; --superficie-2:#fafafa;
--texto:#111; --texto-suave:#444; --texto-fraco:#666;
--borda:#d8c079; --borda-suave:#e4e4e4; }
body{ background:#fff; color:#111; }
.nav,.hero__brilho,.nav__menu,.formulario,.hero__acoes{ display:none !important; }
.hero{ padding:24px 0; background:#fff; }
.hero__nome{ -webkit-text-fill-color:#111; color:#111; background:none; }
.secao{ padding:28px 0; break-inside:avoid; }
.plataforma,.cartao,.case,.depoimento{ break-inside:avoid; box-shadow:none; }
.reveal{ opacity:1 !important; transform:none !important; }
.barra__preenche{ transition:none; }
a{ color:#111; }
}