/* ======================================================================
   DMODULAR UP — Página de links
   --------------------------------------------------------------------
   EDIÇÃO RÁPIDA: cores e espaçamentos vivem nas CSS variables abaixo
   (:root). Paleta de marca fixa (não muda com light/dark do sistema).
   ====================================================================== */

:root {
  /* --- Paleta de marca --- */
  --bg: #d9d9d9;              /* fundo cinzento neutro */
  --fg: #545c47;             /* texto principal (verde-oliva) */
  --fg-muted: #6c7460;       /* texto secundário */
  --accent: #545c47;         /* foco / detalhes */

  /* Gradiente dos botões (sage no canto sup. esq. -> preto no inf. dir.) */
  --btn-grad: linear-gradient(125deg, #9aa57f 0%, #5b6349 42%, #161616 100%);
  --btn-fg: #ffffff;

  --border: rgba(84, 92, 71, 0.18);
  --shadow: 0 1px 2px rgba(40, 44, 33, 0.12), 0 8px 20px rgba(40, 44, 33, 0.14);
  --shadow-lift: 0 6px 14px rgba(40, 44, 33, 0.18), 0 18px 38px rgba(40, 44, 33, 0.22);

  /* --- Espaçamentos --- */
  --space-btn-gap: 14px;      /* espaço entre botões (12–16px) */
  --radius: 12px;
  --content-max: 480px;       /* largura máxima em desktop */

  /* --- Tipografia (system font stack, sem dependências externas) --- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* ====================================================================
   Reset mínimo
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;   /* preenche a viewport (centra o conteúdo no desktop) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vh, 56px);
  padding: 40px 20px;
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ====================================================================
   Hero / Logo
   ====================================================================
   O logo é o ficheiro logo.svg, recolorido para a cor de marca (--fg)
   via CSS mask (técnica de máscara para SVG de cor única). Para trocar
   o logo, substitui logo.svg mantendo o nome.
   ==================================================================== */
.hero {
  text-align: center;
  animation: reveal 0.6s ease both;
}

.logo {
  margin: 0 auto;
  line-height: 0;
}

.logo img {
  display: block;
  margin: 0 auto;
  width: min(92%, 460px);
  height: auto;          /* mantém a proporção do logo.svg */
}

/* ====================================================================
   Lista de links
   ==================================================================== */
.content {
  width: 85%;
  max-width: var(--content-max);
}

.links {
  display: flex;
  flex-direction: column;
  gap: var(--space-btn-gap);
}

.link-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 14px 22px;
  background: var(--btn-grad);
  color: var(--btn-fg);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  /* Entrada: fade + slide-up suave (easing "ease-out" expressivo) */
  animation: button-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Entrada escalonada dos botões (cada um entra depois do anterior) */
.link-button:nth-child(1) { animation-delay: 0.15s; }
.link-button:nth-child(2) { animation-delay: 0.27s; }
.link-button:nth-child(3) { animation-delay: 0.39s; }
.link-button:nth-child(4) { animation-delay: 0.51s; }
.link-button:nth-child(5) { animation-delay: 0.63s; }

/* Ícone à esquerda (badge colorido da marca/rede social) */
.link-button__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.link-button__icon img {
  display: block;
  width: 28px;
  height: 28px;
}

.link-button__label {
  flex: 1 1 auto;
}

/* Seta diagonal (↗) à direita, gerada por CSS (SVG inline em data URI). */
.link-button::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
  transition: transform 0.18s ease;
}

/* Hover / focus: lift subtil + seta avança */
.link-button:hover,
.link-button:focus-visible {
  transform: scale(1.02);
  box-shadow: var(--shadow-lift);
  outline: none;
}

.link-button:hover::after,
.link-button:focus-visible::after {
  transform: translate(2px, -2px);
}

.link-button:active {
  transform: scale(0.99);
}

/* Foco visível e acessível (teclado) */
.link-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ====================================================================
   Footer
   ==================================================================== */
.footer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--fg-muted);
  animation: reveal 0.6s ease 0.4s both;
}

.footer p { margin: 0; }

/* ====================================================================
   Animação de entrada
   ==================================================================== */
@keyframes reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrada dos botões: sobe e aparece, com um leve "settle" de escala */
@keyframes button-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Fade simples (sem movimento) para o modo "reduce motion" */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respeita quem prefere menos movimento: mantém só o fade, sem deslocação */
@media (prefers-reduced-motion: reduce) {
  .hero, .footer { animation: none; }
  .link-button {
    /* mantém a entrada escalonada, mas só com opacidade (sem slide/escala) */
    animation: fade-in 0.5s ease both;
    transition: box-shadow 0.18s ease;
  }
  .link-button:hover,
  .link-button:focus-visible { transform: none; }
}