/* ========================================================================== VIGONTE — Luxury Consulting Inmobiliario Sistema de diseño · "El plano y el metro cuadrado" Concepto: retícula de arquitecto (líneas finas, cotas, numeración) + tipografía editorial + mucho aire + movimiento lento. Autor: Tu Idea Digital ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ /* Color corporativo extraído del manual de marca (PDF): rgb(33,41,51) */ --graphite: #212933; --graphite-deep: #171D25; --graphite-soft: #2C3644; --cream: #F7F4EE; /* blanco roto */ --cream-2: #EFEAE1; --cream-3: #E5DED2; --warm-grey: #8A8880; /* gris cálido */ --warm-grey-2:#6B6A65; --sand: #C2A87C; /* detalle arena */ --sand-deep: #A98C5D; --sand-soft: #E6D8BE; --ink: var(--graphite); --ink-soft: #5A6270; --line: rgba(33,41,51,.14); --line-strong: rgba(33,41,51,.28); --line-light: rgba(247,244,238,.18); /* Tipografía */ --font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif; --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif; /* Escala fluida */ --step--2: clamp(.69rem, .67rem + .1vw, .75rem); --step--1: clamp(.8rem, .77rem + .14vw, .875rem); --step-0: clamp(.95rem, .92rem + .16vw, 1.0625rem); --step-1: clamp(1.15rem, 1.08rem + .34vw, 1.4rem); --step-2: clamp(1.45rem, 1.3rem + .74vw, 2rem); --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem); --step-4: clamp(2.1rem, 1.7rem + 1.9vw, 3.4rem); --step-5: clamp(2.6rem, 1.9rem + 3.1vw, 4.9rem); /* Ritmo */ --gutter: clamp(1.25rem, 4vw, 4rem); --wrap: 1440px; --wrap-narrow: 980px; --section-y: clamp(4.5rem, 9vw, 10rem); --radius: 2px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out-expo: cubic-bezier(.16,1,.3,1); --dur: .7s; --header-h: 84px; } /* ---------- 2. Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-sans); font-size:var(--step-0); font-weight:300; line-height:1.65; letter-spacing:.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,video{ display:block; max-width:100%; } img{ height:auto; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } h1,h2,h3,h4,h5{ margin:0; font-weight:400; line-height:1.08; letter-spacing:-.015em; } p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; } ul{ margin:0; padding:0; list-style:none; } :focus-visible{ outline:2px solid var(--sand-deep); outline-offset:3px; } ::selection{ background:var(--graphite); color:var(--cream); } /* ---------- 3. Utilidades tipográficas ---------- */ .display{ font-family:var(--font-display); font-weight:300; } .h-xl{ font-family:var(--font-display); font-weight:300; font-size:var(--step-5); line-height:.95; letter-spacing:-.025em; } .h-lg{ font-family:var(--font-display); font-weight:300; font-size:var(--step-4); line-height:1; letter-spacing:-.02em; } .h-md{ font-family:var(--font-display); font-weight:300; font-size:var(--step-3); line-height:1.06; } .h-sm{ font-family:var(--font-display); font-weight:400; font-size:var(--step-2); line-height:1.15; } .italic{ font-style:italic; } .lead{ font-size:var(--step-1); font-weight:300; line-height:1.55; color:var(--ink-soft); } /* etiqueta tipo "cota de plano" */ .eyebrow{ display:inline-flex; align-items:center; gap:.7em; font-size:var(--step--2); font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:var(--sand-deep); font-variant-numeric:tabular-nums; } .eyebrow::before{ content:""; width:clamp(24px,4vw,56px); height:1px; background:currentColor; opacity:.6; } .eyebrow--plain::before{ display:none; } /* --- superficies oscuras: un único lugar donde ajustar el contraste --- .section--dark · .section--deep · .phero · .cta-band · .menu · .footer · .hero --- */ .on-dark .eyebrow, .section--dark .eyebrow, .section--deep .eyebrow, .phero .eyebrow, .cta-band .eyebrow, .hero .eyebrow, .menu .eyebrow{ color:var(--sand); } .hero__inner .eyebrow{ color:var(--sand-soft); } .phero .tag, .cta-band .tag, .hero .tag{ border-color:var(--line-light); color:rgba(247,244,238,.82); } .phero .rule,.cta-band .rule{ background:var(--line-light); } .phero .link-u,.cta-band .link-u{ color:var(--cream); } .num{ font-variant-numeric:tabular-nums; letter-spacing:.06em; } .muted{ color:var(--warm-grey-2); } /* sobre fondo grafito el gris cálido no tiene contraste suficiente (WCAG) */ .on-dark .muted, .section--dark .muted, .section--deep .muted, .cta-band .muted, .phero .muted, .menu .muted, .footer .muted{ color:rgba(247,244,238,.74); } /* ---------- 4. Layout ---------- */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); } .wrap-narrow{ width:100%; max-width:var(--wrap-narrow); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:var(--section-y); position:relative; } .section--tight{ padding-block:clamp(3rem,6vw,6rem); } .section--dark{ background:var(--graphite); color:var(--cream); } .section--deep{ background:var(--graphite-deep); color:var(--cream); } .section--tone{ background:var(--cream-2); } .grid{ display:grid; gap:clamp(1.5rem,3vw,3rem); } .g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); } .split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,6rem); align-items:center; } .split--rev > *:first-child{ order:2; } @media (max-width:900px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } .split{ grid-template-columns:1fr; } .split--rev > *:first-child{ order:0; } } @media (max-width:600px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } } /* cabecera de sección con numeración de plano */ .sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,5rem); } .sec-head__aside{ padding-bottom:.4rem; } @media (max-width:820px){ .sec-head{ grid-template-columns:1fr; } } .rule{ height:1px; background:var(--line); border:0; margin:0; } .on-dark .rule,.section--dark .rule,.section--deep .rule{ background:var(--line-light); } /* ---------- 5. Retícula de arquitecto (fondo) ---------- */ .blueprint{ position:relative; overflow:hidden; } /* recorta la marca de agua en el borde de sección */ .blueprint::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 78%); mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 78%); opacity:.9; } .blueprint > *{ position:relative; z-index:1; } .section--dark.blueprint::before,.section--deep.blueprint::before{ background-image: linear-gradient(to right, var(--line-light) 1px, transparent 1px), linear-gradient(to bottom, var(--line-light) 1px, transparent 1px); } /* marca de agua "V" */ .watermark{ position:absolute; pointer-events:none; user-select:none; z-index:0; width:min(52vw,620px); opacity:.045; right:-6%; top:8%; will-change:transform; } .section--dark .watermark,.section--deep .watermark{ opacity:.06; } /* ---------- 6. Botones ---------- */ .btn{ --btn-bg:var(--graphite); --btn-fg:var(--cream); --btn-bd:var(--graphite); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.85em; padding:1.05em 2.1em; min-height:52px; font-size:var(--step--1); font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--btn-fg); background:var(--btn-bg); border:1px solid var(--btn-bd); border-radius:var(--radius); cursor:pointer; overflow:hidden; isolation:isolate; transition:color .5s var(--ease), border-color .5s var(--ease); } .btn::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--sand); transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease-out-expo); } .btn:hover::after,.btn:focus-visible::after{ transform:scaleY(1); transform-origin:top; } .btn:hover,.btn:focus-visible{ color:var(--graphite); border-color:var(--sand); } .btn__arrow{ transition:transform .5s var(--ease); } .btn:hover .btn__arrow{ transform:translateX(4px); } .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--graphite); --btn-bd:var(--line-strong); } .btn--light{ --btn-bg:var(--cream); --btn-fg:var(--graphite); --btn-bd:var(--cream); } .btn--outline-light{ --btn-bg:transparent; --btn-fg:var(--cream); --btn-bd:rgba(247,244,238,.4); } .btn--sand{ --btn-bg:var(--sand); --btn-fg:var(--graphite); --btn-bd:var(--sand); } .btn--sand::after{ background:var(--graphite); } .btn--sand:hover,.btn--sand:focus-visible{ color:var(--cream); border-color:var(--graphite); } .btn--sm{ padding:.8em 1.5em; min-height:44px; font-size:var(--step--2); } /* enlace con subrayado animado */ .link-u{ display:inline-flex; align-items:center; gap:.6em; position:relative; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; padding-bottom:.35em; } .link-u::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform-origin:right; transform:scaleX(1); transition:transform .5s var(--ease-out-expo); } .link-u:hover::after{ transform:scaleX(0); transform-origin:left; } .link-u svg{ transition:transform .5s var(--ease); } .link-u:hover svg{ transform:translateX(5px); } /* ---------- 7. Preloader ---------- */ .preloader{ position:fixed; inset:0; z-index:9999; background:var(--graphite-deep); display:grid; place-items:center; color:var(--cream); transition:opacity .5s ease; } .preloader__inner{ display:grid; place-items:center; gap:1.6rem; } .preloader__mark{ width:clamp(74px,11vw,120px); opacity:0; animation:markIn 1.1s var(--ease-out-expo) forwards; } @keyframes markIn{ from{ opacity:0; transform:translateY(14px) scale(.94); } to{ opacity:1; transform:none; } } .preloader__bar{ width:min(46vw,260px); height:1px; background:rgba(247,244,238,.2); position:relative; overflow:hidden; } .preloader__bar i{ position:absolute; inset:0; background:var(--sand); transform:scaleX(0); transform-origin:left; } .preloader__pct{ font-size:var(--step--2); letter-spacing:.3em; color:rgba(247,244,238,.6); font-variant-numeric:tabular-nums; } body.is-loading{ overflow:hidden; } .preloader.is-done{ opacity:0; pointer-events:none; } /* ---------- 8. Cursor personalizado ---------- */ .cursor{ position:fixed; top:0; left:0; z-index:9000; pointer-events:none; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:1px solid var(--graphite); mix-blend-mode:difference; display:grid; place-items:center; transition:width .4s var(--ease-out-expo), height .4s var(--ease-out-expo), margin .4s var(--ease-out-expo), background-color .4s var(--ease), opacity .3s ease; opacity:0; } .cursor.is-active{ opacity:1; } .cursor__label{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); opacity:0; transform:scale(.6); transition:opacity .3s ease, transform .4s var(--ease-out-expo); white-space:nowrap; } .cursor.is-hover{ width:78px; height:78px; margin:-39px 0 0 -39px; background:var(--cream); border-color:transparent; } .cursor.is-hover .cursor__label{ opacity:1; transform:none; } @media (hover:none),(pointer:coarse){ .cursor{ display:none !important; } } /* ---------- 9. Header ---------- */ .header{ position:fixed; top:0; left:0; right:0; z-index:800; height:var(--header-h); display:flex; align-items:center; transition:background-color .5s var(--ease), height .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease); } .header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line-light); opacity:0; transition:opacity .4s ease; } .header--over{ color:var(--cream); } .header.is-stuck{ height:70px; background:rgba(247,244,238,.86); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); color:var(--graphite); box-shadow:0 1px 0 var(--line); } /* se retira al bajar y vuelve al subir */ .header{ transform:translateY(0); will-change:transform; } .header.is-gone{ transform:translateY(-105%); } .header.is-gone,.header{ transition:background-color .5s var(--ease), height .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease), transform .6s var(--ease-out-expo); } .menu.is-open ~ .header,.header:has(.burger[aria-expanded="true"]){ transform:none !important; } .header__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:2rem; } .brand{ display:inline-flex; align-items:center; gap:.85rem; flex-shrink:0; } .brand__mark{ width:38px; height:38px; transition:opacity .4s ease; } .brand__mark--dark{ position:absolute; opacity:0; } .brand__logo{ position:relative; width:38px; height:38px; display:block; } .brand__logo img{ position:absolute; inset:0; width:100%; height:100%; transition:opacity .45s var(--ease); } .brand__logo .is-light{ opacity:1; } .brand__logo .is-dark{ opacity:0; } .header.is-stuck .brand__logo .is-light, .header:not(.header--over) .brand__logo .is-light{ opacity:0; } .header.is-stuck .brand__logo .is-dark, .header:not(.header--over) .brand__logo .is-dark{ opacity:1; } .brand__text{ display:flex; flex-direction:column; line-height:1; } .brand__name{ font-family:var(--font-display); font-size:1.42rem; letter-spacing:.22em; font-weight:400; } .brand__tag{ font-size:.53rem; letter-spacing:.34em; text-transform:uppercase; color:var(--sand-deep); margin-top:.42em; } .header--over:not(.is-stuck) .brand__tag{ color:var(--sand); } @media (max-width:420px){ .brand__tag{ display:none; } } .nav{ display:flex; align-items:center; gap:clamp(.9rem,1.9vw,2rem); } .nav__link{ position:relative; font-size:var(--step--1); letter-spacing:.1em; padding:.5em 0; white-space:nowrap; transition:opacity .3s ease; } .nav__link::after{ content:""; position:absolute; left:0; right:0; bottom:.1em; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out-expo); } .nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; } .nav__link[aria-current="page"]{ color:var(--sand-deep); } .header--over:not(.is-stuck) .nav__link[aria-current="page"]{ color:var(--sand); } .header__actions{ display:flex; align-items:center; gap:1rem; } @media (max-width:1120px){ .nav--desktop{ display:none; } .header__cta{ display:none; } } /* botón menú */ .burger{ display:none; width:46px; height:46px; align-items:center; justify-content:center; background:none; border:1px solid currentColor; border-radius:50%; cursor:pointer; opacity:.85; transition:opacity .3s ease, transform .4s var(--ease); } .burger:hover{ opacity:1; transform:scale(1.05); } .burger span{ display:block; width:16px; height:1px; background:currentColor; position:relative; } .burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:16px; height:1px; background:currentColor; transition:transform .45s var(--ease-out-expo); } .burger span::before{ top:-5px; } .burger span::after{ top:5px; } .burger[aria-expanded="true"] span{ background:transparent; } .burger[aria-expanded="true"] span::before{ transform:translateY(5px) rotate(45deg); } .burger[aria-expanded="true"] span::after{ transform:translateY(-5px) rotate(-45deg); } @media (max-width:1120px){ .burger{ display:inline-flex; } } /* menú overlay */ .menu{ position:fixed; inset:0; z-index:790; background:var(--graphite-deep); color:var(--cream); clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease-out-expo), visibility 0s linear .8s; display:flex; flex-direction:column; padding-top:var(--header-h); overflow-y:auto; visibility:hidden; } .menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .8s var(--ease-out-expo), visibility 0s; } .menu__inner{ flex:1; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-content:center; width:100%; max-width:var(--wrap); margin-inline:auto; padding:clamp(2rem,5vw,4rem) var(--gutter); } @media (max-width:820px){ .menu__inner{ grid-template-columns:1fr; align-content:start; } } .menu__list li{ overflow:hidden; } .menu__list a{ display:flex; align-items:baseline; gap:1.1rem; font-family:var(--font-display); font-size:clamp(1.9rem,6vw,3.6rem); font-weight:300; line-height:1.28; transform:translateY(105%); transition:transform .8s var(--ease-out-expo), color .4s ease; } .menu.is-open .menu__list a{ transform:none; } .menu__list a:hover{ color:var(--sand); } .menu__list i{ font-style:normal; font-size:.7rem; letter-spacing:.2em; color:var(--sand); opacity:.8; } .menu__aside{ align-self:center; display:grid; gap:1.6rem; font-size:var(--step--1); } .menu__aside a:hover{ color:var(--sand); } /* ---------- 10. Hero ---------- */ .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--graphite-deep); color:var(--cream); overflow:hidden; padding-block:calc(var(--header-h) + 2rem) clamp(2.5rem,6vw,5rem); } .hero__media{ position:absolute; inset:0; z-index:0; } .hero__media img,.hero__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.8s var(--ease); animation:kenburns 18s ease-in-out infinite alternate; } .hero__media img.is-active{ opacity:1; } @keyframes kenburns{ from{ transform:scale(1.04) translate3d(0,0,0);} to{ transform:scale(1.16) translate3d(-1.5%,-1.5%,0);} } .hero__scrim{ position:absolute; inset:0; z-index:1; background: /* refuerzo local bajo el bloque de texto, sea cual sea la foto de fondo */ radial-gradient(115% 78% at 0% 100%, rgba(23,29,37,.8) 0%, rgba(23,29,37,0) 62%), linear-gradient(to top, rgba(23,29,37,.9) 0%, rgba(23,29,37,.68) 26%, rgba(23,29,37,.4) 52%, rgba(23,29,37,.24) 74%, rgba(23,29,37,.55) 100%); } .hero__inner .eyebrow,.hero__title,.hero__inner .lead,.hero__fact b,.hero__fact span,.hero__scroll{ text-shadow:0 1px 20px rgba(23,29,37,.45); } .hero__grid{ position:absolute; inset:0; z-index:2; pointer-events:none; background-image: linear-gradient(to right, rgba(247,244,238,.09) 1px, transparent 1px), linear-gradient(to bottom, rgba(247,244,238,.09) 1px, transparent 1px); background-size:clamp(70px,9vw,150px) clamp(70px,9vw,150px); -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 65%); mask-image:linear-gradient(to bottom, #000 0%, transparent 65%); } .hero__inner{ position:relative; z-index:3; width:100%; } .hero__title{ max-width:16ch; margin-bottom:clamp(1.2rem,2.5vw,2rem); } .hero__meta{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem,4vw,3.5rem); align-items:flex-end; justify-content:space-between; border-top:1px solid var(--line-light); padding-top:1.6rem; margin-top:clamp(2rem,5vw,3.5rem); } .hero__facts{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem); } .hero__fact b{ display:block; font-family:var(--font-display); font-size:var(--step-2); font-weight:400; line-height:1; } .hero__fact span{ font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase; color:rgba(247,244,238,.6); } .hero__scroll{ display:inline-flex; align-items:center; gap:.8rem; font-size:var(--step--2); letter-spacing:.24em; text-transform:uppercase; color:rgba(247,244,238,.7); } .hero__scroll i{ display:block; width:1px; height:34px; background:currentColor; position:relative; overflow:hidden; } .hero__scroll i::after{ content:""; position:absolute; inset:0; background:var(--sand); animation:scrollLine 2.2s var(--ease) infinite; } @keyframes scrollLine{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} } /* hero interior (páginas secundarias) */ .phero{ position:relative; background:var(--graphite); color:var(--cream); overflow:hidden; padding-block:calc(var(--header-h) + clamp(4rem,9vw,8rem)) clamp(3.5rem,7vw,6.5rem); } .phero__bg{ position:absolute; inset:0; z-index:0; opacity:.32; } .phero__bg img{ width:100%; height:100%; object-fit:cover; animation:kenburns 24s ease-in-out infinite alternate; } .phero::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(23,29,37,.96) 0%, rgba(23,29,37,.7) 55%, rgba(23,29,37,.4) 100%); } .phero__inner{ position:relative; z-index:2; } .phero__title{ max-width:18ch; margin-block:1.1rem .9rem; } .phero__intro{ max-width:56ch; color:rgba(247,244,238,.76); } /* migas */ .crumbs{ font-size:var(--step--2); letter-spacing:.18em; text-transform:uppercase; color:rgba(247,244,238,.55); } .crumbs ol{ display:flex; flex-wrap:wrap; gap:.55em; list-style:none; margin:0; padding:0; } .crumbs li+li::before{ content:"/"; margin-right:.55em; opacity:.5; } .crumbs a:hover{ color:var(--sand); } /* ---------- 11. Marquee ---------- */ .marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:clamp(1rem,2vw,1.6rem); background:var(--cream); } .section--dark .marquee,.marquee--dark{ background:var(--graphite); border-color:var(--line-light); color:var(--cream); } .marquee__track{ display:flex; width:max-content; animation:marquee 46s linear infinite; } .marquee:hover .marquee__track{ animation-play-state:paused; } .marquee__item{ display:inline-flex; align-items:center; gap:clamp(1.5rem,3vw,3rem); padding-inline:clamp(.9rem,2vw,1.8rem); font-family:var(--font-display); font-size:clamp(1.35rem,3.4vw,2.6rem); font-weight:300; white-space:nowrap; } .marquee__item em{ font-style:italic; color:var(--sand-deep); } .marquee--dark .marquee__item em{ color:var(--sand); } .marquee__dot{ width:6px; height:6px; border-radius:50%; background:var(--sand); flex:none; } @keyframes marquee{ to{ transform:translateX(-50%); } } /* ---------- 12. Movimiento (GSAP) ---------- .motion la añade un script inline del y la retira motion.js en cuanto GSAP ha fijado los estados iniciales en línea. Si GSAP no llega a cargar, un temporizador de seguridad la quita igualmente: el contenido nunca se pierde. */ .motion [data-reveal], .motion [data-reveal-stagger] > *, .motion .reveal-lines, .motion .hero__meta{ opacity:0; } .motion .curtain img{ clip-path:inset(0% 0% 100% 0%); } /* líneas de SplitText (mask:"lines" envuelve cada una en un contenedor recortado) */ .reveal-lines .line{ display:block; } /* cortina sobre imagen: ahora la conduce GSAP con clip-path */ .curtain{ position:relative; overflow:hidden; } .curtain img{ will-change:clip-path, transform; } /* transición entre páginas */ .page-fade{ position:fixed; inset:0; z-index:9600; pointer-events:none; background:var(--graphite-deep); transform:translateY(100%); will-change:transform; } .page-fade::after{ content:""; position:absolute; inset:0; background-image: linear-gradient(to right, var(--line-light) 1px, transparent 1px), linear-gradient(to bottom, var(--line-light) 1px, transparent 1px); background-size:110px 110px; opacity:.55; } /* Lenis (scroll suave) */ html.lenis,html.lenis body{ height:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; } .lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; } .lenis.lenis-stopped{ overflow:hidden; } /* carrusel horizontal fijado — solo escritorio; debajo vuelve a la retícula */ @media (min-width:1025px){ .hscroll{ overflow:hidden; } .hscroll .props{ display:flex; width:max-content; will-change:transform; } .hscroll .props > .prop{ width:clamp(320px,25vw,410px); flex:none; } } /* ---------- 13. Figuras ---------- */ .fig{ position:relative; } .fig img{ width:100%; height:100%; object-fit:cover; } .fig--tall{ aspect-ratio:3/4; } .fig--sq{ aspect-ratio:1/1; } .fig--wide{ aspect-ratio:16/10; } .fig--pano{ aspect-ratio:21/9; } .fig__cap{ margin-top:.9rem; font-size:var(--step--2); letter-spacing:.16em; text-transform:uppercase; color:var(--warm-grey-2); } .fig__tick{ position:absolute; width:14px; height:14px; border:1px solid var(--sand); opacity:.9; } .fig__tick--tl{ top:-7px; left:-7px; border-right:0; border-bottom:0; } .fig__tick--br{ right:-7px; bottom:-7px; border-left:0; border-top:0; } /* placeholder para material pendiente del cliente */ .ph{ position:relative; display:grid; place-items:center; text-align:center; gap:.6rem; background: repeating-linear-gradient(45deg, rgba(33,41,51,.045) 0 10px, transparent 10px 20px), var(--cream-2); border:1px dashed var(--line-strong); color:var(--warm-grey-2); font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase; padding:2rem; } .section--dark .ph,.section--deep .ph{ background:repeating-linear-gradient(45deg, rgba(247,244,238,.05) 0 10px, transparent 10px 20px), rgba(247,244,238,.03); border-color:var(--line-light); color:rgba(247,244,238,.55); } /* ---------- 14. Tarjetas de propiedad ---------- */ .props{ display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:clamp(1.6rem,3vw,2.8rem); } .prop{ position:relative; display:flex; flex-direction:column; background:transparent; } .prop[hidden]{ display:none; } /* [hidden] debe ganar al display:flex del filtrado */ .prop__media{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--cream-2); } .prop__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out-expo), filter .8s var(--ease); } .prop:hover .prop__media img{ transform:scale(1.06); } .prop__badge{ position:absolute; top:1rem; left:1rem; z-index:2; background:rgba(23,29,37,.82); color:var(--cream); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase; padding:.5em 1em; } .prop__badge--sand{ background:var(--sand); color:var(--graphite); } .prop__body{ padding-top:1.25rem; display:flex; flex-direction:column; gap:.55rem; flex:1; } .prop__zone{ font-size:var(--step--2); letter-spacing:.22em; text-transform:uppercase; color:var(--sand-deep); } .prop__name{ font-family:var(--font-display); font-size:var(--step-2); font-weight:400; line-height:1.12; } .prop__price{ font-family:var(--font-display); font-size:var(--step-1); font-variant-numeric:tabular-nums; } .prop__specs{ display:flex; flex-wrap:wrap; gap:1.1rem; margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); font-size:var(--step--2); letter-spacing:.1em; color:var(--warm-grey-2); } .prop__specs li{ display:inline-flex; align-items:center; gap:.45em; } .prop a.prop__link::after{ content:""; position:absolute; inset:0; z-index:3; } .prop__link{ position:static; } /* ---------- 15. Filtros / buscador ---------- */ .filters{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); padding:clamp(1.2rem,2.5vw,1.9rem); background:var(--cream-2); border:1px solid var(--line); align-items:end; } .field{ display:grid; gap:.45rem; } .field label{ font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase; color:var(--warm-grey-2); } .field input,.field select,.field textarea{ width:100%; padding:.85em 1em; background:var(--cream); color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--radius); font-size:var(--step--1); font-weight:300; transition:border-color .3s ease, background-color .3s ease; } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--sand-deep); outline:none; background:#fff; } .field textarea{ resize:vertical; min-height:130px; } .field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23212933' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1em center; padding-right:2.6em; } .field--error input,.field--error select,.field--error textarea{ border-color:#B3453B; } .field__err{ font-size:var(--step--2); color:#B3453B; display:none; } .field--error .field__err{ display:block; } .results-count{ font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--warm-grey-2); } .chips{ display:flex; flex-wrap:wrap; gap:.6rem; } .chip{ padding:.55em 1.15em; border:1px solid var(--line-strong); background:transparent; font-size:var(--step--2); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .chip:hover{ border-color:var(--graphite); } .chip[aria-pressed="true"]{ background:var(--graphite); color:var(--cream); border-color:var(--graphite); } .empty-state{ padding:clamp(3rem,7vw,6rem) 0; text-align:center; color:var(--warm-grey-2); } /* ---------- 16. Servicios / listas numeradas ---------- */ .svc{ position:relative; padding:clamp(1.6rem,3vw,2.4rem) 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr); gap:clamp(1rem,3vw,3rem); align-items:start; } .section--dark .svc,.section--deep .svc{ border-color:var(--line-light); } .svc:last-child{ border-bottom:1px solid var(--line); } .section--dark .svc:last-child,.section--deep .svc:last-child{ border-color:var(--line-light); } .svc__n{ font-size:var(--step--2); letter-spacing:.2em; color:var(--sand-deep); padding-top:.55em; font-variant-numeric:tabular-nums; } .section--dark .svc__n,.section--deep .svc__n{ color:var(--sand); } .svc__t{ font-family:var(--font-display); font-size:var(--step-2); font-weight:400; line-height:1.14; } .svc__d{ color:var(--ink-soft); } .section--dark .svc__d,.section--deep .svc__d{ color:rgba(247,244,238,.72); } @media (max-width:820px){ .svc{ grid-template-columns:auto minmax(0,1fr); } .svc__d{ grid-column:2; } } /* tarjeta genérica */ .card{ padding:clamp(1.6rem,3vw,2.4rem); border:1px solid var(--line); background:var(--cream); display:flex; flex-direction:column; gap:.9rem; height:100%; transition:border-color .5s var(--ease), transform .6s var(--ease-out-expo), box-shadow .6s var(--ease); } .card:hover{ border-color:var(--sand-deep); transform:translateY(-4px); box-shadow:0 18px 50px -30px rgba(33,41,51,.5); } .section--dark .card,.section--deep .card{ background:rgba(247,244,238,.035); border-color:var(--line-light); } .card__n{ font-size:var(--step--2); letter-spacing:.24em; color:var(--sand-deep); } .section--dark .card__n,.section--deep .card__n{ color:var(--sand); } .card__t{ font-family:var(--font-display); font-size:var(--step-1); font-weight:400; line-height:1.2; } .card__d{ color:var(--ink-soft); font-size:var(--step--1); } .section--dark .card__d,.section--deep .card__d{ color:rgba(247,244,238,.7); } /* pasos del proceso */ .steps{ counter-reset:step; display:grid; gap:clamp(1.5rem,3vw,2.4rem); } .step{ position:relative; padding-left:clamp(3.2rem,6vw,5rem); } .step::before{ counter-increment:step; content:"0" counter(step); position:absolute; left:0; top:.1em; font-family:var(--font-display); font-size:var(--step-2); color:var(--sand-deep); font-variant-numeric:tabular-nums; } .step::after{ content:""; position:absolute; left:clamp(1.5rem,2.6vw,2.2rem); top:3em; bottom:-1.4rem; width:1px; background:var(--line); } .step:last-child::after{ display:none; } .section--dark .step::before,.section--deep .step::before{ color:var(--sand); } .section--dark .step::after,.section--deep .step::after{ background:var(--line-light); } /* contadores */ .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(1.5rem,3vw,3rem); } .stat b{ display:block; font-family:var(--font-display); font-size:var(--step-4); font-weight:300; line-height:1; font-variant-numeric:tabular-nums; } .stat span{ display:block; margin-top:.6rem; font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase; color:var(--warm-grey-2); } .section--dark .stat span,.section--deep .stat span{ color:rgba(247,244,238,.6); } /* acordeón FAQ */ .acc{ border-top:1px solid var(--line); } .acc__item{ border-bottom:1px solid var(--line); } .acc__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:clamp(1.1rem,2.4vw,1.7rem) 0; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-display); font-size:var(--step-1); font-weight:400; line-height:1.25; } .acc__btn i{ flex:none; width:16px; height:16px; position:relative; } .acc__btn i::before,.acc__btn i::after{ content:""; position:absolute; background:var(--sand-deep); transition:transform .45s var(--ease-out-expo); } .acc__btn i::before{ left:0; right:0; top:7.5px; height:1px; } .acc__btn i::after{ top:0; bottom:0; left:7.5px; width:1px; } .acc__btn[aria-expanded="true"] i::after{ transform:scaleY(0); } .acc__panel{ overflow:hidden; height:0; transition:height .55s var(--ease-out-expo); } .acc__panel > div{ padding-bottom:clamp(1.1rem,2.4vw,1.7rem); max-width:70ch; color:var(--ink-soft); } /* testimonios */ .quote{ font-family:var(--font-display); font-size:var(--step-3); font-weight:300; line-height:1.25; letter-spacing:-.01em; } .quote--sm{ font-size:var(--step-2); } .quote__by{ margin-top:1.6rem; font-family:var(--font-sans); font-size:var(--step--2); letter-spacing:.22em; text-transform:uppercase; color:var(--sand-deep); } .section--dark .quote__by,.section--deep .quote__by{ color:var(--sand); } /* blog */ .posts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(1.8rem,3.4vw,3rem); } .post{ display:flex; flex-direction:column; gap:1rem; position:relative; } .post__media{ overflow:hidden; aspect-ratio:3/2; background:var(--cream-2); } .post__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out-expo); } .post:hover .post__media img{ transform:scale(1.05); } .post__meta{ display:flex; gap:1rem; font-size:var(--step--2); letter-spacing:.18em; text-transform:uppercase; color:var(--warm-grey-2); } .post__t{ font-family:var(--font-display); font-size:var(--step-1); font-weight:400; line-height:1.22; } .post__x{ color:var(--ink-soft); font-size:var(--step--1); } /* ---------- 17. CTA banda ---------- */ .cta-band{ position:relative; background:var(--graphite); color:var(--cream); overflow:hidden; padding-block:clamp(4rem,8vw,7.5rem); } .cta-band__inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(1.8rem,4vw,4rem); align-items:center; } @media (max-width:820px){ .cta-band__inner{ grid-template-columns:1fr; } } /* ---------- 18. Formularios ---------- */ .form{ display:grid; gap:1.3rem; } .form__row{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .form .field input,.form .field select,.form .field textarea{ background:#fff; } .section--dark .form .field label,.section--deep .form .field label{ color:rgba(247,244,238,.65); } .section--dark .form .field input,.section--dark .form .field select,.section--dark .form .field textarea, .section--deep .form .field input,.section--deep .form .field select,.section--deep .form .field textarea{ /* background-color, no el atajo: el atajo borraría la flecha SVG del