/* FILTROS */

.card-filtros{
    border:none;
    border-radius:28px;
    background:white;
}

.btn-filtro{
    border:1.5px solid var(--secundario);
    color:var(--principal);
    border-radius:50px;
    padding:10px 18px;
    font-size:13px;
    font-weight:600;
    background:white;
    transition:0.3s;
    text-decoration:none;
}

.btn-filtro:hover,
.btn-filtro.active{
    background:var(--secundario);
    color:white;
}

/* PRODUCTOS */

.card-producto{
    border:none;
    border-radius:22px;
        overflow:hidden;

    width:100%;
    max-width:none;
    margin:0 auto;

    transition:.3s;

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

.card-producto:hover{
    transform:translateY(-4px) scale(1.01);
}

.imagen-box{
    overflow:hidden;
    position:relative;
}

.imagen-producto{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:0.4s;
}

.card-producto:hover .imagen-producto{
    transform:scale(1.04);
}

.badge-stock{
    position:absolute;
    top:14px;
    right:14px;
    background:white;
    color:var(--secundario);
    font-size:12px;
    font-weight:700;
    padding:8px 14px;
    border-radius:50px;
    z-index:5;
}

.texto-agotado{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:var(--principal);
    color:white;
    padding:10px 18px;
    border-radius:14px;
    font-size:13px;
    font-weight:700;
    z-index:5;
}

.imagen-agotado{
    filter:grayscale(100%) brightness(55%);
}

.card-body{
    padding:16px;
}

.producto-titulo{
    font-size:16px;
    font-weight:700;
    color:var(--secundario);
}

.modelo{
    font-size:13px;
    color:var(--secundario);
}

.precio{
    color:var(--secundario);
    font-size:20px;
    font-weight:700;
}

/* TALLAS */

.talla-label{
    border-radius:12px !important;
    border:1.5px solid var(--secundario) !important;
    background:#fff;
    color:var(--secundario) !important;
    font-size:13px;
    font-weight:600;
    min-width:45px;
    transition:0.3s;
}

.talla-label.active{
    background:var(--principal) !important;
    border-color:var(--secundario) !important;
    color:white !important;
}

.talla-label input{
    display:none;
}

/* BOTONES */

.btn-rosa{
    background:var(--secundario);
    color:white;
    border-radius:16px;
    padding:12px 18px;
    font-size:14px;
    font-weight:600;
}

.btn-rosa:hover{
    background:var(--secundario);;
    color:white;
    border:var(--secundario);
}

.btn-outline-rosa{
    border:1.5px solid #d46a92;
    color:#d46a92;
    background:white;
    border-radius:16px;
    padding:11px 18px;
    font-size:14px;
    font-weight:600;
}

.btn-outline-rosa:hover{
    background:#d46a92;
    color:white;
}

/* MODAL */

.modal-content{
    border:none;
    border-radius:28px;
    overflow:hidden;
}

.modal-body{
    background:#fff5f8;
}

/* RESPONSIVE */

@media(max-width:768px){

    body{
        padding-top:85px;
    }

    .hero{
        text-align:center;
        padding:38px 22px;
    }

    .hero h1{
        font-size:28px;
    }

    .hero p{
        font-size:14px;
        margin:auto;
    }

    .logo-tienda{
        font-size:22px;
    }

}

.carrito-flotante{

    position:fixed;
    right:20px;
    bottom:100px;

    width:65px;
    height:65px;

    border-radius:50%;

    background:#d46a92;

    color:white;

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

    font-size:28px;

    text-decoration:none;

    z-index:9999;

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

}

.carrito-contador{

    position:absolute;

    top:-5px;
    right:-5px;

    background:#dc3545;

    color:white;

    width:26px;
    height:26px;

    border-radius:50%;

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

    font-size:12px;
    font-weight:bold;

}
.alert-reserva{

    background:var(--principal);

    border:1px solid var(--secundario);

    color:var(--secundario);

    padding:10px;

    border-radius:12px;

    font-size:13px;

    text-align:center;

    margin-bottom:15px;

}

.btn-detalle{

display:flex;
align-items:center;
justify-content:center;
gap:8px;

width:100%;

padding:12px 18px;

border-radius:14px;

background:var(--secundario);

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

color:var(--principal);

font-weight:700;

text-decoration:none;

transition:.30s;

}

.btn-detalle:hover{

background:linear-gradient(
135deg,
var(--principal),
var(--secundario)
);

color:#fff;

transform:translateY(-2px);

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

}

/*==================================================
=        NUEVO LAYOUT PRODUCTOS + FILTROS
==================================================*/

.productos-layout{

    display:grid;

    grid-template-columns:240px 1fr;

    gap:30px;

    align-items:start;

}


/*==================================================
=        SIDEBAR FILTROS
==================================================*/

.filtros-sidebar{

    position:sticky;

    top:100px;

    background:#fff;

    border-radius:24px;

    padding:22px;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    border:1px solid rgba(0,0,0,.05);

}

.filtros-titulo{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:18px;

    margin-bottom:20px;

    border-bottom:1px solid #eee;

}

.filtros-titulo h5{

    margin:0;

    font-size:18px;

    font-weight:800;

    color:var(--secundario);

}

.filtro-grupo{

    margin-bottom:25px;

}

.filtro-grupo:last-child{

    margin-bottom:0;

}

.filtro-grupo-titulo{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:13px;

    color:var(--secundario);

    font-size:14px;

    font-weight:800;

}

.filtro-grupo-titulo i{

    color:var(--principal);

}


/*==================================================
=        OPCIONES DE FILTRO
==================================================*/

.filtro-opciones{

    display:flex;

    flex-direction:column;

    gap:7px;

}

.filtro-opcion{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    padding:9px 11px;

    border-radius:12px;

    color:#555;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    transition:.25s ease;

}

.filtro-opcion:hover{

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

    color:var(--secundario);

    transform:translateX(3px);

}

.filtro-opcion.active{

    background:var(--secundario);

    color:#fff;

}

.filtro-opcion i{

    font-size:12px;

}


/*==================================================
=        TALLAS
==================================================*/

.tallas-filtros{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

}

.talla-filtro{

    min-width:42px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 10px;

    border-radius:11px;

    border:1px solid #ddd;

    background:#fff;

    color:var(--secundario);

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    transition:.25s ease;

}

.talla-filtro:hover{

    border-color:var(--secundario);

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

}

.talla-filtro.active{

    background:var(--secundario);

    border-color:var(--secundario);

    color:#fff;

}


/*==================================================
=        LIMPIAR FILTROS
==================================================*/

.btn-limpiar-filtros{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    width:100%;

    padding:11px;

    border-radius:13px;

    background:#f7f7f7;

    color:#666;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    transition:.25s ease;

}

.btn-limpiar-filtros:hover{

    background:#eee;

    color:#333;

}


/*==================================================
=        INFORMACIÓN
==================================================*/

.filtro-info{

    margin-top:18px;

    padding:12px;

    border-radius:14px;

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

    color:#777;

    font-size:11px;

    line-height:1.6;

    text-align:center;

}


/*==================================================
=        BOTÓN FILTROS MOBILE
==================================================*/

.filtros-mobile-bar{

    display:none;

}


/*==================================================
=        OVERLAY MOBILE
==================================================*/

.filtros-overlay{

    display:none;

}


/*==================================================
=        CONTENIDO PRODUCTOS
==================================================*/

.productos-contenido{

    min-width:0;

}

.productos-topbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:22px;

}

.productos-resultados{

    color:#777;

    font-size:14px;

}

.productos-resultados strong{

    color:var(--secundario);

}


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



/*==================================================
=        BUSCADOR MODELOS MOBILE
==================================================*/

.filtro-modelos-buscador{

    display:flex;

    align-items:center;

    gap:9px;

    padding:11px 13px;

    margin-bottom:10px;

    border:1px solid #e5e5e5;

    border-radius:14px;

    background:#fafafa;

}

.filtro-modelos-buscador i{

    color:#999;

}

.filtro-modelos-buscador input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:14px;

}


/*==================================================
=        LISTA DE MODELOS
==================================================*/

.filtro-sheet-modelos{

    display:flex;

    flex-direction:column;

    gap:4px;

    max-height:230px;

    overflow-y:auto;

    padding-right:3px;

}


/* Scroll bonito */

.filtro-sheet-modelos::-webkit-scrollbar{

    width:5px;

}

.filtro-sheet-modelos::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:20px;

}


/*==================================================
=        SIN RESULTADOS
==================================================*/

.sin-modelos-mobile{

    display:none;

    text-align:center;

    padding:20px 10px;

    color:#888;

    font-size:13px;

}


/*==================================================
=        SIN PRODUCTOS / ESTADO VACÍO
==================================================*/

.sin-productos{

    width:100%;

    min-height:430px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:50px 30px;

    background:#fff;

    border-radius:28px;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

}


.sin-productos-icono{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    background:rgba(218,166,166,.16);

    color:var(--secundario);

    font-size:34px;

}


.sin-productos h3{

    margin:0 0 12px;

    color:var(--secundario);

    font-size:24px;

    font-weight:800;

}


.sin-productos p{

    max-width:550px;

    margin:0 0 25px;

    color:#777;

    font-size:15px;

    line-height:1.7;

}


.sin-productos p strong{

    color:var(--secundario);

}


.btn-sin-productos{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 24px;

    border-radius:15px;

    background:var(--secundario);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}


.btn-sin-productos:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.12);

}


@media(max-width:768px){

    .sin-productos{

        min-height:380px;

        padding:40px 20px;

        border-radius:22px;

    }

    .sin-productos h3{

        font-size:21px;

    }

    .sin-productos p{

        font-size:14px;

    }

}

/*==================================================
    ACCIONES FILTROS MOBILE
==================================================*/

.filtros-acciones-mobile{

    display:flex;

    gap:10px;

    width:100%;

    margin-top:15px;

}


/* BOTÓN APLICAR */

.filtros-acciones-mobile
.btn-aplicar-filtros{

    flex:1;

    text-align:center;

    margin:0;

}


/* BOTÓN LIMPIAR */

.filtros-acciones-mobile
.btn-limpiar-filtros-mobile{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:12px 15px;

    border-radius:12px;

    background:#f5f5f5;

    color:#666;

    font-weight:600;

    transition:.2s ease;

}


/* PRESIÓN */

.filtros-acciones-mobile
a:active{

    transform:scale(.97);

}

/*==================================================
    FILTROS MOBILE - BLOQUE FINAL
==================================================*/

@media(max-width:768px){

    /*========================================
        LAYOUT PRODUCTOS
    ========================================*/

    .productos-layout{

        display:block;

        padding-top:75px;

    }


    /*========================================
        SIDEBAR DESKTOP OCULTO
    ========================================*/

    .filtros-sidebar{

        display:none !important;

    }


    /*========================================
        BARRA FILTROS FIJA
    ========================================*/

    .filtros-mobile-bar{

        position:fixed;

        top:85px;

        left:0;

        right:0;

        width:100%;

        z-index:9990;

        display:flex !important;

        align-items:center;

        justify-content:space-between;

        gap:10px;

        margin:0;

        padding:10px 15px;

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

        backdrop-filter:blur(12px);

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

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

    }


    /*========================================
        BOTÓN FILTROS
    ========================================*/

    .btn-filtros-mobile{

        flex:1;

        min-width:0;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:8px;

        padding:13px 16px;

        border:none;

        border-radius:15px;

        background:#fff;

        color:var(--secundario);

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

        font-size:14px;

        font-weight:800;

        cursor:pointer;

    }


    .btn-filtros-mobile i{

        font-size:17px;

    }


    /*========================================
        BOTÓN TODAS
    ========================================*/

    .btn-todas-mobile{

        width:48px;

        height:48px;

        flex-shrink:0;

        display:flex;

        align-items:center;

        justify-content:center;

        border-radius:15px;

        background:var(--secundario);

        color:#fff;

        text-decoration:none;

    }


    /*========================================
        OVERLAY
    ========================================*/

    .filtros-overlay{

        display:block !important;

        position:fixed;

        inset:0;

        width:100vw;

        height:100dvh;

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

        z-index:999999;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
            opacity .30s ease,
            visibility .30s ease;

    }


    .filtros-overlay.active{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

    }


    /*========================================
        BOTTOM SHEET
    ========================================*/

    .filtros-sheet{

        position:absolute;

        left:0;

        right:0;

        bottom:0;

        width:100%;

        height:88dvh;

        max-height:88dvh;

        min-height:0;

        display:flex;

        flex-direction:column;

        background:#fff;

        border-radius:28px 28px 0 0;

        overflow:hidden;

        box-shadow:
            0 -10px 40px rgba(0,0,0,.20);

        transform:translateY(100%);

        transition:
            transform .38s cubic-bezier(.22,.61,.36,1);

    }


    .filtros-overlay.active .filtros-sheet{

        transform:translateY(0);

    }


    /*========================================
        HANDLE
    ========================================*/

    .filtros-handle{

        flex-shrink:0;

        width:45px;

        height:5px;

        border-radius:50px;

        background:#d9d9d9;

        margin:5px auto 18px;

    }


    /*========================================
        HEADER FIJO DEL SHEET
    ========================================*/

    .filtros-sheet-header{

        flex-shrink:0;

        display:flex;

        align-items:center;

        justify-content:space-between;

        margin:0;

        padding:10px 20px 15px;

        background:#fff;

        z-index:20;

    }


    .filtros-sheet-header h4{

        margin:0;

        font-size:21px;

        font-weight:800;

        color:var(--secundario);

    }


    /*========================================
        BOTÓN CERRAR
    ========================================*/

    .btn-cerrar-filtros{

        width:40px;

        height:40px;

        border:none;

        border-radius:50%;

        background:#f3f3f3;

        color:#444;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:16px;

        cursor:pointer;

    }


    /*========================================
        CONTENIDO SCROLL
    ========================================*/

    .filtros-sheet-contenido{

        flex:1;

        min-height:0;

        overflow-y:auto;

        overflow-x:hidden;

        padding:0 20px 20px;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }


    .filtros-sheet-contenido::-webkit-scrollbar{

        display:none;

    }


    /*========================================
        GRUPOS
    ========================================*/

    .filtro-sheet-grupo{

        margin-bottom:25px;

    }


    .filtro-sheet-grupo h6{

        margin-bottom:12px;

        font-size:15px;

        font-weight:800;

        color:var(--secundario);

    }


    /*========================================
        MODELOS
    ========================================*/

    .filtro-sheet-modelos{

        display:flex;

        flex-direction:column;

        gap:4px;

        max-height:230px;

        overflow-y:auto;

        padding-right:3px;

    }


    .filtro-sheet-modelo{

        display:flex;

        align-items:center;

        justify-content:space-between;

        padding:12px 13px;

        border-radius:12px;

        text-decoration:none;

        color:#555;

        font-size:14px;

        font-weight:600;

        transition:.2s;

    }


    .filtro-sheet-modelo.active{

        background:var(--secundario);

        color:#fff;

    }


    /*========================================
        TALLAS
    ========================================*/

    .filtro-sheet-tallas{

        display:flex;

        flex-wrap:wrap;

        gap:8px;

    }


    .filtro-sheet-talla{

        display:flex;

        align-items:center;

        justify-content:center;

        min-width:48px;

        padding:10px 15px;

        border:1px solid #ddd;

        border-radius:12px;

        background:#fff;

        color:var(--secundario);

        text-decoration:none;

        font-size:13px;

        font-weight:700;

    }


    .filtro-sheet-talla.active{

        background:var(--secundario);

        border-color:var(--secundario);

        color:#fff;

    }


    /*========================================
        BOTONES INFERIORES
    ========================================*/

    .filtros-acciones-mobile{

        flex-shrink:0;

        display:flex;

        gap:10px;

        width:100%;

        padding:12px 20px;

        padding-bottom:
            calc(
                12px + env(safe-area-inset-bottom)
            );

        background:#fff;

        border-top:1px solid #eee;

        z-index:30;

    }


    .filtros-acciones-mobile
    .btn-aplicar-filtros{

        flex:1;

        min-width:0;

        min-height:48px;

        margin:0;

        display:flex;

        align-items:center;

        justify-content:center;

        white-space:nowrap;

        text-align:center;

    }


    .filtros-acciones-mobile
    .btn-limpiar-filtros-mobile{

        flex:1;

        min-width:0;

        min-height:48px;

        display:flex;

        align-items:center;

        justify-content:center;

        padding:12px 10px;

        border-radius:12px;

        background:#f5f5f5;

        color:#666;

        font-weight:700;

        white-space:nowrap;

        text-align:center;

        text-decoration:none;

    }


    /*========================================
        BLOQUEAR SCROLL DE LA PÁGINA
    ========================================*/

    body.filtros-abiertos{

        overflow:hidden !important;

    }

}


/*==================================================
    DESKTOP
==================================================*/

@media(min-width:769px){

    .filtros-overlay{

        display:none !important;

    }

}


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

@media(min-width:769px) and (max-width:991px){

    .productos-layout{

        grid-template-columns:210px 1fr;

        gap:20px;

    }

}

/*==================================================
    BOTÓN APLICAR FILTROS
==================================================*/

.filtros-acciones-mobile .btn-aplicar-filtros{

    flex:1;

    min-width:0;
    min-height:50px;

    display:flex;

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

    gap:8px;

    padding:13px 16px;

    margin:0;

    border:none;

    border-radius:15px;

    background:var(--secundario);

    color:#fff;

    font-size:14px;

    font-weight:800;

    text-decoration:none;

    text-align:center;

    white-space:nowrap;

    cursor:pointer;

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        opacity .20s ease;

}


/* HOVER */

.filtros-acciones-mobile .btn-aplicar-filtros:hover{

    color:#fff;

    opacity:.92;

    transform:translateY(-1px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.12);

}


/* PRESIONAR */

.filtros-acciones-mobile .btn-aplicar-filtros:active{

    transform:scale(.97);

}


/*==================================================
    BOTÓN LIMPIAR FILTROS
==================================================*/

.filtros-acciones-mobile .btn-limpiar-filtros-mobile{

    flex:1;

    min-width:0;

    min-height:50px;

    display:flex;

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

    gap:8px;

    padding:13px 16px;

    margin:0;

    border:none;

    border-radius:15px;

    background:#f5f5f5;

    color:#666;

    font-size:14px;

    font-weight:800;

    text-decoration:none;

    text-align:center;

    white-space:nowrap;

    cursor:pointer;

    transition:
        transform .20s ease,
        background .20s ease,
        color .20s ease;

}


/* HOVER */

.filtros-acciones-mobile
.btn-limpiar-filtros-mobile:hover{

    background:#eaeaea;

    color:#444;

}


/* PRESIONAR */

.filtros-acciones-mobile
.btn-limpiar-filtros-mobile:active{

    transform:scale(.97);

}

/*==================================================
    BUSCADOR COLECCIONES DESKTOP
==================================================*/

.filtro-modelos-buscador{

    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 12px;

    margin-bottom:10px;

    border:1px solid #e5e5e5;

    border-radius:14px;

    background:#fafafa;

    transition:.25s ease;

}

.filtro-modelos-buscador:focus-within{

    border-color:var(--principal);

    background:#fff;

    box-shadow:0 0 0 3px rgba(0,0,0,.03);

}

.filtro-modelos-buscador i{

    color:#999;

    flex-shrink:0;

}

.filtro-modelos-buscador input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:13px;

    color:#444;

}

.filtro-modelos-buscador input::placeholder{

    color:#999;

}


/*==================================================
    LISTA DE COLECCIONES DESKTOP
==================================================*/

.filtro-opciones-modelos{

    max-height:260px;

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:5px;

}


/* SCROLL */

.filtro-opciones-modelos::-webkit-scrollbar{

    width:5px;

}

.filtro-opciones-modelos::-webkit-scrollbar-track{

    background:transparent;

}

.filtro-opciones-modelos::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:20px;

}

.filtro-opciones-modelos::-webkit-scrollbar-thumb:hover{

    background:#ccc;

}


/* FIREFOX */

.filtro-opciones-modelos{

    scrollbar-width:thin;

    scrollbar-color:#ddd transparent;

}


/*==================================================
    SIN RESULTADOS
==================================================*/

.sin-modelos-desktop{

    display:none;

    text-align:center;

    padding:18px 8px;

    color:#888;

    font-size:12px;

}

.sin-modelos-desktop i{

    display:block;

    margin-bottom:5px;

    font-size:18px;

    color:#aaa;

}
/*==================================================
=        DESCRIPCIÓN DE COLECCIÓN
==================================================*/

.descripcion-coleccion{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:20px 22px;

    background:#fff;

    border-radius:20px;

    border:1px solid rgba(0,0,0,.05);

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

}


.descripcion-coleccion h3{

    margin:0 0 5px;

    font-size:18px;

    font-weight:800;

    color:var(--secundario);

}


.descripcion-coleccion p{

    margin:0;

    color:#777;

    font-size:14px;

    line-height:1.6;

}


@media(max-width:768px){

    .descripcion-coleccion{

        padding:16px;

        gap:12px;

        border-radius:18px;

    }


    .descripcion-coleccion h3{

        font-size:16px;

    }


    .descripcion-coleccion p{

        font-size:13px;

    }

}