/* =========================================================
LR Move — Landing page
Design system: tokens, base, componentes e seções
========================================================= */
:root {
/* Cores */
--color-brand-black: #0b0d0e;
--color-brand-charcoal: #171a1b;
--color-accent: #ffbb01; /* amber */
--color-accent-active: #e39a00; /* amber-dark */
--color-accent-hover: #ffd054;
--color-white: #ffffff;
--color-surface-soft: #f5f5f2;
--color-neutral-200: #e2e3e1;
--color-neutral-500: #888d8f;
--color-neutral-700: #464a4c;
--color-neutral-900: #17191a;
--color-muted-inverse: #b9bcbd;
--color-steel: #3a3f41;
--color-modal-surface: #151515;
--color-modal-border: #292929;
--color-success: #22c55e;
--color-error: #ef4444;
--color-warning: #f56f0b;
--color-text: var(--color-neutral-900);
--color-text-muted: var(--color-neutral-700);
--color-border: var(--color-neutral-200);
--color-border-inverse: rgb(255 255 255 / 0.12);
--color-focus: var(--color-accent);
/* Tipografia */
--font-family-base: "Inter", Arial, Helvetica, sans-serif;
--tracking-tight: -0.03em;
--tracking-heading: -0.025em;
--tracking-eyebrow: 0.06em;
/* Espaçamento */
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
/* Raios */
--radius-md: 12px;
--radius-modal: 16px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-pill: 999px;
/* Layout */
--container-max: 1200px;
--section-y: 64px;
/* Movimento */
--duration-fast: 160ms;
--duration-base: 240ms;
--duration-fill: 440ms;
--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-fill: cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (min-width: 768px) { :root { --section-y: 80px; } }
@media (min-width: 1024px) { :root { --section-y: 104px; } }
/* =========================================================
Base
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* Nada pode alargar a página na horizontal (no celular isso "desencolhe" o
site inteiro). hidden é o fallback para Safari < 16, que não tem clip. */
html { scroll-behavior: smooth; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
body {
margin: 0;
color: var(--color-text);
background: var(--color-white);
font-family: var(--font-family-base);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
font-weight: 700;
line-height: 1.15;
letter-spacing: var(--tracking-heading);
}
h3 { font-size: clamp(1.3rem, 2.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.icon {
width: 1.125rem;
height: 1.125rem;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon--lg { width: 2rem; height: 2rem; stroke-width: 1.5; }
.container {
width: min(calc(100% - 40px), var(--container-max));
margin-inline: auto;
}
@media (min-width: 768px) { .container { width: min(calc(100% - 64px), var(--container-max)); } }
@media (min-width: 1024px) { .container { width: min(calc(100% - 80px), var(--container-max)); } }
.section { padding-block: var(--section-y); --section-bg: var(--color-white); }
/* Temas de seção (--section-bg também pinta o painel que sobe no scroll) */
.section--soft { --section-bg: var(--color-surface-soft); background: var(--section-bg); }
.section--black,
.section--charcoal { color: var(--color-white); --color-text-muted: var(--color-muted-inverse); --color-border: var(--color-border-inverse); }
.section--black { --section-bg: var(--color-brand-black); background: var(--section-bg); --card-bg: var(--color-brand-charcoal); }
.section--charcoal { --section-bg: var(--color-brand-charcoal); background: var(--section-bg); --card-bg: var(--color-brand-black); }
/* Utilitários de pilha */
.stack-xs { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-md { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-8); }
@media (min-width: 1024px) { .stack-lg { gap: var(--space-12); } }
.text-lg { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.6; color: var(--color-text-muted); }
/* Grids */
.grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.split { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) {
.split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: start; }
.split--center { align-items: center; gap: 72px; }
.split__aside { padding-top: 36px; }
.split--benefits { grid-template-columns: 0.9fr 1.1fr; gap: 88px; }
.split--audience { grid-template-columns: 1.3fr 0.7fr; gap: 64px; }
/* título e texto na coluna 2, centralizados juntos ao lado da foto */
.split--about { grid-template-columns: 500px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; row-gap: var(--space-5); align-items: center; }
.split--about picture { grid-column: 1; grid-row: 1 / -1; }
.split--about .about__head { grid-column: 2; grid-row: 2; }
.split--about .about__text { grid-column: 2; grid-row: 3; }
.split--faq { grid-template-columns: 400px minmax(0, 1fr); gap: 88px; }
}
/* =========================================================
Componentes
========================================================= */
/* Section heading */
.section-heading { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; }
@media (min-width: 1024px) { .section-heading { gap: var(--space-4); } }
.section-heading--center { text-align: center; align-items: center; margin-inline: auto; max-width: 820px; }
.section-heading__eyebrow {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-text-muted);
}
@media (min-width: 1024px) { .section-heading__eyebrow { font-size: 0.8125rem; } }
.section-heading__title { font-size: clamp(1.875rem, 4.5vw, 2.75rem); line-height: 1.1; }
.section-heading__title--sm { font-size: clamp(1.875rem, 4vw, 2.5rem); }
/* Botões */
.button {
position: relative;
isolation: isolate;
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0 var(--space-6);
border: 0;
border-radius: var(--radius-md);
font: 700 1rem/1 var(--font-family-base);
letter-spacing: -0.01em;
text-decoration: none;
cursor: pointer;
transition: color var(--duration-base) var(--ease-standard);
--ball-r: 26px; /* raio da bola de entrada = metade da altura do botão */
}
/* Cada variante define a cor da bola (--fill), a cor do texto quando ela cobre
(--fill-text) e, opcionalmente, o par usado no clique (--fill-active*) */
.button--primary {
color: var(--color-brand-black); background: var(--color-accent);
min-height: 56px; padding-inline: 28px;
--fill: var(--color-white); --fill-text: var(--color-brand-black);
--fill-active: var(--color-accent-active); --fill-active-text: var(--color-brand-black);
--ball-r: 28px;
}
.button--dark {
color: var(--color-white); background: var(--color-brand-black);
--fill: var(--color-accent); --fill-text: var(--color-brand-black);
}
.button--ghost-dark {
color: var(--color-white); background: transparent; border: 1px solid rgb(255 255 255 / 0.28);
--fill: var(--color-white); --fill-text: var(--color-brand-black);
}
.button--outline-dark {
color: var(--color-brand-black); background: transparent; border: 1px solid var(--color-brand-black);
--fill: var(--color-brand-black); --fill-text: var(--color-white);
}
.button--text {
background: transparent; color: var(--color-muted-inverse);
min-height: 48px; font-weight: 600; font-size: 0.9375rem;
--fill-text: var(--color-white);
--ball-r: 24px;
}
/* =========================================================
Bola de cor que nasce no cursor
(ver bagagem/BibliotecaEfeitos/BotaoAnimacaoCirculo.md)
O ::before é a bola na cor de destino, recortada por um clip-path
circular cujo centro (--bx / --by) o JS grava no ponto exato em que
o cursor entrou. Sem JS, --bx/--by ficam em 50% e ela nasce do centro.
========================================================= */
.button::before,
.icon-button::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--fill, transparent);
clip-path: circle(0% at var(--bx, 50%) var(--by, 50%));
transition:
clip-path var(--duration-fill) var(--ease-fill),
background-color var(--duration-fast) var(--ease-standard);
}
/* variantes com borda: a bola cobre também a linha da borda */
.button--ghost-dark::before,
.button--outline-dark::before,
.icon-button::before { inset: -1px; }
/* cursor por cima OU foco pelo teclado: a bola cresce até cobrir o botão.
html.usa-toque (ligada pelo JS no primeiro toque) desliga esses estados,
que no dedo ficam "grudados" — ver bloco de toque abaixo. */
html:not(.usa-toque) .button:hover,
html:not(.usa-toque) .button:focus-visible,
html:not(.usa-toque) .icon-button:hover,
html:not(.usa-toque) .icon-button:focus-visible { color: var(--fill-text, inherit); }
html:not(.usa-toque) .button:hover::before,
html:not(.usa-toque) .button:focus-visible::before,
html:not(.usa-toque) .icon-button:hover::before,
html:not(.usa-toque) .icon-button:focus-visible::before {
/* 142% = raio mínimo para cobrir o retângulo a partir de qualquer canto */
clip-path: circle(142% at var(--bx, 50%) var(--by, 50%));
}
/* clique: a mesma bola assume a cor secundária da variante */
html:not(.usa-toque) .button:active { color: var(--fill-active-text, var(--fill-text, inherit)); }
html:not(.usa-toque) .button:active::before {
background: var(--fill-active, var(--fill, transparent));
clip-path: circle(142% at var(--bx, 50%) var(--by, 50%));
}
.button:disabled::before { display: none; }
.button:focus:not(:focus-visible),
.icon-button:focus:not(:focus-visible) { outline: none; }
/* =========================================================
Toque (mobile/tablet): não existe :hover de verdade e o :active
pode ficar "grudado" ou sumir rápido demais no dedo. O JS detecta
o toque pelo tipo real do ponteiro (não pela media query, que erra
em tablets/celulares híbridos) e liga html.usa-toque, que desliga
os estados nativos acima. Cada toque liga .is-tocado no botão, que
sozinha faz o ciclo: bola nasce no dedo -> cobre o botão inteiro ->
encolhe de volta.
========================================================= */
html.usa-toque .button.is-tocado,
html.usa-toque .icon-button.is-tocado { color: var(--fill-text, inherit); }
html.usa-toque .button.is-tocado::before,
html.usa-toque .icon-button.is-tocado::before {
clip-path: circle(142% at var(--bx, 50%) var(--by, 50%));
}
.button--sm { min-height: 44px; padding: 0 var(--space-4); font-size: 0.875rem; --ball-r: 22px; }
.button--lg { min-height: 60px; font-size: 1.0625rem; --ball-r: 30px; }
.button--block { width: 100%; }
.button:disabled { cursor: not-allowed; background: var(--color-neutral-200); color: var(--color-neutral-500); }
/* =========================================================
Entrada: o botão nasce como uma bola e se expande pra direita
O clip-path fica ancorado em --ball-r (metade da altura do botão), então
a bola cresce até virar um círculo do tamanho exato do botão antes de
continuar se abrindo para a direita e revelar o texto por trás dela.
Roda uma vez, quando o botão entra na tela (ver .button em initReveal).
========================================================= */
html.rise-on .button:not(.is-in) { clip-path: circle(0px at var(--ball-r) 50%); }
html.rise-on .button.is-in { animation: botao-bola 700ms var(--ease-standard) both; }
@keyframes botao-bola {
0% { clip-path: circle(0px at var(--ball-r) 50%); }
45% { clip-path: circle(var(--ball-r) at var(--ball-r) 50%); }
100% { clip-path: circle(142% at var(--ball-r) 50%); }
}
.icon-button {
position: relative;
isolation: isolate;
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1px solid rgb(255 255 255 / 0.4);
background: transparent;
color: var(--color-white);
cursor: pointer;
--fill: var(--color-accent);
--fill-text: var(--color-brand-black);
transition: color var(--duration-base) var(--ease-standard);
}
.icon-button--modal { width: 44px; height: 44px; border-color: var(--color-modal-border); --fill: var(--color-white); --fill-text: var(--color-brand-black); }
@media (min-width: 1024px) { .icon-button { width: 52px; height: 52px; } }
/* Badge */
.badge {
display: inline-flex;
width: fit-content;
padding: 7px 12px;
border-radius: var(--radius-pill);
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.badge--accent { color: var(--color-brand-black); background: var(--color-accent); }
/* Card */
.card {
background: var(--card-bg, var(--color-white));
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
/* Placeholder de imagem (trocar por ![]()
) */
.placeholder {
width: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--space-3);
padding: 0 var(--space-6);
border-radius: var(--radius-lg);
font-size: 0.875rem; font-weight: 600; text-align: center;
}
.placeholder--dark { background: var(--color-brand-charcoal); color: var(--color-neutral-500); }
@media (min-width: 1024px) { .placeholder { border-radius: var(--radius-xl); } }
.image { width: 100%; object-fit: cover; border-radius: var(--radius-xl); }
.image--portrait { aspect-ratio: 4 / 5; }
.image--landscape { aspect-ratio: 16 / 9; }
.image--about { aspect-ratio: 8 / 9; object-position: bottom; }
/* Celular/tablet: foto acima do texto em retrato, ampliada no treinador
agachado. A moldura (picture) corta; a foto é posicionada pelo trecho
x 330–670 / y 195–800 do original (1000×1125): treinador (x ≈ 500)
no centro da moldura. */
@media (max-width: 1023px) {
.split--about picture {
display: block;
position: relative;
width: 100%;
max-width: 360px;
margin-inline: auto;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: var(--radius-xl);
}
.image--about {
position: absolute;
left: -97%;
top: -32%;
width: 294%;
max-width: none;
height: auto;
aspect-ratio: auto;
border-radius: 0;
}
}
/* Check dot / listas */
.check-dot {
flex: none;
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-brand-black);
}
.check-dot .icon { width: 14px; height: 14px; stroke-width: 3; }
.check-list { border-top: 1px solid var(--color-border); }
.check-list li {
display: flex; align-items: center; gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--color-border);
font-size: 1rem; font-weight: 500; line-height: 1.4;
}
.check-list--plain li { align-items: flex-start; font-weight: 400; line-height: 1.45; }
.check-list--plain .icon { width: 22px; height: 22px; stroke-width: 2.25; margin-top: 1px; }
@media (min-width: 1024px) { .check-list li { padding: 16px 0; font-size: 1.125rem; } }
/* =========================================================
Seções
========================================================= */
/* Hero */
.hero {
position: relative;
isolation: isolate;
padding-bottom: var(--section-y);
background: var(--color-brand-black);
color: var(--color-white);
}
.hero > .container { position: relative; z-index: 1; }
@media (min-width: 1024px) {
.hero { min-height: min(92vh, 880px); display: flex; flex-direction: column; }
.hero > .container { display: flex; flex-direction: column; flex: 1; }
}
/* --- Fundo da hero: foto + blur progressivo + degradê de canto --- */
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
isolation: isolate; /* limita o backdrop dos blurs à própria foto */
pointer-events: none;
}
.hero__media picture { display: contents; }
.hero__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 56% 40%; /* mantém o treinador em quadro ao recortar */
filter: saturate(0.82) contrast(1.05) brightness(0.78);
}
/* No desktop a foto ocupa só a faixa livre à direita do texto: em full-bleed
o treinador ficaria preso em 60% da largura e alto demais para caber.
A borda esquerda se dissolve no degradê, mantendo a leitura de fundo único. */
@media (min-width: 1024px) {
.hero__photo {
left: auto;
right: 0;
width: min(64%, 1100px);
object-position: 59% 50%; /* centraliza o treinador no painel */
mask-image: linear-gradient(to right, transparent 0, #000 36%);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 36%);
}
}
/* Blur progressivo: camadas sobrepostas no mesmo eixo diagonal do degradê.
Cada máscara vai do canto inferior esquerdo para o superior direito, com
alcance cada vez menor — o resultado é uma transição contínua, sem degrau. */
.hero__blur {
position: absolute;
inset: 0;
--blur-axis: to top right;
mask-image: linear-gradient(var(--blur-axis), #000 0 var(--blur-full), transparent var(--blur-end));
-webkit-mask-image: linear-gradient(var(--blur-axis), #000 0 var(--blur-full), transparent var(--blur-end));
}
.hero__blur--1 { --blur-full: 64%; --blur-end: 88%; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.hero__blur--2 { --blur-full: 40%; --blur-end: 68%; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero__blur--3 { --blur-full: 22%; --blur-end: 48%; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.hero__blur--4 { --blur-full: 8%; --blur-end: 28%; backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px); }
/* Celular/tablet: foto ampliada e deslocada para o treinador (≈59% da
largura da foto) ficar no centro da metade direita da hero (75%).
O blur recua para o canto inferior esquerdo e termina antes dele. */
@media (max-width: 1023px) {
.hero__photo { right: auto; left: calc(75% - 0.59 * 130%); width: 130%; object-position: 59% 40%; }
.hero__blur--1 { --blur-full: 24%; --blur-end: 40%; }
.hero__blur--2 { --blur-full: 16%; --blur-end: 34%; }
.hero__blur--3 { --blur-full: 8%; --blur-end: 26%; }
.hero__blur--4 { --blur-full: 2%; --blur-end: 16%; }
}
/* Desktop: eixo quase horizontal (ainda inclinado, acompanhando o degradê).
A difusão se concentra na borda esquerda da foto, onde ela se dissolve no
preto, e termina antes do treinador — que fica totalmente nítido. */
@media (min-width: 1024px) {
.hero__blur { --blur-axis: 80deg; }
.hero__blur--1 { --blur-full: 40%; --blur-end: 58%; }
.hero__blur--2 { --blur-full: 30%; --blur-end: 50%; }
.hero__blur--3 { --blur-full: 20%; --blur-end: 40%; }
.hero__blur--4 { --blur-full: 10%; --blur-end: 30%; }
}
/* Degradê preto → amarelo escuro saindo do canto inferior esquerdo */
.hero__wash {
position: absolute;
inset: 0;
--hero-scrim: linear-gradient(to bottom,
rgb(11 13 14 / 0.58) 0%,
rgb(11 13 14 / 0.10) 40%,
rgb(11 13 14 / 0.55) 100%);
background:
radial-gradient(95% 78% at -10% 112%,
rgb(227 154 0 / 0.30) 0%,
rgb(176 120 0 / 0.20) 22%,
rgb(122 84 0 / 0.10) 44%,
rgb(122 84 0 / 0) 68%),
linear-gradient(to top right,
rgb(11 13 14 / 0.96) 0%,
rgb(11 13 14 / 0.88) 22%,
rgb(11 13 14 / 0.58) 48%,
rgb(11 13 14 / 0.30) 74%,
rgb(11 13 14 / 0.22) 100%),
var(--hero-scrim);
}
/* Em telas estreitas a foto fica atrás do título: reforça o scrim vertical */
@media (max-width: 767px) {
.hero__wash {
--hero-scrim: linear-gradient(to bottom,
rgb(11 13 14 / 0.74) 0%,
rgb(11 13 14 / 0.36) 42%,
rgb(11 13 14 / 0.68) 100%);
}
}
/* Grão fino: evita banding nos degradês sobre fundo escuro */
.hero__grain {
position: absolute;
inset: 0;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
/* Sem backdrop-filter (Firefox antigo): reforça o degradê para manter a leitura */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.hero__blur { display: none; }
.hero__photo { filter: saturate(0.8) contrast(1.06) brightness(0.6) blur(2px); transform: scale(1.02); }
}
.topbar {
height: 64px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid rgb(255 255 255 / 0.10);
}
@media (min-width: 1024px) { .topbar { height: 88px; } }
.wordmark {
display: inline-flex; align-items: center; gap: 10px;
font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase;
color: var(--color-white); text-decoration: none;
}
.wordmark__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }
.wordmark__icon { width: 26px; height: auto; object-fit: contain; }
@media (min-width: 1024px) { .wordmark { font-size: 1.25rem; } .wordmark__dot { width: 12px; height: 12px; } .wordmark__icon { width: 30px; } }
/* Header fixo (some/aparece conforme a hero sai/volta à tela).
Só translúcido: branco bem leve, sem blur, e embaixo uma linha branca
mais opaca que o fundo. */
.sticky-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
background: rgb(255 255 255 / 0.08);
border-bottom: 1px solid rgb(255 255 255 / 0.9);
transform: translateY(-100%);
transition: transform var(--duration-base) var(--ease-standard);
}
.sticky-header.is-visible { transform: translateY(0); }
/* Sobre fundo escuro (initStickyHeader liga .is-on-dark): logo e botão
brancos, com a bola do hover também branca e texto preto por cima.
O logo é a PNG preta invertida, para trocar de cor com transição. */
.sticky-header__logo { transition: filter var(--duration-base) var(--ease-standard); }
.sticky-header.is-on-dark .sticky-header__logo { filter: invert(1); }
/* Degradê escuro atrás do logo, só sobre fundo escuro: escurece e desfoca o
que passa por trás para o logo branco ler com nitidez. Ocupa a altura
toda do header, da borda esquerda da tela até um pouco depois do logo
(margem do container + 340px), e se dissolve para o centro. O ::after é
o espelho do lado direito, atrás do botão. */
.sticky-header::before,
.sticky-header::after {
content: "";
position: absolute;
z-index: -1;
top: 0; bottom: 0; left: 0;
width: calc(max(40px, 50vw - 600px) + 340px);
--lado: to right;
--borrao: linear-gradient(var(--lado), #000 0%, #000 45%, rgb(0 0 0 / 0.6) 70%, transparent);
background: linear-gradient(var(--lado),
rgb(11 13 14 / 0.78) 0%,
rgb(11 13 14 / 0.68) 45%,
rgb(11 13 14 / 0.35) 72%,
rgb(11 13 14 / 0) 100%);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
-webkit-mask-image: var(--borrao);
mask-image: var(--borrao);
opacity: 0;
transition: opacity var(--duration-base) var(--ease-standard);
pointer-events: none;
}
.sticky-header::after { left: auto; right: 0; --lado: to left; }
/* celular: cada lado vai só até pouco depois do meio, sem cobrir tudo */
@media (max-width: 767px) { .sticky-header::before, .sticky-header::after { width: 60%; } }
.sticky-header.is-on-dark::before,
.sticky-header.is-on-dark::after { opacity: 1; }
.sticky-header .button--outline-dark {
transition:
color var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard);
}
.sticky-header.is-on-dark .button--outline-dark {
color: var(--color-white);
border-color: var(--color-white);
--fill: var(--color-white);
--fill-text: var(--color-brand-black);
}
html:not(.usa-toque) .sticky-header.is-on-dark .button--outline-dark:is(:hover, :focus-visible, :active),
html.usa-toque .sticky-header.is-on-dark .button--outline-dark.is-tocado { color: var(--fill-text); }
.sticky-header__inner {
height: 64px;
display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 1024px) { .sticky-header__inner { height: 80px; } }
.sticky-header__brand { display: inline-flex; align-items: center; }
.sticky-header__logo { height: 36px; width: auto; object-fit: contain; }
@media (min-width: 1024px) { .sticky-header__logo { height: 44px; } }
.hero__grid { display: grid; gap: var(--space-8); padding-top: var(--space-10); }
@media (min-width: 1024px) {
.hero__grid { flex: 1; align-content: center; padding-top: var(--space-14); padding-bottom: var(--space-10); }
}
.hero__content { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; max-width: 640px; }
@media (min-width: 1024px) { .hero__content { gap: 28px; } }
.hero__eyebrow {
display: inline-flex; align-items: center; gap: var(--space-3);
font-size: 0.75rem; font-weight: 700; line-height: 1.4;
letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
color: var(--color-accent);
}
.hero__eyebrow::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--color-accent); }
/* Entrada: o traço e o texto são revelados da esquerda para a direita por
uma máscara de borda suave (250% de largura: em 100% só a parte
transparente cobre o texto, em 0% só a opaca). Leve deslize junto. */
.hero__eyebrow {
-webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
animation: eyebrow-revela 1.3s var(--ease-fill) 0.15s both;
}
@keyframes eyebrow-revela {
from { -webkit-mask-position: 100% 0; mask-position: 100% 0; translate: -12px 0; }
to { -webkit-mask-position: 0 0; mask-position: 0 0; translate: 0 0; }
}
@media (min-width: 1024px) { .hero__eyebrow { font-size: 0.8125rem; } }
.hero__title {
max-width: 660px;
font-size: clamp(2.375rem, 7vw, 4rem);
font-weight: 800;
line-height: 1.03;
letter-spacing: -0.035em;
}
.hero__description { max-width: 580px; font-size: clamp(1.125rem, 1.8vw, 1.25rem); line-height: 1.5; color: var(--color-muted-inverse); }
.hero__actions { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.hero__actions .button { width: 100%; }
.hero__support { max-width: 460px; font-size: 0.875rem; line-height: 1.5; color: var(--color-muted-inverse); }
/* Mesma revelação do eyebrow (esquerda pra direita, esmaecendo) */
.hero__description {
-webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
animation: eyebrow-revela 1.1s var(--ease-fill) 0.55s both;
}
/* escondido até o JS preparar a digitação (initHeroSupportType), sem piscar o texto inteiro */
html.rise-on .hero__support[data-type-pending] { visibility: hidden; }
.hero__support { animation-delay: 1.55s; }
@media (min-width: 768px) { .hero__actions .button { width: auto; align-self: flex-start; } .hero__support { font-size: 0.9375rem; } }
@media (max-width: 767px) {
.hero__eyebrow { font-size: 0.6875rem; }
.hero__description { font-size: 1rem; }
.hero__actions .button { width: auto; align-self: flex-start; min-height: 48px; padding-inline: 20px; font-size: 0.9375rem; }
}
/* Marquee */
.marquee { overflow: hidden; white-space: nowrap; padding-block: 16px; --section-bg: var(--color-accent); background: var(--section-bg); color: var(--color-brand-black); }
.marquee__track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee__item {
display: inline-flex; align-items: center; gap: 24px; padding-right: 24px;
font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase;
}
.marquee__item .icon { width: 16px; height: 16px; stroke-width: 2.5; }
@media (min-width: 1024px) {
.marquee { padding-block: 22px; }
.marquee__item { font-size: 1.5rem; gap: 32px; padding-right: 32px; }
.marquee__item .icon { width: 20px; height: 20px; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Problema */
.highlight { color: var(--color-accent); font-size: 1.15em; }
/* Efeito "jornal de cinema" (ver initFlipTitle no index.html) */
.flip-word { display: inline-block; }
.flip-word__ink { display: inline-block; white-space: nowrap; transform-origin: left center; font-synthesis: none; }
.pain-list { display: flex; flex-direction: column; max-width: 640px; border-bottom: 1px solid var(--color-border); }
.pain-list__item {
display: flex; align-items: center; gap: 14px;
padding: 16px 0;
border-top: 1px solid var(--color-border);
font-size: 1rem; font-weight: 500; line-height: 1.5;
}
@media (min-width: 1024px) { .pain-list__item { padding: 18px 0; font-size: 1.0625rem; } }
.pain-list__icon {
flex: none; width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid var(--color-accent); border-radius: 50%;
color: var(--color-accent);
}
.pain-list__icon .icon {
width: 20px; height: 20px; stroke-width: 1.75;
/* Flutua dentro da bola, só na vertical e todos em sincronia.
Usa `translate` para não brigar com o rotate/scale de entrada da bola. */
animation: flutua-bola 3s ease-in-out infinite alternate;
}
@keyframes flutua-bola {
from { translate: 0 1px; }
to { translate: 0 -1px; }
}
.callout {
display: flex; gap: var(--space-4);
font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
max-width: 900px;
}
.callout::before { content: ""; flex: none; width: 5px; border-radius: 3px; background: var(--color-brand-black); }
/* Metodologia: foto do especialista à esquerda, texto à direita.
Mesma linguagem da hero (blur progressivo + esvaecer + borrão âmbar), mas
a foto se dissolve no cinza da seção, para a direita e para baixo — os
lados onde fica o texto. No celular a foto fica no topo e só esvaece para baixo. */
.metodo { position: relative; isolation: isolate; }
.metodo > .container { position: relative; z-index: 1; padding-top: min(92vw, 540px); }
.metodo__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.metodo__panel {
position: absolute;
inset: 0 0 auto;
height: min(118vw, 700px);
isolation: isolate; /* limita o backdrop dos blurs à própria foto */
/* eixos do esvaecer: celular só para baixo */
--fade-x: linear-gradient(#000, #000);
--fade-y: linear-gradient(to bottom, #000 40%, rgb(0 0 0 / 0.78) 52%, rgb(0 0 0 / 0.5) 63%, rgb(0 0 0 / 0.26) 73%, rgb(0 0 0 / 0.1) 82%, rgb(0 0 0 / 0.03) 89%, transparent 94%);
/* Subida com o scroll (initMetodoScroll): foto e recorte andam juntos, só
para cima — assim o treinador nunca descola do fundo e o topo não abre
vão; a borda de baixo já esvaece na cor da seção. */
translate: 0 var(--metodo-y, 0px);
will-change: translate;
}
.metodo__panel picture { display: contents; }
.metodo__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 42% 30%; /* treinador no centro do quadro */
filter: saturate(0.85) contrast(1.05) brightness(0.82);
mask-image: var(--fade-x), var(--fade-y);
-webkit-mask-image: var(--fade-x), var(--fade-y);
mask-composite: intersect;
-webkit-mask-composite: source-in;
}
/* Recorte do treinador: mesmo enquadramento da foto, sem máscara, blur ou degradê */
.metodo__figure {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 42% 30%;
filter: saturate(0.85) contrast(1.05) brightness(0.82);
/* acompanha o esvaecer da foto, só que mais curto: o recorte some junto */
mask-image: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / 0.6) 72%, rgb(0 0 0 / 0.2) 84%, transparent 94%);
-webkit-mask-image: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / 0.6) 72%, rgb(0 0 0 / 0.2) 84%, transparent 94%);
}
/* O filtro neutro torna o painel do recorte a raiz do backdrop: o blur
abaixo pega só o treinador, não a foto de fundo */
.metodo__panel--figure { filter: saturate(1); }
.metodo__figure-blur {
position: absolute;
inset: 0;
mask-image: linear-gradient(to top, #000 0 var(--blur-full), transparent var(--blur-end));
-webkit-mask-image: linear-gradient(to top, #000 0 var(--blur-full), transparent var(--blur-end));
}
.metodo__figure-blur--1 { --blur-full: 24%; --blur-end: 40%; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.metodo__figure-blur--2 { --blur-full: 10%; --blur-end: 26%; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
/* Celular/tablet: o painel inteiro (foto, recorte e camadas de blur) some
para baixo pela máscara e chega transparente à borda. Assim nenhuma
camada termina num corte, e embaixo aparece o mesmo fundo (cinza + borrão
âmbar) que continua abaixo do painel: a emenda não deixa risco. */
@media (max-width: 1023px) {
.metodo__panel {
--panel-fade: linear-gradient(to bottom, #000 50%, rgb(0 0 0 / 0.75) 62%, rgb(0 0 0 / 0.45) 73%, rgb(0 0 0 / 0.2) 83%, rgb(0 0 0 / 0.06) 91%, transparent 97%);
mask-image: var(--panel-fade);
-webkit-mask-image: var(--panel-fade);
}
}
/* Blur progressivo: cada camada cobre a borda de baixo (e, no desktop, a
direita) com alcance cada vez menor — transição contínua, sem degrau. */
.metodo__blur {
position: absolute;
inset: 0;
--blur-y: linear-gradient(to top, #000 0 var(--blur-full), transparent var(--blur-end));
--blur-x: linear-gradient(transparent, transparent);
mask-image: var(--blur-x), var(--blur-y);
-webkit-mask-image: var(--blur-x), var(--blur-y);
}
.metodo__blur--1 { --blur-full: 30%; --blur-end: 52%; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.metodo__blur--2 { --blur-full: 22%; --blur-end: 40%; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.metodo__blur--3 { --blur-full: 12%; --blur-end: 28%; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.metodo__blur--4 { --blur-full: 4%; --blur-end: 16%; backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px); }
/* Degradê foto → cinza da seção do lado do texto (só no desktop, onde o
texto fica à direita da foto) */
.metodo__shade { position: absolute; inset: 0; }
@media (min-width: 1024px) {
.metodo__shade {
background: linear-gradient(to right,
rgb(23 26 27 / 0) 45%,
rgb(23 26 27 / 0.25) 50%,
rgb(23 26 27 / 0.55) 55%,
rgb(23 26 27 / 0.8) 59%,
rgb(23 26 27 / 0.94) 63%,
rgb(23 26 27 / 1) 66%);
}
}
/* Borrão âmbar no canto inferior direito (degradê da hero, espelhado) */
.metodo__glow {
position: absolute;
inset: 0;
background: radial-gradient(95% 78% at 110% 112%,
rgb(227 154 0 / 0.30) 0%,
rgb(176 120 0 / 0.17) 22%,
rgb(122 84 0 / 0.08) 44%,
rgb(122 84 0 / 0) 68%);
}
/* Celular/tablet: o borrão sai do fundo da seção e vai para dentro do card
da citação, no canto inferior direito */
@media (max-width: 1023px) {
.metodo__glow { display: none; }
.metodo .quote {
background:
radial-gradient(110% 90% at 105% 110%,
rgb(227 154 0 / 0.30) 0%,
rgb(176 120 0 / 0.17) 25%,
rgb(122 84 0 / 0.08) 48%,
rgb(122 84 0 / 0) 72%),
var(--card-bg);
}
}
@media (min-width: 1024px) {
.metodo > .container { padding-top: 0; }
.metodo .split { min-height: 620px; }
.metodo__content { grid-column: 2; }
.metodo__panel {
inset: 0 auto 0 0;
width: 66%;
height: auto;
/* esvaecer longo e com cauda suave: um trecho curto, mesmo gradual,
ainda se lê como quebra da foto para o fundo */
--fade-x: linear-gradient(to right, #000 60%, rgb(0 0 0 / 0.82) 66%, rgb(0 0 0 / 0.6) 72%, rgb(0 0 0 / 0.38) 78%, rgb(0 0 0 / 0.2) 84%, rgb(0 0 0 / 0.08) 90%, rgb(0 0 0 / 0.02) 95%, transparent 99%);
--fade-y: linear-gradient(to bottom, #000 40%, rgb(0 0 0 / 0.8) 50%, rgb(0 0 0 / 0.55) 60%, rgb(0 0 0 / 0.32) 69%, rgb(0 0 0 / 0.14) 78%, rgb(0 0 0 / 0.04) 86%, transparent 92%);
}
:is(.metodo__photo, .metodo__figure) { object-position: 50% 38%; }
.metodo__blur { --blur-x: linear-gradient(to left, #000 0 var(--blur-full), transparent var(--blur-end)); }
.metodo__blur--1 { --blur-full: 20%; --blur-end: 38%; }
.metodo__blur--2 { --blur-full: 16%; --blur-end: 34%; }
.metodo__blur--3 { --blur-full: 10%; --blur-end: 26%; }
.metodo__blur--4 { --blur-full: 3%; --blur-end: 15%; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.metodo__blur, .metodo__figure-blur { display: none; }
}
/* Emenda com a seção seguinte (mesma ideia da hero): enquanto ela sobe, a
faixa abaixo da metodologia mostra a extensão do painel de cor. O fundo
(borrão âmbar + grão) continua ali, com o borrão refletido na vertical
para casar na borda, e some para baixo pela máscara. Uma faixa de blur
por cima da borda desfaz o que ainda restar de "corte". */
.metodo__seam { display: none; }
html.rise-on .metodo__media {
bottom: calc(var(--rise-ext) * -1);
mask-image: linear-gradient(to bottom, #000 calc(100% - var(--rise-ext)), transparent);
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--rise-ext)), transparent);
}
html.rise-on .metodo__glow {
bottom: auto;
height: calc(100% - var(--rise-ext));
}
html.rise-on .metodo__glow::after {
content: "";
position: absolute;
top: 100%; left: 0; right: 0;
height: 100%;
background: inherit;
transform: scaleY(-1);
}
html.rise-on .metodo__seam {
display: block;
position: absolute;
left: 0; right: 0;
top: calc(100% - var(--rise-ext) - 90px);
height: 180px;
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 60%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 60%, transparent);
}
@media (min-width: 1024px) {
/* no desktop a foto ocupa a altura toda: não pode esticar para a extensão */
html.rise-on .metodo__panel { bottom: var(--rise-ext); }
}
.quote {
margin: 0;
display: flex; flex-direction: column; gap: var(--space-4);
padding: 28px;
border-radius: var(--radius-lg);
}
.quote p { font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: var(--tracking-tight); }
.quote__icon { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--color-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) {
.quote { flex-direction: row; gap: var(--space-8); padding: var(--space-14); border-radius: var(--radius-xl); }
.quote__icon { width: 56px; height: 56px; }
}
/* Digitação (prepararDigitacao: citação da metodologia e descrição da hero):
o texto já ocupa o espaço final, só invisível, então o bloco não muda de
altura enquanto as letras aparecem. Palavras não quebram no meio; o
cursor é absoluto e não empurra nada. */
.type__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.type__word { white-space: nowrap; }
.type__char { position: relative; }
.is-typing .type__char { opacity: 0; filter: blur(2px); transition: opacity 0.1s ease-out, filter 0.14s ease-out; }
.is-typing .type__char.is-on { opacity: 1; filter: none; }
.type__char.is-caret::after {
content: ''; position: absolute; left: 100%; top: 0.08em; bottom: 0.08em;
width: 0.08em; min-width: 2px; margin-left: 0.06em; background: var(--color-accent);
animation: type-caret 0.9s steps(1) infinite;
}
.is-typing .type__char.is-caret::after { animation: none; } /* sólido enquanto digita, pisca no fim */
@keyframes type-caret { 50% { opacity: 0; } }
/* Pilares */
.pillar { display: flex; flex-direction: column; gap: 14px; padding: var(--space-6); }
.pillar__num { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.pillar p { color: var(--color-text-muted); }
@media (min-width: 1024px) { .pillar { padding: 28px; } }
/* foto do pilar (--bg no HTML) com o mesmo degradê de leitura das etapas;
o número fica no topo e o texto desce para a base */
.pillar {
position: relative;
overflow: hidden;
min-height: 320px;
isolation: isolate;
background: var(--bg, none) var(--bg-pos, center) / cover no-repeat border-box, var(--card-bg, var(--color-white));
border-color: rgb(255 255 255 / 0.3);
}
/* degradê escuro: mais fechado embaixo, abrindo para cima sem passar do 0.38 de antes */
.pillar::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(to top, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.72) 30%, rgb(0 0 0 / 0.5) 62%, rgb(0 0 0 / 0.38) 100%);
pointer-events: none;
}
/* brilho âmbar atrás do número, só no card em foco (.is-active) */
.pillar__num::before {
content: "";
position: absolute;
z-index: -1;
left: 0.6em; top: 50%; /* centro dos dois dígitos (o span estica na largura do card) */
width: 180px; height: 180px;
translate: -50% -50%;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(255 187 1 / 0.3), rgb(255 187 1 / 0.1) 50%, transparent);
opacity: 0;
transition: opacity 500ms ease;
pointer-events: none;
}
.pillars.is-ready .pillar.is-active .pillar__num::before { opacity: 1; }
/* desfoque leve no canto inferior esquerdo, sumindo em direção ao centro */
.pillar::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
-webkit-mask-image: radial-gradient(75% 60% at 0 100%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
mask-image: radial-gradient(75% 60% at 0 100%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
pointer-events: none;
}
.pillar > * { position: relative; }
.pillar__num { margin-bottom: auto; }
/* Carrossel dos pilares (initPillars). Todos os cards ocupam a mesma célula
da grade (a altura vem do mais alto) e são deslocados pela distância até
o central (--pos). Laterais menores e apagadas; os demais ficam invisíveis
fora do quadro, prontos para entrar. */
/* Os cards laterais (e os escondidos, prontos para entrar) ficam fora do
quadro: a seção corta a sobra na borda da tela em vez de alargar a página */
.pillars-section { overflow-x: clip; }
.pillars.is-ready {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
padding-block: var(--space-2);
touch-action: pan-y;
outline-offset: 8px;
}
.pillars.is-ready .pillar {
grid-area: 1 / 1;
width: min(78%, 400px);
--pos: 0;
/* 76%: com a lateral a 74%, ela fica ~12% escondida atrás do central */
transform: translateX(calc(var(--pos) * 76%)) scale(0.74);
opacity: 0;
pointer-events: none;
user-select: none;
transition:
transform 700ms var(--ease-standard),
opacity 500ms ease,
border-color var(--duration-base) var(--ease-standard),
box-shadow 500ms ease;
}
@media (min-width: 768px) { .pillars.is-ready .pillar { width: min(36%, 400px); } }
.pillars.is-ready .pillar.is-side { opacity: 0.55; pointer-events: auto; cursor: pointer; z-index: 1; }
.pillars.is-ready .pillar.is-side:hover { opacity: 0.85; }
.pillars.is-ready .pillar.is-active {
transform: translateX(0) scale(1);
opacity: 1;
pointer-events: auto;
z-index: 2;
border-color: var(--color-accent);
/* sombra projetada sobre os laterais: reforça que ele está na frente */
box-shadow: 0 28px 60px -12px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(0 0 0 / 0.4);
}
.pillars.is-ready .pillar .pillar__num { transition: color var(--duration-base) var(--ease-standard); }
.pillars.is-ready .pillar.is-active .pillar__num { color: var(--color-accent); }
/* Para quem é: símbolo em contorno centralizado no fundo da seção */
.audience { position: relative; isolation: isolate; }
.audience__mark {
position: absolute; inset: 0; z-index: -1;
display: grid; place-items: center;
overflow: hidden;
pointer-events: none;
}
/* opacidade no svg, não no wrapper: o modo Calmo força opacity: 1 nos filhos da seção */
.audience__logo { width: min(90%, 820px); height: auto; opacity: 0.15; }
/* Degradês brancos nos cantos superior esquerdo e inferior direito do
símbolo: a máscara apaga só a imagem (o fundo da seção é branco), sem
cobrir o conteúdo por cima. As duas camadas se multiplicam (intersect). */
.audience__logo {
-webkit-mask-image:
radial-gradient(120% 120% at 0 0, transparent 12%, rgb(0 0 0 / 0.35) 38%, #000 68%),
radial-gradient(120% 120% at 100% 100%, transparent 12%, rgb(0 0 0 / 0.35) 38%, #000 68%);
mask-image:
radial-gradient(120% 120% at 0 0, transparent 12%, rgb(0 0 0 / 0.35) 38%, #000 68%),
radial-gradient(120% 120% at 100% 100%, transparent 12%, rgb(0 0 0 / 0.35) 38%, #000 68%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* No mobile/tablet a seção empilha (checklist, depois o aviso), então o
símbolo passa a ficar ancorado no topo, perto do título, em vez de
centralizado na altura toda da seção. */
@media (max-width: 1023px) {
.audience__mark { align-items: flex-start; }
.audience__logo { width: min(72%, 380px); margin-top: calc(var(--section-y) - 16px); opacity: 0.22; }
.audience__logo-img { filter: url(#lr-outline-mobile); }
}
/* Para quem é: símbolo se formando traço a traço, como o do CTA final */
html.rise-on .audience__logo path {
stroke-dasharray: 1 1.1;
transition: stroke-dashoffset 900ms cubic-bezier(.55, .05, .25, 1);
transition-delay: calc(200ms + var(--d) * 650ms);
}
html.rise-on .audience__logo rect { transition: opacity 600ms ease 2800ms; }
html.rise-on .audience__logo:not(.is-in) path { stroke-dashoffset: 1.05; }
html.rise-on .audience__logo:not(.is-in) rect { opacity: 0; }
/* Para quem é: card translúcido */
.not-for-wrap { display: flex; flex-direction: column; }
.not-for-wrap > .not-for { flex: 1; }
.not-for {
display: flex; flex-direction: column; gap: var(--space-4);
padding: 28px;
border-radius: var(--radius-lg);
background: rgb(23 25 26 / 0.7);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
color: var(--color-white);
--color-text-muted: var(--color-muted-inverse);
}
.not-for__head { display: flex; align-items: center; gap: var(--space-4); }
.not-for p { font-size: clamp(1.3125rem, 2.2vw, 1.625rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.not-for__icon {
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
background: var(--color-steel); color: var(--color-accent);
}
.not-for__icon .icon { width: 22px; height: 22px; stroke-width: 2.25; }
@media (min-width: 1024px) { .not-for { padding: var(--space-10); border-radius: var(--radius-xl); } }
/* Sobre mim */
.split--about p { color: var(--color-text-muted); }
@media (min-width: 1024px) { .split--about p { font-size: 1.0625rem; } }
.about__name { font-weight: 600; font-size: 1.0625rem; }
/* as linhas são pseudo-elementos (não bordas) para poderem ser desenhadas
na entrada; o overflow esconde as palavras antes de descerem da linha */
.credentials { position: relative; margin: var(--space-2) 0 0; }
.credentials div {
position: relative;
overflow: hidden;
display: flex; flex-direction: column; gap: 2px;
padding: 12px 0;
}
.credentials::before,
.credentials div::after {
content: "";
position: absolute; left: 0; right: 0;
height: 1px;
background: var(--color-border);
transform-origin: left;
}
.credentials::before { top: 0; }
.credentials div::after { bottom: 0; }
.credentials dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.credentials dd { margin: 0; }
@media (min-width: 1024px) {
.credentials div { flex-direction: row; align-items: baseline; gap: var(--space-5); padding: 16px 0; }
.credentials dt { min-width: 150px; }
}
/* Conteúdo (cards de etapa) */
.module-card { display: flex; flex-direction: column; gap: 14px; padding: var(--space-6); }
.module-card__top { display: flex; justify-content: space-between; align-items: center; }
.module-card__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.module-card__num { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--color-steel); }
.module-card p { color: var(--color-text-muted); }
@media (min-width: 1024px) { .module-card { padding: 28px; } }
/* Fileira estilo Netflix (initRail): vaza até a borda direita da tela,
o card cresce no hover e as setas surgem nas bordas ao passar o mouse. */
.rail { position: relative; margin-right: calc((100vw - 100%) / -2); }
.rail__track {
display: flex; gap: var(--space-3);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* folga vertical para o card crescer sem ser cortado pela rolagem */
padding: 20px 20px 20px 0;
margin-block: -20px;
}
.rail__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .rail__track { padding-right: 32px; } }
@media (min-width: 1024px) { .rail__track { gap: var(--space-4); padding-right: 40px; } }
.rail .module-card {
position: relative;
overflow: hidden;
flex: 0 0 min(280px, 78%);
min-height: 300px;
scroll-snap-align: start;
justify-content: flex-end;
/* foto da etapa (--bg no HTML); o degradê fica no ::before */
background: var(--bg, none) center / cover no-repeat border-box, var(--card-bg, var(--color-white));
transition:
transform 320ms var(--ease-standard),
border-color var(--duration-base) var(--ease-standard),
box-shadow 320ms var(--ease-standard);
}
@media (min-width: 1024px) { .rail .module-card { flex-basis: 300px; min-height: 340px; } }
.rail .module-card:first-child { transform-origin: left center; }
.rail .module-card:last-child { transform-origin: right center; }
.rail .module-card__top { position: absolute; top: var(--space-6); left: var(--space-6); right: 0; align-items: flex-start; }
@media (min-width: 1024px) { .rail .module-card__top { top: 28px; left: 28px; } }
/* degradê de leitura suave; a borda fica por fora dele, branca translúcida */
.rail .module-card { border-color: rgb(255 255 255 / 0.3); }
.rail .module-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(to top, rgb(0 0 0 / 0.86) 0%, rgb(0 0 0 / 0.64) 35%, rgb(0 0 0 / 0.45) 70%, rgb(0 0 0 / 0.38) 100%);
pointer-events: none;
}
/* número gigante translúcido, cortado pela borda do card (estilo "Top 10") */
.rail .module-card__num {
font-size: 9rem;
line-height: 0.75;
color: transparent;
-webkit-text-stroke: 1.25px rgb(255 255 255 / 0.55);
margin-right: -0.12em;
transition: -webkit-text-stroke-color var(--duration-base) var(--ease-standard);
}
.rail .module-card h3, .rail .module-card p { position: relative; }
@media (hover: hover) {
.rail .module-card:hover {
transform: scale(1.06);
z-index: 1;
border-color: var(--color-accent);
box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}
.rail .module-card:hover .module-card__num { -webkit-text-stroke-color: var(--color-accent); }
}
.rail__arrow {
position: absolute;
top: 0; bottom: 0;
z-index: 2;
width: 56px;
display: none;
align-items: center; justify-content: center;
border: 0; padding: 0;
color: var(--color-white);
cursor: pointer;
opacity: 0;
transition: opacity var(--duration-base) var(--ease-standard);
}
.rail__arrow .icon { width: 28px; height: 28px; stroke-width: 2.5; transition: scale var(--duration-base) var(--ease-standard); }
.rail__arrow:hover .icon { scale: 1.25; }
.rail__arrow--prev { left: 0; background: linear-gradient(to right, var(--section-bg) 20%, transparent); }
.rail__arrow--next { right: 0; background: linear-gradient(to left, var(--section-bg) 20%, transparent); }
@media (hover: hover) {
.rail.can-prev .rail__arrow--prev,
.rail.can-next .rail__arrow--next { display: flex; }
.rail:hover .rail__arrow,
.rail__arrow:focus-visible { opacity: 1; }
}
/* Como funciona */
.info-grid { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.info {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex; align-items: center; gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--color-border);
}
.info > div { display: flex; flex-direction: column; gap: 2px; }
.info__icon, .info > div { position: relative; z-index: 1; }
/* Sticker de papel recortado no fundo, canto inferior esquerdo, atrás do
título: esmaecido para o texto sempre falar mais alto, e parte dele sai
do card (cortado pelo overflow: hidden). Some no card-linha do mobile e
aparece quando o item vira um cartão de verdade (grade 768px+ ou pilha). */
.info__art {
display: none;
position: absolute; z-index: 0;
left: -4%; bottom: -8%;
width: 52%; height: 88%;
opacity: 0.2;
pointer-events: none;
}
.info__art img {
--r0: 0deg;
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain; object-position: 0 100%;
rotate: var(--r0);
transform-origin: 50% 100%;
}
/* Materiais complementares: livros um pouco menores, presos ao mesmo canto */
.info__art--sm img { inset: auto auto 0 0; width: 82%; height: 82%; }
/* Comunidade ou suporte: megafone maior atrás, aperto de mão na frente,
levemente na diagonal. Aqui a caixa cobre o card inteiro e cada imagem
é centralizada num ponto do card (left/top + translate -50%): o megafone
no canto esquerdo, as mãos um pouco à direita dele, logo acima do título. */
.how .info .info__art.info__art--duo { inset: 0; width: 100%; height: 100%; }
.info__art--duo img { inset: auto; translate: -50% -50%; object-position: 50% 50%; }
.info__art--duo .info__art-back {
left: 23%; top: 55%;
width: 44%; height: 84%;
--r0: 3deg;
}
.info__art--duo .info__art-front {
left: 23%; top: 81%;
width: 28%; height: 38%;
transform-origin: 50% 50%;
--r0: -9deg;
}
/* no mobile o card é estreito: as mãos crescem para não sumirem */
@media (max-width: 767px) {
.info__art--duo .info__art-front { left: 27%; top: 78%; width: 40%; height: 54%; }
}
/* Entrada: bola de papel amassada que cai girando e se desdobra até ficar
lisa. O JS liga data-unfold na seção e .is-open em cada sticker; o
amassado em si (distorção SVG) também vem do JS, no nível Completo.
Depois, balanço contínuo em quadros parados (stop-motion de colagem):
o papel inclina de uma lateral para a outra, preso pela base. */
.how[data-unfold] .info__art:not(.is-open) img { opacity: 0; }
.info__art.is-open img {
animation:
papel-desamassa 1.15s cubic-bezier(.3, .7, .25, 1) both,
colagem-balanco 2.4s steps(1, end) 1.15s infinite;
}
/* os dois papéis do card 06 balançam em contratempo */
.info__art.is-open .info__art-front { animation-delay: 0.2s, 1.35s; animation-direction: normal, reverse; }
@keyframes papel-desamassa {
0% { opacity: 0; transform: translate(-8%, -26%) scale(0.22) rotate(-170deg); clip-path: circle(24% at 50% 50%); }
12% { opacity: 1; }
30% { transform: translate(0, 2%) scale(0.3) rotate(-90deg); clip-path: circle(28% at 50% 50%); }
52% { transform: translateY(-3%) scale(0.72) rotate(-12deg); clip-path: circle(50% at 50% 50%); }
74% { transform: scale(1.04) rotate(2deg); clip-path: circle(75% at 50% 50%); }
88% { transform: scale(0.99) rotate(-0.6deg); }
100% { opacity: 1; transform: none; clip-path: circle(75% at 50% 50%); }
}
@keyframes colagem-balanco {
0% { rotate: calc(var(--r0) - 1.8deg); }
16.66% { rotate: calc(var(--r0) + 0.6deg); }
33.33% { rotate: calc(var(--r0) + 2deg); }
50% { rotate: calc(var(--r0) + 0.4deg); }
66.66% { rotate: calc(var(--r0) - 1.2deg); }
83.33% { rotate: calc(var(--r0) - 2.2deg); }
}
/* Vidro líquido: miolo em cor lisa e translúcida; o vidro fica nas bordas
(aro claro por dentro) e fora do ícone (anel translúcido + sombra) */
.info__icon {
--icon-fill: rgb(255 187 1 / 0.12);
--icon-halo: 0 0 0 0 transparent;
flex: none; width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
color: var(--color-brand-black);
background: var(--icon-fill);
border: 1px solid rgb(255 255 255 / 0.85);
box-shadow:
inset 0 0 0 1px rgb(255 255 255 / 0.5),
inset 0 0 4px 1px rgb(255 255 255 / 0.7),
0 0 0 4px rgb(255 255 255 / 0.35),
0 0 0 5px rgb(11 13 14 / 0.06),
0 10px 22px -10px rgb(11 13 14 / 0.3),
var(--icon-halo);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);
}
.info__icon .icon { width: 20px; height: 20px; stroke-width: 1.75; }
.info__label { font-size: 1.0625rem; font-weight: 700; }
.info-cta { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-6); }
.info-cta__title { display: none; }
.info-cta .button { width: 100%; }
@media (min-width: 768px) {
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); border-top: 0; }
.info { flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.info__label { font-size: 1.25rem; letter-spacing: -0.01em; }
.info { min-height: 200px; }
.info__art { display: block; width: 70%; height: 80%; }
.info-cta { justify-content: space-between; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-accent); color: var(--color-brand-black); }
/* sobre o âmbar da caixa, o preenchimento âmbar sumiria: usa branco */
.info-cta .button--dark { --fill: var(--color-white); --fill-text: var(--color-brand-black); }
.info-cta__title { display: block; font-size: 1.375rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.info-cta .button { font-size: 0.9375rem; }
}
@media (min-width: 1024px) { .info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Pilha controlada pelo scroll (initHowStack liga .is-stacked).
.how__scroll ganha altura extra no JS; o bloco fixo fica preso abaixo do
header enquanto ela passa. O padding-top da pilha é o espaço das bordas
dos cards de trás (2 × a espiada) e o JS lê esse valor. */
.how.is-stacked { --how-top: 64px; }
@media (min-width: 1024px) { .how.is-stacked { --how-top: 80px; } }
.how.is-stacked .how__sticky {
position: sticky;
top: var(--how-top);
height: calc(100svh - var(--how-top));
justify-content: center;
/* corta só na vertical (o card que chega surge da borda de baixo da tela);
na horizontal os braços vão até a borda da tela, onde o body corta */
overflow: visible clip;
}
.how.is-stacked .info-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
width: 100%;
max-width: 620px;
margin-inline: auto;
--how-pad: 32px;
position: relative;
padding-top: var(--how-pad);
border-top: 0;
counter-reset: how;
isolation: isolate;
}
@media (min-width: 1024px) { .how.is-stacked .info-grid { --how-pad: 44px; } }
/* o título sai de cena antes das mãos entrarem (--how-fade, JS) */
.how.is-stacked .section-heading { opacity: calc(1 - var(--how-fade, 0)); }
/* Mãos do card final (initHowStack): por cima de tudo, entram de fora da tela
conforme --how-hands vai de 0 a 1. Ficam presas nos cantos do bloco fixo
(50% - 50vw = da borda do container até a da tela): a de cima no canto
superior direito, a de baixo no inferior esquerdo, com o braço encostando
na lateral e no rodapé da tela. A largura cabe na tela e deixa ~300px de
altura livre no meio para o card; o JS mede essa faixa e encaixa o card nela */
.how__hand { display: none; }
.how.is-stacked .how__sticky {
--hand-w: min(80vw, calc((100svh - var(--how-top) - 300px) * 1.5));
}
@media (min-width: 1024px) {
.how.is-stacked .how__sticky { --hand-w: min(60vw, calc((100svh - var(--how-top) - 300px) * 1.5)); }
}
.how.is-stacked .how__hand {
--off: calc((1 - var(--how-hands, 0)) * 100svh);
display: block;
position: absolute; z-index: 20;
width: var(--hand-w);
max-width: none; height: auto;
pointer-events: none;
opacity: min(1, calc(var(--how-hands, 0) * 3));
will-change: transform;
}
/* --how-exit-up/down: o quanto cada mão se afasta na saída da seção (JS).
As imagens têm o corte do braço (cotovelo) em traço reto e opaco, sem
esmaecer — por isso ficam alguns px além da borda da tela (--hand-bleed),
nunca encostadas nela, senão esse corte reto aparece. */
.how.is-stacked .how__hand--top {
top: 0; right: calc(50% - 50vw - var(--hand-bleed, 40px));
transform: translate3d(0, calc(-1 * var(--off) - var(--how-exit-up, 0px)), 0);
}
/* A imagem de baixo traz o braço inteiro, com a mão menor no canto direito:
fica 1.4× maior e deslocada (esquerda/baixo) para a palma ter o mesmo
tamanho e lugar da mão recortada de antes; o excesso sai pelas bordas */
.how.is-stacked .how__hand--bottom {
width: calc(1.4 * var(--hand-w));
bottom: calc(-0.134 * var(--hand-w));
left: calc(50% - 50vw - var(--hand-bleed, 40px) - 0.37 * var(--hand-w));
transform: translate3d(0, calc(var(--off) + var(--how-exit-down, 0px)), 0);
}
/* Na saída o bloco fixo para de cortar e o braço de baixo desce por trás da
seção preta seguinte (que vem depois no DOM e fica por cima) */
.how.is-stacked.is-closing .how__sticky { overflow: visible; }
/* Celular e tablet: mãos maiores que a tela, posicionadas pela mão e não
pelo braço. A de cima centraliza os dedos (~25% da imagem) e a de baixo a
palma (~76%) no meio da tela, em volta do card; o resto do braço sai pela
borda (mínimo de 70vw garante que ele ainda encoste nela, + --hand-bleed
de folga para o corte reto do cotovelo nunca aparecer) */
@media (max-width: 1023px) {
.how.is-stacked .how__sticky { --hand-w: clamp(70vw, calc((100svh - var(--how-top) - 300px) * 1.5), 150vw); }
.how.is-stacked .how__hand--top { right: auto; left: calc(50% - 0.25 * var(--hand-w) + var(--hand-bleed, 40px)); }
.how.is-stacked .how__hand--bottom { left: calc(50% - 1.12 * var(--hand-w) - var(--hand-bleed, 40px)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
.how.is-stacked .how__sticky { --hand-w: clamp(70vw, calc((100svh - var(--how-top) - 300px) * 1.5), 110vw); }
}
.how.is-stacked :is(.info, .info-cta) {
grid-area: 1 / 1;
position: relative;
min-height: clamp(220px, 34svh, 320px);
display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
gap: var(--space-6);
padding: 28px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: 0 -6px 20px rgb(11 13 14 / 0.06), 0 24px 48px -24px rgb(11 13 14 / 0.25);
transform-origin: top center;
will-change: transform, opacity;
}
@media (min-width: 768px) { .how.is-stacked :is(.info, .info-cta) { padding: var(--space-10); } }
/* Símbolo LR "pintado" no canto inferior esquerdo do card final: maior que
o card de propósito, o overflow corta a sobra. Pinceladas (máscara SVG com
borda áspera) cobrem o símbolo quando o card chega à frente (.is-painted) */
.how__logo { display: none; }
.how.is-stacked .info-cta { overflow: hidden; isolation: isolate; }
.how.is-stacked .info-cta > :not(.how__logo) { position: relative; z-index: 1; }
.how.is-stacked .how__logo {
display: block;
position: absolute; z-index: 0;
left: -14%; bottom: -34%;
width: min(560px, 95%);
opacity: 0.12;
mix-blend-mode: multiply;
pointer-events: none;
}
.how__logo path {
stroke-dasharray: 1 2; stroke-dashoffset: 1;
transition: stroke-dashoffset 0.5s cubic-bezier(0.55, 0, 0.35, 1);
}
.is-painted .how__logo path { stroke-dashoffset: 0; transition-duration: 0.75s; }
.is-painted .how__logo path:nth-child(2) { transition-delay: 0.22s; }
.is-painted .how__logo path:nth-child(3) { transition-delay: 0.44s; }
.is-painted .how__logo path:nth-child(4) { transition-delay: 0.66s; }
.is-painted .how__logo path:nth-child(5) { transition-delay: 0.88s; }
.how.is-stacked .info { background: color-mix(in srgb, var(--color-accent-hover) var(--how-tint, 0%), var(--color-white)); counter-increment: how; }
.how.is-stacked .info::after {
content: counter(how, decimal-leading-zero);
position: absolute; top: 28px; right: 28px; z-index: 1;
font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em;
color: color-mix(in srgb, var(--color-white) var(--how-tint, 0%), var(--color-neutral-200));
}
@media (min-width: 768px) { .how.is-stacked .info::after { top: var(--space-10); right: var(--space-10); } }
/* Nos cards da pilha (maiores) o sticker de fundo cresce */
.how.is-stacked .info__art { display: block; width: 50%; height: 92%; }
/* e esmaece ainda mais conforme o card amarela (--how-dim de 0 a 1, JS):
de 0.2 no card da frente até 0.07 nos de trás */
.how.is-stacked .info__art { opacity: calc(0.2 - 0.13 * var(--how-dim, 0)); }
@media (max-width: 767px) { .how.is-stacked .info__art { width: 70%; height: 80%; } }
.how.is-stacked .info__icon { width: 64px; height: 64px; border-radius: var(--radius-lg); }
/* Conforme o card amarela (--how-tint de 0% a 100%), o vidro vira brilho:
o miolo acende em âmbar liso e um halo âmbar se abre em volta */
.how.is-stacked .info__icon {
--glow: var(--how-tint, 0%);
--icon-fill: color-mix(in srgb, var(--color-accent) var(--glow), rgb(255 187 1 / 0.12));
--icon-halo:
0 0 18px 4px color-mix(in srgb, rgb(255 187 1 / 0.7) var(--glow), transparent),
0 0 44px 10px color-mix(in srgb, rgb(255 208 84 / 0.5) var(--glow), transparent);
border-color: color-mix(in srgb, #fff1b8 var(--glow), rgb(255 255 255 / 0.85));
color: color-mix(in srgb, var(--color-white) var(--glow), var(--color-brand-black));
}
.how.is-stacked .info__icon .icon { width: 28px; height: 28px; }
.how.is-stacked .info > div { gap: var(--space-2); }
.how.is-stacked .info__label { color: color-mix(in srgb, var(--color-white) var(--how-tint, 0%), var(--color-brand-black)); font-size: clamp(1.75rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: var(--tracking-tight); }
.how.is-stacked .info-cta { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-brand-black); }
.how.is-stacked .info-cta__title { display: block; font-size: clamp(1.75rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: var(--tracking-tight); }
.how.is-stacked .info-cta .button--dark { --fill: var(--color-white); --fill-text: var(--color-brand-black); }
@media (min-width: 768px) { .how.is-stacked .info-cta .button { width: auto; } }
/* Prova social (carrossel) */
.carousel-head { display: flex; flex-direction: column; gap: var(--space-6); }
.carousel-nav { display: flex; gap: var(--space-3); order: 2; }
.carousel-nav[hidden] { display: none; }
@media (min-width: 768px) { .carousel-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--space-12); } }
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin-right: calc((100vw - 100%) / -2);
padding-right: 20px;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: var(--space-4); }
@media (min-width: 1024px) {
.carousel { margin-right: 0; padding-right: 0; }
.carousel__track { gap: var(--space-6); }
}
.carousel:not(.is-marquee) [data-clone] { display: none; }
/* Faixa contínua (JS liga fora do modo Calmo): fica na largura do conteúdo,
alinhada ao título; os cards aparecem e somem esmaecendo nas pontas em vez
de serem cortados secos. O JS move a faixa e as cópias fecham o loop. */
.carousel.is-marquee {
--card-w: min(280px, 72vw);
--fade: 40px;
overflow: hidden;
scroll-snap-type: none;
margin: 0;
padding: 0;
touch-action: pan-y;
cursor: grab;
user-select: none;
-webkit-mask: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
mask: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
@media (min-width: 1024px) { .carousel.is-marquee { --card-w: 340px; --fade: 72px; } }
.carousel.is-marquee.is-dragging { cursor: grabbing; }
.carousel.is-marquee .carousel__track { width: max-content; will-change: transform; }
.carousel.is-marquee .testimonial { flex: 0 0 var(--card-w); }
/* Entrada na seção: cada card sobe de baixo em cascata (--sobe vem do JS);
a curva passa um pouco do ponto e assenta, como se tivesse peso */
.carousel.is-marquee .testimonial {
transition: translate 1100ms cubic-bezier(.22, 1.25, .36, 1), opacity 500ms ease-out;
transition-delay: var(--sobe, 0s);
}
.carousel.is-marquee:not(.is-up) .testimonial { translate: 0 140px; opacity: 0; transition: none; }
.testimonial {
margin: 0;
flex: 0 0 min(290px, 82%);
min-height: 420px;
scroll-snap-align: start;
display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5);
padding: var(--space-6);
}
@media (min-width: 1024px) { .testimonial { flex-basis: calc((100% - 48px) / 3); min-height: 400px; padding: 28px; } }
.testimonial > div { display: flex; flex-direction: column; gap: var(--space-4); }
.testimonial__quote { width: 32px; height: 32px; fill: none; stroke: var(--color-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.testimonial blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
@media (min-width: 1024px) { .testimonial blockquote { font-size: 1.125rem; } }
.testimonial figcaption { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.testimonial figcaption > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.testimonial strong { font-size: 0.9375rem; }
.testimonial small { font-size: 0.8125rem; color: var(--color-text-muted); }
/* Prints reais: fundo igual ao do app (rgb 12,15,20) para a captura "sumir" no card */
.testimonial--print { justify-content: center; gap: var(--space-2); padding: var(--space-4); background: #0c0f14; overflow: hidden; }
.testimonial--print img { display: block; width: 100%; height: auto; }
/* Flutuação leve: o JS liga .is-flutuando quando a entrada (mola) do print
assenta. Usa `translate`, não `transform`, para não brigar com o transform
inline da mola. Os tempos de assentamento já desencontram os prints.
O modo Calmo já zera animações pelo freio geral. */
.testimonial--print img.is-flutuando { animation: flutua 5s ease-in-out infinite; }
@keyframes flutua {
0%, 100% { translate: 0 0; }
50% { translate: 0 -6px; }
}
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--color-steel); object-fit: cover; }
/* Oferta */
.offer { align-items: stretch; }
@media (min-width: 1024px) { .offer { align-items: center; } }
.offer-card {
width: 100%; max-width: 720px;
display: flex; flex-direction: column; gap: var(--space-6);
padding: 28px 24px;
border-radius: var(--radius-xl);
}
@media (min-width: 768px) { .offer-card { padding: var(--space-12); gap: var(--space-8); } }
.offer-card__title { font-size: clamp(1.375rem, 2.5vw, 1.75rem); }
.offer-card__benefits { display: flex; flex-direction: column; gap: 14px; }
.offer-card__benefits li { display: flex; align-items: center; gap: var(--space-3); font-size: 1rem; }
@media (min-width: 1024px) { .offer-card__benefits li { font-size: 1.0625rem; } }
.offer-card__pricing { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.offer-card__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.offer-card__price { font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 800; line-height: 0.95; letter-spacing: var(--tracking-tight); }
.offer-card__installments { color: var(--color-text-muted); }
.offer-card__trust { display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; color: var(--color-text-muted); }
.offer-card__trust span { display: inline-flex; align-items: center; gap: var(--space-2); }
.offer-card__trust .icon { stroke-width: 1.75; }
@media (min-width: 768px) { .offer-card__trust { flex-direction: row; justify-content: center; gap: 28px; } }
/* =========================================================
Retículas (recortes de imagens/fotos/Efeitos.png)
Presas aos cantos, metade para fora e cortadas pela seção/card.
O JS (initHalftone) troca a imagem por um canvas em que cada
bolinha respira; a proporção (--ar) vem do recorte.
========================================================= */
.has-halftone { position: relative; isolation: isolate; }
/* A camada inteira esvaece nas bordas de cima e de baixo da seção: as
bolinhas somem aos poucos até a emenda com a seção vizinha, em vez de
serem cortadas numa linha reta. A borda lateral é a da tela e fica como está. */
.halftone-layer {
position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
--fade-h: clamp(160px, 20vw, 300px);
-webkit-mask: linear-gradient(to bottom, transparent, #000 var(--fade-h), #000 calc(100% - var(--fade-h)), transparent);
mask: linear-gradient(to bottom, transparent, #000 var(--fade-h), #000 calc(100% - var(--fade-h)), transparent);
}
.halftone {
position: absolute;
width: clamp(260px, 40vw, 600px);
aspect-ratio: var(--ar, 1);
pointer-events: none;
}
.halftone canvas, .halftone img { display: block; width: 100%; height: 100%; }
/* contorno sempre macio: as bolinhas de fora somem em círculo, sem quinas */
.halftone-layer .halftone {
-webkit-mask: radial-gradient(closest-side, #000 55%, transparent);
mask: radial-gradient(closest-side, #000 55%, transparent);
}
.halftone--tl { top: 0; left: 0; translate: -46% -40%; }
.halftone--tr { top: 0; right: 0; translate: 48% -46%; }
.halftone--br { right: 0; bottom: 0; translate: 40% 36%; }
.section:not(.section--black, .section--charcoal) .halftone { opacity: 0.55; } /* no branco a retícula pesa mais */
.section--black .halftone, .section--charcoal .halftone { opacity: 0.45; }
/* Card da oferta: canto superior direito, esvaecendo rumo ao conteúdo */
.offer-card { position: relative; isolation: isolate; overflow: hidden; }
/* Card da oferta: um em cima à direita e outro embaixo à esquerda. Cada um
esvaece rumo ao conteúdo (radial) e até a borda do card que o corta (linear). */
.offer-card .halftone {
z-index: -1;
width: clamp(240px, 70%, 520px);
opacity: 0.5;
-webkit-mask: radial-gradient(closest-side at var(--foco), #000 45%, transparent), var(--borda);
-webkit-mask-composite: source-in;
mask: radial-gradient(closest-side at var(--foco), #000 45%, transparent), var(--borda);
mask-composite: intersect;
}
.offer-card .halftone--card {
top: 0; right: 0; translate: 30% -32%;
--foco: 62% 38%; --borda: linear-gradient(to bottom, transparent 32%, #000 70%);
}
.offer-card .halftone--card-bl {
bottom: 0; left: 0; translate: -30% 32%;
--foco: 38% 62%; --borda: linear-gradient(to top, transparent 32%, #000 70%);
}
/* Garantia */
.guarantee { display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 1024px) { .guarantee { flex-direction: row; align-items: center; gap: var(--space-14); max-width: 960px; } }
.guarantee__icon {
flex: none; width: 96px; height: 96px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-brand-black); color: var(--color-accent);
}
.guarantee__icon svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) { .guarantee__icon { width: 160px; height: 160px; } .guarantee__icon svg { width: 72px; height: 72px; } }
/* FAQ */
/* Foto da dúvida: canto inferior esquerdo. A foto afunda --faq-photo-sink
abaixo da base da seção, e a seção seguinte (pintada depois) passa por
cima dessa parte: assim a borda cortada do PNG nunca aparece, nem no vão
que fica enquanto a próxima seção ainda está subindo (--rise-from de até
200px). --faq-photo-y (JS, initFaqPhoto) empurra a foto para baixo. Fora
do desktop ela dá lugar à .faq-peek, logo acima das perguntas. */
.faq-section {
position: relative;
--faq-photo-w: min(88vw, 420px);
--faq-photo-sink: 210px;
--faq-photo-edge: 20px; /* margem lateral do .container */
}
.faq-section > .container { position: relative; z-index: 1; }
.faq-photo {
position: absolute; inset: 0 0 calc(var(--faq-photo-sink) * -1); z-index: 0;
overflow: hidden;
pointer-events: none;
}
.faq-photo picture { display: contents; }
.faq-photo__img {
position: absolute; bottom: 0;
/* o PNG tem ~11% de transparência à esquerda: puxa o corpo para a margem */
left: calc(max(var(--faq-photo-edge), (100% - var(--container-max)) / 2) - var(--faq-photo-w) * 0.14);
width: var(--faq-photo-w); height: auto;
translate: 0 var(--faq-photo-y, 0px);
will-change: translate;
}
/* Mobile e tablet: foto espelhada acima das perguntas, cortada abaixo do
celular; a margem negativa anula o gap do grid e cola o corte na linha
de cima da primeira pergunta (.faq::before). */
.faq-peek { display: none; }
@media (max-width: 1023px) {
.faq-photo { display: none; }
.faq-peek {
display: block;
width: var(--faq-photo-w);
justify-self: end;
aspect-ratio: 1 / 1.17;
overflow: hidden;
margin-bottom: calc(var(--space-8) * -1);
}
/* espelhada, a transparência do PNG (~11%) vai para a direita: empurra o
corpo até a margem, e a sobra fica escondida pela caixa */
.faq-peek img { display: block; width: 100%; height: auto; transform: translateX(11%) scaleX(-1); will-change: translate; }
}
@media (min-width: 768px) {
.faq-section { --faq-photo-w: 480px; --faq-photo-edge: 32px; }
}
@media (min-width: 1024px) {
.faq-section { --faq-photo-w: 540px; --faq-photo-edge: 40px; }
}
.faq-intro { align-items: flex-start; }
.faq-intro p { color: var(--color-text-muted); }
.faq-intro .button { display: none; }
@media (min-width: 1024px) { .faq-intro .button { display: inline-flex; margin-top: var(--space-2); } }
/* linhas como pseudo-elementos, igual às credenciais do Sobre mim */
.faq { position: relative; }
.faq-item { position: relative; overflow: hidden; }
.faq::before,
.faq-item::after {
content: "";
position: absolute; left: 0; right: 0;
height: 1px;
background: var(--color-border);
transform-origin: left;
}
.faq::before { top: 0; }
.faq-item::after { bottom: 0; }
.faq-item__question {
min-height: 64px;
display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
padding: var(--space-4) 0;
font-size: 1.0625rem; font-weight: 700; line-height: 1.35;
cursor: pointer;
list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq-item__toggle {
flex: none; width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--color-neutral-900); border-radius: 50%;
transition: transform var(--duration-base) var(--ease-standard);
}
.faq-item__toggle .icon { width: 15px; height: 15px; stroke-width: 2.25; }
.faq-item[open] .faq-item__toggle { transform: rotate(180deg); }
.faq-item__answer { padding-bottom: var(--space-5); color: var(--color-text-muted); }
@media (min-width: 1024px) {
.faq-item__question { min-height: 72px; padding: var(--space-5) 0; font-size: 1.1875rem; gap: var(--space-6); }
.faq-item__toggle { width: 36px; height: 36px; }
.faq-item__answer { padding: 0 60px var(--space-6) 0; font-size: 1.0625rem; }
}
/* CTA final */
.final-cta { position: relative; isolation: isolate; padding-block: 72px; }
@media (min-width: 1024px) { .final-cta { padding-block: 120px; } }
/* Símbolo ao fundo: meio transparente e sumindo das bordas para o centro */
.final-cta__mark {
position: absolute; inset: 0; z-index: 0;
display: grid; place-items: center;
overflow: hidden;
opacity: 0.22;
pointer-events: none;
}
.final-cta__logo {
width: min(92%, 760px); height: auto;
-webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
}
.final-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-5); }
.final-cta__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: var(--tracking-tight); }
.final-cta__actions { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.final-cta__actions small { font-size: 0.875rem; color: var(--color-muted-inverse); }
@media (min-width: 1024px) {
.final-cta__inner { align-items: center; text-align: center; gap: 28px; }
.final-cta__title { max-width: 960px; }
.final-cta .text-lg { max-width: 680px; }
.final-cta__actions { align-items: center; }
}
/* Celular/tablet: botões mais compactos e na largura do texto, em vez de
faixas cobrindo a coluna inteira. Hero e "Como funciona" alinhados à
esquerda; nas demais seções (e no card da oferta, junto com o preço),
centralizados. O modal mantém o botão em bloco. */
@media (max-width: 1023px) {
.button { min-height: 46px; padding-inline: 20px; font-size: 0.9375rem; --ball-r: 23px; }
.button--primary, .button--lg { min-height: 48px; padding-inline: 22px; font-size: 0.9375rem; --ball-r: 24px; }
.button--sm { min-height: 40px; padding-inline: 14px; font-size: 0.8125rem; --ball-r: 20px; }
.offer-card__pricing { align-items: center; text-align: center; }
.offer-card .button { width: auto; align-self: center; }
.info-cta { align-items: flex-start; }
.info-cta .button { width: auto; align-self: flex-start; }
.final-cta__actions { align-items: center; text-align: center; }
.final-cta__actions .button { width: auto; }
}
/* Rodapé */
.footer { position: relative; padding: 32px 0 40px; background: var(--color-brand-black); color: var(--color-muted-inverse); border-top: 1px solid var(--color-border-inverse); font-size: 0.875rem; }
.footer__inner { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__links { display: flex; gap: var(--space-6); }
.footer__links a { text-decoration: none; }
.footer__links a:hover { color: var(--color-white); }
@media (min-width: 1024px) { .footer { padding: 40px 0; } .footer__inner { flex-direction: row; justify-content: space-between; align-items: center; } }
/* Modal */
.modal {
width: min(100% - 32px, 560px);
padding: var(--space-6);
display: none;
flex-direction: column; gap: var(--space-5);
color: var(--color-white);
background: var(--color-modal-surface);
border: 1px solid var(--color-modal-border);
border-radius: var(--radius-modal);
box-shadow: 0 16px 48px rgb(0 0 0 / 0.45);
}
.modal[open] { display: flex; }
.modal::backdrop { background: rgb(11 13 14 / 0.72); }
@media (min-width: 768px) { .modal { padding: var(--space-8); gap: var(--space-6); } }
.modal__head { display: flex; justify-content: space-between; align-items: center; }
.modal__title { font-size: clamp(1.375rem, 2.5vw, 1.625rem); line-height: 1.2; letter-spacing: -0.015em; }
.modal__text { font-size: 0.9375rem; color: var(--color-muted-inverse); }
.modal__summary { margin: 0; border-top: 1px solid var(--color-modal-border); border-bottom: 1px solid var(--color-modal-border); }
.modal__summary div { display: flex; justify-content: space-between; padding: 14px 0; }
.modal__summary div + div { border-top: 1px solid var(--color-modal-border); }
.modal__summary dt { color: var(--color-muted-inverse); }
.modal__summary dd { margin: 0; font-weight: 600; }
/* =========================================================
Entrada ao rolar (ver initReveal no index.html)
Só vale com html.rise-on, ligada no quando há JS e o nível
não é Calmo; sem ela o site fica exatamente como antes.
Fundos: a cor da seção sai do background e vai para um painel (::before)
que começa deslocado para baixo e sobe ao entrar na tela. O painel se
estende --rise-ext abaixo da seção, então enquanto a próxima ainda não
subiu, a faixa descoberta mostra a cor da anterior (nunca um buraco
branco). Seções posteriores pintam por cima, escondendo essa extensão.
========================================================= */
:root { --rise-ext: 240px; } /* precisa ser >= o maior --rise-from */
/* Variações intercaladas entre as seções (atributo data-rise no HTML) */
[data-rise] { --rise-from: 120px; --rise-dur: 950ms; --rise-ease: var(--ease-standard); }
[data-rise="rapido"] { --rise-from: 90px; --rise-dur: 650ms; --rise-ease: cubic-bezier(0.2, 0.9, 0.25, 1); }
/* "volta": curva que passa do ponto final (sobe mais) e depois assenta */
[data-rise="volta"] { --rise-from: 200px; --rise-dur: 1300ms; --rise-ease: cubic-bezier(0.34, 1.5, 0.5, 1); }
.marquee[data-rise] { --rise-from: 80px; }
.final-cta[data-rise] { --rise-ext: 40px; } /* última: só cobre o repique, o rodapé esconde o resto */
html.rise-on [data-rise] { position: relative; isolation: isolate; background: none; }
html.rise-on [data-rise]::before {
content: "";
position: absolute;
inset: 0 0 calc(var(--rise-ext) * -1);
z-index: -1;
background: var(--section-bg);
pointer-events: none;
}
/* a faixa amarela precisa deixar o painel vazar na vertical */
html.rise-on .marquee { overflow: clip visible; }
/* A hero não sobe, mas precisa de algo abaixo dela para a seção seguinte
subir por cima. Base (todas as telas): preto que desvanece da esquerda
para a direita e vai sumindo para baixo. */
html.rise-on .hero::before {
content: "";
position: absolute;
top: 100%; left: 0; right: 0;
height: var(--rise-ext);
z-index: -1;
background: linear-gradient(to right,
var(--color-brand-black) 0%,
rgb(11 13 14 / 0.92) 40%,
rgb(11 13 14 / 0.7) 100%);
mask-image: linear-gradient(to bottom, #000, transparent);
-webkit-mask-image: linear-gradient(to bottom, #000, transparent);
}
/* O fundo da hero (foto + blur + degradê preto/âmbar) continua abaixo dela,
dentro da mesma caixa (.hero__media estendida em --rise-ext), e some
para baixo pela máscara, revelando o preto acima. Para não haver corte:
- blur e degradê mantêm o tamanho da hero e ganham um ESPELHO logo
abaixo (mesmas máscaras/degradês refletidos na vertical), que casa
pixel a pixel na emenda;
- o grão é uniforme, só ocupa a caixa toda. */
html.rise-on .hero__media {
bottom: calc(var(--rise-ext) * -1);
background: var(--color-brand-black); /* base contínua mesmo sem a foto carregada */
mask-image: linear-gradient(to bottom, #000 calc(100% - var(--rise-ext)), transparent);
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--rise-ext)), transparent);
}
/* --hero-seam: altura da hero arredondada para pixel inteiro da tela (JS,
initHeroSeam). Se a emenda caísse em fração de pixel, as bordas suavizadas
do original e do espelho deixariam uma linha de 1px entre eles. */
html.rise-on :is(.hero__blur, .hero__wash) {
bottom: auto;
height: var(--hero-seam, calc(100% - var(--rise-ext)));
}
.hero__blur--espelho { display: none; }
html.rise-on .hero__blur--espelho {
display: block;
top: var(--hero-seam, calc(100% - var(--rise-ext)));
bottom: auto;
height: var(--hero-seam, calc(100% - var(--rise-ext)));
--blur-axis: to bottom right; /* reflexo vertical de "to top right" */
}
@media (min-width: 1024px) {
html.rise-on .hero__blur--espelho { --blur-axis: 100deg; } /* reflexo de 80deg */
}
html.rise-on .hero__wash::after {
content: "";
position: absolute;
top: 100%; left: 0; right: 0;
height: 100%;
background: inherit;
transform: scaleY(-1);
}
/* Foto no celular: presa pela altura, o cover não corta nada embaixo.
Ela mantém o tamanho da hero e continua refletida (Chrome/Safari; sem
suporte fica só o preto). */
html.rise-on .hero__photo {
height: var(--hero-seam, calc(100% - var(--rise-ext)));
-webkit-box-reflect: below 0;
}
/* A partir do tablet a foto fica presa pela largura e o cover cortava a
parte de baixo dela: aqui essa sobra real é mostrada. A foto passa a ter
a proporção natural, posicionada para o trecho visível na hero continuar
idêntico (--photo-y = mesmo alinhamento vertical do object-position). */
@media (min-width: 768px) {
html.rise-on .hero__photo {
--photo-y: 0.4;
bottom: auto;
height: auto;
object-fit: fill;
-webkit-box-reflect: none;
top: calc((100% - var(--rise-ext)) * var(--photo-y));
translate: 0 calc(var(--photo-y) * -100%);
}
}
@media (min-width: 1024px) {
html.rise-on .hero__photo { --photo-y: 0.5; }
}
/* conteúdo acompanha o painel: sobe menos, um pouco depois, surgindo */
html.rise-on [data-rise]::before,
html.rise-on [data-rise] > * {
transition:
translate var(--rise-dur) var(--rise-ease),
opacity calc(var(--rise-dur) * 0.8) ease;
}
html.rise-on [data-rise] > * { transition-delay: calc(var(--rise-dur) * 0.15); }
html.rise-on [data-rise]:not(.is-in)::before { translate: 0 var(--rise-from); }
html.rise-on [data-rise]:not(.is-in) > * { translate: 0 calc(var(--rise-from) * 0.35); opacity: 0; }
/* Conteúdo: o cabeçalho sobe saindo de trás da fileira de cards. O clip
corta na altura do topo dos cards (a base do cabeçalho + o gap do stack),
então o texto parte escondido "atrás" deles. */
[data-emerge] { --emerge-gap: var(--space-8); }
@media (min-width: 1024px) { [data-emerge] { --emerge-gap: var(--space-12); } }
html.rise-on [data-emerge] { clip-path: inset(-100vh -100vw calc(var(--emerge-gap) * -1) -100vw); }
html.rise-on .section-heading[data-emerge] > * { transition: translate 900ms var(--ease-standard) 150ms, opacity 900ms ease 120ms, filter 1100ms var(--ease-standard) 120ms; }
html.rise-on [data-emerge] > :nth-child(2) { transition-delay: 260ms; }
html.rise-on [data-emerge]:not(.is-in) > * { translate: 0 calc(100% + var(--emerge-gap) + 1.5em); }
/* Títulos: surgem saindo do desfoque */
html.rise-on :is(h1, h2, h3):not(.modal__title) {
transition: opacity 900ms ease 120ms, filter 1100ms var(--ease-standard) 120ms;
}
html.rise-on :is(h1, h2, h3):not(.modal__title):not(.is-in) { opacity: 0; filter: blur(14px); }
/* Lista de dores: o X gira para o lugar e o texto sai de trás dele,
revelado da esquerda para a direita por uma máscara com borda suave.
A máscara tem 250% da largura: em 100% só a parte transparente cobre o
texto, em 0% só a parte opaca. Um item por vez (--i vem do HTML).
As check-lists (Transformação, Para quem é) usam o mesmo efeito com o ✓. */
html.rise-on :is(.pain-list__icon, .check-list li > :first-child) {
transition: rotate 700ms var(--ease-standard), scale 700ms var(--ease-standard);
transition-delay: calc(350ms + var(--i) * 140ms);
}
html.rise-on :is(.pain-list__text, .check-list__text) {
-webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
transition: -webkit-mask-position 1100ms var(--ease-standard), mask-position 1100ms var(--ease-standard), translate 1100ms var(--ease-standard);
transition-delay: calc(500ms + var(--i) * 140ms);
}
html.rise-on .pain-list:not(.is-in) .pain-list__icon { rotate: -90deg; scale: 0.6; }
html.rise-on .check-list:not(.is-in) li > :first-child { scale: 0.6; }
html.rise-on .pain-list:not(.is-in) .pain-list__text,
html.rise-on .check-list:not(.is-in) .check-list__text { -webkit-mask-position: 100% 0; mask-position: 100% 0; translate: -12px 0; }
/* Para quem é: o conteúdo do card "Importante" surge com a mesma máscara,
primeiro o cabeçalho, depois o parágrafo */
html.rise-on .not-for > * {
-webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
transition: -webkit-mask-position 1200ms var(--ease-standard), mask-position 1200ms var(--ease-standard), translate 1200ms var(--ease-standard);
transition-delay: 600ms;
}
html.rise-on .not-for > p { transition-delay: 850ms; }
html.rise-on .not-for:not(.is-in) > * { -webkit-mask-position: 100% 0; mask-position: 100% 0; translate: -12px 0; }
/* Desafio: a linha preta do callout cresce de cima para baixo e o texto sai
de trás dela, da esquerda para a direita (mesma máscara das listas) */
html.rise-on .callout::before {
transform-origin: top;
transition: scale 600ms var(--ease-standard) 150ms;
}
html.rise-on .callout__text {
-webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
transition: -webkit-mask-position 1300ms var(--ease-standard), mask-position 1300ms var(--ease-standard), translate 1300ms var(--ease-standard);
transition-delay: 650ms;
}
html.rise-on .callout:not(.is-in)::before { scale: 1 0; }
html.rise-on .callout:not(.is-in) .callout__text { -webkit-mask-position: 100% 0; mask-position: 100% 0; translate: -32px 0; }
/* Ícones desenhados à mão: o traço do ✓ (Transformação, Para quem é, Oferta)
e do escudo (Garantia) se forma como uma caneta riscando. Os paths do
sprite têm pathLength="1", então dasharray/dashoffset valem em fração do
traço; ambos são herdados, por isso atravessam o