{"id":1194,"date":"2025-12-13T14:06:45","date_gmt":"2025-12-13T13:06:45","guid":{"rendered":"https:\/\/eleiaweddingphotography.com\/home\/"},"modified":"2026-10-22T14:45:39","modified_gmt":"2026-10-22T12:45:39","slug":"home","status":"publish","type":"page","link":"https:\/\/eleiaweddingphotography.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1194\" class=\"elementor elementor-1194\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf8db25 e-con-full e-flex e-con e-parent\" data-id=\"cf8db25\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ce98773 elementor-widget elementor-widget-html\" data-id=\"ce98773\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\n  ==============================================================\n  eleia \u2014 Home page (migrated from prototype)\n  Logo: imagen real (no texto), en alta resoluci\u00f3n, subida de nuevo a\n  la Biblioteca de medios:\n    - eleia-logo-dark.png  (id 6539) \u2014 logo oscuro, para el nav sobre\n      fondo crema (#logo)\n    - eleia-logo-cream.png (id 6540) \u2014 logo crema, para el footer\n      sobre fondo rojo (.footer-logo)\n  Fotos: 17 fotograf\u00edas reales y distintas de la Biblioteca de medios,\n  sin repetir ninguna en la p\u00e1gina (hero, manifiesto, \"Sobre\n  nosotros\" y las 4 im\u00e1genes-cursor del men\u00fa a pantalla completa).\n  ==============================================================\n-->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@300;400;500;600&family=Bellefair&display=swap\" rel=\"stylesheet\">\n<style>\n  :root{\n    --cream:#FFFCF4;\n    --red:#891A15;\n  }\n  *{box-sizing:border-box;}\n  html,body{margin:0;padding:0;background:var(--cream);color:var(--red);font-family:'Inter',sans-serif;overflow-x:hidden;}\n  a{color:var(--red);text-decoration:none;}\n  \/* el tema (Astra) trae sus propios colores de texto para p\/h1-h6\/etc. con\n     m\u00e1s especificidad que nuestro html,body: forzamos aqu\u00ed el rojo\n     corporativo en todo el contenido de la Home, y luego re-declaramos las\n     excepciones (footer y men\u00fa a pantalla completa, en crema) con selectores\n     igual de espec\u00edficos para que ganen sobre esta regla. *\/\n  body, p, li, span, div, h1, h2, h3, h4, h5, h6, a, .about-body, .about-body p, .about-title, #contact h2, .m-text, .hero-tagline, #logo {\n    color: var(--red) !important;\n  }\n  footer, footer a, footer .footer-email, footer .footer-insta, footer .footer-legal a {\n    color: var(--cream) !important;\n  }\n  #menu-overlay, #menu-overlay a, #menu-close, .footer-logo {\n    color: var(--cream) !important;\n  }\n  .corner-label {\n    color: var(--red) !important;\n  }\n  \/* frases sueltas \/ citas: serifa EB Garamond en it\u00e1lica, distinta del logo (Fraunces) *\/\n  .quote-serif{font-family:'EB Garamond',serif;font-style:italic;font-weight:400;}\n  .label-btn{\n    font-family:'Inter',sans-serif;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;\n    background:none;border:none;color:var(--red);cursor:pointer;padding:0;text-decoration:none;\n    line-height:inherit;appearance:none;-webkit-appearance:none;margin:0;vertical-align:baseline;\n  }\n\n  \/* ---------- CURSOR PERSONALIZADO: punto rojo ---------- *\/\n  \/* solo en dispositivos con rat\u00f3n de verdad (hover:hover + pointer:fine): en\n     t\u00e1ctil\/m\u00f3vil no tiene sentido y se deja el comportamiento nativo. *\/\n  @media (hover:hover) and (pointer:fine){\n    html, body, a, button{cursor:none;}\n    \/* ning\u00fan blend-mode de CSS puede hacer un \"intercambio\" exacto entre estos\n       dos colores de marca (crema\/rojo): la f\u00f3rmula de difference exigir\u00eda un\n       color con canales por encima de 255 (255+137, 252+26, 244+21, los tres\n       fuera de rango), as\u00ed que en vez de blend-mode usamos color s\u00f3lido y lo\n       cambiamos por JS seg\u00fan la zona: rojo por defecto (fondo crema del\n       sitio) y crema al pasar por encima del footer (el \u00fanico bloque rojo\n       real fuera del men\u00fa, que ya tiene su propio cursor de imagen). *\/\n    #cursor-dot{\n      position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;\n      background:var(--red);\n      pointer-events:none;z-index:200;\n      transform:translate(-50%,-50%);opacity:0;\n      transition:opacity .2s ease, transform .15s ease, background-color .15s ease;\n    }\n    #cursor-dot.visible{opacity:1;}\n    #cursor-dot.grow{transform:translate(-50%,-50%) scale(1.8);}\n    #cursor-dot.on-red{background:var(--cream);}\n    \/* sobre una foto el tono de fondo var\u00eda punto a punto (una boda de noche no\n       es lo mismo que un vestido blanco), as\u00ed que ah\u00ed s\u00ed tiene sentido un\n       mix-blend-mode: invierte respecto al p\u00edxel exacto que tiene debajo en\n       cada momento, en vez de un color de marca fijo que podr\u00eda fundirse con\n       una zona concreta de la imagen. *\/\n    #cursor-dot.on-photo{background:#fff;mix-blend-mode:difference;}\n  }\n\n  \/* ---------- ENLACES DE NAVEGACI\u00d3N: subrayado ---------- *\/\n  \/* en m\u00f3vil el subrayado va siempre visible (indica que son clickables);\n     en escritorio aparece con un hover que se revela de izquierda a derecha *\/\n  .nav-link{position:relative;display:inline-block;}\n  .nav-link::after{\n    content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;\n    transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,.84,.44,1);\n  }\n  .nav-link:hover::after{transform:scaleX(1);}\n  @media (max-width:700px){\n    .nav-link::after{transform:scaleX(1);}\n  }\n\n  \/* ---------- FIXED NAV \/ MORPHING LOGO ---------- *\/\n  #navbar-bg{\n    position:fixed;top:0;left:0;right:0;height:96px;z-index:40;\n    background:rgba(255,252,244,0);\n    pointer-events:none;\n  }\n  #logo{\n    \/* logo real en imagen (alta resoluci\u00f3n, subido de nuevo a la Biblioteca\n       de medios): el tama\u00f1o se anima por JS v\u00eda width (no font-size), con\n       height:auto para mantener su proporci\u00f3n original. *\/\n    display:block;pointer-events:none;height:auto;\n  }\n  \/* de vuelta a z-index:50 (por debajo de #menu-overlay, que es 100): as\u00ed el\n     propio overlay opaco tapa Men\u00fa\/Contacto mientras el men\u00fa est\u00e1 abierto (el\n     \"navbar\" queda desactivado en esa pantalla sin necesidad de JS extra) y\n     vuelven a verse en cuanto se cierra. El efecto \"overlay\" (mix-blend-mode)\n     ya no va aqu\u00ed, sino en el cursor (#cursor-dot) \u2014 ver m\u00e1s arriba. *\/\n  #menu-btn, #contact-btn{\n    position:fixed;top:34px;z-index:50;opacity:0;\n  }\n  #menu-btn{left:40px;}\n  #contact-btn{right:40px;}\n  @media (max-width:700px){\n    #menu-btn{left:20px;}\n    #contact-btn{right:20px;}\n  }\n\n  \/* ---------- ETIQUETAS FIJAS DE ESQUINA (mismo componente que en la landing\n     de \"fot\u00f3grafos de boda en M\u00e1laga\"): aparecen con el mismo fundido y\n     umbral que el navbar (btnOp), y quedan detr\u00e1s del footer (z-index) para\n     no pisar sus enlaces cuando se llega al final de la p\u00e1gina. ---------- *\/\n  .corner-label{\n    position:fixed;bottom:28px;z-index:45;\n    font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;\n    color:var(--red);opacity:0;transition:opacity .5s ease;pointer-events:none;\n  }\n  #corner-left{left:32px;}\n  #corner-right{right:32px;text-align:right;}\n  @media (max-width:700px){ .corner-label{display:none;} }\n\n  \/* ---------- HERO ---------- *\/\n  \/* #hero-stage es solo un \"carril\" vac\u00edo que da la distancia de scroll (260vh);\n     el contenido real vive en #hero-sticky, que usamos con position:fixed (no\n     sticky: en este visor embebido position:sticky no se queda fijo, se\n     desplaza con la p\u00e1gina) y el JS decide cu\u00e1ndo mostrarlo\/ocultarlo seg\u00fan\n     si el scroll est\u00e1 todav\u00eda dentro del carril de #hero-stage. *\/\n  #hero-stage{position:relative;height:200vh;}\n  #hero-sticky{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;overflow:hidden;visibility:hidden;background:var(--cream);z-index:10;}\n  #hero-sticky.active{visibility:visible;}\n  #hero-inner{position:relative;width:100%;height:100%;}\n\n  \/* las frases del hero ya NO son fijas: nacen ocultas (opacity 0) y el JS las\n     hace entrar en scroll junto con las im\u00e1genes del segundo grupo (wave B),\n     nunca est\u00e1n presentes en la primera pantalla *\/\n  .hero-tagline{\n    position:absolute;max-width:400px;\n    font-size:clamp(19px,3.2vw,26px);line-height:1.5;\n    z-index:3;opacity:0;\n  }\n  \/* una frase a la derecha, aprox. a media altura de la pantalla *\/\n  #tagline1{right:9%;top:46%;text-align:right;}\n  \/* la otra abajo a la izquierda, pero desplazada hacia el centro vertical (no pegada al borde inferior) *\/\n  #tagline2{left:9%;top:68%;text-align:left;}\n  @media (max-width:700px){\n    .hero-tagline{max-width:300px;padding:0 8px;}\n    #tagline1{right:6%;top:40%;}\n    #tagline2{left:6%;top:70%;}\n  }\n\n  .hero-img{\n    position:absolute;object-fit:contain;\n    opacity:0;transform:translateY(90px);\n  }\n  \n\n  \/* grupo A: al cargar la p\u00e1gina, las im\u00e1genes \"suben\" desde m\u00e1s abajo del\n     viewport (como si la p\u00e1gina fuese m\u00e1s larga verticalmente y las fotos\n     estuviesen f\u00edsicamente m\u00e1s abajo), en vez de un simple fade in in-situ.\n     Este efecto lo dispara el JS a\u00f1adiendo .entered con un peque\u00f1o stagger;\n     una vez terminada la transici\u00f3n, el JS quita la transition inline para\n     que el control por scroll (renderImg) sea instant\u00e1neo, sin retraso. *\/\n  .hero-img.reveal{opacity:0;transform:translateY(14vh);transition:opacity 1.15s cubic-bezier(.16,.84,.44,1), transform 1.15s cubic-bezier(.16,.84,.44,1);}\n  .hero-img.reveal.entered{opacity:1;transform:translateY(0);}\n\n  \/* tama\u00f1os con clamp(): el m\u00ednimo ya es apropiado para m\u00f3vil y el t\u00e9rmino en vw\n     hace que en pantallas grandes las fotos crezcan de verdad (antes se quedaban\n     en un tama\u00f1o fijo en px que en un monitor grande se ve\u00eda siempre peque\u00f1o).\n     Cada imagen tiene un tama\u00f1o distinto a las dem\u00e1s, no un \u00fanico patr\u00f3n repetido. *\/\n\n  \/* --- grupo A: las 4-5 im\u00e1genes visibles nada m\u00e1s cargar --- *\/\n  #a1{width:clamp(130px,19vw,320px);height:clamp(163px,23.75vw,400px);left:6%;top:10%;}\n  #a2{width:clamp(110px,16vw,270px);height:clamp(138px,20vw,338px);right:8%;top:6%;}\n  #a3{width:clamp(140px,21vw,360px);height:clamp(175px,26.25vw,450px);left:26%;top:48%;}\n  #a4{width:clamp(100px,14vw,250px);height:clamp(125px,17.5vw,313px);right:26%;top:54%;}\n  \/* movida de right:36%;top:14% (quedaba 100% tapada por el logotipo grande\n     centrado del arranque, ver JS sizeStart\/topStart) a un hueco libre m\u00e1s\n     abajo a la izquierda, donde no la tapan ni el logo ni el resto del\n     grupo A. *\/\n  #a5{width:clamp(85px,11vw,210px);height:clamp(106px,13.75vw,263px);left:8%;top:60%;}\n\n  \/* --- grupo B: 3 im\u00e1genes que sustituyen a las de A ---\n     Reposicionadas para no coincidir con las zonas de A: durante el\n     scroll, B entra en pantalla ANTES de que A haya terminado de\n     desvanecerse (hay un tramo de cruce), as\u00ed que si ocupasen una zona\n     parecida se ve\u00eda literalmente \"una foto encima de otra\". Ahora cada\n     imagen de B cae en un hueco vac\u00edo que ninguna de A usa. *\/\n  #b1{width:clamp(120px,16vw,300px);height:clamp(150px,20vw,375px);right:9%;top:70%;}\n  #b2{width:clamp(130px,18vw,320px);height:clamp(160px,22.5vw,400px);left:42%;top:6%;}\n  #b3{width:clamp(90px,12vw,220px);height:clamp(112px,15vw,275px);right:38%;top:64%;}\n\n  \/* en pantallas estrechas, el suelo m\u00ednimo de los clamp() de arriba (pensados\n     para escritorio\/tablet) es demasiado grande en relaci\u00f3n al ancho real del\n     m\u00f3vil, y varias fotos terminan solap\u00e1ndose entre s\u00ed (adem\u00e1s del propio\n     logotipo grande, que S\u00cd est\u00e1 pensado para solaparse). Aqu\u00ed se redefinen\n     tama\u00f1o y posici\u00f3n de las 12 fotos en dos columnas con margen de sobra\n     entre ellas, para que dentro de un mismo grupo nunca se toquen. *\/\n  @media (max-width:700px){\n    \/* grupo A *\/\n    #a1{left:4%;top:4%;width:38vw;height:47vw;}\n    #a2{right:4%;top:4%;width:32vw;height:40vw;}\n    #a3{left:38%;top:32%;width:22vw;height:28vw;}\n    #a4{left:8%;top:58%;width:34vw;height:43vw;}\n    #a5{left:auto;right:8%;top:64%;width:26vw;height:32vw;}\n    \/* grupo B *\/\n    #b1{left:6%;top:6%;width:40vw;height:50vw;}\n    #b2{right:6%;top:40%;width:32vw;height:40vw;}\n    #b3{display:none;} \/* se solapaba fijo con #tagline2 en m\u00f3vil (mismo top:70%, y visible durante toda la vida de tagline2): en vez de malabarear tiempos\/posiciones de las 8 fotos del hero, se oculta solo en m\u00f3vil (grupo B se queda en b1+b2, igual que el manifiesto se qued\u00f3 en 2 fotos) *\/\n  }\n\n  \/* ---------- MANIFESTO ---------- *\/\n  \/* altura reducida (antes 260vh): con el reveal de \"Sobre nosotros\" ya\n     desacoplado del pin del manifiesto (IntersectionObserver independiente,\n     ver JS), acortar este recorrido ya no reintroduce el \"pop-up\" de antes \u2014\n     solo hace que el tramo final del manifiesto (texto ya desvanecido, fotos\n     ya fuera de pantalla) dure menos scroll antes de llegar a \"Sobre nosotros\". *\/\n  #manifesto-stage{position:relative;height:170vh;}\n  #manifesto-sticky{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;overflow:hidden;visibility:hidden;background:var(--cream);z-index:10;}\n  #manifesto-sticky.active{visibility:visible;}\n  \/* mismo motivo que #hero-inner: aqu\u00ed, adem\u00e1s, centramos el texto con position:absolute\n     en vez de flex, porque un wrapper de im\u00e1genes a pantalla completa como flex-item\n     empujar\u00eda el texto a un lado en vez de superponerse a las fotos. *\/\n  #manifesto-inner{position:relative;width:100%;height:100%;}\n  .m-text{\n    position:absolute;top:50%;left:50%;\n    z-index:5;max-width:780px;text-align:center;padding:0 32px;\n    font-size:clamp(24px,4.9vw,37px);line-height:1.4;font-weight:400;\n    opacity:0; \/* el JS controla opacidad y desplazamiento en cada frame seg\u00fan el scroll *\/\n  }\n  .m-text .muted{color:rgba(137,26,21,.78) !important;}\n  \/* las im\u00e1genes del manifiesto usan ahora exactamente el mismo renderImg() que las\n     del hero (la misma funci\u00f3n JS, no un sistema aparte): posici\u00f3n base con top\/left\/right\n     fijos por imagen, igual que a1..a5 del hero, y solo 2 fotos -una a cada lado- con\n     margen de sobra hasta el centro (donde va el texto), as\u00ed nunca se tocan entre s\u00ed ni\n     dependen de quedar detr\u00e1s del texto para disimularlo. *\/\n  .m-img{position:absolute;object-fit:contain;opacity:0;z-index:2;}\n  #m1{top:20%;left:6%;width:clamp(160px,20vw,320px);height:clamp(200px,25vw,400px);}\n  #m2{top:48%;right:6%;width:clamp(180px,23vw,360px);height:clamp(225px,29vw,450px);}\n\n  @media (max-width:700px){\n    \/* mismo criterio que el grupo A\/B del hero en m\u00f3vil: tama\u00f1os en vw (no px fijos)\n       y las dos fotos confinadas cada una a su mitad de pantalla con margen de sobra\n       hasta el centro, para que nunca se toquen por estrecho que sea el viewport. *\/\n    .m-text{font-size:clamp(18px,5.8vw,23px);}\n    .m-img{z-index:1;}\n    #m1{top:14%;left:5%;width:38vw;height:48vw;}\n    #m2{top:56%;right:5%;width:38vw;height:48vw;}\n  }\n\n  \/* ---------- ABOUT ---------- *\/\n  #about{\n    max-width:1360px;margin:0 auto;padding:180px 64px;\n    display:flex;gap:88px;align-items:flex-end;\n  }\n  \/* las tres piezas \"suben\" desde algo m\u00e1s abajo de su posici\u00f3n final (no solo\n     un ligero desplazamiento de unos pocos px como antes), para que se note de\n     verdad que entran \"desde abajo\" \u2014 con un peque\u00f1o transition-delay base\n     (.08s\/.26s\/.4s) antes de que cada una empiece a moverse, como si la\n     secci\u00f3n ya estuviera asentada en pantalla un instante antes de alzarse. *\/\n  .about-img{\n    width:420px;height:525px;object-fit:contain;flex-shrink:0;\n    opacity:0;transform:translateY(90px);\n    transition:opacity 1.1s cubic-bezier(.16,.84,.44,1) .08s, transform 1.1s cubic-bezier(.16,.84,.44,1) .08s;\n  }\n  .about-copy{max-width:680px;}\n  .about-body p{font-size:clamp(15px,1.1vw,16px);line-height:1.75;font-weight:300;margin:0 0 20px;}\n  \/* imagen -> t\u00edtulo -> texto: tres pasos, cada uno un poco m\u00e1s tarde que el anterior *\/\n  .about-title{\n    font-family:'Bellefair',serif;font-weight:400;font-size:clamp(22px,2.2vw,28px);letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px;\n    opacity:0;transform:translateY(46px);\n    transition:opacity 1s cubic-bezier(.16,.84,.44,1) .26s, transform 1s cubic-bezier(.16,.84,.44,1) .26s;\n  }\n  .about-body{\n    opacity:0;transform:translateY(36px);\n    transition:opacity 1s cubic-bezier(.16,.84,.44,1) .4s, transform 1s cubic-bezier(.16,.84,.44,1) .4s;\n  }\n  .in-view.about-img{opacity:1;transform:translateY(0);}\n  .in-view.about-title{opacity:1;transform:translateY(0);}\n  .in-view.about-body{opacity:1;transform:translateY(0);}\n\n  \/* breakpoint propio de \"Sobre nosotros\", m\u00e1s ancho que el general de\n     700px: el layout de dos columnas (foto fija de 420px + columna de\n     texto) solo funciona con margen de sobra. Entre ~701px y ~1050px\n     (la mayor\u00eda de tablets, incluida un iPad en cualquier orientaci\u00f3n)\n     la columna de texto se quedaba comprimida a apenas 116-390px de\n     ancho -porque .about-img nunca encoge (flex-shrink:0)-, con l\u00edneas\n     rotas cada 2-3 palabras; y como las dos columnas se alinean por\n     abajo (align-items:flex-end, heredado de la regla de escritorio) esa\n     columna de texto anormalmente alta por el exceso de saltos de l\u00ednea\n     empujaba la foto muy por debajo, a menudo fuera de la pantalla.\n     Se soluciona apilando foto y texto en una sola columna en todo este\n     rango, igual que ya se hac\u00eda en m\u00f3vil. *\/\n  @media (max-width:1050px){\n    #about{flex-direction:column;padding:100px 24px;gap:32px;text-align:left;align-items:stretch;}\n    \/* antes ten\u00eda max-width:420px y heredaba align-items:flex-end (que en\n       columna empuja horizontalmente hacia la derecha): la foto quedaba\n       m\u00e1s estrecha que el texto Y pegada al borde derecho, con un hueco\n       vac\u00edo a la izquierda, en vez de ocupar el ancho completo como el\n       texto. Se quita el tope de 420px para que ocupe siempre el 100%\n       del ancho disponible, igual que el texto. *\/\n    .about-img{width:100%;height:auto;aspect-ratio:4\/5;}\n    .about-copy{max-width:100%;}\n  }\n\n  \/* ---------- CONTACT \/ FOOTER ---------- *\/\n  #contact{max-width:680px;margin:0 auto;padding:120px 40px 40px;text-align:center;}\n  #contact h2{font-family:'Bellefair',serif;font-weight:400;font-size:clamp(22px,2.2vw,28px);letter-spacing:.05em;text-transform:uppercase;margin:0 0 40px;}\n  #contact iframe{display:block;margin:0 auto;}\n\n  \/* grid de 3 columnas iguales (1fr auto 1fr): as\u00ed el logo queda SIEMPRE en el\n     centro geom\u00e9trico real de la p\u00e1gina, aunque eso deje un hueco distinto\n     hacia el email que hacia instagram (seg\u00fan lo pedido) *\/\n  footer{\n    position:relative;z-index:46;\n    padding:40px 64px 28px;margin-top:80px;\n    background:var(--red);\n  }\n  .footer-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}\n  footer .footer-email{justify-self:start;}\n  footer .footer-insta{justify-self:end;}\n  \/* misma altura que el logo del navbar ya reducido (ver JS: smallLogoHeight) *\/\n  footer .footer-logo{justify-self:center;display:block;height:28px;width:auto;}\n  footer a{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);}\n  .footer-legal{margin-top:26px;text-align:center;}\n  .footer-legal a{font-size:10.5px;letter-spacing:.08em;opacity:.65;}\n\n  @media (max-width:700px){\n    #contact{padding:80px 24px 40px;}\n    footer{padding:40px 24px 24px;}\n    .footer-main{display:flex;flex-direction:column;gap:18px;text-align:center;}\n    \/* en el footer estrecho (apilado) prescindimos del logo: solo mail e instagram *\/\n    footer .footer-logo{display:none;}\n    .footer-legal{margin-top:22px;}\n  }\n\n  \/* ---------- FULLSCREEN MENU ---------- *\/\n  #menu-overlay{\n    position:fixed;inset:0;background:var(--red);z-index:100;\n    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;\n    opacity:0;visibility:hidden;transform:translateY(-16px);\n    transition:opacity .45s ease, transform .45s ease, visibility 0s .45s;\n  }\n  #menu-overlay.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .45s ease, transform .45s ease;}\n  #menu-overlay a{\n    position:relative;z-index:2;\n    color:var(--cream);font-family:'Fraunces',serif;font-size:clamp(24px,6vw,32px);font-weight:400;\n    text-transform:uppercase;letter-spacing:.04em;cursor:none;\n  }\n  #menu-close{\n    position:absolute;top:34px;right:40px;background:none;border:none;color:var(--cream);\n    font-size:28px;cursor:pointer;line-height:1;\n  }\n\n  \/* imagen que sustituye al cursor al pasar por encima de un enlace del men\u00fa:\n     se posiciona con JS (mousemove) siguiendo al rat\u00f3n; cada enlace tiene su\n     propia imagen v\u00eda data-cursor-img *\/\n  #menu-cursor-img{\n    position:fixed;top:0;left:0;width:220px;height:280px;\n    pointer-events:none;z-index:1;opacity:0;\n    transform:translate(-50%,-50%) scale(.92);\n    transition:opacity .25s ease, transform .25s ease;\n    overflow:hidden;\n  }\n  #menu-cursor-img.visible{opacity:1;transform:translate(-50%,-50%) scale(1);}\n  #menu-cursor-img img{width:100%;height:100%;object-fit:cover;display:block;}\n  @media (max-width:700px){\n    #menu-overlay a{cursor:pointer;}\n    #menu-cursor-img{display:none;}\n  }\n<\/style>\n\n<!-- Meta Pixel Code -->\n<script>\n!function(f,b,e,v,n,t,s)\n{if(f.fbq)return;n=f.fbq=function(){n.callMethod?\nn.callMethod.apply(n,arguments):n.queue.push(arguments)};\nif(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\nn.queue=[];t=b.createElement(e);t.async=!0;\nt.src=v;s=b.getElementsByTagName(e)[0];\ns.parentNode.insertBefore(t,s)}(window, document,'script',\n'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\nfbq('init', '1279794993980300');\nfbq('track', 'PageView');\n<\/script>\n<noscript><img height=\"1\" width=\"1\" style=\"display:none\"\nsrc=\"https:\/\/www.facebook.com\/tr?id=1279794993980300&ev=PageView&noscript=1\"\n\/><\/noscript>\n<!-- End Meta Pixel Code -->\n\n\n\n\n<div id=\"cursor-dot\"><\/div>\n<div id=\"navbar-bg\"><\/div>\n<a id=\"logo-link\" href=\"\/\" style=\"position:fixed;left:50%;transform:translateX(-50%);z-index:50;pointer-events:auto;\"><img decoding=\"async\" id=\"logo\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/09\/eleia-logo-dark-1.png\" alt=\"eleia\"><\/a>\n<button id=\"menu-btn\" class=\"label-btn nav-link\" style=\"pointer-events:auto;\">Men\u00fa<\/button>\n<a id=\"contact-btn\" class=\"label-btn nav-link\" href=\"#contact\" style=\"pointer-events:auto;\">Contacto<\/a>\n\n<div id=\"corner-left\" class=\"corner-label\">Residiendo en M\u00e1laga<\/div>\n<div id=\"corner-right\" class=\"corner-label\">Disponibles en Andaluc\u00eda<\/div>\n\n<div id=\"menu-overlay\">\n  <button id=\"menu-close\" aria-label=\"Cerrar men\u00fa\">&times;<\/button>\n  <a href=\"\/gallery\/\" class=\"nav-link\" data-menu-link data-cursor-img=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/09\/eleia-boda-novios-ceremonia-color-209.jpg\">Galer\u00eda<\/a>\n  <a href=\"\/#about\" class=\"nav-link\" data-menu-link data-cursor-img=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/09\/eleia-boda-novios-abrazo-jardin-001.jpg\">Sobre nosotros<\/a>\n  <a href=\"\/experience\/\" class=\"nav-link\" data-menu-link data-cursor-img=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/09\/eleia-boda-novios-brindis-beso-078.jpg\">Experiencia<\/a>\n  <a href=\"\/contact\/\" class=\"nav-link\" data-menu-link data-cursor-img=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/09\/eleia-boda-novios-anillo-coche-033.jpg\">Contacto<\/a>\n  <div id=\"menu-cursor-img\"><img decoding=\"async\" id=\"menu-cursor-img-tag\" src=\"\" alt=\"\"><\/div>\n<\/div>\n\n<div id=\"hero-stage\">\n  <div id=\"hero-sticky\">\n    <div id=\"hero-inner\">\n    <!-- grupo A: visible desde el primer fotograma -->\n    <img decoding=\"async\" id=\"a1\" class=\"hero-img reveal bw\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/0-4_a545eee5-scaled.jpg\">\n    <img decoding=\"async\" id=\"a2\" class=\"hero-img reveal\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/0-4-scaled.jpg\">\n    <img decoding=\"async\" id=\"a3\" class=\"hero-img reveal\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/0-5-scaled.jpg\">\n    <img decoding=\"async\" id=\"a4\" class=\"hero-img reveal bw\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/990A1118-scaled.jpg\">\n    <img decoding=\"async\" id=\"a5\" class=\"hero-img reveal\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/990A9069-scaled.jpg\">\n    <!-- grupo B: sustituye a A a mitad de recorrido -->\n    <img decoding=\"async\" id=\"b1\" class=\"hero-img\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/990A8012-scaled.jpg\">\n    <img decoding=\"async\" id=\"b2\" class=\"hero-img\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/990A0592-scaled.jpg\">\n    <img decoding=\"async\" id=\"b3\" class=\"hero-img bw\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/0-11-scaled.jpg\">\n    <div id=\"tagline1\" class=\"hero-tagline quote-serif\">Fot\u00f3grafos y vide\u00f3grafos de bodas en M\u00e1laga, para historias que se sienten reales.<\/div>\n    <div id=\"tagline2\" class=\"hero-tagline quote-serif\">Bodas \u00edntimas en M\u00e1laga y el sur de Andaluc\u00eda.<\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<div id=\"manifesto-stage\">\n  <div id=\"manifesto-sticky\">\n    <div id=\"manifesto-inner\">\n    <img decoding=\"async\" class=\"m-img\" id=\"m1\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/0-16-scaled.jpg\">\n    <img decoding=\"async\" class=\"m-img\" id=\"m2\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/990A9271-scaled.jpg\">\n    <div class=\"m-text quote-serif\">\n      Historias de boda atemporales, con profundidad emocional y una simplicidad elegante.\n      <br><br>\n      <span class=\"muted\">Con base en M\u00e1laga, disponibles en toda Andaluc\u00eda.<\/span>\n    <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<div id=\"about\">\n  <img decoding=\"async\" class=\"about-img\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/10\/sobre-nosotros.JPG-scaled.jpeg\">\n  <div class=\"about-copy\">\n    <div class=\"about-title\">Sobre nosotros<\/div>\n    <div class=\"about-body\">\n      <p>Somos Lorena y \u00c1lvaro, el d\u00fao creativo detr\u00e1s de eleia. Con base en M\u00e1laga y disponibles en Andaluc\u00eda, fotografiamos y filmamos bodas desde la sensibilidad, la emoci\u00f3n y una mirada art\u00edstica honesta.<\/p>\n      <p>Creemos que contar una boda va m\u00e1s all\u00e1 de documentar. Buscamos crear fotograf\u00edas y pel\u00edculas que conservan no solo c\u00f3mo fue vuestro d\u00eda, sino c\u00f3mo se sinti\u00f3: las conexiones reales, los gestos silenciosos y esa belleza discreta que hace \u00fanica cada historia.<\/p>\n      <p>Entendemos cada boda como una experiencia humana, no como un evento escenificado. Nuestra forma de mirar se gu\u00eda por la luz, la emoci\u00f3n genuina y la relaci\u00f3n entre las personas. Dejando que los momentos sucedan de forma natural, creamos im\u00e1genes atemporales y aut\u00e9nticas. Sin poses forzadas ni interrupciones: una narrativa visual elegante que refleja qui\u00e9nes sois y c\u00f3mo se vivi\u00f3 realmente vuestro d\u00eda.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<div id=\"contact\">\n  <h2>Formulario de contacto<\/h2>\n  <iframe src=\"https:\/\/app.revea.es\/f\/9LOiCZJjPILPldcBL9DbenUkch41xJSS?embed=1&logo=0&title=0&bg=0\" title=\"Primer contacto - web\" loading=\"lazy\" style=\"width:100%;border:0;\" height=\"800\"><\/iframe>\n<\/div>\n<script>\nwindow.addEventListener('message',function(e){\n  if(e.origin!=='https:\/\/app.revea.es')return;\n  if(!e.data||e.data.token!=='9LOiCZJjPILPldcBL9DbenUkch41xJSS')return;\n  if(e.data.type==='revea-form-height'){\n    var f=document.querySelector('iframe[src*=\"\/f\/9LOiCZJjPILPldcBL9DbenUkch41xJSS\"]');\n    if(f)f.style.height=e.data.height+'px';\n  }\n});\n<\/script>\n\n<footer>\n  <div class=\"footer-main\">\n    <a class=\"nav-link footer-email\" href=\"mailto:eleiaweddingphoto@gmail.com\">eleiaweddingphoto@gmail.com<\/a>\n    <img decoding=\"async\" class=\"footer-logo\" src=\"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2026\/09\/eleia-logo-cream-1.png\" alt=\"eleia\">\n    <a class=\"nav-link footer-insta\" href=\"https:\/\/www.instagram.com\/eleiavisuals\/\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\n  <\/div>\n  <div class=\"footer-legal\">\n    <a class=\"nav-link\" href=\"\/politica-de-privacidad\/\">Pol\u00edtica de privacidad<\/a>\n  <\/div>\n<\/footer>\n\n<script>\n(function(){\n  \/* logo-link (el <a> que envuelve el <img id=\"logo\">) es el que de verdad\n     est\u00e1 position:fixed y el que recibe top\/width por JS m\u00e1s abajo: el <img>\n     interior solo sigue su ancho (ver #logo{width:100%} en el CSS). Antes el\n     JS animaba top\/width directamente sobre el <img>, que nunca tuvo\n     \"position\" propio, as\u00ed que su \"top\" no hac\u00eda nada. *\/\n  var logo = document.getElementById('logo-link');\n  var navBg = document.getElementById('navbar-bg');\n  var menuBtn = document.getElementById('menu-btn');\n  var contactBtn = document.getElementById('contact-btn');\n  var heroStage = document.getElementById('hero-stage');\n  var heroSticky = document.getElementById('hero-sticky');\n  var corners = document.querySelectorAll('.corner-label');\n  var manifestoStage = document.getElementById('manifesto-stage');\n  var manifestoSticky = document.getElementById('manifesto-sticky');\n  var mText = document.querySelector('.m-text');\n\n  \/* Sistema \u00fanico para las 12 im\u00e1genes del hero + las 2 frases: TODAS se miden\n     contra una \u00fanica variable de progreso (heroP, 0..1, recorrido COMPLETO del\n     hero-stage, ver update()) \u2014 ya no hay dos variables distintas (heroLocal \/\n     heroExitLocal) para grupos distintos, as\u00ed se elimina la necesidad\n     estructural de una excepci\u00f3n para el grupo C y cada imagen puede tener un\n     ritmo verdaderamente individual, sin quedar agrupada \"en bloque\".\n     - alreadyVisible:true (grupo A) = visible desde el primer fotograma (con\n       su propia animaci\u00f3n de entrada por CSS, ver .hero-img.reveal); empieza a\n       desplazarse en cuanto se produce scroll, y se desvanece en su propio\n       tramo exitStart\/exitDur.\n     - el resto nace oculta, \"sube\" desde abajo (from, en px) durante su tramo\n       enter\/enterDur, y se desvanece en su propio exitStart\/exitDur. *\/\n  var heroImgs = [\n    \/\/ --- grupo A: ya visibles al cargar ---\n    {el:document.getElementById('a1'), alreadyVisible:true, exitStart:.22, exitDur:.26, speed:.45},\n    {el:document.getElementById('a2'), alreadyVisible:true, exitStart:.30, exitDur:.30, speed:.8},\n    {el:document.getElementById('a3'), alreadyVisible:true, exitStart:.14, exitDur:.22, speed:.3},\n    {el:document.getElementById('a4'), alreadyVisible:true, exitStart:.36, exitDur:.28, speed:1.0},\n    {el:document.getElementById('a5'), alreadyVisible:true, exitStart:.26, exitDur:.24, speed:.6},\n    \/* --- grupo B: sustituye a A y es el \u00faltimo grupo del hero (se quit\u00f3 el\n       grupo C, \"3a fila\", a petici\u00f3n); exitStart\/exitDur alargados para que\n       ocupen el tramo de scroll que antes cubr\u00eda C, sin dejar un hueco vac\u00edo\n       antes del manifiesto. --- *\/\n    {el:document.getElementById('b1'), enter:.22, enterDur:.12, exitStart:.68, exitDur:.28, speed:.5,  from:150},\n    {el:document.getElementById('b2'), enter:.30, enterDur:.16, exitStart:.74, exitDur:.24, speed:.8,  from:190},\n    {el:document.getElementById('b3'), enter:.38, enterDur:.10, exitStart:.80, exitDur:.18, speed:.35, from:130},\n    \/\/ --- frases ---\n    {el:document.getElementById('tagline1'), enter:.26, enterDur:.14, exitStart:.72, exitDur:.22, speed:.3, from:36},\n    {el:document.getElementById('tagline2'), enter:.42, enterDur:.14, exitStart:.80, exitDur:.18, speed:.3, from:36}\n  ];\n  \/* las im\u00e1genes del manifiesto usan ahora la misma funci\u00f3n renderImg() que las\n     del hero (ver arriba), con su propia variable de progreso (mLocal) en vez de\n     heroP -mismo comportamiento de entrada\/deriva\/salida, no un sistema aparte-. *\/\n  var mImgs = [\n    {el:document.getElementById('m1'), enter:0,   enterDur:.10, exitStart:.68, exitDur:.24, speed:.4,  from:70},\n    {el:document.getElementById('m2'), enter:.04, enterDur:.10, exitStart:.74, exitDur:.20, speed:.55, from:90}\n  ];\n\n  function clamp(v,a,b){return Math.max(a,Math.min(b,v));}\n  function lerp(a,b,t){return a+(b-a)*t;}\n\n  \/* funci\u00f3n compartida por las im\u00e1genes del hero (heroImgs) Y las del\n     manifiesto (mImgs, ver m\u00e1s abajo): recibe cualquier variable de progreso\n     0..1 (heroP o mLocal) y aplica exactamente el mismo comportamiento de\n     entrada\/deriva\/salida en ambos sitios. *\/\n  function renderImg(o, heroP){\n    \/* las im\u00e1genes de grupo A que a\u00fan no han hecho su entrada (reveal inicial\n       por CSS) no se tocan por JS: se dejan controlar por la transici\u00f3n CSS\n       .hero-img.reveal.entered hasta que el usuario empieza a hacer scroll\n       de verdad, momento en el que se fuerza su reveal instant\u00e1neo (ver\n       forceRevealAll m\u00e1s abajo) y entran en este render normal. *\/\n    if(o.alreadyVisible && !o.revealed) return;\n    var p = heroP;\n    var opacity, y;\n    if(o.alreadyVisible){\n      var exitP = o.exitStart!=null ? clamp((p - o.exitStart) \/ o.exitDur, 0, 1) : 0;\n      opacity = 1 - exitP;\n      y = -p * o.speed * 280 - exitP * o.speed * 200;\n    } else {\n      var enterP = clamp((p - o.enter) \/ o.enterDur, 0, 1);\n      var exitP2 = o.exitStart!=null ? clamp((p - o.exitStart) \/ o.exitDur, 0, 1) : 0;\n      var settled = p - (o.enter + o.enterDur);\n      var drift = settled > 0 ? -settled * o.speed * 280 : 0;\n      y = lerp(o.from, 0, enterP) + drift;\n      opacity = enterP * (1 - exitP2);\n    }\n    o.el.style.transform = 'translateY(' + y + 'px)';\n    o.el.style.opacity = String(clamp(opacity, 0, 1));\n  }\n\n  \/* --- grupo A: revelado inicial \"sube desde abajo\" (ver .hero-img.reveal) ---\n     cada imagen entra con un peque\u00f1o stagger tras cargar la p\u00e1gina; si el\n     usuario empieza a hacer scroll de verdad antes de que termine esa\n     animaci\u00f3n, se fuerza el reveal instant\u00e1neo de todas para que el control\n     por scroll (renderImg) tome el relevo sin ning\u00fan salto ni retraso. *\/\n  var revealGroupA = heroImgs.filter(function(o){ return o.alreadyVisible; });\n  var revealTimers = [];\n  var revealForced = false;\n  function finishReveal(o){\n    if(o.revealed) return;\n    o.revealed = true;\n    o.el.style.transition = 'none';\n  }\n  function revealNow(o, delay){\n    revealTimers.push(setTimeout(function(){\n      o.el.classList.add('entered');\n      revealTimers.push(setTimeout(function(){ finishReveal(o); }, 1200));\n    }, delay));\n  }\n  revealGroupA.forEach(function(o, i){ revealNow(o, 300 + i*140); });\n  function forceRevealAll(){\n    revealTimers.forEach(clearTimeout);\n    revealTimers = [];\n    revealGroupA.forEach(function(o){\n      o.el.classList.add('entered');\n      finishReveal(o);\n    });\n  }\n\n  var ticking=false;\n  function onScroll(){\n    if(!ticking){\n      window.requestAnimationFrame(update);\n      ticking=true;\n    }\n  }\n  function update(){\n    ticking=false;\n    var vh = window.innerHeight;\n    var vw = window.innerWidth;\n    var sy = window.scrollY || window.pageYOffset;\n    var isMobile = vw < 700;\n\n    \/* si el usuario ya ha empezado a hacer scroll de verdad, el reveal inicial\n       del grupo A (animaci\u00f3n por CSS) se fuerza a completarse al instante,\n       para que el control por scroll tome el relevo sin bloqueos ni saltos *\/\n    if(sy > 0 && !revealForced){ revealForced = true; forceRevealAll(); }\n\n    \/* nav morph over first .8 viewport heights (tama\u00f1o de partida del logo\n       m\u00e1s contenido en m\u00f3vil para que no desborde el ancho de pantalla) *\/\n    var navP = clamp(sy\/(vh*0.8), 0, 1);\n    \/* logo como imagen: arranca grande (~55% del ancho de pantalla) centrado\n       verticalmente en la pantalla, y se reduce y sube hasta su posici\u00f3n de\n       nav seg\u00fan se hace scroll. 0.4514 es la proporci\u00f3n real alto\/ancho del\n       archivo del logo (710\/1573), para poder calcular su altura a partir\n       del width animado sin deformarlo (el <img> tiene height:auto). *\/\n    var LOGO_RATIO = 0.4514;\n    var smallLogoHeight = isMobile ? 22 : 28; \/\/ misma altura que el logo del footer\n    var sizeStart = isMobile ? clamp(vw*0.55, 170, 300) : clamp(vw*0.55, 260, 1000);\n    var sizeEnd = smallLogoHeight \/ LOGO_RATIO;\n    var heightStart = sizeStart * LOGO_RATIO;\n    var topStart = Math.max(24, (vh - heightStart)\/2), topEnd = 34;\n    logo.style.top = lerp(topStart, topEnd, navP) + 'px';\n    logo.style.width = lerp(sizeStart, sizeEnd, navP) + 'px';\n    \/* los botones Men\u00fa\/Contacto, Y el fondo de la barra de navegaci\u00f3n, solo\n       aparecen una vez el logo ya se ha asentado del todo en su posici\u00f3n final\n       de nav (navP muy cerca de 1) \u2014 antes us\u00e1bamos navP directamente para el\n       fondo, as\u00ed que aparec\u00eda mucho antes que los botones; ahora comparten el\n       mismo umbral (btnOp) y aparecen exactamente a la vez. *\/\n    var btnOp = clamp((navP-0.92)\/0.08, 0, 1);\n    navBg.style.background = 'rgba(255,252,244,' + (0.94*btnOp) + ')';\n    menuBtn.style.opacity = btnOp;\n    contactBtn.style.opacity = btnOp;\n    corners.forEach(function(c){ c.style.opacity = btnOp; });\n\n    \/* hero: tres grupos de im\u00e1genes se van sustituyendo (A -> B -> C). Una\n       \u00fanica variable de progreso (heroP) cubre el recorrido COMPLETO del\n       hero-stage, sin ning\u00fan tramo clamped a mitad de camino \u2014 as\u00ed todas las\n       im\u00e1genes, de cualquier grupo, pueden seguir movi\u00e9ndose y desvaneci\u00e9ndose\n       hasta el final, y cada una con su propio ritmo individual (ver\n       heroImgs), en vez de ir \"en bloque\" por grupos. *\/\n    var heroTop = heroStage.offsetTop;\n    var heroActive = sy >= heroTop && sy < heroTop + heroStage.offsetHeight;\n    heroSticky.classList.toggle('active', heroActive);\n    var heroP = clamp((sy - heroTop) \/ heroStage.offsetHeight, 0, 1);\n\n    heroImgs.forEach(function(o){ renderImg(o, heroP); });\n\n    \/* manifesto pinned parallax *\/\n    var mTop = manifestoStage.offsetTop;\n    var mRange = manifestoStage.offsetHeight - vh;\n    var mLocal = clamp((sy - mTop) \/ mRange, 0, 1);\n    \/* a diferencia de hero->manifiesto (dos secciones fijas seguidas, sin hueco),\n       aqu\u00ed lo que viene despu\u00e9s (Sobre nosotros) es contenido normal con su propio\n       scroll, as\u00ed que el manifiesto debe desactivarse justo cuando termina su propio\n       recorrido (mRange), no antes ni despu\u00e9s, o se solapar\u00eda con \"Sobre nosotros\". *\/\n    var mActive = sy >= mTop && sy <= mTop + mRange;\n    manifestoSticky.classList.toggle('active', mActive);\n    mImgs.forEach(function(o){ renderImg(o, mLocal); });\n\n    \/* texto del manifiesto: fade in al entrar en scroll, se mantiene, y fade out\n       con el efecto inverso al seguir haciendo scroll (en vez del \"pop\" anterior) *\/\n    var mTextIn = clamp(mLocal \/ 0.22, 0, 1);\n    var mTextOut = clamp((mLocal - 0.78) \/ 0.22, 0, 1);\n    var mOpacity = mTextIn * (1 - mTextOut);\n    var mShift = lerp(22, 0, mTextIn) - mTextOut*22;\n    mText.style.opacity = String(mOpacity);\n    mText.style.transform = 'translate(-50%, calc(-50% + ' + mShift + 'px))';\n  }\n  window.addEventListener('scroll', onScroll, {passive:true});\n  window.addEventListener('resize', onScroll);\n  update();\n\n  \/* \"Sobre nosotros\": la animaci\u00f3n de entrada se dispara\/deshace cada vez que\n     la secci\u00f3n entra o sale del viewport (toggle en vez de un \"add\" de un solo\n     uso), as\u00ed que si el scroll va hacia atr\u00e1s, en vez de quedarse \"aparecida\"\n     se deshace (fade + baja de nuevo) exactamente igual que al rev\u00e9s.\n     Umbral m\u00e1s alto (.4 en vez de .2): la imagen es mucho m\u00e1s alta que el\n     t\u00edtulo, as\u00ed que con un umbral bajo se disparaba cuando a\u00fan quedaba mucho\n     recorrido de scroll por delante y la transici\u00f3n (de duraci\u00f3n fija, en\n     tiempo real) ya hab\u00eda terminado mucho antes de que la imagen llegase a su\n     posici\u00f3n final \u2014 se ve\u00eda \"sin animaci\u00f3n\". Con un umbral m\u00e1s alto, la\n     secci\u00f3n ya est\u00e1 m\u00e1s visible cuando arranca la animaci\u00f3n, as\u00ed que le queda\n     de sobra para verse. *\/\n  var aboutObserver = new IntersectionObserver(function(entries){\n    entries.forEach(function(e){\n      e.target.classList.toggle('in-view', e.isIntersecting);\n    });\n  }, {threshold:.4});\n  document.querySelectorAll('.about-img, .about-title, .about-body').forEach(function(el){ aboutObserver.observe(el); });\n\n  \/* cursor personalizado: un punto que sigue al rat\u00f3n, sustituyendo al cursor\n     nativo (solo en dispositivos con rat\u00f3n real, ver CSS). Dentro del men\u00fa a\n     pantalla completa (fondo rojo) se queda visible igual que en el resto del\n     sitio (en crema, ver m\u00e1s abajo), salvo justo encima de un enlace del\n     men\u00fa, donde lo sustituye la imagen grande (ver overlay.mousemove). *\/\n  var cursorDot = document.getElementById('cursor-dot');\n  var footerEl = document.querySelector('footer');\n  var overlay = document.getElementById('menu-overlay');\n  var hasFineCursor = window.matchMedia('(hover:hover) and (pointer:fine)').matches;\n  if(hasFineCursor && cursorDot){\n    var updateCursorZone = function(x, y){\n      \/* cuatro estados seg\u00fan qu\u00e9 haya justo debajo del cursor:\n         - un enlace del men\u00fa abierto: se oculta (la imagen grande hace de cursor).\n         - una foto (tono variable): mix-blend-mode, se adapta p\u00edxel a p\u00edxel.\n         - un fondo rojo de marca (footer, o el men\u00fa a pantalla completa\n           entero): el punto pasa a crema.\n         - el resto (fondo crema de marca): el punto se queda en rojo. *\/\n      var elUnder = document.elementFromPoint(x, y);\n      var overlayOpen = overlay && overlay.classList.contains('open');\n      var onMenuLink = !!(overlayOpen && elUnder && elUnder.closest && elUnder.closest('[data-menu-link]'));\n      var onPhoto = !onMenuLink && !!(elUnder && elUnder.tagName === 'IMG');\n      var overRed = !onMenuLink && !onPhoto && (overlayOpen || (footerEl && y >= footerEl.getBoundingClientRect().top));\n      cursorDot.classList.toggle('on-photo', onPhoto);\n      cursorDot.classList.toggle('on-red', overRed);\n      cursorDot.classList.toggle('visible', !onMenuLink);\n    };\n    document.addEventListener('mousemove', function(e){\n      cursorDot.style.left = e.clientX + 'px';\n      cursorDot.style.top = e.clientY + 'px';\n      updateCursorZone(e.clientX, e.clientY);\n    });\n    document.addEventListener('mouseleave', function(){ cursorDot.classList.remove('visible'); });\n    document.querySelectorAll('a, button').forEach(function(el){\n      el.addEventListener('mouseenter', function(){ cursorDot.classList.add('grow'); });\n      el.addEventListener('mouseleave', function(){ cursorDot.classList.remove('grow'); });\n    });\n  }\n\n  \/* fullscreen menu *\/\n  document.getElementById('menu-btn').addEventListener('click', function(){\n    overlay.classList.add('open');\n    \/* el punto ya no se oculta al abrir (ver updateCursorZone): se pone en\n       rojo->crema al instante, sin esperar al siguiente movimiento del rat\u00f3n. *\/\n    if(cursorDot){ cursorDot.classList.add('on-red'); cursorDot.classList.remove('on-photo'); }\n  });\n  document.getElementById('menu-close').addEventListener('click', function(){ overlay.classList.remove('open'); });\n  document.querySelectorAll('[data-menu-link]').forEach(function(a){\n    a.addEventListener('click', function(){ overlay.classList.remove('open'); });\n  });\n\n  \/* efecto hover del men\u00fa: al pasar el rat\u00f3n sobre un enlace, una imagen\n     (distinta para cada enlace, v\u00eda data-cursor-img) sustituye al cursor y\n     lo sigue en tiempo real. Solo en escritorio (en m\u00f3vil no hay cursor). *\/\n  var cursorImgWrap = document.getElementById('menu-cursor-img');\n  var cursorImgTag = document.getElementById('menu-cursor-img-tag');\n  overlay.addEventListener('mousemove', function(e){\n    cursorImgWrap.style.left = e.clientX + 'px';\n    cursorImgWrap.style.top = e.clientY + 'px';\n  });\n  document.querySelectorAll('[data-menu-link]').forEach(function(a){\n    a.addEventListener('mouseenter', function(){\n      var src = a.getAttribute('data-cursor-img');\n      if(src){ cursorImgTag.src = src; }\n      cursorImgWrap.classList.add('visible');\n    });\n    a.addEventListener('mouseleave', function(){\n      cursorImgWrap.classList.remove('visible');\n    });\n  });\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Men\u00fa Contacto Residiendo en M\u00e1laga Disponibles en Andaluc\u00eda &times; Galer\u00eda Sobre nosotros Experiencia Contacto Fot\u00f3grafos y vide\u00f3grafos de bodas en M\u00e1laga, para historias que se sienten reales. Bodas \u00edntimas en M\u00e1laga y el sur de Andaluc\u00eda. Historias de boda atemporales, con profundidad emocional y una simplicidad elegante. Con base en M\u00e1laga, disponibles en toda Andaluc\u00eda. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1194","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Fot\u00f3grafos de bodas en M\u00e1laga | eleia Wedding Photography<\/title>\n<meta name=\"description\" content=\"Somos fot\u00f3grafos de bodas en M\u00e1laga especializados en historias aut\u00e9nticas y emocionales. Fotograf\u00eda art\u00edstica y natural para bodas con alma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eleiaweddingphotography.com\/en\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fot\u00f3grafos de bodas en M\u00e1laga | eleia Wedding Photography\" \/>\n<meta property=\"og:description\" content=\"Somos fot\u00f3grafos de bodas en M\u00e1laga especializados en historias aut\u00e9nticas y emocionales. Fotograf\u00eda art\u00edstica y natural para bodas con alma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eleiaweddingphotography.com\/en\/\" \/>\n<meta property=\"og:site_name\" content=\"eleia wedding photography\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-22T12:45:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.facebook.com\/tr?id=1279794993980300&ev=PageView&noscript=1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/\",\"url\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/\",\"name\":\"Fot\u00f3grafos de bodas en M\u00e1laga | eleia Wedding Photography\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.facebook.com\\\/tr?id=1279794993980300&ev=PageView&noscript=1\",\"datePublished\":\"2025-12-13T13:06:45+00:00\",\"dateModified\":\"2026-10-22T12:45:39+00:00\",\"description\":\"Somos fot\u00f3grafos de bodas en M\u00e1laga especializados en historias aut\u00e9nticas y emocionales. Fotograf\u00eda art\u00edstica y natural para bodas con alma.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/eleiaweddingphotography.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.facebook.com\\\/tr?id=1279794993980300&ev=PageView&noscript=1\",\"contentUrl\":\"https:\\\/\\\/www.facebook.com\\\/tr?id=1279794993980300&ev=PageView&noscript=1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#website\",\"url\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/\",\"name\":\"eleia wedding photography\",\"description\":\"aesthetic, emotion-driven wedding photography in Malaga, Spain\",\"publisher\":{\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#organization\",\"name\":\"eleia wedding photography\",\"url\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/cropped-cropped-2-scaled-1.png\",\"contentUrl\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/cropped-cropped-2-scaled-1.png\",\"width\":2045,\"height\":681,\"caption\":\"eleia wedding photography\"},\"image\":{\"@id\":\"https:\\\/\\\/eleiaweddingphotography.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/eleiavisuals\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fot\u00f3grafos de bodas en M\u00e1laga | eleia Wedding Photography","description":"Somos fot\u00f3grafos de bodas en M\u00e1laga especializados en historias aut\u00e9nticas y emocionales. Fotograf\u00eda art\u00edstica y natural para bodas con alma.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eleiaweddingphotography.com\/en\/","og_locale":"en_GB","og_type":"article","og_title":"Fot\u00f3grafos de bodas en M\u00e1laga | eleia Wedding Photography","og_description":"Somos fot\u00f3grafos de bodas en M\u00e1laga especializados en historias aut\u00e9nticas y emocionales. Fotograf\u00eda art\u00edstica y natural para bodas con alma.","og_url":"https:\/\/eleiaweddingphotography.com\/en\/","og_site_name":"eleia wedding photography","article_modified_time":"2026-10-22T12:45:39+00:00","og_image":[{"url":"https:\/\/www.facebook.com\/tr?id=1279794993980300&ev=PageView&noscript=1","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/eleiaweddingphotography.com\/","url":"https:\/\/eleiaweddingphotography.com\/","name":"Fot\u00f3grafos de bodas en M\u00e1laga | eleia Wedding Photography","isPartOf":{"@id":"https:\/\/eleiaweddingphotography.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/eleiaweddingphotography.com\/#primaryimage"},"image":{"@id":"https:\/\/eleiaweddingphotography.com\/#primaryimage"},"thumbnailUrl":"https:\/\/www.facebook.com\/tr?id=1279794993980300&ev=PageView&noscript=1","datePublished":"2025-12-13T13:06:45+00:00","dateModified":"2026-10-22T12:45:39+00:00","description":"Somos fot\u00f3grafos de bodas en M\u00e1laga especializados en historias aut\u00e9nticas y emocionales. Fotograf\u00eda art\u00edstica y natural para bodas con alma.","breadcrumb":{"@id":"https:\/\/eleiaweddingphotography.com\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eleiaweddingphotography.com\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/eleiaweddingphotography.com\/#primaryimage","url":"https:\/\/www.facebook.com\/tr?id=1279794993980300&ev=PageView&noscript=1","contentUrl":"https:\/\/www.facebook.com\/tr?id=1279794993980300&ev=PageView&noscript=1"},{"@type":"BreadcrumbList","@id":"https:\/\/eleiaweddingphotography.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eleiaweddingphotography.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/eleiaweddingphotography.com\/#website","url":"https:\/\/eleiaweddingphotography.com\/","name":"eleia wedding photography","description":"aesthetic, emotion-driven wedding photography in Malaga, Spain","publisher":{"@id":"https:\/\/eleiaweddingphotography.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eleiaweddingphotography.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/eleiaweddingphotography.com\/#organization","name":"eleia wedding photography","url":"https:\/\/eleiaweddingphotography.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/eleiaweddingphotography.com\/#\/schema\/logo\/image\/","url":"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2025\/12\/cropped-cropped-2-scaled-1.png","contentUrl":"https:\/\/eleiaweddingphotography.com\/wp-content\/uploads\/2025\/12\/cropped-cropped-2-scaled-1.png","width":2045,"height":681,"caption":"eleia wedding photography"},"image":{"@id":"https:\/\/eleiaweddingphotography.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/eleiavisuals\/"]}]}},"_links":{"self":[{"href":"https:\/\/eleiaweddingphotography.com\/en\/wp-json\/wp\/v2\/pages\/1194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eleiaweddingphotography.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eleiaweddingphotography.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eleiaweddingphotography.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eleiaweddingphotography.com\/en\/wp-json\/wp\/v2\/comments?post=1194"}],"version-history":[{"count":1090,"href":"https:\/\/eleiaweddingphotography.com\/en\/wp-json\/wp\/v2\/pages\/1194\/revisions"}],"predecessor-version":[{"id":6966,"href":"https:\/\/eleiaweddingphotography.com\/en\/wp-json\/wp\/v2\/pages\/1194\/revisions\/6966"}],"wp:attachment":[{"href":"https:\/\/eleiaweddingphotography.com\/en\/wp-json\/wp\/v2\/media?parent=1194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}