/* ==========================================================================
   Almacode — versão B
   Mesma estrutura da versão A. Só muda a pele.

   Regra de cor: o amarelo aparece PURO e em doses pequenas — no botão
   principal, num traço, num quadrado preto. Nunca diluído em creme, nunca
   como texto em azeitona. Creme + caqui é o que datava a versão anterior.

   Sem sombras. A estrutura faz-se com linhas de 1px e espaço.
   ========================================================================== */

:root {
  --branco:      #FFFFFF;
  --pedra:       #F5F5F3;
  --pedra-2:     #ECECE8;
  --linha:       #E4E3DE;
  --linha-forte: #C9C7C0;

  --tinta:       #0F0F0E;
  --texto:       #45443F;
  --suave:       #57564F;

  --amarelo:     #E6CB17;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --t--1: .875rem;
  --t-0:  1.075rem;
  --t-1:  1.15rem;
  --t-2:  1.4rem;
  --t-3:  clamp(1.6rem, 1.25rem + 1.4vw, 2.15rem);
  --t-4:  clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
  --t-5:  clamp(2.6rem, 1.7rem + 3.6vw, 4.35rem);

  --goteira: clamp(1.25rem, 4vw, 2.5rem);
  --seccao:  clamp(4rem, 7.5vw, 6.75rem);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
}
h3 { font-weight: 700; letter-spacing: -.022em; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
li { list-style: none; }
strong { font-weight: 600; color: var(--tinta); }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 3px; }

.saltar {
  position: absolute; left: -9999px; background: var(--amarelo); color: var(--tinta);
  padding: .8rem 1.25rem; z-index: 300; font-weight: 700;
}
.saltar:focus { left: 0; top: 0; }

/* --- Estrutura ---------------------------------------------------------- */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--goteira); }
.seccao { padding-block: var(--seccao); }
.seccao--cinza { background: var(--pedra); }
.pilha { display: flex; flex-direction: column; }
.g-sm { gap: .85rem; } .g-md { gap: 1.5rem; } .g-lg { gap: 2.25rem; }
.suave { color: var(--suave); }
.centro { text-align: center; margin-inline: auto; }

/* --- Cabeçalho ---------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 100;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
}
.topo__inner { display: flex; align-items: center; gap: 2.75rem; min-height: 74px; }
.marca { display: inline-flex; align-items: center; flex-shrink: 0; }
.marca img { height: 20px; width: auto; }

.menu { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.8rem); margin-right: auto; }
.menu a {
  font-size: .96rem; font-weight: 500; text-decoration: none; color: var(--texto);
  padding: .45rem 0; position: relative; transition: color .15s;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--amarelo); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.menu a:hover { color: var(--tinta); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--tinta); font-weight: 600; }

@media (max-width: 980px) {
  .topo__inner { flex-wrap: wrap; gap: .4rem 1.25rem; padding-block: .8rem; min-height: 0; }
  .marca { flex: 1 1 auto; }
  .menu { order: 3; flex: 1 0 100%; margin-right: 0; overflow-x: auto; scrollbar-width: none; gap: 1.2rem; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; font-size: .9rem; }
}

/* --- Botões — sem sombra, cantos discretos ------------------------------ */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: "Source Sans 3", sans-serif; font-size: .98rem; font-weight: 700; line-height: 1;
  padding: .95rem 1.5rem; border: 1px solid transparent; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.botao--principal { background: var(--amarelo); color: var(--tinta); }
.botao--principal:hover { background: var(--tinta); color: var(--branco); }
.botao--escuro { background: var(--tinta); color: #fff; }
.botao--escuro:hover { background: #2E2E2A; }
.botao--claro { background: transparent; color: var(--tinta); border-color: var(--linha-forte); }
.botao--claro:hover { border-color: var(--tinta); background: var(--tinta); color: var(--branco); }
.botoes { display: flex; flex-wrap: wrap; gap: .7rem; }

.ligacao {
  display: inline-flex; align-items: center; gap: .45rem; width: fit-content;
  font-weight: 700; font-size: .95rem; color: var(--tinta); text-decoration: none;
  padding-bottom: .3rem; border-bottom: 2px solid var(--amarelo);
  transition: gap .15s;
}
.ligacao svg { width: 16px; height: 16px; color: var(--tinta); }
.ligacao:hover { gap: .75rem; }

/* --- Selo — branco com um ponto amarelo, sem creme ---------------------- */
.selo {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  background: var(--branco); border: 1px solid var(--linha-forte);
  color: var(--tinta); border-radius: 999px;
  padding: .45rem .95rem .45rem .8rem; font-size: .84rem; font-weight: 600;
}
.selo svg { width: 16px; height: 16px; color: var(--tinta); }

/* --- Herói -------------------------------------------------------------- */
.heroi { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.heroi__grelha { display: grid; gap: clamp(2.25rem, 4.5vw, 4rem); align-items: center; }
@media (min-width: 1000px) { .heroi__grelha { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.heroi h1 { font-size: var(--t-5); letter-spacing: -.04em; }
.heroi__lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); color: var(--suave); max-width: 46ch; }

.heroi__media { position: relative; }
.heroi__media img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--linha); }

/* Cartão sobreposto: quadrado preto com o ícone a amarelo — um dos poucos
   sítios onde o amarelo aparece, e aparece puro. */
.flutua {
  position: absolute; left: -16px; bottom: -20px;
  background: var(--branco); border: 1px solid var(--linha-forte); border-radius: var(--r);
  padding: .95rem 1.1rem;
  display: flex; align-items: center; gap: .8rem; max-width: 15.5rem;
}
.flutua__icone {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px;
  background: var(--tinta); color: var(--amarelo);
  display: grid; place-items: center;
}
.flutua__icone svg { width: 19px; height: 19px; }
.flutua b { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem; font-weight: 800; color: var(--tinta); line-height: 1.2; letter-spacing: -.02em; }
.flutua span { font-size: .82rem; color: var(--suave); }
@media (max-width: 560px) { .flutua { position: static; margin-top: 1rem; max-width: none; } }

/* --- Faixa de confiança ------------------------------------------------- */
.confianca { border-block: 1px solid var(--linha); background: var(--pedra); padding-block: 1.5rem; }
.confianca__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem; justify-content: space-between; }
.confianca p { font-size: 1rem; color: var(--suave); font-weight: 500; }
.produtos { display: flex; flex-wrap: wrap; gap: .5rem; }
.produto {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 999px;
  padding: .45rem .95rem; font-size: .88rem; font-weight: 600; color: var(--tinta);
}

/* --- Cabeçalho de secção ------------------------------------------------ */
.cabeca { max-width: 46rem; margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem); display: grid; gap: 1rem; }
.cabeca--centro { text-align: center; margin-inline: auto; }
.cabeca h2 { font-size: var(--t-4); }
.cabeca p { font-size: 1.1rem; color: var(--suave); }

/* Etiqueta: texto preto com um traço amarelo por baixo. Sem azeitona. */
.etiqueta {
  font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta); width: fit-content;
  padding-bottom: .35rem; border-bottom: 3px solid var(--amarelo);
}
.cabeca--centro .etiqueta { margin-inline: auto; }

/* --- Cartões — sem sombra ----------------------------------------------- */
.grelha { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .grelha--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grelha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 680px) { .grelha--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cartao {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r);
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  display: flex; flex-direction: column; gap: .8rem;
  transition: border-color .18s;
}
.cartao:hover { border-color: var(--tinta); }
.cartao h3 { font-size: var(--t-2); }
.cartao p { color: var(--suave); font-size: 1rem; }
.cartao .ligacao { margin-top: auto; padding-top: 1.1rem; }
.seccao--cinza .cartao { background: var(--branco); }

/* Ícone sem caixa colorida. É a diferença entre 2021 e agora. */
.icone { color: var(--tinta); margin-bottom: .25rem; }
.icone svg { width: 34px; height: 34px; stroke-width: 1.5; }

/* Exemplo concreto: cinzento neutro com um traço amarelo. Nada de creme. */
.exemplo {
  background: var(--pedra); border-left: 3px solid var(--amarelo);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .85rem 1rem; font-size: .93rem; color: var(--texto);
}
.exemplo b { font-weight: 700; color: var(--tinta); }
.seccao--cinza .exemplo { background: var(--pedra-2); }

/* --- Números — grandes, com divisórias em vez de caixas ----------------- */
.numeros { display: grid; gap: 0; border-top: 1px solid var(--linha-forte); }
@media (min-width: 620px) { .numeros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numero { padding: 2rem 1.5rem 2rem 0; display: grid; gap: .4rem; border-bottom: 1px solid var(--linha); }
@media (min-width: 940px) { .numero { border-bottom: 0; } }
.numero b {
  font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem);
  font-weight: 800; color: var(--tinta); line-height: 1; letter-spacing: -.045em;
}
.numero span { font-size: .93rem; color: var(--suave); max-width: 24ch; }

/* --- Emparelhado -------------------------------------------------------- */
.par { display: grid; gap: clamp(2rem, 4vw, 3.75rem); align-items: center; }
@media (min-width: 960px) {
  .par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .par--trocado > :first-child { order: 2; }
}
.par img { border-radius: var(--r-lg); border: 1px solid var(--linha); width: 100%; }

/* --- Lista com visto ---------------------------------------------------- */
.vistos { display: grid; gap: 1.1rem; }
.vistos li { display: grid; grid-template-columns: 22px 1fr; gap: .85rem; align-items: start; }
.vistos svg { width: 22px; height: 22px; color: var(--tinta); margin-top: .16rem; }
.vistos b { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: var(--tinta); font-size: 1.02rem; margin-bottom: .15rem; letter-spacing: -.015em; }
.vistos p { font-size: 1rem; color: var(--suave); }

/* --- Processo ----------------------------------------------------------- */
.processo { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .processo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .processo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.passo {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r);
  padding: 1.75rem 1.6rem; display: grid; gap: .6rem;
}
.passo__n {
  width: 36px; height: 36px; border-radius: 999px; background: var(--tinta); color: var(--amarelo);
  display: grid; place-items: center; font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800; font-size: .95rem; margin-bottom: .35rem;
}
.passo h3 { font-size: 1.15rem; }
.passo p { font-size: 1rem; color: var(--suave); }

/* --- Parceiros ---------------------------------------------------------- */
.parceiros {
  display: grid; gap: 0; border: 1px solid var(--linha); border-radius: var(--r);
  overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .parceiros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.parceiro {
  background: var(--branco); min-height: 124px; padding: 1.5rem 1.25rem;
  display: grid; place-items: center;
  border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}
@media (min-width: 860px) { .parceiro { border-bottom: 0; } }
.parceiro:last-child { border-right: 0; }
.parceiro img { height: 36px; width: auto; max-width: 80%; object-fit: contain; }
.parceiro--texto { display: grid; gap: .25rem; place-items: center; text-align: center; }
.parceiro--texto span { font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
.parceiro--texto b {
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.3rem; font-weight: 800;
  color: var(--tinta); letter-spacing: -.03em;
}

/* --- Perguntas frequentes ----------------------------------------------- */
.faq { display: grid; gap: 0; max-width: 48rem; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); padding: 1.35rem .25rem; }
.faq summary {
  cursor: pointer; list-style: none; font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700; color: var(--tinta); font-size: 1.08rem; letter-spacing: -.018em;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--tinta); line-height: 1; flex-shrink: 0;
}
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: .85rem; color: var(--suave); font-size: 1rem; max-width: 62ch; }

/* --- Apelo escuro ------------------------------------------------------- */
.apelo { background: var(--tinta); color: #C9C8C2; border-radius: var(--r-lg); padding: clamp(2.25rem, 4.5vw, 3.5rem); }
.apelo__grelha { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 860px) { .apelo__grelha { grid-template-columns: minmax(0, 1.6fr) auto; } }
.apelo h2 { color: #fff; font-size: var(--t-3); max-width: 22ch; margin-bottom: .7rem; }
.apelo p { font-size: 1.02rem; max-width: 44ch; }

/* --- Contacto ----------------------------------------------------------- */
.contacto { display: grid; gap: clamp(2.25rem, 4vw, 4rem); align-items: start; }
@media (min-width: 960px) { .contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.contacto__lado { display: grid; gap: 1.15rem; align-content: start; }
.contacto__lado h2 { font-size: var(--t-4); }
.contacto__lado > p { font-size: 1.08rem; max-width: 42ch; }
.contacto__lado .info { margin-top: 1.1rem; }
.forma {
  display: grid; gap: 1rem; background: var(--pedra);
  border: 1px solid var(--linha); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.25rem);
}
.forma .botao { justify-self: start; margin-top: .35rem; }
.dupla { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.campo { display: grid; gap: .38rem; }
.campo label { font-size: .89rem; font-weight: 700; color: var(--tinta); }
.campo input, .campo textarea {
  font: inherit; font-size: 1rem; color: var(--texto);
  background: var(--branco); border: 1px solid var(--linha-forte); border-radius: var(--r-sm);
  padding: .82rem .9rem; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo textarea:focus { border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(230,203,23,.35); outline: none; }
.campo textarea { min-height: 132px; resize: vertical; }

.info { display: grid; gap: 1.7rem; }
.info__item { display: grid; grid-template-columns: 40px 1fr; gap: .95rem; align-items: start; }
.info__icone { width: 40px; height: 40px; border-radius: 10px; background: var(--tinta); color: var(--amarelo); display: grid; place-items: center; }
.info__icone svg { width: 19px; height: 19px; }
.info b { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: var(--tinta); margin-bottom: .15rem; letter-spacing: -.015em; }
.info p, .info a { font-size: 1rem; color: var(--suave); }
.info a { color: var(--tinta); text-decoration: none; font-weight: 700; border-bottom: 2px solid var(--amarelo); }

/* --- Rodapé ------------------------------------------------------------- */
.rodape { background: var(--tinta); color: #96958E; padding-block: clamp(3rem, 6vw, 4.25rem) 1.75rem; }
.rodape__grelha { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid #262622; }
@media (min-width: 780px) { .rodape__grelha { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.rodape__marca { display: grid; gap: 1rem; max-width: 22rem; }
.rodape__marca img { height: 22px; width: auto; }
.rodape__marca p { font-size: .93rem; color: #86857E; }
.rodape h4 { font-size: .82rem; font-weight: 700; color: #fff; margin-bottom: .95rem; letter-spacing: .05em; text-transform: uppercase; }
.rodape ul { display: grid; gap: .58rem; }
.rodape a { color: #B3B2AB; text-decoration: none; font-size: .95rem; transition: color .15s; }
.rodape a:hover { color: var(--amarelo); }
.rodape__fim { padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .86rem; color: #78776F; }

/* --- Herói das páginas internas ----------------------------------------- */
.heroi--interior { padding-block: clamp(2.75rem, 5vw, 4.25rem) clamp(2.25rem, 4.5vw, 3.5rem); }
.heroi--interior h1 { font-size: var(--t-4); }
.heroi--interior .heroi__media img { border-radius: var(--r-lg); border: 1px solid var(--linha); }

/* O logótipo da Ar é mais alto do que largo: com a mesma altura máxima dos
   outros ficava opticamente mais pequeno. */
/* Tamanho ótico igual: logos altos sobem, logos muito largos descem */
.parceiro img.alto { height: 44px; }
.parceiro img.largo { height: 26px; }


/* ==========================================================================
   Camada dinâmica — Almacode versão B
   Regra: nada se mexe sozinho em ciclo. O movimento responde ao que a pessoa
   faz (scroll, clique, escolha) e há um único momento orquestrado: os números.
   ========================================================================== */
:root { interpolate-size: allow-keywords; }
main [id] { scroll-margin-top: 84px; }
@media (max-width: 980px) { main [id] { scroll-margin-top: 100px; } }

/* Cabeçalho compacta ao fazer scroll + barra de leitura amarela de 2px */
.topo__inner { transition: min-height .2s ease; }
.topo--compacto .topo__inner { min-height: 62px; }
.topo--compacto .marca img { height: 22px; }
.marca img { transition: height .2s ease; }
.leitura {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--amarelo); transform-origin: left; transform: scaleX(0);
  pointer-events: none;
}

/* Troca de página: entrada curta, só quando se muda de página */
.pagina.entra { animation: entra .28s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Cartões com ligação: o cartão inteiro é clicável e a seta avança */
.cartao:has(.ligacao) { position: relative; cursor: pointer; }
.cartao .ligacao::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.cartao:hover .ligacao { gap: .75rem; }
.cartao:has(.ligacao:focus-visible) { border-color: var(--tinta); }
.cartao .ligacao:focus-visible { outline: none; }
.cartao .ligacao:focus-visible::after { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* Números: largura fixa dos algarismos para não saltarem durante a contagem */
.numero b { font-variant-numeric: tabular-nums; }

/* Perguntas frequentes: abrir e fechar com altura animada (onde o browser suporta) */
.faq details::details-content {
  height: 0; overflow: clip;
  transition: height .25s ease, content-visibility .25s allow-discrete;
}
.faq details[open]::details-content { height: auto; }
.faq summary::after { transition: transform .2s ease; }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq summary:hover { text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Escolha da linha Cegid PHC */
.escolha { display: grid; gap: .8rem; margin-bottom: 1.75rem; }
.escolha__pergunta { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: var(--tinta); font-size: 1.05rem; letter-spacing: -.015em; }
.opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcao {
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--tinta);
  background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 999px;
  padding: .6rem 1.05rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.opcao:hover { border-color: var(--tinta); }
.opcao[aria-pressed="true"] { background: var(--tinta); color: var(--branco); border-color: var(--tinta); }
.linhas .cartao { transition: border-color .18s, opacity .25s; }
.linhas.filtrado .cartao { opacity: .45; }
.linhas.filtrado .cartao.indicado { opacity: 1; border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.indicado__marca { display: none; }
.linhas .cartao { position: relative; }
.linhas.filtrado .indicado .indicado__marca {
  display: inline-flex; width: fit-content; position: absolute;
  top: clamp(1.6rem, 2.6vw, 2.1rem); right: clamp(1.6rem, 2.6vw, 2.1rem); align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700; color: var(--tinta);
  padding-bottom: .2rem; border-bottom: 3px solid var(--amarelo);
}

/* Formulário: assunto e validação */
.assuntos { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.assuntos legend { font-size: .89rem; font-weight: 700; color: var(--tinta); padding: 0; margin-bottom: .5rem; }
.assuntos .opcoes { gap: .4rem; }
.assuntos .opcao { font-size: .9rem; padding: .5rem .9rem; }
.campo__erro { font-size: .86rem; color: #9B2C1F; min-height: 0; }
.campo__erro:empty { display: none; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #9B2C1F; }
.forma__estado { font-size: .92rem; padding: .8rem 1rem; border-left: 3px solid var(--amarelo); background: var(--branco); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--tinta); }
.forma__estado[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pagina.entra { animation: none; }
  .leitura { display: none; }
}

/* ==========================================================================
   Nível 2 — movimento visível, mas sempre uma só vez (nada em ciclo)
   ========================================================================== */
/* O herói aparece logo, sem animação de entrada (nunca fica invisível) */
@keyframes sobe { to { opacity: 1; transform: none; } }
@keyframes assenta { to { opacity: 1; transform: none; } }

/* Revelar ao fazer scroll, em cascata dentro de cada grupo */
.mov .revelar { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--atraso, 0s); }
.mov .revelar.visivel { opacity: 1; transform: none; }
.mov .par > img.revelar { transform: scale(1.05); }
.mov .par > img.revelar.visivel { transform: none; }

/* Traço amarelo das etiquetas desenha-se quando o título aparece */
.mov .cabeca .etiqueta, .mov .pilha > .etiqueta { border-bottom-color: transparent; background: linear-gradient(var(--amarelo), var(--amarelo)) left bottom / 0 3px no-repeat; transition: background-size .6s ease .25s; }
.mov .visivel .etiqueta, .mov .etiqueta.visivel { background-size: 100% 3px; }

/* Cartões levantam ao passar o rato (sem sombra — só linha e deslocação) */
.cartao, .passo { transition: border-color .18s, transform .25s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1); }
.mov .cartao.visivel:hover, .mov .passo.visivel:hover { transform: translateY(-5px); border-color: var(--tinta); }
.cartao:hover .icone svg { transform: translateY(-2px); }
.icone svg { transition: transform .25s ease; }

/* Processo: linha amarela que liga os passos e se desenha de uma ponta à outra */
@media (min-width: 1040px) {
  .processo { position: relative; }
  .processo::before {
    content: ""; position: absolute; left: 3rem; right: 3rem; top: calc(1.75rem + 18px); height: 2px;
    background: var(--amarelo); transform-origin: left; transform: scaleX(0);
    transition: transform 1.2s cubic-bezier(.6,0,.2,1) .2s; z-index: 0;
  }
  .processo.visivel::before { transform: scaleX(1); }
  .passo { position: relative; z-index: 1; }
}
html:not(.mov) .processo::before { transform: scaleX(1); }

/* Parceiros: logótipos a cinzento, cor ao passar */
.parceiro img { filter: grayscale(1); opacity: .7; transition: filter .25s, opacity .25s; }
.parceiro:hover img { filter: none; opacity: 1; }

/* Botão principal: seta implícita — o botão desliza ligeiramente */
.botao { transition: background .15s, border-color .15s, color .15s, transform .15s; }
.botao:active { transform: translateY(1px); }

/* Logótipo mais pequeno no cabeçalho */
.marca img { height: 20px; }
.topo--compacto .marca img { height: 18px; }
@media (max-width: 980px) { .marca img, .topo--compacto .marca img { height: 17px; } }

/* ==========================================================================
   Notícias
   Mesma pele: linhas de 1px, amarelo só em traços, sem sombras.
   ========================================================================== */

/* Faixa de novidade, logo abaixo do cabeçalho (não fica presa ao topo) */
.faixa { background: var(--pedra); border-bottom: 1px solid var(--linha); }
.faixa[hidden] { display: none; }
.faixa__inner {
  display: flex; align-items: center; gap: .9rem; min-height: 44px; padding-block: .55rem;
  font-size: .92rem;
}
.faixa__selo {
  flex-shrink: 0; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--amarelo); background: var(--tinta); border-radius: 999px; padding: .28rem .65rem;
}
.faixa__data { flex-shrink: 0; color: var(--suave); }
.faixa a {
  min-width: 0; color: var(--tinta); font-weight: 600; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; gap: .45rem;
}
.faixa a span { overflow: hidden; text-overflow: ellipsis; border-bottom: 2px solid transparent; transition: border-color .15s; }
.faixa a:hover span { border-bottom-color: var(--amarelo); }
.faixa a svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .15s; }
.faixa a:hover svg { transform: translateX(3px); }
@media (max-width: 620px) { .faixa__data { display: none; } .faixa__inner { font-size: .88rem; gap: .65rem; } }

/* Meta: categoria · data */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; font-size: .84rem; color: var(--suave); }
.meta__cat { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .74rem; color: var(--tinta); }
.meta__cat::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--amarelo); margin-left: .7rem; vertical-align: middle; }

/* Cartões de notícia (reaproveitam .cartao) */
.noticia h3 { font-size: 1.28rem; letter-spacing: -.022em; }
.noticia p { font-size: 1rem; }
.seccao--linha { border-top: 1px solid var(--linha); }
.cabeca--linha { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; max-width: none; }
.cabeca--linha > div { display: grid; gap: 1rem; max-width: 46rem; }

/* Lista de notícias: linhas editoriais com a data à esquerda */
.filtros { margin-bottom: 1.5rem; }
.lista-noticias { border-top: 1px solid var(--linha-forte); }
.item-noticia {
  display: grid; gap: .5rem 2.5rem; padding: 1.9rem 0; border-bottom: 1px solid var(--linha);
  position: relative;
}
.item-noticia[hidden] { display: none; }
@media (min-width: 820px) { .item-noticia { grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: start; } }
.item-noticia time { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: var(--tinta); font-size: .98rem; letter-spacing: -.01em; padding-top: .15rem; }
.item-noticia__corpo { display: grid; gap: .55rem; max-width: 44rem; }
.item-noticia h2 { font-size: 1.45rem; letter-spacing: -.025em; }
.item-noticia h2 a { text-decoration: none; }
.item-noticia h2 a::after { content: ""; position: absolute; inset: 0; }
.item-noticia p { color: var(--suave); }
.item-noticia__seta { display: none; }
@media (min-width: 820px) {
  .item-noticia__seta { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--linha-forte); border-radius: 999px; color: var(--tinta); transition: background .15s, color .15s, border-color .15s, transform .2s; }
  .item-noticia__seta svg { width: 17px; height: 17px; }
  .item-noticia:hover .item-noticia__seta { background: var(--amarelo); border-color: var(--amarelo); transform: translateX(4px); }
}
.item-noticia:hover h2 a { text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lista-vazia { padding: 2rem 0; color: var(--suave); }

/* Artigo */
.artigo { padding-block: clamp(2.5rem, 5vw, 4rem) var(--seccao); }
.artigo__inner { max-width: 46rem; margin-inline: auto; }
.migalhas { font-size: .9rem; color: var(--suave); margin-bottom: 1.4rem; }
.migalhas a { color: var(--tinta); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--amarelo); }
.artigo h1 { font-size: var(--t-4); letter-spacing: -.035em; margin: .9rem 0 1.1rem; }
.artigo__lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); color: var(--suave); padding-bottom: 2rem; border-bottom: 1px solid var(--linha); }

.prosa { padding-top: 2rem; display: grid; gap: 1.15rem; font-size: 1.08rem; line-height: 1.7; }
.prosa h2 { font-size: var(--t-2); margin-top: 1.1rem; letter-spacing: -.025em; }
.prosa h3 { font-size: 1.15rem; margin-top: .5rem; }
.prosa ul, .prosa ol { display: grid; gap: .55rem; }
.prosa ul li { position: relative; padding-left: 1.4rem; }
.prosa ul li::before { content: ""; position: absolute; left: .1rem; top: .68em; width: 7px; height: 7px; background: var(--amarelo); }
.prosa ol { counter-reset: n; }
.prosa ol li { position: relative; padding-left: 2rem; counter-increment: n; }
.prosa ol li::before { content: counter(n); position: absolute; left: 0; top: .15em; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--tinta); color: var(--amarelo); font: 800 .78rem/1.4rem "Plus Jakarta Sans", sans-serif; text-align: center; }
.prosa a { color: var(--tinta); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--amarelo); }
.prosa a:hover { background: rgba(230,203,23,.18); }
.prosa blockquote { margin: 0; background: var(--pedra); border-left: 3px solid var(--amarelo); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1rem 1.2rem; font-size: 1rem; color: var(--texto); }
.prosa blockquote p + p { margin-top: .6rem; }

.fontes { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); display: grid; gap: .6rem; }
.fontes h2 { font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.fontes ul { display: grid; gap: .4rem; }
.fontes a { font-size: .93rem; color: var(--suave); text-decoration: none; }
.fontes a:hover { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--amarelo); }

.partilha { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .92rem; color: var(--suave); }
.partilha a, .partilha button { font: inherit; font-size: .9rem; font-weight: 600; color: var(--tinta); background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 999px; padding: .45rem .95rem; cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s; }
.partilha a:hover, .partilha button:hover { border-color: var(--tinta); }

/* Etiqueta dentro de um herói: o traço desenha-se logo ao abrir */
.mov .heroi .pilha > .etiqueta { animation: traco .6s ease .55s forwards; }
@keyframes traco { to { background-size: 100% 3px; } }

/* A escolha da linha PHC tem de vencer a regra de revelação */
.mov .linhas.filtrado .cartao.revelar.visivel { opacity: .45; }
.mov .linhas.filtrado .cartao.revelar.visivel.indicado { opacity: 1; }

/* ==========================================================================
   Menu em telemóvel: logótipo à esquerda, botão "Menu" à direita.
   A lista de páginas abre por baixo, dentro do cabeçalho.
   ========================================================================== */
.menu-botao { display: none; }
@media (max-width: 720px) {
  .topo__inner { padding-block: .65rem; gap: 0 1rem; }
  .menu-botao {
    display: inline-flex; align-items: center; gap: .45rem;
    font: 600 .92rem/1 "Source Sans 3", system-ui, sans-serif; color: var(--tinta);
    background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-sm);
    padding: .55rem .75rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .menu-botao:hover { border-color: var(--tinta); }
  .menu-botao svg { width: 18px; height: 18px; }
  .menu-botao path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .menu-botao .fechar, .menu-botao[aria-expanded="true"] .abrir { display: none; }
  .menu-botao[aria-expanded="true"] .fechar { display: inline; }

  .menu {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    overflow: visible; margin-top: .65rem; border-top: 1px solid var(--linha);
  }
  .topo--aberto .menu { display: flex; }
  .menu a {
    font-size: 1.05rem; white-space: normal; padding: .9rem 0 .9rem 1.1rem;
    border-bottom: 1px solid var(--linha);
  }
  .menu a:last-child { border-bottom: 0; padding-bottom: .35rem; }
  /* a página atual leva o quadrado amarelo do logótipo, em vez do sublinhado */
  .menu a::after {
    left: 0; right: auto; top: 50%; bottom: auto; width: 7px; height: 7px; margin-top: -3.5px;
    transform: scale(0); transition: none;
  }
  .menu a:last-child::after { margin-top: -.5px; }
  .menu a:hover::after { transform: scale(0); }
  .menu a[aria-current="page"]::after { transform: scale(1); }
  .menu a[aria-current="page"] { font-weight: 700; }
}

/* Entre o telemóvel e o ecrã largo (janelas estreitas no computador, tablets):
   logótipo e menu na mesma linha. */
@media (min-width: 721px) and (max-width: 980px) {
  .topo__inner { flex-wrap: nowrap; gap: 1.1rem; padding-block: 0; min-height: 62px; }
  .marca { flex: 0 0 auto; }
  .marca img, .topo--compacto .marca img { height: 17px; }
  .menu { order: 0; flex: 0 1 auto; margin-right: auto; overflow: visible; gap: clamp(.6rem, 1.7vw, 1.2rem); }
  .menu a { font-size: .86rem; }
  main [id] { scroll-margin-top: 78px; }
}

/* CTA no fim das notícias: mais destaque */
.apelo--destaque { border-top: 6px solid var(--amarelo); }
.apelo--destaque .botao--principal { font-size: 1.05rem; padding-inline: 1.6rem; }

/* RSS discreto na lista de notícias */
.rss { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--suave); text-decoration: none; }
.rss svg { width: 16px; height: 16px; }
.rss:hover { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--amarelo); }

/* Impressão: tudo visível, sem animações */
@media print {
  .revelar, .mov .revelar, .heroi *, .forma { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .faixa, .menu-botao { display: none !important; }
}