/* =========================================================================
   contabilidade-eleitoral.css — Projeto Personal 2.0 (Sprint 1)
   Estilos EXCLUSIVOS da página /contabilidade-eleitoral/.
   Usa os tokens/design system do styles.css (carregado antes). NÃO altera o compartilhado.
   Componentes novos: breadcrumb, faixa de indicadores do hero, cards de serviço,
   timeline de atendimento, grids de diferenciais e público-alvo.
   ========================================================================= */

/* Breadcrumb */
.ce-crumb{font-size:.82rem;color:var(--f-muted);margin-bottom:18px;letter-spacing:.01em}
.ce-crumb a{color:var(--f-muted);text-decoration:none;transition:color .18s ease}
.ce-crumb a:hover{color:var(--rust)}
.ce-crumb .sep{margin:0 8px;opacity:.6}
.ce-crumb span[aria-current]{color:var(--f-head);font-weight:600}

/* Indicadores de confiança (hero) — dados reais do site */
.ce-trust{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.ce-trust .ti{background:var(--f-panel);border:1px solid var(--line-cream);border-radius:14px;padding:14px 18px;min-width:150px}
.ce-trust .ti .n{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.5rem;color:var(--rust);line-height:1}
.ce-trust .ti .c{margin-top:6px;font-size:.82rem;color:var(--f-muted);line-height:1.35}

/* Grid utilitário de seção */
.ce-grid{display:grid;gap:18px}
.ce-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.ce-grid.cols-2{grid-template-columns:repeat(2,1fr)}

/* Cards de serviço */
.ce-service{background:var(--f-panel);border:1px solid var(--line-cream);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.ce-service .num{font-family:'Archivo',sans-serif;font-weight:800;font-size:.85rem;color:var(--rust-bright);letter-spacing:.12em}
.ce-service h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.14rem;color:var(--f-head);line-height:1.25}
.ce-service p{font-size:.96rem;color:var(--f-text);line-height:1.6}

/* Timeline do atendimento */
.ce-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.ce-step{position:relative;background:var(--f-panel);border:1px solid var(--line-cream);border-radius:16px;padding:26px 22px 22px}
.ce-step .badge{width:38px;height:38px;border-radius:50%;background:var(--rust);color:#fff;font-family:'Archivo',sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:14px}
.ce-step h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.06rem;color:var(--f-head);margin-bottom:6px}
.ce-step p{font-size:.92rem;color:var(--f-muted);line-height:1.55}

/* Diferenciais */
.ce-diff{background:var(--f-panel);border:1px solid var(--line-cream);border-radius:14px;padding:22px 20px}
.ce-diff .dt{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.02rem;color:var(--f-head);margin-bottom:6px;display:flex;align-items:center;gap:10px}
.ce-diff .dt::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rust);flex:0 0 auto}
.ce-diff p{font-size:.92rem;color:var(--f-text);line-height:1.55}

/* Quem atendemos */
.ce-who{display:flex;flex-wrap:wrap;gap:12px}
.ce-who .w{background:var(--f-soft);border:1px solid var(--line-cream);border-radius:999px;padding:12px 20px;font-weight:600;color:var(--f-head);font-size:.96rem}

/* CTA discreto dentro do card de serviço */
.ce-service .ce-slink{margin-top:auto;padding-top:4px;font-size:.86rem;font-weight:700;color:var(--rust);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap .18s ease,color .18s ease}
.ce-service .ce-slink:hover{color:var(--rust-bright);gap:10px}

/* Nota de fechamento da timeline */
.ce-tl-note{margin-top:22px;background:var(--f-soft);border:1px solid var(--line-cream);border-left:4px solid var(--rust);border-radius:14px;padding:18px 22px;color:var(--f-head);font-size:1.02rem;line-height:1.55}
.ce-tl-note strong{color:var(--rust)}

/* Seção "Por que escolher a Personal?" */
.ce-why-personal{background:var(--f-panel);border:1px solid var(--line-cream);border-radius:20px;padding:34px 30px}
.ce-why-personal .wp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:6px}
.ce-why-personal .wp .t{font-family:'Archivo',sans-serif;font-weight:700;color:var(--f-head);font-size:1.04rem;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.ce-why-personal .wp .t::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rust);flex:0 0 auto}
.ce-why-personal .wp p{font-size:.92rem;color:var(--f-text);line-height:1.55}

/* Modalidades de atendimento (cards sem preço) */
.ce-modal .who{font-size:.74rem;font-weight:700;color:var(--rust);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.ce-modal ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.ce-modal ul li{position:relative;padding-left:18px;font-size:.92rem;color:var(--f-text);line-height:1.45}
.ce-modal ul li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--rust)}
.ce-modal .btn{margin-top:18px;align-self:flex-start}

/* Ritmo vertical mais compacto — SOMENTE na Home (body.home). Não afeta outras páginas. */
.home .sec{padding:66px 0}
.home .hero{padding:74px 0 56px}
.home .stat{padding:28px 26px}
.home .about-grid{margin-top:8px}
@media(max-width:860px){ .home .hero{padding:54px 0 42px} }
@media(max-width:600px){ .home .sec{padding:48px 0} }

/* Responsivo */
@media(max-width:900px){
  .ce-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .ce-timeline{grid-template-columns:repeat(2,1fr)}
  .ce-why-personal .wp-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .ce-grid.cols-3,.ce-grid.cols-2,.ce-timeline,.ce-why-personal .wp-grid{grid-template-columns:1fr}
  .ce-trust .ti{flex:1 1 100%}
}