:root { --ink:#20221f; --cream:#eee9df; --sand:#d5c9b4; --coral:#e5644b; --muted:#807d74; --line:rgba(32,34,31,.18); --serif:'Playfair Display',Georgia,serif; --sans:'Manrope',Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:14px; } .grain { position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } a { color:inherit; text-decoration:none; } button,input { font:inherit; } .site-header { height:84px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:#fff; position:absolute; width:100%; top:0; z-index:10; border-bottom:1px solid rgba(255,255,255,.2); } .brand img { width:42px; height:52px; object-fit:contain; } .desktop-nav { display:flex; gap:34px; margin-left:12%; font-size:11px; text-transform:uppercase; letter-spacing:.11em; } .desktop-nav a { opacity:.75; transition:opacity .2s; } .desktop-nav a:hover { opacity:1; } .header-cta,.submit-btn { color:var(--ink); background:var(--coral); padding:14px 19px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; } .header-cta span,.text-link span,.submit-btn span { margin-left:20px; font-size:16px; } .menu-toggle { display:none; color:#fff; background:none; border:0; text-transform:uppercase; letter-spacing:.1em; font-size:11px; } .hero { height:100vh; min-height:680px; position:relative; color:#fff; background:var(--ink); overflow:hidden; } .hero-image,.hero-overlay { position:absolute; inset:0; } .hero-image { background:url('../images/vista aerea.webp') center/cover; animation:heroZoom 12s ease-out both; } .hero-overlay { background:linear-gradient(90deg,rgba(24,29,25,.76) 0%,rgba(24,29,25,.25) 58%,rgba(24,29,25,.12)),linear-gradient(0deg,rgba(16,18,16,.7),transparent 50%); } .hero-content { position:absolute; left:12%; top:32%; max-width:650px; } .eyebrow,.section-tag { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; } .eyebrow span,.section-tag span { color:var(--coral); margin-right:14px; } .light span { color:#ffb2a0; } h1,h2 { margin:20px 0; font-weight:500; letter-spacing:-.06em; line-height:.91; } h1 { font-size:clamp(70px,10vw,150px); } h2 { font-size:clamp(55px,7vw,104px); } em { font-family:var(--serif); font-weight:500; letter-spacing:-.07em; } .hero-copy { max-width:320px; margin-top:28px; color:rgba(255,255,255,.76); line-height:1.7; } .circle-link { display:flex; margin-top:48px; width:118px; height:118px; border:1px solid rgba(255,255,255,.6); border-radius:50%; align-items:center; justify-content:center; text-align:center; font-size:10px; text-transform:uppercase; letter-spacing:.08em; transition:background .3s, color .3s; } .circle-link:hover { background:#fff; color:var(--ink); } .circle-link span { display:block; color:var(--coral); font-size:20px; margin-top:6px; } .hero-foot { position:absolute; bottom:28px; left:5vw; right:5vw; display:flex; justify-content:flex-end; gap:18px; align-items:center; color:rgba(255,255,255,.7); font:10px var(--mono); text-transform:uppercase; letter-spacing:.12em; } .scroll-line { width:80px; height:1px; background:var(--coral); } .section-pad { padding:130px 12%; } .intro { min-height:760px; } .intro-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:10%; margin-top:85px; } .kicker { color:var(--coral); text-transform:uppercase; font:11px var(--mono); letter-spacing:.12em; } .intro h2 { font-size:clamp(60px,8vw,125px); } .intro-text { padding-top:15px; max-width:390px; line-height:1.8; color:var(--muted); } .large-copy { color:var(--ink); font:500 25px/1.3 var(--sans); letter-spacing:-.03em; margin-bottom:28px; } .text-link { display:inline-block; border-bottom:1px solid var(--ink); padding-bottom:10px; margin-top:28px; text-transform:uppercase; font-size:10px; letter-spacing:.12em; } .stat-row { display:flex; gap:15%; border-top:1px solid var(--line); margin-top:115px; padding-top:30px; } .stat { display:flex; align-items:flex-start; gap:14px; } .stat strong { font:500 35px var(--serif); } .stat span { color:var(--muted); font:10px/1.4 var(--mono); text-transform:uppercase; letter-spacing:.08em; } .river-break,.contact { position:relative; min-height:720px; color:#fff; overflow:hidden; } .river-image,.contact-image { position:absolute; inset:0; background:url('../images/vista desde el rio.webp') center/cover; } .river-break:after,.contact:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(21,27,24,.8),rgba(21,27,24,.18)); } .river-content,.contact-content { position:relative; z-index:1; max-width:510px; padding:125px 0 100px 12%; } .river-content h2,.contact h2 { font-size:clamp(58px,7vw,102px); } .river-content > p,.contact-content > p { color:rgba(255,255,255,.72); line-height:1.8; max-width:380px; } .location-points { display:grid; gap:15px; border-top:1px solid rgba(255,255,255,.3); margin-top:55px; padding-top:20px; color:#fff; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; } .location-points b { color:var(--coral); margin-right:22px; font-weight:400; } .section-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:60px; } .section-note { color:var(--muted); line-height:1.5; text-align:right; margin:0; } .gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; } .gallery-item { margin:0; position:relative; overflow:hidden; background:var(--sand); } .gallery-item img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.82); transition:transform .7s cubic-bezier(.2,.8,.2,1); } .gallery-item:hover img { transform:scale(1.045); } .gallery-large { height:560px; } .gallery-tall { height:680px; margin-top:115px; } .gallery-small { height:410px; margin-top:-180px; width:74%; } .gallery-wide { height:440px; margin-top:0; } figcaption { position:absolute; bottom:18px; left:20px; color:#fff; font:10px var(--mono); text-transform:uppercase; letter-spacing:.09em; text-shadow:0 1px 8px #000; } figcaption span { color:#ffb2a0; margin-right:16px; } .plans { display:grid; grid-template-columns: .8fr 1.2fr; gap:9%; align-items:center; background:#d9d2c7; } .plans-copy h2 { margin-top:45px; } .plans-copy > p { max-width:320px; line-height:1.75; color:var(--muted); } .plan-tabs { border-bottom:1px solid var(--line); display:flex; gap:28px; margin-top:48px; } .plan-tabs button { border:0; background:none; padding:0 0 13px; color:var(--muted); font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; cursor:pointer; } .plan-tabs button.active { color:var(--ink); border-bottom:2px solid var(--coral); } .plan-visual { min-height:480px; background:#eeeae1; position:relative; display:flex; align-items:center; justify-content:center; } .plan-image { max-width:88%; max-height:480px; object-fit:contain; display:none; mix-blend-mode:multiply; } .plan-image.active { display:block; } .plan-label { position:absolute; bottom:22px; right:24px; color:var(--muted); font:10px var(--mono); text-transform:uppercase; } .contact { min-height:760px; } .contact-image { background-image:url('../images/piscina borde infinito.webp'); } .contact-content { padding-top:135px; } .contact-content form { margin-top:45px; max-width:410px; } form label { display:block; border-bottom:1px solid rgba(255,255,255,.5); padding:12px 0; } form label span { display:block; color:rgba(255,255,255,.55); font:9px var(--mono); text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; } input { border:0; outline:0; color:#fff; background:transparent; width:100%; font-size:14px; } input::placeholder { color:rgba(255,255,255,.7); } .submit-btn { border:0; margin-top:30px; cursor:pointer; } .form-message { font-size:11px; color:#ffb2a0 !important; margin-top:18px; } .site-footer { background:var(--ink); color:#fff; padding:75px 5vw 30px; } .footer-main { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; min-height:160px; } .footer-logo { width:60px; height:75px; object-fit:contain; } .footer-main p,.footer-address { color:rgba(255,255,255,.6); line-height:1.6; font-size:12px; margin:0; } .footer-address { justify-self:end; text-align:right; } .footer-address a { color:#fff; } .footer-bottom { border-top:1px solid rgba(255,255,255,.2); padding-top:18px; display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.5); font:9px var(--mono); text-transform:uppercase; letter-spacing:.08em; } .partner-logos { display:flex; align-items:center; gap:24px; } .partner-logos img { max-width:65px; max-height:28px; object-fit:contain; } @keyframes heroZoom { from { transform:scale(1.06); } to { transform:scale(1); } } @media(max-width:760px) { .site-header { height:72px; padding:0 6vw; } .desktop-nav,.header-cta { display:none; } .menu-toggle { display:block; } .hero { min-height:700px; } .hero-content { left:8%; top:24%; } .hero-foot { left:8%; right:8%; justify-content:space-between; font-size:8px; } .scroll-line { width:28px; } .section-pad { padding:88px 8%; } .intro-grid,.plans { display:block; } .intro-grid { margin-top:55px; } .intro-text { padding-top:35px; } .stat-row { margin-top:75px; gap:25px; justify-content:space-between; } .stat { display:block; } .stat strong { display:block; margin-bottom:8px; } .stat span { font-size:8px; } .river-content,.contact-content { padding:90px 8%; } .section-head { display:block; margin-bottom:40px; } .section-note { text-align:left; margin-top:25px; } .gallery-grid { gap:10px; } .gallery-large { height:340px; } .gallery-tall { height:420px; margin-top:60px; } .gallery-small { height:250px; margin-top:-80px; width:100%; } .gallery-wide { height:260px; } .plans-copy { padding-bottom:55px; } .plan-visual { min-height:310px; } .plan-image { max-height:310px; } .contact { min-height:750px; } .footer-main { grid-template-columns:1fr 1fr; gap:30px; } .footer-address { grid-column:2; } .footer-bottom { display:block; } .partner-logos { margin:25px 0; } }