s neutras (sem CSS próprio) — a grade de 3x2 original
continua exatamente igual, e .services-carousel__navigation fica
oculta. Nenhum texto, ícone ou ordem dos cards foi alterado; só a
apresentação em telas pequenas. Sem JavaScript, o scroll horizontal
nativo + scroll-snap já funcionam e todos os cards continuam
acessíveis e com opacity/scale normais (o estado "card atual" só é
aplicado depois que o JS marca .services-carousel.is-enhanced). */
.services-carousel__navigation { display: none; }
@media (max-width: 599px) {
/* full-bleed: ocupa a largura real do viewport, ignorando o padding
lateral do .container, para os cards poderem usar quase toda a
largura da tela — sem afetar eyebrow/título, que ficam fora deste
wrapper. */
.services-carousel {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.services-carousel__viewport {
display: block;
position: relative;
width: 100%;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-padding-inline: 18px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
touch-action: pan-x pan-y;
}
.services-carousel__viewport::-webkit-scrollbar { display: none; }
.cards-grid {
display: flex;
grid-template-columns: none;
gap: 14px;
width: max-content;
padding: 0 calc(18px + 12vw) 4px 18px;
}
.card {
flex: 0 0 min(84vw, 330px);
width: min(84vw, 330px);
min-height: 250px;
height: auto;
scroll-snap-align: start;
scroll-snap-stop: always;
opacity: 1;
scale: 1;
transition:
opacity 220ms ease,
scale 220ms ease,
border-color 220ms ease,
background-color 220ms ease,
box-shadow 220ms ease;
}
/* Estado "card atual": só depois do JS ligar o carrossel. Sem JS,
todos os cards permanecem com opacity:1 / scale:1 (regra acima). */
.services-carousel.is-enhanced .card { opacity: 0.72; scale: 0.98; }
.services-carousel.is-enhanced .card.is-current { opacity: 1; scale: 1; }
/* Neutraliza a entrada individual (transform/opacity com stagger) do
sistema de desktop, que entraria em conflito com scroll-snap e com
o scale do estado "atual". Em mobile os cards ficam visíveis de
imediato (sem transform de entrada) — só o estado "atual" (via
.is-enhanced) anima depois. Mesmos seletores/especificidade das
regras originais, sobrepondo-as só aqui dentro do breakpoint
mobile; o sistema de desktop continua 100% intacto acima de
599px. */
.js .section--services:not(.services-animated-in) .card,
.js .section--services.services-animated-in .card,
.js .section--services.services-animated-in:not(.is-settled) .card {
transform: none;
transition:
opacity 220ms ease,
scale 220ms ease,
border-color 220ms ease,
background-color 220ms ease,
box-shadow 220ms ease;
transition-delay: 0ms;
}
.js .section--services:not(.services-animated-in) .card { opacity: 1; }
/* Navegação: dica + contador + indicadores */
.services-carousel__navigation {
display: grid;
gap: 10px;
margin-top: 14px;
padding-inline: 18px;
}
.services-carousel__navigation-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.services-carousel__hint,
.services-carousel__counter {
margin: 0;
font-size: 0.78rem;
color: var(--ink-3);
}
.services-carousel__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.services-dot {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.services-dot > span {
width: 18px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
transition:
width 200ms ease,
background-color 200ms ease,
box-shadow 200ms ease;
}
.services-dot.is-current > span {
width: 30px;
background: var(--gold);
box-shadow: 0 0 10px rgba(245, 185, 63, 0.28);
}
/* Seção mais compacta no mobile: menos vazio abaixo dos indicadores. */
.section--services {
padding-block: clamp(44px, 9vw, 64px);
}
}
/* 8. SPEC (usado na seção Sobre) ------------------------------ */
.spec {
display: flex;
align-items: center;
gap: 16px;
margin: 22px 0 26px;
padding: 15px 18px;
background: rgba(245, 185, 63, 0.05);
border: 1px solid var(--line-soft);
border-radius: var(--radius-sm);
max-width: 440px;
}
.spec__value {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 700;
color: var(--gold);
line-height: 1;
}
.spec__label { font-size: 0.82rem; color: var(--ink-3); line-height: 1.4; }
/* 9. COMO FUNCIONA --------------------------------------------- */
/* camada de ícones 3D de fundo, em looping sincronizado com a etapa */
.section--how { position: relative; overflow: hidden; }
.how-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* --- ícones 3D de fundo ---------------------------------------------------
Cada ícone vive num "slot": o slot cuida da transição de entrada/saída
(crossfade + blur + scale + leve deslize), e o
![]()
interno cuida do
balanço contínuo do ícone ativo. Separar os dois evita conflito de
transform e dá um efeito premium e fluido.
--w-base = largura de referência; --k = multiplicador por ícone para
padronizar o "peso" visual (normaliza a altura aparente de cada um). */
.how-bg__slot {
--w-base: clamp(220px, 27vw, 360px);
--k: 1;
position: absolute;
top: 50%;
right: clamp(2%, 6vw, 9%);
width: calc(var(--w-base) * var(--k));
opacity: 0;
transform: translateY(-50%) translateX(46px) scale(0.82);
filter: blur(12px) drop-shadow(0 30px 60px rgba(0,0,0,0.55));
transition:
opacity 0.9s var(--ease),
transform 1.15s var(--ease),
filter 0.9s var(--ease);
will-change: opacity, transform, filter;
}
.how-bg__slot img { display: block; width: 100%; height: auto; }
/* ícone ativo: entra em foco, nítido, no lugar */
.how-bg__slot.is-active {
opacity: 0.22;
transform: translateY(-50%) translateX(0) scale(1);
filter: blur(0) drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}
/* balanço contínuo só enquanto ativo (no
![]()
, sem conflitar c/ o slot) */
.how-bg__slot.is-active img {
animation: howFloat 6.5s ease-in-out infinite;
}
@keyframes howFloat {
0%, 100% { transform: translateY(4px) rotate(-1.1deg); }
50% { transform: translateY(-12px) rotate(1.1deg); }
}
/* normalização de tamanho por ícone (padroniza o peso visual). */
.how-bg__slot[data-step="0"] { --k: 1.00; } /* WhatsApp (h/w 1.17 — compacto) */
.how-bg__slot[data-step="1"] { --k: 1.64; } /* finanças (h/w 0.67 — largo) */
.how-bg__slot[data-step="2"] { --k: 1.30; } /* confirmação (h/w 0.90 — largo) */
/* etapa 3: ilustração 3D transparente — sem corte e sem deformação */
.how-bg__slot[data-step="2"] img { object-fit: contain; object-position: center; }
.how-bg__slot[data-step="3"] { --k: 1.40; } /* caixa + pin (h/w 0.81) */
/* mobile: ícone menor, mais sutil e deslocado p/ não cobrir o texto */
@media (max-width: 860px) {
.how-bg__slot {
--w-base: clamp(150px, 44vw, 210px);
right: -10%;
top: 64%;
}
.how-bg__slot.is-active { opacity: 0.12; }
}
/* etapas em rotação no mobile: rótulo em cima, texto embaixo (largura total) */
@media (max-width: 640px) {
.section--how .how-stage { --lead-w: clamp(90px, 24vw, 118px); --col-gap: 10px; --body-w: auto; width: 100%; }
.section--how .how-steps { min-height: 228px; }
.section--how .how-steps .step { flex-direction: column; align-items: flex-start; gap: 10px; }
.section--how .how-steps .step__body { flex: none; width: 100%; }
.section--how .how-steps .step h3 { font-size: 1.3rem; }
}
/* o conteúdo fica acima da camada de ícones */
.section--how .container { position: relative; z-index: 1; }
/* ============ Como funciona: etapas em rotação (uma por vez) ============ */
.how-stage {
--lead-w: clamp(106px, 10.8vw, 148px); /* numeral vazado em SVG */
--col-gap: clamp(18px, 2.6vw, 36px);
--body-w: min(500px, 54vw);
position: relative;
width: calc(var(--lead-w) + var(--col-gap) + var(--body-w));
max-width: 100%;
margin: clamp(30px, 5vw, 58px) auto 0; /* centraliza + respiro acima */
}
.how-defs { position: absolute; }
/* pilha de etapas: todas sobrepostas, só a atual visível */
.how-steps { position: relative; list-style: none; margin: 0; padding: 0; min-height: 170px; }
.how-steps .step {
position: absolute; inset: 0;
display: flex; gap: var(--col-gap); align-items: center;
pointer-events: none;
}
/* numeral em SVG — contorno vazado, levemente inclinado e estático */
.how-steps .step__num {
width: var(--lead-w); height: auto; flex: none;
display: block; overflow: visible;
filter: drop-shadow(3px 4px 0 rgba(217, 154, 36, 0.08));
}
.how-steps .num-shell,
.how-steps .num-core {
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
/* O traço largo e o recorte interno formam as duas linhas contínuas.
Sem preenchimento progressivo: o numeral permanece na cor-base discreta. */
.how-steps .num-shell { stroke-width: 24; }
.how-steps .num-core { stroke-width: 11.5; }
.how-steps .num-track .num-shell { stroke: var(--line); }
.how-steps .num-cutout .num-core { stroke: var(--bg); }
.how-steps .step__body { width: var(--body-w); padding-top: 2px; }
.how-steps .step h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.12; margin: 0 0 0.5em; }
.how-steps .step p {
margin: 0; font-size: clamp(0.98rem, 1.3vw, 1.1rem); line-height: 1.55;
color: var(--ink-2);
}
/* entrada/saída em cascata: numeral → título → descrição */
.how-steps .step__num,
.how-steps .step h3,
.how-steps .step p {
opacity: 0;
transform: translateY(18px);
filter: blur(5px);
transition: opacity 0.6s var(--ease), transform 0.85s var(--ease), filter 0.6s var(--ease);
}
.how-steps .step.is-current { pointer-events: auto; }
.how-steps .step.is-current .step__num { opacity: 1; transform: none; filter: blur(0); transition-delay: 0.04s; }
.how-steps .step.is-current h3 { opacity: 1; transform: none; filter: blur(0); transition-delay: 0.13s; }
.how-steps .step.is-current p { opacity: 1; transform: none; filter: blur(0); transition-delay: 0.22s; }
/* fallback sem movimento: todas as etapas visíveis, empilhadas, números cheios */
.section--how.is-static .how-stage { width: auto; }
.section--how.is-static .how-progress { display: none; }
.section--how.is-static .how-steps { min-height: 0; }
.section--how.is-static .how-steps .step {
position: relative; pointer-events: auto;
margin-bottom: 24px; align-items: flex-start;
}
.section--how.is-static .how-steps .step__num,
.section--how.is-static .how-steps .step h3,
.section--how.is-static .how-steps .step p {
opacity: 1; transform: none; filter: none; transition: none;
}
/* Navegação das etapas — visível só no mobile (< 900px). No desktop o
ciclo é automático e estes controles ficam ocultos. Em prefers-reduced-
motion (.is-static) também ficam ocultos (regra acima).
Área própria, sempre visível, separada do card por um filete. */
.how-progress { display: none; }
@media (max-width: 899px) {
.section--how:not(.is-static) .how-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
margin-top: 12px;
}
}
.how-progress__label {
margin: 0;
color: var(--ink-2);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
text-align: center;
}
.how-progress__hint {
color: var(--ink-3, var(--ink-2));
font-weight: 500;
opacity: 0.72;
}
.how-progress__controls {
display: flex;
align-items: center;
gap: 6px;
}
/* linha número (esquerda) + indicadores (direita), centralizada */
.how-progress__navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
/* número da etapa atual: identidade dos numerais, em tamanho de linha.
Só aparece no mobile (o .how-progress é oculto no desktop). Não é um
botão nem um 4º indicador — apenas identifica a etapa. */
.how-progress__number {
flex: 0 0 auto;
min-width: 34px;
font-family: "Sora", "Inter", system-ui, sans-serif;
font-size: clamp(2rem, 9vw, 2.7rem);
font-weight: 700;
line-height: 1;
text-align: center;
color: rgba(245, 185, 63, 0.72);
pointer-events: none;
}
.how-dot {
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
touch-action: manipulation;
}
/* pill discreta, claramente tocável; a atual cresce e recebe o dourado */
.how-dot > span {
display: block;
width: 26px;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
transition:
width 220ms ease,
background-color 220ms ease,
box-shadow 220ms ease;
}
.how-dot.is-current > span {
width: 40px;
background: var(--gold);
box-shadow: 0 0 12px rgba(245, 185, 63, 0.3);
}
.how-dot.is-done:not(.is-current) > span {
background: rgba(245, 185, 63, 0.42);
}
.how-dot:focus-visible {
outline: 2px solid var(--gold);
outline-offset: -4px;
border-radius: 999px;
}
/* ---- Refinos exclusivos do mobile da seção "Como funciona" ---- */
@media (max-width: 899px) {
/* título: menos quebras, mais respiro, sem deformar */
.section--how .section__head h2 {
font-size: clamp(1.32rem, 5.6vw, 1.72rem);
line-height: 1.18;
letter-spacing: -0.01em;
max-width: 20ch;
}
.section--how .section__head { margin-bottom: clamp(22px, 6vw, 34px); }
/* badges em uma única linha, mais limpas (sem bolinha interna) */
.section--how .proofs {
flex-wrap: wrap;
justify-content: flex-start;
gap: 6px;
margin-top: 14px;
}
.section--how .proofs li {
padding: 5px 11px;
font-size: 0.72rem;
white-space: nowrap;
max-width: 100%;
}
.section--how .proofs li::before { content: none; }
/* numeral decorativo: menor, mais fino, ancorado no canto superior
esquerdo e parcialmente sobreposto ao card da etapa. */
.section--how:not(.is-static) .how-steps { min-height: 210px; }
.section--how:not(.is-static) .how-steps .step {
flex-direction: column;
align-items: flex-start;
}
/* o numeral decorativo em SVG dentro das etapas é ocultado no mobile:
a identificação da etapa passa a ser o número ao lado dos indicadores
(abaixo do card). No desktop os numerais originais permanecem intactos. */
.section--how:not(.is-static) .how-steps .step__num { display: none; }
.section--how:not(.is-static) .how-steps .step__body { width: 100%; }
/* superfície do gesto de swipe: só o conteúdo principal da etapa
(numeral + card + progresso). Não engloba pay-note/CTA/float. */
.section--how:not(.is-static) .how-stage {
touch-action: pan-y;
overscroll-behavior-x: contain;
}
}
.step { position: relative; }
.step h3 { margin-bottom: 0.3em; }
.step p { margin: 0; font-size: 0.92rem; color: var(--ink-2); max-width: 460px; }
/* chips de prova (sem cadastro / sem aplicativo / sem formulário) */
.proofs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 18px 0 0;
}
.proofs li {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 26px;
position: relative;
font-size: 0.8rem;
font-weight: 500;
color: var(--ink-2);
background: rgba(245, 185, 63, 0.05);
border: 1px solid var(--line-soft);
border-radius: 999px;
}
.proofs li::before {
content: "";
position: absolute;
left: 11px; top: 50%;
width: 8px; height: 8px;
margin-top: -4px;
border-radius: 50%;
background: var(--gold);
}
/* nota de pagamento */
.pay-note {
display: flex;
align-items: center;
gap: 10px;
max-width: 720px;
margin: clamp(28px, 4vw, 40px) auto 0;
padding: 14px 18px;
font-size: 0.92rem;
color: var(--ink-2);
text-align: left;
background: rgba(20, 18, 14, 0.5);
border: 1px solid var(--line-soft);
border-radius: var(--radius-sm);
}
.pay-note .ico { color: var(--gold); width: 1.3rem; height: 1.3rem; flex: none; }
.pay-note strong { color: var(--ink); font-weight: 600; }
/* 10. REGIÕES --------------------------------------------------- */
.section--regioes { border-top: 1px solid var(--line-soft); background: var(--bg-2); }
/* layout em coluna única: texto largo no topo, trilhos de chips abaixo */
.regioes { display: block; }
.regioes__content {
width: 100%;
max-width: 1040px; /* reduz quebras sem comprometer telas menores */
margin-bottom: clamp(36px, 5vw, 56px); /* respiro entre título e 1º grupo (sem o parágrafo) */
}
.regioes__content .section__lead { max-width: 1040px; }
/* Em telas largas, o título ocupa uma única linha e o texto se acomoda em duas. */
@media (min-width: 1100px) {
.regioes__content { max-width: 100%; }
.regioes__content h2 {
max-width: none;
white-space: nowrap;
font-size: clamp(1.9rem, 2.35vw, 2.12rem);
letter-spacing: -0.025em;
}
.regioes__content .section__lead {
max-width: 1040px;
}
/* Itens: título em uma linha só a partir daqui; abaixo disso, quebra normal. */
.section--itens .section__head {
max-width: none;
}
.section--itens .section__head h2 {
white-space: nowrap;
}
}
/* área dos chips ocupa toda a largura útil da seção */
.regioes__groups {
display: grid;
gap: clamp(22px, 3vw, 34px); /* espaço consistente entre grupos */
width: 100%;
min-width: 0; /* permite que o overflow:hidden dos trilhos contenha a largura */
}
.regioes__group { min-width: 0; }
.regioes__group-title {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-family: var(--font-display);
font-size: 0.92rem;
font-weight: 600;
color: var(--ink);
}
.regioes__group-title::before {
content: "";
width: 7px; height: 7px;
border-radius: 2px;
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
}
.regioes__rows { display: grid; gap: 9px; }
/* fileira: viewport mascarado nas duas extremidades */
.mq-row {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
/* trilho animado: duas sequências idênticas → desloca exatamente -50% */
.mq-track {
display: flex;
width: max-content;
will-change: transform;
animation: mq-left var(--mq-dur, 50s) linear infinite;
}
.mq-row.is-reverse .mq-track { animation-name: mq-right; }
.mq-seq {
display: flex;
flex: none;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
/* Chips das regiões: mesma proporção visual dos chips de prova
("Sem cadastro / Sem aplicativo / Sem formulário").
Altura fixa e largura mínima evitam que nomes curtos virem círculos. */
.mq-chip {
--chip-gap: 10px;
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 108px;
height: 34px;
margin-right: var(--chip-gap); /* inclusive no último: emenda uniforme entre sequências */
padding: 0 12px 0 26px;
font-size: 0.8rem;
font-weight: 500;
line-height: 1;
white-space: nowrap;
color: var(--ink-2);
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(244, 241, 234, 0.09);
border-radius: 999px;
}
.mq-chip::before {
content: "";
position: absolute;
left: 11px;
top: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
border-radius: 50%;
background: var(--gold);
opacity: 0.72;
}
.mq-chip small {
font-size: 0.7rem;
line-height: 1;
color: var(--ink-3);
}
/* base de saída: marcador dourado discreto (mesmo formato, cor distinta) */
.mq-chip--base {
border-color: var(--line);
background: rgba(245, 185, 63, 0.06);
color: var(--ink);
}
/* fileira do meio de Curitiba: mesma cor visual dos chips de referência */
.mq-row--accent .mq-chip {
color: var(--ink-2);
background: rgba(245, 185, 63, 0.05);
border-color: var(--line-soft);
}
.mq-row--accent .mq-chip::before { opacity: 1; }
@keyframes mq-left {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes mq-right {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
/* card fixo abaixo do terceiro grupo */
.regioes__note {
display: flex;
align-items: center;
gap: 12px;
margin-top: clamp(16px, 2vw, 22px); /* respiro entre último grupo e card */
padding: 14px 18px;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
background: rgba(245, 185, 63, 0.04);
color: var(--ink-2);
}
.regioes__note .ico { color: var(--gold); width: 1.3rem; height: 1.3rem; flex: none; }
.regioes__note p { margin: 0; font-size: 0.88rem; line-height: 1.5; }
/* tablet: fades um pouco menores (formato do chip permanece idêntico) */
@media (max-width: 860px) {
.mq-row {
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
}
/* mobile: apenas reduz o espaçamento entre chips, mantendo movimento e fade */
@media (max-width: 560px) {
.mq-chip {
--chip-gap: 8px;
min-width: 96px;
height: 32px;
padding-right: 11px;
font-size: 0.76rem;
}
}
/* 12. SOBRE ------------------------------------------------------- */
.sobre {
display: grid;
overflow: hidden;
background: linear-gradient(160deg, var(--card), var(--card-2) 75%);
border: 1px solid var(--line);
border-radius: calc(var(--radius) + 6px);
box-shadow: var(--shadow-card);
}
.sobre__content { padding: clamp(30px, 6vw, 56px); }
/* Título ~10% menor que o h2 padrão do site (clamp(1.55rem,4.6vw,2.3rem)),
só nesta seção — mantém peso, cor e posição, só reduz o tamanho. */
.sobre__content h2 { font-size: clamp(1.4rem, 4.1vw, 2.05rem); }
.sobre__content p { color: var(--ink-2); font-size: 0.96rem; }
.sobre .spec { margin-bottom: 0; background: rgba(245, 185, 63, 0.06); }
/* Sobre mobile — melhor aproveitamento da largura (ajuste pontual):
nenhum max-width/ch foi encontrado em título, parágrafos ou spec
nesta seção — o texto ficava estreito pela soma do padding do
.container com o padding do próprio card. Reduzindo os dois só em
<=599px (escopo restrito a #sobre), o bloco de texto ganha largura
real sem herdar nada no tablet/desktop. Texto, imagem e badge
continuam intactos — só largura e padding. */
@media (max-width: 599px) {
#sobre .container {
padding-inline: clamp(12px, 4vw, 16px);
}
.sobre__content {
padding: clamp(26px, 6vw, 34px) clamp(20px, 5vw, 24px);
}
.sobre .spec {
max-width: none;
width: 100%;
}
}
.sobre__media {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0 clamp(20px, 5vw, 40px);
background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(245, 185, 63, 0.06), transparent 65%);
}
.sobre__media img {
width: min(78%, 330px);
height: auto;
margin-top: 8px;
}
/* 13. PODE / NÃO PODE --------------------------------------------- */
.itens-grid { display: grid; gap: 14px; }
.itens-card {
display: flex;
flex-direction: column;
padding: 28px 26px;
border-radius: var(--radius);
border: 1px solid rgba(244, 241, 234, 0.07);
background: linear-gradient(165deg, var(--card), var(--card-2));
}
.itens-card h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.02rem;
margin-bottom: 18px;
}
.itens-card--sim h3 .ico { color: var(--gold); }
.itens-card--nao h3 .ico { color: var(--ink-3); }
.itens-card ul {
display: grid;
align-content: center;
gap: 9px;
flex: 1;
}
.itens-card li {
position: relative;
padding-left: 18px;
font-size: 0.92rem;
color: var(--ink-2);
line-height: 1.45;
}
.itens-card li::before {
content: "";
position: absolute;
left: 0; top: 0.62em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold);
opacity: 0.6;
}
.itens-card--nao li::before { background: var(--ink-3); opacity: 0.5; }
/* 14. FAQ ----------------------------------------------------------- */
.faq {
border: 1px solid rgba(244, 241, 234, 0.07);
border-radius: var(--radius);
background: linear-gradient(170deg, var(--card), var(--card-2));
overflow: hidden;
}
.faq__item + .faq__item { border-top: 1px solid rgba(244, 241, 234, 0.06); }
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 19px 22px;
background: none;
border: 0;
text-align: left;
font-family: var(--font-display);
font-size: 0.97rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: color 0.2s ease;
}
.faq__q:hover,
.faq__item.is-open .faq__q { color: var(--gold); }
.faq__chevron {
flex: none;
width: 9px; height: 9px;
border-right: 2px solid var(--gold);
border-bottom: 2px solid var(--gold);
transform: rotate(45deg);
transition: transform 0.3s var(--ease);
margin-top: -4px;
}
.faq__q[aria-expanded="true"] .faq__chevron { transform: rotate(225deg); margin-top: 4px; }
/* Estado padrão (progressive enhancement): sem JS, todas as respostas
nascem expandidas e visíveis — o acordeão só colapsa depois que o
script.js inicializa e marca .faq.is-enhanced (ver script.js). */
.faq__a {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.35s var(--ease);
}
.faq__a > p {
overflow: hidden;
margin: 0;
padding: 0 22px 20px;
font-size: 0.92rem;
color: var(--ink-2);
transition: padding 0.35s var(--ease);
}
.faq.is-enhanced .faq__a { grid-template-rows: 0fr; }
.faq.is-enhanced .faq__a > p { padding-bottom: 0; }
.faq.is-enhanced .faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq.is-enhanced .faq__item.is-open .faq__a > p { padding-bottom: 20px; }
/* 15. CTA FINAL ------------------------------------------------------ */
.section--cta-final {
position: relative;
background:
radial-gradient(ellipse 60% 70% at 50% 110%, rgba(245, 185, 63, 0.09), transparent 70%),
var(--bg-2);
border-top: 1px solid var(--line-soft);
}
.cta-final { text-align: center; }
.cta-final h2 { max-width: 600px; margin-inline: auto; }
.cta-final > p { color: var(--ink-2); max-width: 480px; margin: 0 auto 28px; }
/* 16. FOOTER + FLUTUANTE --------------------------------------------- */
.footer {
border-top: 1px solid var(--line-soft);
padding: 48px 0 96px; /* respiro extra p/ botão flutuante mobile */
background: var(--bg);
font-size: 0.88rem;
}
.footer__grid { display: grid; gap: 30px; }
.footer__brand { display: grid; gap: 4px; color: var(--ink-3); }
.footer__brand strong { font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.footer__nav a { color: var(--ink-2); text-decoration: none; }
.footer__nav a:hover { color: var(--gold); }
.footer__contact { display: grid; gap: 7px; color: var(--ink-3); }
.footer__contact a { color: var(--ink-2); text-decoration: none; }
.footer__contact a:hover { color: var(--gold); }
.footer__legal {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin-top: 36px;
padding-top: 22px;
border-top: 1px solid rgba(244, 241, 234, 0.05);
color: var(--ink-3);
font-size: 0.78rem;
}
.footer__note { opacity: 0.8; }
.wa-float {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 40;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
display: grid;
place-items: center;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--green);
color: #fff;
box-shadow: 0 12px 30px -8px rgba(34, 197, 94, 0.55);
transition: transform 0.25s var(--ease);
}
.wa-float .ico { width: 28px; height: 28px; }
.wa-float.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.wa-float.is-visible:hover { transform: translateY(-3px) scale(1.05); }
.wa-float { transition: transform 0.3s var(--ease), opacity 0.3s ease; }
/* 17. DESKTOP --------------------------------------------------------- */
@media (min-width: 640px) {
.hero__ctas .btn--wa,
.hero__ctas .btn--ghost { flex: 0 0 auto; }
.cards-grid { grid-template-columns: 1fr 1fr; }
.itens-grid { grid-template-columns: 1fr 1fr; }
.hero__badges li { font-size: 0.82rem; }
}
@media (min-width: 900px) {
:root { --header-h: 72px; }
.nav { display: flex; gap: 26px; }
.nav-toggle { display: none; }
.btn--header span { display: inline; }
.btn--header .ico { width: 1.15em; height: 1.15em; }
.brand__mark { width: 38px; height: 38px; }
.cards-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* etapas em rotação: altura do palco no desktop */
.how-steps { min-height: 182px; }
.how-steps .step p { font-size: clamp(1rem, 1.2vw, 1.12rem); }
/* título em uma linha só no desktop */
.section--how .section__head { max-width: none; }
.section--how .section__head h2 { white-space: nowrap; }
.section--services .section__head h2 { white-space: nowrap; }
.sobre { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
.sobre__media { align-items: flex-end; padding: 0 36px; }
.sobre__media img { width: min(100%, 360px); }
.itens-grid { gap: 20px; }
.footer { padding-bottom: 48px; }
.footer__grid { grid-template-columns: 1.2fr 1fr 1.2fr; gap: 40px; }
.wa-float { display: none; }
}
@media (min-width: 1200px) {
.hero__title { letter-spacing: -0.02em; }
}
/* 18. ACESSIBILIDADE / REDUCED MOTION ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero-anim, .reveal { opacity: 1 !important; transform: none !important; }
/* Cards de Serviços: sempre visíveis, sem stagger, sem deslocamento —
inclusive no hover, já que o !important em transform vale mais que
a regra de :hover (que não é !important). Não depende da classe
"js" nem do estado da entrada: vale sempre que o usuário tiver
redução de movimento ativada. */
.section--services .card {
opacity: 1 !important;
transform: none !important;
transition: none !important;
transition-delay: 0ms !important;
}
/* ícones de fundo: sem balanço, ativo estático e nítido */
.how-bg__slot.is-active img { animation: none !important; transform: none !important; }
.how-bg__slot.is-active {
filter: blur(0) drop-shadow(0 30px 60px rgba(0,0,0,0.55)) !important;
}
/* Regiões: letreiro parado, chips estáticos em múltiplas linhas, sem máscara */
.mq-track { animation: none !important; transform: none !important; }
.mq-row {
overflow: visible;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.mq-seq { flex-wrap: wrap; row-gap: 8px; }
.mq-seq[aria-hidden="true"] { display: none; } /* esconde a cópia do loop */
}
/* 10.1 MODAL DE REGIÕES ------------------------------------------ */
.regioes__cta {
display: flex;
justify-content: center;
margin-top: clamp(30px, 5vw, 50px);
}
.regioes__cta .btn {
min-width: min(100%, 240px);
}
body.has-region-modal { overflow: hidden; }
.region-modal {
width: min(920px, calc(100% - 32px));
max-width: none;
max-height: min(88dvh, 860px);
margin: auto;
padding: 0;
color: var(--ink);
background: transparent;
border: 0;
overflow: visible;
}
.region-modal::backdrop {
background: rgba(2, 2, 2, 0.76);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.region-modal[open] {
animation: regionModalIn 0.28s var(--ease);
}
@keyframes regionModalIn {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: none; }
}
.region-modal__panel {
display: flex;
flex-direction: column;
max-height: min(88dvh, 860px);
overflow: hidden;
background:
radial-gradient(circle at 100% 0%, rgba(245, 185, 63, 0.07), transparent 34%),
linear-gradient(160deg, #14120e, #0d0c0a 78%);
border: 1px solid rgba(245, 185, 63, 0.18);
border-radius: 22px;
box-shadow: 0 32px 90px rgba(0, 0, 0, 0.72);
}
.region-modal__header {
position: relative;
flex: none;
padding: clamp(24px, 4vw, 38px) clamp(22px, 4vw, 40px) 20px;
border-bottom: 1px solid rgba(244, 241, 234, 0.07);
}
.region-modal__header .eyebrow { margin-bottom: 10px; }
.region-modal__header h2 {
max-width: 650px;
margin-bottom: 8px;
font-size: clamp(1.5rem, 3vw, 2.15rem);
}
.region-modal__header p:last-child {
max-width: 620px;
margin: 0;
color: var(--ink-2);
font-size: 0.92rem;
}
.region-modal__close {
position: absolute;
top: 20px;
right: 20px;
display: grid;
place-items: center;
width: 42px;
height: 42px;
padding: 0;
color: var(--ink);
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(244, 241, 234, 0.12);
border-radius: 50%;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease);
}
.region-modal__close:hover {
border-color: rgba(245, 185, 63, 0.45);
background: rgba(245, 185, 63, 0.07);
transform: rotate(4deg);
}
.region-modal__close span {
position: absolute;
width: 16px;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.region-modal__close span:first-child { transform: rotate(45deg); }
.region-modal__close span:last-child { transform: rotate(-45deg); }
.region-modal__controls {
flex: none;
display: grid;
gap: 14px;
padding: 18px clamp(22px, 4vw, 40px);
background: rgba(7, 6, 5, 0.52);
border-bottom: 1px solid rgba(244, 241, 234, 0.06);
}
.region-modal__filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.region-filter {
min-height: 36px;
padding: 7px 13px;
color: var(--ink-3);
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(244, 241, 234, 0.09);
border-radius: 999px;
font: 500 0.78rem/1.2 var(--font-body);
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease);
}
.region-filter:hover { color: var(--ink-2); border-color: rgba(245, 185, 63, 0.24); }
.region-filter:active { transform: scale(0.98); }
.region-filter.is-active,
.region-filter[aria-pressed="true"] {
color: #1a1304;
background: linear-gradient(180deg, var(--gold), var(--gold-deep));
border-color: transparent;
box-shadow: 0 8px 18px -12px rgba(245, 185, 63, 0.8);
}
.region-search {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 0 14px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(244, 241, 234, 0.11);
border-radius: 13px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.region-search:focus-within {
border-color: rgba(245, 185, 63, 0.55);
box-shadow: 0 0 0 3px rgba(245, 185, 63, 0.08);
}
.region-search .ico { color: var(--gold); }
.region-search input {
width: 100%;
min-width: 0;
padding: 0;
color: var(--ink);
background: transparent;
border: 0;
outline: 0;
font: 400 0.92rem/1.4 var(--font-body);
}
.region-search input::placeholder { color: var(--ink-3); }
.region-search input::-webkit-search-cancel-button { cursor: pointer; }
.region-modal__status {
margin: -4px 0 0;
color: var(--ink-3);
font-size: 0.76rem;
}
.region-modal__body {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 24px clamp(22px, 4vw, 40px) 34px;
scrollbar-width: thin;
scrollbar-color: rgba(245, 185, 63, 0.32) transparent;
}
.region-modal__body::-webkit-scrollbar { width: 9px; }
.region-modal__body::-webkit-scrollbar-thumb {
background: rgba(245, 185, 63, 0.28);
border: 3px solid transparent;
border-radius: 999px;
background-clip: padding-box;
}
.region-directory__group + .region-directory__group {
margin-top: 28px;
padding-top: 26px;
border-top: 1px solid rgba(244, 241, 234, 0.07);
}
.region-directory__group h3 {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 14px;
font-size: 0.94rem;
}
.region-directory__group h3::before {
content: "";
width: 7px;
height: 7px;
flex: none;
border-radius: 2px;
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
}
.region-directory__count {
display: inline-grid;
place-items: center;
min-width: 24px;
height: 24px;
margin-left: 2px;
padding-inline: 7px;
color: var(--ink-3);
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(244, 241, 234, 0.08);
border-radius: 999px;
font: 500 0.7rem/1 var(--font-body);
}
.region-directory__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
}
.region-directory__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
min-height: 42px;
padding: 9px 12px;
color: var(--ink-2);
background: rgba(255, 255, 255, 0.026);
border: 1px solid rgba(244, 241, 234, 0.085);
border-radius: 11px;
font-size: 0.8rem;
line-height: 1.3;
}
.region-directory__item > span {
min-width: 0;
overflow-wrap: anywhere;
}
.region-directory__item small {
flex: none;
color: var(--gold-deep);
font-size: 0.64rem;
white-space: nowrap;
}
.region-modal__empty {
flex: 1;
min-height: 220px;
padding: 52px 24px;
text-align: center;
}
.region-modal__empty strong {
display: block;
margin-bottom: 5px;
font-family: var(--font-display);
}
.region-modal__empty p {
margin: 0;
color: var(--ink-3);
font-size: 0.86rem;
}
@media (max-width: 760px) {
.region-directory__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.regioes__cta .btn { width: 100%; }
.region-modal {
width: 100%;
height: 100dvh;
max-height: none;
margin: 0;
}
.region-modal__panel {
height: 100dvh;
max-height: none;
border: 0;
border-radius: 0;
}
.region-modal__header {
padding: 22px 18px 17px 18px;
}
/* Só o eyebrow e o título precisam desviar do botão de fechar (canto
superior direito); a descrição passa a usar a largura inteira. */
.region-modal__header .eyebrow,
.region-modal__header h2 {
padding-right: 52px;
}
.region-modal__header h2 {
font-size: clamp(1.05rem, 4.6vw, 1.3rem);
margin-bottom: 6px;
}
.region-modal__close { top: 15px; right: 14px; }
.region-modal__controls { padding: 14px 18px; }
/* Badges no tamanho do conteúdo, quebrando em linha e dividindo o
espaço horizontal — em vez de uma badge por linha. */
.region-modal__filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.region-filter {
width: auto;
text-align: center;
}
.region-modal__body { padding: 20px 18px 28px; }
.region-directory__list { grid-template-columns: 1fr; }
.region-directory__item { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.region-modal[open] { animation: none; }
.region-modal__close,
.region-filter { transition: none; }
}
/* 9.1 Numeral grande como elemento de fundo à esquerda
O numeral cresce visualmente sem participar do fluxo e sem alterar a
altura original da seção. Conteúdo, timing e loading permanecem iguais. */
@media (min-width: 900px) {
/* O numeral permanece no fundo; todos os conteúdos legíveis da seção
formam uma camada acima dele, sem alterar o fluxo ou a altura. */
.section--how:not(.is-static) .section__head,
.section--how:not(.is-static) .how-steps .step__body,
.section--how:not(.is-static) .pay-note,
.section--how:not(.is-static) .section__cta {
position: relative;
z-index: 2;
}
.section--how:not(.is-static) .how-stage {
/* preserva exatamente a geometria e a altura originais do palco */
min-height: 0;
overflow: visible;
}
.section--how:not(.is-static) .how-steps {
min-height: 182px;
overflow: visible;
}
.section--how:not(.is-static) .how-steps .step {
display: block;
overflow: visible;
}
.section--how:not(.is-static) .how-steps .step__num {
position: absolute;
left: calc(50% - 50vw + clamp(4px, 0.8vw, 16px));
top: 50%;
z-index: 0;
width: clamp(520px, 44vw, 720px);
max-width: none;
height: auto;
pointer-events: none;
transform: translateY(calc(-50% + 18px));
}
.section--how:not(.is-static) .how-steps .step.is-current .step__num {
transform: translateY(-50%);
}
.section--how:not(.is-static) .how-steps .step__body {
position: relative;
z-index: 1;
width: var(--body-w);
margin-left: calc(var(--lead-w) + var(--col-gap));
padding-top: 2px;
}
}
/* 9.2 REFINO VISUAL — vão interno ampliado e proteção de leitura
Mantém a espessura aparente de cada linha dourada, triplica o vão escuro
entre elas e cria uma névoa escura suave atrás dos textos, sem apagar por
completo o numeral de fundo. */
@media (min-width: 900px) {
/* Antes: shell 18 / core 5.5. Agora o vão interno fica ~3x maior,
preservando aproximadamente a mesma espessura de cada linha dourada. */
.section--how:not(.is-static) .how-steps .num-shell {
stroke-width: 29;
}
.section--how:not(.is-static) .how-steps .num-core {
stroke-width: 16.5;
}
/* Cria uma camada própria para manter o véu entre o numeral e os textos. */
.section--how:not(.is-static) .section__head,
.section--how:not(.is-static) .how-steps .step__body {
isolation: isolate;
}
.section--how:not(.is-static) .section__head::before,
.section--how:not(.is-static) .how-steps .step__body::before {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
background: radial-gradient(
ellipse at 46% 50%,
rgba(7, 6, 5, 0.92) 0%,
rgba(7, 6, 5, 0.82) 46%,
rgba(7, 6, 5, 0.48) 72%,
rgba(7, 6, 5, 0) 100%
);
filter: blur(10px);
}
.section--how:not(.is-static) .section__head::before {
inset: -20px -54px -24px -34px;
}
.section--how:not(.is-static) .how-steps .step__body::before {
inset: -28px -52px -28px -38px;
}
/* Reforço de contraste apenas nas letras; o numeral continua perceptível. */
.section--how:not(.is-static) .section__head .eyebrow,
.section--how:not(.is-static) .section__head h2,
.section--how:not(.is-static) .section__head .section__lead,
.section--how:not(.is-static) .how-steps .step__body h3,
.section--how:not(.is-static) .how-steps .step__body p {
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.96),
0 0 18px rgba(7, 6, 5, 0.9);
}
}
/* 9.3 CORREÇÃO DE LEITURA — remove a mancha do texto central
O conteúdo da etapa já fica fora do numeral e das ilustrações, portanto
não precisa de véu próprio. Mantém apenas contraste tipográfico leve. */
@media (min-width: 900px) {
.section--how:not(.is-static) .how-steps .step__body {
isolation: auto;
background: transparent;
}
.section--how:not(.is-static) .how-steps .step__body::before {
content: none;
display: none;
}
.section--how:not(.is-static) .how-steps .step.is-current .step__body {
opacity: 1;
filter: none;
}
.section--how:not(.is-static) .how-steps .step__body h3 {
color: var(--ink);
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.9),
0 0 12px rgba(7, 6, 5, 0.68);
}
.section--how:not(.is-static) .how-steps .step__body p {
color: var(--ink-2);
text-shadow:
0 2px 7px rgba(0, 0, 0, 0.88),
0 0 10px rgba(7, 6, 5, 0.58);
}
}
/* 9.4 AJUSTE DE RITMO — cabeçalho mais enxuto e ações mais baixas
O subtítulo redundante foi removido do HTML. Os chips sobem naturalmente
para ocupar esse espaço, enquanto nota e CTA descem dentro da área já
disponível, dando mais respiro ao conteúdo central sem alterar o numeral. */
@media (min-width: 900px) {
.section--how:not(.is-static) .pay-note {
margin-top: clamp(54px, 5.4vw, 72px);
}
.section--how:not(.is-static) .section__cta {
margin-top: clamp(38px, 4vw, 50px);
}
}
/* 9.5 MAIS RESPIRO PARA A ETAPA PRINCIPAL
Desloca visualmente a nota de pagamento e o CTA para mais perto do fim
da seção sem alterar o fluxo, a altura da seção ou o espaço do numeral. */
@media (min-width: 900px) {
.section--how:not(.is-static) .pay-note,
.section--how:not(.is-static) .section__cta {
top: clamp(34px, 3vw, 48px);
}
}
/* 9.6 CENTRALIZAÇÃO DO CONTEÚDO PRINCIPAL DA ETAPA
Reequilibra o texto entre o numeral à esquerda e a ilustração à direita,
além de posicioná-lo verticalmente no espaço entre o cabeçalho e a nota
de pagamento. Não altera a altura da seção nem o fluxo das ações. */
@media (min-width: 900px) {
.section--how:not(.is-static) .how-steps .step__body {
margin-left: calc(
var(--lead-w) + var(--col-gap) - clamp(24px, 4vw, 72px)
);
transform: translateY(clamp(24px, 3.5vw, 56px));
}
}
/* 9.7 PONTAS REALMENTE ABERTAS E FADE NAS EXTREMIDADES
A linha interna avança além da externa e elimina qualquer filete que pudesse
reconectar as duas bordas. O fade é desenhado dentro do próprio SVG por duas
camadas radiais da cor do fundo, alinhadas aos endpoints reais de cada path. */
@media (min-width: 900px) {
.section--how:not(.is-static) .how-steps .num-shell {
stroke-linecap: butt;
}
.section--how:not(.is-static) .how-steps .num-core {
stroke-linecap: square;
}
.section--how:not(.is-static) .how-steps .step__num {
-webkit-mask: none;
mask: none;
}
.section--how:not(.is-static) .how-steps .num-endpoint-fade {
pointer-events: none;
}
}
/* 9.8 FOCO PREMIUM NAS ETAPAS — versão estável
Apenas a etapa atual renderiza o painel. Isso evita que os painéis das
outras duas etapas, sobrepostos no mesmo palco, borrem ou cubram o texto. */
.section--how .how-steps .step__body {
position: relative;
overflow: hidden;
max-width: 470px;
padding: clamp(20px, 2vw, 25px) clamp(22px, 2.25vw, 28px) clamp(20px, 2vw, 25px) clamp(26px, 2.5vw, 32px);
background:
linear-gradient(
110deg,
rgba(20, 18, 14, 0.88) 0%,
rgba(15, 13, 10, 0.76) 62%,
rgba(11, 10, 8, 0.42) 100%
);
border: 1px solid rgba(245, 185, 63, 0.14);
border-radius: 15px;
box-shadow:
0 20px 42px -32px rgba(0, 0, 0, 0.96),
inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
/* Somente o painel da etapa ativa pode existir visualmente no palco. */
.section--how:not(.is-static) .how-steps .step:not(.is-current) .step__body {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.section--how:not(.is-static) .how-steps .step.is-current .step__body {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.section--how .how-steps .step__body::before {
content: "";
position: absolute;
left: 0;
top: 16px;
bottom: 16px;
width: 3px;
border-radius: 0 999px 999px 0;
background: linear-gradient(180deg, var(--gold), var(--gold-deep));
box-shadow: 0 0 16px rgba(245, 185, 63, 0.2);
pointer-events: none;
}
.section--how .how-steps .step__body > * {
position: relative;
z-index: 1;
}
.section--how .how-steps .step__body h3 {
margin-bottom: 0.48em;
font-size: clamp(1.55rem, 2.25vw, 2rem);
line-height: 1.14;
letter-spacing: -0.018em;
color: var(--ink);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}
.section--how .how-steps .step__body p {
max-width: 430px;
margin: 0;
font-size: clamp(1rem, 1.15vw, 1.07rem);
line-height: 1.58;
color: #d0cbc1;
text-shadow: 0 1px 7px rgba(0, 0, 0, 0.55);
}
@media (max-width: 640px) {
.section--how .how-steps .step__body {
max-width: none;
padding: 18px 19px 18px 23px;
border-radius: 14px;
}
.section--how .how-steps .step__body::before {
top: 14px;
bottom: 14px;
}
}
/* 9.9 PAINEL CENTRAL — equilíbrio óptico, vidro fosco e transição coordenada
Corrige o padding-top de 2px herdado da geometria antiga do palco, que tinha
prioridade maior e deixava o título quase encostado na borda superior. */
.section--how:not(.is-static) .how-steps .step__body {
/* topo levemente maior para compensar visualmente a altura das letras */
padding:
clamp(27px, 2.35vw, 32px)
clamp(22px, 2.25vw, 28px)
clamp(24px, 2.1vw, 28px)
clamp(26px, 2.5vw, 32px);
background:
linear-gradient(
118deg,
rgba(24, 21, 16, 0.68) 0%,
rgba(15, 13, 10, 0.55) 58%,
rgba(10, 9, 7, 0.42) 100%
);
-webkit-backdrop-filter: blur(14px) saturate(1.12);
backdrop-filter: blur(14px) saturate(1.12);
border-color: rgba(245, 185, 63, 0.18);
box-shadow:
0 24px 52px -34px rgba(0, 0, 0, 0.98),
0 10px 28px -24px rgba(245, 185, 63, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.045),
inset 0 -1px 0 rgba(0, 0, 0, 0.34);
/* translate/scale independentes preservam o transform usado no posicionamento */
translate: 0 14px;
scale: 0.985;
filter: blur(5px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.48s var(--ease),
translate 0.72s var(--ease),
scale 0.72s var(--ease),
filter 0.48s ease,
border-color 0.42s ease,
box-shadow 0.52s var(--ease),
visibility 0s linear 0.52s;
}
/* brilho superficial muito discreto do vidro, sem atravessar a leitura */
.section--how:not(.is-static) .how-steps .step__body::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.012) 24%,
transparent 46%,
rgba(245, 185, 63, 0.018) 100%
);
}
.section--how:not(.is-static) .how-steps .step.is-current .step__body {
opacity: 1;
visibility: visible;
translate: 0 0;
scale: 1;
filter: blur(0);
border-color: rgba(245, 185, 63, 0.24);
box-shadow:
0 26px 58px -34px rgba(0, 0, 0, 1),
0 14px 32px -26px rgba(245, 185, 63, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.055),
inset 0 -1px 0 rgba(0, 0, 0, 0.32);
transition-delay: 0.08s, 0.08s, 0.08s, 0.08s, 0.08s, 0.08s, 0s;
}
/* mantém a cascata: painel primeiro, título e descrição logo depois */
.section--how:not(.is-static) .how-steps .step.is-current .step__body h3 {
transition-delay: 0.18s;
}
.section--how:not(.is-static) .how-steps .step.is-current .step__body p {
transition-delay: 0.27s;
}
@media (max-width: 640px) {
.section--how:not(.is-static) .how-steps .step__body {
padding: 23px 19px 21px 23px;
-webkit-backdrop-filter: blur(11px) saturate(1.08);
backdrop-filter: blur(11px) saturate(1.08);
}
}
@media (prefers-reduced-motion: reduce) {
.section--how:not(.is-static) .how-steps .step__body {
translate: 0 0;
scale: 1;
filter: none;
transition: none;
}
}
/* ============================================================
HERO REMODELADO · composição importada do Claude Design
Mantém o restante da landing page intacto.
============================================================ */
@keyframes heroRemodelGlowDrift {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(-2%, 2%, 0); }
}
@keyframes heroBadgeFloat {
0%, 100% { translate: 0 0; }
50% { translate: var(--badge-float-x, 0px) var(--badge-float-y, -10px); }
}
@keyframes heroRemodelEnter {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.hero.hero-remodel {
position: relative;
isolation: isolate;
display: block;
min-height: 0;
overflow: hidden;
padding: calc(var(--header-h) + clamp(48px, 7vw, 72px)) 0 clamp(64px, 9vw, 96px);
}
.hero-remodel__background {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(120% 80% at 88% 6%, rgba(245, 185, 63, 0.10), transparent 48%),
radial-gradient(70% 60% at 4% 96%, rgba(245, 185, 63, 0.045), transparent 60%),
linear-gradient(160deg, var(--bg-2) 0%, var(--bg) 48%, #040302 100%);
animation: none;
}
.hero-remodel__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: clamp(32px, 5vw, 64px);
max-width: 1280px;
}
.hero-remodel__content {
flex: 1 1 460px;
width: 100%;
max-width: 680px;
min-width: 0;
}
.hero-remodel__slogan {
margin: 0 0 16px;
font-family: "Barlow Semi Condensed", var(--font-display);
font-size: clamp(3.1rem, 5.2vw, 5rem);
line-height: 0.92;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--ink);
text-wrap: balance;
animation: heroRemodelEnter 0.7s var(--ease) both;
}
.hero-remodel__slogan-question,
.hero-remodel__slogan-brand {
display: block;
width: max-content;
max-width: 100%;
}
.hero-remodel__slogan-question {
color: var(--ink);
}
.hero-remodel__slogan-brand {
margin-top: 0.09em;
color: #ffcc00;
font-weight: 900;
letter-spacing: -0.03em;
/* Inner Shadow do Figma: X 0, Y 4, Blur 4, preto 25%.
O text-shadow permanece como fallback para navegadores antigos. */
filter: url(#heroTextInnerShadow);
text-shadow: 0 5px 4px rgba(0, 0, 0, 0.52), 0 2px 0 rgba(0, 0, 0, 0.3), 0 10px 14px rgba(0, 0, 0, 0.16);
}
.hero-remodel__support {
width: 100%;
}
.hero-remodel__secondary {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 18px;
animation: heroRemodelEnter 0.7s 0.08s var(--ease) both;
}
.hero-remodel__accent {
width: 3px;
height: 20px;
flex: none;
border-radius: 2px;
background: linear-gradient(180deg, var(--gold), var(--gold-deep));
}
.hero-remodel__secondary h1 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.6vw, 1.32rem);
line-height: 1.35;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink-2);
text-wrap: balance;
}
/* Estrutura do letreiro: no desktop isto continua se comportando como
texto normal (spans inline, cópia duplicada oculta) — o modo letreiro
só é ativado dentro do breakpoint mobile mais abaixo. */
.hero-remodel__marquee-viewport {
display: inline;
}
.hero-remodel__marquee-track {
display: inline;
}
.hero-remodel__marquee-item {
display: inline;
}
.hero-remodel__marquee-item[aria-hidden="true"] {
display: none;
}
.hero-remodel__description {
max-width: 480px;
margin: 0 0 30px;
font-size: clamp(0.95rem, 1.1vw, 1.02rem);
line-height: 1.62;
color: var(--ink-3);
animation: heroRemodelEnter 0.7s 0.16s var(--ease) both;
}
.hero-remodel__ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
animation: heroRemodelEnter 0.7s 0.32s var(--ease) both;
}
.hero-remodel__visual {
position: relative;
flex: 1 1 420px;
width: 100%;
max-width: 480px;
min-width: 0;
align-self: flex-end;
animation: heroRemodelEnter 0.8s 0.12s var(--ease) both;
}
.hero-remodel__portrait-card {
position: relative;
overflow: visible;
aspect-ratio: 4 / 5;
border: 0;
border-radius: 28px;
background: none;
box-shadow: none;
}
.hero-remodel__portrait {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
}
.hero-remodel__portrait img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
/* Máscara de transparência: dissolve a base da foto no fundo real do
hero, em vez de sobrepor um degradê colorido (que sempre acaba
parecendo uma placa/retângulo). A partir daqui a foto some aos
poucos, revelando o próprio fundo por trás — sem bordas, sem card. */
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
#000 62%,
rgba(0, 0, 0, 0.94) 72%,
rgba(0, 0, 0, 0.7) 82%,
rgba(0, 0, 0, 0.32) 91%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
#000 0%,
#000 62%,
rgba(0, 0, 0, 0.94) 72%,
rgba(0, 0, 0, 0.7) 82%,
rgba(0, 0, 0, 0.32) 91%,
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center;
mask-position: center;
}
.hero-remodel__photo-badges {
position: absolute;
inset: 0;
z-index: 8;
pointer-events: none;
}
.hero-remodel__photo-badge {
--badge-float-x: 0px;
--badge-float-y: -10px;
position: absolute;
z-index: 9;
display: inline-flex;
align-items: center;
gap: 8px;
width: max-content;
max-width: calc(100% - 28px);
padding: 9px 12px;
border: 1px solid rgba(245, 185, 63, 0.23);
border-radius: 13px;
background: rgba(17, 15, 12, 0.86);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.72);
color: var(--ink);
font-size: 0.74rem;
line-height: 1.2;
font-weight: 600;
white-space: nowrap;
will-change: translate;
animation: heroBadgeFloat 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero-remodel__photo-badge .ico {
width: 15px;
height: 15px;
flex: none;
color: var(--gold);
}
.hero-remodel__photo-badge--invoice {
top: 16px;
left: -18px;
--badge-float-x: -4px;
--badge-float-y: -7px;
animation-delay: -0.3s;
}
.hero-remodel__photo-badge--deliveries {
top: -12px;
right: -42px;
--badge-float-x: 5px;
--badge-float-y: -10px;
animation-delay: -1.2s;
}
.hero-remodel__photo-badge--people {
top: 51%;
right: -26px;
transform: translateY(-50%);
--badge-float-x: 6px;
--badge-float-y: -6px;
animation-delay: -2.1s;
}
.hero-remodel__photo-badge--location {
left: 50%;
bottom: 16px;
transform: translateX(-50%);
--badge-float-x: 0px;
--badge-float-y: -8px;
animation-delay: -2.8s;
}
@media (min-width: 900px) {
.hero-remodel__content {
flex-basis: 560px;
max-width: 760px;
align-self: stretch;
display: flex;
flex-direction: column;
min-height: clamp(525px, 37.5vw, 600px);
padding-block: clamp(38px, 3.5vw, 58px) clamp(18px, 1.8vw, 28px);
}
.hero-remodel__slogan {
max-width: 760px;
margin-bottom: 0;
font-size: clamp(3.75rem, 6vw, 6.05rem);
line-height: 0.9;
}
.hero-remodel__support {
margin-top: auto;
padding-top: clamp(40px, 4.8vh, 72px);
}
.hero-remodel__visual {
/* Ancora o conjunto (foto + máscara + badges) à borda inferior real do
hero, consumindo o padding-bottom da seção — que antes deixava um
vão vazio entre o fim visual da foto e a divisão com a próxima
seção. Usamos a mesma expressão do padding-bottom do hero para que
o ajuste acompanhe o clamp em qualquer largura, em vez de um valor
fixo que só funcionaria numa viewport específica. */
margin-bottom: calc(-1 * clamp(64px, 9vw, 96px));
}
}
@media (max-width: 899px) {
.hero.hero-remodel {
padding-top: calc(var(--header-h) + clamp(34px, 7vw, 54px));
}
.hero-remodel__inner {
flex-direction: column;
gap: clamp(32px, 7vw, 52px);
}
.hero-remodel__visual {
/* No desktop "flex: 1 1 420px" define a LARGURA base (eixo principal
horizontal). Como aqui o eixo principal vira vertical (coluna), esse
mesmo valor passa a definir uma ALTURA mínima de 420px — maior que a
foto reduzida no mobile, sobrando espaço morto abaixo dela. Redefine
para que a altura seja só o conteúdo real (a foto). */
flex: 0 0 auto;
order: -1;
align-self: center;
max-width: min(480px, 84vw);
}
.hero-remodel__content {
display: block;
max-width: 640px;
min-height: 0;
padding-block: 0;
}
.hero-remodel__support {
margin-top: 0;
padding-top: 0;
}
}
@media (max-width: 639px) {
.hero.hero-remodel {
display: flex;
flex-direction: column;
/* Fallback em vh para navegadores sem suporte a svh, sobrescrito na
linha seguinte onde houver suporte — evita depender só de 100vh,
que em mobile inclui a área varrida pela barra de endereço. */
min-height: 100vh;
min-height: 100svh;
padding-top: calc(var(--header-h) + 10px);
/* Pequena margem inferior considerando a safe area (notch/gestos),
em vez de um padding grande e fixo — os botões devem terminar
rente ao fim da tela, não sobrar um vão vazio abaixo deles. */
padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.hero-remodel__inner {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
}
/* .hero-remodel__content e .hero-remodel__support são só agrupadores
estruturais (sem estilo visual próprio relevante no mobile); com
display:contents seus filhos passam a ser itens diretos do flex
column acima, o que permite reordenar slogan / letreiro / descrição
/ foto / botões livremente via `order`, sem duplicar HTML e sem
mexer no desktop (que não entra neste breakpoint). */
.hero-remodel__content,
.hero-remodel__support {
display: contents;
}
.hero-remodel__slogan {
order: 1;
/* Absorve o espaço livre do flex column: em vez da foto "puxar" o
conjunto todo para baixo, é o próprio bloco de texto que desce a
partir do topo — o texto deixa de ficar colado no topo e o
conjunto (texto + foto + botões) fica compacto e ancorado no
rodapé, com pouca distância entre a descrição e a foto. */
margin-top: auto;
/* clamp calibrado para a largura real do bloco de texto (viewport
menos o padding lateral do container) com a fonte/peso do
slogan: em vez de um teto fixo (que faz "O David leva." quebrar
em telas mais estreitas que a de referência), o coeficiente
acompanha a largura disponível, então o slogan fica grande em
qualquer largura mobile sem quebrar linha nem perder o teto em
430px. */
font-size: clamp(2.6rem, calc(14vw - 6px), 3.2rem);
line-height: 0.94;
margin-bottom: 30px;
text-align: center;
}
.hero-remodel__slogan-question,
.hero-remodel__slogan-brand {
margin-inline: auto;
}
.hero-remodel__slogan-brand {
margin-top: 0.08em;
text-shadow: 0 4px 3px rgba(0, 0, 0, 0.46), 0 1px 0 rgba(0, 0, 0, 0.24);
}
.hero-remodel__secondary {
order: 2;
align-items: flex-start;
margin-bottom: 26px;
}
.hero-remodel__accent { margin-top: 2px; }
.hero-remodel__secondary h1 {
font-size: 1.1rem;
line-height: 1.4;
/* Vira a "janela" do letreiro: uma linha só, sem quebra, com
recorte + máscara de fade nas laterais. */
display: block;
max-width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(
to right,
transparent 0,
#000 18px,
#000 calc(100% - 18px),
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0,
#000 18px,
#000 calc(100% - 18px),
transparent 100%
);
}
.hero-remodel__marquee-viewport {
display: block;
overflow: hidden;
width: 100%;
}
.hero-remodel__marquee-track {
display: inline-flex;
width: max-content;
animation: heroSecondaryMarquee 11s linear infinite;
}
.hero-remodel__marquee-item {
display: inline-block;
white-space: nowrap;
padding-right: 40px;
}
.hero-remodel__marquee-item[aria-hidden="true"] {
display: inline-block;
}
.hero-remodel__description {
order: 3;
margin-bottom: 8px;
font-size: 0.95rem;
line-height: 1.5;
text-align: center;
max-width: 340px;
margin-inline: auto;
}
/* -------- Foto: ancorada na parte inferior do hero -------- */
.hero-remodel__visual {
order: 4;
align-self: center;
max-width: min(300px, 70vw);
position: relative;
z-index: 2;
}
.hero-remodel__portrait-card {
border-radius: 22px;
}
.hero-remodel__portrait img {
/* No mobile o retrato ocupa uma caixa proporcionalmente menor; adia um
pouco o início do desaparecimento para não cortar cedo demais o
tronco/braços da pessoa. */
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
#000 70%,
rgba(0, 0, 0, 0.94) 78%,
rgba(0, 0, 0, 0.7) 87%,
rgba(0, 0, 0, 0.32) 94%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
#000 0%,
#000 70%,
rgba(0, 0, 0, 0.94) 78%,
rgba(0, 0, 0, 0.7) 87%,
rgba(0, 0, 0, 0.32) 94%,
transparent 100%
);
}
.hero-remodel__photo-badge {
gap: 4px;
max-width: 172px;
padding: 6px 8px;
border-radius: 9px;
font-size: clamp(9px, 2.3vw, 10.5px);
white-space: normal;
line-height: 1.25;
}
.hero-remodel__photo-badge .ico {
width: 11px;
height: 11px;
}
/* Posições preservadas em relação à versão anterior (só a caixa da
foto ficou um pouco maior) — cada badge "escapa" de leve para fora
do cartão, aproveitando o espaço vazio ao lado, sem sair da tela. */
/* Ajuste fino: descem um pouco para parecerem mais integradas ao
avatar, em vez de flutuarem "altas" e separadas da foto. */
.hero-remodel__photo-badge--invoice {
top: 22px;
left: -32px;
}
.hero-remodel__photo-badge--deliveries {
top: 22px;
right: -32px;
}
.hero-remodel__photo-badge--people {
top: 48%;
left: -30px;
right: auto;
transform: translateY(-50%);
}
/* Sobe e desloca para a direita, afastando-se visualmente dos botões
logo abaixo (que sobrepõem a base da foto). */
.hero-remodel__photo-badge--location {
left: calc(50% + 30px);
bottom: 64px;
}
/* -------- Botões: sobrepostos à base da foto -------- */
.hero-remodel__ctas {
order: 5;
position: relative;
z-index: 10;
align-self: stretch;
/* Sobreposição intencional sobre a base da foto (já esmaecida pela
máscara), dentro da faixa de 24–60px pedida. */
margin-top: -44px;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.hero-remodel__ctas .btn {
width: 100%;
}
}
@keyframes heroSecondaryMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Telas mobile de pouca altura (ex.: 360×800): reduz mais a foto, a
sobreposição dos botões e os espaçamentos verticais, sem esconder
nenhum elemento e sem usar transform:scale() no hero inteiro — cada
componente é ajustado individualmente para manter nitidez e
acessibilidade. */
@media (max-width: 639px) and (max-height: 820px) {
.hero.hero-remodel {
padding-top: calc(var(--header-h) + 8px);
}
.hero-remodel__visual {
max-width: min(250px, 66vw);
}
.hero-remodel__slogan {
/* Mesma fórmula da regra base — o slogan não fica menor só por a
tela ser mais baixa; o espaço é economizado em outros ajustes
deste breakpoint (foto, botões, demais margens), não no slogan. */
margin-bottom: 24px;
}
.hero-remodel__secondary {
margin-bottom: 22px;
}
.hero-remodel__secondary h1 {
font-size: 1rem;
}
.hero-remodel__description {
margin-bottom: 14px;
font-size: 0.88rem;
line-height: 1.45;
}
.hero-remodel__ctas {
margin-top: -28px;
gap: 8px;
}
}
/* Telas mobile ainda mais baixas (ex.: 375×667 — iPhone SE/6/7/8):
o slogan maior e os espaçamentos mais generosos pedidos nesta rodada
não cabem só com os ajustes do nível acima; aperta mais um degrau,
sempre em componentes individuais (nunca transform:scale() no hero). */
@media (max-width: 639px) and (max-height: 700px) {
.hero.hero-remodel {
padding-top: calc(var(--header-h) + 4px);
}
.hero-remodel__visual {
max-width: min(184px, 50vw);
}
.hero-remodel__slogan {
margin-bottom: 12px;
}
.hero-remodel__secondary {
margin-bottom: 10px;
}
.hero-remodel__description {
margin-bottom: 6px;
}
.hero-remodel__ctas {
margin-top: -20px;
gap: 6px;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-remodel__background,
.hero-remodel__content > *,
.hero-remodel__visual {
animation: none !important;
}
.hero-remodel__marquee-track {
animation: none !important;
transform: none !important;
}
}
@media (max-width: 379px) {
.hero-remodel__photo-badge--invoice {
left: -26px;
max-width: 128px;
}
.hero-remodel__photo-badge--deliveries {
right: -26px;
max-width: 128px;
}
.hero-remodel__photo-badge--people {
left: -18px;
}
}
/* Telas muito estreitas (~320px): o piso de 2.6rem do clamp do slogan
passaria a ser maior que a largura realmente disponível, quebrando
"O David leva." em duas linhas — um piso menor aqui deixa a fórmula
em vw assumir o controle nessas larguras. */
@media (max-width: 340px) {
.hero-remodel__slogan {
font-size: clamp(2.2rem, calc(14vw - 6px), 3.2rem);
}
}
/* Desktop: indicadores discretos da rotação automática das etapas.
Reaproveita os mesmos controles do mobile e o estado sincronizado pelo JS. */
@media (min-width: 900px) {
.section--how:not(.is-static) .how-stage {
/* Espaço reservado abaixo do palco para os indicadores. O cartão da
etapa cresce em altura conforme a largura da viewport (padding e
fonte em clamp()), então esta folga também precisa crescer — um
valor fixo (38px) deixava o cartão da etapa mais alta ("Acompanhe
até a entrega") cobrir os risquinhos em telas largas. */
padding-bottom: calc(clamp(24px, 3.5vw, 56px) + 96px);
}
.section--how:not(.is-static) .how-progress {
position: absolute;
/* Mesma posição horizontal e largura do cartão (.step__body), para que
os risquinhos fiquem centralizados em relação a ele — e não em
relação à coluna inteira, que é mais larga que o cartão. */
left: calc(var(--lead-w) + var(--col-gap) - clamp(24px, 4vw, 72px));
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: min(var(--body-w), 470px);
margin-top: 0;
}
.section--how:not(.is-static) .how-progress__navigation {
width: 100%;
justify-content: center;
gap: 0;
}
.section--how:not(.is-static) .how-progress__number {
display: none;
}
.section--how:not(.is-static) .how-progress__controls {
gap: 2px;
}
.section--how:not(.is-static) .how-dot {
width: 42px;
height: 28px;
}
.section--how:not(.is-static) .how-dot > span {
width: 25px;
height: 4px;
background: rgba(255, 255, 255, 0.15);
}
.section--how:not(.is-static) .how-dot.is-current > span {
width: 38px;
background: var(--gold);
box-shadow: 0 0 10px rgba(245, 185, 63, 0.28);
}
.section--how:not(.is-static) .how-dot.is-done:not(.is-current) > span {
background: rgba(255, 255, 255, 0.15);
}
}
/* A partir de ~1300px o cartão da etapa mais longa cresce mais um degrau
(a quebra de linha do texto muda), então a folga reservada abaixo do
palco precisa acompanhar para os risquinhos continuarem visíveis. */
/* Com as quatro etapas o cartão passou a ter altura equalizada (bloco 9.11),
então a folga abaixo do palco acompanha apenas o deslocamento vertical do
cartão — não precisa mais de um degrau extra nas telas largas. */
@media (min-width: 1282px) {
.section--how:not(.is-static) .how-stage {
padding-bottom: calc(clamp(24px, 3.5vw, 56px) + 96px);
}
}
/* 9.10 QUATRO ETAPAS — indicadores, identificação "ETAPA X DE 4" e altura
estável do cartão. A seção passou de 3 para 4 etapas; o cartão central
ganha um piso de altura para que todas as etapas ocupem a mesma área
visual e o palco não mude de altura ao trocar de etapa. */
/* Identificação textual da etapa — discreta, em caixa alta, dourado suave. */
.how-progress__label {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.7rem;
font-weight: 600;
color: rgba(245, 185, 63, 0.66);
}
.how-progress__hint {
letter-spacing: 0.06em;
text-transform: none;
}
/* Mobile: card, indicadores e identificação empilhados na ordem pedida. */
@media (max-width: 899px) {
.section--how:not(.is-static) .how-progress {
gap: 8px;
}
/* quatro indicadores ainda confortáveis ao toque em telas de 360px:
a área tocável continua com 44px de altura e apenas a folga lateral
é reduzida, sem comprimir os risquinhos. */
.section--how:not(.is-static) .how-progress__navigation {
gap: 12px;
}
.section--how:not(.is-static) .how-progress__controls {
gap: 2px;
}
.section--how:not(.is-static) .how-dot {
width: 40px;
}
}
@media (max-width: 400px) {
.section--how:not(.is-static) .how-progress__navigation {
gap: 8px;
}
.section--how:not(.is-static) .how-dot {
width: 36px;
}
.section--how:not(.is-static) .how-dot > span {
width: 22px;
}
.section--how:not(.is-static) .how-dot.is-current > span {
width: 34px;
}
}
/* Desktop: indicadores abaixo do cartão e, logo abaixo deles, a
identificação da etapa. A dica de gesto não aparece no desktop. */
@media (min-width: 900px) {
.section--how:not(.is-static) .how-progress {
flex-direction: column;
gap: 10px;
}
.section--how:not(.is-static) .how-progress__hint {
display: none;
}
.section--how:not(.is-static) .how-progress__label {
display: block;
}
}
/* 9.11 ALTURA ESTÁVEL DO PALCO COM QUATRO ETAPAS
As etapas continuam sobrepostas (uma visível por vez), mas empilhadas
por grid em vez de posicionamento absoluto. Assim o palco passa a ter
a altura da etapa mais alta e todos os cartões recebem exatamente a
mesma área visual — sem saltos de layout ao trocar de etapa e sem
números fixos de altura. O modo sem movimento (.is-static) continua
com a lista empilhada original. */
.section--how:not(.is-static) .how-steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.section--how:not(.is-static) .how-steps .step {
position: relative;
inset: auto;
grid-area: 1 / 1;
}
/* todos os cartões ocupam a altura da linha do grid (= etapa mais alta) */
.section--how:not(.is-static) .how-steps .step__body {
box-sizing: border-box;
height: 100%;
}
/* 9.12 SETAS DE NAVEGAÇÃO MANUAL — exclusivas do desktop
Dois botões circulares ladeando os risquinhos, na mesma linha. Ficam
ocultos por padrão: só aparecem a partir de 900px e fora do modo sem
movimento, de forma que a composição do mobile permanece intacta. */
.how-arrow {
display: none;
}
@media (min-width: 900px) {
.section--how:not(.is-static) .how-arrow {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid rgba(245, 185, 63, 0.18);
border-radius: 999px;
background: rgba(20, 18, 14, 0.62);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
backdrop-filter: blur(10px) saturate(1.1);
color: var(--ink-2);
cursor: pointer;
box-shadow:
0 10px 22px -18px rgba(0, 0, 0, 0.9),
inset 0 1px 0 rgba(255, 255, 255, 0.035);
transition:
color 260ms var(--ease),
border-color 260ms var(--ease),
background-color 260ms var(--ease),
box-shadow 260ms var(--ease),
transform 260ms var(--ease);
}
.section--how:not(.is-static) .how-arrow svg {
width: 19px;
height: 19px;
display: block;
}
.section--how:not(.is-static) .how-arrow:hover {
color: var(--gold);
border-color: rgba(245, 185, 63, 0.42);
background: rgba(28, 24, 18, 0.78);
box-shadow:
0 14px 28px -18px rgba(0, 0, 0, 0.95),
0 0 18px -6px rgba(245, 185, 63, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.section--how:not(.is-static) .how-arrow--prev:hover {
transform: translateX(-2px);
}
.section--how:not(.is-static) .how-arrow--next:hover {
transform: translateX(2px);
}
.section--how:not(.is-static) .how-arrow:active {
transform: scale(0.94);
}
.section--how:not(.is-static) .how-arrow:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
color: var(--gold);
border-color: rgba(245, 185, 63, 0.42);
}
/* respiro entre as setas e o grupo de risquinhos, mantendo o conjunto
centralizado em relação ao cartão (o grupo continua sendo o eixo). */
.section--how:not(.is-static) .how-progress__navigation {
gap: clamp(8px, 1vw, 16px);
}
}
@media (prefers-reduced-motion: reduce) {
.how-arrow,
.how-arrow:hover,
.how-arrow:active {
transform: none !important;
}
}