/* ===== Cards (grid clásico) ===== */
    .wcss-grid {
        display: grid;
        gap: 14px
    }

    @media (min-width:640px) {
        .wcss-grid {
            grid-template-columns: repeat(var(--wcss-cols, 3), minmax(0, 1fr))
        }
    }

    .wcss-card {
        border: 1px solid #e8edf3;
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
        transition: transform .18s ease, box-shadow .18s ease
    }

    .wcss-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(16, 24, 40, .08)
    }

    .wcss-media {
        aspect-ratio: 16/9;
        display: block;
        background: #f5f7fa
    }

    .wcss-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .wcss-body {
        padding: 14px
    }

    .wcss-title {
        font-weight: 700;
        font-size: 1rem;
        margin: 0 0 4px
    }

    .wcss-title a {
        text-decoration: none;
        color: inherit
    }

    .wcss-desc {
        color: #475467;
        font-size: .92rem;
        line-height: 1.35;
        margin: 0 0 10px
    }

    .wcss-actions {
        margin-top: 8px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap
    }

    .wcss-btn {
        display: inline-block;
        padding: 9px 12px;
        border-radius: 999px;
        border: 1px solid #d0d5dd;
        font-weight: 600;
        font-size: .9rem;
        color: #111827;
        text-decoration: none;
        background: #fff
    }

    .wcss-btn:hover {
        background: #f3f4f6
    }

    .wcss-ph {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #98a2b3;
        font-size: .9rem
    }

    /* ===== Slider ===== */
    .wcss-slider-wrap {
        position: relative
    }

    .wcss-slider-wrap .swiper {
        padding-bottom: 32px
    }

    .wcss-pagination {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto
    }

    .wcss-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        border: none;
        background: #fff;
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
        width: 38px;
        height: 38px;
        cursor: pointer
    }

    .wcss-nav-prev {
        left: -6px
    }

    .wcss-nav-next {
        right: -6px
    }

    /* ===== Mosaico tipo template ===== */
    .wcss-mosaic-tpl * {
        box-sizing: border-box
    }

    .wcss-mosaic-tpl {
        padding: 20px;
        background: white
    }

    .wcss-mosaic-tpl .container {
        max-width: 1200px;
        margin: 0 auto
    }

    .wcss-mosaic-tpl .heading {
        font: 700 1.6rem/1.2 Arial, sans-serif;
        margin: 0 0 14px;
        color: #111
    }

    /* Grid base (forzamos grid por si el theme aplica flex) */
    .wcss-mosaic-tpl .grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(var(--min-col, 200px), 1fr));
        grid-auto-rows: minmax(var(--min-row, 150px), auto);
        gap: 15px;
        grid-auto-flow: dense;
    }

    /* Item */
    .wcss-mosaic-tpl .item {
        position: relative;
        display: block;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
        text-decoration: none;
        color: #fff;
        background-size: cover;
        background-position: center;
        transition: transform .3s ease, box-shadow .3s ease;
        min-height: 150px;
        isolation: isolate;
        /* aísla capas internas */
    }

    .wcss-mosaic-tpl .item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .2)
    }

    /* Overlay (debajo de los textos) */
    .wcss-mosaic-tpl .item .overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35) 75%, rgba(0, 0, 0, .55));
    }

    /* Título y badge encima del overlay */
    .wcss-mosaic-tpl .item .title {
        position: absolute;
        left: 12px;
        bottom: 10px;
        z-index: 2;
        font: 800 1.05rem/1.1 Arial, sans-serif;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    }

    .wcss-mosaic-tpl .item .badge {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
        background: #fff;
        color: #111;
        padding: 6px 10px;
        border-radius: 999px;
        font-weight: 700;
        font-size: .8rem;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .12)
    }

    .wcss-mosaic-tpl .item .badge:empty {
        display: none
    }

    /* Tamaños/colores por nth-child (como tu demo) */
    .wcss-mosaic-tpl .grid .item:nth-child(3n) {
        grid-column: span 2;
        background-color: #ff6b6b;
        /* fallback si no hay imagen */
    }

    .wcss-mosaic-tpl .grid .item:nth-child(5n) {
        grid-row: span 2;
        background-color: #4ecdc4;
    }

    .wcss-mosaic-tpl .grid .item:nth-child(7n) {
        grid-column: span 2;
        grid-row: span 2;
        background-color: #45b7d1;
    }

    .wcss-mosaic-tpl .grid .item:nth-child(odd):not(:nth-child(3n)):not(:nth-child(5n)):not(:nth-child(7n)) {
        background-color: #ff9f43;
    }

    .wcss-mosaic-tpl .grid .item:nth-child(even):not(:nth-child(3n)):not(:nth-child(5n)):not(:nth-child(7n)) {
        background-color: #5f27cd;
    }

    /* Responsivo */
    @media (max-width:768px) {
        .wcss-mosaic-tpl .grid {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
        }

        .wcss-mosaic-tpl .item .title {
            font-size: .95rem
        }
    }

    @media (max-width:480px) {
        .wcss-mosaic-tpl .grid {
            grid-template-columns: 1fr
        }

        .wcss-mosaic-tpl .grid .item {
            grid-column: span 1 !important;
            grid-row: span 1 !important
        }
    }

    .wcss-mosaic-tpl .item {
        grid-column: span var(--gc, 1);
        grid-row: span var(--gr, 1);
    }

    /* Contenedor del badge dentro de cada item (posición absoluta, sin estilos de fondo) */
    .wcss-mosaic-tpl .item .badge {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    /* Pastilla estándar (usa [wcss_badge]) */
    .wcss-mosaic-tpl .item .badge .wcss-badge {
        display: inline-block;
        background: #fff;
        color: #111;
        padding: 6px 10px;
        border-radius: 999px;
        font-weight: 700;
        font-size: .8rem;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
    }

    /* Cinta diagonal (usa [wcss_ribbon]) */
    .wcss-mosaic-tpl .item .badge .wcss-ribbon {
        position: absolute;
        top: 12px;
        left: -40px;
        z-index: 3;
        display: inline-block;
        padding: 8px 60px;
        background: var(--rb-bg, #f97316);
        color: var(--rb-tx, #fff);
        font-weight: 800;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        transform: rotate(-18deg);
        box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
        text-decoration: none;
    }

    .wcss-mosaic-tpl .item .badge .wcss-ribbon::before,
    .wcss-mosaic-tpl .item .badge .wcss-ribbon::after {
        content: "";
        position: absolute;
        bottom: -6px;
        border-top: 6px solid rgba(0, 0, 0, .25);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        left: 6px;
    }

    .wcss-mosaic-tpl .item .badge .wcss-ribbon::after {
        left: auto;
        right: 6px;
    }