/* =========================================================================
   Cinema Content Manager — frontend.css
   Design taste: premium cinematic; emil-design-eng micro-interactions.
   Custom easing curves, transform/opacity only, no all-property transitions,
   no pure-black background, single desaturated accent, system font stack.
   ========================================================================= */

:root {
    /* Surface — off-black with slight cool tint (not #000) */
    --ccm-bg-1:    #0b0b0d;
    --ccm-bg-2:    #131316;
    --ccm-bg-3:    #1a1a1d;

    /* Text */
    --ccm-fg:      #f4f4f5;
    --ccm-fg-2:    #a1a1aa;
    --ccm-fg-3:    #71717a;

    /* Accent — slightly desaturated red */
    --ccm-accent:        #d4322b;
    --ccm-accent-strong: #b62721;

    /* Borders & dividers */
    --ccm-border:   rgba(255, 255, 255, 0.06);
    --ccm-border-2: rgba(255, 255, 255, 0.10);

    /* Status colors (kept for badges) */
    --ccm-status-in-theaters: #4ade80;
    --ccm-status-coming-soon: #fbbf24;
    --ccm-status-archived:    #71717a;

    /* Easing curves (Emil's stronger variants — built-in cubics are too weak) */
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

    /* Type scale */
    --ccm-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight",
                "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
}

/* Page baseline ----------------------------------------------------------- */

body {
    background: var(--ccm-bg-1);
    color: var(--ccm-fg);
    font-family: var(--ccm-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
   1. Single Movie — Hero + Poster Hero + Body
   ========================================================================= */

.ccm-movie {
    color: var(--ccm-fg);
    max-width: 1280px;
    margin: 0 auto;
    font-family: var(--ccm-font);
}

/* Hero (panoramic) */
.ccm-movie__hero {
    position: relative;
    min-height: 68vh;
    overflow: hidden;
    margin-bottom: 32px;
    isolation: isolate;
}
.ccm-movie__hero-img { position: absolute; inset: 0; z-index: -1; }
.ccm-movie__hero-img img,
.ccm-movie__hero-img source {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.ccm-movie__hero::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, rgba(11,11,13,0.4) 40%, var(--ccm-bg-1) 100%),
        linear-gradient(90deg,  rgba(11,11,13,0.55) 0%, rgba(11,11,13,0.1) 60%);
    z-index: -1;
}
.ccm-movie__hero-overlay {
    position: relative;
    padding: clamp(48px, 8vh, 96px) clamp(24px, 5vw, 64px) 48px;
    max-width: 700px;
}
.ccm-movie__hero-logo { max-width: 380px; height: auto; margin-bottom: 12px; }
.ccm-movie__hero-title {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    margin: 0 0 16px;
}
.ccm-movie__hero-tagline {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--ccm-fg-2);
    line-height: 1.5;
    max-width: 55ch;
    margin: 0 0 12px;
}
.ccm-movie__hero-release {
    display: inline-flex;
    align-items: center;
    color: var(--ccm-fg-2);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--ccm-border-2);
    backdrop-filter: blur(8px);
}

/* Poster hero (fallback when no panoramic hero is loaded) */
.ccm-movie__poster-hero {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: end;
    padding: clamp(32px, 5vh, 64px) clamp(24px, 4vw, 48px) clamp(24px, 4vh, 40px);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(212,50,43,0.08) 0%, transparent 50%),
        linear-gradient(180deg, var(--ccm-bg-2) 0%, var(--ccm-bg-1) 100%);
    border-bottom: 1px solid var(--ccm-border);
    margin-bottom: 32px;
}
.ccm-movie__poster-hero-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.7),
        0 0 0 1px var(--ccm-border-2) inset;
    display: block;
}
.ccm-movie__poster-hero-meta { padding-bottom: 16px; }
.ccm-movie__poster-hero-title {
    font-size: clamp(1.875rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    margin: 0 0 16px;
}
.ccm-movie__poster-hero-tagline {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--ccm-fg-2);
    line-height: 1.5;
    max-width: 50ch;
    margin: 0 0 16px;
}
.ccm-movie__poster-hero-release {
    display: inline-flex;
    align-items: center;
    color: var(--ccm-fg-2);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--ccm-border-2);
}

@media (max-width: 720px) {
    .ccm-movie__poster-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: left;
    }
    .ccm-movie__poster-hero-img { max-width: 240px; }
}

/* Plain header fallback */
.ccm-movie__header { padding: 32px 24px 16px; }
.ccm-movie__title { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 8px; }
.ccm-movie__tagline { color: var(--ccm-fg-2); margin: 0 0 16px; }

/* Body */
.ccm-movie__body {
    padding: 0 clamp(24px, 5vw, 64px) 64px;
    max-width: 920px;
    margin: 0 auto;
}
.ccm-movie__synopsis-short p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ccm-fg);
    max-width: 65ch;
    margin: 0 0 24px;
}
.ccm-movie__synopsis-full {
    line-height: 1.7;
    color: var(--ccm-fg-2);
    max-width: 65ch;
    margin: 24px 0;
}

/* Credits */
.ccm-movie__credits {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--ccm-border);
}
.ccm-movie__credits-title,
.ccm-movie__gallery-title,
.ccm-movie__trailers-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ccm-fg-3);
    margin: 0 0 24px;
}
.ccm-movie__credits-list {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 12px 32px;
    margin: 0;
}
.ccm-movie__credits-list dt {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ccm-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ccm-movie__credits-list dd {
    margin: 0;
    color: var(--ccm-fg);
    line-height: 1.5;
}

/* =========================================================================
   2. CTA Button
   ========================================================================= */

.ccm-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background: var(--ccm-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    border: 0;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition:
        transform 160ms var(--ease-out),
        background-color 160ms var(--ease-out);
    will-change: transform;
}
.ccm-cta:hover { background: var(--ccm-accent-strong); }
.ccm-cta:active { transform: scale(0.97); }
.ccm-cta--disabled {
    background: var(--ccm-bg-3);
    color: var(--ccm-fg-3);
    cursor: not-allowed;
    box-shadow: none;
}
.ccm-cta--disabled:hover { background: var(--ccm-bg-3); }
.ccm-cta--message {
    background: transparent;
    color: var(--ccm-fg-2);
    padding: 12px 0;
    font-style: italic;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    font-weight: 400;
}

/* =========================================================================
   3. Gallery + Lightbox
   ========================================================================= */

.ccm-movie__gallery { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ccm-border); }
.ccm-movie__gallery-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ccm-movie__gallery-list a {
    display: block;
    outline: none;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ccm-bg-2);
    aspect-ratio: 1 / 1;
    position: relative;
    transition: transform 200ms var(--ease-out);
    will-change: transform;
}
.ccm-movie__gallery-list a:hover { transform: translateY(-2px); }
.ccm-movie__gallery-list a:focus-visible { outline: 2px solid var(--ccm-accent); outline-offset: 3px; }
.ccm-movie__gallery-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: transform 250ms var(--ease-out);
}
.ccm-movie__gallery-list a:hover img { transform: scale(1.04); }

/* Lightbox modal */
.ccm-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(11, 11, 13, 0.95);
    backdrop-filter: blur(20px);
    display: none;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 4vh 6vw;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 220ms var(--ease-out);
}
.ccm-lightbox.is-open { display: flex; opacity: 1; }
.ccm-lightbox__stage {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.ccm-lightbox__img {
    max-width: 100%;
    max-height: 82vh;
    height: auto;
    width: auto;
    display: block;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}
.ccm-lightbox__caption {
    color: var(--ccm-fg-2);
    font-size: 0.9rem;
    text-align: center;
    max-width: 80ch;
    margin: 0;
    line-height: 1.5;
}
.ccm-lightbox__counter {
    position: absolute;
    top: 16px;
    left: 16px;
    color: var(--ccm-fg-2);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.ccm-lightbox__close,
.ccm-lightbox__nav {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid var(--ccm-border-2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
    transition:
        background-color 150ms var(--ease-out),
        transform 150ms var(--ease-out),
        border-color 150ms var(--ease-out);
}
.ccm-lightbox__close svg,
.ccm-lightbox__nav svg { display: block; }
.ccm-lightbox__close:hover,
.ccm-lightbox__nav:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
}
.ccm-lightbox__close:active,
.ccm-lightbox__nav:active { transform: scale(0.93); }
.ccm-lightbox__close:focus-visible,
.ccm-lightbox__nav:focus-visible { outline: 2px solid var(--ccm-accent); outline-offset: 2px; }
.ccm-lightbox__close { top: 16px; right: 16px; width: 44px; height: 44px; }
.ccm-lightbox__nav   { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; }
.ccm-lightbox__nav--prev { left: 24px; }
.ccm-lightbox__nav--next { right: 24px; }
.ccm-lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }
.ccm-lightbox__nav:active { transform: translateY(-50%) scale(0.93); }

@media (max-width: 720px) {
    .ccm-lightbox { padding: 2vh 2vw; }
    .ccm-lightbox__nav { width: 44px; height: 44px; }
    .ccm-lightbox__nav svg { width: 22px; height: 22px; }
    .ccm-lightbox__nav--prev { left: 8px; }
    .ccm-lightbox__nav--next { right: 8px; }
}

.ccm-lightbox__iframe {
    width: min(85vw, 1280px);
    height: min(60vh, 720px);
    aspect-ratio: 16 / 9;
    border: 0;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}

/* =========================================================================
   4. Listings + Filters + Search
   ========================================================================= */

.ccm-listing {
    padding: 48px clamp(20px, 4vw, 48px) 80px;
    max-width: 1400px;
    margin: 0 auto;
}
.ccm-listing__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
}
.ccm-listing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: start;  /* don't stretch cards to match the tallest in the row */
}
.ccm-listing__grid > li { list-style: none; }
.ccm-listing__empty {
    text-align: center;
    color: var(--ccm-fg-3);
    padding: 64px 24px;
    font-style: italic;
    border: 1px dashed var(--ccm-border-2);
    border-radius: 8px;
}

/* "Ver más" CTA — rendered after a listing grid when view_all="<url>" is set. */
.ccm-listing__view-all {
    display: flex;
    justify-content: center;
    margin: 32px 0 12px;
    padding: 0 clamp(16px, 4vw, 32px);
}
.ccm-listing__view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--ccm-fg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%),
        var(--ccm-bg-2);
    border: 1px solid var(--ccm-border-2);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 220ms var(--ease-apple, var(--ease-out)),
        background 220ms var(--ease-out),
        border-color 220ms var(--ease-out),
        box-shadow 220ms var(--ease-out);
}
.ccm-listing__view-all-btn:hover {
    transform: translateY(-2px);
    color: var(--ccm-fg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%),
        var(--ccm-bg-3);
    border-color: var(--ccm-fg-3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 20px -8px rgba(0, 0, 0, 0.45);
}
.ccm-listing__view-all-btn:hover svg {
    transform: translateX(3px);
}
.ccm-listing__view-all-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 240ms var(--ease-apple, var(--ease-out));
}

/* Filters */
.ccm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
    padding: 20px 24px;
    background: var(--ccm-bg-2);
    border: 1px solid var(--ccm-border);
    border-radius: 12px;
}
.ccm-filters label {
    color: var(--ccm-fg-3);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 180px;
}
.ccm-filters input,
.ccm-filters select {
    background: var(--ccm-bg-3);
    color: var(--ccm-fg);
    border: 1px solid var(--ccm-border-2);
    padding: 10px 12px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    transition: border-color 150ms var(--ease-out);
    /* color-scheme tells the browser/OS to use dark UI for the dropdown
       popup (Windows Chrome/Edge/Firefox respect this). */
    color-scheme: dark;
}
.ccm-filters input:focus,
.ccm-filters select:focus {
    outline: none;
    border-color: var(--ccm-accent);
}
/* Style the dropdown <option> list so Windows browsers (Chrome/Firefox/Edge)
   don't fall back to the OS native popup colors (cream-on-dark-blue in
   Firefox, dark-on-dark in Chrome — both unreadable on our dark theme).
   These three properties are the only ones option supports cross-browser. */
.ccm-filters select option,
.ccm-showtimes__geo select option,
.ccm-showtimes__select-filter select option,
.ccm-filters-bar select option {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 8px 12px;
}
.ccm-filters select option:checked,
.ccm-showtimes__geo select option:checked,
.ccm-showtimes__select-filter select option:checked,
.ccm-filters-bar select option:checked {
    background-color: #d63638;
    color: #ffffff;
}
.ccm-filters button {
    align-self: end;
    background: var(--ccm-fg);
    color: var(--ccm-bg-1);
    border: 0;
    padding: 11px 22px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.ccm-filters button:hover { background: #fff; }
.ccm-filters button:active { transform: scale(0.97); }
.ccm-filters__reset {
    background: transparent !important;
    color: var(--ccm-fg-3) !important;
    padding: 11px 14px !important;
    text-decoration: underline;
    font-size: 0.85rem;
    align-self: end;
}

/* Search shortcode */
.ccm-search {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
    padding: 24px;
}
.ccm-search input {
    flex: 1;
    background: var(--ccm-bg-2);
    color: var(--ccm-fg);
    border: 1px solid var(--ccm-border-2);
    padding: 12px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 150ms var(--ease-out);
}
.ccm-search input:focus { outline: none; border-color: var(--ccm-accent); }
.ccm-search button {
    background: var(--ccm-fg);
    color: var(--ccm-bg-1);
    border: 0;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 160ms var(--ease-out);
}
.ccm-search button:active { transform: scale(0.97); }

/* =========================================================================
   5. Movie Card (the most-used component)
   ========================================================================= */

.ccm-card {
    background: var(--ccm-bg-2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 0 1px var(--ccm-border);
    transition:
        transform 220ms var(--ease-out),
        box-shadow 220ms var(--ease-out);
    will-change: transform;
    /* Staggered entry via CSS custom property */
    opacity: 0;
    transform: translateY(8px);
    animation: ccm-card-in 360ms var(--ease-out) forwards;
    animation-delay: calc(var(--ccm-card-i, 0) * 40ms);
}
@keyframes ccm-card-in {
    to { opacity: 1; transform: translateY(0); }
}
.ccm-card:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 0 0 1px rgba(212, 50, 43, 0.25),
        0 16px 40px -12px rgba(0, 0, 0, 0.6);
}
.ccm-card__poster-link {
    display: block;
    /* 4:5 — the actual ratio UIP uses for ~90% of posters. Outliers get
       a small top/bottom crop via object-fit: cover on the <img>. */
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ccm-bg-3);
    position: relative;
}
.ccm-card__poster-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(11, 11, 13, 0.5) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms var(--ease-out);
}
.ccm-card:hover .ccm-card__poster-link::after { opacity: 1; }
.ccm-card__poster {
    /* Absolute fill so a theme rule (img { height: auto }) can't shrink
       the image to its intrinsic aspect ratio and leave a gap. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 360ms var(--ease-out);
}
.ccm-card:hover .ccm-card__poster { transform: scale(1.04); }
.ccm-card__poster--placeholder {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at center, var(--ccm-bg-3) 0%, var(--ccm-bg-2) 100%);
}
.ccm-card__body {
    padding: 10px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;       /* center children horizontally */
    text-align: center;
    /* No flex:1 — body sizes to content, no extra vertical space between
       poster and date. The grid uses align-items:start so cards in the
       same row don't stretch to match a taller neighbor (e.g. one with
       a CTA button). */
}
.ccm-card__release {
    color: var(--ccm-fg);
    font-size: 0.875rem;        /* was 0.75rem → +2px */
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.005em;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.ccm-card__cta { padding-top: 2px; width: 100%; }
.ccm-card__cta .ccm-cta {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

/* =========================================================================
   6. Hero Carousel (home) — HBO Max style with YouTube background
   ========================================================================= */

.ccm-hero {
    /* Full-bleed technique: element is 100vw wide, positioned so its
       CENTER aligns with the viewport center via left:50% + translateX(-50%).
       This is more robust than the classic `left:50%; margin-left:-50vw`
       when a parent container has padding — because translate is relative
       to the element's own width, not to the parent's box. */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100vw;
    min-height: 78vh;
    max-height: 820px;
    overflow: hidden;
    margin-bottom: 48px;
    background: var(--ccm-bg-1);
    isolation: isolate;
    box-sizing: border-box;
}
.ccm-hero__slides {
    position: relative;
    height: 78vh;
    max-height: 820px;
}

.ccm-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 700ms var(--ease-in-out);
    pointer-events: none;
    display: flex;
    align-items: flex-end;
}
.ccm-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* Background media (thumbnail by default, iframe overlay when injected) */
.ccm-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}
.ccm-hero__media-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    /* Subtle Ken Burns so even age-restricted / iframe-blocked videos
       feel alive. Pauses in prefers-reduced-motion (see below). */
    transform-origin: 65% 50%;
    animation: ccm-hero-ken-burns 22s ease-in-out infinite alternate;
    /* Returning to visible (video just hid) is quick, so the thumbnail
       covers any YouTube chrome gap during a playlist transition fast. */
    transition: opacity 250ms var(--ease-out);
}
@keyframes ccm-hero-ken-burns {
    0%   { transform: scale(1.02) translate3d(0, 0, 0); }
    100% { transform: scale(1.10) translate3d(-1.5%, 1%, 0); }
}
/* Radial mask: darkens the center 40% of the hero to hide YouTube's
   state-controls overlay (skip/pause/skip). Only appears when a video is
   actually playing so the static image is never darkened unnecessarily. */
/* Radial mask removed: YouTube controls are now interactive, no need
   to hide them. If they show, user can pause/skip. */

/* MP4 background video (self-hosted, native HTML5). Replaces the old
   YouTube iframe that had unhideable state controls. This element has
   NO controls attribute, so the browser renders nothing but the video
   surface — no chrome, no skip/pause buttons, ever. */
.ccm-hero__media-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: 0;
    /* Fade in when JS confirms playback via the .is-video-playing class */
    opacity: 0;
    transition: opacity 700ms var(--ease-in-out);
    /* Belt-and-suspenders: even if the browser somehow shows controls,
       they can't be clicked, and no context menu appears. */
    pointer-events: none;
    user-select: none;
}
.ccm-hero__media.is-video-playing .ccm-hero__media-video {
    opacity: 1;
}
/* Fading out under the incoming video is a slower, smooth crossfade. */
.ccm-hero__media.is-video-playing .ccm-hero__media-thumb {
    opacity: 0;
    transition: opacity 500ms var(--ease-in-out);
}

.ccm-hero__media-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    height: 100vh;
    min-width: 100%;
    min-height: 56.25vw;
    transform: translate(-50%, -50%) scale(1.45);
    /* pointer-events: none — el iframe NUNCA recibe hover/tap, así YouTube
       jamás muestra su chrome (⏮ ⏸ ⏭, barra de título, etc.). Es un fondo
       decorativo puro; el JS mantiene la reproducción vía IFrame API y
       auto-reanuda si YT pausa (tab oculta, etc.). El scale 1.45 recorta
       el watermark y el gradiente de título fuera del viewport. */
    pointer-events: none;
    border: 0;
    display: block;
    /* CHROME FIX — the iframe is visible ONLY while the JS reports the
       YouTube player is strictly PLAYING. The hidden (default) state has
       NO transition, so the instant the player leaves PLAYING (buffering,
       ended, paused, or a playlist transition) the iframe vanishes with
       zero fade — before any YouTube chrome (⏮ ⏸ ⏭, title, next-video
       card, end-screen) can be seen. The thumbnail underneath covers the
       gap. Showing fades in smoothly (rule below). */
    opacity: 0;
    visibility: hidden;
    transition: none;
}
.ccm-hero__media.is-video-playing .ccm-hero__media-iframe {
    opacity: 1;
    visibility: visible;
    transition: opacity 500ms var(--ease-out);
}
/* Only fade out the thumbnail when JS confirmed playback is actually working.
   If YouTube refused embedding (age-restricted, region-locked, embed-disabled),
   the iframe is removed by JS and the thumbnail with Ken Burns stays as the
   permanent backdrop — no error pane is ever shown to the user. */
.ccm-hero__media.is-video-playing .ccm-hero__media-thumb { opacity: 0; }

/* Gradient overlays — match the HBO Max example.
   pointer-events: auto blocks the YouTube iframe (which sits below at z-index -1)
   from receiving mouse events, preventing YouTube's hover-revealed player chrome
   (prev/play/next buttons) from showing. Content above (z-index: 2) still gets clicks. */
.ccm-hero__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Vertical primary shade (transparent top → dark bottom) for text
       legibility, applied edge-to-edge across the full slide width. */
    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(11, 11, 13, 0.20) 35%,
            rgba(11, 11, 13, 0.55) 60%,
            rgba(11, 11, 13, 0.85) 80%,
            rgba(11, 11, 13, 0.96) 92%,
            var(--ccm-bg-1) 100%
        );
    z-index: 0;
    pointer-events: auto;
    cursor: grab;
}
/* Solid bottom band, guaranteed edge-to-edge — sits above ::before and
   below the content. Makes the studio logo + title + release info always
   readable regardless of trailer brightness. */
.ccm-hero__slide::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 40%,
        rgba(0, 0, 0, 0.75) 75%,
        rgba(0, 0, 0, 0.92) 100%
    );
    z-index: 1;
    pointer-events: none;
}
/* When the user is actively dragging the hero to swipe slides */
.ccm-hero.is-dragging,
.ccm-hero.is-dragging .ccm-hero__slide::before,
[data-ccm-hero].is-dragging,
[data-ccm-hero].is-dragging .ccm-hero__slide::before {
    cursor: grabbing;
}
/* Prevent text selection while dragging across the hero */
[data-ccm-hero].is-dragging {
    user-select: none;
    -webkit-user-select: none;
}

.ccm-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    /* No padding here — content container spans the full slide so the
       bottom gradient / band goes edge-to-edge. Padding lives on the
       inner .ccm-hero__bottom stack instead (see below). */
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--ccm-fg);
}

/* Studio mark — inside .ccm-hero__bottom, above the title */
.ccm-hero__studio {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: auto;
    padding: 0;
    margin-bottom: 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ccm-hero__studio-logo {
    max-height: 40px;
    width: auto;
    height: auto;
    display: block;
    filter: brightness(1.05);
    opacity: 0.95;
}
.ccm-hero__studio-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ccm-fg);
    opacity: 0.85;
}

/* Bottom content stack — full width so the bottom band + gradient extend
   edge-to-edge across the hero, not constrained to 880px on the left.
   Padding lives HERE (not on .ccm-hero__content) so the text/logos have
   breathing room but the gradient above them still hits the viewport edges. */
.ccm-hero__bottom {
    width: 100%;
    padding: 0 clamp(24px, 3.5vw, 56px) clamp(24px, 3.5vw, 56px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ccm-hero__logo-link { display: inline-block; max-width: 520px; }
.ccm-hero__logo {
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 6px 32px rgba(0,0,0,0.6));
}
.ccm-hero__title {
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 22ch;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.ccm-hero__title a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms var(--ease-out);
}
.ccm-hero__title a:hover { color: var(--ccm-accent); }

.ccm-hero__tagline {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    color: var(--ccm-fg-2);
    line-height: 1.5;
    margin: 0;
    max-width: 55ch;
    text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}

/* Meta — minimal: just the year, small uppercase */
.ccm-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ccm-fg-2);
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.ccm-hero__meta-sep {
    color: var(--ccm-fg-3);
    opacity: 0.6;
}

/* CTA row (release date + button on same line) */
.ccm-hero__cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.ccm-hero__cta-row .ccm-cta {
    padding: 16px 32px;
    font-size: 0.85rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 10px 30px -10px rgba(212, 50, 43, 0.5);
}
.ccm-hero__release {
    color: var(--ccm-fg);
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* Dot navigation */
.ccm-hero__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 4;
}
.ccm-hero__dot {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition:
        background-color 200ms var(--ease-out),
        width 280ms var(--ease-out);
}
.ccm-hero__dot:hover { background: rgba(255, 255, 255, 0.5); }
.ccm-hero__dot.is-active {
    background: var(--ccm-fg);
    width: 40px;
}

@media (max-width: 720px) {
    /* Compact hero on mobile — was eating the whole viewport */
    .ccm-hero {
        min-height: 56vh;
        max-height: 540px;
        margin-bottom: 24px;
    }
    .ccm-hero__slides { min-height: 56vh; max-height: 540px; height: 56vh; }
    .ccm-hero__slide { position: absolute; min-height: 0; }
    .ccm-hero__content {
        /* No padding here — gradient goes edge-to-edge on mobile too */
        padding: 0;
        justify-content: flex-end;
    }
    .ccm-hero__bottom {
        padding: 0 20px 56px;  /* content padding + room for dots below */
    }

    /* Thumbnail framing: 16:9 trailer image into a portrait viewport.
       Center the subject area, disable Ken Burns (cropped too aggressively). */
    .ccm-hero__media-thumb {
        animation: none;
        transform: none;
        object-position: 50% 35%;
    }

    /* Iframe sizing on mobile: the desktop rule (100vh / scale 1.45) over-
       extends the iframe; on portrait it leaves visible YouTube chrome edges.
       Anchor the iframe to the hero height directly. */
    .ccm-hero__media-iframe {
        width: 178vw;
        height: calc(178vw * 9 / 16);
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%) scale(1.6);
    }

    /* Stronger bottom gradient — text needs contrast over light areas */
    .ccm-hero__slide::before {
        background:
            linear-gradient(180deg, transparent 0%, rgba(11,11,13,0.7) 55%, rgba(11,11,13,0.95) 90%, var(--ccm-bg-1) 100%);
    }

    /* Content sizing */
    .ccm-hero__bottom { max-width: 100%; gap: 10px; }
    .ccm-hero__studio-logo { max-height: 26px; }
    .ccm-hero__logo { max-height: 100px; }
    .ccm-hero__title {
        font-size: clamp(1.05rem, 4.5vw, 1.35rem);
        line-height: 1.15;
        max-width: 100%;
    }
    .ccm-hero__cta-row { gap: 12px; align-items: center; }
    .ccm-hero__cta-row .ccm-cta {
        padding: 11px 18px;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }
    .ccm-hero__release { font-size: 0.8rem; }

    /* Dots stay inside the hero, near the bottom */
    .ccm-hero__dots { bottom: 14px; gap: 6px; }
    .ccm-hero__dot { width: 22px; }
    .ccm-hero__dot.is-active { width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .ccm-hero__slide { transition: none; }
    .ccm-hero__media-thumb { transform: none; transition: none; animation: none; }
}

/* =========================================================================
   7. Studios Landing
   ========================================================================= */

.ccm-studio { color: var(--ccm-fg); }

/* Studio landing hero — full-bleed, layered: ambient backdrop + glass card */
.ccm-studio__hero {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px clamp(20px, 4vw, 48px) 64px;
    isolation: isolate;
}
.ccm-studio__hero::before {
    /* Subtle accent glow centered on the hero — uses the studio's color if set,
       otherwise a neutral light tint. */
    content: '';
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse at center, var(--ccm-studio-color, rgba(255, 255, 255, 0.08)) 0%, transparent 60%);
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
    filter: blur(40px);
}
.ccm-studio__hero-bg {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    z-index: -2;
}
.ccm-studio__hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ccm-studio__hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11,11,13,0.4) 0%, rgba(11,11,13,0.85) 70%, var(--ccm-bg-1) 100%);
}

/* Glass card holding the logo + name + description + socials */
.ccm-studio__hero-content {
    position: relative;
    max-width: 720px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 36px clamp(20px, 4vw, 48px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),
        rgba(20, 20, 24, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 20px 60px -20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.ccm-studio__logo {
    max-width: 140px;
    max-height: 140px;
    width: auto;
    height: auto;
    margin: 0;
    display: block;
    filter: brightness(1.05);
}
.ccm-studio__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--ccm-fg);
    line-height: 1.15;
}
.ccm-studio__desc {
    color: var(--ccm-fg-2);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 56ch;
    margin: 0;
}

/* Social icons row inside the studio hero card */
.ccm-studio__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
}
.ccm-studio__socials li { margin: 0; }
.ccm-studio__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--ccm-fg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.ccm-studio__socials a:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px) scale(1.05);
    color: var(--ccm-fg);
}
.ccm-studio__socials svg {
    width: 18px;
    height: 18px;
    display: block;
}

@media (max-width: 720px) {
    .ccm-studio__hero { min-height: 360px; padding: 48px 16px 40px; }
    .ccm-studio__hero-content { padding: 28px 22px; gap: 14px; border-radius: 20px; }
    .ccm-studio__logo { max-width: 100px; max-height: 100px; }
    .ccm-studio__title { font-size: clamp(1.5rem, 6vw, 2rem); }
    .ccm-studio__desc { font-size: 0.95rem; }
    .ccm-studio__socials a { width: 40px; height: 40px; }
    .ccm-studio__socials svg { width: 16px; height: 16px; }
}
.ccm-studio__section {
    padding: 48px clamp(20px, 4vw, 48px);
    max-width: 1400px;
    margin: 0 auto;
}
.ccm-studio__section .ccm-listing { padding: 0; }

/* Studios grid */
/* Studios grid — card with logo + name + social icons row */
.ccm-studios-grid {
    --ccm-studios-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--ccm-studios-cols), 1fr);
    gap: 18px;
    list-style: none;
    padding: 48px clamp(20px, 4vw, 48px);
    margin: 0 auto;
    max-width: 1400px;
}
.ccm-studios-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 22px 20px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),
        var(--ccm-bg-2);
    border: 1px solid var(--ccm-border);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.20);
    transition:
        transform 280ms var(--ease-apple, var(--ease-out)),
        border-color 280ms var(--ease-out),
        box-shadow 280ms var(--ease-out),
        background 280ms var(--ease-out);
    will-change: transform;
}
.ccm-studios-grid__item:hover {
    transform: translateY(-3px);
    border-color: var(--ccm-border-2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 8px 24px -8px rgba(0, 0, 0, 0.45);
}

/* Top row: logo + name (clickable link to the studio landing) — centered */
.ccm-studios-grid__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--ccm-fg);
    text-decoration: none;
    min-height: 56px;
}
.ccm-studios-grid__main:hover .ccm-studios-grid__name {
    color: var(--ccm-fg);
}
.ccm-studios-grid__logo {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ccm-studios-grid__logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(1.05);
}
.ccm-studios-grid__name {
    color: var(--ccm-fg);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Social icons row — centered under the studio name */
.ccm-studios-grid__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ccm-studios-grid__socials li { margin: 0; }
.ccm-studios-grid__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--ccm-fg);
    opacity: 0.78;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), color 180ms var(--ease-out);
}
.ccm-studios-grid__socials a:hover {
    opacity: 1;
    transform: scale(1.12);
    color: var(--ccm-fg);
}
.ccm-studios-grid__socials svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 720px) {
    .ccm-studios-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 28px clamp(16px, 4vw, 28px);
    }
    .ccm-studios-grid__item { padding: 16px 18px; gap: 12px; }
    .ccm-studios-grid__logo { width: 44px; height: 44px; }
    .ccm-studios-grid__name { font-size: 0.95rem; }
    .ccm-studios-grid__socials { gap: 16px; }
    .ccm-studios-grid__socials a { width: 24px; height: 24px; }
}

/* =========================================================================
   8. Cinemas Grid
   ========================================================================= */

.ccm-cinemas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    list-style: none;
    padding: 48px clamp(20px, 4vw, 48px);
    margin: 0 auto;
    max-width: 1400px;
}
.ccm-cinemas-grid__item {
    background: var(--ccm-bg-2);
    border: 1px solid var(--ccm-border);
    border-radius: 10px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition:
        transform 200ms var(--ease-out),
        background-color 200ms var(--ease-out);
    will-change: transform;
}
.ccm-cinemas-grid__item:hover {
    transform: translateY(-2px);
    background: var(--ccm-bg-3);
}
.ccm-cinemas-grid__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.ccm-cinemas-grid__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(15%);
    transition: filter 200ms var(--ease-out);
}
.ccm-cinemas-grid__item:hover img { filter: grayscale(0%); }

/* =========================================================================
   9. Trailers
   ========================================================================= */

.ccm-movie__trailers {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--ccm-border);
}

.ccm-trailers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ccm-trailers-grid > li { list-style: none; }
.ccm-trailer { display: flex; flex-direction: column; gap: 10px; }
.ccm-trailer__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ccm-bg-3);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--ccm-border);
    transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
    will-change: transform;
}
.ccm-trailer__thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 300ms var(--ease-out);
}
.ccm-trailer__thumb:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(212, 50, 43, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}
.ccm-trailer__thumb:hover img { transform: scale(1.05); }
.ccm-trailer__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(11, 11, 13, 0.4) 100%);
    pointer-events: none;
}
.ccm-trailer__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(11, 11, 13, 0.75);
    backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding-left: 4px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
    z-index: 1;
}
.ccm-trailer__thumb:hover .ccm-trailer__play {
    background: var(--ccm-accent);
    transform: translate(-50%, -50%) scale(1.08);
    border-color: transparent;
}
.ccm-trailer__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(11, 11, 13, 0.85);
    backdrop-filter: blur(8px);
    color: var(--ccm-fg);
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    z-index: 1;
}
.ccm-trailer__title {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
    color: var(--ccm-fg);
    font-weight: 500;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================================
   10. Reduced Motion (a11y)
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .ccm-card,
    .ccm-card__poster,
    .ccm-trailer__thumb,
    .ccm-trailer__thumb img,
    .ccm-trailer__play,
    .ccm-studios-grid__item,
    .ccm-studios-grid__item img,
    .ccm-cinemas-grid__item,
    .ccm-cinemas-grid__item img,
    .ccm-hero__media-thumb {
        transition-duration: 0ms !important;
        animation: none !important;
        transform: none !important;
    }
    .ccm-card { opacity: 1; }
}

/* =========================================================================
   11. Hover gating (no false hovers on touch)
   ========================================================================= */

@media (hover: none), (pointer: coarse) {
    .ccm-card:hover { transform: none; box-shadow: inset 0 0 0 1px var(--ccm-border); }
    .ccm-card:hover .ccm-card__poster { transform: none; }
    .ccm-card:hover .ccm-card__poster-link::after { opacity: 0; }
    .ccm-trailer__thumb:hover { transform: none; }
    .ccm-trailer__thumb:hover img { transform: none; }
    .ccm-trailer__thumb:hover .ccm-trailer__play { background: rgba(11, 11, 13, 0.75); transform: translate(-50%, -50%); }
    .ccm-studios-grid__item:hover { transform: none; }
    .ccm-cinemas-grid__item:hover { transform: none; }
}

/* =========================================================================
   12. Netflix-style movie page header
   ========================================================================= */

/* Override .ccm-movie max-width when the nfx hero is the first child.
   Full-bleed: NO redeclarar la técnica acá. Este header también lleva
   la clase .ccm-hero, que ya aplica left:50% + translateX(-50%) +
   width:100vw. La versión anterior sumaba el método legacy
   (margin-left:-50vw) ENCIMA del translate → el hero quedaba corrido
   50vw a la izquierda. Solo sobreescribimos lo específico de la ficha. */
.ccm-movie__nfx {
    position: relative;
    min-height: 70vh;
    max-height: none; /* anula el cap de 820px de .ccm-hero — el poster necesita crecer */
    overflow: hidden;
    margin-bottom: 32px;
    background: var(--ccm-bg-1);
    isolation: isolate;
}
.ccm-movie__nfx .ccm-hero__slides {
    /* Let slides size to their content. min-height ensures the immersive feel. */
    min-height: 70vh;
    height: auto;
}
.ccm-movie__nfx .ccm-hero__slide {
    min-height: 70vh;
    height: auto;
}
/* Cap poster size so it can't push the hero too tall AND fits within the
   content area. width: 100% fills the column up to its max; max-height
   caps height for short viewports; object-fit: contain ensures no crop. */
.ccm-movie__nfx-poster {
    align-self: end;
    max-height: calc(70vh - 80px);
    display: flex;
    align-items: flex-end;
}
.ccm-movie__nfx-poster img {
    width: 100%;
    height: auto;
    max-height: calc(70vh - 80px);
    object-fit: contain;
}
.ccm-movie__nfx .ccm-hero__slide { align-items: stretch; }

.ccm-movie__nfx-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    /* Extra bottom padding so the CTA doesn't kiss the bottom edge */
    padding: clamp(32px, 4vw, 64px);
    padding-bottom: clamp(48px, 5vw, 80px);
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: end;
    color: var(--ccm-fg);
}

/* Poster column */
.ccm-movie__nfx-poster img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.8),
        0 0 0 1px var(--ccm-border-2) inset;
}

/* Meta column */
.ccm-movie__nfx-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: clamp(8px, 2vh, 24px);
    max-width: 600px;
}

/* Studio mark */
.ccm-movie__nfx-studio {
    margin-bottom: 4px;
}
.ccm-movie__nfx-studio-logo {
    max-height: 44px;
    width: auto;
    height: auto;
    display: block;
    filter: brightness(1.05);
    opacity: 0.95;
}
.ccm-movie__nfx-studio-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ccm-fg);
    opacity: 0.85;
}

/* Movie title (text) or logo */
.ccm-movie__nfx-logo { max-width: 480px; }
.ccm-movie__nfx-logo-img {
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.6));
}
.ccm-movie__nfx-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0;
    max-width: 18ch;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
.ccm-movie__nfx-tagline {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: var(--ccm-fg-2);
    line-height: 1.5;
    margin: 0;
    max-width: 55ch;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.ccm-movie__nfx-release {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ccm-fg);
    margin: 0;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.ccm-movie__nfx-cta { margin-top: 4px; }
.ccm-movie__nfx-cta .ccm-cta {
    padding: 16px 32px;
    font-size: 0.85rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 10px 30px -10px rgba(212, 50, 43, 0.5);
}

/* Mobile: stack vertically, smaller everything */
@media (max-width: 720px) {
    .ccm-movie__nfx {
        min-height: 0;
        max-height: none;
        margin-bottom: 24px;
    }
    .ccm-movie__nfx .ccm-hero__slides { height: auto; max-height: none; min-height: 0; }
    .ccm-movie__nfx .ccm-hero__slide { position: relative; }
    .ccm-movie__nfx-content {
        padding: 24px 20px 32px;
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: stretch;
        justify-items: start;
    }
    .ccm-movie__nfx-poster { max-width: 200px; }
    .ccm-movie__nfx-meta { gap: 12px; max-width: 100%; }
    .ccm-movie__nfx-studio-logo { max-height: 32px; }
    .ccm-movie__nfx-logo-img { max-height: 120px; }
    .ccm-movie__nfx-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    .ccm-movie__nfx-cta .ccm-cta {
        padding: 13px 24px;
        font-size: 0.78rem;
    }
}

/* =========================================================================
   13. Related movies (single-movie page bottom)
   ========================================================================= */

.ccm-movie__related {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--ccm-border);
}
.ccm-movie__related-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ccm-fg-3);
    margin: 0 0 24px;
}
/* Desktop: 3-up grid */
.ccm-movie__related .ccm-listing__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Mobile: horizontal scroll-snap carousel — swipeable.
   Shows ~1.4 cards so the next one peeks, hinting at scrollability.
   Native momentum scrolling, snap to each card, hidden scrollbar. */
@media (max-width: 720px) {
    .ccm-movie__related .ccm-listing__grid {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 20px 16px;
        margin: 0 -20px;  /* breakout to viewport edges */
        scroll-padding-left: 20px;
    }
    .ccm-movie__related .ccm-listing__grid::-webkit-scrollbar { display: none; }
    .ccm-movie__related .ccm-listing__grid > li {
        flex: 0 0 70%;  /* ~1.4 cards visible, next one peeks */
        max-width: 240px;
        scroll-snap-align: start;
    }
    /* Disable stagger animation on horizontal carousel — they all enter at once */
    .ccm-movie__related .ccm-listing__grid > li .ccm-card {
        animation-delay: 0ms;
    }
}

/* =========================================================================
   14. Card hover preview (Netflix-style expansion)
   ========================================================================= */

.ccm-card { position: relative; }

/* Hover panel — hidden by default */
.ccm-card__hover {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: var(--ccm-bg-2);
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 24px 60px -12px rgba(0, 0, 0, 0.8),
        inset 0 0 0 1px var(--ccm-border-2);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.96);
    transition:
        opacity 200ms var(--ease-out),
        transform 220ms var(--ease-out),
        visibility 220ms var(--ease-out);
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

/* Trailer thumb area (top half) */
.ccm-card__hover-trailer {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ccm-bg-3);
    cursor: pointer;
    border-bottom: 1px solid var(--ccm-border);
}
.ccm-card__hover-trailer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 280ms var(--ease-out);
}
.ccm-card__hover-trailer:hover img { transform: scale(1.04); }
.ccm-card__hover-trailer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(11, 11, 13, 0.6) 100%);
    pointer-events: none;
}
.ccm-card__hover-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(11, 11, 13, 0.7);
    backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
    z-index: 1;
}
.ccm-card__hover-trailer:hover .ccm-card__hover-play {
    background: var(--ccm-accent);
    border-color: transparent;
    transform: translate(-50%, -50%) scale(1.08);
}
.ccm-card__hover-play svg { margin-left: 3px; }

/* Fallback: if no trailer, use poster image */
.ccm-card__hover-trailer--poster { aspect-ratio: 4 / 5; }
.ccm-card__hover-trailer--poster img { object-fit: cover; width: 100%; height: 100%; }

/* Meta block (bottom of the hover panel) */
.ccm-card__hover-meta {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.ccm-card__hover-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
    color: var(--ccm-fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ccm-card__hover-title a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms var(--ease-out);
}
.ccm-card__hover-title a:hover { color: var(--ccm-accent); }

.ccm-card__hover-line {
    font-size: 0.78rem;
    color: var(--ccm-fg-2);
    margin: 0;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.ccm-card__hover-sep { color: var(--ccm-fg-3); opacity: 0.6; }
.ccm-card__hover-cta { margin-top: auto; padding-top: 6px; }
.ccm-card__hover-cta .ccm-cta {
    width: 100%;
    padding: 9px 14px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

/* Studio logo (replaces the studio name text in the meta block) */
.ccm-card__hover-studio {
    display: flex;
    align-items: center;
    height: 33px;            /* fixed slot so logos of different sizes align */
    margin-bottom: 4px;
}
.ccm-card__hover-studio-logo {
    max-height: 33px;
    width: auto;
    max-width: 165px;
    object-fit: contain;
    object-position: left center;
    opacity: 0.85;
    filter: brightness(1.05);
}
/* Text fallback when the studio term has no logo uploaded */
.ccm-card__hover-studio-name {
    font-size: 0.7rem;
    color: var(--ccm-fg-3);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Actions row: groups the optional CTA + the always-visible "Ver más" */
.ccm-card__hover-actions {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ccm-card__hover-actions .ccm-cta {
    width: 100%;
    padding: 9px 14px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

/* "Ver más" — secondary outline button. Always rendered. */
.ccm-card__hover-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 14px;
    border-radius: 8px;
    background: transparent;
    color: var(--ccm-fg);
    text-decoration: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--ccm-border-2);
    transition:
        background-color 180ms var(--ease-out),
        border-color    180ms var(--ease-out),
        color           180ms var(--ease-out);
}
.ccm-card__hover-more:hover,
.ccm-card__hover-more:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--ccm-fg);
}

/* === REVEAL ON HOVER (desktop only) ===================================
   On any device that has actual hover capability, hovering the card
   reveals the panel and lifts the card slightly. Touch devices skip
   this entirely (see media block below). */
@media (hover: hover) and (pointer: fine) {
    .ccm-card {
        /* Allow the card to expand visually beyond its grid cell on hover */
        transform-origin: center center;
        transition:
            transform 260ms var(--ease-out),
            box-shadow 220ms var(--ease-out);
    }
    .ccm-card:hover {
        z-index: 30;
        /* Netflix-style enlarge: 50% bigger to feel important */
        transform: translateY(-8px) scale(1.50);
        box-shadow:
            inset 0 0 0 1px rgba(212, 50, 43, 0.4),
            0 40px 80px -16px rgba(0, 0, 0, 0.9);
    }
    /* Edge cards: change transform-origin so the enlarge doesn't clip off
       the container. First card in a row → grow toward right. Last → left. */
    .ccm-listing__grid > li:first-child .ccm-card { transform-origin: left center; }
    .ccm-listing__grid > li:last-child  .ccm-card { transform-origin: right center; }

    .ccm-card:hover .ccm-card__hover {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        pointer-events: auto;
        transition-delay: 280ms;  /* small intent delay so quick passes don't flash */
    }
    /* When the hover panel is visible, dim the original poster underneath
       so the panel reads as the dominant content */
    .ccm-card:hover .ccm-card__body { opacity: 0; }
}

/* Touch / no-hover: never show the panel */
@media (hover: none), (pointer: coarse) {
    .ccm-card__hover { display: none; }
}

/* Reduced motion: no transforms/transitions */
@media (prefers-reduced-motion: reduce) {
    .ccm-card__hover { transition: none; }
    .ccm-card:hover .ccm-card__hover { transform: none; }
}

/* =========================================================================
   15. Showtimes (Etapa 2 — Cartelera)
   ========================================================================= */

.ccm-movie__showtimes {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--ccm-border);
}
.ccm-movie__showtimes-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ccm-fg-3);
    margin: 0 0 24px;
}

/* Day tabs */
.ccm-showtimes__days {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.ccm-showtimes__days::-webkit-scrollbar { display: none; }
.ccm-showtimes__day {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: inherit;
    cursor: pointer;
}
/* The visual treatment (background, border, color, hover, is-active) is
   defined in the Liquid Glass section further down — see the
   `button.ccm-showtimes__day` block. The block here only sets layout. */
.ccm-showtimes__day-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ccm-showtimes__day-date { font-size: 0.85rem; font-weight: 500; margin-top: 2px; }

/* Filters (pills) */
.ccm-showtimes__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    padding: 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ccm-border);
}
.ccm-showtimes__filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0;
}
.ccm-showtimes__filter-group legend {
    font-size: 0.7rem;
    color: var(--ccm-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0;
    margin-right: 4px;
    float: left;
}
.ccm-showtimes__filter-group button {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--ccm-border-2);
    border-radius: 999px;
    color: var(--ccm-fg-2);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.ccm-showtimes__filter-group button:hover { color: var(--ccm-fg); }
.ccm-showtimes__filter-group button[aria-pressed="true"] {
    background: var(--ccm-fg);
    color: var(--ccm-bg-1);
    border-color: var(--ccm-fg);
    font-weight: 600;
}

/* Cinema card */
.ccm-showtimes__cinema {
    background: var(--ccm-bg-2);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--ccm-border);
}
.ccm-showtimes__cinema-header { margin-bottom: 14px; }
.ccm-showtimes__cinema-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--ccm-fg);
    letter-spacing: -0.01em;
}
.ccm-showtimes__cinema-city {
    font-size: 0.78rem;
    color: var(--ccm-fg-3);
    margin: 2px 0 0;
}

/* Functions list */
.ccm-showtimes__functions {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ccm-showtimes__function {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--ccm-border);
}
.ccm-showtimes__function:first-child { border-top: 0; }
.ccm-showtimes__time {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ccm-fg);
    font-variant-numeric: tabular-nums;
    min-width: 56px;
}
.ccm-showtimes__note {
    font-size: 0.72rem;
    color: #fff;
    background: var(--ccm-accent);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ccm-showtimes__format {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--ccm-fg-2);
}
.ccm-showtimes__function[hidden] { display: none; }
.ccm-showtimes__cinema[hidden] { display: none; }

/* CTA secondary (lighter than the red Comprar) */
.ccm-cta--secondary {
    background: transparent;
    color: var(--ccm-fg);
    border: 1px solid var(--ccm-border-2);
}
.ccm-cta--secondary:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.25); }

.ccm-showtimes__no-match {
    color: var(--ccm-fg-3);
    text-align: center;
    padding: 24px 16px;
    margin: 0;
    font-style: italic;
}
.ccm-showtimes__no-match[hidden] { display: none; }

/* Mobile */
@media (max-width: 720px) {
    .ccm-showtimes__filters { gap: 12px; padding: 12px 0; }
    .ccm-showtimes__filter-group { flex-wrap: wrap; }
    .ccm-showtimes__cinema { padding: 16px; }
    .ccm-showtimes__function { flex-wrap: wrap; }
    .ccm-showtimes__format { margin-left: 0; width: 100%; padding-left: 68px; }
}

/* Geo filter (province + city dropdowns) — Etapa 2.2 */
.ccm-showtimes__geo {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ccm-border);
}
.ccm-showtimes__geo-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 180px;
    max-width: 280px;
}
.ccm-showtimes__geo-label span {
    font-size: 0.7rem;
    color: var(--ccm-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ccm-showtimes__geo select {
    width: 100%;
    padding: 9px 32px 9px 12px;
    background: var(--ccm-bg-2);
    border: 1px solid var(--ccm-border-2);
    border-radius: 8px;
    color: var(--ccm-fg);
    font-family: inherit;
    font-size: 0.85rem;
    color-scheme: dark; /* dark popup on Windows */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a1a1aa'><path d='M5 7l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    cursor: pointer;
    transition: border-color 180ms var(--ease-out);
}
.ccm-showtimes__geo select:hover,
.ccm-showtimes__geo select:focus {
    border-color: var(--ccm-fg-3);
    outline: 0;
}
.ccm-showtimes__geo select option[hidden] { display: none; }

/* Cinema-name search — matches the geo dropdowns visually */
.ccm-showtimes__search input[type="search"] {
    width: 100%;
    padding: 9px 36px 9px 36px;
    background: var(--ccm-bg-2);
    border: 1px solid var(--ccm-border-2);
    border-radius: 8px;
    color: var(--ccm-fg);
    font-family: inherit;
    font-size: 0.85rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 15px;
    transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.ccm-showtimes__search input[type="search"]::placeholder {
    color: var(--ccm-fg-3);
    opacity: 1;
}
.ccm-showtimes__search input[type="search"]:hover {
    border-color: var(--ccm-fg-3);
}
.ccm-showtimes__search input[type="search"]:focus {
    border-color: var(--ccm-fg-2);
    background-color: var(--ccm-bg-1);
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.10);
    outline: 0;
}
/* Hide native search clear button (we handle Esc in JS) */
.ccm-showtimes__search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Inline select filter inside .ccm-showtimes__filters (Formato) */
.ccm-showtimes__select-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 180px;
    max-width: 260px;
}
.ccm-showtimes__select-filter span {
    font-size: 0.7rem;
    color: var(--ccm-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ccm-showtimes__select-filter select {
    width: 100%;
    padding: 9px 32px 9px 12px;
    background: var(--ccm-bg-2);
    border: 1px solid var(--ccm-border-2);
    border-radius: 8px;
    color: var(--ccm-fg);
    font-family: inherit;
    font-size: 0.85rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a1a1aa'><path d='M5 7l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    cursor: pointer;
}
.ccm-showtimes__select-filter select:hover,
.ccm-showtimes__select-filter select:focus {
    border-color: var(--ccm-fg-3);
    outline: 0;
}

/* Format-grouped layout inside each cinema card (Etapa 2.3) */
.ccm-showtimes__format-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 14px;
}
.ccm-showtimes__format-group {
    background: var(--ccm-bg-3);
    border: 1px solid var(--ccm-border);
    border-radius: 10px;
    padding: 10px 14px;
}
.ccm-showtimes__format-group[hidden] { display: none; }
.ccm-showtimes__format-header {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ccm-fg-2);
    margin: 0 0 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ccm-showtimes__format-sep { opacity: 0.4; }
.ccm-showtimes__times {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ccm-showtimes__time-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 11px;
    background: var(--ccm-bg-2);
    border: 1px solid var(--ccm-border-2);
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ccm-fg);
    font-variant-numeric: tabular-nums;
    transition: border-color 150ms var(--ease-out);
}
.ccm-showtimes__time-chip:hover { border-color: var(--ccm-fg-3); }
.ccm-showtimes__time-chip[hidden] { display: none; }
.ccm-showtimes__time-chip .ccm-showtimes__note {
    font-size: 0.6rem;
    padding: 2px 5px;
    background: var(--ccm-accent);
    color: #fff;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 2px;
}

/* =========================================================================
   16. Liquid Glass polish — iOS 26 design language
   ========================================================================= */

:root {
    /* Glass material — translucent dark with subtle highlights */
    --glass-bg:         rgba(255, 255, 255, 0.04);
    --glass-bg-strong:  rgba(255, 255, 255, 0.07);
    --glass-bg-hover:   rgba(255, 255, 255, 0.10);
    --glass-border:     rgba(255, 255, 255, 0.10);
    --glass-border-hi:  rgba(255, 255, 255, 0.18);
    --glass-highlight:  rgba(255, 255, 255, 0.12);

    /* Drop shadows tuned for floating panels over dark bg */
    --glass-shadow-sm:  0 6px 20px -8px rgba(0, 0, 0, 0.45);
    --glass-shadow-md:  0 14px 36px -12px rgba(0, 0, 0, 0.55);
    --glass-shadow-lg:  0 28px 64px -16px rgba(0, 0, 0, 0.7);

    /* Accent-tinted shadow for CTA primary */
    --glass-accent-glow: 0 14px 40px -12px rgba(212, 50, 43, 0.55);

    /* Apple-style damped easing (smoother than the existing var(--ease-out)) */
    --ease-apple:    cubic-bezier(0.32, 0.72, 0, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Generous corner radius — iOS-friendly */
    --r-sm:   10px;
    --r-md:   16px;
    --r-lg:   22px;
    --r-xl:   28px;
    --r-pill: 999px;
}

/* Subtle ambient gradient — gives the glass something to refract.
   Sits behind everything in the article. */
.ccm-movie {
    position: relative;
}
.ccm-movie::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(212, 50, 43, 0.08), transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(100, 80, 200, 0.06), transparent 55%);
    pointer-events: none;
}

/* --- Cards (listings) --- */
.ccm-card {
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        var(--glass-shadow-sm);
}
.ccm-card__poster-link { border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* --- Hover panel — frosted glass that floats over the card --- */
.ccm-card__hover {
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.88), rgba(20, 20, 25, 0.72));
    backdrop-filter: blur(36px) saturate(190%);
    -webkit-backdrop-filter: blur(36px) saturate(190%);
    border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        var(--glass-shadow-lg);
}

/* --- Showtimes: cinema card --- */
.ccm-showtimes__cinema {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border-radius: var(--r-lg);
    border: 1px solid var(--glass-border);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        var(--glass-shadow-sm);
    padding: 22px;
}

/* --- Format groups (boxes inside cinema) --- */
.ccm-showtimes__format-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: background-color 220ms var(--ease-apple);
}
.ccm-showtimes__format-group:hover { background: rgba(255, 255, 255, 0.05); }

/* --- Time chips (pills) --- */
.ccm-showtimes__time-chip {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    padding: 7px 14px;
    transition:
        transform 200ms var(--ease-spring),
        background-color 180ms var(--ease-apple),
        border-color 180ms var(--ease-apple);
}
.ccm-showtimes__time-chip:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hi);
    transform: translateY(-2px);
}

/* --- Day tabs — pill row with glass --- */
.ccm-showtimes__days {
    padding: 4px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-xl);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    gap: 4px;
    align-self: flex-start;
}
/* Day tabs — reset any theme/Elementor button styles, then apply our own.
   The `button.ccm-showtimes__day` selector raises specificity above
   generic `button { background: ... }` rules theme/Elementor add. */
button.ccm-showtimes__day,
.ccm-showtimes__day {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: calc(var(--r-xl) - 6px) !important;
    box-shadow: none !important;
    color: var(--ccm-fg-2) !important;
    text-shadow: none;
    transition:
        background-color 220ms var(--ease-apple),
        color 220ms var(--ease-apple),
        transform 200ms var(--ease-apple) !important;
}
button.ccm-showtimes__day:hover,
.ccm-showtimes__day:hover {
    background: var(--glass-bg-hover) !important;
    color: var(--ccm-fg) !important;
}
button.ccm-showtimes__day.is-active,
.ccm-showtimes__day.is-active {
    background: linear-gradient(135deg, var(--ccm-accent), var(--ccm-accent-strong)) !important;
    background-image: linear-gradient(135deg, var(--ccm-accent), var(--ccm-accent-strong)) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 18px -6px rgba(212, 50, 43, 0.55) !important;
}

/* --- Dropdowns (Provincia, Ciudad, Formato) --- */
.ccm-showtimes__geo select,
.ccm-showtimes__select-filter select {
    background-color: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: border-color 200ms var(--ease-apple), background-color 200ms var(--ease-apple);
}
.ccm-showtimes__geo select:hover,
.ccm-showtimes__select-filter select:hover {
    background-color: var(--glass-bg-hover);
    border-color: var(--glass-border-hi);
}

/* --- Idioma pills (lang filter) --- */
.ccm-showtimes__filter-group button {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        background-color 180ms var(--ease-apple),
        color 180ms var(--ease-apple),
        border-color 180ms var(--ease-apple);
}
.ccm-showtimes__filter-group button:hover {
    background: var(--glass-bg-hover);
    color: var(--ccm-fg);
}
.ccm-showtimes__filter-group button[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--ccm-fg), rgba(255, 255, 255, 0.85));
    color: var(--ccm-bg-1);
    border-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 4px 14px -6px rgba(0, 0, 0, 0.4);
}

/* --- CTA primary (Comprar entradas) --- */
.ccm-cta {
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--ccm-accent), var(--ccm-accent-strong));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        var(--glass-accent-glow);
    transition:
        transform 200ms var(--ease-spring),
        box-shadow 220ms var(--ease-apple);
}
.ccm-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 18px 48px -12px rgba(212, 50, 43, 0.65);
}
.ccm-cta:active { transform: translateY(0) scale(0.98); }

/* --- CTA secondary (Comprar en X, Ver más, etc.) --- */
.ccm-cta--secondary {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--ccm-fg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        var(--glass-shadow-sm);
    transition:
        background-color 200ms var(--ease-apple),
        border-color 200ms var(--ease-apple),
        transform 200ms var(--ease-spring);
}
.ccm-cta--secondary:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hi);
    transform: translateY(-1px);
}

/* --- Related-movies hover panel highlight on enlarge --- */
@media (hover: hover) and (pointer: fine) {
    .ccm-card:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 0 0 1px rgba(212, 50, 43, 0.30),
            var(--glass-shadow-lg);
    }
}

/* --- Showtimes section title — pill chip style --- */
.ccm-movie__showtimes-title {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --- Reduce motion respects user preference --- */
@media (prefers-reduced-motion: reduce) {
    .ccm-card,
    .ccm-card__hover,
    .ccm-showtimes__cinema,
    .ccm-showtimes__time-chip,
    .ccm-showtimes__day,
    .ccm-cta,
    .ccm-cta--secondary {
        transition: none !important;
        transform: none !important;
    }
}

/* =========================================================================
   16b. Liquid Glass — cards + Ver más button (related + listings)
   ========================================================================= */

/* Card poster — softer border between poster and body */
.ccm-card__poster-link {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;
}
.ccm-card__poster-link::after {
    /* Stronger gradient at bottom that blends into card body */
    background: linear-gradient(180deg,
        transparent 50%,
        rgba(11, 11, 13, 0.45) 80%,
        rgba(11, 11, 13, 0.75) 100%);
    opacity: 1;
}

/* Card body (date + actions) — subtle inner glass */
.ccm-card__body {
    padding: 14px 18px 18px;
}
.ccm-card__release {
    font-weight: 500;
    color: var(--ccm-fg);
    letter-spacing: 0.01em;
}

/* Hover panel — refine the meta block typography & spacing */
.ccm-card__hover {
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.ccm-card__hover-meta {
    padding: 18px 20px 20px;
    gap: 12px;
}
.ccm-card__hover-title {
    font-size: 1.1rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.ccm-card__hover-line {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.55;
}

/* Trailer thumb area inside hover panel — refined */
.ccm-card__hover-trailer {
    border-bottom: 0;
}
.ccm-card__hover-trailer::after {
    background: linear-gradient(180deg,
        transparent 55%,
        rgba(20, 20, 25, 0.4) 80%,
        rgba(20, 20, 25, 0.95) 100%);
}
.ccm-card__hover-play {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 12px 32px -8px rgba(0, 0, 0, 0.4);
    transition:
        background-color 220ms var(--ease-apple),
        transform 240ms var(--ease-spring);
}
.ccm-card__hover-trailer:hover .ccm-card__hover-play {
    background: var(--ccm-accent);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.10);
}

/* "Ver más" — glass secondary button */
.ccm-card__hover-more {
    border-radius: var(--r-pill);
    padding: 10px 16px;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 6px 18px -8px rgba(0, 0, 0, 0.4);
    transition:
        background-color 220ms var(--ease-apple),
        border-color 220ms var(--ease-apple),
        transform 200ms var(--ease-spring);
}
.ccm-card__hover-more:hover,
.ccm-card__hover-more:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}
.ccm-card__hover-more:active { transform: translateY(0) scale(0.97); }

/* "Comprar entradas" CTA inside hover panel — primary pill */
.ccm-card__hover-cta .ccm-cta,
.ccm-card__hover-actions .ccm-cta {
    border-radius: var(--r-pill);
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--ccm-accent), var(--ccm-accent-strong));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 8px 22px -8px rgba(212, 50, 43, 0.6);
}
.ccm-card__hover-cta .ccm-cta:hover,
.ccm-card__hover-actions .ccm-cta:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 14px 32px -10px rgba(212, 50, 43, 0.7);
}

/* Stagger animation: keep entry, smooth easing already applied above */
.ccm-card { animation-timing-function: var(--ease-apple); }

/* Studio logo in hover-meta — softer treatment */
.ccm-card__hover-studio-logo {
    opacity: 0.92;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* =========================================================================
   16c. Liquid Glass — slider dots (hero carousel bullets)
   ========================================================================= */

.ccm-hero__dots {
    bottom: 24px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-pill);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 24px -8px rgba(0, 0, 0, 0.5);
    gap: 6px;
}

/* Higher specificity (button.ccm-hero__dot) + reset background-image/outline
   to defeat theme/Elementor button styles that leak pink/red borders. */
button.ccm-hero__dot,
.ccm-hero__dot {
    width: 24px !important;
    height: 8px !important;
    padding: 0 !important;
    border-radius: var(--r-pill) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    text-shadow: none !important;
    cursor: pointer;
    transition:
        background-color 220ms var(--ease-apple),
        border-color 220ms var(--ease-apple),
        width 320ms var(--ease-apple),
        box-shadow 220ms var(--ease-apple) !important;
}
button.ccm-hero__dot:hover,
.ccm-hero__dot:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
}
button.ccm-hero__dot:focus,
button.ccm-hero__dot:focus-visible,
.ccm-hero__dot:focus,
.ccm-hero__dot:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45) !important;
    outline-offset: 2px !important;
}
button.ccm-hero__dot.is-active,
.ccm-hero__dot.is-active {
    width: 40px !important;
    /* Neutral white liquid-glass tone — coherent with the overall hero glassware */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65)) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65)) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.60),
        0 2px 8px -2px rgba(0, 0, 0, 0.35) !important;
}

@media (max-width: 720px) {
    .ccm-hero__dots { bottom: 16px; padding: 5px 8px; gap: 5px; }
    .ccm-hero__dot { width: 20px; height: 7px; }
    .ccm-hero__dot.is-active { width: 32px; }
}

/* =========================================================================
   16d. Liquid Glass — studios grid (botones de estudio en home)
   ========================================================================= */

.ccm-studios-grid__item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        var(--glass-shadow-sm);
    transition:
        transform 240ms var(--ease-spring),
        background-color 220ms var(--ease-apple),
        border-color 220ms var(--ease-apple),
        box-shadow 220ms var(--ease-apple);
}
.ccm-studios-grid__item:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    border-color: var(--glass-border-hi);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        var(--glass-shadow-md);
}
.ccm-studios-grid__item img {
    /* Override the grayscale dim treatment — Sony/Universal/Paramount
       logos should be visible at full brightness for a premium feel */
    filter: brightness(0.95) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition:
        filter 220ms var(--ease-apple),
        transform 240ms var(--ease-spring);
}
.ccm-studios-grid__item:hover img {
    filter: brightness(1.08) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    transform: scale(1.03);
}
.ccm-studios-grid__name {
    letter-spacing: -0.005em;
}

/* =========================================================================
   16e. Liquid Glass — filtros de listado + search
   ========================================================================= */

/* --- Filter bar (en-cartel, proximamente) --- */
.ccm-filters {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        var(--glass-shadow-sm);
    padding: 22px 26px;
}
.ccm-filters input,
.ccm-filters select {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 11px 14px;
    transition:
        border-color 200ms var(--ease-apple),
        background-color 200ms var(--ease-apple),
        box-shadow 200ms var(--ease-apple);
}
.ccm-filters input:hover,
.ccm-filters select:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hi);
}
.ccm-filters input:focus,
.ccm-filters select:focus {
    border-color: var(--ccm-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px rgba(212, 50, 43, 0.15);
}
.ccm-filters button {
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--ccm-fg), rgba(255, 255, 255, 0.88));
    color: var(--ccm-bg-1);
    padding: 11px 22px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 6px 18px -6px rgba(0, 0, 0, 0.4);
    transition:
        transform 200ms var(--ease-spring),
        box-shadow 220ms var(--ease-apple);
}
.ccm-filters button:hover {
    background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.95));
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 10px 24px -6px rgba(0, 0, 0, 0.5);
}
.ccm-filters button:active { transform: translateY(0) scale(0.97); }
.ccm-filters__reset {
    text-decoration: none !important;
    color: var(--ccm-fg-2) !important;
    transition: color 200ms var(--ease-apple) !important;
}
.ccm-filters__reset:hover { color: var(--ccm-fg) !important; }

/* --- Search bar shortcode --- */
.ccm-search {
    gap: 10px;
}
.ccm-search input {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 13px 22px;
    transition:
        border-color 200ms var(--ease-apple),
        background-color 200ms var(--ease-apple),
        box-shadow 200ms var(--ease-apple);
}
.ccm-search input:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hi);
}
.ccm-search input:focus {
    border-color: var(--ccm-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 0 3px rgba(212, 50, 43, 0.15);
}
.ccm-search button {
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--ccm-accent), var(--ccm-accent-strong));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 22px -8px rgba(212, 50, 43, 0.55);
    padding: 13px 26px;
    transition:
        transform 200ms var(--ease-spring),
        box-shadow 220ms var(--ease-apple);
}
.ccm-search button:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 14px 32px -10px rgba(212, 50, 43, 0.65);
}
.ccm-search button:active { transform: translateY(0) scale(0.97); }

/* =========================================================================
   16f. Liquid Glass — sweep final (todo lo que quedó plano)
   ========================================================================= */

/* --- Section titles (Créditos, Galería, Trailers, Películas relacionadas) → pill chips --- */
.ccm-movie__credits-title,
.ccm-movie__gallery-title,
.ccm-movie__trailers-title,
.ccm-movie__related-title {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin: 0 0 20px;
}

/* --- Credits list (dl/dt/dd) — glass background container --- */
.ccm-movie__credits-list {
    padding: 20px 24px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        var(--glass-shadow-sm);
}

/* --- Gallery thumbs — glass treatment + rounded --- */
.ccm-movie__gallery-list a {
    border-radius: var(--r-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 18px -8px rgba(0, 0, 0, 0.4);
    transition:
        transform 240ms var(--ease-spring),
        box-shadow 220ms var(--ease-apple);
}
.ccm-movie__gallery-list a:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 28px -8px rgba(0, 0, 0, 0.5);
}

/* --- Trailer cards (lista de videos) --- */
.ccm-trailer__thumb {
    border-radius: var(--r-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        var(--glass-shadow-sm);
    transition:
        transform 240ms var(--ease-spring),
        box-shadow 220ms var(--ease-apple);
}
.ccm-trailer:hover .ccm-trailer__thumb {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        var(--glass-shadow-md);
}
.ccm-trailer__play {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 10px 24px -8px rgba(0, 0, 0, 0.4);
    transition:
        background-color 220ms var(--ease-apple),
        transform 240ms var(--ease-spring);
}
.ccm-trailer:hover .ccm-trailer__play {
    background: var(--ccm-accent);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.10);
}
.ccm-trailer__badge {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* --- Lightbox controls (close, prev, next) --- */
.ccm-lightbox__close,
.ccm-lightbox__nav {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 8px 24px -8px rgba(0, 0, 0, 0.5);
    transition:
        background-color 200ms var(--ease-apple),
        transform 200ms var(--ease-spring);
}
.ccm-lightbox__close:hover,
.ccm-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.20);
    transform: scale(1.08);
}
.ccm-lightbox__close:active,
.ccm-lightbox__nav:active { transform: scale(0.95); }
.ccm-lightbox__caption,
.ccm-lightbox__counter {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    padding: 6px 16px;
}

/* --- CTA disabled / message states (when no purchase active) --- */
.ccm-cta--disabled,
.ccm-cta--message {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--ccm-fg-3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-radius: var(--r-pill);
    cursor: default;
}

/* --- Hero release & studio pills (home carousel + ficha) --- */
.ccm-hero__release,
.ccm-movie__hero-release,
.ccm-movie__nfx-release,
.ccm-movie__poster-hero-release {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 14px -6px rgba(0, 0, 0, 0.3);
    padding: 7px 14px;
}

/* --- Studio chip in home hero (logo or text container) --- */
.ccm-hero__studio,
.ccm-movie__nfx-studio {
    margin-bottom: 14px;
}

/* --- Listing empty state --- */
.ccm-listing__empty {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}

/* --- Trailers grid container --- */
.ccm-trailers-grid {
    gap: 18px;
}

/* --- Showtimes "no-match" message — glass pill --- */
.ccm-showtimes__no-match {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    margin: 12px 0;
}

/* --- Hero bottom content stack (home carousel) --- */
.ccm-hero__bottom {
    padding: clamp(24px, 4vw, 48px);
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(11, 11, 13, 0.55) 30%,
        rgba(11, 11, 13, 0.85) 100%);
}

/* --- 16. Preventa (entradas anticipadas) --------------------------------- */
.ccm-presale {
    margin: 48px 0;
}

.ccm-presale__title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    margin: 0 0 8px;
}

.ccm-presale__intro {
    margin: 0 0 22px;
    opacity: .7;
    font-size: 16px;
}

.ccm-presale__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.ccm-presale__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
}

.ccm-presale__cinema {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ccm-presale__cinema-name {
    font-weight: 600;
    font-size: 16px;
}

.ccm-presale__cinema-city {
    font-size: 13px;
    opacity: .6;
}

.ccm-presale__buy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ccm-accent, #e50914);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s ease, transform .15s ease;
}

.ccm-presale__buy:hover,
.ccm-presale__buy:focus {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #fff;
}

@media (max-width: 480px) {
    .ccm-presale__item {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .ccm-presale__buy {
        justify-content: center;
    }
}