/* ══════════════════════════════════════════════════════════════════════════
   SEÇÕES
   ══════════════════════════════════════════════════════════════════════ */

.secao { position: relative; padding: var(--secao-y) 0; }

.secao__cabecalho { max-width: 74ch; margin-bottom: clamp(44px, 5vw, 72px); }
.secao__cabecalho--centro { margin-inline: auto; text-align: center; }
.secao__cabecalho--centro .texto-apoio { margin-inline: auto; }
.secao__cabecalho--linha {
  max-width: none;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end;
}
.secao__cabecalho--linha .texto-apoio { margin-top: 0; }
@media (max-width: 860px) { .secao__cabecalho--linha { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────────────────────────
   01 · HERO
   ────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(120px, 16vh, 180px) 0 clamp(72px, 9vh, 120px);
  overflow: hidden;
}

.hero__atmosfera { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__grade {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(233,246,248,.028) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(233,246,248,.018) 0 1px, transparent 1px 96px);
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 78%);
}
/* Brasa: halo radial da cor de marca em mix-blend-mode screen sobre fundo
   escuro. É o que dá temperatura ao canto sem introduzir cor nova na paleta. */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora--1 {
  width: 52vw; height: 52vw; max-width: 760px; max-height: 760px;
  top: -18%; right: -8%;
  background: radial-gradient(circle at 35% 35%, rgba(41,182,209,.42), rgba(13,92,107,.18) 55%, transparent 72%);
  animation: derivar-a 26s var(--ease-suave) infinite alternate;
}
.aurora--2 {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  bottom: -22%; left: -12%;
  background: radial-gradient(circle at 60% 40%, rgba(17,107,124,.5), transparent 70%);
  animation: derivar-b 32s var(--ease-suave) infinite alternate;
}
.aurora--3 {
  width: 28vw; height: 28vw; max-width: 380px; max-height: 380px;
  top: 42%; left: 46%;
  background: radial-gradient(circle, rgba(201,162,74,.16), transparent 68%);
  animation: derivar-c 38s var(--ease-suave) infinite alternate;
}

.hero__interno {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.hero__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 300;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 144;
  text-wrap: balance;
}
.hero__titulo .linha { display: block; }
.hero__titulo em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(100deg, var(--ciano-suave) 8%, var(--ciano) 46%, var(--ouro-suave) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero__linha-fina {
  margin-top: 28px;
  font-size: var(--t-corpo-g);
  color: var(--texto-suave);
  max-width: 52ch;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.hero__selos {
  display: grid; gap: 12px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--linha);
}
.hero__selos li {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t-pequeno);
  color: var(--texto-fraco);
}
.hero__selos .icone { color: var(--ciano); opacity: .85; }

/* Retrato */
.hero__retrato { position: relative; }
.retrato-moldura { position: relative; }
.retrato-moldura__halo {
  position: absolute; inset: -8% -6% -4%;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(closest-side, rgba(41,182,209,.30), rgba(13,92,107,.10) 62%, transparent 78%);
  filter: blur(30px);
  animation: respirar-halo 9s var(--ease-suave) infinite alternate;
}
.retrato-moldura__varredura {
  position: absolute; inset: 0; z-index: 2;
  border-radius: var(--raio-xg);
  background: linear-gradient(160deg, transparent 34%, rgba(180,235,246,.10) 47%, rgba(255,255,255,.04) 52%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: varredura-retrato 11s var(--ease-saida) infinite;
  pointer-events: none;
}
.media--retrato { position: relative; z-index: 1; }
.media--retrato img {
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)) contrast(1.02) saturate(1.02);
}

.cartao-flutuante {
  position: absolute; z-index: 3;
  width: min(236px, 62%);
  padding: 18px 20px;
  border-radius: var(--raio-m);
  border: 1px solid var(--linha-forte);
  background: var(--superficie-vidro);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--sombra-media);
  display: grid; gap: 6px;
}
.cartao-flutuante strong {
  font-family: var(--fonte-display);
  font-size: 1.12rem; font-weight: 500; line-height: 1.16;
  color: var(--ciano-suave);
  font-variation-settings: 'opsz' 32;
}
.cartao-flutuante span { font-size: var(--t-micro); line-height: 1.5; color: var(--texto-suave); }
.cartao-flutuante--a { top: 12%; left: -8%; }
.cartao-flutuante--b { bottom: 9%; right: -6%; }

.hero__desca {
  position: absolute; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-fraco);
  transition: color var(--dur-base) var(--ease-saida);
}
.hero__desca:hover { color: var(--ciano); }
.hero__desca-trilho {
  position: relative;
  width: 22px; height: 34px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pilula);
  overflow: hidden;
}
.hero__desca-trilho span {
  position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; border-radius: 2px;
  background: var(--ciano);
  transform: translateX(-50%);
  animation: descer-cursor 2.4s var(--ease-saida) infinite;
}

@media (max-width: 1080px) {
  .cartao-flutuante--a { left: -2%; }
  .cartao-flutuante--b { right: -2%; }
}
@media (max-width: 860px) {
  .hero { min-height: auto; padding-top: 116px; }
  .hero__interno { grid-template-columns: 1fr; gap: 44px; }
  .hero__retrato { order: -1; max-width: 420px; margin-inline: auto; width: 100%; }
  .cartao-flutuante { width: min(210px, 66%); padding: 14px 16px; }
  .cartao-flutuante--a { top: 8%; left: -4%; }
  .cartao-flutuante--b { bottom: 4%; right: -4%; }
  .hero__desca { display: none; }
  .hero__selos { margin-top: 34px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   02 · FAIXA DE CREDIBILIDADE
   ────────────────────────────────────────────────────────────────────── */

.faixa-credibilidade {
  padding: 26px 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent);
}

/* ──────────────────────────────────────────────────────────────────────────
   03 · DOR
   ────────────────────────────────────────────────────────────────────── */

.grade-dor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .grade-dor { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grade-dor { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────────────────────────
   04 · VIRADA
   ────────────────────────────────────────────────────────────────────── */

.virada { border-top: 1px solid var(--linha); }
.virada__grade {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.virada__corpo { display: grid; gap: 20px; color: var(--texto-suave); font-size: var(--t-corpo-g); }
@media (max-width: 900px) { .virada__grade { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────────────────────────
   05 · SOBRE  (mundo claro)
   ────────────────────────────────────────────────────────────────────── */

.sobre__grade {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.sobre__midia { position: relative; }
.sobre__detalhe {
  position: absolute; right: -8%; bottom: -9%;
  width: 46%;
  border-radius: var(--raio-g);
  border: 6px solid var(--papel);
  box-shadow: var(--sombra-clara);
}
.sobre__credencial {
  font-size: var(--t-pequeno);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-600);
  margin-top: 14px;
  font-weight: 600;
}
.sobre__prosa { display: grid; gap: 18px; margin-top: 28px; color: var(--texto-suave); font-size: var(--t-corpo-g); }
.sobre .citacao { border-left-color: var(--ouro); }
.sobre .link-seta { margin-top: 30px; }

@media (max-width: 900px) {
  .sobre__grade { grid-template-columns: 1fr; }
  .sobre__midia { max-width: 460px; }
  .sobre__detalhe { right: -4%; width: 42%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   06 · SERVIÇOS  (mundo claro)
   ────────────────────────────────────────────────────────────────────── */

.servicos__destaques {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}
.cartao-servico {
  position: relative;
  border-radius: var(--raio-g);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-clara);
  transition: transform var(--dur-lenta) var(--ease-saida), box-shadow var(--dur-lenta) var(--ease-saida);
}
.cartao-servico:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -34px rgba(10,33,40,.36); }
.cartao-servico .media { border-radius: 0; }
.cartao-servico__corpo { padding: 28px; }
.cartao-servico__corpo h3 {
  font-family: var(--fonte-display);
  font-size: var(--t-h3); line-height: 1.14; font-weight: 400;
  letter-spacing: -.015em; font-variation-settings: 'opsz' 40;
  margin-bottom: 12px;
}
.cartao-servico__corpo p { color: var(--texto-suave); font-size: var(--t-pequeno); }
.cartao-servico--destaque { grid-row: span 1; }
.cartao-servico--destaque .cartao-servico__corpo { background: linear-gradient(180deg, rgba(41,182,209,.06), transparent); }

.grade-servicos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px) {
  .servicos__destaques, .grade-servicos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .servicos__destaques, .grade-servicos { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   07 · MÉTODO — o único momento pinado da página
   ────────────────────────────────────────────────────────────────────── */

.metodo { position: relative; background: var(--tinta); }
.metodo__trilho { position: relative; height: 400vh; }
.metodo__palco {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.metodo__palco::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 78% 40%, rgba(17,107,124,.22), transparent 66%);
  pointer-events: none;
}
.metodo__interno {
  position: relative;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  width: 100%;
}

.metodo__navegacao { display: grid; gap: 4px; margin-top: 40px; }
.metodo__navegacao button {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  padding: 12px 0;
  text-align: left;
  color: var(--texto-fraco);
  font-size: var(--t-pequeno);
  font-weight: 500;
  transition: color var(--dur-base) var(--ease-saida);
}
.metodo__trilha {
  position: relative;
  width: 64px; height: 2px; flex: none;
  background: var(--linha-forte);
  border-radius: 2px;
  overflow: hidden;
}
.metodo__trilha i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--teal-500), var(--ciano));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform .12s linear;
}
.metodo__navegacao li.esta-ativo button { color: var(--texto); }
.metodo__navegacao button:hover { color: var(--texto-suave); }

.metodo__quadros { position: relative; min-height: clamp(430px, 58vh, 560px); }
.metodo__passo {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr .92fr;
  gap: 34px;
  align-items: center;
  opacity: 0;
  transform: translateY(26px) scale(.985);
  filter: blur(6px);
  pointer-events: none;
  transition: opacity var(--dur-lenta) var(--ease-saida),
              transform var(--dur-lenta) var(--ease-saida),
              filter var(--dur-lenta) var(--ease-saida);
}
.metodo__passo.esta-ativo {
  opacity: 1; transform: none; filter: none;
  pointer-events: auto;
}
.metodo__numero {
  font-family: var(--fonte-display);
  font-size: clamp(3.4rem, 2rem + 5vw, 6rem);
  line-height: .82;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(41,182,209,.45);
  margin-bottom: 18px;
}
.metodo__passo h3 {
  font-family: var(--fonte-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  line-height: 1.1; letter-spacing: -.02em; font-weight: 400;
  font-variation-settings: 'opsz' 72;
  margin-bottom: 16px;
}
.metodo__passo > p { color: var(--texto-suave); max-width: 46ch; }
.metodo__passo .media {
  grid-row: 1 / span 4;
  grid-column: 2;
  align-self: stretch;
  height: 100%;
  aspect-ratio: auto;
  box-shadow: var(--sombra-alta);
}

@media (max-width: 900px) {
  .metodo__trilho { height: auto; }
  .metodo__palco { position: static; height: auto; padding: var(--secao-y) 0; }
  .metodo__interno { grid-template-columns: 1fr; }
  .metodo__navegacao { display: none; }
  .metodo__quadros { min-height: 0; display: grid; gap: 44px; margin-top: 40px; }
  .metodo__passo {
    position: static;
    opacity: 1; transform: none; filter: none; pointer-events: auto;
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 30px;
    border-top: 1px solid var(--linha);
  }
  .metodo__passo .media { grid-row: auto; grid-column: auto; height: auto; aspect-ratio: 4 / 3; }
  .metodo__numero { font-size: 3rem; margin-bottom: 10px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   08 · RESULTADOS
   ────────────────────────────────────────────────────────────────────── */

.resultados { border-top: 1px solid var(--linha); }
.grade-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.grade-numeros li {
  padding: 30px 28px;
  border-radius: var(--raio-g);
  border: 1px solid var(--linha);
  background: linear-gradient(170deg, rgba(255,255,255,.04), transparent 60%);
}
.grade-numeros strong {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.1rem);
  line-height: 1; font-weight: 300;
  letter-spacing: -.03em;
  color: var(--ciano-suave);
  margin-bottom: 14px;
  font-variation-settings: 'opsz' 96;
}
.grade-numeros span { font-size: var(--t-pequeno); color: var(--texto-suave); }
@media (max-width: 860px) { .grade-numeros { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────────────────────────
   09 · CONTEÚDO / DEPOIMENTOS
   ────────────────────────────────────────────────────────────────────── */

.carrossel { position: relative; }
.carrossel__controles {
  display: flex; align-items: center; gap: 12px;
  margin-top: 30px;
}
.carrossel__controles .link-seta { margin-left: auto; }

/* ──────────────────────────────────────────────────────────────────────────
   10 · DÚVIDAS
   ────────────────────────────────────────────────────────────────────── */

.duvidas { border-top: 1px solid var(--linha); }
.duvidas__grade {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.duvidas__cabecalho { position: sticky; top: 128px; }
.duvidas__cabecalho .botao { margin-top: 30px; }
@media (max-width: 900px) {
  .duvidas__grade { grid-template-columns: 1fr; }
  .duvidas__cabecalho { position: static; }
}

/* ──────────────────────────────────────────────────────────────────────────
   11 · LOCAIS
   ────────────────────────────────────────────────────────────────────── */

.locais { border-top: 1px solid var(--linha); }
.grade-locais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.cartao-local {
  display: flex; flex-direction: column;
  border-radius: var(--raio-g);
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--superficie);
  transition: transform var(--dur-lenta) var(--ease-saida), border-color var(--dur-base) var(--ease-saida);
}
.cartao-local:hover { transform: translateY(-4px); border-color: var(--linha-forte); }
.cartao-local .media { border-radius: 0; }
.cartao-local__corpo { padding: 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cartao-local__corpo h3 {
  font-family: var(--fonte-display);
  font-size: 1.42rem; line-height: 1.12; font-weight: 400;
  letter-spacing: -.015em; font-variation-settings: 'opsz' 48;
}
.cartao-local address { color: var(--texto-suave); font-size: var(--t-pequeno); }
.cartao-local__horario { font-size: var(--t-pequeno); color: var(--texto-fraco); }
.cartao-local__acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: auto; padding-top: 18px;
}
.cartao-local--online {
  background:
    linear-gradient(165deg, rgba(41,182,209,.12), transparent 58%),
    var(--superficie);
}
.cartao-local--online .cartao-local__corpo { justify-content: center; min-height: 320px; }
@media (max-width: 980px) { .grade-locais { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .grade-locais { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────────────────────────
   12 · CTA FINAL
   ────────────────────────────────────────────────────────────────────── */

.cta-final {
  position: relative;
  padding: clamp(88px, 12vh, 160px) 0;
  overflow: hidden;
  isolation: isolate;
}
.cta-final__midia { position: absolute; inset: 0; z-index: -1; }
.cta-final__midia .media { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.cta-final__midia .media img { opacity: .3; object-position: 70% 30%; }
.cta-final__midia::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--teal-900) 12%, rgba(10,76,88,.92) 46%, rgba(10,76,88,.55) 78%),
    radial-gradient(90% 120% at 10% 50%, rgba(5,22,26,.7), transparent 60%);
}
.cta-final__interno { position: relative; max-width: 72ch; }
.cta-final__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 42px; }
.cta-final__nota { font-size: var(--t-pequeno); color: rgba(233,246,248,.72); }

/* ══════════════════════════════════════════════════════════════════════════
   ANTES E DEPOIS · casos reais acompanhados em consultório
   ──────────────────────────────────────────────────────────────────────────
   Mundo ESCURO. Fica entre `resultados` (casos em texto) e `duvidas`.
   As imagens são material real do Instagram do médico — resolução de story,
   não de estúdio. Por isso o tratamento é deliberadamente sóbrio: moldura
   discreta, sem sombra dramática, sem zoom no hover. O assunto carrega a
   seção; o enfeite só denunciaria a origem do arquivo.
   ══════════════════════════════════════════════════════════════════════ */

.antes-depois__abertura {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(56px, 7vw, 96px);
}
@media (min-width: 900px) {
  .antes-depois__abertura { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
}

.antes-depois__par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* O quadro é a moldura de um registro real: borda fina, canto do sistema,
   e a etiqueta ANTES/DEPOIS ancorada no rodapé da imagem. */
.antes-depois__quadro {
  position: relative;
  margin: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  overflow: hidden;
  background: var(--superficie);
}
.antes-depois__quadro .media { border-radius: 0; }
.antes-depois__quadro .media img { object-position: center 22%; }

.antes-depois__etiqueta {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-sobrancelha);
  text-transform: uppercase;
  color: var(--texto);
  background: rgba(5, 22, 26, .72);
  border: 1px solid var(--linha-forte);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.antes-depois__etiqueta--depois {
  color: var(--tinta);
  background: var(--ciano-suave);
  border-color: transparent;
}

.antes-depois__fala {
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-titulo);
  color: var(--texto);
  margin: 0 0 18px;
}
.antes-depois__fala em { font-style: italic; color: var(--ciano-suave); }

.antes-depois__assinatura {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: var(--t-pequeno);
  color: var(--texto-fraco);
}
.antes-depois__assinatura::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--linha-forte);
  flex: none;
}

/* ── Grade de casos ─────────────────────────────────────────────────────
   Cada caso é UMA imagem já composta (o card que o médico publicou), não
   um par. Tratar como par duplicaria a moldura e brigaria com a arte dele. */
.antes-depois__grade {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}
@media (min-width: 760px) {
  .antes-depois__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.antes-depois__caso {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g, var(--raio-m));
  overflow: hidden;
  background: var(--superficie);
  transition: border-color .4s ease, transform .4s ease;
}
.antes-depois__caso:hover {
  border-color: var(--linha-forte);
  transform: translateY(-4px);
}
.antes-depois__caso .media { border-radius: 0; aspect-ratio: auto; }
.antes-depois__caso .media img { height: auto; }

.antes-depois__caso-corpo { padding: 26px 26px 30px; }
.antes-depois__caso-corpo h3 {
  font-family: var(--fonte-display);
  font-size: 1.22rem;
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-titulo);
  color: var(--texto);
  margin-bottom: 8px;
}
.antes-depois__caso-corpo p {
  font-size: var(--t-pequeno);
  line-height: var(--lh-corpo);
  color: var(--texto-suave);
}
.antes-depois__caso-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.antes-depois__numero {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: var(--ciano-fraco);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ciano-suave);
}

/* O aviso desta seção é mais pesado que o das outras: aqui existem pessoas
   identificáveis e números de peso em quadro. */
.antes-depois .aviso-legal { margin-top: clamp(40px, 5vw, 64px); }

/* ══════════════════════════════════════════════════════════════════════════
   PROTOCOLOS · formatos de acompanhamento
   ──────────────────────────────────────────────────────────────────────────
   Mundo ESCURO. Fica entre `metodo` (como funciona) e `resultados` (o que deu).
   Decisão de conteúdo: o site NÃO divulga preço — é o cliente quem define isso.
   Por isso a seção termina em conversa (WhatsApp), não em tabela de valores.
   ══════════════════════════════════════════════════════════════════════ */

.protocolos__grade {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (min-width: 760px) {
  .protocolos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.protocolos__cartao {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 40px);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g, var(--raio-m));
  background: var(--superficie);
  transition: border-color .4s ease, transform .4s ease;
}
.protocolos__cartao:hover { border-color: var(--linha-forte); transform: translateY(-4px); }

.protocolos__cartao h3 {
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-titulo);
  color: var(--texto);
  margin-bottom: 10px;
}
.protocolos__cartao > p {
  font-size: var(--t-pequeno);
  line-height: var(--lh-corpo);
  color: var(--texto-suave);
}

/* As durações são a informação dura da seção — ganham peso tipográfico
   próprio, não viram bullet perdido no meio do parágrafo. */
.protocolos__duracoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
}
.protocolos__duracao {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: var(--ciano-fraco);
  font-size: var(--t-pequeno);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ciano-suave);
  white-space: nowrap;
}

.protocolos__inclui {
  padding: clamp(28px, 3.4vw, 40px);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g, var(--raio-m));
  background: var(--superficie-vidro);
}
.protocolos__inclui h3 {
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-titulo);
  color: var(--texto);
  margin-bottom: 22px;
}
.protocolos__lista {
  display: grid;
  gap: 14px 32px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
@media (min-width: 700px)  { .protocolos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .protocolos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.protocolos__lista li {
  position: relative;
  padding-left: 26px;
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-suave);
}
/* Marcador de check desenhado em CSS — evita mais um SVG repetido no HTML. */
.protocolos__lista li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .58em;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--ciano);
  border-bottom: 1.6px solid var(--ciano);
  transform: rotate(-45deg);
}

.protocolos__nota {
  padding-top: 22px;
  border-top: 1px solid var(--linha);
  font-size: var(--t-pequeno);
  line-height: var(--lh-corpo);
  color: var(--texto-fraco);
}
.protocolos__nota strong { color: var(--texto-suave); font-weight: 600; }

.protocolos__fecho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: clamp(32px, 4vw, 48px);
}
.protocolos__fecho p {
  font-size: var(--t-pequeno);
  line-height: var(--lh-corpo);
  color: var(--texto-fraco);
  max-width: 46ch;
}


/* ═══════════════════════════════════════════════════════════════════════
   GUARDA — cabelo, pele, unha e fadiga
   Duas colunas no desktop: o mecanismo à esquerda explica POR QUE acontece, os
   quatro cartões à direita dizem O QUE é feito. Empilha no mobile com o
   mecanismo primeiro — sem entender a causa, a lista vira propaganda.
   ═════════════════════════════════════════════════════════════════════ */
.guarda__grade {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 980px) {
  .guarda__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.guarda__mecanismo p {
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-suave);
  max-width: 52ch;
}
.guarda__mecanismo p + p { margin-top: 18px; }

.guarda__lista {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 620px) {
  .guarda__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.guarda__lista li {
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--superficie-vidro);
  transition: border-color var(--t-medio, .3s) ease, transform var(--t-medio, .3s) ease;
}
.guarda__lista li:hover {
  border-color: var(--linha-forte);
  transform: translateY(-3px);
}

.guarda__lista h3 {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.35;
  color: var(--texto);
}
/* Mesmo check em CSS da lista de protocolos — um só vocabulário de marcador. */
.guarda__lista h3::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .5em;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--ciano);
  border-bottom: 1.6px solid var(--ciano);
  transform: rotate(-45deg);
}

.guarda__lista p {
  padding-left: 26px;
  font-size: var(--t-pequeno);
  line-height: var(--lh-corpo);
  color: var(--texto-fraco);
}

@media (prefers-reduced-motion: reduce) {
  .guarda__lista li { transition: none; }
  .guarda__lista li:hover { transform: none; }
}