:root {
  /* Tipografia Apple: SF Pro (sistema) com fallbacks */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  /* Paleta feminina: magenta + vinho + creme */
  --pink: #e91e8c;
  --pink-2: #ff4aa8;
  --cream: #f7ecdc;   /* off-white creme dos criativos */
  --ink: #f7ecdc;
  --muted: #c9a9bd;   /* rosa acinzentado p/ textos secundários */

  /* altura real da viewport (setada via JS p/ contornar barra do browser mobile) */
  --vh: 1vh;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

html, body { min-height: 100%; }

body {
  font-family: var(--font);
  background: radial-gradient(130% 100% at 50% -10%, #3a0d29 0%, #1a0512 55%) fixed;
  background-color: #1a0512; /* fallback */
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* altura à prova de qualquer celular (fallback -> dvh -> var do JS) */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc(var(--vh, 1vh) * 100);

  /* respeita notch / barra de gestos (safe-area) */
  padding:
    calc(env(safe-area-inset-top, 0px) + 32px)
    calc(env(safe-area-inset-right, 0px) + 22px)
    calc(env(safe-area-inset-bottom, 0px) + 32px)
    calc(env(safe-area-inset-left, 0px) + 22px);
}

.wrap {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-block;
  color: var(--pink-2);
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: clamp(16px, 4vw, 22px);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink-2);
  margin-right: 9px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--pink);
}

/* ---------- Headline ---------- */
h1 {
  font-size: clamp(33px, 10.5vw, 60px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: clamp(14px, 3.5vw, 20px);
  color: var(--cream);
  text-wrap: balance;
}
h1 .hl {
  background: linear-gradient(180deg, var(--pink-2) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--pink); /* fallback navegadores sem background-clip */
}

/* ---------- Subtítulo ---------- */
.sub {
  font-size: clamp(17px, 4.8vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: -0.01em;
  margin-bottom: clamp(28px, 7vw, 40px);
  text-wrap: balance;
}

/* ---------- Lista de benefícios ---------- */
.checks {
  list-style: none;
  display: inline-block;
  text-align: left;
  margin: 0 auto clamp(30px, 8vw, 44px);
}
.checks li {
  font-size: clamp(15px, 4.4vw, 18px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: clamp(12px, 3.5vw, 16px) 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.checks li svg { min-width: 24px; flex-shrink: 0; }

/* ---------- Botão (CTA) ---------- */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(180deg, var(--pink-2) 0%, var(--pink) 100%);
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(17px, 5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: clamp(17px, 4.6vw, 20px) 22px;
  border-radius: 980px;                 /* pill Apple */
  box-shadow: 0 10px 40px -8px rgba(233, 30, 140, 0.6);
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 56px;                     /* alvo de toque confortável */
  will-change: transform;
}
.cta:active { transform: scale(0.98); }

@media (hover: hover) {
  .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 50px -8px rgba(233, 30, 140, 0.8);
  }
}

/* ---------- Rodapé ---------- */
.slots {
  font-size: clamp(13px, 3.6vw, 14px);
  font-weight: 500;
  color: var(--muted);
  margin-top: 18px;
  letter-spacing: -0.01em;
}
.foot {
  font-size: clamp(11px, 3.2vw, 12px);
  font-weight: 400;
  color: #8a6076;
  margin-top: clamp(28px, 7vw, 40px);
  letter-spacing: -0.01em;
}

/* ---------- Animação de entrada ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
}
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cta { transition: none; }
}

/* Telas muito baixas (paisagem / celulares pequenos): compacta */
@media (max-height: 640px) {
  body { justify-content: flex-start; }
  .checks li { margin: 9px 0; }
}