/* =============================================================
   Dra. Gabriela Ereno — Landing Page Endometriose
   styles.css
   Direcao A — Acolhimento Empatico
   Mobile-first · WCAG 2.1 AA · tipografia fluida com clamp()
   ============================================================= */

/* -------------------------------------------------------------
   Tokens (CSS custom properties) — fonte unica da verdade
------------------------------------------------------------- */
:root {
  /* Cores */
  --color-background: #F5EFE5;
  --color-surface: #FBF7F0;
  --color-surface-alt: #ECE3D5;
  --color-accent: #C2A878;
  /* Dourado FUNCIONAL: tom escurecido que mede >= 3:1 contra todos os fundos creme
     (4.00:1 surface, 3.73:1 background, 3.36:1 surface-alt). Usado onde o dourado e o
     UNICO portador de fronteira/affordance (WCAG 1.4.11). Invariante: dourado claro
     (#C2A878) so em decorativos REDUNDANTES (pontos do divider, monograma, filetes);
     nunca como texto nem como unico delimitador. */
  --color-accent-strong: #977538;
  --color-accent-soft: rgba(194, 168, 120, 0.30);
  --color-cta-bg: #6F5128;        /* repouso AAA (~6.82:1 sobre creme) */
  --color-cta-bg-hover: #5E4421;  /* hover com delta de estado perceptivel */
  --color-cta-text: #FBF7F0;
  --color-text: #463F35;
  --color-muted: #635847;
  /* Fonte unica: o hairline reusa o accent-soft (eram identicos) */
  --color-hairline: var(--color-accent-soft);
  /* Foco visivel: tom escuro para >= 3:1 contra todos os fundos creme (WCAG 1.4.11 / 2.4.7) */
  --color-focus-ring: #7A5A2E;

  /* Atalhos semanticos usados no CSS */
  --accent: var(--color-accent);

  /* Tipografia */
  --font-script: "Pinyon Script", cursive;
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Espacamento (unidade base 8px) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  --section-py: clamp(48px, 9vw, 128px);
  --container-max: 1160px;
  --container-px: clamp(20px, 5vw, 48px);
  --measure: 65ch;

  /* Raios */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-pill: 20px;
  --radius-lg: 24px;
  --radius-button: 999px;

  /* Sombras */
  --shadow-card: 0 2px 18px rgba(70, 63, 53, 0.06);
  --shadow-card-hover: 0 8px 28px rgba(70, 63, 53, 0.10);
  --shadow-float-card: 0 12px 32px rgba(70, 63, 53, 0.12);
  --shadow-cta: 0 6px 18px rgba(122, 90, 46, 0.22);
  --shadow-cta-hover: 0 10px 26px rgba(122, 90, 46, 0.30);
  --shadow-halo: 0 0 0 1px rgba(194, 168, 120, 0.55), 0 0 40px rgba(194, 168, 120, 0.20);
  --shadow-header: 0 1px 0 rgba(194, 168, 120, 0.22);

  /* Transicoes */
  --t-fast: 150ms ease;
  --t-base: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa o header sticky translucido para que ancoras (#hero, #conteudo) nao fiquem tampadas */
  scroll-padding-top: clamp(64px, 14vw, 88px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  /* Quebra de linha mais equilibrada em telas estreitas (degradacao graciosa) */
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
}

p { margin: 0; }

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

blockquote { margin: 0; }

a { color: inherit; }

strong { font-weight: 600; }

/* Reduz movimento conforme preferencia do usuario */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------------------------------------------------------------
   Acessibilidade — skip-link e foco visivel
------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -64px;
  z-index: 1000;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-base);
}
.skip-link:focus { top: var(--space-md); }

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
/* O <main> recebe foco programatico via skip-link; nao desenha anel no bloco inteiro */
main:focus,
main:focus-visible { outline: none; }

/* -------------------------------------------------------------
   Layout — container e helpers
------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.measure { max-width: var(--measure); }
.measure--center { margin-inline: auto; }

.section { padding-block: var(--section-py); }

/* -------------------------------------------------------------
   Tipografia editorial — kicker, eyebrow, titulos, divisor
------------------------------------------------------------- */
.kicker,
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-md);
}

/* Kicker do hero: tracking menor que os eyebrows (frase mais longa em caixa-alta) */
.kicker--hero { letter-spacing: 0.12em; }

.section__head { text-align: center; margin-bottom: var(--space-2xl); }

.section__title {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.85rem);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.section__title--left { text-align: left; }

.section__intro {
  margin-top: var(--space-lg);
  color: var(--color-muted);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.section__closing {
  margin-top: var(--space-2xl);
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.55rem);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.45;
}

/* Divisor em floreio: filete dourado curto + ponto do monograma */
.divider {
  display: block;
  width: 64px;
  height: 1px;
  margin: var(--space-lg) auto 0;
  background: var(--color-accent);
  position: relative;
}
.divider::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translateY(-50%);
}
.divider--left { margin-inline: 0; }

/* -------------------------------------------------------------
   Botoes / CTA
------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-button);
  transition: background-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  /* Alvo de toque >= 44px */
  min-height: 48px;
  padding: 14px 26px;
}

.btn--cta {
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  box-shadow: var(--shadow-cta);
}
.btn--cta:hover {
  background-color: var(--color-cta-bg-hover);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
}
.btn--cta:active { transform: translateY(0); }

.btn--lg {
  font-size: 1.0625rem;
  padding: 17px 34px;
  min-height: 54px;
}

.microcopy {
  margin-top: var(--space-md);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 46ch;
}

/* -------------------------------------------------------------
   Header minimo fixo (translucido, logo + 1 CTA)
------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 239, 229, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-header);
  transition: padding var(--t-base), background-color var(--t-base);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  transition: padding var(--t-base);
}
/* Estado condensado ao rolar (toggle por JS) */
.site-header.is-scrolled .site-header__inner { padding-block: 8px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  color: var(--color-text);
  min-width: 0; /* permite encolher dentro do header flex sem estourar */
}
.brand__logo { display: block; height: clamp(46px, 5.2vw, 58px); width: auto; }
.brand picture { display: contents; }
.brand__mark { display: inline-flex; flex: none; }
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0; /* habilita text-overflow no nome em telas estreitas */
}
.brand__name {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  color: var(--color-text);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__subtitle {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 2px;
}

/* CTA do header um pouco mais compacto. gap:0 porque nao ha icone; como "Agendar" e
   o <span> sao itens flex (a .btn e inline-flex), o espaco entre as palavras vem de
   um margin-left no span — espaco unico e consistente (sem o &nbsp; + flex gap antigo). */
.header__cta { padding: 11px 22px; min-height: 44px; font-size: 0.9375rem; flex: none; white-space: nowrap; gap: 0; }
.header__cta-extra { margin-left: 0.28em; }

/* Em telas estreitas, o CTA encurta para "Agendar" e o subtitulo da marca some,
   garantindo que nome + CTA convivam sem estouro horizontal a partir de 320px. */
@media (max-width: 480px) {
  .header__cta { padding: 10px 16px; font-size: 0.875rem; }
  .header__cta-extra { display: none; }
  .brand__subtitle { display: none; }
}

/* Ate ~639px (antes do hero virar 2 colunas), o cartao flutuante do retrato ganha
   margem consistente ate as bordas arredondadas do frame, neutralizando o offset
   negativo do left para que nao se aproxime da borda do container em larguras
   intermediarias (414-600px). O overflow:hidden do hero ja contem qualquer estouro. */
@media (max-width: 639px) {
  .portrait__card {
    left: var(--space-md);
    max-width: calc(100% - 2 * var(--space-md));
  }
}

/* -------------------------------------------------------------
   HERO
------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 104px); overflow: hidden; }
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.hero__headline {
  font-size: clamp(2.3rem, 1.6rem + 3.4vw, 3.75rem);
  font-weight: 600;
  letter-spacing: 0.005em;
  margin-bottom: var(--space-lg);
  /* Cormorant em tamanho grande respira melhor com entrelinha mais fechada */
  line-height: 1.08;
}
.hero__sub {
  color: var(--color-muted);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  line-height: 1.7;
  text-wrap: pretty;
}
.hero__actions { margin-top: var(--space-xl); }

/* Mobile/tablet (hero empilhado em 1 coluna) — ordem otimizada para conversao
   de trafego pago: 1) TITULO (gancho) + 2) SUBTEXTO formam a unidade de
   mensagem que confirma "isto e sobre a minha dor" (relevancia = menos
   rejeicao); 3) FOTO (rosto + selo CRM = confianca, logo apos a mensagem);
   4) CTA (acao no pico de motivacao) + 5) credenciais. O CTA principal segue
   sempre acessivel (botao sticky). display:contents "achata" a coluna de texto
   para ordenarmos titulo/subtexto/foto livremente. No desktop (>=1024px) o
   layout em 2 colunas e preservado (foto volta para a direita). */
@media (max-width: 1023px) {
  .hero__copy { display: contents; }
  .hero__inner { row-gap: clamp(18px, 4.5vw, 28px); }

  .kicker--hero   { order: 1; margin-bottom: 0; }
  .hero__headline { order: 2; margin-bottom: 0; }
  .hero__sub      { order: 3; }
  .hero__media    { order: 4; margin-top: clamp(6px, 2vw, 14px); }
  .hero__actions  { order: 5; margin-top: 0; }
  .trust-bar      { order: 6; margin-top: 0; }

  .hero .portrait { max-width: 400px; }
}

/* Barra de credibilidade */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-hairline);
  font-size: 0.875rem;
  color: var(--color-muted);
}
.trust-bar li { position: relative; padding-left: var(--space-md); }
.trust-bar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Retrato + fallback de marca */
.hero__media { display: flex; justify-content: center; }
.portrait { position: relative; margin: 0; width: 100%; max-width: 480px; }
.portrait__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-halo), var(--shadow-float-card);
  background: linear-gradient(140deg, var(--color-background), var(--color-surface-alt));
}
.portrait__img { width: 100%; height: 100%; object-fit: cover; }
/* <picture> transparente: o <img> e tratado como filho direto do frame (preserva o sizing 100%). */
.portrait picture { display: contents; }

/* Painel de marca exibido quando a foto nao carrega (acionado por JS via onerror) */
.brand-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background: linear-gradient(140deg, var(--color-background) 0%, var(--color-surface-alt) 100%);
  padding: var(--space-xl);
  text-align: center;
}
.portrait__frame.show-fallback .brand-fallback { display: flex; }
.portrait__frame.show-fallback .portrait__img { display: none; }
.brand-fallback__name {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  color: var(--color-text);
}

/* Cartao flutuante com fato objetivo */
.portrait__card {
  position: absolute;
  left: clamp(-8px, -2vw, 0px);
  bottom: clamp(16px, 4vw, 28px);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float-card);
  padding: var(--space-md) var(--space-lg);
  max-width: 70%;
}
.portrait__card-fact {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
}
.portrait__card-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-top: 2px;
}

/* -------------------------------------------------------------
   IDENTIFICACAO — cards-pilula de sintomas
------------------------------------------------------------- */
.section--identificacao { background: var(--color-background); }

.pill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.pill {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.pill:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.pill__title {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}
.pill__desc { color: var(--color-muted); font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1rem); line-height: 1.6; }

/* -------------------------------------------------------------
   BENEFICIOS — cards com icone
------------------------------------------------------------- */
.section--beneficios { background: var(--color-surface); }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.benefit-card {
  background: var(--color-background);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.benefit-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.benefit-card__title {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}
.benefit-card__desc { color: var(--color-muted); font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1rem); line-height: 1.6; }

/* -------------------------------------------------------------
   CTA strip (repeticao)
------------------------------------------------------------- */
.cta-strip { background: var(--color-surface-alt); padding-block: var(--space-3xl); }
.cta-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
}
.cta-strip__text {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 500;
  color: var(--color-text);
  max-width: 28ch;
}
.cta-strip__action { display: flex; flex-direction: column; align-items: center; }
.cta-strip .microcopy { text-align: center; }

/* -------------------------------------------------------------
   COMO FUNCIONA — passo a passo numerado
------------------------------------------------------------- */
.section--passos { background: var(--color-background); }
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
.step {
  position: relative;
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.step__num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(3rem, 2.4rem + 2vw, 4rem);
  line-height: 1;
  /* Dourado funcional: numeros 01/02/03 sao informacao, precisam de >= 3:1 */
  color: var(--color-accent-strong);
  margin-bottom: var(--space-md);
}
.step__title {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}
.step__desc { color: var(--color-muted); font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1rem); line-height: 1.6; }

/* -------------------------------------------------------------
   Bloco honesto — quando a cirurgia e considerada
------------------------------------------------------------- */
.section--cirurgia { background: var(--color-surface); }
.note-block {
  background: var(--color-background);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--color-accent-strong);
  border-radius: var(--radius-md);
  padding: clamp(28px, 5vw, 48px);
  box-shadow: var(--shadow-card);
}
.note-block p + p { margin-top: var(--space-md); }
.note-block p { color: var(--color-muted); }
.note-block strong { color: var(--color-text); }

/* -------------------------------------------------------------
   AUTORIDADE
------------------------------------------------------------- */
.section--autoridade { background: var(--color-background); }
.autoridade__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.autoridade__media { display: flex; justify-content: center; }
.portrait--compact { max-width: 380px; }
.portrait--compact .portrait__frame { aspect-ratio: 4 / 5; }

.autoridade__role {
  margin-top: var(--space-sm);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-muted);
}
.autoridade__reg {
  margin-top: var(--space-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.autoridade__bio { margin-top: var(--space-lg); color: var(--color-muted); }
.autoridade__bio p + p { margin-top: var(--space-md); }

.formacao {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-sm);
}
.formacao li {
  position: relative;
  padding-left: var(--space-lg);
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.55;
}
.formacao li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* -------------------------------------------------------------
   PROVA SOCIAL — fatos objetivos + depoimentos
------------------------------------------------------------- */
.section--prova { background: var(--color-surface); }
.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 880px;
  margin-inline: auto;
}
.fact {
  background: var(--color-background);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  position: relative;
  padding-left: calc(var(--space-xl) + 16px);
  color: var(--color-text);
  font-size: 0.975rem;
  box-shadow: var(--shadow-card);
}
.fact::before {
  content: "";
  position: absolute;
  left: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* Anel e o unico marcador visual de cada fato -> dourado funcional (>= 3:1) */
  border: 2px solid var(--color-accent-strong);
}

/* Depoimentos (renderizados via JS; ocultos por padrao) */
.testimonials { margin-top: var(--space-3xl); }
.testimonials__title {
  text-align: center;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600;
  margin-bottom: var(--space-2xl);
  color: var(--color-text);
}
.testimonials__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 980px;
  margin-inline: auto;
}
.testimonial {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  box-shadow: var(--shadow-card);
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: var(--space-lg);
  font-family: var(--font-heading);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.35;
}
.testimonial__text {
  position: relative;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.65;
}
.testimonial__author {
  margin-top: var(--space-md);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* -------------------------------------------------------------
   FAQ — acordeao leve
------------------------------------------------------------- */
.section--faq { background: var(--color-background); }
.faq { display: grid; gap: var(--space-md); }
.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: 0 var(--space-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  list-style: none;
  cursor: pointer;
  padding: var(--space-lg) 0;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 600;
  color: var(--color-text);
  min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
/* Indicador +/- fino */
.faq__icon { position: relative; flex: none; width: 18px; height: 18px; }
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  /* Tom escuro p/ contraste >= 3:1 contra o cartao creme (WCAG 1.4.11) */
  background: var(--color-text);
  transition: transform var(--t-base), opacity var(--t-base);
}
.faq__icon::before { top: 50%; left: 0; width: 18px; height: 2px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; width: 2px; height: 18px; transform: translateX(-50%); }
.faq__item[open] .faq__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.faq__a {
  padding: 0 0 var(--space-lg);
  color: var(--color-muted);
  line-height: 1.65;
  text-align: left;
  text-wrap: pretty;
}

/* -------------------------------------------------------------
   CTA FINAL
------------------------------------------------------------- */
.section--final {
  background: linear-gradient(160deg, var(--color-surface-alt), var(--color-background));
  position: relative;
  overflow: hidden;
}
.final__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.final__watermark {
  position: absolute;
  top: -30px;
  right: 4%;
  opacity: 0.16;
  pointer-events: none;
}
.final__title {
  font-size: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
  font-weight: 600;
  margin-bottom: var(--space-lg);
  color: var(--color-text);
  line-height: 1.08;
}
.final__sub { color: var(--color-muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-bottom: var(--space-xl); }
.final .microcopy { text-align: center; }
.signature {
  margin-top: var(--space-2xl);
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  color: var(--color-accent);
}

/* -------------------------------------------------------------
   RODAPE
------------------------------------------------------------- */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--space-3xl) calc(var(--space-3xl) + 72px); /* espaco extra p/ sticky no mobile */
}
.site-footer__inner { text-align: center; display: grid; gap: var(--space-sm); }
.site-footer__name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--color-text); }
.site-footer__reg { font-weight: 600; letter-spacing: 0.04em; color: var(--color-text); }
.site-footer__clinic,
.site-footer__cnpj { color: var(--color-muted); font-size: 0.95rem; }
.site-footer__notice {
  margin-top: var(--space-md);
  color: var(--color-muted);
  font-size: 0.85rem;
  max-width: 60ch;
  margin-inline: auto;
}
.site-footer__copy { margin-top: var(--space-md); color: var(--color-muted); font-size: 0.85rem; }

/* Instagram no rodape: link secundario e discreto. Monocromatico (herda o
   cinza-terroso do texto do rodape) — NUNCA o dourado do CTA, para nao criar
   um segundo foco visual que dispute com o botao de WhatsApp. */
.site-footer__social { margin-top: var(--space-sm); }
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;            /* alvo de toque acessivel (>=44px) */
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer-social-link svg { display: block; }
.footer-social-link:hover,
.footer-social-link:focus-visible { color: var(--color-text); }

/* -------------------------------------------------------------
   Botao flutuante WhatsApp
------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  box-shadow: var(--shadow-cta);
  text-decoration: none;
  transition: background-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.wa-float:hover { background: var(--color-cta-bg-hover); box-shadow: var(--shadow-cta-hover); transform: translateY(-2px); }

/* -------------------------------------------------------------
   Barra sticky de CTA (apenas mobile)
------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding: 10px var(--container-px) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(245, 239, 229, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-hairline);
}
.sticky-cta__btn { width: 100%; }

/* No mobile, o botao flutuante cede prioridade para a barra sticky */
.wa-float { display: none; }

/* No mobile (onde a barra sticky existe), garante respiro extra na base do CTA final
   para o botao e a assinatura nunca ficarem sob a barra (~68px + safe-area) ao rolar. */
@media (max-width: 639px) {
  .section--final { padding-bottom: calc(var(--section-py) + 80px); }
}

/* -------------------------------------------------------------
   BANNER DE CONSENTIMENTO (LGPD / Consent Mode v2)
   ------------------------------------------------------------
   Barra inferior fixa, NAO-modal, on-brand (creme/dourado).
   Fica ACIMA da sticky-cta (z-index 110 > 95): enquanto o banner
   esta visivel ele ocupa a base; quando dispensado, a sticky-cta
   volta ao normal. Entra via transform/opacity (sem reflow = sem CLS).
------------------------------------------------------------- */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  background: var(--color-surface);
  border-top: 1px solid var(--color-hairline);
  box-shadow: 0 -8px 28px rgba(70, 63, 53, 0.12);
  padding-block: var(--space-lg);
  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  /* Teto de altura em telas baixas/landscape: o conteudo do banner (modo
     Preferencias) rola dentro do proprio banner, mantendo as acoes primarias
     (Salvar/Aceitar) alcancaveis sem depender do scroll da pagina. */
  max-height: 85svh;
  overflow-y: auto;
  /* Animacao de entrada sem empurrar layout (banner e fixed = fora do fluxo) */
  transform: translateY(0);
  transition: transform var(--t-base), opacity var(--t-base);
}
.consent[hidden] { display: none; }
/* Estado de saida suave (aplicado por JS antes de ocultar) */
.consent.is-leaving { transform: translateY(110%); opacity: 0; }

/* Enquanto o banner de consentimento esta aberto, os elementos fixos da borda
   inferior cedem a base (evita competicao visual/sobreposicao na mesma borda):
   - sticky-cta (mobile < 640px)
   - wa-float (>= 640px, onde passa a ser exibido) — sem isso, o banner full-width
     cobre/colide com o botao flutuante de WhatsApp em tablets ate a decisao. */
body.consent-open .sticky-cta,
body.consent-open .wa-float { display: none; }

.consent__inner {
  display: grid;
  gap: var(--space-md);
}

.consent__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 2px;
}
.consent__text {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 70ch;
  text-wrap: pretty;
}
.consent__text strong { color: var(--color-text); }

/* Painel granular */
.consent__prefs[hidden] { display: none; }
.consent__cats {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.consent__cat {
  background: var(--color-background);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}
.consent__cat-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}
.consent__cat-label input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-cta-bg);
  cursor: pointer;
}
.consent__cat-label input[disabled] { cursor: default; }
.consent__cat-name {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
}
.consent__cat-desc {
  display: block;
  color: var(--color-muted);
  font-size: 0.825rem;
  line-height: 1.45;
  margin-top: 2px;
}

/* Acoes */
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.consent__btn {
  min-height: 44px;
  padding: 11px 22px;
  font-size: 0.9375rem;
  border-radius: var(--radius-button);
}
.consent__btn--primary {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  box-shadow: var(--shadow-cta);
}
.consent__btn--primary:hover {
  background: var(--color-cta-bg-hover);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
}
.consent__btn--secondary {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: 1px solid var(--color-hairline);
}
.consent__btn--secondary:hover { background: var(--color-background); }
.consent__btn--ghost {
  background: transparent;
  color: var(--color-cta-bg);
  /* Borda como unico delimitador do controle -> dourado funcional (>= 3:1, WCAG 1.4.11) */
  border: 1px solid var(--color-accent-strong);
}
.consent__btn--ghost:hover { background: var(--color-surface-alt); }
.consent__btn[hidden] { display: none; }

/* Botao "Cookies e privacidade" no rodape (reabre o painel; nao navega) */
.site-footer__cookies { margin-top: var(--space-sm); }
.footer-cookies-link {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  /* Padding generoso para que a area de toque acompanhe os 44px tambem na largura */
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-hairline);
  cursor: pointer;
  min-height: 44px;
  transition: color var(--t-fast);
}
.footer-cookies-link:hover { color: var(--color-text); }

/* Desktop: layout em duas colunas (texto | acoes), painel ocupa a linha toda */
@media (min-width: 760px) {
  .consent__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-xl);
  }
  .consent__intro { grid-column: 1; grid-row: 1; }
  .consent__actions { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
  .consent__prefs { grid-column: 1 / -1; grid-row: 2; }
  /* Empurra Recusar/Aceitar para a direita SOMENTE no desktop (flex-wrap:nowrap).
     No mobile (flex-wrap:wrap) isso causaria espacamento assimetrico ao quebrar. */
  .consent__btn--ghost { margin-right: auto; }
}

/* -------------------------------------------------------------
   Scroll-reveal (fade-up sutil)
------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* will-change so durante a transicao (aplicado/removido por JS) — evita camadas de
   composicao permanentes que pesam no INP em dispositivos modestos. */
.reveal.is-animating { will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =============================================================
   BREAKPOINTS
============================================================= */

/* >= 640px — sintomas em 2 colunas, sticky bar some, float aparece */
@media (min-width: 640px) {
  .pill-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: 1fr; }

  /* A partir de tablet, o sticky some e o botao flutuante assume */
  .sticky-cta { display: none; }
  .wa-float { display: inline-flex; }
  /* Reserva leve no rodape p/ o wa-float (56px + respiro) nao tocar o texto no canto */
  .site-footer { padding-block: var(--space-3xl) calc(var(--space-3xl) + 24px); }
}

/* >= 768px — beneficios e passos em 2-3 colunas */
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .testimonials__list { grid-template-columns: repeat(2, 1fr); }
  /* Fatos preenchem melhor a largura em tablet/desktop sem afetar o mobile */
  .facts { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* >= 1024px — hero e autoridade em coluna dupla, grids mais amplos */
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
  .pill-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .autoridade__inner { grid-template-columns: 0.85fr 1.15fr; }
  .testimonials__list { grid-template-columns: repeat(3, 1fr); }
}