/* =========================================================
   Pillalas.com - CSS principal nueva web
   ========================================================= */

/* Índice: 01 Generales · 02 Cartelera · 03 Películas · 04 Cines ·
   05 Compra · 06 Información.
   Cada componente incluye sus consultas de medios en orden de cascada;
   los ajustes de pantalla posteriores a los táctiles deben conservar ese orden. */

/* =========================================================
   01. Estilos generales
   ========================================================= */

/* =========================================================
   01.1. Variables, base global y banners
   ========================================================= */

:root {
    /* Marca y superficies */
    --pillalas-primary: #e21b5f;
    --pillalas-primary-dark: #d81b60;
    --pillalas-dark: #53234f;
    --pillalas-soft: #fff1f6;
    --pillalas-page-bg: #f7f2f6;
    --pillalas-white: #fff;

    /* Texto y avisos */
    --pillalas-text-muted: #7b6074;
    --pillalas-text-soft: #9b7b94;
    --pillalas-text-body: #6f5a6a;
    --pillalas-text-detail: #5f4a59;
    --pillalas-text-notice: #6b5565;
    --pillalas-link: #0d6efd;
    --pillalas-warning: #f59e0b;

    /* Bordes y tonos translúcidos */
    --pillalas-border: rgba(83, 35, 79, .1);
    --pillalas-border-strong: rgba(83, 35, 79, .16);
    --pillalas-border-subtle: rgba(83, 35, 79, .08);
    --pillalas-border-medium: rgba(83, 35, 79, .12);
    --pillalas-border-emphasis: rgba(83, 35, 79, .14);
    --pillalas-border-control: rgba(83, 35, 79, .18);
    --pillalas-border-input: rgba(83, 35, 79, .24);
    --pillalas-primary-subtle: rgba(226, 27, 95, .10);
    --pillalas-primary-tint: rgba(226, 27, 95, .12);
    --pillalas-primary-translucent-strong: rgba(226, 27, 95, .14);
    --pillalas-dark-translucent-strong: rgba(83, 35, 79, .25);

    /* Sombras y foco */
    --pillalas-shadow-sm: 0 8px 22px rgba(83, 35, 79, .06);
    --pillalas-shadow-md: 0 14px 34px rgba(83, 35, 79, .07);
    --pillalas-shadow-lg: 0 18px 45px rgba(83, 35, 79, .18);
    --pillalas-shadow-poster: 0 12px 26px rgba(83, 35, 79, .12);
    --pillalas-shadow-poster-mobile: 0 10px 22px rgba(83, 35, 79, .14);
    --pillalas-shadow-active: 0 6px 14px rgba(226, 27, 95, .18);
    --pillalas-shadow-raised: 0 10px 24px rgba(83, 35, 79, .10);
    --pillalas-shadow-hero: 0 16px 38px rgba(83, 35, 79, .07);
    --pillalas-focus-ring: 0 0 0 .2rem rgba(226, 27, 95, .12);

    /* Tarjetas en móvil */
    --pillalas-content-padding-mobile: .9rem;

    /* Proceso de compra */
    --purchase-text: #4d1258;
    --purchase-text-muted: #7a5a80;
    --purchase-text-body: #6b4b70;
    --purchase-border: rgba(84, 28, 89, 0.18);
    --purchase-border-subtle: rgba(84, 28, 89, 0.14);
    --purchase-border-control: rgba(84, 28, 89, 0.22);
    --purchase-control-bg: #c9c2c8;
    --purchase-accent: #f43877;
    --purchase-accent-soft: rgba(244, 56, 119, 0.12);
    --purchase-guarantee-accent: #ffbdd4;

    /* Resumen de compra */
    --purchase-summary-text: #0f172a;
    --purchase-summary-text-muted: #475569;
    --purchase-summary-accent: #f15077;
    --purchase-summary-border: rgba(15, 23, 42, 0.08);
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pillalas-page-bg);
    overflow-x: hidden;
}

main {
    flex: 1 0 auto;
}

.container {
    max-width: 1100px;
}

.site-banner-slot {
    margin: 0 0 1.5rem;
}

.site-banner-rotator {
    overflow: hidden;
    border-radius: 18px;
    background: var(--pillalas-white);
    box-shadow: var(--pillalas-shadow-md);
}

.site-banner-slide {
    display: block;
}

.site-banner-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.site-lateral-layer {
    display: none;
}

@media (min-width: 1510px) {
    .site-banner-slot--lateral-fallback {
        display: none;
    }

    .site-lateral-layer {
        position: relative;
        z-index: 1;
        display: block;
        height: 0;
        pointer-events: none;
    }

    .site-lateral-layer + main {
        min-height: 700px;
    }

    .site-lateral-frame {
        position: absolute;
        top: 0;
        left: 50%;
        width: 1490px;
        height: 700px;
        transform: translateX(-50%);
    }

    .site-lateral-side {
        position: absolute;
        top: 0;
        width: 180px;
        height: 700px;
        background-image: var(--site-banner-lateral-image);
        background-repeat: no-repeat;
        background-size: 180px 700px;
    }

    .site-lateral-side--left {
        left: 0;
        border-radius: 16px;
    }

    .site-lateral-side--right {
        right: 0;
        border-radius: 16px;
    }

    a.site-lateral-side {
        pointer-events: auto;
    }

    a.site-lateral-side:focus-visible {
        z-index: 1;
        outline: 3px solid var(--pillalas-primary);
        outline-offset: 3px;
    }
}

@media (max-width: 575.98px) {
    .site-banner-slot {
        margin-bottom: 1.5rem;
    }

    .site-banner-rotator {
        border-radius: 12px;
    }
}

/* =========================================================
   01.2. Botones y utilidades
   ========================================================= */

.btn-pillalas {
    border: 0;
    border-radius: 16px;
    padding: .65rem 1.25rem;
    background: var(--pillalas-primary);
    font-weight: 800;
}

.btn-pillalas:hover {
    background: var(--pillalas-primary-dark);
}

.btn-pillalas-outline {
    border: 1px solid var(--pillalas-primary);
    background: var(--pillalas-white);
    color: var(--pillalas-primary);
}

.btn-pillalas-outline:hover,
.btn-pillalas-outline:focus-visible {
    border-color: var(--pillalas-primary);
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
}

.is-hidden {
    display: none !important;
}

@media (hover: none) and (pointer: coarse) {
    a,
    button,
    [role="button"],
    .btn,
    .dropdown-item,
    .mobile-menu-item,
    .mobile-submenu-link {
        touch-action: manipulation;
        -webkit-tap-highlight-color: var(--pillalas-primary-translucent-strong);
    }

    .site-header .dropdown-item:hover,
    .buscador-header-item:hover,
    .header-pill:hover,
    .mobile-menu-item:hover,
    .mobile-submenu-link:hover {
        transform: none;
    }

    .site-header .dropdown-item,
    .buscador-header-item {
        min-height: 44px;
        align-items: center;
        display: flex;
    }
}

@media (max-width: 767.98px) {
    .buscador-header-panel {
        width: calc(100vw - 2rem);
    }
}

/* =========================================================
   01.3. Cabeceras y tarjetas comunes
   ========================================================= */

.movie-grid-card,
.movie-list-card,
.cine-movie-card,
.cine-empty,
.contact-result-card {
    border: 1px solid var(--pillalas-border);
    background: var(--pillalas-white);
    box-shadow: var(--pillalas-shadow-md);
}

.pillalas-hero {
    display: grid;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--pillalas-border);
    border-radius: 28px;
    background: var(--pillalas-white);
    box-shadow: var(--pillalas-shadow-hero);
}

.pillalas-hero-content {
    min-width: 0;
}

.pillalas-hero-visual {
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: stretch;
    padding: 1.50rem;
    border-radius: 26px;
}

.pillalas-kicker,
.cine-hero-kicker,
.screening-summary-kicker,
.manual-guide-nav-kicker {
    margin-bottom: .5rem;
    font-size: .78rem;
    letter-spacing: .08em;
}

.pillalas-kicker {
    display: inline-block;
    color: var(--pillalas-primary);
    font-weight: 900;
    text-transform: uppercase;
}

.pillalas-title {
    color: var(--pillalas-dark);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.05;
}

.pillalas-hero-visual .pillalas-title {
    margin-bottom: .65rem;
    font-size: 1.8rem;
    letter-spacing: -.035em;
}

.pillalas-subtitle {
    margin: 0;
    color: var(--pillalas-text-muted);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.55;
}

.pillalas-hero-media,
.pillalas-hero-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pillalas-hero-icon-wrap i {
    color: var(--pillalas-primary);
    font-size: 5.5rem;
    line-height: 1;
    opacity: .7;
}

.pillalas-content-card {
    padding: 1.5rem;
    border: 1px solid var(--pillalas-border);
    border-radius: 26px;
    background: var(--pillalas-white);
    box-shadow: 0 14px 34px rgba(83, 35, 79, .06);
}

@media (max-width: 767.98px) {
    .pillalas-hero-media {
        display: none;
    }

    .pillalas-hero-visual {
        grid-template-columns: 1fr;
        padding: .9rem;
    }

    .pillalas-hero-visual .pillalas-title {
        font-size: 1.6rem;
    }

    .pillalas-hero {
        padding: 0.90rem;
        border-radius: 22px;
        grid-template-columns: 1fr;
    }

    .pillalas-content-card {
        padding: var(--pillalas-content-padding-mobile);
        border-radius: 22px;
    }

    .pillalas-title {
        font-size: 1.45rem;
    }
}

/* =========================================================
   01.4. Tablas de contenido enriquecido
   ========================================================= */

/* Las variantes de tabla pueden venir del contenido enriquecido de la base de datos. */

figure.table {
    overflow-x: auto;
}

figure.table.is-bootstrap table {
    width: 100%;
    border-collapse: collapse;
}

figure.table.is-bootstrap th,
figure.table.is-bootstrap td {
    border: 1px solid var(--pillalas-dark-translucent-strong);
    padding: .75rem 1rem;
    vertical-align: top;
}

figure.table.is-bootstrap th {
    background: var(--pillalas-soft);
    font-weight: 800;
}

figure.table.is-clean table {
    border-collapse: separate;
    border-spacing: 0;
}

figure.table.is-clean th,
figure.table.is-clean td {
    border: 0;
    padding: .35rem 0;
}

/* =========================================================
   01.5. Modales y selección de ciudad
   ========================================================= */

.modal-pillalas .modal-dialog {
    max-width: 520px;
}

.modal-pillalas-content {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 70px var(--pillalas-dark-translucent-strong);
}

.modal-pillalas-header {
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid var(--pillalas-border-subtle);
    background: radial-gradient(circle at top right, var(--pillalas-primary-subtle), transparent 40%), var(--pillalas-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-pillalas-header .modal-title {
    color: var(--pillalas-dark);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -.01em;
}

.modal-close-pillalas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    color: var(--pillalas-primary);
    font-size: 1.15rem;
    box-shadow: 0 10px 28px var(--pillalas-border-control);
    transition: transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
    cursor: pointer;
}

.modal-close-pillalas:hover {
    transform: translateY(-2px) scale(1.04);
    background: var(--pillalas-white);
    box-shadow: 0 14px 34px var(--pillalas-border-input);
}

.modal-close-pillalas i {
    pointer-events: none;
}

.modal-pillalas-body {
    padding: 1.6rem;
    color: var(--pillalas-dark);
    font-size: 1rem;
    line-height: 1.6;
}

.pricing-credential-modal .modal-dialog {
    margin-top: 3.4rem;
}

.pricing-credential-modal .modal-content {
    position: relative;
    overflow: visible;
}

.pricing-credential-modal .modal-close-pillalas {
    position: absolute;
    top: calc(-2.9rem - 4px);
    right: 0;
    z-index: 1;
}

.pricing-credential-modal .modal-pillalas-body {
    border-radius: 22px;
}

.pricing-credential-modal-title {
    margin: 0 0 .75rem;
    color: var(--pillalas-dark);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
}

#condiciones .modal-body,
#tratamiento .modal-body {
    color: var(--pillalas-dark);
    font-size: 1rem;
}

.error-notice-modal .modal-pillalas-body {
    text-align: center;
}

.error-notice-error-title {
    margin: 0 0 1rem;
    color: var(--pillalas-dark);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.error-notice-error-icon {
    margin: 0 auto 1rem;
    color: var(--pillalas-warning);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.error-notice-modal [data-error-notice-headline-wrap] {
    margin-bottom: .75rem !important;
}

.error-notice-modal [data-error-notice-detail] {
    margin-bottom: 1.5rem !important;
    font-size: 1rem;
    line-height: 1.6;
}

.error-notice-modal [data-error-notice-detail] a,
.error-notice-modal [data-error-notice-detail] a:visited {
    color: var(--pillalas-primary);
    text-decoration: none;
}

.error-notice-modal [data-error-notice-detail] a:hover,
.error-notice-modal [data-error-notice-detail] a:focus-visible {
    color: var(--pillalas-primary-dark);
    text-decoration: underline;
}

.error-notice-modal .seatmap-buy-button,
.error-notice-modal .seatmap-buy-button:hover:not(:disabled) {
    box-shadow: none;
}

.error-notice-modal--error [data-error-notice-headline-wrap] {
    display: none !important;
}

.error-notice-modal--error .modal-pillalas-header {
    display: none;
}

.error-notice-modal--error .modal-pillalas-body {
    padding-top: 2rem;
    padding-bottom: 1.75rem;
}

.error-notice-modal--error [data-error-notice-detail] {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.55;
    color: #4d3747 !important;
    margin-bottom: 1.75rem !important;
}

.error-notice-modal--icon-top .modal-pillalas-header {
    display: none;
}

.error-notice-modal--icon-top .modal-pillalas-body {
    padding-top: 2rem;
    padding-bottom: 1.75rem;
    text-align: center;
}

.error-notice-modal--icon-top [data-error-notice-icon] {
    display: flex !important;
    margin: 0 auto .9rem;
    color: var(--pillalas-warning);
    font-size: 4rem;
}

.error-notice-modal--success [data-error-notice-icon] {
    color: var(--pillalas-primary);
}

.error-notice-modal--closable .modal-dialog {
    margin-top: 3.4rem;
}

.error-notice-modal--closable .modal-content {
    position: relative;
    overflow: visible;
}

.error-notice-modal--closable .modal-close-pillalas {
    position: absolute;
    top: calc(-2.9rem - 4px);
    right: 0;
}

.error-notice-modal--icon-top [data-error-notice-body-title]:not(.d-none) {
    display: block !important;
    margin: 0 0 .75rem;
    color: var(--pillalas-dark);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
}

.error-notice-modal--icon-top [data-error-notice-detail] {
    margin-bottom: 1.75rem !important;
    color: var(--pillalas-text-notice) !important;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.remote-sale-unavailable-modal .modal-pillalas-body {
    padding-top: 2rem;
    padding-bottom: 1.75rem;
    text-align: center;
}

.remote-sale-unavailable-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--pillalas-warning);
    font-size: 4rem;
}

.remote-sale-unavailable-title {
    margin: 0 0 .55rem;
    color: var(--pillalas-dark);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
}

.remote-sale-unavailable-copy {
    color: var(--pillalas-text-notice);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.remote-sale-unavailable-modal .seatmap-buy-button,
.remote-sale-unavailable-modal .seatmap-buy-button:hover:not(:disabled) {
    box-shadow: none;
}

/* Bootstrap crea este elemento al abrir un modal. */

.modal-backdrop.show {
    background-color: rgba(43, 15, 42, .65);
}

.modal.fade .modal-dialog {
    transform: translateY(20px) scale(.98);
    transition: transform .25s ease;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

#modalCiudad .modal-content {
    border: 0;
    border-radius: 24px;
    overflow: visible;
    box-shadow: 0 24px 70px var(--pillalas-dark-translucent-strong);
}

#modalCiudad .modal-dialog {
    margin-top: 3.4rem;
}

.city-modal-content {
    position: relative;
}

.city-modal-close {
    position: absolute;
    top: -48px;
    right: 0;
    z-index: 2;
}

.city-modal-title {
    margin: 0 0 .65rem;
    color: var(--pillalas-dark);
    font-size: 1.2rem;
    font-weight: 900;
}

.city-modal-body {
    padding-top: 1.6rem;
}

@media (max-width: 575.98px) {
    #modalCiudad .modal-dialog {
        margin-top: .5rem;
    }

    .modal-pillalas-body {
        padding: 1.1rem;
    }

    .city-modal-body {
        padding-top: 1.1rem;
    }

    #modalCiudad .city-modal-close {
        top: 1rem;
        right: 1rem;
    }

    .city-modal-title {
        min-height: 42px;
        display: flex;
        align-items: center;
        padding-right: 3.25rem;
    }
}

.city-modal-copy {
    margin: 0 0 1rem;
    color: var(--pillalas-text-muted);
    font-size: .95rem;
    font-weight: 500;
}

.city-list-new {
    display: grid;
    gap: .85rem;
}

.city-card {
    display: block;
    padding: 0.8rem;
    border: 2px solid var(--pillalas-border);
    border-radius: 18px;
    color: var(--pillalas-dark);
    text-decoration: none;
    background: var(--pillalas-white);
    box-shadow: var(--pillalas-shadow-sm);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.city-card:hover {
    border-color: var(--pillalas-primary);
    background: var(--pillalas-soft);
    color: var(--pillalas-dark);
    transform: translateY(-1px);
}

.city-card.active {
    border-color: var(--pillalas-primary);
    background: var(--pillalas-soft);
}

.city-card.active .city-name {
    color: var(--pillalas-primary);
}

.city-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .40rem;
}

.city-card-main i {
    color: var(--pillalas-primary);
}

.city-name {
    color: var(--pillalas-dark);
    font-size: 1.15rem;
    font-weight: 800;
}

.city-current {
    display: inline-block;
    margin-left: .5rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    vertical-align: 3px;
}

.city-cinemas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.city-cinemas span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: transparent;
    color: var(--pillalas-dark);
    font-size: .85rem;
    font-weight: 700;
}

.city-cinemas img {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
}

@media (hover: none) and (pointer: coarse) {
    .city-card {
        touch-action: manipulation;
        -webkit-tap-highlight-color: var(--pillalas-primary-translucent-strong);
    }

    .city-card:hover {
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .modal-close-pillalas {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    .city-modal-close {
        top: -44px;
    }
}

@media (max-width: 575.98px) {
    .remote-sale-unavailable-title {
        font-size: 1.18rem;
    }
}

/* =========================================================
   01.6. Estados de carga y error compartidos
   ========================================================= */

.movie-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 340px;
    padding: 1.5rem 0;
    text-align: center;
}

.movie-modal-loading-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid var(--pillalas-border);
    border-top-color: var(--pillalas-primary);
    border-radius: 50%;
    animation: pillalas-modal-spin .8s linear infinite;
}

.movie-modal-loading strong {
    color: var(--pillalas-dark);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.2;
}

.movie-modal-loading p {
    margin: 0;
    color: var(--pillalas-text-muted);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.45;
}

.movie-modal-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 260px;
    padding: 2rem 1.5rem;
    text-align: center;
}

.movie-modal-error i {
    color: var(--pillalas-primary);
    font-size: 2rem;
}

.movie-modal-error p {
    margin: 0;
    color: var(--pillalas-dark);
    font-weight: 700;
}

@keyframes pillalas-modal-spin {
    to {
        transform: rotate(360deg);
    }
}

.seatmap-loading-state {
    min-height: 260px;
}

@media (max-width: 991.98px) {
    .movie-modal-loading {
        min-height: 250px;
        padding: .75rem 0;
    }

    .movie-modal-loading-spinner {
        width: 46px;
        height: 46px;
    }
}

/* =========================================================
   02. Cartelera
   ========================================================= */

/* =========================================================
   02.1. Filtros y selector de vista
   ========================================================= */

.index-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.50rem;
    border: 1px solid var(--pillalas-border-medium);
    border-radius: 20px;
    background: var(--pillalas-white);
    box-shadow: 0 12px 32px rgba(83, 35, 79, .06);
}

.index-toolbar-left,
.filter-group,
.index-toolbar-view {
    display: flex;
    align-items: center;
}

.index-toolbar-left {
    gap: 1.5rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.filter-group {
    gap: .75rem;
}

.filter-select {
    display: none;
    width: auto;
    min-width: 165px;
    height: 35px;
    padding: 0 2.4rem 0 1rem;
    border: 1px solid var(--pillalas-border-strong);
    border-radius: 16px;
    background-color: var(--pillalas-white);
    color: var(--pillalas-dark);
    font-size: .92rem;
    font-weight: 800;
    box-shadow: none;
}

.filter-select:focus {
    border-color: var(--pillalas-primary);
    box-shadow: var(--pillalas-focus-ring);
}

.filter-pill-group {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: 16px;
    background: var(--pillalas-white);
}

.filter-pill-btn {
    min-width: 0;
    padding: .7rem .8rem;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--pillalas-dark);
    font-size: .95rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.filter-pill-btn.active {
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
    box-shadow: var(--pillalas-shadow-active);
}

.index-toolbar-view {
    gap: .75rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.view-pill-group {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--pillalas-white);
}

.view-pill-btn {
    width: 40px;
    height: 36px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--pillalas-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.view-pill-btn.active {
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
    box-shadow: var(--pillalas-shadow-active);
}

html.index-view-grid .js-view-list,
html.index-view-list .js-view-grid {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .filter-pill-btn:hover {
        background: var(--pillalas-primary);
        color: var(--pillalas-white);
        box-shadow: var(--pillalas-shadow-active);
    }

    .view-pill-btn:hover {
        background: var(--pillalas-primary);
        color: var(--pillalas-white);
        box-shadow: var(--pillalas-shadow-active);
    }
}

@media (max-width: 767.98px) {
    .site-header {
        margin-bottom: .75rem;
    }

    .site-banner-slot {
        margin-bottom: .75rem;
    }

    .pillalas-hero {
        margin-bottom: .75rem;
    }

    .index-toolbar {
        margin-bottom: .75rem;
    }

    .index-page .movies-list {
        gap: .75rem;
    }

    .index-toolbar {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: .9rem;
    }

    .index-toolbar-left {
        flex: 1 1 0;
        min-width: 0;
        gap: 1rem;
    }

    .filter-group {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    .view-pill-group {
        padding: .35rem;
    }

    .view-pill-btn {
        width: 36px;
        height: 34px;
        border-radius: 14px;
        font-size: .95rem;
    }

    .index-toolbar-view {
        justify-content: flex-end;
    }
}

@media (max-width: 575.98px) {
    .filter-pill-group {
        display: none;
    }

    .filter-select {
        display: block;
        min-width: 0;
        width: 100%;
        padding: 0 1.75rem 0 .75rem;
        font-size: .84rem;
    }
}

/* =========================================================
   02.2. Tarjetas y listas de películas
   ========================================================= */

.movies-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.5rem;
}

.movies-list {
    display: grid;
    gap: 1.5rem;
}

.movie-grid-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border-radius: 24px;
}

.movie-grid-poster,
.movie-list-poster,
.cine-movie-poster {
    display: block;
    overflow: hidden;
    background: var(--pillalas-soft);
}

.movie-grid-poster {
    border-radius: 18px;
    box-shadow: var(--pillalas-shadow-poster);
    transition: transform .18s ease, box-shadow .18s ease;
}

.movie-grid-poster:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px var(--pillalas-border-control);
}

.movie-grid-poster img,
.movie-list-poster img,
.cine-movie-poster img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.movie-grid-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1rem .15rem .0rem;
}

.movie-grid-title,
.movie-list-title {
    color: var(--pillalas-dark);
    font-weight: 900;
    letter-spacing: -.02em;
}

.movie-grid-title {
    margin: 0 0 .55rem;
    font-size: 1.00rem;
    line-height: 1.18;
}

.movie-grid-title a,
.movie-list-title a {
    color: inherit;
    text-decoration: none;
}

.movie-grid-title a:hover,
.movie-list-title a:hover {
    color: var(--pillalas-primary);
}

.movie-grid-director {
    margin: 0;
    color: var(--pillalas-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

.movie-grid-director span {
    display: block;
    color: var(--pillalas-text-muted);
    font-weight: 900;
    margin-bottom: .15rem;
    font-size: .86rem;
    text-transform: none;
    letter-spacing: 0;
}

.movie-grid-director strong,
.movie-list-director strong,
.cine-movie-director strong {
    color: var(--pillalas-dark);
    font-weight: 800;
}

.movie-list-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 22px;
}

.movie-list-poster {
    border-radius: 16px;
}

.movie-list-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: .25rem 0;
}

.movie-list-title {
    margin: 0 0 .35rem;
    font-size: 1.45rem;
}

.movie-list-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .65rem;
    margin: 0 0 .35rem;
}

.movie-list-title-row .movie-list-title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
}

.movie-list-title-row .movie-release-badge {
    flex: 0 0 auto;
}

.movie-list-director {
    margin: 0 0 .75rem;
    color: var(--pillalas-text-muted);
    font-size: .95rem;
    font-weight: 500;
}

.movie-director-label-mobile {
    display: none;
}

.movie-release-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 0;
    padding: .32rem .55rem;
    border: 1px solid rgba(226, 27, 95, .28);
    border-radius: 6px;
    background: var(--pillalas-soft);
    color: var(--pillalas-primary-dark);
    font-size: .8rem;
    white-space: normal;
    text-align: center;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.movie-release-row {
    margin: .45rem 0 0;
}

.index-page .movie-grid-info .movie-release-row--below-info {
    margin-top: auto;
    padding-top: .85rem;
}

.index-page .movie-grid-info .movie-release-row--below-info .movie-release-badge {
    width: 100%;
}

.index-page .movie-list-main {
    position: relative;
    min-height: 4.7rem;
}

.movie-list-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.index-page .movie-grid-mobile-meta {
    display: none;
}

@media (max-width: 991.98px) {
    .movies-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .index-page .movies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
        row-gap: .75rem;
    }

    .index-page .movie-grid-card {
        display: flex;
        flex-direction: column;
        padding: .85rem;
        border-radius: 20px;
    }

    .index-page .movie-grid-poster {
        display: block;
        max-width: none;
        border-radius: 18px;
        box-shadow: var(--pillalas-shadow-poster);
    }

    .index-page .movie-grid-info {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .index-page .movie-grid-title,
    .index-page .movie-grid-director,
    .index-page .movie-grid-mobile-meta {
        grid-column: auto;
    }

    .index-page .movie-grid-title {
        margin: 0 0 .35rem;
        font-size: 1.02rem;
        line-height: 1.12;
    }

    .index-page .movie-grid-info .movie-release-row--below-info {
        padding-top: .65rem;
    }

    .index-page .movie-release-badge {
        min-height: 0;
        padding: .3rem .5rem;
        border-radius: 6px;
        font-size: .65rem;
        line-height: 1.1;
    }

    .index-page .movie-grid-director {
        margin: .25rem 0 0;
        font-size: .95rem;
        font-weight: 500;
    }

    .index-page .movie-grid-director span {
        display: block;
        margin-bottom: .1rem;
        font-size: .82rem;
    }

    .index-page .movie-grid-mobile-meta {
        display: none;
    }

    .index-page .movie-grid-mobile-meta .movie-meta-separator {
        color: #b39aac;
        font-weight: 700;
        opacity: .35;
    }

    .index-page .movie-list-card {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 0.5rem 1rem;
        padding: .9rem;
    }

    .index-page .movie-list-poster {
        align-self: start;
        border-radius: 18px;
        box-shadow: var(--pillalas-shadow-poster);
    }

    .index-page .movie-list-content {
        padding: 0;
    }

    .index-page .movie-list-main {
        min-height: 3.95rem;
    }

    .index-page .movie-list-title {
        margin-bottom: 0;
        font-size: 1.05rem;
        line-height: 1.15;
    }

    .index-page .movie-list-director {
        margin: .35rem 0 0;
        font-size: .92rem;
    }

    .index-page .movie-detail-meta {
        margin-top: .65rem;
        gap: .75rem;
        font-size: .95rem;
    }

    .index-page .movie-director-label-desktop {
        display: none;
    }

    .index-page .movie-director-label-mobile {
        display: inline;
    }

    .index-page .movie-list-actions {
        margin-top: 1rem;
    }

    .index-page .movie-list-actions .btn-pillalas {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: .5rem .9rem;
        border-radius: 14px;
        font-size: .82rem;
    }

    .index-page .cine-movie-info-link-mobile {
        display: inline-flex;
        min-height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: .9rem;
        white-space: nowrap;
        font-weight: 400;
        color: var(--pillalas-dark);
        text-decoration: underline;
    }

    .movies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.25rem;
        row-gap: 1.5rem;
    }

    .movie-list-card {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 1rem;
    }

    .movie-list-title {
        font-size: 1.15rem;
    }

    .movie-list-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: .65rem;
    }

    .movie-grid-card {
        padding: .75rem;
    }
}

/* =========================================================
   03. Películas
   ========================================================= */

/* =========================================================
   03.1. Modal de película y datos compartidos
   ========================================================= */

.movie-modal-body {
    padding: 1.5rem;
}

.movie-modal-layout-3col {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 220px;
    gap: 1.75rem;
    align-items: start;
}

.movie-modal-poster img {
    width: 100%;
    display: block;
    border-radius: 16px;
    box-shadow: var(--pillalas-shadow-poster);
}

.movie-modal-main h2,
.movie-detail-overview-heading h1 {
    margin: 0 0 .35rem;
    color: var(--pillalas-dark);
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.12;
}

.movie-modal-director,
.movie-detail-overview-director {
    color: var(--pillalas-text-muted);
    font-weight: 500;
}

.movie-modal-director {
    margin: 0 0 1.25rem;
}

.movie-detail-overview-director {
    margin: 0;
}

.movie-modal-director strong,
.movie-detail-overview-director strong {
    color: var(--pillalas-dark);
    font-weight: 800;
}

.movie-modal-section + .movie-modal-section,
.movie-detail-overview-section + .movie-detail-overview-section {
    margin-top: 1.5rem;
}

.movie-modal-text,
.movie-detail-overview-text {
    color: var(--pillalas-text-body);
    font-size: 1rem;
    line-height: 1.7;
}

.movie-modal-text p:last-child,
.movie-detail-overview-text p:last-child {
    margin-bottom: 0;
}

.movie-modal-side,
.movie-detail-overview-side {
    padding: 1rem;
    border: 1px solid var(--pillalas-border);
    border-radius: 18px;
    background: var(--pillalas-soft);
}

.movie-modal-data-list,
.movie-detail-overview-data-list {
    display: grid;
    gap: .85rem;
    margin: 0;
}

.movie-modal-data-list div,
.movie-detail-overview-data-list div {
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--pillalas-border-subtle);
}

.movie-modal-data-list div:last-child,
.movie-detail-overview-data-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.movie-modal-data-list dt,
.movie-detail-overview-data-list dt {
    margin-bottom: .2rem;
    color: var(--pillalas-text-muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.movie-modal-data-list dd,
.movie-detail-overview-data-list dd {
    margin: 0;
    color: var(--pillalas-dark);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.35;
}

.movie-modal-data-list .movie-data-list-value-with-icon,
.movie-detail-overview-data-list .movie-data-list-value-with-icon {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    column-gap: .55rem;
    align-items: start;
}

.movie-data-list-value-with-icon .movie-detail-rating-icon {
    display: block;
}

.movie-data-list-value-with-rating .movie-detail-rating-icon {
    height: 30px;
    transform: translateY(2px);
}

.movie-data-list-value-with-rating > span {
    line-height: 1.1;
}

.movie-modal-data-list .movie-data-list-value-with-country,
.movie-detail-overview-data-list .movie-data-list-value-with-country {
    align-items: center;
}

.movie-data-list-country-flag {
    font-size: 1.15rem;
    line-height: 25px;
}

.movie-modal-header {
    position: absolute;
    top: calc(-2.9rem - 4px);
    right: 0;
    z-index: 30;
}

.modal-remote-content .modal-dialog {
    margin-top: 3.4rem;
}

.movie-modal-trailers,
.movie-detail-overview-trailers {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.movie-modal-trailer-link,
.movie-detail-overview-trailer-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 0, 0, .2);
    border-radius: 18px;
    background: var(--pillalas-white);
    color: var(--pillalas-dark);
    text-decoration: none;
    transition: transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.movie-modal-trailer-link:hover,
.movie-detail-overview-trailer-link:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 0, 0, .45);
    box-shadow: var(--pillalas-shadow-raised);
}

.movie-modal-trailer-icon,
.movie-detail-overview-trailer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ff0000;
    color: var(--pillalas-white);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.movie-modal-trailer-content,
.movie-detail-overview-trailer-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.movie-modal-trailer-content strong,
.movie-detail-overview-trailer-content strong {
    color: var(--pillalas-dark);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.25;
}

.movie-modal-trailer-content small,
.movie-detail-overview-trailer-content small {
    margin-top: .2rem;
    color: var(--pillalas-text-muted);
    font-size: .78rem;
    font-weight: 600;
}

.movie-modal-trailer-external,
.movie-detail-overview-trailer-external {
    margin-left: auto;
    color: #ff0000;
    font-size: .95rem;
    opacity: .7;
}

.movie-modal-shell {
    position: relative;
    overflow: visible;
}

.movie-modal-heading-poster {
    display: none;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .movie-modal-layout-3col {
        grid-template-columns: 130px minmax(0, 1fr) 180px;
        gap: 1.00rem;
    }
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .modal-remote-content .modal-dialog {
        max-width: 760px;
    }
}

@media (max-width: 991.98px) {
    .movie-modal-body {
        padding: 1.1rem;
    }

    .modal-remote-content .movie-modal-header {
        top: -2.9rem;
    }

    .movie-modal-layout-3col {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .movie-modal-poster {
        display: none;
    }

    .movie-modal-main h2 {
        font-size: 1.35rem;
    }

    .movie-modal-side {
        padding: .9rem;
    }

    .movie-modal-heading {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
        margin-bottom: 1.25rem;
    }

    .movie-modal-heading-poster {
        display: block;
    }

    .movie-modal-heading-poster img {
        width: 100%;
        display: block;
        border-radius: 14px;
        box-shadow: var(--pillalas-shadow-poster-mobile);
    }

    .movie-modal-heading-text h2 {
        margin-bottom: .35rem;
    }
}

/* =========================================================
   03.2. Detalle de película
   ========================================================= */

.movie-detail-cast span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-weight: 800;
}

.movie-detail-page {
    padding-bottom: 2rem;
}

.movie-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    color: var(--pillalas-dark);
    font-size: .95rem;
    font-weight: 400;
}

.movie-detail-mobile-meta {
    display: none;
}

.movie-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    padding: 0;
}

.movie-detail-meta i {
    color: var(--pillalas-dark);
    font-size: 1.1rem;
}

.movie-detail-section-label {
    display: block;
    margin-top: 0;
    margin-bottom: .45rem;
    color: var(--pillalas-primary);
    font-size: .78rem;
    font-weight: 900;
    line-height: inherit;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.movie-detail-cast {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.movie-detail-cast-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .38rem .7rem;
    border: 0;
    border-radius: 999px;
    background: var(--pillalas-soft);
    color: var(--pillalas-dark);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
}

.movie-detail-cast-toggle {
    padding: .38rem .7rem;
    background: var(--pillalas-white);
    color: var(--pillalas-primary);
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.movie-detail-cast-toggle:hover {
    color: var(--pillalas-dark);
}

.movie-detail-cast-toggle:focus-visible {
    outline: 2px solid var(--pillalas-primary);
    outline-offset: 3px;
}

.movie-detail-rating-icon {
    height: 25px;
    width: auto;
    display: inline-block;
}

.movie-detail-overview-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 220px;
    gap: 1.75rem;
    align-items: start;
}

.movie-detail-overview-poster {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: var(--pillalas-soft);
    box-shadow: var(--pillalas-shadow-poster);
}

.movie-detail-overview-poster img,
.movie-detail-overview-heading-poster img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.movie-detail-overview-heading {
    margin-bottom: 1.25rem;
}

.movie-detail-overview-heading-poster {
    display: none;
}

.movie-detail-showtimes .movie-cinema-showtime-card > .cine-movie-content {
    display: block;
    width: 100%;
}

.movie-detail-showtimes .movie-cinema-showtime-card .cine-sessions {
    width: 100%;
    margin-top: .85rem !important;
    padding-top: 0;
}

.movie-detail-showtimes .cine-version-block,
.cine-showtimes .cine-version-block {
    -webkit-user-select: none;
    user-select: none;
}

.movie-detail-showtimes {
    position: relative;
}

.movie-detail-showtimes.is-day-changing .movie-day-showtimes:not(.d-none) {
    pointer-events: none;
    visibility: hidden;
}

.movie-showtimes-feedback {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    border: 1px solid rgba(226, 27, 95, .18);
    border-radius: 999px;
    background: var(--pillalas-white);
    box-shadow: var(--pillalas-shadow-sm);
    color: var(--pillalas-dark);
    font-size: .88rem;
    font-weight: 800;
    pointer-events: none;
    white-space: nowrap;
    transform: translateX(-50%);
}

.movie-showtimes-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(226, 27, 95, .2);
    border-top-color: var(--pillalas-primary);
    border-radius: 50%;
    animation: movie-showtimes-spin .65s linear infinite;
}

.cine-day-card:disabled {
    cursor: default;
}

@keyframes movie-showtimes-spin {
    to {
        transform: rotate(360deg);
    }
}

.movie-meta-separator {
    color: #b39aac;
    font-weight: 700;
    opacity: .35;
}

@media (prefers-reduced-motion: reduce) {
    .movie-showtimes-spinner {
        animation: none;
    }
}

@media (max-width: 767.98px) {
    .movie-detail-overview-heading {
        margin-bottom: 0;
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }

    .movie-detail-overview-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .movie-detail-overview-poster {
        display: none;
    }

    .movie-detail-overview-heading-poster {
        display: block;
        overflow: hidden;
        border-radius: 14px;
        background: var(--pillalas-soft);
        box-shadow: var(--pillalas-shadow-poster-mobile);
    }

    .movie-detail-overview-heading h1 {
        font-size: 1.35rem;
    }

    .movie-detail-mobile-meta {
        display: flex;
        margin-top: .65rem;
    }

    .movie-detail-mobile-meta .cine-movie-info-link-mobile {
        display: inline-flex;
        color: var(--pillalas-dark);
        font-size: .95rem;
        font-weight: 400;
        text-decoration: underline;
        white-space: nowrap;
    }

    .movie-detail-mobile-meta .cine-movie-info-link-mobile::before {
        content: none;
    }

    .movie-detail-overview-section,
    .movie-detail-overview-side {
        display: none;
    }

    .movie-detail-meta i {
        font-size: 0.9rem;
    }

    .movie-detail-meta {
        gap: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .movie-detail-overview-heading {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: .85rem;
    }

    .movie-detail-overview-heading h1 {
        font-size: 1.18rem;
    }
}

/* =========================================================
   04. Cines
   ========================================================= */

/* =========================================================
   04.1. Cartelera, sesiones e información del cine
   ========================================================= */

.cine-movie-info-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: .2rem .55rem;
    border: 1px solid var(--pillalas-border-emphasis);
    border-radius: 8px;
    background: rgba(83, 35, 79, .04);
    color: var(--pillalas-text-muted);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.cine-movie-info-link:hover {
    border-color: rgba(226, 27, 95, .24);
    background: var(--pillalas-soft);
    color: var(--pillalas-primary);
}

.cine-page :is(
    .cine-days-arrow,
    .cine-day-card,
    .cine-session-time,
    .cine-movie-info-link,
    .cine-info-list-clean a,
    .cine-map-button-clean
):focus-visible {
    outline: 3px solid var(--pillalas-primary);
    outline-offset: 3px;
}

.movie-detail-poster-trigger {
    width: 100%;
}

.cine-movie-info-link-mobile {
    display: inline-flex;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: .9rem;
    white-space: nowrap;
    font-weight: 400;
    color: var(--pillalas-dark);
    text-decoration: underline;
}

.cine-movie-info-link-mobile:hover {
    border-color: transparent;
    background: transparent;
    color: var(--pillalas-primary);
    box-shadow: none;
}

.cine-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--pillalas-border);
    border-radius: 26px;
    background: var(--pillalas-white);
    box-shadow: var(--pillalas-shadow-hero);
}

.cine-hero-kicker {
    display: block;
    color: var(--pillalas-primary);
    font-weight: 900;
    text-transform: uppercase;
}

.cine-hero h1,
.cine-hero h2 {
    margin: 0;
    color: var(--pillalas-dark);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -.035em;
}

.cine-info-list-clean i,
.cine-current-day i {
    color: var(--pillalas-primary);
}

.cine-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
    align-items: start;
}

.cine-showtimes {
    display: grid;
    gap: 1.5rem;
}

.cine-movie-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    margin-bottom: 0;
    padding: 1.50rem;
    border-radius: 24px;
}

.cine-movie-poster {
    align-self: start;
    border-radius: 18px;
}

.cine-movie-content,
.cine-hero-main {
    min-width: 0;
}

.cine-movie-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .65rem;
}

.cine-logo-wrapper {
    flex: 0 0 68px;
    width: 68px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
}

.cine-logo-mini {
    display: block;
    width: 100%;
    padding: 0 0.4rem;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.cine-movie-heading {
    min-width: 0;
}

.cine-movie-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .65rem;
}

.cine-movie-header h2,
.cine-movie-header h3 {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--pillalas-dark);
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.cine-movie-header h2 a,
.cine-movie-header h3 button {
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.cine-movie-header h2 a:hover,
.cine-movie-header h3 button:hover {
    color: var(--pillalas-primary);
}

.cine-movie-title-row .movie-release-badge {
    flex: 0 0 auto;
}

.cine-movie-director {
    margin: .35rem 0 0;
    color: var(--pillalas-text-muted);
    font-size: .92rem;
    font-weight: 500;
}

.cine-director-label-mobile {
    display: none;
}

.cine-session-list,
.cine-version-header {
    display: flex;
    flex-wrap: wrap;
}

.cine-sessions {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: .75rem !important;
    padding-top: 0;
}

.cine-session-list {
    gap: 1rem;
}

.cine-session-time {
    min-width: 92px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(226, 27, 95, .20);
    border-radius: 14px;
    background: #f3f1f3;
    color: var(--pillalas-dark);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 14px var(--pillalas-border);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.cine-session-hour {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .65rem .9rem;
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1;
}

.cine-session-hour--remote-unavailable {
    gap: .4rem;
}

.cine-session-hour--remote-unavailable i {
    flex: 0 0 auto;
    font-size: 1em;
}

.cine-session-format {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: .35rem .65rem;
    border-top: 1px solid var(--pillalas-border-subtle);
    background: var(--pillalas-white);
    color: var(--pillalas-dark);
    font-size: .80rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.cine-session-time:hover {
    background: #f3f1f3;
    color: var(--pillalas-dark);
    transform: translateY(-1px);
}

.cine-session-time:hover .cine-session-hour {
    background: var(--pillalas-primary-dark);
    color: var(--pillalas-white);
}

.cine-session-time.disabled {
    background: #f3edf1;
    border-color: #f3edf1;
    color: var(--pillalas-text-soft);
    box-shadow: none;
    opacity: .65;
    cursor: pointer;
}

.cine-version-list {
    display: grid;
    gap: .75rem;
}

.cine-version-block {
    padding: 1rem;
    border: 1px solid var(--pillalas-primary-subtle);
    border-radius: 20px;
    background: #fff7fa;
}

.cine-version-icon {
    display: inline-flex;
    align-items: center;
    color: var(--pillalas-primary);
    font-size: 1rem;
    line-height: 1;
}

.cine-version-header {
    display: flex;
    align-items: center;
    margin-bottom: .15rem;
}

.cine-version-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    color: var(--pillalas-dark);
    font-size: .85rem;
    font-weight: bold;
    line-height: 1;
}

.cine-version-prefix {
    white-space: nowrap;
}

.cine-version-underline {
    height: 1px;
    margin-bottom: .95rem;
    margin-top: .70rem;
    border-radius: 999px;
    background: var(--pillalas-primary-subtle);
    width: 100%;
}

.cine-info-card {
    overflow: hidden;
    border: 1px solid var(--pillalas-border);
    border-radius: 24px;
    background: var(--pillalas-white);
    box-shadow: var(--pillalas-shadow-md);
}

.cine-info-card h2 {
    margin: 0;
    padding: 1.1rem 1.15rem;
    background: var(--pillalas-soft);
    color: var(--pillalas-dark);
    font-size: 1.05rem;
    font-weight: 900;
}

.cine-info-image-clean {
    display: block;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 10;
    margin-bottom: 1.35rem;
    border-radius: 14px;
}

.cine-info-list-clean {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}

.cine-info-list-clean a {
    font-weight: 800;
    text-decoration: none;
    color: var(--pillalas-link);
    overflow-wrap: anywhere;
}

.cine-info-list-clean a:hover {
    color: var(--pillalas-primary);
}

.cine-info-card-clean {
    padding: 1.50rem;
    border-radius: 18px;
}

.cine-info-card-clean h2 {
    margin: 0 0 1rem;
    padding: 0;
    background: transparent;
    color: var(--pillalas-dark);
    font-size: 1.15rem;
    font-weight: 900;
}

.cine-info-media-clean,
.cine-info-details-clean {
    min-width: 0;
}

.cine-info-details-clean {
    margin-top: 1rem;
}

.cine-info-section-clean {
    padding: 1.15rem 0;
    border-top: 1px solid var(--pillalas-border-medium);
}

.cine-info-image-clean + .cine-info-section-clean,
.cine-info-details-clean .cine-info-section-clean:first-child {
    border-top: 0;
    padding-top: 0;
}

.cine-info-section-clean h3 {
    margin: 0 0 .85rem;
    color: var(--pillalas-dark);
    font-size: .95rem;
    font-weight: 900;
}

.cine-info-list-clean li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    color: var(--pillalas-dark);
    font-size: .90rem;
    line-height: 1.35;
}

.cine-info-list-clean i {
    font-size: .95rem;
    line-height: 1.25;
}

.cine-map-button-wrap {
    margin-top: 1.15rem;
}

.cine-map-button-clean {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 44px;
    border: 2px solid var(--pillalas-primary);
    border-radius: 10px;
    background: var(--pillalas-white);
    color: var(--pillalas-primary);
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
}

.cine-map-button-clean:hover {
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
}

.cine-empty {
    padding: 3rem 1.5rem;
    border-radius: 24px;
    text-align: center;
}

.cine-empty i {
    color: var(--pillalas-primary);
    font-size: 2rem;
}

.cine-empty h2 {
    margin: .75rem 0 .35rem;
    color: var(--pillalas-dark);
    font-weight: 900;
}

.cine-empty p {
    margin: 0;
    color: var(--pillalas-text-muted);
    font-weight: 600;
}

.cine-hero-calendar {
    display: grid;
    grid-template-columns: minmax(360px, .8fr) minmax(0, 1.2fr);
    gap: 2rem;
    padding: 1.50rem;
}

.movie-detail-page .cine-hero-calendar,
.cine-page .cine-hero-calendar {
    margin-bottom: 1.5rem;
}

.cine-hero-calendar h1,
.cine-hero-calendar h2 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
    white-space: nowrap;
}

.cine-current-day {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--pillalas-text-muted);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.cine-current-day i {
    font-size: 1.45rem;
}

.cine-current-day span {
    white-space: nowrap;
}

.cine-days-nav {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    max-width: 100%;
    padding: .7rem;
    border: 1px solid var(--pillalas-primary-subtle);
    border-radius: 18px;
    background: var(--pillalas-soft);
}

.cine-days-row {
    display: flex;
    flex: 1;
    align-items: stretch;
    gap: .65rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.cine-days-row::-webkit-scrollbar {
    display: none;
}

.cine-days-arrow {
    width: 25px;
    min-width: 25px;
    height: 72px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pillalas-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .18s ease, opacity .18s ease, transform .18s ease;
}

.cine-days-arrow i {
    font-size: 1.35rem;
    font-weight: 900;
}

.cine-days-arrow.disabled,
.cine-days-arrow.is-hidden {
    opacity: .28;
    pointer-events: none;
    cursor: default;
}

.cine-day-card {
    min-width: 70px;
    height: 82px;
    padding: .65rem .7rem;
    border: 0;
    border-radius: 12px;
    background: var(--pillalas-white);
    color: var(--pillalas-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease, opacity .18s ease;
}

.cine-day-card:not(.active):not(:disabled):hover {
    background: var(--pillalas-white);
    color: var(--pillalas-primary);
    transform: translateY(-1px);
}

.cine-day-card.active {
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
    cursor: default;
}

.cine-day-week,
.cine-day-month {
    display: block;
    font-weight: 900;
    line-height: 1;
}

.cine-day-week {
    font-size: .68rem;
}

.cine-day-card strong {
    margin: .18rem 0;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 900;
}

.cine-day-month {
    font-size: .72rem;
}

.cine-movie-content {
    display: contents;
}

.cine-movie-info-mobile {
    grid-column: 2;
}

@media (hover: none) and (pointer: coarse) {
    .cine-session-time,
    .cine-day-card {
        touch-action: manipulation;
        -webkit-tap-highlight-color: var(--pillalas-primary-translucent-strong);
    }

    .cine-day-card:hover {
        transform: none;
    }

    .cine-session-time:hover {
        transform: none;
    }

    .cine-movie-info-link,
    .cine-movie-info-link-mobile,
    .cine-info-list-clean a,
    .cine-map-button-clean {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .cine-map-button-clean {
        display: flex;
    }

    .cine-movie-info-link,
    .cine-movie-info-link-mobile,
    .cine-info-list-clean a {
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    .cine-movie-info-link,
    .cine-movie-info-link-mobile {
        padding-left: .2rem;
        padding-right: .2rem;
    }

    .cine-info-list-clean li {
        align-items: center;
    }
}

@media (max-width: 991.98px) {
    .cine-aside {
        position: static;
    }

    .cine-hero-calendar {
        gap: 1.4rem;
    }

    .cine-hero-calendar h1,
    .cine-hero-calendar h2,
    .cine-current-day span {
        white-space: normal;
    }

    .cine-layout {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .cine-info-card-clean {
        display: grid;
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
        gap: .85rem 1.15rem;
        align-items: start;
    }

    .cine-info-card-clean h2 {
        grid-column: 1 / -1;
        margin-bottom: .15rem;
    }

    .cine-info-media-clean {
        grid-column: 1;
        display: grid;
        gap: .6rem;
        align-content: start;
    }

    .cine-info-image-clean {
        margin-bottom: 0;
    }

    .cine-map-button-wrap {
        margin-top: 0;
        margin-bottom: 0;
    }

    .cine-info-details-clean {
        grid-column: 2;
        display: grid;
        gap: 0;
        align-content: start;
        margin-top: 0;
    }

    .cine-info-details-clean .cine-info-section-clean {
        padding: .7rem 0;
    }

    .cine-info-details-clean .cine-info-section-clean:first-child {
        padding-top: 0;
    }

    .cine-info-details-clean .cine-info-section-clean:last-child {
        padding-bottom: 0;
    }

    .cine-info-details-clean .cine-info-list-clean {
        gap: .65rem;
    }

    .cine-info-details-clean .cine-info-section-clean h3 {
        margin-bottom: .65rem;
    }
}

@media (max-width: 767.98px) {
    .cine-movie-info-link-mobile {
        display: inline-flex;
        min-height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: .9rem;
        white-space: nowrap;
        font-weight: 400;
        color: var(--pillalas-dark);
        text-decoration: underline;
    }

    .cine-hero {
        align-items: stretch;
        flex-direction: column;
        padding: .9rem;
    }

    .cine-movie-card {
        gap: 0.5rem 1rem;
        padding: .9rem;
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .cine-movie-header h2,
    .cine-movie-header h3 {
        font-size: 1.05rem;
    }

    .cine-logo-wrapper {
        flex-basis: 58px;
        width: 58px;
    }

    .cine-session-time {
        min-width: 58px;
    }

    .cine-hero-calendar h1,
    .cine-hero-calendar h2 {
        font-size: 1.45rem;
        margin-bottom: 0.5rem;
    }

    .cine-current-day {
        font-size: 1.05rem;
    }

    .cine-days-nav {
        gap: .45rem;
        position: relative;
        width: 100%;
        max-width: 100%;
        padding: .6rem 0 .6rem .6rem;
        overflow: hidden;
    }

    .cine-days-row {
        gap: .5rem;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-right: 0.35rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .cine-day-card {
        min-width: 72px;
        height: 74px;
        padding: .55rem .45rem;
        flex: 0 0 72px;
        scroll-snap-align: start;
    }

    .cine-day-card strong {
        font-size: 1.32rem;
    }

    .cine-days-arrow {
        width: 32px;
        min-width: 32px;
        height: 74px;
        display: none;
    }

    .cine-hero-calendar {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0.90rem;
        overflow: hidden;
    }

    .cine-days-panel {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .cine-days-nav::after {
        content: "";
        position: absolute;
        top: .6rem;
        right: 0;
        bottom: .6rem;
        width: 3.2rem;
        pointer-events: none;
        background: linear-gradient(
            90deg,
            rgba(255, 241, 246, 0),
            var(--pillalas-soft) 75%
        );
    }

    .cine-days-nav.is-at-end::after {
        display: none;
    }

    .cine-current-day-sticky {
        position: sticky;
        top: 0;
        z-index: 30;
        margin: -1rem 0 1.25rem;
        padding: .85rem 1rem;
        border: 1px solid var(--pillalas-primary-translucent-strong);
        border-radius: 16px;
        background: var(--pillalas-white);
        box-shadow: var(--pillalas-shadow-raised);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: flex-start;
        gap: .2rem;
        transition: background-color .18s ease, box-shadow .18s ease, opacity .18s ease;
    }

    .cine-sticky-cinema {
        display: none;
        color: var(--pillalas-primary);
        font-size: .72rem;
        font-weight: 900;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .cine-current-day-sticky.is-stuck {
        margin: 0 0 1.25rem;
        padding: .85rem .25rem .75rem;
        border: 0;
        border-radius: 0;
        background: rgba(255, 255, 255, .96);
        margin-left: calc(var(--bs-gutter-x) * -.5);
        margin-right: calc(var(--bs-gutter-x) * -.5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    .movie-detail-page .cine-current-day-sticky,
    .movie-detail-page .cine-current-day-sticky.is-stuck,
    .cine-page .cine-current-day-sticky,
    .cine-page .cine-current-day-sticky.is-stuck {
        margin-top: 0;
        margin-bottom: 1.5rem;
    }

    .cine-current-day-sticky.is-stuck .cine-sticky-cinema {
        display: block;
    }

    .cine-sticky-date {
        display: flex;
        align-items: center;
        gap: .55rem;
        color: var(--pillalas-dark);
        font-size: 1.05rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .cine-sticky-date i {
        color: var(--pillalas-primary);
        font-size: 1.1rem;
    }

    .cine-meta-extra {
        display: none !important;
    }

    .cine-director-label-desktop {
        display: none;
    }

    .cine-director-label-mobile {
        display: inline;
    }

    .cine-movie-director::before {
        color: var(--pillalas-text-muted);
    }

    .cine-version-block {
        padding: .5rem;
        width: 100%;
    }

    .cine-sessions {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: .75rem !important;
        padding-top: 0;
    }

    .cine-session-list {
        gap: .75rem;
    }

    .cine-session-hour {
        min-height: 38px;
        padding: .65rem .9rem;
        font-size: 0.90rem;
        font-weight: 900;
    }

    .cine-session-format {
        min-height: 32px;
        padding: .35rem .65rem;
        font-size: .72rem;
        font-weight: 900;
    }

    .cine-version-title {
        width: 100%;
        padding-bottom: 0;
    }

    .cine-version-prefix {
        display: none;
    }

    .cine-version-header {
        margin-bottom: .1rem;
    }

    .cine-version-underline {
        margin-bottom: .65rem;
        margin-top: .40rem;
    }

    .cine-layout {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   04.2. Modal de cine
   ========================================================= */

.cinema-modal {
    color: var(--pillalas-dark);
}

.cinema-modal-body {
    padding: 1.65rem 2rem 2rem;
}

.cinema-modal-title {
    margin: 0 4.75rem 1.35rem 0;
}

.cinema-modal-title span {
    display: block;
    margin-bottom: .25rem;
    color: var(--pillalas-primary);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.cinema-modal-title h2 {
    margin: 0;
    color: var(--pillalas-dark);
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.12;
}

.cinema-modal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

.cinema-modal-media img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
    aspect-ratio: 16 / 10;
    box-shadow: var(--pillalas-shadow-poster);
}

.cinema-modal-map-button,
.cinema-modal-showtimes-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 44px;
    margin-top: .85rem;
    border: 2px solid var(--pillalas-primary);
    border-radius: 10px;
    background: var(--pillalas-white);
    color: var(--pillalas-primary);
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
}

.cinema-modal-map-button:hover,
.cinema-modal-showtimes-button:hover {
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
}

.cinema-modal-info {
    min-width: 0;
}

.cinema-modal-section {
    padding: 1rem;
    border: 1px solid var(--pillalas-border);
    border-radius: 18px;
    background: var(--pillalas-white);
}

.cinema-modal-section + .cinema-modal-section {
    margin-top: 1rem;
}

.cinema-modal-section h3 {
    margin: 0 0 .85rem;
    color: var(--pillalas-dark);
    font-size: .95rem;
    font-weight: 900;
}

.cinema-modal-list {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cinema-modal-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    color: var(--pillalas-dark);
    font-size: .92rem;
    line-height: 1.35;
}

.cinema-modal-list i {
    color: var(--pillalas-primary);
    font-size: .95rem;
    line-height: 1.25;
}

.cinema-modal-list a {
    color: var(--pillalas-link);
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.cinema-modal-list a:hover {
    color: var(--pillalas-primary);
}

@media (min-width: 992px) {
    .cinema-modal-grid {
        grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
        gap: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .cinema-modal-title {
        margin-right: 3.5rem;
    }

    .cinema-modal-title h2 {
        font-size: 1.35rem;
    }
}

/* =========================================================
   05. Proceso de compra
   ========================================================= */

/* =========================================================
   05.1. Selección de sesión y butacas
   ========================================================= */

.screening-page {
    padding-bottom: 2rem;
}

.screening-flow-card + .screening-flow-card {
    margin-top: 1.5rem;
}

.screening-shell-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pillalas-border-emphasis);
    border-radius: 28px;
    background: var(--pillalas-white);
    box-shadow: 0 18px 42px var(--pillalas-border);
}

.screening-summary-card {
    padding: 1.50rem;
}

.screening-summary-kicker {
    display: inline-flex;
    color: var(--pillalas-primary);
    font-weight: 900;
    text-transform: uppercase;
}

.screening-summary-layout {
    display: grid;
    grid-template-columns: 186px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.screening-summary-poster {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    overflow: hidden;
    padding: 0;
}

.screening-summary-poster img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 20px;
    object-fit: cover;
}

.screening-summary-poster-placeholder {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, var(--pillalas-primary-translucent-strong), var(--pillalas-border));
}

.screening-summary-content {
    min-width: 0;
}

.screening-summary-heading {
    display: block;
    margin-bottom: 1rem;
}

.screening-summary-title {
    min-width: 0;
    margin: 0;
    color: var(--pillalas-dark);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.screening-summary-title-action {
    display: inline-flex;
    align-items: center;
    margin-left: .45rem;
    padding: .48rem .58rem .36rem;
    border: 1px solid rgba(83, 35, 79, .28);
    border-radius: 6px;
    background: var(--pillalas-white);
    color: var(--pillalas-primary);
    font-size: .74rem;
    font-weight: 900;
    line-height: 1;
    vertical-align: .16em;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.screening-summary-title-action-label--mobile {
    display: none;
}

.screening-summary-title-action:hover {
    border-color: var(--pillalas-primary);
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
}

.screening-summary-top-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    gap: .85rem;
    margin: 0 0 1rem;
    justify-content: start;
}

.screening-summary-top-facts--without-original-language {
    grid-template-columns: minmax(0, 1fr) max-content;
}

.screening-summary-title-action:focus-visible,
.screening-summary-venue:focus-visible {
    outline: 2px solid rgba(226, 27, 95, .45);
    outline-offset: 4px;
}

.screening-summary-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 1rem;
    margin: 0;
    justify-content: start;
}

.screening-summary-fact {
    padding: 0.75rem;
    border: 1px solid var(--pillalas-border-emphasis);
    border-radius: 20px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(8px);
}

.screening-summary-fact--summary {
    padding: .65rem;
    border: 0;
    border-radius: 13px;
    background: var(--pillalas-soft);
    backdrop-filter: none;
}

.screening-summary-fact--alert {
    grid-column: 1 / -1;
    border: 0;
    background: var(--pillalas-soft);
}

.screening-summary-fact--compact dd {
    font-size: 1.05rem;
}

.screening-summary-fact--compact {
    width: fit-content;
    justify-self: start;
}

.screening-summary-fact--schedule {
    grid-column: 1 / -1;
}

.screening-summary-fact--selection {
    grid-column: 1 / -1;
    border: 0;
    background: var(--pillalas-soft);
}

.screening-summary-schedule-marker {
    position: relative;
    z-index: 0;
    display: inline-block;
    max-width: calc(100% - .7em);
}

.screening-summary-schedule-marker::before {
    position: absolute;
    z-index: -1;
    inset: -.12em -.58em -.18em -.5em;
    background: linear-gradient(
        176deg,
        rgba(255, 245, 139, .55) 0%,
        rgba(255, 229, 45, .74) 22%,
        rgba(255, 239, 103, .64) 100%
    );
    clip-path: polygon(
        0 13%, 8% 7%, 24% 10%, 43% 3%, 61% 9%, 78% 4%, 100% 11%,
        98% 84%, 83% 92%, 66% 88%, 49% 96%, 28% 90%, 9% 95%, 2% 86%
    );
    content: '';
    transform: rotate(-.9deg);
}

.screening-summary-schedule-time {
    color: var(--pillalas-primary);
    font-size: 1.12em;
    font-weight: 900;
    white-space: nowrap;
}

.screening-summary-matinal {
    color: var(--pillalas-dark);
    font-weight: 800;
    white-space: nowrap;
}

.screening-summary-selection-list,
.screening-summary-mobile-selection-list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.screening-summary-selection-item,
.screening-summary-selection-empty {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .5rem .8rem;
    border: 1px solid var(--pillalas-border-emphasis);
    border-radius: 999px;
    background: var(--pillalas-border-medium);
    color: var(--pillalas-dark);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.3;
}

.screening-summary-selection-empty {
    background: var(--pillalas-border-subtle);
    color: var(--pillalas-text-detail);
    font-weight: 700;
}

.screening-summary-fact dt {
    margin-bottom: .5rem;
    color: var(--pillalas-text-muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.screening-summary-fact dd {
    margin: 0;
    color: var(--pillalas-dark);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.screening-summary-venue {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.screening-summary-venue-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .65rem;
}

.screening-summary-venue-logo {
    flex: 0 0 auto;
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.screening-summary-venue-name {
    display: inline-block;
    color: var(--pillalas-dark);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.15;
}

.screening-summary-venue-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 0;
    color: var(--pillalas-text-muted);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
}

.screening-summary-venue-city {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pillalas-text-muted);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.screening-summary-venue-address {
    color: var(--pillalas-text-muted);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
}

.screening-summary-venue:hover .screening-summary-venue-name {
    color: var(--pillalas-primary);
}

.screening-summary-mobile-details {
    display: none;
}

.screening-summary-mobile-list {
    display: grid;
    gap: .85rem;
    margin-bottom: 0;
}

.screening-summary-mobile-row {
    display: block;
    padding: 0;
}

.screening-summary-mobile-row--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .85rem;
    align-items: stretch;
}

.screening-summary-mobile-row--split-compact {
    grid-template-columns: minmax(0, 1fr) max-content;
}

.screening-summary-mobile-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: .6rem .65rem;
    border: 1px solid var(--pillalas-border-emphasis);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(8px);
}

.screening-summary-mobile-card--summary {
    padding: .65rem;
    border: 0;
    border-radius: 13px;
    background: var(--pillalas-soft);
    backdrop-filter: none;
}

.screening-summary-mobile-card--selection {
    border: 0;
    background: var(--pillalas-soft);
}

.screening-summary-mobile-card--alert {
    border: 0;
    background: var(--pillalas-soft);
}

.screening-summary-mobile-term {
    margin: 0;
    color: var(--pillalas-text-muted);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.2;
}

.screening-summary-mobile-value {
    margin: .22rem 0 0;
    color: var(--pillalas-dark);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
}

.screening-summary-mobile-value--schedule {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .55rem;
}

.screening-summary-mobile-value--venue {
    display: flex;
    justify-content: flex-start;
    margin-top: .35rem;
}

.screening-summary-mobile-selection-list {
    margin-top: .35rem;
}

.screening-summary-mobile-card--compact-center {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.screening-summary-mobile-card--top {
    justify-content: flex-start;
}

.screening-summary-mobile-card--compact-center .screening-summary-mobile-term,
.screening-summary-mobile-card--compact-center .screening-summary-mobile-value {
    text-align: center;
}

.screening-summary-mobile-venue {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: .55rem;
    flex-direction: row;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
}

.screening-summary-mobile-venue-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: 0 0 auto;
}

.screening-summary-mobile-venue-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .08rem;
}

.screening-summary-mobile-venue-name {
    color: var(--pillalas-dark);
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.2;
}

.screening-summary-mobile-venue-meta {
    color: var(--pillalas-text-muted);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
}

.seatmap-card-header {
    padding: 1.4rem 1.5rem 1rem;
}

.seatmap-card {
    position: relative;
}

.seatmap-loading-overlay {
    position: absolute;
    inset: 3.5rem 0 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, .92);
    z-index: 5;
}

.seatmap-ready-content {
    transition: opacity .2s ease;
}

.seatmap-card-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 1.5rem 1.5rem;
}

.seatmap-selection-summary-wrap {
    padding: 0 1.5rem 1.1rem;
}

.seatmap-selection-summary {
    display: grid;
    gap: .9rem;
    margin: 0;
}

.seatmap-selection-summary .screening-summary-fact {
    width: 100%;
}

.seatmap-glasses-fact {
    grid-column: 1 / -1;
}

.seatmap-3d-glasses-copy {
    margin: 0 0 .9rem;
    color: var(--pillalas-text-muted);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.45;
}

.seatmap-3d-glasses-copy strong {
    display: block;
    margin-bottom: .2rem;
    color: var(--pillalas-dark);
    font-weight: 900;
}

.seatmap-3d-glasses-controls {
    max-width: 240px;
}

.seatmap-3d-glasses-field {
    min-width: 0;
}

.seatmap-3d-glasses-label {
    display: inline-block;
    margin-bottom: .4rem;
    color: var(--pillalas-dark);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.2;
}

.seatmap-3d-glasses-select {
    border: 1px solid var(--pillalas-border-control);
    border-radius: 12px;
    color: var(--pillalas-dark);
    font-weight: 700;
}

.seatmap-3d-glasses-select:focus {
    border-color: rgba(226, 27, 95, .45);
    box-shadow: 0 0 0 .22rem var(--pillalas-primary-tint);
}

.seatmap-3d-glasses-select:disabled {
    background-color: rgba(83, 35, 79, .05);
    color: var(--pillalas-text-soft);
    opacity: 1;
}

.three-d-glasses-confirm-modal .modal-pillalas-body {
    padding-top: 2rem;
    padding-bottom: 1.75rem;
    text-align: center;
}

.three-d-glasses-confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .9rem;
    color: var(--pillalas-primary);
    font-size: 4rem;
    line-height: 1;
}

.three-d-glasses-confirm-title {
    margin: 0 0 .75rem;
    color: var(--pillalas-dark);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
}

.three-d-glasses-confirm-copy {
    margin: 0 0 1.25rem;
    color: var(--pillalas-text-detail);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.55;
}

.three-d-glasses-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    align-items: stretch;
    flex-wrap: nowrap;
}

.three-d-glasses-confirm-secondary {
    flex: 0 0 auto;
    min-height: 50px;
    padding: 0 1rem;
    border: 1px solid var(--pillalas-border-control);
    border-radius: 16px;
    background: var(--pillalas-white);
    color: var(--pillalas-dark);
    font-size: .95rem;
    font-weight: 800;
}

.three-d-glasses-confirm-actions .seatmap-buy-button {
    width: auto;
    flex: 1 1 auto;
}

.seatmap-card[data-seatmap-state="loading"] .seatmap-loading-overlay {
    display: flex;
}

.seatmap-card[data-seatmap-state="loading"] .seatmap-ready-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.screening-summary-fact--value-center dd {
    text-align: center;
}

.screening-summary-alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: #9f1f53;
    font-size: .94rem;
    font-weight: 700;
}

.screening-summary-alert i {
    margin-top: .1rem;
    font-size: 1rem;
}

.seatmap-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem 1.9rem;
}

.seatmap-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--pillalas-text-muted);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

.seatmap-legend-dot {
    --seat-fill: #00b13f;
    position: relative;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 0;
    background: var(--seat-fill);
    -webkit-mask: url("/static/imagenes/butacas/seat-shape.svg") center / 100% 100% no-repeat;
    mask: url("/static/imagenes/butacas/seat-shape.svg") center / 100% 100% no-repeat;
}

.seatmap-legend-dot::after {
    content: "";
    position: absolute;
    inset: 5% 11% 26%;
    background: rgba(83, 35, 79, .46);
    opacity: 0;
    -webkit-mask: url("/static/imagenes/butacas/seat-guest-icon.svg") center / contain no-repeat;
    mask: url("/static/imagenes/butacas/seat-guest-icon.svg") center / contain no-repeat;
}

.seatmap-legend-dot::before {
    content: "";
    position: absolute;
    inset: 8% 5% 34% 11%;
    background: var(--pillalas-white);
    -webkit-mask: url("/static/imagenes/butacas/silla_ruedas_blanco.svg") center / contain no-repeat;
    mask: url("/static/imagenes/butacas/silla_ruedas_blanco.svg") center / contain no-repeat;
    opacity: 0;
}

.seatmap-legend-dot--selected {
    --seat-fill: var(--pillalas-primary);
}

.seatmap-legend-dot--sold,
.seatmap-legend-dot--disabled {
    --seat-fill: #cfd4d7;
    opacity: .75;
}

.seatmap-legend-dot--sold::after {
    opacity: 1;
}

.seatmap-legend-dot--pmr {
    --seat-fill: #7bb8ff;
}

.seatmap-legend-dot--pmr::before {
    opacity: 1;
}

.seatmap-legend-dot--covid {
    --seat-fill: #f5c84c;
}

.seatmap-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: .85rem 1.4rem 1.4rem;
}

.seatmap-theater {
    position: relative;
    min-width: 0;
}

.seatmap-scroll-wrap {
    overflow: hidden;
    overflow-y: hidden;
    padding: .9rem 1.8rem 1rem;
    border: 1px solid var(--pillalas-border-emphasis);
    border-radius: 24px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .72)),
        radial-gradient(circle at 50% 15%, rgba(83, 35, 79, .07), transparent 42%);
}

.seatmap-stage {
    --seat-max-size: 26px;
    --seat-min-size: 4px;
    --seat-base-gap: clamp(3px, .45vw, 6px);
    --seat-row-label-offset: 1.7rem;
    --seat-gap: var(--seat-base-gap);
    --seat-cell-size: 24px;
    --seat-grid-width: 100%;
    position: relative;
    display: grid;
    gap: 2rem;
    width: var(--seat-grid-width);
    max-width: 100%;
    padding-block: 1rem 1.45rem;
    margin: 0 auto;
}

.seatmap-canvas {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--seat-cols), var(--seat-cell-size));
    grid-template-rows: repeat(var(--seat-rows), var(--seat-cell-size));
    gap: var(--seat-gap);
    width: 100%;
    min-height: calc((var(--seat-rows) * var(--seat-cell-size)) + ((var(--seat-rows) - 1) * var(--seat-gap)));
    max-width: none;
}

.seatmap-row-label-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.seatmap-row-label {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0;
    color: var(--pillalas-text-muted);
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-60%);
    white-space: nowrap;
}

/* patio.html construye estas clases con 'seatmap-row-label--' + side. */

.seatmap-row-label--left {
    left: calc(var(--seat-row-label-offset) * -1);
}

.seatmap-row-label--right {
    right: calc(var(--seat-row-label-offset) * -1);
}

.seatmap-seat {
    --seat-fill: #00b13f;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    place-self: center;
    transform: rotate(var(--seat-angle, 0deg));
    width: calc(var(--seat-cell-size) * .94);
    height: calc(var(--seat-cell-size) * .94);
    min-width: 0;
    padding: 0;
    border: 0;
    background: var(--seat-fill);
    -webkit-mask: url("/static/imagenes/butacas/seat-shape.svg") center / 100% 100% no-repeat;
    mask: url("/static/imagenes/butacas/seat-shape.svg") center / 100% 100% no-repeat;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    transition: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    contain: paint;
}

.seatmap-seat::after {
    content: "";
    display: none;
    position: absolute;
    inset: 5% 11% 26%;
    background: rgba(83, 35, 79, .46);
    pointer-events: none;
    -webkit-mask: url("/static/imagenes/butacas/seat-guest-icon.svg") center / contain no-repeat;
    mask: url("/static/imagenes/butacas/seat-guest-icon.svg") center / contain no-repeat;
}

.seatmap-seat::before {
    content: "";
    position: absolute;
    inset: 8% 5% 34% 11%;
    background: var(--pillalas-white);
    -webkit-mask: url("/static/imagenes/butacas/silla_ruedas_blanco.svg") center / contain no-repeat;
    mask: url("/static/imagenes/butacas/silla_ruedas_blanco.svg") center / contain no-repeat;
    opacity: 0;
    pointer-events: none;
}

.seatmap-seat span {
    display: none;
}

/* patio.html genera los modificadores seatmap-seat-- a partir de butaca.estado. */

.seatmap-seat--normal {
    --seat-fill: #00b13f;
}

.seatmap-seat--selected {
    --seat-fill: var(--pillalas-primary);
}

.seatmap-seat--vendida {
    --seat-fill: #cfd4d7;
    opacity: .75;
    cursor: not-allowed;
}

.seatmap-seat--noactiva {
    --seat-fill: #b1b1b1;
    opacity: .45;
    cursor: not-allowed;
}

.seatmap-seat--perimetro {
    --seat-fill: #f5c84c;
    opacity: .85;
    cursor: not-allowed;
}

.seatmap-seat--minusvalido {
    --seat-fill: #7bb8ff;
    cursor: not-allowed;
}

.seatmap-seat--minusvalido::before {
    opacity: 1;
}

.seatmap-seat--vendida::after {
    display: block;
}

.seatmap-screen {
    --seat-screen-bleed: clamp(1rem, 3vw, 2.4rem);
    position: relative;
    isolation: isolate;
    width: calc(100% + var(--seat-screen-bleed));
    min-width: calc(100% + var(--seat-screen-bleed));
    box-sizing: border-box;
    margin: 0 calc(var(--seat-screen-bleed) * -.5);
    padding: .54rem 1.25rem .66rem;
    border: 1px solid rgba(123, 20, 129, .3);
    border-radius: 18px;
    clip-path: polygon(1.2% 0, 98.8% 0, 97.4% 100%, 2.6% 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .14) 8%, rgba(255, 255, 255, 0) 24%),
        linear-gradient(100deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .16) 34%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(82deg, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, .12) 69%, rgba(255, 255, 255, 0) 84%),
        linear-gradient(135deg, #aa169d 0%, #94108e 47%, #6d0d78 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26),
        inset 0 -12px 20px rgba(67, 5, 72, .3),
        0 10px 18px var(--pillalas-border-strong);
    text-align: center;
}

.seatmap-screen::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -14px;
    height: 26px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(90deg, rgba(122, 18, 128, 0) 0%, rgba(122, 18, 128, .28) 16%, rgba(206, 88, 214, .68) 50%, rgba(122, 18, 128, .28) 84%, rgba(122, 18, 128, 0) 100%);
    filter: blur(9px);
    z-index: -1;
    opacity: .98;
    pointer-events: none;
}

.seatmap-screen-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pillalas-white);
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .12),
        0 2px 6px rgba(34, 10, 39, .38);
    -webkit-text-stroke: .015em rgba(255, 255, 255, .12);
    transform: perspective(420px) rotateX(18deg) translateY(-1px) scaleX(.98);
    transform-origin: center bottom;
}

.seatmap-tooltip {
    position: absolute;
    z-index: 30;
    max-width: 220px;
    padding: .5rem .65rem;
    border-radius: 12px;
    background: rgba(54, 23, 52, .96);
    color: var(--pillalas-white);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    box-shadow: 0 14px 26px rgba(54, 23, 52, .22);
}

.seatmap-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: rgba(54, 23, 52, .96);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
}

.seatmap-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.seatmap-buy-button {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 16px;
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
    font-size: 1rem;
    font-weight: 900;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.seatmap-buy-button:hover:not(:disabled) {
    transform: translateY(-1px);
    background: var(--pillalas-primary-dark);
    box-shadow: none;
}

.seatmap-buy-button:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

.seatmap-buy-button.is-loading,
.seatmap-buy-button.is-loading:disabled,
.contact-submit.is-loading,
.contact-submit.is-loading:disabled {
    cursor: progress;
    opacity: .9;
}

.seatmap-buy-button.is-loading::before,
.contact-submit.is-loading::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: var(--pillalas-white);
    animation: seatmap-button-spin .75s linear infinite;
}

.contact-submit.is-loading,
.contact-submit.is-loading:disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border-color: var(--pillalas-primary);
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
    box-shadow: none;
}

@keyframes seatmap-button-spin {
    to {
        transform: rotate(360deg);
    }
}

.admission-selection-card {
    display: grid;
    gap: 1rem;
}

.admission-3d-glasses .screening-summary-fact {
    width: 100%;
}

.admission-selection-copy p {
    margin: 0;
    color: var(--pillalas-text-muted);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
}

.admission-select-wrap {
    display: grid;
    gap: .5rem;
}

.admission-select-label {
    color: var(--pillalas-dark);
    font-size: .84rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admission-select {
    min-height: 48px;
    border: 1px solid var(--pillalas-border-medium);
    border-radius: 16px;
    color: var(--pillalas-dark);
    font-weight: 800;
    box-shadow: none;
}

.admission-select:focus {
    border-color: var(--pillalas-primary);
    box-shadow: var(--pillalas-focus-ring);
}

@media (max-width: 991.98px) {
    .screening-summary-layout {
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 767.98px) {
    .screening-flow-card + .screening-flow-card {
        margin-top: 0.75rem;
    }

    .screening-shell-card {
        border-radius: 24px;
    }

    .screening-summary-card {
        padding: 0.75rem;
    }

    .screening-summary-layout {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: .85rem;
    }

    .screening-summary-poster img {
        border-radius: 14px;
    }

    .screening-summary-poster-placeholder {
        border-radius: 14px;
    }

    .screening-summary-title {
        font-size: 1.2rem;
        line-height: 1.15;
    }

    .screening-summary-heading {
        margin-bottom: 0;
    }

    .screening-summary-title-action {
        display: flex;
        width: fit-content;
        margin: .45rem 0 0;
        padding: .42rem .5rem .30rem;
        font-size: .68rem;
        vertical-align: baseline;
    }

    .screening-summary-title-action-label--desktop {
        display: none;
    }

    .screening-summary-title-action-label--mobile {
        display: inline;
    }

    .screening-summary-top-facts,
    .screening-summary-facts {
        display: none;
    }

    .screening-summary-mobile-details {
        display: block;
        grid-column: 1 / -1;
    }

    .screening-summary-mobile-row--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .screening-summary-mobile-row--split-compact {
        grid-template-columns: minmax(0, 1fr) max-content;
    }

    .screening-summary-mobile-value,
    .screening-summary-mobile-venue {
        font-size: 1rem;
    }

    .seatmap-card-header {
        padding: 0.75rem;
    }

    .seatmap-card-actions {
        padding: 0 0.75rem 0.75rem;
    }

    .seatmap-selection-summary-wrap {
        padding: 0 0.75rem 0.75rem;
    }
}

@media (hover: hover) and (pointer: fine) {
    .seatmap-seat:hover:not([aria-disabled="true"]):not(.seatmap-seat--selected) {
        filter: saturate(1.04);
    }
}

@media (max-width: 767.98px) {
    .seatmap-legend {
        gap: .55rem .75rem;
    }

    .seatmap-legend-item {
        font-size: .75rem;
    }

    .seatmap-legend-dot {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }

    .seatmap-body {
        padding: 0.75rem;
    }

    .seatmap-scroll-wrap {
        margin-left: 0;
        margin-right: 0;
        border-left: 1px solid var(--pillalas-border-subtle);
        border-right: 1px solid var(--pillalas-border-subtle);
        border-radius: 18px;
        padding-left: .5rem;
        padding-right: .5rem;
        overflow: hidden;
    }

    .seatmap-stage {
        --seat-min-size: 2px;
        --seat-base-gap: clamp(1px, .3vw, 3px);
        --seat-row-label-offset: 1.2rem;
        padding-block: 0.5rem 0.5rem;
    }

    .seatmap-screen {
        --seat-screen-bleed: 1.3rem;
        padding: .42rem .95rem .54rem;
        border-radius: 15px;
    }

    .seatmap-screen::before {
        left: 7%;
        right: 7%;
        bottom: -11px;
        height: 20px;
    }

    .seatmap-row-label {
        display: none;
    }

    .admission-selection-card {
        max-width: none;
    }
}

/* =========================================================
   05.2. Precios y acreditaciones
   ========================================================= */

.pricing-page {
    padding-bottom: 2rem;
}

.pricing-selector-card {
    overflow: hidden;
    padding: 1.5rem;
    -webkit-user-select: none;
    user-select: none;
}

.pricing-selector-card input,
.pricing-selector-card textarea {
    -webkit-user-select: text;
    user-select: text;
}

.pricing-selector-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.pricing-selector-kicker {
    margin-top: 0;
}

.pricing-selector-copy {
    margin: 0 0 1.25rem;
    color: var(--purchase-text-body);
    line-height: 1.45;
}

.pricing-credentials-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pricing-credential-card {
    container: pricing-credential-card / inline-size;
    padding: 1rem;
    border: 1px solid var(--purchase-border);
    border-radius: 8px;
    background: rgba(84, 28, 89, 0.05);
}

.pricing-credential-card.is-requirement-highlighted {
    animation: pricing-credential-attention 1s ease-in-out;
}

.pricing-credential-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.pricing-credential-copy {
    flex: 0 0 50%;
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
}

.pricing-credential-title {
    margin: 0;
    font-size: 1rem;
    color: var(--purchase-text);
}

.pricing-credential-toggle,
.pricing-credential-submit,
.pricing-stepper-button {
    border: 0;
    border-radius: 6px;
    background: var(--purchase-control-bg);
    color: var(--purchase-text);
    font-weight: 700;
    transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}

.pricing-credential-toggle,
.pricing-credential-submit {
    min-height: 38px;
    padding: 0 .9rem;
    white-space: nowrap;
}

.pricing-credential-submit:disabled {
    background: #e8e4e7;
    color: #9d929b;
    cursor: not-allowed;
    opacity: .7;
}

.pricing-credential-submit.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    cursor: progress;
}

.pricing-credential-submit.is-loading::before {
    content: "";
    width: .9rem;
    height: .9rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: seatmap-button-spin .75s linear infinite;
}

.pricing-credential-cancel {
    min-height: 38px;
    padding: 0 .9rem;
    border: 1px solid var(--purchase-border-control);
    border-radius: 6px;
    background: var(--pillalas-white);
    color: var(--purchase-text-body);
    font-weight: 700;
}

.pricing-credential-cancel-icon {
    display: none;
}

.pricing-credential-card.is-editing .pricing-credential-toggle {
    display: none;
}

.pricing-credential-inline-form {
    display: none;
    flex: 1 1 100%;
    align-items: center;
    column-gap: .75rem;
    row-gap: 0;
    flex-wrap: wrap;
}

.pricing-credential-inline-form.is-visible {
    display: flex;
}

.pricing-credential-turnstile-slot {
    flex: 1 1 100%;
    width: 100%;
}

.pricing-credential-turnstile-status {
    display: none;
    margin: 0 0 .55rem;
    color: var(--purchase-text);
    font-size: .88rem;
    font-weight: 700;
}

.pricing-credential-turnstile-status.is-visible {
    display: block;
}

.pricing-credential-turnstile-slot [data-vuelve-turnstile] {
    max-width: 420px;
}

.pricing-credential-turnstile-slot.is-interactive {
    margin-top: .75rem;
}

.pricing-credential-card[data-credential-id="vuelve"].is-editing .pricing-credential-copy {
    display: none;
}

.pricing-modal-alert::before {
    content: "\f33a";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    font-size: 1.35rem;
    line-height: 1;
    color: #c4385c;
}

.pricing-credential-inline-input {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 40px;
    padding: .55rem .7rem;
    border: 1px solid var(--purchase-border-control);
    border-radius: 6px;
    background: var(--pillalas-white);
    color: var(--purchase-text);
}

.pricing-credential-list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .85rem;
}

.pricing-credential-list:empty {
    display: none;
}

.pricing-credential-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .55rem;
    border: 1px solid var(--purchase-border);
    border-radius: 999px;
    background: rgba(84, 28, 89, 0.12);
    color: var(--purchase-text);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
}

.pricing-credential-pill-copy {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.pricing-credential-pill-copy.is-consumed {
    text-decoration: line-through;
    opacity: .6;
}

.pricing-credential-pill.is-duplicate-highlighted {
    animation: pricing-credential-attention .75s ease-in-out;
}

.pricing-credential-pill-detail {
    color: var(--purchase-text-muted);
    font-size: .75rem;
    font-weight: 600;
}

.pricing-credential-pill button {
    border: 0;
    background: transparent;
    color: var(--purchase-text-muted);
    padding: 0;
    line-height: 1;
    font-size: .9rem;
}

.pricing-selector-list {
    margin: 0 -1.5rem;
}

.pricing-option {
    --pricing-option-horizontal-padding: 1.5rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem 1.5rem;
}

.pricing-option:not(:last-child)::after {
    content: "";
    position: absolute;
    right: var(--pricing-option-horizontal-padding);
    bottom: 0;
    left: var(--pricing-option-horizontal-padding);
    height: 1px;
    background: var(--purchase-border);
}

.pricing-option:last-child {
    border-bottom: 0;
}

.pricing-option-main {
    flex: 1 1 auto;
    min-width: 0;
}

.pricing-option--with-requirements {
    align-items: flex-start;
}

.pricing-option-title {
    position: relative;
    z-index: 0;
    display: inline-block;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--purchase-text);
}

.pricing-option-title::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -.12em -.35em -.16em;
    border-radius: .2em;
    background: var(--pillalas-primary);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
}

.pricing-option-title.is-highlighted::after {
    animation: pricing-title-background 1.8s ease-out;
}

.pricing-option-title.is-highlighted {
    animation: pricing-title-color 1.8s ease-in-out;
}

.pricing-option-description {
    margin: .35rem 0 0;
    color: var(--purchase-text-muted);
    font-size: .86rem;
    line-height: 1.35;
    white-space: pre-line;
}

.pricing-option-requirements {
    position: relative;
    z-index: 0;
    display: inline-block;
    max-width: 100%;
    margin: 0;
    color: var(--purchase-text-muted);
    font-size: .86rem;
    font-weight: 400;
    line-height: 1.35;
}

.pricing-option-requirements::before {
    position: absolute;
    z-index: -1;
    inset: -.12em -.58em -.18em -.5em;
    background: linear-gradient(
        176deg,
        rgba(255, 245, 139, .55) 0%,
        rgba(255, 229, 45, .74) 22%,
        rgba(255, 239, 103, .64) 100%
    );
    clip-path: polygon(
        0 13%, 8% 7%, 24% 10%, 43% 3%, 61% 9%, 78% 4%, 100% 11%,
        98% 84%, 83% 92%, 66% 88%, 49% 96%, 28% 90%, 9% 95%, 2% 86%
    );
    content: "";
    opacity: 0;
    transform: rotate(-.9deg);
}

.pricing-option-requirements.is-highlighted::before {
    animation: pricing-requirements-highlight 1.8s ease-in-out;
}

.pricing-option-limits {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .45rem 0 0;
    color: var(--purchase-text-muted);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
}

.pricing-option-limits span {
    display: inline-flex;
    align-items: center;
}

.pricing-option-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
}

.pricing-option-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pricing-option-price {
    color: var(--purchase-text-body);
    white-space: nowrap;
}

.pricing-option-requirements-row {
    display: flex;
    justify-content: flex-start;
    margin-top: .35rem;
}

.pricing-option-price strong {
    font-size: 1.05rem;
    color: var(--purchase-text);
}

@keyframes pricing-requirements-highlight {
    0%, 100% {
        opacity: 0;
    }

    18%, 80% {
        opacity: 1;
    }
}

@keyframes pricing-credential-attention {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50% {
        transform: translateX(-3px);
    }

    20%, 40%, 60% {
        transform: translateX(3px);
    }

    70% {
        transform: translateX(-1.5px);
    }

    80% {
        transform: translateX(1.5px);
    }
}

@keyframes pricing-title-background {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    20%, 80% {
        opacity: 1;
        transform: scaleX(1);
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

@keyframes pricing-title-color {
    0%, 100% {
        color: var(--purchase-text);
    }

    20%, 80% {
        color: var(--pillalas-white);
    }
}

.pricing-stepper {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    opacity: 1;
}

.pricing-stepper.is-disabled {
    opacity: 1;
}

.pricing-stepper-button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.pricing-stepper-button:disabled {
    cursor: pointer;
    opacity: .45;
}

.pricing-stepper-button[aria-disabled="true"] {
    cursor: pointer;
    opacity: .45;
}

.pricing-stepper.is-disabled .pricing-stepper-value {
    color: var(--purchase-text-muted);
    opacity: .55;
}

.pricing-stepper-button.is-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.pricing-stepper-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    min-width: 30px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e1a1f;
}

.pricing-stepper-value-unit {
    color: var(--purchase-text-muted);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
}

.pricing-selector-submit-wrap {
    margin-top: 2.25rem;
}

.pricing-modal-copy {
    color: var(--purchase-text-body);
    font-size: .95rem;
    line-height: 1.5;
}

.pricing-modal-copy a {
    color: var(--pillalas-primary);
    text-decoration: none;
}

.pricing-modal-copy a:hover,
.pricing-modal-copy a:focus-visible {
    color: var(--pillalas-primary-dark);
    text-decoration: underline;
}

.pricing-modal-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.2rem;
}

.pricing-modal-field {
    display: grid;
    gap: .35rem;
}

.pricing-modal-field label {
    margin: 0;
    color: var(--purchase-text);
    font-size: .9rem;
    font-weight: 700;
}

.pricing-modal-field input {
    width: 100%;
    min-height: 44px;
    padding: .65rem .8rem;
    border: 1px solid var(--purchase-border-control);
    border-radius: 8px;
    background: var(--pillalas-white);
    color: var(--purchase-text);
}

.pricing-modal-alert {
    display: none;
    position: relative;
    padding: .9rem 1rem .9rem 3.3rem;
    border: 1px solid rgba(196, 56, 92, 0.18);
    border-radius: 8px;
    background: rgba(244, 56, 119, 0.08);
    color: #8d2246;
    font-size: .9rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pricing-modal-alert.is-visible {
    display: block;
}

.pricing-modal-submit {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .pricing-credential-card.is-requirement-highlighted {
        animation-duration: .01ms;
    }

    .pricing-option-requirements.is-highlighted::before {
        animation-duration: .01ms;
    }

    .pricing-option-title.is-highlighted::after,
    .pricing-option-title.is-highlighted {
        animation-duration: .01ms;
    }
}

@media (max-width: 767.98px) {
    .pricing-credentials-grid {
        grid-template-columns: 1fr;
    }

    .pricing-selector-card {
        padding: 0.75rem;
    }

    .pricing-selector-header {
        display: block;
    }

    .pricing-credential-head {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .8rem;
    }

    .pricing-credential-copy {
        flex: 1 1 auto;
        min-height: 0;
    }

    .pricing-selector-list {
        margin: 0 -1.1rem;
    }

    .pricing-option {
        --pricing-option-horizontal-padding: 1.1rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "title stepper"
            "price stepper"
            "requirements ."
            "description ."
            "limits limits";
        column-gap: .8rem;
        row-gap: .1rem;
        align-items: start;
        padding: 1.15rem 1.1rem;
    }

    .pricing-option:not(.pricing-option--with-requirements) {
        grid-template-areas: "title stepper"
            "price stepper"
            "description ."
            "limits limits";
    }

    .pricing-option-main,
    .pricing-option-actions {
        display: contents;
    }

    .pricing-option-controls {
        display: contents;
    }

    .pricing-option-title {
        grid-area: title;
    }

    .pricing-option-price {
        grid-area: price;
        margin-top: .05rem;
        font-size: .84rem;
    }

    .pricing-option-price strong {
        font-size: .95rem;
    }

    .pricing-stepper {
        grid-area: stepper;
        align-self: start;
        justify-self: end;
    }

    .pricing-option-requirements-row {
        grid-area: requirements;
        min-width: 0;
        margin-top: .35rem;
    }

    .pricing-option-description {
        grid-area: description;
        min-width: 0;
        margin-top: .2rem;
        overflow-wrap: anywhere;
    }

    .pricing-option-limits {
        grid-area: limits;
        margin-top: .45rem;
    }

    .pricing-credential-toggle {
        width: auto;
        flex: 0 0 auto;
        margin-top: 0;
    }
}

@container pricing-credential-card (max-width: 599.98px) {
    .pricing-credential-inline-form {
        column-gap: .5rem;
    }

    .pricing-credential-inline-input {
        flex: 1 1 0;
    }

    .pricing-credential-submit {
        padding-inline: .6rem;
    }

    .pricing-credential-cancel {
        width: 40px;
        padding-inline: 0;
        border: 0;
        background: var(--purchase-control-bg);
        color: var(--purchase-text);
        transition: background-color .18s ease, color .18s ease, opacity .18s ease;
    }

    .pricing-credential-cancel-label {
        display: none;
    }

    .pricing-credential-cancel-icon {
        display: inline;
        font-size: 1.25rem;
        line-height: 1;
    }
}

/* =========================================================
   05.3. Formulario y desglose de compra
   ========================================================= */

.checkout-breakdown-modal .modal-dialog {
    margin-top: 3.4rem;
}

.checkout-breakdown-modal .modal-content {
    position: relative;
    overflow: visible;
}

.checkout-breakdown-modal .modal-close-pillalas {
    position: absolute;
    top: calc(-2.9rem - 4px);
    right: 0;
}

.checkout-page {
    padding-bottom: 2rem;
}

.checkout-card {
    overflow: hidden;
}

.checkout-card-body {
    padding: 1.5rem;
}

.checkout-section-copy {
    color: var(--pillalas-dark);
    font-size: 1rem;
    line-height: 1.45;
}

.checkout-section-heading {
    margin-top: 0;
}

.checkout-breakdown-list {
    margin: 0 -1.5rem;
}

.checkout-breakdown-item,
.checkout-breakdown-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.5rem;
}

.checkout-breakdown-item {
    position: relative;
}

.checkout-breakdown-item + .checkout-breakdown-item::before,
.checkout-breakdown-item:last-of-type::after {
    content: "";
    position: absolute;
    top: 0;
    right: 1.5rem;
    left: 1.5rem;
    border-top: 1px solid var(--purchase-border);
}

.checkout-breakdown-item:last-of-type::after {
    top: auto;
    bottom: 0;
    border-top: 0;
    border-bottom: 1px solid var(--purchase-border);
}

.checkout-breakdown-item-leading {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.checkout-breakdown-item-icon {
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--purchase-accent-soft);
    color: var(--purchase-accent);
    font-size: 1.02rem;
    line-height: 1;
}

.checkout-breakdown-item-icon--product {
    background: var(--purchase-accent-soft);
    color: var(--purchase-accent);
    font-size: 1.24rem;
}

.checkout-breakdown-item-main {
    min-width: 0;
    flex: 1 1 auto;
}

.checkout-breakdown-item-title {
    margin: 0;
    color: var(--purchase-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.checkout-breakdown-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .35rem;
    color: var(--purchase-text-muted);
    font-size: .86rem;
    font-weight: 400;
    line-height: 1.35;
}

.checkout-breakdown-item-meta span {
    display: inline-flex;
    align-items: center;
}

.checkout-breakdown-item-amount,
.checkout-breakdown-total-amount {
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
    color: var(--purchase-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.checkout-breakdown-total {
    width: auto;
    max-width: none;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--pillalas-white);
    color: var(--purchase-text);
    font-weight: 700;
}

.checkout-breakdown-total-label {
    margin: 0;
    color: inherit;
    font-size: 1.05rem;
    text-transform: uppercase;
}

.checkout-breakdown-total-amount {
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 700;
}

.checkout-price-note-copy {
    margin: .5rem 0 0;
    color: var(--pillalas-dark);
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
}

.checkout-price-note {
    text-align: left;
}

.checkout-price-note-guarantee {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .1rem .72rem;
    border: .5px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    background: var(--pillalas-dark);
    color: var(--pillalas-white);
    font-size: .9rem;
    font-weight: 900;
    line-height: 1.5;
    text-transform: uppercase;
    vertical-align: middle;
    box-shadow: 0 3px 8px var(--pillalas-border-emphasis);
}

.checkout-price-note-icon {
    flex: 0 0 auto;
    margin-right: .35rem;
    color: var(--purchase-guarantee-accent);
    font-size: 1.2rem;
    line-height: 1;
}

.checkout-price-note-guarantee-label {
    display: inline-block;
    transform: translateY(1px);
}

.checkout-price-note-detail {
    margin-left: .55rem;
    vertical-align: middle;
}

.checkout-inline-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pillalas-primary);
}

.checkout-price-note-guarantee-trigger {
    cursor: pointer;
}

.checkout-guarantee-modal .modal-dialog {
    max-width: 520px;
}

.checkout-legal-modal .modal-dialog {
    margin-top: 3.4rem;
}

.checkout-legal-modal .modal-content {
    position: relative;
    overflow: visible;
}

.checkout-legal-modal .modal-close-pillalas {
    position: absolute;
    top: calc(-2.9rem - 4px);
    right: 0;
}

.checkout-legal-modal-title {
    margin: 0 0 1rem;
    color: var(--pillalas-dark);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
}

.checkout-guarantee-modal-body {
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
}

.checkout-guarantee-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .9rem;
    color: var(--purchase-guarantee-accent);
    font-size: 4rem;
    line-height: 1;
}

.checkout-guarantee-modal-title {
    margin: 0 0 .75rem;
    color: var(--pillalas-dark);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.checkout-guarantee-modal-copy {
    margin: 0 0 1.25rem;
    color: var(--pillalas-dark);
    font-size: 1rem;
    line-height: 1.55;
}

.checkout-cinema-notice-modal .checkout-cinema-notice-body {
    text-align: left;
}

.checkout-cinema-notice-modal .checkout-guarantee-modal-title {
    text-align: center;
}

.checkout-cinema-notice-copy {
    max-height: min(60vh, 28rem);
    margin: 0 0 .625rem;
    padding: 1.2rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(22, 34, 48, .12);
    border-radius: 14px;
    background: rgba(22, 34, 48, .035);
    color: var(--pillalas-dark);
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.checkout-cinema-notice-copy--scrollable {
    scrollbar-gutter: stable;
}

.checkout-cinema-notice-copy:focus-visible {
    outline: 3px solid var(--pillalas-primary);
    outline-offset: 3px;
}

.contact-privacy-check.checkout-cinema-notice-silence-option {
    align-items: center;
    margin: .75rem 0 .625rem;
    padding: .5rem 0;
    color: var(--pillalas-dark);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}

.contact-privacy-check.checkout-cinema-notice-silence-option .form-check-input {
    flex: 0 0 auto;
    margin-top: 0;
    accent-color: var(--pillalas-primary);
}

.checkout-cinema-notice-error {
    margin: 0 0 .8rem;
    color: #a11c2b;
    font-size: .9rem;
}

.checkout-guarantee-modal .seatmap-buy-button,
.checkout-guarantee-modal .seatmap-buy-button:hover:not(:disabled) {
    width: 100%;
    box-shadow: none;
}

.checkout-email-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.checkout-email-field {
    display: grid;
    gap: .35rem;
}

.checkout-email-field label {
    margin: 0;
    color: var(--purchase-text);
    font-size: .9rem;
    font-weight: 700;
}

.checkout-email-field input {
    width: 100%;
    min-height: 44px;
    padding: .65rem .8rem;
    border: 1px solid var(--purchase-border-control);
    border-radius: 8px;
    background: var(--pillalas-white);
    color: var(--purchase-text);
}

.checkout-email-actions {
    padding-top: .25rem;
}

.checkout-email-actions .seatmap-buy-button {
    width: 100%;
}

.checkout-privacy-check {
    padding: .25rem 0 0;
}

.checkout-privacy-check .form-check-label {
    color: var(--pillalas-dark);
    font-size: 1rem;
    line-height: 1.5;
}

.checkout-privacy-copy {
    min-width: 0;
}

.checkout-privacy-links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .85rem;
    margin-top: .2rem;
}

.checkout-breakdown-modal-grid {
    display: grid;
    gap: .75rem;
}

.checkout-breakdown-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(92px, .7fr));
    gap: .85rem;
    align-items: start;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--purchase-border);
    color: var(--purchase-text-muted);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.checkout-breakdown-modal-row {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(92px, .7fr));
    gap: .85rem;
    align-items: start;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--purchase-border-subtle);
    color: var(--purchase-text);
}

.checkout-breakdown-modal-row--last {
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--purchase-border-subtle);
}

.checkout-breakdown-modal-total {
    margin-top: -.75rem;
    display: grid;
    width: auto;
    max-width: none;
    grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(92px, .7fr));
    justify-content: flex-end;
    align-items: center;
    gap: .85rem;
    padding: 1rem 0;
    border: 0;
    border-radius: 0;
    background: var(--pillalas-white);
    color: var(--purchase-text);
    font-weight: 700;
    justify-self: stretch;
}

.checkout-breakdown-modal-total-label {
    grid-column: 1 / 4;
    justify-self: end;
    font-size: 1.05rem;
    text-transform: uppercase;
}

.checkout-breakdown-modal-label {
    min-width: 0;
}

.checkout-breakdown-modal-label strong,
.checkout-breakdown-modal-label span {
    display: block;
}

.checkout-breakdown-modal-label strong {
    font-size: .95rem;
    text-transform: uppercase;
}

.checkout-breakdown-modal-label span {
    margin-top: .2rem;
    color: var(--purchase-text-muted);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
}

.checkout-breakdown-modal-amount {
    align-self: center;
    justify-self: center;
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
}

.checkout-breakdown-modal-head .checkout-breakdown-modal-amount {
    font-size: inherit;
    font-weight: inherit;
}

.checkout-breakdown-modal-head-unit {
    white-space: nowrap;
}

.checkout-breakdown-modal-total .checkout-breakdown-modal-amount {
    grid-column: 4;
    justify-self: center;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: right;
}

.checkout-breakdown-modal-note {
    margin: .75rem 0 0;
    color: var(--pillalas-text-detail);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .checkout-price-note {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .checkout-price-note-copy {
        order: 1;
        margin: 0;
    }

    .checkout-price-note-guarantee {
        order: 2;
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    .checkout-breakdown-modal-note {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
    }

    .checkout-breakdown-modal-note .checkout-price-note-guarantee {
        order: 1;
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: none;
    }

    .checkout-breakdown-modal-note .checkout-price-note-detail {
        order: 2;
        display: block;
        margin-left: 0;
    }

    .checkout-price-note {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
    }

    .checkout-price-note-copy {
        order: 1;
        margin: 0;
    }

    .checkout-price-note-guarantee {
        order: 2;
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: none;
    }

    .checkout-card-body {
        padding: 0.75rem;
    }

    .checkout-breakdown-list {
        margin: 0 -1.1rem;
    }

    .checkout-breakdown-item,
    .checkout-breakdown-total {
        padding: 1rem 1.1rem;
    }

    .checkout-breakdown-item-amount {
        align-self: flex-start;
    }

    .checkout-breakdown-item + .checkout-breakdown-item::before,
    .checkout-breakdown-item:last-of-type::after {
        right: 1.1rem;
        left: 1.1rem;
    }

    .checkout-breakdown-total {
        width: auto;
        max-width: none;
        margin: 0;
        justify-content: flex-end;
        padding: .9rem 1rem;
    }

    .checkout-breakdown-modal-grid {
        gap: .65rem;
    }

    .checkout-breakdown-modal-head {
        grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(52px, .72fr));
        gap: .45rem;
        padding-bottom: .6rem;
        font-size: .68rem;
        line-height: 1.2;
    }

    .checkout-breakdown-modal-row {
        grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(52px, .72fr));
        gap: .45rem;
        padding-bottom: .65rem;
    }

    .checkout-breakdown-modal-head .checkout-breakdown-modal-amount {
        white-space: normal;
    }

    .checkout-breakdown-modal-head-unit {
        display: none;
    }

    .checkout-breakdown-modal-label strong {
        font-size: .88rem;
        line-height: 1.25;
    }

    .checkout-breakdown-modal-label span {
        font-size: .76rem;
        line-height: 1.3;
    }

    .checkout-breakdown-modal-amount {
        width: auto;
        display: block;
        font-size: .88rem;
    }

    .checkout-breakdown-modal-amount::before {
        content: none;
    }

    .checkout-breakdown-modal-total {
        margin-top: -.65rem;
        grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(52px, .72fr));
        gap: .45rem;
        justify-self: stretch;
        padding: .9rem 0;
    }
}

@media (max-width: 991.98px) {
    .pricing-credential-modal .modal-close-pillalas {
        top: -2.9rem;
    }

    .checkout-breakdown-modal .modal-close-pillalas {
        top: -2.9rem;
    }

    .checkout-legal-modal .modal-close-pillalas {
        top: -2.9rem;
    }

    .error-notice-modal--closable .modal-close-pillalas {
        top: -2.9rem;
    }
}

/* =========================================================
   05.4. Resumen, entradas e impresión
   ========================================================= */

.purchase-summary-page {
    padding-bottom: 4rem;
}

.purchase-summary-card-body {
    display: grid;
    gap: 0.5rem;
}

.purchase-summary-status-grid,
.purchase-summary-banners-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.purchase-summary-status-card {
    padding: 0;
    background: transparent;
    display: grid;
    gap: .85rem;
    justify-items: center;
    text-align: center;
}

.purchase-summary-status-card > .purchase-summary-status-qr {
    width: 100%;
    max-width: 240px;
    height: auto;
    border-radius: 1rem;
    background: var(--pillalas-white);
    padding: .5rem;
    box-shadow: 0 12px 30px var(--purchase-summary-border);
}

.purchase-summary-status-qr-frame {
    display: grid;
    justify-items: center;
    gap: 0;
    width: 100%;
    max-width: 240px;
    box-sizing: border-box;
    padding: .5rem .5rem .4rem;
    border-radius: 1rem;
    background: var(--pillalas-white);
    box-shadow: 0 12px 30px var(--purchase-summary-border);
}

.purchase-summary-status-qr-frame .purchase-summary-status-qr {
    display: block;
    width: 100%;
    height: auto;
}

.purchase-summary-status-qr-locator {
    margin: 0;
    color: #000;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1.15;
}

.purchase-summary-status-copy {
    display: grid;
    gap: .3rem;
    justify-items: center;
}

.purchase-summary-status-copy h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--purchase-summary-text);
}

.purchase-summary-status-copy p,
.purchase-summary-copy,
.purchase-summary-footnote {
    margin: 0;
    color: var(--purchase-summary-text-muted);
}

.purchase-summary-footnote {
    margin: .5rem 0 0;
    color: var(--pillalas-dark);
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
}

.purchase-summary-status-detail {
    color: var(--purchase-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.purchase-summary-localizador {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: rgba(241, 80, 119, 0.1);
    color: var(--purchase-summary-accent);
    font-weight: 700;
}

.purchase-summary-detail-hero {
    display: grid;
    gap: .5rem;
}

.purchase-summary-detail-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: 164px minmax(0, 1fr);
    align-items: start;
}

.purchase-summary-mobile-heading {
    display: none;
    min-width: 0;
}

.purchase-summary-poster {
    display: flex;
    max-width: 164px;
}

.purchase-summary-poster img,
.purchase-summary-banner {
    width: 100%;
    border-radius: 1rem;
}

.purchase-summary-poster img {
    height: 100%;
    object-fit: cover;
    aspect-ratio: 262 / 376;
}

.purchase-summary-meta {
    display: grid;
    gap: .85rem;
    align-content: start;
    min-width: 0;
}

.purchase-summary-meta .screening-summary-facts {
    margin: 0;
}

.purchase-summary-meta .screening-summary-fact {
    background: var(--pillalas-white);
    backdrop-filter: none;
}

.purchase-summary-meta .screening-summary-fact--schedule {
    background: transparent;
}

.purchase-summary-meta .screening-summary-fact dt {
    margin-bottom: .25rem;
}

.purchase-summary-meta-fact-title {
    grid-column: 1 / -1;
}

.purchase-summary-meta-fact-title dd {
    font-size: 1.2rem;
    line-height: 1.25;
}

.purchase-summary-meta .screening-summary-fact--compact {
    width: auto;
    min-width: 98px;
    justify-self: stretch;
}

.purchase-summary-meta .screening-summary-fact--compact dt,
.purchase-summary-meta .screening-summary-fact--compact dd {
    text-align: center;
}

.purchase-summary-meta .screening-summary-venue {
    align-items: flex-start;
}

.purchase-summary-meta .screening-summary-venue-copy {
    min-width: 0;
}

.purchase-summary-meta .screening-summary-venue-name {
    font-size: 1rem;
}

.purchase-summary-meta .screening-summary-venue-meta {
    font-size: .95rem;
}

.purchase-summary-meta .screening-summary-venue--hide-address .screening-summary-venue-address {
    display: none;
}

.purchase-summary-table-shell {
    margin: .35rem 0 0;
    border: 1px solid var(--purchase-border);
    border-radius: 1.25rem;
    background: var(--pillalas-white);
    overflow: hidden;
}

.purchase-summary-table {
    margin: 0;
    table-layout: fixed;
}

.purchase-summary-table col.purchase-summary-table-col-total {
    width: 120px;
}

.purchase-summary-table thead th {
    padding: .95rem 1.5rem;
    color: var(--pillalas-text-muted);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--purchase-border);
    background: var(--pillalas-white);
}

.purchase-summary-table tbody td {
    vertical-align: middle;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--purchase-border);
    border-bottom: 0;
}

.purchase-summary-table tbody tr:first-child td {
    border-top: 0;
}

.purchase-summary-breakdown-cell {
    padding-right: 1rem;
}

.purchase-summary-breakdown-cell .checkout-breakdown-item-leading {
    gap: .85rem;
}

.purchase-summary-breakdown-cell .checkout-breakdown-item-main {
    min-width: 0;
}

.purchase-summary-breakdown-amount {
    color: var(--purchase-text) !important;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.purchase-summary-vuelve-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--purchase-summary-text);
}

.purchase-summary-vuelve-list li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 calc(16.666667% - .708333rem);
    height: 5rem;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--pillalas-dark);
    border-radius: 14px;
    background: var(--pillalas-white);
    text-align: center;
}

.purchase-summary-vuelve-code-label {
    display: flex;
    flex: 1 1 50%;
    align-items: center;
    justify-content: center;
    min-height: 0;
    box-sizing: border-box;
    padding: .2rem;
    background: var(--pillalas-dark);
    color: var(--pillalas-white);
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1.15;
    text-transform: uppercase;
}

.purchase-summary-vuelve-code {
    display: flex;
    flex: 1 1 50%;
    align-items: center;
    justify-content: center;
    min-height: 0;
    box-sizing: border-box;
    padding: .2rem;
    color: var(--pillalas-dark);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.2;
}

.purchase-summary-vuelve-header {
    display: grid;
}

.purchase-summary-vuelve-box {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

.purchase-summary-vuelve-validity {
    margin: 0;
    color: var(--purchase-summary-text);
    line-height: 1.55;
}

.purchase-summary-vuelve-header .purchase-summary-copy,
.purchase-summary-vuelve-list {
    color: var(--pillalas-dark);
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
}

.purchase-summary-vuelve-validity {
    color: var(--pillalas-dark);
    font-size: 1rem;
    line-height: 1.45;
    text-align: center;
}

.purchase-summary-access-options-v2 {
    display: grid;
    gap: .75rem;
    margin-top: .5rem;
}

.purchase-summary-access-option-v2 {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--purchase-summary-border);
    border-radius: 1rem;
    background: var(--pillalas-white);
}

.purchase-summary-access-option-v2-mobile {
    border-color: rgba(241, 80, 119, .24);
    background: #fff5f8;
}

.purchase-summary-access-option-v2-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    background: transparent;
    color: var(--purchase-summary-accent);
    font-size: 2rem;
}

.purchase-summary-access-option-v2-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 .45rem;
    color: var(--purchase-summary-text);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.purchase-summary-access-option-v2-badge {
    display: inline-block;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: var(--pillalas-primary);
    color: #fff;
    font-size: .64rem;
    letter-spacing: .04em;
    line-height: 1.2;
}

.purchase-summary-access-option-v2-copy {
    margin: 0;
    color: var(--purchase-summary-text-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.purchase-summary-access-option-v2-copy + .purchase-summary-access-option-v2-copy {
    margin-top: .5rem;
}

.purchase-summary-access-option-v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .8rem;
}

.purchase-summary-access-option-v2-actions .seatmap-buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding-inline: 1.4rem;
    border-radius: .9rem;
    font-weight: 700;
    text-decoration: none;
}

.purchase-summary-access-accordion .accordion-item {
    border: 1px solid var(--purchase-summary-border);
    border-radius: 1rem;
    overflow: hidden;
}

.purchase-summary-access-accordion .accordion-item + .accordion-item {
    margin-top: .85rem;
}

.purchase-summary-access-accordion .accordion-button {
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--purchase-summary-text);
    background: var(--pillalas-white);
    box-shadow: none;
}

.purchase-summary-access-accordion .accordion-button:not(.collapsed) {
    background: rgba(241, 80, 119, 0.08);
    color: var(--purchase-summary-text);
}

.purchase-summary-access-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
    text-align: left;
}

.purchase-summary-access-heading-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    color: var(--purchase-summary-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.purchase-summary-access-heading-title {
    line-height: 1.3;
}

.purchase-summary-access-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.purchase-summary-access-content {
    display: grid;
    gap: 1rem;
}

.purchase-summary-access-panel {
    display: grid;
    gap: .75rem;
    padding: 1.15rem 1.2rem;
    border-radius: 1rem;
    border: 1px solid var(--purchase-summary-border);
    background: #f8fafc;
}

.purchase-summary-access-panel-title {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: var(--purchase-summary-text);
    font-weight: 700;
    line-height: 1.45;
}

.purchase-summary-access-panel-title i {
    color: var(--purchase-summary-accent);
    font-size: 1rem;
    margin-top: .15rem;
    flex-shrink: 0;
}

.purchase-summary-access-panel-copy {
    margin: 0;
    color: var(--purchase-summary-text-muted);
    line-height: 1.65;
}

.purchase-summary-access-localizador-box {
    display: flex;
    justify-content: center;
    padding-top: .25rem;
}

.purchase-summary-access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.purchase-summary-status-card .purchase-summary-access-actions {
    justify-content: center;
}

.purchase-summary-access-panel .purchase-summary-access-actions {
    justify-content: flex-start;
}

.purchase-summary-access-actions .seatmap-buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    flex: 0 0 auto;
    gap: .5rem;
    min-height: 46px;
    padding-inline: 1.4rem;
    border-radius: .9rem;
    font-weight: 700;
    text-decoration: none;
}

.google-wallet-save-link,
.apple-wallet-save-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.google-wallet-save-link img,
.apple-wallet-save-link img {
    display: block;
    max-width: 100%;
    height: 55px;
    width: auto;
}

.purchase-summary-wallet-actions {
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.purchase-summary-wallet-button-group {
    display: grid;
    justify-items: center;
    gap: .75rem;
    width: 100%;
    max-width: 240px;
    box-sizing: border-box;
    margin-top: .55rem;
}

.purchase-summary-banner-card {
    display: block;
    border-radius: 1rem;
    overflow: hidden;
}

.purchase-summary-print-logo {
    display: none;
    margin-bottom: 1.25rem;
    width: fit-content;
    margin-inline: auto;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.5rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--pillalas-primary), var(--pillalas-primary-dark));
    box-shadow: 0 8px 24px var(--pillalas-border-control);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.purchase-summary-print-logo img {
    width: 240px;
    max-width: 100%;
    height: auto;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    header,
    footer,
    .site-footer,
    .no-print,
    .purchase-summary-print-hide {
        display: none !important;
    }

    .purchase-summary-page {
        padding-bottom: 0;
    }

    .purchase-summary-page .container > *:not(.purchase-summary-print-keep) {
        display: none !important;
    }

    .purchase-summary-print-keep {
        display: block !important;
    }

    .purchase-summary-print-logo {
        display: flex !important;
    }
}

@media (max-width: 991.98px) {
    .purchase-summary-vuelve-list li {
        flex-basis: calc(33.333333% - .566667rem);
    }
}

@media (min-width: 768px) {
    .purchase-summary-access-option-v2-actions .purchase-summary-access-print-button {
        width: auto;
        flex: 0 0 auto;
        min-height: 38px;
        padding: .55rem 1rem;
        border-radius: .75rem;
        font-size: .85rem;
    }
}

@media (max-width: 767.98px) {
    .purchase-summary-vuelve-list li {
        flex-basis: calc(50% - .425rem);
    }

    .purchase-summary-detail-layout {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 1rem;
    }

    .purchase-summary-poster {
        max-width: 92px;
    }

    .purchase-summary-poster img {
        border-radius: 14px;
    }

    .purchase-summary-meta {
        gap: .75rem;
    }

    .purchase-summary-mobile-heading {
        display: block;
    }

    .purchase-summary-mobile-heading .screening-summary-title {
        font-size: 1.2rem;
        line-height: 1.15;
    }

    .purchase-summary-table,
    .purchase-summary-table tbody,
    .purchase-summary-table tr,
    .purchase-summary-table td {
        display: block;
        width: 100%;
    }

    .purchase-summary-table colgroup {
        display: none;
    }

    .purchase-summary-table thead {
        display: block;
    }

    .purchase-summary-table thead tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        border-bottom: 1px solid var(--purchase-border);
    }

    .purchase-summary-table thead th {
        display: block;
        width: auto;
        padding: .8rem 1.1rem;
        border: 0;
        font-size: .72rem;
    }

    .purchase-summary-table-shell {
        margin: .35rem 0 0;
        border: 1px solid var(--pillalas-border-emphasis);
        border-radius: 18px;
        background: var(--pillalas-white);
    }

    .purchase-summary-table tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: .75rem;
        row-gap: .4rem;
        align-items: start;
        padding: 1rem 1.1rem;
    }

    .purchase-summary-table tbody tr + tr {
        border-top: 0;
    }

    .purchase-summary-table tbody tr + tr::before {
        content: "";
        position: absolute;
        top: 0;
        right: 1.1rem;
        left: 1.1rem;
        border-top: 1px solid var(--purchase-border);
    }

    .purchase-summary-table tbody td {
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    .purchase-summary-breakdown-cell {
        grid-column: 1;
        grid-row: 1;
        padding-right: 0;
    }

    .purchase-summary-breakdown-cell .checkout-breakdown-item-title,
    .purchase-summary-breakdown-cell .checkout-breakdown-item-meta {
        overflow-wrap: anywhere;
    }

    .purchase-summary-breakdown-amount {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        gap: .15rem;
        margin: 0;
        text-align: right;
        font-size: 1.05rem;
    }

    .purchase-summary-access-option-v2 {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: .7rem;
        text-align: center;
    }

    .purchase-summary-access-option-v2-content {
        width: 100%;
    }

    .purchase-summary-access-option-v2-title {
        flex-direction: column;
        justify-content: center;
        gap: .45rem;
        text-align: center;
    }

    .purchase-summary-access-option-v2-copy {
        text-align: center;
    }

    .purchase-summary-access-option-v2-actions {
        justify-content: center;
    }
}

/* =========================================================
   05.5. Comprobación de compra
   ========================================================= */

.compra-comprobacion-turnstile-slot {
    width: 100%;
}

.compra-comprobacion-submit {
    min-width: 11rem;
    color: var(--pillalas-white);
    background: var(--pillalas-primary);
}

.compra-comprobacion-submit:hover:not(:disabled) {
    background: var(--pillalas-primary-dark);
}

.compra-comprobacion-submit:disabled {
    cursor: not-allowed;
    background: rgba(226, 27, 95, .5);
    color: rgba(255, 255, 255, .88);
    opacity: 1;
}

.error-notice-modal.comprueba-compra-confirmacion .modal-pillalas-body {
    text-align: center;
}

.error-notice-modal.comprueba-compra-confirmacion [data-error-notice-title] {
    text-transform: uppercase;
}

.error-notice-modal.comprueba-compra-confirmacion [data-error-notice-body-title] {
    text-transform: uppercase;
}

.error-notice-modal.comprueba-compra-confirmacion .comprueba-compra-dato {
    color: var(--pillalas-primary-dark);
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .compra-comprobacion-submit {
        width: 100%;
    }
}

/* =========================================================
   05.6. Errores de venta y pago
   ========================================================= */

.remote-sale-error-card {
    padding: 3rem 1.5rem;
    text-align: center;
}

.remote-sale-error-icon {
    display: inline-block;
    margin-bottom: .9rem;
    color: var(--pillalas-primary);
    font-size: 3rem;
    line-height: 1;
}

.remote-sale-error-title {
    margin: 0 0 .4rem;
    color: var(--pillalas-dark);
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.remote-sale-error-copy {
    max-width: 720px;
    margin: 0 auto;
    padding-top: .75rem;
}

.remote-sale-error-copy a:not(.btn) {
    color: var(--pillalas-primary);
    text-decoration: none;
}

.remote-sale-error-copy a:not(.btn):hover,
.remote-sale-error-copy a:not(.btn):focus-visible {
    color: var(--pillalas-primary-dark);
    text-decoration: underline;
}

.remote-sale-error-highlight {
    color: var(--pillalas-dark);
}

/* El bloque de error reutiliza la tarjeta FAQ con un margen interior superior propio. */

.remote-sale-error-copy.faq-detail-card {
    padding-top: .75rem;
}

/* Página 503 independiente: conserva la tarjeta, sin cabecera ni pie. */
.maintenance-page {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    place-items: center;
    padding: 2rem clamp(1rem, 3.7vw, 3.5rem);
    background: #faf5f9;
}

.maintenance-page .maintenance-content {
    width: min(100%, 560px);
    margin: 0 auto;
}

.maintenance-page .maintenance-logo {
    display: block;
    width: min(160px, 56vw);
    height: auto;
    margin: 0 auto 1rem;
}

.maintenance-content .remote-sale-error-card {
    width: min(100%, 420px);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 1rem;
}

.maintenance-content .remote-sale-error-icon {
    margin-bottom: .35rem;
    font-size: 1.15rem;
}

.maintenance-content .remote-sale-error-title {
    font-size: .95rem;
}

.maintenance-content .remote-sale-error-copy,
.maintenance-content .remote-sale-error-copy > div {
    font-size: .75rem;
    line-height: 1.35;
}

@media (max-width: 575.98px) {
    .payment-ko-actions .btn-pillalas {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    /* Las tarjetas combinadas conservan la prioridad del espaciado común en móvil. */

    .remote-sale-error-card.pillalas-content-card {
        padding: var(--pillalas-content-padding-mobile);
    }

    .remote-sale-error-copy.faq-detail-card {
        padding-top: 1.1rem;
    }

    .maintenance-page {
        padding: 1.5rem 1rem;
    }

    .maintenance-logo {
        margin-bottom: 1.5rem;
    }

    .maintenance-content .remote-sale-error-card {
        min-height: 150px;
        padding: .85rem .7rem;
    }
}

/* =========================================================
   06. Páginas informativas
   ========================================================= */

/* =========================================================
   06.1. Contenido legal y textos informativos
   ========================================================= */

.legal-content,
.faq-answer,
.faq-detail-answer {
    color: var(--pillalas-text-body);
    font-size: 1rem;
    line-height: 1.7;
}

.faq-answer,
.faq-detail-answer {
    color: var(--pillalas-dark);
}

.legal-content {
    color: var(--pillalas-dark);
}

.legal-content .cookie-section-heading {
    margin-top: 1.75rem;
}

.legal-content a,
.faq-answer a,
.faq-detail-answer a {
    color: var(--pillalas-primary);
    text-decoration: none;
}

.legal-content code {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
}

.legal-content a:hover,
.faq-answer a:hover,
.faq-detail-answer a:hover,
.legal-content a:focus-visible,
.faq-answer a:focus-visible,
.faq-detail-answer a:focus-visible {
    color: var(--pillalas-primary-dark);
    text-decoration: underline;
}

/* =========================================================
   06.2. Preguntas frecuentes
   ========================================================= */

.faq-detail-title,
.contact-result-card h1 {
    color: var(--pillalas-dark);
    font-weight: 900;
    letter-spacing: -.035em;
}

.faq-topic-list {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.faq-topic {
    border: 1px solid var(--pillalas-border-emphasis);
    border-radius: 999px;
    background: var(--pillalas-white);
    color: var(--pillalas-dark);
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 800;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.faq-topic:hover,
.faq-topic.active {
    border-color: var(--pillalas-primary);
    background: var(--pillalas-primary);
    color: var(--pillalas-white);
}

.faq-topic-select {
    display: none;
    min-height: 48px;
    border: 1px solid var(--pillalas-border-strong);
    border-radius: 14px;
    color: var(--pillalas-dark);
    font-weight: 800;
    box-shadow: none;
}

.faq-topic-select:focus {
    border-color: var(--pillalas-primary);
    box-shadow: var(--pillalas-focus-ring);
}

.faq-accordion {
    display: grid;
    gap: .75rem;
}

.faq-item {
    overflow: hidden;
    border: 1px solid var(--pillalas-border);
    border-radius: 18px;
    background: var(--pillalas-white);
}

.faq-item .accordion-button {
    gap: .75rem;
    padding: 1rem 1.15rem;
    background: var(--pillalas-white);
    color: var(--pillalas-dark);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
    box-shadow: none;
}

.faq-item .accordion-button:not(.collapsed) {
    background: var(--pillalas-dark);
    color: var(--pillalas-white);
}

.faq-item .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.faq-item .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.faq-item .accordion-button::after {
    flex: 0 0 auto;
}

.faq-item .accordion-body {
    padding: 1.1rem 1.15rem 1.2rem;
    border-top: 1px solid var(--pillalas-border-subtle);
}

.faq-answer,
.faq-detail-answer {
    font-size: 1rem;
    line-height: 1.65;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.faq-empty,
.contact-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
}

.faq-empty i,
.contact-empty-state i {
    color: var(--pillalas-primary);
    font-size: 2rem;
}

.faq-empty h2,
.contact-empty-state h2 {
    margin: .75rem 0 .35rem;
    color: var(--pillalas-dark);
    font-size: 1.25rem;
    font-weight: 900;
}

.faq-empty p,
.contact-empty-state p {
    margin: 0;
    color: var(--pillalas-text-muted);
    font-weight: 600;
}

.faq-detail-card {
    padding: 1.75rem;
}

.faq-detail-title {
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.15;
}

@media (hover: none) and (pointer: coarse) {
    .faq-topic {
        touch-action: manipulation;
        -webkit-tap-highlight-color: var(--pillalas-primary-translucent-strong);
    }

    .faq-topic:hover {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .faq-topic-select {
        display: block;
    }

    .faq-item .collapsing {
        transition: height .16s cubic-bezier(.22, .8, .22, 1);
    }

    .faq-topic-list {
        display: none;
    }

    .faq-item .accordion-button {
        padding: .9rem 1rem;
        font-size: .95rem;
    }

    .faq-item .accordion-body {
        padding: 1rem;
    }

    .faq-detail-card {
        padding: 1.1rem;
    }

    .faq-layout {
        grid-template-columns: 1fr;
    }

    /* Las tarjetas combinadas conservan la prioridad del espaciado común en móvil. */

    .faq-detail-card.pillalas-content-card,
    .faq-empty.pillalas-content-card,
    .contact-empty-state.pillalas-content-card {
        padding: var(--pillalas-content-padding-mobile);
    }

    .faq-detail-title.pillalas-title {
        font-size: 1.45rem;
    }
}

/* =========================================================
   06.3. Manual de compra
   ========================================================= */

.manual-guide-layout {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.manual-guide-selector-card {
    display: none;
    margin-bottom: 1rem;
}

.manual-guide-selector {
    display: block;
}

.manual-guide-nav-card {
    position: sticky;
    top: 1rem;
    padding: 1.1rem;
}

.manual-guide-nav-header {
    margin-bottom: .9rem;
}

.manual-guide-nav-kicker {
    display: inline-block;
    color: var(--pillalas-primary);
    font-weight: 900;
    text-transform: uppercase;
}

.manual-guide-nav-header h2 {
    margin: 0;
    color: var(--pillalas-dark);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.15;
}

.manual-guide-nav-list {
    display: grid;
    gap: .25rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.manual-guide-nav-item {
    min-width: 0;
    margin: 0;
    padding-left: 0;
}

/* manual-compra.html genera estos niveles a partir de item.indice_level. */

.manual-guide-nav-item--level-1 {
    padding-left: .8rem;
}

.manual-guide-nav-item--level-2 {
    padding-left: 1.6rem;
}

.manual-guide-nav-item--level-3 {
    padding-left: 2.4rem;
}

.manual-guide-nav-item--level-4 {
    padding-left: 3.2rem;
}

.manual-guide-nav-link {
    display: block;
    min-width: 0;
    padding: .18rem 0;
    color: var(--pillalas-dark);
    text-decoration: none;
    transition: color .15s ease;
}

.manual-guide-nav-link:hover {
    color: var(--pillalas-primary);
}

.manual-guide-nav-title {
    display: block;
    min-width: 0;
    color: inherit;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.manual-guide-content-card {
    padding: 1.4rem;
}

.manual-guide-section {
    scroll-margin-top: 1rem;
}

.manual-guide-section + .manual-guide-section {
    margin-top: 2.6rem;
    padding-top: 2.1rem;
}

.manual-guide-section-header {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
    margin-bottom: .95rem;
}

.manual-guide-section-header h2 {
    margin: 0;
    color: var(--pillalas-dark);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.15;
}

.manual-guide-body {
    color: var(--pillalas-dark);
    font-size: 1rem;
    line-height: 1.7;
}

.manual-guide-body .alert.d-flex {
    align-items: center !important;
    gap: .75rem !important;
}

.manual-guide-body .manual-alert-copy {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.manual-guide-body .alert.d-flex > .bi,
.manual-guide-body .manual-alert-copy > .bi {
    flex: 0 0 auto;
    margin-top: 0 !important;
    font-size: 1.8rem;
    line-height: 1.5;
    opacity: .82;
}

.manual-alert-copy p {
    margin: 0;
}

.manual-redsys-highlight {
    color: #b36b00;
    font-weight: 800;
}

.manual-guide-help-highlight {
    color: var(--pillalas-primary);
}

.manual-wallet-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin: .75rem 0 1rem;
}

.manual-guide-body img.manual-wallet-button {
    width: auto;
    max-width: min(100%, 190px);
    height: 52px;
    border-radius: 0;
}

.manual-guide-body img.manual-pass-disabled-example {
    display: block;
    width: auto;
    max-width: min(100%, 120px);
    height: auto;
    border-radius: 0;
    margin: .7rem auto 0;
}

.manual-guide-body .manual-pass-disabled-caption {
    margin: .25rem 0 0;
    text-align: center;
    font-size: .9rem;
    line-height: 1.35;
}

.manual-guide-body a {
    color: var(--pillalas-primary);
    text-decoration: none;
}

.manual-guide-body a:hover,
.manual-guide-body a:focus-visible {
    color: var(--pillalas-primary-dark);
    text-decoration: underline;
}

.manual-guide-body > :first-child {
    margin-top: 0;
}

.manual-guide-body > :last-child {
    margin-bottom: 0;
}

.manual-inline-pricing-controls {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    margin: 0 .18rem;
    vertical-align: .12em;
    white-space: nowrap;
}

.manual-inline-pricing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.4rem;
    width: 1.4rem;
    height: 1.4rem;
    border: 0;
    border-radius: .35rem;
    font-size: .82rem;
    line-height: 1;
}

.manual-inline-pricing-button--minus,
.manual-inline-pricing-button--plus {
    background: var(--purchase-control-bg);
    color: var(--purchase-text);
}

.manual-inline-pricing-button--minus-disabled,
.manual-inline-pricing-button--plus-disabled {
    background: var(--purchase-control-bg);
    color: var(--purchase-text);
    opacity: .45;
}

.manual-guide-body img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.manual-device-help img {
    display: block;
    width: 100%;
    margin: 0 auto 1rem;
    border-radius: 0;
}

.manual-device-help--mobile {
    display: block;
}

.manual-device-help--desktop {
    display: none;
}

@media (min-width: 992px) {
    .manual-device-help--mobile {
        display: none;
    }

    .manual-device-help--desktop {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .manual-guide-selector-card {
        display: block;
    }

    .manual-guide-nav-card {
        display: none;
    }

    .manual-guide-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .manual-guide-content-card {
        padding: 1rem;
    }

    .manual-guide-section + .manual-guide-section {
        margin-top: 2rem;
        padding-top: 1.7rem;
    }

    .manual-guide-section-header {
        gap: .7rem;
    }

    .manual-guide-section-header h2 {
        font-size: 1.15rem;
    }

    /* Las tarjetas combinadas conservan la prioridad del espaciado común en móvil. */

    .manual-guide-nav-card.pillalas-content-card,
    .manual-guide-content-card.pillalas-content-card {
        padding: var(--pillalas-content-padding-mobile);
    }
}

/* =========================================================
   06.4. Contacto
   ========================================================= */

.contact-label {
    display: block;
    margin: 0 0 .35rem;
    color: var(--pillalas-dark);
    font-size: .88rem;
    font-weight: 600;
}

.contact-select,
.contact-control {
    border: 1px solid var(--pillalas-border-input);
    border-radius: 14px;
    color: var(--pillalas-dark);
    box-shadow: none;
}

.contact-select {
    min-height: 48px;
}

.contact-control {
    min-height: 46px;
}

.contact-control::placeholder {
    color: var(--pillalas-text-soft);
    opacity: .72;
}

.contact-control:focus,
.contact-select:focus {
    border-color: var(--pillalas-primary);
    box-shadow: var(--pillalas-focus-ring);
}

.contact-topic-panel {
    margin-bottom: 1.25rem;
}

.contact-notice,
.contact-faq-suggestions {
    padding: 1.1rem;
    border-radius: 18px;
    background: var(--pillalas-soft);
}

.contact-notice h2,
.contact-faq-suggestions h2 {
    margin: 0 0 .65rem;
    color: var(--pillalas-dark);
    font-size: 1.15rem;
    font-weight: 900;
}

.contact-notice p,
.contact-faq-suggestions p {
    color: var(--pillalas-text-detail);
    font-size: 1rem;
    line-height: 1.6;
}

.contact-faq-list {
    display: grid;
    gap: .65rem;
    margin: 1rem 0;
}

.contact-faq-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--pillalas-border);
    border-radius: 16px;
    background: var(--pillalas-white);
    color: var(--pillalas-dark);
    font-weight: 800;
    text-decoration: none;
}

.contact-faq-link:hover {
    background: var(--pillalas-dark);
    color: var(--pillalas-white);
}

.contact-faq-link i {
    flex: 0 0 auto;
    color: var(--pillalas-dark);
}

.contact-faq-link:hover i {
    color: var(--pillalas-white);
}

.contact-after-faq {
    padding-top: .25rem;
}

.contact-privacy-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: 1rem 0;
    color: var(--pillalas-dark);
}

.contact-privacy-check .form-check-input {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .16rem;
    border: 1px solid var(--pillalas-border-input);
    background-color: var(--pillalas-white);
    box-shadow: none;
}

.contact-privacy-check .form-check-input:focus {
    border-color: var(--pillalas-primary);
    box-shadow: var(--pillalas-focus-ring);
}

.contact-privacy-check .form-check-input:checked {
    background-color: var(--pillalas-primary);
    border-color: var(--pillalas-primary);
}

.contact-privacy-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pillalas-primary);
}

.contact-submit {
    min-height: 48px;
    padding-inline: 1.6rem;
}

.contact-turnstile-status {
    display: none;
    margin: 0 0 .55rem;
    color: var(--pillalas-dark);
    font-size: .88rem;
    font-weight: 700;
}

.contact-turnstile-status.is-visible {
    display: block;
}

.contact-turnstile {
    max-width: 420px;
}

.contact-turnstile:empty {
    margin-bottom: 0 !important;
}

.contact-turnstile:not(.is-interactive) {
    height: 0;
    overflow: hidden;
}

.contact-turnstile.is-interactive {
    margin-top: -.5rem;
    margin-bottom: .5rem;
}

.contact-form-layout {
    margin-top: 1.5rem;
}

.contact-form-card {
    padding: 1.5rem;
}

.contact-result-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 28px;
    text-align: center;
}

.contact-result-face {
    margin: 0 auto 1.25rem;
    color: var(--pillalas-primary);
    line-height: 1;
}

.contact-result-face i {
    font-size: 4.8rem;
    line-height: 1;
}

.contact-result-face-ok {
    color: #22c55e;
}

.contact-result-card h1 {
    margin: .35rem 0 .85rem;
    font-size: 2rem;
}

.contact-result-card p {
    max-width: 560px;
    margin: 0 auto .85rem;
    color: var(--pillalas-text-muted);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.55;
}

.contact-result-card strong {
    color: var(--pillalas-dark);
    font-weight: 900;
}

.contact-result-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

@media (hover: none) and (pointer: coarse) {
    .contact-privacy-link,
    .contact-faq-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .contact-faq-link {
        display: flex;
    }

    .contact-privacy-link {
        padding-top: .35rem;
        padding-bottom: .35rem;
        padding-left: .2rem;
        padding-right: .2rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .contact-privacy-check {
        align-items: center;
    }

    .contact-privacy-check .form-check-input {
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .contact-notice,
    .contact-faq-suggestions {
        padding: 1rem;
    }

    .contact-submit {
        width: 100%;
    }

    .contact-result-card {
        padding: 1.4rem;
    }

    .contact-result-card h1 {
        font-size: 1.55rem;
    }

    .contact-result-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-result-actions .btn {
        width: 100%;
        text-align: center;
    }

    /* Las tarjetas combinadas conservan la prioridad del espaciado común en móvil. */

    .contact-form-card.pillalas-content-card {
        padding: var(--pillalas-content-padding-mobile);
    }

    .contact-result-card.pillalas-content-card {
        border-radius: 22px;
    }
}

@media (max-width: 575.98px) {
    .contact-privacy-check .contact-privacy-link {
        display: inline;
        min-height: 0;
        padding: 0;
        vertical-align: baseline;
    }
}

/* =========================================================
   06.5. Modal de error de contacto
   ========================================================= */

.contact-error-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.contact-error-modal.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.contact-error-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(43, 15, 42, .45);
    backdrop-filter: blur(6px);
}

.contact-error-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    padding: 2rem 1.6rem 1.7rem;
    border: 1px solid rgba(239, 68, 68, .18);
    border-radius: 28px;
    background: var(--pillalas-white);
    text-align: center;
    box-shadow: 0 28px 80px rgba(43, 15, 42, .28), 0 8px 20px rgba(43, 15, 42, .12);
    transform: translateY(12px) scale(.96);
    transition: transform .22s ease;
}

.contact-error-modal.show .contact-error-dialog {
    transform: translateY(0) scale(1);
}

.contact-error-acknowledge {
    min-width: 140px;
    margin-top: 1.35rem;
}

.contact-error-face {
    margin: 0 auto 1rem;
    color: #ef4444;
    line-height: 1;
}

.contact-error-face i {
    font-size: 4.4rem;
    line-height: 1;
}

.contact-error-dialog h3 {
    margin: 0 0 .55rem;
    color: var(--pillalas-dark);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
}

.contact-error-dialog p {
    margin: 0;
    color: var(--pillalas-text-notice);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

body.contact-error-open {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .contact-error-dialog {
        padding: 1.8rem 1.25rem 1.45rem;
        border-radius: 24px;
    }

    .contact-error-face i {
        font-size: 3.8rem;
    }

    .contact-error-dialog h3 {
        font-size: 1.18rem;
    }
}

@media (max-width: 767.98px) {
    .cine-page .cine-hero-calendar,
    .movie-detail-page .pillalas-hero,
    .movie-detail-page .cine-hero-calendar {
        margin-bottom: .75rem !important;
    }

    .cine-page .cine-current-day-sticky,
    .cine-page .cine-current-day-sticky.is-stuck,
    .movie-detail-page .cine-current-day-sticky,
    .movie-detail-page .cine-current-day-sticky.is-stuck {
        margin-bottom: .75rem;
    }

    .cine-page .cine-showtimes {
        gap: .75rem;
    }

    .movie-detail-showtimes .movie-day-showtimes:not(.d-none) {
        display: grid;
        gap: .75rem;
    }

    .movie-detail-showtimes .movie-cinema-showtime-card {
        margin-bottom: 0;
    }
}