/* Sicut Ego — cartaz de mobilização.
   Assinatura: o "corte", a diagonal que separa os dois balões da marca. Aparece como
   canto cortado nos cartões, como preenchimento diagonal nos botões, como faixa
   vermelha e amarela nas divisões e como ponta da barra de nível. */

@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/BarlowCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: block; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  /* superfícies e tinta */
  --papel: #F3F0E7;
  --papel-2: #EAE5D7;
  --tinta: #171715;
  --tinta-2: #5A5850;
  --fio: #D6D0BF;
  /* marca */
  --brasa: #F20002;          /* só em formas grandes; texto branco sobre ela só em corpo grande */
  --chama: #FDC700;          /* sempre com tinta escura por cima */
  --vermelho-texto: #B52525; /* vermelho legível sobre papel (5.7:1) */
  --carvao: #171715;
  --carvao-2: #24231F;
  --carvao-fio: #3A3832;
  --cinza-claro: #B6B2A6;
  --vermelho-claro: #FF6B5E; /* vermelho legível sobre carvão (6.4:1) */
  --ok: #1F7A4A;

  /* tipo em três registros */
  --voz: "Barlow Condensed", "Arial Narrow", sans-serif;
  --leitura: Georgia, "Times New Roman", serif;
  --rotulo: "Barlow", system-ui, sans-serif;
  --t-mega: clamp(2.6rem, 1.6rem + 5vw, 5.4rem);
  --t-1: clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem);
  --t-2: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  --t-3: 1.15rem;
  --t-corpo: 1.02rem;
  --t-mini: .78rem;

  /* ritmo */
  --gutter: clamp(1rem, .6rem + 2vw, 2.25rem);
  --largura: 1180px;
  --medida: 68ch;
  --secao: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);

  /* o corte: ângulo da diagonal da marca, em tamanho de canto */
  --corte: 14px;
  --corte-g: 28px;

  /* movimento */
  --rapido: 140ms;
  --medio: 280ms;
  --lento: 620ms;
  --sai: cubic-bezier(.2, .7, .2, 1);
  --entra-sai: cubic-bezier(.65, 0, .35, 1);

  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

.campo-carvao {
  color-scheme: dark;
  --papel: #171715;
  --papel-2: #24231F;
  --tinta: #F3F0E7;
  --tinta-2: #B6B2A6;
  --fio: #3A3832;
  --vermelho-texto: #FF6B5E;
  background-color: var(--papel);
  background-image: url("../assets/grao-carvao.png");
  color: var(--tinta);
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  font: 400 var(--t-corpo)/1.55 var(--rotulo);
  color: var(--tinta);
  background-color: var(--papel);
  background-image: url("../assets/grao-papel.png");
  overflow-x: clip;
  min-height: 100dvh;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--chama); outline-offset: 3px; }
.campo-carvao :focus-visible, .campo-carvao:focus-visible { outline-color: var(--chama); }
h1, h2, h3, h4 { margin: 0; font-family: var(--voz); font-weight: 700; line-height: 1.02; letter-spacing: -.005em; }
p { margin: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* rótulos */
.rotulo {
  font: 600 var(--t-mini)/1.2 var(--rotulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vermelho-texto);
}
.rotulo.neutro { color: var(--tinta-2); }
.meta { font-size: .86rem; color: var(--tinta-2); }

/* ------------------------------------------------------------- estrutura */
.casca { display: grid; min-height: 100dvh; grid-template-columns: 1fr; }
.lateral { display: none; }
.principal { min-width: 0; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 1.5rem); }
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem var(--gutter);
  border-bottom: 1px solid var(--fio);
  background: var(--papel);
  position: sticky; top: 0; z-index: 20;
}
.topo .marca-mini { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.topo .marca-mini img { width: 34px; }
.topo .marca-mini span { font: 700 1.35rem/1 var(--voz); letter-spacing: .02em; text-transform: uppercase; }
.topo-acoes { display: flex; align-items: center; gap: .5rem; }
.selo-conta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .7rem .35rem .4rem; border-radius: 999px;
  background: var(--carvao); color: #F3F0E7; text-decoration: none; font-size: .86rem; font-weight: 600;
}
.selo-conta .bolinha { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--chama); color: var(--carvao); font: 700 .8rem/1 var(--voz); }

.conteudo { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
.secao { padding-block: var(--secao); }
.secao + .secao { border-top: 1px solid var(--fio); }
.cabeca-secao { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cabeca-secao h2 { font-size: var(--t-1); }
.cabeca-secao p { color: var(--tinta-2); max-width: 52ch; margin-top: .35rem; }

/* navegação inferior no celular */
.nav-baixo {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--carvao); color: #B6B2A6;
  border-top: 3px solid var(--brasa);
}
.nav-baixo a {
  display: grid; place-items: center; align-content: center; gap: .2rem;
  text-decoration: none; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  position: relative;
}
.nav-baixo svg { width: 22px; height: 22px; }
.nav-baixo a[aria-current="page"] { color: #FDC700; }
.nav-baixo a[aria-current="page"]::before {
  content: ""; position: absolute; top: -3px; left: 22%; right: 22%; height: 3px; background: var(--chama);
}

@media (min-width: 960px) {
  .casca { grid-template-columns: 248px 1fr; }
  .nav-baixo { display: none; }
  .principal { padding-bottom: 2rem; }
  .topo .marca-mini { visibility: hidden; }
  .lateral {
    display: flex; flex-direction: column; gap: 1.5rem;
    position: sticky; top: 0; height: 100dvh; padding: 1.5rem 1.25rem;
    border-right: 3px solid var(--brasa);
  }
  .lateral .marca { display: flex; gap: .75rem; align-items: center; text-decoration: none; }
  .lateral .marca img { width: 52px; }
  .lateral .marca b { display: block; font: 700 1.7rem/1 var(--voz); text-transform: uppercase; letter-spacing: .02em; }
  .lateral .marca small { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); margin-top: .25rem; }
  .lateral nav { display: grid; gap: .2rem; }
  .lateral nav a {
    display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: .75rem;
    padding: .7rem .75rem; text-decoration: none; color: var(--tinta-2); font-weight: 600;
    position: relative;
  }
  .lateral nav a svg { width: 20px; height: 20px; }
  .lateral nav a small { font: 600 .7rem/1 var(--rotulo); letter-spacing: .1em; opacity: .7; }
  .lateral nav a:hover { color: var(--tinta); }
  .lateral nav a[aria-current="page"] { color: var(--carvao); background: var(--chama); clip-path: polygon(0 0, 100% 0, calc(100% - var(--corte)) 100%, 0 100%); }
  .lateral .rodape-lateral { margin-top: auto; display: grid; gap: .75rem; }
  .lateral .mote-lateral { font: 400 1.15rem/1.3 var(--leitura); }
  .lateral .mote-lateral::before { content: ""; display: block; width: 28px; height: 3px; background: var(--brasa); margin-bottom: .75rem; }
}

/* ------------------------------------------------------------- botões: preenchimento diagonal */
.botao {
  --fundo: var(--carvao); --texto: #F3F0E7; --wipe: var(--brasa); --texto-hover: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 44px; padding: .65rem 1.15rem;
  border: 0; background: var(--fundo); color: var(--texto);
  font: 600 .95rem/1.1 var(--rotulo); letter-spacing: .01em; text-decoration: none;
  position: relative; isolation: isolate; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%);
  transition: color var(--rapido) var(--sai);
}
.botao::before {
  content: ""; position: absolute; inset: 0 -40px; z-index: -1; background: var(--wipe);
  transform: translateX(-104%) skewX(-40deg); transform-origin: left;
  transition: transform var(--medio) var(--sai);
}
.botao:hover::before, .botao:focus-visible::before { transform: translateX(0) skewX(-40deg); }
.botao:hover, .botao:focus-visible { color: var(--texto-hover); }
.botao svg { width: 18px; height: 18px; transition: transform var(--rapido) var(--sai); }
.botao:hover svg { transform: translateX(3px); }
.botao.chama { --fundo: var(--chama); --texto: var(--carvao); --wipe: var(--carvao); --texto-hover: #FDC700; }
.botao.claro { --fundo: transparent; --texto: var(--tinta); --wipe: var(--tinta); --texto-hover: var(--papel); box-shadow: inset 0 0 0 2px var(--tinta); }
.botao.pequeno { min-height: 36px; padding: .45rem .8rem; font-size: .85rem; --corte: 9px; }
.botao[disabled], .botao[aria-busy="true"] { opacity: .55; pointer-events: none; }
.botao.perigo { --fundo: var(--vermelho-texto); --texto: #fff; --wipe: var(--carvao); }
.link-seta { display: inline-flex; gap: .35rem; align-items: center; font-weight: 600; color: var(--vermelho-texto); text-decoration: none; font-size: .9rem; }
.link-seta:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-seta svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- faixa: as duas diagonais da marca */
.faixa { position: relative; height: 18px; overflow: hidden; }
.faixa::before, .faixa::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 64%;
  transform: skewX(-40deg);
}
.faixa::before { left: -6%; background: var(--brasa); }
.faixa::after { right: -6%; width: 44%; background: var(--chama); }

/* ------------------------------------------------------------- cartões com canto cortado */
.cartao {
  position: relative; z-index: 0;
  background: var(--papel); border: 1px solid var(--fio);
  padding: 1.15rem 1.2rem 1.25rem;
  clip-path: polygon(0 0, calc(100% - var(--corte-g)) 0, 100% var(--corte-g), 100% 100%, 0 100%);
  transition: transform var(--medio) var(--sai);
}
.cartao::after { /* o fio do canto, que o clip-path cortaria */
  content: ""; position: absolute; top: 0; right: 0; width: calc(var(--corte-g) * 1.4142); height: 1px;
  background: var(--fio); transform-origin: top right; transform: rotate(45deg) translateY(-.5px);
  transition: background-color var(--rapido);
}
.cartao.tem-hover:hover, .cartao.tem-hover:focus-within { transform: translateY(-2px); z-index: 2; }
.cartao.tem-hover:hover::after, .cartao.tem-hover:focus-within::after { background: var(--brasa); height: 3px; }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }

/* ------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; }
.hero .conteudo { display: grid; gap: 2rem; padding-block: clamp(2rem, 1.2rem + 4vw, 4.5rem); align-items: center; }
.hero h1 { font-size: var(--t-mega); text-transform: uppercase; line-height: .92; }
.hero h1 em { font-style: normal; color: var(--chama); display: block; }
.hero p.lead { font: 400 clamp(1.08rem, 1rem + .4vw, 1.3rem)/1.5 var(--leitura); color: var(--tinta-2); max-width: 46ch; margin-top: 1.1rem; }
.hero .acoes-hero { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero figure { margin: 0; position: relative; }
.hero figure img { width: 100%; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.hero figcaption { margin-top: .75rem; font-size: .8rem; color: var(--tinta-2); }
.hero .marca-fundo { position: absolute; right: -6%; bottom: -18%; width: 46%; opacity: .05; pointer-events: none; }
@media (min-width: 860px) { .hero .conteudo { grid-template-columns: 1.15fr .85fr; } }

/* entrada única, orquestrada: o mote é revelado pelo corte diagonal */
@keyframes revela-corte { from { clip-path: polygon(0 0, 0 0, -30% 100%, 0 100%); } to { clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); } }
@keyframes sobe-leve { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero h1 .linha { display: block; animation: revela-corte var(--lento) var(--entra-sai) backwards; }
.hero h1 .linha:nth-child(2) { animation-delay: 140ms; }
.hero .lead, .hero .acoes-hero { animation: sobe-leve var(--medio) var(--sai) backwards; animation-delay: 420ms; }
.hero figure { animation: sobe-leve var(--lento) var(--sai) backwards; animation-delay: 260ms; }

/* ------------------------------------------------------------- publicações */
.post { display: grid; gap: .65rem; }
.post .autor { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.post h3 { font-size: var(--t-2); }
.post h3 a { text-decoration: none; }
.post h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post .corpo { font: 400 1.04rem/1.6 var(--leitura); color: var(--tinta); white-space: pre-line; }
.post .corpo.curto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.selo { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .5rem; font: 600 .7rem/1.2 var(--rotulo);
  letter-spacing: .08em; text-transform: uppercase; background: var(--papel-2); color: var(--tinta-2); }
.selo.verificado { background: var(--carvao); color: #FDC700; }
.selo.verificado svg { width: 12px; height: 12px; }
.selo.admin { background: var(--brasa); color: #fff; }

.reacoes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.reacao {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .3rem .7rem;
  border: 1.5px solid var(--fio); background: transparent; font-size: .85rem; font-weight: 600;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido);
}
.reacao:hover { border-color: var(--tinta); }
.reacao[aria-pressed="true"] { background: var(--chama); border-color: var(--chama); color: var(--carvao); }
.reacao .n { font-variant-numeric: tabular-nums; opacity: .8; }
.reacao svg { width: 16px; height: 16px; }
.comentar-link { margin-left: auto; }

/* ------------------------------------------------------------- notícias */
.noticia { display: grid; grid-template-rows: auto 1fr; gap: .75rem; text-decoration: none; }
.noticia .capa { aspect-ratio: 16 / 9; background: var(--papel-2); overflow: hidden; }
.noticia .capa img { width: 100%; height: 100%; object-fit: cover; }
.noticia h3 { font-size: 1.3rem; }
.noticia:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.noticia p { font-size: .92rem; color: var(--tinta-2); }
.lista-noticias { display: grid; gap: 0; }
.lista-noticias a { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--fio); text-decoration: none; }
.lista-noticias a:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
.lista-noticias h4 { font-size: 1.15rem; grid-column: 1; }
.lista-noticias .meta { grid-column: 1; }

/* ------------------------------------------------------------- petições e ações */
.peticao { display: grid; gap: .7rem; }
.peticao .capa { aspect-ratio: 1200 / 630; background: var(--carvao); overflow: hidden; margin: -1.15rem -1.2rem .2rem; }
.peticao .capa img { width: 100%; height: 100%; object-fit: cover; }
.peticao .capa.vazia { display: grid; place-items: center; }
.peticao .capa.vazia span { font: 700 1.8rem/1 var(--voz); color: #FDC700; text-transform: uppercase; padding: 1rem; text-align: center; }
.peticao h3 { font-size: 1.45rem; }
.peticao .aviso-origem { font-size: .8rem; color: var(--tinta-2); }
.acao { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.data-bloco { width: 64px; text-align: center; background: var(--carvao); color: #F3F0E7; padding: .45rem 0 .5rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.data-bloco b { display: block; font: 700 1.9rem/1 var(--voz); color: #FDC700; }
.data-bloco span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.acao h3 { font-size: 1.35rem; }
.acao .linha-acao { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }

.abas { display: flex; gap: .25rem; border-bottom: 2px solid var(--tinta); margin-bottom: 1.25rem; overflow-x: auto; }
.abas button { border: 0; background: none; padding: .7rem 1rem; font-weight: 600; color: var(--tinta-2); position: relative; white-space: nowrap; }
.abas button[aria-selected="true"] { color: var(--carvao); background: var(--chama); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%); padding-right: 1.4rem; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; align-items: end; }
.chip { min-height: 36px; padding: .35rem .85rem; border: 1.5px solid var(--fio); background: transparent; font-size: .86rem; font-weight: 600; border-radius: 999px; }
.chip[aria-pressed="true"] { background: var(--carvao); color: #F3F0E7; border-color: var(--carvao); }

/* ------------------------------------------------------------- livros */
.livro { display: grid; grid-template-columns: 84px 1fr; gap: 1rem; }
.lombada { aspect-ratio: 2 / 3; display: grid; align-content: space-between; padding: .5rem; color: #F3F0E7; background: var(--carvao);
  font: 700 .82rem/1.05 var(--voz); text-transform: uppercase; position: relative; overflow: hidden; }
.lombada::after { content: ""; position: absolute; inset: auto -30% -10% -30%; height: 34%; background: var(--brasa); transform: skewY(-40deg); transform-origin: left; }
.lombada.mundo::after { background: var(--chama); }
.lombada small { position: relative; z-index: 1; font: 600 .62rem/1 var(--rotulo); letter-spacing: .1em; }
.livro h3 { font-size: 1.3rem; }
.livro .autor { font-weight: 600; font-size: .92rem; }
.livro p { font: 400 .95rem/1.5 var(--leitura); color: var(--tinta-2); margin-top: .35rem; }

/* ------------------------------------------------------------- partidos */
.partido { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: center; }
.numero { width: 64px; height: 64px; display: grid; place-items: center; background: var(--carvao); color: #FDC700; font: 700 1.8rem/1 var(--voz);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.partido h3 { font-size: 1.35rem; }
.partido .linha-partido { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }

/* ------------------------------------------------------------- minha brasa */
.nivel-cartao { padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); display: grid; gap: 1.25rem; position: relative; overflow: hidden; }
.nivel-cartao h2 { font-size: var(--t-mega); color: #FDC700; text-transform: uppercase; line-height: .9; }
.barra-nivel { height: 18px; background: var(--carvao-fio); position: relative; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.barra-nivel span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--brasa), var(--chama));
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transform-origin: left; animation: enche var(--lento) var(--sai) both 200ms; }
@keyframes enche { from { transform: scaleX(0); } }
.degraus { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.degraus div { font-size: .78rem; color: var(--cinza-claro); border-top: 3px solid var(--carvao-fio); padding-top: .4rem; }
.degraus div.feito { color: #FDC700; border-color: var(--chama); }
.ganhos { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ganhos div { border: 1px solid var(--fio); padding: .7rem .8rem; }
.ganhos b { font: 700 1.6rem/1 var(--voz); display: block; }

/* ------------------------------------------------------------- formulários */
.form { display: grid; gap: 1rem; max-width: 520px; }
.campo { display: grid; gap: .35rem; }
.campo label, .campo .legenda { font-weight: 600; font-size: .9rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 46px; padding: .65rem .8rem; border: 1.5px solid var(--tinta-2); background: var(--papel); border-radius: 0;
  scroll-margin-top: 90px;
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--chama); outline-offset: 0; border-color: var(--tinta); }
.campo .ajuda { font-size: .82rem; color: var(--tinta-2); }
.campo .erro { font-size: .85rem; color: var(--vermelho-texto); font-weight: 600; }
.campo [aria-invalid="true"] { border-color: var(--vermelho-texto); }
.duas { display: grid; gap: 1rem; grid-template-columns: 1fr 96px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: start; font-size: .92rem; }
.check input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--carvao); }
.status-form { font-weight: 600; min-height: 1.4em; }
.status-form.erro { color: var(--vermelho-texto); }
.status-form.ok { color: var(--ok); }
.aviso { padding: .9rem 1rem; background: var(--papel-2); border-left: 4px solid var(--chama); font-size: .92rem; }
.aviso.forte { border-left-color: var(--brasa); }

/* ------------------------------------------------------------- comentários */
.comentarios { display: grid; gap: 0; margin-top: 1rem; }
.comentario { padding: 1rem 0; border-bottom: 1px solid var(--fio); display: grid; gap: .35rem; }
.comentario .cabeca { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.comentario p { font: 400 1rem/1.55 var(--leitura); white-space: pre-line; overflow-wrap: anywhere; }
.comentario .acoes-comentario { display: flex; gap: .75rem; }
.texto-botao { border: 0; background: none; padding: .25rem 0; font-size: .82rem; font-weight: 600; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; }
.texto-botao:hover { color: var(--vermelho-texto); }

/* ------------------------------------------------------------- estados */
.vazio { padding: 2rem 1.25rem; text-align: center; border: 1.5px dashed var(--fio); color: var(--tinta-2); display: grid; gap: .75rem; justify-items: center; }
.vazio b { font: 700 1.5rem/1.1 var(--voz); color: var(--tinta); }
.esqueleto { background: linear-gradient(90deg, var(--papel-2), var(--papel), var(--papel-2)); background-size: 300% 100%; animation: brilho 1.4s linear infinite; min-height: 140px; }
@keyframes brilho { to { background-position: -150% 0; } }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 1rem); z-index: 60;
  transform: translateX(-50%); max-width: min(92vw, 460px);
  background: var(--carvao); color: #F3F0E7; padding: .85rem 1.1rem; font-weight: 600; font-size: .92rem;
  border-left: 5px solid var(--chama); box-shadow: 0 14px 40px -12px rgba(0,0,0,.5);
  animation: sobe-leve var(--medio) var(--sai) both;
}
@media (min-width: 960px) { .toast { bottom: 1.5rem; } }
.toast b { color: #FDC700; }

/* ------------------------------------------------------------- rodapé */
.rodape { padding: 2rem var(--gutter) 1rem; font-size: .82rem; color: var(--tinta-2); max-width: var(--largura); margin: 0 auto; display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .esqueleto { animation: none; }
}

.grade > .vazio { grid-column: 1 / -1; }

/* botão de contorno: a borda segue também o canto cortado (a diagonal) */
.botao.claro::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: var(--corte); height: var(--corte); pointer-events: none;
  background: linear-gradient(to top left, transparent calc(50% - 2px), var(--tinta) calc(50% - 2px), var(--tinta) calc(50% + 2px), transparent calc(50% + 2px));
}

/* ---------------------------------------------------------- intro da primeira carga
   Cobre a página enquanto a primeira tela monta; sai levantando como uma cortina.
   Se o script falhar, some sozinha em 20 s (a página nunca fica presa atrás dela). */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #171715 url("../assets/grao-carvao.png");
  color: #F3F0E7; animation: intro-falha .4s 20s forwards; }
.intro-centro { display: grid; justify-items: center; gap: .7rem; padding: 1.5rem; text-align: center; }
.intro-marca { width: 92px; height: auto; animation: intro-marca .9s cubic-bezier(.2, .7, .2, 1) both; }
.intro-nome { font: 700 clamp(2.4rem, 1.8rem + 3vw, 3.6rem)/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .04em;
  text-transform: uppercase; animation: intro-corte .9s .25s cubic-bezier(.2, .7, .2, 1) both; }
.intro-mote { font: 400 1rem/1.4 Georgia, serif; color: #B6B2A6; animation: intro-surge .8s .6s ease-out both; }
.intro-barra { position: relative; width: 140px; height: 3px; margin-top: .6rem; overflow: hidden; background: rgba(255, 255, 255, .12); }
.intro-barra span { position: absolute; inset: 0; background: linear-gradient(90deg, #F20002, #FDC700); transform-origin: left;
  animation: intro-carrega 1.3s ease-in-out infinite; }
.intro-aviso { font-size: .85rem; color: #B6B2A6; opacity: 0; animation: intro-surge .5s 4s ease-out forwards; }
.intro.saindo { animation: intro-sai .9s cubic-bezier(.4, 0, .2, 1) forwards; pointer-events: none; }
.intro.saindo .intro-centro { animation: intro-centro-sai .9s cubic-bezier(.4, 0, .2, 1) forwards; }
.intro.saindo .intro-barra span { animation: none; transform: none; }
@keyframes intro-marca { from { transform: scale(.88); opacity: 0; } }
@keyframes intro-corte { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes intro-surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes intro-carrega { 0% { transform: translateX(-100%) scaleX(.4); } 100% { transform: translateX(260%) scaleX(.4); } }
@keyframes intro-sai { 30% { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes intro-centro-sai { to { opacity: 0; transform: translateY(-14px) scale(.98); } }
/* a página aparece por baixo enquanto a intro se dissolve */
#conteudo.entrada-suave { animation: conteudo-entra .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes conteudo-entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes intro-falha { to { opacity: 0; visibility: hidden; } }

/* o rodapé só aparece depois que a primeira tela montou; o conteúdo reserva a altura da tela */
body:not(.pronto) .rodape-grande { visibility: hidden; }
#conteudo { min-height: calc(100dvh - 72px); }

@media (prefers-reduced-motion: reduce) {
  .intro-marca, .intro-nome, .intro-mote, .intro-barra span { animation: none; }
  .intro.saindo, .intro.saindo .intro-centro, #conteudo.entrada-suave { animation: intro-falha .01s forwards; }
  #conteudo.entrada-suave { animation: none; }
}

/* senha com olho para conferir: aberto mostra, cortado esconde */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 3.2rem; }
.ver-senha { position: absolute; top: 50%; right: .3rem; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--tinta-2); cursor: pointer; transition: color var(--rapido, .18s), background-color var(--rapido, .18s); }
.ver-senha svg { width: 22px; height: 22px; }
.ver-senha .corte { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .25s ease-out; }
.ver-senha[aria-pressed="true"] .corte { stroke-dashoffset: 0; }
.ver-senha:hover { color: var(--tinta); background: var(--papel-2); }
.ver-senha:focus-visible { outline: 3px solid var(--chama); outline-offset: 0; color: var(--tinta); }
.ver-senha[aria-pressed="true"] { color: var(--vermelho-texto); }
@media (prefers-reduced-motion: reduce) { .ver-senha .corte { transition: none; } }