/* =========================================================================
   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) */
    --scm-bg-1:    #0b0b0d;
    --scm-bg-2:    #131316;
    --scm-bg-3:    #1a1a1d;

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

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

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

    /* Status colors (kept for badges) */
    --scm-status-in-theaters: #4ade80;
    --scm-status-coming-soon: #fbbf24;
    --scm-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 */
    --scm-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight",
                "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
}

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

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

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

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

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

/* Poster hero (fallback when no panoramic hero is loaded) */
.scm-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(--scm-bg-2) 0%, var(--scm-bg-1) 100%);
    border-bottom: 1px solid var(--scm-border);
    margin-bottom: 32px;
}
.scm-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(--scm-border-2) inset;
    display: block;
}
.scm-movie__poster-hero-meta { padding-bottom: 16px; }
.scm-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;
}
.scm-movie__poster-hero-tagline {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--scm-fg-2);
    line-height: 1.5;
    max-width: 50ch;
    margin: 0 0 16px;
}
.scm-movie__poster-hero-release {
    display: inline-flex;
    align-items: center;
    color: var(--scm-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(--scm-border-2);
}

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

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

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

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

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

.scm-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background: var(--scm-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;
}
.scm-cta:hover { background: var(--scm-accent-strong); }
.scm-cta:active { transform: scale(0.97); }
.scm-cta--disabled {
    background: var(--scm-bg-3);
    color: var(--scm-fg-3);
    cursor: not-allowed;
    box-shadow: none;
}
.scm-cta--disabled:hover { background: var(--scm-bg-3); }
.scm-cta--message {
    background: transparent;
    color: var(--scm-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
   ========================================================================= */

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

/* Lightbox modal */
.scm-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);
}
.scm-lightbox.is-open { display: flex; opacity: 1; }
.scm-lightbox__stage {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.scm-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;
}
.scm-lightbox__caption {
    color: var(--scm-fg-2);
    font-size: 0.9rem;
    text-align: center;
    max-width: 80ch;
    margin: 0;
    line-height: 1.5;
}
.scm-lightbox__counter {
    position: absolute;
    top: 16px;
    left: 16px;
    color: var(--scm-fg-2);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.scm-lightbox__close,
.scm-lightbox__nav {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid var(--scm-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);
}
.scm-lightbox__close svg,
.scm-lightbox__nav svg { display: block; }
.scm-lightbox__close:hover,
.scm-lightbox__nav:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
}
.scm-lightbox__close:active,
.scm-lightbox__nav:active { transform: scale(0.93); }
.scm-lightbox__close:focus-visible,
.scm-lightbox__nav:focus-visible { outline: 2px solid var(--scm-accent); outline-offset: 2px; }
.scm-lightbox__close { top: 16px; right: 16px; width: 44px; height: 44px; }
.scm-lightbox__nav   { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; }
.scm-lightbox__nav--prev { left: 24px; }
.scm-lightbox__nav--next { right: 24px; }
.scm-lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }
.scm-lightbox__nav:active { transform: translateY(-50%) scale(0.93); }

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

.scm-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
   ========================================================================= */

.scm-listing {
    padding: 48px clamp(20px, 4vw, 48px) 80px;
    max-width: 1400px;
    margin: 0 auto;
}
.scm-listing__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
}
.scm-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 */
}
.scm-listing__grid > li { list-style: none; }
.scm-listing__empty {
    text-align: center;
    color: var(--scm-fg-3);
    padding: 64px 24px;
    font-style: italic;
    border: 1px dashed var(--scm-border-2);
    border-radius: 8px;
}

/* "Ver más" CTA — rendered after a listing grid when view_all="<url>" is set. */
.scm-listing__view-all {
    display: flex;
    justify-content: center;
    margin: 32px 0 12px;
    padding: 0 clamp(16px, 4vw, 32px);
}
.scm-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(--scm-fg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%),
        var(--scm-bg-2);
    border: 1px solid var(--scm-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);
}
.scm-listing__view-all-btn:hover {
    transform: translateY(-2px);
    color: var(--scm-fg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%),
        var(--scm-bg-3);
    border-color: var(--scm-fg-3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 20px -8px rgba(0, 0, 0, 0.45);
}
.scm-listing__view-all-btn:hover svg {
    transform: translateX(3px);
}
.scm-listing__view-all-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 240ms var(--ease-apple, var(--ease-out));
}

/* Filters */
.scm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
    padding: 20px 24px;
    background: var(--scm-bg-2);
    border: 1px solid var(--scm-border);
    border-radius: 12px;
}
.scm-filters label {
    color: var(--scm-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;
}
.scm-filters input,
.scm-filters select {
    background: var(--scm-bg-3);
    color: var(--scm-fg);
    border: 1px solid var(--scm-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;
}
.scm-filters input:focus,
.scm-filters select:focus {
    outline: none;
    border-color: var(--scm-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. */
.scm-filters select option,
.scm-showtimes__geo select option,
.scm-showtimes__select-filter select option,
.scm-filters-bar select option {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 8px 12px;
}
.scm-filters select option:checked,
.scm-showtimes__geo select option:checked,
.scm-showtimes__select-filter select option:checked,
.scm-filters-bar select option:checked {
    background-color: #d63638;
    color: #ffffff;
}
.scm-filters button {
    align-self: end;
    background: var(--scm-fg);
    color: var(--scm-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);
}
.scm-filters button:hover { background: #fff; }
.scm-filters button:active { transform: scale(0.97); }
.scm-filters__reset {
    background: transparent !important;
    color: var(--scm-fg-3) !important;
    padding: 11px 14px !important;
    text-decoration: underline;
    font-size: 0.85rem;
    align-self: end;
}

/* Search shortcode */
.scm-search {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
    padding: 24px;
}
.scm-search input {
    flex: 1;
    background: var(--scm-bg-2);
    color: var(--scm-fg);
    border: 1px solid var(--scm-border-2);
    padding: 12px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 150ms var(--ease-out);
}
.scm-search input:focus { outline: none; border-color: var(--scm-accent); }
.scm-search button {
    background: var(--scm-fg);
    color: var(--scm-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);
}
.scm-search button:active { transform: scale(0.97); }

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

.scm-card {
    background: var(--scm-bg-2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 0 1px var(--scm-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: scm-card-in 360ms var(--ease-out) forwards;
    animation-delay: calc(var(--scm-card-i, 0) * 40ms);
}
@keyframes scm-card-in {
    to { opacity: 1; transform: translateY(0); }
}
.scm-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);
}
.scm-card__poster-link {
    display: block;
    /* 4:5 — the typical poster ratio 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(--scm-bg-3);
    position: relative;
}
.scm-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);
}
.scm-card:hover .scm-card__poster-link::after { opacity: 1; }
.scm-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);
}
.scm-card:hover .scm-card__poster { transform: scale(1.04); }
.scm-card__poster--placeholder {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at center, var(--scm-bg-3) 0%, var(--scm-bg-2) 100%);
}
.scm-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). */
}
.scm-card__release {
    color: var(--scm-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;
}
.scm-card__cta { padding-top: 2px; width: 100%; }
.scm-card__cta .scm-cta {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

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

.scm-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(--scm-bg-1);
    isolation: isolate;
    box-sizing: border-box;
}
.scm-hero__slides {
    position: relative;
    height: 78vh;
    max-height: 820px;
}

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

/* Background media (thumbnail by default, iframe overlay when injected) */
.scm-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}
.scm-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: scm-hero-ken-burns 22s ease-in-out infinite alternate;
    transition: opacity 700ms var(--ease-in-out);
}
@keyframes scm-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. */
.scm-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;
}
.scm-hero__media.is-video-playing .scm-hero__media-video {
    opacity: 1;
}
/* Also fade the thumbnail out when the video is playing (same behavior
   as before with the iframe). */
.scm-hero__media.is-video-playing .scm-hero__media-thumb {
    opacity: 0;
}

.scm-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;
    /* Hide the iframe visually until JS confirms playback. This prevents
       YouTube's initialization overlay (big skip / pause / skip buttons
       that flash for ~1s while the player boots) from ever appearing.
       visibility: hidden collapses even the tiny 1px seam that opacity:0
       sometimes leaves; combined they guarantee zero chrome leak. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 600ms var(--ease-out), visibility 0s linear 1500ms;
}
.scm-hero__media.is-video-playing .scm-hero__media-iframe {
    opacity: 1;
    visibility: visible;
    transition: opacity 600ms var(--ease-out), visibility 0s linear 0s;
}
/* 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. */
.scm-hero__media.is-video-playing .scm-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. */
.scm-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(--scm-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. */
.scm-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 */
.scm-hero.is-dragging,
.scm-hero.is-dragging .scm-hero__slide::before,
[data-scm-hero].is-dragging,
[data-scm-hero].is-dragging .scm-hero__slide::before {
    cursor: grabbing;
}
/* Prevent text selection while dragging across the hero */
[data-scm-hero].is-dragging {
    user-select: none;
    -webkit-user-select: none;
}

.scm-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 .scm-hero__bottom stack instead (see below). */
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--scm-fg);
}

/* Studio mark — inside .scm-hero__bottom, above the title */
.scm-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;
}
.scm-hero__studio-logo {
    max-height: 40px;
    width: auto;
    height: auto;
    display: block;
    filter: brightness(1.05);
    opacity: 0.95;
}
.scm-hero__studio-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--scm-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 .scm-hero__content) so the text/logos have
   breathing room but the gradient above them still hits the viewport edges. */
.scm-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;
}
.scm-hero__logo-link { display: inline-block; max-width: 520px; }
.scm-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));
}
.scm-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);
}
.scm-hero__title a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms var(--ease-out);
}
.scm-hero__title a:hover { color: var(--scm-accent); }

.scm-hero__tagline {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    color: var(--scm-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 */
.scm-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(--scm-fg-2);
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.scm-hero__meta-sep {
    color: var(--scm-fg-3);
    opacity: 0.6;
}

/* CTA row (release date + button on same line) */
.scm-hero__cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.scm-hero__cta-row .scm-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);
}
.scm-hero__release {
    color: var(--scm-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 */
.scm-hero__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 4;
}
.scm-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);
}
.scm-hero__dot:hover { background: rgba(255, 255, 255, 0.5); }
.scm-hero__dot.is-active {
    background: var(--scm-fg);
    width: 40px;
}

@media (max-width: 720px) {
    /* Compact hero on mobile — was eating the whole viewport */
    .scm-hero {
        min-height: 56vh;
        max-height: 540px;
        margin-bottom: 24px;
    }
    .scm-hero__slides { min-height: 56vh; max-height: 540px; height: 56vh; }
    .scm-hero__slide { position: absolute; min-height: 0; }
    .scm-hero__content {
        /* No padding here — gradient goes edge-to-edge on mobile too */
        padding: 0;
        justify-content: flex-end;
    }
    .scm-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). */
    .scm-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. */
    .scm-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 */
    .scm-hero__slide::before {
        background:
            linear-gradient(180deg, transparent 0%, rgba(11,11,13,0.7) 55%, rgba(11,11,13,0.95) 90%, var(--scm-bg-1) 100%);
    }

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

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

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

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

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

/* Studio landing hero — full-bleed, layered: ambient backdrop + glass card */
.scm-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;
}
.scm-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(--scm-studio-color, rgba(255, 255, 255, 0.08)) 0%, transparent 60%);
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
    filter: blur(40px);
}
.scm-studio__hero-bg {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    z-index: -2;
}
.scm-studio__hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scm-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(--scm-bg-1) 100%);
}

/* Glass card holding the logo + name + description + socials */
.scm-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%);
}

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

/* Social icons row inside the studio hero card */
.scm-studio__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
}
.scm-studio__socials li { margin: 0; }
.scm-studio__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--scm-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);
}
.scm-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(--scm-fg);
}
.scm-studio__socials svg {
    width: 18px;
    height: 18px;
    display: block;
}

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

/* Studios grid */
/* Studios grid — card with logo + name + social icons row */
.scm-studios-grid {
    --scm-studios-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--scm-studios-cols), 1fr);
    gap: 18px;
    list-style: none;
    padding: 48px clamp(20px, 4vw, 48px);
    margin: 0 auto;
    max-width: 1400px;
}
.scm-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(--scm-bg-2);
    border: 1px solid var(--scm-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;
}
.scm-studios-grid__item:hover {
    transform: translateY(-3px);
    border-color: var(--scm-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 */
.scm-studios-grid__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--scm-fg);
    text-decoration: none;
    min-height: 56px;
}
.scm-studios-grid__main:hover .scm-studios-grid__name {
    color: var(--scm-fg);
}
.scm-studios-grid__logo {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scm-studios-grid__logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(1.05);
}
.scm-studios-grid__name {
    color: var(--scm-fg);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

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

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

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

.scm-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;
}
.scm-cinemas-grid__item {
    background: var(--scm-bg-2);
    border: 1px solid var(--scm-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;
}
.scm-cinemas-grid__item:hover {
    transform: translateY(-2px);
    background: var(--scm-bg-3);
}
.scm-cinemas-grid__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.scm-cinemas-grid__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(15%);
    transition: filter 200ms var(--ease-out);
}
.scm-cinemas-grid__item:hover img { filter: grayscale(0%); }

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

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

.scm-trailers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.scm-trailers-grid > li { list-style: none; }
.scm-trailer { display: flex; flex-direction: column; gap: 10px; }
.scm-trailer__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--scm-bg-3);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--scm-border);
    transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
    will-change: transform;
}
.scm-trailer__thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 300ms var(--ease-out);
}
.scm-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);
}
.scm-trailer__thumb:hover img { transform: scale(1.05); }
.scm-trailer__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(11, 11, 13, 0.4) 100%);
    pointer-events: none;
}
.scm-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;
}
.scm-trailer__thumb:hover .scm-trailer__play {
    background: var(--scm-accent);
    transform: translate(-50%, -50%) scale(1.08);
    border-color: transparent;
}
.scm-trailer__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(11, 11, 13, 0.85);
    backdrop-filter: blur(8px);
    color: var(--scm-fg);
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    z-index: 1;
}
.scm-trailer__title {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
    color: var(--scm-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) {
    .scm-card,
    .scm-card__poster,
    .scm-trailer__thumb,
    .scm-trailer__thumb img,
    .scm-trailer__play,
    .scm-studios-grid__item,
    .scm-studios-grid__item img,
    .scm-cinemas-grid__item,
    .scm-cinemas-grid__item img,
    .scm-hero__media-thumb {
        transition-duration: 0ms !important;
        animation: none !important;
        transform: none !important;
    }
    .scm-card { opacity: 1; }
}

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

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

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

/* Override .scm-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 .scm-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. */
.scm-movie__nfx {
    position: relative;
    min-height: 70vh;
    max-height: none; /* anula el cap de 820px de .scm-hero — el poster necesita crecer */
    overflow: hidden;
    margin-bottom: 32px;
    background: var(--scm-bg-1);
    isolation: isolate;
}
.scm-movie__nfx .scm-hero__slides {
    /* Let slides size to their content. min-height ensures the immersive feel. */
    min-height: 70vh;
    height: auto;
}
.scm-movie__nfx .scm-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. */
.scm-movie__nfx-poster {
    align-self: end;
    max-height: calc(70vh - 80px);
    display: flex;
    align-items: flex-end;
}
.scm-movie__nfx-poster img {
    width: 100%;
    height: auto;
    max-height: calc(70vh - 80px);
    object-fit: contain;
}
.scm-movie__nfx .scm-hero__slide { align-items: stretch; }

.scm-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(--scm-fg);
}

/* Poster column */
.scm-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(--scm-border-2) inset;
}

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

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

/* Movie title (text) or logo */
.scm-movie__nfx-logo { max-width: 480px; }
.scm-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));
}
.scm-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);
}
.scm-movie__nfx-tagline {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: var(--scm-fg-2);
    line-height: 1.5;
    margin: 0;
    max-width: 55ch;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.scm-movie__nfx-release {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--scm-fg);
    margin: 0;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.scm-movie__nfx-cta { margin-top: 4px; }
.scm-movie__nfx-cta .scm-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) {
    .scm-movie__nfx {
        min-height: 0;
        max-height: none;
        margin-bottom: 24px;
    }
    .scm-movie__nfx .scm-hero__slides { height: auto; max-height: none; min-height: 0; }
    .scm-movie__nfx .scm-hero__slide { position: relative; }
    .scm-movie__nfx-content {
        padding: 24px 20px 32px;
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: stretch;
        justify-items: start;
    }
    .scm-movie__nfx-poster { max-width: 200px; }
    .scm-movie__nfx-meta { gap: 12px; max-width: 100%; }
    .scm-movie__nfx-studio-logo { max-height: 32px; }
    .scm-movie__nfx-logo-img { max-height: 120px; }
    .scm-movie__nfx-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    .scm-movie__nfx-cta .scm-cta {
        padding: 13px 24px;
        font-size: 0.78rem;
    }
}

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

.scm-movie__related {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--scm-border);
}
.scm-movie__related-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--scm-fg-3);
    margin: 0 0 24px;
}
/* Desktop: 3-up grid */
.scm-movie__related .scm-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) {
    .scm-movie__related .scm-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;
    }
    .scm-movie__related .scm-listing__grid::-webkit-scrollbar { display: none; }
    .scm-movie__related .scm-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 */
    .scm-movie__related .scm-listing__grid > li .scm-card {
        animation-delay: 0ms;
    }
}

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

.scm-card { position: relative; }

/* Hover panel — hidden by default */
.scm-card__hover {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: var(--scm-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(--scm-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) */
.scm-card__hover-trailer {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--scm-bg-3);
    cursor: pointer;
    border-bottom: 1px solid var(--scm-border);
}
.scm-card__hover-trailer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 280ms var(--ease-out);
}
.scm-card__hover-trailer:hover img { transform: scale(1.04); }
.scm-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;
}
.scm-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;
}
.scm-card__hover-trailer:hover .scm-card__hover-play {
    background: var(--scm-accent);
    border-color: transparent;
    transform: translate(-50%, -50%) scale(1.08);
}
.scm-card__hover-play svg { margin-left: 3px; }

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

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

.scm-card__hover-line {
    font-size: 0.78rem;
    color: var(--scm-fg-2);
    margin: 0;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.scm-card__hover-sep { color: var(--scm-fg-3); opacity: 0.6; }
.scm-card__hover-cta { margin-top: auto; padding-top: 6px; }
.scm-card__hover-cta .scm-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) */
.scm-card__hover-studio {
    display: flex;
    align-items: center;
    height: 33px;            /* fixed slot so logos of different sizes align */
    margin-bottom: 4px;
}
.scm-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 */
.scm-card__hover-studio-name {
    font-size: 0.7rem;
    color: var(--scm-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" */
.scm-card__hover-actions {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.scm-card__hover-actions .scm-cta {
    width: 100%;
    padding: 9px 14px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

/* "Ver más" — secondary outline button. Always rendered. */
.scm-card__hover-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 14px;
    border-radius: 8px;
    background: transparent;
    color: var(--scm-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(--scm-border-2);
    transition:
        background-color 180ms var(--ease-out),
        border-color    180ms var(--ease-out),
        color           180ms var(--ease-out);
}
.scm-card__hover-more:hover,
.scm-card__hover-more:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--scm-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) {
    .scm-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);
    }
    .scm-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. */
    .scm-listing__grid > li:first-child .scm-card { transform-origin: left center; }
    .scm-listing__grid > li:last-child  .scm-card { transform-origin: right center; }

    .scm-card:hover .scm-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 */
    .scm-card:hover .scm-card__body { opacity: 0; }
}

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

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

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

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

/* Day tabs */
.scm-showtimes__days {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.scm-showtimes__days::-webkit-scrollbar { display: none; }
.scm-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.scm-showtimes__day` block. The block here only sets layout. */
.scm-showtimes__day-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.scm-showtimes__day-date { font-size: 0.85rem; font-weight: 500; margin-top: 2px; }

/* Filters (pills) */
.scm-showtimes__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    padding: 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--scm-border);
}
.scm-showtimes__filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0;
}
.scm-showtimes__filter-group legend {
    font-size: 0.7rem;
    color: var(--scm-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0;
    margin-right: 4px;
    float: left;
}
.scm-showtimes__filter-group button {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--scm-border-2);
    border-radius: 999px;
    color: var(--scm-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);
}
.scm-showtimes__filter-group button:hover { color: var(--scm-fg); }
.scm-showtimes__filter-group button[aria-pressed="true"] {
    background: var(--scm-fg);
    color: var(--scm-bg-1);
    border-color: var(--scm-fg);
    font-weight: 600;
}

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

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

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

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

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

/* Geo filter (province + city dropdowns) — Etapa 2.2 */
.scm-showtimes__geo {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--scm-border);
}
.scm-showtimes__geo-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 180px;
    max-width: 280px;
}
.scm-showtimes__geo-label span {
    font-size: 0.7rem;
    color: var(--scm-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.scm-showtimes__geo select {
    width: 100%;
    padding: 9px 32px 9px 12px;
    background: var(--scm-bg-2);
    border: 1px solid var(--scm-border-2);
    border-radius: 8px;
    color: var(--scm-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);
}
.scm-showtimes__geo select:hover,
.scm-showtimes__geo select:focus {
    border-color: var(--scm-fg-3);
    outline: 0;
}
.scm-showtimes__geo select option[hidden] { display: none; }

/* Cinema-name search — matches the geo dropdowns visually */
.scm-showtimes__search input[type="search"] {
    width: 100%;
    padding: 9px 36px 9px 36px;
    background: var(--scm-bg-2);
    border: 1px solid var(--scm-border-2);
    border-radius: 8px;
    color: var(--scm-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);
}
.scm-showtimes__search input[type="search"]::placeholder {
    color: var(--scm-fg-3);
    opacity: 1;
}
.scm-showtimes__search input[type="search"]:hover {
    border-color: var(--scm-fg-3);
}
.scm-showtimes__search input[type="search"]:focus {
    border-color: var(--scm-fg-2);
    background-color: var(--scm-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) */
.scm-showtimes__search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Inline select filter inside .scm-showtimes__filters (Formato) */
.scm-showtimes__select-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 180px;
    max-width: 260px;
}
.scm-showtimes__select-filter span {
    font-size: 0.7rem;
    color: var(--scm-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.scm-showtimes__select-filter select {
    width: 100%;
    padding: 9px 32px 9px 12px;
    background: var(--scm-bg-2);
    border: 1px solid var(--scm-border-2);
    border-radius: 8px;
    color: var(--scm-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;
}
.scm-showtimes__select-filter select:hover,
.scm-showtimes__select-filter select:focus {
    border-color: var(--scm-fg-3);
    outline: 0;
}

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

/* --- Hover panel — frosted glass that floats over the card --- */
.scm-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 --- */
.scm-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) --- */
.scm-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);
}
.scm-showtimes__format-group:hover { background: rgba(255, 255, 255, 0.05); }

/* --- Time chips (pills) --- */
.scm-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);
}
.scm-showtimes__time-chip:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hi);
    transform: translateY(-2px);
}

/* --- Day tabs — pill row with glass --- */
.scm-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.scm-showtimes__day` selector raises specificity above
   generic `button { background: ... }` rules theme/Elementor add. */
button.scm-showtimes__day,
.scm-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(--scm-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.scm-showtimes__day:hover,
.scm-showtimes__day:hover {
    background: var(--glass-bg-hover) !important;
    color: var(--scm-fg) !important;
}
button.scm-showtimes__day.is-active,
.scm-showtimes__day.is-active {
    background: linear-gradient(135deg, var(--scm-accent), var(--scm-accent-strong)) !important;
    background-image: linear-gradient(135deg, var(--scm-accent), var(--scm-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) --- */
.scm-showtimes__geo select,
.scm-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);
}
.scm-showtimes__geo select:hover,
.scm-showtimes__select-filter select:hover {
    background-color: var(--glass-bg-hover);
    border-color: var(--glass-border-hi);
}

/* --- Idioma pills (lang filter) --- */
.scm-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);
}
.scm-showtimes__filter-group button:hover {
    background: var(--glass-bg-hover);
    color: var(--scm-fg);
}
.scm-showtimes__filter-group button[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--scm-fg), rgba(255, 255, 255, 0.85));
    color: var(--scm-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) --- */
.scm-cta {
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--scm-accent), var(--scm-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);
}
.scm-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);
}
.scm-cta:active { transform: translateY(0) scale(0.98); }

/* --- CTA secondary (Comprar en X, Ver más, etc.) --- */
.scm-cta--secondary {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--scm-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);
}
.scm-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) {
    .scm-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 --- */
.scm-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) {
    .scm-card,
    .scm-card__hover,
    .scm-showtimes__cinema,
    .scm-showtimes__time-chip,
    .scm-showtimes__day,
    .scm-cta,
    .scm-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 */
.scm-card__poster-link {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;
}
.scm-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 */
.scm-card__body {
    padding: 14px 18px 18px;
}
.scm-card__release {
    font-weight: 500;
    color: var(--scm-fg);
    letter-spacing: 0.01em;
}

/* Hover panel — refine the meta block typography & spacing */
.scm-card__hover {
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.scm-card__hover-meta {
    padding: 18px 20px 20px;
    gap: 12px;
}
.scm-card__hover-title {
    font-size: 1.1rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.scm-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 */
.scm-card__hover-trailer {
    border-bottom: 0;
}
.scm-card__hover-trailer::after {
    background: linear-gradient(180deg,
        transparent 55%,
        rgba(20, 20, 25, 0.4) 80%,
        rgba(20, 20, 25, 0.95) 100%);
}
.scm-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);
}
.scm-card__hover-trailer:hover .scm-card__hover-play {
    background: var(--scm-accent);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.10);
}

/* "Ver más" — glass secondary button */
.scm-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);
}
.scm-card__hover-more:hover,
.scm-card__hover-more:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}
.scm-card__hover-more:active { transform: translateY(0) scale(0.97); }

/* "Comprar entradas" CTA inside hover panel — primary pill */
.scm-card__hover-cta .scm-cta,
.scm-card__hover-actions .scm-cta {
    border-radius: var(--r-pill);
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--scm-accent), var(--scm-accent-strong));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 8px 22px -8px rgba(212, 50, 43, 0.6);
}
.scm-card__hover-cta .scm-cta:hover,
.scm-card__hover-actions .scm-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 */
.scm-card { animation-timing-function: var(--ease-apple); }

/* Studio logo in hover-meta — softer treatment */
.scm-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)
   ========================================================================= */

.scm-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.scm-hero__dot) + reset background-image/outline
   to defeat theme/Elementor button styles that leak pink/red borders. */
button.scm-hero__dot,
.scm-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.scm-hero__dot:hover,
.scm-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.scm-hero__dot:focus,
button.scm-hero__dot:focus-visible,
.scm-hero__dot:focus,
.scm-hero__dot:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45) !important;
    outline-offset: 2px !important;
}
button.scm-hero__dot.is-active,
.scm-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) {
    .scm-hero__dots { bottom: 16px; padding: 5px 8px; gap: 5px; }
    .scm-hero__dot { width: 20px; height: 7px; }
    .scm-hero__dot.is-active { width: 32px; }
}

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

.scm-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);
}
.scm-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);
}
.scm-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);
}
.scm-studios-grid__item:hover img {
    filter: brightness(1.08) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    transform: scale(1.03);
}
.scm-studios-grid__name {
    letter-spacing: -0.005em;
}

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

/* --- Filter bar (en-cartel, proximamente) --- */
.scm-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;
}
.scm-filters input,
.scm-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);
}
.scm-filters input:hover,
.scm-filters select:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hi);
}
.scm-filters input:focus,
.scm-filters select:focus {
    border-color: var(--scm-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px rgba(212, 50, 43, 0.15);
}
.scm-filters button {
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--scm-fg), rgba(255, 255, 255, 0.88));
    color: var(--scm-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);
}
.scm-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);
}
.scm-filters button:active { transform: translateY(0) scale(0.97); }
.scm-filters__reset {
    text-decoration: none !important;
    color: var(--scm-fg-2) !important;
    transition: color 200ms var(--ease-apple) !important;
}
.scm-filters__reset:hover { color: var(--scm-fg) !important; }

/* --- Search bar shortcode --- */
.scm-search {
    gap: 10px;
}
.scm-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);
}
.scm-search input:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hi);
}
.scm-search input:focus {
    border-color: var(--scm-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 0 3px rgba(212, 50, 43, 0.15);
}
.scm-search button {
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--scm-accent), var(--scm-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);
}
.scm-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);
}
.scm-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 --- */
.scm-movie__credits-title,
.scm-movie__gallery-title,
.scm-movie__trailers-title,
.scm-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 --- */
.scm-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 --- */
.scm-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);
}
.scm-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) --- */
.scm-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);
}
.scm-trailer:hover .scm-trailer__thumb {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        var(--glass-shadow-md);
}
.scm-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);
}
.scm-trailer:hover .scm-trailer__play {
    background: var(--scm-accent);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.10);
}
.scm-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) --- */
.scm-lightbox__close,
.scm-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);
}
.scm-lightbox__close:hover,
.scm-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.20);
    transform: scale(1.08);
}
.scm-lightbox__close:active,
.scm-lightbox__nav:active { transform: scale(0.95); }
.scm-lightbox__caption,
.scm-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) --- */
.scm-cta--disabled,
.scm-cta--message {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--scm-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) --- */
.scm-hero__release,
.scm-movie__hero-release,
.scm-movie__nfx-release,
.scm-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) --- */
.scm-hero__studio,
.scm-movie__nfx-studio {
    margin-bottom: 14px;
}

/* --- Listing empty state --- */
.scm-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 --- */
.scm-trailers-grid {
    gap: 18px;
}

/* --- Showtimes "no-match" message — glass pill --- */
.scm-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) --- */
.scm-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%);
}

/* === Trailers (repeater manual) === */
.scm-trailers__items{display:grid;gap:16px}
.scm-trailers--grid .scm-trailers__items{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.scm-trailers__item{margin:0}
.scm-trailers__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:8px}
.scm-trailers__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.scm-trailers__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.25);transition:background .2s}
.scm-trailers__thumb:hover .scm-trailers__play{background:rgba(0,0,0,.45)}
.scm-trailers__caption{margin-top:8px;font-size:.9em;opacity:.8}

/* === Buscador de películas (widget) === */
.scm-search{display:flex;gap:8px;margin-bottom:24px}
.scm-search__input{flex:1;padding:10px 14px;border:1px solid #ccc;border-radius:6px;font:inherit}
.scm-search__submit{padding:10px 20px;border:0;border-radius:6px;background:#111;color:#fff;font:inherit;cursor:pointer}
.scm-search__submit:hover{background:#333}