/*
Theme Name: Lolla Mix VIP
Theme URI: https://lollamix.com.br
Author: Notoriety Ads
Author URI: https://notorietyads.com.br
Description: Landing page de captacao para grupo VIP de WhatsApp — cupons, pre-venda e sorteios. Tema de pagina unica com textos, link do grupo e Meta Pixel editaveis no Personalizar. Feito pela Notoriety Ads.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lolla-mix-vip
Tags: landing-page, one-page, custom-colors, custom-logo, full-width-template
*/

:root{
  --paper: #fff8fa;
  --paper-dim: #fdeef4;
  --pink-100: #ffe1ee;
  --pink-300: #ff9fc6;
  --pink-500: #ff2e87;
  --pink-600: #e8156d;
  --pink-700: #c2116b;
  --plum-950: #2b1220;
  --plum-700: #5c2f42;
  --gold-400: #f0b94d;
  --line: rgba(43,18,32,0.10);
  --shadow-pink: 0 20px 45px -20px rgba(226,20,109,0.45);

  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }
html,body{ margin:0; }
body{
  background: var(--paper);
  color: var(--plum-950);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; }
[hidden]{ display:none !important; }

h1,h2,h3{
  font-family: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  text-wrap: balance;
  margin: 0;
  line-height: 1.1;
}
p{ margin:0; }
a{ color: inherit; text-decoration: none; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Manrope', sans-serif; font-weight:800; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--pink-700);
}

.wrap{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 48px);
}

/* ---------- topbar ---------- */
.topbar{
  position: sticky; top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: rgba(255,248,250,0.82);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 14px;
  gap: 12px;
}
.wordmark{
  font-family:'Unbounded', sans-serif; font-weight:700;
  font-size: 1.05rem; letter-spacing: -0.01em;
  display:flex; align-items:center; gap:8px;
}
.wordmark .dot{
  width:9px; height:9px; border-radius:50%;
  background: var(--pink-500);
  box-shadow: 0 0 0 4px var(--pink-100);
}
.btn{
  --btnpad: 16px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:'Manrope', sans-serif; font-weight:800; font-size:.92rem;
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease;
}
.btn-primary{
  background: linear-gradient(135deg, var(--pink-500), var(--pink-700));
  color: #fff;
  box-shadow: var(--shadow-pink);
  position: relative;
}
.btn-primary:hover{ transform: translateY(-2px) scale(1.015); box-shadow: 0 26px 55px -18px rgba(226,20,109,0.55); }
.btn-primary:active{ transform: translateY(0) scale(.98); }
.btn-small{ padding: 10px 18px; font-size: .82rem; }
.btn-ghost{
  background: transparent; color: var(--pink-700);
  border: 1.5px solid var(--pink-300);
}
.btn-ghost:hover{ background: var(--pink-100); }

.pulse-ring{
  position:absolute; inset:-6px; border-radius:inherit;
  border: 2px solid var(--pink-500);
  animation: pulse 2.4s cubic-bezier(.3,.6,.4,1) infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%{ opacity:.55; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.28); }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block: clamp(48px, 8vw, 88px) clamp(56px, 9vw, 96px); }
.blob{
  position:absolute; border-radius:50%;
  filter: blur(60px);
  opacity:.55;
  z-index:0;
  animation: drift 16s ease-in-out infinite;
}
.blob-a{ width:420px; height:420px; top:-160px; left:-120px; background: radial-gradient(circle at 30% 30%, var(--pink-300), transparent 70%); animation-duration: 18s; }
.blob-b{ width:360px; height:360px; top:60px; right:-140px; background: radial-gradient(circle at 60% 40%, var(--gold-400), transparent 70%); opacity:.35; animation-duration: 22s; animation-delay: -4s; }
.blob-c{ width:300px; height:300px; bottom:-140px; left:30%; background: radial-gradient(circle at 50% 50%, var(--pink-500), transparent 70%); opacity:.25; animation-duration: 20s; animation-delay: -9s; }
@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(24px,-18px) scale(1.06); }
  66%{ transform: translate(-18px,14px) scale(0.96); }
}

.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 60px);
  align-items:center;
}
.hero-copy h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-block: 16px 18px; color: var(--plum-950); }
.hero-copy h1 em{ font-style:normal; color: var(--pink-600); }
.hero-copy p.lede{ font-size: 1.08rem; color: var(--plum-700); max-width: 46ch; line-height:1.55; }
.hero-cta-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top: 28px; }

.trust-row{ display:flex; align-items:center; gap:10px; margin-top:26px; color:var(--plum-700); font-size:.88rem; font-weight:600; }
.trust-row svg{ flex:none; }

.hero-visual{ position:relative; display:flex; justify-content:center; }
.coupon{
  --scallop: 22px;
  position:relative;
  width: min(100%, 300px);
  background: #fff;
  border: 1.5px dashed var(--pink-300);
  border-radius: 22px;
  padding: 26px 24px 28px;
  box-shadow: 0 30px 60px -25px rgba(226,20,109,0.4);
  transform: rotate(-4deg);
  animation: float-slow 6s ease-in-out infinite;
  mask-image:
    radial-gradient(circle var(--scallop) at var(--scallop) 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--scallop) at calc(100% - var(--scallop)) 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--scallop) at var(--scallop) 100%, transparent 98%, #000 100%),
    radial-gradient(circle var(--scallop) at calc(100% - var(--scallop)) 100%, transparent 98%, #000 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle var(--scallop) at var(--scallop) 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--scallop) at calc(100% - var(--scallop)) 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--scallop) at var(--scallop) 100%, transparent 98%, #000 100%),
    radial-gradient(circle var(--scallop) at calc(100% - var(--scallop)) 100%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in, xor, xor;
}
@keyframes float-slow{
  0%,100%{ transform: rotate(-4deg) translateY(0); }
  50%{ transform: rotate(-2deg) translateY(-10px); }
}
.coupon .tag{ font-family:'Unbounded'; font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pink-600); }
.coupon .amount{ font-family:'Unbounded'; font-weight:800; font-size: 2.5rem; color: var(--plum-950); margin-block: 6px 2px; }
.coupon .amount span{ font-size:1.1rem; color:var(--pink-600); }
.coupon .desc{ font-size:.86rem; color:var(--plum-700); }
.coupon hr{ border:none; border-top:1.5px dashed var(--pink-300); margin-block:14px; }
.coupon .code{ display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--plum-700); }
.coupon .code b{ font-family:'Unbounded'; color:var(--pink-700); letter-spacing:.05em; }
.sparkle{
  position:absolute; border-radius:50%;
  background: var(--gold-400);
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:.2; transform:scale(.7);} 50%{ opacity:1; transform:scale(1.15);} }

/* ---------- marquee ---------- */
.marquee-band{
  background: var(--plum-950);
  color: var(--paper);
  padding-block: 14px;
  overflow:hidden;
  white-space:nowrap;
}
.marquee-track{
  display:inline-flex; gap: 2.5rem;
  animation: scroll-x 26s linear infinite;
  will-change: transform;
}
.marquee-track span{
  font-family:'Unbounded'; font-weight:600; font-size:.82rem;
  letter-spacing:.05em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:2.5rem;
  color: var(--pink-300);
}
.marquee-track span b{ color:#fff; }
@keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- generic section ---------- */
section{ padding-block: clamp(56px, 8vw, 96px); }
.section-head{ max-width: 640px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head h2{ font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-top:12px; }
.section-head p{ margin-top:12px; color:var(--plum-700); font-size:1.02rem; line-height:1.55; }

.reveal{ transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.pre{ opacity:0; transform: translateY(28px); }
.reveal.pre.in{ opacity:1; transform:none; }

/* ---------- benefits bento ---------- */
.bento{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.card{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  display:flex; flex-direction:column; gap:14px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 24px 50px -28px rgba(43,18,32,0.25); border-color: transparent; }
.card .icon{
  width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--pink-100); color: var(--pink-700);
}
.card h3{ font-size:1.05rem; }
.card p{ color:var(--plum-700); font-size:.92rem; line-height:1.5; }
.card.big{ grid-column: span 2; grid-row: span 2; background: linear-gradient(155deg, var(--pink-500), var(--pink-700)); color:#fff; justify-content:space-between; }
.card.big .icon{ background: rgba(255,255,255,0.18); color:#fff; }
.card.big h3{ font-size:1.35rem; }
.card.big p{ color: rgba(255,255,255,0.86); }
.card.big .stat{ font-family:'Unbounded'; font-size:2.4rem; font-weight:800; }

/* ---------- how it works ---------- */
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position:relative; }
.steps::before{
  content:''; position:absolute; top:26px; left:12%; right:12%; height:2px;
  background: repeating-linear-gradient(90deg, var(--pink-300) 0 10px, transparent 10px 18px);
}
.step{ position:relative; display:flex; flex-direction:column; gap:12px; }
.step .num{
  width:54px; height:54px; border-radius:50%;
  background:#fff; border:2px solid var(--pink-500); color:var(--pink-700);
  font-family:'Unbounded'; font-weight:700; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
.step h3{ font-size:1.02rem; }
.step p{ color:var(--plum-700); font-size:.92rem; line-height:1.5; }

/* ---------- urgency ---------- */
.urgency{ background: var(--paper-dim); border-block: 1px solid var(--line); }
.urgency-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,60px); align-items:center; }
.meter-card{ background:#fff; border-radius:22px; padding: 28px clamp(20px,4vw,32px); border:1px solid var(--line); }
.meter-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-size:.88rem; font-weight:700; color:var(--plum-700); }
.meter-top .count{ font-family:'Unbounded'; font-size:1.6rem; color:var(--pink-600); font-variant-numeric: tabular-nums; }
.meter-track{ height:14px; border-radius:999px; background: var(--pink-100); overflow:hidden; }
.meter-fill{ height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg, var(--pink-500), var(--gold-400)); transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.meter-note{ margin-top:12px; font-size:.8rem; color:var(--plum-700); }

/* ---------- final cta ---------- */
.final{
  background: linear-gradient(150deg, var(--plum-950), #431a2e 60%, var(--pink-700));
  border-radius: 28px;
  padding: clamp(36px, 6vw, 64px);
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12), transparent 55%);
}
.final h2{ font-size: clamp(1.7rem, 3.6vw, 2.5rem); position:relative; }
.final p{ position:relative; margin-top:14px; color:rgba(255,255,255,0.82); max-width:52ch; margin-inline:auto; }
.final .hero-cta-row{ justify-content:center; margin-top:30px; position:relative; }
.final .btn-primary{ background:#fff; color:var(--pink-700); box-shadow:0 20px 45px -18px rgba(0,0,0,0.4); }
.final .pulse-ring{ border-color:#fff; }

/* ---------- footer ---------- */
.site-footer{ padding-block: 40px 90px; border-top:1px solid var(--line); }
.site-footer .wrap{ display:flex; flex-direction:column; gap:10px; }
.site-footer .legal{ font-size:.78rem; color: var(--plum-700); line-height:1.6; max-width:70ch; }

/* ---------- sticky mobile cta ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,248,250,0.92);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.sticky-cta.show{ transform: translateY(0); }
.sticky-cta .btn{ width:100%; }

@media (max-width: 880px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; margin-bottom: 8px; }
  .coupon{ transform: rotate(-2deg); }
  .bento{ grid-template-columns: repeat(2, 1fr); }
  .card.big{ grid-column: span 2; grid-row: span 1; }
  .steps{ grid-template-columns: 1fr; gap: 30px; }
  .steps::before{ display:none; }
  .urgency-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .bento{ grid-template-columns: 1fr; }
  .card.big{ grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}