/* Fiesta del Cine: se integra en piezas que la web ya tiene (carrusel del
   inicio, banda de avisos, selector de días y sesiones) con los colores del
   cartel: degradado violeta-azul y los puntos de colores del logo. */
:root { --fi-deep:#3d27c9; --fi-violet:#7b3ff2; --fi-purple:#9147fd; --fi-blue:#4e83fe;
  --fi-ink:#4b1fb3; --fi-soft:#f6f2ff; --fi-line:#d8c9ff;
  --fi-red:#d12f20; --fi-yellow:#fedd04; --fi-cyan:#00a0d5; --fi-olive:#a4ad20;
  --fi-gradient:linear-gradient(100deg,var(--fi-deep) 0%,#6236ec 34%,var(--fi-purple) 60%,#6d6cfd 80%,var(--fi-blue) 100%); }

/* style-azul.css pone display:block a todos los span: aquí se devuelven a línea. */
.fiesta-banner__meta span, .fiesta-banner__price span, .cinema-fiesta__dates span, .cinema-session__offer--fiesta span:not(.fiesta-dots), .pd-promotion-fiesta span:not(.fiesta-dots) { display:inline; }
.fiesta-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Los cuatro puntos del logo, en pequeño, como icono propio de la campaña. */
.fiesta-dots { display:inline-block; flex-shrink:0; width:15px; height:11px; vertical-align:-1px;
  background:radial-gradient(circle at 3px 3px,var(--fi-red) 2.3px,transparent 2.8px),
             radial-gradient(circle at 11px 2.6px,var(--fi-yellow) 2.3px,transparent 2.8px),
             radial-gradient(circle at 6.5px 8.4px,var(--fi-cyan) 2.3px,transparent 2.8px),
             radial-gradient(circle at 13px 8.6px,var(--fi-olive) 2px,transparent 2.5px); }

/* ---------- Inicio: primera novedad del carrusel ---------- */
.home-banner.fiesta-banner { justify-content:flex-start; isolation:isolate; background:var(--fi-gradient); color:#fff; }
.fiesta-banner__art { position:absolute; inset:0 0 0 auto; z-index:-1; height:100%; width:auto; max-width:62%; aspect-ratio:1024 / 588; object-fit:cover; object-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%); mask-image:linear-gradient(90deg,transparent 0,#000 26%); }
.fiesta-banner__link { position:absolute; inset:0; z-index:0; border-radius:inherit; }
.fiesta-banner__link:focus-visible { outline:3px solid var(--fi-yellow); outline-offset:-3px; }
.fiesta-banner__copy { position:relative; z-index:1; pointer-events:none; display:grid; justify-items:start; align-content:center; gap:0; max-width:56%; padding:22px 30px 22px 38px; }
.home-page .fiesta-banner__eyebrow { margin:0 0 10px; }
.fiesta-banner .fiesta-banner__state { display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 9px; border:1px solid rgb(255 255 255 / 34%); border-radius:999px; background:rgb(255 255 255 / 14%); font-size:12px; font-weight:700; line-height:1.4; letter-spacing:.2px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.fiesta-banner .fiesta-banner__state::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--fi-yellow); box-shadow:0 0 0 3px rgb(254 221 4 / 22%); }
.home-page .fiesta-banner__title { margin:0; font-family:var(--vc-display); font-size:30px; font-weight:400; line-height:1; letter-spacing:1px; color:#fff; }
.home-page .fiesta-banner__price { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 12px; margin:2px 0 0; color:#fff; line-height:1; }
.fiesta-banner__price span { font-size:19px; font-weight:500; color:rgb(255 255 255 / 90%); }
.fiesta-banner__price strong { font-family:var(--vc-display); font-size:clamp(64px,6.4vw,92px); font-weight:400; line-height:.9; letter-spacing:.5px; text-shadow:0 6px 24px rgb(33 10 110 / 35%); }
.home-page .fiesta-banner__meta { margin:6px 0 0; font-size:14px; font-weight:500; line-height:1.5; color:rgb(255 255 255 / 88%); }
.fiesta-banner__meta span[aria-hidden] { margin-inline:3px; }
.fiesta-banner__meta .fecha-corta { display:none; }
.fiesta-banner__cines { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; pointer-events:auto; }
.fiesta-banner__cines a { display:inline-flex; align-items:center; min-height:34px; padding:6px 14px; border:1px solid rgb(255 255 255 / 40%); border-radius:999px; background:rgb(255 255 255 / 12%); color:#fff; font-size:13px; font-weight:600; text-decoration:none; transition:background .16s ease,color .16s ease,border-color .16s ease; }
.fiesta-banner__cines a:hover { border-color:#fff; background:#fff; color:var(--fi-ink); }
.fiesta-banner__cines a:focus-visible { outline:3px solid var(--fi-yellow); outline-offset:2px; }
.home-banners--single .fiesta-banner .fiesta-banner__art { max-width:56%; }

/* ---------- Cartelera: fila en la banda de avisos ---------- */
.cinema-fiesta { position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; min-height:66px; padding:9px 14px 9px 9px; border-radius:14px; background:var(--fi-gradient); color:#fff; text-decoration:none; box-shadow:0 12px 30px -18px rgb(0 0 0 / 70%); transition:transform .16s ease,box-shadow .16s ease; }
.cinema-fiesta::before { content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 0% 0%,rgb(255 255 255 / 16%),transparent 60%); pointer-events:none; }
.cinema-fiesta:hover { transform:translateY(-1px); box-shadow:0 16px 34px -18px rgb(0 0 0 / 80%); }
.cinema-fiesta:focus-visible { outline:2px solid var(--fi-yellow); outline-offset:2px; }
.cinema-fiesta__art { position:relative; flex-shrink:0; width:84px; height:48px; overflow:hidden; border-radius:9px; border:1px solid rgb(255 255 255 / 35%); }
.cinema-fiesta__art img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 12%; }
.cinema-fiesta__heading { position:relative; display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.cinema-fiesta__title { display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; font-size:15px; font-weight:700; line-height:1.3; }
.cinema-fiesta__state { display:inline-flex; align-items:center; gap:5px; padding:1px 8px 1px 7px; border:1px solid rgb(255 255 255 / 34%); border-radius:999px; background:rgb(255 255 255 / 14%); font-size:11px; font-weight:700; line-height:1.5; }
.cinema-fiesta__state::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--fi-yellow); }
.cinema-fiesta__dates { font-size:12px; line-height:1.3; color:rgb(255 255 255 / 85%); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cinema-fiesta__dates .fecha-corta { display:none; }
.cinema-fiesta__price { position:relative; display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; font-family:var(--vc-display); font-size:36px; line-height:.92; letter-spacing:.4px; white-space:nowrap; }
.cinema-fiesta__price small { font-family:var(--vc-font); font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgb(255 255 255 / 82%); }
.cinema-fiesta__cta { position:relative; flex-shrink:0; display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:7px 14px; border-radius:999px; background:#fff; color:var(--fi-ink); font-size:12px; font-weight:700; white-space:nowrap; }

/* ---------- Selector de días: el precio bajo cada día de la campaña ---------- */
.cinema-days button.cinema-days__fiesta, .pd-chip.pd-chip--fiesta { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding-block:4px; border-color:var(--fi-line); background:var(--fi-soft); line-height:1.2; }
.cinema-days button.cinema-days__fiesta:hover, .pd-chip.pd-chip--fiesta:hover { border-color:var(--fi-violet); }
.fiesta-dia { display:block; color:var(--fi-violet); font-size:11px; font-weight:800; letter-spacing:.2px; }
.cinema-days button.cinema-days__fiesta[aria-pressed=true], .pd-chip.pd-chip--fiesta[aria-pressed="true"] { border-color:var(--vc-ink); background:var(--vc-ink); }
[aria-pressed=true] > .fiesta-dia { color:#c9b5ff; }

/* ---------- Sesiones: misma etiqueta que el Día del espectador, en violeta ---------- */
.cinema-session__offer.cinema-session__offer--fiesta { gap:6px; border-color:var(--fi-line); background:var(--fi-soft); color:var(--fi-ink); font-weight:600; }
.cinema-session__offer--fiesta b { font-weight:800; }
.cinema-session--fiesta .cinema-time { border-color:var(--fi-line); background:#faf8ff; color:#35188a; }
.cinema-session--fiesta .cinema-time:has(a) { border-color:#a98bf5; }
.cinema-session--fiesta .cinema-time:has(a):hover { background:#efe8ff; }
.cinema-session--fiesta .cinema-time--past { border-color:#e0e5eb; background:#f3f5f8; color:#687483; }

.pd-day.pd-day-fiesta { border-color:#e2d8ff; background:#faf8ff; }
.pd-day-fiesta .pd-promotion-fiesta { display:inline-flex; width:fit-content; gap:6px; padding:2px 9px 2px 7px; border:1px solid var(--fi-line); border-radius:999px; background:#fff; color:var(--fi-ink); font-weight:600; }
.pd-day-fiesta .pd-promotion-fiesta strong { color:var(--fi-ink); font-weight:800; }
.pd-day-fiesta .pd-time { border-color:var(--fi-line); color:#35188a; }
.pd-day-fiesta .pd-time:hover { background:#efe8ff; border-color:var(--fi-violet); }
.pd-day-fiesta .pd-promotion-preview { margin-top:5px; }

/* Sin sitio para los cuatro cines: queda la tarjeta entera como enlace. */
@media (max-width:1279px) {
  .fiesta-banner .fiesta-banner__cines { display:none; }
  .fiesta-banner__todos { display:none !important; }
}
@media (max-width:1023px) {
  .fiesta-banner__copy { max-width:62%; padding:18px 22px 18px 26px; }
  .fiesta-banner__art { max-width:58%; }
  .fiesta-banner__price strong { font-size:60px; }
}
@media (max-width:700px) {
  /* En móvil la novedad crece un poco para que el precio respire. */
  .home-banners:has(.fiesta-banner) .home-banner { height:176px; }
  /* La ilustración se queda a la derecha (logo y personajes) y el texto no la pisa. */
  .fiesta-banner__art { width:54%; max-width:none; aspect-ratio:auto; object-position:100% 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%); mask-image:linear-gradient(90deg,transparent 0,#000 46%); }
  .fiesta-banner__copy { max-width:62%; padding:14px 0 14px 18px; }
  .fiesta-banner__meta .fecha-larga, .fiesta-banner__todos { display:none !important; }
  .fiesta-banner__meta .fecha-corta { display:inline; }
  .home-page .fiesta-banner__eyebrow { margin-bottom:7px; }
  .fiesta-banner .fiesta-banner__state { padding:2px 9px 2px 7px; font-size:11px; }
  .home-page .fiesta-banner__title { font-size:24px; }
  .fiesta-banner__price { gap:0 7px; }
  .fiesta-banner__price span { display:none; }
  .fiesta-banner__price strong { font-size:54px; }
  .home-page .fiesta-banner__meta { margin-top:3px; font-size:12px; line-height:1.4; }

  .cinema-fiesta { gap:11px; padding:8px 12px 8px 8px; }
  .cinema-fiesta__art { width:58px; height:42px; border-radius:8px; }
  .cinema-fiesta__title { font-size:14px; }
  .cinema-fiesta__state { display:none; }
  .cinema-fiesta__dates .fecha-larga { display:none; }
  .cinema-fiesta__dates .fecha-corta { display:inline; }
  .cinema-fiesta__price { font-size:31px; }
  .cinema-fiesta__price small { font-size:9px; letter-spacing:.9px; }
  .cinema-fiesta__cta { display:none; }
  .fiesta-dia { font-size:10.5px; }
}
@media (max-width:380px) {
  .fiesta-banner__price strong { font-size:48px; }
  .fiesta-banner__copy { padding-left:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .cinema-fiesta, .fiesta-banner__cines a { transition:none; }
  .cinema-fiesta:hover { transform:none; }
}