/* ============================================================
* CAMADA 3 -- SECOES QUE SERVEM A MAIS DE UMA PAGINA
* ============================================================
*
* Hero, cabecalho de secao e passos nasceram dentro do `lv-home.css` porque a
* home era a unica pagina redesenhada. Com as landings de `criar-lista/`
* entrando no mesmo desenho, ficar la significaria uma de duas coisas ruins:
* a landing copiar as regras (duas fontes da verdade) ou carregar 36 KB de
* folha de pagina para usar uma duzia de classes. E o erro que motivou o
* sistema de camadas, descrito no `CLAUDE.md`.
*
* UM ARQUIVO, E NAO TRES. `lv-hero.css` + `lv-secao.css` + `lv-passos.css`
* seriam tres `` a mais em oito paginas, para pecas que nunca viajam
* separadas. Precedente no proprio repositorio: `lv-botoes.css` guarda dois
* componentes e `lv-rodape.css` guarda a faixa de confianca e o rodape.
*
* O QUE ESTA AQUI, depois de tres rodadas de mudanca:
* - o hero INTEIRO: layout, prova social, cartoes flutuantes e a entrada
* animada com os quatro `@keyframes`. A primeira versao deste cabecalho
* dizia que os tres ultimos ficavam na home e que "a landing renderiza o
* hero estatico" -- era verdade por doze horas, e o commit que os moveu
* nao atualizou este texto. Comentario que descreve o oposto do arquivo e
* pior que comentario nenhum, porque e' acreditado;
* - o cabecalho de secao, os passos, e a faixa de fechamento.
*
* O QUE NAO ESTA AQUI, e o motivo:
* - `.lv-tipo*`, o carrossel de planos e os depoimentos: so' a home os usa.
* - `body .cc-window`. Ele fica no `lv-home.css` por ora; ver o comentario
* de la, e a nota no TAREFAS.md sobre o CTA de `casamento` a 360px.
*
* `.lv-hero-recorte` EXISTE NAS DUAS FOLHAS, e e legitimo: layout aqui,
* `opacity`/`animation` no `lv-home.css`. A regra do `CLAUDE.md` e sobre
* SELETOR + PROPRIEDADE, e as propriedades sao disjuntas.
*
* FALSO NEGATIVO CONHECIDO: o bloco `@media (max-height: 620px)` do fim NUNCA
* aparece como usado no `tools/cobertura-css.mjs`, que mede a 844px de altura.
* Nao apagar por causa do percentual.
*
* Ordem de carga: depois de `lv-rodape.css`, antes da folha de pagina.
* ============================================================ */
/* ===== HERO ============================================================
Os valores desta secao foram lidos do mockup com `getComputedStyle`, lado a
lado com a pagina servida, e nao escolhidos a olho. */
.lv-hero {
position: relative; overflow: hidden;
padding: 56px 0 0;
}
/* Brilho quente do desenho. Fica ATRAS de tudo e nao intercepta clique.
`max-width:120vw` impede que ele crie rolagem horizontal no celular. */
.lv-hero-brilho {
position: absolute; top: -80px; right: -120px;
width: 520px; height: 520px; max-width: 120vw;
border-radius: 50%; pointer-events: none; z-index: 0;
background: radial-gradient(circle at 30% 30%, #fdf2fb 0%, #fff7ed 60%, transparent 70%);
}
/* `align-items: end` e nao `center`: a foto e um recorte de corpo inteiro e
assenta no piso da secao. Centralizada, ela flutua e o texto desce junto. */
.lv-hero-grid {
position: relative; z-index: 1;
max-width: var(--lv-largura); margin: 0 auto; padding: 0 32px;
display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: end;
}
.lv-hero-chapeu {
display: flex; align-items: center; gap: 8px;
font-family: var(--lv-font-display); font-weight: 800;
font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
color: var(--lv-accent); margin: 0 0 18px;
}
.lv-hero-titulo {
font-family: var(--lv-font-display); font-weight: 800; font-size: 62px;
line-height: 1.08; letter-spacing: -.02em; color: var(--lv-ink); margin: 0 0 20px;
}
/* mock: rgb(220,140,219) = --lv-accent, familia Nunito. */
.lv-hero-sub {
font-size: 27px; font-style: italic; font-weight: 700;
font-family: var(--lv-font-display); color: var(--lv-accent);
margin: 0 0 34px;
}
/* A COLUNA DA IMAGEM.
O `padding` da o respiro que os cartoes flutuantes ocupam quando saem para
fora da foto; sem ele o `overflow:hidden` da secao corta os dois. */
.lv-hero-imagem { position: relative; padding: 18px 22px 0; }
/* Recorte com alfa. O `drop-shadow` segue o contorno da pessoa; `box-shadow`
desenharia a sombra do retangulo da imagem, inclusive do vazio em volta. */
.lv-hero-recorte {
display: block; width: 100%; height: auto;
/* SEM teto de altura. O teto de 560px vinha de quando o hero estava mais
apertado; com a coluna na largura do desenho a foto assenta em 677px,
que e a altura que ela tem la. */
filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .16));
position: relative; z-index: 1;
}
@media (max-width: 1023px) {
.lv-hero-grid { grid-template-columns: 1fr; gap: 40px; }
.lv-hero-titulo { font-size: 52px; }
}
@media (max-width: 767px) {
.lv-hero-titulo { font-size: 38px; }
.lv-hero-brilho { width: 420px; height: 420px; top: -60px; right: -100px; }
}
/* ===== HERO: prova social, cartoes e a entrada animada =================
Estes tres ficaram no `lv-home.css` quando o resto do hero subiu, com a
justificativa de que "so a home usa". Era suposicao, e as landings usam os
tres -- prova social com avatares, cartoes de notificacao e a entrada.
Camada 3 leva o que a segunda pagina usa de fato, e agora ela existe. */
/* PROVA SOCIAL. */
.lv-prova { display: flex; align-items: center; gap: 14px; margin: 30px 0 72px; }
.lv-prova-avatares { display: flex; }
.lv-prova-avatares picture { display: block; margin-left: -11px; width: 34px; height: 34px; }
.lv-prova-avatares picture:first-child { margin-left: 0; }
.lv-prova-avatares img {
width: 34px; height: 34px; border-radius: 999px; object-fit: cover;
border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); display: block;
}
.lv-prova-texto { font-size: 14.5px; color: var(--lv-muted); }
.lv-prova-texto strong { color: var(--lv-ink); font-family: var(--lv-font-display); }
/* CARTOES FLUTUANTES. Ilustram o produto e nao sao dado: levam `aria-hidden`
no HTML para o leitor de tela nao anunciar uma lista e um valor inexistentes. */
.lv-flutua {
position: absolute; z-index: 3;
background: #fff; border-radius: 15px; padding: 11px 14px;
box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
display: flex; align-items: center; gap: 11px; white-space: nowrap;
}
.lv-flutua-icone {
display: flex; align-items: center; justify-content: center;
padding: 7px; border-radius: 999px; flex: 0 0 auto;
}
.lv-flutua-icone-ok { background: #dcfce7; color: #16a34a; }
.lv-flutua-icone-presente { background: #ffedd5; color: #f4a261; }
.lv-flutua-texto { display: flex; flex-direction: column; line-height: 1.3; }
/* Caixa normal, e nao versal: no desenho isto e rotulo de interface, nao
etiqueta. Em versal com 10,5px o cartao virava outra coisa. */
.lv-flutua em {
font-style: normal; font-size: 12.5px; font-weight: 600; color: #6b7280;
}
.lv-flutua strong {
font-family: var(--lv-font-display); font-weight: 700; font-size: 13.5px;
color: var(--lv-ink);
}
.lv-flutua-1 { top: 6%; left: -16px; }
.lv-flutua-2 { bottom: 8%; right: -12px; }
/* ===== ENTRADA DO HERO: CSS puro, sem biblioteca ======================
Nao entra GSAP aqui. Ele custa 44 KB comprimidos e ganha isso de volta
quando ha sequencia com controle, animacao amarrada a rolagem ou
interrupcao. Uma cascata de entrada com atraso nao e nada disso: e
`animation-delay`, que o navegador ja tem.
O ESTADO INICIAL NO CSS SO E SEGURO PORQUE A ANIMACAO VEM DO MESMO ARQUIVO.
Com biblioteca externa, `opacity:0` no CSS deixa a pagina EM BRANCO se a CDN
cair: sao dois destinos independentes e um pode falhar sozinho. Aqui, ou os
dois carregam, ou a pagina inteira esta sem estilo e o problema e outro. */
@keyframes lvEntra {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@keyframes lvEntraImagem {
from { opacity: 0; transform: scale(.965); }
to { opacity: 1; transform: none; }
}
@keyframes lvSobe { to { transform: none; } }
@keyframes lvFlutua {
0% { transform: translateY(0); }
50% { transform: translateY(-14px); }
100% { transform: translateY(0); }
}
/* DEVAGAR DE PROPOSITO: 1,05s com `cubic-bezier(.16,1,.3,1)`, que desacelera
forte no fim. Entrada rapida chama atencao para si; entrada lenta deixa a
pessoa ler enquanto acontece. */
[data-anim="hero"] {
opacity: 0;
animation: lvEntra 1.05s cubic-bezier(.16, 1, .3, 1) forwards;
}
/* Os atrasos seguem a ORDEM DE LEITURA, e nao a ordem do markup: o chapeu
abre, o titulo sobe palavra a palavra, e so quando a ultima palavra chega e
que "Comece gratis" aparece. */
.lv-hero-chapeu { animation-delay: .05s; }
.lv-hero-sub { animation-delay: 1.05s; }
.lv-hero .lv-cta { animation-delay: 1.22s; }
.lv-prova { animation-delay: 1.40s; }
/* REVELACAO POR MASCARA, PALAVRA A PALAVRA.
Cada palavra fica num `.lv-p` com `overflow:hidden`, e o span de dentro
comeca 105% abaixo: sobe de tras da propria borda, entao nada aparece do
nada, tudo ENTRA. Por palavra, e nao por letra: por letra atrasa a leitura
da promessa principal e vira efeito. */
.lv-p { display: inline-block; overflow: hidden; vertical-align: bottom; }
.lv-p > span {
display: inline-block;
transform: translateY(105%);
animation: lvSobe 1s cubic-bezier(.16, 1, .3, 1) forwards;
}
/* Cascata de 60ms: rapida o bastante para a frase nao se desmontar, lenta o
bastante para o olho seguir a leitura. */
.lv-p:nth-of-type(1) > span { animation-delay: .18s; }
.lv-p:nth-of-type(2) > span { animation-delay: .24s; }
.lv-p:nth-of-type(3) > span { animation-delay: .30s; }
.lv-p:nth-of-type(4) > span { animation-delay: .36s; }
.lv-p:nth-of-type(5) > span { animation-delay: .42s; }
.lv-p:nth-of-type(6) > span { animation-delay: .48s; }
.lv-p:nth-of-type(7) > span { animation-delay: .54s; }
.lv-p:nth-of-type(8) > span { animation-delay: .60s; }
.lv-p:nth-of-type(9) > span { animation-delay: .66s; }
.lv-p:nth-of-type(10) > span { animation-delay: .72s; }
/* A imagem entra em ESCALA, nunca subindo: ela ja tem o balanco depois, e dois
movimentos verticais no mesmo elemento ficam bambos. O balanco so comeca
quando a entrada termina, senao um cancela o outro. */
.lv-hero-recorte {
opacity: 0;
animation: lvEntraImagem 1.4s cubic-bezier(.16, 1, .3, 1) .25s forwards,
lvFlutua 6s ease-in-out 1.7s infinite;
}
/* Os dois cartoes tem duracao e atraso DIFERENTES de proposito: iguais, sobem
e descem juntos e a tela inteira parece respirar. */
.lv-flutua-1 { animation: lvFlutua 5s ease-in-out .5s infinite; }
.lv-flutua-2 { animation: lvFlutua 7s ease-in-out 1.0s infinite; }
/* QUEM PEDIU MENOS MOVIMENTO RECEBE ZERO MOVIMENTO. Nao e animacao mais curta:
e nenhuma. Transtorno vestibular nao melhora com movimento rapido.
A opacidade volta explicita porque o estado inicial e 0 -- sem isso,
desligar a animacao esconderia o conteudo. */
@media (prefers-reduced-motion: reduce) {
[data-anim="hero"],
.lv-p > span,
.lv-hero-recorte,
.lv-flutua-1,
.lv-flutua-2 {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* As duas regras de hero deste bloco de media query. O texto anterior dizia
que elas "subiram para `lv-secoes.css`" -- e viajou junto com elas para
dentro do proprio `lv-secoes.css`, onde passou a se referir a si mesmo. */
@media (max-width: 1023px) {
/* Os 72px de baixo servem ao DESKTOP: com `align-items: end`, eles empurram a
coluna de texto ate o pe da foto. Em coluna unica nao alinham nada e viram
72px de branco somados aos 40 do `gap` -- 125px entre a ultima linha de
texto e a imagem. O desenho tem a mesma margem e o mesmo problema. */
.lv-prova { margin-bottom: 0; }
}
/* OS CARTOES FICAM NO CELULAR. Eu os escondia abaixo de 767px por achar que
cobririam o rosto; medido no desenho a 390px, nao cobrem: um assenta no vazio
acima do ombro e o outro sobre a calca. Era decisao minha, e nao do desenho. */
/* ===== SECOES: cabecalho compartilhado ================================= */
.lv-secao-interna { max-width: var(--lv-largura); margin: 0 auto; padding: 0 32px; }
.lv-secao-cabecalho { text-align: center; margin-bottom: var(--lv-titulo-gap); }
.lv-chapeu {
display: inline-block; font-family: var(--lv-font-display); font-weight: 800;
font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
color: var(--lv-accent); margin-bottom: 14px;
}
.lv-titulo {
font-family: var(--lv-font-display); font-weight: 800; font-size: 42px;
color: var(--lv-ink); margin: 0 0 16px; letter-spacing: -.02em;
}
.lv-linha { margin: 0 auto; max-width: 640px; font-size: 16.5px; line-height: 1.65; color: var(--lv-muted); }
/* DOIS GESTOS DE DESTAQUE, e nao um. O desenho usa gradiente em "fazer" e
"recomenda" e cor CHAPADA em "comemoracao". Copiar o gradiente nos tres
apagaria a distincao, e ela e proposital: o chapado abre a pagina, o
gradiente marca as duas secoes que vendem. */
.lv-grad {
background: var(--lv-gradient); -webkit-background-clip: text;
background-clip: text; color: transparent;
}
.lv-realce { color: var(--lv-accent); }
@media (max-width: 639px) { .lv-titulo { font-size: 32px; } }
/* ===== COMO FUNCIONA ==================================================== */
.lv-passos { padding: var(--lv-secao) 0; }
/* `max-width: 1040px` e nao a largura cheia da secao: com 1280 as tres colunas
ficam largas demais e cada frase cabe numa linha so, o que desmancha o
agrupamento visual dos passos. Valor do desenho. */
.lv-passos-grade {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
max-width: 1040px; margin: 0 auto;
list-style: none; padding: 0;
}
.lv-passo { text-align: center; }
.lv-passo-circulo {
position: relative; display: flex; align-items: center; justify-content: center;
width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 999px;
background: var(--lv-gradient);
/* A sombra na cor do gradiente, e nao cinza: e o que descola o circulo do
fundo branco sem parecer um elemento de outro material. */
box-shadow: 0 10px 24px rgba(220, 140, 219, .32);
/* O icone e branco sobre o gradiente. Sem isto o circulo fica sendo uma bolha
colorida com um numero pendurado.
A COR VEM DO CIRCULO, e nao do proprio icone: o Lucide APAGA o `` e poe
um `