/* =========================================================================
   LE CONTOUR CLINIQUE — sistema visual compartilhado
   Usado por: index.html, dr-thiago.html, dra-fernanda.html
   Cores e tipografia conforme a identidade oficial da marca.
   ========================================================================= */

/* Fontes oficiais da marca */
@font-face{ font-family:'Mirante'; src:url('fontes/Mirante-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Mirante'; src:url('fontes/Mirante-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Mirante'; src:url('fontes/Mirante-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Neue Montreal'; src:url('fontes/NeueMontreal-Light.otf') format('opentype');
  font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Neue Montreal'; src:url('fontes/NeueMontreal-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Neue Montreal'; src:url('fontes/NeueMontreal-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap; }

:root{
  /* Paleta oficial (extraída dos arquivos de marca) */
  --creme:         #F2EEE9;   /* creme institucional */
  --creme-suave:   #CFC7BC;   /* greige claro */
  --taupe:         #A59988;   /* taupe da marca */
  --taupe-claro:   #CFC7BC;
  --texto-escuro:  #545048;   /* grafite quente da marca */
  --preto:         #0D0C0B;   /* fundo escuro do site */
  --preto-suave:   #161412;

  --texto-sobre-escuro: rgba(242,238,233,0.74);
  --texto-sobre-claro:  #5C574E;

  --borda-clara:   rgba(242,238,233,0.14);
  --borda-escura:  rgba(84,80,72,0.20);

  --fonte-titulo: 'Mirante', Georgia, 'Times New Roman', serif;
  --fonte-texto:  'Neue Montreal', 'Segoe UI', system-ui, sans-serif;

  --secao-y: clamp(3.5rem, 8vw, 7.5rem);
  --largura: 1200px;
  --raio: 3px;
}

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

html{ scroll-behavior: smooth; scroll-padding-top: 80px; }

body{
  margin: 0;
  background: var(--preto);
  color: var(--texto-sobre-escuro);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
p{ margin: 0; }
h1, h2, h3, h4{ margin: 0; font-family: var(--fonte-titulo); font-weight: 500; color: var(--creme); }
button{ font: inherit; }

.container{
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 clamp(1.15rem, 4vw, 3rem);
}

.pular-link{
  position: absolute; left: -9999px; top: auto; z-index: 300;
  background: var(--taupe); color: var(--preto); padding: 0.8rem 1.2rem; font-weight: 500;
}
.pular-link:focus{ left: 1rem; top: 1rem; }

:focus-visible{ outline: 2px solid var(--taupe-claro); outline-offset: 3px; }

/* ---------- Seções ---------- */
.secao{ padding: var(--secao-y) 0; position: relative; }
.secao--clara{ background: var(--creme); color: var(--texto-sobre-claro); }
.secao--clara h1, .secao--clara h2, .secao--clara h3, .secao--clara h4{ color: var(--texto-escuro); }
.secao--suave{ background: var(--creme-suave); color: var(--texto-sobre-claro); }
.secao--suave h2, .secao--suave h3{ color: var(--texto-escuro); }
.secao--carvao{ background: var(--preto-suave); }

.rotulo{
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--taupe); margin-bottom: 1.1rem;
}
.rotulo::before{ content: ""; width: 26px; height: 1px; background: var(--taupe); }

.titulo-secao{
  font-size: clamp(1.85rem, 4vw, 2.9rem);
  line-height: 1.16; letter-spacing: -0.01em;
  max-width: 20ch; margin-bottom: 1.2rem;
}
.titulo-secao--largo{ max-width: 28ch; }

.texto-guia{ max-width: 58ch; font-size: clamp(0.98rem, 1.4vw, 1.06rem); }
.secao--clara .texto-guia, .secao--suave .texto-guia{ color: var(--texto-sobre-claro); }

.cabecalho-secao{ margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* ---------- Botões ---------- */
.botao{
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.75rem; border-radius: 999px;
  font-size: 0.94rem; font-weight: 500; letter-spacing: 0.02em;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.botao:active{ transform: scale(0.985); }
.botao--principal{ background: var(--taupe); color: var(--preto); }
.botao--principal:hover{ background: var(--taupe-claro); }
.botao--linha{ background: transparent; border-color: var(--borda-clara); color: var(--creme); }
.botao--linha:hover{ border-color: var(--taupe); color: var(--taupe-claro); }
.secao--clara .botao--linha, .secao--suave .botao--linha{ border-color: var(--borda-escura); color: var(--texto-escuro); }
.secao--clara .botao--linha:hover, .secao--suave .botao--linha:hover{ border-color: var(--taupe); color: var(--taupe); }
.grupo-botoes{ display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Cabeçalho ---------- */
.cabecalho{
  position: sticky; top: 0; z-index: 60;
  background: rgba(13,12,11,0.9);
  border-bottom: 1px solid var(--borda-clara);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cabecalho .container{
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  height: 74px;
}
/* Marca: logotipo oficial Le Contour Clinique */
.marca{ display: flex; align-items: center; flex-shrink: 0; }
.marca img{ height: 30px; width: auto; }
@media (max-width: 420px){ .marca img{ height: 25px; } }

.nav-principal{ display: none; }
.nav-principal ul{ display: flex; gap: 1.5rem; }
.nav-principal a{
  font-size: 0.86rem; color: rgba(245,239,228,0.78); white-space: nowrap;
  padding: 0.35rem 0; border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease;
}
.nav-principal a:hover{ color: var(--creme); border-color: var(--taupe); }
.nav-principal a[aria-current="page"]{ color: var(--creme); border-color: var(--taupe); }

.cabecalho-acoes{ display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
.cta-cabecalho{ display: none; padding: 0.72rem 1.35rem; font-size: 0.86rem; }

.botao-menu{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 1px solid var(--borda-clara); cursor: pointer;
}
.botao-menu span, .botao-menu span::before, .botao-menu span::after{
  content: ""; display: block; width: 17px; height: 1.5px; background: var(--creme);
  transition: transform .2s ease, background-color .2s ease;
}
.botao-menu span{ position: relative; }
.botao-menu span::before{ position: absolute; top: -6px; }
.botao-menu span::after{ position: absolute; top: 6px; }
.botao-menu[aria-expanded="true"] span{ background: transparent; }
.botao-menu[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(45deg); }
.botao-menu[aria-expanded="true"] span::after{ transform: translateY(-6px) rotate(-45deg); }

.menu-movel{
  position: fixed; inset: 74px 0 0 0; z-index: 59;
  background: var(--preto); overflow-y: auto;
  transform: translateX(100%); transition: transform .25s ease;
}
.menu-movel.aberto{ transform: translateX(0); }
.menu-movel .container{ display: flex; flex-direction: column; gap: 1.25rem; padding-top: 2.5rem; padding-bottom: 3rem; }
.menu-movel a:not(.botao){ font-family: var(--fonte-titulo); font-size: 1.35rem; color: var(--creme); }
.menu-movel .botao{ align-self: flex-start; margin-top: 0.75rem; }
.menu-movel .menu-divisor{ height: 1px; background: var(--borda-clara); margin: 0.35rem 0; }
.menu-movel .menu-secundario{ font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); font-family: var(--fonte-texto); }

@media (min-width: 1060px){
  .nav-principal{ display: block; }
  .cta-cabecalho{ display: inline-flex; }
  .botao-menu{ display: none; }
  .menu-movel{ display: none; }
}

/* ---------- Hero ---------- */
.hero{ padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5.5rem); position: relative; overflow: hidden; }
.hero::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--borda-clara), transparent);
}
.hero .container{ display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px){
  .hero .container{ grid-template-columns: 1fr 0.85fr; }
  .hero--institucional .container{ grid-template-columns: 1fr 1fr; }
}
.hero h1{
  font-size: clamp(2.15rem, 5.4vw, 3.6rem); line-height: 1.1; letter-spacing: -0.015em;
  margin-bottom: 1.25rem; max-width: 16ch;
}
.hero-assinatura{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.85rem;
  margin-bottom: 1.4rem; font-size: 0.9rem;
}
.hero-assinatura .nome{ font-family: var(--fonte-titulo); font-size: 1.1rem; color: var(--creme); }
.hero-assinatura .registro{ color: var(--taupe); letter-spacing: 0.08em; }
.hero-texto{ margin-bottom: 2rem; max-width: 52ch; }

/* Destaque do hero: uma chamada só, com a condição colada nela.
   Hierarquia por tipografia e por um filete taupe — sem selo nem pílula. */
.hero-destaque{
  margin: 0 0 2rem; padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--taupe);
  display: grid; gap: 0.35rem; max-width: 46ch;
}
.hero-destaque strong{
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.15;
  color: var(--creme);
}
.hero-destaque .condicao{
  font-size: 0.9rem; color: var(--taupe-claro); letter-spacing: 0.01em;
}
.hero-destaque .ressalva{
  font-size: 0.86rem; line-height: 1.6; color: rgba(242,238,233,0.62);
  margin-top: 0.35rem;
}
.secao--clara .hero-destaque strong, .secao--suave .hero-destaque strong{ color: var(--texto-escuro); }
.secao--clara .hero-destaque .condicao, .secao--suave .hero-destaque .condicao{ color: var(--taupe); }
.secao--clara .hero-destaque .ressalva, .secao--suave .hero-destaque .ressalva{ color: var(--texto-sobre-claro); }
/* margin:0 é necessário: <figure> tem margem própria do navegador (16px 40px),
   que encolhia o retrato e desalinhava a borda direita da coluna. */
.hero-retrato{ margin: 0; position: relative; border-radius: var(--raio); overflow: hidden; background: var(--preto-suave); }
.hero-retrato img{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; }
.hero-duplo{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.hero-duplo figure{ margin: 0; position: relative; border-radius: var(--raio); overflow: hidden; }
.hero-duplo img{ width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; }
.hero-duplo figcaption{
  position: absolute; inset: auto 0 0 0; padding: 1.6rem 0.9rem 0.85rem;
  background: linear-gradient(to top, rgba(13,12,11,0.92), rgba(13,12,11,0));
  font-size: 0.74rem; color: rgba(245,239,228,0.8);
}
.hero-duplo figcaption strong{
  display: block; font-family: var(--fonte-titulo); font-weight: 500; font-size: 0.98rem; color: var(--creme);
}
/* No celular, lado a lado deixaria os retratos pequenos demais. */
@media (max-width: 599px){
  .hero-duplo{ grid-template-columns: 1fr; gap: 1rem; }
  .hero-duplo img{ aspect-ratio: 5 / 4; object-position: center 22%; }
}
.hero-duplo figcaption a{ display: block; color: inherit; }
.hero-duplo figcaption a::after{ content: ""; position: absolute; inset: 0; }
.hero-duplo figure:hover figcaption strong{ color: var(--taupe-claro); }

/* Identificação do profissional acima de um grupo de resultados */
.cabecalho-profissional-bloco{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem;
  padding-bottom: 0.9rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--borda-clara);
}
.secao--clara .cabecalho-profissional-bloco,
.secao--suave .cabecalho-profissional-bloco{ border-color: var(--borda-escura); }
.subtitulo-resultados{ font-size: clamp(1.2rem, 2.4vw, 1.45rem); }
.assinatura-resultados{ font-size: 0.85rem; color: var(--taupe); letter-spacing: 0.04em; }

/* ---------- Faixa de destaque ---------- */
.faixa-destaque{
  border-top: 1px solid var(--borda-clara); border-bottom: 1px solid var(--borda-clara);
  background: var(--preto-suave); padding: 1.5rem 0;
}
.faixa-destaque .container{ display: grid; gap: 1.25rem; }
@media (min-width: 820px){ .faixa-destaque .container{ grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.faixa-item{ display: flex; gap: 0.85rem; align-items: flex-start; }
.faixa-item .marcador{ color: var(--taupe); font-size: 1rem; line-height: 1.5; flex-shrink: 0; }
.faixa-item strong{ display: block; color: var(--creme); font-weight: 500; font-size: 0.97rem; }
.faixa-item span{ font-size: 0.85rem; color: rgba(245,239,228,0.6); }

/* ---------- Galeria de resultados ---------- */
.filtros{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.filtros:last-of-type{ margin-bottom: 2rem; }
.filtros[hidden]{ display: none; }
/* Segundo grupo de filtros: discreto, com rótulo, para não competir com o primeiro. */
.filtros-rotulo{
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--taupe); margin-right: 0.35rem;
}
.filtros--publico .filtro{ font-size: 0.78rem; padding: 0.42rem 0.9rem; }
.filtro{
  padding: 0.5rem 1.05rem; border-radius: 999px; font-size: 0.82rem;
  background: transparent; border: 1px solid var(--borda-clara); color: rgba(245,239,228,0.7);
  cursor: pointer; transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.filtro:hover{ border-color: var(--taupe); color: var(--creme); }
.filtro[aria-pressed="true"]{ background: var(--taupe); border-color: var(--taupe); color: var(--preto); }
.secao--clara .filtro, .secao--suave .filtro{ border-color: var(--borda-escura); color: var(--texto-sobre-claro); }
.secao--clara .filtro[aria-pressed="true"], .secao--suave .filtro[aria-pressed="true"]{ color: var(--preto); }

.galeria{
  display: grid; gap: clamp(1.1rem, 2vw, 1.75rem);
  grid-template-columns: 1fr;
}
/* Duas e três colunas só quando cabem sem apertar a leitura. */
@media (min-width: 640px){ .galeria{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .galeria{ grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; } }

.caso{ margin: 0; display: flex; flex-direction: column; }
.caso[hidden]{ display: none; }
.caso-botao{
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  background: var(--preto-suave); border: 1px solid var(--borda-clara);
  border-radius: var(--raio); overflow: hidden;
  transition: border-color .2s ease;
}
.caso-botao:hover{ border-color: var(--taupe); }
.secao--clara .caso-botao, .secao--suave .caso-botao{ background: #e6ddcd; border-color: var(--borda-escura); }

.par{ position: relative; display: block; }
.par img{ width: 100%; display: block; }

/* No celular cada resultado ocupa a largura toda, na proporção original:
   imagem grande, sem moldura sobrando e sem miniatura apertada. */
@media (min-width: 640px){
  /* A partir de duas colunas a moldura é fixa, para os cartões alinharem.
     object-fit: contain preserva a proporção — nada é esticado nem cortado;
     a sobra fica no fundo discreto da paleta. */
  .par{ aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; }
  .par img{ width: 100%; height: 100%; object-fit: contain; }
  /* Comparações largas (2:1) ocupam duas colunas: a moldura acompanha o formato
     da imagem e quase não sobra fundo. */
  .caso--largo .par{ aspect-ratio: 40 / 19; }
}
@media (min-width: 1000px){
  .caso--largo{ grid-column: span 2; }
  /* Galeria só de comparações largas: duas colunas, sem span — assim não
     sobra coluna vazia ao lado de cada cartão. */
  .galeria--largas{ grid-template-columns: repeat(2, 1fr); }
  .galeria--largas .caso--largo{ grid-column: auto; }
}

.par::before, .par::after{
  position: absolute; z-index: 2;
  font-family: var(--fonte-texto); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.26rem 0.6rem; border-radius: 999px;
  background: rgba(13,12,11,0.62); color: rgba(245,239,228,0.92);
  backdrop-filter: blur(2px);
}
.par--lado-a-lado::before{ content: "Antes"; top: 0.55rem; left: 0.55rem; }
.par--lado-a-lado::after{ content: "Depois"; top: 0.55rem; right: 0.55rem; }
.par--empilhado::before{ content: "Antes"; top: 0.55rem; left: 0.55rem; }
.par--empilhado::after{ content: "Depois"; bottom: 0.55rem; left: 0.55rem; }

/* Só a região. A ordem antes/depois já está marcada sobre a imagem. */
.caso figcaption{ margin-top: 0.7rem; font-size: 0.86rem; }
.caso figcaption .regiao{ display: block; color: var(--creme); font-weight: 500; }
.secao--clara .caso figcaption .regiao, .secao--suave .caso figcaption .regiao{ color: var(--texto-escuro); }

.galeria-vazia{ margin-top: 1.5rem; font-size: 0.9rem; }

/* ---------- Depoimentos ---------- */
/* Os depoimentos são texto real: legíveis em qualquer tela, selecionáveis e
   acessíveis a leitores de tela. Os prints originais ficam no arquivo interno. */
.depoimento-cartao{
  margin: 0; display: flex; flex-direction: column; gap: 1.1rem;
  background: var(--creme); color: var(--texto-escuro);
  border: 1px solid var(--borda-clara); border-radius: var(--raio);
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
}
.depoimento-cartao[hidden]{ display: none; }
.secao--clara .depoimento-cartao, .secao--suave .depoimento-cartao{
  background: #fff; border-color: var(--borda-escura);
}
.depoimento-cartao blockquote{
  margin: 0; position: relative; padding-top: 1.5rem;
  font-size: 1.02rem; line-height: 1.75; color: var(--texto-escuro);
}
.depoimento-cartao blockquote::before{
  content: "\201C"; position: absolute; top: -0.4rem; left: -0.1rem;
  font-family: var(--fonte-titulo); font-size: 3.1rem; line-height: 1;
  color: var(--taupe);
}
.depoimento-cartao blockquote p{ margin: 0; }
.depoimento-cartao blockquote p + p{ margin-top: 0.85rem; }
/* Sobre o cartão creme, taupe puro ficava com contraste baixo demais
   para um texto pequeno em caixa alta. */
.depoimento-cartao figcaption{
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texto-sobre-claro); margin-top: auto; padding-top: 0.35rem;
}

/* ---------- Carrossel ---------- */
.carrossel{ max-width: 46rem; margin: 0 auto; }

/* Todos os depoimentos ocupam a mesma célula da grade: a altura do palco é a do
   maior deles, então a troca não muda a altura da página nem corta texto. */
/* overflow: hidden contém o deslocamento do slide que entra — sem ele o
   translate criaria área rolável lateral no celular. */
.carrossel-palco{ display: grid; overflow: hidden; border-radius: var(--raio); }
.carrossel-palco > *{
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateX(1.25rem);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.carrossel-palco > [data-ativo]{
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s ease, transform .5s ease, visibility 0s;
}

.carrossel-controles{
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; margin-top: 1.6rem; flex-wrap: wrap;
}
.carrossel-botao{
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--borda-clara);
  color: var(--creme); font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.secao--clara .carrossel-botao, .secao--suave .carrossel-botao{
  border-color: var(--borda-escura); color: var(--texto-escuro);
}
.carrossel-botao:hover{ border-color: var(--taupe); color: var(--taupe-claro); }
.secao--clara .carrossel-botao:hover, .secao--suave .carrossel-botao:hover{ color: var(--taupe); }
.carrossel-botao:focus-visible{ outline: 2px solid var(--taupe); outline-offset: 3px; }
.carrossel-botao--reproducao{ font-size: 0.72rem; letter-spacing: 0.05em; }

.carrossel-pontos{ display: flex; align-items: center; gap: 0.15rem; margin: 0 0.35rem; }
/* O ponto é pequeno, mas o alvo de toque tem 44px. */
.carrossel-ponto{
  width: 26px; height: 44px; padding: 0; border: 0; background: transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.carrossel-ponto::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(245,239,228,0.3); transition: background-color .2s ease, transform .2s ease;
}
.secao--clara .carrossel-ponto::before, .secao--suave .carrossel-ponto::before{
  background: rgba(84,80,72,0.28);
}
.carrossel-ponto:hover::before{ background: var(--taupe); }
.carrossel-ponto[aria-current="true"]::before{ background: var(--taupe); transform: scale(1.5); }
.carrossel-ponto:focus-visible{ outline: 2px solid var(--taupe); outline-offset: 0; border-radius: var(--raio); }

/* Carrossel de um item só: sem controles, sem passagem automática. */
.carrossel--unico .carrossel-controles{ display: none; }

@media (prefers-reduced-motion: reduce){
  .carrossel-palco > *{ transition: opacity .01s linear, visibility 0s linear .01s; transform: none; }
  .carrossel-palco > [data-ativo]{ transition: opacity .01s linear, visibility 0s; }
}

.acoes-galeria{ display: flex; justify-content: center; margin-top: 2rem; }
.acoes-galeria [hidden]{ display: none; }

/* ---------- Ambiente (consultório) ---------- */
/* Uma figura só, largura do container, proporção preservada. */
.ambiente{
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border-radius: var(--raio); overflow: hidden; background: var(--preto-suave);
}
.secao--clara .ambiente, .secao--suave .ambiente{ background: #e6ddcd; }
/* As fotos de sala são verticais: 4/3 mantém o armário, a mesa e as poltronas
   no quadro — o corte fica no teto e no piso, sem perder o ambiente. */
.ambiente img{
  width: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%;
}
@media (max-width: 700px){
  .ambiente img{ aspect-ratio: 5 / 4; }
}
.ambiente figcaption{
  padding: 0.8rem 1rem; font-size: 0.8rem; letter-spacing: 0.02em;
  color: rgba(245,239,228,0.6);
}
.secao--clara .ambiente figcaption,
.secao--suave .ambiente figcaption{ color: var(--texto-sobre-claro); }

/* ---------- Faixa de fotos da unidade ---------- */
.faixa-imagens{ margin-top: clamp(2rem, 4vw, 3rem); }
.faixa-imagens figure{
  margin: 0; border-radius: var(--raio); overflow: hidden;
  background: var(--preto-suave);
}
.faixa-imagens img{
  width: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
}
.faixa-imagens figcaption{
  padding: 0.75rem 0.1rem 0; font-size: 0.79rem;
  color: rgba(245,239,228,0.55); letter-spacing: 0.02em;
}
.secao--clara .faixa-imagens figcaption,
.secao--suave .faixa-imagens figcaption{ color: var(--texto-sobre-claro); }

/* Retrato conjunto dos profissionais */
/* Retrato de corpo inteiro: exibido na proporção original, sem recorte. */
.retrato-dupla{
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
  max-width: 460px;
  border-radius: var(--raio); overflow: hidden; background: var(--preto-suave);
}
.retrato-dupla img{ width: 100%; display: block; height: auto; }

/* ---------- Bloco de contexto clínico ---------- */
.contexto{
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  border: 1px solid var(--borda-clara); border-radius: var(--raio);
  padding: clamp(1.35rem, 3vw, 2rem);
  background: rgba(245,239,228,0.03);
}
.secao--clara .contexto, .secao--suave .contexto{ border-color: var(--borda-escura); background: rgba(33,31,28,0.03); }
.contexto h3{ font-size: 1.1rem; margin-bottom: 0.9rem; }
.contexto ul{ display: grid; gap: 0.7rem; }
.contexto li{ position: relative; padding-left: 1.1rem; font-size: 0.89rem; }
.contexto li::before{ content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--taupe); }

/* ---------- Lightbox ---------- */
.lightbox{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,7,7,0.975);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3.5rem, 8vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
}
.lightbox[hidden]{ display: none; }
.lightbox-figura{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-height: 100%; }
/* Nunca distorce: largura e altura livres, limitadas pela viewport. */
.lightbox-figura .par img{
  width: auto; height: auto;
  max-width: min(94vw, 820px); max-height: 72vh;
  border-radius: var(--raio);
}
/* Pares de origem pequena: ampliação moderada, sempre pela dimensão que não
   esbarra no limite oposto — a proporção nunca é alterada. */
.lightbox-figura .par--ampliar img{ width: min(94vw, 700px); }
@media (min-width: 600px){
  .lightbox-figura .par--ampliar-altura img{ height: min(72vh, 620px); }
}
.lightbox-legenda{ text-align: center; font-size: 0.86rem; color: rgba(245,239,228,0.72); max-width: 56ch; }
.lightbox-legenda strong{ display: block; color: var(--creme); font-weight: 500; font-size: 0.98rem; }
.lightbox-controles{
  position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.5rem;
}
.lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; gap: 0.5rem;
}
.lightbox-nav--anterior{ left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-nav--proximo{ right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-botao{
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(245,239,228,0.08); border: 1px solid rgba(245,239,228,0.28);
  color: var(--creme); font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .18s ease;
}
.lightbox-botao:hover{ background: rgba(245,239,228,0.18); }
.lightbox-contador{
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  font-size: 0.78rem; letter-spacing: 0.12em; color: rgba(245,239,228,0.5);
}

/* ---------- Conteúdo em colunas ---------- */
.colunas{ display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 760px){ .colunas--2{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px){ .colunas--3{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .colunas--4{ grid-template-columns: repeat(4, 1fr); } }

.cartao{ border-top: 1px solid var(--borda-clara); padding-top: 1.4rem; }
.secao--clara .cartao, .secao--suave .cartao{ border-color: var(--borda-escura); }
.cartao h3{ font-size: 1.12rem; margin-bottom: 0.55rem; }
.cartao p{ font-size: 0.92rem; }
.cartao .numero{
  display: block; font-family: var(--fonte-titulo); font-size: 0.85rem;
  color: var(--taupe); letter-spacing: 0.14em; margin-bottom: 0.7rem;
}

.midia-texto{ display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px){
  .midia-texto{ grid-template-columns: 0.9fr 1.1fr; }
  .midia-texto--invertido{ grid-template-columns: 1.1fr 0.9fr; }
  /* Variante sem figura: texto de apoio à esquerda, pontos à direita. */
  .midia-texto--texto{ grid-template-columns: 1fr 1fr; align-items: start; }
  .midia-texto--invertido .midia-texto-figura{ order: 2; }
}
.midia-texto-figura{ margin: 0; border-radius: var(--raio); overflow: hidden; background: var(--preto-suave); }
.midia-texto-figura img{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; }
.lista-marcada{ display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.lista-marcada li{ position: relative; padding-left: 1.4rem; font-size: 0.94rem; }
.lista-marcada li::before{
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 7px; height: 7px; border: 1px solid var(--taupe); transform: rotate(45deg);
}

/* ---------- Profissionais ---------- */
.profissional{ display: flex; flex-direction: column; }
.profissional-foto{ margin: 0 0 1.35rem; border-radius: var(--raio); overflow: hidden; background: var(--preto-suave); }
.profissional-foto img{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; }
.profissional h3{ font-size: 1.4rem; margin-bottom: 0.25rem; }
.profissional .registro{
  display: block; font-size: 0.84rem; color: var(--taupe); letter-spacing: 0.06em; margin-bottom: 1rem;
}
.profissional p{ font-size: 0.94rem; margin-bottom: 1.25rem; }
.profissional .grupo-botoes{ margin-top: auto; }

/* ---------- FAQ ---------- */
.faq{ max-width: 54rem; }
.faq-item{ border-bottom: 1px solid var(--borda-clara); }
.secao--clara .faq-item, .secao--suave .faq-item{ border-color: var(--borda-escura); }
/* Área de toque confortável (≥56px) e o texto todo clicável. */
.faq-item summary{
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.35rem 0.85rem 1.35rem 0; min-height: 56px; cursor: pointer; list-style: none;
  font-family: var(--fonte-titulo); font-size: clamp(1.04rem, 1.7vw, 1.18rem);
  line-height: 1.35; color: var(--creme);
  border-radius: var(--raio);
  transition: color .18s ease, background-color .18s ease;
}
.secao--clara .faq-item summary, .secao--suave .faq-item summary{ color: var(--texto-escuro); }
.faq-item summary:hover{ color: var(--taupe-claro); }
.secao--clara .faq-item summary:hover,
.secao--suave .faq-item summary:hover{ color: var(--taupe); }
/* Foco visível para quem navega pelo teclado. */
.faq-item summary:focus-visible{
  outline: 2px solid var(--taupe); outline-offset: 4px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
/* Sinal de abrir/fechar dentro de um alvo redondo, legível nos dois fundos. */
.faq-item summary::after{
  content: "+"; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--borda-clara);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-texto); font-size: 1.2rem; line-height: 1; color: var(--taupe);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.secao--clara .faq-item summary::after,
.secao--suave .faq-item summary::after{ border-color: var(--borda-escura); }
.faq-item summary:hover::after{ border-color: var(--taupe); }
.faq-item[open] summary::after{
  transform: rotate(45deg);
  background: var(--taupe); border-color: var(--taupe); color: var(--preto);
}
/* Resposta com contraste e respiro maiores que os do corpo do texto. */
.faq-item .resposta{
  padding: 0 3rem 1.6rem 0; font-size: 1rem; line-height: 1.72; max-width: 64ch;
  color: rgba(242,238,233,0.86);
}
.secao--clara .faq-item .resposta,
.secao--suave .faq-item .resposta{ color: var(--texto-escuro); }
.faq-item .resposta p + p{ margin-top: 0.85rem; }
@media (prefers-reduced-motion: reduce){
  .faq-item summary, .faq-item summary::after{ transition: none; }
}

/* ---------- Unidades ---------- */
.unidades{ display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 780px){ .unidades{ grid-template-columns: repeat(2, 1fr); } }
.unidade{
  border: 1px solid var(--borda-clara); border-radius: var(--raio);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.secao--clara .unidade, .secao--suave .unidade{ border-color: var(--borda-escura); }
.unidade .cidade{
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe);
}
.unidade h3{ font-family: var(--fonte-titulo); font-size: 1.28rem; margin: 0; }
.unidade address{ font-style: normal; font-size: 0.98rem; line-height: 1.65; }
.unidade .acoes{ display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 1.1rem; }
.unidade .acoes .botao{ font-size: 0.82rem; padding: 0.7rem 1.2rem; }

/* ---------- Contato / localização ---------- */
.contato-grade{ display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 860px){ .contato-grade{ grid-template-columns: 1.05fr 0.95fr; align-items: start; } }
.contato-dados{ display: grid; gap: 1.35rem; margin-top: 1.75rem; }
.contato-dados dt{ font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe); margin-bottom: 0.3rem; }
.contato-dados dd{ margin: 0; font-size: 0.98rem; color: var(--creme); }
.secao--clara .contato-dados dd, .secao--suave .contato-dados dd{ color: var(--texto-escuro); }

.encerramento{ text-align: center; }
.encerramento .titulo-secao{ margin-left: auto; margin-right: auto; max-width: 24ch; }
.encerramento .texto-guia{ margin: 0 auto 2rem; }
.encerramento .grupo-botoes{ justify-content: center; }

/* ---------- Rodapé ---------- */
.rodape{ background: var(--preto-suave); border-top: 1px solid var(--borda-clara); padding: clamp(2.75rem, 6vw, 4rem) 0 2rem; }
.rodape-grade{ display: grid; gap: 2.25rem; margin-bottom: 2.5rem; }
@media (min-width: 780px){ .rodape-grade{ grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape .marca{ margin-bottom: 1.2rem; }
.rodape .marca img{ height: 34px; }
.rodape h4{ font-family: var(--fonte-texto); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe); margin-bottom: 1.1rem; }
.rodape li{ margin-bottom: 0.6rem; font-size: 0.9rem; }
.rodape a:hover{ color: var(--creme); }
.rodape-base{
  border-top: 1px solid var(--borda-clara); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
  font-size: 0.78rem; color: rgba(245,239,228,0.42);
}
.rodape-aviso{ max-width: 62ch; font-size: 0.78rem; color: rgba(245,239,228,0.42); margin-top: 0.75rem; }

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-flutuante{
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--taupe); color: var(--preto);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  transition: background-color .2s ease, transform .15s ease;
}
.whatsapp-flutuante:hover{ background: var(--taupe-claro); transform: scale(1.04); }
@media (min-width: 1060px){ .whatsapp-flutuante{ right: 1.5rem; bottom: 1.5rem; } }
/* No celular, o botão flutuante não pode cobrir os links do rodapé. */
@media (max-width: 1059px){ .rodape{ padding-bottom: 5.5rem; } }

/* ---------- Animação discreta ---------- */
.surge{ opacity: 0; transform: translateY(14px); }
.surge.visivel{ opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

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

/* ---------- Aviso de cookies ---------- */
.aviso-cookies{
  position: fixed; z-index: 300; inset: auto 1rem 1rem 1rem;
  max-width: 40rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: 1.1rem 1.35rem;
  background: var(--preto-suave); border: 1px solid var(--borda-clara);
  border-radius: var(--raio);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.aviso-cookies p{ margin: 0; flex: 1 1 18rem; font-size: 0.86rem; line-height: 1.6; }
.aviso-cookies a{ color: var(--taupe-claro); text-decoration: underline; }
.aviso-cookies-acoes{ display: flex; gap: 0.6rem; flex: 0 0 auto; }
.aviso-cookies .botao{ padding: 0.6rem 1.1rem; font-size: 0.8rem; }
@media (max-width: 560px){
  .aviso-cookies{ inset: auto 0.75rem 0.75rem 0.75rem; }
  .aviso-cookies-acoes{ width: 100%; }
  .aviso-cookies-acoes .botao{ flex: 1; justify-content: center; }
}

/* ---------- Texto legal ---------- */
.texto-legal{ max-width: 62ch; }
.texto-legal h2{
  font-family: var(--fonte-titulo); font-size: 1.24rem;
  margin: 2.6rem 0 0.8rem; color: var(--creme);
}
.texto-legal h2:first-child{ margin-top: 0; }
.texto-legal p{ margin: 0 0 1rem; font-size: 1rem; line-height: 1.75; }
.texto-legal .lista-marcada{ margin-bottom: 1.5rem; }
/* Bloco que ainda depende de dado da clínica — visível de propósito. */
.texto-legal .pendente{
  border-left: 2px solid var(--taupe); padding: 0.9rem 0 0.9rem 1.15rem;
  background: rgba(165,153,136,0.07); font-size: 0.95rem;
}