/* ══════════════════════════════════════════════════════════════════════════════════════
   OS BLOCOS DO CONTRATO (`api/resources/blocos/contrato.json`) — 11/08/2026.

   As classes daqui são as MESMAS que o interpretador emite, dos dois lados: a página pública e
   o canvas do editor. É isso que faz o Puck mostrar o que publica — antes o editor tinha um
   markup (`ct-puck--hero`) e o público tinha outro (`rp-bloco--herorevolu`).

   Nenhum hex: quem muda a marca muda `brandTokens.js`, e o build reprova se `/tokens.css`
   divergir.
   ══════════════════════════════════════════════════════════════════════════════════════ */

.rb-bloco {
  display: grid;
  gap: var(--revolu-space-3);
  padding: var(--revolu-space-12) var(--revolu-space-4);
  max-width: 1080px;
  margin: 0 auto;
}

.rb-bloco__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--revolu-text-muted);
}

.rb-bloco__titulo {
  font-family: var(--revolu-font-display);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

.rb-bloco--hero .rb-bloco__titulo { font-size: clamp(30px, 5vw, 48px); letter-spacing: -0.015em; }
.rb-bloco--editorial .rb-bloco__titulo,
.rb-bloco--beneficio .rb-bloco__titulo,
.rb-bloco--planos .rb-bloco__titulo { font-size: clamp(24px, 3.4vw, 34px); }
.rb-bloco--acao .rb-bloco__titulo { font-size: 22px; }
.rb-bloco--trilho .rb-bloco__titulo { font-size: 19px; }

/*
  `pre-line` porque o texto vem de um TEXTAREA: quem edita aperta Enter e espera parágrafo.

  Sem isto, as quebras digitadas viravam texto corrido na página — o HTML colapsa o `\n` — e
  nada acusava (dono, 12/08/2026: "adicionei dois enter e o layout não responde"). A quebra é
  respeitada pelo CSS, e não convertida em `<br>` pelo renderizador: os dois interpretadores
  (PHP e JS) continuam emitindo a MESMA string, e a fixture dourada continua valendo.
*/
.rb-bloco__texto { margin: 0; color: var(--revolu-text-soft); max-width: 60ch; white-space: pre-line; }
.rb-bloco__pergunta { margin: 0; font-size: 13px; font-weight: 700; color: var(--revolu-primary); }
.rb-bloco__nota { margin: 0; font-size: 12.5px; color: var(--revolu-text-muted); }

.rb-bloco__icone { width: 28px; height: 28px; color: var(--revolu-secondary-ink); }

.rb-bloco__cta {
  justify-self: start;
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--revolu-radius-pill);
  background: var(--revolu-primary);
  color: var(--revolu-white);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.rb-bloco__cta:hover { background: var(--revolu-primary-hover); }

.rb-bloco--trilho,
.rb-bloco--acao {
  padding: var(--revolu-space-6);
  border: 1px solid var(--revolu-border);
  border-radius: var(--revolu-radius-lg);
  background: var(--revolu-white);
}

.rb-bloco--fechamento {
  background: var(--revolu-bg-warm);
  border-top: 1px solid var(--revolu-bg-warm-border);
  border-bottom: 1px solid var(--revolu-bg-warm-border);
  max-width: none;
  justify-items: center;
  text-align: center;
}

.rb-bloco--fechamento .rb-bloco__cta { justify-self: center; }
.rb-bloco__mascote { width: 120px; height: auto; display: block; }

/* ── A matriz de planos, que lê o inventário ─────────────────────────────────────── */

.rb-planos {
  display: grid;
  gap: 1px;
  background: var(--revolu-border);
  border: 1px solid var(--revolu-border);
  border-radius: var(--revolu-radius-md);
  overflow: hidden;
}

.rb-planos__linha {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 1px;
  background: var(--revolu-border);
}

.rb-planos__recurso,
.rb-planos__valor {
  background: var(--revolu-white);
  padding: var(--revolu-space-3) var(--revolu-space-4);
  font-size: 13.5px;
}

.rb-planos__recurso { font-weight: 700; }
.rb-planos__valor { color: var(--revolu-text-soft); }

@media (max-width: 720px) {
  .rb-planos__linha { grid-template-columns: 1fr; }
  .rb-planos__recurso { background: var(--revolu-bg); }
}