@font-face{
font-family:"Montserrat"; font-style:normal; font-weight:400 700; font-display:swap;
src:url("../fonts/montserrat-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:"Montserrat"; font-style:normal; font-weight:400 700; font-display:swap;
src:url("../fonts/montserrat-latin.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
--brown:        #3C312D;
--copper:       #9F7046;
--white:        #FFFFFF;
--cream:        #F6F1EB;
--sand:         #E7D9CC;
--brown-deep:   #2C2320;
--brown-soft:   #574943;
--copper-dark:  #855D39;
--copper-soft:  #C6A583;
--cream-hi:     #FBF8F4;
--ink:          #3C312D;
--ink-70:       rgba(60,49,45,.72);
--ink-55:       rgba(60,49,45,.56);
--ink-40:       rgba(60,49,45,.40);
--line:         rgba(60,49,45,.12);
--line-soft:    rgba(60,49,45,.07);
--font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--r-xs: 6px;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-pill: 999px;
--sh-1: 0 1px 2px rgba(60,49,45,.05), 0 4px 14px rgba(60,49,45,.05);
--sh-2: 0 2px 6px rgba(60,49,45,.06), 0 14px 34px rgba(60,49,45,.08);
--sh-3: 0 4px 10px rgba(60,49,45,.07), 0 26px 60px rgba(60,49,45,.12);
--e: cubic-bezier(.23, 1, .32, 1);
--e-out: cubic-bezier(.23, 1, .32, 1);
--e-in-out: cubic-bezier(.77, 0, .175, 1);
--t-press: .12s;   
--t-hover: .18s;   
--t-fast: .22s;
--t: .3s;
--t-slow: .42s;
--t-enter: .55s;   
--wrap: 1240px;
--wrap-narrow: 940px;
--gutter: clamp(20px, 5vw, 48px);
--header-h: 84px;
}
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body{
margin:0;
font-family: var(--font-sans);
font-size: 16.5px;
line-height: 1.68;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
a[href^="mailto:"]{ overflow-wrap: anywhere; }
button{ font: inherit; color: inherit; }
h1,h2,h3,h4,h5{ margin:0; font-weight:600; line-height:1.14; letter-spacing:-.015em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 3px; }
.display{ font-family: var(--font-display); font-weight: 600; letter-spacing:-.02em; }
.h1{ font-size: clamp(2.3rem, 1.35rem + 3.6vw, 4.1rem); line-height:1.06; }
.h2{ font-size: clamp(1.85rem, 1.15rem + 2.5vw, 3.05rem); line-height:1.1; }
.h3{ font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem); line-height:1.2; }
.h4{ font-size: clamp(1.1rem, .98rem + .5vw, 1.32rem); line-height:1.3; }
.lead{ font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); color: var(--ink-70); line-height:1.7; }
.small{ font-size:.9rem; }
.eyebrow{
display:inline-flex; align-items:center; gap:.6rem;
font-size:.735rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
color: var(--copper); margin:0 0 1.1rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background: var(--copper); opacity:.7; }
.eyebrow--center{ justify-content:center; }
.hl{ color: var(--copper); font-style: italic; }
.hl-solid{ color: var(--copper); }
.wrap{ width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--gutter); }
.wrap-narrow{ max-width: var(--wrap-narrow); }
.section{ padding: clamp(64px, 8vw, 118px) 0; }
.section--tight{ padding: clamp(48px, 6vw, 84px) 0; }
.section--cream{ background: var(--cream); }
.section--sand{ background: linear-gradient(180deg, var(--cream) 0%, var(--cream-hi) 100%); }
.stack-sm > * + *{ margin-top:.55rem; }
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.section-head{ max-width: 720px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head .lead{ margin-top:1.1rem; }
.btn{
--btn-bg: var(--copper);
--btn-fg: var(--white);
--btn-bd: transparent;
display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
padding: .95rem 1.6rem;
min-height: 52px;
font-size:.92rem; font-weight:600; letter-spacing:.01em;
border-radius: var(--r-pill);
border:1px solid var(--btn-bd);
background: var(--btn-bg); color: var(--btn-fg);
cursor:pointer; white-space:nowrap;
transition: background var(--t-hover) var(--e), color var(--t-hover) var(--e),
border-color var(--t-hover) var(--e), box-shadow var(--t-hover) var(--e),
transform var(--t-press) var(--e);
}
.btn .ico{ transition: transform var(--t-hover) var(--e); flex:none; }
@media (hover: hover) and (pointer: fine){
.btn:hover{ box-shadow: var(--sh-2); }
.btn:hover .ico{ transform: translateX(4px); }
}
.btn:active{ transform: translateY(1px) scale(.985); }
.btn--primary:hover{ --btn-bg: var(--copper-dark); }
.btn--dark{ --btn-bg: var(--brown); }
.btn--dark:hover{ --btn-bg: var(--brown-deep); }
.btn--outline{ --btn-bg: transparent; --btn-fg: var(--brown); --btn-bd: rgba(60,49,45,.24); }
.btn--outline:hover{ --btn-bg: var(--brown); --btn-fg: var(--white); --btn-bd: var(--brown); }
.btn--light{ --btn-bg: var(--white); --btn-fg: var(--brown); }
.btn--light:hover{ --btn-bg: var(--cream); }
.btn--ghost-light{ --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255,255,255,.45); }
.btn--ghost-light:hover{ --btn-bg: rgba(255,255,255,.13); --btn-bd: rgba(255,255,255,.75); }
.btn--block{ width:100%; }
.btn--sm{ min-height:44px; padding:.7rem 1.25rem; font-size:.86rem; }
.link-arrow{
display:inline-flex; align-items:center; gap:.5rem;
font-weight:600; font-size:.9rem; color: var(--copper);
transition: color var(--t-hover) var(--e);
}
.link-arrow .ico{ transition: transform var(--t-hover) var(--e); }
.link-arrow:hover{ color: var(--copper-dark); }
@media (hover: hover) and (pointer: fine){
.link-arrow:hover .ico{ transform: translateX(5px); }
}
.site-header{
position: fixed; inset: 0 0 auto 0; z-index: 90;
height: var(--header-h);
display:flex; align-items:center;
background: transparent;
border-bottom: 1px solid transparent;
transition: background var(--t-slow) var(--e-in-out), box-shadow var(--t-slow) var(--e-in-out),
height var(--t-slow) var(--e-in-out), border-color var(--t-slow) var(--e-in-out);
}
.site-header::before{
content:""; position:absolute; inset:0; z-index:-1;
background: linear-gradient(180deg, rgba(44,35,32,.55) 0%, rgba(44,35,32,0) 100%);
opacity:1; transition: opacity var(--t-slow) var(--e-in-out);
pointer-events:none;
}
.site-header.is-solid{
background: rgba(255,255,255,.94);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
box-shadow: 0 1px 0 var(--line-soft), 0 8px 28px rgba(60,49,45,.07);
height: 72px;
border-bottom-color: var(--line-soft);
}
.site-header.is-solid::before{ opacity:0; }
.site-header.header--static{ position: sticky; background: rgba(255,255,255,.94); }
.site-header.header--static::before{ opacity:0; }
.header-inner{
width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--gutter);
display:flex; align-items:center; gap: 1.5rem;
}
.brand{ flex:none; display:block; line-height:0; }
.brand img{
height:40px; width:auto; transform-origin: left center;
transition: transform var(--t-slow) var(--e-in-out), opacity var(--t-fast) var(--e);
}
.site-header.is-solid .brand img{ transform: scale(.85); }
.brand .logo-dark{ display:none; }
.site-header.is-solid .brand .logo-light,
.header--static .brand .logo-light{ display:none; }
.site-header.is-solid .brand .logo-dark,
.header--static .brand .logo-dark{ display:block; }
.nav{ margin-left:auto; display:flex; align-items:center; gap: clamp(1rem, 2vw, 2.1rem); }
.nav a{
position:relative; font-size:.83rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
color: rgba(255,255,255,.9); padding: .5rem 0;
transition: color var(--t-hover) var(--e);
white-space: nowrap;
}
.nav a::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
background: var(--copper);
transform: scaleX(0); transform-origin: left center;
transition: transform var(--t) var(--e-in-out);
}
.nav a:hover{ color: var(--white); }
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform: scaleX(1); }
.nav a[aria-current="page"]{ color: var(--copper-soft); }
.site-header.is-solid .nav a, .header--static .nav a{ color: var(--ink-70); }
.site-header.is-solid .nav a:hover, .header--static .nav a:hover{ color: var(--brown); }
.site-header.is-solid .nav a[aria-current="page"], .header--static .nav a[aria-current="page"]{ color: var(--copper); }
.header-cta{ flex:none; }
.site-header .header-cta .btn{ min-height:44px; padding:.65rem 1.25rem; font-size:.84rem; }
.nav-toggle{
display:none; margin-left:auto;
width:46px; height:46px; padding:0;
align-items:center; justify-content:center;
background:transparent; border:1px solid rgba(255,255,255,.35); border-radius: var(--r-pill);
cursor:pointer; transition: border-color var(--t-hover) var(--e), background var(--t-hover) var(--e), transform var(--t-press) var(--e);
}
.nav-toggle:active{ transform: scale(.94); }
.site-header.is-solid .nav-toggle, .header--static .nav-toggle{ border-color: var(--line); }
.nav-toggle span{ position:relative; display:block; width:18px; height:1.6px; background: var(--white); border-radius:2px; transition: background var(--t-fast) var(--e); }
.nav-toggle span::before, .nav-toggle span::after{
content:""; position:absolute; left:0; width:18px; height:1.6px; background:inherit; border-radius:2px;
transition: transform var(--t) var(--e-in-out);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.site-header.is-solid .nav-toggle span, .header--static .nav-toggle span{ background: var(--brown); }
.mobile-nav{
position:fixed; inset:0; z-index:100;
background: var(--brown-deep);
display:flex; flex-direction:column;
padding: calc(26px + env(safe-area-inset-top, 0px)) var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
opacity:0; visibility:hidden; transform: translateY(-10px);
transition: opacity var(--t) var(--e), visibility var(--t) var(--e), transform var(--t) var(--e);
overflow-y:auto;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:none; }
.mobile-nav__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 2.4rem; }
.mobile-nav__top img{ height:34px; width:auto; }
.mobile-nav__close{
width:46px; height:46px; display:grid; place-items:center;
background:transparent; border:1px solid rgba(255,255,255,.28); border-radius:var(--r-pill);
color: var(--white); cursor:pointer; font-size:1.1rem; line-height:1;
transition: background var(--t-hover) var(--e), transform var(--t-press) var(--e);
}
.mobile-nav__close:active{ transform: scale(.94); }
.mobile-nav__close:hover{ background: rgba(255,255,255,.12); }
.mobile-nav__links{ display:flex; flex-direction:column; gap:.2rem; }
.mobile-nav__links a{
font-family: var(--font-display); font-size: clamp(1.7rem, 8vw, 2.35rem); font-weight:400;
color: var(--white); padding:.5rem 0;
border-bottom:1px solid rgba(255,255,255,.09);
opacity:0; transform: translateY(12px);
transition: opacity var(--t-fast) var(--e), transform var(--t-fast) var(--e), color var(--t-hover) var(--e);
}
.mobile-nav.is-open .mobile-nav__links a{
opacity:1; transform:none;
transition-duration: .42s, .42s, var(--t-hover);
transition-delay: var(--mn-d, 0ms), var(--mn-d, 0ms), 0ms;
}
.mobile-nav__links a:nth-child(1){ --mn-d: .04s }
.mobile-nav__links a:nth-child(2){ --mn-d: .09s }
.mobile-nav__links a:nth-child(3){ --mn-d: .14s }
.mobile-nav__links a:nth-child(4){ --mn-d: .19s }
.mobile-nav__links a:nth-child(5){ --mn-d: .24s }
.mobile-nav__links a[aria-current="page"]{ color: var(--copper-soft); }
.mobile-nav__foot{ margin-top:auto; padding-top:2.4rem; display:grid; gap:.9rem; }
.mobile-nav__foot .meta{ color: rgba(255,255,255,.58); font-size:.86rem; display:grid; gap:.3rem; }
.mobile-nav__foot .meta a:hover{ color: var(--copper-soft); }
body.nav-open{ overflow:hidden; }
.hero{
position:relative;
min-height: min(92vh, 940px);
display:flex; align-items:center;
padding: calc(var(--header-h) + 48px) 0 clamp(56px, 7vw, 86px);
overflow:hidden;
background: var(--brown-deep);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img, .hero__media canvas{ width:100%; height:100%; object-fit:cover; object-position: center 62%; }
.hero__slide{
position:absolute; inset:0;
animation: hero-reveal 20s ease-in-out infinite, hero-zoom 20s ease-in-out infinite;
}
.hero__slide:nth-child(1){ z-index:4; animation-name: hero-reveal-first, hero-zoom-first; animation-delay: 0s, 0s; }
.hero__slide:nth-child(2){ z-index:3; animation-delay: 5s,  5s;  }
.hero__slide:nth-child(3){ z-index:2; animation-delay: 10s, 10s; }
.hero__slide:nth-child(4){ z-index:1; animation-name: none, hero-zoom-last;  animation-delay: 0s, 0s; }
.hero:not(.is-ready) .hero__slide{ animation-play-state: paused; }
@keyframes hero-reveal{
0%, 17%{ opacity:1; }
25%, 100%{ opacity:0; }
}
@keyframes hero-reveal-first{
0%, 17%{ opacity:1; }
25%, 92%{ opacity:0; }
100%{ opacity:1; }
}
@keyframes hero-zoom{
0%{ scale:1; }
25%, 100%{ scale:1.09; }
}
@keyframes hero-zoom-first{
0%{ scale:1; }
25%, 55%{ scale:1.09; }
80%, 100%{ scale:1; }
}
@keyframes hero-zoom-last{
0%{ scale:1.09; }
20%, 75%{ scale:1; }
100%{ scale:1.09; }
}
.hero__media::after{
content:""; position:absolute; inset:0; z-index:20;
background:
linear-gradient(100deg, rgba(44,35,32,.86) 0%, rgba(44,35,32,.62) 38%, rgba(44,35,32,.22) 68%, rgba(44,35,32,.35) 100%),
linear-gradient(180deg, rgba(44,35,32,.4) 0%, rgba(44,35,32,0) 30%, rgba(44,35,32,0) 62%, rgba(44,35,32,.5) 100%);
}
.hero__grid{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:center; text-align:center;
gap: clamp(30px, 4vw, 48px);
}
.hero__copy{ color: var(--white); max-width: 820px; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.hero__mark{
display:block; margin: 0 auto 1.2rem;
width: clamp(34px, 3.6vw, 46px); height:auto;
filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.35));
}
.hero__copy .eyebrow{ color: var(--copper-soft); }
.hero__copy .eyebrow::before{ background: var(--copper-soft); }
.hero__title{ color: var(--white); text-wrap: balance; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); }
.hero__title .hl{ color: var(--copper-soft); }
.hero__text{ margin: 1.5rem auto 0; color: rgba(255,255,255,.82); font-size: clamp(1rem, .95rem + .3vw, 1.12rem); max-width: 56ch; }
.hero__actions{ margin-top: 2.1rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; }
.hero__title .word, .hero__text .word{
display:inline-block;
opacity:0; transform: translateY(.5em);
animation: word-in .55s var(--e-out) forwards;
}
.hero__title .word{ animation-delay: calc(.13s + var(--i, 0) * 32ms); }
.hero__text .word{ animation-delay: calc(.42s + min(var(--i, 0), 10) * 22ms); }
@keyframes word-in{ to{ opacity:1; transform:none; } }
.hero-formbar{
width:100%; max-width: 960px;
background: var(--white);
border-radius: 999px;
box-shadow: var(--sh-3);
padding: .55rem .6rem .55rem 1.7rem;
}
.hero-formbar form{ display:flex; align-items:center; }
.hero-formbar__field{
flex: 1 1 0; min-width:0;
padding: 0 1.1rem;
border-left: 1px solid var(--line);
}
.hero-formbar__field:first-child{ border-left:none; padding-left:0; }
.hero-formbar__field input, .hero-formbar__field select{
width:100%; font:inherit; font-size:.95rem; color: var(--ink);
padding:.9rem 0; border:0; background:transparent; appearance:none;
}
.hero-formbar__field select{
cursor:pointer;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239F7046' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position: right center; padding-right:1.5rem;
}
.hero-formbar__field input::placeholder{ color: var(--ink-40); }
.hero-formbar__field input:focus, .hero-formbar__field select:focus{ outline:none; }
.hero-formbar__submit{ flex:none; text-transform:uppercase; letter-spacing:.04em; padding-inline: 2.1rem; }
@media (max-width: 860px){
.hero-formbar{ border-radius: var(--r-lg); padding: 1.2rem clamp(18px,4vw,26px); }
.hero-formbar form{ flex-direction:column; align-items:stretch; gap:.4rem; }
.hero-formbar__field{ border-left:none; border-top:1px solid var(--line); padding:.2rem 0; }
.hero-formbar__field:first-child{ border-top:none; }
.hero-formbar__submit{ width:100%; margin-top:.7rem; }
}
.form-card{
background: var(--white);
border-radius: var(--r-lg);
padding: clamp(24px, 3vw, 34px);
box-shadow: var(--sh-3);
border: 1px solid rgba(255,255,255,.6);
}
.form-card__title{ font-size:1.28rem; font-family: var(--font-display); font-weight:500; letter-spacing:-.01em; }
.form-card__sub{ margin-top:.45rem; font-size:.92rem; color: var(--ink-55); line-height:1.55; }
.form-card form{ margin-top: 1.5rem; display:grid; gap: .95rem; }
.form-card .btn{ margin-top:.3rem; }
.form-note{
margin-top:1.1rem; display:flex; align-items:flex-start; gap:.55rem;
font-size:.79rem; color: var(--ink-55); line-height:1.5;
}
.form-note svg{ flex:none; margin-top:2px; color: var(--copper); }
.form-consent{
margin-top:.7rem;
font-size:.75rem; color: var(--ink-55); line-height:1.5;
}
.form-consent--bar{
margin: .55rem 1.7rem .25rem;
text-align:center;
}
@media (max-width: 860px){
.form-consent--bar{ margin-inline: 0; text-align:left; }
}
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-70); }
.field input, .field select, .field textarea{
width:100%; font: inherit; font-size:.95rem; color: var(--ink);
padding: .82rem .95rem; min-height:50px;
background: var(--cream-hi);
border:1px solid var(--line);
border-radius: var(--r-sm);
transition: border-color var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e), background var(--t-fast) var(--e);
appearance:none;
}
.field textarea{ min-height:118px; resize:vertical; line-height:1.6; }
.field select{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239F7046' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position: right 1rem center; padding-right:2.6rem; cursor:pointer;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-40); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color: rgba(60,49,45,.22); }
.field input:focus, .field select:focus, .field textarea:focus{
outline:none; background: var(--white);
border-color: var(--copper);
box-shadow: 0 0 0 3px rgba(159,112,70,.14);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.95rem; }
@media (pointer: coarse){
.field input, .field select, .field textarea,
.hero-formbar__field input, .hero-formbar__field select{ font-size:16px; }
}
.hero .anim{ opacity:0; transform: translateY(14px); animation: hero-in .6s var(--e-out) forwards; }
.hero .anim-1{ animation-delay:.06s } .hero .anim-2{ animation-delay:.13s }
.hero .anim-3{ animation-delay:.20s } .hero .anim-4{ animation-delay:.27s }
.hero .anim-5{ animation-delay:.34s }
@keyframes hero-in{ to{ opacity:1; transform:none; } }
.projects-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom: clamp(32px, 4vw, 52px); }
.p-card{
position:relative; display:flex; flex-direction:column;
background: var(--white);
border-radius: var(--r-lg);
overflow:hidden;
border:1px solid var(--line-soft);
box-shadow: var(--sh-1);
transition: transform var(--t-hover) var(--e), box-shadow var(--t-hover) var(--e);
height:100%;
}
.p-card__media{ position:relative; overflow:hidden; aspect-ratio: 16/11; background: var(--sand); }
.p-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--e-out); }
@media (hover: hover) and (pointer: fine){
.p-card:hover{ transform: translateY(-6px); box-shadow: var(--sh-3); }
.p-card:hover .p-card__media img{ transform: scale(1.05); }
}
.p-card__tags{ position:absolute; left:14px; right:14px; top:14px; display:flex; gap:.45rem; flex-wrap:wrap; align-items:flex-start; }
.tag{
display:inline-flex; align-items:center; gap:.35rem;
padding:.4rem .75rem; font-size:.73rem; font-weight:600; letter-spacing:.03em;
border-radius: var(--r-pill);
background: rgba(255,255,255,.93);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: var(--brown);
box-shadow: 0 2px 10px rgba(60,49,45,.13);
}
.tag--price{ background: var(--copper); color: var(--white); margin-left:auto; }
.tag--state{ background: rgba(44,35,32,.86); color:#fff; }
.p-card__body{ padding: clamp(20px, 2.2vw, 26px); display:flex; flex-direction:column; flex:1; }
.p-card__name{ font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight:500; }
.p-card__meta{ margin-top:.6rem; display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:.83rem; color: var(--ink-55); }
.p-card__meta span{ display:inline-flex; align-items:center; gap:.35rem; }
.p-card__meta svg{ color: var(--copper); flex:none; }
.p-card__text{ margin-top:.9rem; font-size:.93rem; color: var(--ink-70); line-height:1.62; }
.p-card__foot{ margin-top:auto; padding-top:1.35rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.p-card__price{ font-family: var(--font-display); font-size:1.12rem; font-weight:500; color: var(--brown); }
.p-card__price small{ display:block; font-family: var(--font-sans); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-40); margin-bottom:.1rem; }
.p-card__go{
width:44px; height:44px; flex:none; border-radius: var(--r-pill);
display:grid; place-items:center;
background: var(--cream); color: var(--copper);
transition: background var(--t-hover) var(--e), color var(--t-hover) var(--e), transform var(--t-hover) var(--e);
}
@media (hover: hover) and (pointer: fine){
.p-card:hover .p-card__go{ background: var(--copper); color: var(--white); transform: translateX(3px); }
}
.p-card__link{ position:absolute; inset:0; z-index:2; }
.p-card--brand{
align-items:center; justify-content:center; text-align:center;
padding: clamp(28px, 3vw, 40px);
background: linear-gradient(155deg, var(--brown) 0%, var(--copper-dark) 100%);
}
.p-card--brand .p-card__mark{
position:absolute; z-index:0; pointer-events:none; inset:auto auto auto auto;
top:50%; left:50%; width: clamp(150px, 18vw, 220px); height:auto;
transform: translate(-50%,-50%);
filter: brightness(0) invert(1); opacity:.07;
}
.p-card--brand .p-card__logo{
position:relative; z-index:1; width: clamp(120px, 11vw, 148px); height:auto;
margin-bottom: 1.2rem;
}
.p-card--brand .p-card__name{ position:relative; z-index:1; color: var(--white); }
.p-card--brand .p-card__text{
position:relative; z-index:1; margin-top:.7rem; max-width:30ch;
font-size:.93rem; line-height:1.62; color: rgba(255,255,255,.8);
}
.p-card--brand .p-card__cta{
position:relative; z-index:1; margin-top:1.6rem;
display:inline-flex; align-items:center; gap:.5rem;
font-family: var(--font-sans); font-weight:600; font-size:.85rem;
padding:.8rem 1.4rem; border-radius: var(--r-pill);
background: var(--white); color: var(--brown);
transition: transform var(--t-hover) var(--e), box-shadow var(--t-hover) var(--e);
}
.p-card--brand .p-card__cta svg{ color: var(--copper); }
@media (hover: hover) and (pointer: fine){
.p-card--brand:hover{ border-color: rgba(255,255,255,.18); }
.p-card--brand:hover .p-card__cta{ transform: translateX(3px); box-shadow: var(--sh-2); }
}
.swipe-hint{
display:none; align-items:center; gap:.5rem; justify-content:center;
margin-top:1.1rem; font-size:.8rem; color: var(--ink-40);
}
.p-grid{ display:grid; gap: clamp(18px, 2vw, 26px); grid-template-columns: repeat(6, 1fr); }
.p-grid > *{ grid-column: span 2; }
.p-grid > .is-feature{ grid-column: span 3; }
.p-grid > .is-half{ grid-column: span 3; }
.is-feature .p-card__media, .is-half .p-card__media{ aspect-ratio: 16/9.6; }
.is-feature .p-card__name, .is-half .p-card__name{ font-size: clamp(1.4rem, 1.18rem + .85vw, 1.82rem); }
.is-feature .p-card__text, .is-half .p-card__text{ font-size:.98rem; }
.is-feature .p-card__price, .is-half .p-card__price{ font-size:1.22rem; }
.zonas{ display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(28px, 4vw, 64px); align-items:center; }
.zonas__tabs{ display:flex; flex-direction:column; gap:.55rem; margin-top:2rem; }
.zona-tab{
position:relative; width:100%; text-align:left;
display:flex; align-items:center; gap:1rem;
padding: 1.05rem 1.2rem;
background: transparent; border:1px solid var(--line); border-radius: var(--r-md);
cursor:pointer;
transition: background var(--t-hover) var(--e), border-color var(--t-hover) var(--e),
transform var(--t-hover) var(--e), box-shadow var(--t) var(--e);
}
@media (hover: hover) and (pointer: fine){
.zona-tab:hover{ border-color: rgba(159,112,70,.4); transform: translateX(3px); }
}
.zona-tab[aria-selected="true"]{ background: var(--white); border-color: transparent; box-shadow: var(--sh-2); }
.zona-tab__num{ font-family: var(--font-display); font-size:1rem; color: var(--copper); opacity:.55; flex:none; width:26px; transition: opacity var(--t-fast) var(--e); }
.zona-tab[aria-selected="true"] .zona-tab__num{ opacity:1; }
.zona-tab__name{ font-weight:600; font-size:1.02rem; }
.zona-tab__arrow{ margin-left:auto; color: var(--copper); opacity:0; transform: translateX(-6px); transition: opacity var(--t-fast) var(--e), transform var(--t-fast) var(--e); flex:none; }
.zona-tab[aria-selected="true"] .zona-tab__arrow{ opacity:1; transform:none; }
.zonas__panels{ position:relative; }
.zona-panel{
position:absolute; inset:0;
opacity:0; visibility:hidden; transform: translateY(10px);
transition: opacity .16s var(--e), visibility 0s linear .16s, transform 0s linear .16s;
pointer-events:none;
}
.zona-panel.is-active{
position:relative; opacity:1; visibility:visible; transform:none; pointer-events:auto;
transition: opacity .34s var(--e-out) .14s, transform .34s var(--e-out) .14s, visibility 0s linear .14s;
}
.zona-panel__media{ position:relative; border-radius: var(--r-lg); overflow:hidden; aspect-ratio: 4/3.7; box-shadow: var(--sh-2); background: var(--sand); }
.zona-panel__media img{ width:100%; height:100%; object-fit:cover; }
.zona-panel__media::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(44,35,32,.12) 0%, rgba(44,35,32,0) 30%);
}
.zona-panel__caption{
position:absolute; z-index:2; left:0; right:0; bottom:0;
padding: clamp(72px, 9vw, 108px) clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px);
color:var(--white);
background: linear-gradient(180deg, rgba(44,35,32,0) 0%, rgba(44,35,32,.62) 34%, rgba(44,35,32,.93) 72%);
}
.zona-panel__caption h3{ font-family: var(--font-display); font-weight:500; font-size: clamp(1.35rem,1.1rem + 1vw,1.8rem); }
.zona-panel__caption p{ margin-top:.6rem; color: rgba(255,255,255,.84); font-size:.96rem; max-width: 48ch; }
.zona-panel__caption .btn{ margin-top:1.3rem; }
.zona-badge{
display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.85rem;
padding:.35rem .8rem; border-radius:var(--r-pill);
background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border:1px solid rgba(255,255,255,.24);
font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--white);
}
.eventos-grid{
display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
gap: clamp(18px, 2vw, 26px);
margin-top: clamp(34px, 4vw, 52px);
}
.evento{
position:relative; display:flex; flex-direction:column; justify-content:flex-end;
aspect-ratio: 4/5; overflow:hidden;
border-radius: var(--r-lg); border:1px solid var(--line-soft);
box-shadow: var(--sh-1); background: var(--sand);
transition: transform var(--t-hover) var(--e), box-shadow var(--t-hover) var(--e);
}
@media (hover: hover) and (pointer: fine){
.evento:hover{ transform: translateY(-6px); box-shadow: var(--sh-3); }
}
.evento__body{ position:relative; z-index:2; padding: clamp(18px, 1.8vw, 24px); color: var(--white); }
.evento__badge{
display:inline-flex; align-items:center; gap:.4rem;
padding:.36rem .8rem; border-radius: var(--r-pill);
background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
font-size:.68rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
color: rgba(255,255,255,.9);
}
.evento__badge--proximo{ background: var(--copper); border-color: transparent; color: var(--white); }
.evento__name{
margin-top:.75rem; font-family: var(--font-display); font-weight:500;
font-size: clamp(1.1rem, .98rem + .45vw, 1.3rem); color: var(--white);
}
.evento__meta, .evento__text{
margin:.45rem 0 0; font-size:.83rem; line-height:1.55; color: rgba(255,255,255,.74);
}
.evento__cta{
margin-top:1.05rem; display:inline-flex; align-items:center; gap:.5rem;
font-size:.84rem; font-weight:600; color: var(--copper-soft);
transition: color var(--t-hover) var(--e);
}
.evento__cta .ico{ transition: transform var(--t-hover) var(--e); }
.evento__link{ position:absolute; inset:0; z-index:3; }
@media (hover: hover) and (pointer: fine){
.evento:hover .evento__cta{ color: var(--white); }
.evento:hover .evento__cta .ico{ transform: translateX(5px); }
}
.evento__pieza{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter: grayscale(1) brightness(.94) contrast(.92);
transition: filter var(--t-slow) var(--e), transform .6s var(--e-out);
}
.evento--hecho::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background: linear-gradient(180deg,
rgba(28,22,20,.10) 0%, rgba(28,22,20,.02) 26%,
rgba(28,22,20,.62) 48%, rgba(28,22,20,.93) 63%, rgba(28,22,20,1) 82%);
}
@media (hover: hover) and (pointer: fine){
.evento--hecho:hover .evento__pieza{ filter: grayscale(.12) brightness(1) contrast(1); transform: scale(1.045); }
}
.evento--agendado{ border-color: rgba(159,112,70,.55); box-shadow: 0 0 0 1px rgba(159,112,70,.28), var(--sh-2); }
.evento--agendado .evento__pieza{ filter:none; }
.evento--agendado::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background: linear-gradient(180deg,
rgba(28,22,20,.12) 0%, rgba(28,22,20,.04) 16%,
rgba(28,22,20,.58) 31%, rgba(28,22,20,.92) 45%, rgba(28,22,20,1) 62%);
}
.evento--agendado .evento__text{ margin-top:.35rem; }
@media (hover: hover) and (pointer: fine){
.evento--agendado:hover .evento__pieza{ transform: scale(1.045); }
}
.evento--proximo{
background: linear-gradient(158deg, var(--brown) 0%, var(--brown-deep) 58%, #231b18 100%);
border-color: rgba(255,255,255,.09);
}
.evento--proximo::before{
content:""; position:absolute; z-index:0; top:-28%; right:-24%;
width:78%; aspect-ratio:1; border-radius:50%; pointer-events:none;
background: radial-gradient(circle, rgba(159,112,70,.42) 0%, rgba(159,112,70,0) 68%);
transition: transform var(--t-slow) var(--e), opacity var(--t-slow) var(--e);
}
.evento__mark{
position:absolute; z-index:0; left:50%; top:42%; width: min(68%, 200px); height:auto;
transform: translate(-50%,-50%);
filter: brightness(0) invert(1); opacity:.055; pointer-events:none;
}
.evento__glyph{
position:absolute; z-index:1; left: clamp(18px, 1.8vw, 24px); top: clamp(14px, 1.6vw, 22px);
font-family: var(--font-display); font-weight:600; line-height:.9;
font-size: clamp(4.6rem, 7vw, 6.4rem);
color: transparent; -webkit-text-stroke: 1.5px rgba(198,165,131,.5);
pointer-events:none;
transition: -webkit-text-stroke-color var(--t-slow) var(--e), transform var(--t-slow) var(--e);
}
@media (hover: hover) and (pointer: fine){
.evento--proximo:hover::before{ transform: scale(1.18); opacity:.85; }
.evento--proximo:hover .evento__glyph{ -webkit-text-stroke-color: rgba(198,165,131,.85); transform: translateY(-3px); }
}
.flybuy{
margin-top: clamp(40px, 5vw, 64px);
padding: clamp(22px, 3vw, 40px);
border-radius: var(--r-lg);
background: linear-gradient(158deg, var(--brown) 0%, var(--brown-deep) 70%);
color: var(--white);
}
.flybuy__head{ display:flex; gap: clamp(14px, 2vw, 22px); align-items:flex-start; }
.flybuy__icon{
flex:none; display:grid; place-items:center; width:52px; height:52px;
border-radius:50%; background: var(--copper); color: var(--white);
}
.flybuy__title{ margin:0; font-family: var(--font-display); font-weight:600; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); color: var(--white); }
.flybuy__lead{ margin:.4rem 0 0; max-width: 62ch; color: rgba(255,255,255,.74); font-size:.95rem; }
.flybuy__grid{
display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
gap: clamp(14px, 2vw, 22px); margin-top: clamp(22px, 3vw, 32px);
}
.flybuy__col{
padding: clamp(18px, 2vw, 26px); border-radius: var(--r-md);
background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.flybuy__col h4{ margin:0 0 .9rem; font-size:1rem; font-weight:600; }
.flybuy__col--si h4{ color:#8FD3A6; }
.flybuy__col--no h4{ color:#F0A39A; }
.flybuy__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.flybuy__col li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; line-height:1.5; color: rgba(255,255,255,.84); }
.flybuy__col li svg{ flex:none; margin-top:.2rem; }
.flybuy__col--si li svg{ color:#8FD3A6; }
.flybuy__col--no li svg{ color:#F0A39A; }
.flybuy__col strong{ color: var(--white); }
.flybuy__note{
margin: clamp(16px, 2vw, 22px) 0 0; padding: 1rem 1.2rem;
border-radius: var(--r-md); border-left:3px solid var(--copper-soft);
background: rgba(159,112,70,.16);
font-size:.88rem; line-height:1.6; color: rgba(255,255,255,.84);
}
.flybuy__note strong{ color: var(--copper-soft); }
@media (max-width: 720px){
.flybuy__grid{ grid-template-columns: 1fr; }
.flybuy__head{ flex-direction:column; }
}
.evento-landing__intro{
display:grid; grid-template-columns: minmax(0, 300px) minmax(0,1fr);
gap: clamp(22px, 3vw, 40px); align-items:center;
}
.evento-landing__pieza{ width:100%; height:auto; border-radius: var(--r-md); box-shadow: var(--sh-2); }
.evento-landing__video{ border-radius: var(--r-md); overflow:hidden; background: var(--brown-deep); box-shadow: var(--sh-2); }
.evento-landing__video video{ display:block; width:100%; height:auto; aspect-ratio: 9/16; object-fit:cover; }
.evento-landing__date{
display:inline-flex; align-items:center; gap:.45rem;
padding:.36rem .8rem; border-radius: var(--r-pill);
background: var(--copper); color: var(--white);
font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.incluye{
display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
gap: clamp(12px, 1.6vw, 18px); margin-top:1.4rem;
}
.incluye__item{
padding: clamp(18px, 2vw, 24px); border-radius: var(--r-md);
background: var(--cream); border:1px solid var(--line-soft);
}
.incluye__icon{
display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
background: var(--white); color: var(--copper); box-shadow: var(--sh-1);
}
.incluye__item h3{ margin-top:1rem; font-size:1.02rem; font-weight:600; }
.incluye__item p{ margin-top:.35rem; font-size:.9rem; line-height:1.55; color: var(--ink-70); }
.steps.steps--evento{ grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: clamp(22px, 3vw, 34px); margin-top:1.4rem; }
.steps.steps--evento::before, .steps--evento .steps__progress{ display:none; }
.steps.is-in .step:nth-of-type(4) .step__num{ transition-delay:1.02s; animation-delay:1.02s; }
.evento-registro{
display:grid; grid-template-columns: auto minmax(0,1fr); align-items:center;
gap: clamp(20px, 3vw, 36px); margin-top: clamp(38px, 4.5vw, 60px);
padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-lg);
background: var(--cream); border:1px solid var(--line-soft);
}
.evento-registro__qr{ display:block; width:196px; height:auto; border-radius: var(--r-md); box-shadow: var(--sh-1); }
.evento-registro__txt{ margin-top:.7rem; font-size:.95rem; line-height:1.6; color: var(--ink-70); }
.evento-registro .btn{ margin-top:1.2rem; }
@media (max-width: 720px){
.evento-landing__intro{ grid-template-columns: 1fr; }
.evento-landing__video, .evento-landing__pieza{ max-width: 360px; width:100%; margin-inline:auto; }
.incluye, .steps.steps--evento{ grid-template-columns: 1fr; }
.evento-registro{ grid-template-columns: 1fr; }
.evento-registro__qr{ order:1; width:147px; }
}
.evento-popup{
padding:0; border:0; background:transparent; max-width:none; max-height:none;
width: min(440px, calc(100vw - 24px));
width: min(440px, calc(100vw - 24px), calc((100dvh - 254px) * .75));
overflow:visible; color: var(--white);
}
.evento-popup::backdrop{ background: rgba(20,15,13,.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.evento-popup[open]{ animation: popup-in var(--t-slow) var(--e-out); }
.evento-popup[open]::backdrop{ animation: popup-fade var(--t-slow) var(--e-out); }
@keyframes popup-in{ from{ opacity:0; transform: translateY(16px) scale(.97); } }
@keyframes popup-fade{ from{ opacity:0; } }
.evento-popup__card{
position:relative; overflow:hidden; border-radius: var(--r-lg);
background: var(--brown-deep);
box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 40px 90px -20px rgba(0,0,0,.7);
}
.evento-popup__track{
display:flex; overflow-x:auto; overflow-y:hidden;
scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
scrollbar-width:none;
}
.evento-popup__track::-webkit-scrollbar{ display:none; }
.evento-popup__slide{
--pp-bg: linear-gradient(165deg, #3a2f2b 0%, var(--brown-deep) 65%, #221b18 100%);
--pp-luz: radial-gradient(90% 60% at 100% 0%, rgba(198,165,131,.16) 0%, transparent 70%);
--pp-acc: var(--copper-soft);
--pp-acc-glow: rgba(198,165,131,.6);
--pp-cal-top: var(--copper); --pp-cal-bg: var(--cream-hi); --pp-cal-fg: var(--brown);
--pp-btn: var(--grad-copper); --pp-btn-fg: var(--white); --pp-btn-sh: var(--sh-copper);
flex: 0 0 100%; min-width:0; display:flex; flex-direction:column;
scroll-snap-align:start; scroll-snap-stop:always;
}
.evento-popup__slide--show{
--pp-bg: linear-gradient(165deg, #22593a 0%, #133a22 60%, #0d2716 100%);
--pp-luz: radial-gradient(90% 60% at 100% 0%, rgba(255,210,63,.16) 0%, transparent 70%);
--pp-acc: #ffd23f;
--pp-acc-glow: rgba(255,210,63,.6);
--pp-cal-top: #e0262b; --pp-cal-bg: var(--white); --pp-cal-fg: #10301b;
--pp-btn: linear-gradient(140deg, #ffe066 0%, #ffd23f 50%, #f4b400 100%);
--pp-btn-fg: #10301b; --pp-btn-sh: 0 10px 26px -10px rgba(255,200,40,.55);
}
.evento-popup__pieza{
position:relative; display:block; flex:none; overflow:hidden;
aspect-ratio: 4 / 5; background:#000;
}
.evento-popup__pieza--video{
aspect-ratio: 9 / 16; cursor:pointer;
max-height: calc(100vh - 254px); max-height: calc(100dvh - 254px);
}
.evento-popup__pieza--video .evento-popup__poster,
.evento-popup__pieza--video video{ object-position: 50% 42%; }
.evento-popup__pieza img,
.evento-popup__pieza--video video{
position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;
}
.evento-popup__sonido{
position:absolute; left:12px; bottom:12px; z-index:1;
display:inline-flex; align-items:center; gap:8px;
height:38px; min-width:38px; padding: 0 14px 0 11px; white-space:nowrap;
border-radius: var(--r-pill); border:1px solid rgba(255,255,255,.3); cursor:pointer;
background: rgba(16,12,10,.58); color: var(--white); font-size:.78rem; font-weight:600;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
animation: sonido-pulso 2s var(--e-out) infinite;
transition: background var(--t-hover) var(--e), transform var(--t-press) var(--e);
}
.evento-popup__sonido:hover{ background: rgba(16,12,10,.85); }
.evento-popup__sonido:active{ transform: scale(.95); }
.evento-popup__sonido svg{ flex:none; }
.evento-popup__sonido svg + svg, .evento-popup__eq{ display:none; }
.evento-popup__sonido.is-on{ padding: 0 12px 0 11px; animation:none; }
.evento-popup__sonido.is-on svg:first-child{ display:none; }
.evento-popup__sonido.is-on svg + svg{ display:block; }
.evento-popup__sonido.is-on .evento-popup__eq{ display:inline-flex; }
.evento-popup__sonido.is-on [data-popup-sonido-txt]{
position:absolute; width:1px; height:1px; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0);
}
.evento-popup__eq{ align-items:flex-end; gap:2px; height:12px; }
.evento-popup__eq i{
width:3px; height:100%; border-radius:2px; background: var(--pp-acc);
transform-origin: 50% 100%; animation: pp-eq .9s ease-in-out infinite;
}
.evento-popup__eq i:nth-child(2){ animation-delay:-.6s; }
.evento-popup__eq i:nth-child(3){ animation-delay:-.3s; }
@keyframes pp-eq{ 0%, 100%{ transform: scaleY(.3); } 50%{ transform: scaleY(1); } }
@keyframes sonido-pulso{
0%{ box-shadow: 0 0 0 0 var(--pp-acc-glow); }
70%, 100%{ box-shadow: 0 0 0 12px transparent; }
}
.evento-popup__body{
flex:1; display:grid; grid-template-columns: auto minmax(0,1fr);
grid-template-areas: "cal head" "info info" "act act";
align-content:center; column-gap:12px;
padding: 14px 16px 16px;
background-image: var(--grain), var(--pp-luz), var(--pp-bg);
background-size: 160px 160px, auto, auto;
background-blend-mode: overlay, normal, normal;
}
.evento-popup__cal{
grid-area:cal; align-self:start; margin:0; width:54px; overflow:hidden;
border-radius:12px; text-align:center; line-height:1; text-transform:uppercase;
background: var(--pp-cal-bg); color: var(--pp-cal-fg);
box-shadow: 0 8px 20px -6px rgba(0,0,0,.45);
}
.evento-popup__cal span{ display:block; font-size:.6rem; font-weight:700; letter-spacing:.1em; }
.evento-popup__cal span:first-child{ padding:4px 0 3px; background: var(--pp-cal-top); color: var(--white); }
.evento-popup__cal strong{ display:block; padding-top:4px; font-size:1.45rem; font-weight:700; letter-spacing:-.03em; }
.evento-popup__cal span:last-child{ padding: 2px 0 6px; }
.evento-popup__head{ grid-area:head; min-width:0; }
.evento-popup__kicker{
display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin:0;
font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color: var(--pp-acc);
}
.evento-popup__kicker > span:first-child{ display:inline-flex; align-items:center; gap:7px; }
.evento-popup__kicker > span:first-child::before{
content:""; flex:none; width:7px; height:7px; border-radius:50%;
background: currentColor; animation: pp-vivo 1.8s var(--e-out) infinite;
}
@keyframes pp-vivo{
0%{ box-shadow: 0 0 0 0 var(--pp-acc-glow); }
70%, 100%{ box-shadow: 0 0 0 6px transparent; }
}
.evento-popup__faltan{ color: var(--white); }
.evento-popup__faltan::before{ content:"·"; margin-right:8px; color: var(--pp-acc); }
.evento-popup__faltan:empty{ display:none; }
.evento-popup__title{
margin: 5px 0 0; font-size:1.06rem; font-weight:700; line-height:1.2;
color: var(--white); text-wrap: balance;
}
.evento-popup__title span{ color: var(--pp-acc); }
.evento-popup__info{
grid-area:info; display:grid; gap:3px; margin-top:12px; min-width:0;
font-size:.78rem; line-height:1.35; color: rgba(255,255,255,.8);
}
.evento-popup__info li{ display:flex; align-items:flex-start; gap:7px; min-width:0; }
.evento-popup__info svg{ flex:none; width:14px; height:14px; margin-top:.1em; color: var(--pp-acc); }
.evento-popup__fecha{
position:absolute; width:1px; height:1px; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
.evento-popup__actions{
grid-area:act; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap: 8px 16px; margin-top:14px;
}
.evento-popup__actions .btn{
flex: 1 1 auto; min-height:46px; padding:.75rem 1.2rem; font-weight:700;
background: var(--pp-btn); color: var(--pp-btn-fg); box-shadow: var(--pp-btn-sh);
}
.evento-popup__actions .btn:hover{ background: var(--pp-btn); filter: brightness(1.06); }
.evento-popup__terms{
font-size:.8rem; font-weight:600; color: rgba(255,255,255,.8);
text-decoration:underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset:3px;
transition: color var(--t-hover) var(--e), text-decoration-color var(--t-hover) var(--e);
}
.evento-popup__terms:hover{ color: var(--white); text-decoration-color: currentColor; }
.evento-popup__close{
position:absolute; top:10px; right:10px; z-index:2;
display:grid; place-items:center; width:38px; height:38px; padding:0;
border-radius:50%; border:1px solid rgba(255,255,255,.3); cursor:pointer;
background: rgba(16,12,10,.58); color: var(--white);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transition: background var(--t-hover) var(--e), transform var(--t-press) var(--e);
}
.evento-popup__close:hover{ background: rgba(16,12,10,.85); }
.evento-popup__close:active{ transform: scale(.94); }
.evento-popup__nav{
position:absolute; top:17px; left:14px; right:60px; z-index:3;
display:flex; align-items:center; gap:12px;
}
.evento-popup__nav[hidden]{ display:none; }
.evento-popup__arrow{
display:none; place-items:center; width:40px; height:40px; padding:0;
border-radius:50%; border:1px solid rgba(255,255,255,.3); cursor:pointer;
background: rgba(255,255,255,.06); color: var(--white);
transition: background var(--t-hover) var(--e), opacity var(--t-hover) var(--e), transform var(--t-press) var(--e);
}
.evento-popup__arrow:hover:not(:disabled){ background: rgba(255,255,255,.16); }
.evento-popup__arrow:active:not(:disabled){ transform: scale(.94); }
.evento-popup__arrow:disabled{ opacity:.3; cursor:default; }
.evento-popup__dots{ flex:1; display:flex; align-items:center; gap:6px; }
.evento-popup__dot{
flex:1; display:flex; align-items:center; justify-content:center;
height:24px; padding:0; border:0; background:transparent; cursor:pointer;
}
.evento-popup__dot::before{
content:""; display:block; width:100%; height:3px; border-radius: var(--r-pill);
background: rgba(255,255,255,.42); box-shadow: 0 1px 3px rgba(0,0,0,.3);
transition: width var(--t-hover) var(--e), background var(--t-hover) var(--e);
}
.evento-popup__dot[aria-current="true"]::before{ background: var(--white); }
.evento-popup[open] .evento-popup__body > *{ animation: pp-sube .5s var(--e-out) both; }
.evento-popup[open] .evento-popup__head{ animation-delay:.06s; }
.evento-popup[open] .evento-popup__info{ animation-delay:.12s; }
.evento-popup[open] .evento-popup__actions{ animation-delay:.18s; }
@keyframes pp-sube{ from{ opacity:0; transform: translateY(10px); } }
@media (min-width: 900px) and (min-height: 560px){
.evento-popup{ width: min(900px, calc(100vw - 64px)); }
.evento-popup__slide{ flex-direction:row; }
.evento-popup__pieza{ height: min(620px, calc(100vh - 140px)); height: min(620px, calc(100dvh - 140px)); }
.evento-popup__body{
grid-template-areas: "head head" "cal info" "act act";
column-gap:16px; row-gap:28px;
padding: 56px clamp(28px, 3.4vw, 44px) 44px;
}
.evento-popup__pieza--video{ max-height:none; }
.evento-popup__kicker{ font-size:.72rem; letter-spacing:.14em; gap:8px 12px; }
.evento-popup__faltan{
padding: 4px 10px; border-radius: var(--r-pill); letter-spacing:.06em;
background: rgba(255,255,255,.12);
}
.evento-popup__faltan::before{ content:none; }
.evento-popup__title{
margin-top:16px; font-size: clamp(2rem, 1.2rem + 1.5vw, 2.6rem); line-height:1;
letter-spacing:-.015em; text-transform:uppercase;
}
.evento-popup__title span{ display:block; margin-top:.5rem; font-size:.42em; letter-spacing:.1em; }
.evento-popup__cal{ width:66px; border-radius:14px; }
.evento-popup__cal span{ font-size:.66rem; }
.evento-popup__cal span:first-child{ padding:5px 0 4px; }
.evento-popup__cal strong{ padding-top:6px; font-size:1.9rem; }
.evento-popup__cal span:last-child{ padding: 3px 0 8px; }
.evento-popup__info{ align-self:center; gap:7px; margin:0; font-size:.88rem; }
.evento-popup__info svg{ width:16px; height:16px; margin-top:.05em; }
.evento-popup__fecha{
position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto;
font-weight:600; color: var(--white);
}
.evento-popup__actions{ flex-direction:column; align-items:stretch; gap:14px; margin:6px 0 0; }
.evento-popup__actions .btn{ flex:none; min-height:54px; font-size:.95rem; }
.evento-popup__terms{ align-self:center; font-size:.85rem; }
.evento-popup__nav{ position:static; justify-content:center; margin-top:18px; }
.evento-popup__arrow{ display:grid; }
.evento-popup__dots{ flex:none; gap:0; }
.evento-popup__dot{ flex:none; width:24px; }
.evento-popup__dot::before{ width:8px; height:8px; background: rgba(255,255,255,.38); box-shadow:none; }
.evento-popup__dot[aria-current="true"]::before{ width:22px; }
}
@media (min-width: 560px) and (max-height: 559px){
.evento-popup{ width: min(760px, calc(100vw - 24px)); }
.evento-popup__slide{ flex-direction:row; }
.evento-popup__pieza{ height: calc(100vh - 24px); height: calc(100dvh - 24px); }
.evento-popup__pieza--video{ max-height:none; }
.evento-popup__body{ padding: 48px 20px 18px; }
}
body.popup-open{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
.evento-popup[open], .evento-popup[open]::backdrop,
.evento-popup[open] .evento-popup__body > *{ animation:none; }
.evento-popup__dot::before{ transition:none; }
.evento-popup__sonido, .evento-popup__eq i,
.evento-popup__kicker > span:first-child::before{ animation:none; }
}
.artistas{
--verde:#1f5230; --verde-deep:#10301b; --amarillo:#ffd23f;
display:grid; overflow:hidden; border-radius: var(--r-lg);
margin-top: clamp(38px, 4.5vw, 60px);
background: linear-gradient(160deg, var(--verde) 0%, var(--verde-deep) 100%);
color: var(--white); box-shadow: var(--sh-2);
}
.artistas__foto{ display:block; width:100%; height:auto; object-fit:cover; object-position: 50% 0; }
.artistas__body{ padding: clamp(22px, 3vw, 36px); }
.artistas__eyebrow{
display:flex; align-items:center; gap:.5rem; margin:0;
font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color: var(--amarillo);
}
.artistas__title{
margin-top:.7rem; font-family: var(--font-sans); font-weight:700;
font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); line-height:1; letter-spacing:-.01em;
text-transform:uppercase; color: var(--amarillo);
}
.artistas__title span{
display:block; margin-bottom:.45rem;
font-size: clamp(.82rem, .76rem + .2vw, .92rem); line-height:1.3; letter-spacing:.08em;
color: var(--white);
}
.artistas__bio p{ margin-top:.9rem; font-size:.95rem; line-height:1.65; color: rgba(255,255,255,.82); }
.artistas__bio strong{ color: var(--white); }
.artistas__player{
margin-top:1.3rem; min-height:152px; border-radius:12px; overflow:hidden;
background: rgba(0,0,0,.22);
}
.artistas__player iframe{ display:block; width:100%; height:152px; border:0; }
.artistas__video{
display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem;
font-size:.88rem; font-weight:600; color: rgba(255,255,255,.88);
text-decoration:underline; text-underline-offset:3px;
}
.artistas__video:hover{ color: var(--white); }
.artistas__video .ico{ transition: transform var(--t-hover) var(--e); }
@media (hover: hover) and (pointer: fine){
.artistas__video:hover .ico{ transform: translateX(4px); }
}
.artistas__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
@media (min-width: 900px){
.artistas--wide{ grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
.artistas--wide .artistas__foto{ height:100%; }
.artistas--wide .artistas__body{ align-self:center; }
}
.benefits{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.86fr); gap: clamp(30px, 4.5vw, 70px); align-items:center; }
.benefits__list{ margin-top:2.2rem; display:grid; gap:.2rem; }
.benefit{
display:flex; gap:1.1rem; padding:1.35rem 0;
border-top:1px solid var(--line);
}
.benefit:last-child{ border-bottom:1px solid var(--line); }
.benefit__ico{
flex:none; width:46px; height:46px; border-radius:var(--r-sm);
display:grid; place-items:center;
background: var(--white); color: var(--copper);
border:1px solid var(--line-soft);
box-shadow: var(--sh-1);
}
.benefit h3{ font-size:1.06rem; font-weight:600; }
.benefit p{ margin-top:.4rem; font-size:.93rem; color: var(--ink-70); line-height:1.62; }
.benefits__media{ position:relative; border-radius: var(--r-lg); overflow:hidden; aspect-ratio: 4/4.6; box-shadow: var(--sh-2); background: var(--sand); }
.benefits__media img{ width:100%; height:100%; object-fit:cover; }
.about{ display:grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); gap: clamp(32px, 4.5vw, 72px); align-items:center; }
.about__media{ position:relative; isolation:isolate; }
.about__media img.photo{ position:relative; z-index:1; border-radius: var(--r-lg); box-shadow: var(--sh-2); width:100%; aspect-ratio: 4/3.4; object-fit:cover; object-position: center 22%; }
.about__facts{ margin-top:1.7rem; display:grid; gap:1.15rem; }
.about__fact{ display:flex; align-items:flex-start; gap:.9rem; }
.about__fact-ico{
flex:none; width:40px; height:40px; margin-top:.1rem;
display:grid; place-items:center; border-radius: var(--r-pill);
background: var(--cream); color: var(--copper);
}
.about__fact h3{ font-size:.98rem; font-weight:600; color: var(--brown); }
.about__fact p{ margin-top:.2rem; font-size:.87rem; color: var(--ink-70); line-height:1.55; }
.about__quote{
margin-top:1.9rem; padding: 1.5rem 1.7rem;
background: var(--cream); border-radius: var(--r-md);
border-left:3px solid var(--copper);
font-family: var(--font-display); font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem);
font-weight:400; line-height:1.46; color: var(--brown);
}
.about__quote::before{ content:"“"; color: var(--copper); }
.about__quote::after{ content:"”"; color: var(--copper); }
.about__actions{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.85rem; }
.egp{ position:relative; background: var(--brown-deep); color: var(--white); overflow:hidden; }
.egp::before{
content:""; position:absolute; left:-6%; top:-40%; width:46%; aspect-ratio:1;
border-radius:50%; background: radial-gradient(circle, rgba(159,112,70,.30) 0%, rgba(159,112,70,0) 68%);
pointer-events:none;
}
.egp__grid{ position:relative; display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(32px, 5vw, 68px); align-items:center; }
.egp .eyebrow{ color: var(--copper-soft); }
.egp .eyebrow::before{ background: var(--copper-soft); }
.egp h2{ color: var(--white); }
.egp p{ color: rgba(255,255,255,.75); margin-top:1.1rem; max-width: 52ch; }
.egp__actions{ margin-top:1.9rem; display:flex; flex-wrap:wrap; gap:.85rem; }
.egp__points{ margin-top:1.9rem; display:flex; flex-wrap:wrap; gap:.55rem; }
.egp__points li{
padding:.42rem .9rem; border-radius:var(--r-pill);
border:1px solid rgba(198,165,131,.32); background: rgba(159,112,70,.12);
font-size:.82rem; color: rgba(255,255,255,.86);
}
.egp__media{ border-radius: var(--r-md); overflow:hidden; box-shadow: var(--sh-3); }
.egp__media img{ width:100%; }
.egp-hero{
position:relative; overflow:hidden;
background: var(--brown-deep); color: var(--white);
padding: clamp(94px, 9vw, 118px) 0 clamp(40px, 4.5vw, 60px);
}
.egp-hero__glow{
position:absolute; left:-12%; top:-32%; width:62%; aspect-ratio:1;
border-radius:50%; pointer-events:none;
background: radial-gradient(circle, rgba(159,112,70,.34) 0%, rgba(159,112,70,0) 66%);
}
.egp-hero__grid{
position:relative; display:grid;
grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
gap: clamp(34px, 5vw, 72px); align-items:center;
}
.hero-back.egp-hero__back{ display:flex; margin-bottom:1.4rem; }
.egp-hero__eyebrow{ color: var(--copper-soft); margin-bottom:1.3rem; }
.egp-hero__eyebrow::before{ background: var(--copper-soft); }
.egp-hero__eyebrow span{ display:inline-block; }
.egp-hero__title{
font-size: clamp(2.1rem, 1.4rem + 3.1vw, 3.4rem);
line-height:1.06; letter-spacing:-.032em; font-weight:700; color: var(--white);
}
.egp-hero__title span{ display:block; }
.egp-hero__title .is-copper{ color: var(--copper-soft); }
.egp-hero__lead{
margin-top:1.25rem; max-width:44ch;
font-size: clamp(.98rem, .94rem + .25vw, 1.08rem); line-height:1.62;
color: rgba(255,255,255,.78);
}
.egp-hero__rule{ display:block; width:56px; height:2px; background: var(--copper-soft); margin-top:1.4rem; opacity:.85; }
.egp-hero__actions{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.egp-hero__points{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; }
.egp-hero__points li{
display:inline-flex; align-items:center; gap:.5rem;
font-size:.9rem; color: rgba(255,255,255,.8);
}
.egp-hero__points svg{ color: var(--copper-soft); flex:none; }
.egp-hero__media{ position:relative; max-width: 430px; margin-left:auto; }
.egp-hero__frame{
position:relative; border-radius: var(--r-lg); overflow:hidden;
aspect-ratio: 4/5; background: var(--brown-soft);
box-shadow: 0 34px 80px -30px rgba(0,0,0,.75);
border:1px solid rgba(255,255,255,.1);
}
.egp-hero__frame img{ width:100%; height:100%; object-fit:cover; object-position: 36% center; }
.egp-hero__badge{
position:absolute; left:-18px; bottom:34px;
padding:.95rem 1.3rem; border-radius: var(--r-md);
background: rgba(30,23,21,.82);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border:1px solid rgba(198,165,131,.34);
box-shadow: 0 20px 44px -18px rgba(0,0,0,.7);
animation: egp-badge-float 5.5s var(--e-in-out) infinite;
}
.egp-hero__badge span{
display:block; font-size:.68rem; font-weight:600; letter-spacing:.1em;
text-transform:uppercase; color: rgba(255,255,255,.6);
}
.egp-hero__badge strong{
display:block; margin-top:.3rem;
font-family: var(--font-display); font-size:1.42rem; font-weight:600;
letter-spacing:-.02em; color: var(--copper-soft);
}
.egp-hero__badge em{ font-style:normal; font-size:.86rem; opacity:.75; }
@keyframes egp-badge-float{
0%, 100%{ transform: translateY(0); }
50%{ transform: translateY(-9px); }
}
.egp-quick{ background: var(--cream-hi); padding: clamp(34px, 4.4vw, 56px) 0; }
.egp-quick__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.egp-quick__item{ display:flex; gap:1rem; align-items:flex-start; }
.egp-quick__item + .egp-quick__item{ padding-left: clamp(20px, 3vw, 44px); border-left:1px solid var(--line); }
.egp-quick__ico{
flex:none; width:48px; height:48px; border-radius: var(--r-pill);
display:grid; place-items:center; color: var(--copper);
background: var(--white); border:1px solid var(--line);
}
.egp-quick__item h3{ font-size:1.04rem; font-weight:600; }
.egp-quick__item p{ margin-top:.4rem; font-size:.92rem; color: var(--ink-70); line-height:1.6; }
.egp-flow{
margin-top: clamp(34px, 4vw, 54px);
display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 28px);
}
.egp-flow__item{
position:relative; padding: clamp(24px, 2.6vw, 32px);
background: var(--white); border:1px solid var(--line); border-radius: var(--r-md);
transition: transform var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e), border-color var(--t-fast) var(--e);
}
@media (hover: hover) and (pointer: fine){
.egp-flow__item:hover{ transform: translateY(-4px); box-shadow: var(--sh-2); border-color: rgba(159,112,70,.3); }
}
.egp-flow__num{
display:inline-block; font-family: var(--font-display); font-size:.82rem; font-weight:600;
letter-spacing:.1em; color: var(--copper);
padding:.3rem .65rem; border-radius: var(--r-pill);
background: rgba(159,112,70,.1); border:1px solid rgba(159,112,70,.2);
}
.egp-flow__item h3{ margin-top:1.1rem; font-size:1.08rem; font-weight:600; }
.egp-flow__item p{ margin-top:.55rem; font-size:.93rem; color: var(--ink-70); line-height:1.65; }
.egp-proys{
margin-top: clamp(30px, 3.5vw, 46px);
display:grid; grid-template-columns: repeat(2, 1fr); gap:.15rem 2.6rem;
}
.egp-proy{
display:flex; align-items:center; gap:1rem;
padding: 1.15rem .2rem; border-bottom:1px solid var(--line);
transition: color var(--t-fast) var(--e), padding var(--t-fast) var(--e);
}
.egp-proy__name{ font-family: var(--font-display); font-size:1.06rem; font-weight:600; }
.egp-proy__meta{ font-size:.86rem; color: var(--ink-55); margin-left:auto; text-align:right; }
.egp-proy__arrow{ display:inline-flex; color: var(--copper); transition: transform var(--t-fast) var(--e); }
@media (hover: hover) and (pointer: fine){
.egp-proy:hover{ color: var(--copper); padding-left:.7rem; }
.egp-proy:hover .egp-proy__arrow{ transform: translateX(4px); }
}
.cards-3.egp-benefits{ grid-template-columns: repeat(2, 1fr); }
.egp-note{
margin-top: 1.8rem; padding-top:1.4rem; border-top:1px solid var(--line);
font-size:.86rem; color: var(--ink-55); line-height:1.65;
}
.egp-hero .anim{ opacity:0; transform: translateY(14px); animation: hero-in .6s var(--e-out) forwards; }
.egp-hero .anim-1{ animation-delay:.06s } .egp-hero .anim-2{ animation-delay:.13s }
.egp-hero .anim-3{ animation-delay:.20s } .egp-hero .anim-4{ animation-delay:.27s }
.egp-hero .anim-5{ animation-delay:.34s }
@media (max-width: 980px){
.egp-hero__grid{ grid-template-columns:1fr; gap: clamp(30px,5vw,44px); }
.egp-hero__media{ max-width: 400px; margin-inline:auto; }
.egp-hero__badge{ left:auto; right:-10px; bottom:18px; }
.egp-quick__grid, .egp-flow{ grid-template-columns: repeat(2, 1fr); }
.egp-quick__item + .egp-quick__item{ padding-left:0; border-left:0; }
}
@media (max-width: 620px){
.egp-quick__grid, .egp-flow, .egp-proys{ grid-template-columns:1fr; }
.cards-3.egp-benefits{ grid-template-columns:1fr; }
.egp-hero__actions .btn{ width:100%; }
.egp-proy__meta{ display:none; }
}
.steps{
--steps-gap: clamp(22px, 3vw, 44px);
--steps-end: calc((100% - 2 * var(--steps-gap)) / 3 - 66px);
position:relative; margin-top: clamp(38px, 4.5vw, 62px);
display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--steps-gap);
}
.steps::before{
content:""; position:absolute; left:33px; right: var(--steps-end); top:33px; height:2px;
background: var(--line);
}
.steps__progress{
position:absolute; left:33px; top:33px; height:2px;
width: calc(100% - 33px - var(--steps-end));
background: var(--copper);
box-shadow: 0 0 10px rgba(159,112,70,.55);
transform: scaleX(0); transform-origin: left center;
transition: transform 1.1s var(--e-in-out);
}
.steps.is-in .steps__progress{ transform: scaleX(1); }
.step{ position:relative; padding-top: 0; }
.step__num{
position:relative; z-index:1;
width:66px; height:66px; border-radius:var(--r-pill);
display:grid; place-items:center;
background: var(--white); border:1px solid var(--line);
font-family: var(--font-display); font-size:1.32rem; font-weight:500; color: var(--copper);
transition: background var(--t-slow) var(--e), color var(--t-slow) var(--e), border-color var(--t-slow) var(--e), box-shadow var(--t-slow) var(--e);
}
.steps.is-in .step__num{
background: var(--copper); color: var(--white); border-color: var(--copper);
box-shadow: 0 0 0 8px rgba(159,112,70,.16);
animation: stepPop .5s var(--e-out) backwards;
}
.steps.is-in .step:nth-of-type(2) .step__num{ transition-delay:.34s; animation-delay:.34s; }
.steps.is-in .step:nth-of-type(3) .step__num{ transition-delay:.68s; animation-delay:.68s; }
@keyframes stepPop{
0%{ transform: scale(1); }
50%{ transform: scale(1.08); }
100%{ transform: scale(1); }
}
.step h3{ margin-top:1.5rem; font-size:1.14rem; font-weight:600; }
.step p{ margin-top:.6rem; font-size:.94rem; color: var(--ink-70); line-height:1.65; }
.cta-final{ position:relative; overflow:hidden; background: var(--brown-deep); color: var(--white); }
.cta-final__media{ position:absolute; inset:0; }
.cta-final__media img{ width:100%; height:100%; object-fit:cover; }
.cta-final__media::after{
content:""; position:absolute; inset:0;
background:
radial-gradient(120% 90% at 50% 45%, rgba(44,35,32,.72) 0%, rgba(44,35,32,.9) 100%),
linear-gradient(180deg, rgba(44,35,32,.88) 0%, rgba(44,35,32,.72) 50%, rgba(44,35,32,.92) 100%);
}
.cta-final .wrap{ position:relative; z-index:1; text-align:center; }
.cta-final h2{ color: var(--white); max-width: 20ch; margin-inline:auto; text-wrap:balance; }
.cta-final p{ margin-top:1.2rem; color: rgba(255,255,255,.78); max-width: 56ch; margin-inline:auto; }
.cta-final__actions{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }
.cta-final__meta{
margin-top:2.8rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.16);
display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(1.2rem, 4vw, 3.2rem);
font-size:.9rem; color: rgba(255,255,255,.72);
}
.cta-final__meta a{ display:inline-flex; align-items:center; gap:.5rem; transition: color var(--t-fast) var(--e); }
.cta-final__meta a:hover{ color: var(--copper-soft); }
.cta-final__meta svg{ color: var(--copper-soft); flex:none; }
.site-footer{ background: var(--brown); color: rgba(255,255,255,.7); padding: clamp(56px,6vw,84px) 0 0; }
.footer-grid{
display:grid; gap: clamp(26px, 3vw, 44px);
grid-template-columns: 1.5fr .8fr 1.15fr 1.3fr 1.3fr;
padding-bottom: clamp(40px,5vw,60px);
}
.footer-col h4{
font-size:.75rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
color: var(--white); margin-bottom:1.2rem; white-space:nowrap;
}
.footer-col ul{ display:grid; gap:.6rem; }
.footer-col a:not(.btn){ font-size:.92rem; transition: color var(--t-hover) var(--e), transform var(--t-hover) var(--e); display:inline-block; }
.footer-col a:not(.btn):hover{ color: var(--copper-soft); }
@media (hover: hover) and (pointer: fine){
.footer-col a:not(.btn):hover{ transform: translateX(3px); }
}
.footer-brand img{ height:38px; margin-bottom:1.3rem; }
.footer-brand p{ font-size:.92rem; line-height:1.68; max-width: 34ch; }
.footer-contact li{ display:flex; gap:.7rem; font-size:.92rem; line-height:1.55; }
.footer-contact svg{ flex:none; margin-top:4px; color: var(--copper-soft); }
@media (pointer: coarse){
.footer-col ul{ gap:.15rem; }
.footer-col a:not(.btn){ padding-block:.6rem; }
.footer-contact a{ display:inline-block; padding-block:.65rem; }
.footer-contact li:has(a) svg{ margin-top:15px; }
}
.footer-sub p{ font-size:.9rem; line-height:1.65; margin-bottom:1.2rem; }
.socials{ display:flex; gap:.55rem; margin-top:1.4rem; }
.socials a{
position:relative;
width:40px; height:40px; border-radius:var(--r-pill);
border:1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.8);
transition: background var(--t-hover) var(--e), color var(--t-hover) var(--e), border-color var(--t-hover) var(--e), transform var(--t-hover) var(--e);
}
.socials a svg{
position:absolute; top:50%; left:50%; width:17px; height:17px; margin:-8.5px 0 0 -8.5px;
}
.socials a:hover{ background: var(--copper); border-color: var(--copper); color: var(--white); }
@media (hover: hover) and (pointer: fine){
.socials a:hover{ transform: translateY(-2px); }
}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.12);
padding: 1.5rem 0; display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center; justify-content:space-between;
font-size:.83rem; color: rgba(255,255,255,.5);
}
.wa-float{
position:fixed; right: clamp(14px, 3vw, 26px); z-index:80;
bottom: calc(clamp(14px, 3vw, 26px) + env(safe-area-inset-bottom, 0px));
display:inline-flex; align-items:center; gap:.6rem;
padding:.8rem 1.15rem; border-radius: var(--r-pill);
background:#25D366; color:#fff; font-weight:600; font-size:.9rem;
box-shadow: 0 6px 22px rgba(37,211,102,.36);
transition: transform var(--t-hover) var(--e), box-shadow var(--t-hover) var(--e);
}
@media (hover: hover) and (pointer: fine){
.wa-float:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,211,102,.46); }
}
.wa-float:active{ transform: translateY(0) scale(.97); }
.wa-float svg{ flex:none; }
.wa-float span{ white-space:nowrap; }
.page-hero{
position:relative; overflow:hidden;
padding: clamp(96px, 11vw, 140px) 0 clamp(40px, 5vw, 60px);
background: var(--brown-deep); color: var(--white);
}
.page-hero__media{ position:absolute; inset:0; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; }
.page-hero__media::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(44,35,32,.86) 0%, rgba(44,35,32,.62) 50%, rgba(44,35,32,.8) 100%);
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ color:var(--white); max-width:16ch; text-wrap:balance; }
.page-hero p{ margin-top:1.1rem; color: rgba(255,255,255,.8); max-width: 58ch; }
.hero-back.post-hero__back{ display:flex; margin-bottom:1.3rem; }
.post-hero__cat{
display:inline-flex; margin-bottom:1rem;
background: rgba(159,112,70,.9); color:#fff;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.post-hero__title{
position:relative; padding-bottom:1.1rem; max-width:18ch;
text-shadow: 0 3px 14px rgba(0,0,0,.4);
opacity:0; transform:translateY(16px);
animation: page-hero-title-in .7s var(--e-out) .12s forwards;
}
.post-hero__title::after{
content:""; position:absolute; left:0; bottom:0;
width:56px; height:2px; background: var(--copper-soft); opacity:.9;
}
.post-body{ max-width: 66ch; }
.post-cta{ margin-top: clamp(28px,3.2vw,40px); display:flex; flex-wrap:wrap; gap:.8rem; }
.aside-card--project{ padding-top: clamp(20px,2.2vw,26px); }
.aside-project__media{
position:relative; border-radius: var(--r-md); overflow:hidden;
aspect-ratio: 16/10; background: var(--sand);
}
.aside-project__media img{ width:100%; height:100%; object-fit:cover; }
.aside-project__media .tag{ position:absolute; left:12px; top:12px; }
.aside-project__teaser{ margin-top:.7rem; font-size:.92rem; color: var(--ink-70); line-height:1.6; }
.aside-project__specs{ margin:1.2rem 0 0; display:grid; gap:.15rem; }
.aside-project__specs > div{
display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
padding:.65rem 0; border-bottom:1px solid var(--line);
}
.aside-project__specs > div:first-child{ border-top:1px solid var(--line); }
.aside-project__specs dt{ font-size:.73rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-40); }
.aside-project__specs dd{ margin:0; font-size:.95rem; font-weight:600; color: var(--brown); text-align:right; }
.aside-card--project .btn{ margin-top:1.3rem; }
@media (max-width: 900px){
.post-cta .btn{ width:100%; }
}
.hero-back{
display:inline-flex; align-items:center; justify-content:center;
width:42px; height:42px; border-radius:50%; flex:none;
background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border:1px solid rgba(255,255,255,.24); color: var(--white);
transition: background var(--t-fast) var(--e), border-color var(--t-fast) var(--e), transform var(--t-fast) var(--e);
}
@media (hover: hover) and (pointer: fine){
.hero-back:hover{ background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.4); transform: translateX(-3px); }
}
.project-hero{
display:flex; align-items:center;
min-height: clamp(520px, 62vw, 660px);
padding: clamp(96px, 11vw, 130px) 0 clamp(48px, 5vw, 64px);
}
.project-hero .page-hero__media::after{
background: linear-gradient(90deg,
rgba(18,13,10,.90) 0%, rgba(18,13,10,.76) 32%,
rgba(18,13,10,.4) 58%, rgba(18,13,10,.08) 82%, rgba(18,13,10,0) 100%);
}
.project-hero__body{ max-width: 640px; }
.project-hero__status{
display:inline-flex; align-items:center; gap:.6rem;
padding:.55rem 1rem; border-radius: var(--r-pill);
background: rgba(184,127,74,.32); border:1px solid rgba(255,255,255,.2);
-webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
color:#fff;
}
.project-hero__status::before{
content:""; width:7px; height:7px; border-radius:50%; flex:none;
background: var(--copper-soft); box-shadow: 0 0 10px rgba(240,176,107,.65);
}
.project-hero__title{
color:#fff; font-family: var(--font-display); font-weight:600; letter-spacing:-.025em;
font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.4rem); line-height:1.04;
margin-top:1.1rem; text-shadow: 0 4px 22px rgba(0,0,0,.35); text-wrap:balance;
}
.project-hero__lead{
margin-top:1rem; color: rgba(255,255,255,.86);
font-size:1.03rem; line-height:1.6; max-width:46ch;
text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.project-hero__stats{ display:flex; flex-wrap:wrap; margin-top:1.9rem; }
.project-hero__stat{
display:flex; align-items:center; gap:.7rem;
padding-right:1.6rem; margin-right:1.6rem;
border-right:1px solid rgba(255,255,255,.28);
}
.project-hero__stat:last-child{ border-right:0; padding-right:0; margin-right:0; }
.project-hero__stat .ico, .project-hero__stat svg{ color: var(--copper-soft); flex:none; }
.project-hero__stat small{
display:block; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color: rgba(255,255,255,.68); margin-bottom:.2rem;
}
.project-hero__stat strong{
display:block; font-family: var(--font-display); font-weight:600; font-size:1rem; color:#fff; white-space:nowrap;
}
.project-hero .hero__actions{ justify-content:flex-start; margin-top:1.9rem; }
.project-hero .anim{ opacity:0; transform:translateY(14px); animation: hero-in .6s var(--e-out) forwards; }
.project-hero .anim-1{ animation-delay:.05s }
.project-hero .anim-2{ animation-delay:.12s }
.project-hero .anim-3{ animation-delay:.19s }
.project-hero .anim-4{ animation-delay:.26s }
@media (max-width:640px){
.project-hero .page-hero__media::after{
background: linear-gradient(180deg,
rgba(18,13,10,.15) 0%, rgba(18,13,10,.55) 45%, rgba(18,13,10,.94) 100%);
}
.project-hero__stats{ gap:.9rem 0; }
.project-hero__stat{ border-right:0; padding-right:0; margin-right:1.3rem; }
}
.page-hero--sm{ padding: clamp(146px, 17vw, 210px) 0 clamp(66px, 7.2vw, 94px); }
.page-hero--sm .wrap{ text-align:center; }
.page-hero--sm .page-hero__media::after{
background: linear-gradient(180deg, rgba(18,13,10,.72) 0%, rgba(18,13,10,.5) 40%, rgba(18,13,10,.9) 100%);
}
.page-hero--team .page-hero__media img{ object-position: center 55%; }
.page-hero--team .page-hero__media::after{
background: linear-gradient(180deg, rgba(18,13,10,.28) 0%, rgba(18,13,10,.1) 40%, rgba(18,13,10,.45) 100%);
}
.page-hero--team{ padding: clamp(90px, 10vw, 140px) 0 clamp(122px, 14.2vw, 164px); }
.page-hero--team .wrap{ margin-left: clamp(120px, 28vw, 460px); }
.page-hero__title{
color:var(--white); font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
font-weight:600; letter-spacing:-.02em; max-width:none;
}
.page-hero__title.page-hero__title--copper{
position: relative;
display: block; width: fit-content;
padding-bottom: .5rem;
font-size: clamp(2.6rem, 1.7rem + 4.4vw, 4.6rem);
font-weight: 800;
color: #e5ad63;
filter: drop-shadow(0 3px 0 rgba(90,45,15,.35)) drop-shadow(0 10px 12px rgba(0,0,0,.40));
}
.page-hero__title.page-hero__title--copper .letter{
display:inline-block;
opacity:0; transform: translateY(.65em);
animation: letter-jump .5s cubic-bezier(.34,1.56,.64,1) forwards;
animation-delay: calc(.08s + var(--i, 0) * 40ms);
}
.page-hero__title.page-hero__title--copper::after{
content:"";
position:absolute; left:50%; bottom:0;
width:56px; height:2px; background: #e5ad63;
translate: -50% 0; opacity:0;
animation: title-line-in .4s var(--e-out) .95s forwards;
}
@supports (background-clip:text) or (-webkit-background-clip:text){
.page-hero__title.page-hero__title--copper,
.page-hero__title.page-hero__title--copper .letter{
background: linear-gradient(180deg,
#f7d29b 0%, #e5ad63 25%, #ba7c38 50%, #e4ad65 72%, #9b5e27 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
}
}
@keyframes page-hero-title-in{ to{ opacity:1; transform:none; } }
@keyframes letter-jump{ to{ opacity:1; transform:none; } }
@keyframes title-line-in{ to{ opacity:.9; } }
.page-hero--sm .page-hero__title.page-hero__title--copper{ margin-inline:auto; }
.page-hero--sm .crumbs{ justify-content:center; margin:.85rem 0 0; }
.crumbs{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:.82rem; color: rgba(255,255,255,.62); margin-bottom:1.4rem; }
.crumbs a{ transition: color var(--t-fast) var(--e); }
.crumbs a:hover{ color: var(--copper-soft); }
.crumbs span[aria-current]{ color: rgba(255,255,255,.9); }
.crumbs .sep{ opacity:.45; }
.project-layout{ display:grid; grid-template-columns: minmax(0,1fr) 360px; gap: clamp(28px, 3.5vw, 56px); align-items:start; }
.gallery{ display:grid; gap:12px; }
.gallery__hero, .gallery__thumbs > *{
border-radius: var(--r-md); overflow:hidden; background: var(--sand); min-width:0;
}
.gallery__hero{ aspect-ratio: 16/9; }
.gallery__thumbs{ display:flex; flex-wrap:wrap; gap:12px; }
.gallery__thumbs > *{ flex: 1 1 190px; aspect-ratio: 4/3; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--e-out); }
@media (hover: hover) and (pointer: fine){
.gallery__hero:hover img, .gallery__thumbs > *:hover img{ transform: scale(1.05); }
}
.spec-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; }
.spec{ background: var(--white); padding: 1.15rem 1.25rem; }
.spec dt{ font-size:.73rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-40); }
.spec dd{ margin:.4rem 0 0; font-size:1rem; font-weight:600; color: var(--brown); }
.why-list{ display:grid; gap:.15rem; }
.why-list li{ display:flex; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--line); font-size:.97rem; color: var(--ink-70); align-items:flex-start; }
.why-list li:first-child{ border-top:1px solid var(--line); }
.why-list svg{ flex:none; margin-top:4px; color: var(--copper); }
.aside-card{
background: var(--white); border:1px solid var(--line-soft); border-radius: var(--r-lg);
padding: clamp(22px,2.4vw,28px); box-shadow: var(--sh-2);
}
.aside-card + .aside-card{ margin-top:20px; }
.aside-sticky{ position:sticky; top: calc(var(--header-h) + 18px); }
.aside-card h3{ font-family: var(--font-display); font-weight:500; font-size:1.22rem; }
.aside-card .btn{ margin-top:1.2rem; }
.calc{
position:relative; overflow:hidden; max-width:600px;
background: var(--white); border:1px solid var(--line-soft); border-radius: var(--r-lg);
padding: clamp(22px,2.6vw,30px); box-shadow: var(--sh-2);
}
.calc::before{
content:""; position:absolute; left:0; right:0; top:0; height:3px; background: var(--grad-copper);
}
.calc__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.calc__top-label{ display:block; font-size:.73rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-40); }
.calc__top-value{ display:block; margin-top:.25rem; font-family: var(--font-display); font-weight:600; font-size:1.5rem; letter-spacing:-.02em; color: var(--brown); }
.calc__badge{
display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .8rem; border-radius: var(--r-pill);
background: rgba(159,112,70,.1); color: var(--copper-dark);
font-size:.76rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.calc__badge svg{ width:13px; height:13px; }
.calc__control{ margin-top: clamp(22px,2.4vw,28px); }
.calc__control-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; }
.calc__control-head label{ font-size:.76rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color: var(--ink-55); }
.calc__control-out{ display:flex; align-items:baseline; gap:.5rem; white-space:nowrap; }
.calc__control-out b{
font-size:.76rem; font-weight:700; color: var(--copper); padding:.16rem .45rem;
background: rgba(159,112,70,.1); border-radius: var(--r-xs);
}
.calc__control-out span{ font-family: var(--font-display); font-weight:600; font-size:1.12rem; color: var(--brown); }
.calc__scale{ display:flex; justify-content:space-between; margin-top:.55rem; font-size:.73rem; color: var(--ink-40); }
.calc input[type=range]{
--fill: 0%;
-webkit-appearance:none; appearance:none;
display:block; width:100%; margin-top:1rem; height:8px; border-radius: var(--r-pill);
cursor:pointer; outline:none; touch-action: pan-y;
background: linear-gradient(to right, var(--copper) var(--fill), var(--sand) var(--fill));
}
.calc input[type=range]:focus-visible{ box-shadow: 0 0 0 3px rgba(159,112,70,.22); }
.calc input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:26px; height:26px; border-radius:50%;
background: var(--white); border:2px solid var(--copper);
box-shadow: 0 2px 8px rgba(60,49,45,.18); cursor:grab;
transition: transform var(--t-hover) var(--e), box-shadow var(--t-hover) var(--e);
}
.calc input[type=range]::-moz-range-thumb{
width:26px; height:26px; border-radius:50%; box-sizing:border-box;
background: var(--white); border:2px solid var(--copper);
box-shadow: 0 2px 8px rgba(60,49,45,.18); cursor:grab;
}
@media (hover: hover) and (pointer: fine){
.calc input[type=range]:hover::-webkit-slider-thumb{ transform: scale(1.1); box-shadow: var(--sh-copper); }
}
.calc input[type=range]:active::-webkit-slider-thumb{ cursor:grabbing; transform: scale(1.14); box-shadow: var(--sh-copper); }
.calc input[type=range]::-moz-range-track{ height:8px; border-radius: var(--r-pill); background: transparent; }
.calc__result{
position:relative; overflow:hidden; margin-top: clamp(22px,2.4vw,28px); text-align:center;
padding: clamp(20px,2.4vw,26px); border-radius: var(--r-md);
background: var(--brown-deep); color: var(--white);
}
.calc__result::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(120% 90% at 50% 0%, rgba(159,112,70,.35), transparent 70%);
}
.calc__result > *{ position:relative; z-index:1; }
.calc__result-label{ display:block; font-size:.73rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--copper-soft); }
.calc__result-value{
display:block; margin-top:.4rem; font-family: var(--font-display); font-weight:600;
font-size: clamp(2rem, 1.5rem + 2.4vw, 2.7rem); letter-spacing:-.035em; line-height:1.05; color: var(--white);
font-variant-numeric: tabular-nums;
}
.calc__result-note{ display:block; margin-top:.5rem; font-size:.86rem; color: rgba(255,255,255,.72); }
.calc__rows{ margin-top: clamp(18px,2vw,22px); }
.calc__rows > div{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.78rem 0; border-bottom:1px solid var(--line-soft); }
.calc__rows > div:first-child{ border-top:1px solid var(--line-soft); }
.calc__rows dt{ font-size:.88rem; color: var(--ink-55); }
.calc__rows dd{ margin:0; font-size:.98rem; font-weight:600; color: var(--brown); white-space:nowrap; font-variant-numeric: tabular-nums; }
.calc__note{ margin-top:.9rem; font-size:.76rem; line-height:1.55; color: var(--ink-40); text-align:center; }
.calc .btn{ white-space:normal; text-align:center; }
@media (max-width: 480px){
.calc__top{ gap:.7rem; }
.calc__control-head{ flex-direction:column; align-items:flex-start; gap:.4rem; }
.calc__rows dt{ font-size:.83rem; }
.calc__rows dd{ font-size:.92rem; }
.calc .btn{ padding-left:1rem; padding-right:1rem; gap:.45rem; }
}
.cotiza{ max-width:680px; }
.cotiza [hidden]{ display:none !important; }
.cotiza__img{
position:relative; margin: calc(-1 * clamp(22px,2.6vw,30px)) calc(-1 * clamp(22px,2.6vw,30px)) clamp(20px,2.4vw,26px);
}
.cotiza__img img{ display:block; width:100%; height:auto; aspect-ratio: 1400/621; object-fit:cover; }
.cotiza__img figcaption{
position:absolute; right:10px; bottom:10px; padding:.22rem .55rem; border-radius: var(--r-xs);
background: rgba(28,22,20,.55); color: rgba(255,255,255,.88); font-size:.7rem;
}
.cotiza__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:.95rem; }
.cotiza__grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: clamp(18px,2vw,22px); }
.cotiza__field{ border:0; margin:0; padding:0; min-width:0; }
.cotiza__field legend{
padding:0; margin-bottom:.4rem;
font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-70);
}
.seg{
display:grid; grid-template-columns: 1fr 1fr; gap:4px; padding:4px;
background: var(--cream-hi); border:1px solid var(--line); border-radius: var(--r-sm);
}
.seg label{ position:relative; display:flex; cursor:pointer; }
.seg input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.seg span{
display:flex; align-items:center; justify-content:center; width:100%; min-height:42px;
padding:.45rem .5rem; border-radius: calc(var(--r-sm) - 4px); text-align:center; line-height:1.25;
font-size:.84rem; font-weight:600; color: var(--ink-55);
transition: background var(--t-fast) var(--e), color var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e);
}
.seg input:checked + span{ background: var(--white); color: var(--brown); box-shadow: 0 1px 4px rgba(60,49,45,.14), inset 0 0 0 1px rgba(159,112,70,.4); }
.seg input:focus-visible + span{ box-shadow: 0 0 0 3px rgba(159,112,70,.25); }
@media (hover: hover) and (pointer: fine){
.seg input:not(:checked):hover + span{ color: var(--brown); }
}
.cotiza__modelo{
margin-top: clamp(18px,2vw,22px); padding: 1rem 1.15rem;
border-radius: var(--r-md); background: var(--cream-hi); border:1px solid var(--line-soft);
}
.cotiza__modelo h3{ font-family: var(--font-display); font-weight:600; font-size:1.08rem; color: var(--brown); }
.cotiza__chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.cotiza__chips span{
padding:.26rem .6rem; border-radius: var(--r-pill); background: rgba(159,112,70,.1);
font-size:.76rem; font-weight:600; color: var(--copper-dark);
}
.cotiza__modelo p{ margin-top:.65rem; font-size:.88rem; line-height:1.6; color: var(--ink-70); }
.cotiza__modelo .cotiza__chips{ margin-top:.6rem; }
.cotiza__modelo .cotiza__lotes{ font-size:.8rem; color: var(--ink-55); }
.cotiza__plan{
list-style:none; margin:1rem 0 0; padding:.95rem 0 0; display:grid; gap:.55rem;
border-top:1px solid rgba(255,255,255,.14); text-align:left;
}
.cotiza__plan li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; font-size:.84rem; line-height:1.4; color: rgba(255,255,255,.7); }
.cotiza__plan strong{ font-weight:600; color: rgba(255,255,255,.92); }
.cotiza__plan b{ font-weight:600; color: var(--white); white-space:nowrap; font-variant-numeric: tabular-nums; }
.calc__rows .cotiza__total dt{ font-weight:700; color: var(--brown); }
.calc__rows .cotiza__total dd{ font-size:1.08rem; }
.cotiza__cond{ margin:1rem 0 0; padding-left:1.1rem; font-size:.73rem; line-height:1.55; color: var(--ink-40); }
.cotiza__cond li + li{ margin-top:.3rem; }
@media (max-width: 640px){
.cotiza__grid, .cotiza__grid--3{ grid-template-columns: 1fr; }
}
.mini-list{ display:grid; gap:.2rem; margin-top:1.1rem; }
.mini{ display:flex; gap:.9rem; align-items:center; padding:.75rem 0; border-top:1px solid var(--line-soft); transition: transform var(--t-hover) var(--e); }
@media (hover: hover) and (pointer: fine){
.mini:hover{ transform: translateX(4px); }
}
.mini__img{ width:64px; height:52px; flex:none; border-radius: var(--r-xs); overflow:hidden; background: var(--sand); }
.mini__img img{ width:100%; height:100%; object-fit:cover; }
.mini > span:last-child{ display:block; min-width:0; }
.mini__name{ display:block; font-size:.92rem; font-weight:600; line-height:1.3; }
.mini__meta{ display:block; font-size:.79rem; color: var(--ink-55); margin-top:.15rem; }
.mini__meta b{ color: var(--copper); font-weight:600; }
.map-embed{ border-radius: var(--r-md); overflow:hidden; border:1px solid var(--line); background: var(--sand); }
.map-embed iframe{ display:block; width:100%; height: 420px; border:0; }
.map-layout{ display:grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(16px,2vw,24px); align-items:start; }
.nearby-card{ border:1px solid var(--line); border-radius: var(--r-md); background: var(--white); padding: clamp(18px,2vw,22px); }
.nearby-card__title{ font-size:.73rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-40); }
.nearby-card__note{ margin-top:.9rem; font-size:.78rem; color: var(--ink-40); }
.nearby-list{ display:grid; gap:.15rem; margin-top:.9rem; }
.nearby-list li{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.75rem 0; border-top:1px solid var(--line); font-size:.9rem; color: var(--ink-70); }
.nearby-list li:first-child{ border-top:0; }
.nearby-list__place{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.nearby-list__place svg{ flex:none; color: var(--copper); }
.nearby-list__time{ flex:none; display:flex; align-items:center; gap:.4rem; font-weight:600; color: var(--brown); }
.nearby-list__time svg{ flex:none; opacity:.55; }
.team-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(16px,2vw,24px); }
.team-card{ border-radius: var(--r-lg); background: var(--sand); position:relative; }
.team-card__img{ aspect-ratio: 3/4; overflow:hidden; border-radius: var(--r-lg); }
.team-card__img img{ width:100%; height:100%; object-fit:cover; }
.team-card__body{
position:absolute; left:0; right:0; bottom:0; padding: 1.1rem 1.2rem;
background: linear-gradient(180deg, rgba(44,35,32,0) 0%, rgba(44,35,32,.86) 62%);
color: var(--white);
}
.team-card__body strong{ display:block; font-size:1rem; }
.team-card__body span{ font-size:.82rem; color: rgba(255,255,255,.72); }
.team-card__wa{
position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:var(--r-pill);
background: rgba(255,255,255,.92); color:#25D366;
opacity:0; transform: translateY(-6px);
transition: opacity var(--t-fast) var(--e), transform var(--t-fast) var(--e), background var(--t-hover) var(--e);
}
.team-card__wa svg{
position:absolute; top:50%; left:50%; width:17px; height:17px; margin:-8.5px 0 0 -8.5px;
}
.team-card:hover .team-card__wa, .team-card:focus-within .team-card__wa{ opacity:1; transform:none; }
.team-card__wa:hover{ background: #25D366; color:#fff; }
.cards-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.2vw,28px); }
.cards-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(18px,2.2vw,28px); }
.info-card{
background: var(--white); border:1px solid var(--line-soft); border-radius: var(--r-lg);
padding: clamp(24px,2.6vw,32px); box-shadow: var(--sh-1); height:100%;
transition: transform var(--t-hover) var(--e), box-shadow var(--t-hover) var(--e);
}
@media (hover: hover) and (pointer: fine){
.info-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-2); }
}
.info-card__ico{
width:48px; height:48px; border-radius: var(--r-sm); display:grid; place-items:center;
background: var(--cream); color: var(--copper); margin-bottom:1.3rem;
}
.info-card h3{ font-size:1.1rem; font-weight:600; }
.info-card p{ margin-top:.65rem; font-size:.94rem; color: var(--ink-70); line-height:1.65; }
.info-card .display{ font-size:1.9rem; color: var(--copper); }
.faq{ display:grid; gap:.15rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
list-style:none; cursor:pointer; padding:1.25rem 2.6rem 1.25rem 0; position:relative;
font-size:1.03rem; font-weight:600; color: var(--brown);
transition: color var(--t-fast) var(--e);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color: var(--copper); }
.faq summary::after{
content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
border-right:1.8px solid var(--copper); border-bottom:1.8px solid var(--copper);
transform: translateY(-70%) rotate(45deg);
transition: transform var(--t) var(--e-in-out);
}
.faq details[open] summary::after{ transform: translateY(-25%) rotate(225deg); }
.faq .faq__body{ padding: 0 2.6rem 1.4rem 0; color: var(--ink-70); font-size:.96rem; line-height:1.7; }
.faq details[open] .faq__body{ animation: faq-in .3s var(--e-out); }
@keyframes faq-in{ from{ opacity:0; transform: translateY(-4px);} to{opacity:1; transform:none;} }
@supports (interpolate-size: allow-keywords){
:root{ interpolate-size: allow-keywords; }
.faq details::details-content{
block-size: 0; overflow: clip;
transition: block-size .32s var(--e-in-out), content-visibility .32s allow-discrete;
}
.faq details[open]::details-content{ block-size: auto; }
}
.contact-grid{ display:grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(30px,4vw,60px); align-items:start; }
.contact-item{ display:flex; gap:1.1rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.contact-item:first-child{ border-top:1px solid var(--line); }
.contact-item__ico{ flex:none; width:46px; height:46px; border-radius:var(--r-sm); display:grid; place-items:center; background: var(--cream); color: var(--copper); }
.contact-item h3{ font-size:1rem; font-weight:600; }
.contact-item p{ margin-top:.35rem; font-size:.93rem; color: var(--ink-70); line-height:1.6; }
.contact-item a{ color: var(--copper); font-weight:600; transition: color var(--t-fast) var(--e); }
.contact-item a:hover{ color: var(--copper-dark); }
.page-hero--sm p{ margin-inline:auto; }
.featured-post{
position:relative; display:grid; grid-template-columns: 1.06fr .94fr;
background: var(--white); border:1px solid var(--line-soft); border-radius: var(--r-lg);
overflow:hidden; box-shadow: var(--sh-1);
transition: box-shadow var(--t-hover) var(--e), transform var(--t-hover) var(--e);
}
@media (hover: hover) and (pointer: fine){
.featured-post:hover{ transform: translateY(-4px); box-shadow: var(--sh-3); }
}
.featured-post__media{ position:relative; overflow:hidden; background: var(--sand); min-height: 300px; }
.featured-post__media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--e-out); }
.featured-post__media::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: linear-gradient(90deg, rgba(20,15,12,.16) 0%, rgba(20,15,12,0) 34%);
}
@media (hover: hover) and (pointer: fine){
.featured-post:hover .featured-post__media img{ transform: scale(1.05); }
}
.featured-post__cat{ position:absolute; left:16px; top:16px; z-index:1; }
.featured-post__body{
position:relative; padding: clamp(24px,2.8vw,40px);
display:flex; flex-direction:column; justify-content:center;
background: linear-gradient(180deg, var(--white) 0%, var(--cream-hi) 100%);
}
.featured-post__body::before{
content:""; width:32px; height:2px; border-radius:2px; background: var(--copper);
margin-bottom:1rem; opacity:.85;
}
.featured-post__body h2{
margin-top:.65rem; font-family: var(--font-display); font-weight:500;
font-size: clamp(1.3rem,1.05rem + 1vw,1.78rem); line-height:1.18; text-wrap:balance;
}
.featured-post__text{
margin:.85rem 0 0; font-size:.95rem; color: var(--ink-70); line-height:1.65;
flex:none;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.featured-post__cta{ margin-top:1.35rem; align-self:flex-start; }
@media (hover: hover) and (pointer: fine){
.featured-post:hover .featured-post__cta{ --btn-bg: var(--copper-dark); box-shadow: var(--sh-2); }
.featured-post:hover .featured-post__cta .ico{ transform: translateX(4px); }
}
.featured-post__link{ position:absolute; inset:0; z-index:2; }
.blog-toolbar{
display:flex; align-items:flex-end; justify-content:space-between;
flex-wrap:wrap; gap:1.2rem 1.6rem; margin-bottom: clamp(28px,3vw,40px);
}
.blog-filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.blog-filter{
padding:.65rem 1.2rem; border-radius: var(--r-pill); border:1px solid var(--line);
background: var(--white); font-size:.85rem; font-weight:600; color: var(--ink-70);
cursor:pointer;
transition: background var(--t-hover) var(--e), color var(--t-hover) var(--e),
border-color var(--t-hover) var(--e), transform var(--t-hover) var(--e);
}
@media (hover: hover) and (pointer: fine){
.blog-filter:hover{ border-color: rgba(159,112,70,.45); transform: translateY(-1px); }
}
.blog-filter[aria-pressed="true"]{ background: var(--copper); border-color: var(--copper); color: var(--white); }
.blog-grid{
--blog-cols: 3;
display:grid; grid-template-columns: repeat(var(--blog-cols), minmax(0,1fr));
gap: clamp(22px,2.4vw,32px);
}
.blog-grid--related{ --blog-cols: 2; }
.blog-grid .post-card.is-hidden{ display:none; }
.post-card{
position:relative; display:flex; flex-direction:column; height:100%;
background: var(--white); border:1px solid var(--line-soft); border-radius: var(--r-lg);
overflow:hidden; box-shadow: var(--sh-1);
transition: transform var(--t-hover) var(--e), box-shadow var(--t-hover) var(--e);
}
.post-card__media{ position:relative; overflow:hidden; background: var(--sand); aspect-ratio: 16/11; }
.post-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--e-out); }
.post-card__media::after{
content:""; position:absolute; inset:0; opacity:0;
background: linear-gradient(180deg, rgba(20,15,12,0) 55%, rgba(20,15,12,.5) 100%);
transition: opacity var(--t-hover) var(--e);
}
.post-card__cat{ position:absolute; left:14px; top:14px; z-index:1; }
.media-play{
position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); z-index:1;
width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background: rgba(20,15,12,.42); color:#fff; backdrop-filter: blur(2px);
border:1.5px solid rgba(255,255,255,.75);
transition: transform var(--t-hover) var(--e), background var(--t-hover) var(--e);
}
.media-play svg{ margin-left:3px; }
@media (hover: hover) and (pointer: fine){
.post-card:hover .media-play,
.featured-post:hover .media-play{ transform: translate(-50%,-50%) scale(1.08); background: rgba(20,15,12,.6); }
}
.post-video{ margin: clamp(30px,3.6vw,46px) 0 0; }
.post-video video{
display:block; margin:0 auto; width:100%; max-width:400px; height:auto;
border-radius: var(--r-md); background: var(--brown); box-shadow: var(--sh-1);
}
.post-video figcaption{
margin:.9rem auto 0; max-width:400px; text-align:center;
font-size:.85rem; color: var(--ink-40);
}
@media (hover: hover) and (pointer: fine){
.post-card:hover{ transform: translateY(-6px); box-shadow: var(--sh-3); }
.post-card:hover .post-card__media img{ transform: scale(1.06); }
.post-card:hover .post-card__media::after{ opacity:1; }
.post-card:hover .post-card__cta{ color: var(--copper-dark); }
.post-card:hover .post-card__cta .ico{ transform: translateX(5px); }
}
.post-card__body{ padding: clamp(20px,2.2vw,26px); display:flex; flex-direction:column; flex:1; }
.post-card__date{ margin:0; font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--copper); }
.post-card__body h3{
margin-top:.7rem; font-family: var(--font-display); font-weight:500;
font-size: clamp(1.14rem,1rem + .6vw,1.36rem); line-height:1.24;
flex:none; height: calc(1.24em * 3);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card__text{
margin:.75rem 0 0; font-size:.93rem; color: var(--ink-70); line-height:1.62;
flex:none; height: calc(1.62em * 3);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card__cta{ margin-top:auto; padding-top:1.2rem; }
.post-card__link{ position:absolute; inset:0; z-index:2; }
.subscribe{ background: var(--sand); border-radius: var(--r-lg); padding: clamp(28px,3.4vw,48px); }
.subscribe__grid{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(22px,3vw,44px); align-items:center; }
.subscribe h2{ font-family: var(--font-display); font-weight:500; font-size: clamp(1.4rem,1.15rem + 1.1vw,2rem); }
.subscribe p{ margin-top:.8rem; color: var(--ink-70); font-size:.96rem; }
.subscribe form{ display:grid; gap:.85rem; }
[data-reveal]{
--reveal-y: 16px;
--reveal-dur: var(--t-enter);
--reveal-ease: var(--e-out);
opacity:0; transform: translateY(var(--reveal-y));
transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
transition-delay: var(--d, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform: translateX(-18px); }
[data-reveal="right"]{ transform: translateX(18px); }
[data-reveal="tilt"]{
transform: perspective(760px) rotateX(-20deg) translate3d(0, 24px, 0);
transform-origin: 50% 100%;
--reveal-dur: .8s;
}
.p-grid > [data-reveal],
.cards-3 > [data-reveal],
.cards-2 > [data-reveal],
.team-grid > [data-reveal],
.purpose__grid > [data-reveal],
.eventos-grid > [data-reveal],
[data-reveal].post-card{
--reveal-y: 34px;
--reveal-dur: .7s;
}
.eventos-grid > [data-reveal="left"]:not(.is-in){ transform: translateX(-34px); }
.eventos-grid > [data-reveal="right"]:not(.is-in){ transform: translateX(34px); }
.p-grid > [data-reveal]{
--reveal-y: 46px;
--reveal-dur: .75s;
--reveal-ease: var(--e-in-out);
}
.p-grid > [data-reveal="left"]:not(.is-in){ transform: translateX(-46px); }
.p-grid > [data-reveal="right"]:not(.is-in){ transform: translateX(46px); }
.parallax{ will-change: transform; }
@supports (animation-timeline: view()){
.parallax{
animation: parallax-y linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes parallax-y{
from{ transform: translate3d(0, -3.2%, 0) scale(1.09); }
to  { transform: translate3d(0,  3.2%, 0) scale(1.09); }
}
}
@media (max-width: 1220px) and (min-width: 1025px){
.header-inner{ gap: 1rem; }
.nav{ gap: clamp(.8rem, 1.5vw, 1.35rem); }
.nav a{ font-size:.78rem; letter-spacing:.055em; }
.site-header .header-cta .btn{ padding:.6rem 1rem; font-size:.79rem; }
}
@media (max-width: 1090px) and (min-width: 1025px){
.header-inner{ gap: .8rem; padding-inline: 26px; }
.nav{ gap: .72rem; }
.nav a{ font-size:.735rem; letter-spacing:.035em; }
.site-header .header-cta .btn{ padding:.55rem .9rem; font-size:.76rem; }
}
@media (max-width: 1100px){
.footer-grid{ grid-template-columns: 1.6fr 1fr 1.3fr; row-gap: 40px; }
.eventos-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.evento__glyph{ font-size: clamp(5.4rem, 10vw, 8rem); }
}
@media (max-width: 1024px){
:root{ --header-h: 72px; }
.nav, .header-cta{ display:none; }
.nav-toggle{ display:flex; }
.hero{ min-height:auto; padding-top: calc(var(--header-h) + 40px); }
.hero__media::after{
background:
linear-gradient(180deg, rgba(44,35,32,.72) 0%, rgba(44,35,32,.52) 34%, rgba(44,35,32,.66) 72%, rgba(44,35,32,.86) 100%);
}
.hero__copy{ max-width:none; }
.form-card{ max-width: 560px; }
.zonas, .benefits, .about, .egp__grid, .contact-grid, .subscribe__grid{ grid-template-columns: 1fr; }
.zonas > *, .benefits > *, .about > *, .egp__grid > *, .contact-grid > *, .subscribe__grid > *{ min-width:0; }
.benefits__media{ aspect-ratio: 16/10; order:-1; }
.about__media{ order:-1; }
.zonas__panels{ order:-1; }
.zona-panel{ position:relative; }
.zona-panel:not(.is-active){ display:none; }
.zonas__tabs{ flex-direction:row; overflow-x:auto; margin-top:1.6rem; padding-bottom:6px; scrollbar-width:none; min-width:0; }
.zonas__tabs::-webkit-scrollbar{ display:none; }
.zona-tab{ flex:none; width:auto; padding:.85rem 1.1rem; }
.zona-tab__arrow{ display:none; }
.project-layout{ grid-template-columns:1fr; }
.project-layout > *, .map-layout > *{ min-width:0; }
.aside-sticky{ position:static; }
.map-layout{ grid-template-columns:1fr; }
.cards-3{ grid-template-columns: repeat(2,1fr); }
.blog-grid{ --blog-cols: 2; }
}
@media (max-width: 860px){
.p-grid{ grid-template-columns: repeat(2,1fr); }
.p-grid > *, .p-grid > .is-feature, .p-grid > .is-half{ grid-column: span 1; }
.is-feature .p-card__media{ aspect-ratio:16/11; }
.steps{ grid-template-columns:1fr; gap:0; }
.steps::before{ left:33px; right:auto; top:33px; bottom:calc(2.4rem + 33px); width:2px; height:auto; }
.steps__progress{
left:33px; top:33px; width:2px; height:calc(100% - 66px - 2.4rem);
transform: scaleY(0); transform-origin: center top;
transition: transform 1.1s var(--e-in-out);
}
.steps.is-in .steps__progress{ transform: scaleY(1); }
.step{ display:grid; grid-template-columns: 66px 1fr; column-gap:1.4rem; padding-bottom:2.4rem; }
.step__num{ grid-row: span 2; }
.step h3{ margin-top:.7rem; }
.step p{ grid-column:2; }
.featured-post{ grid-template-columns:1fr; }
.featured-post__media{ min-height:0; aspect-ratio:16/9; }
.featured-post__media::after{
background: linear-gradient(180deg, rgba(20,15,12,0) 70%, rgba(20,15,12,.14) 100%);
}
}
@media (max-width: 620px){
body{ font-size:16px; }
.h1{ font-size: clamp(2rem, 7.4vw, 2.6rem); }
.h2{ font-size: clamp(1.65rem, 6.4vw, 2.15rem); }
.hero__actions .btn, .cta-final__actions .btn, .about__actions .btn, .egp__actions .btn{ width:100%; }
.field-row{ grid-template-columns:1fr; }
.cards-3, .cards-2, .team-grid{ grid-template-columns:1fr; }
.blog-grid{ --blog-cols: 1; }
.blog-toolbar{ align-items:flex-start; }
.footer-grid{ grid-template-columns:1fr; }
.footer-bottom{
justify-content:center; text-align:center;
padding-bottom: calc(1.5rem + 62px + env(safe-area-inset-bottom, 0px));
}
.wa-float span{ display:none; }
.subscribe{ padding:26px 20px; }
.map-embed iframe{ height: 320px; }
.p-grid{
display:flex; gap:16px; overflow-x:auto;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
scrollbar-width:none;
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
padding-bottom: 6px;
}
.p-grid::-webkit-scrollbar{ display:none; }
.p-grid > *{ flex: 0 0 82%; scroll-snap-align: center; }
.swipe-hint{ display:flex; }
.eventos-grid{
display:flex; gap:16px; overflow-x:auto;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
scrollbar-width:none;
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
padding-bottom: 6px;
}
.eventos-grid::-webkit-scrollbar{ display:none; }
.eventos-grid > *{ flex: 0 0 76%; scroll-snap-align: center; }
.p-grid > [data-reveal]:not(.is-in),
.eventos-grid > [data-reveal]:not(.is-in){ transform: translateY(var(--reveal-y)); }
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*, *::before, *::after{
animation-duration:.2s !important; animation-delay:0ms !important;
animation-iteration-count:1 !important;
transition-duration:.2s !important; transition-delay:0ms !important;
scroll-behavior:auto !important;
}
[data-reveal], .hero .anim, .project-hero .anim, .hero__title .word, .hero__text .word, .mobile-nav__links a, .page-hero__title--copper, .page-hero__title--copper .letter, .page-hero__title--copper::after{
opacity:1 !important; transform:none !important; animation:none !important;
}
.p-card:hover, .info-card:hover, .post-card:hover, .featured-post:hover, .zona-tab:hover,
.socials a:hover, .wa-float:hover, .mini:hover, .blog-filter:hover,
.footer-col a:not(.btn):hover, .btn:active, .btn:hover .ico,
.link-arrow:hover .ico{ transform:none !important; }
.p-card:hover .p-card__media img, .post-card:hover .post-card__media img,
.featured-post:hover .featured-post__media img,
.team-card:hover .team-card__img img,
.gallery__hero:hover img, .gallery__thumbs > *:hover img{ transform:none !important; }
.post-card:hover .post-card__cta .ico, .featured-post:hover .featured-post__cta .ico{ transform:none !important; }
.info-card--service:hover::before{ transform:none !important; }
.team-card, .team-card__img img, .team-card__wa, .team-card::after,
.team-card__body strong, .team-card__body span,
.purpose-card + .purpose-card::before, .purpose-card__ico, .purpose-card__num,
.purpose-card h3::after, .info-card--service .info-card__ico,
.info-card--service:hover .info-card__ico{
transform:none !important; opacity:1 !important;
}
.purpose::before{ animation:none !important; }
.purpose::after{ display:none !important; }
.steps__progress{ transform:none !important; }
.steps.is-in .step__num{ animation:none !important; }
.parallax{ animation:none !important; transform:none !important; }
.hero__slide{ animation:none !important; scale:1 !important; }
}
@media print{
.site-header, .mobile-nav, .wa-float, .cta-final, .egp{ display:none !important; }
}
:root{
--sh-1: 0 1px 2px rgba(60,49,45,.04), 0 6px 18px -6px rgba(60,49,45,.10);
--sh-2: 0 2px 4px rgba(60,49,45,.05), 0 18px 40px -14px rgba(60,49,45,.20);
--sh-3: 0 4px 8px rgba(60,49,45,.06), 0 34px 70px -22px rgba(60,49,45,.30);
--sh-copper: 0 10px 26px -10px rgba(159,112,70,.55);
--grad-copper: linear-gradient(140deg, #B0804F 0%, var(--copper) 46%, var(--copper-dark) 100%);
--grain: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.display{ font-weight: 500; letter-spacing: -.028em; }
.h1{ letter-spacing: -.034em; }
.h2{ letter-spacing: -.028em; }
h2.display, h1.display{ text-wrap: balance; }
.lead{ max-width: 62ch; }
.hl{
background-image: linear-gradient(color-mix(in srgb, currentColor 20%, transparent) 0 0);
background-size: 100% .035em;
background-repeat: no-repeat;
background-position: 0 100%;
padding-bottom: .06em;
}
.eyebrow{ gap:.55rem; }
.eyebrow::before{ width:20px; }
.eyebrow::after{
content:""; width:4px; height:4px; border-radius:50%;
background: currentColor; opacity:.55; order:-1; margin-right:-.2rem;
}
.eyebrow--center::after{ display:none; }
.section--cream{
background:
radial-gradient(120% 60% at 50% 0%, rgba(231,217,204,.55) 0%, rgba(231,217,204,0) 60%),
var(--cream);
}
.section--sand{
background:
radial-gradient(100% 55% at 85% 0%, rgba(198,165,131,.20) 0%, rgba(198,165,131,0) 62%),
linear-gradient(180deg, var(--cream) 0%, var(--cream-hi) 100%);
}
.btn{ letter-spacing:.012em; }
.btn--primary{ background: var(--grad-copper); box-shadow: var(--sh-copper); }
.btn--primary:hover{ background: var(--grad-copper); filter: brightness(1.06); }
@media (hover: hover) and (pointer: fine){
.btn--primary:hover{ box-shadow: 0 14px 32px -10px rgba(159,112,70,.62); }
.btn:hover{ box-shadow: var(--sh-2); }
}
.btn--outline{ --btn-bd: rgba(60,49,45,.18); backdrop-filter: blur(2px); }
.btn--ghost-light{ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(255,255,255,.06); }
.site-header.is-solid{
background: rgba(255,255,255,.86);
box-shadow: 0 1px 0 rgba(60,49,45,.06), 0 10px 30px -18px rgba(60,49,45,.35);
}
.nav a{ font-size:.8rem; letter-spacing:.1em; }
.hero__media::after{
background:
radial-gradient(60% 78% at 50% 50%, rgba(20,16,14,.72) 0%, rgba(20,16,14,.5) 45%, rgba(20,16,14,.22) 75%, rgba(20,16,14,.1) 100%),
linear-gradient(180deg, rgba(20,16,14,.5) 0%, rgba(20,16,14,.24) 24%, rgba(20,16,14,.3) 60%, rgba(20,16,14,.66) 100%);
}
.hero__media::before{
content:""; position:absolute; inset:0; z-index:10; pointer-events:none;
background-image: var(--grain); background-size:160px 160px;
opacity:.15; mix-blend-mode: overlay;
}
.hero__title{ letter-spacing:-.035em; text-shadow: 0 2px 20px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5); }
.hero__text{ color: rgba(255,255,255,.9); text-shadow: 0 2px 14px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.45); }
.form-card{
position:relative; overflow:hidden;
border:1px solid rgba(255,255,255,.7);
box-shadow: 0 4px 10px rgba(30,23,21,.10), 0 40px 80px -28px rgba(30,23,21,.55);
}
.form-card::before{
content:""; position:absolute; left:0; right:0; top:0; height:3px;
background: var(--grad-copper);
}
.form-card__title{ font-size:1.34rem; letter-spacing:-.015em; }
.field label{ font-size:.72rem; letter-spacing:.09em; color: var(--ink-55); }
.field input, .field select, .field textarea{ border-radius: 12px; }
.field input:focus, .field select:focus, .field textarea:focus{
box-shadow: 0 0 0 3px rgba(159,112,70,.16);
}
.p-card{
border:1px solid rgba(60,49,45,.06);
transition: transform .3s var(--e-out), box-shadow .3s var(--e-out), border-color .3s var(--e-out);
}
.p-card__media::after{
content:""; position:absolute; inset:auto 0 0 0; height:45%;
background: linear-gradient(180deg, rgba(44,35,32,0) 0%, rgba(44,35,32,.34) 100%);
opacity:.55; transition: opacity .4s var(--e-out); pointer-events:none;
}
@media (hover: hover) and (pointer: fine){
.p-card:hover{ transform: translateY(-8px); border-color: rgba(159,112,70,.22); }
.p-card:hover .p-card__media::after{ opacity:1; }
.p-card:hover .p-card__media img{ transform: scale(1.06); }
}
.tag{ padding:.42rem .8rem; font-size:.72rem; letter-spacing:.02em; box-shadow: 0 4px 14px -6px rgba(30,23,21,.5); }
.tag--state{ background: rgba(30,23,21,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.p-card__name{ letter-spacing:-.02em; }
.p-card__foot{ border-top:1px solid var(--line-soft); margin-top:auto; padding-top:1.2rem; }
.p-card__price{ font-size:1.18rem; color: var(--copper-dark); letter-spacing:-.01em; }
.p-card__go{ background: var(--cream); border:1px solid var(--line-soft); }
.p-grid{ gap: clamp(18px, 2vw, 24px); }
.zona-tab{ border-radius: 14px; }
.zona-tab[aria-selected="true"]{
background: var(--white);
box-shadow: var(--sh-2);
}
.zona-tab::before{
content:""; position:absolute; left:0; top:14%; bottom:14%; width:3px;
border-radius: 0 3px 3px 0; background: var(--grad-copper);
transform: scaleY(0); transform-origin: center; transition: transform var(--t) var(--e-out);
}
.zona-tab[aria-selected="true"]::before{ transform: scaleY(1); }
.zona-tab__name{ letter-spacing:-.005em; }
.zona-panel__media{ box-shadow: var(--sh-3); }
.zona-panel__caption{
background: linear-gradient(180deg, rgba(30,23,21,0) 0%, rgba(30,23,21,.55) 30%, rgba(30,23,21,.94) 76%);
}
.zona-panel__caption h3{ letter-spacing:-.02em; }
@media (max-width: 1024px){
.zona-tab::before{ top:auto; bottom:0; left:14%; right:14%; width:auto; height:3px; border-radius:3px 3px 0 0; transform: scaleX(0); }
.zona-tab[aria-selected="true"]::before{ transform: scaleX(1); }
}
.benefit{
padding:1.35rem 1.1rem 1.35rem 1rem;
border-radius: var(--r-md);
transition: background var(--t) var(--e), transform var(--t-hover) var(--e);
}
.benefit__ico{
transition: background var(--t) var(--e), color var(--t) var(--e),
border-color var(--t) var(--e), box-shadow var(--t) var(--e);
}
@media (hover: hover) and (pointer: fine){
.benefit:hover{ background: rgba(255,255,255,.72); }
.benefit:hover .benefit__ico{
background: var(--grad-copper); color: var(--white);
border-color: transparent; box-shadow: var(--sh-copper);
}
}
.benefit h3{ letter-spacing:-.012em; }
.benefits__media{ box-shadow: var(--sh-3); }
.benefits__media::after{
content:""; position:absolute; inset:0; border-radius: inherit;
border:1px solid rgba(255,255,255,.24); pointer-events:none;
}
.about__media img.photo{ box-shadow: var(--sh-3); }
.egp{
background-image: var(--grain), linear-gradient(160deg, #332926 0%, var(--brown-deep) 55%, #241C1A 100%);
background-size: 160px 160px, auto;
background-blend-mode: overlay, normal;
}
.egp__points li{ background: rgba(159,112,70,.16); border-color: rgba(198,165,131,.28); }
.egp__media{ border-radius: var(--r-lg); box-shadow: 0 30px 70px -26px rgba(0,0,0,.7); }
.step__num{ box-shadow: var(--sh-1); }
.steps.is-in .step__num{ box-shadow: 0 0 0 8px rgba(159,112,70,.13), var(--sh-copper); }
.step h3{ letter-spacing:-.012em; }
.steps.is-in .steps__progress{ box-shadow: 0 0 14px rgba(159,112,70,.45); }
.cta-final__media::after{
background:
radial-gradient(105% 78% at 50% 42%, rgba(44,35,32,.52) 0%, rgba(30,23,21,.88) 74%, rgba(24,18,17,.95) 100%),
linear-gradient(180deg, rgba(30,23,21,.72) 0%, rgba(44,35,32,.55) 46%, rgba(30,23,21,.86) 100%);
}
.cta-final__media{ z-index:0; }
.cta-final__media::before{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
background-image: var(--grain); background-size:160px 160px; opacity:.13; mix-blend-mode: overlay;
}
.cta-final .eyebrow::before, .cta-final .eyebrow::after{ background: var(--copper-soft); }
.site-footer{
background: linear-gradient(180deg, var(--brown) 0%, var(--brown-deep) 100%);
position:relative;
}
.site-footer::before{
content:""; position:absolute; left:0; right:0; top:0; height:2px;
background: linear-gradient(90deg, rgba(159,112,70,0) 0%, var(--copper) 28%, var(--copper-soft) 50%, var(--copper) 72%, rgba(159,112,70,0) 100%);
opacity:.7;
}
.footer-col h4{ color: rgba(255,255,255,.92); }
.footer-col a:not(.btn){ color: rgba(255,255,255,.72); }
.socials a{ border-color: rgba(255,255,255,.16); }
.socials a:hover{ background: var(--grad-copper); border-color: transparent; box-shadow: var(--sh-copper); }
.wa-float{ box-shadow: 0 8px 26px -8px rgba(37,211,102,.55); }
.page-hero__media::after{
background:
linear-gradient(180deg, rgba(30,23,21,.88) 0%, rgba(44,35,32,.58) 48%, rgba(30,23,21,.86) 100%);
}
.page-hero__media{ z-index:0; }
.page-hero__media::before{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
background-image: var(--grain); background-size:160px 160px; opacity:.14; mix-blend-mode: overlay;
}
.info-card{ border-color: rgba(60,49,45,.07); }
.info-card__ico{ background: var(--cream); border:1px solid var(--line-soft); }
@media (hover: hover) and (pointer: fine){
.info-card:hover{ border-color: rgba(159,112,70,.2); }
}
.aside-card{ border-color: rgba(60,49,45,.07); }
.post-card{ border-color: rgba(60,49,45,.07); }
.gallery__hero, .gallery__thumbs > *{ box-shadow: var(--sh-1); }
.team-card{ box-shadow: var(--sh-2); }
.team-card::after{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
border-radius: inherit; border:1px solid rgba(255,255,255,.18);
}
.team-card__body{
z-index:1; padding: 1.7rem 1.3rem 1.25rem;
border-radius: 0 0 var(--r-lg) var(--r-lg);
background: linear-gradient(180deg, rgba(44,35,32,0) 0%, rgba(44,35,32,.5) 40%, rgba(30,23,21,.93) 100%);
}
.team-card__body strong{ font-size:1.06rem; letter-spacing:-.012em; }
.team-card__body span{
display:block; width:fit-content; margin-top:.5rem; padding-top:.5rem;
font-size:.69rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color: var(--copper-soft); border-top:1px solid rgba(255,255,255,.22);
}
@media (hover: none){
.team-card__wa{ opacity:1; }
}
.about__zones{ list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.about__zones li{
display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .95rem;
border-radius: var(--r-pill); background: var(--white); border:1px solid var(--line-soft);
box-shadow: var(--sh-1); font-size:.82rem; font-weight:600; color: var(--brown);
}
.about__zones svg{ flex:none; color: var(--copper); }
.purpose, .purpose + .section--cream{ --seam: clamp(22px, 3.4vw, 44px); }
.purpose{
margin-top: calc(var(--seam) * -1);
border-radius: var(--seam) var(--seam) 0 0;
}
.purpose + .section--cream{
position:relative; z-index:1;
margin-top: calc(var(--seam) * -1);
border-radius: var(--seam) var(--seam) 0 0;
}
.purpose{
position:relative; color: var(--white); overflow:hidden;
background-image: var(--grain), linear-gradient(160deg, #332926 0%, var(--brown-deep) 58%, #241C1A 100%);
background-size: 160px 160px, auto;
background-blend-mode: overlay, normal;
}
.purpose::before{
content:""; position:absolute; left:50%; top:-40%; width:56%; aspect-ratio:1;
transform: translateX(-50%); border-radius:50%; pointer-events:none;
background: radial-gradient(circle, rgba(159,112,70,.30) 0%, rgba(159,112,70,0) 68%);
}
.purpose .wrap{ position:relative; z-index:1; }
.purpose .h2{ color: var(--white); }
.purpose .hl{ color: var(--copper-soft); }
.purpose .eyebrow{ color: var(--copper-soft); }
.purpose .eyebrow::before, .purpose .eyebrow::after{ background: var(--copper-soft); }
.purpose__grid{ display:grid; grid-template-columns: repeat(3,1fr); margin-top: clamp(36px,4.4vw,60px); }
.purpose-card{ position:relative; padding: clamp(26px,2.8vw,40px) clamp(20px,2.4vw,36px); }
.purpose-card + .purpose-card::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
background: rgba(255,255,255,.13);
}
.purpose-card__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.purpose-card__ico{
width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius: var(--r-pill);
background: rgba(159,112,70,.18); border:1px solid rgba(198,165,131,.30); color: var(--copper-soft);
}
.purpose-card__num{
font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem);
font-weight:500; letter-spacing:.02em; line-height:1; color: rgba(198,165,131,.30);
}
.purpose-card h3{
margin-top:1.5rem; font-size: clamp(1.28rem, 1.1rem + .55vw, 1.58rem);
font-weight:500; letter-spacing:-.02em; color: var(--white);
}
.purpose-card h3::after{
content:""; display:block; width:34px; height:1px; margin-top:.95rem;
background: var(--copper-soft); opacity:.8;
}
.purpose-card p{ margin-top:1.05rem; font-size:.94rem; line-height:1.72; color: rgba(255,255,255,.72); }
.purpose-card strong{ color: rgba(255,255,255,.94); font-weight:600; }
@media (max-width: 900px){
.purpose__grid{ grid-template-columns:1fr; }
.purpose-card{ padding-inline:0; }
.purpose-card + .purpose-card::before{ left:0; right:0; bottom:auto; width:auto; height:1px; }
}
.info-card--service{ position:relative; overflow:hidden; }
.info-card--service::before{
content:""; position:absolute; left:0; right:0; top:0; height:2px;
background: var(--grad-copper); transform: scaleX(0); transform-origin:left;
transition: transform var(--t) var(--e);
}
@media (hover: hover) and (pointer: fine){
.info-card--service:hover::before{ transform:none; }
}
.info-card--service .info-card__ico{
width:54px; height:54px; border-radius: var(--r-pill); margin-bottom:1.5rem;
background: linear-gradient(150deg, rgba(159,112,70,.20) 0%, rgba(198,165,131,.12) 100%);
border:1px solid rgba(159,112,70,.24); color: var(--copper-dark);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.info-card--service h3{ font-size:1.16rem; letter-spacing:-.015em; }
.team-card{
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transform-style: preserve-3d;
transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
will-change: transform;
}
.team-card.is-tilting{ transition: transform .1s linear, box-shadow .5s var(--e-out); box-shadow: var(--sh-3); }
.team-card::after{ transform: translateZ(2px); }
.team-card__img img{
transform: scale(1.12); transform-origin:center 40%;
transition: transform 1.1s var(--e-out);
transition-delay: var(--d, 0ms);
}
.is-in .team-card__img img{ transform:none; }
.team-card__body strong, .team-card__body span{
opacity:0;
transition: opacity .55s var(--e-out), transform .55s var(--e-out);
}
.team-card__body strong{ --z: 26px; transform: translate3d(0,12px,var(--z)); transition-delay: calc(var(--d, 0ms) + 260ms); }
.team-card__body span{   --z: 18px; transform: translate3d(0,12px,var(--z)); transition-delay: calc(var(--d, 0ms) + 340ms); }
.is-in .team-card__body strong,
.is-in .team-card__body span{ opacity:1; transform: translate3d(0,0,var(--z)); }
.team-card__wa{ transform: translate3d(0,-6px,44px); }
.team-card:hover .team-card__wa, .team-card:focus-within .team-card__wa{ transform: translate3d(0,0,44px); }
@media (hover: none){
.team-card__wa{ transform: translate3d(0,0,44px); }
}
.about__zones > [data-reveal]{ --reveal-y: 10px; --reveal-dur: .45s; }
.logo3d{
position:absolute; right:-70px; bottom:-48px; z-index:2;
width: clamp(146px, 15vw, 200px); aspect-ratio:1;
perspective: 720px;
touch-action: pan-y;
cursor: grab;
-webkit-user-select:none; user-select:none;
}
.logo3d.is-dragging{ cursor: grabbing; }
.logo3d::before{
content:""; position:absolute; inset:10% 6% 4%;
transform: translateZ(-46px); border-radius:50%; pointer-events:none;
background: radial-gradient(circle at 50% 58%, rgba(30,23,21,.26) 0%, rgba(30,23,21,0) 62%);
}
.logo3d__obj{
position:relative; width:100%; height:100%;
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(-18deg);
will-change: transform;
}
.logo3d__face, .logo3d__layer{
position:absolute; inset:0; width:100%; height:100%;
-webkit-user-drag:none;
}
.logo3d__face{ object-fit:contain; }
.logo3d__layer{ background: center/contain no-repeat; }
.logo3d__hint{
position:absolute; left:50%; bottom:-14px; transform: translateX(-50%);
display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
padding:.34rem .7rem; border-radius: var(--r-pill);
background: rgba(255,255,255,.92); border:1px solid var(--line-soft);
box-shadow: var(--sh-1);
font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
color: var(--ink-70);
transition: opacity var(--t) var(--e), transform var(--t) var(--e);
}
.logo3d__hint svg{ color: var(--copper); }
.logo3d.has-interacted .logo3d__hint{ opacity:0; transform: translate(-50%, 6px); pointer-events:none; }
@media (max-width: 1024px){
.logo3d{ right:50%; bottom:-46px; transform: translateX(50%); }
.logo3d__hint{ top:-6px; bottom:auto; }
}
.logo3d:not(.is-ready) .logo3d__hint{ display:none; }
.logo3d:not(.is-ready) .logo3d__face{ opacity:.22; }
.purpose-card + .purpose-card::before{
transform: scaleY(0); transform-origin: center top;
transition: transform .8s var(--e-in-out);
transition-delay: calc(var(--d, 0ms) + 80ms);
}
.purpose-card.is-in + .purpose-card::before,
.purpose-card + .purpose-card.is-in::before{ transform:none; }
.purpose-card__ico{
opacity:0; transform: scale(.86);
transition: opacity .5s var(--e-out), transform .5s var(--e-out);
transition-delay: calc(var(--d, 0ms) + 140ms);
}
.purpose-card__num{
opacity:0; transform: translateY(8px);
transition: opacity .5s var(--e-out), transform .5s var(--e-out);
transition-delay: calc(var(--d, 0ms) + 200ms);
}
.purpose-card h3::after{
transform: scaleX(0); transform-origin: left center;
transition: transform .6s var(--e-out);
transition-delay: calc(var(--d, 0ms) + 300ms);
}
.purpose-card.is-in .purpose-card__ico,
.purpose-card.is-in .purpose-card__num{ opacity:1; transform:none; }
.purpose-card.is-in h3::after{ transform: scaleX(1); }
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.purpose::before{
animation: purpose-halo linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes purpose-halo{
from{ transform: translate3d(-50%, -7%, 0); }
to  { transform: translate3d(-50%, 9%, 0); }
}
.purpose-card__num{
transition-property: opacity;
animation: purpose-num-drift linear both;
animation-timeline: view();
animation-range: cover 8% cover 92%;
}
@keyframes purpose-num-drift{
from{ transform: translate3d(0, 16px, 0); }
to  { transform: translate3d(0, -16px, 0); }
}
.purpose{
animation: purpose-seam linear both;
animation-timeline: view();
animation-range: cover 0% cover 38%;
}
@keyframes purpose-seam{
from{ clip-path: inset(0 round 50% 50% 0 0 / 13% 13% 0 0); }
to  { clip-path: inset(0 round var(--seam) var(--seam) 0 0 / var(--seam) var(--seam) 0 0); }
}
}
}
.purpose::after{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background: linear-gradient(105deg,
rgba(198,165,131,0) 38%,
rgba(198,165,131,.16) 48%,
rgba(255,255,255,.11) 53%,
rgba(198,165,131,.14) 58%,
rgba(198,165,131,0) 68%);
transform: translate3d(-100%, 0, 0);
transition: transform 1.4s var(--e-in-out) 500ms;
}
.purpose:has(.purpose-card.is-in)::after{ transform: translate3d(100%, 0, 0); }
.info-card--service .info-card__ico{
opacity:0; transform: scale(.88);
transition: opacity .5s var(--e-out), transform .5s var(--e-out), border-color var(--t-hover) var(--e);
transition-delay: calc(var(--d, 0ms) + 160ms);
}
.info-card--service.is-in .info-card__ico{ opacity:1; transform:none; }
@media (hover: hover) and (pointer: fine){
.info-card--service:hover .info-card__ico{
transform: translateY(-3px); border-color: rgba(159,112,70,.42);
transition-delay: 0ms;
}
}
.kore-exito,
.kore-error{
margin: .9rem 0 0;
padding: .85rem 1.1rem;
border-radius: var(--r-md);
border: 1px solid var(--line);
font-size: .96rem;
line-height: 1.55;
background: var(--white);
color: var(--ink);
}
.kore-exito{ border-color: rgba(60,49,45,.18); }
.kore-error{ border-color: rgba(190,62,48,.38); color: #8E2F24; }
.hero-formbar .kore-exito,
.hero-formbar .kore-error{ margin: .35rem 0; text-align:center; background: transparent; border: 0; }