/* ==========================================================================
   Mais Luz — Espaço de Psicoterapia e Acolhimento
   Persona visual: B — Acolhedor Orgânico
   Identidade: manual de ID Visual do cliente (Mavi Andrade / Digital Bloom)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Paleta oficial do manual de ID Visual */
  --verde: #4A5946;          /* verde sálvia profundo — primária */
  --areia: #F2BF80;          /* dourado areia — acento */
  --terra: #8C5C32;          /* marrom terra — secundária */
  --rose: #F2C1AE;           /* rosé — suporte quente */
  --offwhite: #F2F2F2;       /* off-white — fundo base */

  /* Neutros derivados da mesma família (nunca cinzas frios) */
  --verde-profundo: #36412F;
  --verde-claro: #7D8C75;
  --superficie: #FBF8F4;
  --superficie-quente: #F7EFE6;
  --texto: #2C352A;
  --texto-suave: #5E6B57;
  --linha: rgba(74, 89, 70, .16);
  --linha-forte: rgba(74, 89, 70, .28);
  --branco: #FFFFFF;

  /* Tipografia */
  --display: 'Cinzel Decorative', 'Cormorant Garamond', Georgia, serif;
  --corpo: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Forma — Persona B: cantos muito arredondados */
  --raio: 24px;
  --raio-g: 40px;
  --raio-p: 14px;

  --sombra: 0 18px 46px -24px rgba(44, 53, 42, .34);
  --sombra-suave: 0 10px 30px -18px rgba(44, 53, 42, .28);

  --largura: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--texto);
  background: var(--superficie);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--verde-profundo);
  line-height: 1.22;
  letter-spacing: .01em;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(1.95rem, 4.6vw, 3.35rem); line-height: 1.16; }
h2 { font-size: clamp(1.55rem, 3.3vw, 2.4rem); }

/* A Cinzel Decorative é uma display em caixa-alta: ótima em H1 e H2, ilegível em
   título curto de card. Os H3 ficam na secundária (Mont/Montserrat), que é onde o
   público escaneia. */
h3 {
  font-family: var(--corpo);
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--verde-profundo);
}

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--largura));
  margin-inline: auto;
}

.wrap-estreito {
  width: min(100% - (var(--gutter) * 2), 800px);
  margin-inline: auto;
}

section { position: relative; }

.secao { padding-block: clamp(3.75rem, 8vw, 6rem); position: relative; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Camada decorativa — linguagem Orgânica (Persona B)
   Blobs desfocados + grão + curvas + motivo de lótus (eco da logo)
   -------------------------------------------------------------------------- */
.decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 58% 42% 47% 53% / 52% 46% 54% 48%;
  filter: blur(46px);
  opacity: .5;
  will-change: transform;
}

.blob--rose { background: var(--rose); }
.blob--areia { background: var(--areia); }
.blob--verde { background: var(--verde-claro); }
.blob--terra { background: var(--terra); opacity: .22; }

/* grão sutil por cima dos fundos, tira o aspecto liso de template */
.grao::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}

/* motivo do nicho: pétala de lótus em traço, marca d'água */
.motivo {
  position: absolute;
  color: var(--verde);
  opacity: .085;
  will-change: transform;
}

.motivo svg { width: 100%; height: auto; display: block; }

/* deriva contínua da arte de fundo */
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(0, -18px, 0) rotate(2deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes drift-lento {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(14px, 12px, 0) scale(1.05); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.decor-drift { animation: drift 18s ease-in-out infinite; }
.decor-drift--lento { animation: drift-lento 24s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   4. Divisores de seção — curva orgânica + filete com nó de lótus
   -------------------------------------------------------------------------- */
.onda {
  display: block;
  width: 100%;
  height: clamp(42px, 6vw, 80px);
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}
.onda--topo { margin-top: -1px; margin-bottom: 0; }
.onda svg { display: block; width: 100%; height: 100%; }

/* filete fino com nó central, para transições dentro da mesma faixa de cor */
.filete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(100% - (var(--gutter) * 2), 560px);
  margin: 0 auto;
  color: var(--terra);
}
.filete::before, .filete::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linha-forte), transparent);
}
.filete svg { width: 22px; height: 22px; flex: 0 0 auto; opacity: .85; }

/* --------------------------------------------------------------------------
   5. Header e navegação
   -------------------------------------------------------------------------- */
.topo {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(251, 248, 244, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, padding .3s ease;
  padding-block: .65rem;
}

.topo.rolado {
  background: rgba(251, 248, 244, .97);
  box-shadow: 0 6px 26px -20px rgba(44, 53, 42, .5);
  border-bottom-color: var(--linha);
  padding-block: .35rem;
}

.topo__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100% - (var(--gutter) * 2), var(--largura));
  margin-inline: auto;
}

.topo__logo { display: flex; align-items: center; flex: 0 0 auto; }
.topo__logo img {
  height: clamp(50px, 6vw, 64px);
  width: auto;
  transition: height .3s ease;
}
.topo.rolado .topo__logo img { height: clamp(44px, 5vw, 54px); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.nav a {
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--texto);
  position: relative;
  padding-block: .35rem;
  transition: color .2s ease;
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--terra);
  transition: width .25s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--verde); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }

/* --------------------------------------------------------------------------
   6. Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 50px;
  padding: .85rem 1.65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--corpo);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.btn svg { flex: 0 0 auto; }

.btn--primario {
  background: var(--verde);
  color: var(--superficie);
  box-shadow: 0 12px 28px -16px rgba(74, 89, 70, .8);
}
.btn--primario:hover {
  background: var(--verde-profundo);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -16px rgba(74, 89, 70, .9);
}

.btn--contorno {
  background: transparent;
  color: var(--verde);
  border-color: var(--linha-forte);
}
.btn--contorno:hover {
  background: var(--superficie-quente);
  border-color: var(--terra);
  color: var(--verde-profundo);
  transform: translateY(-2px);
}

.btn--claro {
  background: var(--areia);
  color: var(--verde-profundo);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .45);
}
.btn--claro:hover { background: #F7D0A0; transform: translateY(-2px); }

.topo .btn { min-height: 44px; padding: .6rem 1.3rem; font-size: .88rem; }

/* --------------------------------------------------------------------------
   7. Menu mobile — drawer padrão da esteira
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--verde-profundo);
  cursor: pointer;
  box-shadow: var(--sombra-suave);
}
.nav-toggle svg { width: 24px; height: 24px; }

.menu-mobile {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1200;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.5rem 2rem;
  background: var(--superficie);
  box-shadow: -18px 0 50px -22px rgba(0, 0, 0, .3);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility .34s;
  overscroll-behavior: contain;
  overflow-y: auto;
}
.menu-mobile.aberto { transform: none; visibility: visible; }

.menu-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--linha);
}
.menu-mobile__head img { height: 46px; width: auto; }

.menu-fechar {
  background: none; border: none; cursor: pointer;
  color: var(--verde-profundo);
  padding: .3rem; margin: -.3rem; line-height: 0;
}
.menu-fechar svg { width: 30px; height: 30px; }

.menu-mobile__links {
  display: flex; flex-direction: column;
  margin: 0; padding: 0; list-style: none;
}
.menu-mobile__links li { border-bottom: 1px solid var(--linha); }
.menu-mobile__links a {
  display: flex; align-items: center;
  min-height: 54px;
  font-size: 1.05rem; font-weight: 500;
  color: var(--texto); text-decoration: none;
  transition: color .2s ease;
}
.menu-mobile__links a:hover,
.menu-mobile__links a[aria-current="page"] { color: var(--verde); }

.menu-mobile__cta { margin-top: auto; width: 100%; }

.menu-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(44, 53, 42, .5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.menu-backdrop.aberto { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* topo calibrado para a primeira dobra inteira (até as CTAs) caber no
     recorte 1200x630 do card social, sem espremer o respiro do hero */
  padding-top: clamp(7rem, 13vw, 9rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(242, 193, 174, .5) 0%, transparent 58%),
    radial-gradient(90% 80% at 6% 92%, rgba(242, 191, 128, .42) 0%, transparent 60%),
    linear-gradient(170deg, var(--superficie) 0%, var(--superficie-quente) 100%);
}

.hero .blob--rose  { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: -14%; right: -10%; }
.hero .blob--areia { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; bottom: -18%; left: -8%; opacity: .42; }
.hero .blob--verde { width: 24vw; height: 24vw; max-width: 320px; max-height: 320px; top: 46%; right: 26%; opacity: .2; }

.hero .motivo--lotus { width: clamp(280px, 34vw, 460px); top: 8%; right: -4%; opacity: .1; }
.hero .motivo--arco  { width: clamp(220px, 26vw, 360px); bottom: 4%; left: -6%; opacity: .075; }

.hero__inner { position: relative; z-index: 2; }

.hero__conteudo { max-width: 720px; }

.hero h1 { margin-bottom: 1.15rem; }

.hero__lead {
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  color: var(--texto-suave);
  max-width: 56ch;
  margin-bottom: 1.5rem;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 0;
}

/* a chancela vem antes das CTAs: credibilidade antes de pedir o clique */
.hero__selo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.3rem;
  padding: .6rem 1.15rem .6rem .8rem;
  background: rgba(251, 248, 244, .78);
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--texto-suave);
  box-shadow: var(--sombra-suave);
}
.hero__selo svg { width: 20px; height: 20px; color: var(--terra); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   9. Eyebrow e cabeçalho de seção
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  font-family: var(--corpo);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1.1rem;
}
.eyebrow::after {
  content: '';
  width: 28px; height: 3px;
  border-radius: 2px;
  background: var(--areia);
}

.cabecalho-secao { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.cabecalho-secao .intro-secao {
  color: var(--texto-suave);
  max-width: 62ch;
  margin-bottom: 0;
}

.cabecalho-secao.centro { text-align: center; }
.cabecalho-secao.centro .eyebrow { align-items: center; }
.cabecalho-secao.centro .titulo-secao,
.cabecalho-secao.centro .intro-secao { margin-inline: auto; }
.cabecalho-secao.centro .titulo-secao { max-width: 20ch; }

/* --------------------------------------------------------------------------
   10. Seção "Talvez você se reconheça" — cartões orgânicos
   -------------------------------------------------------------------------- */
.reconhecer { background: var(--superficie); }
.reconhecer .blob--areia { width: 30vw; height: 30vw; max-width: 380px; max-height: 380px; top: 6%; left: -12%; opacity: .3; }
.reconhecer .blob--rose  { width: 26vw; height: 26vw; max-width: 330px; max-height: 330px; bottom: 2%; right: -10%; opacity: .34; }

/* minmax de 300px garante 3 colunas no desktop (3+3), nunca 4+2 desequilibrado */
.grade-reconhecer {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.5rem, 2.6vw, 1.9rem);
  box-shadow: var(--sombra-suave);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cartao:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: rgba(140, 92, 50, .3);
}

.cartao__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 50% 42% 55% 45% / 48% 52% 44% 56%;
  background: var(--superficie-quente);
  color: var(--terra);
}
.cartao__icone svg { width: 26px; height: 26px; }

.cartao h3 { margin-bottom: .6rem; }
.cartao p { color: var(--texto-suave); font-size: .97rem; margin: 0; }

/* --------------------------------------------------------------------------
   11. Faixas split (texto + foto em arco/blob)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--inverso .split__midia { order: -1; }
}

.split__texto p { color: var(--texto-suave); }
.split__texto p.destaque {
  font-family: var(--corpo);
  font-size: clamp(1.05rem, 1.9vw, 1.22rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: var(--verde);
}

.split__midia { position: relative; }

/* moldura da Persona B: arco / blob orgânico */
.moldura-arco {
  position: relative;
  margin: 0;
  border-radius: 46% 46% 22% 22% / 34% 34% 12% 12%;
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 5;
}
.moldura-arco img { width: 100%; height: 100%; object-fit: cover; }

.moldura-blob {
  position: relative;
  margin: 0;
  border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 5;
}
.moldura-blob img { width: 100%; height: 100%; object-fit: cover; }

/* moldurinha de acento atrás da foto */
.split__midia::before {
  content: '';
  position: absolute;
  inset: -14px -14px 18px 18px;
  border: 1px solid var(--linha-forte);
  border-radius: 46% 46% 24% 24% / 34% 34% 14% 14%;
  pointer-events: none;
}
.split--inverso .split__midia::before {
  inset: -14px 18px 18px -14px;
  border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
}

/* seção "O espaço" */
.espaco { background: linear-gradient(180deg, var(--superficie-quente) 0%, var(--superficie) 100%); }
.espaco .blob--verde { width: 32vw; height: 32vw; max-width: 400px; max-height: 400px; top: 10%; right: -14%; opacity: .16; }
.espaco .motivo--lotus { width: clamp(200px, 22vw, 300px); bottom: 6%; left: -5%; opacity: .07; }

.marca-frase {
  position: relative;
  margin: 1.75rem 0 0;
  padding: .35rem 0 .35rem 1.5rem;
  border-left: 2px solid var(--areia);
  font-family: var(--corpo);
  font-size: clamp(.98rem, 1.6vw, 1.08rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   12. Como funciona — passos
   -------------------------------------------------------------------------- */
.passos-secao { background: var(--superficie); }
.passos-secao .blob--rose { width: 28vw; height: 28vw; max-width: 340px; max-height: 340px; top: 12%; right: -12%; opacity: .3; }

.passos {
  --passos-gap: clamp(1.25rem, 2.6vw, 2rem);
  --passo-raio: 29px;            /* metade do .passo__numero (58px) */
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--passos-gap);
}

.passo { position: relative; padding-top: .5rem; }

.passo__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  margin-bottom: 1.1rem;
  border-radius: 52% 48% 44% 56% / 48% 54% 46% 52%;
  background: var(--verde);
  color: var(--superficie);
  /* numeral na secundária: a Cinzel Decorative usa algarismos de estilo antigo,
     em que o 1 vira um I e o 0 vira um O. Em numeração de passo isso lê errado. */
  font-family: var(--corpo);
  font-size: 1.15rem;
  font-weight: 600;
  box-shadow: 0 12px 26px -16px rgba(74, 89, 70, .9);
}

.passo h3 { margin-bottom: .55rem; }
.passo p { color: var(--texto-suave); font-size: .97rem; margin: 0; }

/* linha pontilhada curva conectando os passos (desktop) */
@media (min-width: 980px) {
  .passos::before {
    content: '';
    position: absolute;
    /* centro vertical dos círculos: padding-top do .passo (.5rem) + raio */
    top: calc(.5rem + var(--passo-raio) - 1px);
    /* começa no centro do círculo 1 e termina no centro do círculo 4:
       cada coluna mede (100% - 3*gap)/4, então o centro do 4º fica a
       25% - 0.75*gap - raio da borda direita */
    left: var(--passo-raio);
    right: calc(25% - var(--passos-gap) * .75 - var(--passo-raio));
    height: 2px;
    background-image: linear-gradient(90deg, var(--linha-forte) 0 8px, transparent 8px 18px);
    background-size: 18px 2px;
    z-index: -1;
  }
}

/* --------------------------------------------------------------------------
   13. Diferenciais — lista numerada com número grande
   -------------------------------------------------------------------------- */
.porque {
  background: linear-gradient(180deg, var(--superficie) 0%, var(--superficie-quente) 100%);
}
.porque .blob--areia { width: 34vw; height: 34vw; max-width: 420px; max-height: 420px; bottom: -8%; left: -12%; opacity: .32; }
.porque .motivo--arco { width: clamp(220px, 24vw, 340px); top: 8%; right: -6%; opacity: .07; }

.lista-numerada {
  position: relative; z-index: 2;
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 900px;
}

.item-numerado {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  align-items: start;
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--linha);
}
.item-numerado:last-child { border-bottom: none; padding-bottom: 0; }

/* mesmo motivo do .passo__numero: "01" na display sairia lido como "OI" */
.item-numerado__n {
  font-family: var(--corpo);
  font-size: clamp(2.3rem, 5.4vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: .9;
  color: var(--terra);
  opacity: .3;
  user-select: none;
  font-variant-numeric: lining-nums tabular-nums;
}

.item-numerado h3 { margin-bottom: .5rem; }
.item-numerado p { color: var(--texto-suave); margin: 0; }

/* --------------------------------------------------------------------------
   14. Quem atende — perfis
   -------------------------------------------------------------------------- */
.equipe { background: var(--superficie); }
.equipe .blob--verde { width: 30vw; height: 30vw; max-width: 380px; max-height: 380px; top: 4%; left: -14%; opacity: .16; }

.perfis {
  position: relative; z-index: 2;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.perfil {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  box-shadow: var(--sombra-suave);
}

@media (min-width: 760px) {
  .perfil { grid-template-columns: 240px 1fr; }
  .perfil--inverso { grid-template-columns: 1fr 240px; }
  .perfil--inverso .perfil__foto { order: 2; }
}

.perfil__foto { position: relative; }

/* nome próprio curto: aqui a display do manual funciona e dá cerimônia */
.perfil__nome {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.1vw, 1.45rem);
  font-weight: 400;
  letter-spacing: .01em;
  margin-bottom: .3rem;
}

.perfil__papel {
  display: block;
  font-family: var(--corpo);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: .9rem;
}

.perfil p { color: var(--texto-suave); font-size: .98rem; }

.perfil__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.1rem 0 0;
  padding: 0;
}
.perfil__tags li {
  font-size: .8rem;
  font-weight: 500;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: var(--superficie-quente);
  color: var(--verde);
  border: 1px solid var(--linha);
}

.registro {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--verde);
  margin-bottom: .9rem;
}
.registro svg { width: 17px; height: 17px; color: var(--terra); }

/* marcação visível de dado que ainda não voltou do cliente */
.pendente {
  font-weight: 600;
  color: var(--terra);
  background: rgba(242, 191, 128, .3);
  border-radius: 4px;
  padding: 0 .35rem;
}

/* --------------------------------------------------------------------------
   15. Placeholder de imagem (foto real ainda não enviada)
   -------------------------------------------------------------------------- */
.perfil__retrato {
  position: relative;
  margin: 0;
  border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 1 / 1;
}
.perfil__retrato img { width: 100%; height: 100%; object-fit: cover; }

/* a moldura do segundo perfil espelha a curva, como nas demais duplas do site */
.perfil--inverso .perfil__retrato { border-radius: 42% 58% 54% 46% / 52% 46% 54% 48%; }

.img-placeholder {
  background: var(--superficie-quente);
  border: 2px dashed rgba(140, 92, 50, .38);
  border-radius: var(--raio);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 240px;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.img-placeholder__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--texto-suave);
  text-align: center;
  padding: 1.5rem;
}
.img-placeholder__inner svg { color: var(--terra); opacity: .7; }
.img-placeholder__label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--verde);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.img-placeholder__hint { font-size: .74rem; color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   16. Faixa "De onde você estiver" + CTA — tema escuro
   -------------------------------------------------------------------------- */
.faixa-escura {
  background: var(--verde);
  color: var(--superficie);
  overflow: hidden;
}
.faixa-escura h1, .faixa-escura h2, .faixa-escura h3, .faixa-escura h4 { color: var(--superficie); }
.faixa-escura p { color: rgba(242, 242, 242, .84); }
.faixa-escura .eyebrow { color: var(--areia); }
.faixa-escura .eyebrow::after { background: var(--rose); }
.faixa-escura .split__midia::before { border-color: rgba(242, 242, 242, .28); }
.faixa-escura .filete { color: var(--areia); }
.faixa-escura .blob--areia { opacity: .22; }
.faixa-escura .blob--rose { opacity: .18; }
.faixa-escura .motivo { color: var(--areia); opacity: .12; }

.faixa-escura .blob--areia { width: 34vw; height: 34vw; max-width: 420px; max-height: 420px; top: -12%; right: -8%; }
.faixa-escura .blob--rose { width: 26vw; height: 26vw; max-width: 320px; max-height: 320px; bottom: -14%; left: -6%; }
.faixa-escura .motivo--lotus { width: clamp(220px, 24vw, 330px); bottom: 2%; right: 4%; }

.alcance-lista {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.alcance-lista li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .98rem;
  color: rgba(242, 242, 242, .9);
}
.alcance-lista svg {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  margin-top: .28rem;
  color: var(--areia);
}

/* CTA intermediária */
.cta-faixa {
  background: var(--verde-profundo);
  color: var(--superficie);
  text-align: center;
  overflow: hidden;
}
.cta-faixa h2 { color: var(--superficie); max-width: 22ch; margin-inline: auto; }
.cta-faixa p {
  color: rgba(242, 242, 242, .82);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}
.cta-faixa .eyebrow { color: var(--areia); align-items: center; }
.cta-faixa .eyebrow::after { background: var(--rose); }
.cta-faixa .blob--areia { width: 40vw; height: 40vw; max-width: 500px; max-height: 500px; top: -24%; left: 8%; opacity: .2; }
.cta-faixa .blob--rose { width: 30vw; height: 30vw; max-width: 380px; max-height: 380px; bottom: -22%; right: 6%; opacity: .16; }
.cta-faixa .motivo { color: var(--areia); opacity: .1; }
.cta-faixa .motivo--arco { width: clamp(240px, 26vw, 360px); top: 10%; right: -4%; }

.cta-faixa__inner { position: relative; z-index: 2; }
.cta-faixa__acoes { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* --------------------------------------------------------------------------
   17. FAQ — accordion
   -------------------------------------------------------------------------- */
.faq { background: var(--superficie); }
.faq .blob--areia { width: 30vw; height: 30vw; max-width: 360px; max-height: 360px; top: 8%; right: -12%; opacity: .28; }

.faq__lista { position: relative; z-index: 2; max-width: 860px; }

.faq__item {
  border-bottom: 1px solid var(--linha);
}
.faq__item:first-child { border-top: 1px solid var(--linha); }

.faq__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--corpo);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--verde-profundo);
  cursor: pointer;
  transition: color .2s ease;
}
.faq__pergunta:hover { color: var(--terra); }

.faq__sinal {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--superficie-quente);
  color: var(--terra);
  transition: transform .3s ease, background .25s ease;
}
.faq__sinal svg { width: 18px; height: 18px; }
.faq__item.aberto .faq__sinal { transform: rotate(45deg); background: var(--areia); }

.faq__resposta {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.faq__resposta p {
  color: var(--texto-suave);
  font-size: .98rem;
  padding-bottom: 1.35rem;
  margin: 0;
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   18. Blog — chamada
   -------------------------------------------------------------------------- */
.secao-blog {
  background: linear-gradient(180deg, var(--superficie) 0%, var(--superficie-quente) 100%);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.secao-blog .blob--rose { width: 26vw; height: 26vw; max-width: 320px; max-height: 320px; bottom: 4%; left: -10%; opacity: .3; }

.grade-blog {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 2.25rem;
}

.card-blog {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-blog:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

.card-blog__capa {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 90% at 24% 18%, rgba(242, 193, 174, .85) 0%, transparent 62%),
    radial-gradient(80% 80% at 82% 84%, rgba(242, 191, 128, .8) 0%, transparent 60%),
    linear-gradient(140deg, var(--superficie-quente), #EADFD1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--verde);
}
.card-blog__capa svg { width: 46%; max-width: 110px; height: auto; opacity: .34; }

.card-blog__corpo { padding: 1.35rem 1.5rem 1.6rem; }

.card-blog__selo {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terra);
  background: var(--superficie-quente);
  border-radius: 999px;
  padding: .3rem .8rem;
  margin-bottom: .7rem;
}

.card-blog__corpo p { color: var(--texto-suave); font-size: .94rem; margin: 0; }

.secao-blog .acoes-blog { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   19. Contato e formulário
   -------------------------------------------------------------------------- */
.contato { background: var(--superficie-quente); }
.contato .blob--areia { width: 32vw; height: 32vw; max-width: 400px; max-height: 400px; top: -6%; right: -12%; opacity: .34; }
.contato .motivo--lotus { width: clamp(200px, 22vw, 300px); bottom: 4%; left: -6%; opacity: .07; }

.contato__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .contato__grid { grid-template-columns: 1fr 1.05fr; }
}

.contato__texto p { color: var(--texto-suave); }

.form {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--sombra);
}

.campo { margin-bottom: 1.15rem; }

.campo label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--verde-profundo);
  margin-bottom: .45rem;
}

.campo input,
.campo textarea {
  width: 100%;
  padding: .85rem 1rem;
  font-family: var(--corpo);
  font-size: 1rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  min-height: 50px;
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.campo input:focus,
.campo textarea:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(242, 191, 128, .34);
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: #A8412B; }

.campo__erro {
  display: none;
  font-size: .8rem;
  color: #A8412B;
  margin-top: .35rem;
}
.campo__erro.visivel { display: block; }

.campo__dica { font-size: .78rem; color: var(--texto-suave); margin-top: .35rem; }

.form__aviso {
  font-size: .8rem;
  color: var(--texto-suave);
  line-height: 1.6;
  margin: 1.1rem 0 1.35rem;
}
.form__aviso a { color: var(--verde); text-decoration: underline; text-underline-offset: 2px; }

.form .btn { width: 100%; }

.form__status {
  font-size: .87rem;
  font-weight: 600;
  color: var(--verde);
  margin-top: .9rem;
  min-height: 1.2em;
}

/* lista de contatos com ícones */
.contatos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
}
.contatos a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  color: currentColor;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  transition: color .2s ease;
}
.contatos a:hover { color: var(--terra); }
.contatos svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   20. Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--verde-profundo);
  color: rgba(242, 242, 242, .82);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
  overflow: hidden;
  position: relative;
}
.rodape h2, .rodape h3, .rodape h4 { color: var(--superficie); }
.rodape .motivo { color: var(--areia); opacity: .07; }
.rodape .motivo--lotus { width: clamp(240px, 26vw, 360px); top: 8%; right: -4%; }

.rodape__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.25rem, 4vw, 3rem);
}
@media (min-width: 820px) {
  .rodape__grid { grid-template-columns: 1.5fr 1fr 1.2fr; }
}

.rodape__placa {
  display: inline-block;
  background: var(--superficie);
  border-radius: var(--raio);
  padding: 1rem 1.4rem;
  margin-bottom: 1.25rem;
}
.rodape__logo { height: clamp(68px, 8vw, 92px); width: auto; display: block; }

.rodape__bio { font-size: .93rem; line-height: 1.7; max-width: 42ch; }
/* links dentro do bloco de bio seguem o padrão dos demais links do rodapé */
.rodape__bio a { color: rgba(242, 242, 242, .82); text-decoration: none; transition: color .2s ease; }
.rodape__bio a:hover { color: var(--areia); }

.rodape__titulo {
  font-family: var(--corpo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--areia);
  margin-bottom: 1rem;
}

.rodape__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rodape__menu a {
  font-size: .94rem;
  text-decoration: none;
  color: rgba(242, 242, 242, .82);
  transition: color .2s ease;
}
.rodape__menu a:hover { color: var(--areia); }

.rodape .contatos { flex-direction: column; gap: .7rem; margin-top: 0; }
.rodape .contatos a { color: rgba(242, 242, 242, .82); }
.rodape .contatos a:hover { color: var(--areia); }

.rodape__base {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(242, 242, 242, .16);
  padding-block: 1.5rem 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .84rem;
}
.rodape__base a { color: rgba(242, 242, 242, .82); text-decoration: none; }
.rodape__base a:hover { color: var(--areia); }
.rodape__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* --------------------------------------------------------------------------
   21. WhatsApp flutuante
   -------------------------------------------------------------------------- */
.whatsapp-flutuante {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(37, 211, 102, .8);
  animation: wa-float 3.2s ease-in-out infinite, wa-pulse 2.8s ease-out 1.2s infinite;
  will-change: transform, box-shadow;
  transition: transform .25s ease;
}
.whatsapp-flutuante:hover {
  animation-play-state: paused;
  transform: scale(1.13);
}

@keyframes wa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes wa-pulse {
  0% { box-shadow: 0 10px 26px -10px rgba(37, 211, 102, .8), 0 0 0 0 rgba(37, 211, 102, .5); }
  70% { box-shadow: 0 10px 26px -10px rgba(37, 211, 102, .8), 0 0 0 20px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 10px 26px -10px rgba(37, 211, 102, .8), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* --------------------------------------------------------------------------
   22. Movimento — reveal on-scroll com stagger (perfil Suave, Persona B)
   -------------------------------------------------------------------------- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out, transform .6s ease-out;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.animate-on-scroll.visible { opacity: 1; transform: none; }

/* entrada do hero no load */
.hero-anim {
  opacity: 0;
  transform: translateY(22px);
  animation: hero-entra .75s cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 120ms);
}
@keyframes hero-entra { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   23. Página interna (sobre / serviços / política)
   -------------------------------------------------------------------------- */
.pagina-topo {
  position: relative;
  padding-top: clamp(7.5rem, 14vw, 9.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 88% 4%, rgba(242, 193, 174, .48) 0%, transparent 58%),
    linear-gradient(170deg, var(--superficie) 0%, var(--superficie-quente) 100%);
}
.pagina-topo .blob--areia { width: 32vw; height: 32vw; max-width: 400px; max-height: 400px; bottom: -22%; left: -10%; opacity: .4; }
.pagina-topo .motivo--lotus { width: clamp(220px, 26vw, 340px); top: 12%; right: -4%; opacity: .09; }
.pagina-topo__inner { position: relative; z-index: 2; }
.pagina-topo p { color: var(--texto-suave); max-width: 60ch; margin-bottom: 0; }

.conteudo-legal { position: relative; z-index: 2; }
.conteudo-legal h2 { margin-top: 2.5rem; }
.conteudo-legal h2:first-child { margin-top: 0; }
.conteudo-legal h3 { margin-top: 1.75rem; }
.conteudo-legal p, .conteudo-legal li { color: var(--texto-suave); }
.conteudo-legal ul { padding-left: 1.25rem; margin-bottom: 1.15rem; }
.conteudo-legal li { margin-bottom: .5rem; }
.conteudo-legal a { color: var(--verde); text-decoration: underline; text-underline-offset: 2px; }

/* serviços */
.servicos-grid {
  position: relative; z-index: 2;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.servico {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
  box-shadow: var(--sombra-suave);
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 820px) {
  .servico { grid-template-columns: 84px 1fr; gap: 1.75rem; }
}

.servico__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 52% 48% 44% 56% / 48% 54% 46% 52%;
  background: var(--superficie-quente);
  color: var(--terra);
  flex: 0 0 auto;
}
.servico__icone svg { width: 34px; height: 34px; }

.servico h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: .75rem; }
.servico p { color: var(--texto-suave); }

.servico__para {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.servico__para li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .95rem;
  color: var(--texto-suave);
}
.servico__para svg {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-top: .3rem;
  color: var(--terra);
}

/* página sobre — trajetória */
.trajetoria { position: relative; z-index: 2; max-width: 860px; }
.trajetoria__item {
  position: relative;
  padding-left: 2.25rem;
  padding-bottom: 2rem;
  border-left: 1px solid var(--linha-forte);
}
.trajetoria__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.trajetoria__item::before {
  content: '';
  position: absolute;
  left: -7px; top: .45rem;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--areia);
  border: 2px solid var(--superficie);
}
.trajetoria__item h3 { margin-bottom: .45rem; }
.trajetoria__item p { color: var(--texto-suave); font-size: .97rem; margin: 0; }

/* --------------------------------------------------------------------------
   24. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .nav, .topo .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .topo__inner { justify-content: space-between; }
  .topo__logo { margin-right: auto; }
  .nav-toggle { margin-left: auto; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .whatsapp-flutuante { bottom: 1.15rem; right: 1.15rem; width: 54px; height: 54px; }
  .hero__acoes .btn { width: 100%; }
  .cta-faixa__acoes .btn { width: 100%; }
  .item-numerado { grid-template-columns: 1fr; gap: .35rem; }
  .item-numerado__n { font-size: 2.4rem; }
  .rodape__base { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   25. Preferência por menos movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-anim { opacity: 1 !important; transform: none !important; animation: none !important; }
  .decor-drift, .decor-drift--lento { animation: none !important; }
  [data-parallax] { transform: none !important; }
  .whatsapp-flutuante { animation: none !important; }
  .menu-mobile, .menu-backdrop { transition: none !important; }
}