/* ═══ YULIA TRAIDOVA — CSS estático de la homepage ═══ Generado desde index.php (2026-07-25). Las variables dinámicas (--wa-cta-idx, --wa-rgb, --mapa-order y las de apariencia) se definen inline en el de index.php. ═══════════════════════════════════════════════════════════ */ html{overflow-x:hidden} *{box-sizing:border-box} a{color:inherit;text-decoration:none} /* ── NAVBAR ─────────────────────── */ .navbar{ position:fixed;top:0;left:0;right:0;z-index:999; height:64px; background:var(--navbar-bg); border-bottom:1px solid rgba(184,146,74,0.15); display:flex;align-items:center;justify-content:space-between; padding:0 48px; backdrop-filter:blur(10px); } .logo-wrap{display:flex;flex-direction:column} .logo-name{ font-family:var(--ff);font-size:1.2rem;font-weight:400; color:var(--ink);letter-spacing:.04em; } .logo-name span{color:var(--gold)} .logo-sub{ font-size:var(--fs-2xs);font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--muted); } .nav-links{ display:flex;gap:2px;list-style:none; align-items:center; } .nav-links a{ font-size:var(--fs-xs);font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--muted); padding:6px 14px;display:block; transition:color .2s; } .nav-links a:hover{color:var(--gold)} .nav-cta{ background:var(--ink);color:#fff!important; font-size:var(--fs-xs);font-weight:600;letter-spacing:.13em; text-transform:uppercase; padding:10px 22px; border:none;cursor:pointer; font-family:var(--fb); transition:background .25s; white-space:nowrap; } /* ── Selector de idioma ─────────────────────────────────────── */ .lang-selector ul{list-style:none;display:flex;gap:2px;margin:0;padding:0} .lang-selector a{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:5px 8px;border:1px solid transparent;border-radius:3px;transition:color .2s,border-color .2s;white-space:nowrap;text-decoration:none} .lang-selector a:hover{color:var(--gold);border-color:var(--gold)} .lang-selector li.lang-active a{color:var(--gold);border-color:var(--gold)} .nav-cta:hover{background:var(--gold)!important;color:var(--ink)!important} .hamburger{ display:none;flex-direction:column;gap:5px; background:none;border:none;cursor:pointer;padding:4px; } .hamburger span{width:22px;height:1.5px;background:var(--ink);display:block} /* ── HERO ────────────────────────── */ .hero{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; padding-top:64px; background:var(--c1); } .hero-l{ background:var(--w); padding:72px 52px 60px; display:flex;flex-direction:column;justify-content:center; border-right:1px solid rgba(184,146,74,.12); } .eyebrow{ display:flex;align-items:center;gap:10px; margin-bottom:28px; } .ey-bar{width:26px;height:1px;background:var(--gold)} .ey-txt{ font-size:var(--fs-2xs);font-weight:600;letter-spacing:.24em; text-transform:uppercase;color:var(--gold); } .hero-h1{ font-family:var(--ff); font-size:clamp(2.6rem,4.2vw,4.4rem); font-weight:300;line-height:1.04; color:var(--ink); margin-bottom:6px; } .hero-h1 em{ font-style:italic;color:var(--gold);display:block; } .hero-h1 .sub{ display:block; font-family:var(--fb);font-style:normal; font-size:.34em;font-weight:300; letter-spacing:.02em; color:var(--muted); margin-top:14px;line-height:1.65; } .hdiv{ width:0;height:1px; background:var(--gold2); margin:28px 0; animation:hdivExpand .8s ease .5s forwards; } @keyframes hdivExpand{to{width:40px}} .hero-desc{ font-size:.9rem;font-weight:300; color:var(--ink2);line-height:1.85; max-width:370px;margin-bottom:32px; } .btn-wa{ display:inline-flex;align-items:center;justify-content:center;gap:9px; width:100%;padding:13px 28px; background:var(--gold);color:#fff; font-family:var(--fb);font-size:.68rem;font-weight:600; letter-spacing:.11em;text-transform:uppercase; border:none;cursor:pointer; transition:all .3s; box-sizing:border-box; } .btn-wa:hover{ background:#a37d3e; transform:translateY(-2px); box-shadow:0 10px 28px rgba(184,146,74,.3); } .btn-outline{ display:inline-flex;align-items:center;gap:7px; width:100%;margin-top:10px; padding:12px 24px; background:transparent;color:var(--ink2); font-family:var(--fb);font-size:.68rem;font-weight:400; letter-spacing:.11em;text-transform:uppercase; border:1.5px solid var(--c3);cursor:pointer; transition:all .25s; } .btn-outline:hover{border-color:var(--gold);color:var(--gold)} .btn-cta-gold{ display:none; } /* ── HERO QUICK SEARCH ── */ .hero-search{margin-top:28px;margin-bottom:4px} .hs-fields{display:flex;gap:6px;flex-wrap:nowrap;align-items:stretch;max-width:600px} .hs-sel{flex:1;min-width:130px;padding:11px 14px;border:1.5px solid rgba(184,146,74,.3);border-radius:5px;background:rgba(255,255,255,.06);color:#fff;font-family:var(--fb);font-size:.78rem;outline:none;cursor:pointer;appearance:none;backdrop-filter:blur(8px);transition:border .2s} .hs-sel:focus{border-color:var(--gold)} .hs-sel option{background:#1a1814;color:#fff} .hs-btn{padding:11px 22px;background:var(--gold);color:#fff;border:none;border-radius:5px;font-family:var(--fb);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .2s;flex-shrink:0} .hs-btn:hover{background:#9a7038} @media(max-width:640px){.hs-fields{flex-direction:column}.hs-sel,.hs-btn{width:100%}} .hero-stats{ display:flex; border-top:1px solid var(--c2); margin-top:36px;padding-top:24px; } .hs{flex:1;border-right:1px solid var(--c2);padding-right:18px;margin-right:18px} .hs:last-child{border:none;padding:0;margin:0} .hs-num{ font-family:var(--ff);font-size:2rem;font-weight:300; color:var(--gold);display:block;line-height:1; } .hs-lbl{ font-size:.56rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); margin-top:3px;display:block; } .hero-broker{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--c2)} .hero-broker-foto{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0} .hero-broker-nombre{font-size:.8rem;font-weight:700;color:var(--ink);letter-spacing:.02em} .hero-broker-cargo{font-size:.58rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:2px} /* Panel derecho hero */ .hero-r{ background:var(--c1); display:flex;flex-direction:column; overflow:hidden; } .hero-img{ flex:1; background:var(--c2); display:flex;align-items:center;justify-content:center; position:relative;overflow:hidden;min-height:360px; } .hero-img::after{ content:'';position:absolute; bottom:0;left:0;right:0;height:52%; background:linear-gradient(to top,rgba(250,247,242,.97),transparent); z-index:2; } .arch-svg{ position:absolute;inset:0; width:100%;height:100%; opacity:.1; } .hero-center{ position:relative;z-index:1; text-align:center;padding:32px; } .hero-icon{font-size:3rem;display:block;margin-bottom:8px;line-height:1;opacity:.4} .hero-icon-lbl{ font-family:var(--ff);font-size:.6rem; letter-spacing:.28em;text-transform:uppercase; color:var(--gold); } .prop-float{ position:absolute;bottom:0;left:0;right:0; z-index:3; background:var(--w); border-top:3px solid var(--gold); padding:18px 22px; } .pf-tag{ display:inline-block; background:var(--gold);color:#fff; font-size:.53rem;font-weight:600;letter-spacing:.13em; text-transform:uppercase;padding:3px 10px;margin-bottom:7px; } .pf-price{ font-family:var(--ff);font-size:1.8rem;font-weight:300; color:var(--ink);line-height:1;margin-bottom:3px; } .pf-name{font-size:.75rem;font-weight:300;color:var(--ink2);margin-bottom:9px} .pf-feats{ display:flex;gap:16px;font-size:.66rem;color:var(--muted); border-top:1px solid var(--c2);padding-top:9px; } .mini-props{ display:flex;border-top:1px solid var(--c2); background:var(--w); } .mp{ flex:1;padding:12px 13px; border-right:1px solid var(--c2); cursor:pointer;transition:background .2s; } .mp:last-child{border:none} .mp:hover,.mp.on{background:var(--c1)} .mp-price{font-family:var(--ff);font-size:.88rem;font-weight:400;color:var(--gold)} .mp-name{font-size:.58rem;font-weight:300;color:var(--muted);margin-top:1px} /* ── BANDA SOCIAL ──────────────── */ .social-band{ background:var(--footer-bg); padding:15px 48px; display:flex;align-items:center; justify-content:space-between; flex-wrap:wrap;gap:14px; } .sb-label{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)} .sb-cities{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .sb-city{font-family:var(--ff);font-size:.88rem;font-weight:300;color:rgba(255,255,255,.55)} .sb-div{width:1px;height:11px;background:rgba(255,255,255,.12)} .sb-stars{color:var(--gold2);font-size:.65rem;letter-spacing:2px} .sb-score{font-size:.6rem;color:rgba(255,255,255,.55);margin-left:6px} /* ── SECCIONES ─────────────────── */ .section{padding:84px 0;background:var(--w);position:relative} .section.alt{background:var(--c1)} .section+.section::before,.section.alt+.section::before,.section+.section.alt::before{ content:'';display:block;position:absolute;top:0;left:50%;transform:translateX(-50%); width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold2),transparent); } .container{max-width:1120px;margin:0 auto;padding:0 48px} .sec-ey{display:flex;align-items:center;gap:10px;margin-bottom:13px} .sec-ey-bar{width:20px;height:1px;background:var(--gold)} .sec-ey-txt{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} .sec-h2{ font-family:var(--ff); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:300;line-height:1.1;color:var(--ink);margin-bottom:11px; } .sec-h2 em{font-style:italic;color:var(--gold)} .sec-sub{font-size:var(--fs-base);font-weight:300;color:var(--muted);line-height:1.8;max-width:400px} .sec-row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:end;margin-bottom:48px} .center-cta{text-align:center;margin-top:40px;padding:0 48px;max-width:1120px;margin-left:auto;margin-right:auto;display:none !important} /* ── FILTROS ──────────────────── */ .props-filters{padding:0 48px 28px;display:flex;flex-direction:column;gap:12px;max-width:1120px;margin:0 auto} .filter-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:900px} .filter-btn{padding:7px 18px;border:1.5px solid #e8dece;background:#fff;border-radius:30px;font-size:var(--fs-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6b5e54;cursor:pointer;text-decoration:none;transition:all .2s;font-family:var(--fb)} .filter-btn:hover,.filter-btn.on{background:var(--gold);color:#fff;border-color:var(--gold)} .filter-select{padding:7px 14px;border:1.5px solid #e8dece;background:#fff;border-radius:30px;font-size:.68rem;font-weight:600;color:#6b5e54;cursor:pointer;outline:none;font-family:var(--fb);appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8078' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color .2s} .filter-select:focus{border-color:var(--gold)} .filter-clear{font-size:.7rem;color:var(--gold);text-decoration:none;display:flex;align-items:center;gap:5px} .filter-clear:hover{text-decoration:underline} /* Estado badge en cards */ .pc-estado{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px} .estado-en-pozo{background:#dbeafe;color:#1e40af} .estado-inicio-obra{background:#fef9c3;color:#854d0e} .estado-en-obra{background:#ffedd5;color:#9a3412} .estado-entregado{background:#dcfce7;color:#166534} /* ── INVERSIONES ──────────────── */ .inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px} .inv-card{text-decoration:none;border-radius:10px;overflow:hidden;background:var(--w);border:1px solid var(--c2);transition:box-shadow .25s,transform .2s;display:flex;flex-direction:column} .inv-card:hover{box-shadow:0 10px 32px rgba(26,24,20,.12);transform:translateY(-4px)} .inv-img{position:relative;height:200px;overflow:hidden;background:var(--c3);flex-shrink:0} .inv-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .inv-card:hover .inv-img img{transform:scale(1.05)} .inv-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%)} .inv-roi{position:absolute;bottom:12px;left:14px;font-size:.7rem;color:rgba(255,255,255,.9);z-index:1} .inv-roi strong{color:#fff;font-size:.85rem} .inv-body{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1} .inv-nombre{font-size:.9rem;font-weight:700;color:var(--ink)} .inv-zona{font-size:.7rem;color:var(--muted)} .inv-price-wrap{padding-top:10px;border-top:1px solid var(--c2)} .inv-desde{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px} .inv-precio{font-family:var(--ff);font-size:var(--fs-lg);font-weight:300;color:var(--ink);line-height:1} .inv-precio .inv-currency{font-size:.62rem;font-weight:600;color:var(--gold);margin-right:3px;vertical-align:middle;position:relative;top:-1px} .inv-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px} .inv-pill{font-size:.68rem;font-weight:600;padding:6px 12px;background:var(--c1);border:1px solid var(--c2);border-radius:12px;color:var(--ink2);display:inline-flex;align-items:center} .inv-cta{margin-top:auto;padding-top:10px;font-size:var(--fs-sm);font-weight:700;color:var(--gold);letter-spacing:.05em} @media(max-width:900px){.inv-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.inv-grid{grid-template-columns:1fr}} /* ── PROYECTOS BANNER ──────────── */ .proyectos-banner{background:var(--c1);padding:60px 0 70px} .proy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .proy-card{text-decoration:none;background:var(--w);border-radius:8px;overflow:hidden;border:1px solid var(--c2);transition:box-shadow .25s,transform .2s;display:flex;flex-direction:column} .proy-card:hover{box-shadow:0 8px 28px rgba(26,24,20,.1);transform:translateY(-3px)} .proy-img{position:relative;height:180px;overflow:hidden;background:var(--c3)} .proy-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .proy-card:hover .proy-img img{transform:scale(1.05)} .proy-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:var(--c3)} .proy-badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:12px;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:5px;backdrop-filter:blur(6px)} .proy-body{padding:16px;display:flex;flex-direction:column;gap:5px;flex:1} .proy-nombre{font-size:.88rem;font-weight:700;color:var(--ink);line-height:1.3} .proy-zona{font-size:.7rem;color:var(--muted)} .proy-price-wrap{margin-top:auto;padding-top:10px;border-top:1px solid var(--c2)} .proy-desde{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px} .proy-precio{font-family:var(--ff);font-size:var(--fs-lg);font-weight:300;color:var(--ink);line-height:1} .proy-precio .proy-currency{font-size:.62rem;font-weight:600;color:var(--gold);margin-right:3px;vertical-align:middle;position:relative;top:-1px} .proy-cta{margin-top:auto;padding-top:10px;font-size:var(--fs-sm);font-weight:600;color:var(--gold);letter-spacing:.06em} /* ── GRID PROPIEDADES ──────────── */ .props-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; background:transparent; padding:16px 48px 40px; max-width:1120px; margin:0 auto; } .pcard{ background:var(--w); overflow:hidden; position:relative; transition:box-shadow .3s, transform .25s; display:flex;flex-direction:column; border-radius:6px; border:1px solid rgba(26,20,16,.07); } .pcard:hover{box-shadow:0 20px 48px rgba(26,24,20,.16);transform:translateY(-5px);border-color:rgba(184,146,74,.35)} .pcard:hover .pc-img-in{transform:scale(1.07)} .pcard:hover .pc-hover{opacity:1} .pcard.main .pc-body{padding:18px 20px 22px} .pc-img{overflow:hidden;position:relative;flex-shrink:0;height:260px} .pc-img-in{ width:100%;height:100%; display:flex;align-items:center;justify-content:center; font-size:4rem; transition:transform .6s ease; } .pc-badge{ position:absolute;top:12px;left:12px;z-index:2; background:var(--gold);color:#fff; font-size:.53rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; padding:3px 10px; } .pc-hover{ position:absolute;inset:0; background:linear-gradient(to top,rgba(26,24,20,.78),transparent 52%); opacity:0;transition:opacity .3s; display:flex;align-items:flex-end;padding:14px;z-index:3; } .pc-hover-txt{font-size:.64rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold3)} .pc-body{padding:15px 17px 19px;flex:1;background:var(--w);display:flex;flex-direction:column} .pc-cta{margin-top:auto;padding-top:10px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);transition:color .2s} .pcard:hover .pc-cta{color:var(--ink)} .pc-price-wrap{margin-top:10px;padding-top:10px;border-top:1px solid var(--c2)} .pc-desde-lbl{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px} .pc-price{font-family:var(--ff);font-size:1.3rem;font-weight:300;color:var(--ink);margin-bottom:3px;line-height:1} .pc-price .pc-currency{font-size:.65rem;font-weight:600;color:var(--gold);margin-right:3px;vertical-align:middle;position:relative;top:-1px} .pcard.main .pc-price{font-size:1.7rem} .pc-name{font-size:var(--fs-base);font-weight:400;color:var(--ink2);margin-bottom:2px} .pc-zone{font-size:var(--fs-xs);color:var(--muted);margin-bottom:9px} .pc-feats{display:flex;gap:9px;font-size:var(--fs-xs);color:var(--muted);border-top:1px solid var(--c2);padding-top:8px} /* ── PROCESO ───────────────────── */ .proc-grid{ display:grid;grid-template-columns:repeat(4,1fr); border:1.5px solid var(--c3); } .step{ padding:38px 26px; border-right:1.5px solid var(--c3); position:relative;background:var(--w); transition:background .25s; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon num" "title title" "desc desc"; column-gap:14px; align-items:center; } .step:last-child{border-right:none} .step:hover{background:var(--c1)} .step-arrow{ position:absolute;right:-14px;top:38px; color:var(--gold2);font-size:1rem;z-index:2; font-family:var(--ff); } .step:last-child .step-arrow{display:none} .step-num{ grid-area:num; font-family:var(--ff);font-size:3rem;font-weight:300; color:var(--c3);line-height:1;margin-bottom:0; } .step-icon{grid-area:icon;font-size:2rem;display:flex;align-items:center;margin-bottom:0} .step-icon img{width:44px!important;height:44px!important} .step-title{grid-area:title;margin-top:20px} .step-desc{grid-area:desc} .step-title{font-family:var(--ff);font-size:1.1rem;font-weight:400;color:var(--ink);margin-bottom:7px} .step-desc{font-size:var(--fs-sm);font-weight:300;color:var(--muted);line-height:1.75} /* ── TESTIMONIOS ───────────────── */ /* Carrusel testimonios */ .testi-carousel{position:relative;overflow:hidden} .test-grid{display:flex;gap:18px;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform} .test-grid .tc{flex:0 0 calc(33.333% - 12px);min-width:0} .tc{ background:var(--w);border:1.5px solid var(--c2); padding:30px;transition:border-color .25s; display:flex;flex-direction:column; } .tc:hover{border-color:var(--gold2)} .tc.feat{background:var(--c1);border-color:var(--gold)} .tc-stars{color:var(--gold);font-size:var(--fs-xs);letter-spacing:3px;display:block;margin-bottom:12px} .tc-q{ font-family:var(--ff);font-size:3.2rem;font-weight:300; color:var(--gold3);line-height:.7;display:block;margin-bottom:10px; } .tc-text{ font-family:var(--ff);font-size:.98rem;font-weight:300;font-style:italic; color:var(--ink2);line-height:1.72;margin-bottom:22px; flex:1; } .tc-author{display:flex;align-items:center;gap:10px;margin-top:auto} .tc-av{ width:37px;height:37px;border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#fff;font-size:.66rem;font-weight:600; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .tc-name{font-size:var(--fs-base);font-weight:600;color:var(--ink);display:block} .tc-role{font-size:var(--fs-xs);color:var(--muted);display:block;margin-top:1px} .testi-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px} .testi-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--c2);background:var(--w);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--ink2);transition:all .2s;flex-shrink:0} .testi-btn:hover{border-color:var(--gold);color:var(--gold)} .testi-btn:disabled{opacity:.3;cursor:default} .testi-dots{display:flex;gap:4px;align-items:center} .testi-dot{width:7px;height:7px;border-radius:50%;background:var(--c2);border:none;cursor:pointer;padding:18px;background-clip:content-box;transition:all .2s;position:relative} .testi-dot.on{background:var(--gold);width:20px;border-radius:4px;background-clip:content-box} /* ── CONTACTO ──────────────────── */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;min-height:75vh} .cl{ padding:60px 48px;background:var(--c1); border-right:1px solid var(--c3); display:flex;flex-direction:column;justify-content:center; } .cr{ padding:60px 48px;background:var(--w); display:flex;flex-direction:column;justify-content:center; } .c-h2{ font-family:var(--ff); font-size:clamp(1.6rem,2.6vw,2.5rem); font-weight:300;line-height:1.15;color:var(--ink);margin-bottom:14px; } .c-h2 em{font-style:italic;color:var(--gold)} .c-p{font-size:var(--fs-base);font-weight:300;color:var(--muted);line-height:1.85;margin-bottom:36px;max-width:300px} .ci-list{display:flex;flex-direction:column;gap:16px} .ci{display:flex;align-items:center;gap:13px} .ci-icon{ width:auto;height:auto; border:none; display:flex;align-items:center;justify-content:center; font-size:1.4rem;flex-shrink:0; } .ci-icon img{width:32px!important;height:32px!important} .ci-lbl{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:1px} .ci-val{font-size:var(--fs-base);color:var(--ink)} .ci-val.gold{color:var(--gold)} .wa-banner{ display:flex;align-items:center;justify-content:space-between; padding:14px 17px; background:rgba(37,211,102,.06); border:1.5px solid rgba(37,211,102,.2); margin-bottom:24px;cursor:pointer; transition:background .25s;text-decoration:none; } .wa-banner:hover{background:rgba(37,211,102,.1)} .wa-b-main{font-size:.76rem;font-weight:600;color:#166534;display:block} .wa-b-sub{font-size:.63rem;color:#4ade80;display:block;margin-top:2px} .wa-b-btn{ font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--wa);padding:7px 12px;border:1.5px solid rgba(37,211,102,.25);white-space:nowrap; } /* FORM */ .honeypot{display:none!important} .fg{display:flex;flex-direction:column;gap:5px;margin-bottom:16px} .fg label{font-size:var(--fs-sm);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .fg input,.fg select,.fg textarea{ padding:10px 0;background:transparent; border:none;border-bottom:1.5px solid var(--c3); font-family:var(--fb);font-size:var(--fs-base);font-weight:300; color:var(--ink);outline:none; transition:border-color .25s; -webkit-appearance:none;border-radius:0; } .fg input:focus,.fg select:focus,.fg textarea:focus{border-bottom-color:var(--gold)} .fg input::placeholder,.fg textarea::placeholder{color:var(--c3)} .fg select option{background:var(--w);color:var(--ink)} .fg textarea{resize:none;min-height:65px} .f2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .btn-submit{ width:100%;padding:16px; background:linear-gradient(135deg,#b8924a 0%,#d4aa6a 50%,#b8924a 100%); background-size:200% auto; color:#fff; font-family:var(--fb);font-size:var(--fs-sm);font-weight:700; letter-spacing:.16em;text-transform:uppercase; border:none;cursor:pointer;border-radius:4px; box-shadow:0 4px 22px rgba(184,146,74,.45); transition:background-position .4s,box-shadow .3s,transform .2s; margin-top:10px; display:flex;align-items:center;justify-content:center;gap:10px; animation:btnPulse 2.4s ease-in-out infinite; } .btn-submit:hover{background-position:right center;box-shadow:0 6px 28px rgba(184,146,74,.65);transform:translateY(-1px)} .btn-submit:active{transform:scale(.98)} .btn-submit:disabled{ background:linear-gradient(135deg,rgba(184,146,74,.18),rgba(184,146,74,.25)); background-size:auto; color:#b8924a; cursor:not-allowed; box-shadow:none; border:1.5px dashed rgba(184,146,74,.5); animation:btnPulseLock 2.8s ease-in-out infinite; } .btn-submit:disabled:hover{transform:none;box-shadow:none} @keyframes btnPulse{ 0%,100%{box-shadow:0 4px 22px rgba(184,146,74,.45)} 50%{box-shadow:0 4px 32px rgba(184,146,74,.8),0 0 0 6px rgba(184,146,74,.08)} } @keyframes btnPulseLock{ 0%,100%{border-color:rgba(184,146,74,.35)} 50%{border-color:rgba(184,146,74,.75)} } @keyframes btnUnlock{0%{transform:scale(.97)}60%{transform:scale(1.03)}100%{transform:scale(1)}} .btn-submit.unlocked{animation:btnUnlock .35s ease} .form-note{font-size:.6rem;color:var(--muted);text-align:center;margin-top:8px} .interes-pill{padding:7px 18px;border:1px solid rgba(184,146,74,.4);border-radius:20px;background:transparent;color:var(--muted);font-size:.72rem;font-family:var(--fb);cursor:pointer;transition:all .2s;letter-spacing:.04em;line-height:1} .interes-pill.active,.interes-pill:hover{background:var(--gold);border-color:var(--gold);color:#fff} .fg-msg{font-size:var(--fs-2xs);line-height:1.4;display:block;min-height:0;transition:color .2s} .fg.error .fg-msg{color:#c0392b} .fg.error input{border-bottom-color:#c0392b} .fg.valid input{border-bottom-color:#27ae60} .form-success{display:none;text-align:center;padding:36px 16px} .success-ico{ width:52px;height:52px;border-radius:50%; background:rgba(37,211,102,.1); display:flex;align-items:center;justify-content:center; margin:0 auto 14px;font-size:1.3rem;color:var(--wa); } .form-success h3{font-family:var(--ff);font-size:1.5rem;font-weight:300;color:var(--ink);margin-bottom:7px} .form-success p{font-size:.82rem;color:var(--muted);margin-bottom:20px} /* ── REDES SOCIALES ────────────── */ .social-strip{ background:var(--c2); border-top:1px solid var(--c3); border-bottom:1px solid var(--c3); padding:44px 48px; } .ss-wrap{ max-width:1120px;margin:0 auto; display:grid;grid-template-columns:1fr auto; gap:36px;align-items:start; } .ss-ey{display:flex;align-items:center;gap:10px;margin-bottom:10px} .ss-bar{width:20px;height:1px;background:var(--gold)} .ss-ey-txt{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} .ss-h2{font-family:var(--ff);font-size:1.7rem;font-weight:300;color:var(--ink);line-height:1.15} .ss-h2 em{font-style:italic;color:var(--gold)} .ss-desc{font-size:.8rem;font-weight:300;color:var(--muted);margin-top:7px;line-height:1.75;max-width:340px} .sc-cards{display:flex;gap:12px;flex-wrap:wrap} .sc{ display:flex;flex-direction:column; padding:16px 18px; background:var(--w);border:1.5px solid var(--c3); min-width:165px;cursor:pointer;text-decoration:none; transition:all .3s;position:relative;overflow:hidden; } .sc::before{content:'';position:absolute;bottom:0;left:0;width:0;height:3px;transition:width .35s} .sc:hover::before{width:100%} .sc:hover{transform:translateY(-3px);box-shadow:0 7px 24px rgba(26,24,20,.1)} .sc.yt::before{background:#FF0000} .sc.ig::before{background:linear-gradient(90deg,#f09433,#dc2743,#bc1888)} .sc.tk::before{background:#69c9d0} .sc.wa2::before{background:var(--wa)} .sc-top{display:flex;align-items:center;gap:8px;margin-bottom:9px} .sc-ico{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .sc-ico.yt{background:rgba(255,0,0,.1)} .sc-ico.ig{background:rgba(225,48,108,.1)} .sc-ico.tk{background:rgba(0,0,0,.06)} .sc-ico.wa{background:rgba(37,211,102,.1)} .sc-net{font-size:.58rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase} .sc-net.yt{color:#FF0000} .sc-net.ig{color:#E1306C} .sc-net.tk{color:#444} .sc-net.wa{color:var(--wa)} .sc-handle{font-family:var(--ff);font-size:.9rem;font-weight:400;color:var(--ink);margin-bottom:2px} .sc-stat{font-size:.63rem;font-weight:300;color:var(--muted)} .sc-cta{margin-top:9px;font-size:.58rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} /* ── FOOTER ────────────────────── */ .footer{background:var(--footer-bg);padding:48px 0 22px} .footer-grid{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr; gap:36px;margin-bottom:36px; } .f-name{font-family:var(--ff);font-size:var(--fs-lg);font-weight:300;color:#fff;margin-bottom:2px} .f-sub{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--gold2);display:block;margin-bottom:11px} .f-desc{font-size:var(--fs-sm);font-weight:300;color:rgba(250,247,242,.55);line-height:1.8;max-width:240px;margin-bottom:18px} .f-socials{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .fs{ display:flex;align-items:center;justify-content:center; border:none;background:none; cursor:pointer;text-decoration:none; transition:all .25s;padding:2px; } .f-socials svg{width:30px;height:30px;} .f-socials svg path{fill:rgba(255,255,255,.82);} .f-socials img{width:30px;height:30px;object-fit:contain;opacity:.82;} .fs:hover{transform:translateY(-3px);} .fs:hover svg path{fill:var(--gold2);} .fs:hover img{opacity:1;filter:drop-shadow(0 0 6px var(--gold2));} .f-col-title{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--gold2);margin-bottom:14px} .f-col ul{list-style:none;display:flex;flex-direction:column;gap:8px} .f-col li a,.f-col li span{font-size:var(--fs-sm);font-weight:300;color:rgba(250,247,242,.5);transition:color .2s;display:block} .f-col li a:hover{color:rgba(250,247,242,.85)} .f-zonas{border-top:1px solid rgba(255,255,255,.07);padding-top:24px;margin-bottom:30px} .f-zonas-links{display:flex;flex-wrap:wrap;gap:9px 8px} .f-zonas-links a{font-size:var(--fs-sm);font-weight:300;color:rgba(250,247,242,.5);text-decoration:none;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:5px 14px;transition:all .2s;white-space:nowrap} .f-zonas-links a:hover{color:var(--gold2);border-color:var(--gold2)} .f-bottom{ border-top:1px solid rgba(255,255,255,.07); padding-top:18px; display:flex;justify-content:space-between;flex-wrap:wrap;gap:7px; } .f-copy{font-size:var(--fs-2xs);color:rgba(250,247,242,.55)} /* ── FOCUS STATES ─────────────── */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px} .nav-links a:focus-visible{color:var(--gold)} .pcard:focus-within{box-shadow:0 0 0 2px var(--gold)} /* ── WA FLOAT ──────────────────── */ .wa-float{ position:fixed;right:18px;bottom:24px;z-index:9999; width:52px;height:52px; background:var(--wa-cta-idx);border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 3px 10px rgba(var(--wa-rgb),.5); text-decoration:none;overflow:visible; transition:transform .2s,box-shadow .2s; } .wa-float::before{ content:'';position:absolute;inset:-6px;border-radius:50%; border:2px solid rgba(var(--wa-rgb),.4); animation:waPulse 2s ease-out infinite; } .wa-float::after{ content:'';position:absolute;inset:-12px;border-radius:50%; border:2px solid rgba(var(--wa-rgb),.2); animation:waPulse 2s ease-out .4s infinite; } @keyframes waPulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.3);opacity:0}} .wa-float:hover{transform:scale(1.12) translateY(-2px);box-shadow:0 8px 20px rgba(var(--wa-rgb),.7)} .wa-float img{width:44px;height:44px;object-fit:cover;border-radius:50%;display:block} /* ── MOBILE STICKY CTA ─────────── */ .mobile-cta-bar{ display:none;position:fixed;bottom:0;left:0;right:0;z-index:9998; background:var(--wa);padding:14px 20px; flex-direction:row;align-items:center;justify-content:center;gap:10px; box-shadow:0 -4px 20px rgba(0,0,0,.18); text-decoration:none;color:#fff; font-family:var(--fb);font-size:.82rem;font-weight:700;letter-spacing:.06em; } @media(max-width:768px){ .mobile-cta-bar{display:flex} .wa-float{bottom:80px} } /* Dark patterns CSS eliminado */ /* ── ANIMACIONES ───────────────── */ .fade-up{animation:fadeup .7s ease both} @keyframes fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease} .reveal.on{opacity:1;transform:translateY(0)} /* ── RESPONSIVE ────────────────── */ @media(min-width:1600px){ .container{max-width:1440px} .props-grid{max-width:1440px} .props-filters{max-width:1440px} .center-cta{max-width:1440px} .noticias-grid{max-width:none} } @media(min-width:1400px){ .container{max-width:1280px} .props-grid{max-width:1280px} .props-filters{max-width:1280px} .center-cta{max-width:1280px} .hero-l{padding:80px 64px 64px} } @media(max-width:1024px){ .footer-grid{grid-template-columns:1fr 1fr;gap:24px} .pc-img{height:220px} .proc-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ .hero{grid-template-columns:1fr} .hero-r{display:block;order:2} .hero-l{order:1} .contact-grid{grid-template-columns:1fr;min-height:auto} .proy-grid{grid-template-columns:repeat(2,1fr)} .sec-row{grid-template-columns:1fr;gap:16px} .section{padding:60px 0} .proyectos-banner{padding:40px 0 50px} } @media(max-width:768px){ .navbar{padding:0 18px} .nav-links{display:none} .nav-cta{display:none} .hamburger{display:flex} .nav-links.open{ display:flex;flex-direction:column; position:absolute;top:64px;left:0;right:0; background:var(--w);border-top:1px solid var(--c2); padding:14px 18px;gap:3px; box-shadow:0 6px 20px rgba(0,0,0,.09);z-index:998; } .hero{grid-template-columns:1fr;min-height:auto} .hero-r{display:block;height:auto;border-radius:10px;overflow:hidden;margin:0 20px 10px} .hero-slideshow{min-height:280px;max-height:320px} .hero-slide{min-height:280px;max-height:320px} .slide-info{padding:16px 16px 14px;flex-wrap:wrap;gap:8px} .slide-name{font-size:.82rem} .slide-zone{font-size:.65rem;margin-bottom:8px} .slide-tag{font-size:.5rem;padding:3px 9px;margin-bottom:6px} .slide-price-num{font-size:1.2rem;padding:4px 10px} .slide-price-currency{font-size:.5rem;padding:4px 6px} .slide-price-label{font-size:.52rem;margin-bottom:4px} .slide-btn{font-size:.58rem;padding:6px 14px} .slide-dots{bottom:8px} .slide-nav{width:32px;height:32px} .hero-l{padding:40px 20px 36px} .section{padding:56px 0} .container{padding:0 20px} .sec-row{grid-template-columns:1fr;gap:12px} .proc-grid{grid-template-columns:1fr 1fr} .test-grid .tc{flex:0 0 calc(100% - 0px)} .contact-grid{grid-template-columns:1fr} .cl,.cr{padding:36px 20px} .f2{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:24px} .social-band{padding:13px 20px} .social-strip{padding:36px 20px} .ss-wrap{grid-template-columns:1fr} .props-grid{grid-template-columns:1fr;padding-left:20px;padding-right:20px} .sc-cards{flex-direction:column} .sc{min-width:100%} .section{padding:48px 0} .proyectos-banner{padding:32px 0 40px} } @media(max-width:600px){ .section{padding:36px 0} .container{padding:0 16px} .proyectos-banner{padding:24px 0 32px} .proy-grid{grid-template-columns:1fr;padding-left:16px;padding-right:16px} .props-grid{padding-left:16px;padding-right:16px} .cl,.cr{padding:28px 16px} .proc-grid{grid-template-columns:1fr} .f2,.f3{grid-template-columns:1fr} } /* ── SLIDESHOW HERO ─────────────────────────── */ .hero-r{overflow:hidden} .hero-slideshow{position:relative;width:100%;height:100%;min-height:520px;max-height:680px;overflow:hidden;background:var(--c2)} .hero-slide{ position:absolute;inset:0; opacity:0;transition:opacity .9s ease; display:flex;flex-direction:column;justify-content:flex-end; min-height:520px;max-height:680px; } .hero-slide.active{opacity:1;z-index:2} .hero-slide img{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:center; z-index:0; } .slide-placeholder{ position:absolute;inset:0; background:linear-gradient(135deg,#2a1f14 0%,#1a1410 100%); z-index:0; } .slide-placeholder::after{ content:'🏙️'; position:absolute; top:50%;left:50%; transform:translate(-50%,-60%); font-size:5rem;opacity:.15; } .slide-overlay{ position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(10,8,6,.92) 0%,rgba(10,8,6,.5) 40%,rgba(10,8,6,.1) 100%); } .slide-info{ position:relative;z-index:3; padding:32px 32px 28px; color:#fff; display:flex;align-items:flex-end;justify-content:space-between;gap:16px; } .slide-info-left{flex:1;min-width:0} .slide-price-badge{ flex-shrink:0; text-align:right; white-space:nowrap; } .slide-price-label{ font-size:.62rem;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:#fff; display:block;margin-bottom:7px; } .slide-price-val{ display:inline-flex;align-items:center;gap:0; background:rgba(10,8,6,.88); } .slide-price-currency{ font-size:.58rem;font-weight:700;letter-spacing:.06em; color:#fff;background:var(--gold); padding:6px 8px;align-self:stretch; display:flex;align-items:center; } .slide-price-num{ font-family:var(--ff); font-size:1.7rem;font-weight:400; color:#fff;line-height:1; padding:6px 14px; } .slide-tag{ display:inline-flex;align-items:center;gap:5px; background:var(--gold);color:#fff; font-size:.54rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase; padding:4px 12px;margin-bottom:10px; } .slide-price{ font-family:var(--ff);font-size:2.4rem;font-weight:300; color:#fff;line-height:1;margin-bottom:5px; } .slide-name{ font-size:.92rem;font-weight:400; color:rgba(255,255,255,.9);margin-bottom:4px; } .slide-zone{ font-size:.72rem;color:rgba(255,255,255,.55); margin-bottom:14px; } .slide-feats{ display:flex;gap:16px;font-size:.7rem; color:rgba(255,255,255,.55); margin-bottom:14px; border-top:1px solid rgba(255,255,255,.12); padding-top:12px; } .slide-btn{ display:inline-block; font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--gold2); border-bottom:1px solid rgba(212,170,106,.35); padding-bottom:2px;text-decoration:none; transition:all .2s; } .slide-btn:hover{color:#fff;border-color:#fff} .slide-dots{ position:absolute;bottom:16px;right:20px; display:flex;gap:7px;z-index:5; } .slide-dot{ width:6px;height:6px;border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer;transition:all .28s; } .slide-dot.on{background:var(--gold2);width:20px;border-radius:3px} .slide-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.2); color:#fff;font-size:1.5rem; width:38px;height:38px;border-radius:50%; cursor:pointer;transition:all .2s; display:flex;align-items:center;justify-content:center; backdrop-filter:blur(6px); } .slide-arrow:hover{background:rgba(184,146,74,.5);border-color:var(--gold)} .slide-prev{left:14px} .slide-next{right:14px} /* ── PNG SOCIAL ICONS ── */ .sc-cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:10px 0} .png-icon-card{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .25s,filter .25s} .png-icon-card:hover{transform:translateY(-5px);filter:brightness(1.15)} .png-icon-card img{width:72px;height:72px;object-fit:contain;display:block} .png-icon-card span{font-size:.56rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6b5e54} /* ── NOTICIAS ── */ .newsletter-section{position:relative;background:var(--footer-bg);padding:72px 0 0;overflow:hidden} .nl-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(184,146,74,.12) 0%,transparent 70%);pointer-events:none} .nl-top{position:relative;z-index:1} .noticias-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:28px} .noticia-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s} .noticia-card:hover{border-color:rgba(184,146,74,.4);transform:translateY(-3px)} .noticia-card.destacada{border-color:rgba(184,146,74,.35);background:rgba(184,146,74,.06)} .noticia-card-img{width:100%;height:180px;overflow:hidden;flex-shrink:0} .noticia-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .noticia-card:hover .noticia-card-img img{transform:scale(1.04)} .noticia-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} .noticia-card-cat{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;display:block} .noticia-card-titulo{font-family:var(--ff);font-size:1.05rem;font-weight:400;color:#fff;line-height:1.35;margin-bottom:10px;text-align:left;text-transform:none} .noticia-card-resumen{font-size:.8rem;color:rgba(255,255,255,.6);line-height:1.7;text-align:justify;flex:1} .noticia-card-contenido{font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.7;text-align:justify;margin-top:8px;display:none} .noticia-card-contenido.open{display:block} .noticia-ver-mas{background:none;border:none;color:var(--gold);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:8px 0 0;text-align:left;font-family:var(--fb)} .noticia-fuente{display:inline-flex;align-items:center;gap:5px;color:var(--gold);font-size:.68rem;font-weight:600;text-decoration:none;margin-top:10px;transition:opacity .2s;border-top:1px solid rgba(184,146,74,.2);padding-top:10px} .noticia-fuente:hover{opacity:.75} @media(max-width:640px){.noticias-grid{grid-template-columns:1fr}} /* ── MAPA INTERACTIVO ────────────────────── */ .mapa-section { padding: 60px 20px; background: var(--map-bg); order: var(--mapa-order,950); } .container-mapa { max-width: 1200px; margin: 0 auto; } .mapa-titulo { text-align: center; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 300; margin-bottom: 24px; color: #1a1814; } /* ── Controles de búsqueda ── */ .mapa-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; } .mapa-search-wrap { position: relative; flex: 1; min-width: 220px; } /* Etiqueta flotante encima */ .mapa-search-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b8924a; margin-bottom: 5px; } /* Contenedor visual del input — parece un select */ .mapa-search-box { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border: 2px solid #b8924a; border-radius: 10px; background: #fff; cursor: pointer; transition: box-shadow .2s, background .2s; box-shadow: 0 2px 8px rgba(184,146,74,.15); } .mapa-search-box:hover, .mapa-search-wrap.open .mapa-search-box { background: #fffdf8; box-shadow: 0 4px 16px rgba(184,146,74,.25); } .mapa-search-icon { color: #b8924a; flex-shrink: 0; } #mapa-search { flex: 1; border: none; outline: none; font-size: 14px; font-weight: 500; color: #1a1814; background: transparent; cursor: pointer; min-width: 0; } #mapa-search::placeholder { color: #aaa; font-weight: 400; } .mapa-search-divider { width: 1px; height: 22px; background: #e0d4c0; flex-shrink: 0; } .mapa-search-chevron { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #b8924a; color: #fff; flex-shrink: 0; transition: transform .2s, background .2s; } .mapa-search-wrap.open .mapa-search-chevron { transform: rotate(180deg); background: #8a6830; } /* ── Dropdown de propiedades ── */ .mapa-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 2px solid #b8924a; border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.22); z-index: 9999; max-height: 360px; overflow-y: auto; display: none; } .mapa-dropdown.open { display: block; } .mapa-dropdown-header { padding: 10px 16px 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b8924a; border-bottom: 1px solid #f0ece3; background: #fffdf9; border-radius: 10px 10px 0 0; } .mapa-dropdown-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; transition: background .15s; border-bottom: 1px solid #f5f0e8; } .mapa-dropdown-item:last-child { border-bottom: none; } .mapa-dropdown-item:hover, .mapa-dropdown-item.active { background: #fdf6ec; } .mapa-dropdown-item:hover .mapa-dropdown-nombre, .mapa-dropdown-item.active .mapa-dropdown-nombre { color: #b8924a; } .mapa-dropdown-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid #ede5d9; } .mapa-dropdown-thumb-placeholder { width: 56px; height: 56px; border-radius: 8px; background: #f5f0e8; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; border: 1px solid #ede5d9; } .mapa-dropdown-info { flex: 1; min-width: 0; } .mapa-dropdown-nombre { font-size: 14px; font-weight: 800; color: #1a1814; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; } .mapa-dropdown-zona { font-size: 12px; color: #888; font-weight: 500; margin-top: 3px; } .mapa-dropdown-arrow { font-size: 18px; color: #d4b87a; flex-shrink: 0; } /* ── Chips de zona ── */ .mapa-zonas { display: flex; gap: 8px; flex-wrap: wrap; } .zona-chip { padding: 7px 14px; border: 1.5px solid #ddd; border-radius: 20px; background: #fff; color: #555; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s; white-space: nowrap; } .zona-chip:hover { border-color: #b8924a; color: #b8924a; } .zona-chip.active { background: #b8924a; border-color: #b8924a; color: #fff; } /* ── Ayuda: qué significan los números de los clusters ── */ .mapa-legend { text-align: center; font-size: 12.5px; color: #948a76; margin: 10px 0 0; } /* Punto dorado real en vez del emoji 🔘 — en Windows/Chrome ese emoji se ve como un círculo gris plano, no dorado, y no coincide con el color real de los clusters del mapa (#b8924a). */ .mapa-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #b8924a; vertical-align: middle; margin-bottom: 2px; } /* ── Resultados sin coincidencia ── */ .mapa-no-results { text-align: center; padding: 12px; font-size: 13px; color: #888; display: none; } /* ── Botón centrar mapa ── */ .mapa-center-btn { display: flex; align-items: center; gap: 6px; margin: 10px 10px 0 0; padding: 8px 14px; background: #fff; border: none; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.22); cursor: pointer; font-family: 'Nunito Sans', sans-serif; font-size: 13px; font-weight: 700; color: #b8924a; transition: background .18s, color .18s, box-shadow .18s; outline: none; } .mapa-center-btn:hover { background: #b8924a; color: #fff; box-shadow: 0 4px 14px rgba(184,146,74,0.35); } .mapa-center-btn svg { flex-shrink: 0; } /* Oculto visualmente pero legible por lectores de pantalla — usado por el status del buscador del mapa (aria-live) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Mapa ── */ .mapa-container { width: 100%; height: 680px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.15); position: relative; /* ancla al aviso de Ctrl+scroll */ } /* Aviso de "Ctrl + scroll" — el mapa tiene scrollWheelZoom desactivado por defecto para no atrapar el scroll de la página; este mensaje avisa cómo hacer zoom cuando el usuario intenta scrollear sin Ctrl. */ .mapa-scroll-hint { position: absolute; inset: 0; z-index: 650; /* por encima de tiles/marcadores, por debajo de popups (700) */ display: flex; align-items: center; justify-content: center; background: rgba(26,24,20,0.55); color: #fff; font: 600 15px/1.4 'Nunito Sans', -apple-system, sans-serif; text-align: center; padding: 20px; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .mapa-scroll-hint.show { opacity: 1; } @media (max-width: 640px) { .mapa-scroll-hint { display: none; } /* en móvil el zoom es con pellizco, no aplica */ } /* Clusters de propiedades (Leaflet.markercluster) — tema propio en vez de MarkerCluster.Default.css, para respetar el dorado de la marca */ .mapa-cluster { background: rgba(184,146,74,0.28); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .mapa-cluster > div { width: 34px; height: 34px; border-radius: 50%; background: #b8924a; border: 2px solid #fff; color: #fff; font: 700 13px/1 'Nunito Sans', -apple-system, sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .mapa-cluster-lg > div { width: 42px; height: 42px; font-size: 14px; } @media (max-width: 768px) { .mapa-section { padding: 40px 15px; } .mapa-container { height: 480px; } .mapa-controls { gap: 8px; } } @media (max-width: 640px) { .mapa-container { height: 400px; } #mapa-search { font-size: 16px; } /* evita zoom en iOS */ /* Chips de zona en grilla de 2 columnas — en flex-wrap quedaban alineados a la izquierda con anchos dispares y se veían desordenados */ .mapa-zonas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .zona-chip { text-align: center; white-space: normal; } } /* ── CARRUSEL PROPIEDADES ─────────────────────────────── */ .props-carousel-wrap{width:100%} .swiper-propiedades{width:100%;overflow:hidden} .swiper-propiedades .swiper-wrapper{padding:8px 0 16px} .props-nav-row{display:flex;justify-content:center;align-items:center;gap:20px;margin:24px 0 8px} .props-nav-btn{width:56px;height:56px;border-radius:50%;background:#b8924a;color:#fff;border:none;cursor:pointer;font-size:36px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;box-shadow:0 4px 20px rgba(184,146,74,.4);padding:0} .props-nav-btn:hover{background:#9a7a3e;transform:scale(1.1);box-shadow:0 6px 28px rgba(184,146,74,.55)} @media(max-width:640px){.props-nav-btn{width:48px;height:48px;font-size:28px}}