/* ============================================================
   LW001-JS · Lisboa · PRÉ-INSCRIÇÃO v2
   Camada de acabamento — Mira ♓ (web-designer) · 2026-08-18

   Carrega SEMPRE depois de assets/style.css.
   Este ficheiro NÃO substitui o sistema existente: estende-o.
   Identidade herdada e inalterada: #0A0A0A / #F5F1E8 / #C9A961,
   Cormorant Garamond + Inter.
============================================================ */

/* ---------- Tokens novos (só o que faltava) ---------- */
:root {
  /* Placeholder tinha 2,67:1 sobre o input (rgba .5) — reprovava WCAG AA.
     Cor sólida medida em 4,90:1 sobre o fundo composto do campo (#1D1B17). */
  --color-placeholder: #8E8880;

  /* Verde WhatsApp: branco sobre #25D366 dá 1,98:1 (reprova).
     Texto escuro (#062012) sobre o mesmo verde dá 8,66:1. */
  --color-whatsapp: #25D366;
  --color-whatsapp-deep: #1EB855;

  /* Degraus 8pt que faltavam no sistema base (só existiam 1,2,3,4,6,8,12,16,20,24).
     Sem isto, var(--space-10) resolvia para nada e o ritmo vertical colapsava. */
  --space-10: 2.5rem;
  --space-14: 3.5rem;
  --space-32: 8rem;

  /* Larguras de bloco em px (nunca ch quando há título dentro) */
  --w-read: 680px;   /* parágrafo corrido */
  --w-head: 780px;   /* cabeçalho de secção com H2 */
  --w-form: 520px;   /* cartão de formulário isolado */
}

/* ---------- Acessibilidade de base ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-accent);
  color: #0A0A0A;
  padding: var(--space-3) var(--space-6);
  font-weight: 700;
  font-size: var(--fs-sm);
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
  left: 0;
  color: #0A0A0A;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[hidden] { display: none !important; }

/* Foco visível reforçado — o outline dourado precisa de contraste sobre
   superfícies claras (o botão dourado). Anel duplo resolve nos dois fundos. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.btn:focus-visible,
.summary:focus-visible {
  outline: 2px solid #0A0A0A;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-accent-hover);
}

/* ---------- Barra de topo ---------- */
.topbar {
  background: var(--color-accent-soft);
  border-bottom: 1px solid var(--color-border-strong);
  text-align: center;
  padding: 0.65rem var(--space-4);
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}

/* ---------- Hero ---------- */
.hero { min-height: auto; padding: var(--space-12) 0 var(--space-16); }
@media (min-width: 900px) {
  .hero { min-height: 92vh; padding: var(--space-16) 0 var(--space-16); }
}
/* 🐛 O .badge herdado é inline-flex sem wrap: a linha
   "Lisboa · Outubro 2026 · 20 vagas por turma" com tracking 0.16em mede ~400px
   e empurra a página inteira para lá dos 375px (o H1 deixa de quebrar e sai do
   ecrã). Defeito que já existe na página no ar. Corrigido aqui. */
.badge {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  row-gap: var(--space-1);
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 430px) {
  .badge { letter-spacing: 0.1em; padding: var(--space-2) var(--space-3); }
  .topbar { letter-spacing: 0.14em; }
}

.hero__title { text-wrap: balance; overflow-wrap: break-word; }
.hero__subtitle { max-width: 520px; }

/* Linha de estado do funil — substitui o .hero__anchor com o mesmo peso visual */
.hero__state {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-text);
  margin-bottom: var(--space-8);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  max-width: 520px;
}
.hero__state span { color: var(--color-text-muted); font-style: normal; font-family: var(--font-body); font-size: var(--fs-sm); display: block; margin-top: var(--space-2); }

/* Slot de foto do hero — fica escondido até existir imagem.
   NUNCA publicar moldura vazia. */
.slot-image { display: none; }

/* ---------- Formulário ---------- */
.form-card { scroll-margin-top: var(--space-8); }
/* Num portátil de 1280x720 o bloco legal empurrava o botão para baixo da dobra.
   O CTA acima da dobra é o motivo de existir desta secção — apertar aqui. */
@media (min-width: 900px) {
  .hero { padding-top: var(--space-12); }
  .hero .form-card { padding: var(--space-6); }
  .hero .form-card__sub { margin-bottom: var(--space-4); }
  .hero .form-legal { margin: var(--space-4) 0; padding-top: var(--space-4); }
}
/* Portátil baixo (720p): modo compacto do cartão, sem tocar na identidade. */
@media (min-width: 900px) and (max-height: 780px) {
  .hero { padding-top: var(--space-8); }
  .hero .form-card__title { font-size: var(--fs-md); }
  .hero .form-field { margin-bottom: var(--space-3); }
  .hero .form-field input { padding: var(--space-3) var(--space-4); }
  .hero .btn--lg { padding: var(--space-4) var(--space-6); }
}
.form-card__title { font-size: var(--fs-lg); }

.form-field input::placeholder { color: var(--color-placeholder); opacity: 1; }
.form-field input:focus { outline: none; }

.field-hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--color-text-muted);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

/* Erro: nunca só por cor — leva ícone textual e texto */
.form-field.has-error input {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(212, 117, 107, 0.18);
}
.field-error {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-error);
  font-weight: 500;
}
.form-field.has-error .field-error { display: block; }
.field-error::before { content: '⚠ '; }

/* ---------- Bloco legal RGPD ----------
   Caixa 1 (aceite_termos)     · obrigatória · ACEITAÇÃO, não consentimento.
                                 Base legal = diligências pré-contratuais.
                                 Nunca rotular como "consinto".
   Caixa 2 (aceite_marketing)  · OPCIONAL · consentimento a sério.
                                 Nunca recebe estado de erro, nunca bloqueia o submit.
   Nenhuma das duas é pré-marcada. */
.form-legal {
  margin: var(--space-6) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-4);
}
.consent-note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--color-text-muted);
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.form-consent a { text-decoration: underline; text-underline-offset: 2px; }
/* O erro do aceite nunca é só cor: leva ícone e frase. */
.consent-error {
  display: block;
  margin: calc(var(--space-2) * -1) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--color-error);
  font-weight: 500;
}
.consent-error:empty { display: none; }
.consent-error::before { content: '⚠ '; }

.form-consent.has-error { color: var(--color-error); }
/* A caixa opcional nunca recebe estado de erro — o form submete com ela vazia. */
.form-consent--optional.has-error { color: var(--color-text-muted); }
.form-consent--optional.has-error input[type="checkbox"] { outline: none; }
.form-consent.has-error input[type="checkbox"] { outline: 2px solid var(--color-error); outline-offset: 2px; }

.btn[disabled] { opacity: 0.65; cursor: progress; transform: none; }

/* ---------- Faixa de prova (S2) ---------- */
.proofstrip {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  padding: var(--space-8) 0;
}
.proofstrip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
  text-align: center;
}
@media (min-width: 720px) {
  .proofstrip__grid { grid-template-columns: repeat(4, 1fr); }
}
.proofstrip__item { position: relative; }
@media (min-width: 720px) {
  .proofstrip__item + .proofstrip__item::before {
    content: '';
    position: absolute;
    left: calc(var(--space-2) * -1);
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: var(--color-border);
  }
}
.proofstrip__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.proofstrip__label {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------- Cabeçalhos de secção ---------- */
.section__head { max-width: var(--w-head); }
.section__title { text-wrap: balance; }
.section__lede {
  max-width: var(--w-read);
  margin: 0 auto var(--space-10);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

/* ---------- Âncora de CTA no fim de secção ---------- */
.anchor-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.link-cta:hover {
  background: rgba(201, 169, 97, 0.2);
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
  transform: translateY(-2px);
}
.link-cta__arrow { transition: transform 0.25s; }
.link-cta:hover .link-cta__arrow { transform: translateX(4px); }

/* ---------- Vozes do avatar (S5) ---------- */
.voices {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--w-read);
  display: grid;
  gap: var(--space-4);
}
.voices li {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-12);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--color-text);
  transition: border-color 0.3s, background 0.3s;
}
.voices li:hover { background: #1E1C18; border-left-color: var(--color-accent-hover); }
.voices li::before {
  content: '“';
  position: absolute;
  left: var(--space-4);
  top: 0.28em;
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.55;
}
.voices-close {
  max-width: var(--w-read);
  margin: var(--space-10) auto 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-text);
}

/* ---------- Processo · 3 passos (S7) ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--w-head);
  display: grid;
  gap: var(--space-8);
  counter-reset: step;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); max-width: none; }
}
.step {
  position: relative;
  padding-left: var(--space-16);
}
@media (min-width: 900px) {
  .step { padding-left: 0; padding-top: var(--space-16); }
}
.step__num {
  position: absolute;
  left: 0;
  top: -0.15em;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-accent-soft);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-accent);
  line-height: 1;
}
@media (min-width: 900px) {
  .step__num { top: 0; }
  /* fio que liga os passos — só no desktop, onde a leitura é horizontal */
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 64px;
    right: var(--space-4);
    top: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-border-strong), transparent);
  }
}
.step__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.step__text { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }

.section-close {
  max-width: var(--w-read);
  margin: var(--space-12) auto 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-text);
}

/* ---------- FAQ (S8) — <details>, teclado nativo ---------- */
.faq {
  max-width: var(--w-head);
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
}
.faq__item {
  border-bottom: 1px solid var(--color-border);
}
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-accent); }
.faq__q:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.faq__icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 0.15em;
  position: relative;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  transition: transform 0.3s ease, background 0.3s;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: 10px; height: 1px; }
.faq__icon::after  { width: 1px; height: 10px; transition: opacity 0.25s; }
.faq__item[open] .faq__icon { transform: rotate(180deg); background: var(--color-accent-soft); }
.faq__item[open] .faq__icon::after { opacity: 0; }
.faq__a {
  padding: 0 var(--space-1) var(--space-6);
  margin: 0;
  max-width: var(--w-read);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------- CTA final (S9) ---------- */
.cta-section { scroll-margin-top: var(--space-4); }
/* .cta-section herda text-align:center do sistema base e isso centrava
   labels, dicas e texto das caixas legais. Campo de formulário lê-se à esquerda. */
.cta-section .form-card { max-width: var(--w-form); text-align: left; }
.cta-section .form-card .form-microcopy { text-align: center; }

/* O rótulo "QUERO CANDIDATAR-ME" partia em duas linhas a 375px. */
@media (max-width: 430px) {
  .btn--lg {
    font-size: var(--fs-base);
    letter-spacing: 0.04em;
    padding: var(--space-4) var(--space-4);
  }
}

/* ---------- Galeria (escondida até existirem fotos) ---------- */
.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); margin-top: var(--space-12); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.gallery img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* ---------- Alcance nas redes (dentro da bio) ----------
   Tem de LER-SE como contexto pessoal, não como métrica de produto — por isso
   não reutiliza nada do .proofstrip: valor em Inter (não no serif), corpo pequeno,
   deitado na linha do texto e separado por um filete, não por cartões. */
.bio-social {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
.bio-social li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.bio-social__value {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}
.bio-social__label {
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}

/* ---------- Foto da bio ----------
   A foto é 9:16 (900x1600) e não é retrato: é o João de pé no ciclorama com
   os alunos sentados à volta. No recorte 3:4 vê-se 75% da altura da origem.
   Com object-position 30% (base) cortava os alunos e ficava teto a mais.
   80% abre a janela em 21%–96%: entra o softbox, o João inteiro e a roda de alunos. */
.bio__photo img { object-position: center 80%; }
@media (min-width: 900px) { .bio__photo img { object-position: center 72%; } }

/* ---------- Rodapé ---------- */
.footer__legal { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--color-text-muted); }
.footer__links a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CTA fixo no mobile ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border-strong);
  transform: translateY(110%);
  /* visibility tira o link do foco por teclado enquanto a barra está escondida —
     senão haveria um CTA duplicado invisível na ordem de tabulação. */
  visibility: hidden;
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
}
.sticky-cta.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s ease, visibility 0s;
}
.sticky-cta .btn { padding: var(--space-4) var(--space-6); font-size: var(--fs-sm); }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- Página de obrigado ---------- */
/* 🐛 .btn é inline-flex em linha: o .btn__sub (display:block) ficava AO LADO
   do rótulo em vez de por baixo, e o botão partia em três linhas.
   Defeito herdado da obrigado que está no ar. */
.btn { flex-wrap: wrap; }
.btn__sub { flex: 0 0 100%; text-align: center; }

.thanks-hero { min-height: auto; padding: var(--space-16) 0 var(--space-12); }
/* Branco sobre verde WhatsApp mede 1,98:1 — reprova AA.
   Texto escuro #062012 mede 8,66:1 no topo do gradiente e 6,58:1 na base. */
.btn--whatsapp,
.btn--whatsapp:hover {
  background: linear-gradient(180deg, var(--color-whatsapp) 0%, var(--color-whatsapp-deep) 100%);
  color: #062012;
}
.btn--whatsapp:focus-visible { box-shadow: 0 0 0 5px #9BE7BB; }

.next-steps { max-width: var(--w-head); margin: 0 auto; text-align: left; }
.waiting {
  max-width: var(--w-head);
  margin: 0 auto;
  display: grid;
  gap: var(--space-6);
  text-align: left;
}
@media (min-width: 720px) { .waiting { grid-template-columns: repeat(2, 1fr); } }
.waiting .card__title { font-size: var(--fs-lg); }

/* ---------- Ritmo vertical (lido de cima a baixo em 375px) ---------- */
.section { padding: var(--space-16) 0; }
@media (min-width: 900px) { .section { padding: var(--space-20) 0; } }
.section--tight { padding-top: var(--space-12); }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky-cta { transition: none; }
  .link-cta:hover, .card:hover, .btn:hover { transform: none; }
}