/* ==========================================================================
   Dra. Clarice Pillon — folha de estilo única
   Mobile first. Só media queries min-width.

   A paleta vem do consultório dela: nogueira das divisórias, taupe das
   cadeiras, o verde-água do vidro dos armários. Nada de azul clínico.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
/* A paleta sai do logotipo dela: o preto do dente, o cinza do subtítulo
   e o azul da assinatura. O azul entra só em fios finos e ícones — nunca
   em áreas grandes nem em texto. */
:root {
  /* cor */
  --tinta:    #1a1a1a;   /* preto do logotipo — texto e seções escuras */
  --umbra:    #5e5e5e;   /* cinza — texto secundário */
  --azul:     #5898d8;   /* azul da assinatura — só detalhes finos */
  --azul-f:   #2f6ea8;   /* azul fundo, quando precisa de contraste em texto */
  --osso:     #faf9f7;   /* fundo da página */
  --concha:   #efedea;   /* faixa alternada */
  --linha:    #dcdad6;   /* fios de 1px */
  --branco:   #fff;

  /* tipo */
  --serifa: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:   "Karla", "Segoe UI", system-ui, sans-serif;

  /* escala fluida — terça maior no mobile, abrindo no desktop */
  --t-xs:  0.78rem;
  --t-sm:  0.875rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-md:  clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  /* títulos de card e de lista de tratamentos — mesmo corpo nos dois */
  --t-titulinho: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
  /* A Playfair tem altura-x alta e desenho largo: o mesmo px parece maior
     que numa garalda, então a escala de display recua um pouco. */
  /* --t-lg mantido no corpo em que os títulos de seção já estavam */
  --t-lg:  clamp(1.65rem, 1.4rem + 1.25vw, 2.4rem);
  --t-xl:  clamp(2rem, 1.55rem + 2.2vw, 3.3rem);
  --t-2xl: clamp(2.35rem, 1.45rem + 3.6vw, 4.6rem);

  /* espaço */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.25rem;
  --e-5: 3.5rem;
  --e-6: clamp(4rem, 8vw, 7.5rem);
  --e-7: clamp(5rem, 12vw, 11rem);

  /* medida */
  --calha: clamp(1.25rem, 5vw, 3.5rem);
  --max:   76rem;
  --texto-max: 62ch;

  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--osso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serifa);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

::selection { background: var(--azul); color: var(--osso); }

/* pular para o conteúdo */
.pular {
  position: absolute; left: var(--calha); top: 0;
  transform: translateY(-140%);
  background: var(--tinta); color: var(--osso);
  padding: 0.7rem 1.1rem; z-index: 200;
  text-decoration: none; font-size: var(--t-sm);
  transition: transform 0.2s var(--curva);
}
.pular:focus { transform: translateY(0.75rem); }

/* -------------------------------------------------------------- grade --- */
.faixa { padding-inline: var(--calha); }

.medida {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
}

.secao { padding-block: var(--e-6); }
.secao--curta { padding-block: var(--e-5); }

.secao--escura { background: var(--tinta); color: var(--osso); }
.secao--concha { background: var(--concha); }

/* --------------------------------------------------- título de seção ---- */
/* O fio curto antes do título é o "traço de medida": marca onde a seção
   começa, do mesmo jeito que uma análise facial marca um ponto. */
.rubrica {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}
.rubrica { --traco: 1; }
.rubrica::before {
  content: "";
  flex: none;
  width: clamp(1.5rem, 5vw, 3.25rem);
  height: 1px;
  background: var(--azul);
  transform: translateY(-0.45em) scaleX(var(--traco));
  transform-origin: left;
}
.rubrica > h2,
.rubrica > h1 { font-size: var(--t-lg); }
.secao--escura .rubrica::before { background: var(--azul); }

.entrada {
  max-width: var(--texto-max);
  color: var(--umbra);
  font-size: var(--t-md);
  line-height: 1.6;
}
.secao--escura .entrada { color: #b5b5b5; }

/* --------------------------------------------------------- cabeçalho ---- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--osso) 88%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--curva), background 0.3s var(--curva);
}
.cabecalho[data-rolou="sim"] {
  border-bottom-color: var(--linha);
  background: color-mix(in srgb, var(--osso) 96%, transparent);
}
/* sai de cena ao descer, volta ao subir */
.cabecalho { transform: translateY(0); transition: transform 0.4s var(--curva), border-color 0.3s var(--curva), background 0.3s var(--curva); }
.cabecalho[data-oculto="sim"] { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .cabecalho[data-oculto="sim"] { transform: none; }
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  min-height: 4.25rem;
  transition: min-height 0.3s var(--curva);
}
.cabecalho[data-rolou="sim"] .cabecalho__interno { min-height: 3.5rem; }

/* o logotipo original dela, sem recolorir */
.marca {
  display: inline-block;
  flex: none;
  line-height: 0;
  text-decoration: none;
}
.marca img {
  width: auto;
  height: 2.5rem;
  transition: height 0.3s var(--curva);
}
.cabecalho[data-rolou="sim"] .marca img { height: 2.1rem; }
@media (min-width: 48rem) {
  .marca img { height: 2.9rem; }
  .cabecalho[data-rolou="sim"] .marca img { height: 2.35rem; }
}
.rodape .marca img { height: 3rem; }

/* navegação */
.nav { display: none; }
.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  text-decoration: none;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  color: var(--umbra);
  padding-block: 0.4rem;
  transition: color 0.25s var(--curva);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--curva);
}
.nav__link:hover, .nav__link[aria-current] { color: var(--tinta); }
.nav__link:hover::after, .nav__link[aria-current]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* submenu de tratamentos */
.nav__ramo { position: relative; }
.nav__gaveta {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  translate: -50% 0;
  min-width: 17rem;
  background: var(--branco);
  border: 1px solid var(--linha);
  padding: 0.5rem;
  list-style: none;
  margin: 0;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  translate: -50% -6px;
  transition: opacity 0.22s var(--curva), translate 0.22s var(--curva), visibility 0.22s;
}
.nav__ramo:hover .nav__gaveta,
.nav__ramo:focus-within .nav__gaveta {
  opacity: 1; visibility: visible; translate: -50% 0;
}
.nav__gaveta a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--umbra);
  transition: background 0.2s var(--curva), color 0.2s var(--curva);
}
.nav__gaveta a:hover { background: var(--concha); color: var(--tinta); }

/* botão de menu no mobile */
.hamburguer {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hamburguer span {
  display: block;
  height: 1.5px;
  width: 22px;
  background: var(--tinta);
  transition: transform 0.3s var(--curva), opacity 0.2s var(--curva);
}
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.gaveta-mobile {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--curva);
  border-top: 1px solid transparent;
}
.gaveta-mobile[data-aberta="sim"] {
  grid-template-rows: 1fr;
  border-top-color: var(--linha);
}
.gaveta-mobile__caixa { overflow: hidden; }
.gaveta-mobile ul {
  list-style: none;
  margin: 0;
  padding: var(--e-2) 0 var(--e-3);
}
.gaveta-mobile li + li { border-top: 1px solid var(--linha); }
.gaveta-mobile a {
  display: block;
  padding: 0.85rem 0;
  text-decoration: none;
  font-size: var(--t-md);
  font-family: var(--serifa);
}
.gaveta-mobile .sub a {
  padding-left: var(--e-2);
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--umbra);
}

@media (min-width: 62rem) {
  .nav { display: block; }
  .hamburguer, .gaveta-mobile { display: none; }
}

/* ------------------------------------------------------------ botões ---- */
.btn {
  --btn-fundo: var(--tinta);
  --btn-tinta: var(--osso);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--btn-fundo);
  background: transparent;
  color: var(--btn-fundo);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
/* varredura de preenchimento a partir da base */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fundo);
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.4s var(--curva);
}
.btn { color: var(--btn-tinta); }
.btn:hover::before { transform: scaleY(0); }
.btn:hover { color: var(--btn-fundo); }

.btn--vazado { --btn-fundo: var(--tinta); color: var(--tinta); }
.btn--vazado::before { transform: scaleY(0); }
.btn--vazado:hover::before { transform: scaleY(1); }
.btn--vazado:hover { color: var(--osso); }

.secao--escura .btn { --btn-fundo: var(--osso); --btn-tinta: var(--tinta); }
.secao--escura .btn--vazado { color: var(--osso); }
.secao--escura .btn--vazado:hover { color: var(--tinta); }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* link com fio que cresce */
.fio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-size: var(--t-sm);
  letter-spacing: 0.03em;
  padding-bottom: 0.25rem;
  background-image: linear-gradient(var(--azul), var(--azul));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 1.75rem 1px;
  transition: background-size 0.4s var(--curva), color 0.25s var(--curva);
}
.fio:hover { background-size: 100% 1px; color: var(--azul-f); }
.secao--escura .fio:hover { color: var(--azul); }

/* --------------------------------------------------------------- hero --- */
.hero {
  position: relative;
  padding-top: var(--e-4);
  padding-bottom: var(--e-5);
}

.hero__grade {
  display: grid;
  gap: var(--e-4);
}

.hero__texto { position: relative; z-index: 2; }

.hero__sobrenome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  color: var(--umbra);
  margin-bottom: var(--e-2);
}
.hero__sobrenome::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--azul);
  flex: none;
}

.hero__titulo {
  font-size: var(--t-2xl);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: var(--e-3);
}
.hero__titulo em {
  font-style: italic;
  font-weight: 400;
}

.hero__resumo {
  max-width: 34ch;
  color: var(--umbra);
  font-size: var(--t-md);
  margin-bottom: var(--e-4);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
}

/* a imagem: retrato alto; o título passa por cima da borda esquerda dela */
.hero__figura {
  position: relative;
  margin: 0;
  justify-self: start;
  width: min(100%, 24rem);
}
.hero__figura picture { display: block; height: 100%; }
.hero__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 32%;
  filter: saturate(0.9) contrast(1.03);
}
/* o único elemento que atravessa a borda da foto */
.hero__selo {
  position: absolute;
  left: 0;
  bottom: var(--e-3);
  background: var(--azul-f);
  color: #eef4fb;
  padding: 0.8rem 1.05rem 0.85rem;
  font-size: var(--t-xs);
  line-height: 1.3;
  letter-spacing: 0.04em;
  max-width: 11rem;
  box-shadow: 0 18px 38px -26px rgba(0, 0, 0, 0.55);
}
.hero__selo b {
  display: block;
  font-family: var(--serifa);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--osso);
  margin-bottom: 0.15rem;
}

@media (min-width: 48rem) {
  .hero__grade {
    grid-template-columns: 1fr minmax(17rem, 21rem);
    align-items: center;
    gap: var(--e-4);
  }
  .hero__figura {
    width: 100%;
    justify-self: stretch;
    aspect-ratio: 3 / 4.15;
  }
  /* a sobreposição: o selo sai da foto e entra na coluna do texto */
  .hero__selo { left: 0; transform: translateX(-38%); }
}

@media (min-width: 62rem) {
  .hero { padding-top: var(--e-5); padding-bottom: var(--e-5); }
  .hero__grade { grid-template-columns: 1fr 23rem; gap: var(--e-5); }
  .hero__figura { aspect-ratio: 3 / 4.3; }
  .hero__selo { transform: translateX(-45%); }
}

/* ---------------------------------------------------------- credenciais - */
.credenciais {
  border-block: 1px solid var(--linha);
  padding-block: var(--e-3);
}
.credenciais__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: var(--e-3) var(--e-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Todos os selos ocupam a mesma caixa: os que são imagem e os que são
   texto. Sem isso o Invisalign fica minúsculo ao lado do DSD. */
.credenciais__item {
  display: grid;
  grid-template-rows: 2.25rem auto;
  align-content: start;
  gap: 0.4rem;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--umbra);
  line-height: 1.35;
}
.credenciais__marca {
  display: flex;
  align-items: center;
  height: 2.25rem;
}
.credenciais__marca img {
  width: auto;
  max-width: 9.5rem;
  height: auto;
  max-height: 2.25rem;
  object-fit: contain;
  object-position: left center;
}
.credenciais__item strong {
  display: flex;
  align-items: center;
  height: 2.25rem;
  font-family: var(--serifa);
  font-size: clamp(1.05rem, 0.88rem + 0.55vw, 1.32rem);
  font-weight: 400;
  color: var(--tinta);
  line-height: 1.1;
  white-space: nowrap;
}

/* --------------------------------------------------------- tratamentos -- */
.destaques {
  display: grid;
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
@media (min-width: 40rem) { .destaques { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .destaques { grid-template-columns: repeat(4, 1fr); } }

.destaque {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  background: var(--osso);
  padding: var(--e-3);
  text-decoration: none;
  overflow: hidden;
  transition: background 0.4s var(--curva);
}
.destaque:hover { background: var(--branco); }

.destaque__miniatura {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.5s var(--curva), transform 0.5s var(--curva);
}
.destaque:hover .destaque__miniatura {
  filter: grayscale(0) contrast(1);
  transform: scale(1.06);
}

.destaque__nome {
  font-family: var(--serifa);
  font-size: var(--t-titulinho);
  line-height: 1.15;
}
.destaque__texto {
  font-size: var(--t-sm);
  color: var(--umbra);
  line-height: 1.55;
  margin: 0;
}
.destaque__seta {
  margin-top: auto;
  padding-top: var(--e-2);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  color: var(--azul-f);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--curva), transform 0.35s var(--curva);
}
.destaque:hover .destaque__seta,
.destaque:focus-visible .destaque__seta { opacity: 1; transform: translateY(0); }

/* lista completa: linhas que abrem no hover */
.indice { border-top: 1px solid var(--linha); }
.indice__item { border-bottom: 1px solid var(--linha); }
.indice__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-3) 0;
  text-decoration: none;
  transition: padding-left 0.4s var(--curva), color 0.3s var(--curva);
}
.indice__link:hover { padding-left: var(--e-2); color: var(--azul-f); }
/* mesmo corpo dos títulos dentro dos cards, para a seção ficar harmônica */
.indice__nome {
  font-family: var(--serifa);
  font-size: var(--t-titulinho);
  line-height: 1.15;
}
.indice__nota {
  margin-left: auto;
  flex: none;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--umbra);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s var(--curva), transform 0.35s var(--curva);
}
.indice__link:hover .indice__nota { opacity: 1; transform: translateX(0); }

/* ---------------------------------------------------------- consultório - */
/* A rubrica fica fora da grade, acima das duas colunas, para os dois
   textos começarem na mesma linha. */
.consultorio__topo {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}
@media (min-width: 56rem) {
  .consultorio__topo { grid-template-columns: 1.1fr 1fr; gap: var(--e-6); align-items: start; }
  /* a coluna da direita é de apoio: começa junto, mas em corpo menor */
  .consultorio__topo > :last-child { padding-top: 0.35rem; }
}

.prosa { max-width: var(--texto-max); }
.prosa p + p { margin-top: 1.1em; }
.prosa--destaque p:first-child { font-size: var(--t-md); }

/* legenda que sobe por cima da foto */
.galeria__legenda {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--e-3) var(--e-2) var(--e-2);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  color: var(--osso);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-align: left;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s var(--curva), transform 0.4s var(--curva);
}
/* ------------------------------------------------------------ carrossel -- */
/* Trilho com scroll-snap nativo: o toque e o teclado funcionam sozinhos,
   as setas só chamam scrollBy. `--visiveis` diz quantos cabem por vez. */
.carrossel { position: relative; --visiveis: 1.15; --vao: var(--e-2); }

.carrossel__trilho {
  display: flex;
  gap: var(--vao);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--calha));
  padding-inline: var(--calha);
  padding-bottom: 2px;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carrossel__trilho { scroll-behavior: auto; } }

.carrossel__item {
  flex: 0 0 calc((100% - (var(--visiveis) - 1) * var(--vao)) / var(--visiveis));
  scroll-snap-align: start;
  min-width: 0;
}

.carrossel__controles {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--e-3);
}
.carrossel__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--linha);
  color: var(--tinta);
  cursor: pointer;
  transition: background 0.3s var(--curva), border-color 0.3s var(--curva), color 0.3s var(--curva);
}
.carrossel__btn:hover:not(:disabled) { background: var(--tinta); border-color: var(--tinta); color: var(--osso); }
.carrossel__btn:disabled { opacity: 0.3; cursor: default; }
.carrossel__btn svg { width: 1rem; height: 1rem; }
.secao--escura .carrossel__btn { border-color: rgba(255, 255, 255, 0.28); color: var(--osso); }
.secao--escura .carrossel__btn:hover:not(:disabled) { background: var(--osso); color: var(--tinta); }

/* barra de progresso fininha, no azul do logotipo */
.carrossel__medida {
  position: absolute;
  left: 0;
  bottom: 0.9rem;
  width: min(9rem, 40%);
  height: 1px;
  background: var(--linha);
}
.carrossel__medida span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--azul);
  transition: width 0.35s var(--curva);
}
.secao--escura .carrossel__medida { background: rgba(255, 255, 255, 0.2); }

@media (min-width: 40rem) { .carrossel { --visiveis: 2.2; } }
@media (min-width: 56rem) { .carrossel { --visiveis: 3; } }
@media (min-width: 72rem) { .carrossel { --visiveis: 4; } }

/* Mesma construção dos cards de Tratamentos: caixas encostadas uma na
   outra, separadas por um fio de 1px em vez de espaço. */
.carrossel--depoimentos { --visiveis: 1.08; --vao: 0px; }
@media (min-width: 40rem) { .carrossel--depoimentos { --visiveis: 2; } }
@media (min-width: 64rem) { .carrossel--depoimentos { --visiveis: 3; } }
@media (min-width: 76rem) { .carrossel--depoimentos { --visiveis: 4; } }

.carrossel--depoimentos .depoimento {
  border-left-width: 0;
  min-height: 16rem;
}
.carrossel--depoimentos .carrossel__item:first-child .depoimento { border-left-width: 1px; }

/* A citação mais longa tem o dobro das outras. Sem um teto, ela esticaria
   as quatro caixas e o conjunto voltaria a ficar comprido. O corte só
   atinge essa citação; as outras cinco cabem inteiras. */
.carrossel--depoimentos blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}

/* foto dentro do carrossel */
.carrossel__foto {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--concha);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 4;
}
.carrossel__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--curva);
}
.carrossel__foto:hover img { transform: scale(1.04); }
.carrossel__foto .galeria__legenda { opacity: 0; }
.carrossel__foto:hover .galeria__legenda,
.carrossel__foto:focus-visible .galeria__legenda { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------- lightbox */
.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--calha);
  background: color-mix(in srgb, var(--tinta) 94%, transparent);
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--curva);
}
.visor[data-aberto="sim"] { opacity: 1; pointer-events: auto; }
.visor img {
  max-width: min(100%, 60rem);
  max-height: 82vh;
  width: auto;
  object-fit: contain;
  transform: scale(0.97);
  transition: transform 0.4s var(--curva);
}
.visor[data-aberto="sim"] img { transform: scale(1); }
.visor__legenda {
  position: absolute;
  left: var(--calha);
  bottom: var(--calha);
  color: var(--concha);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
}
.visor__btn {
  position: absolute;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--osso);
  cursor: pointer;
  transition: background 0.25s var(--curva), border-color 0.25s var(--curva);
}
.visor__btn:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--osso); }
.visor__btn[data-acao="fechar"] { top: var(--calha); right: var(--calha); }
.visor__btn[data-acao="anterior"] { left: var(--calha); top: 50%; translate: 0 -50%; }
.visor__btn[data-acao="proxima"] { right: var(--calha); top: 50%; translate: 0 -50%; }
@media (max-width: 48rem) {
  /* a legenda e as setas ficam embaixo, fora da imagem */
  .visor { align-content: start; padding-top: 5rem; }
  .visor img { max-height: 62vh; }
  .visor__btn[data-acao="anterior"] { left: var(--calha); top: auto; bottom: var(--calha); translate: 0; }
  .visor__btn[data-acao="proxima"] { right: var(--calha); top: auto; bottom: var(--calha); translate: 0; }
  .visor__legenda {
    left: 50%;
    translate: -50% 0;
    bottom: calc(var(--calha) + 3.75rem);
    text-align: center;
    width: min(90%, 28rem);
  }
}

/* ------------------------------------------------------------- perfil --- */
/* A seção Perfil vira um bloco com foto de fundo: o clima do Instagram
   dela (botânico, neutro, luz suave) atrás de um véu escuro que segura a
   leitura. O véu é mais fechado do lado do texto e abre à direita. */
.secao--perfil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --fundoY: 0%;
}
/* a foto vive no ::before para poder deslizar devagar no scroll */
.secao--perfil::before {
  content: "";
  position: absolute;
  inset: -8% 0;
  z-index: -2;
  background-image: image-set(
    url("/assets/img/perfil-fundo-900.webp") 1x,
    url("/assets/img/perfil-fundo-1600.webp") 2x
  );
  background-size: cover;
  background-position: center;
  transform: translate3d(0, var(--fundoY), 0);
  will-change: transform;
}
/* e o véu escuro por cima dela */
.secao--perfil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--tinta) 96%, transparent) 0%,
    color-mix(in srgb, var(--tinta) 92%, transparent) 42%,
    color-mix(in srgb, var(--tinta) 72%, transparent) 100%
  );
}

.perfil { display: grid; gap: var(--e-4); }
@media (min-width: 56rem) {
  .perfil { grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); gap: var(--e-5); }
}

.titulacao { list-style: none; margin: 0; padding: 0; }
.titulacao li {
  position: relative;
  padding: 0.85rem 0 0.85rem var(--e-3);
  border-bottom: 1px solid color-mix(in srgb, var(--linha) 60%, transparent);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.secao--escura .titulacao li { border-bottom-color: rgba(255, 255, 255, 0.14); color: #b5b5b5; }
.titulacao li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: var(--e-2);
  height: 1px;
  background: var(--azul);
}
.titulacao b {
  font-weight: 500;
  color: var(--tinta);
}
.secao--escura .titulacao b { color: var(--osso); }
.titulacao .ano {
  display: inline-block;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--azul);
  margin-left: 0.4rem;
}

/* --------------------------------------------------------- depoimentos -- */
.depoimentos {
  display: grid;
  gap: var(--e-2);
}
@media (min-width: 48rem) { .depoimentos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .depoimentos { grid-template-columns: repeat(3, 1fr); } }

.depoimento {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  height: 100%;
  padding: var(--e-3);
  background: var(--branco);
  border: 1px solid var(--linha);
  transition: border-color 0.4s var(--curva), box-shadow 0.4s var(--curva);
}
.depoimento:hover {
  border-color: var(--azul);
  box-shadow: 0 18px 40px -32px rgba(0, 0, 0, 0.5);
}

/* Corpo pequeno de propósito: são seis citações lado a lado, não um
   manifesto. O que precisa de presença é a quantidade, não o tamanho. */
.depoimento blockquote {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--umbra);
}
.depoimento figcaption {
  margin-top: auto;
  padding-top: var(--e-2);
  border-top: 1px solid var(--linha);
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  color: var(--tinta);
}

.nota-google {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--t-sm);
  color: var(--umbra);
}
.nota-google b {
  font-family: var(--serifa);
  font-size: 2rem;
  font-weight: 400;
  color: var(--tinta);
  letter-spacing: -0.03em;
}

/* ------------------------------------------------------------ contato --- */
.contato { display: grid; gap: var(--e-4); }
@media (min-width: 56rem) { .contato { grid-template-columns: 1fr 1fr; gap: var(--e-6); } }

.dados { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.dados dt {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  color: var(--azul);
  margin-bottom: 0.3rem;
}
/* mesma fonte e corpo do texto corrido do site — telefone e endereço
   são informação para ler, não título */
.dados dd {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
}
.dados dd a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left 92%;
  background-size: 0 1px;
  transition: background-size 0.4s var(--curva);
}
.dados dd a:hover { background-size: 100% 1px; }
.dados dd small {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--umbra);
  margin-top: 0.15rem;
}

.mapa {
  width: 100%;
  min-height: 20rem;
  height: 100%;
  border: 1px solid var(--linha);
  filter: grayscale(1) contrast(0.92);
  transition: filter 0.6s var(--curva);
}
.mapa:hover { filter: grayscale(0) contrast(1); }

/* ------------------------------------------------------------- rodapé --- */
.rodape {
  background: var(--tinta);
  color: #a8a8a8;
  padding-block: var(--e-5) var(--e-3);
  font-size: var(--t-sm);
}
.rodape a { color: var(--concha); text-decoration: none; }
.rodape a:hover { color: var(--branco); }

.rodape__grade {
  display: grid;
  gap: var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 48rem) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-5); } }

.rodape h3 {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--azul);
  margin-bottom: var(--e-2);
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2);
  padding-top: var(--e-3);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: #8a8a8a;
}

.sociais { display: flex; gap: var(--e-2); }
.sociais a {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.3s var(--curva), background 0.3s var(--curva);
}
.sociais a:hover { border-color: var(--osso); background: rgba(255, 255, 255, 0.08); }
.sociais svg { width: 1.05rem; height: 1.05rem; }

/* ------------------------------------------------------- whatsapp fixo -- */
/* Discreto: círculo pequeno que só abre o rótulo no hover. O site antigo
   tinha uma barra verde que cobria o texto o tempo todo. */
.zap {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  background: var(--tinta);
  color: var(--osso);
  border-radius: 50%;
  text-decoration: none;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.6);
  transform: translateY(1.5rem);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--curva), opacity 0.45s var(--curva), background 0.3s var(--curva);
}
.zap[data-visivel="sim"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
.zap:hover { background: var(--azul-f); }
.zap svg { width: 1.45rem; height: 1.45rem; flex: none; }
/* o rótulo vive só para leitor de tela: o botão é um círculo limpo */
.zap span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------- páginas internas (tratamento) */
.capa {
  position: relative;
  padding-top: var(--e-5);
  padding-bottom: var(--e-5);
  background: var(--concha);
  overflow: hidden;
}
.capa__grade { display: grid; gap: var(--e-3); }
.migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--umbra);
  list-style: none;
  margin: 0 0 var(--e-2);
  padding: 0;
}
.migalhas li + li::before { content: "/"; margin-right: 0.5rem; color: var(--azul); }
.migalhas a { text-decoration: none; }
.migalhas a:hover { color: var(--azul-f); }

.capa__titulo {
  font-size: var(--t-xl);
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.capa__resumo { max-width: 52ch; color: var(--umbra); font-size: var(--t-md); }

@media (min-width: 56rem) {
  .capa__grade { grid-template-columns: 1.25fr 1fr; align-items: end; gap: var(--e-5); }
  .capa__resumo { padding-bottom: 0.4rem; }
}

/* corpo de artigo */
.artigo {
  max-width: var(--texto-max);
  font-size: var(--t-base);
  line-height: 1.75;
}
.artigo > * + * { margin-top: 1.15em; }

/* A abertura da página puxa o olho: corpo maior, respiro maior. */
.artigo--abertura {
  max-width: 66ch;
  margin-inline: auto;
  font-size: var(--t-md);
  line-height: 1.65;
}
.artigo--abertura > * + * { margin-top: 1em; }

/* Cada seção do tratamento é uma faixa de largura total com fundo
   próprio, alternando — o mesmo ritmo da home. O texto fica centrado
   numa medida legível; as figuras e citações extrapolam essa medida,
   então a faixa não vira uma coluna com vazio ao lado. */
.bloco { padding-block: var(--e-5); }
.bloco .rubrica { justify-content: center; margin-bottom: var(--e-4); }
.bloco .rubrica > h2 { font-size: var(--t-lg); text-align: center; }
.bloco .artigo { margin-inline: auto; }

/* Figuras e citações passam da medida do texto e ficam centradas: a
   margem negativa sai do cálculo, sem precisar de valor fixo. */
.bloco .artigo figure,
.bloco .artigo blockquote {
  --larg: min(46rem, 100% + 2 * var(--e-4), 100vw - 2 * var(--calha));
  width: var(--larg);
  max-width: none;
  margin-inline: calc((100% - var(--larg)) / 2);
}
.bloco .artigo blockquote { --larg: min(48rem, 100vw - 2 * var(--calha)); }


.artigo h3 {
  font-size: var(--t-md);
  margin-top: 1.9em;
}
.artigo strong { font-weight: 600; }
.artigo ul { padding-left: 1.1rem; }
.artigo li { margin-bottom: 0.4em; }
.artigo li::marker { color: var(--azul); }
/* As imagens do acervo têm resoluções muito diferentes (de 170px a 780px).
   Nunca ampliar: renderiza no tamanho natural, limitado pela coluna.
   Sem painel de fundo — a imagem assenta direto sobre a seção. */
.artigo figure {
  margin: 2.6em 0;
  padding: 0;
  background: none;
}
.artigo figure img {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.artigo figcaption {
  margin-top: 0.8rem;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--umbra);
  text-align: center;
}
.artigo blockquote {
  margin: 2em 0;
  padding-left: var(--e-3);
  border-left: 2px solid var(--azul);
  font-family: var(--serifa);
  font-size: var(--t-md);
  font-style: italic;
  line-height: 1.5;
  color: var(--tinta);
}

/* --------------------------------------------------- faixa de imagem --- */
/* A imagem do tratamento vira uma faixa larga entre a abertura e o
   primeiro bloco, em vez de flutuar numa segunda coluna. */
.faixa-imagem {
  margin: var(--e-5) 0 0;
  padding: 0;
  overflow: hidden;
}
.faixa-imagem img {
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
  object-position: center;
}
.faixa-imagem figcaption {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--e-2) 0 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--umbra);
}

/* Imagem pequena do acervo antigo: fica contida, no tamanho natural,
   logo abaixo da abertura. Esticar 170px na largura da tela borraria. */
.figura-abertura {
  width: fit-content;
  max-width: 100%;
  margin: var(--e-4) auto 0;
  padding: 0;
}
.figura-abertura img { width: auto; max-width: 100%; display: block; }
.figura-abertura figcaption {
  max-width: 44ch;
  margin-top: 0.8rem;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--umbra);
}

/* ---------------------------------------------------------- sumário ---- */
/* Atalhos para as seções, quando a página tem três ou mais. */
.sumario {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 66ch;
  margin: var(--e-4) auto 0;
  padding-top: var(--e-3);
  border-top: 1px solid var(--linha);
}
.sumario a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--umbra);
  transition: border-color 0.3s var(--curva), color 0.3s var(--curva), background 0.3s var(--curva);
}
.sumario a:hover {
  border-color: var(--azul);
  color: var(--tinta);
  background: var(--branco);
}

/* próximos tratamentos */
.adjacentes {
  display: grid;
  gap: 1px;
  background: var(--linha);
  border-block: 1px solid var(--linha);
}
@media (min-width: 40rem) { .adjacentes { grid-template-columns: 1fr 1fr; } }
.adjacente {
  background: var(--osso);
  padding: var(--e-3) var(--e-2);
  text-decoration: none;
  display: grid;
  gap: 0.35rem;
  transition: background 0.35s var(--curva);
}
.adjacente:hover { background: var(--concha); }
.adjacente small { font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--azul-f); }
.adjacente b {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: var(--t-md);
  letter-spacing: -0.015em;
}
.adjacente--fim { text-align: right; }

/* ------------------------------------------------------------ formação -- */
.linha-tempo { border-top: 1px solid var(--linha); }
.linha-tempo__item {
  display: grid;
  gap: 0.2rem var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linha);
}
@media (min-width: 40rem) {
  .linha-tempo__item { grid-template-columns: 7rem 1fr; align-items: baseline; }
}
.linha-tempo__ano {
  font-family: var(--serifa);
  font-size: var(--t-md);
  color: var(--azul-f);
  letter-spacing: -0.01em;
}
.linha-tempo__texto { font-size: var(--t-sm); line-height: 1.55; }
.linha-tempo__texto b { font-weight: 600; }
.linha-tempo__carga { color: var(--umbra); }

/* ------------------------------------------------------------- erro 404 - */
.erro {
  min-height: 70vh;
  display: grid;
  align-content: center;
  gap: var(--e-3);
  text-align: left;
}
.erro__numero {
  font-family: var(--serifa);
  font-size: clamp(5rem, 22vw, 14rem);
  font-style: italic;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--azul);
}

/* ------------------------------------------------ revelação no scroll --- */
/* Reserva: quando o GSAP carrega, ele assume e estas regras só dão o
   estado inicial. Sem JavaScript nenhum, nada disso se aplica e o
   conteúdo aparece normalmente — daí o escopo em `.js`. */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
  transition-delay: var(--atraso, 0ms);
}
.js [data-revelar][data-visto="sim"] { opacity: 1; transform: none; }

/* o traço da rubrica desenha junto */
.js .rubrica[data-revelar] { --traco: 0; transition: --traco 0.8s var(--curva) 0.15s; }
.js .rubrica[data-revelar][data-visto="sim"] { --traco: 1; }
@property --traco { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --fundoY { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

/* Com o GSAP no comando, a transição do CSS só atrapalharia: ele escreve
   o estilo quadro a quadro. */
.gsap [data-revelar],
.gsap .rubrica[data-revelar] { transition: none; }

/* ------------------------------------------- barra de progresso do scroll */
.progresso {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--azul);
  pointer-events: none;
}

/* ---------------------------------------------------- texto em palavras -- */
/* O divisor de palavras embrulha cada uma num span para o GSAP escalonar. */
.palavra {
  display: inline-block;
  white-space: pre-wrap;
}

/* abertura do hero: uma sequência só, no carregamento */
.hero__texto > *,
.hero__figura { opacity: 0; }
.js .hero[data-pronto="sim"] .hero__sobrenome { animation: sobe 0.75s var(--curva) 0.05s both; }
.js .hero[data-pronto="sim"] .hero__titulo    { animation: sobe 0.85s var(--curva) 0.14s both; }
.js .hero[data-pronto="sim"] .hero__resumo    { animation: sobe 0.8s var(--curva) 0.28s both; }
.js .hero[data-pronto="sim"] .hero__acoes     { animation: sobe 0.8s var(--curva) 0.38s both; }
/* a cortina vai no wrapper da imagem, não na figura — senão o clip-path
   que sobra do fill-mode recorta o selo que atravessa a borda */
.js .hero[data-pronto="sim"] .hero__figura { opacity: 1; }
.js .hero[data-pronto="sim"] .hero__figura picture { animation: cortina 1.1s var(--curva) 0.2s both; }
/* só opacidade: animar `transform` aqui apagaria o translateX do selo */
.js .hero[data-pronto="sim"] .hero__selo { animation: surge 0.7s var(--curva) 0.75s both; }
.hero__selo { opacity: 0; }
.no-js .hero__texto > *, .no-js .hero__figura, .no-js .hero__selo { opacity: 1; }

@keyframes sobe {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cortina {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes surge {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-revelar] { opacity: 1; transform: none; }
  .js .rubrica[data-revelar] { --traco: 1; }
  .hero__texto > *, .hero__figura, .hero__selo { opacity: 1; }
  .secao--perfil { --fundoY: 0% !important; }
  .progresso { display: none; }
}

/* ---------------------------------------------------------- utilitários - */
.vis-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.empilha { display: grid; gap: var(--e-3); }
.empilha--larga { gap: var(--e-4); }
.centraliza-fim { display: flex; justify-content: flex-end; }
.mt-5 { margin-top: var(--e-5); }
.mt-4 { margin-top: var(--e-4); }
.mt-3 { margin-top: var(--e-3); }