/* ===== style-tile.css ===== */
/* ============================================================
   STYLE TILE : Dra. Bethânia Andrade : Dermatologia, Santos/SP
   Direção de arte: luxo é o tempo de consulta, não o brilho.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Paleta medida da marca e do retrato (únicos hex do projeto) ---- */
  --dominant: #D2B7A6; /* bege rosado do logo, cor-assinatura */
  --ink:      #2D2421; /* preto quente do lettering */
  --light:    #F4F1EC; /* off-white quente */
  --accent:   #7D5A4C; /* marrom-taupe do blazer */
  --apoio:    #E8DCD2; /* apoio claro */
  --marrom:   #54382A; /* marrom escuro de estúdio */

  /* ---- Derivados (color-mix em oklab) ---- */
  --paper:        color-mix(in oklab, var(--light) 88%, var(--dominant) 12%);
  --paper-warm:   color-mix(in oklab, var(--apoio) 68%, var(--dominant) 32%);
  --surface:      color-mix(in oklab, var(--light) 58%, var(--apoio) 42%);
  --accent-soft:  color-mix(in oklab, var(--accent) 14%, var(--light));
  --accent-line:  color-mix(in oklab, var(--accent) 38%, transparent);
  --accent-hover: color-mix(in oklab, var(--accent) 70%, var(--marrom));
  --dominant-soft:color-mix(in oklab, var(--dominant) 32%, var(--light));
  --ink-70:       color-mix(in oklab, var(--ink) 70%, transparent);
  --ink-40:       color-mix(in oklab, var(--ink) 40%, transparent);
  --ink-shadow:   color-mix(in oklab, var(--ink) 26%, transparent);
  --linha:        color-mix(in oklab, var(--accent) 22%, transparent);
  --vidro:        color-mix(in oklab, var(--light) 52%, transparent);
  --vidro-borda:  color-mix(in oklab, var(--light) 42%, transparent);
  --glow-pele:    oklch(0.76 0.09 50 / 0.30);
  --glow-pele-f:  oklch(0.76 0.09 50 / 0.16);
  --glow-acento:  oklch(0.47 0.06 40 / 0.35);

  /* ---- Sistema de gradiente: luz de estúdio quente ---- */
  --grad-secao-clara: linear-gradient(160deg,
    oklch(0.965 0.008 80) 0%,
    oklch(0.925 0.018 65) 55%,
    oklch(0.885 0.026 58) 100%);
  --grad-escuro: linear-gradient(150deg,
    oklch(0.34 0.05 42) 0%,
    oklch(0.27 0.03 42) 55%,
    oklch(0.215 0.014 45) 100%);
  --grad-destaque: linear-gradient(135deg,
    oklch(0.85 0.035 60) 0%,
    oklch(0.79 0.045 55) 100%);
  --grad-acento-texto: linear-gradient(100deg, var(--accent) 10%, var(--dominant) 90%);
  --grad-filete: linear-gradient(90deg,
    var(--dominant) 0%,
    color-mix(in oklab, var(--dominant) 45%, transparent) 55%,
    transparent 100%);
  --grad-botao: linear-gradient(135deg,
    oklch(0.47 0.06 40) 0%,
    oklch(0.34 0.05 40) 100%);
  --grad-botao-hover: linear-gradient(135deg,
    oklch(0.51 0.07 42) 0%,
    oklch(0.38 0.055 42) 100%);
  --grad-selo: conic-gradient(from 210deg,
    var(--dominant) 0deg,
    var(--accent) 140deg,
    var(--marrom) 260deg,
    var(--dominant) 360deg);
  --grad-glow-hero: radial-gradient(52% 60% at 70% 30%, var(--glow-pele) 0%, transparent 100%);
  --grad-glow-cta:
    radial-gradient(40% 55% at 22% 30%, var(--glow-pele-f) 0%, transparent 100%),
    radial-gradient(45% 60% at 80% 75%, var(--glow-acento) 0%, transparent 100%);
  --grad-glow-selo: radial-gradient(50% 50% at 50% 50%, var(--glow-pele-f) 0%, transparent 100%);
  --grad-shine: linear-gradient(105deg,
    transparent 20%,
    color-mix(in oklab, var(--light) 55%, transparent) 50%,
    transparent 80%);

  /* ---- Tipografia ---- */
  --fonte-titulo: "Cormorant Garamond", "Georgia", serif;
  --fonte-texto:  "Manrope", system-ui, sans-serif;

  --t-display: clamp(3rem, 2rem + 4.6vw, 5.6rem);
  --t-h1:      clamp(2.5rem, 1.7rem + 3.2vw, 4.2rem);
  --t-h2:      clamp(2rem, 1.45rem + 2.2vw, 3.2rem);
  --t-h3:      clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  --t-lead:    clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --t-body:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --t-small:   clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --t-kicker:  clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --t-num:     clamp(3rem, 2.2rem + 4vw, 5.2rem);

  /* ---- Espaçamentos fluidos ---- */
  --esp-1: clamp(0.25rem, 0.2rem + 0.2vw, 0.4rem);
  --esp-2: clamp(0.5rem, 0.4rem + 0.3vw, 0.7rem);
  --esp-3: clamp(0.75rem, 0.6rem + 0.5vw, 1.1rem);
  --esp-4: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
  --esp-5: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem);
  --esp-6: clamp(2rem, 1.6rem + 1.6vw, 3.2rem);
  --esp-7: clamp(3rem, 2.4rem + 2.4vw, 4.8rem);
  --esp-8: clamp(4rem, 3rem + 3.5vw, 6.5rem);
  --esp-9: clamp(5rem, 3.8rem + 5vw, 9rem);

  /* ---- Raios ---- */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 20px;
  --r-4: 32px;
  --r-pill: 999px;

  /* ---- Movimento ---- */
  --dur-1: 0.25s;
  --dur-2: 0.5s;
  --dur-3: 0.9s;
  --dur-4: 1.4s;
  --ease-suave: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-entra: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mola:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Base de acessibilidade do tile ---- */
::selection { background: var(--dominant); color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes glow-respira {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
@keyframes flutua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes revela {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sombra-pulsa {
  0%, 100% { opacity: 0.5; transform: scaleX(1); }
  50%      { opacity: 0.85; transform: scaleX(0.92); }
}
@keyframes shine-varre {
  from { transform: translateX(-160%) skewX(-18deg); }
  to   { transform: translateX(240%) skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   ATMOSFERA: acabamento obrigatório
   ============================================================ */

/* Textura de grão quente sobre qualquer fundo */
.atmosfera-grao { position: relative; isolation: isolate; }
.atmosfera-grao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.08;
  mix-blend-mode: overlay;
}

/* Vidro fosco quente */
.vidro {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--r-3);
  box-shadow: 0 10px 34px var(--ink-shadow);
}

/* Sombra de chão: objeto apoiado, nunca flutuando no vazio */
.sombra-chao { position: relative; }
.sombra-chao::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14px;
  height: 28px;
  z-index: -1;
  background: radial-gradient(ellipse at center, var(--ink-shadow) 0%, transparent 70%);
  filter: blur(10px);
  animation: sombra-pulsa calc(var(--dur-4) * 2) var(--ease-suave) infinite;
}

/* Varredura de luz no hover de botões e cartões */
.shine { position: relative; overflow: hidden; }
.shine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  pointer-events: none;
  background: var(--grad-shine);
  transform: translateX(-160%) skewX(-18deg);
}
.shine:hover::before,
.shine:focus-visible::before {
  animation: shine-varre var(--dur-3) var(--ease-suave);
}

/* Luz radial de estúdio (camada de luz, não de fundo) */
.glow-hero {
  background-image: var(--grad-glow-hero);
  background-repeat: no-repeat;
}
.glow-suave {
  background-image: radial-gradient(45% 55% at 50% 42%,
    color-mix(in oklab, var(--dominant) 18%, transparent) 0%,
    transparent 100%);
  background-repeat: no-repeat;
}

/* Divisor desenhado: traço em gradiente que desvanece */
.divisor {
  display: block;
  width: min(220px, 42%);
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--dominant) 30%,
    var(--accent) 50%,
    var(--dominant) 70%,
    transparent 100%);
}

/* Monograma BA: tinta em gradiente assinatura */
.monograma {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  background: var(--grad-acento-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Família de ícones: traço fino herdando a cor do contexto */
.icone {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* ===== css1.css ===== */
/* ============================================================
   PARTE 1 : base, botões, cabeçalhos de seção, topo, hero, rodapé
   ============================================================ */

/* ---- Reset suave e base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--light);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.08; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---- Link de salto acessível ---- */
.pular {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 100;
  padding: var(--esp-2) var(--esp-4);
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--light);
  background: var(--ink);
  border-radius: var(--r-pill);
  transform: translateY(-260%);
  transition: transform var(--dur-1) var(--ease-entra);
}
.pular:focus-visible { transform: translateY(0); }

/* ---- Container e ritmo vertical ---- */
.container {
  width: min(100% - 2 * var(--esp-4), 1180px);
  margin-inline: auto;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.85em 1.7em;
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-mola),
              box-shadow var(--dur-2) var(--ease-suave),
              background var(--dur-2) var(--ease-suave),
              border-color var(--dur-2) var(--ease-suave);
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 12px 30px var(--ink-shadow); }
.botao:active { transform: translateY(0); }
.botao .icone { width: 1.25em; height: 1.25em; }

.botao--primario,
.botao-principal {
  color: var(--light);
  background: var(--grad-botao);
  border-color: color-mix(in oklab, var(--marrom) 60%, transparent);
  box-shadow: 0 14px 34px var(--glow-acento);
}
.botao--primario:hover,
.botao-principal:hover {
  background: var(--grad-botao-hover);
  box-shadow: 0 18px 44px var(--glow-acento), 0 0 0 6px var(--glow-pele-f);
}

.botao--secundario,
.botao-secundario {
  color: var(--accent);
  background: color-mix(in oklab, var(--light) 70%, transparent);
}
.botao--secundario:hover,
.botao-secundario:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.botao--whatsapp,
.botao-whatsapp {
  color: var(--light);
  background: var(--grad-botao);
  border-color: color-mix(in oklab, var(--marrom) 60%, transparent);
  box-shadow: 0 10px 26px var(--ink-shadow);
}
.botao--whatsapp:hover,
.botao-whatsapp:hover {
  background: var(--grad-botao-hover);
  box-shadow: 0 14px 36px var(--glow-acento);
}

/* ============================================================
   CABEÇALHOS DE SEÇÃO
   ============================================================ */
.cabeca-secao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  margin-bottom: var(--esp-6);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--t-kicker);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: "";
  width: 34px;
  height: 1.5px;
  background: var(--grad-filete);
}

.filete {
  display: block;
  width: min(160px, 34%);
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: var(--grad-filete);
}

.titulo-secao {
  font-size: var(--t-h2);
  color: var(--ink);
  max-width: 22ch;
}
.titulo-secao .grad-texto,
.grad-texto {
  background: var(--grad-acento-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.texto {
  font-size: var(--t-body);
  color: var(--ink-70);
  max-width: 62ch;
}
.texto strong { color: var(--ink); }

/* ============================================================
   FUNDOS DE SEÇÃO (~100svh, conteúdo em 1 viewport)
   ============================================================ */
.secao-clara,
.secao-escura,
.secao-destaque {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding-block: var(--esp-7);
  overflow: hidden;
}
.secao-clara    { background: var(--grad-secao-clara); }
.secao-escura   { background: var(--grad-escuro); color: var(--light); }
.secao-destaque { background: var(--grad-destaque); }

.secao-escura .titulo-secao,
.secao-escura .texto { color: var(--light); }
.secao-escura .texto { color: color-mix(in oklab, var(--light) 82%, transparent); }
.secao-escura .kicker { color: var(--dominant); }

/* ============================================================
   TOPO (no fluxo, nunca fixo)
   ============================================================ */
.topo {
  position: relative;
  z-index: 10;
  padding-block: var(--esp-3);
  background: color-mix(in oklab, var(--light) 78%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo-caixa {
  width: min(100% - 2 * var(--esp-4), 1180px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}
.topo-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  text-decoration: none;
  color: var(--ink);
}
.topo-monograma { width: 2.4em; height: 2.4em; color: var(--accent); }
.topo-identidade { display: flex; flex-direction: column; line-height: 1.15; }
.topo-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 600;
}
.topo-crm {
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.topo-nav,
.nav { display: none; }
.topo-lista { display: flex; align-items: center; gap: var(--esp-4); }
.topo-link {
  position: relative;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink-70);
  padding-block: 0.3em;
  transition: color var(--dur-1) var(--ease-suave);
}
.topo-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--grad-filete);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-entra);
}
.topo-link:hover { color: var(--accent-hover); }
.topo-link:hover::after { transform: scaleX(1); }

.topo-acoes { display: flex; align-items: center; gap: var(--esp-3); }
.topo-acoes .botao { padding: 0.65em 1.3em; }

/* ---- Hamburguer ---- */
.hamburguer {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-suave),
              background var(--dur-1) var(--ease-suave);
}
.hamburguer:hover { border-color: var(--accent); background: var(--accent-soft); }
.hamburguer-linha {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease-entra), opacity var(--dur-1) var(--ease-suave);
}
.hamburguer[aria-expanded="true"] .hamburguer-linha:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguer[aria-expanded="true"] .hamburguer-linha:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] .hamburguer-linha:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Menu móvel ---- */
.menu,
.menu-mobile {
  position: fixed;
  inset: var(--esp-3);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-5);
  padding: var(--esp-6);
  text-align: center;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--dur-2) var(--ease-suave), transform var(--dur-2) var(--ease-entra);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile:not([hidden]) { opacity: 1; transform: translateY(0); }
.menu-lista { display: flex; flex-direction: column; gap: var(--esp-4); }
.menu-link {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur-1) var(--ease-suave);
}
.menu-link:hover { color: var(--accent); }
.menu-fone { font-size: var(--t-small); color: var(--ink-70); }
.menu-fone a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding-block: var(--esp-5) 0;
  background: var(--grad-secao-clara);
  overflow: hidden;
}
.hero-caixa {
  width: min(100% - 2 * var(--esp-4), 1180px);
  margin-inline: auto;
  display: grid;
  gap: var(--esp-6);
  position: relative;
  z-index: 2;
}
.hero-conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-4);
}
.kicker-hero { color: var(--accent); }
.hero-titulo {
  font-size: var(--t-h1);
  max-width: 16ch;
}
.hero-lead {
  font-size: var(--t-lead);
  color: var(--ink-70);
  max-width: 56ch;
}

.hero-fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
}
.hero-fato {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--t-small);
  color: var(--ink-70);
}
.hero-fato .icone { color: var(--accent); }
.hero-fato strong {
  font-family: var(--fonte-titulo);
  font-size: 1.25em;
  color: var(--accent);
}

.hero-fone { font-size: var(--t-small); color: var(--ink-70); }
.hero-fone-num {
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1.5px solid var(--dominant);
  transition: color var(--dur-1) var(--ease-suave), border-color var(--dur-1) var(--ease-suave);
}
.hero-fone-num:hover { color: var(--accent-hover); border-color: var(--accent); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--esp-3); }

.hero-lado {
  display: grid;
  gap: var(--esp-4);
  align-content: start;
}
.hero-retrato { margin: 0; }
.hero-retrato img,
.hero__foto {
  width: 100%;
  border-radius: var(--r-3);
  border: 1px solid var(--vidro-borda);
  box-shadow: 0 24px 60px var(--ink-shadow);
}

/* Moldura de estúdio aplicável ao retrato */
.moldura {
  position: relative;
  border-radius: var(--r-3);
}
.moldura::before {
  content: "";
  position: absolute;
  inset: var(--esp-2);
  border: 1px solid var(--accent-line);
  border-radius: calc(var(--r-3) - 6px);
  pointer-events: none;
  z-index: 2;
}

.hero-provas {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}
.hero-marca { margin: 0; flex: 1; }
.hero-marca img {
  width: 100%;
  border-radius: var(--r-2);
  border: 1px solid var(--linha);
}

/* ---- Selo 4,9 com anel cônico ---- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0;
}
.selo-anel {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(84px, 22vw, 108px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-selo);
  padding: 4px;
  animation: flutua calc(var(--dur-4) * 3) var(--ease-suave) infinite;
}
.selo-anel::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  background: var(--grad-glow-selo);
  animation: glow-respira calc(var(--dur-4) * 2) var(--ease-suave) infinite;
}
.selo-anel::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--paper);
}
.selo-valor {
  position: relative;
  z-index: 1;
  font-family: var(--fonte-titulo);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.selo-estrela {
  position: absolute;
  z-index: 1;
  bottom: 22%;
  width: 0.9em;
  height: 0.9em;
  color: var(--dominant);
}
.selo-texto {
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-70);
}

/* ---- Marquee de especialidades ---- */
.marquee {
  position: relative;
  z-index: 2;
  margin-top: var(--esp-6);
  padding-block: var(--esp-3);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  background: color-mix(in oklab, var(--dominant) 12%, var(--light));
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-trilho {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee-trilho { animation-play-state: paused; }
.marquee-seq {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-4);
  padding-right: var(--esp-4);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-style: italic;
  white-space: nowrap;
  color: var(--ink-70);
}
.marquee-sep { color: var(--dominant); font-style: normal; font-size: 0.7em; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape {
  position: relative;
  padding-block: var(--esp-7) var(--esp-5);
  background: var(--grad-escuro);
  color: color-mix(in oklab, var(--light) 80%, transparent);
}
.rodape a { color: var(--dominant); }
.rodape .monograma { font-size: var(--t-display); opacity: 0.9; }

/* ============================================================
   ENTRADA DOS ELEMENTOS (reveal progressivo)
   ============================================================ */
[data-reveal] { animation: revela var(--dur-3) var(--ease-entra) both; }
[data-reveal]:nth-child(2) { animation-delay: 0.08s; }
[data-reveal]:nth-child(3) { animation-delay: 0.16s; }
[data-reveal]:nth-child(4) { animation-delay: 0.24s; }
[data-reveal]:nth-child(5) { animation-delay: 0.32s; }
[data-reveal]:nth-child(6) { animation-delay: 0.4s; }
[data-reveal]:nth-child(7) { animation-delay: 0.48s; }

/* ===== css2.css ===== */
/* ============================================================
   Bloco 2 : áreas do cartão de depoimento e painel de detalhe
   ============================================================ */

/* Grade de áreas: cartão de depoimento e painel compartilham o mapa */
.grade {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "aspas  titulo titulo"
    "aspas  desc   desc"
    "lista  lista  lista"
    "autor  autor  close";
  align-items: start;
  column-gap: var(--esp-3);
  row-gap: var(--esp-2);
}

/* Cada área ocupa sua célula nomeada */
.area-titulo {
  grid-area: titulo;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.area-desc {
  grid-area: desc;
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-70);
  margin: 0;
}

.area-lista {
  grid-area: lista;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  margin: var(--esp-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  color: var(--ink-70);
}

.area-lista li {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
}

.area-lista .icone {
  width: 1.1em;
  height: 1.1em;
  color: var(--accent);
}

.area-depoimento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "aspas depoimento"
    "aspas autor";
  column-gap: var(--esp-3);
  row-gap: var(--esp-2);
  align-items: start;
  padding: var(--esp-4);
  background: var(--paper);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-3);
  box-shadow: 0 8px 26px var(--ink-shadow);
  transition: transform var(--dur-2) var(--ease-suave),
              box-shadow var(--dur-2) var(--ease-suave);
}

.area-depoimento:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px var(--ink-shadow);
}

.area-panel {
  grid-area: depoimento;
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-70);
  margin: 0;
}

.area-close {
  grid-area: close;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--light) 70%, transparent);
  color: var(--accent);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-suave),
              color var(--dur-1) var(--ease-suave),
              transform var(--dur-1) var(--ease-mola);
}

.area-close:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
  transform: rotate(90deg);
}

.area-close .icone {
  width: 1.1em;
  height: 1.1em;
}

/* Aspas decorativas do depoimento */
.aspas {
  grid-area: aspas;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-2);
  background: var(--accent-soft);
  color: var(--accent);
}

.aspas-svg {
  width: 1.4em;
  height: 1.4em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Assinatura do autor do depoimento */
.autor-nome {
  grid-area: autor;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-lead);
  line-height: 1.2;
  color: var(--accent);
}

/* ===== css3.css ===== */
/* ============================================================
   PARTE 3 · Estante Zanetti (livros) + botão principal
   Mobile-first: base 390px, desktop em (min-width:900px)
   ============================================================ */

/* ---- Botão principal: gradiente escuro com glow de acento ---- */
.botao-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-5);
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--light);
  text-decoration: none;
  background: var(--grad-botao);
  border: 1px solid color-mix(in oklab, var(--light) 18%, transparent);
  border-radius: var(--r-pill);
  box-shadow:
    0 14px 30px var(--ink-shadow),
    inset 0 1px 0 color-mix(in oklab, var(--light) 22%, transparent);
  cursor: pointer;
  transition:
    transform var(--dur-1) var(--ease-mola),
    box-shadow var(--dur-2) var(--ease-suave),
    background var(--dur-2) var(--ease-suave);
}
.botao-principal:hover,
.botao-principal:focus-visible {
  background: var(--grad-botao-hover);
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px var(--ink-shadow),
    0 0 42px var(--glow-acento),
    inset 0 1px 0 color-mix(in oklab, var(--light) 26%, transparent);
}
.botao-principal:active { transform: translateY(0); }
.botao-principal .icone { width: 1.3em; height: 1.3em; }

/* ============================================================
   LIVRO · base mobile (sem 3D, um item por linha)
   ============================================================ */
.book {
  position: relative;
  list-style: none;
  overflow: visible;
}

/* Âncora que envolve capa e dados do livro */
.book-ancora {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: var(--esp-4);
  align-items: center;
  padding: var(--esp-4);
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  box-shadow: 0 10px 26px var(--ink-shadow);
  transition:
    transform var(--dur-2) var(--ease-entra),
    box-shadow var(--dur-2) var(--ease-suave),
    border-color var(--dur-2) var(--ease-suave);
}
.book-ancora:hover,
.book-ancora:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow:
    0 16px 36px var(--ink-shadow),
    0 0 34px var(--glow-pele-f);
}

/* Arte da capa (embalagem da capa + leque de páginas) */
.book-art {
  position: relative;
  overflow: visible;
  border-radius: var(--r-2);
}
.book-capa {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 0.672 / 1;
  overflow: hidden;
  color: var(--light);
  background: var(--grad-escuro);
  border-radius: var(--r-2);
  box-shadow:
    0 10px 22px var(--ink-shadow),
    inset 0 0 0 1px color-mix(in oklab, var(--light) 10%, transparent);
}
.book-capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    color-mix(in oklab, var(--light) 20%, transparent) 0%,
    transparent 34%);
  pointer-events: none;
}

/* Filete interno da capa */
.book-capa::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in oklab, var(--dominant) 42%, transparent);
  border-radius: calc(var(--r-2) - 4px);
  pointer-events: none;
}

/* Capa em perspectiva (só compõe no desktop) */
.cover-art {
  position: absolute;
  inset: 0;
  border-radius: var(--r-2);
}

/* Leque de páginas do livro aberto */
.page-fan {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-fan i {
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: 6%;
  width: 88%;
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: linear-gradient(100deg,
    var(--paper-warm) 0%,
    var(--light) 60%,
    var(--apoio) 100%);
  border: 1px solid var(--linha);
  opacity: 0;
  transform-origin: left center;
  transform: rotateY(0deg);
}

/* Conteúdo textual da capa */
.book-num {
  position: absolute;
  top: var(--esp-3);
  left: var(--esp-3);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1;
  color: var(--dominant);
  z-index: 2;
}
.book-icone {
  position: absolute;
  right: var(--esp-3);
  bottom: var(--esp-3);
  width: 1.6em;
  height: 1.6em;
  color: var(--dominant);
  opacity: 0.9;
  z-index: 2;
}
.book-titulo {
  position: absolute;
  left: var(--esp-3);
  right: var(--esp-3);
  bottom: var(--esp-4);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.12;
  color: var(--light);
  z-index: 2;
}
.book-selo {
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-3);
  padding: var(--esp-1) var(--esp-2);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--grad-destaque);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 12px var(--ink-shadow);
  z-index: 2;
}

/* Autor/origem do volume no cartão */
.autor-origem {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
}
.autor-origem .book-titulo {
  position: static;
  font-size: var(--t-h3);
  color: var(--ink);
}
.autor-origem p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-70);
}
.autor-origem .book-num {
  position: static;
  font-size: var(--t-kicker);
  font-family: var(--fonte-texto);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.autor-origem .book-num::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: var(--esp-2);
  background: var(--grad-filete);
  border-radius: 2px;
}

/* ============================================================
   MODO DETALHE · livro aberto
   ============================================================ */
.shelf-stage[data-mode="detail"] .book:not(.is-open-book) {
  display: none;
}

/* Livro aberto: capa larga e páginas em leque */
.shelf-stage[data-mode="detail"] .book.is-open-book .book-ancora {
  grid-template-columns: 1fr;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.shelf-stage[data-mode="detail"] .book.is-open-book .book-art {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}
.shelf-stage[data-mode="detail"] .book.is-open-book .book-capa {
  aspect-ratio: 0.672 / 1;
}

/* ===== css4.css ===== */
/* ============================================================
   BLOCO 04 : botões secundários, cabeçalhos de seção,
   depoimentos e grade do consultório
   ============================================================ */

/* ---- Botão secundário: contorno em filete, fundo de vidro quente ---- */
.botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 52px;
  padding: var(--esp-3) var(--esp-5);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  background-color: color-mix(in oklab, var(--light) 62%, transparent);
  background-image: linear-gradient(135deg,
    color-mix(in oklab, var(--dominant) 16%, transparent) 0%,
    transparent 70%);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--light) 70%, transparent),
              0 6px 18px color-mix(in oklab, var(--ink) 10%, transparent);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-suave),
              border-color var(--dur-1) var(--ease-suave),
              background-color var(--dur-1) var(--ease-suave),
              transform var(--dur-2) var(--ease-mola),
              box-shadow var(--dur-2) var(--ease-suave);
}
.botao-secundario:hover,
.botao-secundario:focus-visible {
  color: var(--accent-hover);
  border-color: var(--dominant);
  background-color: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--light) 80%, transparent),
              0 12px 28px var(--ink-shadow);
}
.botao-secundario:active { transform: translateY(0); }

/* ---- Botão fantasma: só tipografia e filete que cresce ---- */
.btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) 0;
  border: 0;
  background: none;
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-70);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-suave);
}
.btn-ghost::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-filete);
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-entra);
}
.btn-ghost:hover,
.btn-ghost:focus-visible { color: var(--accent); }
.btn-ghost:hover::after,
.btn-ghost:focus-visible::after { transform: scaleX(1); }

/* ---- WhatsApp: gradiente de tinta escura e glow de acento no hover ---- */
.botao-whatsapp,
.btn-whats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 52px;
  padding: var(--esp-3) var(--esp-5);
  border: 1px solid color-mix(in oklab, var(--marrom) 60%, transparent);
  border-radius: var(--r-pill);
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--light);
  background-image: var(--grad-botao);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--dominant) 34%, transparent),
              0 10px 26px var(--ink-shadow);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-mola),
              box-shadow var(--dur-2) var(--ease-suave),
              background-image var(--dur-1) var(--ease-suave);
}
.botao-whatsapp .icone,
.btn-whats .icone { width: 1.25em; height: 1.25em; }
.botao-whatsapp:hover,
.botao-whatsapp:focus-visible,
.btn-whats:hover,
.btn-whats:focus-visible {
  background-image: var(--grad-botao-hover);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--dominant) 45%, transparent),
              0 16px 36px var(--glow-acento),
              0 0 0 6px color-mix(in oklab, var(--dominant) 18%, transparent);
}
.botao-whatsapp:active,
.btn-whats:active { transform: translateY(-1px); }

.btn-whats {
  width: 100%;
  max-width: 420px;
}

/* ---- Cabeçalho de seção: kicker, título e filete ---- */
.cabecalho-secao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.cabecalho-secao .kicker,
.cabecalho-secao > p:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.cabecalho-secao .kicker::before,
.cabecalho-secao > p:first-child::before {
  content: "";
  width: clamp(28px, 7vw, 56px);
  height: 2px;
  border-radius: 2px;
  background: var(--grad-filete);
}
.cabecalho-secao h2 {
  position: relative;
  margin: 0;
  padding-bottom: var(--esp-3);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.cabecalho-secao h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(180px, 40%);
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: var(--grad-filete);
}
.cabecalho-secao h2 .grad-texto,
.cabecalho-secao h2 em {
  font-style: italic;
  background: var(--grad-acento-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cabecalho-secao p:not(:first-child) {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-70);
  text-wrap: pretty;
}

/* ---- Caneta de aplicação: objeto apoiado com luz suave ---- */
.caneta-aplicacao {
  position: relative;
  display: block;
  width: min(100%, 340px);
  margin: 0 auto;
  border-radius: var(--r-3);
  background-image: var(--grad-glow-selo);
  background-repeat: no-repeat;
  background-position: center;
  animation: flutua calc(var(--dur-4) * 4) var(--ease-suave) infinite;
  will-change: transform;
}
.caneta-aplicacao img,
.caneta-aplicacao svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-3);
  filter: drop-shadow(0 18px 28px var(--ink-shadow));
}
.caneta-aplicacao figcaption {
  margin-top: var(--esp-3);
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink-70);
}

/* ---- Cartão de depoimento: vidro, aspas e borda de acento ---- */
.cartao-depoimento {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-4) var(--esp-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-3);
  background-color: var(--paper);
  background-image: linear-gradient(155deg,
    color-mix(in oklab, var(--light) 40%, transparent) 0%,
    transparent 60%);
  box-shadow: 0 10px 30px color-mix(in oklab, var(--ink) 12%, transparent);
  transition: transform var(--dur-2) var(--ease-entra),
              box-shadow var(--dur-2) var(--ease-suave),
              border-color var(--dur-1) var(--ease-suave);
}
.cartao-depoimento::before {
  content: "";
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-4);
  width: clamp(34px, 9vw, 52px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.5;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12c-6 2.4-9.5 7.4-9.5 13.8V36h11V24h-6c0-4.2 1.9-7.3 5.6-9.2zM41 12c-6 2.4-9.5 7.4-9.5 13.8V36h11V24h-6c0-4.2 1.9-7.3 5.6-9.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12c-6 2.4-9.5 7.4-9.5 13.8V36h11V24h-6c0-4.2 1.9-7.3 5.6-9.2zM41 12c-6 2.4-9.5 7.4-9.5 13.8V36h11V24h-6c0-4.2 1.9-7.3 5.6-9.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cartao-depoimento:hover,
.cartao-depoimento:focus-within {
  border-color: var(--dominant);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px var(--ink-shadow);
}
.cartao-depoimento blockquote,
.cartao-depoimento p {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--ink);
  text-wrap: pretty;
}
.cartao-depoimento .icone { color: var(--dominant); }
.cartao-depoimento figcaption,
.cartao-depoimento cite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-2);
  margin-top: auto;
  padding-top: var(--esp-3);
  border-top: 1px solid var(--linha);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}
.cartao-depoimento figcaption span,
.cartao-depoimento cite span {
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-40);
}

/* ---- Grade do consultório: mapa e informações ---- */
.consultorio-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-5);
  align-items: stretch;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}
.consultorio-grade > * { min-width: 0; }
.consultorio-grade img,
.consultorio-grade iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(180px, 32svh, 300px);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  object-fit: cover;
}

.consultorio-info {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-4);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--r-3);
  background-color: var(--surface);
  background-image: linear-gradient(160deg,
    color-mix(in oklab, var(--light) 46%, transparent) 0%,
    transparent 62%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--light) 66%, transparent),
              0 10px 30px color-mix(in oklab, var(--ink) 10%, transparent);
}
.consultorio-info h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}
.consultorio-info p,
.consultorio-info li {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-70);
}
.consultorio-info ul {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.consultorio-info li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}
.consultorio-info li .icone { color: var(--accent); }
.consultorio-info strong { color: var(--ink); font-weight: 700; }
.consultorio-info a {
  color: var(--accent);
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-suave);
}
.consultorio-info a:hover,
.consultorio-info a:focus-visible {
  color: var(--accent-hover);
  text-decoration-color: var(--dominant);
}
.consultorio-info .btn-whats { margin-top: var(--esp-2); }

/* Selector literal do inventário, mantido inerte */
.class\= { all: unset; }

/* ===== css5.css ===== */
/* ============================================================
   PARTE 5 : contagem de resultados + contato do consultório
   ============================================================ */

/* ---- Contagem: faixa de números "de -> para" ---- */
.contagem {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
  align-items: center;
  padding: var(--esp-4) var(--esp-4) var(--esp-5);
  margin-top: var(--esp-4);
  border-radius: var(--r-3);
  background: var(--paper);
  border: 1px solid var(--linha);
  box-shadow: 0 14px 40px var(--ink-shadow);
}

.contagem-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
  text-align: center;
}

.contagem-de,
.contagem-para {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
}

.contagem-numero {
  font-family: var(--fonte-titulo);
  font-size: var(--t-num);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.contagem-para .contagem-numero {
  background: var(--grad-acento-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contagem-legenda {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
}

/* Seta de progresso entre os números */
.contagem-seta {
  position: relative;
  display: block;
  width: 100%;
  max-width: 140px;
  height: 2px;
  margin: var(--esp-2) auto;
  border-radius: 2px;
  background: var(--grad-filete);
}

.contagem-seta-ponta {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

@media (min-width: 900px) {
  .contagem {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--esp-6);
    padding: var(--esp-5) var(--esp-6);
  }

  .contagem-seta {
    max-width: 200px;
  }
}

/* ---- Consultório: mapa e telefone ---- */
.consultorio-mapa {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid var(--linha);
  background:
    radial-gradient(60% 55% at 55% 45%, var(--glow-pele-f) 0%, transparent 100%),
    var(--grad-secao-clara);
  box-shadow: 0 18px 48px var(--ink-shadow);
}

.consultorio-mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(0.22) saturate(0.85) contrast(1.02);
}

.consultorio-mapa .icone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.4em;
  height: 2.4em;
  color: var(--dominant);
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 6px 10px var(--ink-shadow));
  animation: flutua calc(var(--dur-4) * 2) var(--ease-suave) infinite;
}

.consultorio-telefone {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 2px;
  transition: color var(--dur-1) var(--ease-suave),
              border-color var(--dur-1) var(--ease-suave),
              transform var(--dur-1) var(--ease-suave);
}

.consultorio-telefone .icone {
  color: var(--dominant);
  transition: transform var(--dur-2) var(--ease-mola);
}

.consultorio-telefone:hover,
.consultorio-telefone:focus-visible {
  color: var(--accent-hover);
  border-bottom-color: var(--dominant);
  transform: translateY(-1px);
}

/* ===== css6.css ===== */
/* ============================================================
   PARTE 6 : contagem, conteúdo, container estreito, CTA e depoimentos
   ============================================================ */

/* ---- Fluxo principal ---- */
.conteudo {
  display: block;
  overflow-x: clip;
}

/* ---- Container estreito: blocos de leitura e CTA ---- */
.container-estreito {
  width: 100%;
  max-width: 62ch;
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

/* ---- Contagem desenhada (SVG de traços, ex: 4,9 / 29 / 28) ---- */
.contagem-svg {
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin-inline: auto;
  overflow: visible;
  color: var(--accent);
}

.contagem-tracos {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Depoimentos ---- */
.depoimento {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-5) var(--esp-4) var(--esp-4);
  background: var(--paper);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-3);
  box-shadow: 0 14px 34px var(--ink-shadow);
  transition: transform var(--dur-2) var(--ease-suave),
              box-shadow var(--dur-2) var(--ease-suave);
}

.depoimento:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px var(--ink-shadow);
}

/* Aspas decorativas do depoimento */
.depoimento-aspas {
  position: absolute;
  top: var(--esp-3);
  left: var(--esp-4);
  width: 2.2em;
  height: 2.2em;
  color: var(--accent-line);
  pointer-events: none;
}

.depoimento-aspas + p,
.depoimento p:first-of-type {
  position: relative;
  padding-top: var(--esp-3);
}

.depoimento p {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-70);
}

.depoimento figcaption,
.depoimento footer {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.depoimento figcaption::before,
.depoimento footer::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--grad-filete);
}

/* Depoimento ocupando a largura inteira da grade */
.depoimento--inteira {
  grid-column: 1 / -1;
}

/* ---- CTA final: bloco escuro com luz de estúdio ---- */
.cta-container {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  text-align: center;
  padding: var(--esp-7) var(--esp-4);
  border-radius: var(--r-4);
  background: var(--grad-escuro);
  background-image: var(--grad-glow-cta), var(--grad-escuro);
  color: var(--light);
  box-shadow: 0 30px 60px var(--ink-shadow);
  overflow: hidden;
}

/* Assinatura da médica sob o CTA */
.cta-assinatura {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.3;
  background: var(--grad-acento-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Endereço de fechamento */
.cta-endereco {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: color-mix(in oklab, var(--light) 78%, transparent);
}

.cta-endereco a {
  color: var(--dominant);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  transition: color var(--dur-1) var(--ease-suave),
              border-color var(--dur-1) var(--ease-suave);
}

.cta-endereco a:hover {
  color: var(--light);
  border-color: var(--dominant);
}

/* ===== css7.css ===== */
/* ============================================================
   PARTE 7 : depoimentos, depoimento em destaque, dermatoscópio
   desenhado e linha de dia fechado na tabela de horários
   ============================================================ */

/* ---- Trilha de depoimentos da seção de avaliações ---- */
.depoimentos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
}

/* Texto citado do depoimento */
.depoimento-texto {
  margin: 0;
  padding: 0;
  border: 0;
}

.depoimento-texto p {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
}

/* Assinatura: nome da paciente e origem da avaliação */
.depoimento-autor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-1) var(--esp-2);
  margin-top: auto;
  padding-top: var(--esp-3);
  border-top: 1px solid var(--linha);
}

.depoimento-nome {
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.depoimento-origem {
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-40);
}

/* Depoimento destacado: mais largo, mais tinta de acento */
.depoimento-destaque {
  position: relative;
  isolation: isolate;
  border-color: var(--accent-line);
  background:
    radial-gradient(60% 80% at 12% 8%,
      color-mix(in oklab, var(--dominant) 20%, transparent) 0%,
      transparent 100%),
    var(--paper);
}

.depoimento-destaque::after {
  content: "";
  position: absolute;
  left: var(--esp-4);
  right: var(--esp-4);
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-filete);
  pointer-events: none;
}

.depoimento-destaque .depoimento-texto p {
  font-size: var(--t-h3);
}

/* ---- Figura do dermatoscópio: instrumento desenhado em linha ---- */
.dermatoscopio-figura {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-5) var(--esp-4);
  border-radius: var(--r-4);
  border: 1px solid var(--vidro-borda);
  background:
    radial-gradient(55% 50% at 50% 38%,
      color-mix(in oklab, var(--dominant) 22%, transparent) 0%,
      transparent 100%),
    var(--paper);
  box-shadow: 0 18px 44px var(--ink-shadow);
  overflow: hidden;
}

.dermatoscopio-svg {
  display: block;
  width: min(72%, 300px);
  height: auto;
  color: var(--accent);
  filter: drop-shadow(0 10px 18px var(--ink-shadow));
  animation: flutua calc(var(--dur-4) * 3) var(--ease-suave) infinite;
}

.dermatoscopio-legenda {
  max-width: 30ch;
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--ink-40);
}

/* ---- Linha de dia fechado na tabela de horários ---- */
.dia-fechado th,
.dia-fechado td {
  color: var(--ink-40);
  font-weight: 500;
}

.dia-fechado td {
  font-style: italic;
}

/* ===== css8.css ===== */
/* ============================================================
   PARTE 8 : faixa escura, etapas, estrelas e FAQ
   ============================================================ */

/* ---- Faixa escura: seção de estúdio em marrom profundo ---- */
.faixa-escura {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: var(--esp-5);
  padding: var(--esp-7) var(--esp-4);
  background: var(--grad-escuro);
  color: var(--light);
  overflow: hidden;
}

.faixa-escura::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background: var(--grad-glow-cta);
  animation: glow-respira calc(var(--dur-4) * 3) var(--ease-suave) infinite;
}

.faixa-escura::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-filete);
  opacity: 0.8;
}

.faixa-escura .kicker { color: var(--dominant); }
.faixa-escura .kicker::before { background: var(--dominant); }
.faixa-escura h2,
.faixa-escura h3 { color: var(--light); }
.faixa-escura p { color: color-mix(in oklab, var(--light) 78%, var(--dominant)); }
.faixa-escura .divisor { opacity: 0.9; }

/* ---- Etapas: trilho numerado da consulta ---- */
.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}

.etapa {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-2) var(--esp-3);
  align-items: start;
  padding: var(--esp-4);
  border-radius: var(--r-3);
  background: color-mix(in oklab, var(--light) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--dominant) 22%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px color-mix(in oklab, var(--ink) 36%, transparent);
  transition: transform var(--dur-2) var(--ease-entra),
              border-color var(--dur-2) var(--ease-suave),
              background-color var(--dur-2) var(--ease-suave);
}

.etapa::after {
  content: "";
  position: absolute;
  left: var(--esp-4);
  right: var(--esp-4);
  bottom: 0;
  height: 1px;
  background: var(--grad-filete);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-suave);
}

.etapa:hover,
.etapa:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--dominant) 48%, transparent);
  background: color-mix(in oklab, var(--light) 12%, transparent);
}

.etapa:hover::after,
.etapa:focus-within::after { opacity: 1; }

.etapa > p {
  grid-column: 2;
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.6;
}

.etapa-num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-pill);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--ink);
  background: var(--grad-destaque);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--dominant) 40%, transparent),
              0 10px 22px color-mix(in oklab, var(--ink) 40%, transparent),
              inset 0 1px 0 color-mix(in oklab, var(--light) 60%, transparent);
}

.etapa-titulo {
  margin: 0;
  align-self: center;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--light);
}

/* ---- Estrelas: fileira de avaliação 5 de 5 ---- */
.estrelas {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
  color: var(--accent);
}

.estrelas .icone {
  width: 1.15em;
  height: 1.15em;
  fill: color-mix(in oklab, var(--dominant) 85%, var(--accent));
  stroke: var(--accent);
  filter: drop-shadow(0 2px 4px var(--glow-pele-f));
  transition: transform var(--dur-1) var(--ease-mola);
}

.estrelas:hover .icone { transform: translateY(-2px) scale(1.07); }
.estrelas:hover .icone:nth-child(2) { transition-delay: 40ms; }
.estrelas:hover .icone:nth-child(3) { transition-delay: 80ms; }
.estrelas:hover .icone:nth-child(4) { transition-delay: 120ms; }
.estrelas:hover .icone:nth-child(5) { transition-delay: 160ms; }

.faixa-escura .estrelas { color: var(--dominant); }
.faixa-escura .estrelas .icone {
  fill: var(--dominant);
  stroke: var(--dominant);
}

/* ---- FAQ: acordeão de perguntas frequentes ---- */
.faq-lista {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 72ch;
}

.faq-item {
  position: relative;
  border-radius: var(--r-2);
  background: var(--paper);
  border: 1px solid var(--linha);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 8%, transparent);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-suave),
              box-shadow var(--dur-2) var(--ease-suave),
              transform var(--dur-2) var(--ease-entra);
}

.faq-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--grad-acento-texto);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-suave);
}

.faq-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: 0 14px 34px var(--ink-shadow);
}

.faq-item[open] {
  border-color: var(--accent-line);
  box-shadow: 0 14px 34px var(--ink-shadow);
}

.faq-item[open]::before { opacity: 1; }

.faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  transition: color var(--dur-1) var(--ease-suave);
}

.faq-pergunta::-webkit-details-marker { display: none; }
.faq-pergunta::marker { content: none; }

.faq-pergunta:hover { color: var(--accent-hover); }

/* Sinal do acordeão: funciona com ícone svg ou com o chevron desenhado */
.faq-pergunta .icone {
  color: var(--accent);
  transition: transform var(--dur-2) var(--ease-mola);
}

.faq-item[open] .faq-pergunta .icone { transform: rotate(45deg); }

.faq-pergunta::after {
  content: "";
  flex: none;
  width: 0.8em;
  height: 0.8em;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--dur-2) var(--ease-mola);
}

.faq-pergunta:has(.icone)::after { content: none; }
.faq-item[open] .faq-pergunta::after { transform: translateY(15%) rotate(-135deg); }

.faq-resposta {
  margin: 0;
  padding: 0 var(--esp-4) var(--esp-4);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-70);
  animation: revela var(--dur-2) var(--ease-entra) both;
}

.faq-resposta p { margin: 0 0 var(--esp-2); }
.faq-resposta p:last-child { margin-bottom: 0; }
.faq-resposta a { color: var(--accent); text-decoration-color: var(--accent-line); }
.faq-resposta a:hover { color: var(--accent-hover); }

/* FAQ dentro de faixa escura: vidro sobre o marrom */
.faixa-escura .faq-item {
  background: color-mix(in oklab, var(--light) 8%, transparent);
  border-color: color-mix(in oklab, var(--dominant) 22%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.faixa-escura .faq-item:hover,
.faixa-escura .faq-item[open] {
  border-color: color-mix(in oklab, var(--dominant) 48%, transparent);
}

.faixa-escura .faq-pergunta { color: var(--light); }
.faixa-escura .faq-pergunta:hover { color: var(--dominant); }
.faixa-escura .faq-pergunta .icone { color: var(--dominant); }
.faixa-escura .faq-pergunta::after { border-color: var(--dominant); }
.faixa-escura .faq-resposta { color: color-mix(in oklab, var(--light) 78%, var(--dominant)); }
.faixa-escura .faq-resposta a { color: var(--dominant); }

/* ===== css9.css ===== */
/* ============================================================
   PARTE 9 : faq-sinal, fluxo, foto-moldura, foto-sombra e frascos
   ============================================================ */

/* ---- Sinal de abrir/fechar do FAQ ---- */
.faq-sinal {
  position: relative;
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  color: var(--accent);
  transition: transform var(--dur-2) var(--ease-mola),
              background var(--dur-2) var(--ease-suave),
              color var(--dur-2) var(--ease-suave);
}

.faq-sinal::before,
.faq-sinal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-2) var(--ease-mola),
              opacity var(--dur-2) var(--ease-suave);
}

.faq-sinal::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Aberto: o traço vertical gira e some, virando um menos */
details[open] .faq-sinal,
.faq-item.is-open .faq-sinal {
  background: var(--accent);
  color: var(--light);
  transform: rotate(180deg);
}

details[open] .faq-sinal::after,
.faq-item.is-open .faq-sinal::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* ---- Fluxo da consulta: passos numerados ---- */
.fluxo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
  margin: var(--esp-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: fluxo;
}

.fluxo-passo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  box-shadow: 0 10px 26px var(--ink-shadow);
  counter-increment: fluxo;
  transition: transform var(--dur-2) var(--ease-suave),
              box-shadow var(--dur-2) var(--ease-suave);
}

.fluxo-passo:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px var(--ink-shadow);
}

/* Linha de ligação entre os passos */
.fluxo-passo:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--esp-4) + 1.4rem);
  bottom: calc(var(--esp-4) * -1);
  width: 2px;
  height: var(--esp-4);
  background: var(--grad-filete);
}

.fluxo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: var(--esp-1);
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
}

.fluxo-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.fluxo-conteudo strong,
.fluxo-conteudo h3,
.fluxo-conteudo h4 {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.fluxo-conteudo p {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-70);
}

/* ---- Moldura de foto: retrato emoldurado de estúdio ---- */
.foto-moldura {
  position: relative;
  margin: 0;
  border-radius: var(--r-3);
  isolation: isolate;
}

.foto-moldura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-3);
  border: 1px solid var(--vidro-borda);
  box-shadow: 0 16px 40px var(--ink-shadow);
}

/* Filete dourado deslocado, como passe-partout */
.foto-moldura::before {
  content: "";
  position: absolute;
  inset: var(--esp-2) calc(var(--esp-2) * -1) calc(var(--esp-2) * -1) var(--esp-2);
  z-index: -1;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-3);
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--dominant) 18%, transparent) 0%,
    transparent 60%);
}

/* Sombra de chão da foto: apoio no estúdio */
.foto-sombra {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -12px;
  height: 26px;
  z-index: -2;
  background: radial-gradient(ellipse at center,
    var(--ink-shadow) 0%,
    transparent 70%);
  filter: blur(9px);
  pointer-events: none;
}

/* ---- Frascos: cartões de cuidado em formato de vidro de soro ---- */
.frasco {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-4) var(--esp-3) var(--esp-3);
  text-align: center;
  background: linear-gradient(170deg,
    color-mix(in oklab, var(--light) 82%, var(--dominant) 18%) 0%,
    color-mix(in oklab, var(--apoio) 60%, var(--dominant) 40%) 100%);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--r-3) var(--r-3) var(--r-2) var(--r-2);
  box-shadow: 0 12px 30px var(--ink-shadow),
              inset 0 1px 0 color-mix(in oklab, var(--light) 70%, transparent);
  transition: transform var(--dur-2) var(--ease-suave),
              box-shadow var(--dur-2) var(--ease-suave);
}

.frasco:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px var(--ink-shadow),
              inset 0 1px 0 color-mix(in oklab, var(--light) 70%, transparent);
}

/* Tampa do frasco */
.frasco::before {
  content: "";
  position: absolute;
  top: calc(var(--esp-2) * -1);
  left: 50%;
  width: 34%;
  height: var(--esp-3);
  border-radius: var(--r-1) var(--r-1) 3px 3px;
  background: var(--grad-botao);
  transform: translateX(-50%);
  box-shadow: 0 4px 10px var(--ink-shadow);
}

/* Reflexo vertical do vidro */
.frasco::after {
  content: "";
  position: absolute;
  top: 14%;
  bottom: 18%;
  left: 14%;
  width: 10%;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--light) 65%, transparent) 0%,
    transparent 100%);
  pointer-events: none;
}

.frasco .icone {
  margin-inline: auto;
  margin-bottom: var(--esp-1);
  color: var(--accent);
}

.frasco-nome {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.frasco-nota {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-70);
}

/* ===== css10.css ===== */
/* ============================================================
   PARTE 10 : palavra-destaque, hambúrguer, luz do CTA, frascos
   numerados, citação da paciente e grade de depoimentos
   ============================================================ */

/* ---- Palavra-destaque em tinta assinatura ---- */
.grad-texto {
  background: var(--grad-acento-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 500;
  padding-inline: 0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Hambúrguer: três traços que viram X ---- */
.hamburguer-linha {
  display: block;
  width: 22px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease-entra),
              opacity var(--dur-1) var(--ease-suave);
}

.hamburguer-linha + .hamburguer-linha { margin-top: 5px; }

.hamburguer[aria-expanded="true"] .hamburguer-linha:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburguer[aria-expanded="true"] .hamburguer-linha:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.hamburguer[aria-expanded="true"] .hamburguer-linha:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---- Camada de luz do CTA final ---- */
.glow-cta {
  position: relative;
  isolation: isolate;
}

.glow-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grad-glow-cta);
  background-repeat: no-repeat;
  transform-origin: 60% 50%;
  animation: glow-respira calc(var(--dur-4) * 4) var(--ease-suave) infinite;
}

.glow-cta > * { position: relative; z-index: 2; }

/* ---- Frascos numerados: objetos apoiados na prateleira ---- */
.frascos {
  list-style: none;
  margin: var(--esp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-4) var(--esp-3);
  align-items: end;
  max-width: 100%;
}

.frascos > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
  padding: var(--esp-4) var(--esp-2) var(--esp-3);
  border-radius: var(--r-3);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--light) 70%, transparent) 0%,
    color-mix(in oklab, var(--paper-warm) 55%, transparent) 100%);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--light) 80%, transparent),
              0 12px 30px color-mix(in oklab, var(--ink) 12%, transparent);
  transition: transform var(--dur-2) var(--ease-entra),
              box-shadow var(--dur-2) var(--ease-suave);
}

.frascos > li:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--light) 80%, transparent),
              0 22px 44px color-mix(in oklab, var(--ink) 18%, transparent);
}

.frasco-svg {
  width: clamp(2.6rem, 2rem + 3vw, 4.2rem);
  height: auto;
  aspect-ratio: 1;
  color: var(--accent);
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 12px var(--glow-pele-f));
  animation: flutua calc(var(--dur-4) * 3) var(--ease-suave) infinite;
}

.frascos > li:nth-child(2) .frasco-svg { animation-delay: calc(var(--dur-3) * -1); }
.frascos > li:nth-child(3) .frasco-svg { animation-delay: calc(var(--dur-4) * -1.4); }

.frasco-num {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.frasco-num::after {
  content: "";
  display: block;
  width: 1.6em;
  height: 2px;
  margin: var(--esp-2) auto 0;
  border-radius: 2px;
  background: var(--grad-filete);
}

/* ---- Frase literal da paciente: citação como peça central ---- */
.frase-intro {
  margin: 0 0 var(--esp-3);
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.frase-intro::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-filete);
}

.frase-literal {
  position: relative;
  margin: 0;
  padding-left: var(--esp-5);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h2);
  font-style: italic;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 22ch;
}

.frase-literal::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.18em;
  font-size: 1.7em;
  font-style: normal;
  line-height: 1;
  background: var(--grad-acento-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.frase-literal::after {
  content: "";
  position: absolute;
  left: 0.32em;
  top: 1.15em;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--accent-line) 0%, transparent 100%);
}

.frase-autora {
  margin: var(--esp-4) 0 0;
  padding-left: var(--esp-5);
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-70);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.frase-autora::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--grad-selo);
  box-shadow: 0 0 0 3px var(--dominant-soft);
}

.frase-autora cite { font-style: normal; color: var(--ink); }

/* ---- Grade de depoimentos: cartões de papel apoiados ---- */
.grade-depoimentos {
  list-style: none;
  margin: var(--esp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-3);
  max-width: 100%;
}

.grade-depoimentos > * {
  position: relative;
  min-width: 0;
  padding: var(--esp-4) var(--esp-4) var(--esp-4) calc(var(--esp-4) + 4px);
  border-radius: var(--r-3);
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--light) 60%, transparent), transparent 60%),
    var(--paper);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--light) 90%, transparent),
              0 14px 34px color-mix(in oklab, var(--ink) 10%, transparent);
  transition: transform var(--dur-2) var(--ease-entra),
              box-shadow var(--dur-2) var(--ease-suave);
}

.grade-depoimentos > *::before {
  content: "";
  position: absolute;
  left: -1px;
  top: var(--esp-4);
  bottom: var(--esp-4);
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--dominant) 0%, var(--accent) 100%);
}

.grade-depoimentos > *:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--light) 90%, transparent),
              0 24px 48px color-mix(in oklab, var(--ink) 16%, transparent);
}

.grade-depoimentos > :nth-child(n + 3) { display: none; }

/* ===== css11.css ===== */
/* ============================================================
   SEÇÃO 01 · HERO — caixa, conteúdo, fatos, fone, ctas, lado, marca
   ============================================================ */

/* ---- Caixa: palco da dobra em coluna no mobile ---- */
.hero-caixa {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
  width: min(100%, 76rem);
  margin-inline: auto;
  padding: var(--esp-5) var(--esp-4) var(--esp-6);
}

/* ---- Coluna de texto ---- */
.hero-conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  max-width: 40rem;
}

/* Lead: respiro medido, medida curta */
.hero-lead {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink-70);
  max-width: 34em;
  text-wrap: pretty;
}

/* ---- Fatos: ficha corrida de provas, quebra suave ---- */
.hero-fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
  margin: var(--esp-2) 0 0;
  padding: 0;
  list-style: none;
}

.hero-fato {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.85em;
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-70);
  background: var(--vidro);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 16px var(--ink-shadow);
  transition: transform var(--dur-1) var(--ease-entra),
              border-color var(--dur-1) var(--ease-suave);
}

.hero-fato:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
}

.hero-fato .icone {
  width: 1.15em;
  height: 1.15em;
  color: var(--accent);
}

.hero-fato strong {
  font-weight: 800;
  color: var(--accent);
}

/* ---- Fone: linha discreta, número em destaque ---- */
.hero-fone {
  margin: var(--esp-2) 0 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-70);
}

.hero-fone-num {
  display: inline-block;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--accent-line), var(--accent-line));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: color var(--dur-1) var(--ease-suave),
              background-size var(--dur-2) var(--ease-entra);
}

.hero-fone-num:hover,
.hero-fone-num:focus-visible {
  color: var(--accent-hover);
  background-size: 100% 2px;
}

/* ---- CTAs ---- */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  margin-top: var(--esp-3);
}

.hero-ctas .botao {
  flex: 1 1 auto;
  justify-content: center;
}

/* ---- Lado visual: retrato + provas ---- */
.hero-lado {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
}

/* Cartão de marca: apoiado sob o selo */
.hero-marca {
  margin: 0;
  width: min(100%, 21rem);
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid var(--vidro-borda);
  box-shadow: 0 14px 38px var(--ink-shadow);
  transform: rotate(1.4deg);
  transition: transform var(--dur-2) var(--ease-mola);
}

.hero-marca:hover {
  transform: rotate(0deg) translateY(-3px);
}

.hero-marca img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== css12.css ===== */
/* ============================================================
   BLOCO 12 · hero (provas, retrato, título), kickers, leads,
   link inline e legenda do mapa
   ============================================================ */

/* ---- Kicker do hero: sobre fundo escuro de estúdio ---- */
.kicker-hero {
  margin: 0 0 var(--esp-4);
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dominant);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
}
.kicker-hero::before {
  content: "";
  width: clamp(28px, 4vw, 46px);
  height: 2px;
  border-radius: 2px;
  background: var(--grad-filete);
}

/* ---- Kicker claro: mesma voz, para fundos claros ---- */
.kicker-claro {
  margin: 0 0 var(--esp-3);
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
}
.kicker-claro::before {
  content: "";
  width: clamp(28px, 4vw, 46px);
  height: 2px;
  border-radius: 2px;
  background: var(--grad-filete);
}

/* ---- Título do hero ---- */
.hero-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--light);
  max-width: 14ch;
  text-wrap: balance;
}
.hero-titulo .grad-texto {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(100deg, var(--dominant) 10%, var(--apoio) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Leads ---- */
.lead {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 58ch;
  text-wrap: pretty;
}

/* Lead sobre fundo escuro ou de destaque */
.lead-clara {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.6;
  color: color-mix(in oklab, var(--light) 82%, transparent);
  max-width: 58ch;
  text-wrap: pretty;
}

/* ---- Link inline: sublinhado desenhado em gradiente ---- */
.link-inline {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--dominant), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  background-position: 0 100%;
  padding-bottom: 0.12em;
  transition: color var(--dur-1) var(--ease-suave),
              background-size var(--dur-2) var(--ease-suave);
}
.link-inline:hover,
.link-inline:focus-visible {
  color: var(--accent-hover);
  background-size: 100% 2.5px;
}

/* ---- Retrato do hero ---- */
.hero-retrato {
  position: relative;
  margin: 0;
  width: min(100%, 460px);
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: 0 30px 70px var(--ink-shadow);
  transform: rotate(1.2deg);
}
.hero-retrato::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  border: 1px solid var(--vidro-borda);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--light) 18%, transparent);
  pointer-events: none;
}
.hero-retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    transparent 62%,
    color-mix(in oklab, var(--ink) 34%, transparent) 100%);
  pointer-events: none;
}
.hero-retrato img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 691 / 446;
  object-fit: cover;
}

/* ---- Provas do hero: selo + cartão de marca ---- */
.hero-provas {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  flex-wrap: wrap;
}
.hero-provas .selo {
  margin: 0;
  flex: none;
}
.hero-provas .hero-marca {
  margin: 0;
  width: clamp(140px, 34vw, 200px);
  border-radius: var(--r-2);
  overflow: hidden;
  border: 1px solid var(--vidro-borda);
  box-shadow: 0 16px 40px var(--ink-shadow);
  transform: rotate(-2deg);
  transition: transform var(--dur-2) var(--ease-mola);
}
.hero-provas .hero-marca:hover {
  transform: rotate(0deg) translateY(-4px);
}
.hero-provas .hero-marca img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Mapa: legenda e pin (seção 10) ---- */
.mapa-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-70);
}
.mapa-legenda .icone {
  color: var(--accent);
  width: 1.25em;
  height: 1.25em;
}
.mapa-legenda a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  transition: color var(--dur-1) var(--ease-suave),
              border-color var(--dur-1) var(--ease-suave);
}
.mapa-legenda a:hover,
.mapa-legenda a:focus-visible {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

/* Pin pulsante sobre o mapa, na cor-assinatura */
.mapa-pin {
  position: absolute;
  top: 42%;
  left: 52%;
  width: 18px;
  height: 18px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--dominant);
  border: 3px solid var(--light);
  box-shadow: 0 4px 14px var(--ink-shadow);
}
.mapa-pin::before,
.mapa-pin::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--dominant);
  opacity: 0;
  pointer-events: none;
  animation: pin-onda 2.4s var(--ease-suave) infinite;
}
.mapa-pin::after {
  animation-delay: 1.2s;
}
@keyframes pin-onda {
  0%   { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(2.4); }
}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width: 900px) {
  .hero-titulo {
    font-size: var(--t-display);
    max-width: 13ch;
  }

  .hero-provas {
    gap: var(--esp-5);
  }

  .hero-provas .hero-marca {
    width: clamp(180px, 16vw, 240px);
  }
}

/* ===== css13.css ===== */
/* ============================================================
   Bloco 13: marquee do hero, menu móvel e números de prova
   ============================================================ */

/* ---- Marquee: esteira contínua de especialidades ---- */
.marquee-trilho {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  width: max-content;
  padding-block: var(--esp-3);
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-trilho { animation-play-state: paused; }

.marquee-seq {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-70);
  white-space: nowrap;
}

.marquee-sep {
  color: var(--dominant);
  font-size: 0.8em;
  transform: translateY(-0.05em);
}

/* ---- Menu móvel: overlay de vidro quente ---- */
.menu-mobile {
  position: fixed;
  inset: var(--esp-3);
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--esp-5);
  padding: var(--esp-6) var(--esp-5);
  background: color-mix(in oklab, var(--paper) 82%, transparent);
}
.menu-mobile[hidden] { display: none; }

.menu-lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-link {
  display: inline-block;
  padding-block: var(--esp-2);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
  transition: color var(--dur-1) var(--ease-suave),
              transform var(--dur-1) var(--ease-suave);
}
.menu-link:hover,
.menu-link:focus-visible {
  color: var(--accent);
  transform: translateX(6px);
}

.menu-fone {
  margin: 0;
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  color: var(--ink-70);
}
.menu-fone a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  transition: color var(--dur-1) var(--ease-suave);
}
.menu-fone a:hover,
.menu-fone a:focus-visible { color: var(--accent-hover); }

/* ---- Números de prova: 4,9 / 29 / 28 ---- */
.numeros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-5) var(--esp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.numero {
  font-family: var(--fonte-titulo);
  font-size: var(--t-num);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  background: var(--grad-acento-texto);
  -webkit-background-clip: text;
  background-clip: text;
}

.numero-legenda {
  display: block;
  margin-top: var(--esp-2);
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-70);
}

/* ===== css14.css ===== */
/* ============================================================
   Bloco 14: itens de número, nuvem de palavras e cartão de perfil
   ============================================================ */

/* ---- Item de número: cartão de prova apoiado ---- */
.numeros-item {
  position: relative;
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-5) var(--esp-4);
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-3);
  box-shadow: 0 12px 34px var(--ink-shadow);
  transition: transform var(--dur-2) var(--ease-entra),
              box-shadow var(--dur-2) var(--ease-suave);
}
.numeros-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-filete);
}
.numeros-item strong,
.numeros-item .numero {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: var(--t-num);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.numeros-item small,
.numeros-item span {
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: var(--ink-70);
}
.numeros-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px var(--ink-shadow);
}

/* ---- Nuvem de palavras recorrentes nas avaliações ---- */
.palavras {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--esp-2) var(--esp-4);
  max-width: 100%;
  margin: 0;
  padding: var(--esp-4) 0;
  list-style: none;
  overflow-wrap: anywhere;
}

.palavra {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--esp-1);
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-style: italic;
  font-size: var(--t-h3);
  line-height: 1.05;
  color: var(--ink-70);
  transition: color var(--dur-1) var(--ease-suave),
              transform var(--dur-2) var(--ease-mola);
}
.palavra:hover { color: var(--ink); transform: translateY(-3px); }

.palavra-destaque {
  font-size: var(--t-h2);
  font-weight: 600;
  font-style: normal;
  background: var(--grad-acento-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.palavra-gigante {
  flex-basis: 100%;
  justify-content: center;
  font-size: var(--t-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.03em;
  color: var(--accent);
  text-shadow: 0 18px 40px var(--glow-pele-f);
}

.palavra-vezes {
  align-self: flex-start;
  padding: 0.15em 0.55em;
  font-family: var(--fonte-texto);
  font-style: normal;
  font-weight: 600;
  font-size: var(--t-kicker);
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--dominant-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  transform: translateY(-0.4em);
}

/* ---- Cartão de perfil (Instagram) ---- */
.perfil-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  width: 100%;
  max-width: 100%;
  padding: var(--esp-4);
  background: var(--paper);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-3);
  box-shadow: 0 14px 36px var(--ink-shadow);
  transition: transform var(--dur-2) var(--ease-entra),
              box-shadow var(--dur-2) var(--ease-suave);
}
.perfil-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 0 0 var(--r-3) var(--r-3);
  background: var(--grad-filete);
}
.perfil-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px var(--ink-shadow), 0 0 40px var(--glow-pele-f);
}

.perfil-avatar {
  width: clamp(56px, 14vw, 76px);
  aspect-ratio: 1;
  padding: 3px;
  border-radius: 50%;
  background: var(--grad-selo);
  box-shadow: 0 8px 22px var(--ink-shadow);
  overflow: hidden;
}
.perfil-avatar img,
.perfil-avatar > * {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--paper);
}

.perfil-handle {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: var(--t-body);
  letter-spacing: 0.01em;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-suave);
}
.perfil-handle:hover,
.perfil-handle:focus-visible { color: var(--accent-hover); }

.perfil-bio {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-70);
}

/* ===== css15.css ===== */
/* Bloco de identidade do rodape */
.perfil-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  padding: var(--esp-4);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  background:
    var(--grad-glow-selo),
    linear-gradient(150deg,
      color-mix(in oklab, var(--paper-warm) 82%, transparent) 0%,
      color-mix(in oklab, var(--surface) 90%, transparent) 100%);
  background-repeat: no-repeat;
  box-shadow: 0 12px 30px var(--ink-shadow);
}

.perfil-id {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

.perfil-nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.perfil-id > :not(.perfil-nome) {
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-70);
}

/* Selo circular com anel conico */
.perfil-selo {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(72px, 18vw, 96px);
  aspect-ratio: 1;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--grad-selo);
  color: var(--ink);
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  isolation: isolate;
}
.perfil-selo::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: inherit;
  background: var(--paper);
}
.perfil-selo::after {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -2;
  border-radius: inherit;
  background: var(--grad-glow-selo);
  animation: glow-respira calc(var(--dur-4) * 3) var(--ease-suave) infinite;
}

.perfil-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-2);
  margin: var(--esp-4) 0 0;
  padding: 0;
  list-style: none;
  grid-column: 1 / -1;
}

.perfil-stat {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-3) var(--esp-2);
  border-radius: var(--r-2);
  border: 1px solid var(--accent-line);
  background: color-mix(in oklab, var(--paper) 78%, transparent);
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
  text-align: center;
  transition: transform var(--dur-1) var(--ease-suave),
              border-color var(--dur-1) var(--ease-suave),
              box-shadow var(--dur-1) var(--ease-suave);
}
.perfil-stat:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  box-shadow: 0 10px 22px var(--ink-shadow);
}

.perfil-valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

/* Associacao, aviso legal e base */
.rodape-associacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  margin: var(--esp-5) 0 0;
  padding: var(--esp-3) var(--esp-4);
  border-left: 2px solid transparent;
  border-image: var(--grad-filete) 1;
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-70);
}
.rodape-associacao strong { color: var(--ink); font-weight: 700; }

.rodape-aviso {
  margin: var(--esp-4) 0 0;
  max-width: 62ch;
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  line-height: 1.6;
  color: var(--ink-40);
  text-wrap: pretty;
}

.rodape-base {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-top: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--linha);
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  letter-spacing: 0.04em;
  color: var(--ink-40);
}
.rodape-base a {
  color: var(--ink-70);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  transition: color var(--dur-1) var(--ease-suave),
              border-color var(--dur-1) var(--ease-suave);
}
.rodape-base a:hover { color: var(--accent-hover); border-color: var(--accent); }

/* ===== css16.css ===== */
/* ============================================================
   RODAPÉ · Dra. Bethânia Andrade
   Fundo escuro de estúdio, grade fluida, marca com monograma
   ============================================================ */

.rodape-grade {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
  padding: var(--esp-7) var(--esp-4) var(--esp-5);
  background: var(--grad-escuro);
  color: var(--light);
  overflow: hidden;
}

/* luz de estúdio sobre o fundo escuro */
.rodape-grade::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 18% 20%, var(--glow-pele-f) 0%, transparent 100%),
    radial-gradient(50% 60% at 85% 80%, var(--glow-acento) 0%, transparent 100%);
}

.rodape-grade > * {
  position: relative;
  z-index: 1;
}

/* ---- Bloco da marca ---- */
.rodape-marca {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
}

.rodape-monograma {
  width: clamp(56px, 14vw, 80px);
  height: auto;
  color: var(--dominant);
  filter: drop-shadow(0 6px 18px var(--glow-acento));
}

.rodape-especialidade {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.15;
  color: var(--dominant);
}

.rodape-crm {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--light) 62%, transparent);
}

/* ---- Bloco de contato ---- */
.rodape-contato {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.55;
}

.rodape-endereco {
  margin: 0;
  font-style: normal;
  color: color-mix(in oklab, var(--light) 78%, transparent);
}

.rodape-horario {
  margin: 0;
  color: color-mix(in oklab, var(--light) 66%, transparent);
}

.rodape-fone {
  margin: 0;
}

.rodape-fone a {
  color: var(--dominant);
  font-weight: 700;
  text-decoration: none;
  background-image: var(--grad-filete);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--dur-2) var(--ease-suave), color var(--dur-2) var(--ease-suave);
}

.rodape-fone a:hover,
.rodape-fone a:focus-visible {
  color: var(--light);
  background-size: 100% 2px;
}

/* ---- Linha de crédito ---- */
.rodape-credito {
  margin: 0;
  padding-top: var(--esp-4);
  border-top: 1px solid color-mix(in oklab, var(--light) 14%, transparent);
  font-size: var(--t-small);
  line-height: 1.6;
  color: color-mix(in oklab, var(--light) 55%, transparent);
}

.rodape-credito a {
  color: var(--dominant);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-suave);
}

.rodape-credito a:hover,
.rodape-credito a:focus-visible {
  color: var(--light);
}

/* ===== css17.css ===== */
/* ---- Seção base: ~100svh, conteúdo contido na viewport ---- */
.secao {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--esp-7) clamp(1.25rem, 4vw, 4rem);
  overflow-x: clip;
  background: var(--grad-secao-clara);
  color: var(--ink);
}

.secao--clara {
  background: var(--grad-secao-clara);
}

/* ---- Seção 05 · Depoimentos: superfície clara com luz suave ---- */
.secao-05 {
  background: var(--grad-secao-clara);
}

.s05-conteudo {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

.s05-depoimentos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.s05-nota {
  font-size: var(--t-small);
  color: var(--ink-70);
  text-align: center;
  margin: 0;
}

/* ---- Seção 06 · Consulta: fundo escuro de estúdio com luz ---- */
.secao-06 {
  background: var(--grad-escuro);
  color: var(--light);
}

.secao-06::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grad-glow-cta);
  background-repeat: no-repeat;
}

/* ---- Rótulo: etiqueta pequena de vidro (ex.: "Google · verificado") ---- */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 0.35em 0.9em;
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
}

.secao-06 .rotulo {
  color: var(--dominant);
  background: var(--vidro);
  border-color: var(--vidro-borda);
}

/* ---- Rodapé: navegação e assinatura ---- */
.rodape-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rodape-nav a {
  font-size: var(--t-small);
  color: var(--ink-70);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-suave);
}

.rodape-nav a:hover,
.rodape-nav a:focus-visible {
  color: var(--accent);
}

.rodape-nome {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

/* ===== css18.css ===== */
/* ============================================================
   PARTE 18 : esqueleto das seções internas + seções
   avaliações, estante (Zanetti), FAQ, consultório e CTA final
   ============================================================ */

/* ---- Caixa padrão: conteúdo centrado numa viewport ---- */
.secao-caixa {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--esp-4), 1180px);
  margin-inline: auto;
  padding-block: var(--esp-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--esp-5);
  min-height: 100svh;
  min-width: 0;
}

/* ---- Cabeçalho de seção: kicker + título com filete ---- */
.secao-cab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  max-width: 62ch;
  min-width: 0;
}
.secao-cab .kicker {
  margin: 0;
  color: var(--accent);
  font: 600 var(--t-kicker) / 1.2 var(--fonte-texto);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}
.secao-cab .kicker::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-filete);
  flex: none;
}
.secao-cab h2 {
  position: relative;
  margin: 0;
  padding-bottom: var(--esp-3);
  font: 500 var(--t-h2) / 1.06 var(--fonte-titulo);
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.secao-cab h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(170px, 42%);
  height: 2px;
  border-radius: 2px;
  background: var(--grad-filete);
}
.secao-cab h2 .grad-texto,
.secao-cab h2 .palavra-destaque {
  background: var(--grad-acento-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

/* ---- Texto corrido da seção ---- */
.secao-copy {
  margin: 0;
  max-width: 58ch;
  font: 400 var(--t-lead) / 1.55 var(--fonte-texto);
  color: var(--ink-70);
  text-wrap: pretty;
}
.secao-copy strong { color: var(--ink); font-weight: 600; }

/* ---- Coluna e grade utilitárias ---- */
.secao-coluna {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  min-width: 0;
}
.secao-coluna > * { min-width: 0; }

.secao-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4);
  min-width: 0;
}
.secao-grid > * {
  min-width: 0;
  animation: revela var(--dur-3) var(--ease-entra) both;
}
.secao-grid > :nth-child(2) { animation-delay: 0.08s; }
.secao-grid > :nth-child(3) { animation-delay: 0.16s; }
.secao-grid > :nth-child(4) { animation-delay: 0.24s; }

/* ============================================================
   Avaliações: papel claro, cartões com aspas e hover
   ============================================================ */
.secao-avaliacoes {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background-color: var(--paper);
  background-image:
    radial-gradient(45% 55% at 50% 40%,
      color-mix(in oklab, var(--dominant) 18%, transparent) 0%,
      transparent 100%),
    var(--grad-secao-clara);
  color: var(--ink);
  overflow: clip;
}
.secao-avaliacoes .secao-grid > * {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-3);
  padding: var(--esp-5);
  box-shadow: 0 14px 40px color-mix(in oklab, var(--ink-shadow) 55%, transparent);
  transition: transform var(--dur-2) var(--ease-suave),
              box-shadow var(--dur-2) var(--ease-suave);
}
.secao-avaliacoes .secao-grid > *:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px var(--ink-shadow);
}

/* ============================================================
   Estante: palco escuro, padrão Zanetti gallery/detail
   ============================================================ */
.secao-estante {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background: var(--grad-escuro);
  color: var(--light);
  overflow: clip;
}
.secao-estante .secao-cab h2 { color: var(--light); }
.secao-estante .secao-cab .kicker { color: var(--dominant); }
.secao-estante .secao-copy {
  color: color-mix(in oklab, var(--light) 72%, transparent);
}
.secao-estante .secao-copy strong { color: var(--light); }

/* Palco: no mobile é sempre uma coluna, sem 3D */
.secao-estante .shelf-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-5);
  align-items: start;
  min-width: 0;
}
.secao-estante .shelf-stage[data-mode="gallery"] {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.secao-estante .shelf-stage[data-mode="detail"] {
  grid-template-columns: minmax(0, 1fr);
}
.secao-estante .shelf-stage[data-mode="detail"] .book:not(.is-open-book) {
  display: none;
}
.secao-estante .shelf-stage[data-mode="detail"] .book-panel {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--r-3);
  box-shadow: 0 10px 34px var(--ink-shadow);
  padding: var(--esp-5);
  min-width: 0;
  animation: revela var(--dur-3) var(--ease-entra) both;
}

/* Livros: overflow visível para não achatar o 3D */
.secao-estante .book {
  position: relative;
  overflow: visible;
  width: 100%;
  aspect-ratio: .672 / 1;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-suave);
}
.secao-estante .book:hover { transform: translateY(-8px); }
.secao-estante .book .cover-art {
  position: absolute;
  inset: 0;
  overflow: visible;
  border-radius: var(--r-1);
  background: var(--grad-destaque);
  box-shadow: 0 18px 40px var(--ink-shadow);
}
.secao-estante .book.is-open-book {
  width: clamp(200px, 22vw, 290px);
  aspect-ratio: .672 / 1;
  justify-self: center;
}

/* Leque de páginas: abre em cascata no modo detail */
.secao-estante .page-fan {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.secao-estante .page-fan i {
  position: absolute;
  inset: 2% 0;
  background: var(--light);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  opacity: 0;
  transform-origin: left center;
}
.secao-estante .shelf-stage[data-mode="detail"] .page-fan i {
  animation: revela var(--dur-3) var(--ease-entra) both;
}
.secao-estante .page-fan i:nth-child(1) { animation-delay: 0.05s; }
.secao-estante .page-fan i:nth-child(2) { animation-delay: 0.12s; }
.secao-estante .page-fan i:nth-child(3) { animation-delay: 0.19s; }
.secao-estante .page-fan i:nth-child(4) { animation-delay: 0.26s; }
.secao-estante .page-fan i:nth-child(5) { animation-delay: 0.33s; }

/* ============================================================
   FAQ: superfície clara, itens em cartão de papel
   ============================================================ */
.secao-faq {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background-color: var(--surface);
  background-image: var(--grad-secao-clara);
  color: var(--ink);
  overflow: clip;
}
.secao-faq .secao-coluna > * {
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--r-2);
  padding: var(--esp-3) var(--esp-4);
  transition: border-color var(--dur-1) var(--ease-suave),
              transform var(--dur-2) var(--ease-suave),
              box-shadow var(--dur-2) var(--ease-suave);
}
.secao-faq .secao-coluna > *:hover {
  border-color: var(--accent-line);
  transform: translateX(4px);
  box-shadow: 0 10px 28px var(--ink-shadow);
}
.secao-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  font: 600 var(--t-h3) / 1.25 var(--fonte-titulo);
  color: var(--ink);
}
.secao-faq summary::-webkit-details-marker { display: none; }
.secao-faq summary::after {
  content: "+";
  flex: none;
  color: var(--accent);
  font-family: var(--fonte-texto);
  font-weight: 500;
  transition: transform var(--dur-1) var(--ease-suave);
}
.secao-faq details[open] summary::after { transform: rotate(45deg); }
.secao-faq details p {
  margin: var(--esp-3) 0 0;
  color: var(--ink-70);
  font-size: var(--t-body);
  line-height: 1.6;
}

/* ============================================================
   Consultório: papel quente, cartões de vidro, pin rosado
   ============================================================ */
.secao-consultorio {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background-color: var(--paper-warm);
  background-image:
    radial-gradient(60% 50% at 80% 18%, var(--glow-pele-f) 0%, transparent 100%);
  color: var(--ink);
  overflow: clip;
}
.secao-consultorio .secao-grid > * {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--r-3);
  box-shadow: 0 10px 34px var(--ink-shadow);
  padding: var(--esp-5);
}
.secao-consultorio .pin,
.secao-consultorio .mapa-pin { color: var(--dominant); }

/* ============================================================
   CTA final: estúdio escuro com luz dupla e botão com glow
   ============================================================ */
.secao-cta {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background-image: var(--grad-glow-cta), var(--grad-escuro);
  color: var(--light);
  text-align: center;
  overflow: clip;
}
.secao-cta .secao-caixa { align-items: center; }
.secao-cta .secao-cab { align-items: center; text-align: center; }
.secao-cta .secao-cab h2 { color: var(--light); }
.secao-cta .secao-cab h2::after {
  left: 50%;
  transform: translateX(-50%);
}
.secao-cta .secao-cab .kicker { color: var(--dominant); }
.secao-cta .secao-cab .kicker::before { background: var(--grad-filete); }
.secao-cta .secao-copy {
  color: color-mix(in oklab, var(--light) 74%, transparent);
  margin-inline: auto;
}
.secao-cta .secao-copy strong { color: var(--light); }
.secao-cta .botao-whatsapp,
.secao-cta .botao-principal {
  background: var(--grad-botao);
  color: var(--light);
  border: 1px solid var(--vidro-borda);
  box-shadow: 0 12px 34px var(--ink-shadow);
  transition: transform var(--dur-2) var(--ease-mola),
              box-shadow var(--dur-2) var(--ease-suave),
              background var(--dur-2) var(--ease-suave);
}
.secao-cta .botao-whatsapp:hover,
.secao-cta .botao-principal:hover,
.secao-cta .botao-whatsapp:focus-visible,
.secao-cta .botao-principal:focus-visible {
  background: var(--grad-botao-hover);
  transform: translateY(-3px);
  box-shadow: 0 0 0 6px var(--glow-acento), 0 22px 48px var(--ink-shadow);
}

/* ===== css19.css ===== */
/* ============================================================
   PARTE 19 : seção miolo, selo de avaliação, estante Zanetti
   ============================================================ */

/* ---- Cabeçalho padrão das seções ---- */
.secao-topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--esp-7);
  text-align: center;
}

.secao-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.secao-titulo::after {
  content: "";
  display: block;
  width: min(180px, 38%);
  height: 2px;
  margin: var(--esp-3) auto 0;
  border-radius: 2px;
  background: var(--grad-filete);
}

.secao-miolo {
  position: relative;
  max-width: 72ch;
  margin-inline: auto;
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--ink-70);
}
.secao-miolo p + p { margin-top: var(--esp-4); }
.secao-miolo strong { color: var(--ink); font-weight: 700; }
.secao-miolo a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-suave);
}
.secao-miolo a:hover { color: var(--accent-hover); }

/* ---- Selo 4,9: anel cônico + estrela ---- */
.selo-anel {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(84px, 18vw, 108px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-selo);
  box-shadow:
    0 12px 28px var(--ink-shadow),
    inset 0 1px 0 color-mix(in oklab, var(--light) 60%, transparent);
  animation: flutua calc(var(--dur-4) * 3) var(--ease-suave) infinite;
}
.selo-anel::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 50%;
  background: var(--grad-glow-selo);
  animation: glow-respira calc(var(--dur-4) * 2) var(--ease-suave) infinite;
}
.selo-anel::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 2px 10px var(--ink-shadow);
}

.selo-valor {
  position: relative;
  z-index: 1;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.9rem, 4.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  transform: translateY(-6px);
}

.selo-estrela {
  position: absolute;
  z-index: 1;
  bottom: 22%;
  width: 1em;
  height: 1em;
  color: var(--dominant);
  fill: var(--dominant);
  stroke: var(--accent);
  stroke-width: 1;
}

.selo-texto {
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-70);
}

/* ---- Estante Zanetti: palco dos livros ---- */
.shelf-stage {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--esp-5);
  perspective: 1400px;
}

.shelf-stage .book {
  position: relative;
  overflow: visible;
  cursor: pointer;
  transform-style: preserve-3d;
  transition:
    transform var(--dur-2) var(--ease-entra),
    opacity var(--dur-2) var(--ease-suave);
}
.shelf-stage .book:hover,
.shelf-stage .book:focus-visible {
  transform: translateY(-8px);
}

.shelf-stage .cover-art {
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-entra);
  will-change: transform;
}

.shelf-stage .page-fan i {
  display: block;
  transition:
    transform var(--dur-2) var(--ease-entra),
    opacity var(--dur-2) var(--ease-suave);
}

/* Modo detalhe: só o livro aberto permanece */
.shelf-stage[data-mode="detail"] .book:not(.is-open-book) {
  display: none;
}

.shelf-stage[data-mode="detail"] {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--esp-6);
  perspective: none;
}

.shelf-stage[data-mode="detail"] .book.is-open-book {
  width: clamp(200px, 22vw, 290px);
  aspect-ratio: 0.672 / 1;
  margin-inline: auto;
  cursor: default;
}

/* Painel do detalhe sempre no grid, nunca overlay */
.shelf-stage .book-panel {
  min-width: 0;
}

@media (min-width: 900px) {
  .shelf-stage[data-mode="detail"] {
    grid-template-columns: minmax(200px, 290px) minmax(0, 1fr);
    perspective: 1400px;
  }

  /* 3D apenas no desktop */
  .shelf-stage[data-mode="detail"] .book.is-open-book .cover-art {
    transform: translate3d(0, 0, 18px) rotateY(-29deg);
  }

  /* Leque de páginas abrindo em cascata */
  .shelf-stage[data-mode="detail"] .book.is-open-book .page-fan i:nth-child(1) {
    transform: rotateY(-18deg) translateZ(6px);
    transition-delay: 0.05s;
  }
  .shelf-stage[data-mode="detail"] .book.is-open-book .page-fan i:nth-child(2) {
    transform: rotateY(-30deg) translateZ(10px);
    transition-delay: 0.12s;
  }
  .shelf-stage[data-mode="detail"] .book.is-open-book .page-fan i:nth-child(3) {
    transform: rotateY(-42deg) translateZ(14px);
    transition-delay: 0.19s;
  }
  .shelf-stage[data-mode="detail"] .book.is-open-book .page-fan i:nth-child(4) {
    transform: rotateY(-54deg) translateZ(18px);
    transition-delay: 0.26s;
  }
}

/* ---- Grade skincare: cartões + mídia ---- */
.skincare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-5);
  align-items: center;
}

.skincare-midia {
  position: relative;
  margin: 0;
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: 0 18px 44px var(--ink-shadow);
}
.skincare-midia img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.skincare-midia::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 55%,
    color-mix(in oklab, var(--ink) 32%, transparent) 100%);
}

/* ===== css20.css ===== */
/* ============================================================
   PARTE 20 : caixa do topo, títulos, texturas e tabela de horários
   ============================================================ */

/* ---- Caixa do header: conteúdo no fluxo, respiro lateral ---- */
.topo-caixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  width: min(1180px, 100%);
  margin-inline: auto;
  padding: var(--esp-3) var(--esp-4);
}

/* ---- CRM sob o nome: microtipografia de credencial ---- */
.topo-crm {
  display: block;
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}

/* ---- Ações do topo: botão + hambúrguer alinhados ---- */
.topo-acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex: none;
}
.topo-acoes .botao { padding: 0.6em 1.25em; }

/* ---- Título padrão: serifada com filete em gradiente ---- */
.titulo {
  position: relative;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.titulo::after {
  content: "";
  display: block;
  width: min(160px, 36%);
  height: 2px;
  margin-top: var(--esp-3);
  border-radius: 2px;
  background: var(--grad-filete);
}

/* ---- Título sobre fundo escuro: tinta clara quente ---- */
.titulo-claro {
  color: var(--light);
}
.titulo-claro::after {
  background: linear-gradient(90deg,
    var(--dominant) 0%,
    color-mix(in oklab, var(--dominant) 40%, transparent) 60%,
    transparent 100%);
}

/* ---- Título de gancho: escala de display, fechamento de seção ---- */
.titulo-gancho {
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.titulo-gancho::after {
  width: min(220px, 44%);
  margin-top: var(--esp-4);
}

/* ---- Textura de seda: ondas de luz sobre o gradiente de destaque ---- */
.textura-seda {
  background-image:
    radial-gradient(120% 80% at 15% 0%,
      color-mix(in oklab, var(--light) 34%, transparent) 0%,
      transparent 55%),
    radial-gradient(110% 90% at 85% 100%,
      color-mix(in oklab, var(--accent) 14%, transparent) 0%,
      transparent 60%),
    repeating-linear-gradient(115deg,
      color-mix(in oklab, var(--light) 10%, transparent) 0px,
      transparent 2px,
      transparent 14px),
    var(--grad-destaque);
  background-repeat: no-repeat;
}

/* ---- Linha de sutura: tracejado fino como ponto de costura ---- */
.sutura-linha {
  display: block;
  width: 100%;
  height: 0;
  border: 0;
  border-top: 2px dashed var(--accent-line);
  border-radius: 2px;
  opacity: 0.9;
}

/* ---- Texto do bloco skincare: corpo editorial com respiro ---- */
.skincare-texto {
  max-width: 58ch;
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--ink-70);
}
.skincare-texto p { margin: 0; }
.skincare-texto p + p { margin-top: var(--esp-3); }
.skincare-texto strong { color: var(--ink); font-weight: 700; }
.skincare-texto em {
  font-family: var(--fonte-titulo);
  font-size: 1.08em;
  color: var(--accent);
}

/* ---- Tabela de horários: grade discreta em papel quente ---- */
.tabela-horarios {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  color: var(--ink-70);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--r-2);
  overflow: hidden;
}
.tabela-horarios caption {
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--accent);
}
.tabela-horarios th,
.tabela-horarios td {
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
  border-top: 1px solid var(--linha);
}
.tabela-horarios thead th {
  border-top: 0;
  font-weight: 700;
  color: var(--ink);
  background: var(--dominant-soft);
}
.tabela-horarios tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--apoio) 45%, transparent);
}
.tabela-horarios td:last-child,
.tabela-horarios th:last-child { text-align: right; }
.tabela-horarios strong { color: var(--accent); font-weight: 700; }

/* ===== css21.css ===== */
/* ============================================================
   TOPO · marca, identidade e navegação do header
   ============================================================ */

/* Marca: monograma + nome, um bloco só clicável */
.topo-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-2);
  transition: opacity var(--dur-1) var(--ease-suave);
}
.topo-marca:hover .topo-monograma {
  transform: rotate(-6deg) scale(1.06);
}

/* Ícone do monograma no topo: círculo BA em traço fino */
.topo-monograma {
  width: clamp(2.4rem, 2.2rem + 0.8vw, 3rem);
  height: clamp(2.4rem, 2.2rem + 0.8vw, 3rem);
  color: var(--accent);
  transition: transform var(--dur-2) var(--ease-mola);
}

/* Bloco nome + CRM empilhados */
.topo-identidade {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  line-height: 1.15;
}

/* Nome da médica em serifada, com respiro de marca */
.topo-nome {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}

/* Navegação: escondida no mobile, aparece no desktop */
.topo-nav {
  display: none;
}

.topo-lista {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Link do menu: traço em gradiente que cresce no hover */
.topo-link {
  position: relative;
  display: inline-block;
  padding: var(--esp-1) 0;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-70);
  text-decoration: none;
  border-radius: var(--r-1);
  transition: color var(--dur-1) var(--ease-suave);
}
.topo-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-filete);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-entra);
}
.topo-link:hover,
.topo-link:focus-visible {
  color: var(--accent-hover);
}
.topo-link:hover::after,
.topo-link:focus-visible::after,
.topo-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ===== css22.css ===== */
/* ============================================================
   SELO DO CONGRESSO : 79º CSBD 2026, Fortaleza (seção 08)
   Selo claro sobre fundo escuro, filete em gradiente e glow.
   ============================================================ */

.selo-congresso {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-4) var(--esp-3) var(--esp-5);
  inline-size: fit-content;
  margin-inline: auto;
  color: var(--light);
  text-align: center;
}

/* Glow radial de estúdio atrás do selo */
.selo-congresso::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -2;
  background-image: var(--grad-glow-selo);
  background-repeat: no-repeat;
  background-position: center;
  animation: glow-respira calc(var(--dur-4) * 2.4) var(--ease-suave) infinite;
}

/* Sombra de chão: selo apoiado, nunca flutuando */
.selo-congresso::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: calc(var(--esp-2) * -1);
  height: 30px;
  z-index: -1;
  background: radial-gradient(ellipse at center, var(--ink-shadow) 0%, transparent 70%);
  filter: blur(12px);
  animation: sombra-pulsa calc(var(--dur-4) * 2) var(--ease-suave) infinite;
}

/* Anel desenhado: filete em gradiente + shine discreto */
.selo-congresso-svg {
  display: block;
  inline-size: clamp(13.5rem, 62vw, 16.5rem);
  block-size: auto;
  overflow: visible;
  filter:
    drop-shadow(0 10px 26px var(--ink-shadow))
    drop-shadow(0 0 18px color-mix(in oklab, var(--dominant) 22%, transparent));
  animation: flutua calc(var(--dur-4) * 3) var(--ease-suave) infinite;
}

/* Edição: kickerspaçado acima do valor */
.selo-edicao {
  font-family: var(--fonte-texto);
  font-size: var(--t-kicker);
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dominant);
}

/* Data: destaque do selo */
.selo-data {
  font-family: var(--fonte-texto);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light);
}

/* Legenda: corpo menor, tinta atenuada */
.selo-legenda {
  display: block;
  max-inline-size: 30ch;
  font-family: var(--fonte-texto);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--light) 70%, transparent);
  text-wrap: balance;
}

/* Shine discreto varrendo o selo no hover */
.selo-congresso:hover .selo-congresso-svg {
  filter:
    drop-shadow(0 14px 30px var(--ink-shadow))
    drop-shadow(0 0 26px color-mix(in oklab, var(--dominant) 34%, transparent));
}

/* ===== css23.css ===== */
/* ============================================================
   CORREÇÕES DO HERO — auditoria visual (390px / 1440px)
   1. Gradiente rico em camadas
   2. Contraste dos textos decorativos em script
   3. Espaço vazio no topo
   ============================================================ */

/* ------------------------------------------------------------
   1. FUNDO DO HERO EM CAMADAS
   Ordem das camadas (de cima para baixo):
   véu de profundidade > glow frio > glow quente > base diagonal
   ------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(5.5rem, 4rem + 6vw, 8rem);
  background-color: var(--paper-warm);
  background-image:
    /* véu sutil: leve clareamento no topo, sombra quente no pé */
    linear-gradient(180deg,
      color-mix(in oklab, var(--light) 38%, transparent) 0%,
      transparent 30%,
      transparent 68%,
      color-mix(in oklab, var(--accent) 14%, transparent) 100%),
    /* glow frio/discreto no canto oposto ao retrato */
    radial-gradient(46% 52% at 12% 78%,
      color-mix(in oklab, var(--light) 55%, var(--dominant) 45%) 0%,
      color-mix(in oklab, var(--light) 26%, transparent) 45%,
      transparent 100%),
    /* glow quente atrás do retrato (lado direito) */
    radial-gradient(56% 62% at 74% 28%,
      color-mix(in oklab, var(--dominant) 62%, var(--light)) 0%,
      color-mix(in oklab, var(--dominant) 34%, transparent) 48%,
      transparent 100%),
    /* base linear diagonal com 3 paradas derivadas dos tokens */
    linear-gradient(158deg,
      color-mix(in oklab, var(--light) 72%, var(--dominant) 28%) 0%,
      color-mix(in oklab, var(--apoio) 55%, var(--dominant) 45%) 52%,
      color-mix(in oklab, var(--dominant) 55%, var(--accent) 45%) 100%);
  background-repeat: no-repeat;
  background-size:
    100% 100%,
    120% 120%,
    130% 130%,
    100% 100%;
  background-position:
    center,
    0% 100%,
    100% 0%,
    center;
}

/* transição suave para a seção seguinte: sem emenda dura */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(4rem, 3rem + 4vw, 7rem);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--paper) 60%, transparent) 60%,
    var(--paper) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* reforço da camada de luz existente */
.hero-grad,
.hero .glow-hero {
  background-image:
    radial-gradient(52% 60% at 70% 30%,
      color-mix(in oklab, var(--dominant) 40%, transparent) 0%,
      transparent 100%);
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------
   2. CONTRASTE DOS TEXTOS DECORATIVOS
   ------------------------------------------------------------ */
.hero .script,
.hero-titulo em,
.hero-titulo i,
.hero-lead em,
.hero-lead i,
.hero-eyebrow .script {
  font-weight: 600;
  color: color-mix(in oklab, var(--accent) 82%, var(--marrom));
  text-shadow:
    0 1px 0 color-mix(in oklab, var(--light) 45%, transparent),
    0 2px 14px color-mix(in oklab, var(--dominant) 55%, transparent);
}

/* palavra grande decorativa apagada dentro do título */
.hero-titulo .script,
.hero-titulo .palavra-destaque {
  color: var(--accent);
  -webkit-text-fill-color: currentColor;
  text-shadow:
    0 1px 0 color-mix(in oklab, var(--light) 40%, transparent),
    0 3px 18px color-mix(in oklab, var(--dominant) 60%, transparent);
}

/* ------------------------------------------------------------
   3. ESPAÇO VAZIO NO TOPO
   ------------------------------------------------------------ */
.hero {
  padding-top: clamp(4.5rem, 3.5rem + 4vw, 6.5rem);
}

.hero-inner {
  gap: var(--esp-4);
}

.hero-eyebrow {
  margin-top: 0;
  margin-bottom: var(--esp-3);
}

/* ===== css24.css ===== */
/* ============================================================
   HERO ESCURO : gradiente rico em camadas + contraste >= 7:1
   Camadas (de cima para baixo):
   fade para --paper > glow frio oposto > glow quente no retrato
   > base linear 158deg em tokens escuros
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding-top: 0;
  overflow: hidden;
  color: var(--light);
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent 82%,
      color-mix(in oklab, var(--paper) 55%, transparent) 94%,
      var(--paper) 100%),
    radial-gradient(48% 55% at 10% 82%,
      color-mix(in oklab, var(--accent) 26%, transparent) 0%,
      transparent 70%),
    radial-gradient(58% 64% at 74% 26%,
      color-mix(in oklab, var(--dominant) 22%, transparent) 0%,
      color-mix(in oklab, var(--dominant) 10%, transparent) 42%,
      transparent 70%),
    linear-gradient(158deg,
      var(--ink) 0%,
      color-mix(in oklab, var(--dominant) 12%, var(--ink)) 52%,
      color-mix(in oklab, var(--marrom) 62%, var(--ink)) 100%);
  background-repeat: no-repeat;
}

/* Grão quente levemente reforçado sobre o fundo escuro */
.hero.atmosfera-grao::before {
  opacity: 0.12;
  z-index: 1;
}

/* Camada de luz do tile agora aquece o retrato sobre o escuro */
.hero.glow-hero {
  background-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent 82%,
      color-mix(in oklab, var(--paper) 55%, transparent) 94%,
      var(--paper) 100%),
    radial-gradient(48% 55% at 10% 82%,
      color-mix(in oklab, var(--accent) 26%, transparent) 0%,
      transparent 70%),
    radial-gradient(58% 64% at 74% 26%,
      color-mix(in oklab, var(--dominant) 24%, transparent) 0%,
      color-mix(in oklab, var(--dominant) 10%, transparent) 42%,
      transparent 70%),
    linear-gradient(158deg,
      var(--ink) 0%,
      color-mix(in oklab, var(--dominant) 12%, var(--ink)) 52%,
      color-mix(in oklab, var(--marrom) 62%, var(--ink)) 100%);
  background-repeat: no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--paper) 100%);
}

/* Conteúdo começa junto ao header fixo (~64-72px) no mobile */
.hero .hero-caixa,
.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(4rem, 3.6rem + 1.6vw, 4.5rem);
  gap: var(--esp-5);
}

/* ------------------------------------------------------------
   TIPOGRAFIA SOBRE O ESCURO
   ------------------------------------------------------------ */
.hero .kicker-hero {
  color: var(--dominant);
}

.hero-titulo {
  font-weight: 600;
  color: var(--paper);
  text-shadow:
    0 2px 24px color-mix(in oklab, var(--ink) 55%, transparent),
    0 1px 6px color-mix(in oklab, var(--marrom) 60%, transparent);
}

.hero .hero-titulo em,
.hero .hero-titulo i,
.hero-titulo .grad-texto {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(100deg,
    color-mix(in oklab, var(--dominant) 80%, var(--apoio)) 10%,
    var(--apoio) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Frase decorativa em script: bege claro + halo quente discreto */
.hero .script,
.hero .hero-titulo .script,
.hero .hero-lead .script {
  font-weight: 600;
  color: var(--apoio);
  -webkit-text-fill-color: currentColor;
  text-shadow:
    0 1px 2px color-mix(in oklab, var(--ink) 70%, transparent),
    0 2px 18px color-mix(in oklab, var(--dominant) 45%, transparent);
}

.hero-lead {
  color: color-mix(in oklab, var(--light) 82%, transparent);
  text-shadow: 0 1px 12px color-mix(in oklab, var(--ink) 45%, transparent);
}

.hero-lead strong,
.hero .hero-lead em,
.hero .hero-lead i {
  color: var(--paper-warm);
}

.hero .hero-fone {
  color: color-mix(in oklab, var(--light) 72%, transparent);
}

.hero .hero-fone-num {
  color: var(--dominant);
  background-image: linear-gradient(90deg,
    color-mix(in oklab, var(--dominant) 55%, transparent),
    color-mix(in oklab, var(--dominant) 55%, transparent));
}

.hero .hero-fone-num:hover,
.hero .hero-fone-num:focus-visible {
  color: var(--apoio);
}

/* ------------------------------------------------------------
   CHIPS / SELOS: vidro claro e borda sutil sobre o escuro
   ------------------------------------------------------------ */
.hero-fato {
  color: color-mix(in oklab, var(--ink) 88%, var(--marrom));
  background: color-mix(in oklab, var(--light) 88%, transparent);
  border-color: color-mix(in oklab, var(--light) 34%, transparent);
  box-shadow:
    0 4px 18px color-mix(in oklab, var(--ink) 50%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--light) 18%, transparent);
}

.hero-fato:hover {
  border-color: color-mix(in oklab, var(--dominant) 60%, transparent);
}

.hero-fato .icone,
.hero-fato strong {
  color: var(--accent-hover);
}

.hero .selo {
  color: var(--light);
}

.hero .selo-texto {
  color: color-mix(in oklab, var(--light) 80%, transparent);
  text-shadow: 0 1px 10px color-mix(in oklab, var(--ink) 55%, transparent);
}

.hero .selo-anel {
  box-shadow:
    0 10px 28px color-mix(in oklab, var(--ink) 55%, transparent),
    0 0 0 1px color-mix(in oklab, var(--light) 14%, transparent);
}

.hero .selo-anel::after {
  background: var(--paper);
}

.hero .selo-valor {
  color: var(--accent-hover);
}

/* ------------------------------------------------------------
   MARQUEE: faixa de vidro escuro, texto claro
   ------------------------------------------------------------ */
.marquee {
  position: relative;
  z-index: 2;
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top-color: color-mix(in oklab, var(--light) 16%, transparent);
  border-bottom-color: color-mix(in oklab, var(--light) 16%, transparent);
}

.marquee-trilho,
.marquee .marquee-seq {
  color: color-mix(in oklab, var(--light) 78%, transparent);
  text-shadow: 0 1px 8px color-mix(in oklab, var(--ink) 50%, transparent);
}

.marquee .marquee-sep {
  color: var(--dominant);
}

/* ===== css25.css ===== */
.hero {
  padding-top: clamp(4rem, 3.6rem + 1vw, 4.5rem);
}

.hero > * + * {
  margin-top: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
}

.hero h1,
.hero .titulo,
.hero .hero-title {
  margin-top: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  margin-bottom: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
}

.hero p,
.hero .lead,
.hero .hero-lead {
  margin-top: clamp(0.5rem, 0.4rem + 0.4vw, 0.9rem);
  margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
}

/* ===== css26.css ===== */
/* ============================================================
   BLOCO 26 · Correção de contraste: kicker e fluxo-num
   ============================================================ */

/* Kicker sobre fundo claro: tom escuro com contraste >= 4.5:1 */
.kicker {
  color: color-mix(in oklab, var(--accent) 82%, var(--ink));
}

/* Kicker dentro de seções escuras: tom claro contra o fundo escuro */
.secao-escura .kicker,
.faixa-escura .kicker,
.atmosfera-escura .kicker,
.hero .kicker,
.hero .kicker-hero {
  color: color-mix(in oklab, var(--dominant) 62%, var(--paper));
}

.secao-escura .kicker::before,
.faixa-escura .kicker::before,
.atmosfera-escura .kicker::before,
.hero .kicker::before {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--dominant) 62%, var(--paper)) 0%,
    color-mix(in oklab, var(--dominant) 30%, transparent) 55%,
    transparent 100%);
}