/* ============================================================
   L'Acqua Marina · Tela Interativa
   Identidade editorial premium (referência: lacqua-marina-site.vercel.app)
   ============================================================ */

:root {
  /* Paleta editorial */
  --ink:          #0F0F0E;
  --ink-soft:     #1A1A18;
  --black-pure:   #050505;
  --cream:        #F5F1E8;
  --cream-deep:   #EFE9DD;
  --cream-soft:   #FAF7F0;
  --paper:        #ECE6D7;
  --line:         #D9D1BE;
  --line-soft:    #E8E2D2;
  --gold:         #B8924A;
  --gold-light:   #C9A867;
  --gold-deep:    #92711F;
  --teal:         #486E63;
  --teal-soft:    #6B8B7F;
  --terra:        #A8583C;
  --sand:         #D6CBB0;

  /* Status sofisticado */
  --status-disp:      #6B8B7F;
  --status-disp-deep: #486E63;
  --status-res:       #C9A867;
  --status-res-deep:  #B8924A;
  --status-sold:      #B0A998;
  --status-sold-deep: #8A8472;
  --status-dest:      #B8924A;

  /* Transparências cream */
  --ink-a90: rgba(15, 15, 14, 0.92);
  --ink-a70: rgba(15, 15, 14, 0.72);
  --ink-a55: rgba(15, 15, 14, 0.55);
  --ink-a40: rgba(15, 15, 14, 0.40);
  --ink-a25: rgba(15, 15, 14, 0.25);
  --ink-a12: rgba(15, 15, 14, 0.12);
  --ink-a06: rgba(15, 15, 14, 0.06);

  --cream-a85: rgba(245, 241, 232, 0.85);
  --cream-a60: rgba(245, 241, 232, 0.60);
  --cream-a35: rgba(245, 241, 232, 0.35);
  --cream-a15: rgba(245, 241, 232, 0.15);
  --cream-a06: rgba(245, 241, 232, 0.06);

  --gold-a40: rgba(184, 146, 74, 0.40);
  --gold-a18: rgba(184, 146, 74, 0.18);
  --gold-a08: rgba(184, 146, 74, 0.08);

  /* Tipografia */
  --f-display: 'Fraunces', 'Times New Roman', serif;
  --f-body:    'Host Grotesk', 'Inter', system-ui, -apple-system, sans-serif;

  /* Layout */
  --drawer-w: 440px;
  --topbar-h: 76px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;

  /* Easing */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.68, 0.06);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* Sombras suaves */
  --shadow-soft:  0 8px 32px rgba(15, 15, 14, 0.08), 0 2px 6px rgba(15, 15, 14, 0.04);
  --shadow-card:  0 24px 64px rgba(15, 15, 14, 0.12), 0 6px 16px rgba(15, 15, 14, 0.06);

  /* Spacing canônico */
  --space-xs: 8px;
  --space-s:  16px;
  --space-m:  32px;
  --space-l:  64px;
  --space-xl: 96px;
  --space-xxl: 144px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; }
body.dark { background: var(--black-pure); color: var(--cream); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--gold); color: var(--cream-soft); }

img { display: block; max-width: 100%; height: auto; }

/* Utilitários tipográficos */
.label-eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink-a55);
}

body.dark .label-eyebrow { color: var(--cream-a60); }

.serif-display {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.serif-display em { font-style: italic; font-weight: 300; }

.divider-fine {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

body.dark .divider-fine { background: var(--cream-a15); }

/* ============================================================
   PAGE TRANSITION
   ============================================================ */

.page-transition {
  position: fixed;
  inset: 0;
  background: var(--black-pure);
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.page-transition.is-active { opacity: 1; pointer-events: all; }

/* ============================================================
   STANDBY · Editorial premium dark
   ============================================================ */

body.page-standby {
  background: var(--black-pure);
  color: var(--cream);
  overflow: hidden;
}

.standby {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--black-pure);
  overflow: hidden;
  cursor: pointer;
}

.standby-bg-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(184, 146, 74, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(72, 110, 99, 0.06) 0%, transparent 60%);
  z-index: 1;
}

.standby-content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 0 32px;
  max-width: 720px;
  animation: standby-fade-in 1.6s var(--ease-out) 0.3s both;
}

@keyframes standby-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.standby-logo-wrap {
  position: relative;
  margin: 0 auto;
  width: clamp(180px, 24vw, 280px);
}

.standby-logo-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 40px rgba(184, 146, 74, 0.15));
  animation: logo-breath 6s ease-in-out infinite;
}

@keyframes logo-breath {
  0%, 100% { opacity: 0.96; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.02); }
}

.standby-quote {
  margin: 40px auto 0 auto;
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--cream-a85);
  letter-spacing: 0.01em;
}

.standby-divider {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 32px auto 28px auto;
  opacity: 0.55;
}

.standby-loc {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-a60);
}

.standby-cta {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 12px 18px;
  cursor: pointer;
  color: var(--cream);
  animation: cta-fade-in 1.2s var(--ease-out) 1.4s both;
}

@keyframes cta-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.standby-cta-label {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-a60);
}

.standby-cta-bar {
  width: 1px;
  height: 32px;
  background: var(--cream-a35);
  position: relative;
  overflow: hidden;
}

.standby-cta-bar::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gold);
  animation: bar-fall 2.4s var(--ease-inout) infinite;
}

@keyframes bar-fall {
  0%   { top: -100%; }
  100% { top: 100%; }
}

@media (max-width: 768px) {
  .standby-logo-wrap { width: 60vw; max-width: 240px; }
  .standby-quote { font-size: 18px; }
  .standby-cta { bottom: 32px; }
}

/* ============================================================
   TOP HEADER (compartilhado menu + secao)
   ============================================================ */

.editorial-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.editorial-header.is-on-secao {
  background: var(--cream);
}

.eh-brand {
  display: inline-flex;
  align-items: center;
  height: 28px;
  text-decoration: none;
  transition: opacity 0.3s;
}

.eh-brand:hover { opacity: 0.65; }

.eh-brand-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.eh-nav {
  display: flex;
  align-items: center;
  gap: 48px;
}

.eh-nav a {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-a70);
  transition: color 0.3s;
}

.eh-nav a:hover { color: var(--gold); }
.eh-nav a.is-active { color: var(--gold); }

.eh-burger {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.eh-burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: all 0.3s;
}

@media (max-width: 1024px) {
  .editorial-header { padding: 20px 24px; }
  .eh-nav { display: none; }
  .eh-burger { display: flex; }
}

/* ============================================================
   BURGER OVERLAY (editorial cream)
   ============================================================ */

.burger-overlay {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-out);
  display: flex;
  flex-direction: column;
  padding: 32px 48px;
}

.burger-overlay.is-open { transform: translateX(0); }

.burger-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.burger-overlay-brand {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.burger-overlay-close {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
}

.burger-overlay-close:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.burger-overlay-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 48px 0;
  overflow-y: auto;
}

.burger-overlay-nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  transition: all 0.3s;
}

.burger-overlay-nav a:last-child { border-bottom: 0; }

.burger-overlay-nav .bon-num {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-a40);
  width: 48px;
  flex-shrink: 0;
}

.burger-overlay-nav .bon-label {
  flex: 1;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: all 0.3s;
}

.burger-overlay-nav .bon-label em {
  font-style: italic;
  font-weight: 300;
}

.burger-overlay-nav a:hover .bon-label {
  color: var(--gold);
  padding-left: 12px;
}

.burger-overlay-nav .bon-arrow {
  font-family: var(--f-body);
  font-size: 18px;
  color: var(--ink-a40);
  transition: all 0.3s;
}

.burger-overlay-nav a:hover .bon-arrow {
  color: var(--gold);
  transform: translateX(6px);
}

.burger-overlay-footer {
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.burger-overlay-footer .bof-link {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-a70);
}

.burger-overlay-footer .bof-link:hover { color: var(--gold); }

/* ============================================================
   MENU PAGE · Editorial premium
   ============================================================ */

body.page-menu {
  background: var(--cream);
  min-height: 100vh;
}

.menu-page-intro {
  padding: 128px 48px 64px 48px;
  max-width: 1440px;
  margin: 0 auto;
}

.mpi-eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink-a55);
  display: block;
  margin-bottom: 24px;
}

.mpi-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 980px;
  margin: 0 0 24px 0;
}

.mpi-title em { font-style: italic; }

.mpi-sub {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-a70);
  max-width: 620px;
  margin: 0;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 24px;
  padding: 32px 48px 96px 48px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Editorial cards */
.editorial-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--cream-soft);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: all 0.5s var(--ease-out);
  cursor: pointer;
}

.editorial-card:hover {
  border-color: var(--gold);
}

.editorial-card:hover .ec-image {
  transform: scale(1.04);
}

.ec-image-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.ec-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.9s var(--ease-out);
}

.ec-body {
  padding: 24px 24px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.ec-num {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink-a40);
}

.ec-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 4px 0 8px 0;
}

.ec-title em { font-style: italic; }

.ec-sub {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-a70);
  margin: 0 0 4px 0;
}

.ec-arrow {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  transition: all 0.3s var(--ease-out);
}

.editorial-card:hover .ec-arrow {
  background: var(--gold);
  color: var(--cream-soft);
  border-color: var(--gold);
  transform: translate(4px, -4px);
}

/* Grid positions (Bento editorial) */
.mc-hero        { grid-column: span 12; grid-row: span 2; }
.mc-hero .ec-image-wrap { aspect-ratio: 21 / 9; }
.mc-hero .ec-title     { font-size: clamp(40px, 5vw, 72px); margin-top: 12px; }

.mc-large       { grid-column: span 8; }
.mc-large .ec-image-wrap { aspect-ratio: 16 / 9; }
.mc-large .ec-title { font-size: 36px; }

.mc-medium      { grid-column: span 4; }
.mc-medium .ec-image-wrap { aspect-ratio: 1 / 1; }

.mc-small       { grid-column: span 4; }
.mc-small .ec-image-wrap { aspect-ratio: 4 / 5; }

.mc-wide        { grid-column: span 6; }
.mc-wide .ec-image-wrap { aspect-ratio: 4 / 3; }

.mc-tall        { grid-column: span 4; grid-row: span 2; }
.mc-tall .ec-image-wrap { aspect-ratio: 3 / 4; }

/* Card de quote (sem imagem) */
.mc-quote {
  grid-column: span 8;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: default;
}

.mc-quote:hover { border: 0; }
.mc-quote .ec-arrow { display: none; }

.mc-quote-text {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--cream);
  margin: 0 0 32px 0;
}

.mc-quote-text em {
  font-style: italic;
  color: var(--gold-light);
}

.mc-quote-attr {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--cream-a60);
}

/* Card destacado para Disponibilidade */
.mc-disponibilidade .ec-title { color: var(--gold-deep); }
.mc-disponibilidade .ec-arrow {
  background: var(--gold);
  color: var(--cream-soft);
  border-color: var(--gold);
}

.mc-disponibilidade::before {
  content: 'Tela interativa';
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(15, 15, 14, 0.78);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 100px;
}

/* Responsive grid */
@media (max-width: 1024px) {
  .menu-grid { padding: 24px 24px 64px 24px; gap: 16px; }
  .menu-page-intro { padding: 112px 24px 48px 24px; }
  .mc-hero, .mc-large, .mc-quote { grid-column: span 12; grid-row: span 1; }
  .mc-medium, .mc-wide, .mc-tall, .mc-small { grid-column: span 6; grid-row: span 1; }
  .mc-tall { grid-row: span 1; }
  .mc-quote { padding: 56px 40px; }
}

@media (max-width: 640px) {
  .menu-grid { grid-template-columns: 1fr; padding: 16px 16px 56px 16px; }
  .menu-page-intro { padding: 96px 16px 32px 16px; }
  .mc-hero, .mc-large, .mc-medium, .mc-wide, .mc-tall, .mc-small, .mc-quote {
    grid-column: span 1;
  }
  .ec-body { padding: 18px 18px 22px 18px; }
  .ec-title { font-size: 24px; }
  .mc-hero .ec-title, .mc-large .ec-title { font-size: 28px; }
  .mc-quote { padding: 48px 28px; }
}

/* Menu footer */
.menu-footer-rule {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
  border-bottom: 1px solid var(--line);
}

.menu-footer-help {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 48px 64px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.menu-footer-help-text {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: var(--ink-a70);
}

.menu-footer-help-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  transition: all 0.3s;
}

.menu-footer-help-link:hover {
  background: var(--ink);
  color: var(--cream);
}

@media (max-width: 640px) {
  .menu-footer-help { padding: 24px 16px 48px 16px; flex-direction: column; align-items: flex-start; }
  .menu-footer-help-link { width: 100%; justify-content: center; }
}

/* ============================================================
   SECAO PAGE · Editorial premium
   ============================================================ */

body.page-secao {
  background: var(--cream);
  color: var(--ink);
}

.secao-hero {
  position: relative;
  padding: 144px 48px 80px 48px;
  background: var(--cream);
}

.secao-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

.secao-hero-num {
  position: absolute;
  top: -32px;
  left: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(120px, 18vw, 280px);
  line-height: 1;
  color: var(--ink-a06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.secao-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}

.secao-hero-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.secao-hero-eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink-a55);
}

.secao-hero-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 0 0;
}

.secao-hero-title em {
  font-style: italic;
}

.secao-hero-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 12px;
}

.secao-hero-lead {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-a70);
  margin: 0;
}

.secao-hero-image {
  margin-top: 80px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 48px;
}

.secao-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-s);
}

.secao-body {
  padding: 80px 48px 64px 48px;
  max-width: 1440px;
  margin: 0 auto;
}

.sec-block {
  margin-bottom: 96px;
}

.sec-block:last-child { margin-bottom: 0; }

/* Two-column editorial */
.sec-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.sec-two-col-image img {
  width: 100%;
  display: block;
  border-radius: var(--radius-s);
}

.sec-two-col-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}

/* Section header */
.sec-header {
  margin-bottom: 48px;
  max-width: 720px;
}

.sec-eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink-a55);
  margin-bottom: 16px;
}

.sec-h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px 0;
}

.sec-h2 em { font-style: italic; }

.sec-p {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-a70);
  margin: 0 0 16px 0;
}

.sec-p em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

.sec-p a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-a40);
}

.sec-p a:hover { color: var(--ink); border-color: var(--ink); }

/* Stats line (editorial inline) */
.sec-stats-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sec-stat-cell {
  padding: 32px 16px;
  border-right: 1px solid var(--line);
  text-align: left;
}

.sec-stat-cell:last-child { border-right: 0; }

.sec-stat-cell .sec-stat-num {
  display: block;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.sec-stat-cell .sec-stat-num em { font-style: italic; }

.sec-stat-cell .sec-stat-label {
  display: block;
  margin-top: 12px;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-a70);
  line-height: 1.4;
}

/* Steps list (Como Funciona) */
.sec-steps {
  border-top: 1px solid var(--line);
}

.sec-step {
  display: grid;
  grid-template-columns: 80px 1fr 320px;
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

.sec-step-num {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-a55);
}

.sec-step-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.sec-step-title em { font-style: italic; }

.sec-step-desc {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-a70);
  margin: 0;
  text-align: right;
}

/* Compare table (Isso não é timeshare) */
.sec-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.sec-compare-left .sec-h2 { margin-bottom: 32px; }

.sec-compare-callout {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--paper);
  border-left: 2px solid var(--gold);
}

.sec-compare-callout-title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 6px 0;
}

.sec-compare-callout-sub {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink-a70);
}

.sec-compare-table {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
}

.sec-compare-table-header {
  display: contents;
}

.sec-compare-table > div {
  padding: 16px 12px;
  font-family: var(--f-body);
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}

.sec-compare-table .sctr-head {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-a55);
  border-bottom: 1px solid var(--ink);
}

.sec-compare-table .sctr-label {
  color: var(--ink);
  font-weight: 500;
}

.sec-compare-table .sctr-bad {
  color: var(--terra);
}

.sec-compare-table .sctr-good {
  color: var(--teal);
}

/* Gallery editorial mosaic */
.sec-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.sec-gallery-item {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  border-radius: var(--radius-s);
}

.sec-gallery-item .sgi-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s var(--ease-out);
  aspect-ratio: var(--ar, 4 / 5);
}

.sec-gallery-item:hover .sgi-img { transform: scale(1.04); }

.sec-gallery-item .sgi-label {
  position: absolute;
  bottom: 16px;
  left: 18px;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

.sg-1 { grid-column: span 7; --ar: 4 / 3; }
.sg-2 { grid-column: span 5; --ar: 4 / 5; }
.sg-3 { grid-column: span 4; --ar: 4 / 5; }
.sg-4 { grid-column: span 4; --ar: 1 / 1; }
.sg-5 { grid-column: span 4; --ar: 4 / 5; }
.sg-6 { grid-column: span 12; --ar: 21 / 9; }

/* Big quote block */
.sec-bigquote {
  padding: 96px 48px;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  margin: 96px -48px;
}

.sec-bigquote-text {
  max-width: 880px;
  margin: 0 auto;
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.25;
}

.sec-bigquote-text em { color: var(--gold-light); }

.sec-bigquote-attr {
  margin-top: 32px;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--cream-a60);
}

/* CTA block */
.sec-cta {
  padding: 96px 0;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sec-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.sec-btn:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-1px);
}

.sec-btn-primary {
  background: var(--ink);
  color: var(--cream);
}

.sec-btn-primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cream-soft);
}

.sec-btn-arrow {
  font-family: var(--f-body);
  font-size: 14px;
  transition: transform 0.3s;
}

.sec-btn:hover .sec-btn-arrow { transform: translateX(4px); }

/* Form editorial */
.sec-form-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.sec-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.sec-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sec-field-full { grid-column: 1 / -1; }

.sec-field > span {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-a55);
}

.sec-field input,
.sec-field select,
.sec-field textarea {
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s;
}

.sec-field input:focus,
.sec-field select:focus,
.sec-field textarea:focus {
  border-bottom-color: var(--gold);
}

.sec-field input::placeholder,
.sec-field textarea::placeholder { color: var(--ink-a40); }

/* Video / Coming soon card */
.sec-soon {
  padding: 80px 48px;
  text-align: center;
  background: var(--paper);
  border-radius: var(--radius-s);
}

.sec-soon-eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}

.sec-soon-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.1;
  margin: 0 0 16px 0;
  color: var(--ink);
}

.sec-soon-title em { font-style: italic; }

.sec-soon-desc {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-a70);
  max-width: 560px;
  margin: 0 auto 32px auto;
}

/* Route cards */
.sec-routes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.sec-route-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: all 0.3s;
}

.sec-route-card:hover {
  border-color: var(--gold);
  background: var(--paper);
}

.sec-route-tag {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-a55);
}

.sec-route-name {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 20px;
  color: var(--ink);
  margin: 4px 0 0 0;
}

/* Iframe map */
.sec-map-iframe-wrap {
  border: 1px solid var(--line);
  overflow: hidden;
  border-radius: var(--radius-s);
}

.sec-map-iframe {
  width: 100%;
  height: 480px;
  border: 0;
  display: block;
}

/* Note */
.sec-note {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink-a55);
  text-align: center;
}

.sec-note a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-a40); }

/* Secao footer */
.secao-footer {
  background: var(--ink);
  color: var(--cream);
  padding: 48px;
  margin-top: 96px;
}

.secao-footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.secao-footer-brand {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.secao-footer-text {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-a60);
}

.secao-footer-link {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream);
}

.secao-footer-link:hover { color: var(--gold-light); }

/* Back link */
.secao-back {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s;
}

.secao-back:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

@media (max-width: 1024px) {
  .secao-hero { padding: 112px 24px 64px 24px; }
  .secao-hero-content { grid-template-columns: 1fr; gap: 24px; }
  .secao-hero-image { padding: 0 24px; margin-top: 48px; }
  .secao-body { padding: 64px 24px 48px 24px; }
  .sec-block { margin-bottom: 64px; }
  .sec-two-col { grid-template-columns: 1fr; gap: 32px; }
  .sec-compare { grid-template-columns: 1fr; gap: 32px; }
  .sec-form-wrap { grid-template-columns: 1fr; gap: 40px; }
  .sec-form { grid-template-columns: 1fr; }
  .sec-stats-line { grid-template-columns: repeat(2, 1fr); }
  .sec-stat-cell:nth-child(2) { border-right: 0; }
  .sec-stat-cell { border-bottom: 1px solid var(--line); }
  .sec-step { grid-template-columns: 56px 1fr; gap: 16px; }
  .sec-step-desc { grid-column: 2; text-align: left; padding-top: 4px; }
  .sec-gallery { grid-template-columns: 1fr 1fr; }
  .sg-1, .sg-2, .sg-3, .sg-4, .sg-5, .sg-6 { grid-column: span 2; }
  .sec-bigquote { margin: 64px -24px; padding: 64px 24px; }
  .sec-routes { grid-template-columns: 1fr; }
  .secao-footer { padding: 32px 24px; }
}

@media (max-width: 640px) {
  .secao-hero { padding: 96px 16px 48px 16px; }
  .secao-hero-num { font-size: 96px; top: -16px; }
  .secao-hero-image { padding: 0 16px; }
  .secao-body { padding: 48px 16px 32px 16px; }
  .sec-bigquote { margin: 48px -16px; padding: 48px 24px; }
  .secao-back { top: 16px; left: 16px; padding: 8px 14px; }
  .sec-gallery { grid-template-columns: 1fr; }
  .sg-1, .sg-2, .sg-3, .sg-4, .sg-5, .sg-6 { grid-column: span 1; }
  .sec-soon { padding: 56px 24px; }
}

/* ============================================================
   MAPA · Editorial premium light
   ============================================================ */

body.page-mapa {
  background: var(--cream);
  color: var(--ink);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  z-index: 50;
  flex-shrink: 0;
}

.topbar-left { display: flex; align-items: center; gap: 24px; }
.topbar-right { display: flex; align-items: center; gap: 16px; }

.topbar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 12px;
}

.topbar-brand-img {
  height: 28px;
  width: auto;
  display: block;
}

.topbar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.topbar-brand-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.topbar-brand-sub {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-a55);
}

.topbar-stats {
  display: flex;
  align-items: center;
  gap: 32px;
}

.topbar-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 72px;
}

.topbar-stat-num {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}

.topbar-stat-num.is-disp { color: var(--teal); }
.topbar-stat-num.is-dest { color: var(--gold); }
.topbar-stat-num.is-sold { color: var(--ink-a40); }

.topbar-stat-mini {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-a55);
}

.topbar-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s;
}

.topbar-action:hover { border-color: var(--ink); }

.topbar-action.is-primary {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.topbar-action.is-primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cream-soft);
}

.topbar-action svg { width: 14px; height: 14px; }

/* Filters bar */
.filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  background: var(--cream-soft);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.filters-bar::-webkit-scrollbar { display: none; }

.filter-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.filter-group-label {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-a55);
  margin-right: 4px;
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-a70);
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: all 0.25s var(--ease-out);
  border-radius: 100px;
}

.chip:hover { border-color: var(--ink); color: var(--ink); }

.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.chip-count {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  background: var(--ink-a06);
  border-radius: 100px;
  color: var(--ink-a55);
}

.chip.is-active .chip-count {
  background: var(--cream-a15);
  color: var(--cream-a85);
}

.filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 100px;
  min-height: 38px;
  min-width: 220px;
  transition: all 0.25s;
}

.filter-search:focus-within { border-color: var(--ink); }
.filter-search svg { width: 14px; height: 14px; color: var(--ink-a55); }

.filter-search input {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 13px;
  outline: 0;
  width: 100%;
  padding: 8px 0;
}

.filter-search input::placeholder { color: var(--ink-a40); }

.filter-clear {
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--ink-a70);
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s;
}

.filter-clear:hover { color: var(--terra); border-color: var(--terra); }

.filter-result-count {
  margin-left: auto;
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--ink-a55);
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-result-count strong { color: var(--ink); font-weight: 600; }

/* Map stage */
.map-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

.map-canvas-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.map-svg {
  width: 100%;
  height: 100%;
  max-width: 1200px;
  max-height: 100%;
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

/* Chalé polys */
.chale-poly { cursor: pointer; transition: all 0.35s var(--ease-out); }

.chale-poly-base {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 1.2;
  transition: all 0.35s var(--ease-out);
}

.chale-poly:hover .chale-poly-base {
  fill: var(--gold-a08);
  stroke: var(--gold);
}

.chale-poly.is-selected .chale-poly-base {
  fill: var(--gold-a18);
  stroke: var(--gold);
  stroke-width: 2;
}

.chale-label {
  pointer-events: none;
  fill: var(--ink);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 20px;
  text-anchor: middle;
  letter-spacing: 0;
}

.chale-tag {
  pointer-events: none;
  fill: var(--ink-a55);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 9px;
  text-anchor: middle;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

/* Fração polys */
.fracao-poly {
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.fracao-poly-base {
  stroke-width: 1.2;
  transition: all 0.3s var(--ease-out);
}

.fracao-poly[data-status="disponivel"] .fracao-poly-base {
  fill: var(--teal-soft);
  fill-opacity: 0.55;
  stroke: var(--teal);
}

.fracao-poly[data-status="reservado"] .fracao-poly-base {
  fill: var(--gold-light);
  fill-opacity: 0.62;
  stroke: var(--gold);
}

.fracao-poly[data-status="vendido"] .fracao-poly-base {
  fill: var(--sand);
  fill-opacity: 0.55;
  stroke: var(--ink-a25);
  stroke-dasharray: 3 3;
}

.fracao-poly[data-status="destaque"] .fracao-poly-base {
  fill: var(--gold);
  fill-opacity: 0.78;
  stroke: var(--gold-deep);
  animation: destaque-pulse 3.5s ease-in-out infinite;
}

@keyframes destaque-pulse {
  0%, 100% { stroke-width: 1.2; }
  50%      { stroke-width: 2; }
}

.fracao-poly:hover .fracao-poly-base {
  fill-opacity: 0.92;
  stroke-width: 2;
}

.fracao-poly.is-selected .fracao-poly-base {
  stroke-width: 2.5;
  fill-opacity: 1;
}

.fracao-poly.is-dimmed { opacity: 0.18; pointer-events: none; }

.fracao-label {
  pointer-events: none;
  fill: var(--ink);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 7px;
  text-anchor: middle;
}

/* Water shape */
.water-shape {
  fill: url(#water-gradient);
  opacity: 0.45;
}

.water-shape-edge {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.5;
}

.marina-dot { fill: var(--gold); }
.marina-label {
  fill: var(--gold-deep);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.cerrado-shape { fill: var(--terra); opacity: 0.10; }

.path-line {
  fill: none;
  stroke: var(--ink-a25);
  stroke-width: 0.8;
  stroke-dasharray: 4 6;
}

.compass { fill: var(--ink-a55); }

/* Map controls */
.map-controls {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
}

.map-ctrl-btn {
  width: 40px;
  height: 40px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.25s;
}

.map-ctrl-btn:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.map-ctrl-btn svg { width: 16px; height: 16px; }

/* Legend */
.legend {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 10;
  padding: 14px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 240px;
}

.legend-title {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-a55);
  margin-bottom: 4px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--ink);
}

.legend-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 2px;
}

.legend-dot.disp { background: var(--teal-soft); border: 1px solid var(--teal); }
.legend-dot.res  { background: var(--gold-light); border: 1px solid var(--gold); }
.legend-dot.sold { background: var(--sand); border: 1px dashed var(--ink-a25); }
.legend-dot.dest { background: var(--gold); }

/* Onboarding */
.onboarding {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink-a70);
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: opacity 0.5s;
}

.onboarding.is-hidden { opacity: 0; pointer-events: none; }

.onboarding svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }

/* Drawer (painel unidade) */
.drawer {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: var(--drawer-w);
  background: var(--cream-soft);
  border: 1px solid var(--line);
  z-index: 30;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + 32px));
  transition: transform 0.5s var(--ease-out);
  overflow: hidden;
}

.drawer.is-open { transform: translateX(0); }

.drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.25s;
}

.drawer-close:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.drawer-cover {
  position: relative;
  height: 160px;
  background: var(--paper);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
}

.drawer-cover-status {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.drawer-cover-status.is-disp { color: var(--teal-soft); border-color: var(--teal); }
.drawer-cover-status.is-res  { color: var(--gold-deep); border-color: var(--gold); }
.drawer-cover-status.is-sold { color: var(--ink-a55); border-color: var(--line); }
.drawer-cover-status.is-dest { color: var(--gold-deep); background: var(--gold-a18); border-color: var(--gold); }

.drawer-cover-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.drawer-cover-id {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink-a90);
  padding: 4px 10px;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 28px 120px 28px;
  scrollbar-width: thin;
}

.drawer-body::-webkit-scrollbar { width: 4px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--line); }

.drawer-eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink-a55);
  margin-bottom: 8px;
}

.drawer-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 4px 0;
}

.drawer-title em { font-style: italic; }

.drawer-subtitle {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: var(--ink-a55);
  margin: 0 0 28px 0;
}

.drawer-section { margin-bottom: 28px; }

.drawer-section-title {
  display: block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-a55);
  margin-bottom: 12px;
}

.drawer-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.drawer-stat {
  padding: 14px 0;
  border-right: 1px solid var(--line);
}

.drawer-stat:nth-child(even) { border-right: 0; padding-left: 16px; }
.drawer-stat:nth-child(odd)  { padding-right: 16px; }
.drawer-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.drawer-stat:nth-child(n+3)  { padding-top: 14px; padding-bottom: 0; }

.drawer-stat-mini {
  display: block;
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-a55);
  margin-bottom: 4px;
}

.drawer-stat-val {
  display: block;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 22px;
  color: var(--ink);
}

.drawer-stat-val small {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-a55);
  margin-left: 4px;
}

.drawer-desc {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-a70);
  margin: 0;
}

.drawer-desc em {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ink);
}

.diff-list { display: flex; flex-wrap: wrap; gap: 6px; }

.diff-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--ink-a70);
}

.diff-tag::before {
  content: '';
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 28px 20px 28px;
  background: var(--cream-soft);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drawer-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.drawer-price-val {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 26px;
  color: var(--ink);
  line-height: 1;
}

.drawer-price-mini {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-a55);
}

.drawer-actions { display: flex; gap: 8px; }

.drawer-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s var(--ease-out);
}

.drawer-btn.is-primary {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.drawer-btn.is-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--cream-soft); }

.drawer-btn.is-secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
  flex: 0 0 auto;
  width: 44px;
  padding: 14px;
}

.drawer-btn.is-secondary:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.drawer-btn.is-secondary svg { width: 16px; height: 16px; }

.drawer-btn.is-sold {
  background: var(--paper);
  color: var(--ink-a55);
  border: 1px dashed var(--line);
  cursor: not-allowed;
}

/* Empty state */
.empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  max-width: 400px;
  padding: 0 24px;
}

.empty-state.is-shown { opacity: 1; pointer-events: all; }

.empty-state-eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}

.empty-state-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 12px 0;
}

.empty-state-title em { font-style: italic; }

.empty-state-desc {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-a70);
  margin-bottom: 24px;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}

.empty-state-btn:hover { background: var(--gold); color: var(--cream-soft); }

/* Toasts */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 13px;
  opacity: 0;
  transform: translateY(20px);
  animation: toast-in 0.4s var(--ease-out) forwards;
  box-shadow: var(--shadow-card);
}

.toast.is-leaving { animation: toast-out 0.3s var(--ease-out) forwards; }

.toast svg { width: 14px; height: 14px; color: var(--gold-light); }

@keyframes toast-in { to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(20px); } }

/* Presentation mode */
body.presentation-mode .topbar,
body.presentation-mode .filters-bar { display: none; }

body.presentation-mode .presentation-hud { display: flex; }

.presentation-hud {
  display: none;
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--cream);
  border: 1px solid var(--line);
  z-index: 100;
}

.presentation-hud-brand {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.presentation-hud-sep { width: 1px; height: 14px; background: var(--line); }

.presentation-hud-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.presentation-hud-nav button {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s;
}

.presentation-hud-nav button:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.presentation-hud-pos {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-a70);
  min-width: 50px;
  text-align: center;
}

.presentation-hud-exit {
  padding: 6px 12px;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
}

.presentation-hud-exit:hover { background: var(--gold); color: var(--cream-soft); }

/* Compare bar */
.compare-bar {
  position: fixed;
  bottom: -160px;
  left: 24px;
  right: 24px;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 40;
  transition: bottom 0.5s var(--ease-out);
}

.compare-bar.is-open { bottom: 24px; }

.compare-bar-title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--gold-light);
  flex-shrink: 0;
}

.compare-bar-items { display: flex; gap: 8px; flex: 1; overflow-x: auto; }

.compare-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--cream-a15);
  font-family: var(--f-body);
  font-size: 11px;
  white-space: nowrap;
}

.compare-item button {
  background: transparent;
  border: 0;
  color: var(--cream-a60);
  font-size: 14px;
  cursor: pointer;
}

.compare-bar-clear {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--cream-a35);
  color: var(--cream-a85);
  font-family: var(--f-body);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Loading overlay */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  background: var(--cream);
  z-index: 100;
  transition: opacity 0.5s;
}

.loading-overlay.is-hidden { opacity: 0; pointer-events: none; }

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-label {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink-a55);
}

@media (max-width: 1024px) {
  .topbar { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
  .topbar-stats { gap: 16px; }
  .topbar-stat-num { font-size: 18px; }
  .topbar-action span { display: none; }
  .topbar-action { padding: 8px 12px; }
  .filters-bar { padding: 10px 16px; }
  .filter-group-label { display: none; }
  .map-canvas-wrap { padding: 8px; }
  .drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 75dvh; transform: translateY(calc(100% + 32px)); }
  .drawer.is-open { transform: translateY(0); }
  .map-controls { right: 12px; bottom: 12px; }
  .legend { left: 12px; bottom: 12px; max-width: 180px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

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

@media print {
  body { background: white; color: black; }
  .topbar, .filters-bar, .map-controls, .drawer, .compare-bar, .toast-container, .secao-back, .editorial-header { display: none; }
}

/* ============================================================
   TOTEM TOUCH 16:9 · Overrides
   Aplicado a tela interativa em totem/lousa touch landscape
   ============================================================ */

:root {
  --touch-min: 56px;       /* hit target mínimo touch */
  --touch-comfort: 64px;   /* hit target confortável */
}

html {
  /* Desabilita pinch zoom indesejado */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  /* Esconde cursor após inatividade */
  cursor: default;
  /* Previne destaque azul de toque no iOS/Android */
  -webkit-tap-highlight-color: transparent;
}

body.cursor-idle { cursor: none; }

/* Desabilita seleção de texto em totem (visual mais limpo) */
body.totem-mode * {
  -webkit-user-select: none;
  user-select: none;
}

body.totem-mode input,
body.totem-mode textarea,
body.totem-mode select {
  -webkit-user-select: auto;
  user-select: auto;
}

/* ============================================================
   TÍTULOS EM CAIXA ALTA (Fraunces caps + tracking)
   ============================================================ */

.standby-quote,
.mpi-title,
.ec-title,
.mc-quote-text,
.secao-hero-title,
.sec-h2,
.sec-step-title,
.sec-soon-title,
.empty-state-title,
.drawer-title,
.sec-compare-callout-title,
.sec-bigquote-text,
.bon-label {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Recupera italic dentro de uppercase (charme Fraunces) */
.standby-quote em,
.mpi-title em,
.ec-title em,
.mc-quote-text em,
.secao-hero-title em,
.sec-h2 em,
.sec-step-title em,
.sec-soon-title em,
.empty-state-title em,
.drawer-title em,
.sec-compare-callout-title em,
.sec-bigquote-text em,
.bon-label em {
  text-transform: uppercase;
  font-style: italic;
}

/* Ajusta tamanhos do uppercase (uppercase parece menor visualmente) */
.standby-quote      { font-size: clamp(18px, 2.3vw, 26px); letter-spacing: 0.08em; }
.mpi-title          { font-size: clamp(36px, 5vw, 64px); letter-spacing: 0.01em; line-height: 1.1; }
.secao-hero-title   { font-size: clamp(40px, 5.5vw, 78px); letter-spacing: 0; line-height: 1.05; }
.sec-h2             { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: 0.005em; line-height: 1.1; }
.ec-title           { font-size: 22px; letter-spacing: 0.02em; line-height: 1.18; }
.mc-hero .ec-title  { font-size: clamp(32px, 4vw, 56px); }
.mc-large .ec-title { font-size: 28px; }
.mc-quote-text      { font-size: clamp(22px, 3vw, 38px); letter-spacing: 0.03em; line-height: 1.25; }
.sec-bigquote-text  { font-size: clamp(24px, 3.4vw, 42px); letter-spacing: 0.02em; line-height: 1.28; }
.drawer-title       { font-size: 30px; letter-spacing: 0.02em; }
.empty-state-title  { font-size: 26px; letter-spacing: 0.02em; }
.sec-step-title     { font-size: clamp(18px, 1.8vw, 22px); letter-spacing: 0.02em; }
.sec-soon-title     { font-size: clamp(24px, 3vw, 36px); letter-spacing: 0.02em; }

/* Burger overlay labels (já são caps via padding) */
.bon-label { font-size: clamp(22px, 4vw, 36px); letter-spacing: 0.02em; }

/* ============================================================
   TOTEM 16:9 LANDSCAPE — escala otimizada
   Ativa em telas wide grandes (≥1280px e aspect ≥1.5)
   ============================================================ */

@media (min-width: 1280px) and (min-aspect-ratio: 3/2) {
  body { font-size: 17px; }

  /* Header maior */
  .editorial-header { padding: 28px 56px; }
  .eh-brand-text { font-size: 18px; letter-spacing: 0.20em; }
  .eh-nav { gap: 56px; }
  .eh-nav a { font-size: 12px; padding: 12px 0; min-height: var(--touch-min); display: inline-flex; align-items: center; }

  /* Menu intro */
  .menu-page-intro { padding: 144px 72px 56px 72px; }
  .mpi-eyebrow { font-size: 12px; letter-spacing: 0.32em; }
  .mpi-title { font-size: clamp(48px, 5.5vw, 84px); }
  .mpi-sub { font-size: 18px; max-width: 720px; }

  /* Menu grid mais respirado */
  .menu-grid { padding: 40px 72px 96px 72px; gap: 32px; }

  /* Cards maiores e mais legíveis */
  .ec-body { padding: 32px 32px 36px 32px; min-height: 140px; }
  .ec-num { font-size: 11px; letter-spacing: 0.32em; }
  .ec-title { font-size: 26px; }
  .ec-sub { font-size: 15px; line-height: 1.55; }
  .ec-arrow { width: var(--touch-min); height: var(--touch-min); font-size: 20px; bottom: 24px; right: 24px; }

  .mc-hero .ec-title { font-size: clamp(40px, 4.5vw, 64px); }
  .mc-large .ec-title { font-size: 32px; }
  .mc-quote { padding: 96px 80px; }

  /* Seções */
  .secao-hero { padding: 168px 72px 96px 72px; }
  .secao-hero-eyebrow { font-size: 12px; letter-spacing: 0.32em; }
  .secao-hero-num { font-size: clamp(180px, 22vw, 360px); top: -56px; }
  .secao-hero-lead { font-size: 19px; }
  .secao-body { padding: 96px 72px 80px 72px; }

  .sec-block { margin-bottom: 112px; }
  .sec-stat-cell { padding: 40px 24px; }
  .sec-stat-cell .sec-stat-num { font-size: clamp(48px, 5.5vw, 72px); }
  .sec-stat-cell .sec-stat-label { font-size: 13px; }
  .sec-p { font-size: 17px; line-height: 1.7; }

  /* Steps */
  .sec-step { padding: 40px 0; }
  .sec-step-num { font-size: 12px; }
  .sec-step-desc { font-size: 15px; }

  /* Big quote */
  .sec-bigquote { padding: 128px 72px; margin: 112px -72px; }

  /* CTA buttons touch-friendly */
  .sec-btn {
    padding: 22px 36px;
    font-size: 12px;
    min-height: var(--touch-comfort);
    letter-spacing: 0.26em;
  }
  .sec-btn-arrow { font-size: 16px; }

  /* Mapa topbar */
  .topbar { padding: 20px 40px; min-height: 88px; }
  .topbar-brand-name { font-size: 18px; letter-spacing: 0.18em; }
  .topbar-brand-sub { font-size: 10px; letter-spacing: 0.26em; }
  .topbar-stat { min-width: 88px; }
  .topbar-stat-num { font-size: 28px; }
  .topbar-stat-mini { font-size: 10px; letter-spacing: 0.22em; }
  .topbar-action {
    padding: 14px 22px;
    font-size: 12px;
    min-height: var(--touch-comfort);
    letter-spacing: 0.24em;
  }
  .topbar-action svg { width: 16px; height: 16px; }

  /* Filtros */
  .filters-bar { padding: 16px 40px; gap: 16px; }
  .filter-group-label { font-size: 11px; letter-spacing: 0.26em; }
  .chip {
    padding: 12px 18px;
    font-size: 13px;
    min-height: var(--touch-min);
  }
  .chip-count { font-size: 11px; padding: 3px 10px; }
  .filter-search { min-height: var(--touch-min); min-width: 260px; }
  .filter-search input { font-size: 14px; }
  .filter-clear { padding: 12px 18px; min-height: var(--touch-min); }

  /* Map controls touch */
  .map-ctrl-btn {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }
  .map-ctrl-btn svg { width: 20px; height: 20px; }

  /* Legend bigger */
  .legend { padding: 18px 22px; gap: 10px; max-width: 280px; }
  .legend-title { font-size: 11px; letter-spacing: 0.26em; }
  .legend-item { font-size: 13px; }
  .legend-dot { width: 16px; height: 16px; }

  /* Drawer maior */
  :root { --drawer-w: 480px; }
  .drawer-cover { height: 200px; }
  .drawer-cover-status { padding: 8px 14px; font-size: 11px; }
  .drawer-cover-id { padding: 5px 12px; font-size: 11px; }
  .drawer-body { padding: 36px 36px 140px 36px; }
  .drawer-title { font-size: 36px; }
  .drawer-subtitle { font-size: 18px; }
  .drawer-stat-val { font-size: 26px; }
  .drawer-stat-mini { font-size: 10px; }
  .drawer-section-title { font-size: 11px; letter-spacing: 0.26em; }
  .drawer-desc { font-size: 15px; line-height: 1.6; }
  .diff-tag { padding: 8px 14px; font-size: 12px; }
  .drawer-btn { padding: 18px 22px; font-size: 12px; min-height: var(--touch-comfort); }
  .drawer-btn.is-secondary { width: 56px; padding: 18px; }
  .drawer-price-val { font-size: 30px; }
  .drawer-close { width: 40px; height: 40px; font-size: 18px; }

  /* Fração polys MAIORES no SVG via stroke - na verdade ajusta no JS */
  .fracao-poly-base { stroke-width: 1.4; }
  .fracao-poly:hover .fracao-poly-base,
  .fracao-poly.is-active .fracao-poly-base { stroke-width: 2.5; }

  /* Onboarding maior */
  .onboarding { padding: 14px 26px; font-size: 13px; top: 32px; }

  /* Footer */
  .secao-footer { padding: 64px 72px; }
  .secao-footer-brand { font-size: 20px; letter-spacing: 0.20em; }
  .secao-footer-text { font-size: 12px; letter-spacing: 0.26em; }
  .secao-footer-link { font-size: 12px; letter-spacing: 0.26em; min-height: var(--touch-min); display: inline-flex; align-items: center; }

  /* Menu footer */
  .menu-footer-help { padding: 40px 72px 80px 72px; }
  .menu-footer-help-text { font-size: 24px; }
  .menu-footer-help-link {
    padding: 18px 32px;
    font-size: 12px;
    min-height: var(--touch-comfort);
    letter-spacing: 0.26em;
  }

  /* Standby touch */
  .standby-logo-wrap { width: clamp(260px, 22vw, 340px); }
  .standby-quote { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: 0.10em; }
  .standby-loc { font-size: 13px; letter-spacing: 0.40em; }
  .standby-cta { bottom: 80px; padding: 16px 24px; min-width: var(--touch-comfort); min-height: var(--touch-comfort); }
  .standby-cta-label { font-size: 12px; letter-spacing: 0.36em; }
  .standby-cta-bar { height: 48px; }

  /* Burger overlay (caso totem use) */
  .burger-overlay-nav a { padding: 28px 0; min-height: var(--touch-comfort); }

  /* Back button mais visível */
  .secao-back {
    top: 32px;
    left: 32px;
    padding: 14px 22px;
    font-size: 12px;
    min-height: var(--touch-comfort);
    letter-spacing: 0.26em;
  }
}

/* ============================================================
   TOTEM 4K · escala adicional (≥1920px)
   ============================================================ */

@media (min-width: 1920px) {
  body { font-size: 18px; }

  .editorial-header { padding: 32px 80px; }
  .menu-page-intro { padding: 168px 96px 64px 96px; }
  .mpi-title { font-size: clamp(56px, 5vw, 96px); }
  .menu-grid { padding: 48px 96px 112px 96px; max-width: 1920px; gap: 40px; }
  .secao-hero { padding: 192px 96px 112px 96px; }
  .secao-body { padding: 112px 96px 96px 96px; max-width: 1680px; }
  .secao-hero-image { padding: 0 96px; max-width: 1920px; }
  .topbar { padding: 24px 56px; min-height: 96px; }
  .filters-bar { padding: 20px 56px; }
  :root { --drawer-w: 520px; }

  .ec-title { font-size: 28px; }
  .mc-hero .ec-title { font-size: clamp(48px, 4.5vw, 72px); }
  .mc-large .ec-title { font-size: 36px; }
}

/* ============================================================
   TOUCH RIPPLE feedback nos botões
   ============================================================ */

.ec-arrow,
.sec-btn,
.drawer-btn,
.chip,
.topbar-action,
.menu-ctrl-btn,
.map-ctrl-btn,
.empty-state-btn,
.menu-footer-help-link,
.secao-back {
  position: relative;
  overflow: hidden;
}

.touch-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(184, 146, 74, 0.25);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ============================================================
   IDLE STATE indicator (sutil overlay)
   ============================================================ */

.idle-warning {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 14, 0.65);
  backdrop-filter: blur(6px);
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  color: var(--cream);
  text-align: center;
  padding: 32px;
}

.idle-warning.is-shown { display: flex; }

.idle-warning-eyebrow {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.idle-warning-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 4vw, 48px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.idle-warning-sub {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--cream-a60);
  max-width: 440px;
}

.idle-countdown {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 64px;
  color: var(--gold-light);
  line-height: 1;
}

.idle-warning-btn {
  margin-top: 16px;
  padding: 16px 32px;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: var(--touch-comfort);
}


/* ============================================================
   MENU CINEMA · Aurora-inspired dark grid 16:9 fit
   Aplica APENAS na page-menu-cinema (não afeta outras telas)
   ============================================================ */

body.page-menu-cinema {
  background: #050505;
  color: var(--cream);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Vinheta */
.cinema-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,0.40) 65%, rgba(0,0,0,0.85) 100%);
}

/* Luz radial dourada sutil ao centro */
.cinema-radial-light {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60vw 40vh at 50% 45%, rgba(184, 146, 74, 0.10) 0%, rgba(184, 146, 74, 0.04) 30%, transparent 60%);
  mix-blend-mode: screen;
}

/* Ruído fino */
.cinema-noise {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* ────── HEADER ────── */
.cinema-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: transparent;
  pointer-events: none;
}

.cinema-header > * { pointer-events: auto; }

.cinema-burger {
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.cinema-burger span {
  display: block;
  width: 26px;
  height: 1.2px;
  background: var(--cream);
  transition: all 0.3s;
}

.cinema-burger:hover span { background: var(--gold-light); }

.cinema-brand {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-decoration: none;
  line-height: 1;
}

.cinema-brand:hover { opacity: 0.7; }

.cinema-brand-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.20em;
  color: var(--cream);
}

.cinema-brand-sub {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* ────── GRID ────── */
.cinema-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1.55fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  gap: 12px;
  padding: 80px 24px 24px 24px;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
}

/* Posicionamento grid (12 elementos) */
.cinema-card[data-pos="L1"] { grid-column: 1; grid-row: 1; }
.cinema-row[data-pos="L2"]   { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
.cinema-card[data-pos="L3"] { grid-column: 1; grid-row: 3; }
.cinema-card[data-pos="L4"] { grid-column: 1; grid-row: 4; }
.cinema-card[data-pos="L5"] { grid-column: 1; grid-row: 5; }

.cinema-hero[data-pos="C1"]  { grid-column: 2; grid-row: 1 / span 3; }
.cinema-card[data-pos="C2"]  { grid-column: 2; grid-row: 4 / span 2; }

.cinema-card[data-pos="R1"] { grid-column: 3; grid-row: 1; }
.cinema-card[data-pos="R2"] { grid-column: 3; grid-row: 2; }
.cinema-card[data-pos="R3"] { grid-column: 3; grid-row: 3; }
.cinema-card[data-pos="R4"] { grid-column: 3; grid-row: 4; }
.cinema-card[data-pos="R5"] { grid-column: 3; grid-row: 5; }

/* ────── CARD BASE ────── */
.cinema-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(245, 241, 232, 0.08);
  text-decoration: none;
  color: var(--cream);
  transition: all 0.5s var(--ease-out);
  cursor: pointer;
  min-height: 0;
  isolation: isolate;
}

.cinema-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  z-index: 4;
  pointer-events: none;
  transition: all 0.4s var(--ease-out);
}

.cinema-card:hover {
  border-color: rgba(184, 146, 74, 0.35);
  transform: translateY(-2px);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(184, 146, 74, 0.20),
    inset 0 0 60px rgba(184, 146, 74, 0.08);
}

.cinema-card:hover::before {
  border-color: rgba(184, 146, 74, 0.25);
  inset: 4px;
}

/* Image layer */
.cc-image {
  position: absolute;
  inset: 0;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.9s var(--ease-out);
  filter: brightness(0.55) saturate(0.85) contrast(1.05);
}

.cinema-card:hover .cc-image {
  transform: scale(1.06);
  filter: brightness(0.68) saturate(0.95) contrast(1.08);
}

/* Overlay layer */
.cc-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.92) 100%);
  transition: background 0.5s;
}

.cc-overlay-medium {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.88) 100%);
}

.cc-overlay-gold {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.70) 70%, rgba(0,0,0,0.90) 100%),
    radial-gradient(ellipse at 80% 80%, rgba(184, 146, 74, 0.18) 0%, transparent 60%);
}

.cc-overlay-back {
  background:
    linear-gradient(135deg, #050505 0%, #0a0a0a 100%);
}

.cinema-card:hover .cc-overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.88) 100%);
}

/* Body */
.cc-body {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc-body-large {
  bottom: 32px;
  left: 32px;
  right: 32px;
}

.cc-body-back {
  bottom: 22px;
  left: 24px;
  right: 24px;
}

.cc-tag {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(184, 146, 74, 0.35);
  background: rgba(184, 146, 74, 0.05);
  align-self: flex-start;
}

.cc-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--cream);
  margin: 0;
  text-transform: uppercase;
}

.cc-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-light);
}

.cc-title-large {
  font-size: clamp(28px, 2.8vw, 40px);
  letter-spacing: 0.02em;
}

.cc-title-back {
  font-size: 22px;
  color: var(--cream-a85);
}

.cc-sub {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-a60);
  margin-top: 4px;
}

.cc-icon {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-a60);
  transition: all 0.3s;
}

.cc-icon svg { width: 20px; height: 20px; }

.cinema-card:hover .cc-icon {
  color: var(--gold-light);
  transform: translate(2px, -2px);
}

.cc-icon-gold { color: var(--gold-light); }

/* Variantes */
.cinema-half { /* dentro da row */ }

.cinema-half .cc-title { font-size: 18px; }
.cinema-half .cc-body { left: 18px; right: 18px; bottom: 16px; }
.cinema-half .cc-icon { top: 14px; right: 14px; }
.cinema-half .cc-sub { font-size: 9px; letter-spacing: 0.24em; }

.cinema-highlight {
  border-color: rgba(184, 146, 74, 0.45);
}

.cinema-highlight:hover {
  border-color: var(--gold-light);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(184, 146, 74, 0.45),
    inset 0 0 80px rgba(184, 146, 74, 0.18);
}

.cinema-large .cc-title { font-size: clamp(24px, 2.4vw, 34px); }

.cinema-back {
  background: linear-gradient(135deg, #050505 0%, #0c0c0c 100%);
  border-color: rgba(245, 241, 232, 0.06);
}

.cinema-back .cc-icon { color: var(--cream-a60); }

/* ────── HERO QUOTE CENTRAL ────── */
.cinema-hero {
  position: relative;
  overflow: hidden;
  background: #060606;
  border: 1px solid rgba(245, 241, 232, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  min-height: 0;
}

.cc-image-hero {
  position: absolute;
  inset: 0;
  background-image: url('img/curadoria/c03.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
  filter: brightness(0.20) saturate(0.5) blur(2px);
  transform: scale(1.1);
}

.cc-overlay-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(184, 146, 74, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%);
}

.cinema-hero-body {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 32px;
  max-width: 580px;
}

.cinema-hero-eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 24px;
  padding: 6px 14px;
  border: 1px solid rgba(184, 146, 74, 0.25);
  background: rgba(184, 146, 74, 0.04);
}

.cinema-hero-quote {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--cream);
  margin: 0;
  text-transform: uppercase;
}

.cinema-hero-quote em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-light);
}

.cinema-hero-divider {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 28px auto 16px auto;
  opacity: 0.55;
}

.cinema-hero-loc {
  display: block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: var(--cream-a60);
}

/* ────── BURGER OVERLAY · cinema dark ────── */
body.page-menu-cinema .burger-overlay {
  background: #050505;
  color: var(--cream);
}

body.page-menu-cinema .burger-overlay-brand {
  color: var(--cream);
  letter-spacing: 0.20em;
}

body.page-menu-cinema .burger-overlay-close {
  background: transparent;
  border-color: rgba(245, 241, 232, 0.20);
  color: var(--cream);
}

body.page-menu-cinema .burger-overlay-close:hover {
  background: var(--cream);
  color: #050505;
  border-color: var(--cream);
}

body.page-menu-cinema .burger-overlay-header {
  border-bottom-color: rgba(245, 241, 232, 0.12);
}

body.page-menu-cinema .burger-overlay-nav a {
  border-bottom-color: rgba(245, 241, 232, 0.08);
}

body.page-menu-cinema .burger-overlay-nav .bon-num { color: var(--cream-a35); }

body.page-menu-cinema .burger-overlay-nav .bon-label {
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body.page-menu-cinema .burger-overlay-nav a:hover .bon-label { color: var(--gold-light); }

body.page-menu-cinema .burger-overlay-nav .bon-arrow { color: var(--cream-a35); }
body.page-menu-cinema .burger-overlay-nav a:hover .bon-arrow { color: var(--gold-light); }

body.page-menu-cinema .burger-overlay-footer {
  border-top-color: rgba(245, 241, 232, 0.12);
}

body.page-menu-cinema .bof-link { color: var(--cream-a60); }
body.page-menu-cinema .bof-link:hover { color: var(--gold-light); }

/* ────── RESPONSIVE 16:9 ────── */

/* 1920x1080 (default - já configurado acima) */

/* 1600x900 */
@media (max-width: 1680px) {
  .cinema-grid { padding: 76px 20px 20px 20px; gap: 10px; }
  .cinema-row[data-pos="L2"] { gap: 10px; }
  .cc-title { font-size: 20px; }
  .cinema-half .cc-title { font-size: 16px; }
  .cinema-hero-quote { font-size: clamp(26px, 3vw, 42px); }
  .cc-body { left: 20px; right: 20px; bottom: 18px; }
  .cinema-half .cc-body { left: 16px; right: 16px; bottom: 14px; }
  .cinema-large .cc-title { font-size: clamp(22px, 2.2vw, 30px); }
}

/* 1366x768 */
@media (max-width: 1440px) {
  .cinema-header { height: 56px; padding: 0 20px; }
  .cinema-brand-text { font-size: 16px; }
  .cinema-brand-sub { font-size: 8px; }
  .cinema-grid { padding: 68px 16px 16px 16px; gap: 9px; }
  .cinema-row[data-pos="L2"] { gap: 9px; }
  .cc-title { font-size: 17px; }
  .cinema-half .cc-title { font-size: 14px; }
  .cc-sub { font-size: 9px; letter-spacing: 0.22em; }
  .cinema-half .cc-sub { font-size: 8px; letter-spacing: 0.20em; }
  .cc-body { left: 18px; right: 18px; bottom: 16px; }
  .cinema-half .cc-body { left: 14px; right: 14px; bottom: 12px; }
  .cc-icon { width: 24px; height: 24px; top: 14px; right: 16px; }
  .cc-icon svg { width: 16px; height: 16px; }
  .cinema-half .cc-icon { top: 10px; right: 12px; width: 20px; height: 20px; }
  .cinema-half .cc-icon svg { width: 14px; height: 14px; }
  .cinema-hero-quote { font-size: clamp(22px, 2.6vw, 36px); }
  .cinema-hero-eyebrow { font-size: 9px; letter-spacing: 0.30em; }
  .cc-tag { font-size: 8px; padding: 4px 8px; letter-spacing: 0.28em; }
  .cinema-large .cc-title { font-size: clamp(20px, 2vw, 28px); }
}

/* 1280x720 */
@media (max-width: 1300px) {
  .cinema-header { height: 52px; padding: 0 16px; }
  .cinema-burger { width: 40px; height: 40px; }
  .cinema-burger span { width: 22px; }
  .cinema-brand-text { font-size: 14px; letter-spacing: 0.18em; }
  .cinema-brand-sub { font-size: 8px; letter-spacing: 0.28em; }

  .cinema-grid { padding: 60px 12px 12px 12px; gap: 8px; }
  .cinema-row[data-pos="L2"] { gap: 8px; }

  .cc-title { font-size: 15px; letter-spacing: 0; }
  .cinema-half .cc-title { font-size: 12px; }
  .cinema-large .cc-title { font-size: clamp(18px, 1.8vw, 24px); }

  .cc-sub { font-size: 8px; letter-spacing: 0.20em; margin-top: 2px; }
  .cinema-half .cc-sub { font-size: 7px; letter-spacing: 0.18em; }

  .cc-body { left: 14px; right: 14px; bottom: 12px; }
  .cinema-half .cc-body { left: 12px; right: 12px; bottom: 10px; }

  .cc-icon { width: 22px; height: 22px; top: 10px; right: 12px; }
  .cc-icon svg { width: 14px; height: 14px; }
  .cinema-half .cc-icon { top: 8px; right: 10px; width: 18px; height: 18px; }
  .cinema-half .cc-icon svg { width: 12px; height: 12px; }

  .cinema-hero-quote { font-size: clamp(20px, 2.4vw, 32px); }
  .cinema-hero-eyebrow { font-size: 8px; letter-spacing: 0.28em; margin-bottom: 16px; padding: 5px 10px; }
  .cinema-hero-divider { margin: 18px auto 12px auto; width: 36px; }
  .cinema-hero-loc { font-size: 9px; letter-spacing: 0.34em; }

  .cc-tag { font-size: 7px; padding: 3px 7px; letter-spacing: 0.26em; }
}

/* Telas estreitas / mobile / tablet portrait */
@media (max-width: 900px) {
  body.page-menu-cinema { height: auto; overflow-y: auto; }
  .cinema-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    padding: 80px 16px 32px 16px;
    gap: 12px;
  }
  .cinema-card[data-pos], .cinema-hero[data-pos], .cinema-row[data-pos] {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 160px;
  }
  .cinema-hero[data-pos="C1"] { min-height: 280px; }
  .cinema-card[data-pos="C2"] { min-height: 200px; }
  .cinema-row[data-pos="L2"] { grid-template-columns: 1fr 1fr; min-height: 160px; }
  .cinema-half { min-height: 160px; }
}


/* ============================================================
   MENU CINEMA · TEMA CREAM com profundidade 3D camera
   Aplica APENAS quando .page-menu-cream está ativa
   Sobrescreve o tema dark anterior
   ============================================================ */

body.page-menu-cream {
  background: #EFE9DD;
  color: var(--ink);
  perspective: 1400px;
}

/* Camadas atmosféricas cream */
.cream-depth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* gradiente principal cream sand */
    radial-gradient(ellipse at 50% 30%, #F5F1E8 0%, #EFE9DD 35%, #E8DFC9 75%, #D6CBB0 100%);
}

.cream-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* vinheta sand mais escura nas bordas */
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(184, 146, 74, 0.04) 50%, rgba(122, 100, 56, 0.18) 90%, rgba(80, 65, 36, 0.28) 100%);
}

.cream-radial-light {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* luz dourada radial sutil ao centro */
    radial-gradient(ellipse 50vw 35vh at 50% 42%, rgba(255, 248, 224, 0.40) 0%, rgba(255, 240, 200, 0.15) 30%, transparent 65%);
  mix-blend-mode: soft-light;
}

body.page-menu-cream .cinema-noise {
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* Header cream */
body.page-menu-cream .cinema-header {
  background: linear-gradient(180deg, rgba(239, 233, 221, 0.92) 0%, rgba(239, 233, 221, 0) 100%);
  backdrop-filter: blur(2px);
}

body.page-menu-cream .cinema-burger span {
  background: var(--ink);
  height: 1px;
}

body.page-menu-cream .cinema-burger:hover span { background: var(--gold-deep); }

.cinema-brand-logo {
  height: 42px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(184, 146, 74, 0.15));
}

body.page-menu-cream .cinema-brand:hover .cinema-brand-logo { opacity: 0.75; }

/* Grid base mantém estrutura mas cards estilo cream */
body.page-menu-cream .cinema-grid {
  z-index: 10;
  padding: 88px 32px 32px 32px;
  gap: 16px;
  transform-style: preserve-3d;
}

body.page-menu-cream .cinema-row { gap: 16px; }

/* ────── CARDS CREAM CINEMÁTICOS ────── */
body.page-menu-cream .cinema-card {
  background: var(--cream-soft);
  border: 1px solid rgba(122, 100, 56, 0.10);
  box-shadow:
    0 1px 2px rgba(80, 65, 36, 0.04),
    0 8px 16px rgba(80, 65, 36, 0.06),
    0 24px 48px rgba(80, 65, 36, 0.08);
  transform: perspective(1200px) rotateX(calc(var(--tilt-x, 0) * 0.6deg)) rotateY(calc(var(--tilt-y, 0) * 0.6deg)) translateZ(0);
  transition:
    transform 0.6s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    border-color 0.4s var(--ease-out);
  transform-style: preserve-3d;
}

body.page-menu-cream .cinema-card::before { display: none; }

body.page-menu-cream .cinema-card:hover {
  border-color: rgba(184, 146, 74, 0.45);
  transform: perspective(1200px) rotateX(calc(var(--tilt-x, 0) * 0.4deg)) rotateY(calc(var(--tilt-y, 0) * 0.4deg)) translateY(-4px) translateZ(20px);
  box-shadow:
    0 2px 4px rgba(80, 65, 36, 0.06),
    0 16px 32px rgba(80, 65, 36, 0.12),
    0 48px 80px rgba(80, 65, 36, 0.18),
    0 0 0 1px rgba(184, 146, 74, 0.20);
}

/* Imagem cinematográfica refinada */
body.page-menu-cream .cc-image {
  filter: brightness(0.68) saturate(0.92) contrast(1.08);
}

body.page-menu-cream .cinema-card:hover .cc-image {
  filter: brightness(0.78) saturate(1) contrast(1.10);
  transform: scale(1.05);
}

/* Overlay vertical claro-pra-escuro pra legibilidade */
body.page-menu-cream .cc-overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.78) 100%);
}

body.page-menu-cream .cc-overlay-medium {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.75) 100%);
}

body.page-menu-cream .cc-overlay-gold {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.50) 60%, rgba(0,0,0,0.82) 100%),
    radial-gradient(ellipse at 80% 80%, rgba(184, 146, 74, 0.28) 0%, transparent 60%);
}

body.page-menu-cream .cc-overlay-back {
  background: linear-gradient(135deg, #F5F1E8 0%, #E8DFC9 100%);
}

body.page-menu-cream .cinema-card:hover .cc-overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.40) 55%, rgba(0,0,0,0.74) 100%);
}

/* ────── TIPOGRAFIA REFINADA · ZERO italic · títulos menores ────── */
body.page-menu-cream .cc-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal;            /* zero italic */
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--cream);
  margin: 0;
  text-transform: none;
}

body.page-menu-cream .cc-title em {
  font-style: normal;            /* zero italic */
  font-weight: 400;
  color: var(--gold-light);
}

body.page-menu-cream .cinema-half .cc-title { font-size: 13px; line-height: 1.18; }

body.page-menu-cream .cc-title-large {
  font-size: 22px;
  letter-spacing: 0;
}

body.page-menu-cream .cc-title-back {
  font-size: 16px;
  color: var(--ink);
}

body.page-menu-cream .cc-sub {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.72);
  margin-top: 6px;
}

body.page-menu-cream .cinema-back .cc-sub { color: var(--ink-a55); }
body.page-menu-cream .cinema-half .cc-sub { font-size: 9px; letter-spacing: 0.18em; }

body.page-menu-cream .cc-tag {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 8px;
  padding: 4px 9px;
  border: 1px solid rgba(184, 146, 74, 0.45);
  background: rgba(184, 146, 74, 0.10);
  backdrop-filter: blur(4px);
}

body.page-menu-cream .cc-body {
  left: 22px;
  right: 22px;
  bottom: 20px;
  gap: 2px;
}

body.page-menu-cream .cc-body-large {
  bottom: 28px;
  left: 28px;
  right: 28px;
}

body.page-menu-cream .cinema-half .cc-body {
  left: 16px;
  right: 16px;
  bottom: 14px;
}

body.page-menu-cream .cc-icon {
  width: 26px;
  height: 26px;
  top: 16px;
  right: 18px;
  color: rgba(245, 241, 232, 0.75);
}

body.page-menu-cream .cc-icon svg { width: 16px; height: 16px; }

body.page-menu-cream .cinema-half .cc-icon { top: 12px; right: 14px; width: 22px; height: 22px; }
body.page-menu-cream .cinema-half .cc-icon svg { width: 14px; height: 14px; }

body.page-menu-cream .cinema-card:hover .cc-icon {
  color: var(--gold-light);
}

body.page-menu-cream .cc-icon-gold { color: var(--gold-light); }

body.page-menu-cream .cinema-back .cc-icon { color: var(--ink-a55); }
body.page-menu-cream .cinema-back:hover .cc-icon { color: var(--gold-deep); }

/* ────── HIGHLIGHT DISPONIBILIDADE ────── */
body.page-menu-cream .cinema-highlight {
  border-color: rgba(184, 146, 74, 0.50);
  box-shadow:
    0 1px 2px rgba(80, 65, 36, 0.06),
    0 12px 24px rgba(184, 146, 74, 0.16),
    0 32px 56px rgba(184, 146, 74, 0.12);
}

body.page-menu-cream .cinema-highlight:hover {
  border-color: var(--gold);
  box-shadow:
    0 2px 6px rgba(80, 65, 36, 0.08),
    0 20px 36px rgba(184, 146, 74, 0.22),
    0 56px 88px rgba(184, 146, 74, 0.20),
    0 0 0 1px rgba(184, 146, 74, 0.40);
}

/* ────── HERO QUOTE CREAM ────── */
body.page-menu-cream .cinema-hero {
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--paper) 100%);
  border: 1px solid rgba(122, 100, 56, 0.10);
  box-shadow:
    0 1px 2px rgba(80, 65, 36, 0.04),
    0 12px 24px rgba(80, 65, 36, 0.08),
    0 32px 56px rgba(80, 65, 36, 0.10);
  transform: perspective(1200px) rotateX(calc(var(--tilt-x, 0) * 0.3deg)) rotateY(calc(var(--tilt-y, 0) * 0.3deg)) translateZ(10px);
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

body.page-menu-cream .cc-image-hero {
  background-image: url('img/curadoria/c03.jpg');
  filter: brightness(0.30) saturate(0.55) blur(3px);
  transform: scale(1.12);
}

body.page-menu-cream .cc-overlay-hero {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(184, 146, 74, 0.25) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(10, 10, 10, 0.78) 100%);
}

body.page-menu-cream .cinema-hero-body { padding: 0 40px; max-width: 560px; }

body.page-menu-cream .cinema-hero-eyebrow {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 28px;
  padding: 6px 14px;
  border: 1px solid rgba(184, 146, 74, 0.35);
  background: rgba(184, 146, 74, 0.08);
}

body.page-menu-cream .cinema-hero-quote {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--cream);
  margin: 0;
  text-transform: none;
}

body.page-menu-cream .cinema-hero-quote em {
  font-style: normal;
  font-weight: 400;
  color: var(--gold-light);
}

body.page-menu-cream .cinema-hero-divider {
  width: 40px;
  height: 1px;
  background: var(--gold-light);
  margin: 28px auto 16px auto;
  opacity: 0.6;
}

body.page-menu-cream .cinema-hero-loc {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--cream-a60);
}

/* ────── CARD VOLTAR (cream solid) ────── */
body.page-menu-cream .cinema-back {
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--paper) 100%);
}

body.page-menu-cream .cc-body-back { gap: 4px; }

body.page-menu-cream .cinema-back .cc-title { color: var(--ink); font-weight: 400; }
body.page-menu-cream .cinema-back .cc-title em { color: var(--gold-deep); font-style: normal; font-weight: 400; }

/* ────── BURGER OVERLAY CREAM ────── */
body.page-menu-cream .burger-overlay {
  background: var(--cream);
  color: var(--ink);
}

body.page-menu-cream .burger-overlay-logo-img {
  height: 40px;
  width: auto;
}

body.page-menu-cream .burger-overlay-close {
  background: transparent;
  border-color: rgba(122, 100, 56, 0.20);
  color: var(--ink);
}

body.page-menu-cream .burger-overlay-close:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

body.page-menu-cream .burger-overlay-header {
  border-bottom-color: rgba(122, 100, 56, 0.15);
}

body.page-menu-cream .burger-overlay-nav a {
  border-bottom-color: rgba(122, 100, 56, 0.08);
}

body.page-menu-cream .burger-overlay-nav .bon-num { color: var(--ink-a40); }

body.page-menu-cream .burger-overlay-nav .bon-label {
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-style: normal;
}

body.page-menu-cream .burger-overlay-nav .bon-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--gold-deep);
}

body.page-menu-cream .burger-overlay-nav a:hover .bon-label { color: var(--gold-deep); }

body.page-menu-cream .burger-overlay-nav .bon-arrow { color: var(--ink-a40); }
body.page-menu-cream .burger-overlay-nav a:hover .bon-arrow { color: var(--gold-deep); }

body.page-menu-cream .burger-overlay-footer {
  border-top-color: rgba(122, 100, 56, 0.15);
}

body.page-menu-cream .bof-link { color: var(--ink-a55); }
body.page-menu-cream .bof-link:hover { color: var(--gold-deep); }

/* ────── RESPONSIVE CREAM 16:9 ────── */
@media (max-width: 1680px) {
  body.page-menu-cream .cinema-grid { padding: 80px 24px 24px 24px; gap: 14px; }
  body.page-menu-cream .cinema-row { gap: 14px; }
  body.page-menu-cream .cc-title { font-size: 15px; }
  body.page-menu-cream .cc-title-large { font-size: 20px; }
  body.page-menu-cream .cinema-half .cc-title { font-size: 12px; }
  body.page-menu-cream .cc-body { left: 20px; right: 20px; bottom: 18px; }
  body.page-menu-cream .cinema-hero-quote { font-size: clamp(22px, 2.4vw, 32px); }
}

@media (max-width: 1440px) {
  body.page-menu-cream .cinema-grid { padding: 72px 18px 18px 18px; gap: 12px; }
  body.page-menu-cream .cinema-row { gap: 12px; }
  body.page-menu-cream .cinema-brand-logo { height: 36px; }
  body.page-menu-cream .cc-title { font-size: 14px; }
  body.page-menu-cream .cc-title-large { font-size: 18px; }
  body.page-menu-cream .cinema-half .cc-title { font-size: 11px; }
  body.page-menu-cream .cc-sub { font-size: 9px; letter-spacing: 0.18em; }
  body.page-menu-cream .cinema-half .cc-sub { font-size: 8px; letter-spacing: 0.16em; }
  body.page-menu-cream .cc-body { left: 16px; right: 16px; bottom: 14px; }
  body.page-menu-cream .cinema-half .cc-body { left: 12px; right: 12px; bottom: 10px; }
  body.page-menu-cream .cc-icon { width: 22px; height: 22px; top: 12px; right: 14px; }
  body.page-menu-cream .cc-icon svg { width: 14px; height: 14px; }
  body.page-menu-cream .cinema-hero-quote { font-size: clamp(20px, 2.2vw, 28px); }
  body.page-menu-cream .cc-tag { font-size: 8px; padding: 3px 7px; }
}

@media (max-width: 1300px) {
  body.page-menu-cream .cinema-grid { padding: 64px 14px 14px 14px; gap: 10px; }
  body.page-menu-cream .cinema-row { gap: 10px; }
  body.page-menu-cream .cinema-brand-logo { height: 30px; }
  body.page-menu-cream .cc-title { font-size: 13px; }
  body.page-menu-cream .cc-title-large { font-size: 16px; }
  body.page-menu-cream .cinema-half .cc-title { font-size: 10px; }
  body.page-menu-cream .cc-sub { font-size: 8px; letter-spacing: 0.16em; }
  body.page-menu-cream .cinema-half .cc-sub { font-size: 7px; }
  body.page-menu-cream .cc-body { left: 14px; right: 14px; bottom: 12px; }
  body.page-menu-cream .cinema-half .cc-body { left: 10px; right: 10px; bottom: 8px; }
  body.page-menu-cream .cc-icon { width: 20px; height: 20px; top: 10px; right: 12px; }
  body.page-menu-cream .cc-icon svg { width: 12px; height: 12px; }
  body.page-menu-cream .cinema-half .cc-icon { width: 18px; height: 18px; top: 8px; right: 10px; }
  body.page-menu-cream .cinema-half .cc-icon svg { width: 11px; height: 11px; }
  body.page-menu-cream .cinema-hero-quote { font-size: clamp(18px, 2vw, 26px); }
  body.page-menu-cream .cinema-hero-eyebrow { font-size: 8px; letter-spacing: 0.34em; margin-bottom: 18px; }
  body.page-menu-cream .cinema-hero-divider { margin: 18px auto 12px auto; width: 32px; }
  body.page-menu-cream .cinema-hero-loc { font-size: 8px; letter-spacing: 0.38em; }
  body.page-menu-cream .cc-tag { font-size: 7px; padding: 3px 6px; }
}


/* ============================================================
   MENU CREAM · Logo preto + Grid alinhado
   ============================================================ */

/* Logo preto no menu (transparente PNG → forçar preto via filter) */
body.page-menu-cream .cinema-brand-logo,
body.page-menu-cream .burger-overlay-logo-img {
  filter: brightness(0) saturate(100%);
}

body.page-menu-cream .cinema-brand:hover .cinema-brand-logo {
  filter: brightness(0) saturate(100%) opacity(0.65);
}

/* ────── GRID ALINHADO 16:9 ────── */
body.page-menu-cream .cinema-grid {
  grid-template-columns: 1fr 1.55fr 1fr;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
}

/* Garante que cada card preenche sua célula */
body.page-menu-cream .cinema-card,
body.page-menu-cream .cinema-hero,
body.page-menu-cream .cinema-row {
  height: 100%;
  width: 100%;
  min-height: 0;
  min-width: 0;
}

/* Row L2 com 2 cards lado a lado preenche altura igual aos outros */
body.page-menu-cream .cinema-row[data-pos="L2"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: inherit;
}

body.page-menu-cream .cinema-half {
  height: 100%;
  min-height: 0;
}

/* Hero central: 3 rows uniformes */
body.page-menu-cream .cinema-hero[data-pos="C1"] {
  grid-row: 1 / span 3;
}

/* Card consultor central: 2 rows */
body.page-menu-cream .cinema-card[data-pos="C2"] {
  grid-row: 4 / span 2;
}

/* Garante consistência: padding interno NÃO aumenta altura */
body.page-menu-cream .cinema-card,
body.page-menu-cream .cinema-hero {
  box-sizing: border-box;
}

/* Imagens dentro dos cards: cover total */
body.page-menu-cream .cc-image,
body.page-menu-cream .cc-overlay {
  width: 100%;
  height: 100%;
}


/* ============================================================
   MENU CREAM v3 · Flexbox alignment (substitui grid)
   Cada coluna distribui espaço por flex proporcional → alinhamento perfeito
   ============================================================ */

body.page-menu-cream .cinema-grid {
  display: flex !important;
  flex-direction: row;
  gap: 16px;
  padding: 88px 32px 32px 32px;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  align-items: stretch;
}

body.page-menu-cream .cinema-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  min-width: 0;
}

body.page-menu-cream .cinema-col-center {
  flex: 1.55 1 0;
}

/* Cards dentro da coluna: flex 1 (igual altura) ou flex N para destaque */
body.page-menu-cream .cinema-col > .cinema-card,
body.page-menu-cream .cinema-col > .cinema-pair,
body.page-menu-cream .cinema-col > .cinema-hero {
  flex: 1 1 0;
  min-height: 0;
}

body.page-menu-cream .cinema-flex-2 { flex: 2 1 0 !important; }
body.page-menu-cream .cinema-flex-3 { flex: 3 1 0 !important; }

/* Pair (2 cards lado a lado) preenche linha igual aos outros */
body.page-menu-cream .cinema-pair {
  display: flex;
  flex-direction: row;
  gap: 16px;
  min-height: 0;
}

body.page-menu-cream .cinema-pair > .cinema-card {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}

/* Garante que cards têm overflow contido */
body.page-menu-cream .cinema-card,
body.page-menu-cream .cinema-hero {
  height: 100%;
  width: 100%;
  min-height: 0;
  position: relative;
}

/* ────── Responsive flex gaps ────── */
@media (max-width: 1680px) {
  body.page-menu-cream .cinema-grid { padding: 80px 24px 24px 24px; gap: 14px; }
  body.page-menu-cream .cinema-col { gap: 14px; }
  body.page-menu-cream .cinema-pair { gap: 14px; }
}

@media (max-width: 1440px) {
  body.page-menu-cream .cinema-grid { padding: 72px 18px 18px 18px; gap: 12px; }
  body.page-menu-cream .cinema-col { gap: 12px; }
  body.page-menu-cream .cinema-pair { gap: 12px; }
}

@media (max-width: 1300px) {
  body.page-menu-cream .cinema-grid { padding: 64px 14px 14px 14px; gap: 10px; }
  body.page-menu-cream .cinema-col { gap: 10px; }
  body.page-menu-cream .cinema-pair { gap: 10px; }
}

@media (max-width: 900px) {
  body.page-menu-cream .cinema-grid {
    flex-direction: column;
    height: auto;
    padding: 80px 16px 32px 16px;
  }
  body.page-menu-cream .cinema-col,
  body.page-menu-cream .cinema-col-center {
    flex: 1 1 auto;
  }
  body.page-menu-cream .cinema-col > .cinema-card,
  body.page-menu-cream .cinema-col > .cinema-pair,
  body.page-menu-cream .cinema-col > .cinema-hero {
    min-height: 160px;
  }
  body.page-menu-cream .cinema-flex-3 { min-height: 280px; }
  body.page-menu-cream .cinema-flex-2 { min-height: 200px; }
  body.page-menu-cream .cinema-pair { flex-direction: row; }
}

/* ============================================================
   FIX PLATAFORMA · alinhamentos
   ============================================================ */

/* Drawer stats grid: bordas internas consistentes */
.drawer-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.drawer-stat {
  padding: 16px 12px;
  border-right: 1px solid var(--line);
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.drawer-stat:nth-child(2n) { border-right: 0; }
.drawer-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.drawer-stat:nth-child(n+3) { border-bottom: 0; }

/* Sec stats line: força mesma altura entre células */
.sec-stats-line {
  align-items: stretch;
}

.sec-stat-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Section steps: alinhar verticalmente */
.sec-step {
  align-items: center;
  min-height: 90px;
}

/* Topbar mapa: items center alignment */
.topbar {
  align-items: center;
}

.topbar-stats {
  align-items: center;
}

.topbar-brand {
  align-items: center;
}

/* Filters bar: items center */
.filters-bar {
  align-items: center;
}

/* Two-col seção: alinha pelo topo */
.sec-two-col {
  align-items: stretch;
}

.sec-two-col-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
}

/* Compare table: alinhamento de células */
.sec-compare-table > div {
  display: flex;
  align-items: center;
}

/* Pilares: mesma altura */
.sec-pilares {
  align-items: stretch;
}

.sec-pilar {
  display: flex;
  flex-direction: column;
}

/* Gallery: aspectos consistentes */
.sec-gallery-item {
  display: flex;
  align-items: flex-end;
}


/* ============================================================
   ZERO ITALIC GLOBAL · em todos os títulos da plataforma
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.standby-quote, .standby-quote em,
.mpi-title, .mpi-title em,
.ec-title, .ec-title em,
.mc-quote-text, .mc-quote-text em,
.menu-quote-text, .menu-quote-text em,
.secao-hero-title, .secao-hero-title em,
.sec-h2, .sec-h2 em,
.sec-step-title, .sec-step-title em,
.sec-soon-title, .sec-soon-title em,
.empty-state-title, .empty-state-title em,
.drawer-title, .drawer-title em,
.sec-compare-callout-title, .sec-compare-callout-title em,
.sec-bigquote-text, .sec-bigquote-text em,
.sec-pilar-title, .sec-pilar-title em,
.sec-big-quote, .sec-big-quote em,
.idle-warning-title, .idle-warning-title em,
.cc-title, .cc-title em,
.cinema-hero-quote, .cinema-hero-quote em,
.bon-label, .bon-label em,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-style: normal !important;
}

/* Mantém só a COR dourada em palavras destacadas */
.standby-quote em,
.mpi-title em,
.ec-title em,
.mc-quote-text em,
.menu-quote-text em,
.secao-hero-title em,
.sec-h2 em,
.sec-step-title em,
.sec-soon-title em,
.empty-state-title em,
.drawer-title em,
.sec-compare-callout-title em,
.sec-bigquote-text em,
.sec-pilar-title em,
.sec-big-quote em,
.idle-warning-title em,
.cc-title em,
.cinema-hero-quote em,
.bon-label em {
  font-weight: 400;
  color: var(--gold-deep, #92711F);
}

body.dark .sec-bigquote-text em,
body.page-standby .standby-quote em,
body.page-menu-cinema .cc-title em,
body.page-menu-cinema .cinema-hero-quote em,
body.page-menu-cinema .bon-label em,
.sec-bigquote-text em {
  color: var(--gold-light, #C9A867);
}

/* Sec-p em (texto corpo) também sem italic */
.sec-p em,
.sec-lead-body em,
.drawer-desc em,
.cinema-hero-eyebrow,
.standby-loc,
.cinema-brand-text em,
.menu-card-hero-sub em,
.secao-hero-lead em,
.menu-quote-attr {
  font-style: normal !important;
}

.sec-p em, .sec-lead-body em, .drawer-desc em {
  font-weight: 500;
  color: var(--ink);
}

body.dark .sec-p em,
body.page-mapa .drawer-desc em {
  color: var(--ink);
}

/* Secao hero lead permanece sem italic */
.secao-hero-lead {
  font-style: normal !important;
}

/* Drawer subtitle sem italic */
.drawer-subtitle {
  font-style: normal !important;
}

/* Standby quote sem italic */
.standby-quote {
  font-style: normal !important;
}

/* Sec lead body italic foi removido */
.sec-lead-body {
  font-style: normal !important;
}

/* Big quote sem italic */
.sec-bigquote-text {
  font-style: normal !important;
}

/* Menu quote text sem italic */
.menu-quote-text,
.mc-quote-text {
  font-style: normal !important;
}

/* Sec compare callout */
.sec-compare-callout-title {
  font-style: normal !important;
}

/* Idle warning */
.idle-warning-title {
  font-style: normal !important;
}

/* ============================================================
   MENU CREAM v4 · GRID DEFINITIVO 6 COLUNAS × 5 ROWS
   Mesma row = mesma altura em TODAS as colunas
   ============================================================ */

body.page-menu-cream .cinema-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.6fr 1.6fr 1fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  gap: 16px;
  padding: 88px 32px 32px 32px;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  align-items: stretch;
  justify-items: stretch;
}

/* Posicionamento por data-cell */
body.page-menu-cream [data-cell="L1"]  { grid-column: 1 / span 2; grid-row: 1; }
body.page-menu-cream [data-cell="L2a"] { grid-column: 1; grid-row: 2; }
body.page-menu-cream [data-cell="L2b"] { grid-column: 2; grid-row: 2; }
body.page-menu-cream [data-cell="L3"]  { grid-column: 1 / span 2; grid-row: 3; }
body.page-menu-cream [data-cell="L4"]  { grid-column: 1 / span 2; grid-row: 4; }
body.page-menu-cream [data-cell="L5"]  { grid-column: 1 / span 2; grid-row: 5; }

body.page-menu-cream [data-cell="C1"]  { grid-column: 3 / span 2; grid-row: 1 / span 3; }
body.page-menu-cream [data-cell="C2"]  { grid-column: 3 / span 2; grid-row: 4 / span 2; }

body.page-menu-cream [data-cell="R1"]  { grid-column: 5 / span 2; grid-row: 1; }
body.page-menu-cream [data-cell="R2"]  { grid-column: 5 / span 2; grid-row: 2; }
body.page-menu-cream [data-cell="R3"]  { grid-column: 5 / span 2; grid-row: 3; }
body.page-menu-cream [data-cell="R4"]  { grid-column: 5 / span 2; grid-row: 4; }
body.page-menu-cream [data-cell="R5"]  { grid-column: 5 / span 2; grid-row: 5; }

/* Cards preenchem 100% da célula */
body.page-menu-cream .cinema-grid > * {
  height: 100%;
  width: 100%;
  min-height: 0;
  min-width: 0;
}

/* Responsive */
@media (max-width: 1680px) {
  body.page-menu-cream .cinema-grid { padding: 80px 24px 24px 24px; gap: 14px; }
}
@media (max-width: 1440px) {
  body.page-menu-cream .cinema-grid { padding: 72px 18px 18px 18px; gap: 12px; }
}
@media (max-width: 1300px) {
  body.page-menu-cream .cinema-grid { padding: 64px 14px 14px 14px; gap: 10px; }
}

@media (max-width: 900px) {
  body.page-menu-cream .cinema-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    padding: 80px 16px 32px 16px;
  }
  body.page-menu-cream [data-cell="L1"],
  body.page-menu-cream [data-cell="L3"],
  body.page-menu-cream [data-cell="L4"],
  body.page-menu-cream [data-cell="L5"],
  body.page-menu-cream [data-cell="C1"],
  body.page-menu-cream [data-cell="C2"],
  body.page-menu-cream [data-cell="R1"],
  body.page-menu-cream [data-cell="R2"],
  body.page-menu-cream [data-cell="R3"],
  body.page-menu-cream [data-cell="R4"],
  body.page-menu-cream [data-cell="R5"] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 140px;
  }
  body.page-menu-cream [data-cell="L2a"] { grid-column: 1 !important; grid-row: auto !important; min-height: 140px; }
  body.page-menu-cream [data-cell="L2b"] { grid-column: 2 !important; grid-row: auto !important; min-height: 140px; }
  body.page-menu-cream [data-cell="C1"]  { min-height: 280px; }
  body.page-menu-cream [data-cell="C2"]  { min-height: 200px; }
}


/* ============================================================
   MOTION SYSTEM · efeitos visuais
   ============================================================ */

.split-line-wrap { display: block; overflow: hidden; }
.split-line { display: inline-block; will-change: transform; }
.split-char { display: inline-block; will-change: transform, opacity; }

/* Esconde cursor nativo onde custom cursor está ativo (desktop) */
@media (min-width: 1024px) and (hover: hover) {
  body { cursor: none; }
  body * { cursor: none; }
  body input, body textarea, body select { cursor: text; }
}

#custom-cursor { will-change: transform; }

/* MARQUEE INFINITO */
.lacqua-marquee {
  width: 100%;
  overflow: hidden;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  margin-top: 96px;
}

.lacqua-marquee .lm-track {
  display: flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  animation: lacqua-marquee-roll 38s linear infinite;
}

.lacqua-marquee:hover .lm-track {
  animation-duration: 22s;
}

.lacqua-marquee .lm-item {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(24px, 3.5vw, 48px);
  letter-spacing: 0;
  color: var(--ink);
  text-transform: uppercase;
  flex-shrink: 0;
}

.lacqua-marquee .lm-dot {
  font-family: var(--f-display);
  font-size: clamp(24px, 3.5vw, 48px);
  color: var(--gold);
  flex-shrink: 0;
}

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

/* Animação CTA · "Próximo passo" arrow loop */
.sec-btn .sec-btn-arrow {
  display: inline-block;
}

.sec-btn:hover .sec-btn-arrow {
  animation: arrow-loop 1s ease-in-out infinite;
}

@keyframes arrow-loop {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}

/* Underline draw em CTA */
.sec-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 0;
  height: 1px;
  background: var(--gold-light);
  transition: width 0.4s var(--ease-out), left 0.4s var(--ease-out);
}

.sec-btn:hover::after {
  width: 70%;
  left: 15%;
}

/* Stats num glow no count-up */
.sec-stat-num {
  transition: text-shadow 0.4s;
}

/* Page curtain transition (golden stripes) */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.page-curtain.is-active {
  pointer-events: all;
}

.page-curtain-stripe {
  background: linear-gradient(180deg, #1a1410 0%, #0a0805 100%);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-out);
}

.page-curtain.is-active .page-curtain-stripe { transform: translateY(0%); }
.page-curtain.is-active .page-curtain-stripe:nth-child(1) { transition-delay: 0s; }
.page-curtain.is-active .page-curtain-stripe:nth-child(2) { transition-delay: 0.08s; }
.page-curtain.is-active .page-curtain-stripe:nth-child(3) { transition-delay: 0.16s; }
.page-curtain.is-active .page-curtain-stripe:nth-child(4) { transition-delay: 0.24s; }

/* Film grain global */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ============================================================
   SCALE FIX · Recomposição global de proporção
   Reduz "zoom feel", aumenta visão geral, controla imagens
   ============================================================ */

/* ────── HEADER editorial mais compacto ────── */
.editorial-header {
  padding: 14px 40px !important;
  min-height: 56px;
}

.eh-brand-text {
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
}

.eh-nav a { font-size: 10px !important; letter-spacing: 0.20em !important; }

@media (max-width: 1440px) {
  .editorial-header { padding: 12px 24px !important; min-height: 52px; }
}

/* ────── STANDBY · sem italic, sizes proporcionais ────── */
.standby-quote {
  font-style: normal !important;
  font-size: clamp(16px, 1.8vw, 22px) !important;
  letter-spacing: 0.06em !important;
  margin-top: 32px !important;
}

.standby-quote em { font-style: normal !important; color: var(--gold-light) !important; }

.standby-logo-wrap {
  width: clamp(180px, 18vw, 260px) !important;
}

.standby-divider {
  width: 40px !important;
  margin: 24px auto 18px auto !important;
}

.standby-loc {
  font-size: 10px !important;
  letter-spacing: 0.36em !important;
}

.standby-cta { bottom: clamp(32px, 4vh, 56px) !important; }

/* ────── SEÇÃO HERO · proporção 35/65 + altura máxima ────── */
.secao-hero {
  padding: clamp(80px, 9vh, 112px) clamp(24px, 4vw, 56px) clamp(36px, 5vh, 56px) !important;
  min-height: auto !important;
}

.secao-hero-num {
  font-size: clamp(96px, 14vw, 200px) !important;
  top: clamp(-32px, -3vh, -16px) !important;
}

.secao-hero-content {
  grid-template-columns: 1fr 1.1fr !important;
  gap: clamp(32px, 5vw, 64px) !important;
}

.secao-hero-eyebrow {
  font-size: clamp(9px, 0.7vw, 11px) !important;
  letter-spacing: 0.30em !important;
  margin-bottom: 4px !important;
}

.secao-hero-title {
  font-size: clamp(32px, 4.2vw, 60px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

.secao-hero-title em {
  font-style: normal !important;
  color: var(--gold-deep) !important;
}

.secao-hero-lead {
  font-size: clamp(13px, 1.05vw, 16px) !important;
  font-style: normal !important;
  line-height: 1.6 !important;
  max-width: 560px;
}

/* Hero image: imagem inteira, sem corte */
.secao-hero-image {
  padding: 0 clamp(24px, 4vw, 56px) !important;
  margin-top: clamp(24px, 3vh, 48px) !important;
  position: relative;
}

.secao-hero-image img {
  width: 100%;
  height: auto;
  max-height: clamp(360px, 48vh, 560px) !important;
  object-fit: contain !important;
  object-position: center;
  display: block;
  border-radius: var(--radius-s);
  transform: none !important;
  background: var(--cream, #f4ecdc);
}

/* ────── BODY · padding menor, blocks mais próximos ────── */
.secao-body {
  padding: clamp(40px, 5vh, 64px) clamp(24px, 4vw, 56px) clamp(32px, 4vh, 48px) !important;
  max-width: 1440px;
}

.sec-block { margin-bottom: clamp(40px, 5vh, 72px) !important; }

/* ────── Two-col com altura controlada ────── */
.sec-two-col {
  grid-template-columns: 0.95fr 1.1fr !important;
  gap: clamp(32px, 4vw, 56px) !important;
  align-items: center;
}

.sec-two-col-image img {
  width: 100%;
  height: auto;
  max-height: clamp(280px, 42vh, 480px) !important;
  object-fit: contain !important;
  object-position: center;
  display: block;
  border-radius: var(--radius-s);
  transform: none !important;
  background: var(--cream, #f4ecdc);
}

.sec-two-col-text {
  padding-top: 0 !important;
  gap: 12px;
}

/* ────── Title H2 e parágrafos mais contidos ────── */
.sec-h2 {
  font-size: clamp(22px, 2.6vw, 36px) !important;
  line-height: 1.1 !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

.sec-h2 em {
  font-style: normal !important;
  color: var(--gold-deep) !important;
}

.sec-eyebrow {
  font-size: clamp(9px, 0.7vw, 11px) !important;
  letter-spacing: 0.30em !important;
  margin-bottom: 10px !important;
}

.sec-p {
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.6 !important;
  margin: 0 0 12px 0 !important;
}

.sec-p em {
  font-style: normal !important;
  font-weight: 500;
  color: var(--ink);
}

/* ────── Stats line mais compactos ────── */
.sec-stat-cell {
  padding: clamp(20px, 3vh, 32px) clamp(12px, 2vw, 20px) !important;
}

.sec-stat-cell .sec-stat-num {
  font-size: clamp(28px, 3.5vw, 48px) !important;
  font-style: normal !important;
}

.sec-stat-cell .sec-stat-label {
  font-size: clamp(10px, 0.8vw, 12px) !important;
}

/* ────── Steps mais compactos ────── */
.sec-step {
  padding: clamp(18px, 2.5vh, 28px) 0 !important;
  min-height: auto !important;
}

.sec-step-title {
  font-size: clamp(16px, 1.6vw, 22px) !important;
  font-style: normal !important;
}

.sec-step-title em {
  font-style: normal !important;
  color: var(--gold-deep);
}

.sec-step-desc {
  font-size: clamp(11px, 0.9vw, 13px) !important;
  line-height: 1.5 !important;
}

.sec-step-num {
  font-size: clamp(10px, 0.85vw, 12px) !important;
}

/* ────── Pilares mais compactos ────── */
.sec-pilar {
  padding: clamp(20px, 2.5vw, 32px) !important;
}

.sec-pilar-title {
  font-size: clamp(18px, 1.8vw, 24px) !important;
  font-style: normal !important;
}

.sec-pilar-title em {
  font-style: normal !important;
  color: var(--gold-deep);
}

.sec-pilar-desc { font-size: clamp(12px, 1vw, 14px) !important; line-height: 1.55 !important; }

.sec-pilar-num { font-size: clamp(22px, 2.2vw, 30px) !important; margin-bottom: 10px !important; }

/* ────── Big quote bloco mais comportado ────── */
.sec-bigquote {
  padding: clamp(48px, 7vh, 80px) clamp(24px, 5vw, 56px) !important;
  margin: clamp(48px, 6vh, 80px) calc(-1 * clamp(24px, 4vw, 56px)) !important;
}

.sec-bigquote-text {
  font-size: clamp(20px, 2.5vw, 36px) !important;
  font-style: normal !important;
  line-height: 1.25 !important;
}

.sec-bigquote-text em {
  font-style: normal !important;
  color: var(--gold-light);
}

/* ────── CTA blocos mais elegantes ────── */
.sec-cta { padding: clamp(48px, 6vh, 72px) 0 !important; }

.sec-btn {
  padding: 14px 22px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.20em !important;
}

/* ────── Form mais compacto ────── */
.sec-form-wrap { gap: clamp(40px, 4vw, 64px) !important; }
.sec-form { gap: 18px !important; }
.sec-field input, .sec-field select, .sec-field textarea {
  padding: 10px 0 !important;
  font-size: 14px !important;
}

/* ────── Galeria editorial bento (visível em 1 dobra) ────── */
.sec-gallery {
  grid-template-columns: repeat(12, 1fr) !important;
  grid-auto-rows: clamp(120px, 18vh, 200px) !important;
  gap: 12px !important;
}

.sec-gallery-item .sgi-img { aspect-ratio: auto !important; height: 100% !important; }

.sg-1 { grid-column: span 7 !important; grid-row: span 2 !important; }
.sg-2 { grid-column: span 5 !important; grid-row: span 1 !important; }
.sg-3 { grid-column: span 5 !important; grid-row: span 1 !important; }
.sg-4 { grid-column: span 4 !important; grid-row: span 1 !important; }
.sg-5 { grid-column: span 4 !important; grid-row: span 1 !important; }
.sg-6 { grid-column: span 4 !important; grid-row: span 1 !important; }

@media (max-width: 1024px) {
  .sec-gallery { grid-template-columns: repeat(6, 1fr) !important; }
  .sg-1, .sg-2, .sg-3, .sg-4, .sg-5, .sg-6 { grid-column: span 3 !important; }
}

/* ────── Videos grid mais visível ────── */
.sec-videos {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px;
}

.sec-video-card {
  padding: 18px !important;
}

.sec-video-placeholder {
  aspect-ratio: 16/9 !important;
  max-height: clamp(160px, 26vh, 260px);
}

.sec-video-card h3 {
  font-size: 17px !important;
  font-style: normal !important;
}

/* ────── Soon card mais comportado ────── */
.sec-soon {
  padding: clamp(48px, 6vh, 72px) clamp(32px, 5vw, 64px) !important;
}

.sec-soon-title {
  font-size: clamp(24px, 2.6vw, 36px) !important;
  font-style: normal !important;
}

.sec-soon-title em {
  font-style: normal !important;
  color: var(--gold-deep);
}

.sec-soon-desc { font-size: 14px !important; }

/* ────── Compare table mais compacta ────── */
.sec-compare-table > div {
  padding: 12px 10px !important;
  font-size: 13px !important;
}

.sec-compare-callout {
  padding: 18px 22px !important;
  margin-top: 24px !important;
}

.sec-compare-callout-title {
  font-size: 18px !important;
  font-style: normal !important;
}

/* ────── Map iframe altura controlada ────── */
.sec-map-iframe { height: clamp(280px, 42vh, 420px) !important; }

/* ────── Route cards ────── */
.sec-route-card { padding: 18px 22px !important; }
.sec-route-name { font-size: 17px !important; font-style: normal !important; }
.sec-route-name em { font-style: normal !important; }

/* ────── Footer mais compacto ────── */
.secao-footer { padding: clamp(28px, 4vh, 48px) !important; margin-top: clamp(40px, 5vh, 72px) !important; }
.secao-footer-brand { font-size: 14px !important; letter-spacing: 0.18em !important; }
.secao-footer-text { font-size: 10px !important; letter-spacing: 0.22em !important; }
.secao-footer-link { font-size: 10px !important; letter-spacing: 0.20em !important; }

/* ────── Marquee mais comedido ────── */
.lacqua-marquee {
  padding: clamp(16px, 2vh, 24px) 0 !important;
  margin-top: clamp(48px, 6vh, 72px) !important;
}
.lacqua-marquee .lm-item,
.lacqua-marquee .lm-dot {
  font-size: clamp(18px, 2.4vw, 32px) !important;
}

/* ────── Drawer mais elegante / contido ────── */
.drawer-title { font-size: clamp(26px, 2.2vw, 34px) !important; font-style: normal !important; }
.drawer-title em { font-style: normal !important; color: var(--gold-deep); }
.drawer-subtitle { font-size: 14px !important; font-style: normal !important; }
.drawer-cover { height: clamp(120px, 16vh, 180px) !important; }
.drawer-body { padding: 22px 22px 110px 22px !important; }
.drawer-stat-val { font-size: clamp(18px, 1.7vw, 22px) !important; font-style: normal !important; }
.drawer-price-val { font-size: 22px !important; font-style: normal !important; }

/* ────── Topbar mapa mais compacta ────── */
.topbar { padding: 12px 24px !important; min-height: 60px; }
.topbar-brand-name { font-size: 14px !important; letter-spacing: 0.16em !important; }
.topbar-brand-sub { font-size: 9px !important; letter-spacing: 0.22em !important; }
.topbar-stat-num { font-size: 18px !important; font-style: normal !important; }
.topbar-stat-mini { font-size: 8.5px !important; letter-spacing: 0.18em !important; }
.topbar-action { padding: 8px 14px !important; font-size: 10px !important; letter-spacing: 0.18em !important; }

/* ────── Filtros mais compactos ────── */
.filters-bar { padding: 10px 24px !important; gap: 8px !important; }
.filter-group-label { font-size: 9px !important; letter-spacing: 0.22em !important; }
.chip { padding: 6px 12px !important; font-size: 11px !important; min-height: 32px !important; }
.chip-count { font-size: 9px !important; padding: 1px 7px !important; }
.filter-search { min-height: 32px !important; min-width: 200px !important; }
.filter-search input { font-size: 12px !important; padding: 6px 0 !important; }

/* ────── MENU CINEMA · scale controlada (gaps menores, padding menor) ────── */
body.page-menu-cream .cinema-grid {
  padding: clamp(60px, 7vh, 84px) clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px) !important;
  gap: clamp(10px, 1vw, 14px) !important;
}

body.page-menu-cream .cc-title {
  font-size: clamp(13px, 1.05vw, 16px) !important;
  font-style: normal !important;
}

body.page-menu-cream .cc-title em {
  font-style: normal !important;
  color: var(--gold-light);
}

body.page-menu-cream .cinema-half .cc-title { font-size: clamp(11px, 0.9vw, 13px) !important; }

body.page-menu-cream .cc-title-large {
  font-size: clamp(17px, 1.7vw, 22px) !important;
}

body.page-menu-cream .cc-sub {
  font-size: clamp(9px, 0.75vw, 10px) !important;
  letter-spacing: 0.20em !important;
}

body.page-menu-cream .cinema-half .cc-sub {
  font-size: clamp(8px, 0.65vw, 9px) !important;
}

body.page-menu-cream .cc-body {
  left: clamp(14px, 1.2vw, 22px) !important;
  right: clamp(14px, 1.2vw, 22px) !important;
  bottom: clamp(12px, 1.5vh, 20px) !important;
}

body.page-menu-cream .cinema-half .cc-body {
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;
}

body.page-menu-cream .cc-icon {
  width: clamp(20px, 1.5vw, 26px) !important;
  height: clamp(20px, 1.5vw, 26px) !important;
  top: clamp(10px, 1.2vh, 16px) !important;
  right: clamp(12px, 1.2vw, 18px) !important;
}

body.page-menu-cream .cc-icon svg {
  width: clamp(12px, 0.9vw, 16px) !important;
  height: clamp(12px, 0.9vw, 16px) !important;
}

body.page-menu-cream .cinema-hero-eyebrow {
  font-size: clamp(8px, 0.7vw, 10px) !important;
  margin-bottom: clamp(14px, 2vh, 22px) !important;
  letter-spacing: 0.32em !important;
  padding: 5px 11px !important;
}

body.page-menu-cream .cinema-hero-quote {
  font-size: clamp(18px, 2vw, 28px) !important;
  font-style: normal !important;
  line-height: 1.18 !important;
}

body.page-menu-cream .cinema-hero-quote em {
  font-style: normal !important;
  color: var(--gold-light);
}

body.page-menu-cream .cinema-hero-divider {
  margin: clamp(14px, 2vh, 22px) auto clamp(10px, 1.5vh, 14px) auto !important;
  width: 32px !important;
}

body.page-menu-cream .cinema-hero-loc {
  font-size: clamp(8px, 0.65vw, 10px) !important;
  letter-spacing: 0.36em !important;
}

body.page-menu-cream .cinema-brand-logo { height: clamp(28px, 3vh, 36px) !important; }

body.page-menu-cream .cinema-header { height: clamp(48px, 5.5vh, 60px) !important; padding: 0 clamp(20px, 2vw, 32px) !important; }

/* CC tag compacta */
body.page-menu-cream .cc-tag {
  font-size: clamp(7px, 0.6vw, 9px) !important;
  padding: 3px 8px !important;
  letter-spacing: 0.28em !important;
  margin-bottom: 6px !important;
}


/* ============================================================
   MAPA 3D INTERATIVO (MapLibre GL · Satélite + Terrain DEM)
   ============================================================ */

.lacqua-3d-map-wrap {
  position: relative;
  width: 100%;
  height: clamp(360px, 56vh, 580px);
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
}

.lacqua-3d-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lacqua-3d-map canvas { outline: none; cursor: grab; }
.lacqua-3d-map canvas:active { cursor: grabbing; }

.maplibregl-ctrl-attrib {
  background: rgba(15, 15, 14, 0.65) !important;
  color: var(--cream-a60) !important;
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 100px !important;
}

.maplibregl-ctrl-attrib a { color: var(--cream-a85) !important; }

.maplibregl-ctrl-group {
  background: var(--cream) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-s) !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}

.maplibregl-ctrl-group button {
  background: var(--cream-soft) !important;
  width: 36px !important;
  height: 36px !important;
}

.maplibregl-ctrl-group button:hover {
  background: var(--gold-a18) !important;
}

/* Controles 3D próprios */
.lacqua-3d-controls {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
}

.l3d-btn {
  padding: 10px 16px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  min-height: 36px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.l3d-btn:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.l3d-btn.is-active {
  background: var(--gold);
  color: var(--cream-soft);
  border-color: var(--gold);
}

/* Coords overlay */
.lacqua-3d-coords {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: rgba(15, 15, 14, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 146, 74, 0.30);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  z-index: 10;
}

.lacqua-3d-coords span:first-child { color: var(--gold-light); font-weight: 500; }
.lacqua-3d-coords span:last-child { color: var(--cream-a85); font-size: 9px; letter-spacing: 0.16em; }

/* Marker L'Acqua Marina · dourado */
.lacqua-marker {
  position: relative;
  width: 0;
  height: 0;
  cursor: pointer;
}

.lacqua-marker .lm-dot {
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 16px;
  height: 16px;
  background: var(--gold);
  border: 2px solid var(--cream);
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.lacqua-marker .lm-pulse {
  position: absolute;
  bottom: -2px;
  left: -10px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--gold-light);
  border-radius: 50%;
  z-index: 1;
  animation: marker-pulse 2s ease-out infinite;
}

@keyframes marker-pulse {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.2); opacity: 0; }
}

.lacqua-marker .lm-label {
  position: absolute;
  bottom: 22px;
  left: -64px;
  width: 128px;
  text-align: center;
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.30em;
  color: var(--cream);
  background: rgba(15, 15, 14, 0.85);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border: 1px solid var(--gold);
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 768px) {
  .lacqua-3d-controls { top: 10px; left: 10px; gap: 4px; }
  .l3d-btn { padding: 8px 12px; font-size: 9px; min-height: 32px; }
  .lacqua-3d-coords { bottom: 10px; left: 10px; padding: 8px 12px; font-size: 9px; }
}

/* Fullscreen */
.lacqua-3d-map-wrap:fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  border: 0;
}


/* ============================================================
   MAPA 3D · forçar interação (sobrepor cursor-none global)
   ============================================================ */

/* Esconde custom cursor sobre o mapa, ativa cursor nativo */
body .lacqua-3d-map-wrap,
body .lacqua-3d-map-wrap *,
body .maplibregl-map,
body .maplibregl-map *,
body .maplibregl-canvas {
  cursor: grab !important;
}

body .lacqua-3d-map-wrap canvas:active,
body .maplibregl-canvas:active {
  cursor: grabbing !important;
}

body .lacqua-3d-controls .l3d-btn,
body .lacqua-3d-controls .l3d-btn * {
  cursor: pointer !important;
}

body .maplibregl-ctrl-group button {
  cursor: pointer !important;
}

/* Garante pointer-events em todos os filhos do mapa */
.lacqua-3d-map-wrap,
.lacqua-3d-map,
.maplibregl-map,
.maplibregl-canvas-container,
.maplibregl-canvas,
.maplibregl-ctrl,
.maplibregl-ctrl-group,
.maplibregl-ctrl-group button,
.lacqua-3d-controls,
.l3d-btn {
  pointer-events: auto !important;
  touch-action: none !important;
}

/* Não permite que body.no-scroll afete o mapa */
.lacqua-3d-map canvas {
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Z-index acima do film-grain e outras camadas */
.lacqua-3d-map-wrap {
  position: relative;
  z-index: 5;
  isolation: isolate;
}

.maplibregl-canvas-container {
  z-index: 1;
}

.maplibregl-ctrl-top-right {
  z-index: 10;
}


/* ============================================================
   HEADER · seta back inline + brand (sem botão flutuante)
   ============================================================ */

.eh-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  transition: opacity 0.3s, color 0.3s;
}

.eh-brand-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--ink-a55);
  transition: all 0.3s var(--ease-out);
}

.eh-brand-back svg {
  width: 18px;
  height: 18px;
}

.eh-brand:hover .eh-brand-back {
  color: var(--gold-deep);
  transform: translateX(-3px);
}

.eh-brand:hover .eh-brand-text {
  color: var(--gold-deep);
}

/* Remove botão flutuante antigo (caso ainda haja CSS aplicando) */
.secao-back { display: none !important; }


/* ============================================================
   RESPIRO entre header e conteúdo da seção
   ============================================================ */

.secao-hero {
  padding: clamp(128px, 14vh, 180px) clamp(24px, 4vw, 56px) clamp(48px, 6vh, 72px) !important;
}

.secao-hero-num {
  top: clamp(-8px, 2vh, 16px) !important;
}

.secao-hero-eyebrow {
  margin-bottom: 14px !important;
}

@media (max-width: 1024px) {
  .secao-hero { padding: clamp(112px, 13vh, 144px) 24px 48px !important; }
}

@media (max-width: 640px) {
  .secao-hero { padding: clamp(96px, 12vh, 120px) 16px 40px !important; }
}


/* ============================================================
   SISTEMA DE FRAMES DE IMAGEM · L'Acqua Marina
   Todas as imagens aparecem INTEIRAS, sem corte.
   ============================================================ */

:root {
  --cream: #f4ecdc;
  --cream-soft: #faf5e8;
}

/* HERO INTERNO de seção — limite 48vh/560px */
.media-frame--hero-contained,
.section-image-contained,
.hero-image-contained {
  position: relative;
  width: 100%;
  max-width: 1480px;
  margin: clamp(24px, 4vh, 56px) auto;
  background: var(--cream);
  border-radius: 8px;
  overflow: hidden;
  max-height: clamp(360px, 48vh, 560px);
}

.media-frame--hero-contained img,
.section-image-contained img,
.hero-image-contained img {
  width: 100%;
  height: auto;
  max-height: clamp(360px, 48vh, 560px);
  object-fit: contain;
  object-position: center;
  display: block;
  transform: none !important;
}

/* IMAGEM DE SEÇÃO — limite 42vh/480px */
.media-frame--contain,
.section-media-contained {
  position: relative;
  width: 100%;
  background: var(--cream);
  border-radius: 8px;
  overflow: hidden;
  max-height: clamp(280px, 42vh, 480px);
}

.media-frame--contain img,
.section-media-contained img {
  width: 100%;
  height: auto;
  max-height: clamp(280px, 42vh, 480px);
  object-fit: contain;
  object-position: center;
  display: block;
  transform: none !important;
}

/* SOFT-FILL: blur da própria imagem como fundo, sem espaço vazio feio */
.media-frame--soft-fill {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border-radius: 8px;
}

.media-frame--soft-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.05);
  transform: scale(1.1);
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}

.media-frame--soft-fill img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: clamp(360px, 48vh, 560px);
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}

/* CARD EDITORIAL — corte intencional (thumbnails, galeria) */
.media-frame--cover {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #1a1a1a;
  aspect-ratio: 4 / 5;
}

.media-frame--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* RESPONSIVO */
@media (max-width: 1024px) {
  .media-frame--hero-contained,
  .section-image-contained,
  .hero-image-contained,
  .media-frame--soft-fill {
    max-height: clamp(280px, 50vh, 460px);
    margin: clamp(20px, 3vh, 40px) auto;
  }
  .secao-hero-image img {
    max-height: clamp(280px, 50vh, 460px) !important;
  }
}

@media (max-width: 640px) {
  .media-frame--hero-contained,
  .section-image-contained,
  .hero-image-contained,
  .media-frame--soft-fill,
  .media-frame--contain {
    max-height: clamp(220px, 44vh, 380px);
  }
  .secao-hero-image img {
    max-height: clamp(220px, 44vh, 380px) !important;
  }
  .sec-two-col-image img {
    max-height: clamp(200px, 38vh, 340px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-frame--soft-fill::before { transform: none; }
}


/* ============================================================
   CARTOGRAFIA DO REFÚGIO · Menu como mapa ilustrado vivo
   Substitui completamente o grid Aurora-like anterior
   ============================================================ */

body.page-cartografia {
  background: #F5F1E8;
  color: var(--ink);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

/* Esconde elementos do menu antigo se renderizarem */
body.page-cartografia .cinema-grid,
body.page-cartografia .cinema-card,
body.page-cartografia .cinema-hero,
body.page-cartografia .cream-depth-bg,
body.page-cartografia .cream-vignette,
body.page-cartografia .cream-radial-light,
body.page-cartografia .cinema-noise,
body.page-cartografia .cinema-header {
  display: none !important;
}

/* ────── HEADER editorial mínimo ────── */
.cart-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(245, 241, 232, 0.85) 0%, rgba(245, 241, 232, 0) 100%);
}

.cart-header > * { pointer-events: auto; }

.cart-burger {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex: 0 0 40px;
}

.cart-burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: all 0.3s;
}

.cart-burger:hover span { background: var(--gold-deep); }

.cart-brand {
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: opacity 0.3s;
}

.cart-brand:hover { opacity: 0.65; }

.cart-brand-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink);
}

.cart-brand-sub {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.cart-help {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-a55);
  max-width: 280px;
  text-align: right;
  line-height: 1.3;
}

/* ────── CARTOGRAFIA · container do mapa ────── */
.cartografia {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.cart-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Vapor termal sutil */
.cart-deco { position: absolute; pointer-events: none; z-index: 2; }

.cart-vapor {
  width: 90px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(255, 245, 220, 0.32) 0%, transparent 65%);
  filter: blur(18px);
  opacity: 0;
  animation: vapor-drift 9s ease-in-out infinite;
}

.cart-vapor-1 { left: 32%; top: 38%; animation-delay: 0s; }
.cart-vapor-2 { left: 52%; top: 48%; animation-delay: 3s; }
.cart-vapor-3 { left: 64%; top: 42%; animation-delay: 6s; }

@keyframes vapor-drift {
  0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
  40%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-80px) scale(1.4); }
}

/* Animação SVG do lago */
.cart-lake-wave-1 { animation: lake-shimmer 5s ease-in-out infinite; }
.cart-lake-wave-2 { animation: lake-shimmer 5s ease-in-out infinite 1.5s; }
.cart-lake-wave-3 { animation: lake-shimmer 5s ease-in-out infinite 3s; }

@keyframes lake-shimmer {
  0%, 100% { opacity: 0.45; transform: translateX(0); }
  50%      { opacity: 0.85; transform: translateX(4px); }
}

/* Trees breath */
.cart-trees circle { animation: tree-breath 7s ease-in-out infinite; }
.cart-trees circle:nth-child(2n) { animation-delay: 1.5s; }
.cart-trees circle:nth-child(3n) { animation-delay: 3s; }

@keyframes tree-breath {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.55; }
}

/* ────── PINS ────── */
.cart-pins {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.cart-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-pin:hover,
.cart-pin:focus-visible,
.cart-pin.is-active {
  z-index: 20;
}

.cart-pin.is-zooming {
  z-index: 100;
  animation: pin-zoom 0.5s var(--ease-out) forwards;
}

@keyframes pin-zoom {
  to { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* Pulse externo */
.pin-pulse {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: pin-pulse 2.6s ease-out infinite;
}

@keyframes pin-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

.cart-pin.is-priority-high .pin-pulse {
  border-color: var(--gold);
  animation-duration: 1.8s;
}

.cart-pin.is-priority-low .pin-pulse {
  border-color: var(--teal);
  animation-duration: 3.4s;
  opacity: 0.6;
}

/* Pin dot · cabeça do marcador */
.pin-dot {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-soft);
  border: 1.5px solid var(--gold);
  color: var(--gold-deep);
  box-shadow:
    0 4px 12px rgba(80, 65, 36, 0.25),
    inset 0 0 0 2px var(--cream-soft);
  transition: all 0.35s var(--ease-out);
}

.pin-dot svg { width: 14px; height: 14px; }

.cart-pin.is-priority-high .pin-dot {
  background: var(--gold);
  color: var(--cream-soft);
  width: 36px;
  height: 36px;
  border-width: 2px;
  box-shadow:
    0 6px 18px rgba(184, 146, 74, 0.40),
    inset 0 0 0 2px var(--gold);
}

.cart-pin.is-priority-high .pin-dot svg { width: 16px; height: 16px; }

/* Cores por categoria */
.cart-pin.cart-pin-descobrir .pin-dot { border-color: var(--teal); color: var(--teal); }
.cart-pin.cart-pin-descobrir .pin-pulse { border-color: var(--teal); }

.cart-pin.cart-pin-viver .pin-dot { border-color: var(--aqua); color: var(--teal); }
.cart-pin.cart-pin-viver .pin-pulse { border-color: var(--aqua); }

.cart-pin.cart-pin-escolher.is-priority-high .pin-dot { background: var(--gold); color: var(--cream-soft); }
.cart-pin.cart-pin-escolher .pin-dot { border-color: var(--gold); color: var(--gold-deep); }

.cart-pin.cart-pin-avancar.is-priority-high .pin-dot { background: var(--ink); color: var(--gold-light); border-color: var(--ink); }
.cart-pin.cart-pin-avancar .pin-dot { border-color: var(--ink); color: var(--ink); }

/* Stem (sombra projetada que desce) */
.pin-stem {
  position: absolute;
  left: 50%;
  top: calc(50% + 10px);
  width: 2px;
  height: 14px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  transform: translateX(-50%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

/* Hover/active state */
.cart-pin:hover .pin-dot,
.cart-pin.is-active .pin-dot,
.cart-pin:focus-visible .pin-dot {
  transform: scale(1.18);
  box-shadow:
    0 8px 24px rgba(80, 65, 36, 0.35),
    0 0 0 6px rgba(184, 146, 74, 0.12),
    inset 0 0 0 2px var(--cream-soft);
}

.cart-pin.is-priority-high:hover .pin-dot { transform: scale(1.12); }

/* Label · etiqueta de mapa */
.pin-label {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: rgba(245, 241, 232, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(80, 65, 36, 0.12);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s var(--ease-out);
  z-index: 5;
}

.cart-pin[data-label-side="right"] .pin-label {
  left: calc(100% + 14px);
  transform: translateY(-50%) translateX(-8px);
}

.cart-pin[data-label-side="left"] .pin-label {
  right: calc(100% + 14px);
  transform: translateY(-50%) translateX(8px);
  text-align: right;
  align-items: flex-end;
}

.cart-pin:hover .pin-label,
.cart-pin:focus-visible .pin-label,
.cart-pin.is-active .pin-label {
  opacity: 1;
  pointer-events: auto;
}

.cart-pin[data-label-side="right"]:hover .pin-label,
.cart-pin[data-label-side="right"]:focus-visible .pin-label,
.cart-pin[data-label-side="right"].is-active .pin-label {
  transform: translateY(-50%) translateX(0);
}

.cart-pin[data-label-side="left"]:hover .pin-label,
.cart-pin[data-label-side="left"]:focus-visible .pin-label,
.cart-pin[data-label-side="left"].is-active .pin-label {
  transform: translateY(-50%) translateX(0);
}

.pin-cat {
  font-family: var(--f-body);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.pin-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}

.pin-sub {
  font-family: var(--f-body);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-a55);
  margin-top: 3px;
}

/* Cartão postal com foto preview */
.pin-postcard {
  position: absolute;
  top: calc(50% + 80px);
  width: 180px;
  display: flex;
  flex-direction: column;
  background: var(--cream-soft);
  border: 6px solid var(--cream-soft);
  box-shadow:
    0 18px 40px rgba(80, 65, 36, 0.30),
    0 4px 10px rgba(80, 65, 36, 0.15);
  transform-origin: top center;
  transition: all 0.5s var(--ease-out);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.cart-pin[data-label-side="right"] .pin-postcard {
  left: calc(100% + 14px);
  transform: rotate(-3deg) scale(0.85);
  transform-origin: top left;
}

.cart-pin[data-label-side="left"] .pin-postcard {
  right: calc(100% + 14px);
  transform: rotate(3deg) scale(0.85);
  transform-origin: top right;
}

.cart-pin:hover .pin-postcard,
.cart-pin:focus-visible .pin-postcard,
.cart-pin.is-active .pin-postcard {
  opacity: 1;
}

.cart-pin[data-label-side="right"]:hover .pin-postcard,
.cart-pin[data-label-side="right"]:focus-visible .pin-postcard,
.cart-pin[data-label-side="right"].is-active .pin-postcard {
  transform: rotate(-2deg) scale(1);
}

.cart-pin[data-label-side="left"]:hover .pin-postcard,
.cart-pin[data-label-side="left"]:focus-visible .pin-postcard,
.cart-pin[data-label-side="left"].is-active .pin-postcard {
  transform: rotate(2deg) scale(1);
}

.pin-postcard-img {
  display: block;
  width: 100%;
  height: 110px;
  background-size: cover;
  background-position: center;
  filter: saturate(0.95);
}

.pin-postcard-label {
  font-family: var(--f-body);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-a55);
  padding: 8px 6px 4px 6px;
  text-align: center;
  border-top: 1px solid var(--line-soft);
}

/* ────── LEGENDA bottom ────── */
.cart-legend {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 22px;
  background: rgba(245, 241, 232, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 100px;
}

.cart-legend-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
}

.cart-legend-dot[data-cat="descobrir"] { border-color: var(--teal); }
.cart-legend-dot[data-cat="viver"]     { border-color: var(--aqua); }
.cart-legend-dot[data-cat="escolher"]  { background: var(--gold); border-color: var(--gold); }
.cart-legend-dot[data-cat="avancar"]   { background: var(--ink); border-color: var(--ink); }

.cart-legend-tag {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-a70);
}

/* ────── RESPONSIVE ────── */
@media (max-width: 1440px) {
  .pin-dot { width: 26px; height: 26px; }
  .cart-pin.is-priority-high .pin-dot { width: 32px; height: 32px; }
  .pin-dot svg { width: 12px; height: 12px; }
  .cart-pin.is-priority-high .pin-dot svg { width: 14px; height: 14px; }
  .pin-title { font-size: 13px; }
  .pin-sub { font-size: 9.5px; }
  .pin-postcard { width: 160px; }
  .pin-postcard-img { height: 95px; }
  .cart-help { font-size: 12px; max-width: 240px; }
}

@media (max-width: 1280px) {
  .cart-header { padding: 14px 20px; }
  .cart-brand-text { font-size: 14px; }
  .cart-help { font-size: 11px; max-width: 200px; }
  .pin-dot { width: 24px; height: 24px; }
  .cart-pin.is-priority-high .pin-dot { width: 30px; height: 30px; }
  .pin-title { font-size: 12px; }
  .pin-sub { font-size: 9px; }
  .pin-postcard { width: 140px; }
  .pin-postcard-img { height: 82px; }
  .cart-legend { gap: 16px; padding: 10px 18px; }
  .cart-legend-tag { font-size: 9px; }
}

/* Mobile · fallback lista */
@media (max-width: 900px) {
  .cart-header { padding: 16px; flex-wrap: wrap; }
  .cart-help { font-size: 11px; max-width: 100%; text-align: center; order: 3; flex-basis: 100%; margin-top: 8px; }

  .cart-map { opacity: 0.45; }

  .cart-pins {
    position: relative;
    inset: auto;
    padding: 100px 16px 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    overflow-y: auto;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.92) 0%, rgba(245, 241, 232, 0.98) 100%);
    backdrop-filter: blur(6px);
  }

  .cart-pin {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 80px;
    padding: 14px 18px;
    background: var(--cream-soft);
    border: 1px solid var(--line);
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
  }

  .cart-pin .pin-stem,
  .cart-pin .pin-pulse,
  .cart-pin .pin-postcard { display: none; }

  .cart-pin .pin-dot { width: 32px; height: 32px; flex-shrink: 0; }
  .cart-pin .pin-dot svg { width: 14px; height: 14px; }
  .cart-pin.is-priority-high { grid-column: span 2; background: var(--gold-a08); border-color: var(--gold); }

  .cart-pin .pin-label {
    position: relative;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    white-space: normal;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .pin-title { font-size: 12px; }
  .pin-sub { font-size: 10px; }

  .cart-legend { bottom: 12px; padding: 8px 14px; gap: 10px; }
  .cart-legend-tag { font-size: 8px; letter-spacing: 0.20em; }
}

/* ────── Burger overlay no menu cartografia (estilo cream herda) ────── */
body.page-cartografia .burger-overlay-nav .bon-label {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}


/* ============================================================
   VILA A-FRAME ISOMÉTRICA · Menu como cenário 3D
   Substitui Cartografia completamente
   ============================================================ */

body.page-aframe-village {
  background: #0A0604;
  color: var(--cream);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

/* Desliga overlays do menu anterior */
body.page-aframe-village .cinema-grid,
body.page-aframe-village .cart-header,
body.page-aframe-village .cart-map,
body.page-aframe-village .cart-pins,
body.page-aframe-village .cart-legend,
body.page-aframe-village .cream-depth-bg,
body.page-aframe-village .cream-vignette,
body.page-aframe-village .cream-radial-light,
body.page-aframe-village .cinema-noise {
  display: none !important;
}

/* ────── CENÁRIO ────── */
.village-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.village-sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      #0A1320 0%,
      #1A1A2E 25%,
      #3A2540 45%,
      #6B3A35 65%,
      #B8632D 80%,
      #D89048 92%,
      #1A0F08 100%);
}

.village-sunset-glow {
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: 1400px;
  height: 50vh;
  background:
    radial-gradient(ellipse 60% 60% at 50% 90%, rgba(255, 180, 90, 0.45) 0%, rgba(216, 144, 72, 0.25) 35%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.village-stars {
  position: absolute;
  inset: 0;
}

.village-stars span {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  background: #FFE6B8;
  border-radius: 50%;
  box-shadow: 0 0 4px #FFD89B;
  animation: star-twinkle 3s ease-in-out infinite;
}

.village-stars span:nth-child(1)  { top: 8%;  left: 12%; animation-delay: 0.0s; }
.village-stars span:nth-child(2)  { top: 14%; left: 28%; animation-delay: 0.4s; }
.village-stars span:nth-child(3)  { top: 6%;  left: 45%; animation-delay: 1.2s; }
.village-stars span:nth-child(4)  { top: 18%; left: 62%; animation-delay: 0.8s; }
.village-stars span:nth-child(5)  { top: 10%; left: 78%; animation-delay: 1.6s; }
.village-stars span:nth-child(6)  { top: 22%; left: 88%; animation-delay: 2.0s; }
.village-stars span:nth-child(7)  { top: 5%;  left: 35%; animation-delay: 1.0s; }
.village-stars span:nth-child(8)  { top: 16%; left: 52%; animation-delay: 0.6s; }
.village-stars span:nth-child(9)  { top: 9%;  left: 70%; animation-delay: 2.4s; }
.village-stars span:nth-child(10) { top: 13%; left: 5%;  animation-delay: 1.8s; }
.village-stars span:nth-child(11) { top: 20%; left: 95%; animation-delay: 0.2s; }
.village-stars span:nth-child(12) { top: 4%;  left: 18%; animation-delay: 2.8s; }
.village-stars span:nth-child(13) { top: 11%; left: 92%; animation-delay: 1.4s; }
.village-stars span:nth-child(14) { top: 7%;  left: 58%; animation-delay: 0.5s; }
.village-stars span:nth-child(15) { top: 19%; left: 40%; animation-delay: 2.2s; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* Silhueta de montanhas */
.village-mountains {
  position: absolute;
  bottom: 32%;
  left: 0;
  right: 0;
  height: 18vh;
  background:
    linear-gradient(180deg, transparent 0%, rgba(20, 12, 8, 0.85) 100%);
  clip-path: polygon(
    0% 100%,
    0% 60%,
    8% 40%,
    14% 55%,
    22% 25%,
    32% 50%,
    42% 30%,
    50% 45%,
    58% 20%,
    68% 48%,
    76% 35%,
    84% 55%,
    92% 30%,
    100% 50%,
    100% 100%
  );
}

/* Lago */
.village-lake {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32vh;
  background:
    linear-gradient(180deg,
      rgba(40, 60, 80, 0.85) 0%,
      rgba(20, 30, 45, 0.95) 50%,
      #0A1018 100%);
  overflow: hidden;
}

.village-lake::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 30% at 50% 0%, rgba(255, 180, 90, 0.18) 0%, transparent 60%);
}

.lake-shimmer-1,
.lake-shimmer-2,
.lake-shimmer-3 {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 200, 130, 0.55) 50%, transparent 100%);
  filter: blur(0.6px);
  animation: lake-wave 5s ease-in-out infinite;
}

.lake-shimmer-1 { top: 18%; animation-delay: 0s; }
.lake-shimmer-2 { top: 40%; animation-delay: 1.6s; }
.lake-shimmer-3 { top: 62%; animation-delay: 3.2s; }

@keyframes lake-wave {
  0%, 100% { opacity: 0; transform: scaleX(0.95); }
  50%      { opacity: 0.75; transform: scaleX(1); }
}

/* Terreno isométrico (faixa onde os chalés ficam) */
.village-terrain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26vh;
  height: 16vh;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(20, 14, 10, 0.40) 25%,
      rgba(20, 14, 10, 0.75) 100%);
}

.village-terrain::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Trilhas finas douradas */
    radial-gradient(ellipse 80% 8% at 50% 90%, rgba(184, 146, 74, 0.22) 0%, transparent 60%);
}

/* Deck SVG centro */
.village-deck-svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18vh;
  width: 100%;
  height: 4vh;
  z-index: 2;
}

/* ────── HEADER mínimo ────── */
.village-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 6, 4, 0.55) 0%, rgba(10, 6, 4, 0) 100%);
}

.village-header > * { pointer-events: auto; }

.village-burger {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.village-burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--cream);
  transition: all 0.3s;
}

.village-burger:hover span { background: var(--gold-light); }

.village-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
}

.village-brand-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}

.village-brand-sub {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.village-help {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: normal;
  font-size: 13px;
  color: rgba(245, 241, 232, 0.65);
  max-width: 280px;
  text-align: right;
}

/* ────── CHALÉS ────── */
.village-cabins {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.cabin {
  position: absolute;
  transform: translate(-50%, 100%);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1;
  transition: transform 0.45s var(--ease-out), z-index 0.1s;
  perspective: 800px;
  perspective-origin: center bottom;
}

.cabin.cabin-row-1 { z-index: 1; transform: translate(-50%, 100%) scale(0.78); }
.cabin.cabin-row-2 { z-index: 5; transform: translate(-50%, 100%) scale(0.92); }
.cabin.cabin-row-3 { z-index: 10; transform: translate(-50%, 100%) scale(1.10); }

.cabin.cabin-row-3.is-priority-high { z-index: 12; transform: translate(-50%, 100%) scale(1.18); }

.cabin-3d {
  position: relative;
  width: clamp(70px, 8vw, 120px);
  height: clamp(85px, 9.5vw, 145px);
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease-out);
}

.cabin-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.65));
  transition: filter 0.45s var(--ease-out);
}

/* Aura amber atrás do chalé */
.cabin-aura {
  position: absolute;
  inset: -8% -8% 0 -8%;
  background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(255, 180, 90, 0.35) 0%, transparent 70%);
  filter: blur(14px);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out);
  z-index: -1;
}

.cabin.is-priority-high .cabin-aura {
  background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(255, 200, 110, 0.55) 0%, transparent 70%);
  opacity: 0.75;
}

/* Janela amber pulsa */
.cabin-window,
.cabin-window-glow {
  animation: window-pulse 4s ease-in-out infinite;
  transform-origin: center;
}

.cabin.is-priority-high .cabin-window,
.cabin.is-priority-high .cabin-window-glow {
  animation-duration: 2.6s;
}

@keyframes window-pulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; filter: brightness(1.18); }
}

.cabin.is-priority-high .cabin-window-glow { opacity: 0.7 !important; }

/* Ícone minimal sobre a placa */
.cabin-icon {
  position: absolute;
  bottom: clamp(28px, 3vw, 42px);
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 8px rgba(255, 180, 90, 0.55));
  opacity: 0.85;
}

.cabin-icon svg { width: 12px; height: 12px; }

/* Placa de madeira/cream embaixo */
.cabin-plate {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: linear-gradient(180deg, #F5F1E8 0%, #E8DFC9 100%);
  border: 1px solid rgba(122, 100, 56, 0.35);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  pointer-events: none;
}

.plate-num {
  font-family: var(--f-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
}

.plate-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.cabin.is-priority-high .cabin-plate {
  background: linear-gradient(180deg, #F5DDA0 0%, #E5C078 100%);
  border-color: var(--gold);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--gold),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.cabin.is-priority-high .plate-title {
  font-weight: 500;
  font-size: 12px;
}

/* Tooltip subtítulo (aparece no hover) */
.cabin-tooltip {
  position: absolute;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  white-space: nowrap;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s var(--ease-out) 0.1s;
}

/* ────── HOVER / FOCUS / ACTIVE ────── */
.cabin:hover,
.cabin:focus-visible {
  z-index: 50 !important;
}

.cabin:hover .cabin-3d,
.cabin:focus-visible .cabin-3d {
  transform: translateY(-12px) rotateX(-2deg);
}

.cabin:hover .cabin-svg,
.cabin:focus-visible .cabin-svg {
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 18px rgba(255, 180, 90, 0.35));
}

.cabin:hover .cabin-aura,
.cabin:focus-visible .cabin-aura {
  opacity: 1;
}

.cabin:hover .cabin-window,
.cabin:focus-visible .cabin-window,
.cabin:hover .cabin-window-glow,
.cabin:focus-visible .cabin-window-glow {
  filter: brightness(1.4) saturate(1.1);
}

.cabin:hover .cabin-plate,
.cabin:focus-visible .cabin-plate {
  transform: translateX(-50%) translateY(-4px);
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 217, 155, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.cabin:hover .cabin-tooltip,
.cabin:focus-visible .cabin-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Focus seletivo: chalés vizinhos reduzem opacidade */
.village-cabins:has(.cabin:hover) .cabin:not(:hover) { opacity: 0.45; transform: translate(-50%, 100%) scale(var(--row-scale, 0.92)) !important; }
.village-cabins:has(.cabin:hover) .cabin.cabin-row-1:not(:hover) { --row-scale: 0.74; }
.village-cabins:has(.cabin:hover) .cabin.cabin-row-2:not(:hover) { --row-scale: 0.86; }
.village-cabins:has(.cabin:hover) .cabin.cabin-row-3:not(:hover) { --row-scale: 1.02; }
.village-cabins:has(.cabin:hover) .cabin.cabin-row-3.is-priority-high:not(:hover) { --row-scale: 1.08; }

/* Click → entering animation */
.cabin.is-entering .cabin-3d {
  animation: cabin-enter 0.7s var(--ease-out) forwards;
}

.cabin.is-entering .cabin-window,
.cabin.is-entering .cabin-window-glow {
  animation: window-flash 0.7s var(--ease-out) forwards;
}

@keyframes cabin-enter {
  0%   { transform: translateY(-12px) rotateX(-2deg); }
  50%  { transform: translateY(-30px) scale(1.4); }
  100% { transform: translateY(-50px) scale(3); opacity: 0; }
}

@keyframes window-flash {
  0%   { filter: brightness(1.4); opacity: 1; }
  60%  { filter: brightness(3) saturate(1.5); opacity: 1; }
  100% { filter: brightness(8); opacity: 0; }
}

/* Flash overlay quando entra no chalé */
.village-flash {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--flash-x, 50%) var(--flash-y, 50%),
      rgba(255, 220, 150, 0.95) 0%,
      rgba(255, 180, 90, 0.65) 18%,
      rgba(184, 100, 40, 0.30) 40%,
      transparent 70%);
  transition: opacity 0.4s var(--ease-out);
}

.village-flash.is-active { opacity: 1; }

/* ────── LEGENDA zonas bottom ────── */
.village-zones {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: rgba(10, 6, 4, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 146, 74, 0.25);
  border-radius: 100px;
  pointer-events: none;
}

.village-zone {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.75);
}

.village-zone-priority {
  color: var(--gold-light);
  font-weight: 600;
}

.village-zone-sep {
  color: rgba(184, 146, 74, 0.4);
}

/* ────── BURGER OVERLAY dark ────── */
body.page-aframe-village .burger-overlay {
  background: linear-gradient(135deg, #1A1410 0%, #0A0604 100%);
  color: var(--cream);
}

body.page-aframe-village .burger-overlay-brand { color: var(--cream); }

body.page-aframe-village .burger-overlay-close {
  background: transparent;
  border-color: rgba(245, 241, 232, 0.2);
  color: var(--cream);
}

body.page-aframe-village .burger-overlay-close:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

body.page-aframe-village .burger-overlay-header,
body.page-aframe-village .burger-overlay-footer {
  border-color: rgba(245, 241, 232, 0.10);
}

body.page-aframe-village .burger-overlay-nav a {
  border-bottom-color: rgba(245, 241, 232, 0.08);
}

body.page-aframe-village .burger-overlay-nav .bon-num { color: rgba(245, 241, 232, 0.35); }
body.page-aframe-village .burger-overlay-nav .bon-label {
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body.page-aframe-village .burger-overlay-nav a:hover .bon-label { color: var(--gold-light); }
body.page-aframe-village .burger-overlay-nav .bon-arrow { color: rgba(245, 241, 232, 0.4); }
body.page-aframe-village .burger-overlay-nav a:hover .bon-arrow { color: var(--gold-light); }

/* ────── RESPONSIVE ────── */
@media (max-width: 1440px) {
  .cabin-3d { width: clamp(64px, 7.5vw, 100px); height: clamp(78px, 9vw, 120px); }
  .plate-title { font-size: 10px; letter-spacing: 0.06em; }
  .plate-num { font-size: 7px; }
  .village-help { font-size: 11px; max-width: 220px; }
}

@media (max-width: 1280px) {
  .cabin-3d { width: clamp(58px, 7vw, 88px); height: clamp(70px, 8.5vw, 108px); }
  .plate-title { font-size: 9px; }
  .cabin-tooltip { font-size: 9px; bottom: -38px; }
  .village-header { padding: 14px 20px; }
  .village-brand-text { font-size: 14px; }
  .village-zones { gap: 8px; padding: 6px 14px; }
  .village-zone { font-size: 8px; letter-spacing: 0.22em; }
}

@media (max-width: 900px) {
  body.page-aframe-village { overflow-y: auto; }
  .village-help { display: none; }
  .village-cabins {
    position: relative;
    inset: auto;
    padding: 120px 16px 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 12px;
    height: auto;
    min-height: 100vh;
  }
  .cabin {
    position: relative;
    left: auto !important;
    bottom: auto !important;
    transform: translate(0, 0) !important;
  }
  .cabin.is-priority-high { grid-column: span 2; }
  .cabin-3d { width: 100%; height: 110px; max-width: 200px; margin: 0 auto; }
  .cabin-tooltip { position: relative; bottom: auto; left: auto; transform: none; opacity: 1; margin-top: 30px; color: rgba(245, 241, 232, 0.65); }
  .village-cabins:has(.cabin:hover) .cabin:not(:hover) { opacity: 1; transform: none !important; }
  .village-zones { bottom: 8px; }
  .village-deck-svg { display: none; }
}


/* ============================================================
   PLACA DE MADEIRA · cards "deck de lago"
   Aplica em navegação secundária, atalhos, route, video, soon
   ============================================================ */

/* ────── Grid 3 cols ────── */
.cards-grid--wood,
body.page-secao .sec-pilares,
body.page-secao .sec-routes,
body.page-secao .sec-videos {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body.page-secao .sec-steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  border-top: 0 !important;
}

/* ────── WOOD CARD base ────── */
.wood-card,
body.page-secao .sec-pilar,
body.page-secao .sec-step,
body.page-secao .sec-route-card,
body.page-secao .sec-video-card,
body.page-secao .sec-soon .sec-cs-card {
  position: relative;
  /* Madeira escura · 3 camadas: gradient base + linhas de tábua + noise */
  background:
    /* tábuas verticais finas */
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 38px,
      rgba(0, 0, 0, 0.18) 39px,
      rgba(0, 0, 0, 0.08) 40px),
    /* veio horizontal sutil */
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 2px,
      rgba(58, 38, 22, 0.18) 2.5px,
      transparent 3.5px),
    /* gradient base madeira */
    linear-gradient(135deg, #2A1A10 0%, #3A2718 45%, #2D1B0E 100%);

  border: 1px solid rgba(184, 146, 74, 0.18);
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  text-decoration: none;
  color: var(--cream);

  box-shadow:
    inset 0 1px 0 rgba(255, 230, 184, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.20),
    0 14px 28px rgba(0, 0, 0, 0.45),
    0 4px 8px rgba(0, 0, 0, 0.30);

  padding: clamp(22px, 2.5vw, 36px) clamp(18px, 2vw, 28px) !important;
  min-height: clamp(180px, 22vh, 240px) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;

  transition: all 0.5s var(--ease-out);
}

/* Noise / textura envelhecida via SVG */
.wood-card::before,
body.page-secao .sec-pilar::before,
body.page-secao .sec-step::before,
body.page-secao .sec-route-card::before,
body.page-secao .sec-video-card::before,
body.page-secao .sec-soon .sec-cs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.07  0 0 0 0 0.04  0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

/* Variação sutil por card (rotation seed) */
body.page-secao .sec-pilar:nth-of-type(2)::before,
body.page-secao .sec-step:nth-of-type(2)::before,
body.page-secao .sec-route-card:nth-of-type(2)::before { transform: rotate(90deg) scale(1.1); }

body.page-secao .sec-pilar:nth-of-type(3)::before,
body.page-secao .sec-step:nth-of-type(3)::before { transform: rotate(180deg); }

body.page-secao .sec-pilar:nth-of-type(4)::before,
body.page-secao .sec-step:nth-of-type(4)::before { transform: rotate(270deg) scale(1.05); }

/* ────── PHOTO WINDOW · janela/fresta que aparece no hover ────── */
.wood-card .wood-card__photo-window,
body.page-secao .sec-pilar::after,
body.page-secao .sec-step::after,
body.page-secao .sec-route-card::after,
body.page-secao .sec-video-card::after,
body.page-secao .sec-soon .sec-cs-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--wood-photo, url('img/curadoria/c01.jpg'));
  background-size: cover;
  background-position: center;
  filter: brightness(0.45) saturate(0.85) blur(0.6px);
  opacity: 0;
  z-index: 0;
  clip-path: polygon(0% 38%, 100% 32%, 100% 70%, 0% 76%);
  transition: opacity 0.55s var(--ease-out), clip-path 0.55s var(--ease-out);
  pointer-events: none;
}

/* Fotos default por tipo */
body.page-secao .sec-pilar { --wood-photo: url('img/curadoria/c14.jpg'); }
body.page-secao .sec-pilar:nth-of-type(2) { --wood-photo: url('img/curadoria/c19.jpg'); }
body.page-secao .sec-pilar:nth-of-type(3) { --wood-photo: url('img/curadoria/c11.jpg'); }
body.page-secao .sec-pilar:nth-of-type(4) { --wood-photo: url('img/curadoria/c28.jpg'); }
body.page-secao .sec-pilar:nth-of-type(5) { --wood-photo: url('img/curadoria/c18.jpg'); }
body.page-secao .sec-pilar:nth-of-type(6) { --wood-photo: url('img/curadoria/c20.jpg'); }

body.page-secao .sec-step { --wood-photo: url('img/curadoria/c05.jpg'); }
body.page-secao .sec-step:nth-of-type(2) { --wood-photo: url('img/curadoria/c03.jpg'); }
body.page-secao .sec-step:nth-of-type(3) { --wood-photo: url('img/curadoria/c14.jpg'); }
body.page-secao .sec-step:nth-of-type(4) { --wood-photo: url('img/curadoria/c28.jpg'); }
body.page-secao .sec-step:nth-of-type(5) { --wood-photo: url('img/curadoria/c19.jpg'); }
body.page-secao .sec-step:nth-of-type(6) { --wood-photo: url('img/curadoria/c20.jpg'); }

body.page-secao .sec-route-card { --wood-photo: url('img/curadoria/c11.jpg'); }
body.page-secao .sec-route-card:nth-of-type(2) { --wood-photo: url('img/curadoria/c09.jpg'); }

body.page-secao .sec-video-card { --wood-photo: url('img/curadoria/c20.jpg'); }
body.page-secao .sec-soon .sec-cs-card { --wood-photo: url('img/curadoria/c03.jpg'); }

/* ────── CONTEÚDO INTERNO ────── */
.wood-card__content,
body.page-secao .sec-pilar > *,
body.page-secao .sec-step > *,
body.page-secao .sec-route-card > *,
body.page-secao .sec-video-card > *,
body.page-secao .sec-soon .sec-cs-card > * {
  position: relative;
  z-index: 2;
}

/* Ícone line-art branco */
.wood-card__icon,
body.page-secao .sec-pilar-num,
body.page-secao .sec-step-num,
body.page-secao .sec-route-tag,
body.page-secao .sec-soon-eyebrow,
body.page-secao .sec-video-placeholder {
  font-family: var(--f-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: rgba(245, 241, 232, 0.75) !important;
  margin: 0 0 4px 0 !important;
  background: transparent !important;
  border: 1px solid rgba(245, 241, 232, 0.20) !important;
  padding: 5px 12px !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
}

body.page-secao .sec-video-placeholder {
  border: 1px solid rgba(245, 241, 232, 0.20) !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 auto 10px auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 !important;
  background: transparent !important;
}

body.page-secao .sec-video-placeholder svg {
  width: 22px !important;
  height: 22px !important;
  color: rgba(245, 241, 232, 0.85) !important;
  opacity: 1 !important;
}

/* Título serif branco grande */
.wood-card__title,
body.page-secao .sec-pilar-title,
body.page-secao .sec-step-title,
body.page-secao .sec-route-name,
body.page-secao .sec-soon-title,
body.page-secao .sec-video-card h3 {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.005em !important;
  color: #F5F1E8 !important;
  margin: 0 !important;
  text-transform: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.wood-card__title em,
body.page-secao .sec-pilar-title em,
body.page-secao .sec-step-title em,
body.page-secao .sec-route-name em,
body.page-secao .sec-soon-title em {
  font-style: normal !important;
  color: #C8A96E !important;
}

/* Subtítulo dourado caps */
.wood-card__sub,
body.page-secao .sec-pilar-desc,
body.page-secao .sec-step-desc,
body.page-secao .sec-video-card p,
body.page-secao .sec-soon-desc {
  font-family: var(--f-body) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: #C8A96E !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.5 !important;
  max-width: 90%;
}

body.page-secao .sec-step-desc {
  text-align: center !important;
  padding-top: 0 !important;
  grid-column: auto !important;
}

/* Borda gasta/envelhecida nas bordas */
.wood-card,
body.page-secao .sec-pilar,
body.page-secao .sec-step,
body.page-secao .sec-route-card,
body.page-secao .sec-video-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 184, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.20),
    inset 0 0 20px rgba(0, 0, 0, 0.35),
    0 14px 28px rgba(0, 0, 0, 0.45),
    0 4px 8px rgba(0, 0, 0, 0.30);
}

/* ────── HOVER / FOCUS / ACTIVE ────── */
.wood-card:hover,
.wood-card:focus-visible,
.wood-card.is-active,
body.page-secao .sec-pilar:hover,
body.page-secao .sec-step:hover,
body.page-secao .sec-route-card:hover,
body.page-secao .sec-video-card:hover,
body.page-secao .sec-soon .sec-cs-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(200, 169, 110, 0.55) !important;
  background-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 184, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(200, 169, 110, 0.30),
    inset 0 0 26px rgba(0, 0, 0, 0.45),
    0 24px 44px rgba(0, 0, 0, 0.60),
    0 8px 14px rgba(184, 146, 74, 0.22) !important;
}

.wood-card:hover .wood-card__photo-window,
.wood-card:hover::after,
body.page-secao .sec-pilar:hover::after,
body.page-secao .sec-step:hover::after,
body.page-secao .sec-route-card:hover::after,
body.page-secao .sec-video-card:hover::after,
body.page-secao .sec-soon .sec-cs-card:hover::after {
  opacity: 0.55;
  clip-path: polygon(0% 32%, 100% 26%, 100% 76%, 0% 82%);
}

/* Foco acessível */
.wood-card:focus-visible,
body.page-secao .sec-pilar:focus-visible,
body.page-secao .sec-step:focus-visible,
body.page-secao .sec-route-card:focus-visible {
  outline: 1px solid var(--gold-light) !important;
  outline-offset: 4px !important;
}

/* Active state (touch) */
.wood-card.is-active,
body.page-secao .sec-pilar:active,
body.page-secao .sec-step:active,
body.page-secao .sec-route-card:active {
  transform: translateY(-3px) !important;
}

/* ────── RESET de cards antigos contaminantes ────── */
body.page-secao .sec-pilar,
body.page-secao .sec-step,
body.page-secao .sec-video-card,
body.page-secao .sec-route-card,
body.page-secao .sec-soon .sec-cs-card {
  background-image: none; /* limpa bg antigo */
}

/* Override aplica em cima novamente */
body.page-secao .sec-pilar,
body.page-secao .sec-step,
body.page-secao .sec-video-card,
body.page-secao .sec-route-card,
body.page-secao .sec-soon .sec-cs-card {
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 38px, rgba(0, 0, 0, 0.18) 39px, rgba(0, 0, 0, 0.08) 40px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(58, 38, 22, 0.18) 2.5px, transparent 3.5px),
    linear-gradient(135deg, #2A1A10 0%, #3A2718 45%, #2D1B0E 100%) !important;
}

/* Step grid: cada step alinhado center · número e desc */
body.page-secao .sec-step {
  grid-template-columns: 1fr !important;
}

body.page-secao .sec-step .sec-step-num {
  grid-column: auto !important;
}

body.page-secao .sec-step .sec-step-title {
  grid-column: auto !important;
}

body.page-secao .sec-step .sec-step-desc {
  grid-column: auto !important;
}

/* Route card layout */
body.page-secao .sec-route-card {
  flex-direction: column !important;
}

body.page-secao .sec-route-card > div {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

body.page-secao .sec-route-card > span {
  display: none; /* esconde seta extra */
}

/* Video card layout */
body.page-secao .sec-video-card {
  align-items: center !important;
}

/* Coming soon stays full width but with wood style */
body.page-secao .sec-soon {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.page-secao .sec-soon .sec-cs-card {
  width: 100%;
  margin: 0 auto;
}

/* ────── RESPONSIVE ────── */
@media (max-width: 1024px) {
  body.page-secao .sec-pilares,
  body.page-secao .sec-routes,
  body.page-secao .sec-videos,
  body.page-secao .sec-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  body.page-secao .sec-pilares,
  body.page-secao .sec-routes,
  body.page-secao .sec-videos,
  body.page-secao .sec-steps {
    grid-template-columns: 1fr !important;
  }
  body.page-secao .sec-pilar,
  body.page-secao .sec-step,
  body.page-secao .sec-route-card,
  body.page-secao .sec-video-card {
    min-height: 160px !important;
    padding: 24px 20px !important;
  }
}


/* ============================================================
   SaaS CARDS · design UX/UI moderno digital
   SOBRESCREVE placa de madeira anterior
   ============================================================ */

/* Reset visual madeira */
body.page-secao .sec-pilar,
body.page-secao .sec-step,
body.page-secao .sec-route-card,
body.page-secao .sec-video-card,
body.page-secao .sec-soon .sec-cs-card {
  background: var(--cream-soft) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  isolation: isolate;
  cursor: pointer;
  text-decoration: none;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: clamp(20px, 2vw, 28px) !important;
  min-height: clamp(160px, 20vh, 220px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  position: relative;
  color: var(--ink) !important;
  box-shadow:
    0 1px 2px rgba(15, 15, 14, 0.04),
    0 8px 16px rgba(15, 15, 14, 0.05) !important;
  transition: all 0.35s var(--ease-out) !important;
}

/* Apaga ::before (texture wood) e ::after (photo window) */
body.page-secao .sec-pilar::before,
body.page-secao .sec-step::before,
body.page-secao .sec-route-card::before,
body.page-secao .sec-video-card::before,
body.page-secao .sec-soon .sec-cs-card::before,
body.page-secao .sec-pilar::after,
body.page-secao .sec-step::after,
body.page-secao .sec-route-card::after,
body.page-secao .sec-video-card::after,
body.page-secao .sec-soon .sec-cs-card::after {
  display: none !important;
  content: none !important;
}

/* Ícone badge (top-left) — circular dourado soft */
body.page-secao .sec-pilar-num,
body.page-secao .sec-step-num,
body.page-secao .sec-route-tag,
body.page-secao .sec-soon-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: var(--gold-a08) !important;
  border: 1px solid var(--gold-a18) !important;
  color: var(--gold-deep) !important;
  font-family: var(--f-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* Video placeholder circular */
body.page-secao .sec-video-placeholder {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: var(--gold-a08) !important;
  border: 1px solid var(--gold-a18) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 !important;
}

body.page-secao .sec-video-placeholder svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--gold-deep) !important;
}

/* Título · Fraunces title-case, escuro */
body.page-secao .sec-pilar-title,
body.page-secao .sec-step-title,
body.page-secao .sec-route-name,
body.page-secao .sec-soon-title,
body.page-secao .sec-video-card h3 {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(18px, 1.8vw, 22px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
  color: var(--ink) !important;
  margin: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-align: left !important;
}

body.page-secao .sec-pilar-title em,
body.page-secao .sec-step-title em,
body.page-secao .sec-route-name em,
body.page-secao .sec-soon-title em {
  font-style: normal !important;
  color: var(--gold-deep) !important;
  font-weight: 500;
}

/* Subtítulo · sans neutro, normal case */
body.page-secao .sec-pilar-desc,
body.page-secao .sec-step-desc,
body.page-secao .sec-video-card p,
body.page-secao .sec-soon-desc {
  font-family: var(--f-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink-a55) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  text-align: left !important;
  max-width: 100%;
}

/* Pequena seta no canto inferior direito */
body.page-secao .sec-pilar::after,
body.page-secao .sec-step::after,
body.page-secao .sec-route-card::after,
body.page-secao .sec-video-card::after {
  content: '→' !important;
  display: flex !important;
  position: absolute !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 32px !important;
  height: 32px !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  color: var(--ink-a55) !important;
  font-size: 14px !important;
  font-family: var(--f-body) !important;
  clip-path: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: all 0.3s var(--ease-out) !important;
  background-image: none !important;
  inset: auto 20px 20px auto !important;
  pointer-events: none;
  z-index: 2;
}

/* Linha decorativa fina antes da seta */
body.page-secao .sec-pilar > *:last-child,
body.page-secao .sec-step > *:last-child {
  margin-bottom: 16px;
}

/* Layout interno · ícone topo, depois título/sub/seta */
body.page-secao .sec-step,
body.page-secao .sec-pilar,
body.page-secao .sec-route-card,
body.page-secao .sec-video-card,
body.page-secao .sec-soon .sec-cs-card {
  padding-bottom: 64px !important;
}

/* Route card layout */
body.page-secao .sec-route-card > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: flex-start !important;
  text-align: left !important;
}

body.page-secao .sec-route-card > span:not(.sec-route-tag) {
  display: none !important;
}

/* Hover · lift + accent gold */
body.page-secao .sec-pilar:hover,
body.page-secao .sec-step:hover,
body.page-secao .sec-route-card:hover,
body.page-secao .sec-video-card:hover,
body.page-secao .sec-soon .sec-cs-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--gold-a40) !important;
  box-shadow:
    0 1px 2px rgba(15, 15, 14, 0.05),
    0 18px 32px rgba(15, 15, 14, 0.10),
    0 0 0 1px rgba(184, 146, 74, 0.18) !important;
  background: var(--cream-soft) !important;
}

body.page-secao .sec-pilar:hover .sec-pilar-num,
body.page-secao .sec-step:hover .sec-step-num,
body.page-secao .sec-route-card:hover .sec-route-tag,
body.page-secao .sec-soon .sec-cs-card:hover .sec-soon-eyebrow {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--cream-soft) !important;
}

body.page-secao .sec-pilar:hover::after,
body.page-secao .sec-step:hover::after,
body.page-secao .sec-route-card:hover::after,
body.page-secao .sec-video-card:hover::after {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--cream-soft) !important;
  transform: translate(2px, -2px) !important;
}

/* Focus accessible */
body.page-secao .sec-pilar:focus-visible,
body.page-secao .sec-step:focus-visible,
body.page-secao .sec-route-card:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 4px !important;
}

/* Active touch */
body.page-secao .sec-pilar:active,
body.page-secao .sec-step:active,
body.page-secao .sec-route-card:active {
  transform: translateY(-2px) !important;
}

/* Sec soon card · destaque (CTA principal) */
body.page-secao .sec-soon .sec-cs-card {
  border: 1px solid var(--gold-a30) !important;
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--paper) 100%) !important;
  text-align: center !important;
  align-items: center !important;
  padding: 48px 40px !important;
  min-height: auto !important;
}

body.page-secao .sec-soon .sec-cs-card .sec-soon-eyebrow {
  width: auto !important;
  height: auto !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
}

body.page-secao .sec-soon .sec-cs-card .sec-soon-title {
  text-align: center !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
}

body.page-secao .sec-soon .sec-cs-card .sec-soon-desc {
  text-align: center !important;
  font-size: 14px !important;
}

body.page-secao .sec-soon .sec-cs-card::after { display: none !important; }


/* ============================================================
   STANDBY CINEMATOGRÁFICO · A-frame + profundidade 3D
   Referência: lacquamarina.squadfilm.com
   ============================================================ */

body.page-standby {
  background: #0A0604;
  color: var(--cream);
  height: 100vh;
  overflow: hidden;
}

.standby.standby-cinematic {
  position: fixed;
  inset: 0;
  background: #0A0604;
  overflow: hidden;
  cursor: pointer;
  display: block;
  perspective: 1400px;
}

/* ────── BG profundidade 3D camera ────── */
.standby-bg-deep {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.standby-bg-img {
  position: absolute;
  inset: -8%;
  background-image: url('img/curadoria/c17.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(1.05) contrast(1.08);
  transform: scale(1.10);
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: ken-burns 24s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ken-burns {
  0%   { transform: scale(1.10) translate(0, 0); }
  50%  { transform: scale(1.16) translate(-12px, -8px); }
  100% { transform: scale(1.12) translate(8px, 4px); }
}

/* Mist · 3 camadas com parallax diferentes */
.standby-bg-mist {
  position: absolute;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.standby-mist-1 {
  inset: 50% -10% 0 -10%;
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255, 180, 100, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 30% 90%, rgba(255, 200, 130, 0.08) 0%, transparent 70%);
  filter: blur(20px);
}

.standby-mist-2 {
  inset: 35% -8% 10% -8%;
  background:
    radial-gradient(ellipse 70% 60% at 70% 80%, rgba(150, 110, 80, 0.18) 0%, transparent 65%);
  filter: blur(28px);
  opacity: 0.7;
  animation: mist-drift 18s ease-in-out infinite alternate;
}

.standby-mist-3 {
  inset: 20% -12% 30% -12%;
  background:
    radial-gradient(ellipse 90% 50% at 50% 50%, rgba(40, 30, 20, 0.55) 0%, transparent 70%);
  filter: blur(40px);
}

@keyframes mist-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(20px, -8px, 0); }
}

.standby-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

.standby-bg-warmth {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 75%, rgba(184, 100, 50, 0.18) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ────── NAV LATERAL DIREITA · letras verticais ────── */
.standby-sidenav {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 24px 0;
}

.standby-sidenav-link {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
  text-decoration: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
  transition: color 0.3s, opacity 0.3s;
  position: relative;
  padding-right: 8px;
}

.standby-sidenav-link::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: rgba(184, 146, 74, 0.4);
}

.standby-sidenav-link:hover {
  color: var(--gold-light);
}

/* ────── CONTEÚDO CENTRAL ────── */
.standby-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  padding: 0 32px;
  max-width: 640px;
  animation: standby-fade-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

@keyframes standby-fade-in {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.standby-logo-wrap {
  position: relative;
  width: clamp(200px, 22vw, 320px);
  margin: 0 auto;
}

.standby-logo-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 32px rgba(255, 180, 100, 0.25)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  animation: logo-breath 6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes logo-breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

.standby-logo-aura {
  position: absolute;
  inset: -25%;
  background: radial-gradient(ellipse at center, rgba(255, 180, 100, 0.22) 0%, transparent 60%);
  filter: blur(24px);
  pointer-events: none;
  animation: aura-pulse 5s ease-in-out infinite;
  z-index: 1;
}

@keyframes aura-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; transform: scale(1.08); }
}

.standby-quote {
  margin: clamp(28px, 4vh, 44px) auto 0 auto;
  font-family: var(--f-display);
  font-weight: 300;
  font-style: normal !important;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.35;
  letter-spacing: 0.10em;
  color: rgba(245, 241, 232, 0.78);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.standby-divider {
  width: 48px;
  height: 1px;
  background: var(--gold-light);
  margin: clamp(20px, 3vh, 30px) auto clamp(16px, 2.5vh, 24px) auto;
  opacity: 0.6;
  transform-origin: center;
  animation: divider-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 1.4s backwards;
}

@keyframes divider-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.standby-loc {
  display: inline-block;
  font-family: var(--f-body);
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 500;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.62);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ────── CTA inferior ────── */
.standby-cta {
  position: fixed;
  bottom: clamp(32px, 5vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 0;
  padding: 12px 20px;
  cursor: pointer;
  color: var(--cream);
  animation: cta-fade-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.8s both;
}

@keyframes cta-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.standby-cta-label {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.62);
}

.standby-cta-bar {
  width: 1px;
  height: 36px;
  background: rgba(245, 241, 232, 0.30);
  position: relative;
  overflow: hidden;
}

.standby-cta-bar::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--gold-light) 50%, transparent 100%);
  animation: bar-fall 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes bar-fall {
  0%   { top: -100%; }
  100% { top: 100%; }
}

.standby-cta:hover .standby-cta-label { color: var(--gold-light); }
.standby-cta:hover .standby-cta-bar { background: rgba(245, 241, 232, 0.55); }

/* ────── Responsive ────── */
@media (max-width: 1280px) {
  .standby-sidenav { right: 20px; gap: 28px; }
  .standby-sidenav-link { font-size: 9px; letter-spacing: 0.24em; }
}

@media (max-width: 900px) {
  .standby-sidenav { display: none; }
  .standby-content { padding: 0 24px; }
  .standby-quote { font-size: 14px; letter-spacing: 0.08em; }
}


/* ============================================================
   MAQUETE 3D · Three.js fullscreen
   ============================================================ */

body.page-maquete {
  background: #0A0604;
  color: var(--cream);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

.maquete-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
}

#maquete-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#maquete-canvas:active { cursor: grabbing; }

/* Header */
.maquete-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 6, 4, 0.85) 0%, rgba(10, 6, 4, 0) 100%);
}

.maquete-header > * { pointer-events: auto; }

.maquete-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(20, 14, 10, 0.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 241, 232, 0.15);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s;
}

.maquete-back:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

.maquete-back-arrow { display: inline-flex; }
.maquete-back-arrow svg { width: 14px; height: 14px; }

.maquete-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.maquete-brand-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--cream);
}

.maquete-brand-sub {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.maquete-help {
  display: flex;
  align-items: center;
  gap: 16px;
}

.maquete-help-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
}

.maquete-help-item svg { width: 14px; height: 14px; opacity: 0.7; }

/* Loading */
.maquete-loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: linear-gradient(135deg, #0A0604 0%, #1A0F08 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity 0.6s var(--ease-out);
}

.maquete-loading.is-hidden { opacity: 0; pointer-events: none; }

.maquete-loading-spinner {
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(184, 146, 74, 0.18);
  border-top-color: var(--gold-light);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  margin-bottom: 8px;
}

.maquete-loading-percent {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 32px;
  color: var(--gold-light);
  letter-spacing: 0.02em;
}

.maquete-loading-title {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--cream);
}

.maquete-loading-sub {
  font-family: var(--f-display);
  font-style: normal;
  font-size: 13px;
  color: rgba(245, 241, 232, 0.55);
}

/* Erro */
.maquete-error {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 6, 4, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
}

.maquete-error-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--cream);
}

.maquete-error-actions { display: flex; gap: 12px; }

.maquete-btn {
  padding: 12px 24px;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.maquete-btn:hover { background: var(--gold-light); }

/* Controles modos · bottom */
.maquete-modes {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(20, 14, 10, 0.78);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(184, 146, 74, 0.20);
  border-radius: 100px;
}

.maquete-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 0;
  color: rgba(245, 241, 232, 0.65);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s;
  min-height: 36px;
}

.maquete-mode-btn:hover { color: var(--cream); }

.maquete-mode-btn.is-active {
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
}

.mode-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.maquete-mode-btn.is-active .mode-dot { opacity: 1; }

/* Controles ação · right */
.maquete-actions {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maquete-action-btn {
  position: relative;
  width: 44px;
  height: 44px;
  background: rgba(20, 14, 10, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 241, 232, 0.15);
  color: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.maquete-action-btn svg { width: 18px; height: 18px; }

.maquete-action-btn:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.maquete-action-btn.is-active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.ma-tooltip {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(20, 14, 10, 0.92);
  border: 1px solid rgba(245, 241, 232, 0.15);
  color: var(--cream);
  padding: 5px 10px;
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.maquete-action-btn:hover .ma-tooltip { opacity: 1; }

/* Hotspots */
.maquete-hotspots {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.mq-hotspot {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}

.mq-hotspot:hover { transform: translate(-50%, -50%) scale(1.15); }

.mq-hotspot-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--gold);
  border: 2px solid #FFE6B8;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.mq-hotspot-pulse {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--gold-light);
  border-radius: 50%;
  animation: hotspot-pulse 2.4s ease-out infinite;
  opacity: 0;
}

@keyframes hotspot-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(3); opacity: 0; }
}

/* Tooltip flutuante hotspot */
.maquete-tooltip {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: rgba(20, 14, 10, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(184, 146, 74, 0.30);
  color: var(--cream);
  max-width: 280px;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  pointer-events: none;
}

.maquete-tooltip.is-shown {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 8px));
}

.maquete-tooltip-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--gold-light);
}

.maquete-tooltip-desc {
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.85;
}

@media (max-width: 1024px) {
  .maquete-header { padding: 14px 18px; flex-wrap: wrap; }
  .maquete-help { display: none; }
  .maquete-actions { right: 12px; }
  .maquete-modes { gap: 2px; padding: 4px; }
  .maquete-mode-btn { padding: 8px 14px; font-size: 10px; letter-spacing: 0.18em; }
}

@media (max-width: 640px) {
  .maquete-brand-text { font-size: 13px; }
  .maquete-brand-sub { display: none; }
  .maquete-modes { bottom: 12px; }
  .maquete-mode-btn { padding: 7px 11px; font-size: 9px; }
  .maquete-action-btn { width: 38px; height: 38px; }
}


/* ============================================================
   CALCULADORA · investimento, retorno, projeções
   ============================================================ */

body.page-calc {
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  overflow-y: auto;
}

.calc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(245, 241, 232, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.calc-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.3s;
}

.calc-back:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.calc-back svg { width: 14px; height: 14px; }

.calc-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.calc-brand-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink);
}

.calc-brand-sub {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.calc-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.3s;
}

.calc-cta:hover { background: var(--gold); color: var(--cream-soft); }
.calc-cta svg { width: 14px; height: 14px; }

/* Shell */
.calc-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px;
}

.calc-intro { margin-bottom: 32px; max-width: 720px; }

.calc-eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}

.calc-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px 0;
}

.calc-title em { font-style: normal; color: var(--gold-deep); }

.calc-lead {
  font-family: var(--f-body);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--ink-a70);
  line-height: 1.6;
  margin: 0;
}

/* Grid main */
.calc-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  align-items: start;
}

.calc-section-mini {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-a55);
  margin-bottom: 16px;
}

/* INPUTS */
.calc-inputs {
  position: sticky;
  top: 88px;
  padding: 28px;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calc-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.calc-label {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-a70);
}

.calc-value {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--gold-deep);
}

.calc-field-hint {
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--ink-a55);
  line-height: 1.4;
  margin-top: 2px;
}

.calc-cotas-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.calc-cota-btn {
  padding: 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.25s;
  border-radius: 6px;
}

.calc-cota-btn:hover { border-color: var(--gold); color: var(--gold-deep); }
.calc-cota-btn.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* Slider */
.calc-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 100px;
  outline: none;
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--cream-soft);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.calc-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--cream-soft);
}

.calc-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-body);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-a40);
  margin-top: 4px;
}

.calc-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--ink-a70);
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.25s;
}

.calc-reset:hover { color: var(--gold-deep); border-color: var(--gold); }
.calc-reset svg { width: 12px; height: 12px; }

/* OUTPUTS */
.calc-outputs { display: flex; flex-direction: column; gap: 24px; }

.calc-card {
  padding: 22px 24px;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s;
}

.calc-card:hover {
  border-color: var(--gold-a30);
  box-shadow: 0 4px 12px rgba(15, 15, 14, 0.06);
}

.cc-label {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-a55);
}

.cc-num {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--ink);
  line-height: 1.1;
}

.cc-big {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.01em;
}

.cc-sub {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--ink-a55);
  margin-top: 2px;
}

/* Hero card */
.calc-card-hero {
  background: linear-gradient(135deg, var(--ink) 0%, #1f1815 100%);
  color: var(--cream);
  border-color: var(--ink);
  padding: 32px 36px;
}

.calc-card-hero .cc-label { color: var(--gold-light); }
.calc-card-hero .cc-big { color: var(--cream); }
.calc-card-hero .cc-sub { color: rgba(245, 241, 232, 0.65); }

/* Highlight gold */
.calc-card-highlight {
  background: linear-gradient(135deg, var(--gold-a08) 0%, var(--paper) 100%);
  border-color: var(--gold-a30);
}

.calc-card-highlight .cc-num { color: var(--gold-deep); }

/* Results grid */
.calc-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Compare */
.calc-compare {
  padding: 28px;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.compare-bar-row {
  display: grid;
  grid-template-columns: 200px 1fr 130px;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.compare-bar-row:last-child { border-bottom: 0; }

.compare-label {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--ink);
}

.compare-bar {
  height: 8px;
  background: var(--line-soft);
  border-radius: 100px;
  overflow: hidden;
}

.compare-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.6s var(--ease-out);
}

.compare-fill-lacqua { background: var(--gold); }
.compare-fill-hotel  { background: var(--terra); }
.compare-fill-casa   { background: var(--ink-a40); }

.compare-value {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
  text-align: right;
}

/* Foot */
.calc-foot {
  padding: 24px;
  background: var(--paper);
  border-radius: 12px;
}

.calc-disclaimer {
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--ink-a55);
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.calc-foot-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.calc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.3s;
}

.calc-btn:hover { background: var(--ink); color: var(--cream); }

.calc-btn-primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.calc-btn-primary:hover { background: var(--gold-light); color: var(--ink); }

/* Responsive */
@media (max-width: 1024px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-inputs { position: static; }
  .calc-results-grid { grid-template-columns: repeat(2, 1fr); }
  .compare-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .compare-value { text-align: left; }
}

@media (max-width: 640px) {
  .calc-shell { padding: 16px; }
  .calc-results-grid { grid-template-columns: 1fr; }
  .calc-cta span { display: none; }
}


/* ============================================================
   DIGITAL CARDS 2026 · Premium editorial UX/UI
   SOBRESCREVE wood + SaaS anteriores
   ============================================================ */

/* RESET dos cards anteriores */
body.page-secao .sec-pilar,
body.page-secao .sec-step,
body.page-secao .sec-route-card,
body.page-secao .sec-video-card,
body.page-secao .sec-soon .sec-cs-card {
  /* limpa tudo do wood + saas */
  background: none !important;
  background-color: transparent !important;
  border: 1px solid rgba(34, 31, 27, 0.10) !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: left !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: clamp(190px, 26vh, 280px) !important;
  border-radius: clamp(14px, 1vw, 20px) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: var(--cream) !important;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out) !important;
}

/* Apaga ::before (texture wood) e ::after antigos */
body.page-secao .sec-pilar::before,
body.page-secao .sec-step::before,
body.page-secao .sec-route-card::before,
body.page-secao .sec-video-card::before,
body.page-secao .sec-soon .sec-cs-card::before {
  display: none !important;
  content: none !important;
}

/* MEDIA layer (background photo + zoom) */
body.page-secao .sec-pilar::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: var(--digital-photo) !important;
  background-size: cover !important;
  background-position: var(--object-pos, center) !important;
  z-index: 0 !important;
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out) !important;
  transform: scale(1.001) !important;
  filter: saturate(1) !important;
  border-radius: inherit !important;
}

body.page-secao .sec-step::before,
body.page-secao .sec-route-card::before,
body.page-secao .sec-video-card::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: var(--digital-photo) !important;
  background-size: cover !important;
  background-position: var(--object-pos, center) !important;
  z-index: 0 !important;
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out) !important;
  transform: scale(1.001) !important;
  border-radius: inherit !important;
}

/* OVERLAY layer (gradient leitura) */
body.page-secao .sec-pilar::after,
body.page-secao .sec-step::after,
body.page-secao .sec-route-card::after,
body.page-secao .sec-video-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.65) 100%),
    radial-gradient(circle at 18% 18%, rgba(200, 169, 110, 0.18), transparent 38%) !important;
  pointer-events: none !important;
  transition: opacity 0.4s var(--ease-out) !important;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.65) 100%), radial-gradient(circle at 18% 18%, rgba(200, 169, 110, 0.18), transparent 38%) !important;
  clip-path: none !important;
  filter: none !important;
  opacity: 1 !important;
  border-radius: inherit !important;
}

/* CONTEÚDO interno */
body.page-secao .sec-pilar > *,
body.page-secao .sec-step > *,
body.page-secao .sec-route-card > *,
body.page-secao .sec-video-card > * {
  position: relative !important;
  z-index: 3 !important;
  pointer-events: none;
}

/* Ícone badge top-left (glass) — substitui sec-pilar-num/sec-step-num */
body.page-secao .sec-pilar .sec-pilar-num,
body.page-secao .sec-step .sec-step-num,
body.page-secao .sec-route-card .sec-route-tag,
body.page-secao .sec-video-card .sec-video-placeholder {
  position: absolute !important;
  top: clamp(14px, 1.4vw, 22px) !important;
  left: clamp(14px, 1.4vw, 22px) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #FFFFFF !important;
  font-family: var(--f-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  z-index: 4 !important;
  pointer-events: none;
  transition: all 0.35s var(--ease-out);
}

body.page-secao .sec-video-card .sec-video-placeholder {
  aspect-ratio: 1 !important;
}

body.page-secao .sec-video-card .sec-video-placeholder svg {
  width: 18px !important;
  height: 18px !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Bloco texto (canto inferior esquerdo) — substitui title/desc */
body.page-secao .sec-pilar-title,
body.page-secao .sec-step-title,
body.page-secao .sec-route-name,
body.page-secao .sec-video-card h3 {
  position: absolute !important;
  left: clamp(18px, 2vw, 28px) !important;
  right: clamp(64px, 6vw, 80px) !important;
  bottom: clamp(40px, 4vh, 60px) !important;
  z-index: 3 !important;
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.005em !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  text-transform: none !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  text-align: left !important;
  text-wrap: balance;
  word-break: normal !important;
  hyphens: none !important;
  text-decoration: none !important;
}

body.page-secao .sec-pilar-title em,
body.page-secao .sec-step-title em,
body.page-secao .sec-route-name em,
body.page-secao .sec-video-card h3 em {
  font-style: normal !important;
  color: #E8D097 !important;
  font-weight: 500 !important;
}

/* Subtitle (acima do title, label dourado caps) */
body.page-secao .sec-pilar-desc,
body.page-secao .sec-step-desc,
body.page-secao .sec-video-card p {
  position: absolute !important;
  left: clamp(18px, 2vw, 28px) !important;
  right: clamp(64px, 6vw, 80px) !important;
  bottom: clamp(18px, 2vh, 28px) !important;
  z-index: 3 !important;
  font-family: var(--f-body) !important;
  font-size: clamp(11px, 0.85vw, 13px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.78) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  text-align: left !important;
  max-width: 100%;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Label uppercase em cima do title (eyebrow) */
body.page-secao .sec-pilar-title::before {
  content: 'Pilar';
  display: block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #C8A96E;
  margin-bottom: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

body.page-secao .sec-step-title::before {
  content: 'Etapa';
  display: block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #C8A96E;
  margin-bottom: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

body.page-secao .sec-route-name::before {
  content: 'Rota';
  display: block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #C8A96E;
  margin-bottom: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

body.page-secao .sec-video-card h3::before {
  content: 'Vídeo';
  display: block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #C8A96E;
  margin-bottom: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Arrow circle bottom-right */
body.page-secao .sec-pilar > .sec-pilar-num::after,
body.page-secao .sec-step > .sec-step-num::after,
body.page-secao .sec-route-card .sec-route-tag::after {
  display: none !important;
}

body.page-secao .sec-pilar:not(.no-arrow)::before {
  /* mantém imagem em ::before */
}

/* Arrow standalone via último filho — usando ::after no card seria conflito. Pseudo via attr não funciona em CSS puro. Vou injetar via JS NO secao.js depois. */

/* HOVER digital-card 2026 */
body.page-secao .sec-pilar:hover,
body.page-secao .sec-step:hover,
body.page-secao .sec-route-card:hover,
body.page-secao .sec-video-card:hover,
body.page-secao .sec-pilar:focus-visible,
body.page-secao .sec-step:focus-visible,
body.page-secao .sec-route-card:focus-visible,
body.page-secao .sec-video-card:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(200, 169, 110, 0.38) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 24px 60px rgba(25, 20, 14, 0.18) !important;
}

body.page-secao .sec-pilar:hover::before,
body.page-secao .sec-step:hover::before,
body.page-secao .sec-route-card:hover::before,
body.page-secao .sec-video-card:hover::before {
  transform: scale(1.025) !important;
  filter: saturate(0.95) contrast(1.02) !important;
}

body.page-secao .sec-pilar:hover .sec-pilar-num,
body.page-secao .sec-step:hover .sec-step-num,
body.page-secao .sec-route-card:hover .sec-route-tag,
body.page-secao .sec-video-card:hover .sec-video-placeholder {
  background: rgba(200, 169, 110, 0.92) !important;
  color: #17130F !important;
  border-color: rgba(200, 169, 110, 1) !important;
}

body.page-secao .sec-pilar:focus-visible,
body.page-secao .sec-step:focus-visible,
body.page-secao .sec-route-card:focus-visible {
  outline: 2px solid var(--gold-light) !important;
  outline-offset: 3px !important;
}

/* GRID editorial bento — span variável */
body.page-secao .sec-pilares,
body.page-secao .sec-routes,
body.page-secao .sec-videos,
body.page-secao .sec-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 16px) !important;
  align-items: stretch !important;
}

/* Span 2 no primeiro pilar/step (hero) e no quarto (em sec-routes pra balancear) */
body.page-secao .sec-pilares > .sec-pilar:first-child,
body.page-secao .sec-steps > .sec-step:nth-of-type(4n+1) {
  grid-column: span 2 !important;
  min-height: clamp(220px, 30vh, 320px) !important;
}

body.page-secao .sec-pilares > .sec-pilar:first-child .sec-pilar-title,
body.page-secao .sec-steps > .sec-step:nth-of-type(4n+1) .sec-step-title {
  font-size: clamp(26px, 2.6vw, 36px) !important;
}

body.page-secao .sec-routes {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.page-secao .sec-videos {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* SOON card (CTA coming soon) → digital-card light */
body.page-secao .sec-soon .sec-cs-card {
  background: rgba(250, 247, 240, 0.92) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(29, 26, 22, 0.14) !important;
  padding: clamp(40px, 5vw, 64px) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  min-height: clamp(240px, 32vh, 360px) !important;
  position: relative !important;
}

body.page-secao .sec-soon .sec-cs-card::before {
  display: none !important;
  content: none !important;
}

body.page-secao .sec-soon .sec-cs-card::after {
  display: none !important;
  content: none !important;
}

body.page-secao .sec-soon .sec-cs-card .sec-soon-eyebrow {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  inset: auto !important;
  background: rgba(200, 169, 110, 0.10) !important;
  border: 1px solid rgba(200, 169, 110, 0.30) !important;
  color: var(--gold-deep) !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  margin: 0 0 4px 0 !important;
  display: inline-block !important;
}

body.page-secao .sec-soon .sec-cs-card .sec-soon-title {
  position: relative !important;
  inset: auto !important;
  font-family: var(--f-display) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 600px;
}

body.page-secao .sec-soon .sec-cs-card .sec-soon-title::before { display: none !important; }

body.page-secao .sec-soon .sec-cs-card .sec-soon-title em {
  color: var(--gold-deep) !important;
}

body.page-secao .sec-soon .sec-cs-card .sec-soon-desc {
  position: relative !important;
  inset: auto !important;
  font-family: var(--f-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ink-a70) !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 560px !important;
  text-shadow: none !important;
}

body.page-secao .sec-soon .sec-cs-card .sec-btn-primary {
  margin-top: 8px !important;
}

/* DATA-PHOTO mapeamento por nth (fallback) */
body.page-secao .sec-pilar { --digital-photo: url('img/curadoria/c14.jpg'); --object-pos: center; }
body.page-secao .sec-pilar:nth-of-type(2) { --digital-photo: url('img/curadoria/c19.jpg'); }
body.page-secao .sec-pilar:nth-of-type(3) { --digital-photo: url('img/curadoria/c11.jpg'); }
body.page-secao .sec-pilar:nth-of-type(4) { --digital-photo: url('img/curadoria/c28.jpg'); }
body.page-secao .sec-pilar:nth-of-type(5) { --digital-photo: url('img/curadoria/c18.jpg'); }
body.page-secao .sec-pilar:nth-of-type(6) { --digital-photo: url('img/curadoria/c20.jpg'); }

body.page-secao .sec-step { --digital-photo: url('img/curadoria/c30.jpg'); --object-pos: center; }
body.page-secao .sec-step:nth-of-type(2) { --digital-photo: url('img/curadoria/c33.jpg'); }
body.page-secao .sec-step:nth-of-type(3) { --digital-photo: url('img/curadoria/c14.jpg'); }
body.page-secao .sec-step:nth-of-type(4) { --digital-photo: url('img/curadoria/c18.jpg'); }
body.page-secao .sec-step:nth-of-type(5) { --digital-photo: url('img/curadoria/c19.jpg'); }
body.page-secao .sec-step:nth-of-type(6) { --digital-photo: url('img/curadoria/c20.jpg'); }

body.page-secao .sec-route-card { --digital-photo: url('img/curadoria/c11.jpg'); }
body.page-secao .sec-route-card:nth-of-type(2) { --digital-photo: url('img/curadoria/c09.jpg'); }

body.page-secao .sec-video-card { --digital-photo: url('img/curadoria/c20.jpg'); }
body.page-secao .sec-video-card:nth-of-type(2) { --digital-photo: url('img/curadoria/c30.jpg'); }
body.page-secao .sec-video-card:nth-of-type(3) { --digital-photo: url('img/curadoria/c26.jpg'); }
body.page-secao .sec-video-card:nth-of-type(4) { --digital-photo: url('img/curadoria/c17.jpg'); }

/* Arrow circle absolute (injected via CSS pseudo no card) */
body.page-secao .sec-pilar > a::after,
body.page-secao .sec-pilar > div > a::after { display: none; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  body.page-secao .sec-pilares,
  body.page-secao .sec-routes,
  body.page-secao .sec-videos,
  body.page-secao .sec-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.page-secao .sec-pilares > .sec-pilar:first-child,
  body.page-secao .sec-steps > .sec-step:first-of-type {
    grid-column: span 2 !important;
  }
}

@media (max-width: 640px) {
  body.page-secao .sec-pilares,
  body.page-secao .sec-routes,
  body.page-secao .sec-videos,
  body.page-secao .sec-steps {
    grid-template-columns: 1fr !important;
  }
  body.page-secao .sec-pilares > .sec-pilar:first-child,
  body.page-secao .sec-steps > .sec-step:first-of-type {
    grid-column: span 1 !important;
  }
  body.page-secao .sec-pilar,
  body.page-secao .sec-step,
  body.page-secao .sec-route-card,
  body.page-secao .sec-video-card {
    min-height: 180px !important;
  }
}


/* ============================================================
   INTERACTIVE MENU 2026 · cream + digital cards
   Override completo: substitui Vila A-frame, Cartografia, Cinema
   ============================================================ */

body.page-menu-digital {
  background: #F5F0E8;
  color: #1d1a16;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Desliga TUDO dos menus anteriores */
body.page-menu-digital .village-scene,
body.page-menu-digital .village-header,
body.page-menu-digital .village-cabins,
body.page-menu-digital .village-zones,
body.page-menu-digital .village-flash,
body.page-menu-digital .cinema-grid,
body.page-menu-digital .cinema-header,
body.page-menu-digital .cart-header,
body.page-menu-digital .cart-map,
body.page-menu-digital .cart-pins,
body.page-menu-digital .cart-legend,
body.page-menu-digital .cream-depth-bg,
body.page-menu-digital .cream-vignette,
body.page-menu-digital .cream-radial-light {
  display: none !important;
}

/* ────── BG cream gradient marca ────── */
.interactive-menu--cream {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(200, 169, 110, 0.14), transparent 32%),
    radial-gradient(circle at 90% 85%, rgba(72, 110, 99, 0.08), transparent 40%),
    linear-gradient(180deg, #F5F0E8 0%, #EEE6D9 100%);
  color: #1d1a16;
  position: relative;
  overflow: hidden;
}

.interactive-menu--cream::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
}

/* ────── HEADER ────── */
body.page-menu-digital .menu-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: clamp(20px, 2.5vh, 32px) clamp(24px, 3vw, 48px);
  position: relative;
  z-index: 5;
  background: transparent;
  border: 0;
  pointer-events: auto;
}

body.page-menu-digital .menu-burger {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(29, 26, 22, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s;
}

body.page-menu-digital .menu-burger span {
  display: block;
  width: 18px;
  height: 1.2px;
  background: #1d1a16;
  transition: all 0.3s;
}

body.page-menu-digital .menu-burger:hover {
  border-color: #C8A96E;
  background: rgba(200, 169, 110, 0.08);
}

body.page-menu-digital .menu-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  align-items: flex-start;
  justify-self: start;
}

body.page-menu-digital .menu-brand-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1d1a16;
}

body.page-menu-digital .menu-brand-sub {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #C8A96E;
}

body.page-menu-digital .menu-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

body.page-menu-digital .menu-intro-eyebrow {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(13px, 1.1vw, 17px);
  color: #1d1a16;
  letter-spacing: 0.005em;
}

body.page-menu-digital .menu-intro-help {
  font-family: var(--f-body);
  font-size: 11px;
  color: rgba(29, 26, 22, 0.55);
  letter-spacing: 0.04em;
}

/* ────── SHELL grid 12 cols editorial ────── */
body.page-menu-digital .menu-shell {
  padding: 0 clamp(24px, 3vw, 48px) clamp(28px, 4vh, 48px);
  position: relative;
  z-index: 4;
}

body.page-menu-digital .menu-card-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(min-content, max-content);
  gap: clamp(10px, 1vw, 16px);
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}

/* ────── CARDS BASE ────── */
body.page-menu-digital .menu-card {
  position: relative;
  min-height: clamp(140px, 18vh, 200px);
  border-radius: clamp(14px, 1.1vw, 20px);
  overflow: hidden;
  border: 1px solid rgba(29, 26, 22, 0.10);
  background: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 1px 2px rgba(31, 25, 18, 0.05),
    0 16px 44px rgba(31, 25, 18, 0.10);
  isolation: isolate;
  text-decoration: none;
  color: #FFFFFF;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  display: block;
  text-align: left;
  padding: 0;
  font-family: var(--f-body);
  -webkit-tap-highlight-color: transparent;
}

/* Spans grid editorial */
body.page-menu-digital .menu-card--featured {
  grid-column: span 6;
  grid-row: span 2;
  min-height: clamp(280px, 38vh, 420px);
}

body.page-menu-digital .menu-card--tall {
  grid-column: span 3;
  grid-row: span 2;
  min-height: clamp(280px, 38vh, 420px);
}

body.page-menu-digital .menu-card--top,
body.page-menu-digital .menu-card--bot {
  grid-column: span 3;
  grid-row: span 1;
  min-height: clamp(135px, 18vh, 200px);
}

body.page-menu-digital .menu-card--wide {
  grid-column: span 6;
}

body.page-menu-digital .menu-card--compact {
  grid-column: span 3;
}

/* MEDIA layer */
body.page-menu-digital .menu-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--menu-photo);
  background-size: cover;
  background-position: var(--object-position, center);
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}

/* Overlay */
body.page-menu-digital .menu-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.62) 100%),
    radial-gradient(circle at 18% 18%, rgba(200, 169, 110, 0.20), transparent 38%);
  transition: opacity 0.4s var(--ease-out);
}

/* Variante acqua (Maquete 3D) */
body.page-menu-digital .menu-card--tone-acqua .menu-card__overlay {
  background:
    linear-gradient(180deg, rgba(20, 40, 50, 0.18) 0%, rgba(10, 25, 35, 0.78) 100%),
    radial-gradient(circle at 80% 20%, rgba(95, 168, 158, 0.32), transparent 50%);
}

/* CONTENT */
body.page-menu-digital .menu-card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: inherit;
  padding: clamp(18px, 1.6vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

/* ICONE glass top-left */
body.page-menu-digital .menu-card__icon {
  align-self: flex-start;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #FFFFFF;
  transition: all 0.35s var(--ease-out);
}

body.page-menu-digital .menu-card__icon svg { width: 16px; height: 16px; }

/* HEAD block (label + title + subtitle) bottom */
body.page-menu-digital .menu-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}

body.page-menu-digital .menu-card__label {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #C8A96E;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

body.page-menu-digital .menu-card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

body.page-menu-digital .menu-card--featured .menu-card__title { font-size: clamp(26px, 2.6vw, 38px); }
body.page-menu-digital .menu-card--tall .menu-card__title { font-size: clamp(24px, 2.4vw, 34px); }
body.page-menu-digital .menu-card--wide .menu-card__title { font-size: clamp(22px, 2.2vw, 30px); }

body.page-menu-digital .menu-card__subtitle {
  font-family: var(--f-body);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  max-width: 34ch;
  margin: 6px 0 0 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.40);
}

/* CTA com seta */
body.page-menu-digital .menu-card__cta {
  position: absolute;
  bottom: clamp(18px, 1.6vw, 26px);
  right: clamp(18px, 1.6vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 100px;
  transition: all 0.35s var(--ease-out);
  z-index: 3;
}

body.page-menu-digital .menu-card__arrow {
  font-family: var(--f-body);
  font-size: 12px;
  transition: transform 0.35s var(--ease-out);
}

body.page-menu-digital .menu-card__arrow--solo {
  position: absolute;
  bottom: clamp(18px, 1.6vw, 26px);
  right: clamp(18px, 1.6vw, 26px);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 14px;
  z-index: 3;
}

/* ────── CARDS LIGHT (sem foto) ────── */
body.page-menu-digital .menu-card--light {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(29, 26, 22, 0.10);
  color: #1d1a16;
}

body.page-menu-digital .menu-card--light .menu-card__icon {
  background: rgba(200, 169, 110, 0.10);
  border: 1px solid rgba(200, 169, 110, 0.32);
  color: #C8A96E;
  backdrop-filter: none;
}

body.page-menu-digital .menu-card--light .menu-card__label {
  color: #C8A96E;
  text-shadow: none;
}

body.page-menu-digital .menu-card--light .menu-card__title {
  color: #1d1a16;
  text-shadow: none;
}

body.page-menu-digital .menu-card--light .menu-card__subtitle {
  color: rgba(29, 26, 22, 0.62);
  text-shadow: none;
}

body.page-menu-digital .menu-card--light .menu-card__cta {
  background: #1d1a16;
  border-color: #1d1a16;
  color: #F5F0E8;
  backdrop-filter: none;
}

body.page-menu-digital .menu-card--light .menu-card__arrow--solo {
  color: #1d1a16;
  border-color: rgba(29, 26, 22, 0.20);
}

/* ────── HOVER / FOCUS / ACTIVE ────── */
body.page-menu-digital .menu-card:hover,
body.page-menu-digital .menu-card:focus-visible,
body.page-menu-digital .menu-card.is-active {
  transform: translateY(-4px);
  border-color: rgba(200, 169, 110, 0.42);
  box-shadow:
    0 4px 12px rgba(31, 25, 18, 0.10),
    0 28px 64px rgba(31, 25, 18, 0.18);
}

body.page-menu-digital .menu-card:hover .menu-card__media,
body.page-menu-digital .menu-card:focus-visible .menu-card__media,
body.page-menu-digital .menu-card.is-active .menu-card__media {
  transform: scale(1.025);
  filter: saturate(0.95) contrast(1.02);
}

body.page-menu-digital .menu-card:hover .menu-card__icon {
  background: rgba(200, 169, 110, 0.85);
  border-color: rgba(200, 169, 110, 1);
  color: #17130F;
}

body.page-menu-digital .menu-card--light:hover .menu-card__icon {
  background: #C8A96E;
  border-color: #C8A96E;
  color: #F5F0E8;
}

body.page-menu-digital .menu-card:hover .menu-card__cta,
body.page-menu-digital .menu-card:hover .menu-card__arrow--solo {
  background: rgba(200, 169, 110, 0.95);
  border-color: rgba(200, 169, 110, 1);
  color: #17130F;
}

body.page-menu-digital .menu-card--light:hover .menu-card__cta {
  background: #C8A96E;
  border-color: #C8A96E;
  color: #17130F;
}

body.page-menu-digital .menu-card:hover .menu-card__arrow,
body.page-menu-digital .menu-card.is-active .menu-card__arrow {
  transform: translateX(4px);
}

body.page-menu-digital .menu-card:focus-visible {
  outline: 2px solid #C8A96E;
  outline-offset: 3px;
}

/* ────── MENU OVERLAY (cream burger) ────── */
body.page-menu-digital .menu-overlay,
body.page-menu-digital .menu-overlay--cream {
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: clamp(20px, 3vw, 40px) clamp(24px, 3vw, 48px) clamp(24px, 3vh, 40px);
  background:
    radial-gradient(circle at 20% 10%, rgba(200, 169, 110, 0.14), transparent 32%),
    linear-gradient(180deg, #F5F0E8 0%, #EEE6D9 100%);
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.page-menu-digital .menu-overlay.is-open {
  transform: translateY(0);
}

body.page-menu-digital .menu-overlay-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(29, 26, 22, 0.10);
}

body.page-menu-digital .menu-overlay-brand {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1d1a16;
}

body.page-menu-digital .menu-overlay-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

body.page-menu-digital .menu-overlay-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: -0.005em;
  color: #1d1a16;
  margin: 0;
  text-align: center;
}

body.page-menu-digital .menu-overlay-help {
  font-family: var(--f-body);
  font-size: 11px;
  color: rgba(29, 26, 22, 0.55);
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
}

body.page-menu-digital .menu-overlay-close {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 26, 22, 0.14);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d1a16;
  cursor: pointer;
  transition: all 0.3s;
}

body.page-menu-digital .menu-overlay-close:hover {
  background: #1d1a16;
  color: #F5F0E8;
  border-color: #1d1a16;
}

body.page-menu-digital .menu-overlay-close svg { width: 16px; height: 16px; }

body.page-menu-digital .menu-overlay-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 14px);
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  align-content: start;
}

body.page-menu-digital .menu-overlay-grid .menu-card--overlay {
  grid-column: span 1 !important;
  grid-row: auto !important;
  min-height: clamp(118px, 15vh, 170px) !important;
}

body.page-menu-digital .menu-overlay-grid .menu-card--overlay.menu-card--priority {
  border-color: rgba(200, 169, 110, 0.50);
  box-shadow:
    0 1px 2px rgba(31, 25, 18, 0.06),
    0 18px 36px rgba(184, 146, 74, 0.18);
}

body.page-menu-digital .menu-overlay-grid .menu-card--overlay .menu-card__title {
  font-size: clamp(13px, 1.05vw, 16px);
}

body.page-menu-digital .menu-overlay-grid .menu-card--overlay .menu-card__subtitle {
  font-size: clamp(10px, 0.75vw, 11.5px);
  max-width: 28ch;
}

body.page-menu-digital .menu-overlay-grid .menu-card--overlay .menu-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

body.page-menu-digital .menu-overlay-grid .menu-card--overlay .menu-card__icon svg { width: 14px; height: 14px; }

body.page-menu-digital .menu-overlay-grid .menu-card--overlay .menu-card__content { padding: 14px 16px; gap: 8px; }

body.page-menu-digital .menu-overlay-grid .menu-card--overlay .menu-card__cta,
body.page-menu-digital .menu-overlay-grid .menu-card--overlay .menu-card__arrow--solo {
  display: none;
}

/* ────── ANIMAÇÃO entrada cards ────── */
@keyframes menu-card-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-menu-digital .menu-card-grid .menu-card {
  animation: menu-card-in 0.7s var(--ease-out) backwards;
}

body.page-menu-digital .menu-card-grid .menu-card:nth-child(1)  { animation-delay: 0.08s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(2)  { animation-delay: 0.12s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(3)  { animation-delay: 0.16s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(4)  { animation-delay: 0.20s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(5)  { animation-delay: 0.24s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(6)  { animation-delay: 0.28s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(7)  { animation-delay: 0.32s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(8)  { animation-delay: 0.36s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(9)  { animation-delay: 0.40s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(10) { animation-delay: 0.44s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(11) { animation-delay: 0.48s; }
body.page-menu-digital .menu-card-grid .menu-card:nth-child(12) { animation-delay: 0.52s; }

/* ────── RESPONSIVE ────── */
@media (max-width: 1280px) {
  body.page-menu-digital .menu-card--featured { grid-column: span 6; min-height: clamp(240px, 32vh, 360px); }
  body.page-menu-digital .menu-card--tall { grid-column: span 6; grid-row: span 2; min-height: clamp(220px, 30vh, 320px); }
  body.page-menu-digital .menu-card--top,
  body.page-menu-digital .menu-card--bot { grid-column: span 3; }
  body.page-menu-digital .menu-card--wide { grid-column: span 6; }
  body.page-menu-digital .menu-card--compact { grid-column: span 3; }
  body.page-menu-digital .menu-overlay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  body.page-menu-digital .menu-header { grid-template-columns: auto auto; gap: 16px; }
  body.page-menu-digital .menu-intro { display: none; }
  body.page-menu-digital .menu-card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.page-menu-digital .menu-card--featured,
  body.page-menu-digital .menu-card--wide,
  body.page-menu-digital .menu-card--tall { grid-column: span 6; grid-row: auto; min-height: 220px; }
  body.page-menu-digital .menu-card--compact,
  body.page-menu-digital .menu-card--top,
  body.page-menu-digital .menu-card--bot { grid-column: span 3; }
  body.page-menu-digital .menu-overlay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body.page-menu-digital .menu-card-grid { grid-template-columns: 1fr; }
  body.page-menu-digital .menu-card,
  body.page-menu-digital .menu-card--featured,
  body.page-menu-digital .menu-card--wide,
  body.page-menu-digital .menu-card--tall,
  body.page-menu-digital .menu-card--top,
  body.page-menu-digital .menu-card--bot,
  body.page-menu-digital .menu-card--compact { grid-column: 1 / -1; grid-row: auto; min-height: 160px; }
  body.page-menu-digital .menu-overlay-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   DESSATURAÇÃO DOURADA · imagens dos cards-botões
   Aplica nos cards menu + digital cards das seções
   ============================================================ */

/* Menu principal cards */
body.page-menu-digital .menu-card__media {
  filter: sepia(0.72) saturate(0.85) hue-rotate(-10deg) brightness(0.88) contrast(1.05) !important;
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out) !important;
}

body.page-menu-digital .menu-card:hover .menu-card__media,
body.page-menu-digital .menu-card:focus-visible .menu-card__media,
body.page-menu-digital .menu-card.is-active .menu-card__media {
  filter: sepia(0.78) saturate(1.05) hue-rotate(-10deg) brightness(0.96) contrast(1.08) !important;
  transform: scale(1.025) !important;
}

/* Variante acqua mantém tom mais frio mesmo dessaturada */
body.page-menu-digital .menu-card--tone-acqua .menu-card__media {
  filter: sepia(0.45) saturate(0.75) hue-rotate(150deg) brightness(0.78) contrast(1.10) !important;
}

body.page-menu-digital .menu-card--tone-acqua:hover .menu-card__media {
  filter: sepia(0.50) saturate(0.95) hue-rotate(150deg) brightness(0.86) contrast(1.12) !important;
}

/* Menu overlay cards */
body.page-menu-digital .menu-overlay-grid .menu-card--overlay .menu-card__media {
  filter: sepia(0.72) saturate(0.85) hue-rotate(-10deg) brightness(0.88) contrast(1.05) !important;
}

body.page-menu-digital .menu-overlay-grid .menu-card--overlay:hover .menu-card__media {
  filter: sepia(0.78) saturate(1.05) hue-rotate(-10deg) brightness(0.96) contrast(1.08) !important;
}

/* Digital cards 2026 nas seções (.sec-pilar, .sec-step, .sec-route-card, .sec-video-card) */
body.page-secao .sec-pilar::before,
body.page-secao .sec-step::before,
body.page-secao .sec-route-card::before,
body.page-secao .sec-video-card::before {
  filter: sepia(0.72) saturate(0.85) hue-rotate(-10deg) brightness(0.88) contrast(1.05) !important;
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out) !important;
}

body.page-secao .sec-pilar:hover::before,
body.page-secao .sec-step:hover::before,
body.page-secao .sec-route-card:hover::before,
body.page-secao .sec-video-card:hover::before {
  filter: sepia(0.78) saturate(1.05) hue-rotate(-10deg) brightness(0.96) contrast(1.08) !important;
  transform: scale(1.025) !important;
}


/* ============================================================
   OBJECT-POSITION individual + Maquete 3D tone partículas
   ============================================================ */

body.page-menu-digital .menu-card__media {
  background-position: var(--object-position, center) !important;
}

/* MAQUETE 3D · efeito partículas/wireframe sobre foto */
body.page-menu-digital .menu-card--tone-acqua .menu-card__media {
  filter: sepia(0.30) saturate(0.55) hue-rotate(170deg) brightness(0.55) contrast(1.35) !important;
}

body.page-menu-digital .menu-card--tone-acqua:hover .menu-card__media {
  filter: sepia(0.35) saturate(0.70) hue-rotate(170deg) brightness(0.62) contrast(1.40) !important;
  transform: scale(1.025) !important;
}

/* Adiciona overlay extra de "partículas" douradas no card maquete via radial-gradient */
body.page-menu-digital .menu-card--tone-acqua .menu-card__overlay {
  background:
    linear-gradient(180deg, rgba(10, 25, 35, 0.18) 0%, rgba(10, 25, 35, 0.78) 100%),
    radial-gradient(circle at 80% 20%, rgba(95, 168, 158, 0.32), transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(200, 169, 110, 0.18), transparent 45%),
    radial-gradient(circle at 65% 55%, rgba(255, 255, 255, 0.10), transparent 30%) !important;
}

/* Variante acqua · ajusta label "particulas" pra cor mais clara */
body.page-menu-digital .menu-card--tone-acqua .menu-card__label {
  color: #8FC5BC !important;
}


/* ============================================================
   MAQUETE 3D · tema cream igual menu (substitui dark)
   ============================================================ */

body.page-maquete-cream {
  background: #F5F0E8;
  color: #1d1a16;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

body.page-maquete-cream .maquete-header,
body.page-maquete-cream .maquete-stage,
body.page-maquete-cream .maquete-loading,
body.page-maquete-cream .maquete-error,
body.page-maquete-cream .maquete-modes,
body.page-maquete-cream .maquete-actions,
body.page-maquete-cream .maquete-hotspots,
body.page-maquete-cream .maquete-tooltip { display: none !important; }

body.page-maquete-cream .mq-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
}

body.page-maquete-cream #mq-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}

body.page-maquete-cream #mq-canvas:active { cursor: grabbing; }

/* Header cream igual menu */
body.page-maquete-cream .mq-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px clamp(20px, 2.5vw, 36px);
  background: linear-gradient(180deg, rgba(245, 240, 232, 0.96) 0%, rgba(245, 240, 232, 0.78) 70%, rgba(245, 240, 232, 0) 100%);
  pointer-events: none;
}

body.page-maquete-cream .mq-header > * { pointer-events: auto; }

body.page-maquete-cream .mq-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(29, 26, 22, 0.14);
  color: #1d1a16;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.3s;
}

body.page-maquete-cream .mq-back:hover {
  background: #1d1a16;
  color: #F5F0E8;
  border-color: #1d1a16;
}

body.page-maquete-cream .mq-back svg { width: 13px; height: 13px; }

body.page-maquete-cream .mq-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

body.page-maquete-cream .mq-brand-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1d1a16;
}

body.page-maquete-cream .mq-brand-sub {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #C8A96E;
}

body.page-maquete-cream .mq-help {
  display: flex;
  align-items: center;
  gap: 18px;
}

body.page-maquete-cream .mq-help-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(29, 26, 22, 0.55);
}

body.page-maquete-cream .mq-help-item svg { width: 14px; height: 14px; opacity: 0.7; }

/* Loading cream premium */
body.page-maquete-cream .mq-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(135deg, #F5F0E8 0%, #EEE6D9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 0.6s var(--ease-out);
}

body.page-maquete-cream .mq-loading.is-hidden { opacity: 0; pointer-events: none; }

body.page-maquete-cream .mq-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 56px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 26, 22, 0.10);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(31, 25, 18, 0.10);
  max-width: 440px;
  text-align: center;
}

body.page-maquete-cream .mq-loading-spinner {
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(184, 146, 74, 0.18);
  border-top-color: #C8A96E;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  margin-bottom: 6px;
}

body.page-maquete-cream .mq-loading-eyebrow {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #C8A96E;
}

body.page-maquete-cream .mq-loading-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  color: #1d1a16;
  text-align: center;
}

body.page-maquete-cream .mq-loading-bar {
  width: 100%;
  max-width: 240px;
  height: 3px;
  background: rgba(29, 26, 22, 0.10);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 4px;
}

body.page-maquete-cream .mq-loading-fill {
  height: 100%;
  width: 0%;
  background: #C8A96E;
  border-radius: 100px;
  transition: width 0.3s var(--ease-out);
}

@keyframes mq-loading-shimmer {
  0%   { background-position: -200% 50%; }
  100% { background-position:  200% 50%; }
}

body.page-maquete-cream .mq-loading-percent {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 14px;
  color: #1d1a16;
  letter-spacing: 0.04em;
}

body.page-maquete-cream .mq-loading-hint {
  font-family: var(--f-body);
  font-size: 11px;
  color: rgba(29, 26, 22, 0.55);
  margin-top: 4px;
  max-width: 320px;
  line-height: 1.5;
}

/* Erro card cream */
body.page-maquete-cream .mq-error {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(135deg, #F5F0E8 0%, #EEE6D9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

body.page-maquete-cream .mq-error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 56px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(184, 146, 74, 0.32);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(31, 25, 18, 0.12);
  max-width: 520px;
  text-align: center;
}

body.page-maquete-cream .mq-error-eyebrow {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #C8A96E;
  padding: 5px 12px;
  border: 1px solid rgba(184, 146, 74, 0.32);
  border-radius: 100px;
}

body.page-maquete-cream .mq-error-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  color: #1d1a16;
  margin: 4px 0 0 0;
  line-height: 1.2;
}

body.page-maquete-cream .mq-error-desc {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(29, 26, 22, 0.62);
  margin: 0;
  max-width: 380px;
}

body.page-maquete-cream .mq-error-detail {
  font-family: var(--f-body);
  font-size: 10px;
  color: rgba(29, 26, 22, 0.45);
  margin: 4px 0 0 0;
}

body.page-maquete-cream .mq-error-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

body.page-maquete-cream .mq-btn {
  padding: 12px 22px;
  background: transparent;
  border: 1px solid rgba(29, 26, 22, 0.20);
  color: #1d1a16;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
}

body.page-maquete-cream .mq-btn:hover {
  background: #1d1a16;
  color: #F5F0E8;
  border-color: #1d1a16;
}

body.page-maquete-cream .mq-btn--primary {
  background: #C8A96E;
  border-color: #C8A96E;
  color: #17130F;
}

body.page-maquete-cream .mq-btn--primary:hover {
  background: #B8924A;
  border-color: #B8924A;
  color: #17130F;
}

/* MODES bottom · cards editoriais */
body.page-maquete-cream .mq-modes {
  position: fixed;
  bottom: clamp(20px, 3vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(29, 26, 22, 0.10);
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(31, 25, 18, 0.10);
}

body.page-maquete-cream .mq-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 0;
  color: rgba(29, 26, 22, 0.55);
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s;
  min-height: 36px;
}

body.page-maquete-cream .mq-mode:hover { color: #1d1a16; }

body.page-maquete-cream .mq-mode.is-active {
  background: #1d1a16;
  color: #F5F0E8;
  font-weight: 600;
}

body.page-maquete-cream .mq-mode[data-mode="particles"].is-active {
  background: #C8A96E;
  color: #17130F;
}

body.page-maquete-cream .mq-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.page-maquete-cream .mq-mode-icon svg { width: 14px; height: 14px; }

/* ACTIONS right */
body.page-maquete-cream .mq-actions {
  position: fixed;
  right: clamp(16px, 1.8vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-maquete-cream .mq-action {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(29, 26, 22, 0.12);
  color: #1d1a16;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(31, 25, 18, 0.08);
}

body.page-maquete-cream .mq-action svg { width: 17px; height: 17px; }

body.page-maquete-cream .mq-action:hover {
  background: #1d1a16;
  color: #F5F0E8;
  border-color: #1d1a16;
}

body.page-maquete-cream .mq-action.is-active {
  background: #C8A96E;
  color: #17130F;
  border-color: #C8A96E;
}

/* Hotspots */
body.page-maquete-cream .mq-hotspots {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

body.page-maquete-cream .mq-hot {
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

body.page-maquete-cream .mq-hot-dot {
  position: absolute;
  width: 14px; height: 14px;
  background: #C8A96E;
  border: 2px solid #F5F0E8;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

body.page-maquete-cream .mq-hot-pulse {
  position: absolute;
  width: 20px; height: 20px;
  border: 1.5px solid #C8A96E;
  border-radius: 50%;
  animation: hotspot-pulse 2.4s ease-out infinite;
  opacity: 0;
}

/* Tooltip */
body.page-maquete-cream .mq-tooltip {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(184, 146, 74, 0.32);
  border-radius: 12px;
  color: #1d1a16;
  max-width: 280px;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(31, 25, 18, 0.16);
}

body.page-maquete-cream .mq-tooltip.is-shown {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 8px));
}

body.page-maquete-cream .mq-tooltip-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 14px;
  color: #C8A96E;
}

body.page-maquete-cream .mq-tooltip-desc {
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(29, 26, 22, 0.72);
}

@media (max-width: 900px) {
  body.page-maquete-cream .mq-header { grid-template-columns: auto 1fr; }
  body.page-maquete-cream .mq-help { display: none; }
  body.page-maquete-cream .mq-modes { padding: 4px; gap: 4px; }
  body.page-maquete-cream .mq-mode { padding: 8px 12px; font-size: 9px; }
}


/* ============================================================
   MENU · variante wide-priority (Disponibilidade)
   ============================================================ */

body.page-menu-digital .menu-card--wide-priority {
  grid-column: span 6;
  grid-row: span 1;
  min-height: clamp(160px, 22vh, 240px);
  border-color: rgba(200, 169, 110, 0.55) !important;
  box-shadow:
    0 1px 2px rgba(31, 25, 18, 0.06),
    0 20px 48px rgba(184, 146, 74, 0.18) !important;
}

body.page-menu-digital .menu-card--wide-priority:hover {
  border-color: var(--gold) !important;
  box-shadow:
    0 4px 12px rgba(31, 25, 18, 0.10),
    0 28px 64px rgba(184, 146, 74, 0.28) !important;
}

body.page-menu-digital .menu-card--wide-priority .menu-card__title {
  font-size: clamp(22px, 2.2vw, 30px);
}

body.page-menu-digital .menu-card--wide-priority .menu-card__cta {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #17130F !important;
}

@media (max-width: 1024px) {
  body.page-menu-digital .menu-card--wide-priority { grid-column: span 6; }
}

@media (max-width: 640px) {
  body.page-menu-digital .menu-card--wide-priority { grid-column: 1 / -1; }
}


/* ============================================================
   MENU FIT-TO-VIEWPORT 16:9 · todos os cards visíveis sem scroll
   12 cols × 3 rows · viewport completa
   Última camada · precedência sobre tudo
   ============================================================ */
body.page-menu-fit {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: transparent;
}

body.page-menu-fit .interactive-menu--fit {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  box-sizing: border-box;
  padding: clamp(14px, 1.6vw, 28px) clamp(18px, 2.2vw, 40px) clamp(14px, 1.6vw, 28px);
  background:
    radial-gradient(circle at 20% 10%, rgba(200,169,110,.14), transparent 32%),
    radial-gradient(circle at 80% 90%, rgba(95,168,158,.08), transparent 38%),
    linear-gradient(180deg, #f5f0e8 0%, #eee6d9 100%);
}

body.page-menu-fit .interactive-menu--fit::before {
  display: none !important;
}

body.page-menu-fit .menu-header--fit {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  height: clamp(48px, 6vh, 64px);
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 clamp(10px, 1.2vw, 18px) 0;
  background: transparent !important;
}

body.page-menu-fit .menu-header-left {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  min-width: 0;
}

body.page-menu-fit .menu-header-right {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
}

body.page-menu-fit .menu-burger {
  width: clamp(36px, 3vw, 44px);
  height: clamp(36px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(29, 26, 22, 0.10);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s;
  flex-shrink: 0;
}

body.page-menu-fit .menu-burger:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(200, 169, 110, 0.45);
}

body.page-menu-fit .menu-burger span {
  display: block;
  width: 18px;
  height: 1.4px;
  background: #1D1A16;
  border-radius: 2px;
}

body.page-menu-fit .menu-brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  gap: 2px;
  min-width: 0;
}

body.page-menu-fit .menu-brand-text {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #1D1A16;
  text-transform: uppercase;
}

body.page-menu-fit .menu-brand-sub {
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(9px, 0.7vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(29, 26, 22, 0.55);
}

body.page-menu-fit .menu-intro-eyebrow {
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(9px, 0.7vw, 11px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.85);
  white-space: nowrap;
}

body.page-menu-fit .menu-back-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(8px, 0.9vw, 12px) clamp(12px, 1.2vw, 18px);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 26, 22, 0.12);
  border-radius: 100px;
  color: #1D1A16;
  text-decoration: none;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all 0.25s;
  cursor: pointer;
}

body.page-menu-fit .menu-back-home:hover {
  background: #1D1A16;
  color: #F5F0E8;
  border-color: #1D1A16;
}

body.page-menu-fit .menu-back-home svg {
  width: clamp(12px, 1vw, 14px);
  height: clamp(12px, 1vw, 14px);
}

/* === GRID FIT === */
body.page-menu-fit .menu-shell--fit {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

body.page-menu-fit .menu-card-grid--fit {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(8px, 0.85vw, 14px) !important;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Linha 1 · CONHECER (4+3+3+2 = 12) */
body.page-menu-fit .menu-card--r1-hero { grid-column: span 4 !important; grid-row: 1 !important; }
body.page-menu-fit .menu-card--r1-3    { grid-column: span 3 !important; grid-row: 1 !important; }
body.page-menu-fit .menu-card--r1-2    { grid-column: span 2 !important; grid-row: 1 !important; }

/* Linha 2 · ENTENDER (3+3+3+3 = 12) */
body.page-menu-fit .menu-card--r2-3             { grid-column: span 3 !important; grid-row: 2 !important; }
body.page-menu-fit .menu-card--r2-3-priority    { grid-column: span 3 !important; grid-row: 2 !important; }

/* Linha 3 · VIVER+AVANÇAR (3+2+2+5 = 12) */
body.page-menu-fit .menu-card--r3-3           { grid-column: span 3 !important; grid-row: 3 !important; }
body.page-menu-fit .menu-card--r3-2           { grid-column: span 2 !important; grid-row: 3 !important; }
body.page-menu-fit .menu-card--r3-5-priority  { grid-column: span 5 !important; grid-row: 3 !important; }

/* === CARDS COMPACTOS === */
body.page-menu-fit .menu-card {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: clamp(10px, 0.9vw, 16px) !important;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: stretch;
  isolation: isolate;
  cursor: pointer;
  background: rgba(15, 13, 11, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s, border-color 0.3s;
  box-shadow: 0 1px 2px rgba(15, 13, 11, 0.08), 0 8px 24px rgba(15, 13, 11, 0.12);
  animation: menu-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

body.page-menu-fit .menu-card__content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(11px, 1.1vw, 18px) clamp(13px, 1.2vw, 20px);
  gap: clamp(6px, 0.7vw, 10px);
  color: #F5F0E8;
  box-sizing: border-box;
}

body.page-menu-fit .menu-card__icon {
  width: clamp(28px, 2vw, 36px);
  height: clamp(28px, 2vw, 36px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #F5F0E8;
  backdrop-filter: blur(8px);
  flex-shrink: 0;
  transition: all 0.35s;
}

body.page-menu-fit .menu-card__icon svg {
  width: clamp(13px, 1vw, 17px);
  height: clamp(13px, 1vw, 17px);
}

body.page-menu-fit .menu-card__head {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.4vw, 6px);
  min-width: 0;
}

body.page-menu-fit .menu-card__label {
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(8px, 0.62vw, 10px);
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.92);
  display: inline-block;
}

body.page-menu-fit .menu-card__title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(16px, 1.45vw, 24px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: #F5F0E8;
  margin: 0;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

body.page-menu-fit .menu-card__subtitle {
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(10px, 0.78vw, 13px);
  line-height: 1.32;
  color: rgba(245, 240, 232, 0.76);
  margin: 0;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  max-width: 36ch;
}

body.page-menu-fit .menu-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(6px, 0.7vw, 9px) clamp(11px, 1vw, 14px);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(9px, 0.72vw, 11px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F5F0E8;
  width: fit-content;
  align-self: flex-start;
  transition: all 0.35s;
  backdrop-filter: blur(8px);
}

body.page-menu-fit .menu-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.35s;
}

body.page-menu-fit .menu-card__arrow--solo {
  position: absolute;
  bottom: clamp(12px, 1.2vw, 18px);
  right: clamp(13px, 1.2vw, 20px);
  width: clamp(28px, 2.2vw, 34px);
  height: clamp(28px, 2.2vw, 34px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  z-index: 4;
}

/* Media com object-position individual */
body.page-menu-fit .menu-card__media {
  position: absolute;
  inset: 0;
  background-image: var(--menu-photo);
  background-size: cover;
  background-position: var(--object-position, center);
  background-repeat: no-repeat;
  filter: sepia(0.72) saturate(0.85) hue-rotate(-10deg) brightness(0.86) contrast(1.06);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s;
  z-index: 0;
}

body.page-menu-fit .menu-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 13, 11, 0.06) 0%, rgba(15, 13, 11, 0.40) 50%, rgba(15, 13, 11, 0.78) 100%),
    radial-gradient(circle at 20% 80%, rgba(200, 169, 110, 0.16) 0%, transparent 55%);
  z-index: 1;
}

/* Card light (sem foto) */
body.page-menu-fit .menu-card--light,
body.page-menu-fit .menu-card--no-photo {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(29, 26, 22, 0.10) !important;
}

body.page-menu-fit .menu-card--light .menu-card__title,
body.page-menu-fit .menu-card--no-photo .menu-card__title {
  color: #1D1A16 !important;
  text-shadow: none !important;
}

body.page-menu-fit .menu-card--light .menu-card__subtitle,
body.page-menu-fit .menu-card--no-photo .menu-card__subtitle {
  color: rgba(29, 26, 22, 0.62) !important;
  text-shadow: none !important;
}

body.page-menu-fit .menu-card--light .menu-card__label,
body.page-menu-fit .menu-card--no-photo .menu-card__label {
  color: #B8924A !important;
}

body.page-menu-fit .menu-card--light .menu-card__icon,
body.page-menu-fit .menu-card--no-photo .menu-card__icon {
  background: rgba(200, 169, 110, 0.14) !important;
  border-color: rgba(200, 169, 110, 0.32) !important;
  color: #92711F !important;
}

body.page-menu-fit .menu-card--light .menu-card__cta,
body.page-menu-fit .menu-card--no-photo .menu-card__cta {
  background: #1D1A16 !important;
  border-color: #1D1A16 !important;
  color: #F5F0E8 !important;
}

body.page-menu-fit .menu-card--light .menu-card__arrow--solo,
body.page-menu-fit .menu-card--no-photo .menu-card__arrow--solo {
  background: transparent !important;
  border-color: rgba(29, 26, 22, 0.18) !important;
  color: #1D1A16 !important;
}

/* Card priority (CTA forte) */
body.page-menu-fit .menu-card--r2-3-priority {
  border: 1px solid rgba(200, 169, 110, 0.45) !important;
  box-shadow: 0 4px 12px rgba(200, 169, 110, 0.10), 0 14px 36px rgba(15, 13, 11, 0.20) !important;
}

body.page-menu-fit .menu-card--r2-3-priority .menu-card__cta {
  background: rgba(200, 169, 110, 0.95) !important;
  color: #1D1A16 !important;
  border-color: rgba(200, 169, 110, 0.95) !important;
  font-weight: 600;
}

body.page-menu-fit .menu-card--r3-5-priority {
  background: linear-gradient(135deg, #1D1A16 0%, #2A2520 100%) !important;
  border: 1px solid rgba(200, 169, 110, 0.32) !important;
  box-shadow: 0 4px 12px rgba(200, 169, 110, 0.14), 0 16px 40px rgba(15, 13, 11, 0.30) !important;
}

body.page-menu-fit .menu-card--r3-5-priority .menu-card__title,
body.page-menu-fit .menu-card--r3-5-priority .menu-card__subtitle {
  color: #F5F0E8 !important;
  text-shadow: none !important;
}

body.page-menu-fit .menu-card--r3-5-priority .menu-card__label {
  color: #E5C078 !important;
}

body.page-menu-fit .menu-card--r3-5-priority .menu-card__icon {
  background: rgba(200, 169, 110, 0.18) !important;
  border-color: rgba(200, 169, 110, 0.45) !important;
  color: #E5C078 !important;
}

body.page-menu-fit .menu-card--r3-5-priority .menu-card__cta {
  background: rgba(200, 169, 110, 0.95) !important;
  color: #1D1A16 !important;
  border-color: rgba(200, 169, 110, 0.95) !important;
  font-weight: 600;
}

/* Card tone-acqua (Maquete 3D · partículas/wireframe vibe) */
body.page-menu-fit .menu-card--tone-acqua .menu-card__media {
  filter: sepia(0.30) saturate(0.55) hue-rotate(170deg) brightness(0.50) contrast(1.40);
}

body.page-menu-fit .menu-card--tone-acqua .menu-card__overlay {
  background:
    radial-gradient(circle at 80% 20%, rgba(143, 197, 188, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(200, 169, 110, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 65% 55%, rgba(255, 255, 255, 0.10) 0%, transparent 30%),
    linear-gradient(180deg, rgba(15, 13, 11, 0.30) 0%, rgba(15, 13, 11, 0.78) 100%) !important;
}

body.page-menu-fit .menu-card--tone-acqua .menu-card__label {
  color: #8FC5BC !important;
}

/* Hero (r1-hero) com título maior */
body.page-menu-fit .menu-card--r1-hero .menu-card__title {
  font-size: clamp(20px, 1.85vw, 32px);
}

body.page-menu-fit .menu-card--r3-5-priority .menu-card__title {
  font-size: clamp(20px, 1.85vw, 30px);
}

/* Hover/Touch states */
body.page-menu-fit .menu-card:hover,
body.page-menu-fit .menu-card.is-active,
body.page-menu-fit .menu-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(200, 169, 110, 0.55);
  box-shadow: 0 6px 16px rgba(15, 13, 11, 0.12), 0 22px 50px rgba(15, 13, 11, 0.22);
}

body.page-menu-fit .menu-card:hover .menu-card__media {
  transform: scale(1.025);
  filter: sepia(0.78) saturate(1.0) brightness(0.92) contrast(1.10);
}

body.page-menu-fit .menu-card:hover .menu-card__cta,
body.page-menu-fit .menu-card:hover .menu-card__arrow--solo {
  background: rgba(200, 169, 110, 0.95) !important;
  color: #17130F !important;
  border-color: rgba(200, 169, 110, 0.95) !important;
}

body.page-menu-fit .menu-card:hover .menu-card__icon {
  background: rgba(200, 169, 110, 0.92) !important;
  border-color: rgba(200, 169, 110, 0.92) !important;
  color: #17130F !important;
}

body.page-menu-fit .menu-card:focus-visible {
  outline: 2px solid rgba(200, 169, 110, 0.92);
  outline-offset: 3px;
}

/* Animação entrada stagger */
@keyframes menu-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-menu-fit .menu-card:nth-child(1)  { animation-delay: 0.04s; }
body.page-menu-fit .menu-card:nth-child(2)  { animation-delay: 0.08s; }
body.page-menu-fit .menu-card:nth-child(3)  { animation-delay: 0.12s; }
body.page-menu-fit .menu-card:nth-child(4)  { animation-delay: 0.16s; }
body.page-menu-fit .menu-card:nth-child(5)  { animation-delay: 0.20s; }
body.page-menu-fit .menu-card:nth-child(6)  { animation-delay: 0.24s; }
body.page-menu-fit .menu-card:nth-child(7)  { animation-delay: 0.28s; }
body.page-menu-fit .menu-card:nth-child(8)  { animation-delay: 0.32s; }
body.page-menu-fit .menu-card:nth-child(9)  { animation-delay: 0.36s; }
body.page-menu-fit .menu-card:nth-child(10) { animation-delay: 0.40s; }
body.page-menu-fit .menu-card:nth-child(11) { animation-delay: 0.44s; }
body.page-menu-fit .menu-card:nth-child(12) { animation-delay: 0.48s; }

/* Breakpoints específicos para 16:9 */

/* 1366×768 e 1280×720 (totem reduzido) */
@media (max-height: 800px) {
  body.page-menu-fit .interactive-menu--fit {
    padding: 14px 22px 14px;
  }
  body.page-menu-fit .menu-header--fit {
    height: 46px;
    margin: 0 0 10px 0;
  }
  body.page-menu-fit .menu-card-grid--fit {
    gap: 8px !important;
  }
  body.page-menu-fit .menu-card__content {
    padding: 12px 14px;
    gap: 6px;
  }
  body.page-menu-fit .menu-card__title {
    font-size: clamp(15px, 1.4vw, 21px);
  }
  body.page-menu-fit .menu-card--r1-hero .menu-card__title,
  body.page-menu-fit .menu-card--r3-5-priority .menu-card__title {
    font-size: clamp(17px, 1.55vw, 24px);
  }
  body.page-menu-fit .menu-card__subtitle {
    font-size: 11px;
  }
}

/* 1280×720 muito apertado */
@media (max-height: 740px) {
  body.page-menu-fit .menu-card__subtitle {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.7em;
  }
  body.page-menu-fit .menu-card__icon {
    width: 28px;
    height: 28px;
  }
  body.page-menu-fit .menu-card__icon svg {
    width: 13px;
    height: 13px;
  }
}

/* Tablet (não totem) */
@media (max-width: 1024px) {
  body.page-menu-fit .interactive-menu--fit {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  body.page-menu-fit {
    height: auto;
    overflow: auto;
  }
  body.page-menu-fit .menu-card-grid--fit {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    gap: 10px !important;
  }
  body.page-menu-fit .menu-card--r1-hero,
  body.page-menu-fit .menu-card--r3-5-priority { grid-column: span 6 !important; }
  body.page-menu-fit .menu-card--r1-3,
  body.page-menu-fit .menu-card--r2-3,
  body.page-menu-fit .menu-card--r2-3-priority,
  body.page-menu-fit .menu-card--r3-3 { grid-column: span 3 !important; }
  body.page-menu-fit .menu-card--r1-2,
  body.page-menu-fit .menu-card--r3-2 { grid-column: span 3 !important; }
  body.page-menu-fit .menu-card { min-height: 160px !important; }
  body.page-menu-fit .menu-card { grid-row: auto !important; }
}

/* Mobile */
@media (max-width: 640px) {
  body.page-menu-fit .menu-card-grid--fit {
    grid-template-columns: 1fr !important;
  }
  body.page-menu-fit .menu-card-grid--fit > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 130px !important;
  }
  body.page-menu-fit .menu-header--fit {
    flex-wrap: wrap;
    height: auto;
    gap: 10px;
  }
  body.page-menu-fit .menu-brand-sub { display: none; }
  body.page-menu-fit .menu-intro-eyebrow { display: none; }
}

/* ============================================================
   MENU FIT v2 · Nova distribuição 12 cards · 3 linhas × 12 cols
   Camada final · override total para garantir fit em viewport
   ============================================================ */

/* Garantir que o body realmente não overflowa */
html:has(body.page-menu-fit),
body.page-menu-fit {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Wrapper principal ocupa exatamente 100vh */
body.page-menu-fit .interactive-menu--fit {
  position: fixed !important;
  inset: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100vw !important;
  min-height: 0 !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  padding: clamp(12px, 1.4vw, 24px) clamp(16px, 2vw, 36px) clamp(12px, 1.4vw, 24px) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(200,169,110,.14), transparent 32%),
    radial-gradient(circle at 80% 90%, rgba(95,168,158,.08), transparent 38%),
    linear-gradient(180deg, #f5f0e8 0%, #eee6d9 100%) !important;
}

body.page-menu-fit .menu-header--fit {
  height: clamp(46px, 5.5vh, 60px) !important;
  min-height: 0 !important;
  margin: 0 0 clamp(10px, 1.1vh, 14px) 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

body.page-menu-fit .menu-shell--fit {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  display: block !important;
}

body.page-menu-fit .menu-card-grid--fit {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(7px, 0.75vw, 12px) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* === NOVAS VARIANTS (v2) === */
/* Linha 1 (4+3+2+3 = 12) */
body.page-menu-fit .menu-card--r1-4          { grid-column: span 4 !important; grid-row: 1 !important; }
body.page-menu-fit .menu-card--r1-3          { grid-column: span 3 !important; grid-row: 1 !important; }
body.page-menu-fit .menu-card--r1-2          { grid-column: span 2 !important; grid-row: 1 !important; }
body.page-menu-fit .menu-card--r1-3-priority { grid-column: span 3 !important; grid-row: 1 !important; }

/* Linha 2 (4+2+3+3 = 12) */
body.page-menu-fit .menu-card--r2-4          { grid-column: span 4 !important; grid-row: 2 !important; }
body.page-menu-fit .menu-card--r2-2          { grid-column: span 2 !important; grid-row: 2 !important; }
body.page-menu-fit .menu-card--r2-3          { grid-column: span 3 !important; grid-row: 2 !important; }
body.page-menu-fit .menu-card--r2-3-priority { grid-column: span 3 !important; grid-row: 2 !important; }

/* Linha 3 (3+3+3+3 = 12) */
body.page-menu-fit .menu-card--r3-3          { grid-column: span 3 !important; grid-row: 3 !important; }

/* Cards super-compactos */
body.page-menu-fit .menu-card {
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
}

body.page-menu-fit .menu-card__content {
  padding: clamp(10px, 0.9vw, 16px) clamp(11px, 1vw, 18px) !important;
  gap: clamp(5px, 0.55vw, 8px) !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

body.page-menu-fit .menu-card__icon {
  width: clamp(26px, 1.85vw, 32px) !important;
  height: clamp(26px, 1.85vw, 32px) !important;
}

body.page-menu-fit .menu-card__icon svg {
  width: clamp(12px, 0.9vw, 15px) !important;
  height: clamp(12px, 0.9vw, 15px) !important;
}

body.page-menu-fit .menu-card__label {
  font-size: clamp(8px, 0.6vw, 9.5px) !important;
  letter-spacing: 0.18em !important;
  margin: 0 !important;
}

body.page-menu-fit .menu-card__title {
  font-size: clamp(14px, 1.25vw, 20px) !important;
  line-height: 1.0 !important;
  margin: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance !important;
}

body.page-menu-fit .menu-card--r1-4 .menu-card__title {
  font-size: clamp(17px, 1.55vw, 26px) !important;
}

body.page-menu-fit .menu-card--r1-3-priority .menu-card__title,
body.page-menu-fit .menu-card--r2-3-priority .menu-card__title,
body.page-menu-fit .menu-card--r2-4 .menu-card__title {
  font-size: clamp(15px, 1.35vw, 22px) !important;
}

body.page-menu-fit .menu-card__subtitle {
  font-size: clamp(10px, 0.72vw, 12px) !important;
  line-height: 1.28 !important;
  margin: 0 !important;
  max-width: 30ch !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-menu-fit .menu-card__cta {
  padding: clamp(5px, 0.55vw, 7px) clamp(9px, 0.85vw, 12px) !important;
  font-size: clamp(8.5px, 0.62vw, 10px) !important;
  letter-spacing: 0.14em !important;
}

body.page-menu-fit .menu-card__arrow--solo {
  width: clamp(26px, 1.85vw, 30px) !important;
  height: clamp(26px, 1.85vw, 30px) !important;
  bottom: clamp(10px, 0.9vw, 14px) !important;
  right: clamp(11px, 1vw, 16px) !important;
}

/* Tablet (não totem) */
@media (max-width: 1024px) {
  html:has(body.page-menu-fit),
  body.page-menu-fit {
    height: auto !important;
    overflow: auto !important;
  }
  body.page-menu-fit .interactive-menu--fit {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  body.page-menu-fit .menu-card-grid--fit {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    gap: 10px !important;
  }
  body.page-menu-fit .menu-card { grid-row: auto !important; min-height: 140px !important; }
  body.page-menu-fit .menu-card--r1-4,
  body.page-menu-fit .menu-card--r2-4 { grid-column: span 6 !important; }
  body.page-menu-fit .menu-card--r1-3,
  body.page-menu-fit .menu-card--r1-3-priority,
  body.page-menu-fit .menu-card--r2-3,
  body.page-menu-fit .menu-card--r2-3-priority,
  body.page-menu-fit .menu-card--r3-3 { grid-column: span 3 !important; }
  body.page-menu-fit .menu-card--r1-2,
  body.page-menu-fit .menu-card--r2-2 { grid-column: span 3 !important; }
}

/* Mobile */
@media (max-width: 640px) {
  body.page-menu-fit .menu-card-grid--fit {
    grid-template-columns: 1fr !important;
  }
  body.page-menu-fit .menu-card-grid--fit > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 120px !important;
  }
}

/* Hide film-grain on menu fit (was adding overlay) */
body.page-menu-fit .film-grain { opacity: 0.025 !important; }

/* Garantir que outras telas .page-menu-digital antigas não conflitem */
body.page-menu-fit .menu-card-grid:not(.menu-card-grid--fit) { display: none !important; }

/* ============================================================
   OVERLAY CREAM · burger menu compacto 4×3 = 12 cards
   ============================================================ */
body.page-menu-fit .menu-overlay--cream {
  position: fixed !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(200,169,110,.14), transparent 32%),
    linear-gradient(180deg, #f5f0e8 0%, #eee6d9 100%) !important;
  z-index: 999 !important;
  display: none;
  padding: clamp(20px, 2.5vw, 36px) !important;
  flex-direction: column;
  overflow-y: auto;
}

body.page-menu-fit .menu-overlay--cream.is-open {
  display: flex !important;
}

body.page-menu-fit .menu-overlay-header {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: clamp(16px, 2vw, 32px);
  padding: 0 0 clamp(14px, 1.6vw, 22px) 0 !important;
  border-bottom: 1px solid rgba(29, 26, 22, 0.10);
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

body.page-menu-fit .menu-overlay-brand {
  font-family: 'Fraunces', serif;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1D1A16;
}

body.page-menu-fit .menu-overlay-title-wrap {
  text-align: center;
}

body.page-menu-fit .menu-overlay-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 24px);
  color: #1D1A16;
  margin: 0;
  letter-spacing: -0.005em;
}

body.page-menu-fit .menu-overlay-help {
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(9px, 0.72vw, 11px);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(29, 26, 22, 0.55);
  margin: 3px 0 0;
}

body.page-menu-fit .menu-overlay-close {
  width: clamp(36px, 3vw, 42px);
  height: clamp(36px, 3vw, 42px);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 26, 22, 0.12);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #1D1A16;
  transition: all 0.25s;
}

body.page-menu-fit .menu-overlay-close:hover {
  background: #1D1A16;
  color: #F5F0E8;
}

body.page-menu-fit .menu-overlay-close svg {
  width: clamp(14px, 1.1vw, 18px);
  height: clamp(14px, 1.1vw, 18px);
}

body.page-menu-fit .menu-overlay-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 14px) !important;
  flex: 1;
  width: min(1480px, 100%);
  margin: 0 auto;
}

body.page-menu-fit .menu-overlay-grid .menu-card--overlay {
  grid-column: span 1 !important;
  grid-row: auto !important;
  min-height: clamp(110px, 13vh, 150px) !important;
  height: auto !important;
}

body.page-menu-fit .menu-overlay-grid .menu-card--overlay .menu-card__title {
  font-size: clamp(13px, 1.1vw, 17px) !important;
}

body.page-menu-fit .menu-overlay-grid .menu-card--overlay .menu-card__subtitle {
  font-size: clamp(10px, 0.7vw, 11.5px) !important;
  -webkit-line-clamp: 2;
}

body.page-menu-fit .menu-overlay-grid .menu-card--overlay .menu-card__cta,
body.page-menu-fit .menu-overlay-grid .menu-card--overlay .menu-card__arrow--solo {
  display: none !important;
}

body.page-menu-fit .menu-overlay-grid .menu-card--overlay.menu-card--priority {
  border-color: rgba(200, 169, 110, 0.50) !important;
  box-shadow: 0 4px 14px rgba(200, 169, 110, 0.18), 0 12px 28px rgba(15, 13, 11, 0.10) !important;
}

@media (max-width: 1024px) {
  body.page-menu-fit .menu-overlay-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.page-menu-fit .menu-overlay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   MENU FIT · REMOVER TODAS AS BORDAS (pretas, douradas, claras)
   ============================================================ */
body.page-menu-fit .menu-card,
body.page-menu-fit .menu-card--light,
body.page-menu-fit .menu-card--no-photo,
body.page-menu-fit .menu-card--r1-4,
body.page-menu-fit .menu-card--r1-3,
body.page-menu-fit .menu-card--r1-2,
body.page-menu-fit .menu-card--r1-3-priority,
body.page-menu-fit .menu-card--r2-4,
body.page-menu-fit .menu-card--r2-2,
body.page-menu-fit .menu-card--r2-3,
body.page-menu-fit .menu-card--r2-3-priority,
body.page-menu-fit .menu-card--r3-3,
body.page-menu-fit .menu-card--r3-5-priority {
  border: none !important;
  outline: none !important;
}

body.page-menu-fit .menu-card:hover,
body.page-menu-fit .menu-card.is-active,
body.page-menu-fit .menu-card:focus-visible {
  border: none !important;
  outline: none !important;
}

/* Remover bordas dos ícones, CTAs, setas */
body.page-menu-fit .menu-card__icon,
body.page-menu-fit .menu-card__cta,
body.page-menu-fit .menu-card__arrow--solo,
body.page-menu-fit .menu-card--light .menu-card__icon,
body.page-menu-fit .menu-card--light .menu-card__cta,
body.page-menu-fit .menu-card--light .menu-card__arrow--solo,
body.page-menu-fit .menu-card--no-photo .menu-card__icon,
body.page-menu-fit .menu-card--no-photo .menu-card__cta,
body.page-menu-fit .menu-card--no-photo .menu-card__arrow--solo,
body.page-menu-fit .menu-card--r2-3-priority .menu-card__cta,
body.page-menu-fit .menu-card--r3-5-priority .menu-card__cta,
body.page-menu-fit .menu-card--r3-5-priority .menu-card__icon,
body.page-menu-fit .menu-card--r1-3-priority .menu-card__cta {
  border: none !important;
}

/* Hover sem bordas também */
body.page-menu-fit .menu-card:hover .menu-card__cta,
body.page-menu-fit .menu-card:hover .menu-card__arrow--solo,
body.page-menu-fit .menu-card:hover .menu-card__icon {
  border: none !important;
}

/* Header: burger e back-home sem bordas */
body.page-menu-fit .menu-burger,
body.page-menu-fit .menu-back-home {
  border: none !important;
}

body.page-menu-fit .menu-burger:hover,
body.page-menu-fit .menu-back-home:hover {
  border: none !important;
}

/* Overlay sem bordas */
body.page-menu-fit .menu-overlay-header {
  border-bottom: none !important;
}

body.page-menu-fit .menu-overlay-close {
  border: none !important;
}

body.page-menu-fit .menu-overlay-grid .menu-card--overlay,
body.page-menu-fit .menu-overlay-grid .menu-card--overlay.menu-card--priority {
  border: none !important;
}

/* Compensar a perda das bordas com sombras mais marcadas */
body.page-menu-fit .menu-card {
  box-shadow: 0 2px 6px rgba(15, 13, 11, 0.10), 0 12px 30px rgba(15, 13, 11, 0.16) !important;
}

body.page-menu-fit .menu-card:hover,
body.page-menu-fit .menu-card.is-active,
body.page-menu-fit .menu-card:focus-visible {
  box-shadow: 0 4px 10px rgba(15, 13, 11, 0.14), 0 18px 40px rgba(15, 13, 11, 0.22) !important;
}

body.page-menu-fit .menu-card--r2-3-priority,
body.page-menu-fit .menu-card--r1-3-priority {
  box-shadow: 0 4px 12px rgba(200, 169, 110, 0.18), 0 16px 36px rgba(15, 13, 11, 0.16) !important;
}

body.page-menu-fit .menu-card--r3-5-priority {
  box-shadow: 0 4px 12px rgba(200, 169, 110, 0.22), 0 18px 42px rgba(15, 13, 11, 0.28) !important;
}

/* Focus-visible com sombra dourada em vez de outline */
body.page-menu-fit .menu-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.40), 0 4px 10px rgba(15, 13, 11, 0.14), 0 18px 40px rgba(15, 13, 11, 0.22) !important;
}

/* Remover qualquer linha de divisor remanescente */
body.page-menu-fit .menu-overlay-header > * {
  border: none !important;
}

/* ============================================================
   IMAGENS ORIGINAIS · remover dessaturação sépia/dourado
   ============================================================ */
body.page-menu-fit .menu-card__media,
body.page-menu-fit .menu-card--tone-acqua .menu-card__media {
  filter: none !important;
}

body.page-menu-fit .menu-card:hover .menu-card__media,
body.page-menu-fit .menu-card.is-active .menu-card__media,
body.page-menu-fit .menu-card--tone-acqua:hover .menu-card__media {
  filter: none !important;
  transform: scale(1.025) !important;
}

/* Overlay um pouco mais leve já que a imagem fica colorida */
body.page-menu-fit .menu-card__overlay {
  background:
    linear-gradient(180deg, rgba(15, 13, 11, 0.10) 0%, rgba(15, 13, 11, 0.45) 55%, rgba(15, 13, 11, 0.80) 100%) !important;
}

/* Mantém overlay diferenciado pro tone-acqua (Maquete 3D) mas sem filtrar a foto */
body.page-menu-fit .menu-card--tone-acqua .menu-card__overlay {
  background:
    radial-gradient(circle at 80% 20%, rgba(143, 197, 188, 0.16) 0%, transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(200, 169, 110, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, rgba(15, 13, 11, 0.18) 0%, rgba(15, 13, 11, 0.55) 55%, rgba(15, 13, 11, 0.82) 100%) !important;
}

/* Aplicar mesmo tratamento nas seções (que tinham filtro sépia também) */
body.page-secao .sec-pilar::before,
body.page-secao .sec-step::before,
body.page-secao .sec-route-card::before,
body.page-secao .sec-video-card::before {
  filter: none !important;
}

body.page-secao .sec-pilar:hover::before,
body.page-secao .sec-step:hover::before,
body.page-secao .sec-route-card:hover::before,
body.page-secao .sec-video-card:hover::before {
  filter: none !important;
}

/* ============================================================
   MAQUETE · responsivo total · todos os controles em qualquer device
   ============================================================ */

/* Garantir que TODOS os controles estão visíveis em qualquer tela */
body.page-maquete-cream .mq-modes,
body.page-maquete-cream .mq-actions,
body.page-maquete-cream .mq-header,
body.page-maquete-cream .mq-hotspots {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Modes pill com scroll horizontal se necessário (último resort) */
body.page-maquete-cream .mq-modes {
  max-width: calc(100vw - 32px);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.page-maquete-cream .mq-modes::-webkit-scrollbar { display: none; }

body.page-maquete-cream .mq-mode {
  flex-shrink: 0;
}

/* Tablet & laptop pequeno (1024px) · ainda mostra labels */
@media (max-width: 1024px) {
  body.page-maquete-cream .mq-help { display: none !important; }
  body.page-maquete-cream .mq-modes { padding: 5px; gap: 4px; }
  body.page-maquete-cream .mq-mode { padding: 9px 14px; font-size: 9.5px; letter-spacing: 0.18em; }
  body.page-maquete-cream .mq-action { width: 40px; height: 40px; }
  body.page-maquete-cream .mq-action svg { width: 16px; height: 16px; }
}

/* Mobile landscape & tablets pequenos (≤768px) */
@media (max-width: 768px) {
  body.page-maquete-cream .mq-header {
    grid-template-columns: auto 1fr !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  body.page-maquete-cream .mq-back {
    padding: 8px 12px;
    font-size: 10px;
  }
  body.page-maquete-cream .mq-brand-sub { display: none; }
  body.page-maquete-cream .mq-brand-text { font-size: 13px; }

  /* Modes: pill compacto · só ícones + labels curtos */
  body.page-maquete-cream .mq-modes {
    bottom: 18px;
    padding: 4px;
    gap: 3px;
    max-width: calc(100vw - 24px);
  }
  body.page-maquete-cream .mq-mode {
    padding: 8px 11px;
    font-size: 8.5px;
    letter-spacing: 0.14em;
    min-height: 34px;
  }
  body.page-maquete-cream .mq-mode-label {
    /* Mantém label visível mas em fonte mínima */
  }
  body.page-maquete-cream .mq-mode-icon svg { width: 13px; height: 13px; }

  /* Actions: vai pra canto inferior direito horizontal */
  body.page-maquete-cream .mq-actions {
    top: auto !important;
    right: 16px !important;
    bottom: 78px !important;
    transform: none !important;
    flex-direction: row !important;
    gap: 6px !important;
  }
  body.page-maquete-cream .mq-action {
    width: 38px;
    height: 38px;
  }
  body.page-maquete-cream .mq-action svg { width: 15px; height: 15px; }
}

/* Mobile portrait & devices estreitos (≤520px) */
@media (max-width: 520px) {
  body.page-maquete-cream .mq-header {
    padding: 10px 12px !important;
  }
  body.page-maquete-cream .mq-back span {
    /* Esconde só o texto, mantém ícone seta */
    display: none;
  }
  body.page-maquete-cream .mq-back {
    padding: 8px;
    width: 36px;
    height: 36px;
    justify-content: center;
  }
  body.page-maquete-cream .mq-brand {
    text-align: center;
  }
  body.page-maquete-cream .mq-brand-text {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  /* Modes: esconde labels, mostra só ícones em estado normal · label só no ativo */
  body.page-maquete-cream .mq-modes {
    bottom: 14px;
    padding: 3px;
    gap: 2px;
  }
  body.page-maquete-cream .mq-mode {
    padding: 7px 9px;
    gap: 0;
  }
  body.page-maquete-cream .mq-mode-label {
    display: none;
  }
  body.page-maquete-cream .mq-mode.is-active .mq-mode-label {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
  }
  body.page-maquete-cream .mq-mode-icon svg { width: 15px; height: 15px; }

  body.page-maquete-cream .mq-actions {
    bottom: 64px !important;
    right: 12px !important;
    gap: 5px !important;
  }
  body.page-maquete-cream .mq-action {
    width: 36px;
    height: 36px;
  }
  body.page-maquete-cream .mq-action svg { width: 14px; height: 14px; }
}

/* Devices muito estreitos (≤380px) */
@media (max-width: 380px) {
  body.page-maquete-cream .mq-modes {
    padding: 3px;
    gap: 1px;
  }
  body.page-maquete-cream .mq-mode {
    padding: 6px 8px;
  }
  body.page-maquete-cream .mq-mode-icon svg { width: 14px; height: 14px; }
  body.page-maquete-cream .mq-action {
    width: 34px;
    height: 34px;
  }
}

/* Tela muito baixa landscape (max-height: 480px) */
@media (max-height: 480px) {
  body.page-maquete-cream .mq-header {
    padding: 8px 16px !important;
  }
  body.page-maquete-cream .mq-modes {
    bottom: 10px;
    padding: 3px;
  }
  body.page-maquete-cream .mq-mode {
    padding: 6px 12px;
    min-height: 30px;
  }
  body.page-maquete-cream .mq-actions {
    top: 60px !important;
    bottom: auto !important;
    right: 12px !important;
    transform: none !important;
    flex-direction: column !important;
  }
  body.page-maquete-cream .mq-action {
    width: 34px;
    height: 34px;
  }
}

/* Tooltip sempre dentro do viewport */
body.page-maquete-cream .mq-tooltip {
  max-width: calc(100vw - 32px);
  word-break: normal;
  overflow-wrap: normal;
}

@media (max-width: 520px) {
  body.page-maquete-cream .mq-tooltip {
    max-width: 220px;
    font-size: 11px;
  }
}

/* Hotspots não ocupam fora da tela */
body.page-maquete-cream .mq-hotspots {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

body.page-maquete-cream .mq-hot {
  pointer-events: auto;
  position: absolute;
}

/* Loading/error responsivos */
@media (max-width: 520px) {
  body.page-maquete-cream .mq-loading-card,
  body.page-maquete-cream .mq-error-card {
    max-width: calc(100vw - 32px);
    padding: 24px;
  }
  body.page-maquete-cream .mq-loading-title,
  body.page-maquete-cream .mq-error-title {
    font-size: 17px;
  }
  body.page-maquete-cream .mq-error-actions {
    flex-direction: column;
    gap: 8px;
  }
  body.page-maquete-cream .mq-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Force fullscreen support */
body.page-maquete-cream:fullscreen {
  background: #0F0A05;
}
body.page-maquete-cream:fullscreen .mq-modes,
body.page-maquete-cream:fullscreen .mq-actions,
body.page-maquete-cream:fullscreen .mq-header {
  display: flex !important;
}

/* Touch tap highlight remove */
body.page-maquete-cream * {
  -webkit-tap-highlight-color: transparent;
}

/* Safe area inset (iPhone notch) */
@supports (padding: max(0px)) {
  body.page-maquete-cream .mq-header {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  body.page-maquete-cream .mq-modes {
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* ============================================================
   MENU FIT v3 · 4 LINHAS × 12 COLS · 16 cards · sem sobreposição
   Camada definitiva
   ============================================================ */

body.page-menu-fit .menu-card-grid--fit {
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
}

/* Linha 1 (igual antes) */
body.page-menu-fit .menu-card--r1-4          { grid-column: span 4 !important; grid-row: 1 !important; }
body.page-menu-fit .menu-card--r1-3          { grid-column: span 3 !important; grid-row: 1 !important; }
body.page-menu-fit .menu-card--r1-2          { grid-column: span 2 !important; grid-row: 1 !important; }
body.page-menu-fit .menu-card--r1-3-priority { grid-column: span 3 !important; grid-row: 1 !important; }

/* Linha 2 (3+3+3+3) */
body.page-menu-fit .menu-card--r2-3          { grid-column: span 3 !important; grid-row: 2 !important; }
body.page-menu-fit .menu-card--r2-3-priority { grid-column: span 3 !important; grid-row: 2 !important; }
body.page-menu-fit .menu-card--r2-4          { grid-column: span 4 !important; grid-row: 2 !important; }
body.page-menu-fit .menu-card--r2-2          { grid-column: span 2 !important; grid-row: 2 !important; }

/* Linha 3 (3+3+3+3) — Simular/Comparar/Investir/Localizar */
body.page-menu-fit .menu-card--r3-3          { grid-column: span 3 !important; grid-row: 3 !important; }
body.page-menu-fit .menu-card--r3-3-priority { grid-column: span 3 !important; grid-row: 3 !important; }

/* Linha 4 (3+3+2+2+2) — Viver */
body.page-menu-fit .menu-card--r4-3          { grid-column: span 3 !important; grid-row: 4 !important; }
body.page-menu-fit .menu-card--r4-2          { grid-column: span 2 !important; grid-row: 4 !important; }

/* Cards mais compactos para caber 4 linhas */
body.page-menu-fit .menu-card__content {
  padding: clamp(8px, 0.75vw, 14px) clamp(10px, 0.9vw, 16px) !important;
  gap: clamp(4px, 0.45vw, 7px) !important;
}

body.page-menu-fit .menu-card__icon {
  width: clamp(22px, 1.6vw, 28px) !important;
  height: clamp(22px, 1.6vw, 28px) !important;
}

body.page-menu-fit .menu-card__icon svg {
  width: clamp(11px, 0.78vw, 14px) !important;
  height: clamp(11px, 0.78vw, 14px) !important;
}

body.page-menu-fit .menu-card__label {
  font-size: clamp(7px, 0.55vw, 9px) !important;
  letter-spacing: 0.16em !important;
}

body.page-menu-fit .menu-card__title {
  font-size: clamp(12px, 1.05vw, 17px) !important;
  line-height: 1.0 !important;
}

body.page-menu-fit .menu-card--r1-4 .menu-card__title {
  font-size: clamp(14px, 1.25vw, 21px) !important;
}

body.page-menu-fit .menu-card--r1-3-priority .menu-card__title,
body.page-menu-fit .menu-card--r2-3-priority .menu-card__title,
body.page-menu-fit .menu-card--r3-3-priority .menu-card__title {
  font-size: clamp(13px, 1.15vw, 19px) !important;
}

body.page-menu-fit .menu-card__subtitle {
  font-size: clamp(9px, 0.65vw, 11px) !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2;
  max-width: 30ch !important;
}

body.page-menu-fit .menu-card__cta {
  padding: clamp(4px, 0.45vw, 6px) clamp(8px, 0.75vw, 11px) !important;
  font-size: clamp(8px, 0.58vw, 9.5px) !important;
  letter-spacing: 0.12em !important;
}

body.page-menu-fit .menu-card__arrow--solo {
  width: clamp(22px, 1.6vw, 28px) !important;
  height: clamp(22px, 1.6vw, 28px) !important;
  bottom: clamp(8px, 0.75vw, 12px) !important;
  right: clamp(10px, 0.9vw, 14px) !important;
}

/* Header ainda mais compacto (sobrou menos espaço com 4 linhas) */
body.page-menu-fit .menu-header--fit {
  height: clamp(42px, 5vh, 54px) !important;
  margin: 0 0 clamp(8px, 0.9vh, 12px) 0 !important;
}

body.page-menu-fit .interactive-menu--fit {
  padding: clamp(10px, 1.2vw, 20px) clamp(14px, 1.8vw, 32px) clamp(10px, 1.2vw, 20px) !important;
}

/* Cards animação stagger até 16 */
body.page-menu-fit .menu-card:nth-child(1)  { animation-delay: 0.04s; }
body.page-menu-fit .menu-card:nth-child(2)  { animation-delay: 0.07s; }
body.page-menu-fit .menu-card:nth-child(3)  { animation-delay: 0.10s; }
body.page-menu-fit .menu-card:nth-child(4)  { animation-delay: 0.13s; }
body.page-menu-fit .menu-card:nth-child(5)  { animation-delay: 0.16s; }
body.page-menu-fit .menu-card:nth-child(6)  { animation-delay: 0.19s; }
body.page-menu-fit .menu-card:nth-child(7)  { animation-delay: 0.22s; }
body.page-menu-fit .menu-card:nth-child(8)  { animation-delay: 0.25s; }
body.page-menu-fit .menu-card:nth-child(9)  { animation-delay: 0.28s; }
body.page-menu-fit .menu-card:nth-child(10) { animation-delay: 0.31s; }
body.page-menu-fit .menu-card:nth-child(11) { animation-delay: 0.34s; }
body.page-menu-fit .menu-card:nth-child(12) { animation-delay: 0.37s; }
body.page-menu-fit .menu-card:nth-child(13) { animation-delay: 0.40s; }
body.page-menu-fit .menu-card:nth-child(14) { animation-delay: 0.43s; }
body.page-menu-fit .menu-card:nth-child(15) { animation-delay: 0.46s; }
body.page-menu-fit .menu-card:nth-child(16) { animation-delay: 0.49s; }

/* Priority card (Calculadora) na linha 3 */
body.page-menu-fit .menu-card--r3-3-priority {
  background: linear-gradient(135deg, #1D1A16 0%, #2A2520 100%) !important;
}

body.page-menu-fit .menu-card--r3-3-priority .menu-card__title,
body.page-menu-fit .menu-card--r3-3-priority .menu-card__subtitle {
  color: #F5F0E8 !important;
  text-shadow: none !important;
}

body.page-menu-fit .menu-card--r3-3-priority .menu-card__label {
  color: #E5C078 !important;
}

body.page-menu-fit .menu-card--r3-3-priority .menu-card__icon {
  background: rgba(200, 169, 110, 0.18) !important;
  color: #E5C078 !important;
}

body.page-menu-fit .menu-card--r3-3-priority .menu-card__cta {
  background: rgba(200, 169, 110, 0.95) !important;
  color: #1D1A16 !important;
  font-weight: 600 !important;
}

/* Tablet (max-width 1024px) com 4 linhas vira layout vertical */
@media (max-width: 1024px) {
  body.page-menu-fit .menu-card-grid--fit {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    gap: 10px !important;
  }
  body.page-menu-fit .menu-card { grid-row: auto !important; min-height: 130px !important; }
  body.page-menu-fit .menu-card--r1-4,
  body.page-menu-fit .menu-card--r2-4 { grid-column: span 6 !important; }
  body.page-menu-fit .menu-card--r1-3,
  body.page-menu-fit .menu-card--r1-3-priority,
  body.page-menu-fit .menu-card--r2-3,
  body.page-menu-fit .menu-card--r2-3-priority,
  body.page-menu-fit .menu-card--r3-3,
  body.page-menu-fit .menu-card--r3-3-priority,
  body.page-menu-fit .menu-card--r4-3 { grid-column: span 3 !important; }
  body.page-menu-fit .menu-card--r1-2,
  body.page-menu-fit .menu-card--r2-2,
  body.page-menu-fit .menu-card--r4-2 { grid-column: span 2 !important; }
}

@media (max-width: 640px) {
  body.page-menu-fit .menu-card-grid--fit { grid-template-columns: 1fr !important; }
  body.page-menu-fit .menu-card-grid--fit > * {
    grid-column: 1 !important; grid-row: auto !important; min-height: 110px !important;
  }
}

/* Viewport baixo: deixa scroll vertical pra não sobrepor */
@media (max-height: 700px) {
  body.page-menu-fit,
  html:has(body.page-menu-fit) {
    height: auto !important;
    overflow: auto !important;
  }
  body.page-menu-fit .interactive-menu--fit {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  body.page-menu-fit .menu-card-grid--fit {
    height: auto !important;
    grid-auto-rows: minmax(120px, auto) !important;
  }
}

/* ============================================================
   FIT v4 · Layout reorganizado · 4 linhas narrativas coerentes
   L1: 4+3+2+3 = 12  · L2: 3+3+3+3 = 12
   L3: 3+3+3+3 = 12  · L4: 3+2+2+2+3 = 12
   ============================================================ */

/* Linha 4 · novos spans (3+2+2+2+3) */
body.page-menu-fit .menu-card--r4-3 { grid-column: span 3 !important; grid-row: 4 !important; }
body.page-menu-fit .menu-card--r4-2 { grid-column: span 2 !important; grid-row: 4 !important; }
body.page-menu-fit .menu-card--r4-3-priority { grid-column: span 3 !important; grid-row: 4 !important; }

/* Card priority na linha 4 (CONSULTOR) · mesmo tratamento que r3-priority */
body.page-menu-fit .menu-card--r4-3-priority {
  background: linear-gradient(135deg, #1D1A16 0%, #2A2520 100%) !important;
  box-shadow: 0 4px 12px rgba(200, 169, 110, 0.22), 0 18px 42px rgba(15, 13, 11, 0.28) !important;
}

body.page-menu-fit .menu-card--r4-3-priority .menu-card__title,
body.page-menu-fit .menu-card--r4-3-priority .menu-card__subtitle {
  color: #F5F0E8 !important;
  text-shadow: none !important;
}

body.page-menu-fit .menu-card--r4-3-priority .menu-card__label {
  color: #E5C078 !important;
}

body.page-menu-fit .menu-card--r4-3-priority .menu-card__icon {
  background: rgba(200, 169, 110, 0.18) !important;
  color: #E5C078 !important;
}

body.page-menu-fit .menu-card--r4-3-priority .menu-card__cta {
  background: rgba(200, 169, 110, 0.95) !important;
  color: #1D1A16 !important;
  font-weight: 600 !important;
}

/* Hierarquia tipográfica dos hero/priority */
body.page-menu-fit .menu-card--r4-3-priority .menu-card__title {
  font-size: clamp(13px, 1.15vw, 19px) !important;
}

/* Linha 3 sem mais r3-3-priority (movido pra linha 2 e 4) */
/* Mantém r3-3 + r3-3-priority compatível pra caso de reorganização */

/* Tablet · linha 4 vira 6 cols com cards 3+3+3+3+3 = 15 (extra wraps) */
@media (max-width: 1024px) {
  body.page-menu-fit .menu-card--r4-3,
  body.page-menu-fit .menu-card--r4-3-priority { grid-column: span 3 !important; }
  body.page-menu-fit .menu-card--r4-2 { grid-column: span 2 !important; }
}

@media (max-width: 640px) {
  body.page-menu-fit .menu-card--r4-3,
  body.page-menu-fit .menu-card--r4-3-priority,
  body.page-menu-fit .menu-card--r4-2 { grid-column: 1 !important; }
}

/* === Refinos visuais · evitar sobreposição/visual heavy === */

/* Linha 1 hero (Projeto) · título maior para diferenciação */
body.page-menu-fit .menu-card--r1-4 .menu-card__title {
  font-size: clamp(15px, 1.4vw, 23px) !important;
  line-height: 0.98 !important;
}

body.page-menu-fit .menu-card--r1-4 .menu-card__subtitle {
  -webkit-line-clamp: 2;
  font-size: clamp(11px, 0.78vw, 13px) !important;
}

/* Cards span 2 (mais compactos · INCORPORADOR antes, agora LOCALIZAÇÃO + GALERIA/VIDEOS/LAZER) */
body.page-menu-fit .menu-card--r1-2,
body.page-menu-fit .menu-card--r4-2 {
  /* Span menor · título compacto */
}

body.page-menu-fit .menu-card--r1-2 .menu-card__title,
body.page-menu-fit .menu-card--r4-2 .menu-card__title {
  font-size: clamp(11px, 0.95vw, 15px) !important;
}

body.page-menu-fit .menu-card--r1-2 .menu-card__subtitle,
body.page-menu-fit .menu-card--r4-2 .menu-card__subtitle {
  -webkit-line-clamp: 1;
  font-size: clamp(8.5px, 0.6vw, 10px) !important;
}

body.page-menu-fit .menu-card--r1-2 .menu-card__icon,
body.page-menu-fit .menu-card--r4-2 .menu-card__icon {
  width: clamp(20px, 1.4vw, 24px) !important;
  height: clamp(20px, 1.4vw, 24px) !important;
}

body.page-menu-fit .menu-card--r1-2 .menu-card__icon svg,
body.page-menu-fit .menu-card--r4-2 .menu-card__icon svg {
  width: clamp(10px, 0.7vw, 12px) !important;
  height: clamp(10px, 0.7vw, 12px) !important;
}

/* Z-index hierárquico · prioridade gold sempre acima */
body.page-menu-fit .menu-card--r1-3-priority,
body.page-menu-fit .menu-card--r2-3-priority,
body.page-menu-fit .menu-card--r3-3-priority,
body.page-menu-fit .menu-card--r4-3-priority {
  z-index: 3;
}

body.page-menu-fit .menu-card { z-index: 1; }
body.page-menu-fit .menu-card:hover { z-index: 4; }

/* ============================================================
   FIT v5 · Eliminar respiro vazio à direita
   Grid 100% da largura disponível · sem max-width central
   ============================================================ */
body.page-menu-fit .menu-shell--fit,
body.page-menu-fit .menu-card-grid--fit {
  max-width: none !important;
  width: 100% !important;
  justify-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Linha 1 reforço: cards span = 12 exato (sem fracionamento) */
body.page-menu-fit .menu-card-grid--fit > .menu-card {
  min-width: 0 !important;
  width: 100% !important;
}

/* Comparativo card-incorporador hover preserva visual */
body.page-menu-fit .menu-card[data-id="incorporador"] .menu-card__overlay {
  background:
    linear-gradient(180deg, rgba(15, 13, 11, 0.18) 0%, rgba(15, 13, 11, 0.55) 50%, rgba(15, 13, 11, 0.85) 100%) !important;
}

/* ============================================================
   AUDIT FIX · Cards de etapa/processo/lista
   Reseta TODOS os layers conflitantes (wood + digital + saas + bolinha)
   ============================================================ */

/* ─── REMOVE pseudo-elements órfãos que criam bolinhas pretas soltas ─── */
body.page-secao .sec-step::before,
body.page-secao .sec-step::after,
body.page-secao .sec-pilar::before,
body.page-secao .sec-pilar::after,
body.page-secao .sec-route-card::before,
body.page-secao .sec-route-card::after,
body.page-secao .sec-video-card::before,
body.page-secao .sec-video-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ─── STEP CARD · LIMPO E LEGÍVEL ─── */
body.page-secao .sec-steps {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.2vw, 20px) !important;
  margin-top: 24px;
}

body.page-secao .sec-step {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  min-height: clamp(200px, 26vh, 280px) !important;
  height: auto !important;
  padding: clamp(20px, 2vw, 28px) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(29, 26, 22, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 50px rgba(31, 25, 18, 0.08), 0 2px 6px rgba(31, 25, 18, 0.04) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  text-align: left !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

body.page-secao .sec-step:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(200, 169, 110, 0.38) !important;
  box-shadow: 0 24px 60px rgba(31, 25, 18, 0.14), 0 4px 10px rgba(31, 25, 18, 0.08) !important;
}

body.page-secao .sec-step-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: #C8A96E !important;
  color: #1D1A16 !important;
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 18px 0 !important;
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  border: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  /* Apaga decorações vindas de outros estilos */
  text-shadow: none !important;
  filter: none !important;
}

body.page-secao .sec-step-num::before,
body.page-secao .sec-step-num::after { content: none !important; display: none !important; }

body.page-secao .sec-step-title {
  font-family: 'Fraunces', serif !important;
  font-weight: 300 !important;
  font-size: clamp(20px, 1.7vw, 28px) !important;
  line-height: 1.05 !important;
  color: #1D1A16 !important;
  margin: 0 0 12px 0 !important;
  text-wrap: balance;
  word-break: normal;
  hyphens: none;
  position: relative;
  z-index: 2;
  text-shadow: none !important;
}

body.page-secao .sec-step-title em {
  font-style: italic !important;
  color: #92711F !important;
  font-weight: 400 !important;
}

body.page-secao .sec-step-desc {
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: clamp(13px, 0.92vw, 15px) !important;
  line-height: 1.5 !important;
  color: rgba(29, 26, 22, 0.68) !important;
  margin: 0 !important;
  text-align: left !important;
  position: relative;
  z-index: 2;
  text-shadow: none !important;
}

/* ─── PILAR CARD · mesmo padrão limpo ─── */
body.page-secao .sec-pilares {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.2vw, 20px) !important;
}

body.page-secao .sec-pilar {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: clamp(200px, 26vh, 280px) !important;
  height: auto !important;
  padding: clamp(20px, 2vw, 28px) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(29, 26, 22, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 50px rgba(31, 25, 18, 0.08), 0 2px 6px rgba(31, 25, 18, 0.04) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: all 0.35s !important;
}

body.page-secao .sec-pilar:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(200, 169, 110, 0.38) !important;
  box-shadow: 0 24px 60px rgba(31, 25, 18, 0.14) !important;
}

body.page-secao .sec-pilar-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: #C8A96E !important;
  color: #1D1A16 !important;
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 18px 0 !important;
  text-align: center !important;
  border: 0 !important;
  padding: 0 !important;
  text-shadow: none !important;
}

body.page-secao .sec-pilar-num::before,
body.page-secao .sec-pilar-num::after { content: none !important; display: none !important; }

body.page-secao .sec-pilar-title {
  font-family: 'Fraunces', serif !important;
  font-weight: 300 !important;
  font-size: clamp(20px, 1.7vw, 28px) !important;
  line-height: 1.05 !important;
  color: #1D1A16 !important;
  margin: 0 0 12px 0 !important;
  text-wrap: balance;
  text-shadow: none !important;
}

body.page-secao .sec-pilar-title em {
  font-style: italic !important;
  color: #92711F !important;
}

body.page-secao .sec-pilar-desc {
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: clamp(13px, 0.92vw, 15px) !important;
  line-height: 1.5 !important;
  color: rgba(29, 26, 22, 0.68) !important;
  margin: 0 !important;
  text-shadow: none !important;
}

/* ─── ROUTE CARD (Maps/Waze) · mesma identidade limpa ─── */
body.page-secao .sec-routes {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.2vw, 20px) !important;
}

body.page-secao .sec-route-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 130px !important;
  padding: clamp(20px, 2vw, 28px) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(29, 26, 22, 0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(31, 25, 18, 0.08) !important;
  text-decoration: none !important;
  color: #1D1A16 !important;
  transition: all 0.35s !important;
}

body.page-secao .sec-route-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 169, 110, 0.40);
  background: rgba(255, 255, 255, 0.85);
}

body.page-secao .sec-route-tag {
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #92711F !important;
}

body.page-secao .sec-route-name {
  font-family: 'Fraunces', serif !important;
  font-weight: 300 !important;
  font-size: clamp(18px, 1.4vw, 22px) !important;
  color: #1D1A16 !important;
  margin-top: 6px !important;
}

/* ─── VIDEO CARD · também limpo ─── */
body.page-secao .sec-videos {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.4vw, 22px) !important;
}

body.page-secao .sec-video-card {
  position: relative !important;
  padding: clamp(20px, 2vw, 28px) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(29, 26, 22, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 50px rgba(31, 25, 18, 0.08) !important;
  overflow: hidden !important;
}

body.page-secao .sec-video-card h3 {
  font-family: 'Fraunces', serif !important;
  font-weight: 300 !important;
  font-size: clamp(18px, 1.5vw, 24px) !important;
  color: #1D1A16 !important;
  margin: 16px 0 8px !important;
}

body.page-secao .sec-video-card p {
  font-size: 13px !important;
  color: rgba(29, 26, 22, 0.68) !important;
  margin: 0 !important;
}

body.page-secao .sec-video-placeholder {
  background: rgba(29, 26, 22, 0.06) !important;
  border: 1px solid rgba(29, 26, 22, 0.08) !important;
  border-radius: 12px !important;
}

/* ─── COMPARATIVO timeshare/multi · auditoria ─── */
body.page-secao .sec-compare-table .sctr-head {
  background: rgba(200, 169, 110, 0.08) !important;
  color: #1D1A16 !important;
}

body.page-secao .sec-compare-callout {
  background: rgba(255, 255, 255, 0.68) !important;
  border-left: 4px solid #C8A96E !important;
  border-radius: 0 12px 12px 0 !important;
  padding: clamp(16px, 1.6vw, 24px) !important;
}

/* ─── COMING SOON · limpo se aparecer ─── */
body.page-secao .sec-soon {
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(29, 26, 22, 0.10) !important;
  border-radius: 24px !important;
  padding: clamp(40px, 4vw, 64px) !important;
  text-align: center !important;
}
body.page-secao .sec-soon-title {
  color: #1D1A16 !important;
  text-shadow: none !important;
}
body.page-secao .sec-soon-desc {
  color: rgba(29, 26, 22, 0.65) !important;
}

/* ─── BIGQUOTE legibilidade ─── */
body.page-secao .sec-bigquote {
  background: linear-gradient(135deg, #1D1A16 0%, #2A2520 100%) !important;
  border-radius: 28px !important;
  padding: clamp(40px, 4vw, 72px) !important;
  margin: clamp(40px, 4vw, 64px) 0 !important;
}
body.page-secao .sec-bigquote-text {
  color: #F5F0E8 !important;
  text-shadow: none !important;
}
body.page-secao .sec-bigquote-text em {
  color: #E5C078 !important;
}

/* ─── Responsivo ─── */
@media (max-width: 1280px) {
  body.page-secao .sec-steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.page-secao .sec-pilares { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  body.page-secao .sec-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.page-secao .sec-routes { grid-template-columns: 1fr !important; }
  body.page-secao .sec-videos { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  body.page-secao .sec-steps,
  body.page-secao .sec-pilares { grid-template-columns: 1fr !important; }
}

/* ============================================================
   FASE 2 · CURSOR CUSTOMIZADO
   ============================================================ */
.mx-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.3s;
  mix-blend-mode: difference;
}

.mx-cursor-dot {
  position: absolute;
  top: -3px; left: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #F5F0E8;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s;
}

.mx-cursor-ring {
  position: absolute;
  top: -16px; left: -16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(245, 240, 232, 0.50);
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              top 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.28s,
              background 0.28s;
}

.mx-cursor.is-hover .mx-cursor-ring {
  width: 56px; height: 56px;
  top: -28px; left: -28px;
  border-color: rgba(200, 169, 110, 0.85);
  background: rgba(200, 169, 110, 0.08);
}
.mx-cursor.is-hover .mx-cursor-dot { background: #C8A96E; }

.mx-cursor.is-zoom .mx-cursor-ring {
  width: 76px; height: 76px;
  top: -38px; left: -38px;
  border-color: rgba(200, 169, 110, 0.92);
  background: rgba(200, 169, 110, 0.12);
}
.mx-cursor.is-zoom .mx-cursor-dot { background: transparent; box-shadow: inset 0 0 0 1px #C8A96E; width: 14px; height: 14px; top: -7px; left: -7px; border-radius: 50%; }

.mx-cursor.is-drag .mx-cursor-ring,
.mx-cursor.is-rotate .mx-cursor-ring {
  width: 64px; height: 64px;
  top: -32px; left: -32px;
  border-style: dashed;
  border-color: rgba(200, 169, 110, 0.85);
  animation: mx-rotate 4s linear infinite;
}

.mx-cursor.is-pressed .mx-cursor-ring {
  transform: scale(0.78) !important;
  background: rgba(200, 169, 110, 0.22);
}

@keyframes mx-rotate { to { transform: rotate(360deg); } }

/* Esconde cursor sobre 3D maps/iframes */
.mx-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mx-cursor { display: block; }
  /* Esconde cursor nativo em elementos interativos */
  a, button, .menu-card, .sec-step, .sec-pilar, .sec-route-card,
  .sec-video-card, .chip, .mq-mode, .mq-action, .gallery-item {
    cursor: none;
  }
  /* Mas mantém em inputs/textareas/iframes */
  input, textarea, iframe, .maplibregl-canvas, .lacqua-3d-map, #mq-canvas {
    cursor: auto;
  }
  #mq-canvas { cursor: grab; }
  #mq-canvas:active { cursor: grabbing; }
}

/* Em totem mode, esconde sempre (touch-only) */
body.totem-mode .mx-cursor { display: none !important; }

/* ============================================================
   FASE 2 · TILT 3D BASE (suplementa o JS)
   ============================================================ */
.menu-card, .sec-step, .sec-pilar, .sec-route-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ============================================================
   FASE 2 · SKELETON SHIMMER (loading states)
   ============================================================ */
.mx-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(29, 26, 22, 0.06);
}
.mx-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.18) 50%,
    transparent 100%
  );
  animation: mx-shimmer 1.4s linear infinite;
}
@keyframes mx-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   FASE 2 · LOADING CONTEXTUAL MAQUETE 3D
   (Substitui mensagem genérica por estágios narrativos)
   ============================================================ */
.mq-loading-stage {
  display: block;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(29, 26, 22, 0.55);
  margin-top: 14px;
  opacity: 0;
  transition: opacity 0.4s;
  min-height: 14px;
}
.mq-loading-stage.is-shown { opacity: 1; }
body.dark .mq-loading-stage { color: rgba(245, 240, 232, 0.62); }

/* ============================================================
   FASE 2 · GALERIA EDITORIAL com LIGHTBOX
   ============================================================ */
body.page-galeria {
  background: #F5F0E8;
  min-height: 100vh;
  overflow-y: auto;
  color: #1D1A16;
}

body.page-galeria .editorial-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(29, 26, 22, 0.08);
}

.galeria-intro {
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 80px) clamp(20px, 3vw, 48px) clamp(24px, 4vh, 40px);
}

.galeria-eyebrow {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #B8924A;
  display: block;
  margin-bottom: 18px;
}

.galeria-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #1D1A16;
  margin: 0 0 18px 0;
}
.galeria-title em { font-style: italic; color: #B8924A; font-weight: 400; }

.galeria-sub {
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: rgba(29, 26, 22, 0.68);
  max-width: 640px;
  margin: 0;
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(180px, 26vh, 280px);
  gap: clamp(8px, 1vw, 14px);
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 48px) clamp(48px, 8vh, 80px);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border: 0;
  background: rgba(29, 26, 22, 0.04);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  isolation: isolate;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s,
              border-radius 0.4s;
}
.gallery-item--normal { grid-column: span 1; grid-row: span 1; }
.gallery-item--wide   { grid-column: span 2; grid-row: span 1; }
.gallery-item--tall   { grid-column: span 1; grid-row: span 2; }

.gallery-item__media {
  position: absolute;
  inset: 0;
  display: block;
}
.gallery-item__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s;
}

.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15, 13, 11, 0.75) 100%);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.45s;
}

.gallery-item__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: clamp(14px, 1.6vw, 22px);
  display: flex;
  align-items: baseline;
  gap: 12px;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.45s, opacity 0.45s;
}
.gallery-item__num {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: #C8A96E;
}
.gallery-item__text {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(13px, 1vw, 16px);
  color: #F5F0E8;
  line-height: 1.2;
}

.gallery-item:hover,
.gallery-item:focus-visible {
  transform: scale(0.985) translateZ(0);
  box-shadow: 0 24px 60px rgba(15, 13, 11, 0.24);
  border-radius: 16px;
}
.gallery-item:hover .gallery-item__media img,
.gallery-item:focus-visible .gallery-item__media img {
  transform: scale(1.06);
  filter: brightness(1.06) saturate(1.08);
}
.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-visible .gallery-item__overlay {
  opacity: 1;
}
.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-visible .gallery-item__caption {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1024px) {
  .galeria-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-item--wide,
  .gallery-item--tall { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  .galeria-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
  .gallery-item--wide,
  .gallery-item--tall { grid-column: span 1; }
}

/* ───── LIGHTBOX ───── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 7, 5, 0);
  backdrop-filter: blur(0);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s, background 0.35s, backdrop-filter 0.35s;
}
.lightbox.is-open {
  opacity: 1;
  background: rgba(10, 7, 5, 0.94);
  backdrop-filter: blur(8px);
}

.lightbox-figure {
  position: relative;
  max-width: 90vw;
  max-height: 88vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: scale(0.92);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.is-open .lightbox-figure { transform: scale(1); }

.lightbox-img {
  max-width: 100%;
  max-height: 84vh;
  display: block;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  transition: opacity 0.3s;
  background: rgba(245, 240, 232, 0.08);
  border-radius: 4px;
}
.lightbox-img.is-loading { opacity: 0.3; }

.lightbox-caption {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 18px);
  color: rgba(245, 240, 232, 0.85);
  letter-spacing: 0.02em;
  text-align: center;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(245, 240, 232, 0.10);
  border: 1px solid rgba(245, 240, 232, 0.22);
  color: #F5F0E8;
  width: clamp(40px, 4vw, 52px);
  height: clamp(40px, 4vw, 52px);
  border-radius: 50%;
  font-size: clamp(20px, 1.8vw, 28px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.25s;
  backdrop-filter: blur(6px);
}
.lightbox-close { top: 28px; right: 28px; }
.lightbox-prev  { left: 28px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 28px; top: 50%; transform: translateY(-50%); }

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(200, 169, 110, 0.92);
  color: #1D1A16;
  border-color: rgba(200, 169, 110, 0.95);
}

.lightbox-counter {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Host Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.55);
  padding: 8px 16px;
  background: rgba(245, 240, 232, 0.06);
  border-radius: 100px;
  backdrop-filter: blur(6px);
}

@media (max-width: 640px) {
  .lightbox-close { top: 16px; right: 16px; }
  .lightbox-prev  { left: 8px; }
  .lightbox-next  { right: 8px; }
}

/* ============================================================
   FASE 2 · MAGNETIC BUTTONS (suplementa JS)
   ============================================================ */
.sec-btn-primary, .menu-card__cta {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s, color 0.3s, border-color 0.3s;
  will-change: transform;
}

/* ============================================================
   FASE 3 · INVENTÁRIO 24 EFEITOS · garantias finais
   ============================================================ */

/* #24 · Custom scrollbar global premium */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(245, 240, 232, 0.04);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C8A96E 0%, #92711F 100%);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #E5C078 0%, #B8924A 100%);
  background-clip: padding-box;
}
* { scrollbar-width: thin; scrollbar-color: #C8A96E rgba(245, 240, 232, 0.04); }

/* #04 · Writing-mode vertical na nav direita do standby */
body.page-standby .standby-sidenav {
  position: fixed;
  top: 50%;
  right: clamp(20px, 2.5vw, 40px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 20;
}
body.page-standby .standby-sidenav-link {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Host Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.55);
  text-decoration: none;
  padding: 16px 4px;
  position: relative;
  transition: color 0.3s;
}
body.page-standby .standby-sidenav-link::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 1px;
  height: 8px;
  background: rgba(245, 240, 232, 0.20);
}
body.page-standby .standby-sidenav-link:last-child::after { display: none; }
body.page-standby .standby-sidenav-link:hover {
  color: #C8A96E;
}

@media (max-width: 768px) {
  body.page-standby .standby-sidenav { display: none; }
}

/* #10 · Nav lateral esquerda numerada 01-13 nas páginas de seção */
.secao-side-nav {
  position: fixed;
  left: clamp(16px, 2vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 40;
  padding: 18px 8px;
  background: rgba(245, 240, 232, 0.78);
  backdrop-filter: blur(12px);
  border-radius: 100px;
  pointer-events: auto;
}
.secao-side-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: rgba(29, 26, 22, 0.42);
  text-decoration: none;
  border-radius: 50%;
  position: relative;
  transition: all 0.25s;
}
.secao-side-nav-item.is-active {
  color: #1D1A16;
  background: #C8A96E;
  font-weight: 700;
}
.secao-side-nav-item:hover:not(.is-active) {
  color: #92711F;
}

@media (max-width: 1280px) {
  .secao-side-nav { display: none; }
}

/* Card Atmosfera (caso adicionado ao menu) · estilo tone water */
body.page-menu-fit .menu-card--tone-water .menu-card__overlay {
  background:
    radial-gradient(circle at 70% 30%, rgba(95, 168, 158, 0.32) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(143, 197, 188, 0.28) 0%, transparent 55%),
    linear-gradient(180deg, rgba(15, 13, 11, 0.30) 0%, rgba(15, 13, 11, 0.80) 100%) !important;
}
body.page-menu-fit .menu-card--tone-water .menu-card__label {
  color: #8FC5BC !important;
}

/* VR Button styling */
.mq-vr-button,
button.VRButton {
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  background: rgba(200, 169, 110, 0.95) !important;
  color: #1D1A16 !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 12px 22px !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  box-shadow: 0 6px 18px rgba(200, 169, 110, 0.3) !important;
}
.mq-vr-button:hover {
  background: #E5C078 !important;
  transform: translateY(-2px) !important;
}