/* ============================================================================
   guia.css — design system das páginas de conteúdo (a seção /guia)
   COMPARTILHADO por todas as páginas do guia (playbook §7 / §4.1).
   Tokens herdados de css/style.css. Nada inventado além do que a coluna
   de leitura longa exige (largura de leitura, tamanho do H1 de artigo).
   Autocontido: uma página do guia precisa só deste arquivo + Poppins.
   ========================================================================== */

/* ===== Tokens (espelham css/style.css) ===== */
:root {
  --green: #00a752;        /* faísca: cabeçalho de tabela como acento, dots. Nunca texto pequeno por cima */
  --green-dark: #006b34;   /* o verde que LÊ: links, números de destaque, borda dos callouts */
  --green-soft: #e8f0eb;   /* tint: realce suave, zebra de tabela */
  --ink: #000000;          /* títulos e CTA primário */
  --bg: #ffffff;
  --surface: #f3f3f3;      /* fundo de blocos */
  --line: #e2e2e2;         /* divisórias e bordas */
  --text: #1a1a1a;
  --muted: #8a8a8a;        /* legendas, texto secundário */

  --radius: 22px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow: 0 8px 24px rgba(0, 0, 0, .06);

  /* escala do site */
  --fs-title:   clamp(1.375rem, 3.5vw, 1.625rem); /* H2 de seção */
  --fs-headline: 1.125rem;                        /* H3 */
  --fs-body:     1rem;
  --fs-subhead:  .9375rem;
  --fs-caption:  .8125rem;
  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* ------ tokens próprios do guia (o que a leitura longa exige) ------ */
  --guia-read: 680px;                              /* coluna de leitura estreita */
  --guia-wide: 820px;                              /* peça-âncora pode sangrar até aqui */
  --guia-toc-w: 200px;                             /* rail do índice no desktop */
  --guia-rail-gap: clamp(28px, 4vw, 44px);
  --guia-gutter: clamp(20px, 4vw, 32px);
  --guia-section-y: clamp(40px, 6vw, 60px);        /* respiro entre seções */
  --guia-fs-h1:   clamp(2rem, 4.4vw, 2.625rem);    /* H1 de artigo (maior que o app, leitura longa) */
  --guia-fs-lede: clamp(1.125rem, 1.7vw, 1.3125rem);
}

/* ===== Reset mínimo ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* height:auto anula o atributo height="" da tag (que é só para reservar espaço
   e evitar pulo de layout). Sem isso a imagem estica na vertical quando a largura
   encolhe na coluna. Assim ela escala sempre pela proporção original, em qualquer tela. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ===== Header: barra do logo fixa e semitransparente (igual à home) ===== */
.guia-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.guia-nav__in {
  max-width: 1064px;
  margin-inline: auto;
  padding-inline: var(--guia-gutter);
  height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.guia-nav__logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--green); font-size: 1.15rem;
}
.guia-nav__logo img { height: 24px; width: auto; display: block; }
/* Navegação da home trazida para o guia (leva às seções reais do site). */
.guia-nav__links {
  display: flex; gap: 26px;
  color: var(--muted); font-size: .95rem; font-weight: 500;
}
.guia-nav__links a:hover { color: var(--text); }
@media (max-width: 720px) { .guia-nav__links { display: none; } }
/* CTA do header é ghost (contornado), não preto preenchido: o único primário
   preto vive no fim da página (regra "um primário por momento"). */
.guia-nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-subhead);
  padding: 9px 16px; white-space: nowrap;
}
.guia-nav__cta:hover { background: var(--surface); }
.guia-nav__cta svg { width: 12px; height: 12px; fill: currentColor; }

/* ===== Layout: rail do índice + coluna de leitura ===== */
.guia {
  max-width: 1064px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 44px) var(--guia-gutter) 0;
}
.guia-grid {
  display: grid;
  grid-template-columns: var(--guia-toc-w) minmax(0, var(--guia-wide));
  justify-content: center;
  column-gap: var(--guia-rail-gap);
  align-items: start;
}
.guia-main { min-width: 0; }

/* texto vive na medida de leitura (~680), alinhado à esquerda dentro da coluna.
   A peça-âncora (.guia-wide) escapa e usa a coluna toda (~820).
   Cada bloco de texto é capado individualmente; a .guia-body ocupa a largura
   total da coluna para que a tabela possa sangrar mais larga que o texto. */
.guia-crumb, .guia-h1, .guia-lede, .guia-rule, .guia-toc-m,
.guia-body > * { max-width: var(--guia-read); }
.guia-body { max-width: none; }
.guia-body > .guia-wide { max-width: none; }

/* ===== Abertura: breadcrumb + H1 + lede ===== */
.guia-crumb {
  font-size: var(--fs-subhead);
  color: var(--muted);
  margin-bottom: 18px;
}
.guia-crumb a { color: var(--muted); }
.guia-crumb a:hover { color: var(--green-dark); }
.guia-crumb b { color: var(--text); font-weight: 500; }

.guia-h1 {
  font-size: var(--guia-fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;        /* distribui as linhas do título, sem órfã solta */
}
.guia-lede {
  font-size: var(--guia-fs-lede);
  line-height: var(--lh-snug);
  color: var(--text);
  margin-top: 18px;
  text-wrap: pretty;         /* evita palavra sozinha na última linha */
}
.guia-lede b, .guia-lede strong { font-weight: 600; }

/* régua fina que fecha a abertura */
.guia-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: clamp(28px, 4vw, 40px) 0 0;
}

/* ===== Corpo do texto ===== */
.guia-body h2 {
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  color: var(--ink);
  margin-top: var(--guia-section-y);
  scroll-margin-top: 84px;
  text-wrap: balance;
}
.guia-body h3 {
  font-size: var(--fs-headline);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-top: 28px;
}
.guia-body p { margin-top: 16px; text-wrap: pretty; }
.guia-body li { text-wrap: pretty; }
.guia-body p:first-child { margin-top: 0; }
.guia-body strong, .guia-body b { font-weight: 600; }
.guia-body a {
  color: var(--green-dark);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--green-dark) 35%, transparent);
  text-underline-offset: 3px;
}
.guia-body a:hover { text-decoration-color: var(--green-dark); }

/* listas com marcador da marca */
.guia-body ul, .guia-body ol { margin-top: 16px; padding-left: 4px; }
.guia-body li { position: relative; padding-left: 26px; margin-top: 10px; }
.guia-body ul > li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
}
.guia-body ol { counter-reset: guia; }
.guia-body ol > li { counter-increment: guia; }
.guia-body ol > li::before {
  content: counter(guia);
  position: absolute; left: 0; top: .05em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-dark);
  font-size: .75rem; font-weight: 600;
  display: grid; place-items: center;
}

/* ===== Índice (TOC) ===== */
/* Desktop: rail fixo à esquerda. Mobile: bloco recolhível <details> abaixo do lede. */
.guia-toc {
  position: sticky;
  top: 88px;                 /* abaixo do header (64px) + respiro */
  align-self: start;
  font-size: var(--fs-subhead);
}
.guia-toc__title {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.guia-toc a {
  display: block;
  color: var(--muted);
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--line);
  line-height: var(--lh-snug);
}
.guia-toc a:hover { color: var(--green-dark); border-left-color: var(--green); }

.guia-toc-m { display: none; }   /* versão mobile, ligada no breakpoint */

/* ===== Imagem com legenda ===== */
.guia-fig { margin-top: 32px; }
.guia-fig img {
  width: 100%;
  height: auto;              /* proporção original preservada em qualquer largura */
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.guia-fig figcaption {
  margin-top: 10px;
  font-size: var(--fs-subhead);
  color: var(--muted);
}

/* Espaço de imagem preparado (placeholder). Quando a foto chegar, troca-se o
   .guia-ph por <img src="/assets/guia/..."> e mantém-se a <figcaption>. */
.guia-ph {
  aspect-ratio: 3 / 2;
  border: 1.5px dashed color-mix(in srgb, var(--green-dark) 40%, var(--line));
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(-45deg, transparent 0 12px, color-mix(in srgb, var(--green-soft) 55%, transparent) 12px 24px),
    var(--surface);
  display: grid; place-items: center; text-align: center;
  padding: 24px;
}
.guia-ph__in { max-width: 42ch; }
.guia-ph__icon {
  width: 34px; height: 34px; margin: 0 auto 12px;
  color: var(--green-dark); opacity: .8;
}
.guia-ph__icon svg { width: 100%; height: 100%; fill: currentColor; }
.guia-ph__tag {
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--green-dark); margin-bottom: 6px;
}
.guia-ph__desc { font-size: var(--fs-subhead); color: var(--text); line-height: var(--lh-snug); }
.guia-ph__alt { font-size: var(--fs-caption); color: var(--muted); margin-top: 8px; }

/* ===== Peça-âncora: tabela ===== */
.guia-wide { margin-top: 28px; }
.guia-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.guia-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-subhead);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.guia-table thead th {
  background: var(--green-soft);            /* tint legível; a faísca entra como acento (borda) */
  border-bottom: 2px solid var(--green);
  color: var(--green-dark);
  font-weight: 600;
  text-align: left;
  padding: 13px 16px;
  white-space: nowrap;
}
.guia-table tbody td {
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.guia-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--green-soft) 45%, var(--bg)); }
.guia-table__num { text-align: right; white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
.guia-table thead th.guia-table__num { text-align: right; }
.guia-table__what { color: var(--text); }
.guia-note {
  margin-top: 12px;
  font-size: var(--fs-caption);
  color: var(--muted);
  line-height: var(--lh-snug);
}

/* ===== Precificadora embutida (ferramenta grátis, §12) =====
   Calcula o preço de um serviço ao vivo, no navegador: abre no celular sem app,
   sem login, sem download. Ativada por js/guia-calc.js. É a peça de valor da
   página; não é um CTA, então NÃO usa o preto do primário (regra um-primário). */
.guia-calc {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3.5vw, 30px);
}
.guia-calc__tag {
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; color: var(--green-dark);
}
.guia-body h3.guia-calc__title {
  font-size: var(--fs-headline); font-weight: 600; color: var(--ink);
  margin-top: 2px; line-height: var(--lh-snug); text-wrap: balance;
}
.guia-body .guia-calc__desc { font-size: var(--fs-subhead); color: var(--text); margin-top: 4px; }

/* Campos: 2 colunas no desktop, 1 no celular */
.guia-calc__grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
@media (max-width: 520px) { .guia-calc__grid { grid-template-columns: 1fr; } }
.guia-calc__field { display: flex; flex-direction: column; gap: 6px; }
.guia-calc__field > span { font-size: var(--fs-subhead); font-weight: 500; color: var(--text); }
.guia-calc__field input {
  font-family: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 14px; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.guia-calc__field input:focus {
  outline: none; border-color: var(--green-dark);
  box-shadow: 0 0 0 3px var(--green-soft);
}

/* Resultado */
.guia-calc__out {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.guia-calc__out-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.guia-calc__out-row > span { font-size: var(--fs-subhead); color: var(--muted); }
.guia-calc__out-row > b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.guia-calc__out-main {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--green-soft); border-radius: 14px;
  padding: 14px 16px;
}
.guia-calc__out-main > span { font-size: var(--fs-subhead); font-weight: 600; color: var(--green-dark); }
.guia-calc__out-main > strong {
  font-size: 1.5rem; font-weight: 600; color: var(--green-dark);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.guia-calc__note { margin-top: 12px; font-size: var(--fs-caption); color: var(--muted); line-height: var(--lh-snug); }

/* ===== Callout: dica do especialista ===== */
.guia-callout {
  margin-top: 28px;
  background: var(--surface);
  border-left: 3px solid var(--green-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px;
}
.guia-callout__tag {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.guia-callout p { margin-top: 0; }

/* ===== FAQ ===== */
.guia-faq { margin-top: 20px; }
.guia-faq__item { border-top: 1px solid var(--line); padding: 20px 0; }
.guia-faq__q { font-size: var(--fs-headline); font-weight: 600; color: var(--ink); text-wrap: balance; }
.guia-faq__a { margin-top: 10px; color: var(--text); text-wrap: pretty; }

/* ===== CTA único (faixa própria no fim) =====
   Card editorial: o mockup do produto (uma mPage real, a do Marcos/MV Detail) ao
   lado da copy e do único CTA — mostra o que se ganha, não só descreve.
   Empilha no mobile (mockup em cima); lado a lado a partir de 640px (mockup à
   esquerda). A moldura do celular reusa a receita do hero da home — mesma
   sombra de marca — para o branding bater em todo o site. */
.guia-cta {
  max-width: 100% !important;
  margin-top: clamp(48px, 8vw, 80px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 5vw, 44px);
  overflow: hidden;                     /* contém a sombra do celular no card */
  display: grid;
  gap: clamp(26px, 4vw, 40px);
  text-align: center;
}

/* ── mockup: celular com a página real (poster do perfil-demo, igual à home) ── */
.guia-cta__device {
  position: relative;
  width: min(208px, 58vw);
  margin-inline: auto;
  padding: 8px;
  border-radius: 38px;
  background: linear-gradient(150deg, #26262b 0%, #0b0b0d 44%, #17171b 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18),
              0 0 0 1.5px rgba(0, 0, 0, .55),
              0 30px 54px -20px rgba(20, 66, 47, .30),
              0 16px 32px -22px rgba(0, 0, 0, .45);
}
/* botões laterais (realismo sutil) */
.guia-cta__device::before,
.guia-cta__device::after {
  content: ""; position: absolute; width: 3px; border-radius: 3px;
  background: linear-gradient(#2c2c31, #101013);
}
.guia-cta__device::before { left: -2px;  top: 23%; height: 50px; }  /* volume */
.guia-cta__device::after  { right: -2px; top: 31%; height: 40px; }  /* power  */
.guia-cta__screen {
  position: relative; aspect-ratio: 600 / 1208; border-radius: 30px;
  overflow: hidden; background: #fff; box-shadow: inset 0 0 0 2px #000;
}
.guia-cta__screen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
/* reflexo de vidro — premium, quase imperceptível */
.guia-cta__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 24%);
  mix-blend-mode: screen;
}

.guia-cta__body { min-width: 0; }
.guia-cta__title {
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
  text-wrap: balance;
}
.guia-cta__sub {
  margin-top: 12px;
  color: var(--text);
  max-width: 46ch;
  margin-inline: auto;
  text-wrap: pretty;
}
.guia-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-body);
  padding: 15px 26px;
  border-radius: var(--radius-pill);
}
.guia-cta__btn svg { width: 16px; height: 16px; fill: currentColor; }
.guia-cta__btn:hover { opacity: .92; }

/* lado a lado a partir de 640px: mockup à esquerda, copy + CTA à direita */
@media (min-width: 640px) {
  .guia-cta {
    grid-template-columns: auto 1fr;
    align-items: center;
    text-align: left;
    gap: clamp(36px, 5vw, 64px);
    padding: clamp(36px, 4.5vw, 52px) clamp(40px, 5vw, 60px);
  }
  .guia-cta__device { margin-inline: 0; width: clamp(200px, 22vw, 240px); }
  .guia-cta__sub { margin-inline: 0; }
}

/* ============================================================================
   Hub do guia (index.html): abertura + grade de artigos.
   Grade auto-fill: o card destaque (--feature) sangra a linha toda; artigos
   futuros entram como cards verticais lado a lado, sem tocar no HTML do CSS.
   ========================================================================== */
.guia-hub__head { max-width: var(--guia-read); margin-bottom: clamp(28px, 4vw, 40px); }
.guia-hub__title {
  font-size: var(--guia-fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.guia-hub__lede {
  font-size: var(--guia-fs-lede);
  line-height: var(--lh-snug);
  color: var(--text);
  margin-top: 16px;
  text-wrap: pretty;
}

.guia-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 28px);
}

/* Card de artigo (o <a> inteiro é clicável) */
.guia-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.guia-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--green-dark) 30%, var(--line));
}
.guia-card__media { background: var(--surface); }
.guia-card__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
/* Placeholder de foto dentro do card (artigo sem imagem própria ainda): preenche
   a miniatura sem cantos duplos. Troca-se pelo <img> quando a foto chegar. */
.guia-card__media .guia-ph { height: 100%; border-radius: 0; border-width: 0; }
.guia-card__body { padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; }
.guia-card__tag {
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; color: var(--green-dark); margin-bottom: 10px;
}
.guia-card__title {
  font-size: var(--fs-title); font-weight: 600; line-height: var(--lh-tight);
  letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.guia-card__desc { margin-top: 12px; color: var(--text); text-wrap: pretty; }
.guia-card__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-weight: 600; color: var(--green-dark);
}
.guia-card__more svg { width: 13px; height: 13px; fill: currentColor; transition: transform .2s ease; }
.guia-card:hover .guia-card__more svg { transform: translateX(3px); }

/* Card destaque: horizontal no desktop (imagem + texto), empilha no mobile. */
.guia-card--feature { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .guia-card--feature { flex-direction: row; }
  .guia-card--feature .guia-card__media { flex: 0 0 44%; }
  .guia-card--feature .guia-card__media img { aspect-ratio: auto; }
  .guia-card--feature .guia-card__body { flex: 1 1 auto; justify-content: center; }
}

/* "Em breve": próximos temas, sinaliza que o guia cresce (sem link ainda) */
.guia-hub__soon { margin-top: clamp(36px, 5vw, 52px); max-width: var(--guia-read); }
.guia-hub__soon-title {
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600; margin-bottom: 14px;
}
.guia-hub__soon-list { display: grid; gap: 10px; }
.guia-hub__soon-list li {
  position: relative; padding-left: 22px; color: var(--muted); font-size: var(--fs-subhead);
}
.guia-hub__soon-list li::before {
  content: ""; position: absolute; left: 2px; top: .6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--green) 45%, var(--line));
}

/* ===== Rodapé oficial da mPage (replica a home, mesmas medidas/padrões) ===== */
.guia-footer {
  margin-top: clamp(56px, 9vw, 88px);
  background: var(--ink);
  color: rgba(255, 255, 255, .7);
  padding-block: 64px;                 /* --s-10 */
  font-size: .9rem;
}
.guia-footer__in {
  max-width: 1064px;
  margin-inline: auto;
  padding-inline: var(--guia-gutter);
}
.guia-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }  /* --s-7 */
.guia-footer__brand {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; color: #fff; font-size: 1.1rem; margin-bottom: 12px;   /* --s-3 */
}
.guia-footer__brand img { height: 24px; width: auto; filter: brightness(0) invert(1); }
.guia-footer h4 {
  color: #fff; font-size: var(--fs-caption); font-weight: 600;
  margin-bottom: 12px; letter-spacing: .02em;
}
.guia-footer__grid a { display: block; padding: 4px 0; }
.guia-footer a:hover { color: #fff; }
.guia-footer__from {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  color: rgba(255, 255, 255, .55); font-size: .85rem;
}
.guia-footer__from svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }
.guia-footer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 40px; padding-top: 20px;                  /* --s-8 / --s-5 */
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .5); font-size: .8rem;
}
.guia-footer__legal { display: flex; flex-wrap: wrap; align-items: center; }
.guia-footer__legal a { margin-left: 14px; }
.guia-footer__legal a::before { content: "·"; margin-right: 14px; color: rgba(255, 255, 255, .3); }
.guia-footer__verse { letter-spacing: .04em; color: rgba(255, 255, 255, .5); text-decoration: none; }
@media (max-width: 720px) {
  /* Tablet: marca ocupa a linha toda; Produto/Contato/Redes lado a lado embaixo. */
  .guia-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 30px 20px; }
  .guia-footer__grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* Telefone: cada grupo empilhado, um abaixo do outro com seus itens
     (marca › Produto › Contato › Redes), com respiro uniforme entre eles. */
  .guia-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .guia-footer__grid > div:first-child { margin-bottom: 2px; }
  /* Barra inferior empilha: legal em cima, versículo embaixo. */
  .guia-footer__bar { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================================
   Responsivo: abaixo de 900px, uma coluna. TOC vira <details> recolhível.
   ========================================================================== */
@media (max-width: 900px) {
  .guia-grid { grid-template-columns: minmax(0, 1fr); }
  .guia-main > * { max-width: none; }
  .guia-toc { display: none; }          /* esconde o rail */

  .guia-toc-m {
    display: block;
    margin-top: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
  }
  .guia-toc-m > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 600;
    font-size: var(--fs-subhead);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* tira o quadrado sombreado que o iOS/Android pinta ao tocar (tap highlight) */
    -webkit-tap-highlight-color: transparent;
  }
  .guia-toc-m > summary::-webkit-details-marker { display: none; }
  .guia-toc-m > summary::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .guia-toc-m[open] > summary::after { transform: rotate(-135deg); }
  .guia-toc-m__list { padding: 4px 18px 16px; }
  .guia-toc-m__list a {
    display: block;
    color: var(--green-dark);
    -webkit-tap-highlight-color: transparent;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    font-size: var(--fs-subhead);
  }
  .guia-toc-m__list a:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .guia-toc-m > summary::after { transition: none; }
}