/* ==========================================================================
   Mapa Fitness — Landing Page
   Tokens e componentes conforme SPECS-Landing-Page-v1.md (Seções 3 e 4).
   Paleta, fontes e regras de "não fazer" da marca são fixas — o refinamento
   abaixo trabalha composição, profundidade e movimento em cima delas.
   ========================================================================== */

:root {
  /* Cores — herdadas da identidade visual (Seção 3.1), sem alteração */
  --bg-base: #FAF9F6;
  --ink: #1C1B19;
  --ink-secondary: #8A8478;
  --brand: #4A2545;
  --brand-hover: #34192F;
  --brand-light: #8E5677;
  --accent: #B8862E;        /* dourado sobre fundo claro — ícones/destaques ≥24px, nunca corpo de texto */
  --accent-light: #E8C878;  /* dourado somente sobre brand/ink */
  --border: #E8E4DE;

  /* Extensões exclusivas da landing */
  --success: #2C6E49;
  --danger: #A63D26;

  /* Tipografia */
  --font-corpo: 'Manrope', sans-serif;
  --font-wordmark: 'Plus Jakarta Sans', sans-serif;

  /* Espaçamento — escala 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  --raio-card: 16px;
  --raio-botao: 12px;
  --sombra-card: 0 4px 20px rgba(28, 27, 25, 0.08);
  --sombra-card-hover: 0 16px 40px rgba(28, 27, 25, 0.14);
  --sombra-preco: 0 24px 60px -12px rgba(74, 37, 69, 0.35);
  --sombra-celular: 0 30px 60px -15px rgba(28, 27, 25, 0.35);

  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);

  /* Gradientes premium */
  --gradient-botao: linear-gradient(135deg, #5A2E55 0%, #4A2545 50%, #3D1E3A 100%);
  --gradient-botao-hover: linear-gradient(135deg, #4A2545 0%, #34192F 100%);
  --gradient-accent-line: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  --gradient-brand-section: linear-gradient(160deg, #4A2545 0%, #3D1E3A 40%, #2E1428 100%);
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--ink);
  font-family: var(--font-corpo);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

::selection {
  background: var(--brand);
  color: var(--bg-base);
}

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
  position: relative;
}

/* ---------- Textura de grão — camada fixa, quase imperceptível ---------- */
.grao {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografia ---------- */
h1, h2, h3 { margin: 0; font-family: var(--font-wordmark); font-weight: 700; line-height: 1.15; }

h1, .h1 {
  font-size: clamp(26px, 6.2vw, 50px);
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 700;
}

/* Destaque no H1 — marca-texto atrás da frase, não linha embaixo (mais premium
   que o traço à mão usado antes). Some cresce da esquerda pra direita ao carregar
   a página; prefers-reduced-motion já cobre isso via regra global do arquivo. */
.destaque {
  position: relative;
  white-space: nowrap;
  z-index: 0;
}
.destaque::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -0.12em;
  right: -0.12em;
  bottom: 0.02em;
  height: 0.4em;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(184, 134, 46, 0.24) 0%, rgba(184, 134, 46, 0.34) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  animation: destaque-entrada 800ms var(--ease-saida) 500ms both;
}
@keyframes destaque-entrada {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.titulo-secao {
  font-size: clamp(23px, 5.4vw, 40px);
  text-align: center;
  margin-bottom: var(--sp-8);
  letter-spacing: -0.01em;
  font-weight: 700;
}

.titulo-secao--sobre-brand { color: var(--bg-base); }

h3, .h3 { font-size: clamp(18px, 2vw, 20px); }

.corpo-largo { max-width: 65ch; }

/* Padrão da página: centralizado (Seção 3.2 — decisão da Aline, 19/08).
   Exceção "com critério": blocos de leitura/estrutura voltam pra esquerda
   (FAQ, passos da verificação, checklists) — ver overrides no fim de cada seção. */
p, li { text-align: center; }

/* ---------- Acessibilidade ---------- */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.titulo-secao--sobre-brand:focus-visible { outline-color: var(--accent-light); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .botao--primario::after { display: none; }
}

/* ---------- Cabeçalho ---------- */
.cabecalho {
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 20;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.cabecalho--scrolled {
  border-bottom-color: var(--border);
  /* Opacidade dobrada (04/09, pedido da Aline: "não parece que está com
     sombra suficiente") — era 0.05, mais fraca que QUALQUER outra sombra
     da página (--sombra-card usa 0.08). Agora fica visivelmente acima do
     conteúdo que rola por baixo, sem exagerar. */
  box-shadow: 0 4px 20px rgba(28, 27, 25, 0.12);
}
.cabecalho__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--ink);
}
.marca__logo {
  border-radius: 9px;
  box-shadow: 0 2px 6px rgba(74, 37, 69, 0.25);
}
.marca__wordmark {
  font-family: var(--font-wordmark);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 18px;
}

/* ---------- Blocos ---------- */
.bloco {
  padding-block: var(--sp-16);
  position: relative;
  z-index: 2;
}
@media (min-width: 1024px) {
  .bloco { padding-block: var(--sp-24); }
}

/* ---------- Ícones ---------- */
.icone { width: 24px; height: 24px; flex-shrink: 0; }
.icone--card {
  color: var(--brand);
  width: 22px;
  height: 22px;
  padding: 10px;
  background: rgba(74, 37, 69, 0.07);
  border-radius: 12px;
  margin-bottom: var(--sp-3);
  box-sizing: content-box;
}
.icone--seta { width: 18px; height: 18px; transition: transform 200ms var(--ease-saida); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding-inline: 32px;
  border-radius: var(--raio-botao);
  font-family: var(--font-corpo);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 200ms ease, transform 100ms ease, box-shadow 200ms ease;
}
.botao--primario {
  background: var(--gradient-botao);
  color: var(--bg-base);
  box-shadow: 0 8px 24px -8px rgba(74, 37, 69, 0.5);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.botao--primario::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
  transform: translateX(-100%);
  z-index: -1;
}
.botao--primario:hover {
  background: var(--gradient-botao-hover);
  box-shadow: 0 14px 32px -8px rgba(74, 37, 69, 0.6), 0 0 0 3px rgba(74, 37, 69, 0.1);
  transform: translateY(-2px);
}
.botao--primario:hover::after {
  animation: shimmer 700ms var(--ease-saida) forwards;
}
.botao--primario:active { transform: scale(.98); }
.botao--primario:hover .icone--seta { transform: translateX(3px); }

/* Respiração sutil só no CTA principal do topo — chama o olho sem parecer alerta/urgência */
@keyframes cta-respirar {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(74, 37, 69, 0.5); }
  50% { box-shadow: 0 10px 32px -6px rgba(74, 37, 69, 0.68), 0 0 0 6px rgba(74, 37, 69, 0.07); }
}
.bloco--topo .botao--primario {
  animation: cta-respirar 3.4s ease-in-out infinite;
}
.bloco--topo .botao--primario:hover {
  animation-play-state: paused;
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.botao--sobre-brand {
  background: var(--bg-base);
  color: var(--brand);
}
.botao--sobre-brand:hover { background: var(--accent-light); }
.botao--sobre-brand:active { transform: scale(.98); }
.botao--sobre-brand:hover .icone--seta { transform: translateX(3px); }

.botao--secundario {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  margin-top: var(--sp-8);
}
.botao--secundario:hover { background: rgba(74, 37, 69, 0.06); }
.botao--secundario:active { transform: scale(.98); }
.botao--secundario:hover .icone--seta { transform: translateX(3px); }

.botao--grande { width: 100%; max-width: 420px; }
@media (min-width: 640px) { .botao--grande { width: auto; } }

.botao--compacto { min-height: 44px; padding-inline: 20px; font-size: 15px; }

/* ---------- Selos (topo) — ícone acima do texto, 3 colunas ---------- */
.selos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  max-width: 420px;
  margin-inline: auto;
}
.selos__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-secondary);
  text-align: center;
}
.selos__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(74, 37, 69, 0.08);
  flex-shrink: 0;
}
.selos__item .icone { width: 20px; height: 20px; color: var(--brand); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-4);
}
/* ---------- 01 · Topo ---------- */
.bloco--topo {
  padding-top: var(--sp-12);
  background:
    radial-gradient(ellipse 600px 500px at 90% 15%, rgba(74, 37, 69, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 5% 85%, rgba(184, 134, 46, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 350px 350px at 40% 5%, rgba(142, 86, 119, 0.04) 0%, transparent 70%),
    var(--bg-base);
  overflow: hidden;
  position: relative;
}
/* Desde 19/08 o hero é 1 coluna só (texto), sempre centralizado — o mockup de
   celular que ocupava a segunda coluna deu lugar ao carrossel de looks full-bleed
   logo abaixo (ver .carrossel-looks). */
.topo__grid { max-width: 66ch; margin-inline: auto; }
.topo__texto { text-align: center; }
.topo__subtitulo {
  font-size: 17px;
  max-width: 54ch;
  margin: var(--sp-4) auto 0;
  color: var(--ink);
}
.topo__texto .botao { margin-top: var(--sp-6); }
/* Estatística de escala (04/09, a pedido da Aline) — substitui a antiga
   .topo__prova (13px cinza, discreta demais). Depois de rodar cartão
   flutuante e carimbo (ambos descartados), ela voltou pra ESTA versão: só
   texto (sem card/moldura), tamanho da rodada do #D0A753 que ela gostou,
   mas agora em degradê radial — dourado (#D0A753) no centro, roxo da marca
   (--brand) nos cantos externos (o oposto do degradê do card de Preço, que
   ia de ponta a ponta; aqui o roxo fica só nas bordas/cantos do texto). */
.topo__estatistica {
  margin: var(--sp-6) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.topo__estatistica-numero {
  font-family: var(--font-wordmark);
  font-weight: 800;
  /* Mesmo clamp do h1 (05/09, pedido da Aline) — era clamp(25px,6.5vw,32px). */
  font-size: clamp(26px, 6.2vw, 50px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.topo__estatistica-legenda {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
}
/* Quebras manuais do subtítulo (pedido da Aline, 20/08) — valem só no celular;
   a partir daqui o texto volta a quebrar naturalmente conforme o espaço. */
@media (min-width: 640px) {
  .quebra-mobile { display: none; }
}
/* Inverso da quebra-mobile — quebra manual que só aparece no desktop
   (pedido da Aline, 21/08: cada frase do fecho em 2 linhas lá, sem mexer
   no mobile que já quebra bem sozinho). */
.quebra-desktop { display: none; }
@media (min-width: 1024px) {
  .quebra-desktop { display: inline; }
}
.bloco--topo .selos { justify-content: center; }

/* ---------- Carrossel de looks (topo) — fita horizontal full-bleed, rolagem
   automática contínua. Substitui o mockup de iPhone (19/08, a pedido da Aline). ---------- */
.carrossel-looks { margin-top: var(--sp-12); }
.carrossel-looks__legenda {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-4);
}
.carrossel-looks__pista {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  cursor: grab;
  touch-action: pan-y; /* deixa o dedo rolar a página na vertical, mas libera o arraste horizontal pro JS */
  user-select: none;
  -webkit-user-select: none;
}
/* Arraste com o dedo/mouse (21/08, a pedido da Aline) — a rolagem automática
   continua rodando (agora via JS, ver iniciarCarrosselLooks em main.js), e a
   pessoa pode arrastar pra andar mais rápido a qualquer momento. */
.carrossel-looks__pista--arrastando {
  cursor: grabbing;
}

/* Dica visual de arraste (21/08, a pedido da Aline) — mãozinha translúcida que
   desliza de um lado pro outro por cima do carrossel, só pra ensinar que dá
   pra arrastar. Aparece uma vez quando o carrossel entra na tela e some
   sozinha (ver mostrarDicaArraste em main.js — por tempo ou no primeiro
   arraste de verdade, o que vier primeiro). Nunca atrapalha o toque:
   pointer-events: none. */
.carrossel-looks__dica {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px; /* era 52px — dica sumia perto das fotos maiores (pedido da Aline, 21/08) */
  height: 100px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s ease;
  filter: drop-shadow(0 4px 14px rgba(28, 27, 25, 0.45));
}
@media (min-width: 640px) {
  .carrossel-looks__dica { width: 130px; height: 130px; }
}
.carrossel-looks__dica svg {
  width: 100%;
  height: 100%;
  color: #FFFFFF; /* ícone de traço agora (era preenchido) — mesma família visual dos outros ícones do site */
  opacity: 0.9;
  transform: rotate(-10deg);
}
.carrossel-looks__dica--visivel {
  opacity: 1;
  animation: carrossel-dica-arraste 1.7s ease-in-out infinite;
}
@keyframes carrossel-dica-arraste {
  0%, 100% { transform: translate(calc(-50% + 34px), -50%); }
  50% { transform: translate(calc(-50% - 34px), -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .carrossel-looks__dica--visivel {
    animation: none;
    transform: translate(-50%, -50%);
  }
}
.carrossel-looks__trilho {
  display: flex;
  width: max-content;
  gap: var(--sp-3);
  padding-inline: var(--sp-3);
  will-change: transform;
}
.carrossel-looks__trilho img {
  height: 230px; /* era 168px — aumentado a pedido da Aline, 21/08 ("tá muito pequena as fotos") */
  width: auto;
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  flex-shrink: 0;
  -webkit-user-drag: none; /* evita o "fantasma" de arrastar a imagem em si */
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 640px) {
  .carrossel-looks__trilho img { height: 310px; } /* era 220px */
}
@media (min-width: 1024px) {
  .carrossel-looks__trilho img { height: 370px; } /* era 260px */
}

/* Palco: mockup 3D do celular — glow ambiente + perspectiva + vidro de tela,
   substitui o antigo bloco sólido deslocado (sem profundidade real). */
.palco-celular {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 340px; /* era 270px — aumentado a pedido da Aline, 21/08 ("ficou pequeno demais") */
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-12);
  perspective: 1600px;
}
@media (min-width: 1024px) {
  .palco-celular { max-width: 400px; }
}
/* Halo ambiente por trás do aparelho — sutil, só pra dar profundidade */
.palco-celular__glow {
  position: absolute;
  inset: 4% -18% 12% -18%;
  background:
    radial-gradient(closest-side, rgba(74, 37, 69, 0.32) 0%, rgba(74, 37, 69, 0) 72%);
  filter: blur(34px);
  z-index: 0;
  pointer-events: none;
}
.palco-celular__glow::after {
  content: '';
  position: absolute;
  inset: 24% -8% 14% 50%;
  background: radial-gradient(closest-side, rgba(184, 134, 46, 0.22) 0%, rgba(184, 134, 46, 0) 72%);
  filter: blur(30px);
}
/* Sombra de chão — ancora o aparelho, resolve o efeito "flutuando" */
.palco-celular::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: var(--sp-4);
  width: 74%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(20, 10, 20, 0.28) 0%, rgba(20, 10, 20, 0) 70%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}

/* Frame estilo iPhone — bezel fino tipo titânio, botões laterais reais,
   tela isolada num elemento próprio (item 2, 19/08: mockup antigo era grosseiro). */
.moldura-celular {
  position: relative;
  z-index: 1;
  /* Largura explícita (21/08) — sem isso, num flex column com
     align-items:center (não "stretch"), o tamanho dependia do conteúdo
     carregado (a imagem), e se o print demorasse/atrasasse pra carregar a
     moldura inteira colapsava pro tamanho do padding só. Com width:100% ela
     sempre preenche o .palco-celular (que já limita o max-width). */
  width: 100%;
  /* Proporção ajustada pra bater com o print cortado (1080x2200, pedido da
     Aline, 21/08) — antes era 9:19.5 (iPhone genérico), que sobrava respiro
     em cima/embaixo com o "contain" da imagem. Valor não é a proporção crua
     da imagem (1080/2200) porque a moldura tem 26px de respiro fixo (5px do
     .moldura-celular + 8px do .tela, dos dois lados) — esse valor já
     compensa esse respiro fixo pra a imagem quase preencher certinho. */
  aspect-ratio: 64 / 125;
  border-radius: 46px;
  padding: 5px;
  background: linear-gradient(155deg, #3a3a3f 0%, #1c1c1f 45%, #3a3a3f 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 40px 55px -28px rgba(20, 10, 20, 0.5),
    0 14px 24px -18px rgba(20, 10, 20, 0.45);
  transition: transform 500ms var(--ease-saida), box-shadow 500ms var(--ease-saida);
  /* Animação de flutuar removida (pedido da Aline, 21/08: "o celular fica se
     mexendo, deixe ele parado"). */
}
.palco-celular:hover .moldura-celular {
  transform: scale(1.015);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 50px 70px -28px rgba(20, 10, 20, 0.55),
    0 20px 30px -18px rgba(20, 10, 20, 0.5);
}

.moldura-celular__tela {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 41px;
  overflow: hidden;
  /* Respiro entre o print e a moldura (pedido da Aline, 21/08) — antes o
     print preenchia 100% edge-to-edge, o que aumentava o corte nas laterais
     pra caber na proporção do mockup. Fundo do respiro trocado pro off-white
     do próprio app (--bg-base, era gradiente escuro genérico de moldura)
     pra parecer parte do print, não uma borda separada. */
  background: var(--bg-base);
  padding: 8px;
  box-sizing: border-box;
}
.moldura-celular__video {
  width: 100%;
  height: 100%;
  /* "contain" em vez de "cover" (pedido da Aline, 21/08) — o print é
     proporcionalmente um pouco mais largo que o formato do celular, então
     "cover" cortava os ícones das pontas da barra de navegação (Início/
     Conta). Com "contain" a imagem inteira aparece, sem cortar nada; o
     respiro que sobra (se sobrar) usa o mesmo off-white do .tela, então
     não aparece como uma barra separada. */
  object-fit: contain;
  display: block;
  border-radius: 34px;
}
/* Reflexo de vidro cruzando a tela */
.moldura-celular__tela::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 20%, transparent 42%);
  z-index: 4;
  pointer-events: none;
}

/* Botões laterais — detalhe que faz o mockup ler como iPhone de verdade */
.moldura-celular__botao {
  position: absolute;
  background: linear-gradient(90deg, #2a2a2d 0%, #454549 50%, #2a2a2d 100%);
  z-index: 0;
}
.moldura-celular__botao--mudo { left: -3px; top: 19%; width: 3px; height: 4%; border-radius: 2px 0 0 2px; }
.moldura-celular__botao--vol-cima { left: -3px; top: 26%; width: 3px; height: 7%; border-radius: 2px 0 0 2px; }
.moldura-celular__botao--vol-baixo { left: -3px; top: 35%; width: 3px; height: 7%; border-radius: 2px 0 0 2px; }
.moldura-celular__botao--power { right: -3px; top: 27%; width: 3px; height: 10%; border-radius: 0 2px 2px 0; }

/* Celular: topo mais curto pra promessa + botão caberem rápido; mockup de celular
   (hoje na calculadora) também encolhe — regra genérica, não é só do topo. */
@media (max-width: 640px) {
  .bloco--topo { padding-top: var(--sp-8); }
  .palco-celular { max-width: 250px; padding-top: var(--sp-2); padding-bottom: var(--sp-8); } /* era 196px */
}

.placeholder-texto {
  display: block;
  color: var(--ink-secondary);
  font-style: italic;
  background: rgba(184, 134, 46, 0.08);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: var(--sp-3) var(--sp-4);
}
.placeholder-texto--brand {
  background: rgba(232, 200, 120, 0.12);
  border-color: var(--accent-light);
  color: rgba(250, 249, 246, 0.75);
}

/* ---------- 02 · Dor (bloco denso e escuro, 3 linhas centralizadas) ---------- */
.bloco--dor {
  background:
    radial-gradient(ellipse 520px 360px at 50% 0%, rgba(232, 200, 120, 0.08) 0%, transparent 70%),
    var(--gradient-brand-section);
  color: var(--bg-base);
  text-align: center;
}

/* Ícones de "jornada" (19/08) — pin no bloco de dor ("você está aqui"), bandeira
   na entrega ("seu destino") — substituem os eyebrows de texto que repetiam
   "Mapa Fitness" duas vezes seguidas. Só o símbolo, sem legenda. */
.icone-jornada {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-2);
}
.icone-jornada .icone {
  width: 24px;
  height: 24px;
  color: var(--accent-light);
}
.icone-jornada--grande .icone { width: 40px; height: 40px; }
.lista-dor {
  display: grid;
  gap: var(--sp-6);
  max-width: 600px;
  margin-inline: auto;
}
.lista-dor li {
  text-align: center;
  /* 15px fixo (era clamp(16px,2.4vw,20px), 05/09) — igualado ao padrão do
     resto da página; antes crescia até 20px em telas largas e destoava. */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(250, 249, 246, 0.92);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(250, 249, 246, 0.14);
}
.lista-dor li:first-child { border-top: none; padding-top: 0; }

/* ---------- 03 · Entrega ---------- */
.bloco--entrega {
  /* Trocado de #FFFFFF pra --bg-base em 04/09 (auditoria pedida pela
     Aline): os .card-beneficio DENTRO dessa seção também são brancos —
     com a seção de fundo branco também, os cards ficavam "achatados",
     sem contraste nenhum além da sombra. Em todo outro lugar da página
     (Compras/Calculadora/Preço/Mais-detalhes) o padrão certo já era esse:
     seção off-white + cartão branco por cima = contraste de verdade. */
  background: var(--bg-base);
  /* Sem o ícone-jornada que ficava acima do título (removido em 21/08), o
     respiro padrão da seção sobre o bloco escuro anterior ficou largo
     demais pro gosto da Aline — aperta só aqui. */
  padding-top: var(--sp-12);
}
@media (min-width: 1024px) {
  .bloco--entrega { padding-top: var(--sp-16); }
}
.grid-cards {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .grid-cards { grid-template-columns: 1fr 1fr; }
}
.bloco--entrega .botao--primario {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  margin-top: var(--sp-8);
}
.card-beneficio {
  background: #FFFFFF;
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  padding: var(--sp-8) var(--sp-6);
  padding-top: calc(var(--sp-8) + 3px);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform 250ms var(--ease-saida), box-shadow 250ms var(--ease-saida);
}
.card-beneficio .icone--card { display: block; margin-inline: auto; }
.card-beneficio p { text-align: center; }
.card-beneficio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent-line);
}
.card-beneficio:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-card-hover);
}
.card-beneficio h3 { margin-bottom: var(--sp-2); }
.card-beneficio p { color: var(--ink-secondary); font-size: 15px; }
/* Entrada mais evidente que o padrão do resto da página (pedido da Aline,
   21/08: "queria deixar isso mais evidente") — mesma mecânica do .reveal
   genérico, só que sobe de mais longe e um pouco mais devagar. */
.card-beneficio.reveal {
  transform: translateY(40px) scale(0.9);
  transition: opacity 650ms var(--ease-saida), transform 650ms var(--ease-saida);
}

/* ---------- 03B · Pra quem é ---------- */
.bloco--para-quem-e {
  background: var(--bg-base);
  /* Respiro reduzido (05/09) — a seção vem logo depois de um botão de CTA
     na Entrega, que já dá sensação de "fim de seção"; sem isso o vão fica
     grande demais. Regra movida de .bloco--compras (que tinha esse mesmo
     motivo até a trilha "Pra quem é" ficar no meio das duas, 05/09). */
  padding-top: var(--sp-12);
}
@media (min-width: 1024px) {
  .bloco--para-quem-e { padding-top: var(--sp-16); }
}

/* ---------- 05 · Calculadora ---------- */
.bloco--calculadora {
  background: var(--bg-base);
}
.calculadora__grid {
  display: grid;
  gap: var(--sp-16);
  align-items: center;
}
/* Mobile (coluna única): o texto vem antes do celular na tela, mesmo o HTML
   tendo o celular primeiro — sem isso, a seção abria com o mockup flutuando
   sem nenhum título explicando do que se trata (pedido da Aline, 20/08). */
@media (max-width: 1023px) {
  .calculadora__texto { order: -1; }
  /* O celular virou o último elemento da seção nessa ordem — seu padding
     inferior (pensado pro topo, onde vem antes de mais coisa) somava aos
     64px padrão da seção e deixava o espaço até "Minha história" maior
     que o resto da página (pedido da Aline, 20/08). */
  .bloco--calculadora .palco-celular { padding-bottom: 0; }
  /* Mesma correção, agora pra Compras (04/09) — o mockup de iPhone mudou de
     seção (ver histórico no HTML) e essa regra nunca tinha sido copiada pra
     cá; sem ela, o respiro até "Calculadora inclusa no app" ficava enorme. */
  .bloco--compras .palco-celular { padding-bottom: 0; }
  /* Gap do grid pensado pro desktop (2 colunas lado a lado) é grande demais
     empilhado no mobile — texto e celular ficavam longe um do outro. */
  .calculadora__grid { gap: var(--sp-8); }
}
@media (min-width: 1024px) {
  .calculadora__grid { grid-template-columns: 0.9fr 1.1fr; }
}
.calculadora__texto { text-align: center; }
.calculadora__texto .eyebrow { justify-content: center; }
.lista-check {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-6) auto;
  width: fit-content;
  text-align: left;
}
.lista-check li {
  position: relative;
  padding-left: 32px;
  text-align: left;
}
.lista-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/60% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/60% no-repeat;
}
.calculadora__fechamento { color: var(--ink-secondary); }
/* CTA novo (05/09), fora do grid — sempre depois do print, nos dois
   layouts (mobile e desktop). Mesmo respiro do botão da Entrega. */
.calculadora__cta {
  text-align: center;
  margin-top: var(--sp-12);
}
.calculadora__cta .botao {
  display: inline-flex;
  margin-top: var(--sp-6);
}
/* Tópicos entrando um de cada vez, deslizando da esquerda (pedido da Aline,
   21/08) — ver iniciarTopicosCalculadora em main.js. Some com
   prefers-reduced-motion pela regra global do arquivo (animation-duration
   quase zero) + o próprio JS já entrega tudo visível de cara nesse caso. */
.calculadora__texto .lista-check li.topico-calc {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 450ms var(--ease-saida), transform 450ms var(--ease-saida);
}
.calculadora__texto .lista-check li.topico-calc--visivel {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- 05B · Compras ---------- */
/* Mesma estrutura de grid da Calculadora, mas SEM o mockup de iPhone —
   ficou repetitivo logo em seguida (pedido da Aline, 04/09). Cartão
   flutuante simples: só a imagem, cantos arredondados + sombra, sem
   moldura/botões laterais. */
.bloco--compras {
  background: var(--bg-base);
}
.compras__grid {
  display: grid;
  gap: var(--sp-16);
  align-items: center;
}
@media (max-width: 1023px) {
  .compras__texto { order: -1; }
  .compras__grid { gap: var(--sp-8); }
}
@media (min-width: 1024px) {
  .compras__grid { grid-template-columns: 1.1fr 0.9fr; }
}
.compras__texto { text-align: center; }
.compras__texto .eyebrow { justify-content: center; }
.compras__midia {
  display: flex;
  justify-content: center;
}
.cartao-print {
  margin-inline: auto;
  max-width: 300px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sombra-card-hover);
  border: 1px solid var(--border);
}
.cartao-print img {
  display: block;
  width: 100%;
  height: auto;
}
/* Encolhe junto com .palco-celular nessa largura (04/09) — sem isso, o
   cartão (sem bezel) ficava visivelmente maior que o mockup de iPhone
   vizinho (que perde ~32px de largura pro bezel/moldura); precisa vir
   DEPOIS da regra base acima pra vencer no empate de especificidade. */
@media (max-width: 640px) {
  .cartao-print { max-width: 230px; }
}

/* ---------- 05C · Mais detalhes (Novidades + Para quem é, cartão elegante) ---------- */
/* 3ª versão (04/09): ícones + 3 itens não agradou; 2 parágrafos cinza soltos
   também não ("precisa ser bonita") — vira um cartão branco com sombra e
   cantos arredondados (mesma linguagem de .cartao-print/.card-beneficio já
   usada no resto da página), texto maior/centralizado, com uma linha
   dourada fina (mesmo --accent das outras seções) separando as 2 frases
   em vez de ícone. */
.bloco--mais-detalhes {
  background: var(--bg-base);
  padding-block: var(--sp-12);
}
/* Respiro extra no desktop (05/09, auditoria) — Entrega e Compras (vizinhas)
   já ganhavam mais espaço em telas grandes; essa seção tinha ficado de fora
   e parecia "espremida" perto delas. */
@media (min-width: 1024px) {
  .bloco--mais-detalhes { padding-block: var(--sp-16); }
}
.mais-detalhes-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.mais-detalhes {
  max-width: 580px;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
/* Friso no topo (04/09, "Opção B") — mesmo padrão do .card-beneficio (ver
   Seção 03 · Entrega), reaproveitado aqui em vez de inventar um estilo de
   cartão novo pra esse bloco. */
.mais-detalhes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent-line);
}
.mais-detalhes__estrelas {
  display: flex;
  gap: 4px;
  color: var(--accent);
}
.mais-detalhes__estrelas .icone { width: 20px; height: 20px; }
.mais-detalhes__linha {
  /* 15px (era 16px) — unificado em 05/09, ver .trilha-passo__texto p. */
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}
/* Palavras-chave em destaque (04/09) — antes as 2 linhas tinham peso igual
   e ficavam "sem graça"; dourado + negrito dá personalidade tipográfica
   sem precisar de ícone (que ela já tinha rejeitado antes). */
.mais-detalhes__linha strong {
  color: var(--brand);
  font-weight: 700;
}
/* Trilha numerada — mesmo componente do "Como funciona" (removido antes),
   reaproveitado aqui só pro "Para quem é" (04/09). 2ª rodada: tirada do
   cartão (ela já tem estrutura visual própria — círculos + linha —, um
   cartão em volta ficava genérico) e voltou ao tamanho padrão original
   (a versão "compacta", pensada só pra caber dentro do cartão, não faz
   mais sentido sem o cartão). */
.para-quem-e__wrap {
  max-width: 420px;
  margin-inline: auto;
}
.trilha-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.trilha-passo {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  position: relative;
}
.trilha-passo:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: calc(var(--sp-8) * -1);
  width: 2px;
  /* Dourado claro/suave (05/09) — --accent-light sólido ficaria "apagado"
     sobre o fundo claro da seção (mesmo problema já visto antes na página
     com essa cor); em vez disso, --accent (o dourado mais forte) numa
     opacidade baixa dá o efeito "clarinho" sem sumir. */
  background: rgba(184, 134, 46, 0.4);
}
.trilha-passo__numero {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-wordmark);
  font-weight: 800;
  font-size: 15px;
  position: relative;
  z-index: 1;
}
.trilha-passo__texto h3 {
  /* font-size removido em 05/09 (auditoria) — herda o clamp(18-20px) global
     de h3, igual .card-beneficio h3; antes tinha um valor fixo de 17px que
     destoava do resto da página sem motivo. */
  margin-bottom: 2px;
  text-align: left;
}
.trilha-passo__texto p {
  margin: 0;
  /* 15px (era 14px) — unificado em 05/09 com .card-beneficio p e
     .mais-detalhes__linha, os 3 contextos de "texto de apoio abaixo de um
     título" da página. */
  font-size: 15px;
  color: var(--ink-secondary);
  line-height: 1.5;
  text-align: left;
}

/* ---------- 06 · Compromisso pessoal (sem foto) ---------- */
.bloco--compromisso {
  background: #FFFFFF;
}
.compromisso {
  max-width: 720px;
  margin-inline: auto;
  position: relative;
  text-align: center;
}
/* Moldura da foto — só a borda dourada em volta, sem o retângulo deslocado
   atrás (efeito de profundidade removido a pedido da Aline, 21/08: "só a
   borda colorida, sem efeito 3d"). */
.foto-moldura {
  position: relative;
  width: 220px; /* era 180px — alargada a pedido dela, 04/09 */
  margin: 0 auto var(--sp-8);
}
.compromisso__foto {
  position: relative;
  z-index: 1;
  margin: 0;
  /* 600×804 = proporção EXATA da foto original (não o 3:4 genérico de
     antes) — pedido dela pra não cortar a foto; com a proporção batendo,
     object-fit:cover preenche sem cortar nada. */
  aspect-ratio: 600 / 804;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(165deg, #F0ECE4 0%, #E4DED4 100%);
  /* Borda dourada de 2px removida (04/09, pedido dela) — com a foto real,
     o contorno grosso competia com a imagem em vez de valorizar ela.
     Sombra suave no lugar (mesma de .cartao-print) só pra dar alguma
     definição contra o fundo, já que o interior da loja é claro e
     parecido com o --bg-base da página. */
  box-shadow: var(--sombra-card);
}
.compromisso__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Camada básica contra salvamento (04/09) — não impede print de tela,
     só dificulta o caminho mais comum. -webkit-touch-callout:none tira o
     menu de "Salvar imagem" do toque longo no Safari/iOS. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.compromisso .eyebrow { justify-content: center; }
.compromisso__aspas {
  display: block;
  font-family: var(--font-wordmark);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 84px);
  line-height: 0.6;
  color: var(--brand);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}
.compromisso__citacao {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-family: var(--font-corpo);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.compromisso__assinatura {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-6);
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-light);
  letter-spacing: 0.02em;
  text-align: center;
}

/* ---------- 07 · Preço ---------- */
.bloco--preco {
  background: var(--bg-base);
  position: relative;
  /* O card de preço é visualmente denso (cor, sombra, degradê animado) e some
     de repente — o padding padrão da seção deixava o respiro até o FAQ
     parecer maior do que as outras transições da página (pedido da
     Aline, 21/08), mesmo medindo o mesmo valor. */
  padding-bottom: var(--sp-12);
}
/* Envelope que centraliza e dá a referência de tamanho pro card + pro degradê
   de trás — precisa existir separado do .card-preco (21/08: 2ª tentativa,
   com ::before + z-index negativo, não funcionou de verdade: o navegador não
   deixava o degradê escapar pra trás do fundo branco do próprio card,
   mesmo em teoria devendo funcionar — o degradê ficava na frente mesmo
   assim). Com uma div de verdade, mesmo truque que já funcionava no
   .card-preco__glow (irmã, desenhada antes no HTML = fica atrás por
   ordem natural, sem depender de z-index nenhum), é garantido. */
.card-preco__wrap {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
}
.card-preco {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-preco);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
}
.card-preco__glow {
  position: absolute;
  z-index: 0;
  inset: -15% -10%;
  background: radial-gradient(closest-side, rgba(74, 37, 69, 0.1) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  max-width: 480px;
  margin-inline: auto;
  left: 0; right: 0;
  contain: layout paint;
}
/* Degradê de trás do card de preço — só aqui, é o ponto mais importante da
   página. 4ª versão, 21/08 (anel girando → brilho contornando borda fixa →
   pseudo-elemento com z-index negativo, nenhuma virou o que a Aline queria
   de verdade). Agora é uma div de verdade, um pouco maior que o card em
   todos os lados, desenhada ANTES do card no HTML — então só as bordas
   coloridas dela aparecem contornando o card branco da frente (mesma ideia
   de um cartão colorido espiado por trás de outro). Linha bem fina (3px,
   era 14px — "ficou demais", pedido da Aline, 21/08) pra ficar elegante,
   não chapada. As cores se mexem devagar (anima background-position, não
   rotação) — "brilhando e se mexendo", sem girar em volta do card. Some com
   prefers-reduced-motion pela regra global do arquivo (animation-duration
   quase zero), ficando parado num ponto do degradê. */
.card-preco__aura {
  position: absolute;
  /* 2ª rodada (05/09): -6px ficou "grossa demais" pro gosto dela — meio-termo
     em -4px (era -3px originalmente, "fininha demais"). */
  inset: -4px;
  border-radius: calc(var(--raio-card) + 4px);
  background: linear-gradient(120deg, var(--brand) 0%, var(--accent-light) 30%, var(--brand-light) 55%, var(--accent) 78%, var(--brand) 100%);
  background-size: 260% 260%;
  animation: mover-degrade-preco 7s ease-in-out infinite;
  filter: blur(0.5px);
  pointer-events: none;
}
@keyframes mover-degrade-preco {
  0%, 100% { background-position: 0% 30%; }
  50% { background-position: 100% 70%; }
}
.card-preco__fita {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(74, 37, 69, 0.08);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  margin-bottom: var(--sp-6);
}
.card-preco .titulo-secao { font-size: 22px; margin-bottom: var(--sp-4); }
.lista-check--preco { text-align: left; margin-bottom: var(--sp-8); }
/* Preço de lançamento — ancoragem real (R$97 é preço cheio de verdade, não
   inventado) acima do valor promocional em destaque. */
.preco__lancamento {
  margin-top: var(--sp-4);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--danger);
}
.preco__ancoragem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.preco__valor-cheio {
  font-family: var(--font-wordmark);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 2px;
}
.preco__desconto {
  display: inline-block;
  color: var(--danger);
  background: rgba(166, 61, 38, 0.1);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}
/* Peso/gradiente reduzidos (pedido da Aline, 21/08 — "não está sofisticado o
   suficiente"): 800 + gradiente em só 2 dígitos ficava com cara de adesivo de
   liquidação. Agora peso 700, leve aperto de letter-spacing e cor sólida em
   dourado (--accent), que já é a cor de destaque/ícone ≥24px da marca — nada
   de gradiente cortado no meio de "27". */
.preco__valor {
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: clamp(56px, 13vw, 80px);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
  margin-block: var(--sp-1) var(--sp-2);
  display: inline-block;
}
.preco__valor-simbolo {
  font-size: 0.4em;
  font-weight: 700;
  vertical-align: 0.5em;
  margin-right: 2px;
  /* Símbolo em tom mais discreto (brand) contrastando com o número em
     dourado — dois tons intencionais, não um gradiente acidental. */
  color: var(--brand);
}
.preco__prazo {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  /* margin-top negativo removido — com o line-height:1 do .preco__valor
     (ajuste acima), o respiro deixou de precisar dessa compensação. */
  margin-top: 0;
  margin-bottom: var(--sp-4);
}
.card-preco .placeholder-texto {
  margin-bottom: var(--sp-3);
  font-size: 14px;
}
.card-preco .botao { margin-top: var(--sp-6); width: 100%; }
.selo-garantia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  color: var(--success);
  font-weight: 600;
  font-size: 14px;
}
.selo-garantia .icone { width: 18px; height: 18px; }

/* ---------- 08 · FAQ ---------- */
.bloco--faq {
  background: var(--bg-base);
}
.lista-faq {
  display: grid;
  gap: var(--sp-3);
  max-width: 65ch;
  margin-inline: auto;
}
.faq-item {
  background: #FFFFFF;
  border: none;
  border-radius: var(--raio-card);
  padding: var(--sp-4) var(--sp-6);
  box-shadow: var(--sombra-card);
  transition: box-shadow 250ms var(--ease-saida), transform 250ms var(--ease-saida);
}
.faq-item:hover { transform: translateY(-2px); box-shadow: var(--sombra-card-hover); }
.faq-item[open] { box-shadow: var(--sombra-card-hover); }
.faq-item summary {
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/70% no-repeat;
  transition: transform 200ms var(--ease-saida);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item p {
  margin-top: var(--sp-3);
  color: var(--ink-secondary);
  text-align: left;
}
.faq-item summary { text-align: left; }
.faq-item .placeholder-texto { margin-top: var(--sp-3); }

/* ---------- 09 · Fecho ---------- */
.bloco--fecho {
  background:
    radial-gradient(ellipse 550px 450px at 15% 100%, rgba(232, 200, 120, 0.1) 0%, transparent 70%),
    var(--gradient-brand-section);
  color: var(--bg-base);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bloco--fecho::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(250, 249, 246, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 0%, transparent 80%);
  pointer-events: none;
}
.fecho__conteudo { max-width: 60ch; margin-inline: auto; position: relative; z-index: 1; }
.bloco--fecho .titulo-secao { line-height: 1.08; }
.fecho__prazo {
  margin: var(--sp-4) auto var(--sp-8);
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(250, 249, 246, 0.88);
}
/* No desktop, cada frase cabe inteira numa linha (pedido da Aline, 21/08) —
   42ch (medida pro mobile) era estreito demais pra frase 1 e forçava uma
   quebra extra sozinha. */
@media (min-width: 1024px) {
  .fecho__prazo { max-width: 58ch; }
}

/* ---------- Rodapé ---------- */
.rodape {
  padding-block: var(--sp-8);
  color: var(--ink-secondary);
  font-size: 14px;
  border-top: 1px solid var(--border);
}
.rodape__linha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}
@media (min-width: 640px) {
  .rodape__linha { flex-direction: row; justify-content: center; }
}
/* Rodapé: ícone em cima do texto, não do lado (pedido da Aline, 21/08) —
   vale pra mobile e desktop igual, sem media query. */
.marca--rodape {
  opacity: 0.75;
  flex-direction: column;
  gap: var(--sp-1);
}
.marca--rodape .marca__wordmark { font-size: 15px; }

/* ---------- Animação de entrada ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 600ms var(--ease-saida), transform 600ms var(--ease-saida);
}
.reveal.reveal--visivel {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}