@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Nunito:wght@400;600;700;800;900&display=swap');
:root {
    --cream:#fffaf0;
    --navy:#123d52;
    --coral:#ef665c;
    --green:#e7efdb;
    --ink:#294854}
* {
    box-sizing:border-box}
html {
    scroll-behavior:smooth;
    scroll-padding-top:100px}
body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font:17px/1.6 Nunito,Arial,sans-serif}
a {
    color:inherit}
h1,h2,h3 {
    font-family:'Bree Serif',Georgia,serif;
    color:var(--navy);
    font-weight:400;
    line-height:1.13;
    margin:0 0 18px}
h1 {
    font-size:clamp(36px,4.5vw,62px)}
h2 {
    font-size:clamp(28px,3.1vw,40px)}
h3 {
    font-size:25px}
p {
    margin:0 0 18px}
em {
    color:var(--coral);
    font-style:normal}
.wrap {
    max-width:1180px;
    margin:auto;
    padding:0 28px}
.header {
    background:var(--cream);
    border-bottom:1px solid #123d5210}
.header .wrap {
    display:flex;
    align-items:center;
    gap:24px;
    min-height:106px}
.logo {
    width:100px;
    height:100px;
    object-fit:contain;
    mix-blend-mode:multiply}
nav {
    display:flex;
    gap:23px;
    align-items:center;
    margin-left:auto}
nav a {
    text-decoration:none;
    font-size:14px;
    font-weight:800}
nav a[aria-current=page] {
    border-bottom:2px solid var(--coral)}
.btn {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border:1px solid var(--coral);
    border-radius:10px;
    padding:12px 22px;
    background:var(--coral);
    color:white;
    text-decoration:none;
    font:800 16px Nunito,Arial;
    cursor:pointer}
.btn.secondary {
    background:transparent;
    color:var(--navy);
    border-color:var(--navy)}
.buttons {
    display:flex;
    gap:12px;
    flex-wrap:wrap}
.hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:36px;
    padding:32px 0 42px}
.hero p {
    font-size:20px;
    max-width:520px}
.eyebrow {
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:3px;
    display:block;
    margin-bottom:16px}
.art {
    position:relative;
    overflow:hidden;
    border-radius:100px 14px 14px 14px;
    aspect-ratio:var(--ratio);
    isolation:isolate}
.art img {
    position:absolute;
    width:var(--width);
    max-width:none;
    left:var(--left);
    top:var(--top)}
.small-note {
    font-size:14px;
    margin-top:14px}
.section {
    padding:42px 0}
.center {
    text-align:center}
.stats {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    background:#fff0d8;
    border-radius:16px;
    padding:26px;
    gap:24px}
.stats strong {
    font-size:40px;
    line-height:1.15;
    color:var(--coral);
    display:block}
.stats p {
    margin:0}
.sources {
    font-size:12px;
    margin-top:12px}
.steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin:28px 0}
.step {
    text-align:center;
    position:relative}
.step .num {
    display:inline-grid;
    place-items:center;
    background:var(--coral);
    color:white;
    border-radius:50%;
    width:32px;
    height:32px;
    font-weight:900}
.step .symbol {
    font-size:48px;
    display:block;
    margin:12px}
.step strong {
    display:block;
    line-height:1.25}
.step p {
    font-size:15px;
    margin-top:9px}
.grid2,.grid3 {
    display:grid;
    gap:24px;
    grid-template-columns:repeat(2,1fr)}
.grid3 {
    grid-template-columns:repeat(3,1fr)}
.card {
    padding:30px;
    background:var(--green);
    border-radius:16px}
.card.peach {
    background:#ffeadf}
.card.blue {
    background:#e1eef0}
.card.white {
    background:#fff;
    border:1px solid #ddd5c6}
.icon {
    font-size:34px;
    margin-bottom:14px;
    display:block}
.impact {
    background:#ffeadf;
    padding:30px;
    border-radius:16px}
.impact-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    text-align:center}
.impact strong {
    display:block;
    color:var(--coral);
    font-size:36px}
.cta {
    text-align:center;
    padding:46px;
    background:#ffe9db;
    border-radius:40px 14px;
    margin:35px 0}
.cta .buttons {
    justify-content:center}
.manifesto {
    background:var(--navy);
    color:var(--cream);
    padding:45px;
    border-radius:16px}
.manifesto h2 {
    color:var(--cream)}
.manifesto p {
    max-width:750px}
.partners {
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    font-size:19px;
    font-weight:900;
    margin:24px 0}
.partner-name {
    border-bottom:2px solid #a1b88b;
    padding-bottom:5px}
.footer {
    background:var(--navy);
    color:var(--cream);
    padding:36px 0;
    margin-top:40px;
    font-size:14px}
.footer .wrap {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:28px}
.footer a {
    display:inline-block;
    margin:0 14px 8px 0}
.footer p {
    margin-bottom:10px}
details {
    border-bottom:1px solid #ddd3c2;
    padding:18px 0}
summary {
    cursor:pointer;
    font-weight:900}
details p {
    margin:15px 0 0}
form {
    display:grid;
    gap:15px}
label {
    font-size:15px;
    font-weight:800;
    display:grid;
    gap:6px}
input,select,textarea {
    width:100%;
    border:1px solid #c7cfca;
    border-radius:8px;
    padding:12px;
    background:white;
    color:var(--navy);
    font:16px Nunito,Arial}
textarea {
    min-height:100px}
label.check {
    display:flex;
    align-items:flex-start;
    font-size:14px}
input[type=checkbox] {
    width:auto;
    margin-top:5px}
.trap {
    position:absolute;
    left:-9999px}
.feedback {
    padding:18px;
    background:var(--green);
    border-radius:10px;
    display:none}
.feedback.show {
    display:block}
.feedback.error {
    background:#ffe0dc}
.form-section {
    scroll-margin-top:30px}
.floating {
    position:fixed;
    bottom:18px;
    right:18px;
    z-index:4;
    box-shadow:0 6px 20px #0002}
.menu {
    display:none}
.signature {
    font-family:Georgia,serif;
    font-style:italic;
    font-size:38px;
    color:var(--coral)}
.text-column {
    max-width:800px;
    margin:auto}
.list {
    padding-left:20px}
.list li {
    margin:12px 0}
.admin {
    max-width:1250px;
    margin:auto;
    padding:35px 22px}
table {
    width:100%;
    border-collapse:collapse;
    background:white}
td,th {
    padding:12px;
    text-align:left;
    border-bottom:1px solid #ddd;
    vertical-align:top}
.table-wrap {
    overflow:auto}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {
    outline:3px solid #247c96;
    outline-offset:4px}
@media(max-width:850px) {
    .header .wrap {
    min-height:85px;
    flex-wrap:wrap;
    gap:12px}
.logo {
    width:80px;
    height:80px}
.menu {
    display:block;
    margin-left:auto;
    background:none;
    border:1px solid var(--navy);
    border-radius:8px;
    font-size:16px;
    padding:8px 15px;
    color:var(--navy)}
nav {
    display:none;
    flex-basis:100%;
    flex-direction:column;
    padding-bottom:20px;
    gap:16px}
nav.open {
    display:flex}
.header>.wrap>.btn {
    display:none}
.hero {
    gap:24px}
.steps {
    grid-template-columns:repeat(2,1fr)}
.stats {
    grid-template-columns:1fr 1fr}
.stats>div:last-child {
    grid-column:1/-1}
.grid3 {
    grid-template-columns:1fr}
.impact-grid {
    grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px) {
    .wrap {
    padding:0 20px}
.hero {
    grid-template-columns:1fr;
    padding:28px 0}
.hero .art {
    border-radius:60px 12px 12px 12px}
.hero p {
    font-size:18px}
.grid2 {
    grid-template-columns:1fr}
.stats {
    padding:20px;
    gap:18px}
.stats strong {
    font-size:30px}
.stats p {
    font-size:14px}
.section {
    padding:30px 0}
.card {
    padding:24px}
.manifesto {
    padding:28px}
.footer .wrap {
    grid-template-columns:1fr}
.cta {
    padding:30px 22px}
.buttons .btn {
    flex-grow:1}
.floating {
    font-size:14px;
    padding:10px 16px}
.step .symbol {
    font-size:38px}
.impact {
    padding:24px 16px}
.impact-grid {
    gap:16px}
.impact-grid span {
    font-size:14px}
}
@media print {
    .header,.footer,.floating,.no-print {
    display:none}
body {
    background:white}
.certificate {
    border:2px solid #123d52;
    padding:50px;
    margin:20px}
}

/* Imagens independentes em alta resolução e alinhamento dos formulários. */
.art-hd  {
     background: var(--cream);
     }

.art-hd img  {
     display:block;
     position:static;
     width:100%;
     height:100%;
     max-width:100%;
     object-fit:contain;
     }

#instituicao, #empresa  {
     display:flex;
     flex-direction:column;
     }

#instituicao form, #empresa form  {
     display:flex;
     flex-direction:column;
     flex:1;
     gap:15px;
     }

#instituicao form .check, #empresa form .check  {
     margin-top:auto;
     padding-top:10px;
     }


/* Ícones nítidos e consistentes nos passos do projeto. */
.step .symbol {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin: 16px auto;
    background: #fff0df;
    border: 1px solid #f3dfc6;
    border-radius: 24px;
    box-shadow: 0 5px 12px #123d5208;
}
.step:nth-child(2) .symbol { background: #e9f0df; border-color: #dce7ca; }
.step:nth-child(3) .symbol { background: #e6f0f3; border-color: #d3e4e9; }
.step:nth-child(4) .symbol { background: #ffebe5; border-color: #f5d6ce; }
.ui-icon { display: block; width: 48px; height: 48px; object-fit: contain; }
@media (max-width: 600px) {
    .step .symbol { width: 72px; height: 72px; border-radius: 20px; }
    .step .ui-icon { width: 40px; height: 40px; }
}