/* =========================================================
   Instituto Sauté — camada do site.
   Os fundamentos (cores, tipografia, espaçamento, raios,
   sombras, movimento) vêm do design system, em assets/ds/.
   Aqui só existe o que é específico desta página.
   ========================================================= */

/* ---------- Layout base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O base.css do design system não zera figure/blockquote, e a margem
   padrão do navegador abre um vão branco em volta das fotos. */
figure,
blockquote {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Links do design system trazem sublinhado dourado por padrão, e dentro de
   navegação isso vira ruído. Botões ficam de fora desta lista: neles a borda
   de baixo não é sublinhado, é um dos lados da caixa — zerá-la deixava o
   botão vazado com apenas três lados. O `border` do próprio .btn já vence o
   seletor `a` do design system. */
a.nav__link,
a.marca,
a.rodape__link,
a.link-seta {
  border-bottom: 0;
}

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

.secao {
  padding-block: var(--section-y);
}
.secao--compacta {
  padding-block: var(--section-y-compact);
}

/* Só dois tons de fundo na página, conforme o design system. */
.secao--subtil {
  background: var(--bg-subtle);
}

.pular-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--space-4) var(--space-6);
  background: var(--neutral-900);
  color: var(--text-inverse);
  font: var(--type-label);
  border-bottom: 0;
}
.pular-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* ---------- Ícones (Lucide, pintados por máscara como no DS) ---------- */
.icone {
  /* Padrão vazio: sem ele, uma classe de ícone inexistente deixa a máscara
     indefinida e o elemento vira um quadrado sólido no meio da interface.
     Assim, o que falha some em vez de aparecer errado. */
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
.icone--sm {
  width: 16px;
  height: 16px;
}
.icone--lg {
  width: 24px;
  height: 24px;
}
.icone--xl {
  width: 32px;
  height: 32px;
}

.i-check { --icone: url("../img/icons/check.svg"); }
.i-circle-check { --icone: url("../img/icons/circle-check.svg"); }
.i-clock { --icone: url("../img/icons/clock.svg"); }
.i-map-pin { --icone: url("../img/icons/map-pin.svg"); }
.i-phone { --icone: url("../img/icons/phone.svg"); }
.i-mail { --icone: url("../img/icons/mail.svg"); }
.i-message-circle { --icone: url("../img/icons/message-circle.svg"); }
.i-whatsapp { --icone: url("../img/icons/whatsapp.svg"); }
.i-arrow-right { --icone: url("../img/icons/arrow-right.svg"); }
.i-external-link { --icone: url("../img/icons/external-link.svg"); }
/* Lucide não vinha no conjunto copiado do design system; desenhado no
   mesmo padrão (grade 24, traço 2, juntas arredondadas). */
.i-instagram { --icone: url("../img/icons/instagram.svg"); }
.i-plus { --icone: url("../img/icons/plus.svg"); }
.i-quote { --icone: url("../img/icons/quote.svg"); }
.i-leaf { --icone: url("../img/icons/leaf.svg"); }
.i-sparkles { --icone: url("../img/icons/sparkles.svg"); }
.i-stethoscope { --icone: url("../img/icons/stethoscope.svg"); }
.i-syringe { --icone: url("../img/icons/syringe.svg"); }
.i-scan-face { --icone: url("../img/icons/scan-face.svg"); }
.i-droplet { --icone: url("../img/icons/droplet.svg"); }
.i-heart { --icone: url("../img/icons/heart.svg"); }
.i-users { --icone: url("../img/icons/users.svg"); }
.i-user { --icone: url("../img/icons/user.svg"); }
.i-calendar { --icone: url("../img/icons/calendar.svg"); }
.i-star { --icone: url("../img/icons/star.svg"); }

/* ---------- Tipografia de seção ---------- */
.overline {
  display: block;
  font: var(--type-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-gold);
}
.overline--inverso {
  color: var(--gold-400);
}

.titulo-secao {
  font: var(--type-h-l);
  letter-spacing: var(--ls-h-l);
  color: var(--text-primary);
  margin-top: var(--space-5);
  max-width: 18ch;
}
.titulo-secao em {
  font-style: italic;
  color: var(--gold-700);
}
/* Título que é uma frase inteira precisa de mais linha antes de quebrar. */
.titulo-secao--longo {
  max-width: 26ch;
}

.intro-secao {
  font: var(--type-body-lg);
  color: var(--text-body);
  margin-top: var(--space-5);
  max-width: 58ch;
}

.cabecalho-secao {
  margin-bottom: var(--space-10);
}
.cabecalho-secao--centro {
  text-align: center;
}
.cabecalho-secao--centro .titulo-secao,
.cabecalho-secao--centro .intro-secao {
  margin-inline: auto;
}

/* Fundo escuro — uma única faixa por página (o rodapé). */
.inverso {
  background: var(--bg-inverse);
  color: rgba(248, 245, 240, 0.72);
}
.inverso .titulo-secao {
  color: var(--offwhite);
}
.inverso .intro-secao {
  color: rgba(248, 245, 240, 0.78);
}

/* Régua dourada sob os títulos de seção. */
.regua-ouro {
  width: 48px;
  height: 1px;
  /* O navegador dá margin-inline:auto a <hr>, o que centraliza a régua
     mesmo em cabeçalhos alinhados à esquerda. */
  margin: var(--space-6) 0 0;
  background: var(--gold-500);
  border: 0;
}
.cabecalho-secao--centro .regua-ouro {
  margin-inline: auto;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 44px;
  padding: 0 var(--space-7);
  font: var(--type-button);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  transition: var(--transition-control), transform var(--dur-fast) var(--ease-standard);
}
.btn:active {
  transform: scale(var(--press-scale));
}
.btn--lg {
  height: 54px;
  padding: 0 var(--space-8);
  font-size: 15px;
}
.btn--sm {
  height: 36px;
  padding: 0 18px;
  font-size: 12px;
}

/* Ouro é material: o primário usa a folha, nunca o chapado. */
.btn--primario {
  background: var(--gradient-gold);
  color: var(--text-on-gold);
  box-shadow: var(--shadow-1);
}
/* O `a:hover` do design system repinta a borda de baixo; cada variante fixa a
   própria cor no hover para que ela não vaze. */
.btn--primario:hover {
  filter: saturate(1.06) brightness(1.03);
  box-shadow: var(--shadow-2);
  border-color: transparent;
}

.btn--secundario {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn--secundario:hover {
  border-color: var(--border-gold);
  color: var(--text-gold);
}

.btn--contorno {
  background: transparent;
  color: var(--text-gold);
  border-color: var(--border-gold);
}
/* O --gold-50 quase não se distinguia do fundo claro do botão e o hover
   passava despercebido. O --gold-200 é o passo mais forte que ainda mantém o
   rótulo dourado acima de 4,5 de contraste. */
.btn--contorno:hover {
  background: var(--gold-200);
  border-color: var(--gold-500);
}

.btn--inverso {
  background: transparent;
  color: var(--offwhite);
  border-color: rgba(248, 245, 240, 0.5);
}
.btn--inverso:hover {
  background: rgba(248, 245, 240, 0.1);
  border-color: rgba(248, 245, 240, 0.5);
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-gold);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-gold);
  transition: var(--transition-control), gap var(--dur-fast) var(--ease-standard);
}
.link-seta:hover {
  color: var(--text-link-hover);
  border-bottom-color: var(--gold-600);
  gap: var(--space-4);
}

/* ---------- Marca ---------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.marca__simbolo {
  height: 46px;
  width: auto;
}
/* "Instituto" empilhado sobre a assinatura, como no lockup oficial. O
   entreletras vem do token do logotipo, não de um valor arbitrário. */
.marca__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.marca__instituto {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--ls-logotype);
  text-transform: uppercase;
  color: var(--gold-700);
  /* O entreletras acrescenta um vão à direita da última letra; compensa
     para o texto alinhar com a assinatura abaixo. */
  margin-right: calc(var(--ls-logotype) * -1);
}
.marca__assinatura {
  height: 29px;
  width: auto;
  /* O base.css do design system dá max-width:100% a toda imagem. Aqui a
     coluna é medida pelo texto "Instituto", mais estreito que a
     assinatura, e o limite espremia o logotipo com a altura fixa. */
  max-width: none;
}
/* O rodapé é escuro: o lockup dourado precisa ganhar brilho. */
.marca--clara img {
  filter: brightness(1.28);
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(248, 245, 240, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}
.header.is-fixo {
  background: rgba(248, 245, 240, 0.88);
  backdrop-filter: blur(var(--blur-sheet));
  -webkit-backdrop-filter: blur(var(--blur-sheet));
  border-bottom-color: var(--border-hairline);
}
.header__interno {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-desktop);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin-left: auto;
}
.nav__link {
  font: var(--type-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-body);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: var(--transition-control);
}
.nav__link:hover,
.nav__link.is-ativo {
  color: var(--text-gold);
  border-bottom-color: var(--gold-500);
}

.header__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.hamburguer {
  display: none;
  width: var(--touch-min);
  height: var(--touch-min);
  align-items: center;
  justify-content: center;
  color: var(--text-body);
}
.hamburguer .icone {
  width: 24px;
  height: 24px;
}
.hamburguer[aria-expanded="true"] .i-menu,
.hamburguer[aria-expanded="false"] .i-x {
  display: none;
}
.i-menu { --icone: url("../img/icons/menu.svg"); }
.i-x { --icone: url("../img/icons/x.svg"); }

/* ---------- Hero ---------- */
/* A fotografia da recepção ocupa a capa inteira, sem recorte lateral: o texto
   fica na metade esquerda e um véu na cor da página garante a leitura. */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + var(--space-11));
  padding-bottom: var(--section-y);
  background: var(--bg-page);
}
.hero__fundo {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Véu: opaco atrás do texto, quase limpo sobre o logotipo e o sofá. O degradê
   de baixo entrega o hero na cor da seção seguinte. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(248, 245, 240, 0.96) 0%,
      rgba(248, 245, 240, 0.9) 7%,
      rgba(248, 245, 240, 0.45) 13%,
      rgba(248, 245, 240, 0) 22%),
    linear-gradient(180deg, rgba(248, 245, 240, 0) 85%, var(--bg-page) 100%),
    linear-gradient(100deg,
      rgba(248, 245, 240, 0.985) 0%,
      rgba(248, 245, 240, 0.98) 30%,
      rgba(248, 245, 240, 0.97) 54%,
      rgba(248, 245, 240, 0.55) 66%,
      rgba(248, 245, 240, 0.3) 78%,
      rgba(248, 245, 240, 0.24) 100%);
}
/* Sobre fotografia o botão vazado perde contraste: no hero ele ganha
   superfície própria, mantendo o desenho vazado do resto do site. */
.hero .btn--contorno {
  background: rgba(248, 245, 240, 0.97);
}
/* O --text-gold (#8E6F43) rende 4,29 mesmo sobre o fundo liso — abaixo do
   mínimo de 4,5 para texto pequeno. Sobre fotografia não há véu que conserte
   isso, então os rótulos miúdos do hero usam o passo escuro da mesma escala. */
.hero .overline,
.hero .btn--contorno {
  color: var(--gold-800);
}
.hero .btn--contorno:hover {
  background: var(--gold-200);
}
.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 54%);
  align-items: center;
  gap: var(--space-10);
  min-height: min(74vh, 640px);
  align-content: center;
}
.hero__titulo {
  font: var(--type-h-xl);
  letter-spacing: var(--ls-h-xl);
  margin-top: var(--space-6);
}
.hero__titulo em {
  font-style: italic;
  color: var(--gold-700);
}
.hero__sub {
  font: var(--type-body-lg);
  color: var(--text-body);
  margin-top: var(--space-6);
  max-width: 48ch;
}
.hero__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}
/* ---------- Pilares de confiança ---------- */
/* Segue o mesmo ritmo das demais seções: com padding próprio, esta faixa
   abria um vão diferente do resto da página. */
.pilares {
  padding-block: var(--section-y);
  background: var(--bg-subtle);
}
.pilares__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-9);
}
.pilar {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.pilar .icone {
  color: var(--gold-600);
}
.pilar__titulo {
  font: var(--type-h-xs);
}
.pilar__desc {
  font: var(--type-small);
  color: var(--text-body);
}

/* ---------- Sobre ---------- */
/* Os quatro blocos são filhos diretos da grade para poderem ser reordenados no
   celular. Em duas colunas a foto ocupa a coluna da esquerda inteira e os
   outros três empilham à direita — o espaçamento vertical entre eles vem das
   margens de cada um, por isso o row-gap é zero. */
.sobre__grade {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  column-gap: var(--space-10);
  row-gap: 0;
  align-items: start;
}
.sobre__identidade {
  grid-column: 2;
  grid-row: 1;
}
.sobre__texto {
  grid-column: 2;
  grid-row: 2;
}
.citacao {
  grid-column: 2;
  grid-row: 3;
}
.sobre__moldura {
  grid-column: 1;
  grid-row: 1 / span 3;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-media);
  overflow: hidden;
  background-image: url("../img/brand/texture-marble-warm.jpg");
  background-size: cover;
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
}
.sobre__moldura img {
  position: absolute;
  inset: var(--space-5);
  width: calc(100% - var(--space-5) * 2);
  height: calc(100% - var(--space-5) * 2);
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.sobre__identidade {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--space-7);
}
.sobre__nome {
  font: var(--type-h-l);
  letter-spacing: var(--ls-h-l);
  margin-top: var(--space-4);
}
.sobre__credencial {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font: var(--type-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.selo--ouro {
  background: var(--gradient-gold);
  color: var(--text-on-gold);
  font-weight: var(--fw-bold);
}
.selo--vazado {
  border: 1px solid var(--border-default);
  color: var(--text-body);
}
.selo--verde {
  background: var(--green-100);
  color: var(--green-800);
}

.sobre__texto p + p {
  margin-top: var(--space-5);
}
.sobre__texto p {
  color: var(--text-body);
}

.citacao {
  margin: var(--space-8) 0 0;
  padding: var(--space-7);
  background: var(--bg-subtle);
  border-left: 1px solid var(--gold-500);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.citacao p {
  font: var(--type-h-s);
  font-style: italic;
  color: var(--text-primary);
}

/* ---------- Formações ---------- */
.formacoes {
  margin-top: var(--space-12);
}
.formacoes__titulo {
  font: var(--type-h-m);
  letter-spacing: var(--ls-h-m);
  margin-top: var(--space-4);
}
.formacoes__nota {
  font: var(--type-small);
  color: var(--text-muted);
  margin-top: var(--space-4);
  margin-bottom: var(--space-8);
}
.formacoes__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-5);
}

/* ---------- Card base do design system ---------- */
.cartao {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  transition: var(--transition-surface);
}
.cartao--interativo:hover {
  transform: var(--lift-hover);
  box-shadow: var(--shadow-3);
}
/* Cards de destaque trocam a hairline pela dourada e ganham fundo mármore. */
.cartao--destaque {
  background: var(--marble-100);
  border-color: var(--border-gold);
}

.formacao {
  display: flex;
  gap: var(--space-5);
  padding: var(--pad-card);
}
.formacao .icone {
  color: var(--gold-600);
}
.formacao__nome {
  font: var(--type-h-xs);
}
.formacao__meta {
  font: var(--type-caption);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.formacao__tag {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  color: var(--gold-800);
  /* Era 11px: abaixo do menor degrau da escala e do limite de leitura
     confortável, ainda por cima em caixa alta e com entreletras. */
  font: var(--type-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- Equipe ---------- */
.equipe__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-7);
}
.medica {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.medica__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface-sunken);
  overflow: hidden;
}
.medica__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.medica__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--pad-card);
}
.medica__nome {
  font: var(--type-h-xs);
}
.medica__area {
  font: var(--type-small);
  color: var(--text-gold);
  margin-top: var(--space-3);
}
.medica__registro {
  font: var(--type-caption);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.medica__bio {
  font: var(--type-small);
  color: var(--text-body);
  margin-top: var(--space-5);
  flex: 1;
}
.medica__curriculo {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
}
.medica__curriculo li {
  display: flex;
  gap: var(--space-3);
  font: var(--type-caption);
  color: var(--text-body);
}
.medica__curriculo .icone {
  color: var(--green-500);
  margin-top: 3px;
}

/* ---------- Especialidades ---------- */
.especialidades__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-7);
}
.especialidade {
  padding: var(--pad-card-lg);
}
.especialidade .icone {
  color: var(--gold-600);
}
.especialidade__titulo {
  font: var(--type-h-s);
  margin-top: var(--space-5);
}
.especialidade__desc {
  font: var(--type-small);
  color: var(--text-body);
  margin-top: var(--space-4);
}

/* ---------- Procedimentos ---------- */
.procedimentos__grupo + .procedimentos__grupo {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--divider);
}
.procedimentos__cabecalho {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
.procedimentos__titulo {
  font: var(--type-h-m);
  letter-spacing: var(--ls-h-m);
}
.procedimentos__responsavel {
  font: var(--type-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.procedimentos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
  gap: var(--space-5);
}
.procedimento {
  padding: var(--space-6);
}
.procedimento__nome {
  font: var(--type-h-xs);
}
.procedimento__desc {
  font: var(--type-small);
  color: var(--text-body);
  margin-top: var(--space-3);
}
.aviso {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding: var(--space-6);
  background: var(--surface-accent);
  border-radius: var(--radius-card);
  font: var(--type-small);
  color: var(--text-body);
}
.aviso .icone {
  color: var(--nude-700);
}

/* ---------- Depoimentos ---------- */
.depoimentos__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: var(--space-7);
}
.depoimento {
  display: flex;
  flex-direction: column;
  padding: var(--pad-card);
}
.depoimento .icone--quote {
  color: var(--gold-400);
}
.depoimento__texto {
  font: var(--type-body);
  font-style: italic;
  color: var(--text-body);
  margin-top: var(--space-5);
  flex: 1;
}
.depoimento__autoria {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font: var(--type-label);
  color: var(--text-primary);
}
.depoimento__origem {
  font: var(--type-caption);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------- Como funciona ---------- */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--space-9);
  counter-reset: passo;
}
/* O CTA que fecha a seção não pertence a nenhum dos passos: fica centralizado
   sob os três. */
.passos__acao {
  margin-top: var(--space-9);
  text-align: center;
}
.passo {
  position: relative;
  padding-top: var(--space-7);
  border-top: 1px solid var(--divider);
  counter-increment: passo;
}
.passo::before {
  content: "0" counter(passo);
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: 0;
  padding-right: var(--space-4);
  /* Tapa a linha do topo atrás do número: precisa ser o fundo da seção
     onde "como funciona" está, hoje o claro. */
  background: var(--bg-page);
  font: var(--type-h-s);
  font-size: 18px;
  color: var(--gold-700);
}
.passo__titulo {
  font: var(--type-h-xs);
}
.passo__desc {
  font: var(--type-small);
  color: var(--text-body);
  margin-top: var(--space-4);
}

/* ---------- FAQ ---------- */
.faq {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.faq__item {
  border-bottom: 1px solid var(--border-hairline);
}
.faq__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-6) 0;
  text-align: left;
  font: var(--type-h-xs);
  color: var(--text-primary);
  transition: var(--transition-control);
}
.faq__botao:hover {
  color: var(--text-gold);
}
.faq__botao .icone {
  color: var(--gold-600);
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq__botao[aria-expanded="true"] .icone {
  transform: rotate(45deg);
}
.faq__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-standard);
}
.faq__resposta[data-aberto="true"] {
  grid-template-rows: 1fr;
}
.faq__resposta > div {
  overflow: hidden;
}
.faq__resposta p {
  padding-bottom: var(--space-6);
  font: var(--type-body);
  color: var(--text-body);
  max-width: 62ch;
}

/* ---------- Contato ---------- */
.contato {
  background: var(--bg-marble);
}
.contato__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.contato__acoes {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}
.contato__dados {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-9);
}
.dado {
  display: flex;
  gap: var(--space-5);
}
.dado .icone {
  color: var(--gold-700);
  margin-top: 3px;
}
.dado__rotulo {
  font: var(--type-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.dado__valor {
  font: var(--type-body);
  color: var(--text-primary);
  margin-top: var(--space-2);
}
.redes-sociais {
  display: grid;
  gap: var(--space-2);
}
.redes-sociais a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
}

.mapa {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-media);
  overflow: hidden;
  border: 1px solid var(--border-gold);
}
.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.7);
}

/* ---------- Rodapé (a única faixa escura da página) ---------- */
.rodape {
  background: var(--neutral-900);
  color: rgba(248, 245, 240, 0.72);
  padding-block: var(--section-y) var(--space-8);
}
.rodape__topo {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-9);
}
.rodape__desc {
  font: var(--type-small);
  max-width: 34ch;
  margin-top: var(--space-6);
}
.rodape__titulo {
  display: block;
  font: var(--type-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--space-5);
}
.rodape__lista {
  display: grid;
  gap: var(--space-4);
}
.rodape__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--type-small);
  color: rgba(248, 245, 240, 0.72);
  transition: var(--transition-control);
}
.rodape__link:hover {
  color: var(--gold-300);
}
.rodape__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(248, 245, 240, 0.12);
  font: var(--type-caption);
  color: rgba(248, 245, 240, 0.5);
}
.rodape__crm {
  color: var(--gold-400);
  letter-spacing: var(--ls-label);
}

/* ---------- WhatsApp flutuante ---------- */
.zap-flutuante {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  min-width: 56px;
  padding: 0 22px 0 18px;
  border-radius: var(--radius-pill);
  background: var(--gradient-gold);
  color: var(--text-on-gold);
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  box-shadow: var(--shadow-4);
  border-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out);
}
.zap-flutuante.is-visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.zap-flutuante:hover {
  filter: saturate(1.06) brightness(1.03);
  color: var(--text-on-gold);
}

/* ---------- Conteúdo pendente ---------- */
/* Marcação temporária: fica evidente para não ir ao ar sem preenchimento. */
[data-pendente] {
  outline: 1px dashed var(--nude-500);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
[data-pendente]::after {
  content: "a definir";
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--nude-200);
  color: var(--nude-800);
  font: var(--type-caption);
  font-size: 10px;
  font-weight: var(--fw-bold);
  font-style: normal;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  vertical-align: middle;
}

/* Fotografia ainda não fornecida: o quadro fica identificado, na mesma
   lógica do [data-pendente] do texto. */
/* Sem position aqui: os quadros que usam este marcador já são blocos
   posicionados, e forçar `relative` quebraria o recorte do hero. */
[data-foto-pendente]::after {
  content: "Fotografia " attr(data-foto-pendente);
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--overlay);
  color: var(--offwhite);
  font: var(--type-caption);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
}

/* ---------- Revelação ao rolar ---------- */
/* Só esconde se o JavaScript estiver ativo (classe .js no html). */
.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.js .revelar.is-visivel {
  opacity: 1;
  transform: none;
}

/* Pares de botões lado a lado ficam do mesmo tamanho. A grade em linha se
   ajusta ao rótulo mais largo em vez de a uma medida fixa, então continua
   valendo se o texto mudar. Abaixo de 768px eles empilham em largura
   total e a regra sai de cena. */
@media (min-width: 769px) {
  .hero__acoes,
  .contato__acoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* A coluna do contato é mais estreita que a do hero, e no respiro cheio o
     rótulo mais longo não caberia em metade dela. */
  .contato__acoes .btn--lg {
    padding: 0 var(--space-6);
  }
}

/* =========================================================
   Responsivo — 12 / 8 / 4 colunas do design system
   ========================================================= */

/* O ritmo vertical é redefinido no próprio token, não regra a regra: assim
   hero, faixa de pilares, seções e rodapé encolhem juntos e o vão entre
   quaisquer duas seções continua igual em qualquer largura. */
@media (max-width: 1024px) {
  :root { --section-y: var(--section-y-compact); }
}
@media (max-width: 768px) {
  :root { --section-y: var(--section-y-mobile); }
}

/* Faixa em que o menu de desktop ainda aparece mas o espaçamento largo
   não cabe: são seis itens, dois deles palavras longas. Aperta o respiro
   antes de trocar pelo menu mobile, logo abaixo. */
@media (max-width: 1160px) {
  .header__interno {
    gap: var(--space-6);
  }
  .nav {
    gap: var(--space-5);
  }
  .nav__link {
    font-size: 13px;
  }
}

@media (max-width: 1024px) {
  .container,
  .header__interno {
    padding-inline: var(--margin-tablet);
  }
  /* A fotografia continua sendo a capa, como no desktop. Sem coluna livre à
     direita o texto passa por cima dela, então o véu deixa de ser lateral e
     passa a ser vertical: fecha atrás do texto e abre numa faixa de respiro
     ao pé do hero. O enquadramento encosta na margem direita, que é onde
     estão a parede do logotipo e o sofá. */
  .hero__fundo {
    object-position: 88% center;
  }
  .hero__grade {
    grid-template-columns: 1fr;
    gap: var(--space-9);
    min-height: 0;
    align-content: start;
  }
  /* Duas camadas em vez de uma: a horizontal fecha atrás do texto, que aqui
     encosta na margem esquerda, e a vertical abre para o pé do hero. Somadas
     dão ~0,91 sobre a coluna de texto e ~0,25 no canto inferior direito, onde
     ficam o sofá e o logotipo. Com o dourado escuro nos rótulos, isso mantém
     tudo acima de 4,5 sem apagar a fotografia. */
  .hero::after {
    background:
      linear-gradient(95deg,
        rgba(248, 245, 240, 0.8) 0%,
        rgba(248, 245, 240, 0.75) 55%,
        rgba(248, 245, 240, 0.2) 80%,
        rgba(248, 245, 240, 0.05) 100%),
      linear-gradient(180deg,
        rgba(248, 245, 240, 0.55) 0%,
        rgba(248, 245, 240, 0.5) 55%,
        rgba(248, 245, 240, 0.3) 78%,
        rgba(248, 245, 240, 0.2) 100%);
  }
  /* No tablet o texto continua ao lado da foto: as colunas só estreitam. */
  .sobre__grade {
    grid-template-columns: 0.62fr 1fr;
    column-gap: var(--space-8);
  }
  .contato__grade {
    grid-template-columns: 1fr;
  }
  .pilares__grade {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
  }
  .rodape__topo {
    grid-template-columns: 1fr 1fr;
  }
  .titulo-secao,
  .sobre__nome {
    font-size: 40px;
  }
  /* Os subtítulos internos precisam encolher junto, senão alcançam o título
     da seção e a hierarquia se perde. */
  .procedimentos__titulo,
  .formacoes__titulo {
    font-size: 28px;
  }
  .hero__titulo {
    font-size: var(--fs-h-l);
  }
}

@media (max-width: 1120px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: var(--space-2) var(--margin-mobile) var(--space-6);
    background: rgba(248, 245, 240, 0.97);
    backdrop-filter: blur(var(--blur-sheet));
    -webkit-backdrop-filter: blur(var(--blur-sheet));
    border-bottom: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-standard),
      transform var(--dur-base) var(--ease-standard),
      visibility var(--dur-base) var(--ease-standard);
  }
  .nav.is-aberto {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__link {
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    font-size: var(--fs-body);
    border-bottom: 1px solid var(--border-hairline);
    padding-bottom: 0;
  }
  .hamburguer {
    display: inline-flex;
  }
  .header__interno {
    gap: var(--space-5);
  }
  /* Com o menu virando position:fixed, ele sai do fluxo e o margin-left:auto
     dele deixa de empurrar as ações para a direita — sobrava um vão à direita
     e tudo ficava amontoado à esquerda. Agora é o bloco de ações que empurra. */
  .header__acoes {
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  /* Barra condensada do design system. Redefinir o token faz a âncora do
     scroll e o topo do menu mobile acompanharem sozinhos. */
  :root {
    --header-h: var(--header-h-condensed);
  }
  /* A marca acompanha a barra menor, senão ocupa quase toda a altura. */
  .marca__simbolo {
    height: 38px;
  }
  .marca__instituto {
    font-size: 10px;
  }
  .marca__assinatura {
    height: 24px;
  }
  .container,
  .header__interno {
    padding-inline: var(--margin-mobile);
  }
  .pilares__grade {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .rodape__topo {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .rodape__base {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  /* Na coluna única o botão grande ocupa a largura toda. Vale para os três
     CTAs da página — hero, como funciona e contato — senão cada um para numa
     distância diferente da margem direita. */
  .btn--lg {
    width: 100%;
  }
  /* O título da página estava a 34px e os das seções a 32: 6% de diferença,
     ou seja, nenhuma hierarquia. Descendo as seções para o degrau seguinte da
     escala, a razão volta a 1,31 — a mesma do desktop (64/48). */
  .hero__titulo {
    font-size: var(--fs-h-m);
  }
  /* Papel inteiro, não só o tamanho: o --type-h-l traz peso 300, que o design
     system reserva para 48px e acima. Aplicado a 26px o título ficava fino e
     perdia presença justamente contra o subtítulo, que é peso 400. */
  .titulo-secao,
  .sobre__nome {
    font: var(--type-h-s);
    letter-spacing: var(--ls-h-s);
  }
  /* A 22px o subtítulo ficava a 18% do título da seção, e mais pesado que ele:
     os dois liam como o mesmo nível. A 20px a razão vai a 1,30, igual à que
     separa o título da página do título de seção. */
  .procedimentos__titulo,
  .formacoes__titulo {
    font-size: 20px;
  }
  /* Com as seções em 26px, o título de item desce um degrau para não encostar
     nos subtítulos de 22px. */
  :root {
    --fs-h-xs: 19px;
  }
  .especialidade {
    padding: var(--pad-card);
  }
  /* Largura de celular: coluna única, na ordem em que os blocos aparecem no
     HTML — identidade, foto, texto e citação. */
  .sobre__grade {
    grid-template-columns: 1fr;
  }
  .sobre__identidade,
  .sobre__texto,
  .citacao,
  .sobre__moldura {
    grid-column: 1;
    grid-row: auto;
  }
  /* A imagem dentro da moldura é absoluta, então o bloco não tem largura
     própria: sem o width explícito ele encolheria a zero fora do stretch. */
  .sobre__moldura {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 400px;
    justify-self: center;
    margin-bottom: var(--space-8);
  }
  .citacao {
    padding: var(--space-6);
  }
  .citacao p {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  /* Só o rótulo some. O ícone também é um span, e a regra sem ressalva
     escondia os dois — o botão virava um círculo dourado vazio. */
  .zap-flutuante > span:not(.icone) {
    display: none;
  }
  .zap-flutuante {
    padding: 0;
    justify-content: center;
  }
  .marca__simbolo {
    height: 30px;
  }
  .marca__instituto {
    font-size: 8.5px;
    letter-spacing: 0.22em;
    margin-right: -0.22em;
  }
  .marca__texto {
    gap: 2px;
  }
  .marca__assinatura {
    height: 19px;
  }
  .marca {
    gap: var(--space-3);
  }
}

/* Telas baixas: celular deitado, tablet em paisagem, janela curta. A capa
   inteira não cabe e o CTA principal cairia abaixo da dobra, que é
   justamente o que o site precisa entregar primeiro. */
@media (max-height: 560px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--space-6));
    padding-bottom: var(--space-8);
  }
  .hero__grade {
    min-height: 0;
    gap: var(--space-6);
  }
  .hero__sub {
    margin-top: var(--space-4);
  }
  .hero__acoes {
    margin-top: var(--space-6);
  }
}
/* Telas muito estreitas (Galaxy Fold fechado, zoom alto). */
@media (max-width: 340px) {
  /* Rótulos como "Agendar avaliação" não quebram linha e, no tamanho grande,
     pedem mais largura do que a coluna tem. Vale para todos os botões
     grandes: hero, como funciona e contato. */
  .btn--lg {
    padding: 0 var(--space-4);
    font-size: 13px;
  }
}

@media print {
  .header,
  .zap-flutuante,
  .mapa {
    display: none;
  }
}