/* ==========================================================================
   UNE Moçambique — Proposta de layout
   Identidade: cores do logótipo (verde, amarelo, vermelho, carvão) ajustadas
   para contraste AA em ecrã. Motivos: anel de quatro arcos e triângulos.
   ========================================================================== */

/* Fonte alojada no próprio site (subconjunto latino, eixo de peso 400 a 800).
   Não depende do Google Fonts, que falha com frequência em redes móveis lentas. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Reserva enquanto a fonte carrega: Arial (ou Roboto, no Android) com as métricas acertadas
   para ocupar o mesmo espaço que a Plus Jakarta Sans, sem saltos no texto. */
@font-face {
  font-family: "Jakarta Reserva";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 105.6%;
  ascent-override: 98.3%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* Cores do logótipo (originais) */
  --logo-verde: #03A554;
  --logo-amarelo: #FCF007;
  --logo-vermelho: #E91F27;
  --logo-carvao: #2E2E2E;

  /* Tons ajustados para o site */
  --verde: #087F3F;          /* primária: texto branco passa AA */
  --verde-vivo: #03A554;     /* decoração e ícones */
  --verde-escuro: #0A5A31;
  --verde-noite: #062C1C;    /* fundos escuros */
  --verde-100: #D5EEDF;
  --verde-50: #ECF7F0;
  --amarelo: #FFD60A;        /* mais quente que o do logótipo, legível */
  --amarelo-escuro: #8A6A00; /* amarelo para texto sobre branco */
  --amarelo-50: #FFF8D2;
  --vermelho: #D81F2A;
  --vermelho-escuro: #A8141E;
  --vermelho-50: #FDECEC;
  --tinta: #151515;
  --carvao: #242422;
  --texto: #22231F;
  --suave: #5A5F57;
  --linha: #E3E1D8;
  --papel: #F7F6F1;
  --branco: #FFFFFF;

  --raio: 8px;
  --raio-s: 6px;
  --sombra-s: 0 1px 2px rgba(21, 21, 21, .06), 0 2px 8px rgba(21, 21, 21, .05);
  --sombra: 0 2px 4px rgba(21, 21, 21, .05), 0 10px 28px rgba(21, 21, 21, .09);
  --max: 1240px;
  --f: "Plus Jakarta Sans", "Jakarta Reserva", system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; }
body {
  margin: 0;
  font-family: var(--f);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* corta excessos laterais sem criar uma área de scroll própria */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; text-wrap: pretty; /* evita palavras sozinhas na última linha */ }
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--tinta);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1, h2, h3, h4 { overflow-wrap: break-word; }
h3, h4 { hyphens: auto; }
h1 { font-size: clamp(2.3rem, 5vw, 4.1rem); }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); }
h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.015em; }
h4 { font-size: 1rem; line-height: 1.25; letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--tinta); }
::selection { background: var(--amarelo); color: var(--tinta); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 4px; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 40px, var(--max)); margin-inline: auto; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Pequenos elementos ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--verde);
  margin-bottom: 14px;
}
.eyebrow::before {
  /* três pontos do logótipo: um ponto e duas sombras sólidas */
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; margin-right: 20px;
  background: var(--amarelo); box-shadow: 10px 0 0 var(--verde-vivo), 20px 0 0 var(--vermelho);
}
.on-dark .eyebrow, .eyebrow--claro { color: var(--amarelo); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--suave); max-width: 62ch; }
.on-dark .lead { color: rgba(255, 255, 255, .82); }
.muted { color: var(--suave); }
.small { font-size: .9rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--raio-s);
  border: 1px solid transparent; font-weight: 700; font-size: 1rem; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--verde { background: var(--verde); color: #fff; }
.btn--verde:hover { background: var(--verde-escuro); }
.btn--amarelo { background: var(--amarelo); color: var(--tinta); }
.btn--amarelo:hover { background: #FFE14A; }
.btn--vermelho { background: var(--vermelho); color: #fff; }
.btn--vermelho:hover { background: var(--vermelho-escuro); }
.btn--tinta { background: var(--tinta); color: #fff; }
.btn--contorno { border-color: currentColor; background: transparent; }
.btn--contorno-vermelho { border-color: var(--vermelho); color: var(--vermelho); background: #fff; }
.btn--contorno-vermelho:hover { background: var(--vermelho); color: #fff; }
.btn--branco { background: #fff; color: var(--tinta); }
.btn--s { min-height: 40px; padding: 0 16px; font-size: .92rem; }
.btn--bloco { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-seta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--verde); text-decoration: none; }
.link-seta .ico { transition: transform .15s ease; }
.link-seta:hover .ico { transform: translateX(4px); }
.on-dark .link-seta { color: var(--amarelo); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 4px; font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--verde-50); color: var(--verde-escuro);
}
.tag--amarelo { background: var(--amarelo-50); color: #6B5200; }
.tag--vermelho { background: var(--vermelho-50); color: var(--vermelho-escuro); }
.tag--tinta { background: var(--tinta); color: #fff; }
.tag--linha { background: transparent; border: 1px solid var(--linha); color: var(--suave); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: 6px; border: 1px solid var(--linha); background: #fff;
  font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--verde); color: var(--verde); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* Imagens: o fundo de marca mostra-se antes de carregar e no modo "Poupar dados" */
.media {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  background: var(--verde-escuro);
}
/* Sem fotografia, fica à vista o anel de quatro cores do logótipo (as bordas de um círculo,
   rodado 45° para cada cor ocupar um quadrante, como no emblema). */
.media::after {
  content: ""; position: absolute; right: -9%; bottom: -12%; width: clamp(44px, 42%, 170px); aspect-ratio: 1; z-index: 0;
  border-radius: 50%; border: 8px solid;
  border-color: var(--amarelo) var(--verde-vivo) var(--vermelho) #fff;
  transform: rotate(-45deg); opacity: .3;
}
.media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.media img.is-loaded { opacity: 1; }
.r-16x9 { aspect-ratio: 16 / 9; } .r-4x3 { aspect-ratio: 4 / 3; } .r-1x1 { aspect-ratio: 1; } .r-3x4 { aspect-ratio: 3 / 4; }

/* ---------- Faixa de marca, barra de utilidades ---------- */
/* Faixa das quatro cores do logótipo, feita com quatro blocos de cor sólida */
.faixa4 { display: flex; height: 4px; }
.faixa4 i { flex: 1; background: var(--verde-vivo); }
.faixa4 i:nth-child(2) { background: var(--amarelo); }
.faixa4 i:nth-child(3) { background: var(--vermelho); }
.faixa4 i:nth-child(4) { background: var(--tinta); }
.util { background: var(--tinta); color: rgba(255, 255, 255, .86); font-size: .84rem; }
.util .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.util__lema { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; color: var(--amarelo); white-space: nowrap; }
.util__grupo { display: flex; align-items: center; gap: 4px; }
.util a, .util button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px;
  background: none; border: 0; color: inherit; text-decoration: none; white-space: nowrap;
}
.util a:hover, .util button:hover { color: #fff; }
.util .ico { width: 1.05em; height: 1.05em; }
.util__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .22); margin: 0 4px; }
.util button[aria-pressed="true"] { color: var(--amarelo); }

/* ---------- Cabeçalho ---------- */
.hdr { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--linha); }
.hdr__in { display: flex; align-items: stretch; gap: 20px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; padding: 8px 0; }
.brand__emblem { width: 52px; height: 55px; }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__txt b { font-size: 1.9rem; font-weight: 800; letter-spacing: .03em; color: var(--logo-carvao); }
.brand__txt small { font-size: .5rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--logo-carvao); margin-top: 3px; white-space: nowrap; }
.brand img { height: 54px; width: auto; }

.nav { display: flex; align-items: stretch; margin-left: auto; }
.nav__item { display: flex; align-items: stretch; }
.nav__btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 11px;
  border: 0; background: none; font-weight: 650; font-size: .97rem; color: var(--tinta);
  position: relative; white-space: nowrap;
}
.nav__btn::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 3px; background: var(--verde-vivo); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav__item.is-open .nav__btn, .nav__btn:hover { color: var(--verde); }
.nav__item.is-open .nav__btn::after, .nav__item.is-current .nav__btn::after { transform: scaleX(1); }
.hdr__acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; border: 0; background: none; color: var(--tinta); }
.icon-btn:hover { background: var(--papel); }
.icon-btn .ico { width: 22px; height: 22px; }
.burger { display: none; }

/* ---------- Megamenu ---------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--linha); box-shadow: 0 30px 50px -20px rgba(21, 21, 21, .28);
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s;
  max-height: calc(100vh - 90px); overflow-y: auto;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav.is-troca .mega { transition: none; }
.mega__inner { display: grid; grid-template-columns: 330px minmax(0, 1fr) 290px; gap: 36px; padding: 30px 0 28px; }
.mega__inner--sem-lateral { grid-template-columns: 330px minmax(0, 1fr); }

/* Destaque: imagem em cima e texto num bloco de cor sólida, sem sobreposições */
.mega__destaque { display: flex; flex-direction: column; min-height: 330px; border-radius: var(--raio); overflow: hidden; text-decoration: none; color: #fff; background: var(--verde-noite); }
.mega__destaque .media { flex: 1 1 140px; min-height: 130px; }
.mega__destaque-corpo { padding: 18px 20px 20px; display: grid; gap: 8px; }
.mega__destaque .kicker { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--amarelo); }
.mega__destaque strong { font-size: 1.22rem; font-weight: 800; line-height: 1.18; letter-spacing: -.02em; }
.mega__destaque .txt { font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.mega__destaque .mais { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--amarelo); margin-top: 4px; }
.mega__destaque:hover .mais .ico { transform: translateX(4px); }
.mega__destaque .mais .ico { transition: transform .15s; }

.mega__cab { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.mega__cab h2 { font-size: 1.5rem; margin: 0 0 4px; }
.mega__cab p { margin: 0; color: var(--suave); font-size: .95rem; max-width: 64ch; }
.mega__grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.mega__grupo h3 { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--suave); margin: 0 0 6px; padding-left: 10px; }
.mega__grupo--largo { grid-column: 1 / -1; }
.mega__grupo--largo ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.mlink { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 6px; text-decoration: none; transition: background-color .12s; }
.mlink:hover { background: var(--verde-50); }
.mlink__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: var(--verde-50); color: var(--verde); flex: none; transition: background-color .12s, color .12s; }
.mlink:hover .mlink__ico { background: var(--verde); color: #fff; }
.mlink__ico .ico { width: 20px; height: 20px; }
.mlink b { display: block; font-weight: 700; font-size: .97rem; line-height: 1.25; color: var(--tinta); }
.mlink small { display: block; font-size: .83rem; line-height: 1.35; color: var(--suave); margin-top: 2px; }
.mlink--compacto { padding: 6px 10px; align-items: center; }
.mlink--compacto .mlink__ico { width: 32px; height: 32px; }

.mega__lateral { display: flex; flex-direction: column; gap: 14px; }
.mcard { display: block; border-radius: var(--raio); border: 1px solid var(--linha); overflow: hidden; text-decoration: none; background: #fff; }
.mcard .media { aspect-ratio: 16 / 9; }
.mcard__corpo { display: block; padding: 14px 16px 16px; }
.mcard__corpo .kicker { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--verde); }
.mcard__corpo b { display: block; font-size: 1.02rem; line-height: 1.22; margin: 4px 0 6px; color: var(--tinta); }
.mcard__corpo p { font-size: .85rem; line-height: 1.45; color: var(--suave); margin: 0 0 8px; }
.mcard:hover { border-color: var(--verde); }
.mcard--alerta { background: var(--vermelho); border-color: var(--vermelho); color: #fff; padding: 20px; }
.mcard--alerta .ico-grande { width: 34px; height: 34px; margin-bottom: 10px; }
.mcard--alerta b { display: block; font-size: 1.15rem; line-height: 1.18; margin-bottom: 6px; }
.mcard--alerta p { font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .9); margin: 0 0 14px; }
.mlista h3 { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--suave); margin: 0 0 8px; }
.mlista__item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linha); text-decoration: none; }
.mlista__item .media { width: 64px; height: 52px; border-radius: 4px; flex: none; }
.mlista__item b { display: block; font-size: .9rem; line-height: 1.25; color: var(--tinta); }
.mlista__item small { font-size: .78rem; color: var(--suave); }
.mlista__item:hover b { color: var(--verde); }
.mlista__data { flex: none; width: 52px; text-align: center; border-radius: 4px; background: var(--amarelo-50); padding: 6px 0; line-height: 1; }
.mlista__data b { font-size: 1.15rem; }
.mlista__data small { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6B5200; margin-top: 3px; }

.mega__barra { background: var(--papel); border-top: 1px solid var(--linha); font-size: .9rem; }
.mega__barra .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; }
.mega__barra span { color: var(--suave); display: inline-flex; align-items: center; gap: 8px; }
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(6, 44, 28, .45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }
.scrim.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Barra de progresso (campanhas) */
.prog { display: grid; gap: 6px; }
.prog__barra { height: 8px; border-radius: 3px; background: rgba(21, 21, 21, .10); overflow: hidden; }
.prog__barra i { display: block; height: 100%; background: var(--verde-vivo); width: 0; transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.on-dark .prog__barra i, .mega__destaque .prog__barra i { background: var(--amarelo); }
.prog__num { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .85rem; color: var(--suave); }
.prog__num b { color: var(--tinta); }
.on-dark .prog__barra, .mega__destaque .prog__barra { background: rgba(255, 255, 255, .22); }
.on-dark .prog__num, .mega__destaque .prog__num { color: rgba(255, 255, 255, .8); }
.on-dark .prog__num b, .mega__destaque .prog__num b { color: #fff; }

/* ---------- Menu móvel ---------- */
.gaveta { position: fixed; inset: 0; z-index: 200; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
.gaveta.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--linha); }
.gaveta__corpo { flex: 1; overflow-y: auto; padding: 8px 20px 24px; }
.gaveta details { border-bottom: 1px solid var(--linha); }
.gaveta summary { display: flex; align-items: center; justify-content: space-between; min-height: 58px; font-weight: 800; font-size: 1.12rem; cursor: pointer; list-style: none; }
.gaveta summary::-webkit-details-marker { display: none; }
.gaveta summary .ico { transition: transform .2s; }
.gaveta details[open] summary .ico { transform: rotate(180deg); }
.gaveta details[open] summary { color: var(--verde); }
.gaveta__intro { font-size: .92rem; color: var(--suave); margin: 0 0 8px; }
.gaveta h4 { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--suave); margin: 14px 0 4px; }
.gaveta .mlink { padding: 8px 0; }
.gaveta__fim { padding: 16px 20px; border-top: 1px solid var(--linha); display: grid; gap: 10px; background: var(--papel); }

/* ---------- Secções ---------- */
.sec { padding: clamp(52px, 6.5vw, 88px) 0; position: relative; }
.sec--papel { background: var(--papel); }
.sec--verde { background: var(--verde-noite); color: #fff; }
.sec--carvao { background: var(--tinta); color: #fff; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.sec__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec__cab h2 { margin: 0; max-width: 20ch; }
.sec__cab p { margin: 12px 0 0; }
.sec__cab > div { max-width: 760px; }

.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--60 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--40 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.split--30 { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.split--mapa { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.split--topo { align-items: start; }
/* Coluna que acompanha o scroll ao lado de uma lista mais comprida (só em ecrãs largos) */
@media (min-width: 981px) { .fixo { position: sticky; top: 104px; } }
/* Par de fotografias desencontradas (secção "Quem somos") */
.fotos-par .media { border-radius: var(--raio); }
.fotos-par .media:nth-child(2) { margin-top: 40px; }

.card { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: transparent; }
.card__corpo { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__corpo h3 { margin: 0; }
.card__corpo h3 a { text-decoration: none; }
.card__corpo h3 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card__corpo p { margin: 0; color: var(--suave); font-size: .95rem; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .82rem; color: var(--suave); }
.card__fim { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 2; }

/* ---------- Hero da página inicial ---------- */
.hero { background: var(--verde-noite); color: #fff; position: relative; overflow: hidden; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 56px) 0 clamp(32px, 4vw, 60px); }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--amarelo); }
.hero .lead { margin-bottom: 26px; }
.hero__peticao { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--raio); padding: 18px 20px; max-width: 560px; margin-bottom: 26px; }
/* A foto enche o anel; as etiquetas ficam fora dos arcos, uma acima à direita e outra
   abaixo à esquerda (a margem vertical reserva-lhes espaço). */
.hero__visual { position: relative; width: min(100%, 470px); aspect-ratio: 1; margin: 64px auto; }
.hero__foto { position: absolute; inset: 9%; border-radius: 50%; }
.hero__anel { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__anel .arco { fill: none; stroke-width: 16; stroke-linecap: round; stroke-dasharray: 360; stroke-dashoffset: 360; animation: desenhar 1.1s cubic-bezier(.3, .7, .2, 1) forwards; }
.hero__anel .arco:nth-child(2) { animation-delay: .12s; } .hero__anel .arco:nth-child(3) { animation-delay: .24s; } .hero__anel .arco:nth-child(4) { animation-delay: .36s; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.hero__chip { position: absolute; z-index: 3; background: #fff; color: var(--tinta); border-radius: 8px; padding: 12px 16px; box-shadow: var(--sombra); line-height: 1.15; }
.hero__chip b { display: block; font-size: 1.5rem; font-weight: 800; }
.hero__chip small { font-size: .78rem; color: var(--suave); }
.hero__chip--a { left: 0; top: 97%; }
.hero__chip--b { right: 0; bottom: 97%; background: var(--amarelo); }
.hero__chip--b small { color: #4A3B00; }
.hero__faixa { border-top: 1px solid rgba(255, 255, 255, .12); }
.hero__faixa .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-height: 64px; font-size: .95rem; color: rgba(255, 255, 255, .9); padding-block: 12px; }
.hero__faixa b { color: #fff; }
.hero__faixa span { display: inline-flex; align-items: center; gap: 8px; }
.hero__faixa .wrap > span:first-child { display: block; margin-right: 6px; }
.hero__faixa .wrap > span + span { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-weight: 600; }
.hero__faixa .ico { color: var(--amarelo); }

/* ---------- Atalhos "Precisas de ajuda?" ---------- */
.atalhos { position: relative; margin-top: -1px; padding-bottom: 8px; }
.atalhos::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 72px; background: var(--verde-noite); }
.atalhos .wrap { position: relative; }
.atalhos__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.atalho { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; min-height: 176px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra); text-decoration: none; overflow: hidden; transition: transform .2s ease; }
.atalho:hover { transform: translateY(-4px); }
.atalho::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--verde-vivo)); }
.atalho__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 6px; background: var(--cb, var(--verde-50)); color: var(--ct, var(--verde)); margin-bottom: 4px; }
.atalho__ico .ico { width: 24px; height: 24px; }
.atalho b { font-size: 1.12rem; line-height: 1.18; color: var(--tinta); }
.atalho span { font-size: .9rem; line-height: 1.4; color: var(--suave); }
.atalho .ico--seta { position: absolute; right: 18px; top: 22px; color: var(--suave); transition: transform .15s, color .15s; }
.atalho:hover .ico--seta { transform: translateX(4px); color: var(--tinta); }
.atalho--amarelo { --c: var(--amarelo); --cb: var(--amarelo-50); --ct: #6B5200; }
.atalho--vermelho { --c: var(--vermelho); --cb: var(--vermelho-50); --ct: var(--vermelho); }
.atalho--tinta { --c: var(--tinta); --cb: #ECECE8; --ct: var(--tinta); }

/* ---------- Números ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.numero { padding: 8px 28px; border-left: 1px solid rgba(255, 255, 255, .16); }
.numero:first-child { border-left: 0; padding-left: 0; }
.numero b { display: block; font-size: clamp(2.2rem, 3.9vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--amarelo); letter-spacing: -.02em; }
.numero span { display: block; margin-top: 10px; font-size: .98rem; line-height: 1.4; color: rgba(255, 255, 255, .84); }
.numero small { display: block; font-size: .76rem; color: rgba(255, 255, 255, .55); margin-top: 4px; }

/* ---------- Campanhas ---------- */
.camp .media { aspect-ratio: 16 / 10; }
.camp .tag { position: absolute; left: 14px; top: 14px; z-index: 2; }
.camp .btn { position: relative; z-index: 2; }
/* A campanha mais perto da meta (escolhida em site.js) ganha contorno e selo amarelos. */
.camp--destaque { border-color: var(--amarelo); box-shadow: 0 0 0 2px var(--amarelo); }
.camp--destaque:hover { border-color: var(--amarelo); box-shadow: 0 0 0 2px var(--amarelo), var(--sombra); }
.camp__selo { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: var(--amarelo); color: var(--tinta); font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.camp__selo .ico { width: 15px; height: 15px; }

/* Conquistas recentes: cronologia horizontal por baixo das campanhas */
.conquistas { margin-top: clamp(40px, 5vw, 64px); }
.conquistas__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.conquistas__cab h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.3rem; }
.conquistas__cab h3 .ico { color: var(--amarelo-escuro); }
.conquistas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 2px solid var(--linha); }
.conquista { position: relative; padding-top: 26px; }
.conquista::before { content: ""; position: absolute; left: 0; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--papel); border: 3px solid var(--c, var(--verde-vivo)); }
.conquista:nth-child(3n+2) { --c: var(--amarelo); } .conquista:nth-child(3n+3) { --c: var(--vermelho); }
.conquista time { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.conquista h4 { margin: 6px 0 6px; font-size: 1.06rem; }
.conquista p { margin: 0; font-size: .92rem; color: var(--suave); }
.partilha { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--linha); color: #128C4B; background: #fff; }
.partilha:hover { border-color: #128C4B; }

/* ---------- Oportunidades ---------- */
.oport { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.oport:hover { border-color: var(--verde); transform: translateX(3px); box-shadow: var(--sombra-s); }
.oport__data { text-align: center; border-radius: 6px; background: var(--amarelo-50); padding: 10px 0; line-height: 1; }
.oport__data b { display: block; font-size: 1.6rem; }
.oport__data small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6B5200; margin-top: 4px; }
.oport__data--urgente { background: var(--vermelho-50); }
.oport__data--urgente small { color: var(--vermelho-escuro); }
.oport h3 { font-size: 1.06rem; margin: 6px 0 4px; }
.oport p { margin: 0; font-size: .88rem; color: var(--suave); }
.oport p b { white-space: nowrap; color: var(--texto); }
.oport__nivel { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.oport__lista { display: grid; gap: 12px; }
.filtros { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; margin-bottom: 14px; }

/* ---------- Notícias ---------- */
.noticia .media { aspect-ratio: 16 / 10; }
.noticia--grande { grid-column: span 2; flex-direction: row; }
.noticia--grande .media { width: 52%; aspect-ratio: auto; min-height: 280px; flex: none; }
.noticia--grande h3 { font-size: 1.6rem; }
/* O texto do destaque fica centrado na altura, em vez de empurrar a ligação para o fundo. */
.noticia--grande .card__corpo { justify-content: center; gap: 14px; padding: clamp(24px, 3vw, 40px); }
.noticia--grande .card__fim { margin-top: 4px; }
.lista-linhas { display: grid; }
.linha-item { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--linha); text-decoration: none; }
.linha-item:last-child { border-bottom: 1px solid var(--linha); }
.linha-item time, .linha-item .quando { font-size: .85rem; color: var(--suave); white-space: nowrap; }
.linha-item__txt small { display: block; margin-top: 2px; font-size: .84rem; color: var(--suave); }
.linha-item b { font-size: 1.02rem; line-height: 1.3; }
.linha-item:hover b { color: var(--verde); }
.linha-item .ico { color: var(--suave); }
.on-dark .linha-item:hover b, .on-dark .linha-item .ico { color: var(--amarelo); }

/* ---------- Cartão do estudante ---------- */
.cartao-visual { position: relative; width: min(100%, 440px); margin-inline: auto; perspective: 1200px; }
.cartao {
  position: relative; aspect-ratio: 1.586; border-radius: 10px; overflow: hidden; color: #fff; padding: 7% 7% 6%;
  background: #1E1E1C;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transform: rotate(-4deg); transition: transform .4s ease;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cartao-visual:hover .cartao { transform: rotate(0); }
/* círculo verde de cor sólida no canto, em vez de gradiente */
.cartao::before { content: ""; position: absolute; right: -16%; top: -46%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: var(--verde); }
.cartao > * { position: relative; z-index: 1; }
.cartao > .cartao__faixa { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.cartao__faixa i:nth-child(4) { background: #fff; }
.cartao__topo { display: flex; align-items: center; justify-content: space-between; }
.cartao__marca { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.2rem; }
.cartao__marca svg { width: 34px; height: 36px; }
.cartao__tipo { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amarelo); text-align: right; line-height: 1.3; }
.cartao__meio { display: flex; align-items: center; gap: 14px; }
.cartao__foto { width: 22%; aspect-ratio: 3 / 4; border-radius: 4px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; color: rgba(255, 255, 255, .6); }
.cartao__nome { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.cartao__dados { font-size: .7rem; color: rgba(255, 255, 255, .7); line-height: 1.5; }
.cartao__qr { margin-left: auto; width: 21%; aspect-ratio: 1; background: #fff; border-radius: 4px; padding: 5px; color: var(--tinta); }
.cartao__qr svg { width: 100%; height: 100%; }
.cartao__num { font-size: .82rem; letter-spacing: .2em; color: rgba(255, 255, 255, .85); }
.cartao--mini { border-radius: 8px; transform: rotate(-3deg); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5); }
.cartao--mini { padding: 14px 16px 18px; }
.cartao--mini .cartao__marca { font-size: .95rem; } .cartao--mini .cartao__marca svg { width: 26px; height: 28px; }
.cartao--mini .cartao__foto { display: none; }
.cartao--mini .cartao__nome { font-size: .82rem; white-space: nowrap; } .cartao--mini .cartao__dados { font-size: .6rem; }
.cartao--mini .cartao__tipo { font-size: .5rem; } .cartao--mini .cartao__num { font-size: .6rem; }
.cartao--mini .cartao__qr { width: 20%; padding: 3px; border-radius: 3px; }
.cartao--mini > .cartao__faixa { height: 4px; }
.beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 24px 0 30px; }
.beneficio { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; line-height: 1.4; }
.beneficio .ico { color: var(--amarelo); width: 22px; height: 22px; margin-top: 2px; }
.beneficio > span[data-ico] { flex: none; } /* o ícone não encolhe quando o texto é comprido */
.beneficio b { display: block; color: #fff; }
.beneficio span { color: rgba(255, 255, 255, .72); font-size: .88rem; }

/* ---------- Mapa das províncias e directório ---------- */
/* Cada província pinta-se com mais verde quanto mais associações tem (--n de 0 a 4). */
.mapa { max-width: 340px; }
.mapa__svg { width: 100%; height: auto; overflow: visible; }
.prov { cursor: pointer; }
.prov path, .prov circle { fill: color-mix(in srgb, var(--verde) calc(10% + var(--n, 0) * 21%), #F4F6F1); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; transition: fill .15s; }
.prov--cidade circle { stroke-width: 2.5; }
.prov:hover path, .prov:hover circle { fill: color-mix(in srgb, var(--verde) calc(22% + var(--n, 0) * 21%), #F4F6F1); }
.prov:focus { outline: none; }
.prov:focus-visible path, .prov:focus-visible circle { stroke: var(--tinta); stroke-width: 3; }
.prov[aria-pressed="true"] path, .prov[aria-pressed="true"] circle { fill: var(--amarelo); }
.mapa__rotulo { fill: var(--tinta); stroke: rgba(255, 255, 255, .85); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; pointer-events: none; }
/* Tamanhos em unidades do viewBox (400 de largura): cerca de 10px e 13px no ecrã */
.mapa__nome { font-size: 12px; font-weight: 700; }
.mapa__num { font-size: 15.5px; font-weight: 800; }
.prov--escuro .mapa__rotulo { fill: #fff; stroke: rgba(6, 44, 28, .45); }
.prov--escuro[aria-pressed="true"] .mapa__rotulo, .prov--cidade .mapa__rotulo { fill: var(--tinta); stroke: rgba(255, 255, 255, .85); }
.mapa__legenda { display: flex; align-items: center; gap: 4px; margin-top: 14px; font-size: .78rem; color: var(--suave); }
.mapa__legenda span { margin-right: 6px; }
.mapa__legenda i { display: grid; place-items: center; width: 30px; height: 20px; border-radius: 3px; font-style: normal; font-weight: 700; font-size: .72rem; color: var(--tinta); background: color-mix(in srgb, var(--verde) calc(10% + var(--n, 0) * 21%), #F4F6F1); }
.mapa__legenda i:nth-child(n+5) { color: #fff; }
.mapa__nota { font-size: .8rem; color: var(--suave); margin-top: 10px; max-width: 340px; }
/* Sem altura fixa nem scroll interno: uma lista com scroll próprio prende a roda do rato */
.dir__lista { display: grid; gap: 10px; }
.dir__mais { justify-self: start; margin-top: 6px; }
.dir__item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 6px; border: 1px solid var(--linha); background: #fff; }
.dir__sigla { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 6px; background: var(--verde-50); color: var(--verde); font-weight: 800; font-size: .78rem; }
.dir__item b { display: block; line-height: 1.25; }
.dir__item small { color: var(--suave); font-size: .84rem; }
.dir__contacto { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 6px; color: var(--verde); transition: background-color .15s; }
.dir__contacto:hover { background: var(--verde-50); }
.vazio { padding: 28px; border: 1px dashed var(--linha); border-radius: var(--raio); text-align: center; color: var(--suave); }

/* ---------- Cronologia ---------- */
.crono { position: relative; display: grid; gap: 22px; padding-left: 34px; }
.crono::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--linha); }
.crono__item { position: relative; }
.crono__item::before { content: ""; position: absolute; left: -34px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--c, var(--verde-vivo)); }
.crono__item:nth-child(4n+2) { --c: var(--amarelo); } .crono__item:nth-child(4n+3) { --c: var(--vermelho); } .crono__item:nth-child(4n+4) { --c: var(--tinta); }
.crono__ano { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.crono__item h3 { margin: 4px 0 6px; font-size: 1.12rem; }
.crono__item p { margin: 0; color: var(--suave); font-size: .96rem; max-width: 64ch; }
.on-dark .crono::before { background: rgba(255, 255, 255, .18); }
.on-dark .crono__item::before { background: var(--verde-noite); }
.on-dark .crono__item:nth-child(4n+4) { --c: #fff; }
.on-dark .crono__item p, .on-dark .crono__ano { color: rgba(255, 255, 255, .72); }

/* ---------- Parceiros ---------- */
/* Só parceiros confirmados; o último cartão convida novas instituições em vez de mostrar
   caixas vazias. Quando houver logótipos, entram no lugar do nome (<img> dentro de .parceiro). */
.parceiros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.parceiro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 112px; padding: 16px; border-radius: var(--raio); border: 1px solid var(--linha); background: #fff; text-align: center; line-height: 1.2; text-decoration: none; transition: border-color .15s, background-color .15s; }
.parceiro b { font-size: 1.35rem; font-weight: 800; letter-spacing: .02em; color: var(--tinta); }
.parceiro small { font-size: .8rem; font-weight: 600; color: var(--suave); }
.parceiro img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.parceiro:hover img { filter: none; opacity: 1; }
.parceiro--convite { border: 1.5px dashed var(--verde-100); background: var(--verde-50); color: var(--verde); }
.parceiro--convite b { font-size: 1rem; color: var(--verde-escuro); }
.parceiro--convite .ico { width: 26px; height: 26px; }
.parceiro--convite:hover { border-color: var(--verde); }

/* ---------- Faixa de subscrição ---------- */
.subscrever { background: var(--amarelo); color: var(--tinta); position: relative; overflow: hidden; }
.subscrever::before, .subscrever::after { content: ""; position: absolute; width: 0; height: 0; }
.subscrever::before { left: 0; top: 0; border-top: 84px solid var(--verde-vivo); border-right: 84px solid transparent; }
.subscrever::after { right: 0; bottom: 0; border-bottom: 84px solid var(--vermelho); border-left: 84px solid transparent; }
.subscrever .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: clamp(44px, 6vw, 72px); }
.subscrever h2 { margin-bottom: 8px; }
.subscrever p { margin: 0; color: #3D3300; }
.form-linha { display: flex; gap: 10px; }
.form-linha input { flex: 1; min-width: 0; }

/* ---------- Formulários ---------- */
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
input[type="file"] { width: 100%; max-width: 100%; min-width: 0; font-size: .9rem; }
.campo label, .campo legend { font-weight: 650; font-size: .92rem; }
.campo .dica { font-size: .82rem; color: var(--suave); }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--raio-s);
  border: 1px solid #C9C7BD; background: #fff; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(3, 165, 84, .18); }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.etapa.is-on { grid-template-columns: minmax(0, 1fr); }
.painel { min-width: 0; }
.form > .btn { justify-self: start; }
.form > .btn--bloco { justify-self: stretch; }
.form__2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--verde); flex: none; }
.painel { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: clamp(20px, 3vw, 32px); }
.painel--sombra { box-shadow: var(--sombra); }
.painel--verde { background: var(--verde-50); border-color: var(--verde-100); }
.painel--amarelo { background: var(--amarelo-50); border-color: #F1E3A0; }
.painel--vermelho { background: var(--vermelho-50); border-color: #F5C6C8; }
.painel--escuro { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.painel h3 { margin-bottom: 10px; }
.resultado { display: none; }
.resultado.is-on { display: block; }
.protocolo { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: .04em; color: var(--verde); }
.estado { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.estado li { position: relative; padding-top: 14px; font-size: .8rem; font-weight: 600; color: var(--suave); }
.estado li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; background: var(--linha); }
.estado li.is-feito { color: var(--tinta); }
.estado li.is-feito::before { background: var(--verde-vivo); }

.passos { counter-reset: passo; display: grid; gap: 18px; }
.passo { position: relative; padding-left: 62px; min-height: 46px; }
.passo::before { counter-increment: passo; content: counter(passo); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tinta); color: #fff; font-weight: 800; font-size: 1.1rem; }
.passo:nth-child(4n+1)::before { background: var(--verde); } .passo:nth-child(4n+2)::before { background: var(--amarelo); color: var(--tinta); } .passo:nth-child(4n+3)::before { background: var(--vermelho); }
.passo h3 { margin: 0 0 4px; font-size: 1.1rem; }
.passo p { margin: 0; color: var(--suave); font-size: .96rem; }
.passos--linha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.passos--linha .passo { padding-left: 0; padding-top: 62px; }
.passos--linha.passos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.stepper { display: flex; gap: 8px; margin-bottom: 22px; }
.stepper li { flex: 1; padding-top: 12px; border-top: 2px solid var(--linha); font-size: .82rem; font-weight: 700; color: var(--suave); }
.stepper li.is-on { border-color: var(--verde-vivo); color: var(--tinta); }
.etapa { display: none; } .etapa.is-on { display: grid; gap: 18px; }

/* Acordeão */
.acordeao { display: grid; gap: 10px; }
.acordeao details { border: 1px solid var(--linha); border-radius: 6px; background: #fff; }
.acordeao summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; font-weight: 700; cursor: pointer; list-style: none; }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after { content: "+"; font-size: 1.4rem; font-weight: 500; line-height: 1; color: var(--verde); flex: none; }
.acordeao details[open] summary::after { content: "–"; }
.acordeao details[open] { border-color: var(--verde); }
.acordeao .resp { padding: 0 18px 18px; color: var(--suave); font-size: .97rem; }
.acordeao .resp p:last-child { margin: 0; }

/* Documentos */
.docs { display: grid; gap: 10px; }
.doc { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 6px; border: 1px solid var(--linha); background: #fff; text-decoration: none; transition: border-color .15s; }
.doc:hover { border-color: var(--verde); }
.doc__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: var(--vermelho-50); color: var(--vermelho); }
.doc b { display: block; line-height: 1.25; }
.doc small { color: var(--suave); font-size: .82rem; }
.doc > span:last-child { color: var(--suave); }
.doc:hover > span:last-child { color: var(--verde); }

/* Bandeiras */
.bandeira { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--raio); border: 1px solid var(--linha); background: #fff; text-decoration: none; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.bandeira:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.bandeira::after { content: ""; position: absolute; right: -26px; top: -26px; width: 84px; height: 84px; border-radius: 50%; border: 5px solid var(--c, var(--verde-100)); opacity: .8; }
.bandeira__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 6px; background: var(--tinta); color: var(--amarelo); }
.bandeira__ico .ico { width: 24px; height: 24px; }
.bandeira h3 { margin: 4px 0 0; font-size: 1.08rem; }
.bandeira p { margin: 0; font-size: .9rem; color: var(--suave); }
.bandeira:nth-child(3n+2) { --c: #FFEFA0; } .bandeira:nth-child(3n+3) { --c: #F9CACC; }

/* Pessoas */
.pessoa { text-align: left; }
.pessoa .media { aspect-ratio: 1; border-radius: var(--raio); }
.pessoa__avatar { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--raio); background: var(--verde-50); color: var(--verde); }
.pessoa__avatar .ico { width: 34%; height: 34%; stroke-width: 1.2; }
.pessoa h3 { margin: 14px 0 2px; font-size: 1.05rem; }
.pessoa p { margin: 0; font-size: .88rem; color: var(--suave); }

/* Sondagem (Barómetro) */
.sondagem { display: grid; gap: 10px; }
.sondagem label { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: 6px; border: 1px solid var(--linha); background: #fff; font-weight: 600; font-size: .95rem; cursor: pointer; overflow: hidden; }
.sondagem input { position: absolute; opacity: 0; }
.sondagem label:hover { border-color: var(--verde); }
.sondagem label:focus-within { outline: 3px solid var(--amarelo); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tinta); }
.sondagem label i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--verde-100); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.sondagem label span, .sondagem label b { position: relative; }
.sondagem label b { opacity: 0; }
.sondagem.votou label b { opacity: 1; } .sondagem.votou label { cursor: default; }
.sondagem.votou label.escolhida { border-color: var(--verde); }
.sondagem.votou label.escolhida i { background: #9BDDB8; }

/* Galeria */
.galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 10px; }
.galeria .media { border-radius: 6px; }
.galeria .media:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.galeria .media:nth-child(6) { grid-column: span 2; }

/* Agenda */
.evento { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--linha); }
.evento:last-child { border-bottom: 1px solid var(--linha); }
.evento__data { text-align: center; border-radius: 6px; background: var(--tinta); color: #fff; padding: 10px 0; line-height: 1; }
.evento__data b { display: block; font-size: 1.6rem; }
.evento__data small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amarelo); margin-top: 4px; }
.evento h3 { margin: 0 0 4px; font-size: 1.06rem; }
.evento p { margin: 0; font-size: .88rem; color: var(--suave); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.evento p span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Páginas interiores ---------- */
/* Cada secção tem a sua cor de destaque (--acento), usada no triângulo de cima e no bloco
   deslocado por trás da fotografia; --acento-2 pinta o triângulo de baixo. */
.pg-hero { --acento: var(--amarelo); --acento-2: var(--vermelho); background: var(--verde-noite); color: #fff; position: relative; overflow: hidden; }
[data-pagina="a-une"] .pg-hero { --acento: var(--verde-vivo); --acento-2: var(--amarelo); }
[data-pagina="causas"] .pg-hero { --acento: var(--vermelho); --acento-2: var(--amarelo); }
[data-pagina="apoio"] .pg-hero { --acento: var(--vermelho); --acento-2: var(--verde-vivo); }
[data-pagina="oportunidades"] .pg-hero { --acento: var(--amarelo); --acento-2: var(--verde-vivo); }
[data-pagina="cartao"] .pg-hero { --acento: var(--amarelo); --acento-2: var(--vermelho); }
[data-pagina="associacoes"] .pg-hero { --acento: var(--verde-vivo); --acento-2: var(--vermelho); }
[data-pagina="noticias"] .pg-hero { --acento: #fff; --acento-2: var(--amarelo); }
[data-pagina="contactos"] .pg-hero { --acento: var(--verde-vivo); --acento-2: #fff; }
.pg-hero::before, .pg-hero::after { content: ""; position: absolute; width: 0; height: 0; z-index: 0; }
.pg-hero::before { right: 0; top: 0; border-top: 110px solid var(--acento); border-left: 110px solid transparent; }
.pg-hero::after { right: 0; bottom: 0; border-bottom: 90px solid var(--acento-2); border-left: 90px solid transparent; }
.pg-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(36px, 5vw, 64px); }
.pg-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.5rem); margin-bottom: 14px; }
.pg-hero .media { border-radius: var(--raio); aspect-ratio: 4 / 3; margin: 0 18px 18px 0; box-shadow: 18px 18px 0 0 var(--acento), 0 30px 60px -30px rgba(0, 0, 0, .7); overflow: hidden; }
/* Sem fotografia, o anel de quatro cores aparece grande e centrado. */
.pg-hero .media::after { right: auto; bottom: auto; left: 50%; top: 50%; width: 42%; border-width: 14px; opacity: .5; transform: translate(-50%, -50%) rotate(-45deg); }
.migalhas { display: flex; flex-wrap: wrap; gap: 8px; font-size: .84rem; color: rgba(255, 255, 255, .66); margin-bottom: 18px; }
.migalhas a { text-decoration: none; } .migalhas a:hover { color: #fff; text-decoration: underline; }
.migalhas li + li::before { content: "/"; margin-right: 8px; opacity: .5; }

.subnav { position: sticky; top: 79px; z-index: 50; background: #fff; border-bottom: 1px solid var(--linha); }
.subnav ul { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 54px; padding: 0 14px; font-size: .92rem; font-weight: 650; text-decoration: none; white-space: nowrap; color: var(--suave); border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--tinta); }
.subnav a.is-active { color: var(--verde); border-color: var(--verde-vivo); }

.prosa { max-width: 68ch; }
.prosa h3 { margin-top: 1.4em; }
.prosa ul, ul.pontos { list-style: none; display: grid; gap: 8px; margin: 0 0 1em; }
.prosa ul li, ul.pontos li { position: relative; padding-left: 26px; }
.prosa ul li::before, ul.pontos li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--verde-vivo); }
ul.pontos:last-child { margin-bottom: 0; }
.contactos-lista { display: grid; gap: 12px; margin-top: 6px; }
.contactos-lista li { display: flex; gap: 12px; align-items: flex-start; }
.contactos-lista .ico { color: var(--verde); margin-top: 3px; }
.contactos-lista a { text-decoration: none; font-weight: 650; }
.contactos-lista a:hover { color: var(--verde); text-decoration: underline; }
.valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.valor { padding: 22px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); border-top: 3px solid var(--c, var(--verde-vivo)); }
.valor:nth-child(2) { --c: var(--amarelo); } .valor:nth-child(3) { --c: var(--vermelho); }
.valor p { margin: 0; color: var(--suave); font-size: .95rem; }
.a-confirmar { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: #6B5200; background: var(--amarelo-50); border: 1px dashed #D9C25A; border-radius: 4px; padding: 2px 8px; }

/* ---------- Diálogos e avisos ---------- */
dialog { border: 0; border-radius: 10px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .5); color: var(--texto); }
dialog::backdrop { background: rgba(6, 44, 28, .7); }
.dlg__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 0; }
.dlg__cab h2 { font-size: 1.5rem; margin: 0; }
.dlg__corpo { padding: 16px 24px 26px; }
.dlg__faixa { height: 4px; }
.toast { position: fixed; left: 50%; bottom: 84px; z-index: 400; transform: translate(-50%, 30px); background: var(--tinta); color: #fff; padding: 14px 20px; border-radius: 6px; box-shadow: var(--sombra); display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast .ico { color: var(--amarelo); }
.whats { position: fixed; right: 18px; bottom: 74px; z-index: 80; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #128C4B; color: #fff; box-shadow: var(--sombra); }
.whats .ico { width: 28px; height: 28px; }
.demo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; background: var(--tinta); color: rgba(255, 255, 255, .86); font-size: .82rem; }
.demo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.demo b { color: var(--amarelo); }
.demo button { background: none; border: 0; color: #fff; text-decoration: underline; font-size: .82rem; padding: 8px; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--tinta); color: rgba(255, 255, 255, .76); font-size: .94rem; padding-bottom: 44px; }
.rodape a { text-decoration: none; } .rodape a:hover { color: #fff; text-decoration: underline; }
.rodape__topo { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-block: clamp(44px, 6vw, 72px) 40px; }
.rodape h3 { color: #fff; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 14px; }
.rodape li { margin-bottom: 8px; }
.rodape .brand__txt b, .rodape .brand__txt small { color: #fff; }
.rodape .brand--placa { background: #fff; border-radius: 6px; padding: 8px 12px; display: inline-flex; }
.rodape__contacto { display: grid; gap: 10px; margin-top: 18px; }
.rodape__contacto li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.rodape__contacto .ico { color: var(--amarelo); margin-top: 3px; }
.redes { display: flex; gap: 8px; margin-top: 18px; }
.redes a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #fff; }
.redes a:hover { background: var(--verde); }
/* Colunas de ligações: <details> abertos no computador (o resumo não reage), acordeão no telemóvel */
.rodape__col summary { display: block; list-style: none; pointer-events: none; }
.rodape__col summary::-webkit-details-marker { display: none; }
.rodape__col summary .ico { display: none; }
.rodape__uteis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .9rem; }
.rodape__uteis h3 { margin: 0; }
.rodape__uteis ul { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.rodape__uteis li { margin: 0; }
.rodape__faixa { height: 3px; }
.rodape__faixa i:nth-child(4) { background: #fff; }
.rodape__fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; font-size: .84rem; }
.rodape__fim ul { display: flex; flex-wrap: wrap; gap: 6px 20px; } .rodape__fim li { margin: 0; }

/* ---------- Modo "Poupar dados" e tamanho de letra ---------- */
html.poupar .media img { display: none; }
html.letra-1 { font-size: 112.5%; } html.letra-2 { font-size: 125%; }

/* ---------- Animação de entrada ---------- */
/* Os blocos aparecem logo, sem efeito de entrada, para o scroll ficar sempre fluido. */
.revela { opacity: 1; }

/* ---------- Responsivo ---------- */
@media (max-width: 1279px) {
  .nav, .hdr__acoes .btn { display: none; }
  .burger { display: inline-grid; }
  .hdr__acoes { margin-left: auto; }
  .util__lema { display: none; }
  .subnav { top: 79px; }
}
@media (max-width: 980px) {
  .hero__in, .split, .split--60, .split--40, .split--30, .split--mapa, .pg-hero .wrap, .subscrever .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { width: min(86%, 420px); }
  .atalhos__grid, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .numero:nth-child(3) { border-left: 0; padding-left: 0; }
  .noticia--grande { grid-column: span 2; }
  .rodape__topo { grid-template-columns: 1fr 1fr; }
  .passos--linha, .passos--linha.passos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-hero .media { display: none; }
  .pg-hero .cartao-visual { max-width: 360px; margin: 8px 0 0; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  body { font-size: 1rem; }
  .util__esconder { display: none !important; }
  .brand { gap: 9px; } .brand__emblem { width: 42px; height: 45px; } .brand__txt b { font-size: 1.5rem; } .brand__txt small { font-size: .44rem; letter-spacing: .04em; }
  .hdr__in { min-height: 68px; gap: 10px; } .hdr__acoes { gap: 2px; } .subnav { top: 69px; }
  .sec__cab { flex-direction: column; align-items: flex-start; }
  .g2, .g3, .g4, .valores, .form__2, .beneficios, .filtros { grid-template-columns: minmax(0, 1fr); }
  /* Atalhos compactos em grelha 2 x 2: só ícone e título */
  .atalhos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .atalho { min-height: 0; padding: 16px 14px 16px 16px; gap: 6px; }
  .atalho > span:not(.atalho__ico), .atalho .ico--seta { display: none; }
  .atalho b { font-size: 1rem; }
  .atalho__ico { width: 40px; height: 40px; }
  /* "Quem somos": uma só fotografia, mais baixa */
  .fotos-par .media:nth-child(2) { display: none; }
  .fotos-par .media:first-child { aspect-ratio: 4 / 3; }
  /* Campanhas em faixa horizontal com deslize; o cartão seguinte espreita à direita */
  .grid.rolo { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(50% - 50vw); padding: 4px calc(50vw - 50%) 12px; scroll-padding-inline: calc(50vw - 50%); scrollbar-width: none; }
  .grid.rolo::-webkit-scrollbar { display: none; }
  .rolo > * { scroll-snap-align: start; }
  .conquistas__lista { grid-template-columns: minmax(0, 1fr); gap: 22px; border-top: 0; border-left: 2px solid var(--linha); margin-left: 8px; }
  .conquista { padding: 0 0 0 24px; }
  .conquista::before { left: -10px; top: 1px; }
  .hero__visual { width: min(72%, 280px); margin: 50px auto 56px; }
  .hero__faixa .wrap { gap: 8px; font-size: .88rem; }
  .hero__faixa .wrap > span:first-child { flex-basis: 100%; }
  .hero__faixa .wrap > span + span { padding: 4px 10px; }
  .numeros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .numero { padding: 0 14px; } .numero:nth-child(odd) { padding-left: 0; border-left: 0; }
  .noticia--grande { grid-column: auto; flex-direction: column; }
  .noticia--grande .media { width: 100%; min-height: 0; aspect-ratio: 16 / 10; }
  .noticia--grande h3 { font-size: 1.3rem; }
  .oport, .evento { grid-template-columns: 64px minmax(0, 1fr); }
  .oport > .ico, .oport > .btn, .evento > .btn { display: none; }
  .linha-item { grid-template-columns: minmax(0, 1fr) auto; } .linha-item time, .linha-item .quando { grid-column: 1 / -1; }
  .parceiros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__topo { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 24px; }
  .rodape__topo > div:first-child { margin-bottom: 24px; }
  .rodape__col { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .rodape__col:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .rodape__col summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; pointer-events: auto; cursor: pointer; }
  .rodape__col summary h3 { margin: 0; }
  .rodape__col summary .ico { display: block; color: rgba(255, 255, 255, .7); transition: transform .2s; }
  .rodape__col[open] summary .ico { transform: rotate(180deg); }
  .rodape__col ul { padding-bottom: 14px; }
  .rodape__uteis { border-top: 0; padding-top: 0; }
  .form-linha { flex-direction: column; }
  .passos--linha, .passos--linha.passos--3 { grid-template-columns: minmax(0, 1fr); } .passos--linha .passo { padding-left: 62px; padding-top: 0; }
  .mapa, .mapa__nota { max-width: 290px; margin-inline: auto; }
  .mapa__legenda { justify-content: center; }
  .dir__item { gap: 12px; padding: 12px; }
  .doc { grid-template-columns: 44px minmax(0, 1fr); } .doc > span:last-child { display: none; }
  .whats { bottom: 66px; width: 50px; height: 50px; }
  .hero__chip b { font-size: 1.15rem; } .hero__chip { padding: 9px 12px; }
  .estado { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 6px; }
  .galeria { grid-auto-rows: 130px; }
  .demo .wrap { font-size: .74rem; }
  .subscrever::before { border-top-width: 60px; border-right-width: 60px; } .subscrever::after { border-bottom-width: 60px; border-left-width: 60px; }
  .pg-hero::before { border-top-width: 60px; border-left-width: 60px; } .pg-hero::after { border-bottom-width: 50px; border-left-width: 50px; }
}
@media (max-width: 680px) {
  .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 10px; }
  .util a, .util button { padding: 0 7px; }
}
@media (max-width: 359px) {
  .util { font-size: .76rem; } .util a, .util button { padding: 0 5px; } .util__sep { margin: 0 2px; }
  .brand__txt small { display: none; }
  .wrap { width: min(100% - 28px, var(--max)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero__anel .arco { stroke-dashoffset: 0; }
  .revela { opacity: 1; }
}
@media print {
  .util, .hdr, .subnav, .demo, .whats, .rodape, .subscrever { display: none !important; }
}