/* ==========================================================================
   CAMADA MOBILE · Think Tank Geração Agora
   --------------------------------------------------------------------------
   Carregada DEPOIS do components.css. Só atua abaixo de 1024px: o desktop
   fica exatamente igual. Três cortes:
     <= 1023px  hero da página inicial (o mesmo corte do fallback atual)
     <= 1000px  cabeçalho e gaveta (o corte em que a nav passa a menu)
     <=  679px  telemóvel (o corte em que a vitrine "O que fazemos" deixa de
                ser conduzida pelo scroll, ver main.js)
   Tudo sai dos tokens. Os códigos entre parênteses (G1, H3…) remetem para o
   diagnóstico em entregas/prompt-designer-telemovel/ (protótipo aprovado em
   _prototipos-mobile/, 27/09/2026).
   ========================================================================== */


/* Peças que só existem no telemóvel (o mobile.js cria-as; no desktop ficam
   escondidas e o desktop fica igual ao pixel). */
.sumario-m, .topo-m, .orbita__passos, .orbita__centro-rot, .leitor__barra-m { display: none; }


/* ==========================================================================
   1. CABEÇALHO E GAVETA  (G1, G2, G7)
   ========================================================================== */

@media (max-width: 1000px) {
  html { scroll-padding-top: 76px; }

  /* Barra opaca de 60px (era 92px e translúcida, com texto a passar por
     baixo). Esconde-se ao descer e volta ao subir (mobile.js). */
  .nav {
    background: color-mix(in srgb, var(--superficie-0) 94%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--linha);
    transition: transform var(--dur-3) var(--ease-saida),
                background-color var(--dur-3) var(--ease-saida),
                border-color var(--dur-3) var(--ease-saida);
  }
  .nav--escondida { transform: translateY(-100%); }
  .nav__interior { min-height: 60px; padding-block: 8px; gap: var(--sp-4); }
  .nav__logo { display: flex; align-items: center; min-height: 44px; transition: opacity var(--dur-3) var(--ease-saida); }
  .nav__logo img { width: 92px; }                 /* 36px de altura */
  .nav__acoes .tema-btn { display: none; }        /* o tema passa para a gaveta */
  .nav__menu { width: 44px; height: 44px; }

  /* Página inicial: enquanto a barra está por cima do hero (sempre escuro),
     fica transparente e SEM logótipo — a palavra-marca está no próprio hero,
     por isso a marca não aparece duas vezes (H1). */
  body.home .nav.nav--sobre-hero {
    background: transparent; border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.home .nav.nav--sobre-hero .nav__logo { opacity: 0; pointer-events: none; }
  [data-tema="claro"] body.home .nav.nav--sobre-hero .nav__menu { color: #C6C7BE; border-color: #FFFFFF2E; }

  /* --- Gaveta: marca, destinos com a página atual, ações, contactos, tema --- */
  .gaveta {
    display: flex; flex-direction: column; align-content: normal; gap: 0;
    padding: 0 var(--goteira) calc(var(--sp-5) + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .gaveta__topo {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px; padding-block: 8px; flex: none;
  }
  .gaveta .gaveta__logo { display: flex; align-items: center; min-height: 44px; line-height: 0; }
  .gaveta__logo img { width: 92px; }
  .gaveta__logo img.logo--claro { display: none; }
  [data-tema="claro"] .gaveta__logo img.logo--escuro { display: none; }
  [data-tema="claro"] .gaveta__logo img.logo--claro  { display: block; }
  .gaveta__fechar { position: static; }

  .gaveta__nav { display: grid; padding-block: var(--sp-6) var(--sp-6); }
  .gaveta .gaveta__nav a {
    display: flex; align-items: center; gap: var(--sp-4);
    min-height: 58px; padding-block: var(--sp-2);
    font-size: clamp(1.625rem, 7.6vw, 2.25rem); line-height: 1;
    border-bottom: 1px solid var(--linha);
  }
  .gaveta__nav a::before {
    content: ""; flex: none; width: 12px; height: 12px;
    clip-path: var(--losango); background: var(--linha-forte);
    transition: background-color var(--dur-2) var(--ease-saida), transform var(--dur-3) var(--ease-mola);
  }
  .gaveta__nav a[aria-current="page"]::before { background: var(--acento); transform: rotate(90deg) scale(1.2); }

  .gaveta__acoes { display: grid; gap: var(--sp-3); margin-top: auto; }
  .gaveta .gaveta__acoes .btn {
    justify-content: space-between; min-height: 52px;
    font-family: var(--fonte-texto); font-size: var(--fs-base); font-weight: var(--peso-forte);
    text-transform: none; letter-spacing: 0; line-height: 1.3;
  }
  .gaveta .gaveta__acoes .btn--primario,
  .gaveta .gaveta__acoes .btn--primario:hover { color: var(--preto-marca); }
  .gaveta .gaveta__acoes .btn--secundario:hover { color: var(--texto-1); }

  .gaveta__rodape {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--linha);
  }
  .gaveta__redes { display: flex; gap: var(--sp-1); margin-left: calc(var(--sp-3) * -1); }
  .gaveta .gaveta__redes a {
    display: grid; place-items: center; width: 44px; height: 44px;
    color: var(--texto-2); font-size: 0;
  }
  .gaveta .gaveta__redes a:hover { color: var(--acento); }
  .gaveta__tema.tema-btn {
    width: auto; height: 44px; padding-inline: var(--sp-4);
    display: inline-flex; align-items: center; gap: var(--sp-3);
    font-size: var(--fs-sm); font-weight: var(--peso-forte); color: var(--texto-1);
  }
}
@media (min-width: 1001px) { .gaveta { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav, .nav--escondida { transition: none; } }


/* ==========================================================================
   2. HERO DA PÁGINA INICIAL  (H1)
   Ecrã inteiro: o ícone CONSTRÓI-SE ao carregar (linha -> retângulo -> abre
   o losango, só CSS) e o slogan fica na DIAGONAL, com o ícone e a
   palavra-marca como pivô: "Dados que pesam" em cima à esquerda, "Ideias que
   contam" em baixo à direita. Sem prender o scroll.
   Nota: o fallback antigo (components.css) usa !important em opacity e
   transform — por isso as entradas animam `translate` e `filter`, que ele não
   prende.
   ========================================================================== */

@media (max-width: 1023px) {
  html .hero {
    display: grid; grid-template-columns: 1fr;
    grid-template-areas: "a" "." "icone" "marca" "." "b" "cue";
    grid-template-rows: auto minmax(var(--sp-4), 1fr) auto auto minmax(var(--sp-4), 1fr) auto auto;
    align-items: center; justify-items: center; gap: 0;
    min-height: 100vh; min-height: 100svh; height: auto;
    padding: 72px var(--goteira) calc(var(--sp-4) + env(safe-area-inset-bottom));
    text-align: left;
  }
  html .hero .slg {
    font-size: clamp(1.5rem, 7.4vw, 2.25rem); max-width: none; width: 100%;
  }
  html .hero .slg__key { display: inline-block; font-size: 1.5em; line-height: .92; }
  html .hero .slg--a { grid-area: a; text-align: left; }
  html .hero .slg--b { grid-area: b; text-align: right; }
  html .hero .hero__mob {
    grid-area: icone; order: 0;
    height: min(25svh, 196px); width: auto; aspect-ratio: 900 / 1914;
  }
  html .hero .wordmark { grid-area: marca; width: min(46vw, 196px); margin: var(--sp-4) 0 0; }
  html .hero .hero__cue {
    grid-area: cue; display: inline-flex; position: static; transform: none;
    opacity: 1; margin-top: var(--sp-5); min-height: 44px; justify-content: center;
  }
}

/* Entradas da opção A (só com movimento permitido) */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  html .hero__mob .pilot__rect { animation: m-rect 1.05s var(--ease-ambos) .2s both; }
  html .hero__mob .pilot__dia  { animation: m-dia 1.3s var(--ease-saida) .2s both; }
  html .hero .hero__mob { animation: m-levita 3.8s ease-in-out 1.7s infinite; }
  html .hero .wordmark { animation: m-sobe .7s var(--ease-saida) 1.15s both !important; }
  html .hero .slg--a   { animation: m-esq .8s var(--ease-saida) 1.45s both !important; }
  html .hero .slg--b   { animation: m-dir .8s var(--ease-saida) 1.75s both !important; }
  html .hero .hero__cue { animation: m-sobe .6s var(--ease-saida) 2.3s both; }
  html .hero .hero__cue svg { animation: cue-desce 1.9s var(--ease-ambos) 3s infinite; }
}
@keyframes m-rect {
  0%        { clip-path: inset(44% 46%); }
  40%       { clip-path: inset(0 46%); }
  78%, 100% { clip-path: inset(0 0); }
}
@keyframes m-dia   { 0%, 72% { clip-path: inset(50%); } 100% { clip-path: inset(0); } }
@keyframes m-levita { 0%, 100% { translate: 0 -4px; } 38% { translate: 0 5px; } }
@keyframes m-sobe  { from { filter: opacity(0); translate: 0 14px; } }
@keyframes m-esq   { from { filter: opacity(0); translate: -28px 0; } }
@keyframes m-dir   { from { filter: opacity(0); translate: 28px 0; } }

/* Telemóvel na horizontal: a diagonal passa a três colunas */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
  html .hero {
    grid-template-columns: 1fr auto 1fr; column-gap: var(--sp-5);
    grid-template-areas: "a icone ." "a marca b" ". cue .";
    grid-template-rows: 1fr auto auto;
    padding-top: 64px;
  }
  html .hero .slg--a { align-self: start; }
  html .hero .slg--b { align-self: end; }
  html .hero .hero__mob { height: min(44svh, 170px); }
  html .hero .wordmark { width: min(26vw, 170px); }
  html .hero .hero__cue { margin-top: var(--sp-3); }
}

/* ==========================================================================
   3. RITMO, TIPOGRAFIA, TOQUE  (G3, G4, G5, G6)
   ========================================================================== */

@media (max-width: 1000px) {
  /* Banners das páginas interiores: por baixo da barra de 60px */
  .banner { margin-top: 60px; height: clamp(140px, min(54vw, 46svh), 280px); }   /* na horizontal não ocupa o ecrã todo */
  main > section.seccao:first-child { padding-top: calc(60px + var(--sp-7)) !important; }

  /* "Por definir" em linha, a seguir ao texto — nunca por cima (G6) */
  .por-definir::after {
    position: static; display: inline-block; margin-left: var(--sp-2);
    vertical-align: 2px; line-height: 1.4;
  }
}

@media (max-width: 679px) {
  :root {
    --goteira: clamp(1rem, 5.2vw, 1.25rem);            /* 16px a 320, 20px a 390 */
    --sp-seccao: 3.25rem;                               /* 52px (era 64 + folgas) */
    --sp-seccao-larga: 4.5rem;                          /* 72px (era 96) */
    --fs-d1: clamp(2.25rem, 10.4vw, 2.75rem);           /* 36 · 40 · 44 */
    --fs-d2: clamp(1.75rem, 8.2vw, 2.125rem);           /* 28 · 32 · 34 */
    --fs-d3: clamp(1.375rem, 6vw, 1.5rem);              /* 22 · 23 · 24 */
    --fs-lead: clamp(1.0625rem, 4.6vw, 1.125rem);       /* 17 · 18 */
  }

  .seccao__topo { margin-bottom: var(--sp-6); gap: var(--sp-3); }
  .banner + .seccao { padding-top: var(--sp-6) !important; }
  .banner + .seccao h1 { margin-block: var(--sp-3) var(--sp-4) !important; }
  .banner + .seccao .btns { margin-top: var(--sp-5) !important; }

  /* Etiquetas: as longas quebram equilibradas, com o losango pendurado na
     1.ª linha (G5). O desenho vem do base.css (Nohemi, minúsculas normais). */
  .chapeu { text-wrap: balance; }

  /* Botões: a largura toda, empilhados, primário primeiro (J2, H6) */
  .btns { flex-direction: column; align-items: stretch; }
  .btns > .btn { justify-content: space-between; min-height: 52px; font-size: var(--fs-base); }

  /* Links com seta: alvo de 44px (G4) */
  .link-seta, .fazemos__mais { min-height: 44px; }

  .duas-col { gap: var(--sp-6); }
  .grelha-3 { gap: var(--sp-3); }
  .cartao { padding: var(--sp-5); }
}


/* ==========================================================================
   4. PÁGINA INICIAL
   ========================================================================== */

.carrossel-m__pontos { display: none; }   /* só existe no telemóvel */

@media (max-width: 679px) {

  /* --- A lacuna (H2) --- */
  .dados-par { gap: var(--sp-7); }

  /* --- O que fazemos: carrossel horizontal com scroll-snap (H3) ----------
     Ecoa a passagem horizontal do desktop, agora com o gesto do polegar.
     Cartões de ~86% da largura (vê-se a ponta do seguinte), sem avanço
     automático; os 3 losangos acompanham e navegam (mobile.js). */
  .fazemos__topo { margin-bottom: var(--sp-6); }
  .fazemos__track {
    display: flex; gap: var(--sp-3);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--goteira);
    padding-inline: var(--goteira);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .fazemos__track::-webkit-scrollbar { display: none; }
  .fazemos__area {
    flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always;
    display: grid; grid-template-columns: 1fr; align-content: start; gap: var(--sp-5);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    border: 1px solid var(--linha-forte);
    background:
      radial-gradient(120% 90% at 10% 0%, color-mix(in srgb, var(--azul-gradiente) 10%, transparent), transparent 60%),
      radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--verde-marca) 9%, transparent), transparent 60%),
      var(--superficie-0);
  }
  .fazemos__area:nth-child(even) .fazemos__texto { order: 0; }
  .fazemos__los { order: -1; width: min(50vw, 196px); }
  .fazemos__texto { gap: var(--sp-2); max-width: none; }
  .fazemos__titulo { font-size: clamp(1.75rem, 8vw, 2.125rem); }
  .fazemos__desc { font-size: var(--fs-base); color: var(--texto-2); }
  .fazemos__rail {
    display: flex; justify-content: center; gap: var(--sp-1);
    margin-top: var(--sp-3);
  }
  .fazemos__ponto { padding: 16px; }   /* 44px de alvo */

  /* --- Percursos (H4): mantém; menos altura, retorno ao toque --- */
  .percurso { padding-block: var(--sp-4); -webkit-tap-highlight-color: transparent; }
  .percurso__texto { gap: var(--sp-1); }
  .percurso:active { background: var(--superficie-2); }
  .percurso__acao { width: 44px; height: 44px; }

  /* --- Método: órbita compacta (H5, opção a) --------------------------
     Sem rótulos à volta do anel (cruzavam a linha): a fase ativa aparece no
     centro, por baixo do número, e no cartão. Cada losango é um alvo de 44px.
     O cartão tem altura mínima fixa (mobile.js mede a fase mais longa) para
     nunca ficar vazio nem saltar; desliza-se para mudar de fase. */
  .orbita { gap: var(--sp-5); }
  .orbita__palco { width: min(224px, 62vw); }
  .orbita__no { width: 44px; height: 44px; place-items: center; }
  .orbita__no-rot {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .orbita__centro { inset: 24%; }
  .orbita__centro-n { font-size: clamp(2.6rem, 14vw, 3.4rem); }
  .orbita__centro-de { display: none; }
  .orbita__centro-rot {
    display: block; font-size: var(--fs-rotulo); text-transform: uppercase; letter-spacing: var(--ls-rotulo);
    font-weight: var(--peso-forte); color: var(--texto-1); margin-top: var(--sp-1);
  }
  .orbita__detalhe {
    min-height: var(--m-orb-h, 18rem); padding: var(--sp-5); gap: var(--sp-3);
    touch-action: pan-y;
  }
  .orbita__detalhe h3 { font-size: 1.375rem; }
  .orbita__detalhe p { font-size: var(--fs-sm); }
  .orbita__detalhe .orbita__kicker-m {
    font-family: var(--fonte-display); font-weight: var(--peso-display); font-size: 1rem;
    line-height: 1.25; color: var(--acento); font-variant-numeric: tabular-nums;
  }
  .orbita__passos { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
  .orbita__dica { font-size: var(--fs-xs); color: var(--texto-4); }
  .orbita__setas { display: flex; gap: var(--sp-2); }
  .orbita__seta {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: transparent; border: 1px solid var(--linha-forte); color: var(--texto-1); cursor: pointer;
  }
  .orbita__seta:active { background: var(--superficie-2); }

  /* --- Sprint em curso + inquérito (H6) --- */
  .destaque { padding: var(--sp-6) var(--sp-5); gap: var(--sp-3); }
  .destaque .btns { margin-top: var(--sp-2); }

  /* --- Índice de publicações: cartões compactos (H7, D1) ---------------
     Sem esbatimento (o "foco ao centro" é do desktop). Cada cartão é tocável
     por inteiro e abre o leitor. Ícone + tipo numa linha; o estado desce para
     o fundo, ao lado de "Abrir"; descrição a 3 linhas (o texto completo está
     no leitor, tal como a autoria). */
  .indice-wrap { gap: var(--sp-6); }
  .indice { gap: var(--sp-3); }
  .js .indice-item, .indice-item {
    opacity: 1;
    display: grid; grid-template-columns: 26px 1fr auto;
    grid-template-areas: "ico tipo tipo" "tit tit tit" "sub sub sub" "desc desc desc" "est est abrir";
    column-gap: var(--sp-3); row-gap: var(--sp-2); align-items: center;
    padding: var(--sp-5); border: 1px solid var(--linha); background: var(--superficie-0);
    -webkit-tap-highlight-color: transparent;
  }
  .seccao:not(.seccao--alt) .indice-item { background: var(--superficie-1); }
  .indice-item:last-child { border-bottom: 1px solid var(--linha); }
  .indice-item:active { background: var(--superficie-2); }
  .indice-corpo, .indice-chips, .indice-meta { display: contents; }
  .indice-icone { grid-area: ico; width: 26px; margin: 0; color: var(--acento); }
  .indice-item .chip { font-size: var(--fs-rotulo); letter-spacing: .1em; white-space: nowrap; }
  .indice-chips .chip:not(.chip--estado) { grid-area: tipo; justify-self: start; }
  .indice-item-titulo { grid-area: tit; margin-top: var(--sp-2); font-size: 1.25rem; }
  .indice-item-sub { grid-area: sub; margin: 0; }
  .indice-item-desc {
    grid-area: desc; font-size: var(--fs-sm); color: var(--texto-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .indice-meta > span:not(.indice-abrir) { display: none; }
  .indice-chips .chip--estado {
    grid-area: est; justify-self: start; border: 0; padding: 0; gap: var(--sp-2);
    font-size: var(--fs-xs); margin-top: var(--sp-2);
  }
  .indice-chips .chip--estado::before {
    content: ""; width: 7px; height: 7px; background: currentColor; clip-path: var(--losango);
  }
  .indice-abrir {
    grid-area: abrir; min-height: 44px; margin-top: var(--sp-2);
    font-size: var(--fs-sm); color: var(--acento);
  }
  /* Na Início o índice é uma MONTRA (leva ao repositório): passa a carrossel,
     como "O que fazemos". Na página Investigação continua lista vertical. */
  #produzimos .indice {
    display: flex; gap: var(--sp-3);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--goteira) * -1); padding-inline: var(--goteira);
    scroll-padding-inline: var(--goteira); scrollbar-width: none;
  }
  #produzimos .indice::-webkit-scrollbar { display: none; }
  #produzimos .indice-item {
    flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always;
    grid-template-rows: auto auto auto 1fr auto; align-items: start;
  }
  #produzimos .indice-item-desc { -webkit-line-clamp: 4; }
  .carrossel-m__pontos { display: flex; justify-content: center; gap: var(--sp-1); margin-top: calc(var(--sp-3) * -1); }
  .carrossel-m__pontos .fazemos__ponto { padding: 16px; }
  .indice-cta--fim { opacity: 1 !important; transform: none !important; width: 100%; justify-content: space-between; min-height: 52px; }
  .indice-suave { min-height: 64px; }

  /* --- CTA final (H8) --- */
  .cta__interior { gap: var(--sp-5); justify-items: stretch; }
  .cta h2 { font-size: clamp(2.25rem, 11vw, 3rem); }
  .cta__beneficios { display: grid; gap: var(--sp-3); }
  .btn-mega {
    width: 100%; justify-content: space-between;
    padding: var(--sp-5) var(--sp-5); font-size: 1.25rem;
    -webkit-tap-highlight-color: transparent;
  }
  .btn-mega:active { color: var(--preto-marca); border-color: transparent; }
  .btn-mega:active::before { transform: translateY(0); }
}


/* ==========================================================================
   5. JOVENS
   ========================================================================== */

@media (max-width: 679px) {
  /* Ferramentas (J1): no telemóvel não há cartão que vira. Mostra tudo de uma
     vez: ícone + nome, resumo, barra e estado. */
  .ferramentas { gap: var(--sp-3); }
  .ferr {
    min-height: 0; cursor: default;
    display: grid; grid-template-columns: 44px 1fr;
    grid-template-areas: "ico nome" "resumo resumo" "barra barra" "estado estado";
    column-gap: var(--sp-4); row-gap: var(--sp-3); align-items: center;
    padding: var(--sp-5); border: 1px solid var(--linha); background: var(--superficie-1);
  }
  .ferr__interior, .ferr__face { display: contents; }
  .ferr .ferr__interior { transform: none !important; min-height: 0; }
  .ferr .ferr__face { opacity: 1; visibility: visible; transition: none; }
  .ferr__icone { grid-area: ico; width: 44px; height: 44px; }
  .ferr__nome { grid-area: nome; font-size: 1.125rem; align-self: center; }
  .ferr__resumo { grid-area: resumo; font-size: var(--fs-sm); color: var(--texto-2); }
  .ferr__barra { grid-area: barra; }
  .ferr__verso .ferr__estado { grid-area: estado; }
  .ferr__frente .ferr__estado, .ferr__virar { display: none; }

  .beneficios { gap: var(--sp-5); }
  .eixo__lista { gap: var(--sp-6); }
}


/* ==========================================================================
   6. INVESTIGAÇÃO E POLÍTICAS
   ========================================================================== */

@media (max-width: 679px) {
  /* Mapa + números lado a lado: o mapa cresce e os números deixam de estar
     apertados em 3 colunas (D1, D2). "O que medimos" desce por baixo. */
  .impacto {
    grid-template-columns: minmax(0, 54%) minmax(0, 1fr);
    grid-template-areas: "mapa alvos" "tit tit" "lista lista";
    gap: var(--sp-5) var(--sp-4); align-items: center;
  }
  .impacto__mapa { grid-area: mapa; gap: var(--sp-3); }
  .impacto__mapa img { width: 100%; }
  .impacto__mapa figcaption { font-size: var(--fs-xs); }
  .impacto__ind { display: contents; }
  .impacto__titulo { grid-area: tit; margin-top: var(--sp-3); }
  .impacto__lista { grid-area: lista; }
  .impacto__alvos {
    grid-area: alvos; grid-template-columns: 1fr; gap: var(--sp-5);
    margin: 0; padding: 0; border: 0; align-self: center;
  }
  .impacto__alvos div { padding-left: var(--sp-3); border-left: 2px solid var(--linha-forte); }
  .impacto__alvos b { font-size: clamp(1.75rem, 8.4vw, 2.25rem); }
  .impacto__alvos span { font-size: var(--fs-xs); line-height: 1.35; }
  .impacto__cta { margin-top: var(--sp-7); padding: var(--sp-5); }
  .impacto__cta .btn { width: 100%; justify-content: space-between; }

  /* Leituras externas: cartões mais compactos */
  .externos { gap: var(--sp-3); }
  .externo-card { min-height: 0; padding: var(--sp-5); -webkit-tap-highlight-color: transparent; }
  .externo-card:active { background: var(--superficie-2); }
  .externo-card__abrir { min-height: 44px; }
}


/* ==========================================================================
   7. ORGANIZAÇÕES
   ========================================================================== */

/* A CALHA roda e passa a EIXO: a mesma barra da marca, agora na lateral, com
   as caixas penduradas nos nós por um fio (O1). Corte de 720px porque é aí
   que a grelha da calha passa a 1 coluna. */
@media (max-width: 719px) {
  /* mesma geometria do .eixo no telemóvel: barra em 6px, 14px de largura,
     22px de folga; o losango é o recorte da barra e o fio liga-o à caixa */
  .calha { padding-top: 0; padding-left: 42px; }
  .calha__barra {
    left: 6px; right: auto; top: -14px; bottom: 0; width: 14px; height: auto;
    background: linear-gradient(180deg, var(--verde-gradiente), var(--azul-gradiente));
  }
  .calha__grelha { background: none; border: 0; gap: var(--sp-3); }
  .calha__caixa { border: 1px solid var(--linha); padding: var(--sp-5); }
  .calha__caixa::before { top: 24px; left: -37px; }
  .calha__caixa::after { top: 30px; left: -23px; width: 22px; height: 2px; }
}
@media (max-width: 679px) {
  .ativ-card__fig { padding: var(--sp-5); }
  .ativ-card__corpo { padding: var(--sp-5); }
}


/* ==========================================================================
   8. CONTACTOS E PRIVACIDADE
   ========================================================================== */

@media (max-width: 679px) {
  .contacto-linha { min-height: 64px; padding-block: var(--sp-3); }
  .cartao p > a[data-mail], .cartao p > a[data-tel] { display: inline-flex; align-items: center; min-height: 44px; }

  /* Logótipos para descarregar: grelha de 2 (C1) */
  .grelha-3:has(> a.cartao[download]) { grid-template-columns: 1fr 1fr; }
  .grelha-3 > a.cartao[download] { padding: var(--sp-3); gap: var(--sp-2); }
  .grelha-3 > a.cartao[download] > div { padding: var(--sp-4) !important; min-height: 96px; }
  .grelha-3 > a.cartao[download] img { width: 100% !important; max-width: 130px; }
  .grelha-3 > a.cartao[download] img[src*="icone"] { width: 32px !important; }
  .grelha-3 > a.cartao[download] h4 { font-size: 1rem; }
  .grelha-3 > a.cartao[download] .link-seta { min-height: 32px; font-size: var(--fs-xs); }

  /* Privacidade: índice das secções no topo + voltar ao topo (P1) */
  .sumario-m { display: block; margin-bottom: var(--sp-7); border: 1px solid var(--linha); background: var(--superficie-1); padding: var(--sp-5); }
  .sumario-m ol { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; }
  .sumario-m a {
    display: flex; align-items: center; min-height: 44px;
    color: var(--texto-1); text-decoration: none; border-top: 1px solid var(--linha);
    font-size: var(--fs-sm); font-weight: var(--peso-medio);
  }
  .topo-m {
    position: fixed; right: var(--goteira); bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); z-index: var(--z-elevado);
    width: 48px; height: 48px; display: grid; place-items: center;
    background: var(--superficie-2); border: 1px solid var(--linha-forte); color: var(--texto-1);
    opacity: 0; pointer-events: none; translate: 0 8px;
    transition: opacity var(--dur-3) var(--ease-saida), translate var(--dur-3) var(--ease-saida);
  }
  .topo-m[data-visivel] { opacity: 1; pointer-events: auto; translate: 0 0; }
}


/* ==========================================================================
   9. RODAPÉ EM ACORDEÃO  (H9)
   Sem JS fica tudo aberto (o mobile.js é que fecha e liga os botões).
   ========================================================================== */

/* No desktop o botão do título tem de parecer o título de sempre */
.rodape__cab {
  background: none; border: 0; padding: 0; margin: 0; cursor: default;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.rodape__cab-los { display: none; }

@media (max-width: 679px) {
  .rodape { padding-block: var(--sp-7) calc(var(--sp-4) + env(safe-area-inset-bottom)); }
  .rodape__topo { grid-template-columns: 1fr; gap: 0; margin-bottom: var(--sp-5); }
  .rodape__marca { padding-bottom: var(--sp-5); }
  .rodape__marca img { width: 124px; margin-bottom: var(--sp-3); }
  .rodape__grupo { border-top: 1px solid var(--linha); }
  .rodape__grupo:last-child { border-bottom: 1px solid var(--linha); }
  .rodape__grupo h4 { margin: 0; }
  .rodape__cab {
    width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between;
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--texto-4);
    font: inherit; font-size: var(--fs-rotulo); font-weight: var(--peso-forte);
    letter-spacing: var(--ls-rotulo); text-transform: uppercase;
  }
  .rodape__cab-los {
    display: block; width: 10px; height: 10px; clip-path: var(--losango);
    border: 0; background: var(--linha-forte);
    transition: background-color var(--dur-2) var(--ease-saida), transform var(--dur-3) var(--ease-mola);
  }
  .rodape__cab[aria-expanded="true"] { color: var(--texto-1); }
  .rodape__cab[aria-expanded="true"] .rodape__cab-los { background: var(--acento); transform: rotate(90deg) scale(1.2); }
  .rodape__grupo ul { gap: 0; padding-bottom: var(--sp-3); }
  .rodape__grupo[data-fechado] ul { display: none; }
  .rodape ul a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-base); }
  .rodape__fundo { flex-direction: column; gap: 0; padding-top: var(--sp-3); }
  .rodape__fundo a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* ==========================================================================
   10. LEITOR DE PUBLICAÇÕES  (L1)
   Painel de ecrã inteiro que sobe de baixo, com barra de topo fixa (tipo +
   fechar), capa baixa, título ANTES da frase marcante e ações presas ao fundo
   quando as há.
   ========================================================================== */

@media (max-width: 679px) {
  .leitor { padding: 0; place-items: end stretch; }
  .leitor__fundo { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .leitor__cartao {
    width: 100%; height: 100vh; height: 100dvh; max-height: none;
    border: 0; display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(100%);
  }
  .leitor[data-aberto="true"] .leitor__cartao { transform: none; }
  .leitor__barra-m {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    min-height: 60px; padding: 8px var(--goteira);
    border-bottom: 1px solid var(--linha); background: var(--superficie-1);
  }
  .leitor__x { position: static; width: 44px; height: 44px; flex: none; }
  .leitor__conteudo { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .leitor__capa { min-height: 0; height: 168px; }
  .leitor__corpo { padding: var(--sp-5) var(--goteira) calc(var(--sp-6) + env(safe-area-inset-bottom)); gap: var(--sp-3); }
  .leitor__corpo > .leitor__chips   { order: 1; }
  .leitor__corpo > .leitor__titulo  { order: 2; font-size: 1.625rem; }
  .leitor__corpo > .leitor__sub     { order: 3; margin: 0; font-size: var(--fs-base); }
  .leitor__corpo > .leitor__marcante{ order: 4; font-size: 1.25rem; margin-top: var(--sp-2); padding-left: var(--sp-4); border-left: 2px solid var(--acento); }
  .leitor__corpo > .leitor__desc    { order: 5; }
  .leitor__corpo > .leitor__ficha   { order: 6; }
  .leitor__corpo > .leitor__acoes   { order: 7; }
  .leitor__barra-m .leitor__chips .chip:not(:first-child) { display: none; }
  .leitor__acoes:has(.btn) {
    position: sticky; bottom: 0; z-index: 1;
    margin-inline: calc(var(--goteira) * -1); margin-bottom: calc((var(--sp-6) + env(safe-area-inset-bottom)) * -1);
    padding: var(--sp-3) var(--goteira) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--superficie-1); border-top: 1px solid var(--linha);
    display: grid; gap: var(--sp-2);
  }
  .leitor__acoes .btn { justify-content: space-between; min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .topo-m { transition: none; } }