/* Sol Vivo Energia Solar · exemplo do plano Profissional (APS Studio) */
@view-transition{navigation:auto}
:root{
  --tinta:#0F1A2A;      /* texto e fundos escuros */
  --tinta-2:#18263B;
  --suave:#4A5568;      /* texto secundário */
  --sol:#F5A524;        /* destaque (botões) */
  --sol-claro:#FFD27A;
  --sol-texto:#8A5200;  /* laranja com contraste sobre fundo claro */
  --creme:#FBF8F2;
  --areia:#F3EDE1;
  --linha:#E6DECF;
  --ceu:#E3EEF6;
  --raio:20px;
  --sombra:0 1px 2px rgba(15,26,42,.06),0 12px 32px -12px rgba(15,26,42,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:Figtree,system-ui,sans-serif;background:var(--creme);color:var(--tinta);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.03em}
h2{font-size:clamp(2rem,4.6vw,3.2rem)}
h3{font-size:1.3rem;letter-spacing:-.015em}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
section{padding:clamp(72px,10vw,128px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sol-texto)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sol);box-shadow:0 0 0 4px rgba(245,165,36,.2)}
.escuro .eyebrow{color:var(--sol-claro)}
.lead{font-size:clamp(1.08rem,1.6vw,1.25rem);color:var(--suave);max-width:36em}
.skip{position:absolute;left:-999px;top:8px;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:10px;z-index:99}
.skip:focus{left:16px}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:6px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s;position:relative;overflow:hidden;isolation:isolate}
.btn svg{width:20px;height:20px;flex:none}
.btn-sol{background:var(--sol);color:var(--tinta);box-shadow:0 10px 24px -10px rgba(245,165,36,.8)}
.btn-sol::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);z-index:-1;transition:transform .7s}
.btn-sol:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-linha{border-color:currentColor;color:var(--tinta)}
.btn-linha:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.escuro .btn-linha{color:#fff}
.escuro .btn-linha:hover{background:#fff;color:var(--tinta);border-color:#fff}
.btn-sm{min-height:44px;padding:0 20px;font-size:.95rem}

/* topo */
header{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s;view-transition-name:topo}
header.rolou{background:rgba(251,248,242,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--linha)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.03em;text-decoration:none}
.logo-sol{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--sol-claro),var(--sol) 60%,#E07B00);box-shadow:0 0 0 5px rgba(245,165,36,.18);animation:respira 4s ease-in-out infinite}
@keyframes respira{50%{box-shadow:0 0 0 9px rgba(245,165,36,.08)}}
nav ul{display:flex;gap:4px;list-style:none}
nav a{display:block;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.97rem;color:var(--suave);transition:color .2s,background .2s}
nav a:hover{color:var(--tinta);background:rgba(15,26,42,.05)}
nav a[aria-current="page"]{color:var(--tinta);background:rgba(245,165,36,.18)}
.menu-btn{display:none;width:48px;height:48px;border-radius:14px;border:1px solid var(--linha);background:#fff;cursor:pointer;place-items:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:20px;height:2px;background:var(--tinta);border-radius:2px;position:relative;transition:transform .3s,opacity .3s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-aberto .menu-btn span{background:transparent}
.menu-aberto .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.menu-aberto .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:920px){
  .menu-btn{display:grid}
  .nav .btn{display:none}
  nav{position:fixed;inset:76px 0 auto;background:var(--creme);border-bottom:1px solid var(--linha);padding:12px 16px 20px;clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.7,0,.2,1);visibility:hidden}
  .menu-aberto nav{clip-path:inset(0 0 0 0);visibility:visible}
  nav ul{flex-direction:column}
  nav a{font-size:1.15rem;padding:14px 16px}
  .menu-aberto header{background:var(--creme)}
}

/* início: hero */
.hero{padding:140px 0 70px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:900px;height:900px;right:-300px;top:-420px;background:radial-gradient(circle,rgba(255,210,122,.55),rgba(245,165,36,.12) 45%,transparent 70%);pointer-events:none;animation:halo 10s ease-in-out infinite alternate}
@keyframes halo{to{transform:translate(-60px,40px) scale(1.08)}}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;position:relative}
.hero h1{font-size:clamp(2.7rem,6.6vw,5.2rem);margin:18px 0 22px}
.hero h1 em{font-style:normal;color:var(--sol-texto);background:linear-gradient(var(--sol-claro),var(--sol-claro)) 0 88%/0% 28% no-repeat;animation:grifa 1.1s .9s cubic-bezier(.7,0,.2,1) forwards}
@keyframes grifa{to{background-size:100% 28%}}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.selos{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin-top:28px;font-size:.93rem;font-weight:600;color:var(--suave)}
.selos li{display:flex;align-items:center;gap:8px}
.selos svg{width:18px;height:18px;color:#1F8A5B}
.cena{position:relative;aspect-ratio:1/.9}
.cena svg.casa{width:100%;height:100%;overflow:visible}
.raios{transform-origin:380px 86px;animation:gira 40s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.feixe{stroke-dasharray:6 14;animation:corre 1.6s linear infinite}
@keyframes corre{to{stroke-dashoffset:-40}}
.janela{fill:#FFE7AE;animation:acende 3.2s ease-in-out infinite}
.janela:nth-of-type(2n){animation-delay:.8s}
@keyframes acende{0%,100%{fill:#FFE7AE}50%{fill:#FFD27A}}
.placa{transition:transform .4s}
.reflexo{animation:reflete 4s ease-in-out infinite}
@keyframes reflete{0%,55%{transform:translateX(-80px);opacity:0}65%{opacity:.8}85%,100%{transform:translateX(260px);opacity:0}}
.flutua{position:absolute;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:12px 16px;box-shadow:var(--sombra);font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:12px;animation:flutua 6s ease-in-out infinite}
.flutua small{display:block;color:var(--suave);font-weight:500;font-size:.75rem}
.flutua.f1{left:-4%;bottom:14%}
.flutua.f2{right:-2%;top:42%;animation-delay:-3s}
@keyframes flutua{50%{transform:translateY(-10px)}}
.barras{display:flex;align-items:flex-end;gap:3px;height:28px}
.barras i{width:5px;height:60%;border-radius:3px;background:var(--sol);animation:barra 1.8s ease-in-out infinite;animation-delay:calc(var(--i)*-.25s)}
@keyframes barra{0%,100%{height:30%}50%{height:100%}}
.ponto-vivo{width:10px;height:10px;border-radius:50%;background:#1F8A5B;position:relative}
.ponto-vivo::after{content:"";position:absolute;inset:0;border-radius:50%;background:#1F8A5B;animation:pulso 1.8s ease-out infinite}
@keyframes pulso{to{transform:scale(2.6);opacity:0}}
@media (max-width:920px){
  .hero{padding-top:116px}
  .hero .wrap{grid-template-columns:1fr}
  .cena{max-width:520px;width:100%;margin-inline:auto}
}

/* faixa que corre */
.faixa{background:var(--tinta);color:#fff;padding:18px 0;overflow:hidden;transform:rotate(-1.2deg);margin:0 -10px;position:relative;z-index:2}
.faixa-trilho{display:flex;width:max-content;animation:desliza 32s linear infinite}
.faixa:hover .faixa-trilho{animation-play-state:paused}
.faixa ul{display:flex;list-style:none}
.faixa li{display:flex;align-items:center;gap:28px;padding-right:28px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(1.1rem,2.4vw,1.6rem);white-space:nowrap}
.faixa li::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--sol)}
@keyframes desliza{to{transform:translateX(-50%)}}

/* títulos de seção */
.topo-secao{display:flex;justify-content:space-between;align-items:end;gap:24px 48px;flex-wrap:wrap;margin-bottom:48px}
.topo-secao h2{margin-top:12px;max-width:14em}
.topo-secao > p{max-width:30em;color:var(--suave)}

/* cards com luz que segue o mouse */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{position:relative;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:30px 26px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,-20%),rgba(245,165,36,.16),transparent 45%);opacity:0;transition:opacity .35s;z-index:-1}
.card:hover{transform:translateY(-6px);box-shadow:var(--sombra);border-color:#E9CF9F}
.card:hover::before{opacity:1}
.card .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--areia);color:var(--tinta);margin-bottom:22px;transition:background .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover .ico{background:var(--sol);transform:rotate(-8deg) scale(1.06)}
.card .ico svg{width:26px;height:26px}
.card h3{margin-bottom:10px}
.card p{color:var(--suave);font-size:1rem}
.card .mais{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:700;font-size:.95rem;text-decoration:none;color:var(--tinta)}
.card .mais svg{width:18px;height:18px;transition:transform .3s}
.card:hover .mais svg{transform:translateX(4px)}

/* diferenciais (fundo escuro) */
.escuro{background:var(--tinta);color:#fff;position:relative;overflow:hidden}
.escuro .lead,.escuro .topo-secao > p{color:#B7C2D3}
.escuro::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 70% 0%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 0%,#000 10%,transparent 70%)}
.escuro .wrap{position:relative}
.valores{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.valor{padding:32px 28px;border-radius:var(--raio);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.valor .num{font-family:"Bricolage Grotesque",sans-serif;font-size:3.4rem;font-weight:800;line-height:1;color:var(--sol);display:block;margin-bottom:20px}
.valor h3{margin-bottom:10px}
.valor p{color:#B7C2D3}
@media (max-width:820px){.valores{grid-template-columns:1fr}}

/* etapas com linha de progresso */
.etapas{position:relative;display:grid;gap:18px;list-style:none;counter-reset:etapa;padding-left:60px}
.etapas::before,.etapas::after{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--linha)}
.etapas::after{background:linear-gradient(var(--sol-claro),var(--sol));transform-origin:top;transform:scaleY(var(--p,0))}
.etapa{position:relative;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:24px 26px;counter-increment:etapa}
.etapa::before{content:counter(etapa);position:absolute;left:-60px;top:18px;width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid var(--linha);font-weight:800;z-index:1;transition:background .4s,border-color .4s}
.etapa.feita::before{background:var(--sol);border-color:var(--sol)}
.etapa h3{margin-bottom:6px}
.etapa p{color:var(--suave)}
.dupla{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.dupla .fixo{position:sticky;top:120px}
@media (max-width:920px){.dupla{grid-template-columns:1fr;gap:36px}.dupla .fixo{position:static}}

/* projetos (galeria ilustrada) */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtros button{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--linha);background:#fff;font:inherit;font-weight:600;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.filtros button[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.projetos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;list-style:none}
.projeto{border-radius:var(--raio);overflow:hidden;background:#fff;border:1px solid var(--linha);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,opacity .35s}
.projeto:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--sombra)}
.projeto.some{display:none}
.projeto figure{display:block}
.projeto .arte{aspect-ratio:4/3;position:relative;overflow:hidden}
.projeto .arte svg{width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.projeto:hover .arte svg{transform:scale(1.06)}
.projeto figcaption{padding:18px 22px 22px}
.projeto figcaption strong{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem;letter-spacing:-.015em}
.projeto figcaption span{color:var(--suave);font-size:.95rem}
.tag{display:inline-block;margin-bottom:8px;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sol-texto)}
.aviso-ilustr{margin-top:18px;font-size:.88rem;color:var(--suave)}

/* dúvidas */
.duvidas{display:grid;gap:12px;max-width:860px}
.duvidas details{background:#fff;border:1px solid var(--linha);border-radius:18px;transition:border-color .3s,box-shadow .3s}
.duvidas details[open]{border-color:#E9CF9F;box-shadow:var(--sombra)}
.duvidas summary{list-style:none;cursor:pointer;padding:22px 64px 22px 24px;font-weight:700;font-size:1.08rem;position:relative}
.duvidas summary::-webkit-details-marker{display:none}
.duvidas summary::after{content:"";position:absolute;right:22px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--areia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1A2A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s,background-color .35s}
.duvidas details[open] summary::after{transform:rotate(45deg);background-color:var(--sol)}
.duvidas .resp{padding:0 24px 22px;color:var(--suave)}
.duvidas details::details-content{block-size:0;overflow:hidden;transition:block-size .4s,content-visibility .4s allow-discrete}
.duvidas details[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}

/* cabeçalho das páginas internas */
.cab{padding:150px 0 64px;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--areia),var(--creme))}
.cab::after{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,122,.7),transparent 65%);animation:halo 10s ease-in-out infinite alternate}
.cab .wrap{position:relative;z-index:1}
.cab h1{font-size:clamp(2.6rem,6vw,4.6rem);margin:14px 0 18px;max-width:12em}
.trilha{font-size:.9rem;color:var(--suave);margin-bottom:6px}
.trilha a{text-decoration:none;font-weight:600}
.trilha a:hover{text-decoration:underline}

/* serviços detalhados */
.servico-det{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;padding:44px 0;border-top:1px solid var(--linha)}
.servico-det:last-child{border-bottom:1px solid var(--linha)}
.servico-det .ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--sol);margin-bottom:18px}
.servico-det .ico svg{width:28px;height:28px}
.servico-det h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.servico-det dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.servico-det dl div{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:14px 16px}
.servico-det dt{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sol-texto)}
.servico-det dd{font-weight:600;font-size:.98rem}
.servico-det p{color:var(--suave)}
@media (max-width:820px){.servico-det{grid-template-columns:1fr;gap:8px}.servico-det dl{grid-template-columns:1fr}}

/* sobre */
.historia{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.historia p+p{margin-top:16px}
.historia p{color:var(--suave)}
.historia .arte-sobre{border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#FFE3A6,#F5A524 60%,#E07B00);aspect-ratio:1;position:relative}
@media (max-width:820px){.historia{grid-template-columns:1fr}}

/* contato */
.contato-grade{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
form.form{background:#fff;border:1px solid var(--linha);border-radius:24px;padding:clamp(22px,4vw,36px);display:grid;gap:18px;box-shadow:var(--sombra)}
.form label{display:grid;gap:8px;font-weight:600;font-size:.97rem}
.form input,.form select,.form textarea{font:inherit;font-weight:400;padding:14px 16px;border:1.5px solid var(--linha);border-radius:14px;background:var(--creme);color:var(--tinta);min-height:52px;transition:border-color .2s,box-shadow .2s,background .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--sol);box-shadow:0 0 0 4px rgba(245,165,36,.2);background:#fff}
.form textarea{min-height:120px;resize:vertical}
.form .linha2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .nota{font-size:.88rem;color:var(--suave)}
.form .erro{color:#B42318;font-size:.9rem;font-weight:600}
.info{display:grid;gap:12px}
.info-card{background:#fff;border:1px solid var(--linha);border-radius:18px;padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.info-card svg{width:24px;height:24px;flex:none;color:var(--sol-texto);margin-top:2px}
.info-card strong{display:block}
.info-card span,.info-card a{color:var(--suave)}
@media (max-width:820px){.contato-grade{grid-template-columns:1fr}.form .linha2{grid-template-columns:1fr}}

/* chamada final */
.chamada{padding:0 0 clamp(72px,10vw,120px)}
.chamada-caixa{border-radius:32px;background:var(--tinta);color:#fff;padding:clamp(40px,7vw,80px);position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center}
.chamada-caixa::before{content:"";position:absolute;width:520px;height:520px;right:-160px;bottom:-300px;border-radius:50%;background:radial-gradient(circle,var(--sol),rgba(245,165,36,.25) 40%,transparent 68%);animation:nasce 7s ease-in-out infinite alternate}
@keyframes nasce{to{transform:translateY(-60px)}}
.chamada-caixa > *{position:relative}
.chamada-caixa h2{max-width:13em}
.chamada-caixa p{color:#B7C2D3;margin-top:14px;max-width:30em}
@media (max-width:820px){.chamada-caixa{grid-template-columns:1fr}}

/* rodapé */
footer{background:var(--tinta-2);color:#B7C2D3;padding:64px 0 28px;font-size:.95rem}
.rod{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer .logo{color:#fff;margin-bottom:14px}
footer h3{color:#fff;font-size:1rem;margin-bottom:12px;font-family:Figtree,sans-serif;letter-spacing:0}
footer ul{list-style:none;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.rod-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;font-size:.88rem}
@media (max-width:820px){.rod{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rod{grid-template-columns:1fr}}

/* WhatsApp flutuante */
.wa-flutua{position:fixed;right:18px;bottom:18px;z-index:40;width:60px;height:60px;border-radius:50%;background:#1F8A5B;color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(31,138,91,.7);transition:transform .3s;view-transition-name:wa}
.wa-flutua:hover{transform:scale(1.08)}
.wa-flutua svg{width:30px;height:30px}
.wa-flutua::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1F8A5B;animation:pulso 2.4s ease-out infinite}

/* aparecer ao rolar */
.js .revela{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--atraso,0s)}
.js .revela.visivel{opacity:1;transform:none}
.js .revela-txt{clip-path:inset(0 0 100% 0);transform:translateY(30px);transition:clip-path 1s cubic-bezier(.7,0,.2,1),transform 1s cubic-bezier(.7,0,.2,1);transition-delay:var(--atraso,0s)}
.js .revela-txt.visivel{clip-path:inset(0 0 -10% 0);transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .revela,.js .revela-txt{opacity:1;transform:none;clip-path:none}
  .hero h1 em{background-size:100% 28%}
  @view-transition{navigation:none}
}