.project-showcase { --showcase-navy: var(--navy); --showcase-gold: var(--gold); color: var(--showcase-navy); }
.project-showcase .breadcrumbs { margin-bottom: 15px; }
.project-showcase__layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(245px, 1fr); align-items: start; gap: 18px; }
.project-showcase__main, .project-showcase__aside { min-width: 0; }
.project-showcase__main { display: grid; gap: 16px; }
.project-showcase__aside { display: grid; gap: 16px; }
.project-showcase__hero { position: relative; display: flex; align-items: stretch; min-height: 258px; overflow: hidden; border: 1px solid #d7dce5; border-radius: 12px; background: var(--showcase-navy); color: white; isolation: isolate; }
.project-showcase__hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #031d42 0%, #031d42f5 27%, #031d42c9 46%, #031d4245 67%, transparent 100%); }
.project-showcase__hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.project-showcase__hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: min(60%, 500px); padding: 24px 30px; }
.project-showcase__hero-icon { display: inline-flex; color: var(--showcase-gold); }
.project-showcase__hero-icon svg { width: 48px; height: 48px; stroke-width: 1.5; }
.project-showcase__hero h1 { margin: 5px 0 4px; color: #fff; font: 400 clamp(37px, 4.1vw, 58px)/1.02 Georgia, serif; text-wrap: balance; }
.project-showcase__hero-rule { width: 116px; height: 3px; margin: 9px 0 12px; border-radius: 3px; background: var(--showcase-gold); }
.project-showcase__hero p { max-width: 390px; margin: 0; font-size: clamp(16px, 1.7vw, 22px); line-height: 1.35; }
.project-showcase--projetos-itinerantes .project-showcase__hero h1 { font-size: clamp(34px, 3.4vw, 47px); white-space: nowrap; }
.project-showcase__intro, .project-showcase__panel, .project-showcase__card, .project-showcase__steps { border: 1px solid #d9dfe8; border-radius: 10px; background: #fff; box-shadow: 0 2px 7px #04295308; }
.project-showcase__intro { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 17px; padding: 15px 19px; }
.project-showcase__intro-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #c99b451c; color: var(--showcase-gold); }
.project-showcase__intro-icon svg { width: 38px; height: 38px; stroke-width: 1.5; }
.project-showcase__intro h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.25; }
.project-showcase__intro p { margin: 0; color: #394659; font-size: 13px; line-height: 1.45; }
.project-showcase__intro > a, .project-showcase__partner > a { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 9px 15px; border: 2px solid var(--showcase-gold); border-radius: 6px; color: #8a641f; font-size: 13px; font-weight: 700; white-space: nowrap; }
.project-showcase__intro > a:hover, .project-showcase__partner > a:hover { background: var(--showcase-gold); color: var(--showcase-navy); }
.project-showcase__programs { scroll-margin-top: 25px; }
.project-showcase__programs > h2 { margin: 0 0 9px; font: 700 23px/1.2 Georgia, serif; }
.project-showcase__cards { display: grid; gap: 12px; }
.project-showcase__cards--vertical { grid-template-columns: repeat(4,minmax(0,1fr)); }
.project-showcase__cards--horizontal { grid-template-columns: repeat(2,minmax(0,1fr)); }
.project-showcase__card { overflow: hidden; }
.project-showcase__card img { display: block; width: 100%; height: 114px; object-fit: cover; }
.project-showcase__card > div { padding: 12px 12px 14px; }
.project-showcase__card h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.25; }
.project-showcase__card p { margin: 0; color: #455267; font-size: 12px; line-height: 1.4; }
.project-showcase__cards--horizontal .project-showcase__card { display: grid; grid-template-columns: 48% minmax(0,1fr); }
.project-showcase__cards--horizontal .project-showcase__card img { height: 100%; min-height: 140px; }
.project-showcase__steps { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 20px; padding: 12px 18px; }
.project-showcase__steps h2 { max-width: 185px; margin: 0; font: 700 20px/1.2 Georgia, serif; }
.project-showcase__steps ol { display: flex; align-items: stretch; gap: 11px; margin: 0; padding: 0; list-style: none; }
.project-showcase__steps li { display: flex; align-items: center; flex: 1 1 0; min-width: 0; gap: 8px; }
.project-showcase__steps li + li::before { content: '→'; flex: 0 0 auto; margin-right: 3px; color: var(--showcase-gold); font-size: 23px; }
.project-showcase__step-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1.5px solid var(--showcase-gold); border-radius: 50%; color: var(--showcase-navy); }
.project-showcase__step-icon svg { width: 25px; height: 25px; }
.project-showcase__steps strong, .project-showcase__steps small { display: block; }
.project-showcase__steps strong { font-size: 12px; line-height: 1.2; }
.project-showcase__steps small { margin-top: 2px; color: #516075; font-size: 10px; line-height: 1.2; }
.project-showcase__panel { padding: 19px 18px; }
.project-showcase__panel h2 { margin: 0 0 11px; font: 700 22px/1.2 Georgia, serif; }
.project-showcase__panel ul { margin: 0; padding: 0; list-style: none; }
.project-showcase__panel li + li { border-top: 1px solid #e1e5eb; }
.project-showcase__panel li a, .project-showcase__static { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 7px 2px; font-size: 12px; line-height: 1.3; }
.project-showcase__panel li a:hover { color: #8a641f; }
.project-showcase__panel li a > span:first-child, .project-showcase__static > span:first-child { display: inline-flex; flex: 0 0 27px; color: var(--showcase-navy); }
.project-showcase__panel li svg { width: 24px; height: 24px; stroke-width: 1.6; }
.project-showcase__panel li b { margin-left: auto; color: var(--showcase-gold); font-size: 22px; font-weight: 400; }
.project-showcase__static { color: #66758a; }
.project-showcase__contact { position: relative; overflow: hidden; padding: 22px 20px; border-radius: 10px; background: var(--showcase-navy); color: #fff; }
.project-showcase__contact > span { position: absolute; right: 15px; top: 21px; color: var(--showcase-gold); opacity: .8; }
.project-showcase__contact > span svg { width: 50px; height: 50px; stroke-width: 1.4; }
.project-showcase__contact h2 { position: relative; max-width: 78%; margin: 0 0 8px; font: 700 22px/1.2 Georgia, serif; }
.project-showcase__contact p { position: relative; max-width: 80%; margin: 0 0 14px; font-size: 13px; line-height: 1.45; }
.project-showcase__contact a { position: relative; display: inline-flex; justify-content: center; padding: 10px 14px; border-radius: 5px; background: var(--showcase-gold); color: var(--showcase-navy); font-size: 13px; font-weight: 700; }
.project-showcase__contact a:hover { background: #d9ad5b; }
.project-showcase__partner > span { float: left; margin-right: 12px; color: var(--showcase-gold); }
.project-showcase__partner > span svg { width: 48px; height: 48px; }
.project-showcase__partner p { color: #46556b; font-size: 13px; line-height: 1.45; }
.project-showcase__partner > a { width: 100%; }
@media (max-width: 1050px) { .project-showcase__layout { grid-template-columns: minmax(0,1fr) 235px; } .project-showcase__cards--vertical { grid-template-columns: repeat(2,minmax(0,1fr)); } .project-showcase__card img { height: 145px; } .project-showcase__steps { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .project-showcase__layout { grid-template-columns: 1fr; } .project-showcase__aside { grid-template-columns: repeat(2,minmax(0,1fr)); } .project-showcase__hero { min-height: 285px; } .project-showcase__hero-copy { width: min(78%,500px); } }
@media (max-width: 580px) { .project-showcase__hero { min-height: 295px; } .project-showcase__hero::before { background: linear-gradient(90deg,#031d42f7 0%,#031d42d9 55%,#031d4266 100%); } .project-showcase__hero-copy { width: 100%; padding: 20px; } .project-showcase__hero h1, .project-showcase--projetos-itinerantes .project-showcase__hero h1 { font-size: 39px; white-space: normal; } .project-showcase__hero p { max-width: 270px; font-size: 17px; } .project-showcase__intro { grid-template-columns: auto minmax(0,1fr); } .project-showcase__intro > a { grid-column: 1 / -1; width: 100%; } .project-showcase__cards--vertical, .project-showcase__cards--horizontal, .project-showcase__aside { grid-template-columns: 1fr; } .project-showcase__cards--horizontal .project-showcase__card { grid-template-columns: 1fr; } .project-showcase__cards--horizontal .project-showcase__card img { height: 145px; } .project-showcase__steps ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .project-showcase__steps li + li::before { display: none; } }