/* ===========================================================================
   /eixos/  ·  ESTILOS DA CAMADA "QUATRO EIXOS, QUATRO LEIS"
   ---------------------------------------------------------------------------
   Estes estilos completam o styles.css, nunca o substituem. Tudo aqui usa os
   tokens do sistema (papel, tinta, ouro, f-titulo, s-*). A regra da casa vale
   inteira: UMA cor de acento, o dourado. A identidade de cada eixo vem do
   número grande vazado, do nome em Anton e da estrutura fixa
   eixo → lei → projeto de lei, não de uma segunda cor.

   Duas famílias de componente moram aqui:
     1. A página índice (/eixos/): frases-guarda-chuva, bloco de eixo,
        cartão da lei carro-chefe.
     2. As quatro páginas de minuta: o documento jurídico na íntegra,
        diagramado para leitura longa.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1  PÁGINA ÍNDICE
   --------------------------------------------------------------------------- */

/* As duas frases-guarda-chuva: a garra e o acolhimento. */
.guarda{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4);
  margin-top:var(--s-5);
}
.guarda__item{
  background:var(--papel-2); border:1px solid var(--borda);
  padding:var(--s-4);
}
.guarda__item blockquote{
  margin:var(--s-2) 0 0; font-family:var(--f-titulo);
  font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.2;
  text-transform:uppercase; letter-spacing:.01em;
}
.guarda__item blockquote em{ font-style:normal; color:var(--ouro); }
.guarda__item p{ margin:var(--s-2) 0 0; color:var(--txt-2); font-size:.9375rem; line-height:1.6; }

/* O aviso de camada: nada aqui é lei em vigor. */
.leia-antes{
  margin-top:var(--s-5);
  border-left:3px solid var(--ouro);
  background:var(--papel-2);
  padding:var(--s-3) var(--s-4);
  color:var(--txt-2); font-size:.9375rem; line-height:1.65; max-width:64ch;
}
.leia-antes b{ color:var(--txt); }

/* O bloco de um eixo. */
.eixo{ padding:var(--s-7) 0; border-top:1px solid var(--borda); }
.eixo__topo{ display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap; }
.eixo__num{
  font-family:var(--f-titulo); line-height:.9;
  font-size:clamp(3.4rem,7vw,5.6rem);
  color:transparent; -webkit-text-stroke:1.5px var(--ouro);
}
.eixo__topo h2{
  font-family:var(--f-titulo); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(2.4rem,5vw,4rem); line-height:1;
}
.eixo__lema{ margin-top:var(--s-2); color:var(--txt-2); font-size:1.0625rem; line-height:1.55; max-width:44ch; font-weight:600; }

.eixo__grade{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--s-6); margin-top:var(--s-5); align-items:start; }

.eixo__rot{
  font-family:var(--f-mono); font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.18em; color:var(--ouro);
}
.essencia p{ margin-top:var(--s-2); color:var(--txt-2); font-size:1rem; line-height:1.7; }
.essencia p b{ color:var(--txt); font-weight:700; }
.tambem{ margin-top:var(--s-5); border-top:1px solid var(--borda); padding-top:var(--s-3); }
.tambem p{ margin-top:var(--s-2); color:var(--txt-fraco); font-size:.9375rem; line-height:1.65; }
.tambem p b{ color:var(--txt-2); }

/* O cartão da lei carro-chefe. */
.lei{
  background:var(--papel-2); border:1px solid var(--borda);
  border-top:3px solid var(--ouro);
  padding:var(--s-4);
}
.lei__ponte{
  font-family:var(--f-mono); font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.16em; color:var(--txt-fraco);
}
.lei__ponte b{ color:var(--ouro); }
.lei h3{
  margin-top:var(--s-2); font-family:var(--f-titulo);
  text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.05;
}
.lei h3 small{
  display:block; font-family:var(--f-mono); font-weight:700;
  font-size:.75rem; letter-spacing:.16em; color:var(--ouro); margin-top:.4em;
}
.lei blockquote{
  margin:var(--s-3) 0 0; border-left:3px solid var(--ouro);
  padding:.25rem 0 .25rem var(--s-3);
  font-size:1.0313rem; line-height:1.6; font-weight:600; font-style:italic;
  color:var(--txt-2);
}
.lei__etq{
  display:inline-block; margin-top:var(--s-4);
  font-family:var(--f-mono); font-weight:700; font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.14em;
  background:var(--ouro); color:var(--papel);
  padding:.4em .8em;
}
.lei__etq--irmao{ background:transparent; color:var(--ouro); border:1.5px solid var(--ouro); }
.lei p.como{ margin-top:var(--s-2); color:var(--txt-2); font-size:.9688rem; line-height:1.7; }
.lei p.como b{ color:var(--txt); }
.lei__irmao{ margin-top:var(--s-4); border-top:1px solid var(--borda); padding-top:var(--s-1); }
.lei__acao{ margin-top:var(--s-4); display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap; }
.lei__acao .meta-doc{ font-family:var(--f-mono); font-size:.75rem; color:var(--txt-fraco); letter-spacing:.06em; }

/* ---------------------------------------------------------------------------
   2  PÁGINAS DE MINUTA (documento na íntegra)
   ---------------------------------------------------------------------------
   O documento é uma coluna de leitura estreita sobre cartão elevado, para o
   texto jurídico parecer o que é: um documento pronto, não um post.
   --------------------------------------------------------------------------- */

.doc-aviso{
  margin-top:var(--s-4);
  border-left:3px solid var(--ouro);
  background:var(--acento-bg);
  padding:var(--s-3) var(--s-4);
  color:var(--tinta-2); font-size:.9375rem; line-height:1.65; max-width:64ch;
}
.doc-aviso b{ color:var(--txt); }

.doc-indice{ display:flex; gap:var(--s-2); margin-top:var(--s-4); flex-wrap:wrap; }

.pl{
  background:var(--papel-2); border:1px solid var(--borda);
  padding:var(--s-6) clamp(var(--s-3),5vw,var(--s-7));
  /* 48rem e não 52rem: com 52rem a linha do texto de lei chegava a 66 caracteres
     no computador, e o olho perdia a linha nos artigos longos. 48rem deixa a
     linha em torno de 60, que é onde a leitura corrida fica confortável. */
  margin-top:var(--s-5); max-width:48rem;
}
.pl-etiqueta{
  display:inline-block;
  font-family:var(--f-mono); font-weight:700; font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.14em;
  background:var(--ouro); color:var(--papel);
  padding:.4em .8em;
}
.pl-etiqueta--irmao{ background:transparent; color:var(--ouro); border:1.5px solid var(--ouro); }
.pl-titulo{
  margin-top:var(--s-4); text-align:center;
  font-family:var(--f-corpo); font-weight:800; letter-spacing:.04em;
  font-size:1.1875rem;
}
.pl-autor{ margin-top:var(--s-1); text-align:center; color:var(--txt-fraco); font-weight:600; font-size:.9375rem; }
.pl-ementa{
  margin:var(--s-4) auto 0; max-width:36rem;
  font-style:italic; color:var(--txt-2); font-size:1rem; line-height:1.7;
  text-wrap:pretty;
}
.pl-decreta{ margin-top:var(--s-4); font-weight:700; }
/* Texto de lei é leitura longa e travada: 17px em vez de 16px, entrelinha
   generosa e "pretty" para o parágrafo não terminar com uma palavra sozinha
   pendurada na última linha. */
.pl p{ margin-top:var(--s-3); font-size:1.0625rem; line-height:1.78; color:var(--txt-2); text-wrap:pretty; }
.pl p.pl-decreta, .pl-cap, .pl-just, .pl-sub{ color:var(--txt); }
/* Inciso recuado e um pouco mais colado no artigo que o comanda: o respiro
   maior fica ENTRE artigos, não entre os itens de uma mesma lista. */
.pl-inciso{ padding-left:var(--s-4); margin-top:var(--s-2); }
.pl-cap{ margin-top:var(--s-5); text-align:center; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.9375rem; }
.pl-just{
  margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--borda);
  text-align:center; font-family:var(--f-titulo); font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; font-size:1.375rem;
}
.pl-sub{ margin-top:var(--s-4); font-weight:700; font-size:1.0313rem; }
.pl-fecho{ margin-top:var(--s-4); text-align:right; font-style:italic; }

.doc-volta{ margin-top:var(--s-5); }

/* ---------------------------------------------------------------------------
   Celular
   --------------------------------------------------------------------------- */
@media (max-width:47rem){
  .guarda{ grid-template-columns:1fr; gap:var(--s-3); }
  .eixo{ padding:var(--s-6) 0; }
  .eixo__grade{ grid-template-columns:1fr; gap:var(--s-4); }
  .lei{ margin:0 calc(-1 * var(--s-1)); }
  .pl{ padding:var(--s-4) var(--s-3); margin-left:calc(-1 * var(--s-1)); margin-right:calc(-1 * var(--s-1)); }
  .pl-inciso{ padding-left:var(--s-3); }
}


/* ---------------------------------------------------------------------------
   3  TRILHA E CABEÇALHO DE DOCUMENTO
   Copiados de /propostas/proposta.css em 07/09/2026, quando a camada das 18
   propostas saiu do site e levou aquele arquivo junto. Os comentários de lá
   valem aqui: min-width: 0 na trilha é obrigatório (item de flex não encolhe
   e alargava o documento inteiro no celular), e número + carimbo ficam FORA
   do h1 porque são metadado, não parte da frase do título.
   --------------------------------------------------------------------------- */
.trilha {
  padding-top: var(--s-4);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-2);
  overflow-wrap: anywhere;
}
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  max-width: 100%;
  list-style: none;
}
.trilha li { min-width: 0; }
.trilha a {
  color: var(--acento-txt);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.trilha a:hover { background: var(--acento-bg); }
.trilha__sep { color: var(--txt-2); }

.prop-cab { padding-block: var(--s-4) var(--s-5); }
.prop-cab__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.prop-cab h1 { max-width: 26ch; }
.prop-cab .lede { max-width: 46ch; }