/*==================================================

    HEADER DULKO v2.0

==================================================*/



.dulko-header {

    position: sticky;

    top: 0;

    left:0;

    right:0;

    right:0;

    z-index: 1000;

    background: #FFF;

    padding: 14px 25px;

    box-shadow: 0 1px 4px rgba(0,0,0,.05);

    transition: background .25s, box-shadow .25s, backdrop-filter .25s;

}



    /*==================================================

    SCROLL

==================================================*/



    .dulko-header.scrolled {

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

        backdrop-filter: blur(10px);

        -webkit-backdrop-filter: blur(10px);

        box-shadow: 0 6px 18px rgba(0,0,0,.08);

    }



/*==================================================

    FILA PRINCIPAL

==================================================*/



.dulko-header-top {

    display: flex;

    align-items: center;

    gap: 20px;

}



/*==================================================

    BOTON MENU

==================================================*/



.btn-menu {

    width: 46px;

    height: 46px;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: var(--color-principal);

    font-size: 24px;

    cursor: pointer;

    transition: .25s;

}



    .btn-menu:hover {

        background: #F3F5F8;

    }



/*==================================================

    LOGO

==================================================*/



.dulko-logo {

    display: flex;

    align-items: center;

}



.logo {

    height: 54px;

    transition: .25s;

}



    .logo:hover {

        transform: scale(1.03);

    }



/*==================================================

    BUSCADOR

==================================================*/



.dulko-search {

    position: relative;

    flex: 1;

}



.txtBuscar {

    width: 100%;

    height: 50px;

    border-radius: 40px;

    border: 1px solid var(--color-borde);

    background: #FAFBFC;

    padding: 0 60px 0 22px;

    outline: none;

    font-size: 15px;

    transition: .25s;

}



    .txtBuscar:focus {

        background: #FFF;

        border-color: var(--color-secundario);

        box-shadow: 0 0 0 4px rgba(93,173,226,.15);

    }



.btnBuscar {

    position: absolute;

    right: 8px;

    top: 50%;

    transform: translateY(-50%);

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: var(--color-principal);

    cursor: pointer;

    transition: .20s;

}



    .btnBuscar:hover {

        background: #ECECEC;

    }



/*==================================================

    ICONOS

==================================================*/



.dulko-header-icons {

    display: flex;

    align-items: center;

    gap: 18px;

}



    .dulko-header-icons a {

        color: var(--color-principal);

        font-size: 23px;

        text-decoration: none;

        transition: .20s;

    }



        .dulko-header-icons a:hover {

            color: var(--color-secundario);

            transform: translateY(-2px);

        }



/*==================================================

    TABLET

==================================================*/



@media(max-width:992px) {



    .logo {

        height: 46px;

    }

}



/*==================================================

    CELULAR

==================================================*/



@media(max-width:768px) {



    .dulko-header {

        padding: 12px 15px;

    }



    .dulko-header-top {

        flex-wrap: wrap;

        gap: 12px;

    }



    .dulko-search {

        order: 99;

        width: 100%;

        flex-basis: 100%;

    }



    .logo {

        height: 42px;

    }



    .dulko-header-icons {

        margin-left: auto;

        gap: 14px;

    }



        .dulko-header-icons a {

            font-size: 20px;

        }



    .txtBuscar {

        height: 46px;

    }

}



@media(max-width:992px) {



    .dulko-header-icons {

        display: none;

    }

}



/*==================================================

    CELULAR

==================================================*/



@media (max-width:768px) {



    /* Header más compacto */

    .dulko-header {

        padding: 12px 15px;

    }



    /* Oculta el botón hamburguesa */

    .btn-menu {

        display: none;

    }



    /* Oculta los iconos superiores */

    .dulko-header-icons {

        display: none;

    }



    /* Todo queda en una sola fila */

    .dulko-header-top {

        display: flex;

        align-items: center;

        gap: 12px;

    }



    /* El logo queda a la izquierda */

    .dulko-logo {

        flex: 0 0 auto;

    }



    .logo {

        height: 42px;

    }



    /* El buscador sube al lado del logo */

    .dulko-search {

        flex: 1;

        order: 0;

        width: auto;

        flex-basis: auto;

    }



    .txtBuscar {

        height: 44px;

        font-size: 14px;

    }

}



.header-cart {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.cart-badge {

    position: absolute;

    top: -7px;

    right: -10px;

    min-width: 18px;

    height: 18px;

    padding: 0 5px;

    border-radius: 50px;

    background: #7B2CBF;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .25s;

}



/*==========================================

    BUSCADOR

    BOTÓN LIMPIAR

==========================================*/



.dulko-search {

    position: relative;

}





    /* Dejar espacio para X + lupa */

    .dulko-search .txtBuscar {

        padding-right: 90px;

    }





/*==========================================

    BOTÓN LIMPIAR BÚSQUEDA

==========================================*/



.dulko-search {

    position: relative;

}



    .dulko-search .txtBuscar {

        padding-right: 145px;

    }



    .dulko-search .btnLimpiarBusqueda {

        position: absolute;

        right: 55px;

        top: 50%;

        transform: translateY(-50%);

        padding: 4px 12px;

        border: none;

        border-radius: 8px;

        background: transparent;

        font-size: 13px;

        font-weight: 600;

        color: #777;

        cursor: pointer;

        z-index: 10;

    }



        .dulko-search .btnLimpiarBusqueda:hover {

            background: #f3eef8;

            color: var(--color-principal);

        }





        /*==========================================

    HOVER

==========================================*/



        .dulko-search .btnLimpiarBusqueda:hover {

            color: var(--color-principal);

        }





        /*==========================================

    ICONO

==========================================*/



        .dulko-search .btnLimpiarBusqueda i {

            pointer-events: none;

        }