/* Theme Name: Esencia Child Theme URI: https://esenciascr.com/ Description: Esencia Costa Rica child theme for WP Rentals. Adds the Esencia homepage as a full template override, pulling live listings from WP Rentals where available and falling back to approved static content so the page never renders empty. All other pages, the booking engine and the availability calendar are left untouched. Author: Built for Esencia Costa Rica Version: 1.2.0 Template: wprentals License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: esencia Tags: vacation-rental */ /* ========================================================================== IMPORTANT - the "Template:" line above -------------------------------------------------------------------------- It must exactly match the WP Rentals folder name in /wp-content/themes/. That is almost always "wprentals". If your install uses a different folder name, change it here or WordPress will refuse to activate this theme. The child theme shows an admin notice if it cannot find the parent. ========================================================================== */ /* ========================================================================== ESENCIA HOMEPAGE DESIGN SYSTEM Every rule below is scoped to .esencia-v3 (added to only on the Esencia homepage) so this stylesheet can never leak into WP Rentals listing pages, the booking flow or the user dashboard. ========================================================================== */ /* Accessibility utilities */ .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important} .screen-reader-text:focus{background:#fff;clip:auto!important;clip-path:none;color:#08120F;display:block;font-size:1rem;height:auto;left:6px;line-height:normal;padding:14px 22px;text-decoration:none;top:6px;width:auto;z-index:100000} :root{ --basalt:#08120F; --canopy:#0E241D; --moss:#15382B; --moss-2:#1D4C39; --fern:#57AE81; --gold:#E7B443; --gold-2:#C98F26; --ember:#DE6B3C; --mist:#F5F3EC; --mist-2:#E9E5D8; --sand:#E3D6BC; --ink:#08120F; --ink-65:rgba(8,18,15,.66); --ink-40:rgba(8,18,15,.42); --line:rgba(8,18,15,.13); --lineD:rgba(245,243,236,.15); --display:"Fraunces",Georgia,serif; --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --pad:clamp(20px,5vw,88px); --maxw:1400px; --ease:cubic-bezier(.16,.84,.32,1); } .esencia-v3,.esencia-v3 *, .esencia-v3 *::before, .esencia-v3 *::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .esencia-v3,.esencia-v3 *, .esencia-v3 *::before, .esencia-v3 *::after{animation:none!important;transition-duration:.001ms!important} } body.esencia-v3{ margin:0;background:var(--mist);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased;overflow-x:hidden; } .esencia-v3 img{max-width:100%;display:block} .esencia-v3 a{color:inherit;text-decoration:none} .esencia-v3 button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} .esencia-v3 :focus-visible{outline:2.5px solid var(--gold);outline-offset:4px;border-radius:3px} .esencia-v3 .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} /* ===== Film grain over everything ===== */ .esencia-v3 .grain{ position:fixed;inset:-120%;z-index:200;pointer-events:none;opacity:.052; background-image:url("data:image/svg+xml;utf8,"); animation:grainShift 7s steps(6) infinite; } @keyframes grainShift{ 0%{transform:translate(0,0)}16%{transform:translate(-4%,-3%)}32%{transform:translate(3%,-5%)} 48%{transform:translate(-5%,4%)}64%{transform:translate(4%,3%)}80%{transform:translate(-3%,5%)}100%{transform:translate(0,0)} } /* ===== Type ===== */ .esencia-v3 h1, .esencia-v3 h2, .esencia-v3 h3, .esencia-v3 h4{font-family:var(--display);margin:0;line-height:1.02;letter-spacing:-.028em;font-weight:600;font-variation-settings:"SOFT" 40,"WONK" 1} .esencia-v3 h1{font-size:clamp(2.5rem,5.6vw,4.9rem);font-weight:500} .esencia-v3 h2{font-size:clamp(2.3rem,5.4vw,4.6rem);font-weight:500} .esencia-v3 h3{font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.12} .esencia-v3 p{margin:0} .esencia-v3 .it{font-style:italic;font-variation-settings:"SOFT" 90,"WONK" 1} .esencia-v3 .gold{color:var(--gold)} .esencia-v3 .eyebrow{ font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase; color:var(--gold-2);display:inline-flex;align-items:center;gap:.85em;margin-bottom:1.5rem; } .esencia-v3 .eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.55;flex:none} .esencia-v3 .eyebrow.dk{color:var(--gold)} .esencia-v3 .lede{font-size:clamp(1.02rem,1.2vw,1.16rem);color:var(--ink-65);max-width:54ch;line-height:1.68} /* ===== Buttons ===== */ .esencia-v3 .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em; padding:1.02em 2em;border-radius:100px;font-weight:600;font-size:.93rem;overflow:hidden; transition:transform .4s var(--ease),color .35s,border-color .35s,box-shadow .4s var(--ease); white-space:nowrap;z-index:0; } .esencia-v3 .btn::before{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; transform:scaleX(1);transform-origin:left;transition:transform .5s var(--ease); } .esencia-v3 .btn:hover{transform:translateY(-3px)} .esencia-v3 .btn-gold{color:var(--basalt)} .esencia-v3 .btn-gold::before{background:linear-gradient(100deg,var(--gold) 0%,#F2C557 55%,var(--gold) 100%)} .esencia-v3 .btn-gold:hover{box-shadow:0 14px 34px rgba(231,180,67,.36)} .esencia-v3 .btn-dark{color:var(--mist)} .esencia-v3 .btn-dark::before{background:var(--basalt)} .esencia-v3 .btn-dark:hover{box-shadow:0 14px 34px rgba(8,18,15,.28)} .esencia-v3 .btn-glass{color:var(--mist);border:1px solid rgba(245,243,236,.30);backdrop-filter:blur(10px)} .esencia-v3 .btn-glass::before{background:rgba(245,243,236,.07)} .esencia-v3 .btn-glass:hover{border-color:var(--gold);color:var(--gold)} .esencia-v3 .btn-line{color:var(--ink);border:1.5px solid rgba(8,18,15,.22)} .esencia-v3 .btn-line::before{background:var(--basalt);transform:scaleX(0)} .esencia-v3 .btn-line:hover{color:var(--mist);border-color:var(--basalt)} .esencia-v3 .btn-line:hover::before{transform:scaleX(1)} /* ===== Nav ===== */ .esencia-v3 .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 0;transition:background .45s var(--ease),padding .45s var(--ease),box-shadow .45s} .esencia-v3 .nav.solid{background:rgba(8,18,15,.80);backdrop-filter:blur(20px) saturate(140%);padding:11px 0;box-shadow:0 1px 0 rgba(245,243,236,.10)} .esencia-v3 .nav-in{display:flex;align-items:center;gap:2.6rem;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .esencia-v3 .brand{display:flex;flex-direction:column;line-height:1;flex:none} .esencia-v3 .brand b{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--mist);letter-spacing:-.03em} .esencia-v3 .brand span{font-size:.55rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-top:.36rem} .esencia-v3 .nav-links{display:flex;gap:2rem;margin-left:auto;align-items:center} .esencia-v3 .nav-links a{font-size:.88rem;font-weight:500;color:rgba(245,243,236,.82);position:relative;padding:.35em 0;transition:color .3s} .esencia-v3 .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .45s var(--ease)} .esencia-v3 .nav-links a:hover{color:var(--mist)} .esencia-v3 .nav-links a:hover::after{right:0} .esencia-v3 .nav-cta{display:flex;gap:.65rem;flex:none} .esencia-v3 .nav-cta .btn{padding:.76em 1.4em;font-size:.85rem} .esencia-v3 .burger{display:none;margin-left:auto;color:var(--mist);font-size:1.5rem;padding:.35rem} @media(max-width:1080px){.esencia-v3 .nav-links, .esencia-v3 .nav-cta{display:none}.esencia-v3 .burger{display:block}} /* ===== Hero ===== */ .esencia-v3 .hero{position:relative;min-height:min(94svh,900px);display:flex;flex-direction:column;justify-content:flex-end;background:var(--basalt);overflow:hidden} .esencia-v3 .hero-media{position:absolute;inset:0;z-index:0} .esencia-v3 .hslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.15s var(--ease)} .esencia-v3 .hslide.on{opacity:1;animation:ken 22s ease-out forwards} @keyframes ken{from{transform:scale(1.10)}to{transform:scale(1)}} .esencia-v3 .hero-media::after{ content:"";position:absolute;inset:0; background: radial-gradient(120% 78% at 50% 0%,rgba(8,18,15,.80) 0%,rgba(8,18,15,.14) 42%,transparent 62%), linear-gradient(180deg,transparent 34%,rgba(8,18,15,.62) 66%,rgba(8,18,15,.97) 100%); } /* palm shadow overlay */ .esencia-v3 .fronds{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.42;mix-blend-mode:multiply} .esencia-v3 .frond{position:absolute;transform-origin:top center;filter:blur(3px)} .esencia-v3 .frond svg{display:block} .esencia-v3 .f1{top:-14%;left:-9%;width:640px;animation:sway 13s ease-in-out infinite} .esencia-v3 .f2{top:-19%;right:-13%;width:760px;transform:scaleX(-1);animation:sway 17s ease-in-out infinite reverse} .esencia-v3 .f3{top:-8%;left:38%;width:430px;opacity:.6;animation:sway 21s ease-in-out infinite} @keyframes sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.6deg)}} .esencia-v3 .f2{animation-name:sway2} @keyframes sway2{0%,100%{transform:scaleX(-1) rotate(-3deg)}50%{transform:scaleX(-1) rotate(1.8deg)}} .esencia-v3 .hero-in{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:124px var(--pad) 0} .esencia-v3 .hero h1{color:var(--mist);max-width:15ch;text-wrap:balance} .esencia-v3 .hero h1 .ln{display:block;overflow:hidden} .esencia-v3 .hero h1 .ln > span{display:block;transform:translateY(105%);animation:riseIn 1.05s var(--ease) forwards} .esencia-v3 .ln:nth-child(1) > span{animation-delay:.15s} .esencia-v3 .ln:nth-child(2) > span{animation-delay:.29s} .esencia-v3 .ln:nth-child(3) > span{animation-delay:.43s} @keyframes riseIn{to{transform:translateY(0)}} .esencia-v3 .hero-sub{color:rgba(245,243,236,.80);font-size:clamp(.97rem,1.15vw,1.08rem);max-width:46ch;margin-top:1.3rem;line-height:1.62;opacity:0;animation:fadeUp .9s var(--ease) .72s forwards} @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .esencia-v3 .hbadge{ display:inline-flex;align-items:center;gap:.65em;margin-bottom:1.4rem; padding:.44em 1.05em .44em .56em;border:1px solid rgba(245,243,236,.24);border-radius:100px; font-size:.71rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:rgba(245,243,236,.92); background:rgba(8,18,15,.30);backdrop-filter:blur(10px);opacity:0;animation:fadeUp .8s var(--ease) .05s forwards; } .esencia-v3 .pulse{width:7px;height:7px;border-radius:50%;background:var(--fern);flex:none;box-shadow:0 0 0 0 rgba(87,174,129,.62);animation:pulse 2.4s infinite} @keyframes pulse{70%{box-shadow:0 0 0 11px rgba(87,174,129,0)}100%{box-shadow:0 0 0 0 rgba(87,174,129,0)}} /* glass search */ .esencia-v3 .search{ margin-top:2.1rem;max-width:1000px;display:grid;grid-template-columns:1.5fr 1fr 1fr .85fr auto;gap:1px; background:rgba(245,243,236,.13);border:1px solid rgba(245,243,236,.22); backdrop-filter:blur(24px) saturate(160%);border-radius:20px;padding:8px; box-shadow:0 30px 70px rgba(0,0,0,.42);opacity:0;animation:fadeUp .9s var(--ease) .88s forwards; } .esencia-v3 .sf{padding:.82rem 1.15rem;border-radius:13px;transition:background .3s;min-width:0} .esencia-v3 .sf:hover{background:rgba(245,243,236,.10)} .esencia-v3 .sf label{display:block;font-size:.63rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:rgba(245,243,236,.56);margin-bottom:.34rem} .esencia-v3 .sf input, .esencia-v3 .sf select{border:0;background:none;font:inherit;font-size:.95rem;font-weight:500;color:var(--mist);width:100%;padding:0;-webkit-appearance:none;appearance:none} .esencia-v3 .sf input::placeholder{color:rgba(245,243,236,.42)} .esencia-v3 .sf select option{background:var(--canopy);color:var(--mist)} .esencia-v3 .sf input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.5;cursor:pointer} .esencia-v3 .search .btn{height:100%;padding-inline:2rem} @media(max-width:920px){.esencia-v3 .search{grid-template-columns:1fr 1fr}.esencia-v3 .search .btn{grid-column:1/-1;padding-block:1.05em;margin-top:5px}} /* region rail */ .esencia-v3 .regions{position:relative;z-index:3;margin-top:2.3rem;border-top:1px solid rgba(245,243,236,.15);background:linear-gradient(180deg,rgba(8,18,15,.20),rgba(8,18,15,.55));backdrop-filter:blur(12px)} .esencia-v3 .rail{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);display:flex;overflow-x:auto;scrollbar-width:none} .esencia-v3 .rail::-webkit-scrollbar{display:none} .esencia-v3 .rgn{flex:1;min-width:186px;text-align:left;padding:1.2rem 1.4rem 1.3rem;border-right:1px solid rgba(245,243,236,.12);position:relative;transition:background .4s} .esencia-v3 .rgn:first-child{padding-left:0} .esencia-v3 .rgn:last-child{border-right:0} .esencia-v3 .rgn::before{content:"";position:absolute;top:-1px;left:0;right:100%;height:2px;background:linear-gradient(90deg,var(--gold),var(--ember));transition:right .55s var(--ease)} .esencia-v3 .rgn:hover{background:rgba(245,243,236,.055)} .esencia-v3 .rgn.on::before{right:0} .esencia-v3 .rgn-n{font-family:var(--display);font-size:1.04rem;font-weight:600;color:rgba(245,243,236,.55);transition:color .4s;letter-spacing:-.02em} .esencia-v3 .rgn.on .rgn-n{color:var(--mist)} .esencia-v3 .rgn-m{font-size:.7rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:rgba(245,243,236,.38);margin-top:.55rem;transition:color .4s} .esencia-v3 .rgn.on .rgn-m{color:var(--gold)} @media(max-width:780px){.esencia-v3 .rail{padding-inline:0}.esencia-v3 .rgn:first-child{padding-left:var(--pad)}} /* ===== Marquee ===== */ .esencia-v3 .marq{background:var(--basalt);color:var(--mist);padding:1.15rem 0;overflow:hidden;border-block:1px solid rgba(245,243,236,.11);white-space:nowrap} .esencia-v3 .marq-t{display:inline-flex;align-items:center;animation:slide 42s linear infinite;will-change:transform} .esencia-v3 .marq:hover .marq-t{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} .esencia-v3 .marq-t span{font-family:var(--display);font-style:italic;font-size:1.42rem;font-weight:400;padding-inline:1.5rem;opacity:.82;letter-spacing:-.01em} .esencia-v3 .marq-t i{color:var(--gold);font-style:normal;font-size:.6rem;opacity:.9} /* ===== Proof ===== */ .esencia-v3 .proof{background:var(--basalt);color:var(--mist);padding:clamp(3.4rem,6vw,5.4rem) 0;position:relative;overflow:hidden} .esencia-v3 .proof::before{content:"";position:absolute;bottom:-46%;left:50%;transform:translateX(-50%);width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(87,174,129,.20),transparent 66%);pointer-events:none} .esencia-v3 .proof-in{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative;z-index:2} .esencia-v3 .pf{border-left:1px solid rgba(245,243,236,.14);padding-left:1.7rem} .esencia-v3 .pf:first-child{border-left:0;padding-left:0} .esencia-v3 .pf-n{font-family:var(--display);font-size:clamp(2.4rem,4.6vw,3.9rem);font-weight:500;line-height:1;letter-spacing:-.04em;background:linear-gradient(120deg,#F4CE72,var(--gold) 46%,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent} .esencia-v3 .pf-l{font-size:.79rem;color:rgba(245,243,236,.58);margin-top:.85rem;line-height:1.45;max-width:22ch} @media(max-width:760px){.esencia-v3 .proof-in{grid-template-columns:1fr 1fr;gap:2.2rem}.esencia-v3 .pf:nth-child(3){border-left:0;padding-left:0}} /* ===== Sections ===== */ .esencia-v3 .sec{padding:clamp(5.5rem,10vw,10rem) 0;position:relative} .esencia-v3 .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:3.5rem;margin-bottom:3.8rem;flex-wrap:wrap} .esencia-v3 .sec-head h2{max-width:14ch;text-wrap:balance} /* ===== Manifesto (arch) ===== */ .esencia-v3 .mani{background:var(--mist);overflow:hidden} .esencia-v3 .mani-in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(3rem,7vw,7rem);align-items:center} .esencia-v3 .arch-stack{position:relative;padding:22px 22px 0} .esencia-v3 .arch-stack::before{ content:"";position:absolute;inset:0 0 -30px 0;border:1px solid var(--gold-2);opacity:.42; border-radius:290px 290px 14px 14px;pointer-events:none; } .esencia-v3 .arch{position:relative;border-radius:280px 280px 10px 10px;overflow:hidden;aspect-ratio:3/4;background:var(--moss);box-shadow:0 30px 70px rgba(8,18,15,.22)} .esencia-v3 .arch img, .esencia-v3 .arch .bg{width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transition:transform 1.5s var(--ease)} .esencia-v3 .arch-stack:hover .bg{transform:scale(1.06)} .esencia-v3 .mani h2{max-width:13ch;text-wrap:balance} .esencia-v3 .mani .lede{margin-top:1.7rem} .esencia-v3 .sig{margin-top:2.4rem;display:flex;align-items:center;gap:1.1rem;padding-top:1.7rem;border-top:1px solid var(--line)} .esencia-v3 .sig-n{font-family:var(--display);font-style:italic;font-size:1.42rem;letter-spacing:-.02em} .esencia-v3 .sig-r{font-size:.79rem;color:var(--ink-40);letter-spacing:.06em} @media(max-width:940px){.esencia-v3 .mani-in{grid-template-columns:1fr}.esencia-v3 .arch-stack{max-width:440px;margin-inline:auto}} /* ===== Stays (horizontal rail) ===== */ .esencia-v3 .stays-sec{background:var(--canopy);color:var(--mist)} .esencia-v3 .stays-sec h2{color:var(--mist)} .esencia-v3 .stays-sec .lede{color:rgba(245,243,236,.68)} .esencia-v3 .srail-wrap{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-inline:max(var(--pad),calc(50vw - var(--maxw)/2 + var(--pad)))} .esencia-v3 .srail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:1.4rem;scrollbar-width:none} .esencia-v3 .srail::-webkit-scrollbar{display:none} .esencia-v3 .stay{flex:0 0 clamp(280px,30vw,400px);scroll-snap-align:start;position:relative;border-radius:230px 230px 16px 16px;overflow:hidden;aspect-ratio:3/4.05;background:var(--moss);display:block;isolation:isolate} .esencia-v3 .stay .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.4s var(--ease)} .esencia-v3 .stay:hover .bg{transform:scale(1.08)} .esencia-v3 .stay::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,18,15,.34) 0%,transparent 26%,transparent 44%,rgba(8,18,15,.92) 100%)} .esencia-v3 .stay-b{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.8rem 1.6rem 1.9rem;color:var(--mist)} .esencia-v3 .stay-loc{font-size:.68rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem} .esencia-v3 .stay-b h3{color:var(--mist);text-wrap:balance;margin-bottom:.9rem} .esencia-v3 .stay-f{display:flex;align-items:baseline;gap:.45rem;font-size:.83rem;color:rgba(245,243,236,.72);padding-top:.9rem;border-top:1px solid rgba(245,243,236,.20)} .esencia-v3 .stay-p{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--mist);letter-spacing:-.02em} .esencia-v3 .tag{display:inline-block;margin-bottom:.9rem;background:rgba(245,243,236,.15);border:1px solid rgba(245,243,236,.34);backdrop-filter:blur(8px);color:var(--mist);font-size:.62rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;padding:.42em .95em;border-radius:100px;white-space:nowrap} .esencia-v3 .srail-nav{display:flex;gap:.7rem;margin-top:1.6rem} .esencia-v3 .arw{width:52px;height:52px;border-radius:50%;border:1px solid rgba(245,243,236,.26);display:grid;place-items:center;color:var(--mist);font-size:1.05rem;transition:background .35s,border-color .35s,color .35s,transform .35s var(--ease)} .esencia-v3 .arw:hover{background:var(--gold);border-color:var(--gold);color:var(--basalt);transform:scale(1.07)} /* ===== Direct booking cards ===== */ .esencia-v3 .why{background:var(--sand)} .esencia-v3 .wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .esencia-v3 .wcard{background:var(--mist);border-radius:18px;padding:2.4rem 2.1rem 2.6rem;position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .esencia-v3 .wcard::after{content:"";position:absolute;top:0;left:0;right:100%;height:3px;background:linear-gradient(90deg,var(--gold),var(--ember));transition:right .6s var(--ease)} .esencia-v3 .wcard:hover{transform:translateY(-7px);box-shadow:0 26px 54px rgba(8,18,15,.14)} .esencia-v3 .wcard:hover::after{right:0} .esencia-v3 .wico{width:52px;height:52px;border-radius:14px;background:var(--canopy);display:grid;place-items:center;margin-bottom:1.7rem} .esencia-v3 .wico svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .esencia-v3 .wcard h3{margin-bottom:.85rem} .esencia-v3 .wcard p{font-size:.97rem;color:var(--ink-65);line-height:1.66} @media(max-width:900px){.esencia-v3 .wgrid{grid-template-columns:1fr}} /* ===== Owners ===== */ .esencia-v3 .own{background:var(--basalt);color:var(--mist);position:relative;overflow:hidden} .esencia-v3 .own::before{content:"";position:absolute;top:-16%;right:-10%;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(87,174,129,.28),transparent 66%);pointer-events:none} .esencia-v3 .own::after{content:"";position:absolute;bottom:-24%;left:-14%;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(231,180,67,.15),transparent 68%);pointer-events:none} .esencia-v3 .own-in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(3rem,6vw,6rem);align-items:center;position:relative;z-index:2} .esencia-v3 .own h2{color:var(--mist);max-width:13ch;text-wrap:balance} .esencia-v3 .own-l{color:rgba(245,243,236,.74);font-size:1.05rem;margin-top:1.5rem;max-width:48ch;line-height:1.66} .esencia-v3 .olist{list-style:none;padding:0;margin:2.4rem 0 0} .esencia-v3 .olist li{display:flex;gap:1.4rem;padding:1.15rem 0;border-top:1px solid var(--lineD);align-items:flex-start} .esencia-v3 .olist li:last-child{border-bottom:1px solid var(--lineD)} .esencia-v3 .olist b{font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--gold);flex:none;min-width:96px;line-height:1.05;letter-spacing:-.03em} .esencia-v3 .olist span{font-size:.94rem;color:rgba(245,243,236,.76);line-height:1.55} .esencia-v3 .ocard{background:linear-gradient(165deg,var(--moss),var(--canopy));border:1px solid rgba(245,243,236,.14);border-radius:22px;padding:clamp(1.9rem,3vw,2.7rem);box-shadow:0 30px 68px rgba(0,0,0,.34)} .esencia-v3 .ocard h3{color:var(--mist);margin-bottom:.55rem} .esencia-v3 .ocard > p{font-size:.92rem;color:rgba(245,243,236,.66);margin-bottom:1.8rem;line-height:1.58} .esencia-v3 .fld{margin-bottom:1rem} .esencia-v3 .fld label{display:block;font-size:.64rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:rgba(245,243,236,.48);margin-bottom:.46rem} .esencia-v3 .fld input, .esencia-v3 .fld select{width:100%;padding:.88rem 1.05rem;border-radius:11px;border:1px solid rgba(245,243,236,.16);background:rgba(8,18,15,.52);color:var(--mist);font:inherit;font-size:.94rem;-webkit-appearance:none;appearance:none;transition:border-color .3s,background .3s} .esencia-v3 .fld input::placeholder{color:rgba(245,243,236,.32)} .esencia-v3 .fld input:focus, .esencia-v3 .fld select:focus{border-color:var(--gold);background:rgba(8,18,15,.72);outline:none} .esencia-v3 .fld select option{background:var(--canopy);color:var(--mist)} .esencia-v3 .ocard .btn{width:100%;margin-top:.75rem} .esencia-v3 .fine{font-size:.77rem;color:rgba(245,243,236,.44);margin-top:1.1rem;text-align:center;line-height:1.52} @media(max-width:960px){.esencia-v3 .own-in{grid-template-columns:1fr}} /* ===== Real estate ===== */ .esencia-v3 .re{background:var(--mist-2)} .esencia-v3 .re-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:3.4rem} .esencia-v3 .re-card{position:relative;border-radius:18px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;background:var(--moss)} .esencia-v3 .re-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.4s var(--ease)} .esencia-v3 .re-card:hover .bg{transform:scale(1.06)} .esencia-v3 .re-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 34%,rgba(8,18,15,.92) 100%)} .esencia-v3 .re-b{position:relative;z-index:2;padding:2.3rem;color:var(--mist)} .esencia-v3 .re-b h3{color:var(--mist);max-width:20ch;margin-bottom:.9rem;text-wrap:balance} .esencia-v3 .re-link{font-size:.79rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);display:inline-flex;gap:.6em;align-items:center} .esencia-v3 .re-link::after{content:"→";transition:transform .4s var(--ease)} .esencia-v3 .re-card:hover .re-link::after{transform:translateX(7px)} @media(max-width:820px){.esencia-v3 .re-grid{grid-template-columns:1fr}} /* ===== Testimonials ===== */ .esencia-v3 .tg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .esencia-v3 .tc{background:var(--mist);border:1px solid var(--line);border-radius:18px;padding:2.3rem;display:flex;flex-direction:column;position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .esencia-v3 .tc:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(8,18,15,.12)} .esencia-v3 .qm{font-family:var(--display);font-size:4.6rem;line-height:.72;color:var(--gold);opacity:.28;margin-bottom:.4rem} .esencia-v3 .tc blockquote{margin:0;font-family:var(--display);font-size:1.08rem;font-weight:400;line-height:1.52;flex:1;letter-spacing:-.012em} .esencia-v3 .tm{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:1rem} .esencia-v3 .tn{font-weight:700;font-size:.93rem} .esencia-v3 .tw{font-size:.79rem;color:var(--ink-40);margin-top:.2rem} .esencia-v3 .st{color:var(--gold);letter-spacing:.14em;font-size:.85rem;flex:none} @media(max-width:920px){.esencia-v3 .tg{grid-template-columns:1fr}} /* ===== CTA band ===== */ .esencia-v3 .band{position:relative;padding:clamp(5rem,9vw,8rem) 0;background:var(--basalt);color:var(--mist);overflow:hidden;text-align:center} .esencia-v3 .band .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.34} .esencia-v3 .band::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 100% at 50% 50%,rgba(8,18,15,.55),rgba(8,18,15,.94))} .esencia-v3 .band-in{position:relative;z-index:2;max-width:760px;margin:0 auto;padding-inline:var(--pad)} .esencia-v3 .band h2{color:var(--mist);margin-bottom:1.3rem;text-wrap:balance} .esencia-v3 .band p{color:rgba(245,243,236,.76);max-width:46ch;margin:0 auto 2.4rem;font-size:1.05rem} .esencia-v3 .band-btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap} /* ===== Footer ===== */ .esencia-v3 .foot{background:var(--basalt);color:var(--mist);padding:clamp(4rem,7vw,6rem) 0 2rem;border-top:1px solid rgba(245,243,236,.11)} .esencia-v3 .fg{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:3.2rem} .esencia-v3 .foot h4{font-family:var(--sans);font-size:.67rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem} .esencia-v3 .foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.78rem} .esencia-v3 .foot li, .esencia-v3 .foot a{font-size:.92rem;color:rgba(245,243,236,.70)} .esencia-v3 .foot ul a{transition:color .3s} .esencia-v3 .foot ul a:hover{color:var(--gold)} .esencia-v3 .fb{font-family:var(--display);font-size:2rem;font-weight:600;letter-spacing:-.03em;margin-bottom:1.1rem;line-height:1} .esencia-v3 .fb span{display:block;font-family:var(--sans);font-size:.55rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-top:.5rem} .esencia-v3 .fblurb{font-size:.91rem;color:rgba(245,243,236,.6);max-width:34ch;line-height:1.62;margin-top:1.2rem} .esencia-v3 .fc a{display:block;color:var(--mist);font-weight:500} .esencia-v3 .fbot{margin-top:4rem;padding-top:1.7rem;border-top:1px solid var(--lineD);display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.81rem;color:rgba(245,243,236,.44)} .esencia-v3 .fbot a:hover{color:var(--gold)} @media(max-width:940px){.esencia-v3 .fg{grid-template-columns:1fr 1fr}} @media(max-width:580px){.esencia-v3 .fg{grid-template-columns:1fr}} /* WhatsApp */ .esencia-v3 .wa{position:fixed;bottom:24px;right:24px;z-index:95;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.32);transition:transform .4s var(--ease)} .esencia-v3 .wa:hover{transform:scale(1.1) rotate(6deg)} .esencia-v3 .wa svg{width:30px;height:30px;fill:#fff} /* Reveal */ .esencia-v3 .rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .esencia-v3 .rv.in{opacity:1;transform:none} .esencia-v3 .rv-d1{transition-delay:.1s}.esencia-v3 .rv-d2{transition-delay:.2s}.esencia-v3 .rv-d3{transition-delay:.3s}