.tema-multiplex .body {
    position: relative;
    padding: 0px;
    position: relative;
    /*min-height: calc(min(100vw, 1911px) * 2100 / 1911);*/
}

    .tema-multiplex .body::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        background-color: #16061f;
        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;
        z-index: -1;
    }

    body.tema-multiplex, .tema-multiplex .body .containerPpal, .tema-multiplex .v2-wrap {
        background: transparent !important;
    }

    .tema-multiplex .body .containerPpal {
        min-height: 300px;
        display: grid;
        max-width: none;
    }

        /* Bug de CSS Grid: por default un grid item no se achica por debajo
           del min-content de su contenido ("min-width: auto" implícito). Acá
           adentro cuelgan tiras horizontales con overflow-x:auto (tabs de
           complejo, tira de días) cuyo contenido sin wrap es más ancho que
           la pantalla en mobile — sin este min-width:0 ese contenido empuja
           TODO el layout (containerPpal, body, html) a desbordar el
           viewport en vez de quedar contenido y scrollear puertas adentro
           de su propia tira. Rompía a la vez el grid de películas
           responsive (su ancho disponible dejaba de ser el del viewport) y
           el scroll horizontal de esas tiras. */
        .tema-multiplex .body .containerPpal > div {
            min-width: 0;
        }

        .tema-multiplex .body .containerPpal .dynamic-content,
        .tema-multiplex .body .containerPpal .dynamic-content-page,
        .tema-multiplex .body .containerPpal .v2-section {
            padding: 20px 0 64px;
        }

        /* Views/DynamicPages/Index.cshtml (vista base, no se toca por
           convención) envuelve el contenido en .dynamic-content con
           max-width:800px — pensado para texto plano de CMS. Cuando el
           contenido es una página con diseño propio (empieza con nuestro
           wrapper .dynamic-content-page, que .mp-container ya limita a
           1476px por su cuenta), se libera ese ancho. No afecta a las
           páginas de texto simple, que no tienen ese wrapper. */
        .tema-multiplex .body .containerPpal .dynamic-content:has(> .dynamic-content-page) {
            max-width: none;
            margin: 0;
        }

        /* Views/DynamicPages/Page.cshtml (vista base para dbo.Pages — Footer,
           Salas, Complejos si aplica —, no se toca por convención) envuelve el
           contenido en class="container ... dynamic-content-page": el
           .container de Bootstrap le pone su propio max-width/padding, que
           angosta cualquier diseño a medida ya limitado por .mp-container
           (1476px). Mismo criterio que el fix de arriba para Index.cshtml. */
        .tema-multiplex .container{
            max-width: none;
            padding-left: 0;
            padding-right: 0;
        }

        /* Red de seguridad: Views/DynamicPages/Index.cshtml fuerza
           color:@dpText !important en CADA descendiente de .dynamic-content
           (no sólo en el wrapper). "color: inherit" en un hijo puntual no
           alcanza si su padre inmediato (ej. un <p> sin color propio)
           también está directamente forzado — la herencia no "salta" ese
           nivel roto. Por eso este catch-all va PRIMERO (mismo peso que
           las reglas mp-x, h1, h4, etc. de más abajo — al tener igual
           especificidad, gana la que aparece después en el archivo, así
           que cualquier regla más específica sigue pudiendo pisarlo). El
           color base elegido (rgba .7) es el que más se repite en el
           cuerpo del texto; los títulos/acentos ya tienen su propia regla
           más abajo con la misma especificidad y orden posterior. */
        .tema-multiplex .body * {
            color: rgba(255, 255, 255, 0.7) !important;
        }


/* Título h1: aplica a todos los h1 dentro del body (patrón "Precios" + barra roja).
   overflow-wrap: ningún h1 existente lo necesitaba (ej. "Precios", una sola
   palabra corta), pero "Promociones" (11 letras, mayúsculas, 48px bold) no
   entra en el ancho disponible en mobile (335px) y sin esto fuerza un grid
   blowout en .containerPpal (ver PreviewsHTML/promociones.html). Tiene que
   ser "anywhere" y no "break-word": por spec, "break-word" no reduce el
   min-content del grid item (main es item de .containerPpal, grid), sigue
   rompiendo el layout aunque la palabra visualmente wrapee bien; "anywhere"
   sí participa del cálculo de min-content. Es un fallback inerte: sólo
   actúa si una palabra no entra, no cambia nada en los h1 que ya
   rendereizan bien. */
.tema-multiplex .body h1 {
    position: relative;
    padding-left: 16px;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 20px 0px 35px;
    overflow-wrap: anywhere;
}
    .tema-multiplex .body h1:has(strong) {
        font-weight: 500;
    }

    .tema-multiplex .body h1 strong {
        color: #fff !important;
    }

    .tema-multiplex .body h1::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 32px;
        border-radius: 999px;
        background-color: #e50611;
        top: 0;
        bottom: 0;
        height: auto;
        transform: none;
    }

/* Subtítulos h5: aplica a todos los h5 "sueltos" dentro del body. Se excluyen
   .modal-title y .alert-heading: son h5 que viven sobre fondos claros propios
   de Bootstrap (modal blanco, alert-success verde) y el blanco traslúcido de
   Figma los deja ilegibles ahí — conservan su color actual. */
.tema-multiplex h5:not(.modal-title):not(.alert-heading) {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
    font-size: 20px;
    line-height: 27.5px;
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Alerts de Bootstrap: forma y tipografía del diseño para todas las variantes */
.tema-multiplex .alert {
    padding: 9px 13px;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
    font-size: 15px;
    line-height: 22.5px;
    letter-spacing: 0.375px;
}

    /* Alerts sin variante semántica (alert-danger/alert-success/etc.): look completo de div.ml-4,
   incluido el ícono. Las variantes conservan su color rojo/verde de Bootstrap. */
    .tema-multiplex .alert:not(.alert-primary):not(.alert-secondary):not(.alert-success):not(.alert-danger):not(.alert-warning):not(.alert-info):not(.alert-light):not(.alert-dark) {
        display: flex;
        align-items: center;
        gap: 8px;
        background-color: rgba(251, 190, 0, 0.08);
        border-color: rgba(251, 190, 0, 0.25);
        color: #fbbe00 !important;
    }

        /* No agregar el ícono si el alert ya trae uno propio (ej. los toast con <i class="fas ..."> ) */
        .tema-multiplex .alert:not(.alert-primary):not(.alert-secondary):not(.alert-success):not(.alert-danger):not(.alert-warning):not(.alert-info):not(.alert-light):not(.alert-dark):not(:has(i, svg, img))::before {
            content: '';
            flex: 0 0 14px;
            width: 14px;
            height: 14px;
            background-color: currentColor;
            -webkit-mask: url('/images/multiplex/alert-info.svg') center / contain no-repeat;
            mask: url('/images/multiplex/alert-info.svg') center / contain no-repeat;
        }

/* ============================================================
   Título h4: mismo patrón que h1 (barra roja + mayúsculas), a menor
   escala. Pensado para encabezados de sección "sueltos" dentro del
   body (ej. "A tener en cuenta", "Condiciones de ingreso y compra").
   Figma: https://www.figma.com/design/xAiOzEy75DDifhQ73Hv0xg/Multiplex-WEB?node-id=861-50265
   ============================================================ */
.tema-multiplex h4:not(.modal-title):not(.custom-login-title) {
    position: relative;
    padding-left: 16px;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
    font-size: 20px;
    line-height: 31px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 0;
    margin: 10px 0px 25px;
}

    .tema-multiplex h4:not(.modal-title) strong,
    .tema-multiplex h4:not(.modal-title) b {
        font-weight: 700;
        /* Explícito (no "inherit"): el <p> intermedio puede no tener color
           propio y quedar forzado por Views/DynamicPages/Index.cshtml, y la
           herencia no salta ese nivel. Ver catch-all .dynamic-content-page *
           más arriba para el resto de los casos. */
        color: #ffffff !important;
    }

    .tema-multiplex h4:not(.modal-title):not(.custom-login-title)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        border-radius: 999px;
        background-color: #e50611;
    }

/* ============================================================
   Acordeón — usa el componente .accordion nativo de Bootstrap
   (ya cargado vía bootstrap.bundle.min.js, sin JS propio) con el
   look del diseño. Ej.: "Condiciones de ingreso y compra".
   ============================================================ */
.tema-multiplex .accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tema-multiplex .accordion-item {
    background-color: #1e0101;
    border: 1px solid rgba(130, 24, 26, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.tema-multiplex .accordion-header {
    margin: 0;
}

.tema-multiplex .accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8) !important;
    background-color: #1e0101;
    box-shadow: none;
    padding: 20px;
}

    /* Chevron vía ::after (no un <i> en el contenido editable): reemplaza el
       ícono SVG por defecto de Bootstrap por uno de Font Awesome coloreable,
       y sobrevive a que TinyMCE limpie tags vacíos al guardar. */
    .tema-multiplex .accordion-button::after {
        content: '\f078';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        display: inline-block;
        background-image: none;
        width: auto;
        height: auto;
        flex-shrink: 0;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8) !important;
        transition: transform 0.25s ease;
    }

    .tema-multiplex .accordion-button:not(.collapsed) {
        background-color: #1e0101;
        color: #ffffff !important;
        box-shadow: none;
    }

        .tema-multiplex .accordion-button:not(.collapsed)::after {
            background-image: none;
            transform: rotate(180deg);
        }

.tema-multiplex .accordion-body {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0 20px 20px;
}

    .tema-multiplex .accordion-body p {
        margin: 0 0 20px;
    }

        .tema-multiplex .accordion-body p:last-child {
            margin-bottom: 0;
        }

    .tema-multiplex .accordion-body strong,
    .tema-multiplex .accordion-body b {
        font-weight: 700;
        /* Mismo motivo que en h4 strong/b (ver comentario ahí). */
        color: rgba(255, 255, 255, 0.7) !important;
    }

/* Aviso rojo dentro del acordeón (ej. "Mayores de 4 años o 1 metro de
   altura..." en Salas 4D). Reusa la semántica .alert-danger de Bootstrap
   con la paleta de acento del rediseño en vez del rojo por defecto. */
.tema-multiplex .alert-danger {
    background-color: rgba(229, 6, 17, 0.08);
    border-color: rgba(229, 6, 17, 0.2);
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Pill de enlace externo (ej. "Descargar formulario de autorización INCAA").
   Reutilizable en cualquier bloque de texto del body. */
.tema-multiplex .mp-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background-color: #2a0101;
    border: 1px solid rgba(130, 24, 26, 0.3);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

    .tema-multiplex .mp-link-pill:hover {
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.3);
    }

    /* Ícono vía ::before: este link vive dentro de contenido editable en
       TinyMCE (acordeón "Calificación de películas — Normativa INCAA"), así
       que un <i> puesto a mano en el contenido no sobrevive a un guardado. */
    .tema-multiplex .mp-link-pill::before {
        content: '\f019';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 14px;
    }

/* ============================================================
   Componentes nuevos sin equivalente en Bootstrap (prefijo mp-,
   mismo criterio que .mp-footer__* en footer.css). Reutilizables
   en cualquier vista del rediseño, no específicos de Precios.
   ============================================================ */

/* Ancho de contenido: mismo valor que usa el footer (mp-footer__top). */
.tema-multiplex .mp-container {
    max-width: 1476px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.tema-multiplex .mp-section {
    padding: 40px 0;
    border-bottom: 1px solid rgba(130, 24, 26, 0.15);
}

.tema-multiplex .mp-section--tight {
    padding: 24px 0;
}

.tema-multiplex .mp-section--dark {
    background-color: #1a0000;
}

/* Párrafo secundario "suelto" (ej. debajo del h5 de intro). No hay tag
   semántico libre para reutilizar acá sin pisar otros <p> del body. */
.tema-multiplex .mp-muted {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4) !important;
    margin: 10px 0 0;
}

/* --- Tabs / chips (ej. selector "Elegí tu complejo") --- */
.tema-multiplex .mp-eyebrow {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35) !important;
    margin: 0 0 16px;
}

.tema-multiplex .mp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tema-multiplex .mp-tabs__item {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6) !important;
    background-color: #2a0101;
    border: 1px solid rgba(130, 24, 26, 0.3);
    border-radius: 8px;
    padding: 11px 20px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .tema-multiplex .mp-tabs__item:hover {
        color: #ffffff !important;
        border-color: #e50611;
    }

    .tema-multiplex .mp-tabs__item.is-active {
        background-color: #e50611;
        border-color: #e50611;
        color: #ffffff !important;
    }

/* Equivalente mobile de .mp-tabs (Figma: en pantallas chicas "Elegí tu
   complejo" pasa de chips a un <select>). Oculto en desktop; ver breakpoint
   767.98px más abajo. Sincronizado con .mp-tabs por body.js. */
.tema-multiplex .mp-select-wrap {
    display: none;
    position: relative;
}

.tema-multiplex .mp-select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background-color: #2a0101;
    border: 1px solid rgba(130, 24, 26, 0.3);
    border-radius: 8px;
    padding: 13px 44px 13px 20px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #ffffff !important;
    cursor: pointer;
}

    .tema-multiplex .mp-select:focus {
        outline: none;
        border-color: #e50611;
    }

.tema-multiplex .mp-select-wrap i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 14px;
    pointer-events: none;
}

/* --- Badges (ej. formatos 2D / 3D / 4D / Láser 4K RGB) --- */
.tema-multiplex .mp-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* .mp-badge es un <button>: además de mostrar el formato de sala, filtra
   .mp-price-grid al clickearlo (ver body.js). Toggle: clickear el mismo
   badge activo lo deselecciona y vuelve a mostrar todas las tarjetas. */
.tema-multiplex .mp-badge {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55) !important;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 7px 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .tema-multiplex .mp-badge:hover {
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.3);
    }

    .tema-multiplex .mp-badge.is-active {
        background-color: #e50611;
        border-color: #e50611;
        color: #ffffff !important;
    }

/* --- Barra de complejo (nombre + dirección + badges) --- */
.tema-multiplex .mp-complex-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
}

.tema-multiplex .mp-complex-bar__name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #ffffff !important;
    margin: 0 0 6px;
}

    .tema-multiplex .mp-complex-bar__name strong {
        font-weight: 700;
        /* Mismo motivo que en h4 strong/b (ver comentario ahí). */
        color: #ffffff !important;
    }

.tema-multiplex .mp-complex-bar__address {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 22px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.45) !important;
    margin: 0;
}

    .tema-multiplex .mp-complex-bar__address::before {
        content: '\f3c5';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #e50611 !important;
        font-size: 15px;
    }

/* --- Tarjetas de tarifa por sala --- */
.tema-multiplex .mp-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tema-multiplex .mp-price-card {
    background-color: #1e0101;
    border: 1px solid rgba(130, 24, 26, 0.25);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Barra roja vía ::before (no un <span> vacío en el contenido): TinyMCE
   limpia los tags sin texto al guardar, así que cualquier ícono/adorno que
   dependa de un elemento vacío en el HTML editable desaparece tarde o
   temprano. Mismo criterio que .tema-multiplex h1/h4 y el ícono de .alert. */
.tema-multiplex .mp-price-card__header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 20px 16px 36px;
    border-bottom: 1px solid rgba(130, 24, 26, 0.2);
}

    .tema-multiplex .mp-price-card__header::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        border-radius: 999px;
        background-color: #e50611;
    }

.tema-multiplex .mp-price-card__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 0;
}

/* Hint para quien edite el precio en TinyMCE (aclara a qué complejo
   pertenece esa tarjeta, ya que el título solo trae el formato de sala).
   Se ve en el editor porque TinyMCE no aplica este CSS; en el sitio real
   sí, así que queda oculto. Ej.: <h6 class="mp-price-card__title">2D
   <span class="hint hidden">Multiplex Belgrano:</span></h6> */
.tema-multiplex .mp-price-card__title .hint {
    display: none;
}

.tema-multiplex .mp-price-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(130, 24, 26, 0.15);
    font-family: 'Montserrat', sans-serif !important;
}

    .tema-multiplex .mp-price-card__row:last-child {
        border-bottom: none;
    }

/* font-weight explícito porque Views/DynamicPages/Index.cshtml (vista base)
   pone font-weight:bold en cualquier <span> suelto, y .mp-price-card__label
   es un <span>. */
.tema-multiplex .mp-price-card__label {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5) !important;
}

.tema-multiplex .mp-price-card__value {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8) !important;
    white-space: nowrap;
}

.tema-multiplex .mp-price-card__row--highlight {
    background-color: rgba(204, 0, 0, 0.6);
}

    .tema-multiplex .mp-price-card__row--highlight .mp-price-card__label {
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .tema-multiplex .mp-price-card__row--highlight .mp-price-card__value {
        font-size: 20px;
        color: #ffffff !important;
    }

/* Grupo label + tag (ej. "Promo Precios Bajos" + "Jue, Sáb y Dom") dentro de una fila */
.tema-multiplex .mp-price-card__label-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* font-weight explícito por el mismo motivo que .mp-price-card__label
   (también es un <span>). */
.tema-multiplex .mp-price-card__tag {
    display: inline-flex;
    padding: 3px 8px;
    background-color: rgba(251, 190, 0, 0.15);
    border: 1px solid rgba(251, 190, 0, 0.25);
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    color: #fbbe00 !important;
    white-space: nowrap;
}

/* Estado "No aplica" (ej. formato no disponible en un complejo) */
.tema-multiplex .mp-price-card__empty {
    padding: 20px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* --- Tarjeta de cargo de servicio (columnas) --- */
.tema-multiplex .mp-fee-card {
    background-color: #1e0101;
    border: 1px solid rgba(130, 24, 26, 0.25);
    border-radius: 12px;
    overflow: hidden;
}

.tema-multiplex .mp-fee-card__header {
    position: relative;
    padding: 16px 20px 16px 46px;
    border-bottom: 1px solid rgba(130, 24, 26, 0.2);
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8) !important;
}

    .tema-multiplex .mp-fee-card__header::before {
        content: '\f543';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 16px;
    }

.tema-multiplex .mp-fee-card__row {
    display: flex;
}

.tema-multiplex .mp-fee-card__item {
    flex: 1 1 0;
    text-align: center;
    padding: 24px 16px;
    border-right: 1px solid rgba(130, 24, 26, 0.2);
}

    .tema-multiplex .mp-fee-card__item:last-child {
        border-right: none;
    }

.tema-multiplex .mp-fee-card__amount {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0;
}

.tema-multiplex .mp-fee-card__caption {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4) !important;
    margin: 6px 0 0;
}

/* --- Tarjetas informativas (ej. "A tener en cuenta") --- */
.tema-multiplex .mp-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tema-multiplex .mp-info-card {
    background-color: #1e0101;
    border: 1px solid rgba(130, 24, 26, 0.2);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Ícono de la tarjeta vía ::before, en vez de un <span> vacío con un <i>
   adentro (TinyMCE los limpia al guardar). Las 3 tarjetas de "A tener en
   cuenta" son siempre las mismas 3, en el mismo orden (Promociones /
   Menores / Alimentos y bebidas), así que el ícono se resuelve por
   posición. Si el día de mañana cambia el orden o la cantidad de tarjetas,
   hay que revisar este selector. */
.tema-multiplex .mp-info-card::before {
    content: '\f02b';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background-color: rgba(229, 6, 17, 0.1);
    border: 1px solid rgba(229, 6, 17, 0.2);
    border-radius: 8px;
    color: #e50611 !important;
    font-size: 14px;
}

    .tema-multiplex .mp-info-card:nth-child(2)::before {
        content: '\f1ae'; /* fa-child (Menores) */
    }

    .tema-multiplex .mp-info-card:nth-child(3)::before {
        content: '\f2e7'; /* fa-utensils (Alimentos y bebidas) */
    }

.tema-multiplex .mp-info-card__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0;
}

/* Separador vía ::before en cada párrafo (no un <span> vacío antes de cada
   uno): aparece delante de TODOS los .mp-info-card__text, tantos como haya. */
.tema-multiplex .mp-info-card__text {
    position: relative;
    padding-top: 20px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0;
}

    .tema-multiplex .mp-info-card__text::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 32px;
        height: 4px;
        border-radius: 999px;
        background-color: rgba(229, 6, 17, 0.4);
    }

/* --- Botones bespoke (sin relación con .btn-1 de la theming dinámica) --- */
.tema-multiplex .mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    padding: 15px 28px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.tema-multiplex .mp-btn--ghost {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .tema-multiplex .mp-btn--ghost:hover {
        background-color: rgba(255, 255, 255, 0.18);
        color: #ffffff !important;
    }

/* Botón primario rojo — mismo componente .mp-btn, variante llena (ej. "Ver
   cartelera" en la pantalla de complejo). */
.tema-multiplex .mp-btn--primary {
    background-color: #e50611;
    border: 1px solid #f91f2a;
    color: #ffffff !important;
}

    .tema-multiplex .mp-btn--primary:hover {
        background-color: #c90510;
        color: #ffffff !important;
    }

/* --- Hero de cierre con degradado (ej. "¿Ya elegiste tu función?").
   Reutilizable como CTA de cierre en cualquier página. --- */
.tema-multiplex .mp-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(105.6deg, #000000 6.2%, #cc0000 122.1%);
    padding: 90px 24px;
    text-align: center;
}

/* Cuando este hero es la última sección de la página, se pega al footer
   en vez de dejar el padding-bottom del wrapper (.dynamic-content-page)
   como espacio vacío debajo. */
.tema-multiplex .mp-hero:last-child {
    margin-bottom: -128px;
}

.tema-multiplex .mp-hero__content {
    max-width: 720px;
    margin: 0 auto;
}

/* Ícono chip arriba del título (ej. el CTA de WhatsApp en Complejos). Vía
   <i> real, no ::before: este hero vive en una vista Razor real
   (Views/Complejos/Index.cshtml), no en contenido editado por TinyMCE, así
   que no aplica la restricción de íconos-sólo-por-pseudoelemento. */
.tema-multiplex .mp-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 20px;
    background-color: rgba(229, 6, 17, 0.15);
    border: 1px solid rgba(229, 6, 17, 0.3);
    border-radius: 12px;
    color: #e50611;
    font-size: 22px;
}

.tema-multiplex .mp-hero__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ffffff !important;
    margin: 0;
}

.tema-multiplex .mp-hero__subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 20px 0 0;
}

.tema-multiplex .mp-hero__actions {
    margin-top: 30px;
}

/* Flecha vía ::after, sólo en el botón del hero (no en .mp-btn en general,
   que es un componente genérico reutilizable sin flecha por defecto). */
.tema-multiplex .mp-hero__actions .mp-btn::after {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
}

.tema-multiplex .body .containerPpal ol > li {
    padding-bottom: 8px;
}
    .tema-multiplex .body .containerPpal ol > li::marker {
        font-weight: 500;
        color: #ffffff;
    }

/* --- Error page --- */
.tema-multiplex .container.error h1::before, .tema-multiplex .container.error h4::before {
    display: none;
}

.tema-multiplex .container.error {
    padding-top: 25px;
}

    .tema-multiplex .container.error h1 {
        padding: 25px 0px 35px;
    }

    .tema-multiplex .container.error h4 {
        padding: 25px 0px 35px;
    }

.tema-multiplex .body:has(.container.error) {
    min-height: auto;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .tema-multiplex .mp-price-grid,
    .tema-multiplex .mp-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tema-multiplex h1,
    .tema-multiplex .mp-hero__title {
        font-size: 38px;
    }
}

@media (max-width: 767.98px) {
    /* Figma mobile: https://www.figma.com/design/xAiOzEy75DDifhQ73Hv0xg/Multiplex-WEB?node-id=971-60435 */

    .tema-multiplex .mp-container {
        padding: 0 20px;
    }

    .tema-multiplex .mp-price-grid,
    .tema-multiplex .mp-info-grid {
        grid-template-columns: 1fr;
    }

    /* "Elegí tu complejo": chips → <select> */
    .tema-multiplex .mp-tabs {
        display: none;
    }

    .tema-multiplex .mp-select-wrap {
        display: block;
    }

    .tema-multiplex .mp-complex-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .tema-multiplex .mp-complex-bar__name {
        font-size: 24px;
    }

    /* La tarjeta de cargo de servicio se mantiene en 2 columnas en mobile
       (Figma no la apila; sólo se angostan las columnas). */

    .tema-multiplex h1 {
        font-size: 40px;
    }

    .tema-multiplex .mp-hero__title {
        font-size: 38px;
    }

    .tema-multiplex .mp-hero {
        padding: 60px 24px;
    }
}

/* ============================================================================
   Componentes de pantalla de detalle (ej. "Multiplex Belgrano" en Complejos,
   y probablemente reutilizables tal cual en Salas: hero con foto, grilla de
   tarjetas con ícono, galería, mapa). Sin prefijo mp-complejo- a propósito
   -no son exclusivos de Complejos-, ver [[project-cinestar-multiplex]] en las
   notas de la tanda de trabajo.
   Figma: https://www.figma.com/design/xAiOzEy75DDifhQ73Hv0xg/Multiplex-WEB?node-id=861-44937
   Mobile: https://www.figma.com/design/xAiOzEy75DDifhQ73Hv0xg/Multiplex-WEB?node-id=873-55002

   TinyMCE: todos los íconos de esta sección van por ::before/::after (nunca
   un <i>/<span> vacío en el markup editable) — ver la nota general al
   principio de este archivo sobre por qué TinyMCE los limpia al guardar.
   ============================================================================ */

/* --- Encabezado de sección con barra roja (título grande, 1 o 2 líneas):
   "Un clásico de Belgrano", "Nuestras Salas", "Conocé Multiplex Belgrano",
   "Cómo llegar". Mismo mecanismo que .tema-multiplex h1 (::before) pero como
   clase aparte para poder repetirse varias veces por página (h1 es único). */
.tema-multiplex .mp-heading {
    position: relative;
    padding-left: 20px;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 0 0 12px;
}

    /* Barra vía top:0/bottom:0 (no height fija ni flex — un flex-item
       partido en dos por un <strong>/<br> intermedio rompe el renglón, ver
       nota en .mp-sala-hero__title más abajo). Con el padre en position:
       relative y sin su propia altura fija, top:0;bottom:0 hace que la
       barra tome la altura real del título ya resuelta por el flujo normal
       del texto, sea de 1 o de 2 líneas. */
    .tema-multiplex .mp-heading::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 999px;
        background-color: #e50611;
    }

    .tema-multiplex .mp-heading strong {
        font-weight: 700;
        color: #ffffff !important;
    }

.tema-multiplex .mp-heading__subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 16px 0 0;
}

/* --- Hero con foto de fondo (título + dirección + badges + acciones) --- */
.tema-multiplex .mp-page-hero {
    position: relative;
    overflow: hidden;
    background-color: #1a0101;
}

/* Cuando este hero es la primera sección de la página, se pega al header
   en vez de dejar el padding-top del wrapper (.dynamic-content-page) como
   una franja de color visible arriba de la foto. Mismo criterio que
   .mp-hero:last-child más abajo, para el lado opuesto. */
.tema-multiplex .mp-page-hero:first-child {
    margin-top: -40px;
}

.tema-multiplex .mp-page-hero__media {
    position: absolute;
    inset: 0;
}

    .tema-multiplex .mp-page-hero__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
        display: block;
    }

    .tema-multiplex .mp-page-hero__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(26,0,0,0.75) 0%, rgba(26,0,0,0.35) 50%, rgba(26,0,0,0.35) 100%),
            linear-gradient(0deg, #1a0000 0%, rgba(26,0,0,0.55) 45%, rgba(26,0,0,0.15) 100%);
    }

.tema-multiplex .mp-page-hero__content {
    position: relative;
    padding: 56px 24px 64px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tema-multiplex .mp-page-hero__breadcrumb {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.3) !important;
}

    .tema-multiplex .mp-page-hero__breadcrumb a {
        color: rgba(255, 255, 255, 0.55) !important;
        text-decoration: none;
    }

        .tema-multiplex .mp-page-hero__breadcrumb a:hover {
            color: #ffffff !important;
        }

/* Título real de página (h1): más específico que ".tema-multiplex h1" (2
   clases vs. clase+tag) así gana sin pelear con !important; anula el
   padding/barra del h1 genérico porque este va sobre foto, sin acento
   lateral, y con el split regular/bold propio del Figma de esta pantalla. */
.tema-multiplex .mp-page-hero__title {
    padding-left: 0;
    margin: 6px 0 0;
    font-weight: 400;
    font-size: 72px;
    line-height: 1;
    letter-spacing: 1.8px;
    color: #ffffff !important;
}

    .tema-multiplex .mp-page-hero__title::before {
        content: none !important;
    }

    .tema-multiplex .mp-page-hero__title strong {
        font-weight: 700;
        color: #ffffff !important;
    }

.tema-multiplex .mp-page-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

    .tema-multiplex .mp-page-hero__badges li {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 16px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7) !important;
        background-color: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(4px);
        border-radius: 4px;
        padding: 7px 12px;
    }

.tema-multiplex .mp-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}

    /* Íconos vía ::after/::before (no <i> en el contenido editable). */
    .tema-multiplex .mp-page-hero__actions .mp-btn--primary::after {
        content: '\f061';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 16px;
    }

    .tema-multiplex .mp-page-hero__actions .mp-btn--ghost::before {
        content: '\f124';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 15px;
    }

/* --- Línea con dirección (ícono de pin vía ::before) y línea con teléfono
   (ícono de teléfono vía ::before) — reutilizables en cualquier bloque de
   texto, no sólo en el hero. --- */
.tema-multiplex .mp-address-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0;
}

    .tema-multiplex .mp-address-line::before {
        content: '\f3c5';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: #e50611;
        font-size: 16px;
    }

.tema-multiplex .mp-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
}

    .tema-multiplex .mp-phone-link::before {
        content: '\f095';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: #e50611;
        font-size: 15px;
    }

    .tema-multiplex .mp-phone-link:hover {
        color: #ffffff !important;
    }

/* --- Grilla partida 2 columnas (texto + imagen, o texto + mapa) --- */
.tema-multiplex .mp-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: start;
}

    .tema-multiplex .mp-split__text p {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 18px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.6) !important;
        margin: 0 0 18px;
    }

    /* Botón al final de la columna de texto (ej. "Abrir en Google Maps"). */
    .tema-multiplex .mp-split__text > .mp-btn {
        margin-top: 28px;
    }

.tema-multiplex .mp-split__media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-color: #1e0101;
    border: 1px solid rgba(130, 24, 26, 0.2);
    aspect-ratio: 496 / 372;
}

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

/* Cuando el markup usa un <button> en vez de un <div> para abrir la foto en
   .mp-lightbox (ver initMpLightbox en body.js — cualquier tag con
   [data-lightbox-src] sirve), resetea el estilo por defecto del <button>
   sin tocar el resto de los usos no-clickeables de .mp-split__media
   (ej. el mapa embebido en Complejos). */
.tema-multiplex .mp-split__media[data-lightbox-src] {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: zoom-in;
}

/* --- Lista de chips/pills (ej. "Servicios": Estacionamiento, Bar, Candy) --- */
.tema-multiplex .mp-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .tema-multiplex .mp-pill-list li {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.55) !important;
        background-color: rgba(48, 2, 2, 0.6);
        border: 1px solid rgba(130, 24, 26, 0.3);
        border-radius: 999px;
        padding: 8px 16px;
    }

/* --- Barra de estadísticas (ej. 9 Salas / 2D·3D·4D Formatos / ...) --- */
.tema-multiplex .mp-stats-bar {
    background-color: #2a0101;
    border-top: 1px solid rgba(130, 24, 26, 0.15);
    border-bottom: 1px solid rgba(130, 24, 26, 0.15);
}

.tema-multiplex .mp-stats-bar__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 20px 0;
}

.tema-multiplex .mp-stats-bar__item {
    flex: 1 1 0;
    min-width: 160px;
    text-align: center;
    padding: 0 16px;
    border-right: 1px solid rgba(130, 24, 26, 0.15);
}

    .tema-multiplex .mp-stats-bar__item:last-child {
        border-right: none;
    }

.tema-multiplex .mp-stats-bar__value {
    display: block;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 0.65px;
    color: #ffffff !important;
}

.tema-multiplex .mp-stats-bar__label {
    display: block;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px;
    letter-spacing: 1.98px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-top: 8px;
}

/* --- Grilla de tarjetas con ícono (ej. "Nuestras Salas": 2D, 3D, 4D...).
   Mismo criterio que .mp-info-card::before (ícono vía ::before + nth-child,
   nunca un <i>/<span> vacío en el markup editable) — si el día de mañana
   cambia el orden o la cantidad de tarjetas, hay que revisar los selectores
   nth-child de acá abajo. --- */
.tema-multiplex .mp-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.tema-multiplex .mp-feature-card {
    position: relative;
    background-color: #1e0101;
    border: 1px solid rgba(130, 24, 26, 0.25);
    border-radius: 12px;
    padding: 20px;
}

    .tema-multiplex .mp-feature-card::before {
        content: '\f008'; /* fa-film */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: rgba(229, 6, 17, 0.1);
        border: 1px solid rgba(229, 6, 17, 0.2);
        border-radius: 8px;
        color: #e50611;
        font-size: 17px;
        margin-bottom: 20px;
    }

    .tema-multiplex .mp-feature-card:nth-child(2)::before { content: '\f028'; } /* fa-volume-up */
    .tema-multiplex .mp-feature-card:nth-child(3)::before { content: '\f1b2'; } /* fa-cube */
    .tema-multiplex .mp-feature-card:nth-child(4)::before { content: '\f0e7'; } /* fa-bolt */
    .tema-multiplex .mp-feature-card:nth-child(5)::before { content: '\f729'; } /* fa-vr-cardboard */
    .tema-multiplex .mp-feature-card:nth-child(6)::before { content: '\f4b8'; } /* fa-couch */

.tema-multiplex .mp-feature-card__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 0 0 8px;
}

.tema-multiplex .mp-feature-card__desc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.35) !important;
    margin: 0;
}

/* --- Galería de fotos en bento grid (miniatura grande + chicas). Click en
   una miniatura abre .mp-lightbox (ver body.js: initMpLightbox). --- */
.tema-multiplex .mp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    gap: 16px;
    margin-top: 32px;
}

.tema-multiplex .mp-gallery-grid__item {
    position: relative;
    grid-column: span 1;
    grid-row: span 1;
    border: 0;
    padding: 0;
    background-color: #1e0101;
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    display: block;
    width: 100%;
    height: 100%;
}

.tema-multiplex .mp-gallery-grid__item--large {
    grid-column: span 2;
    grid-row: span 2;
}

    .tema-multiplex .mp-gallery-grid__item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
    }

    .tema-multiplex .mp-gallery-grid__item:hover img {
        transform: scale(1.04);
    }

    .tema-multiplex .mp-gallery-grid__item::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 40%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .tema-multiplex .mp-gallery-grid__item:hover::after,
    .tema-multiplex .mp-gallery-grid__item:focus-visible::after {
        opacity: 1;
    }

.tema-multiplex .mp-gallery-grid__caption {
    position: absolute;
    left: 20px;
    bottom: 16px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

    .tema-multiplex .mp-gallery-grid__item:hover .mp-gallery-grid__caption,
    .tema-multiplex .mp-gallery-grid__item:focus-visible .mp-gallery-grid__caption {
        opacity: 1;
        transform: translateY(0);
    }

/* --- Lightbox (popup de imagen ampliada). El botón de cerrar usa el
   carácter "×" como texto real (no un <i> vacío) para sobrevivir a
   TinyMCE si este bloque queda dentro de contenido editable. --- */
.tema-multiplex .mp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: rgba(10, 0, 0, 0.9);
}

    .tema-multiplex .mp-lightbox.is-open {
        display: flex;
    }

.tema-multiplex .mp-lightbox__figure {
    position: relative;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tema-multiplex .mp-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    border-radius: 12px;
    border: 1px solid rgba(130, 24, 26, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.tema-multiplex .mp-lightbox__caption {
    margin-top: 16px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7) !important;
}

.tema-multiplex .mp-lightbox__close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e50611;
    border: 1px solid #f91f2a;
    border-radius: 999px;
    color: #ffffff !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* --- Accesos / cómo llegar (ícono vía ::before + nth-child, mismo criterio
   que .mp-feature-card de más arriba). --- */
.tema-multiplex .mp-transit {
    border-top: 1px solid rgba(130, 24, 26, 0.2);
    padding-top: 24px;
}

.tema-multiplex .mp-transit__item {
    position: relative;
    min-height: 36px;
    padding-left: 52px;
    margin-bottom: 20px;
}

    .tema-multiplex .mp-transit__item:last-child {
        margin-bottom: 0;
    }

    .tema-multiplex .mp-transit__item::before {
        content: '\f238'; /* fa-train, Subte */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background-color: rgba(229, 6, 17, 0.1);
        border: 1px solid rgba(229, 6, 17, 0.2);
        border-radius: 8px;
        color: #e50611;
        font-size: 15px;
    }

    .tema-multiplex .mp-transit__item:nth-child(2)::before { content: '\f207'; } /* fa-bus, Colectivos */
    .tema-multiplex .mp-transit__item:nth-child(3)::before { content: '\f54e'; } /* fa-store, Zona comercial */

.tema-multiplex .mp-transit__name {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff !important;
    margin: 0 0 4px;
}

.tema-multiplex .mp-transit__desc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.45) !important;
    margin: 0;
}

/* --- Modificadores explícitos de ícono (mp-feature-card / mp-info-card /
   mp-transit__item). Los otros complejos (Canning, Lavalle, Pilar, San
   Juan) tienen distinta cantidad/orden de tarjetas que Belgrano — el ícono
   por posición (nth-child, definido más arriba) deja de alcanzar apenas la
   grilla cambia. Estos modificadores lo pisan explícitamente sin importar
   la posición; agregar la clase en el markup según el formato/ítem real
   (ej. <article class="mp-feature-card mp-feature-card--laser">). Mismas
   reglas de especificidad que .mp-heading etc.: van después en el archivo,
   así ganan por orden de aparición ante el empate de especificidad con los
   nth-child. --- */
.tema-multiplex .mp-feature-card--2d::before { content: '\f008'; }
.tema-multiplex .mp-feature-card--3d::before { content: '\f1b2'; }
.tema-multiplex .mp-feature-card--4d::before { content: '\f729'; }
.tema-multiplex .mp-feature-card--fxplus::before { content: '\f028'; }
.tema-multiplex .mp-feature-card--comfortplus::before { content: '\f4b8'; }
.tema-multiplex .mp-feature-card--xtremo::before { content: '\f0e7'; }
.tema-multiplex .mp-feature-card--platinum::before { content: '\f3a5'; }
.tema-multiplex .mp-feature-card--laser::before { content: '\f519'; }

.tema-multiplex .mp-info-card--film::before { content: '\f008'; }
.tema-multiplex .mp-info-card--utensils::before { content: '\f2e7'; }
.tema-multiplex .mp-info-card--store::before { content: '\f54e'; }
.tema-multiplex .mp-info-card--parking::before { content: '\f540'; }
.tema-multiplex .mp-info-card--shield::before { content: '\f3ed'; }
.tema-multiplex .mp-info-card--globe::before { content: '\f0ac'; }
.tema-multiplex .mp-info-card--tablet::before { content: '\f3fa'; }
.tema-multiplex .mp-info-card--ticket::before { content: '\f3ff'; }
.tema-multiplex .mp-info-card--gift::before { content: '\f06b'; }

.tema-multiplex .mp-transit__item--subte::before { content: '\f238'; }
.tema-multiplex .mp-transit__item--bus::before { content: '\f207'; }
.tema-multiplex .mp-transit__item--shop::before { content: '\f54e'; }
.tema-multiplex .mp-transit__item--parking::before { content: '\f540'; }
.tema-multiplex .mp-transit__item--city::before { content: '\f64f'; }

/* --- Tag / badge chico reutilizable (ej. "SALA 1 · LÁSER 4K RGB",
   "PRIMERA SALA 4D DE ARGENTINA", "VIENTO", "MICROCENTRO"). Usado como
   badge suelto sobre un .mp-heading, o en grupo dentro de .mp-tag-list
   (ej. los tags de efectos 4D o los 3 chips de ubicación de Lavalle). --- */
.tema-multiplex .mp-tag {
    display: inline-block;
    padding: 8px 13px;
    background-color: rgba(229, 6, 17, 0.1);
    border: 1px solid rgba(229, 6, 17, 0.2);
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #e50611 !important;
    margin: 0 0 16px;
}

.tema-multiplex .mp-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}

    .tema-multiplex .mp-tag-list .mp-tag {
        margin: 0;
    }

/* Ícono del botón "Abrir en Google Maps" — vía ::before, no <i>. */
.tema-multiplex .mp-map-cta::before {
    content: '\f279';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 15px;
}

/* --- Mapa embebido (iframe real, interactivo) --- */
.tema-multiplex .mp-map-embed {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(130, 24, 26, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    aspect-ratio: 504 / 422;
    background-color: #1e0101;
}

    .tema-multiplex .mp-map-embed iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

@media (max-width: 1199.98px) {
    .tema-multiplex .mp-page-hero__title {
        font-size: 56px;
    }
}

@media (max-width: 991.98px) {
    .tema-multiplex .mp-page-hero__title {
        font-size: 46px;
    }

    .tema-multiplex .mp-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .tema-multiplex .mp-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tema-multiplex .mp-stats-bar__list {
        flex-wrap: wrap;
    }

    .tema-multiplex .mp-stats-bar__item {
        flex: 1 1 50%;
        border-right: none;
        padding: 12px 8px;
    }

    .tema-multiplex .mp-gallery-grid {
        grid-auto-rows: 200px;
    }
}

@media (max-width: 767.98px) {
    /* Figma mobile: https://www.figma.com/design/xAiOzEy75DDifhQ73Hv0xg/Multiplex-WEB?node-id=873-55002 */

    .tema-multiplex .mp-page-hero__content {
        padding: 32px 20px 40px;
    }

    .tema-multiplex .mp-page-hero__title {
        font-size: 34px;
        letter-spacing: 1px;
    }

    .tema-multiplex .mp-page-hero__actions {
        flex-direction: column;
    }

        .tema-multiplex .mp-page-hero__actions .mp-btn {
            width: 100%;
        }

    .tema-multiplex .mp-heading {
        font-size: 28px;
    }

    .tema-multiplex .mp-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .tema-multiplex .mp-feature-card {
        padding: 16px;
    }

    .tema-multiplex .mp-gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 16px;
    }

        .tema-multiplex .mp-gallery-grid__item,
        .tema-multiplex .mp-gallery-grid__item--large {
            grid-column: span 1;
            grid-row: span 1;
            aspect-ratio: 362 / 271.5;
        }

    .tema-multiplex .mp-gallery-grid__caption {
        opacity: 1;
        transform: none;
    }

    .tema-multiplex .mp-gallery-grid__item::after {
        opacity: 0.9;
    }

    .tema-multiplex .mp-map-embed {
        aspect-ratio: 362 / 272;
    }

    .tema-multiplex .mp-lightbox {
        padding: 20px;
    }

    .tema-multiplex .mp-lightbox__close {
        top: -14px;
        right: 0;
    }
}

/* ============================================================================
   Componentes de pantalla de detalle de Sala (ej. "Cine 2D", "Sala X-tremo").
   A diferencia del hero de Complejos (foto de fondo a página completa), acá
   todo el fondo de la página es un color sólido que varía según el formato
   (se define inline en el <section>, no acá, para no necesitar un modificador
   por cada una de las 6 salas). Prefijo mp-sala- porque esta forma es propia
   de estas 6 pantallas.
   Figma 2D desktop: https://www.figma.com/design/xAiOzEy75DDifhQ73Hv0xg/Multiplex-WEB?node-id=1002-64520
   Figma 2D mobile: https://www.figma.com/design/xAiOzEy75DDifhQ73Hv0xg/Multiplex-WEB?node-id=1050-83598

   TinyMCE: mismo criterio que el resto del archivo — íconos vía ::before,
   nunca un <i>/<span> vacío en el markup editable.
   ============================================================================ */

.tema-multiplex .mp-sala-hero {
    position: relative;
    padding: 48px 0 56px;
}

/* Se pega al header en vez de dejar el padding-top del wrapper como una
   franja de color visible arriba (mismo criterio que .mp-page-hero:first-child). */
.tema-multiplex .mp-sala-hero:first-child {
    margin-top: -40px;
}

/* Separador entre la banda del hero y la banda de contenido siguiente: en el
   Figma es un único bloque con un solo border-bottom bajo el hero; acá son
   dos <section> del mismo color, así que el separador se dibuja entre ambas. */
.tema-multiplex .mp-sala-hero + .mp-sala-hero {
    border-top: 1px solid rgba(130, 24, 26, 0.4);
}

.tema-multiplex .mp-sala-hero__breadcrumb {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35) !important;
    margin: 0 0 32px;
}

    .tema-multiplex .mp-sala-hero__breadcrumb a {
        color: rgba(255, 255, 255, 0.35) !important;
        text-decoration: none;
    }

        .tema-multiplex .mp-sala-hero__breadcrumb a:hover {
            color: #ffffff !important;
        }

    .tema-multiplex .mp-sala-hero__breadcrumb span {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .tema-multiplex .mp-sala-hero__breadcrumb .mp-sala-hero__sep {
        color: rgba(229, 6, 17, 0.6) !important;
        padding: 0 2px;
    }

/* Título real de página (h1): 2 clases vs. clase+tag, gana sin pelear con
   !important — mismo mecanismo que .mp-page-hero__title (ver comentario ahí).
   NO usa flex/grid para la barra: un <strong> (ej. en otros títulos con
   mp-heading) se vuelve su propio flex-item separado del texto de al lado
   en vez de fluir en la misma línea — por eso acá y en .mp-heading la barra
   va por position:absolute + top:0/bottom:0 en vez de flex-stretch. */
.tema-multiplex .mp-sala-hero__title {
    position: relative;
    padding-left: 28px;
    margin: 0 0 20px;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.05;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff !important;
}

    /* Reset explícito de position/top/bottom/height/transform: sin esto,
       .tema-multiplex h1::before (menor especificidad en general, pero que
       compite propiedad por propiedad) deja pasar su propio top:50% +
       transform:translateY(-50%) + height:32px en cualquier propiedad que
       esta regla no pise, y la barra queda flotando fuera de lugar. */
    .tema-multiplex .mp-sala-hero__title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        height: auto;
        width: 10px;
        transform: none;
        border-radius: 999px;
        background-color: #e50611;
    }

.tema-multiplex .mp-sala-hero__lead {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px;
    line-height: 1.55;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 0 16px;
}

/* Grilla de 2 columnas del hero: reusa la mecánica de .mp-split (texto +
   media) sumando esta clase, sólo el tamaño del párrafo cambia (20px acá
   contra los 18px por defecto de .mp-split__text p en el resto del sitio). */
.tema-multiplex .mp-sala-hero__grid .mp-split__text p {
    font-size: 20px;
}

/* --- Media con velo rojo diagonal + badge de formato centrado (ej. "Cine
   2D Tradicional" sobre la foto de la sala) --- */
.tema-multiplex .mp-split__media--tinted {
    background-color: #1e0101;
    border-color: rgba(130, 24, 26, 0.35);
}

    .tema-multiplex .mp-split__media--tinted::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(140deg, rgba(227, 6, 20, 0.18) 0%, rgba(227, 6, 20, 0) 45%);
        pointer-events: none;
    }

    .tema-multiplex .mp-split__media--tinted img {
        opacity: 0.85;
    }

.tema-multiplex .mp-format-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.tema-multiplex .mp-format-badge__caption {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85) !important;
}

.tema-multiplex .mp-format-badge__logo {
    width: 140px;
    height: auto;
    display: block;
    margin: 2px 0;
}

/* --- Tags con ícono (ej. "Proyección digital", "Sonido envolvente") ---
   Distinto de .mp-pill-list (pill sólida sin ícono, texto claro) y de
   .mp-tag (pill roja de acento): acá es rectangular, fondo casi
   transparente y texto blanco apagado. */
.tema-multiplex .mp-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.tema-multiplex .mp-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background-color: rgba(229, 6, 17, 0.08);
    border: 1px solid rgba(229, 6, 17, 0.25);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65) !important;
}

    .tema-multiplex .mp-feature-tag::before {
        content: '\f00c';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 13px;
        color: #e50611;
    }

/* --- Variante "cortina" del hero de cierre (.mp-hero): sin degradado
   propio, deja ver la cortina de fondo del sitio (.tema-multiplex .body::before)
   detrás — así lo pide el Figma de Salas para "Volvé a disfrutar el cine",
   a diferencia del degradado negro-rojo que .mp-hero usa en Complejos/Precios. --- */
.tema-multiplex .mp-hero--curtain {
    background: transparent;
    padding: 70px 24px 90px;
}

/* Ícono decorativo arriba del título: va como ::before del contenedor (no
   un <div>/<span> vacío en el markup, TinyMCE lo limpiaría al guardar). Se
   inserta antes del <h2>, así que con flex + margin auto queda centrado. */
.tema-multiplex .mp-hero--curtain .mp-hero__content::before {
    content: '\f008'; /* fa-film, ícono por defecto (varía por sala vía --icon abajo) */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 20px;
    background-color: rgba(229, 6, 17, 0.15);
    border: 1px solid rgba(229, 6, 17, 0.3);
    border-radius: 10px;
    color: #e50611;
    font-size: 18px;
}

/* Variantes de ícono del CTA de cierre por sala (misma idea que los
   modificadores --2d/--3d/etc. de .mp-feature-card más arriba). */
.tema-multiplex .mp-hero--curtain.mp-hero--icon-3d .mp-hero__content::before { content: '\f1b2'; } /* fa-cube */
.tema-multiplex .mp-hero--curtain.mp-hero--icon-4d .mp-hero__content::before { content: '\f0e7'; } /* fa-bolt */
.tema-multiplex .mp-hero--curtain.mp-hero--icon-platinum .mp-hero__content::before { content: '\f3a5'; } /* fa-gem */
.tema-multiplex .mp-hero--curtain.mp-hero--icon-xtremo .mp-hero__content::before { content: '\f0e7'; } /* fa-bolt */
.tema-multiplex .mp-hero--curtain.mp-hero--icon-comfortplus .mp-hero__content::before { content: '\f4b8'; } /* fa-couch */

/* --- Bento de 3 fotos (foto grande + 2 apiladas a la derecha), ej. "Conocé
   la experiencia 3D". Reusa el look de .mp-split__media en cada celda (sólo
   se anula el aspect-ratio fijo porque acá el alto lo da el grid). --- */
.tema-multiplex .mp-sala-media-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-auto-rows: 187px;
    gap: 16px;
    margin-top: 32px;
}

    .tema-multiplex .mp-sala-media-grid > :first-child {
        grid-row: span 2;
    }

    .tema-multiplex .mp-sala-media-grid .mp-split__media {
        aspect-ratio: auto;
    }

/* --- Video embebido (ej. "Viví la experiencia 4D"): iframe real de
   YouTube, mismo mecanismo responsive que .mp-map-embed (aspect-ratio +
   iframe absoluto). --- */
.tema-multiplex .mp-video-embed {
    position: relative;
    aspect-ratio: 1072 / 603;
    border-radius: 12px;
    overflow: hidden;
    background-color: #1e0101;
    border: 1px solid rgba(130, 24, 26, 0.35);
}

    .tema-multiplex .mp-video-embed iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* --- Tarjeta de nota suelta (ej. "Una programación especial" en Platinum):
   título + texto + una línea destacada con borde izquierdo. Reutilizable
   para cualquier aviso corto que necesite su propia tarjeta, no sólo Salas. --- */
.tema-multiplex .mp-note-card {
    background-color: #1e0101;
    border: 1px solid rgba(130, 24, 26, 0.25);
    border-radius: 12px;
    padding: 28px 24px;
}

    .tema-multiplex .mp-note-card .mp-heading {
        margin-bottom: 12px;
    }

    .tema-multiplex .mp-note-card p {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 18px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.6) !important;
        margin: 0 0 20px;
    }

.tema-multiplex .mp-callout {
    display: block;
    padding-left: 16px;
    border-left: 2px solid rgba(229, 6, 17, 0.6);
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 991.98px) {
    .tema-multiplex .mp-sala-hero__title {
        font-size: 46px;
    }
}

@media (max-width: 767.98px) {
    /* Figma mobile: https://www.figma.com/design/xAiOzEy75DDifhQ73Hv0xg/Multiplex-WEB?node-id=1050-83598 */

    .tema-multiplex .mp-sala-hero {
        padding: 32px 0 40px;
    }

    .tema-multiplex .mp-sala-hero__title {
        font-size: 40px;
        padding-left: 18px;
    }

    .tema-multiplex .mp-sala-hero__lead {
        font-size: 18px;
    }

    .tema-multiplex .mp-sala-hero__grid .mp-split__text p {
        font-size: 18px;
    }

    .tema-multiplex .mp-format-badge__logo {
        width: 110px;
    }

    .tema-multiplex .mp-feature-tags {
        margin-top: 20px;
    }

    .tema-multiplex .mp-sala-media-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

        .tema-multiplex .mp-sala-media-grid > :first-child {
            grid-row: span 1;
        }

        .tema-multiplex .mp-sala-media-grid .mp-split__media {
            aspect-ratio: 362 / 271.5;
        }

    .tema-multiplex .mp-hero--curtain {
        padding: 56px 20px 70px;
    }
}

/* ============================================================
   Listado "Nuestros Complejos": intro centrado + grilla de tarjetas de
   complejo. Figma: node-id=729-26391 (desktop), 729-27674 (mobile).
   ============================================================ */

/* --- Intro de página centrado (título + bajada). Distinto de .mp-heading
   (barra roja a la izquierda, pensado para subtítulos repetidos dentro de
   la página) — este es el título principal (h1) de una pantalla de
   listado, centrado y sin barra. Genérico: lo reusa también el listado de
   Salas (ver ScriptsSQL/create-salas-listing-page-multiplex.sql). --- */
.tema-multiplex .mp-page-intro {
    text-align: center;
    padding: 48px 0 40px;
}

.tema-multiplex .mp-page-intro__title {
    padding-left: 0;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 38px;
    line-height: 1.25;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 0;
}

    .tema-multiplex .mp-page-intro__title::before {
        content: none !important;
    }

    .tema-multiplex .mp-page-intro__title strong {
        font-weight: 700;
        color: #ffffff !important;
    }

.tema-multiplex .mp-page-intro__subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8) !important;
    max-width: 700px;
    margin: 16px auto 0;
}

/* --- Grilla de tarjetas responsive 3 → 2 → 1 columnas. Genérica, no
   específica de Complejos: cualquier listado de tarjetas puede reusarla. --- */
.tema-multiplex .mp-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

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

@media (max-width: 767.98px) {
    .tema-multiplex .mp-card-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Tarjeta de complejo (foto con título superpuesto + dirección/teléfono
   + servicios + CTA). Usada en el listado "Nuestros Complejos". --- */
.tema-multiplex .mp-complejo-card {
    display: flex;
    flex-direction: column;
    background-color: #280101;
    border: 1px solid rgba(251, 190, 0, 0.5);
    border-radius: 16px;
    overflow: hidden;
}

/* Alto fijo (no aspect-ratio): dentro de .mp-card-grid las tarjetas de una
   misma fila se estiran a la altura de la más alta (ej. Pilar con 2 líneas
   de tags) por el align-items:stretch por default del grid — con
   aspect-ratio el alto de la foto variaba según cuánto creciera la tarjeta,
   dejando los títulos superpuestos a distinta altura entre tarjetas. Con
   alto fijo + flex-shrink:0 la foto (contenida vía object-fit:cover en el
   <img>) mide siempre lo mismo y el que absorbe el espacio extra es
   .mp-complejo-card__body (flex:1 1 auto). */
.tema-multiplex .mp-complejo-card__media {
    position: relative;
    flex-shrink: 0;
    height: 192px;
    overflow: hidden;
}

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

    .tema-multiplex .mp-complejo-card__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%);
    }

.tema-multiplex .mp-complejo-card__title {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 16px;
    z-index: 1;
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400;
    font-size: 34px;
    letter-spacing: 0.85px;
    text-transform: uppercase;
    color: #ffffff !important;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.tema-multiplex .mp-complejo-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
}

.tema-multiplex .mp-complejo-card .mp-address-line,
.tema-multiplex .mp-complejo-card .mp-phone-link {
    font-size: 16px;
}

.tema-multiplex .mp-complejo-card .mp-pill-list {
    margin-top: -2px;
}

.tema-multiplex .mp-complejo-card .mp-btn {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

/* --- Etiqueta corta en mayúscula, negrita, blanca (ej. "SERVICIOS" en la
   tarjeta de complejo). Reutilizable como sub-título chico dentro de
   cualquier bloque — el listado de Salas también la usa para
   "CARACTERÍSTICAS". --- */
.tema-multiplex .mp-label-strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 4px 0 0;
}

/* --- Variante con check de .mp-pill-list (ej. "Servicios": Estacionamiento,
   Candy, 2D, 3D, 4D). La base .mp-pill-list ya cubre la pill sin ícono. --- */
.tema-multiplex .mp-pill-list--check li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .tema-multiplex .mp-pill-list--check li::before {
        content: '\f00c';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.5);
    }

/* --- Variante "tarjeta" de .mp-split: fondo, borde y radio propios, para
   cuando el split no va suelto sobre la sección sino contenido en su propia
   tarjeta (ej. cada formato en el listado "Nuestras Salas"). --- */
.tema-multiplex .mp-split--card {
    background-color: #310202;
    border: 1px solid #5a1616;
    border-radius: 16px;
    padding: 48px;
}

.tema-multiplex .mp-split--card + .mp-split--card {
    margin-top: 24px;
}

/* --- Lista vertical de características con ícono de check (ej. "Imagen 4K
   Digital"). Distinto de .mp-feature-tags (chips en fila): acá cada ítem
   ocupa su propia línea, con el check en un círculo. --- */
.tema-multiplex .mp-check-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.tema-multiplex .mp-check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    color: #d1d5dc !important;
}

    .tema-multiplex .mp-check-list li::before {
        content: '\f00c';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        flex: 0 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 999px;
        background-color: rgba(229, 6, 17, 0.2);
        color: #e50611;
        font-size: 10px;
    }

/* --- Link de texto con flecha (ej. "Conocer Cine Tradicional 2D"), CTA
   secundario dentro de un .mp-split/.mp-split--card. --- */
.tema-multiplex .mp-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    font-family: 'Bebas Neue', sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fbbe00 !important;
    text-decoration: none;
}

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

    .tema-multiplex .mp-link-arrow:hover {
        color: #ffffff !important;
    }

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

@media (max-width: 991.98px) {
    .tema-multiplex .mp-page-intro__title {
        font-size: 32px;
    }

    .tema-multiplex .mp-split--card {
        padding: 32px;
    }
}

@media (max-width: 767.98px) {
    .tema-multiplex .mp-page-intro {
        padding: 32px 0 28px;
    }

    .tema-multiplex .mp-page-intro__title {
        font-size: 28px;
    }

    .tema-multiplex .mp-page-intro__subtitle {
        font-size: 17px;
    }

    .tema-multiplex .mp-complejo-card__title {
        font-size: 28px;
    }

    .tema-multiplex .mp-split--card {
        padding: 24px 20px;
    }

    /* Mobile siempre muestra la foto primero, sin importar qué lado tenga
       en desktop (Figma alterna izquierda/derecha sólo en desktop). */
    .tema-multiplex .mp-split--card .mp-split__media {
        order: -1;
    }
}

/* ============================================================
   Modal "Ver Detalle" del drawer de compra (.dm-*, definido en
   _DrawerCompraStyles.cshtml) — alinea su tipografía a la del resto
   del rediseño Multiplex (Bebas Neue en títulos, Montserrat en texto;
   antes heredaba la fuente dinámica del tema base). Los colores NO se
   tocan acá: siguen saliendo de las variables dinámicas @drw* del
   propio archivo (@drwBg, @drwSurface1, etc.), como corresponde.
   ============================================================ */
.tema-multiplex .dm-body {
    padding: 24px 28px 32px;
}

.tema-multiplex .dm-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 26px;
    letter-spacing: 0.5px;
    font-weight: 400;
}

.tema-multiplex .dm-orig,
.tema-multiplex .dm-sinopsis,
.tema-multiplex .dm-tag {
    font-family: 'Montserrat', sans-serif !important;
}

.tema-multiplex .dm-tag {
    font-weight: 600;
    letter-spacing: 0.3px;
}

.tema-multiplex .dm-trailer-btn {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 15px;
    letter-spacing: 1.2px;
}

/* ============================================================================
   Componentes de pantalla de Promoción (ej. "Lunes a Miércoles a Mitad de
   Precio"). Página dbo.Pages (mismo mecanismo que el Footer, confirmado con
   el cliente) servida por Views/DynamicPages/Page.cshtml — contenido editado
   en TinyMCE, por eso TODOS los íconos de acá abajo van vía ::before/::after
   de Font Awesome (nunca un <i>/<span> vacío en el markup, ver la nota
   general al principio de este archivo sobre por qué TinyMCE lo limpia al
   guardar).
   Figma: https://www.figma.com/design/xAiOzEy75DDifhQ73Hv0xg/Multiplex-WEB?node-id=1011-69093
   ============================================================================ */

.tema-multiplex .mp-promo-hero {
    padding: 48px 0 90px;
}

.tema-multiplex .mp-promo-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.7fr;
    gap: 48px;
    align-items: start;
}

/* Título grande de la promoción: mismo mecanismo que ".tema-multiplex h1"
   (barra roja vía ::before, heredada porque este título SÍ es el <h1> real
   de la página), sólo se pisa el tamaño (60px en vez de 48px) para calzar
   con el Figma de Promociones. */
.tema-multiplex .mp-promo-hero__title {
    font-size: 60px;
    line-height: 1.05;
    margin: 24px 0 20px;
    /* La regla "red de seguridad" .dynamic-content-page * (2 clases) pisa el
       color:#fff del .tema-multiplex h1 genérico (1 clase + 1 tag, menos
       específico) y lo dejaba en rgba(.7) — mismo empate de especificidad
       que esa regla (2 clases acá también), pero esta va después en el
       archivo, así que gana por orden. */
    color: #ffffff !important;
}

    /* Barra roja a la altura completa del título (4 líneas), en vez de los
       32px centrados fijos del .tema-multiplex h1::before genérico (pensado
       para un h1 de 1 línea) — mismo mecanismo que .mp-heading::before. */
    .tema-multiplex h1.mp-promo-hero__title::before {
        top: 0;
        bottom: 0;
        height: auto;
        transform: none;
    }

.tema-multiplex .mp-promo-hero__tagline {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 0 16px;
}

.tema-multiplex .mp-promo-hero__desc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 0 24px;
}

/* --- Variante con ícono de .mp-page-hero__badges (ej. "Lunes · Martes ·
   Miércoles", "Todos los complejos"). La base sin ícono sigue disponible
   para badges de sólo texto. --- */
.tema-multiplex .mp-page-hero__badges li.mp-badge-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .tema-multiplex .mp-page-hero__badges li.mp-badge-icon::before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
    }

    .tema-multiplex .mp-page-hero__badges li.mp-badge-icon--calendar::before { content: '\f073'; }
    .tema-multiplex .mp-page-hero__badges li.mp-badge-icon--location::before { content: '\f3c5'; }
    .tema-multiplex .mp-page-hero__badges li.mp-badge-icon--clock::before { content: '\f017'; }
    .tema-multiplex .mp-page-hero__badges li.mp-badge-icon--ticket::before { content: '\f3ff'; }
    .tema-multiplex .mp-page-hero__badges li.mp-badge-icon--cart::before { content: '\f07a'; }
    .tema-multiplex .mp-page-hero__badges li.mp-badge-icon--film::before { content: '\f008'; }
    .tema-multiplex .mp-page-hero__badges li.mp-badge-icon--store::before { content: '\f54e'; }

    /* Modificador de color (ej. el badge de días, con acento rojo, a
       diferencia del badge neutro "Todos los complejos"). */
    .tema-multiplex .mp-page-hero__badges li.mp-badge-icon--accent {
        background-color: rgba(229, 6, 17, 0.1);
        border-color: rgba(229, 6, 17, 0.3);
        color: rgba(255, 255, 255, 0.75) !important;
    }

        .tema-multiplex .mp-page-hero__badges li.mp-badge-icon--accent::before {
            color: #e50611;
        }

/* --- Tarjeta de oferta compacta, al lado del hero de la promoción (ej.
   "50% OFF / En entradas"). Ícono de ticket vía ::before. --- */
.tema-multiplex .mp-offer-card {
    position: relative;
    margin-top: 48px;
    background-color: #1e0101;
    border: 1px solid rgba(130, 24, 26, 0.35);
    border-radius: 16px;
    padding: 32px;
}

    .tema-multiplex .mp-offer-card::before {
        content: '\f3ff'; /* fa-ticket-alt */
        position: absolute;
        top: 32px;
        right: 32px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 22px;
        color: #fdc700;
    }

.tema-multiplex .mp-offer-card__value {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 72px;
    line-height: 1;
    letter-spacing: -1.8px;
    color: #ffffff !important;
    margin: 0;
    padding-right: 60px;
}

.tema-multiplex .mp-offer-card__label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px;
    letter-spacing: 3.84px;
    text-transform: uppercase;
    color: #fdc700 !important;
    margin: 8px 0 0;
}

.tema-multiplex .mp-offer-card__desc {
    margin: 24px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Línea intermedia opcional entre el label y la descripción (ej. "Entradas
   2D y 3D") — cuando está presente, se lleva ella el divisor y la
   descripción que sigue queda sin el suyo propio (evita el doble borde). */
.tema-multiplex .mp-offer-card__note {
    margin: 24px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75) !important;
}

    .tema-multiplex .mp-offer-card__note + .mp-offer-card__desc {
        margin-top: 12px;
        padding-top: 0;
        border-top: 0;
    }

/* --- Fila de complejos donde aplica la promoción (ej. "En todos los
   Multiplex"): nombre + ícono de pin vía ::before. --- */
.tema-multiplex .mp-branch-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.tema-multiplex .mp-branch-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 82px;
    background-color: #480404;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Variante con dirección (ej. "Usalo en todos los Multiplex" con la calle
   de cada complejo) — 3 columnas en vez de 5, ítem más alto con nombre +
   dirección apilados. La base (sólo nombre, 5 columnas) sigue disponible
   para promos que no necesitan mostrar la dirección. */
.tema-multiplex .mp-branch-list--detailed {
    grid-template-columns: repeat(3, 1fr);
}

/* Variante en 2 columnas de .mp-branch-list--detailed (ej. "Complejos
   adheridos" de 2×1 Bonda: sólo 4 complejos, no los 5). Clase dedicada con
   su propio breakpoint — NUNCA usar style="grid-template-columns:..."
   inline acá, porque pisa el colapso a 1 columna en mobile y desborda
   `.containerPpal` (bug real encontrado en la promo de Banco San Juan). */
.tema-multiplex .mp-branch-list--detailed-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767.98px) {
    .tema-multiplex .mp-branch-list--detailed-2 {
        grid-template-columns: 1fr;
    }
}

    .tema-multiplex .mp-branch-list--detailed .mp-branch-list__item {
        height: auto;
        align-items: flex-start;
        padding: 16px;
    }

.tema-multiplex .mp-branch-list__name {
    display: block;
    color: #ffffff !important;
    margin-bottom: 2px;
}

.tema-multiplex .mp-branch-list__address {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.45) !important;
}

    .tema-multiplex .mp-branch-list__item::before {
        content: '\f3c5';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 15px;
        color: #e50611;
        flex-shrink: 0;
    }

/* --- Fila de chips informativos sueltos, sin ícono (ej. "Todas las salas" /
   "Todas las películas" / "Todos los días" debajo de .mp-branch-list--detailed
   en "3 Cuotas sin Interés con Naranja X"). Distinta de .mp-tag-list (esa es
   pill redondeada dentro de .mp-tag-card, más chica y con acento rojo). --- */
.tema-multiplex .mp-info-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    list-style: none;
    padding: 0;
}

.tema-multiplex .mp-info-pill {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 16px;
    background-color: #480404;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* --- Tarjeta con lista de tags (ej. "Formatos incluidos"): reusa
   .mp-tag-list/.mp-tag dentro de una tarjeta con label .mp-eyebrow. --- */
.tema-multiplex .mp-tag-card {
    margin-top: 24px;
    background-color: #480404;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 21px 20px;
}

    .tema-multiplex .mp-tag-card .mp-eyebrow {
        font-size: 15px;
        letter-spacing: 2.4px;
        color: rgba(255, 255, 255, 0.45) !important;
    }

    .tema-multiplex .mp-tag-card .mp-tag-list {
        margin-bottom: 0;
    }

/* Variante de .mp-tag con la intensidad exacta del Figma de Promociones
   (más sólida que el .mp-tag de acento suelto ya usado en Salas/Complejos). */
.tema-multiplex .mp-tag--format {
    background-color: rgba(229, 6, 17, 0.4);
    border-color: rgba(229, 6, 17, 0.25);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Grilla de pasos numerados (ej. "¿Cómo usar el beneficio?": 01 Elegí tu
   complejo, 02 Elegí tu función, 03 Comprá tu entrada). Ícono vía ::before +
   clase modificadora EXPLÍCITA (mismo criterio que .mp-feature-card--2d,
   ver esa nota): la cantidad/orden de pasos varía de una promoción a otra,
   así que nunca se resuelve por nth-child acá. --- */
.tema-multiplex .mp-step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

/* Variante de 4 pasos (ej. "¿Cómo usar el 2×1?": Seguinos / Recibí tu
   código / Elegí tu función / Ingresá el código) — varias promos con canje
   de código por WhatsApp van a reusar este flujo de 4 pasos tal cual. */
.tema-multiplex .mp-step-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.tema-multiplex .mp-step-card {
    position: relative;
    background-color: #1e0101;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
}

    .tema-multiplex .mp-step-card::before {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: rgba(229, 6, 17, 0.1);
        border: 1px solid rgba(229, 6, 17, 0.35);
        border-radius: 999px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 18px;
        color: #e50611;
    }

    .tema-multiplex .mp-step-card--pin::before { content: '\f3c5'; }
    .tema-multiplex .mp-step-card--calendar::before { content: '\f073'; }
    .tema-multiplex .mp-step-card--ticket::before { content: '\f3ff'; }
    .tema-multiplex .mp-step-card--hashtag::before { content: '\f292'; }
    .tema-multiplex .mp-step-card--store::before { content: '\f54e'; }
    .tema-multiplex .mp-step-card--credit-card::before { content: '\f09d'; }
    .tema-multiplex .mp-step-card--cart::before { content: '\f07a'; }
    .tema-multiplex .mp-step-card--id::before { content: '\f2c2'; } /* fa-id-card */
    .tema-multiplex .mp-step-card--check::before { content: '\f058'; } /* fa-check-circle */
    .tema-multiplex .mp-step-card--terminal::before { content: '\f3fa'; } /* fa-tablet-alt */
    .tema-multiplex .mp-step-card--globe::before { content: '\f0ac'; } /* fa-globe */

    /* WhatsApp es un ícono de marca: familia y peso de fuente distintos
       (Font Awesome 5 Brands, weight 400) al resto (Font Awesome 5 Free,
       weight 900) — se pisan los dos junto con el content. */
    .tema-multiplex .mp-step-card--whatsapp::before {
        content: '\f232';
        font-family: 'Font Awesome 5 Brands';
        font-weight: 400;
    }

.tema-multiplex .mp-step-card__number {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 34px;
    color: rgba(255, 255, 255, 0.15) !important;
}

.tema-multiplex .mp-step-card__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 20px 0 8px;
}

.tema-multiplex .mp-step-card__desc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0;
}

/* --- Banner ancho con la oferta principal (ej. "Beneficio principal": 50%
   OFF + texto + CTA). --- */
.tema-multiplex .mp-offer-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background-color: #480404;
    border: 1px solid rgba(229, 6, 17, 0.3);
    border-radius: 16px;
    padding: 33px;
}

    /* Ícono vía ::before, sólo dentro de este componente (no ".mp-btn"
       en general, que es genérico sin flecha por defecto). */
    .tema-multiplex .mp-offer-banner .mp-btn::after {
        content: '\f061';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 15px;
    }

/* Nota lateral con borde izquierdo (ej. "No aplica para funciones que
   comiencen a las 19:00 hs o después.") — alternativa al botón CTA cuando
   el "beneficio principal" no tiene una acción secundaria sino una
   aclaración puntual. Mismo componente .mp-offer-banner, ambos son hijos
   directos intercambiables. */
.tema-multiplex .mp-offer-banner__note {
    position: relative;
    max-width: 448px;
    padding: 2px 0 2px 48px;
    border-left: 2px solid rgba(229, 6, 17, 0.6);
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0;
}

    .tema-multiplex .mp-offer-banner__note::before {
        content: '\f017'; /* fa-clock, default */
        position: absolute;
        left: 16px;
        top: 2px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 18px;
        color: #e50611;
    }

    /* Variante ⓘ (ej. "Ambas entradas deben corresponder al mismo día,
       horario y sala.") — no se pisa el ::before default para no alterar
       el look ya aprobado de la promo 2, que usa el reloj. */
    .tema-multiplex .mp-offer-banner__note--info::before {
        content: '\f05a';
    }

/* Lista de pills chicas dentro de .mp-offer-banner (ej. "2D + 3D" / "Todos
   los días" / "Multiplex San Juan"), distinta de .mp-tag-list (esa es de
   acento rojo, ésta es neutra). */
.tema-multiplex .mp-offer-banner__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.tema-multiplex .mp-offer-banner__tag {
    display: inline-block;
    padding: 11px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7) !important;
}

.tema-multiplex .mp-offer-banner__value {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 60px;
    line-height: 1;
    color: #ffffff !important;
    margin: 0;
}

.tema-multiplex .mp-offer-banner__label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px;
    letter-spacing: 3.24px;
    text-transform: uppercase;
    color: #fdc700 !important;
    margin: 8px 0 0;
}

.tema-multiplex .mp-offer-banner__desc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 8px 0 0;
}

/* --- Variante en 2 columnas de .mp-check-list (ej. "A tener en cuenta" con
   10 condiciones). La base .mp-check-list (columna única) sigue disponible
   para listas cortas. --- */
.tema-multiplex .mp-check-list--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 56px;
}

/* Variante en 3 columnas (ej. "Medios de pago excluidos": Naranja Visa,
   Naranja MasterCard, Naranja Amex, Agrupadores de pago, Billeteras
   virtuales). */
.tema-multiplex .mp-check-list--grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px 24px;
}

/* Variante "excluido" de .mp-check-list: pisa el ícono de check verde por
   una X roja (ej. medios de pago que NO participan de la promoción). */
.tema-multiplex .mp-check-list--excluded li::before {
    content: '\f057'; /* fa-times-circle */
    background-color: rgba(255, 100, 103, 0.15);
    color: #ff6467;
}

/* --- Grillas de contenido genéricas de 2/3 columnas para bloques puntuales
   que no encajan en ningún componente existente (ej. "Exclusivo Multiplex
   San Juan": tarjeta de dirección + aviso, o "Pagá con tarjeta de crédito
   Banco San Juan": 3 líneas informativas dentro de un .mp-note-card).
   Con breakpoint propio para no romper en mobile como pasó con un estilo
   inline equivalente (el grid quedaba fijo en 2/3 columnas y desbordaba
   el ancho por el min-width:auto por defecto de los items de grid). --- */
.tema-multiplex .mp-content-grid--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.tema-multiplex .mp-content-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
}

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

/* Separación respecto del acordeón de "Ver bases y condiciones completas"
   cuando sigue a .mp-check-list en el mismo bloque. */
.tema-multiplex .mp-check-list + .accordion {
    margin-top: 32px;
}

/* Ícono ⓘ a la izquierda del acordeón "Ver bases y condiciones completas" —
   variante puntual, no se agrega a .accordion-button en general para no
   afectar los acordeones ya existentes (Devoluciones, INCAA, etc.). */
.tema-multiplex .mp-accordion-item--info .accordion-button::before {
    content: '\f05a'; /* fa-info-circle */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-right: 4px;
}

/* Variante ícono de pin (ej. "Ver locales McDonald's adheridos"). Mismo
   criterio que --info: no se toca .accordion-button en general. */
.tema-multiplex .mp-accordion-item--location .accordion-button::before {
    content: '\f3c5'; /* fa-map-marker-alt */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-right: 4px;
}

/* --- Botón sólido amarillo (ej. CTA de cierre sobre fondo de cortina).
   Mismo componente .mp-btn, variante nueva. --- */
.tema-multiplex .mp-btn--accent {
    background-color: #fdc700;
    border: 1px solid #2a0101;
    color: #2a0101 !important;
}

    .tema-multiplex .mp-btn--accent:hover {
        background-color: #e6b400;
        color: #2a0101 !important;
    }

/* Variante de ícono del CTA de cierre (mismo criterio que
   .mp-hero--icon-3d/etc. ya definidos para Salas). */
.tema-multiplex .mp-hero--curtain.mp-hero--icon-ticket .mp-hero__content::before { content: '\f3ff'; }

@media (max-width: 991.98px) {
    .tema-multiplex .mp-promo-hero__grid {
        grid-template-columns: 1fr;
    }

    .tema-multiplex .mp-offer-card {
        margin-top: 0;
    }

    .tema-multiplex .mp-branch-list,
    .tema-multiplex .mp-branch-list--detailed {
        grid-template-columns: repeat(2, 1fr);
    }

    .tema-multiplex .mp-step-grid,
    .tema-multiplex .mp-step-grid--4 {
        grid-template-columns: 1fr;
    }

    .tema-multiplex .mp-check-list--grid {
        grid-template-columns: 1fr;
    }

    .tema-multiplex .mp-check-list--grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .tema-multiplex .mp-promo-hero__title {
        font-size: 36px;
    }

    .tema-multiplex .mp-check-list--grid-3 {
        grid-template-columns: 1fr;
    }

    .tema-multiplex .mp-branch-list,
    .tema-multiplex .mp-branch-list--detailed {
        grid-template-columns: 1fr;
    }

    .tema-multiplex .mp-offer-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================================
   Componentes agregados en la tanda de promos 3-4 ("2×1 WhatsApp", "Viernes
   de Cine en Multiplex Belgrano"). Reutilizables en el resto de las
   promociones — varias de las que siguen en la lista también son 2×1 con
   código por WhatsApp, así que mp-tip-card en particular se repite tal cual.
   ============================================================================ */

/* --- Botón sólido verde WhatsApp (ej. "Obtener código en WhatsApp", "Ir al
   canal de WhatsApp"). Mismo componente .mp-btn, variante nueva. El ícono
   (::after, dentro de .mp-page-hero__actions/.mp-hero__actions igual que
   las otras variantes) usa Font Awesome BRANDS, no Free. --- */
.tema-multiplex .mp-btn--whatsapp {
    background-color: #25d366;
    border: 1px solid #f91f2a;
    color: #062d16 !important;
}

    .tema-multiplex .mp-btn--whatsapp:hover {
        background-color: #1fb956;
        color: #062d16 !important;
    }

    .tema-multiplex .mp-page-hero__actions .mp-btn--whatsapp::after,
    .tema-multiplex .mp-hero__actions .mp-btn--whatsapp::after,
    .tema-multiplex .mp-offer-banner .mp-btn--whatsapp::after {
        content: '\f232';
        font-family: 'Font Awesome 5 Brands';
        font-weight: 400;
    }

/* Variante WhatsApp de .mp-offer-card (pisa el ícono ticket por defecto). */
.tema-multiplex .mp-offer-card--whatsapp::before {
    content: '\f232';
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400;
    color: #25d366;
}

/* Variante de pago en cuotas de .mp-offer-card (ej. "3 Cuotas sin Interés
   con Naranja X") — pisa el ícono ticket por defecto con una tarjeta. */
.tema-multiplex .mp-offer-card--payment::before {
    content: '\f09d'; /* fa-credit-card */
}

/* Variante sin ícono de .mp-offer-card (ej. la tarjeta de "Beneficio" de
   "3 Cuotas sin Interés con Naranja X", que no trae ícono en el Figma). */
.tema-multiplex .mp-offer-card--plain::before {
    content: none !important;
}

/* Variante WhatsApp de .mp-hero--curtain (mismo criterio que
   --icon-3d/--icon-ticket ya definidos). */
.tema-multiplex .mp-hero--curtain.mp-hero--icon-whatsapp .mp-hero__content::before {
    content: '\f232';
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400;
    color: #25d366;
}

/* --- Tarjeta de instrucción con ícono insignia (ej. "Ingresá el código
   exactamente como lo recibiste"): ícono + título en negrita + 1-2 párrafos
   de nota. Distinta de .mp-note-card (esa no tiene ícono). --- */
.tema-multiplex .mp-tip-card {
    position: relative;
    background-color: #480404;
    border: 1px solid rgba(229, 6, 17, 0.3);
    border-radius: 12px;
    padding: 28px 24px 28px 84px;
}

    .tema-multiplex .mp-tip-card::before {
        content: '\f292'; /* fa-hashtag, default */
        position: absolute;
        top: 28px;
        left: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 16px;
        color: #ffffff;
    }

    /* Variante con ícono de carrito/cupón (ej. "¿Comprás online?"). */
    .tema-multiplex .mp-tip-card--ticket::before {
        content: '\f3ff';
        font-size: 16px;
        color: #ffffff;
    }

.tema-multiplex .mp-tip-card__title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 0 0 12px;
}

.tema-multiplex .mp-tip-card p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.55) !important;
}

    .tema-multiplex .mp-tip-card p:last-child {
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.7) !important;
    }

/* --- Grilla de precios compacta (ej. "Precios de los viernes": 2D $10.000,
   2D Comfort Plus $11.000...). Distinta de .mp-price-grid/.mp-price-card
   (esas son para la pantalla Precios, con varias filas por tarjeta) — acá
   cada tarjeta es sólo formato + 1 precio grande. --- */
.tema-multiplex .mp-price-tag-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.tema-multiplex .mp-price-tag {
    background-color: #480404;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 21px;
}

.tema-multiplex .mp-price-tag__label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 0 14px;
}

.tema-multiplex .mp-price-tag__value {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 40px;
    letter-spacing: -1px;
    color: #ffffff !important;
    margin: 0;
}

/* Variante de acento de .mp-price-tag (ej. "Reintegro 50%" en el ejemplo de
   cálculo de "50% de Reintegro con Banco San Juan") — resalta una de las
   tarjetas del grid por sobre las demás. */
.tema-multiplex .mp-price-tag--accent {
    background-color: rgba(229, 6, 17, 0.1);
    border-color: rgba(229, 6, 17, 0.45);
}

/* --- Nota con ícono en tarjeta propia (ej. "No válido para Sala 4D
   E-Motion."). Distinta de .mp-callout (esa es sólo texto + borde
   izquierdo, sin fondo ni ícono, ej. el aviso de "Formatos incluidos"). --- */
.tema-multiplex .mp-inline-note {
    position: relative;
    background-color: #480404;
    border: 1px solid rgba(229, 6, 17, 0.3);
    border-radius: 12px;
    padding: 22px 24px 22px 52px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 20px 0 0;
}

    .tema-multiplex .mp-inline-note::before {
        content: '\f05a'; /* fa-info-circle */
        position: absolute;
        left: 20px;
        top: 22px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 18px;
        color: #e50611;
    }

/* ============================================================================
   Componentes agregados en la tanda de promo 7 ("Cupón 2×1 Multiplex San
   Juan") — varias promos de cupón/código que siguen en la lista van a
   reusar mp-location-card tal cual.
   ============================================================================ */

/* --- Tarjeta de dirección + tags (ej. "Av. José Ignacio de la Roza 806 —
   Rivadavia — San Juan" + "2D"/"3D"). Distinta de .mp-address-line (esa es
   sólo texto suelto con ícono, sin tarjeta ni tags). --- */
.tema-multiplex .mp-location-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
    background-color: #1e0101;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 21px 24px;
}

.tema-multiplex .mp-location-card__address {
    position: relative;
    padding-left: 32px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0;
}

    .tema-multiplex .mp-location-card__address::before {
        content: '\f3c5';
        position: absolute;
        left: 0;
        top: 2px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 18px;
        color: #e50611;
    }

.tema-multiplex .mp-location-card .mp-tag-list {
    margin: 0;
}

/* Segunda línea opcional debajo de la dirección (ej. "Espacio San Juan
   Shopping") — cuando la promo la trae, se agrega sin tocar el ícono de
   .mp-location-card__address (comparten el mismo padding-left). */
.tema-multiplex .mp-location-card__venue {
    margin: 4px 0 0 32px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Variante en 3 columnas de .mp-price-tag-grid (ej. "Ejemplo del
   reintegro": Compra / Reintegro 50% / Tope mensual) — la base sigue en 4
   para las promos de precios por formato. Clase dedicada (no estilo
   inline) para no pisar los breakpoints responsive de abajo. */
.tema-multiplex .mp-price-tag-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991.98px) {
    .tema-multiplex .mp-price-tag-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tema-multiplex .mp-price-tag-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .tema-multiplex .mp-tip-card {
        padding: 24px 20px 24px 20px;
    }

    .tema-multiplex .mp-tip-card::before {
        position: static;
        margin-bottom: 16px;
    }

    .tema-multiplex .mp-price-tag-grid,
    .tema-multiplex .mp-price-tag-grid--3 {
        grid-template-columns: 1fr;
    }

    .tema-multiplex .mp-location-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Logo de marca partner dentro de .mp-offer-card (ej. AXION Energy en la
   promo "2×1 AXION") — opcional, sólo se agrega cuando la promo es
   co-branded con un anunciante externo. */
.tema-multiplex .mp-offer-card__logo {
    display: block;
    max-width: 160px;
    height: auto;
    margin: 20px auto 0;
}

/* --- Listado de locales agrupados por ciudad, en 2 columnas (ej. "Ver
   locales McDonald's adheridos": CABA/EZEIZA/PILAR/SAN JUAN). Reutilizable
   para cualquier otra promo con puntos de canje físicos. --- */
.tema-multiplex .mp-store-locations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
}

.tema-multiplex .mp-store-locations__city {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 24px 0 4px;
}

    .tema-multiplex .mp-store-locations__city:first-child {
        margin-top: 0;
    }

.tema-multiplex .mp-store-locations__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .tema-multiplex .mp-store-locations__list li {
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-family: 'Montserrat', sans-serif !important;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.6) !important;
    }

@media (max-width: 767.98px) {
    .tema-multiplex .mp-store-locations {
        grid-template-columns: 1fr;
    }

    .tema-multiplex .mp-store-locations__city:nth-child(n) {
        margin-top: 24px;
    }
}

/* ============================================================================
   Listado de Promociones (página "Promociones") — Figma: 6 frames distintos
   (Todas + uno por complejo), implementados acá como UNA sola página: las
   22 tarjetas se generan una única vez en el markup y el selector de
   complejo (reusa .mp-tabs/.mp-select ya existentes de Precios, agregando
   la pestaña "Todas" + el contador .mp-tabs__count) filtra cuáles se
   muestran vía body.js (data-complejos por tarjeta, ver ese archivo).
   Figma: https://www.figma.com/design/xAiOzEy75DDifhQ73Hv0xg/Multiplex-WEB?node-id=687-20992
   ============================================================================ */

/* Contador dentro de .mp-tabs__item (ej. "Lavalle 16") — la pestaña "Todas"
   no lo lleva. Colores fijos (no heredan is-active) porque en el Figma el
   contador mantiene el mismo tratamiento tanto en el tab activo como en
   los inactivos. */
.tema-multiplex .mp-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 27px;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.15);
    font-size: 13px;
    font-weight: 600;
    color: #ffffff !important;
}

.tema-multiplex .mp-promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tema-multiplex .mp-promo-grid[hidden] {
    display: none;
}

.tema-multiplex .mp-promo-card {
    display: flex;
    flex-direction: column;
    background-color: #280101;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
}

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

.tema-multiplex .mp-promo-card__media {
    position: relative;
    height: 144px;
    overflow: hidden;
    background-color: #1a0000;
}

    .tema-multiplex .mp-promo-card__media img {
        position: absolute;
        top: 0;
        left: 50%;
        height: 100%;
        width: auto;
        max-width: none;
        transform: translateX(-50%);
    }

    /* Las 7 promos con pieza gráfica propia (no marca partner) usan cada
       una el fondo exacto de su "div.w-full" en Figma (color sólido o
       degradé propio de esa promo — ver comentario inline en cada
       <a class="mp-promo-card__media"> de promociones.html) en vez del
       #1a0000 genérico de arriba: la imagen (cuadrada, mismo asset que la
       página de detalle) queda centrada por la regla `img` de arriba, y al
       ser más angosta que la tarjeta, ese fondo se ve en los márgenes
       laterales — necesita matchear el color real, no quedar genérico. */

    /* Fondo blanco para tarjetas de marcas partner (mismo criterio que
       .mp-offer-card__logo en las páginas de detalle): el logo ya trae su
       propio color, no necesita degradado de fondo. */
    .tema-multiplex .mp-promo-card__media--brand {
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* object-fit:contain (no height:auto): un logo alto (ej. Maslow,
           triángulo+base) con width:60%/height:auto podía superar los 144px
           de alto de .mp-promo-card__media y quedar recortado por su
           overflow:hidden — bug real encontrado en QA, no específico de
           esa promo. contain con width Y height fijos garantiza que el
           logo entero siempre entre, sea cual sea su proporción. */
        .tema-multiplex .mp-promo-card__media--brand img {
            position: static;
            top: auto;
            left: auto;
            transform: none;
            /*width: 65%;
            height: 65%;*/
            max-width: 220px;
            object-fit: contain;
        }

.tema-multiplex .mp-promo-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px;
}

.tema-multiplex .mp-promo-card__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1.25;
    color: #ffffff !important;
    margin: 0 0 12px;
}
    .tema-multiplex .mp-promo-card__title a {
        text-decoration: none;
        color: #fff !important;
    }

.tema-multiplex .promociones .mp-tabs__item {
    text-transform: none;
    border-radius: 25px;
}

.tema-multiplex .mp-promo-card__tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    background-color: rgba(253, 199, 0, 0.15);
    border: 1px solid #fdc700;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    font-weight: 600;
    color: #fdc700 !important;
    margin: 0 0 16px;
}

    .tema-multiplex .mp-promo-card__tag::before {
        content: '\f02b'; /* fa-tag */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 14px;
    }

.tema-multiplex .mp-promo-card__desc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0;
}

.tema-multiplex .mp-promo-card__salas {
    font-family: 'Montserrat', sans-serif !important;
    font-style: italic;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.35) !important;
    margin: 12px 0 0;
}

.tema-multiplex .mp-promo-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 20px 10px 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tema-multiplex .mp-promo-card__complejo {
    position: relative;
    padding-left: 22px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.35) !important;
}

    .tema-multiplex .mp-promo-card__complejo::before {
        content: '\f3c5'; /* fa-map-marker-alt */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 1px;
        color: #e50611 !important;
        font-size: 14px;
    }

.tema-multiplex .mp-promo-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background-color: #cc0000;
    border: 1px solid #fa0000;
    border-radius: 6px;
    padding: 7px 16px;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

    .tema-multiplex .mp-promo-card__cta:hover {
        background-color: #e50611;
        color: #ffffff !important;
    }

    .tema-multiplex .mp-promo-card__cta::after {
        content: '\f35d'; /* fa-external-link-alt — confirmado contra el SVG real de Figma (ícono de "abrir en otra página", no una flecha simple) */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 13px;
    }

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

@media (max-width: 767.98px) {
    .tema-multiplex .mp-promo-grid {
        grid-template-columns: 1fr;
    }
}