{"id":298,"date":"2026-04-24T10:55:18","date_gmt":"2026-04-24T08:55:18","guid":{"rendered":"https:\/\/alhambra.app\/selfie-real\/?page_id=298"},"modified":"2026-04-24T11:04:32","modified_gmt":"2026-04-24T09:04:32","slug":"selfie-real","status":"publish","type":"page","link":"https:\/\/alhambra.app\/selfie-real\/nl\/","title":{"rendered":"Echte selfie"},"content":{"rendered":"    <!-- Swiper CSS -->\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css\" \/>\n<style>\n#custom-video-container {\n    position: relative;\n     height: 100vh;\n    top: 0;\n    left: 0;\n    width: 100% !important;\n    overflow: hidden;\n    z-index: 1;\n}\n\n    :root {\n        --y-gap: -1rem !important;\n    }\n\n\n#custom-video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    opacity: 0.9;\n}\n\n#video-fade-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: transparent;\n    pointer-events: none;\n    transition: opacity 1s ease-out;\n    opacity: 0;\n}\n\n.gradient-overlay {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 75%;\n    pointer-events: none;\n    z-index: 1;\n    background: linear-gradient(to bottom, \n        rgba(255, 255, 255, 0),\n        rgba(255, 255, 255, 0.1),\n        rgba(255, 255, 255, 0.3),\n        rgba(255, 255, 255, 0.5),\n        rgba(255, 255, 255, 0.7),\n        rgba(255, 255, 255, 0.9),\n        rgba(255, 255, 255, 1)\n    );\n}\n\n.dark .gradient-overlay {\n    background: linear-gradient(to bottom,\n        rgba(23, 23, 25, 0),\n        rgba(23, 23, 25, 0.3),\n        rgba(23, 23, 25, 0.5),\n        rgba(23, 23, 25, 0.7),\n        rgba(23, 23, 25, 0.85),\n        rgba(23, 23, 25, 0.95),\n        rgb(23, 23, 25)\n    );\n}\n\n.dark, .dark body {\n    --body-bg-color: #000000a8 !important;\n}\n\nbody {\n    --body-bg-color: #ffffff99 !important;\n    --color-grey-500: #32323957 !important;\n}\n\n.overlay-content {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    z-index: 10;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    padding: 4rem 1rem;\n    color: white;\n    text-shadow: 0 0 6px #000;\n    font-family: 'Poppins', sans-serif;\n    box-sizing: border-box;\n}\n\n.overlay-content h1 {\n    font-size: 3rem;\n    margin-bottom: 1rem;\n    color: white;\n    text-shadow:\n        -1px -1px 0 #000,  \n         1px -1px 0 #000,\n        -1px  1px 0 #000,\n         1px  1px 0 #000;\n}\n\n.overlay-content p {\n    font-size: 1.1rem;\n    max-width: 550px;\n    margin-bottom: 2rem;\n    line-height: 1.6;\n    color: white;\n    text-shadow:\n        -1px -1px 0 #000,  \n         1px -1px 0 #000,\n        -1px  1px 0 #000,\n         1px  1px 0 #000;\n}\n\n\n.carrusel-wrapper {\n    max-width: 560px;\n    width: 100%;\n    margin: 0 auto 1.5rem;\n    overflow: visible;\n    position: relative;\n}\n\n.carrusel-personajes .swiper-slide {\n    text-align: center;\n}\n\n.carrusel-personajes img {\n    width: 150px;\n    height: auto;\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n    transition: transform 0.3s ease;\n     margin-bottom: 1px;\n}\n\n.carrusel-personajes img:hover {\n    transform: scale(1.05);\n}\n\n.carrusel-personajes h3 {\n    font-size: 0.9rem;\n    margin-top: 10px;\n    color: white;\n    text-shadow: 0 0 4px black;\n}\n\n.swiper-button-prev::after,\n.swiper-button-next::after {\n    display: none !important;\n}\n\n.custom-swiper-button {\n    background-color: var(--color-primary, #444);\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n    z-index: 10;\n}\n\n.swiper-button-prev.custom-swiper-button { left: 0; }\n.swiper-button-next.custom-swiper-button { right: 0; }\n\n.custom-swiper-button:hover {\n    background-color: var(--color-primary, #444); \/* mismo color base *\/\n}\n\n.arrow-icon {\n    stroke: white;\n    transition: stroke 0.3s ease;\n}\n\n.custom-swiper-button:hover .arrow-icon {\n    stroke: white; \/* sin cambio de color al hacer hover *\/\n}\n\n.swiper-slide.selected img {\n    border: 2px solid var(--color-primary) !important;\n}\n\n#continuar-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 0px;\n    font-size: 1rem;\n    font-weight: 600;\n    border-radius: 8px;\n    background-color: grey;\n    color: white;\n    border: none;\n    cursor: not-allowed;\n    min-width: 300px;\n    text-align: center;\n    margin-bottom: 1rem;\n}\n\n\/* Responsive *\/\n@media (max-width: 768px) {\n    .overlay-content h1 {\n        font-size: 3rem;\n    }\n\n    .overlay-content p {\n        font-size: 1rem;\n        padding: 0 0.5rem;\n    }\n\n    .carrusel-wrapper {\n        padding-inline: 10px;\n    }\n}\n\n\n.carrusel-personajes .swiper-slide {\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    height: auto !important;\n    min-height: 0px; \/* o ajusta seg\u00fan tu dise\u00f1o *\/\n    padding-bottom: 1rem;\n}\n\n.custom-swiper-button.disabled {\n    opacity: 0.3;\n    pointer-events: none;\n    cursor: default;\n}\n\n\n<\/style>\n\n\n<div id=\"custom-video-container\">\n    <div id=\"video-fade-overlay\"><\/div>\n    <video id=\"custom-video\" autoplay muted playsinline loop disableRemotePlayback>\n        <source src=\"https:\/\/cdn.alhambra.com.ai\/General\/avatares-selfie\/estatico\/isabel.mp4\" type=\"video\/mp4\">\n        Tu navegador no soporta la reproducci\u00f3n de videos.\n    <\/video>\n    <div class=\"gradient-overlay\"><\/div>\n\n    <div class=\"overlay-content\">\n        <h1>Selfie Real<\/h1>\n\n        <p>\n            Hazte un selfie y convi\u00e9rtete en un personaje hist\u00f3rico de la Alhambra. Elige a tu personaje y deja que la I.A realice un <strong>cambio de rostro<\/strong> para llevarte al pasado.\n        <\/p>\n\n        <div class=\"carrusel-wrapper\">\n            <div class=\"swiper carrusel-personajes\">\n                <div class=\"swiper-wrapper\">\n                    <div class=\"swiper-slide\" data-url=\"\/reina-isabel\/\" data-video=\"isabel.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/avatares-selfie\/fotos\/01.jpg\" alt=\"Reina Isabel\" \/>    <h3>Reina Isabel<\/h3><\/div><div class=\"swiper-slide\" data-url=\"\/rey-fernando\/\" data-video=\"fernando.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/avatares-selfie\/fotos\/02.jpg\" alt=\"Rey Fernando\" \/>    <h3>Rey Fernando<\/h3><\/div><div class=\"swiper-slide\" data-url=\"\/sultan-boabdil\/\" data-video=\"boabdil.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/avatares-selfie\/fotos\/05.jpg\" alt=\"Sult\u00e1n Boabdil\" \/>    <h3>Sult\u00e1n Boabdil<\/h3><\/div><div class=\"swiper-slide\" data-url=\"\/morayma\/\" data-video=\"morayma.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/avatares-selfie\/fotos\/06.jpg\" alt=\"Morayma\" \/>    <h3>Morayma<\/h3><\/div><div class=\"swiper-slide\" data-url=\"\/yusuf\/\" data-video=\"yusuf.mp4\">    <img decoding=\"async\" src=\"https:\/\/cdn.alhambra.com.ai\/General\/avatares-selfie\/fotos\/03.jpg\" alt=\"Sult\u00e1n Yusuf\" \/>    <h3>Sult\u00e1n Yusuf<\/h3><\/div>                <\/div>\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\nconst swiper = new Swiper('.carrusel-personajes', {\n    slidesPerView: 3,\n    centeredSlides: true, \/\/ \u2705 A\u00f1adir esto\n    spaceBetween: 5,\n    loop: false,\n    navigation: {\n        nextEl: '.swiper-button-next',\n        prevEl: '.swiper-button-prev',\n    },\n    breakpoints: {\n        1024: { slidesPerView: 3 },\n        768: { slidesPerView: 2 },\n        0: { slidesPerView: 1 },\n    },\n    on: {\n        slideChange: () => {\n            seleccionarSlideCentral();\n        }\n    }\n});\n\n\n\/\/ Seleccionar y centrar autom\u00e1ticamente el primer slide al cargar\nsetTimeout(() => {\n    const firstSlide = document.querySelector('.swiper-slide');\n    if (firstSlide) {\n        seleccionarSlide(firstSlide);\n        swiper.slideTo(0);\n    }\n}, 200);\n\n\n    const slides = document.querySelectorAll('.swiper-slide');\n    const continuarBtn = document.getElementById('continuar-btn');\n    const videoElement = document.getElementById('custom-video');\n    const videoSource = videoElement.querySelector('source');\n    const fadeOverlay = document.getElementById('video-fade-overlay');\n\n    let selectedUrl = null;\n\nslides.forEach(slide => {\n    slide.addEventListener('click', () => {\n        seleccionarSlide(slide);\n    });\n});\n\n\n\n\n\nfunction seleccionarSlide(slide) {\n    slides.forEach(s => s.classList.remove('selected'));\n    slide.classList.add('selected');\n\n    selectedUrl = slide.getAttribute('data-url');\n    const personajeNombre = slide.querySelector('h3')?.textContent || '';\n    const videoFile = slide.getAttribute('data-video');\n\n    continuarBtn.disabled = false;\n    continuarBtn.style.backgroundColor = 'var(--color-primary)';\n    continuarBtn.style.cursor = 'pointer';\n    continuarBtn.textContent = `Continuar como ${personajeNombre}`;\n\n    if (videoFile) {\n        fadeOverlay.style.opacity = '1';\n        setTimeout(() => {\n            videoSource.src = `https:\/\/cdn.alhambra.com.ai\/General\/avatares-selfie\/estatico\/${videoFile}`;\n            videoElement.load();\n            fadeOverlay.style.opacity = '0';\n        }, 400);\n    }\n}\n\n\nfunction seleccionarSlideCentral() {\n    const currentSlide = swiper.slides[swiper.activeIndex];\n    if (currentSlide) {\n        seleccionarSlide(currentSlide);\n    }\n}\n\n\n\n    continuarBtn.addEventListener('click', () => {\n        if (selectedUrl) {\n            window.location.href = selectedUrl;\n        }\n    });\n});\n<\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n    const videoBaseUrl = 'https:\/\/cdn.alhambra.com.ai\/General\/avatares-selfie\/estatico\/';\n    const videoFiles = [\n        'isabel.mp4',\n        'fernando.mp4',\n        'boabdil.mp4',\n        'morayma.mp4',\n        'yusuf.mp4'\n    ];\n\n    const preloadContainer = document.createDocumentFragment();\n\n    videoFiles.forEach(video => {\n        if (video === 'isabel.mp4') return;\n\n        \/\/ Preload hint\n        const link = document.createElement('link');\n        link.rel = 'preload';\n        link.as = 'video';\n        link.href = videoBaseUrl + video;\n        link.type = 'video\/mp4';\n        preloadContainer.appendChild(link);\n\n        \/\/ Preload real (oculto)\n        const preloadVideo = document.createElement('video');\n        preloadVideo.src = videoBaseUrl + video;\n        preloadVideo.preload = 'auto';\n        preloadVideo.muted = true;\n        preloadVideo.style.display = 'none';\n        preloadContainer.appendChild(preloadVideo);\n    });\n\n    document.head.appendChild(preloadContainer);\n    document.body.appendChild(preloadContainer);\n});\n<\/script>\n\n\n\n\n                <div class=\"swiper-button-prev custom-swiper-button\">\n                    <svg class=\"arrow-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n                        <polyline points=\"12 8 8 12 12 16\"><\/polyline>\n                        <line x1=\"16\" y1=\"12\" x2=\"8\" y2=\"12\"><\/line>\n                    <\/svg>\n                <\/div>\n                <div class=\"swiper-button-next custom-swiper-button\">\n                    <svg class=\"arrow-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n                        <polyline points=\"12 16 16 12 12 8\"><\/polyline>\n                        <line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"><\/line>\n                    <\/svg>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <button id=\"continuar-btn\" disabled>\n            Continuar\n        <\/button>\n    <\/div>\n<\/div>\n\n\n\n<style>\n.swiper-slide.selected img {\n    border: 4px solid var(--color-primary) !important;\n}\n\n<\/style>\n\n\n\n    <!-- Swiper JS -->\n    <script src=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.js\"><\/script>\n\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-298","page","type-page","status-publish","hentry","entry"],"acf":[],"_links":{"self":[{"href":"https:\/\/alhambra.app\/selfie-real\/nl\/wp-json\/wp\/v2\/pages\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alhambra.app\/selfie-real\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alhambra.app\/selfie-real\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alhambra.app\/selfie-real\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alhambra.app\/selfie-real\/nl\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":3,"href":"https:\/\/alhambra.app\/selfie-real\/nl\/wp-json\/wp\/v2\/pages\/298\/revisions"}],"predecessor-version":[{"id":306,"href":"https:\/\/alhambra.app\/selfie-real\/nl\/wp-json\/wp\/v2\/pages\/298\/revisions\/306"}],"wp:attachment":[{"href":"https:\/\/alhambra.app\/selfie-real\/nl\/wp-json\/wp\/v2\/media?parent=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}