@import url('whatsapp-menu.css');

:root {
  --primary: #0d9488;
  --primary-deep: #0c4a44;
  --dark: #0a1628;
  --whatsapp: #25d366;
  --white: #fff;
  --font: "Poppins", system-ui, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--white);
  overflow-x: hidden;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--whatsapp {
  background: linear-gradient(135deg, var(--whatsapp), #128c7e);
  color: var(--white); box-shadow: 0 8px 24px rgba(37,211,102,0.35);
}
.btn--ghost { border-color: rgba(255,255,255,0.3); color: var(--white); background: rgba(255,255,255,0.06); }
.btn--large { width: 100%; }

.presell {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: calc(24px + var(--safe-top)) 16px calc(80px + var(--safe-bottom));
}
.presell__bg {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(145deg, var(--dark) 0%, var(--primary-deep) 50%, #081f2d 100%);
}
.presell__shapes { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.presell__shapes .shape {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.25;
}
.shape--1 { width: 350px; height: 350px; background: var(--primary); top: 10%; right: -10%; }
.shape--2 { width: 250px; height: 250px; background: #c9a227; bottom: 15%; left: -5%; }

.presell__card {
  position: relative; z-index: 2; width: min(520px, 100%);
  padding: 36px 22px 32px; border-radius: 20px; text-align: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}

.presell__logo {
  display: block;
  width: min(140px, 52vw);
  height: auto;
  margin: 0 auto 24px;
  object-fit: contain;
}

.presell__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(13,148,136,0.2); font-size: 0.78rem; font-weight: 700;
  margin-bottom: 20px;
}
.presell__card h1 {
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  font-weight: 800; line-height: 1.2; margin-bottom: 16px;
}
.presell__card h1 em { font-style: normal; color: #f0d875; font-weight: 700; }
.presell__card > p { opacity: 0.8; font-size: 0.92rem; margin-bottom: 28px; line-height: 1.6; }
.presell__actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.presell__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px;
  font-size: 0.75rem; opacity: 0.7;
}
.presell__trust span { display: flex; align-items: center; gap: 6px; }

.presell__footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 3;
  text-align: center; padding: 12px 16px calc(12px + var(--safe-bottom));
  font-size: 0.72rem; opacity: 0.55;
  background: linear-gradient(to top, rgba(10, 22, 40, 0.95), transparent);
}
.footer__credit {
  color: inherit; text-decoration: none; opacity: 0.9;
  transition: color 0.2s, opacity 0.2s;
}
.footer__credit:hover { color: #f0d875; opacity: 1; }

@media (min-width: 640px) {
  .presell { padding: 40px 20px calc(88px + var(--safe-bottom)); }
  .presell__card { padding: 48px 40px 40px; border-radius: 24px; }
  .presell__logo { width: min(168px, 40vw); margin-bottom: 28px; }
  .presell__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .btn--large { width: auto; min-width: 260px; }
}