/* ============================================================
   Fest'Arte 2026 — Design Tokens
   Paleta extraída por amostragem dos PNGs oficiais da ID Visual
   (06/08/2026). Se o manual do KV divergir, o manual ganha.
   Tipografia PROVISÓRIA até resposta da P2 do follow-up.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500;1,600&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap');

:root {
  /* --- Cores oficiais do KV --- */
  --terracota: #902616;  /* títulos, CTA primário, links */
  --laranja:   #B05026;  /* subtítulos, destaques, hover */
  --telha:     #A54431;  /* dobras, gradientes, fundos de card escuros */
  --salmao:    #C16D49;  /* detalhes, bordas, ícones, tags — nunca texto pequeno */
  --palha:     #F1E1D3;  /* fundo padrão da página */
  --preto:     #333333;  /* corpo de texto */
  --branco:    #FFFFFF;

  /* --- Derivados permitidos (tints da paleta, nunca cor nova) --- */
  --palha-clara:  #F8F0E7;                    /* fundos alternados de seção */
  --terracota-escura: #6B1508;                /* shade do terracota — fundos de bloco escuros */
  --salmao-suave: rgba(193, 109, 73, .18);    /* fundo de tag, bordas leves */
  --terracota-6:  rgba(144, 38, 22, .06);     /* hover de botão secundário */

  /* --- Tipografia --- */
  --fonte-display: 'Oswald', 'Arial Narrow', sans-serif;
  --fonte-grifo: 'Playfair Display', Georgia, serif;
  --fonte-texto: 'Nunito Sans', 'Segoe UI', sans-serif;

  --display-1: clamp(2.6rem, 8.5vw, 5.2rem);
  --display-2: clamp(1.9rem, 5.5vw, 3.4rem);
  --display-3: clamp(1.15rem, 3vw, 1.5rem);
  --texto-g:  1.15rem;
  --texto-m:  1rem;
  --texto-s:  .875rem;
  --texto-xs: .8rem;

  /* --- Espaçamento (escala 8px) --- */
  --esp-1: 8px;
  --esp-2: 16px;
  --esp-3: 24px;
  --esp-4: 32px;
  --esp-6: 48px;
  --esp-8: 64px;
  --esp-12: 96px;

  /* --- Raio --- */
  --raio-s: 8px;
  --raio-m: 12px;
  --raio-g: 16px;
  --raio-pill: 999px;

  /* --- Dobra de papel (assinatura visual do KV) --- */
  --dobra: 28px;
  --sombra-dobra:   8px 8px 0 rgba(144, 38, 22, .10);
  --sombra-dobra-s: 4px 4px 0 rgba(144, 38, 22, .14);

  /* --- Movimento --- */
  --dur-1: .18s;
  --dur-2: .45s;
  --dur-3: .8s;
  --ease: cubic-bezier(.22, .8, .3, 1);
  --ease-mola: cubic-bezier(.34, 1.56, .64, 1);
}

/* --- Base --- */
* { box-sizing: border-box; }

/* imagens fluidas: sem isto os atributos width/height do HTML esticam a imagem
   quando o CSS mexe só na largura (caso da escultura no mobile) */
img { max-width: 100%; height: auto; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--texto-m);
  color: var(--preto);
  background: var(--palha);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: .01em;
  color: var(--terracota);
  margin: 0 0 .45em;
}
h3, h4 { line-height: 1.15; }

/* palavra grifada em itálico dentro de títulos (assinatura tipográfica) */
.grifo {
  font-family: var(--fonte-grifo);
  font-style: italic;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0;
}

h1 { font-size: var(--display-1); }
h2 { font-size: var(--display-2); }
h3 { font-size: var(--display-3); }

p { margin: 0 0 1em; }

a { color: var(--terracota); }
a:hover { color: var(--laranja); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}