/* =================================================================
   BLEFARO PLASMA EXPERIENCE — VISUAL DA PÁGINA
   Mobile-first: os estilos base são para celular.
   No fim do arquivo, o bloco @media adapta para telas grandes (PC).
   ================================================================= */

/* ----- CORES E MEDIDAS (mude aqui para alterar a paleta inteira) ----- */
:root{
  --bg:        #07061a;   /* fundo principal (azul-marinho escuro) */
  --bg-dark:   #050414;   /* fundo do rodapé */
  --text:      #ffffff;   /* texto claro */
  --muted:     #b9b4d0;   /* texto secundário */
  --muted-2:   #9a95b5;   /* texto mais apagado */
  --dim:       #8782a3;   /* micro-textos */
  --pink:      #ec4899;   /* rosa da marca */
  --purple:    #a855f7;   /* roxo da marca */
  --purple-2:  #9333ea;   /* roxo do botão */
  --card:      rgba(255,255,255,.03);
  --border:    rgba(148,120,200,.16);
  --radius:    16px;
  --maxw:      1160px;
}

/* ----- RESET BÁSICO ----- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
::selection{background:var(--pink);color:#fff;}

/* ----- HELPERS ----- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.container--narrow{max-width:760px;}
.container--mid{max-width:1000px;}
.grad{
  background:linear-gradient(95deg,var(--pink),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.accent{color:#e9b8ff;}

/* ----- SELOS (badges) ----- */
.badge{
  display:inline-block;padding:8px 16px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.badge--purple{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.38);color:#d8b4fe;}
.badge--amber {background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.38);color:#fcd34d;}
.badge--pink  {background:rgba(236,72,153,.12);border:1px solid rgba(236,72,153,.40);color:#f9a8d4;}

/* ----- BOTÕES ----- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:18px 32px;border-radius:999px;
  font-weight:700;font-size:16px;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;text-align:center;cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
  min-height:56px;            /* alvo de toque grande no celular */
}
.btn--primary{
  background:linear-gradient(95deg,var(--purple-2),var(--pink));
  color:#fff;box-shadow:0 14px 40px -10px rgba(236,72,153,.6);
}
.btn--primary:hover{filter:brightness(1.08);transform:translateY(-2px);}
.btn--block{width:100%;}

/* ----- SEÇÕES (espaçamento padrão) ----- */
.section{padding:64px 0;border-bottom:1px solid rgba(148,120,200,.08);}
.section--center{text-align:center;}
.section__head{text-align:center;margin-bottom:36px;}
.section__title{
  font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:30px;line-height:1.05;margin-top:16px;
}
.section__sub{margin-top:14px;color:var(--muted-2);font-size:16px;}

/* ----- GRIDS (no celular tudo vira 1 coluna) ----- */
.grid{display:grid;gap:16px;}
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}

/* =================================================================
   1. HERO
   ================================================================= */
.hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(148,120,200,.1);}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero__bg::before{                       /* brilho roxo de fundo */
  content:"";position:absolute;top:-10%;left:-20%;width:80%;height:80%;
  background:radial-gradient(circle,rgba(124,58,237,.35),transparent 62%);
  filter:blur(40px);
}
.hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;padding-top:24px;padding-bottom:48px;}

/* no celular a FOTO vem primeiro (em cima) */
.hero__photo{order:-1;display:flex;justify-content:center;}
.hero__photo img{
  width:100%;max-width:300px;
  filter:drop-shadow(0 24px 60px rgba(168,85,247,.22));
}
.hero__text{position:relative;z-index:1;margin-top:-28px;}  /* texto encosta na foto */

.hero__title{
  font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:34px;line-height:.98;margin-top:18px;text-wrap:balance;
}
.hero__subtitle{margin-top:18px;font-size:17px;color:var(--muted);max-width:520px;}
.hero__subtitle strong{color:#fff;font-weight:600;}
.hero .btn{margin-top:26px;width:100%;}    /* botão largura total no celular */
.hero__micro{margin-top:14px;font-size:13px;color:var(--dim);}

.hero__stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.stat{
  flex:1;min-width:140px;padding:16px 18px;border-radius:14px;
  background:var(--card);border:1px solid var(--border);
}
.stat__num{
  display:block;font-family:Anton,sans-serif;font-size:28px;line-height:1;
  background:linear-gradient(180deg,#f9a8d4,var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat__flags{display:block;font-size:20px;}
.stat__label{display:block;margin-top:8px;font-size:12px;color:var(--dim);}

/* =================================================================
   2. ABERTURA
   ================================================================= */
.lead{font-size:21px;line-height:1.5;color:#cfcae2;text-wrap:pretty;}
.lead strong{color:#fff;font-weight:600;}
.muted-text{font-size:17px;line-height:1.6;color:var(--muted-2);margin-top:18px;text-wrap:pretty;}
.muted-text strong{color:#fff;}

/* =================================================================
   3. DORES
   ================================================================= */
.pain{
  padding:26px 22px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--border);
}
.pain__icon{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin:0 auto 18px;border-radius:13px;font-size:24px;
  background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.2);color:#fbbf24;
}
.pain p{font-size:16px;line-height:1.45;color:#cdc8e0;}
.big-line{
  text-align:center;margin-top:40px;
  font-family:Anton,sans-serif;text-transform:uppercase;font-size:24px;
}

/* =================================================================
   4. SOLUÇÃO
   ================================================================= */
.solution{position:relative;}
.highlight{
  margin-top:32px;padding:30px 26px;border-radius:22px;text-align:left;
  background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(236,72,153,.10));
  border:1px solid rgba(192,132,252,.3);
}
.highlight__eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e9b8ff;}
.highlight__title{margin-top:12px;font-size:20px;line-height:1.5;font-weight:500;color:#fff;text-wrap:pretty;}
.highlight__note{margin-top:14px;font-size:15px;color:#c9b8e0;}
.highlight__note strong{color:#fff;}

/* =================================================================
   5. BENEFÍCIOS
   ================================================================= */
.benefit{
  display:flex;gap:14px;align-items:flex-start;
  padding:22px 22px;border-radius:16px;
  background:rgba(255,255,255,.025);border:1px solid rgba(148,120,200,.14);
}
.benefit--feature{background:linear-gradient(135deg,rgba(168,85,247,.14),rgba(236,72,153,.08));border-color:rgba(192,132,252,.28);}
.benefit p{font-size:16px;line-height:1.5;color:#d3cee4;}
.benefit strong{color:#fff;}
.check{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  color:#fff;font-size:15px;font-weight:700;
}

/* =================================================================
   6. PROVA SOCIAL
   ================================================================= */
.social{background:linear-gradient(180deg,rgba(124,58,237,.06),transparent);}
.stat-card{
  padding:26px 20px;border-radius:18px;text-align:center;
  background:var(--card);border:1px solid var(--border);
}
.stat-card__num{
  display:block;font-family:Anton,sans-serif;font-size:34px;line-height:1;
  background:linear-gradient(180deg,#f9a8d4,var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-card__label{display:block;margin-top:8px;font-size:13px;color:var(--muted-2);}

.testimonials{margin-top:24px;}
.testimonial{
  padding:26px 24px;border-radius:18px;
  background:rgba(255,255,255,.022);border:1px dashed rgba(148,120,200,.3);
}
.testimonial__head{display:flex;align-items:center;gap:12px;}
.testimonial__avatar{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(148,120,200,.18);}
.testimonial__name{display:block;font-size:15px;font-weight:600;color:#cfcae2;}
.testimonial__role{display:block;font-size:12px;color:var(--dim);}
.testimonial__quote{margin-top:16px;font-size:15px;line-height:1.55;color:#7d789a;font-style:italic;}

/* =================================================================
   7. OFERTA
   ================================================================= */
.offer{position:relative;}
.offer__grid{display:flex;flex-direction:column;gap:24px;}
.lessons{display:flex;flex-direction:column;gap:12px;}
.lesson{
  display:flex;gap:18px;align-items:center;
  padding:20px 22px;border-radius:16px;
  background:var(--card);border:1px solid var(--border);
}
.lesson--feature{background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(236,72,153,.08));border-color:rgba(192,132,252,.32);}
.lesson__num{
  flex:none;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:Anton,sans-serif;font-size:24px;
  background:rgba(168,85,247,.14);color:#c084fc;
}
.lesson--feature .lesson__num{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;}
.lesson__title{display:block;font-size:17px;font-weight:600;color:#fff;}
.lesson__desc{display:block;margin-top:4px;font-size:14px;color:var(--muted-2);}

.price-card{
  padding:34px 28px;border-radius:24px;text-align:center;
  background:linear-gradient(180deg,rgba(36,20,58,.95),rgba(18,10,34,.95));
  border:1px solid rgba(192,132,252,.34);
  box-shadow:0 30px 80px -24px rgba(147,51,234,.5);
}
.price-card__eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f9a8d4;}
.price-card__hint{display:block;margin-top:12px;font-size:14px;color:var(--muted-2);}
.price-card__value{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:4px;}
.price-card__currency{font-size:24px;font-weight:600;color:#cfcae2;}
.price-card__num{
  font-family:Anton,sans-serif;font-size:72px;line-height:1;
  background:linear-gradient(180deg,#f9a8d4,var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.price-card .btn{margin-top:24px;}
.price-card__micro{margin-top:14px;font-size:13px;color:var(--dim);}
.price-card__pays{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.price-card__pays span{padding:6px 12px;border-radius:8px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid rgba(148,120,200,.18);}
.price-card__note{margin-top:22px;padding-top:20px;border-top:1px solid rgba(148,120,200,.16);font-size:13px;line-height:1.55;color:var(--muted-2);text-align:left;}

/* =================================================================
   8. OBJEÇÕES
   ================================================================= */
.objection{
  padding:26px 26px;border-radius:18px;
  background:rgba(255,255,255,.025);border:1px solid var(--border);
}
.objection h3{font-size:17px;font-weight:600;color:#fff;}
.objection p{margin-top:12px;font-size:15px;line-height:1.6;color:#a39ec0;}

/* =================================================================
   9. GARANTIA
   ================================================================= */
.guarantee{position:relative;}
.guarantee__badge{
  width:80px;height:80px;margin:0 auto;border-radius:22px;font-size:38px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(52,211,153,.18),rgba(16,185,129,.08));
  border:1px solid rgba(52,211,153,.34);
}
.guarantee .section__title{margin-top:22px;}
.guarantee__line{margin-top:18px;font-family:Anton,sans-serif;text-transform:uppercase;font-size:22px;color:#34d399;}

/* =================================================================
   10. CONDIÇÃO DE LANÇAMENTO
   ================================================================= */
.scarcity{
  display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center;
  padding:30px 28px;border-radius:20px;
  background:linear-gradient(135deg,rgba(236,72,153,.14),rgba(147,51,234,.1));
  border:1px solid rgba(236,72,153,.32);
}
.scarcity__icon{font-size:34px;}
.scarcity__title{font-family:Anton,sans-serif;text-transform:uppercase;font-size:22px;}
.scarcity p{margin-top:10px;font-size:15px;line-height:1.6;color:#c9b8e0;}

/* =================================================================
   11. FAQ
   ================================================================= */
.faq{display:flex;flex-direction:column;gap:12px;}
.faq__item{
  padding:20px 24px;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.025);border:1px solid var(--border);
}
.faq__item summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:17px;font-weight:600;color:#fff;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:"+";flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:rgba(168,85,247,.14);color:#c084fc;
}
.faq__item[open] summary::after{content:"\2212";}
.faq__item p{margin-top:14px;font-size:15px;line-height:1.6;color:#a39ec0;}

/* =================================================================
   12. CTA FINAL
   ================================================================= */
.final-cta{position:relative;overflow:hidden;}
.final-cta__title{
  font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:34px;line-height:1.04;text-wrap:balance;
}
.final-cta .btn{margin-top:28px;width:100%;}

/* =================================================================
   13. P.S.
   ================================================================= */
.ps{
  padding:28px 26px;border-radius:18px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);border-left:3px solid var(--purple);
}
.ps__label{font-family:Anton,sans-serif;font-size:20px;text-transform:uppercase;color:#c084fc;}
.ps p{margin-top:12px;font-size:16px;line-height:1.65;color:#c5c0da;text-wrap:pretty;}
.ps strong{color:#fff;}

/* =================================================================
   14. RODAPÉ
   ================================================================= */
.footer{background:var(--bg-dark);border-top:1px solid rgba(148,120,200,.1);}
.footer__inner{display:flex;flex-direction:column;gap:12px;padding-top:36px;padding-bottom:36px;}
.footer__legal{font-size:13px;line-height:1.6;color:#6f6a8c;max-width:620px;}
.footer__legal a{color:#a78bce;text-decoration:underline;}
.footer__site{font-size:13px;color:#6f6a8c;}


/* =================================================================
   ===============  VERSÃO PARA COMPUTADOR (telas grandes) =========
   Tudo acima é para celular. Daqui pra baixo adapta para o PC.
   ================================================================= */
@media (min-width:768px){

  .section{padding:104px 0;}
  .section__title{font-size:46px;margin-top:22px;}
  .section__head{margin-bottom:54px;}
  .grid{gap:18px;}
  .grid--2{grid-template-columns:1fr 1fr;}
  .grid--3{grid-template-columns:repeat(3,1fr);}
  .grid--4{grid-template-columns:repeat(4,1fr);}

  /* HERO em 2 colunas: texto à esquerda, foto à direita */
  .hero__inner{
    display:grid;grid-template-columns:1.06fr .94fr;gap:24px;align-items:center;
    min-height:760px;padding-top:0;padding-bottom:0;
  }
  .hero__text{margin-top:0;}
  .hero__photo{order:0;align-self:center;}
  .hero__photo img{max-width:560px;}
  .hero__title{font-size:60px;line-height:.96;}
  .hero__subtitle{font-size:19px;}
  .hero .btn{width:auto;}
  .hero__stats{margin-top:44px;}
  .stat__num{font-size:30px;}

  .lead{font-size:25px;}
  .muted-text{font-size:19px;}
  .big-line{font-size:30px;margin-top:52px;}

  .highlight{margin-top:44px;padding:40px;text-align:center;}
  .highlight__title{font-size:23px;}

  .benefit p{font-size:16.5px;}

  .stat-card__num{font-size:38px;}
  .testimonials{margin-top:30px;}

  /* OFERTA: lista de aulas + caixa de preço lado a lado */
  .offer__grid{display:grid;grid-template-columns:1.25fr .85fr;gap:30px;align-items:start;}
  .price-card{position:sticky;top:24px;}
  .lesson__title{font-size:18px;}

  .objection h3{font-size:18px;}

  .scarcity{flex-direction:row;text-align:left;align-items:center;gap:24px;padding:36px 40px;}
  .scarcity__title{font-size:24px;}

  .guarantee .section__title{font-size:42px;}
  .guarantee__line{font-size:26px;}

  .final-cta__title{font-size:54px;}
  .final-cta .btn{width:auto;}

  .footer__inner{flex-direction:row;justify-content:space-between;align-items:center;padding-top:42px;padding-bottom:42px;}
}

/* telas bem largas: hero um pouco maior */
@media (min-width:1100px){
  .hero__title{font-size:64px;}
}
