/* =====================================================================
   14-painel.css  |  UM CARD POR ASSUNTO (estilo "painel")
   Cada seção vira 1 caixa grande dividida em células, com linhas finas
   entre elas. Para mudar quantas colunas: .painel-grade (mais abaixo).
   ===================================================================== */

/* cabeçalho da seção: etiqueta mono + título à esquerda, frase à direita */
.sec-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.sec-topo > div{max-width:760px}
.rotulo-mono{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.sec-topo h2{margin:0;line-height:1.08}
.sec-topo h2 em{font-style:italic;font-weight:700;color:var(--accent)}
.sec-topo > p{max-width:300px;font-size:14px;color:var(--muted);margin:0}

/* a caixa única; o "gap" de 1px mostra o fundo = linhas divisórias */
.painel{border:1px solid var(--linha);border-radius:24px;overflow:hidden;background:var(--linha)}
.painel-grade{display:grid;gap:1px;grid-template-columns:repeat(var(--cols,3),1fr)}
.painel.c2{--cols:2}.painel.c4{--cols:4}
.celula{background:var(--card);padding:28px 28px 30px;transition:background .25s,opacity .7s,transform .7s;border:0}
.celula:hover{background:color-mix(in srgb,var(--card) 88%,var(--accent) 12%)}
.celula .num{display:flex;align-items:center;gap:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--muted);margin-bottom:18px}
.celula .num::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.celula h3{font-size:19px;letter-spacing:-.3px;margin-bottom:8px}
.celula p{font-size:14.5px;color:var(--muted);margin:0}
.celula small{display:block;margin-top:12px;font-size:12px;color:var(--muted);opacity:.8}

/* células de estatística */
.celula .grande{display:block;font-size:40px;font-weight:800;letter-spacing:-1.5px;color:var(--ink);line-height:1;margin-bottom:12px}
.celula .grande em{font-style:normal;color:var(--accent)}

/* faixa de rodapé dentro do painel (ex: 3 vantagens em linha) */
.painel-grade.rodape .celula{padding:22px 28px}
.painel-grade.rodape h3{font-size:16px}

/* portfólio dentro do painel */
.celula.proj-cel{padding:0;display:flex;flex-direction:column;color:inherit}
.celula.proj-cel .tela{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--campo);border-bottom:1px solid var(--linha)}
.celula.proj-cel .tela img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s ease}
.celula.proj-cel:hover .tela img{transform:scale(1.05)}
.celula.proj-cel .corpo{padding:22px 28px 26px}
.celula.proj-cel .selo{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--linha-forte);color:var(--muted);margin-bottom:12px}
.celula.proj-cel .selo.real{border-color:var(--accent);color:var(--accent)}
.celula.proj-cel .ver{display:inline-block;margin-top:12px;font-size:14px;font-weight:700;color:var(--accent)}
a.celula.proj-cel{cursor:pointer}

/* chamada embaixo do painel */
.painel-nota{text-align:center;margin-top:22px;color:var(--muted);font-size:14px}
.painel-nota a{color:var(--accent);font-weight:700;text-decoration:underline}

/* seções com painel: sobrescreve o centralizado antigo */
section.bloco.painel-sec > h2,section.bloco.painel-sec > .sub{text-align:left}

@media (max-width:900px){
  .painel-grade,.painel.c4 .painel-grade,.painel.c2 .painel-grade{grid-template-columns:repeat(2,1fr)}
  .painel .painel-grade.tres{grid-template-columns:1fr}
}
@media (max-width:620px){
  .painel-grade,.painel.c4 .painel-grade,.painel.c2 .painel-grade{grid-template-columns:1fr}
  .sec-topo > p{max-width:none}
  .celula{padding:24px 22px}
}

/* FAQ em 1 card só: as perguntas ficam dentro de uma caixa, separadas por linhas finas */
.faq.unico{max-width:none;gap:0;border:1px solid var(--linha);border-radius:24px;overflow:hidden;background:var(--card)}
.faq.unico details{border:0;border-radius:0;background:transparent;border-bottom:1px solid var(--linha)}
.faq.unico details:last-child{border-bottom:0}
.faq.unico details[open]{background:color-mix(in srgb,var(--card) 90%,var(--accent) 10%)}
.faq.unico summary{padding:22px 60px 22px 28px}
.faq.unico .resp{padding:0 28px 22px}