/* =====================================================================
   DPO — Portal Colaborativo
   Design system próprio da página pública, independente do bronx.css
   usado na aplicação.

   A paleta sai do próprio logo do DPO: brasa (vermelho → âmbar) sobre
   carvão quente. É o oposto do azul corporativo — a página fala de
   comunidade e operação, não de software.
   ===================================================================== */

:root {
  /* Carvão */
  --carvao-900: #0a0a0c;
  --carvao-800: #121215;
  --carvao-700: #1a1a1f;
  --carvao-600: #26262d;
  --carvao-500: #3a3a44;

  /* Brasa */
  --brasa:      #ef4425;
  --brasa-alta: #f97316;
  --ambar:      #fbbf24;
  --brasa-suave: rgba(239, 68, 37, .12);

  /* Papel (seções claras) */
  --papel:      #faf9f7;
  --papel-2:    #f2f0ed;
  --tinta:      #17171a;
  --tinta-2:    #45454d;
  --tinta-3:    #74747f;
  --traco:      #e4e1dc;

  /* Texto sobre escuro */
  --claro:      #f5f5f4;
  --claro-2:    #b8b6b2;
  --claro-3:    #86847f;

  --raio:    14px;
  --raio-g:  22px;
  --raio-p:  9px;

  --largura: 1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--carvao-900);
  color: var(--claro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--brasa); color: #fff; }

:focus-visible { outline: 2px solid var(--brasa-alta); outline-offset: 3px; border-radius: 4px; }

.env { width: 100%; max-width: var(--largura); margin: 0 auto; padding-inline: 26px; }

/* Grão: tira o aspecto "chapado" dos fundos escuros. */
.grao {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.045'/%3E%3C/svg%3E");
}

/* =====================================================================
   Tipografia
   ===================================================================== */

.display {
  font-size: clamp(2.35rem, 6.2vw, 4.35rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 780;
}
.titulo {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.028em;
  font-weight: 720;
}
.subtitulo { font-size: clamp(1.02rem, 1.6vw, 1.16rem); line-height: 1.65; }

.brasa-txt {
  background: linear-gradient(102deg, var(--ambar) 0%, var(--brasa-alta) 42%, var(--brasa) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.olho {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brasa-alta);
}
.olho::before {
  content: ''; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brasa), var(--ambar));
}

/* =====================================================================
   Botões
   ===================================================================== */

.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 27px; border-radius: 100px; border: 1px solid transparent;
  font-size: .96rem; font-weight: 640; letter-spacing: -.008em;
  cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s;
  white-space: nowrap;
}
.bt-brasa {
  background: linear-gradient(102deg, var(--brasa-alta), var(--brasa));
  color: #fff; box-shadow: 0 8px 26px rgba(239, 68, 37, .34);
}
.bt-brasa:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(239, 68, 37, .45); }
.bt-linha {
  background: rgba(255, 255, 255, .05); color: var(--claro);
  border-color: rgba(255, 255, 255, .17); backdrop-filter: blur(8px);
}
.bt-linha:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); }
.bt-tinta { background: var(--tinta); color: var(--papel); }
.bt-tinta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.bt-p { padding: 10px 19px; font-size: .87rem; }

/* =====================================================================
   Topo
   ===================================================================== */

.topo {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 10, 12, .72);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topo .env { display: flex; align-items: center; gap: 15px; padding-block: 13px; }
.topo .marca { display: flex; align-items: center; gap: 12px; }
/* dpo-claro.png já tem o texto claro: assenta direto no fundo, sem placa. */
.topo .marca img { height: 40px; width: auto; object-fit: contain; }
.topo .marca b { font-size: .95rem; font-weight: 700; letter-spacing: .015em; display: block; }
.topo .marca span { font-size: .66rem; color: var(--claro-3); letter-spacing: .13em; text-transform: uppercase; }
.topo nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.topo nav a { font-size: .89rem; color: var(--claro-2); transition: color .18s; }
.topo nav a:hover { color: var(--claro); }

@media (max-width: 820px) { .topo nav .link-menu { display: none; } }

/* =====================================================================
   Capa
   ===================================================================== */

.capa { position: relative; overflow: hidden; padding: 42px 0 96px; }

/* Brasas de fundo */
.capa::before,
.capa::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(105px); pointer-events: none;
}
.capa::before {
  width: 620px; height: 620px; top: -230px; left: -160px;
  background: radial-gradient(circle, rgba(239, 68, 37, .34), transparent 68%);
}
.capa::after {
  width: 540px; height: 540px; bottom: -240px; right: -130px;
  background: radial-gradient(circle, rgba(251, 191, 36, .2), transparent 66%);
}
.capa .env { position: relative; z-index: 2; }

.capa-grade {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 58px; align-items: center;
}
@media (max-width: 980px) { .capa-grade { grid-template-columns: 1fr; gap: 46px; } }

.capa-marca {
  width: 258px; margin-bottom: 30px;
  /* Brilho quente por trás, no lugar da moldura: integra ao fundo. */
  filter: drop-shadow(0 6px 26px rgba(239, 68, 37, .3));
}
.capa h1 { margin-bottom: 22px; max-width: 15ch; }
.capa .chamada { color: var(--claro-2); max-width: 540px; font-size: 1.09rem; line-height: 1.68; }

.capa-acoes { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 36px; }

.capa-pe {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-top: 30px; color: var(--claro-3); font-size: .84rem;
}
.pilhas { display: flex; }
.pilhas span {
  width: 30px; height: 30px; border-radius: 50%; margin-right: -9px;
  border: 2px solid var(--carvao-900); display: flex; align-items: center;
  justify-content: center; font-size: .64rem; font-weight: 800; color: #fff;
}

/* ---- Conversa de demonstração ---- */
.demo {
  background: linear-gradient(168deg, var(--carvao-700), var(--carvao-800));
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--raio-g); padding: 22px;
  box-shadow: 0 34px 78px rgba(0, 0, 0, .58);
  position: relative;
}
.demo::after {
  content: ''; position: absolute; inset: -1px; border-radius: var(--raio-g); pointer-events: none;
  background: linear-gradient(150deg, rgba(251,191,36,.35), transparent 42%, rgba(239,68,37,.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.demo-cab {
  display: flex; align-items: center; gap: 10px; padding-bottom: 15px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.demo-cod {
  background: linear-gradient(102deg, var(--brasa-alta), var(--brasa)); color: #fff;
  font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.demo-cab .req { font-size: .82rem; color: var(--claro-2); line-height: 1.45; }

.fala { display: flex; gap: 11px; margin-bottom: 14px; }
.fala .quem {
  width: 33px; height: 33px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800; color: #fff;
}
.fala .balao {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px 13px 13px 13px; padding: 11px 14px; flex: 1;
}
.fala .nome { font-size: .74rem; font-weight: 700; margin-bottom: 4px; color: var(--claro); }
.fala .nome i { font-style: normal; font-weight: 500; color: var(--claro-3); }
.fala .txt { font-size: .855rem; color: var(--claro-2); line-height: 1.58; }
.fala.oficial .balao {
  background: linear-gradient(140deg, rgba(239, 68, 37, .14), rgba(251, 191, 36, .07));
  border-color: rgba(239, 68, 37, .3);
}
.fala.oficial .nome { color: var(--ambar); }

.demo-pe {
  display: flex; align-items: center; gap: 8px; margin-top: 17px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08); font-size: .76rem; color: var(--claro-3);
}
.pisca {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); animation: pulso 2.2s ease-in-out infinite;
}
@keyframes pulso { 50% { opacity: .35; transform: scale(.85); } }

/* =====================================================================
   Números
   ===================================================================== */

.numeros { border-block: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .018); }
.numeros .env {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-block: 38px;
}
.numeros .n { text-align: center; }
.numeros .v {
  font-size: clamp(1.9rem, 3.6vw, 2.65rem); font-weight: 780; letter-spacing: -.035em; line-height: 1;
}
.numeros .r { font-size: .78rem; color: var(--claro-3); margin-top: 8px; letter-spacing: .04em; }
@media (max-width: 700px) { .numeros .env { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; } }

/* =====================================================================
   Seções
   ===================================================================== */

.secao { padding: 96px 0; position: relative; }
.secao.papel { background: var(--papel); color: var(--tinta); }
.secao.papel .subtitulo { color: var(--tinta-2); }

.cabeca { max-width: 680px; margin-bottom: 54px; }
.cabeca.meio { max-width: 780px; margin-inline: auto; text-align: center; }
.cabeca.meio .olho { justify-content: center; }
.cabeca .titulo { margin: 15px 0 16px; }

/* ---- Antes × depois ---- */
.virada { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .virada { grid-template-columns: 1fr; } }

.lado { border-radius: var(--raio-g); padding: 32px 30px; }
.lado h3 { font-size: 1.16rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 11px; }
.lado.antes h3 svg { color: var(--tinta-3); }
.lado ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.lado li { display: flex; gap: 12px; font-size: .95rem; line-height: 1.58; }
.lado li span:first-child { flex-shrink: 0; font-size: 1rem; line-height: 1.5; }

.lado.antes { background: var(--papel-2); border: 1px solid var(--traco); color: var(--tinta-2); }
.lado.antes h3 { color: var(--tinta-3); }
.lado.depois {
  background: linear-gradient(155deg, var(--carvao-800), var(--carvao-700));
  color: var(--claro-2); border: 1px solid rgba(239, 68, 37, .26);
  box-shadow: 0 22px 50px rgba(239, 68, 37, .1);
}
.lado.depois h3 { color: var(--claro); }

/* ---- Passos ---- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
@media (max-width: 900px) { .passos { grid-template-columns: 1fr; } }

.passo {
  background: var(--papel); border: 1px solid var(--traco); border-radius: var(--raio-g);
  padding: 32px 28px; transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s;
}
.passo:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(23, 23, 26, .1); border-color: #d8d4cd; }
.passo .n {
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: 20px;
  background: linear-gradient(140deg, var(--brasa-alta), var(--brasa));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; box-shadow: 0 8px 20px rgba(239, 68, 37, .3);
}
.passo h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 11px; letter-spacing: -.015em; }
.passo p { font-size: .93rem; color: var(--tinta-2); line-height: 1.66; }
.passo .marca-passo {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; font-size: .72rem; font-weight: 750;
  color: var(--brasa); letter-spacing: .07em;
}
.passo .marca-passo::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(140deg, var(--ambar), var(--brasa));
}

/* =====================================================================
   Estrutura do DPO (a pirâmide do guia)
   ===================================================================== */

.piramide { max-width: 780px; margin: 0 auto; }

.faixa-topo, .faixa-base {
  border-radius: var(--raio); padding: 17px 22px; text-align: center;
  font-weight: 700; letter-spacing: -.01em; color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.faixa-topo { background: linear-gradient(102deg, #d97706, #b45309); }
.faixa-base { background: linear-gradient(102deg, #2563eb, #1d4ed8); }
.faixa-topo small, .faixa-base small {
  display: block; font-size: .72rem; font-weight: 500; opacity: .82; margin-top: 3px;
}

.colunas {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0;
}
.coluna {
  border-radius: var(--raio-p); padding: 22px 10px; text-align: center;
  min-height: 132px; display: flex; flex-direction: column; justify-content: center;
  gap: 6px; color: #fff; transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.coluna:hover { transform: translateY(-5px); }
.coluna .num { font-size: .68rem; opacity: .78; font-weight: 700; }
.coluna .nome { font-size: .86rem; font-weight: 700; line-height: 1.28; }

.eixos {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--claro-3);
}
.eixos .centro { color: var(--ambar); }

.nota-piramide {
  display: flex; gap: 13px; align-items: flex-start; margin-top: 30px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--raio); padding: 17px 20px; font-size: .9rem;
  color: var(--claro-2); line-height: 1.62;
}
.nota-piramide b { color: var(--claro); }

@media (max-width: 720px) {
  .colunas { grid-template-columns: repeat(2, 1fr); }
  .coluna { min-height: 96px; }
}

/* =====================================================================
   Manifesto
   ===================================================================== */

.manifesto {
  background: linear-gradient(150deg, var(--carvao-800) 0%, #1c1013 100%);
  border-radius: 26px; padding: 62px 54px; position: relative; overflow: hidden;
  border: 1px solid rgba(239, 68, 37, .2);
}
.manifesto::before {
  content: '"'; position: absolute; top: -34px; left: 28px;
  font-size: 15rem; line-height: 1; color: rgba(239, 68, 37, .1);
  font-family: Georgia, serif; pointer-events: none;
}
.manifesto p {
  position: relative; font-size: clamp(1.18rem, 2.3vw, 1.62rem);
  line-height: 1.55; font-weight: 500; letter-spacing: -.018em; max-width: 800px;
}
.manifesto p + p { margin-top: 20px; }
.manifesto .assina {
  margin-top: 30px; font-size: .82rem; color: var(--claro-3);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
@media (max-width: 700px) { .manifesto { padding: 44px 28px; } }

/* =====================================================================
   Fecho
   ===================================================================== */

.fecho { text-align: center; position: relative; overflow: hidden; padding: 104px 0; }
.fecho::before {
  content: ''; position: absolute; width: 780px; height: 480px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(239, 68, 37, .22), transparent 68%);
  filter: blur(78px); pointer-events: none;
}
.fecho .env { position: relative; z-index: 2; }
.fecho .subtitulo { color: var(--claro-2); max-width: 500px; margin: 17px auto 34px; }
.fecho-acoes { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   Rodapé
   ===================================================================== */

.rodape { border-top: 1px solid rgba(255, 255, 255, .07); padding: 34px 0; }
.rodape .env {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: .82rem; color: var(--claro-3);
}
.rodape img { width: 96px; height: auto; opacity: .7; }
.rodape .sep { margin-left: auto; }

/* =====================================================================
   Revelação no scroll

   O conteúdo é visível por padrão. Só some quando o JS confirma que
   consegue revelá-lo de volta (classe .anima no <html>) — assim uma
   falha do observador ou JS desligado nunca deixa a página em branco.
   ===================================================================== */

.anima .revela {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1);
}
.anima .revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anima .revela { opacity: 1; transform: none; transition: none; }
  .pisca { animation: none; }
  .bt, .passo, .coluna { transition: none; }
}

/* =====================================================================
   Ícones
   ===================================================================== */

.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.ic-g { width: 20px; height: 20px; flex-shrink: 0; }