/* ==========================================================================
   NEURIS — Página de Adesão (adesao.html)
   Convite + duas vias (online / PDF) e formulário em 5 passos. Reaproveita
   os campos .contacto__form-* (css/components.css); aqui só o que é próprio
   da secção: cartões das vias, stepper, chips, dropzone e navegação.
   ========================================================================== */

.adesao {
  min-height: 100vh;
  padding-top: calc(var(--navbar-height) + var(--space-8));
  padding-bottom: var(--space-20);
  background-color: var(--color-bg);
}

.adesao__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.adesao__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

@media (min-width: 900px) {
  .adesao__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
}

.adesao__lead .eyebrow,
.adesao__lead .section-title {
  margin-bottom: var(--space-6);
}

.adesao__intro {
  max-width: 38ch;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

/* Processo em 3 passos — lista numerada em mono, filete entre linhas */
.adesao__passos {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.adesao__passos li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.adesao__passo-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-text);
  padding-top: 2px;
}

/* --- Vias: online (destacada) e PDF --- */
.adesao__vias {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.adesao__via {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.adesao__via--online {
  border-color: var(--color-border-accent);
  background-color: var(--color-accent-dim);
}

.adesao__via-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}

.adesao__via--online .adesao__via-label {
  color: var(--color-accent-text);
}

.adesao__via-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.adesao__via-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.adesao__mail {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

.adesao__start,
.adesao__download {
  gap: var(--space-3);
  min-height: 48px;
}

.adesao__start svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}

.adesao__start:hover svg {
  transform: translateY(3px);
}

.adesao__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* --- Página do pedido (adesao-pedido.html) ---
   Uma coluna de leitura; os blocos 01–05 uns por baixo dos outros, cada um
   aberto por um filete e um número, como na ficha em papel. */
.adesao-pedido__inner {
  max-width: 820px;
}

.adesao-pedido__voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.adesao-pedido__voltar:hover {
  color: var(--color-text);
}

.adesao-pedido .eyebrow,
.adesao-pedido__title {
  margin-bottom: var(--space-5);
}

.adesao-pedido__intro {
  max-width: 60ch;
  margin-bottom: var(--space-10);
}

.adesao__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.adesao__bloco {
  border: 0;
  margin: 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-border-strong);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* O <legend> não aceita bem flex em todos os browsers — float + width
   tiram-no do "buraco" da borda do fieldset e deixam-no no fluxo normal */
.adesao__legend {
  float: left;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.adesao__legend + * {
  clear: both;
}

.adesao__legend-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-accent-text);
}

.adesao__sub {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: calc(var(--space-2) * -1);
}

.adesao__opt {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-tertiary);
}

.adesao__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-4);
}

@media (min-width: 640px) {
  .adesao__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .adesao__span-2 {
    grid-column: 1 / -1;
  }
}

.adesao__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.adesao__hint {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

.adesao__hint a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* Chips — radio/checkbox reais por baixo (acessíveis por teclado); o
   cartão visível muda com :checked e mostra o foco do input */
.adesao__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.adesao__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--color-text-secondary);
  background-color: var(--color-bg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.adesao__chip:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text);
}

.adesao__chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.adesao__chip:has(input:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-accent-dim);
  color: var(--color-text);
}

.adesao__chip:has(input:checked)::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background-color: var(--color-accent);
}

.adesao__chip:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.adesao__group[aria-invalid="true"] .adesao__chip {
  border-color: var(--color-danger-border);
}

.adesao__outra {
  max-width: 28rem;
}

.adesao__outra[hidden] {
  display: none;
}

/* Dropzone — o <label> envolve o input, por isso clique e Enter funcionam */
.adesao__dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 96px;
  padding: var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.adesao__dropzone svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.adesao__dropzone:hover,
.adesao__dropzone.is-dragover {
  border-color: var(--color-accent);
  background-color: var(--color-accent-dim);
}

.adesao__dropzone[aria-invalid="true"] {
  border-color: var(--color-danger-text);
}

.adesao__dropzone:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.adesao__file {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.adesao__ficheiros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.adesao__ficheiros:empty {
  display: none;
}

.adesao__ficheiro {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.adesao__ficheiro-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.adesao__ficheiro-tam {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.adesao__ficheiro-remover {
  min-width: 32px;
  min-height: 32px;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.adesao__ficheiro-remover:hover {
  color: var(--color-danger-text);
}

/* Declaração — o texto da ficha em papel, numa caixa de leitura */
.adesao__declaracao {
  padding: var(--space-5);
  border-left: 2px solid var(--color-accent);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.adesao__checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.adesao__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  cursor: pointer;
}

.adesao__check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-accent);
}

.adesao__check a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.adesao__local {
  max-width: 28rem;
}

/* Submeter — nota de privacidade à esquerda, botão à direita */
.adesao__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-strong);
}

.adesao__acoes-nota {
  flex: 1 1 14rem;
  max-width: 28rem;
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-tertiary);
}

@media (max-width: 559px) {
  .adesao__submit {
    width: 100%;
  }
}

.adesao__ref {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.adesao__ref code {
  font-family: var(--font-mono);
  color: var(--color-text);
}

#adesao-success:focus {
  outline: none;
}