/* ===== Reset & Variáveis ===== */

@font-face{
  font-family:"Univia";
  src:url("/fonts/univiapro-regular-webfont.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Univia";
  src:url("/fonts/univiapro-medium-webfont.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Univia";
  src:url("/fonts/univiapro-bold-webfont.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* use a fonte */
body { font-family:"Univia", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

:root {
  --text-primary: #e6edf3;
  --text-secondary: #9aa7b1;

  --blue-main: #37E3FF;
  --blue-hover: #1fbad1;

  --btn-text: #0a1a2f; /* texto/ícone escuro */
  --ring: #37E3FF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; margin: 0; background-color: #000; }

/* ===== Layout base ===== */
body {
  font-family: "Univia", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-primary);
  background: url('img/immersionembg.jpg') no-repeat center center / cover;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Conteúdo ===== */
.logo {
  width: min(260px, 60vw);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
  margin-bottom: 20px;
}

h1 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin: 0 0 4px 0;
  font-weight: 700;
}

p.lead {
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.6;
  margin: 0 0 20px 0;
  max-width: 100ch;
  font-weight: 400;
}

/* ===== Botões ===== */
.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px; /* mais espaço entre botões */
  margin-top: 24px;
}

.btn {
  --bg: var(--blue-main);
  --bg-h: var(--blue-hover);

  display: inline-flex;
  align-items: center;
  gap: 12px;

  text-decoration: none;
  color: var(--btn-text);
  font-weight: 600;

  background: linear-gradient(135deg, var(--blue-main), var(--blue-hover));
  padding: 10px 20px; /* mais padding interno */
  border-radius: 999px;
  border: none;

  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, filter .3s ease;
  outline: none;
}

.btn img.icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Hover com glow + pulso */
.btn:hover {
  background: linear-gradient(135deg, var(--blue-hover), var(--blue-main));
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.40);
  filter: drop-shadow(0 0 8px var(--blue-main));
  animation: pulseGlow 1.5s infinite alternate;
}

.btn:active { transform: translateY(0); }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--ring); }

/* Variantes todas em azul */
.btn.insta { --bg: var(--blue-main); --bg-h: var(--blue-hover); }
.btn.whats { --bg: var(--blue-main); --bg-h: var(--blue-hover); }
.btn.mail  { --bg: var(--blue-main); --bg-h: var(--blue-hover); }

footer {
  margin-top: 30px;
  color: #718096;
  font-size: .9rem;
  text-align: center;
}

/* Glow pulsante */
@keyframes pulseGlow {
  from { filter: drop-shadow(0 0 6px var(--blue-main)); }
  to   { filter: drop-shadow(0 0 16px var(--blue-main)); }
}

/* Acessibilidade: reduz animações */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; animation: none; }
}

/* Mobile fix: 1 por linha, centralizado e com largura controlada */
@media (max-width: 600px) {
  .buttons {
    /* container mais estreito e centralizado */
    width: clamp(260px, 86vw, 420px);
    margin: 14px auto 0;

    /* força 1 coluna apenas */
    display: grid;
    grid-template-columns: 1fr;

    /* centraliza e dá respiro entre os botões */
    justify-items: stretch;
    gap: 14px;
  }

  .buttons .btn {
    width: 100%;       /* ocupa a largura do container .buttons */
    max-width: none;   /* impede encolhimento que cause dois por linha */
  }
}

@media (max-width: 600px) {
  .buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}