/* Página Sobre: composição institucional compacta. */
body:has(.about-page) { background: #fff; }
.about-hero { position: relative; height: 170px; min-height: 0; overflow: hidden; background: linear-gradient(115deg, var(--azul-escuro), var(--azul-vibrante)); }
.about-hero::before { position: absolute; inset: 0; content: ''; background: url('../../../img/brandpack/svg/monocromatica/empreende-conquista-simbolo-mono-branco.svg') no-repeat calc(100% - 11%) center / 300px; opacity: .08; pointer-events: none; }
.about-hero-content { position: relative; z-index: 1; display: flex; align-items: center; width: min(100% - 48px, 980px); height: 100%; min-height: 0; margin: 0 auto; }
.about-hero h1 { max-width: 570px; margin: 0; color: #fff; font-size: 44px; font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }

.about-page { width: min(100% - 48px, 980px); margin: 0 auto; padding: 64px 0 72px; }
.about-introduction { max-width: 760px; }
.about-eyebrow { margin: 0 0 10px; color: var(--azul-vibrante); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.about-introduction h2, .about-resources h2 { margin: 0; color: var(--texto-escuro); font-size: clamp(28px, 3vw, 38px); letter-spacing: -.03em; line-height: 1.18; }
.about-introduction > p:last-child { margin: 20px 0 0; color: #516079; font-size: 17px; line-height: 1.65; }

.about-resources { margin-top: 72px; }
.about-resource-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 32px; }
.about-resource { min-width: 0; padding: 0 28px; }
.about-resource:first-child { padding-left: 0; }
.about-resource + .about-resource { border-left: 1px solid #dce7f2; }
.about-resource-icon, .about-regulations-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; }
.about-resource-icon svg { width: 27px; height: 27px; }
.about-resource-pink .about-resource-icon { color: var(--cor-destaque); background: var(--brand-pink-soft); }
.about-resource-blue .about-resource-icon { color: var(--azul-vibrante); background: var(--azul-suave); }
.about-resource-yellow .about-resource-icon { color: #c79700; background: var(--cor-amarelo-suave); }
.about-resource h3 { margin: 0 0 8px; color: var(--texto-escuro); font-size: 17px; line-height: 1.3; }
.about-resource p { margin: 0; color: #66748a; font-size: 14px; line-height: 1.55; }

.about-regulations { display: flex; align-items: center; gap: 20px; margin-top: 48px; padding: 24px 28px; border: 1px solid #e3eaf2; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .045); }
.about-regulations-icon { flex: 0 0 auto; margin: 0; color: var(--azul-vibrante); background: var(--azul-suave); }
.about-regulations-icon svg { width: 28px; height: 28px; }
.about-regulations-copy { min-width: 0; flex: 1; }
.about-regulations-copy h2 { margin: 0 0 6px; color: var(--texto-escuro); font-size: 20px; }
.about-regulations-copy p { margin: 0; color: #5b687b; font-size: 14px; line-height: 1.5; }
.about-regulations-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 11px 18px; border-radius: 10px; background: var(--action-primary); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, box-shadow .2s ease; }
.about-regulations-link svg { width: 18px; height: 18px; }
.about-regulations-link:hover { background: var(--action-primary-hover); color: #fff; box-shadow: 0 5px 14px rgba(0, 85, 162, .16); }
.about-regulations-link:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; }

@media (max-width: 760px) {
    .about-hero { height: 160px; }
    .about-hero-content { height: 100%; min-height: 0; }
    .about-hero-content { width: min(100% - 32px, 980px); }
    .about-hero h1 { font-size: clamp(32px, 9vw, 40px); }
    .about-page { width: min(100% - 32px, 980px); padding: 48px 0 56px; }
    .about-resources { margin-top: 52px; }
    .about-resource-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
    .about-resource { padding: 0 20px; }
    .about-resource:nth-child(odd) { padding-left: 0; }
    .about-resource:nth-child(3) { border-left: 0; }
    .about-regulations { align-items: flex-start; flex-wrap: wrap; padding: 22px; }
    .about-regulations-link { width: 100%; }
}
@media (max-width: 420px) {
    .about-resource-list { grid-template-columns: 1fr; }
    .about-resource { padding: 0; }
    .about-resource + .about-resource { border-left: 0; border-top: 1px solid #dce7f2; padding-top: 24px; }
}