/* =========================================================
   O GRANDE PRÊMIO — MeuFluxo
   Landing page de captura

   Escala tipográfica pensada para um público 45+: corpo de texto
   nunca abaixo de 16px, apoio nunca abaixo de 14px, microcópia
   nunca abaixo de 12px. A página pode rolar — legibilidade vem
   antes de caber em uma tela.
   ========================================================= */

:root{
  /* superfícies */
  --bg:        #06040A;
  --bg-2:      #0C0715;
  --surface:   rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.08);
  --line:      rgba(255,255,255,.11);
  --line-2:    rgba(255,255,255,.18);

  /* marca */
  --violet:      #7B3DF3;
  --violet-2:    #A855F7;
  --violet-soft: #C9B0FF;

  --mint:      #8FE6B4;
  --mint-2:    #A9F0C8;
  --mint-deep: #08281A;

  /* texto */
  --txt:       #FFFFFF;
  --txt-2:     #CFC5DE;
  --txt-3:     #9C93AD;

  /* métricas */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-card: 0 24px 70px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06) inset;
  --glow-mint:   0 14px 38px -10px rgba(143,230,180,.55);
  --glow-violet: 0 0 60px -12px rgba(123,61,243,.65);

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  font-family:var(--font);
  font-weight:400;
  color:var(--txt);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button,input{ font:inherit; color:inherit; }

/* o atributo hidden precisa vencer os display:flex/grid dos componentes */
[hidden]{ display:none !important; }

/* =========================================================
   FUNDO
   ========================================================= */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:var(--bg); }

.bg__grid{
  position:absolute; inset:-10%;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 35%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 35%, #000 30%, transparent 78%);
}

.bg__glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.bg__glow--1{ width:60vw; height:60vw; max-width:820px; max-height:820px; top:-22vw; left:-14vw;
  background:radial-gradient(circle, rgba(123,61,243,.85), transparent 66%); }
.bg__glow--2{ width:52vw; height:52vw; max-width:700px; max-height:700px; bottom:-20vw; right:-12vw;
  background:radial-gradient(circle, rgba(168,85,247,.60), transparent 66%); }
.bg__glow--3{ width:44vw; height:44vw; max-width:560px; max-height:560px; top:38%; left:44%;
  background:radial-gradient(circle, rgba(143,230,180,.20), transparent 68%); opacity:.4; }

.bg__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, transparent 40%, rgba(6,4,10,.75) 100%),
    linear-gradient(180deg, rgba(6,4,10,.55) 0%, transparent 22%, transparent 72%, rgba(6,4,10,.9) 100%);
}

/* =========================================================
   TARJA / MARQUEE
   ========================================================= */
.tape{
  position:relative; z-index:3;
  overflow:hidden;
  background:linear-gradient(90deg, var(--violet), var(--violet-2) 55%, var(--violet));
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:9px 0;
}
.tape__track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.tape__track span{
  display:inline-flex; align-items:center;
  white-space:nowrap;
  font-size:12.5px; font-weight:700; letter-spacing:.14em;
  color:#fff; text-transform:uppercase;
}
.tape__track i{ font-style:normal; opacity:.55; padding:0 18px; font-size:9px; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .tape__track{ animation:none; } }

/* =========================================================
   LAYOUT
   ========================================================= */
.stage{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,4vh,52px) clamp(18px,4vw,40px) clamp(20px,3vh,32px);
  flex:1 1 auto;
}

.shell{
  width:100%; max-width:1240px;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,4vw,68px);
  align-items:center;
}

/* =========================================================
   COLUNA ESQUERDA
   ========================================================= */
.pitch{ display:flex; flex-direction:column; gap:20px; min-width:0; }

/* selo ao vivo */
.live{
  display:inline-flex; align-items:center; gap:10px; width:fit-content;
  padding:9px 20px 9px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-2);
  font-size:14px; font-weight:600; letter-spacing:.1em; color:#fff;
  backdrop-filter:blur(8px);
}
.live b{ color:var(--violet-soft); font-weight:700; }
.live__dot{
  width:9px; height:9px; border-radius:50%; background:#FF4D6A; flex:none;
  box-shadow:0 0 0 0 rgba(255,77,106,.7); animation:pulse 2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 10px rgba(255,77,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,77,106,0); }
}

/* título */
.title{ margin:0; line-height:.9; display:flex; flex-direction:column; }
.title__kicker{
  font-size:clamp(17px,1.6vw,22px); font-weight:600; letter-spacing:.42em;
  color:var(--violet-soft); text-transform:uppercase; margin-bottom:8px;
}
.title__main{
  font-size:clamp(46px,6.6vw,90px); font-weight:800; letter-spacing:-.035em;
  background:linear-gradient(160deg,#FFFFFF 20%, #E4D6FF 55%, #A98BF0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 70px rgba(123,61,243,.25);
  /* line-height .9 joga o circunflexo do Ê para fora da caixa, e o gradiente
     só pinta dentro dela — a folga devolve a área pintável sem mexer no layout. */
  padding-top:.26em;
  margin-top:-.26em;
}

/* =========================================================
   NOME DO PRODUTO — logo grande + VIP + variante do teste A/B
   ========================================================= */
.product{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,22px); flex-wrap:wrap;
  padding:14px 22px; width:fit-content;
  border-radius:var(--r-lg);
  background:linear-gradient(100deg, rgba(123,61,243,.28), rgba(168,85,247,.10) 70%, transparent);
  border:1px solid rgba(168,85,247,.4);
}
.product__logo{ height:clamp(30px,3vw,40px); width:auto; flex:none; }
.product__logo--text{
  font-size:clamp(24px,2.4vw,32px); font-weight:800; letter-spacing:-.02em; color:#fff;
}
.product__logo--text::first-letter{ color:var(--violet-soft); }

.product__lockup{ display:flex; align-items:center; gap:12px; }
.product__vip{
  flex:none;
  padding:5px 13px; border-radius:8px;
  background:linear-gradient(100deg,var(--violet),var(--violet-2));
  color:#fff; font-size:15px; font-weight:800; letter-spacing:.12em;
  box-shadow:0 6px 20px -6px rgba(123,61,243,.9);
}
.product__name{
  font-size:clamp(26px,2.9vw,38px); font-weight:800; letter-spacing:-.02em;
  color:#fff; line-height:1.05;
  /* grifo do nome do produto — é a variável do teste A/B */
  background:linear-gradient(transparent 62%, rgba(143,230,180,.42) 62%);
  padding:0 3px;
}

/* lede */
.lede{
  margin:0; max-width:34ch;
  font-size:clamp(17px,1.3vw,19px); font-weight:400; color:var(--txt-2); line-height:1.55;
}
.lede strong{ color:#fff; font-weight:600; }

/* =========================================================
   ESPECIALISTAS + PRESENTES
   ========================================================= */
.more{ display:flex; flex-direction:column; gap:20px; }
.more__summary{ display:none; }
.more__body{ display:flex; flex-direction:column; gap:20px; }

.experts__label,.perks__label{
  margin:0 0 12px; font-size:12.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-3);
}
.experts__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px;
}
.expert{ display:flex; align-items:center; gap:12px; min-width:0; }
.expert__avatar{
  position:relative; flex:none;
  width:46px; height:46px; border-radius:50%; overflow:hidden;
  background:linear-gradient(150deg,var(--violet),#4B1FA8);
  border:1px solid rgba(255,255,255,.18);
  display:grid; place-items:center;
  font-size:14px; font-weight:700; color:#EADCFF;
}
.expert__avatar::after{ content:attr(data-initials); }
.expert__avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.expert__avatar--more{ background:rgba(255,255,255,.07); border-style:dashed; color:var(--violet-soft); }
.expert__avatar--more::after{ content:none; }
.expert__txt{ display:flex; flex-direction:column; min-width:0; }
.expert__txt b{ font-size:16px; font-weight:600; color:#fff; line-height:1.25; }
.expert__txt i{
  font-style:normal; font-size:14px; font-weight:400; color:var(--txt-3); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* tira de rostos (mobile e tablet) */
.strip{ display:flex; align-items:center; flex:none; }
.strip__av{
  position:relative; width:46px; height:46px; border-radius:50%; overflow:hidden; flex:none;
  margin-right:-13px;
  background:linear-gradient(150deg,var(--violet),#4B1FA8);
  border:2px solid #130B24;
  display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#EADCFF;
}
.strip__av::after{ content:attr(data-initials); }
.strip__av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.strip__av--more{ background:#2E1E50; color:var(--violet-soft); font-size:13px; margin-right:0; }
.strip__av--more::after{ content:none; }

/* presentes */
.perks__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.perk{
  display:flex; gap:12px; padding:15px 17px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  font-size:14.5px; font-weight:400; color:var(--txt-2); line-height:1.5;
}
.perk b{ color:#fff; font-weight:700; }
.perk__ico{ font-size:19px; line-height:1.2; flex:none; }

/* =========================================================
   VALOR
   ========================================================= */
.value{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:20px 26px; border-radius:var(--r-lg);
  background:linear-gradient(100deg, rgba(123,61,243,.24), rgba(168,85,247,.08) 60%, transparent);
  border:1px solid rgba(168,85,247,.35);
  box-shadow:var(--glow-violet);
}
.value__left{ display:flex; flex-direction:column; gap:2px; }
.value__label{
  font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violet-soft);
}
/* sem strikethrough: aqui o objetivo é o valor ser percebido por inteiro */
.value__price{
  font-size:clamp(38px,3.6vw,50px); font-weight:800; letter-spacing:-.03em; line-height:1.05;
  color:#fff; white-space:nowrap;
}
.value__right{
  font-size:16px; font-weight:400; color:var(--txt-2); line-height:1.45;
  padding-left:22px; border-left:1px solid var(--line-2);
}
.value__right strong{
  display:block; color:var(--mint); font-weight:700; font-size:20px; letter-spacing:-.01em;
}

/* =========================================================
   PAINEL / FORMULÁRIO
   ========================================================= */
.panel{ display:flex; flex-direction:column; gap:14px; min-width:0; }

.card{
  position:relative;
  padding:clamp(24px,2.4vw,32px);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(22,14,38,.92), rgba(10,6,20,.96));
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(14px);
}
.card::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(160deg, rgba(168,85,247,.7), transparent 40%, transparent 65%, rgba(143,230,180,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* apresentador */
.host{ display:flex; align-items:center; gap:15px; margin-bottom:20px; }
.host__photo{
  position:relative; flex:none; width:66px; height:66px; border-radius:50%; overflow:hidden;
  background:linear-gradient(150deg,var(--violet),#3C1785);
  border:2px solid rgba(201,176,255,.45);
  display:grid; place-items:center; font-size:22px; font-weight:700; color:#EADCFF;
}
.host__photo::after{ content:attr(data-initials); }
.host__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.host__txt{ display:flex; flex-direction:column; min-width:0; }
.host__txt b{ font-size:19px; font-weight:600; line-height:1.25; }
.host__txt i{ font-style:normal; font-size:15px; font-weight:400; color:var(--txt-3); }

/* contagem regressiva */
.countdown{
  display:flex; align-items:center; justify-content:space-between; gap:4px;
  padding:14px 16px; margin-bottom:22px;
  border-radius:var(--r-md);
  background:rgba(123,61,243,.15);
  border:1px solid rgba(168,85,247,.3);
}
.cd__item{ display:flex; flex-direction:column; align-items:center; flex:1; }
.cd__item b{
  font-size:clamp(26px,2.2vw,32px); font-weight:700; letter-spacing:-.02em; line-height:1;
  color:#fff; font-variant-numeric:tabular-nums;
}
.cd__item i{
  font-style:normal; font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--violet-soft); margin-top:6px;
}
.cd__sep{ font-size:22px; font-weight:300; color:rgba(201,176,255,.35); margin-bottom:14px; }

.card__title{
  margin:0 0 18px; font-size:clamp(21px,1.8vw,24px); font-weight:600; letter-spacing:-.02em;
}

/* campos */
.form{ display:flex; flex-direction:column; gap:15px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3);
}
.field input{
  width:100%; padding:16px 18px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-size:17px; font-weight:400; color:#fff;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.field input::placeholder{ color:#7A7190; font-weight:400; }
.field input:hover{ background:rgba(255,255,255,.07); }
.field input:focus{
  outline:none; background:rgba(255,255,255,.08);
  border-color:var(--violet-2);
  box-shadow:0 0 0 3px rgba(168,85,247,.22);
}
.field.is-invalid input{ border-color:#FF4D6A; box-shadow:0 0 0 3px rgba(255,77,106,.16); }
.field__err{ font-size:14px; font-weight:400; color:#FF8FA1; }
.field:not(.is-invalid) .field__err{ display:none; }

/* CTA */
.cta{
  position:relative; margin-top:6px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:20px 24px;
  border:none; border-radius:var(--r-pill); cursor:pointer;
  background:linear-gradient(100deg, var(--mint), var(--mint-2) 55%, var(--mint));
  color:var(--mint-deep);
  font-size:19px; font-weight:700; letter-spacing:.06em;
  box-shadow:var(--glow-mint);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, filter .2s;
  overflow:hidden;
}
.cta::after{
  content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:shine 3.6s ease-in-out infinite;
}
@keyframes shine{ 0%,62%{ left:-60%; } 92%,100%{ left:120%; } }
.cta:hover{ transform:translateY(-2px); box-shadow:0 20px 48px -10px rgba(143,230,180,.7); filter:brightness(1.04); }
.cta:active{ transform:translateY(0) scale(.99); }
.cta:focus-visible{ outline:3px solid var(--violet-soft); outline-offset:3px; }
.cta.is-loading{ pointer-events:none; filter:saturate(.6); }
.cta.is-loading .cta__label{ opacity:.35; }
.cta__spin{ display:none; position:absolute; width:22px; height:22px; border-radius:50%;
  border:3px solid rgba(8,40,26,.25); border-top-color:var(--mint-deep); animation:spin .7s linear infinite; }
.cta.is-loading .cta__spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .cta::after{ animation:none; opacity:0; } }

.fineprint{
  margin:4px 0 0; text-align:center;
  font-size:15px; font-weight:400; color:var(--txt-3); line-height:1.55;
}
.fineprint b{ color:var(--mint); font-weight:600; }

/* sucesso */
.success{ text-align:center; padding:8px 0 4px; animation:fadeUp .45s ease both; }
.success:focus{ outline:none; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.success__ico{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; font-size:30px; font-weight:700;
  background:linear-gradient(150deg,var(--mint),var(--mint-2)); color:var(--mint-deep);
  box-shadow:var(--glow-mint);
}
.success h3{ margin:0 0 10px; font-size:24px; font-weight:700; letter-spacing:-.02em; }
.success p{ margin:0 0 12px; font-size:16px; font-weight:400; color:var(--txt-2); line-height:1.55; }
.success__date b{ color:var(--violet-soft); font-weight:600; letter-spacing:.04em; }
.success__wa{
  display:inline-block; margin-top:10px; padding:15px 28px; border-radius:var(--r-pill);
  background:rgba(143,230,180,.12); border:1px solid rgba(143,230,180,.4);
  color:var(--mint); font-size:16px; font-weight:600; text-decoration:none;
  transition:background .18s;
}
.success__wa:hover{ background:rgba(143,230,180,.2); }

/* selo */
.seal{
  margin:0; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  font-size:13px; font-weight:400; color:var(--txt-3);
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:0 20px clamp(18px,2.5vh,26px);
  font-size:13px; font-weight:400; color:var(--txt-3);
}
.foot a{ color:var(--txt-3); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.16); }
.foot a:hover{ color:var(--txt-2); }
.foot__sep{ opacity:.4; }

/* =========================================================
   RESPONSIVO — uma coluna a partir de 960px
   ========================================================= */
@media (max-width:960px){
  .shell{ grid-template-columns:1fr; gap:28px; max-width:560px; }
  .stage{ align-items:flex-start; }
  .pitch{ text-align:center; align-items:center; }
  .lede{ text-align:center; max-width:40ch; }
  .value{ justify-content:center; text-align:left; }

  /* a lista completa dá lugar à tira de rostos */
  .more__body{ display:none; }
  .more__summary{
    display:flex; align-items:center; gap:16px;
    padding:12px 20px 12px 14px; border-radius:var(--r-pill);
    background:var(--surface); border:1px solid var(--line-2);
    text-align:left; width:100%; margin-inline:auto;
  }
  .more__label{ flex:1; font-size:17px; font-weight:600; color:#fff; line-height:1.25; }
  .more__label b{
    display:block; font-weight:400; font-size:14px; color:var(--txt-3);
    margin-top:2px;
  }
}

/* mobile */
@media (max-width:640px){
  .stage{ padding:24px 18px 20px; }
  .shell{ gap:24px; }
  .pitch{ gap:18px; }

  .live{ font-size:12.5px; letter-spacing:.08em; padding:8px 16px 8px 13px; }
  .title__kicker{ font-size:15px; letter-spacing:.38em; margin-bottom:5px; }
  .title__main{ font-size:clamp(42px,12vw,58px); }

  .product{ padding:14px 18px; gap:14px; justify-content:center; width:100%; flex-wrap:nowrap; }
  .product__logo{ height:29px; }
  .product__lockup{ flex-direction:column; align-items:flex-start; gap:4px; }
  .product__vip{ font-size:13px; padding:3px 10px; letter-spacing:.14em; }
  .product__name{ font-size:28px; }

  .lede{ font-size:16.5px; line-height:1.5; }

  /* rostos em cima, texto embaixo: no celular a linha única espremia o texto */
  .more__summary{
    flex-direction:column; gap:11px;
    padding:16px 18px; border-radius:var(--r-lg);
    text-align:center;
  }
  .strip{ margin-left:7px; }              /* compensa a sobreposição à direita */
  .strip__av{ width:44px; height:44px; margin-right:-14px; }
  .more__label{ flex:none; font-size:18px; }
  .more__label b{ font-size:15px; margin-top:3px; }

  .value{ padding:16px 20px; gap:18px; flex-wrap:nowrap; }
  .value__price{ font-size:36px; }
  .value__label{ font-size:12px; }
  .value__right{ font-size:14.5px; padding-left:18px; }
  .value__right strong{ font-size:18px; }

  .card{ padding:22px 20px; }
  .host{ gap:13px; margin-bottom:18px; }
  .host__photo{ width:60px; height:60px; }
  .host__txt b{ font-size:18px; }
  .host__txt i{ font-size:14px; }

  .countdown{ padding:12px; margin-bottom:20px; }
  .cd__item b{ font-size:26px; }
  .cd__item i{ font-size:10.5px; letter-spacing:.1em; }
  .cd__sep{ font-size:18px; margin-bottom:14px; }

  .card__title{ font-size:20px; margin-bottom:16px; }
  .form{ gap:14px; }
  .field label{ font-size:12.5px; }
  .field input{ padding:15px 16px; font-size:17px; } /* ≥16px evita o zoom do iOS */
  .cta{ padding:19px 20px; font-size:18px; letter-spacing:.04em; }
  .fineprint{ font-size:14.5px; }
  .seal{ font-size:12.5px; }
  .foot{ font-size:12.5px; }
}

/* telas bem estreitas */
@media (max-width:380px){
  .title__main{ font-size:40px; }
  .product__name{ font-size:26px; }
  .more__label{ font-size:15px; }
  .value__price{ font-size:32px; }
  .cta{ font-size:17px; }
}