/*=========================
RESET
=========================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Outfit",sans-serif;
    color:#222;
    background:#fff;

}

/*=========================
VARIABLES
=========================*/

:root{

    --purple:#b3b6e3;
    --pink:#fbb2c1;
    --softPink:#ffdddd;
    --cream:#e7edc7;
    --softGreen:#fbfdf3;

    --radius:18px;

}

/*=========================
TOP BAR
=========================*/

.top-bar{

    background:var(--purple);

    color:white;

    text-align:center;

    padding:10px;

    font-size:.9rem;

}

/*=========================
NAVBAR
=========================*/

header{

    background:white;

    position:sticky;

    top:0;

    z-index:100;

}

.navbar{

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    padding:22px 20px;

}

.logo{

    justify-self:start;

    text-decoration:none;

    color:var(--purple);

}

.logo img{
    height: 3rem;
}

.menu{

    display:flex;

    gap:40px;

    list-style:none;
    justify-self:center;

}

.menu a{

    text-decoration:none;

    color:#444;

    font-weight:500;

    transition:.3s;

}

.menu a:hover{

    color:var(--purple);

}

.active{

    color:var(--purple)!important;

}

.nav-icons{

    justify-self:end;

    display:flex;

    align-items:center;

    gap:22px;

}

.nav-icons a{

    color:#444;

    font-size:1.15rem;

    position:relative;

}

.cart span{

    position:absolute;

    top:-8px;

    right:-8px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--purple);

    color:white;

    font-size:.7rem;

    display:flex;

    justify-content:center;

    align-items:center;

}

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

.hero{

    max-width:1400px;

    margin:auto;

    min-height:82vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    padding:60px 40px;

    position:relative;

    overflow:hidden;

    background-color: #fbfdf3;

}

.subtitle{

    color:#777;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.85rem;

}

.hero h1{

    margin:20px 0;

    font-size:5rem;

    line-height:1.05;

}

.hero h1 span{

    color:var(--purple);

}

.hero p{

    width:500px;

    max-width:100%;

    font-size:1.15rem;

    line-height:1.8;

    color:#555;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}




.btn-outline{

    border:2px solid var(--purple);

    color:var(--purple);

    text-decoration:none;

    padding:16px 34px;

    border-radius:50px;

    transition:.35s;

}

.btn-outline:hover{

    background:var(--purple);

    color:white;

}

.hero-image{

    display:flex;

    justify-content:center;

    position:relative;

    z-index:5;

}

.hero-image img{

    width:90%;

    max-width:650px;

}

/*=========================
BACKGROUND SHAPES
=========================*/

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(20px);

    z-index:1;

}

.blob1{

    width:950px;

    height:700px;

    background:#d3d7ff;

    right:-200px;

    top:20px;

}

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

@media(max-width:950px){

    .bloomi{
    height: 2rem !important;
    }

    .hero{

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

        text-align:center;

        min-height:auto;

        padding:60px 25px;

    }

    .hero-content{

        width:100%;
        max-width:600px;

        display:flex;
        flex-direction:column;
        align-items:center;

    }

    .hero-image{

        width:100%;
        margin-top:40px;

    }

.hero p{

margin:0 auto;

}

.hero-buttons{

justify-content:center;

}



.hero h1{

font-size:3.5rem;

}


.blob1{
    top:auto;
    bottom: -10px;
    height: 30vh;
}


}


/*=========================
CATALOGO
=========================*/

.catalog{

    padding:100px 8%;
    background-color: #f1f2ff;

}

.section-header{

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

    margin-bottom:60px;

}

.section-subtitle{

    color:#555;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.8rem;

}

.section-header h2{

    margin-top:12px;
    font-size:2.7rem;

}

.view-all{

    text-decoration:none;
    color:#555;
    font-weight:600;

    transition:.3s;

}

.view-all:hover{

    color:var(--purple);

}

/*
.product-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}*/


.product-card{

    background:white;

    border-radius:28px;

    overflow:hidden;

    position:relative;

    transition:.35s;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    flex: 0 0 calc((100% - 90px) / 4);
    
}

.product-card:hover{

    transform:translateY(-8px);

}

.product-card img{

    width:100%;
    height:300px;

    object-fit:cover;

    padding:0;

    background:#fafafa;

}

.product-info{

    padding:30px;

}

.carousel{

    position:relative;

    display:flex;

    align-items:center;

}

.carousel-window{

    overflow:hidden;

    width:100%;

}

.product-grid{

    display:flex;

    gap:25px;

    transition:transform .45s ease;

}

.product-card{

    min-width:calc((100% - 75px)/4);

    flex-shrink:0;

}

.brand{

    font-size:.8rem;

    text-transform:uppercase;

    color:#888;

}

.product-info h3{

    margin:10px 0;

    font-size:1.15rem;

}

.product-info p{

    color:#777;

    line-height:1.6;

    margin-bottom:25px;

}

.price-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.price{

    font-size:1.3rem;

    font-weight:700;

    color:#333;

}

.add-cart{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:var(--purple);

    color:white;

    cursor:pointer;

    transition:.3s;

}

.add-cart:hover{

    background:var(--pink);

    transform:scale(1.1);

}

.wishlist{

    position:absolute;

    top:20px;

    right:20px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:white;

    box-shadow:0 5px 20px rgba(0,0,0,.1);

    cursor:pointer;

}

.product-badge{

    position:absolute;

    left:20px;

    top:20px;

    background:var(--purple);

    color:white;

    padding:8px 14px;

    border-radius:30px;

    font-size:.75rem;

    font-weight:600;

}

.sale{

    background:#ff8a8a;

}

@media(max-width:600px){

    .product-grid{
        gap: 50px;
    }

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


.product-card{

flex: 0 0 100%;
margin: 0;

max-height: 80vh;

}

.carousel-window{
        padding: 0 10%;
    }


.product-card img{

    width:100%;
    height:60vh;

    object-fit:cover;

    padding:0;

    background:#fafafa;

}

.product-info{
        padding-top: 0;
    }

.price{
    position:absolute; 
    bottom:10px;
}
.add-cart{

    position: absolute;

    right: 30px;
    bottom: 20px;

}


}


.carousel{

    position:relative;

}

.carousel-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

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

    width:52px;
    height:52px;

    border:none;
    border-radius:50%;

    background:white;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    color:#555;

    cursor:pointer;

    z-index:100;

}

.prev{
    left:-60px;
}

.next{
    right:-60px;
}

@media(max-width:900px){


    .prev{
        left:-30px;
    }
    .next{
    right:-30px;
    }

}


/* =========================
   BOTON
========================= */

.justbtn{
    background-color: #f1f2ff;
    height: 10vh;
    display:flex;
    justify-content:center;
    align-items:center;
}
.btn{
    background:var(--purple);
    color:white;
    text-decoration:none;
    padding:16px 34px;
    border-radius:50px;
    transition:.35s;
    margin-bottom: 10vh;
    font-size: 20px;
}
.btn:hover{

    transform:translateY(-3px);

}

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


.bloomi-benefits{

    background: #f2f8d1;

    padding:60px 30px;

}


.benefits-container{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:25px;

}



.benefit-card{

    background:white;

    border-radius:28px;

    padding:30px 25px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:0 15px 40px rgba(179,182,227,.15);

    transition:.3s ease;

}



.benefit-card:hover{

    transform:translateY(-5px);

}



.benefit-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    background:  #f2f8d1;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#b3b6e3;

    font-size:24px;

}



.benefit-card h3{

    margin:0 0 8px;

    font-size:16px;

    color:#222;

    font-weight:600;

}



.benefit-card p{

    margin:0;

    color:#777;

    font-size:14px;

}



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


@media(max-width:900px){


    .benefits-container{

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

    }


}



@media(max-width:600px){


    .benefits-container{

        grid-template-columns:1fr;

    }


}

/* =========================
   PROMO 
========================= */
.promo-section{
    display:flex;
    justify-content:center;
    padding:60px 20px;
    background: #f2f8d1;

}

.promo-card{
    width:90%;
    max-width:1100px;
    background:#ffdddd;
    border-radius:35px;

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

    padding-left: 40px;
    gap:50px;
}


/* Texto */
.promo-text{
    flex:1;
}

.promo-text h2{
    font-size:2.5rem;
    color:#333;
    margin-bottom:20px;
}

.promo-text p{
    font-size:1.1rem;
    line-height:1.6;
    color:#555;
    margin-bottom:30px;
}


/* Botón */
.promo-btn{
    display:inline-block;
    background:#b3b6e3;
    color:white;
    text-decoration:none;

    padding:14px 30px;
    border-radius:50px;

    transition:.3s;
}

.promo-btn:hover{
    transform:translateY(-3px);
}


/* Imagen */
.promo-image{
    flex:1;
    display:flex;
    justify-content:right;
}

.promo-image img{
    width:100%;
    border-radius:25px;
    object-fit:cover;
}


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

    .promo-card{
        flex-direction:column;
        text-align:center;
        padding: 0;
        padding-top: 3vh;
    }

    .promo-text h2{
        font-size:2rem;
    }

    .promo-image img{
        max-width:100%;
    }

}

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

.footer{

    background: var(--purple);

    margin-top: 120px;

    color: white;

}

.footer-content{

    max-width: 1200px;

    margin: auto;

    padding: 60px 30px 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 30px;

}

.footer-logo{

    width: 190px;

}

.footer-brand h2{

    font-size: 2rem;

    margin-bottom: 10px;

}

.footer-brand p{

    margin-top: 15px;

    font-size: 1.5rem;

    opacity: .9;

    padding: 14px;

}

.footer-social{

    display: flex;

    gap: 18px;

}

.footer-social a{

    width: 48px;

    height: 48px;

    border-radius: 50%;

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

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    color: white;

    font-size: 1.2rem;

    transition: .3s;

}

.footer-social a:hover{

    background: var(--softPink);

    color: #444;

    transform: translateY(-4px);

}

.footer-bottom{

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

    text-align: center;

    padding: 18px;

    font-size: .9rem;

    opacity: .8;

}

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

@media(max-width:768px){

.footer-content{

    flex-direction: column;

    text-align: center;

}

}