/* BASE — variáveis, utilitários e acessibilidade (escopo local) */
#main-about{
  --white:#FFFFFF; --green:#95C93D; --blue:#3D76BB; --navy:#212C65; --blue-dark:#1A2A60;
  --text:#1F2A44; --text-subtle:#60708F; --muted:#F4F7FD; --border:#E1E8F5;
  --radius:14px; --radius-lg:18px; --shadow:0 8px 28px rgba(0,0,0,.08);
  --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.25rem; --space-8:1.75rem; --space-10:2.25rem;
  --max-w:1100px;
  --pad-inline: clamp(1rem, 4vw, 2rem);
  --sec-gap: clamp(1.2rem, 2.8vw, 2rem);
  --pair-gap: clamp(2rem, 4.2vw, 3rem);
}

#main-about .section{ padding: clamp(2.6rem, 5.2vw, 4.6rem) 0; position: relative; }

#main-about .container{
  width:min(100%, var(--max-w));
  margin-inline:auto;
  padding-inline: var(--pad-inline);
}

#main-about .mt-lg{ margin-top: clamp(1.2rem, 2.6vw, 1.8rem); }
#main-about .prose > * + *{ margin-top: 1em; }
#main-about .prose p{ text-align: justify; text-justify: inter-word; }

#main-about a:focus-visible,
#main-about button:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

/* =================== HERO-MIN — Variáveis e container (escopo fechado ao #hero-min) =================== */
#hero-min{
  /* paleta fixa */
  --white:#FFFFFF; --green:#95C93D; --navy:#212C65; --blue:#3D76BB;
  /* derivados */
  --text: color-mix(in srgb, var(--navy) 70%, var(--white) 30%);
  --text-subtle: color-mix(in srgb, var(--navy) 55%, var(--white) 45%);
  --muted: color-mix(in srgb, var(--blue) 10%, var(--white) 90%);
  --border: color-mix(in srgb, var(--navy) 14%, var(--white) 86%);
  /* layout */
  --max-w:1240px; --pad-inline:20px;
  --radius:20px; --radius-sm:14px; --radius-pill:999px;
  --shadow:0 18px 44px rgba(33,44,101,.14);
  --shadow-sm:0 8px 24px rgba(33,44,101,.10);
  --shadow-soft:0 10px 34px rgba(61,118,187,.18);
}

/* ≥1280px — container um pouco mais largo */
@media (min-width: 1280px){
  #main-about{ --max-w: 1200px; }
}

/* ≤1024px — padding mais compacto */
@media (max-width: 1024px){
  #main-about .section{
    padding: clamp(2rem, 4vw, 3rem) 0;
  }
  #main-about .container{
    padding-inline: clamp(1rem, 4vw, 1.5rem);
  }
}

/* ≤640px — leitura melhor em telas pequenas */
@media (max-width: 640px){
  #main-about .prose p{ text-align: left; }
}