/* ==========================================================================
   Michele Santana Psicologia
   Persona visual: B — Acolhedor Orgânico (execução contida)
   Cores extraídas da logo e do cartão de visitas do cliente.
   ========================================================================== */

:root {
  /* Identidade do cliente */
  --primaria:        #6136B6;
  --primaria-escura: #4A2795;
  --primaria-viva:   #7B4BD0;
  --secundaria:      #9F59C5;
  --lilas:           #BD6CE6;
  --lilas-claro:     #E8C8F2;
  --lilas-vapor:     #F6EDFB;
  --creme:           #FEFAF9;
  --superficie:      #FFFFFF;
  --texto:           #2A1F33;
  --texto-suave:     #6B5F75;
  --linha:           rgba(97, 54, 182, 0.14);
  --linha-forte:     rgba(97, 54, 182, 0.26);
  --escuro:          #241A33;
  --escuro-topo:     #2F2242;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --raio-s: 14px;
  --raio-m: 22px;
  --raio-g: 34px;

  --sombra-suave: 0 18px 46px -28px rgba(42, 31, 51, 0.34);
  --sombra-media: 0 26px 64px -32px rgba(74, 39, 149, 0.42);

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

  --transicao: 280ms cubic-bezier(.33, .68, .32, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto é a parte que o reset padrão esquece: sem ele, os atributos
   width/height do HTML anulam o aspect-ratio do CSS e a imagem estica. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.16;
  color: var(--texto);
  margin: 0 0 .7em;
  letter-spacing: -0.012em;
}

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

a { color: var(--primaria); text-decoration: none; transition: color var(--transicao); }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button, input, textarea { font: inherit; color: inherit; }

::selection { background: var(--lilas-claro); color: var(--primaria-escura); }

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

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--primaria);
  color: #fff;
  padding: .8rem 1.3rem;
  border-radius: 0 0 var(--raio-s) 0;
}
.pular-para-conteudo:focus { left: 0; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--estreito { max-width: 860px; }

/* Ritmo vertical: o vão visível entre dois conteúdos é a soma do padding de
   baixo de uma seção com o de cima da seguinte (mais o divisor, quando houver).
   Calibrado para cair na faixa de 8 a 12rem, não 16 a 20. */
.secao {
  position: relative;
  padding-block: clamp(3.8rem, 7.6vw, 5.6rem);
}
.secao--clara  { background: var(--creme); }
.secao--vapor  { background: var(--lilas-vapor); }
/* a onda é absoluta no rodapé da seção: sem folga extra ela cobre o conteúdo,
   mas o respiro embaixo é menor porque a própria onda já ocupa espaço */
.secao--com-onda { padding-bottom: calc(clamp(2.2rem, 4vw, 3.2rem) + clamp(40px, 4.6vw, 68px)); }

.centralizado { text-align: center; margin-top: 2.6rem; }

/* impede quebra de linha no hífen de siglas como NR-01 */
.sem-quebra { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Cabeçalho de seção, eyebrow e título
   -------------------------------------------------------------------------- */
.cabecalho-secao {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(2.6rem, 5vw, 3.8rem);
  text-align: center;
}
.cabecalho-secao--esquerda { margin-inline: 0; text-align: left; }

/* O acento do eyebrow fica SEMPRE abaixo do texto, nunca ao lado: um traço
   antes da palavra alarga o conjunto e descentraliza o rótulo em relação ao
   título de baixo. */
.eyebrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primaria);
}
.eyebrow::after {
  content: '';
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--lilas);
}
/* Todo eyebrow em bloco alinhado à esquerda leva o acento rente à esquerda:
   centralizado sob o rótulo ele destoa do título logo abaixo. */
.cabecalho-secao--esquerda .eyebrow,
.sobre__texto .eyebrow,
.contato__intro .eyebrow,
.hero__eyebrow,
.texto-legal .eyebrow { align-items: flex-start; }

.eyebrow--claro { color: var(--lilas-claro); }
.eyebrow--claro::after { background: var(--lilas); }

/* max-width em elemento de bloco exige margin-inline:auto junto, ou a caixa
   fica colada à esquerda mesmo dentro de um contêiner centralizado. */
.titulo-secao {
  font-size: clamp(1.85rem, 4vw, 2.7rem);
  max-width: 22ch;
  margin-inline: auto;
}
.cabecalho-secao--esquerda .titulo-secao,
.sobre__texto .titulo-secao,
.contato__intro .titulo-secao { margin-inline: 0; max-width: 18ch; }

.intro-secao {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--texto-suave);
  font-size: 1.08rem;
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .82rem 1.65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}
.btn--grande { min-height: 54px; padding: 1rem 2rem; font-size: 1.02rem; }
.btn--bloco { width: 100%; }

.btn--primario {
  background: var(--primaria);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(97, 54, 182, .68);
}
.btn--primario:hover,
.btn--primario:focus-visible {
  background: var(--primaria-escura);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -16px rgba(97, 54, 182, .78);
}

.btn--fantasma {
  background: transparent;
  color: var(--primaria);
  border-color: var(--linha-forte);
}
.btn--fantasma:hover,
.btn--fantasma:focus-visible {
  background: rgba(97, 54, 182, .07);
  border-color: var(--primaria);
  transform: translateY(-2px);
}

.btn--claro {
  background: var(--creme);
  color: var(--primaria-escura);
}
.btn--claro:hover,
.btn--claro:focus-visible {
  background: #fff;
  color: var(--primaria-escura);
  transform: translateY(-2px);
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  font-weight: 600;
  font-size: .96rem;
}
.link-seta svg { width: 18px; height: 18px; transition: transform var(--transicao); }
.link-seta:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Barra de progresso de leitura
   -------------------------------------------------------------------------- */
.barra-progresso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 1300;
  pointer-events: none;
  background: transparent;
}
.barra-progresso span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primaria), var(--lilas));
  transition: width 90ms linear;
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding-block: 1.05rem;
  background: rgba(254, 250, 249, 0);
  transition: background var(--transicao), box-shadow var(--transicao),
              padding var(--transicao), backdrop-filter var(--transicao);
}
.cabecalho.rolado {
  padding-block: .6rem;
  background: rgba(254, 250, 249, .93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--linha), 0 14px 34px -30px rgba(42, 31, 51, .55);
}
.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marca { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; color: var(--texto); }
.marca__icone { width: auto; height: 40px; transition: height var(--transicao); }
.cabecalho.rolado .marca__icone { height: 34px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.12; }
.marca__texto strong {
  font-family: var(--serif);
  font-size: 1.13rem;
  font-weight: 600;
  letter-spacing: .005em;
}
.marca__texto em {
  font-style: normal;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--primaria);
}

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav__links { display: flex; align-items: center; gap: 1.5rem; }
.nav__links a {
  position: relative;
  color: var(--texto);
  font-size: .96rem;
  font-weight: 500;
  padding-block: .3rem;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--lilas);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicao);
}
.nav__links a:hover, .nav__links a.ativo { color: var(--primaria); }
.nav__links a:hover::after, .nav__links a.ativo::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Menu mobile (drawer). O visual fica FORA de @media de propósito: definido
   só dentro dela, o painel abre sem fundo quando a regra não casa.
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -.4rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primaria);
  line-height: 0;
}
.nav-toggle svg { width: 30px; height: 30px; }

.mobile-menu {
  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(--creme);
  box-shadow: -18px 0 50px -22px rgba(42, 31, 51, .34);
  transform: translateX(100%);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility .34s;
}
.mobile-menu.open { transform: none; visibility: visible; }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--linha);
}
.mobile-menu__logo { width: auto; height: 38px; }
.mobile-close {
  background: none; border: none; cursor: pointer;
  color: var(--primaria); padding: .3rem; margin: -.3rem; line-height: 0;
}
.mobile-close svg { width: 30px; height: 30px; }

.mobile-menu__links { display: flex; flex-direction: column; }
.mobile-menu__links li { border-bottom: 1px solid var(--linha); }
.mobile-menu__links a {
  display: flex;
  align-items: center;
  min-height: 54px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--texto);
}
.mobile-menu__links a:hover, .mobile-menu__links a.ativo { color: var(--primaria); }
.mobile-menu__cta { margin-top: auto; width: 100%; }

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

/* --------------------------------------------------------------------------
   Camada de forma: blobs orgânicos e borboleta da marca
   -------------------------------------------------------------------------- */
.blob {
  position: absolute;
  display: block;
  filter: blur(46px);
  opacity: .55;
  pointer-events: none;
}
.blob--1 {
  width: 46vw; max-width: 620px; aspect-ratio: 1.15 / 1;
  top: -8%; right: -10%;
  background: radial-gradient(circle at 35% 35%, rgba(189, 108, 230, .46), rgba(189, 108, 230, 0) 68%);
  border-radius: 58% 42% 46% 54% / 44% 56% 44% 56%;
}
.blob--2 {
  width: 40vw; max-width: 520px; aspect-ratio: 1 / 1.1;
  bottom: -14%; left: -12%;
  background: radial-gradient(circle at 60% 40%, rgba(97, 54, 182, .34), rgba(97, 54, 182, 0) 70%);
  border-radius: 42% 58% 62% 38% / 55% 40% 60% 45%;
}
.blob--3 {
  width: 26vw; max-width: 340px; aspect-ratio: 1 / 1;
  top: 34%; left: 46%;
  background: radial-gradient(circle, rgba(232, 200, 242, .72), rgba(232, 200, 242, 0) 70%);
  border-radius: 50%;
}
.blob--4 {
  width: 52vw; max-width: 660px; aspect-ratio: 1.2 / 1;
  top: -30%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(189, 108, 230, .5), rgba(189, 108, 230, 0) 70%);
  border-radius: 50% 50% 44% 56% / 52% 48% 52% 48%;
}
.blob--5 {
  width: 44vw; max-width: 560px; aspect-ratio: 1 / 1;
  top: -18%; right: -14%;
  background: radial-gradient(circle, rgba(159, 89, 197, .34), rgba(159, 89, 197, 0) 70%);
  border-radius: 60% 40% 50% 50% / 48% 52% 48% 52%;
}

/* O parallax escreve só a variável --py. Se o JS sobrescrevesse `transform`
   inteiro, a rotação e o espelhamento seriam apagados no primeiro scroll. */
.borboleta {
  position: absolute;
  width: auto;
  opacity: .09;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg)) scaleX(var(--flip, 1));
}
.borboleta--a { top: 12%; right: 4%;  height: clamp(150px, 22vw, 300px); --rot: -8deg; }
.borboleta--b { bottom: 6%; left: 3%; height: clamp(110px, 15vw, 200px); --rot: 14deg; --flip: -1; opacity: .07; }
.borboleta--c { top: 8%; right: 6%;   height: clamp(120px, 16vw, 220px); opacity: .16; }

.hero__brilho {
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189, 108, 230, .22), rgba(189, 108, 230, 0) 68%);
  transform: translate(-50%, -50%);
  left: 70%; top: 40%;
  transition: left 900ms cubic-bezier(.22, .61, .36, 1), top 900ms cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Divisores: onda orgânica e filete com nó central
   -------------------------------------------------------------------------- */
.onda {
  position: absolute;
  left: 0; right: 0;
  line-height: 0;
  pointer-events: none;
}
.onda--baixo { bottom: -1px; }
.onda svg { display: block; width: 100%; height: clamp(40px, 4.6vw, 68px); }
/* A onda é sempre pintada com a cor da seção SEGUINTE, para costurar as duas. */
.onda svg path { fill: var(--creme); }
.onda--creme svg path    { fill: var(--creme); }
.onda--vapor svg path    { fill: var(--lilas-vapor); }
.onda--empresas svg path { fill: var(--escuro); }

/* O divisor renderiza por CSS estático: elementos de poucos px somem na
   rolagem rápida se a visibilidade depender de IntersectionObserver. */
/* Seção que termina em divisor não soma o padding cheio embaixo: o vão visível
   é a soma do respiro da seção, do divisor e do padding da seção seguinte. */
.secao--divisor { padding-bottom: clamp(1.2rem, 2.4vw, 1.8rem); }

.divisor {
  position: relative;
  width: min(560px, 62%);
  height: 1px;
  margin: clamp(2.8rem, 5vw, 3.6rem) auto 0;
  background: linear-gradient(90deg,
    rgba(97, 54, 182, 0) 0%,
    var(--linha-forte) 22%,
    var(--linha-forte) 78%,
    rgba(97, 54, 182, 0) 100%);
}
.divisor__no {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--lilas);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--creme), 0 0 0 6px var(--linha);
}
.secao--vapor .divisor__no { box-shadow: 0 0 0 5px var(--lilas-vapor), 0 0 0 6px var(--linha); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(8.2rem, 16vw, 11.5rem) clamp(4.4rem, 8vw, 6.4rem);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(232, 200, 242, .55) 0%, rgba(232, 200, 242, 0) 62%),
    linear-gradient(178deg, #FFFDFC 0%, var(--creme) 46%, var(--lilas-vapor) 100%);
  overflow: hidden;
}
.hero__arte { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__interno { position: relative; max-width: 920px; }

.hero__titulo {
  /* calibrado para "Um espaço para chegar" caber em uma linha no desktop:
     acima disso a primeira linha quebra e sobra um "chegar" órfão */
  font-size: clamp(2.3rem, 5.6vw, 4.05rem);
  line-height: 1.08;
  margin-bottom: 1.3rem;
  letter-spacing: -0.024em;
}
.hero__titulo em {
  font-style: italic;
  font-weight: 500;
  color: var(--primaria);
}
/* Cada linha entra por baixo de uma máscara, em sequência. */
.hero__titulo .linha { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__titulo .linha > span {
  display: block;
  transform: translateY(105%);
  transition: transform 900ms cubic-bezier(.19, 1, .22, 1);
}
.hero__titulo .linha:nth-child(2) > span { transition-delay: 120ms; }
.hero.pronto .hero__titulo .linha > span { transform: none; }

.hero__eyebrow,
.hero__texto,
.hero__acoes,
.hero__selos {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(.19, 1, .22, 1);
}
.hero.pronto .hero__eyebrow { opacity: 1; transform: none; transition-delay: 60ms; }
.hero.pronto .hero__texto   { opacity: 1; transform: none; transition-delay: 380ms; }
.hero.pronto .hero__acoes   { opacity: 1; transform: none; transition-delay: 500ms; }
.hero.pronto .hero__selos   { opacity: 1; transform: none; transition-delay: 620ms; }

.hero .eyebrow { color: var(--primaria); }
.hero .eyebrow::after { background: var(--lilas); }

.hero__texto {
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.9vw, 1.19rem);
  color: var(--texto-suave);
  margin-bottom: 2.2rem;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.8rem; }

.hero__selos {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.8rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--linha);
}
.hero__selos li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .93rem;
  font-weight: 500;
  color: var(--texto-suave);
}
.hero__selos svg { width: 19px; height: 19px; color: var(--primaria); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Para quem eu atendo
   -------------------------------------------------------------------------- */
.publicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(1.2rem, 2.6vw, 1.9rem);
}
.publico {
  position: relative;
  padding: 2.3rem 1.9rem 2.1rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  /* raio irregular: a assinatura de forma da persona */
  border-radius: 42px 22px 42px 22px;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-radius 520ms cubic-bezier(.33, .68, .32, 1),
              border-color var(--transicao);
}
.publico:hover {
  transform: translateY(-6px);
  border-color: var(--linha-forte);
  border-radius: 22px 42px 22px 42px;
  box-shadow: var(--sombra-media);
}
.publico__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin-bottom: 1.2rem;
  border-radius: 50% 42% 50% 42%;
  background: linear-gradient(140deg, var(--lilas-claro), var(--lilas-vapor));
  color: var(--primaria);
}
.publico__marca svg { width: 26px; height: 26px; }
.publico h3 { font-size: 1.34rem; margin-bottom: .55rem; }
.publico p { color: var(--texto-suave); font-size: 1rem; margin: 0; }

/* --------------------------------------------------------------------------
   Como funciona
   -------------------------------------------------------------------------- */
.passos {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
  counter-reset: passo;
  max-width: 900px;
  margin-inline: auto;
}
.passo {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.9rem 1.9rem 1.7rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 34px 34px 34px 10px;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-radius 520ms cubic-bezier(.33, .68, .32, 1);
}
.passo:hover {
  transform: translateX(6px);
  border-radius: 10px 34px 34px 34px;
  box-shadow: var(--sombra-media);
}
/* A linha conectora se desenha quando o passo entra.
   O left alinha com o centro do círculo: padding (1.9rem) + metade de 52px. */
.passo::after {
  content: '';
  position: absolute;
  left: calc(1.9rem + 24.5px);
  bottom: calc(-1 * clamp(1.1rem, 2.4vw, 1.6rem));
  width: 3px;
  height: 0;
  border-radius: 3px;
  /* lilás sobre fundo lilás some: o conector precisa da cor primária para existir */
  background: linear-gradient(180deg, rgba(97, 54, 182, .58), rgba(97, 54, 182, .14));
  transition: height 620ms ease-out 260ms;
}
.passo.visible::after { height: clamp(1.1rem, 2.4vw, 1.6rem); }
.passo:last-child::after { display: none; }

.passo__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: 50% 44% 50% 44%;
  background: linear-gradient(140deg, var(--primaria), var(--secundaria));
  color: #fff;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.passo__corpo h3 { font-size: 1.26rem; margin-bottom: .4rem; }
.passo__corpo p { color: var(--texto-suave); font-size: 1rem; margin: 0; }

/* --------------------------------------------------------------------------
   Sobre
   -------------------------------------------------------------------------- */
.sobre__grade {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.2rem);
  align-items: center;
}

.sobre__figura {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.sobre__aura {
  position: absolute;
  inset: -9% -7% -5% -9%;
  z-index: -1;
  background: linear-gradient(150deg, var(--lilas-claro), var(--lilas-vapor));
  border-radius: 62% 38% 46% 54% / 48% 56% 44% 52%;
  animation: aura 22s ease-in-out infinite;
}
.sobre__figura img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 28%;
  /* moldura orgânica: a assinatura de forma da persona B */
  border-radius: 58% 42% 50% 50% / 52% 48% 52% 48%;
  box-shadow: var(--sombra-media);
  animation: moldura 26s ease-in-out infinite;
}
@keyframes aura {
  0%, 100% { border-radius: 62% 38% 46% 54% / 48% 56% 44% 52%; }
  50%      { border-radius: 44% 56% 58% 42% / 56% 44% 56% 44%; }
}
@keyframes moldura {
  0%, 100% { border-radius: 58% 42% 50% 50% / 52% 48% 52% 48%; }
  50%      { border-radius: 46% 54% 42% 58% / 44% 56% 44% 56%; }
}
.sobre__figura figcaption {
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 600;
}
.sobre__figura figcaption span {
  display: block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primaria);
  margin-top: .18rem;
}

.sobre__texto p { color: var(--texto-suave); }
.sobre__texto strong { color: var(--texto); font-weight: 600; }

.sobre__pontos {
  display: grid;
  gap: .7rem;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linha);
}
.sobre__pontos li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .99rem;
  font-weight: 500;
}
.sobre__pontos svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .22rem; color: var(--primaria); }

/* --------------------------------------------------------------------------
   Modalidades
   -------------------------------------------------------------------------- */
.modalidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.2rem, 2.6vw, 1.9rem);
  max-width: 940px;
  margin-inline: auto;
}
.modalidade {
  padding: 2.2rem 2rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 30px 30px 46px 30px;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-radius 520ms cubic-bezier(.33, .68, .32, 1);
}
.modalidade:hover {
  transform: translateY(-5px);
  border-radius: 46px 30px 30px 30px;
  box-shadow: var(--sombra-media);
}
.modalidade h3 {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.3rem;
  margin-bottom: .8rem;
}
.modalidade h3 svg { width: 24px; height: 24px; color: var(--primaria); flex: 0 0 auto; }
.modalidade p { color: var(--texto-suave); font-size: 1rem; }
.modalidade__endereco {
  padding: .9rem 1.1rem;
  background: var(--lilas-vapor);
  border-radius: var(--raio-s);
  font-size: .95rem;
  color: var(--texto) !important;
}

/* --------------------------------------------------------------------------
   Empresas / NR-01 — registro deliberadamente mais sóbrio e mais reto
   -------------------------------------------------------------------------- */
.secao--empresas {
  background: linear-gradient(168deg, var(--escuro-topo) 0%, var(--escuro) 100%);
  color: rgba(255, 255, 255, .78);
  padding-block: clamp(4.4rem, 9vw, 6.8rem);
}
/* Herança perde para regra de cor declarada em nível de tag: a seção escura
   precisa do override genérico de heading, não de overrides pontuais. */
.secao--empresas h1,
.secao--empresas h2,
.secao--empresas h3,
.secao--empresas h4 { color: #fff; }

.secao--empresas .titulo-secao { max-width: 20ch; }

.empresas__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.empresas__texto p { font-size: 1.05rem; margin-bottom: 1.2rem; }
.empresas__texto strong { color: #fff; font-weight: 600; }
.empresas__texto .btn { margin-top: .8rem; }

.empresas__itens { display: grid; gap: 0; }
.empresas__itens li {
  padding: 1.35rem 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .99rem;
}
.empresas__itens li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.empresas__rotulo {
  display: block;
  margin-bottom: .3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lilas-claro);
}

/* --------------------------------------------------------------------------
   CTA intermediária
   -------------------------------------------------------------------------- */
.cta-meio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.6rem, 7vw, 5.2rem);
  background: linear-gradient(172deg, var(--lilas-vapor) 0%, var(--creme) 100%);
  text-align: center;
}
.cta-meio__arte { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cta-meio h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.45rem);
  max-width: 20ch;
  margin-inline: auto;
}
.cta-meio p {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 2rem;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.blog-previa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.7rem);
}
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 30px 30px 30px 10px;
  box-shadow: var(--sombra-suave);
  min-height: 230px;
}
/* A capa carrega a borboleta da marca em marca d'água: sem ela o card lê como
   imagem que não carregou, em vez de espaço reservado por escolha.
   A marca d'água vai num ::after porque background-image não aceita opacity
   própria, e a borboleta em cor cheia ficaria pesada demais. */
.blog-card__capa {
  position: relative;
  display: block;
  height: 160px;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 32%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 58%),
    linear-gradient(142deg, var(--lilas-claro), var(--lilas-vapor));
}
.blog-card__capa::after {
  content: '';
  position: absolute;
  right: -14%;
  bottom: -34%;
  width: 130px;
  height: 139px;
  background: url('../images/borboleta-decor.png') no-repeat center / contain;
  opacity: .22;
}
.blog-card__capa--b { background: linear-gradient(142deg, #DDC4EF, var(--lilas-vapor)); }
.blog-card__capa--b::after { right: auto; left: -12%; bottom: -30%; transform: scaleX(-1); opacity: .18; }
.blog-card__capa--c { background: linear-gradient(142deg, #E9D5F5, #FBF4FD); }
.blog-card__capa--c::after { right: -8%; bottom: -26%; width: 112px; height: 120px; opacity: .26; }
.blog-card__selo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 1.1rem 1.3rem 1.3rem;
  padding: .34rem .85rem;
  border-radius: 999px;
  background: var(--lilas-vapor);
  color: var(--primaria);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.blog-previa__nota {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--texto-suave);
  font-size: .98rem;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .8rem; }
.faq__item {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.faq__item:hover { border-color: var(--linha-forte); }
.faq__item.aberto { border-color: var(--linha-forte); box-shadow: var(--sombra-suave); }
.faq__item h3 { margin: 0; font-family: var(--sans); }

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  min-height: 60px;
  padding: 1.15rem 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--texto);
  transition: color var(--transicao);
}
.faq__pergunta:hover { color: var(--primaria); }
.faq__seta {
  width: 21px; height: 21px;
  flex: 0 0 auto;
  color: var(--primaria);
  transition: transform 380ms cubic-bezier(.33, .68, .32, 1);
}
.faq__item.aberto .faq__seta { transform: rotate(180deg); }

.faq__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms cubic-bezier(.33, .68, .32, 1);
}
.faq__item.aberto .faq__resposta { grid-template-rows: 1fr; }
.faq__resposta > div { overflow: hidden; }
.faq__resposta p {
  padding: 0 1.4rem 1.35rem;
  margin: 0;
  color: var(--texto-suave);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Contato e formulário
   -------------------------------------------------------------------------- */
.contato { position: relative; isolation: isolate; overflow: hidden; }
.contato__arte { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.contato__grade {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contato__intro p { color: var(--texto-suave); }

.contatos {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: 1.8rem;
}
.contatos a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  color: var(--texto);
  font-size: 1rem;
  font-weight: 500;
}
.contatos a:hover { color: var(--primaria); }
.contatos svg { flex: 0 0 auto; color: var(--primaria); }

.formulario {
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 34px 34px 34px 12px;
  box-shadow: var(--sombra-media);
}
.campo { margin-bottom: 1.15rem; }
.campo label {
  display: block;
  margin-bottom: .38rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--texto);
}
.campo input,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: .78rem 1rem;
  background: var(--creme);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  font-size: 1rem;
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.campo textarea { min-height: 122px; resize: vertical; }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--primaria);
  box-shadow: 0 0 0 4px rgba(97, 54, 182, .13);
}
.campo input.invalido,
.campo textarea.invalido { border-color: #C0392B; }

.campo__erro {
  display: block;
  min-height: 0;
  margin-top: .3rem;
  font-size: .84rem;
  color: #C0392B;
}

.campo-consentimento {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: .3rem;
  font-size: .92rem;
  color: var(--texto-suave);
  cursor: pointer;
}
/* o alvo de toque real aqui é a <label> inteira, que envolve caixa e texto */
.campo-consentimento input {
  width: 22px; height: 22px;
  margin-top: .16rem;
  flex: 0 0 auto;
  accent-color: var(--primaria);
  cursor: pointer;
}
.campo-consentimento a { text-decoration: underline; text-underline-offset: 2px; }

#erro-consentimento { margin-bottom: .9rem; }

#btnEnviar { margin-top: .6rem; }
#btnEnviar.enviando { opacity: .82; pointer-events: none; }

.formulario__nota {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: .85rem;
  color: var(--texto-suave);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--escuro);
  color: rgba(255, 255, 255, .74);
  padding-top: clamp(3.4rem, 7vw, 5rem);
}
.rodape h2 {
  color: #fff;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.rodape a { color: rgba(255, 255, 255, .74); }
.rodape a:hover { color: #fff; }

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.4rem);
}
.rodape__marca img {
  width: auto;
  height: 88px;
  margin-bottom: 1.2rem;
  /* Sem filtro de propósito: `brightness(0) invert(1)` pintaria de branco também
     o miolo opaco do selo e o resultado seria um disco chapado. O arquivo já é
     um knockout branco do selo, com o desenho preservado. */
  opacity: .94;
}
.rodape__marca p { font-size: .96rem; max-width: 42ch; }
.rodape__crp {
  margin-top: 1rem;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--lilas-claro);
}

.rodape__nav ul { display: grid; }
.rodape__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .96rem;
}

.contatos--rodape a { color: rgba(255, 255, 255, .74); }
.contatos--rodape a:hover { color: #fff; }
.contatos--rodape svg { color: var(--lilas-claro); }
.contatos--rodape { margin-top: 0; }

.rodape__endereco {
  margin-top: 1.3rem;
  font-style: normal;
  font-size: .93rem;
  line-height: 1.66;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .7rem 1.5rem;
  padding-block: 1.5rem;
  /* O botão flutuante do WhatsApp mora no canto inferior direito e é fixed:
     ao chegar no fim da página ele cai exatamente em cima desta faixa. Sem esta
     folga o crédito da Digital Bloom fica coberto e inclicável. */
  padding-right: calc(var(--gutter) + 6rem);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .87rem;
}
.rodape__base p { margin: 0; }
.rodape__base a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rodape__sep {
  display: inline-block;
  width: 4px; height: 4px;
  margin: 0 .55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   WhatsApp flutuante
   -------------------------------------------------------------------------- */
.wa-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;
  box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .8);
  will-change: transform, box-shadow;
  animation: wa-float 3.2s ease-in-out infinite, wa-pulse 2.8s ease-out 1.2s infinite;
  transition: transform var(--transicao);
}
.wa-flutuante:hover {
  animation-play-state: paused;
  transform: scale(1.13);
  color: #fff;
}
@keyframes wa-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .8), 0 0 0 0 rgba(37, 211, 102, .5); }
  70%  { box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .8), 0 0 0 20px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .8), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* --------------------------------------------------------------------------
   Páginas de texto (política de privacidade) e blog em espera
   -------------------------------------------------------------------------- */
.texto-legal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(7rem, 13vw, 9.5rem);
}
.texto-legal__arte { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.texto-legal .blob--1 { opacity: .38; }

.titulo-legal {
  font-size: clamp(2rem, 4.6vw, 3rem);
  margin-bottom: .4rem;
}
.texto-legal__data {
  margin-bottom: 2.6rem;
  font-size: .92rem;
  color: var(--texto-suave);
}
.texto-legal h2 {
  font-size: 1.28rem;
  margin-top: 2.4rem;
  margin-bottom: .6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linha);
}
.texto-legal p { color: var(--texto-suave); }
.texto-legal strong { color: var(--texto); font-weight: 600; }
.texto-legal a { text-decoration: underline; text-underline-offset: 2px; }

.lista-legal { display: grid; gap: .5rem; margin: 0 0 1.15em; }
.lista-legal li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--texto-suave);
}
.lista-legal li::before {
  content: '';
  position: absolute;
  left: .25rem; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lilas);
}

.voltar-ao-site {
  margin-top: 2.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linha);
}

.rodape__base--solo { border-top: none; }

/* Blog em espera */
.blog-espera {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 78vh;
  padding-block: clamp(7.5rem, 14vw, 10rem) clamp(4rem, 8vw, 6rem);
  background:
    radial-gradient(110% 80% at 76% 12%, rgba(232, 200, 242, .55) 0%, rgba(232, 200, 242, 0) 62%),
    linear-gradient(178deg, #FFFDFC 0%, var(--creme) 52%, var(--lilas-vapor) 100%);
  text-align: center;
}
.blog-espera__arte { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.blog-espera__selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.6rem;
  padding: .4rem 1rem;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primaria);
}
.blog-espera h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  max-width: 17ch;
  margin-inline: auto;
}
.blog-espera__texto {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: 2.2rem;
  color: var(--texto-suave);
  font-size: 1.08rem;
}
.blog-espera__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
}
@media (max-width: 620px) {
  .blog-espera__acoes { flex-direction: column; align-items: stretch; }
  .blog-espera__acoes .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Movimento ao rolar
   -------------------------------------------------------------------------- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .62s ease-out, transform .62s cubic-bezier(.19, 1, .22, 1);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.animate-on-scroll.visible { opacity: 1; transform: none; }

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(10px, -18px, 0) rotate(2deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
.decor-drift { animation: drift 19s ease-in-out infinite; will-change: transform; }
.decor-drift--lento { animation-duration: 27s; animation-direction: alternate; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .sobre__grade,
  .empresas__grade,
  .contato__grade { grid-template-columns: 1fr; }
  .sobre__figura { max-width: 400px; margin-inline: auto; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 620px) {
  body { font-size: 1.02rem; }
  .cabecalho { padding-block: .8rem; }
  .marca__icone { height: 34px; }
  .marca__texto strong { font-size: 1rem; }
  .marca__texto em { font-size: .6rem; letter-spacing: .24em; }

  .hero { padding-block: 7.4rem 4.6rem; }
  .hero__acoes { flex-direction: column; align-items: stretch; }
  .hero__acoes .btn { width: 100%; }
  .hero__selos { gap: .6rem; flex-direction: column; }

  .passo { grid-template-columns: 1fr; gap: 1rem; padding: 1.6rem 1.4rem; }
  .passo::after { left: 2.6rem; }
  .publico { padding: 1.9rem 1.5rem; }
  .modalidade { padding: 1.8rem 1.5rem; }
  .formulario { border-radius: 26px 26px 26px 10px; }

  .rodape__grade { grid-template-columns: 1fr; }
  .rodape__base {
    flex-direction: column;
    align-items: flex-start;
    /* no mobile o flutuante cobre a última linha, não a lateral */
    padding-right: var(--gutter);
    padding-bottom: 7.5rem;
  }

  .wa-flutuante { bottom: 1.15rem; right: 1.15rem; width: 54px; height: 54px; }
  .borboleta--b { display: none; }
}

/* --------------------------------------------------------------------------
   Sem JavaScript: os reveals nascem em opacity:0 e a página ficaria em branco
   -------------------------------------------------------------------------- */
.sem-js .animate-on-scroll,
.sem-js .hero__eyebrow,
.sem-js .hero__texto,
.sem-js .hero__acoes,
.sem-js .hero__selos { opacity: 1 !important; transform: none !important; }
.sem-js .hero__titulo .linha > span { transform: none !important; }
.sem-js .faq__resposta { grid-template-rows: 1fr; }
.sem-js .passo::after { height: clamp(1.1rem, 2.4vw, 1.6rem); }

/* --------------------------------------------------------------------------
   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; }
  .decor-drift,
  .sobre__aura,
  .sobre__figura img,
  .wa-flutuante { animation: none !important; }
  /* zera só o deslocamento: `transform: none` apagaria também rotação e espelhamento */
  [data-parallax] { --py: 0px !important; }
  .hero__titulo .linha > span { transform: none !important; transition: none !important; }
  .hero__eyebrow, .hero__texto, .hero__acoes, .hero__selos {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .mobile-menu, .menu-backdrop { transition: none !important; }
  .passo::after { transition: none !important; height: 1.35rem; }
  .hero__brilho { display: none; }
}