/* =========================================================
   VARIABLES
========================================================= */

:root {

    --market-primary: #2563c8;
    --market-primary-dark: #174a9d;
    --market-secondary: #31537d;
    --market-text: #294365;
    --market-muted: #667085;
    --market-border: #e3eaf3;
    --market-background: #f7f9fc;
    --market-white: #ffffff;
    --market-success: #208050;

}


/* =========================================================
   BASE
========================================================= */

.catalog-header,
.catalog-products {

    position: relative;

}


.catalog-header {

    padding: 48px 0 44px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(37, 99, 200, 0.10),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fc 100%
        );

    border-bottom: 1px solid #e7edf5;

    overflow: hidden;

}


.catalog-products {

    padding: 56px 0 70px;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

}


/* =========================================================
   BADGE SUPERIOR
========================================================= */

.catalog-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 16px;

    margin-bottom: 20px;

    border-radius: 999px;

    background: #eaf2ff;

    color: var(--market-primary-dark);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.3px;

}


.catalog-badge i {

    font-size: 14px;

}


/* =========================================================
   TÍTULO
========================================================= */

.catalog-title {

    margin: 0;

    color: var(--market-text);

    font-size: clamp(2.5rem, 4vw, 4rem);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.catalog-title span {

    color: var(--market-primary);

}


/* =========================================================
   DESCRIPCIÓN HERO
========================================================= */

.catalog-description {

    max-width: 720px;

    margin: 20px 0 0;

    color: #62728a;

    font-size: 17px;

    line-height: 1.75;

}


/* =========================================================
   ESTADÍSTICAS
========================================================= */

.catalog-stats {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    margin-top: 30px;

}


.stat-card {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 155px;

    padding: 16px 18px;

    background: rgba(255, 255, 255, 0.85);

    border: 1px solid #e4eaf3;

    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(30, 60, 100, 0.05);

}


.stat-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    border-radius: 12px;

    background: #edf4ff;

    color: var(--market-primary);

    font-size: 17px;

}


.stat-content {

    display: flex;

    flex-direction: column;

}


.stat-content strong {

    color: var(--market-text);

    font-size: 21px;

    line-height: 1.1;

    font-weight: 800;

}


.stat-content span {

    margin-top: 4px;

    color: var(--market-muted);

    font-size: 13px;

}


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

.catalog-hero-image-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

}


.catalog-hero-image {

    display: block;

    width: 100%;

    max-width: 520px;

    height: auto;

    filter:
        drop-shadow(
            0 20px 40px
            rgba(38, 70, 120, 0.18)
        );

}


/* =========================================================
   BUSCADOR
========================================================= */

.search-title {

    display: block;

    margin-bottom: 10px;

    color: var(--market-text);

    font-size: 14px;

    font-weight: 700;

}


.market-search {

    display: flex;

    align-items: center;

    min-height: 62px;

    overflow: hidden;

    background: var(--market-white);

    border: 1px solid #dce5f0;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(40, 70, 110, 0.06);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.market-search:focus-within {

    border-color: var(--market-primary);

    box-shadow:
        0 0 0 4px rgba(37, 99, 200, 0.08),
        0 14px 35px rgba(40, 70, 110, 0.08);

}


.search-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 60px;

    flex-shrink: 0;

    color: var(--market-primary);

    font-size: 17px;

}


.market-search input {

    width: 100%;

    height: 60px;

    border: 0;

    outline: none;

    background: transparent;

    color: var(--market-text);

    font-size: 15px;

}


.market-search input::placeholder {

    color: #99a5b5;

}


.market-search button {

    align-self: stretch;

    min-width: 140px;

    padding: 0 28px;

    border: 0;

    background:
        linear-gradient(
            135deg,
            #3474dc,
            #1e5fbe
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.market-search button:hover {

    background:
        linear-gradient(
            135deg,
            #1e5fbe,
            #174a9d
        );

}


/* =========================================================
   ENCABEZADO DE PRODUCTOS
========================================================= */

.catalog-section-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;

}


.catalog-section-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--market-primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.catalog-section-header h2 {

    margin: 0;

    color: var(--market-text);

    font-size: 30px;

    font-weight: 800;

    letter-spacing: -0.5px;

}


.catalog-results-count {

    padding: 8px 14px;

    border-radius: 999px;

    background: #edf3fa;

    color: #61718a;

    font-size: 13px;

    font-weight: 600;

}


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

.product-card {

    display: flex;

    flex-direction: column;

    height: 100%;

    min-height: 455px;

    overflow: hidden;

    background: var(--market-white);

    border: 1px solid #e3eaf2;

    border-radius: 18px;

    box-shadow:
        0 8px 28px rgba(38, 65, 100, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}

.product-card:hover {

    transform: translateY(-7px);

    border-color: rgba(37, 99, 200, 0.25);

    box-shadow:
        0 18px 45px rgba(38, 65, 100, 0.14);

}


/* =========================================================
   IMAGEN DEL PRODUCTO
========================================================= */

.product-image {

    position: relative;

    height: 205px;

    flex-shrink: 0;

    overflow: hidden;

    background: #edf2f7;

}


.product-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;

}


.product-card:hover .product-image img {

    transform: scale(1.06);

}


.product-image-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 45%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(20, 40, 70, 0.08)
        );

}


/* =========================================================
   BADGE GRATIS
========================================================= */

.product-free-badge {

    position: absolute;

    top: 14px;

    left: 14px;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.95);

    color: var(--market-success);

    font-size: 12px;

    font-weight: 800;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.12);

}


.product-free-badge i {

    font-size: 12px;

}


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

.product-body {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 22px;

}


/* =========================================================
   CATEGORÍA
========================================================= */

.product-category {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    color: var(--market-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}


.product-category i {

    font-size: 11px;

}


/* =========================================================
   TÍTULO PRODUCTO
========================================================= */

.product-title {

    display: -webkit-box;

    min-height: 58px;

    margin: 0;

    overflow: hidden;

    color: var(--market-text);

    font-size: 18px;

    font-weight: 750;

    line-height: 1.45;

    letter-spacing: -0.2px;

    overflow-wrap: anywhere;

    word-break: break-word;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.product-description {

    display: -webkit-box;

    min-height: 72px;

    margin: 13px 0 20px;

    overflow: hidden;

    color: #6a788a;

    font-size: 14px;

    line-height: 1.65;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

}


/* =========================================================
   FOOTER
========================================================= */

.product-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: auto;

    padding-top: 18px;

    border-top: 1px solid #edf1f5;

}


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

.product-price {

    white-space: nowrap;

}


.product-price-free {

    color: var(--market-success);

    font-size: 15px;

    font-weight: 800;

}


.product-price-paid {

    color: var(--market-text);

    font-size: 15px;

    font-weight: 800;

}


/* =========================================================
   BOTÓN DETALLES
========================================================= */

.product-details-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--market-primary);

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        gap 0.2s ease;

}


.product-details-button:hover {

    gap: 11px;

    color: var(--market-primary-dark);

}


.product-details-button i {

    font-size: 12px;

}


/* =========================================================
   ESTADO VACÍO
========================================================= */

.catalog-empty {

    padding: 70px 25px;

    text-align: center;

    background: #ffffff;

    border: 1px dashed #d5dfeb;

    border-radius: 20px;

}


.catalog-empty-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70px;

    height: 70px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #eef4fb;

    color: var(--market-primary);

    font-size: 28px;

}


.catalog-empty h4 {

    margin-bottom: 10px;

    color: var(--market-text);

    font-size: 21px;

    font-weight: 750;

}


.catalog-empty p {

    margin: 0;

    color: var(--market-muted);

}


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

@media (max-width: 991.98px) {

    .catalog-header {

        padding-top: 40px;

    }


    .catalog-hero-image-wrapper {

        margin-top: 5px;

    }


    .catalog-hero-image {

        max-width: 460px;

    }

}


@media (max-width: 767.98px) {

    .catalog-header {

        padding: 35px 0;

    }


    .catalog-products {

        padding: 40px 0 55px;

    }


    .catalog-title {

        font-size: 38px;

    }


    .catalog-description {

        font-size: 15px;

    }


    .catalog-stats {

        display: grid;

        grid-template-columns: 1fr;

    }


    .stat-card {

        width: 100%;

    }


    .market-search {

        min-height: auto;

        flex-wrap: wrap;

        border-radius: 16px;

    }


    .search-icon {

        width: 50px;

    }


    .market-search input {

        width: calc(100% - 50px);

    }


    .market-search button {

        width: 100%;

        min-height: 54px;

    }


    .catalog-section-header {

        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 25px;

    }


    .catalog-section-header h2 {

        font-size: 26px;

    }


    .product-image {

        height: 220px;

    }

}


@media (max-width: 575.98px) {

    .catalog-title {

        font-size: 32px;

    }


    .product-card {

        min-height: 440px;

    }


    .product-image {

        height: 210px;

    }


    .product-body {

        padding: 20px;

    }

}

/* ==========================================================
   ESTADÍSTICAS DEL PRODUCTO
========================================================== */

.product-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px solid rgba(31, 55, 86, 0.10);
}


/* ==========================================================
   DESCARGAS
========================================================== */

.product-downloads {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: #64748b;

    font-size: 0.78rem;
    white-space: nowrap;
}

.product-downloads i {
    font-size: 0.82rem;
    color: #2f6fc9;
}

.product-downloads span {
    font-weight: 700;
    color: #334155;
}

.product-downloads small {
    font-size: 0.78rem;
    color: #64748b;
}


/* ==========================================================
   BADGE BASE
========================================================== */

.product-ranking {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 700;

    line-height: 1;
    white-space: nowrap;

    border: 1px solid transparent;
}

.product-ranking i {
    font-size: 0.75rem;
}


/* ==========================================================
   👑 MÁS DESCARGADO
========================================================== */

.product-ranking-top {
    color: #a16207;

    background: rgba(234, 179, 8, 0.12);

    border-color: rgba(234, 179, 8, 0.22);
}

.product-ranking-top i {
    color: #d97706;
}


/* ==========================================================
   🔥 POPULAR
========================================================== */

.product-ranking-hot {
    color: #c2410c;

    background: rgba(249, 115, 22, 0.10);

    border-color: rgba(249, 115, 22, 0.20);
}

.product-ranking-hot i {
    color: #ea580c;
}


/* ==========================================================
   📈 EN TENDENCIA
========================================================== */

.product-ranking-trending {
    color: #047857;

    background: rgba(16, 185, 129, 0.10);

    border-color: rgba(16, 185, 129, 0.20);
}

.product-ranking-trending i {
    color: #059669;
}


/* ==========================================================
   ✨ NUEVO
========================================================== */

.product-ranking-new {
    color: #2563eb;

    background: rgba(37, 99, 235, 0.08);

    border-color: rgba(37, 99, 235, 0.16);
}

.product-ranking-new i {
    color: #2563eb;
}


/* ==========================================================
   EFECTO HOVER DEL BADGE
========================================================== */

.product-card:hover .product-ranking {
    transform: translateY(-1px);
}

.product-ranking {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* =========================================
   BADGES DE RANKING
========================================= */

.product-ranking {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;

    border: 1px solid transparent;

    white-space: nowrap;
}


/* =========================================
   👑 MÁS DESCARGADO
========================================= */

.product-ranking-top {
    color: #b7791f;

    background: #fff7d6;

    border-color: #f6d365;
}

.product-ranking-top i {
    color: #f4b400;

    font-size: 0.9rem;
}


/* =========================================
   🔥 POPULAR
========================================= */

.product-ranking-hot {
    color: #c2410c;

    background: #fff0e6;

    border-color: #fdba74;
}

.product-ranking-hot i {
    color: #f97316;

    font-size: 0.9rem;
}


/* =========================================
   📈 EN TENDENCIA
========================================= */

.product-ranking-trending {
    color: #047857;

    background: #e8fff5;

    border-color: #86efac;
}

.product-ranking-trending i {
    color: #10b981;

    font-size: 0.9rem;
}


/* =========================================
   ✨ NUEVO
========================================= */

.product-ranking-new {
    color: #2563eb;

    background: #eff6ff;

    border-color: #bfdbfe;
}

.product-ranking-new i {
    color: #3b82f6;

    font-size: 0.9rem;
}


/* =========================================
   ICONO DE DESCARGAS
========================================= */

.product-downloads i {
    color: #2563eb;
}
/* ==========================================================
   MARKETPLACE SCRIPTS - FONDO GENERAL
   Unificado con Marketplace
   No modifica tarjetas ni componentes
========================================================== */

.catalog-header {
    background:
        radial-gradient(
            circle at top right,
            rgba(59, 130, 246, 0.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #e7eef6 0%,
            #dfe8f1 100%
        );
}


/* Sección de productos */

.catalog-products {
    background:
        radial-gradient(
            circle at top right,
            rgba(59, 130, 246, 0.06),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #e7eef6 0%,
            #dfe8f1 100%
        );
}