/*
Theme Name: Hotel Balneário Cabo Frio
Author: Daniel Pimenta
Description: Block theme for Hotel Balneário Cabo Frio. Ported from the Astro demo.
Version: 0.9.3
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hotel-balneario
*/

/* ===== tokens ===== */
:root {
  --navy: #0a2a43;
  --navy-dark: #071e31;
  --gold: #bc9a5f;
  --gold-light: #d9c79c;
  --muted: #6b7683;
  /* Surface ramp, from the design system: page < soft < chip/band, then the two border weights. */
  --page: #ffffff;
  --soft: #f5f7f9;
  --chip: #edf2f6;
  --band: #f4f7fa;
  --line: #e3e8ed;
  --line-strong: #cfd8df;
  --chip-text: #2a5675;
  /* warning red pair: dark on light surfaces, soft on navy bands */
  --danger: #8c1d18;
  --danger-soft: #e9a6a0;
}

/* ===== base ===== */
/* deep links land below the 72px fixed header */
[id] {
  scroll-margin-top: 86px;
}
body {
  background: var(--page);
  color: #35414e;
  font-family: 'Karla', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--navy);
  text-decoration: none;
}
a:hover {
  color: var(--gold);
}
input,
select,
button {
  font-family: 'Karla', sans-serif;
}
h1,
h2,
h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  margin: 0;
}

/* reveal on scroll — site.js only tags elements that start below the fold */
[data-reveal] {
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
[data-reveal].pre {
  opacity: 0;
  transform: translateY(28px);
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}

@keyframes hbMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ===== shared section furniture ===== */
h2 {
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.15;
}
.kicker {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.32em;
  font-weight: 700;
  text-transform: uppercase;
}
.section-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 52px;
}
.section-intro {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}
/* TODO(teste da cliente): fixed 4/5-column variants of the apartments section, so
   the client can compare card counts side by side — remove with the extra sections. */
.card-grid.is-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.card-grid.is-cols-5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .card-grid.is-cols-4,
  .card-grid.is-cols-5 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
  }
}
/* Vertical rhythm comes from the rules in this file, exactly as in the design.
   The editor's automatic block gap is switched off in theme.json — left on, it
   opens strips between sections and pushes the card contents apart. */

/* ===== header ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(7, 26, 42, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* the logged-in admin bar would otherwise cover the header */
.admin-bar .site-header {
  top: 32px;
}
.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}
.brand-mark img {
  width: 52px;
  height: 52px;
  max-width: none;
  object-fit: cover;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-name {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand-city {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold-light);
  font-weight: 700;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.main-nav a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
}
.main-nav a:hover,
.main-nav a.is-current {
  color: var(--gold-light);
}
.main-nav a.is-current {
  font-weight: 600;
  border-bottom: 1px solid rgba(217, 199, 156, 0.6);
  padding-bottom: 2px;
}

/* Cabo Frio holds the city page and the experiences. Opened by hover and by keyboard
   focus — no JS, and the mobile menu lists both pages flat, so nothing to open there. */
.nav-drop {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-drop-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-drop-toggle::after {
  content: '';
  width: 10px;
  height: 10px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.6" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat center / contain;
  opacity: 0.85;
  transition: transform 0.25s;
}
.nav-drop:hover .nav-drop-toggle::after,
.nav-drop:focus-within .nav-drop-toggle::after {
  transform: rotate(180deg);
}
.nav-drop-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 212px;
  /* the padding bridges the gap under the toggle, so the pointer never leaves the
     hover area on its way down to the menu */
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-drop-menu > * {
  background: rgba(7, 26, 42, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
}
.main-nav .nav-drop-menu a {
  color: rgba(255, 255, 255, 0.88);
  padding: 11px 14px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-nav .nav-drop-menu a + a {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.main-nav .nav-drop-menu a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--gold-light);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-wa {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-wa:hover {
  border-color: var(--gold-light);
  background: rgba(217, 199, 156, 0.12);
}
/* ===== language switcher ===== */
.lang-switch {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.lang-switch a {
  color: rgba(255, 255, 255, 0.55);
  padding-bottom: 2px;
}
.lang-switch .lang-sep {
  margin: 0 7px;
  color: rgba(255, 255, 255, 0.3);
}
.lang-switch a:hover {
  color: var(--gold-light);
}
.lang-switch a.is-current {
  color: var(--gold-light);
  border-bottom: 1px solid rgba(217, 199, 156, 0.6);
}
.lang-switch.is-menu {
  margin-top: 16px;
  font-size: 15px;
}
/* Undo the 8px padding every .mobile-menu a carries, or the underline floats away. */
.lang-switch.is-menu a {
  padding: 0 0 2px;
}

.btn-book {
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.25s;
}
.btn-book:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
}
.hamburger span {
  width: 22px;
  height: 2px;
  background: #fff;
  display: block;
}
.hamburger span.short {
  width: 14px;
  background: var(--gold-light);
}

/* ===== mobile menu ===== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(7, 26, 42, 0.97);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  padding: 8px;
}
.menu-close {
  position: absolute;
  top: 22px;
  right: 22px;
  background: none;
  border: none;
  color: var(--gold-light);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
}

/* ===== sticky bar ===== */
.sticky-bar {
  position: fixed;
  /* sits below the fixed 72px header so the nav stays reachable */
  top: 72px;
  left: 0;
  right: 0;
  z-index: 55;
  background: #fff;
  box-shadow: 0 6px 28px rgba(7, 26, 42, 0.18);
  /* extra offset fully clears the translucent header when hidden */
  transform: translateY(calc(-100% - 80px));
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-bar .sticky-bar {
  top: 104px;
}
.sticky-bar.show {
  transform: translateY(0);
}
.sticky-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sticky-brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: var(--navy);
  margin-right: auto;
  white-space: nowrap;
}
.sticky-fields {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sticky-fields input,
.sticky-fields select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #35414e;
  background: var(--soft);
}
.sticky-search {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s;
}
.sticky-search:hover {
  background: var(--gold);
}

/* ===== whatsapp float ===== */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 55;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(7, 26, 42, 0.3);
  transition: transform 0.25s;
}
.wa-float:hover {
  transform: scale(1.08);
}
/* Asksuite owns the bottom-right corner; ours moves left rather than fight a
   z-index of 2147483647 */
.has-chatbot .wa-float {
  right: auto;
  left: 24px;
}

/* ===== hero ===== */
.hero.wp-block-cover {
  min-height: 94vh;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.hero .wp-block-cover__image-background {
  filter: saturate(1.05) brightness(0.92);
}
/* The demo stacked two gradient divs over the photo. core/cover already ships one
   overlay layer sitting between image and content, so both gradients ride on it as
   background-image layers — no extra blocks and no fight with the core z-index rules,
   which win on specificity anyway. */
.hero.wp-block-cover .wp-block-cover__background {
  opacity: 1;
  /* the overlay inherits the cover's black background — at full opacity that would
     hide the photo entirely */
  background-color: transparent;
  /* client revision 3, item 1: much lighter than the first rounds — the client
     wants to actually see the photo */
  background-image:
    radial-gradient(ellipse 64% 48% at 50% 42%, rgba(7, 26, 42, 0.4) 0%, rgba(7, 26, 42, 0.16) 55%, rgba(7, 26, 42, 0) 78%),
    linear-gradient(180deg, rgba(7, 26, 42, 0.34) 0%, rgba(7, 26, 42, 0.12) 45%, rgba(7, 26, 42, 0.44) 100%);
}
.hero.wp-block-cover .wp-block-cover__inner-container {
  text-align: center;
  padding: 110px 24px 205px;
  max-width: 900px;
}
/* scroll cue — decoration only, kept out of the block tree */
.hero .hero-kicker {
  margin: 16px 0 9px;
  color: var(--gold-light);
  font-size: 12px;
  letter-spacing: 0.4em;
  font-weight: 700;
  text-transform: uppercase;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(7, 26, 42, 0.4);
}
.hero .hero-sub {
  margin: 22px auto 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.6;
}

/* ===== booking widget ===== */
.widget-wrap {
  max-width: 1080px;
  margin: -96px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}
.widget {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(7, 26, 42, 0.22);
  padding: 26px 28px;
  border: 1px solid rgba(188, 154, 95, 0.25);
}
.widget-kicker {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
}
.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  align-items: end;
}
.widget-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.widget-grid label span {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.06em;
}
.widget-grid input,
.widget-grid select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  color: #35414e;
  background: var(--soft);
  width: 100%;
  box-sizing: border-box;
}
.widget-search {
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.25s;
  min-height: 47px;
}
.widget-search:hover {
  background: var(--navy);
  color: #fff;
}

/* ===== apartamentos ===== */
/* 1280 = 1240 of content + the 20px side padding. The demo relied on content-box
   sizing; WordPress sets border-box on every block, so the max-width has to carry
   the padding for the inner grid to land on the same 1240px. */
.apartments {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 20px 40px;
}
.apto-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(7, 26, 42, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.apto-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(7, 26, 42, 0.14);
}
.card-img.wp-block-image {
  margin: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.apto-card:hover .card-img img {
  transform: scale(1.05);
}
.card-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.card-body h3 {
  font-size: 24px;
  color: var(--navy);
}
.card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.card-body > p:not(.card-more) {
  flex: 1;
}
/* the demo styled a bare <a>; as a paragraph it would inherit .card-body p sizing */
.card-body p.card-more {
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 0.04em;
}
.card-more a {
  color: var(--gold);
}
.card-more a:hover {
  color: var(--navy);
}
.apto-features {
  text-align: center;
  margin: 36px auto 0;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.apto-features strong {
  color: var(--navy);
}


/* ===== café da manhã ===== */
/* 1280 = 1240 of content + the 20px side padding. The demo relied on content-box
   sizing; WordPress sets border-box on every block, so the max-width has to carry
   the padding for the inner grid to land on the same 1240px. */
.breakfast {
  max-width: 1280px;
  margin: 0 auto;
  /* no bottom padding: the section that follows carries its own 88px margin-top */
  padding: 88px 20px 0;
}
.breakfast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}
.breakfast-img.wp-block-image {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(7, 26, 42, 0.16);
}
.breakfast-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4/3;
}
.breakfast-text {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.75;
}
.chips {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  background: var(--chip);
  color: var(--chip-text);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.marquee {
  margin-top: 56px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: hbMarquee 170s linear infinite;
}
.marquee-img {
  height: 180px;
  width: auto;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
}

/* ===== eventos ===== */
.events {
  background: var(--band);
  padding: 96px 20px;
}
.events-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}
.events-grid > * {
  margin-block: 0;
}
.events-text {
  margin: 20px 0 0;
  color: #5c6470;
  font-size: 16.5px;
  line-height: 1.75;
}
.events-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.events-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: #35414e;
  font-size: 15px;
}
/* the demo wrapped a <span class="dash"> in every item; core/list has no room for
   that, so the dash is drawn instead of typed */
.events-list li::before {
  content: '—';
  color: var(--gold);
  font-weight: 800;
}
.events-cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* second CTA is the quieter one — outlined on the sand background */
.events-cta .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--navy);
}
.events-cta .is-style-outline .wp-block-button__link:hover {
  background: none;
  border-color: var(--navy);
  color: var(--navy);
}
.events-cta .wp-block-button__link {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: all 0.25s;
}
.events-cta .wp-block-button__link:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}
.events-wa {
  margin: 16px 0 0;
}
.events-wa a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
}
.events-wa a::before {
  content: '';
  width: 17px;
  height: 17px;
  flex: none;
  background: no-repeat center / contain url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="%23BC9A5F"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.1-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1.1-1.4-1.1-2.7s.7-1.9.9-2.2c.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.4l.8 2c.1.2.1.4 0 .6l-.4.6-.4.4c-.1.1-.2.3-.1.5.1.2.6 1 1.3 1.7.9.8 1.7 1.1 2 1.2.2.1.4.1.5-.1l.7-.9c.2-.2.4-.3.6-.2l1.9.9c.2.1.4.2.4.3.1.2.1.7-.1 1.3z"/></svg>');
}
.events-wa a:hover {
  color: var(--navy);
}
.events-img.wp-block-image {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(7, 26, 42, 0.14);
  aspect-ratio: 4/3;
}
.events-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== cabo frio ===== */
/* 1280 = 1240 of content + the 20px side padding. The demo relied on content-box
   sizing; WordPress sets border-box on every block, so the max-width has to carry
   the padding for the inner grid to land on the same 1240px. */
.city {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 20px;
}
.city .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.city-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(7, 26, 42, 0.08);
  transition: transform 0.3s;
}
.city-card:hover {
  transform: translateY(-6px);
}
.city-img.wp-block-image {
  margin: 0;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.city-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.city-card:hover .city-img img {
  transform: scale(1.05);
}
.city-body {
  padding: 22px 24px 26px;
}
.city-body h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--navy);
}
.city-body p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.city-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.city-cta .wp-block-button__link {
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--navy);
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  transition: all 0.25s;
}
.city-cta .wp-block-button__link:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ===== prova social ===== */
.social {
  background: var(--navy);
  padding: 88px 20px;
}
.social-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.social-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 48px;
}
.score-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: none;
}
.score {
  font-weight: 800;
  font-size: 20px;
  color: var(--navy);
}
.score-of {
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 3px;
}
.score-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.score-headline {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.score-note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  font-family: monospace;
}
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.quotes .wp-block-quote {
  margin: 0;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* the demo typed the opening quote mark as a span; drawing it keeps the block tree
   to what the client actually edits */
.quotes .wp-block-quote::before {
  content: '“';
  color: var(--gold-light);
  font-size: 26px;
  font-family: 'Cormorant Garamond', serif;
  line-height: 0.6;
}
.quotes .wp-block-quote p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.7;
  flex: 1;
}
.quotes cite {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-style: normal;
}
.quotes .sample {
  color: var(--gold);
  font-family: monospace;
  font-size: 11px;
}

/* ===== CTA ===== */
.cta.wp-block-cover {
  min-height: 0;
  padding: 84px 20px;
  text-align: center;
}
.cta.wp-block-cover .wp-block-cover__background {
  opacity: 1;
  background-color: transparent;
  /* same navy veil as the hero: keeps white copy readable over any photo */
  background-image: linear-gradient(180deg, rgba(7, 26, 42, 0.82) 0%, rgba(10, 42, 67, 0.6) 50%, rgba(7, 26, 42, 0.86) 100%);
}
.cta.wp-block-cover .wp-block-cover__inner-container {
  max-width: 720px;
}
.cta h2 {
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  text-wrap: balance;
  margin: 0 2px;
  text-shadow: 0 2px 30px rgba(7, 26, 42, 0.4);
}
.cta p {
  margin: 18px auto 0;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.6;
}
.cta-button {
  margin-top: 32px;
  justify-content: center;
}
.cta-button .wp-block-button__link {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  padding: 17px 38px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  transition: all 0.25s;
  box-shadow: 0 14px 34px rgba(7, 26, 42, 0.45);
}
.cta-button .wp-block-button__link:hover {
  background: var(--gold-light);
  color: var(--navy);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(7, 26, 42, 0.55);
}

/* ===== footer ===== */
.footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 72px 20px 0;
}
.footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-logo {
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  display: inline-flex;
  align-self: flex-start;
}
.footer-logo img {
  height: 34px;
  width: auto;
  display: block;
}
.footer-brand p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}
.pet-badge {
  background: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  border: 1px solid rgba(188, 154, 95, 0.5);
  color: var(--gold-light);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-title {
  color: var(--gold-light);
  font-size: 12px;
  letter-spacing: 0.26em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.footer-address {
  font-size: 14px;
  line-height: 1.7;
}
.footer-col a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}
.footer-col a:hover,
.footer-link:hover {
  color: var(--gold-light);
}
.footer-bottom {
  max-width: 1240px;
  margin: 56px auto 0;
  padding: 22px 0 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.footer-bottom span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* ===== página de apartamentos ===== */
.page-hero.wp-block-cover {
  min-height: 66vh;
  padding: 0;
  align-items: flex-end;
}
.page-hero.wp-block-cover .wp-block-cover__background {
  opacity: 1;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(7, 26, 42, 0.74) 0%, rgba(7, 26, 42, 0.4) 45%, rgba(7, 26, 42, 0.85) 100%);
}
.page-hero.wp-block-cover .wp-block-cover__image-background {
  filter: saturate(1.04) brightness(0.9);
}
.page-hero.wp-block-cover .wp-block-cover__inner-container {
  /* 1280 = 1240 of content + the side padding, same border-box compensation as the
     other sections */
  max-width: 1280px;
  padding: 150px 20px 56px;
  text-align: left;
}
.page-crumbs {
  margin: 0 0 18px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}
.page-crumbs a {
  color: rgba(255, 255, 255, 0.7);
}
.page-crumbs a:hover {
  color: var(--gold-light);
}
.page-crumbs .crumb-sep {
  color: var(--gold);
  margin: 0 6px;
}
.page-crumbs .crumb-here {
  color: var(--gold-light);
}
.rooms-hero.wp-block-cover {
  min-height: 62vh;
}
.city-hero.wp-block-cover {
  min-height: 70vh;
}
.page-hero-cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.page-hero-cta .wp-block-button__link {
  background: var(--gold);
  color: var(--navy);
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.03em;
  transition: all 0.25s;
}
.page-hero-cta .wp-block-button__link:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}
.page-hero-cta .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-weight: 700;
}
.page-hero-cta .is-style-outline .wp-block-button__link:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
  transform: none;
}
.page-hero h1 {
  margin: 0;
  max-width: 820px;
  color: #fff;
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(7, 26, 42, 0.4);
}
.page-hero .hero-kicker {
  margin: 0 0 14px;
  color: var(--gold-light);
  font-size: 12px;
  letter-spacing: 0.4em;
  font-weight: 700;
  text-transform: uppercase;
}
.page-hero-sub {
  margin: 20px 0 0;
  max-width: 580px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
}

.rooms-jump {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rooms-jump-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rooms-jump-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 8px;
}
.rooms-jump-pill a {
  display: block;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
}
.rooms-jump-pill a:hover {
  background: rgba(188, 154, 95, 0.18);
  border-color: var(--gold);
  color: var(--gold-light);
}
.rooms-jump-all {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 700;
}
.rooms-jump-all a {
  color: var(--gold-light);
}
.rooms-jump-all a:hover {
  color: #fff;
}

.room {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 20px 0;
}
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 52px;
  align-items: center;
}
/* The PCD room stacks two real photos, which makes its gallery much taller than the
   copy — centering would float the text mid-air, so that combination top-aligns and
   the pair gets a shorter crop to track the copy height. */
.room-grid:has(.room-shot + .room-shot) {
  align-items: start;
}
.room-gallery .room-shot:first-child:nth-last-child(2) img,
.room-gallery .room-shot + .room-shot img {
  aspect-ratio: 16/10;
}
.room-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.room-shot.wp-block-image {
  grid-column: span 2;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(7, 26, 42, 0.16);
}
.room-shot img {
  width: 100%;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}
/* Photos the hotel has not sent yet. core/image renders nothing on the front end
   until it has a src, so visitors see one photo instead of an empty box; this dashed
   frame is what the client sees in the editor, where the slot is fillable. */
.room-slot.wp-block-image {
  margin: 0;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px dashed var(--line);
  background: rgba(226, 217, 198, 0.25);
}
.room-slot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.room-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.room-badge {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}
.room-badge-navy {
  background: var(--navy);
  color: var(--gold-light);
}
.room-badge-band {
  background: var(--chip);
  color: var(--chip-text);
}
/* the PCD badge: navy pill plus the wheelchair mark */
.room-badge-access {
  background: var(--navy);
  color: var(--gold-light);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.room-badge-access::before,
.rooms-jump-pill.is-pcd a::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23D9C79C" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="4" r="2"/><path d="M12 7v6h4l3 6M12 10H8l-2 9"/></svg>') no-repeat center / contain;
}
.rooms-jump-pill.is-pcd a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.room-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.room-capacity {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.24em;
  font-weight: 700;
  text-transform: uppercase;
}
.room-copy h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.14;
}
.room-text {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.75;
}
.room-specs {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.spec-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.spec-label {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
}
.spec-value {
  margin: 0;
  color: #35414e;
  font-size: 14.5px;
  line-height: 1.65;
}
/* the "parking not included" card on the Padrão room */
.spec-card.is-alert .spec-label {
  color: var(--danger);
}
.spec-card.is-alert .spec-value {
  color: var(--danger);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.spec-extra {
  margin: 8px 0 0;
  color: #35414e;
  font-size: 14.5px;
  line-height: 1.65;
}
.room-copy .chips {
  margin-top: 22px;
  gap: 9px;
}
.room-cta {
  margin-top: 30px;
  gap: 12px 14px;
}
.room-cta .wp-block-button__link {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.03em;
  transition: all 0.25s;
}
.room-cta .wp-block-button__link:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}
.room-cta .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  font-weight: 700;
}
.room-cta .is-style-outline .wp-block-button__link:hover {
  border-color: var(--navy);
  background: none;
  color: var(--navy);
  transform: none;
}

/* ===== comparativo ===== */
.compare {
  background: var(--navy);
  margin-top: 96px;
  padding: 88px 20px;
}
.compare-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.compare h2 {
  color: #fff;
}
.compare .section-head {
  max-width: 620px;
}
.compare .section-intro {
  color: rgba(255, 255, 255, 0.72);
}
/* the wrapper scrolls sideways on phones; tabindex on it keeps keyboard users able
   to reach the overflow */
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-scroll:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* border-collapse would round no corners; separate + 1px spacing over the translucent
   background draws the grid lines, same trick as the old grid */
.compare-table {
  min-width: 1040px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
}
.compare-table thead th {
  background: var(--navy-dark);
  padding: 18px;
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
}
.compare-table thead th:first-child,
.compare-table thead th:last-child {
  text-align: left;
}
.compare-table tbody th,
.compare-table tbody td {
  background: rgba(255, 255, 255, 0.035);
  padding: 22px 18px;
  text-align: center;
  vertical-align: middle;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
}
.compare-table tbody tr.is-featured th,
.compare-table tbody tr.is-featured td {
  background: rgba(188, 154, 95, 0.12);
}
.compare-table tbody th {
  padding: 0;
  text-align: left;
}
.compare-table tbody th a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 18px;
  transition: background 0.25s;
}
.compare-table tbody tr.is-featured th {
  background: rgba(188, 154, 95, 0.22);
}
.compare-table tbody th a:hover,
.compare-table tbody th a:focus-visible {
  background: rgba(188, 154, 95, 0.3);
}
.compare-table tbody th a:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: -2px;
}
.ct-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 23px;
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
}
.ct-tag {
  color: var(--gold-light);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
}
.ct-loc.is-sea {
  color: var(--gold-light);
  font-size: 14px;
  font-weight: 700;
}
.ct-icons {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  margin-bottom: 8px;
}
.ct-icons svg {
  flex: none;
}
.ct-plus {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  font-weight: 700;
  margin: 0 5px;
}
.ct-txt {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}
.ct-txt.is-no {
  color: var(--danger-soft);
  font-weight: 700;
}
.ct-diff {
  text-align: left;
}
.compare-table tfoot td {
  background: var(--navy-dark);
  padding: 24px 22px;
  text-align: left;
}
.ct-foot-label {
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 12px;
}
.ct-inc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  margin: 4px 13px 4px 0;
  white-space: nowrap;
}
.ct-inc::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7"/></svg>') no-repeat center / contain;
}
.compare-note {
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  text-align: center;
}

/* ===== em todos os apartamentos ===== */
.included {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 20px;
}
.included .section-head {
  max-width: 600px;
  margin-bottom: 48px;
}
.included h2 {
  font-size: clamp(2rem, 4vw, 2.7rem);
}
.included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}
.included-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
  transition: all 0.3s;
  color: var(--navy);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.4;
}
.included-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(7, 26, 42, 0.1);
}
/* icons keyed by position, same approach as the amenity tiles on the home page */
.included-item::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--chip) no-repeat center / 23px 23px;
}
.included-item:nth-child(1)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><path d="M3 12h18M6 8V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2M5 16h14M8 20h8"/></svg>');
}
.included-item:nth-child(2)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><rect x="2" y="4" width="20" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg>');
}
.included-item:nth-child(3)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M5 11h14M9 7h1"/></svg>');
}
.included-item:nth-child(4)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><path d="M2 9c6-5 14-5 20 0M5.5 12.5c4-3.3 9-3.3 13 0M9 16c2-1.7 4-1.7 6 0"/><circle cx="12" cy="19.5" r="1"/></svg>');
}
.included-item:nth-child(5)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><path d="M3 10h18M5 10V7h14v3M6 10v10M18 10v10M9 14h6"/></svg>');
}
.included-item:nth-child(6)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><path d="M4 4h6l2 5-2.5 1.5a11 11 0 0 0 4 4L15 12l5 2v6h-3A13 13 0 0 1 4 7V4z"/></svg>');
}
.included-item:nth-child(7)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><path d="M6 3v9M6 12a6 6 0 0 0 12 0H6zM18 12V3M15 21h-6"/><path d="M12 18v3"/></svg>');
}
.included-item:nth-child(8)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><path d="M4 9h12v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9zM16 10h2a2 2 0 0 1 0 4h-2M7 5c0-1 .5-1 .5-2M11 5c0-1 .5-1 .5-2"/></svg>');
}

/* ===== café da manhã na página de apartamentos ===== */
/* 1280 = 1240 of content + the 20px side padding, same as the other sections. */
.rooms-breakfast {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px 96px;
}
.breakfast-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.breakfast-head-copy {
  max-width: 640px;
}
.breakfast-head h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.14;
}
.breakfast-head .section-intro {
  font-size: 16.5px;
  line-height: 1.75;
}
.breakfast-cta .wp-block-button__link {
  background: var(--navy);
  color: #fff;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
}
.breakfast-cta .wp-block-button__link:hover {
  background: var(--gold);
  color: var(--navy);
}
.breakfast-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.breakfast-shots .wp-block-image {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
.breakfast-shots img {
  width: 100%;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.breakfast-shots .shot-wide {
  grid-column: span 3;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(7, 26, 42, 0.14);
}
.breakfast-shots .shot-wide img {
  aspect-ratio: 21/9;
}

/* ===== políticas ===== */
.policies {
  background: var(--band);
  padding: 88px 20px;
}
.policies-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.policies .section-head {
  max-width: 620px;
  margin-bottom: 44px;
}
.policies h2 {
  font-size: clamp(2rem, 4vw, 2.7rem);
}
.policies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.policy-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: 0 10px 30px rgba(7, 26, 42, 0.07);
}
.policy-label {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
}
.policy-more {
  display: inline-block;
  margin-top: 14px;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.policy-more:hover {
  border-color: var(--navy);
  background: var(--soft);
  color: var(--navy);
}
.policy-card p {
  margin: 0;
  color: #35414e;
  font-size: 15px;
  line-height: 1.7;
}
.policy-card a {
  color: var(--gold);
  font-weight: 700;
}

/* ===== CTA da página de apartamentos ===== */
.rooms-cta {
  max-width: 1280px;
  margin: 72px auto 0;
  padding: 0 20px;
}
.rooms-cta-inner {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 44px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.rooms-cta-copy {
  max-width: 560px;
}
.rooms-cta h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.18;
  text-wrap: balance;
}
.rooms-cta p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}
.rooms-cta-button {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.rooms-cta-button .wp-block-button__link {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.03em;
  transition: all 0.25s;
}
.rooms-cta-button .wp-block-button__link:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}
.rooms-cta-button .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  font-weight: 700;
}
.rooms-cta-button .is-style-outline .wp-block-button__link:hover {
  border-color: var(--navy);
  background: none;
  color: var(--navy);
  transform: none;
}
.check {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  cursor: pointer;
  font-size: 14.5px;
  color: #35414e;
}
.check input {
  accent-color: var(--gold);
  width: 17px;
  height: 17px;
  flex: none;
}
/* ===== modais ===== */
.hb-modal {
  width: min(100% - 32px, 620px);
  max-height: calc(100vh - 48px);
  padding: 0;
  border: none;
  border-radius: 20px;
  background: var(--page);
  color: #35414e;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  overflow: auto;
}
.hb-modal.is-wide {
  width: min(100% - 32px, 760px);
}
/* the floor plan dialogs need room for the drawing itself */
.hb-modal.is-xl {
  width: min(100% - 32px, 1060px);
}
.planta-frame {
  background: #fff;
  border: 1px solid var(--band);
  border-radius: 14px;
  padding: 10px;
  margin: 18px 0;
}
.planta-frame img {
  width: 100%;
  display: block;
  border-radius: 8px;
}
.hb-modal::backdrop {
  background: rgba(7, 26, 42, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* the dialog scrolls on its own; letting the page scroll behind it is disorienting */
body:has(dialog[open]) {
  overflow: hidden;
}
.modal-head {
  background: var(--navy);
  padding: 26px 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.modal-eyebrow {
  margin: 0 0 6px;
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: 0.28em;
  font-weight: 700;
  text-transform: uppercase;
}
.modal-head h2 {
  font-size: 30px;
  color: #fff;
  line-height: 1.12;
}
.modal-x {
  background: none;
  border: none;
  color: var(--gold-light);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex: none;
}
.modal-body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.modal-intro {
  margin: 0;
  color: #5c6470;
  font-size: 15.5px;
  line-height: 1.7;
}
.pet-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pet-highlight {
  flex: 1 1 160px;
  background: #fff;
  border: 1px solid var(--band);
  border-radius: 14px;
  padding: 16px 18px;
}
.pet-highlight strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
}
.pet-highlight span {
  display: block;
  color: #7c8794;
  font-size: 12.5px;
  margin-top: 4px;
  line-height: 1.45;
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--band);
}

/* ===== botões reutilizados fora dos blocos ===== */
/* dash-list is the design's "— item" list, drawn instead of typed as a span */
.dash-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.dash-list li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  color: #35414e;
  font-size: 14.5px;
  line-height: 1.65;
}
.dash-list li::before {
  content: '—';
  color: var(--gold);
  font-weight: 800;
  flex: none;
}
.btn-navy,
.btn-ghost {
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  display: inline-block;
  transition: all 0.25s;
}
.btn-navy {
  background: var(--navy);
  color: #fff;
}
.btn-navy:hover {
  background: var(--gold);
  color: var(--navy);
}
.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--navy);
}
.btn-ghost:hover {
  border-color: var(--navy);
  background: var(--band);
}

/* ===== página de eventos ===== */
/* 1280 = 1240 of content + the 20px side padding, the border-box compensation used
   by every full-width section in this theme. */
.stats-band {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 34px 20px;
}
.stats-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-number {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1;
}
/* the city page prints the same band a touch smaller than the events page */
.stats-band.is-city {
  padding: 38px 20px;
}
.stats-band.is-city .stat-number {
  font-size: 34px;
}
.stat-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  line-height: 1.4;
}

.events-intro,
.salas,
.formats,
.gear,
.proposal {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 20px 0;
}
.events-intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 52px;
  align-items: center;
}
.events-intro-copy h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.14;
}
.events-intro-copy .section-intro {
  font-size: 16.5px;
  line-height: 1.75;
}
.events-intro-copy .dash-list {
  margin: 26px 0 0;
  gap: 12px;
}
.events-intro-copy .dash-list li {
  font-size: 15.5px;
}
.events-intro-img.wp-block-image {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(7, 26, 42, 0.18);
}
.events-intro-img img {
  width: 100%;
  display: block;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.salas {
  padding-top: 72px;
}
.salas-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.salas-head h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--navy);
  line-height: 1.2;
}
.salas-note {
  margin: 0;
  color: #8a94a0;
  font-size: 13.5px;
}
.salas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.salas-shot.wp-block-image {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 14px 34px rgba(7, 26, 42, 0.12);
}
.salas-shot img {
  width: 100%;
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.salas-shot:hover img {
  transform: scale(1.05);
}

.formats .section-head {
  max-width: 640px;
  margin-bottom: 48px;
}
.formats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.format-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}
.format-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(7, 26, 42, 0.1);
  border-color: var(--gold);
}
/* the seven layout diagrams are drawn as backgrounds, never as blocks */
/* 124 = the demo's 96px box plus its 14px padding: it was content-box, we are not */
.format-card::before {
  content: '';
  display: block;
  background: var(--soft) no-repeat center / 86px 60px;
  border-radius: 10px;
  height: 124px;
  margin-bottom: 16px;
}
.format-card h3 {
  font-size: 21px;
  color: var(--navy);
  margin-bottom: 5px;
}
.format-capacity {
  margin: 0;
  color: var(--chip-text);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
}
.format-ask {
  background: var(--navy);
  border: none;
  justify-content: center;
  gap: 12px;
  padding: 26px 24px;
}
.format-ask h3 {
  margin-bottom: 0;
}
.format-ask:hover {
  transform: none;
  box-shadow: none;
}
.format-ask::before {
  display: none;
}
.format-ask h3 {
  color: #fff;
  font-size: 22px;
  margin: 0;
}
.format-ask p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}
.format-link a {
  color: var(--gold-light);
  font-weight: 700;
  font-size: 14px;
}
.format-link a:hover {
  color: #fff;
}
/* the white format cards link their floor plan in gold; the navy ask card keeps the
   light link it already had */
.format-card:not(.format-ask) .format-link {
  margin: 10px 0 0;
}
.format-card:not(.format-ask) .format-link a {
  color: var(--gold);
  font-size: 13.5px;
  letter-spacing: 0.04em;
}
.format-card:not(.format-ask) .format-link a:hover {
  color: var(--navy);
}
.formats-note {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

.segments {
  background: var(--band);
  margin-top: 88px;
  padding: 88px 20px;
}
.segments-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.segments .section-head {
  max-width: 620px;
  margin-bottom: 48px;
}
.segments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.segment-card {
  background: #fff;
  border-radius: 14px;
  padding: 30px 28px;
  box-shadow: 0 10px 30px rgba(7, 26, 42, 0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.segment-card::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--chip) no-repeat center / 24px 24px;
}
.segment-card h3 {
  font-size: 23px;
  color: var(--navy);
}
.segment-card p {
  margin: 0;
  color: #5c6470;
  font-size: 15px;
  line-height: 1.7;
}

.gear {
  padding-bottom: 88px;
}
.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 44px;
}
.gear-col h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 24px;
}
.gear-in .chip {
  background: var(--navy);
  color: #fff;
  padding: 9px 18px;
  font-size: 13.5px;
}
.gear-extra .chip {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--chip-text);
  padding: 9px 18px;
  font-size: 13.5px;
}

.groups {
  background: var(--band);
  padding: 88px 20px;
}
.groups-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}
.split-copy h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.14;
}
.split-copy .section-intro {
  color: #5c6470;
  font-size: 16.5px;
  line-height: 1.75;
}
.split-copy .dash-list {
  margin: 24px 0 0;
  gap: 12px;
}
.split-copy .dash-list li {
  font-size: 15.5px;
}
.groups-cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.groups-cta .wp-block-button__link {
  background: var(--navy);
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.25s;
}
.groups-cta .wp-block-button__link:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}
.groups-cta .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--navy);
}
.groups-cta .is-style-outline .wp-block-button__link:hover {
  border-color: var(--navy);
  transform: none;
}
.photo-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.photo-mosaic .wp-block-image {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(7, 26, 42, 0.12);
}
.photo-mosaic img {
  width: 100%;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.photo-mosaic .shot-wide {
  grid-column: span 2;
  border-radius: 16px;
  box-shadow: 0 24px 56px rgba(7, 26, 42, 0.14);
}
.photo-mosaic .shot-wide img {
  aspect-ratio: 16/10;
}
.group-cards {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.group-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  border: 1px solid var(--line);
}
.group-card h3 {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 6px;
}
.group-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.proposal {
  max-width: 1120px;
  padding-bottom: 88px;
}
.proposal-contacts {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.contact-box {
  background: var(--band);
  border-radius: 14px;
  padding: 24px 22px;
}
.contact-label {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
}
.contact-box p {
  margin: 0;
  color: #35414e;
  font-size: 14.5px;
  line-height: 1.8;
}
.contact-box a {
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
}
.contact-box a:hover {
  color: var(--gold);
}

.format-u::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="86" height="60" viewBox="0 0 86 60" fill="none" stroke="%23BC9A5F" stroke-width="2"><rect x="24" y="10" width="38" height="40" rx="3" fill="rgba(188,154,95,0.14)"/><circle cx="18" cy="18" r="3.4" fill="%23BC9A5F" stroke="none"/><circle cx="18" cy="30" r="3.4" fill="%23BC9A5F" stroke="none"/><circle cx="18" cy="42" r="3.4" fill="%23BC9A5F" stroke="none"/><circle cx="68" cy="18" r="3.4" fill="%23BC9A5F" stroke="none"/><circle cx="68" cy="30" r="3.4" fill="%23BC9A5F" stroke="none"/><circle cx="68" cy="42" r="3.4" fill="%23BC9A5F" stroke="none"/><circle cx="35" cy="54" r="3.4" fill="%23BC9A5F" stroke="none"/><circle cx="51" cy="54" r="3.4" fill="%23BC9A5F" stroke="none"/></svg>');
}
.format-cocktail::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="86" height="60" viewBox="0 0 86 60" fill="none" stroke="%23BC9A5F" stroke-width="2"><circle cx="22" cy="18" r="8" fill="rgba(188,154,95,0.14)"/><circle cx="50" cy="14" r="8" fill="rgba(188,154,95,0.14)"/><circle cx="70" cy="34" r="8" fill="rgba(188,154,95,0.14)"/><circle cx="34" cy="42" r="8" fill="rgba(188,154,95,0.14)"/><circle cx="12" cy="42" r="4" fill="%23BC9A5F" stroke="none"/><circle cx="60" cy="50" r="4" fill="%23BC9A5F" stroke="none"/><circle cx="76" cy="14" r="4" fill="%23BC9A5F" stroke="none"/></svg>');
}
.format-school::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="86" height="60" viewBox="0 0 86 60" fill="none" stroke="%23BC9A5F" stroke-width="2"><rect x="14" y="4" width="58" height="5" rx="2" fill="%23BC9A5F" stroke="none"/><rect x="16" y="20" width="24" height="7" rx="2" fill="rgba(188,154,95,0.2)"/><rect x="46" y="20" width="24" height="7" rx="2" fill="rgba(188,154,95,0.2)"/><rect x="16" y="36" width="24" height="7" rx="2" fill="rgba(188,154,95,0.2)"/><rect x="46" y="36" width="24" height="7" rx="2" fill="rgba(188,154,95,0.2)"/><circle cx="22" cy="32" r="3" fill="%23BC9A5F" stroke="none"/><circle cx="34" cy="32" r="3" fill="%23BC9A5F" stroke="none"/><circle cx="52" cy="32" r="3" fill="%23BC9A5F" stroke="none"/><circle cx="64" cy="32" r="3" fill="%23BC9A5F" stroke="none"/><circle cx="22" cy="48" r="3" fill="%23BC9A5F" stroke="none"/><circle cx="34" cy="48" r="3" fill="%23BC9A5F" stroke="none"/><circle cx="52" cy="48" r="3" fill="%23BC9A5F" stroke="none"/><circle cx="64" cy="48" r="3" fill="%23BC9A5F" stroke="none"/></svg>');
}
.format-fishbone::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="86" height="60" viewBox="0 0 86 60" fill="none" stroke="%23BC9A5F" stroke-width="2"><rect x="14" y="4" width="58" height="5" rx="2" fill="%23BC9A5F" stroke="none"/><g transform="rotate(-22 30 30)"><rect x="14" y="24" width="28" height="7" rx="2" fill="rgba(188,154,95,0.2)"/><rect x="14" y="40" width="28" height="7" rx="2" fill="rgba(188,154,95,0.2)"/></g><g transform="rotate(22 58 30)"><rect x="46" y="24" width="28" height="7" rx="2" fill="rgba(188,154,95,0.2)"/><rect x="46" y="40" width="28" height="7" rx="2" fill="rgba(188,154,95,0.2)"/></g></svg>');
}
.format-university::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="86" height="60" viewBox="0 0 86 60" fill="none" stroke="%23BC9A5F" stroke-width="2"><rect x="14" y="4" width="58" height="5" rx="2" fill="%23BC9A5F" stroke="none"/><g fill="%23BC9A5F" stroke="none"><rect x="16" y="20" width="10" height="4" rx="1.5"/><rect x="34" y="20" width="10" height="4" rx="1.5"/><rect x="52" y="20" width="10" height="4" rx="1.5"/><rect x="16" y="34" width="10" height="4" rx="1.5"/><rect x="34" y="34" width="10" height="4" rx="1.5"/><rect x="52" y="34" width="10" height="4" rx="1.5"/><rect x="16" y="48" width="10" height="4" rx="1.5"/><rect x="34" y="48" width="10" height="4" rx="1.5"/><rect x="52" y="48" width="10" height="4" rx="1.5"/></g><g fill="rgba(188,154,95,0.35)" stroke="none"><circle cx="21" cy="28" r="3"/><circle cx="39" cy="28" r="3"/><circle cx="57" cy="28" r="3"/><circle cx="21" cy="42" r="3"/><circle cx="39" cy="42" r="3"/><circle cx="57" cy="42" r="3"/></g></svg>');
}
.format-auditorium::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="86" height="60" viewBox="0 0 86 60" fill="none" stroke="%23BC9A5F" stroke-width="2"><rect x="14" y="4" width="58" height="5" rx="2" fill="%23BC9A5F" stroke="none"/><g fill="%23BC9A5F" stroke="none"><circle cx="18" cy="22" r="3.2"/><circle cx="30" cy="22" r="3.2"/><circle cx="42" cy="22" r="3.2"/><circle cx="54" cy="22" r="3.2"/><circle cx="66" cy="22" r="3.2"/><circle cx="18" cy="36" r="3.2"/><circle cx="30" cy="36" r="3.2"/><circle cx="42" cy="36" r="3.2"/><circle cx="54" cy="36" r="3.2"/><circle cx="66" cy="36" r="3.2"/><circle cx="18" cy="50" r="3.2"/><circle cx="30" cy="50" r="3.2"/><circle cx="42" cy="50" r="3.2"/><circle cx="54" cy="50" r="3.2"/><circle cx="66" cy="50" r="3.2"/></g></svg>');
}
.format-boardroom::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="86" height="60" viewBox="0 0 86 60" fill="none" stroke="%23BC9A5F" stroke-width="2"><rect x="24" y="18" width="38" height="24" rx="4" fill="rgba(188,154,95,0.14)"/><g fill="%23BC9A5F" stroke="none"><circle cx="32" cy="11" r="3.4"/><circle cx="43" cy="11" r="3.4"/><circle cx="54" cy="11" r="3.4"/><circle cx="32" cy="49" r="3.4"/><circle cx="43" cy="49" r="3.4"/><circle cx="54" cy="49" r="3.4"/><circle cx="17" cy="30" r="3.4"/><circle cx="69" cy="30" r="3.4"/></g></svg>');
}
.segment-card:nth-child(1)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 12h18"/></svg>');
}
.segment-card:nth-child(2)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><path d="M8 21V10M8 10l2-6 3 3h5l-2 4M4 21h16"/><circle cx="17" cy="14" r="3"/></svg>');
}
.segment-card:nth-child(3)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><path d="M4 19V5a1 1 0 0 1 1-1h6v16H5a1 1 0 0 1-1-1zM11 4h8a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-8"/></svg>');
}
.segment-card:nth-child(4)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18M6 6c3 2 9 2 12 0M6 18c3-2 9-2 12 0"/></svg>');
}

/* ===== página Cabo Frio ===== */
.weather,
.sights {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 20px 0;
}
.weather-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.weather-head h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.14;
}
.live-badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
  text-transform: uppercase;
}
.live-badge::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e0483c;
}
.weather-live {
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy-dark);
  box-shadow: 0 24px 56px rgba(7, 26, 42, 0.18);
}
.weather-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
.weather-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.weather-video-foot {
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
.weather-video-foot a {
  color: var(--gold-light);
  font-size: 13.5px;
  font-weight: 700;
}
.weather-video-foot a:hover {
  color: #fff;
}
.weather-now {
  margin-top: 26px;
  background: var(--navy);
  border-radius: 18px;
  padding: 30px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: center;
}
.now-kicker {
  margin: 0 0 10px;
  color: var(--gold-light);
  font-size: 11.5px;
  letter-spacing: 0.28em;
  font-weight: 700;
  text-transform: uppercase;
}
.now-temp {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.now-temp strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.now-temp span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
}
.now-detail {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  line-height: 1.6;
}
.now-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.now-row {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}
.now-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 10px;
}
.now-row span:last-child {
  color: #fff;
  font-weight: 700;
}
.forecast {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.forecast-day {
  flex: 1 1 150px;
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--band);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forecast-name {
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.forecast-date {
  color: #a2abb5;
  font-size: 12px;
}
.forecast-cond {
  color: #5c6470;
  font-size: 13px;
  line-height: 1.4;
  min-height: 36px;
}
.forecast-temps {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #a2abb5;
  font-size: 15px;
}
.forecast-temps strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
}
.forecast-rain {
  color: #7c8794;
  font-size: 12px;
}
.weather-source {
  margin: 14px 0 0;
  color: #8a94a0;
  font-size: 12.5px;
}

/* head alignment: the city page reads left-aligned, the home page centred */
.section-head.is-left {
  text-align: left;
  max-width: 660px;
  margin: 0 0 44px;
}
.sights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.sight-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(7, 26, 42, 0.08);
  transition: transform 0.3s;
}
.sight-card:hover {
  transform: translateY(-6px);
}
.sight-img.wp-block-image {
  margin: 0;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--navy);
}
.sight-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sight-body {
  padding: 22px 24px 26px;
}
.sight-body h3 {
  margin: 0 0 8px;
  font-size: 23px;
  color: var(--navy);
}
.sight-body p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.sights-credit {
  margin: 22px 0 0;
  color: #a2abb5;
  font-size: 12px;
  line-height: 1.6;
}

.beaches {
  background: var(--band);
  margin-top: 88px;
  padding: 80px 20px;
}
.beaches-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.beaches .section-head {
  max-width: 640px;
}
.beaches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.beach-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(7, 26, 42, 0.07);
}
.beach-card::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--chip) no-repeat center / 24px 24px;
}
.beach-card h3 {
  font-size: 24px;
  color: var(--navy);
}
.beach-card p {
  margin: 0;
  color: #5c6470;
  font-size: 15px;
  line-height: 1.7;
}

.experiences {
  background: var(--navy);
}
.experiences-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 20px 96px;
}
.pill-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(217, 199, 156, 0.4);
  border-radius: 999px;
  padding: 8px 16px;
  margin: 0 0 22px;
  color: var(--gold-light);
  font-size: 11.5px;
  letter-spacing: 0.3em;
  font-weight: 700;
  text-transform: uppercase;
}
.pill-kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
}
.experiences-intro {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.75;
}
.exp-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.exp-card + .exp-card {
  margin-top: 34px;
}
.exp-shots {
  min-width: 0;
  min-height: 440px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1.75fr 1fr;
  gap: 10px;
  background: var(--chip);
}
.exp-shots .wp-block-image {
  margin: 0;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--navy);
}
.exp-shots .shot-wide {
  grid-column: span 3;
  border-radius: 14px;
}
.exp-shots img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.exp-copy {
  min-width: 0;
  padding: 40px 38px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* icon on the left, number stacked over the title on the right — the blocks are
   siblings, so the grid does the grouping the design got from a wrapper div */
.exp-title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 14px;
}
.exp-title::before {
  content: '';
  display: block;
  width: 52px;
  height: 52px;
  grid-row: span 2;
  border-radius: 50%;
  background: var(--chip) no-repeat center / 25px 25px;
}
.exp-number {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.26em;
  font-weight: 700;
  text-transform: uppercase;
}
.exp-title h2 {
  font-size: 32px;
  color: var(--navy);
  line-height: 1.1;
}
.exp-text {
  margin: 0;
  color: #5c6470;
  font-size: 15.5px;
  line-height: 1.75;
}
.exp-text strong {
  color: var(--navy);
  font-weight: 700;
}
.exp-copy .chips {
  margin-top: 0;
  gap: 8px;
}
.chip-light {
  background: var(--soft);
  border: 1px solid var(--band);
  color: #35414e;
  padding: 7px 14px;
  font-size: 12.5px;
}
.exp-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 2px;
}
.exp-link {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #35414e;
  font-size: 14.5px;
}
.exp-link::before {
  content: '';
  width: 17px;
  height: 17px;
  flex: none;
  background: no-repeat center / contain;
}
.exp-link a {
  color: #35414e;
}
.exp-link a:hover {
  color: var(--gold);
}
.exp-foot {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.exp-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #08331b;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  transition: all 0.25s;
}
.exp-cta .wp-block-button__link:hover {
  background: #1fbe5a;
  transform: translateY(-2px);
}
.exp-note {
  margin: 0;
  color: #8a94a0;
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 230px;
}

/* a rounded card, not a full-bleed band: it needs air on every side, including the
   one facing the footer */
.city-cta-band.wp-block-cover {
  width: calc(100% - 40px);
  max-width: 1240px;
  margin: 88px auto;
  border-radius: 20px;
  background: var(--navy);
  padding: 64px 32px;
  min-height: 0;
}
.city-cta-band.wp-block-cover .wp-block-cover__background {
  opacity: 1;
  background: none;
}
/* the photo is a texture behind the navy, not the subject */
.city-cta-band.wp-block-cover .wp-block-cover__image-background {
  opacity: 0.35;
}
.city-cta-band .wp-block-cover__inner-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.city-cta-band h2 {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.15;
  max-width: 620px;
  text-wrap: balance;
}
.city-cta-band p {
  margin: 0;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.7;
}
.city-cta-buttons {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.city-cta-buttons .wp-block-button__link {
  background: var(--gold);
  color: var(--navy);
  padding: 15px 34px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  transition: all 0.25s;
}
.city-cta-buttons .wp-block-button__link:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}
.city-cta-buttons .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-weight: 700;
}
.city-cta-buttons .is-style-outline .wp-block-button__link:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
  transform: none;
}

.beach-card:nth-child(1)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.6" stroke-linecap="round"><circle cx="9" cy="8" r="3"/><path d="M15 6.5a2.5 2.5 0 1 1 0 5"/><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5"/><path d="M17 19c0-2 .8-3.6 2-4.4"/></svg>');
}
.beach-card:nth-child(2)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.6" stroke-linecap="round"><path d="M3 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M3 20c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M8 12c3-6 8-8 12-8-1 5-4 9-8 10"/></svg>');
}
.beach-card:nth-child(3)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.6" stroke-linecap="round"><path d="M4 17c2.5 0 2.5-1.5 5-1.5s2.5 1.5 5 1.5 2.5-1.5 5-1.5"/><path d="M12 15V5"/><path d="M12 5c2.5 0 4.5 1.4 4.5 3H7.5C7.5 6.4 9.5 5 12 5z"/></svg>');
}
.exp-photo .exp-title::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z"/><circle cx="12" cy="13" r="3.4"/></svg>');
}
.exp-sand .exp-title::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18c3 0 5-9 9-9s6 5 9 5"/><path d="M3 21h18"/><circle cx="16" cy="6" r="2"/></svg>');
}
.exp-wa::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="%23BC9A5F" style="flex:none"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.1-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1.1-1.4-1.1-2.7s.7-1.9.9-2.2c.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.4l.8 2c.1.2.1.4 0 .6l-.4.6-.4.4c-.1.1-.2.3-.1.5.1.2.6 1 1.3 1.7.9.8 1.7 1.1 2 1.2.2.1.4.1.5-.1l.7-.9c.2-.2.4-.3.6-.2l1.9.9c.2.1.4.2.4.3.1.2.1.7-.1 1.3z"/></svg>');
}
.exp-ig::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round" style="flex:none"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1"/></svg>');
}
.exp-pin::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" style="flex:none"><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z"/><circle cx="12" cy="10" r="2.6"/></svg>');
}
.channels,
.address {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 20px 0;
}
.address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 34px;
  align-items: stretch;
}
.address-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.address-copy h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.14;
}
.address-line {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.directions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.direction {
  margin: 0;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  color: #35414e;
  font-size: 15px;
  line-height: 1.6;
}
.direction::before {
  content: '';
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 2px;
  background: no-repeat center / contain;
}
.direction strong {
  color: var(--navy);
}
.address-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.address-cta .wp-block-button__link {
  background: var(--navy);
  color: #fff;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
}
.address-cta .wp-block-button__link:hover {
  background: var(--gold);
  color: var(--navy);
}
.address-cta .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--navy);
}
.address-cta .is-style-outline .wp-block-button__link:hover {
  border-color: var(--navy);
  background: var(--band);
}
.address-map {
  min-height: 400px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(7, 26, 42, 0.16);
  background: var(--line);
}
.address-map iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  display: block;
}

.message {
  background: var(--band);
  margin-top: 80px;
}
.dir-bus::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:2px"><path d="M2 17h20"/><path d="M4 17V9l6-3 6 3v8"/><path d="M9 17v-4h3v4"/></svg>');
}
.dir-plane::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:2px"><path d="M2 14l9-3 4-7 2 1-2 6 5-1.5 1 2-7 3-3 5-2-.5 1-4.5-6 1z"/></svg>');
}
.dir-car::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:2px"><rect x="3" y="6" width="18" height="11" rx="3"/><circle cx="7.5" cy="17.5" r="1.6"/><circle cx="16.5" cy="17.5" r="1.6"/></svg>');
}
.dir-clock::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:2px"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>');
}

/* ===== página do Restaurante ===== */
.restaurant-hero.wp-block-cover {
  min-height: 64vh;
}
/* Same navy band as the events page, but the label is a word, not a figure. */
.stats-band.is-restaurant .stat-number {
  font-size: 30px;
  line-height: 1.1;
}
.stats-band.is-restaurant .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.breakfast-note {
  margin: 24px 0 0;
  color: #8a94a0;
  font-size: 13.5px;
  line-height: 1.6;
}
.sample {
  color: var(--gold);
  font-family: monospace;
  font-size: 12.5px;
}

/* Light band with a left-aligned head, shared by the dishes and the group profiles. */
.dishes,
/* ===== bus parking (groups page) ===== */
.bus {
  background: var(--navy);
  margin-top: 88px;
  padding: 88px 20px;
}
.bus-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.bus-head {
  max-width: 720px;
  margin-bottom: 48px;
}
.bus-head h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
}
.bus-head .section-intro {
  color: rgba(255, 255, 255, 0.75);
}
.bus-head .section-intro strong {
  color: #fff;
}
.bus-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.bus-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 30px 28px;
}
.bus-card h3 {
  margin: 0;
  font-size: 26px;
  color: #fff;
  line-height: 1.2;
}
.bus-card-label {
  margin: 0 0 8px;
  color: var(--gold-light);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  font-weight: 700;
  text-transform: uppercase;
}
.bus-card-note {
  margin: 12px 0 18px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14.5px;
  line-height: 1.6;
}
.bus-fees {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.bus-fee {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
}
.bus-fee.is-main {
  background: rgba(188, 154, 95, 0.14);
}
.bus-fee-value {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}
.bus-fee-label {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  line-height: 1.45;
}
.bus-where {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 18px;
  padding-top: 18px;
}
.bus-where p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  line-height: 1.6;
}
.bus-where .bus-ref {
  color: rgba(255, 255, 255, 0.6);
}
.bus-where .bus-map-link {
  margin-top: 10px;
}
.bus-map-link a {
  color: var(--gold-light);
  font-weight: 700;
  font-size: 13.5px;
}
.bus-map-link a:hover {
  color: #fff;
}
.bus-lot {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bus-lot + .bus-lot {
  margin-top: 12px;
}
.bus-lot-name {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.bus-lot-dist {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
}
.bus-lot-wa {
  margin: 0;
}
.bus-lot-wa a {
  display: inline-block;
  border: 1px solid rgba(217, 199, 156, 0.5);
  color: var(--gold-light);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.bus-lot-wa a:hover {
  background: rgba(217, 199, 156, 0.14);
  color: #fff;
}
.bus-steps {
  margin-top: 22px;
}
.bus-steps .bus-card-label {
  margin-bottom: 22px;
}
.bus-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 34px;
}
.bus-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.bus-step-n {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  flex: none;
}
.bus-step p:not(.bus-step-n) {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.6;
}
.bus-step strong {
  color: #fff;
}
/* the no-boarding-at-hotels warning, drawn with its own triangle mark */
.bus-alert {
  margin: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 22px;
  color: var(--danger-soft);
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 600;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.bus-alert::before {
  content: '';
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23E9A6A0" stroke-width="1.9" stroke-linecap="round"><path d="M12 3l9 16H3l9-16zM12 9v5"/><circle cx="12" cy="17" r="0.6" fill="%23E9A6A0"/></svg>') no-repeat center / contain;
}
.bus-cta {
  margin-top: 24px;
  gap: 12px;
}
.bus-cta .wp-block-button__link {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  transition: all 0.25s;
}
.bus-cta .wp-block-button__link:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}
.bus-cta .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-weight: 700;
}
.bus-cta .is-style-outline .wp-block-button__link:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
  background: none;
  transform: none;
}
.bus-updated {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
}

.profiles {
  background: var(--band);
  margin-top: 88px;
  padding: 88px 20px;
}
/* 1240, not the usual 1280: the side padding sits on the parent, so there is no
   border-box to compensate for here. */
.dishes-inner,
.profiles-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.dishes .section-head,
.profiles .section-head {
  text-align: left;
  max-width: 660px;
  margin: 0 0 44px;
}
.dishes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.dish-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.dish-slot.wp-block-image {
  margin: 0;
  aspect-ratio: 4/3;
  background: var(--chip);
}
.dish-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dish-card h3 {
  margin: 20px 22px 0;
  font-size: 21px;
  font-weight: 600;
  color: var(--navy);
}
.dish-note {
  margin: 6px 22px 22px;
  color: #8a94a0;
  font-size: 13.5px;
  line-height: 1.6;
}
.dishes-cta {
  margin-top: 28px;
}
.dishes-cta .wp-block-button__link {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.25s;
}
.dishes-cta .wp-block-button__link:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}

.hall {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 20px 0;
}
.hall-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hall-cta .wp-block-button__link {
  display: inline-block;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  background: none;
  transition: all 0.25s;
}
.hall-cta .wp-block-button__link:hover {
  border-color: var(--navy);
}

/* Rounded closing card, used by the restaurant, experiences and groups pages. */
.card-cta.wp-block-cover {
  min-height: 0;
  max-width: 1280px;
  margin: 88px auto;
  border-radius: 20px;
  padding: 64px 32px;
  text-align: center;
}
.card-cta.wp-block-cover .wp-block-cover__background {
  opacity: 1;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(7, 26, 42, 0.72) 0%, rgba(10, 42, 67, 0.66) 100%);
}
.card-cta.wp-block-cover .wp-block-cover__image-background {
  opacity: 0.35;
}
.card-cta.wp-block-cover .wp-block-cover__inner-container {
  max-width: 620px;
}
.card-cta h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.15;
  text-wrap: balance;
}
.card-cta p {
  margin: 18px auto 0;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.7;
}
.card-cta-button {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.card-cta-button .wp-block-button__link {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  padding: 15px 34px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  transition: all 0.25s;
}
.card-cta-button .wp-block-button__link:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}
.card-cta-button .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-weight: 700;
}
.card-cta-button .is-style-outline .wp-block-button__link:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

/* ===== página de Experiências ===== */
.exp-hero.wp-block-cover {
  min-height: 64vh;
}
.steps {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 20px 0;
}
.steps-head {
  max-width: 620px;
  margin: 0 0 44px;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.step {
  background: #fff;
  border-radius: 16px;
  padding: 30px 28px;
  box-shadow: 0 10px 30px rgba(7, 26, 42, 0.07);
}
.step-number {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.step h3 {
  margin: 12px 0 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
}
.step p {
  margin: 12px 0 0;
  color: #5c6470;
  font-size: 15px;
  line-height: 1.7;
}

/* Teaser that replaced the full section on the Cabo Frio page. */
.exp-teaser {
  background: var(--navy);
  margin-top: 88px;
}
.exp-teaser-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  align-items: center;
}
.exp-teaser-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.12;
  text-wrap: balance;
}
.exp-teaser-cta {
  margin-top: 28px;
}
.exp-teaser-cta .wp-block-button__link {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  transition: all 0.25s;
}
.exp-teaser-cta .wp-block-button__link:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}
.exp-teaser-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.exp-teaser-shots .wp-block-image {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--navy-dark);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
}
/* the second photo drops to stagger the pair, exactly as in the design */
.exp-teaser-shots .wp-block-image:last-child {
  margin-top: 28px;
}
.exp-teaser-shots img {
  width: 100%;
  display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* ===== página de Grupos ===== */
.groups-hero.wp-block-cover {
  min-height: 64vh;
}
.groups-intro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 20px 0;
}
.groups-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.groups-cta .wp-block-button__link {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.25s;
}
.groups-cta .wp-block-button__link:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}
.groups-cta .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--navy);
}
.groups-cta .is-style-outline .wp-block-button__link:hover {
  border-color: var(--navy);
  background: none;
  color: var(--navy);
}

.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.profile-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px;
}
.profile-card::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--chip) no-repeat center / 23px 23px;
}
.profile-card h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
}
.profile-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.profile-card:nth-child(1)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><rect x="3" y="6" width="18" height="11" rx="3"/><circle cx="7.5" cy="17.5" r="1.6"/><circle cx="16.5" cy="17.5" r="1.6"/></svg>');
}
.profile-card:nth-child(2)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18M6 6c3 2 9 2 12 0M6 18c3-2 9-2 12 0"/></svg>');
}
.profile-card:nth-child(3)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><path d="M4 19V5a1 1 0 0 1 1-1h6v16H5a1 1 0 0 1-1-1zM11 4h8a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-8"/></svg>');
}
.profile-card:nth-child(4)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M12 3v18M8 10l-1.5 2L8 14M16 10l1.5 2L16 14"/></svg>');
}
.profile-card:nth-child(5)::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round"><path d="M3 9l9-4 9 4-9 4-9-4z"/><path d="M7 11v4c0 1.7 2.2 3 5 3s5-1.3 5-3v-4"/></svg>');
}
/* the last tile asks instead of describing, so it drops the icon and inverts */
.profile-card.is-ask {
  background: var(--navy);
  border-color: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile-card.is-ask::before {
  display: none;
}
.profile-card.is-ask h3 {
  color: #fff;
  line-height: 1.2;
}
.profile-card.is-ask p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
  line-height: 1.6;
}
.profile-ask-link {
  margin: 16px 0 0;
}
.profile-ask-link a {
  color: var(--gold-light);
  font-weight: 700;
  font-size: 14px;
}
.profile-ask-link a:hover {
  color: #fff;
}

.quote {
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px 20px;
}
.quote-card {
  background: var(--navy);
  border-radius: 20px;
  padding: clamp(34px, 5vw, 56px);
  text-align: center;
}
.quote-card .kicker {
  color: var(--gold-light);
}
.quote-card h2 {
  margin: 18px auto 0;
  max-width: 640px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  text-wrap: balance;
}
.quote-card > p {
  margin: 18px auto 0;
  max-width: 540px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16.5px;
  line-height: 1.7;
}
.quote-cta {
  margin-top: 26px;
  justify-content: center;
}
.quote-cta .wp-block-button__link {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  padding: 17px 34px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15.5px;
  transition: all 0.25s;
}
.quote-cta .wp-block-button__link:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}
.quote-facts {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
  text-align: left;
}
.quote-label {
  margin: 0 0 6px;
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
}
.quote-fact p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.6;
}
.quote-fact a {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.quote-fact a:hover {
  color: var(--gold-light);
}

/* ===== banner de evento (Aparência > Evento em cartaz) ===== */
.event-banner {
  background: var(--navy);
  padding: 64px 20px;
}
.event-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 44px;
  align-items: center;
}
.event-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--gold-light);
  font-size: 12px;
  letter-spacing: 0.3em;
  font-weight: 700;
  text-transform: uppercase;
}
/* the red dot reads as "on now" without another image to load */
.event-kicker::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e0483c;
  flex: none;
}
.event-copy h2 {
  margin: 18px 0 0;
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  text-wrap: balance;
}
.event-facts {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.event-facts span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}
.event-facts span::before {
  content: '';
  width: 17px;
  height: 17px;
  flex: none;
  background: no-repeat center / contain;
}
.event-when::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="%23D9C79C" stroke-width="1.8" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M8 3v4M16 3v4M3 11h18"/></svg>');
}
.event-where::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="%23D9C79C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z"/><circle cx="12" cy="10" r="2.6"/></svg>');
}
.event-text {
  margin: 18px 0 0;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 16px;
  line-height: 1.75;
}
.event-cta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  transition: all 0.25s;
}
.btn-gold:hover {
  background: var(--gold-light);
  color: var(--navy);
  transform: translateY(-2px);
}
/* the ghost button sits on navy here, so it inverts the light-background default */
.event-cta .btn-ghost {
  border-color: rgba(255, 255, 255, 0.4);
  background: none;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}
.event-cta .btn-ghost:hover {
  border-color: var(--gold-light);
  background: none;
  color: var(--gold-light);
}
.event-poster {
  justify-self: center;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3/4;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42);
  background: #0f3452;
}
.event-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hb-modal.is-poster {
  width: min(100% - 32px, 860px);
  background: none;
  box-shadow: none;
}
.hb-modal.is-poster img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.hb-modal.is-poster .modal-x {
  position: absolute;
  top: 10px;
  right: 14px;
  color: var(--gold-light);
}

/* ===== home: hero, essenciais, localização e as seções da versão B ===== */
/* Two extra photos ride inside the cover and cross-fade over it (site.js).
   They are children of the inner container — the only place a block can live inside a
   cover — so the container drops to static, letting them anchor on .wp-block-cover
   itself. Without that they sized to the inner container and covered the copy. */
.hero.wp-block-cover .wp-block-cover__inner-container {
  position: static;
}
.hero .wp-block-cover__inner-container > *:not(.hero-shots):not(.hero-dots) {
  position: relative;
  z-index: 1;
}
.hero-shots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* the cover's constrained layout caps every child at 1240px; the backdrop has to
     reach the full width of the hero */
  max-width: none;
}
.hero-shots .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-shots .wp-block-image.is-on {
  opacity: 1;
}
.hero-shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) brightness(0.92);
}
/* Each home A photo carries the cover's own veil: painting after the overlay, it
   would otherwise wash the gradient out and leave white copy on a bright sky.
   Scoped to .hero — the home B panel gets only the small bottom band below. */
.hero .hero-shots .wp-block-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 64% 48% at 50% 42%, rgba(7, 26, 42, 0.4) 0%, rgba(7, 26, 42, 0.16) 55%, rgba(7, 26, 42, 0) 78%),
    linear-gradient(180deg, rgba(7, 26, 42, 0.34) 0%, rgba(7, 26, 42, 0.12) 45%, rgba(7, 26, 42, 0.44) 100%);
}

/* Dots are built by site.js, not by the pattern: they are carousel chrome, and the
   client has no reason to meet them in the editor. */
.hero-dots {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 9px;
}
.hero .hero-dots {
  bottom: 132px;
  left: 50%;
  transform: translateX(-50%);
}
.hero-split .hero-dots {
  right: 22px;
  bottom: 22px;
}
.hero-dots button {
  width: 40px;
  height: 5px;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.3s;
}
.hero-dots button.is-on {
  background: var(--gold-light);
}

.hero-place {
  margin: 20px 0 0;
}
.hero-place a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  background: rgba(7, 26, 42, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 11px 20px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-place a::before {
  content: '';
  width: 18px;
  height: 18px;
  flex: none;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23D9C79C" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z"/><circle cx="12" cy="10" r="2.6"/></svg>') no-repeat center / contain;
}
.hero-place a:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}
.hero-place-cta {
  color: var(--gold-light);
  font-weight: 700;
  font-size: 14px;
}
.hero-chips {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}
.hero-chip {
  margin: 0;
  background: rgba(7, 26, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.essentials {
  background: var(--page);
  margin-top: 64px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.essentials-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.essential {
  padding: 26px;
  border-left: 1px solid var(--line);
  display: grid;
  grid-template-columns: 19px 1fr;
  column-gap: 14px;
  align-items: start;
}
.essential:first-child {
  padding-left: 0;
  border-left: none;
}
.essential:last-child {
  padding-right: 0;
}
.essential::before {
  content: '';
  grid-row: 1 / span 5;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  background: no-repeat center / contain;
}
.is-place::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z"/><circle cx="12" cy="10" r="2.6"/></svg>');
}
.is-whats::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="%23BC9A5F"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.1-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1.1-1.4-1.1-2.7s.7-1.9.9-2.2c.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.4l.8 2c.1.2.1.4 0 .6l-.4.6-.4.4c-.1.1-.2.3-.1.5.1.2.6 1 1.3 1.7.9.8 1.7 1.1 2 1.2.2.1.4.1.5-.1l.7-.9c.2-.2.4-.3.6-.2l1.9.9c.2.1.4.2.4.3.1.2.1.7-.1 1.3z"/></svg>');
}
.is-clock::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.9" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>');
}
.is-distance::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.9" stroke-linecap="round"><path d="M3 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M3 20c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M8 12c3-6 8-8 12-8-1 5-4 9-8 10"/></svg>');
}
.essential-label {
  margin: 0;
  color: #8a94a0;
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
}
.essential-value {
  margin: 4px 0 0;
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
}
.essential-value a:hover {
  color: var(--gold);
}
.essential-link {
  margin: 4px 0 0;
}
.essential-link a {
  color: var(--gold);
  font-size: 13.5px;
  font-weight: 700;
}
.essential-link a:hover {
  color: var(--navy);
}

.restaurant-teaser {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 20px;
}
/* home B runs it as a full-width light band */
.restaurant-teaser.is-band {
  max-width: none;
  margin-top: 80px;
  padding: 72px 20px;
  background: var(--band);
}
.restaurant-teaser.is-band .split-grid {
  max-width: 1240px;
  margin: 0 auto;
}
.restaurant-teaser-img.wp-block-image {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(7, 26, 42, 0.16);
}
.restaurant-teaser-img img {
  width: 100%;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.location {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 20px 0;
}
.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 36px;
  align-items: start;
}
.location-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.14;
}
.distance-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.distance-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 13px;
  align-items: start;
  color: #35414e;
  font-size: 15.5px;
  line-height: 1.6;
}
.distance-list li::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: no-repeat center / contain;
}
.distance-list strong {
  color: var(--navy);
}
.distance-list .is-beach::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M3 20c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M8 12c3-6 8-8 12-8-1 5-4 9-8 10"/></svg>');
}
.distance-list .is-plane::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 14l9-3 4-7 2 1-2 6 5-1.5 1 2-7 3-3 5-2-.5 1-4.5-6 1z"/></svg>');
}
.distance-list .is-shop::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 17h20"/><path d="M4 17V9l6-3 6 3v8"/><path d="M9 17v-4h3v4"/></svg>');
}
.distance-list .is-bus::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="11" rx="3"/><circle cx="7.5" cy="17.5" r="1.6"/><circle cx="16.5" cy="17.5" r="1.6"/></svg>');
}
.location-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.location-cta .wp-block-button__link {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.25s;
}
.location-cta .wp-block-button__link:hover {
  background: var(--gold);
  color: var(--navy);
}
.location-cta .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--navy);
}
.location-cta .is-style-outline .wp-block-button__link:hover {
  border-color: var(--navy);
  background: none;
  color: var(--navy);
}
.location .address-map {
  min-height: 440px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(7, 26, 42, 0.16);
  background: var(--soft);
}

/* ----- versão B ----- */
.hero-split {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  min-height: 640px;
  padding-top: 72px;
  background: var(--navy);
}
.hero-split-copy {
  flex: 1 1 420px;
  min-width: min(100%, 380px);
  padding: clamp(36px, 4vw, 60px) clamp(24px, 3.4vw, 56px) clamp(36px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.hero-split-copy .hero-kicker {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--gold-light);
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
}
.kicker-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.kicker-soft {
  color: rgba(255, 255, 255, 0.6);
}
.hero-split-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  text-wrap: balance;
}
.hero-split .hero-place {
  margin: 0;
}
.hero-split .hero-place a {
  display: flex;
  align-items: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.88);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-split .hero-place a::before {
  margin-top: 3px;
}
.hero-split .hero-place-cta {
  display: block;
  margin-top: 2px;
}
.hero-split .hero-chips {
  margin: 0;
  justify-content: flex-start;
}
.hero-split .hero-chip {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* The booking card lives inside the hero here instead of overlapping it, so the wrap
   drops the -96px pull and the card inverts to sit on navy. The markup is
   .widget-wrap > form.widget — matching .widget.booking alone would miss the wrap and
   the card would ride up over the chips. */
.hero-split .widget-wrap {
  margin: 22px 0 0;
  padding: 0;
  max-width: none;
  z-index: auto;
}
.hero-split .widget {
  padding: 22px 0 0;
  background: none;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  box-shadow: none;
}
.hero-split .widget-kicker {
  color: var(--gold-light);
  letter-spacing: 0.26em;
}
/* two by two, as in the design, instead of the home page's single row */
.hero-split .widget-grid {
  grid-template-columns: 1fr 1fr;
}
.hero-split .widget-grid label span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.hero-split .widget-grid input,
.hero-split .widget-grid select {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.hero-split .widget-grid select {
  background: #0f3452;
}
.hero-split .widget-search {
  grid-column: 1 / -1;
  padding: 15px 24px;
  font-size: 14.5px;
}
.hero-split .widget-search:hover {
  background: var(--gold-light);
  color: var(--navy);
}
.hero-split .hero-shots {
  position: relative;
  flex: 1.35 1 520px;
  min-height: 420px;
  overflow: hidden;
  background: var(--navy);
}
.hero-split .hero-shots .wp-block-image:first-child {
  opacity: 1;
}
/* item 1: the only shade on the B photo panel is this strip under the dots */
.hero-split .hero-shots::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(7, 26, 42, 0) 0%, rgba(7, 26, 42, 0.3) 100%);
  pointer-events: none;
  z-index: 1;
}

.rooms-b {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px 0;
}
.rooms-b-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
  align-items: start;
}
/* the copy column follows the cards down the page */
.rooms-b-copy {
  position: sticky;
  top: 100px;
  max-width: 360px;
}
.rooms-b-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.14;
}
.rooms-b-cta {
  margin-top: 22px;
}
.rooms-b-cta .wp-block-button__link {
  display: inline-block;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  background: none;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.25s;
}
.rooms-b-cta .wp-block-button__link:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.rooms-b-list {
  grid-column: span 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.room-b-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.room-b-card:hover {
  box-shadow: 0 18px 44px rgba(7, 26, 42, 0.1);
}
.room-b-img.wp-block-image {
  margin: 0;
  min-height: 200px;
  overflow: hidden;
}
.room-b-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.room-b-copy {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.room-b-copy h3 {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  color: var(--navy);
}
.room-b-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.room-b-copy .chips {
  margin: 4px 0 0;
}
.room-b-copy .chip {
  padding: 6px 13px;
  font-size: 12.5px;
}
.room-b-link {
  margin: 6px 0 0;
}
.room-b-link a {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
}
.room-b-link a:hover {
  color: var(--navy);
}

.beyond {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 20px 0;
}
.beyond-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}
.beyond-head-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.14;
}
.beyond-head-note {
  margin: 0;
  max-width: 330px;
  color: #5c6470;
  font-size: 15.5px;
  line-height: 1.7;
}
.beyond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.beyond-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(7, 26, 42, 0.07);
  transition: transform 0.3s, box-shadow 0.3s;
}
.beyond-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(7, 26, 42, 0.14);
}
.beyond-img.wp-block-image {
  margin: 0;
  height: 230px;
  overflow: hidden;
}
.beyond-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the label straddles the photo's bottom edge */
.beyond-kicker {
  position: absolute;
  left: 20px;
  top: 230px;
  transform: translateY(-50%);
  margin: 0;
  background: var(--navy);
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: 0.26em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
}
.beyond-card h3 {
  margin: 38px 28px 0;
  font-size: 29px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.16;
}
.beyond-card h3::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gold);
  margin: 16px 0 0;
}
.beyond-card > p {
  margin: 14px 28px 24px;
  color: #5c6470;
  font-size: 16px;
  line-height: 1.7;
  flex: 1;
}
.beyond-link {
  margin: 0 28px 30px;
}
.beyond-link a {
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
}
.beyond-link a::after {
  content: ' →';
  color: var(--gold);
}
.beyond-link a:hover {
  color: var(--gold);
}

/* ----- estrutura compacta da home B ----- */
.structure-b {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px 0;
}
/* on home A the section keeps that page's 88px rhythm; home B stays as approved */
.structure-b.in-a {
  padding: 88px 20px 0;
}
.structure-b-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
  align-items: start;
}
.structure-b-copy {
  max-width: 360px;
}
.structure-b-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.14;
}
.pet-link {
  margin: 22px 0 0;
}
.pet-link a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  color: var(--navy);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 700;
  transition: all 0.25s;
}
.pet-link a::before {
  content: '';
  width: 15px;
  height: 15px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="%23BC9A5F"><circle cx="7" cy="9" r="1.8"/><circle cx="12" cy="7" r="1.8"/><circle cx="17" cy="9" r="1.8"/><ellipse cx="12" cy="15.5" rx="4.4" ry="3.6"/></svg>') no-repeat center / contain;
}
.pet-link a:hover {
  border-color: var(--navy);
  background: var(--band);
}
/* the two photo tiles and the amenity board share the remaining two columns */
.structure-b-main {
  grid-column: span 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-b-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.feature-b.wp-block-cover {
  min-height: 260px;
  border-radius: 16px;
  padding: 24px;
  /* the inner container stretches to full height (content pinned to the bottom by
     flex), so the stretched title link below covers the whole tile */
  align-items: stretch;
  box-shadow: 0 14px 36px rgba(7, 26, 42, 0.14);
}
.feature-b.wp-block-cover .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.feature-b.wp-block-cover .wp-block-cover__background {
  opacity: 1;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(10, 42, 67, 0) 40%, rgba(7, 26, 42, 0.85) 100%);
}
.feature-b.wp-block-cover .wp-block-cover__inner-container {
  max-width: none;
}
.feature-b h3 {
  margin: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
}
/* The title link stretches over the whole cover, so the entire tile is clickable
   (pool tile → services page, restaurant tile → restaurant page). */
.feature-b h3 a {
  color: inherit;
}
.feature-b h3 a::after {
  content: '';
  position: absolute;
  /* the inner container sits inside the cover's 24px padding — the negative inset
     pulls the clickable area back over that ring, right to the tile edges */
  inset: -24px;
  z-index: 1;
  border-radius: 16px;
}
.feature-b.wp-block-cover {
  transition: transform 0.25s, box-shadow 0.25s;
}
.feature-b.wp-block-cover:has(h3 a:hover) {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(7, 26, 42, 0.22);
}
.feature-b p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  line-height: 1.55;
}
/* 1px gaps over a --line background draw the dividers without per-cell borders */
.amenity-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.amenity-b {
  margin: 0;
  background: #fff;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  font-weight: 600;
  font-size: 14.5px;
}
.amenity-b::before {
  content: '';
  width: 19px;
  height: 19px;
  flex: none;
  background: no-repeat center / contain;
}
.am-clock::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>');
}
.am-parking::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.8" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 17V7h3.5a3 3 0 0 1 0 6H9"/></svg>');
}
.am-business::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.8" stroke-linecap="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 12h18"/></svg>');
}
.am-laundry::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.8" stroke-linecap="round"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="13" r="4"/></svg>');
}
.am-bike::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.8" stroke-linecap="round"><circle cx="6" cy="16" r="4"/><circle cx="18" cy="16" r="4"/><path d="M6 16l4-8h5l3 8M10 8l6 8"/></svg>');
}
.am-lift::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.8" stroke-linecap="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M12 3v18M8 10l-1.5 2L8 14M16 10l1.5 2L16 14"/></svg>');
}
.am-breakfast::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.8" stroke-linecap="round"><path d="M4 9h12v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9zM16 10h2a2 2 0 0 1 0 4h-2"/></svg>');
}
.am-generator::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%23BC9A5F" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2.5 5.5 13H11l-1 8.5L18 11h-5.5l.5-8.5z"/></svg>');
}
/* summary CTA under the pet pill, pointing at the services page */
.svc-link {
  margin: 14px 0 0;
}
.svc-link a {
  display: inline-flex;
  align-items: center;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  padding: 13px 24px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: all 0.25s;
}
.svc-link a:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}

/* ===== services & leisure page ===== */
/* the highlight band spells words instead of numbers, so it prints smaller */
.stats-band.is-words .stat-number {
  font-size: 30px;
  line-height: 1.1;
}
.svc-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 20px 0;
}
.svc-band {
  background: var(--band);
  margin-top: 88px;
  padding: 88px 20px;
}
.svc-band + .svc-section {
  padding-top: 88px;
}
.svc-band-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.svc-lounge-shot {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(7, 26, 42, 0.16);
}
.svc-lounge-shot img {
  width: 100%;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}
/* same 1px-gap board as the home amenities, plus a description line per cell */
.service-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.service-cell {
  margin: 0;
  background: #fff;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-cell::before {
  content: '';
  width: 22px;
  height: 22px;
  background: no-repeat center / contain;
}
.service-cell strong {
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
}
.service-cell span {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.svc-pet {
  padding-top: 72px;
}
.pet-banner {
  background: var(--navy);
  border-radius: 20px;
  padding: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  align-items: center;
}
.pet-banner .kicker {
  color: var(--gold-light);
}
.pet-banner h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.16;
}
.pet-banner p:not(.kicker):not(.pet-banner-cta) {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.7;
}
.pet-banner-cta {
  margin: 0;
}
.pet-banner-cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 999px;
  padding: 15px 30px;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.03em;
  transition: all 0.25s;
}
.pet-banner-cta a::before {
  content: '';
  width: 17px;
  height: 17px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="%230A2A43"><circle cx="7" cy="9" r="1.8"/><circle cx="12" cy="7" r="1.8"/><circle cx="17" cy="9" r="1.8"/><ellipse cx="12" cy="15.5" rx="4.4" ry="3.6"/></svg>') no-repeat center / contain;
}
.pet-banner-cta a:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}
.svc-cross {
  padding-top: 72px;
}

/* ===== responsive ===== */
@media (max-width: 920px) {
  .main-nav,
  .sticky-fields .desktop-only {
    display: none;
  }
  .hamburger {
    display: flex;
  }
}
@media (min-width: 921px) {
  .mobile-menu.open {
    display: none;
  }
}
@media (max-width: 560px) {
  .header-inner {
    padding: 0 14px;
    gap: 10px;
  }
  .header-actions {
    gap: 8px;
  }
  /* the floating button already covers WhatsApp on small screens */
  .header-wa {
    display: none;
  }
  /* no room for both next to the brand; the mobile menu carries its own switcher */
  .header-actions .lang-switch {
    display: none;
  }
  .brand-name {
    font-size: 15px;
  }
  .brand-city {
    font-size: 9px;
  }
  .btn-book {
    padding: 9px 16px;
    font-size: 13px;
  }
  /* sticky bar collapses to a single row: dates + search */
  .sticky-brand {
    display: none;
  }
  .sticky-inner {
    padding: 10px 14px;
  }
  .sticky-fields {
    width: 100%;
    flex-wrap: nowrap;
  }
  .sticky-fields input {
    flex: 1;
    min-width: 0;
  }
  .sticky-search {
    flex: none;
  }
  /* shorter hero: copy rises above the horizon and the booking card enters the first fold */
  .hero.wp-block-cover {
    min-height: 70svh;
  }
  .hero h1 {
    margin-top: 8px;
  }
  /* photo mosaics drop to two columns; the wide shot keeps spanning the row */
  .salas-grid,
  .breakfast-shots,
  .formats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .breakfast-shots .shot-wide {
    grid-column: span 2;
  }
  .exp-copy {
    padding: 28px 22px 30px;
  }
  .exp-title h2 {
    font-size: 26px;
  }
  .now-temp strong {
    font-size: 48px;
  }
  /* stacked full-width forecast cards wasted a screen and a half; two columns keep the
     six days in one glance */
  .forecast {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .forecast-day {
    min-width: 0;
    padding: 14px 14px;
    gap: 5px;
  }
  .forecast-cond {
    min-height: 0;
  }
  .weather-now {
    padding: 24px 20px;
    gap: 20px;
  }
  /* the numbers band reads better centred once each stat owns a full row */
  .stat {
    align-items: center;
    text-align: center;
  }
  .city-cta-band.wp-block-cover {
    width: calc(100% - 32px);
    margin: 56px auto;
    padding: 44px 22px;
  }
}

/* ---------- Coming-soon holding page ---------- */

/* Chrome stripped down: no nav, no hamburger (the mobile menu becomes unreachable),
   no footer link grid — only brand, language switcher and the booking CTA remain. */
body.is-coming-soon .main-nav,
body.is-coming-soon .hamburger,
body.is-coming-soon .footer {
  display: none;
}
/* With the hamburger gone the mobile menu is unreachable, so the header switcher must
   survive the ≤560px rule that normally hides it (the hidden hamburger frees the room). */
@media (max-width: 560px) {
  body.is-coming-soon .header-actions .lang-switch {
    display: flex;
  }
}

.coming-soon.wp-block-cover {
  min-height: 100svh;
  padding: 48px 24px;
  align-items: center;
  justify-content: center;
}
.coming-soon.wp-block-cover .wp-block-cover__background {
  opacity: 1;
  background-color: transparent;
  background-image: linear-gradient(rgba(10, 42, 67, 0.72), rgba(10, 42, 67, 0.88));
}
.coming-soon.wp-block-cover .wp-block-cover__inner-container {
  text-align: center;
  max-width: 680px;
}
.coming-soon .coming-soon-logo img {
  /* the PNG has a white background — the circle turns it into a badge */
  width: 110px;
  height: auto;
  border-radius: 50%;
}
.coming-soon h1 {
  font-size: clamp(30px, 5vw, 48px);
  margin: 20px 0 8px;
}
.coming-soon .coming-soon-sub {
  font-size: 18px;
  opacity: 0.9;
}
.coming-soon .coming-soon-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.coming-soon .wp-block-button__link {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  padding: 16px 36px;
  border-radius: 999px;
  font-weight: 800;
  transition: all 0.25s;
}
.coming-soon .wp-block-button__link:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.coming-soon .is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-weight: 700;
}
.coming-soon .coming-soon-contacts {
  margin-top: 32px;
  font-size: 15px;
  opacity: 0.92;
}
.coming-soon .coming-soon-contacts a {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}