@import url("https://fonts.googleapis.com/css2?family=Antonio:wght@300;400;500;600&family=Roboto+Condensed:wght@400;500;700&family=Kaushan+Script&family=Noto+Sans+JP:wght@500;700&display=swap");

/* ==========================================================
   CATÁLOGO - BASE
   ========================================================== */

.catalog-page {
    --catalog-grid-min: clamp(180px, 22vw, 270px);
    --catalog-grid-gap: clamp(16px, 2.4vw, 28px);
    --catalog-card-max: clamp(168px, 22vw, 288px);
    --catalog-card-offset-x: clamp(-10px, -0.85vw, -4px);

    overflow-x: hidden;
}

.catalog-first-fold {
    min-height: calc(100svh - 74px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.catalog-primary-section {
    margin-bottom: 34px;
}

.catalog-after-fold {
    scroll-margin-top: 88px;
}

.catalog-page h2 {
    margin-bottom: 18px;
    padding-left: 14px;
    color: #fff;
    border-left: 5px solid #ff4d4d;
    font-size: 30px;
    font-weight: 800;
}

.catalog-page .section-head {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.catalog-page .publication-section {
    margin-bottom: 60px;
}

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

.catalog-page .popular-grid,
.catalog-page .latest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--catalog-card-max), var(--catalog-card-max)));
    column-gap: 0;
    align-items: start;
    justify-content: start;
}

.catalog-page .popular-grid .publication-card:not(:first-child),
.catalog-page .latest-grid .publication-card:not(:first-child) {
    transform: translateX(-20%) !important;
}

/* ==========================================================
   GUÍA DE COLORES
   ========================================================== */

.color-guide-box {
    margin-bottom: 35px;
    padding: 24px;
    background: #171717;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
}

.color-guide-items {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
}

.color-guide-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #eee;
}

.color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.color-dot.default,
.color-dot.uncategorized {
    background: #666;
}

.color-dot.public {
    background: #2ecc71;
}

.color-dot.adult {
    background: #ff6b6b;
}

.color-dot.halfh {
    background: #ff5fd2;
}

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

.catalog-filter-group {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.filter-box {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.filter-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    color: #f3f3f3;
    background: #171717;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease;
}

.filter-toggle:hover {
    background: #202020;
}

.filter-label-text {
    white-space: nowrap;
}

.filter-arrow {
    margin-left: 4px;
    font-size: 12px;
}

.filter-selected-count {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    background: linear-gradient(135deg, #ff4d4d, #ff2f5f);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.08;
    box-shadow: 0 8px 16px rgba(255, 77, 77, .18);
}

.filter-selected-count[hidden] {
    display: none;
}

.filter-menu {
    width: max-content;
    min-width: 280px;
    max-width: 320px;
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: #171717;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.filter-box.open .filter-menu {
    display: flex;
}

.filter-box:nth-child(3) .filter-menu {
    min-width: 320px;
}

.filter-search-wrap {
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.filter-search-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    color: #fff;
    background: #111;
    border: 1px solid #373737;
    border-radius: 10px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.filter-search-input:focus {
    border-color: #ff4d4d;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, .10);
}

.filter-options-list {
    max-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
}

.filter-option-item {
    width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    color: #d9d9d9;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.filter-option-item:hover {
    background: rgba(255, 255, 255, .055);
}

.filter-option-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    accent-color: #ff4d4d;
}

.filter-option-item span {
    line-height: 1.25;
}

.filter-empty {
    color: #a9a9a9;
    font-size: 14px;
    line-height: 1.4;
}

/* ==========================================================
   REVEAL CATÁLOGO
   ========================================================== */

@keyframes catalogCardRevealFromLeft {
    from {
        opacity: 0;
        transform: translateX(-26px);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes catalogSectionReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.catalog-reveal-section {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
}

.catalog-reveal-section.is-visible {
    animation: catalogSectionReveal .48s cubic-bezier(.22, 1, .36, 1) forwards;
}

.catalog-page .popular-grid .publication-card,
.catalog-page .latest-grid .publication-card {
    opacity: 0;
    transform: translateX(-26px);
    filter: blur(8px);
}

.catalog-page .popular-grid .publication-card.is-visible,
.catalog-page .latest-grid .publication-card.is-visible {
    animation: catalogCardRevealFromLeft .52s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc((var(--catalog-card-index, 0)) * 70ms);
}

.catalog-page .popular-grid .publication-card[style*="display: none"],
.catalog-page .latest-grid .publication-card[style*="display: none"] {
    animation: none;
}

/* ==========================================================
   CARD CON FRAME PNG REAL
   ========================================================== */

.publication-card.sm-card,
.publication-card.sm-card * {
    box-sizing: border-box;
}

.publication-card.sm-card {
    width: 100%;
    max-width: var(--catalog-card-max);
    margin: 0 0 0 var(--catalog-card-offset-x);
    color: #fff;
    font-family: "Space Grotesk", "Inter", "Roboto Condensed", sans-serif;
}

.publication-card.sm-card a {
    color: inherit;
    text-decoration: none;
}

.sm-card-tabs {
    min-height: 34px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: clamp(4px, .75vw, 7px);
    padding-left: clamp(10px, 6.5%, 19px);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .025em;
}

.sm-card-tab {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
    color: rgba(255, 255, 255, .68);
    font-size: clamp(9.4px, 1.12vw, 13px);
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 255, 255, .12);
}

.sm-card-tab-jp {
    color: rgba(255, 255, 255, .50);
    font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-size: .76em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: none;
}

.sm-card-tab-main {
    display: block;
    line-height: .95;
}

.sm-card-tab-active {
    color: #ff3348;
}

.sm-card-tab-active .sm-card-tab-jp {
    color: rgba(255, 51, 72, .78);
}

.sm-card-tabs-divider {
    width: 1px;
    height: clamp(18px, 1.8vw, 25px);
    margin-bottom: 1px;
    background: rgba(255, 255, 255, .28);
}

.sm-card-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1040 / 1400;
    overflow: visible;
    background-image: url("/images/ui/card-frame-index.webp");
    background-repeat: no-repeat;
    background-position: 16% center;
    background-size: 77.3% 100%;
}


.sm-card-cover-link {
    position: absolute;
    left: 12%;
    top: -12.2%;
    width: 100%;
    height: 100%;

    transform-origin: top center;

    transform:
        translateX(-11.5%)
        translateY(13%)
        scaleX(0.84)
        scaleY(0.82);
}

.sm-card-cover {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    clip-path: polygon(
        3% 0,
        97% 0,
        100% 2%,
        100% 98%,
        97% 100%,
        3% 100%,
        0 98.2%,
        0 2.3%
    );
}

.sm-card-cover::after {
    content: none;
}

.sm-card-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1);
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 0.3%, #000 95%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 0%, #000 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 3%,
            #000 90%,
            rgba(0,0,0,.75) 97%,
            rgba(0,0,0,0.1) 99%,
            transparent 100%
        ),
        linear-gradient(to right, transparent 0%, #000 4%, #000 97%, transparent 100%);
    mask-composite: intersect;
}

.sm-card-cover-link:hover .sm-card-cover img,
.sm-card-cover:hover img {
    transform: translate3d(0, -2px, 0) scale(1.025);
}

.sm-card-number {
    display: none !important;
}

.sm-card-status {
    position: absolute;
    top: 2.8%;
    right: 4.4%;
    z-index: 4;
    padding: 5px 10px;
    color: #fff;
    background: rgba(20, 8, 10, .92);
    border: 1px solid rgba(255, 51, 72, .75);
    border-radius: 4px;
    font-size: clamp(6px, .75vw, 12px);
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 0 9px rgba(255, 51, 72, .34);
}

.sm-card-status-paused {
    color: #ffc1c8;
}

/* ==========================================================
   FRAME SIN CAPÍTULOS
   ========================================================== */

.sm-card-frame.sm-card-frame-no-chapters .sm-card-cover-link {
    left: 7.2%;
    width: 91%;
}

.sm-card-frame.sm-card-frame-no-chapters .sm-card-cover {
    clip-path: polygon(
        2.6% 0,
        97.4% 0,
        100% 1.9%,
        100% 98.1%,
        97.2% 100%,
        2.8% 100%,
        0 98.1%,
        0 1.9%
    );
}

.sm-card-frame.sm-card-frame-no-chapters .sm-card-status {
    top: 3.1%;
}

/* ==========================================================
   BOTONES COMPACTO MINIMALISTA
   ========================================================== */

.sm-card-frame.sm-card-frame-has-actions {
    --sm-actions-left: 4%;
    --sm-actions-right: 19.5%;
    --sm-actions-bottom: 3%;
    --sm-actions-height: 12.6%;
    --sm-action-gap: clamp(5px, .75vw, 8px);
    --sm-action-title-size: clamp(10px, 1vw, 15px);
    --sm-action-title-tracking: .045em;
    --sm-action-title-scale: 1;
    --sm-action-meta-size: clamp(6.2px, .62vw, 9px);
    --sm-stamp-size: clamp(12px, .7vw, 15px);
}

.sm-card-frame.sm-card-frame-has-actions .sm-card-cover-link {
    left: 7%;
    width: 91.2%;
}

.sm-card-frame.sm-card-frame-has-actions .sm-card-cover {
    clip-path: polygon(
        2% 0,
        98% 0,
        100% 1.5%,
        100% 98%,
        100% 100%,
        2% 100%,
        0 98%,
        0 1.5%
    );
}

.sm-card-frame.sm-card-frame-has-actions .sm-card-cover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32%;
    z-index: 3;
    pointer-events: none;
}

.sm-card-frame.sm-card-frame-has-actions .sm-card-actions {
    position: absolute;
    left: var(--sm-actions-left);
    right: var(--sm-actions-right);
    bottom: var(--sm-actions-bottom);
    height: var(--sm-actions-height);
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: visible;
    pointer-events: none;
}

.sm-card-frame.sm-card-frame-has-actions .sm-card-actions::after {
    content: "読書";
    position: absolute;
    right: 5%;
    top: 45%;
    transform: translateY(-50%);
    width: 11%;
    height: 130%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 45, 60, .86);
    background: rgba(5, 5, 6, .46);
    border: 1px solid rgba(255, 45, 60, .72);
    border-radius: 4px;
    font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-size: var(--sm-stamp-size);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .06em;
    padding-left: 1px;
    text-orientation: mixed;
    box-shadow: none;
    pointer-events: none;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-btn {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-decoration: none;
    overflow: visible;
    pointer-events: auto;
    transition: transform .16s ease, filter .16s ease;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-btn + .sm-action-btn {
    padding-top: clamp(5px, .9vw, 8px);
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-btn + .sm-action-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 4%;
    width: 78%;
    height: 1px;
    background: rgba(255, 45, 60, .54);
    pointer-events: none;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-icon {
    display: none !important;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-label {
    display: block;
    width: 100%;
    min-width: 0;
    pointer-events: none;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-line {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: clamp(3px, .48vw, 7px);
    white-space: nowrap;
    overflow: visible;
    transform-origin: left center;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-line strong {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .92);
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: var(--sm-action-title-size);
    font-weight: 600;
    line-height: .95;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-shadow:
        0 1px 1px rgba(0, 0, 0, .85),
        0 0 5px rgba(0, 0, 0, .45);
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-line em {
    flex: 0 0 auto;
    color: rgba(255, 45, 60, .85);
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: clamp(8px, .9vw, 15px);
    font-style: normal;
    font-weight: 500;
    line-height: 1;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-line small {
    flex: 0 1 auto;
    min-width: 0;
    color: rgba(255, 255, 255, .56);
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: var(--sm-action-meta-size);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .035em;
    text-transform: uppercase;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-continue .sm-action-line {
    width: 72%;
    transform: translate(10%, 15%);
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-read .sm-action-line {
    width: 72%;
    transform: translate(10%, 0);
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-continue .sm-action-line small {
    color: rgba(255, 45, 60, .86);
    -webkit-text-stroke: 1px rgba(255, 45, 60, .65);
    paint-order: stroke fill;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-read {
    opacity: .9;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-btn:hover,
.sm-card-frame.sm-card-frame-has-actions .sm-action-btn:focus-visible {
    transform: translateX(2px);
    filter: brightness(1.12);
    outline: none;
}

.sm-card-frame.sm-card-frame-has-actions .sm-action-btn:active {
    transform: translateX(1px) scale(.99);
}

.sm-card-frame.sm-card-frame-has-actions .sm-card-actions:has(.sm-action-btn:only-child) {
    height: 7.4%;
    bottom: 9.2%;
    justify-content: center;
}

.sm-card-frame.sm-card-frame-has-actions .sm-card-actions:has(.sm-action-btn:only-child)::after {
    height: 112%;
}

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

@media (max-width: 768px) {
    /*
    .catalog-page {
        --catalog-grid-min: 180px;
        --catalog-grid-gap: 16px;
    }

    .catalog-first-fold {
        min-height: calc(100svh - 64px);
    }

    .catalog-filter-group {
        width: 100%;
        gap: 8px;
    }
    */

    .filter-box {
        flex: 1 1 min(100%, 160px);
    }

    .filter-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 9px 11px;
        font-size: 13px;
    }

    .filter-menu,
    .filter-box:nth-child(3) .filter-menu {
        min-width: min(260px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
    }
}


@media (max-width: 520px) {
    /*
    .catalog-page h2 {
        margin-bottom: 14px;
        font-size: clamp(22px, 7vw, 28px);
    }

    .catalog-primary-section,
    .catalog-page .publication-section {
        margin-bottom: 42px;
    }
    */
    .filter-menu {
        left: 0;
        right: auto;
        width: min(92vw, 320px);
        min-width: min(92vw, 260px);
        max-width: 92vw;
    }
}
/*
@media (max-width: 380px) {
    .catalog-page {
        --catalog-grid-gap: 10px;
        --catalog-card-max: 168px;
        --catalog-card-offset-x: -3px;
    }

    .sm-card-frame.sm-card-frame-has-actions {
        --sm-actions-bottom: clamp(3px, 2vw, 3px);
        --sm-actions-height: 12%;
        --sm-action-title-size: clamp(8px, 1.5vw, 9px);
        --sm-action-title-tracking: .025em;
        --sm-action-meta-size: 4.8px;
    }
}

@media (max-width: 330px) {
    .catalog-page {
        --catalog-card-max: 188px;
    }

    .catalog-page .popular-grid,
    .catalog-page .latest-grid {
        grid-template-columns: 1fr;
    }
}
*/

@media (prefers-reduced-motion: reduce) {
    .catalog-reveal-section,
    .catalog-page .popular-grid .publication-card,
    .catalog-page .latest-grid .publication-card {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none !important;
    }

    .sm-card-cover img,
    .sm-card-frame.sm-card-frame-has-actions .sm-action-btn {
        transition: none !important;
    }

    .sm-card-cover-link:hover .sm-card-cover img,
    .sm-card-cover:hover img,
    .sm-card-frame.sm-card-frame-has-actions .sm-action-btn:hover,
    .sm-card-frame.sm-card-frame-has-actions .sm-action-btn:focus-visible,
    .sm-card-frame.sm-card-frame-has-actions .sm-action-btn:active {
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .filter-box {
        position: relative;
    }

    .filter-menu {
        width: min(320px, calc(100vw - 24px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
    }

    .filter-box:nth-of-type(even) .filter-menu {
        left: auto !important;
        right: 0 !important;
    }

    .filter-box:nth-of-type(odd) .filter-menu {
        left: 0 !important;
        right: auto !important;
    }
}

/* ==========================================================
   CATÁLOGO Sukimanga - HERO / EXPLORACIÓN LIMPIO
   ========================================================== */

body.catalog-page{
    overflow-x:hidden;
}

body.catalog-page .main-content,
.catalog-page .main-content{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    overflow:visible;
}

/* Primer bloque normal: no crea scroll interno ni doble scrollbar. */
.catalog-first-fold{
    width:100%;
    min-height:calc(100svh + 120px);
    display:block;
    position:relative;
}

/* HERO */
.catalog-page .catalog-hero-carousel{
    position:relative;
    width:100%;
    min-height:clamp(545px, 72svh, 700px);
    margin:0;
    border:0;
    border-radius:0;
    overflow:visible;
    background:transparent;
    box-shadow:none;
    isolation:auto;
}

.catalog-page .catalog-hero-track,
.catalog-page .catalog-hero-slide{
    position:absolute;
    inset:0;
}

.catalog-page .catalog-hero-slide{
    left:50%;
    right:auto;
    width:min(calc(100% - 64px), 1320px);
    max-width:1320px;

    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(280px, 360px);

    align-items:start;

    gap:clamp(42px, 7vw, 108px);

    padding:
        clamp(14px, 2svh, 24px)
        0
        clamp(118px, 15svh, 150px);

    background:transparent;

    opacity:0;
    pointer-events:none;

    transform:translateX(-50%) scale(1.012);

    transition:
        opacity .52s ease,
        transform .68s cubic-bezier(.22,1,.36,1);
}

.catalog-page .catalog-hero-slide.is-active{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) scale(1);
}

/* Sin fondo/caja propia del slider: usa solo el fondo general del sitio. */
.catalog-page .catalog-hero-slide::before,
.catalog-page .catalog-hero-slide::after,
.catalog-page .catalog-hero-backdrop{
    display:none !important;
    content:none !important;
    background:none !important;
    opacity:0 !important;
    filter:none !important;
}

/* Contenido del hero */
.catalog-page .catalog-hero-content{
    max-width:660px;
    min-width:0;
    position:relative;
    z-index:2;
}

.catalog-page .catalog-hero-kicker{
    display:inline-flex;
    align-items:center;
    margin-bottom:18px;
    padding:8px 18px;
    color:#fff;
    background:linear-gradient(135deg,#ff354c,#b60d22);
    border-radius:999px;
    font-family:"Roboto Condensed",Arial,sans-serif;
    font-size:12px;
    font-weight:900;
    letter-spacing:.055em;
    text-transform:uppercase;
    box-shadow:0 0 22px rgba(255,49,71,.50);
    text-shadow:none;
}

.catalog-page .catalog-hero-kicker::before{
    content:"🔥";
    margin-right:7px;
    font-size:12px;
}

.catalog-page .catalog-hero-content h1{
    margin:0 0 14px;
    max-width:660px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:#fff;
    font-family:"Antonio","Roboto Condensed",Arial,sans-serif;
    font-size:clamp(64px, 8.8vw, 118px);
    font-weight:700;
    line-height:.84;
    letter-spacing:.005em;
    text-shadow:0 18px 42px rgba(0,0,0,.55);
}

.catalog-page .catalog-hero-meta{
    max-height:74px;
    overflow:hidden;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:28px;
}

.catalog-page .catalog-hero-meta span{
    min-height:30px;
    display:inline-flex;
    align-items:center;
    padding:6px 15px;
    color:#fff;
    background:rgba(255,255,255,.095);
    border:0;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    box-shadow:inset 0 1px rgba(255,255,255,.06);
}

.catalog-page .catalog-hero-content p{
    max-width:560px;
    margin:0 0 30px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:rgba(255,255,255,.84);
    font-size:clamp(16px,1.16vw,20px);
    line-height:1.55;
}

.catalog-page .catalog-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.catalog-page .catalog-hero-btn{
    min-width:158px;
    min-height:58px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:15px 25px;
    border-radius:12px;
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:900;
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.catalog-page .catalog-hero-btn:hover{
    transform:translateY(-2px);
}

.catalog-page .catalog-hero-btn-primary{
    background:linear-gradient(135deg,#ff3147,#c9152b);
    box-shadow:0 18px 36px rgba(255,49,71,.26);
}

.catalog-page .catalog-hero-btn-secondary{
    background:rgba(15,15,18,.42);
    border:1px solid rgba(255,255,255,.36);
    backdrop-filter:blur(10px);
}

/* Portada del destacado */
.catalog-page .catalog-hero-cover{
    position:relative;
    z-index:2;

    margin-top:22px;
    justify-self:end;
    align-self:center;
    width:min(100%, 340px);
    max-height:min(58svh, 490px);
    aspect-ratio:2/3;
    display:block;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(255,49,71,.42);
    background:rgba(255,255,255,.05);
    box-shadow:0 28px 76px rgba(0,0,0,.60), 0 0 42px rgba(255,49,71,.16);
    transform:none;
}

.catalog-page .catalog-hero-cover img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .35s cubic-bezier(.22,1,.36,1);
}

.catalog-page .catalog-hero-cover:hover img{
    transform:scale(1.035);
}

.catalog-page .catalog-hero-cover span{
    position:absolute;
    left:12px;
    right:12px;
    bottom:14px;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 11px;
    color:#fff;
    background:rgba(7,7,10,.74);
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    font-size:13px;
    font-weight:900;
    backdrop-filter:blur(10px);
}

/* Dots */
.catalog-page .catalog-hero-bottom{
    position:absolute;
    left:50%;
    right:auto;
    bottom:clamp(104px, 13svh, 138px);
    width:min(calc(100% - 64px), 1320px);
    transform:translateX(-50%);
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    pointer-events:none;
}

.catalog-page .catalog-hero-dots{
    display:inline-flex;
    align-items:center;
    gap:9px;
    pointer-events:auto;
}

.catalog-page .catalog-hero-arrows{
    display:none;
}

.catalog-page .catalog-hero-dot{
    width:18px;
    height:5px;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.42);
    cursor:pointer;
    transition:width .2s ease, background .2s ease;
}

.catalog-page .catalog-hero-dot.is-active{
    width:30px;
    background:#ff3147;
}

/* EXPLORAR */
.catalog-explore{
    width:min(calc(100% - 64px), 1320px);
    margin:clamp(-82px, -8.5svh, -56px) auto 0;
    position:relative;
    z-index:12;
    padding-bottom:clamp(70px, 9svh, 110px);
}

.catalog-explore-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.catalog-explore-mark{
    color:#ff3147;
    font-weight:900;
    text-shadow:0 0 18px rgba(255,49,71,.55);
}

.catalog-page .catalog-explore h2{
    margin:0;
    padding:0;
    border:0;
    color:#fff;
    font-size:clamp(22px,2vw,30px);
    font-weight:900;
}

.catalog-explore-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:14px;
}

.catalog-explore-tab{
    min-height:48px;
    padding:11px 18px;
    color:rgba(255,255,255,.78);
    background:rgba(8,8,10,.88);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(0,0,0,.20);
    transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.catalog-explore-tab:hover,
.catalog-explore-tab.is-active{
    color:#fff;
    background:rgba(255,49,71,.16);
    border-color:rgba(255,49,71,.62);
    transform:translateY(-1px);
}

.catalog-explore-panel{
    display:none;
    grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
    gap:12px;
    overflow:visible;
}

.catalog-explore-panel.is-active{
    display:grid;
}

.catalog-explore-card{
    min-height:112px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:18px 12px;
    color:#fff;
    background:linear-gradient(180deg,rgba(29,30,36,.84),rgba(12,13,17,.92));
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    cursor:pointer;
    font-weight:800;
    box-shadow:inset 0 1px rgba(255,255,255,.06), 0 14px 32px rgba(0,0,0,.22);
    backdrop-filter:blur(14px);
    transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.catalog-explore-card:hover,
.catalog-explore-card.is-selected{
    transform:translateY(-3px);
    border-color:color-mix(in srgb, var(--explore-accent, #ff4d4d), white 12%);
    box-shadow:inset 0 1px rgba(255,255,255,.09), 0 18px 40px rgba(0,0,0,.32), 0 0 26px color-mix(in srgb, var(--explore-accent, #ff4d4d), transparent 72%);
}

.catalog-explore-icon{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--explore-accent,rgba(255,255,255,.78));
}

.catalog-explore-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 8px color-mix(in srgb, var(--explore-accent, #fff), transparent 55%));
}

.catalog-explore-card.is-reset{
    --explore-accent:#fff;
}

.catalog-empty-state{
    grid-column:1/-1;
    padding:30px;
    color:rgba(255,255,255,.68);
    background:rgba(12,12,15,.72);
    border:1px dashed rgba(255,255,255,.14);
    border-radius:16px;
    text-align:center;
}

/* Secciones posteriores y footer: flujo normal, sin scroll interno. */
.catalog-primary-section,
.catalog-after-fold{
    width:min(calc(100% - 64px), 1320px);
    margin-left:auto;
    margin-right:auto;
}

.catalog-primary-section{
    padding-top:0;
    margin-bottom:80px;
}

body.catalog-page .site-footer{
    position:relative;
    margin-top:80px;
}

/* Responsive */
@media (max-width:980px){
    .catalog-first-fold{
        min-height:auto;
    }

    .catalog-page .catalog-hero-carousel{
        min-height:640px;
    }

    .catalog-page .catalog-hero-slide{
        width:min(calc(100% - 36px),760px);
        grid-template-columns:1fr;
        align-content:center;
        gap:24px;
        padding-top:42px;
        padding-bottom:112px;
    }

    .catalog-page .catalog-hero-cover{
        width:min(48vw,225px);
        max-height:none;
        justify-self:start;
    }

    .catalog-page .catalog-hero-bottom,
    .catalog-explore,
    .catalog-primary-section,
    .catalog-after-fold{
        width:min(calc(100% - 36px),760px);
    }

    .catalog-page .catalog-hero-bottom{
        bottom:74px;
    }

    .catalog-explore{
        margin-top:-52px;
        padding-bottom:76px;
    }
}

@media (max-width:640px){
    .catalog-page .catalog-hero-carousel{
        min-height:520px;
    }

    .catalog-page .catalog-hero-cover{
        display:none;
    }

    .catalog-page .catalog-hero-content h1{
        font-size:clamp(50px,17vw,74px);
    }

    .catalog-page .catalog-hero-bottom{
        bottom:48px;
    }

    .catalog-page .catalog-hero-actions{
        gap:10px;
    }

    .catalog-page .catalog-hero-btn{
        min-width:0;
        min-height:48px;
        padding:12px 16px;
        font-size:14px;
    }

    .catalog-explore{
        margin-top:-34px;
        padding-bottom:54px;
    }

    .catalog-explore-panel{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .catalog-explore-card{
        min-height:96px;
    }
}

/* ==========================================================
   FIX STICKY MULTIFILTROS - VISUAL SIN TRANSFORMAR
   ========================================================== */
.catalog-explore-sticky-placeholder{
    width:min(calc(100% - 64px),1320px);
    margin:0 auto;
    pointer-events:none;
}

.catalog-explore{
    transition:none !important;
}

.catalog-explore.is-sticky-fixed{
    position:fixed !important;
    top:var(--catalog-sticky-top,84px) !important;
    left:50% !important;
    width:min(calc(100% - 64px),1320px) !important;
    max-width:1320px !important;
    margin:0 !important;
    padding:0 !important;
    z-index:90 !important;
    transform:translateX(-50%) !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
}

.catalog-explore.is-sticky-fixed .catalog-explore-tabs{
    margin-bottom:14px !important;
}

.catalog-explore.is-sticky-fixed .catalog-explore-tab{
    min-height:48px !important;
    padding:11px 18px !important;
}

.catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(148px,1fr)) !important;
    gap:12px !important;
    overflow:visible !important;
    padding:0 !important;
}

.catalog-explore.is-sticky-fixed .catalog-explore-card{
    min-height:112px !important;
    padding:18px 12px !important;
    gap:12px !important;
}

.catalog-explore.is-sticky-fixed .catalog-explore-icon{
    width:42px !important;
    height:42px !important;
}

.catalog-explore-card.is-selected{
    background:
        linear-gradient(180deg,color-mix(in srgb,var(--explore-accent,#ff4d4d),transparent 76%),rgba(12,13,17,.94)) !important;
    border-color:color-mix(in srgb,var(--explore-accent,#ff4d4d),white 16%) !important;
}

.catalog-primary-section{
    scroll-margin-top:calc(var(--catalog-sticky-scroll-offset, 280px) + 18px) !important;
}

@media (max-width:980px){
    .catalog-explore-sticky-placeholder,
    .catalog-explore.is-sticky-fixed{
        width:min(calc(100% - 36px),760px) !important;
    }

    .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width:640px){
    .catalog-explore.is-sticky-fixed .catalog-explore-card{
        min-height:96px !important;
    }
}


/* ==========================================================
   AJUSTE PROFESIONAL FILTROS STICKY + BUSCADOR - 2026-05-22
   - Mantiene el bloque visualmente igual antes/después del sticky.
   - Limita paneles largos con scroll interno para que no tapen secciones.
   - Agrega buscador de filtros dinámico.
   - Deja visible el título "Populares recientes" tras cada autoscroll.
   ========================================================== */

.catalog-explore {
    overflow: visible !important;
}

.catalog-explore-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
}

.catalog-explore-controls .catalog-explore-tabs {
    margin-bottom: 0 !important;
}

.catalog-explore-search {
    min-height: 48px !important;
    width: min(280px, 100%) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 14px !important;
    color: rgba(255, 255, 255, .72) !important;
    background: rgba(8, 8, 10, .88) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .20) !important;
}

.catalog-explore-search:focus-within {
    border-color: rgba(255, 49, 71, .62) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .20), 0 0 0 3px rgba(255, 49, 71, .12) !important;
}

.catalog-explore-search span {
    flex: 0 0 auto !important;
    color: rgba(255, 255, 255, .62) !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.catalog-explore-search input {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    font: inherit !important;
    font-weight: 800 !important;
}

.catalog-explore-search input::placeholder {
    color: rgba(255, 255, 255, .48) !important;
}

/* Paneles largos: dos filas visibles aprox.; el resto se navega dentro del bloque. */
.catalog-explore-panel.is-active {
    max-height: min(252px, calc(100svh - var(--catalog-sticky-top, 84px) - 190px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 49, 71, .60) rgba(255, 255, 255, .08) !important;
    align-content: start !important;
}

.catalog-explore-panel.is-active::-webkit-scrollbar {
    width: 8px !important;
}

.catalog-explore-panel.is-active::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .06) !important;
    border-radius: 999px !important;
}

.catalog-explore-panel.is-active::-webkit-scrollbar-thumb {
    background: rgba(255, 49, 71, .65) !important;
    border-radius: 999px !important;
}

.catalog-explore-card[hidden] {
    display: none !important;
}

/* Sticky sin transformación visual. Solo cambia de contexto, no de apariencia. */
.catalog-explore.is-sticky-fixed {
    position: fixed !important;
    top: var(--catalog-sticky-top, 84px) !important;
    left: 50% !important;
    width: min(calc(100% - 64px), 1320px) !important;
    max-width: 1320px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 90 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.catalog-explore.is-sticky-fixed .catalog-explore-controls {
    margin-bottom: 12px !important;
}

.catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 12px !important;
    max-height: min(252px, calc(100svh - var(--catalog-sticky-top, 84px) - 190px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px !important;
}

.catalog-explore.is-sticky-fixed .catalog-explore-card {
    min-height: 108px !important;
    padding: 16px 12px !important;
    gap: 12px !important;
}

.catalog-primary-section {
    scroll-margin-top: calc(var(--catalog-sticky-scroll-offset, 330px) + 28px) !important;
}

@media (max-width: 980px) {
    .catalog-explore-controls {
        align-items: stretch !important;
    }

    .catalog-explore-search {
        flex: 1 1 220px !important;
    }

    .catalog-explore.is-sticky-fixed {
        width: min(calc(100% - 36px), 760px) !important;
    }

    .catalog-explore-panel.is-active,
    .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: min(338px, calc(100svh - var(--catalog-sticky-top, 84px) - 170px)) !important;
    }
}

@media (max-width: 640px) {
    .catalog-explore-controls {
        gap: 10px !important;
    }

    .catalog-explore-tabs {
        width: 100% !important;
    }

    .catalog-explore-tab {
        flex: 1 1 auto !important;
    }

    .catalog-explore-search {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    .catalog-explore-panel.is-active,
    .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active {
        max-height: min(316px, calc(100svh - var(--catalog-sticky-top, 84px) - 160px)) !important;
    }
}


/* ==========================================================
   MICROFIX FILTROS STICKY - BORDE SUPERIOR Y FOCUS INPUT
   ========================================================== */
.catalog-explore-panel.is-active,
.catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active {
    padding-top: 5px !important;
    padding-left: 2px !important;
    padding-right: 8px !important;
    margin-top: -1px !important;
}

.catalog-explore-card,
.catalog-explore-card.is-selected,
.catalog-explore-card:focus,
.catalog-explore-card:focus-visible {
    outline: none !important;
}

.catalog-explore-search,
.catalog-explore-search:focus,
.catalog-explore-search:focus-within,
.catalog-explore-search input,
.catalog-explore-search input:focus,
.catalog-explore-search input:focus-visible,
.catalog-explore-search input:active {
    outline: none !important;
    box-shadow: none !important;
}

.catalog-explore-search:focus-within {
    border-color: rgba(255, 49, 71, .62) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .20), 0 0 0 2px rgba(255, 49, 71, .16) !important;
}

.catalog-explore-search input {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* ==========================================================
   CATÁLOGO - ESQUINAS BISELADAS Sukimanga
   Ajuste visual: cortes diagonales sutiles en las 4 esquinas,
   menos pronunciados que la versión anterior.
   ========================================================== */
.catalog-page {
    --catalog-cut-sm: 4px;
    --catalog-cut-md: 6px;
    --catalog-cut-lg: 8px;
}

.catalog-page .catalog-hero-btn,
.catalog-page .catalog-explore-tab,
.catalog-page .catalog-filter-search,
.catalog-page .catalog-explore-search,
.catalog-page .catalog-explore-card,
.catalog-page .catalog-empty-state,
.catalog-page .filter-toggle,
.catalog-page .filter-menu,
.catalog-page .filter-search-input,
.catalog-page .filter-option-item,
.catalog-page .color-guide-box {
    border-radius: 0 !important;
}

.catalog-page .catalog-hero-btn,
.catalog-page .catalog-explore-tab,
.catalog-page .catalog-filter-search,
.catalog-page .catalog-explore-search,
.catalog-page .filter-toggle,
.catalog-page .filter-search-input {
    clip-path: polygon(
        var(--catalog-cut-sm) 0,
        calc(100% - var(--catalog-cut-sm)) 0,
        100% var(--catalog-cut-sm),
        100% calc(100% - var(--catalog-cut-sm)),
        calc(100% - var(--catalog-cut-sm)) 100%,
        var(--catalog-cut-sm) 100%,
        0 calc(100% - var(--catalog-cut-sm)),
        0 var(--catalog-cut-sm)
    ) !important;
}

.catalog-page .catalog-explore-card,
.catalog-page .catalog-empty-state,
.catalog-page .color-guide-box {
    clip-path: polygon(
        var(--catalog-cut-md) 0,
        calc(100% - var(--catalog-cut-md)) 0,
        100% var(--catalog-cut-md),
        100% calc(100% - var(--catalog-cut-md)),
        calc(100% - var(--catalog-cut-md)) 100%,
        var(--catalog-cut-md) 100%,
        0 calc(100% - var(--catalog-cut-md)),
        0 var(--catalog-cut-md)
    ) !important;
}

.catalog-page .filter-menu {
    clip-path: polygon(
        var(--catalog-cut-lg) 0,
        calc(100% - var(--catalog-cut-lg)) 0,
        100% var(--catalog-cut-lg),
        100% calc(100% - var(--catalog-cut-lg)),
        calc(100% - var(--catalog-cut-lg)) 100%,
        var(--catalog-cut-lg) 100%,
        0 calc(100% - var(--catalog-cut-lg)),
        0 var(--catalog-cut-lg)
    ) !important;
}

/* Elementos pequeños: menos redondeados, pero sin bisel para conservar lectura. */
.catalog-page .catalog-hero-kicker,
.catalog-page .catalog-hero-meta span,
.catalog-page .catalog-hero-dot,
.catalog-page .filter-selected-count {
    border-radius: 4px !important;
}

/* La portada destacada conserva borde suave para no deformar imágenes/covers. */
.catalog-page .catalog-hero-cover,
.catalog-page .catalog-hero-cover span {
    border-radius: 12px !important;
}

@media (max-width: 640px) {
    .catalog-page {
        --catalog-cut-sm: 3px;
        --catalog-cut-md: 5px;
        --catalog-cut-lg: 7px;
    }
}

/* ==========================================================
   MICROFIX - BORDE COMPLETO EN BOTÓN "EXPLORAR MÁS"
   Mantiene las esquinas actuales. Solo reemplaza el borde nativo
   del botón secundario por una silueta interna que sí dibuja las
   diagonales de las cuatro esquinas.
   ========================================================== */
.catalog-page .catalog-hero-btn-secondary {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .26) !important;
}

.catalog-page .catalog-hero-btn-secondary::before,
.catalog-page .catalog-hero-btn-secondary::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    clip-path: polygon(
        var(--catalog-cut-sm) 0,
        calc(100% - var(--catalog-cut-sm)) 0,
        100% var(--catalog-cut-sm),
        100% calc(100% - var(--catalog-cut-sm)),
        calc(100% - var(--catalog-cut-sm)) 100%,
        var(--catalog-cut-sm) 100%,
        0 calc(100% - var(--catalog-cut-sm)),
        0 var(--catalog-cut-sm)
    ) !important;
}

.catalog-page .catalog-hero-btn-secondary::before {
    inset: 0 !important;
    z-index: -2 !important;
    background: rgba(255, 255, 255, .42) !important;
}

.catalog-page .catalog-hero-btn-secondary::after {
    inset: 1px !important;
    z-index: -1 !important;
    background: rgba(15, 15, 18, .54) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.catalog-page .catalog-hero-btn-secondary:hover::before,
.catalog-page .catalog-hero-btn-secondary:focus-visible::before {
    background: rgba(255, 255, 255, .58) !important;
}

/* ==========================================================
   MICROFIX - BORDE COMPLETO EN TARJETAS DE FILTROS
   Mantiene el mismo bisel/corte actual. Solo reemplaza el borde
   nativo por una silueta interna para que las esquinas diagonales
   también tengan borde visible.
   ========================================================== */
.catalog-page .catalog-explore-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .22) !important;
}

.catalog-page .catalog-explore-card::before,
.catalog-page .catalog-explore-card::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    clip-path: polygon(
        var(--catalog-cut-md) 0,
        calc(100% - var(--catalog-cut-md)) 0,
        100% var(--catalog-cut-md),
        100% calc(100% - var(--catalog-cut-md)),
        calc(100% - var(--catalog-cut-md)) 100%,
        var(--catalog-cut-md) 100%,
        0 calc(100% - var(--catalog-cut-md)),
        0 var(--catalog-cut-md)
    ) !important;
}

.catalog-page .catalog-explore-card::before {
    inset: 0 !important;
    z-index: -2 !important;
    background: rgba(255, 255, 255, .11) !important;
}

.catalog-page .catalog-explore-card::after {
    inset: 1px !important;
    z-index: -1 !important;
    background: linear-gradient(180deg, rgba(29, 30, 36, .84), rgba(12, 13, 17, .92)) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.catalog-page .catalog-explore-card:hover::before,
.catalog-page .catalog-explore-card.is-selected::before {
    background: color-mix(in srgb, var(--explore-accent, #ff4d4d), white 12%) !important;
}

.catalog-page .catalog-explore-card.is-selected::after {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--explore-accent, #ff4d4d), transparent 76%),
        rgba(12, 13, 17, .94)
    ) !important;
}

.catalog-page .catalog-explore-card:hover,
.catalog-page .catalog-explore-card.is-selected {
    border: 0 !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .32),
        0 0 26px color-mix(in srgb, var(--explore-accent, #ff4d4d), transparent 72%) !important;
}

/* ==========================================================
   FONT ELEGANTE BOTONES / FILTROS - SIN NEGRITA
   Solo tipografía. No modifica bordes, diagonales ni esquinas.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500&display=swap');

.catalog-page .catalog-hero-btn,
.catalog-page .catalog-explore-tab,
.catalog-page .catalog-explore-card,
.catalog-page .catalog-explore-search input,
.catalog-page .filter-toggle,
.catalog-page .filter-option-item,
.catalog-page .catalog-hero-meta span {
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: .035em !important;
}

.catalog-page .catalog-hero-btn strong,
.catalog-page .catalog-explore-tab strong,
.catalog-page .catalog-explore-card strong,
.catalog-page .filter-toggle strong,
.catalog-page .filter-option-item strong {
    font-weight: 500 !important;
}

/* ==========================================================
   FIX VISUAL SELECTED = HOVER
   Mantiene exactamente el mismo efecto visual del hover
   cuando el botón queda seleccionado/activo.
   ========================================================== */

.catalog-page .catalog-explore-card.is-selected::before {
    background: color-mix(in srgb, var(--explore-accent, #ff4d4d), white 12%) !important;
}

.catalog-page .catalog-explore-card.is-selected::after {
    background: linear-gradient(180deg, rgba(29, 30, 36, .84), rgba(12, 13, 17, .92)) !important;
}

.catalog-page .catalog-explore-card.is-selected {
    transform: translateY(-3px) !important;
    border: 0 !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .32),
        0 0 26px color-mix(in srgb, var(--explore-accent, #ff4d4d), transparent 72%) !important;
}

/* Elimina el overlay rosado/fucsia actual */
.catalog-explore-card.is-selected {
    background: transparent !important;
    border-color: transparent !important;
}

/* ==========================================================
   FILTROS COMO BOTÓN PLANO + SELECTED = HOVER
   Aplica a Categorías, Demografías y Géneros.
   Quita relieve/sombreado blanco de las cajas y deja el
   seleccionado con el mismo efecto visual del hover.
   ========================================================== */

.catalog-page .catalog-explore-card,
.catalog-page .catalog-explore-card:hover,
.catalog-page .catalog-explore-card.is-selected {
    border: 0 !important;
    background: transparent !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.catalog-page .catalog-explore-card::before {
    background: rgba(255, 255, 255, .10) !important;
}

.catalog-page .catalog-explore-card::after {
    background: rgba(8, 8, 10, .88) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.catalog-page .catalog-explore-card:hover,
.catalog-page .catalog-explore-card.is-selected {
    transform: translateY(-3px) !important;
    box-shadow:
        0 16px 32px rgba(0, 0, 0, .34),
        0 0 22px color-mix(in srgb, var(--explore-accent, #ff4d4d), transparent 76%) !important;
}

.catalog-page .catalog-explore-card:hover::before,
.catalog-page .catalog-explore-card.is-selected::before {
    background: color-mix(in srgb, var(--explore-accent, #ff4d4d), white 12%) !important;
}

.catalog-page .catalog-explore-card:hover::after,
.catalog-page .catalog-explore-card.is-selected::after {
    background: rgba(8, 8, 10, .88) !important;
}

.catalog-page .catalog-explore-card .catalog-explore-icon,
.catalog-page .catalog-explore-card span,
.catalog-page .catalog-explore-card strong {
    position: relative !important;
    z-index: 1 !important;
}

/* Asegura que ningún filtro seleccionado use el overlay de color lleno. */
.catalog-page .catalog-explore-card.is-selected {
    background: transparent !important;
    border-color: transparent !important;
}

/* ==========================================================
   MICROFIX ALINEACIÓN BUSCADOR EN FILTROS STICKY
   Corrige que el buscador quede unos px más abajo que los tabs
   al autoscrollear. No toca estilos de tarjetas ni bordes.
   ========================================================== */

.catalog-page .catalog-explore-controls {
    align-items: flex-start !important;
}

.catalog-page .catalog-explore-search {
    height: 48px !important;
    min-height: 48px !important;
    align-self: flex-start !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
}

.catalog-page .catalog-explore-search input {
    height: 46px !important;
    line-height: 46px !important;
}

.catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-controls {
    align-items: flex-start !important;
}

.catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-search {
    align-self: flex-start !important;
    margin-top: 0 !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================
   MICROFIX BORDES COMPLETOS EN TABS ACTIVOS
   Categorías / Demografías / Géneros
   Corrige que el borde rojo no pinte las diagonales.
   ========================================================== */

.catalog-page .catalog-explore-tab {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
}

.catalog-page .catalog-explore-tab::before,
.catalog-page .catalog-explore-tab::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;

    clip-path: polygon(
        var(--catalog-cut-sm) 0,
        calc(100% - var(--catalog-cut-sm)) 0,
        100% var(--catalog-cut-sm),
        100% calc(100% - var(--catalog-cut-sm)),
        calc(100% - var(--catalog-cut-sm)) 100%,
        var(--catalog-cut-sm) 100%,
        0 calc(100% - var(--catalog-cut-sm)),
        0 var(--catalog-cut-sm)
    ) !important;
}

.catalog-page .catalog-explore-tab::before {
    z-index: -2 !important;
    background: rgba(255,255,255,.10) !important;
}

.catalog-page .catalog-explore-tab::after {
    inset: 1px !important;
    z-index: -1 !important;
    background: rgba(8,8,10,.88) !important;
}

.catalog-page .catalog-explore-tab:hover::before,
.catalog-page .catalog-explore-tab.is-active::before {
    background: rgba(255,49,71,.68) !important;
}

.catalog-page .catalog-explore-tab:hover::after,
.catalog-page .catalog-explore-tab.is-active::after {
    background: rgba(40,10,16,.92) !important;
}

.catalog-page .catalog-explore-tab:hover,
.catalog-page .catalog-explore-tab.is-active {
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 14px 30px rgba(0,0,0,.30),
        0 0 18px rgba(255,49,71,.18) !important;
}

/* ==========================================================
   REVEAL FILTROS CATÁLOGO
   Replica el efecto de entrada de las cards/secciones en:
   título de filtros, tabs, buscador y botones de filtros.
   ========================================================== */

.catalog-page .catalog-explore-head,
.catalog-page .catalog-explore-tab,
.catalog-page .catalog-explore-search,
.catalog-page .catalog-explore-card {
    opacity: 0;
    transform: translateX(-26px);
    filter: blur(8px);
}

.catalog-page .catalog-explore-head.is-visible,
.catalog-page .catalog-explore-tab.is-visible,
.catalog-page .catalog-explore-search.is-visible,
.catalog-page .catalog-explore-card.is-visible {
    animation: catalogCardRevealFromLeft .52s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc((var(--catalog-filter-index, 0)) * 60ms);
}

/* Si el panel no está activo, no debe reservar animación ni dejar elementos fantasma. */
.catalog-page .catalog-explore-panel:not(.is-active) .catalog-explore-card {
    animation: none !important;
}

/* Al cambiar de grupo, los nuevos filtros entran con el mismo reveal. */
.catalog-page .catalog-explore-panel.is-active .catalog-explore-card:not([hidden]).is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-page .catalog-explore-head,
    .catalog-page .catalog-explore-tab,
    .catalog-page .catalog-explore-search,
    .catalog-page .catalog-explore-card {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none !important;
    }
}

/* ==========================================================
   MICROFIX REVEAL ORDENADO FILTROS GRANDES
   Secuencia: título -> tabs rojos -> buscador -> tarjetas grandes.
   Las tarjetas quedan ocultas hasta que les toca aparecer.
   ========================================================== */

.catalog-page .catalog-explore-head,
.catalog-page .catalog-explore-tab,
.catalog-page .catalog-explore-search,
.catalog-page .catalog-explore-card {
    opacity: 0;
    transform: translateX(-26px);
    filter: blur(8px);
}

.catalog-page .catalog-explore-head.is-visible,
.catalog-page .catalog-explore-tab.is-visible,
.catalog-page .catalog-explore-search.is-visible,
.catalog-page .catalog-explore-card.is-visible {
    animation: catalogCardRevealFromLeft .52s cubic-bezier(.22, 1, .36, 1) forwards;
}

.catalog-page .catalog-explore-head.is-visible,
.catalog-page .catalog-explore-tab.is-visible,
.catalog-page .catalog-explore-search.is-visible {
    animation-delay: calc((var(--catalog-filter-index, 0)) * 70ms);
}

.catalog-page .catalog-explore-card:not(.is-visible) {
    pointer-events: none;
}

.catalog-page .catalog-explore-card[hidden] {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-page .catalog-explore-head,
    .catalog-page .catalog-explore-tab,
    .catalog-page .catalog-explore-search,
    .catalog-page .catalog-explore-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}


/* ==========================================================
   HERO TITLE - Brush japonés cinematográfico
   Replica el bloque del demo titulo_brush_japones_v3 dentro del catálogo.
   ========================================================== */
.catalog-page .catalog-hero-content{
    max-width:760px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    padding-top:22px;
}

.catalog-page .catalog-hero-meta{
    order:-1;
    max-height:none;
    overflow:visible;
    margin:0 0 14px;
    gap:10px;
}

.catalog-page .catalog-hero-meta span{
    min-height:26px;
    padding:5px 13px;
    border-radius:4px !important;
    background:rgba(255,255,255,.10);
    color:rgba(255,255,255,.92);
    font-size:12px;
    font-weight:800;
    letter-spacing:.02em;
    text-shadow:0 4px 10px rgba(0,0,0,.55);
}

.catalog-page .catalog-hero-title-wrap{
    position:relative;
    width:min(760px, 100%);
    margin:0 0 20px;
    isolation:isolate;
}

.catalog-page .catalog-hero-title-wrap::before{
    content:"";
    position:absolute;
    left:22px;
    right:90px;
    bottom:44px;
    height:19px;
    z-index:-1;
    background:linear-gradient(90deg, transparent 0%, rgba(123,7,17,.78) 12%, rgba(255,43,61,.82) 56%, rgba(92,6,14,.64) 84%, transparent 100%);
    transform:skewX(-18deg) rotate(-1.5deg);
    filter:blur(.25px) drop-shadow(0 0 16px rgba(255,26,44,.22));
    clip-path:polygon(0 44%, 7% 20%, 18% 38%, 29% 24%, 42% 38%, 56% 18%, 67% 42%, 82% 26%, 100% 53%, 83% 74%, 70% 62%, 58% 84%, 43% 64%, 31% 82%, 18% 62%, 7% 78%);
}

.catalog-page .catalog-hero-title{
    margin:0 !important;
    max-width:760px !important;
    display:block !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:unset !important;
    color:#fff8ea !important;
    font-family:"Kaushan Script", "Brush Script MT", cursive !important;
    font-weight:400 !important;
    letter-spacing:-.045em !important;
    line-height:.82 !important;
    text-shadow:none !important;
    filter:drop-shadow(10px 12px 0 rgba(0,0,0,.72)) drop-shadow(0 12px 18px rgba(0,0,0,.55));
    transform:none !important;
}

.catalog-page .catalog-hero-title::after{
    display:none !important;
    content:none !important;
}

.catalog-page .catalog-hero-title .catalog-hero-title-line{
    display:block;
    white-space:nowrap;
    -webkit-text-stroke:.25px rgba(255,255,255,.18);
    transform-origin:left center;
}

.catalog-page .catalog-hero-title .catalog-hero-title-line:first-child{
    font-size:clamp(70px, 7.5vw, 118px);
    transform:rotate(-1.6deg) translateX(-3px);
}

.catalog-page .catalog-hero-title .catalog-hero-title-line:last-child{
    font-size:clamp(80px, 8.5vw, 136px);
    margin-top:-16px;
    transform:rotate(-2.2deg) translateX(6px);
}

.catalog-page .catalog-hero-title-jp{
    margin:10px 0 0 47px;
    display:flex;
    align-items:center;
    gap:16px;
    font-family:"Noto Sans JP", system-ui, sans-serif;
    color:rgba(255,255,255,.78);
    font-size:clamp(15px, 1.25vw, 20px);
    font-weight:700;
    letter-spacing:.12em;
    text-shadow:0 4px 10px rgba(0,0,0,.70);
}

.catalog-page .catalog-hero-title-jp::after{
    content:"";
    width:74px;
    height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,.58), transparent);
}

.catalog-page .catalog-hero-content p{
    margin-top:0;
}

@media (max-width:900px){
    .catalog-page .catalog-hero-title .catalog-hero-title-line:first-child{
        font-size:clamp(58px, 13vw, 96px);
    }
    .catalog-page .catalog-hero-title .catalog-hero-title-line:last-child{
        font-size:clamp(66px, 14vw, 108px);
    }
    .catalog-page .catalog-hero-title-wrap::before{
        left:12px;
        right:36px;
        bottom:38px;
    }
}

@media (max-width:640px){
    .catalog-page .catalog-hero-title-jp{
        margin-left:10px;
        font-size:14px;
    }
    .catalog-page .catalog-hero-title .catalog-hero-title-line:first-child{
        font-size:clamp(48px, 16vw, 74px);
    }
    .catalog-page .catalog-hero-title .catalog-hero-title-line:last-child{
        font-size:clamp(54px, 17vw, 84px);
        margin-top:-10px;
    }
}

/* ==========================================================
   AJUSTE V3.1 - Alineación título brush del hero
   Mantiene el estilo del demo, pero lo ordena dentro del catálogo.
   ========================================================== */
.catalog-page .catalog-hero-content{
    width:min(100%, 760px) !important;
    max-width:760px !important;
    padding-top:clamp(12px, 2.4svh, 28px);
}

.catalog-page .catalog-hero-meta{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 0 24px 0 !important;
    padding-left:0 !important;
    transform:none !important;
    position:relative !important;
    z-index:4 !important;
}

.catalog-page .catalog-hero-title-wrap{
    width:min(760px, 100%) !important;
    margin:0 0 24px 0 !important;
    padding:0 !important;
    position:relative !important;
    z-index:2 !important;
    isolation:isolate !important;
}

.catalog-page .catalog-hero-title-wrap::before{
    display:none !important;
    content:none !important;
}

.catalog-page .catalog-hero-title{
    position:relative !important;
    width:fit-content !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:unset !important;
    color:#fff8ea !important;
    font-family:"Kaushan Script", "Brush Script MT", cursive !important;
    font-weight:400 !important;
    letter-spacing:-.045em !important;
    line-height:.82 !important;
    text-shadow:none !important;
    filter:drop-shadow(10px 12px 0 rgba(0,0,0,.72)) drop-shadow(0 12px 18px rgba(0,0,0,.55)) !important;
    transform:none !important;
}

.catalog-page .catalog-hero-title::before{
    content:"" !important;
    position:absolute !important;
    left:28px !important;
    right:110px !important;
    bottom:12px !important;
    height:19px !important;
    z-index:-1 !important;
    background:linear-gradient(90deg, transparent 0%, rgba(123,7,17,.82) 12%, rgba(255,43,61,.78) 56%, rgba(92,6,14,.62) 84%, transparent 100%) !important;
    transform:skewX(-18deg) rotate(-1.5deg) !important;
    filter:blur(.3px) drop-shadow(0 0 16px rgba(255,26,44,.20)) !important;
    clip-path:polygon(0 44%, 7% 20%, 18% 38%, 29% 24%, 42% 38%, 56% 18%, 67% 42%, 82% 26%, 100% 53%, 83% 74%, 70% 62%, 58% 84%, 43% 64%, 31% 82%, 18% 62%, 7% 78%) !important;
}

.catalog-page .catalog-hero-title::after{
    display:none !important;
    content:none !important;
}

.catalog-page .catalog-hero-title .catalog-hero-title-line{
    display:block !important;
    white-space:nowrap !important;
    transform-origin:left center !important;
    -webkit-text-stroke:.25px rgba(255,255,255,.18) !important;
}

.catalog-page .catalog-hero-title .catalog-hero-title-line:first-child{
    font-size:clamp(72px, 9.2vw, 126px) !important;
    margin-top:0 !important;
    transform:rotate(-1.6deg) translateX(-3px) !important;
}

.catalog-page .catalog-hero-title .catalog-hero-title-line:last-child{
    font-size:clamp(82px, 10.6vw, 146px) !important;
    margin-top:-18px !important;
    transform:rotate(-2.2deg) translateX(6px) !important;
}

/* Cuando el título tiene una sola línea, evita que choque con las etiquetas. */
.catalog-page .catalog-hero-title .catalog-hero-title-line:only-child{
    font-size:clamp(82px, 10vw, 132px) !important;
    margin-top:0 !important;
    transform:rotate(-1.8deg) translateX(-3px) !important;
}

.catalog-page .catalog-hero-title:has(.catalog-hero-title-line:only-child)::before{
    left:28px !important;
    right:20px !important;
    bottom:7px !important;
}

.catalog-page .catalog-hero-title-jp{
    margin:14px 0 0 47px !important;
    max-width:680px !important;
    display:flex !important;
    align-items:center !important;
    gap:16px !important;
    font-family:"Noto Sans JP", system-ui, sans-serif !important;
    color:rgba(255,255,255,.78) !important;
    font-size:clamp(15px, 1.25vw, 20px) !important;
    font-weight:700 !important;
    letter-spacing:.12em !important;
    line-height:1.35 !important;
    text-shadow:0 4px 10px rgba(0,0,0,.70) !important;
}

.catalog-page .catalog-hero-title-jp::after{
    content:"" !important;
    flex:0 0 74px !important;
    width:74px !important;
    height:1px !important;
    background:linear-gradient(90deg, rgba(255,255,255,.58), transparent) !important;
}

.catalog-page .catalog-hero-content > p{
    margin-top:0 !important;
    margin-left:0 !important;
    max-width:560px !important;
}

.catalog-page .catalog-hero-actions{
    margin-left:0 !important;
}

@media (max-width:1100px){
    .catalog-page .catalog-hero-content{
        max-width:650px !important;
    }
    .catalog-page .catalog-hero-title .catalog-hero-title-line:first-child{
        font-size:clamp(66px, 8.6vw, 108px) !important;
    }
    .catalog-page .catalog-hero-title .catalog-hero-title-line:last-child{
        font-size:clamp(74px, 9.6vw, 122px) !important;
    }
    .catalog-page .catalog-hero-title .catalog-hero-title-line:only-child{
        font-size:clamp(76px, 9.2vw, 118px) !important;
    }
}

@media (max-width:900px){
    .catalog-page .catalog-hero-content{
        padding-top:0 !important;
    }
    .catalog-page .catalog-hero-meta{
        margin-bottom:18px !important;
    }
    .catalog-page .catalog-hero-title-jp{
        margin-left:10px !important;
        font-size:14px !important;
    }
    .catalog-page .catalog-hero-title .catalog-hero-title-line:first-child{
        font-size:clamp(54px, 13vw, 92px) !important;
    }
    .catalog-page .catalog-hero-title .catalog-hero-title-line:last-child{
        font-size:clamp(62px, 14vw, 104px) !important;
    }
    .catalog-page .catalog-hero-title .catalog-hero-title-line:only-child{
        font-size:clamp(64px, 15vw, 104px) !important;
    }
    .catalog-page .catalog-hero-title::before{
        left:12px !important;
        right:36px !important;
        bottom:8px !important;
    }
}

/* ==========================================================
   CATÁLOGO - RETÍCULA FINAL ALINEADA
   Objetivo: todos los bloques principales comparten el mismo
   margen izquierdo/derecho: header, hero, portada y exploración.
   ========================================================== */
body.catalog-page {
    --catalog-shell-max: 1200px;
    --catalog-shell-gutter: clamp(22px, 4.4vw, 76px);
    --catalog-shell: min(calc(100vw - (var(--catalog-shell-gutter) * 2)), var(--catalog-shell-max));
}

/* Header alineado con la misma retícula del catálogo */
body.catalog-page .site-header .header-inner,
.catalog-page .site-header .header-inner {
    width: var(--catalog-shell) !important;
    max-width: var(--catalog-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero: la slide completa usa exactamente el mismo ancho que la retícula */
.catalog-page .catalog-hero-slide {
    width: var(--catalog-shell) !important;
    max-width: var(--catalog-shell-max) !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important;
    gap: clamp(42px, 6.2vw, 92px) !important;
    padding-top: clamp(38px, 5.8svh, 72px) !important;
    padding-bottom: clamp(108px, 13svh, 142px) !important;
}

.catalog-page .catalog-hero-content {
    width: 100% !important;
    max-width: 620px !important;
    align-self: center !important;
}

/* Separación limpia entre chips, título, japonés y descripción */
.catalog-page .catalog-hero-meta {
    margin-bottom: 18px !important;
    gap: 9px !important;
}

.catalog-page .catalog-hero-meta span {
    border-radius: 4px !important;
    min-height: 28px !important;
    padding: 6px 13px !important;
    font-size: 12px !important;
}

.catalog-page .catalog-hero-title-wrap {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    position: relative !important;
}

.catalog-page .catalog-hero-content h1,
.catalog-page .catalog-hero-title {
    max-width: 560px !important;
    margin: 0 !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    font-size: clamp(82px, 8.2vw, 126px) !important;
    line-height: .72 !important;
    letter-spacing: -.035em !important;
    transform: translateX(-5px) !important;
}

.catalog-page .catalog-hero-title-line {
    display: block !important;
}

.catalog-page .catalog-hero-title-jp {
    margin-top: 10px !important;
    padding-left: 8px !important;
    max-width: 420px !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(17px, 1.35vw, 22px) !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    color: rgba(255,255,255,.82) !important;
}

.catalog-page .catalog-hero-content p {
    max-width: 460px !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    font-size: clamp(16px, 1.15vw, 18px) !important;
}

.catalog-page .catalog-hero-actions {
    gap: 18px !important;
}

/* Portada: su borde derecho queda pegado al mismo margen derecho imaginario */
.catalog-page .catalog-hero-cover {
    width: min(100%, 320px) !important;
    justify-self: end !important;
    align-self: center !important;
}

/* Dots del carrusel también comparten el mismo margen */
.catalog-page .catalog-hero-bottom {
    width: var(--catalog-shell) !important;
    max-width: var(--catalog-shell-max) !important;
}

/* Exploración: mismo ancho y mismo margen que el hero */
.catalog-explore,
.catalog-explore.is-sticky-fixed {
    width: var(--catalog-shell) !important;
    max-width: var(--catalog-shell-max) !important;
}

.catalog-explore {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: clamp(-96px, -10svh, -68px) !important;
}

.catalog-explore-head,
.catalog-explore-controls,
.catalog-explore-panel.is-active {
    width: 100% !important;
}

.catalog-explore-panel.is-active,
.catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.catalog-explore-card {
    min-width: 0 !important;
}

@media (max-width: 1100px) {
    body.catalog-page {
        --catalog-shell-gutter: clamp(20px, 5vw, 56px);
    }

    .catalog-page .catalog-hero-slide {
        grid-template-columns: minmax(0, 1fr) minmax(245px, 290px) !important;
        gap: clamp(28px, 4vw, 52px) !important;
    }

    .catalog-page .catalog-hero-content h1,
    .catalog-page .catalog-hero-title {
        font-size: clamp(70px, 9vw, 104px) !important;
    }

    .catalog-explore-panel.is-active,
    .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body.catalog-page {
        --catalog-shell-gutter: 18px;
    }

    .catalog-page .catalog-hero-slide {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        width: var(--catalog-shell) !important;
        min-height: auto !important;
        margin: 0 auto !important;
        grid-template-columns: 1fr !important;
        padding-top: 42px !important;
        padding-bottom: 34px !important;
    }

    .catalog-page .catalog-hero-slide.is-active {
        transform: none !important;
    }

    .catalog-page .catalog-hero-cover {
        width: min(260px, 76vw) !important;
        justify-self: start !important;
    }

    .catalog-page .catalog-hero-content h1,
    .catalog-page .catalog-hero-title {
        font-size: clamp(64px, 19vw, 88px) !important;
    }

    .catalog-explore {
        margin-top: 0 !important;
    }

    .catalog-explore-panel.is-active,
    .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================
   CATÁLOGO - ALINEACIÓN V5
   Ajusta la retícula final sin angostar tanto el contenido y
   alinea también Populares, Últimos actualizados y Footer.
   ========================================================== */
body.catalog-page {
    --catalog-shell-max: 1320px !important;
    --catalog-shell-gutter: clamp(20px, 3.8vw, 64px) !important;
    --catalog-shell: min(calc(100vw - (var(--catalog-shell-gutter) * 2)), var(--catalog-shell-max)) !important;
}

/* Misma caja para todas las zonas visibles del catálogo */
body.catalog-page .site-header .header-inner,
.catalog-page .catalog-hero-slide,
.catalog-page .catalog-hero-bottom,
.catalog-explore,
.catalog-explore.is-sticky-fixed,
.catalog-page .publication-section,
body.catalog-page .site-footer .footer-inner,
body.catalog-page .footer-panel-content-wrap {
    width: var(--catalog-shell) !important;
    max-width: var(--catalog-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Evita que el ancho nuevo achique demasiado el hero */
.catalog-page .catalog-hero-slide {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
    gap: clamp(46px, 6vw, 104px) !important;
}

.catalog-page .catalog-hero-content {
    max-width: 670px !important;
}

.catalog-page .catalog-hero-content h1,
.catalog-page .catalog-hero-title {
    max-width: 620px !important;
}

.catalog-page .catalog-hero-cover {
    width: min(100%, 340px) !important;
    justify-self: end !important;
}

/* Secciones inferiores alineadas al mismo margen del hero */
.catalog-page .publication-section {
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 64px !important;
}

.catalog-page .publication-section .section-head {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.catalog-page .publication-section h2 {
    margin-left: 0 !important;
}

.catalog-page .popular-grid,
.catalog-page .latest-grid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Footer exactamente dentro de la misma retícula */
body.catalog-page .site-footer {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.catalog-page .site-footer .footer-inner {
    box-sizing: border-box !important;
}

body.catalog-page .footer-interactive-bar {
    width: 100% !important;
}

body.catalog-page .footer-panel-content-wrap {
    box-sizing: border-box !important;
}

body.catalog-page .footer-panel-container {
    max-width: min(1100px, 100%) !important;
}

@media (max-width: 1100px) {
    body.catalog-page {
        --catalog-shell-gutter: clamp(18px, 4.6vw, 48px) !important;
    }

    .catalog-page .catalog-hero-slide {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) !important;
        gap: clamp(30px, 4vw, 58px) !important;
    }

    .catalog-page .catalog-hero-content {
        max-width: 620px !important;
    }
}

@media (max-width: 760px) {
    body.catalog-page {
        --catalog-shell-gutter: 18px !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .publication-section,
    body.catalog-page .site-footer .footer-inner,
    body.catalog-page .footer-panel-content-wrap {
        width: var(--catalog-shell) !important;
        max-width: var(--catalog-shell) !important;
    }
}

/* ==========================================================
   MICROFIX - SEPARACIÓN TAGS SOBRE EL TÍTULO DEL HERO
   Sube visualmente Manga / Shonen / Acción para que respiren
   mejor y no choquen con el título brush.
   ========================================================== */

.catalog-page .catalog-hero-meta {
    transform: translateY(-12px) !important;
    margin-bottom: 18px !important;
    position: relative !important;
    z-index: 6 !important;
}

.catalog-page .catalog-hero-title-wrap {
    position: relative !important;
    z-index: 5 !important;
}

@media (max-width: 760px) {
    .catalog-page .catalog-hero-meta {
        transform: translateY(-7px) !important;
        margin-bottom: 16px !important;
    }
}

/* ==========================================================
   SUKIMANGA MOBILE RESPONSIVE FINAL
   Objetivo: el catálogo debe leerse limpio en celular.
   - Desactiva sticky móvil de filtros.
   - Evita superposición hero/explorar.
   - Oculta portada del slider solo en móvil.
   - Compacta filtros y cards.
   ========================================================== */

@media (max-width: 768px) {
    html,
    body,
    body.catalog-page,
    .catalog-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.catalog-page {
        --catalog-shell-gutter: 14px !important;
        --catalog-shell-max: 100% !important;
        --catalog-shell: calc(100vw - 28px) !important;
    }

    body.catalog-page .main-content,
    .catalog-page .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .catalog-first-fold {
        min-height: auto !important;
        height: auto !important;
        display: block !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* HERO EN FLUJO NORMAL */
    .catalog-page .catalog-hero-carousel {
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .catalog-page .catalog-hero-track {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .catalog-page .catalog-hero-slide {
        display: none !important;
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: var(--catalog-shell) !important;
        max-width: var(--catalog-shell) !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 24px 0 18px !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }

    .catalog-page .catalog-hero-slide.is-active {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .catalog-page .catalog-hero-backdrop,
    .catalog-page .catalog-hero-bottom,
    .catalog-page .catalog-hero-dots,
    .catalog-page .catalog-hero-arrows,
    .catalog-page .catalog-hero-cover {
        display: none !important;
    }

    .catalog-page .catalog-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
        overflow: visible !important;
    }

    /* Tags encima del título, sin chocar */
    .catalog-page .catalog-hero-meta {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 5 !important;
    }

    .catalog-page .catalog-hero-meta span {
        min-height: 22px !important;
        height: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 4px 8px !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
    }

    .catalog-page .catalog-hero-title-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        transform: none !important;
        position: relative !important;
        z-index: 2 !important;
        overflow: visible !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        white-space: normal !important;
        transform: none !important;
        line-height: .84 !important;
        letter-spacing: -.035em !important;
        font-size: clamp(48px, 17vw, 72px) !important;
        filter: drop-shadow(6px 8px 0 rgba(0,0,0,.68)) drop-shadow(0 8px 12px rgba(0,0,0,.45)) !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
    }

    .catalog-page .catalog-hero-title::before {
        left: 8px !important;
        right: 24px !important;
        bottom: 4px !important;
        height: 10px !important;
        opacity: .85 !important;
    }

    .catalog-page .catalog-hero-title .catalog-hero-title-line,
    .catalog-page .catalog-hero-title-line {
        display: block !important;
        white-space: normal !important;
        max-width: 100% !important;
        transform: rotate(-1.3deg) translateX(0) !important;
        margin: 0 !important;
        font-size: inherit !important;
        line-height: .84 !important;
    }

    .catalog-page .catalog-hero-title .catalog-hero-title-line + .catalog-hero-title-line {
        margin-top: -4px !important;
    }

    .catalog-page .catalog-hero-title-jp {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        letter-spacing: .08em !important;
        white-space: normal !important;
        transform: none !important;
    }

    .catalog-page .catalog-hero-title-jp::after {
        display: none !important;
    }

    .catalog-page .catalog-hero-content > p,
    .catalog-page .catalog-hero-content p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: rgba(255,255,255,.82) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .catalog-page .catalog-hero-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 3 !important;
    }

    .catalog-page .catalog-hero-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 8px 10px !important;
        font-size: 12.5px !important;
        line-height: 1 !important;
        gap: 8px !important;
    }

    /* EXPLORAR: no sticky en mobile */
    .catalog-explore,
    .catalog-explore.is-sticky-fixed {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: var(--catalog-shell) !important;
        max-width: var(--catalog-shell) !important;
        margin: 0 auto 28px !important;
        padding: 0 !important;
        z-index: 4 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .catalog-explore-sticky-placeholder {
        display: none !important;
        height: 0 !important;
    }

    .catalog-explore-head {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    .catalog-page .catalog-explore h2 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: clamp(22px, 7.2vw, 30px) !important;
        line-height: 1.05 !important;
        letter-spacing: -.01em !important;
    }

    .catalog-explore-controls,
    .catalog-explore.is-sticky-fixed .catalog-explore-controls {
        width: 100% !important;
        display: block !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    .catalog-explore-tabs {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    .catalog-explore-tab,
    .catalog-explore.is-sticky-fixed .catalog-explore-tab {
        width: 100% !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 6px 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .catalog-explore-search,
    .catalog-explore.is-sticky-fixed .catalog-explore-search {
        width: 100% !important;
        min-height: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        transform: none !important;
    }

    .catalog-explore-search input {
        height: 36px !important;
        line-height: 36px !important;
        font-size: 12.5px !important;
    }

    .catalog-explore-panel.is-active,
    .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        align-content: start !important;
    }

    .catalog-explore-card,
    .catalog-explore.is-sticky-fixed .catalog-explore-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 64px !important;
        height: 64px !important;
        padding: 7px 6px !important;
        gap: 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .catalog-explore-card:hover,
    .catalog-explore-card.is-selected {
        transform: none !important;
    }

    .catalog-explore-icon,
    .catalog-explore.is-sticky-fixed .catalog-explore-icon {
        width: 23px !important;
        height: 23px !important;
        flex: 0 0 23px !important;
    }

    .catalog-explore-card span,
    .catalog-explore-card strong {
        max-width: 100% !important;
        font-size: 12px !important;
        line-height: 1.05 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* SECCIONES POSTERIORES */
    .catalog-primary-section,
    .catalog-after-fold,
    .catalog-page .publication-section,
    body.catalog-page .site-footer .footer-inner,
    body.catalog-page .footer-panel-content-wrap {
        width: var(--catalog-shell) !important;
        max-width: var(--catalog-shell) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .catalog-page .publication-section {
        margin-bottom: 36px !important;
    }

    .catalog-page .section-head {
        margin-bottom: 14px !important;
    }

    .catalog-page .publication-section h2,
    .catalog-page h2 {
        margin: 0 0 16px !important;
        padding-left: 12px !important;
        border-left: 4px solid #ff4d4d !important;
        font-size: clamp(24px, 8vw, 34px) !important;
        line-height: 1.05 !important;
    }

    .catalog-page .popular-grid,
    .catalog-page .latest-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        column-gap: 12px !important;
        overflow: visible !important;
    }

    .catalog-page .popular-grid .publication-card,
    .catalog-page .latest-grid .publication-card,
    .catalog-page .popular-grid .publication-card:not(:first-child),
    .catalog-page .latest-grid .publication-card:not(:first-child) {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }
}

@media (max-width: 390px) {
    body.catalog-page {
        --catalog-shell-gutter: 10px !important;
        --catalog-shell: calc(100vw - 20px) !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1 {
        font-size: clamp(42px, 16vw, 64px) !important;
    }

    .catalog-explore-card,
    .catalog-explore.is-sticky-fixed .catalog-explore-card {
        min-height: 58px !important;
        height: 58px !important;
    }

    .catalog-explore-icon,
    .catalog-explore.is-sticky-fixed .catalog-explore-icon {
        width: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
    }

    .catalog-explore-card span,
    .catalog-explore-card strong {
        font-size: 11px !important;
    }
}




/* ==========================================================
   MOBILE REFINEMENT V3
   ========================================================== */

@media (max-width: 768px){

    /* Mostrar portada pequeña */

    .catalog-page .catalog-hero-cover{
        display:block !important;

        position:absolute !important;

        right:10px !important;
        top:78px !important;

        width:92px !important;
        height:138px !important;

        opacity:.92 !important;

        z-index:1 !important;

        transform:
            perspective(1000px)
            rotateY(-8deg)
            rotateZ(2deg) !important;

        filter:
            drop-shadow(0 10px 20px rgba(0,0,0,.45));
    }

    .catalog-page .catalog-hero-cover img{
        border-radius:10px !important;
        object-fit:cover !important;
    }

    .catalog-page .catalog-hero-cover span{
        display:none !important;
    }

    /* Área contenido */

    .catalog-page .catalog-hero-content{
        position:relative !important;
        z-index:2 !important;

        width:100% !important;
        max-width:100% !important;

        padding-right:96px !important;
    }

    /* TITULO PRINCIPAL */

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-title-main,
    .catalog-page .catalog-hero-content h1{

        font-size:clamp(42px,13vw,72px) !important;

        line-height:.88 !important;

        max-width:100% !important;

        overflow:hidden !important;

        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;

        text-overflow:ellipsis !important;

        margin-bottom:10px !important;
    }

    /* SUBTITULO JP */

    .catalog-page .catalog-hero-title-jp,
    .catalog-page .catalog-hero-subtitle-jp{

        max-width:calc(100% - 20px) !important;

        overflow:hidden !important;
        white-space:nowrap !important;
        text-overflow:ellipsis !important;

        font-size:12px !important;

        opacity:.9 !important;
    }

    /* LINEA ROJA RESPONSIVA */

    .catalog-page .catalog-hero-title-wrap::after,
    .catalog-page .catalog-hero-title::after{

        width:100% !important;
        max-width:260px !important;

        left:0 !important;
        right:auto !important;

        bottom:6px !important;

        transform:none !important;
    }

    /* TÍTULOS DE SECCIONES */

    .catalog-page .catalog-explore h2,
    .catalog-primary-section h2,
    .catalog-after-fold h2{

        font-size:clamp(18px,7vw,34px) !important;

        line-height:1.02 !important;

        letter-spacing:-0.03em !important;
    }

    /* Ajuste spacing */

    .catalog-page .catalog-hero-actions{
        margin-bottom:18px !important;
    }

    .catalog-explore{
        padding-top:4px !important;
    }
}

@media (max-width: 420px){

    .catalog-page .catalog-hero-cover{
        width:82px !important;
        height:122px !important;

        right:8px !important;
        top:86px !important;
    }

    .catalog-page .catalog-hero-content{
        padding-right:82px !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-title-main,
    .catalog-page .catalog-hero-content h1{
        font-size:clamp(38px,12vw,58px) !important;
    }

    .catalog-page .catalog-explore h2,
    .catalog-primary-section h2,
    .catalog-after-fold h2{
        font-size:clamp(16px,6.5vw,28px) !important;
    }
}


/* ==========================================================
   MOBILE REFINEMENT V4 - HERO PORTADA / BOTONES / LINEA
   Solo afecta responsive. Ajusta portada sin inclinación,
   botones más pequeños y línea roja proporcional al título.
   ========================================================== */

@media (max-width: 768px){

    /* Layout del hero: reserva espacio limpio para la portada */
    .catalog-page .catalog-hero-content{
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 112px !important;
    }

    /* Portada pequeña, recta y alineada con los tags */
    .catalog-page .catalog-hero-cover{
        display: block !important;
        position: absolute !important;

        top: 28px !important;
        right: 14px !important;

        width: 92px !important;
        height: 138px !important;
        max-height: none !important;

        opacity: .96 !important;
        z-index: 3 !important;

        transform: none !important;
        rotate: 0deg !important;

        border-radius: 10px !important;
        overflow: hidden !important;

        border: 1px solid rgba(255,49,71,.48) !important;
        box-shadow:
            0 12px 24px rgba(0,0,0,.46),
            0 0 18px rgba(255,49,71,.16) !important;

        filter: none !important;
        clip-path: none !important;
        background: rgba(8,8,10,.58) !important;
    }

    .catalog-page .catalog-hero-cover::before,
    .catalog-page .catalog-hero-cover::after{
        display: none !important;
        content: none !important;
    }

    .catalog-page .catalog-hero-cover img{
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        transform: none !important;
        clip-path: none !important;
        border: 0 !important;
        filter: none !important;
        box-shadow: none !important;
    }

    .catalog-page .catalog-hero-cover:hover img{
        transform: none !important;
        filter: none !important;
    }

    .catalog-page .catalog-hero-cover span{
        display: none !important;
    }

    /* Tags alineados con la parte superior de la portada */
    .catalog-page .catalog-hero-meta{
        margin: 0 0 12px !important;
        transform: none !important;
        position: relative !important;
        z-index: 5 !important;
        max-width: calc(100% - 6px) !important;
    }

    /* Título contenido y con truncado */
    .catalog-page .catalog-hero-title-wrap{
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 6px !important;
        padding-bottom: 4px !important;
        overflow: visible !important;
        z-index: 4 !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-title-main,
    .catalog-page .catalog-hero-content h1{
        position: relative !important;
        z-index: 2 !important;

        width: fit-content !important;
        max-width: 100% !important;

        font-size: clamp(38px, 11.5vw, 58px) !important;
        line-height: .86 !important;

        margin: 0 0 8px !important;

        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;

        white-space: normal !important;
    }

    /* Línea roja: ahora depende del ancho real del bloque del título */
    .catalog-page .catalog-hero-title-wrap::after{
        content: "" !important;
        position: absolute !important;

        left: 0 !important;
        right: auto !important;
        bottom: 10px !important;

        width: min(100%, 320px) !important;
        height: 8px !important;

        background:
            linear-gradient(
                90deg,
                rgba(255,49,71,.85),
                rgba(160,6,20,.72) 55%,
                transparent 100%
            ) !important;

        transform: none !important;
        opacity: .82 !important;
        z-index: 1 !important;

        clip-path: polygon(0 42%, 72% 0, 100% 50%, 72% 100%, 0 64%) !important;
        pointer-events: none !important;
    }

    .catalog-page .catalog-hero-title::after,
    .catalog-page .catalog-hero-title-main::after,
    .catalog-page .catalog-hero-content h1::after{
        display: none !important;
        content: none !important;
    }

    /* Subtítulo japonés truncado */
    .catalog-page .catalog-hero-title-jp,
    .catalog-page .catalog-hero-subtitle-jp{
        display: block !important;
        max-width: 100% !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        font-size: 12px !important;
        line-height: 1.2 !important;
        margin: 0 0 12px !important;

        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
    }

    /* Descripción algo más compacta para no chocar con portada */
    .catalog-page .catalog-hero-content p{
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 0 14px !important;

        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    /* Botones más pequeños y sin chocar con portada */
    .catalog-page .catalog-hero-actions{
        display: flex !important;
        gap: 8px !important;
        width: calc(100% + 112px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 0 0 20px !important;
        padding-right: 0 !important;
        position: relative !important;
        z-index: 6 !important;
    }

    .catalog-page .catalog-hero-btn{
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: 38px !important;

        padding: 8px 10px !important;

        font-size: 12px !important;
        line-height: 1 !important;
        gap: 7px !important;
    }

    /* Títulos de secciones más proporcionados */
    .catalog-page .catalog-explore h2,
    .catalog-primary-section h2,
    .catalog-after-fold h2{
        font-size: clamp(19px, 7vw, 30px) !important;
        line-height: 1.04 !important;
        letter-spacing: -.035em !important;
    }
}

@media (max-width: 420px){

    .catalog-page .catalog-hero-content{
        padding-right: 100px !important;
    }

    .catalog-page .catalog-hero-cover{
        width: 84px !important;
        height: 126px !important;
        top: 30px !important;
        right: 10px !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-title-main,
    .catalog-page .catalog-hero-content h1{
        font-size: clamp(34px, 11vw, 52px) !important;
    }

    .catalog-page .catalog-hero-title-wrap::after{
        width: min(100%, 250px) !important;
        height: 7px !important;
        bottom: 9px !important;
    }

    .catalog-page .catalog-hero-actions{
        width: calc(100% + 100px) !important;
        max-width: calc(100vw - 12px) !important;
        gap: 7px !important;
    }

    .catalog-page .catalog-hero-btn{
        min-height: 36px !important;
        height: 36px !important;
        padding: 7px 8px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 360px){

    .catalog-page .catalog-hero-content{
        padding-right: 88px !important;
    }

    .catalog-page .catalog-hero-cover{
        width: 76px !important;
        height: 114px !important;
        top: 32px !important;
        right: 8px !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-title-main,
    .catalog-page .catalog-hero-content h1{
        font-size: clamp(31px, 10.5vw, 46px) !important;
    }

    .catalog-page .catalog-hero-actions{
        width: calc(100% + 88px) !important;
    }
}


/* ==========================================================
   FIX MOBILE - QUITAR LÍNEA ROJA DEL TEXTO JAPONÉS
   ========================================================== */

@media (max-width: 768px){

    .catalog-page .catalog-hero-title-jp,
    .catalog-page .catalog-hero-subtitle-jp,
    .catalog-page .hero-title-jp,
    .catalog-page .hero-subtitle-jp,
    .catalog-page [class*="title-jp"],
    .catalog-page [class*="subtitle-jp"]{
        position: relative !important;
        border: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        background-image: none !important;
        text-decoration: none !important;
    }

    .catalog-page .catalog-hero-title-jp::before,
    .catalog-page .catalog-hero-title-jp::after,
    .catalog-page .catalog-hero-subtitle-jp::before,
    .catalog-page .catalog-hero-subtitle-jp::after,
    .catalog-page .hero-title-jp::before,
    .catalog-page .hero-title-jp::after,
    .catalog-page .hero-subtitle-jp::before,
    .catalog-page .hero-subtitle-jp::after,
    .catalog-page [class*="title-jp"]::before,
    .catalog-page [class*="title-jp"]::after,
    .catalog-page [class*="subtitle-jp"]::before,
    .catalog-page [class*="subtitle-jp"]::after{
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        opacity: 0 !important;
    }
}



/* ==========================================================
   HOTFIX DEFINITIVO - ELIMINAR SEGUNDA LÍNEA ROJA
   ========================================================== */

@media (max-width: 768px){

    .catalog-hero-title-jp,
    .catalog-hero-subtitle-jp,
    .hero-title-jp,
    .hero-subtitle-jp{
        border: none !important;
        border-bottom: none !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .catalog-hero-title-jp::before,
    .catalog-hero-title-jp::after,
    .catalog-hero-subtitle-jp::before,
    .catalog-hero-subtitle-jp::after,
    .hero-title-jp::before,
    .hero-title-jp::after,
    .hero-subtitle-jp::before,
    .hero-subtitle-jp::after{
        display:none !important;
        content:none !important;
        background:none !important;
        border:none !important;
        width:0 !important;
        height:0 !important;
        opacity:0 !important;
    }

    /* La línea extra realmente venía del subtítulo japonés */
    .catalog-page .catalog-hero-subtitle::before,
    .catalog-page .catalog-hero-subtitle::after{
        display:none !important;
        content:none !important;
        background:none !important;
        border:none !important;
        width:0 !important;
        height:0 !important;
        opacity:0 !important;
    }

    /* Mantener solo la línea principal */
    .catalog-page .catalog-hero-title-wrap::after{
        height:4px !important;
        bottom:8px !important;
    }
}


/* ==========================================================
   FIX FINAL MOBILE - LINEA SOLO EN TITULO PRINCIPAL
   En móvil:
   - La línea roja queda SOLO detrás del título grande.
   - El texto japonés queda limpio, sin línea ni pseudo-elementos.
   ========================================================== */

@media (max-width: 768px){

    .catalog-page .catalog-hero-title-wrap{
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    /*
      Línea roja principal.
      Antes estaba calculada desde el bottom del wrapper, por eso bajaba
      hasta quedar junto al japonés. Ahora se posiciona desde arriba,
      atravesando únicamente el título grande.
    */
    .catalog-page .catalog-hero-title-wrap::before{
        content: "" !important;
        display: block !important;
        position: absolute !important;

        left: 0 !important;
        right: auto !important;
        top: clamp(40px, 11.6vw, 62px) !important;
        bottom: auto !important;

        width: min(72vw, 260px) !important;
        max-width: 100% !important;
        height: 8px !important;

        z-index: -1 !important;

        opacity: .88 !important;
        visibility: visible !important;

        background:
            linear-gradient(
                90deg,
                rgba(255,49,71,.86) 0%,
                rgba(170,10,24,.74) 56%,
                transparent 100%
            ) !important;

        transform: skewX(-18deg) rotate(-1.4deg) !important;
        filter: blur(.18px) drop-shadow(0 0 10px rgba(255,26,44,.22)) !important;

        clip-path: polygon(
            0 44%,
            8% 22%,
            18% 42%,
            30% 24%,
            44% 40%,
            58% 20%,
            70% 44%,
            86% 28%,
            100% 52%,
            84% 74%,
            70% 62%,
            58% 84%,
            42% 64%,
            30% 82%,
            18% 62%,
            7% 78%
        ) !important;

        pointer-events: none !important;
    }

    /*
      No usamos ::after para la línea móvil, porque en tu CSS acumulado
      terminó quedando visualmente bajo el japonés.
    */
    .catalog-page .catalog-hero-title-wrap::after,
    .catalog-page .catalog-hero-title::before,
    .catalog-page .catalog-hero-title::after,
    .catalog-page .catalog-hero-title-main::before,
    .catalog-page .catalog-hero-title-main::after,
    .catalog-page .catalog-hero-content h1::before,
    .catalog-page .catalog-hero-content h1::after{
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: none !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /*
      El japonés no debe generar ninguna línea.
    */
    .catalog-page .catalog-hero-title-jp,
    .catalog-page .catalog-hero-subtitle-jp{
        position: relative !important;
        display: block !important;
        gap: 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        background: none !important;
        background-image: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
        padding-bottom: 0 !important;
    }

    .catalog-page .catalog-hero-title-jp::before,
    .catalog-page .catalog-hero-title-jp::after,
    .catalog-page .catalog-hero-subtitle-jp::before,
    .catalog-page .catalog-hero-subtitle-jp::after{
        display: none !important;
        content: none !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: none !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        transform: none !important;
    }
}

@media (max-width: 420px){

    .catalog-page .catalog-hero-title-wrap::before{
        top: clamp(36px, 11.2vw, 54px) !important;
        width: min(66vw, 230px) !important;
        height: 7px !important;
    }
}

@media (max-width: 360px){

    .catalog-page .catalog-hero-title-wrap::before{
        top: clamp(32px, 10.8vw, 48px) !important;
        width: min(62vw, 205px) !important;
        height: 6px !important;
    }
}


/* ==========================================================
   FIX PORTADA SOBRE EXPLORA - SIN DEFINIR BACKGROUND
   El fondo ahora es global en resources/css/layout/site-background.css.
   Este bloque solo corrige capas para que el sombreado de la portada
   no sea tapado por el wrapper invisible de Explora.
   ========================================================== */

/* El catálogo no debe definir el color/fondo general */
body.catalog-page,
body.catalog-page .main-content,
.catalog-first-fold,
.catalog-page .catalog-hero-carousel,
.catalog-page .catalog-hero-track,
.catalog-page .catalog-hero-slide,
.catalog-explore,
.catalog-primary-section,
.catalog-after-fold,
.catalog-page .publication-section,
body.catalog-page .site-footer{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Eliminar pseudo-fondos del catálogo que puedan crear cajas/cortes */
.catalog-first-fold::before,
.catalog-first-fold::after,
.catalog-page .catalog-hero-carousel::before,
.catalog-page .catalog-hero-carousel::after,
.catalog-page .catalog-hero-track::before,
.catalog-page .catalog-hero-track::after,
.catalog-page .catalog-hero-slide::before,
.catalog-page .catalog-hero-slide::after,
.catalog-page .catalog-hero-backdrop,
.catalog-explore::before,
.catalog-explore::after,
.catalog-primary-section::before,
.catalog-primary-section::after,
.catalog-after-fold::before,
.catalog-after-fold::after,
.catalog-page .publication-section::before,
.catalog-page .publication-section::after{
    display:none !important;
    content:none !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
}

/* El hero no recorta sombras */
.catalog-first-fold,
.catalog-page .catalog-hero-carousel,
.catalog-page .catalog-hero-track,
.catalog-page .catalog-hero-slide{
    overflow:visible !important;
}

/* Capas: hero/portada arriba; explora debajo */
.catalog-page .catalog-hero-carousel{
    position:relative !important;
    z-index:30 !important;
}

.catalog-page .catalog-hero-track{
    z-index:31 !important;
}

.catalog-page .catalog-hero-slide{
    z-index:32 !important;
    overflow:visible !important;
}

.catalog-page .catalog-hero-slide.is-active{
    z-index:33 !important;
}

.catalog-page .catalog-hero-cover{
    position:relative !important;
    z-index:80 !important;
    isolation:auto !important;
    overflow:visible !important;
    background:transparent !important;
    box-shadow:
        0 28px 76px rgba(0,0,0,.60),
        0 0 42px rgba(255,49,71,.16) !important;
}

.catalog-page .catalog-hero-cover::before,
.catalog-page .catalog-hero-cover::after{
    display:none !important;
    content:none !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
}

.catalog-page .catalog-hero-cover img{
    border-radius:12px !important;
    overflow:hidden !important;
}

.catalog-page .catalog-hero-cover span{
    z-index:2 !important;
    background:rgba(4,8,14,.82) !important;
}

.catalog-explore{
    position:relative !important;
    z-index:10 !important;
}

.catalog-explore.is-sticky-fixed{
    z-index:90 !important;
}

/* Solo controles internos, no el fondo de la página */
.catalog-page .catalog-explore-search,
.catalog-page .catalog-explore-tab::after,
.catalog-page .catalog-explore-card::after{
    background-color:rgba(4,10,18,.92) !important;
}


/* ==========================================================
   HERO COVER - escenario geométrico detrás de la portada
   ========================================================== */
.catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image){
    grid-template-columns:minmax(0, 1fr) minmax(460px, 560px);
}

.catalog-page .catalog-hero-cover-scene{
    position:relative;
    z-index:2;
    justify-self:end;
    align-self:center;
    width:clamp(440px, 40vw, 590px);
    height:clamp(430px, 39vw, 560px);
    display:grid;
    place-items:center;
    overflow:visible;
    isolation:isolate;
}

.catalog-page .catalog-hero-cover-scene .catalog-hero-cover{
    position:relative;
    z-index:5;
    justify-self:center;
    align-self:center;
    width:min(340px, 62%);
    max-height:min(58svh, 490px);
    border-radius:28px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
    box-shadow:
        0 26px 72px rgba(0,0,0,.62),
        0 0 0 1px rgba(255,255,255,.08),
        0 0 30px rgba(255,49,71,.18),
        -10px 0 34px rgba(255,49,71,.14);
}

.catalog-page .catalog-hero-cover-scene .catalog-hero-cover::before{
    content:"";
    position:absolute;
    inset:-9px;
    z-index:-1;
    border-radius:34px;
    background:linear-gradient(135deg, rgba(255,49,71,.55), transparent 32%, rgba(255,255,255,.10) 58%, rgba(255,49,71,.18));
    opacity:.55;
    filter:blur(10px);
}

.catalog-page .catalog-hero-cover-art,
.catalog-page .catalog-hero-cover-art span{
    position:absolute;
    display:block;
    pointer-events:none;
}

.catalog-page .catalog-hero-cover-art{
    inset:-18px -26px -18px -52px;
    z-index:1;
}

.catalog-page .cover-art-panel{
    border-radius:24px;
    transform-origin:center;
}

.catalog-page .cover-art-panel-main{
    width:198px;
    height:500px;
    right:238px;
    top:26px;
    transform:skewX(-17deg) rotate(9deg);
    background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px rgba(255,255,255,.08), 0 26px 40px rgba(0,0,0,.18);
    opacity:.58;
}

.catalog-page .cover-art-panel-red{
    width:124px;
    height:520px;
    right:18px;
    top:10px;
    transform:skewX(-18deg) rotate(8deg);
    background:linear-gradient(180deg, rgba(255,49,71,.10), rgba(255,49,71,.015));
    border:1px solid rgba(255,49,71,.22);
    box-shadow:0 0 28px rgba(255,49,71,.08);
    opacity:.78;
}

.catalog-page .cover-art-panel-soft{
    width:260px;
    height:420px;
    right:102px;
    top:72px;
    transform:skewX(-17deg) rotate(8deg);
    background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.075), rgba(255,255,255,.02));
    opacity:.33;
    filter:blur(.2px);
}

.catalog-page .cover-art-dots{
    width:150px;
    height:230px;
    opacity:.26;
    background-image:radial-gradient(rgba(255,255,255,.88) 1.25px, transparent 1.35px);
    background-size:14px 14px;
    mask-image:linear-gradient(180deg, transparent, #000 16%, #000 82%, transparent);
}

.catalog-page .cover-art-dots-left{
    left:18px;
    top:62px;
}

.catalog-page .cover-art-dots-right{
    right:-12px;
    bottom:46px;
}

.catalog-page .cover-art-line{
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
    opacity:.42;
    transform-origin:center;
}

.catalog-page .cover-art-line-one{
    width:290px;
    right:-8px;
    top:90px;
    transform:rotate(7deg);
}

.catalog-page .cover-art-line-two{
    width:270px;
    right:48px;
    bottom:76px;
    transform:rotate(-8deg);
}

.catalog-page .cover-art-ring{
    width:52px;
    height:52px;
    left:66px;
    top:310px;
    border:2px solid rgba(255,255,255,.34);
    border-radius:50%;
    opacity:.72;
    box-shadow:0 0 18px rgba(255,255,255,.05);
}

.catalog-page .cover-art-square{
    width:15px;
    height:15px;
    background:#ff3147;
    box-shadow:0 0 18px rgba(255,49,71,.45);
    opacity:.88;
}

.catalog-page .cover-art-square-one{
    left:44px;
    top:112px;
}

.catalog-page .cover-art-square-two{
    right:-8px;
    bottom:150px;
}

.catalog-page .cover-art-triangle{
    right:64px;
    top:186px;
    width:0;
    height:0;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:11px solid rgba(255,255,255,.62);
    opacity:.68;
    filter:drop-shadow(0 0 8px rgba(255,255,255,.08));
}

@media (max-width:1100px){
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image){
        grid-template-columns:minmax(0, 1fr) minmax(360px, 440px);
        gap:clamp(26px, 4vw, 48px);
    }
    .catalog-page .catalog-hero-cover-scene{
        width:clamp(350px, 38vw, 440px);
        height:clamp(390px, 42vw, 500px);
    }
    .catalog-page .cover-art-panel-main{right:190px; width:150px; height:430px;}
    .catalog-page .cover-art-panel-red{right:6px; width:96px; height:440px;}
    .catalog-page .cover-art-dots-left{left:10px;}
}

@media (max-width:900px){
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image){
        grid-template-columns:1fr;
    }
    .catalog-page .catalog-hero-cover-scene{
        justify-self:center;
        width:min(100%, 390px);
        height:auto;
        min-height:390px;
    }
    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover{
        width:min(300px, 74%);
    }
    .catalog-page .catalog-hero-cover-art{
        inset:-22px 0;
    }
}

/* ==========================================================
   RESPONSIVE HERO COVER SCENE - portada junto al título
   Escala la portada y las capas decorativas según el ancho.
   ========================================================== */

@media (max-width:900px){
    .catalog-page .catalog-hero-carousel{
        min-height:clamp(590px, 88svh, 760px) !important;
    }

    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image){
        grid-template-columns:minmax(0, 1fr) clamp(220px, 34vw, 320px) !important;
        align-items:center !important;
        gap:clamp(18px, 4vw, 34px) !important;
        padding-top:clamp(34px, 6vw, 58px) !important;
        padding-bottom:clamp(96px, 14svh, 128px) !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        position:relative !important;
        display:grid !important;
        place-items:center !important;
        justify-self:end !important;
        align-self:center !important;
        width:clamp(220px, 34vw, 320px) !important;
        height:clamp(320px, 50vw, 450px) !important;
        min-height:0 !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover{
        display:block !important;
        width:clamp(170px, 27vw, 250px) !important;
        max-height:none !important;
        border-radius:clamp(16px, 2.5vw, 24px) !important;
    }

    .catalog-page .catalog-hero-cover-art{
        inset:0 !important;
        width:100% !important;
        height:100% !important;
    }

    .catalog-page .cover-art-panel-main{
        width:38% !important;
        height:88% !important;
        right:48% !important;
        top:6% !important;
    }

    .catalog-page .cover-art-panel-red{
        width:30% !important;
        height:90% !important;
        right:0 !important;
        top:4% !important;
    }

    .catalog-page .cover-art-panel-soft{
        width:64% !important;
        height:72% !important;
        right:18% !important;
        top:14% !important;
    }

    .catalog-page .cover-art-dots{
        background-size:12px 12px !important;
    }

    .catalog-page .cover-art-dots-left{
        width:42% !important;
        height:52% !important;
        left:-2% !important;
        top:18% !important;
    }

    .catalog-page .cover-art-dots-right{
        width:38% !important;
        height:46% !important;
        right:-4% !important;
        bottom:10% !important;
    }

    .catalog-page .cover-art-line-one{
        width:72% !important;
        right:-3% !important;
        top:22% !important;
    }

    .catalog-page .cover-art-line-two{
        width:68% !important;
        right:9% !important;
        bottom:18% !important;
    }

    .catalog-page .cover-art-ring{
        width:clamp(34px, 6vw, 46px) !important;
        height:clamp(34px, 6vw, 46px) !important;
        left:10% !important;
        top:58% !important;
    }

    .catalog-page .cover-art-square-one{
        left:6% !important;
        top:26% !important;
    }

    .catalog-page .cover-art-square-two{
        right:1% !important;
        bottom:24% !important;
    }

    .catalog-page .cover-art-triangle{
        right:15% !important;
        top:38% !important;
    }
}

@media (max-width:640px){
    .catalog-page .catalog-hero-carousel{
        min-height:clamp(600px, 92svh, 720px) !important;
    }

    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image){
        position:relative !important;
        display:block !important;
        width:min(calc(100% - 24px), 430px) !important;
        padding-top:24px !important;
        padding-bottom:96px !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-content{
        position:relative !important;
        z-index:4 !important;
        width:100% !important;
        max-width:none !important;
        padding-right:clamp(118px, 38vw, 156px) !important;
    }

    .catalog-page .catalog-hero-meta{
        gap:6px !important;
        margin-bottom:10px !important;
    }

    .catalog-page .catalog-hero-meta span{
        min-height:24px !important;
        padding:5px 8px !important;
        font-size:11px !important;
    }

    .catalog-page .catalog-hero-content h1,
    .catalog-page .catalog-hero-title{
        font-size:clamp(46px, 15.5vw, 64px) !important;
        line-height:.82 !important;
        letter-spacing:-.045em !important;
        max-width:100% !important;
    }

    .catalog-page .catalog-hero-title-jp{
        font-size:clamp(12px, 3.5vw, 15px) !important;
        max-width:100% !important;
    }

    .catalog-page .catalog-hero-content p{
        max-width:100% !important;
        font-size:clamp(13px, 3.6vw, 15px) !important;
        line-height:1.45 !important;
    }

    .catalog-page .catalog-hero-actions{
        width:calc(100vw - 24px) !important;
        max-width:390px !important;
        margin-top:18px !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        padding-right:0 !important;
    }

    .catalog-page .catalog-hero-btn{
        min-width:0 !important;
        min-height:48px !important;
        padding:11px 10px !important;
        font-size:13px !important;
        border-radius:10px !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        position:absolute !important;
        z-index:2 !important;
        top:clamp(104px, 25vw, 126px) !important;
        right:clamp(-4px, 1vw, 8px) !important;
        width:clamp(128px, 38vw, 162px) !important;
        height:clamp(214px, 57vw, 260px) !important;
        min-height:0 !important;
        display:grid !important;
        place-items:center !important;
        pointer-events:auto !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover{
        display:block !important;
        width:clamp(84px, 28vw, 118px) !important;
        max-height:none !important;
        aspect-ratio:2/3 !important;
        border-radius:14px !important;
        box-shadow:
            0 18px 36px rgba(0,0,0,.58),
            0 0 0 1px rgba(255,255,255,.10),
            0 0 24px rgba(255,49,71,.16) !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover::before{
        inset:-5px !important;
        border-radius:18px !important;
        filter:blur(7px) !important;
        opacity:.5 !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover span{
        left:6px !important;
        right:6px !important;
        bottom:6px !important;
        min-height:22px !important;
        padding:4px 5px !important;
        border-radius:7px !important;
        font-size:0 !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover span::before{
        content:"📖";
        font-size:12px;
        line-height:1;
    }

    .catalog-page .catalog-hero-cover img{
        border-radius:12px !important;
    }

    .catalog-page .catalog-hero-cover-art{
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        overflow:visible !important;
    }

    .catalog-page .cover-art-panel{
        border-radius:14px !important;
    }

    .catalog-page .cover-art-panel-main{
        width:40% !important;
        height:86% !important;
        right:48% !important;
        top:8% !important;
        opacity:.48 !important;
    }

    .catalog-page .cover-art-panel-red{
        width:30% !important;
        height:88% !important;
        right:0 !important;
        top:6% !important;
        opacity:.64 !important;
    }

    .catalog-page .cover-art-panel-soft{
        width:66% !important;
        height:68% !important;
        right:17% !important;
        top:17% !important;
        opacity:.24 !important;
    }

    .catalog-page .cover-art-dots{
        background-size:9px 9px !important;
        opacity:.22 !important;
    }

    .catalog-page .cover-art-dots-left{
        width:52% !important;
        height:56% !important;
        left:-12% !important;
        top:20% !important;
    }

    .catalog-page .cover-art-dots-right{
        width:46% !important;
        height:46% !important;
        right:-12% !important;
        bottom:13% !important;
    }

    .catalog-page .cover-art-line{
        opacity:.26 !important;
    }

    .catalog-page .cover-art-line-one{
        width:82% !important;
        right:-7% !important;
        top:25% !important;
    }

    .catalog-page .cover-art-line-two{
        width:72% !important;
        right:8% !important;
        bottom:22% !important;
    }

    .catalog-page .cover-art-ring{
        width:30px !important;
        height:30px !important;
        left:6% !important;
        top:62% !important;
        border-width:1.5px !important;
    }

    .catalog-page .cover-art-square{
        width:10px !important;
        height:10px !important;
    }

    .catalog-page .cover-art-square-one{
        left:2% !important;
        top:28% !important;
    }

    .catalog-page .cover-art-square-two{
        right:-4% !important;
        bottom:25% !important;
    }

    .catalog-page .cover-art-triangle{
        right:12% !important;
        top:39% !important;
        transform:scale(.72) !important;
    }

    .catalog-page .catalog-hero-bottom{
        bottom:32px !important;
        width:min(calc(100% - 24px), 430px) !important;
    }

    .catalog-explore{
        margin-top:-22px !important;
    }
}

@media (max-width:420px){
    .catalog-page .catalog-hero-content{
        padding-right:clamp(112px, 36vw, 138px) !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        top:clamp(112px, 30vw, 136px) !important;
        right:-2px !important;
        width:clamp(120px, 36vw, 142px) !important;
        height:clamp(204px, 55vw, 236px) !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover{
        width:clamp(78px, 27vw, 104px) !important;
    }
}


/* ==========================================================
   MOBILE HERO ALIGNMENT HARD OVERRIDE
   Fuerza título + portada al mismo nivel visual en celular.
   ========================================================== */
@media (max-width: 768px){
    .catalog-page .catalog-hero-carousel{
        position:relative !important;
        min-height:0 !important;
        height:auto !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-track{
        position:relative !important;
        inset:auto !important;
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-slide{
        position:relative !important;
        inset:auto !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        width:min(calc(100vw - 28px), 430px) !important;
        max-width:min(calc(100vw - 28px), 430px) !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 auto !important;
        padding:22px 0 28px !important;
        opacity:1 !important;
        transform:none !important;
        overflow:visible !important;
        pointer-events:none !important;
    }

    .catalog-page .catalog-hero-slide.is-active{
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) clamp(112px, 32vw, 148px) !important;
        grid-template-rows:auto auto auto auto !important;
        column-gap:10px !important;
        row-gap:8px !important;
        align-items:start !important;
        pointer-events:auto !important;
    }

    /* Permite que meta/título/texto/botones participen del grid del slide. */
    .catalog-page .catalog-hero-content{
        display:contents !important;
        width:auto !important;
        max-width:none !important;
        padding:0 !important;
        margin:0 !important;
    }

    .catalog-page .catalog-hero-meta{
        grid-column:1 / 2 !important;
        grid-row:1 !important;
        width:100% !important;
        margin:0 0 4px !important;
        padding:0 !important;
        transform:none !important;
        display:flex !important;
        flex-wrap:wrap !important;
        gap:5px !important;
        z-index:6 !important;
    }

    .catalog-page .catalog-hero-meta span{
        height:21px !important;
        min-height:21px !important;
        padding:4px 7px !important;
        font-size:10px !important;
        line-height:1 !important;
        border-radius:4px !important;
    }

    .catalog-page .catalog-hero-title-wrap{
        grid-column:1 / 2 !important;
        grid-row:2 !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        z-index:6 !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        font-size:clamp(42px, 13.2vw, 58px) !important;
        line-height:.84 !important;
        letter-spacing:-.045em !important;
        overflow:visible !important;
        white-space:normal !important;
        filter:drop-shadow(5px 7px 0 rgba(0,0,0,.64)) drop-shadow(0 7px 10px rgba(0,0,0,.38)) !important;
    }

    .catalog-page .catalog-hero-title .catalog-hero-title-line,
    .catalog-page .catalog-hero-title .catalog-hero-title-line:first-child,
    .catalog-page .catalog-hero-title .catalog-hero-title-line:last-child,
    .catalog-page .catalog-hero-title .catalog-hero-title-line:only-child{
        display:block !important;
        white-space:normal !important;
        font-size:inherit !important;
        line-height:.84 !important;
        margin:0 !important;
        transform:rotate(-1.2deg) translateX(0) !important;
    }

    .catalog-page .catalog-hero-title .catalog-hero-title-line + .catalog-hero-title-line{
        margin-top:-4px !important;
    }

    .catalog-page .catalog-hero-title::before{
        left:8px !important;
        right:18px !important;
        bottom:4px !important;
        height:9px !important;
    }

    .catalog-page .catalog-hero-title-jp{
        margin:6px 0 0 !important;
        font-size:12px !important;
        line-height:1.25 !important;
        letter-spacing:.07em !important;
    }

    .catalog-page .catalog-hero-title-jp::after{
        display:none !important;
    }

    .catalog-page .catalog-hero-content > p,
    .catalog-page .catalog-hero-content p{
        grid-column:1 / 2 !important;
        grid-row:3 !important;
        width:100% !important;
        max-width:100% !important;
        margin:4px 0 0 !important;
        font-size:12.5px !important;
        line-height:1.35 !important;
        -webkit-line-clamp:2 !important;
        z-index:6 !important;
    }

    .catalog-page .catalog-hero-actions{
        grid-column:1 / -1 !important;
        grid-row:4 !important;
        width:100% !important;
        margin:10px 0 0 !important;
        padding:0 !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        z-index:8 !important;
    }

    .catalog-page .catalog-hero-btn{
        width:100% !important;
        min-width:0 !important;
        min-height:44px !important;
        height:44px !important;
        padding:10px 8px !important;
        font-size:12.5px !important;
        border-radius:10px !important;
    }

    /* Portada al lado del título, no flotando abajo. */
    .catalog-page .catalog-hero-cover-scene{
        grid-column:2 / 3 !important;
        grid-row:1 / 4 !important;
        position:relative !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;
        bottom:auto !important;
        justify-self:end !important;
        align-self:center !important;
        width:clamp(112px, 32vw, 148px) !important;
        height:clamp(176px, 48vw, 228px) !important;
        min-height:0 !important;
        margin:0 !important;
        display:grid !important;
        place-items:center !important;
        z-index:4 !important;
        pointer-events:auto !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover{
        display:block !important;
        width:clamp(84px, 25vw, 112px) !important;
        max-width:none !important;
        max-height:none !important;
        aspect-ratio:2/3 !important;
        border-radius:13px !important;
        transform:none !important;
        z-index:5 !important;
        box-shadow:0 16px 34px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.10), 0 0 20px rgba(255,49,71,.16) !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover img{
        border-radius:12px !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover span{
        left:6px !important;
        right:6px !important;
        bottom:6px !important;
        min-height:22px !important;
        padding:4px 5px !important;
        font-size:0 !important;
        border-radius:7px !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover span::before{
        content:"📖" !important;
        font-size:12px !important;
        line-height:1 !important;
    }

    .catalog-page .catalog-hero-cover-art{
        inset:-18px -18px -18px -24px !important;
        width:auto !important;
        height:auto !important;
        transform:none !important;
        opacity:.95 !important;
    }

    .catalog-page .cover-art-panel{border-radius:14px !important;}
    .catalog-page .cover-art-panel-main{
        width:58px !important;height:186px !important;right:72px !important;top:18px !important;opacity:.42 !important;
    }
    .catalog-page .cover-art-panel-red{
        width:46px !important;height:190px !important;right:-8px !important;top:14px !important;opacity:.58 !important;
    }
    .catalog-page .cover-art-panel-soft{
        width:112px !important;height:142px !important;right:18px !important;top:42px !important;opacity:.23 !important;
    }
    .catalog-page .cover-art-dots{background-size:9px 9px !important;opacity:.20 !important;}
    .catalog-page .cover-art-dots-left{width:84px !important;height:118px !important;left:-20px !important;top:42px !important;}
    .catalog-page .cover-art-dots-right{width:72px !important;height:98px !important;right:-20px !important;bottom:34px !important;}
    .catalog-page .cover-art-line{opacity:.24 !important;}
    .catalog-page .cover-art-line-one{width:150px !important;right:-22px !important;top:58px !important;}
    .catalog-page .cover-art-line-two{width:132px !important;right:2px !important;bottom:46px !important;}
    .catalog-page .cover-art-ring{width:28px !important;height:28px !important;left:4px !important;top:126px !important;border-width:1.5px !important;}
    .catalog-page .cover-art-square{width:10px !important;height:10px !important;}
    .catalog-page .cover-art-square-one{left:-6px !important;top:64px !important;}
    .catalog-page .cover-art-square-two{right:-10px !important;bottom:62px !important;}
    .catalog-page .cover-art-triangle{right:16px !important;top:84px !important;transform:scale(.68) !important;}

    .catalog-page .catalog-hero-bottom,
    .catalog-page .catalog-hero-dots{
        display:none !important;
    }

    .catalog-explore{
        margin-top:6px !important;
    }
}

@media (max-width:420px){
    .catalog-page .catalog-hero-slide.is-active{
        grid-template-columns:minmax(0, 1fr) clamp(106px, 31vw, 126px) !important;
        column-gap:8px !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1{
        font-size:clamp(40px, 12.6vw, 52px) !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        width:clamp(106px, 31vw, 126px) !important;
        height:clamp(168px, 46vw, 208px) !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover{
        width:clamp(78px, 24vw, 96px) !important;
    }

    .catalog-page .catalog-hero-actions{
        margin-top:8px !important;
    }
}


/* ==========================================================
   MOBILE HERO POLISH - portada más alta y línea roja corregida
   ========================================================== */
@media (max-width: 768px){
    .catalog-page .catalog-hero-slide.is-active{
        grid-template-columns:minmax(0, 1fr) clamp(132px, 38vw, 168px) !important;
        column-gap:12px !important;
        align-items:start !important;
    }

    .catalog-page .catalog-hero-title-wrap{
        position:relative !important;
        overflow:visible !important;
        padding-bottom:0 !important;
    }

    /* La línea roja vuelve a quedar detrás del título grande, no sobre el japonés. */
    .catalog-page .catalog-hero-title-wrap::before{
        content:"" !important;
        display:block !important;
        position:absolute !important;
        left:0 !important;
        top:clamp(42px, 10.8vw, 56px) !important;
        width:min(62vw, 250px) !important;
        height:8px !important;
        z-index:-1 !important;
        opacity:.9 !important;
        border-radius:999px !important;
        transform:rotate(-2deg) !important;
        background:linear-gradient(90deg, transparent 0%, rgba(255,31,63,.18) 8%, rgba(255,31,63,.9) 36%, rgba(255,31,63,.52) 72%, transparent 100%) !important;
        box-shadow:0 0 18px rgba(255,31,63,.22) !important;
        pointer-events:none !important;
    }

    .catalog-page .catalog-hero-title::before,
    .catalog-page .catalog-hero-title::after,
    .catalog-page .catalog-hero-title-jp::before,
    .catalog-page .catalog-hero-title-jp::after{
        display:none !important;
        content:none !important;
    }

    .catalog-page .catalog-hero-title-jp{
        position:relative !important;
        z-index:2 !important;
        margin:4px 0 0 !important;
        clear:both !important;
    }

    /* Portada más grande y con proporción vertical real. */
    .catalog-page .catalog-hero-cover-scene{
        width:clamp(132px, 38vw, 168px) !important;
        height:clamp(210px, 58vw, 266px) !important;
        align-self:start !important;
        padding-top:10px !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover{
        width:clamp(100px, 30vw, 128px) !important;
        height:auto !important;
        aspect-ratio:2 / 3 !important;
        transform:none !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover img{
        width:100% !important;
        height:100% !important;
        aspect-ratio:2 / 3 !important;
        object-fit:cover !important;
        display:block !important;
    }

    .catalog-page .catalog-hero-cover-art{
        inset:-24px -26px -24px -32px !important;
    }
}

@media (max-width:420px){
    .catalog-page .catalog-hero-slide.is-active{
        grid-template-columns:minmax(0, 1fr) clamp(128px, 37vw, 150px) !important;
        column-gap:10px !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1{
        font-size:clamp(40px, 12vw, 50px) !important;
        line-height:.86 !important;
    }

    .catalog-page .catalog-hero-title-wrap::before{
        top:clamp(40px, 10.2vw, 50px) !important;
        width:min(58vw, 220px) !important;
        height:7px !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        width:clamp(128px, 37vw, 150px) !important;
        height:clamp(204px, 56vw, 238px) !important;
        padding-top:8px !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover{
        width:clamp(102px, 29vw, 118px) !important;
    }
}

@media (max-width:360px){
    .catalog-page .catalog-hero-slide.is-active{
        grid-template-columns:minmax(0, 1fr) 116px !important;
        column-gap:8px !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        width:116px !important;
        height:190px !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover{
        width:94px !important;
    }

    .catalog-page .catalog-hero-title-wrap::before{
        top:36px !important;
        width:190px !important;
    }
}

/* =========================================================
   Mobile hero cover alignment polish
   - La portada parte a la misma altura visual que los tags.
   - Mantiene título + portada en la misma zona superior.
   - Evita que la portada se vea aplastada.
========================================================= */

@media (max-width: 768px){
    .catalog-hero-slide{
        position:relative;
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) clamp(118px, 31vw, 152px);
        grid-template-areas:
            "content cover"
            "actions actions";
        column-gap:14px;
        row-gap:14px;
        align-items:start;
        min-height:auto !important;
        padding:24px 14px 34px !important;
        overflow:hidden;
    }

    .catalog-hero-content{
        grid-area:content;
        width:100%;
        max-width:none;
        min-width:0;
        position:relative;
        z-index:6;
    }

    .catalog-hero-meta,
    .catalog-hero-tags,
    .catalog-hero-badges{
        margin-top:0 !important;
        margin-bottom:14px !important;
    }

    .catalog-hero-title{
        font-size:clamp(2.95rem, 12vw, 4.25rem) !important;
        line-height:.82 !important;
        margin:0 0 10px !important;
        max-width:100%;
        position:relative;
        z-index:2;
    }

    .catalog-hero-title::after{
        bottom:.12em !important;
        transform:translateY(0) !important;
    }

    .catalog-hero-subtitle,
    .catalog-hero-japanese{
        margin-top:0 !important;
        margin-bottom:22px !important;
        position:relative;
        z-index:3;
    }

    .catalog-hero-description{
        margin-top:0 !important;
        max-width:100%;
    }

    .catalog-hero-actions{
        grid-area:actions;
        width:100%;
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:10px;
        margin-top:6px !important;
        position:relative;
        z-index:8;
    }

    .catalog-hero-actions .btn,
    .catalog-hero-actions a{
        width:100%;
        min-width:0;
    }

    .catalog-hero-cover-wrapper,
    .catalog-hero-cover-scene,
    .catalog-hero-art,
    .catalog-hero-visual{
        grid-area:cover;
        position:relative !important;
        align-self:start !important;
        justify-self:end !important;
        width:clamp(118px, 31vw, 152px) !important;
        min-width:clamp(118px, 31vw, 152px) !important;
        max-width:152px !important;
        min-height:0 !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
        display:block !important;
        transform:none !important;
        z-index:5;
    }

    .catalog-hero-cover{
        position:relative !important;
        width:100% !important;
        max-width:none !important;
        height:auto !important;
        display:block !important;
        margin:0 !important;
        transform:none !important;
        z-index:5;
    }

    .catalog-hero-cover img,
    .catalog-hero-cover picture,
    .catalog-hero-cover source{
        width:100% !important;
    }

    .catalog-hero-cover img{
        height:auto !important;
        aspect-ratio:2 / 3 !important;
        object-fit:cover !important;
        border-radius:16px !important;
        display:block !important;
    }

    .catalog-hero-cover-stage{
        position:absolute !important;
        inset:-32px -30px -36px -34px !important;
        width:auto !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 !important;
        overflow:visible !important;
        z-index:1;
        pointer-events:none;
    }

    .catalog-cover-shape-a{
        width:118px !important;
        height:210px !important;
        left:50% !important;
        top:50% !important;
        right:auto !important;
        transform:translate(-70%, -50%) rotate(11deg) !important;
        opacity:.17 !important;
    }

    .catalog-cover-shape-b{
        width:130px !important;
        height:230px !important;
        left:50% !important;
        top:50% !important;
        right:auto !important;
        transform:translate(-22%, -48%) rotate(-9deg) !important;
        opacity:.18 !important;
    }

    .catalog-cover-shape-c{
        width:210px !important;
        height:210px !important;
        left:50% !important;
        top:50% !important;
        right:auto !important;
        transform:translate(-50%, -48%) !important;
        opacity:.32 !important;
    }

    .catalog-cover-dots{
        width:120px !important;
        height:150px !important;
        left:50% !important;
        top:50% !important;
        right:auto !important;
        transform:translate(-86%, -62%) !important;
        opacity:.14 !important;
    }
}

@media (max-width: 420px){
    .catalog-hero-slide{
        grid-template-columns:minmax(0, 1fr) clamp(116px, 30vw, 136px);
        column-gap:10px;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .catalog-hero-title{
        font-size:clamp(2.7rem, 11.4vw, 3.75rem) !important;
    }

    .catalog-hero-cover-wrapper,
    .catalog-hero-cover-scene,
    .catalog-hero-art,
    .catalog-hero-visual{
        width:clamp(116px, 30vw, 136px) !important;
        min-width:clamp(116px, 30vw, 136px) !important;
        max-width:136px !important;
    }

    .catalog-hero-description{
        font-size:.9rem !important;
        line-height:1.45 !important;
    }
}


/* ==========================================================
   MOBILE HERO COVER - ABSOLUTE TOP ALIGNMENT
   En resoluciones pequeñas el efecto decorativo se elimina para que
   no empuje/centre la portada. La portada queda anclada arriba,
   a la misma altura que los chips Manga / Shonen / Acción.
   ========================================================== */

@media (max-width: 768px){

    .catalog-page .catalog-hero-slide{
        position:relative !important;
        display:block !important;
        min-height:0 !important;
        height:auto !important;
        padding:24px 14px 34px !important;
        overflow:hidden !important;
    }

    .catalog-page .catalog-hero-content{
        position:relative !important;
        z-index:8 !important;
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        padding:0 !important;
        margin:0 !important;
    }

    /*
      Espacio reservado a la derecha para que el texto no choque con la portada.
      Esto permite que la portada suba sin afectar el flujo del título.
    */
    .catalog-page .catalog-hero-tags,
    .catalog-page .catalog-hero-meta,
    .catalog-page .catalog-hero-badges,
    .catalog-page .catalog-hero-title-wrap,
    .catalog-page .catalog-hero-description{
        max-width:calc(100% - 150px) !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        position:absolute !important;
        top:24px !important;
        right:14px !important;
        left:auto !important;
        bottom:auto !important;
        z-index:7 !important;

        width:136px !important;
        height:auto !important;
        min-width:136px !important;
        min-height:0 !important;
        max-width:136px !important;

        display:block !important;
        place-items:initial !important;
        justify-self:auto !important;
        align-self:auto !important;
        margin:0 !important;
        padding:0 !important;
        transform:none !important;
        overflow:visible !important;
        isolation:auto !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover,
    .catalog-page .catalog-hero-cover{
        position:relative !important;
        inset:auto !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:136px !important;
        min-width:136px !important;
        max-width:136px !important;
        height:auto !important;
        max-height:none !important;
        aspect-ratio:2 / 3 !important;

        display:block !important;
        margin:0 !important;
        padding:0 !important;
        transform:none !important;
        border-radius:16px !important;
        z-index:9 !important;
    }

    .catalog-page .catalog-hero-cover img{
        width:100% !important;
        height:100% !important;
        aspect-ratio:2 / 3 !important;
        object-fit:cover !important;
        display:block !important;
        border-radius:16px !important;
    }

    /*
      En móvil el decorado era el que mantenía el bloque centrado/abajo.
      Se apaga solo en pantallas pequeñas.
    */
    .catalog-page .catalog-hero-cover-art,
    .catalog-page .catalog-hero-cover-art span,
    .catalog-page .catalog-hero-cover-stage,
    .catalog-page .catalog-cover-shape,
    .catalog-page .catalog-cover-dots{
        display:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        width:0 !important;
        height:0 !important;
        min-width:0 !important;
        min-height:0 !important;
        pointer-events:none !important;
    }

    .catalog-page .catalog-hero-tags,
    .catalog-page .catalog-hero-meta,
    .catalog-page .catalog-hero-badges{
        margin-top:0 !important;
        margin-bottom:18px !important;
    }

    .catalog-page .catalog-hero-title-wrap{
        position:relative !important;
        isolation:isolate !important;
        margin:0 0 8px !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-title{
        font-size:clamp(3rem, 12vw, 4.25rem) !important;
        line-height:.82 !important;
        margin:0 !important;
    }

    .catalog-page .catalog-hero-subtitle,
    .catalog-page .catalog-hero-japanese{
        position:relative !important;
        z-index:10 !important;
        margin-top:0 !important;
        margin-bottom:42px !important;
        max-width:calc(100% - 150px) !important;
    }

    .catalog-page .catalog-hero-description{
        margin-top:0 !important;
        margin-bottom:22px !important;
    }

    .catalog-page .catalog-hero-actions{
        position:relative !important;
        z-index:12 !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
        width:100% !important;
        margin-top:0 !important;
        clear:both !important;
    }

    .catalog-page .catalog-hero-actions .catalog-hero-btn{
        width:100% !important;
        min-width:0 !important;
    }

    .catalog-page .catalog-hero-bottom{
        display:none !important;
    }
}

@media (max-width: 420px){
    .catalog-page .catalog-hero-slide{
        padding-top:22px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .catalog-page .catalog-hero-cover-scene,
    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover,
    .catalog-page .catalog-hero-cover{
        width:128px !important;
        min-width:128px !important;
        max-width:128px !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        top:22px !important;
        right:12px !important;
    }

    .catalog-page .catalog-hero-tags,
    .catalog-page .catalog-hero-meta,
    .catalog-page .catalog-hero-badges,
    .catalog-page .catalog-hero-title-wrap,
    .catalog-page .catalog-hero-description,
    .catalog-page .catalog-hero-subtitle,
    .catalog-page .catalog-hero-japanese{
        max-width:calc(100% - 140px) !important;
    }

    .catalog-page .catalog-hero-title{
        font-size:clamp(2.85rem, 11.5vw, 3.8rem) !important;
    }
}

@media (max-width: 360px){
    .catalog-page .catalog-hero-cover-scene,
    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover,
    .catalog-page .catalog-hero-cover{
        width:116px !important;
        min-width:116px !important;
        max-width:116px !important;
    }

    .catalog-page .catalog-hero-tags,
    .catalog-page .catalog-hero-meta,
    .catalog-page .catalog-hero-badges,
    .catalog-page .catalog-hero-title-wrap,
    .catalog-page .catalog-hero-description,
    .catalog-page .catalog-hero-subtitle,
    .catalog-page .catalog-hero-japanese{
        max-width:calc(100% - 126px) !important;
    }
}


/* ==========================================================
   MOBILE HERO FINAL - portada alineada con los chips
   Este bloque corrige los overrides anteriores:
   - Chips horizontales.
   - Portada en la misma altura superior que Manga/Shonen/Acción.
   - Sin choque con los botones.
   - Decoración de portada reducida, sin empujar el layout.
   ========================================================== */

@media (max-width: 768px){
    .catalog-page .catalog-hero-carousel,
    .catalog-page .catalog-hero-track{
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide.is-active{
        position:relative !important;
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) clamp(126px, 34vw, 152px) !important;
        grid-template-rows:auto auto auto auto !important;
        grid-template-areas:
            "meta cover"
            "title cover"
            "desc cover"
            "actions actions" !important;
        column-gap:12px !important;
        row-gap:0 !important;
        align-items:start !important;
        width:min(calc(100vw - 28px), 430px) !important;
        max-width:min(calc(100vw - 28px), 430px) !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 auto !important;
        padding:22px 0 30px !important;
        overflow:visible !important;
        opacity:1 !important;
        transform:none !important;
        pointer-events:auto !important;
    }

    .catalog-page .catalog-hero-content{
        display:contents !important;
        width:auto !important;
        max-width:none !important;
        min-width:0 !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
    }

    .catalog-page .catalog-hero-meta{
        grid-area:meta !important;
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:5px !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 0 14px !important;
        padding:0 !important;
        transform:none !important;
        position:relative !important;
        z-index:12 !important;
    }

    .catalog-page .catalog-hero-meta span{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:auto !important;
        min-width:auto !important;
        height:21px !important;
        min-height:21px !important;
        padding:4px 7px !important;
        font-size:10px !important;
        line-height:1 !important;
        border-radius:4px !important;
        white-space:nowrap !important;
    }

    .catalog-page .catalog-hero-title-wrap{
        grid-area:title !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 0 8px !important;
        padding:0 !important;
        position:relative !important;
        isolation:isolate !important;
        overflow:visible !important;
        z-index:10 !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        font-size:clamp(42px, 12.2vw, 56px) !important;
        line-height:.86 !important;
        letter-spacing:-.045em !important;
        white-space:normal !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-title .catalog-hero-title-line,
    .catalog-page .catalog-hero-title .catalog-hero-title-line:first-child,
    .catalog-page .catalog-hero-title .catalog-hero-title-line:last-child,
    .catalog-page .catalog-hero-title .catalog-hero-title-line:only-child{
        display:block !important;
        white-space:normal !important;
        font-size:inherit !important;
        line-height:.86 !important;
        margin:0 !important;
        transform:rotate(-1.2deg) translateX(0) !important;
    }

    .catalog-page .catalog-hero-title-jp{
        display:block !important;
        margin:5px 0 0 !important;
        font-size:12px !important;
        line-height:1.22 !important;
        letter-spacing:.04em !important;
        position:relative !important;
        z-index:2 !important;
        clear:both !important;
    }

    .catalog-page .catalog-hero-title-jp::before,
    .catalog-page .catalog-hero-title-jp::after,
    .catalog-page .catalog-hero-title::before,
    .catalog-page .catalog-hero-title::after{
        display:none !important;
        content:none !important;
    }

    .catalog-page .catalog-hero-title-wrap::before{
        content:"" !important;
        position:absolute !important;
        left:0 !important;
        top:clamp(40px, 10.8vw, 54px) !important;
        width:min(56vw, 220px) !important;
        height:7px !important;
        z-index:-1 !important;
        opacity:.88 !important;
        border-radius:999px !important;
        pointer-events:none !important;
        background:linear-gradient(90deg, transparent 0%, rgba(255,49,71,.15) 6%, rgba(255,49,71,.88) 34%, rgba(255,49,71,.50) 70%, transparent 100%) !important;
        transform:skewX(-15deg) rotate(-1.8deg) !important;
        box-shadow:0 0 14px rgba(255,49,71,.20) !important;
    }

    .catalog-page .catalog-hero-content > p,
    .catalog-page .catalog-hero-content p{
        grid-area:desc !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        font-size:12.5px !important;
        line-height:1.38 !important;
        -webkit-line-clamp:2 !important;
        position:relative !important;
        z-index:10 !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        grid-area:cover !important;
        position:relative !important;
        inset:auto !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        justify-self:end !important;
        align-self:start !important;
        width:clamp(126px, 34vw, 152px) !important;
        height:clamp(198px, 52vw, 236px) !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        display:grid !important;
        place-items:start center !important;
        overflow:visible !important;
        transform:none !important;
        isolation:isolate !important;
        z-index:8 !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover,
    .catalog-page .catalog-hero-cover{
        position:relative !important;
        inset:auto !important;
        width:clamp(104px, 28vw, 126px) !important;
        min-width:0 !important;
        max-width:126px !important;
        height:auto !important;
        max-height:none !important;
        aspect-ratio:2 / 3 !important;
        margin:0 !important;
        padding:0 !important;
        display:block !important;
        overflow:hidden !important;
        border-radius:15px !important;
        border:1px solid rgba(255,49,71,.42) !important;
        background:rgba(255,255,255,.05) !important;
        transform:none !important;
        box-shadow:
            0 18px 40px rgba(0,0,0,.58),
            0 0 0 1px rgba(255,255,255,.07),
            0 0 24px rgba(255,49,71,.14) !important;
        z-index:5 !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover::before{
        content:"" !important;
        position:absolute !important;
        inset:-6px !important;
        z-index:-1 !important;
        border-radius:20px !important;
        background:linear-gradient(135deg, rgba(255,49,71,.42), transparent 38%, rgba(255,255,255,.08)) !important;
        opacity:.45 !important;
        filter:blur(8px) !important;
        display:block !important;
    }

    .catalog-page .catalog-hero-cover img{
        width:100% !important;
        height:100% !important;
        aspect-ratio:2 / 3 !important;
        object-fit:cover !important;
        display:block !important;
        border-radius:15px !important;
        transform:none !important;
        filter:none !important;
    }

    .catalog-page .catalog-hero-cover span{
        display:none !important;
    }

    .catalog-page .catalog-hero-cover-art{
        display:block !important;
        visibility:visible !important;
        opacity:.8 !important;
        position:absolute !important;
        inset:-22px -22px -22px -30px !important;
        width:auto !important;
        height:auto !important;
        min-width:0 !important;
        min-height:0 !important;
        z-index:1 !important;
        pointer-events:none !important;
        transform:none !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-cover-art span{
        display:block !important;
        visibility:visible !important;
        pointer-events:none !important;
    }

    .catalog-page .cover-art-panel-main{
        width:82px !important;
        height:178px !important;
        right:60px !important;
        top:8px !important;
        border-radius:14px !important;
        transform:skewX(-13deg) rotate(9deg) !important;
        opacity:.42 !important;
    }

    .catalog-page .cover-art-panel-red{
        width:74px !important;
        height:184px !important;
        right:-2px !important;
        top:4px !important;
        border-radius:14px !important;
        transform:skewX(-13deg) rotate(7deg) !important;
        opacity:.42 !important;
    }

    .catalog-page .cover-art-panel-soft{
        width:110px !important;
        height:110px !important;
        right:2px !important;
        top:42px !important;
        border-radius:50% !important;
        opacity:.20 !important;
    }

    .catalog-page .cover-art-dots-left{
        width:76px !important;
        height:104px !important;
        left:-10px !important;
        top:12px !important;
        opacity:.14 !important;
    }

    .catalog-page .cover-art-dots-right{
        width:72px !important;
        height:102px !important;
        right:-14px !important;
        top:68px !important;
        opacity:.12 !important;
    }

    .catalog-page .cover-art-line,
    .catalog-page .cover-art-ring,
    .catalog-page .cover-art-square,
    .catalog-page .cover-art-triangle{
        opacity:.38 !important;
    }

    .catalog-page .catalog-hero-actions{
        grid-area:actions !important;
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
        margin:18px 0 0 !important;
        padding:0 !important;
        position:relative !important;
        z-index:20 !important;
    }

    .catalog-page .catalog-hero-btn{
        width:100% !important;
        min-width:0 !important;
        min-height:46px !important;
        height:46px !important;
        padding:10px 8px !important;
        font-size:12.5px !important;
        border-radius:10px !important;
    }

    .catalog-page .catalog-hero-bottom{
        display:none !important;
    }
}

@media (max-width: 420px){
    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide.is-active{
        grid-template-columns:minmax(0, 1fr) 132px !important;
        column-gap:10px !important;
        width:calc(100vw - 24px) !important;
        max-width:calc(100vw - 24px) !important;
        padding-top:22px !important;
        padding-bottom:30px !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        width:132px !important;
        height:210px !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover,
    .catalog-page .catalog-hero-cover{
        width:112px !important;
        max-width:112px !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1{
        font-size:clamp(40px, 11.5vw, 50px) !important;
    }

    .catalog-page .catalog-hero-title-wrap::before{
        top:clamp(38px, 10.5vw, 48px) !important;
        width:min(54vw, 200px) !important;
    }
}

@media (max-width: 360px){
    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide.is-active{
        grid-template-columns:minmax(0, 1fr) 118px !important;
        column-gap:8px !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        width:118px !important;
        height:190px !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover,
    .catalog-page .catalog-hero-cover{
        width:98px !important;
        max-width:98px !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1{
        font-size:38px !important;
    }
}


/* ==========================================================
   MOBILE HERO POLISH - título más alto y línea roja ajustada
   Ajuste final solicitado:
   - Sube el bloque del título en móvil sin mover la portada.
   - Mantiene la línea roja detrás del título, hacia el final del texto.
   - Evita que la línea roja choque con el texto japonés.
   ========================================================== */

@media (max-width: 768px){
    .catalog-page .catalog-hero-meta{
        margin-bottom:6px !important;
    }

    .catalog-page .catalog-hero-title-wrap{
        margin-top:-8px !important;
        margin-bottom:12px !important;
        transform:translateY(-4px) !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1{
        line-height:.84 !important;
    }

    .catalog-page .catalog-hero-title .catalog-hero-title-line,
    .catalog-page .catalog-hero-title .catalog-hero-title-line:first-child,
    .catalog-page .catalog-hero-title .catalog-hero-title-line:last-child,
    .catalog-page .catalog-hero-title .catalog-hero-title-line:only-child{
        line-height:.84 !important;
    }

    .catalog-page .catalog-hero-title-wrap::before{
        top:clamp(34px, 9.3vw, 46px) !important;
        left:2px !important;
        width:min(54vw, 214px) !important;
        height:7px !important;
        z-index:-1 !important;
        transform:skewX(-15deg) rotate(-1.6deg) !important;
    }

    .catalog-page .catalog-hero-title-jp{
        margin-top:8px !important;
        line-height:1.2 !important;
        position:relative !important;
        z-index:3 !important;
    }

    .catalog-page .catalog-hero-content > p,
    .catalog-page .catalog-hero-content p{
        margin-top:-2px !important;
    }
}

@media (max-width: 420px){
    .catalog-page .catalog-hero-meta{
        margin-bottom:5px !important;
    }

    .catalog-page .catalog-hero-title-wrap{
        margin-top:-10px !important;
        margin-bottom:12px !important;
        transform:translateY(-5px) !important;
    }

    .catalog-page .catalog-hero-title-wrap::before{
        top:clamp(32px, 9.1vw, 42px) !important;
        width:min(55vw, 196px) !important;
    }

    .catalog-page .catalog-hero-title-jp{
        margin-top:8px !important;
    }
}

@media (max-width: 360px){
    .catalog-page .catalog-hero-title-wrap{
        margin-top:-8px !important;
        transform:translateY(-4px) !important;
    }

    .catalog-page .catalog-hero-title-wrap::before{
        top:31px !important;
        width:min(54vw, 178px) !important;
    }
}

/* ==========================================================
   FIX DEFINITIVO - SEPARACIÓN ENTRE TABS Y BUSCADOR
   El separador existe en el HTML para que ninguna regla previa de
   margin/gap pueda anular el espacio visual.
   ========================================================== */
.catalog-explore-search-spacer{
    display:none;
}

@media (max-width:640px){
    .catalog-explore-search-spacer{
        display:block !important;
        width:100% !important;
        height:12px !important;
        flex:0 0 100% !important;
        margin:0 !important;
        padding:0 !important;
        pointer-events:none !important;
    }

    .catalog-explore-controls,
    .catalog-explore.is-sticky-fixed .catalog-explore-controls{
        display:block !important;
    }

    .catalog-explore-tabs,
    .catalog-explore.is-sticky-fixed .catalog-explore-tabs{
        margin-bottom:0 !important;
    }

    .catalog-explore-search,
    .catalog-explore.is-sticky-fixed .catalog-explore-search{
        margin-top:0 !important;
        transform:none !important;
    }
}



/* ==========================================================
   UNIFORM EXPLORE SPACING
   ========================================================== */

.catalog-page .catalog-explore-controls{
    gap:5px !important;
}

.catalog-page .catalog-explore-tabs{
    margin-bottom:0 !important;
}

.catalog-page .catalog-explore-search{
    margin:0 !important;
}

.catalog-page .catalog-explore-grid{
    margin-top:12px !important;
}

@media (max-width:640px){

    .catalog-page .catalog-explore-controls{
        display:flex !important;
        flex-direction:column !important;
        gap:4px !important;
    }

    .catalog-page .catalog-explore-tabs{
        margin:0 !important;
    }

    .catalog-page .catalog-explore-search{
        margin:0 !important;
    }

    .catalog-page .catalog-explore-grid{
        margin-top:12px !important;
    }
}


/* ==========================================================
   BUSCADOR CON MISMA GEOMETRÍA QUE TABS
   Hereda la forma biselada de Categorías / Demografías / Géneros.
   No cambia el funcionamiento del input; solo reemplaza el borde
   visual por la misma silueta con ::before / ::after.
   ========================================================== */

.catalog-page .catalog-explore-search{
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    clip-path: none !important;
    box-shadow: none !important;
}

.catalog-page .catalog-explore-search::before,
.catalog-page .catalog-explore-search::after{
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    clip-path: polygon(
        var(--catalog-cut-sm) 0,
        calc(100% - var(--catalog-cut-sm)) 0,
        100% var(--catalog-cut-sm),
        100% calc(100% - var(--catalog-cut-sm)),
        calc(100% - var(--catalog-cut-sm)) 100%,
        var(--catalog-cut-sm) 100%,
        0 calc(100% - var(--catalog-cut-sm)),
        0 var(--catalog-cut-sm)
    ) !important;
}

.catalog-page .catalog-explore-search::before{
    inset: 0 !important;
    z-index: -2 !important;
    background: rgba(255,255,255,.10) !important;
}

.catalog-page .catalog-explore-search::after{
    inset: 1px !important;
    z-index: -1 !important;
    background: rgba(8,8,10,.88) !important;
}

.catalog-page .catalog-explore-search:focus-within::before{
    background: rgba(255,49,71,.62) !important;
}

.catalog-page .catalog-explore-search:focus-within::after{
    background: rgba(8,8,10,.92) !important;
}

.catalog-page .catalog-explore-search span,
.catalog-page .catalog-explore-search input{
    position: relative !important;
    z-index: 1 !important;
}

.catalog-page .catalog-explore-search input{
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    clip-path: none !important;
}

.catalog-page .catalog-explore-search input:focus,
.catalog-page .catalog-explore-search input:focus-visible,
.catalog-page .catalog-explore-search input:active{
    outline: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   CAPA DE CLIC FILTROS HERO OVERLAP
   Corrige el bug donde solo responde la mitad inferior de los
   tabs/buscador. El problema viene de una capa transparente del
   hero/título superpuesta sobre la zona superior de los controles.
   No cambia la geometría ni el diseño visual de los botones.
   ========================================================== */

.catalog-page .catalog-explore{
    position:relative !important;
    z-index:999 !important;
    isolation:isolate !important;
}

.catalog-page .catalog-explore-head{
    position:relative !important;
    z-index:1 !important;
    pointer-events:none !important;
}

.catalog-page .catalog-explore-head *,
.catalog-page .catalog-explore-mark,
.catalog-page .catalog-explore h2{
    pointer-events:none !important;
}

.catalog-page .catalog-explore-controls{
    position:relative !important;
    z-index:50 !important;
    pointer-events:auto !important;
}

.catalog-page .catalog-explore-tabs,
.catalog-page .catalog-explore-tab,
.catalog-page .catalog-explore-search,
.catalog-page .catalog-explore-search input{
    pointer-events:auto !important;
}

/* Evita que la parte baja del hero, aunque sea transparente, bloquee los filtros. */
.catalog-page .catalog-hero-carousel{
    z-index:1 !important;
}

.catalog-page .catalog-hero-track,
.catalog-page .catalog-hero-slide{
    pointer-events:none !important;
}

.catalog-page .catalog-hero-content,
.catalog-page .catalog-hero-content *,
.catalog-page .catalog-hero-cover-scene,
.catalog-page .catalog-hero-cover,
.catalog-page .catalog-hero-cover *,
.catalog-page .catalog-hero-dots,
.catalog-page .catalog-hero-dot{
    pointer-events:auto !important;
}


/* ==========================================================
   HERO LEFT COVER TOP ALIGNMENT
   Hace que TODO el lado izquierdo del hero empiece al mismo nivel
   donde empieza la portada real, sin contar sombras/efectos visuales.
   No separa sinopsis ni botones en zonas; mueve el bloque izquierdo
   completo como una sola unidad.
   ========================================================== */

@media (min-width:981px){

    .catalog-page{
        --hero-cover-real-top:22px;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide.is-active{
        align-items:start !important;
    }

    .catalog-page .catalog-hero-cover{
        align-self:start !important;
        margin-top:var(--hero-cover-real-top) !important;
        transform:none !important;
    }

    .catalog-page .catalog-hero-content{
        align-self:start !important;
        margin-top:var(--hero-cover-real-top) !important;
        padding-top:0 !important;
        transform:none !important;
    }
}

@media (min-width:981px) and (max-height:760px){

    .catalog-page{
        --hero-cover-real-top:18px;
    }
}

@media (max-width:980px){

    .catalog-page .catalog-hero-content{
        margin-top:0 !important;
        padding-top:0 !important;
        transform:none !important;
    }
}


/* ==========================================================
   STICKY FILTROS ACTIVO POST-FILTRO
   Reactiva el comportamiento sticky/fixed del bloque de filtros
   sin romper el autoscroll hacia "Populares recientes".
   ========================================================== */

.catalog-explore-sticky-placeholder{
    width:min(calc(100% - 64px),1320px) !important;
    margin:0 auto !important;
    display:block;
    pointer-events:none !important;
}

.catalog-explore-sticky-placeholder[hidden]{
    display:none !important;
    height:0 !important;
}

.catalog-explore.is-sticky-fixed{
    position:fixed !important;
    top:var(--catalog-sticky-top,84px) !important;
    left:50% !important;
    width:min(calc(100% - 64px),1320px) !important;
    max-width:1320px !important;
    margin:0 !important;
    padding:0 !important;
    transform:translateX(-50%) !important;
    z-index:120 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
}

.catalog-explore.is-sticky-fixed .catalog-explore-controls{
    margin-bottom:12px !important;
}

.catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
    gap:12px !important;
    max-height:min(252px, calc(100svh - var(--catalog-sticky-top, 84px) - 190px)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-top:5px !important;
    padding-left:2px !important;
    padding-right:8px !important;
    margin-top:-1px !important;
}

@media (max-width:980px){
    .catalog-explore-sticky-placeholder,
    .catalog-explore.is-sticky-fixed{
        width:min(calc(100% - 36px),760px) !important;
    }

    .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        max-height:min(338px, calc(100svh - var(--catalog-sticky-top, 84px) - 170px)) !important;
    }
}

@media (max-width:640px){
    .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active{
        max-height:min(316px, calc(100svh - var(--catalog-sticky-top, 84px) - 160px)) !important;
    }

    .catalog-explore.is-sticky-fixed .catalog-explore-card{
        min-height:96px !important;
    }
}


/* ==========================================================
   HERO COVER TRUE FLUID RESPONSIVE
   La portada se redimensiona proporcionalmente en ancho y alto
   según el viewport disponible, evitando:
   - recortes
   - barras negras
   - efecto "aplastado"
   ========================================================== */

.catalog-page .catalog-hero-cover{
    width: clamp(230px, 24vw, 340px) !important;
    aspect-ratio: 2 / 3 !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
    background: transparent !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.catalog-page .catalog-hero-cover img{
    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    display:block !important;
    background: transparent !important;
}

/* Viewports bajos: reducir TODO el contenedor proporcionalmente */
@media (min-width:981px) and (max-height:820px){

    .catalog-page .catalog-hero-cover{
        width: clamp(200px, 21vw, 290px) !important;
    }
}

@media (min-width:981px) and (max-height:700px){

    .catalog-page .catalog-hero-cover{
        width: clamp(175px, 18vw, 250px) !important;
    }
}

/* Mobile / tablet */
@media (max-width:980px){

    .catalog-page .catalog-hero-cover{
        width: clamp(180px, 48vw, 290px) !important;
    }
}

@media (max-width:640px){

    .catalog-page .catalog-hero-cover{
        width: clamp(165px, 52vw, 250px) !important;
    }
}


/* ==========================================================
   HERO COVER UNIFORM REAL IMAGE FIT
   - Elimina el borde/margen visual que aparece en los lados superiores.
   - Todas las portadas del hero comparten el mismo tamaño visual.
   - La imagen se adapta al contenedor sin deformarse.
   - Si la proporción nativa no calza perfecto, se recorta apenas al centro
     para evitar barras o márgenes feos.
   ========================================================== */

.catalog-page .catalog-hero-cover{
    width: clamp(230px, 24vw, 340px) !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    max-height: min(58svh, 490px) !important;

    overflow: hidden !important;
    background: transparent !important;

    border: 0 !important;
    box-shadow:
        0 28px 76px rgba(0,0,0,.60),
        0 0 42px rgba(255,49,71,.16) !important;

    display:block !important;
}

.catalog-page .catalog-hero-cover::before,
.catalog-page .catalog-hero-cover::after{
    content:none !important;
    display:none !important;
}

.catalog-page .catalog-hero-cover img{
    width: 100% !important;
    height: 100% !important;
    display:block !important;

    object-fit: cover !important;
    object-position: center center !important;

    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.catalog-page .catalog-hero-cover:hover img{
    transform: scale(1.025) !important;
}

/* El badge inferior no debe crear sensación de borde externo */
.catalog-page .catalog-hero-cover span{
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    border: 0 !important;
}

/* Alturas medianas: escala proporcional del contenedor completo */
@media (min-width:981px) and (max-height:820px){
    .catalog-page .catalog-hero-cover{
        width: clamp(210px, 21vw, 300px) !important;
        max-height: min(48svh, 430px) !important;
    }
}

/* Alturas bajas: mantiene proporción y evita deformación/cortes raros */
@media (min-width:981px) and (max-height:700px){
    .catalog-page .catalog-hero-cover{
        width: clamp(185px, 18vw, 260px) !important;
        max-height: min(44svh, 370px) !important;
    }
}

/* Tablet */
@media (max-width:980px){
    .catalog-page .catalog-hero-cover{
        width: clamp(180px, 46vw, 290px) !important;
        max-height: none !important;
    }
}

/* Mobile, por si se decide mostrar portada en algún breakpoint futuro */
@media (max-width:640px){
    .catalog-page .catalog-hero-cover{
        width: clamp(165px, 52vw, 250px) !important;
    }
}


/* ==========================================================
   CATALOG HERO ONLY ONE ACTIVE SLIDE
   Corrección real del bug mobile:
   algunas reglas responsive convertían cada slide en position:relative,
   por eso quedaban en flujo vertical y se veían 2 títulos a la vez.
   Este bloque fuerza nuevamente el comportamiento de slider:
   todos los slides apilados, solo el activo visible.
   ========================================================== */

.catalog-page .catalog-hero-carousel{
    position:relative !important;
    overflow:hidden !important;
}

.catalog-page .catalog-hero-track{
    position:absolute !important;
    inset:0 !important;
    overflow:hidden !important;
}

.catalog-page .catalog-hero-slide{
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    left:50% !important;
    right:auto !important;
    z-index:1 !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

.catalog-page .catalog-hero-slide.is-active{
    z-index:2 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

/* Mobile/tablet: mantiene una sola slide visible aunque reglas anteriores
   hayan usado position:relative/display:block para acomodar portada. */
@media (max-width:768px){

    .catalog-page .catalog-hero-carousel{
        min-height:clamp(560px, 100svh, 720px) !important;
        overflow:hidden !important;
    }

    .catalog-page .catalog-hero-track{
        height:100% !important;
        min-height:inherit !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image){
        position:absolute !important;
        inset:0 auto 0 50% !important;
        width:min(calc(100% - 24px), 430px) !important;
        max-width:430px !important;
        height:100% !important;
        min-height:0 !important;

        display:block !important;
        padding:24px 14px 34px !important;
        overflow:hidden !important;

        transform:translateX(-50%) !important;
    }

    .catalog-page .catalog-hero-slide:not(.is-active){
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    .catalog-page .catalog-hero-slide.is-active{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }
}


/* ==========================================================
   MOBILE HERO TITLE COVER TOP ALIGNMENT
   En mobile corrige el slider de una sola slide:
   - sube el contenido completo del hero
   - alinea la portada con el inicio real del título
   - mantiene la portada al lado derecho sin empujar el flujo
   ========================================================== */

@media (max-width:768px){

    .catalog-page .catalog-hero-carousel{
        min-height:clamp(520px, 92svh, 650px) !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image),
    .catalog-page .catalog-hero-slide.is-active{
        padding-top:clamp(12px, 3.2svh, 20px) !important;
        padding-left:14px !important;
        padding-right:14px !important;
        padding-bottom:34px !important;
    }

    .catalog-page .catalog-hero-content{
        padding-top:0 !important;
        margin-top:0 !important;
        transform:none !important;
    }

    .catalog-page .catalog-hero-meta{
        margin-bottom:8px !important;
    }

    .catalog-page .catalog-hero-title-wrap{
        margin-bottom:10px !important;
    }

    /* La portada deja de bajar al centro: se ancla a la altura del título. */
    .catalog-page .catalog-hero-cover-scene{
        position:absolute !important;
        top:clamp(60px, 11svh, 78px) !important;
        right:14px !important;
        left:auto !important;
        bottom:auto !important;

        width:clamp(112px, 33vw, 144px) !important;
        min-width:clamp(112px, 33vw, 144px) !important;
        max-width:144px !important;

        height:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;
        transform:none !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover,
    .catalog-page .catalog-hero-cover{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        transform:none !important;
    }

    .catalog-page .catalog-hero-cover-art{
        inset:-10px !important;
    }

    .catalog-page .catalog-hero-actions{
        margin-top:18px !important;
    }

    .catalog-page .catalog-explore{
        margin-top:-42px !important;
    }
}

@media (max-width:430px){

    .catalog-page .catalog-hero-cover-scene{
        top:clamp(58px, 10.5svh, 72px) !important;
        width:clamp(104px, 31vw, 132px) !important;
        min-width:clamp(104px, 31vw, 132px) !important;
        max-width:132px !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1{
        font-size:clamp(42px, 14.4vw, 58px) !important;
    }

    .catalog-page .catalog-hero-title-jp{
        font-size:clamp(11px, 3.3vw, 14px) !important;
    }
}


/* ==========================================================
   MOBILE HERO COMPACT BALANCED LAYOUT
   Corrige la vista móvil del slider:
   - evita el vacío enorme superior
   - título y portada quedan como un bloque compacto
   - botones no chocan con explorar categorías
   - sigue mostrando solo una slide activa
   ========================================================== */

@media (max-width:768px){

    .catalog-page .catalog-hero-carousel{
        min-height:clamp(430px, 74svh, 560px) !important;
        overflow:hidden !important;
    }

    .catalog-page .catalog-hero-track{
        position:absolute !important;
        inset:0 !important;
        height:100% !important;
        overflow:hidden !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image),
    .catalog-page .catalog-hero-slide.is-active{
        position:absolute !important;
        inset:0 auto 0 50% !important;
        width:min(calc(100% - 24px), 430px) !important;
        max-width:430px !important;
        height:100% !important;

        display:grid !important;
        grid-template-columns:minmax(0, 1fr) clamp(112px, 34vw, 142px) !important;
        grid-template-areas:
            "meta  cover"
            "title cover"
            "desc  cover"
            "actions actions" !important;
        grid-template-rows:auto auto auto auto !important;
        align-content:start !important;
        align-items:start !important;
        column-gap:12px !important;
        row-gap:0 !important;

        padding:clamp(22px, 5svh, 38px) 14px 68px !important;
        overflow:hidden !important;
        transform:translateX(-50%) !important;
    }

    .catalog-page .catalog-hero-slide:not(.is-active){
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    .catalog-page .catalog-hero-slide.is-active{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }

    .catalog-page .catalog-hero-content{
        display:contents !important;
        width:auto !important;
        max-width:none !important;
        padding:0 !important;
        margin:0 !important;
        transform:none !important;
    }

    .catalog-page .catalog-hero-meta{
        grid-area:meta !important;
        align-self:start !important;
        width:auto !important;
        max-width:none !important;
        gap:5px !important;
        margin:0 0 8px 0 !important;
        padding:0 !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-meta span{
        min-height:21px !important;
        padding:4px 6px !important;
        font-size:10px !important;
        line-height:1 !important;
    }

    .catalog-page .catalog-hero-title-wrap{
        grid-area:title !important;
        width:100% !important;
        max-width:none !important;
        margin:0 0 8px 0 !important;
        padding:0 !important;
    }

    .catalog-page .catalog-hero-title,
    .catalog-page .catalog-hero-content h1{
        font-size:clamp(38px, 13vw, 54px) !important;
        line-height:.82 !important;
        letter-spacing:-.045em !important;
        max-width:100% !important;
    }

    .catalog-page .catalog-hero-title .catalog-hero-title-line:last-child{
        margin-top:-7px !important;
    }

    .catalog-page .catalog-hero-title-jp{
        font-size:clamp(11px, 3.2vw, 13px) !important;
        line-height:1.15 !important;
        margin-top:2px !important;
        max-width:100% !important;
    }

    .catalog-page .catalog-hero-content > p{
        grid-area:desc !important;
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        font-size:clamp(12px, 3.4vw, 14px) !important;
        line-height:1.35 !important;
        -webkit-line-clamp:2 !important;
    }

    .catalog-page .catalog-hero-actions{
        grid-area:actions !important;
        width:100% !important;
        max-width:none !important;
        margin-top:16px !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        padding:0 !important;
    }

    .catalog-page .catalog-hero-btn{
        min-width:0 !important;
        min-height:42px !important;
        padding:10px 9px !important;
        font-size:13px !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        grid-area:cover !important;
        position:relative !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;
        bottom:auto !important;

        width:clamp(112px, 34vw, 142px) !important;
        min-width:0 !important;
        max-width:142px !important;
        height:auto !important;
        min-height:0 !important;

        justify-self:end !important;
        align-self:start !important;
        margin:0 !important;
        padding:0 !important;
        transform:none !important;
        overflow:visible !important;
    }

    .catalog-page .catalog-hero-cover-scene .catalog-hero-cover,
    .catalog-page .catalog-hero-cover{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        transform:none !important;
    }

    .catalog-page .catalog-hero-cover-art{
        inset:-10px !important;
    }

    .catalog-page .catalog-explore{
        margin-top:-28px !important;
    }
}

@media (max-width:430px){

    .catalog-page .catalog-hero-carousel{
        min-height:clamp(420px, 72svh, 535px) !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image),
    .catalog-page .catalog-hero-slide.is-active{
        grid-template-columns:minmax(0, 1fr) clamp(104px, 32vw, 132px) !important;
        column-gap:10px !important;
        padding-top:clamp(20px, 4.5svh, 32px) !important;
    }

    .catalog-page .catalog-hero-cover-scene{
        width:clamp(104px, 32vw, 132px) !important;
        max-width:132px !important;
    }
}


/* ==========================================================
   MOBILE HERO FILTER GAP BALANCED
   Punto medio: reduce el espacio excesivo sin hacer que
   "Explora por categoría" se monte sobre los botones del hero.
   ========================================================== */

@media (max-width:768px){

    .catalog-page .catalog-first-fold{
        min-height:auto !important;
        height:auto !important;
        padding-bottom:0 !important;
    }

    .catalog-page .catalog-hero-carousel{
        height:clamp(350px, 55svh, 430px) !important;
        min-height:clamp(350px, 55svh, 430px) !important;
        max-height:430px !important;
        margin-bottom:0 !important;
        overflow:hidden !important;
    }

    .catalog-page .catalog-hero-track{
        height:100% !important;
        min-height:0 !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image),
    .catalog-page .catalog-hero-slide.is-active{
        height:100% !important;
        min-height:0 !important;
        padding-top:18px !important;
        padding-bottom:44px !important;
        align-content:start !important;
    }

    .catalog-page .catalog-hero-actions{
        margin-top:14px !important;
        margin-bottom:0 !important;
        position:relative !important;
        z-index:6 !important;
    }

    .catalog-page .catalog-explore{
        padding-bottom:18px !important;
        position:relative !important;
        z-index:5 !important;
    }
}

@media (max-width:430px){

    .catalog-page .catalog-hero-carousel{
        height:clamp(340px, 54svh, 410px) !important;
        min-height:clamp(340px, 54svh, 410px) !important;
        max-height:410px !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image),
    .catalog-page .catalog-hero-slide.is-active{
        padding-bottom:40px !important;
    }

    .catalog-page .catalog-explore{
        margin-top:8px !important;
    }
}

@media (max-width:768px) and (max-height:760px){

    .catalog-page .catalog-hero-carousel{
        height:clamp(330px, 52svh, 395px) !important;
        min-height:clamp(330px, 52svh, 395px) !important;
        max-height:395px !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image),
    .catalog-page .catalog-hero-slide.is-active{
        padding-bottom:36px !important;
    }

    .catalog-page .catalog-explore{
        margin-top:8px !important;
    }
}


/* ==========================================================
   HERO TITLE TWO LINE SMART CLAMP
   Evita que títulos largos rompan el slider.
   El título se limita visualmente a 2 líneas.
   Si el backend detecta que habría una tercera línea,
   la segunda línea ya llega con "..." al final.
   ========================================================== */

.catalog-page .catalog-hero-title-wrap{
    max-width:min(760px, 100%) !important;
    overflow:visible !important;
}

.catalog-page .catalog-hero-title{
    max-width:min(760px, 100%) !important;
    width:100% !important;
    overflow:visible !important;
}

.catalog-page .catalog-hero-title .catalog-hero-title-line{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

/* Títulos medianos/largos: se reduce de forma progresiva. */
.catalog-page .catalog-hero-title.catalog-hero-title--medium .catalog-hero-title-line:first-child{
    font-size:clamp(64px, 6.8vw, 104px) !important;
}

.catalog-page .catalog-hero-title.catalog-hero-title--medium .catalog-hero-title-line:last-child{
    font-size:clamp(72px, 7.6vw, 118px) !important;
}

.catalog-page .catalog-hero-title.catalog-hero-title--long .catalog-hero-title-line:first-child{
    font-size:clamp(56px, 5.8vw, 88px) !important;
}

.catalog-page .catalog-hero-title.catalog-hero-title--long .catalog-hero-title-line:last-child{
    font-size:clamp(62px, 6.4vw, 98px) !important;
    margin-top:-10px !important;
}

.catalog-page .catalog-hero-title.catalog-hero-title--xl .catalog-hero-title-line:first-child{
    font-size:clamp(48px, 5vw, 74px) !important;
}

.catalog-page .catalog-hero-title.catalog-hero-title--xl .catalog-hero-title-line:last-child{
    font-size:clamp(52px, 5.4vw, 82px) !important;
    margin-top:-8px !important;
}

/* Evita que la línea roja se salga cuando el título es largo. */
.catalog-page .catalog-hero-title.catalog-hero-title--long + .catalog-hero-title-jp,
.catalog-page .catalog-hero-title.catalog-hero-title--xl + .catalog-hero-title-jp{
    margin-top:6px !important;
}

/* Tablet/mobile: títulos largos todavía más compactos. */
@media (max-width:900px){
    .catalog-page .catalog-hero-title.catalog-hero-title--medium .catalog-hero-title-line:first-child{
        font-size:clamp(44px, 11vw, 68px) !important;
    }

    .catalog-page .catalog-hero-title.catalog-hero-title--medium .catalog-hero-title-line:last-child{
        font-size:clamp(48px, 12vw, 74px) !important;
    }

    .catalog-page .catalog-hero-title.catalog-hero-title--long .catalog-hero-title-line:first-child,
    .catalog-page .catalog-hero-title.catalog-hero-title--xl .catalog-hero-title-line:first-child{
        font-size:clamp(34px, 9.2vw, 54px) !important;
    }

    .catalog-page .catalog-hero-title.catalog-hero-title--long .catalog-hero-title-line:last-child,
    .catalog-page .catalog-hero-title.catalog-hero-title--xl .catalog-hero-title-line:last-child{
        font-size:clamp(36px, 9.8vw, 58px) !important;
        margin-top:-5px !important;
    }
}

@media (max-width:768px){
    .catalog-page .catalog-hero-title-wrap{
        min-width:0 !important;
        max-width:100% !important;
    }

    .catalog-page .catalog-hero-title{
        min-width:0 !important;
        max-width:100% !important;
    }

    .catalog-page .catalog-hero-title .catalog-hero-title-line{
        max-width:100% !important;
    }
}

@media (max-width:430px){
    .catalog-page .catalog-hero-title.catalog-hero-title--long .catalog-hero-title-line:first-child,
    .catalog-page .catalog-hero-title.catalog-hero-title--xl .catalog-hero-title-line:first-child{
        font-size:clamp(30px, 8.2vw, 44px) !important;
    }

    .catalog-page .catalog-hero-title.catalog-hero-title--long .catalog-hero-title-line:last-child,
    .catalog-page .catalog-hero-title.catalog-hero-title--xl .catalog-hero-title-line:last-child{
        font-size:clamp(32px, 8.7vw, 48px) !important;
    }
}


/* ==========================================================
   HERO TITLE DESCENDER SAFE AREA
   Evita que letras con descendentes largos como J, g, y, p, q
   se vean cortadas por el recorte horizontal/ellipsis del título.
   Se mantiene el límite de 2 líneas y el "..." para títulos largos.
   ========================================================== */

.catalog-page .catalog-hero-title-wrap,
.catalog-page .catalog-hero-title{
    overflow:visible !important;
}

.catalog-page .catalog-hero-title .catalog-hero-title-line{
    /*
      El overflow hidden se mantiene para el ellipsis horizontal,
      pero se agranda la caja vertical para que no corte la parte baja
      de letras tipo J/g/y/p.
    */
    line-height:1.04 !important;
    padding-top:.04em !important;
    padding-bottom:.24em !important;
    margin-bottom:-.24em !important;
    box-sizing:content-box !important;
}

.catalog-page .catalog-hero-title .catalog-hero-title-line + .catalog-hero-title-line{
    margin-top:-.18em !important;
}

/* Ajuste extra para títulos largos, donde el recorte era más notorio. */
.catalog-page .catalog-hero-title.catalog-hero-title--long .catalog-hero-title-line,
.catalog-page .catalog-hero-title.catalog-hero-title--xl .catalog-hero-title-line{
    line-height:1.07 !important;
    padding-bottom:.28em !important;
    margin-bottom:-.28em !important;
}

.catalog-page .catalog-hero-title.catalog-hero-title--long .catalog-hero-title-line + .catalog-hero-title-line,
.catalog-page .catalog-hero-title.catalog-hero-title--xl .catalog-hero-title-line + .catalog-hero-title-line{
    margin-top:-.14em !important;
}

@media (max-width:768px){
    .catalog-page .catalog-hero-title .catalog-hero-title-line{
        line-height:1.08 !important;
        padding-bottom:.30em !important;
        margin-bottom:-.30em !important;
    }

    .catalog-page .catalog-hero-title .catalog-hero-title-line + .catalog-hero-title-line{
        margin-top:-.12em !important;
    }
}


/* ==========================================================
   HERO TITLE JP RESPONSIVE GAP
   Evita que el título principal choque con el título japonés.
   El espacio se adapta según si el título es corto, medio, largo o XL.
   ========================================================== */

.catalog-page .catalog-hero-title-wrap{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    overflow:visible !important;
}

.catalog-page .catalog-hero-title{
    flex:0 0 auto !important;
}

.catalog-page .catalog-hero-title-jp{
    flex:0 0 auto !important;
    position:relative !important;
    z-index:3 !important;

    margin-top:clamp(10px, 1.4vw, 18px) !important;
    margin-left:clamp(18px, 3.4vw, 47px) !important;

    transform:none !important;
}

/* Cuando el título fue reducido por largo, deja más aire abajo. */
.catalog-page .catalog-hero-title.catalog-hero-title--medium + .catalog-hero-title-jp{
    margin-top:clamp(12px, 1.6vw, 20px) !important;
}

.catalog-page .catalog-hero-title.catalog-hero-title--long + .catalog-hero-title-jp{
    margin-top:clamp(14px, 1.9vw, 24px) !important;
}

.catalog-page .catalog-hero-title.catalog-hero-title--xl + .catalog-hero-title-jp{
    margin-top:clamp(16px, 2.2vw, 28px) !important;
}

/* La línea decorativa japonesa también se adapta para no meterse bajo el título. */
.catalog-page .catalog-hero-title-jp::after{
    align-self:center !important;
    flex:0 1 74px !important;
    min-width:36px !important;
}

/* Tablet */
@media (max-width:900px){
    .catalog-page .catalog-hero-title-jp{
        margin-top:12px !important;
        margin-left:clamp(10px, 2.8vw, 24px) !important;
        font-size:clamp(12px, 2.4vw, 16px) !important;
        line-height:1.25 !important;
    }

    .catalog-page .catalog-hero-title.catalog-hero-title--long + .catalog-hero-title-jp,
    .catalog-page .catalog-hero-title.catalog-hero-title--xl + .catalog-hero-title-jp{
        margin-top:15px !important;
    }
}

/* Mobile */
@media (max-width:768px){
    .catalog-page .catalog-hero-title-wrap{
        gap:0 !important;
    }

    .catalog-page .catalog-hero-title-jp{
        margin-top:10px !important;
        margin-left:8px !important;
        max-width:100% !important;
        font-size:clamp(11px, 3.1vw, 13px) !important;
        line-height:1.25 !important;
        letter-spacing:.08em !important;
    }

    .catalog-page .catalog-hero-title.catalog-hero-title--medium + .catalog-hero-title-jp,
    .catalog-page .catalog-hero-title.catalog-hero-title--long + .catalog-hero-title-jp,
    .catalog-page .catalog-hero-title.catalog-hero-title--xl + .catalog-hero-title-jp{
        margin-top:12px !important;
    }

    .catalog-page .catalog-hero-title-jp::after{
        max-width:48px !important;
    }
}

/* Mobile angosto: aumenta un poco más porque el brush baja más visualmente. */
@media (max-width:430px){
    .catalog-page .catalog-hero-title-jp{
        margin-top:11px !important;
        margin-left:6px !important;
    }

    .catalog-page .catalog-hero-title.catalog-hero-title--long + .catalog-hero-title-jp,
    .catalog-page .catalog-hero-title.catalog-hero-title--xl + .catalog-hero-title-jp{
        margin-top:13px !important;
    }
}


/* ==========================================================
   HERO DOTS COVER BOTTOM ALIGN
   - Texto japonés alineado a la izquierda.
   - Dots ubicados dentro del slider, abajo a la izquierda,
     a la altura visual donde termina la portada.
   - Mantiene margen mínimo para que no los pisen los botones.
   ========================================================== */

.catalog-page .catalog-hero-title-wrap{
    align-items:flex-start !important;
}

.catalog-page .catalog-hero-title-jp{
    margin-left:0 !important;
    padding-left:0 !important;
    text-align:left !important;
    justify-content:flex-start !important;
    align-self:flex-start !important;
}

/* Posición general: dentro del slider, no sobre "Explora por categoría". */
.catalog-page .catalog-hero-bottom{
    position:absolute !important;
    left:50% !important;
    bottom:clamp(78px, 10svh, 112px) !important;
    width:min(calc(100% - 64px), 1320px) !important;
    max-width:1320px !important;
    transform:translateX(-50%) !important;
    z-index:34 !important;
    pointer-events:none !important;

    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
}

.catalog-page .catalog-hero-dots{
    position:relative !important;
    z-index:35 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    pointer-events:auto !important;
}

.catalog-page .catalog-hero-dot{
    position:relative !important;
    z-index:36 !important;
    pointer-events:auto !important;
}

/* Botones: quedan encima en capa, pero con aire inferior para no tapar dots. */
.catalog-page .catalog-hero-actions{
    position:relative !important;
    z-index:20 !important;
    margin-bottom:clamp(14px, 2svh, 22px) !important;
}

/* Tablet/mobile: los dots se mantienen dentro del slider, cercanos al final de la portada. */
@media (max-width:768px){

    .catalog-page .catalog-hero-bottom{
        left:50% !important;
        width:min(calc(100% - 24px), 430px) !important;
        bottom:clamp(72px, 10svh, 92px) !important;
        padding-left:14px !important;
    }

    .catalog-page .catalog-hero-dots{
        gap:7px !important;
    }

    .catalog-page .catalog-hero-dot{
        width:22px !important;
        height:4px !important;
        min-width:22px !important;
        border-radius:999px !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image),
    .catalog-page .catalog-hero-slide.is-active{
        padding-bottom:clamp(72px, 10svh, 92px) !important;
    }

    .catalog-page .catalog-hero-actions{
        margin-bottom:clamp(18px, 3svh, 26px) !important;
    }
}

@media (max-width:430px){
    .catalog-page .catalog-hero-bottom{
        bottom:70px !important;
        padding-left:14px !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image),
    .catalog-page .catalog-hero-slide.is-active{
        padding-bottom:78px !important;
    }

    .catalog-page .catalog-hero-actions{
        margin-bottom:18px !important;
    }
}


/* ==========================================================
   HERO TITLE RESPONSIVE WIDTH EXPANSION
   Permite que el título del slider use más ancho disponible
   sin invadir la portada y manteniendo el corte inteligente en 2 líneas.
   ========================================================== */

.catalog-page{
    --hero-title-max-width: min(860px, 58vw);
}

/* Más espacio real para el bloque izquierdo */
.catalog-page .catalog-hero-content{
    max-width: var(--hero-title-max-width) !important;
    width: min(100%, var(--hero-title-max-width)) !important;
}

/* El contenedor del título hereda ese nuevo ancho */
.catalog-page .catalog-hero-title-wrap{
    width: min(100%, var(--hero-title-max-width)) !important;
    max-width: var(--hero-title-max-width) !important;
}

/* El h1 y cada línea pueden ocupar todo el ancho asignado */
.catalog-page .catalog-hero-title{
    width: 100% !important;
    max-width: 100% !important;
}

.catalog-page .catalog-hero-title .catalog-hero-title-line{
    max-width: 100% !important;
}

/* En pantallas muy amplias puede crecer un poco más */
@media (min-width:1400px){
    .catalog-page{
        --hero-title-max-width: min(980px, 60vw);
    }
}

/* En escritorio normal evita que choque con la portada */
@media (max-width:1180px){
    .catalog-page{
        --hero-title-max-width: min(760px, 54vw);
    }
}

/* Tablet: el ancho se adapta al layout disponible */
@media (max-width:900px){
    .catalog-page{
        --hero-title-max-width: 100%;
    }

    .catalog-page .catalog-hero-title-wrap,
    .catalog-page .catalog-hero-title{
        max-width: 100% !important;
    }
}

/* Mobile: respeta la columna izquierda definida junto a la portada */
@media (max-width:768px){
    .catalog-page .catalog-hero-title-wrap,
    .catalog-page .catalog-hero-title{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}


/* ==========================================================
   MOBILE HERO SLIDER CONTROLS
   En resoluciones tipo celular se ocultan los controles de
   desplazamiento del slider para despejar la visual del hero.
   El carrusel mantiene su rotación automática.
   ========================================================== */
@media (max-width: 768px) {
    .catalog-page .catalog-hero-bottom,
    .catalog-page .catalog-hero-dots,
    .catalog-page .catalog-hero-arrows,
    .catalog-page .catalog-hero-arrow,
    .catalog-page [data-catalog-hero-prev],
    .catalog-page [data-catalog-hero-next] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}


/* ==========================================================
   HERO SLIDER NAVIGATION REPOSITION + MOBILE TOUCH
   - En escritorio la navegación de puntos queda centrada en la
     parte inferior del slider.
   - Se eliminan visualmente las flechas de anterior/siguiente.
   - En resoluciones tipo celular se oculta la botonera visual;
     el cambio de slide queda disponible mediante arrastre táctil.
   ========================================================== */
.catalog-page .catalog-hero-bottom{
    left:50% !important;
    right:auto !important;
    bottom:clamp(24px, 4svh, 44px) !important;
    width:auto !important;
    max-width:calc(100% - 48px) !important;
    transform:translateX(-50%) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:10px 12px !important;
    border-radius:999px !important;
    background:rgba(5, 10, 22, .36) !important;
    border:1px solid rgba(255, 255, 255, .10) !important;
    box-shadow:0 14px 36px rgba(0, 0, 0, .28) !important;
    backdrop-filter:blur(14px) !important;
    pointer-events:auto !important;
}

.catalog-page .catalog-hero-dots{
    position:relative !important;
    z-index:40 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    pointer-events:auto !important;
}

.catalog-page .catalog-hero-dot{
    position:relative !important;
    z-index:41 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
}

.catalog-page .catalog-hero-arrows,
.catalog-page .catalog-hero-arrow,
.catalog-page [data-catalog-hero-prev],
.catalog-page [data-catalog-hero-next]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

@media (max-width: 768px) {
    .catalog-page [data-catalog-hero]{
        touch-action:pan-y !important;
    }

    .catalog-page .catalog-hero-bottom,
    .catalog-page .catalog-hero-dots,
    .catalog-page .catalog-hero-arrows,
    .catalog-page .catalog-hero-arrow,
    .catalog-page [data-catalog-hero-prev],
    .catalog-page [data-catalog-hero-next] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}


/* ==========================================================
   FIX FINAL - HERO SLIDER DOTS CLICKEABLES Y UBICACIÓN
   - La botonera de puntos queda centrada y claramente dentro
     del slider, antes de "Explora por categoría".
   - Se evita que la sección inferior la cubra.
   - En celular sigue oculta: el cambio queda por arrastre táctil.
   ========================================================== */
.catalog-page .catalog-hero-carousel{
    z-index:20 !important;
}

.catalog-page .catalog-hero-bottom{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:clamp(78px, 9svh, 104px) !important;
    width:auto !important;
    max-width:calc(100% - 48px) !important;
    transform:translateX(-50%) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:10px 14px !important;
    border-radius:999px !important;
    background:rgba(5, 10, 22, .42) !important;
    border:1px solid rgba(255, 255, 255, .10) !important;
    box-shadow:0 14px 36px rgba(0, 0, 0, .30) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    z-index:80 !important;
    pointer-events:auto !important;
}

.catalog-page .catalog-hero-dots{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    z-index:81 !important;
    pointer-events:auto !important;
}

.catalog-page .catalog-hero-dot{
    display:block !important;
    width:18px !important;
    min-width:18px !important;
    height:5px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px !important;
    position:relative !important;
    z-index:82 !important;
    background:rgba(255,255,255,.42) !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}

.catalog-page .catalog-hero-dot.is-active{
    width:30px !important;
    min-width:30px !important;
    background:#ff3147 !important;
}

.catalog-page .catalog-hero-arrows,
.catalog-page .catalog-hero-arrow,
.catalog-page [data-catalog-hero-prev],
.catalog-page [data-catalog-hero-next]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.catalog-explore{
    position:relative !important;
    z-index:12 !important;
}

.catalog-page .catalog-explore-controls{
    gap:8px !important;
}

html:has(body.catalog-page),
body.catalog-page{
    height:auto !important;
    min-height:100% !important;
}

body.catalog-page{
    min-height:100vh !important;
}

/* Mantiene los dots del slider separados de los filtros tras quitar el encabezado. */
@media (min-width: 769px){
    .catalog-page .catalog-first-fold{
        min-height:auto !important;
    }

    .catalog-page .catalog-explore-sticky-placeholder{
        display:none !important;
        height:0 !important;
    }

    .catalog-page .catalog-explore,
    .catalog-page .catalog-explore.is-sticky-fixed{
        position:sticky !important;
        top:var(--catalog-sticky-top, 84px) !important;
        left:auto !important;
        right:auto !important;
        width:var(--catalog-shell) !important;
        max-width:var(--catalog-shell-max) !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-bottom:clamp(24px, 4svh, 42px) !important;
        transform:none !important;
        pointer-events:auto !important;
        z-index:120 !important;
    }

    .catalog-page .catalog-explore-panel.is-active,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active{
        grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
        gap:12px !important;
        max-height:236px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding-top:5px !important;
        padding-left:0 !important;
        padding-right:6px !important;
        margin-top:-1px !important;
        scrollbar-width:thin !important;
        scrollbar-color:rgba(255,49,71,.78) rgba(255,255,255,.08) !important;
        scrollbar-gutter:stable !important;
        overscroll-behavior:contain !important;
    }

    .catalog-page .catalog-explore-panel.is-active::-webkit-scrollbar,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active::-webkit-scrollbar{
        width:6px !important;
    }

    .catalog-page .catalog-explore-panel.is-active::-webkit-scrollbar-track,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active::-webkit-scrollbar-track{
        background:rgba(255,255,255,.07) !important;
        border-radius:999px !important;
    }

    .catalog-page .catalog-explore-panel.is-active::-webkit-scrollbar-thumb,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active::-webkit-scrollbar-thumb{
        background:rgba(255,49,71,.78) !important;
        border-radius:999px !important;
    }

    .catalog-page .catalog-explore-card,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-card{
        min-height:112px !important;
        height:auto !important;
        padding:18px 12px !important;
        gap:12px !important;
    }

    .catalog-page .catalog-explore-icon,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-icon{
        width:42px !important;
        height:42px !important;
        flex:0 0 auto !important;
    }

    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-controls,
    .catalog-page .catalog-explore:not(.is-sticky-fixed) .catalog-explore-controls{
        padding-top:clamp(24px, 3svh, 36px) !important;
    }
}

@media (max-width: 768px){
    .catalog-page [data-catalog-hero]{
        touch-action:pan-y !important;
    }

    .catalog-page .catalog-hero-bottom,
    .catalog-page .catalog-hero-dots,
    .catalog-page .catalog-hero-dot,
    .catalog-page .catalog-hero-arrows,
    .catalog-page .catalog-hero-arrow,
    .catalog-page [data-catalog-hero-prev],
    .catalog-page [data-catalog-hero-next]{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image),
    .catalog-page .catalog-hero-slide.is-active{
        padding-bottom:clamp(10px, 2svh, 16px) !important;
    }

    .catalog-page .catalog-hero-actions{
        margin-bottom:0 !important;
    }

    .catalog-page .catalog-explore,
    .catalog-page .catalog-explore.is-sticky-fixed{
        margin-top:0 !important;
    }

    .catalog-page .catalog-explore:not(.is-sticky-fixed) .catalog-explore-controls{
        padding-top:0 !important;
    }
}

/* En celular los dots están ocultos, así que el hero no debe reservar aire extra. */
@media (max-width: 768px){
    .catalog-page .catalog-hero-carousel{
        height:clamp(286px, 35svh, 330px) !important;
        min-height:clamp(286px, 35svh, 330px) !important;
        max-height:330px !important;
    }

    .catalog-page .catalog-hero-track{
        height:100% !important;
        min-height:0 !important;
    }

    .catalog-page .catalog-hero-slide,
    .catalog-page .catalog-hero-slide:not(.catalog-hero-slide-full-image),
    .catalog-page .catalog-hero-slide.is-active{
        height:100% !important;
        min-height:0 !important;
        padding-bottom:12px !important;
    }

    .catalog-page .catalog-explore,
    .catalog-page .catalog-explore.is-sticky-fixed{
        margin-top:6px !important;
    }
}

/* Filtros desplegados compactos en celular. */
@media (max-width: 768px){
    .catalog-page .catalog-explore-panel.is-active,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
        gap:6px !important;
        max-height:110px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding-right:4px !important;
        scrollbar-width:thin !important;
        scrollbar-color:rgba(255,49,71,.78) rgba(255,255,255,.08) !important;
        scrollbar-gutter:stable !important;
        overscroll-behavior:contain !important;
    }

    .catalog-page .catalog-explore-panel.is-active::-webkit-scrollbar,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active::-webkit-scrollbar{
        width:6px !important;
    }

    .catalog-page .catalog-explore-panel.is-active::-webkit-scrollbar-track,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active::-webkit-scrollbar-track{
        background:rgba(255,255,255,.07) !important;
        border-radius:999px !important;
    }

    .catalog-page .catalog-explore-panel.is-active::-webkit-scrollbar-thumb,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active::-webkit-scrollbar-thumb{
        background:rgba(255,49,71,.78) !important;
        border-radius:999px !important;
    }

    .catalog-page .catalog-explore-card,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-card{
        min-height:52px !important;
        height:52px !important;
        padding:5px 4px !important;
        gap:3px !important;
        font-size:10.5px !important;
        line-height:1.05 !important;
    }

    .catalog-page .catalog-explore-icon,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-icon{
        width:16px !important;
        height:16px !important;
        flex:0 0 16px !important;
    }

    .catalog-page .catalog-explore-card span,
    .catalog-page .catalog-explore-card strong{
        font-size:10.5px !important;
        line-height:1.05 !important;
    }
}

@media (max-width: 390px){
    .catalog-page .catalog-explore-panel.is-active,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-panel.is-active{
        max-height:102px !important;
    }

    .catalog-page .catalog-explore-card,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-card{
        min-height:48px !important;
        height:48px !important;
        padding:4px 3px !important;
    }

    .catalog-page .catalog-explore-icon,
    .catalog-page .catalog-explore.is-sticky-fixed .catalog-explore-icon{
        width:14px !important;
        height:14px !important;
        flex-basis:14px !important;
    }

    .catalog-page .catalog-explore-card span,
    .catalog-page .catalog-explore-card strong{
        font-size:10px !important;
    }
}