.cinema-location { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--vc-muted); }
.cinema-location ion-icon { flex-shrink:0; font-size:18px; color:#337ccb; }
/* Avisos y promociones: una rejilla que reparte lo que haya en una fila
   (auto-fit): un aviso solo ocupa todo el ancho; aviso + promo, mitad y mitad. */
/* Banda oscura de cabecera: el ticket blanco y el aviso destacan sobre ella
   en vez de perderse sobre el blanco de la pagina. */
.cinema-highlights-band { background:var(--vc-ink); background-image:radial-gradient(120% 140% at 50% -20%,#16406c 0%,#0a2447 45%,var(--vc-ink) 100%); }
.cinema-highlights { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:18px; align-items:start; padding-block:24px; }
.cinema-highlights > * { min-width:0; }
.cinema-highlights .cinema-notice { border-color:transparent; box-shadow:0 12px 30px -18px rgba(0,0,0,.7); }
.cinema-highlights .cinema-promotion { box-shadow:0 18px 40px -20px rgba(0,0,0,.75); }
/* Precio: degradado verde con brillo y un reflejo que recorre la pastilla al
   pasar el raton, el recurso habitual de los badges de oferta. */
.cinema-promo__price, .cinema-promotion__price { position:relative; overflow:hidden; background:linear-gradient(135deg,#12a35c 0%,var(--vc-green) 55%,#065a32 100%); box-shadow:0 10px 24px -10px rgba(18,163,92,.9),inset 0 1px 0 rgba(255,255,255,.28); }
.cinema-promo__price::after, .cinema-promotion__price::after { content:""; position:absolute; inset:-40% auto -40% -60%; width:45%; background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%); transform:skewX(-20deg); animation:vc-shine 4.5s ease-in-out 1.2s infinite; pointer-events:none; }
@keyframes vc-shine { 0%,70% { left:-60%; } 100% { left:140%; } }
@media (prefers-reduced-motion:reduce) { .cinema-promo__price::after, .cinema-promotion__price::after { animation:none; } }
/* En PC, si el aviso comparte fila con una promo, va siempre abierto (sin
   pliegue) y a la misma altura que ella, para que la fila no quede descuadrada. */
@media (min-width:640px) {
  .cinema-highlights:has(.cinema-promo) { align-items:stretch; }
  .cinema-highlights:has(.cinema-promo) .cinema-notice { display:flex; flex-direction:column; }
  .cinema-highlights:has(.cinema-promo) .cinema-notice summary { pointer-events:none; }
  .cinema-highlights:has(.cinema-promo) .cinema-notice__toggle { display:none; }
  .cinema-highlights:has(.cinema-promo) .cinema-notice__body { flex:1; }
}
.cinema-notice { background:#eaf4ff; border:1px solid #c6dcf3; border-left:4px solid #337ccb; border-radius:12px; padding:12px 18px; }
.cinema-notice summary { display:flex; align-items:center; gap:10px; min-height:28px; font-weight:600; font-size:14px; cursor:pointer; list-style:none; }
.cinema-notice summary::-webkit-details-marker { display:none; }
.cinema-notice summary ion-icon { flex-shrink:0; font-size:20px; color:#2868ac; }
.cinema-notice__toggle { margin-left:auto; font-size:20px; }
.cinema-notice[open] .cinema-notice__toggle { transform:rotate(45deg); }
.cinema-notice__body { display:flex; align-items:center; gap:20px; padding-top:14px; }
.cinema-notice__body>img { width:120px; max-height:160px; object-fit:contain; border-radius:6px; }
.cinema-notice h2 { font-size:18px; margin-bottom:4px; }
.cinema-notice p { white-space:pre-line; font-size:14px; }
.cinema-notice .vc-button { margin-top:12px; }
.cinema-program { padding-block:26px 30px; background:var(--vc-paper); border-block:1px solid var(--vc-line); }
.cinema-count { color:var(--vc-muted); font-size:12px; font-weight:500; white-space:nowrap; }
/* En escritorio los filtros van a la izquierda, fijos al hacer scroll. */
.cinema-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:start; }
.cinema-layout--plain { grid-template-columns:minmax(0,1fr); }
.cinema-main { grid-column:2; grid-row:1; min-width:0; scroll-margin-top:calc(var(--vc-header-h) + 12px); }
.cinema-layout--plain .cinema-main { grid-column:1; }
.cinema-side { grid-column:1; grid-row:1; position:sticky; top:calc(var(--vc-header-h) + 16px); }
.cinema-side__inner { display:grid; gap:16px; padding:16px; border:1px solid var(--vc-line); background:white; border-radius:12px; }
.cinema-side__row { display:grid; justify-items:start; gap:10px; }
.cinema-field { flex:1; width:100%; min-width:0; }
.cinema-field label, .cinema-field__label { display:block; font-size:12px; font-weight:600; margin-bottom:5px; color:var(--vc-muted); }
.cinema-field select { display:block; width:100%; min-height:46px; padding:10px 32px 10px 12px; font-size:14px; color:var(--vc-ink); background:var(--vc-paper); border:1px solid var(--vc-line); border-radius:7px; text-overflow:ellipsis; }
.cinema-field--search { position:relative; }
.cinema-field--search ion-icon { position:absolute; left:11px; bottom:13px; font-size:19px; color:var(--vc-muted); pointer-events:none; }
.cinema-field--search input { display:block; width:100%; min-height:46px; padding:10px 12px 10px 36px; font:inherit; font-size:14px; color:var(--vc-ink); background:var(--vc-paper); border:1px solid var(--vc-line); border-radius:7px; }
.cinema-field--search input:focus { outline:2px solid var(--vc-blue); outline-offset:1px; border-color:var(--vc-blue); }
.cinema-field--search input::-webkit-search-cancel-button { cursor:pointer; }
.cinema-reset { display:flex; align-items:center; gap:6px; min-height:46px; padding:8px 10px; color:#265f9e; font-weight:600; font-size:12px; white-space:nowrap; }
.cinema-days { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cinema-days__all { grid-column:1 / -1; }
.cinema-days button { min-height:44px; padding:9px 10px; border-radius:8px; border:1px solid var(--vc-line); background:white; color:#41516a; font-size:13px; font-weight:600; cursor:pointer; }
.cinema-days button:hover { border-color:#337ccb; }
.cinema-days button[aria-pressed=true] { background:var(--vc-ink); color:white; border-color:var(--vc-ink); }
.cinema-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px; align-items:stretch; }
.cinema-film { display:flex; flex-direction:column; min-width:0; border:1px solid var(--vc-line); border-radius:14px; background:white; overflow:hidden; box-shadow:0 3px 6px #00122d03; }
/* Sin subgrid, al menos el boton queda abajo y las tarjetas miden igual. */
.cinema-film .cinema-sessions { flex:1 1 auto; }
/* Con subgrid, ficha, sesiones y boton se alinean en toda la fila: se acaba
   el efecto escalera cuando un titulo ocupa mas lineas que otro. */
@supports (grid-template-rows:subgrid) {
  .cinema-grid { grid-auto-rows:auto; }
  .cinema-film { display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:0; }
  .cinema-film--advance { grid-row:span 2; }
}
.cinema-film__summary { display:grid; grid-template-columns:105px minmax(0,1fr); gap:16px; padding:18px; }
.cinema-film__poster { aspect-ratio:2/3; border-radius:8px; overflow:hidden; background:transparent; align-self:start; }
.cinema-film__poster img { width:100%; height:100%; object-fit:cover; color:var(--vc-muted); font-size:12px; }
.cinema-poster-placeholder { background:#e8eef6; height:100%; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; text-align:center; color:#526176; padding:10px; font-size:12px; }
.cinema-poster-placeholder ion-icon { font-size:30px; }
.cinema-film__info { min-width:0; }
.cinema-tag { display:inline-block; padding:3px 7px; border-radius:4px; background:#eef4fb; color:#265f9e; font-size:12px; font-weight:600; }
.cinema-tag--presale { background:#fff0da; color:#875007; }
.cinema-film h3 { font-family:var(--vc-font); font-size:16px; line-height:1.35; font-weight:600; margin:7px 0 9px; overflow-wrap:anywhere; }
.cinema-film h3 a:hover { color:#2868ac; }
.cinema-film__meta { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px; color:var(--vc-muted); }
.cinema-film__meta li { display:inline; }
.cinema-film__genres { margin-top:6px; color:var(--vc-muted); font-size:12px; }
.cinema-film__detail { display:inline-flex; gap:5px; align-items:center; min-height:36px; color:#265f9e; font-size:12px; font-weight:600; margin-top:5px; }
.cinema-sessions { padding:0 18px; }
.cinema-session { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; padding:10px 0; border-top:1px solid #e8edf3; }
.cinema-session--offer { padding-inline:10px; margin-inline:-10px; border-radius:9px; background:#f4fcf7; box-shadow:inset 3px 0 0 var(--vc-green); }
.cinema-session__day { flex:1; min-width:0; }
.cinema-session time { display:block; font-size:12px; font-weight:600; text-align:left; }
.cinema-session__flag { display:inline-block; margin-top:4px; font-size:12px; font-weight:600; color:#875007; }
.cinema-session__offer-row { display:flex; justify-content:center; flex-basis:100%; }
.cinema-session__offer { display:inline-flex; align-items:center; gap:5px; width:fit-content; max-width:100%; padding:2px 9px 2px 7px; border:1px solid var(--vc-green-line); border-radius:999px; background:var(--vc-green-soft); color:var(--vc-green-ink); font-size:12px; font-weight:600; line-height:1.6; }
.cinema-session__offer ion-icon { flex-shrink:0; font-size:13px; color:var(--vc-green); }
/* La promocion se lee como una oferta de la sesion, sin simular un ticket ya comprado. */
.cinema-session.cinema-session--promo { position:relative; margin-block:6px; padding:12px 12px 0; border:1px solid #bfe3cd; border-radius:12px; background:#f8fcf9; box-shadow:none; overflow:hidden; }
.cinema-session--promo::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--vc-green); pointer-events:none; }
.cinema-session--promo + .cinema-session { border-top:0; }
.cinema-session--promo .cinema-session__offer-row { flex-basis:calc(100% + 24px); margin:6px -12px 0; padding:8px 12px 8px 16px; border-top:1px solid #d8ebdf; background:#ebf7ef; }
.cinema-session__offer--promo { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; max-width:none; padding:0; border:0; border-radius:0; background:transparent; color:var(--vc-green-ink); }
.cinema-session__offer-label { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.cinema-session__offer--promo ion-icon { color:var(--vc-green); }
.cinema-session__offer--promo b { flex-shrink:0; padding:3px 9px; border:1px solid var(--vc-green); border-radius:6px; background:var(--vc-green); color:#fff; font-size:13px; font-weight:800; white-space:nowrap; }
.cinema-session__times { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; max-width:58%; }
.cinema-time { display:inline-flex; align-items:center; justify-content:center; min-height:32px; min-width:49px; padding:4px 7px; border:1px solid #c9daf0; border-radius:6px; background:#eef5ff; color:var(--vc-ink); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.cinema-time a { color:inherit; text-decoration:none; }
.cinema-time:has(a) { border-color:#337ccb; cursor:pointer; }
.cinema-time:has(a):hover { background:#dcecff; }
.cinema-time a:focus-visible { outline:2px solid #1459a5; outline-offset:3px; }
.cinema-time--past { text-decoration:line-through; background:#f3f5f8; color:#687483; border-color:#e0e5eb; }
.cinema-session--offer .cinema-time { border-color:var(--vc-green-line); background:var(--vc-green-soft); color:var(--vc-green-ink); }
.cinema-session--offer .cinema-time--past { border-color:#dde7e1; background:#f1f5f2; color:#6d7c73; }
/* Dia del espectador / Super jueves: como un dia normal (sin fondo ni barra),
   solo con su etiqueta verde discreta. El cupon se reserva para la promocion. */
.cinema-session--day { padding-inline:0; margin-inline:0; border-radius:0; background:transparent; box-shadow:none; }
.cinema-session--day .cinema-time { border-color:#c9daf0; background:#eef5ff; color:var(--vc-ink); }
.cinema-session--day .cinema-time--past { border-color:#e0e5eb; background:#f3f5f8; color:#687483; }
.cinema-session__offer--day { border-color:var(--vc-green-line); background:var(--vc-green-soft); color:var(--vc-green-ink); font-weight:600; }
.cinema-session__offer--day ion-icon { color:var(--vc-green); }
/* Sesión que pertenece a un ciclo (sección especial): se tiñe con el color
   de la sección, suave, y lleva sus propios botones. */
.cinema-session--ciclo { padding-inline:12px; margin-inline:-10px; border:1px solid rgba(var(--se-accent-rgb),.35); border-radius:10px; background:linear-gradient(180deg,rgba(var(--se-accent-rgb),.09),rgba(var(--se-accent-rgb),.04)); box-shadow:inset 3px 0 0 var(--se-accent); }
.cinema-session--ciclo + .cinema-session { border-top:0; }
.cinema-session--ciclo .cinema-time { border-color:rgba(var(--se-accent-rgb),.55); background:#fff; color:var(--se-bg); }
.cinema-session__offer--ciclo { border-color:rgba(var(--se-accent-rgb),.4); background:#fff; color:var(--se-bg); }
.cinema-session__offer--ciclo ion-icon { color:var(--se-accent); }
.cinema-session__offer--ciclo b { font-weight:800; margin-left:2px; }
/* "Mas informacion": mismo boton que "Comprar entradas <cine>" pero en el
   color del ciclo, para que se lea como boton. La compra ya esta abajo. */
.cinema-session__ciclo-actions { flex-basis:100%; margin-top:4px; }
.cinema-session__ciclo-more { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; padding:10px 18px; border:1px solid var(--se-accent); border-radius:9px; background:var(--se-accent); color:var(--se-on-accent); font-size:12px; font-weight:600; line-height:1.4; text-decoration:none; transition:filter .15s; }
.cinema-session__ciclo-more:hover { filter:brightness(1.1); }
.cinema-session__ciclo-more ion-icon { font-size:18px; flex-shrink:0; }
.cinema-session__ciclo-more span { display:inline; }
.cinema-film__actions { padding:12px 18px 18px; }
/* Con "Todos los dias" en movil solo se ven los dos primeros; el resto se
   despliega con este boton para que cada tarjeta quepa en pantalla. */
.cinema-sessions__more { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:40px; margin-top:4px; padding:8px 10px; border:1px dashed #c9daf0; border-radius:9px; background:#f6f9fe; color:#265f9e; font-size:12px; font-weight:700; cursor:pointer; }
.cinema-sessions__more ion-icon { font-size:16px; }
.cinema-sessions__more:hover { background:#eaf4ff; border-color:#337ccb; }
.cinema-film__actions .vc-button { width:100%; font-size:12px; }
.cinema-advance { padding-block:34px 0; }
/* Aro ámbar: mismo idioma que la portada para "aún no se estrena". */
.cinema-film--advance { border-color:#f0cf95; box-shadow:0 0 0 1px #f0cf95; }
.cinema-advance .cinema-count { color:#875007; font-weight:700; }
/* La promo es un <details>: en PC va siempre abierta y sin cabecera; en
   movil (ver abajo) la cabecera es la fila plegada. El ancho de la tarjeta
   decide su forma (container query), no el de la pantalla. */
.cinema-promo { container-type:inline-size; }
.cinema-promo__summary { display:none; list-style:none; }
.cinema-promo__summary::-webkit-details-marker { display:none; }
/* Las muescas se recortan en las piezas del ticket: así dejan ver el fondo
   real de la banda, incluso donde cambia de tono por el degradado. */
.cinema-promotion { position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); border:0; border-radius:18px; background:transparent; overflow:hidden; box-shadow:0 8px 24px -18px rgba(0,18,45,.35); }
.cinema-promotion:not(:has(.cinema-promotion__media)) { grid-template-columns:1fr; }
.cinema-promotion__media { position:relative; display:flex; align-items:center; justify-content:center; min-height:190px; margin:0; padding:18px; background:var(--vc-green-soft); }
.cinema-promotion__media {
  -webkit-mask-image:radial-gradient(circle 11px at right top,transparent 10px,#000 11px),radial-gradient(circle 11px at right bottom,transparent 10px,#000 11px);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle 11px at right top,transparent 10px,#000 11px),radial-gradient(circle 11px at right bottom,transparent 10px,#000 11px);
  mask-composite:intersect;
}
.cinema-promotion__media img { max-width:100%; max-height:200px; object-fit:contain; border-radius:8px; }
/* La imagen se amplia en un modal; la lupa avisa de que se puede tocar. */
/* El enlace ocupa todo el ancho del area (ancho definido): en Safari, un
   max-width:100% de la imagen dentro de un enlace que se ajusta a su
   contenido se resolvia a 0 y la imagen desaparecia. */
.cinema-promotion__zoom { position:relative; display:flex; justify-content:center; width:100%; line-height:0; border-radius:8px; }
.cinema-promotion__zoom img { width:auto; height:auto; }
.cinema-promotion__zoom img { transition:transform .25s ease; }
.cinema-promotion__zoom:hover img { transform:scale(1.02); }
.cinema-promotion__zoom:focus-visible { outline:3px solid var(--vc-green); outline-offset:3px; }
.cinema-promotion__zoom-icon { position:absolute; right:8px; top:8px; bottom:auto; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(0,18,45,.6); color:#fff; font-size:18px; pointer-events:none; }
.cinema-promotion__price { position:absolute; left:14px; bottom:14px; display:inline-flex; flex-direction:column; align-items:flex-start; padding:6px 12px 5px; border-radius:10px; background:var(--vc-green); color:#fff; font-size:20px; font-weight:800; line-height:1; letter-spacing:-.3px; font-variant-numeric:tabular-nums; box-shadow:0 8px 18px -8px rgba(11,122,68,.8); }
.cinema-promotion__price small { font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; opacity:.85; margin-bottom:3px; }
.cinema-promotion__body { position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:22px 24px 22px 26px; border-left:2px dashed var(--vc-green-line); background:#fff; }
.cinema-promotion__body {
  -webkit-mask-image:radial-gradient(circle 11px at left top,transparent 10px,#000 11px),radial-gradient(circle 11px at left bottom,transparent 10px,#000 11px);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle 11px at left top,transparent 10px,#000 11px),radial-gradient(circle 11px at left bottom,transparent 10px,#000 11px);
  mask-composite:intersect;
}
.cinema-promotion:not(:has(.cinema-promotion__media)) .cinema-promotion__body { border-left:0; -webkit-mask-image:none; mask-image:none; }
.cinema-promotion__eyebrow { display:inline-flex; align-items:center; gap:5px; margin-bottom:8px; color:var(--vc-green-ink); font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.cinema-promotion__eyebrow ion-icon { font-size:15px; color:var(--vc-green); }
.cinema-promotion__eyebrow b { letter-spacing:0; font-size:13px; }
.cinema-promotion h3 { font-family:var(--vc-font); font-size:18px; line-height:1.3; font-weight:700; }
.cinema-promotion h3 { margin-bottom:16px; }
.cinema-promotion__text { font-size:13px; color:var(--vc-muted); margin:-10px 0 16px; line-height:1.55; text-align:justify; text-align-last:left; hyphens:auto; }
/* El boton siempre al pie de la tarjeta y con el texto centrado. */
.cinema-promotion .cinema-promotion__cta { align-self:stretch; justify-content:center; margin-top:auto; border-radius:999px; line-height:1.25; text-align:center; }
/* Tarjeta estrecha (media rejilla, tres por fila o movil): ticket en vertical. */
@container (max-width:600px) {
  .cinema-promotion { grid-template-columns:minmax(0,1fr); border-radius:16px; }
  .cinema-promotion__media { min-height:0; padding:14px 16px 16px; }
  .cinema-promotion__media {
    -webkit-mask-image:radial-gradient(circle 11px at left bottom,transparent 10px,#000 11px),radial-gradient(circle 11px at right bottom,transparent 10px,#000 11px);
    mask-image:radial-gradient(circle 11px at left bottom,transparent 10px,#000 11px),radial-gradient(circle 11px at right bottom,transparent 10px,#000 11px);
  }
  .cinema-promotion__media img { max-height:150px; }
  .cinema-promotion__price { left:auto; right:12px; bottom:12px; font-size:18px; }
  .cinema-promotion__body { padding:18px 18px 18px; border-left:0; border-top:2px dashed var(--vc-green-line); }
  .cinema-promotion__body {
    -webkit-mask-image:radial-gradient(circle 11px at left top,transparent 10px,#000 11px),radial-gradient(circle 11px at right top,transparent 10px,#000 11px);
    mask-image:radial-gradient(circle 11px at left top,transparent 10px,#000 11px),radial-gradient(circle 11px at right top,transparent 10px,#000 11px);
  }
  .cinema-promotion:not(:has(.cinema-promotion__media)) .cinema-promotion__body { border-top:0; -webkit-mask-image:none; mask-image:none; }
  .cinema-promotion h3 { font-size:17px; }
  .cinema-promotion .cinema-promotion__cta { width:100%; }
}
/* Sección especial: tarjeta oscura con los colores del cartel (variables
   --se-* puestas desde la plantilla). Fechas como sellos, títulos dorados. */
.cinema-special { padding-top:36px; color:#fff; }
.cinema-special__card { position:relative; overflow:hidden; border-radius:22px; background:var(--se-bg); background-image:radial-gradient(120% 90% at 100% 0%,rgba(var(--se-accent-rgb),.7),transparent 62%),radial-gradient(70% 60% at 0% 100%,rgba(255,255,255,.08),transparent 60%); box-shadow:0 18px 40px -22px rgba(var(--se-accent-rgb),.7); }
.cinema-special__head { display:grid; grid-template-columns:minmax(180px,240px) minmax(0,1fr); gap:32px; align-items:center; padding:32px 34px 28px; }
.cinema-special__poster { margin:0; border-radius:12px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.45); }
.cinema-special__poster a { position:relative; display:block; }
.cinema-special__poster img { display:block; width:100%; height:auto; transition:transform .25s ease; }
.cinema-special__poster a:hover img { transform:scale(1.02); }
.cinema-special__zoom { position:absolute; right:10px; bottom:10px; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:20px; backdrop-filter:blur(4px); pointer-events:none; }
.cinema-special__poster a:focus-visible { outline:3px solid var(--se-gold); outline-offset:3px; border-radius:12px; }
.cinema-special__intro { min-width:0; }
.cinema-special__eyebrow { display:inline-block; margin-bottom:10px; padding:4px 10px; border:1px solid rgba(255,255,255,.35); border-radius:999px; font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--se-gold); }
.cinema-special h2 { font-size:clamp(40px,4.6vw,66px); line-height:.98; letter-spacing:1px; color:#fff; margin:0 0 14px; }
.cinema-special__facts { display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 14px; padding:0; list-style:none; font-size:14px; }
.cinema-special__facts li { display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.88); }
.cinema-special__facts ion-icon { font-size:19px; color:var(--se-gold); }
.cinema-special__facts b { color:var(--se-gold); font-weight:700; }
.cinema-special__text { max-width:60ch; font-size:14px; line-height:1.6; color:rgba(255,255,255,.82); white-space:pre-line; text-align:justify; text-align-last:left; hyphens:auto; }
.cinema-special__button { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:16px; padding:10px 20px; border-radius:999px; background:var(--se-gold); color:var(--se-bg); font-size:13px; font-weight:700; text-decoration:none; transition:transform .16s ease,filter .16s ease; }
.cinema-special__button:hover { transform:translateY(-1px); filter:brightness(1.05); }
.cinema-special__button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.cinema-special__list { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; margin:0; padding:0 34px 34px; list-style:none; counter-reset:none; }
.cinema-special__item { display:grid; grid-template-columns:auto 84px minmax(0,1fr); gap:16px; align-items:center; padding:14px 16px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(255,255,255,.07); box-shadow:0 10px 24px -18px rgba(0,0,0,.8); transition:border-color .16s ease,background .16s ease; }
.cinema-special__item:hover { border-color:rgba(255,255,255,.36); background:rgba(255,255,255,.11); }
.cinema-special__date { flex-shrink:0; }
/* El sello de fecha va en el color de los títulos (dorado), no en el acento:
   rojo sobre rojo no se veía. Texto en el color del fondo para el contraste. */
.cinema-special__date time { display:flex; flex-direction:column; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%; background:var(--se-gold); color:var(--se-bg); box-shadow:0 0 0 3px rgba(255,255,255,.22),0 8px 18px -6px rgba(0,0,0,.75); }
.cinema-special__date b { font-family:var(--vc-display); font-size:30px; line-height:1; letter-spacing:.5px; }
.cinema-special__date span { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; line-height:1; margin-top:3px; }
.cinema-special__still { margin:0; aspect-ratio:2/3; border-radius:8px; overflow:hidden; background:rgba(0,0,0,.3); box-shadow:0 8px 16px -8px rgba(0,0,0,.8); }
.cinema-special__still a { display:block; height:100%; }
.cinema-special__still img { display:block; width:100%; height:100%; object-fit:cover; }
.cinema-special__item:not(:has(.cinema-special__still)) { grid-template-columns:auto minmax(0,1fr); }
.cinema-special__item:not(:has(.cinema-special__date)) { grid-template-columns:84px minmax(0,1fr); }
.cinema-special__info { min-width:0; }
.cinema-special__label { display:inline-block; margin-bottom:6px; padding:2px 8px; border-radius:4px; background:rgba(255,255,255,.14); color:#fff; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.cinema-special h3 { font-family:var(--vc-display); font-size:24px; font-weight:400; line-height:1.05; letter-spacing:.8px; color:var(--se-gold); overflow-wrap:anywhere; }
.cinema-special__sub { margin-top:3px; font-size:12px; font-style:italic; color:rgba(255,255,255,.78); }
.cinema-special__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:8px; font-size:14px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.cinema-special__time { display:inline-flex; align-items:center; gap:5px; }
.cinema-special__time ion-icon { font-size:16px; color:var(--se-gold); }
.cinema-special__age { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; padding:0 6px; border:1px solid rgba(255,255,255,.5); border-radius:4px; font-size:11px; font-weight:700; }
.cinema-special__links { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cinema-special__links a { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 13px; border-radius:999px; font-size:12px; font-weight:700; text-decoration:none; }
.cinema-special__links ion-icon { font-size:16px; }
.cinema-special__ghost { border:1px solid rgba(255,255,255,.4); color:#fff; }
.cinema-special__ghost:hover { background:rgba(255,255,255,.12); }
.cinema-special__buy { background:var(--se-accent); color:var(--se-on-accent); }
.cinema-special__buy:hover { filter:brightness(1.1); }
/* Ficha en modal: tarjeta clara con el acento de la sección especial, o el
   azul de la web cuando se abre desde la cartelera. */
.cinema-program .cinema-modal, .cinema-advance .cinema-modal { --se-accent:#337ccb; --se-on-accent:#fff; --se-bg:var(--vc-ink); }
/* Un navegador sin <dialog> lo pintaria como un bloque siempre visible. */
.cinema-modal:not([open]) { display:none; }
/* z-index alto por si el navegador no lleva el <dialog> a la capa superior:
   sin el, la cabecera fija y la barra de filtros se dibujaban encima. */
.cinema-modal { position:fixed; inset:0; z-index:10000; margin:auto; width:min(92vw,820px); max-height:min(88vh,900px); padding:0; border:0; border-radius:18px; background:#fff; color:var(--vc-ink); box-shadow:0 30px 80px -20px rgba(0,0,0,.6); overflow:hidden; }
.cinema-modal::backdrop { background:rgba(0,18,45,.7); backdrop-filter:blur(3px); }
/* Respaldo cuando showModal() no esta disponible: velo propio a pantalla completa. */
.cinema-modal-veil { position:fixed; inset:0; z-index:9999; background:rgba(0,18,45,.7); }
.cinema-modal__close-form { position:absolute; top:12px; right:12px; z-index:2; margin:0; }
.cinema-modal__close { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--vc-ink); font-size:24px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.cinema-modal__close:hover { background:#fff; }
.cinema-modal__body { display:grid; grid-template-columns:260px minmax(0,1fr); max-height:min(88vh,900px); }
.cinema-modal__poster { margin:0; background:var(--se-bg); }
.cinema-modal__poster img { display:block; width:100%; height:100%; object-fit:cover; }
.cinema-modal__text { padding:28px 30px 26px; overflow:auto; }
.cinema-modal__label { display:inline-block; margin-bottom:8px; padding:2px 8px; border-radius:4px; background:var(--se-accent); color:var(--se-on-accent); font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.cinema-modal h3 { font-family:var(--vc-display); font-size:clamp(30px,3.4vw,42px); font-weight:400; line-height:1; letter-spacing:.8px; color:var(--vc-ink); margin:0 0 6px; padding-right:40px; }
.cinema-modal__sub { font-size:14px; font-style:italic; color:var(--vc-muted); margin-bottom:10px; }
.cinema-modal__meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0 14px; padding:0; list-style:none; font-size:13px; font-weight:600; }
.cinema-modal__meta li { display:inline-flex; align-items:center; gap:6px; }
.cinema-modal__meta ion-icon { font-size:17px; color:var(--se-accent); }
.cinema-modal__credits { display:grid; gap:6px; margin:0 0 14px; padding:12px 14px; border-left:3px solid var(--se-accent); background:var(--vc-paper); border-radius:0 8px 8px 0; font-size:13px; }
.cinema-modal__credits div { display:flex; gap:8px; }
.cinema-modal__credits dt { flex-shrink:0; width:76px; color:var(--vc-muted); }
.cinema-modal__credits dd { margin:0; font-weight:600; }
.cinema-modal__synopsis { font-size:14px; line-height:1.65; white-space:pre-line; }
.cinema-modal__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.cinema-modal__actions .vc-button { font-size:13px; }
.cinema-modal .cinema-modal__buy { background:var(--se-accent); border-color:var(--se-accent); color:var(--se-on-accent); }
.cinema-modal .cinema-modal__buy:hover { filter:brightness(1.1); }
/* Cartel a tamaño completo: solo la imagen, tan grande como quepa. */
.cinema-modal--image { width:fit-content; height:fit-content; max-width:min(94vw,1100px); max-height:94vh; background:transparent; box-shadow:none; border-radius:0; }
.cinema-modal--image img { display:block; max-width:min(94vw,1100px); max-height:94vh; width:auto; height:auto; border-radius:14px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); cursor:default; }
.cinema-modal--image::backdrop { background:rgba(0,0,0,.85); }
.cinema-venue { padding-top:40px; }
.cinema-venue__card { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0; border:1px solid var(--vc-line); border-radius:18px; background:white; overflow:hidden; }
.cinema-venue__photo { grid-row:1 / span 2; margin:0; min-height:100%; }
.cinema-venue__photo img { width:100%; height:100%; min-height:280px; object-fit:cover; }
.cinema-venue__data { padding:26px 28px 20px; }
.cinema-venue h2 { font-family:var(--vc-display); font-size:34px; font-weight:400; letter-spacing:.6px; line-height:1.05; margin:0 0 18px; }
.cinema-venue__facts { display:grid; gap:12px; padding:0; margin:0; list-style:none; }
.cinema-venue__facts li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; }
.cinema-venue__facts ion-icon { flex-shrink:0; margin-top:2px; font-size:19px; color:#337ccb; }
.cinema-venue__facts b { font-weight:700; }
.cinema-venue__facts a { text-decoration:underline; }
.cinema-venue__map { padding:0 28px 26px; }
.cinema-venue__map iframe { display:block; border:0; border-radius:12px; width:100%; height:230px; }
@media (min-width:1600px) { .cinema-grid { gap:24px; } .cinema-film__summary { grid-template-columns:120px minmax(0,1fr); } }
@media (max-width:1150px) { .cinema-layout { grid-template-columns:260px minmax(0,1fr); gap:18px; } }
/* Por debajo de 1024px los filtros pasan a ser una barra fija bajo la cabecera. */
@media (max-width:1023px) {
  .cinema-layout { grid-template-columns:minmax(0,1fr); }
  .cinema-side, .cinema-main { grid-column:1; }
  .cinema-side { grid-row:1; position:sticky; top:var(--vc-header-h); z-index:20; margin-inline:calc(var(--vc-shell-pad) * -1); }
  .cinema-main { grid-row:2; scroll-margin-top:calc(var(--vc-header-h) + 104px); }
  .cinema-side__inner { gap:7px; padding:7px var(--vc-shell-pad) 9px; border:0; border-bottom:1px solid var(--vc-line); border-radius:0; box-shadow:0 6px 12px #00122d0f; }
  .cinema-side__row { display:flex; align-items:center; gap:10px; }
  .cinema-field label, .cinema-field--days .cinema-field__label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .cinema-field select { min-height:40px; padding:6px 30px 6px 10px; font-size:15px; background:white; }
  .cinema-side__row .cinema-field { flex:3 1 0; }
  .cinema-side__row .cinema-field--search { flex:2 1 0; }
  .cinema-field--search input { min-height:40px; padding:6px 10px 6px 34px; font-size:15px; background:white; }
  .cinema-field--search ion-icon { bottom:10px; left:10px; }
  .cinema-reset { min-height:40px; padding:6px 10px; }
  .cinema-days { display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; scroll-snap-type:x proximity; }
  .cinema-days::-webkit-scrollbar { display:none; }
  .cinema-days button { flex:0 0 auto; min-height:40px; padding:8px 14px; scroll-snap-align:start; }
}
/* Movil: aviso y promo son filas plegadas; la promo se abre como ticket. */
@media (max-width:639px) {
  .cinema-highlights { gap:10px; padding-block:12px; }
  .cinema-promo__icon { background:linear-gradient(135deg,#e7f7ee,#c9efdb); }
  .cinema-promo { border:0; border-radius:14px; background:transparent; box-shadow:0 6px 18px -14px rgba(0,18,45,.4); overflow:hidden; }
  .cinema-promo__summary { display:flex; align-items:center; gap:12px; min-height:60px; padding:10px 14px 10px 12px; background:#fff; cursor:pointer; }
  .cinema-promo__icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:38px; height:38px; border-radius:11px; background:var(--vc-green-soft); color:var(--vc-green); font-size:21px; }
  .cinema-promo__heading { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
  .cinema-promo__eyebrow { font-size:10px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--vc-green-ink); }
  .cinema-promo__title { font-size:14px; font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cinema-promo__price { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:64px; text-align:center; padding:5px 9px; border-radius:8px; background:var(--vc-green); color:#fff; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
  .cinema-promo__toggle { display:flex; flex-shrink:0; font-size:20px; color:var(--vc-muted); transition:transform .25s ease; }
  .cinema-promo[open] .cinema-promo__toggle { transform:rotate(180deg); }
  .cinema-promo[open] .cinema-promo__summary { border-bottom:1px solid var(--vc-line); }
  /* Abierta, la promo sigue siendo el mismo ticket, sin bordes duplicados. */
  .cinema-promo .cinema-promotion { border:0; border-radius:0; box-shadow:none; }
  /* La fila plegada ya dice "Promocion" y el titulo: dentro no se repiten. */
  .cinema-promo .cinema-promotion__eyebrow, .cinema-promo .cinema-promotion h3 { display:none; }
  .cinema-promo .cinema-promotion__price { display:none; }
  .cinema-promo .cinema-promotion__text { margin-top:0; }
  /* Despliegue suave donde el navegador lo permite. */
  .cinema-promo::details-content { block-size:0; overflow:clip; transition:block-size .3s ease,content-visibility .3s allow-discrete; }
  .cinema-promo[open]::details-content { block-size:auto; }
}
@media (max-width:680px) {
  .cinema-location { font-size:12px; }
  .cinema-program { padding-block:24px; }
  .cinema-field select { font-size:16px; padding-left:9px; }
  .cinema-field--search input { font-size:16px; }
  .cinema-reset__text { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
  .cinema-reset span[aria-hidden] { font-size:18px; }
  .cinema-grid { grid-template-columns:1fr; gap:14px; }
  .cinema-film__summary { grid-template-columns:90px minmax(0,1fr); padding:16px; gap:14px; }
  .cinema-film h3 { font-size:16px; }
  .cinema-film__meta,.cinema-film__genres,.cinema-film__detail { font-size:12px; }
  .cinema-session { padding-block:9px; }
  .cinema-time { font-size:13px; }
  .cinema-session time { font-size:13px; }
  .cinema-session__offer { font-size:12px; }
  .cinema-special { padding-top:28px; }
  .cinema-special__card { border-radius:18px; }
  .cinema-special__head { grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:start; padding:18px 16px 16px; }
  .cinema-special h2 { font-size:clamp(30px,9vw,42px); margin-bottom:10px; }
  .cinema-special__facts { gap:6px 14px; font-size:13px; }
  .cinema-special__text { font-size:13px; }
  .cinema-special__button { min-height:40px; margin-top:12px; padding:8px 16px; font-size:12px; }
  .cinema-special__list { grid-template-columns:1fr; gap:8px; padding:0 10px 14px; }
  .cinema-special__item { grid-template-columns:auto 56px minmax(0,1fr); gap:10px; padding:10px; border-radius:12px; }
  .cinema-special__item:not(:has(.cinema-special__date)) { grid-template-columns:56px minmax(0,1fr); }
  .cinema-special__date time { width:48px; height:48px; }
  .cinema-special__date b { font-size:22px; }
  .cinema-special__date span { font-size:9px; letter-spacing:1px; }
  .cinema-special h3 { font-size:20px; }
  .cinema-special__sub { font-size:11px; }
  .cinema-special__meta { font-size:13px; gap:6px 10px; margin-top:6px; }
  .cinema-special__links { gap:6px; margin-top:8px; }
  .cinema-special__links a { min-height:32px; padding:5px 10px; font-size:11px; white-space:nowrap; }
  .cinema-modal { width:100vw; max-width:100vw; max-height:100vh; height:100vh; margin:0; border-radius:0; }
  .cinema-modal__body { grid-template-columns:1fr; max-height:100vh; overflow:auto; }
  .cinema-modal__poster { height:46vh; }
  .cinema-modal__text { padding:20px 18px 24px; overflow:visible; }
  .cinema-modal h3 { font-size:30px; }
  .cinema-modal__actions .vc-button { flex:1 1 100%; }
  .cinema-modal--image { display:grid; place-items:center; width:100vw; max-width:100vw; height:100vh; background:rgba(0,0,0,.92); }
  .cinema-modal--image img { max-width:100vw; max-height:100vh; border-radius:0; box-shadow:none; }
  .cinema-special__zoom { width:30px; height:30px; font-size:17px; right:6px; bottom:6px; }
  .cinema-venue__card { grid-template-columns:minmax(0,1fr); }
  .cinema-venue__photo { grid-row:auto; }
  .cinema-venue__photo img { min-height:0; height:190px; }
  .cinema-venue__data { padding:20px 18px 16px; }
  .cinema-venue__map { padding:0 18px 20px; }
  .cinema-venue__map iframe { height:200px; }
  .cinema-venue { padding-top:28px; }
  .cinema-venue h2 { font-size:27px; margin-bottom:14px; }
  .cinema-notice { padding:10px 12px; }
  .cinema-notice__body { gap:12px; }
  .cinema-notice__body>img { width:75px; }
  .cinema-notice h2 { font-size:16px; }
  .cinema-notice p { font-size:13px; }
}