/* ============================================================
   Home (Views/Cartelera/IndexV2.cshtml) — body, secciones sueltas del
   Figma "HOME NUEVA" (node-id=468-13849), sin contar Header/Footer/Slider
   (esos ya tienen su propio CSS: header.css/footer.css/home-hero.css).
   Cubre: "Venta Anticipada" (nueva, hasta 5 items), "Viví el Cine a tu
   Manera" (salas), "Promos Destacadas" (banners reales de
   ViewData["Promociones"], antes ".v2-promos" sin este heading/estilo) y
   "Conocé los Cines Multiplex" (complejos) — "Completá tu Salida al Cine"
   y "Proximamente" quedan fuera de scope (pedido explícito del cliente).

   Fondo (2026-09-14): "En Cartelera" + "Venta Anticipada" comparten un
   wrapper ".cartelera-v2" (IndexV2.cshtml) — la misma clase que ya usan
   CarteleraV2.cshtml/CarteleraPorCategoriaV2.cshtml, así que TODO ese
   estilo (heading, tabs de complejo, tira de días, grilla de películas,
   tarjeta de preventa) sale gratis de cartelera.css/carteleraporcategoria.css
   (cargadas site-wide vía _Layout.cshtml) sin redeclarar nada acá. Ese
   wrapper lleva su PROPIO telón (mismas imágenes telon1/telon2.png que
   .tema-multiplex .body::before, body.css, pero acotado a la altura de
   ".cartelera-v2" en vez de a todo el body — así arranca y termina
   exactamente en esas 2 secciones). Las otras 3 secciones de este archivo
   (fondo opaco sólido, no deben mostrar telón) usan ".mp-solid-section".
   ============================================================ */

/* --- Encabezado de sección reutilizado (barra ámbar + título + subtítulo).
   La base (".cartelera-heading"/"__subtitle", flex+gap, tipografía) ya
   viene de cartelera.css (sin scope a ".cartelera-v2", se carga site-wide
   vía _Layout.cshtml) y no se redeclara acá. PERO la franja de acento de
   cartelera.css depende de que ".cartelera-heading__title" sea un <h1>
   (reutiliza el ::before del h1 genérico del sitio, body.css, solo le
   cambia el color) — en la home el título tiene que ser <h2> por SEO (un
   solo <h1> por página), así que ese mecanismo no aplica acá. Por eso acá
   SÍ se define un "::before" propio y autocontenido en ".cartelera-heading__title"
   (no depende del tag), con los mismos valores (4px, ámbar, radius 999px)
   que el h1 genérico — y se deja "display:none" en ".cartelera-heading__bar"
   explícito por si algún día cartelera.css cambia esa regla (no depender
   del acompañamiento involuntario). */
.tema-multiplex .cartelera-heading__bar {
    display: none;
}

.tema-multiplex .cartelera-heading__title {
    position: relative;
    padding-left: 25px;
}

    .tema-multiplex .cartelera-heading__title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background-color: #fbbe00 !important;
        width: 7px;
        margin: 7px 0px;
    }

/* Fila título + link "Ver todo..." (Conocer salas / Ver todos los complejos /
   Ver toda la preventa / Ver todas las promos) — mismo patrón en las 4
   secciones, el link siempre arriba a la derecha. */
.tema-multiplex .mp-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

    .tema-multiplex .mp-section-head .cartelera-heading {
        margin-bottom: 0;
    }

.tema-multiplex .mp-section-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 2.07px;
    text-transform: uppercase;
    color: #ffffff !important;
    text-decoration: none;
    white-space: nowrap;
}

    .tema-multiplex .mp-section-link::after {
        content: '\f061';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 15px;
        transition: transform 0.2s ease;
    }

    .tema-multiplex .mp-section-link:hover {
        color: #fbbe00 !important;
    }

        .tema-multiplex .mp-section-link:hover::after {
            transform: translateX(4px);
        }

/* ============================================================
   "Venta Anticipada" — NO se redeclara acá. Ahora vive dentro del mismo
   wrapper ".cartelera-v2" que "En Cartelera" (ver IndexV2.cshtml), así que
   .v2-mcard--preventa/.v2-btn-preventa ya salen recoloreados directo por
   carteleraporcategoria.css (scoped a ".cartelera-v2", que ya se carga
   site-wide vía _Layout.cshtml).
   ============================================================ */

/* ============================================================
   Telón acotado a "En Cartelera" + "Venta Anticipada" (".cartelera-v2"),
   NO al body entero. El telón site-wide (.tema-multiplex .body::before,
   body.css) usa telon1/telon2 anclados arriba/abajo del <body> completo
   (~7000px) — dejar ".cartelera-v2" transparente para "revelarlo" solo
   mostraría un pedacito de telon1 arriba y nada más, porque el resto del
   body cae en la zona muerta entre ambas imágenes. Acá se repite la misma
   técnica (2 imágenes, ancladas arriba/abajo, con el mismo color base de
   fondo) pero con "inset:0" relativo a ".cartelera-v2" en vez de al body:
   así el telón arranca justo en el encabezado de "En Cartelera" y termina
   justo al pie de "Venta Anticipada", sin importar cuánto mida el resto
   de la página. "overflow:hidden" recorta las imágenes si la sección es
   más baja que su alto natural; z-index:-1 las manda detrás del contenido
   real (mp-container, dentro del mismo stacking context por el
   position:relative de acá). */
.tema-multiplex .cartelera-v2 {
    position: relative;
    overflow: hidden;
}

    .tema-multiplex .cartelera-v2::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: url(/images/multiplex/telon1.png), url(/images/multiplex/telon2.png);
        background-repeat: no-repeat, no-repeat;
        background-position: center top, center bottom;
        background-size: 100% auto, 100% auto;
        pointer-events: none;
    }

/* ============================================================
   Fondo sólido (Figma: fill base de "HOME NUEVA", el mismo color que
   .tema-multiplex .body::before usa detrás del telón — body.css) para
   toda sección que NO sea "En Cartelera"/"Venta Anticipada": ahí el
   telón (imágenes telon1/telon2.png) debe seguir mostrándose sin tapar,
   así que esas 2 quedan afuera de ".mp-solid-section" a propósito.
   ============================================================ */
.tema-multiplex .bkg-solid {
    background: linear-gradient(0deg, #490404 0%, #490404 100%), linear-gradient(0deg, #111 0%, #111 100%), #FFF;
}
.tema-multiplex .mp-solid-section {
    position: relative;
    background-color: #16061f;
}

/* "Conocé los Cines Multiplex" además lleva el degradado rojo de Rectangle
   628 (Figma node-id=468-13851) pegado al piso de la sección, detrás del
   contenido (z-index) — no se descarga como imagen, es un gradiente CSS. */
.tema-multiplex .mp-solid-section--glow {
    overflow: hidden;
}

    .tema-multiplex .mp-solid-section--glow::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: linear-gradient(9.32deg, rgba(204, 0, 0, 0.6) 16.981%, rgba(204, 0, 0, 0) 36.365%);
        pointer-events: none;
    }

    .tema-multiplex .mp-solid-section--glow > .mp-container {
        position: relative;
        z-index: 1;
    }

/* ============================================================
   "Viví el Cine a tu Manera" — tarjetas de formato de sala (node-id
   468-16051). Fondo claro (a diferencia del resto de la home, que es
   oscuro): pedido explícito del Figma, no es un error.
   ============================================================ */
.tema-multiplex .mp-sala-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.tema-multiplex .mp-sala-card {
    position: relative;
    background-color: #f4f4f4;
    border: 1.2px solid rgba(153, 153, 153, 0.2);
    border-radius: 20px;
    padding: 24px 24px 28px;
    min-height: 242px;
    display: flex;
    flex-direction: column;
}

.tema-multiplex .mp-sala-grid a.mp-sala-card {
    text-decoration: none !important;
}

.tema-multiplex .mp-sala-card__badge {
    display: block;
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 16px;
}

.tema-multiplex .mp-sala-card__title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.55px;
    color: white !important;
    margin: 0 0 10px;
}

.tema-multiplex .mp-sala-card__desc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    line-height: 1.35;
    color: white !important;
    margin: 0;
    flex: 1 1 auto;
}

.tema-multiplex .mp-sala-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: white !important;
    text-decoration: none;
}

    .tema-multiplex .mp-sala-card__link::after {
        content: '\f061';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 13px;
        transition: transform 0.2s ease;
    }

    .tema-multiplex .mp-sala-card__link:hover {
        color: #fbbe00 !important
    }

        .tema-multiplex .mp-sala-card__link:hover::after {
            transform: translateX(4px);
        }

/* ============================================================
   "Promos Destacadas" — banners reales de ViewData["Promociones"], como
   slider (flechas + paginación, Figma node-id=468-14322) — antes quedaban
   apilados uno debajo del otro. Mismo mecanismo mostrar/ocultar ".on" que
   el hero (#v2Hero/.v2-hbg), ver el script en IndexV2.cshtml (goMpPromo).
   Todos los slides comparten un box de aspect-ratio fijo (~ el 1920x650
   del Figma) con object-fit:cover: así una imagen subida más chica no se
   ve borrosa/estirada al ancho completo del contenedor, se recorta en vez
   de escalarse de más.
   ============================================================ */
.tema-multiplex .mp-promo-slider {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.tema-multiplex .mp-promo-slide {
    display: none;
}

    .tema-multiplex .mp-promo-slide.on {
        display: block;
    }

.tema-multiplex .mp-promo-banner {
    display: block;
    aspect-ratio: 1920 / 650;
}

    .tema-multiplex .mp-promo-banner picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .tema-multiplex .mp-promo-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Flechas prev/next — mismo tratamiento visual que .cartelera-v2 .v2-dstrip-arr
   (cartelera.css): círculo oscuro translúcido, hover ámbar. */
.tema-multiplex .mp-promo-arr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .tema-multiplex .mp-promo-arr:hover {
        background: #fbbe00;
        border-color: #fbbe00;
        color: #1e0a21;
    }

.tema-multiplex .mp-promo-arr--prev {
    left: 16px;
}

.tema-multiplex .mp-promo-arr--next {
    right: 16px;
}

/* Paginación (dots) */
.tema-multiplex .mp-promo-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}

.tema-multiplex .mp-promo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
}

    .tema-multiplex .mp-promo-dot.on {
        background: #fbbe00;
        border-color: #fbbe00;
        transform: scale(1.2);
    }

@media (max-width: 767.98px) {
    .tema-multiplex .mp-promo-arr {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .tema-multiplex .mp-promo-arr--prev {
        left: 8px;
    }

    .tema-multiplex .mp-promo-arr--next {
        right: 8px;
    }
}

/* ============================================================
   "Conocé los Cines Multiplex" — tarjetas compactas por complejo
   (node-id=584-36818 y análogos). Distintas de .mp-complejo-card
   (usada en /complejos, con foto): acá no hay foto, es un ícono +
   dirección + 2 botones.
   ============================================================ */
.tema-multiplex .mp-complejo-mini-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.tema-multiplex .mp-complejo-mini {
    background-color: #280101;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.tema-multiplex .mp-complejo-mini__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: rgba(251, 190, 0, 0.15);
    border: 1px solid rgba(251, 190, 0, 0.2);
    margin-bottom: 18px;
}

    .tema-multiplex .mp-complejo-mini__icon::before {
        content: '\f008';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 17px;
        color: #fbbe00;
    }

.tema-multiplex .mp-complejo-mini__title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0.5px;
    color: #ffffff !important;
    margin: 0 0 10px;
}

.tema-multiplex .mp-complejo-mini__address.mp-address-line {
    font-size: 15px;
    margin-bottom: 20px;
}

.tema-multiplex .mp-complejo-mini__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.tema-multiplex .mp-complejo-mini__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    border-radius: 6px;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 18px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.tema-multiplex .mp-complejo-mini__btn--primary {
    background-color: #fbbe00;
    border: 1px solid #fbbe00;
    color: #2e2e2e !important;
}

    .tema-multiplex .mp-complejo-mini__btn--primary:hover {
        background-color: #e0a900;
        border-color: #e0a900;
    }

.tema-multiplex .mp-complejo-mini__btn--ghost {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .tema-multiplex .mp-complejo-mini__btn--ghost:hover {
        border-color: rgba(255, 255, 255, 0.3);
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .tema-multiplex .mp-complejo-mini__btn--ghost::before {
        content: '\f124';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 14px;
    }

.tema-multiplex .body .containerPpal .v2-section {
    padding: 20px 0 84px;
}

/* ============================================================
   Responsive — mismos cortes que el resto del sitio (991.98 / 767.98)
   ============================================================ */
@media (max-width: 1199.98px) {
    .tema-multiplex .mp-sala-grid,
    .tema-multiplex .mp-complejo-mini-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .tema-multiplex .mp-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .tema-multiplex .mp-section-link {
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .tema-multiplex .mp-sala-grid,
    .tema-multiplex .mp-complejo-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tema-multiplex .mp-sala-grid,
    .tema-multiplex .mp-complejo-mini-grid {
        grid-template-columns: 1fr;
    }
}