{"id":435,"date":"2026-08-01T19:07:11","date_gmt":"2026-08-01T17:07:11","guid":{"rendered":"https:\/\/alhambra.app\/crea-tu-historia\/?page_id=435"},"modified":"2026-08-01T19:07:11","modified_gmt":"2026-08-01T17:07:11","slug":"crea-tu-historia","status":"publish","type":"page","link":"https:\/\/alhambra.app\/crea-tu-historia\/id\/","title":{"rendered":"Buatlah ceritamu"},"content":{"rendered":"        <!-- Swiper CSS -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css\" \/>\r\n            <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;600;700&#038;family=Karla:wght@400;500;600;700&#038;display=swap\" \/>\r\n    \r\n    <style>\r\n      :where(.entry-content, .wp-block-post-content, article, .page-content):has(> .entrada-shortcode-spacer) {\r\n  max-width: none !important;\r\n  padding-left: 0 !important;\r\n  padding-right: 0 !important;\r\n  margin-left: 0 !important;\r\n  margin-right: 0 !important;\r\n  width: 100% !important;\r\n}\r\n:where(.site-main > .entry):has(.entrada-shortcode-spacer) {\r\n  max-width: none !important;\r\n  width: 100% !important;\r\n  margin-left: 0 !important;\r\n  margin-right: 0 !important;\r\n}\r\n.entrada-shortcode-spacer {\r\n  display: block;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n  max-width: none;\r\n  margin: 0 !important;\r\n  padding: 0;\r\n}\r\n.entry-content > .entrada-shortcode-spacer {\r\n  margin-bottom: 0 !important;\r\n}\r\n#custom-video-container,\r\n.entrada-shortcode {\r\n  position: relative;\r\n  display: block;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n  max-width: none;\r\n  margin: 0;\r\n  height: calc(100dvh - var(--navbar-height, 3.5rem) - var(--adminbar-height, 0px));\r\n  height: calc(100svh - var(--navbar-height, 3.5rem) - var(--adminbar-height, 0px));\r\n  min-height: 28rem;\r\n  overflow: hidden;\r\n  z-index: 2;\r\n  isolation: isolate;\r\n  background: #0a0a0a;\r\n}\r\n#custom-video-container.entrada-booting {\r\n  opacity: 1;\r\n  visibility: visible;\r\n}\r\n#custom-video-container.entrada-booting .overlay-content,\r\n#custom-video-container.entrada-ui-pending .overlay-content {\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  pointer-events: none;\r\n}\r\n#custom-video-container.entrada-media-ready {\r\n  opacity: 1;\r\n  visibility: visible;\r\n  pointer-events: auto;\r\n}\r\n#custom-video-container.entrada-ui-ready .overlay-content {\r\n  opacity: 1;\r\n  visibility: visible;\r\n  pointer-events: auto;\r\n  transition: opacity 0.18s ease;\r\n}\r\n#custom-video {\r\n  position: absolute;\r\n  inset: 0;\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  max-width: none;\r\n  object-fit: cover;\r\n  object-position: center center;\r\n  opacity: 0.9;\r\n  transform: none;\r\n}\r\n.entrada-bg-image {\r\n  position: absolute;\r\n  inset: 0;\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  max-width: none;\r\n  object-fit: cover;\r\n  object-position: center center;\r\n  opacity: 0.9;\r\n}\r\n.entrada-video-layer {\r\n  position: absolute;\r\n  inset: 0;\r\n  overflow: hidden;\r\n  z-index: 0;\r\n  background: #0a0a0a;\r\n}\r\n.site-main > .entry > .entry-content > .entrada-shortcode-spacer,\r\n.entry-content > .entrada-shortcode-spacer,\r\n.wp-block-shortcode .entrada-shortcode-spacer,\r\n.site-content .entrada-shortcode-spacer {\r\n  width: 100% !important;\r\n  max-width: none !important;\r\n  margin-left: 0 !important;\r\n  margin-right: 0 !important;\r\n}\r\n.site-main > .entry > .entry-content > .entrada-shortcode-spacer > #custom-video-container,\r\n.entry-content > .entrada-shortcode-spacer > #custom-video-container,\r\n.site-content .entrada-shortcode-spacer > #custom-video-container {\r\n  max-width: none !important;\r\n  margin-left: 0 !important;\r\n  margin-right: 0 !important;\r\n}\r\n@media (max-width: 781px) {\r\n  #custom-video-container,\r\n  .entrada-shortcode {\r\n    width: 100% !important;\r\n    height: calc(100dvh - var(--navbar-height, 0px) - var(--mobile-menu-height, 0px) - var(--adminbar-height, 0px));\r\n    min-height: calc(100svh - var(--navbar-height, 0px) - var(--mobile-menu-height, 0px) - var(--adminbar-height, 0px));\r\n  }\r\n  html.entrada-full-hero,\r\n  body.entrada-full-hero {\r\n    overflow: hidden !important;\r\n    height: 100% !important;\r\n    overscroll-behavior: none;\r\n  }\r\n  body.entrada-full-hero .site-content,\r\n  body.entrada-full-hero #content.site-content,\r\n  body.entrada-full-hero .content-area,\r\n  body.entrada-full-hero .site-main,\r\n  body.entrada-full-hero .entry-content {\r\n    min-height: 0 !important;\r\n    height: auto !important;\r\n    overflow: hidden !important;\r\n    margin-bottom: 0 !important;\r\n    padding-bottom: 0 !important;\r\n    background: transparent !important;\r\n  }\r\n  body.entrada-full-hero .site-footer {\r\n    display: none !important;\r\n  }\r\n  body.with-mobile-menu.entrada-full-hero #custom-video-container {\r\n    z-index: 5;\r\n  }\r\n}\r\n#video-fade-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-color: transparent;\r\n  pointer-events: none;\r\n  transition: opacity 1s ease-out;\r\n  opacity: 0;\r\n}\r\n.gradient-overlay {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: var(--entrada-gradient-height, 75%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n  background: linear-gradient(to bottom, \r\n    rgba(255, 255, 255, 0),\r\n    rgba(255, 255, 255, 0.1),\r\n    rgba(255, 255, 255, 0.3),\r\n    rgba(255, 255, 255, 0.5),\r\n    rgba(255, 255, 255, 0.7),\r\n    rgba(255, 255, 255, 0.9),\r\n    rgba(255, 255, 255, 1)\r\n  );\r\n}\r\n.dark .gradient-overlay {\r\n  background: linear-gradient(to bottom,\r\n    rgba(23, 23, 25, 0),\r\n    rgba(23, 23, 25, 0.3),\r\n    rgba(23, 23, 25, 0.5),\r\n    rgba(23, 23, 25, 0.7),\r\n    rgba(23, 23, 25, 0.85),\r\n    rgba(23, 23, 25, 0.95),\r\n    rgb(23, 23, 25)\r\n  );\r\n}\r\n.dark #custom-video-container, html.dark #custom-video-container { --body-bg-color: #000000a8; }\r\n#custom-video-container { --body-bg-color: #ffffff99; --color-grey-500: #32323957; }\r\n.overlay-content {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 10;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  gap: 0.5rem;\r\n  text-align: center;\r\n  padding: 1.25rem 1rem 1rem;\r\n  color: white;\r\n  font-family: var(--entrada-font-body, 'Source Sans 3', sans-serif);\r\n  box-sizing: border-box;\r\n  pointer-events: none;\r\n}\r\n.overlay-content > * {\r\n  pointer-events: auto;\r\n}\r\n.overlay-content h1,\r\n.overlay-content p,\r\n.overlay-content .carrusel-wrapper,\r\n.overlay-content #continuar-btn {\r\n  width: 100%;\r\n  max-width: 560px;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n}\r\n#custom-video-container.entrada-single-mode .overlay-content {\r\n  justify-content: flex-end;\r\n  padding-bottom: 1.5rem;\r\n  gap: 0.75rem;\r\n}\r\n#custom-video-container.entrada-single-mode .overlay-content h1,\r\n#custom-video-container.entrada-single-mode .overlay-content p {\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n}\r\n#custom-video-container.entrada-single-mode .overlay-content #continuar-btn {\r\n  margin-top: 0.35rem;\r\n}\r\n#custom-video-container.entrada-single-mode #custom-video,\r\n#custom-video-container.entrada-single-mode .entrada-bg-image,\r\n#custom-video-container.entrada-single-mode .entrada-video-layer {\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n#custom-video-container.entrada-single-mode #custom-video,\r\n#custom-video-container.entrada-single-mode .entrada-bg-image {\r\n  object-fit: cover;\r\n  object-position: center center;\r\n}\r\n.overlay-content h1 {\r\n  font-family: var(--entrada-font-display, Georgia, serif);\r\n  font-size: var(--entrada-title-size, 3rem);\r\n  font-weight: var(--entrada-title-weight, 600);\r\n  letter-spacing: var(--entrada-title-tracking, -0.015em);\r\n  line-height: 1.12;\r\n  margin: 0;\r\n  color: #fff;\r\n  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);\r\n}\r\n.overlay-content p {\r\n  font-family: var(--entrada-font-body, sans-serif);\r\n  font-size: var(--entrada-desc-size, 1.1rem);\r\n  font-weight: var(--entrada-body-weight, 400);\r\n  line-height: var(--entrada-body-lh, 1.55);\r\n  letter-spacing: 0.01em;\r\n  max-width: 560px;\r\n  margin: 0;\r\n  color: rgba(255, 255, 255, 0.94);\r\n  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);\r\n}\r\n.carrusel-wrapper {\r\n  max-width: 560px;\r\n  width: 100%;\r\n  margin: 0.15rem auto 0.25rem;\r\n  overflow: visible;\r\n  position: relative;\r\n  left: auto;\r\n  right: auto;\r\n  transform: none;\r\n  min-height: calc(var(--entrada-card-image-size, 150px) + 2.75rem);\r\n}\r\n.carrusel-personajes {\r\n  width: 100%;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n}\r\n.carrusel-personajes .swiper-slide { text-align: center; }\r\n.carrusel-personajes img {\r\n  width: var(--entrada-card-image-size, 150px);\r\n  height: auto;\r\n  border-radius: 12px;\r\n  box-shadow: 0 4px 12px rgba(0,0,0,0.15);\r\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  margin-bottom: 0;\r\n  box-sizing: border-box;\r\n  transform-origin: center center;\r\n  display: block;\r\n}\r\n.carrusel-personajes .swiper-slide:hover img,\r\n.carrusel-personajes img:hover {\r\n  transform: scale(1.04);\r\n}\r\n.carrusel-personajes h3 {\r\n  font-family: var(--entrada-font-display, Georgia, serif);\r\n  font-size: var(--entrada-card-title-size, 0.9rem);\r\n  font-weight: var(--entrada-card-weight, 600);\r\n  letter-spacing: 0.03em;\r\n  margin: 0.35rem 0 0;\r\n  color: white;\r\n  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);\r\n}\r\n.swiper-button-prev::after, .swiper-button-next::after { display: none !important; }\r\n.custom-swiper-button {\r\n  background-color: var(--color-primary) !important;\r\n  background-image: none !important;\r\n  border: none !important;\r\n  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  min-width: 28px !important;\r\n  margin-top: 0 !important;\r\n  border-radius: 50% !important;\r\n  display: flex !important;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: absolute;\r\n  top: 42%;\r\n  transform: translateY(-50%);\r\n  cursor: pointer;\r\n  z-index: 10;\r\n  color: #fff !important;\r\n  opacity: 0.95;\r\n  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n.swiper-button-prev.custom-swiper-button { left: 4px; }\r\n.swiper-button-next.custom-swiper-button { right: 4px; }\r\n.custom-swiper-button:hover,\r\n.custom-swiper-button:focus {\r\n  background-color: var(--color-primary) !important;\r\n  opacity: 1;\r\n  transform: translateY(-50%) scale(1.06);\r\n  box-shadow: 0 3px 10px rgba(0,0,0,0.3) !important;\r\n}\r\n.custom-swiper-button .arrow-icon {\r\n  width: 14px !important;\r\n  height: 14px !important;\r\n}\r\n.custom-swiper-button .arrow-icon,\r\n.custom-swiper-button .arrow-icon * {\r\n  stroke: #fff !important;\r\n  fill: none !important;\r\n  color: #fff !important;\r\n  stroke-width: 2.25 !important;\r\n}\r\n.swiper-slide.selected img {\r\n  border: none !important;\r\n  box-shadow: 0 0 0 var(--entrada-selected-border, 4px) var(--color-primary), 0 4px 12px rgba(0,0,0,0.2) !important;\r\n}\r\n#continuar-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 11px 18px;\r\n  font-family: var(--entrada-font-body, sans-serif);\r\n  font-size: 1rem;\r\n  font-weight: var(--entrada-btn-weight, 600);\r\n  letter-spacing: var(--entrada-btn-tracking, 0.03em);\r\n  border-radius: 8px;\r\n  min-width: 300px;\r\n  text-align: center;\r\n  margin: 0.15rem auto 0;\r\n  text-shadow: none;\r\n  border: 2px solid transparent;\r\n  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, backdrop-filter 0.2s ease;\r\n  box-sizing: border-box;\r\n}\r\n\/* 1) Primario \u2014 recomendado *\/\r\n#continuar-btn.entrada-btn-primario:not([disabled]) {\r\n  background-color: var(--color-primary) !important;\r\n  color: #fff !important;\r\n  border-color: var(--color-primary) !important;\r\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);\r\n}\r\n#continuar-btn.entrada-btn-primario:not([disabled]):hover {\r\n  filter: brightness(1.06);\r\n  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34);\r\n  transform: translateY(-1px);\r\n}\r\n\/* 2) Invertido *\/\r\n#continuar-btn.entrada-btn-invertido:not([disabled]) {\r\n  background-color: #0b0b0d !important;\r\n  color: var(--color-primary) !important;\r\n  border-color: #1a1a1e !important;\r\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);\r\n}\r\n#continuar-btn.entrada-btn-invertido:not([disabled]):hover {\r\n  background-color: #141418 !important;\r\n  border-color: var(--color-primary) !important;\r\n  transform: translateY(-1px);\r\n}\r\n\/* 3) Contorno *\/\r\n#continuar-btn.entrada-btn-contorno:not([disabled]) {\r\n  background-color: rgba(0, 0, 0, 0.35) !important;\r\n  color: var(--color-primary) !important;\r\n  border-color: var(--color-primary) !important;\r\n  box-shadow: none;\r\n}\r\n#continuar-btn.entrada-btn-contorno:not([disabled]):hover {\r\n  background-color: var(--color-primary) !important;\r\n  color: #fff !important;\r\n  transform: translateY(-1px);\r\n}\r\n\/* 4) Claro *\/\r\n#continuar-btn.entrada-btn-claro:not([disabled]) {\r\n  background-color: #f4f0e8 !important;\r\n  color: #1c1917 !important;\r\n  border-color: #f4f0e8 !important;\r\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);\r\n}\r\n#continuar-btn.entrada-btn-claro:not([disabled]):hover {\r\n  background-color: #fffaf3 !important;\r\n  transform: translateY(-1px);\r\n}\r\n\/* 5) Cristal *\/\r\n#continuar-btn.entrada-btn-cristal:not([disabled]) {\r\n  background-color: rgba(255, 255, 255, 0.12) !important;\r\n  color: #fff !important;\r\n  border-color: rgba(255, 255, 255, 0.35) !important;\r\n  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);\r\n  backdrop-filter: blur(10px);\r\n  -webkit-backdrop-filter: blur(10px);\r\n}\r\n#continuar-btn.entrada-btn-cristal:not([disabled]):hover {\r\n  background-color: rgba(255, 255, 255, 0.2) !important;\r\n  border-color: rgba(255, 255, 255, 0.55) !important;\r\n  transform: translateY(-1px);\r\n}\r\n\/* Responsive tipograf\u00eda *\/\r\n@media (max-width: 1024px) {\r\n  .overlay-content h1 {\r\n    font-size: var(--entrada-title-size-tablet, 2.4rem);\r\n  }\r\n  .carrusel-wrapper {\r\n    min-height: calc(var(--entrada-card-image-size-tablet, 135px) + 2.75rem);\r\n  }\r\n  .carrusel-personajes h3 {\r\n    font-size: var(--entrada-card-title-size-tablet, 0.85rem);\r\n  }\r\n  .carrusel-personajes img {\r\n    width: var(--entrada-card-image-size-tablet, 135px);\r\n  }\r\n}\r\n@media (max-width: 768px) {\r\n  .overlay-content {\r\n    gap: 0.35rem;\r\n    padding: 0.75rem 0.85rem 0.65rem;\r\n  }\r\n  .overlay-content h1 {\r\n    font-size: var(--entrada-title-size-mobile, 1.85rem);\r\n  }\r\n  .overlay-content p {\r\n    font-size: var(--entrada-desc-size, 1rem);\r\n    padding: 0 0.25rem;\r\n    line-height: 1.35;\r\n  }\r\n  .carrusel-wrapper {\r\n    margin: 0.1rem auto 0.15rem;\r\n    padding-inline: 8px;\r\n    min-height: calc(var(--entrada-card-image-size-mobile, 120px) + 2.5rem);\r\n  }\r\n  .carrusel-personajes img {\r\n    width: var(--entrada-card-image-size-mobile, 120px);\r\n  }\r\n  .carrusel-personajes h3 {\r\n    margin-top: 0.25rem;\r\n    font-size: var(--entrada-card-title-size-mobile, 0.8rem);\r\n  }\r\n  #continuar-btn {\r\n    min-width: min(300px, 100%);\r\n    padding: 9px 14px;\r\n    margin-top: 0.1rem;\r\n  }\r\n}\r\n.carrusel-personajes .swiper-slide {\r\n  text-align: center;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  height: auto !important;\r\n  min-height: 0px;\r\n  padding: 10px 6px 0.25rem;\r\n  overflow: visible;\r\n  box-sizing: border-box;\r\n}\r\n.custom-swiper-button.disabled {\r\n  background-color: #6b7280 !important;\r\n  opacity: 1 !important;\r\n  pointer-events: none !important;\r\n  cursor: default !important;\r\n  box-shadow: none !important;\r\n}\r\n\/* Modal sin cr\u00e9ditos: centrado + respeta tema claro\/oscuro (como guest-play-modal) *\/\r\n#entrada-sin-creditos-modal {\r\n  z-index: 20000 !important;\r\n}\r\n#entrada-sin-creditos-modal.modal {\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n#entrada-sin-creditos-modal.modal.show,\r\n#entrada-sin-creditos-modal.entrada-modal-open,\r\nbody.entrada-modal-visible #entrada-sin-creditos-modal {\r\n  display: flex !important;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 1rem;\r\n}\r\n#entrada-sin-creditos-modal .modal-dialog {\r\n  max-width: 420px;\r\n  width: 100%;\r\n  margin: 0 auto;\r\n  position: relative;\r\n  transform: none !important;\r\n  top: auto !important;\r\n}\r\n#entrada-sin-creditos-modal .modal-content {\r\n  background: #fff !important;\r\n  border: none !important;\r\n  border-radius: 16px !important;\r\n  overflow: hidden !important;\r\n  padding: 0 !important;\r\n  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18) !important;\r\n  color: #212529;\r\n}\r\n.dark #entrada-sin-creditos-modal .modal-content,\r\nhtml.dark #entrada-sin-creditos-modal .modal-content {\r\n  background: #010305 !important;\r\n  color: #fff;\r\n  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal {\r\n  --gp-bg: #fff;\r\n  --gp-text: #212529;\r\n  --gp-muted: #6b7280;\r\n  --gp-primary: var(--color-primary, #ff5500);\r\n  --gp-border: rgba(100, 110, 120, 0.28);\r\n  --gp-glass: rgba(255, 255, 255, 0.72);\r\n  background: var(--gp-bg);\r\n  border-radius: 16px;\r\n  overflow: hidden;\r\n  text-align: left;\r\n  color: var(--gp-text);\r\n}\r\n.dark #entrada-sin-creditos-modal .guest-play-modal,\r\nhtml.dark #entrada-sin-creditos-modal .guest-play-modal {\r\n  --gp-bg: #010305;\r\n  --gp-text: #fff;\r\n  --gp-muted: #aaa;\r\n  --gp-border: rgba(150, 155, 160, 0.25);\r\n  --gp-glass: rgba(1, 3, 5, 0.72);\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__hero {\r\n  position: relative;\r\n  height: min(42vh, 340px);\r\n  min-height: 200px;\r\n  background-size: cover;\r\n  background-position: center top;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__hero-fade {\r\n  position: absolute;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  height: 55%;\r\n  background: linear-gradient(180deg, transparent 0%, var(--gp-bg) 92%);\r\n  pointer-events: none;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__grabber {\r\n  position: absolute;\r\n  top: 10px;\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 2;\r\n  display: flex;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__grabber span {\r\n  display: block;\r\n  width: 36px;\r\n  height: 4px;\r\n  border-radius: 999px;\r\n  background: rgba(255, 255, 255, 0.55);\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__close {\r\n  position: absolute;\r\n  top: 12px;\r\n  right: 12px;\r\n  z-index: 5;\r\n  width: 36px;\r\n  height: 36px;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  background: var(--gp-glass);\r\n  color: var(--gp-text) !important;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  pointer-events: auto;\r\n  backdrop-filter: blur(8px);\r\n  -webkit-backdrop-filter: blur(8px);\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__close svg {\r\n  width: 18px;\r\n  height: 18px;\r\n  stroke: currentColor;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__body {\r\n  padding: 8px 22px calc(18px + env(safe-area-inset-bottom, 0px));\r\n  background: var(--gp-bg);\r\n  color: var(--gp-text);\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__heading {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin: 0 0 10px;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__title {\r\n  margin: 0;\r\n  font-size: 1.45rem;\r\n  font-weight: 700;\r\n  letter-spacing: -0.02em;\r\n  color: var(--gp-text);\r\n  line-height: 1.2;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  padding: 2px 8px;\r\n  border: 1px solid var(--gp-border);\r\n  border-radius: 999px;\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.04em;\r\n  text-transform: lowercase;\r\n  color: var(--gp-muted);\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__intro {\r\n  margin: 0 0 20px;\r\n  font-size: 0.9rem;\r\n  color: var(--gp-muted);\r\n  line-height: 1.45;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__features {\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 14px;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__feature {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 12px;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__feature-icon {\r\n  flex: 0 0 auto;\r\n  width: 22px;\r\n  height: 22px;\r\n  margin-top: 2px;\r\n  color: var(--gp-text);\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__feature-icon svg {\r\n  width: 22px;\r\n  height: 22px;\r\n  display: block;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__feature-title {\r\n  font-size: 0.95rem;\r\n  font-weight: 650;\r\n  color: var(--gp-text);\r\n  margin: 0 0 2px;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__feature-desc {\r\n  font-size: 0.82rem;\r\n  color: var(--gp-muted);\r\n  line-height: 1.4;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__actions {\r\n  margin-top: 22px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__cta {\r\n  width: 100%;\r\n  min-height: 50px;\r\n  border: 0;\r\n  border-radius: 999px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 1rem;\r\n  font-weight: 650;\r\n  text-decoration: none !important;\r\n  background: var(--gp-primary);\r\n  color: #fff !important;\r\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--gp-primary) 35%, transparent);\r\n  padding: 12px 18px;\r\n}\r\n#entrada-sin-creditos-modal .guest-play-modal__cta--secondary {\r\n  background: transparent !important;\r\n  color: var(--gp-primary) !important;\r\n  border: 2px solid var(--gp-primary) !important;\r\n  box-shadow: none !important;\r\n}\r\n#entrada-sin-creditos-modal.entrada-modal-open,\r\nbody.entrada-modal-visible #entrada-sin-creditos-modal {\r\n  display: flex !important;\r\n  position: fixed;\r\n  inset: 0;\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  background: rgba(0, 0, 0, 0.55);\r\n  padding: 1rem;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.entrada-modal-backdrop {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: 19999;\r\n  background: rgba(0, 0, 0, 0.55);\r\n}\r\nbody.entrada-modal-visible {\r\n  overflow: hidden;\r\n}    <\/style>\r\n\r\n    <!-- Estilos din\u00e1micos: tipograf\u00eda y tama\u00f1os configurables -->\r\n    <style>\r\n      #custom-video-container{\r\n        --entrada-title-size: 2.2rem;\r\n        --entrada-title-size-tablet: 2.4rem;\r\n        --entrada-title-size-mobile: 1.85rem;\r\n        --entrada-desc-size: 0.9rem;\r\n        --entrada-card-title-size: 0.9rem;\r\n        --entrada-card-title-size-tablet: 0.85rem;\r\n        --entrada-card-title-size-mobile: 0.8rem;\r\n        --entrada-card-image-size: 150px;\r\n        --entrada-card-image-size-tablet: 135px;\r\n        --entrada-card-image-size-mobile: 120px;\r\n        --entrada-selected-border: 1px;\r\n        --entrada-gradient-height: 25%;\r\n        --entrada-font-display: 'Cinzel', Georgia, serif;\r\n        --entrada-font-body: 'Karla', 'Segoe UI', sans-serif;\r\n        --entrada-title-weight: 600;\r\n        --entrada-title-tracking: 0.06em;\r\n        --entrada-body-weight: 400;\r\n        --entrada-body-lh: 1.55;\r\n        --entrada-card-weight: 600;\r\n        --entrada-btn-weight: 600;\r\n        --entrada-btn-tracking: 0.08em;\r\n      }\r\n      #custom-video {\r\n        filter: brightness(0.9) contrast(1.1);\r\n      }\r\n      #custom-bg-image {\r\n        filter: brightness(0.9) contrast(1.1);\r\n      }\r\n    <\/style>\r\n\r\n    <div class=\"entrada-shortcode-spacer\" id=\"entrada-shortcode-spacer\">\r\n      <div id=\"custom-video-container\" class=\"entrada-shortcode entrada-booting entrada-typo-andalusi entrada-ui-pending\"\r\n           data-default-video=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/baja\/crea-03.mp4\"\r\n           data-default-bg-image=\"\"\r\n           data-default-filter=\"brightness(0.9) contrast(1.1)\"\r\n           data-default-sound=\"0\"\r\n           data-default-volume=\"100\"\r\n           data-default-title=\"Crea tu historia\"\r\n           data-default-desc=\"Descubre la magia de la Alhambra creando tu propia historia. &lt;strong&gt; T\u00fa eliges el camino, t\u00fa cambias el curso y t\u00fa vives cada momento como protagonista.&lt;\/strong&gt; \u00a1Empieza ahora una experiencia \u00fanica e inolvidable!.\"\r\n           data-button-label=\"Continuar\"\r\n           data-entries-enabled=\"1\"\r\n           data-single-url=\"\"\r\n           data-no-credits-modal=\"1\"\r\n           data-has-credits=\"0\">\r\n      <div class=\"entrada-video-layer\">\r\n      <div id=\"video-fade-overlay\"><\/div>\r\n      <video id=\"custom-video\" muted playsinline loop disableRemotePlayback preload=\"auto\"><\/video>\r\n      <img id=\"custom-bg-image\" class=\"entrada-bg-image\" alt=\"\" hidden>\r\n      <div class=\"gradient-overlay\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"overlay-content\">\r\n        <h1>Crea tu historia<\/h1>\r\n        <p>Descubre la magia de la Alhambra creando tu propia historia. <strong> T\u00fa eliges el camino, t\u00fa cambias el curso y t\u00fa vives cada momento como protagonista.<\/strong> \u00a1Empieza ahora una experiencia \u00fanica e inolvidable!.<\/p>\r\n\r\n                <div class=\"carrusel-wrapper\">\r\n          <div class=\"swiper carrusel-personajes\">\r\n            <div class=\"swiper-wrapper\">\r\n                              <div class=\"swiper-slide\"\r\n                     id=\"entrada-aventura\"                     data-id=\"0\"\r\n                     data-anchor=\"aventura\"\r\n                     data-url=\"https:\/\/alhambra.app\/crea-tu-historia\/id\/aventura\/\"\r\n                     data-image-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/aventura.jpg\"\r\n                     data-image-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/aventura.jpg\"\r\n                     data-bg-image-light=\"\"\r\n                     data-bg-image-dark=\"\"\r\n                     data-video-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/aventura.mp4\"\r\n                     data-video-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/aventura.mp4\"\r\n                     data-video-brightness-light=\"90\"\r\n                     data-video-contrast-light=\"110\"\r\n                     data-video-brightness-dark=\"90\"\r\n                     data-video-contrast-dark=\"110\"\r\n                     data-video-sound-light=\"0\"\r\n                     data-video-volume-light=\"100\"\r\n                     data-video-sound-dark=\"0\"\r\n                     data-video-volume-dark=\"100\"\r\n                     data-audio=\"\"\r\n                     data-screen-title=\"Aventura\"\r\n                     data-screen-desc=\"&lt;p&gt;Ad\u00e9ntrate en &lt;strong&gt;pasadizos ocultos&lt;\/strong&gt;, supera peligros y descubre los &lt;strong&gt;secretos de la Alhambra&lt;\/strong&gt;. Cada decisi\u00f3n marcar\u00e1 el rumbo de una aventura en la que &lt;strong&gt;t\u00fa eres el protagonista&lt;\/strong&gt;.&lt;\/p&gt;\">\r\n                  <img alt=\"Aventura\" \/>\r\n                  <h3>Aventura<\/h3>\r\n                <\/div>\r\n                              <div class=\"swiper-slide\"\r\n                     id=\"entrada-epico\"                     data-id=\"1\"\r\n                     data-anchor=\"epico\"\r\n                     data-url=\"https:\/\/alhambra.app\/crea-tu-historia\/id\/epico\/\"\r\n                     data-image-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/epico.jpg\"\r\n                     data-image-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/epico.jpg\"\r\n                     data-bg-image-light=\"\"\r\n                     data-bg-image-dark=\"\"\r\n                     data-video-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/epico.mp4\"\r\n                     data-video-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/epico.mp4\"\r\n                     data-video-brightness-light=\"90\"\r\n                     data-video-contrast-light=\"110\"\r\n                     data-video-brightness-dark=\"90\"\r\n                     data-video-contrast-dark=\"110\"\r\n                     data-video-sound-light=\"0\"\r\n                     data-video-volume-light=\"100\"\r\n                     data-video-sound-dark=\"0\"\r\n                     data-video-volume-dark=\"100\"\r\n                     data-audio=\"\"\r\n                     data-screen-title=\"\u00c9pico\"\r\n                     data-screen-desc=\"&lt;p&gt;Vive una historia de &lt;strong&gt;reinos enfrentados&lt;\/strong&gt;, grandes batallas y destinos legendarios. Toma decisiones decisivas y escribe tu propia &lt;strong&gt;haza\u00f1a entre los muros de la Alhambra&lt;\/strong&gt;.&lt;\/p&gt;\">\r\n                  <img alt=\"\u00c9pico\" \/>\r\n                  <h3>\u00c9pico<\/h3>\r\n                <\/div>\r\n                              <div class=\"swiper-slide\"\r\n                     id=\"entrada-fantasia\"                     data-id=\"2\"\r\n                     data-anchor=\"fantasia\"\r\n                     data-url=\"https:\/\/alhambra.app\/crea-tu-historia\/id\/fantasia\/\"\r\n                     data-image-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/fantasia.jpg\"\r\n                     data-image-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/fantasia.jpg\"\r\n                     data-bg-image-light=\"\"\r\n                     data-bg-image-dark=\"\"\r\n                     data-video-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/fantasia.mp4\"\r\n                     data-video-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/fantasia.mp4\"\r\n                     data-video-brightness-light=\"90\"\r\n                     data-video-contrast-light=\"110\"\r\n                     data-video-brightness-dark=\"90\"\r\n                     data-video-contrast-dark=\"110\"\r\n                     data-video-sound-light=\"0\"\r\n                     data-video-volume-light=\"100\"\r\n                     data-video-sound-dark=\"0\"\r\n                     data-video-volume-dark=\"100\"\r\n                     data-audio=\"\"\r\n                     data-screen-title=\"Fantas\u00eda\"\r\n                     data-screen-desc=\"&lt;p&gt;Cruza la frontera entre &lt;strong&gt;la historia y la magia&lt;\/strong&gt; en una Alhambra llena de criaturas, hechizos y antiguos poderes. Elige tu camino y descubre un mundo donde &lt;strong&gt;todo es posible&lt;\/strong&gt;.&lt;\/p&gt;\">\r\n                  <img alt=\"Fantas\u00eda\" \/>\r\n                  <h3>Fantas\u00eda<\/h3>\r\n                <\/div>\r\n                              <div class=\"swiper-slide\"\r\n                     id=\"entrada-misterio\"                     data-id=\"3\"\r\n                     data-anchor=\"misterio\"\r\n                     data-url=\"https:\/\/alhambra.app\/crea-tu-historia\/id\/misterio\/\"\r\n                     data-image-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/misterio.jpg\"\r\n                     data-image-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/misterio.jpg\"\r\n                     data-bg-image-light=\"\"\r\n                     data-bg-image-dark=\"\"\r\n                     data-video-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/misterio.mp4\"\r\n                     data-video-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/misterio.mp4\"\r\n                     data-video-brightness-light=\"90\"\r\n                     data-video-contrast-light=\"110\"\r\n                     data-video-brightness-dark=\"90\"\r\n                     data-video-contrast-dark=\"110\"\r\n                     data-video-sound-light=\"0\"\r\n                     data-video-volume-light=\"100\"\r\n                     data-video-sound-dark=\"0\"\r\n                     data-video-volume-dark=\"100\"\r\n                     data-audio=\"\"\r\n                     data-screen-title=\"Misterio\"\r\n                     data-screen-desc=\"&lt;p&gt;Investiga enigmas, sigue pistas y revela los &lt;strong&gt;secretos escondidos de la Alhambra&lt;\/strong&gt;. Observa cada detalle, porque &lt;strong&gt;una sola decisi\u00f3n puede cambiar toda la historia&lt;\/strong&gt;.&lt;\/p&gt;\">\r\n                  <img alt=\"Misterio\" \/>\r\n                  <h3>Misterio<\/h3>\r\n                <\/div>\r\n                              <div class=\"swiper-slide\"\r\n                     id=\"entrada-romantica\"                     data-id=\"4\"\r\n                     data-anchor=\"romantica\"\r\n                     data-url=\"https:\/\/alhambra.app\/crea-tu-historia\/id\/romantica\/\"\r\n                     data-image-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/romantica.jpg\"\r\n                     data-image-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/romantica.jpg\"\r\n                     data-bg-image-light=\"\"\r\n                     data-bg-image-dark=\"\"\r\n                     data-video-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/romantica.mp4\"\r\n                     data-video-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/romantica.mp4\"\r\n                     data-video-brightness-light=\"90\"\r\n                     data-video-contrast-light=\"110\"\r\n                     data-video-brightness-dark=\"90\"\r\n                     data-video-contrast-dark=\"110\"\r\n                     data-video-sound-light=\"0\"\r\n                     data-video-volume-light=\"100\"\r\n                     data-video-sound-dark=\"0\"\r\n                     data-video-volume-dark=\"100\"\r\n                     data-audio=\"\"\r\n                     data-screen-title=\"Rom\u00e1ntica\"\r\n                     data-screen-desc=\"&lt;p&gt;D\u00e9jate llevar por una historia de &lt;strong&gt;encuentros inesperados&lt;\/strong&gt;, sentimientos prohibidos y decisiones del coraz\u00f3n. Vive un &lt;strong&gt;romance inolvidable&lt;\/strong&gt; entre palacios, jardines y noches de leyenda.&lt;\/p&gt;\">\r\n                  <img alt=\"Rom\u00e1ntica\" \/>\r\n                  <h3>Rom\u00e1ntica<\/h3>\r\n                <\/div>\r\n                              <div class=\"swiper-slide\"\r\n                     id=\"entrada-terror\"                     data-id=\"5\"\r\n                     data-anchor=\"terror\"\r\n                     data-url=\"https:\/\/alhambra.app\/crea-tu-historia\/id\/terror\/\"\r\n                     data-image-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/terror.jpg\"\r\n                     data-image-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/terror.jpg\"\r\n                     data-bg-image-light=\"\"\r\n                     data-bg-image-dark=\"\"\r\n                     data-video-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/terror.mp4\"\r\n                     data-video-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/terror.mp4\"\r\n                     data-video-brightness-light=\"90\"\r\n                     data-video-contrast-light=\"110\"\r\n                     data-video-brightness-dark=\"90\"\r\n                     data-video-contrast-dark=\"110\"\r\n                     data-video-sound-light=\"0\"\r\n                     data-video-volume-light=\"100\"\r\n                     data-video-sound-dark=\"0\"\r\n                     data-video-volume-dark=\"100\"\r\n                     data-audio=\"\"\r\n                     data-screen-title=\"Terror\"\r\n                     data-screen-desc=\"&lt;p&gt;Entra en una Alhambra envuelta en &lt;strong&gt;sombras, susurros y presencias inquietantes&lt;\/strong&gt;. Avanza con cuidado, toma tus decisiones y descubre si lograr\u00e1s escapar de &lt;strong&gt;aquello que te observa&lt;\/strong&gt;.&lt;\/p&gt;\">\r\n                  <img alt=\"Terror\" \/>\r\n                  <h3>Terror<\/h3>\r\n                <\/div>\r\n                              <div class=\"swiper-slide\"\r\n                     id=\"entrada-ficcion\"                     data-id=\"6\"\r\n                     data-anchor=\"ficcion\"\r\n                     data-url=\"https:\/\/alhambra.app\/crea-tu-historia\/id\/ficcion\/\"\r\n                     data-image-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/ficcion.jpg\"\r\n                     data-image-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/ficcion.jpg\"\r\n                     data-bg-image-light=\"\"\r\n                     data-bg-image-dark=\"\"\r\n                     data-video-light=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/ficcion.mp4\"\r\n                     data-video-dark=\"https:\/\/cdn.alhambra.app\/General\/Cuentos\/fondos-video\/categorias\/ficcion.mp4\"\r\n                     data-video-brightness-light=\"90\"\r\n                     data-video-contrast-light=\"110\"\r\n                     data-video-brightness-dark=\"90\"\r\n                     data-video-contrast-dark=\"110\"\r\n                     data-video-sound-light=\"0\"\r\n                     data-video-volume-light=\"100\"\r\n                     data-video-sound-dark=\"0\"\r\n                     data-video-volume-dark=\"100\"\r\n                     data-audio=\"\"\r\n                     data-screen-title=\"Ficci\u00f3n\"\r\n                     data-screen-desc=\"&lt;p&gt;Imagina una &lt;strong&gt;Alhambra diferente&lt;\/strong&gt; y protagoniza una historia completamente original. Cambia el curso de los acontecimientos y construye un &lt;strong&gt;relato \u00fanico mediante tus propias decisiones&lt;\/strong&gt;.&lt;\/p&gt;\">\r\n                  <img alt=\"Ficci\u00f3n\" \/>\r\n                  <h3>Ficci\u00f3n<\/h3>\r\n                <\/div>\r\n                          <\/div>\r\n\r\n            <div class=\"swiper-button-prev custom-swiper-button\" aria-label=\"Anterior\">\r\n              <svg class=\"arrow-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <polyline points=\"15 18 9 12 15 6\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/polyline>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"swiper-button-next custom-swiper-button\" aria-label=\"Siguiente\">\r\n              <svg class=\"arrow-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                <polyline points=\"9 18 15 12 9 6\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/polyline>\r\n              <\/svg>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <button id=\"continuar-btn\" class=\"entrada-btn entrada-btn-primario\"\r\n                disabled                data-enabled-label=\"Continuar\"\r\n                data-placeholder-label=\"Selecciona una opci\u00f3n\"\r\n                data-single-url=\"\">\r\n          Selecciona una opci\u00f3n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n      (function () {\r\n        var container = document.getElementById('custom-video-container');\r\n        var video = document.getElementById('custom-video');\r\n        if (!container || !video) return;\r\n\r\n        function normalizeAnchor(value) {\r\n          return String(value || '').trim().replace(\/^#\/, '').toLowerCase();\r\n        }\r\n\r\n        function detectTheme() {\r\n          var html = document.documentElement;\r\n          if (html.classList.contains('dark')) return 'dark';\r\n          if (html.classList.contains('light')) return 'light';\r\n          var dt = (html.getAttribute('data-theme') || '').toLowerCase();\r\n          if (dt === 'dark' || dt === 'light') return dt;\r\n          try {\r\n            var raw = localStorage.getItem('setting');\r\n            if (raw) {\r\n              var obj = JSON.parse(raw);\r\n              if (obj && (obj.theme === 'dark' || obj.theme === 'light')) return obj.theme;\r\n            }\r\n          } catch (e) {}\r\n          return 'light';\r\n        }\r\n\r\n        function preferredVideo(slide, theme) {\r\n          var light = slide.getAttribute('data-video-light') || '';\r\n          var dark = slide.getAttribute('data-video-dark') || '';\r\n          return theme === 'dark' ? (dark || light || '') : (light || dark || '');\r\n        }\r\n\r\n        function preferredBgImage(slide, theme) {\r\n          var light = slide.getAttribute('data-bg-image-light') || '';\r\n          var dark = slide.getAttribute('data-bg-image-dark') || '';\r\n          return theme === 'dark' ? (dark || light || '') : (light || dark || '');\r\n        }\r\n\r\n        function isImageMediaUrl(url) {\r\n          return \/\\.(jpe?g|png|gif|webp|avif|svg)(\\?|#|$)\/i.test(String(url || ''));\r\n        }\r\n\r\n        function preferredFilter(slide, theme) {\r\n          var brightness = slide.getAttribute('data-video-brightness-' + theme)\r\n            || slide.getAttribute('data-video-brightness-light')\r\n            || '100';\r\n          var contrast = slide.getAttribute('data-video-contrast-' + theme)\r\n            || slide.getAttribute('data-video-contrast-light')\r\n            || '100';\r\n          var b = Math.max(0, Math.min(200, parseFloat(brightness) || 100)) \/ 100;\r\n          var c = Math.max(0, Math.min(200, parseFloat(contrast) || 100)) \/ 100;\r\n          return 'brightness(' + b + ') contrast(' + c + ')';\r\n        }\r\n\r\n        function preferredVideoSound(slide, theme) {\r\n          if (!slide) return false;\r\n          var key = theme === 'dark' ? 'data-video-sound-dark' : 'data-video-sound-light';\r\n          var fallback = slide.getAttribute('data-video-sound-light') || '0';\r\n          return (slide.getAttribute(key) || fallback) === '1';\r\n        }\r\n\r\n        function preferredVideoVolume(slide, theme) {\r\n          if (!slide) return 100;\r\n          var key = theme === 'dark' ? 'data-video-volume-dark' : 'data-video-volume-light';\r\n          var fallback = slide.getAttribute('data-video-volume-light') || '100';\r\n          var raw = slide.getAttribute(key) || fallback;\r\n          var n = parseFloat(raw);\r\n          if (isNaN(n)) n = 100;\r\n          return Math.max(0, Math.min(100, n));\r\n        }\r\n\r\n        var hash = normalizeAnchor(window.location.hash);\r\n        var theme = detectTheme();\r\n        var slide = null;\r\n        if (hash) {\r\n          var slides = container.querySelectorAll('.carrusel-personajes .swiper-slide');\r\n          for (var i = 0; i < slides.length; i++) {\r\n            var a = normalizeAnchor(slides[i].getAttribute('data-anchor'));\r\n            if (a === hash) { slide = slides[i]; break; }\r\n          }\r\n        }\r\n\r\n        var videoUrl = slide\r\n          ? preferredVideo(slide, theme)\r\n          : (container.getAttribute('data-default-video') || '');\r\n        var bgImageUrl = slide\r\n          ? preferredBgImage(slide, theme)\r\n          : (container.getAttribute('data-default-bg-image') || '');\r\n        var filterCss = slide\r\n          ? preferredFilter(slide, theme)\r\n          : (container.getAttribute('data-default-filter') || '');\r\n        var bgImageEl = document.getElementById('custom-bg-image');\r\n        var mediaIsImage = (videoUrl && isImageMediaUrl(videoUrl)) || (!videoUrl && !!bgImageUrl);\r\n        var imageUrl = (videoUrl && isImageMediaUrl(videoUrl)) ? videoUrl : bgImageUrl;\r\n\r\n        if (mediaIsImage && imageUrl && bgImageEl) {\r\n          video.style.display = 'none';\r\n          bgImageEl.hidden = false;\r\n          bgImageEl.style.display = 'block';\r\n          bgImageEl.src = imageUrl;\r\n          if (filterCss) bgImageEl.style.filter = filterCss;\r\n        } else if (videoUrl) {\r\n          if (bgImageEl) {\r\n            bgImageEl.hidden = true;\r\n            bgImageEl.style.display = 'none';\r\n          }\r\n          video.style.display = 'block';\r\n          var wantSound = slide\r\n            ? preferredVideoSound(slide, theme)\r\n            : (container.getAttribute('data-default-sound') === '1');\r\n          var volumePct = slide\r\n            ? preferredVideoVolume(slide, theme)\r\n            : parseFloat(container.getAttribute('data-default-volume') || '100');\r\n          if (isNaN(volumePct)) volumePct = 100;\r\n          volumePct = Math.max(0, Math.min(100, volumePct));\r\n          video.volume = volumePct \/ 100;\r\n          video.muted = !wantSound;\r\n          video.src = videoUrl;\r\n          if (filterCss) video.style.filter = filterCss;\r\n          video.load();\r\n          var playPromise = video.play();\r\n          if (playPromise && typeof playPromise.then === 'function') {\r\n            playPromise.then(function () {\r\n              video.volume = volumePct \/ 100;\r\n              if (wantSound && video.muted) {\r\n                video.muted = false;\r\n              }\r\n            }).catch(function () {\r\n              if (wantSound) {\r\n                video.muted = true;\r\n                video.volume = volumePct \/ 100;\r\n                video.play().catch(function () {});\r\n                var unlock = function () {\r\n                  video.volume = volumePct \/ 100;\r\n                  video.muted = false;\r\n                  video.play().catch(function () {});\r\n                  document.removeEventListener('pointerdown', unlock, true);\r\n                  document.removeEventListener('keydown', unlock, true);\r\n                  document.removeEventListener('touchstart', unlock, true);\r\n                };\r\n                document.addEventListener('pointerdown', unlock, true);\r\n                document.addEventListener('keydown', unlock, true);\r\n                document.addEventListener('touchstart', unlock, true);\r\n              }\r\n            });\r\n          }\r\n        }\r\n\r\n        if (slide) {\r\n          slide.classList.add('selected');\r\n          window.__entradaBootAnchor = hash;\r\n          window.__entradaBootSlideId = Number(slide.getAttribute('data-id') || 0);\r\n\r\n          var titleEl = container.querySelector('.overlay-content h1');\r\n          var descEl = container.querySelector('.overlay-content p');\r\n          var btn = document.getElementById('continuar-btn');\r\n          var screenTitle = slide.getAttribute('data-screen-title') || '';\r\n          var screenDesc = slide.getAttribute('data-screen-desc') || '';\r\n          var cardTitle = (slide.querySelector('h3') && slide.querySelector('h3').textContent) || '';\r\n          var baseLabel = container.getAttribute('data-button-label') || 'Continuar';\r\n\r\n          if (titleEl) titleEl.textContent = screenTitle || container.getAttribute('data-default-title') || '';\r\n          if (descEl) descEl.innerHTML = screenDesc || container.getAttribute('data-default-desc') || '';\r\n          if (btn) {\r\n            btn.disabled = false;\r\n            btn.textContent = cardTitle ? (baseLabel + ' con ' + cardTitle) : baseLabel;\r\n          }\r\n        }\r\n\r\n        var entriesEnabledBoot = container.getAttribute('data-entries-enabled') !== '0';\r\n\r\n        function reveal() {\r\n          container.classList.add('entrada-media-ready');\r\n          container.classList.remove('entrada-booting');\r\n          if (!entriesEnabledBoot) {\r\n            container.classList.add('entrada-ui-ready');\r\n            container.classList.remove('entrada-ui-pending');\r\n          }\r\n        }\r\n\r\n        if (mediaIsImage && imageUrl) {\r\n          reveal();\r\n        } else if (videoUrl) {\r\n          var revealed = false;\r\n          var revealOnce = function () {\r\n            if (revealed) return;\r\n            revealed = true;\r\n            reveal();\r\n          };\r\n          video.addEventListener('loadeddata', revealOnce, { once: true });\r\n          video.addEventListener('canplay', revealOnce, { once: true });\r\n          setTimeout(revealOnce, 400);\r\n        } else {\r\n          reveal();\r\n        }\r\n      })();\r\n    <\/script>\r\n\r\n    <style>\r\n      .swiper-slide.selected img {\r\n        border: none !important;\r\n        box-shadow: 0 0 0 var(--entrada-selected-border, 4px) var(--color-primary), 0 4px 12px rgba(0,0,0,0.2) !important;\r\n      }\r\n      #continuar-btn[disabled]{\r\n        background-color: #6b7280 !important;\r\n        background-image: none !important;\r\n        color: #fff !important;\r\n        border-color: transparent !important;\r\n        box-shadow: none !important;\r\n        backdrop-filter: none !important;\r\n        -webkit-backdrop-filter: none !important;\r\n        cursor: not-allowed !important;\r\n        opacity: 1 !important;\r\n      }\r\n      #continuar-btn:not([disabled]){ cursor: pointer !important; }\r\n    <\/style>\r\n\r\n        <!-- Swiper JS -->\r\n    <script src=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.js\"><\/script>\r\n    \r\n          <div class=\"modal fade\" id=\"entrada-sin-creditos-modal\" tabindex=\"-1\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"entrada-sin-creditos-title\"><div class=\"modal-dialog\" role=\"document\"><div class=\"modal-content\"><div class=\"guest-play-modal guest-play-modal--creditos-crea-tu-historia\">\n\t<div class=\"guest-play-modal__panel\">\n\t\t<div\n\t\t\tclass=\"guest-play-modal__hero\"\n\t\t\tstyle=\"background-image:url('https:\/\/alhambra.app\/audioguia\/storage\/2026\/07\/naira2-media.jpg')\"\t\t>\n\t\t\t<div class=\"guest-play-modal__grabber\" aria-hidden=\"true\"><span><\/span><\/div>\n\t\t\t<div class=\"guest-play-modal__hero-fade\" aria-hidden=\"true\"><\/div>\n\t\t\t<button type=\"button\" class=\"guest-play-modal__close\" data-dismiss=\"modal\" aria-label=\"Cerrar\">\n\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg>\n\t\t\t<\/button>\n\t\t<\/div>\n\n\t\t<div class=\"guest-play-modal__body\">\n\t\t\t<div class=\"guest-play-modal__heading\">\n\t\t\t\t<h3 class=\"guest-play-modal__title\">Sin cr\u00e9ditos \u2728<\/h3>\n\t\t\t\t\t\t\t\t\t<span class=\"guest-play-modal__badge\">crea tu historia<\/span>\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<p class=\"guest-play-modal__intro\">Para crear tu propia historia en la Alhambra necesitas una cuenta con cr\u00e9ditos. Reg\u00edstrate y empieza a escribir tu camino como protagonista.<\/p>\n\t\t\t\n\t\t\t\t\t\t\t<ul class=\"guest-play-modal__features\">\n\t\t\t\t\t\t\t\t\t\t\t<li class=\"guest-play-modal__feature\">\n\t\t\t\t\t\t\t<span class=\"guest-play-modal__feature-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M14.5 9.5a2.5 2.5 0 0 0-2.5-2h-1a2.5 2.5 0 0 0 0 5h1a2.5 2.5 0 0 1 0 5h-1a2.5 2.5 0 0 1-2.5-2\"\/><path d=\"M12 6v2m0 8v2\"\/><\/svg><\/span>\n\t\t\t\t\t\t\t<div class=\"guest-play-modal__feature-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"guest-play-modal__feature-title\">Cr\u00e9ditos necesarios<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"guest-play-modal__feature-desc\">Crear y vivir tu historia consume cr\u00e9ditos de tu pase o cuenta.<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t<li class=\"guest-play-modal__feature\">\n\t\t\t\t\t\t\t<span class=\"guest-play-modal__feature-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5L12 3z\"\/><\/svg><\/span>\n\t\t\t\t\t\t\t<div class=\"guest-play-modal__feature-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"guest-play-modal__feature-title\">Tu propio relato<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"guest-play-modal__feature-desc\">Elige el rumbo, cambia el curso y protagoniza cada momento.<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t<li class=\"guest-play-modal__feature\">\n\t\t\t\t\t\t\t<span class=\"guest-play-modal__feature-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg><\/span>\n\t\t\t\t\t\t\t<div class=\"guest-play-modal__feature-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"guest-play-modal__feature-title\">Registro sencillo<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"guest-play-modal__feature-desc\">Crea tu cuenta en segundos y desbloquea \u00abCrea tu historia\u00bb.<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\n\t\t\t\t\t\t\t<div class=\"guest-play-modal__actions\">\n\t\t\t\t\t\t\t\t\t\t\t<a class=\"guest-play-modal__cta\" href=\"https:\/\/alhambra.app\/acceso\/\">\n\t\t\t\t\t\t\tRegistrate\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div><\/div>    \r\n    <script>\r\n      document.addEventListener('DOMContentLoaded', function () {\r\n        let swiper = null;\r\n\r\n        function entradaResetLayout() {\r\n          const container = document.getElementById('custom-video-container');\r\n          const spacer = document.getElementById('entrada-shortcode-spacer');\r\n          if (container) {\r\n            container.style.position = '';\r\n            container.style.top = '';\r\n            container.style.left = '';\r\n            container.style.right = '';\r\n            container.style.width = '';\r\n            container.style.maxWidth = '';\r\n            container.style.height = '';\r\n            container.style.margin = '';\r\n            container.style.zIndex = '';\r\n          }\r\n          if (spacer) {\r\n            spacer.style.marginInlineStart = '';\r\n            spacer.style.width = '';\r\n            spacer.style.maxWidth = '';\r\n            spacer.style.height = '';\r\n          }\r\n        }\r\n\r\n        function entradaSyncLayout() {\r\n          const container = document.getElementById('custom-video-container');\r\n          const spacer = document.getElementById('entrada-shortcode-spacer');\r\n          const siteContent = document.querySelector('.site-content, #content.site-content');\r\n          if (!container || !spacer) return;\r\n\r\n          entradaResetLayout();\r\n\r\n          const vv = window.visualViewport;\r\n          const viewportH = Math.round((vv && vv.height) ? vv.height : window.innerHeight);\r\n          const viewportW = Math.round((vv && vv.width) ? vv.width : window.innerWidth);\r\n          const header = document.querySelector('.site-header');\r\n          const mobileMenu = document.querySelector('.mobile-menu');\r\n          const headerBottom = header ? Math.round(header.getBoundingClientRect().bottom) : 0;\r\n\r\n          let top = headerBottom;\r\n          let left = 0;\r\n          let width = viewportW;\r\n          let bottomLimit = viewportH;\r\n\r\n          if (window.innerWidth < 782) {\r\n            if (siteContent) {\r\n              const contentRect = siteContent.getBoundingClientRect();\r\n              top = Math.max(headerBottom, Math.round(contentRect.top));\r\n              left = Math.round(contentRect.left);\r\n              width = Math.max(0, Math.round(contentRect.width) || viewportW);\r\n            }\r\n            if (mobileMenu) {\r\n              const menuRect = mobileMenu.getBoundingClientRect();\r\n              if (menuRect.height > 0 && menuRect.top < viewportH) {\r\n                bottomLimit = Math.round(menuRect.top);\r\n              }\r\n            }\r\n          } else if (siteContent) {\r\n            const contentRect = siteContent.getBoundingClientRect();\r\n            left = Math.round(contentRect.left);\r\n            width = Math.max(0, Math.round(contentRect.width));\r\n            top = Math.max(headerBottom, Math.round(contentRect.top));\r\n          } else {\r\n            return;\r\n          }\r\n\r\n          const height = Math.max(320, bottomLimit - top);\r\n\r\n          container.style.position = 'fixed';\r\n          container.style.top = top + 'px';\r\n          container.style.left = left + 'px';\r\n          container.style.width = width + 'px';\r\n          container.style.maxWidth = width + 'px';\r\n          container.style.height = height + 'px';\r\n          container.style.margin = '0';\r\n          container.style.zIndex = '2';\r\n\r\n          spacer.style.height = height + 'px';\r\n\r\n          document.documentElement.classList.add('entrada-full-hero');\r\n          document.body.classList.add('entrada-full-hero');\r\n\r\n          if (swiper) {\r\n            requestAnimationFrame(function () { swiper.update(); });\r\n          }\r\n        }\r\n\r\n        function entradaScheduleSync() {\r\n          entradaSyncLayout();\r\n          requestAnimationFrame(entradaSyncLayout);\r\n          window.setTimeout(entradaSyncLayout, 60);\r\n          window.setTimeout(entradaSyncLayout, 240);\r\n          window.setTimeout(entradaSyncLayout, 500);\r\n        }\r\n\r\n        function bindEntradaLayoutChrome(videoEl) {\r\n          window.addEventListener('resize', entradaScheduleSync);\r\n          window.addEventListener('orientationchange', entradaScheduleSync);\r\n          window.addEventListener('load', entradaScheduleSync);\r\n          if (window.visualViewport) {\r\n            window.visualViewport.addEventListener('resize', entradaScheduleSync);\r\n            window.visualViewport.addEventListener('scroll', entradaScheduleSync);\r\n          }\r\n          const menuState = document.getElementById('menu-state');\r\n          if (menuState) menuState.addEventListener('change', entradaScheduleSync);\r\n          const sidebarEl = document.querySelector('.site-sidebar');\r\n          if (sidebarEl) {\r\n            sidebarEl.addEventListener('transitionend', entradaSyncLayout);\r\n            if (window.ResizeObserver) {\r\n              new ResizeObserver(entradaScheduleSync).observe(sidebarEl);\r\n            }\r\n          }\r\n          const siteContentEl = document.querySelector('.site-content, #content.site-content');\r\n          if (siteContentEl && window.ResizeObserver) {\r\n            new ResizeObserver(entradaScheduleSync).observe(siteContentEl);\r\n          }\r\n          if (videoEl) {\r\n            videoEl.addEventListener('loadedmetadata', entradaScheduleSync);\r\n            videoEl.addEventListener('loadeddata', entradaScheduleSync);\r\n            videoEl.addEventListener('resize', entradaScheduleSync);\r\n          }\r\n          entradaScheduleSync();\r\n        }\r\n\r\n        const bootContainer = document.getElementById('custom-video-container');\r\n        const entriesEnabled = !bootContainer || bootContainer.getAttribute('data-entries-enabled') !== '0';\r\n        const continuarBtnEarly = document.getElementById('continuar-btn');\r\n        const entradaHasCreditsFlag = bootContainer\r\n          ? bootContainer.getAttribute('data-has-credits') === '1'\r\n          : false;\r\n        const entradaNoCreditsModalFlag = bootContainer\r\n          ? bootContainer.getAttribute('data-no-credits-modal') === '1'\r\n          : true;\r\n        const videoElementEarly = document.getElementById('custom-video');\r\n\r\n        function ensureEntradaSinCreditosModalInBody() {\r\n          const el = document.getElementById('entrada-sin-creditos-modal');\r\n          if (el && el.parentElement !== document.body) {\r\n            document.body.appendChild(el);\r\n          }\r\n          return el;\r\n        }\r\n\r\n        function openEntradaSinCreditosModal() {\r\n          if (!entradaNoCreditsModalFlag) return;\r\n\r\n          const el = ensureEntradaSinCreditosModalInBody();\r\n\r\n          \/\/ Fallback visual propio (no depende de Bootstrap\/.show).\r\n          if (el) {\r\n            el.classList.add('entrada-modal-open', 'show', 'in');\r\n            el.style.setProperty('display', 'flex', 'important');\r\n            el.removeAttribute('aria-hidden');\r\n            el.setAttribute('aria-modal', 'true');\r\n            if (!document.getElementById('entrada-sin-creditos-backdrop')) {\r\n              const backdrop = document.createElement('div');\r\n              backdrop.id = 'entrada-sin-creditos-backdrop';\r\n              backdrop.className = 'entrada-modal-backdrop modal-backdrop fade show';\r\n              backdrop.addEventListener('click', function (ev) {\r\n                ev.preventDefault();\r\n                closeEntradaSinCreditosModal();\r\n              });\r\n              document.body.appendChild(backdrop);\r\n            }\r\n            document.body.classList.add('entrada-modal-visible', 'modal-open');\r\n\r\n            \/\/ Bind directo al bot\u00f3n X (por si el listener delegado no alcanza).\r\n            el.querySelectorAll('[data-dismiss=\"modal\"], .guest-play-modal__close, .close').forEach(function (btn) {\r\n              if (btn.dataset.entradaCloseBound === '1') return;\r\n              btn.dataset.entradaCloseBound = '1';\r\n              btn.addEventListener('click', function (ev) {\r\n                ev.preventDefault();\r\n                ev.stopPropagation();\r\n                closeEntradaSinCreditosModal();\r\n              });\r\n            });\r\n          }\r\n\r\n          \/\/ Intentar tambi\u00e9n Bootstrap\/jQuery si existe (sin bloquear el fallback).\r\n          if (el && window.jQuery && window.jQuery.fn && typeof window.jQuery.fn.modal === 'function') {\r\n            try { window.jQuery(el).modal('show'); } catch (err) { \/* noop *\/ }\r\n            return;\r\n          }\r\n\r\n          \/\/ Si el HTML no est\u00e1 embebido, delegar al helper del tema.\r\n          if (!el && typeof window.granadaOpenSinCreditosModal === 'function') {\r\n            window.granadaOpenSinCreditosModal();\r\n          }\r\n        }\r\n\r\n        function navigateEntradaUrl(url) {\r\n          if (!entradaHasCreditsFlag && entradaNoCreditsModalFlag) {\r\n            openEntradaSinCreditosModal();\r\n            return;\r\n          }\r\n          if (!url) return;\r\n          window.location.href = url;\r\n        }\r\n\r\n        function closeEntradaSinCreditosModal() {\r\n          const el = document.getElementById('entrada-sin-creditos-modal');\r\n          if (window.jQuery && window.jQuery.fn && typeof window.jQuery.fn.modal === 'function' && el) {\r\n            try { window.jQuery(el).modal('hide'); } catch (err) { \/* noop *\/ }\r\n          }\r\n          if (el) {\r\n            el.classList.remove('entrada-modal-open', 'show', 'in');\r\n            el.style.setProperty('display', 'none', 'important');\r\n            el.setAttribute('aria-hidden', 'true');\r\n          }\r\n          const backdrop = document.getElementById('entrada-sin-creditos-backdrop');\r\n          if (backdrop) backdrop.remove();\r\n          document.body.classList.remove('entrada-modal-visible', 'modal-open');\r\n          document.body.style.removeProperty('padding-right');\r\n        }\r\n\r\n        \/\/ Cerrar modal: X, clic fuera del panel, Escape.\r\n        \/\/ Se registra siempre (tambi\u00e9n en modo sin entradas, que hace return m\u00e1s abajo).\r\n        document.addEventListener('click', function (e) {\r\n          const modal = document.getElementById('entrada-sin-creditos-modal');\r\n          if (!modal) return;\r\n          if (!modal.classList.contains('entrada-modal-open') && !modal.classList.contains('show')) return;\r\n\r\n          const closeBtn = e.target && e.target.closest && e.target.closest(\r\n            '#entrada-sin-creditos-modal [data-dismiss=\"modal\"], #entrada-sin-creditos-modal .guest-play-modal__close, #entrada-sin-creditos-modal .close'\r\n          );\r\n          if (closeBtn) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n            closeEntradaSinCreditosModal();\r\n            return;\r\n          }\r\n\r\n          if (e.target && e.target.id === 'entrada-sin-creditos-backdrop') {\r\n            closeEntradaSinCreditosModal();\r\n            return;\r\n          }\r\n\r\n          \/\/ El overlay .modal cubre toda la pantalla: clic fuera del panel = cerrar.\r\n          const panel = e.target.closest && e.target.closest(\r\n            '#entrada-sin-creditos-modal .modal-content, #entrada-sin-creditos-modal .guest-play-modal__panel, #entrada-sin-creditos-modal .guest-play-modal'\r\n          );\r\n          if (e.target === modal || (modal.contains(e.target) && !panel)) {\r\n            closeEntradaSinCreditosModal();\r\n          }\r\n        });\r\n\r\n        document.addEventListener('keydown', function (e) {\r\n          if (e.key !== 'Escape' && e.keyCode !== 27) return;\r\n          const modal = document.getElementById('entrada-sin-creditos-modal');\r\n          if (!modal) return;\r\n          if (!modal.classList.contains('entrada-modal-open') && !modal.classList.contains('show')) return;\r\n          closeEntradaSinCreditosModal();\r\n        });\r\n\r\n        if (entradaNoCreditsModalFlag) {\r\n          ensureEntradaSinCreditosModalInBody();\r\n        }\r\n\r\n        \/\/ Modo bot\u00f3n \u00fanico (entradas desactivadas): mismo layout\/video que con entradas.\r\n        if (!entriesEnabled) {\r\n          bindEntradaLayoutChrome(videoElementEarly);\r\n          const singleUrl = (continuarBtnEarly && continuarBtnEarly.getAttribute('data-single-url'))\r\n            || (bootContainer && bootContainer.getAttribute('data-single-url'))\r\n            || '';\r\n          if (continuarBtnEarly) {\r\n            continuarBtnEarly.disabled = !singleUrl;\r\n            continuarBtnEarly.addEventListener('click', function () {\r\n              navigateEntradaUrl(singleUrl);\r\n            });\r\n          }\r\n          \/\/ Dejar que el boot script marque ready; si ya hay video, sincronizar otra vez.\r\n          if (bootContainer) {\r\n            const finishReady = function () {\r\n              bootContainer.classList.add('entrada-media-ready', 'entrada-ui-ready');\r\n              bootContainer.classList.remove('entrada-booting', 'entrada-ui-pending');\r\n              entradaScheduleSync();\r\n            };\r\n            if (videoElementEarly && videoElementEarly.readyState >= 2) {\r\n              finishReady();\r\n            } else if (videoElementEarly) {\r\n              videoElementEarly.addEventListener('loadeddata', finishReady, { once: true });\r\n              videoElementEarly.addEventListener('canplay', finishReady, { once: true });\r\n              window.setTimeout(finishReady, 400);\r\n            } else {\r\n              finishReady();\r\n            }\r\n          }\r\n          return;\r\n        }\r\n\r\n        const defaultScreenTitle = \"Crea tu historia\";\r\n        const defaultScreenDesc  = \"Descubre la magia de la Alhambra creando tu propia historia. <strong> T\\u00fa eliges el camino, t\\u00fa cambias el curso y t\\u00fa vives cada momento como protagonista.<\\\/strong> \\u00a1Empieza ahora una experiencia \\u00fanica e inolvidable!.\";\r\n        const defaultBgVideoFilter = \"brightness(0.9) contrast(1.1)\";\r\n        const defaultBgVideoSound = false;\r\n        const defaultBgVideoVolume = 100 \/ 100;\r\n        const defaultBgVideoUrl = \"https:\\\/\\\/cdn.alhambra.app\\\/General\\\/Cuentos\\\/fondos-video\\\/baja\\\/crea-03.mp4\";\r\n        const defaultBgImageUrl = \"\";\r\n\r\n        function normalizeVideoUrl(url) {\r\n          return String(url || '').split('#')[0].split('?')[0];\r\n        }\r\n\r\n        function isDefaultBgVideo(url) {\r\n          if (!defaultBgVideoUrl || !url) return false;\r\n          const a = normalizeVideoUrl(url);\r\n          const b = normalizeVideoUrl(defaultBgVideoUrl);\r\n          return a === b || a.endsWith(b) || b.endsWith(a);\r\n        }\r\n\r\n        function clampVideoVolume(value) {\r\n          const n = parseFloat(value);\r\n          if (Number.isNaN(n)) return 1;\r\n          return Math.max(0, Math.min(1, n > 1 ? n \/ 100 : n));\r\n        }\r\n\r\n        function slideVideoSound(slide, theme) {\r\n          if (!slide) return false;\r\n          const key = theme === 'dark' ? 'data-video-sound-dark' : 'data-video-sound-light';\r\n          const fallback = slide.getAttribute('data-video-sound-light') || '0';\r\n          return (slide.getAttribute(key) || fallback) === '1';\r\n        }\r\n\r\n        function slideVideoVolumePct(slide, theme) {\r\n          if (!slide) return 100;\r\n          const key = theme === 'dark' ? 'data-video-volume-dark' : 'data-video-volume-light';\r\n          const fallback = slide.getAttribute('data-video-volume-light') || '100';\r\n          const raw = slide.getAttribute(key) || fallback;\r\n          const n = parseFloat(raw);\r\n          if (Number.isNaN(n)) return 100;\r\n          return Math.max(0, Math.min(100, n));\r\n        }\r\n\r\n        function videoVolumeFor(url, slide) {\r\n          if (slide) {\r\n            return clampVideoVolume(slideVideoVolumePct(slide, detectTheme()));\r\n          }\r\n          return clampVideoVolume(defaultBgVideoVolume);\r\n        }\r\n\r\n        function applyVideoMute(url, slide) {\r\n          if (!videoElement) return;\r\n          if (slide) {\r\n            videoElement.muted = !slideVideoSound(slide, detectTheme());\r\n            videoElement.volume = videoVolumeFor(url, slide);\r\n            return;\r\n          }\r\n          \/\/ MP4 de fondo (inicio).\r\n          videoElement.muted = !(defaultBgVideoSound && isDefaultBgVideo(url));\r\n          videoElement.volume = videoVolumeFor(url, null);\r\n        }\r\n\r\n        function videoWantsSound(url, slide) {\r\n          if (slide) return slideVideoSound(slide, detectTheme());\r\n          return !!(defaultBgVideoSound && isDefaultBgVideo(url));\r\n        }\r\n\r\n        const continuarBtn = document.getElementById('continuar-btn');\r\n        const enabledLabel = continuarBtn.dataset.enabledLabel || \"Continuar\";\r\n        const placeholderLabel = continuarBtn.dataset.placeholderLabel || \"Selecciona una opci\\u00f3n\";\r\n        continuarBtn.disabled = true;\r\n        continuarBtn.textContent = placeholderLabel;\r\n\r\n        const titleEl = document.querySelector('.overlay-content h1');\r\n        const descEl  = document.querySelector('.overlay-content p');\r\n\r\n        const allSlides = Array.from(document.querySelectorAll('.carrusel-personajes .swiper-slide'));\r\n        const slideCount = allSlides.length;\r\n        const byIdEarly = [...allSlides].sort((a,b)=> Number(a.dataset.id) - Number(b.dataset.id));\r\n\r\n        function normalizeAnchorEarly(value) {\r\n          return String(value || '').trim().replace(\/^#\/, '').toLowerCase();\r\n        }\r\n\r\n        function findIndexByAnchorEarly(anchor) {\r\n          const needle = normalizeAnchorEarly(anchor);\r\n          if (!needle) return -1;\r\n          if (typeof window.__entradaBootSlideId === 'number' && window.__entradaBootSlideId >= 0\r\n              && normalizeAnchorEarly(window.__entradaBootAnchor) === needle) {\r\n            return byIdEarly.findIndex(slide => Number(slide.dataset.id) === window.__entradaBootSlideId);\r\n          }\r\n          return byIdEarly.findIndex(slide => normalizeAnchorEarly(slide.getAttribute('data-anchor')) === needle);\r\n        }\r\n\r\n        const bootHashIndex = findIndexByAnchorEarly(window.location.hash);\r\n        const initialSlideIndex = bootHashIndex >= 0 ? bootHashIndex : 0;\r\n\r\n        const perViewDesktop = Math.min(3, slideCount);\r\n        const perViewTablet  = Math.min(2, slideCount);\r\n\r\n        swiper = new Swiper('.carrusel-personajes', {\r\n          slidesPerView: perViewDesktop,\r\n          centeredSlides: true,\r\n          centeredSlidesBounds: true,\r\n          watchOverflow: true,\r\n          spaceBetween: 5,\r\n          loop: false,\r\n          initialSlide: initialSlideIndex,\r\n          slideToClickedSlide: true,\r\n          breakpoints: {\r\n            1024: { slidesPerView: perViewDesktop },\r\n            768:  { slidesPerView: perViewTablet  },\r\n            0:    { slidesPerView: 1 }\r\n          }\r\n        });\r\n\r\n        entradaScheduleSync();\r\n        bindEntradaLayoutChrome(document.getElementById('custom-video'));\r\n        const videoElement = document.getElementById('custom-video');\r\n\r\n        const entradaAutoplayEnabled = false;\r\n        const entradaAutoplayStopOnInteraction = false;\r\n        const entradaAutoplayIdleMs = 8000;\r\n        let autoplayActive = false;\r\n        let autoplayDisabledByUser = false;\r\n        let autoplayIdleTimer = null;\r\n        let autoplayFallbackTimer = null;\r\n\r\n        function setVideoSrc(url, slide) {\r\n          if (!videoElement || !url) return false;\r\n          applyVideoMute(url, slide || null);\r\n          const current = videoElement.currentSrc || videoElement.src || '';\r\n          if (current === url || current.endsWith(url) || videoElement.getAttribute('src') === url) {\r\n            videoElement.loop = !autoplayActive;\r\n            return false;\r\n          }\r\n          videoElement.loop = !autoplayActive;\r\n          videoElement.src = url;\r\n          videoElement.load();\r\n          const wantSound = videoWantsSound(url, slide || null);\r\n          const playPromise = videoElement.play();\r\n          if (playPromise && typeof playPromise.then === 'function') {\r\n            playPromise.then(function () {\r\n              applyVideoMute(url, slide || null);\r\n            }).catch(function () {\r\n              if (wantSound && !videoElement.muted) {\r\n                videoElement.muted = true;\r\n                videoElement.play().catch(function () {});\r\n                const unlock = function () {\r\n                  applyVideoMute(url, slide || null);\r\n                  videoElement.play().catch(function () {});\r\n                  document.removeEventListener('pointerdown', unlock, true);\r\n                  document.removeEventListener('keydown', unlock, true);\r\n                  document.removeEventListener('touchstart', unlock, true);\r\n                };\r\n                document.addEventListener('pointerdown', unlock, true);\r\n                document.addEventListener('keydown', unlock, true);\r\n                document.addEventListener('touchstart', unlock, true);\r\n              }\r\n            });\r\n          }\r\n          return true;\r\n        }\r\n\r\n        function detectTheme(){\r\n          const html = document.documentElement;\r\n          if (html.classList.contains('dark')) return 'dark';\r\n          if (html.classList.contains('light')) return 'light';\r\n          const dt = (html.getAttribute('data-theme') || '').toLowerCase();\r\n          if (dt === 'dark' || dt === 'light') return dt;\r\n          try {\r\n            const raw = localStorage.getItem('setting');\r\n            if (raw) {\r\n              const obj = JSON.parse(raw);\r\n              if (obj && (obj.theme === 'dark' || obj.theme === 'light')) return obj.theme;\r\n            }\r\n          } catch(e){}\r\n          return 'light';\r\n        }\r\n\r\n        let currentTheme = detectTheme();\r\n\r\n        const themeObserver = new MutationObserver(() => {\r\n          const t = detectTheme();\r\n          if (t !== currentTheme) {\r\n            currentTheme = t;\r\n            refreshAllSlideImages();\r\n            if (typeof logicalIndex === 'number' && logicalIndex >= 0) {\r\n              const slide = byId[logicalIndex];\r\n              updateVideoForSlide(slide, true);\r\n            } else {\r\n              applyVideoFilters(null);\r\n            }\r\n          }\r\n        });\r\n        themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class','data-theme'] });\r\n\r\n        const byId = byIdEarly;\r\n        let logicalIndex = -1;\r\n\r\n        const btnNext = document.querySelector('.swiper-button-next');\r\n        const btnPrev = document.querySelector('.swiper-button-prev');\r\n\r\n        function updateNavButtons() {\r\n          if (!btnNext || !btnPrev) return;\r\n          const atStart = logicalIndex <= 0;\r\n          const atEnd = slideCount <= 0 || logicalIndex >= slideCount - 1;\r\n\r\n          btnPrev.classList.toggle('disabled', atStart);\r\n          btnPrev.setAttribute('aria-disabled', atStart ? 'true' : 'false');\r\n\r\n          btnNext.classList.toggle('disabled', atEnd);\r\n          btnNext.setAttribute('aria-disabled', atEnd ? 'true' : 'false');\r\n        }\r\n\r\n        function goToIndex(idx, animate=true, updateHash=true, smoothVideo=true) {\r\n          if (slideCount === 0) return;\r\n          idx = Math.max(0, Math.min(idx, slideCount-1));\r\n          logicalIndex = idx;\r\n          swiper.slideTo(idx, animate ? 300 : 0, false);\r\n          seleccionarSlide(byId[idx], updateHash, smoothVideo);\r\n          updateNavButtons();\r\n        }\r\n\r\n        function normalizeAnchor(value) {\r\n          return normalizeAnchorEarly(value);\r\n        }\r\n\r\n        function findIndexByAnchor(anchor) {\r\n          return findIndexByAnchorEarly(anchor);\r\n        }\r\n\r\n        function applyHashSelection(animate=false) {\r\n          const hash = normalizeAnchor(window.location.hash);\r\n          if (!hash) return false;\r\n          const idx = findIndexByAnchor(hash);\r\n          if (idx < 0) return false;\r\n          goToIndex(idx, animate, false, false);\r\n          const container = document.getElementById('custom-video-container');\r\n          if (container) {\r\n            container.scrollIntoView({ behavior: animate ? 'smooth' : 'auto', block: 'start' });\r\n          }\r\n          return true;\r\n        }\r\n\r\n        function goToNextSlide() {\r\n          if (slideCount === 0) return;\r\n          if (logicalIndex < 0) {\r\n            goToIndex(0, true);\r\n          } else if (logicalIndex < slideCount - 1) {\r\n            goToIndex(logicalIndex + 1, true);\r\n          }\r\n        }\r\n\r\n        function goToPrevSlide() {\r\n          if (slideCount === 0) return;\r\n          if (logicalIndex > 0) {\r\n            goToIndex(logicalIndex - 1, true);\r\n          }\r\n        }\r\n\r\n        btnNext.addEventListener('click', (e) => {\r\n          e.preventDefault();\r\n          onUserSelectorAction();\r\n          if (btnNext.classList.contains('disabled')) return;\r\n          goToNextSlide();\r\n        });\r\n\r\n        btnPrev.addEventListener('click', (e) => {\r\n          e.preventDefault();\r\n          onUserSelectorAction();\r\n          if (btnPrev.classList.contains('disabled')) return;\r\n          goToPrevSlide();\r\n        });\r\n\r\n        function isTouchViewport() {\r\n          return window.matchMedia('(max-width: 1024px)').matches;\r\n        }\r\n\r\n        byId.forEach(slide => {\r\n          slide.addEventListener('click', (e) => {\r\n            onUserSelectorAction();\r\n            const id = Number(slide.dataset.id) || 0;\r\n\r\n            \/\/ M\u00f3vil\/tablet: tap en la miniatura \u2192 ir directo a la URL\r\n            if (isTouchViewport() && e.target && e.target.closest('img')) {\r\n              const url = slide.getAttribute('data-url') || '';\r\n              if (url) {\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n                window.location.href = url;\r\n                return;\r\n              }\r\n            }\r\n\r\n            goToIndex(id, true);\r\n          });\r\n        });\r\n\r\n        swiper.on('touchStart', function () {\r\n          onUserSelectorAction();\r\n        });\r\n        swiper.on('sliderFirstMove', function () {\r\n          onUserSelectorAction();\r\n        });\r\n\r\n        \/\/ Swipe horizontal en toda la interfaz (m\u00f3vil\/tablet), no solo en miniaturas\r\n        (function setupFullAreaSwipe() {\r\n          const swipeRoot = document.getElementById('custom-video-container');\r\n          if (!swipeRoot || slideCount < 2) return;\r\n\r\n          let startX = 0;\r\n          let startY = 0;\r\n          let tracking = false;\r\n          const MIN_DX = 48;\r\n          const MAX_RATIO_Y = 0.7;\r\n\r\n          function ignoreSwipeTarget(target) {\r\n            if (!target || !target.closest) return true;\r\n            return !!target.closest('.carrusel-wrapper, #continuar-btn, .custom-swiper-button, a, button');\r\n          }\r\n\r\n          function isTouchNavEnabled() {\r\n            return window.matchMedia('(max-width: 1024px)').matches || ('ontouchstart' in window);\r\n          }\r\n\r\n          swipeRoot.addEventListener('touchstart', function (e) {\r\n            if (!isTouchNavEnabled() || !e.touches || !e.touches[0]) return;\r\n            if (ignoreSwipeTarget(e.target)) {\r\n              tracking = false;\r\n              return;\r\n            }\r\n            startX = e.touches[0].clientX;\r\n            startY = e.touches[0].clientY;\r\n            tracking = true;\r\n          }, { passive: true });\r\n\r\n          swipeRoot.addEventListener('touchend', function (e) {\r\n            if (!tracking || !e.changedTouches || !e.changedTouches[0]) return;\r\n            tracking = false;\r\n            const endX = e.changedTouches[0].clientX;\r\n            const endY = e.changedTouches[0].clientY;\r\n            const dx = endX - startX;\r\n            const dy = endY - startY;\r\n            if (Math.abs(dx) < MIN_DX) return;\r\n            if (Math.abs(dy) > Math.abs(dx) * MAX_RATIO_Y) return;\r\n\r\n            onUserSelectorAction();\r\n            if (dx < 0) goToNextSlide();\r\n            else goToPrevSlide();\r\n          }, { passive: true });\r\n\r\n          swipeRoot.addEventListener('touchcancel', function () {\r\n            tracking = false;\r\n          }, { passive: true });\r\n        })();\r\n\r\n        function clearAutoplayIdleTimer() {\r\n          if (autoplayIdleTimer) {\r\n            clearTimeout(autoplayIdleTimer);\r\n            autoplayIdleTimer = null;\r\n          }\r\n        }\r\n\r\n        function clearAutoplayFallback() {\r\n          if (autoplayFallbackTimer) {\r\n            clearTimeout(autoplayFallbackTimer);\r\n            autoplayFallbackTimer = null;\r\n          }\r\n        }\r\n\r\n        function scheduleAutoplayFallback() {\r\n          clearAutoplayFallback();\r\n          if (!autoplayActive || !videoElement) return;\r\n          let waitMs = 20000;\r\n          const duration = videoElement.duration;\r\n          if (Number.isFinite(duration) && duration > 0) {\r\n            const remaining = Math.max(0, duration - (videoElement.currentTime || 0));\r\n            waitMs = Math.ceil(remaining * 1000) + 1500;\r\n          }\r\n          autoplayFallbackTimer = setTimeout(function () {\r\n            if (autoplayActive) advanceAutoplaySlide();\r\n          }, waitMs);\r\n        }\r\n\r\n        function restartAutoplayIdleTimer() {\r\n          clearAutoplayIdleTimer();\r\n          if (!entradaAutoplayEnabled || autoplayDisabledByUser || slideCount === 0 || autoplayActive) return;\r\n          autoplayIdleTimer = setTimeout(startEntradaAutoplay, entradaAutoplayIdleMs);\r\n        }\r\n\r\n        function onUserSelectorAction() {\r\n          if (!entradaAutoplayEnabled || autoplayDisabledByUser) return;\r\n          if (entradaAutoplayStopOnInteraction) {\r\n            autoplayDisabledByUser = true;\r\n            clearAutoplayIdleTimer();\r\n            if (autoplayActive) stopEntradaAutoplay(false);\r\n            return;\r\n          }\r\n          if (autoplayActive) stopEntradaAutoplay(true);\r\n          else restartAutoplayIdleTimer();\r\n        }\r\n\r\n        function stopEntradaAutoplay(restartIdle) {\r\n          autoplayActive = false;\r\n          clearAutoplayFallback();\r\n          if (videoElement) {\r\n            videoElement.loop = true;\r\n            videoElement.removeEventListener('ended', onAutoplayVideoEnded);\r\n            if (videoElement.paused && videoElement.src) {\r\n              const playPromise = videoElement.play();\r\n              if (playPromise && typeof playPromise.catch === 'function') {\r\n                playPromise.catch(function () {});\r\n              }\r\n            }\r\n          }\r\n          if (restartIdle && !autoplayDisabledByUser) restartAutoplayIdleTimer();\r\n        }\r\n\r\n        function advanceAutoplaySlide() {\r\n          if (!autoplayActive || slideCount === 0) return;\r\n          clearAutoplayFallback();\r\n          const current = logicalIndex < 0 ? 0 : logicalIndex;\r\n          const next = (current + 1) % slideCount;\r\n          if (next === current) {\r\n            \/\/ Una sola entrada: reiniciar el mismo v\u00eddeo\r\n            if (videoElement) {\r\n              videoElement.loop = false;\r\n              try { videoElement.currentTime = 0; } catch (e) {}\r\n              const playPromise = videoElement.play();\r\n              if (playPromise && typeof playPromise.catch === 'function') {\r\n                playPromise.catch(function () {});\r\n              }\r\n              scheduleAutoplayFallback();\r\n            }\r\n            return;\r\n          }\r\n          goToIndex(next, true, true, true);\r\n          if (videoElement) videoElement.loop = false;\r\n          scheduleAutoplayFallback();\r\n        }\r\n\r\n        function onAutoplayVideoEnded() {\r\n          if (!autoplayActive) return;\r\n          advanceAutoplaySlide();\r\n        }\r\n\r\n        function startEntradaAutoplay() {\r\n          if (!entradaAutoplayEnabled || autoplayDisabledByUser || autoplayActive || slideCount === 0) return;\r\n          autoplayActive = true;\r\n          clearAutoplayIdleTimer();\r\n          if (videoElement) {\r\n            videoElement.loop = false;\r\n            videoElement.removeEventListener('ended', onAutoplayVideoEnded);\r\n            videoElement.addEventListener('ended', onAutoplayVideoEnded);\r\n          }\r\n          if (logicalIndex < 0) {\r\n            goToIndex(0, true, true, true);\r\n          } else if (videoElement) {\r\n            \/\/ Desactivar loop del v\u00eddeo actual y esperar a que termine esta reproducci\u00f3n\r\n            videoElement.loop = false;\r\n            if (videoElement.ended) {\r\n              advanceAutoplaySlide();\r\n              return;\r\n            }\r\n          }\r\n          scheduleAutoplayFallback();\r\n        }\r\n\r\n        if (videoElement) {\r\n          videoElement.addEventListener('play', function () {\r\n            if (!autoplayActive) return;\r\n            videoElement.loop = false;\r\n            scheduleAutoplayFallback();\r\n          });\r\n          videoElement.addEventListener('loadedmetadata', function () {\r\n            if (!autoplayActive) return;\r\n            videoElement.loop = false;\r\n            scheduleAutoplayFallback();\r\n          });\r\n        }\r\n\r\n        let ignoreSlideChange = false;\r\n        swiper.on('slideChange', () => {\r\n          if (ignoreSlideChange) return;\r\n          const idx = swiper.activeIndex;\r\n          logicalIndex = idx;\r\n          seleccionarSlide(byId[idx], true, true);\r\n          updateNavButtons();\r\n        });\r\n\r\n        updateNavButtons();\r\n\r\n        const fadeOverlay = document.getElementById('video-fade-overlay');\r\n        let selectedUrl = null;\r\n\r\n        \/\/ ====== AUDIO DE FONDO (NUEVO) ======\r\n        const audioPlayer = new Audio();\r\n        audioPlayer.preload = 'auto';\r\n        audioPlayer.loop = true;\r\n        \/\/ volumen desde ajustes (0..100)\r\n        const globalVolume = 25 \/ 100;\r\n        audioPlayer.volume = Math.max(0, Math.min(1, globalVolume));\r\n\r\n        function stopAudio(){\r\n          try { audioPlayer.pause(); } catch(e){}\r\n          audioPlayer.removeAttribute('src');\r\n          audioPlayer.load();\r\n        }\r\n        function playAudio(url){\r\n          if (!url) { stopAudio(); return; }\r\n          try {\r\n            if (audioPlayer.src !== url) {\r\n              audioPlayer.src = url;\r\n            }\r\n            \/\/ La reproducci\u00f3n se permitir\u00e1 porque hay gesto del usuario (click en slide\/bot\u00f3n)\r\n            audioPlayer.play().catch(()=>{ \/* silencioso si el navegador bloquea *\/ });\r\n          } catch(e){}\r\n        }\r\n        \/\/ =====================================\r\n\r\n        function preferredImageFromSlide(slide){\r\n          const light = slide.getAttribute('data-image-light') || '';\r\n          const dark  = slide.getAttribute('data-image-dark')  || '';\r\n          return currentTheme === 'dark' ? (dark || light || '') : (light || dark || '');\r\n        }\r\n\r\n        function preferredVideoFromSlide(slide){\r\n          const light = slide.getAttribute('data-video-light') || '';\r\n          const dark  = slide.getAttribute('data-video-dark')  || '';\r\n          return currentTheme === 'dark' ? (dark || light || '') : (light || dark || '');\r\n        }\r\n\r\n        function preferredBgImageFromSlide(slide){\r\n          const light = slide.getAttribute('data-bg-image-light') || '';\r\n          const dark  = slide.getAttribute('data-bg-image-dark')  || '';\r\n          return currentTheme === 'dark' ? (dark || light || '') : (light || dark || '');\r\n        }\r\n\r\n        function isImageMediaUrl(url) {\r\n          return \/\\.(jpe?g|png|gif|webp|avif|svg)(\\?|#|$)\/i.test(String(url || ''));\r\n        }\r\n\r\n        function preferredMediaFromSlide(slide) {\r\n          const video = preferredVideoFromSlide(slide);\r\n          const bgImage = preferredBgImageFromSlide(slide);\r\n          const cardImage = preferredImageFromSlide(slide);\r\n          if (video && !isImageMediaUrl(video)) {\r\n            return { type: 'video', url: video };\r\n          }\r\n          if (video && isImageMediaUrl(video)) {\r\n            return { type: 'image', url: video };\r\n          }\r\n          if (bgImage) {\r\n            return { type: 'image', url: bgImage };\r\n          }\r\n          if (cardImage) {\r\n            return { type: 'image', url: cardImage };\r\n          }\r\n          return null;\r\n        }\r\n\r\n        const bgImageElement = document.getElementById('custom-bg-image');\r\n\r\n        function showBgImage(url, filterCss) {\r\n          if (!bgImageElement) return;\r\n          if (videoElement) {\r\n            try { videoElement.pause(); } catch (e) {}\r\n            videoElement.removeAttribute('src');\r\n            videoElement.load();\r\n            videoElement.style.display = 'none';\r\n          }\r\n          bgImageElement.hidden = false;\r\n          bgImageElement.style.display = 'block';\r\n          if (filterCss) bgImageElement.style.filter = filterCss;\r\n          if (bgImageElement.getAttribute('src') !== url) {\r\n            bgImageElement.setAttribute('src', url);\r\n          }\r\n        }\r\n\r\n        function showBgVideo(url, slide) {\r\n          if (bgImageElement) {\r\n            bgImageElement.hidden = true;\r\n            bgImageElement.style.display = 'none';\r\n            bgImageElement.removeAttribute('src');\r\n          }\r\n          if (videoElement) {\r\n            videoElement.style.display = 'block';\r\n          }\r\n          setVideoSrc(url, slide);\r\n        }\r\n\r\n        function restoreDefaultBackground() {\r\n          applyVideoFilters(null);\r\n          const defaultVideo = defaultBgVideoUrl || '';\r\n          const defaultImage = defaultBgImageUrl || '';\r\n          if (defaultVideo && !isImageMediaUrl(defaultVideo)) {\r\n            showBgVideo(defaultVideo, null);\r\n            return;\r\n          }\r\n          if (defaultVideo && isImageMediaUrl(defaultVideo)) {\r\n            showBgImage(defaultVideo, defaultBgVideoFilter);\r\n            return;\r\n          }\r\n          if (defaultImage) {\r\n            showBgImage(defaultImage, defaultBgVideoFilter);\r\n          }\r\n        }\r\n\r\n        function clampFilterPercent(value) {\r\n          const n = parseFloat(value);\r\n          if (Number.isNaN(n)) return 100;\r\n          return Math.max(0, Math.min(200, n));\r\n        }\r\n\r\n        function videoFilterFromValues(brightness, contrast) {\r\n          const b = clampFilterPercent(brightness) \/ 100;\r\n          const c = clampFilterPercent(contrast) \/ 100;\r\n          return 'brightness(' + b + ') contrast(' + c + ')';\r\n        }\r\n\r\n        function preferredVideoFiltersFromSlide(slide) {\r\n          if (!slide) return defaultBgVideoFilter;\r\n          const theme = currentTheme === 'dark' ? 'dark' : 'light';\r\n          const brightness = slide.getAttribute('data-video-brightness-' + theme)\r\n            || slide.getAttribute('data-video-brightness-light')\r\n            || '100';\r\n          const contrast = slide.getAttribute('data-video-contrast-' + theme)\r\n            || slide.getAttribute('data-video-contrast-light')\r\n            || '100';\r\n          return videoFilterFromValues(brightness, contrast);\r\n        }\r\n\r\n        function applyVideoFilters(slide) {\r\n          const filterCss = slide ? preferredVideoFiltersFromSlide(slide) : defaultBgVideoFilter;\r\n          if (videoElement) videoElement.style.filter = filterCss;\r\n          if (bgImageElement) bgImageElement.style.filter = filterCss;\r\n        }\r\n\r\n        function updateImageForSlide(slide){\r\n          const img = slide.querySelector('img');\r\n          if (!img) return;\r\n          const src = preferredImageFromSlide(slide);\r\n          if (src && img.getAttribute('src') !== src) {\r\n            img.setAttribute('src', src);\r\n          }\r\n        }\r\n\r\n        function refreshAllSlideImages(){\r\n          byId.forEach(updateImageForSlide);\r\n        }\r\n\r\n        function updateVideoForSlide(slide, smooth = true){\r\n          const media = preferredMediaFromSlide(slide);\r\n          if (!media) {\r\n            restoreDefaultBackground();\r\n            return;\r\n          }\r\n          applyVideoFilters(slide);\r\n          const apply = function () {\r\n            if (media.type === 'image') {\r\n              showBgImage(media.url, preferredVideoFiltersFromSlide(slide));\r\n            } else {\r\n              showBgVideo(media.url, slide);\r\n              applyVideoFilters(slide);\r\n            }\r\n            if (fadeOverlay) fadeOverlay.style.opacity = '0';\r\n          };\r\n          if (!smooth) {\r\n            apply();\r\n            return;\r\n          }\r\n          if (fadeOverlay) fadeOverlay.style.opacity = '1';\r\n          setTimeout(apply, 350);\r\n        }\r\n\r\n        function seleccionarSlide(slide, updateHash=true, smoothVideo=true) {\r\n          document.querySelectorAll('.swiper-slide').forEach(s => s.classList.remove('selected'));\r\n          slide.classList.add('selected');\r\n\r\n          selectedUrl = slide.getAttribute('data-url') || '';\r\n          const personajeNombre = slide.querySelector('h3')?.textContent || '';\r\n          const screenTitle = slide.getAttribute('data-screen-title') || '';\r\n          const screenDesc  = slide.getAttribute('data-screen-desc')  || '';\r\n          const audioUrl    = slide.getAttribute('data-audio') || '';\r\n          const anchor      = normalizeAnchor(slide.getAttribute('data-anchor'));\r\n\r\n          continuarBtn.disabled = false;\r\n          const baseBtnText = enabledLabel || 'Continuar';\r\n          continuarBtn.textContent = personajeNombre\r\n            ? baseBtnText + ' con ' + personajeNombre\r\n            : baseBtnText;\r\n\r\n          titleEl.textContent = screenTitle || defaultScreenTitle;\r\n          descEl.innerHTML = screenDesc || defaultScreenDesc;\r\n\r\n          updateImageForSlide(slide);\r\n          updateVideoForSlide(slide, smoothVideo);\r\n\r\n          if (updateHash && anchor) {\r\n            const nextHash = '#' + anchor;\r\n            if (window.location.hash !== nextHash) {\r\n              history.replaceState(null, '', nextHash);\r\n            }\r\n          }\r\n\r\n          \/\/ reproducir m\u00fasica de fondo de la entrada seleccionada\r\n          if (audioUrl && smoothVideo) {\r\n            playAudio(audioUrl);\r\n          } else if (!audioUrl) {\r\n            stopAudio();\r\n          }\r\n        }\r\n\r\n        refreshAllSlideImages();\r\n\r\n        if (bootHashIndex >= 0) {\r\n          ignoreSlideChange = true;\r\n          goToIndex(bootHashIndex, false, false, false);\r\n          ignoreSlideChange = false;\r\n        } else {\r\n          applyVideoFilters(null);\r\n        }\r\n\r\n        function revealEntradaUi() {\r\n          if (!bootContainer || bootContainer.classList.contains('entrada-ui-ready')) return;\r\n          bootContainer.classList.add('entrada-ui-ready');\r\n          bootContainer.classList.remove('entrada-ui-pending');\r\n        }\r\n\r\n        \/\/ Overlay (t\u00edtulo + carrusel + bot\u00f3n) tras Swiper montado; el v\u00eddeo ya es visible.\r\n        if (swiper && typeof swiper.update === 'function') {\r\n          swiper.update();\r\n        }\r\n        entradaScheduleSync();\r\n        requestAnimationFrame(() => {\r\n          requestAnimationFrame(revealEntradaUi);\r\n        });\r\n        window.setTimeout(revealEntradaUi, 600);\r\n\r\n        window.addEventListener('hashchange', function () {\r\n          applyHashSelection(true);\r\n        });\r\n\r\n        continuarBtn.addEventListener('click', () => {\r\n          navigateEntradaUrl(selectedUrl);\r\n        });\r\n\r\n        if (entradaAutoplayEnabled) {\r\n          restartAutoplayIdleTimer();\r\n        }\r\n      });\r\n    <\/script>\r\n\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-435","page","type-page","status-publish","hentry","entry"],"acf":[],"_links":{"self":[{"href":"https:\/\/alhambra.app\/crea-tu-historia\/id\/wp-json\/wp\/v2\/pages\/435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alhambra.app\/crea-tu-historia\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alhambra.app\/crea-tu-historia\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alhambra.app\/crea-tu-historia\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alhambra.app\/crea-tu-historia\/id\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":1,"href":"https:\/\/alhambra.app\/crea-tu-historia\/id\/wp-json\/wp\/v2\/pages\/435\/revisions"}],"predecessor-version":[{"id":436,"href":"https:\/\/alhambra.app\/crea-tu-historia\/id\/wp-json\/wp\/v2\/pages\/435\/revisions\/436"}],"wp:attachment":[{"href":"https:\/\/alhambra.app\/crea-tu-historia\/id\/wp-json\/wp\/v2\/media?parent=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}