/*
* Archivo hospedado aqui, nao no Google Fonts.
*
* O para fonts.googleapis.com era uma folha de estilo de terceiro que
* bloqueia a renderizacao: o navegador tinha que resolver DNS, abrir conexao e
* baixar o CSS antes de pintar qualquer coisa. Servindo do mesmo dominio, a
* fonte entra junto com o resto e some um ponto de falha externo.
*
* Só os subconjuntos latin e latin-ext, que é o que português precisa.
*/
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
src: url("fonts/archivo-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
src: url("fonts/archivo-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;
}
/*
* Over Performance — sistema visual.
*
* Cores e tipografia vieram do Manual de Identidade Visual:
* laranja #EF5435
* carvao #262626
* fonte Neue Machina (Ultrabold nos titulos, Light/Regular no texto)
*
* Neue Machina e licenciada (Pangram Pangram) e nao esta no Google Fonts. Os
* @font-face abaixo apontam para assets/fonts. Assim que os .woff2 estiverem
* la, a marca assume sozinha, sem mexer em codigo. Ate la o fallback e Archivo
* com o eixo de largura aberto, que segura a mesma pegada: grotesca larga,
* terminais retos, peso alto no titulo.
*
* Escuro e o padrao. data-theme="light" no troca o tema.
*/
/* ⛔ DESLIGADO em 29/09/2026 — os .woff2 da Neue Machina nao existem em
* assets/fonts, entao cada um destes virava um 404 a cada visita (4 por
* pagina). Assim que os arquivos licenciados estiverem la, descomentar
* este bloco e acrescentar "Neue Machina" na frente de --display.
*
* @font-face {
* font-family: "Neue Machina";
* src: url("fonts/NeueMachina-Light.woff2") format("woff2");
* font-weight: 300;
* font-display: swap;
* }
* @font-face {
* font-family: "Neue Machina";
* src: url("fonts/NeueMachina-Regular.woff2") format("woff2");
* font-weight: 400;
* font-display: swap;
* }
* @font-face {
* font-family: "Neue Machina";
* src: url("fonts/NeueMachina-Medium.woff2") format("woff2");
* font-weight: 500;
* font-display: swap;
* }
* @font-face {
* font-family: "Neue Machina";
* src: url("fonts/NeueMachina-Ultrabold.woff2") format("woff2");
* font-weight: 800;
* font-display: swap;
* }
*/
:root {
--laranja: #ef5435;
/* Laranja puro em texto pequeno sobre fundo escuro da 4.0:1, abaixo do AA.
Este da ~8:1 e e usado em rotulo, link e texto miudo. */
--laranja-texto: #ff8a63;
--preto: #1c1b1a;
--preto-2: #242322;
--preto-3: #2b2a28;
--branco: #f6f5f3;
--cinza: #a9a6a1;
--linha: rgba(255, 255, 255, 0.11);
--fio: rgba(255, 255, 255, 0.07);
/* Contorno de campo de formulario precisa de 3:1 (WCAG 1.4.11), enquanto
regua de secao pode ser fraca de proposito. Por isso este token existe
separado da --linha: 0.11 da 1.3:1 e some. */
--linha-campo: rgba(255, 255, 255, 0.4);
--brilho: rgba(239, 84, 53, 0.2);
/* Tinta escura sobre o laranja. Branco sobre #EF5435 da 3.46:1 e reprova. */
--sobre-laranja: #1c1b1a;
--max: 1080px;
--leitura: 46rem;
--display: "Neue Machina", "Archivo", ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="light"] {
--laranja: #d94726;
--laranja-texto: #b83a1c;
--preto: #faf9f7;
--preto-2: #ffffff;
--preto-3: #f1efec;
--branco: #201f1d;
--cinza: #625f5a;
--linha: rgba(32, 31, 29, 0.14);
--fio: rgba(32, 31, 29, 0.08);
--linha-campo: rgba(32, 31, 29, 0.52);
--brilho: rgba(217, 71, 38, 0.12);
--sobre-laranja: #ffffff;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--preto);
color: var(--branco);
font-family: var(--display);
font-weight: 300;
font-size: 17px;
line-height: 1.7;
font-variation-settings: "wdth" 100;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img {
max-width: 100%;
}
::selection {
background: var(--laranja);
color: var(--sobre-laranja);
}
:focus-visible {
outline: 2px solid var(--laranja-texto);
outline-offset: 4px;
}
.sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ---------------------------------------------------------------- layout */
.wrap {
max-width: var(--max);
margin: 0 auto;
padding: 0 24px;
}
/* A coluna de leitura comeca na mesma margem da , so que mais estreita.
Sem isso o texto "pula" para dentro quando a secao troca. */
.wrap .col {
max-width: var(--leitura);
}
section {
padding: 96px 0;
position: relative;
}
@media (max-width: 720px) {
section {
padding: 64px 0;
}
}
.fio {
border-top: 1px solid var(--fio);
}
/* Ruido leve tira o plastico do fundo chapado. */
.grao {
position: relative;
}
.grao::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ----------------------------------------------------------- tipografia */
h1,
h2,
h3 {
font-family: var(--display);
font-weight: 800;
letter-spacing: -0.028em;
line-height: 1.08;
text-wrap: balance;
}
h1 {
font-size: clamp(2.05rem, 6.6vw, 4.75rem);
line-height: 0.99;
letter-spacing: -0.033em;
font-variation-settings: "wdth" 112;
max-width: 16ch;
}
.tit {
font-size: clamp(1.7rem, 3.4vw, 2.5rem);
font-variation-settings: "wdth" 108;
max-width: 22ch;
}
.bloco {
font-size: clamp(1.3rem, 2.4vw, 1.75rem);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.022em;
font-variation-settings: "wdth" 104;
}
.lead {
font-size: clamp(1.08rem, 1.6vw, 1.24rem);
line-height: 1.62;
color: var(--branco);
max-width: 46ch;
}
.corpo {
color: var(--cinza);
max-width: 62ch;
}
/* O rotulo tracado do manual: Light, caixa alta, bem espacado. */
.rotulo {
font-family: var(--display);
font-weight: 400;
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--laranja-texto);
font-variation-settings: "wdth" 100;
}
.rotulo.mudo {
color: var(--cinza);
}
/* Rotulo de secao com a regua que se desenha ao entrar na tela. */
.secao-rotulo {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 40px;
}
.secao-rotulo .regua {
flex: 1;
height: 1px;
background: var(--linha);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.secao-rotulo.dentro .regua {
transform: scaleX(1);
}
.num {
font-family: var(--display);
font-weight: 800;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
line-height: 0.95;
font-variation-settings: "wdth" 115;
color: var(--laranja-texto);
}
/* Marca-texto que se desenha. Passa por baixo dos descendentes, senao
vira tachado. */
.marca {
padding-bottom: 0.14em;
background-image: linear-gradient(var(--laranja), var(--laranja));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 0.14em;
transition: background-size 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.dentro .marca,
.marca.dentro {
background-size: 100% 0.14em;
}
/* ---------------------------------------------------------------- topo */
header {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
border-bottom: 1px solid transparent;
transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
header.rolou {
background: color-mix(in srgb, var(--preto) 85%, transparent);
backdrop-filter: blur(16px);
border-bottom-color: var(--linha);
}
.bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
height: 76px;
transition: height 0.4s;
}
header.rolou .bar {
height: 62px;
}
.marca-logo {
display: block;
color: var(--branco);
flex: none;
}
.marca-logo svg {
height: 34px;
width: auto;
display: block;
transition: opacity 0.3s;
}
.marca-logo:hover svg {
opacity: 0.8;
}
.nav {
display: flex;
align-items: center;
gap: 26px;
}
.nav a.link {
color: var(--cinza);
text-decoration: none;
font-size: 0.9rem;
position: relative;
padding: 2px 0;
transition: color 0.3s;
}
.nav a.link:hover,
.nav a.link[aria-current="page"] {
color: var(--branco);
}
.nav a.link::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: var(--laranja);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s;
}
.nav a.link[aria-current="page"]::after {
transform: scaleX(1);
}
@media (max-width: 860px) {
.nav a.link {
display: none;
}
header .btn.sm {
display: none;
}
}
/* Barra de progresso da leitura. */
.progresso {
position: fixed;
inset: 0 0 auto 0;
height: 2px;
z-index: 60;
background: transparent;
}
.progresso i {
display: block;
height: 100%;
background: var(--laranja);
transform-origin: left;
transform: scaleX(0);
}
/* --------------------------------------------------------------- botao */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--laranja);
color: var(--sobre-laranja);
font-family: var(--display);
font-weight: 500;
font-size: 0.95rem;
letter-spacing: -0.01em;
text-decoration: none;
padding: 16px 28px;
border-radius: 6px;
border: 0;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -12px var(--laranja);
}
.btn svg {
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
flex: none;
}
.btn:hover svg {
transform: translateX(5px);
}
/* Brilho que atravessa o botao. */
.btn::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.26) 46%, transparent 72%);
transform: translateX(-130%);
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover::after {
transform: translateX(130%);
}
.btn.sm {
padding: 11px 20px;
font-size: 0.88rem;
}
.btn.escuro {
background: var(--branco);
color: var(--preto);
}
.btn.fantasma {
background: transparent;
color: var(--branco);
border: 1px solid var(--linha);
}
.btn.fantasma:hover {
border-color: var(--laranja);
color: var(--laranja-texto);
box-shadow: none;
}
/* ---------------------------------------------------------------- hero */
.hero {
padding: 152px 0 72px;
overflow: hidden;
}
@media (max-width: 720px) {
.hero {
padding: 116px 0 48px;
}
}
.hero .rotulo {
margin-bottom: 30px;
}
.hero .lead {
margin-top: 28px;
color: var(--cinza);
}
.hero .btn {
margin-top: 40px;
}
.hero .selo {
margin-top: 48px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 22px;
}
.hero .selo .ponto {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--laranja);
}
/* Halo laranja que segue o cursor. */
.halo {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.7s;
background: radial-gradient(420px circle at var(--gx, 20%) var(--gy, 40%), var(--brilho), transparent 65%);
}
.halo.on {
opacity: 1;
}
/* O pattern do manual: o simbolo repetido em diagonal, bem apagado. */
.pattern {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.pattern .grade {
position: absolute;
inset: -40px -40px auto -40px;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 32px;
opacity: 0.018;
transform: rotate(-8deg);
}
@media (min-width: 721px) {
.pattern .grade {
gap: 48px;
opacity: 0.03;
}
}
.pattern .grade svg {
width: 100%;
height: auto;
}
/* ------------------------------------------------------------ letreiro */
.letreiro {
overflow: hidden;
border-top: 1px solid var(--linha);
border-bottom: 1px solid var(--linha);
-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.letreiro .trilho {
display: flex;
width: max-content;
animation: correr var(--dur, 30s) linear infinite;
}
.letreiro:hover .trilho {
animation-play-state: paused;
}
@keyframes correr {
to {
transform: translate3d(-50%, 0, 0);
}
}
.letreiro .item {
display: flex;
align-items: center;
gap: 40px;
padding: 26px 40px;
flex: none;
}
@media (min-width: 721px) {
.letreiro .item {
gap: 56px;
padding: 28px 56px;
}
}
/*
* O logo entra como mascara, nao como ![]()
. Dentro de um ![]()
o SVG e um
* documento isolado, entao currentColor nao chega nele e o logo sai preto.
* Com mask-image quem pinta e o fundo do proprio span, que herda o tema.
*/
.letreiro .logo-canal {
display: block;
background: color-mix(in srgb, var(--branco) 45%, transparent);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: background 0.3s;
}
.letreiro .item:hover .logo-canal {
background: color-mix(in srgb, var(--branco) 85%, transparent);
}
.letreiro .ponto {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--laranja);
flex: none;
}
.letreiro .texto {
font-family: var(--display);
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: color-mix(in srgb, var(--branco) 55%, transparent);
white-space: nowrap;
}
/* ------------------------------------------------------------- espelho */
.espelho p + p {
margin-top: 24px;
}
.espelho .virada {
margin-top: 32px;
}
/* -------------------------------------------------------------- metodo */
.trilha {
position: relative;
padding-left: 76px;
margin-top: 48px;
}
@media (max-width: 640px) {
.trilha {
padding-left: 56px;
}
}
.trilha .rail {
position: absolute;
left: 23px;
top: 8px;
bottom: 8px;
width: 1px;
background: var(--linha);
}
@media (max-width: 640px) {
.trilha .rail {
left: 15px;
}
}
.trilha .rail i {
display: block;
width: 1px;
background: var(--laranja);
height: 0;
transition: height 0.15s linear;
}
.passo {
position: relative;
}
.passo + .passo {
margin-top: 80px;
}
@media (max-width: 640px) {
.passo + .passo {
margin-top: 56px;
}
}
.passo .n {
position: absolute;
left: -76px;
top: 2px;
width: 47px;
height: 47px;
border-radius: 50%;
border: 1px solid var(--linha);
background: var(--preto);
color: var(--cinza);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
transition: all 0.5s;
}
@media (max-width: 640px) {
.passo .n {
left: -56px;
width: 31px;
height: 31px;
font-size: 0.7rem;
}
}
.passo.aceso .n {
border-color: var(--laranja);
background: var(--laranja);
color: var(--sobre-laranja);
}
.passo h3 {
transition: color 0.5s;
}
.passo.atual h3 {
color: var(--laranja-texto);
}
.passo .texto {
margin-top: 18px;
}
.passo .texto p + p {
margin-top: 18px;
}
/* --------------------------------------------------------------- cards */
.card {
background: var(--preto-2);
border: 1px solid var(--linha);
border-radius: 14px;
padding: 34px;
display: flex;
flex-direction: column;
height: 100%;
}
/* Empurra o rodape do card para baixo, para dois cards lado a lado
terminarem alinhados mesmo com quantidade de texto diferente. */
.card .rodape-card {
margin-top: auto;
padding-top: 26px;
}
.grade-2 > *,
.grade-3 > * {
min-height: 100%;
}
.grade-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.grade-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 820px) {
.grade-2,
.grade-3 {
grid-template-columns: 1fr;
}
}
/* Porta do institucional: card que e link. */
a.porta {
display: flex;
flex-direction: column;
gap: 14px;
text-decoration: none;
color: inherit;
transition: border-color 0.3s, transform 0.3s;
}
a.porta:hover {
border-color: var(--laranja);
transform: translateY(-4px);
}
a.porta .seta {
margin-top: auto;
padding-top: 24px;
color: var(--branco);
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.3s;
}
a.porta:hover .seta {
color: var(--laranja-texto);
}
a.porta .seta svg {
transition: transform 0.3s;
}
a.porta:hover .seta svg {
transform: translateX(6px);
}
/* Porta secundaria: centrada e sem fundo, para nao competir com as duas
principais. E outro bolso e outro tempo de decisao. */
a.porta.centrada {
max-width: 560px;
margin: 0 auto;
padding: 30px;
background: transparent;
text-align: center;
align-items: center;
}
a.porta.centrada .corpo {
max-width: 46ch;
}
a.porta.centrada .seta {
justify-content: center;
}
/* Fileira secundaria: consultoria e ensino lado a lado. Herda o tom da
.centrada (sem fundo, tipo menor) porque nenhuma das duas e execucao.
Peso igual ao das portas principais diluiria as que pagam a conta. */
.grade-2.secundarias {
max-width: 58rem;
margin-inline: auto;
}
.grade-2.secundarias a.porta {
background: transparent;
padding: 26px 24px;
}
.grade-2.secundarias a.porta h2 {
font-size: clamp(1.05rem, 1.5vw, 1.22rem);
}
.grade-2.secundarias a.porta .corpo {
font-size: 0.93rem;
}
/* Etiqueta de crescimento ao lado do numero grande. */
.pilula {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid color-mix(in srgb, var(--laranja) 40%, transparent);
background: color-mix(in srgb, var(--laranja) 10%, transparent);
color: var(--laranja-texto);
border-radius: 100px;
padding: 6px 14px;
font-size: 0.88rem;
font-weight: 500;
}
.depo {
border-left: 2px solid var(--laranja);
padding-left: 28px;
margin-top: 56px;
}
.depo cite {
display: block;
margin-top: 16px;
font-style: normal;
}
/* ------------------------------------------------------------ conversa */
.conversa {
background: var(--laranja);
color: var(--sobre-laranja);
overflow: hidden;
}
.conversa .rotulo,
.conversa .lead,
.conversa .corpo {
color: var(--sobre-laranja);
}
.conversa h2 {
margin-top: 20px;
}
.conversa .lead {
margin-top: 26px;
}
.conversa .lead + .lead {
margin-top: 16px;
}
.conversa .btn {
margin-top: 40px;
}
/* ------------------------------------------------------- qualificador */
.qz {
background: var(--preto-2);
border: 1px solid var(--linha);
border-radius: 14px;
padding: 40px;
max-width: 640px;
position: relative;
overflow: hidden;
}
@media (max-width: 560px) {
.qz {
padding: 26px;
}
}
.qz .barras {
display: flex;
gap: 6px;
margin-bottom: 32px;
}
.qz .barras span {
flex: 1;
height: 4px;
border-radius: 100px;
background: var(--preto-3);
overflow: hidden;
}
.qz .barras span i {
display: block;
height: 100%;
background: var(--laranja);
border-radius: 100px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease-out;
}
.qz .barras span.feito i {
transform: scaleX(1);
}
.qz .fichas {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.qz .ficha {
border: 1px solid color-mix(in srgb, var(--laranja) 40%, transparent);
background: color-mix(in srgb, var(--laranja) 10%, transparent);
color: var(--laranja-texto);
border-radius: 100px;
padding: 5px 12px;
font-size: 0.78rem;
animation: pipoca 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes pipoca {
from {
opacity: 0;
transform: scale(0.72);
}
}
.qz .opt {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
background: var(--preto);
color: var(--branco);
border: 1px solid var(--linha);
border-radius: 8px;
padding: 17px 20px;
font: inherit;
font-size: 1rem;
cursor: pointer;
transition: border-color 0.3s, color 0.3s, transform 0.3s;
}
.qz .opt + .opt {
margin-top: 10px;
}
.qz .opt:hover {
border-color: var(--laranja);
color: var(--laranja-texto);
transform: translateY(-2px);
}
.qz .opt kbd {
border: 1px solid var(--linha);
border-radius: 4px;
padding: 2px 7px;
font-size: 0.68rem;
color: var(--cinza);
font-family: inherit;
}
@media (max-width: 560px) {
.qz .opt kbd {
display: none;
}
}
.qz .voltar,
.qz .refazer {
background: none;
border: 0;
color: var(--cinza);
font: inherit;
font-size: 0.9rem;
cursor: pointer;
margin-top: 22px;
text-decoration: underline;
text-underline-offset: 4px;
}
.qz .voltar:hover,
.qz .refazer:hover {
color: var(--branco);
}
.qz .painel {
animation: entra-passo 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes entra-passo {
from {
opacity: 0;
transform: translate3d(0, 16px, 0);
}
}
.qz .fim {
text-align: center;
}
.qz .fim .corpo {
margin: 12px auto 32px;
max-width: 42ch;
}
/* ------------------------------------------------- campos de contato (fim) */
/*
* Campos alinhados a esquerda dentro de um fim centralizado: rotulo em cima,
* campo embaixo, regua no lugar de caixa. Mesma logica do resto do site --
* linha em vez de borda fechada.
*/
.qz .campos {
display: grid;
gap: 18px;
max-width: 30rem;
margin: 0 auto 28px;
text-align: left;
}
.qz .campo {
display: grid;
gap: 7px;
}
.qz .campo .rotulo i {
font-style: normal;
opacity: 0.6;
}
.qz input[type="text"],
.qz input[type="tel"],
.qz input[type="email"] {
font: inherit;
font-size: 1rem;
color: var(--branco);
background: transparent;
border: 0;
border-bottom: 1px solid var(--linha-campo);
border-radius: 0;
padding: 10px 2px;
width: 100%;
transition: border-color 0.25s, background-color 0.25s;
/* iOS aumenta a fonte sozinho abaixo de 16px e da zoom ao focar. */
-webkit-appearance: none;
appearance: none;
}
.qz input::placeholder {
color: var(--cinza);
opacity: 0.7;
}
.qz input[type="text"]:focus,
.qz input[type="tel"]:focus,
.qz input[type="email"]:focus {
outline: none;
border-bottom-color: var(--laranja);
background: var(--fio);
}
/* Armadilha de robo: fora da tela, mas nao display:none -- alguns robos
ignoram campo escondido com display, e quase nenhum ignora este. */
.qz .isca {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.qz .aceite {
display: flex;
align-items: flex-start;
gap: 11px;
cursor: pointer;
font-size: 0.88rem;
line-height: 1.55;
color: var(--cinza);
}
.qz .aceite input {
accent-color: var(--laranja);
width: 17px;
height: 17px;
margin-top: 2px;
flex: none;
cursor: pointer;
}
.qz .aceite a {
color: var(--laranja-texto);
text-decoration: underline;
text-underline-offset: 2px;
}
.qz .fim .aviso {
margin: 16px auto 0;
max-width: 38ch;
font-size: 0.82rem;
}
/* ----------------------------------------------------------------- faq */
details {
border-bottom: 1px solid var(--linha);
}
details summary {
cursor: pointer;
font-size: 1.05rem;
font-weight: 500;
letter-spacing: -0.015em;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 24px 0;
transition: color 0.3s;
}
details summary::-webkit-details-marker {
display: none;
}
details summary:hover,
details[open] summary {
color: var(--laranja-texto);
}
details summary .mais {
position: relative;
width: 20px;
height: 20px;
flex: none;
}
details summary .mais::before,
details summary .mais::after {
content: "";
position: absolute;
background: currentColor;
left: 50%;
top: 50%;
}
details summary .mais::before {
width: 16px;
height: 1px;
transform: translate(-50%, -50%);
}
details summary .mais::after {
width: 1px;
height: 16px;
transform: translate(-50%, -50%);
transition: transform 0.3s, opacity 0.3s;
}
details[open] summary .mais::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
details .resp {
padding-bottom: 28px;
max-width: 60ch;
color: var(--cinza);
}
/* -------------------------------------------------------------- rodape */
footer {
border-top: 1px solid var(--linha);
padding: 56px 0 72px;
color: var(--cinza);
}
footer .cols {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
flex-wrap: wrap;
}
footer .marca-logo svg {
height: 42px;
}
footer .direita {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
@media (max-width: 640px) {
footer .direita {
align-items: flex-start;
}
}
footer a.zap-link {
color: var(--branco);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.3s;
}
footer a.zap-link:hover {
color: var(--laranja-texto);
}
footer a.zap-link svg {
transition: transform 0.35s;
}
footer a.zap-link:hover svg {
transform: translateX(4px);
}
/* ------------------------------------------------------ zap flutuante */
.zap {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 60;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--laranja);
color: var(--sobre-laranja);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 8px 30px -8px var(--laranja);
opacity: 0;
transform: translateY(16px);
pointer-events: none;
transition: opacity 0.5s, transform 0.5s;
}
.zap.on {
opacity: 1;
transform: none;
pointer-events: auto;
}
@media (min-width: 861px) {
.zap {
display: none;
}
}
/* ---------------------------------------------------- tema e movimento */
.tema {
width: 34px;
height: 34px;
flex: none;
border: 1px solid var(--linha);
border-radius: 6px;
background: none;
color: var(--cinza);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.3s, border-color 0.3s, transform 0.3s;
}
.tema:hover {
color: var(--laranja-texto);
border-color: var(--laranja);
transform: translateY(-2px);
}
/* Entrada por scroll. */
[data-sobe] {
opacity: 0;
transform: translate3d(0, 22px, 0);
will-change: opacity, transform;
}
[data-sobe].dentro {
animation: sobe 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: var(--atraso, 0ms);
}
@keyframes sobe {
to {
opacity: 1;
transform: none;
}
}
/* Titulo palavra por palavra: cada uma desliza de dentro de uma mascara. */
.palavra {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: 0.1em;
margin-bottom: -0.1em;
}
.palavra > span {
display: inline-block;
transform: translate3d(0, 110%, 0);
animation: sobe-palavra 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: var(--atraso, 0ms);
}
@keyframes sobe-palavra {
to {
transform: none;
}
}
/* Quem pediu menos movimento, recebe menos. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
[data-sobe],
[data-sobe].dentro,
.palavra > span,
.letreiro .trilho,
.qz .painel,
.qz .ficha {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.marca {
background-size: 100% 0.14em;
transition: none;
}
.secao-rotulo .regua {
transform: scaleX(1);
transition: none;
}
.btn::after {
display: none;
}
}
/* ================================================================== BIO
* Link da bio. Aberta quase sempre pelo Instagram, no celular, com um
* polegar. Lista curta, alvo grande, sem rolagem obrigatoria.
*/
body.bio-page {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
.bio {
width: 100%;
max-width: 520px;
margin: 0 auto;
padding: 52px 22px 36px;
flex: 1;
}
@media (max-width: 420px) {
.bio { padding-top: 36px; }
}
.bio .marca-logo svg { height: 40px; }
.bio .chamada {
font-family: var(--display);
font-weight: 800;
font-size: clamp(1.5rem, 6.4vw, 1.95rem);
line-height: 1.1;
letter-spacing: -0.03em;
font-variation-settings: "wdth" 106;
margin-top: 26px;
max-width: 18ch;
}
.bio .sobre {
color: var(--cinza);
margin-top: 14px;
font-size: 1rem;
line-height: 1.6;
max-width: 36ch;
}
.bio .credencial {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
align-items: center;
margin-top: 22px;
}
.bio .credencial .ponto {
width: 3px; height: 3px; border-radius: 50%; background: var(--laranja);
}
.lista { margin-top: 36px; }
.lista + .lista { margin-top: 30px; }
.lista > .rotulo { display: block; margin-bottom: 12px; }
a.item {
display: flex;
align-items: center;
gap: 16px;
background: var(--preto-2);
border: 1px solid var(--linha);
border-radius: 12px;
padding: 17px 18px;
text-decoration: none;
color: var(--branco);
transition: border-color .25s, transform .25s, box-shadow .25s;
}
a.item + a.item { margin-top: 10px; }
a.item:hover { border-color: var(--laranja); transform: translateY(-2px); }
a.item .txt { flex: 1; min-width: 0; }
a.item .titulo { display: block; font-weight: 500; font-size: 1rem; letter-spacing: -.01em; line-height: 1.3; }
a.item .sub { display: block; color: var(--cinza); font-size: .85rem; line-height: 1.45; margin-top: 4px; }
a.item .seta { flex: none; color: var(--cinza); transition: transform .3s, color .3s; }
a.item:hover .seta { transform: translateX(4px); color: var(--laranja-texto); }
/* O primeiro item e o que paga a conta. */
a.item.destaque {
background: var(--laranja);
border-color: var(--laranja);
color: var(--sobre-laranja);
}
a.item.destaque .sub { color: color-mix(in srgb, var(--sobre-laranja) 76%, transparent); }
a.item.destaque .seta { color: var(--sobre-laranja); }
a.item.destaque:hover { box-shadow: 0 12px 30px -14px var(--laranja); }
/* Item secundario: mesma lista, menos peso. */
a.item.leve { background: transparent; }
.bio-rodape {
border-top: 1px solid var(--linha);
padding: 24px 22px 32px;
text-align: center;
}
.bio-rodape p { color: var(--cinza); font-size: .82rem; }
.bio-rodape p + p { margin-top: 6px; }
/* Sem cabecalho na bio, o seletor de tema fica solto no canto. */
.tema-solto { position: fixed; top: 14px; right: 14px; z-index: 10; }