/* Ravena Eventos — tokens, fontes, reset e componentes compartilhados. Valores em specs/design.md. */

@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --preto: #050503;
  --fundo-escuro: #1c1c1c;
  --whatsapp: #25d366;
  --whatsapp-hover: #1ebe5a;
  --branco: #ffffff;
  --dourado: #c6a428;
  --dourado-claro: #f0d351;
  --dourado-escuro: #a07800;
  --dourado-texto: #8a6800;
  --degrade-ouro: linear-gradient(135deg, #a07800, #f0d351 45%, #c6a428 70%, #a07800);
  --cinza-900: #4a4a4a;
  --cinza-600: #6b6b6b;
  --cinza-200: #e6e4df;
  --cinza-50: #f7f6f3;
  --erro: #b3261e;
  --pendente-texto: #8a5a00;
  --pendente-fundo: #fff4d6;

  --fonte-titulo: "Cinzel", "Times New Roman", serif;
  --fonte-texto: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;

  --raio-p: 4px; --raio-m: 8px; --raio-g: 16px;
  --largura: 1200px;
  --gutter: 16px;
  --secao: var(--e-8);
  --transicao: 200ms ease;
}

@media (min-width: 640px) { :root { --gutter: 24px; --secao: var(--e-9); } }
@media (min-width: 1024px) { :root { --gutter: 32px; --secao: var(--e-10); } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--cinza-900);
  font-family: var(--fonte-texto);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--dourado-texto); }
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--preto); line-height: 1.2; margin: 0 0 var(--e-4); letter-spacing: 0.02em; }
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); font-weight: 600; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 600; }
h3 { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); font-weight: 500; }
p { margin: 0 0 var(--e-4); }

:focus-visible { outline: 3px solid var(--preto); outline-offset: 2px; }
.sobre-escuro :focus-visible { outline-color: var(--dourado-claro); }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular-link { position: absolute; left: var(--e-4); top: -100px; z-index: 100; background: var(--preto); color: var(--branco); padding: var(--e-3) var(--e-4); border-radius: var(--raio-m); }
.pular-link:focus { top: var(--e-4); }

.container { width: 100%; max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.sobretitulo {
  display: block; font-family: var(--fonte-texto); font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dourado-texto); margin-bottom: var(--e-3);
}

/* Marcador de conteúdo ainda não confirmado pelo proprietário (ver CLAUDE.md). */
.pendente {
  display: inline-block; padding: 0 var(--e-2); border: 1px dashed var(--dourado-escuro);
  border-radius: var(--raio-p); background: var(--pendente-fundo); color: var(--pendente-texto); font-size: 0.875em;
}

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: var(--e-3) var(--e-5); border-radius: var(--raio-m); border: 1.5px solid transparent;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.05em; text-decoration: none; cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.botao--principal { background: var(--dourado); color: var(--preto); }
.botao--principal:hover { background: var(--degrade-ouro); }
.botao--secundario { background: transparent; color: var(--preto); border-color: var(--preto); }
.botao--secundario:hover { background: var(--preto); color: var(--branco); }
.botao--whatsapp { background: var(--whatsapp); color: var(--preto); }
.botao--whatsapp:hover { background: var(--whatsapp-hover); }
.botao--instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4); color: var(--branco); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.botao--instagram:hover { filter: brightness(1.08); }
.botao--claro { background: transparent; color: var(--branco); border-color: var(--branco); }
.botao--claro:hover { background: var(--branco); color: var(--preto); }
.botao--perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
.botao--perigo:hover { background: var(--erro); color: var(--branco); }
.botao--pequeno { min-height: 40px; padding: var(--e-2) var(--e-4); font-size: 0.875rem; }
.botao--bloco { width: 100%; }
.botao:disabled, .botao[aria-disabled="true"] { background: var(--cinza-200); color: var(--cinza-600); border-color: transparent; cursor: not-allowed; }
.botao .icone { width: 20px; height: 20px; flex: none; }


/* Formulários */
.campo { display: flex; flex-direction: column; gap: var(--e-1); margin-bottom: var(--e-4); }
.campo label, .campo legend { font-weight: 500; color: var(--preto); font-size: 0.9375rem; }
.campo .opcional { font-weight: 400; color: var(--cinza-600); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: var(--e-3); border: 1px solid var(--cinza-200);
  border-radius: var(--raio-p); background: var(--branco); transition: border-color var(--transicao);
}
.campo textarea { min-height: 112px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--preto); box-shadow: 0 0 0 3px rgba(5, 5, 3, 0.15); }
.campo [aria-invalid="true"] { border-color: var(--erro); }
.campo .erro-campo { color: var(--erro); font-size: 0.875rem; display: flex; gap: var(--e-1); }
.campo .erro-campo:empty { display: none; }
.campo .erro-campo::before { content: "⚠"; }
.campo .dica { color: var(--cinza-600); font-size: 0.875rem; }


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