/* Defesa Civil — Santa Tereza do Oeste
   Cores da identidade da Defesa Civil: azul-marinho (institucional) e laranja (sinalização de alerta),
   sobre fundo claro. Mesma estrutura do site do Plano Diretor. */
:root {
  --fundo: #F4F6F9; --fundo-2: #E8EDF3; --branco: #FFFFFF;
  --tinta: #17212B; --tinta-2: #4A5866; --linha: #D3DBE4;
  --azul: #0B2D5B; --azul-2: #164A8A; --laranja: #EF7D00; --laranja-2: #C96500;
  --vermelho: #C62828; --verde: #2E7D32; --raio: 8px;
  --fonte: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-tit: "Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 1.0625rem/1.55 var(--fonte); }
img { max-width: 100%; }
a { color: var(--azul-2); text-underline-offset: 2px; }
a:hover { color: var(--laranja-2); }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--fonte-tit); line-height: 1.15; color: var(--tinta); margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 .9em; }
.dc-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.pular { position: absolute; left: -999px; top: 0; background: var(--laranja); color: #fff; padding: 8px 14px; z-index: 50; }
.pular:focus { left: 8px; }
.vazio { color: var(--tinta-2); font-style: italic; }
.nota { font-size: .9rem; color: var(--tinta-2); }
.lead { font-size: 1.2rem; max-width: 64ch; }

/* faixa de emergência + topo */
.faixa-emerg { background: var(--azul); color: #fff; font-size: .9rem; }
.faixa-emerg .dc-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 7px 0; }
.faixa-emerg a { color: #fff; text-decoration: none; white-space: nowrap; }
.faixa-emerg a b { color: #FFB74D; font-size: 1.05rem; }
.faixa-emerg a:hover { text-decoration: underline; color: #fff; }
.fe-rot { font-weight: 700; opacity: .85; }
.fe-portal { margin-left: auto; opacity: .8; }
.dc-topo { background: var(--branco); border-bottom: 4px solid var(--laranja); position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 10px rgba(11,45,91,.06); }
.dc-topo .dc-wrap { display: flex; align-items: center; gap: 24px; min-height: 70px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); margin-right: auto; }
.marca-sel { width: 46px; height: 46px; border-radius: 50%; background: var(--laranja); color: #fff; display: grid; place-items: center; font-size: 1.3rem; box-shadow: inset 0 0 0 3px var(--azul); }
.marca span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.marca strong { font: 800 1.45rem/1 var(--fonte-tit); color: var(--azul); text-transform: uppercase; letter-spacing: .02em; }
.marca small { font-size: .85rem; color: var(--tinta-2); }
#dcNav { display: flex; gap: 2px; }
#dcNav a { padding: 23px 11px 19px; text-decoration: none; color: var(--tinta); font-weight: 600; border-bottom: 4px solid transparent; margin-bottom: -4px; }
#dcNav a:hover { color: var(--azul-2); border-bottom-color: var(--linha); }
#dcNav a[aria-current="page"] { color: var(--azul); border-bottom-color: var(--azul); }
.menu-btn { display: none; }
.faixa-nivel { background: var(--nv); color: var(--nvt); }
.faixa-nivel .dc-wrap { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 0; }
.faixa-nivel strong { font: 700 1.15rem/1 var(--fonte-tit); text-transform: uppercase; letter-spacing: .03em; }
.faixa-nivel a { color: var(--nvt); font-weight: 700; margin-left: auto; }

/* botões e formulários */
button, .botao { display: inline-flex; align-items: center; gap: 8px; background: var(--laranja); color: #fff; border: 0; border-radius: var(--raio); padding: 11px 20px; font: 700 1rem/1.2 var(--fonte); text-decoration: none; cursor: pointer; }
button:hover, .botao:hover { background: var(--laranja-2); color: #fff; }
.botao-sec { background: var(--branco); color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }
.botao-sec:hover { background: var(--azul); color: #fff; }
.botao-wa { background: #25D366; } .botao-wa:hover { background: #1EBE5B; }
input, select, textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #B8C4D0; border-radius: var(--raio); background: #fff; color: var(--tinta); }
input:focus, select:focus, textarea:focus { border-color: var(--azul-2); outline: 2px solid rgba(22,74,138,.2); }
label { display: block; font-weight: 600; margin: 14px 0 5px; }
label small { font-weight: 400; color: var(--tinta-2); }
.isca { position: absolute; left: -9999px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: auto; margin-top: 5px; }
.opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; margin-top: 4px; }
.opcoes label { margin: 4px 0; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.alerta { background: #FDECEA; border-left: 5px solid var(--vermelho); padding: 12px 16px; border-radius: var(--raio); margin: 0 0 16px; }
.ok { background: #E8F5E9; border-left: 5px solid var(--verde); padding: 14px 18px; border-radius: var(--raio); margin: 0 0 16px; }
.ok .protocolo { font: 800 1.6rem/1.2 var(--fonte-tit); color: var(--azul); letter-spacing: .04em; }
.caixa-form { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 22px 24px; }
.caixa-form h2 { margin-top: 0; }
.caixa-lateral { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 18px 20px; }
.caixa-lateral h2, .caixa-lateral h3 { margin-top: 0; }

/* capa */
.hero { background: linear-gradient(120deg, var(--azul) 0%, #123E78 60%, #1B5A9E 100%); color: #fff; padding: 46px 0 40px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(239,125,0,.18); }
.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: center; position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: .15em; }
.hero .sub-h { font: 600 1.15rem/1.3 var(--fonte-tit); color: #FFB74D; margin: 0 0 14px; }
.hero .lead { color: #E3ECF7; font-size: 1.08rem; }
.atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.atalhos .botao-sec { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.atalhos .botao-sec:hover { background: #fff; color: var(--azul); }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.num { display: flex; flex-direction: column; gap: 2px; background: #fff; color: var(--tinta); border-radius: 12px; padding: 14px 16px; text-decoration: none; border-top: 5px solid var(--laranja); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.num b { font: 800 2.4rem/1 var(--fonte-tit); color: var(--azul); }
.num span { font-weight: 700; }
.num small { color: var(--tinta-2); font-size: .82rem; }
.num:hover { transform: translateY(-2px); color: var(--tinta); }
.num-wa { border-top-color: #25D366; } .num-wa b { font-size: 1.45rem; color: #128C4A; padding: 7px 0 4px; }
.num-193 { border-top-color: var(--vermelho); } .num-192 { border-top-color: #D81B60; }

/* blocos */
.bloco { padding: 40px 0; }
.bloco + .bloco { padding-top: 6px; }
.bloco-branco { background: #fff; border-block: 1px solid var(--linha); }
.cabeca { background: #fff; border-bottom: 1px solid var(--linha); padding: 30px 0 24px; }
.cabeca h1 { margin-bottom: .2em; }
.migalha { font-size: .9rem; color: var(--tinta-2); margin-bottom: 8px; }
.sub { color: var(--tinta-2); max-width: 70ch; }
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cartao { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 18px; text-decoration: none; color: var(--tinta); }
a.cartao:hover { border-color: var(--azul-2); box-shadow: 0 6px 18px rgba(11,45,91,.1); color: var(--tinta); }
.cartao i.ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #FFF1E0; color: var(--laranja-2); font-size: 1.25rem; }
.cartao strong { font: 700 1.15rem/1.2 var(--fonte-tit); color: var(--azul); }
.cartao span { color: var(--tinta-2); font-size: .95rem; }
.cartao em { margin-top: auto; font-style: normal; font-weight: 700; color: var(--azul-2); font-size: .92rem; }

/* avisos */
.lista-avisos { display: grid; gap: 12px; }
.aviso { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; background: #fff; border: 1px solid var(--linha); border-left: 6px solid var(--nv); border-radius: 10px; padding: 16px 18px; }
.aviso-antigo { opacity: .78; }
.av-ico { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--nv) 15%, #fff); color: var(--nv); display: grid; place-items: center; font-size: 1.35rem; }
.av-meta { margin: 0 0 4px; font-size: .88rem; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aviso h3 { margin: 0 0 6px; }
.av-texto { font-size: .97rem; } .av-texto p:last-child { margin: 0; }
.av-fonte { font-size: .85rem; color: var(--tinta-2); margin: 6px 0 0; }
.av-img { width: 150px; border-radius: 8px; align-self: start; }
.selo-nv { display: inline-block; background: var(--nv); color: var(--nvt); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 9px; border-radius: 99px; }
.sem-alerta { display: flex; gap: 14px; align-items: center; background: #E8F5E9; border: 1px solid #C8E6C9; border-radius: 12px; padding: 16px 18px; }
.sem-alerta i { font-size: 1.6rem; color: var(--verde); }
.sem-alerta p { margin: 0; }
.receber { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.sms-40199 { background: var(--azul); color: #fff; border-radius: 12px; padding: 20px 22px; }
.sms-40199 b.n { display: block; font: 800 2.6rem/1 var(--fonte-tit); color: #FFB74D; margin: 4px 0 8px; }
.sms-40199 ol { margin: 0; padding-left: 20px; }

/* equipe */
.tabela { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.tabela th, .tabela td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela thead th { background: var(--fundo-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela-rolagem { overflow-x: auto; }

/* planos e documentos */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.plano { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 20px; display: flex; gap: 14px; }
.plano > i { font-size: 2rem; color: var(--laranja); }
.plano h3 { margin: 0 0 6px; color: var(--azul); }
.plano p { font-size: .95rem; color: var(--tinta-2); }
.lista-docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista-docs li { background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.lista-docs li > i { color: var(--laranja-2); font-size: 1.3rem; margin-top: 2px; }
.lista-docs strong { display: block; color: var(--tinta); }
.lista-docs small { color: var(--tinta-2); }
.lista-docs .acao { white-space: nowrap; font-weight: 700; }
.doc-cat { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--azul-2); background: #E3ECF7; border-radius: 4px; padding: 1px 7px; margin-bottom: 3px; }

/* guias */
.guias-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.guias-nav a { display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--linha); border-radius: 99px; padding: 7px 14px; text-decoration: none; color: var(--azul); font-weight: 600; }
.guias-nav a:hover { border-color: var(--laranja); }
.guia { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; scroll-margin-top: 100px; }
.guia-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.guia-cab i { width: 52px; height: 52px; border-radius: 12px; background: var(--azul); color: #fff; display: grid; place-items: center; font-size: 1.4rem; }
.guia-cab h2 { margin: 0; }
.guia-cab p { margin: 0; color: var(--tinta-2); }
.fases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fase { border-radius: 10px; padding: 14px 16px; background: var(--fundo); }
.fase h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.fase-antes h3 { color: var(--azul-2); } .fase-durante h3 { color: var(--laranja-2); } .fase-depois h3 { color: var(--verde); }
.fase ul { margin: 0; padding-left: 18px; } .fase li { margin-bottom: 6px; font-size: .96rem; }

/* locais */
.locais { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.local { background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px; }
.local strong { color: var(--azul); }
.local p { margin: 4px 0 0; font-size: .92rem; color: var(--tinta-2); }

/* acompanhar protocolo */
.situacao { display: inline-block; color: #fff; font-weight: 700; border-radius: 99px; padding: 3px 12px; font-size: .85rem; }
.resposta { background: #F1F6FC; border-left: 4px solid var(--azul-2); padding: 10px 14px; border-radius: 6px; margin-top: 10px; }
.contagem { font: 800 3rem/1 var(--fonte-tit); color: var(--laranja); }

/* rodapé */
.dc-rodape { background: var(--azul); color: #D9E4F2; margin-top: 40px; padding: 30px 0; font-size: .95rem; }
.dc-rodape .dc-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.dc-rodape strong { color: #fff; }
.dc-rodape p { margin: 4px 0; }
.dc-rodape a { color: #FFB74D; }
.rod-links { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 980px) {
  .hero-grid, .duas-col { grid-template-columns: 1fr; }
  .fases { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; background: var(--azul); }
  #dcNav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; border-bottom: 4px solid var(--laranja); box-shadow: 0 10px 20px rgba(0,0,0,.1); }
  #dcNav.aberto { display: flex; }
  #dcNav a { padding: 14px 20px; border-bottom: 1px solid var(--linha); margin: 0; }
  #dcNav a[aria-current="page"] { border-left: 4px solid var(--laranja); }
  .dc-topo .dc-wrap { position: relative; }
  .fe-portal, .fe-rot { display: none; }
  .duas { grid-template-columns: 1fr; }
  .aviso { grid-template-columns: 44px 1fr; }
  .av-ico { width: 40px; height: 40px; font-size: 1.1rem; }
  .av-img { grid-column: 1 / -1; width: 100%; }
  .lista-docs li { grid-template-columns: auto 1fr; }
  .lista-docs .acao { grid-column: 2; }
  .hero { padding: 24px 0; }
  .numeros { order: -1; }                       /* no celular, os telefones de emergência vêm primeiro */
  .num b { font-size: 2rem; } .num-wa b { font-size: 1.15rem; }
  .hero .lead { font-size: 1rem; }
}
@media print { .faixa-emerg, .dc-topo, .dc-rodape, .guias-nav { display: none; } body { background: #fff; } .guia { break-inside: avoid; } }

/* lista de voluntários (PDF) */
.tit-faixa { display: inline-block; background: var(--azul); color: #fff; padding: 6px 16px; border-radius: 6px; }
.vol-lista { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 20px 22px; }
.vol-lista h3 { display: inline-block; background: #FFF1E0; color: var(--laranja-2); padding: 4px 12px; border-radius: 6px; }
.pdf-visor { border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; background: #525659; margin: 10px 0 14px; }
.pdf-visor iframe { display: block; width: 100%; height: 780px; border: 0; }
.pdf-acoes { margin: 0; }
@media (max-width: 760px) { .pdf-visor { display: none; } }   /* celular não mostra PDF embutido: fica só o botão */