/*
Theme Name: Linda Morena VIP
Theme URI: https://lindamorenaboutique.com.br
Author: Notoriety Ads
Author URI: https://notorietyads.com
Description: Landing page de captacao para o Grupo VIP da Linda Morena Boutique. Visual premium preto e branco, botoes animados e integracao com o Pixel da Meta. Link do grupo e Pixel ID editaveis em Aparencia > Personalizar > Grupo VIP.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: linda-morena-vip
*/

:root{
  --preto:#0d0d0d;
  --areia:#f5f5f4;
  --nude:#e4e4e2;
  --dourado:#111111;
  --dourado-claro:#f5f5f4;
  --marrom:#4a4a48;
  --branco:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;
  background:var(--areia);
  color:var(--preto);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* HERO */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, #1a1a1a 0%, #131313 55%, #0d0d0d 100%);
  color:var(--branco);
  padding:80px 24px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(circle at 15% 30%, rgba(255,255,255,.05) 0, transparent 25%),
                   radial-gradient(circle at 85% 70%, rgba(255,255,255,.04) 0, transparent 25%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2;max-width:720px}
.eyebrow{
  font-size:12px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--dourado-claro);margin-bottom:28px;font-weight:500;
  display:inline-block;
}
.eyebrow::before,.eyebrow::after{
  content:"";display:inline-block;width:28px;height:1px;
  background:#f5f5f4;vertical-align:middle;margin:0 14px;opacity:.6;
}
.hero h1{
  font-size:clamp(42px,7vw,74px);
  font-weight:500;line-height:1.05;letter-spacing:-.5px;
  margin-bottom:24px;
}
.hero h1 em{font-style:italic;color:var(--dourado-claro)}
.hero p.sub{
  font-size:clamp(17px,2.4vw,21px);
  color:#e5d9c9;font-weight:300;max-width:520px;margin:0 auto 40px;
}
.cta{
  position:relative;
  display:inline-block;
  background:#ffffff;
  color:#0d0d0d;
  padding:19px 46px;
  border-radius:100px;
  font-weight:600;font-size:16px;letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  border:1px solid #ffffff;cursor:pointer;
  overflow:hidden;
  animation:ctaPulse 2.6s ease-in-out infinite;
  z-index:0;
}
.cta::after{
  content:"";
  position:absolute;top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(0,0,0,.14),transparent);
  transform:skewX(-20deg);
  animation:ctaShine 3.4s ease-in-out infinite;
  z-index:-1;
}
.cta:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 48px rgba(0,0,0,.55);animation-play-state:paused}
.cta:active{transform:translateY(-1px) scale(.99)}

@keyframes ctaPulse{
  0%,100%{box-shadow:0 12px 32px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.5)}
  50%{box-shadow:0 12px 32px rgba(0,0,0,.35), 0 0 0 14px rgba(255,255,255,0)}
}
@keyframes ctaShine{
  0%{left:-120%}
  55%,100%{left:140%}
}

.hero .mini{margin-top:20px;font-size:13px;color:#9a9a98;letter-spacing:.04em}

/* faixa */
.faixa{
  background:var(--preto);color:var(--nude);
  text-align:center;padding:16px;
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
}
.faixa span{color:var(--dourado-claro);margin:0 6px}

/* SECTION base */
section.blk{padding:96px 0}
.center{text-align:center;max-width:640px;margin:0 auto}
.kicker{
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--dourado);font-weight:600;margin-bottom:18px;
}
h2.title{font-size:clamp(30px,5vw,46px);font-weight:500;line-height:1.12;margin-bottom:22px}
h2.title em{font-style:italic;color:var(--marrom)}
.lead{font-size:18px;color:var(--marrom);font-weight:300}

/* PERKS */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px}
.perk{
  background:var(--branco);
  border:1px solid var(--nude);
  border-radius:18px;
  padding:38px 30px;
  text-align:left;
  transition:transform .3s ease, box-shadow .3s ease;
}
.perk:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(107,84,67,.12)}
.perk .num{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:34px;color:var(--dourado);line-height:1;margin-bottom:16px;
}
.perk h3{font-size:23px;font-weight:600;margin-bottom:10px}
.perk p{font-size:15px;color:var(--marrom)}

/* PARA QUEM */
.quem{background:var(--nude)}
.quem-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;margin-top:20px}
.quem-list{list-style:none}
.quem-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid rgba(107,84,67,.15);
  font-size:16px;color:#3a2f26;
}
.quem-list li:last-child{border-bottom:none}
.check{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:var(--dourado);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:12px;margin-top:3px;
}
.quem-card{
  background:linear-gradient(160deg,#1a1a1a,#0d0d0d);
  color:var(--branco);border-radius:22px;padding:46px 40px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.quem-card .serif{font-size:27px;font-style:italic;line-height:1.35;margin-bottom:18px}
.quem-card p{font-size:15px;color:#bcbcba}
.quem-card .assina{margin-top:26px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#fff}

/* ENTRAR */
.form-sec{
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg,#0d0d0d,#1a1a1a);
  color:var(--branco);
}

/* FOOTER */
footer.site-footer{background:var(--preto);color:#8a7a68;text-align:center;padding:44px 24px;font-size:13px}
footer.site-footer .marca{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;color:var(--areia);margin-bottom:10px}
footer.site-footer a{color:var(--dourado-claro);text-decoration:none}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.on{opacity:1;transform:none}

@media(max-width:820px){
  .perks{grid-template-columns:1fr}
  .quem-grid{grid-template-columns:1fr;gap:36px}
  section.blk{padding:72px 0}
}