@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --ink: #16324a;
  --marine: #1f5c8b;
  --marine-deep: #123a58;
  --terracotta: #c1613c;
  --turquoise: #3fa79c;
  --sand: #f5efe2;
  --sand-deep: #e8dcc4;
  --paper: #fffbf3;
  --line: rgba(22, 50, 74, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef2f0;
    --marine: #5fa3d6;
    --marine-deep: #bcdcf7;
    --terracotta: #e08a5f;
    --turquoise: #5fc2b6;
    --sand: #122229;
    --sand-deep: #0c1a20;
    --paper: #16292f;
    --line: rgba(238, 242, 240, 0.14);
  }
}
:root[data-theme="dark"] {
  --ink: #eef2f0;
  --marine: #5fa3d6;
  --marine-deep: #bcdcf7;
  --terracotta: #e08a5f;
  --turquoise: #5fc2b6;
  --sand: #122229;
  --sand-deep: #0c1a20;
  --paper: #16292f;
  --line: rgba(238, 242, 240, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sand);
  color: var(--ink);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
}
a { color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
img { display: block; max-width: 100%; }

/* ---------- nav ---------- */
nav.site {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px;
  max-width: 1180px; margin: 0 auto;
}
.logo {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
}
.logo span { color: var(--terracotta); font-style: italic; font-weight: 500; }
.logo-img { display: block; height: 36px; width: auto; }
.footer-grid .logo-img.footer-logo-img { height: 50px; margin-bottom: 4px; }
@media (max-width: 480px) { .logo-img { height: 30px; } }
.nav-links { display: flex; gap: 28px; font-size: 14px; letter-spacing: .02em; }
.nav-links a { text-decoration: none; opacity: .82; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav-links a:hover { border-color: currentColor; }
.nav-cta-group { display: flex; align-items: center; gap: 12px; }
.nav-cta {
  background: var(--marine); color: var(--paper);
  padding: 10px 20px; border-radius: 2px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
}
.nav-cta-pacotes { background: var(--terracotta); }
.nav-cta-mobile, .nav-toggle-input, .nav-toggle-btn { display: none; }

@media (max-width: 820px) {
  .nav-cta { display: none; }
  .nav-toggle-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 34px; height: 34px; cursor: pointer; padding: 4px;
  }
  .nav-toggle-btn span { width: 100%; height: 2px; background: var(--ink); display: block; border-radius: 2px; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    flex-direction: column; gap: 0;
    background: var(--paper);
    padding: 6px 28px 22px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px -16px rgba(9,22,32,.35);
  }
  .nav-links a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; opacity: 1; }
  .nav-cta-mobile {
    display: block; margin-top: 14px; text-align: center; border-bottom: none;
    background: var(--marine); color: var(--paper);
    padding: 13px; border-radius: 2px; font-weight: 700;
  }
  .nav-cta-mobile-pacotes { background: var(--terracotta); margin-top: 20px; }
  .nav-toggle-input:checked ~ .nav-links { display: flex; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: flex-end;
  background: #0e2433;
}
.hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .86;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,25,36,.15) 0%, rgba(10,25,36,.08) 40%, rgba(9,22,32,.86) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 28px 64px;
  max-width: 1180px; margin: 0 auto;
  color: #fff;
}
/* .hero-logo precisa de mais especificidade que ".hero img"/".page-hero img"/
   ".lazer-hero img" (que forçam position:absolute;inset:0;width:100%;height:100%
   na foto de fundo) - senão o logo herda esse mesmo esticamento. */
.hero .hero-logo, .page-hero .hero-logo, .lazer-hero .hero-logo {
  position: absolute; z-index: 3;
  top: 24px; left: 24px; right: auto; bottom: auto;
  width: clamp(140px, 16vw, 260px); height: auto;
  object-fit: contain; opacity: 1;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.35));
}
@media (max-width: 640px) {
  .hero .hero-logo, .page-hero .hero-logo, .lazer-hero .hero-logo { top: 16px; left: 16px; width: clamp(100px, 30vw, 160px); }
}
.hero-eyebrow {
  text-transform: uppercase; font-size: 12.5px; letter-spacing: .16em;
  color: #f1d9b8; margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: #f1d9b8; display: inline-block; }
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.03;
  max-width: 820px;
  color: #fff;
}
.hero h1 em { color: #d9ecff; font-style: italic; font-weight: 400; }
.hero p.lede {
  font-size: 17px; line-height: 1.6; max-width: 480px; margin-top: 20px; color: rgba(255,255,255,.86);
}

/* booking bar */
.booking-bar {
  position: relative; z-index: 3;
  margin: 34px auto 0;
  max-width: 1180px;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: 0 24px 48px -18px rgba(9,22,32,.45);
  display: flex; flex-wrap: wrap;
}
.booking-field { flex: 1; min-width: 150px; padding: 16px 22px; border-right: 1px solid var(--line); }
.booking-field:last-of-type { border-right: none; }
.booking-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .55; margin-bottom: 6px; }
.booking-field .val { font-size: 15.5px; font-weight: 600; }
.booking-field input.booking-input {
  display: block; width: 100%; border: 0; background: transparent; padding: 0; font: inherit;
  font-size: 15.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.booking-field input.booking-input:focus { outline: none; }
.booking-field input.booking-input::placeholder { color: var(--ink); opacity: .5; font-weight: 500; }
.booking-submit {
  flex: 0 0 auto;
  background: var(--terracotta); color: #fff;
  border: none; padding: 0 34px;
  font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: .03em;
  cursor: pointer; text-decoration: none; display: flex; align-items: center;
}
@media (max-width: 720px) {
  .booking-bar { margin-top: 24px; }
  .booking-submit { flex-basis: 100%; padding: 16px; justify-content: center; }
}
.booking-note { margin: 14px 4px 0; font-size: 12.5px; color: rgba(255,255,255,.72); letter-spacing: .01em; }

/* ---------- positioning strip ---------- */
.positioning { padding: 96px 0 80px; text-align: center; }
.positioning .wrap { max-width: 760px; }
.positioning .kicker { text-transform: uppercase; letter-spacing: .16em; font-size: 12.5px; color: var(--terracotta); font-weight: 600; margin-bottom: 22px; }
.positioning h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.4; font-weight: 400; }
.positioning h2 .hl { color: var(--marine); font-style: italic; font-weight: 500; }

/* ---------- generic section ---------- */
.section { padding: 0 0 96px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.section-head .kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--turquoise); font-weight: 700; margin-bottom: 10px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.section-head p { max-width: 420px; font-size: 14.5px; opacity: .75; line-height: 1.6; }

/* ---------- accommodations ---------- */
.rooms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); align-items: stretch; }
.room-card { background: var(--paper); display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.room-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.room-card-body { padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.room-card .n { font-size: 12px; letter-spacing: .08em; opacity: .5; font-weight: 600; }
.room-card h3 { font-size: 1.35rem; }
.room-card .occ { font-size: 13px; color: var(--marine); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.room-card p { font-size: 13.5px; line-height: 1.6; opacity: .78; margin: 0; flex: 1; }
.room-card .amen { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .55; }
.room-card .amen span { border: 1px solid var(--line); padding: 4px 8px; border-radius: 20px; }
@media (max-width: 960px) { .rooms-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rooms-grid { grid-template-columns: 1fr; } }

/* ---------- feature split (pool) ---------- */
.feature-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; background: var(--paper); border: 1px solid var(--line); }
.feature-split img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.feature-text { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.feature-text .kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--terracotta); font-weight: 700; }
.feature-text h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; }
.feature-text p { font-size: 14.5px; line-height: 1.75; opacity: .8; max-width: 420px; }
.feature-text .steps { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--marine); margin-top: 6px; }
.feature-text .steps .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--marine); }
@media (max-width: 860px) { .feature-split { grid-template-columns: 1fr; } .feature-text { padding: 40px 28px; } }

/* ---------- map callout ---------- */
.map-callout { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); background: var(--paper); }
.map-callout img { width: 100%; display: block; }
.map-callout .txt { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.map-callout .kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--turquoise); font-weight: 700; }
.map-callout h4 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.4rem; }
.map-callout p { font-size: 13.5px; opacity: .75; line-height: 1.65; max-width: 360px; }
@media (max-width: 860px) { .map-callout { grid-template-columns: 1fr; } }

/* ---------- restaurant band ---------- */
.rest-band { background: var(--marine-deep); color: #fdf6ec; padding: 88px 0; margin-bottom: 96px; }
.rest-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.rest-grid .kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: #f1c79c; font-weight: 700; margin-bottom: 16px; }
.rest-grid h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: #fff; }
.rest-grid p { font-size: 14.5px; line-height: 1.75; color: rgba(253,246,236,.8); max-width: 420px; margin-top: 18px; }
.menu-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.menu-tags span { border: 1px solid rgba(253,246,236,.28); padding: 7px 14px; border-radius: 20px; font-size: 12.5px; letter-spacing: .02em; }
.rest-photo-stack { display: flex; flex-direction: column; gap: 10px; }
.rest-photo-stack .main { border-radius: 2px; overflow: hidden; }
.rest-photo-stack .main img { width: 100%; height: 100%; object-fit: cover; max-height: 340px; }
.rest-photo-stack .sub { display: flex; gap: 10px; }
.rest-photo-stack .sub img { width: 100%; height: 140px; object-fit: cover; border-radius: 2px; }
@media (max-width: 860px) { .rest-grid { grid-template-columns: 1fr; } }

/* ---------- momentos gallery (home) ---------- */
.momentos {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-bottom: 96px;
}
.momentos figure { margin: 0; position: relative; background: var(--paper); overflow: hidden; }
.momentos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.momentos figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 24px;
  background: linear-gradient(0deg, rgba(9,22,32,.78), transparent);
  color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .01em;
}
.momentos .m1 { grid-column: 1; grid-row: 1 / 3; }
.momentos .m2 { grid-column: 2; grid-row: 1; }
.momentos .m3 { grid-column: 3; grid-row: 1; }
.momentos .m4 { grid-column: 2 / 4; grid-row: 2; }
@media (max-width: 860px) {
  .momentos { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 220px; }
  .momentos .m1 { grid-column: 1/3; grid-row: 1; }
  .momentos .m2 { grid-column: 1; grid-row: 2; }
  .momentos .m3 { grid-column: 2; grid-row: 2; }
  .momentos .m4 { grid-column: 1/3; grid-row: 3; }
}
@media (max-width: 560px) {
  .momentos { grid-template-columns: 1fr; grid-template-rows: none; }
  .momentos .m1, .momentos .m2, .momentos .m3, .momentos .m4 { grid-column: 1; grid-row: auto; height: 280px; }
}

/* ---------- lazer gallery (dedicated page) ---------- */
.lazer-hero, .page-hero {
  position: relative; min-height: 46vh; display: flex; align-items: flex-end; background: #0e2433;
}
.lazer-hero img, .page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.lazer-hero::after, .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,25,36,.1) 0%, rgba(9,22,32,.82) 100%); }
.lazer-hero-content, .page-hero-content { position: relative; z-index: 2; width: 100%; padding: 0 28px 44px; max-width: 1180px; margin: 0 auto; color: #fff; }

/* ---------- restaurante page ---------- */
.rest-intro { max-width: 720px; margin: 0 auto 12px; }
.rest-intro .lede { font-size: 15.5px; line-height: 1.7; opacity: .85; margin-bottom: 36px; }
.rest-hours { display: grid; gap: 22px; }
.rest-hours .block { border-top: 1px solid var(--line); padding-top: 18px; }
.rest-hours .block h4 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.05rem; margin: 0 0 8px; color: var(--marine); }
.rest-hours .block p { font-size: 13.5px; line-height: 1.75; opacity: .8; margin: 0; }
.rest-hours .block.warn h4 { color: var(--terracotta); }

.rest-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 52px 0 88px; }
.rest-photos img { width: 100%; height: 260px; object-fit: cover; border-radius: 2px; }
@media (max-width: 760px) { .rest-photos { grid-template-columns: 1fr; margin: 40px 0 64px; } .rest-photos img { height: 220px; } }

.cardapio-stack { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.cardapio-stack img { width: 100%; border-radius: 4px; border: 1px solid var(--line); }

/* ---------- como chegar ---------- */
.address-block { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; margin: 0 0 60px; }
.address-block .addr-text { flex: 1; min-width: 240px; }
.address-block .addr-text h4 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.2rem; margin: 0 0 10px; }
.address-block .addr-text p { font-size: 14px; line-height: 1.8; opacity: .82; margin: 0; }
.address-block img { width: 220px; height: 150px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); flex-shrink: 0; }
@media (max-width: 600px) { .address-block img { width: 100%; height: 200px; } }

.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.route-card { background: var(--paper); padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; }
.route-card .kicker { text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; color: var(--turquoise); font-weight: 700; }
.route-card p { font-size: 13.5px; line-height: 1.7; opacity: .8; margin: 0; }
.route-card p.warn { color: var(--terracotta); opacity: 1; font-weight: 600; }
@media (max-width: 760px) { .route-grid { grid-template-columns: 1fr; } }

.map-click { display: block; max-width: 620px; margin: 56px auto 0; }
.map-click img { width: 100%; border-radius: 4px; border: 1px solid var(--line); }
.map-caption { text-align: center; font-size: 12.5px; opacity: .6; margin-top: 12px; }

.lazer-grid {
  columns: 3 260px;
  column-gap: 12px;
  margin-bottom: 30px;
}
.lazer-grid figure {
  margin: 0 0 12px; break-inside: avoid; position: relative; overflow: hidden; border-radius: 2px; background: var(--paper);
}
.lazer-grid img { width: 100%; display: block; }
.lazer-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
  background: linear-gradient(0deg, rgba(9,22,32,.75), transparent);
  color: #fff; font-size: 13px; font-weight: 600;
}
@media (max-width: 700px) { .lazer-grid { columns: 2 200px; } }

.amenities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.amenity-card { background: var(--paper); padding: 30px 26px; display: flex; flex-direction: column; gap: 10px; }
.amenity-card .kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; color: var(--turquoise); font-weight: 700; }
.amenity-card h3 { font-size: 1.2rem; }
.amenity-card p { font-size: 13.5px; line-height: 1.65; opacity: .78; margin: 0; }
.amenity-card p.note { opacity: .55; font-size: 12px; }

/* ---------- em construção ---------- */
.em-construcao {
  min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 28px;
}
.em-construcao .card { max-width: 480px; }
.em-construcao .tag {
  display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px;
  color: var(--terracotta); font-weight: 700; margin-bottom: 18px;
  border: 1px solid var(--terracotta); border-radius: 20px; padding: 6px 14px;
}
.em-construcao h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 16px; }
.em-construcao p { font-size: 15px; line-height: 1.7; opacity: .78; margin-bottom: 30px; }
.whatsapp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff; text-decoration: none;
  padding: 14px 26px; border-radius: 30px; font-weight: 700; font-size: 14.5px; letter-spacing: .01em;
}
.whatsapp-btn svg { width: 20px; height: 20px; fill: #fff; }
.em-construcao .back-home { display: block; margin-top: 22px; font-size: 13.5px; opacity: .65; text-decoration: underline; }

/* ---------- footer ---------- */
footer { background: var(--marine-deep); color: rgba(253,246,236,.72); padding: 56px 0 34px; font-size: 13.5px; }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(253,246,236,.16); }
.footer-col h5 { font-family: 'Fraunces', serif; color: #f1c79c; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin-bottom: 14px; }
.footer-grid .logo { color: #fff; }
.footer-col a { display: block; text-decoration: none; opacity: .82; margin-bottom: 8px; }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; opacity: .6; }
.whatsapp-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  color: #b9f0cf; text-decoration: none; font-weight: 600; font-size: 13.5px;
}
.whatsapp-chip i { font-style: normal; color: #25D366; }

/* ---------- cotação e reserva ---------- */
.quote-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 44px 40px; max-width: 640px; margin: 0 auto;
}
.quote-card .lede { font-size: 15.5px; line-height: 1.7; opacity: .85; margin-bottom: 34px; }
.quote-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.quote-field { flex: 1 1 200px; background: var(--paper); padding: 14px 20px; position: relative; }
.quote-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .55; margin-bottom: 6px; }
.quote-field input {
  width: 100%; border: 0; background: transparent; padding: 0; font: inherit;
  font-size: 15.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.quote-field input:focus { outline: none; }
.quote-field input::placeholder { color: var(--ink); opacity: .4; font-weight: 500; }
.quote-submit {
  flex: 1 1 160px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--terracotta); color: #fff; border: 0; font-weight: 700; font-size: 14.5px;
  letter-spacing: .01em; cursor: pointer; padding: 20px 22px; min-height: 62px; transition: filter .15s ease;
}
.quote-submit:hover { filter: brightness(1.06); }
@media (max-width: 640px) {
  .quote-card { padding: 32px 22px; }
  .quote-form { flex-direction: column; }
  .quote-submit { padding: 16px; }
}
.quote-note { margin: 16px 4px 0; font-size: 12.5px; opacity: .6; line-height: 1.6; }
.quote-errors { margin: 0 0 18px; padding: 12px 16px; background: rgba(193,97,60,.1); border: 1px solid var(--terracotta); border-radius: 4px; color: var(--terracotta); font-size: 13.5px; font-weight: 600; }

.quote-result { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 40px; text-align: center; max-width: 1180px; margin: 0 auto; }
.quote-period { font-size: 13px; opacity: .6; margin-top: -8px; }
.quote-price { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 500; color: var(--marine); margin-top: 2px; }
.quote-price-note { font-size: 13px; font-weight: 600; opacity: .7; margin-bottom: 2px; }
.quote-extra { font-size: 12.5px; opacity: .8; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.quote-pix { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--turquoise); }
.room-card-body .whatsapp-btn { margin-top: auto; justify-content: center; }
.room-card-body .reservar-btn { margin-top: auto; align-self: center; }
.pacote-card { text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.pacote-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.pacote-badge {
  display: inline-block; align-self: flex-start; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: #fff; background: var(--terracotta); border-radius: 20px; padding: 5px 12px;
}
/* Coluna central da página de detalhe do pacote (data, texto do pacote,
   tabela de valores, CTAs) - pedido do Marcelo em 27/08/2026 pra tudo ficar
   centralizado na página, em vez de esticar a largura toda do .wrap. */
.pacote-conteudo { max-width: 820px; margin: 0 auto; }
/* Cartão em volta da tabela de valores - fundo mais claro que o da página
   (paper sobre sand) pra destacar a tabela, igual pedido do Marcelo. */
.pacote-tarifas-card {
  overflow-x: auto; background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.06); margin-bottom: 10px;
}
.pacote-tarifas-tabela { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.pacote-tarifas-tabela th, .pacote-tarifas-tabela td { padding: 18px 24px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.pacote-tarifas-tabela th:first-child, .pacote-tarifas-tabela td:first-child { text-align: left; white-space: normal; }
.pacote-tarifas-tabela thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; opacity: .6; font-weight: 700;
  background: var(--sand); padding: 16px 24px;
}
.pacote-tarifas-tabela tbody tr:last-child td { border-bottom: 0; }
.pacote-tarifas-tabela tbody tr:hover { background: var(--sand); }
.pacote-tarifas-tabela td { font-variant-numeric: tabular-nums; }
.pacote-tarifas-tabela td:first-child strong { font-size: 15.5px; }
.pacote-tarifas-tabela .indisponivel { opacity: .35; }
/* Botão "Reservar" dentro de cada linha da tabela de tarifas do pacote -
   leva direto pro formulário de /Reservas com acomodação e período do
   pacote já preenchidos (mesmo fluxo do reservas.asp clássico, só que sem
   depender de cookies pra carregar as datas). Formato de pílula com sombra
   pra ficar claramente um botão clicável, não um link de texto perdido no
   meio dos valores da tabela.  */
.pacote-tarifas-tabela .reservar-btn-sm {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--terracotta); color: #fff; text-decoration: none;
  padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: 13px;
  letter-spacing: .02em; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.18);
  transition: filter .15s ease, transform .15s ease;
}
.pacote-tarifas-tabela .reservar-btn-sm:hover { filter: brightness(1.07); transform: translateY(-1px); }
.pacote-obs { font-size: 14px; line-height: 1.7; opacity: .8; text-align: center; margin: 0 auto 28px; max-width: 640px; }
/* pacote.Obs vem de um campo de texto rico (HTML) do admin clássico, com
   <div>s, <strong>s e &nbsp; como espaçador de linha em branco - por isso
   ganha um cartão próprio em vez de virar um parágrafo comum (senão o
   texto sai desalinhado e "grudado", já que <p> não pode conter <div>).
   Fundo paper (mais claro que o sand da página), igual ao cartão da tabela. */
.pacote-obs-html {
  font-size: 14.5px; line-height: 1.85; text-align: left; margin: 0 0 28px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 24px 28px;
}
.pacote-obs-html strong { color: var(--marine); }
.pacote-obs-html div { margin-bottom: 2px; }
.quote-result .tag {
  display: inline-block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--turquoise); font-weight: 700; border: 1px solid var(--turquoise); border-radius: 20px; padding: 6px 14px; margin-bottom: 20px;
}
.quote-result h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 10px; }
.quote-result .dates { font-size: 16px; font-weight: 600; color: var(--marine); margin-bottom: 18px; }
.quote-result p { font-size: 14.5px; line-height: 1.7; opacity: .78; max-width: 460px; margin: 0 auto 26px; }

/* bootstrap-datepicker skin, matched to site palette */
.datepicker { font-family: 'Work Sans', sans-serif; z-index: 20; }
.datepicker.dropdown-menu {
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(22,50,74,.16);
  background: var(--paper); padding: 10px;
}
.datepicker table tr td, .datepicker table tr th { font-size: 13px; }
.datepicker table tr th.datepicker-switch,
.datepicker table tr th.next,
.datepicker table tr th.prev { color: var(--marine); font-weight: 700; }
.datepicker table tr td.day:hover, .datepicker table tr td.focused { background: var(--sand-deep); color: var(--ink); }
.datepicker table tr td.today, .datepicker table tr td.today:hover { background: var(--sand-deep); color: var(--ink); }
.datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover { background: var(--sand-deep); }
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
  background: var(--terracotta) !important; color: #fff !important; text-shadow: none;
}
.datepicker table tr td.range { background: rgba(63,167,156,.16); }
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { color: var(--ink); opacity: .28; }
.datepicker table tr td span.focused, .datepicker table tr td span:hover { background: var(--sand-deep); }
.datepicker table tr td span.active, .datepicker table tr td span.active:hover { background: var(--terracotta) !important; color: #fff !important; }

/* ---------- botão reservar (Cotação -> Reservas) ---------- */
.reservar-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--terracotta); color: #fff; text-decoration: none;
  padding: 12px 18px; border-radius: 6px; text-align: center; line-height: 1.3;
  transition: filter .15s ease;
}
.reservar-btn:hover { filter: brightness(1.06); }
.reservar-btn .rb-title { font-weight: 700; font-size: 14.5px; letter-spacing: .01em; }
.reservar-btn .rb-note { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- página de Reserva ---------- */
.res-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 44px 40px; max-width: 760px; margin: 0 auto;
}
@media (max-width: 640px) { .res-card { padding: 30px 20px; } }
.res-summary {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline;
  background: var(--sand); border: 1px solid var(--line); border-radius: 6px;
  padding: 16px 20px; margin-bottom: 34px; font-size: 13.5px;
}
.res-summary strong { color: var(--marine); font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; }
.res-summary .tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.res-section { margin-bottom: 34px; }
.res-section:last-of-type { margin-bottom: 0; }
.res-section h2 {
  font-size: 1.05rem; font-weight: 600; margin-bottom: 4px;
}
.res-section .res-hint { font-size: 13px; opacity: .65; margin: 0 0 16px; line-height: 1.6; }
.res-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.res-row:last-child { margin-bottom: 0; }
.res-field { flex: 1 1 200px; }
.res-field.res-field-sm { flex: 0 1 100px; }
.res-field label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .6;
  margin-bottom: 6px;
}
.res-field label .req { color: var(--terracotta); }
.res-field input[type="text"],
.res-field input[type="email"],
.res-field select,
.res-field textarea {
  width: 100%; border: 1px solid var(--line); background: var(--sand); color: var(--ink);
  border-radius: 4px; padding: 11px 13px; font: inherit; font-size: 14.5px;
}
.res-field input:focus, .res-field select:focus, .res-field textarea:focus {
  outline: none; border-color: var(--marine);
}
.res-field textarea { resize: vertical; min-height: 90px; }
.res-field.has-error input, .res-field.has-error select { border-color: var(--terracotta); }
.res-field-error { display: block; font-size: 12px; color: var(--terracotta); font-weight: 600; margin-top: 5px; }
.res-checkbox {
  display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.6; cursor: pointer;
}
.res-checkbox input { margin-top: 3px; flex-shrink: 0; }
.res-checkbox a { color: var(--marine); font-weight: 600; }
.res-radio-group { display: flex; flex-direction: column; gap: 10px; }
.res-radio {
  display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; cursor: pointer;
}
.res-radio input { margin-top: 3px; flex-shrink: 0; }
.res-radio .rb-price { display: block; font-size: 12px; opacity: .65; margin-top: 2px; }
.res-submit {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--terracotta); color: #fff; border: 0; font-weight: 700; font-size: 15px;
  letter-spacing: .01em; cursor: pointer; padding: 18px 22px; border-radius: 6px; margin-top: 8px;
  transition: filter .15s ease;
}
.res-submit:hover { filter: brightness(1.06); }
.res-submit:disabled { opacity: .75; cursor: not-allowed; filter: none; }
.res-submit-spinner {
  display: none; width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
  animation: res-spin .7s linear infinite;
}
.res-submit.is-loading .res-submit-spinner { display: inline-block; }
@keyframes res-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .res-submit-spinner { animation: none; }
}
.res-guard { text-align: center; padding: 20px 0; }
.res-guard p { font-size: 14.5px; line-height: 1.7; opacity: .78; max-width: 460px; margin: 0 auto 22px; }

/* ---------- página de status da reserva ---------- */
.status-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  margin-bottom: 32px;
}
.status-card { background: var(--paper); padding: 22px 20px; text-align: center; }
.status-card .sc-label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .55;
  font-weight: 700; margin-bottom: 12px;
}
.status-card .sc-main { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 600; color: var(--marine); }
.status-card .sc-sub { font-size: 12.5px; opacity: .65; margin-top: 4px; line-height: 1.6; }
.status-card .sc-line { font-size: 13px; line-height: 1.8; }

.status-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 24px; }
.status-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.status-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .55;
  padding: 12px 16px; background: var(--sand); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.status-table th.status-table-heading {
  background: var(--marine); color: #fff; opacity: 1; text-align: center; font-size: 12.5px;
  letter-spacing: .08em; padding: 12px 16px; white-space: normal;
}
.status-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.status-table tr:last-child td { border-bottom: 0; }
.status-table .st-unidade { font-weight: 600; }
.status-table .st-periodo { font-size: 12.5px; opacity: .65; }
.status-table .st-bloqueada { color: var(--terracotta); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.status-table tfoot td { font-weight: 700; background: var(--sand); }
.status-table tfoot tr.st-total td { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--marine); }

/* ---------- voucher de reserva confirmada (status-da-reserva) ---------- */
.voucher-card {
  max-width: 720px; margin: 0 auto 40px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 36px 40px;
}
.voucher-title { font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--marine); margin: 0 0 10px; }
.voucher-note { font-size: 13px; opacity: .75; line-height: 1.7; margin: 0 0 20px; }
.voucher-row { font-size: 14px; line-height: 1.8; margin: 0 0 8px; }
.voucher-aviso { font-size: 13px; line-height: 1.8; opacity: .85; margin: 18px 0; }
.voucher-hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.voucher-subtitulo { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--marine); margin: 0 0 14px; }
.voucher-legal { font-size: 11.5px; opacity: .6; line-height: 1.6; text-align: right; margin: 6px 0 0; }

@media print {
  body * { visibility: hidden; }
  .voucher-card, .voucher-card * { visibility: visible; color: #000 !important; }
  .voucher-card { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; border: 0; padding: 0; margin: 0; }
}

/* ---------- box de pagamento Pix (status-da-reserva) ---------- */
.pix-card {
  max-width: 480px; margin: 0 auto 32px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 30px 32px; text-align: center;
}
.pix-titulo { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--marine); margin: 0 0 10px; }
.pix-texto { font-size: 13.5px; line-height: 1.7; opacity: .8; margin: 0 0 18px; }
.pix-prazo {
  background: var(--sand); border: 1px solid var(--terracotta); border-radius: 6px; padding: 10px 14px;
  font-size: 13px; line-height: 1.6; color: var(--ink); margin: 0 0 20px;
}
.pix-prazo strong { color: var(--terracotta); font-size: 14.5px; }
.pix-valor-de { font-size: 14px; opacity: .6; text-decoration: line-through; margin-bottom: 2px; }
.pix-desconto-label { font-size: 12px; opacity: .7; margin: -14px 0 20px; }
.pix-valor { font-family: 'Fraunces', serif; font-size: 1.8rem; color: var(--terracotta); font-weight: 600; margin-bottom: 20px; }
.pix-qrcode { margin-bottom: 18px; }
.pix-qrcode img { display: block; margin: 0 auto; border: 1px solid var(--line); border-radius: 6px; padding: 8px; background: #fff; }
.pix-copiacola { display: flex; gap: 8px; margin-bottom: 24px; justify-content: center; }
.pix-copiacola input {
  flex: 1; min-width: 0; font-size: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--sand); color: var(--ink); font-family: monospace;
}
.pix-copiacola button {
  background: var(--marine); color: #fff; border: 0; border-radius: 6px; padding: 10px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pix-dados { text-align: left; border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 18px; }
.pix-dados p { font-size: 13.5px; line-height: 1.7; margin: 0 0 12px; }
.pix-aviso { font-size: 12.5px; line-height: 1.7; opacity: .8; text-align: left; margin: 0; }

@media (max-width: 520px) {
  .pix-card { padding: 24px 20px; }
  .pix-copiacola { flex-direction: column; }
}