/* ==========================================================================
   style.css — Dra. Jennifer Bianca (dentista · Gonzaga, Santos/SP)
   Camada BASE — mobile-first.
   Conteúdo: tokens do style tile, reset enxuto, tipografia, container e
   grades, header fixo (.is-scrolled), hero split com moldura, botões,
   chips, cartão base, utilitários de seção, hooks de estado do JS
   (.is-in / .is-open / .is-selected), foco visível e movimento reduzido.
   Regras duras: sem mistura de cor por função CSS, sem força de
   declaração nos accordions, zero overflow horizontal (validado em 390px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — espelho de partes/style-tile.md
   -------------------------------------------------------------------------- */
:root {
  /* bases */
  --base-clara:   #f6f4f1;  /* fundo geral — greige quente */
  --base-escura:  #2d211f;  /* rodapé e blocos escuros — espresso */
  --tinta:        #2b2320;  /* texto corrido e títulos — nunca #000 */

  /* acentos */
  --acento:       #7a544c;  /* mauve-cacau — CTA, links, marcadores */
  --acento-2:     #b08d5a;  /* dourado envelhecido — filetes, ícones, aspas */
  --acento-hover: #68463f;  /* acento escurecido ~8% para hover/active */

  /* suporte */
  --suporte-frio: #dce0dd;  /* divisores, bordas de card, campos */
  --suporte-pele: #bfa289;  /* overlays quentes, selos */
  --card:         #fdfcfa;  /* superfície de card, um passo acima da base */

  /* semânticos discretos (terrosos) */
  --ok:           #5f7a5a;
  --erro:         #a34d3f;

  /* derivados em rgb/alfa — tons intermediários sem função de mistura */
  --tinta-suave:    rgb(43 35 32 / .74);   /* texto secundário */
  --tinta-discreta: rgb(43 35 32 / .74);   /* legendas e notas — ≥4.5:1 */
  --acento-2-tinta: #7d5f36;               /* dourado em texto sobre fundo claro */
  --acento-nevoa:   rgb(122 84 76 / .08);  /* hover suave, fundos discretos */
  --sobre-acento:   #fdfcfa;               /* texto sobre --acento */

  /* tipografia */
  --font-display: "Fraunces", Georgia, serif;
  --font-text:    "Inter", system-ui, sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem); /* legendas, notas */
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem); /* corpo */
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.40rem); /* destaque de parágrafo */
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 1.75rem); /* título de card */
  --step-3:  clamp(1.90rem, 1.60rem + 1.50vw, 2.60rem); /* título de seção */
  --step-4:  clamp(2.60rem, 2.00rem + 3.00vw, 4.20rem); /* display do hero */

  --leading-text:    1.65;
  --leading-title:   1.12;
  --tracking-kicker: 0.14em;

  /* espaçamentos */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-12: 3rem;   --sp-16: 4rem; --sp-24: 6rem;

  /* raios */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* sombras quentes — tinta marrom, nunca cinza neutro */
  --shadow-card: 0 1px 2px rgb(45 33 31 / .06), 0 8px 24px rgb(45 33 31 / .08);
  --shadow-lift: 0 2px 4px rgb(45 33 31 / .08), 0 16px 48px rgb(45 33 31 / .14);

  /* chrome do site */
  --topo-h: 4rem;   /* altura do header fixo */
  --z-topo: 40;     /* camada do header e do menu */

  /* movimento */
  --dur:   .22s;
  --dur-2: .5s;
  --ease:  cubic-bezier(.25, .7, .25, 1);
}

@media (min-width: 1024px) {
  :root { --topo-h: 4.5rem; }
}

/* --------------------------------------------------------------------------
   Reset enxuto
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* compensa o header fixo ao saltar para âncoras */
  scroll-padding-top: calc(var(--topo-h) + var(--sp-4));
  overflow-x: clip; /* trava de segurança contra overflow horizontal */
}

body {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--topo-h); /* reserva a faixa do header fixo */
  overflow-x: clip;
  background: var(--base-clara);
  color: var(--tinta);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
input, select, textarea, button { font: inherit; color: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
textarea { resize: vertical; }
address { font-style: normal; }

/* accordion: marcador nativo sai — o ícone próprio entra na camada de seções */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* elementos alternados pelo JS (painel do livro, mapa, cookie bar) */
[hidden] { display: none !important; }

/* listas usadas como estrutura (sem marcadores) */
.nav-lista, .hero-chips, .consultorio-chips, .credenciais, .shelf,
.depo-lista, .onde-lista, .bp-lista, .rodape-lista, .rodape-legal-links {
  list-style: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: -.01em;
  text-wrap: balance;
}

p { max-width: 68ch; } /* medida do texto corrido — regra do tile */

a {
  color: var(--acento);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
a:hover { color: var(--acento-hover); }

strong { font-weight: 600; }

::selection { background: rgb(176 141 90 / .35); } /* dourado a 35% */

/* --------------------------------------------------------------------------
   Utilitários de estrutura e de seção
   -------------------------------------------------------------------------- */
.container {
  width: min(1120px, 92vw);
  margin-inline: auto;
}

/* regra "uma seção = uma tela": mínimo de uma viewport, conteúdo centrado */
.secao {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: var(--sp-16);
}
@media (min-width: 1024px) {
  .secao { padding-block: var(--sp-24); }
}

/* cabeçalho padrão de seção: kicker → título serif → intro curta */
.secao-cab {
  display: grid;
  gap: var(--sp-3);
  max-width: 68ch;
  margin-bottom: var(--sp-8);
}
@media (min-width: 1024px) {
  .secao-cab { margin-bottom: var(--sp-12); }
}

.kicker {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--acento-2-tinta);
}

.secao-titulo {
  font-size: var(--step-3);
  font-weight: 500;
}
/* filete dourado sob o título de seção — detalhe fino, ~24px+ */
.secao-titulo::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: var(--sp-4);
  border-radius: 2px;
  background: var(--acento-2);
}

.secao-intro {
  font-size: var(--step-1);
  color: var(--tinta-suave);
}

/* grades das seções — coluna única no mobile; colunas entram por breakpoint */
.hero-grid, .pro-grid, .consultorio-grid, .onde-grid, .contato-grid, .rodape-grid {
  display: grid;
  gap: var(--sp-8);
}

/* ritmo vertical dos blocos de texto (padrão stack) */
.hero-texto > * + *, .pro-texto > * + *, .consultorio-texto > * + *,
.onde-texto > * + *, .contato-texto > * + * {
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   Skip link — visível só com foco
   -------------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: -4rem;
  left: var(--sp-4);
  z-index: calc(var(--z-topo) + 20);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--base-escura);
  color: var(--sobre-acento);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: var(--sp-3); }

/* --------------------------------------------------------------------------
   Botões e CTAs
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .8rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.btn-acento {
  background: var(--acento);
  color: var(--sobre-acento);
  box-shadow: var(--shadow-card);
}
.btn-acento:hover {
  background: var(--acento-hover);
  color: var(--sobre-acento);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.btn-acento:active { transform: translateY(0); }

.btn-linha {
  border-color: var(--acento);
  color: var(--acento);
  background: transparent;
}
.btn-linha:hover {
  border-color: var(--acento-hover);
  color: var(--acento-hover);
  background: var(--acento-nevoa);
}

/* --------------------------------------------------------------------------
   Chips — selos discretos com pingo dourado
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--suporte-frio);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--tinta-suave);
}
/* pingo dourado — detalhe de até ~24px, regra do tile */
.chip::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--acento-2);
}

/* listas de chips */
.hero-chips, .consultorio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Cartão base — superfície compartilhada
   -------------------------------------------------------------------------- */
.depo-card {
  padding: var(--sp-6);
  border: 1px solid var(--suporte-frio);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------------------
   Header fixo — estado .is-scrolled alternado pelo JS
   -------------------------------------------------------------------------- */
.topo {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-topo);
  background: var(--base-clara);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.topo.is-scrolled {
  border-bottom-color: var(--suporte-frio);
  box-shadow: var(--shadow-card);
}
/* a barra encolhe um pouco depois do primeiro scroll */
.topo.is-scrolled .topo-inner { min-height: calc(var(--topo-h) - .75rem); }

.topo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--topo-h);
  transition: min-height var(--dur) var(--ease);
}

.marca {
  display: grid;
  gap: 2px;
  color: var(--tinta);
  text-decoration: none;
}
.marca-nome {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.2;
}
.marca-cro {
  font-size: var(--step--1);
  letter-spacing: .06em;
  color: var(--tinta-discreta);
}

/* botão hambúrguer — vira X quando aria-expanded=true (JS) */
.menu-btn {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-end: calc(var(--sp-3) * -1);
}
.menu-btn-linha {
  display: block;
  width: 1.375rem;
  height: 2px;
  border-radius: 2px;
  background: var(--tinta);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menu-btn[aria-expanded="true"] .menu-btn-linha:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-btn[aria-expanded="true"] .menu-btn-linha:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn-linha:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* nav mobile: gaveta que desce de baixo do header (JS alterna .is-open) */
.nav {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: -1; /* atrás do fundo do header durante a descida */
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4) 4vw var(--sp-8);
  border-bottom: 1px solid var(--suporte-frio);
  background: var(--base-clara);
  box-shadow: var(--shadow-lift);
  transform: translateY(-110%);
  visibility: hidden;
  max-height: calc(100svh - var(--topo-h));
  overflow-y: auto;
  transition: transform var(--dur-2) var(--ease), visibility 0s var(--dur-2);
}
.nav.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--dur-2) var(--ease), visibility 0s;
}

.nav-lista { display: grid; gap: var(--sp-1); }

.nav-link {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--tinta);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.nav-link:hover { color: var(--acento); background: var(--acento-nevoa); }

/* nav em linha a partir do desktop */
@media (min-width: 1024px) {
  .menu-btn { display: none; }
  .nav {
    position: static;
    z-index: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 0;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    visibility: visible;
  }
  .nav-lista { display: flex; align-items: center; gap: var(--sp-1); }
  .nav-link {
    padding: var(--sp-2);
    font-size: var(--step--1);
    white-space: nowrap;
  }
  /* sete links + CTA não cabem em 1024px — o CTA volta em telas largas */
  .nav-cta { display: none; }
}
@media (min-width: 1280px) {
  .nav { gap: var(--sp-6); }
  .nav-lista { gap: var(--sp-2); }
  .nav-link { padding-inline: var(--sp-3); }
  .nav-cta { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Hero — split com moldura lateral (mobile-first: texto, CTA, depois a foto)
   -------------------------------------------------------------------------- */
.hero {
  min-height: calc(100vh - var(--topo-h));
  min-height: calc(100svh - var(--topo-h)); /* primeira tela cheia */
}

.hero-titulo {
  font-size: var(--step-4);
  font-weight: 600;
}
.hero-titulo-destaque { color: var(--acento); }

.hero-sub {
  font-size: var(--step-1);
  color: var(--tinta-suave);
  max-width: 56ch;
}

.hero-texto .hero-ctas { margin-top: var(--sp-6); }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* foto: ~78vw centrada no mobile, apresentação depois do texto */
.hero-moldura {
  position: relative;
  isolation: isolate;
  width: min(78vw, 21rem);
  margin-inline: auto;
  aspect-ratio: 4/5;
}
/* filete dourado deslocado ~12px — efeito porta-retrato */
.hero-moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(12px, 12px);
  border: 2px solid var(--acento-2);
  border-radius: var(--r-lg);
}
.hero-moldura img {
  width: 100%;
  height: 100%;
  border-radius: var(--r-lg);
  object-fit: cover;
  object-position: 50% 20%; /* foco no terço superior — rosto */
  box-shadow: var(--shadow-lift);
}

/* desktop: split 1.1fr .9fr — texto protagonista, foto como prova */
@media (min-width: 760px) {
  .hero-grid {
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: var(--sp-12);
  }
  .hero-moldura {
    width: 100%;
    max-width: 26rem;
    margin-inline: 0;
    aspect-ratio: 3/4;
    justify-self: end;
  }
}

/* --------------------------------------------------------------------------
   Hooks de estado do JS
   .is-scrolled → no .topo (definido no header)
   .is-open     → gaveta .nav (acima) e painéis da camada de seções
   .is-in       → seção que entrou na viewport: entrada suave
   .is-selected → livro escolhido na estante
   -------------------------------------------------------------------------- */
.secao.is-in { animation: secao-entra var(--dur-2) var(--ease) both; }
@keyframes secao-entra {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: none; }
}

.livro.is-selected {
  outline: 2px solid var(--acento-2);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   Foco visível — navegação por teclado
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   Movimento reduzido — zera duração de transições e animações.
   Novas transições/transform não devem ser reintroduzidos depois deste bloco.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Camada SEÇÕES — anexada após a base (o bloco de movimento reduzido acima
   continua valendo: zera a duração de todas as transições/animações daqui).
   Conteúdo: profissional + retrato pendente, estante CSS3D com painel de
   detalhe (sem overlay escuro), consultório, depoimentos, FAQ, onde-atendo
   com consentimento de mapa, contato, CTA final, rodapé, cookie bar e FAB.
   ========================================================================== */

/* respiro extra antes do CTA nas seções de texto corrido */
.consultorio-texto > .btn, .onde-texto > .btn, .contato-texto > .btn {
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   Seção 02 — a profissional: moldura e credenciais
   -------------------------------------------------------------------------- */
.pro .pro-moldura {
  position: relative;
  isolation: isolate;
  width: min(78vw, 22rem);
  margin-inline: auto;
}
/* filete dourado deslocado para o lado oposto ao do hero */
.pro-moldura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(-10px, -10px);
  border: 2px solid var(--acento-2);
  border-radius: var(--r-lg);
}
.pro-moldura img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}

.credenciais { display: grid; gap: var(--sp-4); }
.credenciais-item {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--acento-2);
  color: var(--tinta-suave);
}
.credenciais-item strong { display: block; color: var(--tinta); }

@media (min-width: 760px) {
  .pro-grid {
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: var(--sp-12);
  }
  .pro .pro-moldura { width: 100%; max-width: 24rem; margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   Seção 03 — procedimentos: estante CSS3D
   O palco é um grid; em data-mode="detail" os outros livros saem de cena
   (visibility/position, sem sumir abrupto) e o painel abre ao lado.
   O scrim é só um apanhador de clique transparente — sem overlay escuro.
   -------------------------------------------------------------------------- */
.estante .shelf-stage {
  position: relative;
  display: grid;
  gap: var(--sp-8);
}

/* leque: cada capa gira um pouco, pivotando pela base */
.shelf {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-6) var(--sp-4);
  padding-top: var(--sp-4);
}
.livro-item:nth-child(1) { --giro: -5deg; }
.livro-item:nth-child(2) { --giro: -3deg; }
.livro-item:nth-child(3) { --giro: -1deg; }
.livro-item:nth-child(4) { --giro: 1deg; }
.livro-item:nth-child(5) { --giro: 3deg; }
.livro-item:nth-child(6) { --giro: 5deg; }
.livro-item { transition: opacity var(--dur-2) var(--ease), visibility 0s; }

.livro {
  display: grid;
  justify-items: center;
  width: clamp(5.5rem, 26vw, 9rem);
  color: var(--tinta);
  perspective: 60rem;
}
.livro-3d {
  position: relative;
  display: block;
  width: 100%;
  transform-style: preserve-3d;
  transform: rotate(var(--giro, 0deg));
  transform-origin: 50% 90%;
  transition: transform var(--dur-2) var(--ease);
}
/* lombada: sombreado fino sobre a borda esquerda da capa */
.livro-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-sm);
  background: linear-gradient(to right, rgb(45 33 31 / .28), rgb(45 33 31 / 0) 10%);
  pointer-events: none;
}
/* miolo: filete claro atrás da capa, revelado na borda direita ao abrir */
.livro-3d::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: -5px;
  width: 6px;
  border: 1px solid var(--suporte-frio);
  border-radius: 0 3px 3px 0;
  background: var(--card);
  transform: translateZ(-2px);
}
.livro-capa {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
}
.livro:hover .livro-3d,
.livro:focus-visible .livro-3d {
  transform: rotate(var(--giro, 0deg)) rotateY(-12deg) translateY(-.5rem);
}
.livro-nome {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta-suave);
  text-align: center;
}

/* dados-fonte de cada livro: nunca se exibem — o JS copia para o painel */
.livro-dados { display: none; }

/* modo detalhe: os outros livros saem de cena, o escolhido endireita */
.shelf-stage[data-mode="detail"] .livro-item:not(:has(.livro.is-selected)) {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), visibility 0s var(--dur-2);
}
.shelf-stage[data-mode="detail"] .livro.is-selected .livro-3d {
  transform: translateY(-.35rem) scale(1.05);
}

/* scrim: apanhador de clique transparente (fechar ao clicar fora) */
.shelf-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-lg);
  cursor: default;
}

.book-panel {
  position: relative;
  z-index: 2;
  align-self: start;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--suporte-frio);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  animation: bp-entra var(--dur-2) var(--ease) both;
}
@keyframes bp-entra {
  from { opacity: 0; transform: translateY(.75rem); }
  to   { opacity: 1; transform: none; }
}
.bp-close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--tinta-discreta);
  font-size: 1.75rem;
  line-height: 1;
  transition: color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.bp-close:hover { color: var(--tinta); background: var(--acento-nevoa); }
.bp-corpo {
  display: grid;
  gap: var(--sp-3);
  padding-right: var(--sp-8);
}
.bp-kicker {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--acento-2-tinta);
}
.bp-titulo { font-size: var(--step-2); font-weight: 500; }
.bp-desc { color: var(--tinta-suave); }
.bp-lista {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.bp-lista li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--step--1);
  color: var(--tinta-suave);
}
.bp-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--acento-2);
}
.bp-cta { justify-self: start; margin-top: var(--sp-2); }

@media (min-width: 760px) {
  /* painel de detalhe ao lado do leque, na grade do palco */
  .shelf-stage[data-mode="detail"] {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    align-items: start;
    gap: var(--sp-12);
  }
}

/* --------------------------------------------------------------------------
   Seção 04 — o consultório
   -------------------------------------------------------------------------- */
@media (min-width: 760px) {
  .consultorio-grid {
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: var(--sp-12);
  }
}
.consultorio .consultorio-moldura {
  display: grid;
  gap: var(--sp-3);
  width: min(100%, 30rem);
  margin-inline: auto;
}
.consultorio-moldura img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.consultorio-legenda {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  color: var(--tinta-discreta);
}
/* filete dourado antes da legenda */
.consultorio-legenda::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--acento-2);
}
@media (min-width: 760px) {
  .consultorio .consultorio-moldura { width: 100%; max-width: 26rem; margin-inline: 0; justify-self: end; }
}

/* --------------------------------------------------------------------------
   Seção 05 — depoimentos
   -------------------------------------------------------------------------- */
.depoimentos .depo-lista {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.depo-aspas {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: .8;
  color: var(--acento-2);
}
.depo-quote { display: grid; gap: var(--sp-4); }
.depo-texto { color: var(--tinta-suave); }
.depo-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
}
.depo-autor { font-weight: 600; }
.depo-origem { font-size: var(--step--1); color: var(--tinta-discreta); }

/* depoimento em destaque: respiro escuro dentro da grade */
.depo-destaque {
  border-color: var(--base-escura);
  background: var(--base-escura);
  color: rgb(253 252 250 / .85);
}
.depo-destaque .depo-texto { color: rgb(253 252 250 / .92); font-size: var(--step-1); }
.depo-destaque .depo-autor { color: var(--sobre-acento); }
.depo-destaque .depo-origem { color: rgb(253 252 250 / .62); }
@media (min-width: 760px) {
  .depo-destaque { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   Seção 06 — dúvidas frequentes (details/summary, sem !important)
   -------------------------------------------------------------------------- */
.duvidas .faq-lista {
  display: grid;
  gap: var(--sp-3);
  max-width: 52rem;
}
.faq-item {
  border: 1px solid var(--suporte-frio);
  border-radius: var(--r-md);
  background: var(--card);
  transition: border-color var(--dur) var(--ease);
}
.faq-item[open] { border-color: var(--suporte-pele); }
.faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  font-weight: 600;
  transition: color var(--dur) var(--ease);
}
.faq-pergunta:hover { color: var(--acento); }
.faq-pergunta::after {
  content: "+";
  flex: none;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1;
  color: var(--acento-2-tinta);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] .faq-pergunta::after { transform: rotate(45deg); }
.faq-resposta {
  padding: 0 var(--sp-6) var(--sp-4);
  color: var(--tinta-suave);
}
.faq-nota { margin-top: var(--sp-8); color: var(--tinta-discreta); }
.faq-nota-link { font-weight: 600; }

/* --------------------------------------------------------------------------
   Seção 07 — onde atendo + consentimento do mapa
   -------------------------------------------------------------------------- */
.onde-endereco {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--acento-2);
  font-weight: 500;
}
.onde-lista { display: grid; gap: var(--sp-3); }
.onde-item {
  position: relative;
  padding-left: var(--sp-6);
  color: var(--tinta-suave);
}
.onde-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--acento-2);
}
.onde-item strong { display: block; color: var(--tinta); }

.onde .onde-mapa {
  position: relative;
  aspect-ratio: 4/3;
  min-height: 17rem;
}
.map-consent,
.map-frame {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}
.map-consent {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1.5px dashed var(--suporte-pele);
  background: var(--card);
  text-align: center;
}
.map-consent-end { font-weight: 600; }
.map-consent-aviso {
  max-width: 40ch;
  font-size: var(--step--1);
  color: var(--tinta-discreta);
}
.map-frame {
  overflow: hidden;
  border: 1px solid var(--suporte-frio);
  background: var(--suporte-frio);
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media (min-width: 760px) {
  .onde-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-12); }
}

/* --------------------------------------------------------------------------
   Seção 08 — contato: texto + formulário (honeypot invisível)
   -------------------------------------------------------------------------- */
.contato-fone { font-weight: 500; }
.contato-fone-link { font-weight: 600; }
.contato-nota { font-size: var(--step--1); color: var(--tinta-discreta); }

.contato .contato-form {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--suporte-frio);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.field { display: grid; gap: var(--sp-2); }
.field-label { font-size: var(--step--1); font-weight: 600; }
.field-input {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--suporte-frio);
  border-radius: var(--r-sm);
  background: var(--base-clara);
  transition: border-color var(--dur) var(--ease);
}
.field-input:hover { border-color: var(--suporte-pele); }
.field-input:focus { border-color: var(--acento); }

/* honeypot: fora da tela, mas presente no DOM para pegar robôs */
.field-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.field-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.field-check {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .2rem;
  accent-color: var(--acento);
}
.field-consent-label { font-size: var(--step--1); color: var(--tinta-suave); }
.field-consent-link { font-weight: 600; }
.form-aviso { font-size: var(--step--1); color: var(--tinta-discreta); }
.contato-submit { justify-self: stretch; }

@media (min-width: 760px) {
  .contato .contato-form { padding: var(--sp-8); }
  .contato-submit { justify-self: start; padding-inline: var(--sp-8); }
}
@media (min-width: 900px) {
  .contato-grid {
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: var(--sp-12);
  }
}

/* --------------------------------------------------------------------------
   Seção 09 — CTA final
   -------------------------------------------------------------------------- */
.cta-final .cta-final-inner {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.cta-final .secao-titulo::after { margin-inline: auto; }
.cta-final-texto {
  max-width: 56ch;
  font-size: var(--step-1);
  color: var(--tinta-suave);
}
.cta-final .btn { margin-top: var(--sp-2); }
.cta-final-nota { font-size: var(--step--1); color: var(--tinta-discreta); }

/* --------------------------------------------------------------------------
   Seção 10 — rodapé escuro
   -------------------------------------------------------------------------- */
.rodape {
  padding-block: var(--sp-16) var(--sp-8);
  background: var(--base-escura);
  color: rgb(253 252 250 / .78);
}
.rodape-marca { display: grid; gap: var(--sp-1); align-content: start; }
.rodape-nome {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--sobre-acento);
}
.rodape-cro { font-size: var(--step--1); color: rgb(253 252 250 / .6); }
.rodape-frase {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-style: italic;
  color: rgb(253 252 250 / .85);
}
.rodape-titulo {
  margin-bottom: var(--sp-4);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--acento-2);
}
.rodape-col { display: grid; align-content: start; }
.rodape-endereco { line-height: 1.7; }
.rodape-lista { display: grid; gap: var(--sp-2); }
.rodape-link {
  color: rgb(253 252 250 / .78);
  text-decoration: none;
}
.rodape-link:hover {
  color: var(--sobre-acento);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.rodape-legal {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid rgb(253 252 250 / .14);
}
.rodape-legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.rodape-legal-link { font-size: var(--step--1); color: rgb(253 252 250 / .7); }
.rodape-legal-link:hover { color: var(--sobre-acento); }
.rodape-aviso,
.rodape-creditos { font-size: var(--step--1); color: rgb(253 252 250 / .62); }

@media (min-width: 700px) {
  .rodape-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .rodape-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-12); }
}

/* --------------------------------------------------------------------------
   Cookie bar — fixa embaixo; sobe de leve quando o JS remove [hidden]
   -------------------------------------------------------------------------- */
.cookie-bar {
  position: fixed;
  z-index: calc(var(--z-topo) + 8);
  inset-inline: var(--sp-3);
  bottom: var(--sp-3);
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--suporte-frio);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  animation: cookie-sobe var(--dur-2) var(--ease) both;
}
@keyframes cookie-sobe {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}
.cookie-texto {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--tinta-suave);
}
.cookie-link { font-weight: 600; }
.cookie-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

@media (min-width: 760px) {
  .cookie-bar {
    inset-inline: 0;
    bottom: var(--sp-4);
    width: min(62rem, 92vw);
    margin-inline: auto;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-4) var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   Páginas legais (política/termos) e 404 — texto corrido no mesmo chrome
   -------------------------------------------------------------------------- */
.legal-inner { max-width: 46rem; }
.legal-corpo > * + * { margin-top: var(--sp-4); }
.legal-corpo h2 {
  margin-top: var(--sp-8);
  font-size: var(--step-2);
  font-weight: 500;
}
.legal-corpo ul {
  display: grid;
  gap: var(--sp-2);
  padding-left: var(--sp-6);
}
.legal-corpo li::marker { color: var(--acento-2); }
.legal-atualizacao { font-size: var(--step--1); color: var(--tinta-discreta); }
.legal-voltar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* --------------------------------------------------------------------------
   FAB de WhatsApp — nunca colide com a cookie bar:
   o JS pode medir a barra e gravar --cookie-h; os valores abaixo são a
   margem de segurança enquanto a barra está visível.
   -------------------------------------------------------------------------- */
.wa-fab {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--cookie-h, 0px) + var(--sp-4));
  z-index: calc(var(--z-topo) + 10);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .8rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--acento);
  color: var(--sobre-acento);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
  transition: bottom var(--dur-2) var(--ease),
              transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.wa-fab:hover {
  background: var(--acento-hover);
  color: var(--sobre-acento);
  transform: translateY(-2px);
}
.wa-fab-icone { width: 1.35rem; height: 1.35rem; }
.wa-fab-label { line-height: 1; }

/* cookie bar visível → FAB sobe acima dela */
body:has(.cookie-bar:not([hidden])) .wa-fab { --cookie-h: 16.5rem; }
@media (min-width: 760px) {
  body:has(.cookie-bar:not([hidden])) .wa-fab { --cookie-h: 6.5rem; }
}

/* ==========================================================================
   Camada BREAKPOINTS — escada mobile-first final
   (≥480 · ≥768 · ≥1024 · ≥1280 · ≥1440).
   Os pontos soltos anteriores (700/760/900) continuam valendo; esta camada
   só refina o que já existe: hero, estante (leque mais amplo, painel ao
   lado), grades de cards, FAQ, contato e rodapé. Nenhuma transição ou
   transform novo é introduzido aqui — o bloco de prefers-reduced-motion
   segue cobrindo tudo. Validado: zero overflow horizontal em 390px (as
   regras desta camada só começam em 480px e o html/body mantêm
   overflow-x: clip) e nenhuma seção cortada por altura fixa (tudo é
   min-height/aspect-ratio, nunca height travada).
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≥480px — celulares grandes
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  /* leque: as capas já podem crescer um passo */
  .livro { width: clamp(6.5rem, 21vw, 9.5rem); }

  /* foto do hero um pouco mais contida, sem dominar a primeira tela */
  .hero-moldura { width: min(70vw, 23rem); }

  /* rodapé já respira em duas colunas */
  .rodape-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   ≥768px — tablets: leque em linha única e painel ao lado mais generoso
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* as seis capas passam a dividir uma linha só — o leque abre de verdade */
  .shelf {
    flex-wrap: nowrap;
    gap: var(--sp-6);
  }
  .livro { width: clamp(6rem, 11vw, 8.5rem); }

  /* painel de detalhe ao lado do leque, um pouco mais largo */
  .shelf-stage[data-mode="detail"] {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
  }

  /* depoimentos: grade de duas colunas, destaque segue largo */
  .depo-lista { grid-template-columns: repeat(2, 1fr); }

  /* FAQ: fileiras mais confortáveis para leitura e toque */
  .faq-pergunta { padding-block: 1.25rem; }

  /* contato: formulário com mais ar entre os campos */
  .contato .contato-form { gap: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   ≥1024px — desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* hero: mais ar entre o texto e a foto */
  .hero-grid { gap: var(--sp-16); }
  .hero-sub { max-width: 52ch; }

  /* estante: capas maiores e painel ainda mais generoso */
  .livro { width: clamp(7rem, 7.5vw, 9.5rem); }
  .shelf-stage[data-mode="detail"] {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem);
  }

  /* depoimentos: grade fixa de três colunas */
  .depo-lista { grid-template-columns: repeat(3, 1fr); }

  /* FAQ: medida um pouco maior em tela larga */
  .faq-lista { max-width: 56rem; }

  /* contato: texto e formulário em pé de igualdade */
  .contato-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
  }

  /* rodapé: as quatro colunas ganham mais distância */
  .rodape-grid { gap: var(--sp-16); }
}

/* --------------------------------------------------------------------------
   ≥1280px — desktop largo
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .container { width: min(1180px, 92vw); }

  /* hero: a foto ganha presença sem passar do texto */
  .hero-moldura { max-width: 28rem; }

  /* leque mais amplo: capas maiores e giros mais abertos */
  .livro { width: clamp(8rem, 7vw, 10.5rem); }
  .livro-item:nth-child(1) { --giro: -8deg; }
  .livro-item:nth-child(2) { --giro: -5deg; }
  .livro-item:nth-child(3) { --giro: -2deg; }
  .livro-item:nth-child(4) { --giro:  2deg; }
  .livro-item:nth-child(5) { --giro:  5deg; }
  .livro-item:nth-child(6) { --giro:  8deg; }

  /* depoimentos: cards com mais ar entre si */
  .depo-lista { gap: var(--sp-6); }

  /* rodapé: a faixa legal vira uma linha distribuída */
  .rodape-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4) var(--sp-8);
  }
}

/* --------------------------------------------------------------------------
   ≥1440px — telas amplas
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .container { width: min(1240px, 90vw); }

  /* hero: moldura maior coroando a primeira dobra */
  .hero-moldura { max-width: 30rem; }

  /* leque no tamanho máximo */
  .livro { width: clamp(9rem, 7.5vw, 11rem); }

  /* contato: texto e formulário com ainda mais distância */
  .contato-grid { gap: var(--sp-24); }
}