@font-face { font-family: "Gambetta"; src: local("Gambetta"), local("Gambetta-Regular"), url("../fonts/Gambetta-Regular.woff2") format("woff2"), url("../fonts/Gambetta-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Gambetta"; src: local("Gambetta Medium"), local("Gambetta-Medium"), url("../fonts/Gambetta-Medium.woff2") format("woff2"), url("../fonts/Gambetta-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: local("Switzer"), local("Switzer-Regular"), url("../fonts/Switzer-Regular.woff2") format("woff2"), url("../fonts/Switzer-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: local("Switzer Medium"), local("Switzer-Medium"), url("../fonts/Switzer-Medium.woff2") format("woff2"), url("../fonts/Switzer-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: local("Switzer SemiBold"), local("Switzer-Semibold"), url("../fonts/Switzer-Semibold.woff2") format("woff2"), url("../fonts/Switzer-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } :root{ --color-brand-green: #0E251D; --color-ivory: #FAF7F0; --color-stone: #F4EFE6; --color-sand: #E7DECC; --color-gold: #C0A062; --color-ink: #1A1A17; --color-gold-soft: #DBC089; --font-display: "Gambetta", Georgia, "Times New Roman", serif; --font-body: "Switzer", Arial, Helvetica, sans-serif; --green-900: var(--color-brand-green); --green-800: #122E25; --green-700: #1C4438; --green-600: #2A5A49; --stone-50: var(--color-ivory); --stone-100: var(--color-stone); --stone-200: var(--color-sand); --stone-300: #D8CBB1; --gold: var(--color-gold); --gold-light: var(--color-gold-soft); --ink: var(--color-ink); --muted: #5C5648; --serif: var(--font-display); --sans: var(--font-body); /* ===== sistema de acentos ===== Cada sección redefine --accent (versión oscura, para fondos claros) y --accent-light (versión clara, para fondos verdes). Todo lo que antes era dorado — eyebrows, cifras, iconos, bordes, subrayados — hereda el acento de la sección en la que está. El dorado sigue siendo el valor por defecto. */ --accent: var(--color-gold); --accent-light: var(--color-gold-soft); } /* paleta */ .a-oro {--accent:#B8892F;--accent-light:#DBC089} .a-jade {--accent:#2E8B6F;--accent-light:#4FBF9B} .a-ambar {--accent:#C08A2E;--accent-light:#E8B45F} .a-azul {--accent:#3E7FB0;--accent-light:#6FB1E0} .a-terra {--accent:#C0603C;--accent-light:#E08A63} .a-violeta {--accent:#7A5AA8;--accent-light:#B08FE0} .a-teal {--accent:#2E8B8B;--accent-light:#5FC9C9} .a-rosa {--accent:#B85A7A;--accent-light:#E58AA8} /* asignación por sección */ #metros {--accent:#2E8B6F;--accent-light:#4FBF9B} #deptos {--accent:#C08A2E;--accent-light:#E8B45F} /* .amen va sobre verde oscuro: ahí el acento SIEMPRE es la variante clara */ .amen {--accent:#6FB1E0;--accent-light:#6FB1E0} .amen-gallery{--accent:#3E7FB0;--accent-light:#6FB1E0} #ubicacion {--accent:#C0603C;--accent-light:#E08A63} .gal {--accent:#7A5AA8;--accent-light:#B08FE0} #faq {--accent:#2E8B8B;--accent-light:#5FC9C9} /* hero, franja de valor, inversión y contacto conservan el dorado de marca */ #lb{--accent:#E8B45F;--accent-light:#E8B45F} /* visor sobre fondo oscuro */ /* acento propio por pilar y por amenidad — el gesto "estilo Apple" */ .pillars .pillar:nth-child(1){--accent-light:#4FBF9B} .pillars .pillar:nth-child(2){--accent-light:#E8B45F} .pillars .pillar:nth-child(3){--accent-light:#6FB1E0} .pillars .pillar:nth-child(4){--accent-light:#E08A63} /* todos los iconos de amenidades en un solo color dorado cálido */ .amen-grid .amen-item{--accent-light:#C0A062} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--sans);background:var(--color-ivory);color:var(--color-ink);overflow-x:hidden;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.05;letter-spacing:-.01em} .wrap{max-width:1200px;margin:0 auto;padding:0 28px} a{color:inherit;text-decoration:none} .eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)} /* reveal */ .reveal{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1),filter 1.4s ease} .reveal.in{opacity:1;transform:none;filter:blur(0)} .d1{transition-delay:.18s}.d2{transition-delay:.36s}.d3{transition-delay:.54s}.d4{transition-delay:.72s} /* nav */ nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:18px 0;transition:.4s;border-bottom:1px solid transparent} nav.scrolled{background:rgba(14,37,29,.92);backdrop-filter:blur(14px);padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,transparent)} .nav-inner{display:flex;align-items:center;justify-content:space-between} .brand{display:inline-flex;align-items:center;justify-content:center;line-height:0;min-width:0;flex-shrink:1} .brand img{display:block;height:42px;width:auto;max-width:220px} .brand b{color:var(--accent);font-weight:700} .nav-links{display:flex;gap:30px;align-items:center} .nav-links a{color:rgba(255,255,255,.82);font-size:13.5px;font-weight:500;letter-spacing:.02em;transition:.25s} .nav-links a:hover{color:var(--accent)} .nav-cta{border:1px solid var(--accent);color:var(--accent)!important;padding:9px 20px;border-radius:40px;font-size:13px;transition:.3s} .nav-cta:hover{background:var(--accent);color:var(--green-900)!important} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer} .burger span{width:26px;height:2px;background:#fff;transition:.3s} /* shimmer button */ .btn-shimmer{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--green-900);font-weight:600;font-size:15px;padding:16px 34px;border-radius:46px;border:none;cursor:pointer;letter-spacing:.01em;transition:transform .3s,box-shadow .3s} .btn-shimmer:hover{box-shadow:0 16px 44px -10px color-mix(in srgb,var(--accent) 70%,transparent);filter:brightness(1.06)} .btn-shimmer::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shimmer 3.6s infinite} @keyframes shimmer{0%{left:-130%}55%,100%{left:160%}} .btn-ghost{display:inline-flex;align-items:center;gap:10px;color:#fff;border:1px solid rgba(255,255,255,.5);padding:15px 30px;border-radius:46px;font-weight:500;font-size:15px;transition:.3s} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} /* hero — dark cinematic */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:#060D0B} /* encuadre: alineado a la izquierda de la foto + desplazado a la derecha, para que se vean las 3 torres */ /* transform-origin a la izquierda: el zoom crece hacia la derecha y las 3 torres nunca se recortan, sea cual sea la proporción de la pantalla (16:9, 16:10, ultrawide o móvil) */ .hero-bg{position:absolute;inset:0;background:url('../img/dji-0063.jpg') 0% 56%/cover no-repeat;transform-origin:0% 50%;transform:scale(1.05);animation:kenburnsHero 24s ease-in-out infinite alternate;will-change:transform;filter:saturate(1.05) brightness(.97)} @keyframes kenburnsHero{0%{transform:scale(1.05) translateY(0)}100%{transform:scale(1.13) translateY(-1.5%)}} @keyframes kenburns{0%{transform:scale(1.18) translate(0,0)}100%{transform:scale(1.32) translate(-2.5%,-2%)}} /* velo más ligero: la foto se ve; la legibilidad se sostiene con la sombra de texto de .hero-content */ .hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,13,11,.78) 0%,rgba(6,13,11,.64) 28%,rgba(6,13,11,.42) 58%,rgba(6,13,11,.56) 100%)} .hero-overlay2{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,13,11,.28),rgba(6,13,11,.44) 32%,rgba(6,13,11,.2) 100%),radial-gradient(120% 80% at 16% 55%,rgba(14,42,36,.35),transparent 60%)} .glow{position:absolute;border-radius:50%;filter:blur(120px);mix-blend-mode:screen;z-index:1;pointer-events:none} .glow-teal{width:540px;height:540px;background:rgba(30,96,84,.55);top:-130px;left:-90px} .glow-gold{width:430px;height:430px;background:color-mix(in srgb,var(--accent) 26%,transparent);bottom:-150px;right:-70px} .hero-content{position:relative;z-index:5;color:#fff;max-width:1200px;padding-top:90px;text-align:center;margin:0 auto} .hero h1{font-size:clamp(52px,7vw,120px);color:#fff;margin:24px auto 26px;letter-spacing:-.02em;text-shadow:0 2px 28px rgba(6,13,11,.7);max-width:1200px;display:block} .hero h1 .accent{font-style:italic;color:var(--accent-light)} .bw{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.42em);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.2s cubic-bezier(.16,1,.3,1)} .bw.in{opacity:1;filter:blur(0);transform:none} .hero p.sub{font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:rgba(255,255,255,.9);max-width:980px;font-weight:300;text-shadow:0 1px 18px rgba(6,13,11,.8);margin:0 auto} .hero-trust,.hero .glass-badge{text-shadow:0 1px 14px rgba(6,13,11,.7)} .hero-ctas{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;justify-content:center} /* liquid glass */ .liquid-glass{position:relative;background:rgba(255,255,255,.045);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 1px rgba(255,255,255,.16);overflow:hidden} .liquid-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.12) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,.12) 80%,rgba(255,255,255,.5));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .glass-badge{display:inline-flex;align-items:center;gap:9px;border-radius:40px;padding:9px 17px;font-size:12.5px;color:#fff;letter-spacing:.04em;font-weight:500;justify-content:center;margin:0 auto 10px} .glass-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-light);box-shadow:0 0 10px var(--accent-light);flex:none} .btn-glass{display:inline-flex;align-items:center;gap:10px;border-radius:46px;padding:15px 30px;color:#fff;font-weight:500;font-size:15px;transition:.3s;cursor:pointer} .btn-glass:hover{background:rgba(255,255,255,.12)} .scroll-ind{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:5;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.25em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px} .scroll-ind i{width:1px;height:46px;background:linear-gradient(var(--accent),transparent);animation:drop 2s infinite} @keyframes drop{0%{opacity:0;transform:scaleY(.3)}50%{opacity:1}100%{opacity:0;transform:scaleY(1) translateY(10px)}} /* en pantallas bajas (16:9) el indicador se encimaba con la línea de sellos */ @media(max-height:820px){.scroll-ind{display:none}} /* value strip */ .vstrip{background:var(--green-800);color:var(--stone-100);padding:70px 0} .vstrip-lead{font-family:var(--serif);font-size:clamp(26px,3.2vw,40px);line-height:1.2;max-width:880px;color:#fff} .vstrip-lead em{color:var(--accent-light);font-style:italic} .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:54px} .pillar{border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding-top:18px} .pillar h4{font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#F5F1E8;margin-bottom:8px} .pillar{border-top-color:color-mix(in srgb,var(--accent-light) 45%,transparent)} .pillar p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.7);font-weight:300} /* section base */ section.pad{padding:110px 0} .sec-head{max-width:680px;margin-bottom:56px} .sec-head h2{font-size:clamp(32px,4.4vw,56px);margin:16px 0;color:var(--ink)} .sec-head p{font-size:17px;line-height:1.65;color:var(--muted);font-weight:300} /* metros */ .metros{background:var(--stone-100)} .metros-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} .big-num,.big-num .ticker,.big-num span,.bar-row .lbl b,.stat .n,.depto-card .m2,.inv-stats .n,.ag-item .cap .n{font-family:var(--font-body);font-weight:500;font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:-.04em;text-shadow:none} .big-num{font-size:clamp(80px,13vw,168px);line-height:.85;color:var(--green-700)} .big-num span{font-size:.28em;color:var(--accent);vertical-align:super;font-weight:500} .metros-sub{font-size:18px;color:var(--muted);margin-top:14px;max-width:420px;line-height:1.6;font-weight:300} /* ── Compare card ──────────────────────────────────────────── */ .compare{ position:relative; background:linear-gradient(155deg,rgba(255,255,255,.99) 0%,rgba(245,242,235,.97) 100%); border-radius:24px; padding:36px; overflow:hidden; /* floating bob */ animation:cardFloat 7s ease-in-out infinite; /* layered shadow: ambient + key + glow ring */ box-shadow: 0 2px 4px rgba(14,37,29,.04), 0 8px 18px rgba(14,37,29,.07), 0 28px 60px -30px rgba(14,37,29,.30), 0 0 0 1px rgba(14,37,29,.07), 0 0 0 3px rgba(14,37,29,.00); transition:box-shadow .4s ease, transform .4s ease; } /* glowing border ring – pulses on and off */ .compare::before{ content:""; position:absolute; inset:-2px; border-radius:26px; background:conic-gradient( from 0deg, transparent 0deg, rgba(26,90,60,.18) 60deg, rgba(52,168,83,.38) 120deg, rgba(26,90,60,.18) 180deg, transparent 240deg, transparent 360deg ); z-index:0; animation:borderSpin 8s linear infinite, borderPulse 3.5s ease-in-out infinite; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask-composite:destination-out; padding:2px; } /* diagonal shine sweep */ .compare::after{ content:""; position:absolute; inset:0; background:linear-gradient(118deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%); transform:translateX(-100%) skewX(-12deg); animation:shineSweep 6s ease-in-out infinite; z-index:1; pointer-events:none; } /* floating particle dots */ .compare .particle{ position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(52,168,83,.5),transparent 70%); pointer-events:none; z-index:0; animation:particleDrift var(--dur,8s) ease-in-out var(--delay,0s) infinite alternate; } .compare .particle-1{width:80px;height:80px;top:-18px;right:-18px;--dur:9s;--delay:0s;--dx:10px;--dy:-14px} .compare .particle-2{width:40px;height:40px;bottom:20px;left:10px;--dur:7s;--delay:-3s;--dx:-8px;--dy:12px} .compare .particle-3{width:24px;height:24px;bottom:60px;right:40px;--dur:11s;--delay:-5s;--dx:6px;--dy:-8px} .compare h4{ font-family:var(--sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:26px; position:relative; z-index:2; } .bar-row{margin-bottom:26px;position:relative;z-index:2} .bar-row .lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin-bottom:10px} .bar-row .lbl b{font-size:20px;color:var(--ink)} .bar-track{ height:16px; background:rgba(14,37,29,.07); border-radius:99px; overflow:visible; position:relative; box-shadow:inset 0 2px 4px rgba(14,37,29,.10); } .bar-fill{ height:100%; border-radius:99px; width:0; transition:width 1.8s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden; } /* inner shimmer on every bar */ .bar-fill::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.32) 50%,transparent); transform:translateX(-100%); animation:shimmerBar 2.8s ease-in-out 1.2s infinite; } .bar-cdmx .bar-fill{ background:linear-gradient(90deg,#C8BAA4,#B5A48C); box-shadow:0 2px 6px rgba(0,0,0,.12); } /* Loma bar: gradient + glow + racing tip */ .bar-loma .bar-fill{ background:linear-gradient(90deg,#1A5A3C 0%,#2E8B57 55%,#52C97A 100%); box-shadow: 0 0 0 2px rgba(52,168,83,.15), 0 4px 14px rgba(26,90,60,.35), 0 0 28px rgba(52,168,83,.20); transition:width 2.2s cubic-bezier(.12,1,.28,1); } /* glowing tip that travels with the bar */ .bar-loma .bar-fill::after{ content:""; position:absolute; top:-4px; right:-6px; width:18px; height:calc(100% + 8px); background:radial-gradient(ellipse at center,rgba(100,220,140,.95) 0%,rgba(52,168,83,.4) 50%,transparent 80%); border-radius:50%; filter:blur(3px); opacity:0; transition:opacity .3s .8s; } .bar-loma .bar-fill.active::after{opacity:1;animation:tipPulse 1.6s ease-in-out 2s infinite} .compare .note{font-size:13px;color:var(--muted);margin-top:8px;font-style:italic;position:relative;z-index:2} /* ── keyframes ─────────────────────────────────────────────── */ @keyframes cardFloat{ 0%,100%{transform:translateY(0) rotate3d(1,1,0,0deg)} 33%{transform:translateY(-6px) rotate3d(1,0,0,.4deg)} 66%{transform:translateY(-3px) rotate3d(0,1,0,-.3deg)} } @keyframes borderSpin{to{--angle:360deg}} @keyframes borderPulse{ 0%,100%{opacity:.6} 50%{opacity:1} } @keyframes shineSweep{ 0%{transform:translateX(-120%) skewX(-12deg);opacity:0} 10%{opacity:1} 40%{transform:translateX(160%) skewX(-12deg);opacity:0} 100%{transform:translateX(160%) skewX(-12deg);opacity:0} } @keyframes shimmerBar{ 0%{transform:translateX(-110%)} 70%,100%{transform:translateX(130%)} } @keyframes particleDrift{ 0%{transform:translate(0,0) scale(1);opacity:.4} 100%{transform:translate(var(--dx,12px),var(--dy,-18px)) scale(1.4);opacity:.1} } @keyframes tipPulse{ 0%,100%{opacity:.9;filter:blur(3px)} 50%{opacity:.4;filter:blur(6px)} } .stat-row{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-top:64px;border-top:1px solid var(--stone-200);padding-top:46px;width:100%} .stat{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;min-height:170px} .stat .n{font-size:clamp(56px,5vw,92px);color:var(--green-700);line-height:.82;display:block} .stat .n span{color:var(--accent);font-size:.6em} .stat .t{font-size:15px;color:var(--muted);margin-top:12px;letter-spacing:.02em;line-height:1.4;max-width:220px} /* deptos */ .depto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .depto-card{position:relative;background:#fff;border:1px solid var(--stone-200);border-radius:16px;padding:30px 28px;overflow:hidden;transition:.4s;cursor:default} .depto-card::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(130deg,transparent 40%,var(--accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.5s} .depto-card:hover{transform:translateY(-6px);box-shadow:0 34px 60px -36px rgba(14,37,29,.4);border-color:transparent} .depto-card:hover::before{opacity:1} .depto-card .tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600} .depto-card .m2{font-size:46px;color:var(--ink);margin:8px 0 2px;font-weight:500} .depto-card .m2 span{font-size:.42em;color:var(--accent)} .depto-card .desc{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:10px} .depto-card .feat{display:flex;gap:14px;margin-top:18px;font-size:12.5px;color:var(--muted)} .depto-card .feat span{display:flex;align-items:center;gap:5px} /* amenidades */ .amen{background:radial-gradient(circle at top left, rgba(17,57,49,0.85), rgba(11,27,24,0.96) 42%, rgba(8,21,19,1) 100%);color:#fff;position:relative;overflow:hidden} .amen::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,0.02), transparent 40%, rgba(255,255,255,0.01));pointer-events:none} .amen .sec-head{max-width:880px;margin-bottom:52px;position:relative;z-index:1} .amen .sec-head h2,.amen .sec-head p{color:#fff} .amen .sec-head h2{font-size:clamp(42px,5vw,82px);letter-spacing:-.04em;line-height:.96;margin-top:16px;margin-bottom:18px} .amen .sec-head p{color:rgba(255,255,255,.74);font-size:17px;line-height:1.55;max-width:620px} .amen-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;position:relative;z-index:1} .amen-item{border:1px solid rgba(192,160,98,0.24);border-radius:18px;padding:28px 18px 24px;text-align:center;transition:.35s ease;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012));box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 10px 24px -24px rgba(0,0,0,.9);min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer} .amen-item:hover{background:linear-gradient(180deg, rgba(192,160,98,0.06), rgba(255,255,255,0.02));border-color:rgba(192,160,98,0.48);transform:translateY(-4px);box-shadow:0 18px 30px -24px rgba(0,0,0,.82),0 0 0 1px rgba(192,160,98,0.08)} .amen-item .ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,0.016);border:1px solid rgba(192,160,98,0.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02)} .amen-item .ic svg{width:28px;height:28px;stroke:#C0A062;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block} .amen-item p{font-size:15px;color:rgba(250,247,240,.9);line-height:1.3;letter-spacing:-.01em;max-width:170px} .marquee{margin-top:64px;overflow:hidden;border-top:1px solid rgba(219,192,137,0.18);border-bottom:1px solid rgba(219,192,137,0.18);padding:20px 0;position:relative;z-index:1;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee-track{display:flex;gap:54px;white-space:nowrap;width:max-content;animation:scrollx 28s linear infinite;font-family:var(--serif);font-size:22px;color:rgba(255,255,255,.62)} .marquee-track b{color:var(--accent-light);font-weight:600} @keyframes scrollx{to{transform:translateX(-50%)}} /* ubicacion */ .ubi-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:center} .ubi-list{margin-top:28px} .ubi-list li{list-style:none;padding:14px 0;border-bottom:1px solid var(--stone-200);font-size:15px;color:var(--muted);display:flex;gap:12px} .ubi-list li b{color:var(--ink);font-weight:600} .map-frame{border-radius:18px;overflow:hidden;border:1px solid var(--stone-200);box-shadow:0 30px 60px -42px rgba(14,37,29,.4);height:420px} .map-frame iframe{width:100%;height:100%;border:0;filter:grayscale(.2) contrast(1.05)} /* galeria */ .gal{background:var(--stone-100)} .gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px} .gal-grid figure{overflow:hidden;border-radius:12px;position:relative} .gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)} .gal-grid figure:hover img{transform:scale(1.09)} .span2{grid-column:span 2}.row2{grid-row:span 2} /* inversion */ .inv{background:var(--green-900);color:#fff;text-align:center} .inv h2{color:#fff;font-size:clamp(34px,5vw,62px);max-width:900px;margin:0 auto 22px} .inv h2 em{color:var(--accent-light);font-style:italic} .inv p.lead{max-width:600px;margin:0 auto;color:rgba(255,255,255,.74);font-size:17px;line-height:1.65;font-weight:300} .inv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:840px;margin:60px auto 0} .inv-stats .n{font-size:clamp(40px,5.5vw,64px);color:var(--accent);font-weight:500} .inv-stats .t{font-size:14px;color:rgba(255,255,255,.7);margin-top:6px} /* faq */ .faq-list{max-width:820px;margin:0 auto} .faq-item{border-bottom:1px solid var(--stone-200)} .faq-q{width:100%;background:none;border:none;text-align:left;padding:26px 0;font-family:var(--serif);font-size:22px;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px} .faq-q .pm{color:var(--accent);font-size:26px;transition:.3s;flex:none} .faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)} .faq-a p{padding:0 0 26px;color:var(--muted);font-size:15.5px;line-height:1.7;font-weight:300;max-width:680px} .faq-item.open .pm{transform:rotate(45deg)} /* contacto */ .contact{background:var(--green-800);color:#fff} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px} .contact h2{color:#fff;font-size:clamp(32px,4.4vw,52px)} .contact .lead{color:rgba(255,255,255,.74);margin:18px 0 30px;line-height:1.65;font-weight:300} .cinfo{list-style:none;display:flex;flex-direction:column;gap:16px} .cinfo li{display:flex;gap:12px;align-items:center;font-size:15px;color:rgba(255,255,255,.85)} .cinfo .ic{color:var(--accent)} .form{background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:18px;padding:34px} .form label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 7px} .form input,.form textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:13px 15px;color:#fff;font-family:var(--sans);font-size:15px;margin-bottom:18px;transition:.25s} .form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.1)} .form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.4)} .form button{width:100%;justify-content:center} .form .ok{display:none;color:var(--accent-light);font-size:14px;margin-top:14px;text-align:center} /* footer */ footer{background:var(--green-900);color:rgba(255,255,255,.6);padding:60px 0 34px;border-top:1px solid color-mix(in srgb,var(--accent) 20%,transparent)} .foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;align-items:flex-start} .foot-brand{font-family:var(--serif);font-size:28px;color:#fff} .foot-brand b{color:var(--accent)} .foot-links{display:flex;gap:40px;flex-wrap:wrap} .foot-links a{font-size:14px;color:rgba(255,255,255,.6);transition:.25s} .foot-links a:hover{color:var(--accent)} .foot-bottom{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} /* whatsapp float */ .wa{position:fixed;bottom:26px;right:26px;z-index:80;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);transition:.3s;animation:pulse 2.6s infinite} .wa:hover{transform:scale(1.08)} .wa svg{width:30px;height:30px;fill:#fff} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} /* ═══════════════════════════════════════════════════════════ RESPONSIVE — TABLET ≤ 920px ═══════════════════════════════════════════════════════════ */ @media(max-width:920px){ /* nav */ .nav-links{position:fixed;inset:0 0 0 auto;width:78%;max-width:320px;background:var(--green-900);flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);transition:.4s;padding:40px} .nav-links.open{transform:none} .burger{display:flex} /* hero */ .hero-content{padding:0 28px;max-width:100%} /* pilares */ .pillars{grid-template-columns:repeat(2,1fr)} /* metros */ .metros-grid{grid-template-columns:1fr;gap:38px} .compare{margin-top:0} .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px} /* deptos */ .depto-grid{grid-template-columns:repeat(2,1fr)} /* amenidades */ .amen-grid{grid-template-columns:repeat(3,1fr)} .amen .sec-head h2{font-size:clamp(34px,6vw,62px)} /* galería */ .gal-grid{grid-template-columns:repeat(2,1fr)} .span2{grid-column:span 1} /* ubicación */ .ubi-grid{grid-template-columns:1fr;gap:38px} .map-frame{height:320px} /* inversión */ .inv-stats{grid-template-columns:repeat(3,1fr);gap:20px;max-width:100%} /* contacto */ .contact-grid{grid-template-columns:1fr;gap:38px} } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — MOBILE ≤ 760px ═══════════════════════════════════════════════════════════ */ @media(max-width:760px){ /* global */ body{padding-bottom:76px} .wrap{padding:0 20px} section.pad{padding:80px 0} .sec-head{margin-bottom:44px} .sec-head h2{font-size:clamp(28px,7vw,42px)} /* wa flotante → oculto (usa mobile-cta) */ .wa{display:none} /* mobile CTA bar */ .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;gap:10px;padding:12px 16px;background:rgba(14,37,29,.96);backdrop-filter:blur(12px);border-top:1px solid color-mix(in srgb,var(--accent) 25%,transparent)} .mobile-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:40px;font-size:14px;font-weight:600} .mobile-cta .m-agenda{background:var(--accent);color:var(--green-900)} .mobile-cta .m-wa{background:#25D366;color:#fff} /* hero */ .hero-content{text-align:center;padding:0 20px} .hero h1{font-size:clamp(38px,11vw,58px);line-height:1.08} .hero-ctas{flex-direction:column;align-items:stretch;gap:12px} .hero-ctas a,.hero-ctas button{justify-content:center;padding:16px 24px;font-size:15px} .hero-trust{gap:14px;font-size:12.5px} /* hero badge */ .glass-badge{font-size:12px;padding:10px 18px} /* nav — logo más pequeño para que no tape el burger */ nav{padding:14px 0} .brand img{height:34px} /* hero content — más padding para despejar el nav fijo */ .hero-content{padding-top:100px} .hero h1{margin-top:16px} /* metros */ .big-num{font-size:clamp(72px,18vw,120px)} .metros-sub{font-size:16px;max-width:100%} .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;padding-top:34px} .stat{min-height:auto;gap:8px} .stat .n{font-size:clamp(44px,12vw,72px)} /* pilares */ .pillars{grid-template-columns:1fr;gap:0} .pillar{padding:22px 0} /* compare card */ .compare{padding:28px 22px} .compare h4{font-size:10px;margin-bottom:18px} .bar-row .lbl b{font-size:17px} /* deptos */ .depto-grid{grid-template-columns:1fr} .shots-head{margin-top:48px} .shots-title{font-size:clamp(22px,5vw,32px)} /* amenidades */ .amen-grid{grid-template-columns:repeat(2,1fr);gap:12px} .amen-item{padding:22px 14px 18px;min-height:140px;gap:12px} .amen-item p{font-size:13px} .amen .sec-head h2{font-size:clamp(30px,7vw,48px)} /* galería amenidades — 1 columna full-width en móvil */ .ag-wrap{padding:0 14px!important} .ag-grid{grid-template-columns:1fr!important;gap:28px!important} .ag-item{aspect-ratio:4/3!important;border-radius:20px} .ag-block:last-child:nth-child(2n+1){grid-column:auto} .ag-block:last-child:nth-child(3n+1){grid-column:auto} .ag-desc{font-size:15px;padding-right:4px} .ag-item .cap .n{font-size:clamp(22px,6vw,32px)} /* galería fotos */ .gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px} .span2{grid-column:span 1}.row2{grid-row:span 1} /* ubicación */ .map-frame{height:260px} .ubi-list li{font-size:14px;gap:10px;padding:12px 0} /* inversión */ .inv h2{font-size:clamp(28px,7vw,44px)} .inv-stats{grid-template-columns:1fr;gap:28px;max-width:280px} /* footer */ .foot-grid{grid-template-columns:1fr!important;gap:32px!important;text-align:center} .foot-links{justify-content:center!important} .foot-copy{text-align:center!important} .foot-logo{align-items:center} /* lightbox */ .lb-head{padding:16px 18px 10px} .lb-stage{margin:0 14px} .lb-foot{padding:12px 14px 18px} .lb-arrow{width:44px;height:44px} .lb-thumbs button{width:66px;height:46px} /* depto cards */ .depto-card .tag,.depto-card .m2,.depto-card .desc,.depto-card .feat{padding-left:20px;padding-right:20px} .dc-more{margin:18px 20px 0} /* fullbleed */ .fullbleed{min-height:60vh} .fullbleed h2{font-size:clamp(26px,7vw,44px)} } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — SMALL MOBILE ≤ 560px ═══════════════════════════════════════════════════════════ */ @media(max-width:560px){ /* global */ .wrap{padding:0 16px} section.pad{padding:64px 0} /* nav — logo más compacto */ nav{padding:10px 0} .brand img{height:28px;max-width:160px} .hero-content{padding-top:90px} /* hero */ .hero h1{font-size:clamp(34px,10vw,48px)} .scroll-ind{display:none} /* brand */ .brand-name{font-size:17px;letter-spacing:.16em} .brand-sub{font-size:7.5px;letter-spacing:.4em} /* metros */ .stat-row{grid-template-columns:1fr} .stat{min-height:auto;padding:18px 0;border-bottom:1px solid var(--stone-200)} .stat:last-child{border-bottom:none} .big-num{font-size:clamp(64px,18vw,100px)} /* compare card */ .compare{padding:22px 18px} .bar-track{height:13px} /* amenidades */ .amen-grid{grid-template-columns:1fr 1fr;gap:10px} .amen-item{padding:18px 10px;min-height:120px;border-radius:14px} .amen-item .ic{width:48px;height:48px;border-radius:12px} .amen-item .ic svg{width:24px;height:24px} .amen-item p{font-size:12px} /* galería amenidades — 1 col en very small */ .ag-wrap{padding:0 12px!important} .ag-grid{grid-template-columns:1fr!important;gap:24px!important} .ag-item{aspect-ratio:4/3!important;border-radius:18px} .ag-item .cap{left:18px;bottom:18px} .ag-item .cap .n{font-size:clamp(20px,6vw,28px)} .ag-block:last-child:nth-child(3n+1){grid-column:auto} /* carrusel showroom */ .sc-arrow{width:44px;height:44px} .shots-carousel{aspect-ratio:4/3} .sc-caption{font-size:16px;left:18px;bottom:54px} /* ag arrows */ .ag-arrow{width:42px;height:42px} .ag-desc{font-size:14px} /* faq */ .faq-q{font-size:18px;padding:20px 0} /* inversión */ .inv-stats{max-width:100%} .inv-stats .n{font-size:clamp(36px,10vw,52px)} /* galería fotos */ .gal-grid{grid-template-columns:1fr;grid-auto-rows:220px} } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — TINY ≤ 400px ═══════════════════════════════════════════════════════════ */ @media(max-width:400px){ .hero-ctas a,.hero-ctas button{padding:14px 16px;font-size:14px} .amen-grid{grid-template-columns:1fr} .amen-item{min-height:auto;flex-direction:row;text-align:left;padding:16px 14px;gap:14px} .amen-item .ic{flex:none;margin-bottom:0} .amen-item p{font-size:13.5px} .depto-grid{grid-template-columns:1fr} section.pad{padding:52px 0} } /* hero trust cues */ .hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;color:rgba(255,255,255,.82);font-size:13.5px;justify-content:center} .hero-trust span{display:flex;align-items:center;gap:7px} .hero-trust .ck{color:var(--accent-light);font-weight:600} /* focus visible (accesibilidad) */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[role=button]:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px;border-radius:4px} /* reduced motion */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.001s!important} .reveal{opacity:1!important;transform:none!important;filter:none!important} .bw{opacity:1!important;filter:none!important;transform:none!important} .hero-bg{animation:none!important;transform:scale(1.05)!important} } /* ===== refinamiento nivel internacional ===== */ section.pad{padding:140px 0} .sec-head{margin-bottom:68px} .amen-grid{gap:18px} .amen-item{padding:32px 18px} .amen-item .ic{display:flex;justify-content:center;margin-bottom:16px} .amen-item .ic svg{width:30px;height:30px;stroke:var(--accent-light);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round} /* full-bleed inmersivo */ .fullbleed{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center} .fullbleed-bg{position:absolute;inset:0;background-position:center;background-size:cover;transform:scale(1.12);animation:kenburns 28s ease-in-out infinite alternate} .fullbleed-bg{background-image:url('../img/render-terraza.jpg')} .fullbleed::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(6,13,11,.5),rgba(6,13,11,.6))} .fullbleed .fb-inner{position:relative;z-index:3;color:#fff;max-width:780px;padding:0 28px} .fullbleed .eyebrow{color:var(--accent-light)} .fullbleed h2{color:#fff;font-size:clamp(34px,5vw,64px);margin-top:18px;line-height:1.12} .fullbleed h2 em{font-style:italic;color:var(--accent-light)} /* CTA sticky mobile */ .mobile-cta{display:none} @media(max-width:760px){ body{padding-bottom:76px} .wa{display:none} .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;gap:10px;padding:12px 16px;background:rgba(14,37,29,.96);backdrop-filter:blur(12px);border-top:1px solid color-mix(in srgb,var(--accent) 25%,transparent)} .mobile-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:40px;font-size:14px;font-weight:600} .mobile-cta .m-agenda{background:var(--accent);color:var(--green-900)} .mobile-cta .m-wa{background:#25D366;color:#fff} } /* galería de amenidades */ .amen-gallery{background:var(--stone-50);padding:120px 0} .ag-wrap{max-width:1500px;margin:0 auto;padding:0 28px} .amen-gallery{background:var(--stone-50);padding:120px 0;position:relative} .amen-gallery::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.2),transparent 20%,transparent 80%,rgba(14,37,29,0.025));pointer-events:none} .ag-wrap{max-width:1500px;margin:0 auto;padding:0 28px;position:relative;z-index:1} .ag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:54px;position:relative;z-index:1;align-items:start} .ag-block{display:flex;flex-direction:column;gap:14px;grid-column:auto} /* centra el último recuadro solitario en la fila final (10 items en grid de 3 → 3+3+3+1) */ .ag-block:last-child:nth-child(3n+1){grid-column:2} .ag-item{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1.12/1;box-shadow:0 30px 65px -42px rgba(14,37,29,.5);border:1px solid rgba(14,37,29,.08);background:linear-gradient(135deg,#1F4A3B,#0E251D);transition:transform .35s ease,box-shadow .35s ease} .ag-item:hover{transform:translateY(-3px);box-shadow:0 36px 70px -40px rgba(14,37,29,.6)} .ag-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)} .ag-item:hover img{transform:scale(1.05)} .ag-item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,13,11,.82),rgba(6,13,11,.18) 42%,rgba(6,13,11,.08) 100%)} .ag-item .cap{position:absolute;left:28px;bottom:24px;z-index:2} .ag-item .cap .n{font-size:clamp(24px,2vw,40px);color:#fff;line-height:1.02;letter-spacing:-.04em} .ag-item .cap .e{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-light);margin-bottom:8px} /* carrusel showroom / renders */ .shots-carousel{position:relative;margin-top:54px;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:var(--stone-200);box-shadow:0 36px 70px -44px rgba(14,37,29,.45)} .shots-carousel .slide{position:absolute;inset:0;opacity:0;transform:translateX(100%) scale(.96);transition:transform .7s cubic-bezier(.5,0,.2,1),opacity .55s ease;z-index:1} .shots-carousel .slide.active{opacity:1;transform:translateX(0) scale(1);z-index:2} .shots-carousel .slide img{width:100%;height:100%;object-fit:cover} .sc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:54px;height:54px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 10px 30px -8px rgba(0,0,0,.55);transition:.35s} .sc-arrow:hover{background:rgba(255,255,255,.2);border-color:var(--accent-light);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 26px -2px color-mix(in srgb,var(--accent-light) 55%,transparent)} .sc-arrow svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .sc-prev{left:18px}.sc-next{right:18px} .sc-counter{position:absolute;bottom:18px;right:20px;z-index:4;background:rgba(6,13,11,.6);backdrop-filter:blur(6px);color:#fff;font-size:13px;letter-spacing:.05em;padding:6px 14px;border-radius:30px} .sc-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:8px} .sc-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:.3s;border:none;padding:0} .sc-dot.active{background:var(--accent);width:22px;border-radius:6px} .shots-note{font-size:13px;color:var(--muted);text-align:center;margin-top:20px;font-style:italic} .shots-head{max-width:720px;margin:70px auto 0;text-align:center} .shots-head .eyebrow{color:var(--accent)} .shots-title{font-size:clamp(26px,3.4vw,40px);margin:14px 0 10px;color:var(--ink)} .shots-sub{color:var(--muted);font-weight:300;line-height:1.6} .shots-carousel .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,13,11,.55),transparent 42%);pointer-events:none} .sc-caption{position:absolute;left:24px;bottom:22px;z-index:4;color:#fff;font-family:var(--serif);font-size:clamp(18px,2vw,24px);text-shadow:0 2px 14px rgba(0,0,0,.5)} /* wordmark (logo en texto — sustituto fiel; reemplazar con el SVG/PNG real del logo registrado en producción) */ .brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:5px;line-height:1;text-decoration:none} .brand-name{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:.2em;color:#fff;white-space:nowrap} .brand-sub{font-family:var(--sans);font-weight:500;font-size:8.5px;letter-spacing:.46em;color:var(--accent-light);padding-left:3px;white-space:nowrap} .foot-logo{display:inline-flex;flex-direction:column;gap:6px;line-height:1} .foot-logo img{display:block;height:52px;width:auto;max-width:260px} .foot-tagline{margin-top:10px;font-size:14px;max-width:320px;font-weight:300} .foot-logo .brand-name{font-size:24px} .foot-logo .brand-sub{font-size:10px} /* expansión en pantallas grandes / ultrawide (hasta 34") */ @media(min-width:1500px){ .wrap{max-width:1340px} } @media(min-width:1900px){ .wrap{max-width:1560px} .ag-wrap{max-width:1820px} .hero-content{max-width:880px} } @media(min-width:2400px){ .wrap{max-width:1840px} .ag-wrap{max-width:2120px} .hero-content{max-width:1000px} } /* === más animaciones === */ /* la barra de progreso recorre la paleta completa: es el "arcoíris" que hilvana las secciones */ #progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;background:linear-gradient(90deg,#DBC089,#4FBF9B,#E8B45F,#6FB1E0,#E08A63,#B08FE0,#5FC9C9);box-shadow:0 0 12px rgba(255,255,255,.35);transition:width .12s linear} .grad-text{background:linear-gradient(90deg,#DBC089,#4FBF9B,#6FB1E0,#B08FE0,#E08A63,#DBC089);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradflow 8s linear infinite} @keyframes gradflow{to{background-position:200% center}} .depto-card{transition:transform .25s ease,box-shadow .4s,border-color .4s} .wr .wrw{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.5em);transition:opacity .7s ease,filter .7s ease,transform .8s cubic-bezier(.16,1,.3,1)} .wr.in .wrw{opacity:1;filter:blur(0);transform:none} @media(prefers-reduced-motion:reduce){.grad-text{animation:none}.wr .wrw{opacity:1!important;filter:none!important;transform:none!important}#progress{display:none}} /* carrusel modernizado */ .shots-carousel{box-shadow:0 40px 80px -40px rgba(14,37,29,.55)} .shots-carousel::after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none;z-index:3} .shots-carousel .slide.active img{animation:scZoom 8s ease-out forwards} @keyframes scZoom{from{transform:scale(1.07)}to{transform:scale(1)}} .sc-counter{background:rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.2);color:#fff} .sc-dot{background:rgba(255,255,255,.45)} @media(prefers-reduced-motion:reduce){.shots-carousel .slide.active img{animation:none}} /* clic en amenidad -> su foto */ .amen-item{cursor:pointer} .ag-item.flash{animation:agFlash 1.7s ease} @keyframes agFlash{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-light) 0%,transparent)}28%{box-shadow:0 0 0 3px var(--accent-light),0 0 46px -4px color-mix(in srgb,var(--accent-light) 60%,transparent)}} /* mini-carrusel por amenidad (más fotos) */ .ag-item .agslide{position:absolute;inset:0;opacity:0;transform:translateX(100%) scale(.97);transition:transform .6s cubic-bezier(.5,0,.2,1),opacity .5s ease;z-index:1} .ag-item .agslide.active{opacity:1;transform:none;z-index:2} .ag-item .agslide img{width:100%;height:100%;object-fit:cover} .ag-item::after{z-index:3} .ag-item .cap{z-index:4} .ag-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 8px 24px -8px rgba(0,0,0,.5);transition:.3s} .ag-arrow:hover{background:rgba(255,255,255,.2);border-color:var(--accent-light)} .ag-arrow svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .ag-prev{left:18px}.ag-next{right:18px} .ag-count{position:absolute;top:18px;right:18px;z-index:5;background:rgba(6,13,11,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:12px;letter-spacing:.05em;padding:5px 12px;border-radius:30px} .ag-block{display:flex;flex-direction:column;gap:16px} .ag-desc{color:var(--muted);font-size:15px;line-height:1.6;font-weight:300;max-width:780px;padding-left:0;border-left:none;margin-top:2px;padding-right:12px} /* placeholders de marca (visibles cuando una imagen no carga en este preview) */ .hero{background:linear-gradient(160deg,#15382B,#060D0B 62%)} .fullbleed{background:linear-gradient(135deg,#1F4A3B,#0E251D)} .shots-carousel,.shots-carousel .slide,.ag-item,.ag-item .agslide,.gal-grid figure{background:linear-gradient(135deg,#1F4A3B,#0E251D)} .gal-grid figure::after{content:"Loma Cúspide";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--accent-light) 50%,transparent);font-family:var(--serif);font-size:18px;letter-spacing:.1em;z-index:0} .gal-grid figure img{position:relative;z-index:1} /* ===== tipología = botón con galería ===== */ .depto-card{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0 0 26px} .dc-cover{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#1F4A3B,#0E251D);margin-bottom:20px} .dc-cover img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)} .depto-card:hover .dc-cover img{transform:scale(1.06)} .dc-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,13,11,.42),transparent 55%)} .dc-count{position:absolute;right:12px;top:12px;z-index:2;display:flex;align-items:center;gap:6px;background:rgba(6,13,11,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:11.5px;letter-spacing:.06em;padding:5px 11px;border-radius:30px} .dc-count svg{width:13px;height:13px;stroke:var(--accent-light);stroke-width:1.6;fill:none} .depto-card .tag,.depto-card .m2,.depto-card .desc,.depto-card .feat{padding-left:28px;padding-right:28px} .dc-more{display:flex;align-items:center;gap:8px;margin:20px 28px 0;padding-top:16px;border-top:1px solid var(--stone-200);font-size:13px;font-weight:600;color:var(--green-600);letter-spacing:.02em;transition:.3s} .dc-more .ar{transition:transform .3s} .depto-card:hover .dc-more{color:var(--accent)} .depto-card:hover .dc-more .ar{transform:translateX(5px)} /* ===== visor (lightbox) ===== */ .lb{position:fixed;inset:0;z-index:100;display:none;background:rgba(6,13,11,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .lb.open{display:flex;flex-direction:column;animation:lbIn .35s ease} @keyframes lbIn{from{opacity:0}to{opacity:1}} body.lb-lock{overflow:hidden} .lb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 30px 14px;color:#fff;flex:none} .lb-head .e{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)} .lb-head .t{font-family:var(--serif);font-size:clamp(22px,3vw,34px);line-height:1.1;margin-top:6px} .lb-head .s{font-size:13.5px;color:rgba(255,255,255,.6);margin-top:6px;font-weight:300} .lb-close{flex:none;width:46px;height:46px;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:.3s} .lb-close:hover{background:rgba(255,255,255,.2);border-color:var(--accent-light)} .lb-close svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round} .lb-stage{position:relative;flex:1;min-height:0;margin:0 30px;border-radius:14px;overflow:hidden;background:#0A1512} .lb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .4s ease} .lb-stage img.on{opacity:1} .lb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:54px;height:54px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.28);transition:.3s} .lb-arrow:hover{background:rgba(255,255,255,.22);border-color:var(--accent-light)} .lb-arrow svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .lb-prev{left:16px}.lb-next{right:16px} .lb-num{position:absolute;bottom:14px;right:16px;z-index:4;background:rgba(6,13,11,.6);backdrop-filter:blur(8px);color:#fff;font-size:12.5px;padding:5px 13px;border-radius:30px} .lb-foot{flex:none;padding:14px 30px 20px} .lb-thumbs{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin} .lb-thumbs button{flex:none;width:88px;height:60px;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:#0A1512;opacity:.5;transition:.3s} .lb-thumbs button.on{opacity:1;border-color:var(--accent)} .lb-thumbs button:hover{opacity:1} .lb-thumbs img{width:100%;height:100%;object-fit:cover;display:block} .lb-note{color:rgba(255,255,255,.45);font-size:12px;margin-top:12px;font-style:italic;text-align:center} .lb-cta{display:flex;justify-content:center;margin-top:14px} /* ═══════════════════════════════════════════════════════════ GALERÍA AMENIDADES — MÓVIL (OVERRIDE FINAL, POST-GLOBAL) Este bloque va al final del