*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins', sans-serif;
    background:#F6EFE7;
    color:#5B3924;
    overflow-x:hidden;
    opacity:0;

    transition:opacity 0.3s ease;
}body.loaded{

    opacity:1.5;
}


/* =========================
   HERO
========================= */

.hero{

    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:100px 8%;

    background:
        linear-gradient(
            rgba(245,238,230,.25),
            rgba(245,238,230,.25)
        ),
        url("./img/fondo-hero.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    overflow:hidden;
}
.hero-left{
    flex:1;
}

.hero-right{
    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
}

.hero-right img{

    width:1200px;

    transform:
        translateX(-200px)
        translateY(-15px);

}
/* =========================
   LOGO
========================= */

.logo{
    font-family:'Cormorant Garamond', serif;
    font-size:8rem;
    font-weight:600;
    letter-spacing:5px;
    line-height:1;
    margin-bottom:20px;
}

.subtitle{
    font-size:1.8rem;
    font-weight:300;
    color:#7A624D;
    max-width:600px;
    margin-bottom:40px;
    line-height:1.35;
}
/* =========================
   BOTÓN
========================= */

.btn-productos{
    display:inline-block;

    padding:18px 40px;

    background:#5B3924;
    color:white;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    margin-bottom:60px;

    transition:.3s;
    
    font-size:1.1rem;
}
.btn-productos:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(91,57,36,.18);
}
/* =========================
   FEATURES
========================= */

.features{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    margin-top:20px;
}

.feature{
    flex:1;
    text-align:center;
    padding:20px 35px;
    position:relative;
}

.feature:not(:last-child)::after{
    content:"";
    position:absolute;
    top:15%;
    right:0;

    width:1px;
    height:70%;

    background:#D8C7B5;
}

.feature-icon{
    font-size:2rem;
    margin-bottom:15px;
}

.feature h3{
    font-size:1.3rem;
    margin-bottom:10px;
}

.feature p{
    color:#8A6B52;
    line-height:1.6;
    font-size:1rem;
}
/* =========================
   PRODUCTOS
========================= */

.productos{

    padding:120px 6%;

    background:
        linear-gradient(
            rgba(255,248,241,.85),
            rgba(255,248,241,.85)
        ),
        url("./img/fondo-productos.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.section-title{
    text-align:center;

    font-family:'Cormorant Garamond', serif;

    font-size:4rem;

    margin-bottom:70px;
}

.product-card{

    display:flex;
    align-items:center;

    background:
    linear-gradient(
        135deg,
        #FAF4ED,
        #F2E8DC
    );

    border-radius:35px;

    overflow:hidden;

    margin-bottom:50px;

    border:none;

    box-shadow:
        0 15px 35px rgba(91,57,36,.05);

    transition:.3s;
}

.product-card:hover{
    transform:translateY(-6px);
}

.product-image{
    flex:1;
    padding:40px;
}

.product-image img{
    width:100%;
    display:block;
}

.product-info{
    flex:1;
    padding:50px;
}

.badge{
    display:inline-block;

    background:#F1E2CF;
    color:#5B3924;

    padding:8px 15px;

    border-radius:30px;

    font-size:.8rem;

    margin-bottom:20px;
}

.premium{
    background:#FFE0E0;
    color:#C0392B;
}

.product-info h3{
    font-family:'Cormorant Garamond', serif;
    font-size:3rem;
    margin-bottom:15px;
}

.description{
    color:#7A624D;
    margin-bottom:20px;
}

.product-info ul{
    margin-left:20px;
    margin-bottom:25px;
}

.product-info li{
    margin-bottom:10px;
}

.price{
    font-size:3rem;
    font-weight:700;
    margin-bottom:20px;
}
.precio-antiguo{

    font-size:1.5rem;

    color:#B9A38F;

    text-decoration:line-through;

    font-weight:500;

    display:block;

    margin-bottom:5px;
}

.precio-ahorro{

    display:inline-block;

    background:#E8F4EA;

    color:#2E7D32;

    padding:8px 14px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

    margin-top:10px;
}

.btn-comprar{
    display:inline-block;

    background:#5B3924;
    color:white;

    text-decoration:none;

    padding:15px 30px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;
}

.btn-comprar:hover{
    opacity:.9;
}

.premium-btn{
    background:#C0392B;
}

/* =========================
   BENEFICIOS
========================= */

.beneficios{

    padding:120px 6%;

    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;

    background:
        linear-gradient(
            rgba(240,232,223,.80),
            rgba(240,232,223,.80)
        ),
        url("./img/fondo-beneficios.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.beneficio-item{

    background:white;

    padding:25px 35px;

    border-radius:20px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.04);

    font-size:1.05rem;
    font-weight:500;
}

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

.footer{
    background:#4B2D1A;
    color:white;
    text-align:center;
    padding:80px 20px;
}

.footer h2{
    font-family:'Cormorant Garamond', serif;
    font-size:3rem;
    margin-bottom:15px;
}

.footer p{
    margin-bottom:10px;
}

.copyright{
    opacity:.7;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

    .hero{
        flex-direction:column;
        text-align:center;
        padding:80px 30px;
    }

    .hero::after{
        display:none;
    }

    .hero-right{
        justify-content:center;
        margin-top:40px;
    }

    .hero-right img{
        width:500px;
        transform:none;
    }

    .features{
        flex-direction:column;
    }

    .feature:not(:last-child)::after{
        display:none;
    }

    .logo{
        font-size:5rem;
    }

    .product-card{
        flex-direction:column;
    }
}

@media(max-width:768px){

    .logo{
        font-size:4rem;
    }

    .subtitle{
        font-size:1.3rem;
    }

    .section-title{
        font-size:3rem;
    }

    .product-info h3{
        font-size:2.3rem;
    }

    .price{
        font-size:2.2rem;
    }

}

@media(max-width:600px){

    .hero{
        padding:60px 20px;
    }

    .productos{
        padding:80px 20px;
    }

    .beneficios{
        padding:80px 20px;
    }

    .logo{
        font-size:3rem;
    }

}
/* =========================
   FOOTER PREMIUM
========================= */

.footer{

    background:#5B3924;

    color:white;

    text-align:center;

    padding:90px 20px 50px;

    position:relative;
}

.footer h2{

    font-family:'Cormorant Garamond', serif;

    font-size:4rem;

    font-weight:600;

    margin-bottom:20px;

    letter-spacing:2px;
}

.footer p{

    font-size:1.1rem;

    opacity:.95;
}

.footer-social{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    margin:40px 0;
}

.footer-social a{

    width:80px;
    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:white;

    border:1px solid rgba(255,255,255,.25);

    font-size:1.8rem;

    transition:.3s;
}

.footer-social a:hover{

    transform:translateY(-5px);

    border-color:rgba(255,255,255,.8);

    background:rgba(255,255,255,.08);
}

.footer::before{

    content:"";

    display:block;

    width:120px;

    height:1px;

    background:rgba(255,255,255,.25);

    margin:0 auto 35px;
}

.copyright{

    margin-top:35px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.12);

    opacity:.7;

    font-size:.95rem;
}
/* =========================
   BARRA PUBLICITARIA
========================= */

.top-bar{

    width:100%;

    background:#D6A37C;

    overflow:hidden;

    white-space:nowrap;

    padding:12px 0;
}

.top-bar-track{

    display:flex;

    width:max-content;

    animation:scrollBanner 25s linear infinite;
}

.top-bar-track span{

    color:white;

    font-weight:700;

    font-size:.95rem;

    padding-right:120px;

    letter-spacing:.5px;
}

@keyframes scrollBanner{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}