/* ══════════════════════════════════════════════════════════
   Dr. Lucas Andrade · SEÇÃO 6 — Resultados / Prova social (converte)
   Prova em NARRATIVA, com ética e discrição. Sem métrica de vaidade,
   sem catálogo. Placeholders nunca são exibidos como prova real.
   ══════════════════════════════════════════════════════════ */

.results {
  position: relative;
  background: #F6F2EA; /* novo capítulo, distinto sem virar "seção branca" */
  padding: 160px 0;
}
.results__inner {
  width: 88%;
  max-width: 1320px;
  margin: 0 auto;
}

/* ═══════ BLOCO 1 · Cabeçalho + prova-âncora ═══════ */
.results__head { text-align: center; }
.results__eyebrow {
  font-family: var(--font-body);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold-text); margin: 0 0 20px;
}
.results__title {
  font-family: var(--font-display);
  font-weight: 500; font-size: clamp(34px, 4vw, 56px);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
  max-width: 900px; margin: 0 auto; text-wrap: balance;
}
.results__anchor { margin: clamp(44px, 6vh, 68px) auto 0; max-width: 720px; }
.results__anchor-lead {
  font-family: var(--font-body); font-size: clamp(15px, 1.4vw, 18px);
  color: var(--body); margin: 0 0 8px;
}
.results__anchor-figure {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38px, 5.4vw, 78px); line-height: 1.02;
  letter-spacing: -0.02em; color: var(--gold-text); margin: 0;
}
.results__anchor-figure span { font-style: italic; opacity: 0.7; }

/* ═══════ BLOCO 2 · Histórias (zigue-zague editorial) ═══════ */
/* As três histórias vivem em grade, lado a lado, e não mais empilhadas
   alternando esquerda/direita. Empilhadas com até 96px de respiro elas
   liam como três blocos soltos; juntas, leem como um conjunto de prova
   e rimam com a grade de avaliações logo abaixo. */
.results__stories {
  margin-top: clamp(72px, 10vh, 112px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: 1040px;
  margin-inline: auto;
  align-items: start;
}
.results__case { max-width: 100%; }
.results__case-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text);
  margin: 0 0 14px; padding-top: 16px; border-top: 1px solid rgba(167,141,105,.3);
  display: block;
}
.results__case-title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 1.7vw, 25px);
  line-height: 1.24; color: var(--ink); margin: 0 0 12px;
}
.results__case-text {
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.66;
  color: var(--body); margin: 0 0 14px;
}
.results__case-by {
  font-family: var(--font-body); font-size: 14px; letter-spacing: 0.04em;
  color: var(--muted); margin: 0;
}

/* ═══════ BLOCO 3 · Antes/depois curados (editorial) ═══════ */
.results__ba {
  margin-top: clamp(90px, 13vh, 150px);
}
.results__ba-head { text-align: center; margin-bottom: clamp(36px, 5vh, 56px); }
.results__ba-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-text); margin: 0;
}
.results__ba-grid {
  display: flex; flex-direction: column; gap: clamp(40px, 6vh, 72px);
  max-width: 980px; margin: 0 auto;
}
.results__ba-item { }
.results__ba-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.ba-frame {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-img); overflow: hidden;
  border: 1px solid rgba(44, 43, 41, 0.08);
  display: flex; align-items: center; justify-content: center;
  will-change: clip-path;
}
.ba-frame[data-tone="a"] { background: linear-gradient(160deg, #ece4d6, #e0d3bd); }
.ba-frame[data-tone="b"] { background: linear-gradient(160deg, #efe8db, #e6d9c2); }
.ba-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Com foto real a etiqueta sai do fluxo e flutua sobre a imagem, no canto
   inferior-esquerdo. Fundo creme quase opaco: sobre pele clara um pill
   translucido ficaria ilegivel. */
.ba-tag {
  position: absolute;
  left: clamp(10px, 1.2vw, 14px);
  bottom: clamp(10px, 1.2vw, 14px);
  z-index: 2;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--btn-dark);
  border: 1px solid rgba(44, 43, 41, 0.10); border-radius: 999px;
  padding: 6px 14px; background: rgba(248, 245, 239, 0.94);
}
.results__ba-caption {
  font-family: var(--font-body); font-size: 14.5px; color: var(--body);
  text-align: center; margin: 16px 0 0;
}
.results__ba-caption b { color: var(--ink); font-weight: 600; }
.results__ba-note {
  font-family: var(--font-body); font-size: 13px; font-style: italic;
  color: var(--muted); text-align: center;
  margin: clamp(28px, 4vh, 44px) auto 0; max-width: 620px;
}

/* ═══════ BLOCO 4 · Avaliações Google + CTA ═══════ */
.results__reviews { margin-top: clamp(90px, 13vh, 150px); }
.results__reviews-label {
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-text);
  text-align: center; margin: 0 0 30px;
}
.results__reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1040px; margin: 0 auto;
}
.review-card {
  background: #FFFFFF; border: 1px solid rgba(44, 43, 41, 0.06);
  border-radius: 14px; padding: 28px 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.review-stars { display: flex; gap: 4px; }
.review-stars svg { width: 16px; height: 16px; stroke: rgba(44,43,41,.28); fill: none; stroke-width: 1.4; }
/* estrelas cheias: só quando a nota agregada é real e verificável */
.review-stars--filled svg { stroke: none; fill: var(--gold); }
.review-google {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  font-family: var(--font-body); font-size: 12.5px; color: var(--muted);
}
.review-google svg { width: 15px; height: 15px; color: #9aa0a6; }
/* estado real (quando integrado): aspas + texto + nome */
.review-quote { font-family: var(--font-display); font-size: 18px; line-height: 1.4; color: var(--ink); margin: 0; }
.review-name { font-family: var(--font-body); font-size: 13px; color: var(--body); margin: 0; }
.results__reviews-note {
  font-family: var(--font-body); font-size: 13px; font-style: italic;
  color: var(--muted); text-align: center;
  margin: 26px auto 0; max-width: 640px;
}

/* Localização no Google — painel discreto entre a prova social e o CTA */
.results__gmb {
  display: grid; grid-template-columns: clamp(200px, 26vw, 300px) 1fr;
  align-items: stretch; gap: clamp(26px, 3.4vw, 44px);
  /* mesma largura dos cards de avaliação acima: o painel fecha o bloco */
  max-width: 1040px; margin: clamp(30px, 4vh, 48px) auto 0;
  background: #FFFFFF; border: 1px solid rgba(44, 43, 41, 0.06);
  border-radius: 14px; padding: clamp(22px, 2.6vw, 30px) clamp(26px, 3.2vw, 38px);
}
.results__gmb-map {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  min-height: clamp(150px, 17vw, 210px);
  border-radius: var(--radius-img);
  /* Superfície de repouso, enquanto o mapa não foi consentido. Creme em vez de
     cinza de esqueleto: aqui não há nada carregando, é um convite. */
  background: var(--creme-b);
}
/* O filtro vale só depois do mapa existir. No estado de repouso ele
   dessaturaria o próprio botão, e o dourado do alfinete viraria cinza. */
.results__gmb-map[data-map-loaded] {
  /* dessaturado e aquecido para nunca competir com a paleta da marca */
  filter: grayscale(88%) sepia(10%) brightness(1.04) contrast(0.94);
  background: none;
}
.results__gmb-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none; /* ilustrativo; a ação real é o link ao lado */
}

/* ─── Convite para carregar o mapa (LGPD) ───
   O iframe do Google não nasce na página porque entregaria o IP do visitante
   antes de qualquer consentimento. Este botão é o consentimento pontual.
   Ver o comentário no index.html e a função loadMap em js/consent.js. */
.results__gmb-consent {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 14px; border: 0; cursor: pointer;
  background: none; text-align: center;
  font-family: var(--font-body);
  transition: background-color 0.4s ease;
}
.results__gmb-consent-icon {
  width: 22px; height: 22px; fill: none;
  stroke: var(--gold); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.results__gmb-consent-label { font-size: 14px; color: var(--gold-text); }
.results__gmb-consent-note { font-size: 11.5px; color: var(--muted); }
.results__gmb-consent:hover { background: rgba(167, 141, 103, 0.07); }
.results__gmb-consent:hover .results__gmb-consent-icon { transform: translateY(-2px); }
.results__gmb-consent:focus-visible {
  outline: 2px solid var(--gold); outline-offset: -4px;
  border-radius: var(--radius-img);
}

/* Sem JS o botão não tem quem o atenda, e botão morto é pior que ausência.
   O mapa é reforço do endereço que está escrito ao lado e no rodapé, então
   esconder não custa conteúdo nenhum: o painel só vira uma coluna. */
html:not(.js) .results__gmb { grid-template-columns: 1fr; }
html:not(.js) .results__gmb-map { display: none; }
/* o mapa agora estica; o texto se centraliza contra ele */
.results__gmb-info { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.results__gmb-rating { display: flex; align-items: center; gap: 7px; }
.results__gmb-stars { display: flex; gap: 2px; }
.results__gmb-stars svg { width: 13px; height: 13px; fill: var(--gold); }
.results__gmb-score { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--ink); }
.results__gmb-text {
  font-family: var(--font-body); font-size: 13.5px; color: var(--muted); margin: 0;
}
.results__gmb-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 6px;
  font-family: var(--font-body); font-size: 14.5px; color: var(--gold-text);
  transition: gap 0.35s ease;
}
.results__gmb-link .results__gmb-arrow { transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.2, 1); }
.results__gmb-link:hover { gap: 14px; }
.results__gmb-link:hover .results__gmb-arrow { transform: translateX(4px); }
.results__gmb-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* CTA final */
.results__cta {
  text-align: center; margin-top: clamp(80px, 12vh, 128px);
}
.results__cta-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; color: var(--ink);
  max-width: 640px; margin: 0 auto 32px; text-wrap: balance;
}
.results__cta-btn { font-size: 16px; }

/* ═══════ Responsivo ═══════ */
@media (max-width: 860px) {
  .results { padding: 100px 0; }
  /* uma coluna só, com o mesmo respiro dos cards de avaliação */
  .results__stories { grid-template-columns: 1fr; max-width: 460px; gap: 34px; }
  .results__case { max-width: 100%; }
  .results__reviews-grid { grid-template-columns: 1fr; max-width: 460px; }
  /* empilha e acompanha a largura dos cards de avaliação */
  .results__gmb {
    grid-template-columns: 1fr; max-width: 460px;
    gap: 20px; text-align: center;
  }
  .results__gmb-map { aspect-ratio: 16 / 9; min-height: 0; }
  .results__gmb-rating { justify-content: center; }
  .results__gmb-link { justify-content: center; }
}
@media (max-width: 560px) {
  .results__ba-pair { gap: 12px; }
  .ba-tag { padding: 5px 12px; font-size: 11px; }
}

/* ═══════ Acessibilidade ═══════ */
@media (prefers-reduced-motion: reduce) {
  .ba-frame { clip-path: none !important; }
  /* O convite do mapa continua respondendo ao hover, mas pela cor de fundo,
     que não é movimento. O alfinete para de subir. */
  .results__gmb-consent,
  .results__gmb-consent-icon { transition: none; }
  .results__gmb-consent:hover .results__gmb-consent-icon { transform: none; }
}