/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA VISUAL DO BRAND TALK CLUBE
   Fonte única de verdade para cor, tipografia, espaço, largura e botão.

   Por que existe: antes disto cada página tinha as próprias regras. A home
   usava 6 larguras de conteúdo e 5 tamanhos de título; a página do evento
   usava outra escala; e assinatura-mensal, login e minha-conta não usavam a
   tipografia da marca — caíam em Arial. O resultado era um site que parecia
   montado por gente diferente a cada tela.

   Como usar numa página nova:
     <link rel="stylesheet" href="/marca.css">
   e depois usar as variáveis (--laranja, --esp-secao, --t2...) em vez de
   escrever valores soltos.

   Este arquivo é carregado ANTES do <style> de cada página, então qualquer
   regra local ainda vence. Isso é proposital: dá para adotar o sistema aos
   poucos, sem quebrar o que já funciona.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Cores da marca ─────────────────────────────────────────────────── */
  --off: #fbebd3;        /* off-white, fundo claro */
  --laranja: #f0522b;    /* cor de ação: botões, destaques */
  --rosa: #eb7390;       /* cor de apoio */
  --ink: #2b1710;        /* tinta, texto e fundos escuros */

  /* Variações de transparência, para não inventar tom novo a cada uso */
  --ink-70: rgba(43, 23, 16, .7);
  --ink-45: rgba(43, 23, 16, .45);
  --ink-12: rgba(43, 23, 16, .12);
  --off-70: rgba(251, 235, 211, .7);
  --off-40: rgba(251, 235, 211, .4);
  --off-15: rgba(251, 235, 211, .15);

  /* ── Tipografia ─────────────────────────────────────────────────────── */
  --serif: "Playfair Display", Georgia, serif;   /* títulos */
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* texto */

  /* Escala de título: três degraus, e só. Antes a home tinha cinco tamanhos
     de h2 sem hierarquia — só variação. */
  --t1: clamp(2.6rem, 7vw, 5rem);      /* capa */
  --t2: clamp(2rem, 4.6vw, 3.6rem);    /* título de seção */
  --t3: clamp(1.2rem, 1.9vw, 1.6rem);  /* título dentro de card */
  --texto: clamp(.95rem, 1.05vw, 1.05rem);

  /* ── Espaço ─────────────────────────────────────────────────────────── */
  --esp-secao: clamp(56px, 7vw, 104px); /* respiro vertical entre seções */
  --esp-bloco: clamp(26px, 3.5vw, 44px);/* do título até o conteúdo */
  --gutter: clamp(16px, 2.5vw, 28px);   /* entre cards */
  --pad-lateral: clamp(20px, 5vw, 72px);

  /* ── Estrutura ──────────────────────────────────────────────────────── */
  --largura: 1240px;   /* largura máxima do conteúdo, igual em todo o site */
  --raio: 18px;        /* canto de card */
  --btn-raio: 999px;   /* canto de botão — trocar aqui muda o site inteiro */
}

/* ── Base ─────────────────────────────────────────────────────────────── */
.marca-base {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--off);
  font-size: var(--texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.marca-base h1, .marca-base h2, .marca-base h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  text-wrap: balance; /* distribui as linhas do título em blocos parecidos */
}
/* Evita a última linha do parágrafo ficar com uma palavra solta. Sem isto
   aparecia coisa como "...garantido até o / fim." */
.marca-base p, .marca-base li { text-wrap: pretty; }

/* Medida de leitura: linha longa demais cansa, curta demais pica o texto.
   65 caracteres é a faixa confortável. */
.marca-leitura { max-width: 65ch; }

/* Campo, botão e select NÃO herdam fonte do body — é padrão do navegador, e
   passa despercebido. Era por isso que login, minha-conta, home e checkout
   continuavam com Arial mesmo depois de trocar a fonte do corpo. */
input, button, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Largura de conteúdo. Antes cada seção escolhia a sua, e por isso o site
   parecia descentralizado ao rolar. */
.marca-wrap {
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

/* ── Botão ────────────────────────────────────────────────────────────── */
/* Um desenho só. Antes a home tinha quatro (raios 0 e 50px, fontes de 10 a
   22px) e a página do evento tinha um quinto. */
.marca-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1.05em 2.3em;
  border-radius: var(--btn-raio);
  border: 1.5px solid var(--laranja);
  background: var(--laranja);
  color: var(--off);
  cursor: pointer;
  transition: all .3s cubic-bezier(.34, .1, .64, .1);
  box-shadow: 0 4px 20px rgba(240, 82, 43, .15);
}
.marca-btn:hover {
  background: var(--rosa);
  border-color: var(--rosa);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(235, 115, 144, .25);
}
.marca-btn:active { transform: translateY(-1px); }
.marca-btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* Sobre fundo escuro ou laranja, o botão inverte para não sumir. */
.marca-escuro .marca-btn, .marca-laranja .marca-btn {
  background: var(--off);
  border-color: var(--off);
  color: var(--ink);
}

/* ── Campo de formulário ──────────────────────────────────────────────── */
/* Existe porque as telas de pagamento e login usavam campos sem identidade,
   com a borda cinza padrão do navegador — logo onde a pessoa digita cartão. */
.marca-campo {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  padding: .85em 1em;
  border: 1px solid var(--ink-12);
  border-radius: 10px;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.marca-campo:focus {
  outline: none;
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(240, 82, 43, .12);
}
.marca-rotulo {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 1.1em 0 .4em;
}

/* ── Acessibilidade ───────────────────────────────────────────────────── */
:focus-visible {
  outline: 2.5px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 6px;
}
.marca-escuro :focus-visible, .marca-laranja :focus-visible { outline-color: var(--off); }

@media (prefers-reduced-motion: reduce) {
  .marca-btn { transition: none; }
  .marca-btn:hover { transform: none; }
}