/* =====================================================================
   v3-patch.css — correções de 19-08-2026 (email "website SAFEFOREST.AI -
   correções"). Carregado DEPOIS de style.css / hero-tweaks.css em todas as
   páginas: só sobrepõe o que mudou, os ficheiros originais ficam intactos.
   Secções:
     1. (movido para hero-tweaks.css §5b) mira 3px; chama esquerda, pulsante.
     2. HERO — logótipo LEITEK fixo (não desaparece com o scroll).
     3. HOME — subtítulo da secção "terrenos"; enquadramento das fotos novas.
     4. RODAPÉ — bloco "Projetos co-financiados" (PRR / Lisboa 2020 /
        Portugal 2020 / UE) com links para as fichas de projeto + comunicação
        de avaliação de fornecedores (obrigatório; igual ao site da LEITEK).
   ===================================================================== */

/* ---------- 1. HERO — mira (cantos 3px) e chama (esquerda, 11 %, pulsante) ----------
   Movido para o próprio hero-tweaks.css (§5b) em 19-08-2026 para a posição da
   chama não depender da ordem/latência de dois ficheiros CSS. Nada aqui. */

/* ---------- 2. HERO — logótipo LEITEK sempre visível ---------- */
/* ÚNICA alteração: position fixed → fica colado ao canto inferior direito do
   ECRÃ enquanto se faz scroll. Aspeto, tamanho e posição são os originais
   (hero-tweaks.css §12). No topo da página coincide com o canto da fotografia
   porque o hero ocupa 100svh. Abaixo da navbar e do menu móvel. */
.hero__leitek {
  position: fixed;
  z-index: 9;
}
/* menu móvel aberto (.navbar__nav.is-open, ver main.js) — não tapar o menu */
body:has(.navbar__nav.is-open) .hero__leitek { display: none; }

/* ---------- 3. HOME — secção "terrenos" ---------- */
.stats-uses__head .section__title { max-width: 30ch; }
.stats-uses__sub {
  margin-top: 1rem;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.55;
}
/* fotos novas: a faixa tem 104px; ajustar o recorte para o motivo principal */
.uses__grid .card__bg--forests   { background-position: 35% 55%; }  /* torre à esquerda, serra ao centro */
.uses__grid .card__bg--condos    { background-position: 50% 38%; }  /* pinhal + lago/golfe, mar no topo (Gemini) */
.uses__grid .card__bg--warehouse { background-position: 50% 45%; }  /* corredor + estantes (Gemini) */

/* ---------- 3b. HOME — International experience: texto centrado na VERTICAL
   com a caixa do vídeo (as "caixas" Portugal/Grécia/Madeira saíram do HTML) */
@media (min-width: 900px) {
  .exp-cols { align-items: center; }
}

/* ---------- 4. RODAPÉ — projetos co-financiados ---------- */
.footer__cofin {
  border-top: 1px solid rgba(207, 210, 189, 0.22);
  padding-block: 1.9rem 2rem;
}
.footer__cofin-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
}
.footer__cofin-title {
  margin: 0;
  font-family: var(--font-mono, inherit);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cfd2bd;
}
/* sem painel claro (2026-08-21, a pedido): os logótipos (PNG transparentes)
   assentam diretamente no verde-escuro do rodapé, como o logo da LEITEK. */
.footer__cofin-logos {
  --cofin-h: clamp(26px, 3.2vw, 44px);      /* altura comum a todos os logótipos */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem 1.6rem;
  width: 100%;
  max-width: 1040px;
}
.footer__cofin-logos a {
  display: block;
  line-height: 0;
  border-radius: 6px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.footer__cofin-logos a:first-child { flex-basis: 100%; text-align: center; }  /* faixa PRR sozinha, centrada, na 1.ª linha */
.footer__cofin-logos a:hover,
.footer__cofin-logos a:focus-visible { transform: translateY(-1px); opacity: 0.9; }
.footer__cofin-logos img {
  height: var(--cofin-h);
  width: auto;
  max-width: 100%;
  display: inline-block;
}
.footer__cofin-links {
  margin: 0;
  font-size: 0.86rem;
}
.footer__cofin-links a {
  color: #cfd2bd;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__cofin-links a:hover { color: #fff; }
@media (max-width: 639px) {
  .footer__cofin-logos { --cofin-h: clamp(22px, 6.5vw, 30px); gap: 0.8rem 1.1rem; }
}

/* ---------- 5. HERO — animações SEMPRE ligadas (também com "reduzir movimento") ----------
   Em telemóveis Android, "Remover animações", a escala de animação desligada
   (opções de programador) ou o modo de poupança de bateria fazem o Chrome
   reportar prefers-reduced-motion: reduce — e o hero-tweaks.css desligava então
   o pan da foto, a respiração da mira e o pulso da chama. A pedido, o hero
   mantém essas três animações (são suaves e pequenas); o resto do site continua
   a respeitar a preferência (reveal, contadores, scroll suave). Para voltar ao
   comportamento anterior basta apagar este bloco. */
@media (prefers-reduced-motion: reduce) {
  .hero__bg {
    object-position: 50% 0%;
    transform: scale(1.2) translateY(7%);
    animation: hero-sweep 7s ease-in-out infinite alternate;
  }
  .hero__track {
    transform: scale(1.2) translateY(7%);
    animation: hero-sweep 7s ease-in-out infinite alternate;
  }
  .hero__det { animation: det-breathe 3.2s ease-in-out infinite; }
  .hero__det::after { animation: det-flame 1.3s ease-in-out infinite; }

  /* retrato (telemóvel): mesma geometria/animação do hero-tweaks.css §14 */
  @media (max-aspect-ratio: 1/1) {
    .hero__bg,
    .hero__track {
      transform: scale(var(--hero-sx), 1.06) translateY(0);
      animation: hero-sweep-portrait 7s ease-in-out infinite alternate;
    }
    .hero__bg { object-position: var(--hero-pos); }
    /* chama com a escala inversa (não achatada) — ver hero-tweaks.css §14 */
    .hero__det::after { animation-name: det-flame-portrait; }
  }
}

/* ---------- 2026-08-25 · pedidos ---------- */
/* a) Slogan "Saving the World, Bit by Bit, Grid by Grid" fica SEMPRE visível
   ao lado do logótipo, também com a navbar em modo scroll (banda branca):
   passa a tinta escura e perde o halo. Anula o recolher de style.css. */
@media (min-width: 760px) {
  .navbar.is-scrolled .brand__slogan {
    opacity: 1;
    max-width: 15rem;
    margin-left: 0.2rem;
    padding-left: 0.85rem;
    border-left-color: var(--line-strong);
    color: var(--ink-2);
    text-shadow: none;
  }
}
/* b) Rodapé: sem as duas linhas que delimitavam "Co-financed projects". */
.footer__cofin { border-top: 0; }
.footer__bar   { border-top: 0; }

/* ---------- 6. RODAPÉ (2026-09-11) — 3 colunas; Follow por baixo de Explore ----------
   O logótipo do rodapé (logo-footer.png, 893×163, altura fixa 74 px → 405 px de
   largura) ficava ESMAGADO quando a 1.ª coluna (2fr de 4 colunas) era mais
   estreita do que isso (img{max-width:100%} + altura fixa = deformação).
   Solução: Explore e Follow passam a partilhar a 3.ª coluna (.footer__stack,
   Follow por baixo), o que liberta espaço para a coluna do logótipo; e o
   logótipo passa a escalar PROPORCIONALMENTE (largura limitada, altura auto). */
.footer .brand__logo {
  height: auto;
  width: 100%;
  max-width: 405px;                 /* = 893 × (74 / 163): o tamanho de sempre em desktop */
}
@media (max-width: 899px) {
  .footer .brand__logo { max-width: 318px; }   /* = 58 px de altura, como antes */
}
.footer__stack .footer__col + .footer__col { margin-top: 2.2rem; }
@media (min-width: 900px) {
  .footer__inner { grid-template-columns: minmax(0, 2.3fr) minmax(15rem, 1.5fr) minmax(0, 1fr); gap: 3rem; }
}