/* =====================================================================
   Landing "Promoções Club Med" — folha de estilos
   As variáveis abaixo são os PADRÕES; o index.php gera um <style> com os
   valores de config.php que sobrescrevem estas.
   Mobile-first: base (320–639) → 640 (cenário largo) → 768 (tablet) → 1024 (desktop)
   ===================================================================== */
:root {
  --c-primary: #0B2A5C;
  --c-primary-rgb: 11, 42, 92;
  --c-accent: #F7D23E;
  --c-accent-rgb: 247, 210, 62;
  --c-text: #FFFFFF;
  --c-text-rgb: 255, 255, 255;
  --c-on-accent: #0B2A5C;
  --sky-top: #7FB3EA;
  --sky-mid: #A9CCF1;
  --sky-bottom: #EEF5FC;
  --sc-far: #B8D0EE;
  --sc-mid: #DCE8F5;
  --sc-near: #F8FBFE;
  --sc-shadow: #2F4B78;
  --sc-shadow-rgb: 47, 75, 120;
  --sc-tree: #1F4A3A;
  --sc-wood: #8B5A2B;
  --sc-wood-dark: #3E2513;
  --overlay: 0.18;
  --font-heading: "Montserrat", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-logo: "Nunito", "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
  --font-script: "Kaushan Script", "Brush Script MT", "Segoe Script", cursive;
  --wa-green: #25D366;
  --wa-green-rgb: 37, 211, 102;
  --c-on-wa: #FFFFFF;
  --shadow-text: 0 1px 2px rgba(var(--c-primary-rgb), .55), 0 4px 18px rgba(var(--c-primary-rgb), .38);
  --shadow-text-strong: 0 1px 2px rgba(var(--c-primary-rgb), .7), 0 0 10px rgba(var(--c-primary-rgb), .5), 0 3px 18px rgba(var(--c-primary-rgb), .45);
  --pad: clamp(18px, 5vw, 40px);
}
/* Âncoras do cenário: o JS troca por valores em px medidos no conteúdo;
   sem JS valem estes percentuais da altura da página. */
.page { --horizon: 56%; --deck: 63%; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--sc-wood-dark);
  line-height: 1.4;
  min-height: 100vh;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 4px; border-radius: 8px; }
.btn:focus-visible, .wa-float:focus-visible { outline-color: #fff; }
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; flex-shrink: 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Página / cenário ---------- */
.page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 26%, var(--sky-bottom) 50%, var(--sc-near) 70%);
}
.scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 34% at 88% 30%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 26%, var(--sky-bottom) 50%, var(--sc-near) 70%);
}
/* Montanhas: caixa ancorada no horizonte; o SVG cobre a caixa (slice) — nunca "amassa" */
.scene__mountains {
  position: absolute; left: 0; right: 0; top: var(--horizon);
  height: clamp(230px, 86vw, 540px);
  transform: translateY(-100%);
}
.scene__mountains::before {
  /* brilho suave do sol atrás dos picos (lado direito) */
  content: ""; position: absolute; right: -10%; top: -6%;
  width: 62%; aspect-ratio: 1; max-width: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 235, .9) 0%, rgba(255, 246, 220, .35) 34%, rgba(255, 246, 220, 0) 68%);
}
.scene__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene__svg--wide { display: none; }
.scene__floor {
  position: absolute; left: 0; right: 0; top: calc(var(--horizon) - 1px); bottom: 0;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(var(--sc-shadow-rgb), 0) 0%, rgba(var(--sc-shadow-rgb), .16) 60%, rgba(var(--sc-shadow-rgb), .3) 100%),
    var(--sc-near);
}
/* Guarda-corpo de madeira na borda do deck (posts + corrimão com neve) */
.scene__rail {
  position: absolute; left: 0; right: 0; top: var(--deck);
  height: clamp(26px, 7vw, 40px);
  transform: translateY(-100%);
  border-top: 5px solid var(--sc-wood-dark);
  border-bottom: 3px solid var(--sc-wood-dark);
  background: repeating-linear-gradient(90deg, transparent 0 66px, var(--sc-wood-dark) 66px 73px);
  box-shadow: 0 -3px 0 rgba(255, 255, 255, .9), 0 -8px 12px rgba(255, 255, 255, .5);
}
.scene__deck {
  position: absolute; left: 0; right: 0; top: var(--deck); bottom: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 5%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 38px, rgba(0, 0, 0, .36) 38px 40px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 180px),
    linear-gradient(180deg, var(--sc-wood) 0%, var(--sc-wood-dark) 100%);
  box-shadow: 0 -30px 60px rgba(var(--c-primary-rgb), .18);
}
.scene__deck::after {
  /* sombras suaves de "objetos" no deck, como as almofadas/esquis do flyer */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 30% at 10% 30%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 70%),
    radial-gradient(38% 30% at 92% 50%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 70%);
}
.scene__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--c-primary-rgb), var(--overlay)) 0%,
    rgba(var(--c-primary-rgb), calc(var(--overlay) * .4)) 28%,
    rgba(var(--c-primary-rgb), calc(var(--overlay) * .2)) 55%,
    rgba(var(--c-primary-rgb), calc(var(--overlay) * .6)) 78%,
    rgba(var(--c-primary-rgb), calc(var(--overlay) * 1.4)) 100%);
}
.scene--photo { background-size: cover; background-repeat: no-repeat; background-position: center; }
.scene--photo .scene__overlay {
  background: linear-gradient(180deg,
    rgba(var(--c-primary-rgb), calc(var(--overlay) + .15)) 0%,
    rgba(var(--c-primary-rgb), calc(var(--overlay) * .8)) 45%,
    rgba(var(--c-primary-rgb), calc(var(--overlay) + .4)) 100%);
}
/* Neve: uma camada com padrão repetido (período 840px) deslocada por transform (composta pela GPU) */
.scene__snow {
  position: absolute; left: 0; right: 0; top: -840px; bottom: 0; opacity: .85;
  background-image:
    radial-gradient(3px 3px at 24px 36px, #fff 45%, transparent 56%),
    radial-gradient(2px 2px at 140px 110px, rgba(255, 255, 255, .9) 45%, transparent 56%),
    radial-gradient(2.5px 2.5px at 210px 210px, #fff 45%, transparent 56%),
    radial-gradient(1.6px 1.6px at 60px 180px, rgba(255, 255, 255, .8) 45%, transparent 56%),
    radial-gradient(2px 2px at 300px 60px, #fff 45%, transparent 56%);
  background-size: 280px 280px, 420px 420px, 210px 210px, 168px 168px, 840px 840px;
  animation: snowfall 22s linear infinite;
  will-change: transform;
}
@keyframes snowfall { to { transform: translate3d(0, 840px, 0); } }
.no-snow .scene__snow { display: none; }

/* ---------- Container ---------- */
.container {
  position: relative; z-index: 1;
  max-width: 520px; margin: 0 auto;
  padding: clamp(24px, 6.5vw, 48px) var(--pad) clamp(28px, 7vw, 56px);
}

/* ---------- Marca ---------- */
.brand { text-align: center; }
.brand__logo {
  display: inline-flex; align-items: center; justify-content: center; gap: .16em;
  font-size: clamp(2.1rem, 10vw, 3.6rem);
  text-decoration: none; color: var(--c-text);
}
.brand__name {
  font-family: var(--font-logo); font-weight: 900; font-size: 1em;
  letter-spacing: -.015em; line-height: 1; white-space: nowrap;
  text-shadow: var(--shadow-text);
}
.brand__symbol { display: inline-flex; align-items: center; margin-left: .04em; filter: drop-shadow(0 2px 6px rgba(var(--c-primary-rgb), .45)); }
.brand__symbol svg { width: .9em; height: 1.02em; vertical-align: 0; }
.brand__symbol .icon { width: .85em; height: .85em; stroke-width: 2.9; }
.brand__img { height: clamp(44px, 12vw, 84px); width: auto; }
.brand__svg { display: block; color: var(--c-text); filter: drop-shadow(0 2px 6px rgba(var(--c-primary-rgb), .45)); }
.brand__svg svg { display: block; width: clamp(200px, 58vw, 290px); height: auto; }
.brand__tagline {
  margin-top: .55em;
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(.7rem, 3.1vw, 1.05rem); letter-spacing: .26em; text-transform: uppercase;
  text-shadow: var(--shadow-text);
}

/* ---------- Hero ---------- */
.hero { text-align: center; margin-top: clamp(22px, 6.5vw, 48px); }
.hero__title {
  margin: 0; font-family: var(--font-heading); line-height: 1;
  display: flex; flex-direction: column; align-items: center;
}
.hero__kicker {
  position: relative; isolation: isolate;
  display: inline-block; padding: .34em .9em .42em;
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(2rem, 10.6vw, 4rem); line-height: 1;
  text-transform: uppercase; letter-spacing: .02em;
  transform: rotate(-2.5deg);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.hero__brush {
  position: absolute; inset: -9% -7%; z-index: -1;
  color: var(--c-primary);
  filter: drop-shadow(0 8px 18px rgba(var(--c-primary-rgb), .35));
}
.brush { display: block; width: 100%; height: 100%; }
.hero__name {
  display: block; margin-top: -.12em;
  font-weight: 800; font-size: clamp(2.1rem, 10.8vw, 4.6rem);
  letter-spacing: .02em; text-transform: uppercase;
  text-shadow: var(--shadow-text-strong);
}
.hero__subtitle {
  margin: clamp(12px, 3.4vw, 22px) auto 0; max-width: 30ch;
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(.88rem, 3.75vw, 1.3rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1.45;
  text-shadow: var(--shadow-text-strong);
}
.hero__subtitle strong, .hero__subtitle b { font-weight: 800; }
.accent { color: var(--c-accent); }

/* ---------- Diferenciais ---------- */
.features { margin-top: clamp(20px, 5.5vw, 40px); padding-left: clamp(2px, 2.5vw, 26px); }
.features__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 2.8vw, 18px);
}
.feature { display: flex; align-items: center; gap: clamp(10px, 3vw, 18px); min-width: 0; }
.feature__icon {
  flex: 0 0 auto; width: clamp(40px, 11.5vw, 64px); height: clamp(40px, 11.5vw, 64px);
  border-radius: 50%; background: var(--c-primary); color: var(--c-text);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(var(--c-primary-rgb), .38), inset 0 0 0 2px rgba(255, 255, 255, .08);
}
.feature__icon .icon { width: 54%; height: 54%; vertical-align: 0; }
.feature__icon .visual-img { width: 56%; height: 56%; object-fit: contain; }
.feature__text {
  min-width: 0;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(.86rem, 3.6vw, 1.15rem); line-height: 1.25; letter-spacing: .03em; text-transform: uppercase;
  text-shadow: var(--shadow-text-strong);
}

/* espaço que deixa a vila e os pinheiros aparecerem entre a lista e o selo (só no mobile/tablet) */
.scene-gap { height: clamp(120px, 38vw, 230px); }

/* ---------- Selo ---------- */
.badge { display: flex; justify-content: center; margin-top: clamp(4px, 1.5vw, 12px); }
.badge__inner {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1.2em .66em 1.05em;
  color: var(--c-on-accent);
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(1.25rem, 6vw, 2.2rem); line-height: 1; text-transform: uppercase;
  transform: rotate(-3deg);
}
.badge__brush {
  position: absolute; inset: -11% -8%; z-index: -1;
  color: var(--c-accent);
  filter: drop-shadow(0 8px 18px rgba(var(--c-primary-rgb), .35));
}
.badge__icon .icon { width: 1.75em; height: 1.75em; vertical-align: 0; }
.badge__icon .visual-img { width: 1.75em; height: 1.75em; object-fit: contain; }
.badge__text { letter-spacing: .005em; text-align: left; }

/* ---------- Chamada para ação ---------- */
.cta { text-align: center; margin-top: clamp(26px, 7vw, 52px); }
.cta__pre {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(.9rem, 4vw, 1.35rem); letter-spacing: .06em; text-transform: uppercase;
  text-shadow: var(--shadow-text-strong);
}
.cta__title {
  margin: .06em 0 0;
  display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 14px);
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(1.5rem, 7.2vw, 3rem); line-height: 1.1; letter-spacing: -.005em; text-transform: uppercase;
  text-shadow: var(--shadow-text-strong);
}
.cta__word { min-width: 0; }
.sparkle {
  flex: 0 0 auto; width: clamp(18px, 5vw, 34px); height: auto;
  color: var(--c-accent);
  filter: drop-shadow(0 1px 2px rgba(var(--c-primary-rgb), .5));
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  margin-top: clamp(14px, 4vw, 30px);
  min-width: min(100%, 15em);
  padding: .9em 1.7em;
  border-radius: 999px;
  background: var(--btn-bg, var(--c-accent)); color: var(--btn-fg, var(--c-on-accent));
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(.95rem, 3.9vw, 1.25rem); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; text-shadow: none;
  box-shadow: 0 10px 26px rgba(var(--c-primary-rgb), .42);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn--accent { --btn-bg: var(--c-accent); --btn-fg: var(--c-on-accent); --btn-ring-rgb: var(--c-accent-rgb); }
/* Botao verde do WhatsApp: anel branco fino para destacar sobre a foto */
.btn--whatsapp {
  --btn-bg: var(--wa-green); --btn-fg: var(--c-on-wa); --btn-ring-rgb: var(--wa-green-rgb);
  box-shadow: 0 10px 26px rgba(var(--c-primary-rgb), .42), 0 0 0 3px rgba(255, 255, 255, .22);
}
.btn--whatsapp:hover { box-shadow: 0 14px 32px rgba(var(--c-primary-rgb), .5), 0 0 0 3px rgba(255, 255, 255, .3); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(var(--c-primary-rgb), .48); }
.btn:active { transform: translateY(0); }
.btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.btn__icon .icon { width: 1.55em; height: 1.55em; vertical-align: 0; }
.btn__label { white-space: nowrap; }
.btn__arrow .icon { width: 1.2em; height: 1.2em; stroke-width: 2.6; vertical-align: 0; }
.btn.is-pulsing { animation: pulse 1.3s ease-out; }
@keyframes pulse {
  0%   { box-shadow: 0 10px 26px rgba(var(--c-primary-rgb), .42), 0 0 0 0 rgba(var(--btn-ring-rgb, var(--c-accent-rgb)), .75); }
  100% { box-shadow: 0 10px 26px rgba(var(--c-primary-rgb), .42), 0 0 0 24px rgba(var(--btn-ring-rgb, var(--c-accent-rgb)), 0); }
}

/* ---------- Rodapé / parceiros ---------- */
.footer { margin-top: clamp(28px, 7.5vw, 56px); text-align: center; }
.partners { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4.5vw, 36px); flex-wrap: wrap; }
.partners--divided .partner + .partner { position: relative; }
.partners--divided .partner + .partner::before {
  content: ""; position: absolute; left: calc(clamp(14px, 4.5vw, 36px) / -2); top: 50%;
  width: 1px; height: clamp(44px, 12vw, 74px); transform: translate(-50%, -50%);
  background: rgba(var(--c-text-rgb), .75);
}
.partner {
  display: inline-flex; align-items: center; gap: .55em;
  text-decoration: none; color: var(--c-text); text-shadow: var(--shadow-text);
}
.partner__img { height: clamp(40px, 11vw, 74px); width: auto; }
.partner__monogram {
  width: clamp(42px, 11.5vw, 68px); height: clamp(42px, 11.5vw, 68px);
  border-radius: 24%; background: var(--c-text); color: var(--c-primary);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.15rem, 5.6vw, 2rem); letter-spacing: -.05em;
  text-shadow: none;
  box-shadow: 0 6px 16px rgba(var(--c-primary-rgb), .3);
}
.partner__caption { text-align: left; font-size: clamp(.72rem, 3vw, .98rem); line-height: 1.25; font-weight: 600; }
.partner__icon .icon { width: clamp(40px, 10.5vw, 64px); height: clamp(40px, 10.5vw, 64px); vertical-align: 0; filter: drop-shadow(0 2px 6px rgba(var(--c-primary-rgb), .4)); }
.partner__wordmark {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(1.1rem, 4.9vw, 1.75rem); line-height: .95; text-transform: uppercase; letter-spacing: .01em; text-align: left;
}
.partner__word--accent { color: var(--c-accent); }
.footer__note { margin-top: clamp(16px, 4vw, 26px); font-size: clamp(.76rem, 2.9vw, .86rem); line-height: 1.5; opacity: .92; text-shadow: var(--shadow-text); }
.footer__copy { margin-top: .4em; font-size: clamp(.76rem, 2.9vw, .86rem); line-height: 1.5; opacity: .8; text-shadow: var(--shadow-text); }

/* ---------- Botão flutuante do WhatsApp ---------- */
.wa-float {
  position: fixed; z-index: 60;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-width: 58px; height: 58px; padding: 0 15px;
  border-radius: 999px;
  background: var(--wa-green); color: var(--c-on-wa);
  font-family: var(--font-heading); font-weight: 700; font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), 0 0 0 3px rgba(255, 255, 255, .18);
  transition: opacity .3s ease, transform .3s ease;
}
.wa-float--left { right: auto; left: 16px; }
.wa-float--accent { background: var(--c-accent); color: var(--c-on-accent); }
.wa-float .icon { width: 28px; height: 28px; vertical-align: 0; }
.wa-float__label { display: none; white-space: nowrap; }
.wa-float:hover { transform: translateY(-2px); }
.wa-float.is-hidden { opacity: 0; transform: translateY(18px); pointer-events: none; }
.has-float .footer { padding-bottom: 76px; }

/* ---------- Revelação ao rolar (só blocos abaixo da dobra; ≤ .35s) ---------- */
.reveal--pending { opacity: 0; transform: translateY(18px); transition: opacity .32s ease, transform .32s ease; }
.reveal--pending.is-visible { opacity: 1; transform: none; }
.reveal--pending .feature { opacity: 0; transform: translateX(-12px); transition: opacity .3s ease calc(var(--i, 0) * 45ms), transform .3s ease calc(var(--i, 0) * 45ms); }
.reveal--pending.is-visible .feature { opacity: 1; transform: none; }

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene__snow { display: none; }
  .reveal--pending, .reveal--pending .feature { opacity: 1; transform: none; transition: none; }
  .btn.is-pulsing { animation: none; }
  .btn, .wa-float, .skip-link { transition: none; }
}

/* =====================================================================
   ≥ 640px: cenário em formato paisagem
   ===================================================================== */
@media (min-width: 640px) {
  .scene__svg--portrait { display: none; }
  .scene__svg--wide { display: block; }
  .scene__mountains { height: clamp(280px, 44vw, 460px); }
  .scene__mountains::before { width: 42%; top: -10%; right: -6%; }
}

/* =====================================================================
   Tablet (≥ 768px): tudo cresce, diferenciais em 2 colunas
   ===================================================================== */
@media (min-width: 768px) {
  .page { --horizon: 55%; --deck: 61%; }
  .container { max-width: 700px; }
  .features { padding-left: 0; }
  .features__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .scene-gap { height: clamp(200px, 30vw, 260px); }
  .scene__rail { background: repeating-linear-gradient(90deg, transparent 0 84px, var(--sc-wood-dark) 84px 92px); }
  .wa-float__label { display: inline; }
  .wa-float { padding: 0 22px 0 16px; }
}

/* =====================================================================
   Desktop (≥ 1024px): composição em duas colunas
   esquerda = título + chamada | direita = cartão de diferenciais + selo
   ===================================================================== */
@media (min-width: 1024px) {
  .page { --horizon: 70%; --deck: 74%; }
  .scene__mountains { height: clamp(300px, 29vw, 560px); }
  .scene__mountains::before { width: 34%; max-width: 560px; top: -18%; right: 4%; }
  .scene__rail { height: 44px; border-top-width: 6px; background: repeating-linear-gradient(90deg, transparent 0 110px, var(--sc-wood-dark) 110px 119px); }
  .scene__overlay::before {
    /* leve vinheta atrás da coluna de texto (esquerda) para reforçar o contraste */
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(52% 58% at 22% 46%, rgba(var(--c-primary-rgb), .22), rgba(var(--c-primary-rgb), 0) 72%);
  }
  .container {
    max-width: 1180px; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 40px; padding-bottom: 40px;
  }
  main {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas:
      "hero side"
      "cta  side";
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
  .has-many-features main { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }

  .brand { display: flex; align-items: center; gap: 22px; text-align: left; margin-bottom: 36px; }
  .brand__logo { font-size: clamp(2.3rem, 3vw, 3rem); }
  .brand__tagline { margin: 0; padding-left: 22px; border-left: 1px solid rgba(var(--c-text-rgb), .55); font-size: .95rem; }

  .hero { grid-area: hero; text-align: left; margin-top: 0; align-self: end; }
  .hero__title { align-items: flex-start; }
  .hero__kicker { font-size: clamp(3.4rem, 4.6vw, 4.6rem); transform-origin: left center; margin-left: .1em; }
  .hero__name { font-size: clamp(4rem, 5.6vw, 5.6rem); }
  .hero__subtitle { margin-left: 0; max-width: 32ch; font-size: 1.25rem; }

  .side { grid-area: side; align-self: center; display: flex; flex-direction: column; align-items: center; }
  .features {
    margin: 0; width: 100%; padding: 30px 34px 58px;
    border-radius: 28px;
    background: rgba(var(--c-primary-rgb), .34);
    border: 1px solid rgba(255, 255, 255, .26);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(var(--c-primary-rgb), .26);
  }
  .features__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .feature__icon { width: 62px; height: 62px; }
  .feature__text { font-size: 1.12rem; }
  .features--many .features__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 18px; }
  .features--many .feature { gap: 12px; }
  .features--many .feature__icon { width: 52px; height: 52px; }
  .features--many .feature__text { font-size: .95rem; letter-spacing: .02em; }
  .scene-gap { display: none; }
  /* selo "adesivo": sobrepõe a borda inferior do cartão */
  .badge { margin: -2.6rem 0 0; position: relative; z-index: 2; }
  .badge__inner { font-size: 2.1rem; }

  .cta { grid-area: cta; text-align: left; margin-top: 40px; align-self: start; }
  .cta__title { justify-content: flex-start; font-size: clamp(2.6rem, 3.4vw, 3.2rem); }
  .has-many-features .cta__title { font-size: clamp(2.2rem, 2.9vw, 3rem); }
  .cta__pre { font-size: 1.3rem; }
  .btn { font-size: 1.2rem; min-width: 0; }

  .footer { margin-top: 64px; }
  .has-float .footer { padding-bottom: 0; padding-right: 220px; padding-left: 220px; }
  .partners { justify-content: center; gap: 40px; }
  .wa-float { bottom: 24px; right: 24px; }
  .wa-float--left { right: auto; left: 24px; }
}

@media (min-width: 1440px) {
  .container { max-width: 1260px; }
  main { column-gap: clamp(60px, 6vw, 110px); }
}

@media (min-width: 1600px) {
  /* telas muito largas: relevo um pouco mais baixo (vila e pinheiros ficam no tamanho natural) */
  .scene__relief { transform: scaleY(.84); transform-box: view-box; transform-origin: 50% 100%; }
  .scene__mountains::before { top: 0; }
}

/* ---------- Impressão ---------- */
@media print {
  .scene__snow, .wa-float, .skip-link { display: none !important; }
  .page, .container { min-height: 0; }
  .reveal--pending { opacity: 1; transform: none; }
}