/* ============================================================
   CECAN · estilos próprios da página
   Depende de styles.css + pages.css (linkar DEPOIS de pages.css).
   Base azul do design system. Marca colorida do CECAN em painel branco.
   ============================================================ */

/* ---- Marca colorida no hero (painel branco garante leitura no navy) ---- */
.cecan-brand{display:inline-flex;background:#fff;border-radius:14px;padding:14px 20px;box-shadow:var(--ic-shadow-card);margin-bottom:22px}
.cecan-brand img{height:52px;width:auto;display:block}
@media(max-width:640px){.cecan-brand img{height:42px}}

/* ---- Faixa de números (fundo navy) ---- */
.stat-strip{background:var(--ic-navy-900);color:#fff;position:relative;overflow:hidden}
.stat-strip::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 2px,transparent 2px);background-size:22px 22px;pointer-events:none}
.stat-strip .grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.stat-strip .s{border-left:1px solid rgba(255,255,255,.14);padding-left:26px}
.stat-strip .s:first-child{border-left:none;padding-left:0}
.stat-strip .s b{display:block;font-family:var(--ic-font-display);font-weight:800;font-size:clamp(2.1rem,4vw,3rem);color:#fff;line-height:1}
.stat-strip .s span{display:block;margin-top:10px;font-size:.9rem;color:var(--ic-gray-400)}
@media(max-width:820px){.stat-strip .grid{grid-template-columns:1fr 1fr;gap:30px 26px}.stat-strip .s{border-left:none;padding-left:0}}
@media(max-width:460px){.stat-strip .grid{grid-template-columns:1fr}}

/* ---- Pilares em 4 colunas ---- */
.pillars.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.pillars.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pillars.cols-4{grid-template-columns:1fr}}

/* ---- Unidades + especialidades (capa + chips) ---- */
.unit-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:820px){.unit-cols{grid-template-columns:1fr}}
.unit-card{background:#fff;border:1px solid var(--ic-gray-200);border-radius:var(--ic-radius-card);overflow:hidden;box-shadow:var(--ic-shadow-card);display:flex;flex-direction:column}
.unit-card .cover{aspect-ratio:16/9;overflow:hidden}
.unit-card .cover img{width:100%;height:100%;object-fit:cover}
.unit-card .body{padding:28px 26px}
.unit-card .loc{display:inline-flex;align-items:center;gap:6px;color:var(--ic-primary);font-weight:600;font-size:.8rem;margin-bottom:8px;font-family:var(--ic-font-display)}
.unit-card h3{font-size:var(--ic-fs-h3);margin-bottom:16px}
.spec-chips{display:flex;flex-wrap:wrap;gap:8px}
.spec-chips span{font-size:.8rem;font-weight:600;font-family:var(--ic-font-display);color:var(--ic-navy-900);background:var(--ic-primary-soft);border-radius:var(--ic-radius-pill);padding:6px 14px}

/* ---- Nota de unidade sem especialidades ---- */
.unit-note{background:var(--ic-gray-50);border:1px dashed var(--ic-gray-200);border-radius:var(--ic-radius-card);padding:22px 26px;margin-top:24px}
.unit-note b{font-family:var(--ic-font-display);color:var(--ic-navy-900)}

/* ---- Contato do voluntariado ---- */
.vol-contact{display:inline-flex;align-items:center;gap:12px;background:var(--ic-gray-50);border:1px solid var(--ic-gray-200);border-radius:var(--ic-radius-card);padding:14px 20px;margin:6px 0 22px}
.vol-contact .ic-iconbox{width:44px;height:44px;border-radius:10px;font-size:1.1rem;flex:none}
.vol-contact small{display:block;font-size:.76rem;color:var(--ic-gray-500)}
.vol-contact b{font-family:var(--ic-font-display);font-size:1.1rem;color:var(--ic-navy-900)}

/* ---- Reconhecimentos ---- */
.awards{display:grid;gap:14px}
.award{display:flex;align-items:flex-start;gap:20px;background:#fff;border:1px solid var(--ic-gray-200);border-left:3px solid var(--ic-primary);border-radius:var(--ic-radius-card);padding:22px 26px;box-shadow:var(--ic-shadow-card)}
.award .yr{font-family:var(--ic-font-display);font-weight:800;color:var(--ic-primary);font-size:1.15rem;flex:none;min-width:60px}
.award p{margin:0;color:var(--ic-gray-500)}

/* ---- Bloco de doação ---- */
.donate .cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}