/* =========================================================================
   DE MALAS E MILHAS — Sistema de design
   Fonte de verdade: BRAND BOOK DE MALAS E MILHAS.pdf (2026)

   Todas as cores, fontes e proporções abaixo vêm do Brand Book.
   Não adicione cores ou fontes fora desta lista.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS DE DESIGN  (Brand Book — págs. 05 e 06)
   ------------------------------------------------------------------------- */
:root {
  /* --- Cores principais (Brand Book pág. 06) --- */
  --rose-gold:   #B76E79;  /* Elegância, sofisticação e feminilidade */
  --blush-pink:  #EBC5C0;  /* Acolhimento, leveza e delicadeza */
  --champagne:   #F7E7D7;  /* Clareza, brilho e prosperidade */
  --off-white:   #FAF7F5;  /* Pureza, simplicidade e equilíbrio */
  --taupe-claro: #D8CEC7;  /* Neutralidade, calma e estabilidade */

  /* --- Cores de apoio (Brand Book pág. 06) --- */
  --mauve-escuro:  #8E5D63; /* Profundidade, força e confiança */
  --bege-areia:    #E9DCCF; /* Conforto, conexão e harmonia */
  --cinza-suave:   #CFCFCF; /* Equilíbrio, elegância e neutralidade */
  --grafite:       #333333; /* Sofisticação, poder e profissionalismo */
  --dourado-claro: #E2B97A; /* Valor, conquista e realização */

  /* --- Papéis semânticos ---
     Observação de acessibilidade: o Rose Gold (#B76E79) sobre fundo claro
     atinge ~3,8:1 de contraste — suficiente para elementos gráficos e
     títulos grandes, mas NÃO para texto corrido. Por isso o texto usa
     Grafite e os acentos de texto usam Mauve Escuro (~5,4:1), ambos
     cores oficiais da paleta. */
  --cor-fundo:            var(--off-white);
  --cor-fundo-alt:        #FDFBFA;
  --cor-fundo-suave:      var(--champagne);
  --cor-fundo-destaque:   var(--bege-areia);
  --cor-texto:            var(--grafite);
  --cor-texto-suave:      #5B5350;   /* Grafite suavizado — 7,4:1 sobre o off-white */
  --cor-titulo:           #2A2A2A;
  --cor-acento:           var(--mauve-escuro);
  --cor-acento-claro:     var(--rose-gold);
  --cor-borda:            #E8DFDA;
  --cor-borda-forte:      var(--taupe-claro);

  /* --- Tipografia (Brand Book pág. 05) ---
     Principal  : Playfair Display — títulos e destaques
     Secundária : Montserrat      — subtítulos e textos
     Apoio      : Great Vibes     — frases de impacto e detalhes especiais */
  --fonte-titulo:  'Playfair Display', 'Times New Roman', Georgia, serif;
  --fonte-texto:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --fonte-destaque:'Great Vibes', 'Playfair Display', cursive;

  /* Escala tipográfica fluida (mobile-first).
     Hierarquia do Brand Book: títulos 32–60pt · subtítulos 16–24pt · corpo 10–14pt */
  --txt-xs:   0.75rem;
  --txt-sm:   0.875rem;
  --txt-base: 1rem;
  --txt-md:   clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --txt-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --txt-xl:   clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --txt-2xl:  clamp(1.9rem, 1.5rem + 1.9vw, 2.75rem);
  --txt-3xl:  clamp(2.3rem, 1.7rem + 2.9vw, 3.75rem);

  /* --- Espaçamento --- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --secao-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* --- Formas e sombras ---
     O Brand Book pede "sombras suaves" e "molduras" (pág. 07). Nada de
     brilho forte, neon ou profundidade exagerada. */
  --raio-sm: 8px;
  --raio-md: 14px;
  --raio-lg: 22px;
  --raio-pill: 999px;
  --sombra-suave: 0 1px 2px rgba(142, 93, 99, 0.04), 0 8px 24px rgba(142, 93, 99, 0.06);
  --sombra-media: 0 2px 4px rgba(142, 93, 99, 0.05), 0 16px 40px rgba(142, 93, 99, 0.10);

  /* --- Layout --- */
  --largura-max: 1180px;
  --largura-texto: 68ch;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  --transicao: 180ms ease;
}

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

/* `hidden` sempre vence: vários componentes usam este atributo para
   esconder itens que dependem de configuração (e-mail, bônus, menu). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

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

body {
  margin: 0;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--txt-base);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--cor-titulo);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 var(--esp-4);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--txt-3xl); }
h2 { font-size: var(--txt-2xl); }
h3 { font-size: var(--txt-lg); }
h4 { font-size: var(--txt-md); }

p { margin: 0 0 var(--esp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--cor-acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rose-gold); }

ul, ol { margin: 0 0 var(--esp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--esp-2); }

strong, b { font-weight: 600; color: var(--cor-titulo); }

/* Foco visível e consistente em todo o site (acessibilidade por teclado) */
:focus-visible {
  outline: 3px solid var(--mauve-escuro);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* -------------------------------------------------------------------------
   3. UTILITÁRIOS
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--estreito { max-width: 820px; }

.secao { padding-block: var(--secao-y); }
.secao--suave { background-color: var(--cor-fundo-suave); }
.secao--areia { background-color: var(--cor-fundo-destaque); }
.secao--alt   { background-color: var(--cor-fundo-alt); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Link "pular para o conteúdo" */
.pular-link {
  position: absolute; top: -100px; left: var(--esp-4);
  z-index: 999;
  background: var(--mauve-escuro); color: #fff;
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--raio-sm);
  font-size: var(--txt-sm); font-weight: 600;
  text-decoration: none;
  transition: top var(--transicao);
}
.pular-link:focus { top: var(--esp-4); color: #fff; }

.texto-centro { text-align: center; }
.medida { max-width: var(--largura-texto); }
.medida-centro { max-width: var(--largura-texto); margin-inline: auto; }

/* Olho-mágico / etiqueta de seção */
.etiqueta {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin-bottom: var(--esp-3);
}

/* Frase de impacto — tipografia de apoio (Great Vibes), usada com moderação */
.assinatura {
  font-family: var(--fonte-destaque);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.35;
  color: var(--rose-gold);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.subtitulo {
  font-family: var(--fonte-texto);
  font-size: var(--txt-md);
  color: var(--cor-texto-suave);
  line-height: 1.75;
}

/* Filete decorativo com coração — elemento gráfico do Brand Book (pág. 07) */
.filete {
  display: flex; align-items: center; justify-content: center;
  gap: var(--esp-3);
  margin: var(--esp-5) 0;
  color: var(--rose-gold);
}
.filete::before, .filete::after {
  content: ""; height: 1px; flex: 1; max-width: 90px;
  background: linear-gradient(90deg, transparent, var(--taupe-claro));
}
.filete::after { background: linear-gradient(90deg, var(--taupe-claro), transparent); }
.filete svg { width: 15px; height: 15px; flex: none; }

.filete--esquerda { justify-content: flex-start; }
.filete--esquerda::before { display: none; }
.filete--esquerda::after { max-width: 120px; }

/* -------------------------------------------------------------------------
   4. COMPONENTE: BOTÕES
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.85rem 1.75rem;
  min-height: 48px;              /* alvo de toque confortável */
  border: 1.5px solid transparent;
  border-radius: var(--raio-pill);
  font-family: var(--fonte-texto);
  font-size: var(--txt-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}
.btn:active { transform: translateY(1px); }

/* Primário — Mauve Escuro (cor oficial de apoio) garante contraste AA (5,4:1) */
.btn--primario {
  background-color: var(--mauve-escuro);
  border-color: var(--mauve-escuro);
  color: #FFFFFF;
  box-shadow: var(--sombra-suave);
}
.btn--primario:hover { background-color: #7A4E54; border-color: #7A4E54; color: #fff; box-shadow: var(--sombra-media); }

/* Secundário — contorno rosé */
.btn--secundario {
  background-color: transparent;
  border-color: var(--rose-gold);
  color: var(--cor-acento);
}
.btn--secundario:hover { background-color: var(--blush-pink); border-color: var(--mauve-escuro); color: #63383E; }

/* Discreto */
.btn--texto {
  background: none; border-color: transparent;
  color: var(--cor-acento); padding-inline: 0.25rem; min-height: 40px;
  text-decoration: underline; text-underline-offset: 4px;
}
.btn--texto:hover { color: var(--rose-gold); }

.btn--claro { background-color: #fff; border-color: #fff; color: var(--cor-acento); }
.btn--claro:hover { background-color: var(--champagne); border-color: var(--champagne); }

.btn--bloco { width: 100%; }
.btn--grande { padding: 1.05rem 2.25rem; font-size: var(--txt-base); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.grupo-botoes {
  display: flex; flex-wrap: wrap; gap: var(--esp-3);
}
.grupo-botoes--centro { justify-content: center; }

/* -------------------------------------------------------------------------
   5. COMPONENTE: CABEÇALHO E NAVEGAÇÃO
   ------------------------------------------------------------------------- */
.cabecalho {
  position: sticky; top: 0; z-index: 100;
  background-color: rgba(250, 247, 245, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}
.cabecalho__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4);
  min-height: 72px;
  padding-block: var(--esp-2);
}
.cabecalho__marca {
  display: inline-flex; align-items: center; gap: var(--esp-3);
  text-decoration: none; color: inherit; flex: none;
}
/* O logo oficial tem fundo branco. `multiply` integra-o ao fundo claro
   sem alterar suas cores, proporções ou elementos (Brand Book pág. 09). */
.cabecalho__logo {
  width: 52px; height: 52px; flex: none;
  mix-blend-mode: multiply;
}
.cabecalho__nome {
  display: none;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem; font-weight: 700; line-height: 1.15;
  letter-spacing: 0.02em; color: var(--cor-titulo);
}
@media (min-width: 420px) { .cabecalho__nome { display: block; } }

.nav { display: none; }
.nav__lista {
  display: flex; align-items: center; gap: var(--esp-5);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  position: relative;
  font-size: var(--txt-sm); font-weight: 500;
  color: var(--cor-texto); text-decoration: none;
  padding-block: var(--esp-2);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background-color: var(--rose-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transicao);
}
.nav__link:hover { color: var(--cor-acento); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--cor-acento); font-weight: 600; }

.cabecalho__acoes { display: flex; align-items: center; gap: var(--esp-3); }
.cabecalho__cta { display: none; }

/* Botão do menu (mobile) */
.menu-botao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: none; border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pill);
  color: var(--cor-titulo); cursor: pointer;
  transition: background-color var(--transicao);
}
.menu-botao:hover { background-color: var(--champagne); }
.menu-botao svg { width: 20px; height: 20px; }
.menu-botao__fechar { display: none; }
.menu-botao[aria-expanded="true"] .menu-botao__abrir { display: none; }
.menu-botao[aria-expanded="true"] .menu-botao__fechar { display: block; }

/* Painel do menu (mobile) */
.menu-painel {
  border-top: 1px solid var(--cor-borda);
  background-color: var(--cor-fundo);
}
.menu-painel[hidden] { display: none; }
.menu-painel__lista {
  list-style: none; margin: 0; padding: var(--esp-4) 0 var(--esp-5);
  display: flex; flex-direction: column;
}
.menu-painel__lista li { margin: 0; }
.menu-painel__link {
  display: block; padding: var(--esp-3) 0;
  font-size: var(--txt-md); font-weight: 500;
  color: var(--cor-texto); text-decoration: none;
  border-bottom: 1px solid var(--cor-borda);
}
.menu-painel__link[aria-current="page"] { color: var(--cor-acento); font-weight: 600; }
.menu-painel__rodape { padding-bottom: var(--esp-5); }

/* A partir do desktop: navegação horizontal aparece, menu mobile some.
   Este bloco fica depois das regras acima para vencer na cascata. */
@media (min-width: 900px) {
  .nav { display: block; }
  .cabecalho__cta { display: inline-flex; }
  .menu-botao { display: none; }
  .menu-painel { display: none !important; }
}

/* -------------------------------------------------------------------------
   6. COMPONENTE: HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(170deg, var(--champagne) 0%, var(--off-white) 58%);
  overflow: hidden;
}
/* Composição decorativa discreta — rota pontilhada do Brand Book (pág. 07) */
.hero__grafismo {
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0.5;
  color: var(--rose-gold);
}
.hero__interno {
  position: relative;
  display: grid; gap: var(--esp-6);
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(3rem, 2rem + 5vw, 5.5rem);
}
.hero__texto { max-width: 620px; }
.hero h1 { margin-bottom: var(--esp-4); }
.hero__resumo { font-size: var(--txt-md); color: var(--cor-texto-suave); margin-bottom: var(--esp-5); }
.hero__figura { position: relative; justify-self: center; width: 100%; max-width: 440px; }
.hero__foto {
  width: 100%; border-radius: var(--raio-lg);
  box-shadow: var(--sombra-media);
  object-fit: cover; aspect-ratio: var(--proporcao, 4 / 5);
  /* --foco-y ajustável por foto: ver comentário sobre enquadramento
     pessoal na seção 16-E do fim deste arquivo. */
  object-position: center var(--foco-y, 22%);
}
.hero__selo {
  position: absolute; left: -8px; bottom: -18px;
  display: flex; align-items: center; gap: var(--esp-3);
  background: #fff; border-radius: var(--raio-pill);
  padding: var(--esp-3) var(--esp-5) var(--esp-3) var(--esp-3);
  box-shadow: var(--sombra-media);
  max-width: calc(100% - 1rem);
}
.hero__selo img { width: 46px; height: 46px; flex: none; mix-blend-mode: multiply; }
.hero__selo span {
  font-size: var(--txt-xs); font-weight: 600; line-height: 1.35;
  color: var(--cor-titulo); letter-spacing: 0.01em;
}
.hero__nota {
  margin-top: var(--esp-5);
  font-size: var(--txt-sm); color: var(--cor-texto-suave);
}

@media (min-width: 900px) {
  .hero__interno {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center; gap: var(--esp-8);
  }
  .hero__figura { justify-self: end; max-width: 460px; }
}

/* Cabeçalho de página interna */
.pagina-topo {
  background: linear-gradient(170deg, var(--champagne) 0%, var(--off-white) 100%);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  border-bottom: 1px solid var(--cor-borda);
}
.pagina-topo h1 { margin-bottom: var(--esp-3); }
.pagina-topo .subtitulo { max-width: 60ch; }
/* Nota curta abaixo do subtítulo — deliberadamente menor que .subtitulo
   para não criar dois subtítulos consecutivos com o mesmo peso visual. */
.pagina-topo__nota {
  font-size: var(--txt-sm);
  color: var(--cor-texto-suave);
  margin-top: var(--esp-2);
}

/* -------------------------------------------------------------------------
   7. COMPONENTE: GRADES E CARTÕES
   ------------------------------------------------------------------------- */
.grade { display: grid; gap: var(--esp-5); }
.grade--2 { grid-template-columns: 1fr; }
.grade--3 { grid-template-columns: 1fr; }
.grade--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grade--2, .grade--3, .grade--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
  .grade--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Cartão base */
.cartao {
  display: flex; flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-5);
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.cartao h3 { margin-bottom: var(--esp-2); }
.cartao p { color: var(--cor-texto-suave); font-size: var(--txt-sm); }

.cartao__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  margin-bottom: var(--esp-4);
  border-radius: var(--raio-pill);
  background-color: var(--champagne);
  color: var(--cor-acento);
}
.cartao__icone svg { width: 22px; height: 22px; }

/* Cartão de conteúdo (com imagem) */
.cartao-conteudo {
  display: flex; flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.cartao-conteudo:hover,
.cartao-conteudo:focus-within {
  border-color: var(--blush-pink);
  box-shadow: var(--sombra-media);
  transform: translateY(-3px);
}
.cartao-conteudo__figura { margin: 0; background-color: var(--champagne); }
.cartao-conteudo__figura img {
  width: 100%; aspect-ratio: var(--proporcao, 3 / 2);
  object-fit: var(--ajuste, cover);
  object-position: center var(--foco-y, 50%);
}
.cartao-conteudo__corpo {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--esp-5);
}
.cartao-conteudo__corpo h3 { font-size: var(--txt-md); margin-bottom: var(--esp-2); }
.cartao-conteudo__corpo p { color: var(--cor-texto-suave); font-size: var(--txt-sm); flex: 1; }
.cartao-conteudo__temas {
  list-style: none; padding: 0; margin: var(--esp-4) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--esp-2);
}
.cartao-conteudo__temas li {
  margin: 0;
  font-size: var(--txt-xs); font-weight: 500;
  color: var(--cor-acento);
  background-color: var(--champagne);
  border-radius: var(--raio-pill);
  padding: 0.3rem 0.75rem;
}

/* Cartão de benefício (lista com marcador) */
.beneficio {
  display: flex; gap: var(--esp-4); align-items: flex-start;
}
.beneficio__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; margin-top: 2px;
  border-radius: var(--raio-pill);
  background-color: var(--blush-pink);
  color: #63383E;
  font-family: var(--fonte-titulo); font-size: var(--txt-sm); font-weight: 700;
}
.beneficio__marca svg { width: 18px; height: 18px; }
.beneficio h3 { font-size: var(--txt-md); margin-bottom: var(--esp-1); }
.beneficio p { font-size: var(--txt-sm); color: var(--cor-texto-suave); }

/* Passos numerados */
.passos { counter-reset: passo; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-5); }
.passo {
  counter-increment: passo;
  display: flex; gap: var(--esp-4); align-items: flex-start; margin: 0;
}
.passo::before {
  content: counter(passo);
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--raio-pill);
  border: 1.5px solid var(--rose-gold);
  color: var(--cor-acento);
  font-family: var(--fonte-titulo); font-size: var(--txt-base); font-weight: 700;
}
.passo h3 { font-size: var(--txt-md); margin-bottom: var(--esp-1); }
.passo p { font-size: var(--txt-sm); color: var(--cor-texto-suave); }
@media (min-width: 720px) { .passos--linha { grid-template-columns: repeat(2, 1fr); gap: var(--esp-6); } }

/* Nota discreta após a seção "Como as milhas entram na sua rotina"
   (index.html), com um único link em destaque para "Comece Aqui". */
.rotina-nota {
  text-align: center;
  margin-top: var(--esp-6);
  font-size: var(--txt-sm);
  color: var(--cor-texto-suave);
}

/* -------------------------------------------------------------------------
   8. COMPONENTE: BLOCO DE TEXTO + IMAGEM
   ------------------------------------------------------------------------- */
.duo { display: grid; gap: var(--esp-6); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--esp-8); }
  .duo--invertido .duo__figura { order: 2; }
}
.duo__figura { margin: 0; position: relative; }
/* Enquadramento configurável por foto — cada <img> pode definir, via
   `style`, suas próprias --proporcao / --foco-y / --ajuste sem herdar
   um recorte genérico. Ver comentário completo na seção 16-E. */
.duo__figura img {
  width: 100%; border-radius: var(--raio-lg);
  box-shadow: var(--sombra-suave);
  object-fit: var(--ajuste, cover);
  aspect-ratio: var(--proporcao, 4 / 5);
  object-position: center var(--foco-y, 50%);
  background-color: var(--champagne);
}
.duo__figura--paisagem img { aspect-ratio: var(--proporcao, 3 / 2); }
.duo__figura figcaption {
  margin-top: var(--esp-3);
  font-size: var(--txt-xs); color: var(--cor-texto-suave);
}

/* Composição gráfica no lugar de uma foto — usada quando ainda não há
   fotografia pessoal confirmada para aquele espaço. Nunca uma pessoa
   de banco de imagens. Ocupa a mesma caixa que uma <img> ocuparia. */
.duo__figura-grafico {
  width: 100%; aspect-ratio: var(--proporcao, 4 / 5);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-suave);
  background: linear-gradient(155deg, var(--champagne) 0%, var(--blush-pink) 62%, var(--rose-gold) 145%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.duo__figura-grafico::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.55) 0, transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,0.35) 0, transparent 45%);
}
.duo__figura-grafico svg {
  position: relative; width: 34%; max-width: 130px; height: auto;
  color: rgba(255,255,255,0.9);
}

/* -------------------------------------------------------------------------
   9. COMPONENTE: DESTAQUE DA MENTORIA (CTA)
   ------------------------------------------------------------------------- */
.mentoria-cta {
  position: relative;
  background: linear-gradient(140deg, var(--blush-pink) 0%, var(--champagne) 100%);
  border-radius: var(--raio-lg);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  overflow: hidden;
}
.mentoria-cta__interno { position: relative; max-width: 62ch; }
.mentoria-cta h2 { margin-bottom: var(--esp-3); }
.mentoria-cta p { color: #4A4341; }
.mentoria-cta .grupo-botoes { margin-top: var(--esp-5); }
/* Link discreto opcional abaixo dos botões principais (ex.: roteiro
   gratuito em comece-aqui.html) — não usado nas outras páginas que
   reaproveitam .mentoria-cta, então não altera nada nelas. */
.mentoria-cta__nota { margin-top: var(--esp-4); }

/* Painel de investimento */
.investimento {
  background-color: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-6);
  box-shadow: var(--sombra-suave);
}
.investimento__rotulo {
  font-size: var(--txt-xs); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cor-acento);
  margin-bottom: var(--esp-3);
}
.investimento__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
  font-weight: 700; line-height: 1.1; color: var(--cor-titulo);
  margin-bottom: var(--esp-2);
}
.investimento__valor small {
  display: block;
  font-family: var(--fonte-texto); font-size: var(--txt-sm);
  font-weight: 500; color: var(--cor-texto-suave); margin-top: var(--esp-2);
}
.investimento__lista { list-style: none; padding: 0; margin: var(--esp-5) 0; }
.investimento__lista li {
  display: flex; gap: var(--esp-3); align-items: flex-start;
  font-size: var(--txt-sm); color: var(--cor-texto);
  padding-block: var(--esp-2);
  border-bottom: 1px solid var(--cor-borda);
}
.investimento__lista li:last-child { border-bottom: none; }
.investimento__lista svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--rose-gold); }

/* Bônus — destaque editorial, sem estética de promoção agressiva */
.bonus {
  border: 1.5px dashed var(--rose-gold);
  border-radius: var(--raio-md);
  background-color: var(--cor-fundo-alt);
  padding: var(--esp-5);
}
.bonus__titulo {
  display: flex; align-items: center; gap: var(--esp-3);
  font-family: var(--fonte-titulo); font-size: var(--txt-md); font-weight: 700;
  color: var(--cor-titulo); margin-bottom: var(--esp-2);
}
.bonus__titulo svg { width: 20px; height: 20px; color: var(--rose-gold); flex: none; }
.bonus p { font-size: var(--txt-sm); color: var(--cor-texto-suave); }

/* -------------------------------------------------------------------------
   10. COMPONENTE: PERGUNTAS FREQUENTES
   ------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--esp-3); }
.faq__item {
  background-color: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  overflow: hidden;
  transition: border-color var(--transicao);
}
.faq__item[open] { border-color: var(--blush-pink); }
.faq__pergunta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4);
  width: 100%;
  padding: var(--esp-4) var(--esp-5);
  font-family: var(--fonte-texto);
  font-size: var(--txt-base); font-weight: 600; text-align: left;
  color: var(--cor-titulo);
  cursor: pointer;
  list-style: none;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:hover { color: var(--cor-acento); }
.faq__icone {
  width: 20px; height: 20px; flex: none; color: var(--rose-gold);
  transition: transform var(--transicao);
}
.faq__item[open] .faq__icone { transform: rotate(45deg); }
.faq__resposta {
  padding: 0 var(--esp-5) var(--esp-5);
  font-size: var(--txt-sm); color: var(--cor-texto-suave);
  max-width: 70ch;
}

/* -------------------------------------------------------------------------
   11. COMPONENTE: AVISOS
   ------------------------------------------------------------------------- */
.aviso {
  display: flex; gap: var(--esp-3); align-items: flex-start;
  background-color: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--rose-gold);
  border-radius: var(--raio-sm);
  padding: var(--esp-4) var(--esp-5);
  font-size: var(--txt-sm);
  color: var(--cor-texto-suave);
}
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--cor-acento); }
.aviso strong { color: var(--cor-titulo); }

/* Marcação de conteúdo pendente — visível para a equipe durante a revisão.
   Some do site assim que o texto definitivo substituir o bloco. */
.pendente {
  display: block;
  background-color: #FFF8E6;
  border: 1.5px dashed var(--dourado-claro);
  border-radius: var(--raio-sm);
  padding: var(--esp-4);
  margin-bottom: var(--esp-4);
  font-family: var(--fonte-texto);
  font-size: var(--txt-sm);
  color: #6B5424;
}
.pendente__rotulo {
  display: block;
  font-size: var(--txt-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: var(--esp-2);
}

/* -------------------------------------------------------------------------
   12. COMPONENTE: FORMULÁRIO
   ------------------------------------------------------------------------- */
.formulario { display: grid; gap: var(--esp-5); }
.campo { display: grid; gap: var(--esp-2); }
.campo__rotulo {
  font-size: var(--txt-sm); font-weight: 600; color: var(--cor-titulo);
}
.campo__rotulo .opcional { font-weight: 400; color: var(--cor-texto-suave); }
.campo__dica { font-size: var(--txt-xs); color: var(--cor-texto-suave); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  min-height: 48px;
  font-family: var(--fonte-texto);
  font-size: var(--txt-base);
  color: var(--cor-texto);
  background-color: #fff;
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.campo input::placeholder, .campo textarea::placeholder { color: #9B918C; }

/* O <select> nativo do WebKit (Safari/iOS) ignora `padding` e `min-height`
   e renderiza com a altura mínima do próprio texto (~25px), bem abaixo dos
   48px que os outros campos deste formulário têm de verdade. `appearance:
   none` devolve o controle da caixa para o CSS; a seta é redesenhada à mão
   porque, sem isso, o <select> fica sem nenhum indicador de seleção. */
.campo select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5350' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}

.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--rose-gold); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--mauve-escuro);
  box-shadow: 0 0 0 3px rgba(142, 93, 99, 0.18);
}

/* Estado de erro */
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: #A8323F; }
.campo--erro input:focus, .campo--erro select:focus, .campo--erro textarea:focus {
  box-shadow: 0 0 0 3px rgba(168, 50, 63, 0.18);
}
.campo__erro {
  display: none;
  font-size: var(--txt-xs); font-weight: 600; color: #A8323F;
}
.campo--erro .campo__erro { display: flex; align-items: center; gap: var(--esp-1); }

/* Consentimento */
.consentimento {
  display: flex; gap: var(--esp-3); align-items: flex-start;
  font-size: var(--txt-sm); color: var(--cor-texto-suave);
}
.consentimento input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 3px;
  accent-color: var(--mauve-escuro); cursor: pointer;
}
.consentimento label { cursor: pointer; }

/* Retorno do formulário */
.form-retorno {
  display: none;
  gap: var(--esp-3); align-items: flex-start;
  border-radius: var(--raio-sm);
  padding: var(--esp-4) var(--esp-5);
  font-size: var(--txt-sm);
}
.form-retorno[data-estado="sucesso"] {
  display: flex;
  background-color: #EEF6EF; border: 1px solid #BFD9C2; color: #245B2C;
}
.form-retorno[data-estado="erro"] {
  display: flex;
  background-color: #FDF0F1; border: 1px solid #E8B9BE; color: #8A2631;
}
.form-retorno svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }

/* Honeypot anti-spam */
.campo-oculto { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* -------------------------------------------------------------------------
   13. COMPONENTE: LISTA DE CONTATO
   ------------------------------------------------------------------------- */
.contato-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-4); }
.contato-lista li { margin: 0; }
.contato-item {
  display: flex; gap: var(--esp-4); align-items: center;
  background-color: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-4) var(--esp-5);
  text-decoration: none; color: inherit;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.contato-item:hover {
  border-color: var(--blush-pink); box-shadow: var(--sombra-suave);
  transform: translateY(-2px); color: inherit;
}
.contato-item__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--raio-pill);
  background-color: var(--champagne); color: var(--cor-acento);
}
.contato-item__icone svg { width: 21px; height: 21px; }
.contato-item__texto strong { display: block; font-size: var(--txt-base); color: var(--cor-titulo); }
.contato-item__texto span { font-size: var(--txt-sm); color: var(--cor-texto-suave); }

/* -------------------------------------------------------------------------
   14. COMPONENTE: RODAPÉ
   ------------------------------------------------------------------------- */
.rodape {
  background-color: var(--cor-fundo-destaque);
  border-top: 1px solid var(--cor-borda);
  padding-block: var(--esp-7) var(--esp-5);
}
.rodape__grade {
  display: grid; gap: var(--esp-6);
  padding-bottom: var(--esp-6);
  border-bottom: 1px solid rgba(183, 110, 121, 0.22);
}
@media (min-width: 760px) {
  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--esp-7); }
}
.rodape__marca { display: flex; flex-direction: column; gap: var(--esp-3); align-items: flex-start; }
.rodape__logo { width: 84px; height: 84px; mix-blend-mode: multiply; }
.rodape__frase { font-size: var(--txt-sm); color: var(--cor-texto-suave); max-width: 38ch; }
.rodape h3 {
  font-family: var(--fonte-texto);
  font-size: var(--txt-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cor-acento);
  margin-bottom: var(--esp-4);
}
.rodape__lista { list-style: none; padding: 0; margin: calc(var(--esp-3) * -1) 0; display: grid; }
.rodape__lista li { margin: 0; }
.rodape__lista a {
  display: inline-block;
  /* padding-block (em vez de aumentar a fonte) garante uma área de toque
     confortável no celular sem alterar a hierarquia visual do texto. */
  padding-block: var(--esp-3);
  font-size: var(--txt-sm); color: var(--cor-texto); text-decoration: none;
}
.rodape__lista a:hover { color: var(--cor-acento); text-decoration: underline; }
.rodape__social { display: flex; gap: var(--esp-3); margin-top: var(--esp-4); }
.rodape__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--taupe-claro); border-radius: var(--raio-pill);
  color: var(--cor-acento);
  transition: background-color var(--transicao), border-color var(--transicao);
}
.rodape__social a:hover { background-color: var(--blush-pink); border-color: var(--rose-gold); }
.rodape__social svg { width: 19px; height: 19px; }
.rodape__base {
  display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-5);
  justify-content: space-between; align-items: center;
  padding-top: var(--esp-5);
  font-size: var(--txt-xs); color: var(--cor-texto-suave);
}
.rodape__base a { display: inline-block; padding-block: var(--esp-3); color: var(--cor-texto-suave); }

/* -------------------------------------------------------------------------
   15. BOTÃO FLUTUANTE DE WHATSAPP
   ------------------------------------------------------------------------- */
.whats-flutuante {
  position: fixed;
  right: var(--esp-4);
  bottom: calc(var(--esp-4) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 48px;
  padding: 0.75rem 1.1rem;
  background-color: var(--mauve-escuro); color: #fff;
  border-radius: var(--raio-pill);
  box-shadow: var(--sombra-media);
  font-size: var(--txt-sm); font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transicao), transform var(--transicao);
}
.whats-flutuante:hover { background-color: #7A4E54; color: #fff; transform: translateY(-2px); }
.whats-flutuante svg { width: 20px; height: 20px; flex: none; }
.whats-flutuante span { display: none; }
@media (min-width: 560px) { .whats-flutuante span { display: inline; } }

/* -------------------------------------------------------------------------
   16. APRESENTAÇÃO COMPACTA DA MARCA (home)
   Deliberadamente menor que o tratamento de "sobre.html": foto pequena,
   texto curto, um único CTA — para não duplicar visualmente a página Sobre.
   ------------------------------------------------------------------------- */
.marca-intro {
  display: flex; flex-direction: column;
  gap: var(--esp-6);
  align-items: center;
  text-align: center;
}
.marca-intro__foto {
  /* Proporção vertical (não quadrada): um quadrado forçava o corte no
     topo da cabeça. Retrato 4:5, com --foco-y configurável por foto. */
  width: 172px; flex: none;
  aspect-ratio: var(--proporcao, 4 / 5);
  border-radius: var(--raio-lg);
  object-fit: var(--ajuste, cover);
  object-position: center var(--foco-y, 50%);
  box-shadow: var(--sombra-suave);
  background-color: var(--champagne);
}
.marca-intro__texto { max-width: 62ch; }
.marca-intro__texto h2 { margin-bottom: var(--esp-3); }
.marca-intro__texto p { color: var(--cor-texto-suave); }

@media (min-width: 700px) {
  .marca-intro { flex-direction: row; text-align: left; }
}

/* -------------------------------------------------------------------------
   16-B. OFERTA GRATUITA (material de baixo compromisso)
   Visualmente distinta do bloco pago da mentoria: borda rosé em vez de
   fundo em degradê, para não confundir "grátis" com "pago".
   ------------------------------------------------------------------------- */
.oferta-gratuita {
  display: flex; flex-direction: column;
  gap: var(--esp-4);
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  background-color: #fff;
  border: 1.5px solid var(--blush-pink);
  border-radius: var(--raio-lg);
}
.oferta-gratuita__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--raio-pill);
  background-color: var(--champagne);
  color: var(--cor-acento);
}
.oferta-gratuita__icone svg { width: 24px; height: 24px; }
.oferta-gratuita h2 { margin-bottom: var(--esp-2); }
.oferta-gratuita p { color: var(--cor-texto-suave); max-width: 52ch; }

/* -------------------------------------------------------------------------
   16-C. CATEGORIAS RESUMIDAS (home)
   Versão condensada da grade de conteúdos: sem fotos grandes, para não
   duplicar visualmente a página de Conteúdos.
   ------------------------------------------------------------------------- */
.categorias-resumo {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--esp-4);
}
@media (min-width: 640px) { .categorias-resumo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .categorias-resumo { grid-template-columns: repeat(3, 1fr); } }
.categorias-resumo li {
  margin: 0;
  display: flex; gap: var(--esp-3); align-items: flex-start;
  padding: var(--esp-4);
  background-color: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
}
.categorias-resumo__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--raio-pill);
  background-color: var(--champagne);
  color: var(--cor-acento);
}
.categorias-resumo__icone svg { width: 18px; height: 18px; }
.categorias-resumo h3 { font-size: var(--txt-base); margin-bottom: var(--esp-1); }
.categorias-resumo p { font-size: var(--txt-sm); color: var(--cor-texto-suave); margin: 0; }

/* -------------------------------------------------------------------------
   16-D. CARTÃO DE CONTEÚDO SEM FOTO PESSOAL — composição gráfica
   Ocupa exatamente a mesma área/altura/moldura que a <img> ocuparia nos
   outros cartões da grade (mesmo .cartao-conteudo__figura, mesma
   aspect-ratio 3/2), só que preenchida com gradiente + ícone da marca
   em vez de uma fotografia. Nunca uma mulher de banco de imagens. Sem
   uso no momento — disponível para uma futura categoria sem foto.
   ------------------------------------------------------------------------- */
.cartao-conteudo__figura--grafico {
  aspect-ratio: var(--proporcao, 3 / 2);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--champagne) 0%, var(--blush-pink) 100%);
}
.cartao-conteudo__grafico-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--raio-pill);
  background-color: rgba(255,255,255,0.6);
  color: var(--mauve-escuro);
}
.cartao-conteudo__grafico-icone svg { width: 30px; height: 30px; }

/* -------------------------------------------------------------------------
   16-D-2. CARTÃO COM MOLDURA INTERNA
   Para fotos muito verticais que não cabem inteiras (cabeça + o que a
   mão segura) dentro da moldura larga (3:2) dos cartões de conteúdo
   sem cortar a cabeça. Em vez de espremer a foto na largura toda do
   cartão com `cover` (o que força um recorte agressivo), ela ocupa só
   uma faixa central mais estreita — na prática, um "cover" bem mais
   generoso, porque a faixa é mais próxima da proporção da foto — e o
   restante do espaço fica com um fundo em degradê da marca. Mesma
   altura e alinhamento dos demais cartões da grade.
   Hoje em uso: "Cartões e pontos", em conteudos.html.
   ------------------------------------------------------------------------- */
.cartao-conteudo__figura--moldura {
  aspect-ratio: var(--proporcao, 3 / 2);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--champagne) 0%, var(--blush-pink) 100%);
}
.cartao-conteudo__figura--moldura img {
  width: var(--largura-moldura, 70%); height: 100%;
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-suave);
  object-fit: cover;
  object-position: center var(--foco-y, 50%);
}

/* -------------------------------------------------------------------------
   16-E. ENQUADRAMENTO PESSOAL — sistema configurável por foto

   Nenhum arquivo de foto é recortado fisicamente. Todo ajuste de
   enquadramento acontece aqui, por CSS, através de propriedades
   customizadas que cada <img> pode declarar no próprio `style`,
   sem herdar um recorte genérico de outra foto:

     --proporcao   a "moldura" da foto (padrão: 4/5 nos retratos,
                   3/2 nas paisagens). Ex.: --proporcao: 2/3 para
                   um enquadramento mais vertical, com menos corte.
     --foco-y      em que altura da FOTO ORIGINAL o quadro começa a
                   ser mostrado (0% = topo da imagem original,
                   100% = base). Valores baixos (5–10%) preservam
                   espaço acima do cabelo em fotos de retrato.
     --ajuste      'cover' (padrão, preenche o quadro) ou 'contain'
                   (mostra a foto inteira, sem cortar nada, deixando
                   uma faixa de fundo rosé/champagne quando sobrar
                   espaço — ver `background-color` já definido nos
                   componentes `.duo__figura img`, `.hero__foto` e
                   `.marca-intro__foto`).
     --altura-mobile / --altura-desktop
                   limite opcional de altura (ex.: 480px), para uma
                   foto não "tomar a tela toda" em telas estreitas.
                   Sem uso hoje; disponível para fotos futuras.

   Exemplo de uso direto no HTML:
     <img src="assets/img/thienne-x.jpg"
          style="--proporcao:2/3; --foco-y:4%">

   Os valores usados atualmente em cada foto pessoal do site estão
   comentados ao lado de cada <img>, na própria página HTML.
   ------------------------------------------------------------------------- */
.duo__figura img,
.hero__foto,
.marca-intro__foto {
  max-height: var(--altura-mobile, none);
}
@media (min-width: 900px) {
  .duo__figura img,
  .hero__foto,
  .marca-intro__foto {
    max-height: var(--altura-desktop, none);
  }
}

/* -------------------------------------------------------------------------
   17. CONTEÚDO EDITORIAL (política de privacidade, artigos)
   ------------------------------------------------------------------------- */
.prosa { max-width: var(--largura-texto); }
.prosa h2 { font-size: var(--txt-xl); margin-top: var(--esp-7); }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-size: var(--txt-md); margin-top: var(--esp-5); }
.prosa ul { padding-left: 1.2rem; }
.prosa li { color: var(--cor-texto-suave); }
.prosa p { color: var(--cor-texto-suave); }

/* -------------------------------------------------------------------------
   18. IMPRESSÃO
   ------------------------------------------------------------------------- */
@media print {
  .cabecalho, .rodape, .whats-flutuante, .menu-painel { display: none !important; }
  body { background: #fff; color: #000; }
}

/* -------------------------------------------------------------------------
   19. INSTAGRAM — publicações incorporadas (embed oficial)
   Incorporação manual, sem widget de terceiros: usa o embed.js oficial
   do próprio Instagram, carregado uma única vez para todos os posts da
   página. Nenhum token, login ou credencial é necessário — funciona com
   qualquer post público. Para trocar os posts, edite o HTML (ver
   comentário em conteudos.html).
   ------------------------------------------------------------------------- */
.instagram-post {
  /* Reserva de espaço para o embed.js não "pular" a página quando troca
     o cartão de reserva pelo post carregado (evita salto de layout). */
  min-height: 420px;
}
/* O Instagram define largura fixa via `style` inline no próprio embed.
   Sobrescrevemos com !important (a única forma de vencer um `style`
   inline a partir do CSS) para garantir 100% de largura e impedir
   rolagem horizontal em qualquer tela — inclusive abaixo do
   min-width:326px que o Instagram usa por padrão. */
.instagram-media {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------------------
   20. TRILHA "COMECE AQUI" — índice, mapa da jornada e tópicos
   Reaproveita .passos/.passo (numeração), .aviso (alertas) e a paleta já
   existentes. Só os elementos realmente novos ganham classe própria.
   ------------------------------------------------------------------------- */

/* Links do índice e do Mapa da Jornada usam o mesmo <h3> do .passo — só
   precisam herdar a cor certa e ganhar sublinhado ao focar/passar o mouse. */
.pagina-comece-aqui .passo h3 a {
  color: inherit;
  text-decoration: none;
}
.pagina-comece-aqui .passo h3 a:hover,
.pagina-comece-aqui .passo h3 a:focus-visible {
  color: var(--cor-acento);
  text-decoration: underline;
}

/* Um tópico da trilha */
.topico-trilha {
  position: relative;
  padding-top: var(--esp-7);
  margin-top: var(--esp-7);
  border-top: 1px solid var(--cor-borda);
}
.topico-trilha:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.topico-trilha__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin: 0 0 var(--esp-3);
  border-radius: var(--raio-pill);
  border: 1.5px solid var(--rose-gold);
  color: var(--cor-acento);
  font-family: var(--fonte-titulo); font-size: var(--txt-base); font-weight: 700;
}
.topico-trilha h3 { font-size: var(--txt-lg); }
.topico-trilha > p { color: var(--cor-texto-suave); }

/* Exemplo prático / Ação prática — diferenciados só pela cor do friso
   lateral, sem caixa cheia nem sombra, para não pesar a leitura. */
.topico-trilha__bloco {
  border-left: 3px solid var(--cor-borda-forte);
  padding: var(--esp-1) 0 var(--esp-1) var(--esp-4);
  margin-block: var(--esp-5);
}
.topico-trilha__bloco p { margin: 0; color: var(--cor-texto); font-size: var(--txt-sm); }
.topico-trilha__bloco--exemplo { border-left-color: var(--rose-gold); }
.topico-trilha__bloco--acao { border-left-color: var(--mauve-escuro); }
.topico-trilha__rotulo {
  display: block;
  font-size: var(--txt-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cor-texto-suave);
  margin-bottom: var(--esp-1);
}

.topico-trilha__ligacao {
  font-style: italic;
  color: var(--cor-texto-suave) !important;
  margin-top: var(--esp-5);
}
.topico-trilha__voltar {
  display: inline-block;
  margin-top: var(--esp-4);
  font-size: var(--txt-sm); font-weight: 600;
  color: var(--cor-acento);
  text-decoration: underline; text-underline-offset: 3px;
}
.topico-trilha__voltar:hover { color: var(--rose-gold); }

/* -------------------------------------------------------------------------
   21. REVISÃO VISUAL "COMECE AQUI" — hero pessoal, mapa ilustrado, ícones
   de apoio, pausa pessoal, alternância de fundos e CTA gráfico.
   Toda regra desta seção é prefixada por .pagina-comece-aqui: nada aqui
   é lido em nenhuma outra página, mesmo reaproveitando nomes de classe
   já usados (ex.: .topico-trilha__numero dentro de .topico-trilha__cabecalho).
   ------------------------------------------------------------------------- */

/* --- 21.1 Hero pessoal: texto + fotografia em duas colunas --- */
.pagina-comece-aqui .hero-pessoal__grade {
  display: grid;
  gap: var(--esp-6);
}
.pagina-comece-aqui .hero-pessoal__figura {
  margin: 0 auto;
  padding: 10px;
  max-width: 320px;
  background-color: #fff;
  border: 1.5px solid var(--blush-pink);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-media);
}
.pagina-comece-aqui .hero-pessoal__foto {
  display: block;
  width: 100%;
  /* Proporção igual à foto original (2080x3120 = 2/3): nenhum corte é
     aplicado, então cabeça, mão e celular ficam sempre inteiros. */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center top;
  border-radius: calc(var(--raio-lg) - 6px);
  background-color: var(--champagne);
}
.pagina-comece-aqui .hero-pessoal__intro { margin-top: 0; }

@media (min-width: 900px) {
  .pagina-comece-aqui .hero-pessoal__grade {
    grid-template-columns: 1.1fr 0.9fr;
    column-gap: var(--esp-8);
    grid-template-areas:
      "topo   figura"
      "intro  figura";
  }
  .pagina-comece-aqui .hero-pessoal__topo  { grid-area: topo; }
  .pagina-comece-aqui .hero-pessoal__intro { grid-area: intro; }
  .pagina-comece-aqui .hero-pessoal__figura {
    grid-area: figura;
    align-self: center;
    justify-self: end;
    margin: 0;
    max-width: 360px;
  }
}

/* --- 21.2 Mapa da Jornada: rota visual conectada --- */
.pagina-comece-aqui .mapa-rota {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--esp-6);
}
.pagina-comece-aqui .mapa-rota::before {
  content: "";
  position: absolute;
  top: 22px; bottom: 22px; left: 21px;
  width: 2px;
  background: linear-gradient(var(--rose-gold), var(--blush-pink));
  opacity: 0.55;
}
.pagina-comece-aqui .mapa-etapa {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--esp-4);
  margin: 0;
}
.pagina-comece-aqui .mapa-etapa__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background-color: #fff;
  border: 1.5px solid var(--rose-gold);
  color: var(--cor-acento);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--txt-base);
}
.pagina-comece-aqui .mapa-etapa__conteudo {
  display: flex; align-items: center; gap: var(--esp-3);
}
.pagina-comece-aqui .mapa-etapa__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--raio-pill);
  background-color: var(--champagne);
  color: var(--cor-acento);
}
.pagina-comece-aqui .mapa-etapa__icone svg { width: 17px; height: 17px; }
.pagina-comece-aqui .mapa-etapa__conteudo h3 { font-size: var(--txt-md); margin: 0; }

@media (min-width: 900px) {
  .pagina-comece-aqui .mapa-rota { max-width: 760px; margin-inline: auto; }
  .pagina-comece-aqui .mapa-rota::before { left: 50%; margin-left: -1px; }
  .pagina-comece-aqui .mapa-etapa {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: center;
    column-gap: var(--esp-4);
  }
  .pagina-comece-aqui .mapa-etapa__numero { grid-column: 2; grid-row: 1; justify-self: center; }
  .pagina-comece-aqui .mapa-etapa__conteudo {
    grid-column: 3; grid-row: 1; justify-self: start; text-align: left;
  }
  .pagina-comece-aqui .mapa-etapa:nth-child(even) .mapa-etapa__conteudo {
    grid-column: 1; justify-self: end; text-align: right;
    flex-direction: row-reverse;
  }
}

/* --- 21.3 Resumo visual (tópico 1): compra → pontos → milhas ---
   Mobile-first: sequência vertical simples (sem grade). A partir de 900px
   vira uma grade explícita de 9 colunas (5 blocos + 4 setas estreitas),
   numa única linha — nunca depende de flex-wrap, então não existe cenário
   em que uma seta fique sozinha numa linha. */
.pagina-comece-aqui .fluxo-pontos {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-6) 0 var(--esp-3);
}
.pagina-comece-aqui .fluxo-pontos__no {
  background-color: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--txt-xs); font-weight: 600;
  color: var(--cor-texto); text-align: center;
  max-width: 260px;
}
.pagina-comece-aqui .fluxo-pontos__seta {
  width: 16px; height: 16px; flex: none; color: var(--rose-gold);
  transform: rotate(90deg); /* aponta para baixo na sequência vertical */
}
.pagina-comece-aqui .fluxo-pontos__nota {
  font-size: var(--txt-xs); color: var(--cor-texto-suave);
  font-style: italic; text-align: center; margin: 0 0 var(--esp-3);
}

@media (min-width: 900px) {
  .pagina-comece-aqui .fluxo-pontos {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0 var(--esp-2);
  }
  .pagina-comece-aqui .fluxo-pontos__no {
    max-width: none;
    padding: var(--esp-2) var(--esp-3);
    font-size: 0.7rem;
  }
  .pagina-comece-aqui .fluxo-pontos__seta {
    width: 14px; height: 14px;
    transform: none; /* aponta para a direita na sequência horizontal */
  }
}

/* --- 21.4 Ícone de apoio ao lado do número/título de cada tópico --- */
.pagina-comece-aqui .topico-trilha__cabecalho {
  display: flex; align-items: center; gap: var(--esp-3);
  margin-bottom: var(--esp-3);
}
.pagina-comece-aqui .topico-trilha__cabecalho .topico-trilha__numero { margin: 0; }
.pagina-comece-aqui .topico-trilha__cabecalho h3 { margin: 0; }
.pagina-comece-aqui .topico-trilha__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--raio-pill);
  background-color: var(--champagne);
  color: var(--cor-acento);
}
.pagina-comece-aqui .topico-trilha__icone svg { width: 16px; height: 16px; }

/* --- 21.5 Pausa de conexão pessoal (entre os tópicos 3 e 4) --- */
.pagina-comece-aqui .pausa-pessoal {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.pagina-comece-aqui .pausa-pessoal::before {
  content: "";
  display: block; width: 40px; height: 2px;
  background-color: var(--mauve-escuro);
  margin: 0 auto var(--esp-5);
}
.pagina-comece-aqui .pausa-pessoal__frase {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: var(--txt-xl);
  line-height: 1.4;
  color: var(--cor-titulo);
  margin-bottom: var(--esp-4);
}
.pagina-comece-aqui .pausa-pessoal__assinatura {
  font-family: var(--fonte-destaque);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  color: var(--mauve-escuro);
  margin: 0;
}

/* --- 21.6 Alternância suave de fundos (tons já existentes na paleta) --- */
.pagina-comece-aqui .secao--rose-suave {
  background: linear-gradient(180deg, rgba(235, 197, 192, 0.30) 0%, var(--off-white) 65%);
}

/* --- 21.7 Elemento gráfico no CTA final --- */
.pagina-comece-aqui .mentoria-cta__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin: 0 auto var(--esp-4);
  border-radius: var(--raio-pill);
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--cor-acento);
}
.pagina-comece-aqui .mentoria-cta__icone svg { width: 24px; height: 24px; }

/* --- 21.8 Âncoras: evitar que a etiqueta acima do título fique atrás do
   cabeçalho fixo. O `id` de destino fica no <h2>, mas a etiqueta (.etiqueta)
   vem visualmente ANTES dele — por isso o scroll-padding-top global (6rem)
   não é suficiente aqui: dá margem para o cabeçalho, mas não para a
   etiqueta também. Estes três títulos são os únicos desta página com uma
   etiqueta imediatamente acima; o valor soma a altura do cabeçalho fixo
   (~73px) com a altura da etiqueta (~32px) e uma folga confortável. */
.pagina-comece-aqui #t-mapa,
.pagina-comece-aqui #t-indice,
.pagina-comece-aqui #t-cta {
  scroll-margin-top: 9rem;
}

/* --- 21.9 Espaço entre o fim do índice e o início dos tópicos ---
   `.secao` aplica padding-block igual nas duas extremidades; aqui as duas
   seções vizinhas somavam esse padding duas vezes. Reduz só os dois lados
   dessa junção específica — o resto de `.secao` (usado em todo o site)
   continua intacto. */
.pagina-comece-aqui section[aria-labelledby="t-indice"] {
  padding-bottom: clamp(1.75rem, 1rem + 3vw, 3rem);
}
.pagina-comece-aqui section[aria-labelledby="t-topicos"] {
  padding-top: clamp(1.75rem, 1rem + 3vw, 3rem);
}

/* =========================================================================
   22. QUIZ — "Descubra seu nível de conhecimento em milhas"
   Toda regra desta seção é prefixada por .pagina-quiz: não é lida em
   nenhuma outra página. Reaproveita tokens e componentes já existentes
   (.btn, .etiqueta, .subtitulo, cores de sucesso/erro do formulário) —
   nenhuma cor ou fonte nova é introduzida.
   ========================================================================= */

.pagina-quiz .quiz__tela { max-width: 640px; margin-inline: auto; }

.pagina-quiz .quiz__transparencia {
  margin-top: var(--esp-4);
  font-size: var(--txt-xs);
  color: var(--cor-texto-suave);
  max-width: 48ch;
}

/* --- Barra de progresso --- */
.pagina-quiz .quiz__progresso {
  display: flex; flex-direction: column; gap: var(--esp-2);
  margin-bottom: var(--esp-7);
}
.pagina-quiz .quiz__progresso progress {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; border: none; border-radius: var(--raio-pill);
  overflow: hidden;
}
.pagina-quiz .quiz__progresso progress::-webkit-progress-bar {
  background-color: var(--cor-borda);
  border-radius: var(--raio-pill);
}
.pagina-quiz .quiz__progresso progress::-webkit-progress-value {
  background-color: var(--mauve-escuro);
  border-radius: var(--raio-pill);
  transition: width var(--transicao);
}
.pagina-quiz .quiz__progresso progress::-moz-progress-bar {
  background-color: var(--mauve-escuro);
  border-radius: var(--raio-pill);
}
.pagina-quiz .quiz__progresso-texto {
  margin: 0;
  font-size: var(--txt-sm); font-weight: 600;
  color: var(--cor-texto-suave);
}

/* --- Uma pergunta --- */
.pagina-quiz .quiz__pergunta {
  border: none; padding: 0; margin: 0;
}
.pagina-quiz .quiz__pergunta legend {
  padding: 0;
  margin-bottom: var(--esp-5);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-lg);
  font-weight: 700;
  color: var(--cor-titulo);
  line-height: 1.35;
}

.pagina-quiz .quiz__alternativas {
  display: flex; flex-direction: column; gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}

.pagina-quiz .quiz__alternativa {
  display: flex; align-items: flex-start; gap: var(--esp-3);
  min-height: 44px;
  padding: var(--esp-4) var(--esp-5);
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background-color: #fff;
  cursor: pointer;
  transition: border-color var(--transicao), background-color var(--transicao);
}
.pagina-quiz .quiz__alternativa:hover { border-color: var(--rose-gold); }
.pagina-quiz .quiz__alternativa input[type="radio"] {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  accent-color: var(--mauve-escuro);
}
.pagina-quiz .quiz__alternativa span {
  font-size: var(--txt-base); color: var(--cor-texto); line-height: 1.5;
}

/* Estados após responder (aplicados via JS) */
.pagina-quiz .quiz__alternativa--bloqueada { cursor: default; }
.pagina-quiz .quiz__alternativa--bloqueada:hover { border-color: var(--cor-borda-forte); }
.pagina-quiz .quiz__alternativa--correta {
  border-color: #BFD9C2; background-color: #EEF6EF;
}
.pagina-quiz .quiz__alternativa--correta:hover { border-color: #BFD9C2; }
.pagina-quiz .quiz__alternativa--incorreta {
  border-color: #E8B9BE; background-color: #FDF0F1;
}
.pagina-quiz .quiz__alternativa--incorreta:hover { border-color: #E8B9BE; }
/* Alternativas desabilitadas continuam com texto legível — não usamos a
   opacidade padrão do navegador para elementos desativados. */
.pagina-quiz .quiz__alternativa input:disabled { opacity: 1; }

.pagina-quiz .quiz__explicacao {
  background-color: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--rose-gold);
  border-radius: var(--raio-sm);
  padding: var(--esp-4) var(--esp-5);
  margin-bottom: var(--esp-5);
}
.pagina-quiz .quiz__explicacao p {
  margin: 0; font-size: var(--txt-sm); color: var(--cor-texto-suave);
}

.pagina-quiz .quiz__navegacao {
  display: flex; justify-content: space-between; gap: var(--esp-3);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

@media (min-width: 640px) {
  .pagina-quiz .quiz__navegacao .btn { min-width: 140px; }
}

/* =========================================================================
   23. QUIZ — abertura e resultado (revisão visual)
   Só a APARÊNCIA de duas telas muda aqui: tela inicial e tela de resultado.
   As perguntas (seção 22 acima) não são tocadas. Continua tudo prefixado
   por .pagina-quiz.
   ========================================================================= */

/* Abertura e resultado ganham mais largura que as perguntas (que preferem
   uma coluna estreita, mais fácil de ler) para caber a foto ao lado. */
.pagina-quiz #quiz-tela-inicio,
.pagina-quiz #quiz-tela-resultado {
  max-width: 1040px;
}

/* --- 23.1 Moldura de foto compartilhada (abertura + resultado) ---
   Sem aspect-ratio forçado: a proporção real de cada fotografia é
   preservada (largura 100%, altura automática), então nada é cortado —
   só a moldura ao redor muda de acordo com o formato de cada imagem. */
.pagina-quiz .quiz__abertura-figura,
.pagina-quiz .quiz__resultado-figura {
  margin: 0 auto;
  padding: 10px;
  max-width: 320px;
  background-color: #fff;
  border: 1.5px solid var(--blush-pink);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-media);
}
.pagina-quiz .quiz__abertura-foto,
.pagina-quiz .quiz__resultado-foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--raio-lg) - 6px);
  background-color: var(--champagne);
}

/* --- 23.2 Tela inicial: texto + indicadores + botão | foto --- */
.pagina-quiz .quiz__abertura-grade {
  display: grid;
  gap: var(--esp-6);
}
.pagina-quiz .quiz__abertura-rodape { margin-top: 0; }

.pagina-quiz .quiz__indicadores {
  list-style: none; margin: var(--esp-5) 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5);
}
.pagina-quiz .quiz__indicador {
  display: flex; align-items: center; gap: var(--esp-2);
  margin: 0;
  font-size: var(--txt-sm); font-weight: 600;
  color: var(--cor-texto-suave);
}
.pagina-quiz .quiz__indicador-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--raio-pill);
  background-color: var(--champagne);
  color: var(--cor-acento);
}
.pagina-quiz .quiz__indicador-icone svg { width: 15px; height: 15px; }

@media (min-width: 900px) {
  .pagina-quiz .quiz__abertura-grade {
    grid-template-columns: 1.1fr 0.9fr;
    column-gap: var(--esp-8);
    grid-template-areas:
      "topo    figura"
      "rodape  figura";
  }
  .pagina-quiz .quiz__abertura-topo   { grid-area: topo; }
  .pagina-quiz .quiz__abertura-rodape { grid-area: rodape; align-self: start; }
  .pagina-quiz .quiz__abertura-figura {
    grid-area: figura;
    align-self: center;
    justify-self: end;
    margin: 0;
    max-width: 360px;
  }
}

/* --- 23.3 Selo da pontuação — não é uma nota, é um ponto de partida --- */
.pagina-quiz .quiz__selo {
  display: inline-flex; align-items: baseline; gap: var(--esp-2);
  margin-bottom: var(--esp-5);
  padding: var(--esp-2) var(--esp-5);
  background-color: var(--champagne);
  border-radius: var(--raio-pill);
}
.pagina-quiz .quiz__selo-numero {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xl); font-weight: 700;
  color: var(--cor-acento);
}
.pagina-quiz .quiz__selo-legenda {
  font-size: var(--txt-sm); font-weight: 600;
  color: var(--cor-texto-suave);
}

/* --- 23.4 Tela de resultado: texto | foto | botões (mobile, nessa ordem);
   no desktop, texto+botões formam a coluna esquerda e a foto vai à direita. */
.pagina-quiz .quiz__resultado-grade {
  display: grid;
  gap: var(--esp-6);
}
.pagina-quiz .quiz__resultado-rodape { margin-top: 0; }

/* "Seu próximo passo" (Fase 3) — título, texto, ação e "Refazer o quiz"
   ficam todos dentro de .quiz__resultado-rodape, como uma única unidade. */
.pagina-quiz .quiz__proximo-passo-titulo {
  font-size: var(--txt-md);
  margin-bottom: var(--esp-2);
}
.pagina-quiz .quiz__proximo-passo-texto {
  color: var(--cor-texto-suave);
  margin-bottom: var(--esp-4);
}
.pagina-quiz .quiz__resultado-rodape .btn--texto { margin-top: var(--esp-3); }

@media (max-width: 599px) {
  .pagina-quiz .quiz__resultado-rodape .grupo-botoes { flex-direction: column; align-items: stretch; }
  .pagina-quiz .quiz__resultado-rodape .grupo-botoes .btn { width: 100%; }
}

@media (min-width: 900px) {
  .pagina-quiz .quiz__resultado-grade {
    grid-template-columns: 1.1fr 0.9fr;
    column-gap: var(--esp-8);
    grid-template-areas:
      "topo    figura"
      "rodape  figura";
  }
  .pagina-quiz .quiz__resultado-topo   { grid-area: topo; }
  .pagina-quiz .quiz__resultado-rodape { grid-area: rodape; align-self: start; margin-top: var(--esp-5); }
  /* Botões empilhados (em vez de lado a lado) para que "Conversar com a
     Thienne sobre isso" tenha a largura inteira da coluna e não precise
     quebrar em duas linhas. */
  .pagina-quiz .quiz__resultado-rodape .grupo-botoes {
    flex-direction: column;
    align-items: flex-start;
  }
  .pagina-quiz .quiz__resultado-rodape .grupo-botoes .btn {
    white-space: nowrap;
  }
  .pagina-quiz .quiz__resultado-figura {
    grid-area: figura;
    align-self: center;
    justify-self: end;
    margin: 0;
    max-width: 360px;
  }
}

/* =========================================================================
   24. CONTEÚDOS — cartão de perfil do Instagram
   Corrige o 6º cartão da grade de "Conteúdos", que usava só um ícone solto
   e parecia vazio perto dos outros 5 cartões (que têm fotografia). Regras
   restritas a `.cartao-instagram`, uma classe extra só deste cartão — o
   componente `.cartao` compartilhado com o resto do site não é alterado.
   ========================================================================= */
.cartao-instagram__avatar {
  position: relative;
  width: 96px; height: 96px;
  margin: 0 auto var(--esp-4);
}
.cartao-instagram__foto {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center var(--foco-y, 50%);
  border: 3px solid var(--rose-gold);
  background-color: #fff;
}
.cartao-instagram__selo {
  position: absolute;
  right: -2px; bottom: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background-color: #fff;
  border: 1.5px solid var(--blush-pink);
  color: var(--cor-acento);
}
.cartao-instagram__selo svg { width: 15px; height: 15px; }
.cartao-instagram__usuario {
  margin: 0 0 var(--esp-2);
  font-size: var(--txt-sm); font-weight: 700;
  color: var(--cor-acento);
  text-align: center;
}

@media (min-width: 640px) {
  .cartao-instagram__avatar { width: 104px; height: 104px; }
}