/* ==========================================================================
KR Assessoria Contábil — folha de estilo única
Paleta e tipografia extraídas do site atual em Wix.
Para trocar as fontes pelas originais da marca, mexa só em --fonte-titulo
e --fonte-texto, e no @font-face no topo deste arquivo.
========================================================================== */
/* --------------------------------------------------------------------------
1. FONTES
Mona Sans, a fonte escolhida pela KR, servida do próprio domínio em WOFF2:
sem pedido a servidor de terceiro e sem o pisca-pisca de trocar de fonte no
meio do carregamento. Quatro pesos fixos e a itálica variável.
Licença SIL Open Font License, sem pendência para uso comercial.
-------------------------------------------------------------------------- */
@font-face { font-family: "Mona Sans"; src: url("../fontes/mona-sans-200.woff2") format("woff2");
font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("../fontes/mona-sans-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("../fontes/mona-sans-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("../fontes/mona-sans-700.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("../fontes/mona-sans-italico.woff2") format("woff2");
font-weight: 200 900; font-stretch: 75% 125%; font-style: italic; font-display: swap; }
:root {
/* cores da marca, medidas no site atual */
--vermelho: #b91c33;
--vermelho-vivo: #d21d38;
--vermelho-escuro: #96162a;
--grafite: #414141;
--grafite-claro: #565656;
--preto: #111111;
--texto: #414141;
--texto-suave: #6b6b6b;
--texto-apagado: #999997;
--cinza-fundo: #e8e6e6;
--cinza-borda: #c7c7c7;
--branco: #ffffff;
--zap: #25d366;
--fonte-titulo: "Mona Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--fonte-texto: "Mona Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--largura: 1200px;
--gutter: 1.5rem; /* respiro lateral, único no site */
--pad-sec: clamp(3.5rem, 8vw, 6.5rem); /* ritmo vertical das seções */
--pad-sec-c: clamp(2.5rem, 5vw, 4rem);
--raio: 10px;
--raio-btn: 6px;
--sombra: 0 2px 6px rgba(17, 17, 17, .06), 0 18px 40px -28px rgba(17, 17, 17, .3);
--transicao: 180ms ease;
}
/* --------------------------------------------------------------------------
2. RESET
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
background: var(--branco);
color: var(--texto);
font-family: var(--fonte-texto);
font-size: 16px;
line-height: 1.72;
-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; border-radius: 3px; }
/* pular para o conteúdo — acessibilidade e leitores de tela */
.pular {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--vermelho); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--raio-btn) 0;
}
.pular:focus { left: 0; }
/* --------------------------------------------------------------------------
3. TIPOGRAFIA
-------------------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--fonte-titulo);
font-weight: 700;
line-height: 1.12;
letter-spacing: -.02em;
text-wrap: balance;
color: var(--preto);
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }
.sobretitulo {
font-family: var(--fonte-texto);
font-size: clamp(.85rem, 1.6vw, 1rem);
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--texto-apagado);
margin-bottom: .5rem;
}
.vermelho { color: var(--vermelho); }
.destaque { color: var(--vermelho); font-weight: 700; }
p + p { margin-top: 1rem; }
.chamada { font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--texto-suave); max-width: 62ch; }
/* --------------------------------------------------------------------------
4. ESTRUTURA
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--largura);
margin-inline: auto;
padding-inline: var(--gutter);
}
.secao { padding-block: var(--pad-sec); }
.secao--compacta { padding-block: var(--pad-sec-c); }
.secao--cinza { background: var(--cinza-fundo); }
.secao--escura { background: var(--grafite); color: #e9e9e9; }
.secao--escura h1, .secao--escura h2, .secao--escura h3, .secao--escura h4 { color: #fff; }
.secao--escura .chamada { color: #cfcfcf; }
.secao--vermelha { background: var(--vermelho); color: #fff; }
.secao--vermelha h1, .secao--vermelha h2, .secao--vermelha h3 { color: #fff; }
.duas-colunas {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.duas-colunas { grid-template-columns: 1fr 1fr; }
.duas-colunas--texto-maior { grid-template-columns: 1.15fr 1fr; }
.duas-colunas--inverte > :first-child { order: 2; }
}
/* --------------------------------------------------------------------------
5. BOTÕES
-------------------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
font-family: var(--fonte-titulo);
font-size: .92rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
padding: .95rem 1.6rem;
border: 2px solid transparent; border-radius: var(--raio-btn);
cursor: pointer; text-align: center;
transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--principal { background: var(--vermelho); color: #fff; }
.btn--principal:hover { background: var(--vermelho-escuro); }
.btn--secundario { background: var(--cinza-borda); color: var(--preto); }
.btn--secundario:hover { background: #b3b3b3; }
.btn--contorno { border-color: currentColor; color: var(--vermelho); background: transparent; }
.btn--contorno:hover { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.btn--claro { background: #fff; color: var(--vermelho); }
.btn--claro:hover { background: #f2f2f2; }
.btn--zap { background: var(--zap); color: #06301a; }
.btn--zap:hover { background: #1fb857; }
.btn--largo { width: 100%; }
.btn-grupo { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }
/* --------------------------------------------------------------------------
6. CABEÇALHO
-------------------------------------------------------------------------- */
.cabecalho {
position: sticky; top: 0; z-index: 100;
background: rgba(255, 255, 255, .97);
backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid #ededed;
}
.cabecalho__interno {
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
min-height: 84px;
}
.marca img, .marca svg { height: 52px; width: auto; }
.marca__texto { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.15rem; color: var(--vermelho); line-height: 1.1; }
.marca__texto small { display: block; font-family: var(--fonte-texto); font-weight: 400; font-size: .68rem; letter-spacing: .02em; color: var(--texto-suave); text-transform: none; }
.nav { display: none; }
@media (min-width: 1000px) { .nav { display: flex; align-items: center; gap: 2rem; } }
.nav__lista { display: flex; align-items: center; gap: 1.9rem; list-style: none; padding: 0; margin: 0; }
.nav__link {
font-size: .82rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
color: var(--texto); padding: .4rem 0; position: relative; transition: color var(--transicao);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--vermelho); }
.nav__link[aria-current="page"]::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--vermelho);
}
/* submenu de serviços */
.nav__item--tem-sub { position: relative; }
.nav__sub {
position: absolute; top: calc(100% + .55rem); left: 50%; transform: translateX(-50%);
min-width: 260px; background: #fff; border: 1px solid #e6e6e6; border-radius: var(--raio);
box-shadow: var(--sombra); padding: .5rem; list-style: none; margin: 0;
opacity: 0; visibility: hidden; transition: opacity var(--transicao), visibility var(--transicao);
}
.nav__item--tem-sub:hover .nav__sub,
.nav__item--tem-sub:focus-within .nav__sub { opacity: 1; visibility: visible; }
.nav__sub a {
display: block; padding: .6rem .8rem; border-radius: var(--raio-btn);
font-size: .85rem; letter-spacing: .02em; text-transform: none; color: var(--texto);
}
.nav__sub a:hover { background: var(--cinza-fundo); color: var(--vermelho); }
/* menu no celular */
.menu-btn {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
width: 46px; height: 46px; padding: 0 10px;
background: transparent; border: 1px solid var(--cinza-borda); border-radius: var(--raio-btn); cursor: pointer;
}
@media (min-width: 1000px) { .menu-btn { display: none; } }
.menu-btn span { display: block; height: 2px; background: var(--texto); border-radius: 2px; transition: transform var(--transicao), opacity var(--transicao); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-movel { display: none; border-top: 1px solid #ededed; background: #fff; }
.menu-movel[data-aberto="true"] { display: block; }
@media (min-width: 1000px) { .menu-movel { display: none !important; } }
.menu-movel ul { list-style: none; margin: 0; padding: .75rem 0 1.5rem; }
.menu-movel a {
display: block; padding: .85rem 0; border-bottom: 1px solid #f0f0f0;
font-size: .95rem; font-weight: 500;
}
.menu-movel a:hover { color: var(--vermelho); }
.menu-movel .sub a { padding-left: 1.1rem; font-size: .88rem; color: var(--texto-suave); }
.menu-movel .btn { margin-top: 1.1rem; }
/* --------------------------------------------------------------------------
7. HERO
-------------------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero h1 { margin-bottom: .3rem; }
.hero .chamada { margin-top: 1.1rem; }
/* A colagem do topo é uma arte só, já montada com as molduras vermelhas */
.hero__colagem img { width: 100%; height: auto; }
@media (min-width: 900px) { .hero__colagem { justify-self: end; max-width: 560px; } }
.hero__colagem figure:nth-child(2) img { aspect-ratio: 3 / 4; }
@media (prefers-reduced-motion: no-preference) {
.hero__colagem img { animation: kr-flutua 8s ease-in-out infinite; }
}
/* --------------------------------------------------------------------------
8. FAIXA DE SEGMENTOS
-------------------------------------------------------------------------- */
/* A arte dos segmentos vem pronta da identidade: cada bloco já traz o ícone
e o nome do segmento em branco. Aqui só cuidamos de como eles se arrumam. */
.faixa-segmentos { background: var(--vermelho); color: #fff; padding-block: 1.5rem; }
.faixa-segmentos__interno {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 1.1rem 2.25rem;
}
.faixa-segmentos__rotulo {
font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.1rem; line-height: 1.2; color: #fff;
}
.faixa-segmentos img { height: 46px; width: auto; flex: none; }
@media (max-width: 900px) {
.faixa-segmentos__interno { gap: 1rem 1.5rem; }
.faixa-segmentos img { height: 38px; }
}
@media (max-width: 560px) {
.faixa-segmentos__interno { justify-content: flex-start; }
.faixa-segmentos__rotulo { width: 100%; }
.faixa-segmentos img { height: 34px; }
}
/* --------------------------------------------------------------------------
9. CARTÕES DE SERVIÇO
-------------------------------------------------------------------------- */
.grade-servicos {
display: grid; gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: 2.75rem;
}
.cartao-servico {
display: flex; flex-direction: column; gap: .7rem;
padding: 1.75rem 1.5rem 1.6rem;
background: #fff; border: 1px solid #e9e9e9; border-radius: var(--raio);
box-shadow: var(--sombra);
transition: transform var(--transicao), border-color var(--transicao);
}
.cartao-servico:hover { transform: translateY(-3px); border-color: var(--vermelho); }
.cartao-servico__icone { width: 56px; height: 56px; }
.cartao-servico h3 { font-size: 1.12rem; }
.cartao-servico p { font-size: .93rem; color: var(--texto-suave); flex: 1; }
.cartao-servico__link {
font-family: var(--fonte-titulo); font-size: .8rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--vermelho);
display: inline-flex; align-items: center; gap: .4rem;
}
.cartao-servico__link::after { content: "→"; transition: transform var(--transicao); }
.cartao-servico:hover .cartao-servico__link::after { transform: translateX(3px); }
/* --------------------------------------------------------------------------
10. PÍLULAS DE BENEFÍCIO
-------------------------------------------------------------------------- */
/* Em fila livre, duas pílulas largas não cabiam lado a lado e sobravam
sozinhas na linha. Em duas colunas fixas o bloco fica com linhas regulares,
e justify-items:start mantém cada pílula com a largura do próprio texto. */
.pilulas {
display: grid; grid-template-columns: 1fr; justify-items: start;
gap: .7rem .9rem; margin-top: 1.75rem; padding: 0; list-style: none;
}
@media (min-width: 560px) { .pilulas { grid-template-columns: repeat(2, auto); justify-content: start; } }
.pilula {
border: 2px solid var(--vermelho); border-radius: 999px;
padding: .6rem 1.15rem; font-size: .9rem; font-weight: 600; line-height: 1.25;
color: var(--preto); background: #fff;
}
/* --------------------------------------------------------------------------
11. NÚMEROS / DIFERENCIAIS
-------------------------------------------------------------------------- */
.numeros { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; padding: 0; list-style: none; }
.numero {
background: var(--vermelho); color: #fff; border-radius: var(--raio);
padding: 1.05rem 1.5rem; font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.3;
}
.numero strong { font-family: var(--fonte-titulo); font-weight: 700; }
/* --------------------------------------------------------------------------
13. SELOS ROIT
-------------------------------------------------------------------------- */
.selos { text-align: center; }
.selos .chamada { margin-inline: auto; margin-bottom: 2rem; }
.selos img { margin-inline: auto; width: min(420px, 100%); height: auto; }
/* --------------------------------------------------------------------------
14. BLOCO MISSÃO
-------------------------------------------------------------------------- */
.bloco-missao {
background: var(--cinza-fundo); border-radius: var(--raio);
padding: clamp(1.75rem, 4vw, 2.75rem);
display: grid; gap: 1.25rem 2.5rem; align-items: start;
grid-template-columns: 1fr;
}
@media (min-width: 800px) { .bloco-missao { grid-template-columns: minmax(200px, 320px) 1fr; } }
.bloco-missao h3 { color: var(--vermelho); display: flex; align-items: center; gap: 1rem; }
.bloco-missao h3::after {
content: ""; flex: 1; height: 2px; background: var(--vermelho); min-width: 30px;
}
@media (max-width: 799px) { .bloco-missao h3::after { display: none; } }
/* --------------------------------------------------------------------------
15. EMBEDS DE TERCEIROS (avaliações Google, Business Informativos)
-------------------------------------------------------------------------- */
.embed { width: 100%; }
.embed iframe { width: 100%; border: 0; display: block; }
/* o widget dos informativos tem largura fixa: em telas estreitas rola na horizontal
em vez de espremer o conteúdo */
.embed--rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.embed--rolavel iframe { min-width: 980px; }
.embed__aviso { font-size: .82rem; color: var(--texto-apagado); margin-top: .6rem; text-align: center; }
@media (min-width: 1020px) { .embed__aviso { display: none; } }
/* --------------------------------------------------------------------------
16. LISTAS DE ENTREGA E DÚVIDAS
-------------------------------------------------------------------------- */
.lista-entregas { list-style: none; padding: 0; margin-top: 1.75rem; display: grid; gap: .85rem; }
@media (min-width: 760px) { .lista-entregas { grid-template-columns: 1fr 1fr; gap: .85rem 2rem; } }
.lista-entregas li { position: relative; padding-left: 1.9rem; font-size: .97rem; }
.lista-entregas li::before {
content: ""; position: absolute; left: 0; top: .45rem;
width: 1.1rem; height: .6rem; border-left: 2.5px solid var(--vermelho); border-bottom: 2.5px solid var(--vermelho);
transform: rotate(-45deg);
}
.passos { list-style: none; padding: 0; margin-top: 2rem; display: grid; gap: 1.25rem; counter-reset: passo; }
@media (min-width: 860px) { .passos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.passos li { counter-increment: passo; padding-top: 2.75rem; position: relative; }
.passos li::before {
content: counter(passo, decimal-leading-zero);
position: absolute; top: 0; left: 0;
font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 700; color: var(--vermelho);
border-bottom: 2px solid var(--vermelho); padding-bottom: .3rem; padding-right: .5rem;
}
.passos h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.passos p { font-size: .93rem; color: var(--texto-suave); }
.duvidas { margin-top: 2rem; border-top: 1px solid var(--cinza-borda); }
.duvida { border-bottom: 1px solid var(--cinza-borda); }
.duvida summary {
cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.02rem; color: var(--preto);
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after {
content: "+"; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
font-size: 1.6rem; font-weight: 400; color: var(--vermelho); line-height: 1;
}
.duvida[open] summary::after { content: "−"; }
.duvida > div { padding-bottom: 1.25rem; color: var(--texto-suave); font-size: .96rem; max-width: 68ch; }
/* --------------------------------------------------------------------------
17. FORMULÁRIO DE QUALIFICAÇÃO
-------------------------------------------------------------------------- */
.form-qualifica {
background: #fff; border: 1px solid #e6e6e6; border-radius: var(--raio);
padding: clamp(1.5rem, 3.5vw, 2.25rem); box-shadow: var(--sombra);
display: flex; flex-direction: column; gap: 1.15rem;
}
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo label { font-size: .84rem; font-weight: 600; letter-spacing: .02em; color: var(--texto); }
.campo input, .campo select, .campo textarea {
font-family: var(--fonte-texto); font-size: .97rem; color: var(--texto);
padding: .75rem .9rem; background: #fff;
border: 1px solid var(--cinza-borda); border-radius: var(--raio-btn);
transition: border-color var(--transicao), box-shadow var(--transicao);
width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
outline: none; border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(185, 28, 51, .13);
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo__dica { font-size: .78rem; color: var(--texto-apagado); }
.campos-lado-a-lado { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .campos-lado-a-lado { grid-template-columns: 1fr 1fr; } }
.form-qualifica__rodape { font-size: .82rem; color: var(--texto-apagado); text-align: center; }
/* --------------------------------------------------------------------------
18. CARTÕES DE CONTATO
-------------------------------------------------------------------------- */
.grade-contato { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 2rem; }
.cartao-contato {
background: #fff; border: 1px solid #e9e9e9; border-radius: var(--raio); padding: 1.5rem;
display: flex; flex-direction: column; gap: .45rem;
}
.cartao-contato h3 { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--vermelho); }
.cartao-contato a { font-weight: 600; overflow-wrap: anywhere; }
.cartao-contato a:hover { color: var(--vermelho); }
.cartao-contato p { font-size: .95rem; color: var(--texto-suave); }
/* --------------------------------------------------------------------------
19. RODAPÉ
-------------------------------------------------------------------------- */
.rodape { background: var(--grafite); color: #d6d6d6; padding-block: 3.25rem 2rem; }
.rodape__grade { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .rodape__grade { grid-template-columns: 1.25fr 1fr 1.2fr 1.1fr; gap: 2.25rem; align-items: start; } }
.rodape img { height: 56px; width: auto; }
.rodape__frase { font-size: .88rem; color: #b9b9b9; margin-top: 1rem; max-width: 34ch; }
.rodape h4 { color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.rodape ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.rodape a:hover { color: #fff; }
.rodape__sociais { display: flex; gap: .75rem; margin-top: 1.25rem; }
.rodape__sociais a {
width: 40px; height: 40px; border-radius: 50%; background: var(--vermelho);
display: grid; place-items: center; transition: background var(--transicao);
}
.rodape__sociais a:hover { background: var(--vermelho-vivo); }
.rodape__sociais svg { width: 19px; height: 19px; fill: #fff; }
.rodape__legal {
margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid #545454;
font-size: .8rem; color: #a5a5a5;
display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
/* --------------------------------------------------------------------------
20. BOTÃO FLUTUANTE DE WHATSAPP
substitui o app pago de terceiro que o site usava
-------------------------------------------------------------------------- */
.zap-flutuante {
position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
width: 58px; height: 58px; border-radius: 50%;
background: var(--zap); display: grid; place-items: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
transition: transform var(--transicao);
}
.zap-flutuante:hover { transform: scale(1.06); }
.zap-flutuante svg { width: 31px; height: 31px; fill: #fff; }
/* --------------------------------------------------------------------------
21. UTILITÁRIOS
-------------------------------------------------------------------------- */
.so-leitor {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.centro { text-align: center; }
.centro .chamada { margin-inline: auto; }
.limite-texto { max-width: 65ch; }
.marcador-conteudo {
border: 2px dashed var(--cinza-borda); border-radius: var(--raio);
padding: 1.25rem 1.5rem; background: #fafafa; color: var(--texto-suave); font-size: .93rem;
}
.marcador-conteudo strong { color: var(--vermelho); }
/* ==========================================================================
22. ANIMAÇÕES DE ENTRADA
Cada bloco aparece quando entra na tela. Quem pediu para reduzir
movimento no sistema recebe tudo estático, sem perder nada do conteúdo.
========================================================================== */
/* Regra de ouro: o conteúdo nunca depende da animação para aparecer.
A opacidade zero só vale dentro de .anima, classe que um script no
adiciona quando confirma que dá para animar. Sem JavaScript, com JavaScript
quebrado ou com movimento reduzido, tudo nasce visível. */
.anima .revela {
opacity: 0;
transform: translateY(22px);
transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
will-change: opacity, transform;
}
.anima .revela.visivel { opacity: 1; transform: none; }
.anima .revela--atraso-1 { transition-delay: .09s; }
.anima .revela--atraso-2 { transition-delay: .18s; }
.anima .revela--atraso-3 { transition-delay: .27s; }
.anima .revela--atraso-4 { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
.revela { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ==========================================================================
23. RÓTULO E ASSINATURA DE SEÇÃO
========================================================================== */
.rotulo {
display: inline-flex; align-items: center; gap: .55rem;
font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
color: var(--texto-apagado); margin-bottom: .85rem;
}
.rotulo::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--vermelho); flex: none;
}
.secao--escura .rotulo, .secao--vermelha .rotulo { color: rgba(255,255,255,.72); }
.secao--escura .rotulo::before, .secao--vermelha .rotulo::before { background: #fff; }
/* traço curto sob o título, na cor da marca */
.assina { position: relative; padding-bottom: 1.1rem; }
.assina::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 54px; height: 3px; border-radius: 2px; background: var(--vermelho);
}
.centro .assina::after { left: 50%; transform: translateX(-50%); }
.secao--escura .assina::after { background: #fff; }
/* ==========================================================================
24. CABEÇALHO QUE FICA SÓLIDO AO ROLAR
========================================================================== */
.cabecalho { transition: box-shadow var(--transicao), background var(--transicao); }
.cabecalho[data-rolado="true"] {
background: #fff;
box-shadow: 0 1px 0 #e9e9e9, 0 8px 24px -20px rgba(17,17,17,.5);
}
.cabecalho__interno { transition: min-height var(--transicao); }
.cabecalho[data-rolado="true"] .cabecalho__interno { min-height: 70px; }
.marca img { transition: height var(--transicao); }
.cabecalho[data-rolado="true"] .marca img { height: 44px; }
/* ==========================================================================
25. FAIXA DE NÚMEROS
========================================================================== */
.faixa-numeros { background: var(--grafite); color: #fff; padding-block: clamp(2.25rem, 5vw, 3.25rem); }
.faixa-numeros__grade {
display: grid; gap: 1.75rem 1rem;
grid-template-columns: repeat(2, 1fr);
text-align: center;
}
@media (min-width: 860px) { .faixa-numeros__grade { grid-template-columns: repeat(4, 1fr); } }
.numero-grande {
display: flex; flex-direction: column; gap: .3rem; align-items: center;
position: relative;
}
@media (min-width: 860px) {
.numero-grande + .numero-grande::before {
content: ""; position: absolute; left: -.5rem; top: 12%; bottom: 12%;
width: 1px; background: rgba(255,255,255,.18);
}
}
.numero-grande b {
font-family: var(--fonte-titulo); font-weight: 700;
font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1;
color: #fff; font-variant-numeric: tabular-nums;
}
.numero-grande span {
font-size: .86rem; line-height: 1.35; color: #c6c6c6; max-width: 17ch;
}
/* ==========================================================================
26. BLOCO DE DOR
========================================================================== */
.grade-dor {
display: grid; gap: 1.15rem; margin-top: 2.5rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cartao-dor {
background: #fff; border: 1px solid #ececec; border-left: 4px solid var(--vermelho);
border-radius: var(--raio); padding: 1.5rem 1.4rem;
display: flex; flex-direction: column; gap: .6rem;
}
.cartao-dor h3 { font-size: 1.05rem; }
.cartao-dor p { font-size: .94rem; color: var(--texto-suave); }
.cartao-dor .resposta {
margin-top: .3rem; padding-top: .75rem; border-top: 1px dashed var(--cinza-borda);
font-size: .9rem; color: var(--vermelho); font-weight: 600;
}
/* ==========================================================================
27. COMO FUNCIONA
========================================================================== */
.trilha { display: grid; gap: 1.5rem; margin-top: 2.75rem; counter-reset: etapa; }
@media (min-width: 800px) { .trilha { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.etapa { counter-increment: etapa; position: relative; padding-top: 3.4rem; }
.etapa::before {
content: counter(etapa);
position: absolute; top: 0; left: 0;
width: 2.6rem; height: 2.6rem; border-radius: 50%;
background: var(--vermelho); color: #fff;
display: grid; place-items: center;
font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem;
}
@media (min-width: 800px) {
.etapa:not(:last-child)::after {
content: ""; position: absolute; top: 1.3rem; left: 3.1rem; right: -2rem;
height: 2px; background: repeating-linear-gradient(to right, var(--cinza-borda) 0 7px, transparent 7px 14px);
}
}
.etapa h3 { font-size: 1.06rem; margin-bottom: .4rem; }
.etapa p { font-size: .94rem; color: var(--texto-suave); }
/* --------------------------------------------------------------------------
28. INFOGRÁFICOS DE JORNADA E ORGANIZAÇÃO
A imagem apoia a leitura; os rótulos ficam em HTML para continuarem nítidos,
acessíveis e fáceis de atualizar.
-------------------------------------------------------------------------- */
.jornada__passos {
list-style: none; padding: 0; margin: 2rem 0 0;
display: grid; gap: 1.15rem;
}
.jornada__passo {
display: grid; grid-template-columns: 2.7rem 1fr; gap: .85rem;
position: relative; align-items: start;
}
.jornada__passo:not(:last-child)::after {
content: ""; position: absolute; left: 1.25rem; top: 2.55rem; bottom: -1.15rem;
width: 2px; background: linear-gradient(var(--vermelho), var(--cinza-borda));
}
.jornada__numero {
width: 2.5rem; height: 2.5rem; border-radius: 50%;
display: grid; place-items: center; position: relative; z-index: 1;
background: var(--vermelho); color: #fff;
font-family: var(--fonte-titulo); font-size: .78rem; font-weight: 700;
}
.jornada__passo h3 { font-size: 1rem; margin: .2rem 0 .25rem; }
.jornada__passo p { font-size: .9rem; color: var(--texto-suave); max-width: 42ch; }
.jornada__arte, .organizacao__arte {
display: grid; place-items: center; min-width: 0;
}
.infografico-arte__imagem {
display: block; width: min(100%, 560px); height: auto; object-fit: contain;
}
.organizacao__arte .infografico-arte__imagem { width: min(100%, 470px); }
@keyframes kr-flutua {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: no-preference) {
.infografico-arte__imagem { animation: kr-flutua 7s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
.hero__colagem img, .infografico-arte__imagem { animation: none; }
}
/* ==========================================================================
28. AVALIAÇÕES DO GOOGLE
========================================================================== */
.nota-google {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: .75rem 1.25rem;
background: #fff; border: 1px solid #e9e9e9; border-radius: var(--raio);
padding: 1.1rem 1.5rem; box-shadow: var(--sombra);
max-width: 640px; margin: 0 auto 2.5rem;
}
.nota-google__marca { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.nota-google__marca svg { width: 20px; height: 20px; }
.nota-google__valor {
font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.6rem; line-height: 1;
color: var(--preto); font-variant-numeric: tabular-nums;
}
.estrelas { display: inline-flex; gap: 2px; }
.estrelas { color: #f4b400; }
.nota-google__qtd { font-size: .88rem; color: var(--texto-apagado); }
.grade-avaliacoes {
display: grid; gap: 1.15rem;
grid-template-columns: 1fr;
}
.avaliacoes-controles, .avaliacoes-dica { display: none; }
@media (min-width: 700px) { .grade-avaliacoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .grade-avaliacoes { grid-template-columns: repeat(3, 1fr); } }
.avaliacao {
background: #fff; border: 1px solid #e9e9e9; border-radius: var(--raio);
padding: 1.4rem 1.35rem; display: flex; flex-direction: column; gap: .75rem;
text-align: left; transition: transform var(--transicao), box-shadow var(--transicao);
}
.avaliacao:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.avaliacao__topo { display: flex; align-items: center; gap: .75rem; }
.avaliacao__inicial {
width: 42px; height: 42px; border-radius: 50%; flex: none;
background: var(--vermelho); color: #fff;
display: grid; place-items: center;
font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem;
}
.avaliacao__nome { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.avaliacao__quando { font-size: .78rem; color: var(--texto-apagado); }
.avaliacao p { font-size: .94rem; color: var(--texto-suave); }
.avaliacao--longa { grid-row: span 1; }
.avaliacoes__rodape { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.avaliacoes__nota-fonte { font-size: .8rem; color: var(--texto-apagado); }
/* ==========================================================================
29. MAPA E LOCALIZAÇÃO
========================================================================== */
.mapa-bloco {
display: grid; gap: 0; overflow: hidden;
border: 1px solid #e6e6e6; border-radius: var(--raio);
background: #fff; box-shadow: var(--sombra);
grid-template-columns: 1fr;
}
@media (min-width: 900px) { .mapa-bloco { grid-template-columns: 1fr 1.25fr; } }
.mapa-ficha { padding: clamp(1.6rem, 3.5vw, 2.4rem); display: flex; flex-direction: column; gap: 1.1rem; }
.mapa-ficha h3 { font-size: 1.25rem; }
.mapa-linha { display: flex; gap: .85rem; align-items: flex-start; }
.mapa-linha svg { width: 20px; height: 20px; flex: none; margin-top: .18rem; fill: var(--vermelho); }
.mapa-linha div { font-size: .94rem; line-height: 1.55; }
.mapa-linha strong { display: block; font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-apagado); font-weight: 600; margin-bottom: .1rem; }
.mapa-linha a { font-weight: 600; }
.mapa-linha a:hover { color: var(--vermelho); }
/* Fundo por baixo do mapa: se o iframe demorar, falhar ou o visitante estiver
sem internet, o espaço continua parecendo parte do site e não um buraco. */
.mapa-tela {
position: relative; min-height: 320px;
background:
repeating-linear-gradient(45deg, rgba(185,28,51,.05) 0 12px, transparent 12px 24px),
var(--cinza-fundo);
display: grid; place-items: center;
}
.mapa-tela__reserva {
display: flex; flex-direction: column; align-items: center; gap: .5rem;
color: var(--texto-apagado); font-size: .88rem; text-align: center; padding: 1.5rem;
}
.mapa-tela__reserva svg { width: 34px; height: 34px; fill: var(--vermelho); opacity: .55; }
.mapa-tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.9); }
.mapa-tela__acao {
position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
display: flex; justify-content: center;
}
.mapa-tela__acao .btn { box-shadow: 0 6px 20px rgba(0,0,0,.25); }
@media (min-width: 900px) { .mapa-tela { min-height: 100%; } }
/* ==========================================================================
30. ONDA DIVISÓRIA
========================================================================== */
.onda { display: block; width: 100%; height: 42px; }
.onda path { fill: currentColor; }
/* ==========================================================================
31. BOTÃO FLUTUANTE MAIOR
========================================================================== */
.zap-flutuante {
width: 68px; height: 68px;
right: 1.25rem; bottom: 1.25rem;
box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
}
.zap-flutuante svg { width: 37px; height: 37px; }
.zap-flutuante::after {
content: ""; position: absolute; inset: 0; border-radius: 50%;
border: 2px solid var(--zap); animation: pulso 2.6s ease-out infinite;
}
@keyframes pulso {
0% { transform: scale(1); opacity: .7; }
70% { transform: scale(1.45); opacity: 0; }
100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .zap-flutuante::after { animation: none; opacity: 0; } }
@media (min-width: 700px) {
.zap-flutuante { width: 74px; height: 74px; }
.zap-flutuante svg { width: 40px; height: 40px; }
}
/* ==========================================================================
32. SELOS DE CONFIANÇA DO TOPO
========================================================================== */
.selos-topo {
display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--cinza-borda);
list-style: none; padding-left: 0;
}
@media (min-width: 620px) { .selos-topo { flex-wrap: nowrap; } }
.selos-topo li {
display: flex; align-items: center; gap: .5rem;
font-size: .87rem; font-weight: 600; color: var(--texto);
}
.selos-topo svg { width: 17px; height: 17px; fill: var(--vermelho); flex: none; }
/* ==========================================================================
33. FOTO DA SEÇÃO DE MISSÃO
A foto é de corpo inteiro e muito mais alta que o texto ao lado. Limitar a
altura mantém as duas colunas equilibradas em vez de uma esticar a seção.
========================================================================== */
/* A regra precisa alcançar o ![]()
dentro do : é ele que tem altura.
Sem isso a foto, que é bem mais alta que larga, estica a seção inteira. */
.foto-missao {
display: block;
position: relative;
isolation: isolate;
}
.foto-missao, .foto-missao img {
width: auto;
max-width: 100%;
max-height: 560px;
margin-inline: auto;
border-radius: 12px;
}
.foto-missao::after {
content: "";
position: absolute;
z-index: -1;
left: 17%;
bottom: 0;
width: 66%;
height: 2.5%;
border-radius: 50%;
background: rgba(31, 43, 48, .22);
filter: blur(13px);
transform: translateY(45%);
}
.foto-missao img {
position: relative;
z-index: 1;
filter: drop-shadow(0 9px 5px rgba(31, 43, 48, .13));
}
@media (max-width: 899px) { .foto-missao, .foto-missao img { max-height: 430px; } }
/* ==========================================================================
34. ÍCONES
Um tamanho por contexto, nunca solto. Todo ícone é decorativo: o sentido
está sempre no texto ao lado, então leitores de tela não leem nada aqui.
========================================================================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
width: 1.15em; height: 1.15em; flex: none;
display: inline-block; vertical-align: -.2em;
stroke-width: 2.25;
}
.ic--grande { width: 2.1rem; height: 2.1rem; stroke-width: 1.6; }
.ic--estrela { width: 1.05rem; height: 1.05rem; vertical-align: -.18em; stroke-width: 0; }
.ic-google { width: 20px; height: 20px; flex: none; }
/* ==========================================================================
35. SELOS DO TOPO, ALINHADOS EM COLUNAS
Três colunas iguais no computador. O ícone alinha com a primeira linha do
texto, não com o centro do bloco, para a fila ficar reta mesmo quando um
dos rótulos quebra em duas linhas.
========================================================================== */
.selos-topo {
display: grid;
grid-template-columns: 1fr;
gap: .7rem 1.5rem;
margin-top: 2rem; padding: 1.5rem 0 0;
border-top: 1px solid var(--cinza-borda);
list-style: none;
}
.selos-topo li {
display: flex; align-items: flex-start; gap: .55rem;
font-size: .87rem; font-weight: 600; line-height: 1.4; color: var(--texto);
}
.selos-topo .ic { color: var(--vermelho); margin-top: .3em; }
/* três selos, três colunas: uma fila só, sem um item sobrando embaixo */
@media (min-width: 560px) { .selos-topo { grid-template-columns: repeat(3, auto); justify-content: start; } }
/* ==========================================================================
36. CARTÕES DE DOR
Ícone, título, texto e a resposta sempre encostada na base: numa fila de
três cartões, as três respostas ficam na mesma altura.
========================================================================== */
.cartao-dor { gap: .8rem; padding: 1.65rem 1.5rem; }
.cartao-dor__icone { color: var(--vermelho); display: block; line-height: 0; }
.cartao-dor h3 { font-size: 1.06rem; line-height: 1.25; }
.cartao-dor > p { font-size: .94rem; color: var(--texto-suave); }
.cartao-dor .resposta {
margin-top: auto; padding-top: .9rem;
border-top: 1px dashed var(--cinza-borda);
display: flex; align-items: flex-start; gap: .5rem;
font-size: .9rem; color: var(--vermelho); font-weight: 600; line-height: 1.45;
}
.cartao-dor .resposta .ic { margin-top: .28em; }
/* ==========================================================================
37. CHAMADA DO WHATSAPP
A única seção em vermelho cheio da página. Título grande, botão largo e a
marca do WhatsApp em marca d'água atrás: quem rola rápido para aqui.
========================================================================== */
.cta-zap {
position: relative; overflow: hidden;
background: linear-gradient(118deg, var(--vermelho-escuro) 0%, var(--vermelho) 45%, var(--vermelho-vivo) 100%);
color: #fff;
padding-block: clamp(3rem, 6.5vw, 4.75rem);
}
.cta-zap::before {
content: ""; position: absolute; right: -80px; top: 50%;
width: 340px; height: 340px; transform: translateY(-50%);
background: radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 68%);
pointer-events: none;
}
.cta-zap__interno {
position: relative; z-index: 1;
display: grid; gap: 1.5rem 2rem; align-items: center;
grid-template-columns: 1fr;
text-align: center; justify-items: center;
}
@media (min-width: 900px) {
.cta-zap__interno {
grid-template-columns: 1fr auto;
text-align: left; justify-items: start;
}
}
/* A marca fica acima do título, e não numa coluna ao lado, para o texto
começar na mesma linha vertical de todas as outras seções da página. */
.cta-zap__marca { display: block; line-height: 0; margin-bottom: 1rem; }
.cta-zap__marca svg { width: 46px; height: 46px; fill: #fff; opacity: .95; }
@media (min-width: 900px) { .cta-zap__marca svg { width: 52px; height: 52px; } }
.cta-zap__interno { justify-items: center; }
@media (min-width: 900px) { .cta-zap__texto { justify-self: start; } }
.cta-zap__texto h2 {
color: #fff; font-size: clamp(1.55rem, 3.4vw, 2.35rem); line-height: 1.12; margin-bottom: .5rem;
}
.cta-zap__texto p { color: rgba(255,255,255,.92); font-size: clamp(.98rem, 1.6vw, 1.1rem); max-width: 46ch; }
.cta-zap__acao { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
@media (min-width: 900px) { .cta-zap__acao { align-items: flex-end; } }
.cta-zap__nota { font-size: .8rem; color: rgba(255,255,255,.8); }
.btn--grande {
font-size: 1rem; padding: 1.15rem 2.15rem; border-radius: 8px;
box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
}
/* ==========================================================================
38. ALINHAMENTOS FINOS
========================================================================== */
/* o texto ao lado de uma imagem alinha pelo topo quando a imagem é alta */
.duas-colunas--topo { align-items: start; }
/* cartões de uma mesma fila terminam na mesma linha */
.grade-servicos > *, .grade-dor > *, .grade-avaliacoes > *, .grade-contato > * { height: 100%; }
/* tudo que é grade de cartão usa o mesmo respiro */
.grade-servicos, .grade-dor, .grade-avaliacoes, .grade-contato { gap: 1.25rem; }
/* o primeiro elemento de uma seção nunca carrega margem extra */
.secao > .container > :first-child { margin-top: 0; }
/* ==========================================================================
39. LISTAS COM MARCA DE CONFERIDO
========================================================================== */
.lista-check { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; gap: .65rem; }
.lista-check li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; line-height: 1.55; }
.lista-check .ic { color: var(--vermelho); margin-top: .32em; }
.secao--escura .lista-check .ic { color: #fff; }
/* a lista de exclusão usa o X, e num cinza discreto: ela informa, não vende */
.lista-check--nao .ic { color: var(--texto-apagado); stroke-width: 2.6; }
.lista-check--nao li { color: var(--texto-suave); }
/* ==========================================================================
40. CARTÕES DE DADO
Números duros de uma obrigação: limite, prazo, código, valor. Ficam sobre
o fundo escuro, onde não competem com o texto corrido.
========================================================================== */
.fatos {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.fato {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--raio);
padding: 1.35rem 1.25rem;
display: flex; flex-direction: column; gap: .45rem;
}
.fato__valor {
font-family: var(--fonte-titulo); font-weight: 700;
font-size: clamp(1.35rem, 2.8vw, 1.75rem); line-height: 1.1; color: #fff;
font-variant-numeric: tabular-nums;
}
.fato__rotulo { font-size: .87rem; line-height: 1.45; color: #c6c6c6; }
.fatos__fonte {
margin-top: 1.5rem; font-size: .8rem; line-height: 1.55;
color: #a8a8a8; max-width: 70ch;
}
/* ==========================================================================
41. TRILHA VERTICAL
Os passos numerados quando ficam numa coluna estreita, ao lado de outro
bloco, em vez de ocuparem a largura toda.
========================================================================== */
.trilha-vertical {
list-style: none; padding: 0; margin-top: 1.25rem;
display: grid; gap: 1.1rem; counter-reset: etapa-v;
}
.trilha-vertical li {
counter-increment: etapa-v;
position: relative; padding-left: 2.75rem;
font-size: .93rem; line-height: 1.55; color: var(--texto-suave);
}
.trilha-vertical li::before {
content: counter(etapa-v);
position: absolute; left: 0; top: -.1rem;
width: 1.9rem; height: 1.9rem; border-radius: 50%;
background: var(--vermelho); color: #fff;
display: grid; place-items: center;
font-family: var(--fonte-titulo); font-weight: 700; font-size: .85rem;
}
.trilha-vertical li::after {
content: ""; position: absolute; left: .93rem; top: 2.1rem; bottom: -1.1rem;
width: 2px; background: var(--cinza-borda);
}
.trilha-vertical li:last-child::after { display: none; }
.trilha-vertical strong { display: block; color: var(--preto); font-weight: 600; margin-bottom: .1rem; }
/* ==========================================================================
42. VERSÃO PARA CELULAR
Mais de metade das visitas chega pelo telefone. Aqui o site fica mais
compacto de propósito: corpo um pouco menor, respiro menor entre seções e
cartões mais justos. A régua é caber mais informação por tela sem apertar
a leitura, e todo alvo de toque continua com pelo menos 44px de altura.
========================================================================== */
@media (max-width: 680px) {
:root {
--gutter: 1.15rem;
--pad-sec: 2.9rem;
--pad-sec-c: 2.1rem;
--raio: 9px;
}
body { font-size: 15px; line-height: 1.62; }
h1 { font-size: 1.92rem; line-height: 1.14; letter-spacing: -.025em; }
h2 { font-size: 1.5rem; line-height: 1.16; }
h3 { font-size: 1.05rem; }
.chamada { font-size: .97rem; }
.rotulo { font-size: .7rem; letter-spacing: .12em; margin-bottom: .6rem; }
.assina { padding-bottom: .85rem; }
.assina::after { width: 42px; height: 2px; }
.duas-colunas { gap: 2rem; }
.grade-servicos, .grade-dor, .grade-contato { gap: .8rem; }
/* segmentos: rótulo em uma linha e ícones em uma grade regular */
.faixa-segmentos { padding-block: 1.2rem; }
.faixa-segmentos__interno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem .65rem; }
.faixa-segmentos__rotulo { grid-column: 1 / -1; width: auto; font-size: 1rem; }
.faixa-segmentos img { height: 32px; max-width: 100%; justify-self: start; }
/* cartões de serviço: ícone ao lado do conteúdo, sem perder o respiro */
.cartao-servico { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .8rem; row-gap: .3rem; padding: 1rem; }
.cartao-servico__icone { grid-row: 1 / 4; align-self: start; margin-top: .15rem; }
.cartao-servico h3, .cartao-servico p, .cartao-servico__link { grid-column: 2; }
.cartao-servico p { margin: 0; }
/* depoimentos: leitura em um cartão por vez, com gesto nativo de arraste */
.avaliacoes-carrossel { margin-inline: calc(-1 * var(--gutter)); }
.grade-avaliacoes {
display: flex; overflow-x: auto; gap: .85rem; margin: 0;
padding: 0 var(--gutter) .55rem;
scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
overscroll-behavior-x: contain; scrollbar-width: none;
-webkit-overflow-scrolling: touch; touch-action: pan-x;
}
.grade-avaliacoes::-webkit-scrollbar { display: none; }
.grade-avaliacoes .avaliacao {
flex: 0 0 min(84vw, 330px); scroll-snap-align: start; min-height: 100%;
}
.avaliacoes-controles { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .95rem; }
.avaliacoes-controle {
width: 42px; height: 42px; padding: 0; border: 1px solid var(--cinza-borda);
border-radius: 50%; background: #fff; color: var(--vermelho); cursor: pointer;
display: grid; place-items: center; font-size: 1.25rem; line-height: 1;
}
.avaliacoes-controle:disabled { opacity: .35; cursor: not-allowed; }
.avaliacoes-status { min-width: 4.5rem; color: var(--texto-apagado); font-size: .78rem; text-align: center; }
.avaliacoes-dica { display: block; margin: .65rem 0 0; color: var(--texto-apagado); font-size: .78rem; }
/* cartões mais justos: cabe um a mais por tela */
.cartao-servico { padding: 1.15rem 1.1rem; gap: .5rem; }
.cartao-servico__icone { width: 44px; height: 44px; }
.cartao-servico h3 { font-size: 1rem; }
.cartao-servico p { font-size: .88rem; }
.cartao-dor { padding: 1.15rem 1.1rem; gap: .6rem; }
.cartao-dor h3 { font-size: 1rem; }
.cartao-dor > p, .cartao-dor .resposta { font-size: .88rem; }
.cartao-dor__icone .ic--grande { width: 1.7rem; height: 1.7rem; }
.avaliacao { padding: 1.1rem 1.05rem; gap: .55rem; }
.avaliacao p { font-size: .88rem; }
.avaliacao__inicial { width: 36px; height: 36px; font-size: .95rem; }
.cartao-contato { padding: 1.15rem 1.1rem; }
.fato { padding: 1.05rem 1rem; }
.fato__rotulo { font-size: .83rem; }
.lista-check li, .lista-entregas li, .trilha-vertical li { font-size: .9rem; }
.pilula { font-size: .84rem; padding: .5rem .95rem; }
/* botões: menores na tipografia, nunca no alvo de toque */
.btn { font-size: .84rem; padding: .85rem 1.2rem; min-height: 46px; }
.btn--grande { font-size: .92rem; padding: 1rem 1.5rem; min-height: 52px; }
.btn-grupo { gap: .6rem; margin-top: 1.4rem; }
/* no celular, cada ação ocupa sua própria linha e fica fácil de tocar */
.btn-grupo .btn { flex: 1 1 100%; width: 100%; }
/* topo: a colagem vem antes do texto só quando há espaço de sobra */
.hero { padding-block: 2rem 2.5rem; }
.hero__colagem { max-width: 340px; margin-inline: auto; }
.jornada__arte, .organizacao__arte { order: -1; margin-bottom: .5rem; }
.jornada__passos { margin-top: 1.5rem; gap: 1rem; }
.jornada__passo p { font-size: .86rem; }
.infografico-arte__imagem { width: min(100%, 360px); }
.organizacao__arte .infografico-arte__imagem { width: min(100%, 310px); }
.selos-topo { margin-top: 1.5rem; padding-top: 1.15rem; gap: .55rem; }
.selos-topo li { font-size: .83rem; }
.faixa-numeros { padding-block: 2rem; }
.faixa-numeros__grade { gap: 1.35rem .75rem; }
.numero-grande b { font-size: 1.75rem; }
.numero-grande span { font-size: .78rem; max-width: 15ch; }
.cta-zap { padding-block: 2.5rem; }
.cta-zap__marca svg { width: 40px; height: 40px; }
.cta-zap__texto h2 { font-size: 1.45rem; }
.cta-zap__texto p { font-size: .92rem; }
.duvida summary { font-size: .95rem; padding: .95rem 2.2rem .95rem 0; }
.duvida > div { font-size: .9rem; padding-bottom: 1.05rem; }
.mapa-ficha { padding: 1.35rem 1.15rem; gap: .85rem; }
.mapa-linha div { font-size: .89rem; }
.mapa-tela { min-height: 260px; }
.rodape { padding-block: 2.5rem 1.5rem; }
.rodape__grade { gap: 1.85rem; }
.rodape__frase { font-size: .84rem; }
.rodape ul { gap: .5rem; font-size: .9rem; }
.rodape__legal { margin-top: 1.85rem; padding-top: 1.15rem; font-size: .75rem; }
/* o botão flutuante não pode cobrir o último botão da página */
body { padding-bottom: 0; }
.zap-flutuante { width: 58px; height: 58px; right: .9rem; bottom: .9rem; }
.zap-flutuante svg { width: 31px; height: 31px; }
}
/* telas bem estreitas: um pouco mais de folga lateral de volta */
@media (max-width: 360px) {
:root { --gutter: 1rem; }
h1 { font-size: 1.75rem; }
.btn-grupo .btn { flex: 1 1 100%; }
}
/* ==========================================================================
43. FICHA DA RESPONSÁVEL TÉCNICA
Num escritório de contabilidade, o registro no CRC é o que autoriza assinar
balanço e declaração. Mostrar nome e número é sinal de confiança, então o
bloco tem cara de credencial: foto recortada, nome grande e o registro
destacado numa etiqueta.
========================================================================== */
.ficha-responsavel {
display: grid; gap: 1.5rem 2.5rem; align-items: center;
grid-template-columns: 1fr;
background: #fff; border: 1px solid #e6e6e6; border-radius: var(--raio);
padding: clamp(1.5rem, 3.5vw, 2.5rem);
box-shadow: var(--sombra);
margin-top: 2rem;
}
@media (min-width: 760px) { .ficha-responsavel { grid-template-columns: minmax(180px, 240px) 1fr; } }
/* A foto é um recorte de fundo transparente. Enquadrada num retrato 3x4 com
fundo claro, ela vira uma ficha; solta, ficava um bloco cinza atrás dela. */
.ficha-responsavel__foto { display: block; justify-self: center; width: 100%; max-width: 240px; }
.ficha-responsavel__foto img {
width: 100%; height: auto;
aspect-ratio: 3 / 4;
object-fit: cover; object-position: 50% 12%;
border-radius: var(--raio);
background: linear-gradient(160deg, #f4f4f4 0%, #e6e6e6 100%);
}
.ficha-responsavel__texto { display: flex; flex-direction: column; gap: .5rem; }
.ficha-responsavel__texto h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.ficha-responsavel__cargo {
font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--texto-apagado);
}
.ficha-responsavel__crc {
display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
background: var(--vermelho); color: #fff;
padding: .4rem .85rem; border-radius: 999px;
font-size: .84rem; font-weight: 600; letter-spacing: .02em;
font-variant-numeric: tabular-nums;
margin-block: .3rem .5rem;
}
.ficha-responsavel__crc .ic { width: 1rem; height: 1rem; }
.ficha-responsavel__texto > p:not([class]) { font-size: .95rem; color: var(--texto-suave); }
/* ==========================================================================
44. PRINCÍPIOS
Missão, visão e jeito de trabalhar: três cartões de mesmo peso, em vez de
blocos empilhados de alturas diferentes.
========================================================================== */
.grade-principios {
display: grid; gap: 1.25rem; margin-top: 2.25rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.principio {
background: #fff; border: 1px solid #e9e9e9; border-radius: var(--raio);
border-top: 4px solid var(--vermelho);
padding: 1.6rem 1.5rem;
display: flex; flex-direction: column; gap: .6rem; height: 100%;
}
.secao--cinza .principio { border-color: #dcdada; border-top-color: var(--vermelho); }
.principio h3 { font-size: 1.08rem; }
.principio p { font-size: .94rem; color: var(--texto-suave); }
@media (max-width: 680px) {
.ficha-responsavel { padding: 1.25rem 1.15rem; gap: 1.15rem; margin-top: 1.5rem; }
.ficha-responsavel__foto img { max-width: 190px; }
.ficha-responsavel__texto > p:not([class]) { font-size: .89rem; }
.grade-principios { gap: .8rem; margin-top: 1.5rem; }
.principio { padding: 1.2rem 1.1rem; }
.principio p { font-size: .88rem; }
}
.selo-categoria {
display: inline-flex; align-self: flex-start; align-items: center;
padding: .32rem .8rem; border-radius: 999px; background: rgba(185, 28, 51, .08);
color: var(--vermelho); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; line-height: 1.3; transition: background var(--transicao);
}
.selo-categoria:hover { background: rgba(185, 28, 51, .16); }
.blog-vazio {
padding: 2.5rem 1.5rem; border-radius: var(--raio); background: var(--cinza-fundo);
color: var(--texto-suave); text-align: center;
}
.blog-vazio a { color: var(--vermelho); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.paginacao__seta {
display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .6rem 1.1rem;
border: 1px solid var(--cinza-borda); border-radius: var(--raio-btn); font-size: .88rem; font-weight: 600;
transition: border-color var(--transicao), color var(--transicao);
}
.paginacao__seta:hover { border-color: var(--vermelho); color: var(--vermelho); }
.paginacao__seta .ic { width: 1.1rem; height: 1.1rem; }
.paginacao__atual { font-size: .86rem; color: var(--texto-apagado); }
.artigo { font-size: 1.04rem; line-height: 1.8; color: var(--preto); }
.artigo::after { content: ""; display: table; clear: both; }
.artigo > * + * { margin-top: 1.15em; }
.artigo p:empty { min-height: 1em; }
.artigo h2, .artigo h3, .artigo h4 { color: var(--vermelho); line-height: 1.25; margin-top: 1.9em; clear: both; }
.artigo h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); }
.artigo h3 { font-size: clamp(1.15rem, 2.4vw, 1.3rem); }
.artigo h4 { font-size: 1.06rem; }
.artigo > :first-child { margin-top: 0; }
.artigo h2 + *, .artigo h3 + *, .artigo h4 + * { margin-top: .7em; }
.artigo a { color: var(--vermelho); text-decoration: underline; text-underline-offset: 3px; }
.artigo a.btn { text-decoration: none; }
.artigo a.btn--zap { color: #06301a; }
.artigo strong, .artigo b { font-weight: 700; }
.artigo ul, .artigo ol { padding-left: 1.4rem; }
.artigo li + li { margin-top: .4em; }
.artigo li::marker { color: var(--vermelho); }
.artigo li > p + p { margin-top: .4em; }
.artigo blockquote {
padding: .4rem 0 .4rem 1.25rem; border-left: 4px solid var(--vermelho);
font-size: 1.1rem; font-style: italic; color: var(--grafite);
}
.artigo hr { border: 0; height: 1px; background: #e2e2e2; margin-block: 2.2em; }
.artigo mark { padding: 0 .15em; border-radius: 2px; background: #fde68a; color: inherit; }
.artigo mark[data-cor="vermelho"] { background: rgba(185, 28, 51, .15); }
.artigo mark[data-cor="verde"] { background: #d1fae5; }
.artigo mark[data-cor="cinza"] { background: var(--cinza-fundo); }
.artigo .tam-pequeno { font-size: .88em; }
.artigo .tam-grande { font-size: 1.18em; }
.artigo .tam-destaque { font-size: 1.4em; font-weight: 600; line-height: 1.4; }
.artigo .espaco-compacto { margin-top: .45em; }
.artigo .espaco-amplo { margin-top: 2.2em; }
.artigo table {
display: block; width: max-content; max-width: 100%; overflow-x: auto;
border-collapse: collapse; font-size: .92rem; line-height: 1.5;
}
.artigo th, .artigo td { padding: .6rem .8rem; border: 1px solid #e2e2e2; text-align: left; vertical-align: top; min-width: 110px; }
.artigo th { background: var(--cinza-fundo); color: var(--preto); font-weight: 600; }
.artigo td > p + p, .artigo th > p + p { margin-top: .4em; }
.artigo .imagem { margin-inline: 0; }
.artigo .imagem img { width: 100%; border-radius: 8px; }
.artigo .imagem figcaption, .artigo .carrossel__item figcaption, .artigo .video figcaption {
margin-top: .5rem; font-size: .82rem; line-height: 1.5; color: var(--texto-apagado); text-align: center;
}
.artigo .imagem--centro { max-width: 70%; margin-inline: auto; }
.artigo .imagem--esquerda { float: left; width: 45%; margin: .35em 1.5em 1em 0; }
.artigo .imagem--direita { float: right; width: 45%; margin: .35em 0 1em 1.5em; }
.artigo .video__quadro { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #000; }
.artigo .video__quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.artigo .video--instagram .video__quadro {
aspect-ratio: 4 / 5.8; max-width: 420px; margin-inline: auto; background: #fff; border: 1px solid #e2e2e2;
}
.carrossel {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
border-radius: 8px; scrollbar-width: none;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel__item { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.carrossel__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
.carrossel__controles { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .75rem; }
.carrossel__seta {
display: inline-grid; place-items: center; width: 44px; height: 44px;
border: 1px solid var(--cinza-borda); border-radius: 50%; background: #fff; cursor: pointer;
transition: border-color var(--transicao), color var(--transicao);
}
.carrossel__seta:hover:not(:disabled) { border-color: var(--vermelho); color: var(--vermelho); }
.carrossel__seta:disabled { opacity: .35; cursor: default; }
.carrossel__seta .ic { width: 1.2rem; height: 1.2rem; }
.carrossel__status { min-width: 4.5rem; text-align: center; font-size: .82rem; color: var(--texto-apagado); }
.aviso {
padding: 1.1rem 1.25rem; border-left: 4px solid var(--vermelho);
border-radius: 0 var(--raio) var(--raio) 0; background: #fdf2f4; color: var(--preto);
}
.aviso > * + * { margin-top: .5em; }
.aviso a { color: var(--vermelho); text-decoration: underline; text-underline-offset: 3px; }
.aviso__rotulo, .aviso[data-tipo]::before {
display: flex; align-items: center; gap: .5rem;
font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.aviso[data-tipo]::before { content: "Prazo"; margin-bottom: .35rem; }
.aviso__rotulo .ic { width: 1.05rem; height: 1.05rem; }
.aviso--atencao { border-color: #d97706; background: #fff7ed; }
.aviso--atencao .aviso__rotulo, .aviso--atencao::before { color: #b45309; }
.aviso[data-tipo="atencao"]::before { content: "Atenção"; }
.aviso--dica { border-color: #16a34a; background: #f0fdf4; }
.aviso--dica::before { color: #15803d; }
.aviso[data-tipo="dica"]::before { content: "Dica"; }
.aviso--prazo::before { color: var(--vermelho); }
.artigo .bloco-zap { text-align: center; }
.post__acoes {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
margin-top: 2.5rem; padding-block: 1.25rem; border-block: 1px solid #ececec;
}
.btn-curtir {
display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1.15rem;
border: 1px solid var(--cinza-borda); border-radius: 999px; background: #fff; cursor: pointer;
font-size: .9rem; font-weight: 600;
transition: border-color var(--transicao), color var(--transicao), background var(--transicao), transform var(--transicao);
}
.btn-curtir .ic { width: 1.15rem; height: 1.15rem; }
.btn-curtir:hover { border-color: var(--vermelho); color: var(--vermelho); }
.btn-curtir[aria-pressed="true"] { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-curtir:active { transform: scale(.96); }
.btn-curtir__rotulo { font-weight: 500; }
.post__autora-box {
display: grid; grid-template-columns: 84px 1fr; gap: 1.25rem; align-items: start;
margin-top: 2rem; padding: 1.5rem; border: 1px solid #ececec; border-radius: var(--raio); background: #fff;
}
.post__autora-foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top; }
.post__autora-rotulo { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-apagado); }
.post__autora-box p + p { margin-top: .15rem; }
.post__autora-nome { font-size: 1.05rem; font-weight: 700; color: var(--preto); }
.post__autora-cargo { font-size: .82rem; font-weight: 600; color: var(--vermelho); }
.post__autora-box .post__autora-bio { margin-top: .6rem; font-size: .9rem; color: var(--texto-suave); }
.post__autora-bio a { color: var(--vermelho); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.comentarios { margin-top: 3rem; padding-bottom: var(--pad-sec-c); }
.comentarios__titulo { display: flex; align-items: center; gap: .6rem; font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.comentarios__titulo .ic { width: 1.4rem; height: 1.4rem; color: var(--vermelho); }
.comentarios__titulo span { font-weight: 400; color: var(--texto-apagado); }
.comentarios__lista { list-style: none; padding: 0; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.comentarios__lista:empty { display: none; }
.comentario { padding: 1.15rem 1.25rem; border-radius: var(--raio); background: #f7f6f6; }
.comentario__topo { display: flex; align-items: center; gap: .75rem; }
.comentario__inicial {
display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
background: var(--vermelho); color: #fff; font-weight: 700;
}
.comentario__nome { display: block; font-size: .92rem; color: var(--preto); line-height: 1.3; }
.comentario__data { display: block; font-size: .76rem; color: var(--texto-apagado); line-height: 1.3; }
.comentario__texto { margin-top: .7rem; font-size: .93rem; color: var(--preto); overflow-wrap: anywhere; }
.comentario__resposta {
margin: .9rem 0 0 .5rem; padding: .85rem 1rem; border-left: 3px solid var(--vermelho);
border-radius: 0 8px 8px 0; background: #fff; font-size: .9rem; color: var(--preto);
}
.comentario__resposta-autor { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; color: var(--vermelho); }
.comentario__resposta-autor img { width: 22px; height: 22px; border-radius: 50%; }
.comentario__resposta-autor span { font-weight: 400; color: var(--texto-apagado); }
.comentario__resposta p + p { margin-top: .4rem; }
.comentarios__vazio { margin-top: 1rem; font-size: .92rem; color: var(--texto-suave); }
.comentarios__form {
display: flex; flex-direction: column; gap: 1rem; margin-top: 1.75rem;
padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid #e6e6e6; border-radius: var(--raio);
background: #fff; box-shadow: var(--sombra);
}
.comentarios__form p + p { margin-top: 0; }
.comentarios__form-titulo { font-size: 1.05rem; font-weight: 700; color: var(--preto); }
.comentarios__form .btn { align-self: flex-start; }
.comentarios__verificacao:empty { display: none; }
.campo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.comentarios__status { min-height: 1.3em; font-size: .88rem; }
.comentarios__status:empty { display: none; }
.comentarios__status[data-tipo="erro"] { color: var(--vermelho); }
.comentarios__status[data-tipo="ok"] { color: #15803d; }
@media (max-width: 699px) {
.artigo { font-size: 1rem; line-height: 1.75; }
.artigo .imagem--esquerda, .artigo .imagem--direita { float: none; width: 100%; margin: 0; }
.artigo * + .imagem--esquerda, .artigo * + .imagem--direita { margin-top: 1.15em; }
.artigo .imagem--centro { max-width: 100%; }
.post__autora-box { grid-template-columns: 60px 1fr; gap: 1rem; padding: 1.15rem; }
.post__autora-foto { width: 60px; height: 60px; }
.post__acoes { flex-direction: column; align-items: flex-start; }
.comentarios__form .btn { align-self: stretch; }
}
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .8rem; color: var(--texto-apagado); }
.migalhas a:hover { color: var(--vermelho); }
.migalhas .ic { width: .9rem; height: .9rem; }
.blog-topo { padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid #ececec; }
.blog-topo__titulo { margin-top: .8rem; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.15; color: var(--preto); overflow-wrap: break-word; }
.blog-topo__chamada { margin-top: .7rem; max-width: 68ch; font-size: .95rem; color: var(--texto-suave); }
.blog-lista { padding-block: clamp(1.75rem, 4vw, 2.75rem) var(--pad-sec-c); }
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.blog-layout > * { min-width: 0; }
@media (min-width: 960px) { .blog-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 2.75rem; } }
.busca-blog { position: relative; display: block; }
.busca-blog .ic { position: absolute; left: .85rem; top: 50%; width: 1.05rem; height: 1.05rem; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; }
.busca-blog input {
width: 100%; min-height: 46px; padding: .6rem .9rem .6rem 2.5rem;
border: 1px solid #bdbdbd; border-radius: 8px; background: #fff;
font: inherit; font-size: .92rem; color: var(--preto);
transition: border-color var(--transicao), box-shadow var(--transicao);
}
.busca-blog input::placeholder { color: var(--texto-apagado); }
.busca-blog input:focus { outline: none; border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(185, 28, 51, .13); }
.busca-blog--compacta { width: min(100%, 300px); }
.busca-blog--compacta input { min-height: 42px; }
.blog-categorias { margin-top: 1.75rem; }
.blog-categorias__titulo { font-size: .86rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--preto); }
.blog-categorias__titulo span { color: var(--vermelho); }
.blog-categorias ul { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-direction: column; }
.blog-categorias a {
display: block; padding: .45rem 0 .45rem .75rem; border-left: 2px solid transparent;
font-size: .92rem; color: var(--texto-suave); line-height: 1.35;
transition: color var(--transicao), border-color var(--transicao);
}
.blog-categorias a:hover { color: var(--vermelho); }
.blog-categorias a[aria-current="page"] { border-color: var(--vermelho); color: var(--vermelho); font-weight: 600; }
.blog-lateral__cta {
margin-top: 2rem; padding: 1.25rem; border-radius: var(--raio); background: #f7f6f6; text-align: center;
}
.blog-lateral__cta img { width: 72px; height: 72px; margin: 0 auto .8rem; border-radius: 50%; object-fit: cover; object-position: top; }
.blog-lateral__cta p { font-size: .86rem; color: var(--texto-suave); }
.blog-lateral__cta strong { display: block; margin-bottom: .2rem; color: var(--preto); }
.blog-lateral__cta .btn { width: 100%; margin-top: 1rem; }
@media (max-width: 959px) {
.blog-categorias { margin-top: 1rem; }
.blog-categorias__titulo { display: none; }
.blog-categorias ul {
flex-direction: row; gap: .5rem; margin: 0; padding-bottom: .3rem;
overflow-x: auto; scrollbar-width: none;
}
.blog-categorias ul::-webkit-scrollbar { display: none; }
.blog-categorias a {
padding: .5rem 1rem; border: 1px solid var(--cinza-borda); border-radius: 999px;
white-space: nowrap; font-size: .84rem;
}
.blog-categorias a[aria-current="page"] { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.blog-lateral__cta { display: none; }
}
.selo-categoria {
display: inline-flex; align-self: flex-start; align-items: center;
padding: .28rem .65rem; border: 1px solid rgba(185, 28, 51, .55); border-radius: 4px; background: #fff;
color: var(--vermelho); font-size: .68rem; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; line-height: 1.3; transition: background var(--transicao), color var(--transicao);
}
.selo-categoria:hover { background: var(--vermelho); color: #fff; }
.destaques { margin-bottom: 2.75rem; }
.destaques__rotulo { margin-bottom: .75rem; text-align: right; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--preto); }
.destaques__janela { position: relative; }
.destaques__trilho {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
border-radius: var(--raio);
}
.destaques__trilho::-webkit-scrollbar { display: none; }
.destaque {
flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, 1fr); scroll-snap-align: start;
background: #f7f6f6; overflow: hidden;
}
.destaque__capa { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cinza-fundo); }
.destaque__imagem { width: 100%; height: 100%; object-fit: cover; }
.destaque__fita {
position: absolute; left: 1rem; top: 1rem; padding: .3rem .8rem; border-radius: 4px;
background: var(--vermelho); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.destaque__corpo { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.25rem, 3vw, 2rem); }
.destaque__titulo { font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.25; color: var(--preto); }
.destaque__titulo a:hover { color: var(--vermelho); }
.destaque__resumo { font-size: .9rem; color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.destaque__meta { margin-top: auto; font-size: .78rem; color: var(--texto-apagado); }
.destaque p + p { margin-top: 0; }
@media (min-width: 760px) {
.destaque { grid-template-columns: 1.15fr 1fr; align-items: center; }
.destaque__corpo { justify-content: center; }
}
.destaques__seta {
position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px;
border: 1px solid #e2e2e2; border-radius: 50%; background: #fff; color: var(--preto); cursor: pointer;
box-shadow: var(--sombra); transform: translateY(-50%); transition: color var(--transicao), border-color var(--transicao);
}
.destaques__seta:hover { color: var(--vermelho); border-color: var(--vermelho); }
.destaques__seta .ic { width: 1.2rem; height: 1.2rem; }
.destaques__seta--anterior { left: .6rem; }
.destaques__seta--proximo { right: .6rem; }
@media (max-width: 759px) { .destaques__seta { top: calc((100vw - 2 * var(--gutter)) * 9 / 32); } }
.destaques__pontos { display: flex; justify-content: center; gap: .55rem; margin-top: 1rem; }
.destaques__pontos button {
width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #c9c9c9; cursor: pointer;
transition: background var(--transicao), transform var(--transicao);
}
.destaques__pontos button[aria-current="true"] { background: var(--vermelho); transform: scale(1.25); }
.blog-principal__titulo { margin-bottom: 1.25rem; font-size: 1.15rem; color: var(--preto); }
.grade-posts { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
.grade-posts--blog { margin-top: 0; }
@media (min-width: 640px) { .grade-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .relacionados .grade-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cartao-post { display: flex; flex-direction: column; overflow: hidden; background: #f7f6f6; border-radius: 4px; transition: box-shadow var(--transicao); }
.cartao-post:hover { box-shadow: var(--sombra); }
.cartao-post__topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.25rem; }
.cartao-post__topo time { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grafite); white-space: nowrap; }
.cartao-post__capa { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cinza-fundo); }
.cartao-post__imagem { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cartao-post:hover .cartao-post__imagem { transform: scale(1.03); }
.cartao-post__corpo { display: flex; flex-direction: column; gap: .7rem; flex: 1; padding: 1.25rem 1.25rem 1.4rem; }
.cartao-post__titulo { font-size: 1.15rem; line-height: 1.3; color: var(--preto); }
.cartao-post__titulo a:hover { color: var(--vermelho); }
.cartao-post__resumo {
font-size: .9rem; color: var(--texto-suave);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cartao-post__meta { margin-top: auto; padding-top: .3rem; font-size: .78rem; color: var(--texto-apagado); }
.cartao-post__meta strong { color: var(--grafite); }
.cartao-post p + p { margin-top: 0; }
.capa-vazia {
display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
padding: 1rem; text-align: center;
background: linear-gradient(135deg, var(--vermelho) 0%, var(--vermelho-escuro) 100%);
color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase;
}
.blog-recentes__topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.blog-recentes__topo .btn { margin-bottom: .2rem; }
.mini-posts { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-top: 1.75rem; }
.mini-post {
display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: .9rem; align-items: start;
padding: .6rem; border: 1px solid #ececec; border-radius: 8px; background: #fff;
transition: border-color var(--transicao), box-shadow var(--transicao);
}
.mini-post:hover { border-color: var(--vermelho); box-shadow: var(--sombra); }
.mini-post__capa { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 5px; background: var(--cinza-fundo); }
.mini-post__imagem { width: 100%; height: 100%; object-fit: cover; }
.mini-post__capa .capa-vazia { font-size: .6rem; padding: .3rem; }
.mini-post__corpo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.mini-post__categoria { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vermelho); }
.mini-post__titulo {
font-size: .86rem; font-weight: 600; line-height: 1.35; color: var(--preto);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mini-post__data { font-size: .72rem; color: var(--texto-apagado); }
@media (min-width: 700px) and (max-width: 1099px) { .mini-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
.mini-posts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mini-post { grid-template-columns: minmax(0, 1fr); gap: .7rem; padding: .5rem .5rem .8rem; }
.mini-post__corpo { padding-inline: .25rem; }
}
.post__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.5rem; padding-block: 1.25rem; }
.post__banner {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
border-radius: var(--raio); background: linear-gradient(120deg, var(--vermelho-escuro) 0%, var(--vermelho) 70%); color: #fff;
}
.post__banner-texto { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
.post__titulo { font-size: clamp(1.65rem, 3.6vw, 2.6rem); line-height: 1.15; color: #fff; overflow-wrap: break-word; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 0; margin-top: clamp(1.25rem, 3vw, 2rem); font-size: .86rem; }
.post__meta > * + * { margin-left: .9rem; padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .35); }
.post__meta small { display: block; font-size: .72rem; color: rgba(255, 255, 255, .78); }
.post__meta-autora { display: inline-flex; align-items: center; gap: .65rem; line-height: 1.35; }
.post__meta-autora img { width: 46px; height: 46px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.post__meta-autora strong, .post__meta-item { font-weight: 600; color: #fff; }
.post__meta-autora > span, .post__meta-item { display: flex; flex-direction: column; line-height: 1.35; }
.post__banner-arte { position: relative; display: flex; align-items: center; padding: 0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem); }
.post__banner-imagem { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55); }
.post__banner-arte--marca { display: grid; place-items: center; aspect-ratio: auto; padding: 0 2rem 2rem; }
.post__banner-arte--marca img { width: min(260px, 70%); opacity: .9; }
@media (min-width: 900px) {
.post__banner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 340px; }
.post__banner-arte { padding: 2.5rem 2.5rem 2.5rem 0; }
.post__banner-arte::before {
content: ""; position: absolute; right: -90px; top: -90px; width: 320px; height: 320px;
border-radius: 50%; background: rgba(255, 255, 255, .1);
}
.post__banner-arte--marca { border-radius: 0; padding: 2rem; }
.post__banner-arte--marca::before { display: none; }
}
@media (max-width: 899px) {
.post__banner { display: flex; flex-direction: column-reverse; }
.post__meta { flex-direction: column; align-items: flex-start; }
.post__meta > * + * { margin-left: 0; padding-left: 0; border-left: 0; }
}
.post__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: clamp(1.75rem, 4vw, 2.75rem) 0; }
.post__grade > * { min-width: 0; }
@media (min-width: 1100px) {
.post__grade { grid-template-columns: 210px minmax(0, 1fr) 230px; gap: 2.75rem; }
.post__grade--sem-indice { grid-template-columns: minmax(0, 1fr) 230px; }
.post__indice, .post__lateral > * { position: sticky; top: 96px; }
.post__lateral { align-self: stretch; }
.post__indice { align-self: start; }
}
@media (max-width: 1099px) {
.post__corpo, .post__indice { max-width: 760px; width: 100%; margin-inline: auto; }
.post__lateral { max-width: 760px; width: 100%; margin-inline: auto; }
}
.indice { border: 1px solid #e6e6e6; border-radius: 6px; background: #fff; }
.indice__titulo { padding: .9rem 1rem; font-size: .92rem; font-weight: 700; color: var(--preto); cursor: pointer; list-style: none; }
.indice__titulo::-webkit-details-marker { display: none; }
.indice__lista { list-style: none; padding: 0; margin: 0; counter-reset: indice; }
.indice__lista li { border-top: 1px solid #e6e6e6; }
.indice__lista a { display: block; padding: .8rem 1rem; font-size: .86rem; line-height: 1.4; color: var(--texto-suave); transition: color var(--transicao), background var(--transicao); }
.indice__lista a:hover, .indice__lista a[aria-current="true"] { color: var(--vermelho); background: #fdf2f4; }
@media (min-width: 1100px) {
.indice { border: 0; background: none; }
.indice__titulo { padding: 0 0 .9rem; cursor: default; pointer-events: none; }
.indice__lista { border: 1px solid #e6e6e6; border-radius: 4px; max-height: calc(100vh - 170px); overflow-y: auto; }
.indice__lista li:first-child { border-top: 0; }
}
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.compartilhar__botao {
display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
border: 0; border-radius: 50%; background: var(--grafite); color: #fff; cursor: pointer;
transition: transform var(--transicao), filter var(--transicao);
}
.compartilhar__botao:hover { transform: translateY(-2px); filter: brightness(1.1); }
.compartilhar__botao .ic { width: 1.05rem; height: 1.05rem; }
.compartilhar__botao--whatsapp { background: #25d366; }
.compartilhar__botao--linkedin { background: #0a66c2; }
.compartilhar__botao--facebook { background: #1877f2; }
.compartilhar--topo { margin-bottom: 1.25rem; }
.post__resumo { margin-bottom: 1.5rem; font-size: clamp(1.02rem, 1.9vw, 1.14rem); line-height: 1.6; color: var(--texto-suave); }
.post__aviso-antigo { margin-bottom: 2rem; }
.post__acoes-compartilhar { display: flex; align-items: center; gap: .75rem; font-size: .84rem; font-weight: 600; color: var(--texto-suave); }
.artigo h2[id] { scroll-margin-top: 96px; }
.feito-para-voce__rotulo { margin-bottom: .8rem; text-align: center; font-size: .92rem; font-weight: 700; color: var(--preto); }
.feito-para-voce__cartao {
display: flex; flex-direction: column; align-items: center; gap: .75rem; overflow: hidden;
padding: 0 1.1rem 1.25rem; border: 1px solid #e6e6e6; border-radius: 6px; background: #fff; text-align: center;
}
.feito-para-voce__cartao img {
width: calc(100% + 2.2rem); max-width: none; height: 150px; margin-bottom: .35rem;
object-fit: cover; object-position: top; background: linear-gradient(135deg, var(--vermelho), var(--vermelho-escuro));
}
.feito-para-voce__titulo { font-size: 1rem; font-weight: 800; line-height: 1.3; text-transform: uppercase; color: var(--vermelho); }
.feito-para-voce__cartao p { font-size: .84rem; color: var(--texto-suave); }
.feito-para-voce__cartao p + p { margin-top: 0; }
.feito-para-voce__cartao .btn { width: 100%; }
.feito-para-voce__link { font-size: .82rem; font-weight: 600; color: var(--vermelho); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1099px) {
.feito-para-voce__cartao { flex-direction: row; flex-wrap: wrap; justify-content: center; text-align: left; padding: 1.25rem; }
.feito-para-voce__cartao img { width: 84px; height: 84px; margin: 0; border-radius: 50%; }
.feito-para-voce__cartao > :not(img) { flex: 1 1 60%; }
.feito-para-voce__rotulo { text-align: left; }
}
@media (max-width: 699px) {
.post__acoes-compartilhar { flex-wrap: wrap; }
.busca-blog--compacta { width: 100%; }
}
.compartilhar__botao--copiado { background: #15803d; }
.compartilhar__botao--nativo { background: var(--vermelho); }
@media (min-width: 960px) {
.destaques__seta--anterior { left: -21px; }
.destaques__seta--proximo { right: -21px; }
}
/* ==========================================================================
60. VISUAL TRADICIONAL
Fotos reais em quadros padronizados no lugar de ilustrações e ícones.
Duas proporções só: 4:3 para cena e 4:5 para retrato. Cantos discretos e
nenhuma animação de flutuar, para o site transmitir sobriedade.
========================================================================== */
:root { --raio: 6px; --raio-btn: 4px; }
.quadro {
display: block; position: relative; overflow: hidden;
border-radius: var(--raio);
background: var(--cinza-fundo);
box-shadow: 0 1px 2px rgba(17, 17, 17, .08), 0 22px 44px -30px rgba(17, 17, 17, .45);
}
.quadro img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.quadro--retrato { max-width: 460px; margin-inline: auto; }
.quadro--retrato img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
@media (max-width: 899px) { .quadro--retrato { max-width: 380px; } }
.quadro--cartao { border-radius: 0; box-shadow: none; }
.quadro--cartao img { aspect-ratio: 16 / 10; }
/* topo das páginas internas: texto à esquerda, foto à direita */
.topo-foto { align-items: center; }
@media (max-width: 899px) { .topo-foto .quadro { margin-top: .5rem; } }
/* cartão de serviço: foto em cima, texto embaixo, mesma altura na fila */
.cartao-servico { padding: 0; gap: 0; overflow: hidden; }
.cartao-servico:hover { transform: none; }
.cartao-servico__texto {
display: flex; flex-direction: column; gap: .6rem; flex: 1;
padding: 1.35rem 1.4rem 1.45rem;
}
/* faixa vermelha dos segmentos: nomes em texto, cada um com a sua página */
.faixa-segmentos__lista {
display: flex; flex-wrap: wrap; align-items: center;
list-style: none; padding: 0; margin: 0; gap: .5rem 0;
}
.faixa-segmentos__lista li { display: flex; }
.faixa-segmentos__lista li + li::before {
content: ""; width: 1px; align-self: stretch; margin-inline: 1.35rem;
background: rgba(255, 255, 255, .45);
}
.faixa-segmentos__lista a {
font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.02rem; line-height: 1.3;
color: #fff; border-bottom: 1px solid transparent; transition: border-color var(--transicao);
}
.faixa-segmentos__lista a:hover { border-bottom-color: #fff; }
@media (max-width: 760px) {
.faixa-segmentos__lista { flex-direction: column; align-items: flex-start; gap: .55rem; }
.faixa-segmentos__lista li + li::before { display: none; }
.faixa-segmentos__lista a { font-size: .96rem; }
}
/* cartões dos segmentos */
.grade-segmentos {
display: grid; gap: 1.25rem; margin-top: 2.5rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.grade-segmentos--tres { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cartao-segmento {
display: flex; flex-direction: column; height: 100%; overflow: hidden;
background: #fff; border: 1px solid #e6e6e6; border-radius: var(--raio);
box-shadow: var(--sombra);
transition: border-color var(--transicao);
}
.cartao-segmento:hover { border-color: var(--vermelho); }
.cartao-segmento__texto {
display: flex; flex-direction: column; gap: .5rem; flex: 1;
padding: 1.25rem 1.35rem 1.4rem;
}
.cartao-segmento__texto strong { font-family: var(--fonte-titulo); font-size: 1.06rem; line-height: 1.3; color: var(--preto); }
.cartao-segmento__texto > span:not(.cartao-segmento__link) { font-size: .92rem; color: var(--texto-suave); flex: 1; }
.cartao-segmento__link {
margin-top: auto; font-family: var(--fonte-titulo); font-size: .78rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--vermelho);
}
.cartao-segmento__link::after { content: " →"; }
/* selos do topo: texto separado por fio, sem ícone */
.selos-topo li + li { border-left: 1px solid var(--cinza-borda); padding-left: 1.5rem; }
@media (max-width: 559px) {
.selos-topo li + li { border-left: 0; padding-left: 0; }
}
/* listas: um traço curto na cor da marca no lugar do tique */
.lista-check__marca {
flex: none; width: .8rem; height: 2px; margin-top: .78em;
background: var(--vermelho);
}
.secao--escura .lista-check__marca { background: #fff; }
.lista-check--nao .lista-check__marca { background: var(--texto-apagado); }
.topo-lista { font-size: 1.02rem; margin-top: 2rem; }
/* os desafios de cada segmento, numerados como num relatório */
.grade-desafios {
display: grid; gap: 1.25rem; margin-top: 2.25rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.desafio {
display: flex; flex-direction: column; gap: .55rem; height: 100%;
background: #fff; border: 1px solid #e2e0e0; border-top: 3px solid var(--vermelho);
border-radius: var(--raio); padding: 1.5rem 1.4rem;
}
.desafio__numero {
font-family: var(--fonte-titulo); font-weight: 700; font-size: .85rem;
letter-spacing: .08em; color: var(--vermelho); font-variant-numeric: tabular-nums;
}
.desafio h3 { font-size: 1.04rem; line-height: 1.3; }
.desafio p { font-size: .93rem; color: var(--texto-suave); }
/* ficha da responsável técnica sem foto: cara de credencial */
.ficha-responsavel--sem-foto { grid-template-columns: 1fr !important; border-left: 4px solid var(--vermelho); }
.ficha-responsavel--sem-foto .ficha-responsavel__crc { border-radius: var(--raio-btn); }
.ficha-responsavel__texto > p:not([class]) { max-width: 70ch; }
/* a faixa do WhatsApp sem a marca d'água */
.cta-zap::before { display: none; }
.pilula { border-radius: var(--raio-btn); }
.lista-entregas li { padding-left: 1.5rem; }
.lista-entregas li::before {
top: .8em; width: .8rem; height: 2px; border: 0; transform: none;
background: var(--vermelho);
}
/* ==========================================================================
61. DIAGRAMAÇÃO FINAL
Texto corrido justificado, submenus alinhados ao item do topo e, no
celular, letra mais contida e cartões dois a dois sempre que cabem.
========================================================================== */
:where(.chamada, .duas-colunas > div > p:not(.rotulo, .fatos__fonte, .cta-zap__nota), .artigo > p, .duvida > div,
.bloco-missao p, .ficha-responsavel__texto > p:not([class*="ficha-responsavel__"]), .texto-corrido p) {
text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
:where(.centro, .selos, .faixa-numeros, .avaliacoes__rodape,
.bloco-zap, .blog-lateral__cta, .blog-vazio, .feito-para-voce__cartao, .capa-vazia,
.form-qualifica__rodape, .embed__aviso, figcaption)
:is(p, li, span, div),
:where(.centro, .selos, .avaliacoes__rodape, .form-qualifica__rodape, .embed__aviso) {
text-align: center; hyphens: manual;
}
:where(main) :is(.pilulas, .selos-topo, .btn-grupo, .faixa-segmentos__lista, nav, .trilha-vertical, .passos) li,
:where(main) :is(.rotulo, .avaliacao__data, .cartao-post__meta) {
text-align: left; hyphens: manual;
}
/* submenus: abrem alinhados ao item, sem quebrar o nome do serviço */
.nav__sub { left: -.8rem; transform: none; min-width: 0; width: max-content; }
.nav__sub a { white-space: nowrap; }
@media (max-width: 680px) {
body { font-size: 14px; line-height: 1.6; }
h1 { font-size: 1.68rem; }
h2 { font-size: 1.32rem; }
h3 { font-size: .98rem; }
.chamada { font-size: .9rem; }
.rotulo { font-size: .66rem; }
/* cartões dois a dois */
.grade-servicos, .grade-segmentos, .grade-segmentos--tres, .grade-desafios,
.fatos, .grade-contato, .grade-posts {
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem;
}
.grade-servicos > :last-child:nth-child(odd),
.grade-segmentos > :last-child:nth-child(odd),
.grade-desafios > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.grade-contato > :nth-child(3) { grid-column: 1 / -1; }
/* em coluna estreita o justificado abre buracos: ali o texto fica à esquerda */
:is(.grade-servicos, .grade-segmentos, .grade-desafios, .fatos, .grade-contato, .grade-posts) :is(p, li, span) {
text-align: left; hyphens: manual;
}
.cartao-servico { display: flex; flex-direction: column; padding: 0; gap: 0; }
.cartao-servico .quadro { grid-column: auto; }
.cartao-servico__texto { padding: .8rem .8rem .95rem; gap: .4rem; }
.cartao-servico h3 { font-size: .86rem; line-height: 1.28; }
.cartao-servico h3 br { display: none; }
.cartao-servico p { font-size: .76rem; line-height: 1.5; }
.cartao-servico__link { font-size: .66rem; }
.cartao-segmento__texto { padding: .8rem .8rem .95rem; gap: .35rem; }
.cartao-segmento__texto strong { font-size: .86rem; }
.cartao-segmento__texto > span:not(.cartao-segmento__link) { font-size: .76rem; line-height: 1.5; }
.cartao-segmento__link { font-size: .66rem; }
.desafio { padding: .95rem .85rem; gap: .4rem; }
.desafio h3 { font-size: .86rem; }
.desafio p { font-size: .76rem; line-height: 1.5; }
.fato { padding: .85rem .8rem; }
.fato__valor { font-size: 1.2rem; }
.fato__rotulo { font-size: .74rem; }
.cartao-contato { padding: .95rem .85rem; }
.pilulas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; justify-items: stretch; }
.pilula { font-size: .72rem; padding: .5rem .55rem; text-align: center; display: flex; align-items: center; justify-content: center; }
.cartao-dor h3 { font-size: .94rem; }
.cartao-dor > p, .cartao-dor .resposta { font-size: .82rem; }
.avaliacao p { font-size: .82rem; }
.lista-check li, .lista-entregas li, .trilha-vertical li { font-size: .84rem; }
.duvida summary { font-size: .88rem; }
.duvida > div { font-size: .84rem; }
.btn { font-size: .8rem; }
.faixa-segmentos__lista { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .9rem; }
.faixa-segmentos__lista a { font-size: .86rem; }
/* rodapé: serviços e segmentos lado a lado */
.rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
.rodape__grade > :first-child, .rodape__grade > :last-child { grid-column: 1 / -1; }
.rodape ul { font-size: .8rem; }
.rodape h4 { font-size: .72rem; }
}
/* ==========================================================================
62. AUDITORIA DE ALINHAMENTO
Cada bloco de duas colunas começa e termina na mesma linha; listas e
cartões ocupam a largura toda da coluna; nada de texto curto justificado.
========================================================================== */
/* topo: texto e colagem centrados um no outro, colagem na altura do texto */
@media (min-width: 900px) {
.hero .duas-colunas { align-items: center; }
.hero__colagem { max-width: 500px; }
}
/* texto ao lado de foto: a foto acompanha a altura da coluna de texto */
@media (min-width: 900px) {
.duas-colunas:has(> div > .quadro:not(.quadro--retrato):only-child) { align-items: stretch; }
.duas-colunas > div:has(> .quadro:not(.quadro--retrato):only-child) { display: flex; }
.duas-colunas > div > .quadro:not(.quadro--retrato):only-child { flex: 1; min-height: 340px; }
.duas-colunas > div > .quadro:not(.quadro--retrato):only-child img { aspect-ratio: auto; height: 100%; }
}
/* pílulas: grade de colunas iguais, todas do mesmo tamanho */
.pilulas { grid-template-columns: 1fr; justify-items: stretch; gap: .75rem; }
@media (min-width: 560px) { .pilulas { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } }
.pilula {
display: flex; align-items: center; gap: .7rem; min-height: 3.1rem;
border-width: 1px; padding: .7rem 1rem; text-align: left;
transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.pilula::before { content: ""; flex: none; width: .7rem; height: 2px; background: var(--vermelho); }
.pilula:hover { background: var(--vermelho); color: #fff; }
.pilula:hover::before { background: #fff; }
/* passos da jornada: mesma largura do parágrafo acima */
.jornada__passo p { max-width: none; }
.jornada__passos { margin-top: 2rem; }
/* diferenciais: faixas de mesma altura, conteúdo centrado na vertical */
.numero { display: block; }
.numero strong { font-variant-numeric: tabular-nums; }
/* título com fio: o fio cresce quando o bloco aparece */
.anima .assina.revela::after { transform-origin: left; transform: scaleX(0); transition: transform .6s ease .2s; }
.anima .centro .assina.revela::after { transform-origin: center; transform: translateX(-50%) scaleX(0); }
.anima .assina.revela.visivel::after { transform: scaleX(1); }
.anima .centro .assina.revela.visivel::after { transform: translateX(-50%) scaleX(1); }
/* cartões: sobem um pouco e a foto aproxima, sem pular o layout */
.cartao-servico, .cartao-segmento, .desafio, .cartao-dor, .avaliacao, .cartao-post {
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cartao-servico .quadro img, .cartao-segmento .quadro img { transition: transform .6s ease; }
@media (hover: hover) {
.cartao-servico:hover, .cartao-segmento:hover, .desafio:hover, .cartao-dor:hover {
transform: translateY(-4px); box-shadow: 0 4px 10px rgba(17,17,17,.06), 0 26px 48px -30px rgba(17,17,17,.45);
}
.cartao-servico:hover .quadro img, .cartao-segmento:hover .quadro img { transform: scale(1.04); }
.cartao-servico:hover, .cartao-segmento:hover { border-color: var(--vermelho); }
}
.cartao-servico .quadro, .cartao-segmento .quadro { overflow: hidden; }
/* fotos soltas: entram com um leve zoom de saída */
.anima .revela > .quadro img { transform: scale(1.05); transition: transform 1.1s ease; }
.anima .revela.visivel > .quadro img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
.anima .assina.revela::after, .anima .centro .assina.revela::after { transform: none !important; transition: none !important; }
.anima .centro .assina.revela::after { transform: translateX(-50%) !important; }
.anima .revela > .quadro img, .cartao-servico .quadro img, .cartao-segmento .quadro img { transform: none !important; transition: none !important; }
.cartao-servico, .cartao-segmento, .desafio, .cartao-dor { transition: none !important; transform: none !important; }
}
/* depoimentos: cartão lê da esquerda, mesmo dentro de seção centralizada */
.centro .avaliacao, .centro .avaliacao :is(p, span, div, strong) { text-align: left; }
/* cinco cartões: três em cima e dois centralizados embaixo, todos do mesmo tamanho */
@media (min-width: 1000px) {
:is(.grade-servicos, .grade-contato):has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
:is(.grade-servicos, .grade-contato):has(> :nth-child(5):last-child) > * { grid-column: span 2; }
:is(.grade-servicos, .grade-contato):has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }
}
.ficha-responsavel__texto > p:not([class]) { max-width: none; }
@media (max-width: 680px) {
.pilulas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pilula { justify-content: flex-start; text-align: left; font-size: .74rem; min-height: 3.1rem; padding: .55rem .7rem; gap: .5rem; }
.pilula::before { width: .55rem; }
}
@media (max-width: 680px) {
.cartao-contato { font-size: .84rem; }
.cartao-contato :is(p, span, a, div) { font-size: inherit; }
}
/* tablet: colagem centrada, faixa de segmentos em grade, dores em três colunas */
@media (min-width: 681px) and (max-width: 899px) {
.hero__colagem { max-width: 440px; margin-inline: auto; }
}
@media (max-width: 1099px) {
.faixa-segmentos__interno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: start; gap: .8rem 1.5rem; }
.faixa-segmentos__rotulo { grid-column: 1 / -1; }
.faixa-segmentos__rotulo br { display: none; }
.faixa-segmentos__lista { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; width: 100%; }
.faixa-segmentos__lista li + li::before { display: none; }
}
@media (min-width: 681px) and (max-width: 1099px) {
.faixa-segmentos__lista { grid-template-columns: repeat(4, auto); justify-content: start; }
}
@media (min-width: 700px) { .grade-dor { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ==========================================================================
63. TOPO: ARTE COM SELO E CELULAR COM IMPACTO
========================================================================== */
.rotulo-curto { display: none; }
.hero__arte { position: relative; width: 100%; }
@media (min-width: 900px) { .hero__arte { justify-self: end; max-width: 500px; } }
.hero__arte .hero__colagem { max-width: none; margin: 0; }
.hero__selo {
position: absolute; left: -1.25rem; bottom: 1.5rem; z-index: 2;
display: flex; align-items: center; gap: .7rem; margin: 0;
padding: .55rem 1.1rem .55rem .55rem; text-align: left;
background: #fff; border: 1px solid #ececec; border-radius: 999px;
box-shadow: 0 10px 30px -12px rgba(17,17,17,.35);
}
.hero__selo img { width: 46px; height: 46px; flex: none; }
.hero__selo span { display: flex; flex-direction: column; font-size: .74rem; line-height: 1.3; color: var(--texto-suave); }
.hero__selo b { font-family: var(--fonte-titulo); font-size: .84rem; color: var(--preto); }
@media (prefers-reduced-motion: no-preference) {
.anima .hero__arte .hero__selo { opacity: 0; transform: translateY(12px); transition: opacity .6s ease .7s, transform .6s ease .7s; }
.anima .hero__arte.visivel .hero__selo { opacity: 1; transform: none; }
}
@media (max-width: 680px) {
/* a arte abre a tela; título e ações logo abaixo, tudo na primeira dobra */
.hero { padding-block: 1.25rem 2.25rem; background: linear-gradient(180deg, var(--cinza-fundo) 0, var(--cinza-fundo) 21.1rem, #fff 21.1rem); }
.hero .duas-colunas { display: flex; flex-direction: column; gap: 1.5rem; }
.hero__arte { order: -1; max-width: 300px; margin-inline: auto; }
.hero__selo { left: 50%; bottom: -.9rem; transform: translateX(-50%); white-space: nowrap; padding: .4rem .9rem .4rem .4rem; gap: .55rem; }
.hero__selo img { width: 36px; height: 36px; }
.hero__selo b { font-size: .76rem; }
.hero__selo span { font-size: .66rem; }
@media (prefers-reduced-motion: no-preference) {
.anima .hero__arte .hero__selo { transform: translate(-50%, 12px); }
.anima .hero__arte.visivel .hero__selo { transform: translateX(-50%); }
}
.hero .rotulo { margin-top: .5rem; }
.hero h1 { font-size: 1.72rem; line-height: 1.12; text-wrap: balance; }
.hero .chamada { font-size: .88rem; line-height: 1.6; margin-top: .75rem !important; }
.hero .btn-grupo { flex-wrap: nowrap; gap: .5rem; margin-top: 1.25rem; }
.hero .btn-grupo .btn { width: auto; }
.hero .btn-grupo .btn--principal { flex: 1 1 auto; }
.hero .btn-grupo .btn--secundario { flex: 0 0 auto; padding-inline: 1.1rem; }
.hero .rotulo-longo { display: none; }
.hero .rotulo-curto { display: inline; }
/* os selos do topo repetem a faixa de números logo abaixo */
.hero .selos-topo { display: none; }
/* segmentos: trilho de chips que desliza com o dedo */
.faixa-segmentos { padding-block: 1rem 1.1rem; }
.faixa-segmentos__interno { display: block; padding-inline: 0; }
.faixa-segmentos__rotulo { padding-inline: var(--gutter); font-size: .82rem; margin-bottom: .6rem; opacity: .9; }
.faixa-segmentos__lista {
display: flex !important; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: .5rem; overflow-x: auto;
padding: 0 var(--gutter) .1rem; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.faixa-segmentos__lista::-webkit-scrollbar { display: none; }
.faixa-segmentos__lista li { flex: none; scroll-snap-align: start; }
.faixa-segmentos__lista a {
display: inline-flex; align-items: center; min-height: 2.4rem; padding: .45rem 1rem;
border: 1px solid rgba(255,255,255,.55); border-radius: 999px; white-space: nowrap;
font-size: .8rem; transition: background var(--transicao), color var(--transicao);
}
.faixa-segmentos__lista a:active { background: #fff; color: var(--vermelho); }
}
@media (max-width: 374px) {
.hero .btn-grupo .btn { font-size: .74rem; padding-inline: .85rem; }
.hero h1 { font-size: 1.6rem; }
}
@media (min-width: 681px) and (max-width: 899px) {
.hero__arte { max-width: 420px; margin-inline: auto; }
}
.chamada, .hero .chamada { text-wrap: pretty; }
/* ícones discretos só nas frentes do pacote */
.pilula::before { content: none; }
.pilula__icone { flex: none; width: 1.15rem; height: 1.15rem; color: var(--vermelho); stroke-width: 1.6; transition: color var(--transicao); }
.pilula:hover .pilula__icone { color: #fff; }
@media (max-width: 680px) { .pilula__icone { width: 1rem; height: 1rem; } }
/* dores: a resposta da KR com rótulo próprio */
.cartao-dor .resposta b { color: var(--vermelho); font-weight: 700; }
.cartao-dor .resposta { display: block; }
.cartao-dor .resposta span { color: var(--texto); font-weight: 500; }
.nota-nao { margin-top: 1.25rem; font-size: .93rem; color: var(--texto-suave); }
/* para quem é / quando não indicamos: dois cartões da mesma altura */
.grade-quem { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grade-quem { grid-template-columns: 1fr 1fr; } }
.quem-cartao {
display: flex; flex-direction: column; height: 100%;
background: #fff; border: 1px solid #e2e0e0; border-top: 3px solid var(--vermelho);
border-radius: var(--raio); padding: clamp(1.4rem, 3vw, 2.25rem);
}
.quem-cartao h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 1.25rem; text-wrap: balance; }
.quem-cartao > .btn { margin-top: auto; align-self: flex-start; }
.quem-cartao ul { margin-bottom: 1.5rem; }
.quem-cartao--nao { background: transparent; border-top-color: var(--cinza-borda); }
.quem-cartao--nao .nota-nao { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--cinza-borda); }
.nota-nao a { display: inline-block; margin-top: .4rem; color: var(--vermelho); font-weight: 600; }
.nota-nao a::after { content: " →"; }
@media (max-width: 680px) { .quem-cartao > .btn { align-self: stretch; } }