/* Cores da APMAP: azul 💙 e laranja 🧡 */
:root {
  --azul: #1f4e9c;
  --azul-claro: #e8eff9;
  --laranja: #f28c28;
  --laranja-claro: #fff1e3;
  --texto: #1d2433;
  --texto-suave: #5b6475;
  --fundo: #f6f7fb;
  --cartao: #ffffff;
  --borda: #e3e6ee;
  --mostra-sol: none;
  --mostra-lua: block;
  color-scheme: light;
}
/* Modo escuro: segue o sistema operativo, a não ser que o visitante escolha "claro" no botão */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --azul: #7fa8ea;
    --azul-claro: #1b2638;
    --laranja: #f5a55a;
    --laranja-claro: #2e2319;
    --texto: #e9ecf2;
    --texto-suave: #a3abba;
    --fundo: #10141c;
    --cartao: #19202b;
    --borda: #2a3342;
    --mostra-sol: block;
    --mostra-lua: none;
    color-scheme: dark;
  }
}
/* Modo escuro escolhido no botão */
:root[data-tema="escuro"] {
  --azul: #7fa8ea;
  --azul-claro: #1b2638;
  --laranja: #f5a55a;
  --laranja-claro: #2e2319;
  --texto: #e9ecf2;
  --texto-suave: #a3abba;
  --fundo: #10141c;
  --cartao: #19202b;
  --borda: #2a3342;
  --mostra-sol: block;
  --mostra-lua: none;
  color-scheme: dark;
}

/* Botão sol / lua */
.tema {
  position: fixed; top: 14px; right: 14px; z-index: 10;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--cartao); color: var(--azul);
  border: 1px solid var(--borda);
  box-shadow: 0 2px 8px rgb(0 0 0 / .12);
  transition: transform .15s, color .15s;
}
.tema:hover, .tema:focus-visible { color: var(--laranja); transform: rotate(-15deg); }
.tema svg { width: 22px; height: 22px; fill: currentColor; }
.tema .sol { display: var(--mostra-sol); }
.tema .lua { display: var(--mostra-lua); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background:
    radial-gradient(circle at 0 0, var(--azul-claro), transparent 45%),
    radial-gradient(circle at 100% 0, var(--laranja-claro), transparent 40%),
    var(--fundo);
  background-attachment: fixed;
  line-height: 1.45;
}
main { max-width: 620px; margin: 0 auto; padding: 40px 16px 32px; }

header { text-align: center; margin-bottom: 28px; }
.logo {
  width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover; background: #fff;
  border: 3px solid var(--cartao);
  box-shadow: 0 0 0 3px var(--laranja), 0 6px 20px rgb(0 0 0 / .12);
}
.logo-texto {
  display: inline-grid; place-items: center;
  background: var(--azul); color: var(--cartao); font-weight: 800; font-size: 20px;
}
h1 { margin: 14px 0 0; font-size: 28px; color: var(--azul); letter-spacing: .5px; }
.subtitulo { margin: 2px 0 0; font-weight: 600; color: var(--texto-suave); }
.descricao { margin: 12px auto 0; max-width: 46ch; }

.contactos { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.icone {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: var(--cartao);
  transition: transform .15s, background .15s;
}
.icone:hover, .icone:focus-visible { background: var(--laranja); transform: translateY(-2px); }
.icone svg { width: 22px; height: 22px; fill: currentColor; }

section { margin-top: 26px; }
h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--texto-suave); text-align: center; margin: 0 0 12px;
}
h2::before, h2::after { content: " — "; color: var(--laranja); }

.cartao {
  display: flex; align-items: center; gap: 14px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
  color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
a.cartao:hover, a.cartao:focus-visible {
  transform: translateY(-2px);
  border-color: var(--azul);
  box-shadow: 0 6px 18px rgb(0 0 0 / .08);
}
.corpo { flex: 1; min-width: 0; }

/* Ícone à esquerda do botão */
.ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--azul-claro);
}
.ico-emoji { font-size: 24px; line-height: 1; }
.ico-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ico-svg { background: var(--azul); color: var(--cartao); }
.ico-svg svg { width: 24px; height: 24px; fill: currentColor; }
.ico-whatsapp { background: #25d366; color: #fff; }
.ico-instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af); color: #fff; }
.ico-facebook { background: #1877f2; color: #fff; }
.destaque .ico { background: var(--cartao); }
.titulo { display: block; font-weight: 650; font-size: 16px; }
.texto { color: var(--texto-suave); font-size: 14.5px; margin-top: 4px; }
.texto p { margin: 0 0 4px; }
.texto p:last-child { margin: 0; }
.seta { font-size: 26px; line-height: 1; color: var(--laranja); }

.destaque {
  border: 2px solid var(--laranja);
  background: linear-gradient(135deg, var(--laranja-claro), var(--cartao) 70%);
}

.com-imagem { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.com-imagem img { width: 100%; max-height: 320px; object-fit: cover; display: block; }
.com-imagem .corpo { padding: 14px 18px 16px; }
.com-imagem .seta { display: none; }

.sem-link { border-style: dashed; }

footer { text-align: center; color: var(--texto-suave); font-size: 13px; margin-top: 36px; }

/* ---------- Ecrãs largos (desktop / tablet) ---------- */
@media (min-width: 900px) {
  main { max-width: 1080px; padding-top: 56px; }
  header { max-width: 620px; margin: 0 auto 32px; }

  .cartoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .cartoes .cartao { margin-bottom: 0; }

  /* Blocos com imagens (eventos): 3 por linha, mesma altura */
  .grelha-imagens { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
  .grelha-imagens > .cartao { flex: 0 1 calc((100% - 36px) / 3); min-width: 280px; }
  .grelha-imagens .com-imagem img { aspect-ratio: 16 / 9; height: auto; max-height: none; }

  /* Um bloco com um só cartão não fica perdido à esquerda */
  .cartoes:not(.grelha-imagens):has(> :only-child) { grid-template-columns: minmax(0, 620px); justify-content: center; }
}