/*==================================================
ENTREGA 1
HERO + TRUST + PROBLEMAS + VIDEO
==================================================*/


/*==================================================
TABLET
==================================================*/

@media (max-width:991px){

/* HERO */

.hero{
    padding:90px 0 50px;
}

.hero::before{
    width:420px;
    height:420px;
    top:-140px;
    right:-150px;
}

.hero-grid{
    grid-template-columns:1fr;
    gap:50px;
    text-align:center;
}

.hero-info{
    max-width:100%;
    margin:auto;
}

.hero p{
    max-width:760px;
    margin:0 auto 35px;
}

.hero-checks{
    width:fit-content;
    margin:0 auto 35px;
    align-items:flex-start;
}

.hero-image::before{
    width:360px;
    height:360px;
}

.hero-image img{
    max-width:360px;
    width:100%;
    transform:none;
}

/* TRUST */

.trust-strip{
    padding:20px 0 40px;
}

/* PROBLEMAS */

.problemas{
    padding:5px 0;
}

.section-text{
    max-width:100%;
    margin-bottom:45px;
}

.problemas-img{
    margin-bottom:35px;
}

.problemas-img img{
    max-width:100%;
}

.problemas-lista{
    grid-template-columns:1fr 1fr;
    gap:16px;
}

/* VIDEO */

.funciona{
    padding:30px 0;
}

.video-card{
    margin:40px auto;
}

.video-note{
    font-size:20px;
    margin:30px auto 40px;
}

.beneficios-video{
    grid-template-columns:1fr;
    gap:18px;
}

}


/*==================================================
MOVIL
==================================================*/
@media (max-width:768px){

.hero{

    padding:35px 0 20px;
    overflow:hidden;

}

.hero-grid{

    display:flex;

    flex-direction:column;

    gap:16px;

    min-height:auto;

}

.hero-info{

    width:100%;

    max-width:100%;

}

.hero-copy{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.badge{

    margin-bottom:10px;

    font-size:13px;

    padding:10px 18px;

}

.hero h1{

    font-size:30px;

    line-height:1.15;

    max-width:360px;

    margin:0 auto 14px;

}

.hero p{

    max-width:310px;

    font-size:16px;

    line-height:1.6;

    margin:16px auto;

    text-align:left;

}

.hero-checks{

    width:100%;

    margin:0 0 16px;

    padding:0;

    list-style:none;

}

.hero-checks li{

    text-align:center;

    font-size:17px;

    margin-bottom:8px;

}

.hero .btn{

    width:100%;

    max-width:340px;

}

.hero-stars{

    margin-top:12px;

    text-align:center;

}

.hero-stars span{

    display:block;

    margin-top:8px;

}

.hero-image{

    order:-1;
    width:100%;
    margin-bottom:8px;
    margin:8px auto 10px;
    overflow:hidden;

}

.hero-image::before{

    content:none;

    width:300px;

    height:300px;

}

.hero-image img{

    width:600px;

    max-width:900px;
}

.hero::before{

    width:300px;

    height:300px;

    top:-100px;

    right:-100px;

}

}
/*==================================================
ENTREGA 2
ANTES Y DESPUÉS + VENTAJAS + TESTIMONIOS
==================================================*/


/*==================================================
TABLETS
==================================================*/

@media (max-width:991px){

/*==================================
ANTES Y DESPUÉS
==================================*/

.antes-despues{

    padding:90px 0;

}

.resultado-img{

    margin:40px auto;

}

.resultado-img img{

    max-width:100%;

}

.resultado-beneficios{

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.resultado-beneficios div{

    padding:28px;

}


/*==================================
VENTAJAS
==================================*/

.ventajas-grid{

    grid-template-columns:1fr;

    gap:20px;

    margin-top:45px;

}

.ventaja-item{

    padding:24px;

}


/*==================================
TESTIMONIOS
==================================*/

.testimonios{

    padding:90px 0;

}

.whatsapp-slider{

    width:100%;

    max-width:430px;

    margin:0 auto 70px;

}

.whatsapp-slider img{

    width:100%;

    display:block;

    border-radius:18px;

}

.swiper-pagination{

    margin-top:15px;
    position:relative;

}

.clientes-grid{

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.subtitulo-testimonios{

    margin-top:45px;

}

}


/*==================================================
MOVIL
==================================================*/

@media (max-width:768px){

/*==================================
ANTES Y DESPUÉS
==================================*/

.antes-despues{

    padding:70px 0;

}

.resultado-img{

    margin:30px auto;

}

.resultado-img img{

    border-radius:18px;

}

.resultado-beneficios{

    grid-template-columns:1fr;

    gap:18px;

}

.resultado-beneficios div{

    padding:22px;

}

.resultado-beneficios strong{

    font-size:18px;

}


/*==================================
VENTAJAS
==================================*/

.ventajas-grid{

    gap:18px;

}

.ventaja-item{

    flex-direction:column;

    text-align:center;

    align-items:center;

    padding:22px;

}

.ventaja-item span{

    font-size:42px;

}

.ventaja-item h3{

    font-size:21px;

}


/*==================================
TESTIMONIOS
==================================*/

.testimonios{

    padding:70px 0;

}

.whatsapp-slider{

    width:100%;

    max-width:430px;

    margin:0 auto 70px;

}

.whatsapp-slider img{

    width:100%;

    display:block;

    border-radius:18px;

}

.swiper-pagination{

    margin-top:15px;
    position:relative;

}

.slide{

    border-radius:18px;

}

.clientes-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.cliente-body{

    padding:18px;

}

.estrellas{

    font-size:18px;

}

.comentario{

    font-size:16px;

}

}

/*==================================================
ENTREGA 3
OFERTA + FAQ + CONFIANZA
==================================================*/


/*==================================================
TABLETS
==================================================*/

@media (max-width:991px){

/*==============================
OFERTA
==============================*/

.oferta{
    padding:90px 0;
}

.oferta-box{
    grid-template-columns:1fr;
    gap:40px;
    padding:45px;
    text-align:center;
}

.oferta-producto{
    order:-1;
    min-height:auto;
}

.circulo-fondo{
    width:320px;
    height:320px;
}

.oferta-producto img{
    max-width:380px;
    transform:none;
}

.sello{
    width:120px;
    height:120px;
    top:20px;
    right:20px;
}

.sello span{
    font-size:36px;
}

.oferta-info h2{
    font-size:44px;
}

.oferta-info h2 strong{
    font-size:58px;
}

.beneficio{
    text-align:left;
}

.precio-box{
    flex-direction:column;
    align-items:center;
    gap:20px;
}

/*==============================
FAQ
==============================*/

.faq{
    padding:90px 0;
}

.faq-lista{
    max-width:100%;
}

.faq-question{
    padding:24px 28px;
    font-size:20px;
}

.faq-answer{
    padding:0 28px;
}

.faq-item.active .faq-answer{
    padding:0 28px 24px;
}

/*==============================
CONFIANZA
==============================*/

.confianza{
    padding:90px 0;
}

.confianza-grid{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.confianza-card{
    padding:35px 24px;
}

}


/*==================================================
MOVIL
==================================================*/

@media (max-width:768px){

/*==============================
OFERTA
==============================*/

.oferta{
    padding:70px 0;
}

.oferta-box{
    grid-template-columns:1fr;
    gap:28px;
    padding:28px 20px;
}

.oferta-producto{
    order:-1;
}

.circulo-fondo{
    width:230px;
    height:230px;
}

.oferta-producto img{
    width:100%;
    max-width:260px;
}

.sello{
    width:95px;
    height:95px;
    top:-28px;
    right:-15px;
    font-size:10px;
}

.sello span{
    font-size:24px;
}

.oferta-rating{
    font-size:20px;
}

.oferta-rating span{
    font-size:15px;
}

.oferta-info h2{
    font-size:28px;
    line-height:1.15;
}

.oferta-info h2 strong{
    font-size:44px;
}

.beneficio{
    gap:14px;
}

.icono{
    width:48px;
    height:48px;
    font-size:22px;
}

.precio-box{
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.precio-anterior del{
    font-size:30px;
}

.precio-actual strong{
    font-size:56px;
}

.ahorro{
    font-size:15px;
}

.texto-whatsapp{
    font-size:14px;
}

/*==============================
FAQ
==============================*/

.faq{
    padding:30px 0;
}

.faq h2{
    font-size:30px;
}

.faq-subtitulo{
    font-size:17px;
    margin-bottom:35px;
}

.faq-question{
    font-size:18px;
    padding:20px;
}

.faq-answer{
    font-size:16px;
    padding:0 20px;
}

.faq-item.active .faq-answer{
    padding:0 20px 20px;
}

.faq-icon{
    font-size:26px;
}

/*==============================
CONFIANZA
==============================*/

.confianza{
    padding:70px 0;
}

.confianza h2{
    font-size:30px;
}

.confianza-subtitulo{
    font-size:17px;
    margin-bottom:35px;
}

.confianza-grid{
    grid-template-columns:2fr;
    gap:20px;
}

.confianza-card{
    padding:28px 20px;
}

.confianza-icon{
    font-size:36px;
}

}

/*==================================================
ENTREGA 4
CTA + FOOTER + WHATSAPP + AJUSTES FINALES
==================================================*/


/*==================================================
TABLETS
==================================================*/

@media (max-width:991px){

/*==================================
CTA FINAL
==================================*/

.cta-final{

    padding:90px 0;

}

.cta-box{

    grid-template-columns:1fr;

    gap:40px;

    padding:50px;

    text-align:center;

}

.cta-producto{

    order:-1;

}

.cta-producto img{

    max-width:360px;

}

.cta-box ul{

    display:inline-block;

    text-align:left;

}

.cta-precio{

    text-align:center;

}

.cta-precio strong{

    font-size:58px;

}


/*==================================
FOOTER
==================================*/

.footer{

    padding:70px 0 35px;

}

.footer-info{

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}


/*==================================
WHATSAPP
==================================*/

.whatsapp-float{

    right:18px;

    bottom:18px;

}

}


/*==================================================
MOVIL
==================================================*/

@media (max-width:768px){

/*==================================
AJUSTES GENERALES
==================================*/

.container{

    padding:0 18px;

}

section{

    padding:20px 0;

}

img{

    max-width:100%;

    height:auto;

}

.btn{

    width:100%;

    justify-content:center;

}


/*==================================
CTA FINAL
==================================*/

.cta-final{

    padding:30px 0;

}

.cta-box{

    grid-template-columns:1fr;

    padding:30px 22px;

    gap:30px;

    text-align:center;

}

.cta-box h2{

    font-size:24px;

}

.cta-box p{

    font-size:17px;

}

.cta-box ul{

    text-align:left;

    display:block;

}

.cta-box li{

    margin-bottom:12px;

}

.cta-precio .antes{

    font-size:24px;

}

.cta-precio strong{

    font-size:48px;

}

.cta-producto{

    order:-1;

}

.cta-producto img{

    max-width:250px;

}


/*==================================
FOOTER
==================================*/

.footer{

    padding:60px 0 30px;

}

.footer-logo img{

    width:70px;
    border-radius: 50%;

}

.footer p{

    font-size:16px;

}

.footer-info{

    grid-template-columns:1fr;

    gap:18px;

    margin:40px 0;

}

.footer-copy{

    font-size:13px;

}


/*==================================
WHATSAPP
==================================*/

.whatsapp-texto{

    display:none;

}

.whatsapp-float{

    right:15px;

    bottom:15px;

    padding:8px;

}

.whatsapp-icono{

    width:56px;

    height:56px;

    font-size:30px;

}

}
@media (max-width:768px){

    .hero::before{

        width:280px;
        height:280px;

        top:-40px;
        right:0px;

        opacity:.45;

    }

}