/* Parque Creativo · proximamente
   Moi mínimo: negro sobre branco. Só «Creativo» leva cor, e vai cambiando. */

@font-face { font-family: "Red Hat Display"; src: url("../fontes/RedHatDisplay-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Red Hat Display"; src: url("../fontes/RedHatDisplay-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --branco: #FFFFFF;
  --tinta: #111111;
  --vermello: #E8262E;
  --azul: #1D4ED8;
  --amarelo: #FFC21A;
  --fc-verde: #0E261B;
  --suave: cubic-bezier(.45, 0, .2, 1);
  --fonte: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--branco); color: var(--tinta);
  font-family: var(--fonte); font-weight: 500; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }

.escena {
  min-height: 100svh; display: grid; grid-template-rows: 1fr auto;
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
.centro { display: grid; place-content: center; justify-items: center; gap: 44px; }

/* Logo: sinatura «Parque» e «Creativo» no oco da dereita do rabo da q, como no logo da marca */
.logo { width: min(86vw, 560px); margin: 0; color: var(--tinta); }
.logo svg { width: 100%; height: auto; display: block; overflow: visible; }
.logo text {
  font-family: var(--fonte); font-weight: 500; font-size: 33px; letter-spacing: .06em;
  fill: var(--vermello);
  animation: cor 12s var(--suave) infinite;
}
@keyframes cor {
  0%, 20%   { fill: var(--vermello); }
  25%, 45%  { fill: var(--azul); }
  50%, 70%  { fill: var(--amarelo); }
  75%, 95%  { fill: var(--fc-verde); }
  100%      { fill: var(--vermello); }
}

.eti { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }

.ligazons { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; justify-items: center; text-align: center; }
.ligazons small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 4px; }
.ligazons a {
  display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; font-weight: 700; font-size: 18px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 2px; transition: background-size .45s var(--suave);
}
.ligazons a:hover, .ligazons a:focus-visible { background-size: 100% 1.5px; }
.ligazons .frecha { transition: transform .45s var(--suave); }
.ligazons a:hover .frecha { transform: translateX(4px); }

.pe { margin: 0; text-align: center; font-size: 12px; }

/* Entrada suave */
.centro > * { opacity: 0; animation: aparece 1s var(--suave) forwards; animation-delay: calc(.15s + var(--i, 0) * .15s); }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .centro > * { opacity: 1; }
}