/* Home pública "/" — visual editorial/luxuoso (ver README.md > Ícones SVG
/ Framework CSS pros padrões que ainda valem aqui: em em, responsivo por
orientation, ícone stroke com fill="none" em cada filho). Carregar
depois de framework.css/theme.css/manrope.css/inter.css — CSS 100%
próprio desta página, sem depender de style.css/painel.css.
Direção: editorial/luxuoso em vez de "grade de ícone SaaS" — navy escuro
pros blocos de maior impacto, branco pro conteúdo de leitura, numerais
fantasmas em vez de badge colorido, linha fina em vez de card com borda
pesada. Verde (var(--primary)/var(--success)) continua sendo o único
acento de cor — nada de dourado/paleta nova, luxo aqui vem de espaço e
tipografia, não de cor a mais.
Tipografia própria desta página, diferente do resto do site (Poppins,
via framework.css): título usa Manrope, texto de corpo usa Inter — as
duas sobrescrevem o Poppins herdado globalmente, então esta página nem
carrega poppins.css no (ver functions/index.js).
Prefixo de classe ficou "h2-" (herdado da fase de comparação em /home2,
quando essa página substituiu a versão anterior) — não tem relação com
nenhuma segunda versão existindo hoje, é só o nome que já estava
nas classes quando essa virou a home oficial. */
:root {
--h2-navy-claro: #16233F;
}
* { box-sizing: border-box; }
body { background: var(--white); font-family: 'Inter', sans-serif; }
h1, h2, h3,
.h2-hero-titulo, .h2-secao-titulo, .h2-cta-titulo, .h2-passo-titulo,
.h2-problema-titulo, .h2-resultado-titulo,
.h2-servico-titulo,
.h2-rodape-coluna-titulo {
font-family: 'Manrope', sans-serif;
/* framework.css define "hyphens: auto" globalmente (html { ... }) —
sem isso aqui, título que quebra de linha em telas estreitas ganha
um hífen de silabação. Alguns títulos já sobrescreviam isso
individualmente (ver .h2-problema-titulo etc.); centralizado aqui
cobre todos os títulos da página de uma vez. */
hyphens: none;
}
/* ================================================================
CABEÇALHO — claro e fixo, mesmo com o hero escuro logo abaixo (evita
logo navy-sobre-navy sem contraste).
================================================================ */
.h2-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5em;
/* Altura fixa em vez de deixar o padding vertical definir a altura
(calcular padding pra bater um valor exato dava número quebrado,
ex: 0.71875em, por causa do border-bottom somando na conta —
"height" direto é exato e não depende do tamanho da logo/nav).
"box-sizing: border-box" (regra global no topo do arquivo) já inclui
padding e border dentro desses 4em. */
height: 4em;
padding: 0 2em;
background: var(--white);
border-bottom: 0.0625em solid var(--border);
}
/* width:auto segue a proporção real do arquivo (1440x540px, 8:3 —
também documentado no README.md, seção "Identidade visual"). */
.h2-logo img { height: 2.5em; width: auto; display: block; }
.h2-nav { display: flex; align-items: center; gap: 2.2em; }
.h2-nav-links { display: flex; align-items: center; gap: 2.2em; }
.h2-nav a:not(.h2-btn) {
color: var(--text);
font-weight: 500;
font-size: 0.86em;
letter-spacing: 0.02em;
}
.h2-nav a:not(.h2-btn):hover { color: var(--primary); }
@media (orientation: portrait) {
/* No mobile o topo fica só com logo + CTA (igual ao topo do app do
toaquimed) — a navegação (Como funciona/Áreas/Entrar) já mora na
bottom-nav abaixo, sem precisar de um segundo menu (drawer) pra
repetir os mesmos links. */
.h2-nav-links { display: none; }
}
/* Barra inferior estilo app — só no mobile, mesma ideia da .pn-tabbar do
painel (ver painel.css), com os mesmos atalhos do menu superior. */
.h2-bottom-nav { display: none; }
@media (orientation: portrait) {
.h2-bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 30;
background: var(--white);
border-top: 0.0625em solid var(--border);
/* Padding reduzido (era 0.5em) — o item agora centraliza o próprio
conteúdo verticalmente ("justify-content: center" abaixo), então
não precisa mais de padding grande aqui só pra ocupar espaço. */
padding: 0.3em 0.3em calc(0.3em + env(safe-area-inset-bottom, 0px));
/* "min-height", não "height" — o padding-bottom já soma
"env(safe-area-inset-bottom)" de propósito (espaço extra pra não
ficar embaixo da barra de indicador do iPhone); "height" fixo
brigaria com esse espaço variável. Mesmo valor de ".app-header"
(área /caso) — os dois menus inferiores agora têm o mesmo
tamanho mínimo. */
min-height: 4em;
}
}
.h2-bottom-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
/* Centraliza ícone+texto na altura toda do item (que estica até
preencher os "min-height: 4em" do menu) — sem isso, o conteúdo ficava
colado no topo, sobrando uma faixa vazia embaixo. */
justify-content: center;
gap: 0.3em;
padding: 0.15em 0;
color: var(--text-muted);
font-size: 0.68em;
font-weight: 600;
}
.h2-bottom-nav-item svg { width: 1.7em; height: 1.7em; }
.h2-bottom-nav-item--ativo { color: var(--primary); }
.h2-btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.75em 1.5em;
border-radius: 0.6em;
font-weight: 600;
font-size: 0.84em;
letter-spacing: 0.02em;
/* Sem "white-space: nowrap" de propósito — com os textos de CTA mais
longos ("Descobrir onde reclamar gratuitamente"), forçar uma linha
só deixava o botão mais largo que a tela no mobile (estourava a
largura da página). Botão de texto curto continua numa linha só
naturalmente; só o texto longo agora quebra em 2 linhas em vez de
empurrar a página pra fora. */
}
/* Sem isso, um ícone dentro do botão (viewBox sem width/height próprios)
cai no tamanho intrínseco padrão do SVG (300x150px) — mesmo bug já
corrigido em app.css (".app-btn svg") e painel.css (".pn-btn svg").
"display: block" evita o espaço fantasma que todo elemento inline (SVG
inclusive) reserva embaixo pra descendente de texto (tipo o "p" de
"página") — sem isso, mesmo com ".h2-btn" centralizando os itens do flex
(align-items: center), o ÍCONE em si fica com uma folga a mais embaixo
dentro do próprio espaço reservado a ele, parecendo "mais alto" que o
texto ao lado mesmo os dois estando centralizados. */
.h2-btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; display: block; }
/* Ícone do WhatsApp maior que os outros ícones de botão de propósito — o
traçado real do logo (ver ICONE_WHATSAPP_SVG em layout-site.js) fica
pouco reconhecível em tamanho pequeno. */
.h2-btn svg.h2-icone-whatsapp { width: 1.7em; height: 1.7em; }
.h2-btn--primario { background: var(--primary); color: var(--white); }
.h2-btn--primario:hover { background: var(--primary-dark); }
.h2-btn--grande { padding: 0.95em 2em; font-size: 0.92em; }
/* Texto centralizado + ícone fixo na borda direita — o ícone sai do fluxo
flex (position:absolute), então o texto (único item restante no flex)
centraliza sozinho no espaço disponível, em qualquer largura de botão
(inclusive 100% no mobile). Modificador à parte — não mexe em ".h2-btn"
genérico, usado com ícone à esquerda do texto em outros CTAs da página. */
.h2-btn--seta-borda { position: relative; justify-content: center; padding-right: 3em; }
/* Alinhamento vertical já garantido por "top: 50% + translateY(-50%)"
(não depende de "display: block" nem de flex, funciona sozinho). Maior
e mais grossa que o padrão de ".h2-btn svg" (1.1em/stroke 1.6) — do
tamanho normal ela ficava fina/discreta demais como seta de destaque de
botão. */
.h2-btn--seta-borda svg { position: absolute; right: 1.3em; top: 50%; transform: translateY(-50%); width: 1.5em; height: 1.5em; stroke-width: 2.4; }
/* ================================================================
EYEBROW — rótulo pequeno em versalete, usado antes de todo título de
seção (assinatura visual editorial).
================================================================ */
.h2-eyebrow {
display: inline-block;
font-size: 0.76em;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 0.6em;
}
/* ================================================================
HERO — só o PORTRAIT (mobile) foi redesenhado (referência aprovada em
conversa, "mais limpo, valorizando a imagem"): foto em bloco de verdade
(".h2-hero-foto-wrap" mais abaixo), abaixo do texto, sobre fundo liso. O
LANDSCAPE (desktop) voltou pro tratamento anterior por pedido explícito
(dono do projeto achou o resultado melhor ali) — foto como
background-image da própria seção com gradiente por cima do texto;
".h2-hero-foto-wrap" fica "display: none" nessa orientação (ver mais
abaixo), o fundo já cobre o papel da foto.
Cada orientação tem sua própria "prova social" de reforço — nunca as
duas juntas, não cabe: ".h2-hero-badge-flutuante" (selo flutuante sobre
o fundo) só landscape; ".h2-hero-selos" (fileira de 3 cards) só
portrait.
================================================================ */
.h2-hero {
position: relative;
color: var(--text);
background: var(--background);
/* Topo = altura do .h2-header (4em, fixed) + folga — precisa ficar em
sincronia manual com ".h2-header { height: 4em; }" acima. */
padding: 6em 0 3em;
}
@media (orientation: landscape) {
.h2-hero {
padding: 7em 3em 4em;
background-image:
linear-gradient(90deg, var(--background) 0%, var(--background) 40%, rgba(250, 246, 240, 0.55) 58%, rgba(250, 246, 240, 0) 78%),
url('/assets/image/bg-hero.png');
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
}
}
.h2-hero-texto { position: relative; z-index: 1; padding: 0 2em; }
@media (orientation: landscape) {
.h2-hero-texto { max-width: 30em; padding: 0; }
}
.h2-hero-titulo {
font-size: 2.9em;
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.015em;
margin-bottom: 0.5em;
color: var(--text);
}
@media (orientation: portrait) {
/* Só mobile — ganhar espaço vertical (menos tela disponível que o
desktop, que já está bom do jeito que está). Aproxima as duas linhas
do título ("Almoço pronto" / "para a semana toda.") e reduz o
respiro antes do subtítulo. */
.h2-hero-titulo { line-height: 0.98; margin-bottom: 0.3em; }
}
@media (orientation: landscape) {
.h2-hero-titulo { font-size: 3.4em; }
}
.h2-hero-titulo strong { font-weight: 700; color: var(--primary); }
.h2-hero-sub {
font-size: 1.05em;
font-weight: 400;
color: var(--text-muted);
line-height: 1.65;
margin-bottom: 1em;
}
@media (orientation: portrait) {
/* Só mobile — reduz o respiro antes do botão "Montar meu Kit"
(ver mesmo raciocínio em ".h2-hero-titulo" acima). */
.h2-hero-sub { margin-bottom: 0.6em; }
}
.h2-hero-acoes { display: flex; align-items: center; gap: 1.2em; flex-wrap: wrap; }
@media (orientation: portrait) {
.h2-hero-acoes { align-items: stretch; }
.h2-hero-acoes .h2-btn { width: 100%; justify-content: center; }
}
/* Sombra escura extra só no landscape — o botão volta a sentar em cima da
foto de fundo nessa orientação (ver ".h2-hero" acima), precisa de mais
contraste/profundidade do que um botão comum sobre fundo liso. No
portrait o hero não tem mais foto atrás do texto, então não precisa. */
@media (orientation: landscape) {
.h2-hero-acoes .h2-btn { box-shadow: 0 0.4em 1em rgba(20, 18, 12, 0.28); }
}
/* Link leve (não outro botão) pro WhatsApp — substitui o antigo botão de
contorno "Falar no WhatsApp" ao lado do CTA principal (referência
aprovada em conversa: um botão só de propósito, sem competir com
"Montar meu Kit"). */
.h2-hero-whatsapp-link {
display: inline-flex;
align-items: center;
gap: 0.5em;
margin-top: 1.2em;
font-size: 0.9em;
font-weight: 600;
color: var(--secondary);
}
.h2-hero-whatsapp-link .h2-icone-whatsapp { width: 1.3em; height: 1.3em; }
.h2-hero-whatsapp-link:hover { text-decoration: underline; }
@media (orientation: portrait) {
/* Só mobile — o botão "Montar meu Kit" acima já ocupa a largura toda
nessa orientação (ver ".h2-hero-acoes" acima); centralizar o link
do WhatsApp alinha visualmente com ele em vez de ficar solto à
esquerda. */
.h2-hero-whatsapp-link { display: flex; width: 100%; justify-content: center; }
}
/* ================================================================
BOTÃO FLUTUANTE DE WHATSAPP — fixo no canto inferior direito, em toda
página pública (ver ".h2-header"/".h2-bottom-nav" acima pros outros
z-index fixos da página — 40 fica acima dos dois, 20/30). Cor
"--secondary" (não o verde oficial do WhatsApp) — mesmo critério já
usado no link do hero e no botão do cabeçalho, prioriza a paleta da
marca em vez da cor do app de terceiro.
================================================================ */
.h2-whatsapp-flutuante {
position: fixed;
right: 1.3em;
bottom: 2em;
z-index: 40;
width: 3.4em;
height: 3.4em;
border-radius: 50%;
background: var(--secondary);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0.4em 1.2em rgba(15, 42, 77, 0.3);
transition: transform 0.15s ease;
}
.h2-whatsapp-flutuante:hover { transform: scale(1.06); }
.h2-whatsapp-flutuante .h2-icone-whatsapp { width: 1.8em; height: 1.8em; }
@media (orientation: portrait) {
/* ".h2-bottom-nav" (min-height 4em + safe-area do notch) fica por cima
da parte de baixo da tela nessa orientação — sem esse ajuste o botão
flutuante ficava atrás dela, inacessível. */
.h2-whatsapp-flutuante { bottom: calc(4em + env(safe-area-inset-bottom, 0px) + 1em); }
}
/* ================================================================
SEÇÃO GENÉRICA (claro)
================================================================ */
/* Topo/embaixo padronizados em 1.5em — somado ao 1.5em da seção vizinha
(".h2-hero"/".h2-cta" seguem o mesmo valor), o vão visual entre o
conteúdo de uma seção e o da próxima fica sempre em 3em, sem depender
de qual das duas está em cima. */
.h2-secao {
max-width: 74em;
margin: 0 auto;
padding: 1.5em 2em;
}
.h2-secao-titulo {
font-size: 1.9em;
font-weight: 300;
color: var(--text);
line-height: 1.25;
}
.h2-secao-titulo strong { font-weight: 600; }
/* Texto secundário genérico (subtítulo de seção, nota de rodapé de
seção) — reaproveitado em vários pontos da página, não só na antiga
lista de "Áreas de atuação" que deu origem ao nome. */
.h2-item-desc { font-size: 0.85em; color: var(--text-muted); margin-top: 0.4em; line-height: 1.5; }
/* ================================================================
COMO FUNCIONA — trilha vertical: selo numerado + linha contínua à
esquerda, card (ícone + título + descrição) à direita — mesmo layout em
qualquer orientação (referência visual aprovada em conversa).
================================================================ */
.h2-passos { display: flex; flex-direction: column; gap: 1.2em; }
.h2-passo {
display: flex;
/* "stretch" (padrão) — a coluna do selo abaixo estica pra bater com a
altura do card ao lado, é isso que permite o selo ficar centralizado
na vertical (ver ".h2-passo-numero-coluna"). */
gap: 1.2em;
}
.h2-passo-numero-coluna {
position: relative;
width: 2.2em;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Uma linha por passo, atravessando por trás do selo — o selo (fundo
sólido) cobre o trecho onde passa por cima, dando a impressão de uma
linha contínua entrando e saindo do círculo. "-0.6em" em cima/embaixo é
metade do "gap" entre passos (1.2em) — estica a linha até o meio do
vão vizinho, emendando sem quebra visual com o passo anterior/seguinte.
Primeiro passo não tem nada acima pra emendar, último não tem nada
abaixo — por isso "top"/"bottom" viram "50%" (a linha para exatamente
no centro do próprio selo) só nesses dois casos. */
.h2-passo-linha {
position: absolute;
top: -0.6em;
bottom: -0.6em;
left: 50%;
width: 0.12em;
background: var(--border);
transform: translateX(-50%);
}
.h2-passo:first-child .h2-passo-linha { top: 50%; }
.h2-passo:last-child .h2-passo-linha { bottom: 50%; }
.h2-passo-numero {
position: relative;
z-index: 1;
width: 2.2em;
height: 2.2em;
border-radius: 50%;
background: var(--primary);
color: var(--white);
font-weight: 700;
font-size: 0.95em;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.5em 1.4em rgba(15, 42, 77, 0.08);
}
/* Sombra em vez de borda — mesmo padrão padronizado de ".h2-problema-card". */
.h2-passo-card {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 1.1em;
padding: 1.3em 0.9em;
border-radius: 0.8em;
box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.5em 1.4em rgba(15, 42, 77, 0.08);
}
/* Verde bem mais claro que "--success-light" — mesmo tom de "#F0FDF4" já
usado em ".h2-hero-info-box" — de propósito, não reaproveita a variável
(ela é usada em vários outros lugares do site). */
.h2-passo-icone {
width: 3.4em;
height: 3.4em;
border-radius: 50%;
background: #F0FDF4;
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.4em 1em rgba(15, 42, 77, 0.1);
}
.h2-passo-icone svg { width: 1.7em; height: 1.7em; }
.h2-passo-texto { min-width: 0; }
.h2-passo-titulo { font-weight: 700; color: var(--text); font-size: 0.92em; margin-bottom: 0.3em; hyphens: none; }
.h2-passo-desc { font-size: 0.82em; color: var(--text-muted); line-height: 1.5; }
/* ================================================================
QUAL PROBLEMA VOCÊ PRECISA RESOLVER — grade de cards, referência
visual aprovada em conversa (cabeçalho centralizado, card com borda
fina + ícone circular contornado, botão de contorno pro "outro"
no final). Substitui a lista horizontal de linha fina que existia
antes ("Áreas de atuação").
================================================================ */
.h2-problema-cabecalho { text-align: center; max-width: 36em; margin: 0 auto 3em; }
.h2-problema-grade {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1em;
margin-bottom: 1.5em;
}
@media (orientation: landscape) {
.h2-problema-grade { grid-template-columns: repeat(3, 1fr); }
}
/* Ícone circular preenchido no topo-esquerda, título+descrição abaixo
alinhados à esquerda, seta solta na borda direita (referência visual
aprovada em conversa — template de app de reclamação, card mais
informativo que a versão anterior, que era só ícone+título centralizado
sem descrição). */
/* TESTE — sombra em vez de borda, mesmo fundo branco do card e da seção
(diferente de ".pn-card" em painel.css, que flutua sobre um fundo
cinza-azulado). Duas sombras empilhadas: uma curta/apertada (nitidez na
borda) + uma difusa (sensação de profundidade) — sombra única em fundo
branco costuma ficar "borrada", sem definição. */
.h2-problema-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.7em;
border-radius: 1em;
padding: 1.5em 1.2em 1.3em;
position: relative;
box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.5em 1.4em rgba(15, 42, 77, 0.08);
}
/* Card volta a ser link (/caso) — mesmo tom de intensificação de sombra já
padronizado em ".h2-resultado:hover". */
.h2-problema-card:hover { box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.7em 1.8em rgba(15, 42, 77, 0.13); }
/* Círculo preenchido (mesmo princípio de ".h2-servico-icone") — 50% maior
que a 1ª versão (2.6em -> 3.9em), centralizado no card. Fundo "#F0FDF4"
— mesmo verde bem claro já usado em ".h2-problema-outro" (não
"--success-light", forte demais aqui). */
.h2-problema-icone {
width: 3.9em;
height: 3.9em;
border-radius: 50%;
background: #F0FDF4;
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.h2-problema-icone svg { width: 2.6em; height: 2.6em; }
.h2-problema-texto { display: flex; flex-direction: column; align-items: center; }
.h2-problema-titulo { font-weight: 800; color: var(--text); font-size: 0.85em; hyphens: none; }
.h2-problema-desc { font-size: 0.72em; color: var(--text-muted); line-height: 1.4; margin-top: 0.2em; }
.h2-problema-seta {
position: absolute;
top: 50%;
right: 1.1em;
transform: translateY(-50%);
color: var(--primary);
display: flex;
flex-shrink: 0;
}
.h2-problema-seta svg { width: 1.1em; height: 1.1em; }
/* Sombra em vez de borda — mesmo padrão padronizado de ".h2-problema-card". */
.h2-problema-outro {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
background: #F0FDF4;
border-radius: 0.8em;
padding: 1.1em 1.3em;
font-weight: 700;
font-size: 0.92em;
color: var(--text);
box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.5em 1.4em rgba(15, 42, 77, 0.08);
}
.h2-problema-outro svg { width: 1.3em; height: 1.3em; flex-shrink: 0; color: var(--primary); }
/* ================================================================
RESULTADOS POSSÍVEIS — pill horizontal (ícone + palavra lado a lado),
2 colunas no mobile — referência visual aprovada em conversa. Sombra
igual ao padrão padronizado de ".h2-problema-card".
================================================================ */
.h2-resultados {
/* Sem padding lateral aqui — este bloco vive dentro de .h2-secao, que
já aplica o recuo lateral (2em). Um segundo padding aqui duplicava
o espaço nas laterais. */
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1em;
}
@media (orientation: landscape) {
.h2-resultados { grid-template-columns: repeat(4, 1fr); }
}
.h2-resultado {
display: flex;
align-items: center;
gap: 0.7em;
padding: 1em 1.1em;
border-radius: 0.8em;
box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.5em 1.4em rgba(15, 42, 77, 0.08);
transition: box-shadow 0.15s ease;
}
.h2-resultado:hover { box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.7em 1.8em rgba(15, 42, 77, 0.13); }
/* Ícone de contorno solto — sem círculo/borda ao redor (mesmo padrão de
".h2-problema-icone"). */
.h2-resultado-icone { color: var(--primary); display: flex; flex-shrink: 0; }
.h2-resultado-icone svg { width: 1.5em; height: 1.5em; }
.h2-resultado-titulo { font-weight: 700; color: var(--text); font-size: 0.8em; line-height: 1.3; hyphens: none; }
/* "Ver mais resultados" — estilizado como um item da mesma família dos
pills acima (mesma sombra/arredondamento), só que ocupando a largura
toda, funcionando como botão em vez de link. */
.h2-resultado-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
width: 100%;
margin-top: 1em;
padding: 0.9em 1.1em;
border: none;
border-radius: 0.8em;
background: var(--white);
box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.5em 1.4em rgba(15, 42, 77, 0.08);
font: inherit;
font-weight: 700;
font-size: 0.8em;
color: var(--primary);
cursor: pointer;
transition: box-shadow 0.15s ease;
}
.h2-resultado-toggle:hover { box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.7em 1.8em rgba(15, 42, 77, 0.13); }
.h2-resultado-toggle svg { width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform 0.2s ease; }
.h2-resultado-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Bloco recolhido por padrão — max-height calculado via scrollHeight (ver
script no fim da página). "padding-bottom" aqui é de propósito: o "overflow: hidden"
corta exatamente na borda do container, e "max-height" é calculado
como "scrollHeight" (que já soma esse padding) — sem essa folga, a
sombra dos cards da última linha (".h2-resultado") ficava cortada
embaixo. Valor calculado, não chutado: a sombra maior de ".h2-resultado"
é "0 0.5em 1.4em" — ela se estende (offset + blur) até ~1.9em além da
borda da caixa, por isso o padding precisa ser pelo menos esse tanto
(arredondado pra 2em, com uma folguinha a mais). */
.h2-resultados-extra { max-height: 0; overflow: hidden; padding-bottom: 2em; transition: max-height 0.3s ease; }
.h2-resultados-extra .h2-resultados { margin-top: 1em; }
/* ================================================================
SERVIÇOS E PREÇOS — 3 cards centralizados, ícone + checklist + botão
fixado embaixo (flex column), card do meio sem preço numérico
("informado após a avaliação") e card em destaque com tag + borda
verde, referência visual aprovada em conversa.
================================================================ */
.h2-servicos {
/* Sem padding lateral aqui — este bloco vive dentro de .h2-secao, que
já aplica o recuo lateral (2em). Um segundo padding aqui duplicava
o espaço nas laterais. */
display: grid;
grid-template-columns: 1fr;
gap: 1.6em;
}
@media (orientation: landscape) {
.h2-servicos { grid-template-columns: repeat(3, 1fr); }
}
/* Sombra em vez de borda — mesmo padrão padronizado de ".h2-problema-card".
".h2-servico--destaque" abaixo mantém a borda verde própria (sinal
intencional de "plano recomendado", diferente da borda neutra que virou
sombra nos outros cards) — soma com a sombra, não substitui. */
.h2-servico {
border-radius: 0.8em;
padding: 2em 1.8em;
position: relative;
text-align: center;
display: flex;
flex-direction: column;
box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.5em 1.4em rgba(15, 42, 77, 0.08);
}
.h2-servico--destaque { border: 0.12em solid var(--primary); }
.h2-servico-tag {
position: absolute;
top: -0.85em;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--white);
font-size: 0.68em;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.35em 1em;
border-radius: 3em;
white-space: nowrap;
}
.h2-servico-icone {
width: 3.4em;
height: 3.4em;
border-radius: 50%;
background: var(--background);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.2em;
}
.h2-servico-icone svg { width: 1.6em; height: 1.6em; }
.h2-servico--destaque .h2-servico-icone { background: var(--success-light); }
.h2-servico-titulo { font-weight: 700; color: var(--text); font-size: 1.02em; margin-bottom: 0.6em; }
.h2-servico-preco { font-size: 1.6em; font-weight: 700; color: var(--primary); margin-bottom: 1.4em; }
.h2-servico-preco--texto { font-size: 0.85em; font-weight: 500; color: var(--text-muted); line-height: 1.4; }
.h2-servico-lista { display: flex; flex-direction: column; gap: 0.7em; text-align: left; margin-bottom: 1.6em; flex: 1; }
.h2-servico-item { display: flex; align-items: flex-start; gap: 0.6em; font-size: 0.85em; color: var(--text); }
.h2-servico-item svg { width: 1.1em; height: 1.1em; color: var(--primary); flex-shrink: 0; margin-top: 0.15em; }
.h2-servico-btn { justify-content: center; width: 100%; margin-top: auto; }
.h2-servicos-nota {
/* Sem padding lateral aqui — este bloco vive dentro de .h2-secao, que
já aplica o recuo lateral (2em). Um segundo padding aqui duplicava
o espaço nas laterais. */
margin-top: 1.6em;
font-size: 0.82em;
color: var(--text-muted);
text-align: center;
}
/* Só 1 card visível por ora (compra avulsa/assinatura comentados em
functions/index.js) — centraliza e limita a largura em vez de deixar o
card único esticado a 1/3 do grid de 3 colunas original. Precisa vir
depois da regra "@media (orientation: landscape) { .h2-servicos {...} }"
acima (mesma especificidade — quem vem depois no arquivo vence) pra
sobrescrever "repeat(3, 1fr)" de volta pra 1 coluna. */
.h2-servicos--solo { max-width: 26em; margin: 0 auto; }
@media (orientation: landscape) {
.h2-servicos--solo { grid-template-columns: 1fr; }
}
.h2-servico-nota { font-size: 0.78em; color: var(--text-muted); margin-top: 1em; line-height: 1.4; }
/* ================================================================
CTA FINAL
================================================================ */
.h2-cta {
max-width: 74em;
margin: 0 auto;
/* Mesmo padrão de 1.5em de ".h2-secao" — o cartão escuro (".h2-cta-card"
abaixo) fica DENTRO dessa seção, não ocupa a largura/cor da página
inteira; isso mantém o vão de 3em entre seções mesmo com um bloco de
cor diferente no meio. */
padding: 1.5em 2em;
}
/* Cartão escuro (referência visual aprovada em conversa) — "--h2-navy-claro"
já existia declarada no topo do arquivo, reservada pra "blocos de maior
impacto", mas nunca tinha sido usada até agora. Fluxo normal (título,
subtítulo, botão, cada um embaixo do outro) — a personagem é
position:absolute por CIMA de tudo (de propósito — ver
".h2-cta-personagem" abaixo), pode cobrir texto/botão onde sobrepõe;
os "
" no título/subtítulo são ajustados manualmente depois pra
desviar dela onde precisar. */
.h2-cta-card {
position: relative;
background: var(--h2-navy-claro);
border-radius: 1.2em;
padding: 1.4em 0.8em;
box-shadow: 0 0.05em 0.15em rgba(15, 42, 77, 0.08), 0 0.5em 1.4em rgba(15, 42, 77, 0.08);
overflow: hidden;
}
.h2-cta-titulo {
font-size: 1.5em;
font-weight: 700;
color: var(--white);
margin: 0 0 0.5em;
}
.h2-cta-titulo strong { font-weight: 700; color: var(--primary); }
.h2-cta-sub { font-size: 0.9em; color: rgba(255, 255, 255, 0.68); margin-bottom: 1.4em; }
/* Escopado só pro botão deste cartão — ".h2-btn--grande" é compartilhada
com o botão do hero, não pode mudar ali direto. Padding esquerdo/direito
reduzido pela metade (era 2em) e fonte menor (era 0.92em). */
.h2-cta-btn { padding-left: 1.25em; padding-right: 1.25em; font-size: 0.8em; }
/* Imagem já vem recortada/com fundo transparente (personagem-megafone.png)
— mostra a pose inteira sem cortar nada, o espaço vazio ao redor dela é
transparente e some sozinho contra o fundo navy do cartão. Fonte é
quadrada (1254x1254), por isso container quadrado (width = height)
evita distorcer. Vem depois no DOM e não tem z-index conflitante, então
fica naturalmente por cima do texto onde sobrepõe (pedido do usuário —
ajusta quebra de linha manual depois pra desviar dela). */
.h2-cta-personagem {
position: absolute;
right: -0.5em;
bottom: -0.1em;
width: 8.5em;
height: 8.5em;
object-fit: contain;
object-position: bottom right;
pointer-events: none;
}
@media (orientation: landscape) {
.h2-cta-personagem { width: 11em; height: 11em; }
}
/* ================================================================
RODAPÉ — 4 colunas (marca/institucional/legal/contato) + faixa de
aviso legal embaixo, separada por linha fina.
================================================================ */
.h2-rodape {
border-top: 0.0625em solid var(--border);
/* Topo: mesmo padrão de 1.5em de ".h2-secao"/".h2-cta" (era 3em).
Embaixo (1.6em) não muda — é espaço interno do próprio rodapé, não
vão entre seções (não tem nada depois dele). */
padding: 1.5em 2em 1.6em;
}
/* Precisa vir depois da regra base acima (mesma especificidade — em
empate, quem vem depois no arquivo vence, então uma media query antes
da regra base seria ignorada). Folga extra pro rodapé não ficar
embaixo da .h2-bottom-nav, que é position:fixed só no mobile. */
@media (orientation: portrait) {
.h2-rodape { padding-bottom: 6em; }
}
.h2-rodape-topo {
max-width: 74em;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 2.4em;
padding-bottom: 2em;
}
@media (orientation: landscape) {
.h2-rodape-topo { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2em; }
}
/* Logo do Reclame Certo + logo da Aurora (quem produziu o sistema) lado a
lado, mesmo tamanho — economiza espaço vertical em vez de empilhar cada
logo com seu próprio texto embaixo. */
.h2-rodape-marca-logos { display: flex; align-items: center; gap: 1em; margin-bottom: 0.9em; }
.h2-rodape-marca-logo { height: 2em; width: auto; display: block; }
.h2-rodape-desc { font-size: 0.85em; color: var(--text-muted); line-height: 1.6; max-width: 22em; margin-bottom: 0.3em; }
.h2-rodape-desc-azul { color: var(--text); font-weight: 700; }
.h2-rodape-desc-verde { color: var(--primary); font-weight: 700; }
.h2-rodape-creditos-texto { font-size: 0.78em; color: var(--text-muted); margin-bottom: 0.9em; }
.h2-rodape-cnpj { font-size: 0.82em; color: var(--text-muted); }
.h2-rodape-coluna { display: flex; flex-direction: column; gap: 0.8em; }
.h2-rodape-coluna-titulo { font-weight: 700; color: var(--text); font-size: 0.9em; margin-bottom: 0.3em; }
.h2-rodape-coluna a { font-size: 0.85em; color: var(--text-muted); }
.h2-rodape-coluna a:hover { color: var(--primary); }
.h2-rodape-contato-item { display: flex; align-items: center; gap: 0.6em; font-size: 0.85em; color: var(--text-muted); }
.h2-rodape-contato-item svg { width: 1.1em; height: 1.1em; flex-shrink: 0; color: var(--primary); }
.h2-rodape-aviso {
max-width: 74em;
margin: 0 auto;
padding-top: 1.6em;
border-top: 0.0625em solid var(--border);
display: flex;
align-items: center;
gap: 0.6em;
font-size: 0.8em;
color: var(--text-muted);
}
.h2-rodape-aviso svg { width: 1.2em; height: 1.2em; flex-shrink: 0; color: var(--primary); }
/* ================================================================
PÁGINAS LEGAIS (termos de uso, política de privacidade) — mesmo
cabeçalho/rodapé da home (ver _include/layout-site.js), texto corrido
numa coluna mais estreita que o resto do site pra facilitar leitura de
texto longo.
================================================================ */
.h2-legal {
max-width: 46em;
margin: 0 auto;
/* Topo = altura do .h2-header (4em, fixed) + 1em de espaço, mesmo
padrão de .h2-hero. */
padding: 5em 2em 4em;
}
/* Precisa vir depois da regra base acima (mesma especificidade — em
empate, quem vem depois no arquivo vence). Folga extra pro conteúdo não
ficar embaixo da .h2-bottom-nav, só no mobile. */
@media (orientation: portrait) {
.h2-legal { padding-bottom: 8em; }
}
.h2-legal-titulo { margin-bottom: 0.3em; }
.h2-legal-atualizado { font-size: 0.82em; color: var(--text-muted); margin-bottom: 2.5em; }
.h2-legal h2 { font-family: 'Manrope', sans-serif; font-size: 1.25em; font-weight: 700; color: var(--text); margin: 2.2em 0 0.8em; }
.h2-legal h2:first-of-type { margin-top: 0; }
.h2-legal p { font-size: 0.94em; color: var(--text); line-height: 1.7; margin-bottom: 1em; }
.h2-legal ul { margin: 0 0 1.2em 1.3em; }
.h2-legal li { font-size: 0.94em; color: var(--text); line-height: 1.7; margin-bottom: 0.4em; }
.h2-legal strong { font-weight: 700; }
.h2-legal a { color: var(--primary); text-decoration: underline; }
/* ================================================================
TEMPLATE APROVADO (template-desktop.jpeg/template-mobile.png, raiz do
projeto) — blocos novos da home, adicionados sem remexer nos blocos
acima (ainda usados por outras páginas/versões). Paleta: --primary
(terracota) nos CTAs/preço/números, --secondary (verde-oliva) nos
títulos de seção/ícones/detalhe (ver theme.css e README.md, "Identidade
visual").
================================================================ */
/* --- Título do hero em duas cores (substitui o antigo ".h2-hero-titulo
strong", que só tinha uma cor de destaque) --- */
.h2-hero-titulo-destaque-secundario { color: var(--secondary); }
/* Fonte um pouco menor só nessa linha ("para a semana toda.") — no tamanho
cheio do título (ver ".h2-hero-titulo") ela quebrava em 2 linhas em vez
de 1, ficando desalinhada com "Almoço pronto" acima. "em" aqui é relativo
ao próprio ".h2-hero-titulo", então escala junto nos dois breakpoints
(mobile 2.9em / desktop 3.4em) sem precisar de valor fixo por tamanho de
tela. */
.h2-hero-titulo-destaque-primario { color: var(--primary); font-size: 0.8em; }
/* --- Texto "manuscrito" (aproximação sem fonte script própria — itálico
+ leve rotação; ver README.md "Identidade visual" se algum dia vendorizar
uma fonte manuscrita de verdade pra isso) --- */
.h2-manuscrito {
display: block;
font-family: 'Manrope', sans-serif;
font-style: italic;
font-weight: 700;
line-height: 1.25;
transform: rotate(-3deg);
}
/* --- Foto do hero: bloco de verdade, só no PORTRAIT (ver bloco HERO no
topo do arquivo pro porquê do landscape ficar de fora). Sangra até a
borda da tela (a seção não tem padding horizontal, ver ".h2-hero" acima;
".h2-hero-texto"/".h2-hero-selos" têm o próprio padding). Referência de
template aprovada em conversa: a foto não termina em aresta reta — some
gradualmente no fundo creme da seção em cima e embaixo (via "mask-image"
no próprio ![]()
, não um recorte reto), e a fileira de selos logo abaixo
sobrepõe essa parte "derretida" de baixo (margin-top negativo) — dá a
sensação de a foto "flutuar" no centro, com conteúdo por cima e por
baixo. "-webkit-mask-image" é obrigatório junto (não só "mask-image")
porque Safari/iOS (o navegador mais comum pra um site pensado como PWA
instalável) ainda exige o prefixo pra suportar mask em imagem. */
.h2-hero-foto-wrap {
margin-top: 1.2em;
}
@media (orientation: landscape) {
/* O fundo da própria seção (".h2-hero") já cobre o papel da foto nessa
orientação — este bloco fica reservado só pro portrait. */
.h2-hero-foto-wrap { display: none; }
}
.h2-hero-foto {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
/* "right center" — mesma lógica do "background-position: center right"
do desktop (ver ".h2-hero" abaixo): a imagem é a MESMA nos dois
(bg-hero.png, larga, ~5:2), só o recorte muda. Prato foi composto de
propósito na metade direita da foto (ver comentário no topo do
index.js), então cortar mantendo a direita funciona nos dois. */
object-position: right center;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%);
}
/* --- Badge flutuante: sobre a foto de fundo da seção (".h2-hero" tem
"position: relative", serve de âncora), só LANDSCAPE (ver comentário no
bloco HERO, topo do arquivo) — no portrait esse reforço vem pela fileira
".h2-hero-selos" logo abaixo (card "Pronto em poucos minutos"). Ancorado
no canto inferior direito, sobre a área da foto que fica visível sem
gradiente por cima (ver o "78%" no background-image de ".h2-hero"
acima).
Referência visual aprovada em conversa: NÃO é um cartão único — são duas
faixas coloridas empilhadas sem espaço entre si (".h2-hero-badge-
flutuante-linha--principal" vermelha em cima, "--secundaria" branca
embaixo, juntas formam uma pílula só via ".h2-hero-badge-flutuante-
textos") mais um círculo de ícone SOBREPOSTO por cima da emenda das
duas, saindo um pouco pra fora da borda esquerda. Por isso o ícone é
filho direto do wrapper (".h2-hero-badge-flutuante", que é quem tem
"position: absolute" de verdade) e não do bloco de texto — assim ele
fica livre pra encavalar em cima das duas faixas ao mesmo tempo, sem
ficar preso dentro do "overflow: hidden" que arredonda os cantos delas. */
.h2-hero-badge-flutuante { display: none; }
@media (orientation: landscape) {
.h2-hero-badge-flutuante {
display: block;
position: absolute;
right: 3em;
bottom: 4.5em;
/* "max-content" em vez de largura fixa — encolhe pro tamanho real
do texto (padding lateral bem menor agora, ver
".h2-hero-badge-flutuante-linha" abaixo), sem sobrar espaço
vazio à direita dentro da pílula. */
width: max-content;
}
}
.h2-hero-badge-flutuante-textos {
display: flex;
flex-direction: column;
border-radius: 1.2em;
overflow: hidden;
box-shadow: 0 0.4em 1.2em rgba(15, 42, 77, 0.22);
}
/* "white-space: nowrap" pra garantir 1 linha só (o wrapper com
"width: max-content" acima já cresce pro tamanho do texto, então nunca
precisa quebrar). Padding lateral reduzido pela metade (pedido em
conversa) — esquerdo só precisa cobrir a fatia do círculo que ainda fica
por cima do texto (~25%, ver ".h2-hero-badge-flutuante-icone" abaixo),
não o círculo inteiro. */
.h2-hero-badge-flutuante-linha { padding: 0.65em 0.55em 0.65em 1.3em; white-space: nowrap; }
.h2-hero-badge-flutuante-linha--principal { background: var(--primary); color: var(--white); font-weight: 700; font-size: 0.85em; }
.h2-hero-badge-flutuante-linha--secundaria { background: var(--white); color: var(--text-muted); font-size: 0.78em; }
/* Círculo do ícone — encavalado na emenda das duas faixas (ver comentário
acima). "top: 50%" + "translateY(-50%)" centraliza na altura total do
wrapper (que tem a altura das duas faixas juntas), não numa faixa só.
Fundo branco (não mais a cor primária) — o ícone herda "--primary" via
"currentColor" (ICONE_MICROONDAS_MONO_SVG, index.js) em vez do círculo
inteiro ser colorido. "left: -2.5em" deixa só ~25% do círculo (0.9em de
3.4em) por cima do texto — antes passava de 50% (pedido em conversa). */
.h2-hero-badge-flutuante-icone {
position: absolute;
left: -2.5em;
top: 50%;
transform: translateY(-50%);
width: 3.4em;
height: 3.4em;
border-radius: 50%;
background: var(--white);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0.3em 0.8em rgba(15, 42, 77, 0.25);
}
.h2-hero-badge-flutuante-icone svg { width: 2.2em; height: 2.2em; }
/* --- Selos: cartões de verdade (fundo branco próprio + sombra leve),
fileira única de 3 (ver comentário no bloco HERO, topo do arquivo) — só
PORTRAIT. No landscape quem cobre esse reforço visual é o
".h2-hero-badge-flutuante" logo abaixo, não cabem os dois. */
.h2-hero-selos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.7em;
/* Negativo de propósito — sobrepõe a parte "derretida" (mask-image) de
baixo da foto, ver comentário em ".h2-hero-foto-wrap" acima. */
margin-top: -3.4em;
padding: 0 2em;
position: relative;
}
@media (orientation: landscape) {
.h2-hero-selos { display: none; }
}
.h2-hero-selo {
background: var(--white);
border-radius: 1em;
padding: 1em 0.5em;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5em;
box-shadow: 0 0.3em 1em rgba(15, 42, 77, 0.08);
}
.h2-hero-selo-icone {
width: 2.4em;
height: 2.4em;
border-radius: 50%;
background: rgba(107, 122, 74, 0.12);
color: var(--secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.h2-hero-selo-icone svg { width: 1.7em; height: 1.7em; }
/* Suporte a "selo.imagem" (foto-ícone em vez de SVG) — nenhum item de
"selosHero" usa isso hoje (todos viraram SVG, ver index.js), mas o
branch continua no template pra quem precisar de um selo com foto no
futuro. Mesmo recorte redondo de ".h2-depoimento-avatar". */
.h2-hero-selo-icone img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* "hyphens: none" pra não quebrar palavra no meio ("pou-cos minutos") —
mesmo ajuste já feito em ".h2-etapa-titulo"/".h2-prato-titulo" etc.
(framework.css define "hyphens: auto" globalmente, bom pra título longo
quebrando linha, ruim em rótulo curto de card estreito). */
.h2-hero-selo-titulo { font-size: 0.74em; font-weight: 600; color: var(--text); line-height: 1.3; hyphens: none; }
/* --- Cabeçalho de seção alinhado à esquerda (modificador — o padrão
".h2-problema-cabecalho" centralizado continua existindo pra quem usa
sem este modificador) + título com a cor de destaque secundária, mais
encorpado que o peso 300 padrão do resto da página --- */
.h2-problema-cabecalho--esquerda { text-align: left; margin: 0 0 1.6em; max-width: none; }
.h2-secao-titulo--secundario { color: var(--secondary); font-weight: 700; }
/* --- Como funciona: etapas em linha (com seta entre elas) + foto lateral
só no desktop --- */
.h2-etapas-linha { display: flex; flex-direction: column; gap: 2em; }
@media (orientation: landscape) {
/* Grid 2 colunas (etapas | foto) em vez de flex-row — dá mais espaço
fixo pra foto (2ª coluna, 1fr) e não depende de "stretch" esticando
a foto pra bater com a altura variável da fileira de etapas. */
.h2-etapas-linha { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 3em; }
}
/* Landscape: fileira horizontal, 4 colunas iguais + seta entre elas
(visual "trilha"). Portrait: lista vertical de cards (cada etapa vira
uma linha própria, com sombra/fundo — mesma linguagem visual dos cards
de prato/depoimento) em vez de tentar encolher a fileira horizontal, que
quebrava em 2-3 colunas desalinhadas com setas soltas no meio. */
.h2-etapas { display: flex; flex-direction: column; gap: 0.9em; }
@media (orientation: landscape) {
/* Grid 2x2 fixo em vez de "flex-wrap" — o wrap dependia da largura
exata disponível pra decidir se cabiam 3 ou 4 por linha, e quando
não cabia a 4ª etapa "sobrava" sozinha numa segunda linha (bug real
visto em conversa). Grid sempre reserva 2 colunas iguais,
previsível em qualquer largura. */
.h2-etapas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.2em 1.5em; }
}
/* Borda sutil + sombra mais suave — mesmo padrão elevado já aplicado em
".h2-depoimento-card", pra consistência entre os cards do site. */
.h2-etapa {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
gap: 1em;
background: var(--white);
border: 0.0625em solid var(--border);
border-radius: 1em;
padding: 0.9em 1.1em;
box-shadow: 0 0.05em 0.15em rgba(46, 43, 34, 0.06), 0 0.5em 1.4em rgba(46, 43, 34, 0.07);
}
@media (orientation: landscape) {
/* No grid 2x2 cada célula já tem bastante largura própria — mantém a
mesma orientação em linha (ícone à esquerda, texto à esquerda) da
versão mobile, só tira o "card" (fundo/sombra/padding), que ficaria
repetitivo lado a lado num grid mais espaçoso. */
.h2-etapa {
background: none;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
align-items: flex-start;
}
}
/* Wrapper só do ícone+número — plataforma pro selo numerado "furar" o
canto do círculo do ícone (mesmo princípio de sobreposição já usado no
selo flutuante do hero), em vez do número solto acima do ícone como
antes. */
.h2-etapa-icone-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
/* "rgba(74, 107, 50, ...)" é var(--secondary) em rgba, na mesma cor do
ícone (era "#F3ECE1", um bege genérico sem relação com a paleta) —
opacidade baixa pra virar um tom claro em vez de sólido, mesmo padrão de
sombra/tom já usado nas outras cores fixas em rgba deste arquivo. */
.h2-etapa-icone {
width: 3.4em;
height: 3.4em;
border-radius: 50%;
background: rgba(74, 107, 50, 0.12);
color: var(--secondary);
display: flex;
align-items: center;
justify-content: center;
}
.h2-etapa-icone svg { width: 1.7em; height: 1.7em; }
.h2-etapa-numero {
position: absolute;
right: -0.2em;
bottom: -0.2em;
width: 1.75em;
height: 1.75em;
border-radius: 50%;
background: var(--primary);
color: var(--white);
font-weight: 700;
font-size: 0.76em;
display: flex;
align-items: center;
justify-content: center;
border: 0.15em solid var(--white);
}
@media (orientation: landscape) {
/* No desktop a etapa não tem fundo branco próprio (ver ".h2-etapa"
acima) — o anel do selo precisa bater com o fundo real por trás
(branco da seção), não com o branco do card que só existe no
mobile. Mesmo valor, só reafirmando a intenção aqui. */
.h2-etapa-numero { border-color: var(--white); }
}
.h2-etapa-texto { min-width: 0; }
.h2-etapa-titulo { font-weight: 700; color: var(--text); font-size: 0.84em; line-height: 1.3; hyphens: none; }
/* "hyphens: none" também na descrição (só o título tinha antes) — sem
isso, frase longa numa coluna estreita quebrava no meio da palavra
("equili-bradas"), herdando o "hyphens: auto" global do framework.css. */
.h2-etapa-desc { font-size: 0.74em; color: var(--text-muted); line-height: 1.4; margin-top: 0.2em; hyphens: none; }
/* Seta entre etapas — só faz sentido na trilha horizontal do desktop; no
mobile os cards empilhados já indicam a sequência sozinhos (não tem
"entre" pra colocar a seta numa lista vertical). */
/* Seta entre etapas removida (era só landscape) — num grid 2x2 ela não
representa direito a sequência (1→2 faz sentido com seta pra direita,
mas 2→3 desce de linha, onde uma seta horizontal não faz sentido) e,
como span solto no meio do grid, ainda bagunçava a contagem de células
de 2 colunas. A numeração (1-2-3-4) já basta pra indicar a ordem, mesmo
critério já usado na versão mobile. */
.h2-etapa-seta { display: none; }
/* Visível também no mobile agora (antes só aparecia no desktop) — no
portrait vira um banner de largura cheia com proporção própria
(aspect-ratio, já que ali ".h2-etapas-linha" é coluna, sem largura fixa
de flex-item pra herdar); no desktop volta a ser a coluna lateral de
largura fixa (flex: 0 0 16em) ao lado da trilha de etapas. */
.h2-etapas-foto {
position: relative;
border-radius: 1.2em;
overflow: hidden;
box-shadow: 0 1.5em 3em rgba(46, 43, 34, 0.15);
aspect-ratio: 16 / 10;
}
@media (orientation: landscape) {
/* Proporção própria (4:5, retrato) em vez de "auto" esticando pra
bater com a altura variável da fileira de etapas ao lado — ver nota
em ".h2-etapas-linha" (align-items: center) acima. */
/* ".h2-etapas-linha" virou grid (ver acima) — a foto ocupa a coluna
inteira (1fr, mais espaço que antes) e mantém a proporção pela
própria largura da coluna, não por uma largura fixa em "em". */
/* Mais larga que alta agora (era 4:5, retrato — ficou enorme numa
coluna larga de grid, muito mais alta que o bloco de 4 etapas ao
lado). 3:2 mantém a largura da coluna, encolhe a altura. */
.h2-etapas-foto { width: 100%; aspect-ratio: 3 / 2; }
}
.h2-etapas-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-etapas-manuscrito {
position: absolute;
top: 1.2em;
left: 1.2em;
color: var(--white);
font-size: 1.1em;
text-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.35);
}
/* Divisor decorativo (linha-ícone-linha) — fecha a seção "Como funciona"
embaixo da foto em vez de deixar a seção terminar "seca" ali. Usa o
mesmo ícone (ICONE_CARDAPIO_SVG, importado de layout-site.js — é o
mesmo do item "Cardápio" no menu inferior mobile) da CTA "Cardápio
completo" logo acima. O corpo do ícone usa "fill: currentColor" (pra
poder herdar a cor do texto no menu inferior mobile, ver comentário em
layout-site.js) — aqui fixamos "color: var(--primary)" pra manter a
mesma aparência vermelha de antes nesse contexto, que não tem estado
ativo/inativo como o menu. Linhas dos dois lados na mesma cor do ícone
(pedido em conversa), em vez do cinza neutro "--border" padrão. */
.h2-divisor { display: flex; align-items: center; gap: 1em; margin-top: 2.2em; }
.h2-divisor-linha { flex: 1; height: 0.0625em; background: var(--primary); }
.h2-divisor-icone { display: flex; flex-shrink: 0; color: var(--primary); }
.h2-divisor-icone svg { width: 2.25em; height: 2.25em; }
/* --- Cardápio da semana: lista de pratos (foto + preço) + faixa de CTA.
Redesenho em conversa — referência foi o card de prato de
"/kit/{id}/montar.js" (foto + preço numa linha), mas com uma diferença
de propósito importante: ESTA seção é só vitrine (a página não tem
carrinho, ver comentário em index.js, seção "cardapio"), então o
elemento clicável de cada linha é uma seta pra "/kit"
(".h2-prato-seta"), nunca um botão "+" de adicionar — um "+" aqui
sugeriria uma ação que essa tela não faz. */
.h2-prato-lista { display: flex; flex-direction: column; gap: 0.8em; }
@media (orientation: landscape) {
.h2-prato-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; }
}
/* Virou (link pro início do fluxo, mesmo destino dos outros CTAs da
página) — sem sublinhado porque senão herdaria estilo de link de texto
corrido. Hover com leve elevação (translateY + sombra mais forte) dá o
feedback de "isso é clicável". */
.h2-prato-card {
display: flex;
align-items: center;
gap: 1em;
background: var(--white);
border-radius: 1em;
padding: 0.7em;
color: inherit;
text-decoration: none;
box-shadow: 0 0.05em 0.15em rgba(46, 43, 34, 0.08), 0 0.5em 1.4em rgba(46, 43, 34, 0.08);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.h2-prato-card:hover {
transform: translateY(-0.2em);
box-shadow: 0 0.05em 0.15em rgba(46, 43, 34, 0.1), 0 1em 2em rgba(46, 43, 34, 0.16);
}
.h2-prato-foto { flex-shrink: 0; width: 5.2em; height: 5.2em; border-radius: 0.8em; overflow: hidden; }
.h2-prato-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-prato-info { flex: 1; min-width: 0; }
/* Etiqueta de categoria (Tradicional/Proteico/Vegetariano...) — antes
ficava sobreposta na foto (fundo escuro + blur); com a foto bem menor
nesse layout em linha, virou texto pequeno acima do título, mesma cor
de destaque secundário do resto da página. */
.h2-prato-tag { display: block; font-size: 0.62em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--secondary); margin-bottom: 0.2em; }
.h2-prato-titulo { font-weight: 700; color: var(--text); font-size: 0.85em; hyphens: none; margin-bottom: 0.15em; }
.h2-prato-desc { font-size: 0.72em; color: var(--text-muted); line-height: 1.35; margin-bottom: 0.3em; }
.h2-prato-preco { font-weight: 700; font-size: 0.8em; color: var(--primary); }
/* Seta em vez de "+" (ver comentário no topo do bloco) — círculo com fundo
translúcido na cor primária, mesmo princípio visual de destaque usado
no ícone do selo do hero (círculo colorido, ícone centralizado). */
.h2-prato-seta {
flex-shrink: 0;
width: 2.2em;
height: 2.2em;
border-radius: 50%;
background: rgba(225, 74, 37, 0.1);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
}
.h2-prato-seta svg { width: 1.1em; height: 1.1em; }
/* Faixa de CTA "cardápio completo" — fora da lista (não é mais mais um
item dentro da grade/lista, ver HTML em index.js), sempre uma faixa
horizontal só, tanto no mobile quanto no desktop. */
.h2-prato-cta {
display: flex;
align-items: center;
gap: 1em;
margin-top: 1em;
background: #FBEAE0;
border-radius: 1em;
padding: 1.1em 1.3em;
color: inherit;
text-decoration: none;
}
/* O ícone (ICONE_CARDAPIO_SVG, importado de layout-site.js — mesmo do
item "Cardápio" no menu inferior mobile) vem pronto com as próprias
cores/formato — este wrapper só controla o tamanho, sem desenhar
círculo/cor de fundo em CSS. O corpo do ícone usa "fill: currentColor"
(pra poder herdar a cor do texto no menu inferior mobile, ver comentário
em layout-site.js) — aqui fixamos "color: var(--primary)" pra manter a
mesma aparência vermelha de antes nesse contexto. */
.h2-prato-cta-icone {
width: 2.6em;
height: 2.6em;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
}
.h2-prato-cta-icone svg { width: 100%; height: 100%; }
.h2-prato-cta-texto { flex: 1; min-width: 0; }
.h2-prato-cta-titulo { font-weight: 700; color: var(--text); font-size: 0.88em; }
.h2-prato-cta-desc { font-size: 0.74em; color: var(--text-muted); line-height: 1.4; }
.h2-prato-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.55em 1.1em;
border-radius: 0.6em;
border: 0.0625em solid var(--primary);
color: var(--primary);
font-weight: 700;
font-size: 0.78em;
white-space: nowrap;
}
.h2-prato-cta-btn svg { width: 1.3em; height: 1.3em; stroke-width: 2.4; }
@media (orientation: portrait) {
/* Tela estreita não cabe ícone + título + descrição + botão numa linha
só — só a descrição some, sobra ícone + título + botão. */
.h2-prato-cta-desc { display: none; }
}
/* --- Kit 5 Almoços --- */
.h2-kit {
position: relative;
background: linear-gradient(155deg, #FCEFE6 0%, #FBEAE0 55%, #F7DFCE 100%);
border-radius: 1.2em;
padding: 1.8em 1.5em 1.5em;
display: flex;
flex-direction: column;
gap: 1.5em;
box-shadow: 0 0.05em 0.15em rgba(46, 43, 34, 0.06), 0 1.2em 2.4em rgba(46, 43, 34, 0.12);
}
@media (orientation: landscape) {
.h2-kit { flex-direction: row; align-items: center; padding: 1.8em 2.2em; }
}
/* Etiqueta no canto — mesmo princípio de ".h2-servico-tag" (herdado do
reclamecerto, nunca usado até agora neste projeto), só recolorido pra
paleta do Meu Almoço. Fica sobre a borda superior do card. */
.h2-kit-etiqueta {
position: absolute;
top: -0.8em;
left: 1.6em;
background: var(--primary);
color: var(--white);
font-size: 0.7em;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.4em 1.1em;
border-radius: 3em;
box-shadow: 0 0.3em 0.7em rgba(46, 43, 34, 0.22);
}
.h2-kit-foto {
position: relative;
flex-shrink: 0;
border-radius: 1em;
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: 0 0.6em 1.4em rgba(46, 43, 34, 0.16);
}
@media (orientation: landscape) {
/* "flex: 1" em vez de largura fixa — o conteúdo ao lado agora tem
"max-width: 24em" (ver ".h2-kit-conteudo"), então sobrava um vão
vazio à direita do painel com a largura fixa antiga (16em). Deixando
a foto crescer, ela absorve esse espaço sobrando em vez de deixá-lo
vazio. "min-width" evita ela encolher demais numa tela intermediária
(tablet), onde o conteúdo já ocupa quase toda a largura disponível. */
/* 4:3 (era 4:5, retrato) — com "flex: 1" deixando a foto crescer bem
larga, a proporção retrato virava uma foto enorme na vertical
também (altura = largura x 5/4). 4:3 é mais baixa pra mesma
largura. */
.h2-kit-foto { flex: 1; min-width: 16em; aspect-ratio: 4 / 3; }
}
.h2-kit-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-kit-conteudo { flex: 1; }
@media (orientation: landscape) {
/* Sem isso, o conteúdo esticava até a largura toda que sobrava do lado
da foto — como o texto/checklist não preenchia essa largura, ficava
um vão vazio grande antes de qualquer coisa que viesse depois (bug
real visto em conversa, com o preço "isolado" longe do resto). Com
max-width, o bloco todo (checklist + preço + botão) fica compacto e
coeso, do tamanho do próprio conteúdo. */
.h2-kit-conteudo { max-width: 24em; }
}
.h2-kit-titulo { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 2.25em; color: var(--primary); }
.h2-kit-sub { font-size: 0.85em; color: var(--text-muted); margin-top: 0.2em; margin-bottom: 1em; }
.h2-kit-lista { display: flex; flex-direction: column; gap: 0.7em; margin-bottom: 1.3em; }
.h2-kit-item { display: flex; align-items: center; gap: 0.7em; font-size: 0.85em; color: var(--text); }
/* Selo circular preenchido em vez do check solto de antes — mesma
linguagem visual do resto do site (círculo colorido com ícone dentro),
em vez de um traço isolado flutuando ao lado do texto. */
.h2-kit-item-check {
width: 1.3em;
height: 1.3em;
border-radius: 50%;
background: var(--check);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.h2-kit-item-check svg { width: 0.75em; height: 0.75em; }
/* Preço movido pra cima do botão (pedido em conversa) — antes ficava num
card à parte, isolado do lado direito do painel, longe do checklist e
do botão. Agora preço + botão formam um bloco só, na sequência natural
"o que vem no kit -> quanto custa -> confirmar". */
.h2-kit-preco-linha { margin-bottom: 0.9em; }
.h2-kit-preco-texto { display: flex; align-items: baseline; gap: 0.4em; flex-wrap: wrap; }
.h2-kit-preco-rotulo { font-size: 0.8em; color: var(--text-muted); }
.h2-kit-preco-valor { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 2.125em; color: var(--primary); line-height: 1.2; }
.h2-kit-preco-nota { font-size: 0.75em; color: var(--text-muted); margin-top: 0.1em; }
.h2-kit-btn { width: 100%; justify-content: center; }
@media (orientation: landscape) {
.h2-kit-btn { width: auto; }
}
/* Virou overlay em cima da foto do Kit — mesmo padrão de ".h2-hero-manuscrito"/
".h2-etapas-manuscrito" (branco + sombra de texto, pra ler em cima de
qualquer trecho da foto), em vez de texto solto no fim da linha, sem
nenhuma foto por perto pra "ancorar" ele visualmente. */
.h2-kit-manuscrito {
position: absolute;
bottom: 1.1em;
left: 1.1em;
color: var(--white);
font-size: 1.1em;
/* Mais forte que a sombra padrão de ".h2-hero-manuscrito"/
".h2-etapas-manuscrito" (que usam só 1 camada 0.1em/0.4em/0.35) —
essa foto (destaque2.png) tem um trecho mais claro (mesa de madeira)
bem embaixo à esquerda, exatamente onde o texto fica, então a sombra
simples não dava contraste suficiente (relatado em conversa). Duas
camadas: uma apertada (contorno) + uma mais espalhada (profundidade). */
text-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.55), 0 0.15em 0.5em rgba(0, 0, 0, 0.45);
}
/* --- Depoimentos --- */
.h2-depoimento-grade { display: grid; grid-template-columns: 1fr; gap: 1.2em; }
@media (orientation: landscape) {
.h2-depoimento-grade { grid-template-columns: repeat(3, 1fr); }
}
/* Antes o card não tinha "background" próprio — só sombra, então ficava
sem superfície visível contra o fundo creme da seção (mesma cor). Agora
com fundo branco + borda sutil, a sombra passa a demarcar um cartão de
verdade; "position: relative" é pra ancorar o selo de aspas
(".h2-depoimento-aspas") no canto. Hover com leve elevação, mesmo
padrão já usado em ".h2-prato-card". */
.h2-depoimento-card {
position: relative;
background: var(--white);
border: 0.0625em solid var(--border);
border-radius: 1em;
padding: 1.6em 1.4em 1.4em;
box-shadow: 0 0.05em 0.15em rgba(46, 43, 34, 0.06), 0 0.5em 1.4em rgba(46, 43, 34, 0.07);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.h2-depoimento-card:hover {
transform: translateY(-0.2em);
box-shadow: 0 0.05em 0.15em rgba(46, 43, 34, 0.08), 0 1em 2em rgba(46, 43, 34, 0.13);
}
/* Selo de aspas — fica no canto superior, atrás/acima do texto, em vez de
dentro da frase (era "aspas retas literais em volta do texto antes) —
opacidade baixa pra ficar decorativo, sem competir com o depoimento.
var(--secondary) em vez de var(--primary) — em opacidade baixa o
vermelho lavava pra um rosa claro (relatado em conversa), o verde não
tem esse problema. */
.h2-depoimento-aspas {
position: absolute;
top: 1.1em;
right: 1.2em;
color: var(--secondary);
opacity: 0.18;
}
.h2-depoimento-aspas svg { width: 2.4em; height: 2.4em; }
.h2-depoimento-topo { position: relative; display: flex; align-items: center; gap: 0.8em; margin-bottom: 0.9em; }
.h2-depoimento-avatar {
width: 2.8em;
height: 2.8em;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
/* Anel sutil na cor de marca em vez de a foto encostar direto no
fundo branco do card — mesmo espírito do selo do hero, só mais
discreto aqui. "rgba(74, 107, 50, ...)" é var(--secondary) em rgba
(box-shadow não aceita opacidade direto num var(), mesmo padrão já
usado nas outras sombras deste arquivo) — era var(--primary), mas em
opacidade baixa o vermelho lavava pra um rosa claro (relatado em
conversa); o verde não tem esse problema. */
box-shadow: 0 0 0 0.15em var(--white), 0 0 0 0.2em rgba(74, 107, 50, 0.3);
}
.h2-depoimento-nome { font-weight: 700; color: var(--text); font-size: 0.88em; }
/* Voltou pra "#F5A623" (pedido em conversa) — o dourado de rating é uma
convenção universal (5 estrelas amarelas), reconhecível mesmo fora da
paleta da marca; var(--primary) tinha ficado sem esse reconhecimento
imediato. */
.h2-depoimento-estrelas { display: flex; gap: 0.15em; color: #F5A623; margin-top: 0.2em; }
.h2-depoimento-estrelas svg { width: 0.9em; height: 0.9em; }
.h2-depoimento-texto { position: relative; font-size: 0.85em; color: var(--text-muted); line-height: 1.6; }