/* =========================================================================
   SecurePass — vitrine (index.php). Mesmo papel, tinta e tipografia do sistema;
   estrutura herdada da vitrine do DRE 360. Carregar depois de app.css.
   ========================================================================= */
/* ---- estrutura da vitrine: mesmo papel, tinta e tipografia do sistema ---- */
body { font-size: 15px; line-height: 1.55; }
.faixa { max-width: 1160px; margin: 0 auto; padding-inline: 24px; }
section { scroll-margin-top: 70px; }

/* topo */
.v-topo { position: sticky; top: 0; z-index: 30; background: var(--sf); border-bottom: 1px solid var(--ln-forte); }
.v-topo .faixa { display: flex; align-items: center; gap: 22px; height: 60px; }
.v-topo nav { display: flex; gap: 20px; margin-left: 12px; }
.v-topo nav a { color: var(--t2); font-size: 14px; }
.v-topo nav a:hover { color: var(--t1); text-decoration: none; }
.v-topo .fim { margin-left: auto; display: flex; gap: 8px; }
.v-topo .btn { height: 36px; padding: 0 15px; font-size: 13.5px; }

/* abertura */
.abertura { padding-block: 64px 56px; border-bottom: 1px solid var(--ln); }
.abertura .faixa { display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; }
.sobre { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--t3); font-weight: 700; margin-bottom: 14px; }
.abertura h1 {
    font-family: var(--serif); font-weight: 600; letter-spacing: -.02em;
    font-size: clamp(34px, 4.6vw, 52px); line-height: 1.06; text-wrap: balance; margin-bottom: 18px;
}
.abertura h1 em { font-style: italic; font-weight: 400; }
.abertura .lide { font-size: 17px; color: var(--t2); max-width: 50ch; margin-bottom: 26px; }
.chamadas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chamadas .btn { height: 44px; padding: 0 20px; font-size: 14.5px; }
.nota-chamada { font-size: 13px; color: var(--t3); margin-top: 14px; }
.nota-chamada b { color: var(--t1); font-weight: 600; }

/* a folha de DRE de exemplo */
.folha { background: var(--sf); border: 1px solid var(--ln-forte); border-radius: var(--r-lg); box-shadow: 0 1px 0 var(--ln), var(--sombra-3); overflow: hidden; }
.folha-topo { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ln-forte); }
.folha-topo b { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.folha-topo span { font-size: 12px; color: var(--t3); }
.folha-topo .selo { margin-left: auto; }
.folha table.livro { font-size: 13px; }
.folha table.livro tbody td { padding: 7px 14px; }
.folha table.livro thead th { padding: 8px 14px; }
.folha-rodape { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; background: var(--sf-2); border-top: 1px solid var(--ln); font-size: 11.5px; color: var(--t3); }

/* seções */
.secao { padding-block: 64px; border-bottom: 1px solid var(--ln); }
.secao-cab { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: end; margin-bottom: 30px; }
.secao-cab h2 { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.secao-cab p { color: var(--t2); margin: 0; max-width: 58ch; }

/* ciclo do mês */
.ciclo { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ln-forte); border-radius: var(--r-lg); background: var(--sf); overflow: hidden; }
.etapa { padding: 20px 20px 22px; border-right: 1px solid var(--ln); }
.etapa:last-child { border-right: 0; background: var(--tinta); color: var(--tinta-txt); }
.etapa .n { font-family: var(--mono); font-size: 12px; color: var(--t3); margin-bottom: 10px; }
.etapa:last-child .n, .etapa:last-child p { color: var(--t4); }
.etapa h3 { font-family: var(--serif); font-size: 19px; margin-bottom: 6px; }
.etapa p { font-size: 14px; color: var(--t2); margin: 0; }

/* módulos */
.modulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: var(--r-lg); overflow: hidden; }
.modulo { background: var(--sf); padding: 22px 22px 24px; }
.modulo .ic-caixa { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--ln-forte); border-radius: var(--r); background: var(--sf-2); margin-bottom: 14px; }
.modulo h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.modulo p { font-size: 14px; color: var(--t2); margin: 0 0 10px; }
.modulo ul { margin: 0; padding: 0; list-style: none; }
.modulo li { font-size: 13px; color: var(--t2); padding: 5px 0; border-top: 1px solid var(--ln); display: flex; gap: 8px; }
.modulo li::before { content: "—"; color: var(--t4); }

/* acessos */
.acessos-grade { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: start; }
.acessos-grade .texto p { color: var(--t2); }
.tabela-acesso td.d, .tabela-acesso th.d { text-align: center; font-family: var(--sans); }
.tabela-acesso .sim { color: var(--ok); }
.tabela-acesso .nao { color: var(--t4); }


/* rodapé */
.v-rodape { padding-block: 28px 40px; color: var(--t3); font-size: 13px; }
.v-rodape .faixa { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.v-rodape .marca b { font-size: 16px; }
.v-rodape .fim { margin-left: auto; display: flex; gap: 18px; }
.v-rodape a { color: var(--t2); }
.folha .cofre-linha td:first-child b { font-weight: 600; }
.folha .mascara { font-family: var(--mono); letter-spacing: .12em; color: var(--t3); }
@media (max-width: 960px) {
    .abertura .faixa, .secao-cab, .acessos-grade { grid-template-columns: 1fr; gap: 28px; }
    .modulos { grid-template-columns: 1fr 1fr; }
    .ciclo { grid-template-columns: 1fr 1fr; }
    .etapa:nth-child(2) { border-right: 0; }
    .etapa:nth-child(-n+2) { border-bottom: 1px solid var(--ln); }
    .v-topo nav { display: none; }
}
@media (max-width: 600px) {
    .faixa { padding-inline: 16px; }
    .abertura { padding-block: 40px; }
    .secao { padding-block: 44px; }
    .modulos, .ciclo { grid-template-columns: 1fr; }
    .etapa { border-right: 0; border-bottom: 1px solid var(--ln); }
    .v-topo .fim .btn.forte { display: none; }
    .v-topo .fim .btn.fantasma { border-color: var(--ln-forte); background: var(--sf); color: var(--t1); }
    .folha .col-sm { display: none; }
    .v-rodape .fim { margin-left: 0; }
}
.folha table.livro td, .folha table.livro th { white-space: nowrap; }
@media (max-width: 1240px) { .folha .col-md { display: none; } }