:root{
    --catalog-yellow:#fecf0c;
    --catalog-black:#000000;
    --catalog-white:#ffffff;

    --catalog-text:#111111;
    --catalog-muted:#6b7280;

    --catalog-border:#ececec;
    --catalog-bg:#ffffff;
    --catalog-soft:#f8f8f8;

    --catalog-radius-xl:28px;
    --catalog-radius-lg:22px;
    --catalog-radius-md:16px;
    --catalog-radius-sm:12px;

    --catalog-shadow:
        0 20px 60px rgba(0,0,0,.08);

    --catalog-transition:
        .28s cubic-bezier(.4,0,.2,1);
}

/* =========================================================
PAGE
========================================================= */

.catalogo-page{
    background:var(--catalog-white);
    color:var(--catalog-text);
    overflow:hidden;
}

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

.catalogo-overlay{
    position:fixed;
    inset:0;

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

    backdrop-filter:blur(4px);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:
        opacity var(--catalog-transition),
        visibility var(--catalog-transition);

    z-index:110;
}

.catalogo-overlay.is-active{
    opacity:1;
    visibility:visible;

    pointer-events:auto;
}

/*
=========================================================
BODY LOCK
=========================================================
*/

body.catalogo-filtros-open{
    overflow:hidden;
}

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

.catalogo-hero{
    position:relative;
    padding:92px 24px 42px;
}

.catalogo-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
            rgba(254,207,12,.12),
            transparent 40%);
    pointer-events:none;
}

.catalogo-hero__content{
    position:relative;
    max-width:1240px;
    margin:0 auto;
    text-align:center;
}

.catalogo-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 16px;

    border-radius:999px;

    background:
        rgba(254,207,12,.16);

    color:var(--catalog-black);

    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;

    margin-bottom:18px;
}

.catalogo-hero h1{
    margin:0;

    font-size:
        clamp(42px,6vw,72px);

    line-height:.92;
    letter-spacing:-.06em;

    font-weight:1000;

    color:var(--catalog-black);
}

.catalogo-hero p{
    max-width:760px;

    margin:22px auto 0;

    color:var(--catalog-muted);

    font-size:18px;
    line-height:1.7;
}

/* =========================================================
SEARCHBAR
========================================================= */

.catalogo-searchbar{
    padding:0 24px 24px;
}

.catalogo-searchbar__form{
    max-width:1240px;
    margin:0 auto;

    display:flex;
    gap:14px;
}

.catalogo-searchbar__input{
    position:relative;
    flex:1;
}

.catalogo-searchbar__input svg{
    position:absolute;
    top:50%;
    left:18px;
    transform:translateY(-50%);
    color:#999;
    pointer-events:none;
}

.catalogo-searchbar__input input{
    width:100%;
    height:62px;

    border:1px solid var(--catalog-border);
    border-radius:20px;

    padding:0 22px 0 56px;

    background:var(--catalog-white);

    font-size:15px;
    font-weight:600;

    outline:none;

    transition:
        border var(--catalog-transition),
        box-shadow var(--catalog-transition),
        transform var(--catalog-transition);

    box-sizing:border-box;
}

.catalogo-searchbar__input input:focus{
    border-color:var(--catalog-yellow);

    box-shadow:
        0 0 0 5px rgba(254,207,12,.20);
}

.catalogo-searchbar__btn{
    height:62px;

    border:none;
    border-radius:20px;

    padding:0 28px;

    background:var(--catalog-black);
    color:var(--catalog-white);

    font-size:14px;
    font-weight:900;

    cursor:pointer;

    transition:
        transform var(--catalog-transition),
        background var(--catalog-transition),
        color var(--catalog-transition);
}

.catalogo-searchbar__btn:hover{
    background:var(--catalog-yellow);
    color:var(--catalog-black);

    transform:translateY(-2px);
}

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

.catalogo-shell{
    max-width:1360px;

    margin:0 auto;

    padding:20px 24px 90px;

    display:grid;
    grid-template-columns:320px 1fr;
    gap:34px;
}

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

.catalogo-filtros{
    position:sticky;
    top:100px;

    align-self:start;

    padding:24px;

    background:var(--catalog-white);

    border:1px solid var(--catalog-border);
    border-radius:28px;

    box-shadow:var(--catalog-shadow);

    z-index:20;
}

.filtros-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:16px;

    margin-bottom:24px;
}

.filtros-header__top{
    display:flex;
    align-items:center;
    gap:14px;
}

.filtros-header h2{
    margin:0;

    font-size:22px;
    font-weight:1000;
}

.filtros-header > button{
    border:none;
    background:none;

    color:var(--catalog-black);

    font-size:13px;
    font-weight:900;

    cursor:pointer;

    text-decoration:underline;
    text-decoration-color:var(--catalog-yellow);

    text-underline-offset:4px;
}

.filtros-close{
    display:none;

    flex-shrink:0;

    width:42px;
    height:42px;

    padding:0;

    border:none;
    border-radius:14px;

    background:#f3f4f6 !important;

    color:#111111 !important;

    font-size:28px;
    font-weight:900;
    line-height:1;

    text-decoration:none !important;

    cursor:pointer;

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

    transition:
        background var(--catalog-transition),
        transform var(--catalog-transition),
        color var(--catalog-transition);
}

.filtros-close:hover{
    background:var(--catalog-yellow);

    transform:rotate(90deg);
}

.filtros-close:active{
    transform:scale(.94);
}

/* =========================================================
FILTER GROUP
========================================================= */

.filtro-grupo{
    margin-bottom:24px;
}

.filtro-grupo label{
    display:block;

    margin-bottom:10px;

    font-size:13px;
    font-weight:900;

    color:var(--catalog-black);
}

.filtro-grupo select,
.filtro-grupo input{
    width:100%;
    height:48px;

    border:1px solid var(--catalog-border);
    border-radius:16px;

    padding:0 14px;

    background:var(--catalog-white);

    font-size:14px;
    font-weight:600;

    color:var(--catalog-black);

    outline:none;

    box-sizing:border-box;

    transition:
        border var(--catalog-transition),
        box-shadow var(--catalog-transition);
}

.filtro-grupo select:focus,
.filtro-grupo input:focus{
    border-color:var(--catalog-yellow);

    box-shadow:
        0 0 0 4px rgba(254,207,12,.18);
}

/* =========================================================
PRECIO
========================================================= */

.precio-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

/* =========================================================
ATRIBUTOS
========================================================= */

.filtros-atributos{
    margin-top:10px;
}

.filtro-acordeon{
    border-top:1px solid var(--catalog-border);
    padding:14px 0;
}

.filtro-acordeon:last-child{
    border-bottom:1px solid var(--catalog-border);
}

.filtro-acordeon summary{
    cursor:pointer;

    list-style:none;

    font-size:14px;
    font-weight:900;
}

.filtro-acordeon summary::-webkit-details-marker{
    display:none;
}

.filtro-acordeon summary::after{
    content:"+";
    float:right;
}

.filtro-acordeon[open] summary::after{
    content:"−";
}

.atributos-lista{
    display:grid;
    gap:12px;

    margin-top:16px;
}

.check-option{
    display:flex !important;
    align-items:center;

    gap:10px;

    margin:0 !important;

    font-size:14px !important;
    font-weight:600 !important;

    color:#333 !important;

    cursor:pointer;
}

.check-option input{
    width:18px !important;
    height:18px !important;

    accent-color:var(--catalog-yellow);
}

/* =========================================================
ACTIONS
========================================================= */

.filtros-actions{
    display:grid;
    gap:10px;

    margin-top:26px;
}

.btn-filtrar,
.btn-limpiar{
    height:50px;

    border-radius:16px;

    font-size:14px;
    font-weight:900;

    cursor:pointer;

    transition:
        transform var(--catalog-transition),
        box-shadow var(--catalog-transition),
        background var(--catalog-transition);
}

.btn-filtrar{
    border:none;

    background:var(--catalog-yellow);
    color:var(--catalog-black);
}

.btn-limpiar{
    border:1px solid var(--catalog-black);

    background:var(--catalog-white);
    color:var(--catalog-black);
}

.btn-filtrar:hover,
.btn-limpiar:hover{
    transform:translateY(-2px);

    box-shadow:
        0 16px 35px rgba(0,0,0,.12);
}

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

.catalogo-resultados{
    min-width:0;
}

.resultados-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;

    min-height:64px;

    margin-bottom:22px;
}

.toolbar-left{
    display:flex;
    align-items:center;
    gap:14px;
}

#catalogoResumen{
    color:var(--catalog-muted);

    font-size:14px;
    font-weight:800;
}

.toolbar-right select{
    height:46px;

    border:1px solid var(--catalog-border);
    border-radius:14px;

    padding:0 14px;

    background:var(--catalog-white);

    font-size:14px;
    font-weight:700;

    outline:none;
}

/* =========================================================
MOBILE FILTER BTN
========================================================= */

.btn-filtros-mobile{
    display:none;

    height:44px;

    border:none;
    border-radius:14px;

    padding:0 18px;

    background:var(--catalog-black);
    color:var(--catalog-white);

    font-size:13px;
    font-weight:900;

    cursor:pointer;
}

/* =========================================================
GRID
========================================================= */

.productos-grid{
    display:grid;

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

    gap:24px;
}

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

.producto-card{
    position:relative;

    overflow:hidden;

    background:var(--catalog-white);

    border:1px solid var(--catalog-border);
    border-radius:28px;

    transition:
        transform var(--catalog-transition),
        border var(--catalog-transition),
        box-shadow var(--catalog-transition);
}

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

    border-color:
        rgba(254,207,12,.9);

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

.producto-card--agotado{
    opacity:.78;
}

/* =========================================================
IMAGE
========================================================= */

.producto-card__image-link{
    position:relative;
    display:block;

    overflow:hidden;
}

.producto-card__image-wrapper{
    position:relative;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:#f6f6f6;
}

.producto-card__image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        opacity .45s ease,
        transform .7s ease;
}

.producto-card__image--hover{
    opacity:0;
}

.producto-card:hover
.producto-card__image--primary{
    opacity:0;
    transform:scale(1.08);
}

.producto-card:hover
.producto-card__image--hover{
    opacity:1;
    transform:scale(1.05);
}

/* =========================================================
BADGES
========================================================= */

.producto-badge{
    position:absolute;
    top:16px;
    left:16px;

    z-index:4;

    padding:8px 12px;

    border-radius:999px;

    font-size:11px;
    font-weight:1000;
    letter-spacing:.08em;

    text-transform:uppercase;

    backdrop-filter:blur(12px);
}

.producto-badge--offer{
    background:var(--catalog-yellow);
    color:var(--catalog-black);
}

.producto-badge--preorder{
    background:#111111;
    color:#ffffff;
}

.producto-badge--soldout{
    background:#d90429;
    color:#ffffff;
}

/* =========================================================
CONTENT
========================================================= */

.producto-card__content{
    padding:20px;
}

.producto-card__brand{
    display:block;

    margin-bottom:8px;

    color:#888;

    font-size:11px;
    font-weight:1000;

    text-transform:uppercase;
    letter-spacing:.08em;
}

.producto-card__title{
    margin:0 0 14px;

    min-height:48px;

    font-size:16px;
    line-height:1.35;
    font-weight:900;
}

.producto-card__title a{
    color:var(--catalog-black);
    text-decoration:none;
}

/* =========================================================
PRECIO
========================================================= */

.producto-precio{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;
}

.precio-actual{
    font-size:20px;
    font-weight:1000;

    color:var(--catalog-black);
}

.precio-anterior{
    color:#999;

    font-size:14px;
    font-weight:800;

    text-decoration:line-through;
}

.producto-precio--hidden{
    margin-bottom:18px;
}

.producto-precio--hidden span{
    display:inline-flex;

    padding:8px 12px;

    border-radius:999px;

    background:#f5f5f5;

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

    color:#666;
}

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

.producto-btn{
    width:100%;
    height:50px;

    border:none;
    border-radius:16px;

    background:var(--catalog-black);
    color:var(--catalog-white);

    font-size:14px;
    font-weight:900;

    cursor:pointer;

    transition:
        transform var(--catalog-transition),
        background var(--catalog-transition),
        color var(--catalog-transition),
        opacity var(--catalog-transition);
}

.producto-btn:hover{
    background:var(--catalog-yellow);
    color:var(--catalog-black);

    transform:translateY(-2px);
}

.producto-btn--preorder{
    background:var(--catalog-yellow);
    color:var(--catalog-black);
}

.producto-btn--disabled{
    background:#d9d9d9 !important;
    color:#666 !important;

    cursor:not-allowed;

    transform:none !important;
}

/* =========================================================
EMPTY
========================================================= */

.catalogo-empty{
    margin:50px 0;

    padding:70px 24px;

    border:1px dashed #dddddd;
    border-radius:28px;

    background:#fafafa;

    text-align:center;
}

.catalogo-empty__icon{
    margin-bottom:18px;
    color:#999;
}

.catalogo-empty h3{
    margin:0 0 10px;

    font-size:28px;
    font-weight:1000;
}

.catalogo-empty p{
    margin:0;

    color:var(--catalog-muted);

    font-size:16px;
}

/* =========================================================
ERROR
========================================================= */

.catalogo-error{
    grid-column:1 / -1;

    padding:26px;

    border-radius:22px;

    background:#fff2f2;

    border:1px solid #ffd9d9;
}

.catalogo-error h3{
    margin:0 0 8px;

    color:#991b1b;
}

.catalogo-error p{
    margin:0;

    color:#7f1d1d;
}

/* =========================================================
PAGINACION
========================================================= */

.catalogo-paginacion{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:10px;

    margin-top:50px;
}

.pagination-btn{
    min-width:46px;
    height:46px;

    border:1px solid var(--catalog-border);
    border-radius:14px;

    background:var(--catalog-white);

    font-size:14px;
    font-weight:900;

    cursor:pointer;

    transition:
        background var(--catalog-transition),
        border var(--catalog-transition),
        transform var(--catalog-transition);
}

.pagination-btn:hover:not(:disabled),
.pagination-btn.active{
    background:var(--catalog-yellow);
    border-color:var(--catalog-yellow);

    transform:translateY(-2px);
}

.pagination-btn:disabled{
    opacity:.4;
    cursor:not-allowed;
}

/* =========================================================
SKELETONS
========================================================= */

.skeleton{
    position:relative;
    overflow:hidden;

    background:#ececec;
}

.skeleton::after{
    content:"";

    position:absolute;
    inset:0;

    transform:translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    animation:skeleton-loading 1.2s infinite;
}

@keyframes skeleton-loading{
    100%{
        transform:translateX(100%);
    }
}

.skeleton-text{
    height:14px;

    border-radius:999px;

    margin-bottom:10px;
}

.skeleton-text.short{
    width:60%;
}

.skeleton-price{
    width:50%;
    height:18px;

    border-radius:999px;

    margin-bottom:16px;
}

.skeleton-button{
    width:100%;
    height:50px;

    border-radius:16px;
}

/* =========================================================
LAPTOP
========================================================= */

@media (max-width:1200px){

    .catalogo-shell{
        grid-template-columns:280px 1fr;
    }

    .productos-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}

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

@media (max-width:920px){

    .catalogo-shell{
        grid-template-columns:1fr;
    }

    .catalogo-filtros{
        position:fixed;

        inset:0;

        width:100vw;
        height:100dvh;

        overflow:hidden;

        display:flex;
        flex-direction:column;

        padding:0;

        border:none;
        border-radius:0;

        background:var(--catalog-white);

        box-shadow:
            0 0 60px rgba(0,0,0,.22);

        transform:
            translateX(-100%);

        opacity:0;

        visibility:hidden;

        transition:
            transform .35s cubic-bezier(.22,1,.36,1),
            opacity .25s ease,
            visibility .25s ease;

        z-index:99999;

        box-sizing:border-box;
    }

    .catalogo-filtros.is-open{
        transform:translateX(0);

        opacity:1;
        visibility:visible;
    }

    /*
    =========================================================
    SCROLL INTERNO
    =========================================================
    */

    .catalogo-filtros form{
        flex:1;

        overflow-y:auto;

        padding:
            0
            24px
            140px;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:thin;

        box-sizing:border-box;
    }

    /*
    =========================================================
    HEADER FIXED
    =========================================================
    */

    .filtros-header{
        position:sticky;
        top:0;

        z-index:20;

        min-height:82px;

        padding:
            20px
            24px
            18px;

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

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

        backdrop-filter:blur(10px);

        border-bottom:
            1px solid var(--catalog-border);

        box-sizing:border-box;
    }

    .filtros-close{
        display:flex;
    }

    /*
    =========================================================
    MOBILE BTN
    =========================================================
    */

    .btn-filtros-mobile{
        display:flex;

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

        width:100%;
    }

    /*
    =========================================================
    GRID
    =========================================================
    */

    .productos-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:18px;
    }
}

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

@media (max-width:560px){

    .catalogo-hero{
        padding:62px 18px 30px;
    }

    .catalogo-hero h1{
        font-size:42px;
    }

    .catalogo-hero p{
        font-size:15px;
    }

    .catalogo-searchbar{
        padding:0 16px 20px;
    }

    .catalogo-searchbar__form{
        flex-direction:column;
    }

    .catalogo-shell{
        padding:18px 16px 70px;
    }

    .resultados-toolbar{
        gap:14px;

        flex-direction:column;

        align-items:stretch;
    }

    .toolbar-right{
        width:100%;
    }

    .toolbar-right select{
        width:100%;
    }

    .productos-grid{
        gap:12px;
    }

    .producto-card{
        border-radius:22px;
    }

    .producto-card__content{
        padding:14px;
    }

    .producto-card__title{
        min-height:auto;

        font-size:13px;
        line-height:1.4;
    }

    .precio-actual{
        font-size:15px;
    }

    .precio-anterior{
        font-size:12px;
    }

    .producto-btn{
        height:44px;

        font-size:12px;
    }

    .producto-badge{
        top:10px;
        left:10px;

        padding:6px 10px;

        font-size:10px;
    }
}

/*
=========================================================
SCROLLBAR MOBILE FILTROS
=========================================================
*/

.catalogo-filtros form::-webkit-scrollbar{
    width:6px;
}

.catalogo-filtros form::-webkit-scrollbar-track{
    background:transparent;
}

.catalogo-filtros form::-webkit-scrollbar-thumb{
    background:
        rgba(0,0,0,.18);

    border-radius:999px;
}

/*
=========================================================
SAFE AREA IPHONE
=========================================================
*/

@supports (padding:max(0px)){

    .catalogo-filtros form{
        padding-bottom:
            max(120px, env(safe-area-inset-bottom));
    }
}

/*
=========================================================
FIX IOS / ANDROID FULL PANEL
=========================================================
*/

@media (max-width:920px){

    .catalogo-filtros{

        padding-top:
            env(safe-area-inset-top);

        padding-bottom:
            env(safe-area-inset-bottom);
    }

    .catalogo-filtros form{

        overscroll-behavior:contain;
    }
}