:root {
  --ink: #1d2733;
  --muted: #5b6b7b;
  --accent: #14735c;
  --accent-dark: #0d5343;
  --paper: #fbfaf7;
  --card: #ffffff;
  --line: #d8dee5;
  --error: #a3272d;
  --ok: #1e6f3d;
}

* {
  box-sizing: border-box;
}

/* Anchor jumps (e.g. the "Assine essa proposta" bar) scroll smoothly, except
   for users who asked the OS for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font: 17px/1.6 system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* Serif is reserved for the bill itself — the formal legal text, headings
   included. Everything else, the summary included, uses the page's sans-serif. */
article.law {
  font-family: Georgia, "Times New Roman", serif;
}

/* One descending heading scale: the page title is the largest, then a
   summary/bill title, then section labels, then sub-headings. */
.resumo h1,
article.law h1 {
  font-size: 1.5rem;
}

.legitimidade h2,
.law-header h2,
.sign h2,
.faq h2 {
  font-size: 1.3rem;
}

.resumo h2,
article.law h2 {
  font-size: 1.2rem;
}

.passo h3 {
  font-size: 1.05rem;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

header h1 {
  font-size: 1.6rem;
  line-height: 1.3;
}

.texto-integral {
  margin-top: 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.law-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 2rem;
  background: #f3f1ea;
  border-bottom: 1px solid var(--line);
}

.law-header h2 {
  margin: 0;
}

.button {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--ink);
  background: var(--card);
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
  font-weight: 600;
}

.button.primary:hover {
  background: var(--accent-dark);
}

.button:disabled {
  opacity: 0.6;
  cursor: default;
}

.linklike {
  background: none;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

article.law {
  padding: 1.5rem 2rem;
}

article.law blockquote {
  margin: 1em 0;
  padding-left: 1em;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

/* The two interactive boxes — the wizard and the submit section — stand out
   from the reading flow as cards. */
.sign {
  margin-top: 3rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 8px;
  padding: 1.4rem 2rem 1.8rem;
}

.sign h2 {
  margin-top: 0;
}

@media (max-width: 480px) {
  .sign {
    padding: 1.1rem 1rem 1.4rem;
  }
}

.privacy {
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.4rem;
}

.privacy details {
  margin-top: 0.4rem;
}

.privacy summary {
  cursor: pointer;
  font-weight: 600;
}

.privacy details p {
  margin: 0.4rem 0 0;
}

.privacy details {
  margin-top: 0.4rem;
}

.privacy summary {
  cursor: pointer;
  font-weight: 600;
}

.privacy details p {
  margin: 0.4rem 0 0;
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.field input,
.field select {
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}

.field small {
  display: block;
  margin-top: 0.25rem;
}

.aviso {
  color: #8a6d1a;
}

.erro {
  color: var(--error);
  margin: 0.8rem 0;
}

.sucesso {
  color: var(--ok);
}

#envio-resultado {
  margin-top: 1rem;
  font-weight: 600;
}

/* --- Wizard ------------------------------------------------------------- */

/* The numbered steps are navigation, not decoration: real buttons, current
   one marked with aria-current, completed ones with .feito. */
.stepper {
  list-style: none;
  display: flex;
  margin: 1.4rem 0 1.8rem;
  padding: 0;
}

.stepper li {
  flex: 1;
  position: relative;
}

/* Connector line between circles, drawn behind them. */
.stepper li+li::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}

.step {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--muted);
}

.step .num {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.step .rotulo {
  font-size: 0.85rem;
  line-height: 1.25;
  text-align: center;
}

.step.feito .num,
.step[aria-current="step"] .num {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}

.step[aria-current="step"] {
  color: var(--ink);
  font-weight: 600;
}

.step[aria-current="step"] .num {
  box-shadow: 0 0 0 4px rgba(20, 115, 92, 0.18);
}

/* With JS, the panels share one grid cell and swap via visibility, so the
   wizard box always has the height of its tallest step instead of resizing
   at every transition. Without the .js class they lay out normally. */
.passos.js {
  display: grid;
}

.passos.js .passo {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}

.passos.js .passo.ativo {
  visibility: visible;
}

/* Step 1's nav lives inside the form; the form must fill the panel for the
   nav to reach the bottom. */
.passos.js .passo>form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.passo h3 {
  margin: 0 0 0.8rem;
}

/* Focus target for panel swaps, not an interactive element. */
.passo h3:focus {
  outline: none;
}

.passo ol {
  padding-left: 1.3rem;
}

.passo ol li {
  margin-bottom: 0.4rem;
}

.passo-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1.5rem;
}

/* The filler between a step's content and the box bottom. It absorbs the
   panel's blank space and, being the sticky nav's containing block, bounds
   how far the nav may float: through blank space only, never over content. */
.passos.js .rodape {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Docked while the box's bottom is off-screen: the row floats up inside the
   filler (position: sticky — no JS) so Voltar/Avançar stay reachable, and
   settles at the panel bottom otherwise, in the same spot on every step. */
.passos.js .passo-nav {
  position: sticky;
  bottom: 0.5rem;
}

/* A lone Avançar sits on the right, where the Voltar/Avançar pair puts it. */
.passo-nav :only-child {
  margin-left: auto;
}

/* The hand-off to the government signer is the one action that leaves the
   site: gov.br blue instead of the campaign green, plus the destination
   domain spelled out. */
.button.externo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: #1351b4;
  /* official gov.br blue */
  border-color: #0c326f;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.7rem 1.6rem;
}

.button.externo:hover {
  background: #0c326f;
}

.button.externo small {
  font-weight: 400;
  font-size: 0.75rem;
  opacity: 0.85;
}

.atencao {
  background: #fbf3dd;
  border: 1px solid #e5d9a8;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
}

/* --- Submit section ------------------------------------------------------ */

#envio-sucesso {
  outline: none;
}

#sucesso-msg {
  font-weight: 600;
  font-size: 1.05rem;
}

.share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0.9rem 0;
}

#cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(251, 250, 247, 0.96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 8px rgba(29, 39, 51, 0.08);
}

#cta-bar .button {
  width: 100%;
  max-width: 24rem;
  text-align: center;
  font-size: 1.05rem;
}

#cta-bar.oculto {
  display: none;
}

/* Keep the page's end reachable above the fixed bar. */
body {
  padding-bottom: 4.5rem;
}

.button.baixar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

header.hero {
  text-align: center;
  padding: 1.8rem 0 0.6rem;
}

.hero .kicker {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0;
}

header.hero h1 {
  font-size: 2rem;
  margin: 0.1rem 0 0.4rem;
}

.chamada {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin: 0.2rem 0;
}

.hero .sub {
  color: var(--muted);
  margin: 0.2rem 0 1.2rem;
}

.button.grande {
  font-size: 1.1rem;
  padding: 0.8rem 1.8rem;
}

.ja-assinou {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.7rem 0 0;
}

.resumo {
  font-size: 1.05rem;
}

.legitimidade {
  margin-top: 2rem;
  padding: 1rem 1.3rem;
  background: var(--card);
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
}

.legitimidade h2 {
  margin: 0 0 0.4rem;
}

.legitimidade p {
  margin: 0;
}

.faq {
  margin-top: 3rem;
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0;
  font-size: 0.95rem;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
}

.faq details p {
  margin: 0.5rem 0 0.2rem;
  color: var(--muted);
}