/* =====================================================================
   CENTRAL DE AJUSTES · Página de vendas MasterClass Faça e Venda · v2 (03/11/2026)
   Mude aqui cores, fontes, tamanhos e espaços. O site.css só puxa
   destas variáveis.
   Cores: marca Faça e Venda (01-MARCA, mesmas dos criativos da REMESSA-01)
   v2: sem lilás na interface (o lilás fica só nas fotos do kit).

   CONTRASTE MEDIDO (WCAG, razão) dos pares usados:
     tinta     #2B211C sobre creme-fio  #F7F1E6  14,6  AA/AAA (texto)
     tinta     #2B211C sobre lilás-claro#ECE6F6  13,9  AA/AAA
     terracota-escuro #9E5639 sobre creme-fio     5,0  AA (texto pequeno)
     terracota #C47455 sobre creme-fio            3,2  só título grande (>= 24px)
     branco    #FFFFFF sobre terracota-escuro     5,4  AA (botão de compra no claro)
     tinta     #2B211C sobre salvia-clara         ~11  AA/AAA (dobra "Veja de perto")
     branco    #FFFFFF sobre terracota-escuro     5,4  AA (cartão "Fazer o kit")
     creme-fio #F7F1E6 sobre noite #1E1714       16,4  AA/AAA
     mel       #ECC691 sobre noite               11,4  AA/AAA (destaques no escuro)
     noite     #1E1714 sobre mel                 11,4  AA/AAA (botão no escuro)
   Proibido: vermelho; texto pequeno em terracota clara; branco sobre mel.
   ===================================================================== */

@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* ---------- CORES (só estas; não inventar outras) ---------- */
  --terracota:        #C47455;   /* cor da logo: títulos grandes, fio */
  --terracota-escuro: #9E5639;   /* texto terracota, cartão "Fazer o kit" */
  --salvia:           #94AA91;   /* fio verde da logo: detalhes */
  --mel:              #ECC691;   /* fio dourado da logo: destaque no escuro, etiqueta */
  --creme-papel:      #EFE8DB;   /* fundo de seção clara alternada */
  --creme-fio:        #F7F1E6;   /* fundo principal */
  --tinta:            #2B211C;   /* texto */
  --noite:            #1E1714;   /* seções escuras */
  --branco:           #FFFFFF;

  /* derivados (misturas das cores acima, nunca cor nova) */
  --tinta-apagada:  color-mix(in srgb, var(--tinta) 72%, var(--creme-fio));
  --creme-apagado:  color-mix(in srgb, var(--creme-fio) 70%, var(--noite));
  --fio-claro:      color-mix(in srgb, var(--tinta) 12%, transparent);   /* bordas finas no claro */
  --fio-escuro:     color-mix(in srgb, var(--creme-fio) 13%, transparent);/* bordas finas no escuro */
  --mel-claro:      color-mix(in srgb, var(--mel) 34%, var(--creme-fio)); /* fundo da dobra "O que muda" */
  --noite-cartao:   color-mix(in srgb, var(--noite) 88%, var(--creme-fio));
  --salvia-clara:   color-mix(in srgb, var(--salvia) 26%, var(--creme-fio)); /* fundo da dobra "Veja de perto" */
  --noite-ingresso: color-mix(in srgb, var(--noite) 82%, var(--terracota-escuro)); /* ingresso do preço */

  /* ---------- FONTES ---------- */
  --fonte-titulo: "Figtree", "Helvetica Neue", Arial, sans-serif; /* títulos */
  --peso-titulo: 700;
  --fonte-destaque: "Source Serif 4", Georgia, serif; /* itálico: frases de destaque e números grandes */
  --fonte-texto:  "Figtree", "Helvetica Neue", Arial, sans-serif; /* todo o resto */

  /* ---------- TAMANHOS DE TEXTO ---------- */
  --t-h1:      clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem);
  --t-h2:      clamp(1.65rem, 1.2rem + 2vw, 2.8rem);
  --t-frase:   clamp(1.5rem, 1rem + 2.4vw, 3.2rem);   /* frases de impacto */
  --t-bordao:  clamp(2.6rem, 1.4rem + 6vw, 6.5rem);   /* "Não é dom, é técnica" */
  --t-preco:   clamp(3.2rem, 2rem + 6vw, 6rem);        /* 8x de R$ 9,49 */
  --t-h3:      clamp(1.05rem, .98rem + .35vw, 1.25rem);
  --t-lead:    clamp(1.05rem, .98rem + .4vw, 1.3rem);
  --t-texto:   clamp(1rem, .96rem + .18vw, 1.08rem);
  --t-rotulo:  clamp(.8rem, .77rem + .15vw, .9rem);
  --t-botao:   clamp(.95rem, .9rem + .25vw, 1.05rem);

  /* ---------- ESPAÇOS (base 8) ---------- */
  --e-1: .5rem;  --e-2: 1rem;  --e-3: 1.5rem;  --e-4: 2rem;  --e-5: 3rem;  --e-6: 4rem;
  --lateral:   clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --largura:   1200px;
  --secao-y:   clamp(3.5rem, 2rem + 5vw, 6rem);

  /* ---------- FORMA (referência da Black: 14 e 22) ---------- */
  --raio:         14px;    /* botões e campos */
  --raio-cartao:  22px;    /* cartões */
  --raio-foto:    28px;    /* molduras de foto */
  --raio-secao:   clamp(36px, 4.5vw, 56px);  /* cantos da seção que sobe sobre a anterior */
  --linha-claro:  inset 0 0 0 1px var(--fio-claro);
  --linha-escuro: inset 0 0 0 1px var(--fio-escuro);
  --sombra-1:     0 8px 20px -14px color-mix(in srgb, var(--noite) 50%, transparent); /* única sombra, curta */

  /* ---------- FIO (o rabo do novelo da logo) ---------- */
  --fio-cor:   var(--terracota);
  --fio-larg:  2.5px;

  /* ---------- MOVIMENTO ---------- */
  --curva:        cubic-bezier(.22, .8, .24, 1);
  --curva-saida:  cubic-bezier(.16, 1, .3, 1);
  --rapido: .22s;
  --medio:  .55s;
}