*,
*::before,
*::after{

    box-sizing:border-box;

}

/*==================================================
RESPIRA SERVICES
==================================================*/

.respira-services-wrapper{
    display:flex;
    gap:30px;
    width:100%;
    align-items:flex-start;
}

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

.respira-sidebar{

    width:300px;

    min-width:300px;

    background:#fff;

    border:1px solid #e6edf5;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    /*
    ==================================================
    STICKY INTELIGENTE
    ==================================================
    */

    position:sticky;

    top:var(--respira-header-offset,20px);

    align-self:flex-start;

    max-height:calc(
        100vh - var(--respira-header-offset,20px) - 20px
    );

    overflow-y:auto;

}
/*
==================================================
SCROLL DEL SIDEBAR
==================================================
*/

.respira-sidebar::-webkit-scrollbar{

    width:8px;

}

.respira-sidebar::-webkit-scrollbar-thumb{

    background:#d7dee7;

    border-radius:30px;

}

.respira-sidebar::-webkit-scrollbar-thumb:hover{

    background:#bcc7d3;

}
.respira-category-list,
.respira-subcategories{
    list-style:none;
    margin:0;
    padding:0;
}

.respira-subcategories{
    display:none;
}

.respira-category-item{

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

    padding:15px 18px;

    border-bottom:1px solid #edf2f7;

    background:#fff;

    transition:background .25s;

}

.respira-category-item:hover{

    background:#f7fbfe;

}

.respira-category-item.active{

    background:#0b7dc2;

}

.respira-category-item.active .respira-category-name{

    color:#fff;

}

.respira-category-item.active .respira-category-count{

    background:#fff;

    color:#0b7dc2;

}

.respira-category-label{

    display:flex;

    align-items:center;

    flex:1;

    gap:10px;

    min-width:0;

}

.respira-arrow{

    width:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#6b7280;

    user-select:none;

    flex-shrink:0;

}

.respira-arrow i{

    font-size:13px;

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

}

.respira-arrow:hover i{

    color:#0b7dc2;

}

.respira-arrow:hover{

    color:#0b7dc2;

}

.respira-arrow-empty{

    width:18px;

    flex-shrink:0;

}

.respira-category-name{

    flex:1;

    cursor:pointer;

    user-select:none;

    color:#263646;

    font-size:14px;

    font-weight:600;

    transition:color .20s;

}

.respira-category-name:hover{

    color:#0b7dc2;

}

.respira-category-count{

    margin-left:10px;

    padding:4px 10px;

    background:#eef5fb;

    color:#0b7dc2;

    border-radius:30px;

    font-size:11px;

    font-weight:700;

    flex-shrink:0;

}

/*==================================================
JERARQUÍA
==================================================*/

.respira-category-item[data-level="1"]{

    padding-left:38px;

}

.respira-category-item[data-level="2"]{

    padding-left:58px;

}

.respira-category-item[data-level="3"]{

    padding-left:78px;

}

.respira-category-item[data-level="4"]{

    padding-left:98px;

}

.respira-category-item[data-level="5"]{

    padding-left:118px;

}

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

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

.respira-content{

    flex:1;

    min-width:0;

}

#respira-services-container{

    width:100%;

}

.respira-services-results{

    width:100%;

}

.respira-products-grid{

    display:grid;

    grid-template-columns:repeat(
    var(--respira-columns, 2),
    minmax(320px,1fr)
);

    gap:28px;

    align-items:stretch;

    width:100%;

}

.respira-pagination-wrapper{

    width:100%;

    margin-top:40px;

}

.respira-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:nowrap;

    gap:4px;

    width:100%;

}

/* Scroll para Chrome, Edge y Safari */


.respira-pagination-info{

    margin-top:16px;

    text-align:center;

    font-size:14px;

    color:#6b7280;

}

.respira-page-btn,
.respira-page-number{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:36px;

    width:36px;

    height:36px;

    padding:0;

    border:1px solid #dbe5ee;

    border-radius:8px;

    background:#ffffff;

    color:#15324d;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

}
.respira-page-btn i{

    font-size:12px;

}
.respira-page-btn:hover,
.respira-page-number:not(.active):hover{

    background:#0b7dc2;

    border-color:#0b7dc2;

    color:#ffffff;

    transform:translateY(-1px);

}

.respira-page-number.active{

    background:#0b7dc2;

    border-color:#0b7dc2;

    color:#ffffff;

    min-width:44px;

    font-weight:700;

    transform:scale(1.08);

    box-shadow:0 4px 12px rgba(11,125,194,.30);

    cursor:default;

    pointer-events:none;

}

.respira-page-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

}

/*==================================================
CARD
==================================================*/

.respira-card{

    display:flex;

    flex-direction:column;

    height:100%;

    background:#fff;

    border:1px solid #e6edf5;

    border-radius:14px;

    overflow:hidden;

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

    transition:.30s;

}

.respira-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.respira-card-image{

    height:230px;

    overflow:hidden;

    background:#f7f9fb;

}

.respira-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.respira-card:hover img{

    transform:scale(1.05);

}

.respira-card-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:22px;

}

.respira-card-title{

    margin-bottom:12px;

    color:#15324d;

    font-size:19px;

    font-weight:700;

    line-height:1.4;

}

.respira-card-sku{

    display:inline-flex;

    align-self:flex-start;

    margin-bottom:15px;

    padding:6px 12px;

    border-radius:30px;

    background:#eef7fd;

    color:#0b7dc2;

    font-size:12px;

    font-weight:700;

}

.respira-card-description{

    flex:1;

    margin-bottom:20px;

    color:#5c6975;

    line-height:1.7;

}

.respira-card-button{

    display:block;

    padding:14px;

    border-radius:8px;

    background:#0b7dc2;

    color:#fff;

    text-align:center;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.respira-card-button:hover{

    background:#095f93;

    color:#fff;

}

/*==================================================
LOADING
==================================================*/

.respira-loading{

    min-height:250px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

}
/*==================================================
PUNTOS SUSPENSIVOS
==================================================*/

.respira-page-dots{

    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:36px;

    color:#8b98a8;

    font-weight:700;

    user-select:none;

}
.respira-spinner{

    width:46px;

    height:46px;

    border:5px solid #e8eef3;

    border-top:5px solid #0b7dc2;

    border-radius:50%;

    animation:respiraSpin .9s linear infinite;

    margin-bottom:15px;

}

@keyframes respiraSpin{

    to{

        transform:rotate(360deg);

    }

}

.respira-empty{

    padding:60px;

    text-align:center;

    color:#666;

}
/*==================================================
RESPONSIVE PAGINACIÓN
==================================================*/

@media (max-width:768px){

    .respira-pagination{

        gap:3px;

    }

    .respira-page-btn,
    .respira-page-number{

        width:32px;

        min-width:32px;

        height:32px;

        font-size:12px;

    }

    .respira-page-dots{

        width:18px;

        font-size:12px;

    }

}

@media (max-width:480px){

    .respira-pagination{

        gap:2px;

    }

    .respira-page-btn,
    .respira-page-number{

        width:28px;

        min-width:28px;

        height:28px;

        font-size:11px;

    }

}
/*==================================================
DIVISOR DE IMAGEN
==================================================*/

.respira-card-image{

    position:relative;

    overflow:hidden;

}

/*
|--------------------------------------------------------------------------
| BASE
|--------------------------------------------------------------------------
*/

.respira-card-image::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:0;

    pointer-events:none;

    transition:.30s;

}

/*
|--------------------------------------------------------------------------
| INCLINADO
|--------------------------------------------------------------------------
*/

.respira-divider-diagonal .respira-card-image::after{

    height:var(--respira-divider-height,40px);

    background:var(--respira-divider-color,#ffffff);

    clip-path:polygon(
        0 100%,
        100% 25%,
        100% 100%
    );

}

/*
|--------------------------------------------------------------------------
| PICO
|--------------------------------------------------------------------------
*/

.respira-divider-peak .respira-card-image::after{

    height:var(--respira-divider-height,40px);

    background:var(--respira-divider-color,#ffffff);

    clip-path:polygon(
        0 100%,
        50% 0,
        100% 100%
    );

}

/*
|--------------------------------------------------------------------------
| ONDA
|--------------------------------------------------------------------------
*/

.respira-divider-wave .respira-card-image::after{

    height:var(--respira-divider-height,40px);

    background:var(--respira-divider-color,#ffffff);

    border-radius:100% 100% 0 0;

    transform:scaleX(1.35);

}
/*==================================================
CATEGORÍA DE LA TARJETA
==================================================*/

.respira-card-category,
.respira-card-category strong,
.respira-card-category a{

    color:inherit;

}

.respira-card-category a{

    text-decoration:none;

}

.respira-card-category a:hover{

    text-decoration:underline;

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

@media(max-width:992px){

    .respira-services-wrapper{

        flex-direction:column;

    }

    .respira-sidebar{

        width:100%;

        min-width:100%;

    }

.respira-products-grid{

    grid-template-columns:repeat(1,minmax(280px,1fr));

}

}