/* ==========================================================================
   Rafaela Gualdi | Psicóloga
   Persona visual B — Acolhedor Orgânico
   Paleta e tipografia derivadas do manual de marca da cliente.
   ========================================================================== */

:root {
  /* Paleta oficial da marca (amostrada do manual) */
  --verde: #454C42;
  --verde-profundo: #333A31;
  --salvia: #909885;
  --salvia-clara: #B9C2AE;
  --salvia-veu: #E3E7DE;
  --rosa: #EFA8A1;
  --blush: #EDD1CD;
  --blush-claro: #F7E9E6;
  --off-white: #ECEBE9;
  --creme: #F8F6F3;
  --branco: #FFFFFF;
  /* Verde claro o bastante para texto secundário passar em AA por cima.
     O --salvia-veu, mais saturado, fica só para pastilhas de ícone. */
  --sage-tint: #E9EEE4;

  /* Regra de uso das cores cheias: --rosa e --blush são fundo, nunca texto
     pequeno sobre claro. Por cima delas o texto é sempre --verde/--texto,
     combinação que passa em AA (5.4:1 no coral, 7.3:1 no blush). */

  /* Texto. Os tons secundários são calibrados para passar em WCAG AA (4.5:1)
     sobre o fundo mais claro em que aparecem (--off-white #ECEBE9), não só
     sobre branco. --salvia-texto é a variante legível da sálvia da marca: a
     --salvia original fica reservada às formas de fundo, onde a cor é da
     identidade e o contraste de texto não se aplica. */
  --texto: #3A4137;
  --texto-suave: #5C6359;
  --texto-claro: #656C61;
  --salvia-texto: #646C59;
  /* acento da headline: texto grande, precisa de 3:1, não de 4.5:1 */
  --salvia-destaque: #7E8873;
  --linha: rgba(69, 76, 66, .14);
  --linha-forte: rgba(69, 76, 66, .26);

  /* Tipografia */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Forma */
  --raio: 26px;
  --raio-p: 14px;
  --raio-btn: 999px;
  --sombra: 0 18px 46px -26px rgba(58, 65, 55, .38);
  --sombra-suave: 0 10px 30px -20px rgba(58, 65, 55, .30);
  --sombra-forte: 0 30px 70px -34px rgba(58, 65, 55, .46);

  /* Ritmo */
  --secao: 5.75rem;
  --wrapper: 1160px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

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

/* height:auto é obrigatório: sem ele, os atributos width/height do HTML viram
   altura fixa (presentational hint) e anulam o aspect-ratio declarado no CSS. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--verde);
  line-height: 1.18;
  margin: 0 0 .7em;
  letter-spacing: -.005em;
}

h1 { font-size: clamp(2.35rem, 5.1vw, 3.85rem); }
h2 { font-size: clamp(1.85rem, 3.7vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.1rem; }

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

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

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

.wrapper {
  width: min(100% - 2.5rem, var(--wrapper));
  margin-inline: auto;
}

.secao { position: relative; padding-block: var(--secao); }

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

/* --------------------------------------------------------------------------
   Camada decorativa — sistema de fundo orgânico da Persona B
   -------------------------------------------------------------------------- */

.decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.blob {
  position: absolute;
  border-radius: 52% 48% 43% 57% / 46% 54% 46% 54%;
  filter: blur(46px);
  opacity: .5;
}

.blob--salvia { background: var(--salvia-clara); }
.blob--blush { background: var(--blush); }
.blob--rosa { background: var(--rosa); opacity: .26; }

/* Treliça: padrão de estampa da marca, reproduzido em SVG.
   A camada é maior que a seção (top -20%, altura 140%) para que a deriva do
   parallax nunca deixe uma faixa vazia no topo ou no rodapé do bloco. */
.decor-trelica {
  position: absolute;
  left: 0;
  top: -20%;
  width: 100%;
  height: 140%;
  color: var(--salvia);
  opacity: .12;
}

/* Textura de grão, tira o aspecto liso de template */
.grao {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  mix-blend-mode: multiply;
}

.wrapper, .secao > .wrapper { position: relative; z-index: 1; }

/* Divisor de seção: filete que esmaece nas pontas com nó central */
.divisor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  width: min(100% - 2.5rem, 420px);
  margin: 0 auto;
  padding-block: .25rem;
}
.divisor::before,
.divisor::after {
  content: '';
  flex: 1;
  height: 1px;
}
.divisor::before { background: linear-gradient(to right, transparent, var(--linha-forte)); }
.divisor::after { background: linear-gradient(to left, transparent, var(--linha-forte)); }
.divisor span {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 1px solid var(--salvia);
  background: var(--creme);
  transform: rotate(45deg);
  border-radius: 2px;
}
.divisor--rosa span { border-color: var(--rosa); }

/* Divisor em onda, assinatura da Persona B */
.onda { display: block; width: 100%; height: auto; line-height: 0; position: relative; z-index: 1; }
.onda svg { display: block; width: 100%; height: clamp(46px, 6vw, 88px); }

/* A onda já ocupa altura própria: sem estes recuos o vão entre os conteúdos de
   duas seções vira a soma dos dois paddings mais a onda, e abre um buraco morto. */
.onda + .secao { padding-top: 3.25rem; }
.secao:has(+ .onda) { padding-bottom: 3.25rem; }

/* --------------------------------------------------------------------------
   Tipografia auxiliar
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  margin-bottom: 1.15rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--salvia-texto);
}
.eyebrow::after {
  content: '';
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--rosa);
}

.cabecalho-secao { margin-bottom: 3rem; }
.cabecalho-secao.centro { text-align: center; }
.cabecalho-secao.centro .eyebrow { align-items: center; }
.cabecalho-secao .titulo-secao { max-width: 22ch; }
.cabecalho-secao .intro-secao { max-width: 62ch; color: var(--texto-suave); }
.cabecalho-secao.centro .titulo-secao,
.cabecalho-secao.centro .intro-secao { margin-inline: auto; }

.lead { font-size: 1.15rem; color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .85rem 1.85rem;
  border: 1px solid transparent;
  border-radius: var(--raio-btn);
  font-family: var(--sans);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .015em;
  cursor: pointer;
  text-align: center;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease,
              transform .22s ease, box-shadow .22s ease;
}

.btn svg { flex: 0 0 auto; }

.btn-primario {
  background: var(--verde);
  color: var(--branco);
  box-shadow: 0 14px 30px -18px rgba(69, 76, 66, .8);
}
.btn-primario:hover {
  background: var(--verde-profundo);
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -18px rgba(69, 76, 66, .85);
}

.btn-secundario {
  background: transparent;
  color: var(--verde);
  border-color: var(--linha-forte);
}
.btn-secundario:hover {
  background: var(--branco);
  border-color: var(--salvia);
  transform: translateY(-2px);
}


.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--verde);
  border-bottom: 1px solid var(--linha-forte);
  padding-bottom: .2rem;
  transition: gap .22s ease, color .22s ease, border-color .22s ease;
}
.link-seta:hover { gap: .85rem; color: var(--salvia-texto); border-color: var(--salvia-texto); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-block: 1.15rem;
  background: rgba(248, 246, 243, 0);
  transition: background-color .32s ease, box-shadow .32s ease, padding .32s ease;
}
.cabecalho.rolado {
  background: rgba(248, 246, 243, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--linha), 0 12px 30px -26px rgba(58, 65, 55, .5);
  padding-block: .7rem;
}

.cabecalho__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cabecalho__logo { display: flex; align-items: center; flex: 0 0 auto; }
.cabecalho__logo img {
  height: 46px;
  width: auto;
  transition: height .32s ease;
}
.cabecalho.rolado .cabecalho__logo img { height: 40px; }

.nav-principal { display: flex; align-items: center; gap: 2rem; }
.nav-principal a {
  position: relative;
  font-size: .95rem;
  font-weight: 600;
  color: var(--texto);
  padding-block: .35rem;
  transition: color .2s ease;
}
.nav-principal a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--rosa);
  transition: width .28s ease;
}
.nav-principal a:hover { color: var(--verde); }
.nav-principal a:hover::after,
.nav-principal a.ativo::after { width: 100%; }
.nav-principal a.ativo { color: var(--verde); }

.cabecalho__cta { flex: 0 0 auto; white-space: nowrap; }
.cabecalho__cta .btn { min-height: 46px; padding: .6rem 1.4rem; font-size: .9rem; }

/* Botão hambúrguer: pílula de superfície sólida, para nunca depender do fundo atrás */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--branco);
  color: var(--verde);
  cursor: pointer;
  box-shadow: var(--sombra-suave);
  transition: background-color .22s ease, color .22s ease;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle:hover { background: var(--off-white); }

/* Menu mobile — drawer padrão da esteira (fundo sólido definido FORA de @media) */
.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(58, 65, 55, .38);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility .34s;
  overscroll-behavior: contain;
  overflow-y: auto;
}
.mobile-menu.aberto { transform: none; visibility: visible; }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--linha);
}
.mobile-menu__logo { height: 36px; width: auto; }

.mobile-close {
  background: none;
  border: none;
  color: var(--verde);
  cursor: pointer;
  padding: .3rem;
  margin: -.3rem;
  line-height: 0;
}
.mobile-close svg { width: 28px; height: 28px; }

.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: 600;
  color: var(--texto);
  transition: color .2s ease;
}
.mobile-menu__links a:hover,
.mobile-menu__links a.ativo { color: var(--salvia-texto); }

.mobile-menu__cta { margin-top: auto; width: 100%; }

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(51, 58, 49, .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; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(8.5rem, 15vh, 11rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  /* O brilho coral fica em cima à direita, atrás da foto: ali não há texto
     pequeno, então ele pode saturar sem custar contraste. O canto de baixo à
     esquerda, onde ficam os destaques, permanece claro de propósito. */
  background:
    radial-gradient(900px 560px at 82% 4%, rgba(239, 168, 161, .42), transparent 58%),
    radial-gradient(760px 520px at 2% 96%, rgba(144, 152, 133, .22), transparent 62%),
    linear-gradient(168deg, var(--sage-tint) 0%, var(--creme) 48%, var(--blush-claro) 100%);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__selo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1.05rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(69, 76, 66, .16);
  border-radius: var(--raio-btn);
  background: var(--blush);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--verde);
}
.hero__selo span { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }

.hero h1 { margin-bottom: 1.15rem; }
.hero h1 em {
  font-style: italic;
  color: var(--salvia-destaque);
}

.hero__texto { max-width: 34rem; font-size: 1.12rem; color: var(--texto-suave); }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 1.1rem 2.4rem;
  margin-top: 2.4rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--linha);
}
.hero__meta div { display: flex; flex-direction: column; gap: .1rem; }
.hero__meta strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--verde);
  line-height: 1.1;
}
.hero__meta span {
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-claro);
  text-wrap: balance;
}

/* Moldura em arco: assinatura de foto da Persona B */
.moldura-arco {
  position: relative;
  margin: 0;
}
.moldura-arco img {
  width: 100%;
  object-fit: cover;
  border-radius: 999px 999px var(--raio) var(--raio);
  box-shadow: var(--sombra-forte);
}
.moldura-arco::before {
  content: '';
  position: absolute;
  inset: -14px -14px 22px -14px;
  border: 1px solid var(--rosa);
  border-radius: 999px 999px var(--raio) var(--raio);
  opacity: .8;
  pointer-events: none;
}

/* O `width: 100%` é obrigatório junto do par max-width + margin-inline:auto.
   Sem ele, as margens automáticas fazem o item de grid ser dimensionado por
   fit-content, a largura percentual da imagem interna não tem contra quem
   resolver e o slot inteiro colapsa para 0 (a foto some da página). */
.hero__foto { width: 100%; max-width: 430px; margin-inline: auto; }
.hero__foto img { aspect-ratio: 3 / 4; }

.hero__cartao {
  position: absolute;
  left: -1.5rem;
  bottom: 2.4rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.15rem;
  border-radius: var(--raio-p);
  background: var(--branco);
  box-shadow: var(--sombra);
  font-size: .84rem;
  font-weight: 700;
  color: var(--verde);
  line-height: 1.35;
}
.hero__cartao svg { flex: 0 0 auto; color: var(--salvia); }

/* --------------------------------------------------------------------------
   Sobre — faixa alternada, foto em blob
   -------------------------------------------------------------------------- */

.sobre { background: var(--creme); }

.sobre__grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(2.5rem, 5.5vw, 5rem);
  align-items: center;
}

.moldura-blob { position: relative; margin: 0; }
.moldura-blob img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 58% 42% 46% 54% / 44% 48% 52% 56%;
  box-shadow: var(--sombra-forte);
}
.moldura-blob::after {
  content: '';
  position: absolute;
  inset: -18px;
  border: 1px dashed var(--salvia-clara);
  border-radius: 58% 42% 46% 54% / 44% 48% 52% 56%;
  opacity: .65;
  pointer-events: none;
}

.sobre__assinatura {
  margin-top: 2rem;
  padding-left: 1.3rem;
  border-left: 2px solid var(--rosa);
  font-family: var(--serif);
  font-size: 1.22rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--verde);
}

.sobre__creds {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2rem;
}
.sobre__creds li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.05rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-btn);
  background: var(--branco);
  font-size: .87rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.sobre__creds svg { color: var(--salvia); }

/* --------------------------------------------------------------------------
   Abordagem — faixa invertida + pilares em colunas com hairline
   -------------------------------------------------------------------------- */

.abordagem { background: var(--sage-tint); }

.abordagem__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 5.5vw, 5rem);
  align-items: center;
}

.abordagem__foto { width: 100%; max-width: 400px; margin-inline: auto; }
.abordagem__foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 999px 999px var(--raio) var(--raio);
  box-shadow: var(--sombra-forte);
}

.pilares {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 4rem;
  border-top: 1px solid var(--linha);
}
.pilar {
  padding: 2rem 1.6rem 0;
  border-left: 1px solid var(--linha);
}
.pilar:first-child { border-left: none; padding-left: 0; }
.pilar:last-child { padding-right: 0; }
.pilar__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--salvia-veu);
  color: var(--verde);
}
/* pastilhas alternando verde e rosa, para os quatro pilares não virarem
   uma fileira monocromática */
.pilar:nth-child(2n) .pilar__icone { background: var(--blush); }
.pilar h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.pilar p { font-size: .95rem; color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   Atuação — blocos empilhados com chips
   -------------------------------------------------------------------------- */

.atuacao { background: var(--creme); }

.publico {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(2rem, 3.6vw, 2.9rem);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-suave);
}
.publico + .publico { margin-top: 1.5rem; }
.publico--destaque { background: linear-gradient(140deg, var(--branco), var(--blush-claro)); }

.publico__rotulo { display: flex; flex-direction: column; gap: .85rem; }
.publico__num {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--rosa);
}
.publico h3 { margin: 0; }
.publico__desc { font-size: .97rem; color: var(--texto-suave); margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chips li {
  padding: .48rem 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-btn);
  background: var(--creme);
  font-size: .89rem;
  color: var(--texto-suave);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.chips li:hover {
  border-color: var(--rosa);
  background: var(--blush-claro);
  color: var(--verde);
  transform: translateY(-2px);
}
.publico--sage { background: linear-gradient(140deg, var(--branco), var(--sage-tint)); }
.publico--sage .chips li,
.publico--destaque .chips li { background: rgba(255, 255, 255, .72); }

.atuacao__nota {
  margin-top: 1.6rem;
  font-size: .92rem;
  color: var(--texto-claro);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Diferenciais — lista numerada com número em marca d'água
   -------------------------------------------------------------------------- */

.diferenciais { background: var(--blush-claro); }

.lista-num { display: grid; gap: 1.1rem; }

.dif {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--linha);
}
.dif:last-child { border-bottom: none; }

.dif__num {
  font-family: var(--serif);
  font-size: clamp(3.6rem, 7vw, 5.4rem);
  font-weight: 500;
  line-height: .85;
  /* verde sobre a faixa rosa: numeral e fundo são cores complementares da
     paleta, então o número lê como elemento gráfico. Coral sobre rosa some. */
  color: var(--salvia);
  opacity: .9;
  transition: opacity .3s ease, color .3s ease;
}
.dif:hover .dif__num { opacity: 1; color: var(--verde); }

.dif__corpo h3 { margin-bottom: .45rem; }
.dif__corpo p { color: var(--texto-suave); margin: 0; max-width: 62ch; }

/* --------------------------------------------------------------------------
   Como funciona + formas de atendimento
   -------------------------------------------------------------------------- */

.processo { background: var(--creme); }

.passos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-bottom: 4.5rem;
}
.passos::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 16%;
  right: 16%;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--salvia-clara) 0 7px, transparent 7px 15px);
}
.passo { position: relative; text-align: center; }
.passo__bola {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 1.35rem;
  border-radius: 50%;
  background: var(--branco);
  border: 1px solid var(--rosa);
  color: var(--verde);
  font-family: var(--serif);
  font-size: 1.2rem;
  box-shadow: var(--sombra-suave);
}
.passo:nth-child(2) .passo__bola { background: var(--blush); border-color: var(--blush); }
.passo:nth-child(3) .passo__bola { background: var(--rosa); border-color: var(--rosa); }
.passo h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.passo p { font-size: .96rem; color: var(--texto-suave); margin: 0; }

.formatos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

.formato {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 1.6rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-suave);
  transition: transform .25s ease, box-shadow .25s ease;
}
.formato:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.formato__img { margin: 0; }
.formato__img img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 999px 999px var(--raio-p) var(--raio-p);
}
.formato__arte {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px var(--raio-p) var(--raio-p);
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .8), transparent 60%),
    linear-gradient(158deg, var(--blush) 0%, var(--blush-claro) 55%, var(--salvia-veu) 100%);
  color: var(--verde);
}
.formato h3 { font-size: 1.22rem; margin-bottom: .4rem; }
.formato p { font-size: .95rem; color: var(--texto-suave); margin: 0 0 .9rem; }
.formato__end {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .87rem;
  color: var(--texto-claro);
  line-height: 1.5;
}
.formato__end svg { flex: 0 0 auto; margin-top: 3px; color: var(--salvia); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { background: var(--sage-tint); }
.faq__lista { max-width: 860px; margin-inline: auto; }

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

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  width: 100%;
  min-height: 68px;
  padding: 1.35rem 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.9vw, 1.24rem);
  font-weight: 500;
  color: var(--verde);
  transition: color .2s ease;
}
.faq__pergunta:hover { color: var(--salvia-texto); }
.faq__icone {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  color: var(--salvia);
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.faq__item.aberto .faq__icone {
  transform: rotate(180deg);
  background: var(--rosa);
  border-color: var(--rosa);
  color: var(--verde);
}

.faq__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s ease;
}
.faq__item.aberto .faq__resposta { grid-template-rows: 1fr; }
.faq__resposta > div { overflow: hidden; }
.faq__resposta p {
  padding-bottom: 1.5rem;
  max-width: 70ch;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   Instagram
   -------------------------------------------------------------------------- */

.instagram { background: var(--blush-claro); }

.insta__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 5.5vw, 4.5rem);
  align-items: center;
}

/* flex, não inline-flex: como bloco ele força a eyebrow para a linha de baixo
   em vez de ficar ao lado do ícone */
.insta__cartao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1.6rem;
  border-radius: 20px;
  background: var(--branco);
  color: var(--verde);
  box-shadow: var(--sombra);
}

.insta__texto h2 { max-width: 16ch; }
.insta__texto h2 em { font-style: italic; color: var(--salvia-destaque); }
.insta__texto .lead { max-width: 46ch; }
.insta__botao { margin-top: 2rem; }

/* Prévia do feed: 3 colunas por 2 linhas de quadrados */
.insta__feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.4vw, 1rem);
}

.insta__quadro {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-suave);
  transition: transform .28s ease, box-shadow .28s ease;
}
.insta__quadro:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

/* Cada quadro é arte por paleta enquanto não houver o thumb real da
   publicação. Os seis gradientes percorrem as cinco cores da marca, para a
   grade não virar um bloco chapado. */
.insta__quadro:nth-child(1) { background: linear-gradient(145deg, var(--salvia-veu), var(--salvia)); }
.insta__quadro:nth-child(2) { background: linear-gradient(145deg, var(--blush), var(--rosa)); }
.insta__quadro:nth-child(3) { background: linear-gradient(145deg, var(--sage-tint), var(--salvia-clara)); }
.insta__quadro:nth-child(4) { background: linear-gradient(145deg, var(--rosa), var(--blush)); }
.insta__quadro:nth-child(5) { background: linear-gradient(145deg, var(--salvia), var(--verde)); }
.insta__quadro:nth-child(6) { background: linear-gradient(145deg, var(--salvia-clara), var(--blush)); }

/* a imagem cobre o quadrado; o gradiente do nth-child fica por baixo e só
   aparece enquanto a foto carrega */
.insta__quadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.insta__over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(51, 58, 49, .62);
  color: var(--branco);
  opacity: 0;
  transition: opacity .28s ease;
}
.insta__over svg {
  transform: scale(.72);
  transition: transform .28s cubic-bezier(.34, 1.4, .5, 1);
}
.insta__quadro:hover .insta__over,
.insta__quadro:focus-visible .insta__over { opacity: 1; }
.insta__quadro:hover .insta__over svg,
.insta__quadro:focus-visible .insta__over svg { transform: scale(1); }

@media (max-width: 900px) {
  .insta__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .insta__texto { max-width: 46ch; }
  .insta__cartao { margin-inline: auto; }
  .insta__texto .eyebrow { align-items: center; }
  .insta__texto h2, .insta__texto .lead { margin-inline: auto; }
  .insta__feed { width: 100%; max-width: 460px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .insta__quadro, .insta__over, .insta__over svg { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.secao-blog {
  background: var(--creme);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.blog__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.75rem;
}

.blog__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-suave);
}
.blog__capa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: linear-gradient(146deg, var(--salvia-veu), var(--blush-claro));
  color: var(--verde);
  overflow: hidden;
}
/* as três capas de "em breve" já nascem com as três cores da paleta, para a
   grade do blog não virar um bloco chapado quando os artigos entrarem */
.blog__card:nth-child(2) .blog__capa { background: linear-gradient(146deg, var(--blush-claro), var(--blush)); }
.blog__card:nth-child(3) .blog__capa { background: linear-gradient(146deg, var(--blush), var(--rosa)); }
.blog__capa svg { position: relative; z-index: 1; opacity: .7; }
.blog__corpo { padding: 1.4rem 1.5rem 1.65rem; }
.blog__selo {
  display: inline-block;
  margin-bottom: .7rem;
  padding: .28rem .8rem;
  border-radius: var(--raio-btn);
  background: var(--rosa);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
}
.blog__corpo p { font-size: .94rem; color: var(--texto-suave); margin: 0; }
.blog__acao { text-align: center; }

/* --------------------------------------------------------------------------
   Contato
   -------------------------------------------------------------------------- */

.contato { background: var(--blush-claro); }

.contato__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: start;
}

.contato__canais { display: grid; gap: 1.5rem; margin-top: 2rem; }
.contato__canal {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1rem;
  align-items: start;
}
.contato__canal .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--salvia-veu);
  color: var(--verde);
}
.contato__canal:nth-child(2n) .ico { background: var(--blush); }
.contato__canal h3 {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-claro);
  margin-bottom: .25rem;
}
.contato__canal a, .contato__canal p { color: var(--texto); font-size: 1rem; margin: 0; }
.contato__canal a:hover { color: var(--salvia-texto); }

.formulario {
  padding: clamp(1.75rem, 3.5vw, 2.6rem);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra);
}
.campo { margin-bottom: 1.15rem; }
.campo label {
  display: block;
  margin-bottom: .45rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--texto-suave);
}
.campo input,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: .85rem 1.05rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  background: var(--creme);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--texto);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.campo textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--salvia);
  background: var(--branco);
  box-shadow: 0 0 0 3px rgba(144, 152, 133, .18);
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-claro); }
.campo.erro input,
.campo.erro textarea { border-color: #C4756B; background: #FDF4F2; }
.campo__erro {
  display: none;
  margin-top: .4rem;
  font-size: .82rem;
  color: #B0594E;
}
.campo.erro .campo__erro { display: block; }

.form__aviso {
  margin: 1.2rem 0 1.5rem;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--texto-claro);
}
.form__aviso a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
.formulario .btn { width: 100%; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.rodape {
  position: relative;
  padding-top: clamp(3.5rem, 6vw, 5rem);
  padding-bottom: 2rem;
  background: var(--verde);
  color: var(--salvia-clara);
  overflow: hidden;
}
.rodape h1, .rodape h2, .rodape h3, .rodape h4 { color: var(--blush-claro); }

.rodape__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.75rem;
}
.rodape__logo { height: 52px; width: auto; margin-bottom: 1.35rem; }
.rodape__bio { font-size: .95rem; line-height: 1.75; max-width: 40ch; color: var(--salvia-clara); }

.rodape h4 {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1.15rem;
}
.rodape__menu li { margin-bottom: .6rem; }
.rodape__menu a { font-size: .95rem; transition: color .2s ease; }
.rodape__menu a:hover { color: var(--blush); }

/* Conjunto de ícones de contato: mesmo tamanho, peso e alinhamento */
.contatos { display: flex; flex-direction: column; gap: .9rem; }
.contatos a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  font-size: .95rem;
  color: currentColor;
  transition: color .2s ease;
}
.contatos a:hover { color: var(--blush); }
.contatos svg { flex: 0 0 auto; color: var(--blush); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(237, 209, 205, .2);
  font-size: .85rem;
}
.rodape__base a { text-decoration: underline; text-underline-offset: 3px; }
.rodape__base a:hover { color: var(--blush); }
.rodape__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   WhatsApp flutuante
   -------------------------------------------------------------------------- */

.wa-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .6);
  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 .22s ease;
}
.wa-float: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 -8px rgba(37, 211, 102, .6), 0 0 0 0 rgba(37, 211, 102, .5); }
  70% { box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .6), 0 0 0 20px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .6), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* --------------------------------------------------------------------------
   Movimento
   -------------------------------------------------------------------------- */

.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; }

.hero__entrada > * {
  opacity: 0;
  transform: translateY(18px);
  animation: sobe .75s cubic-bezier(.22, .8, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 150ms);
}
@keyframes sobe { to { opacity: 1; transform: none; } }

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

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --secao: 4.5rem; }
  .hero__grid,
  .sobre__grid,
  .abordagem__grid,
  .contato__grid { grid-template-columns: 1fr; }
  .sobre__grid .moldura-blob,
  .abordagem__foto { width: 100%; max-width: 380px; margin-inline: auto; }
  .abordagem__texto { order: -1; }
  /* empilhado, a foto do hero vem antes do texto. O teto de largura existe
     para a headline não ser empurrada para fora da primeira tela. */
  .hero__foto { order: -1; max-width: 340px; margin-bottom: 2rem; }
  .pilares { grid-template-columns: repeat(2, 1fr); }
  .pilar { padding-inline: 1.4rem; }
  .pilar:nth-child(odd) { border-left: none; padding-left: 0; }
  .pilar:nth-child(n+3) { margin-top: .5rem; }
  .formatos { grid-template-columns: 1fr; }
  .rodape__grid { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
  .cabecalho__cta { display: none; }
  .nav-principal { gap: 1.4rem; }
}

@media (max-width: 860px) {
  .publico { grid-template-columns: 1fr; }
  .blog__grade { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; gap: 2.25rem; }
  .passos::before { display: none; }
  .passo { display: grid; grid-template-columns: 54px 1fr; gap: 1.2rem; text-align: left; align-items: start; }
  .passo__bola { margin: 0; }
}

@media (max-width: 640px) {
  :root { --secao: 3.75rem; }
  body { font-size: 1rem; }
  .cabecalho__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .nav-principal, .cabecalho__cta { display: none; }
  .cabecalho__logo { margin-right: auto; }
  .nav-toggle { display: flex; margin-left: auto; }
  .hero { padding-top: 6.75rem; }
  /* Com a foto acima do texto, o tamanho dela decide se a headline sobra ou
     não na primeira tela. A 430px (medida do desktop) o H1 caía inteiro
     abaixo da dobra num iPhone SE. Este teto deixa foto e headline na
     primeira tela em 375x667, e ainda alcança a CTA em 390x844. */
  .hero__foto { max-width: 268px; margin-bottom: 1.75rem; }
  .hero__acoes .btn { width: 100%; }
  .hero__cartao { left: 0; bottom: 1.2rem; padding: .7rem .95rem; font-size: .78rem; }
  /* três colunas não cabem em 390px: a terceira quebra para a linha de baixo */
  .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.4rem; }
  .hero__meta strong { font-size: 1.25rem; }
  .hero__meta div:last-child { grid-column: 1 / -1; }
  .pilares { grid-template-columns: 1fr; margin-top: 2.75rem; }
  .pilar { border-left: none; padding: 1.75rem 0 0; border-top: 1px solid var(--linha); }
  .pilar:first-child { border-top: none; padding-top: 1.75rem; }
  .dif { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 0; }
  .dif__num { font-size: 3rem; }
  .formato { grid-template-columns: 1fr; gap: 1.2rem; }
  .formato__img, .formato__arte { max-width: 210px; }
  .contato__canais { gap: 1.25rem; }
  .rodape__grid { grid-template-columns: 1fr; }
  .rodape__base { justify-content: flex-start; }
  .wa-float { bottom: 1.25rem; right: 1.25rem; width: 54px; height: 54px; }
  .divisor { width: min(100% - 2.5rem, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__entrada > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .decor-drift { animation: none !important; }
  [data-parallax] { transform: none !important; }
  .mobile-menu, .menu-backdrop { transition: none !important; }
  .wa-float { animation: none !important; }
}