/* =====================================================================
   Link in Bio · Psicóloga Jordana Feitosa
   Estética editorial: muito respiro, poucos elementos, fotografia grande.
   ===================================================================== */

/* ---------- 1. Fundações ---------- */
:root{
  /* cor */
  --areia:        #FAF7F3;
  --areia-fundo:  #F3ECE4;
  --branco:       #FFFDFB;
  --tinta:        #2E2529;
  --tinta-media:  #5E5054;
  --tinta-suave:  #857579;
  --rose:         #B9797F;
  --rose-claro:   #EFDCDA;
  --rose-vidro:   #F7EAE7;
  --linha:        #E7DDD3;
  --linha-suave:  #F0E8E0;

  /* tipografia */
  --serifa:  'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ritmo */
  --respiro-secao: clamp(4.5rem, 11vw, 8.75rem);
  --largura-texto: 34rem;
  --largura-larga: 68rem;
  --canto:   14px;
  --canto-g: 22px;

  /* movimento */
  --transicao: 280ms cubic-bezier(.22,.61,.36,1);
}

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

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

body{
  margin:0;
  background:var(--areia);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  font-weight:300;
  line-height:1.72;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,picture,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

/* [hidden] precisa vencer qualquer display definido em componente
   (ex.: .sociais a{display:grid}); senão, link sem URL fica visível. */
[hidden]{ display:none !important; }

h1,h2,h3{
  font-family:var(--serifa);
  font-weight:400;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 60;
  letter-spacing:-.018em;
  line-height:1.12;
  margin:0;
  text-wrap:balance;
}

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

a{ color:inherit; }

::selection{ background:var(--rose-claro); color:var(--tinta); }

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

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:var(--areia);
  padding:.75rem 1.25rem; border-radius:0 0 var(--canto) 0;
  font-size:.9rem;
}
.pular:focus{ left:0; }

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


/* ---------- 2. Estruturas ---------- */
.envoltorio{
  width:100%;
  max-width:var(--largura-texto);
  margin-inline:auto;
  padding-inline:clamp(1.375rem, 6vw, 2rem);
}
.envoltorio--largo{ max-width:var(--largura-larga); }

.secao{ padding-block:var(--respiro-secao); }
.secao--clara{ background:var(--areia-fundo); }

.sobrelinha{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose);
  margin:0 0 1.15rem;
}

.titulo-secao{
  font-size:clamp(1.95rem, 1.4rem + 2.4vw, 3.1rem);
  margin-bottom:1.1rem;
}

.intro{
  color:var(--tinta-media);
  max-width:34rem;
  margin-bottom:clamp(2.25rem,5vw,3.25rem);
}


/* ---------- 3. Botões ---------- */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.6rem;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.945rem; font-weight:500; letter-spacing:.006em;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--transicao), color var(--transicao),
             border-color var(--transicao), transform var(--transicao),
             box-shadow var(--transicao);
}
.botao .ico{ width:19px; height:19px; fill:currentColor; flex:none; }
.botao .ico--fim{ width:16px; height:16px; opacity:.65; }

.botao--principal{
  background:var(--tinta); color:var(--areia);
  box-shadow:0 1px 2px rgba(46,37,41,.16), 0 10px 26px -14px rgba(46,37,41,.5);
}
.botao--principal:hover{ background:#413338; transform:translateY(-1px); }
.botao--principal:active{ transform:translateY(0); }

.botao--claro{ background:var(--branco); color:var(--tinta); box-shadow:0 10px 26px -16px rgba(46,37,41,.55); }
.botao--claro:hover{ background:#fff; }

.botao--contorno{
  background:transparent; color:var(--tinta);
  border-color:var(--linha);
}
.botao--contorno:hover{ border-color:var(--tinta); background:rgba(46,37,41,.035); }

.botao--discreto{
  background:transparent; color:var(--tinta-media);
  padding-inline:.4rem;
  text-decoration:underline;
  text-decoration-color:var(--linha);
  text-underline-offset:6px;
  text-decoration-thickness:1px;
}
.botao--discreto:hover{ color:var(--tinta); text-decoration-color:var(--rose); }

.botao--grande{ padding:1.15rem 2rem; font-size:1rem; }

.acoes{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem 1rem;
  margin-top:2rem;
}

/* ---- Toque: no celular o botão é o destino, não um detalhe ----
   Quase todo o tráfego vem do Instagram, então os CTAs ocupam a linha inteira,
   ganham altura confortável de polegar (~60px) e texto maior. O link discreto
   continua sendo texto: só ele não vira bloco, para não competir com o CTA. */
@media (max-width:767px){
  /* Recuo lateral enxuto: o botão já ocupa a linha toda, e folga demais aqui
     quebraria "Conheça minha trajetória completa" em duas linhas. */
  .botao{
    padding:1.2rem 1rem;
    font-size:1.0625rem;
  }
  .botao .ico{ width:21px; height:21px; }

  .botao--principal,
  .botao--contorno{ width:100%; }

  .botao--grande{ padding:1.35rem 1.4rem; font-size:1.125rem; }
  .botao--grande .ico{ width:23px; height:23px; }

  /* Os secundários abrem mão do ícone decorativo de fim e de 1px de corpo:
     sem isso, "Conheça minha trajetória completa" quebra em duas linhas e o
     botão vira uma cápsula de 81px, destoando dos outros. */
  .botao--contorno{ font-size:1rem; }
  .botao--contorno .ico--fim{ display:none; }

  .acoes{ gap:.5rem; }
  .botao--discreto{ width:auto; padding:.7rem .4rem; font-size:1rem; }
}


/* ---------- 4. Hero ---------- */
.hero{
  padding-block:clamp(2.25rem,7vw,4.5rem) clamp(3.5rem,9vw,6rem);
  padding-inline:clamp(1.375rem,6vw,2rem);
  max-width:var(--largura-larga);
  margin-inline:auto;
  display:grid;
  gap:clamp(2.25rem,6vw,3.5rem);
  text-align:center;
}

.hero__media{ justify-self:center; width:min(100%, 26rem); }
.hero__media img{
  width:100%;
  border-radius:var(--canto-g);
  object-fit:cover;
  aspect-ratio:3/4;
  background:var(--areia-fundo);
}

.hero__nome{
  font-size:clamp(2.6rem, 1.6rem + 4.6vw, 4.25rem);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.03em;
}
.hero__nome span{ display:block; font-style:italic; font-weight:400; }

/* Terceira linha do H1: o nome sozinho não diz o que se busca no Google.
   Precisa desfazer o italic herdado de .hero__nome span acima. */
.hero__papel{
  font-family:var(--sans);
  font-size:clamp(.95rem,.9rem + .28vw,1.1rem);
  font-style:normal!important;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.4;
  color:var(--tinta-media);
  margin-top:.85rem;
}

.hero__frase{
  font-family:var(--serifa);
  font-size:clamp(1.05rem,.98rem + .42vw,1.28rem);
  font-weight:300;
  line-height:1.62;
  color:var(--tinta-media);
  max-width:27rem;
  margin:1.4rem auto 0;
}

.hero__texto .acoes{ justify-content:center; }

.sociais{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem;
  margin-top:2.25rem;
}
.sociais a{
  display:grid; place-items:center;
  width:54px; height:54px;
  border-radius:50%;
  color:var(--tinta-media);
  transition:color var(--transicao), background var(--transicao);
}
.sociais a:hover{ color:var(--tinta); background:var(--rose-vidro); }

/* Tamanho óptico: cada marca ocupa uma fração diferente do próprio viewBox
   (Instagram desenha 100% dele; LinkedIn, só 83%). Sem compensar, o Instagram
   apareceria maior que os vizinhos. Os valores abaixo fazem todos os glifos
   desenharem ~24px de largura real. Medido com getBBox(); ver README. */
.sociais svg{ fill:currentColor; }
.sociais .ico-instagram{ width:24px;   height:24px; }    /* desenho = 100% do viewBox */
.sociais .ico-tiktok   { width:24px;   height:24px; }    /* 100% na altura            */
.sociais .ico-linkedin { width:28.9px; height:28.9px; }  /* 83% na largura            */
.sociais .ico-lattes   { width:26.5px; height:26.5px; }  /* 91% na largura            */

.hero__nota{
  margin-top:1.1rem;
  font-size:.83rem;
  letter-spacing:.02em;
  color:var(--tinta-suave);
}

/* No celular a fotografia ocupa a primeira dobra inteira: sangra até as bordas
   e até o topo da tela. Os cantos inferiores arredondados fazem a imagem
   assentar no creme em vez de cortar seco, e repetem o raio do resto da página.
   Limitado a 599px: num tablet de 820px o sangramento geraria uma foto de mais
   de 1000px de altura e empurraria todo o texto para fora da primeira dobra. */
@media (max-width:599px){
  .hero{
    padding-inline:0;
    padding-block:0 clamp(3.5rem, 9vw, 6rem);
    gap:2.25rem;
  }
  .hero__texto{ padding-inline:clamp(1.375rem, 6vw, 2rem); }
  .hero__media{ width:100%; }
  .hero__media img{
    border-radius:0 0 var(--canto-g) var(--canto-g);
    aspect-ratio:4/5;
    object-position:center 22%;
  }
}

@media (min-width:860px){
  .hero{
    grid-template-columns:1fr 1fr;
    align-items:center;
    text-align:left;
    gap:clamp(3rem,6vw,5rem);
    padding-block:clamp(4rem,7vw,6.5rem) clamp(4.5rem,8vw,7rem);
  }
  .hero__media{ grid-column:2; grid-row:1; width:100%; max-width:26rem; justify-self:end; }
  .hero__texto{ grid-column:1; grid-row:1; }
  .hero__frase{ margin-inline:0; }
  .hero__texto .acoes{ justify-content:flex-start; }
  .sociais{ justify-content:flex-start; margin-left:-11px; }
}


/* ---------- 5. Apresentação (vídeo) ---------- */
.secao--apresentacao{ padding-block:0 var(--respiro-secao); }

.apresentacao{ margin:0; }
.apresentacao__moldura{
  position:relative;
  border-radius:var(--canto-g);
  overflow:hidden;
  background:var(--areia-fundo);
  aspect-ratio:16/9;
}
.apresentacao__moldura img,
.apresentacao__moldura video{
  width:100%; height:100%; object-fit:cover;
}

.apresentacao__legenda{
  max-width:32rem;
  margin:clamp(1.75rem,4vw,2.5rem) auto 0;
  text-align:center;
}
.apresentacao__legenda h2{
  font-size:clamp(1.55rem,1.3rem + 1.1vw,2.05rem);
  font-style:italic;
  font-weight:300;
  margin-bottom:.85rem;
}
.apresentacao__legenda p{ color:var(--tinta-media); }


/* ---------- 6. Sobre mim ---------- */
.sobre{ display:grid; gap:clamp(2.25rem,5vw,4rem); }

/* Retrato recortado: sem moldura e sem fundo, a figura pousa direto na seção. */
.sobre__foto img{
  width:min(100%, 20rem);
  margin-inline:auto;
}

.sobre__texto h2{
  font-size:clamp(1.9rem,1.4rem + 2.2vw,2.85rem);
  margin-bottom:1.35rem;
}
.sobre__texto p{ color:var(--tinta-media); }
.sobre__texto .botao{ margin-top:1.5rem; }

@media (min-width:900px){
  .sobre{
    grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
    align-items:center;
    gap:clamp(2.5rem, 5vw, 4.5rem);
  }
  .sobre__foto img{ width:100%; }
}


/* ---------- 7. Como posso ajudar ---------- */
.temas{
  list-style:none; margin:clamp(2rem,4vw,2.75rem) 0 0; padding:0;
  display:grid; gap:0;
}
.tema{
  display:flex; align-items:baseline; gap:.95rem;
  padding:1.05rem 0;
  border-bottom:1px solid var(--linha-suave);
  color:var(--tinta-media);
  line-height:1.6;
}
.tema:first-child{ border-top:1px solid var(--linha-suave); }
.tema__texto{ flex:1 1 auto; }
.tema strong{ font-weight:500; color:var(--tinta); }
.tema__marca{
  flex:none; width:6px; height:6px; margin-top:.55rem;
  border-radius:50%; background:var(--rose); opacity:.75;
}

.temas__nota{
  margin-top:1.75rem;
  font-size:.925rem;
  font-style:italic;
  color:var(--tinta-suave);
}


/* ---------- 8. Como funciona a terapia ---------- */
.cartoes{
  display:grid; gap:.85rem;
  grid-template-columns:1fr;
  margin-top:clamp(2rem,4vw,2.75rem);
}
@media (min-width:600px){ .cartoes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:940px){ .cartoes{ grid-template-columns:repeat(3,1fr); gap:1rem; } }

.cartao{
  background:var(--branco);
  border:1px solid var(--linha-suave);
  border-radius:var(--canto);
  padding:1.6rem 1.5rem 1.7rem;
  transition:border-color var(--transicao), transform var(--transicao);
}
.cartao:hover{ border-color:var(--linha); transform:translateY(-2px); }
.cartao__ico{
  width:26px; height:26px; fill:var(--rose); opacity:.85;
  margin-bottom:1.1rem;
}
.cartao h3{
  font-family:var(--sans);
  font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-suave);
  margin-bottom:.5rem;
}
.cartao p{
  font-family:var(--serifa);
  font-size:1.14rem; font-weight:300; line-height:1.45;
  color:var(--tinta);
}

.cartoes__nota{
  margin-top:1.75rem;
  font-size:.925rem;
  color:var(--tinta-suave);
  max-width:38rem;
}


/* ---------- 9. Consultório ---------- */
.galeria{
  display:grid; gap:.6rem;
  grid-template-columns:repeat(2,1fr);
}
.galeria__item{
  margin:0; padding:0; border:0; background:var(--areia-fundo);
  border-radius:var(--canto); overflow:hidden; cursor:zoom-in;
  aspect-ratio:3/4;
}
.galeria__item--destaque{ grid-column:1/-1; aspect-ratio:4/3; }
.galeria__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 620ms cubic-bezier(.22,.61,.36,1);
}
.galeria__item:hover img{ transform:scale(1.035); }

@media (min-width:760px){
  .galeria{ grid-template-columns:1.5fr 1fr 1fr; grid-template-rows:repeat(2,1fr); gap:.75rem; }
  .galeria__item{ aspect-ratio:auto; }
  .galeria__item--destaque{ grid-column:1; grid-row:1/span 2; aspect-ratio:3/4; }
}

.endereco{
  display:grid; gap:clamp(1.75rem,4vw,2.5rem);
  margin-top:clamp(2.25rem,5vw,3.25rem);
}
@media (min-width:820px){
  .endereco{ grid-template-columns:1.15fr 1fr; align-items:stretch; }
}

.endereco__mapa{
  border-radius:var(--canto);
  overflow:hidden;
  background:var(--areia-fundo);
  min-height:16rem;
}
.endereco__mapa iframe{ display:block; width:100%; height:100%; min-height:16rem; border:0; }

.mapa-fachada{
  width:100%; height:100%; min-height:16rem;
  display:grid; place-content:center; justify-items:center; gap:.7rem;
  border:1px solid var(--linha); border-radius:var(--canto);
  cursor:pointer;
  color:var(--tinta-media);
  background:
    radial-gradient(circle at 30% 25%, rgba(185,121,127,.10), transparent 55%),
    repeating-linear-gradient(46deg, transparent 0 26px, rgba(46,37,41,.045) 26px 27px),
    repeating-linear-gradient(-46deg, transparent 0 34px, rgba(46,37,41,.045) 34px 35px),
    var(--areia-fundo);
  transition:color var(--transicao), border-color var(--transicao);
}
.mapa-fachada:hover{ color:var(--tinta); border-color:var(--rose); }
.mapa-fachada__pino{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--branco);
  box-shadow:0 6px 20px -10px rgba(46,37,41,.5);
}
.mapa-fachada__pino svg{ width:24px; height:24px; fill:var(--rose); }
.mapa-fachada__texto{ font-size:.85rem; letter-spacing:.09em; text-transform:uppercase; font-weight:500; }

.endereco__dados h3{
  font-size:1.4rem; font-weight:400;
  margin-bottom:.85rem;
}
.endereco__dados address{
  font-style:normal; color:var(--tinta-media);
  line-height:1.75; margin-bottom:1.5rem;
}

.horarios{ width:100%; border-collapse:collapse; font-size:.92rem; }
.horarios th,.horarios td{
  text-align:left; font-weight:400; vertical-align:top;
  padding:.6rem 0; border-bottom:1px solid var(--linha-suave);
}
.horarios th{ color:var(--tinta-media); padding-right:1rem; }
.horarios td{ text-align:right; color:var(--tinta); white-space:nowrap; }

.endereco__aviso{
  margin-top:1rem; font-size:.85rem; color:var(--tinta-suave); font-style:italic;
}
.endereco__dados .botao{ margin-top:1.4rem; }


/* ---------- 10. Avaliações ----------
   A seção 7 do index.html está comentada (perfil do Google com 0 avaliações).
   As regras abaixo ficam intactas e inertes, para a seção voltar pronta. */
.avaliacoes{ margin-top:clamp(1.75rem,4vw,2.5rem); }

.nota{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 1.5rem;
  padding:1.6rem 1.75rem;
  background:var(--branco);
  border:1px solid var(--linha-suave);
  border-radius:var(--canto);
  margin-bottom:1rem;
}
.nota__valor{
  font-family:var(--serifa);
  font-size:3rem; font-weight:300; line-height:1;
  letter-spacing:-.03em;
}
.nota__detalhe{ display:grid; gap:.3rem; }
.nota__qtd{ font-size:.88rem; color:var(--tinta-suave); }

.estrelas{ display:inline-flex; gap:2px; }
.estrelas svg{ width:17px; height:17px; fill:var(--rose); }
.estrelas svg.vazia{ fill:var(--linha); }

.nota__google{ margin-left:auto; font-size:.85rem; }

.depoimentos{
  display:grid; gap:.85rem;
  grid-template-columns:1fr;
}
@media (min-width:700px){ .depoimentos{ grid-template-columns:repeat(2,1fr); } }

.depoimento{
  background:var(--branco);
  border:1px solid var(--linha-suave);
  border-radius:var(--canto);
  padding:1.6rem 1.6rem 1.4rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.depoimento__texto{
  font-family:var(--serifa);
  font-size:1.05rem; font-weight:300; line-height:1.6;
  color:var(--tinta);
}
.depoimento__rodape{
  display:flex; align-items:center; gap:.7rem;
  margin-top:auto; padding-top:.3rem;
}
.depoimento__inicial{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--rose-vidro); color:var(--rose);
  font-size:.85rem; font-weight:500;
  flex:none;
}
.depoimento__autor{ font-size:.9rem; font-weight:400; }
.depoimento__quando{ font-size:.8rem; color:var(--tinta-suave); }

.avaliacoes__convite{
  background:var(--branco);
  border:1px solid var(--linha-suave);
  border-radius:var(--canto);
  padding:clamp(1.75rem,4vw,2.5rem);
  text-align:center;
}
.avaliacoes__convite p{ color:var(--tinta-media); max-width:32rem; margin-inline:auto; }
.avaliacoes__convite .botao{ margin-top:1.4rem; }

.avaliacoes__mais{ margin-top:1.25rem; text-align:center; }


/* ---------- 11. Além do consultório ---------- */
.mosaico{
  display:grid; gap:.6rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){ .mosaico{ grid-template-columns:repeat(3,1fr); gap:.75rem; } }

.mosaico__item{ margin:0; position:relative; border-radius:var(--canto); overflow:hidden; background:var(--areia-fundo); }
.mosaico__item img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.mosaico__item figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:1.75rem .9rem .8rem;
  font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:#fff;
  background:linear-gradient(to top, rgba(28,20,23,.62), transparent);
}

.etiquetas{
  list-style:none; margin:clamp(1.75rem,4vw,2.25rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.etiquetas li{
  padding:.5rem 1rem;
  border:1px solid var(--linha);
  border-radius:999px;
  font-size:.83rem;
  color:var(--tinta-media);
}


/* ---------- 12. Mentorias ---------- */
.secao--mentorias{ background:var(--tinta); color:var(--areia); }
.secao--mentorias .sobrelinha{ color:var(--rose-claro); opacity:.85; }

.mentorias{ display:grid; gap:clamp(2.25rem,5vw,3.5rem); }
@media (min-width:900px){
  .mentorias{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:center; }
}
/* Em telas largas a figura ganha mais presença. Mantida centrada de propósito:
   se fosse ancorada na base da seção, encostaria no retrato da chamada final. */
@media (min-width:1180px){
  .mentorias{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
}

.mentorias__texto h2{
  font-size:clamp(2rem,1.5rem + 2.4vw,3rem);
  font-style:italic; font-weight:300;
  margin-bottom:1.35rem;
}
.mentorias__texto p{ color:rgba(250,247,243,.78); }
.mentorias__texto em{ color:var(--rose-claro); font-style:italic; }

.mentorias__lista{
  list-style:none; padding:0;
  margin:1.75rem 0;
  display:grid; gap:.75rem;
}
.mentorias__lista li{
  display:grid; gap:.15rem;
  padding:1.1rem 1.3rem;
  border:1px solid rgba(250,247,243,.16);
  border-radius:var(--canto);
  background:rgba(250,247,243,.035);
}
.mentorias__lista strong{
  font-family:var(--serifa); font-size:1.1rem; font-weight:400;
  color:var(--areia);
}
.mentorias__lista span{ font-size:.9rem; color:rgba(250,247,243,.62); }

.mentorias__temas{
  font-size:.86rem; line-height:1.75;
  color:rgba(250,247,243,.5);
  border-left:1px solid rgba(250,247,243,.2);
  padding-left:1.1rem;
  margin-bottom:1.9rem;
}

/* Mobile-first: no celular este retrato cairia empilhado logo acima do retrato
   da chamada final: dois retratos seguidos leem como repetição e roubam o
   impacto do fechamento, que é onde a conversão acontece. Como quase todo o
   tráfego vem do Instagram, a seção vira um bloco compacto de texto no celular.
   A foto volta a partir de 900px, onde as duas ficam em colunas opostas e não
   competem. O <img> tem loading="lazy", então nem chega a ser baixado no mobile.
   Escopado por max-width de propósito: como `display` também é definido no
   media query de 900px, uma regra solta aqui venceria por ordem no arquivo. */
@media (max-width:899px){
  .mentorias__foto{ display:none; }
}

/* Recorte com transparência: a figura pousa direto no plum, sem moldura e sem
   corte forçado: a imagem já vem na proporção certa do pipeline. */
.mentorias__foto img{ width:100%; }


/* ---------- 13. Chamada final ---------- */
.chamada{
  display:grid;
  background:var(--areia-fundo);
}
.chamada__media img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/5;
  max-height:34rem;
}
.chamada__texto{
  padding:clamp(3rem,9vw,5.5rem) clamp(1.375rem,6vw,4rem);
  display:grid; align-content:center; justify-items:start;
}
.chamada__texto h2{
  font-family:var(--serifa);
  font-size:clamp(1.6rem,1.15rem + 2.1vw,2.5rem);
  font-weight:300; font-style:italic;
  line-height:1.28;
  max-width:20ch;
  margin-bottom:2.1rem;
}
.chamada__nota{
  margin-top:1.1rem;
  font-size:.85rem; color:var(--tinta-suave);
}

@media (min-width:900px){
  .chamada{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:stretch; }
  .chamada__media img{ max-height:none; height:100%; aspect-ratio:auto; min-height:32rem; }
}


/* ---------- 14. Rodapé ---------- */
.rodape{
  background:var(--areia);
  border-top:1px solid var(--linha-suave);
  padding-block:clamp(3rem,7vw,4.5rem) clamp(2rem,4vw,2.5rem);
  font-size:.9rem;
}
.rodape__topo{
  display:grid; gap:2.25rem;
  padding-bottom:2.25rem;
  border-bottom:1px solid var(--linha-suave);
}
@media (min-width:780px){
  .rodape__topo{ grid-template-columns:repeat(3,1fr); gap:2rem; }
}

.rodape__nome{
  font-family:var(--serifa);
  font-size:1.5rem; font-weight:300; letter-spacing:-.02em;
  margin-bottom:.3rem;
}
.rodape__crp{ color:var(--tinta-suave); font-size:.85rem; margin:0; line-height:1.6; }
.rodape__crp a{
  text-decoration-color:var(--rose);
  text-underline-offset:2px;
  transition:color var(--transicao);
}
.rodape__crp a:hover{ color:var(--tinta); }

.rodape__links{ display:grid; gap:.6rem; align-content:start; }
.rodape__links a{
  color:var(--tinta-media); text-decoration:none;
  width:fit-content;
  transition:color var(--transicao);
  border-bottom:1px solid transparent;
}
.rodape__links a:hover{ color:var(--tinta); border-bottom-color:var(--rose); }

.rodape__endereco{
  font-style:normal; color:var(--tinta-media); line-height:1.75;
}

/* O <span> do copyright já existia sozinho aqui; com o crédito de
   desenvolvimento ao lado, os dois viram extremos da mesma linha e empilham
   no celular, onde não caberiam lado a lado. */
.rodape__base{
  margin:1.75rem 0 0;
  font-size:.8rem; color:var(--tinta-suave);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between; align-items:baseline;
}
.rodape__credito a{
  text-decoration-color:var(--rose);
  text-underline-offset:2px;
  transition:color var(--transicao);
}
.rodape__credito a:hover{ color:var(--tinta); }


/* ---------- 15. CTA flutuante ---------- */
.barra-cta{
  position:fixed; z-index:60;
  left:50%; bottom:max(1rem, env(safe-area-inset-bottom));
  transform:translate(-50%, 150%);
  transition:transform 420ms cubic-bezier(.22,.61,.36,1), opacity 300ms ease;
  opacity:0;
  pointer-events:none;
  padding-inline:1rem;
  width:min(100%, 28rem);
  display:flex; justify-content:center;
}
.barra-cta .botao{
  width:100%;
  box-shadow:0 4px 12px rgba(46,37,41,.14), 0 18px 42px -18px rgba(46,37,41,.65);
}
.barra-cta.visivel{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }


/* ---------- 16. Lightbox ---------- */
.lupa{
  border:0; padding:0; margin:auto;
  width:min(94vw,60rem); max-width:none;
  max-height:92dvh;
  background:transparent;
  overflow:visible;
}
.lupa::backdrop{ background:rgba(28,20,23,.86); backdrop-filter:blur(4px); }

.lupa__figura{ margin:0; }
.lupa__figura img{
  width:100%; max-height:82dvh; object-fit:contain;
  border-radius:var(--canto);
  background:var(--areia-fundo);
}
.lupa__figura figcaption{
  margin-top:.9rem; text-align:center;
  font-size:.85rem; color:rgba(250,247,243,.72);
}

.lupa__fechar,.lupa__nav{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  width:44px; height:44px;
  border:0; border-radius:50%;
  background:rgba(250,247,243,.12);
  color:var(--areia);
  cursor:pointer;
  transition:background var(--transicao);
}
.lupa__fechar:hover,.lupa__nav:hover{ background:rgba(250,247,243,.24); }
.lupa__fechar svg,.lupa__nav svg{ width:20px; height:20px; fill:currentColor; }

.lupa__fechar{ top:-56px; right:0; }
.lupa__nav{ top:50%; transform:translateY(-50%); }
.lupa__nav--ant{ left:-56px; }
.lupa__nav--prox{ right:-56px; }

@media (max-width:900px){
  .lupa{ width:92vw; }
  .lupa__fechar{ top:-52px; }
  .lupa__nav{ top:auto; bottom:-56px; transform:none; }
  .lupa__nav--ant{ left:calc(50% - 52px); }
  .lupa__nav--prox{ right:calc(50% - 52px); }
  .lupa__figura figcaption{ display:none; }
}


/* ---------- 17. Revelação ao rolar ---------- */
.revelar{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 760ms cubic-bezier(.22,.61,.36,1),
             transform 760ms cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.revelar.dentro{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
  .revelar{ opacity:1; transform:none; }
}