/* ════════════════════════════════════════════════════════════
   RADIX LANDING — Public site
   Visual language: Apple Liquid Glass on Radix dark palette
   ──────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body.radix {
  background: var(--bg-1);
  color: var(--fg-1);
  overflow-x: hidden;
  min-height: 100vh;
}

img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* ── PAGE BACKGROUND ATMOSPHERIC ──
   Subtle deep gradient on top of petroleo */
.page-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 70% 0%, rgba(139,170,173,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 20% 100%, rgba(31,44,67,0.6) 0%, transparent 60%),
    var(--bg-1);
  pointer-events: none;
}

main, header, footer { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════
   HEADER / NAV
   ──────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--mx);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(23, 35, 58, 0.72);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-bottom-color: rgba(255,255,255,0.06);
  padding-top: 14px;
  padding-bottom: 14px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-1);
  text-decoration: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.nav-logo.revealed { opacity: 1; transform: none; }
.nav-logo svg { width: 100px; height: auto; color: var(--fg-1); filter: drop-shadow(0 4px 18px rgba(0,0,0,0.30)); }
@media (max-width: 720px){ .nav-logo svg { width: 72px; } }

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.nav-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
  padding: 10px 4px;
  transition: color var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--fg-1); }

/* ════════════════════════════════════════════════════════════
   BUTTON SYSTEM
   ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  border: 1px solid;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

/* Primary — gold-aqua tinted glass (the ONLY gold tint) */
.btn-primary {
  background:
    linear-gradient(180deg, rgba(196,220,223,0.22) 0%, rgba(139,170,173,0.16) 100%);
  border-color: rgba(196,220,223,0.42);
  color: var(--fg-1);
  box-shadow:
    inset 0 1px 0 rgba(196,220,223,0.40),
    inset 0 -1px 0 rgba(139,170,173,0.10),
    0 8px 24px rgba(139,170,173,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(196,220,223,0.32) 0%, rgba(139,170,173,0.22) 100%);
  border-color: rgba(196,220,223,0.62);
  box-shadow:
    inset 0 1px 0 rgba(196,220,223,0.55),
    inset 0 -1px 0 rgba(139,170,173,0.12),
    0 12px 32px rgba(139,170,173,0.28);
}

/* Ghost — secondary */
.btn-ghost {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.14);
  color: var(--fg-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
  color: var(--fg-1);
}

/* ════════════════════════════════════════════════════════════
   SECTION SCAFFOLD
   ──────────────────────────────────────────────────────────── */
.scene {
  position: relative;
  padding: var(--s16) var(--mx);
  overflow: hidden;
}

.sid {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--s4);
}
.sid-num { color: var(--accent); opacity: 0.85; }
.sid-rule { width: 40px; height: 1px; background: var(--accent-edge); }
.sid-label { color: var(--accent); opacity: 0.85; }

/* ════════════════════════════════════════════════════════════
   WORD-BY-WORD REVEAL
   ──────────────────────────────────────────────────────────── */
.reveal-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
  will-change: opacity, transform;
}
.reveal-words.visible .word { opacity: 1; transform: none; }
.word.gold {
  background: linear-gradient(180deg, #d8e8ea 0%, #8BAAAD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Generic fade-up reveal for blocks */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.reveal.visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════
   01 HERO
   ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px var(--mx) var(--s12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-atmosphere {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 35%, rgba(139,170,173,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(196,220,223,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0,0,0,0.55) 0%, transparent 70%);
  z-index: 0;
}

/* Fine grid texture, masked radially */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(139,170,173,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,170,173,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 75%);
  z-index: 0;
}

/* Distant city silhouette suggestion */
.hero-glow {
  position: absolute;
  left: 50%; bottom: 18%;
  width: 110%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(196,220,223,0.45), transparent);
  filter: blur(1.2px);
  z-index: 0;
  opacity: 0.6;
}

.hero-stage {
  position: relative;
  z-index: 2;
  width: min(720px, 80vw);
  aspect-ratio: 1024 / 540;
  margin-bottom: var(--s5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Cinematic depth-morph */
  opacity: 0;
  transform: scale(0.65) translateY(40px) rotateX(18deg);
  transform-origin: 50% 60%;
  filter: blur(20px) drop-shadow(0 30px 60px rgba(0,0,0,0.5));
  animation: heroLogoIn 1800ms var(--ease-out) 220ms forwards,
             heroKenBurns 24s ease-in-out 2200ms infinite alternate;
  perspective: 1000px;
}

@keyframes heroLogoIn {
  0%   { opacity: 0; transform: scale(0.55) translateY(60px) rotateX(22deg); filter: blur(28px) drop-shadow(0 40px 80px rgba(0,0,0,0.6)); }
  60%  { opacity: 1; filter: blur(4px) drop-shadow(0 30px 60px rgba(0,0,0,0.5)); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotateX(0); filter: blur(0) drop-shadow(0 30px 60px rgba(0,0,0,0.5)); }
}
@keyframes heroKenBurns {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.05) translateY(-8px); }
}

.hero-eyebrow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s4);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(139,170,173,0.06);
  border: 1px solid rgba(139,170,173,0.22);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(8px);
  animation: heroEyebrowIn 700ms var(--ease-out) 1700ms forwards;
}
.hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
@keyframes heroEyebrowIn { to { opacity: 1; transform: none; } }

.hero-headline {
  position: relative;
  z-index: 2;
  font-size: clamp(48px, 7vw, 112px);
  font-weight: 700;
  letter-spacing: -2.5px;
  line-height: 0.95;
  max-width: 16ch;
  margin-bottom: var(--s3);
  text-wrap: balance;
}
.hero-headline .line2 { display: block; }

.hero-sub {
  position: relative;
  z-index: 2;
  font-size: 18px;
  font-weight: 300;
  color: var(--fg-2);
  max-width: 56ch;
  margin: var(--s2) auto var(--s6);
  line-height: 1.55;
  letter-spacing: 0.2px;
}

.hero-ctas {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--fg-3);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  opacity: 0;
  animation: heroEyebrowIn 700ms var(--ease-out) 2300ms forwards;
}
.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: scrollHint 2.4s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1); opacity: 0.9; }
}

/* ════════════════════════════════════════════════════════════
   FULL-BLEED LIFESTYLE SCENES (02, 04)
   ──────────────────────────────────────────────────────────── */
.fullbleed {
  position: relative;
  min-height: 92vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.fullbleed-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: translate3d(0, var(--py, 0), 0) scale(1.08);
  transition: transform 1.4s var(--ease-out);
}
.fullbleed.visible .fullbleed-img { transform: translate3d(0, var(--py, 0), 0) scale(1.02); }

.fullbleed-img-wrap {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.fullbleed-img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15,22,38,0.25) 0%, rgba(15,22,38,0.10) 30%, rgba(15,22,38,0.35) 55%, rgba(15,22,38,0.88) 100%),
    linear-gradient(180deg, rgba(15,22,38,0.55) 0%, rgba(15,22,38,0.20) 30%, rgba(15,22,38,0.70) 100%);
}
/* Left-anchored variant flips the gradient */
.fullbleed.anchor-left .fullbleed-img-wrap::after {
  background:
    linear-gradient(90deg, rgba(15,22,38,0.88) 0%, rgba(15,22,38,0.35) 45%, rgba(15,22,38,0.10) 70%, rgba(15,22,38,0.25) 100%),
    linear-gradient(180deg, rgba(15,22,38,0.55) 0%, rgba(15,22,38,0.20) 30%, rgba(15,22,38,0.70) 100%);
}

.fullbleed-content {
  position: relative;
  z-index: 1;
  padding: var(--s12) var(--mx);
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  align-items: center;
}
.fullbleed.anchor-right .fullbleed-text {
  grid-column: 2;
  text-align: left;
}
.fullbleed.anchor-left .fullbleed-text {
  grid-column: 1;
  text-align: left;
}

.fullbleed-text h2 {
  font-size: clamp(36px, 4.6vw, 68px);
  font-weight: 700;
  letter-spacing: -1.8px;
  line-height: 0.98;
  margin-bottom: var(--s4);
  text-wrap: balance;
}
.fullbleed-text h2 em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 1px 24px rgba(15,22,38,0.45);
}
.fullbleed-text p {
  font-size: 17px;
  font-weight: 300;
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 38ch;
}
.fullbleed-text .sid { margin-bottom: var(--s3); }

/* ════════════════════════════════════════════════════════════
   03 STATS BAND
   ──────────────────────────────────────────────────────────── */
.stats {
  padding: var(--s12) var(--mx);
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  background: rgba(255,255,255,0.012);
}
.stats-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.stat {
  position: relative;
  padding: var(--s2) var(--s5);
}
.stat + .stat::before {
  content: '';
  position: absolute;
  left: 0; top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--rule-dark);
}
.stat-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: var(--s2);
}
.stat-headline {
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.05;
  margin-bottom: var(--s2);
  text-wrap: balance;
}
.stat-body {
  font-size: 14px;
  font-weight: 300;
  color: var(--fg-2);
  line-height: 1.55;
  max-width: 34ch;
}

/* ════════════════════════════════════════════════════════════
   05 MODELOS CAROUSEL
   ──────────────────────────────────────────────────────────── */
.modelos {
  padding: var(--s16) var(--mx);
}
.modelos-head {
  max-width: 1480px;
  margin: 0 auto var(--s8);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s5);
  align-items: end;
}
.modelos-head h2 {
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 1.12;
  padding-bottom: 0.08em;
  max-width: 18ch;
  text-wrap: balance;
}
.modelos-head h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #d8e8ea 0%, #8BAAAD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.modelos-head p {
  font-size: 15px;
  font-weight: 300;
  color: var(--fg-2);
  max-width: 40ch;
  line-height: 1.5;
}

.carousel {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
}
.carousel-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-3xl);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 60px rgba(0,0,0,0.4);
}
.carousel-track {
  display: flex;
  transition: transform 700ms var(--ease-in-out);
  will-change: transform;
}
.carousel-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  min-height: 560px;
}

.slide-visual {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
}
.slide-visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.slide-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 70%, rgba(31,44,67,0.7) 100%);
}

.slide-info {
  padding: var(--s8) var(--s8) var(--s8) var(--s8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
}
.slide-num {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
}
.slide-num-pill {
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(139,170,173,0.10);
  border: 1px solid rgba(139,170,173,0.28);
  color: var(--accent);
  font-weight: 500;
}
.slide-badge {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(196,220,223,0.85);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(196,220,223,0.08);
  border: 1px solid rgba(196,220,223,0.28);
}
.slide-title {
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 1.0;
  text-wrap: balance;
}
.slide-tag {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--accent);
  opacity: 0.95;
}
.slide-body {
  font-size: 15px;
  font-weight: 300;
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 38ch;
}
.slide-meters {
  margin-top: var(--s2);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  max-width: 360px;
}
.meter-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; }
.meter-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.meter-dots { display: flex; gap: 6px; }
.meter-dots .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background var(--dur-base) var(--ease-out);
}
.meter-dots .dot.on {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(139,170,173,0.6);
}
.meter-dots .dot.gold {
  background: linear-gradient(180deg, #d8e8ea, #8BAAAD);
  border-color: rgba(196,220,223,0.7);
  box-shadow: 0 0 10px rgba(196,220,223,0.55);
}
.meter-full {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #d8e8ea, #8BAAAD);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.carousel-tabs {
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.tab {
  background: none;
  border: none;
  padding: 18px 0 0;
  text-align: left;
  color: var(--fg-3);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-base) var(--ease-out);
}
.tab-rail {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
  overflow: hidden;
}
.tab-rail::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #c4dcdf);
}
.tab.active .tab-rail::after {
  animation: tabProgress 5500ms linear forwards;
}
.tab.played .tab-rail::after { width: 100%; }
@keyframes tabProgress { from { width: 0%; } to { width: 100%; } }

.tab-num {
  display: block;
  font-size: 10px;
  letter-spacing: 2.6px;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 4px;
}
.tab-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: inherit;
}
.tab.active { color: var(--fg-1); }
.tab:hover { color: var(--fg-1); }

.modelos-foot {
  margin-top: var(--s4);
  font-size: 12px;
  font-weight: 300;
  color: var(--fg-3);
  letter-spacing: 0.3px;
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ════════════════════════════════════════════════════════════
   06 COMO FUNCIONA (5 steps, alternating)
   ──────────────────────────────────────────────────────────── */
.howto {
  padding: var(--s16) var(--mx);
  position: relative;
}
.howto-head {
  max-width: 1480px;
  margin: 0 auto var(--s12);
  text-align: center;
}
.howto-head .sid { justify-content: center; }
.howto-head h2 {
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 1.0;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}
.howto-head h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #d8e8ea 0%, #8BAAAD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.steps {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s16);
}
.step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s10);
  align-items: center;
}
.step.flip .step-text { grid-column: 2; grid-row: 1; }
.step.flip .step-visual { grid-column: 1; grid-row: 1; }

.step-num {
  font-size: clamp(80px, 9vw, 140px);
  font-weight: 200;
  letter-spacing: -4px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(139,170,173,0.40);
  text-stroke: 1px rgba(139,170,173,0.40);
  margin-bottom: var(--s3);
  display: block;
}
.step-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s2);
}
/* Step text card — glass capsule with subtle divider (Google Flow style) */
.step-text {
  padding: var(--s6) var(--s5);
  background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 24px 60px rgba(0,0,0,0.30);
  max-width: 480px;
}
.step-title {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.08;
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-wrap: balance;
}
.step-body {
  font-size: 15px;
  font-weight: 300;
  color: var(--fg-2);
  line-height: 1.65;
  max-width: 40ch;
}

/* Step visual — black frame with rounded corners + dramatic shadow */
.step-visual {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 26px;
  overflow: hidden;
  background: #02050d;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 60px 140px rgba(0,0,0,0.75),
    0 20px 48px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform: perspective(1400px) rotateY(-3deg) rotateX(1deg) translate3d(0, var(--py, 0), 0);
  transition: transform 800ms var(--ease-out);
}
.step-visual::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  background: #02050d;
  z-index: 0;
}
.step.flip .step-visual { transform: perspective(1400px) rotateY(3deg) rotateX(1deg) translate3d(0, var(--py, 0), 0); }
.step-visual:hover { transform: perspective(1400px) rotateY(0) rotateX(0) translate3d(0, var(--py, 0), 0); }
.step-visual img {
  position: absolute; inset: 10px;
  width: calc(100% - 20px); height: calc(100% - 20px);
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
  z-index: 1;
}
.step-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(15,22,38,0.4));
  pointer-events: none;
}
.step-visual.placeholder {
  background: #02050d;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s8);
}
.step-visual.placeholder::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(139,170,173,0.10), transparent 60%),
    linear-gradient(135deg, #0a1224, #02050d);
}

/* Placeholder visual: glass card mock */
.glass-mock {
  width: 78%;
  padding: 24px 28px;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 50px rgba(0,0,0,0.35);
}
.glass-mock-label {
  font-size: 9px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.glass-mock-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.glass-mock-h {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.6px; line-height: 1.1;
  margin-bottom: 14px;
}
.glass-mock-line {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 8px;
}
.glass-mock-line:nth-child(odd) { width: 100%; }
.glass-mock-line:nth-child(even) { width: 72%; }
.glass-mock-chips {
  margin-top: 18px;
  display: flex; gap: 6px;
}
.glass-mock-chips span {
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 1;
}
.glass-mock-chips span:first-child {
  background: rgba(139,170,173,0.15);
  border-color: rgba(139,170,173,0.4);
}

/* ════════════════════════════════════════════════════════════
   07 HANDSHAKE SPLIT
   ──────────────────────────────────────────────────────────── */
.handshake {
  padding: 0;
  position: relative;
}
.handshake-head {
  padding: var(--s12) var(--mx) var(--s8);
  max-width: 1480px;
  margin: 0 auto;
  text-align: center;
}
.handshake-head h2 {
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 1.0;
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
}
.handshake-head h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #d8e8ea 0%, #8BAAAD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.handshake-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--rule-dark-strong);
}
.handshake-side {
  position: relative;
  min-height: 540px;
  overflow: hidden;
}
.handshake-side img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0), 0) scale(1.02);
  transition: transform 1.6s var(--ease-out);
  /* Tonal blue cast — unifies both sides of the split */
  filter: saturate(0.85) contrast(1.05) hue-rotate(-8deg);
}
.handshake-side:hover img { transform: translate3d(0, var(--py, 0), 0) scale(1.05); }
/* Two-layer overlay: tonal navy tint + bottom legibility gradient */
.handshake-side::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(31,44,67,0.42);
  mix-blend-mode: multiply;
  z-index: 1;
}
.handshake-side::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,22,38,0.20) 0%, rgba(15,22,38,0.45) 55%, rgba(15,22,38,0.92) 100%);
  z-index: 1;
}
.handshake-overlay {
  position: absolute;
  left: var(--s6);
  bottom: var(--s6);
  right: var(--s6);
  z-index: 3;
}
.handshake-overlay .flag {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.handshake-overlay .flag::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.handshake-overlay h3 {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.1;
  margin-bottom: 8px;
  max-width: 22ch;
  text-wrap: balance;
}
.handshake-overlay p {
  font-size: 14px;
  font-weight: 300;
  color: var(--fg-2);
  line-height: 1.5;
  max-width: 38ch;
}

/* ════════════════════════════════════════════════════════════
   08 PROTEÇÃO
   ──────────────────────────────────────────────────────────── */
.protecao {
  padding: var(--s16) var(--mx);
}
.protecao-wrap {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s10);
  align-items: center;
}
.protecao-text h2 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 1.02;
  margin-bottom: var(--s4);
  text-wrap: balance;
}
.protecao-text h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #d8e8ea 0%, #8BAAAD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.protecao-text p {
  font-size: 16px;
  font-weight: 300;
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 44ch;
}

.protecao-card {
  position: relative;
  padding: var(--s5);
  border-radius: var(--r-2xl);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 30px 60px rgba(0,0,0,0.35);
}
.protecao-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s4);
}
.protecao-card-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--accent);
}
.protecao-card-meta {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.protecao-rows {
  display: flex;
  flex-direction: column;
}
.prow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-dark);
  align-items: baseline;
}
.prow:last-child { border-bottom: 0; }
.prow-event {
  font-size: 14px;
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: -0.2px;
}
.prow-event small {
  display: block;
  font-size: 11px;
  font-weight: 300;
  color: var(--fg-3);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.prow-days {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.prow-days small {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-left: 4px;
}
.prow.full .prow-days {
  background: linear-gradient(180deg, #d8e8ea, #8BAAAD);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ════════════════════════════════════════════════════════════
   09 LEGAL SEAL
   ──────────────────────────────────────────────────────────── */
.legal {
  padding: var(--s10) var(--mx) var(--s12);
}
.legal-card {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s5);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: center;
}
.legal-seal {
  width: 88px; height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(196,220,223,0.18), transparent 60%),
    rgba(139,170,173,0.08);
  border: 1px solid rgba(139,170,173,0.32);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  flex-shrink: 0;
}
.legal-seal::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(139,170,173,0.32);
}
.legal-seal span { position: relative; z-index: 1; line-height: 1.1; }
.legal-text-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.legal-text h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-1);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}
.legal-text p {
  font-size: 13px;
  font-weight: 300;
  color: var(--fg-2);
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   10 CLOSING
   ──────────────────────────────────────────────────────────── */
.closing {
  position: relative;
  min-height: 92vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.closing-img-wrap {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.closing-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  animation: closingKenBurns 24s ease-in-out infinite alternate;
  filter: saturate(1.1) contrast(1.10) brightness(1.05);
}
@keyframes closingKenBurns {
  0%   { transform: scale(1.1) translate(0,0); }
  100% { transform: scale(1.18) translate(-2%, -1%); }
}
.closing-img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  /* Lighter center reveals the skyline; edges fade for text legibility */
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(15,22,38,0.20) 0%, rgba(15,22,38,0.60) 75%, rgba(15,22,38,0.88) 100%),
    linear-gradient(180deg, rgba(15,22,38,0.45) 0%, rgba(15,22,38,0.15) 35%, rgba(15,22,38,0.55) 90%, rgba(15,22,38,0.92) 100%);
}
/* Text-shadow on the closing typewriter for legibility over visible skyline */
.closing-content h2 {
  text-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 1px 0 rgba(0,0,0,0.30);
}
.closing-content {
  position: relative;
  z-index: 1;
  padding: var(--s12) var(--mx);
  max-width: 1080px;
}
.closing-content .sid { justify-content: center; }
.closing-content h2 {
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 0.94;
  margin-bottom: var(--s5);
  text-wrap: balance;
}
.closing-content h2 em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 2px 32px rgba(15,22,38,0.55);
}
.closing-content p {
  font-size: 18px;
  font-weight: 400;
  color: rgba(232,238,240,0.92);
  max-width: 50ch;
  margin: 0 auto var(--s6);
  line-height: 1.55;
  text-shadow: 0 1px 16px rgba(15,22,38,0.55);
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ──────────────────────────────────────────────────────────── */
.footer {
  padding: var(--s5) var(--mx);
  border-top: 1px solid var(--rule-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--fg-2); }
.footer-brand svg { height: 16px; color: var(--fg-2); }
.footer-meta { display: flex; gap: var(--s4); }
.footer-meta a { color: var(--fg-3); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.footer-meta a:hover { color: var(--fg-1); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --mx: 48px; }
  .scene, .modelos, .howto, .protecao, .legal { padding-left: var(--mx); padding-right: var(--mx); }
  .fullbleed-content { grid-template-columns: 1fr; }
  .fullbleed.anchor-right .fullbleed-text,
  .fullbleed.anchor-left .fullbleed-text { grid-column: 1; }
  .stats-grid { grid-template-columns: 1fr; gap: 0; }
  .stat + .stat { border-top: 1px solid var(--rule-dark); padding-top: var(--s4); margin-top: var(--s4); }
  .stat + .stat::before { display: none; }
  .carousel-slide { grid-template-columns: 1fr; min-height: 0; }
  .slide-visual { aspect-ratio: 16 / 10; }
  .step { grid-template-columns: 1fr; gap: var(--s5); }
  .step.flip .step-text,
  .step.flip .step-visual { grid-column: 1; grid-row: auto; }
  .protecao-wrap { grid-template-columns: 1fr; }
  .modelos-head { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --mx: 24px; }
  .nav { padding: 16px var(--mx); }
  .hero { padding-top: 96px; }
  .hero-headline { font-size: clamp(40px, 11vw, 64px); letter-spacing: -1.4px; }
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .btn { justify-content: center; }
  .scene, .modelos, .howto, .protecao, .legal { padding-top: var(--s10); padding-bottom: var(--s10); }
  .steps { gap: var(--s10); }
  .carousel-tabs { grid-template-columns: repeat(2, 1fr); }
  .handshake-split { grid-template-columns: 1fr; }
  .handshake-side { min-height: 360px; }
  .legal-card { grid-template-columns: 1fr; text-align: center; }
  .legal-seal { margin: 0 auto; }
  .nav-link { display: none; }
  .nav-link.access { display: inline; }
  .footer { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-meta { flex-wrap: wrap; gap: var(--s2); }
}

/* ════════════════════════════════════════════════════════════
   STATEMENT SECTION (Cena 04 — typography-only)
   ──────────────────────────────────────────────────────────── */
.statement {
  padding: var(--s16) var(--mx);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(139,170,173,0.06) 0%, transparent 65%);
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}
.statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(139,170,173,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,170,173,0.03) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, black 0%, transparent 75%);
  pointer-events: none;
}
.statement-wrap {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  width: 100%;
}
.statement-wrap .sid { margin-bottom: var(--s5); }
.statement-h {
  font-size: clamp(44px, 5.6vw, 88px);
  font-weight: 700;
  letter-spacing: -2.2px;
  line-height: 0.98;
  margin-bottom: var(--s4);
  text-wrap: balance;
}
.statement-h em {
  font-style: normal;
  background: linear-gradient(180deg, #d8e8ea 0%, #8BAAAD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.statement-p {
  font-size: 18px;
  font-weight: 300;
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto;
}
.statement-divider {
  width: 60px;
  height: 1px;
  margin: var(--s6) auto 0;
  background: var(--accent-edge-strong);
}

/* ════════════════════════════════════════════════════════════
   TRAVEL MOCK (Modelo 03 Acompanhante visual)
   ──────────────────────────────────────────────────────────── */
.slide-visual-mock {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(139,170,173,0.12), transparent 60%),
    linear-gradient(160deg, #1a2438 0%, #0f1626 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s6);
}
.slide-visual-mock::after { display: none; }
.travel-mock {
  width: min(440px, 100%);
  padding: 32px 28px;
  border-radius: var(--r-2xl);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 24px 50px rgba(0,0,0,0.4);
  color: var(--fg-1);
}
.travel-mock-eyebrow {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.travel-mock-eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.travel-mock-route {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule-dark);
  margin-bottom: 18px;
}
.travel-iata {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.travel-line {
  flex: 1;
  color: var(--accent);
  display: flex;
  align-items: center;
}
.travel-line svg {
  width: 100%;
  height: 16px;
}
.travel-mock-rows {
  display: flex;
  flex-direction: column;
}
.travel-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--fg-2);
  border-bottom: 1px solid var(--rule-dark);
  align-items: baseline;
}
.travel-row:last-child { border-bottom: 0; }
.travel-row > :first-child {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.travel-row.tr-on > :last-child {
  color: var(--fg-1);
  font-weight: 500;
}
.travel-row.tr-on > :first-child {
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════
   PROTEÇÃO — Medal hero
   ──────────────────────────────────────────────────────────── */
/* PROTEÇÃO — dark dramatic background + giant tonal-blue medal overlapping card */
.protecao {
  position: relative;
  background:
    radial-gradient(ellipse 55% 55% at 60% 50%, rgba(40,60,90,0.40) 0%, transparent 65%),
    radial-gradient(ellipse 80% 80% at 30% 40%, rgba(13,20,35,0.50) 0%, transparent 75%),
    #020610;
}
.protecao::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(2,6,16,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}
.protecao .protecao-wrap { position: relative; z-index: 1; }
.protecao-card { overflow: visible; }
.protecao-medal {
  position: absolute;
  top: 50%;
  right: -10%;
  width: clamp(280px, 32vw, 440px);
  height: auto;
  z-index: 3;
  filter:
    saturate(0.18)
    brightness(1.05)
    hue-rotate(190deg)
    drop-shadow(0 40px 60px rgba(0,0,0,0.65))
    drop-shadow(0 12px 24px rgba(139,170,173,0.18))
    drop-shadow(0 0 50px rgba(139,170,173,0.10));
  animation: medalFloat 6s ease-in-out infinite alternate;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}
@keyframes medalFloat {
  0% {
    transform: translate3d(0, calc(-50% - 16px), 0) rotate(4deg) scale(0.985);
  }
  100% {
    transform: translate3d(8px, calc(-50% + 16px), 0) rotate(10deg) scale(1.015);
  }
}

@media (max-width: 720px) {
  .protecao-medal { top: -50px; right: -10px; width: 180px; transform: translate3d(0, var(--py, 0), 0) rotate(8deg); }
  .statement { min-height: 50vh; padding: var(--s10) var(--mx); }
  .slide-visual-mock { padding: var(--s4); }
  .travel-mock { padding: 22px 20px; }
}

/* Mobile/tablet hero scaling stays intact */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-words .word { opacity: 1 !important; transform: none !important; }
  .closing-img, .hero-logo { animation: none !important; }
}

/* ─── Scroll-driven progressive word reveal ─── */
[data-scroll-driven] .word {
  opacity: var(--sd, 0) !important;
  transform: translateY(calc((1 - var(--sd, 0)) * 14px)) !important;
  transition: none !important;
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-scroll-driven] .word {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── Ambient mesh background (Suno-style drifting blobs) ─── */
.ambient-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.ambient-mesh > .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  will-change: transform;
  opacity: 1;
}
.ambient-mesh > .blob-1 {
  width: 65vw;
  height: 65vw;
  top: -25%;
  left: -18%;
  background: radial-gradient(circle, rgba(139,170,173,0.55), transparent 62%);
  animation: meshDrift1 24s ease-in-out infinite alternate;
}
.ambient-mesh > .blob-2 {
  width: 52vw;
  height: 52vw;
  top: 28%;
  right: -22%;
  background: radial-gradient(circle, rgba(196,220,223,0.42), transparent 62%);
  animation: meshDrift2 30s ease-in-out infinite alternate;
}
.ambient-mesh > .blob-3 {
  width: 58vw;
  height: 58vw;
  bottom: -30%;
  left: 18%;
  background: radial-gradient(circle, rgba(13,20,35,0.92), transparent 65%);
  animation: meshDrift3 28s ease-in-out infinite alternate;
}
.ambient-mesh > .blob-4 {
  width: 38vw;
  height: 38vw;
  top: 50%;
  left: 5%;
  background: radial-gradient(circle, rgba(90,126,130,0.48), transparent 60%);
  animation: meshDrift4 34s ease-in-out infinite alternate;
}
@keyframes meshDrift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(14vw, 22vh, 0) scale(1.18); }
}
@keyframes meshDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-12vw, 16vh, 0) scale(0.88); }
}
@keyframes meshDrift3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(18vw, -20vh, 0) scale(1.10); }
}
@keyframes meshDrift4 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-10vw, -14vh, 0) scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-mesh > .blob { animation: none; }
}

/* Ensure content sits above mesh */
.howto > * { position: relative; z-index: 1; }

/* ─── Typewriter effect ─── */
[data-typewriter] .tw-word {
  display: inline-block;
  white-space: nowrap;
}
[data-typewriter] .tw-char {
  display: inline;
  opacity: 0;
  transition: opacity 80ms ease-out;
}
[data-typewriter] .tw-char.on { opacity: 1; }
[data-typewriter] .tw-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.92em;
  margin-left: 0.04em;
  background: currentColor;
  vertical-align: -0.12em;
  animation: twCaretBlink 0.85s steps(2) infinite;
  border-radius: 1px;
}
[data-typewriter] .tw-caret.done {
  animation: twCaretFadeOut 0.6s ease-out forwards;
}
@keyframes twCaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes twCaretFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: scaleY(0.6); }
}
@media (prefers-reduced-motion: reduce) {
  [data-typewriter] .tw-char { opacity: 1 !important; }
  [data-typewriter] .tw-caret { display: none; }
}

/* ─── Cena Copiloto — bullets ─── */
.scene.copiloto .fullbleed-content { align-items: center; }
.copiloto-bullets {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 460px;
}
.copiloto-bullets li {
  position: relative;
  padding: 12px 18px 12px 38px;
  background: linear-gradient(180deg, rgba(248,246,241,0.07), rgba(248,246,241,0.025));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.copiloto-bullets li::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #c4dcdf, #8BAAAD);
  box-shadow: 0 0 10px rgba(139,170,173,0.55);
  transform: translateY(-50%);
}
@media (max-width: 720px) {
  .copiloto-bullets li { font-size: 13px; padding: 11px 14px 11px 34px; }
}

/* ─── Cena Copiloto — flip image + overlay reforçado ─── */
.scene.copiloto .fullbleed-img {
  transform: scaleX(-1);
}
.scene.copiloto .fullbleed-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Stack: solid dark left half + diagonal fade + bottom vignette + slight color tint */
  background:
    /* 1) Dark base for the text column (left ~50%) */
    linear-gradient(90deg,
      rgba(10,16,25,0.97) 0%,
      rgba(10,16,25,0.93) 30%,
      rgba(10,16,25,0.70) 45%,
      rgba(10,16,25,0.30) 60%,
      transparent 75%
    ),
    /* 2) Vertical edge fades — top & bottom for nav/cta safety */
    linear-gradient(180deg,
      rgba(10,16,25,0.55) 0%,
      transparent 18%,
      transparent 80%,
      rgba(10,16,25,0.65) 100%
    );
}
/* Ensure copiloto text uses brighter inks on this darkened surface */
.scene.copiloto .fullbleed-text p { color: var(--fg-1) !important; opacity: 0.86; }
.scene.copiloto .copiloto-bullets li {
  background: linear-gradient(180deg, rgba(10,16,25,0.65), rgba(10,16,25,0.50));
  border-color: rgba(255,255,255,0.16);
  color: var(--fg-1);
}