/* =========================================================================
   associacoes.css — Página /associacoes/ (Projeto Personal 2.0)
   Estilos EXCLUSIVOS da página de Associações (escopados em body.associacoes).
   Reutiliza tokens do styles.css e componentes .ce-* de contabilidade-eleitoral.css.
   NÃO altera o compartilhado nem afeta outras páginas.
   Refino: página mais curta, mais larga e mais leve.
   ========================================================================= */

/* Largura útil maior (aproveitar melhor a tela), com margens elegantes.
   Vale para o CONTEÚDO; o cabeçalho mantém a largura padrão do site (abaixo). */
.associacoes .wrap{max-width:1240px}
/* Cabeçalho segue o padrão único das demais páginas (não usa a largura de 1240) */
.associacoes .nav-inner{max-width:1180px}

/* ------------------------------------------------------------------ */
/* Ritmo compacto — página densa e leve                               */
/* ------------------------------------------------------------------ */
.associacoes .sec{padding:40px 0}
.associacoes .hero{padding:44px 0 32px}
.associacoes .hero-grid{grid-template-columns:1.45fr .55fr;gap:40px}
.associacoes .sec-head{max-width:920px}
.associacoes .sec-head h2{font-size:clamp(1.55rem,2.7vw,2.1rem);margin-top:10px}
.associacoes .sec-head p{margin-top:10px}
.associacoes .ce-grid{gap:14px}
.associacoes .ce-service{padding:20px 20px;gap:7px}
.associacoes .ce-diff{padding:16px 18px}
.associacoes .ce-timeline{grid-template-columns:repeat(4,1fr);gap:16px}
.associacoes .ce-step{padding:26px 22px 24px}
.associacoes .hero .lead{margin-top:14px}
.associacoes .hero-note{margin-top:18px}

/* Foto do hero — apoio; leve aumento em relação ao mínimo, sem dominar */
.associacoes .hero-photo{max-width:270px}

/* Texto de apoio — mais largo e com margens menores */
.associacoes .assoc-sub{max-width:94ch;color:var(--f-text);font-size:1.02rem;line-height:1.6;margin-bottom:12px;text-align:justify}

/* Nota / destaque de texto (padrão das notas do site) */
.associacoes .assoc-note{margin-top:14px;background:var(--f-soft);border:1px solid var(--line-cream);border-left:4px solid var(--rust);border-radius:14px;padding:16px 20px;color:var(--f-head);font-size:1.02rem;line-height:1.55;text-align:justify}
.associacoes .assoc-note strong{color:var(--rust)}

/* Etiqueta discreta (menção Cannabis medicinal) */
.associacoes .assoc-tag{display:inline-block;margin-top:12px;background:var(--f-soft);border:1px solid var(--line-cream);border-radius:999px;padding:8px 16px;font-size:.92rem;color:var(--f-head);font-weight:600}
.associacoes .assoc-tag strong{color:var(--rust)}

/* Chips compactos (realidade incorporada às soluções) */
.associacoes .ce-who{gap:10px;margin-top:4px}

/* Faixa texto + imagem de apoio (saúde) */
.associacoes .assoc-band{display:grid;grid-template-columns:1.55fr .45fr;gap:34px;align-items:center;margin-top:8px}
.associacoes .assoc-media{border-radius:18px;overflow:hidden;border:1px solid var(--line-cream);box-shadow:0 22px 54px -38px rgba(90,64,56,.5);max-width:240px;margin-left:auto}
.associacoes .assoc-media img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:5/6}

/* Frase de posicionamento — destaque, porém compacto */
.associacoes .assoc-quote{background:linear-gradient(135deg,#FFF6EF,#F7E7DC);border:1px solid var(--line-cream);border-radius:20px;padding:30px 30px;text-align:center;box-shadow:0 22px 54px -40px rgba(187,87,53,.5)}
.associacoes .assoc-quote p{font-family:'Archivo',sans-serif;font-weight:800;color:var(--f-head);font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.25;max-width:36ch;margin:0 auto}
.associacoes .assoc-quote .hl{color:var(--rust)}

/* ------------------------------------------------------------------ */
/* Responsivo                                                          */
/* ------------------------------------------------------------------ */
@media(max-width:900px){
  .associacoes .ce-timeline{grid-template-columns:repeat(2,1fr)}
  .associacoes .hero-grid{grid-template-columns:1fr;gap:26px}
}
@media(max-width:860px){
  .associacoes .hero{padding:34px 0 26px}
  .associacoes .assoc-band{grid-template-columns:1fr;gap:20px}
  .associacoes .assoc-media{margin:0 auto;max-width:230px}
}
@media(max-width:600px){
  .associacoes .sec{padding:30px 0}
  .associacoes .ce-timeline{grid-template-columns:1fr}
  .associacoes .assoc-quote{padding:24px 20px}
}