/* =========================================================
   ANA PAULA VILELA TELES — Psicologia Clínica
   Editorial · earthy · refined
   ========================================================= */

:root{
  --bone:       #F8F4EF;      /* fundo principal */
  --bone-2:     #EFE7DF;      /* cards / seções */
  --cream:      #F8F4EF;      /* superfícies e texto sobre fundo escuro */
  --ink:        #4A2C23;      /* texto principal */
  --ink-soft:   #7C695C;      /* texto secundário */
  --mute:       #7C695C;      /* texto secundário — labels */
  --line:       #BB9B82;      /* detalhes — divisores */
  --clay:       #BE6748;      /* destaques / links */
  --clay-deep:  #6F5941;      /* tom escuro de apoio — hover e labels */
  --burnt:      #BE6748;      /* destaques / links */
  --burnt-deep: #6F5941;
  --marsala:    #BE6748;      /* destaques — ênfase em texto */
  --marsala-deep:#4A2C23;
  --amber:      #DDB7A3;      /* detalhes / ícones — tom quente */
  --moss:       #876F52;      /* botão principal — acento */
  --olive:      #BE6748;      /* base da seção "Como você tem se sentido" */

  --btn:        #876F52;      /* botões principais */
  --btn-hover:  #6F5941;      /* botões principais — hover */
  --chip-hover: #A88663;      /* hover dos bloquinhos */
  --mark:       #F2DCD8;      /* rose — fundo do grifo (marca-texto) */
  --mark-ink:   #955251;      /* marsala — fonte do grifo */
  --paper-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 60px -40px rgba(74,36,25,.45);

  --f-display: "Fraunces", "Instrument Serif", ui-serif, Georgia, serif;
  --f-body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  --maxw: 1280px;
  --pad:  clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }

body{
  font-family: var(--f-body);
  font-weight: 420;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bone);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ display:block; max-width:100%; }

::selection{ background: var(--marsala); color: var(--cream); }

/* grain overlay */
.grain{
  position:fixed; inset:0; width:100vw; height:100vh;
  pointer-events:none; z-index:1000; mix-blend-mode:multiply; opacity:.15;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem var(--pad);
  background:
    radial-gradient(900px 400px at 85% -120%, color-mix(in srgb, var(--amber) 45%, var(--bone)) 0%, transparent 60%),
    radial-gradient(700px 360px at 10% -120%, color-mix(in srgb, var(--amber) 30%, var(--bone)) 0%, transparent 55%),
    var(--bone);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.nav__mark{ display:flex; align-items:baseline; gap:.7rem; }
.nav__mark-glyph{
  font-family: var(--f-display); font-weight: 500;
  font-size: 1.65rem; letter-spacing: -.02em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.nav__mark-glyph em{ font-style: italic; color: var(--clay); }
.nav__mark-label{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--mute);
}
/* assinatura curta, so aparece no celular (ver media query de 680px) */
.nav__mark-mob{ display:none; }
.nav__menu{ display:flex; gap:1.7rem; align-items:center; font-size:.92rem; }
/* mesma cor terracota do "saúde mental" no título da capa */
.nav__menu a{
  position:relative; padding:.4rem 0;
  color: var(--clay);
  font-weight: 700;
  transition: color .25s;
}
.nav__menu a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:.15rem; height:1px;
  width:0; background: var(--clay); transition: width .35s ease;
}
.nav__menu a:not(.nav__cta):hover{ color: var(--marsala-deep); }
.nav__menu a:not(.nav__cta):hover::after{ width:100%; }

/* botão claro, com folga em volta do texto e cantos suaves */
.nav__cta{
  padding: 1rem 2.2rem;
  background: color-mix(in srgb, var(--amber) 28%, var(--bone));
  border: 1px solid color-mix(in srgb, var(--clay) 28%, transparent);
  border-radius: 10px;
  font-size:.85rem; letter-spacing:.02em;
  transition: background .25s, border-color .25s, color .25s;
}
.nav__cta:hover{
  background: color-mix(in srgb, var(--amber) 55%, var(--bone));
  border-color: var(--clay);
  color: var(--marsala-deep);
}

.nav__burger{ display:none; width:36px; height:28px; position:relative; }
.nav__burger span{
  position:absolute; left:4px; right:4px; height:1.5px; background: var(--ink);
  transition: transform .3s, top .3s;
}
.nav__burger span:nth-child(1){ top:10px; }
.nav__burger span:nth-child(2){ top:17px; }
.nav.is-open .nav__burger span:nth-child(1){ top:14px; transform: rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ top:14px; transform: rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  isolation: isolate;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--pad) clamp(3rem, 7vw, 6rem);
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1rem, 3vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  min-height: calc(100vh - 64px);
}
.hero::before{
  content:"";
  position:absolute;
  /* sangra para fora dos 1280px do hero e ocupa a largura toda da tela */
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: url("foto-fundo-psicoterapia-online-terapia.png") center / cover no-repeat;
  opacity: .30;
  filter: blur(3px) saturate(.85);
  z-index: -2;
  pointer-events: none;
}
.hero::after{
  content:"";
  position:absolute;
  /* acompanha o sangramento do ::before */
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bone) 55%, transparent) 0%,
      color-mix(in srgb, var(--bone) 25%, transparent) 35%,
      color-mix(in srgb, var(--bone) 25%, transparent) 65%,
      color-mix(in srgb, var(--bone) 70%, transparent) 100%);
  z-index: -1;
  pointer-events: none;
}

.hero__eyebrow{
  grid-column: 1 / -1;
  grid-row: 1;
  display:flex; align-items:center; gap:.7rem;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--ink-soft);
  margin-top: 1rem;
}
.dot{
  width:.55rem; height:.55rem; border-radius:50%; background: var(--moss);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--moss) 25%, transparent);
  animation: pulse 2.2s infinite ease-in-out;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--moss) 25%, transparent); }
  50%   { box-shadow: 0 0 0 9px color-mix(in srgb, var(--moss) 0%, transparent); }
}

.hero__copy{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  align-self: center;
  margin-top: clamp(-6rem, -8vh, -2rem);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 44ch;
}

.hero__title{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.8vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0;
  color: var(--ink);
  max-width: none;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}
.hero__title .line{ display:block; }
.hero__title em{
  font-style: italic;
  font-weight: 360;
  color: var(--clay);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.hero__meta{
  max-width: 42ch;
  display:flex; flex-direction:column; gap:1.2rem;
}
.hero__role{
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing:.02em;
  margin:0;
  display:flex; align-items:baseline; gap:.65rem; flex-wrap:wrap;
  color: var(--ink-soft);
}
.hero__role em{ font-style: italic; color: var(--marsala); font-weight:500; }
.hero__role .sep{ color: var(--mute); }

.hero__lede{
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 42ch;
}

.hero__actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.3rem; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding: .85rem 1.3rem;
  border-radius: 999px;
  font-size: .95rem;
  letter-spacing:.01em;
  transition: transform .25s, background .25s, color .25s, border-color .25s;
  will-change: transform;
  border:1px solid transparent;
}
.btn svg{ transition: transform .3s; }
.btn:hover svg{ transform: translateX(3px); }
.btn--solid{ background: var(--btn); color: var(--cream); }
.btn--solid:hover{ background: var(--btn-hover); }
.btn--ghost{ border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--cream); }
.btn--lg{ padding: 1rem 1.6rem; font-size: 1.02rem; }

/* WhatsApp brand button */
.btn--wa{
  background: #25D366;
  color: #ffffff;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 1rem 1.5rem;
  gap: .7rem;
  box-shadow: 0 8px 22px -10px rgba(37,211,102,.55), 0 1px 0 rgba(0,0,0,.05);
}
.btn--wa:hover{
  background: #1FBA59;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(37,211,102,.65), 0 1px 0 rgba(0,0,0,.05);
}
.btn--wa .btn__wa-icon{
  flex-shrink: 0;
  transition: transform .35s;
}
.btn--wa:hover .btn__wa-icon{ transform: rotate(-6deg) scale(1.05); }

.hero__plate{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: start;
  position: relative;
  margin-left: clamp(-6rem, -6vw, -2rem);
}
.plate{
  position: relative;
  width: clamp(340px, 44vw, 560px);
  aspect-ratio: 4 / 5;
  margin: 0;
}
.plate__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.plate:hover .plate__img{ transform: scale(1.015); }

/* somente a foto — sem moldura, sem sombra, sem tint */
.plate__tint{ display: none; }
.plate__frame{ display: none; }

.plate__tag{
  position:absolute; left: 2px; bottom:-30px;
  font-family: var(--f-display); font-style:italic;
  font-size:.82rem; color: var(--clay-deep); letter-spacing:.04em;
}

.hero__foot{
  grid-column: 1 / -1;
  grid-row: 3;
  display:flex; justify-content:space-between; align-items:flex-end;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--mute);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.hero__scroll{ display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.hero__scroll svg{ animation: bob 2.2s infinite ease-in-out; }
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(5px); } }

/* =========================================================
   TICKER
   ========================================================= */
.ticker{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: color-mix(in srgb, var(--marsala) 7%, var(--bone));
  padding: 1.3rem 0;
}
.ticker__track{
  display: flex; gap: 2.2rem;
  font-family: var(--f-display); font-size: clamp(.896rem, 2.24vw, 1.568rem);
  font-weight: 360; letter-spacing: -.01em; color: var(--ink-soft);
  white-space: nowrap;
  /* 24s deixa o deslize claramente visivel no desktop, onde a faixa
     e larga; no celular a media query de 680px usa o proprio ritmo */
  animation: slide 24s linear infinite;
}
.ticker__track em{ font-style: italic; color: var(--marsala); }
/* segunda faixa: mesma identidade, fonte menor que a primeira */
.ticker--sm .ticker__track{ font-size: clamp(.76rem, 1.9vw, 1.34rem); }
/* separador gerado pelo CSS, em todas as faixas: 2.2rem antes (gap interno)
   e 2.2rem depois (gap do track), então o "·" fica no meio exato entre as
   palavras — e o align-items: center o alinha ao centro vertical delas. */
.ticker__track span{
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
}
.ticker__track span::after{ content: "·"; }
@keyframes slide{ to { transform: translateX(-50%); } }

/* =========================================================
   AVALIAÇÕES — cards escritos à mão

   Imitam o formato que o widget do Google mostrava: foto, nome,
   data, estrelas e o texto. Sem serviço externo, não expira.
   ========================================================= */
/* três por vez no desktop; o resto vem nas setas.
   flex-start: cada card para na altura do próprio texto,
   em vez de esticar até o mais alto da fileira */
.aval{ align-items: flex-start; }
.aval .aval__card{ flex: 0 0 clamp(270px, 31.5%, 380px); }

.aval__card{
  /* branco a 50%: deixa o fundo do site aparecer sem prejudicar a leitura */
  background: rgba(255, 255, 255, .5);
  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.5rem;
  box-shadow: 0 12px 30px -24px rgba(74,36,25,.55);
}
.aval__topo{
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .7rem;
}
.aval__foto{
  position: relative;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 1.15rem;
  overflow: hidden;
}
/* a foto cobre a inicial. Se o arquivo não existir, o onerror no HTML
   remove a imagem e a letra reaparece — nada de ícone quebrado. */
.aval__foto img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.aval__quem{ display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.aval__quem strong{ font-weight: 600; color: var(--ink); font-size: .98rem; }
.aval__quem span{ font-size: .8rem; color: var(--mute); }
.aval__g{ margin-left: auto; flex-shrink: 0; }

.aval__estrelas{
  color: #FBBC05;
  font-size: 1.05rem;
  letter-spacing: .1em;
  margin-bottom: .6rem;
}
.aval__texto{
  margin: 0;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
/* avaliações com mais de um parágrafo */
.aval__texto + .aval__texto{ margin-top: .7rem; }

/* =========================================================
   BLOG
   ========================================================= */
/* sobe a seção: a faixa logo acima já faz a separação,
   então o respiro cheio de topo ficaria demais */
.blog{ padding-top: clamp(2.4rem, 5vw, 5rem); }

.blog__head{ margin-bottom: 2.6rem; }
.blog__lede{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--ink-soft);
  margin: .6rem 0 0;
  max-width: 46ch;
}
.blog__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.post{ display: flex; }
.post__link{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
  padding: 1.7rem 1.6rem 1.5rem;
  background: var(--bone-2);
  border: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s, border-color .35s;
}
.post__link:hover{
  transform: translateY(-4px);
  border-color: var(--clay);
  box-shadow: var(--paper-shadow);
}
.post__tag{
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--clay-deep);
}
.post__title{
  font-family: var(--f-display);
  font-weight: 380;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  font-variation-settings:"opsz" 144, "SOFT" 50;
}
.post__excerpt{
  font-size: .95rem; line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  flex-grow: 1;
}
.post__more{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--clay-deep);
  margin-top: .3rem;
}
.post__link:hover .post__more svg{ transform: translateX(3px); }
.post__more svg{ transition: transform .3s; }

/* =========================================================
   CARROSSEL — usado pelo blog e pelas avaliações

   Setas de um lado e do outro, trilho no meio. A largura de
   cada card fica na seção que usa: aqui só o mecanismo.
   ========================================================= */
.carrossel{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
}
.carrossel__viewport{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* a barra de rolagem some, mas o arrastar com o dedo continua funcionando */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrossel__viewport::-webkit-scrollbar{ display: none; }
.carrossel__track{
  list-style: none;
  margin: 0;
  /* respiro para a sombra do card no hover não ser cortada */
  padding: .5rem .3rem;
  display: flex;
  gap: 1.5rem;
}
.carrossel__track > *{ scroll-snap-align: start; }

.carrossel__seta{
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bone);
  color: var(--clay-deep);
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, opacity .3s;
}
.carrossel__seta:hover:not(:disabled){
  background: var(--clay);
  border-color: var(--clay);
  color: #FFFFFF;
}
.carrossel__seta:disabled{ opacity: .28; cursor: default; }

/* todos os cards cabem na tela: as setas não têm função, então saem */
.carrossel--estatico{ grid-template-columns: minmax(0, 1fr); }
.carrossel--estatico .carrossel__seta{ display: none; }

/* ---- largura dos cards do blog ---- */
.blog__track .post{ flex: 0 0 clamp(255px, 31%, 340px); }
/* a miniatura sangra até a borda, então o card precisa recortar */
.blog__track .post__link{ overflow: hidden; }

/* ---- miniatura do texto ---- */
.post__thumb{
  display: block;
  /* 4:5 — o mesmo formato das artes de Instagram (1080 x 1350),
     então a arte entra inteira, sem corte */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone-2);
  /* anula o padding do card para a imagem encostar nas bordas */
  margin: -1.7rem -1.6rem .3rem;
}
.post__thumb img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.post__link:hover .post__thumb img{ transform: scale(1.04); }

@media (max-width: 600px){
  .carrossel__seta{ width: 40px; height: 40px; }
  .carrossel{ gap: .5rem; }
}

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

/* =========================================================
   ARTIGO DO BLOG (páginas em blog/)
   ========================================================= */
.artigo{
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--pad) clamp(4rem, 8vw, 7rem);
}
.artigo__back{
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 2.2rem;
  transition: color .25s;
}
.artigo__back:hover{ color: var(--clay); }
.artigo__meta{
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 1rem;
}
.artigo__meta .post__tag{ color: var(--clay-deep); }
.artigo__title{
  font-family: var(--f-display);
  font-weight: 370;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 1.8rem;
  font-variation-settings:"opsz" 144, "SOFT" 50, "WONK" 1;
}
.artigo__body p{
  font-size: 1.06rem; line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1.3rem;
  text-align: justify;
  hyphens: auto;
}
.artigo__body h2{
  font-family: var(--f-display);
  font-weight: 380;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 2.6rem 0 .9rem;
}
.artigo__body ul{ margin: 0 0 1.3rem; padding-left: 1.2rem; color: var(--ink-soft); }
.artigo__body li{ font-size: 1.06rem; line-height: 1.75; margin-bottom: .4rem; }
.artigo__body strong{ color: var(--ink); font-weight: 600; }
.artigo__body em{ font-style: italic; }
/* citação: fio à esquerda em vez de aspas gigantes, para não competir
   com o serifado do título logo acima */
.artigo__body blockquote{
  margin: 2.2rem 0;
  padding: .1rem 0 .1rem 1.6rem;
  border-left: 2px solid var(--clay);
}
.artigo__body blockquote p{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  text-align: left;
  margin: 0;
}
.artigo__cta{
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}

/* =========================================================
   SECTIONS · COMMON
   ========================================================= */
section{ max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 9vw, 9rem) var(--pad); }

.section-head{
  display:flex; align-items:center; gap:.9rem;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--clay-deep);
  margin-bottom: 2.2rem;
}
.section-head__num{ font-family: var(--f-display); font-style:italic; color: var(--mute); letter-spacing:0; }
.section-head--light{ color: var(--clay-deep); }
.section-head--light .section-head__num{ color: var(--mute); }

.h-display{
  font-family: var(--f-display);
  font-weight: 370;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin:0 0 1.5rem;
  color: var(--ink);
  font-variation-settings:"opsz" 144, "SOFT" 50;
  max-width: 22ch;
}
.h-display em{ font-style:italic; color: var(--marsala); }

/* =========================================================
   ACOLHIMENTO — ponte emocional entre o hero e o site
   ========================================================= */
.acolhimento{
  max-width: 100%;
  padding: clamp(4rem, 9vw, 8rem) var(--pad);
  background:
    radial-gradient(1100px 700px at 50% -25%, color-mix(in srgb, var(--cream) 14%, var(--olive)) 0%, transparent 65%),
    radial-gradient(700px 500px at 90% 110%, color-mix(in srgb, var(--ink) 30%, var(--olive)) 0%, transparent 60%),
    var(--olive);
  color: var(--cream);
  text-align: center;
  position: relative;
}
.acolhimento::before,
.acolhimento::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  width: clamp(60px, 8vw, 110px);
  height: 1px;
  background: color-mix(in srgb, var(--clay) 75%, transparent);
}
.acolhimento::before{ top: clamp(2.2rem, 5vw, 4rem); }
.acolhimento::after { bottom: clamp(2.2rem, 5vw, 4rem); }

.acolhimento__inner{ max-width: 920px; margin: 0 auto; }

.acolhimento__title{
  font-family: var(--f-display);
  font-weight: 380;
  font-size: clamp(2.1rem, 5.2vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--cream);
  margin: 0 0 1.4rem;
  font-variation-settings:"opsz" 144, "SOFT" 60, "WONK" 1;
}
.acolhimento__title em{
  font-style: italic;
  color: color-mix(in srgb, var(--amber) 22%, var(--cream));
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}

.acolhimento__lede{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--cream);
  margin: 0 0 2.6rem;
}

.acolhimento__chips{
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem .55rem;
}
.acolhimento__chips li{
  background: var(--bone-2);
  border: 1px solid var(--bone-2);
  color: var(--ink);
  padding: .62rem 1.15rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .005em;
  box-shadow: 0 6px 18px -10px rgba(74,36,25,.5);
  transition: background .35s, border-color .35s, color .35s, transform .35s, box-shadow .35s;
}
.acolhimento__chips li:hover{
  background: var(--chip-hover);
  border-color: var(--chip-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(74,36,25,.7);
}

.acolhimento__close{
  max-width: 62ch;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.7;
  /* sem transparência: sobre o terracota cada ponto de contraste conta */
  color: var(--cream);
}
.acolhimento__close + .acolhimento__close{ margin-top: 1rem; }
.acolhimento__close em{
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  color: var(--mark-ink);     /* marsala */
  background: var(--mark);    /* rose */
  padding: .1em .4em;
  border-radius: .25em;
  /* faz o grifo quebrar em blocos completos quando a frase passa de uma linha */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 680px){
  .acolhimento__chips li{ font-size: .92rem; padding: .5rem .9rem; }
  .acolhimento__close{ font-size: 1rem; }
}

/* =========================================================
   SOBRE
   ========================================================= */
.sobre{}
.sobre__grid{
  display:grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.sobre__portrait{ position: sticky; top: 100px; }
.portrait{}
.portrait__frame{
  position:relative;
  aspect-ratio: 4/5;
  background: var(--bone-2);
  overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: var(--paper-shadow);
}
.portrait__img{
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(1.05) contrast(1.02);
  transition: transform 1s cubic-bezier(.2,.6,.2,1);
}
.portrait__frame::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(200deg,
      color-mix(in srgb, var(--amber) 14%, transparent) 0%,
      transparent 40%,
      color-mix(in srgb, var(--marsala) 22%, transparent) 100%);
  mix-blend-mode: multiply;
  pointer-events:none;
}
.portrait:hover .portrait__img{ transform: scale(1.03); }
.portrait__monogram{
  position:absolute; top: 1rem; left: 1rem;
  font-family: var(--f-display); font-style:italic;
  font-size:.85rem; letter-spacing:.3em;
  color: var(--cream);
  mix-blend-mode: screen;
  z-index: 2;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.portrait figcaption{
  margin-top:.8rem;
  font-family: var(--f-display); font-style:italic;
  color: var(--mute); font-size:.9rem;
}

.sobre__copy p{ font-size: 1.05rem; line-height:1.7; margin:0 0 1.1rem; color: var(--ink-soft); max-width: 52ch; text-align: justify; text-wrap: pretty; hyphens: auto; }
/* assinatura: nome + registro profissional, logo abaixo do título */
.sobre__copy p.sobre__ident{
  text-align: left;
  hyphens: none;
  font-family: var(--f-display);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.sobre__copy p.sobre__ident span{
  display: inline-block;
  margin-top: .25rem;
  font-family: var(--f-body);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
}
/* as duas versoes do nome herdam o estilo do paragrafo, e nao o
   estilo pequeno em caixa alta que vale para o CRP logo abaixo */
.sobre__copy p.sobre__ident span.ident-desk,
.sobre__copy p.sobre__ident span.ident-mob{
  display: inline;
  margin-top: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}
.sobre__copy p.sobre__ident span.ident-mob{ display: none; }

.sobre__copy .h-display{ max-width: 18ch; }

/* com um item só, não faz sentido reservar 3 colunas */
.stats.stats--single{ grid-template-columns: auto; justify-items: start; }
.stats{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.stats dt{
  font-family: var(--f-display); font-weight: 380;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--ink);
  font-variation-settings:"opsz" 144;
}
.stats dd{
  margin:.1rem 0 0; font-size:.82rem; letter-spacing:.15em;
  text-transform:uppercase; color: var(--mute);
}

/* =========================================================
   ABORDAGEM — dark earth section
   ========================================================= */
.abordagem{
  max-width: 100%;
  background:
    radial-gradient(900px 600px at 90% -10%, color-mix(in srgb, var(--amber) 55%, var(--bone)) 0%, transparent 60%),
    radial-gradient(700px 500px at -10% 100%, color-mix(in srgb, var(--clay) 18%, var(--bone)) 0%, transparent 55%),
    var(--bone);
  color: var(--ink);
  margin: clamp(3rem, 5vw, 5rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
}
.abordagem > *{ max-width: var(--maxw); margin-left:auto; margin-right:auto; }
.abordagem .h-display{ color: var(--ink); max-width: 20ch; }
.abordagem .h-display em{ color: var(--clay); font-style: italic; }
.abordagem__title{ margin-bottom: 3.5rem; }

.principles{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.principles li{
  padding: 1.8rem 1.4rem 1.8rem 0;
  border-right: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
  position: relative;
}
.principles li:last-child{ border-right: 0; }
.principles__num{
  font-family: var(--f-display); font-style:italic;
  font-size: 1.1rem;
  color: var(--clay);
  letter-spacing:.05em;
}
.principles h3{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 1.2rem 0 .6rem;
  color: var(--ink);
  letter-spacing:-.01em;
}
.principles p{ font-size: .97rem; line-height:1.55; color: var(--ink-soft); margin:0; }

/* =========================================================
   ÁREAS
   ========================================================= */
.areas__title{ margin-bottom: 2rem; }
.areas__grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.areas__grid article{
  padding: 2rem 1.6rem 2.2rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .35s, color .35s;
  cursor: default;
  position: relative;
}
.areas__grid article::before{
  content:"✶";
  position:absolute; top: 1rem; right: 1rem;
  color: var(--clay); font-size: .9rem;
  opacity:.65;
  transition: transform .5s, opacity .3s;
}
.areas__grid article:hover{ background: var(--marsala-deep); color: var(--cream); }
.areas__grid article:hover::before{ transform: rotate(180deg); opacity:1; color: var(--amber); }
.areas__grid article:hover p{ color: color-mix(in srgb, var(--cream) 72%, transparent); }
.areas__grid h3{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.45rem;
  margin: 0 0 .7rem;
  letter-spacing:-.01em;
}
.areas__grid p{ margin:0; font-size:.97rem; color: var(--ink-soft); max-width: 32ch; line-height:1.55; transition: color .35s; }

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.depo__head{
  display:grid; grid-template-columns: 1.4fr 1fr;
  gap: 2rem; align-items: end;
  margin-bottom: 2.5rem;
}
.depo__score{ justify-self: end; text-align:right; }
.depo__stars{ font-size: 1.5rem; color: var(--clay); letter-spacing:.1em; }
.depo__score-text{ margin:.4rem 0 .2rem; font-size:.95rem; color: var(--ink-soft); }
.depo__score strong{ font-family: var(--f-display); font-size: 1.15rem; }
.depo__link{ font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color: var(--clay-deep); border-bottom:1px solid var(--clay-deep); padding-bottom:2px; }

.depo__list{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.review{
  position: relative;
  padding: 1.8rem 1.6rem 1.6rem;
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: 2px;
  display:flex; flex-direction:column;
  transition: transform .4s, box-shadow .4s;
}
.review:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -25px rgba(90,60,30,.35); }
.review__quote{
  font-family: var(--f-display); font-style:italic;
  font-size: 2.5rem; line-height:1; color: var(--marsala);
  position:absolute; top: .4rem; left: .9rem;
}
.review__stars{ color: var(--clay); letter-spacing:.08em; font-size:.9rem; margin: 1rem 0 .7rem; }
.review__text{
  font-size: .98rem; line-height:1.55; color: var(--ink-soft);
  margin: 0 0 1.2rem; flex:1;
}
.review__who{ display:flex; align-items:center; gap:.7rem; padding-top:.9rem; border-top:1px solid var(--line); }
.review__avatar{
  width:36px; height:36px; border-radius:50%;
  background: linear-gradient(135deg, var(--clay) 0%, var(--clay-deep) 100%);
  color: var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight: 500; font-size:.85rem;
  letter-spacing:.05em;
}
.review__name{ font-size:.95rem; color: var(--ink); font-weight: 520; }
.review__date{ display:block; font-size:.78rem; color: var(--mute); letter-spacing:.05em; }

.depo__note{
  margin-top: 2rem; padding: .9rem 1.1rem;
  background: color-mix(in srgb, var(--moss) 5%, var(--bone));
  border-left: 2px solid var(--moss);
  font-size: .88rem; color: var(--ink-soft);
  font-family: var(--f-body);
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.depo__note a{ color: var(--clay-deep); border-bottom: 1px solid currentColor; padding-bottom: 1px; margin-left:auto; }
.depo__note a:hover{ color: var(--clay); }

/* =========================================================
   FAQ
   ========================================================= */
.faq__title{ margin-bottom: 2.5rem; max-width: 24ch; }
.faq__list{
  border-top: 1px solid var(--line);
}
.faq details{
  border-bottom: 1px solid var(--line);
  padding: 0;
  transition: background .35s;
}
.faq details[open]{ background: color-mix(in srgb, var(--marsala) 5%, transparent); }
.faq summary{
  list-style: none;
  cursor: pointer;
  padding: 1.6rem 3rem 1.6rem 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--ink);
  letter-spacing: -.01em;
  position: relative;
  transition: color .25s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color: var(--clay-deep); }
.faq__icon{
  position: absolute;
  top: 50%; right: .4rem;
  width: 24px; height: 24px;
  transform: translateY(-50%);
  transition: transform .35s;
}
.faq__icon::before,
.faq__icon::after{
  content:""; position:absolute; top:50%; left:50%;
  width: 18px; height: 1.5px;
  background: var(--clay-deep);
  transform-origin: center;
  transform: translate(-50%,-50%);
  transition: transform .35s;
}
.faq__icon::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq details[open] .faq__icon::after{ transform: translate(-50%,-50%) rotate(0deg); }
.faq details p{
  margin: 0 0 1.6rem;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  padding-right: 3rem;
  animation: faqIn .45s ease both;
}
@keyframes faqIn{
  from{ opacity:0; transform: translateY(-6px); }
  to  { opacity:1; transform: none; }
}

/* =========================================================
   SKIP LINK (a11y)
   ========================================================= */
.skip-link{
  position: absolute; left: -999px; top: -999px;
  background: var(--ink); color: var(--cream);
  padding: .75rem 1rem; border-radius: 0 0 6px 0;
  z-index: 9999;
}
.skip-link:focus{ left: 0; top: 0; }

/* =========================================================
   CONTATO
   ========================================================= */
.contato{
  max-width: 100%;
  background:
    radial-gradient(800px 500px at 80% 0%, color-mix(in srgb, var(--amber) 55%, var(--bone)) 0%, transparent 60%),
    var(--bone);
  color: var(--ink);
  margin-top: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
}
.contato > *{ max-width: var(--maxw); margin-left:auto; margin-right:auto; }
.contato__grid{
  display:grid; grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: start;
}
.contato .h-display{ color: var(--ink); max-width: 16ch; }
.contato .h-display em{ color: var(--clay); }
.contato__copy p{ font-size: 1.05rem; color: var(--ink-soft); line-height:1.6; max-width: 44ch; }

.contato__info{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap: 1.2rem;
}
.contato__info li{
  display:flex; flex-direction:column; gap:.2rem;
  padding-bottom: 1.2rem;
  border-bottom:1px solid color-mix(in srgb, var(--line) 40%, transparent);
}
.contato__info li:last-child{ border-bottom:0; }
.contato__info span{
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--mute);
}
.contato__info a{
  font-family: var(--f-display); font-size: 1.35rem; color: var(--ink);
  letter-spacing:-.01em;
  transition: color .3s;
}
.contato__info a:hover{ color: var(--clay); }

.contato .btn--solid{
  background: var(--btn); color: var(--cream);
  grid-column: 1 / -1; justify-self: start; margin-top: 1rem;
}
.contato .btn--solid:hover{ background: var(--btn-hover); color: var(--cream); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  background: color-mix(in srgb, var(--bone-2) 45%, var(--bone));
  color: var(--ink-soft);
  padding: 3rem var(--pad) 2rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
}
.foot__top{
  display:flex; justify-content:space-between; align-items:end;
}
.foot__mark{
  font-family: var(--f-display); font-weight: 380;
  font-size: clamp(1.2rem, 4.2vw, 3rem);
  line-height:.9;
  letter-spacing:-.035em;
  color: var(--ink);
  font-variation-settings:"opsz" 144, "SOFT" 80, "WONK" 1;
}
.foot__mark em{ font-style:italic; color: var(--clay); }
.foot__top p{ margin:0; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color: var(--mute); }
/* nome acima do CRP, so aparece no celular (ver media query de 680px) */
.foot__nome-mob{ display:none; }

.foot__insta{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--clay-deep);
  transition: color .25s, transform .25s;
}
.foot__insta:hover{ color: var(--clay); transform: translateY(-2px); }
.foot__insta:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.foot__bottom{
  margin-top: 1.4rem;
  display:flex; justify-content:space-between;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--mute);
}

/* =========================================================
   REVEAL animation
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--d, 0s);
}
.reveal.is-in{ opacity: 1; transform: none; }

.hero__title .line.reveal{ transition-duration: 1.1s; }
.hero__title .line.reveal:nth-child(1){ --d: .05s; }
.hero__title .line.reveal:nth-child(2){ --d: .22s; }
.hero__eyebrow.reveal{ --d: 0s; }
.hero__role.reveal{ --d: .40s; }
.hero__lede.reveal{ --d: .55s; }
.hero__actions.reveal{ --d: .70s; }
.hero__plate.reveal{ --d: .30s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
  .hero{ grid-template-columns: 1fr; grid-template-rows: auto; min-height: auto; }
  .hero__copy, .hero__plate, .hero__foot{
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    justify-self: auto;
  }
  .hero__copy{ max-width: none; margin-top: 0; }
  .hero__plate{ order: -1; }
  .hero__plate .plate{ width: 300px; }
  .sobre__grid{ grid-template-columns: 1fr; }
  .sobre__portrait{ position: static; max-width: 360px; }
  .principles{ grid-template-columns: repeat(2, 1fr); }
  .principles li:nth-child(2n){ border-right: 0; }
  .principles li{ border-bottom: 1px solid color-mix(in srgb, var(--line) 30%, transparent); }
  .areas__grid{ grid-template-columns: repeat(2, 1fr); }
  .depo__head{ grid-template-columns: 1fr; }
  .depo__score{ justify-self: start; text-align:left; }
  .depo__list{ grid-template-columns: 1fr; }
  .contato__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 680px){
  .nav__menu{ display:none; position:fixed; top:64px; right:0; left:0;
    flex-direction:column; align-items:flex-start; gap: 1rem;
    padding: 1.5rem var(--pad);
    background: var(--bone);
    border-bottom:1px solid var(--line);
  }
  .nav.is-open .nav__menu{ display:flex; }
  .nav__burger{ display:block; }
  .nav__mark-label{ display:none; }
  .principles{ grid-template-columns: 1fr; }
  .principles li{ border-right:0; }
  .areas__grid{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr 1fr; }
  .foot__bottom{ flex-direction:column; gap:.4rem; }

  /* ---- assinatura ao lado do "Ap", na mesma fonte do rodape.
          o clamp so entra em telas bem estreitas, para nao quebrar linha ---- */
  .nav__mark-mob{
    display: inline;
    font-size: clamp(.936rem, 3.84vw, 1.08rem);
    /* espacamento menor que o do rodape: .18em e feito para caixa alta
       e deixa o texto normal com cara de esticado */
    letter-spacing: .06em;
    text-transform: none;
    color: var(--mute);
  }

  /* ---- hero centralizado: foto, titulo, texto e botao ---- */
  /* sobe o conjunto: menos respiro no topo e entre a foto e o texto */
  .hero{ text-align: center; padding-top: .5rem; row-gap: .7rem; }
  .hero__copy{ align-items: center; }
  .hero__meta{ align-items: center; margin-left: auto; margin-right: auto; }
  .hero__lede{ margin-left: auto; margin-right: auto; }
  .hero__actions{ justify-content: center; }
  /* a margem negativa vem do layout de 2 colunas do desktop e continuava
     puxando a foto 32px para a esquerda aqui — por isso ela parecia torta */
  .hero__plate{ justify-self: center; margin-left: 0; }
  .hero__plate .plate{ margin-left: auto; margin-right: auto; }

  /* titulo 10% maior */
  .hero__title{ font-size: clamp(2.86rem, 6.38vw, 4.84rem); }

  /* ---- faixas: 20% mais rapidas, palavras mais juntas, fonte 20% maior.
          os dois "gap" tem de continuar iguais, senao o "·" sai do meio ---- */
  .ticker__track{
    font-size: clamp(1.075rem, 2.69vw, 1.882rem);
    gap: 1.2rem;
    animation-duration: 33s;
  }
  .ticker__track span{ gap: 1.2rem; }
  .ticker--sm .ticker__track{ font-size: clamp(.912rem, 2.28vw, 1.608rem); }

  /* ---- no "Sobre", so "Ana Paula Teles" ---- */
  .sobre__copy p.sobre__ident span.ident-desk{ display: none; }
  .sobre__copy p.sobre__ident span.ident-mob{ display: inline; }

  /* ---- nome acima do CRP no rodape ---- */
  .foot__top{ flex-direction:column; gap:.4rem; align-items:flex-start; }
  /* 20% menor: vale para o nome e para a linha do CRP */
  .foot__top p{ font-size: .68rem; }
  .foot__nome-mob{ display: block; font-weight: 700; }
}

/* =========================================================
   BLOG — página de feed (blog/index.html)

   Um post abaixo do outro: arte à esquerda, texto à direita,
   empilhando num só bloco no celular.
   ========================================================= */
.feed{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad) clamp(4rem, 8vw, 7rem);
}
.feed__head{ margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.feed__head .h-display{ margin-bottom: .6rem; }

.feed__post{
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
  /* o menu fica fixo no topo: sem isso o link #post-2 pararia atrás dele */
  scroll-margin-top: 6rem;
}
.feed__post:first-of-type{ border-top: 0; padding-top: 0; }

.feed__arte{
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone-2);
  border: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
}
.feed__arte img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.feed__title{
  font-family: var(--f-display);
  font-weight: 370;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 1.3rem;
  font-variation-settings:"opsz" 144, "SOFT" 50;
}

/* subtítulo: continua a frase do título, então fica colado nele */
.feed__sub{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.45;
  color: var(--clay-deep);
  margin: -.6rem 0 1.6rem;
}

.feed__cta{ margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 820px){
  .feed__post{ grid-template-columns: 1fr; }
  .feed__arte{ max-width: 420px; }
}

/* =========================================================
   FECHO — quadro final, antes do rodapé

   Faixa cheia em tom escuro: fecha a página do lado oposto
   do "Como você tem se sentido", que abre em terracota.
   ========================================================= */
.fecho{
  max-width: 100%;
  padding: clamp(4rem, 9vw, 7rem) var(--pad);
  background:
    radial-gradient(900px 600px at 50% -20%, color-mix(in srgb, var(--clay) 20%, var(--ink)) 0%, transparent 65%),
    var(--ink);
  color: var(--cream);
  text-align: center;
  position: relative;
}
/* mesmo fio curto que marca o início da seção de acolhimento */
.fecho::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top: clamp(2rem, 5vw, 3.4rem);
  width: clamp(60px, 8vw, 110px);
  height: 1px;
  background: color-mix(in srgb, var(--clay) 75%, transparent);
}

.fecho__inner{ max-width: 880px; margin: 0 auto; }

.fecho__quote{
  font-family: var(--f-display);
  font-weight: 380;
  font-size: clamp(1.45rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--cream);
  margin: 0 0 1.1rem;
  font-variation-settings:"opsz" 144, "SOFT" 60, "WONK" 1;
}
.fecho__quote em{
  font-style: italic;
  color: color-mix(in srgb, var(--amber) 35%, var(--cream));
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}

/* sem transparência: sobre o tom escuro cada ponto de contraste conta */
.fecho__cta{
  font-family: var(--f-body);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  letter-spacing: .02em;
  color: var(--amber);
  margin: 0;
}

/* o rótulo é uma frase inteira, então precisa poder quebrar
   em duas linhas no celular em vez de estourar a largura */
.fecho__btn{
  margin-top: 2.4rem;
  max-width: min(100%, 30rem);
  text-align: center;
  font-size: 1.25rem;
  padding: 1.15rem 1.9rem;
}
@media (max-width: 560px){
  .fecho__btn{ font-size: 1.05rem; padding: .95rem 1.35rem; }
}

/* =========================================================
   BOTÃO FLUTUANTE DO WHATSAPP

   Fixo no canto inferior direito, acompanha a rolagem.
   Fica abaixo do grão (z-index 1000) para receber a mesma
   textura do resto do site, e abaixo do skip-link (9999).
   ========================================================= */
.wa-float{
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  /* respeita a barra de gestos do iPhone */
  margin-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 900;

  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;

  background: #25D366;
  color: #ffffff;
  box-shadow: 0 10px 26px -8px rgba(37,211,102,.6), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .3s, box-shadow .3s, background .3s;
}
.wa-float:hover{
  background: #1FBA59;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 32px -8px rgba(37,211,102,.7), 0 2px 6px rgba(0,0,0,.14);
}
.wa-float:focus-visible{
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.wa-float svg{ display:block; }

/* pulso discreto, só para o olho encontrar o botão */
.wa-float::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: wa-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse{
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.45); opacity: 0;  }
  100% { transform: scale(1.45); opacity: 0;  }
}

@media (max-width: 700px){
  .wa-float{ width: 54px; height: 54px; }
  .wa-float svg{ width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .wa-float::after{ display:none; }
  .carrossel__viewport{ scroll-behavior: auto; }
}