/* Keyget — capa de movimiento. Todo aquí es progresivo: si el JS no carga o el usuario pide menos animación, el contenido queda visible y estático. Nada depende del movimiento para leerse. */ /* ---------- interruptor general ---------- */ @media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1!important;transform:none!important;animation:none!important} .kenburns{animation:none!important} .marquee__track{animation:none!important} .progressbar{display:none} } /* ---------- barra de progreso de lectura ---------- */ .progressbar{ position:fixed;top:0;left:0;height:2px;width:100%;z-index:90;transform-origin:0 50%; transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-soft)); pointer-events:none; } @supports (animation-timeline:scroll()){ .progressbar{animation:grow linear both;animation-timeline:scroll(root block)} @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}} } /* ---------- header que se contrae ---------- */ .site-head{transition:background .3s ease,box-shadow .3s ease} .site-head[data-stuck]{background:rgba(11,11,12,.97);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(0,0,0,.35)} .site-head[data-stuck] .head-in{min-height:60px} .head-in{transition:min-height .3s ease} .brand img{transition:transform .3s ease} .site-head[data-stuck] .brand img{transform:scale(.88)} /* ---------- hero cinematográfico ---------- */ .hero{isolation:isolate} .hero-media{position:absolute;inset:0;overflow:hidden;z-index:-2} .hero-media img{ width:100%;height:100%;object-fit:cover; filter:saturate(.85) contrast(1.05); } .kenburns{animation:kb 26s ease-in-out infinite alternate;transform-origin:60% 45%} @keyframes kb{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.15) translate3d(-1.5%,-1.2%,0)}} .hero-veil{ position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(100deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.88) 38%,rgba(11,11,12,.45) 68%,rgba(11,11,12,.7) 100%), linear-gradient(to top,var(--ink) 2%,transparent 42%); } .hero-grain{ position:absolute;inset:0;z-index:-1;opacity:.045;pointer-events:none;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- titular por palabras ---------- */ .reveal-words span{ display:inline-block;opacity:0;transform:translate3d(0,.5em,0); animation:word .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--w) * 55ms + 120ms); } @keyframes word{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.reveal-words span{opacity:1;transform:none;animation:none}} /* ---------- revelado al hacer scroll ---------- Estrategia en dos pisos, y el contenido SIEMPRE termina visible: 1) Navegadores con animaciones ligadas al scroll (Chrome/Edge): CSS puro, cero JavaScript. Si el script no carga, el revelado funciona igual. 2) El resto (Safari, Firefox): el JS añade .anim al y usa IntersectionObserver, con temporizador de respaldo. Sin ninguno de los dos, [data-reveal] no tiene estado oculto: se ve y ya. */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ [data-reveal]{ animation:aparecer .01s linear both; animation-timeline:view(); animation-range:entry 0% cover 26%; } [data-reveal="left"]{animation-name:aparecer-izq} [data-reveal="right"]{animation-name:aparecer-der} [data-reveal="zoom"]{animation-name:aparecer-zoom} } } @keyframes aparecer {from{opacity:0;transform:translate3d(0,26px,0)} to{opacity:1;transform:none}} @keyframes aparecer-izq {from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:none}} @keyframes aparecer-der {from{opacity:0;transform:translate3d(26px,0,0)} to{opacity:1;transform:none}} @keyframes aparecer-zoom{from{opacity:0;transform:scale(.965)} to{opacity:1;transform:none}} /* Piso 2: solo si el JS confirmó que hace falta */ .anim [data-reveal]{ opacity:0;transform:translate3d(0,26px,0); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i,0) * 70ms); } .anim [data-reveal="left"]{transform:translate3d(-26px,0,0)} .anim [data-reveal="right"]{transform:translate3d(26px,0,0)} .anim [data-reveal="zoom"]{transform:scale(.965)} .anim [data-reveal].is-in{opacity:1;transform:none} /* ---------- cifras que suben ---------- */ .trust b{font-variant-numeric:tabular-nums} /* ---------- marquesina de comunas ---------- */ .marquee{ overflow:hidden;border-block:1px solid var(--line-soft);background:var(--surface); padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee__track{display:flex;width:max-content;animation:slide 38s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee span{ padding:0 26px;font-family:var(--serif);font-size:19px;color:var(--ink-2,#8F8B83);white-space:nowrap; display:flex;align-items:center;gap:26px; } .marquee span::after{content:"◆";font-size:8px;color:var(--gold);font-family:var(--sans)} @keyframes slide{to{transform:translate3d(-50%,0,0)}} /* ---------- tarjetas con reflejo dorado ---------- */ .pcard,.vcard{position:relative;overflow:hidden} .pcard::after,.vcard::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; transition:opacity .4s ease; background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(201,162,77,.13),transparent 62%); } .pcard:hover::after,.vcard:hover::after{opacity:1} .pcard,.vcard{transition:border-color .25s ease,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease} .pcard:hover,.vcard:hover{box-shadow:0 18px 40px -22px rgba(0,0,0,.9)} /* ---------- pasos con línea que se llena ---------- */ .steps{position:relative} .steps::before{ content:"";position:absolute;left:23px;top:8px;bottom:8px;width:1px;background:var(--line); } .steps::after{ content:"";position:absolute;left:23px;top:8px;width:1px;background:var(--gold); height:var(--fill,0%);transition:height .25s linear; } .step::before{background:var(--ink);position:relative;z-index:1} @media (max-width:520px){.steps::before,.steps::after{display:none}} /* ---------- botones con barrido ---------- */ .btn-gold{position:relative;overflow:hidden} .btn-gold::before{ content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent); transition:left .6s ease; } .btn-gold:hover::before{left:130%} /* ---------- galería ---------- */ .gallery a{transition:border-color .25s ease,transform .35s cubic-bezier(.22,1,.36,1)} .gallery a:hover{transform:translateY(-3px)} .gallery a img{transition:transform .6s cubic-bezier(.22,1,.36,1)} .gallery a:hover img{transform:scale(1.05)} /* ---------- lightbox con navegación ---------- */ dialog.lightbox .lb-stage{position:relative;display:grid;place-items:center;width:100%;height:100%} dialog.lightbox img{transition:opacity .25s ease} dialog.lightbox img[data-loading]{opacity:.25} .lb-nav{ position:fixed;top:50%;transform:translateY(-50%);z-index:3; width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:rgba(11,11,12,.72);color:var(--text);border:1px solid var(--line-strong); font-size:24px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s,transform .2s; backdrop-filter:blur(6px); } .lb-nav:hover{background:var(--gold);color:#14110A;border-color:var(--gold);transform:translateY(-50%) scale(1.06)} .lb-prev{left:max(14px,3vw)} .lb-next{right:max(14px,3vw)} .lb-count{ position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:3; font-family:var(--sans);font-size:13px;letter-spacing:.12em;color:var(--text); background:rgba(11,11,12,.72);border:1px solid var(--line-strong);border-radius:100px; padding:8px 18px;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px); } .lb-caption{ position:fixed;bottom:64px;left:50%;transform:translateX(-50%);z-index:3;max-width:min(92vw,640px); text-align:center;font-size:14.5px;color:#D8D4CC;text-shadow:0 1px 8px rgba(0,0,0,.9); } @media (max-width:620px){ .lb-nav{width:46px;height:46px;font-size:20px} .lb-caption{display:none} } /* ---------- transición entre páginas ---------- */ @view-transition{navigation:auto} @media (prefers-reduced-motion:no-preference){ ::view-transition-old(root){animation:vt-out .28s ease both} ::view-transition-new(root){animation:vt-in .38s cubic-bezier(.22,1,.36,1) both} @keyframes vt-out{to{opacity:0;transform:translateY(-8px)}} @keyframes vt-in{from{opacity:0;transform:translateY(14px)}} }