{"id":8,"date":"2026-08-27T22:47:29","date_gmt":"2026-08-27T22:47:29","guid":{"rendered":"https:\/\/faropropiedades.openboxdigital.com\/?page_id=8"},"modified":"2026-08-27T22:48:32","modified_gmt":"2026-08-27T22:48:32","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/faropropiedades.openboxdigital.com\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28ed95a e-con e-atomic-element e-flexbox-base e-f7c48ee \" data-id=\"28ed95a\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"28ed95a\">\n    \t\t<div class=\"elementor-element elementor-element-1e0be0b elementor-widget elementor-widget-html\" data-id=\"1e0be0b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     FARO PROPIEDADES \u2014 landing concepto (marca ficticia, dise\u00f1o propio)\r\n     Inversiones inmobiliarias premium.\r\n     T\u00e9cnicas: preloader con contador, marquesina gigante con fotos\r\n     incrustadas en el texto, y escena de scroll anclado donde el hero\r\n     se encoge hasta ser una tarjeta mientras entran las colecciones.\r\n     Todo en JS propio (sin librer\u00edas) para que funcione en un widget\r\n     HTML de Elementor, contenedor ancho completo, sin padding.\r\n     ============================================================ -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:ital,wght@1,400;1,500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  html, body{ margin:0; padding:0; background:#ffffff !important; }\r\n  #page, .site, .site-content, .elementor-section-wrap,\r\n  body [data-elementor-type=\"wp-page\"]{ background:transparent !important; }\r\n  .fp-page, .fp-page *{ box-sizing:border-box; }\r\n  .fp-root{ position:relative; width:100vw; margin-left:calc(50% - 50vw);\r\n    font-family:'Manrope',sans-serif; color:#1e2a5a; background:#fff; }\r\n  .fp-root ::selection{ background:#1e2a5a; color:#fff; }\r\n\r\n  \/* ---------- PRELOADER: azul con contador ---------- *\/\r\n  .fp-carga{ position:fixed; inset:0; z-index:99990; background:#1e2a5a;\r\n    display:flex; align-items:center; justify-content:center;\r\n    transition:transform .8s cubic-bezier(.76,0,.24,1); }\r\n  .fp-carga.fp-lista{ transform:translateY(-102%); }\r\n  .fp-carga b{ color:#fff; font-weight:800; font-size:clamp(26px,3.4vw,44px);\r\n    letter-spacing:.34em; padding-left:.34em; }\r\n  .fp-carga i{ position:absolute; right:4vw; bottom:3vh; font-style:normal;\r\n    color:rgba(255,255,255,.85); font-weight:600;\r\n    font-size:clamp(60px,9vw,130px); line-height:1; font-variant-numeric:tabular-nums; }\r\n\r\n  \/* ---------- ESCENA ANCLADA: hero que se encoge + colecciones ---------- *\/\r\n  .fp-zona{ position:relative; height:380vh; background:#fff; }\r\n  .fp-pega{ position:sticky; top:0; height:100vh; overflow:hidden; background:#e9e9ee; }\r\n\r\n  \/* la \"p\u00e1gina\" hero completa: arranca a pantalla llena y se encoge *\/\r\n  .fp-heroPag{ position:absolute; inset:0; background:#fff;\r\n    transform-origin:50% 78%; will-change:transform;\r\n    display:flex; flex-direction:column; justify-content:space-between;\r\n    box-shadow:0 30px 80px rgba(30,42,90,.0); }\r\n  .fp-nav{ display:flex; align-items:center; justify-content:space-between;\r\n    padding:26px 4vw 0; font-weight:600; font-size:14px; }\r\n  .fp-nav a{ color:#1e2a5a !important; text-decoration:none !important; }\r\n  .fp-nav b{ font-weight:800; letter-spacing:.34em; padding-left:.34em; font-size:19px; }\r\n\r\n  \/* marquesina gigante con fotos dentro del texto *\/\r\n  .fp-marq{ overflow:hidden; white-space:nowrap; }\r\n  .fp-marq-fila{ display:inline-flex; align-items:center; gap:.18em;\r\n    animation:fpMarq 26s linear infinite; will-change:transform; }\r\n  @keyframes fpMarq{ to{ transform:translateX(-50%); } }\r\n  .fp-marq span{ font-size:clamp(84px,12.5vw,196px); font-weight:600;\r\n    letter-spacing:-.02em; color:#1e2a5a; line-height:1.1; padding-right:.18em; }\r\n  .fp-marq .fp-foto{ flex:0 0 auto; width:.86em; height:1.02em;\r\n    font-size:clamp(84px,12.5vw,196px);\r\n    border-radius:6px; background:#c9cfe2 center\/cover no-repeat;\r\n    background-image:linear-gradient(160deg,#8fa3d9,#42538f 60%,#22306b); }\r\n\r\n  .fp-hero-bajo{ text-align:center; padding:0 6vw 26px; }\r\n  .fp-hero-bajo p{ margin:0 0 18px; font-size:clamp(16px,1.5vw,21px);\r\n    line-height:1.5; font-weight:500; }\r\n  .fp-hero-bajo p em{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; }\r\n  .fp-chip{ display:inline-block; border:1px solid #1e2a5a; padding:7px 14px;\r\n    font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }\r\n  .fp-hero-pie{ display:flex; align-items:center; justify-content:space-between;\r\n    padding:0 4vw 22px; font-size:13px; font-weight:600; }\r\n  .fp-hero-pie a{ color:#1e2a5a !important; text-decoration:none !important;\r\n    border:1px solid #1e2a5a; padding:9px 16px; letter-spacing:.08em;\r\n    background:#fff; }\r\n\r\n  \/* ---------- colecciones: 4 tarjetas que entran volando ---------- *\/\r\n  .fp-cartas{ position:absolute; left:0; right:0; top:0; height:72vh;\r\n    display:flex; gap:1.6vw; padding:4vh 3vw 0; pointer-events:none; }\r\n  .fp-carta{ position:relative; flex:1 1 0; border-radius:4px; overflow:hidden;\r\n    display:flex; flex-direction:column; transform:translateY(120vh);\r\n    will-change:transform; pointer-events:auto; }\r\n  .fp-carta-cuerpo{ position:relative; flex:1 1 auto; padding:18px; }\r\n  .fp-carta-cuerpo b{ position:absolute; top:14px; left:16px; color:#fff;\r\n    font-weight:800; letter-spacing:.22em; font-size:14px; }\r\n  .fp-carta-cuerpo h3{ position:absolute; right:10px; bottom:12px; margin:0;\r\n    color:#fff; font-weight:600; font-size:clamp(22px,2.5vw,38px);\r\n    letter-spacing:-.01em; writing-mode:vertical-rl; transform:rotate(180deg); }\r\n  .fp-carta-cuerpo p{ position:absolute; left:16px; bottom:12px; margin:0;\r\n    max-width:60%; color:rgba(255,255,255,.85); font-size:12.5px; line-height:1.45; }\r\n  .fp-carta-foto{ flex:0 0 34%; background:#9aa1b4 center\/cover no-repeat;\r\n    transition:transform .5s ease; }\r\n  @media (hover:hover){ .fp-carta:hover .fp-carta-foto{ transform:scale(1.045); } }\r\n  .fp-c1 .fp-carta-cuerpo{ background:#1e2a5a; }\r\n  .fp-c2 .fp-carta-cuerpo{ background:#2e5d43; }\r\n  .fp-c3 .fp-carta-cuerpo{ background:#4a2b3f; }\r\n  .fp-c4 .fp-carta-cuerpo{ background:#17151b; }\r\n  .fp-c1 .fp-carta-foto{ background-image:linear-gradient(160deg,#7fa8c9,#274a68); }\r\n  .fp-c2 .fp-carta-foto{ background-image:linear-gradient(160deg,#9cc9a5,#2e5d43); }\r\n  .fp-c3 .fp-carta-foto{ background-image:linear-gradient(160deg,#caa5b8,#4a2b3f); }\r\n  .fp-c4 .fp-carta-foto{ background-image:linear-gradient(160deg,#b9b9c9,#26232e); }\r\n\r\n  \/* ---------- CONTACTO ---------- *\/\r\n  .fp-fin{ position:relative; background:#fff; text-align:center;\r\n    padding:140px 6vw 120px; }\r\n  .fp-fin h2{ margin:0 0 18px; font-weight:600; letter-spacing:-.02em;\r\n    font-size:clamp(38px,6vw,84px); line-height:1.06; }\r\n  .fp-fin h2 em{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; }\r\n  .fp-fin p{ margin:0 auto 34px; max-width:520px; font-size:16.5px;\r\n    line-height:1.6; color:rgba(30,42,90,.75); }\r\n  .fp-fin a.fp-boton{ display:inline-block; background:#1e2a5a; color:#fff !important;\r\n    text-decoration:none !important; font-weight:700; letter-spacing:.12em;\r\n    padding:18px 34px; font-size:14px; }\r\n  .fp-piecito{ display:flex; align-items:center; justify-content:space-between;\r\n    flex-wrap:wrap; gap:8px 18px; padding:26px 4vw; border-top:1px solid rgba(30,42,90,.16);\r\n    font-size:12.5px; font-weight:600; color:rgba(30,42,90,.6); background:#fff; }\r\n\r\n  \/* reveals suaves *\/\r\n  .fp-rev{ opacity:0; transform:translateY(30px);\r\n    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }\r\n  .fp-rev.fp-on{ opacity:1; transform:none; }\r\n\r\n  @media (max-width:820px){\r\n    .fp-zona{ height:330vh; }\r\n    .fp-cartas{ height:76vh; flex-wrap:wrap; gap:2.4vw; padding:2.5vh 3vw 0; }\r\n    .fp-carta{ flex:1 1 44%; }\r\n    .fp-carta-cuerpo p{ display:none; }\r\n    .fp-carta-cuerpo h3{ font-size:19px; }\r\n    .fp-carta-foto{ flex-basis:30%; }\r\n    .fp-hero-pie span{ display:none; }\r\n    .fp-nav a{ font-size:13px; }\r\n  }\r\n  @media (prefers-reduced-motion:reduce){\r\n    .fp-root *, .fp-root *::before, .fp-root *::after{ animation:none !important; }\r\n    .fp-rev{ opacity:1 !important; transform:none !important; transition:none !important; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"fp-root fp-page\">\r\n\r\n  <div class=\"fp-carga\" id=\"fpCarga\" aria-hidden=\"true\">\r\n    <b>FARO<\/b><i id=\"fpNum\">0<\/i>\r\n  <\/div>\r\n\r\n  <div class=\"fp-zona\" id=\"fpZona\">\r\n    <div class=\"fp-pega\">\r\n\r\n      <div class=\"fp-cartas\" id=\"fpCartas\" aria-label=\"Colecciones\">\r\n        <div class=\"fp-carta fp-c1\">\r\n          <div class=\"fp-carta-cuerpo\"><b>F\u00b0<\/b><h3>Frente al mar<\/h3>\r\n            <p>Casas y departamentos con la playa en la puerta.<\/p><\/div>\r\n          <div class=\"fp-carta-foto\" id=\"fpFotoC1\"><\/div>\r\n        <\/div>\r\n        <div class=\"fp-carta fp-c2\">\r\n          <div class=\"fp-carta-cuerpo\"><b>F\u00b0<\/b><h3>Entre bosques<\/h3>\r\n            <p>Barrios rodeados de verde, lagos y tranquilidad.<\/p><\/div>\r\n          <div class=\"fp-carta-foto\" id=\"fpFotoC2\"><\/div>\r\n        <\/div>\r\n        <div class=\"fp-carta fp-c3\">\r\n          <div class=\"fp-carta-cuerpo\"><b>F\u00b0<\/b><h3>Coraz\u00f3n urbano<\/h3>\r\n            <p>Vivir a pasos de todo, en plena ciudad.<\/p><\/div>\r\n          <div class=\"fp-carta-foto\" id=\"fpFotoC3\"><\/div>\r\n        <\/div>\r\n        <div class=\"fp-carta fp-c4\">\r\n          <div class=\"fp-carta-cuerpo\"><b>F\u00b0<\/b><h3>Piezas \u00fanicas<\/h3>\r\n            <p>Propiedades irrepetibles, de autor y a estrenar.<\/p><\/div>\r\n          <div class=\"fp-carta-foto\" id=\"fpFotoC4\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fp-heroPag\" id=\"fpHero\">\r\n        <div class=\"fp-nav\">\r\n          <a href=\"#contacto\">Nosotros<\/a><b>FARO<\/b><a href=\"#contacto\">Contacto<\/a>\r\n        <\/div>\r\n        <div class=\"fp-marq\" aria-hidden=\"true\">\r\n          <div class=\"fp-marq-fila\" id=\"fpMarqFila\">\r\n            <span>Vivir mejor<\/span><i class=\"fp-foto\" id=\"fpFotoM1\"><\/i>\r\n            <span>Vivir mejor<\/span><i class=\"fp-foto\" id=\"fpFotoM2\"><\/i>\r\n            <span>Vivir mejor<\/span><i class=\"fp-foto\" id=\"fpFotoM3\"><\/i>\r\n            <span>Vivir mejor<\/span><i class=\"fp-foto\" id=\"fpFotoM4\"><\/i>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"fp-hero-bajo\">\r\n          <p>Invert\u00ed en propiedades <em>excepcionales<\/em> en la Costa Atl\u00e1ntica,<br>\r\n            la Patagonia y la Ciudad.<\/p>\r\n          <span class=\"fp-chip\">Desde USD 45.000<\/span>\r\n        <\/div>\r\n        <div class=\"fp-hero-pie\">\r\n          <span>Faro Propiedades&reg; 2026<\/span>\r\n          <a href=\"#contacto\">Nuestra selecci\u00f3n &nearr;<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <section class=\"fp-fin\" id=\"contacto\">\r\n    <h2 class=\"fp-rev\">Encontremos tu<br><em>pr\u00f3xima propiedad<\/em><\/h2>\r\n    <p class=\"fp-rev\">Contanos qu\u00e9 est\u00e1s buscando y en qu\u00e9 zona,\r\n      y te respondemos con una selecci\u00f3n a medida en el d\u00eda.<\/p>\r\n    <a class=\"fp-boton fp-rev\" href=\"mailto:hola@faroprop.com\">HOLA@FAROPROP.COM<\/a>\r\n  <\/section>\r\n\r\n  <div class=\"fp-piecito\">\r\n    <span>FARO PROPIEDADES<\/span>\r\n    <span>Costa Atl\u00e1ntica &middot; Argentina<\/span>\r\n    <span>&copy; 2026 &middot; Sitio concepto por OpenBox Digital<\/span>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  if(\/obd_off\/.test(location.search))return;\r\n  var reduced = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  \/* ---------- preloader con contador ---------- *\/\r\n  var carga = document.getElementById('fpCarga'), num = document.getElementById('fpNum');\r\n  var raiz = document.documentElement;\r\n  raiz.style.overflow = 'hidden';\r\n  function abrir(){\r\n    carga.classList.add('fp-lista');\r\n    raiz.style.overflow = '';\r\n    setTimeout(function(){ if(carga.parentNode) carga.parentNode.removeChild(carga); }, 900);\r\n  }\r\n  if (reduced) { abrir(); }\r\n  else {\r\n    var t0 = null, DUR = 1500;\r\n    function paso(ts){\r\n      if (!t0) t0 = ts;\r\n      var p = Math.min((ts - t0) \/ DUR, 1);\r\n      num.textContent = Math.round(p * 100);\r\n      if (p < 1) requestAnimationFrame(paso); else setTimeout(abrir, 180);\r\n    }\r\n    requestAnimationFrame(paso);\r\n    setTimeout(abrir, 4000); \/* red de seguridad *\/\r\n  }\r\n\r\n  \/* ---------- escena anclada: hero se encoge, tarjetas entran ---------- *\/\r\n  var zona = document.getElementById('fpZona');\r\n  var hero = document.getElementById('fpHero');\r\n  var cartas = [].slice.call(document.querySelectorAll('.fp-carta'));\r\n  function clamp(v,a,b){ return Math.max(a, Math.min(b, v)); }\r\n  function tramo(p, a, b){ return clamp((p - a) \/ (b - a), 0, 1); }\r\n  function suave(t){ return t*t*(3-2*t); }\r\n  var ticking = false;\r\n  function pinta(){\r\n    ticking = false;\r\n    var r = zona.getBoundingClientRect();\r\n    var total = r.height - innerHeight;\r\n    var p = clamp(-r.top \/ total, 0, 1);\r\n    \/* hero: escala 1 -> 0.24 con sombra y bordes *\/\r\n    var e = suave(tramo(p, 0, .42));\r\n    var esc = 1 - e * (innerWidth > 820 ? .76 : .68);\r\n    hero.style.transform = 'scale(' + esc + ')';\r\n    hero.style.borderRadius = (e * 10) + 'px';\r\n    hero.style.boxShadow = '0 ' + (e*30) + 'px ' + (e*70) + 'px rgba(30,42,90,' + (e*.28) + ')';\r\n    \/* tarjetas: entran en cascada desde abajo *\/\r\n    for (var i = 0; i < cartas.length; i++) {\r\n      var ini = .30 + i * .10, fin = ini + .26;\r\n      var q = suave(tramo(p, ini, fin));\r\n      cartas[i].style.transform = 'translateY(' + ((1 - q) * 120) + 'vh)';\r\n    }\r\n    \/* la marquesina desacelera cuando el hero es chico *\/\r\n    document.getElementById('fpMarqFila').style.animationDuration = (26 + e * 22) + 's';\r\n  }\r\n  function pide(){ if (!ticking) { ticking = true; requestAnimationFrame(pinta); } }\r\n  if (!reduced) {\r\n    addEventListener('scroll', pide, { passive:true });\r\n    addEventListener('resize', pide);\r\n    pinta();\r\n  } else {\r\n    hero.style.transform = 'none';\r\n    cartas.forEach(function(c){ c.style.transform = 'none'; });\r\n  }\r\n\r\n  \/* ---------- reveals ---------- *\/\r\n  var revs = [].slice.call(document.querySelectorAll('.fp-rev'));\r\n  if (reduced || !('IntersectionObserver' in window)) {\r\n    revs.forEach(function(e){ e.classList.add('fp-on'); });\r\n  } else {\r\n    var io = new IntersectionObserver(function(es){\r\n      es.forEach(function(en){\r\n        if (en.isIntersecting){ en.target.classList.add('fp-on'); io.unobserve(en.target); }\r\n      });\r\n    }, { threshold:.2 });\r\n    revs.forEach(function(e){ io.observe(e); });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FARO0 F\u00b0 Frente al mar Casas y departamentos con la playa en la puerta. F\u00b0 Entre bosques Barrios rodeados de verde, lagos y tranquilidad. F\u00b0 Coraz\u00f3n urbano Vivir a pasos de todo, en plena ciudad. F\u00b0 Piezas \u00fanicas Propiedades irrepetibles, de autor y a estrenar. NosotrosFAROContacto Vivir mejor Vivir mejor Vivir mejor Vivir mejor Invert\u00ed [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/faropropiedades.openboxdigital.com\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/faropropiedades.openboxdigital.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/faropropiedades.openboxdigital.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/faropropiedades.openboxdigital.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/faropropiedades.openboxdigital.com\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":7,"href":"https:\/\/faropropiedades.openboxdigital.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/faropropiedades.openboxdigital.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/faropropiedades.openboxdigital.com\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}