/* Design system do Maranata — fonte canônica dos tokens visuais.
   Espelha 2. Areas/Heavy/Marcelo Maranata/identidade-visual/contexto.md */

@font-face {
  font-family: "Gilroy";
  src: url("/assets/fonts/Gilroy-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --azul: #264DEB;
  --azul-profundo: #1A39B0;
  --lima: #D1D700;
  --navy: #0C1124;
  --ink: #15171E;
  --offwhite: #F4F5F8;
  --branco: #FFFFFF;
  /* Apoio RS — só detalhes mínimos, nunca bloco */
  --rs-verde: #5A9E35;
  --rs-amarelo: #D4C136;
  --rs-vermelho: #A82D36;
  --r-md: 16px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--offwhite);
  color: var(--ink);
  font-family: "Roboto", system-ui, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Título display */
.display {
  font-family: "Gilroy", "Arial Black", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.0;
}

/* Destaque-assinatura: bloco sólido atrás de 1–2 palavras (efeito seleção) */
.hl-lima { background: var(--lima); color: var(--azul); padding: 0 .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-azul { background: var(--azul); color: var(--branco); padding: 0 .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Botão pill */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; border: 0; cursor: pointer;
  border-radius: var(--r-pill);
  background: var(--azul); color: var(--branco);
  font: 700 16px "Roboto", sans-serif; text-decoration: none;
  transition: background .15s ease;
}
.btn:hover { background: var(--azul-profundo); }

/* Redes sociais */
.redes { display: flex; gap: 12px; }
.redes a {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: var(--branco);
  font: 700 14px "Roboto", sans-serif; text-decoration: none;
}
.redes.sobre-azul a { background: var(--branco); color: var(--azul); }

/* Animação base: fade-in up */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeInUp .6s ease both; }
@media (prefers-reduced-motion: reduce) { .fade-up { animation: none; } }

/* Container de conteúdo (privacidade etc.) */
.wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
.wrap h1 { font-family: "Gilroy","Arial Black",sans-serif; color: var(--azul); text-transform: uppercase; letter-spacing: -0.02em; }
.wrap a { color: var(--azul); }

/* Ícones de redes sociais (herdam a cor do <a> via currentColor) */
.redes a svg { width: 22px; height: 22px; display: block; }

/* Aviso de cookies (LGPD) */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--branco); color: var(--ink);
  border: 1px solid #E4E7EF; border-radius: var(--r-md);
  padding: 14px 16px; box-shadow: 0 10px 40px rgba(12,17,36,.18);
  animation: fadeInUp .4s ease both;
}
.cookie-txt { margin: 0; flex: 1 1 240px; font: 400 13px/1.45 "Roboto", sans-serif; }
.cookie-txt a { color: var(--azul); }
.cookie-acts { flex: 0 0 auto; }
.cookie-btn {
  border: 0; cursor: pointer; min-height: 40px; padding: 0 24px;
  border-radius: var(--r-pill); background: var(--azul); color: var(--branco);
  font: 700 14px "Roboto", sans-serif;
}
.cookie-btn:hover { background: var(--azul-profundo); }

/* Banner de cookies no mobile: botão full-width, mais respiro */
@media (max-width: 560px) {
  .cookie-bar { left: 12px; right: 12px; bottom: 12px; padding: 18px; gap: 16px; }
  .cookie-txt { flex-basis: 100%; font-size: 13.5px; }
  .cookie-acts { flex: 1 1 100%; }
  .cookie-btn { width: 100%; min-height: 48px; }
}