/* =========================================================
   Aline Andrade — Terapeuta Integrativa
   Design system medido a partir da referência (container 1120,
   Clash Grotesk + Inter, tinta #1b1b1b, flat, radius 20)
   ========================================================= */

@font-face { font-family:'Clash Grotesk'; src:url('../fonts/clash-grotesk-400.woff2') format('woff2'); font-weight:400; font-display:swap }
@font-face { font-family:'Clash Grotesk'; src:url('../fonts/clash-grotesk-500.woff2') format('woff2'); font-weight:500; font-display:swap }
@font-face { font-family:'Inter'; src:url('../fonts/inter-400.woff2') format('woff2'); font-weight:400; font-display:swap }
@font-face { font-family:'Inter'; src:url('../fonts/inter-500.woff2') format('woff2'); font-weight:500; font-display:swap }

:root{
  --ink:#1b1b1b;
  --marca:#4eb3ca;
  --body:#414141;
  --alt:#e0f0f3;
  --line:#e8e9ea;
  --white:#fff;
  --display:'Clash Grotesk', 'Inter', system-ui, sans-serif;
  --text:'Inter', system-ui, -apple-system, sans-serif;
  --container:1120px;
  --gutter:30px;
  --r:20px;
  --faixa:52px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:var(--text); font-size:16px; line-height:24px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul{ margin:0; padding:0; list-style:none }
figure,blockquote{ margin:0 }

.container{ width:100%; max-width:var(--container); margin-inline:auto }
.section{ padding:120px var(--gutter) 60px }

/* ---------- tipografia ---------- */
.h1{ font-family:var(--display); font-weight:400; font-size:68px; line-height:71.4px; letter-spacing:-2.04px; margin:0 }
.h2{ font-family:var(--display); font-weight:500; font-size:56px; line-height:64.4px; color:var(--ink); margin:0 }
.h3{ font-family:var(--display); font-weight:500; font-size:32px; line-height:38.4px; color:var(--ink); margin:0 }
.h4{ font-family:var(--display); font-weight:500; font-size:24px; line-height:31.2px; color:var(--ink); margin:0 }
.h5{ font-family:var(--display); font-weight:500; font-size:20px; line-height:30px; letter-spacing:.4px; color:var(--ink); margin:0 }
.h6{ font-family:var(--display); font-weight:500; font-size:18px; line-height:27px; letter-spacing:.36px; color:var(--ink); margin:0 }
.lead{ margin:0; color:var(--body) }
.quote{ font-family:var(--display); font-weight:400; font-size:14px; line-height:23.8px; color:var(--body); margin:0 }

/* rótulo de seção — nas seções claras é só bolinha + texto (h24);
   só o do hero vira pill de vidro */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--body); font-size:16px; line-height:24px; width:max-content;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:999px; background:var(--ink); flex:none }
.eyebrow--light{
  padding:8px 16px; border-radius:90px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1); color:#fff; backdrop-filter:blur(22px);
  gap:8px; line-height:20px;
}
.eyebrow--light::before{ background:#fff }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 8px 8px 32px; border-radius:60px;
  background:var(--marca); color:#fff; white-space:nowrap;
  font-size:16px; line-height:24px;
  transition:transform .25s ease, opacity .25s ease;
}
.btn .circle{
  width:28px; height:28px; border-radius:999px; flex:none;
  display:grid; place-items:center; background:#fff; color:var(--marca);
  transition:transform .25s ease;
}
.btn .circle svg{ width:12px; height:12px }
.btn:hover{ transform:translateY(-2px) }
.btn:hover .circle{ transform:rotate(45deg) }
.btn--light{ background:#fff; color:var(--ink) }
.btn--light .circle{ background:var(--marca); color:#fff }
.btn--glass{ background:rgba(255,255,255,.1); color:#fff; backdrop-filter:blur(22px); padding:8px 8px 8px 32px }
.btn--glass .circle{ width:40px; height:40px; background:#fff; color:var(--marca) }
.btn--glass .circle svg{ width:14px; height:14px }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:absolute; top:calc(var(--faixa) + 24px); left:0; right:0; z-index:50;
  padding-inline:var(--gutter);
}
.header .container{ position:relative; display:flex; align-items:center; justify-content:space-between; height:56px }
.brand img{ height:64px; width:auto }

.nav{
  display:flex; align-items:center; gap:0; padding:8px;
  border-radius:60px; background:rgba(255,255,255,.1);
  backdrop-filter:blur(22px);
}
.nav a{
  padding:4px 20px; border-radius:50px; color:#fff;
  transition:background .25s ease;
}
.nav a:hover{ background:rgba(255,255,255,.16) }

.burger{ display:none }
.nav__cta{ display:none }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:900px; overflow:hidden;
  padding:222px var(--gutter) 40px;
  display:flex; align-items:center;
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden }

/* CAMADA 1 - ceu, full bleed */
.hero__ceu{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  will-change:transform;
}
/* CAMADA 2 - recorte da Aline (PNG com alfa, aspecto .652).
   E um retrato ate o quadril, entao ancoro na BASE do hero: a borda
   inferior esconde o corte na cintura em vez de deixa-la flutuando.
   Sombra sutil porque jaleco branco sobre ceu claro perde contorno. */
.hero__pessoa{
  position:absolute; bottom:0; left:calc(50% - 190px);
  width:566px; height:868px;
  object-fit:contain; object-position:bottom center;
  transform-origin:bottom center;
  filter:drop-shadow(0 18px 40px rgba(16,32,48,.28));
  will-change:transform;
}
/* scrim leve so para firmar o texto branco sobre o ceu */
.hero__bg::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(12,20,24,.34) 0%, rgba(12,20,24,.16) 34%, rgba(12,20,24,0) 58%);
}
.hero .container{ position:relative; z-index:1; display:flex; gap:0; align-items:flex-start }

.hero__left{ width:827px; flex:none; display:flex; flex-direction:column; gap:190px }
.hero__headline{ display:flex; flex-direction:column; gap:20px }
.hero .h1{ color:#fff; display:flex; flex-direction:column; gap:10px }
.hero__line{ white-space:nowrap }
.hero__line{ display:flex; align-items:center; gap:32px }
.hero__line--rec{ padding-left:0 }

.hero__proof{ display:flex; align-items:center; gap:16px }
.hero__thumbs{ display:flex }
.hero__thumbs img{
  width:44px; height:44px; border-radius:999px; object-fit:cover;
  border:2px solid rgba(255,255,255,.85);
}
.hero__thumbs img+img{ margin-left:-14px }
.hero__proof strong{
  display:block; font-family:var(--display); font-weight:500;
  font-size:24px; line-height:31.2px; color:#fff;
}
.hero__proof span{ color:var(--alt) }

.hero__right{ width:293px; flex:none; padding-top:160px; display:flex; flex-direction:column; gap:32px; align-items:flex-start }
.hero__right p{ margin:0; color:#fff }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1199px){
  .hero__pessoa{ left:auto; right:-40px; top:auto; bottom:0; width:440px; height:642px }
  .h1{ font-size:56px; line-height:60px; letter-spacing:-1.6px }
  .h2{ font-size:44px; line-height:52px }
  .hero .container{ flex-direction:column; gap:48px }
  .hero__left{ width:100%; gap:64px }
  .hero__right{ width:100%; max-width:420px; padding-top:0 }
}
@media (max-width:767px){
  :root{ --gutter:20px }
  .section{ padding:80px var(--gutter) 40px }
  .h1{ font-size:40px; line-height:44px; letter-spacing:-1px }
  .h2{ font-size:32px; line-height:38px }
  .h3{ font-size:24px; line-height:31px }
  .hero{ min-height:auto; padding:132px var(--gutter) 108px }
  .hero__pessoa{ right:-64px; bottom:0; width:250px; height:365px; opacity:.62 }
  .hero__line--rec{ padding-left:0 }
}

/* =========================================================
   NAVEGACAO COMPACTA
   O menu completo so cabe a partir de ~1100px. Abaixo disso
   ele vira painel, senao o cabecalho estoura a largura.
   ========================================================= */
@media (max-width:1100px){
  .header .btn{ display:none }
  .burger{
    display:grid; place-items:center; width:44px; height:44px;
    border-radius:999px; background:rgba(255,255,255,.14); backdrop-filter:blur(22px);
  }
  .header--solido .burger{ background:var(--alt) }

  .nav{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:100%; left:0; right:0; margin-top:14px; padding:12px;
    border-radius:20px; background:rgba(12,20,24,.94); backdrop-filter:blur(22px);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s var(--expo), transform .25s var(--expo), visibility .25s;
  }
  /* o painel e escuro nas duas paginas; o cabecalho claro nao pode sobrescrever */
  .header--solido .nav{ background:rgba(12,20,24,.94); backdrop-filter:blur(22px) }
  .nav a,
  .header--solido .nav a{ padding:12px 16px; border-radius:12px; font-size:17px; color:#fff }
  .nav a:hover,
  .header--solido .nav a:hover{ background:rgba(255,255,255,.14); color:#fff }
  body.nav-open .nav{ opacity:1; visibility:visible; transform:none }
  .burger[aria-expanded="true"]{ background:rgba(255,255,255,.28) }
  .nav__cta,
  .header--solido .nav__cta{
    display:block; margin-top:8px; padding:14px 16px; border-radius:12px;
    background:var(--marca); color:#fff; text-align:center; font-size:17px;
  }
}

/* =========================================================
   SOBRE  (ref: h2 781x193 centrado, cards 363x198 r20 gap16)
   ========================================================= */
.sobre{ padding:120px var(--gutter) 60px; overflow:hidden }
.sobre__top{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:85px 0 95px }
.sobre__head{ width:781px; max-width:100%; display:flex; flex-direction:column; align-items:center; gap:16px }
.sobre .h2{ margin:0 }

/* pills de valores, rotacionadas ao redor da manchete */
.valor{
  position:absolute; display:grid; place-items:center;
  padding:18px 26px; border-radius:40px; color:#fff;
  font-size:16px; line-height:24px; white-space:nowrap;
}
.valor--1{ left:57px;  top:20px;   background:var(--marca); transform:rotate(-11deg) }
.valor--2{ right:50px; top:27px;   background:var(--marca); transform:rotate(9deg) }
.valor--3{ left:77px;  top:298px;  background:var(--marca); transform:rotate(8deg) }
.valor--4{ right:77px; top:298px;  background:var(--marca); transform:rotate(-9deg) }

.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.stat{ background:var(--alt); border-radius:var(--r); padding:24px; min-height:198px; display:flex; flex-direction:column; justify-content:space-between; gap:38px }
.stat p{ margin:0; max-width:225px }
.stat .num{ font-family:var(--display); font-weight:500; font-size:56px; line-height:64.4px; color:var(--ink); font-variant-numeric:tabular-nums }

/* =========================================================
   TERAPIAS  (ref: h2 569x129, p 310 dir, cards 363x438 r20)
   ========================================================= */
.terapias{ padding:60px var(--gutter) }
.terapias__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; margin-bottom:63px }
.terapias__head .left{ width:569px; display:flex; flex-direction:column; gap:16px }
.terapias__head .lead{ width:310px; flex:none; padding-top:56px }
.terapias .h2 .ind{ display:block; padding-left:.09em }

.cards3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.card-foto{
  position:relative; height:438px; border-radius:var(--r); overflow:hidden;
  display:flex; align-items:flex-end; isolation:isolate;
}
.card-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s ease }
.card-foto::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,14,18,0) 42%, rgba(10,14,18,.34) 62%, rgba(10,14,18,.82) 100%);
}
.card-foto:hover img{ transform:scale(1.05) }
.card-foto__txt{ padding:24px; color:#fff; display:flex; flex-direction:column; gap:16px }
.card-foto__txt h3{ color:#fff }
.card-foto__txt p{ margin:0; color:var(--line) }

@media (max-width:1199px){
  .sobre__head{ width:100% }
  .valor{ display:none }
  .sobre__top{ padding-bottom:56px }
  .terapias__head{ flex-direction:column; gap:24px }
  .terapias__head .left,.terapias__head .lead{ width:100% }
  .terapias__head .lead{ padding-top:0; max-width:460px }
  .cards3{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:767px){
  .stats{ grid-template-columns:1fr }
  .cards3{ grid-template-columns:1fr }
  .card-foto{ height:380px }
}

/* =========================================================
   POR QUE  (ref: img 362x590 + grid 2x2 de 363x287, icone 60)
   ========================================================= */
.porque{ padding:60px var(--gutter) }
.porque__head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; margin-bottom:64px }
.porque__head .h2{ margin:14px 0 24px }
.porque__head .lead{ max-width:532px }

.porque__grid{ display:grid; grid-template-columns:362px minmax(0,1fr); gap:16px }
.porque__img{ border-radius:var(--r); overflow:hidden; min-height:590px }
.porque__img img{ width:100%; height:100%; object-fit:cover; object-position:34% 50% }
.porque__cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }

.card-motivo{
  background:var(--alt); border-radius:var(--r); padding:24px;
  display:flex; flex-direction:column;
}
.card-motivo .ico{
  width:60px; height:60px; border-radius:999px; background:var(--white);
  display:grid; place-items:center; color:var(--ink); margin-bottom:84px;
}
.card-motivo .ico svg{ width:26px; height:26px }
.card-motivo h3{ margin:0 0 16px }
.card-motivo p{ margin:0 }

@media (max-width:1199px){
  .porque__grid{ grid-template-columns:1fr }
  .porque__img{ min-height:320px }
}
@media (max-width:767px){
  .porque__cards{ grid-template-columns:1fr }
  .card-motivo .ico{ margin-bottom:32px }
}

/* =========================================================
   BENEFICIOS  (ref: card 690x515 r20 + foto 414)
   ========================================================= */
.benef{ padding:60px var(--gutter) }
.benef__grid{ display:grid; grid-template-columns:690px minmax(0,1fr); gap:16px; align-items:stretch }
.benef__card{ background:var(--alt); border-radius:var(--r); padding:24px; display:flex; flex-direction:column }
.benef__card .h2{ margin:16px 0 0 }
.benef__card .lead{ max-width:456px; margin-top:23px }
.benef__pontos{ margin-top:52px; display:flex; flex-direction:column; gap:16px }
.benef__pontos li{ font-family:var(--display); font-weight:500; font-size:20px; line-height:30px; letter-spacing:.4px; color:var(--ink) }
.benef__img{ border-radius:var(--r); overflow:hidden; min-height:515px }
.benef__img img{ width:100%; height:100%; object-fit:cover; object-position:56% 58% }

/* =========================================================
   COMO FUNCIONA  (ref: 4 cards 446x597 r20, coluna dir +307)
   ========================================================= */
.passos{ padding:60px var(--gutter) }
.passos__head{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:69px }
.passos__head .h2{ margin:14px 0 23px; max-width:652px }
.passos__head .lead{ max-width:590px }

.passos__cols{ display:grid; grid-template-columns:446px 446px; justify-content:space-between; gap:16px }
.passos__col{ display:flex; flex-direction:column; gap:324px }
.passos__col--b{ margin-top:307px }

.passo{
  background:var(--alt); border-radius:var(--r); padding:12px 12px 24px;
  display:flex; flex-direction:column; text-align:center;
}
.passo__img{ border-radius:12px; overflow:hidden; height:459px }
.passo__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease }
.passo:hover .passo__img img{ transform:scale(1.04) }
.passo h3{ margin:20px 0 16px }
.passo p{ margin:0; padding-inline:12px }

@media (max-width:1199px){
  .benef__grid{ grid-template-columns:1fr }
  .benef__img{ min-height:320px }
  .passos__cols{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .passos__col{ gap:16px }
  .passos__col--b{ margin-top:0 }
  .passo__img{ height:320px }
}
@media (max-width:767px){
  .passos__cols{ grid-template-columns:1fr }
  .benef__card .h2{ margin-top:12px }
}

/* =========================================================
   ABORDAGEM  (ref: trilho horizontal preso; card 1120x433
   = coluna de texto 400 + gap 120 + imagem 600, passo 1160)
   ========================================================= */
.abordagem{ padding:60px 0 0; --passo:1160px; --n:4 }
.abordagem__head{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-inline:var(--gutter); margin-bottom:64px }
.abordagem__head .h2{ margin:14px 0 24px; max-width:540px }
.abordagem__head .lead{ max-width:394px }

.abordagem__pin{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden }
.abordagem__trilho{
  display:flex; gap:40px; will-change:transform;
  padding-inline:max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.eixo{ width:1120px; flex:none; height:433px; display:grid; grid-template-columns:400px 600px; justify-content:space-between; align-items:start }
.eixo__txt{ display:flex; flex-direction:column; height:433px }
.eixo__txt h3{ margin:0 0 20px }
.eixo__txt p{ margin:0 }
.eixo__tags{ margin-top:auto; display:flex; gap:11px }
.eixo__tags span{
  padding:12px 24px; border-radius:40px; background:var(--alt);
  color:var(--body); font-size:16px; line-height:24px; white-space:nowrap;
}
.eixo__img{ width:600px; height:433px; border-radius:var(--r); overflow:hidden }
.eixo__img img{ width:100%; height:100%; object-fit:cover }

@media (max-width:1199px){
  .abordagem{ padding-bottom:60px }
  .abordagem__pin{ position:static; height:auto; display:block }
  .abordagem__trilho{
    flex-direction:column; gap:48px; transform:none !important;
    padding-inline:var(--gutter); max-width:var(--container); margin-inline:auto;
  }
  .eixo{ width:100%; grid-template-columns:1fr; height:auto; gap:24px }
  .eixo__txt{ height:auto; gap:20px }
  .eixo__tags{ margin-top:0 }
  .eixo__img{ width:100%; height:340px }
}

/* =========================================================
   TRATAMENTOS  (ref: secao bg #f6f7f9, cards 363x433 r20 brancos)
   ========================================================= */
.trat{ background:#f5fafc; padding:120px var(--gutter) 60px }
.trat__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; margin-bottom:64px }
.trat__head .left{ width:390px }
.trat__head .h2{ margin:14px 0 0 }
.trat__head .lead{ width:304px; flex:none; padding-top:57px }

.planos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.plano__topo{ align-items:baseline }
.plano{ background:var(--white); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; min-height:360px }
.plano__topo{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap }
.plano__preco{ display:flex; align-items:baseline; gap:6px }
.plano__preco .v{ font-family:var(--display); font-weight:500; font-size:32px; line-height:38.4px; color:var(--ink) }
.plano__preco .v[data-fill]{ font-size:18px; color:#a8adb4 }
.plano__preco .u{ color:var(--body); white-space:nowrap; font-size:16px }
.plano ul{ margin:32px 0 32px; display:flex; flex-direction:column; gap:12px }
.plano li{ display:flex; gap:10px; align-items:flex-start }
.plano li svg{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--ink) }
.plano .btn{ margin-top:auto; align-self:stretch; justify-content:space-between }
.plano .quote{ margin-top:16px; text-align:center }

/* =========================================================
   QUEM CUIDA  (ref: card 457x540 + placa branca 409x107 r10)
   ========================================================= */
.quem{ padding:120px var(--gutter) 60px }
.quem__head{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:64px }
.quem__head .h2{ margin:14px 0 24px; max-width:482px }
.quem__head .lead{ max-width:482px }
.quem__cartao{ position:relative; width:457px; height:540px; margin-inline:auto; border-radius:var(--r); overflow:hidden }
.quem__cartao img{ width:100%; height:100%; object-fit:cover; object-position:50% 22% }
.quem__placa{
  position:absolute; left:24px; right:24px; bottom:24px;
  background:var(--white); border-radius:10px; padding:24px; text-align:center;
}
.quem__placa p{ margin:4px 0 0 }

@media (max-width:1199px){
  .trat__head{ flex-direction:column; gap:24px }
  .trat__head .left,.trat__head .lead{ width:100% }
  .trat__head .lead{ padding-top:0; max-width:460px }
  .planos{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:767px){
  .planos{ grid-template-columns:1fr }
  .quem__cartao{ width:100%; max-width:457px; height:460px }
}

/* =========================================================
   FAQ  /  RODAPE
   ========================================================= */
.faq{ padding:60px var(--gutter) }
.faq__head{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:64px }
.faq__head .h2{ margin:14px 0 24px; max-width:450px }
.faq__head .lead{ max-width:450px }
.faq__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start }

.perg{ background:var(--alt); border-radius:8px; overflow:hidden }
.perg__b{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px; text-align:left;
  font-family:var(--display); font-weight:500; font-size:18px; line-height:27px; letter-spacing:.36px; color:var(--ink);
}
.perg__b svg{ width:16px; height:16px; flex:none; transition:transform .3s ease }
.perg[open] .perg__b svg{ transform:rotate(45deg) }
.perg__r{ padding:0 24px 24px; margin:0; max-width:504px }

.fim{ padding:60px var(--gutter) 0 }
.fim__grid{ display:grid; grid-template-columns:539px minmax(0,1fr); gap:16px; align-items:center }
.fim__txt .h2{ margin:0 0 24px }
.fim__txt .lead{ max-width:539px; margin-bottom:120px }
.fim__txt .btn{ padding:8px 8px 8px 24px }
.fim__txt .btn .circle{ width:40px; height:40px }
.fim__txt .btn .circle svg{ width:14px; height:14px }
.fim__foto{ border-radius:var(--r); overflow:hidden; height:377px }
.fim__foto img{ width:100%; height:100%; object-fit:cover }

.rodape{ padding:80px var(--gutter) 40px }
.rodape__topo{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--line) }
.rodape__marca img{ height:34px; width:auto; filter:brightness(0) }
.rodape__marca p{ margin:16px 0 0; max-width:300px }
.rodape__col h4{ font-family:var(--display); font-weight:500; font-size:18px; line-height:27px; color:var(--ink); margin:0 0 16px }
.rodape__col li+li{ margin-top:10px }
.rodape__col a:hover{ color:var(--ink) }
.rodape__base{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding-top:24px }
.rodape__social{ display:flex; gap:10px }
.rodape__social a{
  width:40px; height:40px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink); transition:background .25s ease;
}
.rodape__social a:hover{ background:var(--alt) }
.rodape__social svg{ width:18px; height:18px }

@media (max-width:1199px){
  .fim__grid{ grid-template-columns:1fr }
  .fim__txt .lead{ margin-bottom:40px }
}
@media (max-width:767px){
  .faq__grid{ grid-template-columns:1fr }
  .rodape__topo{ flex-direction:column; gap:32px }
}

/* link inline dentro de texto corrido */
.lnk{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.lnk:hover{ opacity:.7 }

/* =========================================================
   MOVIMENTO
   As animacoes de entrada foram removidas. O conteudo aparece
   direto, sem revelacao ao rolar. Os atributos data-anim que
   sobraram no HTML nao tem mais efeito nenhum.
   A curva continua aqui porque as transicoes de hover usam.
   ========================================================= */
:root{ --expo:cubic-bezier(.16,1,.3,1) }


/* =========================================================
   DEPOIMENTOS  (ref: carrossel com setas; slide 1120 =
   foto 528x458 + gap 16 + card 576x458, um por vez)
   ========================================================= */
.depo{ padding:120px var(--gutter) 60px }
.depo__head{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:63px }
.depo__head .h2{ margin:14px 0 24px; max-width:532px }
.depo__head .lead{ max-width:532px }

.nota{
  display:inline-flex; align-items:center; gap:10px; margin-top:24px;
  padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:var(--white);
}
.nota__n{ font-family:var(--display); font-weight:500; font-size:20px; line-height:1; color:var(--ink) }
.nota__e{ color:#f5a623; letter-spacing:1px; font-size:14px }
.nota__t{ font-size:14px; color:var(--body) }

.depo__palco{ position:relative }
.depo__janela{ overflow:hidden }
.depo__pista{ display:flex; transition:transform .7s var(--expo) }
.depo__slide{ width:1120px; flex:none; display:grid; grid-template-columns:528px 576px; gap:16px }
.depo__foto{ border-radius:var(--r); overflow:hidden; height:458px }
.depo__foto img{ width:100%; height:100%; object-fit:cover }

.depoimento{
  position:relative; background:var(--alt); border-radius:var(--r);
  padding:24px; height:458px; display:flex; flex-direction:column; justify-content:center;
}
.depoimento blockquote{
  margin:0 0 24px; font-family:var(--display); font-weight:500;
  font-size:32px; line-height:38.4px; color:var(--ink);
}
.depoimento .nome{ display:block; color:var(--ink) }
.depoimento .papel{ font-family:var(--display); font-size:14px; line-height:23.8px; color:var(--body) }

.depo__setas{ position:absolute; right:24px; bottom:24px; z-index:2; display:flex; gap:8px }
.depo__setas button{
  width:48px; height:48px; border-radius:999px; background:var(--marca); color:#fff;
  display:grid; place-items:center; transition:opacity .25s ease, transform .25s ease;
}
.depo__setas button:hover{ transform:translateY(-2px) }
.depo__setas button:disabled{ opacity:.25; transform:none; cursor:default }
.depo__setas svg{ width:18px; height:18px }

@media (max-width:1199px){
  .depo__slide{ width:100%; grid-template-columns:1fr; gap:16px }
  .depo__foto{ height:300px }
  .depoimento{ height:auto; min-height:360px }
}
@media (max-width:767px){
  .depoimento blockquote{ font-size:24px; line-height:31px }
  .depo__setas{ position:static; margin-top:24px; justify-content:flex-end }
}

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.zap{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:58px; height:58px; border-radius:999px;
  display:grid; place-items:center;
  background:#25d366; color:#fff;
  box-shadow:0 6px 20px rgba(16,32,48,.28);
  transition:transform .25s var(--expo), box-shadow .25s ease;
}
.zap svg{ width:32px; height:32px; fill:currentColor }
.zap:hover{ transform:scale(1.07); box-shadow:0 10px 28px rgba(16,32,48,.34) }
.zap:focus-visible{ outline:3px solid var(--ink); outline-offset:3px }

@media (max-width:767px){
  .zap{ right:16px; bottom:16px; width:54px; height:54px }
  .zap svg{ width:29px; height:29px }
}
@media (prefers-reduced-motion:reduce){ .zap{ transition:none } }

/* duracao e subtitulo do servico */
.plano__dur{ display:block; margin-top:4px; font-size:14px; line-height:20px; color:var(--body) }
.plano__sub{ display:block; font-family:var(--text); font-size:14px; line-height:20px;
  font-weight:400; letter-spacing:0; color:var(--body) }


/* =========================================================
   FAIXA DE TOPO
   ========================================================= */
.faixa{
  position:relative; z-index:70; background:#dbd2bc;
  padding:0 var(--gutter);
}
.faixa__in{
  max-width:var(--container); margin-inline:auto; min-height:var(--faixa);
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  padding:8px 0;
}
.faixa__txt{
  margin:0; font-family:var(--display); font-weight:500;
  font-size:17px; line-height:24px; letter-spacing:.2px; color:var(--ink);
}
.faixa__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px; background:var(--ink); color:#fff;
  font-size:14px; line-height:20px; white-space:nowrap;
  transition:transform .25s var(--expo);
}
.faixa__btn svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8 }
.faixa__btn:hover{ transform:translateY(-1px) }
.faixa__btn:focus-visible{ outline:3px solid #fff; outline-offset:2px }

@media (max-width:767px){
  .faixa__in{ gap:8px; padding:9px 0 }
  .faixa__txt{ font-size:14px; line-height:19px; text-align:center }
  .faixa__btn{ font-size:13px; padding:7px 14px }
}

/* =========================================================
   PAGINAS DE TERAPIA
   ========================================================= */
/* nessas paginas o header fica sobre fundo claro, nao sobre foto */
.header--solido{ position:relative; top:0; background:var(--white); border-bottom:1px solid var(--line) }
.header--solido .container{ height:88px }
.header--solido .nav{ background:var(--alt); backdrop-filter:none }
.header--solido .nav a{ color:var(--body) }
.header--solido .nav a:hover{ background:#cfe4e9; color:var(--ink) }
.header--solido .btn--glass{ background:var(--marca); color:#fff; backdrop-filter:none }
.header--solido .btn--glass .circle{ background:#fff; color:var(--marca) }
.header--solido .brand img{ filter:brightness(0) }
.header--solido .burger svg path{ stroke:var(--ink) }

.tp__topo{ padding:72px var(--gutter) 56px }
.tp__topo__in{ display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:56px; align-items:center }
.tp__topo .h2{ margin:14px 0 18px }
.tp__topo .lead{ max-width:520px }
.tp__meta{ margin:20px 0 28px; font-family:var(--display); font-size:20px; line-height:30px; color:var(--ink) }
.tp__foto{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/5 }
.tp__foto img{ width:100%; height:100%; object-fit:cover }

.tp__corpo{ padding:0 var(--gutter) 96px }
.tp__cols{ max-width:760px; margin:0 auto }
.tp__bloco{ margin-bottom:44px }
.tp__bloco .h3{ margin:0 0 14px }
.tp__bloco p{ margin:0 0 16px }

.tp__leitura{
  margin:56px 0; padding:36px; border-radius:var(--r);
  background:#dbd2bc; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.tp__leitura .h3{ margin:0; max-width:460px }
.tp__leitura p{ margin:0; max-width:560px; color:#4a4436 }
.tp__leitura .eyebrow{ color:#4a4436 }
.tp__leitura .eyebrow::before{ background:var(--ink) }

.tp__faq{ max-width:760px; margin:72px auto 0; display:flex; flex-direction:column; gap:14px }
.tp__faq .h3{ margin:0 0 10px }
.tp__faq .faq__grid{ grid-template-columns:1fr }

.tp__artigo{
  max-width:760px; margin:56px auto 0; padding:24px 28px;
  border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column; gap:8px;
}
.tp__artigo a{
  font-family:var(--display); font-weight:500; font-size:20px; line-height:28px;
  color:var(--ink); text-decoration:none;
}
.tp__artigo a:hover{ text-decoration:underline; text-underline-offset:3px }

@media (max-width:1023px){
  .tp__topo__in{ grid-template-columns:1fr; gap:32px }
  .tp__foto{ aspect-ratio:16/10 }
}
@media (max-width:767px){
  .tp__topo{ padding:44px var(--gutter) 36px }
  .tp__leitura{ padding:26px }
  .header--solido .container{ height:auto; padding:14px 0 }
}

/* cards de terapia agora sao links */
a.card-foto{ text-decoration:none; color:inherit }

/* =========================================================
   SECAO DO BLOG NA HOME
   ========================================================= */
.blogsec{ padding:60px var(--gutter) }
.blogsec__head{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:56px }
.blogsec__head .h2{ margin:14px 0 20px; max-width:560px }
.blogsec__head .lead{ max-width:520px }

.artigos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.artigo{
  display:flex; flex-direction:column; background:var(--alt); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .4s var(--expo);
}
.artigo:hover{ transform:translateY(-4px) }
.artigo__foto{ aspect-ratio:16/10; overflow:hidden; background:var(--line) }
.artigo__foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--expo) }
.artigo:hover .artigo__foto img{ transform:scale(1.04) }
.artigo__txt{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1 }
.artigo__txt h3{ font-size:21px; line-height:28px }
.artigo__txt p{ margin:0; font-size:15px; line-height:24px }
.artigo__ler{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; color:var(--marca); font-size:15px }
.artigo__ler svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8 }

.blogsec__todos{ margin:44px auto 0; width:max-content }

@media (max-width:1023px){ .artigos{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:767px){ .artigos{ grid-template-columns:1fr } }


/* =========================================================
   RITMO VERTICAL NO MOBILE
   Precisa vir por ultimo. A regra mobile de .section esta la em
   cima (linha ~184), mas .sobre, .trat, .quem e .depo
   sao declaradas depois com 120px e venciam por ordem, entao no
   celular o respiro continuava sendo o do desktop.
   Aqui tudo cai para 36px em cima e embaixo: 72px entre secoes,
   no lugar dos 120 a 180 de antes.
   ========================================================= */
@media (max-width:767px){
  .section,
  .sobre, .terapias, .porque, .benef, .passos, .abordagem,
  .trat, .quem, .faq, .depo, .blogsec{
    padding-top:36px; padding-bottom:36px;
  }
  .fim{ padding-top:36px; padding-bottom:0 }
  .rodape{ padding:40px var(--gutter) 32px }

  /* cabecalhos de secao: 56 a 69px de folga viravam um buraco na tela */
  .terapias__head, .porque__head, .passos__head, .abordagem__head,
  .trat__head, .quem__head, .faq__head, .depo__head,
  .blogsec__head{ margin-bottom:28px }

  .sobre__top{ padding:32px 0 36px }
  .abordagem__trilho{ gap:32px }
  .fim__txt .lead{ margin-bottom:32px }
  .blogsec__todos{ margin-top:28px }
  .rodape__topo{ padding-bottom:32px }

  /* hero: 108px embaixo empurrava a primeira secao para fora da tela */
  .hero{ padding:120px var(--gutter) 64px }

  /* paginas de terapia */
  .tp__corpo{ padding-bottom:48px }
  .tp__bloco{ margin-bottom:28px }
  .tp__faq{ margin-top:32px }
}