/* ============================================================
   ECHOO NATURE FEST — folha de estilos

   O site é CLARO, com um gradiente de dia a atravessar a página.
   A excepção é o topo, que é escuro de propósito: é o único sítio
   onde o amarelo #FDCD66 do logótipo se lê, e onde o halo do blob
   não se transforma numa mancha suja.

   O amarelo vem do ficheiro da designer, não de interpretação —
   `echoo fotos/logotipo/echoo-nature-fest-2026.svg`.
   ============================================================ */

:root {
  color-scheme: light;

  /* ══════════════════════════════════════════════════════════════
     A PALETA DE 2024/25 — as três cores da identidade, tiradas dos
     próprios ficheiros da marca em site/img (logo-info-manga.png e
     logo-info-turquesa.png). Não são interpretação: são as cores que
     lá estão.
     ══════════════════════════════════════════════════════════════ */
  /* O AMARELO. Durante algum tempo o site usou #FFCC00, tirado do site de
     2025, mais saturado do que o do logótipo. Deixou de fazer sentido quando
     chegou o SVG da designer: o ficheiro da marca é #FDCD66, e ter dois
     amarelos a 1,02:1 um do outro lê-se como um erro, não como uma escolha.
     Ganha o ficheiro — é ele que vai para cartazes e redes.

     E o rosa tem um trabalho definido no site de 2025: escreve a tradução
     inglesa. O português vem em amarelo, o inglês a seguir em rosa —
     «Experiências Gastronómicas / Gastronomic Experiences». */
  --manga:   #FDCD66;   /* o amarelo do ficheiro do logótipo */
  --rosa:    #FFCC99;   /* o rosa claro de 2025 — a cor da tradução */

  /* O ROSA FORTE. É o topo do fundo do site de 2025, que é literalmente
     `linear-gradient(180deg, #C23D68 0%, #D8A24B 100%)` — framboesa em
     cima, ouro em baixo.

     Não se copia a rampa inteira porque ela não segura texto nenhum: o
     amarelo deles sobre o ouro dá 1,51:1, e não existe cor que passe nas
     duas pontas (o creme cai a 2,25 no ouro, a tinta a 2,51 na framboesa).
     Traz-se a framboesa para onde ela funciona: blocos com texto claro por
     cima — na barra dá 4,96:1. */
  --rosa-forte: #C23D68;
  --menta:   #A0D0B0;   /* o verde-água da segunda versão do logótipo */
  --malva:   #887880;   /* o neutro, o que escreve «FEST '24» */

  /* --- papel e tinta --- */
  --papel:    #FFFDF6;
  --cartao:   #FFFFFF;
  --cartao-2: #FDF6E6;
  --rule:     #E6DCC6;

  /* A tinta é o malva escurecido: fica na família da marca em vez de
     ser um cinzento emprestado. Medida sobre a rampa toda, no pior
     ponto (o manga puro): 8,11 / 5,29 / 4,91. */
  --tinta:   #3A3036;
  --tinta-2: #574B53;
  --tinta-3: #5E4F58;

  /* o gradiente do botão: as duas cores da marca, ponta a ponta */
  --grad-quente: linear-gradient(120deg, #FDCD66 0%, #FFD24D 54%, #FFCC99 100%);

  /* ══════════════════════════════════════════════════════════════
     O GRADIENTE — um dia claro no Chão das Feiteiras. Sobe do creme da
     manhã ao manga a pino (onde vive a open call), desce pela menta da
     laurissilva e volta ao creme.

     REGRA que manda em tudo o resto: nenhuma cor da marca serve para
     TEXTO sobre claro. O manga sobre creme dá 1,35:1 e a menta 1,45:1
     — ilegíveis. Servem para BLOCOS inteiros, com tinta escura por
     cima, e aí dão 8:1 ou mais. É por isso que neste site a cor
     aparece em painéis e a letra é sempre escura.
     ══════════════════════════════════════════════════════════════ */
  --grad-pagina: linear-gradient(180deg,
      #FFF6F0  0%,
      #FFE8D8  8%,
      #FFCC99  17%,   /* o rosa de 2025, a primeira luz */
      #FFD49A  26%,
      #FFDC7A  35%,
      #FDCD66  44%,   /* o amarelo de 2025, a pino */
      #FFD84D  53%,
      #F2DE9C  62%,
      #DCE4BE  71%,
      #C6DFCE  80%,   /* a menta da laurissilva */
      #DCEBE0  88%,
      #F2F7F0  94%,
      #FFFDF6  100%);

  /* --- tipos --- */
  --f-disp: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Karla", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* --- ritmo --- */
  --measure: 64ch;
  --wide: 1180px;
  /* A ESCALA DE ESPACOS. Estes numeros comandam o ar todo do site — os
     intervalos entre blocos, entre paragrafos, dentro dos cartoes.

     Estiveram uma vez em 36/58/88/128 e o site lia-se como se estivesse
     sempre com zoom: a 80% no browser ficava bem, a 100% ficava grande.
     Desceram em duas voltas ate aqui. Se algum dia voltar a parecer
     esticado, e aqui que se mexe — e mexe-se nos numeros todos ao mesmo
     tempo, porque mexer num so desequilibra o ritmo da pagina.

     O CORPO DE TEXTO NAO ACOMPANHA. Esta nos 16px e ai fica: abaixo disso
     deixa de se ler bem, e um site publico nao pode pedir isso a ninguem.
     A sensacao de "menos zoom" vem dos titulos e do ar, nao do corpo. */
  --s1: 8px;  --s2: 11px; --s3: 16px;
  --s4: 27px; --s5: 43px; --s6: 65px; --s7: 90px;

  /* ══════════════════════════════════════════════════════════════
     CAMADA 2 — FUNÇÕES. Os componentes só falam com estes nomes.
     ══════════════════════════════════════════════════════════════ */

  /* O logótipo NÃO pode ser manga sobre claro: dá 1,00:1 no manga da
     rampa, desaparece. Vai a tinta, como o «FEST '24» do original. */
  --c-marca:           var(--tinta);   /* por omissao (rodape, fundo claro) */
  --c-num-contagem:    var(--tinta);
  --c-cta-no-claro:    var(--manga);

  --c-titulo:          var(--tinta);
  --c-titulo-hero:     var(--tinta);
  --c-eyebrow:         var(--tinta-2);
  --c-eyebrow-hero:    var(--tinta);

  --c-link:            var(--tinta-3);
  --c-link-hover:      #96500F;

  --c-num-estat:       var(--tinta);
  --c-meta:            var(--tinta-2);

  --c-icone-cartao:    #5E8E72;
  --c-icone-nav:       var(--papel);   /* o botao do menu vive na barra rosa */
  --c-icone-aviso:     #5E8E72;

  --c-borda-activa:    var(--malva);
  --c-foco:            #96500F;
  --c-contorno-botao:  var(--tinta-2);
  /* verde-escuro e nao rosa: o rosa e agora o fundo desta seccao, e
     um marcador rosa sobre fundo rosa nao se ve. */
  --c-marcador:        var(--rosa-forte);

  --c-levada-canal:    #6E5F68;
  --c-levada-pedras:   #A08A96;
  --c-destaque-cartao: var(--rosa-forte);
  --c-linha-detalhe:   var(--malva);

  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grad-pagina) var(--papel);
  background-repeat: no-repeat;
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* O `hidden` TEM DE GANHAR SEMPRE.

   O browser esconde `[hidden]` com `display: none`, mas basta uma classe
   nossa com `display` para lhe passar à frente — e passa, porque uma classe
   pesa mais do que a regra do browser. Foi o que aconteceu ao campo de
   ficheiros do formulário: o JavaScript punha `hidden = true`, o
   `.campo { display: flex }` ganhava, e o campo continuava à vista — sem
   `name` e desactivado, a engolir em silêncio o que lá puséssemos.

   Com isto, `hidden` volta a querer dizer escondido, em toda a parte.      */
[hidden] { display: none !important; }

a { color: var(--c-link); text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap  { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.prose { max-width: var(--measure); }

/* saltar para o conteúdo — teclado e leitores de ecrã */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--manga); color: var(--tinta); font-weight: 700;
  padding: 12px 20px; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ---------- tipografia ---------- */

h1, h2, h3, .display {
  font-family: var(--f-disp);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
  color: var(--tinta);
}
h1 { font-size: clamp(2rem, 5.2vw, 3.33rem); }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.15rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.17rem); letter-spacing: -0.02em; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c-eyebrow);
  margin: 0;
}

.lede { font-size: 1.05rem; color: var(--tinta-2); margin: var(--s3) 0 0; }
p { margin: var(--s2) 0 0; }
p.first { margin-top: var(--s3); }

/* ---------- botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--f-body); font-weight: 700; font-size: 0.97rem;
  text-decoration: none; cursor: pointer;
  transition: transform 200ms var(--curva), background-color 200ms var(--curva),
              background-position 420ms var(--curva),
              border-color 200ms var(--curva), color 200ms var(--curva);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* o botão principal carrega o gradiente da marca em miniatura */
.btn-1 { background: var(--grad-quente); color: var(--tinta); background-size: 160% 100%; background-position: 0% 50%; }
.btn-1:hover { background-position: 100% 50%; }

.btn-2 { border-color: color-mix(in srgb, var(--c-contorno-botao) 58%, transparent); color: var(--c-contorno-botao); background: transparent; }
.btn-2:hover { background: color-mix(in srgb, var(--c-contorno-botao) 14%, transparent); border-color: var(--c-contorno-botao); }

.btn[aria-disabled="true"] {
  background: var(--cartao-2); color: var(--tinta-3);
  border-color: var(--rule); cursor: not-allowed; pointer-events: none;
}

/* ---------- logótipo ---------- */

/* Até aqui o logótipo era uma imitação composta em Gabarito, com dois blobs
   feitos de border-radius. Passou a ser o SVG da designer.

   O ficheiro tem uma cor só, e por isso não pode ser recolorido por CSS —
   há uma versão por cor em site/img/logo/, geradas por tools/logo.py. Qual
   entra depende do fundo, e isso não é gosto, é medida:

     amarelo #FDCD66 sobre a barra rosa #C23D68 ... 3,39:1   passa
     amarelo #FDCD66 sobre o creme #FFFDF6 ........ 1,46:1   desaparece
     tinta   #3A3036 sobre o creme ................. 8,52:1   passa          */

.mark {
  display: inline-flex; align-items: center;
  text-decoration: none; line-height: 0;
}
.mark img { height: 30px; width: auto; display: block; }

/* na barra rosa cabe menos e o amarelo é ele próprio */
.nav .mark img { height: 26px; }

/* ---------- navegação ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  /* A barra e o rosa forte de 2025 — o mesmo #C23D68 do topo do fundo
     deles. E a unica zona escura da pagina, por isso tudo o que vive nela
     e claro. Quase opaca de proposito: translucida por cima da fotografia
     do topo ficava suja em vez de rosa. */
  background: rgba(194, 61, 104, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--curva), background-color 300ms var(--curva);
}
.nav.colado { border-bottom-color: #8E2A4B; background: rgba(194, 61, 104, 0.99); }

.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 68px;
}
.nav-links { display: flex; align-items: center; gap: var(--s4); }
.nav-links a {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: 0.11em; text-transform: uppercase;
  /* creme, nao tinta: a barra e a unica zona escura do site */
  color: var(--papel); text-decoration: none;
  padding: 6px 0; position: relative;
  transition: color 200ms var(--curva);
}
.nav-links a:hover { color: var(--manga); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--manga);
  transition: right 260ms var(--curva);
}
.nav-links a:hover::after { right: 0; }

/* Tem de ser `.nav-links a.lang` e não só `.lang`: a regra `.nav-links a`
   acima é mais específica e, com `.lang` sozinho, comia-lhe o padding
   lateral — a pastilha encolhia para 18 px e o texto ficava colado à
   borda. */
.nav-links a.lang {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.11em;
  color: var(--papel); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--papel) 62%, transparent);
  border-radius: 999px; padding: 7px 13px;
  min-height: 34px; display: inline-flex; align-items: center;
  transition: background-color 200ms var(--curva);
}
.nav-links a.lang:hover { background: color-mix(in srgb, var(--papel) 22%, transparent); }

/* menu de telemóvel */
.menu-btn {
  display: none; background: transparent; border: 0; cursor: pointer;
  width: 46px; height: 46px; padding: 0; color: var(--c-icone-nav);
  align-items: center; justify-content: center;
}
.menu-btn svg { width: 25px; height: 25px; }

/* ---------- topo / hero ---------- */

/* O TOPO OCUPA O ECRA TODO, MENOS UMA MARGEM.

   Duas coisas puxam em sentidos contrarios. O video e 16:9 e entra em
   `object-fit: cover`: se o topo for baixo e largo, o que sobra do
   fotograma e cortado em cima e em baixo. Quanto mais alto o topo, menos
   se corta. Mas o conteudo esta encostado ao fundo (`align-items: flex-end`),
   por isso um topo mais alto empurra a contagem decrescente para baixo — e
   se ela passar a dobra, deixa de se ver.

   A conta que concilia as duas: a contagem acaba em
   `69 (barra) + altura do topo - 16 (respiro de baixo)`. Para caber no ecra,
   a altura do topo tem de ser no maximo `altura da janela - 53`. Os 80px
   deixam essa folga e ainda sobra margem.

   `svh` e a altura do ecra sem contar com as barras do browser do telemovel,
   que aparecem e desaparecem com o scroll; sem isso o topo dava saltos.     */
.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex; align-items: flex-end; overflow: hidden;
}
@supports (height: 100svh) {
  .hero { min-height: calc(100svh - 80px); }
}
.hero-foto { position: absolute; inset: 0; overflow: hidden; }
.hero-foto img {
  /* UMA SÓ FOTOGRAFIA, em todos os ecrãs.
     Houve aqui duas — uma panorâmica para computador e uma vertical para
     telemóvel — mas ver uma imagem no telemóvel e outra no computador,
     conforme o vídeo tocasse ou não, dava a sensação de dois sites. Agora
     é a mesma, e o `cover` trata do enquadramento: no telemóvel mostra o
     tipi de alto a baixo, no computador uma faixa larga do interior.
     Os 62% puxam o corte para baixo do centro, onde estão as pessoas. */
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  /* a escala dá folga para a fotografia se deslocar sem mostrar as bordas */
  transform: scale(1.16); transform-origin: 50% 40%;
  will-change: transform;
}

/* O VÍDEO DO TOPO ESTÁ POR CIMA DA FOTOGRAFIA, MAS EM REPOUSO NÃO SE VÊ.

   É a mesma regra da cortina de folhagem: o estado de repouso é o que se
   lê. A fotografia continua no HTML e continua à vista; só quando o
   JavaScript confirma que o vídeo está mesmo a tocar é que a classe
   `.video-ligado` o faz aparecer por cima. Sem JS, sem ficheiro, em ecrã
   estreito ou com o vídeo recusado pelo browser, fica a fotografia — e
   ninguém dá por nada.

   O enquadramento e a escala são os mesmos da fotografia, para a paralaxe
   do topo tratar os dois da mesma maneira e a troca não dar um salto.     */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  transform: scale(1.16); transform-origin: 50% 40%;
  will-change: transform;
  opacity: 0; transition: opacity 700ms ease;
  pointer-events: none;
}
.hero-foto.video-ligado .hero-video { opacity: 1; }

/* O VÉU DO TOPO É ESCURO, e o resto da página é claro. É de propósito.

   O logótipo é amarelo #FDCD66 e não há como o mudar: recolorido de escuro,
   os seis anéis translúcidos do halo do blob transformam-se numa mancha
   suja. E o amarelo sobre o véu creme antigo media 1,03 a 1,95:1 — sumia.

   Sobre este véu escuro dá 3,6:1, o halo brilha como foi desenhado, e a
   fotografia mantém a profundidade em vez de ficar lavada. Só o topo é
   escuro; da open call para baixo o site volta ao claro.                  */
.hero-veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(42,34,38,0.95) 2%,
      rgba(42,34,38,0.86) 30%,
      rgba(42,34,38,0.60) 54%,
      rgba(42,34,38,0.20) 78%,
      rgba(42,34,38,0.06) 100%);
}
/* z-index acima das serras (z:2): sem isto as cumeadas passavam por cima
   da contagem decrescente, que e conteudo e nao pano de fundo. */
.hero .wrap { position: relative; z-index: 3; padding-top: var(--s6); padding-bottom: var(--s5); will-change: transform, opacity; }

/* Com o véu escuro, todo o texto do topo tem de virar claro. Antes era
   escuro sobre creme; se ficasse assim, desaparecia. */
.hero .eyebrow {
  display: inline-block; color: var(--manga);
  background: rgba(28, 22, 25, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 7px 13px; border-radius: 3px;
}

/* O <h1> passou a ser o lockup completo — a marca, o ano e as datas, como
   a designer os desenhou. Continua a ser o <h1> da página: o texto vive no
   alt da imagem, por isso nem os leitores de ecrã nem o Google o perdem. */
.hero h1 { margin-top: var(--s3); line-height: 0; }
.hero h1 img { width: min(390px, 68vw); height: auto; }

/* o botao de contorno do topo vive agora sobre escuro */
.hero .btn-2 { border-color: rgba(253,205,102,0.55); color: var(--manga); }
.hero .btn-2:hover { background: rgba(253,205,102,0.14); border-color: var(--manga); }

.hero .sub { max-width: 46ch; font-size: 1.05rem; color: #EFE6DC; margin-top: var(--s3); }
.hero .accoes { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* PARAR O VÍDEO. Uma coisa que se mexe sozinha durante mais de cinco
   segundos tem de poder ser parada (WCAG 2.2.2). Fica pequeno e no canto
   — não é conteúdo, é um controlo — mas é um <button> a sério: chega-se
   lá pelo teclado e tem nome para os leitores de ecrã.

   Nasce com `hidden` no HTML e só o JavaScript o mostra, depois de o
   vídeo arrancar. Sem vídeo não há botão a controlar coisa nenhuma.

   z-index 4 porque a .wrap do topo está a 3 e as serras a 2.            */
.video-btn {
  position: absolute; right: 20px; bottom: 20px; z-index: 4;
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(253,205,102,0.45); border-radius: 50%;
  background: rgba(28, 22, 25, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  color: var(--manga); cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.video-btn[hidden] { display: none; }
.video-btn svg { width: 17px; height: 17px; fill: currentColor; }
.video-btn:hover { background: rgba(28, 22, 25, 0.78); border-color: var(--manga); }
/* sobre o véu escuro o foco global perde-se: aqui o anel é manga */
.video-btn:focus-visible { outline: 2px solid var(--manga); outline-offset: 3px; }

/* contagem decrescente */
.contagem {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid rgba(253,205,102,0.34);
}
.contagem div { display: flex; flex-direction: column; gap: 2px; }
.contagem .n {
  font-family: var(--f-disp); font-weight: 800; font-size: clamp(1.4rem, 2.9vw, 1.8rem);
  color: var(--manga); line-height: 1; font-variant-numeric: tabular-nums;
}
.contagem .r {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase; color: #D9CFC5;
}

/* ---------- secções ---------- */

main { position: relative; }
section { position: relative; }
.bloco { padding: var(--s7) 0; }
.bloco-cerrado { padding: var(--s6) 0; }

.cabeca { max-width: 58ch; }
.cabeca h2 { margin-top: var(--s2); }

/* ---------- open call ---------- */

/* O bloco da open call é o único claro da página inteira. É de propósito:
   é a razão de a página existir esta semana, e o contraste com o escuro à
   volta faz com que não se possa passar por ele sem o ver. */
/* A open call já não é um painel claro: destaca-se por uma faixa e pelo
   cartão do prazo, não por mudar o fundo. O fundo é o gradiente da página. */
.opencall { background: transparent; border-top: 1px solid var(--rule);
            border-bottom: 1px solid var(--rule); }
.opencall .wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s6); align-items: start; }
/* #653009 é o tom mais claro que ainda passa 4,5:1 sobre TODAS as paragens
   do gradiente, incluindo o coral no canto. O #7A3D10 só passava por sorte,
   por a etiqueta calhar na ponta clara. */


.prazo {
  background: var(--cartao); border: 1px solid var(--rule);
  border-left: 4px solid var(--c-destaque-cartao); border-radius: 6px; padding: var(--s3) var(--s4);
}
.prazo .rot {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--tinta-3);
}
.prazo .data {
  font-family: var(--f-disp); font-weight: 800; font-size: 1.35rem;
  color: var(--tinta); margin-top: 5px; letter-spacing: -0.02em;
}
.prazo .restam { font-size: 0.94rem; color: var(--c-meta); margin-top: var(--s1); }
/* a data dos resultados fica separada do prazo por um risco: são duas
   informações diferentes, e coladas liam-se como uma só */
.prazo .resultados {
  font-size: 0.94rem; color: var(--c-meta);
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--rule);
}
.prazo .btn { margin-top: var(--s3); width: 100%; }

.rascunho {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinta); background: var(--menta);
  display: inline-block; padding: 5px 11px; border-radius: 3px; margin-bottom: var(--s3);
}

ul.marcas { list-style: none; padding: 0; margin: var(--s3) 0 0; display: flex; flex-direction: column; gap: var(--s2); }
ul.marcas li { padding-left: 26px; position: relative; color: var(--tinta-2); }
ul.marcas li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--c-marcador);
}
ul.marcas b { color: var(--tinta); }

/* ---------- sobre + galeria ---------- */

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; }

.tiras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s5); }
.tira { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--cartao); }
.tira img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--curva); }
.tira:hover img { transform: scale(1.045); }

figure { margin: 0; }
figcaption {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinta-3); margin-top: var(--s2);
}

/* números */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5); }
.numeros div { border-top: 1px solid color-mix(in srgb, var(--c-linha-detalhe) 45%, transparent); padding-top: var(--s3); }
.numeros .n {
  font-family: var(--f-disp); font-weight: 800; font-size: clamp(1.65rem, 3.6vw, 2.15rem);
  color: var(--c-num-estat); line-height: 1; letter-spacing: -0.03em;
}
.numeros .r { color: var(--tinta-2); font-size: 0.95rem; margin-top: var(--s1); }

/* ---------- local ---------- */

.local { background: transparent; }
.local .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }

.avisos { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.aviso {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s2);
  background: var(--cartao); border: 1px solid var(--rule);
  border-radius: 6px; padding: var(--s3);
  font-size: 0.95rem; color: var(--tinta-2);
}
.aviso svg { width: 20px; height: 20px; color: var(--c-icone-aviso); margin-top: 2px; }
.aviso b { color: var(--tinta); }

/* ---------- cartões de ligação ---------- */



.ligacoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s5); }

.cartao {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--cartao); border: 1px solid var(--rule);
  border-radius: 10px; padding: var(--s4);
  color: inherit; text-decoration: none;
  transition: border-color 240ms var(--curva), transform 240ms var(--curva),
              background-color 240ms var(--curva);
}
.cartao:hover { border-color: var(--c-borda-activa); transform: translateY(-3px); background: var(--cartao-2); }

.cartao-topo { display: flex; align-items: center; gap: var(--s2); }
.cartao svg { width: 30px; height: 30px; color: var(--c-icone-cartao); flex: none; }
.cartao .rede {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--tinta-3);
}
.cartao h3 { font-family: var(--f-disp); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; }
.cartao p { color: var(--tinta-2); margin: 0; font-size: 0.97rem; max-width: 34ch; }

.cartao .meta {
  margin-top: auto; padding-top: var(--s2);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-meta);
  display: flex; align-items: center; gap: 8px;
}
.cartao .seta { transition: transform 240ms var(--curva); }
.cartao:hover .seta { transform: translateX(4px); }

/* ---------- newsletter ---------- */

.subscrever { background: transparent; }
.forma { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); max-width: 520px; }
.forma label {
  flex: 1 1 240px; display: flex; flex-direction: column; gap: 7px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3);
}
.forma input {
  background: var(--cartao); border: 1px solid var(--rule); border-radius: 6px;
  color: var(--tinta); font-family: var(--f-body); font-size: 1rem;
  padding: 13px 15px; min-height: 48px; width: 100%;
}
.forma input::placeholder { color: var(--tinta-3); }
.forma input:focus { border-color: var(--c-foco); }
.forma .btn { align-self: flex-end; }
.forma-nota { font-size: 0.88rem; color: var(--tinta-3); margin-top: var(--s2); }

/* ---------- rodapé ---------- */

footer.pe { background: transparent; border-top: 1px solid var(--rule); padding: var(--s6) 0 var(--s5); }
.pe-grelha { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s5); }
.pe h4 {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--tinta-3); margin: 0 0 var(--s2); font-weight: 500;
}
.pe ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pe a {
  color: var(--tinta-2); text-decoration: none;
  transition: color 200ms var(--curva);
  /* WCAG 2.2 AA (Target Size, Minimum): 24 px é o mínimo para um alvo de
     ponteiro. Só a altura da linha dava 19 px. */
  display: inline-flex; align-items: center; min-height: 28px;
}
.pe a:hover { color: var(--c-link-hover); }
.pe .creditos {
  margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--tinta-3);
}

/* ---------- a levada ---------- */

/* A LEVADA
   Corre na margem esquerda ao longo de toda a página. Nunca desaparece:
   nos ecrãs largos é o canal a serpentear na goteira; nos estreitos
   encolhe para um fio junto à borda, mas continua a encher-se com o
   scroll. Antes sumia-se abaixo de 1380 px, o que apagava a ideia em
   quase todos os portáteis. */
.levada {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 14px;                 /* ecrãs estreitos: só um fio na borda */
  pointer-events: none; z-index: 3;
}
.levada svg { width: 100%; height: 100%; display: block; }
.levada path { fill: none; stroke-linecap: round; }

/* O canal passou de musgo #80803A para sálvia: contra o fundo em gradiente
   o musgo caía a 2,08:1, abaixo do mínimo de 3:1 para elementos gráficos.
   A sálvia mantém-se acima de 4,8:1 em toda a descida. */
.levada .canal  { stroke: var(--c-levada-canal); stroke-width: 2; opacity: 0.75; }
.levada .pedras { stroke: var(--c-levada-pedras); stroke-width: 2; stroke-dasharray: 2 15; opacity: 0.85; }
.levada .agua   { stroke: url(#grad-levada); stroke-width: 4; opacity: 1; }

/* a partir daqui há goteira suficiente para o canal serpentear a sério
   sem tocar no texto: (1260 - 1180) / 2 = 40 px de folga de cada lado */
@media (min-width: 1260px) {
  .levada { width: 78px; }
  .levada .canal  { stroke-width: 3; }
  .levada .pedras { stroke-width: 3; stroke-dasharray: 2 16; }
  .levada .agua   { stroke-width: 3.5; }
}

/* Acima dos 1500 px a goteira tem 160 px de cada lado e o canal pode
   ocupar 110 sem se aproximar do texto, que so comeca aos 184 px. E a
   largura que faz a curva ler-se como um meandro e nao como um fio. */
@media (min-width: 1500px) {
  .levada { width: 110px; }
  .levada .agua { stroke-width: 4; }
}

/* ---------- as serras do topo ---------- */

/* Três cumeadas empilhadas por cima do véu, a descer a velocidades
   diferentes com o scroll. A mais longe quase não se mexe, a mais perto
   acompanha a fotografia — é a diferença entre elas que dá profundidade,
   não o desenho de cada uma.

   Ficam por cima do véu e por baixo do texto: sob o véu o gradiente do
   fundo comia-as, e por cima do texto tapavam o título. */
.serras {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: min(40vh, 320px);
  pointer-events: none; z-index: 2; overflow: hidden;
}
.serra {
  position: absolute; bottom: 0; left: -5%; width: 110%;
  display: block; will-change: transform;
}
/* alturas diferentes: a de trás assoma por cima das outras duas */
.serra.longe { height: 74%; }
.serra.meio  { height: 88%; }
.serra.perto { height: 100%; }

.serra.longe path { fill: #A9C9B5; opacity: 0.85; }
.serra.meio  path { fill: #6E9C82; opacity: 0.9; }
.serra.perto path { fill: #3E6B52; }

/* ---------- a cortina de folhagem ---------- */

/* Duas metades da mesma fotografia — a ZPS01579, recortada por
   tools/recortar-folhagem.py — sobrepostas por cima da open call. Afastam-se
   à medida que o bloco sobe no ecrã e deixam ver o que está por trás. É a
   ideia da to-top.ch sem as bibliotecas dela: o movimento sai do mesmo ciclo
   de requestAnimationFrame que já desloca o topo.

   REGRA: o estado em repouso é ABERTO, não fechado. Se o JavaScript não
   correr, as duas metades ficam de lado e a open call lê-se na mesma. Ao
   contrário — repouso fechado — um script que falhasse tapava a razão de
   ser da página. */
.mata {
  position: absolute; top: 0; left: 0; right: 0;
  height: min(88vh, 720px);
  overflow: hidden;           /* é isto que impede as metades de alargar a página */
  pointer-events: none;
  z-index: 5;
}
.mata div {
  position: absolute; top: 0; bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  /* O painel acaba num rectangulo, e um rectangulo de folhagem a meio da
     pagina le-se como um autocolante. A mascara desfaz-lhe o fundo, que
     numa serra com nevoeiro e a coisa mais natural do mundo. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
  will-change: transform;
}

/* Cada metade e um desenho seu, gerado por tools/desenhar-folhagem.py.
   Sobrepoem-se 16% ao meio: como sao desenhos diferentes, a sobreposicao
   adensa em vez de duplicar — que era o defeito da versao fotografica, onde
   as mesmas arvores apareciam duas vezes. */
.mata .esq { left: 0;  width: 58%; background-position: 100% 100%; transform: translate3d(-100%, 0, 0); }
.mata .dir { right: 0; width: 58%; background-position: 0% 100%;   transform: translate3d(100%, 0, 0); }

/* Um SVG por lado, e mais nada: nitido em qualquer ecra, sem escadaria de
   tamanhos e sem image-set. Comprimido pesa menos de 20 KB cada. */
.mata .esq { background-image: url("../img/folhagem-esq.svg"); }
.mata .dir { background-image: url("../img/folhagem-dir.svg"); }

/* ---------- revelação ao scroll ---------- */

/* O estado escondido só existe quando o JavaScript está a correr (a classe
   `js` é posta no <html> logo no cabeçalho). Se o script falhar ou estiver
   desligado, o conteúdo aparece na mesma — o movimento é acabamento, nunca
   a condição para se poder ler a página. */
.js .rev { opacity: 0; transform: translateY(46px); }
.rev.visto {
  opacity: 1; transform: none;
  transition: opacity 820ms var(--curva), transform 820ms var(--curva);
}

/* as fotografias entram com um ligeiro afastamento — dá profundidade
   sem competir com a paralaxe do topo */
.rev .tira img { transform: scale(1.09); transition: transform 1100ms var(--curva); }
.rev.visto .tira img { transform: scale(1); }
.rev.visto .tira:hover img { transform: scale(1.045); }

/* ---------- responsivo ---------- */

@media (max-width: 900px) {
  .opencall .wrap, .local .wrap, .duas { grid-template-columns: 1fr; gap: var(--s4); }
  .pe-grelha { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  /* a levada já não se esconde: encolhe para um fio na borda (ver acima) */
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  :root { --s6: 50px; --s7: 65px; }
  .menu-btn { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #C23D68; border-bottom: 1px solid #8E2A4B;
    padding: var(--s2) 24px var(--s3);
  }
  .nav-links.aberto { display: flex; }
  .nav-links a { padding: 14px 0; width: 100%; font-size: 13px; }
  .nav-links a::after { display: none; }
  .tiras { grid-template-columns: 1fr 1fr; }
  .numeros { grid-template-columns: 1fr; gap: var(--s3); }
  .ligacoes { grid-template-columns: 1fr; }
  /* no menu de telemóvel a pastilha volta a ser inline, não uma barra */
  .nav-links a.lang { width: auto; }
  /* a altura do topo vem da regra unica la de cima (calc(100svh - 80px)):
     havia aqui um `88vh` que a substituia, e duas contas para a mesma
     coisa acabam sempre por se desencontrar */
  .hero .accoes .btn { width: 100%; }
  .contagem { gap: var(--s3); }
}

@media (max-width: 420px) {
  .pe-grelha { grid-template-columns: 1fr; }
}

/* ---------- o topo tem de caber no ecrã ----------

   Os dois botões e a contagem decrescente são a razão de ser do topo: dizem
   que há bilhete, que há open call, e quantos dias faltam. Se caírem por
   baixo da dobra, quem chega não os vê — e a maior parte das pessoas não faz
   scroll para procurar o que não sabe que existe.

   O problema não é a largura, é a ALTURA. Um portátil de 1366x768 dá umas
   650px de janela depois das barras do Chrome, e os espaços do topo estavam
   fixos: os mesmos 65px de respiro quer houvesse 900px de altura quer
   houvesse 580px. A contagem ficava 40 a 110px abaixo da dobra.

   O que se aperta aqui é o AR e o tamanho do logótipo — nunca o texto, que
   já está no mínimo. Medido: a 650px de janela a contagem acaba com folga,
   e a 580px também.                                                        */

@media (max-height: 800px) {
  .hero .wrap { padding-top: var(--s4); padding-bottom: var(--s3); }
  .hero h1 { margin-top: var(--s2); }
  .hero h1 img { width: min(360px, 66vw); }
  .hero .sub { margin-top: var(--s2); }
  .hero .accoes { margin-top: var(--s3); }
  .contagem { margin-top: var(--s3); padding-top: var(--s2); }
}

@media (max-height: 640px) {
  .hero h1 img { width: min(300px, 58vw); }
  .hero .sub { font-size: 1rem; margin-top: var(--s1); }
  .contagem { margin-top: var(--s2); }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .rev, .rev { opacity: 1; transform: none; }
  .rev .tira img, .rev.visto .tira:hover img { transform: none; }
  .levada path { stroke-dashoffset: 0 !important; }
  .mata { display: none; }
  .serra { transform: none !important; }
  .hero-foto img, .hero-video { transform: scale(1.16) !important; }
  /* com movimento reduzido o vídeo nem chega a carregar (ver videoTopo()
     em js/echoo.js), por isso o botão não tem nada para controlar */
  .video-btn { display: none !important; }
  .hero .wrap { transform: none !important; opacity: 1 !important; }
}

/* ---------- impressão ---------- */

@media print {
  .nav, .levada, .hero-foto, .video-btn, .subscrever { display: none; }
  body { background: #fff; color: #000; }
}

/* ══════════════════════════════════════════════════════════════
   FORMULÁRIO DE CANDIDATURA  (candidatura.html / en/apply.html)
   ══════════════════════════════════════════════════════════════ */

.visualmente-escondido {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* a armadilha de spam: fora do ecrã, mas nunca display:none — há robôs
   que ignoram campos escondidos por display */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pe-sobre { color: var(--tinta-2); max-width: 34ch; margin-top: var(--s2); }

/* ---------- cabeçalho de página interior ---------- */

.cabeca-pagina { padding: calc(var(--s6) + 40px) 0 var(--s5); }
.cabeca-pagina h1 { margin-top: var(--s2); max-width: 14ch; }
.cabeca-pagina .lede { max-width: 56ch; }

.tiras-info {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.tiras-info > div { display: flex; flex-direction: column; gap: 4px; }
.tiras-info .rot {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--tinta-3);
}
.tiras-info .val { font-family: var(--f-disp); font-weight: 700; font-size: 1.05rem; color: var(--tinta); }
.tiras-info .restam { font-size: 0.9rem; color: var(--rosa-forte); }

.lig-doc { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.lig-doc svg { width: 17px; height: 17px; flex: none; }

.rot-lista { font-weight: 700; color: var(--tinta); margin-top: var(--s3); }

.wrap-estreito { max-width: 760px; }

/* ---------- o formulário ---------- */

#form-candidatura { margin-top: var(--s3); }

#form-candidatura fieldset {
  border: 0; padding: 0; margin: 0 0 var(--s5);
  border-top: 1px solid var(--rule); padding-top: var(--s4);
}
#form-candidatura fieldset:first-of-type { border-top: 0; padding-top: 0; }

#form-candidatura legend {
  font-family: var(--f-disp); font-weight: 800; font-size: 1.35rem;
  letter-spacing: -0.02em; color: var(--tinta);
  display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: var(--s3);
}
.n-passo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--manga); color: var(--tinta);
  font-family: var(--f-mono); font-size: 13px; font-weight: 500;
}

.campo { display: flex; flex-direction: column; margin-bottom: var(--s3); }
.dois-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.campo label {
  font-weight: 600; font-size: 0.97rem; color: var(--tinta); margin-bottom: 6px;
}
.obrig { color: var(--rosa-forte); }

.campo .ajuda {
  font-size: 0.89rem; color: var(--tinta-3); margin: 0 0 8px; max-width: 62ch; line-height: 1.5;
}

.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
.campo input[type="url"], .campo textarea {
  font-family: var(--f-body); font-size: 1rem; color: var(--tinta);
  background: var(--cartao); border: 1.5px solid var(--rule); border-radius: 8px;
  padding: 13px 15px; min-height: 50px; width: 100%;
  transition: border-color 180ms var(--curva), box-shadow 180ms var(--curva);
}
.campo textarea { min-height: auto; line-height: 1.6; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #A79C93; }

.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--tinta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--manga) 55%, transparent);
}
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; }


/* estado de erro: a moldura muda E aparece texto — nunca só a cor */
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border-color: var(--rosa-forte);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rosa-forte) 18%, transparent);
}

.erro { margin: 6px 0 0; font-size: 0.88rem; color: #A32347; font-weight: 600; min-height: 0; }
.erro:empty { display: none; }

.conta {
  margin: 5px 0 0; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--tinta-3); text-align: right;
}
.conta.perto { color: #A32347; }

/* caixas de confirmação */
.campo-caixa {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  align-items: start; margin-bottom: var(--s2);
}
.campo-caixa input[type="checkbox"] {
  width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--rosa-forte); cursor: pointer;
}
.campo-caixa label { margin: 0; font-weight: 400; font-size: 0.95rem; line-height: 1.5; }
.campo-caixa .erro { grid-column: 2; }

/* ---------- rodapé do formulário ---------- */

.rodape-form {
  border-top: 1px solid var(--rule); padding-top: var(--s4); margin-top: var(--s4);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
}
.rodape-form .btn { min-width: 240px; }
.erro-geral { margin: 0; color: #A32347; font-weight: 600; font-size: 0.95rem; }
.erro-geral:empty { display: none; }

/* ---------- estados finais ---------- */

.sucesso, .aviso-fechado {
  background: var(--cartao); border: 1.5px solid var(--rule);
  border-left: 5px solid var(--menta); border-radius: 10px;
  padding: var(--s4); margin-top: var(--s3);
}
.aviso-fechado { border-left-color: var(--malva); }
.sucesso h2, .aviso-fechado h2 { font-size: 1.6rem; }
.sucesso p, .aviso-fechado p { color: var(--tinta-2); max-width: 56ch; }
.sucesso .btn { margin-top: var(--s3); }

/* ---------- responsivo ---------- */

@media (max-width: 640px) {
  .dois-campos { grid-template-columns: 1fr; gap: 0; }
  .cabeca-pagina { padding-top: calc(var(--s5) + 30px); }
  .rodape-form .btn { width: 100%; }
  .tiras-info { gap: var(--s3); }
}

/* caixa de recurso: aparece só se não houver serviço de envio ligado,
   com a candidatura já escrita para a pessoa copiar para um e-mail */
.resumo-fallback {
  width: 100%; margin-top: var(--s3);
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.7;
  color: var(--tinta); background: var(--cartao-2);
  border: 1.5px dashed var(--malva); border-radius: 8px; padding: 14px 16px;
  resize: vertical;
}