*,*:before,*:after{box-sizing:border-box}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ol,ul{list-style:none}
a{text-decoration:none}
html{background-color:#fff;font-family:"Montserrat",sans-serif;font-size:62.5%;font-weight:400}
body{color:#505050;font-size:1.6rem;line-height:2.6rem}
footer,main,section{display:block;width:100%}
strong{font-weight:700}

.content{
  align-items:center;
  display:flex;
  flex-direction:column;
  margin:0 auto;
  max-width:108rem;
  padding:6rem 1.5rem;
  width:100%
}
@media screen and (max-width:768px){.content{padding:3rem 1.5rem}}

.btn{
  align-items:center;
  border:none;
  border-radius:.8rem;
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  font-family:"Montserrat",sans-serif;
  font-size:1.6rem;
  font-weight:700;
  height:5.6rem;
  justify-content:center;
  line-height:1.8rem;
  padding:0 3rem;
  transition:opacity .2s
}
.btn:hover{opacity:.9}

/* ===== HERO ===== */
#hero{
  background:linear-gradient(135deg, #440493 0%, #6b21a8 50%, #e701dd 100%);
  color:#fff;
  padding:4rem 0 0;
  position:relative
}
#hero .hero-wrapper{
  align-items:flex-start;
  display:flex;
  gap:4rem;
  justify-content:space-between;
  margin:0 auto;
  max-width:108rem;
  padding:0 1.5rem
}
@media screen and (max-width:768px){
  #hero .hero-wrapper{flex-direction:column;gap:3rem}
}
#hero .hero-left{
  flex:1;
  padding:4rem 0 6rem
}
@media screen and (max-width:768px){#hero .hero-left{padding:2rem 0}}
#hero .hero-badge{
  background-color:rgba(255,255,255,.15);
  border-radius:9999px;
  display:inline-block;
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:2rem;
  padding:.8rem 2.4rem
}
#hero h1{
  font-size:3rem;
  font-weight:700;
  line-height:3.8rem;
  margin-bottom:2rem;
  max-width:50rem
}
@media screen and (max-width:768px){#hero h1{font-size:2.4rem;line-height:3.2rem}}
#hero .hero-features{
  list-style:none;
  margin-bottom:2.4rem
}
#hero .hero-features li{
  font-size:1.4rem;
  line-height:2.8rem;
  padding-left:2rem;
  position:relative
}
#hero .hero-features li:before{
  content:"•";
  left:0;
  position:absolute
}
#hero .hero-subtitle{
  font-size:1.8rem;
  font-weight:500;
  line-height:2.8rem;
  margin-bottom:3rem;
  max-width:42rem
}
#hero .btn-cta{
  background-color:#fff;
  color:#440493;
  font-size:2rem;
  font-weight:700;
  height:6rem;
  margin-bottom:1.2rem;
  padding:0 4rem
}
@media screen and (max-width:768px){#hero .btn-cta{font-size:1.6rem;padding:0 2rem;width:100%}}
#hero .hero-price{
  color:rgba(255,255,255,.9);
  display:block;
  font-size:1.2rem;
  font-weight:700
}
#hero .hero-right{
  background:#fff;
  border-radius:1.2rem;
  max-width:42rem;
  overflow:hidden;
  width:100%
}
@media screen and (max-width:768px){#hero .hero-right{max-width:100%}}
#hero .hero-form-header{
  background-color:#642988;
  padding:2rem 3rem
}
#hero .hero-form-header p{
  color:#fff;
  font-size:1.6rem;
  font-weight:700;
  line-height:2.4rem;
  text-align:center
}
#hero .hero-form{
  padding:2.5rem 3rem 3rem
}
#hero .form-group{
  margin-bottom:1.6rem
}
#hero .form-group label{
  color:#1f2937;
  display:block;
  font-size:1.4rem;
  font-weight:500;
  margin-bottom:.5rem
}
#hero .form-group input{
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:.6rem;
  color:#374151;
  font-family:"Montserrat",sans-serif;
  font-size:1.4rem;
  height:4.4rem;
  padding:0 1.4rem;
  width:100%
}
#hero .form-group input::placeholder{color:#9ca3af}
#hero .form-group input:focus{border-color:#642988;outline:none}
#hero .form-checkbox{
  align-items:flex-start;
  display:flex;
  gap:.8rem;
  margin-bottom:2rem
}
#hero .form-checkbox input[type="checkbox"]{
  accent-color:#642988;
  height:1.6rem;
  margin-top:.3rem;
  min-width:1.6rem;
  width:1.6rem
}
#hero .form-checkbox label{
  color:#374151;
  font-size:1.2rem;
  font-weight:500;
  line-height:1.8rem
}
#hero .form-checkbox label a{color:#642988;text-decoration:underline}
#hero .btn-submit{
  background-color:#642988;
  font-size:1.6rem;
  height:4.8rem;
  width:100%
}
#hero .hero-logo{
  padding:3rem 0;
  text-align:center
}
#hero .hero-logo img{
  height:4.8rem;
  opacity:.5
}

/* ===== PLANS ===== */
#plans{background-color:#fff}
#plans .content{padding:8rem 1.5rem}
@media screen and (max-width:768px){#plans .content{padding:4rem 1.5rem}}
#plans h2{
  color:#402060;
  font-size:3.6rem;
  font-weight:700;
  line-height:4.4rem;
  margin-bottom:5rem;
  text-align:center
}
@media screen and (max-width:768px){#plans h2{font-size:2.4rem;line-height:3.2rem;margin-bottom:3rem}}
#plans .plans-grid{
  display:grid;
  gap:3rem;
  grid-template-columns:1fr 1fr;
  max-width:80rem;
  width:100%
}
@media screen and (max-width:768px){#plans .plans-grid{grid-template-columns:1fr}}
.plan-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:1.2rem;
  overflow:hidden;
  position:relative
}
.plan-card.featured{border:2px solid #642988}
.plan-badge{
  background:#642988;
  border-radius:0 0 .8rem .8rem;
  color:#fff;
  font-size:1.4rem;
  font-weight:600;
  left:50%;
  padding:.4rem 2rem;
  position:absolute;
  top:0;
  transform:translateX(-50%)
}
.plan-header{
  background:linear-gradient(135deg, #440493 0%, #e701dd 100%);
  padding:2.4rem 2rem;
  text-align:center
}
.plan-header h3{
  color:#fff;
  font-size:2rem;
  font-weight:700
}
.plan-body{
  padding:2.5rem 2rem
}
.plan-section{
  margin-bottom:2rem
}
.plan-section h4{
  color:#402060;
  font-size:1.4rem;
  font-weight:600;
  margin-bottom:1rem
}
.plan-section h4:after{display:none}
.plan-section ul li{
  color:#73677e;
  font-size:1.4rem;
  line-height:2.6rem;
  padding-left:1.6rem;
  position:relative
}
.plan-section ul li:before{
  color:#642988;
  content:"✓";
  font-weight:700;
  left:0;
  position:absolute
}
.plan-note{
  color:#642988;
  font-size:1.4rem;
  font-weight:600;
  line-height:2rem;
  margin-top:1rem
}
.plan-price{
  align-items:baseline;
  display:flex;
  justify-content:center;
  margin:2rem 0 1.5rem;
  gap:.4rem
}
.price-value{
  color:#642988;
  font-size:3.6rem;
  font-weight:700
}
.price-period{
  color:#73677e;
  font-size:1.4rem
}
.btn-plan{
  background:linear-gradient(135deg, #440493 0%, #e701dd 100%);
  display:flex;
  font-size:1.8rem;
  height:5.6rem;
  width:100%
}

/* ===== STEPS ===== */
#steps{background-color:#f8f5fc}
#steps .content{padding:8rem 1.5rem}
@media screen and (max-width:768px){#steps .content{padding:4rem 1.5rem}}
#steps h2{
  color:#402060;
  font-size:3rem;
  font-weight:700;
  margin-bottom:1rem;
  text-align:center
}
@media screen and (max-width:768px){#steps h2{font-size:2.4rem}}
.steps-subtitle{
  color:#73677e;
  font-size:1.6rem;
  margin-bottom:4rem;
  text-align:center
}
.steps-grid{
  display:grid;
  gap:3rem;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:5rem;
  max-width:80rem;
  width:100%
}
@media screen and (max-width:768px){.steps-grid{grid-template-columns:1fr;gap:2rem}}
.step-card{
  align-items:center;
  background:#fff;
  border-radius:1.2rem;
  display:flex;
  flex-direction:column;
  padding:3rem 2rem;
  text-align:center
}
.step-number{
  align-items:center;
  background:linear-gradient(135deg, #440493 0%, #e701dd 100%);
  border-radius:50%;
  color:#fff;
  display:flex;
  font-size:2.4rem;
  font-weight:700;
  height:5rem;
  justify-content:center;
  margin-bottom:2rem;
  width:5rem
}
.step-card p{
  color:#642988;
  font-size:1.8rem;
  font-weight:600;
  line-height:2.6rem
}
.after-payment{
  background:linear-gradient(135deg, #440493 0%, #6b21a8 50%, #e701dd 100%);
  border-radius:1.2rem;
  color:#fff;
  max-width:80rem;
  padding:3rem 4rem;
  width:100%
}
@media screen and (max-width:768px){.after-payment{padding:2rem}}
.after-payment h3{
  font-size:2rem;
  font-weight:700;
  margin-bottom:1.5rem
}
.after-payment ul li{
  font-size:1.6rem;
  line-height:2.8rem;
  padding-left:2rem;
  position:relative
}
.after-payment ul li:before{
  content:"•";
  left:0;
  position:absolute
}

/* ===== EMOTIONAL ===== */
#emotional{background-color:#fff}
#emotional .content{padding:8rem 1.5rem}
@media screen and (max-width:768px){#emotional .content{padding:4rem 1.5rem}}
#emotional h2{
  color:#402060;
  font-size:3.2rem;
  font-weight:800;
  line-height:4.2rem;
  margin-bottom:1.5rem;
  text-align:center
}
@media screen and (max-width:768px){#emotional h2{font-size:2.4rem;line-height:3.2rem}}
.emotional-subtitle{
  color:#402060;
  font-size:2rem;
  line-height:3rem;
  margin-bottom:4rem;
  max-width:60rem;
  text-align:center
}
.emotional-points{
  background:#f8f5fc;
  border-radius:1.2rem;
  margin-bottom:4rem;
  max-width:60rem;
  padding:3rem;
  width:100%
}
.emotional-points h3{
  color:#402060;
  font-size:2rem;
  font-weight:700;
  margin-bottom:1.5rem
}
.emotional-points ul li{
  color:#2b2b2b;
  font-size:1.6rem;
  font-weight:500;
  line-height:3rem;
  padding-left:2rem;
  position:relative
}
.emotional-points ul li:before{
  color:#e701dd;
  content:"→";
  left:0;
  position:absolute
}
.emotional-cta{
  background:linear-gradient(135deg, #440493 0%, #e701dd 100%);
  border-radius:1.2rem;
  max-width:80rem;
  padding:3rem 4rem;
  text-align:center;
  width:100%
}
@media screen and (max-width:768px){.emotional-cta{padding:2rem}}
.emotional-cta p{
  color:#fff;
  font-size:1.8rem;
  font-weight:600;
  line-height:2.8rem;
  margin-bottom:2rem
}
.btn-protect{
  background:#fff;
  color:#440493;
  font-size:2rem;
  font-weight:700;
  height:6rem;
  padding:0 4rem
}
@media screen and (max-width:768px){.btn-protect{font-size:1.6rem;padding:0 2rem;width:100%}}

/* ===== STATS ===== */
#stats{
  background:linear-gradient(135deg, #440493 0%, #6b21a8 50%, #e701dd 100%);
  color:#fff
}
#stats .content{padding:8rem 1.5rem}
@media screen and (max-width:768px){#stats .content{padding:4rem 1.5rem}}
#stats h2{
  font-size:4.8rem;
  font-weight:700;
  line-height:5.6rem;
  margin-bottom:1.5rem;
  text-align:center
}
@media screen and (max-width:768px){#stats h2{font-size:3rem;line-height:3.8rem}}
.stats-subtitle{
  font-size:2rem;
  margin-bottom:2rem;
  opacity:.9;
  text-align:center
}
.stats-headline{
  font-size:3.6rem;
  font-weight:700;
  line-height:4.4rem;
  margin-bottom:5rem;
  max-width:70rem;
  text-align:center
}
@media screen and (max-width:768px){.stats-headline{font-size:2.4rem;line-height:3.2rem}}
.stats-grid{
  display:grid;
  gap:4rem;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:5rem;
  max-width:70rem;
  width:100%
}
@media screen and (max-width:768px){.stats-grid{grid-template-columns:1fr;gap:2rem}}
.stat-item{
  text-align:center
}
.stat-number{
  display:block;
  font-size:4.8rem;
  font-weight:700;
  line-height:5.6rem
}
@media screen and (max-width:768px){.stat-number{font-size:3.6rem}}
.stat-label{
  display:block;
  font-size:1.6rem;
  opacity:.9
}
.stats-benefits{
  background:rgba(255,255,255,.1);
  border-radius:1.2rem;
  max-width:70rem;
  padding:3rem 4rem;
  width:100%
}
@media screen and (max-width:768px){.stats-benefits{padding:2rem}}
.stats-benefits h3{
  font-size:2.4rem;
  font-weight:700;
  margin-bottom:2rem
}
.stats-benefits ul li{
  font-size:1.6rem;
  line-height:3rem;
  padding-left:2rem;
  position:relative
}
.stats-benefits ul li:before{
  content:"✓";
  left:0;
  position:absolute
}

/* ===== TESTIMONIALS ===== */
#testimonials{background:#fff}
#testimonials .content{padding:8rem 1.5rem}
@media screen and (max-width:768px){#testimonials .content{padding:4rem 1.5rem}}
#testimonials h2{
  color:#402060;
  font-size:3.6rem;
  font-weight:700;
  margin-bottom:1rem;
  text-align:center
}
@media screen and (max-width:768px){#testimonials h2{font-size:2.4rem}}
.testimonials-subtitle{
  color:#73677e;
  font-size:1.8rem;
  margin-bottom:4rem;
  text-align:center
}
.testimonials-grid{
  display:grid;
  gap:3rem;
  grid-template-columns:repeat(3,1fr);
  max-width:80rem;
  width:100%
}
@media screen and (max-width:768px){.testimonials-grid{grid-template-columns:1fr}}
.testimonial-card{
  align-items:center;
  background:#f8f5fc;
  border-radius:1.2rem;
  display:flex;
  flex-direction:column;
  padding:3rem 2rem;
  text-align:center
}
.testimonial-avatar{
  background:linear-gradient(135deg, #440493 0%, #e701dd 100%);
  border-radius:50%;
  height:8rem;
  margin-bottom:1.5rem;
  width:8rem
}
.testimonial-card h4{
  color:#402060;
  font-size:1.8rem;
  font-weight:600;
  margin:0
}
.testimonial-card h4:after{display:none}

/* ===== FAQ ===== */
#faq{background-color:#f8f5fc}
#faq .content{padding:8rem 1.5rem}
@media screen and (max-width:768px){#faq .content{padding:4rem 1.5rem}}
#faq h2{
  color:#402060;
  font-size:3.6rem;
  font-weight:700;
  margin-bottom:1rem;
  text-align:center
}
@media screen and (max-width:768px){#faq h2{font-size:2.4rem}}
.faq-subtitle{
  color:#73677e;
  font-size:1.8rem;
  margin-bottom:4rem;
  max-width:60rem;
  text-align:center
}
.faq-list{
  max-width:80rem;
  width:100%
}
.faq-item{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  margin-bottom:1.5rem;
  overflow:hidden;
  padding:0 2.5rem
}
.faq-item input{display:none}
.faq-item label{
  align-items:center;
  color:#1b1b1b;
  cursor:pointer;
  display:flex;
  font-size:1.8rem;
  font-weight:600;
  justify-content:space-between;
  line-height:2.6rem;
  padding:2rem 0
}
@media screen and (max-width:768px){.faq-item label{font-size:1.6rem}}
.faq-item label:after{
  content:"▾";
  font-size:2rem;
  margin-left:1rem;
  min-width:2rem;
  text-align:center;
  transition:transform .3s
}
.faq-content{
  color:#73677e;
  font-size:1.6rem;
  line-height:2.6rem;
  max-height:0;
  overflow:hidden;
  transition:all .35s
}
.faq-item input:checked+label:after{transform:rotate(180deg)}
.faq-item input:checked~.faq-content{max-height:50rem;padding-bottom:2rem}

/* ===== FOOTER ===== */
footer{background-color:#1e1033}
footer .content{
  align-items:flex-start;
  padding:4rem 1.5rem 3rem
}
footer .footer-top{
  align-items:flex-start;
  display:flex;
  gap:6rem;
  justify-content:space-between;
  margin-bottom:3rem;
  width:100%
}
@media screen and (max-width:768px){footer .footer-top{flex-direction:column;gap:3rem}}
footer .footer-brand{max-width:40rem}
footer .footer-brand img{height:4rem;margin-bottom:1.5rem}
footer .footer-brand p{color:rgba(255,255,255,.7);font-size:1.4rem;line-height:2.2rem}
footer .footer-contact h3{
  color:#fff;
  font-size:2rem;
  font-weight:600;
  margin-bottom:1rem
}
footer .footer-contact p{
  color:rgba(255,255,255,.7);
  font-size:1.4rem;
  line-height:2.8rem
}
footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:2rem;
  width:100%
}
footer .footer-bottom p{
  color:rgba(255,255,255,.5);
  font-size:1.2rem;
  line-height:2rem
}

/* ===== WHATSAPP FLOAT ===== */
.icon-whatsapp{
  align-items:center;
  background-color:#25d366;
  border-radius:50%;
  bottom:35px;
  display:flex;
  height:60px;
  justify-content:center;
  position:fixed;
  right:35px;
  width:60px;
  z-index:999
}
.icon-whatsapp span{
  background:rgba(0,0,0,0) url(../images/wwp.svg) 50% no-repeat;
  background-size:60%;
  border-radius:50%;
  height:60px;
  overflow:hidden;
  width:60px
}