/* Agência M3 Hub: o estilo comum de todas as páginas. Tipografia, neutros, ritmo e efeitos vêm do site da
   Flora Nativa Vale; a marca, o cobalto, o âmbar e o verde do WhatsApp continuam os da agência.
   O build carimba /estilo.css?v=<hash>, como faz com o chat.js: mudou o arquivo, muda a URL. */

/* Inter e Inter Tight (rsms/inter, SIL Open Font License 1.1), subconjunto latino do Google Fonts, servidas daqui. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300 600;font-display:swap;src:url(/inter-tight.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/inter.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#fff;--bg-2:#f5f5f2;--ink:#111;--ink-2:#6b6b66;--ink-3:#6f6f6a;--line:#e3e3e3;--line-2:#d2d2cc;
  --cobalt:#12488E;--cobalt-2:#0E3A73;--cobalt-ink:#fff;
  --amber:#F3B93D;--amber-ink:#1B1403;--amber-text:#8A5600;
  --dark:#111;--dark-ink:#f5f5f2;--dark-ink-2:#b4b4ad;--dark-line:#2e2e2b;
  --sel:#111;--sel-ink:#fff;
  --display:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-suave:cubic-bezier(.22,1,.36,1);
  --raio:20px;--margem:clamp(20px,4vw,56px);--vao:24px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111;--bg-2:#1a1a19;--ink:#f2f2ef;--ink-2:#a8a8a2;--ink-3:#9a9a94;--line:#2a2a28;--line-2:#3a3a37;
    --cobalt:#8FB4EA;--cobalt-2:#A9C6F0;--cobalt-ink:#111;--amber-text:#F3B93D;--sel:#F3B93D;--sel-ink:#111;
    --dark:#0a0a0a;--dark-line:#262624;
  }
}
:root[data-theme="dark"]{
  --bg:#111;--bg-2:#1a1a19;--ink:#f2f2ef;--ink-2:#a8a8a2;--ink-3:#9a9a94;--line:#2a2a28;--line-2:#3a3a37;
  --cobalt:#8FB4EA;--cobalt-2:#A9C6F0;--cobalt-ink:#111;--amber-text:#F3B93D;--sel:#F3B93D;--sel-ink:#111;
  --dark:#0a0a0a;--dark-line:#262624;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:64px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--sel);color:var(--sel-ink)}
:root{scrollbar-color:var(--line-2) transparent;caret-color:var(--cobalt)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--margem)}

/* Tipografia (Flora: títulos em Inter Tight, leves; texto em Inter) */
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:clamp(1.9rem,3.4vw,3rem);font-weight:400;letter-spacing:-.015em;line-height:1.12}
h2{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:400;letter-spacing:-.01em;line-height:1.18}
h3{font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:500;letter-spacing:0;line-height:1.25}
p{margin:0}
b,strong{font-weight:600}
.sub,.lead{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.5;letter-spacing:-.005em;color:var(--ink-2);max-width:46em}
.nota{font-size:.85rem;color:var(--ink-3)}
.num{font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:300;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
/* Texto corrido justificado no computador, como na Flora; no celular, alinhado à esquerda. */
@media(min-width:801px){.texto p,.artigo p,.txt{text-align:justify;text-align-last:left;hyphens:auto}}

/* Botões: pílula de 1 px, peso leve; ao passar o mouse, inverte. */
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid currentColor;border-radius:999px;padding:11px 20px;font:inherit;font-size:.95rem;line-height:1.3;text-decoration:none;cursor:pointer;background:transparent;color:inherit;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn svg{flex:none}
.btn-amber{background:var(--amber);border-color:var(--amber);color:var(--amber-ink);font-weight:500}
.btn-cobalto{background:var(--cobalt);border-color:var(--cobalt);color:var(--cobalt-ink);font-weight:500}
.hero .btn:hover,.cta .btn:hover,.fim .btn:hover{background:var(--dark-ink);border-color:var(--dark-ink);color:#111}
.ir,.todas a{text-decoration:none;border-bottom:1px solid var(--cobalt);padding-bottom:2px;transition:color .2s}
.ir:hover,.todas a:hover{color:var(--cobalt)}
.chat-link{color:var(--cobalt);text-underline-offset:4px}
.chat-abrir-inline{display:inline-block;margin-top:14px;font-size:.92rem;color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Topo */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent}
.nav.rolou{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;font-family:var(--display);font-weight:500;letter-spacing:-.015em;font-size:1.05rem}
.brand svg{display:block}
.menu{display:none;gap:clamp(16px,2vw,30px);font-size:.95rem;font-weight:500}
.menu a{position:relative;padding:4px 0;text-decoration:none}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:currentColor;transition:right .3s var(--ease)}
.menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current="page"]::after{right:0}
@media(min-width:1180px){.menu{display:flex}}
.tema{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;padding:0;margin-left:auto}
.tema:hover{color:var(--ink);border-color:var(--ink)}
.tema .lua{display:none}
:root[data-theme="dark"] .tema .sol,:root:not([data-theme="light"]) .tema .sol{display:none}
:root[data-theme="dark"] .tema .lua,:root:not([data-theme="light"]) .tema .lua{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tema .sol{display:block}:root:not([data-theme="dark"]) .tema .lua{display:none}}
.nav .btn{padding:9px 16px;font-size:.9rem;white-space:nowrap}

/* WhatsApp: botão com o número no topo (direita) e na barra fixa de baixo (centro). */
.zap{background:#0E7A3E;border-color:#0E7A3E;color:#fff;font-weight:500;white-space:nowrap}
.zap:hover,.nav .zap:hover{background:#0B6633;border-color:#0B6633;color:#fff}
/* Rolando pra baixo, o topo sobe e entra a barra de baixo (marca à esquerda, WhatsApp no centro); rolando pra cima, o contrário. */
.zap-baixo{padding:8px 18px;font-size:.9rem}
.zap-baixo b{font-weight:600}
.nav{transition:transform .45s var(--ease),border-color .3s}
.nav.oculta{transform:translateY(-100%)}
.barra-zap{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:8px var(--margem) calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .45s var(--ease)}
.barra-zap.on{transform:none}
.barra-marca{justify-self:start;font-size:.95rem}
.zap-curto{display:none}
@media(max-width:1279px){.zap-num{display:none}.zap-curto{display:inline}}
@media(max-width:520px){.nav-in{gap:10px}.tema{width:36px;height:36px}.barra-marca span{display:none}.zap-baixo{padding:8px 14px}.zap-topo{padding:8px 12px}}
@media(max-width:400px){.nav-in{gap:8px}.brand{font-size:.95rem;gap:7px}.tema{width:34px;height:34px}.zap-topo{gap:6px;font-size:.85rem}}

/* Topo da home: bloco escuro, título embaixo, frase e botões numa linha (o desenho do topo da Flora). */
.hero{position:relative;overflow:hidden;background:var(--dark);color:var(--dark-ink)}
.hero::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-45%;height:95%;background:radial-gradient(60% 60% at 50% 100%,rgba(18,72,142,.62),transparent 70%);pointer-events:none}
.hero-in{position:relative;padding-top:clamp(72px,12vw,168px);padding-bottom:clamp(32px,5vw,64px)}
.hero h1{max-width:18ch;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.08}
.hero-pe{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:22px 40px;margin-top:28px}
.hero .sub{color:var(--dark-ink-2);max-width:48ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.fatos{list-style:none;margin:clamp(40px,6vw,80px) 0 0;padding:20px 0 0;border-top:1px solid var(--dark-line);display:grid;gap:10px 32px;font-size:.85rem;line-height:1.45;color:var(--dark-ink-2)}
.fatos li{position:relative;padding-left:18px}
.fatos li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--amber)}
@media(min-width:801px){.fatos{grid-template-columns:1.25fr 1fr 1fr}}

/* Faixa que corre (a faixa de regiões da Flora) */
.marquee{overflow:hidden;border-bottom:1px solid var(--line);padding:18px 0;white-space:nowrap}
.marquee .track{display:inline-flex;gap:48px;font-family:var(--display);font-size:clamp(1.1rem,2vw,1.6rem);font-weight:300;letter-spacing:-.02em}
.marquee .track span::after{content:"·";margin-left:48px;color:var(--amber-text)}

/* Seções */
section{padding:clamp(48px,6vw,96px) 0}
.band{background:var(--bg-2)}
.head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:62ch}
.par{display:grid;gap:20px}
@media(min-width:801px){.par{grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,56px);align-items:start}}
.texto p{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;color:var(--ink-2);max-width:64ch}

/* Etapas: traço preto em cima, número leve (as etapas da Flora). */
.passos{list-style:none;margin:0;padding:0;display:grid;gap:36px var(--vao)}
.passos li{border-top:1px solid var(--ink);padding-top:16px}
.passos .n{display:block;font-family:var(--display);font-size:1.4rem;font-weight:300;letter-spacing:-.02em;line-height:1;margin-bottom:12px}
.passos h3,.passos b{display:block;margin-bottom:8px}
.passos b{font-family:var(--display);font-weight:500;font-size:1.05rem}
.passos p{color:var(--ink-2);font-size:.95rem;max-width:46ch}
.passos p+p{margin-top:8px}
.passos .ja{color:var(--ink-3);font-size:.88rem}
@media(min-width:640px){.passos{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.passos{grid-template-columns:repeat(3,1fr);row-gap:48px}}
@media(max-width:520px){#processo .passos{row-gap:0}#processo .passos li{display:grid;grid-template-columns:36px 1fr;align-items:baseline;padding:16px 0}#processo .passos .n{grid-row:1/4;font-size:1rem;margin:0}#processo .passos li>:not(.n){grid-column:2}}

/* O que a gente faz: lista de serviços da Flora (linha de baixo que se desenha). */
.linhas{border-top:1px solid var(--line)}
.linha{display:grid;gap:6px 24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
@media(min-width:1024px){.linha{grid-template-columns:1fr 2fr 1.3fr 160px;padding:32px 0}}
.linha p{color:var(--ink-2);max-width:52ch}
.linha .preco{color:var(--ink);font-weight:500;font-size:.92rem;line-height:1.45}
.linha .preco span{white-space:nowrap}
.linha .ir{justify-self:start;white-space:nowrap;font-size:.92rem}

/* Dois ramos */
.ramos{display:grid;gap:40px var(--vao)}
@media(min-width:801px){.ramos{grid-template-columns:1fr 1fr}}
.ramo{display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-top:1px solid var(--ink);padding-top:18px}
.ramo p{color:var(--ink-2);max-width:52ch}
.ramo .btn{margin-top:8px}

/* Números (contam ao aparecer) */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:28px var(--vao);border-top:1px solid var(--line);padding-top:28px;margin-top:clamp(32px,4vw,56px)}
@media(min-width:801px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat small{display:block;color:var(--ink-2);margin-top:10px;font-size:.88rem;line-height:1.45;max-width:32ch}

/* Perguntas: acordeão da Flora, o "+" gira. Vale pra home e pras landings. */
.faq,main h2+details{border-top:1px solid var(--line)}
main h2+details{margin-top:24px}
main details{border-bottom:1px solid var(--line);max-width:860px}
main summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 32px;align-items:center;gap:16px;padding:18px 0;font-family:var(--display);font-size:clamp(.98rem,1.2vw,1.1rem);font-weight:500;line-height:1.3}
main summary::-webkit-details-marker{display:none}
main summary::after{content:"+";font-size:1.6rem;font-weight:300;text-align:center;line-height:1;transition:transform .3s var(--ease)}
main details[open] summary::after{transform:rotate(45deg)}
main details>p{padding:0 48px 22px 0;color:var(--ink-2);max-width:70ch}
.todas{margin-top:22px}

/* Fecho em cobalto: título à esquerda, frase e botão à direita (o bloco final da Flora). */
.cta{background:var(--cobalt);color:var(--cobalt-ink)}
.cta .wrap{display:grid;gap:20px}
@media(min-width:801px){.cta .wrap{grid-template-columns:7fr 5fr;align-items:end}}
.cta h2,.fim h2{max-width:16ch;font-size:clamp(1.6rem,3vw,2.6rem);color:inherit}
.cta-lado{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cta .sub,main .fim p{color:inherit;opacity:.9;max-width:40ch}
main .fim .efeito{opacity:1}
.cta .alt{font-size:.88rem;opacity:.85}
.fim{background:var(--cobalt);color:var(--cobalt-ink);border-radius:var(--raio);padding:clamp(28px,5vw,64px);display:grid;gap:16px 40px}
@media(min-width:801px){.fim{grid-template-columns:7fr 5fr;align-items:end}}
.fim>div{display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* Imagens: moldura de canto arredondado; a foto desliza de leve dentro dela ao rolar. */
.ph{overflow:hidden;border-radius:var(--raio);background:var(--bg-2)}
.ph img{width:100%}
.ph.borda{border:1px solid var(--line)}
figure{margin:0}
figcaption{font-size:.82rem;color:var(--ink-2);padding-top:10px}

/* Rodapé */
footer{border-top:1px solid var(--line);padding:48px 0 32px;font-size:.92rem}
.foot-marca{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:500;letter-spacing:-.02em;margin-bottom:28px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-nav a,.foot a{text-decoration:none}
.foot-nav a:hover,.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-2);font-size:.82rem}

/* Páginas de texto: blog, artigos, perguntas e privacidade (o artigo da Flora). */
.trilha{font-size:.8rem;color:var(--ink-2);padding:20px 0 0}
.trilha a{text-decoration:none}
.trilha a:hover{text-decoration:underline}
.artigo{max-width:720px;margin:0 auto;padding:clamp(24px,4vw,56px) 0 clamp(40px,6vw,88px)}
.artigo h1{font-size:clamp(1.7rem,3vw,2.4rem);margin:22px 0 14px}
.artigo .meta{font-size:.85rem;color:var(--ink-2);margin-bottom:36px}
.artigo h2{font-size:clamp(1.2rem,1.8vw,1.45rem);margin:2.2em 0 .6em}
.artigo h3{font-size:1.05rem;margin:1.8em 0 .5em}
.artigo p,.artigo li{font-size:1rem;line-height:1.65}
.artigo p{margin:0 0 1em}
.artigo ul,.artigo ol{padding-left:1.2em;margin:0 0 1.2em}
.artigo li{margin-bottom:.4em}
.artigo blockquote{margin:2em 0;padding-left:20px;border-left:3px solid var(--amber);font-family:var(--display);font-size:1.1rem;letter-spacing:-.01em;line-height:1.4}
.artigo blockquote p{margin:0}
.artigo a{color:var(--cobalt);text-underline-offset:3px}
.artigo .meta a{color:inherit}
.artigo code{font-size:.92em;background:var(--bg-2);padding:1px 6px;border-radius:6px}
.artigo .faq-item{border-top:1px solid var(--line);padding:20px 0 6px}
.artigo .faq-item h3{margin:0 0 8px}
.artigo .faq-item p{color:var(--ink-2)}
.artigo .cta-fim{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--ink)}
.artigo .cta-fim p{margin:0 0 16px;font-family:var(--display);font-size:1.15rem;letter-spacing:-.01em;line-height:1.35}
.artigo .cta-fim .btn{color:var(--amber-ink)}
.lista-artigos{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.lista-artigos li{display:grid;gap:6px 24px;padding:24px 0;border-bottom:1px solid var(--line)}
@media(min-width:801px){.lista-artigos li{grid-template-columns:200px 1fr}.lista-artigos li>:not(.k){grid-column:2}}
.lista-artigos .k{font-size:.8rem;color:var(--ink-2);letter-spacing:.02em}
.lista-artigos .k a{color:inherit}
.lista-artigos li>a{font-family:var(--display);font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:500;line-height:1.3;text-decoration:none;color:var(--ink)}
.lista-artigos li>a::after{content:" ↗";opacity:0;transition:opacity .35s}
.lista-artigos li>a:hover::after{opacity:1}
.lista-artigos p{color:var(--ink-2);margin:0;font-size:.95rem}

/* chat da Cláudia */
.chat{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;flex-direction:column;width:min(380px,92vw);height:min(560px,72vh);font-size:15px;background:var(--bg);border:1px solid var(--line);border-radius:var(--raio);box-shadow:0 24px 56px -20px #0006;overflow:hidden}
.chat[hidden]{display:none}
.chat header,.chat form{display:flex;align-items:center;gap:8px;padding:10px 12px}
.chat header{justify-content:space-between;border-bottom:1px solid var(--line)}
.chat header button{background:0;border:0;color:inherit;font-size:22px;cursor:pointer}
.chat form{border-top:1px solid var(--line)}
.chat ol{flex:1;overflow-y:auto;list-style:none;margin:0;padding:14px;display:flex;flex-direction:column;gap:9px}
.chat li{max-width:86%;padding:10px 13px;border-radius:15px;white-space:pre-wrap}
.chat .dela{background:var(--bg-2)}
.chat .sua{align-self:flex-end;background:var(--cobalt);color:var(--cobalt-ink)}
.chat .cartao{max-width:100%;display:grid;gap:10px;justify-items:start;background:var(--bg-2);border:1px solid var(--amber)}
.chat [disabled]{opacity:.5}
.chat input{flex:1;min-width:0;font:inherit;padding:11px 15px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg);color:var(--ink)}
@media(max-width:859px){.chat{right:0;left:0;bottom:0;width:auto;height:min(86vh,640px);border-width:1px 0 0;border-radius:18px 18px 0 0}}
/* fim do chat */

/* ===== Efeitos (os da Flora). Só existem sem "reduzir movimento"; o que esconde conteúdo depende ainda da
   classe .mov, que o script liga só quando vai revelar. Sem JS, nada fica escondido. ===== */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.nav,.barra-zap{transition:none}}
@media (prefers-reduced-motion:no-preference){
  /* Página entra num fade curto e sai num fade ao trocar de página (pageIn). */
  @keyframes pageIn{from{opacity:0}to{opacity:1}}
  body{animation:pageIn .3s var(--ease) both}
  body.saindo{opacity:0;transition:opacity .25s ease}
  /* Título do topo: cada linha sobe de trás de uma máscara (lineUp, com [data-lines]). */
  @keyframes lineUp{to{transform:none}}
  .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
  .ln>span{display:block;transform:translateY(110%);animation:lineUp 1s var(--ease) forwards}
  .ln:nth-child(2)>span{animation-delay:.1s}.ln:nth-child(3)>span{animation-delay:.2s}.ln:nth-child(4)>span{animation-delay:.3s}
  .hero .sub,.hero-cta,.fatos{opacity:0;animation:pageIn .9s var(--ease) .5s forwards}
  .hero-cta{animation-delay:.6s}.fatos{animation-delay:.75s}
  /* O brilho cobalto do topo assenta devagar (settle). */
  @keyframes settle{from{transform:scale(1.07)}to{transform:none}}
  .hero::before{animation:settle 2.2s var(--ease) both}
  /* Revelação ao rolar, em cascata curta (--i vem do script). */
  .mov .r{transition:opacity .7s var(--ease-suave),transform .7s var(--ease-suave),background-size 1.1s var(--ease-suave);transition-delay:calc(var(--i,0) * 70ms)}
  .mov .r:not(.on){opacity:0;transform:translateY(10px)}
  /* Títulos de seção: as palavras sobem de trás de uma máscara. */
  .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  .w>span{display:inline-block}
  .mov .r .w>span{transition:transform .9s var(--ease-suave);transition-delay:calc(var(--i,0) * 70ms + var(--d,0) * 35ms)}
  .mov .r:not(.on) .w>span{transform:translateY(105%)}
  /* Linhas que se desenham: o traço das etapas e a base de cada serviço. */
  .mov .passos li.r,.mov .ramo.r{border-top-color:transparent;background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/100% 1px;background-origin:border-box}
  .mov .passos li.r:not(.on),.mov .ramo.r:not(.on){background-size:0 1px}
  .mov .linha.r{border-bottom-color:transparent;background:linear-gradient(var(--line),var(--line)) no-repeat 0 100%/100% 1px;background-origin:border-box}
  .mov .linha.r:not(.on){background-size:0 1px}
  /* Fotos deslizam dentro da moldura (flora-deriva) e o topo desce mais devagar que a página (flora-topo). */
  @supports (animation-timeline:view()){
    @keyframes flora-deriva{from{translate:0 -1.5%}to{translate:0 1.5%}}
    @keyframes flora-topo{to{translate:0 7%}}
    .mov .ph img{scale:1.04;animation:flora-deriva linear both;animation-timeline:view();animation-range:cover}
    .mov .hero::before{animation:settle 2.2s var(--ease) both,flora-topo linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  }
  /* Resposta da pergunta surge ao abrir (flora-abre). */
  @keyframes flora-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .mov main details[open]>:not(summary){animation:flora-abre .4s var(--ease-suave) both}
  /* Faixa que corre (slide): para no hover e fora da tela. */
  @keyframes slide{to{transform:translateX(-50%)}}
  .marquee .track{animation:slide 38s linear infinite}
  .marquee:hover .track,.mov .marquee:not(.on) .track{animation-play-state:paused}
  /* Botão responde ao toque; janela do chat entra subindo. */
  .btn{transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
  .btn:active{transform:scale(.98)}
  @keyframes sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .chat{animation:sobe .28s var(--ease) both}
  /* O WhatsApp pulsa devagar. */
  @keyframes pulso{0%{box-shadow:0 0 0 0 rgba(14,122,62,.5)}75%,100%{box-shadow:0 0 0 14px rgba(14,122,62,0)}}
  .zap{animation:pulso 2.4s ease-out infinite}
}