:root { --bg1: url(//hill.puze.com.br/__grhill2/imgs/img1.webp); --bg2: url(//hill.puze.com.br/__grhill2/imgs/img2.webp); --bg3: url(//hill.puze.com.br/__grhill2/imgs/img3.webp); --bg4: url(//hill.puze.com.br/__grhill2/imgs/img4.webp); --bg5: url(//hill.puze.com.br/__grhill2/imgs/img5.webp); --bg6: url(//hill.puze.com.br/__grhill2/imgs/img6.webp); --bg7: url(//hill.puze.com.br/__grhill2/imgs/img7.webp); --bg8: url(//hill.puze.com.br/__grhill2/imgs/img8.webp); }   :root{  --pine:#0E241A; --pine-2:#153021;   --pine-3:#1E3D2B;   --sage:#7BA86D; --sage-soft:#AEC9A2; --amber:#EFB13C;   --amber-warm:#F7CE72; --bone:#F2ECDD; --bone-dim:#C9CBC2;  --bark:#6E4A24; --bone-2:#EDE6D4;   --sand:#EDE6D4; --ink:#122A1D; --ink-dim:#4E6A57;  --gold-deep:#875E10; --forest:#16352A;   --forest-2:#1E4234;  --line:rgba(242,236,221,.14);   --line-strong:rgba(242,236,221,.28);   --ff-display:"Hanken Grotesk", system-ui, sans-serif;   --ff-body:"Hanken Grotesk", system-ui, sans-serif;   --maxw:1240px;   --ease:cubic-bezier(.22,.61,.36,1);  }  *{box-sizing:border-box}  html{scroll-behavior:smooth}  body{   margin:0;   background:var(--pine);   color:var(--bone);   font-family:var(--ff-body);   font-weight:400;   line-height:1.6;   -webkit-font-smoothing:antialiased;   overflow-x:hidden;  }  img{max-width:100%;display:block}  a{color:inherit;text-decoration:none}  button{font-family:inherit}  ::selection{background:var(--amber);color:var(--pine)}  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}  .eyebrow{   font-family:var(--ff-body);   font-weight:600;   font-size:.74rem;   letter-spacing:.28em;   text-transform:uppercase;   color:var(--amber);   display:inline-flex;align-items:center;gap:.7em;  }  .eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);opacity:.7}  h1,h2,h3{font-family:var(--ff-display);font-weight:600;line-height:1.06;letter-spacing:-.02em;margin:0}  .display{font-size:clamp(2.6rem,6.4vw,5.3rem)}  em{font-style:normal;color:var(--amber-warm)} header{   position:fixed;top:0;left:0;right:0;z-index:60;   transition:background .5s var(--ease), border-color .5s;   border-bottom:1px solid transparent;  }  .header-inner{   max-width:var(--maxw);margin:0 auto;   display:flex;align-items:center;justify-content:space-between;   padding:20px clamp(20px,5vw,56px);   transition:padding .4s var(--ease);  }  header.scrolled{   background:rgba(11,26,18,.82);   backdrop-filter:blur(14px); }  header.scrolled .header-inner{padding:12px clamp(20px,5vw,56px)}  .brand{display:flex;align-items:center;gap:11px}  .logo{height:58px;width:auto;transition:height .4s var(--ease);image-rendering:auto}  header.scrolled .logo{height:46px}  .foot-brand .logo{height:78px}  nav.main{display:flex;align-items:center;gap:30px}  nav.main a{font-size:.9rem;color:var(--bone-dim);position:relative;transition:color .3s}  nav.main a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--amber);transition:width .35s var(--ease)}  nav.main a:hover{color:var(--bone)}  nav.main a:hover::after{width:100%}  .btn{   display:inline-flex;align-items:center;justify-content:center;gap:.5em;   padding:.72em 1.35em;border-radius:100px;font-size:.9rem;font-weight:600;   cursor:pointer;transition:all .35s var(--ease);border:1px solid transparent;white-space:nowrap;  }  .btn-amber{background:var(--amber);color:var(--pine)}  .btn-amber:hover{background:var(--amber-warm);transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(233,178,76,.5)}  .btn-ghost{background:transparent;color:var(--bone);border-color:var(--line-strong)}  .btn-ghost:hover{border-color:var(--amber);color:var(--amber-warm)}  .burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}  .burger span{width:24px;height:2px;background:var(--bone);transition:.3s} .reserve{padding:clamp(70px,11vh,140px) 0;text-align:center;position:relative;overflow:hidden}  #reservar{background:linear-gradient(180deg,#295039 0%,#16352A 100%)}  .reserve::before{content:"";position:absolute;inset:0;z-index:0;   background:radial-gradient(70% 120% at 50% 120%,rgba(233,178,76,.16),transparent 70%)}  .reserve-inner{position:relative;z-index:1}  .reserve h2{font-size:clamp(2.2rem,5.4vw,4rem);max-width:16ch;margin:20px auto 0}  .booking{   display:flex;flex-wrap:wrap;gap:2px;margin:44px auto 0;max-width:840px;   background:var(--pine-2);border:1px solid var(--line-strong);border-radius:18px;padding:10px;  }  .bk-field{flex:1;min-width:150px;text-align:left;padding:14px 18px;transition:.3s}  .bk-field:hover{background:rgba(242,236,221,.04)}  .bk-field label{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}  .bk-field input,.bk-field select{width:100%;background:none;border:0;color:var(--bone);font-family:inherit;font-size:1rem;outline:none}   .bk-date{position:relative}  .bk-date .bk-display{color:var(--bone);font-size:1rem;line-height:1.4}  .bk-date .bk-display.empty{color:rgba(242,236,221,.72)}  .bk-date .bk-cal{position:absolute;right:18px;bottom:19px;pointer-events:none}  .bk-date input[type="date"]{position:absolute;inset:0;width:100%;height:100%;   opacity:0;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2;margin:0;padding:inherit;   min-height:100%}  .bk-date label{position:relative;z-index:1}   .bk-field select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:26px;   background-image:url("data:image/svg+xml,%3Csvg xmlns='//www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F2ECDD' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");   background-repeat:no-repeat;background-position:right 2px center}  .bk-field select option{background:var(--pine-2);color:var(--bone)} .booking .btn-amber{margin:auto 6px;padding:1.1em 2em}  footer{border-top:1px solid var(--line);padding:64px 0 40px;margin-top:40px}  .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:52px}  .foot-brand .brand{margin-bottom:16px}  .foot-brand p{color:var(--bone-dim);font-size:.9rem;max-width:34ch}  .foot-col h4{font-family:var(--ff-body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin:0 0 18px;font-weight:600}  .foot-col a{display:block;color:var(--bone-dim);font-size:.92rem;margin-bottom:11px;transition:.3s}  .foot-col a:hover{color:var(--bone)}  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap;gap:14px}  .foot-bottom p{color:var(--sage);font-size:.82rem;margin:0}  .mobile-menu{position:fixed;inset:0;z-index:55;background:var(--pine);padding:100px clamp(20px,6vw,40px) 40px;   transform:translateY(-100%);transition:transform .5s var(--ease),visibility .5s;   display:flex;flex-direction:column;gap:8px;overflow-y:auto;visibility:hidden}  .mobile-menu.open{transform:none;visibility:visible}  @media(min-width:901px){.mobile-menu{display:none}}  .mobile-menu a{font-family:var(--ff-display);font-size:1.9rem;padding:12px 0;border-bottom:1px solid var(--line)}  .mobile-menu .btn{margin-top:24px;justify-content:center} @media(max-width:900px){   nav.main{display:none}   header .btn-amber{display:none}   .burger{display:flex}   .exp-grid,.stay-grid,.rev-grid,.blog-grid,.prog-grid{grid-template-columns:1fr}   .band-inner,.loc-inner{grid-template-columns:1fr}   .band .visual{min-height:280px;order:-1}   .foot-top{grid-template-columns:1fr 1fr}   .insta-grid{grid-template-columns:repeat(3,1fr)}   .mini-blog{grid-template-columns:1fr}  }  @media(max-width:560px){   .foot-top{grid-template-columns:1fr}   .booking{flex-direction:column}   .stay-grid{grid-template-columns:1fr}  }  @media(prefers-reduced-motion:reduce){   *{animation:none!important;scroll-behavior:auto}   .reveal{opacity:1;transform:none}  }  .bk-stepper{ display:flex; align-items:center; gap:12px; } .bk-stepper button{  width:30px; height:30px; border-radius:50%;  border:1px solid #F2ECDD; background:transparent; color:#F2ECDD;  font-size:18px; line-height:1; cursor:pointer; } .bk-count{ min-width:20px; text-align:center; } .booking, .hero-booking{ display:flex; flex-wrap:wrap; align-items:stretch; gap:0; padding:8px; } .booking .bk-field, .hero-booking .bk-field{  flex:1 1 0;  min-width:140px;  padding:16px 18px;  display:flex;  flex-direction:column;  gap:10px;  } .booking .bk-field:last-of-type, .hero-booking .bk-field:last-of-type{ border-right:none; } .booking .bk-field label, .hero-booking .bk-field label{  min-height:2.6em;  line-height:1.25;  margin:0; } .booking .bk-field label small, .hero-booking .bk-field label small{  opacity:.7;  font-weight:400;   display: block; } .booking .bk-control, .hero-booking .bk-control{ height:34px; display:flex; align-items:center; } .booking .bk-date .bk-control, .hero-booking .bk-date .bk-control{  position:relative; cursor:pointer; justify-content:space-between; } .booking .bk-date .bk-display, .hero-booking .bk-date .bk-display{ flex:1; } .booking .bk-date .bk-cal, .hero-booking .bk-date .bk-cal{  position:static; pointer-events:none; flex:0 0 auto; margin-left:8px; } .booking .bk-date input[type=date], .hero-booking .bk-date input[type=date]{  position:absolute; inset:0; width:100%; height:100%;  opacity:0; cursor:pointer; padding:0; margin:0; } .booking .bk-stepper, .hero-booking .bk-stepper{ gap:14px; justify-content:flex-start; } .booking .bk-stepper button, .hero-booking .bk-stepper button{  width:32px; height:32px; flex:0 0 auto; border-radius:50%;  border:1px solid #F2ECDD; background:transparent; color:#F2ECDD;  font-size:18px; line-height:1; cursor:pointer;  display:flex; align-items:center; justify-content:center; } .booking .bk-count, .hero-booking .bk-count{ min-width:22px; text-align:center; font-size:1.05rem; } .booking .btn-amber, .hero-booking .btn-amber{ align-self:center; margin:0 0 0 10px; white-space:nowrap; }  #footalways{  display:flex;  justify-content:center;  align-items:center;  padding:20px 24px calc(20px + env(safe-area-inset-bottom,0px));  background:#0c1f17;   border-top:1px solid var(--line); } #footalways .puzelogo{  display:inline-flex;  align-items:center;  gap:10px;  text-decoration:none;  padding:6px 10px;  border-radius:999px;  transition:background .25s ease; } #footalways .txt-footalways{  font-family:"Hanken Grotesk", system-ui, sans-serif;  font-size:.62rem;  font-weight:500;  letter-spacing:.18em;  text-transform:uppercase;  color:var(--sage);  opacity:.8;  white-space:nowrap;  transition:color .25s ease, opacity .25s ease; } #footalways .puze-mark{  height:15px; width:auto;  display:block;  opacity:.85;  transition:opacity .25s ease, filter .25s ease; } #footalways .puzelogo:hover{ background:rgba(242,236,221,.06); } #footalways .puzelogo:hover .txt-footalways{ color:var(--sand); opacity:1; } #footalways .puzelogo:hover .puze-mark{ opacity:1; filter:drop-shadow(0 0 6px rgba(242,236,221,.25)); } #footalways .puzelogo:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; }