/* ==========================================================================
   AREA 4 ENGENHARIA, LINK DA BIO

   Uma tela, sem rolagem, sem dobras. Anatomia do padrao de link da bio da casa,
   na variante de CAMPO ESCURO COM A CASA DE FUNDO ESMAECIDA (a lista das paginas
   de referencia esta no LEIA-ME desta pasta, nao aqui: nome de outro cliente nao
   vai para o arquivo que o navegador baixa).

   ⚠️ TRES tratamentos de foto reprovaram nesta peca antes deste, e o motivo e
   sempre o MESMO: o `cover` corta, e o que sobra nunca e a casa.
     1. fundo de tela cheia: no celular a janela visivel e um quadrado de ~58% da
        largura por ~46% da altura do recorte, e fachada de perto vira parede.
     2. faixa no pe com um recorte so: a caixa mede 1,85:1 no celular e 6,7:1 no
        desktop, e o deitado virava um close da porta de vidro.
     3. faixa no pe com dois recortes: melhorou, mas a caixa continua pequena e a
        casa continua espremida.
   O que resolve e NAO CORTAR: no celular a foto entra com a largura da tela e a
   altura que a propria proporcao pede (4:3), esmaecida e dissolvendo para baixo
   dentro do campo. Sem caixa nao ha corte, e a casa aparece inteira.

   A identidade vem do kit (../marca/kit) e dos tokens das TRES LPs que esta
   pagina linka: quem toca no botao sai daqui e cai nelas, e trocar de cor ou de
   fonte no meio do caminho le como troca de empresa.

   Quatro regras desta marca que nao flexionam:
   - RAIO 0 E CANTO VIVO. O kit mede raio 0px. A pagina de referencia usa chanfro
     hexagonal nos botoes, mas isso e o device do kit DELA: aqui o canto e reto.
     Herdamos a ANATOMIA da referencia, nunca os devices do kit do outro cliente.
   - TODO TINT CLARO DESTE VERMELHO E ROSA. Clarear #B51312 devolve rosa, e o
     kit proibe rosa com todas as letras. Papel de acento sobre escuro vai para
     #D6201E; papel de texto pequeno sobre escuro vai para o aco claro #C4CDD4,
     que sai do NAVY e nao do vermelho. Nao existe terceira opcao clara.
   - A ESTAMPARIA NAO GIRA. As pernas do A abrem 27,8 e 26,0 graus da vertical,
     simetricas: a marca e aprumada. Quem reforcar a malha aumenta a OPACIDADE,
     nunca o modulo nem o angulo.
   - O MONOGRAMA A4 MORRE ABAIXO DE ~60px (hastes de 12px num desenho de 504px).
     Por isso ele entra grande aqui, e quem representa a marca em favicon e o
     MARCADOR (o apice do A), nunca o monograma reduzido.
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  /* paleta do kit (marca/kit/marca.json) mais os tokens das tres LPs */
  --brand:#B51312;            /* o vermelho do "4": o meio da rampa do botao */
  --brand-hi:#D6201E;         /* acento SOBRE FUNDO ESCURO, o mesmo das LPs */
  --brand-cta:#C81A18;        /* topo da rampa do botao */
  --brand-deep:#8E0F0E;       /* pe da rampa do botao, so em degrade */
  --navy:#242C32;             /* brand2 */
  --ink:#111518;              /* o CAMPO */
  --ink-2:#0A0D0F;            /* o pe do campo */
  --on:#F4F5F6;
  --steel:#C4CDD4;            /* aco claro: texto pequeno sobre escuro */

  /* O verde e do WhatsApp, nao da Area 4: entra so no botao dele, que e botao
     de plataforma e o usuario reconhece pela cor. */
  --green-light:#2BD46E; --green:#1FA858; --green-deep:#148244; --green-ink:#0A5730;

  /* respiro lateral da coluna. A faixa do pe sangra por ESTA medida, e nao por
     100vw: com `calc(50% - 50vw)` o navegador arredonda meio pixel e sobra um
     filete do campo num dos lados, visivel no print. */
  --pad:18px;

  /* Montserrat e Spectral sao as fontes das TRES LPs desta conta. O marca.json
     declara Cormorant Garamond como display, mas nenhuma peca da Area 4 usa (as
     LPs declaram e nem carregam, renderizam Georgia), e quem clica no botao cai
     na LP: a continuidade manda aqui. */
  --disp:'Spectral',Georgia,'Times New Roman',serif;
  --texto:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* motivo reescrito por _build/embutir-motivos.py, NAO editar a mao */
  --mark-band: url('data:image/png;base64,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');
}

html{-webkit-text-size-adjust:100%}
body{
  min-height:100svh; font-family:var(--texto); color:var(--on);
  background:var(--ink); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center;
  /* CENTRADO: a ancora no topo e heranca de pagina CHEIA (regua de tres numeros
     mais tres botoes). Sem a faixa do pe, a ancora deixaria tela vazia embaixo
     do rodape, que le como pagina que nao carregou. */
  justify-content:center;
  padding:clamp(18px,3vh,32px) var(--pad) calc(18px + env(safe-area-inset-bottom));
  position:relative; overflow-x:hidden;
}

/* ── o campo ───────────────────────────────────────────────────────────────
   Cinco camadas: a foto esmaecida, a chapa, o calor da marca, a estamparia e a
   vinheta. A foto e a de baixo e nao manda em nada: ela e CENARIO. */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--ink)}

/* ⚠️ No CELULAR a foto NAO e `cover`, e essa e a decisao inteira desta camada.
   Ela entra com `width:100%` e altura automatica, ou seja com a proporcao
   original: num aparelho de 393px isso da 393x295 e NADA e jogado fora. Toda
   tentativa anterior encaixou a foto numa caixa e deixou o `cover` cortar, e o
   que sobrava nunca era a casa.

   A borda de baixo dissolve por MASCARA, e nao por uma chapa opaca por cima:
   para a chapa tapar a emenda ela teria de ser quase solida ali, e a foto
   sumiria de novo. */
.bg__foto{position:absolute;left:0;right:0;top:0;
  opacity:.42;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.55) 74%,transparent 100%);
  mask:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.55) 74%,transparent 100%)}
.bg__foto picture{display:contents}
.bg__foto img{display:block;width:100%;height:auto;
  /* baixo contraste de proposito, a pedido: a casa e atmosfera, nao assunto */
  filter:brightness(.78) contrast(.94) saturate(.86)}

/* A chapa fecha no pe e no alto, e deixa a faixa do meio respirar. Aqui ela nao
   e mais quem esconde a foto: quem controla a presenca da foto e a opacidade
   dela mais a mascara. */
.bg__chapa{position:absolute;inset:0;background:linear-gradient(0deg,
  var(--ink-2) 0%, rgba(10,13,15,.90) 14%, rgba(17,21,24,.62) 28%,
  rgba(17,21,24,.26) 42%, rgba(17,21,24,.14) 56%, rgba(17,21,24,.24) 74%,
  rgba(10,13,15,.52) 100%)}

/* O calor da marca. Vermelho do kit sobre o ink do kit: nenhuma cor nova entra,
   e o vermelho aqui e LUZ e nao tinta, que e a unica forma de ele clarear sem
   virar rosa. */
.bg__calor{position:absolute;inset:0;background:
  radial-gradient(58% 24% at 14% 6%, rgba(214,32,30,.14), transparent 68%),
  radial-gradient(52% 20% at 88% 18%, rgba(181,19,18,.11), transparent 66%),
  radial-gradient(62% 28% at 10% 86%, rgba(214,32,30,.15), transparent 66%),
  radial-gradient(72% 22% at 50% 100%, rgba(142,15,14,.26), transparent 70%)}

/* A estamparia de PLANTA do kit, a que ele indica para fundo escuro. ⚠️ Ela NAO
   gira: a marca e aprumada. E quem for reforcar a malha aumenta a OPACIDADE,
   nunca o modulo: com modulo grande a planta para de ser textura e volta a ler
   como desenho tecnico, disputando com o simbolo. */
.bg__malha{position:absolute;inset:0;opacity:.028;background-color:var(--steel);
  -webkit-mask-image:var(--mark-band);mask-image:var(--mark-band);
  -webkit-mask-size:56px 38px;mask-size:56px 38px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat}

/* Veu de faixa no topo MAIS a mancha atras da marca. Sao duas camadas, e as
   duas na FOTO, nenhuma na logo: o problema nao e a marca, e o campo atras dela.

   ⚠️ A mancha tem de cobrir o LETREIRO, e nao so o monograma, e isso se mede. Com
   ela parando no monograma, o "4" do meio de "AREA 4 ENGENHARIA" ficou em
   2,73:1 contra 2,96:1 do simbolo: o lettering fino e sempre o primeiro a
   reprovar. Por isso o raio vertical vai a 30% e a densidade so cai de verdade
   depois de 55%, que e onde o letreiro termina.

   ⚠️ Empilhar `drop-shadow` larga na logo e o caminho ERRADO: ela copia a
   silhueta do traco, e num lettering de poucos pixels quase nao deixa nada atras
   da letra, so engorda um halo em volta do simbolo. Medir com
   `_build/contraste-marca.py`, que le o campo dentro da caixa da marca. */
.bg__topo{position:absolute;inset:0;background:
  radial-gradient(66% 30% at 50% 20%, rgba(10,13,15,.70), rgba(10,13,15,.50) 55%, rgba(10,13,15,.18) 80%, transparent 100%),
  linear-gradient(180deg,rgba(10,13,15,.46) 0%,rgba(10,13,15,.26) 14%,rgba(10,13,15,.08) 28%,rgba(10,13,15,0) 42%)}

/* O fio do topo passeia dentro da familia do vermelho. Nenhuma cor nova entra
   na pagina por causa de animacao. */
.fio{position:fixed;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--brand-deep) 14%,var(--brand) 34%,var(--brand-hi) 50%,var(--brand) 66%,var(--brand-deep) 86%,transparent);
  background-size:220% 100%;animation:corre 7s ease-in-out infinite}
@keyframes corre{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.wrap{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center}

/* ── a marca ──────────────────────────────────────────────────────────────
   A logo da Area 4 e EMPILHADA de nascenca (monograma em cima, letreiro
   embaixo), que e exatamente a pilha que esta anatomia pede. O corte entre as
   duas camadas nao inventa lockup novo: ele acontece na faixa de linhas
   totalmente vazias que o proprio desenho tem entre o pe do A4 e o topo do
   lettering, MEDIDA no canal alfa pelo preparar-assets.py, com assert que cai se
   a fonte da logo mudar.

   ⚠️ O "4" da marca entra RETINGIDO no #D6201E, o acento do kit para fundo
   escuro. Com o #B51312 original o glifo fica em 2,0:1 contra o campo e
   simplesmente some, que foi a reprova do Gabriel em 11/09. Quem retinge e o
   preparar-assets.py, no canal verde, para a borda antisserrilhada nao virar um
   fio da cor velha em volta da letra.

   ⚠️ O simbolo e GRANDE de proposito: o A4 tem hastes de 12px num desenho de
   504px e morre abaixo de ~60px.

   ⚠️ O estado visivel e o ESTATICO e quem esconde e o `from` do keyframe, com
   `both` cobrindo o atraso. Escrito ao contrario (estatico invisivel mais
   `forwards` segurando o fim), a marca fica refem de a animacao rodar: some em
   aba congelada, em captura e em qualquer motor que nao componha a animacao, e
   o DOM continua jurando opacidade 1. */
.marca{display:flex;flex-direction:column;align-items:center;gap:12px;
  margin-bottom:clamp(14px,2.4vh,22px)}
.simbolo{width:clamp(74px,19vw,88px);position:relative;--mk:url('../img/simbolo.png');
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.6))}
.simbolo img{width:100%;height:auto;display:block}
.simbolo__rev{animation:varredura 1.05s cubic-bezier(.4,0,.15,1) .12s both}
@keyframes varredura{
  from{clip-path:polygon(-60% 188%, 160% 122%, 160% 250%, -60% 250%)}
  to  {clip-path:polygon(-60% -6%, 160% -76%, 160% 250%, -60% 250%)}
}
.simbolo__luz{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat;
  background-image:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.82) 50%,transparent 62%);
  background-repeat:no-repeat;background-size:260% 100%;
  animation:luz 1.15s cubic-bezier(.35,0,.2,1) .95s both}
@keyframes luz{from{background-position:-180% 0}to{background-position:280% 0}}

/* O letreiro traz a linha PROJETOS . CONSTRUCAO . REFORMAS, que e do proprio
   desenho da marca e nomeia os tres funis antes dos botoes. */
.letreiro{width:clamp(236px,64vw,290px);animation:sobe .7s cubic-bezier(.2,.7,.2,1) .82s both}
.letreiro img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.7))}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── zona de ganho: um paragrafo so ──────────────────────────────────────
   A frase e a zona de ganho REAL do ClientOps (00:41:56), nao a declarada.
   "Profissionalismo, credibilidade e empatia" foi a primeira resposta do socio e
   esta proibida com todas as letras: e o que todo concorrente diz. "Qualidade da
   obra" e "metodo construtivo" tambem ficam fora, e por motivo mais forte: sao a
   zona NEUTRA declarada por ele.
   ⚠️ A outra metade da zona de ganho, "nao cobramos o gerenciamento da obra",
   fica FORA desta pagina. E compromisso comercial, e nas LPs ela vive como
   resposta de objecao no FAQ, nunca como manchete. */
.ganho{text-align:center;font-family:var(--texto);font-weight:400;font-size:16.3px;line-height:1.5;
  color:rgba(244,245,246,.95);width:calc(100% + 20px);max-width:none;
  margin:0 -10px clamp(14px,2.2vh,22px);
  text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.85);
  animation:sobe .7s cubic-bezier(.2,.7,.2,1) .96s both}
.ganho b{font-weight:600;color:#fff}

/* ── o numero, numa LINHA SO ─────────────────────────────────────────────
   ⚠️ Era numero gigante com o rotulo embaixo, e o Gabriel reprovou em 11/09 por
   desproporcao: "+30" enorme e "anos de projeto e obra no litoral norte de SP"
   pequenininho embaixo criavam dois pesos brigando no meio da pagina. Agora e
   uma linha so, com o rotulo na PROPRIA linha e a praca fora dele (ela ja vive
   no rodape, em alfinete, e repetir era o que alongava a frase).

   O acento vermelho entra como FILETE dos dois lados, e nao como tinta de letra:
   testei o "+" no #D6201E e ele MEDIU 1,80:1 contra o campo, some. E nao ha
   conserto pela tinta, porque nesta marca todo tint claro de vermelho vira rosa.
   Filete e decoracao: carrega a cor da marca sem responder por leitura. */
.num{display:flex;align-items:center;justify-content:center;gap:11px;
  margin:0 0 clamp(16px,2.6vh,24px);
  animation:sobe .7s cubic-bezier(.2,.7,.2,1) 1.04s both}
.num::before,.num::after{content:"";flex:0 0 auto;width:26px;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand-hi))}
.num::after{background:linear-gradient(90deg,var(--brand-hi),transparent)}
.num b{font-family:var(--disp);font-weight:700;font-size:clamp(30px,8.4vw,36px);
  line-height:1;letter-spacing:-.01em;color:#fff;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.num span{font-family:var(--disp);font-weight:600;font-size:clamp(16px,4.4vw,19px);
  line-height:1;letter-spacing:.005em;color:var(--steel);
  text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* ── botoes ───────────────────────────────────────────────────────────────
   Ordem fixa do padrao: as LPs primeiro, o WhatsApp por ultimo. Os TRES funis
   levam o MESMO tratamento, e isso e do padrao e nao preguica: o proprio
   ClientOps registra a verba IGUAL nos tres (R$ 20/dia cada), entao dar peso
   visual a um deles declararia uma hierarquia que a verba contradiz.

   ⚠️ Os QUATRO sao cheios e com degrade que passeia, a pedido do Gabriel em
   11/09 ("os botoes precisam ter um destaque maior, degrade animado em todos").
   Nenhum vazado e nenhum menor.

   ⚠️ Os botoes NAO esperam a marca: entram de 0,10s a 0,46s enquanto o monograma
   ainda desenha. Conteudo refem de animacao de marca e defeito, nao estilo.
   ⚠️ O atraso de entrada esta amarrado ao data-rota, e nao ao nth-child: a ordem
   dos funis muda a pedido do cliente, e tempo amarrado a posicao embaralha a
   entrada sozinho. */
.links{width:100%;display:flex;flex-direction:column;gap:clamp(9px,1.4vh,11px)}
.btn{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:13px 15px;font-family:var(--texto);font-weight:600;font-size:15px;line-height:1.28;
  text-decoration:none;transition:transform .2s cubic-bezier(.2,.7,.2,1),filter .25s;
  border-radius:0;   /* o kit mede raio 0: a marca nao tem um canto arredondado */
  animation:entra .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes entra{from{opacity:0;transform:translateY(16px)}}
.btn[data-rota="projeto"]{animation-delay:.10s}
.btn[data-rota="construir"]{animation-delay:.22s}
.btn[data-rota="reformar"]{animation-delay:.34s}
.btn[data-rota="whatsapp"]{animation-delay:.46s}
.btn:active{transform:translateY(1px)}
@media (hover:hover){.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}}
.btn:focus-visible{outline:2px solid var(--steel);outline-offset:3px}

.btn__ic{flex:0 0 auto;width:25px;height:25px;display:grid;place-items:center}
.btn__ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
/* ⚠️ O rotulo se recusa a quebrar: se um dia nao couber, o defeito aparece como
   reticencias e nao como segunda linha silenciosa, que e o que estava
   acontecendo. A linha util mede 264px em 393px de tela, com o corpo em 15px:
   "Quero construir com financiamento" pedia 278 e foi trocado por um mais curto.
   Medir com um <span> fantasma antes de trocar copy de botao, nao no olho. */
.btn__tx{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn__seta{flex:0 0 auto;width:18px;height:18px;opacity:.72;transition:transform .2s}
@media (hover:hover){.btn:hover .btn__seta{transform:translateX(3px)}}

/* ⚠️ O rotulo do botao vermelho e BRANCO, e o degrade corre so entre os tres
   vermelhos: #C81A18 no topo, a marca no meio, #8E0F0E no pe. Nenhuma parada
   clara entra, e isso nao e gosto: clarear este vermelho devolve ROSA, que o kit
   proibe, e foi o defeito que deixou 16 rosas vivos na primeira versao da LP de
   projetos.
   ⚠️ O degrade PASSEIA, e o pior caso de um degrade que anima nao esta no quadro
   que voce fotografou: esta na animacao inteira. Aqui isso e seguro porque o
   texto e branco e o pior caso dele mora na parada MAIS CLARA, que e o #C81A18,
   e ela passa em AA com folga (a conta esta no LEIA-ME). */
.btn--obra{background:linear-gradient(118deg,var(--brand-cta) 0%,var(--brand) 52%,var(--brand-deep) 100%);
  background-size:220% 100%;color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(214,32,30,.35) inset;
  animation:entra .5s cubic-bezier(.2,.7,.2,1) both,
            a4-flow 6s ease-in-out .9s infinite}

/* O WhatsApp e o ultimo e e VERDE, que e a cor da plataforma. Ele tambem passeia
   e tambem respira.
   ⚠️ Duas camadas, e so a de baixo anima. O verde CLARO e uma MANCHA presa ao
   icone, parada; quem passeia e o degrade de baixo, e ele corre so entre dois
   verdes ESCUROS (#148244 e #0A5730). Isso e o que torna o passeio seguro: num
   degrade que anima o pior caso nao esta no quadro que voce fotografou, esta na
   animacao inteira, e com texto BRANCO o pior caso mora na parada mais clara.
   Deixar o verde claro passear por baixo do rotulo derruba a leitura, e com
   paradas em porcentagem a MESMA folha ainda muda de nota conforme a largura da
   tela (num botao de 610px o claro se espalha por 85px e passa sob o rotulo).
   ⚠️ A mancha e PEQUENA de proposito: abri-la para ela ler menos como halo
   derrubou a medida numa peca irma. Quem mexer no raio mede de novo. */
.btn--zap{background:
    radial-gradient(30px 30px at 28px 50%, var(--green-light) 0%, var(--green) 62%, rgba(31,168,88,0) 74%),
    linear-gradient(118deg,var(--green-deep) 0%,var(--green-ink) 50%,var(--green-deep) 100%);
  background-size:auto, 220% 100%;
  color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(43,212,110,.3) inset;
  animation:entra .5s cubic-bezier(.2,.7,.2,1) both,
            zap-flow 6s ease-in-out .9s infinite,
            zap-pulso 3.6s ease-in-out .9s infinite}
.btn--zap .btn__ic svg{stroke:none;fill:currentColor}
@keyframes a4-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* duas camadas: a mancha do icone fica parada, so o degrade de baixo corre */
@keyframes zap-flow{
  0%{background-position:0 0, 0% 50%}
  50%{background-position:0 0, 100% 50%}
  100%{background-position:0 0, 0% 50%}}
@keyframes zap-pulso{
  0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(43,212,110,.3) inset,0 0 0 0 rgba(43,212,110,.3)}
  50%{box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(43,212,110,.3) inset,0 0 0 9px rgba(43,212,110,0)}}

/* ── rodape: SO a praca de atendimento e a assinatura ─────────────────────
   Sem CREA e sem @ do perfil: nao ha registro confirmado em lugar nenhum
   (nenhuma das tres LPs publica um) e a Area 4 ainda nao tem perfil, que e
   justamente o perfil que esta pagina vai servir. */
.pe{margin-top:clamp(16px,2.6vh,26px);display:flex;flex-direction:column;align-items:center;gap:9px;
  animation:sobe .7s cubic-bezier(.2,.7,.2,1) .58s both}
.locais{display:flex;flex-direction:column;align-items:center;gap:4px}
.local{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--steel);
  text-shadow:0 1px 8px rgba(0,0,0,.7)}
.local svg{width:12px;height:12px;fill:none;stroke:var(--brand-hi);stroke-width:1.8;flex:0 0 auto}
.dev{display:flex;align-items:center;gap:9px;font-size:11.5px;color:rgba(244,245,246,.7)}
.dev a{color:#fff;font-weight:700;letter-spacing:.06em;text-decoration:none;
  transition:color .25s}
@media (hover:hover){.dev a:hover{color:var(--brand-hi)}}

/* ── tela larga ────────────────────────────────────────────────────────────
   A area que a estamparia cobre no desktop e varias vezes maior e, na mesma
   opacidade, deixa de ser malha e vira papel de parede de desenho tecnico.
   Recua a OPACIDADE, nunca o modulo (regra do kit). */
@media (min-width:720px){
  .bg__malha{opacity:.02}
  /* ⚠️ No desktop o `cover` PODE voltar, e e o certo: a tela e deitada (1,6) e
     quase da razao da foto (1,33), entao um recorte 16:10 perde so as bordas. O
     problema do `cover` e o CELULAR, onde a tela e em pe e a foto e deitada. */
  .bg__foto{inset:0;opacity:.28;-webkit-mask:none;mask:none}
  .bg__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
}

/* ── tela baixa ────────────────────────────────────────────────────────────
   ⚠️ Os clamp em vh NAO bastam num celular baixo: a frase de ganho quebra em
   mais linhas nessa largura e o corpo do texto nao encolhe sozinho. Sem este
   bloco a peca rola, e pagina de link da bio que rola perde o botao de baixo,
   que aqui e justamente o WhatsApp. Nada aqui muda desenho: e a mesma peca com
   o respiro e o corpo apertados. */
@media (max-height:760px){
  /* ⚠️ o --pad tem de mudar JUNTO com o respiro: a faixa sangra por ele, e com
     padding de 16 e --pad de 18 ela fica 4px mais larga que a tela, o que a
     medida acusa como estouro horizontal. */
  body{--pad:16px;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom))}
  .marca{gap:9px;margin-bottom:12px}
  .simbolo{width:clamp(62px,16vw,74px)}
  .letreiro{width:clamp(206px,56vw,238px)}
  .ganho{font-size:14.8px;margin-bottom:11px}
  .num{margin-bottom:12px}
  .num b{font-size:clamp(26px,7.6vw,31px)}
  .num span{font-size:clamp(14px,4vw,16px)}
  .links{gap:7px}
  .btn{padding:11px 13px;font-size:14px}
  .pe{margin-top:12px;gap:7px}
}

@media (prefers-reduced-motion:reduce){
  /* ⚠️ `animation-duration:.01ms` sozinho NAO para animacao infinita: ela passa
     a rodar rapido em vez de parar. `animation-iteration-count:1` e a metade que
     falta na receita. E `*` nao alcanca pseudoelemento: sem citar ::before e
     ::after, quem pede menos movimento continua com o fundo se mexendo. */
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .simbolo__rev{clip-path:none}
  .simbolo__luz{display:none}
}