/* ============ Tokens ============ */
:root{
  --cream:#FAF6EE;
  --cream-2:#F3EDDF;
  --ink:#2B2A26;
  --teal:#1F3D37;
  --teal-2:#2E4B45;
  --sand:#E4D6B8;
  --clay:#B8623A;
  --clay-2:#9C4E2C;
  --line: rgba(43,42,38,0.14);
  --line-on-dark: rgba(250,246,238,0.18);
  --shadow: 0 10px 24px rgba(43,42,38,0.12);
  --radius: 2px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Karla', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--teal); color:#fff; padding:12px 18px; z-index:200;
}
.skip-link:focus{ left:16px; top:16px; }

:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }

.wrap{ max-width:1180px; margin:0 auto; padding-left:32px; padding-right:32px; }
.section{ padding-top:88px; padding-bottom:88px; }

.section-title{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(2rem, 3.4vw, 2.8rem);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0 0 14px;
}
.section-title em{ font-style:italic; color:var(--teal); }
.section-lead{ font-size:1.05rem; opacity:0.8; max-width:56ch; margin:0 0 40px; }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px;
  font-family:'Karla', sans-serif;
  font-weight:600;
  font-size:0.98rem;
  text-decoration:none;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--clay{ background:var(--clay); color:#fff; }
.btn--clay:hover{ background:var(--clay-2); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:#fff; border-color: var(--line-on-dark); }
.btn--ghost:hover{ border-color:#fff; }
.btn--outline{ background:transparent; color:var(--teal); border-color:var(--teal); }
.btn--outline:hover{ background:var(--teal); color:#fff; }
.btn--small{ padding:10px 20px; font-size:0.88rem; }

/* ============ Header ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  background: rgba(250,246,238,0.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  max-width:1180px; margin:0 auto;
  padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ text-decoration:none; color:var(--ink); line-height:1.1; }
.brand__name{
  display:block;
  font-family:'Fraunces', serif;
  font-size:1.4rem;
  font-weight:500;
}
.brand__tag{ display:block; font-size:0.72rem; letter-spacing:.02em; opacity:0.65; }
.site-nav{ display:flex; gap:28px; font-size:0.94rem; }
.site-nav a{ text-decoration:none; opacity:0.8; }
.site-nav a:hover{ opacity:1; color:var(--clay); }

@media (max-width:640px){
  .site-nav{ display:none; }
}

/* ============ Hero ============ */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:#fff;
}
.hero__slides{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.4s ease;
}
.hero__slide.is-active{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(31,61,55,0.15) 0%, rgba(20,30,27,0.78) 100%);
}
.hero__content{
  position:relative; z-index:2;
  max-width:680px;
  padding: 0 32px 88px;
}
.hero__eyebrow{ font-size:0.85rem; letter-spacing:.03em; opacity:0.85; margin:0 0 18px; }
.hero h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(2.4rem, 5.5vw, 4rem);
  line-height:1.06;
  margin:0 0 22px;
}
.hero h1 em{ font-style:italic; color:var(--sand); }
.hero__lead{ font-size:1.1rem; max-width:48ch; opacity:0.92; margin:0 0 32px; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ============ Sobre / About ============ */
.about-head{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap:64px;
  align-items:end;
  margin-bottom:56px;
  border-bottom:1px solid var(--line);
  padding-bottom:48px;
}
.about-head p{
  font-size:1.05rem; line-height:1.75; max-width:56ch;
  opacity:0.88; margin:0 0 14px;
}
.about-facts{
  display:flex; flex-direction:column; gap:22px;
  border-left:1px solid var(--line); padding-left:32px;
}
.fact b{
  display:block; font-family:'Fraunces', serif;
  font-size:1.9rem; color:var(--clay); line-height:1;
}
.fact span{ font-size:0.92rem; opacity:0.75; }

/* ============ Gallery (album) ============ */
.gallery-intro{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:20px; gap:16px; flex-wrap:wrap;
}
.gallery-intro h3{
  font-family:'Fraunces', serif; font-weight:500; font-size:1.4rem; margin:0;
}
.gallery-hint{ font-size:0.9rem; opacity:0.6; }

.gallery{
  display:flex; gap:22px; overflow-x:auto;
  scroll-snap-type: x proximity;
  padding:8px 4px 28px; margin:0 -4px;
  scrollbar-width: thin; scrollbar-color: var(--teal) transparent;
}
.gallery::-webkit-scrollbar{ height:6px; }
.gallery::-webkit-scrollbar-thumb{ background:var(--teal); border-radius:4px; }

.polaroid{
  scroll-snap-align:start; flex:0 0 auto; width:260px;
  background:#fff; padding:12px 12px 20px;
  box-shadow: var(--shadow);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .25s ease;
}
.polaroid:hover{ transform: rotate(0deg) translateY(-4px); }
.polaroid:nth-child(1){ --tilt: -2deg; }
.polaroid:nth-child(2){ --tilt: 1.5deg; }
.polaroid:nth-child(3){ --tilt: -1deg; }
.polaroid:nth-child(4){ --tilt: 2deg; }
.polaroid:nth-child(5){ --tilt: -1.5deg; }
.polaroid:nth-child(6){ --tilt: 1deg; }
.polaroid .frame{ width:100%; aspect-ratio:4/5; overflow:hidden; background:var(--sand); }
.polaroid img{ width:100%; height:100%; object-fit:cover; }
.polaroid figcaption{
  font-family:'Caveat', cursive; font-size:1.35rem; color:var(--teal);
  text-align:center; padding-top:10px;
}
.gallery-nav{ display:flex; gap:10px; justify-content:center; }
.gallery-nav button{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--teal);
  font-size:1rem; cursor:pointer;
}
.gallery-nav button:hover{ background:var(--teal); color:#fff; border-color:var(--teal); }

/* ============ Suítes ============ */
.suite-list{ display:flex; flex-direction:column; }
.suite-row{
  display:grid;
  grid-template-columns: 60px 1fr 1.2fr;
  gap:40px;
  align-items:center;
  padding:44px 0;
  border-bottom:1px solid var(--line);
}
.suite-row:first-child{ padding-top:0; }
.suite-row__num{
  font-family:'Fraunces', serif; font-size:1.1rem; color:var(--clay); opacity:0.8;
}
.suite-row__photo{ aspect-ratio:4/3; overflow:hidden; }
.suite-row__photo img{ width:100%; height:100%; object-fit:cover; }
.suite-row__info h3{
  font-family:'Fraunces', serif; font-weight:500; font-size:1.5rem; margin:0 0 6px;
}
.suite-row__cap{ color:var(--clay); font-weight:600; font-size:0.92rem; margin:0 0 14px; }
.suite-row__info ul li{
  position:relative; padding-left:18px; margin-bottom:8px; opacity:0.88; font-size:0.98rem;
}
.suite-row__info ul li::before{
  content:''; position:absolute; left:0; top:0.6em;
  width:6px; height:6px; background:var(--sand); border-radius:50%;
}

.suite-row--reverse .suite-row__photo{ order:3; }
.suite-row--reverse .suite-row__info{ order:2; }
.suite-row--reverse{ grid-template-columns: 60px 1.2fr 1fr; }

@media (max-width:800px){
  .suite-row, .suite-row--reverse{
    grid-template-columns: 40px 1fr; grid-template-areas: "num photo" "info info";
  }
  .suite-row__num{ grid-area:num; }
  .suite-row__photo{ grid-area:photo; order:initial; }
  .suite-row__info{ grid-area:info; order:initial; }
}

/* ============ Como chegar ============ */
.location{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap:56px;
  align-items:start;
}
.location__facts{ margin:24px 0 32px; display:flex; flex-direction:column; gap:10px; }
.location__facts li{ font-size:0.98rem; opacity:0.88; }
.location__map{
  aspect-ratio: 4/3;
  overflow:hidden;
  box-shadow: var(--shadow);
}
@media (max-width:860px){
  .location{ grid-template-columns:1fr; }
}

/* ============ CTA contato ============ */
.cta-contact{ background:var(--teal); color:var(--cream); }
.cta-contact__inner{
  padding:80px 32px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:32px;
}
.cta-contact h2{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.6rem); line-height:1.15; margin:0;
}

/* ============ Footer ============ */
.site-footer{ background:#182D28; color: rgba(250,246,238,0.7); }
.site-footer__inner{
  padding:26px 32px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:8px; font-size:0.85rem;
}

/* ============ Responsive tweaks ============ */
@media (max-width:760px){
  .about-head{ grid-template-columns:1fr; gap:28px; }
  .about-facts{ border-left:none; padding-left:0; flex-direction:row; flex-wrap:wrap; gap:28px; }
  .wrap{ padding-left:20px; padding-right:20px; }
  .section{ padding-top:64px; padding-bottom:64px; }
  .hero__content{ padding:0 20px 64px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero__slide, .polaroid, .btn{ transition:none; }
}