/* pec.css — página interativa /pec-da-seguranca-publica. Base: tecnologia.css, pag.css e escala.css.
   Assinatura: o artigo 144 que muda entre "Hoje" e "Com a PEC". */
.pc-art { padding: 22px; }
.pc-art-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-bottom: 14px; }
.pc-art-topo b { font-size: 1rem; }
.pc-art-topo span { font-size: .8rem; color: var(--nanquim-suave); }
.pc-fases { grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
.pc-marca { width: calc((100% - 8px) / 2); }
.pc-orgaos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pc-orgaos a { display: grid; grid-template-columns: 34px 1fr; gap: 0 8px; padding: 8px 10px; border-radius: 12px; color: var(--tinta); text-decoration: none; transition: background .25s ease; }
.pc-orgaos a:hover { background: var(--papel-fundo); }
.pc-orgaos a:focus-visible { outline: 2px solid var(--latao); outline-offset: 1px; }
.pc-orgaos .r { grid-row: span 2; font-weight: 700; color: #8A5E33; font-size: .84rem; line-height: 1.4; }
.pc-orgaos b { font-size: .92rem; line-height: 1.3; transition: color .3s ease; }
.pc-orgaos small { font-size: .78rem; line-height: 1.4; color: var(--nanquim-suave); min-height: 1.1em; }
.pc-pm a { background: var(--tinta); color: #F5F5F5; }
.pc-pm a:hover { background: var(--tinta); }
.pc-pm .r { color: var(--latao); }
.pc-pm small { color: rgba(245,245,245,.78); }
.pc-entra { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--curva), opacity .45s ease; }
.pc-entra a { min-height: 0; overflow: hidden; padding-block: 0; transition: padding .55s var(--curva), background .25s ease; }
.pc-art.com .pc-entra { grid-template-rows: 1fr; opacity: 1; }
.pc-art.com .pc-entra a { padding-block: 8px; outline: 1.5px solid var(--latao); outline-offset: -1.5px; }
.pc-sai b { text-decoration: line-through transparent; transition: text-decoration-color .4s ease, color .4s ease; }
.pc-art.com .pc-sai b { text-decoration-color: var(--vermelho); color: var(--nanquim-suave); }
.pc-trilho .e6-aqui { z-index: 2; }

.pc-p { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.pc-p.muda { background: var(--latao); }
.pc-p.lei { background: transparent; border: 2px solid var(--latao); box-sizing: border-box; }
.pc-p.igual { background: #9A9EA2; }

.pc-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pc-filtros button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--fio-forte); background: #fff; font-weight: 600; font-size: .9rem; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.pc-filtros button span { margin-left: 7px; font-weight: 700; color: #8A5E33; font-variant-numeric: tabular-nums; }
.pc-filtros button:hover { border-color: var(--latao); }
.pc-filtros button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.pc-filtros button[aria-pressed="true"] span { color: var(--latao); }
.pc-filtros button:focus-visible { outline: 2px solid var(--latao); outline-offset: 2px; }
.pc-temas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
.pc-tema { background: #fff; border: 1px solid var(--fio); border-radius: 16px; transition: border-color .25s ease; min-width: 0; }
.pc-tema[hidden] { display: none; }
.pc-tema[open] { border-color: var(--latao); grid-column: 1 / -1; }
.pc-tema summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; padding: 16px 44px 16px 18px; position: relative; min-height: 44px; }
.pc-tema summary::-webkit-details-marker { display: none; }
.pc-tema summary::after { content: "+"; position: absolute; right: 18px; top: 13px; font-size: 1.4rem; font-weight: 400; color: #8A5E33; line-height: 1.2; }
.pc-tema[open] summary::after { content: "–"; }
.pc-tema summary:focus-visible { outline: 2px solid var(--latao); outline-offset: -2px; border-radius: 16px; }
.pc-tema summary .pc-p { margin-top: 6px; margin-right: 12px; }
.pc-tema summary b { display: block; font-size: 1rem; line-height: 1.35; }
.pc-tema summary small { display: block; margin-top: 3px; font-size: .78rem; color: var(--nanquim-suave); }
.pc-tema > div { padding: 0 22px 18px 40px; }
.pc-tema p { margin: 0 0 12px; line-height: 1.7; color: var(--grafite); text-align: justify; hyphens: auto; }
.pc-tema p:last-child { margin-bottom: 0; }

.pc-perfis { display: grid; gap: 8px; }
.pc-resp h3 { margin-top: 0; }
.pc-resp h4 { display: flex; align-items: center; font-size: .92rem; margin: 18px 0 6px; }
.pc-resp ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 7px; }
.pc-resp li { line-height: 1.6; color: var(--grafite); font-size: .94rem; }
.pc-painel[hidden] { display: none; }

.pc-teste { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: start; }
.pc-reqs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pc-reqs label { cursor: pointer; display: block; position: relative; }
.pc-reqs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pc-reqs label > span { display: block; height: 100%; padding: 16px 16px 16px 46px; border-radius: 16px; border: 1px solid var(--fio); background: #fff; position: relative; transition: border-color .2s ease, background .2s ease; }
.pc-reqs label > span::before { content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--fio-forte); background: #fff; transition: background .2s ease, border-color .2s ease; }
.pc-reqs label:hover > span { border-color: var(--latao); }
.pc-reqs input:checked + span { border-color: var(--latao); background: var(--papel-fundo); }
.pc-reqs input:checked + span::before { background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CF9D68' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--tinta); }
.pc-reqs input:focus-visible + span { outline: 2px solid var(--latao); outline-offset: 2px; }
.pc-reqs b { display: block; font-size: .95rem; line-height: 1.35; }
.pc-reqs small { display: block; margin-top: 4px; font-size: .82rem; line-height: 1.5; color: var(--nanquim-suave); }
.pc-teste-res { position: sticky; top: 110px; background: var(--tinta); color: #F5F5F5; border-radius: 20px; padding: 26px; }
.pc-teste-res > b { display: block; font-size: 2.3rem; font-weight: 800; color: var(--latao); line-height: 1; font-variant-numeric: tabular-nums; }
.pc-teste-barra { height: 8px; border-radius: 4px; background: rgba(245,245,245,.16); margin: 14px 0; overflow: hidden; }
.pc-teste-barra i { display: block; height: 100%; width: 0; background: var(--latao); transition: width .45s var(--curva); }
.pc-teste-res p { margin: 0 0 14px; line-height: 1.6; color: #fff; }
.pc-teste-res small { display: block; padding-top: 14px; border-top: 1px solid rgba(245,245,245,.18); font-size: .84rem; line-height: 1.6; color: rgba(245,245,245,.78); }

.pc-fundo { grid-template-columns: .8fr 1.2fr; }
.pc-rot { font-size: .86rem; font-weight: 600; color: var(--latao); margin-bottom: -8px; }
.pc-anos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pc-anos button { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; min-height: 46px; border-radius: 12px; border: 1px solid rgba(245,245,245,.24); font-weight: 700; font-size: .92rem; color: #F5F5F5; transition: background .2s ease, color .2s ease; }
.pc-anos button[aria-pressed="true"] { background: var(--latao); border-color: var(--latao); color: var(--tinta); }
.pc-anos button:focus-visible { outline: 2px solid var(--latao); outline-offset: 2px; }
.pc-fundo .e6-emp-campos input { min-height: 48px; width: 100%; box-sizing: border-box; font-size: 1rem; font-family: inherit; }
.pc-fundo .e6-emp-campos label { display: grid; gap: 6px; }
.pc-fundo .e6-emp-campos label > span { font-size: .86rem; font-weight: 600; }
.pc-fundo .e6-emp-res b { font-size: clamp(1.15rem, .9rem + .9vw, 1.65rem); overflow-wrap: anywhere; }
.pc-nota { grid-column: 1 / -1; margin: 0; font-size: .84rem; line-height: 1.6; color: rgba(245,245,245,.72); }

.pc-falta { list-style: none; counter-reset: f; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pc-falta li { counter-increment: f; background: #fff; border: 1px solid var(--fio); border-radius: 16px; padding: 18px; display: grid; gap: 8px; align-content: start; }
.pc-falta li::before { content: counter(f); font-weight: 800; font-size: 1.3rem; color: #8A5E33; line-height: 1; }
.pc-falta b { font-size: .98rem; line-height: 1.3; }
.pc-falta span { font-size: .86rem; line-height: 1.55; color: var(--grafite); }

.pc-pagina .tec-cabeca p, .pc-pagina .tec-fecho p, .pc-pagina .lead { text-align: justify; hyphens: auto; }
.pc-pagina .tec-fecho a:not(.tec-botao) { color: inherit; text-decoration: underline; }

@media (min-width: 1025px) and (max-width: 1560px) { .pc-pagina .tec-corpo .container { padding-right: 132px; } }
@media (max-width: 1100px) { .pc-falta { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) {
    .pc-teste, .pc-fundo { grid-template-columns: 1fr; }
    .pc-teste-res { position: static; }
}
@media (max-width: 760px) {
    .pc-art { padding: 14px; }
    .pc-temas, .pc-reqs, .pc-falta { grid-template-columns: 1fr; }
    .pc-tema > div { padding: 0 18px 16px; }
    .pc-pagina .pc-temas, .pc-pagina .pc-teste, .pc-pagina .pc-falta, .pc-pagina .pc-filtros, .pc-pagina .pc-art, .pc-pagina .tec-cabeca, .pc-pagina .tec-abertura h1, .pc-pagina .pc-resp { text-align: left; }
    .pc-filtros button { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pc-entra, .pc-entra a, .pc-teste-barra i, .pc-sai b { transition: none !important; }
}

/* Vídeo interativo */
.pv{position:relative;width:100%;max-width:560px;aspect-ratio:4/5;margin:0 auto;background:#1E2022;overflow:hidden;font-family:Montserrat,Arial,sans-serif;color:#F5F5F5}
.pv video{position:absolute;inset:0;width:100%;height:100%;display:block}
.pv button{font:inherit;cursor:pointer;border:0}.pv [hidden]{display:none!important}
.pv-ini{position:absolute;inset:0;background:#1E2022;color:#F5F5F5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
.pv-ini img{width:52%;margin-bottom:18px}.pv-ini b{font-size:clamp(22px,5.4vw,32px);font-weight:900;line-height:1.1}.pv-ini span{font-size:clamp(14px,3.4vw,18px);color:#DADDE0}
.pv-ini i{font-style:normal;margin-top:16px;background:#CF9D68;color:#1E2022;font-weight:800;padding:14px 34px}
.pv-menu{position:absolute;inset:0;background:rgba(23,25,27,.97);display:flex;flex-direction:column;justify-content:center;gap:12px;padding:8%}
.pv-menu h3{font-size:clamp(22px,5.4vw,32px);font-weight:900;margin:0 0 8px;color:#F5F5F5}
.pv-menu button{min-height:56px;text-align:left;padding:14px 20px;background:#34373A;color:#F5F5F5;font-size:clamp(16px,3.8vw,21px);font-weight:700;border-left:6px solid #CF9D68}
.pv-menu button:hover,.pv-menu button:focus-visible{background:#CF9D68;color:#1E2022;outline:0}.pv-menu button.vis{border-left-color:#8E9499;color:#C9CCCF}
.pv-res{position:absolute;left:6%;right:6%;top:52%;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pv-res button{min-height:72px;font-size:clamp(20px,5vw,28px);font-weight:900;background:#34373A;color:#F5F5F5;border:3px solid #CF9D68}.pv-res button:hover,.pv-res button:focus-visible{background:#CF9D68;color:#1E2022;outline:0}
.pv-fim{position:absolute;inset:0;background:rgba(23,25,27,.97);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:8%}
.pv-fim p{font-size:clamp(22px,5.4vw,32px);font-weight:900;line-height:1.15;margin:0}.pv-fim button{background:#CF9D68;color:#1E2022;font-weight:800;padding:14px 24px;min-height:48px}
.pv-som{position:absolute;right:10px;bottom:10px;background:rgba(23,25,27,.75);color:#F5F5F5;font-size:13px;font-weight:600;padding:8px 12px;min-height:36px}
.pc-capa { display: block; width: 100%; max-width: 240px; height: auto; border-radius: 6px; transform: rotate(-3deg); }
@media (max-width: 760px) { .pc-capa { margin: 0 auto; max-width: 200px; } }
