/* --------- Variáveis globais --------- */
:root {
  --grad-color-1: #44AFA4;
  --grad-color-2: #2A7CB7;
  --grad-color-3: #F78C6B;
  --grad-color-4: #FFD93D;

  --gold-1: #FFD700;
  --gold-2: #FFC107;

  --text-dark: #000;
  --text-light: #fff;

  --radius-pill: 30px;
  --radius-card: 12px;

  --shadow-btn: 0 6px 12px rgba(0, 0, 0, 0.15);
  --shadow-gold: 0 0 10px rgba(255, 215, 0, 0.7);
  --shadow-gold-hover: 0 0 20px rgba(255, 215, 0, 0.9);
  --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* --------- Resets & base --------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow: auto;
  position: relative;

  /* Gradient animado */
  background: linear-gradient(
      270deg,
      var(--grad-color-1),
      var(--grad-color-2),
      var(--grad-color-3),
      var(--grad-color-4)
  );
  background-size: 800% 800%;
  animation: gradientFlow 20s ease infinite;
}

@keyframes gradientFlow {
  0%   { background-position: 0 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* --------- Ícones flutuantes --------- */
.floating-icon {
  position: absolute;
  width: 80px;
  pointer-events: none;
  opacity: 0.9;
  animation: float 6s ease-in-out infinite;
}

.float1 { top: 15%; left: 5%;  animation-delay: 0s; }
.float2 { top: 30%; right: 10%; animation-delay: 2s; }
.float3 { bottom: 20%; left: 12%; animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-15px) rotate(5deg); }
}

/* --------- Logo --------- */
.logo {
  width: 230px;
  margin-top: 2rem;
  z-index: 2;
  animation: floatLogo 3s ease-in-out infinite;
}

@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* --------- Conteúdo principal --------- */
main {
  flex: 1;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 2;
  text-align: center;
}

h1 {
  font-size: 2rem;
  margin: 0.3rem 0 0.6rem;
}

.subtitle {
  margin: 0 0 2rem;
  font-size: 1rem;
}

/* --------- Links --------- */
.links-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.link-btn {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-dark);
  padding: 1rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow-btn);
  transition: transform 0.3s, background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 1rem;
}

.link-btn:hover,
.link-btn:focus-visible {
  transform: scale(1.05);
  background: #fff;
  outline: none;
}

.link-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--grad-color-2);
}

/* --------- Botão VIP com efeito de destaque animado --------- */
.vip-btn {
  background: linear-gradient(45deg, var(--gold-1), var(--gold-2));
  background-size: 200% 200%;
  color: var(--text-light);
  border: none;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-pill); 
  font-weight: bold;
  font-size: 1rem;
  box-shadow: var(--shadow-gold-hover);
  animation: vipPulse 2s ease-in-out infinite, vipShake 1.2s infinite;
}

/* Opcional: efeito no hover se quiser intensificar ainda mais */
.vip-btn:hover,
.vip-btn:focus-visible {
  animation: none;
  transform: scale(1.05);
  background-position: right center;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));

}

/* Efeito de brilho/pulso suave */
@keyframes vipPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
  50%      { box-shadow: 0 0 30px rgba(255, 215, 0, 1); }
}

/* Efeito de leve vibração */
@keyframes vipShake {
  0%, 100%   { transform: translateX(0); }
  10%, 90%   { transform: translateX(-1px); }
  20%, 80%   { transform: translateX(2px); }
  30%, 70%   { transform: translateX(-4px); }
  40%, 60%   { transform: translateX(4px); }
  50%        { transform: translateX(-2px); }
}


/* --------- Rodapé --------- */
footer {
  padding: 1.5rem 0 1rem;
  font-size: 0.85rem;
  opacity: 0.85;
  text-align: center;
  z-index: 2;
}

/* --------- Media queries --------- */
@media (min-width: 768px) {
  main { justify-content: flex-start; padding-top: 3rem; }
  .logo { margin-top: 1rem; }
}

@media (min-width: 1024px) {
  .links-container { max-width: 560px; }
}

/* --------- Modal Lead --------- */
/* ====== MODAL LEAD ====== */
.modal-lead{
  /* Sempre flex  → alinha no centro */
  position:fixed; inset:0;
  width:100vw; height:100vh;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0;                /* esconde por padrão   */
  transition:opacity .2s ease;
}
.modal-lead.open{ visibility:visible; opacity:1; } /* mostra com fade   */

.modal-lead-content{
  width:clamp(280px,90%,420px);                /* 280‒420 px, centrado */
  background:#fff; color:#000;
  padding:30px; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  position:relative; text-align:center;
  animation:openModal .25s ease;
  margin:0;                                    /* zera margem do BS5  */
}
.modal-lead-close{
  position:absolute; top:10px; right:16px;
  font-size:28px; font-weight:bold;
  color:#aaa; cursor:pointer;
}

.modal-lead-content input {
  width: 100%;
  padding: 10px;
  margin: 5px 0 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.modal-lead-content button {
  width: 100%;
  padding: 10px;
  font-weight: bold;
  border-radius: 8px;
}

@keyframes openModal{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}


/* --------- Acessibilidade: reduz animações --------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}



.btn-saibamais{margin:2rem auto 0;padding:.7rem 1.2rem;border:0;border-radius:6px;background:#2A7CB7;color:#fff;font-weight:600}
.seo-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);justify-content:center;align-items:center;z-index:9999}
.seo-modal.open{display:flex}
.seo-modal-content{max-width:640px;background:#fff;color:#000;padding:2rem;border-radius:12px;overflow-y:auto;max-height:90vh}
.seo-close{position:absolute;top:14px;right:20px;font-size:28px;cursor:pointer}