/* ============================================================
   Associação Doina Algarve — style.css
   Paleta: azul Doina + dourado GAM + verde GIP + rosa Mud@ki
   ============================================================ */
:root{
  --azul:#1d4f9e;
  --azul-escuro:#132f5e;
  --azul-claro:#2e77c7;
  --dourado:#b99a5e;
  --verde:#2e8b57;
  --rosa:#d81b7a;
  --tinta:#1c2434;
  --cinza:#5b6676;
  --fundo:#f5f8fc;
  --branco:#ffffff;
  --borda:#e3e9f2;
  --sombra:0 10px 30px rgba(19,47,94,.08);
  --raio:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--tinta);background:var(--fundo);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--azul);text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 22px}

/* ---------- Barra de topo ---------- */
.topbar{background:var(--azul-escuro);color:#cfe0f6;font-size:.8rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:34px;gap:12px;flex-wrap:wrap}
.topbar a{color:#cfe0f6}
.topbar .tb-left{display:flex;gap:18px;flex-wrap:wrap}
.lang-switch{display:flex;gap:4px;align-items:center}
.lang-switch button{
  background:transparent;border:1px solid rgba(255,255,255,.25);color:#cfe0f6;
  padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600;cursor:pointer;letter-spacing:.04em;
}
.lang-switch button:hover{background:rgba(255,255,255,.12)}
.lang-switch button.ativo{background:var(--branco);color:var(--azul-escuro);border-color:var(--branco)}

/* ---------- Navegação ---------- */
nav.principal{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--borda)}
nav.principal .container{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px}
.marca{display:flex;align-items:center;gap:12px}
.marca img{height:52px;width:auto}
.menu{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.menu a{
  font-size:.88rem;font-weight:600;color:var(--cinza);padding:9px 13px;border-radius:10px;transition:.18s;
}
.menu a:hover{color:var(--azul);background:#eef4fc}
.menu a.ativo{color:var(--azul);background:#e6effb}
.menu a.destaque{background:var(--azul);color:#fff}
.menu a.destaque:hover{background:var(--azul-escuro)}
.hamburguer{display:none;background:none;border:none;font-size:1.7rem;color:var(--azul-escuro);cursor:pointer;line-height:1}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(140deg,var(--azul-escuro) 0%,var(--azul) 55%,var(--azul-claro) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%);
}
.hero .container{position:relative;z-index:1;padding-top:84px;padding-bottom:84px}
.hero .selo{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:6px 16px;border-radius:999px;font-size:.8rem;font-weight:600;letter-spacing:.05em;margin-bottom:22px}
.hero h1{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.18;font-weight:800;max-width:730px;letter-spacing:-.015em}
.hero p.sub{margin-top:18px;font-size:1.08rem;max-width:640px;color:#dbe8fa}
.hero .acoes{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:12px;font-weight:700;font-size:.95rem;transition:.18s;border:2px solid transparent}
.btn-claro{background:#fff;color:var(--azul-escuro)}
.btn-claro:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.22)}
.btn-contorno{border-color:rgba(255,255,255,.55);color:#fff}
.btn-contorno:hover{background:rgba(255,255,255,.12)}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-escuro);transform:translateY(-2px)}

/* Hero interno (páginas) */
.hero-pagina{padding:64px 0 58px}
.hero-pagina .container{padding-top:0;padding-bottom:0}
.hero-pagina .logo-projeto{height:96px;width:96px;object-fit:contain;background:#fff;border-radius:22px;padding:10px;margin-bottom:20px;box-shadow:var(--sombra)}

/* ---------- Secções ---------- */
section{padding:72px 0}
section.alt{background:var(--branco)}
.cabeca{max-width:680px;margin-bottom:44px}
.cabeca .etiqueta{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);background:#e6effb;padding:5px 14px;border-radius:999px;margin-bottom:14px}
.cabeca h2{font-size:clamp(1.5rem,3vw,2.15rem);font-weight:800;letter-spacing:-.01em;line-height:1.25}
.cabeca p{margin-top:12px;color:var(--cinza)}
.centro{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- Números de impacto ---------- */
.impacto{background:var(--azul-escuro);color:#fff;padding:58px 0}
.grelha-impacto{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;text-align:center}
.numero{font-size:2.6rem;font-weight:800;letter-spacing:-.02em}
.numero span.mais{color:#8db8ee}
.legenda{margin-top:4px;color:#b8cdea;font-size:.9rem}

/* ---------- Cartões ---------- */
.grelha{display:grid;gap:26px}
.grelha-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grelha-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cartao{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);
  padding:30px;box-shadow:var(--sombra);transition:.2s;display:flex;flex-direction:column;
}
.cartao:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(19,47,94,.13)}
.cartao .icone-logo{height:74px;width:74px;object-fit:contain;border-radius:16px;margin-bottom:18px;border:1px solid var(--borda);padding:6px;background:#fff}
.cartao h3{font-size:1.18rem;font-weight:800;margin-bottom:8px}
.cartao .tag{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:700;padding:3px 11px;border-radius:999px;margin-bottom:12px;letter-spacing:.06em;text-transform:uppercase}
.tag-azul{background:#e6effb;color:var(--azul)}
.tag-verde{background:#e4f4ec;color:var(--verde)}
.tag-rosa{background:#fbe4ef;color:var(--rosa)}
.tag-dourado{background:#f5eedd;color:#8a6f38}
.cartao p{color:var(--cinza);font-size:.95rem;flex:1}
.cartao .liga{margin-top:18px;font-weight:700;font-size:.92rem}
.cartao .liga::after{content:" →"}

/* ---------- Listas de serviços ---------- */
.lista-servicos{list-style:none;display:grid;gap:12px}
.lista-servicos li{
  background:var(--branco);border:1px solid var(--borda);border-radius:12px;
  padding:14px 18px 14px 46px;position:relative;color:var(--tinta);font-size:.95rem;
}
.lista-servicos li::before{
  content:"✓";position:absolute;left:16px;top:12px;font-weight:800;color:var(--verde);
}

/* ---------- Duas colunas ---------- */
.duas-colunas{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.duas-colunas .foto{border-radius:var(--raio);box-shadow:var(--sombra);width:100%;object-fit:cover}
@media(max-width:860px){.duas-colunas{grid-template-columns:1fr}}

/* ---------- Linha do tempo / eventos ---------- */
.evento{
  display:grid;grid-template-columns:110px 1fr;gap:22px;background:var(--branco);
  border:1px solid var(--borda);border-radius:var(--raio);padding:26px;box-shadow:var(--sombra);
}
.evento + .evento{margin-top:18px}
.data-caixa{
  background:#e6effb;color:var(--azul-escuro);border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:12px;text-align:center;height:100%;min-height:92px;
}
.data-caixa .dia{font-size:1.6rem;font-weight:800;line-height:1.1}
.data-caixa .mes{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.evento h3{font-size:1.12rem;font-weight:800;margin-bottom:6px}
.evento p{color:var(--cinza);font-size:.94rem}
.evento .meta{margin-top:8px;font-size:.85rem;color:var(--azul);font-weight:600}
@media(max-width:560px){.evento{grid-template-columns:1fr}.data-caixa{min-height:auto;flex-direction:row;gap:8px}}

/* ---------- Parceiros ---------- */
.parceiros{display:flex;flex-wrap:wrap;gap:34px;align-items:center;justify-content:center}
.parceiros img{height:64px;width:auto;object-fit:contain;filter:grayscale(35%);opacity:.85;transition:.2s}
.parceiros img:hover{filter:none;opacity:1}
.parceiros-texto{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.parceiros-texto span{background:var(--branco);border:1px solid var(--borda);border-radius:999px;padding:7px 16px;font-size:.82rem;font-weight:600;color:var(--cinza)}

/* ---------- Destaque apoiar ---------- */
.faixa-apoiar{
  background:linear-gradient(120deg,var(--azul) 0%,var(--azul-claro) 100%);
  border-radius:24px;color:#fff;padding:52px;display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:center;
}
.faixa-apoiar h2{font-size:1.7rem;font-weight:800;line-height:1.3}
.faixa-apoiar p{margin-top:10px;color:#dcE9fa}
@media(max-width:760px){.faixa-apoiar{grid-template-columns:1fr;padding:36px}}

/* ---------- Caixas de informação (contactos, apoiar) ---------- */
.caixa-info{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:28px;box-shadow:var(--sombra)}
.caixa-info h3{font-size:1.05rem;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.caixa-info p,.caixa-info li{color:var(--cinza);font-size:.95rem}
.caixa-info ul{list-style:none}
.caixa-info li{padding:6px 0;border-bottom:1px dashed var(--borda)}
.caixa-info li:last-child{border-bottom:none}
.caixa-info strong{color:var(--tinta)}
.emoji-icone{font-size:1.25rem}

/* ---------- Mapa ---------- */
.mapa iframe{width:100%;height:380px;border:0;border-radius:var(--raio);box-shadow:var(--sombra)}

/* ---------- Rodapé ---------- */
footer{background:var(--azul-escuro);color:#b8cdea;padding:56px 0 30px;margin-top:auto}
footer .grelha-rodape{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h4{color:#fff;font-size:.95rem;font-weight:800;margin-bottom:14px;letter-spacing:.02em}
footer a{color:#b8cdea;font-size:.9rem}
footer a:hover{color:#fff}
footer ul{list-style:none}
footer li{padding:4px 0}
footer .logo-rodape{height:44px;width:auto;border-radius:10px;margin-bottom:14px;background:#fff;padding:4px}
footer p{font-size:.9rem}
.rodape-fim{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:#8aa5cc}
@media(max-width:820px){footer .grelha-rodape{grid-template-columns:1fr}}

/* ---------- Responsivo: menu móvel ---------- */
@media(max-width:920px){
  .hamburguer{display:block}
  .menu{
    display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;padding:14px 22px 22px;box-shadow:0 18px 30px rgba(19,47,94,.14);gap:4px;
  }
  .menu.aberto{display:flex}
  .menu a{padding:12px 14px}
}

/* ---------- Animação de entrada ---------- */
.revela{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.revela.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.revela{opacity:1;transform:none;transition:none}}

/* ============================================================
   GRÁFICOS — paleta validada (validate_palette.js, modo claro, surface #fff)
   Categórica: azul #1d4f9e · verde #2e8b57 · dourado #d19a2e · rosa #d81b7a
   Ordinal azul: #86b6ef → #5598e7 → #2a78d6 → #1d4f9e
   O dourado fica abaixo de 3:1 → todos os gráficos levam rótulos
   diretos visíveis e tabela de dados (canal de recurso obrigatório).
   ============================================================ */
.viz{
  --viz-surface:#ffffff;
  --viz-ink:#1c2434;
  --viz-ink-2:#5b6676;
  --viz-muted:#898781;
  --viz-grid:#e3e9f2;
  --viz-base:#c3c2b7;
  --serie-1:#1d4f9e;
  --serie-2:#2e8b57;
  --serie-3:#d19a2e;
  --serie-4:#d81b7a;
  --ord-1:#86b6ef; --ord-2:#5598e7; --ord-3:#2a78d6; --ord-4:#1d4f9e;
  background:var(--viz-surface);border:1px solid var(--borda);border-radius:var(--raio);
  padding:26px 26px 20px;box-shadow:var(--sombra);
}
.viz h3{font-size:1.02rem;font-weight:800;color:var(--viz-ink);margin-bottom:4px}
.viz .viz-sub{font-size:.85rem;color:var(--viz-ink-2);margin-bottom:20px}
.viz .viz-fonte{font-size:.74rem;color:var(--viz-muted);margin-top:16px}

/* --- barras horizontais --- */
.bar-h{display:grid;grid-template-columns:minmax(84px,230px) 1fr auto;gap:8px 12px;align-items:center}
.bar-h .linha{display:contents}
.bar-h .rot{font-size:.82rem;color:var(--viz-ink-2);text-align:right;line-height:1.25}
.bar-h .pista{position:relative;height:24px;display:flex;align-items:center;cursor:default}
.bar-h .fill{height:18px;border-radius:0 4px 4px 0;background:var(--serie-1);transition:opacity .15s}
.bar-h .pista:hover .fill{opacity:.78}
.bar-h .val{font-size:.82rem;font-weight:700;color:var(--viz-ink);font-variant-numeric:tabular-nums;min-width:44px}
.bar-h .marca100{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--viz-base)}

/* --- colunas --- */
.col-c{position:relative;padding-top:22px}
.col-grade{position:absolute;inset:22px 0 26px 36px;display:flex;flex-direction:column;justify-content:space-between}
.col-grade div{border-top:1px solid var(--viz-grid);height:0}
.col-barras{position:relative;display:flex;align-items:flex-end;gap:2px;height:190px;margin-left:36px}
.col-barras .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;cursor:default}
.col-barras .cap{width:100%;max-width:24px;border-radius:4px 4px 0 0;background:var(--serie-1);transition:opacity .15s}
.col-barras .col:hover .cap{opacity:.78}
.col-eixo{display:flex;gap:2px;border-top:1px solid var(--viz-base);padding-top:7px;margin-left:36px}
.col-eixo span{flex:1;text-align:center;font-size:.72rem;color:var(--viz-muted);font-variant-numeric:tabular-nums}
.col-rot{position:absolute;font-size:.76rem;font-weight:700;color:var(--viz-ink);transform:translate(-50%,-100%);white-space:nowrap}

/* --- barra empilhada (parte-todo) --- */
.pilha{display:flex;gap:2px;height:34px;margin-bottom:16px}
.pilha .seg{border-radius:2px;display:flex;align-items:center;justify-content:center;overflow:visible;transition:opacity .15s;min-width:3px}
.pilha .seg:first-child{border-radius:4px 2px 2px 4px}
.pilha .seg:last-child{border-radius:2px 4px 4px 2px}
.pilha .seg:hover{opacity:.82}
.pilha .seg span{font-size:.78rem;font-weight:700;color:#fff;padding:0 6px;white-space:nowrap}
.legenda{display:flex;flex-wrap:wrap;gap:16px}
.legenda .item{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--viz-ink-2)}
.legenda .chave{width:11px;height:11px;border-radius:3px;flex:none}

/* --- tabela de dados (canal de recurso) --- */
.viz details{margin-top:14px;border-top:1px solid var(--viz-grid);padding-top:12px}
.viz summary{font-size:.78rem;color:var(--azul);cursor:pointer;font-weight:600;list-style:none}
.viz summary::-webkit-details-marker{display:none}
.viz summary::before{content:"▸ ";font-size:.7rem}
.viz details[open] summary::before{content:"▾ "}
.viz table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.8rem}
.viz th,.viz td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--viz-grid);color:var(--viz-ink-2)}
.viz th{font-weight:700;color:var(--viz-ink)}
.viz td:last-child,.viz th:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* --- dica (tooltip) --- */
.viz-dica{
  position:fixed;z-index:999;background:#1c2434;color:#fff;padding:7px 11px;border-radius:8px;
  font-size:.78rem;pointer-events:none;opacity:0;transition:opacity .12s;white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}
.viz-dica.on{opacity:1}
.viz-dica b{font-variant-numeric:tabular-nums}

/* --- mapas --- */
.mapa-viz{height:420px;border-radius:var(--raio);border:1px solid var(--borda);box-shadow:var(--sombra);z-index:1}
.leaflet-container{font:inherit !important;border-radius:var(--raio)}

@media(max-width:560px){
  .bar-h{grid-template-columns:minmax(68px,120px) 1fr auto;gap:8px}
  .bar-h .rot{font-size:.75rem}
  .viz{padding:20px 16px 16px}
}

/* rótulo direto no topo da coluna destacada */
.col-barras .cap-rot{font-size:.76rem;font-weight:700;color:var(--viz-ink);margin-bottom:4px;font-variant-numeric:tabular-nums}
.viz .grelha-viz{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.viz-bloco{margin-bottom:26px}
.viz-bloco:last-child{margin-bottom:0}
.viz-bloco h4{font-size:.9rem;font-weight:700;color:var(--viz-ink);margin-bottom:12px}

/* valores no eixo Y do gráfico de colunas */
.col-grade div{position:relative}
.col-grade div.zero{border-top-color:transparent}
.col-grade div span{position:absolute;left:-36px;top:-9px;width:30px;text-align:right;font-size:.7rem;color:var(--viz-muted);font-variant-numeric:tabular-nums}


/* redes sociais no rodapé */
.redes{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.redes a{
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 15px;
  font-size:.82rem;font-weight:600;transition:.18s;
}
.redes a:hover{background:rgba(255,255,255,.12);color:#fff}

/* marca da meta nas barras (traço vertical sobre a barra) */
.bar-h .marca-meta{position:absolute;top:0;bottom:0;width:0;display:flex;align-items:center}
.bar-h .marca-meta i{
  display:block;width:3px;height:26px;background:var(--viz-ink);border-radius:2px;
  margin-left:-1.5px;box-shadow:0 0 0 2px var(--viz-surface);
}
.legenda .chave-meta{width:3px;height:14px;background:var(--viz-ink);border-radius:2px;flex:none;margin:0 4px}

/* painel de marca do Mud@ki (substitui foto genérica) */
.painel-mudaki{
  background:linear-gradient(140deg,#8e1252 0%,#d81b7a 60%,#f0569e 100%);
  border-radius:var(--raio);padding:44px 34px;text-align:center;color:#fff;box-shadow:var(--sombra);
}
.painel-mudaki img{height:110px;width:auto;margin:0 auto 18px;background:#fff;border-radius:22px;padding:10px}
.painel-mudaki .lema{font-size:1.15rem;font-weight:800;letter-spacing:.02em;margin-bottom:26px}
.painel-nums{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.painel-nums div{display:flex;flex-direction:column}
.painel-nums strong{font-size:1.9rem;font-weight:800;line-height:1.1}
.painel-nums span{font-size:.82rem;color:#ffd9ea}

/* ---------- Formulários (Netlify Forms) ---------- */
.formulario{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);
  padding:32px;box-shadow:var(--sombra);
}
.formulario .campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formulario label{display:flex;flex-direction:column;gap:6px;font-size:.86rem;font-weight:700;color:var(--tinta)}
.formulario label.largo{grid-column:1 / -1}
.formulario input,.formulario select,.formulario textarea{
  font-family:inherit;font-size:.95rem;font-weight:400;color:var(--tinta);
  border:1px solid var(--borda);border-radius:11px;padding:12px 14px;background:#fbfdff;
  transition:border-color .15s,box-shadow .15s;
}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,79,158,.14);background:#fff;
}
.formulario textarea{resize:vertical;min-height:120px}
.formulario .obrigatorio{color:var(--rosa);font-weight:700}
.formulario .nota{font-size:.78rem;color:var(--cinza);margin-top:16px;line-height:1.5}
.formulario button{margin-top:22px;cursor:pointer;border:none;font-family:inherit}
.escondido{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:640px){
  .formulario{padding:24px 18px}
  .formulario .campos{grid-template-columns:1fr}
}

/* página de agradecimento */
.obrigado{text-align:center;max-width:620px;margin:0 auto}
.obrigado .icone{font-size:3.4rem;margin-bottom:18px}

/* nota de rodapé sob a faixa de números de impacto */
.nota-impacto{margin-top:26px;text-align:center;font-size:.82rem;color:#a8c2e3;line-height:1.6}

/* barra oficial de financiamento (Mud@ki E9G) — obrigatória */
.barra-financiamento img{width:100%;max-width:620px;height:auto;margin:0 auto 14px}
.barra-financiamento p{color:var(--cinza);text-align:center;max-width:760px;margin:0 auto}