/* =========================================================================
   Dra. Etiene de Almeida — Geriatria | Palmas – TO
   Sistema visual: rosé nude + malva, bronze champanhe na conversão e
   cacau nas faixas escuras.
   Responsividade intrínseca: grids auto-fit, container queries e escalas
   fluidas — os breakpoints existem só onde a estrutura realmente muda.
   ========================================================================= */

/* ═══════════════ 1. TOKENS ═══════════════ */
:root {
  /* — Marca — */
  --malva:         #7A4A55;   /* cor principal: destaques, ícones, bordas — 6,7:1 sobre o fundo */
  --malva-vivo:    #8C5963;
  --cacau:         #4A3236;   /* faixas escuras */
  --malva-tinta:   122 74 85; /* canal RGB para alphas */
  --champanhe:     #E8CBA7;   /* destaque sobre o cacau — 7,5:1 */

  /* — Ação / conversão — */
  --dourado:       #B8955F;   /* acento decorativo (não carrega texto) */
  --bronze:        #86663B;   /* superfície de botão: branco por cima = 5,28:1 */
  --bronze-hover:  #6F532E;   /* 7,11:1 */

  /* — Fundos — */
  --fundo:         #FBF7F4;   /* off-white quente */
  --fundo-alt:     #F7F1ED;
  --fundo-bloco:   #F2E7E2;   /* nude rosé: cards e blocos */
  --branco:        #FFFFFF;

  /* — Texto — */
  --texto:         #2E2427;   /* grafite quente: melhor leitura que preto puro */
  --texto-apoio:   #62545A;
  --texto-claro:   rgba(255, 255, 255, .88);
  --texto-claro-2: rgba(255, 255, 255, .72);

  /* — Linhas e sombras — */
  --linha:      rgb(var(--malva-tinta) / .14);
  --linha-forte:rgb(var(--malva-tinta) / .28);
  --linha-btn:  rgb(var(--malva-tinta) / .72);  /* ≥3:1 — limite visível do botão de contorno (WCAG 1.4.11) */
  --sombra-s:   0 2px 8px rgb(var(--malva-tinta) / .05);
  --sombra-m:   0 10px 32px rgb(var(--malva-tinta) / .09);
  --sombra-g:   0 22px 56px rgb(var(--malva-tinta) / .16);
  --sombra-cta: 0 10px 26px rgb(138 106 63 / .32);

  /* — Tipografia — */
  --fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-corpo:  "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica fluida: interpola entre 360px e 1440px de viewport.
     Dispensa media queries para tamanho de texto em todo o site. */
  --txt--2: clamp(0.76rem, 0.735rem + 0.11vw, 0.83rem);
  --txt--1: clamp(0.88rem, 0.836rem + 0.19vw, 1.00rem);
  --txt-0:  clamp(1.00rem, 0.945rem + 0.24vw, 1.15rem);
  --txt-1:  clamp(1.12rem, 1.032rem + 0.39vw, 1.36rem);
  --txt-2:  clamp(1.30rem, 1.135rem + 0.73vw, 1.75rem);
  --txt-3:  clamp(1.62rem, 1.290rem + 1.47vw, 2.55rem);
  --txt-4:  clamp(2.00rem, 1.505rem + 2.20vw, 3.40rem);

  /* Escala de espaço fluida */
  --e-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --e-2xs: clamp(0.50rem, 0.48rem + 0.09vw, 0.62rem);
  --e-xs:  clamp(0.75rem, 0.72rem + 0.14vw, 0.94rem);
  --e-s:   clamp(1.00rem, 0.96rem + 0.19vw, 1.25rem);
  --e-m:   clamp(1.50rem, 1.44rem + 0.28vw, 1.88rem);
  --e-l:   clamp(2.00rem, 1.85rem + 0.67vw, 2.75rem);
  --e-xl:  clamp(3.00rem, 2.63rem + 1.67vw, 5.00rem);
  --e-2xl: clamp(4.00rem, 3.26rem + 3.33vw, 8.00rem);

  /* Layout */
  --largura-max: 1200px;
  --largura-texto: 66ch;
  --gutter: clamp(1.15rem, 5vw, 3rem);
  --secao-y: clamp(3.5rem, 8vw, 6.5rem);
  --altura-cabecalho: 4.5rem;

  /* Forma */
  --raio-s: 12px;
  --raio-m: 18px;
  --raio-g: 28px;
  --arco: 999px 999px var(--raio-m) var(--raio-m);

  --transicao: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* ═══════════════ 2. RESET ═══════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 1rem);
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--txt-0);
  line-height: 1.7;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;                 /* não quebra position:sticky, ao contrário de hidden */
}

img, picture, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--texto);
  margin: 0 0 .55em;
  text-wrap: balance;
}

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 700; color: var(--texto); }

em, .destaque {
  font-style: italic;
  font-weight: 400;
  color: var(--malva);
}

:focus-visible {
  outline: 3px solid var(--malva);
  outline-offset: 3px;
  border-radius: 6px;
}

.pular-para-conteudo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -9999px;
  z-index: 999;
  padding: .9rem 1.4rem;
  background: var(--malva);
  color: #fff;
  font-weight: 600;
  border-end-end-radius: var(--raio-s);
}
.pular-para-conteudo:focus { inset-inline-start: 0; }

.so-leitor-de-tela {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ═══════════════ 3. LAYOUT ═══════════════ */
.container {
  inline-size: min(100% - 2 * var(--gutter), var(--largura-max));
  margin-inline: auto;
}

.secao { padding-block: var(--secao-y); }
.secao--fundo   { background: var(--fundo); }
.secao--alt     { background: var(--fundo-alt); }
.secao--bloco   { background: var(--fundo-bloco); }
.secao--malva { background: var(--malva); color: var(--texto-claro); }
.secao--malva :is(h2, h3, h4, strong) { color: #fff; }

.cabecalho-secao {
  max-inline-size: 46rem;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--e-xl);
}
.cabecalho-secao > p { color: var(--texto-apoio); font-size: var(--txt-1); }
.secao--malva .cabecalho-secao > p { color: var(--texto-claro-2); }

/* ---- Grids intrínsecos: adaptam-se pela largura disponível, sem breakpoint.
        --col define a largura mínima da coluna; min(100%, …) evita estouro
        horizontal em telas estreitas. ---- */
.grid-auto {
  display: grid;
  gap: var(--e-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 17rem)), 1fr));
}

/* 7 itens: no arranjo de 3 colunas, o último fica órfão — centraliza. */
@media (min-width: 64rem) {
  .grid-auto--sete > :last-child { grid-column: 2 / 3; }
}

/* ---- Bloco de duas colunas (mídia + texto) ---- */
.duo {
  display: grid;
  gap: var(--e-l);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-xl); }
  .duo--midia-direita > .duo__midia { order: 2; }
}
/* No empilhado, a mídia vem depois do texto — o título alcança a dobra antes —
   e o texto fica limitado à medida legível em vez de esticar pelo tablet. */
@media (max-width: 55.999rem) {
  .duo__midia { order: 2; }
  .duo > :not(.duo__midia) { max-inline-size: var(--largura-texto); margin-inline: auto; }
}

.medida { max-inline-size: var(--largura-texto); }

/* ═══════════════ 4. TIPOGRAFIA UTILITÁRIA ═══════════════ */
.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-block-end: var(--e-xs);
  font-size: var(--txt--2);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--malva);
}
.eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 2px;
  flex: none;
  margin-block-start: .62em;        /* alinha o traço à primeira linha, não ao centro do bloco */
  background: var(--dourado);
  border-radius: 2px;
}
.cabecalho-secao .eyebrow { justify-content: center; }
.secao--malva .eyebrow, .eyebrow--claro { color: #fff; }
.secao--malva .eyebrow::before, .eyebrow--claro::before { background: rgba(255,255,255,.6); }

.titulo      { font-size: var(--txt-3); }
.titulo--hero{ font-size: var(--txt-4); line-height: 1.06; }
.texto-apoio { color: var(--texto-apoio); font-size: var(--txt-1); }
.secao--malva .texto-apoio { color: var(--texto-claro-2); }
.secao--malva .destaque, .destaque--claro { color: var(--champanhe); }

/* ═══════════════ 5. BOTÕES ═══════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-block-size: 3.25rem;          /* alvo de toque ≥ 52px */
  padding: .85rem 1.75rem;
  font-family: var(--fonte-corpo);
  font-size: var(--txt-0);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform var(--transicao), background-color var(--transicao),
              color var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn > svg { flex: none; }

/* CTA principal — bronze champanhe: 5,28:1 com texto branco. */
.btn--cta {
  background: linear-gradient(135deg, var(--bronze-hover) 0%, var(--bronze) 100%);
  color: #fff;
  box-shadow: var(--sombra-cta);
}
.btn--cta:hover  { background: var(--bronze-hover); }

.btn--malva       { background: var(--malva); color: #fff; box-shadow: var(--sombra-m); }
.btn--malva:hover { background: var(--malva-vivo); }

/* Sobre fundo cacau: botão claro com texto malva = 7,15:1 */
.btn--claro       { background: #fff; color: var(--malva); }
.btn--claro:hover { background: var(--fundo-bloco); }

.btn--contorno       { border-color: var(--linha-btn); color: var(--malva); background: transparent; }
.btn--contorno:hover { background: var(--malva); border-color: var(--malva); color: #fff; }

.btn--contorno-claro       { border-color: rgba(255,255,255,.45); color: #fff; }
.btn--contorno-claro:hover { background: rgba(255,255,255,.14); }

.btn--bloco { inline-size: 100%; }

.grupo-btn { display: flex; flex-wrap: wrap; gap: var(--e-xs); margin-block-start: var(--e-m); }
/* No hero os selos já criam o respiro acima dos botões. */
.hero__selos + .grupo-btn { margin-block-start: 0; }
/* Em telas estreitas os botões ocupam a linha inteira: alvo maior e sem viúvas. */
@media (max-width: 26rem) { .grupo-btn > .btn { inline-size: 100%; } }

/* ═══════════════ 6. CABEÇALHO ═══════════════ */
.cabecalho {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 90;
  background: rgb(251 247 244 / .82);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid transparent;
  transition: background-color var(--transicao), border-color var(--transicao),
              box-shadow var(--transicao);
}
@supports not (backdrop-filter: blur(1px)) { .cabecalho { background: var(--fundo); } }

.cabecalho.is-solido {
  background: rgb(251 247 244 / .97);
  border-block-end-color: var(--linha);
  box-shadow: var(--sombra-s);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-s);
  min-block-size: var(--altura-cabecalho);
}

.marca {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-block-size: 2.75rem;          /* alvo de toque de 44px também no logo */
  text-decoration: none;
  color: var(--malva);
}
.marca__nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-0);
  line-height: 1.15;
  color: var(--texto);
}
.marca__papel {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: var(--txt--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--malva);
}
/* Em telas muito estreitas, só o nome — evita quebra feia da marca. */
@media (max-width: 24rem) { .marca__papel { display: none; } }

.nav { display: none; align-items: center; gap: clamp(1rem, 1.8vw, 1.9rem); }
.nav__link {
  font-size: var(--txt--1);
  font-weight: 500;
  text-decoration: none;
  color: var(--texto);
  padding-block: .5rem;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--dourado);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.nav__link:hover { color: var(--malva); }
.nav__link:hover::after { transform: scaleX(1); }
.nav .btn { min-block-size: 2.9rem; padding-inline: 1.35rem; }

/* A navegação horizontal só cabe quando há largura para 5 rótulos + CTA. */
@media (min-width: 68rem) { .nav { display: flex; } }

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem; block-size: 3rem;
  margin-inline-end: -.5rem;
  background: none;
  border: 0;
  color: var(--malva);
  cursor: pointer;
}
@media (min-width: 68rem) { .menu-btn { display: none; } }

.menu-movel {
  background: var(--fundo);
  border-block-start: 1px solid var(--linha);
  box-shadow: var(--sombra-m);
  max-block-size: calc(100dvh - var(--altura-cabecalho));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-movel[hidden] { display: none; }
.menu-movel ul { padding-block: var(--e-xs); }
.menu-movel a:not(.btn) {
  display: block;
  padding: .95rem .25rem;
  font-size: var(--txt-1);
  font-weight: 500;
  text-decoration: none;
  color: var(--texto);
  border-block-end: 1px solid var(--linha);
}
.menu-movel a:not(.btn):hover { color: var(--malva); }
.menu-movel .btn { margin-block: var(--e-s) var(--e-m); }

/* ═══════════════ 7. HERO ═══════════════ */
.hero {
  position: relative;
  padding-block: calc(var(--altura-cabecalho) + var(--e-l)) var(--secao-y);
  background: var(--fundo);
  overflow: clip;
}
/* Campo suave atrás da foto, ancorado ao canto superior direito. */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -18%;
  inline-size: min(72vw, 46rem);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, var(--fundo-bloco) 0%, rgb(243 232 228 / 0) 68%);
  pointer-events: none;
}

.hero__interno {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--e-l);
  align-items: center;
}
@media (min-width: 56rem) {
  .hero__interno { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--e-xl); }
}

.hero h1 { max-inline-size: 17ch; }
.hero .texto-apoio { max-inline-size: 40rem; }

.hero__selos {
  display: grid;
  gap: var(--e-2xs);
  margin-block: var(--e-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.selo {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .95rem;
  font-size: var(--txt--1);
  line-height: 1.35;
  font-weight: 500;
  background: var(--fundo-bloco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
}
.selo svg { color: var(--malva); flex: none; }

.hero__midia { position: relative; inline-size: min(100%, 27rem); justify-self: center; }
.hero__midia img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--arco);
  box-shadow: var(--sombra-g);
}
/* Painel deslocado atrás da foto: só onde há folga lateral para ele. */
.hero__midia::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.75rem -1.75rem -1.75rem 1.75rem;
  background: var(--fundo-bloco);
  border: 1px solid var(--linha);
  border-radius: var(--arco);
  pointer-events: none;
}
.hero__midia img { position: relative; z-index: 1; }

.estrelas { color: var(--dourado); letter-spacing: 2px; flex: none; }

/* Telefone deitado: o hero não pode consumir várias telas de altura. */
@media (max-height: 30rem) and (orientation: landscape) {
  .hero { padding-block: calc(var(--altura-cabecalho) + var(--e-s)) var(--e-l); }
  .hero__midia { inline-size: min(100%, 18rem); }
}

/* ═══════════════ 8. FAIXA DE CREDENCIAIS ═══════════════ */
.credenciais { background: var(--cacau); color: var(--texto-claro); padding-block: var(--e-l); }
.credenciais__grid {
  display: grid;
  gap: var(--e-m) var(--e-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.credencial__rotulo {
  margin: 0 0 .2rem;
  font-size: var(--txt--2);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--champanhe);
}
.credencial__valor { margin: 0; font-size: var(--txt--1); line-height: 1.45; color: #fff; }

/* ═══════════════ 9. CARDS ═══════════════ */
.card {
  padding: var(--e-m);
  background: var(--fundo-bloco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-m);
  border-color: var(--linha-forte);
}
.card h3 { font-size: var(--txt-1); margin-block-end: .35em; }
.card p  { color: var(--texto-apoio); font-size: var(--txt--1); }

.card__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.9rem; block-size: 2.9rem;
  margin-block-end: var(--e-xs);
  color: var(--malva);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
}

/* No celular os cards viram ícone-ao-lado: nove blocos empilhados encurtam
   bastante a rolagem. A partir de 40rem volta o ícone acima, mais arejado. */
@media (max-width: 39.999rem) {
  .card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--e-s);
    align-items: start;
    padding: var(--e-s);
  }
  /* Todo o conteúdo vai para a coluna 2, independentemente de quantos
     parágrafos o card tenha — com `span` o auto-placement devolveria os
     filhos extras para a coluna 1 e estouraria a largura. */
  .card > :not(.card__icone) { grid-column: 2; }
  .card__icone {
    grid-column: 1; grid-row: 1;
    margin-block-end: 0;
    inline-size: 2.5rem; block-size: 2.5rem;
  }
  .card h3 { align-self: center; margin-block-end: .2em; }
}

.secao--alt .card, .secao--fundo .card { background: var(--fundo-bloco); }
.secao--bloco .card { background: var(--branco); }
.secao--malva .card {
  background: rgb(255 255 255 / .07);
  border-color: rgb(255 255 255 / .16);
}
.secao--malva .card p { color: var(--texto-claro-2); }
.secao--malva .card__icone {
  background: rgb(255 255 255 / .1);
  border-color: rgb(255 255 255 / .2);
  color: #fff;
}

.nota-fechamento {
  max-inline-size: 48rem;
  margin: var(--e-l) auto 0;
  padding: var(--e-m) var(--e-l);
  text-align: center;
  font-size: var(--txt-1);
  color: var(--texto-apoio);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-inline-start: 4px solid var(--dourado);
  border-radius: var(--raio-m);
}

/* ═══════════════ 10. MOLDURAS DE MÍDIA ═══════════════ */
.moldura { position: relative; inline-size: min(100%, 27rem); margin-inline: auto; }
.moldura img {
  inline-size: 100%;
  object-fit: cover;
  border-radius: var(--arco);
  box-shadow: var(--sombra-g);
}
.moldura::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.75rem -1.75rem -1.75rem 1.75rem;
  background: var(--fundo-bloco);
  border: 1px solid var(--linha);
  border-radius: var(--arco);
  pointer-events: none;
}
.moldura img { position: relative; z-index: 1; }
.moldura--espelhada::after { inset: 1.75rem 1.75rem -1.75rem -1.75rem; }
/* Sobre fundo colorido o painel some e volta o contorno. */
.secao--bloco .moldura::after { background: var(--branco); }
.cta-final .moldura::after { background: transparent; border-color: rgb(255 255 255 / .35); }

/* Sem folga lateral, o contorno deslocado sairia da tela. */
@media (max-width: 40rem) {
  .hero__midia::after, .moldura::after { display: none; }
}

/* ═══════════════ 11. LISTA COM MARCADOR ═══════════════ */
.lista-check {
  display: grid;
  gap: var(--e-2xs) var(--e-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.lista-check li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
  font-size: var(--txt--1);
  line-height: 1.5;
  padding-block: .3rem;
}
.lista-check svg { margin-block-start: .3em; color: var(--bronze); }
.secao--malva .lista-check svg { color: var(--champanhe); }

/* ═══════════════ 11b. ASSINATURA, CITAÇÃO E FAMÍLIA ═══════════════ */
/* Nome + registro com um fio dourado à esquerda: assina o texto em primeira pessoa. */
.assinatura {
  display: grid;
  gap: .15rem;
  margin-block: var(--e-m) 0;
  padding-inline-start: var(--e-s);
  border-inline-start: 2px solid var(--dourado);
}
.assinatura__nome {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-1);
  line-height: 1.2;
  color: var(--texto);
}
.assinatura__registro {
  font-size: var(--txt--2);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-apoio);
}
.assinatura--claro { border-color: var(--champanhe); }
.assinatura--claro .assinatura__nome { color: #fff; }
.assinatura--claro .assinatura__registro { color: var(--texto-claro-2); }

.citacao {
  margin: var(--e-m) 0 0;
  padding: var(--e-s) var(--e-m);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-2);
  line-height: 1.3;
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-inline-start: 3px solid var(--dourado);
  border-radius: var(--raio-m);
}

.familia {
  display: grid;
  gap: var(--e-l);
  align-items: start;
}
@media (min-width: 56rem) {
  .familia { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--e-xl); }
  .familia__titulo { position: sticky; inset-block-start: calc(var(--altura-cabecalho) + var(--e-m)); }
}
.titulo--citacao { font-size: var(--txt-4); line-height: 1.1; font-weight: 400; }

/* ---- Motivos (por que famílias escolhem) ---- */
.motivos {
  display: grid;
  gap: var(--e-2xs);
  margin-block-start: var(--e-m);
}
.motivo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-s);
  align-items: start;
  padding: var(--e-s) var(--e-m) var(--e-s) var(--e-s);
  background: var(--fundo-bloco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
}
.motivo h3 { font-size: var(--txt-1); margin-block-end: .15em; }
.motivo p  { color: var(--texto-apoio); font-size: var(--txt--1); line-height: 1.5; }
.motivo__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.6rem; block-size: 2.6rem;
  color: var(--bronze);
  background: var(--branco);
  border: 1px solid rgb(184 149 95 / .45);
  border-radius: 50%;
}

.cta-final__contato { margin-block-start: var(--e-s); font-size: var(--txt--1); }

/* ═══════════════ 12. ETAPAS ═══════════════ */
.etapas { max-inline-size: 48rem; margin-inline: auto; }
.etapa {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-s);
  padding-block-end: var(--e-l);
}
.etapa:last-child { padding-block-end: 0; }
.etapa::before {
  content: "";
  position: absolute;
  inset-block: 3.4rem 0;
  inset-inline-start: 1.6rem;
  inline-size: 2px;
  background: linear-gradient(var(--linha-forte), var(--linha));
}
.etapa:last-child::before { display: none; }

.etapa__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem; block-size: 3.25rem;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-1);
  color: #fff;
  background: var(--malva);
  border-radius: 50%;
}
.etapa:last-child .etapa__numero { background: var(--bronze); }
.etapa h3 { font-size: var(--txt-1); margin-block: .55rem .2rem; }
.etapa p  { color: var(--texto-apoio); font-size: var(--txt--1); }

/* ═══════════════ 13. PROVA SOCIAL ═══════════════ */
.google-card {
  max-inline-size: 36rem;
  margin-inline: auto;
  padding: var(--e-l) var(--e-m);
  text-align: center;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-m);
}
.google-card .estrelas { font-size: var(--txt-2); display: block; margin-block-end: .3rem; }
.google-card h3 { font-size: var(--txt-2); }
.google-card__meta { color: var(--texto-apoio); font-size: var(--txt--1); }
.google-card .btn { margin-block-start: var(--e-s); }

.stats {
  margin-block-start: var(--e-xl);
  display: grid;
  gap: var(--e-m) var(--e-s);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 64rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { text-align: center; }
.stat__numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-3);
  line-height: 1.05;
  color: var(--malva);
}
.stat__rotulo { margin: .3rem 0 0; font-size: var(--txt--1); color: var(--texto-apoio); }

/* ═══════════════ 14. FAQ ═══════════════ */
.faq { max-inline-size: 50rem; margin-inline: auto; }
.faq details {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  margin-block-end: var(--e-2xs);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.faq details[open] { border-color: var(--linha-forte); box-shadow: var(--sombra-s); }
.faq summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-s);
  padding: var(--e-s) var(--e-m);
  min-block-size: 3.5rem;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-1);
  color: var(--malva);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  inline-size: .7rem; block-size: .7rem;
  border-inline-end: 2px solid var(--bronze);
  border-block-end: 2px solid var(--bronze);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicao);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__resposta {
  padding: 0 var(--e-m) var(--e-m);
  color: var(--texto-apoio);
  font-size: var(--txt-0);
}

/* ═══════════════ 15. CTA FINAL + RODAPÉ ═══════════════ */
.cta-final {
  position: relative;
  padding-block: var(--e-2xl) var(--e-xl);
  overflow: clip;
  background: var(--cacau);
  color: var(--texto-claro);
}
.cta-final::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: -10%;
  inline-size: min(60vw, 34rem);
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 50%;
  pointer-events: none;
}
.cta-final__interno { position: relative; z-index: 1; }
.cta-final :is(h2, h3, strong) { color: #fff; }
.cta-final h2 { font-size: var(--txt-3); }
.cta-final .texto-apoio, .cta-final p { color: var(--texto-claro-2); }
.cta-final .eyebrow { color: #fff; }
.cta-final .eyebrow::before { background: rgb(255 255 255 / .6); }
.cta-final .destaque { color: var(--champanhe); }
.cta-final .moldura::after { border-color: rgb(255 255 255 / .35); }
.cta-final .moldura { inline-size: min(100%, 21rem); }

.rodape {
  padding-block: var(--e-xl) var(--e-m);
  background: var(--cacau);
  color: var(--texto-claro);
  border-block-start: 1px solid rgb(255 255 255 / .16);
}
/* Sobre o fundo cacau a marca precisa inverter: por herança o nome sairia
   em grafite e o símbolo em malva sobre fundo escuro. */
.marca--rodape { color: #fff; margin-block-end: var(--e-s); }
.marca--rodape .marca__nome { color: #fff; }

.rodape h3 { font-size: var(--txt-0); margin-block-end: var(--e-xs); }
.rodape p { font-size: var(--txt--1); margin-block-end: .35rem; color: var(--texto-claro-2); }
.rodape a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.rodape a:hover { color: var(--champanhe); }
.rodape__grid {
  display: grid;
  gap: var(--e-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-block-end: var(--e-l);
}
@media (min-width: 48rem) { .rodape__grid { grid-template-columns: 1.6fr 1fr 1fr; } }

.registro {
  display: inline-block;
  margin-block-start: var(--e-s);
  padding: .85rem 1.15rem;
  font-size: var(--txt--2);
  line-height: 1.9;
  color: #fff;
  background: rgb(255 255 255 / .09);
  border-radius: var(--raio-s);
}

.rodape__base {
  padding-block-start: var(--e-m);
  border-block-start: 1px solid rgb(255 255 255 / .16);
  text-align: center;
  font-size: var(--txt--2);
  color: var(--texto-claro-2);
}

/* ═══════════════ 16. CTAs PERSISTENTES ═══════════════ */
/* Abaixo de 68rem a navegação (e seu CTA) está no menu recolhido: entra a
   barra fixa. A partir daí, o CTA do cabeçalho já está sempre visível e
   basta o botão flutuante. */
.whats-flutuante {
  position: fixed;
  inset-block-end: clamp(1rem, 2.5vw, 1.75rem);
  inset-inline-end: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 3.75rem; block-size: 3.75rem;
  background: var(--bronze);
  border-radius: 50%;
  box-shadow: var(--sombra-cta);
  transition: transform var(--transicao), background-color var(--transicao);
}
.whats-flutuante:hover { transform: scale(1.07); background: var(--bronze-hover); }
.whats-flutuante svg { inline-size: 1.9rem; block-size: 1.9rem; fill: #fff; }
@media (min-width: 68rem) { .whats-flutuante { display: flex; } }

.barra-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: 80;
  display: flex;
  gap: var(--e-2xs);
  padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));
  background: rgb(251 247 244 / .97);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--linha);
  box-shadow: 0 -6px 24px rgb(var(--malva-tinta) / .12);
  transform: translateY(110%);
  transition: transform 300ms ease;
}
.barra-cta.is-visivel { transform: translateY(0); }
.barra-cta .btn { flex: 1; min-block-size: 3rem; padding-inline: var(--e-s); }
@media (min-width: 68rem) { .barra-cta { display: none; } }
@media (max-width: 67.999rem) { body { padding-block-end: 4.75rem; } }

/* ═══════════════ 17. MOVIMENTO ═══════════════ */
/* O estado oculto só existe com JS ativo (classe .js posta no <head>): sem
   JS — ou para um rastreador que não executa scripts — tudo fica visível. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 650ms ease-out, transform 650ms ease-out;
}
.js .reveal.is-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .whats-flutuante:hover { transform: none; }
}

/* Modo de alto contraste do sistema: reforça limites e desliga transparências. */
@media (prefers-contrast: more) {
  :root { --linha: rgb(var(--malva-tinta) / .45); --linha-forte: var(--malva); --linha-btn: var(--malva); }
  .cabecalho, .barra-cta { background: var(--fundo); backdrop-filter: none; }
  .card, .faq details, .selo { border-width: 2px; }
  .texto-apoio, .card p, .stat__rotulo, .faq__resposta { color: var(--texto); }
}

/* ═══════════════ 18. IMPRESSÃO ═══════════════ */
@media print {
  .cabecalho, .barra-cta, .whats-flutuante, .menu-movel, .pular-para-conteudo { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .secao { padding-block: 1rem; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}