/* ==========================================================================
   Dr. Davi Klava — folha de estilo principal · Design 2.0
   Direção: "consultório editorial" — quiet luxury médico, terroso, sereno.
   Depende de tokens.css. Nenhum valor literal de cor/fonte/espaço aqui.
   ========================================================================== */

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
  scrollbar-color: var(--color-brown) var(--color-cream);
  /* Permite animar height:auto no <details> (Chrome 129+; no-op nos demais) */
  interpolate-size: allow-keywords;
}
body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-text);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--color-link-accessible); outline-offset: 3px; border-radius: 4px; }
/* Sobre fundos marrons o teal escuro reprova 3:1 — anel branco */
.header :focus-visible, .hero :focus-visible, .section--dark :focus-visible,
.nav--mobile :focus-visible { outline-color: var(--color-on-dark); }
::selection { background: var(--color-brown); color: var(--color-cream); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-float);
  background: var(--color-white); color: var(--color-heading);
  padding: var(--space-4); border-radius: var(--radius-xs);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- tipografia */
h1, h2, .h1, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: var(--color-heading);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
/* Destaque dentro do título: só cor (Inter não carrega itálico verdadeiro) */
h1 em, h2 em { font-style: normal; font-weight: var(--fw-medium); }
/* Marca-texto champanhe na palavra-chave dos títulos claros (2.9) */
.section--white h2 em, .section--cream h2 em, .section--beige h2 em,
.footer h2 em {
  background: linear-gradient(transparent 62%, var(--color-highlight) 62%);
}
/* Filete teal curto sob os títulos de seção */
.stack > h2::after {
  content: ""; display: block;
  width: 44px; height: 2px;
  background: var(--color-teal);
  margin-top: var(--space-3);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-text-muted);
  max-width: 56ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .45;
  flex: 0 0 auto;
}

.microcopy {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Nota de confiança sob o CTA (exames pelo convênio — 1.10) */
.microcopy--nota {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--color-link-accessible);
}
.microcopy__icon { width: 13px; height: 13px; flex: 0 0 auto; }
.hero .microcopy--nota, .section--dark .microcopy--nota { color: var(--color-link-on-dark); }
/* Expectativa de horário — mais discreta que a restrição (1.7) */
.microcopy--soft { opacity: .75; letter-spacing: .1em; }

/* Linha de confiança sob os CTAs: itens curtos com ícone, em linha, no
   lugar dos parágrafos de microcopy em caixa-alta que quebravam em blocos
   de texto. Caixa normal, ícone teal ancorando cada item. */
.trust {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.trust li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--color-text-muted);
}
.trust__icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--color-teal); }
.cta-block--center .trust { justify-content: center; }
/* Sobre fundos escuros */
.hero .trust li, .section--dark .trust li, .footer .trust li { color: rgba(255, 255, 255, .78); }
.hero .trust__icon, .section--dark .trust__icon, .footer .trust__icon { color: var(--color-link-on-dark); }

/* ------------------------------------------------------- contextos escuros */
.hero, .section--dark { color: rgba(255, 255, 255, .88); }
.hero h1, .hero h2, .hero h3,
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-on-dark); }
.hero h1 em, .section--dark h2 em { color: var(--color-accent-warm); }
.hero .lead, .section--dark .lead { color: rgba(255, 255, 255, .8); }
.hero .eyebrow, .section--dark .eyebrow { color: rgba(255, 255, 255, .72); }
.hero .microcopy, .section--dark .microcopy { color: rgba(255, 255, 255, .66); }

/* ------------------------------------------------------------------ layout */
/* Offset de âncora: só o scroll-padding-top do html (somar scroll-margin duplicaria) */

.section { padding-block: var(--section-y); }
.section__inner {
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section__inner--editorial { max-width: var(--container-editorial); }

.section--white { background: var(--color-white); }
.section--cream { background: var(--gradient-section-up); }
.section--dark  { background: var(--color-brown-dark); box-shadow: var(--shadow-plane); }

/* Divisória ornamental filete–losango–filete entre seções claras (2.10) */
.section--divided { position: relative; }
.section--divided::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(320px, 60%); height: 1px;
  background: var(--color-border-hairline);
}
.section--divided::after {
  content: ""; position: absolute; top: -3.5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 7px; height: 7px;
  background: var(--color-teal);
}
.section--beige {
  background: var(--color-beige);
  --color-text: var(--color-text-on-beige);
  --color-text-muted: var(--color-text-muted-on-beige);
}

/* Grain nos fundos marrons */
.hero, .section--dark { position: relative; isolation: isolate; }
.hero::before, .section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--noise-img);
  opacity: .05;
  pointer-events: none;
}
.hero > *, .section--dark > * { position: relative; z-index: 1; }

.cols {
  display: flex;
  gap: var(--gap-columns);
  align-items: center;
}
.cols--top { align-items: flex-start; }
.cols__media { flex: 0 0 43%; min-width: 0; }
.cols__body  { flex: 1 1 57%; min-width: 0; }
.cols--split > .cols__body:first-child { flex: 0 0 38%; }
.cols__body--narrow { flex: 0 0 32%; }

.stack       { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.stack--center { align-items: center; text-align: center; }
.stack--center > h2::after { margin-inline: auto; }
.stack--tight{ gap: var(--space-3); }
.stack--loose{ gap: var(--space-8); }

.section__cta {
  margin-top: var(--space-12);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-5);
  text-align: center;
}

/* -------------------------------------------------------------- molduras */
.frame { position: relative; }
.frame img { width: 100%; }
.frame__clip { overflow: hidden; border-radius: var(--radius-lg); }

/* Gradação fotográfica única — todas as fotos na mesma direção de arte (2.2) */
.frame img, .collage img, .footer__portrait img {
  filter: saturate(.9) contrast(1.04) sepia(.08);
  transition: filter .5s var(--ease), transform .6s var(--ease);
}
.collage > div { position: relative; }
.collage > div::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(42, 30, 21, .22), transparent 45%);
  border-radius: inherit;
  pointer-events: none;
}
.collage > div:hover img { filter: saturate(1) contrast(1.03) sepia(0); }

/* Placa editorial: retângulo vazado champanhe deslocado atrás da foto (2.1) */
.frame--plate img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.frame--plate::before {
  content: ""; position: absolute; inset: 0;
  transform: translate(16px, 16px);
  border: 1px solid var(--color-accent-warm);
  opacity: .35;
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: -1;
}
/* Scrim que assenta a foto no fundo escuro + filete interno */
.frame--plate::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(to top, rgba(42, 30, 21, .28), transparent 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  pointer-events: none;
}

.frame--ring img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.frame--ring::before {
  content: ""; position: absolute; inset: -12px;
  border: 1px solid var(--color-heading);
  opacity: .16;
  border-radius: calc(var(--radius-lg) + 8px);
  pointer-events: none;
}

/* ------------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--color-border-card-warm);
  border-radius: 999px;
  background: var(--color-white);
  font-size: var(--fs-credits);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--color-heading);
}
.chip--solid {
  background: var(--color-brown-dark);
  border-color: var(--color-brown-dark);
  color: var(--color-cream);
}
/* Pill de contorno teal — eyebrow do bloco de contato, como no original */
.chip--teal {
  border-color: var(--color-teal);
  color: var(--color-link-accessible);
  background: var(--color-white);
}

/* ------------------------------------------------------------------ botões */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--btn-padding);
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-sm);
  background-image: var(--gradient-cta);
  color: var(--color-on-dark);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-button);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-align: center;
  box-shadow: var(--shadow-cta);
  overflow: hidden;
  transition: transform .3s var(--ease-spring), box-shadow var(--transition-default);
}
/* Crossfade real do gradiente no hover (background-image não transiciona) */
.btn::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--gradient-cta-hover);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
/* Brilho que varre o botão no hover */
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .33), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--ease);
  pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { left: 125%; }
.btn .icon { width: 15px; height: 15px; flex: 0 0 auto; transition: transform .3s var(--ease-spring); }
.btn:hover, .btn:focus-visible {
  color: var(--color-on-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}
.btn:hover::before, .btn:focus-visible::before { opacity: 1; }
.btn:hover .icon { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.cta-block { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.cta-block--center { align-items: center; text-align: center; }

.link-inline {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--color-link-accessible);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--transition-default);
}
.link-inline:hover { border-color: currentColor; }

/* ------------------------------------------------------------------ header */
.header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background: var(--color-brown);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: box-shadow .35s var(--ease), height .35s var(--ease);
}
/* Estado rolado: translúcido com blur, hairline champanhe (2.8) */
.header.is-scrolled {
  box-shadow: var(--shadow-header);
  background: var(--color-brown-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--color-hairline-champagne);
}
@supports not (backdrop-filter: blur(1px)) {
  .header.is-scrolled { background: var(--color-brown); }
}
/* Com o menu aberto o blur precisa sair: backdrop-filter cria containing block
   e colapsaria o painel mobile position:fixed descendente do header. */
.header[data-menu="open"],
.header[data-menu="open"].is-scrolled {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--color-brown);
}

/* Fio de progresso de leitura (3.9) — invisível sem suporte a scroll() */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--gradient-cta);
  transform: scaleX(0); transform-origin: left;
  z-index: 2; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation-name: progress-fill;
    animation-duration: 1ms; /* gotcha: o atalho `animation:` zeraria o timeline */
    animation-timing-function: linear;
    animation-timeline: scroll(root);
  }
  @keyframes progress-fill { to { transform: scaleX(1); } }
}
.header__logo img { transition: width .35s var(--ease), height .35s var(--ease); }
/* Encolhe suavemente ao rolar (só desktop — no mobile o painel ancora no token) */
@media (min-width: 1025px) {
  .header.is-scrolled { height: var(--header-height-scrolled); }
  .header.is-scrolled .header__logo img { width: 126px; height: 47px; }
}
.header__inner {
  max-width: var(--container-header);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.header__logo { flex: 0 0 auto; }
.header__logo img { width: var(--logo-width); height: var(--logo-height); object-fit: contain; }

.header__cta {
  flex: 0 0 auto;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-xs);
  font-size: var(--fs-credits);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--color-on-dark);
  transition: background var(--transition-default), border-color var(--transition-default);
}
.header__cta:hover { background: rgba(255, 255, 255, .1); border-color: var(--color-teal-light); }

.nav { height: 100%; }
.nav__list { display: flex; align-items: stretch; height: 100%; }
.nav__item { display: flex; align-items: stretch; }
/* Separador vertical entre os itens, como no site original */
.nav__item + .nav__item::before {
  content: ""; align-self: center;
  width: 1px; height: 14px;
  background: rgba(255, 255, 255, .18);
  flex: 0 0 auto;
}
.nav__link {
  position: relative;
  display: flex; align-items: center;
  padding: 0 16px;
  font-size: var(--fs-menu);
  color: rgba(255, 255, 255, .85);
  transition: color var(--transition-default);
}
/* Barra ativa rente à borda inferior do header, como no original */
.nav__link::after {
  content: ""; position: absolute;
  left: 12px; right: 12px; bottom: 0; height: 2px;
  background: var(--color-link-on-dark);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--color-link-on-dark); }
.nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav__item--has-sub { position: relative; }
.nav__toggle {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px;
  font-size: var(--fs-menu);
  color: rgba(255, 255, 255, .85);
  transition: color var(--transition-default);
}
.nav__toggle:hover { color: var(--color-on-dark); }
.nav__toggle .icon { width: 13px; height: 13px; transition: transform var(--transition-default); }
.nav__item--has-sub[data-open="true"] .nav__toggle .icon { transform: rotate(180deg); }

.subnav {
  position: absolute; top: 100%; left: 0; min-width: 288px;
  background: var(--color-brown);
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-header);
  padding-block: var(--space-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transition-default), transform var(--transition-default), visibility var(--transition-default);
}
.nav__item--has-sub:hover .subnav,
.nav__item--has-sub:focus-within .subnav,
.nav__item--has-sub[data-open="true"] .subnav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.subnav li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.subnav__link {
  display: block; padding: 13px 20px;
  font-size: var(--fs-menu); color: rgba(255, 255, 255, .85);
  transition: color var(--transition-default), background var(--transition-default);
}
/* Linha ativa em teal cheio, como o dropdown do site original */
.subnav__link:hover, .subnav__link:focus-visible {
  color: var(--color-on-dark);
  background: var(--color-link-accessible);
}
.subnav__list { margin: 0; padding: 0; list-style: none; }
/* Rotulo do painel: so o desktop mostra — no acordeao mobile o titulo
   "Tratamentos" ja esta a um dedo de distancia e repetir seria ruido. */
.subnav__label { display: none; }
/* Saida para a pagina da categoria — o unico lugar do menu que leva a ela. */
.subnav__all {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-menu);
  font-weight: var(--fw-medium);
  color: var(--color-accent-warm);
  transition: color var(--transition-default);
}
.subnav__all .icon { width: 15px; height: 15px; flex: 0 0 auto; transition: transform var(--transition-default); }
.subnav__all:hover, .subnav__all:focus-visible { color: var(--color-on-dark); }
.subnav__all:hover .icon, .subnav__all:focus-visible .icon { transform: translateX(4px); }

/* Dropdown de Tratamentos no desktop.
   Em coluna unica os 13 artigos davam 640px de altura — 74% de uma tela de
   860px, e num notebook de 768px o menu ia quase ate o rodape. Em duas
   colunas cai para ~330px. Ancorado a direita porque "Tratamentos" e o
   ultimo item da barra: com left:0 um painel largo sairia da viewport. */
@media (min-width: 1025px) {
  .subnav {
    left: auto; right: 0;
    width: 584px; min-width: 0;
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    /* Some com um respiro: sem isso, cruzar o menu com o mouse por um instante
       ja fechava o painel na cara de quem estava mirando um item. */
    transition: opacity var(--transition-default) .1s,
                transform var(--transition-default) .1s,
                visibility var(--transition-default) .1s;
  }
  .nav__item--has-sub:hover .subnav,
  .nav__item--has-sub:focus-within .subnav,
  .nav__item--has-sub[data-open="true"] .subnav { transition-delay: 0s; }
  /* Filete champanhe no topo do painel — mesma linguagem do header rolado. */
  .subnav::before {
    content: ""; position: absolute; top: 0; left: var(--space-5); right: var(--space-5);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-hairline-champagne) 22%,
                                var(--color-hairline-champagne) 78%, transparent);
  }
  .subnav__label {
    display: block;
    margin: 0 0 var(--space-3);
    padding: 0 14px;
    font-size: var(--fs-menu);
    font-weight: var(--fw-semibold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-on-dark);
    opacity: .5;
  }
  /* Duas colunas por multicol, nao por grade: na grade com auto-flow column
     as LINHAS eram compartilhadas — um item de duas linhas na coluna 1
     esticava a linha inteira e abria um vao sob o vizinho da coluna 2
     (era exatamente o desalinhamento da captura de tela). Multicol empilha
     cada coluna de forma independente. */
  .subnav__list {
    columns: 2;
    column-gap: var(--space-5);
    column-rule: 1px solid rgba(255, 255, 255, .08);
  }
  .subnav__list li { break-inside: avoid; }
  .subnav li + li { border-top: 0; }
  .subnav__link {
    border-radius: calc(var(--radius-sm) - 5px);
    padding: 10px 14px;
    transition: color var(--transition-default), background var(--transition-default),
                translate var(--transition-default);
  }
  .subnav__link:hover, .subnav__link:focus-visible { translate: 3px 0; }
  .subnav__all {
    margin: var(--space-4) 14px 0;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  /* Ponte invisivel entre o botao e o painel: mata o vao de 1px da borda,
     onde o hover morria no meio do caminho. */
  .nav__item--has-sub::after {
    content: ""; position: absolute; top: 100%; right: 0;
    width: 584px; height: 10px;
  }

  /* Rede de seguranca do bloqueio de rolagem. O painel mobile trava
     body{overflow:hidden} por JS (estilo inline, dai o !important). Ao girar
     o aparelho para paisagem com o menu aberto, o painel some pelo CSS mas o
     travamento inline continuava: a pagina inteira parava de rolar e de
     receber clique. O site.js fecha o menu no evento de breakpoint; esta
     regra destrava mesmo se o evento nao chegar. */
  body { overflow: visible !important; }
}

/* Painel mobile: escondido por padrão — só o media query <=1024px o exibe */
.nav--mobile { display: none; }

/* Botao do menu mobile.
   Duas armadilhas que existiam aqui e nao devem voltar:
   1. o seletor era `.burger span`, que tambem casava o <span class="sr-only">
      do rotulo: 0,1,1 vence 0,1,0, entao o texto de leitor de tela herdava
      width/height/background e virava uma SEGUNDA barra ao lado da primeira.
      Por isso o alvo agora e a classe .burger__bar, que nada mais casa.
   2. barra de 1.5px centrada num botao de 44px cai em 32,75px — meio pixel
      de dispositivo em DPR 2, e o navegador borra os tres tracos. A caixa
      abaixo mede 22x14 (2+4+2+4+2) e sobra (44-14)/2 = 15: tudo inteiro. */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--color-on-dark);
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-default), background var(--transition-default);
}
.burger:hover { color: var(--color-link-on-dark); }
.burger:active .burger__box { transform: scale(.9); }

.burger__box {
  position: relative;
  display: block;
  width: 22px; height: 14px;
  transition: transform .18s var(--ease);
}
.burger__bar {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 6px; }
.burger__bar:nth-child(3) { top: 12px; }

/* Fecho em X. Base universal: a barra do meio recolhe primeiro (scaleX), as
   de fora convergem e giram. transform-only, sem animar `top` — `top` custa
   layout a cada quadro e e o que dava o movimento duro. */
.burger__bar:nth-child(1),
.burger__bar:nth-child(3) { transition: transform .34s var(--ease); }
.burger__bar:nth-child(2) {
  transform-origin: center;
  transition: transform .18s var(--ease) .16s, opacity .18s var(--ease) .16s;
}
.header[data-menu="open"] .burger__bar:nth-child(2) {
  transform: scaleX(0); opacity: 0;
  transition-delay: 0s;                     /* some antes das outras girarem */
}
.header[data-menu="open"] .burger__bar:nth-child(1) { transform: translateY(6px)  rotate(45deg); }
.header[data-menu="open"] .burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Refino: com translate/rotate como propriedades independentes da-se o gesto
   em dois tempos — as barras encostam, DEPOIS giram; ao fechar, desgiram e so
   entao se afastam. Onde nao houver suporte, vale o bloco acima. */
@supports (rotate: 45deg) and (translate: 0 1px) {
  .burger__bar:nth-child(1),
  .burger__bar:nth-child(3) {
    transform: none;
    transition: translate .2s var(--ease) .18s, rotate .2s var(--ease);
  }
  .header[data-menu="open"] .burger__bar:nth-child(1),
  .header[data-menu="open"] .burger__bar:nth-child(3) {
    transform: none;
    transition: translate .2s var(--ease), rotate .2s var(--ease) .18s;
  }
  .header[data-menu="open"] .burger__bar:nth-child(1) { translate: 0 6px;  rotate: 45deg; }
  .header[data-menu="open"] .burger__bar:nth-child(3) { translate: 0 -6px; rotate: -45deg; }
}

/* Cartão de avaliações flutuando na borda direita da foto do hero.
   Entra depois do reveal e fica num vaivém lento — transform-only. */
.hero-rating {
  position: absolute;
  top: 50%; right: -14px;
  z-index: 3;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "nota stars" "txt txt";
  column-gap: 8px; row-gap: 2px;
  align-items: baseline;
  padding: 12px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-hairline-champagne);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  opacity: 0;
  animation: hr-entra .6s var(--ease) .9s forwards,
             hr-flutua 5.5s var(--ease) 1.6s infinite alternate;
  transition: box-shadow .3s var(--ease);
}
.hero-rating:hover { box-shadow: var(--shadow-cta-hover); }
.hero-rating__nota {
  grid-area: nota;
  font-size: 21px; font-weight: var(--fw-semibold);
  color: var(--color-heading); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-rating__stars { grid-area: stars; display: inline-flex; gap: 1px; }
.hero-rating__star {
  width: 13px; height: 13px;
  color: var(--color-accent-warm);
  fill: currentColor; stroke: none;
}
.hero-rating__txt {
  grid-area: txt;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: .02em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
@keyframes hr-entra  { from { opacity: 0; transform: translate(10px, calc(-50% + 14px)); }
                       to   { opacity: 1; transform: translate(0, -50%); } }
@keyframes hr-flutua { from { transform: translate(0, -50%); }
                       to   { transform: translate(0, calc(-50% - 7px)); } }

/* -------------------------------------------------------------------- hero */
.hero {
  background: var(--gradient-hero), var(--color-brown-dark);
  padding: calc(var(--header-height) + clamp(3.5rem, 6vw, 5.5rem)) 0 clamp(3.5rem, 6vw, 5rem);
}
.hero__inner { display: flex; gap: var(--gap-columns); align-items: center; }
.hero__media { flex: 0 0 41%; min-width: 0; position: relative; }
/* Brilho quente atrás da foto, que "respira" devagar (3.3) */
.hero__media::before {
  content: ""; position: absolute; inset: 12% -10% -6%;
  background: radial-gradient(58% 52% at 50% 62%, var(--color-glow-warm), transparent 72%);
  filter: blur(34px);
  z-index: -1;
  animation: glow-breathe 7s var(--ease) infinite alternate;
}
@keyframes glow-breathe { from { opacity: .7; } to { opacity: 1; } }
/* Entrada da foto: "assenta" de 1.03 para 1 junto do reveal (3.3) */
.js .hero__media.reveal img { transform: scale(1.03); transition: transform .9s var(--ease); }
.js .hero__media.reveal.is-visible img { transform: scale(1); }

/* Selo circular giratório de credenciais (2.5) */
.seal {
  position: absolute; right: -18px; bottom: 22px;
  width: 106px; height: 106px;
  animation: seal-spin 26s linear infinite;
  filter: drop-shadow(0 8px 18px rgba(20, 12, 8, .4));
}
.seal circle { fill: var(--color-brown-dark); stroke: var(--color-accent-warm); stroke-opacity: .35; }
.seal text {
  fill: var(--color-accent-warm);
  font: var(--fw-semibold) 8.6px var(--font-primary);
  letter-spacing: .18em; text-transform: uppercase;
}
@keyframes seal-spin { to { transform: rotate(360deg); } }
.hero__body {
  flex: 1 1 59%; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-6);
  max-width: 640px;
}
.hero__body .lead { max-width: 48ch; }

/* Cartão de credenciais que cavalga a fronteira hero → seção seguinte (2.3) */
.hero__cred {
  margin-top: clamp(2.75rem, 5vw, 4.25rem);
  margin-bottom: calc(-1 * var(--space-10));
  background-image: var(--gradient-panel);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  padding: var(--space-5) var(--space-8);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-4) var(--space-10);
  position: relative; z-index: 2;
}
.hero__cred li {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--color-heading);
}
.hero__cred li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-teal); flex: 0 0 auto;
}
/* A seção logo após o hero compensa a invasão do cartão */
.hero + .section { padding-top: calc(var(--section-y) + var(--space-10)); }

/* ------------------------------------------------------------------ painel */
.panel {
  width: 100%;
  background-image: var(--gradient-panel);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius-md);
  padding: clamp(1.375rem, 2.4vw, 1.875rem) clamp(1.375rem, 2.4vw, 2rem);
  color: var(--color-text);
  box-shadow: var(--shadow-panel);
}
.panel .eyebrow, .panel .lead { color: var(--color-text-muted); }
.panel--outline {
  background: var(--color-white);
  border: 1px solid var(--color-border-hairline);
  box-shadow: none;
}

.checklist li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding-block: 11px;
  color: var(--color-text);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.checklist li + li { border-top: 1px solid var(--color-border-hairline); }
.checklist .icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--color-teal); }
.checklist strong { color: var(--color-heading); font-weight: var(--fw-semibold); }
.checklist span { display: block; }

/* ------------------------------------------------------------- depoimentos */
.reviews { position: relative; min-width: 0; }
.reviews__track {
  display: flex; gap: var(--space-5); min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-block: var(--space-5) var(--space-2);
  /* Bordas do trilho esvanecem — sinaliza a rolagem com elegância (2.6) */
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.reviews__track::-webkit-scrollbar { display: none; }
/* Card ativo com presença; vizinhos recuam durante o arrasto (3.7) */
.js-live .review {
  opacity: .55; transform: scale(.975);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.js-live .review.is-active { opacity: 1; transform: scale(1); }

.review {
  position: relative;
  flex: 0 0 100%; scroll-snap-align: start;
  background: var(--color-white);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  min-height: 250px;
}
/* Aspa champanhe meio para fora do topo do card (2.6) */
.review::before {
  content: "\201C";
  position: absolute; top: -16px; right: 20px;
  font: var(--fw-semibold) 4.5rem/1 var(--font-primary);
  color: var(--color-accent-warm);
  opacity: .55;
  pointer-events: none;
}
.review__text { font-size: var(--fs-body-sm); line-height: 1.65; color: var(--color-text); }
.review__meta {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-hairline);
}
.review__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-beige); color: var(--color-brown-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .04em;
  flex: 0 0 auto;
}
.review__author { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-heading); }
.review__source {
  display: block;
  font-size: var(--fs-credits);
  letter-spacing: var(--ls-caps-sm); text-transform: uppercase;
  color: var(--color-text-muted); margin-top: 2px;
}
a.review__source { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-card-warm); }
a.review__source:hover { color: var(--color-link-accessible); }
.reviews__all { align-self: flex-start; }

.reviews__nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); margin-top: var(--space-6);
}
.reviews__arrow {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--color-border-warm);
  background: var(--color-white); color: var(--color-brown-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-default), color var(--transition-default), border-color var(--transition-default);
}
.reviews__arrow .icon { width: 16px; height: 16px; }
.reviews__arrow:hover { background: var(--color-brown-dark); color: var(--color-on-dark); border-color: var(--color-brown-dark); }

.reviews__dots { display: flex; gap: 2px; }
/* Alvo de toque 24px; o ponto visual de 7px é o ::before */
.reviews__dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.reviews__dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-brown);
  opacity: .65;
  transition: background var(--transition-default), transform var(--transition-default), opacity var(--transition-default);
}
.reviews__dot::before { transition-timing-function: var(--ease-spring); }
/* Dot ativo alonga em pílula (3.7) */
.reviews__dot[aria-current="true"]::before {
  background: var(--color-link-accessible);
  opacity: 1;
  transform: scaleX(2.4) scaleY(1.15);
}

/* ----------------------------------------------------------- collage fotos */
.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
}
.collage > div { overflow: hidden; border-radius: var(--radius-md); }
.collage img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.collage > div:hover img { transform: scale(1.045); }
.collage__a { grid-column: span 2; grid-row: span 2; }
.collage__b { grid-column: span 2; grid-row: span 3; }
.collage__c { grid-column: span 2; grid-row: span 2; }

/* --------------------------------------------------------- cards diferencial */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  counter-reset: fc;
}
.feature-card {
  counter-increment: fc;
  position: relative; overflow: hidden;
  background:
    radial-gradient(180px circle at var(--mx, -200px) var(--my, -200px), var(--color-spotlight), transparent 70%),
    var(--color-white);
  border: 1px solid var(--color-border-card-warm);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease), opacity .35s var(--ease);
}
/* Numeração editorial 01–06 (2.4) */
.feature-card::before {
  content: counter(fc, decimal-leading-zero);
  position: absolute; top: 16px; right: 18px;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  color: var(--color-heading-alt); /* dourado dava 3.0:1 */
}
/* Filete teal que desliza no hover, eco do sublinhado do menu */
.feature-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--color-teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-teal-light);
  box-shadow: var(--shadow-card);
}
.feature-card:hover::after { transform: scaleX(1); }
/* Focus dimming: os vizinhos cedem (3.6) */
@supports selector(:has(*)) {
  .feature-grid:has(.feature-card:hover) .feature-card:not(:hover) { opacity: .78; }
}
.feature-card__icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--color-sand); color: var(--color-link-accessible);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.feature-card:hover .feature-card__icon {
  background: var(--color-link-accessible);
  color: var(--color-on-dark);
  transform: scale(1.06);
}
.feature-card__icon .icon { width: 20px; height: 20px; }
.feature-card__icon { transition-timing-function: var(--ease-spring); }
.feature-card h3 { color: var(--color-heading); }
.feature-card p { font-size: var(--fs-caption); line-height: 1.65; color: var(--color-text-muted); }

/* ------------------------------------------------- como agendar (3 passos) */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  counter-reset: step;
  width: 100%;
}
.step {
  counter-increment: step;
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 18px; right: 20px;
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--color-heading-alt); /* champanhe dava 1.8:1 */
}
.step__icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--color-sand); color: var(--color-link-accessible);
  display: flex; align-items: center; justify-content: center;
}
.step__icon .icon { width: 19px; height: 19px; }
.step h3 { color: var(--color-heading); }
.step p { font-size: var(--fs-caption); line-height: 1.65; color: var(--color-text-muted); }

/* ----------------------------------------------- faixa "Estou aqui p/ ouvir" */
.statement-band { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

/* Entrada palavra a palavra da assinatura (3.4) */
.js .statement--anim .w {
  display: inline-block;
  opacity: 0; transform: translateY(10px); filter: blur(5px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
  transition-delay: calc(var(--i) * 90ms);
}
.js .reveal.is-visible .statement--anim .w,
.js .statement--anim.is-visible .w {
  opacity: 1; transform: none; filter: none;
}

/* --------------------------------------------------------------- accordions */
.accordion { width: 100%; border-top: 1px solid var(--color-border-hairline); counter-reset: acc; }
.accordion__item { border-bottom: 1px solid var(--color-border-hairline); counter-increment: acc; }
.accordion__item > summary {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0;
  font-size: 0.938rem; font-weight: var(--fw-semibold); line-height: 1.5;
  color: var(--color-heading);
  cursor: pointer; list-style: none;
  transition: color var(--transition-default), opacity .35s var(--ease);
}
/* Numeração editorial 01.–06. (2.7) */
.accordion__item > summary::before {
  content: counter(acc, decimal-leading-zero) ".";
  flex: 0 0 auto;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  color: var(--color-heading-alt); /* dourado dava 3.0:1 */
}
.accordion__item > summary:hover { color: var(--color-link-accessible); }
.accordion__item > summary::-webkit-details-marker { display: none; }
/* Chevron dentro de anel que preenche quando aberto (2.7) */
.accordion__item > summary .icon {
  flex: 0 0 auto; width: 30px; height: 30px;
  padding: 7px; margin-left: auto;
  border: 1px solid var(--color-border-warm);
  border-radius: 50%;
  color: var(--color-teal);
  transition: transform .3s var(--ease-spring), background var(--transition-default),
              color var(--transition-default), border-color var(--transition-default);
}
.accordion__item[open] > summary .icon {
  transform: rotate(180deg);
  background: var(--color-brown-dark);
  border-color: var(--color-brown-dark);
  color: var(--color-on-dark);
}
/* Focus dimming nas perguntas (3.6) */
@supports selector(:has(*)) {
  .accordion:has(summary:hover) .accordion__item > summary:not(:hover) { opacity: .7; }
}
/* Abertura suave do <details> (Chrome 129+; nos demais abre instantâneo) */
.accordion__item::details-content {
  height: 0; overflow: clip;
  transition: height .35s var(--ease), content-visibility .35s allow-discrete;
}
.accordion__item[open]::details-content { height: auto; }

.accordion__panel {
  padding: 0 0 var(--space-6);
  margin-left: var(--space-2);
  border-left: 2px solid var(--color-teal);
  padding-left: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.accordion__panel p, .accordion__panel li {
  font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--color-text);
}
.accordion__panel li { padding-left: var(--space-5); position: relative; }
.accordion__panel li::before { content: "—"; position: absolute; left: 0; color: var(--color-teal); }

/* ------------------------------------------------------------------- rodapé */
.footer { background: var(--gradient-section-up); }

.footer__statement {
  padding-block: clamp(4rem, 7vw, 7rem);
  border-bottom: 1px solid var(--color-border-hairline);
}
.statement {
  font: var(--fw-medium) var(--fs-statement)/1.28 var(--font-primary);
  letter-spacing: var(--ls-heading);
  color: var(--color-brown-dark);
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}
.statement__by {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.footer__contact { padding-block: clamp(3.5rem, 6vw, 6rem) var(--space-10); }

/* --- Mapa interativo --- */
.footer__map {
  margin-top: var(--space-8);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-sand);
}
.footer__map { position: relative; }
.footer__map iframe {
  display: block; width: 100%; border: 0;
  height: clamp(260px, 30vw, 360px);
  filter: grayscale(.25) sepia(.18) saturate(.75) contrast(1.02);
}
/* Moldura interna: o embed vira peça da identidade terrosa (2.2) */
.footer__map::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: inherit;
  pointer-events: none;
}
.footer__map-link {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--space-4);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--color-link-accessible);
}
.footer__map-link .icon { width: 15px; height: 15px; }
.footer__map-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__grid { display: flex; gap: var(--space-14); align-items: flex-start; }
.footer__col { flex: 1 1 0; min-width: 0; }
.footer__logo img { width: 190px; height: auto; }

.contact-list li {
  display: flex; gap: var(--space-3);
  padding-block: 9px;
  font-size: var(--fs-body-sm); line-height: 1.6;
}
.contact-list .icon { flex: 0 0 auto; width: 17px; height: 17px; color: var(--color-teal); margin-top: 4px; }
.contact-list a { transition: color var(--transition-default); }
.contact-list a:hover { color: var(--color-link-accessible); }

.notice {
  border: 1px solid var(--color-border-hairline);
  border-left: 3px solid var(--color-brown);
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-8);
  display: flex; gap: var(--space-4);
  background: var(--color-white);
}
.notice .icon { flex: 0 0 auto; width: 21px; height: 21px; color: var(--color-brown); margin-top: 2px; }
.notice h3 { font-family: var(--font-primary); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.notice p { font-size: var(--fs-caption); line-height: 1.65; color: var(--color-text-muted); }

/* Bloco institucional ESCURO — mesmo padrão do rodapé do site original */
.footer__institucional {
  padding-block: clamp(4.5rem, 7vw, 6.5rem) clamp(5rem, 8vw, 7.5rem);
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(126, 93, 68, .55), transparent 60%),
    var(--color-brown-dark);
  color: rgba(255, 255, 255, .85);
  position: relative; isolation: isolate;
}
.footer__institucional::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--noise-img);
  opacity: .05;
  pointer-events: none;
}
.footer__institucional > * { position: relative; z-index: 1; }
/* Menu mais estreito; colunas com fôlego entre si */
.footer__institucional .footer__grid { gap: clamp(3rem, 6vw, 5.5rem); }
@media (min-width: 1025px) {
  .footer__institucional .footer__col:last-child { flex: 0 0 240px; }
}

/* Lista de contato sobre o escuro: filetes entre os itens, rótulos em negrito */
.footer__institucional .contact-list li {
  padding-block: var(--space-3);
  color: rgba(255, 255, 255, .82);
}
.footer__institucional .contact-list li + li {
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.footer__institucional .contact-list strong {
  color: var(--color-on-dark);
  font-weight: var(--fw-semibold);
}
.footer__institucional .contact-list a:hover { color: var(--color-link-on-dark); }

.footer__menu-title {
  font-size: var(--fs-credits); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm); text-transform: uppercase;
  color: var(--color-link-on-dark);
  margin-bottom: var(--space-3);
}
.footer__menu li { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.footer__menu li:last-child { border-bottom: 0; }
.footer__menu a {
  display: block;
  padding-block: var(--space-2);
  font-size: var(--fs-body-sm); color: rgba(255, 255, 255, .85);
  transition: color var(--transition-default), padding-left var(--transition-default);
}
.footer__menu a:hover { color: var(--color-link-on-dark); padding-left: 6px; }

/* Aviso de urgência: centrado, com respiro antes do bloco escuro */
.footer__notice { padding-block: var(--space-4) clamp(3rem, 6vw, 5.5rem); }
.footer .notice { max-width: 900px; margin-inline: auto; }

/* Coluna central: retrato + convite. Antes era só a foto de 268px flutuando
   auto-centrada — a coluna não esticava e sobrava um vazio embaixo. Agora a
   coluna preenche a altura e o rosto fecha a página junto com o botão. */
.footer__portrait {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-6);
  align-self: stretch;
  padding-block: var(--space-4);
}
.footer__portrait img {
  width: 100%; max-width: 300px;
  aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 22%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  outline: 1px solid var(--color-hairline-champagne);
  outline-offset: 10px;
}
.footer__portrait .cta-block { width: 100%; max-width: 300px; }
.footer__portrait .btn { display: flex; width: 100%; }
.footer__portrait .microcopy { color: var(--color-on-dark); opacity: .75; }

/* Faixa de créditos — marrom profundo com micro-caps teal, como no original */
.footer__credits {
  background: var(--color-brown-deep);
  padding-block: var(--space-8);
}
.footer__credits-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  flex-wrap: wrap;
}
.footer__credits-row p {
  margin: 0;
  font-size: var(--fs-credits);
  letter-spacing: var(--ls-caps-sm); text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.footer__credits a {
  font-size: var(--fs-credits); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--color-teal);
  transition: color var(--transition-default);
}
.footer__credits a:hover { color: var(--color-link-on-dark); }

/* ---------------------------------------------------------- WhatsApp flutuante */
.wa-float {
  position: fixed; right: var(--space-5); bottom: var(--space-5);
  z-index: var(--z-float);
  height: 58px; padding-inline: 16px;
  display: flex; align-items: center; justify-content: center;
  background-image: var(--gradient-cta);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: var(--color-on-dark);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  transition: transform var(--transition-default), box-shadow var(--transition-default);
}
/* Rótulo que se expande no hover/foco */
.wa-float__label {
  position: relative; z-index: 1;
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm); text-transform: uppercase;
  opacity: 0;
  transition: max-width .45s var(--ease), opacity .3s var(--ease), margin-left .45s var(--ease);
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label {
  max-width: 200px; opacity: 1; margin-left: 10px;
}

/* Contextual (1.4 + 3.x): entra depois do hero com pulso ÚNICO; no mobile vira
   pill com rótulo visível quando não há CTA na tela; some junto do rodapé.
   Sem JS (html sem .js) ele fica visível desde o início. */
.js .wa-float {
  opacity: 0; transform: scale(.6); pointer-events: none;
  visibility: hidden; /* também fora da ordem de tabulação (WCAG 2.4.7) */
  transition: opacity .4s var(--ease), transform .45s var(--ease-spring),
              visibility .45s var(--ease);
}
.js .wa-float.is-on { opacity: 1; transform: scale(1); pointer-events: auto; visibility: visible; }
.js .wa-float.is-off { opacity: 0; transform: scale(.8); pointer-events: none; visibility: hidden; }
.js .wa-float.is-on .pulse {
  position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--color-teal);
  animation: wa-pulse .9s var(--ease) 1 both;
  pointer-events: none;
}
@keyframes wa-pulse {
  from { opacity: .8; transform: scale(1); }
  to   { opacity: 0;  transform: scale(1.5); }
}
@media (max-width: 767px) {
  .wa-float.is-open .wa-float__label { max-width: 200px; opacity: 1; margin-left: 10px; }
}
.wa-float::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--gradient-cta-hover);
  opacity: 0; transition: opacity .35s var(--ease);
}
.wa-float .icon { position: relative; z-index: 1; width: 26px; height: 26px; }
.wa-float:hover { transform: translateY(-3px); }
.wa-float:hover::before { opacity: 1; }

/* ---------------------------------------------- scroll-driven (com fallback)
   IMPORTANTE: sempre pelas longhands — o atalho `animation:` zera a duração
   e mata o scroll-timeline silenciosamente (gotcha documentado da Tribo).   */
@supports (animation-timeline: view()) {
  /* Parallax editorial nas fotos emolduradas (3.1) */
  .frame__clip img {
    scale: 1.12;
    animation-name: ring-parallax;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes ring-parallax {
    from { transform: translateY(-4%); }
    to   { transform: translateY(4%); }
  }

  /* Collage em três velocidades (3.2) — desktop/tablet apenas */
  @media (min-width: 768px) {
    .collage__a img, .collage__b img, .collage__c img {
      scale: 1.08;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .collage__a img { animation-name: col-a; }
    .collage__b img { animation-name: col-b; }
    .collage__c img { animation-name: col-c; }
    @keyframes col-a { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
    @keyframes col-b { from { transform: translateY(14px); }  to { transform: translateY(-14px); } }
    @keyframes col-c { from { transform: translateY(-7px); }  to { transform: translateY(7px); } }
  }

  /* Saída coreografada do hero (3.3) — no wrapper, não nos alvos de reveal */
  .hero > .section__inner {
    animation-name: hero-exit;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both; /* sem isso, salta de volta a opacity 1 após exit 70% */
    animation-timeline: view();
    animation-range: exit 0% exit 70%;
  }
  @keyframes hero-exit {
    to { transform: translateY(-18px); opacity: .55; }
  }
}

/* View transitions entre páginas do mesmo domínio (3.10) */
@view-transition { navigation: auto; }
.header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .2s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .28s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------------- reveal
   O CSS só esconde quando o JS confirmou que está ativo (classe .js na <html>).
   Rede de segurança .reveal-off desliga tudo (ver site.js).                  */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--reveal-duration) var(--ease), transform var(--reveal-duration) var(--ease);
}
.js .reveal--stagger > * { opacity: 0; transform: translateY(18px); }
.js .reveal--stagger.is-visible > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal--stagger.is-visible > :nth-child(1) { transition-delay: .05s; }
.js .reveal--stagger.is-visible > :nth-child(2) { transition-delay: .13s; }
.js .reveal--stagger.is-visible > :nth-child(3) { transition-delay: .21s; }
.js .reveal--stagger.is-visible > :nth-child(4) { transition-delay: .29s; }
.js .reveal--stagger.is-visible > :nth-child(5) { transition-delay: .37s; }
.js .reveal--stagger.is-visible > :nth-child(6) { transition-delay: .45s; }

.js.reveal-off .reveal,
.js.reveal-off .reveal--stagger,
.js.reveal-off .reveal--stagger > *,
.js.reveal-off .statement--anim .w,
.js.reveal-off .review,
.js.reveal-off .wa-float {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.js.reveal-off .wa-float { pointer-events: auto !important; visibility: visible !important; }

/* Guarda em CSS puro: se o site.js nunca executar (falha de rede/CDN), esta
   animation de 0s com delay de 4s força o estado final sem depender de JS.
   Escopada a :not(.js-live) — o site.js marca js-live ao rodar, desativando a
   guarda (senão o fill:forwards venceria a cascata e congelaria o reveal). */
@keyframes reveal-guard { to { opacity: 1; transform: none; filter: none; } }
.js:not(.js-live) .reveal,
.js:not(.js-live) .reveal--stagger > *,
.js:not(.js-live) .statement--anim .w {
  animation: reveal-guard 0s 4s forwards;
}

/* ==========================================================================
   TABLET — até 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  .nav:not(.nav--mobile) { display: none; }
  .header__cta { display: none; }
  .burger { display: flex; }

  .nav--mobile {
    display: flex; flex-direction: column;
    height: auto; /* anula o height:100% base do .nav — aqui manda o inset */
    position: fixed; inset: var(--header-height) 0 0 0;
    background: var(--color-brown);
    padding: var(--space-5) var(--gutter) var(--space-10);
    overflow-y: auto;
    overscroll-behavior: contain;   /* rolar o painel nao arrasta a pagina atras */
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform .42s var(--ease), visibility .42s var(--ease);
  }
  .header[data-menu="open"] .nav--mobile { transform: translateY(0); visibility: visible; }
  .nav--mobile .nav__list { display: block; }

  /* Entrada em cascata: o painel desce e os itens aparecem logo atras, um a
     um. --i vem do PHP (indice do item). Sem isso o painel chega como um
     bloco unico e o movimento fica chapado. */
  .nav--mobile .nav__item {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .header[data-menu="open"] .nav--mobile .nav__item {
    opacity: 1;
    transform: none;
    transition-delay: calc(140ms + var(--i, 0) * 45ms);
  }

  /* O li e flex por causa da barra desktop (separadores usam align-self).
     Empilhado, isso punha o botao "Tratamentos" e o painel NA MESMA LINHA:
     o acordeao era espremido para ~137px e cada item quebrava em 2 linhas. */
  .nav--mobile .nav__item { display: block; }

  .nav--mobile .nav__link, .nav--mobile .nav__toggle {
    padding: var(--space-4) 0; width: 100%;
    font-size: var(--fs-body-sm);
    border-radius: var(--radius-sm);
    transition: color var(--transition-default), padding-left var(--transition-default);
  }
  /* O item recua um passo ao toque — devolve resposta fisica sem mudar cor. */
  .nav--mobile .nav__link:active, .nav--mobile .nav__toggle:active { padding-left: 6px; }
  .nav--mobile .nav__link::after { display: none; }
  .nav--mobile .nav__item + .nav__item::before {
    /* o separador vertical do desktop nao faz sentido empilhado */
    width: auto; height: 1px; align-self: stretch;
  }
  .nav--mobile .nav__toggle { justify-content: space-between; }
  .nav--mobile .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; min-width: 0; padding-block: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .4s var(--ease);
  }
  /* Teto so como rede de seguranca para JS desligado: o site.js escreve a
     altura exata (scrollHeight) ao abrir, entao a lista nunca fica presa a um
     numero chutado quando o Davi publicar mais tratamentos.
     Nao usar `grid-template-rows: 0fr` aqui: a tecnica exige UM filho unico e
     esta <ul> tem 13 <li>, que viram 13 linhas — o submenu fica sempre aberto. */
  .nav--mobile .nav__item--has-sub[data-open="true"] .subnav { max-height: 720px; }
  .nav--mobile .subnav__link {
    padding: 10px 0 10px var(--space-5);
    border-radius: var(--radius-sm);
  }
  .nav--mobile .subnav__all {
    padding: 12px 0 12px var(--space-5);
    font-size: var(--fs-body-sm);
  }

  /* Pe do painel: no mobile o .header__cta some, entao o menu ficava sem
     nenhum caminho de agendamento. */
  .nav--mobile .nav__foot {
    margin-top: auto;
    padding-top: var(--space-6);
    opacity: 0; transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .header[data-menu="open"] .nav--mobile .nav__foot {
    opacity: 1; transform: none;
    transition-delay: calc(140ms + 8 * 45ms);
  }
  .nav--mobile .nav__foot .btn { display: flex; width: 100%; }
  .nav--mobile .nav__note {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-caption);
    color: var(--color-on-dark);
    opacity: .7;
    text-align: center;
  }

  /* Empilhamento */
  .hero__inner, .cols, .cols--top { flex-direction: column; align-items: stretch; }
  .cols > *, .cols__body, .cols__media { flex: 1 1 auto !important; width: 100%; max-width: 100%; }
  .reviews__track { max-width: 100%; }
  .review { flex: 0 0 100%; width: 100%; }

  /* Conversão: título e CTA antes da foto no empilhado (1.1) */
  .hero__body { order: 1; }
  .hero__media { order: 2; }
  /* Pedido do cliente (revisão mobile 01/09): a foto ocupa a largura da
     coluna. O teto em px segura o retrato 3:4 em telas intermediárias. */
  .hero__media { width: min(100%, 480px); margin-inline: auto; }
  .hero__body { align-items: center; text-align: center; max-width: 620px; margin-inline: auto; }
  .seal { display: none; }
  .frame--plate::before { transform: translate(10px, 10px); }
  .hero__body .eyebrow { justify-content: center; }
  .hero__body .checklist { text-align: left; }
  .hero__cred { justify-content: center; gap: var(--space-4) var(--space-8); }

  .cols__media { max-width: 540px; margin-inline: auto; }
  .frame--arch::before { inset: -10px; }

  .footer__grid { flex-wrap: wrap; gap: var(--space-8); }
  .footer__col { flex: 1 1 45%; }
}

/* ==========================================================================
   MOBILE — até 767px
   ========================================================================== */
@media (max-width: 767px) {
  .hero__media { width: min(100%, 460px); }
  /* Com a foto na largura cheia, o brilho (inset -10% lateral) passava a
     estourar 16px para fora da tela */
  .hero__media::before { inset: 12% 0 -6%; }

  .panel { padding: var(--space-5); }

  .btn { display: flex; width: 100%; }
  .cta-block { align-items: stretch; text-align: center; align-self: stretch; }
  .cta-block .microcopy { text-align: center; }
  /* Botão centrado em largura cheia pede a linha de confiança centrada junto */
  .cta-block .trust { justify-content: center; }
  /* ...e o "saiba mais" que vem logo depois do CTA acompanha o eixo */
  .cta-block + .link-inline { display: block; width: 100%; text-align: center; }

  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { padding: var(--space-6); }
  .steps { grid-template-columns: 1fr; }

  .collage { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .collage__a, .collage__b, .collage__c { grid-column: auto; grid-row: auto; }
  .collage > div { border-radius: var(--radius-sm); }
  .collage img { aspect-ratio: 3 / 4; }

  .cols__media--hide-m { display: none !important; }

  .review { min-height: 0; }
  .review::before { font-size: 3rem; }

  /* Cartão de credenciais (revisão mobile 01/09): em flex os 4 itens
     embaralhavam em linhas de 1–2 "perdidas". Grade 2×2 com filetes em
     cruz bem discretos; some o transpasse sobre a seção seguinte, que no
     empilhado parecia acidente. */
  .hero__cred {
    margin-top: var(--space-5);        /* menos respiro após a foto */
    margin-bottom: 0;                  /* fim do transpasse no mobile */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: var(--space-2) var(--space-4);
  }
  .hero__cred li {
    justify-content: flex-start;
    padding: 13px 10px;
  }
  .hero__cred li:nth-child(odd)  { border-right: 1px solid var(--color-border-hairline); }
  .hero__cred li:nth-child(-n+2) { border-bottom: 1px solid var(--color-border-hairline); }
  .hero__cred li:nth-child(even) { padding-left: var(--space-4); }
  .hero + .section { padding-top: var(--section-y); }

  .footer__grid { flex-direction: column; align-items: stretch; }
  .footer__col { flex: 1 1 100%; width: 100%; }
  /* No empilhado a foto sai para poupar rolagem, mas o CONVITE fica —
     o display:none antigo levava o CTA do rodapé junto. */
  .footer__portrait img { display: none; }
  .footer__portrait { padding-block: 0; }
  .footer__portrait .cta-block { max-width: 100%; }
  .footer__credits-row { justify-content: center; text-align: center; }
  .notice { flex-direction: column; padding: var(--space-5); }

  /* width automática: o estado .is-open precisa crescer com o rótulo */
  .wa-float { right: var(--space-4); bottom: var(--space-4); min-width: 54px; height: 54px; padding-inline: 14px; }
}

/* ------------------------------------------------------- acessibilidade */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important; /* loops infinitos virariam flicker */
    transition-duration: 0.01ms !important;
    /* Sem zerar o atraso, o escalonamento do menu e o X do burger viram
       espera parada: duração 0 mas delay cheio. */
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
  /* Scroll-driven ignora duração (progresso = scroll) e loops decorativos:
     precisam de animation: none explícito */
  .frame__clip img, .collage__a img, .collage__b img, .collage__c img,
  .hero > .section__inner, .progress,
  .seal, .hero__media::before {
    animation: none !important;
  }
  /* Sem parallax, o zoom de folga (scale) também sai */
  .frame__clip img, .collage__a img, .collage__b img, .collage__c img {
    scale: none !important;
  }
  /* View transitions vivem em pseudo-árvore fora do alcance do seletor * */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .js .reveal, .js .reveal--stagger > *,
  .js .statement--anim .w { opacity: 1; transform: none; filter: none; }
}