/* =========================================================
   Canais anônimos NR-01 — Sanpio Construtora
   Paleta da marca: laranja #ee8c35, marrom #3e2723.
   Botões em marrom (contraste alto); laranja nos destaques.
   ========================================================= */

:root{
  --bg:#ffffff;
  --card:#ffffff;
  --ink:#2a201b;
  --muted:#6d635b;
  --linha:#d7d1cb;
  --acento-marca:#ee8c35;   /* laranja puro da marca, para campos sólidos */
  --acento:#e07f22;          /* laranja da marca, levemente escurecido p/ contraste */
  --acento-forte:#c76c15;
  /* O laranja da marca fica em 2,9:1 sobre branco — insuficiente para texto.
     Onde ele VIRA TEXTO usamos esta variante escurecida (5,2:1); nas barras,
     fios e marcadores, que são elementos gráficos, o laranja original fica. */
  --acento-texto:#9a5510;
  --acento-fraco:#fbeede;
  --marca:#3e2723;           /* marrom da marca — botões e seleção */
  --marca-forte:#2a1712;
  --btn-ink:#ffffff;
  --alerta:#8a5a1d;
  --alerta-fraco:#fdf3e3;
  --erro:#b23b2e;
  --largura:1140px;
  --topo:76px;   /* 72 da linha + 3 da barra + 1 da borda */
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;   /* sempre claro: sem tema escuro automatico */
}


*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.55 var(--font);
}
/* Só o questionário em carrossel trava o scroll do body. */
body.app{ overflow:hidden; }

.wrap{ max-width:660px; margin:0 auto; padding:0 22px; }
.wrap-l{ max-width:var(--largura); margin:0 auto; padding:0 20px; }
@media (min-width:900px){ .wrap-l{ padding:0 40px; } }

/* ---------- topo ---------- */
.topo{
  background:var(--card);
  border-bottom:1px solid var(--linha);
  padding-top:env(safe-area-inset-top);
}
/* Só o carrossel precisa do topo fixo, porque lá o palco ocupa a altura da
   tela inteira. Nas páginas de leitura ele rola junto com o conteúdo, como em
   página institucional — e assim deixa de cobrir o começo do texto, que era o
   que acontecia na home e na denúncia. */
body.app .topo{ position:fixed; inset:0 0 auto; z-index:20; }
.topo-linha{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:72px; }
.marca{ display:inline-flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.01em; color:inherit; text-decoration:none; }
.marca img{ height:46px; width:auto; display:block; }
.marca-link:hover{ opacity:.85; }
.selo{
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--marca); background:transparent;
  border:1px solid var(--marca);
  padding:5px 9px; text-transform:uppercase;
}
.barra{ height:3px; background:var(--linha); }
.barra-fill{
  height:100%; width:0%; background:var(--acento);
  transition:width .4s var(--ease);
}

/* ---------- palco e slides ---------- */
.palco{
  position:relative;
  margin-top:calc(var(--topo) + env(safe-area-inset-top));
  height:calc(100vh - var(--topo) - env(safe-area-inset-top));
  height:calc(100dvh - var(--topo) - env(safe-area-inset-top));
  overflow:hidden;
}
.slide{
  position:absolute; inset:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.slide-int{
  max-width:660px; margin:0 auto; min-height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:32px 22px calc(112px + env(safe-area-inset-bottom));
}

.entra-baixo{ animation:entraBaixo .18s ease-out both; }
.entra-cima { animation:entraCima  .18s ease-out both; }
.sai-cima   { animation:saiCima    .14s ease-out both; }
.sai-baixo  { animation:saiBaixo   .14s ease-out both; }
@keyframes entraBaixo{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes entraCima { from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none} }
@keyframes saiCima   { from{opacity:1; transform:none} to{opacity:0; transform:translateY(-10px)} }
@keyframes saiBaixo  { from{opacity:1; transform:none} to{opacity:0; transform:translateY(10px)} }

/* ---------- tipografia ---------- */
.olho{
  margin:0 0 10px; font-size:12.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--acento-texto);
  display:flex; align-items:center; gap:8px;
}
.olho .contador{
  color:var(--muted); text-transform:none; letter-spacing:0;
  font-weight:500; font-size:12.5px;
}

/* No questionário o nome da dimensão vira placa: campo sólido, mesmo
   vocabulário dos blocos da home. Solto, era só uma linha de texto laranja
   pairando acima da pergunta, sem nada que a ancorasse. O contador vai para a
   direita — é informação de progresso, não faz parte do rótulo. */
.olho-placa{ margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.olho-marca{
  background:var(--acento-marca); color:var(--marca);
  padding:6px 11px; letter-spacing:.09em;
}
.olho-placa .contador{ margin-left:auto; }
h1{ margin:0 0 14px; font-size:33px; line-height:1.06; letter-spacing:-.025em; font-weight:900; color:var(--ink); text-wrap:balance; }
.pergunta{ margin:0 0 24px; font-size:24px; line-height:1.3; letter-spacing:-.01em; font-weight:600; }
.lead{ margin:0 0 24px; color:var(--muted); font-size:16px; }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.95em; }
.centro{ text-align:center; }

@media (min-width:560px){
  h1{ font-size:44px; }
  .pergunta{ font-size:27px; }
}

/* ---------- opções ---------- */
.opcoes{ display:flex; flex-direction:column; gap:8px; margin:0 0 8px; }
.opcao{ position:relative; display:block; }
.opcao input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.opcao > span{
  display:flex; align-items:center; gap:12px;
  min-height:54px; padding:11px 16px;
  background:var(--card);
  border:1px solid var(--linha); border-radius:0;
  font-size:16px; line-height:1.3; color:var(--ink);
  transition:border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease;
}
.tecla{
  flex:0 0 auto;
  width:24px; height:24px; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  background:var(--acento-fraco); color:var(--acento);
  border:1px solid color-mix(in srgb, var(--acento) 25%, transparent);
  transition:inherit;
}
.opcao input:checked + span{
  background:var(--marca); border-color:var(--marca); color:var(--btn-ink);
}
.opcao input:checked + span .tecla{
  background:color-mix(in srgb, var(--btn-ink) 90%, transparent);
  color:var(--marca); border-color:transparent;
}
.opcao input:focus-visible + span{ outline:2px solid var(--acento); outline-offset:2px; }
@media (hover:hover){
  .opcao input:not(:checked):hover + span{ border-color:var(--marca); }
}
.opcao.discreta > span{ background:transparent; font-size:15px; color:var(--muted); min-height:46px; }
.opcao.discreta input:checked + span{ color:var(--btn-ink); }

.dica{ margin:16px 0 0; font-size:13px; color:var(--muted); }
.dica kbd{
  font:inherit; font-size:11.5px; font-weight:600;
  background:var(--card); border:1px solid var(--linha);
  border-bottom-width:2px; border-radius:0; padding:1px 5px; margin:0 1px;
}
@media (max-width:640px){ .dica{ display:none; } }

.pendente-msg{ display:block; margin:14px 0 0; font-size:14.5px; font-weight:600; color:var(--erro); }
.pendente-msg[hidden]{ display:none; }
.tremer{ /* sem sacudida: a mensagem em vermelho já sinaliza */ }

a{ color:var(--marca); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--acento-forte); }

/* ---------- blocos ---------- */
.cartao{
  background:var(--card); border:1px solid var(--linha);
  border-radius:0; padding:18px 20px; margin:0 0 22px; text-align:left;
}
.cartao-titulo{ margin:0 0 12px; font-size:14.5px; font-weight:700; }
.cartao p{ margin:0 0 8px; }
.cartao p:last-child{ margin-bottom:0; }
.cartao-apoio{ background:var(--acento-fraco); border-color:color-mix(in srgb, var(--acento) 24%, transparent); }

.lista-check{ list-style:none; margin:0; padding:0; }
.lista-check li{
  position:relative; padding:0 0 0 20px; margin-bottom:9px;
  font-size:14.5px; color:var(--muted); line-height:1.45;
}
.lista-check li:last-child{ margin-bottom:0; }
.lista-check li::before{
  content:""; position:absolute; left:2px; top:.5em;
  width:6px; height:6px; background:var(--acento);
}
.lista-check strong{ color:var(--ink); font-weight:600; }

.aviso{
  background:var(--alerta-fraco);
  border:1px solid color-mix(in srgb, var(--alerta) 30%, transparent);
  color:var(--alerta);
  border-radius:0; padding:13px 15px; margin:0 0 20px; font-size:14.5px; line-height:1.45;
}
.aviso p{ margin:0; }

/* ---------- campos ---------- */
input[type=text]{
  width:100%; font:inherit; font-size:20px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  background:var(--card); border:1px solid var(--linha);
  border-radius:0; padding:13px 16px; appearance:none;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}
input[type=text]:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-color:var(--acento); }
input[type=text]::placeholder{ color:var(--muted); font-weight:400; letter-spacing:.04em; }

textarea{
  width:100%; font:inherit; color:var(--ink);
  background:var(--card); border:1px solid var(--linha);
  border-radius:0; padding:14px 16px; line-height:1.55;
  resize:vertical; appearance:none;
}
textarea:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-color:var(--acento); }
.ajuda{ margin:10px 0 0; font-size:13.5px; color:var(--muted); line-height:1.45; }

/* ---------- botões ---------- */
.acoes{ display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap; }
.btn{
  font:inherit; font-weight:650; font-size:16px;
  padding:13px 26px; border-radius:0; border:1px solid transparent;
  background:var(--marca); color:var(--btn-ink);
  cursor:pointer; min-height:50px;
  transition:background .15s ease, opacity .15s ease;
}
.btn:hover{ background:var(--marca-forte); }
.btn:disabled{ opacity:.55; cursor:default; }
.btn:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
.btn-vazado{ background:transparent; color:var(--muted); border-color:var(--linha); }
.btn-vazado:hover{ background:transparent; color:var(--ink); border-color:var(--muted); }

/* ---------- navegação fixa ---------- */
.nav{
  position:fixed; z-index:20;
  right:20px; bottom:calc(20px + env(safe-area-inset-bottom));
  display:flex; gap:2px;
  background:var(--marca); border-radius:0; overflow:hidden;
}
.nav[hidden]{ display:none; }
.nav-btn{
  width:42px; height:40px; border:0; cursor:pointer;
  background:var(--marca); color:var(--btn-ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .14s ease, opacity .14s ease;
}
.nav-btn svg{ width:20px; height:20px; }
.nav-btn:hover:not(:disabled){ background:var(--marca-forte); }
.nav-btn:disabled{ opacity:.4; cursor:default; }
.nav-btn + .nav-btn{ border-left:1px solid color-mix(in srgb, var(--btn-ink) 22%, transparent); }

/* ---------- estados finais ---------- */
.marca-fim{
  width:56px; height:6px; margin:0 auto 26px;
  background:var(--acento);
  font-size:0; line-height:0; overflow:hidden;   /* engole o caractere do HTML */
}
.marca-fim.ruim{ background:var(--erro); }
.spinner{
  width:160px; height:4px; margin:0 auto 22px;
  background:var(--linha); position:relative; overflow:hidden;
}
.spinner::after{
  content:""; position:absolute; inset:0 auto 0 0; width:40%;
  background:var(--acento); animation:corre 1.1s ease-in-out infinite;
}
@keyframes corre{ 0%{ left:-40% } 100%{ left:100% } }

.rodape-legal{ margin:32px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* =========================================================
   Home e páginas de fluxo simples (denúncia)
   ========================================================= */
.pagina{ padding:32px 22px 64px; }
.pagina-centro{ padding-top:24px; }

/* ---------- home: blocos de placa ---------- */
.regua{ height:6px; background:var(--acento); }

.abertura{ padding:30px 0 26px; }
.titulo-placa{
  margin:0 0 14px; font-size:40px; line-height:.98; font-weight:900;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--ink);
  text-wrap:balance;
}
.abertura .lead{ margin:0; max-width:34ch; }

/* Os canais sangram de ponta a ponta — é o que dá o caráter de placa.
   No desktop viram duas colunas; no celular empilham. */
.canais{ display:grid; grid-template-columns:1fr; }
.canal{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:26px 20px 24px; text-decoration:none; color:inherit;
  transition:filter .12s ease;
}
.canal:hover{ filter:brightness(.96); }
.canal-laranja{ background:var(--acento-marca); }
.canal-marrom { background:var(--marca); }
.canal-olho{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:9px;
}
.canal-laranja .canal-olho{ color:var(--marca); }
.canal-marrom  .canal-olho{ color:var(--acento-marca); }
.canal-titulo{
  font-size:27px; line-height:1.08; font-weight:700;
  letter-spacing:-.01em; margin-bottom:10px; max-width:18ch;
}
.canal-laranja .canal-titulo{ color:var(--marca-forte); }
.canal-marrom  .canal-titulo{ color:#ffffff; }
.canal-desc{ font-size:15px; line-height:1.5; margin-bottom:20px; max-width:36ch; }
.canal-laranja .canal-desc{ color:#4a2d16; }
.canal-marrom  .canal-desc{ color:#d8ccc6; }
.canal-btn{
  display:inline-flex; align-items:center; min-height:48px; padding:0 26px;
  font-size:16px; font-weight:700;
}
.canal-laranja .canal-btn{ background:var(--marca); color:#ffffff; }
.canal-marrom  .canal-btn{ background:var(--acento-marca); color:var(--marca-forte); }
.canal:focus-visible{ outline:3px solid var(--ink); outline-offset:-3px; }

/* Terceiro acesso: quem consulta protocolo já denunciou, então fica colado no
   bloco de denúncia. Fio fino e tipo pequeno — utilidade, não convite. */
.faixa-protocolo{ border-bottom:1px solid var(--linha); }
.faixa-int{ display:flex; flex-direction:column; padding:18px 20px 16px; }
.faixa-rotulo{
  margin:0 0 2px; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.faixa-link{
  display:inline-flex; align-items:center; min-height:44px; align-self:flex-start;
  font-size:16px; font-weight:600; color:var(--acento-texto);
  text-decoration:underline; text-underline-offset:3px;
}

.home-fim{ padding:26px 0 30px; }
.home-fim .cartao{ margin-bottom:22px; }
.home-fim .rodape-legal{ margin:0; }

@media (min-width:900px){
  .abertura{ padding:68px 0 56px; }
  .titulo-placa{ font-size:68px; line-height:.96; letter-spacing:-.025em; max-width:16ch; }
  .abertura .lead{ font-size:19px; max-width:52ch; }
  .canais{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .canal{ padding:52px 48px 48px; }
  .canal-titulo{ font-size:36px; line-height:1.1; }
  .canal-desc{ font-size:17px; max-width:44ch; margin-bottom:30px; }
  .canal-btn{ min-height:54px; padding:0 34px; font-size:17px; }
  .faixa-int{ flex-direction:row; align-items:center; gap:16px; padding:22px 40px; }
  .faixa-rotulo{ margin:0; font-size:13px; letter-spacing:.14em; }
  .home-fim{ padding:44px 0 48px; }
  .home-fim .fim-grade{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:40px; align-items:start;
  }
  .home-fim .cartao{ margin-bottom:0; }
}

/* Bloco de placa: usado no momento que a pessoa precisa levar embora —
   o protocolo da denúncia. Mesma linguagem dos canais da home. */
.bloco-placa{
  background:var(--acento-marca); padding:22px 20px 20px; margin:0 0 22px;
}
.bloco-placa .cartao-titulo{
  color:var(--marca); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 10px;
}
.bloco-placa .ajuda{ color:#4a2d16; margin-top:12px; }
.bloco-placa .protocolo{ color:var(--marca-forte); }
@media (min-width:900px){ .bloco-placa{ padding:30px 28px 26px; } }

/* ---------- denúncia ---------- */
.pagina .campo{ margin:0 0 24px; }
.pagina label{ display:block; font-weight:600; font-size:15px; margin-bottom:10px; }
.obrig{ color:var(--erro); }
.contador-txt{ display:block; margin-top:4px; font-size:12.5px; color:var(--muted); }
.protocolo{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:30px; font-weight:700; letter-spacing:.08em;
  color:var(--acento-texto); margin:2px 0 0;
}
.acoes-centro{ justify-content:center; }
.acoes-centro .btn{ flex:0 0 auto; }
a.btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }