/* ============================================================
   CANDIDATURA
   Camada por cima da página, com o formulário por etapas. Ficheiro
   próprio: o deck é estrutura estável, o formulário é a peça que mais
   muda (campos, copy em três idiomas, regras espelhadas do servidor).
   Consome os tokens do signal-1.css directamente.
   ============================================================ */

/* ── Cabeçalho e progresso ─────────────────────────────────── */
/* Sem contador de passos, o cabecalho encolhe e sobra altura para o
   primeiro ecra caber sem rolar. */
.mcand-topo{
  flex:none;
  padding:clamp(.9rem,2vw,1.15rem) clamp(1.25rem,3vw,1.75rem) .7rem;
}
.mcand-h{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.15;margin:0}
.mcand-x{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:1px solid var(--hair);border-radius:var(--r);color:var(--ink-3);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.mcand-x:hover{color:var(--gold-txt);border-color:var(--gold)}
.mcand-x .i{width:15px;height:15px}
.mcand-barra{height:2px;background:var(--hair-2);flex:none}
.mcand-barra span{
  /* Cresce por transform e não por width: a largura obriga o browser a
     recalcular a disposição a cada fotograma, o transform não. */
  display:block;height:100%;width:100%;
  transform:scaleX(.25);transform-origin:left center;
  background:var(--grad-btn);
  transition:transform .45s var(--ease-io);
}

@media (prefers-reduced-motion:reduce){ .mcand-corpo{transition:none} }

/* ── Corpo ─────────────────────────────────────────────────
   Aqui dentro não rola nada, em ecrã nenhum. Um formulário por etapas que
   obriga a rolar dentro de si perde metade das candidatas na primeira
   pergunta que não se vê. Cada passo cabe: primeiro pelo desenho (as regras
   por altura, mais abaixo, encolhem tudo em ecrãs baixos), e depois pela
   escala que o JS aplica ao passo quando ainda assim sobra — ver `ajustar`
   em form-1.js. */
.mcand-corpo{
  /* A altura vem do JS (`medirCaixa`): é a do passo à vista, limitada ao que
     o ecrã dá. Antes era o cartão que mandava, com altura fixa, e um passo
     curto deixava um vazio enorme por cima do rodapé. */
  flex:none;height:var(--cand-h,auto);min-height:0;
  transition:height .34s var(--ease-io);
  /* clip e não hidden: um corpo com overflow:hidden continua a deixar-se
     deslocar por código — bastava o browser dar foco a um campo para o
     formulário subir e ficar cortado. Com clip não há scroll nenhum, nem
     programático. O `hidden` fica como recurso para browsers antigos. */
  overflow:hidden;overflow:clip;
  padding:.35rem clamp(1.25rem,3vw,1.75rem) clamp(.85rem,2vw,1.15rem);
}

/* O atributo hidden traz display:none, mas uma regra de classe ganha-lhe
   sempre. Sem isto o formulario continuava a ver-se por baixo do ecra
   de confirmacao depois de enviar. */
.cand{display:grid;gap:0}
.cand[hidden]{display:none}
.cand fieldset{border:0;min-width:0;padding:0;margin:0}
/* Folga apertada: o primeiro ecra tem de caber sem rolar. A escala é a rede
   de segurança do JS; em quase todos os ecrãs fica em 1 e nem se nota. */
.cand-passo{
  display:grid;gap:clamp(.85rem,1.8vw,1.15rem);align-content:start;
  transform:scale(var(--cand-esc,1));transform-origin:top center;
}
.cand-passo[hidden]{display:none}

/* ── Perguntas e respostas ─────────────────────────────────
   A legenda encosta-se às opções: separadas, a pergunta lia-se como um
   título de secção e o ecrã ficava cheio de vazios. */
.cand legend,.cand .campo label{
  display:block;margin-bottom:.4rem;
  font-family:var(--ff-b);font-size:.875rem;font-weight:600;
  color:var(--ink);letter-spacing:0;text-transform:none;
}
.cand .campo{display:grid;gap:0;margin:0}
.cand .campo input{margin:0}
.cand input[aria-invalid="true"]{border-color:var(--erro)}
.cand fieldset.em-erro > legend{color:var(--erro)}

.cand-e{
  display:flex;align-items:flex-start;gap:.35rem;margin-top:.45rem;
  font-size:.8125rem;line-height:1.4;color:var(--ink-2);
}
.cand-e[hidden]{display:none}
.cand-e::before{content:'!';font-weight:700;color:var(--erro);line-height:1.45}
.cand-nota{font-size:.8125rem;line-height:1.5;color:var(--ink-3);margin:0 0 .7rem}
.cand-nota::before{content:none}

/* ── Canal de contacto ─────────────────────────────────────── */
.cand-radios{display:flex;gap:.5rem;flex-wrap:wrap}
.cand-r{flex:1;min-width:8.5rem}
.cand-r input{position:absolute;opacity:0;width:1px;height:1px}
.cand-r span{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:0 .8rem;border-radius:var(--r);
  border:1px solid var(--hair);background:var(--vidro-b);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.cand-r span .i{width:18px;height:18px}
.cand-r input:checked + span{color:var(--on-cta);border-color:var(--gold);background:var(--grad-btn)}
.cand-r input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}

.cand-ramo[hidden]{display:none}
.cand-ramo{display:grid;gap:clamp(.8rem,1.8vw,1.1rem)}
.cand-tel{display:grid;gap:.7rem}
@media (min-width:420px){ .cand-tel{grid-template-columns:minmax(9rem,14rem) 1fr;align-items:start} }

/* ── Fichas de escolha ─────────────────────────────────────── */
.cand-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.cand-c input{position:absolute;opacity:0;width:1px;height:1px}
.cand-c span{
  display:inline-flex;align-items:center;min-height:42px;padding:0 .9rem;
  border:1px solid var(--hair);border-radius:var(--r);
  font-size:.875rem;font-weight:600;color:var(--ink-2);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
/* A opcao escolhida enche-se: o filete dourado sozinho lia-se mal num
   ecra pequeno e ao lado de outra ficha. */
.cand-c input:checked + span{
  color:var(--on-cta);border-color:var(--gold);
  background:var(--grad-btn);font-weight:600;
}
.cand-c input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}

/* ── Aplicativos com logótipo ──────────────────────────────
   O logótipo identifica mais depressa do que o nome: é o que a candidata
   reconhece do telemóvel dela. */
/* Os logotipos sao o que se reconhece: ocupam o que o ecra der. */
.cand-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.5rem}
.cand-app input{position:absolute;opacity:0;width:1px;height:1px}
.cand-app span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  min-height:6.5rem;padding:.85rem .5rem;text-align:center;
  border:1px solid var(--hair);border-radius:var(--r);background:var(--vidro-b);
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.cand-app img{width:clamp(40px,9vw,56px);height:clamp(40px,9vw,56px);object-fit:contain;border-radius:9px}
.cand-app b{font-size:.75rem;font-weight:600;color:var(--ink-2);line-height:1.2}
.cand-app input:checked + span{
  border-color:var(--gold);background:var(--vidro-a);
  box-shadow:inset 0 0 0 1px var(--gold);
}
.cand-app input:checked + span b{color:var(--gold-txt)}
.cand-app input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}

/* ── Indicativo do país ────────────────────────────────────
   Combobox com filtro: são 250 países e um menu nativo com 250 opções
   não se percorre num telemóvel. */
/* A caixa inteira fora da selecção: arrastar o rato sobre ela chegava a pintar
   o texto do formulário à volta. */
.pais-cx{position:relative;user-select:none;-webkit-user-select:none}
.pais-cx .i-caret{
  position:absolute;right:.8rem;top:50%;translate:0 -50%;
  width:13px;height:13px;color:var(--ink-3);pointer-events:none;
}
/* A caixa é um botão que também aceita texto: seleccionar o nome do país não
   serve para nada e quem arrastava o rato ficava com o texto pintado, com ar
   de campo partido. Escrever continua a funcionar — ver form-1.js. */
.pais-cx input{
  padding-right:2.2rem;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.pais-lista{
  /* Flutua acima do campo: dentro da caixa, o corpo do formulário tem scroll
     próprio e uma lista para baixo cortava-a ou empurrava a página. O JS dá-lhe
     as coordenadas (form-1.js, `posicionar`) e escolhe o lado.
     Quatro países à vista — 44px cada, a altura mínima de cada linha — e o
     resto desliza dentro da lista. */
  position:fixed;z-index:60;top:0;left:0;
  max-height:calc(4 * 44px);overflow-y:auto;overscroll-behavior:contain;
  list-style:none;
  background:var(--bg-2);border:1px solid var(--hair);border-radius:var(--r-card);
  box-shadow:0 22px 48px -20px var(--sombra);
}
.pais-lista[hidden]{display:none}
.pais-lista li{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem .85rem;min-height:44px;cursor:pointer;
  font-size:.9375rem;color:var(--ink-2);
}
.pais-lista li:hover,.pais-lista li.is-on{background:var(--vidro-a);color:var(--ink)}
.pais-lista li[aria-selected="true"]{color:var(--gold-txt)}
.pais-lista b{font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pais-lista li.is-on b,.pais-lista li:hover b{color:var(--gold-txt)}
.pais-vazio{justify-content:center;color:var(--ink-3);cursor:default}
.pais-vazio:hover{background:none}

/* ── Pré-visualização do avatar por ID ─────────────────────── */
.cand-av:empty{display:none}
.cand-av{
  display:flex;align-items:center;gap:.7rem;margin-top:.7rem;
  padding:.6rem .8rem;border-radius:var(--r);
  border:1px solid var(--hair);background:var(--vidro-b);
  font-size:.875rem;color:var(--ink-2);
}
.cand-av img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--gold)}
.cand-av b{display:block;color:var(--ink);font-weight:600}
.cand-av small{color:var(--ink-3);font-size:.75rem}

.cand input[type="file"]{
  width:100%;padding:.75rem;font-size:.8125rem;color:var(--ink-2);
  background:var(--vidro-b);border:1px dashed var(--hair);border-radius:var(--r);
}


/* ── Ecrã de sucesso ───────────────────────────────────────── */
.cand-ok[hidden]{display:none}
.cand-ok{text-align:center;padding:clamp(1.5rem,4vw,2.5rem) 0}
.cand-ok-i{width:52px;height:52px;color:var(--gold-txt);margin:0 auto 1rem}
.cand-ok h3{font-size:clamp(1.3rem,2.6vw,1.85rem);margin-bottom:.7rem}
.cand-ok p{color:var(--ink-2);max-width:38ch;margin:0 auto 1.5rem}

@media (hover:none){
  .mcand-x:hover{color:var(--ink-3);border-color:var(--hair)}
}

/* Quem tem uma duvida a meio do formulario nao devia ter de o fechar
   para a tirar. */
.mcand-wa{
  min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;
  border:1px solid var(--hair);border-radius:var(--r);
  font-size:.8125rem;color:var(--ink-3);
  transition:color .25s var(--ease);
}
.mcand-wa:hover{color:var(--gold-txt)}
.mcand-wa .i{width:16px;height:16px}

/* ── Formulário integrado numa página ─────────────────────
   Na página "seja host" o formulário não vive em camada: é o painel para
   onde os botões dessa página levam. O mesmo parcial, o mesmo
   comportamento, sem a caixa flutuante. */
.cand-inline{
  position:relative;display:flex;flex-direction:column;
  width:min(100%,40rem);margin-inline:auto;
  border-radius:var(--r-card);
  background:linear-gradient(155deg, var(--vidro-a), var(--vidro-b));
  border:1px solid var(--hair-2);
  box-shadow:0 22px 50px -30px var(--sombra);
  overflow:hidden;
}
/* Altura fixa, e nunca mais alta do que o espaço livre por baixo do
   cabeçalho: em desktop a caixa passava por cima dele. */
.cand-inline{
  position:relative;display:flex;flex-direction:column;
  width:min(100%,42rem);margin-inline:auto;
  /* Cresce com o conteúdo até onde o painel deixar. Fixar a altura enchia o
     cartão de vazio nos passos curtos; limitá-la é o que evita o scroll. */
  height:auto;
  max-height:min(38rem, calc(100svh - var(--navh) - var(--bandh) - var(--logo-h) * .58 - 5rem));
  border-radius:var(--r-card);
  background:linear-gradient(155deg, var(--vidro-a), var(--vidro-b));
  border:1px solid var(--hair-2);
  box-shadow:0 22px 50px -30px var(--sombra);
  overflow:hidden;
}

/* Nota da tabela encostada à esquerda, na largura da própria tabela. */
.nota-tabela{max-width:46rem;margin:.9rem auto 0;text-align:left}

/* ── Aviso ─────────────────────────────────────────────────
   Fora da caixa, por cima de tudo: dentro do formulário empurrava os
   campos e mudava a altura a cada tentativa. */
.cand-toast{
  position:fixed;z-index:260;
  left:50%;translate:-50% 0;bottom:clamp(1rem,4vh,2.5rem);
  width:min(calc(100% - 2rem),30rem);
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.9rem 1.1rem;border-radius:var(--r-card);
  border:1px solid var(--erro);
  background:color-mix(in oklab, var(--bg-3) 96%, transparent);
  box-shadow:0 26px 54px -22px var(--sombra);
  animation:cand-toast-vem .3s var(--ease) both;
}
.cand-toast[hidden]{display:none}
.cand-toast > .i{width:17px;height:17px;color:var(--erro);flex:none;margin-top:.15rem}
.cand-toast-t{font-weight:600;color:var(--ink);font-size:.9375rem;line-height:1.35}
.cand-toast ul{list-style:none;margin-top:.3rem;display:grid;gap:.1rem}
.cand-toast li{font-size:.8125rem;color:var(--ink-2)}
.cand-toast li::before{content:'· '}
@keyframes cand-toast-vem{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* ── Fotografia ────────────────────────────────────────────
   Passo só para ela. O alvo tem altura fixa e os três ecrãs (escolher,
   preparar, pronta) empilham-se lá dentro em absoluto: assim o passo não
   salta de tamanho quando a foto entra, que é o que fazia o rodapé
   dançar a meio do formulário.

   O desenho vem do file-upload do kokonutui, refeito sem React nem
   Tailwind — não há bundler aqui — e com a paleta da marca no lugar do
   azul: os aros e a pasta seguem os tokens, e por isso o componente muda
   de tema com a página em vez de trazer cores próprias. */
/* Só o alinhamento vertical é que muda neste passo. `place-content:center`
   encolhia a coluna ao conteúdo e o alvo, que se mede em percentagem da
   largura, colapsava para um risco. */
.cand-passo-foto{align-content:center;min-height:100%}

.cand-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.kfu{width:100%;max-width:32rem;margin-inline:auto}
/* A moldura é uma dupla: filete por fora, superfície por dentro. É o que
   dá a profundidade sem uma sombra, que aqui ficava suja sobre o vinho. */
.kfu-caixa{
  position:relative;padding:2px;border-radius:var(--r-card);
  border:1px solid var(--hair);background:var(--vidro-b);
}
.kfu-caixa::before{
  content:'';position:absolute;inset-inline:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.45;
}
/* Os três ecrãs partilham a mesma célula da grelha: só um está visível de
   cada vez, a altura é a dele e nunca menos do que o mínimo. Com altura
   fixa, o ecrã estreito cortava o botão — e um botão cortado não se
   carrega. */
.kfu-tela{
  position:relative;display:grid;overflow:hidden;border-radius:var(--r-card);
  min-height:clamp(12.5rem,38vh,15.5rem);
  border:1px dashed var(--hair);background:var(--bg-2);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.kfu-tela:hover{border-color:var(--gold)}
.kfu[data-estado="a-largar"] .kfu-tela{border-color:var(--gold);border-style:solid}
.kfu[data-estado="pronta"] .kfu-tela,
.kfu[data-estado="a-preparar"] .kfu-tela{border-style:solid}
#grupo-foto.em-erro .kfu-tela{border-color:var(--erro)}
/* Com o ficheiro em cima, o alvo responde primeiro: a queixa de campo
   obrigatório continua no texto, mas o filete diz que se pode largar. */
#grupo-foto .kfu[data-estado="a-largar"] .kfu-tela{border-color:var(--gold);border-style:solid}

/* Enquanto o ficheiro paira: luz pelos quatro lados, para o alvo se ler
   como alvo mesmo com o cursor a tapar o meio. */
.kfu-luz{position:absolute;inset:0;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.kfu[data-estado="a-largar"] .kfu-luz{opacity:1}
.kfu-luz i{position:absolute}
.kfu-luz i:nth-child(1){inset:0 0 auto 0;height:20%;background:linear-gradient(180deg,rgba(244,208,100,.16),transparent)}
.kfu-luz i:nth-child(2){inset:auto 0 0 0;height:20%;background:linear-gradient(0deg,rgba(244,208,100,.16),transparent)}
.kfu-luz i:nth-child(3){inset:0 auto 0 0;width:20%;background:linear-gradient(90deg,rgba(244,208,100,.16),transparent)}
.kfu-luz i:nth-child(4){inset:0 0 0 auto;width:20%;background:linear-gradient(270deg,rgba(244,208,100,.16),transparent)}
.kfu-luz b{position:absolute;inset:20%;border-radius:var(--r-card);background:rgba(244,208,100,.07);animation:kfu-bate 1.6s ease-in-out infinite}
@keyframes kfu-bate{0%,100%{opacity:.4}50%{opacity:1}}

.kfu-ecra{
  grid-area:1/1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:.85rem;padding:clamp(.9rem,3vw,1.5rem);
  animation:kfu-entra .28s var(--ease) both;
}
.kfu-ecra[hidden]{display:none}
@keyframes kfu-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.kfu-desenho{display:block;flex:none;width:clamp(3.5rem,13vh,4.5rem);aspect-ratio:1}
.kfu-desenho svg{width:100%;height:100%;display:block}
.kfu-orbita{stroke:color-mix(in oklab,var(--ink-3) 60%,transparent)}
.kfu-pasta{fill:color-mix(in oklab,var(--gold) 14%,transparent);stroke:var(--gold)}
.kfu-aba,.kfu-haste,.kfu-bico{stroke:var(--gold-txt)}

/* Os aros giram em sentidos alternados por baixo de uma máscara que só
   descobre a fatia já feita: é a percentagem que se vê, não um número. */
.kfu-aros circle{fill:none;transform-origin:120px 120px;opacity:.95}
.kfu-aros circle:nth-child(odd){animation:kfu-roda-d 8s linear infinite}
.kfu-aros circle:nth-child(even){animation:kfu-roda-e 8s linear infinite}
.kfu-aros circle:nth-child(1){stroke:var(--gold-hi)}
.kfu-aros circle:nth-child(2){stroke:var(--gold);animation-delay:.2s}
.kfu-aros circle:nth-child(3){stroke:var(--gold-deep);animation-delay:.3s}
.kfu-aros circle:nth-child(4){stroke:var(--gold-hi);animation-delay:.1s}
.kfu-aros circle:nth-child(5){stroke:var(--gold);animation-delay:.5s}
.kfu-aros circle:nth-child(6){stroke:var(--gold-deep);animation-delay:.4s}
.kfu-aros circle:nth-child(7){stroke:var(--gold-hi);animation-delay:.7s}
#kfu-fatia{transition:stroke-dasharray .2s linear}
@keyframes kfu-roda-d{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes kfu-roda-e{from{transform:rotate(360deg)}to{transform:rotate(0)}}

.kfu-mini{border-radius:50%;overflow:hidden;border:2px solid var(--gold);background:var(--bg-3)}
.kfu-mini img{width:100%;height:100%;object-fit:cover;display:block}

.kfu-diz{margin:0;min-width:0;max-width:100%}
.kfu-diz b{display:block;font-size:.9375rem;color:var(--ink);margin-bottom:.3rem}
.kfu-diz small{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.5;max-width:34ch}
.kfu-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch;margin-inline:auto}
/* Mais específico do que `.kfu-diz small`, que é quem manda no bloco. */
.kfu-diz .kfu-meta{display:flex;align-items:center;justify-content:center;gap:.5rem}
.kfu-meta em{font-style:normal;font-weight:600;color:var(--gold-txt)}
.kfu-boa{color:var(--ink-2)}
.kfu-boa .i{width:15px;height:15px;color:var(--gold-txt)}

.kfu-accoes{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.kfu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:42px;padding:0 1.1rem;border-radius:var(--r);
  border:1px solid var(--hair);background:var(--vidro-b);
  font-family:var(--ff-b);font-size:.875rem;font-weight:600;color:var(--ink);
  cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease);
}
.kfu-btn:hover{border-color:var(--gold);color:var(--gold-txt);background:var(--vidro-a)}
.kfu-btn .i{width:17px;height:17px}
.kfu-btn-forte{
  min-width:min(100%,15rem);border-color:transparent;
  background:var(--grad-btn);color:var(--on-cta);
}
.kfu-btn-forte:hover{color:var(--on-cta);background:var(--grad-btn);filter:brightness(1.08)}
.kfu-btn-mau:hover{border-color:var(--erro);color:var(--erro)}

.kfu-larga{margin:0;font-size:.75rem;color:var(--ink-3)}
/* Num telemóvel não se arrasta nada: a frase só faz sentido com rato. */
@media (hover:none){ .kfu-so-rato{display:none} }

.kfu-mau{
  display:flex;align-items:flex-start;gap:.4rem;margin:.5rem 0 0;
  padding:.5rem .7rem;border-radius:var(--r);
  border:1px solid color-mix(in oklab,var(--erro) 40%,transparent);
  background:color-mix(in oklab,var(--erro) 10%,transparent);
  font-size:.8125rem;line-height:1.4;color:var(--ink);
}
.kfu-mau[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .kfu-ecra{animation:none}
  .kfu-aros circle,.kfu-luz b{animation:none}
  .kfu-desenho animate,.kfu-desenho animateTransform{display:none}
}

/* ── Rodapé do formulário ──────────────────────────────────
   Fora do corpo que rola: o botão de continuar está sempre à vista. Os
   botões repartem a largura toda; o de voltar sai do fluxo no primeiro
   passo e a linha reparte-se pelos que ficam, sem precisar de JS. */
.mcand-fim{
  flex:none;display:grid;gap:.55rem;
  padding:clamp(.85rem,2vw,1.1rem) clamp(1.25rem,3vw,1.75rem);
  border-top:1px solid var(--hair-2);
  background:color-mix(in oklab, var(--bg-2) 70%, transparent);
}
.mcand-fim-b{display:flex;gap:.6rem;align-items:stretch;width:100%}
.mcand-fim-b > *{flex:1 1 0;min-width:0;min-height:48px}
.mcand-fim-b > .mcand-av{flex:1.6 1 0}

/* Uma dúvida a meio não devia obrigar a sair do formulário. */
/* O mesmo desenho de um botao de filete, para a linha ficar composta:
   antes era um link solto no meio de dois botoes. */
.mcand-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:48px;padding:0 .9rem;border-radius:var(--r);
  border:1px solid var(--hair);background:var(--vidro-b);
  font-size:.8125rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink-2);white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.mcand-wa:hover{color:var(--gold-txt);border-color:var(--gold);background:var(--vidro-a)}
.mcand-wa .i{width:16px;height:16px;flex:none}
.mcand-wa span{overflow:hidden;text-overflow:ellipsis}
@media (hover:none){ .mcand-wa:hover{color:var(--ink-2);border-color:var(--hair);background:var(--vidro-b)} }

/* Garantia: pequena e centrada por baixo dos botões. É uma garantia,
   não uma instrução, e não deve competir com eles. */
.cand-garantia{
  display:flex;align-items:center;justify-content:center;gap:.3rem;
  width:100%;min-width:0;margin:0;
  font-size:.625rem;line-height:1.35;color:var(--ink-3);text-align:center;
}
.cand-garantia span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cand-garantia .i{width:10px;height:10px;flex:none}

@media (max-width:600px){
  .mcand-wa span{display:none}
  .mcand-fim-b{flex-wrap:wrap}
  .mcand-fim-b > .mcand-av{flex:1 1 100%;order:-1}
  .cand-garantia{font-size:.5625rem}
}

/* ── Ecrãs baixos: o cartão fica com a altura que o painel tinha a mais ──
   Em ecrãs baixos cada linha de decoração à volta do formulário é uma
   pergunta que deixa de caber lá dentro. O painel já se anuncia dentro do
   cartão, e o rodapé não precisa de duas linhas de botões. */
@media (max-height:700px){
  #candidatura > .wrap > .ph{display:none}
  .cand-inline{
    max-height:min(38rem, calc(100svh - var(--navh) - var(--bandh) - var(--logo-h) * .58 - 2rem));
  }
  .mcand-fim{padding-block:.5rem;gap:.35rem}
  .mcand-fim-b{flex-wrap:nowrap}
  .mcand-fim-b > *{min-height:42px}
  .mcand-fim-b > .mcand-av{flex:1.4 1 0;order:0}
  .cand-garantia{display:none}
}

/* ── Ecrãs baixos ──────────────────────────────────────────
   O que decide se um passo cabe é a altura, não a largura: um telemóvel
   deitado tem 390px de altura e mais largura do que um tablet ao alto. Daí
   estas regras irem por `max-height`. Encolher pelo desenho é sempre melhor
   do que encolher pela escala, que é o último recurso do JS. */
/* Num telemóvel ao alto a altura chega, mas a largura obriga a grelha de
   aplicações a crescer para baixo: os cartões encolhem pela largura também. */
@media (max-width:640px){
  .cand-apps{grid-template-columns:repeat(auto-fit,minmax(5.4rem,1fr));gap:.4rem}
  .cand-app span{min-height:4.6rem;gap:.35rem;padding:.5rem .4rem}
  .cand-app img{width:clamp(28px,8vw,38px);height:clamp(28px,8vw,38px)}
  .cand-app b{font-size:.6875rem}
}

@media (max-height:780px){
  .cand-passo{gap:.7rem}
  .cand-c span{min-height:38px;padding:0 .8rem}
  .cand-r span{min-height:42px}
  .cand-app span{min-height:4.8rem;gap:.4rem;padding:.55rem .45rem}
  .cand-app img{width:clamp(30px,7vw,42px);height:clamp(30px,7vw,42px)}
  .cand-apps{grid-template-columns:repeat(auto-fit,minmax(5.6rem,1fr));gap:.4rem}
  .mcand-topo{padding-block:.7rem .5rem}
}
/* Ecrãs pequenos de verdade: a grelha de aplicações é o bloco mais alto do
   formulário, e é onde há mais a ganhar. */
@media (max-width:400px),(max-height:520px){
  #grupo-novata{grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.4rem .6rem}
  .cand-apps{grid-template-columns:repeat(auto-fit,minmax(4.4rem,1fr));gap:.35rem}
  .cand-app span{min-height:3.4rem;gap:.25rem;padding:.4rem .3rem}
  .cand-app img{width:26px;height:26px}
  .cand-app b{font-size:.625rem;line-height:1.1}
}

@media (max-height:620px),(max-width:400px){
  /* Cada milímetro de folga do corpo é altura que falta às perguntas. */
  .mcand-corpo{padding:.25rem clamp(.9rem,3vw,1.4rem) .5rem}
}

@media (max-height:620px){
  .cand-passo{gap:.5rem}
  .cand legend,.cand .campo label{margin-bottom:.25rem;font-size:.8125rem}
  .cand .campo input,.cand input[type="tel"],.cand input[type="text"]{min-height:42px;padding-block:.5rem}
  .cand-c span{min-height:34px;font-size:.8125rem}
  .cand-r span{min-height:38px;font-size:.875rem}
  .cand-app span{min-height:3.9rem}
  .cand-app b{font-size:.6875rem}
  .cand-nota{margin-bottom:.45rem}
  .kfu-tela{height:clamp(10rem,32vh,12.5rem)}
  .kfu-ecra{gap:.55rem;padding:.7rem}
  .kfu-desenho{width:clamp(2.8rem,11vh,3.6rem)}
  /* A explicação da foto é a primeira a sair: o alvo e o botão dizem o
     que é preciso, o parágrafo é que rouba a altura. */
  .kfu-ecra[data-ecra="parado"] .kfu-diz small{display:none}
  .kfu-btn{min-height:38px}
}

/* As três perguntas de quem nunca fez live (período, dias, horas) são curtas:
   em pé ocupam três linhas por nada. Quando falta altura, repartem-se. */
@media (max-height:780px){
  #grupo-novata{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
    gap:.5rem 1rem;
  }
  #grupo-novata > *{min-width:0}
}

/* A fotografia num ecrã mínimo: fica o desenho, o título e o botão. O
   resto é conforto que aqui custa metade do alvo. */
@media (max-width:400px),(max-height:520px){
  .kfu-tela{height:9.5rem}
  .kfu-ecra{gap:.5rem;padding:.6rem}
  .kfu-desenho{width:2.6rem}
  .kfu-diz b{font-size:.875rem}
  .kfu-larga{display:none}
}

/* Deitado sobra largura e falta altura: as perguntas passam a duas colunas
   em vez de encolherem até não se lerem. */
@media (min-width:560px) and (max-height:620px){
  .cand-passo{grid-template-columns:1fr 1fr;column-gap:1.1rem}
  .cand-passo > *{min-width:0}
  .cand-passo-foto{grid-template-columns:1fr}
  .cand-tel{grid-template-columns:minmax(7.5rem,10rem) 1fr}
  /* As três perguntas curtas atravessam as duas colunas e ficam lado a lado:
     é a disposição que menos altura pede. */
  #grupo-novata{grid-column:1 / -1;grid-template-columns:repeat(3,1fr)}
  /* A grelha das aplicações também: em meia coluna crescia para baixo. */
  #grupo-apps{grid-column:1 / -1}
}