/*
 * styles.css — layout estrutural das seções.
 * Regra fixa: nunca usar um valor de cor literal aqui — sempre var(--token)
 * definido em theme.css. Isso é o que permite reaproveitar este arquivo
 * inteiro em outro projeto trocando só o theme.css.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.container-narrow {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding-block: var(--section-padding-y);
}

.section--alt {
  background: var(--color-bg-alt);
}

/* Emenda entre duas seções de mesmo fundo. Sem a troca de cor o olho lê as duas
   como um bloco só, e os dois paddings somados (2 × 96px) abrem um vazio grande
   demais no meio dele. Aqui a emenda vira um respiro único.
   Casos atuais: solução → oferta (ambas --alt, depois que a seção Autoridade
   saiu do meio) e segurança → conheça a Ditolvo (ambas no fundo padrão, depois
   que o FAQ saiu). Entre fundos diferentes o padding cheio continua valendo —
   ali o corte de cor é que justifica o respiro maior. .final-cta fica de fora
   porque tem fundo próprio (terracota). */
.section--alt + .section--alt,
.section:not(.section--alt):not(.final-cta) + .section:not(.section--alt):not(.final-cta) {
  padding-top: calc(var(--section-padding-y) * 0.4);
}

/* Mesmo ajuste pelo lado de cima da emenda. Onde não houver suporte a :has() a
   página só fica com o respiro um pouco maior — nada quebra. */
.section--alt:has(+ .section--alt),
.section:not(.section--alt):not(.final-cta):has(+ .section:not(.section--alt):not(.final-cta)) {
  padding-bottom: calc(var(--section-padding-y) * 0.4);
}

.section__title {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  margin-bottom: 1.5rem;
}

/* Em mobile o clamp trava no mínimo (1.6rem) porque 2.4vw fica pequeno demais
   para disputar. Com ~13 caracteres por linha, os títulos longos desta LP
   ocupavam seis ou sete linhas antes do conteúdo começar. Reduzir a fonte e
   apertar a entrelinha devolve o título a três ou quatro linhas. */
@media (max-width: 600px) {
  .section__title {
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 1.25rem;
  }
}

/* Botão de destaque (CTAs) */
.btn-accent {
  display: inline-block;
  background: var(--color-accent-cta);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  color: var(--color-white);
}

/* Mobile: reduz padding/fonte do CTA para o mesmo estilo compacto em todas
   as seções (mesma referência: o botão do hero). Largura fica natural (do
   próprio texto) em vez de forçada — um valor fixo único obrigava os labels
   maiores a quebrar em 2 linhas e ficar bem mais alto que os de 1 linha só.
   A centralização em solução/oferta/cta final vem de .section-cta--center
   (text-align no container), o hero continua alinhado à esquerda. */
.solution .section__title,
.offer .section__title,
.faq .section__title {
  text-align: center;
}

@media (max-width: 600px) {
  .section-cta .btn-accent {
    padding: 0.65rem 1.1rem;
    font-size: 0.85rem;
  }

  /* Com a fonte e o padding reduzidos, o botão fechava em ~42px de altura —
     abaixo do alvo de toque de 44px. inline-flex + min-height devolve a altura
     sem esticar a largura nem afetar o desktop. */
  .btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* Espaçamento padrão acima de todo CTA de seção — garante o mesmo respiro
   em hero, solução, oferta e CTA final em vez de estilo inline por seção. */
.section-cta {
  margin-top: 2rem;
}

/* Modificador usado nas seções em que o CTA fica centralizado sob uma
   imagem/conteúdo centralizado (solução, oferta) — hero mantém alinhado
   à esquerda, junto do bloco de texto. */
.section-cta--center {
  text-align: center;
}

/* Header */
.site-header {
  padding: 1rem 0;
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow-card);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  gap: 1rem;
}

.site-header__logo {
  height: 36px;
  width: auto;
}

/* Linha própria abaixo do cabeçalho principal — evita espremer a logo ao
   colocar o endereço junto dela na mesma coluna. */
.site-header__address {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-bg-alt);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-slate);
}

.site-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.badge-pill {
  background: var(--color-bg-alt);
  color: var(--color-terracota);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Header em telas estreitas: empilhado e centralizado — logo, os dois selos
   lado a lado e o endereço. flex-direction: column resolve o empilhamento sem
   order nem flex-basis; usar flex-basis numa <img> seria armadilha, porque
   define a largura do item no eixo principal e esticaria a logo.
   O CTA sai daqui em mobile: com a logo medindo 126px de largura (720×148 a
   26px de altura), o par não cabe em uma linha de 360px, e o botão flutuante do
   WhatsApp aponta para o mesmo destino — além de cada seção ter o seu CTA. */
@media (max-width: 600px) {
  .site-header {
    padding: 0.85rem 0;
    transition: padding 0.2s ease;
  }

  .site-header__inner {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    transition: gap 0.2s ease;
  }

  /* Sem isso o gap continuaria reservando espaço para os selos já encolhidos. */
  .site-header--compact .site-header__inner {
    gap: 0;
  }

  .site-header__logo {
    height: 26px;
  }

  .site-header__badges {
    justify-content: center;
    gap: 0.4rem;
  }

  .site-header .btn-accent {
    display: none;
  }

  /* Os dois selos precisam caber lado a lado numa linha de 312px úteis, e
     "FASE FINAL DE OBRAS" em caixa alta é largo: no tamanho de desktop a soma
     passava disso e empilhava. O clamp acompanha a largura da tela em vez de
     apostar num valor fixo, então eles continuam na mesma linha até em 320px —
     e se ainda assim faltar espaço, o flex-wrap do próprio ul quebra a linha. */
  .badge-pill {
    font-size: clamp(0.55rem, 2.5vw, 0.62rem);
    letter-spacing: 0.02em;
    padding: 0.3rem 0.6rem;
  }

  .site-header__address {
    font-size: 0.68rem;
    text-align: center;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
  }

  /* Assim que a leitura começa, o header se reduz à logo: de ~135px para ~40px,
     devolvendo a tela ao conteúdo sem tirar a marca de vista. A classe entra
     pelo main.js e só produz efeito dentro desta media query — no desktop o
     header continua exatamente como está.
     Selos e endereço encolhem por max-height em vez de sumirem com display:
     none. O header é sticky, ou seja, ocupa espaço no fluxo: cortar 95px de
     altura de uma vez faria todo o conteúdo abaixo saltar no primeiro scroll.
     Assim a página encurta junto com a transição, de forma contínua. */
  .site-header__badges,
  .site-header__address {
    overflow: hidden;
    max-height: 5rem;
    transition: max-height 0.2s ease, opacity 0.2s ease,
                margin 0.2s ease, padding 0.2s ease;
  }

  .site-header--compact {
    padding: 0.5rem 0;
  }

  .site-header--compact .site-header__badges,
  .site-header--compact .site-header__address {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top-width: 0;
  }
}

/* Hero — topo mais próximo do header (o padding-bottom continua generoso,
   separando do bloco "Dor" logo abaixo). */
.hero {
  padding-top: calc(var(--section-padding-y) * 0.55);
  padding-bottom: calc(var(--section-padding-y) * 1.1);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.hero__kicker {
  color: var(--color-terracota);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.hero__subheadline {
  font-size: 1.15rem;
  color: var(--color-ink);
  opacity: 0.85;
  margin-bottom: 1.75rem;
}

/* Régua de fases da obra, abaixo do CTA do hero. Obra tem etapas, então os três
   traços não são enfeite: os anteriores marcam o que já passou e o aceso marca
   onde a obra está. É a única peça da página que usa terracota como acento
   sólido fora dos selos do header — e mede 16px, então sinaliza sem disputar
   atenção com o botão. Sem animação de propósito: movimento colado no CTA
   rouba justamente o olhar que o botão precisa. */
.hero__phase {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.1rem;
}

.hero__phase-track {
  display: inline-flex;
  gap: 4px;
}

.hero__phase-step {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--color-slate-rgb), 0.18);
}

.hero__phase-step--done {
  background: rgba(var(--color-slate-rgb), 0.45);
}

.hero__phase-step--current {
  background: var(--color-terracota);
}

.hero__phase-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-slate);
}

/* max-height + object-fit evita que uma foto em retrato (ex.: fachada de
   prédio) estoure a altura do hero — sem isso a coluna da imagem podia ficar
   bem mais alta que a coluna de texto e "quebrar" o layout no primeiro load. */
.hero__image {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-card);
}

/* Imagem de apoio usada nas seções Solução e Oferta (mesma tratativa visual do hero).
   display:block + margin:auto centraliza (uma <img> é inline por padrão e,
   com max-width menor que o container, ficava alinhada à esquerda). */
.section-image {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 2rem;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-card);
}

/* Quando a imagem é o último elemento da seção — caso da Solução, que hoje é só
   título + foto — a margem de baixo se soma ao padding da seção e deixa o
   respiro de baixo maior que o de cima. */
.section-image:last-child {
  margin-bottom: 0;
}

/* Legenda visível abaixo do carrossel de amenidades da seção Oferta. */
.image-caption {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-slate);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* Hero em mobile. Quatro ajustes, todos pelo mesmo motivo: em uma coluna o
   bloco de texto empurra a foto e o CTA para fora da primeira tela.
   - h1: o tamanho vinha do Bootstrap (~27px aqui) porque este arquivo nunca
     definiu um. Fixamos o valor para não depender do reset de terceiro.
   - kicker: uma frase longa em caixa alta ocupava quatro linhas antes mesmo do
     título; menor e com menos tracking, cabe em duas.
   - foto: 560px de altura em retrato virava uma parede entre o CTA e a seção
     seguinte. O object-fit: cover já cuida do recorte.
   - régua de fases: ganha wrap para nunca estourar a linha em telas de 320px. */
@media (max-width: 600px) {
  .hero h1 {
    font-size: 1.85rem;
  }

  .hero__kicker {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    line-height: 1.45;
    margin-bottom: 0.75rem;
  }

  .hero__subheadline {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
  }

  .hero__image {
    max-height: 320px;
  }

  .hero__phase {
    flex-wrap: wrap;
  }
}

/* Dor / identificação */
.pain .section__title {
  text-align: center;
}

.pain-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.pain-list li {
  background: var(--color-white);
  border-radius: var(--radius-base);
  padding: 1.6rem;
  box-shadow: var(--shadow-card);
}

.pain-list li p {
  margin: 0;
}

.pain-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-terracota);
}

.pain-list__icon svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 900px) {
  .pain-list { grid-template-columns: 1fr; }
}

/* Empilhados, os três cards viram uma coluna longa: com o respiro de desktop
   entre eles a seção passava de duas telas. Aperta o espaço entre os cards e o
   interno deles, e centraliza ícone e texto — em uma coluna só, o eixo central
   dá aos três cards um alinhamento comum que a leitura à esquerda não tinha.
   As margens laterais automáticas são o que centraliza o ícone: ele é um flex
   container de largura fixa, então text-align do card não o alcança. */
@media (max-width: 600px) {
  .pain-list {
    margin-top: 1.75rem;
    gap: 1rem;
  }

  .pain-list li {
    padding: 1.25rem;
    text-align: center;
  }

  .pain-list__icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 0.75rem;
  }
}

/* Solução / pilares — a seção está desativada no index.php, mas a partial
   continua completa; o CSS fica aqui para que reativá-la seja só descomentar
   o include. */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.pillar-card {
  background: var(--color-white);
  border-radius: var(--radius-base);
  padding: 1.6rem;
  box-shadow: var(--shadow-card);
}

.pillar-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent-cta);
  margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* Oferta / amenidades */
.offer-carousel {
  max-width: 640px;
  margin: 0 auto 0.5rem;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.offer-carousel .carousel-item img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* Recorte diagonal laranja no canto inferior esquerdo — reproduz o mesmo
   acento de marca que a foto original do rooftop já trazia embutido,
   agora simulado via CSS para valer em qualquer foto do carrossel. */
.offer-carousel .carousel-item {
  position: relative;
}

.offer-carousel .carousel-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  height: 7%;
  background: var(--color-accent-cta);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

/* Setas do carrossel: o ícone padrão do Bootstrap em opacidade 0.5 fica
   praticamente invisível sobre fotos claras. Fundo circular escuro garante
   contraste em qualquer imagem. */
.offer-carousel .carousel-control-prev,
.offer-carousel .carousel-control-next {
  opacity: 1;
}

.offer-carousel .carousel-control-prev-icon,
.offer-carousel .carousel-control-next-icon {
  width: 2.75rem;
  height: 2.75rem;
  background-color: rgba(43, 43, 42, 0.55);
  background-size: 60% 60%;
  border-radius: 50%;
}

/* Sobe os indicadores (bolinhas) para não colidirem com o recorte laranja
   no canto inferior esquerdo. */
.offer-carousel .carousel-indicators {
  margin-bottom: 2rem;
}

@media (max-width: 600px) {
  .offer-carousel .carousel-item img {
    height: 280px;
  }

  /* O ícone de 44px ocupava quase toda a faixa de 15% que o Bootstrap reserva
     para o controle, colando na borda da foto. Só o ícone encolhe — a área de
     toque continua sendo o botão inteiro, que cobre toda a altura do slide. */
  .offer-carousel .carousel-control-prev-icon,
  .offer-carousel .carousel-control-next-icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .offer-carousel .carousel-indicators {
    margin-bottom: 1.25rem;
  }
}

.amenity-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.amenity-group {
  background: var(--color-white);
  border-radius: var(--radius-base);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.amenity-group__name {
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.amenity-group ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-slate);
}

@media (max-width: 900px) {
  .amenity-groups { grid-template-columns: 1fr; }
}

/* Só o título de cada grupo centraliza — a lista continua alinhada à esquerda,
   porque marcador e texto centralizados destroem a coluna que o olho segue ao
   percorrer itens. */
@media (max-width: 600px) {
  .amenity-group__name {
    text-align: center;
  }
}

/* Segurança */
.security-block {
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-base);
  padding: 2.5rem;
  text-align: center;
}

.security-block .section__title {
  color: var(--color-white);
}

/* Os 2.5rem de padding do bloco escuro somavam 80px aos 48px do container: numa
   tela de 360px sobravam pouco mais de 230px para o texto jurídico. */
@media (max-width: 600px) {
  .security-block {
    padding: 1.75rem 1.25rem;
  }
}

/* FAQ */
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--color-accent-cta);
  background: var(--color-bg-alt);
}

.faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-accent-rgb), 0.25);
}

/* Conheça a Ditolvo */
.about-ditolvo {
  text-align: center;
}

.about-ditolvo__logo {
  display: block;
  height: 40px;
  width: auto;
  margin: 0 auto 1.5rem;
}

.about-ditolvo p {
  max-width: 65ch;
  margin: 0 auto;
  color: var(--color-ink);
  opacity: 0.85;
}

/* CTA final */
.final-cta {
  background: var(--color-terracota);
  color: var(--color-white);
  text-align: center;
}

.final-cta .section__title {
  color: var(--color-white);
}

/* O .btn-accent padrão (fundo --color-accent-cta, ~#A65C09) contra o fundo
   terracota desta seção mede ~1.09:1 — quase invisível. Sobrescreve para
   branco com texto na cor de destaque, o que garante >=4.5:1 nas duas
   direções (fundo branco/terracota e texto accent-cta/branco). */
.final-cta .btn-accent {
  background: var(--color-white);
  color: var(--color-accent-cta);
}

/* Rodapé */
.site-footer {
  background: var(--color-ink);
  color: var(--color-bg-alt);
  padding-block: 3rem;
  font-size: 0.85rem;
}

.site-footer__logos {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.site-footer__logos img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
}

.site-footer__grid p {
  margin: 0;
}

@media (max-width: 700px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.site-footer__legal {
  opacity: 0.65;
  line-height: 1.5;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--color-white-rgb), 0.15);
  font-size: 0.8rem;
}

/* Em uma coluna o rodapé já é a parte mais longa da página; o respiro de
   desktop só adiciona rolagem depois que o conteúdo acabou. Tudo centralizado:
   com as duas colunas empilhadas não sobra nada para justificar a margem
   esquerda comum, e a logo centrada fecha o eixo com os dois blocos e o texto
   legal. justify-content é o que centraliza a logo, que vive num flex.
   Este bloco fica depois das regras base de propósito: seletor dentro de
   @media não ganha especificidade, então quem vem por último no arquivo vence
   — antes daqui, os ajustes de .site-footer__legal eram anulados pela regra
   base logo acima. */
@media (max-width: 600px) {
  .site-footer {
    --footer-pad: 2.25rem;
    padding-block: var(--footer-pad);
    text-align: center;
  }

  .site-footer__logos {
    justify-content: center;
    margin-bottom: 1.25rem;
  }

  /* O botão do WhatsApp é fixed: no fim da página ele cobria a última linha do
     texto legal, escondendo o CRECI do corretor responsável — informação
     obrigatória, não pode ficar ilegível.
     A reserva é só o que falta: o botão ocupa a própria altura mais o
     afastamento da borda, e o padding do rodapé já cobre parte disso — somar os
     dois inteiros abria um vão grande demais. Sobra a folga de 0.75rem entre a
     última linha e o topo do botão. Tudo em variáveis: mexer no tamanho do
     botão ou no respiro do rodapé reajusta a conta sozinho. */
  .site-footer__legal {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: calc(
      var(--whatsapp-float-size) + var(--whatsapp-float-inset)
      - var(--footer-pad) + 0.75rem
    );
  }
}

/* Botão flutuante do WhatsApp.
   Tamanho e afastamento saem de variáveis porque o rodapé precisa reservar
   exatamente esse espaço embaixo — ver .site-footer no bloco de mobile. Ficam
   aqui, e não em theme.css, que é identidade visual (cor, tipografia, forma).
   Os valores são os mesmos de antes: nada muda de aparência. */
:root {
  --whatsapp-float-size: 58px;
  --whatsapp-float-inset: 1.25rem;
}

.whatsapp-float {
  position: fixed;
  right: var(--whatsapp-float-inset);
  bottom: var(--whatsapp-float-inset);
  z-index: 50;
  background: var(--color-whatsapp);
  color: var(--color-white);
  width: var(--whatsapp-float-size);
  height: var(--whatsapp-float-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  animation: whatsapp-pulse 2.4s infinite;
}

@keyframes whatsapp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--color-whatsapp-rgb), 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(var(--color-whatsapp-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--color-whatsapp-rgb), 0); }
}

/* O pulso é infinito e, em mobile, fica na tela do começo ao fim da leitura.
   Quem pediu menos movimento no sistema recebe o botão parado — continua
   visível e clicável, só não pulsa. Escopo limitado ao mobile de propósito:
   o desktop não é alvo destes ajustes. */
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    animation: none;
  }

  .btn-accent,
  .site-header,
  .site-header__inner,
  .site-header__badges,
  .site-header__address {
    transition: none;
  }
}