/* =========================================
CHICACHICO PASTEL EDITION
========================================= */

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

body{

    background:
    linear-gradient(
    180deg,
    #ffd6f5 0%,
    #ffc2ef 35%,
    #f8d4ff 70%,
    #ffe6fb 100%
    );

    font-family:Arial,sans-serif;

    color:white;

    overflow-x:hidden;

    min-height:100vh;
}

/* EFECTOS */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(
    circle at top,
    rgba(255,255,255,.45),
    transparent 35%
    ),

    radial-gradient(
    circle at right,
    rgba(255,105,180,.25),
    transparent 30%
    );

    z-index:-1;
}

/* TOP HEADER */

.top-header{

    width:100%;

    height:86px;

    background:
    linear-gradient(
    90deg,
    #ff9be8,
    #ff6fd8
    );

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 36px;

    position:sticky;

    top:0;

    z-index:9999;

    box-shadow:
    0 0 30px rgba(255,105,180,.35);
}

/* LOGO */

.logo-area{
    display:flex;
    align-items:center;
}

.logo-area img{
    height:58px;
    width:auto;
}

/* MENU */

.main-menu{
    flex:1;
    display:flex;
    justify-content:center;
    gap:42px;
    margin:0 40px;
}

.main-menu a{
    color:white;
    text-decoration:none;
    font-size:17px;
    font-weight:800;
}

/* BOTONES */

.promo-btn,
.login-btn{

    background:
    linear-gradient(
    90deg,
    #ff4fd8,
    #ff8be8
    );

    border:none;

    color:white;

    padding:12px 28px;

    border-radius:18px;

    font-weight:700;

    cursor:pointer;

    min-width:140px;

    height:54px;

    box-shadow:
    0 0 20px rgba(255,20,147,.35);
}

/* HEADER ABAJO */

header{

    display:flex;

    gap:12px;

    align-items:center;

    justify-content:space-between;

    padding:16px 22px;

    background:
    linear-gradient(
    90deg,
    #ffb3ec,
    #ff8be8
    );

    position:sticky;

    top:0;

    z-index:999;
}

/* TABS */

.tabs{
    display:flex;
    gap:10px;
}

.tab{

    background:
    linear-gradient(
    180deg,
    #ff9be8,
    #ff6fd8
    );

    color:white;

    padding:10px 18px;

    border-radius:18px;

    border:none;

    font-weight:700;

    cursor:pointer;

    box-shadow:
    0 0 14px rgba(255,20,147,.15);
}

.tab.active{

    background:
    linear-gradient(
    90deg,
    #ff4fd8,
    #ff8be8
    );
}

/* SEARCH */

.search{
    flex:1;
    max-width:380px;
}

.search input{

    width:100%;

    background:white;

    border:none;

    border-radius:18px;

    padding:14px 18px;

    color:#444;

    outline:none;
}

/* PROVIDERS */

.providers select{

    background:
    linear-gradient(
    180deg,
    #ff9be8,
    #ff6fd8
    );

    color:white;

    border:none;

    padding:14px 18px;

    border-radius:18px;

    outline:none;
}

/* GRID */

.grid{
    display:grid;
    gap:20px;
    padding:25px;
    grid-template-columns:
    repeat(auto-fill,minmax(220px,1fr));
}

/* CARDS */

.card{

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

    backdrop-filter:blur(12px);

    border-radius:24px;

    overflow:hidden;

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

    box-shadow:
    0 0 25px rgba(255,105,180,.15);

    transition:.25s;
}

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

.card img{
    width:100%;
    height:170px;
    object-fit:cover;
}

.card h4{

    padding:14px;

    font-size:16px;

    font-weight:800;

    color:#5a0d73;

    text-shadow:
    0 1px 2px rgba(255,255,255,.35);

    text-transform:capitalize;
}
.card span{

    color:#8b2bb5;

    font-weight:700;

    font-size:14px;
}

/* LOGIN */

.login-box{
    background:#ff9be8;
}

/* FOOTER */

footer{
    padding:30px;
    text-align:center;
    color:#fff;
    font-size:13px;
}

/* RESPONSIVE */

@media(max-width:768px){

    .top-header{
        height:auto;
        padding:14px;
        flex-direction:column;
        gap:14px;
    }

    .main-menu{
        flex-wrap:wrap;
        gap:16px;
        margin:0;
    }

    header{
        flex-direction:column;
    }

    .search{
        max-width:100%;
        width:100%;
    }

}
/* =========================================
FIX MOBILE HORIZONTAL SCROLL
========================================= */

html,
body{
    overflow-x:hidden !important;
    width:100%;
}

/* CONTENEDORES */

.top-header,
header,
.hero-slider,
.mainSlider,
.grid{
    max-width:100%;
    overflow-x:hidden;
}
/* FIX SWIPER */

.swiper{
    width:100%;
    overflow:hidden;
}

.swiper-wrapper{
    display:flex;
}

.swiper-slide{
    flex-shrink:0;
}
/* MENU MOBILE */

@media(max-width:768px){

    .top-header{

        flex-direction:column;

        height:auto;

        padding:14px;

        gap:14px;

        overflow:hidden;
    }

    .main-menu{

        width:100%;

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:16px;

        margin:0;
    }

    .main-menu a{

        font-size:14px;
    }

    header{

        flex-direction:column;

        gap:14px;
    }

    .search,
    .providers{

        width:100%;
    }

    .search input,
    .providers select{

        width:100%;
    }

    .swiper-slide img{

        width:100%;

        object-fit:cover;
    }

}
/* =========================================
LOGIN MODAL
========================================= */

.login-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.78);

    backdrop-filter:blur(8px);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:999999;
}

.login-modal.show{
    display:flex;
}

.login-box{

    width:900px;

    max-width:92%;

    min-height:430px;

    background:
    linear-gradient(
    180deg,
    #2a0038,
    #4c005f
    );

    border-radius:28px;

    display:grid;

    grid-template-columns:42% 58%;

    overflow:hidden;

    position:relative;

    box-shadow:
    0 0 40px rgba(255,20,147,.35);
}

.login-close{

    position:absolute;

    top:18px;

    right:22px;

    background:none;

    border:none;

    color:white;

    font-size:42px;

    cursor:pointer;

    z-index:5;
}

.login-image{

    background:
    radial-gradient(
    circle at center,
    rgba(255,20,147,.22),
    transparent 60%
    ),
    #210032;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;
}

.login-image img{

    width:100%;

    max-width:320px;

    object-fit:contain;
}

.login-form{

    padding:42px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.login-form h2{

    font-size:28px;

    margin-bottom:30px;
}

.login-form label{

    font-weight:700;

    margin-bottom:10px;
}

.login-form label span{
    color:#ff4fd8;
}

.login-form input{

    width:100%;

    background:#7a1899;

    border:none;

    outline:none;

    color:white;

    padding:16px 20px;

    border-radius:22px;

    margin-bottom:26px;

    font-size:15px;
}

.password-box{
    position:relative;
}

.password-box input{
    padding-right:55px;
}

.password-box span{

    position:absolute;

    right:20px;

    top:15px;

    font-size:20px;
}

.login-submit{

    background:
    linear-gradient(
    90deg,
    #ff4fd8,
    #c026d3
    );

    color:white;

    border:none;

    padding:16px;

    border-radius:22px;

    font-weight:800;

    cursor:pointer;
}

/* MOBILE */

@media(max-width:768px){

    .login-box{

        grid-template-columns:1fr;

        width:92%;
    }

    .login-image{
        padding:18px;
    }

    .login-image img{
        max-width:180px;
    }

    .login-form{
        padding:28px;
    }

}