:root {
  --fundo: #101827;
  --fundo-secundario: #263b5e;
  --principal: #57e3a7;
  --texto: #ffffff;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--texto);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--principal) 20%, transparent), transparent 38%),
    linear-gradient(145deg, var(--fundo), var(--fundo-secundario));
  background-attachment: fixed;
}

.pagina { width: min(680px, calc(100% - 32px)); margin: auto; padding: 48px 0 28px; }
.perfil { text-align: center; margin-bottom: 30px; animation: entrada .7s ease both; }
.logo-box {
  width: 112px; height: 112px; margin: auto; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--principal); color: #101827;
  font-size: 44px; font-weight: 900; box-shadow: 0 14px 40px #0005;
  border: 4px solid #ffffff33;
}
.logo-box img { width: 100%; height: 100%; object-fit: cover; }
.categoria { margin: 18px 0 4px; color: var(--principal); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
h1 { margin: 0; font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1.1; }
.descricao { max-width: 540px; margin: 12px auto 0; color: color-mix(in srgb, var(--texto) 78%, transparent); line-height: 1.55; }
.links { display: grid; gap: 14px; }
.link {
  position: relative; display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 14px;
  min-height: 78px; padding: 13px 18px; color: var(--texto); text-decoration: none;
  background: #ffffff12; border: 1px solid #ffffff24; border-radius: 18px;
  backdrop-filter: blur(12px); box-shadow: 0 10px 28px #0002;
  animation: entrada .55s ease both; transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.link:hover, .link:focus-visible { transform: translateY(-4px) scale(1.012); border-color: var(--principal); background: #ffffff1f; box-shadow: 0 16px 34px #0005; outline: none; }
.link:active { transform: scale(.985); }
.link.destaque { background: var(--principal); color: #101827; border-color: transparent; }
.icone { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #ffffff18; font-size: .78rem; font-weight: 900; }
.icone i { font-size: 1.35rem; }
.icone img { width: 28px; height: 28px; object-fit: contain; }
.link.destaque .icone { background: #10182718; }
.texto strong { display: block; font-size: 1.03rem; }
.texto small { display: block; margin-top: 2px; opacity: .72; }
.seta { font-size: 1.4rem; transition: transform .22s ease; }
.link:hover .seta { transform: translateX(4px); }
footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; color: color-mix(in srgb, var(--texto) 58%, transparent); font-size: .8rem; }
[hidden] { display: none !important; }
@keyframes entrada { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  .pagina { width: min(100% - 20px, 680px); padding-top: 30px; }
  .link { min-height: 72px; padding: 11px 13px; grid-template-columns: 44px 1fr 18px; gap: 10px; border-radius: 15px; }
  .texto small { font-size: .76rem; }
  footer { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}