/* ============================================================================
   Guia da Colinha · identidade "papel e caneta"
   Papel creme, tinta quase preta, um acento terracota. Nada de azul/vermelho
   (leitura partidária) e nada do preto+marca-texto do Minha Colinha: este site
   tem cara de fascículo impresso, porque a colinha É papel.
   Fontes: Fraunces (títulos), Public Sans (texto), Caveat (anotações à mão).
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('/fontes/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fontes/publicsans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fontes/caveat-latin.woff2') format('woff2');
}

:root {
  color-scheme: light dark;
  --papel: #f7f1e5;
  --papel-vinco: #efe6d3;
  --tinta: #221b12;
  --tinta-2: #6b5f4d;
  --linha: #dccfb5;
  --acento: #b5471f;
  --acento-tinta: #8f3413;
  --acento-suave: rgba(181, 71, 31, 0.09);
  --pauta: rgba(34, 27, 18, 0.055);
  --sombra: 0 1px 2px rgba(34, 27, 18, 0.06), 0 12px 32px -16px rgba(34, 27, 18, 0.25);
  --serifa: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --texto: 'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mao: 'Caveat', 'Bradley Hand', cursive;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #191410;
    --papel-vinco: #221c15;
    --tinta: #efe6d4;
    --tinta-2: #b0a28a;
    --linha: #3a3226;
    --acento: #e07a4c;
    --acento-tinta: #f0a578;
    --acento-suave: rgba(224, 122, 76, 0.13);
    --pauta: rgba(239, 230, 212, 0.05);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.65 var(--texto);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

.miolo { max-width: 66rem; margin: 0 auto; padding-inline: 1.25rem; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 0.16em; }
a:hover { text-decoration-color: var(--acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 2px; }

.pular {
  position: absolute; left: -999px; top: 0.5rem; z-index: 10;
  background: var(--tinta); color: var(--papel); padding: 0.5rem 1rem; border-radius: 0.5rem;
}
.pular:focus-visible { left: 0.5rem; }

/* ---- cabeçalho: masthead de jornal, fio grosso de tinta em cima -------- */

.topo { border-top: 6px solid var(--tinta); border-bottom: 1px solid var(--linha); }
.topo-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.9rem;
}
.marca, .rodape-marca {
  font-family: var(--serifa);
  font-weight: 800;
  font-variation-settings: 'opsz' 40;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin: 0;
}
/* "Colinha" dentro de um recorte tracejado: o gesto de recortar o papelzinho */
.recorte {
  display: inline-block;
  padding: 0 0.3em;
  border: 2px dashed var(--acento);
  border-radius: 0.35em;
  color: var(--acento-tinta);
  transform: rotate(-1.2deg);
}
.edicao {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-2); white-space: nowrap;
}

/* ---- capa (home) -------------------------------------------------------- */

.capa { padding-block: 3rem 3.5rem; position: relative; overflow: hidden; }
.capa .miolo {
  display: grid; gap: 2.5rem; align-items: center;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
@media (max-width: 52rem) { .capa .miolo { grid-template-columns: 1fr; } }

.capa h1 {
  font-family: var(--serifa);
  font-weight: 850;
  font-variation-settings: 'opsz' 120;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.capa h1 em { font-style: normal; color: var(--acento-tinta); }
.capa .abre { font-size: 1.15rem; color: var(--tinta-2); max-width: 34rem; margin: 0 0 1.75rem; }

.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.botao, .botao-claro {
  display: inline-block; padding: 0.85rem 1.5rem; border-radius: 0.6rem;
  font-weight: 700; text-decoration: none; border: 2px solid var(--tinta);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.botao { background: var(--tinta); color: var(--papel); }
.botao-claro { background: transparent; color: var(--tinta); }
.botao:hover, .botao-claro:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.botao:active, .botao-claro:active { transform: translateY(0); }

/* a colinha de papel desenhada em CSS puro, levemente torta, com pauta */
.colinha-demo {
  justify-self: center;
  width: min(19rem, 100%);
  background:
    repeating-linear-gradient(transparent 0 1.55rem, var(--pauta) 1.55rem calc(1.55rem + 1px)),
    var(--papel-vinco);
  border: 2px dashed var(--acento);
  border-radius: 0.75rem;
  padding: 1.25rem 1.25rem 1.5rem;
  transform: rotate(2deg);
  box-shadow: var(--sombra);
  position: relative;
}
.colinha-demo .tesoura {
  position: absolute; top: -0.85rem; left: 1.5rem;
  background: var(--papel); border-radius: 999px; padding: 0.15rem 0.3rem;
  font-size: 1rem; line-height: 1; transform: rotate(90deg); color: var(--acento-tinta);
}
.colinha-demo h2 {
  font-family: var(--serifa); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.9rem;
  color: var(--tinta-2);
}
.colinha-demo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.colinha-demo li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.colinha-demo .cargo { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-2); }

.caixas { display: inline-flex; gap: 0.22rem; }
.caixas span {
  display: inline-grid; place-items: center;
  width: 1.5em; height: 1.7em;
  border: 1.5px solid var(--tinta-2); border-radius: 0.25em;
  font-variant-numeric: tabular-nums;
}
.caixas.mao span {
  font-family: var(--mao); font-size: 1.15em; font-weight: 700;
  color: var(--acento-tinta); border-color: var(--tinta-2);
}

/* ---- faixa de datas ------------------------------------------------------ */

.datas { border-block: 1px solid var(--linha); background: var(--papel-vinco); }
.datas .miolo {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; justify-content: center;
  padding-block: 0.9rem; font-size: 0.95rem;
}
.datas strong { font-family: var(--serifa); font-weight: 800; }
.datas span { color: var(--tinta-2); }

/* ---- cartões do índice --------------------------------------------------- */

.secao { padding-block: 3rem; }
.secao-titulo {
  font-family: var(--serifa); font-weight: 800; font-variation-settings: 'opsz' 80;
  font-size: 1.7rem; letter-spacing: -0.01em; margin: 0 0 0.4rem;
}
.secao-sub { color: var(--tinta-2); margin: 0 0 1.75rem; max-width: 40rem; }

.cartoes {
  display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.cartoes a {
  display: flex; flex-direction: column; gap: 0.5rem; height: 100%;
  background: var(--papel-vinco); border: 1px solid var(--linha); border-radius: 0.75rem;
  padding: 1.25rem; text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.cartoes a:hover { transform: translateY(-3px); border-color: var(--acento); box-shadow: var(--sombra); }
.cartoes .num {
  font-family: var(--mao); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--acento-tinta);
}
.cartoes h3 { font-family: var(--serifa); font-weight: 700; font-size: 1.15rem; margin: 0; letter-spacing: -0.01em; }
.cartoes p { margin: 0; font-size: 0.92rem; color: var(--tinta-2); }
.cartoes .leia { margin-top: auto; padding-top: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--acento-tinta); }

/* ---- artigo -------------------------------------------------------------- */

.artigo { max-width: 42rem; margin: 0 auto; padding: 2.25rem 1.25rem 4rem; }
.trilha { font-size: 0.85rem; color: var(--tinta-2); margin: 0 0 1.5rem; }
.trilha a { text-decoration: none; }
.trilha a:hover { text-decoration: underline; }

.artigo h1 {
  font-family: var(--serifa); font-weight: 850; font-variation-settings: 'opsz' 110;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em;
  margin: 0 0 0.75rem; text-wrap: balance;
}
.artigo .abre { font-size: 1.12rem; color: var(--tinta-2); margin: 0 0 1.5rem; }
.artigo h2 {
  font-family: var(--serifa); font-weight: 750; font-variation-settings: 'opsz' 60;
  font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.01em; margin: 2.5rem 0 0.6rem;
}
.artigo h3 { font-size: 1.05rem; font-weight: 700; margin: 1.75rem 0 0.4rem; }
.artigo p { margin: 0 0 1rem; }
.artigo ul, .artigo ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.artigo li { margin-bottom: 0.45rem; }
.artigo li::marker { color: var(--acento-tinta); font-weight: 700; }

/* citação de lei: recorte de papel com fio terracota */
.lei {
  margin: 0 0 1rem; padding: 0.9rem 1.1rem;
  background: var(--papel-vinco); border-left: 3px solid var(--acento);
  border-radius: 0.35rem; font-size: 0.95rem;
}
.lei cite { display: block; margin-top: 0.45rem; font-style: normal; font-size: 0.85rem; color: var(--tinta-2); }

/* anotação "à mão" na margem do texto */
.nota-mao {
  font-family: var(--mao); font-weight: 700; font-size: 1.35rem; line-height: 1.25;
  color: var(--acento-tinta); margin: 1.25rem 0; padding-left: 1rem;
  border-left: 2px dashed var(--acento);
  transform: rotate(-0.5deg);
}

table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--linha); }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-2); }
td:last-child, th:last-child { text-align: right; white-space: nowrap; }
tbody tr:hover { background: var(--acento-suave); }

.aviso {
  margin: 0 0 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--linha);
  border-radius: 0.5rem; background: var(--papel-vinco); font-size: 0.95rem;
}
.aviso strong:first-child { color: var(--acento-tinta); }

/* chamada para a ferramenta, sempre discreta e no fim do assunto */
.ferramenta {
  margin: 2rem 0 0; padding: 1.1rem 1.25rem; border: 2px solid var(--tinta);
  border-radius: 0.75rem; background: var(--papel-vinco);
}
.ferramenta p { margin: 0 0 0.75rem; }
.ferramenta .botao { border-width: 0; }

/* ---- perguntas frequentes ------------------------------------------------ */

details { border-bottom: 1px solid var(--linha); }
summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: baseline; gap: 1rem; padding: 1rem 0.25rem;
  font-family: var(--serifa); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-family: var(--texto); font-weight: 400; font-size: 1.4rem; color: var(--acento-tinta); transition: transform 0.2s ease; }
details[open] summary::after { transform: rotate(45deg); }
details > div { padding: 0 0.25rem 1.25rem; }
details > div > p:last-child { margin-bottom: 0; }

/* ---- modelo para imprimir ------------------------------------------------ */

.folha {
  background:
    repeating-linear-gradient(transparent 0 1.65rem, var(--pauta) 1.65rem calc(1.65rem + 1px)),
    var(--papel-vinco);
  border: 2px dashed var(--acento); border-radius: 0.75rem;
  padding: 1.5rem; margin: 1.5rem 0; position: relative;
}
.folha .tesoura {
  position: absolute; top: -0.85rem; left: 1.5rem; background: var(--papel);
  border-radius: 999px; padding: 0.15rem 0.3rem; font-size: 1rem; line-height: 1;
  transform: rotate(90deg); color: var(--acento-tinta);
}
.folha h2 {
  font-family: var(--serifa); font-size: 1rem; font-weight: 800; margin: 0 0 1.1rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.folha h2 small { font-weight: 600; color: var(--tinta-2); letter-spacing: 0.02em; text-transform: none; }
.folha ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.folha li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.75rem; }
.folha .cargo { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.folha .nome { border-bottom: 1px solid var(--tinta-2); min-height: 1.4rem; font-family: var(--mao); font-size: 1.1rem; color: var(--tinta-2); }
.folha .caixas span { width: 1.7em; height: 1.9em; border-color: var(--tinta); border-width: 2px; }

.so-tela { display: block; }
@media print {
  .topo, .rodape, .so-tela, .trilha, .pular { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .artigo { max-width: none; padding: 0; }
  .folha {
    border-color: #999; background: #fff; break-inside: avoid;
    margin: 0 0 1.5rem;
  }
  .folha .caixas span { border-color: #000; }
  .folha .nome { border-color: #666; }
}

/* ---- rodapé -------------------------------------------------------------- */

.rodape { margin-top: 2rem; border-top: 4px double var(--tinta); font-size: 0.92rem; }
.rodape-grade {
  display: grid; gap: 2rem; padding-block: 2.25rem 1rem;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
}
@media (max-width: 52rem) { .rodape-grade { grid-template-columns: 1fr; } }
.rodape p { margin: 0 0 0.75rem; color: var(--tinta-2); }
.rodape-marca { font-size: 1.1rem; color: var(--tinta); }
.rodape-marca .recorte { border-width: 1.5px; padding: 0 0.25em; }
.rodape-titulo {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta); margin: 0 0 0.5rem;
}
.rodape nav + div, .rodape .rodape-titulo:not(:first-child) { margin-top: 1.25rem; }
.rodape ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.35rem; }
.rodape a { text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape-fim { border-top: 1px solid var(--linha); padding-block: 1rem; }
.rodape-fim p { margin: 0; font-size: 0.85rem; color: var(--tinta-2); text-align: center; }

/* ---- entrada suave da capa ---------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .capa h1, .capa .abre, .capa .acoes { animation: sobe 0.6s ease both; }
  .capa .abre { animation-delay: 0.08s; }
  .capa .acoes { animation-delay: 0.16s; }
  .colinha-demo { animation: pousa 0.7s ease both 0.2s; }
  @keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes pousa { from { opacity: 0; transform: rotate(5deg) translateY(20px); } to { opacity: 1; transform: rotate(2deg); } }
}