/* ============================================================
   HOME — sites para negócios locais (público leigo, celular)
   Independente do portfolio/styles.css (vitrine técnica).

   Tipo:   Bricolage Grotesque (títulos) + Instrument Sans (resto)
   Cor:    rosa = ação · navy = peso e prova · cinza = apoio
           texto sobre rosa é sempre navy · rosa-vivo só sobre navy
   Forma:  painéis navy arredondados EMBUTIDOS na página, alternando
           com branco — o ritmo vem da referência (Behance/Lawyer Robert)
   Motion: uma entrada orquestrada no hero; depois, revelação por seção,
           escalonada; contadores nos dados; hover que responde.
           Tudo desligado em prefers-reduced-motion.
   Mobile-first: base = celular; @media (min-width) só amplia.
   ============================================================ */
:root {
    --branco:      #FFFFFF;
    --navy:        #0F172A;
    --navy-2:      #172033;
    --cinza-card:  #F1F5F9;
    --cinza-texto: #64748B;
    --borda:       #E2E8F0;
    --rosa-link:   #C8144F;   /* letra pequena: link, ícone, numeral */
    --rosa-acao:   #F53D8D;   /* área clicável: botão, selo, faixa CTA */
    --rosa-vivo:   #FF70AE;   /* ênfase só sobre navy */
    --rosa-lavado: #FDE7EF;   /* marca-texto só sobre branco */

    /* derivados com alpha dos tokens acima (sem cor nova) */
    --navy-a12:    rgba(15,23,42,.12);
    --navy-a35:    rgba(15,23,42,.35);
    --branco-a10:  rgba(255,255,255,.10);
    --branco-a18:  rgba(255,255,255,.18);
    --branco-a75:  rgba(255,255,255,.75);

    --display:  'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
    --corpo:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* escala ~1,25 a partir de 17px */
    --t-0:  1.0625rem;
    --t-1:  1.1875rem;
    --t-2:  1.375rem;
    --t-3:  1.75rem;
    --t-4:  clamp(2rem, 6.2vw, 2.875rem);
    --t-5:  clamp(2.5rem, 8.4vw, 4rem);

    --max:     1120px;
    --medida:  60ch;
    --r:       16px;
    --r-lg:    28px;
    --r-sm:    10px;
    --sombra:  0 24px 60px -24px var(--navy-a35);
    --sombra-s: 0 10px 30px -18px var(--navy-a35);
    /* sombra dos cartoes sob o mouse, medida na referencia (Tailwind shadow-xl) */
    --sombra-xl: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);
    /* sobre navy uma sombra navy nao aparece: precisa ser mais escura que o fundo */
    --sombra-frente: 0 26px 55px -14px rgba(0,0,0,.6);
    --ease:    cubic-bezier(.22,.61,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --topo-h:  68px;
    --gutter:  clamp(20px, 5vw, 40px);
    --inset:   clamp(10px, 2vw, 24px);   /* respiro dos painéis até a borda da tela */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); }
/* com o Lenis ativo quem rola e ele: o smooth nativo brigaria com o dele */
html.lenis-smooth { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
html.lenis-stopped { overflow: hidden; }
body {
    font-family: var(--corpo); font-size: var(--t-0); line-height: 1.6;
    color: var(--navy-2); background: var(--branco);
    -webkit-font-smoothing: antialiased;
    padding-bottom: 80px;   /* barra fixa do celular */
}
body.sem-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
picture { display: contents; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--rosa-link); outline-offset: 3px; border-radius: 6px; }

.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.container-estreito { max-width: 800px; }

/* ── Tipografia ───────────────────────────────────────────── */
h1, h2 {
    font-family: var(--display); font-weight: 800; color: var(--navy);
    letter-spacing: -.03em; line-height: 1.02; font-variation-settings: 'opsz' 96;
}
h1 { font-size: var(--t-5); }
h2 { font-size: var(--t-4); margin-bottom: 14px; max-width: 20ch; }
h3 { font-family: var(--display); font-size: var(--t-1); font-weight: 700; color: var(--navy); line-height: 1.25; margin-bottom: 8px; letter-spacing: -.01em; }
p  { max-width: var(--medida); }
strong { color: var(--navy); font-weight: 600; }

/* marca-texto que "pinta" quando entra */
mark {
    color: inherit; padding: 0 .08em; border-radius: 4px;
    background: linear-gradient(var(--rosa-lavado), var(--rosa-lavado)) no-repeat 0 0 / 100% 100%;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
    transition: background-size .9s var(--ease-out) .55s;
}
.js mark { background-size: 0% 100%; }
.js.entrou mark, .js .visivel mark { background-size: 100% 100%; }

.secao-cabeca { margin-bottom: 34px; }
.secao-sub { font-size: var(--t-1); color: var(--cinza-texto); margin-top: 8px; }
.quebra { display: none; }

/* ── Botões ───────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 52px; padding: 8px 8px 8px 24px; border-radius: 999px;
    font-family: var(--corpo); font-weight: 600; font-size: 1rem; line-height: 1.2;
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn .seta {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    transition: transform .35s var(--ease-out), background .25s var(--ease);
}
.btn .seta svg { width: 16px; height: 16px; }
.btn:hover .seta { transform: rotate(45deg); }

.btn-acao { background: var(--rosa-acao); color: var(--navy); }
.btn-acao .seta { background: var(--navy); color: var(--rosa-acao); }
.btn-acao:hover { box-shadow: 0 12px 28px -12px var(--rosa-acao); transform: translateY(-1px); }

.btn-navy { background: var(--navy); color: var(--branco); }
.btn-navy .seta { background: var(--branco); color: var(--navy); }
.btn-navy:hover { background: var(--navy-2); transform: translateY(-1px); }

.btn-sm { min-height: 44px; padding: 6px 6px 6px 18px; font-size: .92rem; }
.btn-sm .seta { width: 32px; height: 32px; }

.link-rosa { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--rosa-link); }
.link-rosa svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.link-rosa:hover svg { transform: translate(2px, -2px); }

/* ── Topo ─────────────────────────────────────────────────── */
.topo {
    position: sticky; top: 0; z-index: 50;
    background: var(--branco); border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s;
}
.topo.rolou { border-bottom-color: var(--borda); box-shadow: 0 8px 24px -20px var(--navy-a35); }
/* A trava de rolagem do menu poe overflow:hidden no html e no body, e isso
   CANCELA o position:sticky: o header voltava pra sua posicao estatica no topo
   do documento e sumia da tela, junto com o botao de fechar. Enquanto o menu
   estiver aberto ele passa a fixed, que nao depende do container de rolagem. */
body.sem-scroll .topo { position: fixed; top: 0; left: 0; right: 0; }
.topo-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--topo-h); }
.marca { font-family: var(--display); font-weight: 800; color: var(--navy); font-size: 1.2rem; letter-spacing: -.03em; }
.topo-acoes { display: flex; align-items: center; gap: 8px; }

.menu-btn { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; background: none; border: 0; cursor: pointer; border-radius: var(--r-sm); }
.menu-btn span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.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 {
    position: fixed; left: 0; right: 0; top: var(--topo-h); bottom: 0; z-index: 40;
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px var(--gutter) 28px;
    background: var(--branco); border-top: 1px solid var(--borda);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    overflow-y: auto;
}
.menu.aberto { opacity: 1; transform: none; pointer-events: auto; }
.menu a:not(.btn) { display: flex; align-items: center; min-height: 54px; padding: 0 12px; font-family: var(--display); font-weight: 700; font-size: var(--t-2); color: var(--navy); border-radius: var(--r-sm); letter-spacing: -.01em; }
.menu a:not(.btn):hover { background: var(--cinza-card); }
.menu-cta { margin-top: 16px; }
.topo-cta { display: none; }

/* ── Hero — a entrada orquestrada da página ───────────────── */
.hero { padding-block: clamp(28px, 6vw, 72px) clamp(40px, 7vw, 80px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.hero h1 { margin-bottom: 20px; max-width: 14ch; }
.hero-sub { font-size: var(--t-1); color: var(--cinza-texto); margin-bottom: 28px; max-width: 36ch; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
/* a assinatura do hero: o rosto aparece na primeira tela, nao no fim da pagina */
.hero-nota { display: flex; align-items: center; gap: 13px; margin-top: 26px; max-width: 42ch; }
.hero-nota p { font-size: .92rem; line-height: 1.5; color: var(--cinza-texto); max-width: none; }
.hero-nota strong { display: block; color: var(--navy); font-weight: 600; }
.hero-autor-foto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--rosa-lavado); }
.hero-autor-link { color: var(--rosa-link); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--rosa-lavado); }
.hero-autor-link:hover { border-bottom-color: var(--rosa-link); }

/* cada linha do título entra em sequência */
/* cada linha do titulo corre atras de uma mascara: o texto sobe de tras dela.
   O respiro e negativo devolvem o espaco dos acentos e das pernas do g/c. */
.hero .linha-mask { display: block; overflow: hidden; padding: .14em 0 .12em; margin: -.14em 0 -.12em; }
.hero .linha { display: block; }
@keyframes sobe { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .hero-texto > *, .js .hero .linha { opacity: 0; }
.entrou .hero .linha    { animation: sobe .8s var(--ease-out) both; }
/* GSAP carregou: ele controla o hero, o CSS so ficaria brigando.
   Sob .gsap a linha fica escondida pela MASCARA (deslocada pra baixo), nunca
   pela opacidade: o GSAP so anima a posicao, entao opacidade 0 aqui deixaria
   o titulo invisivel pra sempre. */
.gsap .hero .linha, .gsap .hero-texto > *, .gsap .hero-visual { animation: none !important; }
.gsap .hero .linha, .gsap .hero h1 { opacity: 1; }
/* o GSAP pinta o marca-texto do hero: a transicao do CSS animaria a mesma
   propriedade em cima e as duas brigariam (o fundo ia e voltava). */
.gsap .hero mark { transition: none; }
.entrou .hero-texto > * { animation: sobe .8s var(--ease-out) both; }
.entrou .hero h1 { opacity: 1; animation: none; }
.entrou .hero .linha:nth-child(1) { animation-delay: .05s; }
.entrou .hero .linha:nth-child(2) { animation-delay: .15s; }
.entrou .hero .linha:nth-child(3) { animation-delay: .25s; }
.entrou .hero .linha:nth-child(4) { animation-delay: .35s; }
.entrou .hero-sub  { animation-delay: .5s; }
.entrou .hero-ctas { animation-delay: .62s; }

/* o palco navy do mockup */
.hero-visual { position: relative; perspective: 1100px; }
.js .hero-visual { opacity: 0; }
.entrou .hero-visual { animation: sobe 1s var(--ease-out) .35s both; }
.palco {
    transform-style: preserve-3d; will-change: transform;
    position: relative; margin: 0 19% 10% 0;
    /* moldura fina: o navy e so uma borda em volta do print, nao um painel.
       A folga da direita e o minimo pro celular nao cobrir a imagem. */
    padding: 14px;
    background: var(--navy); border-radius: 20px;
}
.hero-desktop { width: 100%; border-radius: 10px; box-shadow: var(--sombra); }
.hero-mobile {
    position: absolute; right: -16%; top: 50%; width: 31%;
    transform: translateY(-50%); border-radius: 18px; border: 5px solid var(--branco);
    box-shadow: var(--sombra); will-change: transform;
}

/* fundo liquido do hero (WebGL, efeitos/fundo-shader.js). Opacidade baixa de
   proposito: o branco continua sendo o fundo, o rosa so "respira" atras do texto.
   isolation no .hero deixa o z-index:-1 acima do fundo da pagina e abaixo do
   conteudo, sem mexer no empilhamento do mockup 3D. A mascara apaga a borda de
   baixo, senao o fundo terminava numa linha reta em cima da faixa. */
.hero { position: relative; isolation: isolate; }
.hero-fundo {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
    opacity: 0; transition: opacity 1.6s var(--ease);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
            mask-image: linear-gradient(to bottom, #000 62%, transparent);
}
.hero-fundo.pronto { opacity: .55; }

/* ── Faixa em movimento ───────────────────────────────────── */
/* navy levemente girada e mais larga que a tela: as pontas nunca aparecem.
   O respiro vertical do .faixa e o que a rotacao precisa pra nao ser cortada. */
.faixa { overflow: hidden; overflow: clip; padding-block: clamp(14px, 3vw, 28px); }
.faixa-trilho {
    display: flex; margin-inline: -3%;
    background: var(--navy); color: var(--branco);
    padding-block: clamp(12px, 2vw, 18px);
    transform: rotate(-1.5deg);
}
.faixa-grupo {
    flex-shrink: 0; min-width: 100%; max-width: none;
    display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); padding-right: clamp(18px, 3vw, 36px);
    white-space: nowrap; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
    font-size: clamp(1.25rem, 3.4vw, 2.1rem); font-variation-settings: 'opsz' 96;
}
.faixa-grupo i { font-style: normal; color: var(--rosa-vivo); font-size: .7em; }

/* ── Seções e painéis embutidos ───────────────────────────── */
.secao { padding-block: clamp(56px, 9vw, 104px); }
.painel {
    margin-inline: var(--inset); border-radius: var(--r-lg); overflow: hidden;
    background: var(--navy); color: var(--branco);
    padding-block: clamp(48px, 8vw, 96px);
}
/* constelacao rosa atras do conteudo do painel (efeitos/fundo-particulas.js) */
.painel { position: relative; isolation: isolate; }
.painel-fundo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .7; }
.painel h2 { color: var(--branco); }
.painel .destaque { color: var(--rosa-vivo); }
.painel .secao-sub { color: var(--branco-a75); }
.painel p { color: var(--branco-a75); }
.painel strong { color: var(--branco); }

/* traço que se desenha */
.traco { display: block; width: 56px; height: 4px; background: var(--rosa-vivo); margin-top: 18px; border-radius: 2px; transform-origin: left; transition: transform .8s var(--ease-out) .25s; }
.js .traco { transform: scaleX(0); }
.js .visivel .traco { transform: scaleX(1); }

/* ── Revelação ao rolar ───────────────────────────────────── */
.reveal { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
:where(.js .reveal) { opacity: 0; transform: translateY(24px); }
:where(.js .reveal.visivel) { opacity: 1; transform: none; }
/* :where() zera a especificidade destes resets. Sem isso eles valem (0,3,0)
   e vencem qualquer `.card:hover { transform: ... }`, que vale (0,2,0) —
   o hover dos cartoes simplesmente nao acontecia. */
/* filhos escalonados: cada card entra 90ms depois do anterior */
.escalona > * { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
:where(.js .escalona) > * { opacity: 0; transform: translateY(22px); }
:where(.js .escalona.visivel) > * { opacity: 1; transform: none; }
/* O atraso e so pra entrada escalonada. Sem o :where() ele vale (0,3,0) e
   continua valendo depois — o 6o cartao esperava meio segundo pra reagir ao
   mouse. O .assentou, posto pelo JS quando a entrada termina, zera tudo. */
:where(.escalona.visivel) > :nth-child(1) { transition-delay: .05s; }
:where(.escalona.visivel) > :nth-child(2) { transition-delay: .14s; }
:where(.escalona.visivel) > :nth-child(3) { transition-delay: .23s; }
:where(.escalona.visivel) > :nth-child(4) { transition-delay: .32s; }
:where(.escalona.visivel) > :nth-child(5) { transition-delay: .41s; }
:where(.escalona.visivel) > :nth-child(6) { transition-delay: .50s; }
:where(.escalona.visivel) > :nth-child(7) { transition-delay: .59s; }
.escalona.assentou > * { transition-delay: 0s; }

/* ── Comparativo Instagram × Google (dentro do painel navy) ─ */
.comparativo { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
.comp-card {
    position: relative; background: var(--navy-2); border: 1px solid var(--branco-a10);
    border-radius: var(--r); padding: 28px 26px 30px;
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), opacity .4s var(--ease), border-color .3s;
}
/* o cartao sob o mouse cresce e vem pra frente; o outro recua.
   E o recuo do vizinho que cria o destaque — sozinho, o zoom passa despercebido. */
@media (hover: hover) and (pointer: fine) {
    .comparativo:hover .comp-card { opacity: .45; }
    .comparativo .comp-card:hover {
        opacity: 1; transform: scale(1.05); z-index: 2;
        box-shadow: var(--sombra-frente); border-color: var(--rosa-vivo);
    }
}
.comp-tag { display: block; font-size: .9rem; font-weight: 600; color: var(--branco-a75); margin-bottom: 10px; }
.comp-card h3 { font-size: var(--t-3); font-weight: 800; color: var(--branco); letter-spacing: -.02em; margin-bottom: 10px; }
.comp-card p { max-width: none; }
.comp-card-destaque { border-color: var(--rosa-vivo); }
.comp-card-destaque .comp-tag, .comp-card-destaque h3 { color: var(--rosa-vivo); }
.nota { margin-top: 30px; padding-left: 18px; border-left: 4px solid var(--rosa-vivo); }

/* ── Benefícios: cards com ícone ──────────────────────────── */
.beneficios { display: grid; grid-template-columns: 1fr; gap: 16px; }
.beneficio {
    background: var(--cinza-card); border-radius: var(--r); padding: 26px 24px 28px;
    /* mesma receita medida no card da referencia: escala 1,02 + sombra grande em 300ms */
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
/* o cartao vira navy sob o mouse: e o gesto mais caracteristico da referencia,
   e aqui ele cabe porque o rosa-vivo so pode aparecer sobre navy */
/* no toque o :hover gruda depois do tap e o cartao ficava navy pra sempre */
@media (hover: hover) and (pointer: fine) {
    .beneficio:hover { transform: scale(1.02); box-shadow: var(--sombra-xl); background: var(--navy); }
    .beneficio:hover h3 { color: var(--branco); }
    .beneficio:hover p  { color: var(--borda); }
    .beneficio:hover .icone { background: var(--navy-2); border-color: var(--navy-2); color: var(--rosa-vivo); }
}
.icone { width: 46px; height: 46px; border-radius: 12px; background: var(--branco); color: var(--rosa-link); display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--borda); transition: background .3s, color .3s, border-color .3s; }
.beneficio h3, .beneficio p { transition: color .35s var(--ease); }

/* ícones que se desenham quando a grade entra: pathLength="1" no HTML faz o
   traço inteiro valer 1, então dasharray 1 + offset 1 = invisível, offset 0 = completo.
   Cada um começa depois do seu cartão (mesmo escalonamento do .escalona + .3s). */
:where(.js .beneficios) .icone svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out); }
:where(.js .beneficios.visivel) .icone svg > * { stroke-dashoffset: 0; }
:where(.beneficios.visivel) > :nth-child(1) .icone svg > * { transition-delay: .35s; }
:where(.beneficios.visivel) > :nth-child(2) .icone svg > * { transition-delay: .44s; }
:where(.beneficios.visivel) > :nth-child(3) .icone svg > * { transition-delay: .53s; }
:where(.beneficios.visivel) > :nth-child(4) .icone svg > * { transition-delay: .62s; }
:where(.beneficios.visivel) > :nth-child(5) .icone svg > * { transition-delay: .71s; }
:where(.beneficios.visivel) > :nth-child(6) .icone svg > * { transition-delay: .80s; }

/* e sob o mouse cada ícone faz o gesto do que ele representa */
@media (hover: hover) and (pointer: fine) {
    .beneficio:hover .icone-busca svg   { animation: icone-procura 1s var(--ease); }
    .beneficio:hover .icone-escudo svg  { animation: icone-pulsa .7s var(--ease-out); }
    .beneficio:hover .icone-escudo svg path:last-child { animation: icone-check .6s var(--ease-out) .12s both; }
    .beneficio:hover .icone-funil svg   { animation: icone-goteja .9s var(--ease); }
    .beneficio:hover .icone-chat svg    { animation: icone-balanca .7s var(--ease); }
    .beneficio:hover .icone-celular svg { animation: icone-vibra .45s linear; }
    .beneficio:hover .icone-mundo svg   { animation: icone-gira 1.1s var(--ease-out); }
}
@keyframes icone-procura { 25% { transform: translate(3px, -2px); } 50% { transform: translate(-2px, -3px); } 75% { transform: translate(-3px, 2px); } }
@keyframes icone-pulsa   { 40% { transform: scale(1.18); } }
@keyframes icone-check   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes icone-goteja  { 30% { transform: translateY(-3px); } 60% { transform: translateY(3px); } }
@keyframes icone-balanca { 25% { transform: rotate(-12deg); } 50% { transform: rotate(9deg); } 75% { transform: rotate(-5deg); } }
@keyframes icone-vibra   { 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(6deg); } }
@keyframes icone-gira    { to { transform: rotateY(360deg); } }
.beneficio p { max-width: none; }

/* ── Dados: painel navy com cards; no celular, trilho deslizante ── */
.dados-cabeca h2 { max-width: 22ch; }
.dados-grid {
    display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scrollbar-width: none;
}
.dados-grid::-webkit-scrollbar { display: none; }
.dado { scroll-snap-align: start; background: var(--navy-2); border: 1px solid var(--branco-a10); border-radius: var(--r); padding: 26px 24px 28px; }
.dado-num, .painel .dado-num { display: block; font-family: var(--display); font-weight: 800; color: var(--rosa-vivo); font-size: clamp(2.75rem, 10vw, 3.75rem); letter-spacing: -.04em; line-height: .95; margin-bottom: 12px; font-variation-settings: 'opsz' 96; font-variant-numeric: tabular-nums; }
.dado p { max-width: none; }
.dado sup a { color: var(--rosa-vivo); font-weight: 600; margin-left: 2px; }
.dados-aviso { margin-top: 30px; padding-left: 18px; border-left: 4px solid var(--rosa-vivo); max-width: none; }
/* o aviso honesto acende palavra por palavra conforme a pessoa rola */
.dados-aviso .pal { color: var(--branco); }
.fontes { margin-top: 24px; padding-left: 18px; font-size: .84rem; color: var(--branco-a75); }
.fontes li { margin-bottom: 4px; }
.fontes a { color: var(--branco); text-decoration: underline; text-decoration-color: var(--branco-a18); }
.fontes a:hover { text-decoration-color: var(--rosa-vivo); }

/* ── Exemplos ─────────────────────────────────────────────── */
.cases { display: grid; grid-template-columns: 1fr; gap: 28px; }
.case {
    display: flex; flex-direction: column; background: var(--branco);
    border: 1px solid var(--borda); border-radius: var(--r-lg); overflow: hidden;
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .case:hover { transform: translateY(-5px); box-shadow: var(--sombra); } }
.case-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cinza-card); border-bottom: 1px solid var(--borda); }
/* pilula que segue o cursor sobre o print: diz que da pra clicar e abrir */
.case-cursor {
    position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none;
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 10px 16px; border-radius: 999px;
    background: var(--navy); color: var(--branco);
    font-size: .86rem; font-weight: 600; letter-spacing: .01em;
    opacity: 0; will-change: transform;
}
.case-cursor svg { width: 14px; height: 14px; }
/* dedo nao tem cursor: no toque a pilula nao existe */
@media (hover: none), (pointer: coarse) { .case-cursor { display: none; } }
.case-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .case:hover .case-img img { transform: scale(1.04); } }
.case-corpo { padding: 22px 24px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; }
.case-corpo h3 { font-size: var(--t-2); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.case-tag { display: inline-block; background: var(--rosa-lavado); color: var(--navy); font-size: .88rem; font-weight: 600; line-height: 1.4; padding: 5px 13px; border-radius: 999px; }
.case-corpo p { max-width: none; margin: 0; }
.case-link { margin-top: auto; padding-top: 8px; }
.selo { display: inline-block; vertical-align: middle; margin-left: 8px; font-family: var(--corpo); font-size: .76rem; font-weight: 600; color: var(--cinza-texto); border: 1px solid var(--borda); padding: 3px 10px; border-radius: 999px; letter-spacing: 0; }

/* ── Como funciona: cards em degrau, numeral grande ───────── */
.passos { position: relative; list-style: none; display: grid; grid-template-columns: 1fr; gap: 14px; }
/* fio pontilhado ligando os passos, como a constelacao da referencia.
   Passa POR TRAS dos cartoes: so aparece nos vaos. */
.passos-fio { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.passos-fio polyline { fill: none; stroke: var(--rosa-acao); stroke-width: 1.5; stroke-dasharray: 5 7; }
.passos li {
    position: relative; z-index: 1;
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r);
    padding: 26px 24px 28px 24px;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s;
}
@media (hover: hover) and (pointer: fine) { .passos li:hover { transform: translateY(-4px); box-shadow: var(--sombra-s); border-color: var(--rosa-lavado); } }
.passo-num { display: block; font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--rosa-link); letter-spacing: -.04em; margin-bottom: 14px; font-variation-settings: 'opsz' 96; }
.passos p { color: var(--cinza-texto); }

/* ── Dúvidas ──────────────────────────────────────────────── */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq details[open] { border-color: var(--rosa-lavado); box-shadow: var(--sombra-s); }
.faq summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px; min-height: 64px;
    font-family: var(--display); font-weight: 700; font-size: var(--t-0); line-height: 1.3; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borda);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8144F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
    transition: transform .35s var(--ease-out), background-color .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--rosa-lavado); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq details p { padding: 0 20px 22px; color: var(--navy-2); animation: abre .35s var(--ease-out); }

/* ── Quem sou eu ──────────────────────────────────────────────
   Retrato grande em cartao, nao a bolinha de 112px: a foto e o
   argumento de confianca da pagina, entao ela ocupa espaco.
   A secao e um painel proprio (cinza-card, embutido como os navy):
   sem isso o mockup da Delka, que fecha o hero, e o retrato, que
   abre esta secao, ficavam os dois sobre branco, com 115px de vao
   e nenhuma fronteira — liam como um par de imagens coladas. */
.quem {
    margin-inline: var(--inset); border-radius: var(--r-lg);
    background: var(--cinza-card);
    margin-block: clamp(20px, 5vw, 36px) clamp(16px, 3vw, 32px);
}
.quem-inner { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
/* isolation: sem isso a moldura rosa (z-index:-1) iria parar ATRAS do fundo do painel */
.quem-retrato { position: relative; isolation: isolate; width: 100%; max-width: 300px; }
.quem-foto { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }
/* moldura rosa deslocada atras do retrato */
.quem-retrato::before {
    content: ''; position: absolute; inset: 14px -14px -14px 14px;
    border: 2px solid var(--rosa-acao); border-radius: var(--r-lg); z-index: -1;
}
.quem-texto h2 { margin-bottom: 16px; }
.quem-chamada { font-size: var(--t-2); font-family: var(--display); font-weight: 700; color: var(--navy); letter-spacing: -.02em; margin-bottom: 12px; max-width: none; }
.quem p { font-size: var(--t-0); margin-bottom: 14px; }
.quem-fatos { list-style: none; display: grid; gap: 10px; margin: 22px 0 20px; }
.quem-fatos li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--navy-2); }
.quem-fatos svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--rosa-link); }
.quem-link { margin-top: 4px; }

/* ── CTA final: painel rosa embutido ──────────────────────── */
.cta-final {
    margin-inline: var(--inset); border-radius: var(--r-lg);
    background: var(--rosa-acao); color: var(--navy);
    padding-block: clamp(52px, 8vw, 92px);
}
.cta-final h2 { color: var(--navy); max-width: 16ch; }
.cta-final p { color: var(--navy); margin-bottom: 30px; font-size: var(--t-1); }
.cta-final .container { display: flex; flex-direction: column; align-items: flex-start; }

/* ── Rodapé ───────────────────────────────────────────────── */
.rodape { color: var(--cinza-texto); font-size: .92rem; padding-block: 30px; margin-top: 24px; border-top: 1px solid var(--borda); }
.rodape strong { display: block; color: var(--navy); font-weight: 700; font-family: var(--display); }
.rodape-sub { display: block; font-size: .86rem; margin-top: 2px; }
.rodape-inner { display: flex; flex-direction: column; gap: 18px; }
.rodape-links { display: flex; flex-direction: column; gap: 10px; }
.rodape-links a:hover { color: var(--navy); text-decoration: underline; }
.rodape-dev { font-size: .86rem; }

/* ── Alvos de toque ───────────────────────────────────────────
   Sem cursor, tudo que se clica precisa de 44px. O padding negativo
   aumenta a area sem mexer no layout. */
@media (hover: none), (pointer: coarse) {
    .link-rosa, .case-link { padding-block: 10px; }
    .marca { display: inline-flex; align-items: center; min-height: 44px; }
    .dado sup a, .fontes a { display: inline-block; padding: 12px; margin: -12px; }
    .rodape-links a { display: inline-block; padding-block: 11px; }
}

/* ── Barra fixa do celular ────────────────────────────────── */
.barra-fixa {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--branco); border-top: 1px solid var(--borda);
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .4s var(--ease-out);
}
.barra-fixa.mostra { transform: none; }
.barra-fixa .btn { width: 100%; justify-content: space-between; }
.btn-rotulo { display: inline-flex; align-items: center; gap: 10px; }

/* ============================================================
   AMPLIANDO A PARTIR DO CELULAR
   ============================================================ */
@media (min-width: 600px) {
    .beneficios { grid-template-columns: 1fr 1fr; }
    .comparativo { grid-template-columns: 1fr 1fr; gap: 20px; }
    .quem-inner { grid-template-columns: 300px 1fr; gap: 44px; align-items: center; }
    .rodape-inner { flex-direction: row; justify-content: space-between; align-items: center; }
    .rodape-links { flex-direction: row; gap: 24px; align-items: center; }
    .passos { grid-template-columns: 1fr 1fr; }
    .dados-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

@media (min-width: 861px) {
    .marca, .topo .btn { white-space: nowrap; }

    .hero-grid { grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 72px); }
    .hero h1 { max-width: none; }
    .quebra { display: block; }
    .palco { margin: 0 14% 0 0; padding: 16px; }
    .hero-mobile { right: -17%; width: 31%; }

    .cases { grid-template-columns: 1fr 1fr; gap: 32px; }
    .cta-final .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
    .cta-final p { margin-bottom: 0; }
    .cta-final h2 { margin-bottom: 8px; }
}

@media (min-width: 1024px) {
    .beneficios { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .dados-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    /* align-items:start e obrigatorio: com o stretch padrao o margin-top
       so encolhia o cartao em vez de descer o degrau, e o fio ficava reto.
       O vao largo e o que deixa o pontilhado visivel entre um cartao e outro. */
    .passos { grid-template-columns: repeat(4, 1fr); gap: 44px; align-items: start; }
    /* nth-of-type, nao nth-child: o SVG do fio e injetado como primeiro filho
       do .passos e deslocaria a contagem em um. */
    .passos li:nth-of-type(2) { margin-top: 40px; }
    .passos li:nth-of-type(3) { margin-top: 80px; }
    .passos li:nth-of-type(4) { margin-top: 120px; }
}

/* ============================================================
   O NAV EM PILULA PRECISA DE MAIS LARGURA QUE O RESTO DO LAYOUT
   Medido: logo 131 + nav 672 + botao 218 = 1045px, e a caixa do
   header trava em 1040px. Nao cabia em largura NENHUMA — o botao
   saia cortado ate em 1440. Com o nav apertado a soma cai pra ~1005
   e cabe a partir de 1120px. Abaixo disso, hamburguer; o layout
   segue de desktop desde 861 e a barra fixa de baixo leva ao CTA.
   ============================================================ */
@media (min-width: 1120px) {
    body { padding-bottom: 0; }
    .barra-fixa { display: none; }
    .topo { background: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .menu-btn { display: none; }
    .topo-cta { display: inline-flex; padding-left: 18px; }
    /* menu vira uma pílula central, como na referência */
    .menu { position: static; inset: auto; display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 4px; background: var(--cinza-card); border: 0; border-radius: 999px; opacity: 1; transform: none; pointer-events: auto; overflow: visible; }
    /* nada no header pode quebrar linha */
    .menu a:not(.btn) { min-height: 0; padding: 8px 9px; font-family: var(--corpo); font-weight: 500; font-size: .85rem; color: var(--navy-2); letter-spacing: 0; border-radius: 999px; white-space: nowrap; transition: background .25s, color .25s; }
    .menu a:not(.btn):hover { color: var(--navy); background: var(--branco); }
    .menu-cta { display: none; }
}

/* troca de página (home ↔ portfólio ↔ projetos) com fade cruzado, sem JS.
   O portfolio/styles.css tem a mesma regra: as duas pontas precisam aceitar. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .icone svg, .icone svg > * { animation: none !important; }
    .hero-texto > *, .hero .linha, .hero-visual, .reveal, .escalona > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
    .traco { transform: none; transition: none; }
    mark { background-size: 100% 100%; transition: none; }
    .btn, .btn .seta, .case, .case-img img, .beneficio, .passos li, .comp-card, .faq summary::after, .faq details p, .barra-fixa, .link-rosa svg { transition: none; animation: none; }
}