@charset "UTF-8";
/* ==========================================================================
   Estética Simone Dante — folha de estilo única
   Mobile-first. Paleta e tipografia extraídas da referência visual da marca.
   Sumário:
     01 Fontes            08 Sobre             14 FAQ
     02 Tokens            09 Encontre o seu…   15 Localização
     03 Base              10 Procedimentos     16 Rodapé
     04 Tipografia        11 Antes e depois    17 Barra fixa e movimento
     05 Cabeçalho         12 Promoções do mês  18 Sem JavaScript
     06 Hero              13 Linha de produtos 19 Blocos recolhíveis
     07 Agenda
   ========================================================================== */

/* 01 — FONTES ============================================================= */

@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-variable-latin.woff2') format('woff2-variations');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-variable-latin.woff2') format('woff2-variations');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 02 — TOKENS ============================================================= */

:root {
  /* Marrons */
  --espresso-900: #120a05;
  --espresso-800: #1a0f0a;
  --espresso-700: #241610;
  --espresso-600: #2b1810;
  --marrom-500: #4a2e1f;
  --marrom-400: #6b4a32;

  /* Dourados e cremes */
  --dourado-700: #8a6a14; /* único dourado legível como texto sobre creme */
  --dourado-500: #c9a227;
  --dourado-400: #d4af6a;
  --dourado-300: #e8cc8f;
  --tan-300: #c4a57b;
  --creme-200: #efe5d6;
  --creme-100: #f7f1e7;
  --creme-50: #fdfbf7;

  --erro: #b3423a;
  --sucesso: #4a7c59;

  /* Papéis semânticos — seções escuras */
  --fundo-escuro: var(--espresso-800);
  --texto-escuro-forte: var(--creme-100);
  --texto-escuro-suave: var(--tan-300);

  /* Papéis semânticos — seções claras */
  --fundo-claro: var(--creme-100);
  --texto-claro-forte: var(--espresso-600);
  --texto-claro-suave: var(--marrom-400);

  /* Tipografia */
  --fonte-ui: 'Jost', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --fonte-serifa: 'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', serif;

  --t-eyebrow: 0.6875rem;
  --t-peq: 0.875rem;
  --t-corpo: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-h3: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-h2: clamp(1.75rem, 1.34rem + 1.9vw, 2.85rem);
  /* O piso é baixo de propósito: no mobile o título divide a primeira dobra
     com o cartão de agendamento, que é o que precisa aparecer. */
  --t-h1: clamp(1.95rem, 1.35rem + 3.1vw, 4.4rem);
  --t-numero: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);

  --trilha-larga: 0.26em;
  --trilha-media: 0.12em;

  /* Ritmo */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --largura-max: 1260px;
  /* O cabeçalho é o único bloco que não cabe nos 1260px do conteúdo: marca,
     dez itens de menu e o botão de agendar somam ~1350px. Quando a navegação
     vira barra horizontal ele usa esta régua mais larga; em qualquer outra
     largura continua alinhado ao conteúdo. */
  --largura-max-cabecalho: 1560px;
  --largura-texto: 62ch;
  /* Respiro vertical de toda seção. Foi apertado: o desenho anterior deixava
     folga demais entre o fim do conteúdo e a borda da faixa, e isso aparecia
     como buraco nas seções cujo último elemento já tem respiro próprio. O hero
     não usa esta medida — ele tem min-height de 100svh e padding próprio,
     porque precisa ocupar a tela inteira no carregamento. */
  --secao-y: clamp(2.75rem, 1.75rem + 4.5vw, 5.5rem);
  --pilha: clamp(1.5rem, 1rem + 2vw, 2.5rem);

  /* Formas */
  --raio-peq: 8px;
  --raio: 14px;
  --raio-grande: 22px;
  --raio-cheio: 999px;

  --sombra-card: 0 1px 2px rgba(18, 10, 5, 0.16), 0 12px 32px -12px rgba(18, 10, 5, 0.4);
  --sombra-flutuante: 0 2px 4px rgba(18, 10, 5, 0.2), 0 28px 60px -20px rgba(18, 10, 5, 0.62);

  --transicao: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transicao-lenta: 480ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --altura-cabecalho: 68px;
  --altura-barra-fixa: 72px;
}

@media (min-width: 1024px) {
  :root {
    --altura-cabecalho: 84px;
    --altura-barra-fixa: 0px;
  }
}

/* 03 — BASE =============================================================== */

/*
 * O atributo hidden vem do navegador com especificidade baixíssima, então
 * qualquer `display` declarado nesta folha o anula — foi o que já aconteceu com
 * .campo (display: grid) e com .escolha (display: flex), reexibindo elementos
 * que o JavaScript tinha escondido. Uma regra global evita ficar caçando caso a
 * caso, e o !important existe justamente para vencer o display local.
 */
[hidden] {
  display: none !important;
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Âncoras não podem parar debaixo do cabeçalho fixo. */
  scroll-padding-top: calc(var(--altura-cabecalho) + 12px);
}

body {
  font-family: var(--fonte-ui);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.65;
  color: var(--texto-escuro-forte);
  background-color: var(--espresso-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Segura o sangramento horizontal dos blocos full-bleed. O 'hidden' vem
     primeiro só como reserva: ele força overflow-y a 'auto', o que torna o
     body um contexto de rolagem e desliga position:sticky nos filhos. O
     'clip' apara igual sem criar esse contexto, e é ele que faz o título de
     'Nossa história' grudar. Navegador sem suporte a clip fica no hidden. */
  overflow-x: hidden;
  overflow-x: clip;
}

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

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
}

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

.secao-clara :focus-visible {
  outline-color: var(--marrom-500);
}

::selection {
  background: var(--dourado-400);
  color: var(--espresso-900);
}

.pular-para-conteudo {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 100;
  transform: translateY(-140%);
  padding: 0.75rem 1.25rem;
  background: var(--creme-100);
  color: var(--espresso-800);
  border-radius: 0 0 var(--raio-peq) var(--raio-peq);
  font-size: var(--t-peq);
  transition: transform var(--transicao);
}

.pular-para-conteudo:focus {
  transform: translateY(0);
}

/* Texto só para leitor de tela.
   Atenção: é posicionado de forma absoluta, então precisa de um ancestral
   posicionado por perto. Sem isso, dentro de um rolador horizontal, ele se
   ancora num ancestral distante, fica na posição estática lá fora e estica a
   página inteira. Quem usa .apenas-leitor deve ser position: relative. */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 04 — TIPOGRAFIA ========================================================= */

h1,
h2,
h3,
h4 {
  font-weight: 300;
  line-height: 1.12;
  text-wrap: balance;
}

.titulo-display {
  font-size: var(--t-h1);
  text-transform: uppercase;
  letter-spacing: 0.035em;
  font-weight: 300;
}

.titulo-secao {
  font-size: var(--t-h2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.eyebrow {
  display: block;
  /* Em telas estreitas a entrelinha larga custa uma linha inteira. */
  font-size: clamp(0.625rem, 0.58rem + 0.2vw, 0.6875rem);
  text-transform: uppercase;
  letter-spacing: clamp(0.16em, 0.1em + 0.3vw, 0.26em);
  font-weight: 400;
  color: var(--dourado-400);
  margin-bottom: clamp(0.65rem, 0.4rem + 0.8vw, 1rem);
}

.secao-clara .eyebrow {
  color: var(--dourado-700);
}

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.55;
  max-width: var(--largura-texto);
}

/* Título de seção nunca deve encostar no parágrafo que vem logo abaixo. */
.titulo-secao + .lead,
.titulo-secao + p {
  margin-top: 1.125rem;
}

.texto-suave {
  color: var(--texto-escuro-suave);
}

.secao-clara .texto-suave {
  color: var(--texto-claro-suave);
}

.destaque-dourado {
  color: var(--dourado-300);
}

.secao-clara .destaque-dourado {
  color: var(--dourado-700);
}

/* Ornamento de três pontos, retirado da referência da marca. */
.ornamento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem auto 0;
}

.ornamento::before,
.ornamento::after {
  content: '';
  width: clamp(2rem, 8vw, 4.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dourado-500));
}

.ornamento::after {
  background: linear-gradient(90deg, var(--dourado-500), transparent);
}

.ornamento span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dourado-500);
}

/* 05 — LAYOUT E CABEÇALHO ================================================= */

.envoltorio {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao {
  padding-block: var(--secao-y);
  position: relative;
}

.secao-clara {
  background: var(--fundo-claro);
  color: var(--texto-claro-forte);
}

.secao-escura {
  background: var(--fundo-escuro);
  color: var(--texto-escuro-forte);
}

.secao-profunda {
  background: var(--espresso-900);
  color: var(--texto-escuro-forte);
}

.cabecalho-secao {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.cabecalho-secao--centro {
  margin-inline: auto;
  text-align: center;
}

.cabecalho-secao p {
  margin-top: 1.125rem;
}

.sentinela-topo {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  transition: background-color var(--transicao), box-shadow var(--transicao),
    backdrop-filter var(--transicao);
}

.cabecalho--fixado {
  background: rgba(18, 10, 5, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(196, 165, 123, 0.16);
}

/* position/height existem para o painel do menu: ele é absoluto e precisa
   descer do rodapé desta caixa, não da borda da viewport — senão, nas larguras
   em que o cabeçalho já bateu no seu limite, o painel abre desalinhado do
   botão que o abriu. */
.cabecalho__interno {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  height: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A marca é uma silhueta em PNG usada como máscara e pintada com o
   gradiente dourado — fica nítida em qualquer tamanho e muda de cor por tema. */
.marca {
  display: block;
  width: clamp(132px, 30vw, 176px);
  aspect-ratio: 880 / 537;
  background: linear-gradient(118deg, #b8862f 4%, var(--dourado-300) 42%, #b8862f 96%);
  -webkit-mask: url('../img/marca-simone-dante.png') no-repeat center / contain;
  mask: url('../img/marca-simone-dante.png') no-repeat center / contain;
  flex: none;
}

/* No menu entra o letreiro "SIMONE DANTE" numa linha só, já na cor do próprio
   arquivo — por isso é imagem, não máscara. A página 404 segue com o lockup
   acima. A largura fica numa variável porque a linha de baixo se mede por ela. */
.cabecalho {
  --marca-largura: clamp(160px, 48vw, 210px);
}

.cabecalho .marca {
  width: var(--marca-largura);
  aspect-ratio: 720 / 70;
  background: url('../img/marca-menu-simone-dante.png') no-repeat center / contain;
  -webkit-mask: none;
  mask: none;
}

.marca-elo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--marca-largura) * 0.028);
  flex: none;
  text-decoration: none;
  transition: filter var(--transicao);
}

/* Sombra escura em volta do letreiro enquanto ele flutua sobre o retrato do
   hero: do tablet para cima o "DANTE" passa por cima do cabelo e da testa, e
   sem ela as letras se perdem na foto. Com o cabeçalho fixado, sobre fundo
   próprio, ela só mancharia o escuro. O filtro vai no link, não no <span> da
   marca: se ela voltar a ser máscara, a máscara apagaria uma sombra nela. */
.cabecalho:not(.cabecalho--fixado) .marca-elo {
  filter: drop-shadow(0 1px 1px rgba(18, 10, 5, 0.24)) drop-shadow(0 0 10px rgba(18, 10, 5, 0.22))
    drop-shadow(0 0 3px rgba(18, 10, 5, 0.2));
}

/* "ESTÉTICA AVANÇADA" embaixo do nome. É texto, não está na imagem: a fonte da
   interface em caixa-alta, com a trilha calculada para a linha ocupar a largura
   exata do letreiro — sem trilha, o texto mede 9,593 do corpo em tinta (Jost
   400), e são 16 vãos entre as 17 letras. Trocou o texto, refaça as duas
   contas. A trilha também entra depois da última letra; a margem negativa a
   devolve, para a linha centrar pela tinta. */
.marca-subtitulo {
  --corpo: calc(var(--marca-largura) * 0.06);
  --trilha: calc((var(--marca-largura) - var(--corpo) * 9.593) / 16);
  font-family: var(--fonte-ui);
  font-weight: 400;
  font-size: var(--corpo);
  line-height: 1;
  letter-spacing: var(--trilha);
  margin-right: calc(var(--trilha) * -1);
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

@media (max-width: 1023px) {
  .marca {
    max-height: calc(var(--altura-cabecalho) - 12px);
  }
}

@media (min-width: 1024px) {
  .marca {
    max-height: calc(var(--altura-cabecalho) - 12px);
  }
}


.monograma {
  display: block;
  width: 46px;
  aspect-ratio: 260 / 513;
  background: linear-gradient(140deg, #b8862f, var(--dourado-300));
  -webkit-mask: url('../img/monograma-simone-dante.png') no-repeat center / contain;
  mask: url('../img/monograma-simone-dante.png') no-repeat center / contain;
}

/* Navegação --------------------------------------------------------------- */

/* Até a barra horizontal, o menu inteiro é um painel que desce do cabeçalho —
   com os submenus abrindo em sanfona dentro dele. */
.navegacao {
  position: absolute;
  inset: 100% var(--gutter) auto;
  padding: 0.75rem;
  /* Uma tela deitada e baixa não segura o painel com os submenus abertos. */
  max-height: calc(100dvh - var(--altura-cabecalho) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(18, 10, 5, 0.97);
  border: 1px solid rgba(196, 165, 123, 0.2);
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: var(--sombra-flutuante);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.75rem);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}

.cabecalho--menu-aberto .navegacao {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.navegacao__lista {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* No celular o painel é uma faixa de ponta a ponta; do tablet para cima ele
   vira um cartão preso ao botão — uma coluna esticada por 1400px de tela
   deixaria o texto solto no vazio. */
@media (min-width: 640px) {
  .navegacao {
    left: auto;
    width: 24rem;
  }
}

/* Itens de primeiro nível: o link direto e o botão que abre um submenu se
   comportam igual, mudando só a seta. */
.navegacao__elo,
.navegacao__gatilho {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.8rem 0.75rem;
  font-size: var(--t-peq);
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  text-align: left;
  color: var(--creme-100);
  text-decoration: none;
  transition: color var(--transicao);
}

.navegacao__elo::after,
.navegacao__gatilho::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--dourado-400);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicao);
}

.navegacao__elo:hover,
.navegacao__gatilho:hover,
.navegacao__gatilho[aria-expanded='true'] {
  color: var(--dourado-300);
}

.navegacao__elo:hover::after,
.navegacao__gatilho:hover::after,
.navegacao__elo[aria-current='true']::after,
.navegacao__gatilho[data-ativo='true']::after,
.navegacao__gatilho[aria-expanded='true']::after {
  transform: scaleX(1);
  transform-origin: left;
}

.navegacao__seta {
  width: 0.85em;
  height: 0.85em;
  margin-left: auto;
  fill: currentColor;
  flex: none;
  transition: transform var(--transicao);
}

.navegacao__gatilho[aria-expanded='true'] .navegacao__seta {
  transform: rotate(180deg);
}

/* Submenus ---------------------------------------------------------------- */

/* Dentro do painel eles são sanfona: recuados e presos por um fio à esquerda,
   para ficar claro de qual item vieram. */
.submenu {
  display: grid;
  gap: 0.15rem;
  margin: 0.1rem 0 0.5rem 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(196, 165, 123, 0.22);
}

.submenu__lista {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.submenu__grupo {
  display: grid;
  gap: 0.1rem;
  align-content: start;
}

.submenu__titulo {
  padding: 0.45rem 0.6rem 0.15rem;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  color: var(--dourado-300);
}

.submenu__item {
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--raio-peq);
  text-decoration: none;
  transition: background-color var(--transicao);
}

.submenu__item:hover {
  background: rgba(196, 165, 123, 0.12);
}

.submenu__nome {
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--creme-100);
}

.submenu__desc {
  font-size: 0.78125rem;
  line-height: 1.4;
  color: var(--texto-escuro-suave);
}

.submenu__todos {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.2rem;
  padding: 0.5rem 0.6rem;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  color: var(--dourado-300);
  text-decoration: none;
  transition: color var(--transicao);
}

.submenu__todos svg {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
}

.submenu__todos:hover {
  color: var(--dourado-400);
}

/* Botão do menu ----------------------------------------------------------- */

.botao-menu {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid rgba(196, 165, 123, 0.42);
  border-radius: 50%;
  color: var(--dourado-300);
  transition: border-color var(--transicao), background-color var(--transicao);
}

.botao-menu:hover {
  border-color: var(--dourado-400);
  background: rgba(201, 162, 39, 0.1);
}

.botao-menu span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform var(--transicao), opacity var(--transicao);
}

.cabecalho--menu-aberto .botao-menu span:first-child {
  transform: translateY(6px) rotate(45deg);
}

.cabecalho--menu-aberto .botao-menu span:nth-child(2) {
  opacity: 0;
}

.cabecalho--menu-aberto .botao-menu span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

/* Entre o painel e a barra: aqui o menu ainda é um botão, mas já há espaço de
   sobra para o CTA ficar ao lado dele. O botão perde o margin-left automático
   para não empurrar o CTA de volta para a esquerda. */
@media (min-width: 1240px) and (max-width: 1279px) {
  .botao-menu {
    order: 3;
    margin-left: 0;
  }

  .cabecalho .botao--cabecalho {
    margin-left: auto;
  }
}

/* Barra horizontal -------------------------------------------------------- */

/* Antes eram dez itens numa linha só, e a barra só cabia a partir de 1440px.
   Com os submenus são sete, e a linha já passa em 1280px — um notebook comum
   deixa de cair no painel. */
@media (min-width: 1280px) {
  .cabecalho__interno {
    max-width: var(--largura-max-cabecalho);
  }

  /* O letreiro é largo e baixo: com a barra ao lado ele cresce um pouco, e em
     1280px ainda sobra folga para a linha caber num notebook. */
  .cabecalho {
    --marca-largura: clamp(190px, 14vw, 220px);
  }

  .botao-menu {
    display: none;
  }

  .navegacao {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .navegacao__lista {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1vw, 1.25rem);
  }

  /* O submenu se pendura neste item, não no cabeçalho inteiro. */
  .navegacao__grupo {
    position: relative;
  }

  .navegacao__elo,
  .navegacao__gatilho {
    width: auto;
    padding: 0.5rem 0;
    font-size: clamp(0.71875rem, 0.19vw + 0.546rem, 0.75rem);
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .navegacao__seta {
    width: 0.8em;
    height: 0.8em;
    margin-left: 0;
  }

  /* Cartão suspenso, centrado no item que o abriu. */
  .submenu {
    position: absolute;
    top: calc(100% + 0.85rem);
    left: 50%;
    z-index: 5;
    width: max-content;
    min-width: 21rem;
    max-width: min(36rem, calc(100vw - 2 * var(--gutter)));
    margin: 0;
    padding: 0.85rem;
    background: rgba(18, 10, 5, 0.97);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(196, 165, 123, 0.2);
    border-radius: var(--raio);
    box-shadow: var(--sombra-flutuante);
    transform: translateX(-50%);
  }

  /* O vão entre o item e o cartão é onde o ponteiro passa: sem esta faixa
     invisível o submenu fecha no meio do caminho. */
  .submenu::before {
    content: '';
    position: absolute;
    inset: -0.85rem 0 100% 0;
  }

  /* Perto da borda direita o cartão centrado sairia da tela: este alinha pela
     direita do próprio item. */
  .submenu--fim {
    left: auto;
    right: 0;
    transform: none;
  }

  /* Listas simples viram duas colunas; a de procedimentos já é dividida em
     dois grupos e mantém uma coluna por grupo. */
  .submenu:not(.submenu--duplo) .submenu__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem 0.4rem;
  }

  .submenu--duplo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
  }

  .submenu--duplo .submenu__todos {
    grid-column: 1 / -1;
  }
}

/* Botão de agendar no cabeçalho: aparece quando o cartão da agenda sai de
   vista, que é justamente quando ele deixa de ser redundante. */
.cabecalho .botao--cabecalho {
  display: none;
}

@media (min-width: 1240px) {
  /* Compacto para dividir a linha com os itens de menu. */
  .cabecalho .botao--cabecalho {
    min-height: 44px;
    padding-inline: 1.05rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    display: inline-flex;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--transicao), transform var(--transicao);
  }

  .cabecalho--cta .botao--cabecalho {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Botões ------------------------------------------------------------------ */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.875rem 1.75rem;
  border-radius: var(--raio-cheio);
  font-size: var(--t-peq);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  text-decoration: none;
  text-align: center;
  transition: transform var(--transicao), box-shadow var(--transicao),
    background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.botao:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.botao--primario {
  background: linear-gradient(122deg, var(--dourado-500), var(--dourado-300));
  color: var(--espresso-900);
  box-shadow: 0 10px 26px -12px rgba(201, 162, 39, 0.75);
}

.botao--primario:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(201, 162, 39, 0.9);
}

.botao--secundario {
  border: 1px solid rgba(196, 165, 123, 0.5);
  color: var(--creme-100);
}

.botao--secundario:hover {
  border-color: var(--dourado-400);
  color: var(--dourado-300);
  transform: translateY(-2px);
}

/* O modal é creme como as seções claras, mas mora fora delas: sem entrar aqui
   o botão secundário herda o creme do tema escuro e some no próprio fundo. */
.secao-clara .botao--secundario,
.modal .botao--secundario {
  border-color: rgba(74, 46, 31, 0.28);
  color: var(--espresso-600);
}

.secao-clara .botao--secundario:hover,
.modal .botao--secundario:hover {
  border-color: var(--marrom-500);
  color: var(--marrom-500);
}

.botao--cabecalho {
  min-height: 44px;
  padding: 0.5rem 1.4rem;
  /* Com nove itens no menu a linha fica apertada e o rótulo quebrava em duas
     linhas, deixando o botão mais alto que o cabeçalho pede. */
  white-space: nowrap;
}

.botao--bloco {
  width: 100%;
}

.botao__icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

/* Link com seta, para CTAs contextuais discretos. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-peq);
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  color: var(--dourado-300);
  text-decoration: none;
  padding-block: 0.4rem;
  transition: gap var(--transicao), color var(--transicao);
}

.secao-clara .link-seta {
  color: var(--dourado-700);
}

.link-seta:hover {
  gap: 0.85rem;
}

.link-seta svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* 06 — HERO =============================================================== */

/* O hero ocupa a primeira tela inteira, em qualquer aparelho: nenhuma faixa da
   seção seguinte pode aparecer antes de a pessoa rolar. svh, e não vh, porque
   no celular vh é a tela COM a barra do navegador recolhida — a conta que
   sobra justamente a faixa clara embaixo. O grid faz a grade interna esticar
   junto; sem ele a altura seria só espaço morto no fim da seção. */
.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--altura-cabecalho);
  padding-bottom: clamp(3rem, 2rem + 5vw, 6rem);
  overflow: hidden;
  background: var(--espresso-800);
}

/* Textura de seda da referência, recriada com gradientes — sem custo de rede. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(118% 78% at 8% -12%, rgba(107, 74, 50, 0.55), transparent 62%),
    radial-gradient(88% 66% at 92% 6%, rgba(201, 162, 39, 0.11), transparent 58%),
    radial-gradient(76% 64% at 46% 108%, rgba(74, 46, 31, 0.5), transparent 66%);
}

.hero > * {
  position: relative;
}

/* minmax(0, 1fr) em vez do "auto" implícito: uma trilha auto cresce até o
   max-content do conteúdo e estoura a viewport. Vale para todas as grades
   de uma coluna desta folha. */
.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}

.hero__retrato {
  position: relative;
  overflow: hidden;
}

/* Abaixo de 1024px o retrato deixa de ser uma faixa e vira o fundo do hero:
   cobre toda a área da tela, começando logo abaixo do menu — nunca por cima
   dele, porque o pai já carrega o padding da altura do cabeçalho. O texto e o
   cartão de agendamento sobem por cima. */
@media (max-width: 1023px) {
  /* A caixa recebe a proporção exata do arquivo (2:3), então o object-fit
     não tem o que aparar: a foto entra inteira, da largura da tela. Ancorada
     no topo e fora do fluxo, ela não empurra nada — o degradê já entrega o
     marrom do hero antes de a foto acabar, e a emenda não aparece. */
  .hero__retrato {
    position: absolute;
    inset: 0 0 auto 0;
    aspect-ratio: 2 / 3;
    margin: 0;
    z-index: 0;
  }

  /* A caixa inteira — foto e véu escuro por cima dela — se dissolve nas duas
     pontas, porque em nenhuma delas a cor da foto encontra a cor do hero.

     Embaixo: a textura do hero fica escondida atrás da foto e reaparecia de
     uma vez na borda, dando uma faixa clara atravessada na tela. Aos 92% da
     caixa já não há nada da foto, então os últimos pixels dela são exatamente
     a mesma cor do que vem embaixo.

     Em cima: a caixa começa colada no rodapé do menu e o fundo de estúdio da
     foto entrava de chofre contra o fundo do hero — um degrau de até 52 níveis
     de cor, disfarçado só onde o cabelo passa por trás. 10px diluem isso, e a
     cabeça dela começa bem abaixo dessa faixa.

     A máscara pega o véu junto porque ele é pseudo-elemento da caixa, não
     camada separada. */
  .hero__retrato {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 62%, transparent 92%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 62%, transparent 92%);
  }

  /* 31% da altura da foto é onde termina o queixo, e a foto tem 150vw de
     altura: 47vw põe o texto rente ao rosto em qualquer largura. */
  .hero__coluna {
    padding-top: 47vw;
  }

  /* O rodapé do hero encosta na seção seguinte, que já traz o próprio respiro:
     no celular esse padding é altura de tela desperdiçada. */
  .hero {
    padding-bottom: clamp(1.75rem, 1rem + 3vw, 4rem);
  }

  /* Aqui a coluna inteira cai em cima da foto, não no fundo chapado. A sombra
     herda para todo o texto do hero e sustenta a leitura mesmo quando a parte
     clara do jaleco passa por trás. */
  .hero__coluna {
    text-shadow: 0 1px 2px rgba(18, 10, 5, 0.6), 0 2px 16px rgba(18, 10, 5, 0.8);
  }
}

/* Telas baixas — iPhone SE e afins. São cinco blocos empilhados sobre uma foto
   que já ocupa 150vw de altura: aqui a folga entre o queixo e o texto encolhe,
   os números perdem um corpo e o respiro entre blocos aperta, para o hero
   caber numa tela só. Acima de 740px de altura nada disso vale. */
@media (max-width: 1023px) and (max-height: 740px) {
  .hero__coluna {
    padding-top: calc(47vw - 2.75rem);
    row-gap: 0.85rem;
  }

  .hero__numero {
    font-size: clamp(1.5rem, 1.05rem + 2vw, 2.125rem);
  }

  /* Aqui os selos terminam no canto de baixo à direita, que é onde flutua o
     botão do WhatsApp — e não há altura para empurrá-los para cima, a coluna
     já ocupa a tela inteira. Então eles cedem a largura do botão e se centram
     no que sobra. Os desenhos encolhem junto: sem isso o CrioDaSi e o
     UltraColágeno não caberiam lado a lado nesse espaço. O vão entre as duas
     linhas também aperta, para a segunda não passar da dobra.

     O seletor é composto de propósito: a regra base de .hero__chancelas vem
     depois nesta folha, e media query não soma especificidade. */
  .hero__coluna .hero__chancelas {
    --chancela: clamp(64px, 23.5vw, 110px);
    gap: 0.5rem 0.9rem;
    padding-right: 4rem;
  }
}

/* O <picture> precisa de altura própria: sem isso o "height: 100%" da imagem
   resolve contra uma caixa indefinida, vira "auto", e o object-fit nunca
   chega a valer — a imagem cresce e só é aparada pelo overflow. */
.hero__retrato picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* O recorte já começa no alto da cabeça: ancorar no topo preserva o rosto,
     e o que se perde, quando se perde, é a barra da calça. */
  object-position: 50% 0%;
}

/* Dissolve a foto no fundo espresso. Como a caixa tem proporção fixa, as
   paradas em porcentagem caem sempre no mesmo ponto da pessoa: limpo até o
   queixo (31%), escuro onde o texto entra, e marrom chapado bem antes da
   borda de baixo — é isso que faz a foto acabar sem emenda visível. */
.hero__retrato::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 24%,
    rgba(26, 15, 10, 0.55) 31%,
    rgba(26, 15, 10, 0.88) 40%,
    rgba(26, 15, 10, 0.97) 56%,
    var(--espresso-800) 76%
  );
}

/* A coluna precisa de contexto de empilhamento próprio: sem isso o degradê do
   retrato, que é posicionado, pintaria por cima do texto. */
.hero__coluna {
  position: relative;
  z-index: 1;
}

/* Uma coluna só, do celular ao desktop: título e números formam o primeiro
   bloco, a chamada de agendamento vem logo abaixo, e a nota do Google e os
   selos fecham. A grade de duas colunas anterior espalhava cinco blocos curtos
   pela largura e pela altura da tela — no desktop o hero abria buracos entre
   eles e não sobrava lugar de peso para o botão de agendar, que é o evento
   mais importante do site. */
.hero__coluna {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(1.1rem, 0.75rem + 1.4vw, 1.9rem);
  align-content: start;
  justify-items: center;
  text-align: center;
}

/* No celular o hero mede a tela inteira e a coluna cai sobre a foto: a folga
   que sobra vai para os vãos, senão os selos parariam no meio da tela com uma
   faixa morta embaixo. No desktop a coluna é centrada e os blocos ficam
   juntos — é o que a regra de 1024px faz. */
@media (max-width: 1023px) {
  .hero__coluna {
    align-content: space-between;
  }
}

/* Agora que os logos descem até a base, eles caem justamente onde flutua o
   botão do WhatsApp. O rodapé do hero reserva a altura dele (56px + respiro).
   Só em tela alta: abaixo de 740px de altura não há folga para ceder, e lá os
   logos ficam no meio da largura, longe do canto do botão. */
@media (max-width: 1023px) and (min-height: 741px) {
  .hero {
    padding-bottom: calc(clamp(1.75rem, 1rem + 3vw, 4rem) + 4rem);
  }
}

/* No celular o WhatsApp já flutua no canto da tela: repeti-lo aqui só rouba
   altura do hero. */
@media (max-width: 1023px) {
  .hero__whatsapp {
    display: none;
  }
}

/* O título e os números andam juntos: são a mesma afirmação — o que a clínica
   faz e o tamanho da bagagem dela. */
.hero__texto {
  display: grid;
  row-gap: clamp(0.85rem, 0.6rem + 1vw, 1.35rem);
  justify-items: center;
  width: 100%;
  max-width: 34rem;
}

/* Chamada de agendamento -------------------------------------------------- */

.hero__acao {
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  width: 100%;
  max-width: 34rem;
}

.hero__botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

/* O botão cresce até ocupar a linha sozinho no celular, e volta ao tamanho do
   rótulo quando divide o espaço com o WhatsApp. */
.hero__cta {
  flex: 1 1 16rem;
}

/* No celular o rótulo do botão vinha mais encorpado que no desktop: o mesmo
   peso 500 da Jost renderiza mais grosso onde o antialiasing do -webkit não
   vale (Android). Um degrau abaixo devolve a mesma espessura das duas telas. */
@media (max-width: 1023px) {
  .hero__cta {
    font-weight: 400;
  }
}

.hero__whatsapp {
  flex: 0 0 auto;
}

/* Números da clínica ------------------------------------------------------ */

/* O número pesa e a unidade acompanha na mesma linha, em corpo menor — é o
   desenho da referência: "+1 Milhão", "+30 Anos". */
.hero__numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Mesmo vão da coluna do hero: assim o centro de cada número cai exatamente
     sobre o centro do bloco que vem embaixo. */
  column-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  row-gap: clamp(0.9rem, 0.6rem + 1vw, 1.75rem);
  justify-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__numero {
  display: block;
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.875rem);
  font-weight: 500;
  line-height: 1;
  color: var(--creme-100);
}

.hero__numero em {
  font-style: normal;
  font-size: 0.48em;
  font-weight: 400;
}

.hero__rotulo {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  color: var(--tan-300);
}

/* Nota do Google ---------------------------------------------------------- */

/* Era um bloco desenhado aqui: número, estrelas em SVG e o "Google" letra por
   letra nas cores da marca. Saiu inteiro junto com a nota escrita à mão — o
   badge do Trustindex traz cartão, estrelas, cores e sombra próprios, e a nota
   vem do Google. Só resolvemos onde ele fica. */
.hero__avaliacao {
  display: flex;
  justify-content: center;
}

/* A mesma troca de tipografia dos depoimentos: o widget pede Poppins, que não
   é família da casa. Sem nada usando a fonte, ela não chega a ser baixada. */
.hero__avaliacao .ti-widget,
.hero__avaliacao .ti-widget * {
  font-family: var(--fonte-ui) !important;
}

/* Só aparece sem JavaScript, onde o badge não monta. */
.hero__avaliacao-alternativa {
  font-size: var(--t-peq);
  line-height: 1.35;
  text-align: center;
  color: var(--texto-escuro-suave);
}

.hero__avaliacao-alternativa a {
  color: var(--dourado-300);
  text-underline-offset: 2px;
}

/* Marca e especializações ------------------------------------------------- */

/* Os três ficam lado a lado, centrados como um grupo. Em colunas de mesma
   medida — o desenho anterior — eles se afastavam para as bordas da coluna, e
   como os desenhos têm larguras diferentes o vão entre eles nunca batia com a
   margem de fora. No celular o trio não cabe numa linha: o CrioDaSi e o
   UltraColágeno, os dois métodos da casa, seguem lado a lado, e o Método
   Soberana desce para a linha de baixo pelo wrap.

   --chancela é a largura do CrioDaSi. Os outros dois são proporcionais a ela,
   para as letras dos três saírem da mesma altura em qualquer tela. */
.hero__chancelas {
  --chancela: clamp(80px, 30vw, 140px);
  display: flex;
  flex-wrap: wrap;
  /* Pela base, não pelo centro: o "Especializações" em cima do Método Soberana
     deixava o desenho dele mais alto que o do lado. */
  align-items: flex-end;
  justify-content: center;
  gap: 0.9rem clamp(1rem, 3vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__chancelas > li {
  display: grid;
  justify-items: center;
  align-content: end;
}

.hero__chancela-dupla {
  gap: 0.4rem;
}

.hero__chancela-dupla .chancela--soberana {
  margin-top: auto;
}

.hero__chancela-rotulo {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.04em;
  color: var(--texto-escuro-suave);
}

/* Os três desenhos são máscaras, como o lockup do cabeçalho: o arquivo traz
   só a silhueta e a cor vem daqui — nítido em qualquer tamanho, sem fundo
   preto recortado à mão. */
.chancela {
  display: block;
  background: var(--creme-100);
  opacity: 0.94;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.chancela--criodasi {
  width: var(--chancela);
  aspect-ratio: 520 / 104;
  -webkit-mask-image: url('../img/chancela-criodasi.png');
  mask-image: url('../img/chancela-criodasi.png');
}

/* O "g" desce abaixo da linha de base e o CrioDaSi não tem descendente: pela
   base da caixa, o UltraColágeno ficaria mais alto que o vizinho. O
   deslocamento põe as duas linhas de base na mesma altura — a perna do "g"
   fica pendurada, como em qualquer texto. */
.chancela--ultracolageno {
  width: calc(var(--chancela) * 1.644);
  aspect-ratio: 740 / 115;
  transform: translateY(21%);
  -webkit-mask-image: url('../img/chancela-ultracolageno.png');
  mask-image: url('../img/chancela-ultracolageno.png');
}

.chancela--soberana {
  width: calc(var(--chancela) * 1.073);
  aspect-ratio: 520 / 107;
  -webkit-mask-image: url('../img/chancela-metodo-soberana.png');
  mask-image: url('../img/chancela-metodo-soberana.png');
}

/* Seção de agendamento ---------------------------------------------------- */

/* Fora do hero os dois cartões precisam de grade própria. Empilhados eles não
   passam de uma medida confortável de leitura; a partir de 1240px a dupla se
   abre e a agenda fica com a coluna maior, que é onde a grade de horários
   respira. */
.agendamento__cartoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  align-items: start;
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

/* Os selos de reforço ficam entre a chamada da seção e os cartões. */
.agendamento__selos {
  justify-content: center;
  margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
}

/* Encostados um no outro, os dois cartões precisam da mesma altura, senão os
   dois "Agendar consulta" ficam em linhas diferentes. Aqui o presencial deixa
   de encolher para o próprio conteúdo e empurra o botão para a base. */
.agendamento__cartoes[data-cartoes='lado-a-lado'] .presencial {
  align-self: stretch;
  height: auto;
  align-content: space-between;
}

/* Cartão de avaliação presencial ------------------------------------------ */

/* Mesmo cartão da agenda — fundo, moldura dourada, sombra e respiro — só que
   sem a escolha de horário. Fica ao lado da agenda a partir de 1240px; abaixo
   disso a dupla deixaria a agenda mais estreita que no celular, e ela é o que a
   página inteira existe para oferecer. */
.presencial {
  display: grid;
  /* O cartão fecha no próprio conteúdo em vez de acompanhar a altura da
     agenda: esticado, sobrava caixa creme vazia em cima e embaixo. */
  align-content: start;
  align-self: start;
  height: fit-content;
  /* Abaixo de 1024px o cartão não ocupa a coluna inteira nem se cola à
     esquerda: encolhe até uma medida confortável de leitura e fica
     centralizado. De 1024px para cima ele volta a acompanhar a agenda. */
  justify-self: center;
  width: 100%;
  max-width: 30rem;
  gap: 1rem;
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  border-radius: var(--raio-grande);
  background: var(--creme-100);
  color: var(--texto-claro-forte);
  box-shadow: var(--sombra-flutuante);
  position: relative;
  isolation: isolate;
}

.presencial::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(201, 162, 39, 0.28);
  pointer-events: none;
}

/* A coluna é estreita: sem afrouxar a trilha, "Agendar consulta" quebraria em
   duas linhas dentro do botão. */
.presencial .botao {
  padding-inline: 0.8rem;
  gap: 0.45rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.presencial__titulo {
  /* Mesmo filete do cartão ao lado: os dois títulos precisam terminar igual,
     senão a dupla parece dois componentes diferentes. */
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(74, 46, 31, 0.14);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  color: var(--espresso-600);
}

.presencial__nota {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  color: var(--marrom-400);
}

/* De 1024px em diante o cartão volta a acompanhar a largura da agenda. */
@media (min-width: 1024px) {
  .presencial {
    justify-self: stretch;
    max-width: none;
  }
}

/* Enquanto a agenda está recolhida, os dois cartões cabem lado a lado mesmo no
   celular — são só título e botão. Ao abrir a agenda o JavaScript tira este
   estado e ela volta a ocupar a linha inteira, que é o espaço de que a grade de
   horários precisa. Nas telas mais estreitas o rótulo do botão quebra em duas
   linhas; como os dois cartões quebram junto, a dupla continua simétrica. */
@media (max-width: 1239px) {
  .agendamento__cartoes[data-cartoes='lado-a-lado'] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(0.75rem, 2vw, 1.25rem);
  }

  .agendamento__cartoes[data-cartoes='lado-a-lado'] .presencial {
    grid-column: 1;
    justify-self: stretch;
    max-width: none;
  }

  .agendamento__cartoes[data-cartoes='lado-a-lado'] .agenda {
    grid-column: 2;
  }

  /* Meia coluna é pouco: sem apertar mais a trilha, "Agendar consulta" quebra
     em duas linhas dentro do botão. */
  .agendamento__cartoes[data-cartoes='lado-a-lado'] .presencial .botao,
  .agendamento__cartoes[data-cartoes='lado-a-lado'] .agenda__abrir {
    padding-inline: 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
  }
}

@media (min-width: 1240px) {
  .agendamento__cartoes {
    /* Aberta a dupla, a agenda ainda precisa de largura para a grade de
       horários — mas esticar até a medida do envoltório deixaria os botões
       largos demais. */
    max-width: 64rem;
    /* Colunas iguais: a agenda tinha 1.38fr para a grade de horários respirar,
       mas com ela recolhida — que é como a seção abre — a dupla ficava torta,
       o cartão online quase meia tela maior que o presencial. Os horários usam
       auto-fill e se reorganizam sozinhos na coluna mais estreita. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1rem, 1.2vw, 1.5rem);
  }

  .agendamento__cartoes .presencial {
    grid-column: 1;
  }

  .agendamento__cartoes .agenda {
    grid-column: 2;
  }
}

/* O dourado das demais seções aparece sobre marrom chapado. Aqui a frase
   cai em cima da foto, e sobre o cabelo claro ele some. O creme já é a cor de
   texto do site nas seções escuras, então continua da mesma família — só esta
   linha muda, o eyebrow das outras seções segue dourado. */
.hero .eyebrow {
  color: var(--creme-100);
}

.hero__titulo {
  font-size: var(--t-h1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 300;
  color: var(--creme-100);
}

.hero__titulo em {
  font-style: normal;
  display: block;
  background: linear-gradient(102deg, var(--dourado-500) 8%, var(--dourado-300) 58%, #b8862f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0;
  list-style: none;
  font-size: var(--t-peq);
  color: var(--tan-300);
}

.selos li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.selos svg {
  width: 1.05em;
  height: 1.05em;
  fill: var(--dourado-400);
  flex: none;
}

@media (min-width: 1024px) {
  /* O rodapé do hero era o que empurrava os logos para o meio: aqui a coluna
     vai até quase a base da foto. */
  .hero {
    padding-bottom: clamp(2rem, 1rem + 2vw, 3rem);
  }

  .hero__grade {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(2.5rem, 1rem + 4vw, 5rem);
  }

  /* Sangra para as bordas do hero — inclusive por baixo do cabeçalho, que é
     transparente no topo. É assim que a referência posiciona o retrato. */
  .hero__retrato {
    position: relative;
    margin-inline: 0;
    margin-left: calc(var(--gutter) * -1);
    margin-top: calc(var(--altura-cabecalho) * -1);
    margin-bottom: calc(clamp(2rem, 1rem + 2vw, 3rem) * -1);
    align-self: stretch;
    height: auto;
    min-height: min(84vh, 820px);
    border-radius: 0;
  }

  /* Quem manda na altura agora é a tela: o hero mede 100svh e o retrato
     acompanha, de ponta a ponta. O teto antigo (52rem) deixava uma faixa de
     espresso embaixo da foto em qualquer monitor mais alto que isso. */
  .hero__retrato {
    max-height: none;
  }

  /* Fora do fluxo, senão a altura natural do arquivo é que decide o tamanho da
     caixa — era ela que fazia o hero passar da dobra por algumas dezenas de
     pixels em monitor alto. Assim a caixa é esticada pela tela e o object-fit
     apara o que sobra. */
  .hero__retrato picture {
    position: absolute;
    inset: 0;
  }

  .hero__retrato img {
    object-position: 50% 8%;
  }

  /* No desktop a coluna deixa de ser esticada pela altura da foto: os blocos
     ficam juntos, alinhados pela esquerda e centrados na vertical. Espalhá-los
     de ponta a ponta era o que deixava o hero disperso — e o botão de agendar,
     que entra no meio deles, precisa de vizinhança para ter peso. */
  .hero__coluna {
    align-self: center;
    align-content: center;
    justify-items: start;
    text-align: left;
    row-gap: clamp(1.35rem, 0.9rem + 1.2vw, 2.1rem);
    padding-block: clamp(0.75rem, 3vh, 2.5rem);
  }

  .hero__texto,
  .hero__acao {
    justify-items: start;
  }

  /* O teto de 34rem serve ao texto, não aos botões: com o rótulo maior, ele
     jogava o WhatsApp para uma linha só dele. Onde a coluna comporta, os dois
     voltam a dividir a mesma linha; onde não comporta, o wrap resolve. */
  .hero__acao {
    max-width: none;
  }

  .hero__botoes {
    width: auto;
    justify-content: flex-start;
  }

  .hero__cta {
    flex: 0 0 auto;
  }

  /* Os dois números lado a lado, medindo só o próprio rótulo. */
  .hero__numeros {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    justify-items: start;
    column-gap: clamp(2rem, 3.5vw, 3.5rem);
    text-align: left;
  }

  /* Acompanha o resto da coluna, que a partir daqui alinha à esquerda. */
  .hero__avaliacao {
    justify-content: flex-start;
  }

  /* A coluna não passa de ~645px: aqui os três desenhos encolhem o bastante
     para caberem numa linha só, de 1024px em diante. */
  .hero__chancelas {
    --chancela: clamp(104px, 10.5vw, 140px);
    justify-content: flex-start;
  }

  /* No desktop a dissolução acontece na borda direita, em direção ao texto. */
  .hero__retrato::after {
    background: linear-gradient(
      to right,
      transparent 46%,
      rgba(26, 15, 10, 0.42) 82%,
      rgba(26, 15, 10, 0.86) 100%
    );
  }

}

@media (min-width: 1280px) {
  .hero__retrato {
    margin-left: calc((100vw - var(--largura-max)) / -2 - var(--gutter));
  }
}

/* 07 — AGENDA ============================================================= */

.agenda {
  /* Impede que o cabeçalho fixo cubra o topo do cartão quando o fluxo rola
     até ele — vale tanto para âncoras quanto para scrollIntoView. */
  scroll-margin-top: calc(var(--altura-cabecalho) + 1rem);
  background: var(--creme-100);
  color: var(--texto-claro-forte);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-flutuante);
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  position: relative;
  isolation: isolate;
}

/* Cartão recolhido: no primeiro contato aparecem só o título e o botão de
   abrir; o resto entra no clique. O estado é ligado por JavaScript, então sem
   script o cartão continua inteiro — nada essencial depende do recolhimento. */
.agenda[data-recolhido='true'] .agenda__painel,
.agenda[data-recolhido='true'] .agenda__remarcar {
  display: none;
}

.agenda__abrir {
  width: 100%;
  margin-top: 1.5rem;
}

.agenda__menos {
  width: 100%;
  margin-top: 1.25rem;
}

/* O cartão da agenda é creme mesmo dentro de seção escura, então o botão
   secundário herdava o creme das seções escuras e sumia no próprio fundo. */
.agenda .botao--secundario {
  border-color: rgba(74, 46, 31, 0.28);
  color: var(--espresso-900);
}

.agenda .botao--secundario:hover {
  border-color: var(--marrom-500);
  color: var(--espresso-900);
}

.agenda::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(201, 162, 39, 0.28);
  pointer-events: none;
}

.agenda__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(74, 46, 31, 0.14);
}

.agenda__titulo {
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  color: var(--espresso-600);
}

/* Porta de entrada de quem já tem horário. Discreta de propósito: quem chega
   aqui está agendando, e só uma minoria vem remarcar. */
.agenda__remarcar {
  font-size: var(--t-peq);
  color: var(--marrom-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem 0;
  transition: color var(--transicao);
}

.agenda__remarcar:hover {
  color: var(--espresso-600);
}

/* Tira de dias ------------------------------------------------------------ */

.agenda__dias {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.agenda__seta {
  flex: none;
  width: 38px;
  height: 38px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(74, 46, 31, 0.2);
  color: var(--marrom-500);
  transition: background-color var(--transicao), border-color var(--transicao);
}

.agenda__seta:hover:not(:disabled) {
  background: var(--creme-200);
  border-color: var(--marrom-400);
}

.agenda__seta:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.agenda__seta svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (min-width: 640px) {
  .agenda__seta {
    display: flex;
  }
}

.agenda__trilho {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
  /* Espaço para o anel de foco não ser cortado pelo overflow. */
  padding-inline: 2px;
  margin-inline: -2px;
}

.agenda__trilho::-webkit-scrollbar {
  display: none;
}

.dia {
  /* Segura o .apenas-leitor dentro do botão — veja a nota naquela regra. */
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 62px;
  padding: 0.6rem 0.5rem 0.55rem;
  border-radius: var(--raio);
  border: 1px solid rgba(74, 46, 31, 0.16);
  background: var(--creme-50);
  text-align: center;
  line-height: 1.25;
  transition: background-color var(--transicao), border-color var(--transicao),
    color var(--transicao), transform var(--transicao);
}

.dia:hover:not(:disabled):not([aria-pressed='true']) {
  border-color: var(--dourado-500);
  transform: translateY(-2px);
}

.dia__semana {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--texto-claro-suave);
}

.dia__numero {
  display: block;
  font-size: 1.375rem;
  font-weight: 300;
  color: var(--espresso-600);
}

.dia__mes {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-claro-suave);
}

.dia[aria-pressed='true'] {
  background: var(--espresso-600);
  border-color: var(--espresso-600);
}

.dia[aria-pressed='true'] .dia__numero {
  color: var(--dourado-300);
}

.dia[aria-pressed='true'] .dia__semana,
.dia[aria-pressed='true'] .dia__mes {
  color: var(--tan-300);
}

.dia:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Grade de horários -------------------------------------------------------- */

.agenda__corpo {
  margin-top: 1.25rem;
}

.agenda__horarios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.5rem;
}

.horario {
  min-height: 48px;
  padding: 0.5rem 0.25rem;
  border-radius: var(--raio-peq);
  border: 1px solid rgba(74, 46, 31, 0.18);
  background: var(--creme-50);
  color: var(--espresso-600);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--transicao), border-color var(--transicao),
    color var(--transicao), transform var(--transicao);
}

.horario:hover:not(:disabled) {
  border-color: var(--dourado-500);
  background: #fff;
  transform: translateY(-2px);
}

.horario:active:not(:disabled) {
  transform: translateY(0);
}

.horario[aria-pressed='true'] {
  background: var(--espresso-600);
  border-color: var(--espresso-600);
  color: var(--dourado-300);
}

/* Horário já reservado: continua visível, mas não é clicável. */
.horario:disabled {
  cursor: not-allowed;
  color: var(--marrom-400);
  background: transparent;
  border-style: dashed;
  border-color: rgba(74, 46, 31, 0.22);
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.agenda__vazio,
.agenda__aviso {
  padding: 1.5rem 0.5rem;
  text-align: center;
  font-size: var(--t-peq);
  color: var(--texto-claro-suave);
}

.agenda__aviso {
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  border-radius: var(--raio-peq);
  background: rgba(201, 162, 39, 0.12);
  color: var(--marrom-500);
  text-align: left;
}

/* O aviso neutro conta que a disponibilidade não pôde ser conferida. Já a
   recusa de um horário é uma resposta ao que a pessoa acabou de fazer, e
   precisa se distinguir disso — daí a cor de erro. */
.agenda__aviso--erro {
  background: rgba(179, 66, 58, 0.1);
  border: 1px solid rgba(179, 66, 58, 0.35);
  color: var(--erro);
}

/* Painéis do fluxo -------------------------------------------------------- */

.agenda__painel {
  animation: painel-entra var(--transicao-lenta) both;
}

@keyframes painel-entra {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Etapa 2: cabeçalho que devolve o horário escolhido ---------------------- */

.escolha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--raio);
  background: var(--creme-200);
  border: 1px solid rgba(201, 162, 39, 0.3);
}

.escolha__rotulo {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--trilha-larga);
  color: var(--dourado-700);
}

.escolha__valor {
  display: block;
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--espresso-600);
  margin-top: 0.15rem;
}

.escolha__trocar {
  flex: none;
  font-size: var(--t-peq);
  color: var(--marrom-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.5rem;
  margin: -0.5rem;
}

.escolha__trocar:hover {
  color: var(--espresso-600);
}

/* Formulário -------------------------------------------------------------- */

.campos {
  display: grid;
  gap: 1.125rem;
}

@media (min-width: 560px) {
  .campos--duplo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.campo {
  display: grid;
  /* Sem isto, o campo esticado pela grade de duas colunas distribui a sobra
     entre as linhas e infla o input — é o que desalinhava WhatsApp e e-mail
     quando só um dos dois mostra mensagem de erro. */
  align-content: start;
  gap: 0.4rem;
}

.campo__rotulo {
  font-size: var(--t-peq);
  color: var(--texto-claro-suave);
}

.campo__rotulo .obrigatorio {
  color: var(--erro);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.9rem;
  border-radius: var(--raio-peq);
  border: 1px solid rgba(74, 46, 31, 0.24);
  background: var(--creme-50);
  color: var(--espresso-600);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo textarea {
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b4a32' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: rgba(107, 74, 50, 0.55);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--dourado-500);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}

.campo input[aria-invalid='true'],
.campo select[aria-invalid='true'] {
  border-color: var(--erro);
}

.campo input[aria-invalid='true']:focus,
.campo select[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgba(179, 66, 58, 0.18);
}

.campo__erro {
  font-size: 0.8125rem;
  color: var(--erro);
  min-height: 0;
}

.campo__erro:empty {
  display: none;
}

/* Observação que acompanha um campo, fora da caixa. */
.campo__nota {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--texto-claro-suave);
}

/* Escolha de interesse: dois cartões-rádio ------------------------------- */

.interesse {
  border: 0;
  padding: 0;
  margin: 0;
}

.interesse__legenda {
  font-size: var(--t-peq);
  color: var(--texto-claro-suave);
  padding: 0;
  margin-bottom: 0.6rem;
}

.interesse__opcoes {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 480px) {
  .interesse__opcoes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: var(--raio);
  border: 1px solid rgba(74, 46, 31, 0.2);
  background: var(--creme-50);
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.3;
  transition: border-color var(--transicao), background-color var(--transicao);
}

.opcao input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opcao__marca {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--marrom-400);
  display: grid;
  place-items: center;
  transition: border-color var(--transicao);
}

.opcao__marca::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dourado-500);
  transform: scale(0);
  transition: transform var(--transicao);
}

.opcao:hover {
  border-color: var(--dourado-500);
}

.opcao:has(input:checked) {
  border-color: var(--dourado-500);
  background: rgba(201, 162, 39, 0.1);
}

.opcao:has(input:checked) .opcao__marca {
  border-color: var(--dourado-500);
}

.opcao:has(input:checked) .opcao__marca::after {
  transform: scale(1);
}

.opcao:has(input:focus-visible) {
  outline: 2px solid var(--marrom-500);
  outline-offset: 2px;
}

/* Consentimento LGPD ------------------------------------------------------ */

.consentimento {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--texto-claro-suave);
  cursor: pointer;
}

.consentimento input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--dourado-700);
}

.consentimento a {
  color: var(--marrom-500);
  text-underline-offset: 2px;
}

/* Um aceite só, que cobre as duas políticas e o contato. */
.aceites {
  display: grid;
  gap: 0.875rem;
}

/* Campo-armadilha invisível contra robôs de spam. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.agenda__enviar {
  margin-top: 1.5rem;
}

.botao--enviar {
  background: linear-gradient(122deg, var(--espresso-600), var(--marrom-500));
  color: var(--creme-100);
  box-shadow: 0 10px 24px -12px rgba(43, 24, 16, 0.8);
}

.botao--enviar:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(43, 24, 16, 0.9);
}

.girador {
  width: 1.1em;
  height: 1.1em;
  border: 2px solid rgba(247, 241, 231, 0.35);
  border-top-color: var(--creme-100);
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

.agenda__status {
  margin-top: 0.85rem;
  font-size: var(--t-peq);
  color: var(--erro);
  text-align: center;
}

.agenda__status:empty {
  display: none;
}

/* Falha no registro: a mensagem deixa de ser uma notinha e vira um bloco que
   não dá para ignorar, porque a pessoa está a um passo de ir embora achando
   que tem horário marcado. */
.agenda__status--erro {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--raio);
  background: rgba(179, 66, 58, 0.09);
  border: 1px solid rgba(179, 66, 58, 0.32);
  text-align: left;
  line-height: 1.5;
}

.agenda__recuperar {
  margin-top: 0.85rem;
}

.agenda__recuperar .campo__nota {
  margin-top: 0.6rem;
  text-align: center;
}

/* Etapa 3: confirmação ---------------------------------------------------- */

.confirmacao {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

.confirmacao__selo {
  width: 62px;
  height: 62px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(74, 124, 89, 0.14);
}

.confirmacao__selo svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--sucesso);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  animation: risca 520ms 120ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes risca {
  from {
    stroke-dashoffset: 32;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.confirmacao__titulo {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--espresso-600);
}

/* O foco aqui é dado por script, só para o leitor de tela anunciar a etapa
   nova. Como ninguém navegou até este título, o anel viraria ruído visual. */
.confirmacao__titulo:focus {
  outline: none;
}

.confirmacao__quando {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  color: var(--espresso-600);
}

.confirmacao__nota {
  margin-top: 0.875rem;
  font-size: var(--t-peq);
  color: var(--texto-claro-suave);
  max-width: 34rem;
  margin-inline: auto;
}

.confirmacao__acoes {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.botao--whatsapp {
  background: #25d366;
  color: #06301a;
}

.botao--whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(37, 211, 102, 0.9);
}

/* 07B — CLÍNICA SIMONE DANTE ============================================== */

/* A seção é longa — história, responsável, pilares e filosofia —, então cada
   bloco ganha um respiro bem maior que o dos parágrafos: a leitura anda em
   capítulos, e não num texto corrido. */
.clinica__bloco {
  margin-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

/* Recolhido, o resto da seção espia: o respiro do primeiro bloco (o mesmo clamp
   de cima) mais o título "Nossa história" e o começo do primeiro marco. */
.clinica__mais {
  --espiar: calc(clamp(3.5rem, 2rem + 5vw, 6.5rem) + 13rem);
}

.clinica__lema {
  font-family: var(--fonte-serifa);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--dourado-300);
}

.clinica__abertura {
  max-width: 46rem;
  margin-inline: auto;
  color: var(--texto-escuro-suave);
}

.clinica__abertura p + p {
  margin-top: 1rem;
}

/* Centralizado acompanha o cabeçalho; no celular, parágrafo longo centrado
   vira uma coluna serrilhada dos dois lados, então ali ele alinha à esquerda. */
@media (min-width: 640px) {
  .clinica__abertura {
    text-align: center;
  }
}

.clinica__subtitulo {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--creme-100);
}

.clinica__subtitulo--centro {
  text-align: center;
}

/* Nossa história ---------------------------------------------------------- */

.clinica__historia {
  display: grid;
  gap: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}

@media (min-width: 900px) {
  .clinica__historia {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(3rem, 1rem + 5vw, 6rem);
    align-items: start;
  }

  /* O título acompanha a leitura enquanto a linha do tempo passa ao lado. */
  .clinica__historia-titulo {
    position: sticky;
    top: calc(var(--altura-cabecalho) + 2.5rem);
  }
}

.clinica__periodo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.75rem;
  font-family: var(--fonte-serifa);
  font-size: clamp(2rem, 1.3rem + 3vw, 4rem);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--dourado-300);
}

.clinica__periodo span {
  width: clamp(2rem, 1rem + 4vw, 4.5rem);
  height: 1px;
  background: linear-gradient(90deg, var(--dourado-500), rgba(201, 162, 39, 0.25));
}

/* O retrato desce junto com o título na coluna fixa. Some abaixo de 900px, que
   é onde a seção deixa de ter duas colunas: dali para baixo a linha do tempo
   ocupa a largura toda e quem manda é o texto. No celular não aparece — por
   isso o display:none é o estado padrão, e não uma exceção de media query. */
.clinica__retrato {
  display: none;
}

@media (min-width: 900px) {
  .clinica__retrato {
    display: block;
    margin: clamp(1.75rem, 1rem + 2vw, 2.5rem) 0 0;
  }

  .clinica__retrato img {
    display: block;
    width: 100%;
    /* O bloco fixo é título + foto. Numa janela baixa os dois somados passariam
       da altura visível e o sticky pararia de segurar; o teto abaixo apara a
       foto por baixo em vez de estourar a coluna. */
    max-height: calc(100dvh - var(--altura-cabecalho) - 15rem);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 12%;
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra-card);
  }
}

.linha-tempo {
  --recuo: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  --ponto: 11px;
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  padding: 0 0 0 var(--recuo);
  list-style: none;
}

/* O fio que liga os marcos se apaga no fim: a história continua. */
.linha-tempo::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  bottom: 0;
  left: calc(var(--ponto) / 2 - 0.5px);
  width: 1px;
  background: linear-gradient(180deg, var(--dourado-500), rgba(201, 162, 39, 0.08));
}

.linha-tempo__marco {
  position: relative;
}

/* Marco com data é ponto cheio; as fases entre uma data e outra são anéis. */
.linha-tempo__marco::before {
  content: '';
  position: absolute;
  top: 0.3rem;
  left: calc(-1 * var(--recuo));
  width: var(--ponto);
  height: var(--ponto);
  border: 1px solid var(--dourado-400);
  border-radius: 50%;
  background: var(--fundo-escuro);
  /* Halo da cor do fundo: interrompe o fio em volta do ponto. */
  box-shadow: 0 0 0 5px var(--fundo-escuro);
}

.linha-tempo__marco--data::before {
  top: 0.55rem;
  background: var(--dourado-400);
}

.linha-tempo__quando {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--fonte-serifa);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--dourado-300);
}

.linha-tempo h4 {
  font-size: var(--t-h3);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--creme-100);
}

.linha-tempo p {
  max-width: var(--largura-texto);
  margin-top: 0.55rem;
  color: var(--texto-escuro-suave);
}

/* Quem conduz os atendimentos --------------------------------------------- */

/* Mesmo cartão das promoções e da linha própria: fundo em degradê e fio tan. */
.clinica__responsavel {
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  padding: clamp(1.5rem, 0.8rem + 3vw, 3.25rem);
  border-radius: var(--raio-grande);
  border: 1px solid rgba(196, 165, 123, 0.22);
  background: linear-gradient(158deg, rgba(43, 24, 16, 0.8), rgba(18, 10, 5, 0.5));
}

@media (min-width: 900px) {
  .clinica__responsavel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
    align-items: center;
  }

  .clinica__nota {
    grid-column: 1 / -1;
  }
}

.clinica__nome {
  margin-top: 0.6rem;
  font-family: var(--fonte-serifa);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--dourado-300);
}

.clinica__credenciais {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  list-style: none;
  color: var(--creme-100);
}

.clinica__credenciais li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  line-height: 1.5;
}

.clinica__credenciais svg {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.22em;
  fill: var(--dourado-400);
}

.clinica__nota {
  padding-top: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  border-top: 1px solid rgba(196, 165, 123, 0.18);
  color: var(--texto-escuro-suave);
}

/* O que nos torna uma referência ------------------------------------------ */

.clinica__pilares {
  display: grid;
  gap: clamp(0.875rem, 0.5rem + 1vw, 1.25rem);
  margin-top: clamp(2rem, 1.25rem + 2vw, 3rem);
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .clinica__pilares {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .clinica__pilares {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.clinica__pilar {
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  border-radius: var(--raio);
  border: 1px solid rgba(196, 165, 123, 0.22);
  background: linear-gradient(158deg, rgba(43, 24, 16, 0.75), rgba(18, 10, 5, 0.55));
}

.clinica__numero {
  display: block;
  font-family: var(--fonte-serifa);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--dourado-400);
}

.clinica__pilar h4 {
  margin-top: 0.9rem;
  font-size: var(--t-h3);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--creme-100);
}

.clinica__pilar p {
  margin-top: 0.6rem;
  font-size: var(--t-peq);
  line-height: 1.65;
  color: var(--texto-escuro-suave);
}

/* Filosofia e assinatura -------------------------------------------------- */

.clinica__filosofia {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.clinica__manifesto {
  margin-top: 1.25rem;
  font-family: var(--fonte-serifa);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem);
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--dourado-300);
}

.clinica__filosofia p + p {
  margin-top: 1rem;
  color: var(--texto-escuro-suave);
}

.clinica__manifesto + p {
  margin-top: 1.5rem;
}

.clinica__fecho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 46rem;
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0;
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid rgba(196, 165, 123, 0.18);
  text-align: center;
}

.clinica__fecho-nome {
  font-family: var(--fonte-serifa);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--creme-100);
}

/* No celular endereço e WhatsApp empilham, e o ponto que os separa sai: sozinho
   no começo de uma linha ele parece erro. */
.clinica__contato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem 0.75rem;
  font-size: var(--t-peq);
  font-style: normal;
  color: var(--texto-escuro-suave);
}

.clinica__separador {
  display: none;
}

@media (min-width: 640px) {
  .clinica__contato {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .clinica__separador {
    display: inline;
  }
}

.clinica__contato a {
  text-decoration: underline;
  text-decoration-color: rgba(196, 165, 123, 0.4);
  text-underline-offset: 3px;
  transition: color var(--transicao);
}

.clinica__contato a:hover {
  color: var(--dourado-300);
}

.clinica__rt {
  font-size: var(--t-peq);
  color: var(--texto-escuro-suave);
}

/* No celular as duas linhas quebravam deixando uma palavra sozinha embaixo. */
.clinica__fecho-nome,
.clinica__rt {
  text-wrap: balance;
}

.clinica__fecho .botao {
  margin-top: 1.25rem;
}

/* 08 — SOBRE ============================================================== */

.sobre__grade {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}

@media (min-width: 900px) {
  .sobre__grade {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
  }
}

.sobre__figura {
  position: relative;
  margin: 0;
}

.sobre__figura img {
  width: 100%;
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-card);
}

/* Moldura dourada deslocada — detalhe editorial discreto. */
.sobre__figura::after {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: var(--raio-grande);
  z-index: -1;
}

.sobre__texto > * + * {
  margin-top: 1.25rem;
}

.sobre__assinatura {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(74, 46, 31, 0.18);
  font-size: var(--t-peq);
  line-height: 1.7;
  color: var(--texto-claro-suave);
}

.sobre__assinatura strong {
  display: block;
  font-family: var(--fonte-serifa);
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--espresso-600);
}

/* 09 — ENCONTRE O SEU PROCEDIMENTO ======================================== */

/* Título à esquerda, apoio e link à direita — abaixo de 900px vira uma coluna,
   porque a chamada precisa da largura inteira para não quebrar em cinco linhas. */
.encontrar__topo {
  display: grid;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}

.encontrar__topo .cabecalho-secao {
  margin-bottom: 0;
}

.encontrar__apoio {
  display: grid;
  justify-items: start;
  gap: 0.65rem;
  font-size: var(--t-peq);
  line-height: 1.6;
}

@media (min-width: 900px) {
  .encontrar__topo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: end;
  }

  .encontrar__apoio {
    justify-items: end;
    text-align: right;
  }
}

/* A grade é a do print: cartões de foto com o rótulo por cima, e um deles
   ocupando duas colunas para quebrar o ritmo. São sete cartões; o largo conta
   por dois, então fecham oito células em qualquer número de colunas. */
.atalhos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 0.3rem + 1.2vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.atalhos > li {
  display: grid;
  min-width: 0;
}

.atalhos > li.atalhos__largo {
  grid-column: span 2;
}

@media (min-width: 640px) {
  .atalhos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .atalhos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.atalho {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--raio-grande);
  background: var(--espresso-800);
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.atalhos__largo .atalho {
  aspect-ratio: 8 / 5;
}

.atalho:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-flutuante);
}

.atalho img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--transicao-lenta);
}

.atalho:hover img {
  scale: 1.04;
}

/* Escurece só a base, que é onde o texto cai: no alto a foto fica limpa. */
.atalho::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(18, 10, 5, 0.88) 0%,
    rgba(18, 10, 5, 0.62) 26%,
    rgba(18, 10, 5, 0.1) 52%,
    transparent 72%
  );
}

.atalho__corpo {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  gap: 0.2rem;
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  /* Espaço para a seta, que fica no canto de baixo à direita. */
  padding-right: clamp(3rem, 2.5rem + 2vw, 4rem);
}

.atalho__nome {
  font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--creme-100);
  overflow-wrap: break-word;
}

.atalho__desc {
  font-size: clamp(0.6875rem, 0.65rem + 0.2vw, 0.8125rem);
  line-height: 1.35;
  color: var(--tan-300);
}

.atalho__seta {
  position: absolute;
  z-index: 1;
  right: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  bottom: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  display: grid;
  place-items: center;
  width: clamp(30px, 26px + 1.4vw, 40px);
  height: clamp(30px, 26px + 1.4vw, 40px);
  border-radius: 50%;
  background: var(--creme-50);
  color: var(--espresso-800);
  transition: background-color var(--transicao), color var(--transicao);
}

.atalho:hover .atalho__seta {
  background: linear-gradient(122deg, var(--dourado-500), var(--dourado-300));
}

.atalho__seta svg {
  width: 55%;
  height: 55%;
}

/* 10 — PROCEDIMENTOS ====================================================== */

.procedimentos__intro {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* O espaçamento aqui vem do gap da grade, não da margem padrão do cabeçalho. */
.procedimentos__intro .cabecalho-secao {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .procedimentos__intro {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
}

.procedimentos__figura {
  margin: 0;
}

.procedimentos__figura img {
  width: 100%;
  border-radius: var(--raio-grande);
  border: 1px solid rgba(196, 165, 123, 0.18);
}

/* As setas só existem enquanto a fila rola na horizontal. A partir de 900px
   as abas quebram em duas linhas e não há para onde rolar. */
.procedimentos__navegacao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  /* A folga precisa ser maior que o brilho da seta: com 0.5rem o halo caía em
     cima da aba cortada ao lado e parecia que a seta cobria o texto. */
  gap: 0.9rem;
  /* O espaço abaixo vive aqui, e não no rolador, para as setas ficarem
     centradas em relação à fila de abas. A medida é a mesma de antes. */
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}

/* No Clarity as pessoas ficavam só na categoria já aberta: a fila rola de lado
   e não parecia rolar. A dica ocupa a linha de cima do bloco e só aparece
   quando a fila realmente tem para onde ir — quem vê as cinco abas de uma vez
   não precisa dela. */
.abas__dica {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: var(--t-peq);
  color: var(--texto-escuro-suave);
}

.procedimentos__navegacao[data-rolavel='true'] .abas__dica {
  display: flex;
}

.abas__dica strong {
  font-weight: 500;
  color: var(--dourado-300);
}

.abas__dica svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: var(--dourado-400);
  animation: dica-desliza 2.4s ease-in-out infinite;
}

/* Assim que a pessoa rola a fila, a seta para de chamar. */
.procedimentos__navegacao[data-usado='true'] .abas__dica svg {
  animation: none;
}

@keyframes dica-desliza {
  0%,
  60%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .abas__dica svg {
    animation: none;
  }
}

.abas__seta {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(196, 165, 123, 0.32);
  color: var(--tan-300);
  transition: border-color var(--transicao), color var(--transicao);
}

.abas__seta:hover:not(:disabled) {
  border-color: var(--dourado-400);
  color: var(--creme-100);
}

.abas__seta:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.abas__seta svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* As setas de categoria são o único caminho para as outras categorias no
   celular, e passavam despercebidas como contorno fino. Aqui elas viram botão
   dourado cheio e pulsam até a pessoa usar a fila pela primeira vez — depois o
   JavaScript marca a fila como usada e o movimento para, para não virar ruído
   em cada visita. */
.abas__seta {
  width: 38px;
  height: 38px;
  border: 0;
  /* Creme, e não dourado: a aba ativa já é uma pílula dourada, então uma seta
     dourada some ao lado dela. O claro sobre o marrom é o maior contraste que
     a paleta oferece. */
  background: linear-gradient(140deg, #fff, var(--creme-200));
  color: var(--espresso-800);
  box-shadow: 0 3px 10px -4px rgba(232, 204, 143, 0.8);
  animation: pulso-seta 1.8s ease-in-out infinite;
}

.abas__seta svg {
  width: 16px;
  height: 16px;
}

.abas__seta:hover:not(:disabled) {
  color: var(--espresso-900);
  background: linear-gradient(140deg, var(--creme-50), var(--dourado-300));
}

/* Desabilitada não chama: seria convidar para um caminho que não existe. */
.abas__seta:disabled {
  opacity: 0.28;
  background: none;
  border: 1px solid rgba(196, 165, 123, 0.32);
  color: var(--tan-300);
  box-shadow: none;
  animation: none;
}

.procedimentos__navegacao[data-usado='true'] .abas__seta {
  animation: none;
}

@keyframes pulso-seta {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 3px 10px -4px rgba(232, 204, 143, 0.8), 0 0 0 0 rgba(255, 250, 240, 0.55);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 6px 16px -6px rgba(255, 250, 240, 0.6), 0 0 0 5px rgba(232, 204, 143, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .abas__seta {
    animation: none;
  }
}

@media (min-width: 900px) {
  .abas__seta {
    display: none;
  }
}

.procedimentos__abas {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
  padding-inline: 2px;
  margin-inline: -2px;
}

.procedimentos__abas::-webkit-scrollbar {
  display: none;
}

/* Enquanto a fila rola, a aba que não coube desvanece na ponta. Sem isso ela
   termina num corte reto colado na seta, que é o que dava a impressão de
   sobreposição. Acima de 900px as abas quebram em linhas e não há corte. */
@media (max-width: 899px) {
  .procedimentos__abas {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 14px,
      #000 calc(100% - 20px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 14px,
      #000 calc(100% - 20px),
      transparent 100%
    );
  }
}

@media (min-width: 900px) {
  .procedimentos__abas {
    flex-wrap: wrap;
    overflow: visible;
    justify-content: center;
  }
}

.aba {
  /* Idem: a contagem carrega texto oculto que não pode escapar do rolador. */
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border-radius: var(--raio-cheio);
  border: 1px solid rgba(196, 165, 123, 0.32);
  color: var(--tan-300);
  font-size: var(--t-peq);
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background-color var(--transicao), border-color var(--transicao),
    color var(--transicao);
}

.aba:hover {
  border-color: var(--dourado-400);
  color: var(--creme-100);
}

.aba[aria-selected='true'] {
  background: linear-gradient(122deg, var(--dourado-500), var(--dourado-300));
  border-color: transparent;
  color: var(--espresso-900);
  font-weight: 500;
}

.aba__contagem {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Dois por linha já no celular: o cartão é curto e assim a categoria inteira
   cabe em menos rolagem. De 720px em diante entram mais colunas. */
.procedimentos__grade {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
  .procedimentos__grade {
    gap: 0.875rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  }
}

.cartao-procedimento {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(0.8rem, 0.45rem + 1.5vw, 1.25rem);
  min-height: 100%;
  text-align: left;
  border-radius: var(--raio);
  border: 1px solid rgba(196, 165, 123, 0.2);
  background: linear-gradient(158deg, rgba(43, 24, 16, 0.9), rgba(26, 15, 10, 0.72));
  color: var(--creme-100);
  transition: border-color var(--transicao), transform var(--transicao),
    box-shadow var(--transicao);
}

.cartao-procedimento:hover {
  border-color: rgba(201, 162, 39, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.9);
}

.cartao-procedimento__nome {
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.cartao-procedimento__resumo {
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  line-height: 1.5;
  color: var(--texto-escuro-suave);
  flex: 1;
}

.cartao-procedimento__acao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  color: var(--dourado-400);
}

.cartao-procedimento__acao svg {
  width: 0.9em;
  height: 0.9em;
  fill: currentColor;
  transition: transform var(--transicao);
}

.cartao-procedimento:hover .cartao-procedimento__acao svg {
  transform: translateX(3px);
}

/* Recolhido, o painel mostra só os quatro primeiros da categoria — que é a
   ordem de procura definida em procedimentos.js. Vale apenas no celular: de
   720px em diante a categoria inteira aparece e o botão sai de cena. */
@media (max-width: 719px) {
  .painel-procedimentos[data-recolhido='true'] .cartao-procedimento:nth-child(n + 5) {
    display: none;
  }
}

.procedimentos__mais {
  width: 100%;
  margin-top: 0.875rem;
}

/* Ao fechar a lista, o painel volta para a tela inteiro — e não colado embaixo
   do cabeçalho fixo. */
.painel-procedimentos {
  scroll-margin-top: calc(var(--altura-cabecalho) + 1rem);
}

@media (min-width: 720px) {
  .procedimentos__mais {
    display: none;
  }
}

/* Modal de detalhe --------------------------------------------------------- */

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(85vh, 46rem);
  padding: 0;
  border: 0;
  border-radius: var(--raio-grande);
  background: var(--creme-100);
  color: var(--texto-claro-forte);
  box-shadow: var(--sombra-flutuante);
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.modal::backdrop {
  background: rgba(12, 7, 3, 0.7);
  backdrop-filter: blur(4px);
}

.modal[open] {
  animation: modal-entra 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes modal-entra {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px)) scale(0.98);
  }
}

.modal__interno {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  max-height: min(85vh, 46rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__fechar {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--marrom-500);
  background: rgba(239, 229, 214, 0.9);
  transition: background-color var(--transicao), color var(--transicao);
}

.modal__fechar:hover {
  background: var(--creme-200);
  color: var(--espresso-600);
}

.modal__fechar svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.modal__categoria {
  /* Mesmo recuo do título: o botão de fechar flutua neste canto, e no celular
     um rótulo longo passava por baixo dele. */
  padding-right: 2.5rem;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--trilha-larga);
  color: var(--dourado-700);
}

.modal__titulo {
  margin-top: 0.6rem;
  padding-right: 2.5rem;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 300;
  color: var(--espresso-600);
}

.modal__descricao {
  margin-top: 1rem;
  color: var(--texto-claro-suave);
}

.modal__indicacoes {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--raio);
  background: var(--creme-200);
}

.modal__indicacoes h3 {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--trilha-larga);
  color: var(--dourado-700);
  margin-bottom: 0.6rem;
}

.modal__indicacoes ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--t-peq);
  color: var(--texto-claro-suave);
}

.modal__indicacoes li + li {
  margin-top: 0.35rem;
}

.modal__aviso {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--texto-claro-suave);
}

.modal__acoes {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 480px) {
  .modal__acoes {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* Os dois caminhos de avaliação — online e presencial — têm o mesmo peso na
   decisão, então dividem a linha em partes iguais em vez de "botão e link". */
@media (min-width: 480px) {
  .modal__acoes--duplo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Lista de procedimentos de uma preocupação ------------------------------- */

.opcoes {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.opcao {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.9rem 1rem;
  text-align: left;
  border: 1px solid rgba(74, 46, 31, 0.16);
  border-radius: var(--raio);
  background: var(--creme-200);
  color: inherit;
  transition: border-color var(--transicao), background-color var(--transicao),
    transform var(--transicao);
}

.opcao:hover {
  border-color: var(--dourado-700);
  background: var(--creme-100);
  transform: translateX(2px);
}

/* Ocupa a linha inteira para empurrar a seta até a borda do cartão, em vez de
   deixá-la colada no fim do texto mais longo. */
.opcao__texto {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.opcao__categoria {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--trilha-larga);
  color: var(--dourado-700);
}

.opcao__nome {
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--espresso-600);
}

.opcao__resumo {
  font-size: var(--t-peq);
  line-height: 1.5;
  color: var(--texto-claro-suave);
}

.opcao__seta {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--marrom-500);
  background: rgba(239, 229, 214, 0.9);
}

.opcao__seta svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Volta da vista de detalhe para a lista da preocupação. */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-size: var(--t-peq);
  color: var(--marrom-500);
  transition: color var(--transicao);
}

.voltar:hover {
  color: var(--espresso-600);
}

.voltar svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.encontrar__presencial {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--raio);
  background: var(--creme-200);
}

/* 11 — ANTES E DEPOIS ===================================================== */

/* Um comparativo só, centralizado. As duas fotos ficam uma sobre a outra e a
   de cima é recortada até a posição da divisória — arrastar muda só essa
   posição, então nada é redesenhado além do recorte. Quem controla é um
   <input type="range"> invisível esticado sobre a foto: assim o arraste, o
   toque, o clique e o teclado vêm prontos do navegador. */
/* Dois casos lado a lado a partir de 760px; empilhados abaixo disso. Os dois
   fecham no mesmo aspecto, então os cartões têm a mesma altura sem truque. */
.comparadores {
  display: grid;
  gap: clamp(2rem, 1.25rem + 3vw, 3.25rem);
  justify-items: center;
}

@media (min-width: 760px) {
  .comparadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* No celular o cartão fica menor de propósito: a metade original tem 540px de
   largura, e esticá-la para a tela inteira só amplia pixel. Em 300px a tela de
   densidade 2 pede 600px — quase o nativo. */
.comparador {
  max-width: 300px;
  margin: 0 auto;
}

@media (min-width: 560px) {
  .comparador {
    max-width: 400px;
  }
}

/* O quadro é quem posiciona e recorta. A legenda fica fora dele, senão a foto
   de cima — que cobre todo o elemento posicionado — passaria por cima dela. */
.comparador__quadro {
  position: relative;
  border-radius: var(--raio-grande);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  /* pan-y deixa a página rolar na vertical e reserva o gesto horizontal para o
     comparativo. user-select evita o texto ser selecionado durante o arraste. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.comparador__camada img {
  display: block;
  width: 100%;
  height: auto;
}

.comparador__camada--antes {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--posicao)) 0 0);
}

.comparador__camada--antes img {
  height: 100%;
  object-fit: cover;
}

.comparador__selo {
  position: absolute;
  top: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--raio-cheio);
  background: rgba(18, 10, 5, 0.72);
  color: var(--creme-100);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
}

.comparador__selo--antes {
  left: 0.75rem;
}

.comparador__selo--depois {
  right: 0.75rem;
  background: linear-gradient(122deg, var(--dourado-500), var(--dourado-300));
  color: var(--espresso-900);
}

.comparador__divisa {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--posicao);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 250, 240, 0.9);
  pointer-events: none;
}

.comparador__alca {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--creme-50);
  color: var(--espresso-800);
  box-shadow: 0 3px 12px -3px rgba(18, 10, 5, 0.6);
}

.comparador__alca svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* O controle cobre a foto inteira e fica invisível: o que se vê é a divisória
   acima, que segue a mesma posição. */
.comparador__controle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  appearance: none;
  background: none;
  /* O arraste é tratado pelo quadro; deixar o range capturar o ponteiro
     traria de volta o comportamento de "só arrasta em cima do thumb". */
  pointer-events: none;
}

.comparador__controle::-webkit-slider-thumb {
  appearance: none;
  width: 44px;
  height: 100%;
}

.comparador__controle::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: 0;
}

.comparador__controle:focus-visible {
  opacity: 1;
  outline: 2px solid var(--dourado-400);
  outline-offset: -2px;
}

.comparador__legenda {
  margin-top: 0.9rem;
  font-size: var(--t-peq);
  line-height: 1.5;
  text-align: center;
  color: var(--texto-claro-suave);
}

/* "Divulgação autorizada pelo paciente": o CFBM pede o aviso na própria imagem
   (Art. 10, §1º, V). Ele fica por cima das duas camadas e da divisória, então
   aparece inteiro em qualquer posição do arraste. A largura max-content evita
   que ele quebre na metade do quadro, que é o espaço que sobra à direita do
   left: 50%. */
.comparador__aviso {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  padding: 0.3rem 0.75rem;
  border-radius: var(--raio-cheio);
  background: rgba(18, 10, 5, 0.72);
  color: var(--creme-100);
  font-size: var(--t-eyebrow);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
}

/* A frase de que a imagem não garante resultado (Art. 10, §1º, IV). Vale para
   os dois casos, então aparece uma vez, logo abaixo deles. */
.antes-depois__aviso {
  max-width: 46rem;
  margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) auto 0;
  font-size: var(--t-peq);
  line-height: 1.6;
  text-align: center;
  color: var(--texto-claro-suave);
}

/* 11B — DEPOIMENTOS ======================================================= */

/* A mesma base clara do antes e depois, com um véu de creme mais fundo no alto:
   separa as duas seções vizinhas sem trocar de tom. */
.depoimentos {
  background: linear-gradient(180deg, var(--creme-200), var(--creme-100) 70%);
}

/* O carrossel de cartões escritos à mão saiu daqui: as avaliações agora vêm do
   Google pelo Trustindex, que traz o próprio layout, as próprias cores e a
   própria navegação. Por isso este bloco encolheu — só sobrou o que é da
   página, e não do widget.

   A altura mínima existe para a seção não pular: o widget só monta no primeiro
   gesto de rolagem, e sem reserva o que vem abaixo dava um salto justamente
   enquanto a pessoa rola. Os valores são medidos, não estimados — o carrossel
   fica mais alto quanto mais estreita a coluna, porque o texto das avaliações
   quebra em mais linhas. Medidas do layout 14 por largura de container: 467px
   a 335, 387px a 500, 347px de 676 para cima. Trocar o widget no painel do
   Trustindex muda essas alturas, então vale remedir. */
.depoimentos__avaliacoes {
  min-height: 470px;
}

@media (min-width: 640px) {
  .depoimentos__avaliacoes {
    min-height: 390px;
  }
}

@media (min-width: 768px) {
  .depoimentos__avaliacoes {
    min-height: 350px;
  }
}

/* O widget traz a Poppins do CDN do Trustindex. A página toda é Jost e
   Cormorant, e uma terceira família aparecendo só nesta faixa lê como defeito —
   fora de somar fonte a um primeiro carregamento que o projeto conta de perto.
   O !important é necessário: as regras do widget vêm de folha externa e miram
   os elementos dele diretamente. Como nada mais usa a Poppins, o navegador não
   chega a baixá-la. */
.depoimentos__avaliacoes .ti-widget,
.depoimentos__avaliacoes .ti-widget * {
  font-family: var(--fonte-ui) !important;
}

/* Sobrou só para o <noscript> do widget: a nota que fechava a seção saiu a
   pedido. Mantém o desenho do aviso do antes e depois, caso volte. */
.depoimentos__nota {
  max-width: 46rem;
  margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) auto 0;
  font-size: var(--t-peq);
  line-height: 1.6;
  text-align: center;
  color: var(--texto-claro-suave);
}

.depoimentos__nota a {
  color: var(--marrom-500);
  text-underline-offset: 2px;
}

/* 12 — PROMOÇÕES DO MÊS =================================================== */

/* São só dois, e sem foto: cabem lado a lado em qualquer largura. O que
   encolhe em tela estreita é o cartão — respiro, corpo do título e do botão —
   para nada transbordar. */
.promocoes__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.25rem + 2vw, 2rem);
  max-width: 56rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.cartao-promocao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.6rem, 0.35rem + 1vw, 0.85rem);
  padding: clamp(1rem, 0.4rem + 2.4vw, 2.25rem);
  border-radius: var(--raio-grande);
  border: 1px solid rgba(196, 165, 123, 0.22);
  background: linear-gradient(158deg, rgba(43, 24, 16, 0.8), rgba(18, 10, 5, 0.5));
  transition: border-color var(--transicao), transform var(--transicao);
}

.cartao-promocao:hover {
  border-color: rgba(201, 162, 39, 0.6);
  transform: translateY(-3px);
}

.cartao-promocao__selo {
  padding: 0.3rem 0.85rem;
  border-radius: var(--raio-cheio);
  background: linear-gradient(122deg, var(--dourado-500), var(--dourado-300));
  color: var(--espresso-900);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
}

.cartao-promocao h3 {
  font-size: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  font-weight: 300;
  color: var(--creme-100);
  /* Palavra longa em coluna estreita: hifeniza em vez de furar o cartão. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.cartao-promocao p {
  font-size: var(--t-peq);
  line-height: 1.6;
  color: var(--texto-escuro-suave);
  flex: 1;
}

.cartao-promocao p {
  overflow-wrap: break-word;
}

/* O botão ocupa a coluna inteira e quebra em duas linhas quando precisa —
   é o que impede o rótulo de empurrar a borda do cartão para fora. */
.cartao-promocao .botao {
  margin-top: 0.5rem;
  width: 100%;
  min-height: clamp(44px, 40px + 1.5vw, 52px);
  padding-inline: clamp(0.5rem, 2vw, 1.75rem);
  font-size: clamp(0.6875rem, 0.6rem + 0.35vw, 0.875rem);
  letter-spacing: clamp(0.04em, 0.02em + 0.2vw, 0.12em);
}

/* 13 — LINHA DE PRODUTOS ================================================== */

.linha__grade {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .linha__grade {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.linha__figura {
  margin: 0;
  position: relative;
}

.linha__figura img {
  width: 100%;
  border-radius: var(--raio-grande);
}

/* Abaixo de 900px a grade vira uma coluna só e a foto passava a ocupar a
   largura inteira do envoltório — num tablet ou numa janela estreita de
   desktop isso rendia quase 1100px de altura, com o retrato de produto
   engolindo a seção. Aqui ela ganha teto e fica centrada; no celular o
   min() devolve os 100% de sempre. */
@media (max-width: 899px) {
  .linha__figura {
    width: min(100%, 22rem);
    margin-inline: auto;
  }
}

.produtos {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.produto {
  padding: 1.25rem 1.35rem;
  border-radius: var(--raio);
  border: 1px solid rgba(196, 165, 123, 0.22);
  background: linear-gradient(158deg, rgba(43, 24, 16, 0.75), rgba(18, 10, 5, 0.55));
}

.produto__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.produto h3 {
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--creme-100);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.produto__volume {
  flex: none;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--dourado-400);
  font-variant-numeric: tabular-nums;
}

.produto p {
  margin-top: 0.6rem;
  font-size: var(--t-peq);
  color: var(--texto-escuro-suave);
}

/* 13B — DISPLAY (faixa de marcas) ========================================= */

/* Os quatro desenhos em creme, todos do mesmo peso visual. Como no resto do
   site, os arquivos são silhueta e a cor vem daqui — nítidos em qualquer
   tamanho, e é só trocar o background para mudar de tom. */
.display {
  --display-vao: clamp(2rem, 6vw, 5rem);
  --display-altura: clamp(26px, 2.6vw, 34px);
  padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  overflow: hidden;
}

/* Da esquerda para a direita: parte de -50% e caminha até 0. O trilho mede o
   próprio conteúdo — quem garante que ele passe da borda da tela é a
   quantidade de filas no HTML, não um piso em vw. Esticar as filas para
   preencher a tela era o que desalinhava o ritmo: a sobra ia para dentro de
   cada fila e a emenda ficava mais apertada que o resto.

   A duração acompanha o comprimento da fila: com o UltraColágeno ela ficou
   1,5 vez mais longa, e os 45s de antes viraram 67s — senão a faixa andaria
   mais depressa, não só mais longe. */
.display__trilho {
  display: flex;
  align-items: center;
  width: max-content;
  animation: display-desliza 67s linear infinite;
}

/* O vão entre as marcas é fixo, e cada fila leva meio vão em cada ponta: as
   duas metades vizinhas se somam e a emenda fica com exatamente a mesma
   distância que há dentro da fila. */
.display__fila {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--display-vao);
  padding-inline: calc(var(--display-vao) / 2);
  margin: 0;
  list-style: none;
}

.display__fila > li {
  display: flex;
  align-items: center;
}

/* O Soberana vem com "Especializações" por cima, como no hero: sem a linha,
   o selo passaria por marca da casa em vez de método aplicado aqui. */
.display__par {
  flex-direction: column;
  gap: 0.4rem;
}

.display__rotulo {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  color: var(--texto-escuro-suave);
  white-space: nowrap;
}

.display__logo {
  display: block;
  background: var(--creme-100);
  height: var(--display-altura);
  width: auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* O lockup da Simone é empilhado em três linhas, então ao mesmo corpo de letra
   das outras duas ele precisa de mais altura — senão a assinatura de baixo
   fica ilegível. */
.display__logo--simone {
  aspect-ratio: 660 / 418;
  height: calc(var(--display-altura) * 2.3);
  -webkit-mask-image: url(../img/display-simone-dante.png);
  mask-image: url(../img/display-simone-dante.png);
}

.display__logo--criodasi {
  aspect-ratio: 660 / 133;
  -webkit-mask-image: url(../img/display-criodasi.png);
  mask-image: url(../img/display-criodasi.png);
}

/* Mais alto que o CrioDaSi só pelo acento e pela perna do "g": assim as letras
   dos dois saem do mesmo tamanho. Centrado na fila, o desenho subiria por
   causa do "g" — o deslocamento devolve a linha de base à do vizinho. */
.display__logo--ultracolageno {
  aspect-ratio: 1080 / 168;
  height: calc(var(--display-altura) * 1.27);
  transform: translateY(9.6%);
  -webkit-mask-image: url(../img/display-ultracolageno.png);
  mask-image: url(../img/display-ultracolageno.png);
}

.display__logo--soberana {
  aspect-ratio: 660 / 137;
  height: calc(var(--display-altura) * 1.25);
  -webkit-mask-image: url(../img/display-metodo-soberana.png);
  mask-image: url(../img/display-metodo-soberana.png);
}

@keyframes display-desliza {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* Quem pediu menos movimento não recebe a faixa andando: ela para e vira uma
   fila que se arrasta com o dedo. */
@media (prefers-reduced-motion: reduce) {
  .display__trilho {
    animation: none;
    transform: none;
  }

  .display {
    overflow-x: auto;
  }
}

/* 14 — FAQ ================================================================ */

/* A lista inteira começa recolhida atrás de um botão — são oito perguntas, e
   abertas empurravam o resto da página para longe. Quem liga o estado é o
   JavaScript: sem ele as perguntas continuam todas na página, que é como os
   buscadores precisam encontrá-las. */
.faq {
  max-width: 52rem;
  margin-inline: auto;
}

.pergunta {
  border-bottom: 1px solid rgba(74, 46, 31, 0.16);
}

.pergunta__gatilho {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 0;
  text-align: left;
  font-size: var(--t-h3);
  font-weight: 400;
  color: var(--espresso-600);
  transition: color var(--transicao);
}

.pergunta__gatilho:hover {
  color: var(--marrom-500);
}

.pergunta__sinal {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 0.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.5);
  transition: transform var(--transicao), background-color var(--transicao);
}

.pergunta__sinal::before,
.pergunta__sinal::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 1.5px;
  background: var(--dourado-700);
  transition: transform var(--transicao);
}

.pergunta__sinal::after {
  transform: rotate(90deg);
}

.pergunta__gatilho[aria-expanded='true'] .pergunta__sinal {
  background: rgba(201, 162, 39, 0.14);
}

.pergunta__gatilho[aria-expanded='true'] .pergunta__sinal::after {
  transform: rotate(0deg);
}

/* Animação de altura sem medir o conteúdo em JS. */
.pergunta__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transicao-lenta);
}

.pergunta__resposta[data-aberta='true'] {
  grid-template-rows: 1fr;
}

.pergunta__resposta > div {
  overflow: hidden;
}

.pergunta__resposta p {
  padding-bottom: 1.35rem;
  max-width: 54ch;
  color: var(--texto-claro-suave);
}

/* 15 — LOCALIZAÇÃO ======================================================== */

/* Colunas que só existem enquanto houver cartão para preencher: com um
   cartão só, ele fica centralizado em vez de encostado à esquerda. */
.local__grade {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  justify-content: center;
  grid-template-columns: minmax(0, 34rem);
}

@media (min-width: 860px) {
  .local__grade {
    grid-template-columns: repeat(auto-fit, minmax(0, 30rem));
  }
}

.cartao-local {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-radius: var(--raio-grande);
  border: 1px solid rgba(196, 165, 123, 0.22);
  background: linear-gradient(158deg, rgba(43, 24, 16, 0.8), rgba(18, 10, 5, 0.5));
}

.cartao-local__tipo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--trilha-larga);
  color: var(--dourado-400);
}

.cartao-local__tipo svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.cartao-local h3 {
  margin-top: 0.85rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 300;
  color: var(--creme-100);
}

.cartao-local p {
  margin-top: 0.75rem;
  font-size: var(--t-peq);
  color: var(--texto-escuro-suave);
}

.cartao-local .link-seta {
  margin-top: 1.15rem;
}

.contatos {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}

.contatos a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--t-peq);
  color: var(--creme-100);
  text-decoration: none;
  padding-block: 0.25rem;
  transition: color var(--transicao);
}

.contatos a:hover {
  color: var(--dourado-300);
}

.contatos svg {
  width: 1.05em;
  height: 1.05em;
  fill: var(--dourado-400);
  flex: none;
}

/* 16 — RODAPÉ ============================================================= */

.rodape {
  background: var(--espresso-900);
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-bottom: calc(var(--altura-barra-fixa) + 2rem);
  border-top: 1px solid rgba(196, 165, 123, 0.14);
}

@media (min-width: 1024px) {
  .rodape {
    padding-bottom: 2.5rem;
  }
}

.rodape__grade {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3rem);
}

@media (min-width: 760px) {
  .rodape__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.rodape h2 {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--trilha-larga);
  color: var(--dourado-400);
  margin-bottom: 1.1rem;
}

.rodape ul {
  display: grid;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.rodape a {
  font-size: var(--t-peq);
  color: var(--texto-escuro-suave);
  text-decoration: none;
  transition: color var(--transicao);
}

.rodape a:hover {
  color: var(--dourado-300);
}

/* O horário é o único contato sem link: sem isto herdava o corpo e o creme do
   texto e ficava maior e mais claro que os vizinhos. */
.rodape__horario {
  font-size: var(--t-peq);
  color: var(--texto-escuro-suave);
}

.rodape__base {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(196, 165, 123, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: rgba(196, 165, 123, 0.75);
}

.rodape__base a {
  font-size: inherit;
}

/* Documentos longos: política de privacidade e afins ---------------------- */

.documento {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  max-width: var(--largura-texto);
}

.documento h2 {
  margin-top: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 400;
  color: var(--espresso-600);
}

.documento p,
.documento ul {
  margin-top: 1rem;
  color: var(--texto-claro-suave);
}

.documento ul {
  padding-left: 1.25rem;
}

.documento li + li {
  margin-top: 0.5rem;
}

.documento strong {
  color: var(--espresso-600);
  font-weight: 500;
}

.documento a {
  color: var(--marrom-500);
  text-underline-offset: 3px;
}

/* Página 404 -------------------------------------------------------------- */

.erro {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--altura-cabecalho) + 2rem) var(--gutter) 3rem;
}

.erro__codigo {
  font-family: var(--fonte-serifa);
  font-size: clamp(4rem, 3rem + 8vw, 8rem);
  font-weight: 300;
  line-height: 1;
  background: linear-gradient(118deg, #b8862f, var(--dourado-300) 55%, #b8862f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.erro__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.5rem;
}

/* 17 — BARRA FIXA E MOVIMENTO ============================================= */

/* Só o WhatsApp: sem o botão de agendar do lado, a faixa cheia de fundo virava
   uma barra vazia. Aqui ele flutua no canto, como um botão de ação. */
.barra-fixa {
  position: fixed;
  inset: auto var(--gutter) 0 auto;
  z-index: 55;
  display: flex;
  justify-content: flex-end;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateY(0);
  transition: transform var(--transicao-lenta), opacity var(--transicao);
}

.barra-fixa[data-oculta='true'] {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

.barra-fixa__whatsapp {
  flex: 0 0 auto !important;
  width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0 !important;
  border-radius: 50%;
  background: #25d366;
  border: 0;
  color: #072b18;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px -6px rgba(18, 10, 5, 0.7);
}

.barra-fixa__whatsapp svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

@media (min-width: 1024px) {
  .barra-fixa {
    display: none;
  }
}

/* Revelação em rolagem ---------------------------------------------------- */

[data-revelar] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-revelar][data-visivel='true'] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-revelar] {
    opacity: 1;
    transform: none;
  }
}

/* 18 — SEM JAVASCRIPT ===================================================== */

/* A classe .sem-js sai do <html> assim que o script roda. Enquanto estiver
   lá, nada de conteúdo escondido nem de controle que não funciona. */

.sem-js [data-revelar] {
  opacity: 1;
  transform: none;
}

/* Sem abas funcionando, mostra todas as categorias de uma vez. */
.sem-js .procedimentos__abas,
.sem-js .abas__seta {
  display: none;
}

/* As setas dos depoimentos rolam a fila por script; sem ele fica o arrasto. */
.sem-js .depoimentos__setas {
  display: none;
}

/* Sem JavaScript não há abas para trocar, então todos os painéis aparecem —
   inclusive os marcados com hidden. Precisa de !important para vencer a regra
   global de [hidden]; entre dois !important, ganha quem tem mais especificidade,
   e este seletor tem. */
.sem-js .painel-procedimentos[hidden] {
  display: block !important;
}

.sem-js .painel-procedimentos + .painel-procedimentos {
  margin-top: 0.875rem;
}

/* O acordeão do FAQ abre por script; sem ele, tudo já vem aberto. */
.sem-js .pergunta__resposta {
  grid-template-rows: 1fr;
}

.sem-js .pergunta__gatilho {
  cursor: default;
}

.sem-js .pergunta__sinal {
  display: none;
}

/* Os cartões abrem um modal por JS; sem ele, viram texto simples. */
.sem-js .cartao-procedimento {
  cursor: default;
}

.sem-js .cartao-procedimento__acao,
.sem-js .agenda__painel {
  display: none;
}

.agenda__semjs {
  padding: 1.25rem 0 0.25rem;
  font-size: var(--t-peq);
  line-height: 1.6;
  color: var(--texto-claro-suave);
}

.agenda__semjs a {
  color: var(--marrom-500);
  font-weight: 500;
  text-underline-offset: 3px;
}

/* 19 — BLOCOS RECOLHÍVEIS ================================================= */

/* As dúvidas começam recolhidas atrás de um botão. A regra pede a classe do
   bloco de propósito: data-recolhido também marca o cartão da agenda e os
   painéis de procedimentos, que escondem só parte do conteúdo — uma regra
   solta em [data-recolhido] apagava os dois inteiros. Fica no fim da folha
   porque precisa vencer o display declarado pelo componente. Quem liga o
   estado é o JavaScript: sem ele o conteúdo aparece inteiro, que é como os
   buscadores precisam encontrá-lo. */
.bloco-recolhivel[data-recolhido='true'] {
  display: none;
}

/* Variante que não some: o começo fica espiando e se apaga em degradê, para dar
   vontade de clicar no "Mostrar mais". Quanto espia vem de --espiar, definida
   por quem usa. Serve à seção da clínica. */
.bloco-recolhivel--espiar[data-recolhido='true'] {
  display: block;
  max-height: var(--espiar, 12rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.bloco-recolhivel__botao {
  display: flex;
  width: 100%;
  max-width: 26rem;
  margin: 1.75rem auto 0;
}




/* 20 — AVISO DE COOKIES =================================================== */

/* Cartão discreto no canto inferior direito, na primeira visita. Fica acima do
   cabeçalho (z-index 60) porque é um pedido de decisão, e abaixo do pulo para
   o conteúdo (100), que nunca pode ficar preso atrás de nada. É de propósito
   miúdo: avisa sem tomar a tela. No mobile sobe a altura da barra fixa para
   não cobrir o WhatsApp — no desktop --altura-barra-fixa vale 0 e a conta
   sobra só o respiro. */
.cookies {
  position: fixed;
  z-index: 70;
  inset: auto var(--gutter) 0 auto;
  bottom: calc(var(--altura-barra-fixa) + max(0.75rem, env(safe-area-inset-bottom)));
  width: min(19.5rem, calc(100vw - var(--gutter) * 2));
  pointer-events: none;
}

.cookies__caixa {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  padding: 0.7rem 0.8rem;
  border-radius: var(--raio-peq);
  border: 1px solid rgba(196, 165, 123, 0.28);
  background: var(--espresso-700);
  box-shadow: var(--sombra-flutuante);
  color: var(--texto-escuro-forte);
  font-family: var(--fonte-ui);
  transform: translateY(calc(100% + 1.5rem));
  opacity: 0;
  transition: transform var(--transicao-lenta), opacity var(--transicao);
}

.cookies[data-aberto='true'] .cookies__caixa {
  transform: none;
  opacity: 1;
}

/* Linha do topo: o recado e o botão de gerenciar lado a lado. */
.cookies__linha {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cookies__texto {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.78125rem;
  line-height: 1.45;
  color: var(--texto-escuro-forte);
}

.cookies__texto strong {
  font-weight: 500;
  color: var(--dourado-300);
}

.cookies__texto a {
  color: var(--tan-300);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookies__texto a:hover {
  color: var(--dourado-300);
}

.cookies__pulso {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--dourado-500);
  vertical-align: 0.08em;
}

.cookies__gerenciar {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0.4rem 0.75rem;
  border-radius: var(--raio-cheio);
  border: 1px solid rgba(196, 165, 123, 0.5);
  background: transparent;
  color: var(--creme-100);
  font-family: var(--fonte-ui);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--trilha-media);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao);
}

.cookies__gerenciar:hover {
  background: rgba(196, 165, 123, 0.14);
  border-color: var(--tan-300);
}

/* Painel de preferências -------------------------------------------------- */

.cookies__painel {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(196, 165, 123, 0.22);
  display: grid;
  gap: 0.6rem;
}

.cookies__escolha {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.cookies__rotulo {
  display: block;
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--texto-escuro-forte);
}

.cookies__nota {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--texto-escuro-suave);
}

/* Chavinha: um checkbox de verdade, escondido, com o trilho desenhado por
   cima. Assim teclado e leitor de tela continuam funcionando de graça. */
.cookies__chave {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 18px;
  margin-top: 0.05rem;
}

.cookies__chave input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cookies__trilho {
  position: absolute;
  inset: 0;
  border-radius: var(--raio-cheio);
  background: rgba(196, 165, 123, 0.2);
  border: 1px solid rgba(196, 165, 123, 0.35);
  transition: background-color var(--transicao), border-color var(--transicao);
  pointer-events: none;
}

.cookies__trilho::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--creme-100);
  transition: transform var(--transicao), background-color var(--transicao);
}

.cookies__chave input:checked + .cookies__trilho {
  background: var(--dourado-500);
  border-color: var(--dourado-400);
}

.cookies__chave input:checked + .cookies__trilho::after {
  transform: translateX(14px);
  background: var(--espresso-900);
}

.cookies__chave input:focus-visible + .cookies__trilho {
  outline: 2px solid var(--dourado-300);
  outline-offset: 2px;
}

.cookies__chave input:disabled {
  cursor: default;
}

.cookies__chave input:disabled + .cookies__trilho {
  opacity: 0.65;
}

.cookies__salvar {
  width: 100%;
  min-height: 0;
  padding: 0.55rem 1rem;
  margin-top: 0.1rem;
  border: 0;
  cursor: pointer;
  font-family: var(--fonte-ui);
  font-size: 0.625rem;
}

@media (prefers-reduced-motion: reduce) {
  .cookies__caixa {
    transform: none;
  }
}