/* ============================================================
   Papelaria Reinel — Reinel Colecionadores (clube)
   Carrega depois de styles.css e shop.css, que fornecem os tokens.
   Ficheiro proprio, como shop.css e legal.css: a folha da landing em
   producao nao e tocada por trabalho do clube.

   Sem atributos de estilo em linha: a CSP proibe-os.

   Cor do clube: Ouro Velho #bfa060. Uma cor, um significado — terracota e
   pagar, verde escuro e navegar, verde WhatsApp e WhatsApp. Aderir a um
   clube gratuito nao e nenhuma das tres.

   Contraste medido (WCAG 2.x), nao estimado:
     ouro #bfa060 + tinta #231814   6,94:1  texto do botao   passa AA
     hover #b39552 + tinta          6,05:1                   passa AA
     ouro sobre creme #f8f1e7       2,23:1  FALHA os 3:1 de componentes
   Por isso o ouro nunca e o unico contorno de um campo nem o anel de foco:
   contornos em tinta, foco herdado de styles.css (terracota escuro, 7,75:1).
     contorno dos campos rgba(35,24,20,0.55) = #86807e
                        sobre branco #fff  3,89:1  passa os 3:1 de componentes
                        sobre creme        3,47:1  (lado de fora do campo)
     (antes 0.35 = #b2aead: 2,20:1 sobre branco, falhava)
     notas e texto secundario em --ink-soft #5b4b3f
                        sobre creme        7,42:1  passa AA
                        sobre --paper-deep 6,57:1  passa AA
     (--muted #93826e dava 3,31:1 sobre creme e 2,93:1 sobre --paper-deep:
      nao se usa para texto no clube)
     campo com erro: contorno terracota escuro #7a3821 sobre branco 8,70:1
   ============================================================ */

.btn-ouro {
  border: 0; /* sem isto o <button> mostra a borda 'outset' por defeito do browser */
  white-space: normal; /* o texto longo tem de quebrar a 320px em vez de sair do formulario */
  max-width: 100%;
  text-align: center;
  background: var(--ouro);
  color: var(--ink);
}
.btn-ouro:hover {
  background: #b39552;
  transform: translateY(-2px);
}
.btn-ouro:disabled {
  opacity: 0.6;
  transform: none;
  cursor: wait;
}

/* ---------- Seccao ---------- */
.clube {
  padding: 5.5rem 0;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
}
.clube-intro {
  max-width: 44rem;
  margin-bottom: 3rem;
}
.clube-titulo {
  margin: 0 0 1.25rem;
  line-height: 0;
  display: inline-block;
}
.clube-titulo img {
  width: min(480px, 100%);
  height: auto;
}
.clube-salto { margin-top: 1.5rem; }
@media (min-width: 1000px) {
  .clube-salto { display: none; }
}
.clube-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 36rem;
}

/* ---------- Corpo: beneficios e formulario ----------
   Uma coluna ate 999px; a partir dai beneficios (5fr) ao lado do formulario (7fr). */
.clube-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}
@media (min-width: 1000px) {
  .clube-corpo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.5rem;
    align-items: start;
  }
}

/* ---------- Beneficios em tres grupos ----------
   Oito cartoes iguais sao uma lista de supermercado. O nucleo ("Chegar
   primeiro") leva mais peso: fundo tinta, barra ouro. */
.clube-grupos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 800px) {
  .clube-grupos { grid-template-columns: 1.15fr 1fr 1fr; }
}
/* Em ecra largo os beneficios passam para a coluna da esquerda, empilhados. */
@media (min-width: 1000px) {
  .clube-grupos { grid-template-columns: minmax(0, 1fr); }
}
/* Fixos enquanto se percorre o formulario, so quando cabem inteiros no ecra. */
@media (min-width: 1000px) and (min-height: 56rem) {
  .clube-grupos { position: sticky; top: 6.5rem; }
}
.clube-grupo {
  background: var(--paper);
  border-radius: 1.5rem;
  padding: 1.75rem;
  border-top: 4px solid var(--ouro);
}
.clube-grupo h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.clube-grupo li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.clube-grupo li:last-child { border-bottom: none; }
.clube-grupo strong { color: var(--ink); }
.clube-grupo-nucleo {
  background: var(--ink);
  color: var(--paper);
}
.clube-grupo-nucleo li { color: rgba(248, 241, 231, 0.85); border-bottom-color: rgba(248, 241, 231, 0.18); }
.clube-grupo-nucleo strong { color: var(--ouro); }

/* ---------- Formulario ---------- */
.clube-form {
  background: var(--paper);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  scroll-margin-top: 6.5rem;
}
@media (min-width: 640px) {
  .clube-form { padding: 2.5rem; }
}
.clube-form-titulo {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.clube-campos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .clube-campos { grid-template-columns: 1fr 1fr; }
  .clube-campos .campo:first-child { grid-column: 1 / -1; }
}
.campo { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.campo[hidden] { display: none; }
.clube-campos .campo { margin-top: 0; }
.campo label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}
.campo-nota {
  font-weight: 400;
  color: var(--ink-soft);
}
.campo input,
.campo textarea {
  font: inherit;
  /* 16px: abaixo disso o iPhone amplia a pagina ao focar o campo. */
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(35, 24, 20, 0.55);
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.campo input:focus-visible,
.campo textarea:focus-visible {
  border-color: var(--ink);
}
.campo textarea { resize: vertical; min-height: 5rem; }
/* Campo recusado pela validacao do browser: o clube.js poe aria-invalid, e a
   mensagem de estado diz "campos assinalados" — tem de haver assinalados. */
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--terracotta-deep);
  border-width: 2px;
}
.opcao input[aria-invalid="true"] {
  outline: 2px solid var(--terracotta-deep);
  outline-offset: 2px;
}

.clube-fieldset {
  border: 0;
  padding: 0;
  margin: 1.5rem 0 0;
  min-width: 0;
}
.clube-fieldset legend {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0;
  margin-bottom: 0.6rem;
}
.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.opcoes-colecoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.5rem 1rem;
}
.opcao {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  /* Area de toque: a linha sozinha tinha 21px; o minimo do WCAG 2.2 e 24px. */
  padding: 0.2rem 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
  cursor: pointer;
}
.opcao input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ink);
  flex-shrink: 0;
}

/* O honeypot sai do fluxo visual e do fluxo de teclado (tabindex=-1 no
   HTML), mas continua no DOM para os scripts o preencherem. Nao e
   display:none: alguns bots saltam campos escondidos assim. */
.clube-isco {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Aviso de informacao (RGPD art. 13.º) — primeira camada, por cima das caixas. */
.clube-aviso {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--paper-deep);
  border-left: 3px solid var(--ouro);
  border-radius: 0 0.75rem 0.75rem 0;
}
.clube-aviso p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.clube-aviso a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

.clube-consentimentos {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.25rem;
}
.opcao-consentimento { color: var(--ink); }

.clube-acoes {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}
.clube-menores {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Estado inline, anunciado por aria-live. Nunca alert().
   O elemento esta sempre no DOM e na arvore de acessibilidade (sem hidden
   nem display:none): uma regiao que aparece ja com texto pode nao ser
   anunciada. Vazio, encolhe a nada. */
.clube-estado {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.5;
  background: var(--paper-deep);
  color: var(--ink);
}
.clube-estado:empty {
  margin: 0;
  padding: 0;
  border: 0;
}
.clube-estado-sucesso { background: #e3ecdf; border-left: 3px solid var(--verde-deep); }
.clube-estado-erro { background: #f3ddd4; border-left: 3px solid var(--terracotta-deep); }

.clube-sem-js {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.75rem;
  background: var(--paper-deep);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}

/* Pagina de remocao (colecionadores/sair/): o paragrafo de estado. Nao usa
   .legal-meta, que e --muted e vive na legal.css das paginas legais. */
.clube-sair-texto {
  color: var(--ink-soft);
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- Teaser na home (v1.3) ----------
   A pagina completa esta em colecionadores/. Aqui so o convite, com o
   botao verde escuro: navegar, nao aderir nem pagar. */
.clube-teaser {
  padding: 4rem 0;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
}
.clube-teaser-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.clube-teaser-copy { max-width: 40rem; }
.clube-teaser-acao { flex-shrink: 0; }

/* A pagina do clube tem o cabecalho fixo do site: a seccao reserva-lhe espaco. */
.clube-pagina .clube { padding-top: 8.5rem; }