:root {
  --bg: #fcf8fc;
  --surface: rgba(255,255,255,.86);
  --primary: #8c69a6;
  --primary-dark: #67497e;
  --primary-soft: #eadcf2;
  --text: #5b4f63;
  --text-soft: #7f7387;
  --line: rgba(140,105,166,.12);
  --shadow: 0 24px 60px rgba(103,78,121,.10);
  --shadow-soft: 0 10px 24px rgba(103,78,121,.05);
  --r-xl: 32px;
  --container: 1120px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(231,215,240,.86), transparent 24%),
    radial-gradient(circle at left 36%, rgba(245,237,248,.92), transparent 18%),
    linear-gradient(180deg, #fcf8fc 0%, #f8f3fa 100%);
  line-height: 1.65;
  overflow-x: clip;
  width: 100%;
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 86px;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; }
button { font: inherit; }

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(232,216,241,.95), transparent 26%),
    linear-gradient(180deg, rgba(252,248,252,.98) 0%, rgba(248,243,250,.98) 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .75s ease, visibility .75s ease;
}

.intro-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-card {
  min-width: min(90vw, 360px);
  padding: 30px 28px;
  border-radius: 30px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(140,105,166,.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  text-align: center;
  transform: scale(1);
  transition: transform .65s ease, opacity .65s ease;
}

.intro-screen.is-hidden .intro-card {
  transform: scale(.96);
  opacity: 0;
}

.intro-logo-wrap {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.32);
  border: 1px solid rgba(140,105,166,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(122,90,145,.10);
  animation: breathe 2.2s ease-in-out infinite;
}

.intro-logo-wrap img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.intro-title {
  margin: 0 0 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--primary-dark);
}

.intro-text {
  margin: 0;
  color: var(--text-soft);
  font-size: .95rem;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.bg-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.bg-orb.one {
  width: 360px;
  height: 360px;
  top: -110px;
  right: -100px;
  background: rgba(226,208,238,.55);
}

.bg-orb.two {
  width: 260px;
  height: 260px;
  left: -90px;
  top: 760px;
  background: rgba(243,234,247,.96);
}

.container {
  width: min(92%, var(--container));
  margin: 0 auto;
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(252,248,252,.76);
  border-bottom: 1px solid rgba(255,255,255,.48);
  transition: background .22s ease, box-shadow .22s ease;
}

.header.is-scrolled {
  background: rgba(252,248,252,.93);
  box-shadow: 0 10px 24px rgba(103,78,121,.06);
}

.header-inner {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-with-logo {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.brand-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand h1 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.75rem;
  line-height: .95;
  color: var(--primary-dark);
  letter-spacing: -.02em;
}

.brand span {
  font-size: 1rem;
  color: var(--text-soft);
  font-weight: 600;
}

.btn {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-size: .97rem;
  font-weight: 700;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, opacity .22s ease;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(135deg, #9876b1 0%, #7f5d98 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(128,93,153,.16);
}

.btn-secondary {
  background: rgba(255,255,255,.76);
  color: var(--primary-dark);
  border-color: rgba(140,105,166,.10);
  box-shadow: none;
  opacity: .88;
}

.hero {
  padding: 50px 0 18px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 48px;
  align-items: center;
}

.hero-copy {
  max-width: 640px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.title {
  margin: 0 0 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.6rem, 7vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--primary-dark);
}

.desc {
  font-size: 1rem;
  max-width: 560px;
  margin: 0 0 20px;
}

.desc strong {
  color: var(--primary-dark);
  font-weight: 800;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.actions-center {
  justify-content: center;
}

.hero-points {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 640px;
}

.hero-point {
  padding: 13px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,238,249,.96));
  border: 1px solid rgba(140,105,166,.14);
  box-shadow: 0 12px 22px rgba(103,78,121,.06);
  font-size: .88rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: center;
  line-height: 1.4;
}

.image-card {
  width: 100%;
  padding: 10px;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.image-card img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  border-radius: 22px;
}

.carousel-section {
  padding: 10px 0 18px;
}

.carousel-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 16px;
}

.carousel-heading h3 {
  margin: 0 0 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  color: var(--primary-dark);
  line-height: 1;
}

.carousel-heading p {
  margin: 0;
  color: var(--text-soft);
  font-size: .96rem;
}

.carousel-box {
  position: relative;
  padding: 12px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(246,239,248,.96));
  border: 1px solid rgba(140,105,166,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.carousel-viewport {
  overflow: hidden;
  border-radius: 22px;
  touch-action: pan-y;
}

.carousel-track {
  display: flex;
  transition: transform .38s ease;
  will-change: transform;
}

.carousel-slide {
  min-width: 100%;
  flex: 0 0 100%;
  user-select: none;
}

.carousel-slide img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: 22px;
  pointer-events: none;
  -webkit-user-drag: none;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(140,105,166,.14);
  background: rgba(255,255,255,.95);
  color: var(--primary-dark);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}

.carousel-arrow.prev { left: 18px; }
.carousel-arrow.next { right: 18px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: rgba(140,105,166,.22);
  cursor: pointer;
  transition: width .22s ease, background .22s ease;
  -webkit-tap-highlight-color: transparent;
}

.carousel-dot.is-active {
  width: 24px;
  background: var(--primary);
}

.section {
  padding: 26px 0;
}

.section-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 22px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #dcc8ea;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.pill.soft {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.section-heading h2,
.journey-copy h2,
.investment h2 {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  color: var(--primary-dark);
}

.section-heading p,
.journey-copy p {
  margin: 0;
  color: var(--text-soft);
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.card,
.journey-wrap,
.investment,
.closing {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.card { padding: 24px; }

.card.soft {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,239,248,.96));
}

.card h3 {
  margin: 0 0 14px;
  color: var(--primary-dark);
  font-size: 1.05rem;
}

ul.clean {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

ul.clean li {
  position: relative;
  padding-left: 20px;
  font-size: .97rem;
}

ul.clean li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(234,220,242,.82);
}

.journey-wrap {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 22px;
  padding: 24px;
}

.steps {
  display: grid;
  gap: 12px;
}

.step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.num {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #9775b0 0%, #805e99 100%);
  color: #fff;
  font-weight: 800;
  font-size: .88rem;
  flex-shrink: 0;
}

.step h3 {
  margin: 0 0 4px;
  color: var(--primary-dark);
  font-size: .98rem;
}

.step p {
  margin: 0;
  color: var(--text-soft);
  font-size: .9rem;
}

.investment {
  text-align: center;
  padding: 30px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,239,248,.98));
}

.price {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.15rem, 4vw, 3.1rem);
  line-height: .96;
  color: var(--primary-dark);
  margin: 8px 0 6px;
  font-weight: 700;
}

.sub {
  margin: 0 0 18px;
  color: var(--text-soft);
}

.closing {
  padding: 34px 20px;
  text-align: center;
  background: linear-gradient(135deg, #9b7caf 0%, #87689c 100%);
  color: #fff;
}

.closing .script {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-style: italic;
  line-height: 1.1;
}

.closing .sub2 {
  margin: 0 0 12px;
  font-size: 1rem;
  opacity: .96;
}

.closing h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .04em;
}

.fab-nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 45;
  width: 124px;
  height: 124px;
  pointer-events: none;
}

.fab-items {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.logo-fab {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255,255,255,.24);
  border: 1px solid rgba(140,105,166,.18);
  box-shadow: 0 10px 22px rgba(122, 90, 145, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.logo-fab img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  display: block;
  background: transparent;
  border: 0;
  border-radius: 50%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.logo-fab:focus,
.logo-fab:focus-visible,
.logo-fab:active {
  outline: none !important;
  box-shadow: 0 10px 22px rgba(122, 90, 145, .08);
}

.fab-nav.is-open .logo-fab,
.logo-fab:hover {
  transform: translate(-50%, -50%) translateY(-2px) scale(1.03);
  background: rgba(255,255,255,.30);
  border-color: rgba(140,105,166,.24);
  box-shadow: 0 14px 28px rgba(122, 90, 145, .12);
}

.fab-item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.72);
  opacity: 0;
  min-width: 98px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.94);
  color: var(--primary-dark);
  border: 1px solid rgba(140,105,166,.12);
  box-shadow: var(--shadow-soft);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    opacity .24s ease,
    background .22s ease;
  -webkit-tap-highlight-color: transparent;
}

.fab-nav.is-open .fab-item {
  opacity: 1;
  pointer-events: auto;
}

.fab-nav.is-open .fab-item:nth-child(1) {
  transform: translate(-50%, -50%) translate(-142px, -98px) scale(1);
  transition-delay: .02s;
}

.fab-nav.is-open .fab-item:nth-child(2) {
  transform: translate(-50%, -50%) translate(-74px, -156px) scale(1);
  transition-delay: .06s;
}

.fab-nav.is-open .fab-item:nth-child(3) {
  transform: translate(-50%, -50%) translate(0, -178px) scale(1);
  transition-delay: .10s;
}

.fab-nav.is-open .fab-item:nth-child(4) {
  transform: translate(-50%, -50%) translate(74px, -156px) scale(1);
  transition-delay: .14s;
}

.fab-nav.is-open .fab-item:nth-child(5) {
  transform: translate(-50%, -50%) translate(142px, -98px) scale(1);
  transition-delay: .18s;
}

.fab-nav.is-open .fab-item:nth-child(1):hover { transform: translate(-50%, -50%) translate(-142px, -98px) scale(1.02); }
.fab-nav.is-open .fab-item:nth-child(2):hover { transform: translate(-50%, -50%) translate(-74px, -156px) scale(1.02); }
.fab-nav.is-open .fab-item:nth-child(3):hover { transform: translate(-50%, -50%) translate(0, -178px) scale(1.02); }
.fab-nav.is-open .fab-item:nth-child(4):hover { transform: translate(-50%, -50%) translate(74px, -156px) scale(1.02); }
.fab-nav.is-open .fab-item:nth-child(5):hover { transform: translate(-50%, -50%) translate(142px, -98px) scale(1.02); }

.wa {
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 40;
  min-height: 48px;
  padding: 0 15px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #fff7ff 100%);
  color: var(--primary-dark);
  border: 1px solid rgba(139,103,165,.14);
  box-shadow: 0 16px 30px rgba(122, 90, 145, .12);
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.wa::before {
  content: '✿';
  font-size: .88rem;
  line-height: 1;
  color: #8f69a9;
}

@media (max-width: 980px) {
  .hero-grid,
  .cards,
  .journey-wrap {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    text-align: center;
  }

  .actions {
    justify-content: center;
  }

  .hero-points {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .hero-visual {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }

  .carousel-slide img {
    height: 360px;
  }
}

@media (max-width: 760px) {
  .header-inner {
    min-height: auto;
    padding: 14px 0;
  }

  .brand-logo { width: 58px; height: 58px; }
  .brand h1 { font-size: 2.3rem; }
  .brand span { font-size: .9rem; }

  .hero { padding-top: 18px; }
  .title { font-size: clamp(3rem, 12vw, 4.2rem); }
  .desc { font-size: .97rem; }
  .image-card img { height: 420px; border-radius: 18px; }

  .carousel-arrow { width: 40px; height: 40px; font-size: 1.15rem; }
  .carousel-arrow.prev { left: 12px; }
  .carousel-arrow.next { right: 12px; }

  .card,
  .journey-wrap,
  .investment,
  .closing,
  .carousel-box {
    border-radius: 24px;
  }

  .fab-nav {
    width: 108px;
    height: 108px;
  }

  .logo-fab {
    width: 92px;
    height: 92px;
  }

  .logo-fab img {
    width: 74px;
    height: 74px;
  }

  .fab-item {
    min-width: 90px;
    min-height: 40px;
    font-size: .78rem;
  }

  .fab-nav.is-open .fab-item:nth-child(1) { transform: translate(-50%, -50%) translate(-112px, -88px) scale(1); }
  .fab-nav.is-open .fab-item:nth-child(2) { transform: translate(-50%, -50%) translate(-58px, -138px) scale(1); }
  .fab-nav.is-open .fab-item:nth-child(3) { transform: translate(-50%, -50%) translate(0, -156px) scale(1); }
  .fab-nav.is-open .fab-item:nth-child(4) { transform: translate(-50%, -50%) translate(58px, -138px) scale(1); }
  .fab-nav.is-open .fab-item:nth-child(5) { transform: translate(-50%, -50%) translate(112px, -88px) scale(1); }

  .fab-nav.is-open .fab-item:nth-child(1):hover { transform: translate(-50%, -50%) translate(-112px, -88px) scale(1.02); }
  .fab-nav.is-open .fab-item:nth-child(2):hover { transform: translate(-50%, -50%) translate(-58px, -138px) scale(1.02); }
  .fab-nav.is-open .fab-item:nth-child(3):hover { transform: translate(-50%, -50%) translate(0, -156px) scale(1.02); }
  .fab-nav.is-open .fab-item:nth-child(4):hover { transform: translate(-50%, -50%) translate(58px, -138px) scale(1.02); }
  .fab-nav.is-open .fab-item:nth-child(5):hover { transform: translate(-50%, -50%) translate(112px, -88px) scale(1.02); }
}

@media (max-width: 560px) {
  .container { width: min(94%, var(--container)); }
  .brand-with-logo { gap: 12px; }
  .brand-logo { width: 52px; height: 52px; }
  .brand h1 { font-size: 2.1rem; }
  .brand span { font-size: .86rem; }

  .eyebrow {
    font-size: .7rem;
    min-height: 32px;
    padding: 7px 12px;
    margin-bottom: 12px;
  }

  .title {
    font-size: 2.8rem;
    line-height: .94;
    margin-bottom: 12px;
  }

  .actions {
    flex-direction: column;
  }

  .btn { width: 100%; }

  .btn-secondary {
    width: 100%;
    opacity: .78;
  }

  .hero-points {
    gap: 8px;
    margin-top: 16px;
  }

  .hero-point {
    padding: 12px 13px;
    font-size: .85rem;
    border-radius: 16px;
  }

  .image-card {
    padding: 8px;
    border-radius: 22px;
  }

  .image-card img { height: 350px; }

  .carousel-section { padding-top: 8px; }
  .carousel-heading { margin-bottom: 14px; }
  .carousel-heading h3 { font-size: 1.85rem; }
  .carousel-heading p { font-size: .92rem; }

  .carousel-box { padding: 8px; }

  .carousel-slide img {
    height: 240px;
    border-radius: 18px;
  }

  .carousel-arrow {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }

  .carousel-dots {
    gap: 7px;
    margin-top: 12px;
  }

  .carousel-dot { width: 8px; height: 8px; }
  .carousel-dot.is-active { width: 20px; }

  .section { padding: 18px 0; }

  .pill {
    width: 100%;
    min-height: 40px;
    font-size: .74rem;
  }

  .section-heading { margin-bottom: 18px; }

  .section-heading h2,
  .journey-copy h2,
  .investment h2 {
    font-size: 1.9rem;
  }

  .section-heading p,
  .journey-copy p {
    font-size: .93rem;
  }

  .card,
  .journey-wrap,
  .investment,
  .closing {
    padding: 20px 15px;
  }

  .card h3,
  .step h3 {
    font-size: .96rem;
  }

  .clean li { font-size: .93rem; }

  .step {
    padding: 13px;
    border-radius: 16px;
  }

  .num {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: .82rem;
  }

  .step p { font-size: .87rem; }

  .price { font-size: 2.2rem; }
  .sub { font-size: .92rem; }

  .closing .script { font-size: 1.65rem; }
  .closing .sub2 { font-size: .93rem; }
  .closing h2 { font-size: 2rem; }

  .fab-nav {
    bottom: 14px;
    width: 96px;
    height: 96px;
  }

  .logo-fab {
    width: 84px;
    height: 84px;
  }

  .logo-fab img {
    width: 68px;
    height: 68px;
  }

  .fab-item {
    min-width: 84px;
    min-height: 38px;
    padding: 0 12px;
    font-size: .74rem;
  }

  .fab-nav.is-open .fab-item:nth-child(1) { transform: translate(-50%, -50%) translate(-94px, -80px) scale(1); }
  .fab-nav.is-open .fab-item:nth-child(2) { transform: translate(-50%, -50%) translate(-48px, -124px) scale(1); }
  .fab-nav.is-open .fab-item:nth-child(3) { transform: translate(-50%, -50%) translate(0, -142px) scale(1); }
  .fab-nav.is-open .fab-item:nth-child(4) { transform: translate(-50%, -50%) translate(48px, -124px) scale(1); }
  .fab-nav.is-open .fab-item:nth-child(5) { transform: translate(-50%, -50%) translate(94px, -80px) scale(1); }

  .fab-nav.is-open .fab-item:nth-child(1):hover { transform: translate(-50%, -50%) translate(-94px, -80px) scale(1.02); }
  .fab-nav.is-open .fab-item:nth-child(2):hover { transform: translate(-50%, -50%) translate(-48px, -124px) scale(1.02); }
  .fab-nav.is-open .fab-item:nth-child(3):hover { transform: translate(-50%, -50%) translate(0, -142px) scale(1.02); }
  .fab-nav.is-open .fab-item:nth-child(4):hover { transform: translate(-50%, -50%) translate(48px, -124px) scale(1.02); }
  .fab-nav.is-open .fab-item:nth-child(5):hover { transform: translate(-50%, -50%) translate(94px, -80px) scale(1.02); }

  .wa {
    right: 10px;
    bottom: 14px;
    min-height: 44px;
    padding: 0 13px;
    font-size: .8rem;
  }

  .intro-logo-wrap {
    width: 84px;
    height: 84px;
  }

  .intro-logo-wrap img {
    width: 62px;
    height: 62px;
  }

  .intro-title {
    font-size: 2rem;
  }
}

/* ==========================================================
   Atualização Ela Plena — intro fluida, navegação e carrossel admin
   ========================================================== */

* {
  -webkit-tap-highlight-color: transparent;
}

*:focus,
*:focus-visible,
button:focus,
button:focus-visible,
a:focus,
a:focus-visible {
  outline: none !important;
}

html {
  scroll-padding-top: 104px;
}

body.is-intro-running {
  overflow: hidden;
}

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(252, 248, 252, .76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .54s ease, visibility .54s ease;
  overflow: hidden;
}

.intro-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(234,220,242,.88), transparent 26%),
    radial-gradient(circle at 80% 16%, rgba(255,255,255,.72), transparent 22%),
    linear-gradient(180deg, rgba(252,248,252,.96) 0%, rgba(248,243,250,.94) 100%);
}

.intro-glow {
  position: absolute;
  width: min(62vw, 460px);
  height: min(62vw, 460px);
  border-radius: 999px;
  background: rgba(151, 117, 176, .12);
  filter: blur(24px);
  animation: introGlow 3.05s ease both;
}

.intro-logo-wrap.intro-logo-traveler {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 156px;
  height: 156px;
  margin: 0;
  z-index: 3;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(140,105,166,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 22px 48px rgba(122,90,145,.16);
  transform: translate(-50%, -50%) scale(.86) rotate(-7deg);
  animation: elaLogoTravel 3.05s cubic-bezier(.18,.86,.18,1) both;
  will-change: top, width, height, transform, opacity;
}

.intro-logo-wrap.intro-logo-traveler img {
  width: 118px;
  height: 118px;
  object-fit: contain;
  animation: elaLogoImageTravel 3.05s cubic-bezier(.18,.86,.18,1) both;
}

.intro-copy {
  position: relative;
  z-index: 2;
  width: min(90vw, 420px);
  margin-top: 242px;
  padding: 0 18px;
  text-align: center;
  animation: introCopy 3.05s ease both;
}

.intro-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-screen.is-hidden ~ .fab-nav,
.intro-screen.is-hidden ~ .wa {
  opacity: 1;
}

.intro-screen:not(.is-hidden) ~ .fab-nav,
.intro-screen:not(.is-hidden) ~ .wa {
  opacity: 0;
  pointer-events: none;
}

@keyframes introGlow {
  0% { transform: scale(.72); opacity: .2; }
  28% { transform: scale(1); opacity: 1; }
  78% { transform: scale(.92); opacity: .88; }
  100% { transform: scale(.34) translateY(54vh); opacity: .1; }
}

@keyframes introCopy {
  0%, 12% { opacity: 0; transform: translateY(10px); }
  24%, 58% { opacity: 1; transform: translateY(0); }
  82%, 100% { opacity: 0; transform: translateY(10px); }
}

@keyframes elaLogoTravel {
  0% {
    top: 50%;
    width: 156px;
    height: 156px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.84) rotate(-7deg);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  48% {
    top: 50%;
    width: 156px;
    height: 156px;
    transform: translate(-50%, -50%) scale(1.02) rotate(12deg);
  }
  74% {
    top: 50%;
    width: 156px;
    height: 156px;
    transform: translate(-50%, -50%) scale(1.04) rotate(360deg);
  }
  100% {
    top: calc(100vh - 80px);
    width: 104px;
    height: 104px;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
  }
}

@keyframes elaLogoImageTravel {
  0%, 74% { width: 118px; height: 118px; }
  100% { width: 84px; height: 84px; }
}

.btn:active,
.carousel-arrow:active,
.carousel-dot:active,
.logo-fab:active,
.fab-item:active,
.wa:active {
  transform: scale(.98);
}

.logo-fab {
  animation: softFabGlow 3.6s ease-in-out infinite;
}

@keyframes softFabGlow {
  0%, 100% {
    box-shadow: 0 10px 22px rgba(122, 90, 145, .08), 0 0 0 rgba(140,105,166,0);
  }
  50% {
    box-shadow: 0 14px 28px rgba(122, 90, 145, .12), 0 0 28px rgba(140,105,166,.10);
  }
}

.carousel-box {
  transition: transform .22s ease, box-shadow .22s ease;
}

.carousel-box:hover {
  transform: translateY(-1px);
  box-shadow: 0 28px 66px rgba(103,78,121,.12);
}

.carousel-track {
  cursor: grab;
}

.carousel-track.is-dragging {
  cursor: grabbing;
}

.carousel-slide img {
  background: #f3edf7;
}

@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }

  .intro-logo-wrap.intro-logo-traveler {
    width: 132px;
    height: 132px;
  }

  .intro-logo-wrap.intro-logo-traveler img {
    width: 100px;
    height: 100px;
  }

  .intro-copy {
    margin-top: 214px;
  }

  @keyframes elaLogoTravel {
    0% {
      top: 50%;
      width: 132px;
      height: 132px;
      opacity: 0;
      transform: translate(-50%, -50%) scale(.84) rotate(-7deg);
    }
    16% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    48% {
      top: 50%;
      width: 132px;
      height: 132px;
      transform: translate(-50%, -50%) scale(1.02) rotate(12deg);
    }
    74% {
      top: 50%;
      width: 132px;
      height: 132px;
      transform: translate(-50%, -50%) scale(1.04) rotate(360deg);
    }
    100% {
      top: calc(100vh - 60px);
      width: 84px;
      height: 84px;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(360deg);
    }
  }

  @keyframes elaLogoImageTravel {
    0%, 74% { width: 100px; height: 100px; }
    100% { width: 68px; height: 68px; }
  }
}

/* ==========================================================
   Ajuste v2 — intro clean, FAB estável e carrossel corrigido
   ========================================================== */

.intro-screen {
  background: rgba(252, 248, 252, .72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.intro-logo-wrap.intro-logo-traveler {
  width: 156px;
  height: 156px;
  transform: translate(-50%, -50%) scale(.9) rotate(0deg);
  animation: elaLogoTravelClean 3.05s cubic-bezier(.18,.86,.18,1) both !important;
}

.intro-logo-wrap.intro-logo-traveler img {
  width: 118px;
  height: 118px;
  animation: elaLogoImageTravelClean 3.05s cubic-bezier(.18,.86,.18,1) both !important;
}

.intro-copy {
  animation: introCopyClean 3.05s ease both !important;
}

@keyframes elaLogoTravelClean {
  0% {
    top: 50%;
    width: 156px;
    height: 156px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.88) rotate(0deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  58% {
    top: 50%;
    width: 156px;
    height: 156px;
    transform: translate(-50%, -50%) scale(1.015) rotate(0deg);
  }
  88% {
    top: calc(100vh - 80px);
    width: 104px;
    height: 104px;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    top: calc(100vh - 80px);
    width: 104px;
    height: 104px;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes elaLogoImageTravelClean {
  0%, 58% { width: 118px; height: 118px; }
  88%, 100% { width: 84px; height: 84px; }
}

@keyframes introCopyClean {
  0%, 10% { opacity: 0; transform: translateY(8px); }
  24%, 56% { opacity: 1; transform: translateY(0); }
  78%, 100% { opacity: 0; transform: translateY(8px); }
}

.logo-fab {
  overflow: visible !important;
  isolation: isolate;
  animation: elaFabLilacGlow 3.4s ease-in-out infinite !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.logo-fab::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(140,105,166,.18);
  opacity: .72;
  box-shadow: 0 0 0 0 rgba(140,105,166,0), 0 0 20px rgba(140,105,166,.08);
  animation: elaFabOuterPulse 3.4s ease-in-out infinite;
}

.logo-fab img {
  position: relative;
  z-index: 2;
}

.fab-nav.is-open .logo-fab,
.logo-fab:hover {
  transform: translate(-50%, -50%) scale(1.025) !important;
  background: rgba(255,255,255,.30);
  border-color: rgba(140,105,166,.24);
}

.logo-fab:active {
  transform: translate(-50%, -50%) scale(1.018) !important;
}

@keyframes elaFabLilacGlow {
  0%, 100% {
    box-shadow: 0 10px 22px rgba(122, 90, 145, .08), 0 0 0 rgba(140,105,166,0);
  }
  50% {
    box-shadow: 0 14px 28px rgba(122, 90, 145, .12), 0 0 30px rgba(140,105,166,.18);
  }
}

@keyframes elaFabOuterPulse {
  0%, 100% {
    opacity: .50;
    transform: scale(.98);
    box-shadow: 0 0 12px rgba(140,105,166,.08), 0 0 24px rgba(140,105,166,.06);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
    box-shadow: 0 0 18px rgba(140,105,166,.16), 0 0 38px rgba(140,105,166,.12);
  }
}

.carousel-arrow {
  pointer-events: auto;
  z-index: 8;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.carousel-arrow:hover {
  transform: translateY(-50%) scale(1.04);
}

.carousel-arrow:active {
  transform: translateY(-50%) scale(.98) !important;
}

.carousel-viewport {
  touch-action: pan-y;
}

.carousel-track {
  transform: translate3d(0,0,0);
}

.carousel-track.is-dragging {
  cursor: grabbing;
}

.carousel-box.is-single .carousel-arrow,
.carousel-box.is-single .carousel-dots {
  display: none;
}

@media (max-width: 760px) {
  .intro-logo-wrap.intro-logo-traveler {
    width: 132px;
    height: 132px;
    animation-name: elaLogoTravelCleanMobile !important;
  }

  .intro-logo-wrap.intro-logo-traveler img {
    width: 100px;
    height: 100px;
    animation-name: elaLogoImageTravelCleanMobile !important;
  }

  @keyframes elaLogoTravelCleanMobile {
    0% {
      top: 50%;
      width: 132px;
      height: 132px;
      opacity: 0;
      transform: translate(-50%, -50%) scale(.88) rotate(0deg);
    }
    18% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    58% {
      top: 50%;
      width: 132px;
      height: 132px;
      transform: translate(-50%, -50%) scale(1.015) rotate(0deg);
    }
    88%, 100% {
      top: calc(100vh - 72px);
      width: 92px;
      height: 92px;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
  }

  @keyframes elaLogoImageTravelCleanMobile {
    0%, 58% { width: 100px; height: 100px; }
    88%, 100% { width: 74px; height: 74px; }
  }
}

@media (max-width: 560px) {
  .intro-logo-wrap.intro-logo-traveler {
    animation-name: elaLogoTravelCleanSmall !important;
  }

  .intro-logo-wrap.intro-logo-traveler img {
    animation-name: elaLogoImageTravelCleanSmall !important;
  }

  @keyframes elaLogoTravelCleanSmall {
    0% {
      top: 50%;
      width: 132px;
      height: 132px;
      opacity: 0;
      transform: translate(-50%, -50%) scale(.88) rotate(0deg);
    }
    18% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    58% {
      top: 50%;
      width: 132px;
      height: 132px;
      transform: translate(-50%, -50%) scale(1.015) rotate(0deg);
    }
    88%, 100% {
      top: calc(100vh - 62px);
      width: 84px;
      height: 84px;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
  }

  @keyframes elaLogoImageTravelCleanSmall {
    0%, 58% { width: 100px; height: 100px; }
    88%, 100% { width: 68px; height: 68px; }
  }
}

/* V5: suporte a vídeos no carrossel */
.carousel-slide video {
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: 22px;
  display: block;
  background: #efe5f5;
}

.carousel-slide.has-video {
  position: relative;
}

.carousel-slide.has-video::after {
  content: 'Vídeo';
  position: absolute;
  left: 18px;
  top: 18px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(140,105,166,.14);
  color: var(--primary-dark);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 12px 22px rgba(103,78,121,.08);
  pointer-events: none;
}

@media (max-width: 980px) {
  .carousel-slide video {
    height: 360px;
  }
}

@media (max-width: 560px) {
  .carousel-slide video {
    height: 240px;
    border-radius: 18px;
  }

  .carousel-slide.has-video::after {
    left: 12px;
    top: 12px;
    min-height: 28px;
    padding: 0 10px;
    font-size: .68rem;
  }
}

/* ==========================================================
   Ajuste v8 — intro alinhada ao FAB real + brilho lilás fumaça
   ========================================================== */
:root {
  --intro-fab-x: 50vw;
  --intro-fab-y: calc(100vh - 70px);
  --intro-fab-size: 92px;
  --intro-fab-img-size: 74px;
}

.intro-logo-wrap.intro-logo-traveler {
  left: 50%;
  top: 50%;
  animation: elaLogoTravelAligned 3.05s cubic-bezier(.18,.86,.18,1) both !important;
  will-change: left, top, width, height, transform, opacity;
}

.intro-logo-wrap.intro-logo-traveler img {
  animation: elaLogoImageTravelAligned 3.05s cubic-bezier(.18,.86,.18,1) both !important;
}

@keyframes elaLogoTravelAligned {
  0% {
    left: 50%;
    top: 50%;
    width: 156px;
    height: 156px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.88) rotate(0deg);
  }
  18% {
    left: 50%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  58% {
    left: 50%;
    top: 50%;
    width: 156px;
    height: 156px;
    transform: translate(-50%, -50%) scale(1.015) rotate(0deg);
  }
  86% {
    left: var(--intro-fab-x);
    top: var(--intro-fab-y);
    width: var(--intro-fab-size);
    height: var(--intro-fab-size);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    left: var(--intro-fab-x);
    top: var(--intro-fab-y);
    width: var(--intro-fab-size);
    height: var(--intro-fab-size);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes elaLogoImageTravelAligned {
  0%, 58% {
    width: 118px;
    height: 118px;
  }
  86%, 100% {
    width: var(--intro-fab-img-size);
    height: var(--intro-fab-img-size);
  }
}

.logo-fab {
  overflow: visible !important;
  isolation: isolate;
  animation: elaFabSoftPresence 3.8s ease-in-out infinite !important;
}

.logo-fab::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
  border: 0 !important;
  opacity: .72;
  background:
    radial-gradient(circle, rgba(166,126,190,.24) 0%, rgba(166,126,190,.15) 30%, rgba(166,126,190,.07) 48%, transparent 70%);
  filter: blur(13px);
  transform: scale(.96);
  animation: elaFabSmokeGlow 3.8s ease-in-out infinite;
}

.logo-fab::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,255,255,.36) 0%, rgba(255,255,255,.14) 42%, transparent 72%);
  filter: blur(5px);
  opacity: .48;
  animation: elaFabInnerHaze 3.8s ease-in-out infinite;
}

@keyframes elaFabSoftPresence {
  0%, 100% {
    box-shadow:
      0 10px 22px rgba(122, 90, 145, .08),
      0 0 18px rgba(140,105,166,.08);
  }
  50% {
    box-shadow:
      0 14px 30px rgba(122, 90, 145, .13),
      0 0 34px rgba(166,126,190,.20);
  }
}

@keyframes elaFabSmokeGlow {
  0%, 100% {
    opacity: .45;
    transform: scale(.92);
    filter: blur(12px);
  }
  50% {
    opacity: .95;
    transform: scale(1.08);
    filter: blur(16px);
  }
}

@keyframes elaFabInnerHaze {
  0%, 100% {
    opacity: .32;
    transform: scale(.98);
  }
  50% {
    opacity: .62;
    transform: scale(1.04);
  }
}

.fab-nav.is-open .logo-fab,
.logo-fab:hover {
  transform: translate(-50%, -50%) scale(1.022) !important;
}

.logo-fab:active {
  transform: translate(-50%, -50%) scale(1.014) !important;
}

@media (max-width: 760px) {
  .intro-logo-wrap.intro-logo-traveler {
    animation-name: elaLogoTravelAligned !important;
  }

  .intro-logo-wrap.intro-logo-traveler img {
    animation-name: elaLogoImageTravelAligned !important;
  }
}

@media (max-width: 560px) {
  .intro-logo-wrap.intro-logo-traveler {
    animation-name: elaLogoTravelAligned !important;
  }

  .intro-logo-wrap.intro-logo-traveler img {
    animation-name: elaLogoImageTravelAligned !important;
  }
}

/* ==========================================================
   Ajuste v9 — intro 100% alinhada + logo igual ao FAB + brilho fumaça lilás
   ========================================================== */
:root {
  --intro-start-size: 156px;
  --intro-start-img-size: 118px;
  --intro-fab-size: 104px;
  --intro-fab-img-size: 84px;
  --intro-travel-x: 0px;
  --intro-travel-y: calc(50vh - 70px);
}

.intro-screen {
  background: rgba(252, 248, 252, .72) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.intro-logo-wrap.intro-logo-traveler {
  position: fixed !important;
  left: 50vw !important;
  top: 50vh !important;
  width: var(--intro-start-size) !important;
  height: var(--intro-start-size) !important;
  margin: 0 !important;
  z-index: 4 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.24) !important;
  border: 1px solid rgba(140,105,166,.18) !important;
  box-shadow:
    0 10px 22px rgba(122, 90, 145, .08),
    0 0 34px rgba(166,126,190,.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  overflow: visible !important;
  transform-origin: center center !important;
  animation: elaIntroTravelExactV9 3.05s cubic-bezier(.18,.86,.18,1) both !important;
  will-change: transform, width, height, opacity !important;
}

.intro-logo-wrap.intro-logo-traveler::before {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle,
      rgba(174,134,203,.38) 0%,
      rgba(174,134,203,.22) 26%,
      rgba(174,134,203,.10) 47%,
      rgba(174,134,203,.04) 62%,
      transparent 76%);
  filter: blur(12px);
  opacity: .88;
  animation: elaIntroSmokeV9 3.05s ease both;
}

.intro-logo-wrap.intro-logo-traveler img {
  width: var(--intro-start-img-size) !important;
  height: var(--intro-start-img-size) !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  animation: elaIntroImageExactV9 3.05s cubic-bezier(.18,.86,.18,1) both !important;
}

@keyframes elaIntroTravelExactV9 {
  0% {
    width: var(--intro-start-size);
    height: var(--intro-start-size);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.88);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  58% {
    width: var(--intro-start-size);
    height: var(--intro-start-size);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.012);
  }
  88% {
    width: var(--intro-fab-size);
    height: var(--intro-fab-size);
    opacity: 1;
    transform: translate(calc(-50% + var(--intro-travel-x)), calc(-50% + var(--intro-travel-y))) scale(1);
  }
  100% {
    width: var(--intro-fab-size);
    height: var(--intro-fab-size);
    opacity: 1;
    transform: translate(calc(-50% + var(--intro-travel-x)), calc(-50% + var(--intro-travel-y))) scale(1);
  }
}

@keyframes elaIntroImageExactV9 {
  0%, 58% {
    width: var(--intro-start-img-size);
    height: var(--intro-start-img-size);
  }
  88%, 100% {
    width: var(--intro-fab-img-size);
    height: var(--intro-fab-img-size);
  }
}

@keyframes elaIntroSmokeV9 {
  0% { opacity: 0; transform: scale(.78); filter: blur(10px); }
  16%, 58% { opacity: .82; transform: scale(1); filter: blur(13px); }
  88%, 100% { opacity: .52; transform: scale(.86); filter: blur(10px); }
}

.logo-fab {
  overflow: visible !important;
  isolation: isolate !important;
  background: rgba(255,255,255,.24) !important;
  border: 1px solid rgba(140,105,166,.18) !important;
  box-shadow:
    0 10px 22px rgba(122, 90, 145, .08),
    0 0 30px rgba(166,126,190,.20),
    0 0 70px rgba(174,134,203,.10) !important;
  animation: elaFabCloudPulseV9 3.65s ease-in-out infinite !important;
}

.logo-fab::before {
  content: '' !important;
  position: absolute !important;
  inset: -34px !important;
  border-radius: 50% !important;
  z-index: -2 !important;
  pointer-events: none !important;
  border: 0 !important;
  background:
    radial-gradient(circle,
      rgba(174,134,203,.42) 0%,
      rgba(174,134,203,.25) 25%,
      rgba(174,134,203,.12) 46%,
      rgba(174,134,203,.05) 63%,
      transparent 78%) !important;
  opacity: .76 !important;
  filter: blur(13px) !important;
  transform: scale(.92) !important;
  animation: elaFabSmokePulseV9 3.65s ease-in-out infinite !important;
}

.logo-fab::after {
  content: '' !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: 50% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.45) 0%,
      rgba(255,255,255,.18) 36%,
      rgba(174,134,203,.10) 55%,
      transparent 76%) !important;
  opacity: .54 !important;
  filter: blur(5px) !important;
  animation: elaFabHazePulseV9 3.65s ease-in-out infinite !important;
}

.logo-fab img {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
}

@keyframes elaFabCloudPulseV9 {
  0%, 100% {
    box-shadow:
      0 10px 22px rgba(122, 90, 145, .08),
      0 0 26px rgba(166,126,190,.18),
      0 0 62px rgba(174,134,203,.08);
  }
  50% {
    box-shadow:
      0 14px 28px rgba(122, 90, 145, .13),
      0 0 44px rgba(166,126,190,.34),
      0 0 92px rgba(174,134,203,.18);
  }
}

@keyframes elaFabSmokePulseV9 {
  0%, 100% {
    opacity: .54;
    transform: scale(.90);
    filter: blur(12px);
  }
  50% {
    opacity: 1;
    transform: scale(1.11);
    filter: blur(17px);
  }
}

@keyframes elaFabHazePulseV9 {
  0%, 100% {
    opacity: .36;
    transform: scale(.98);
  }
  50% {
    opacity: .72;
    transform: scale(1.05);
  }
}

.fab-nav.is-open .logo-fab,
.logo-fab:hover {
  transform: translate(-50%, -50%) scale(1.018) !important;
  background: rgba(255,255,255,.30) !important;
  border-color: rgba(140,105,166,.24) !important;
}

.logo-fab:active {
  transform: translate(-50%, -50%) scale(1.012) !important;
}

@media (max-width: 760px) {
  :root {
    --intro-start-size: 144px;
    --intro-start-img-size: 110px;
  }
}

@media (max-width: 560px) {
  :root {
    --intro-start-size: 132px;
    --intro-start-img-size: 104px;
  }
}


/* ==========================================================
   Ajuste v10 — abertura Ela Plena mais limpa, logo acima do texto,
   descendo e diminuindo até o tamanho exato do botão flutuante
   ========================================================== */
:root {
  --intro-origin-x: 50vw;
  --intro-origin-y: 38.5vh;
  --intro-start-size: 184px;
  --intro-start-img-size: 140px;
  --intro-fab-size: 104px;
  --intro-fab-img-size: 84px;
  --intro-travel-x: 0px;
  --intro-travel-y: 46vh;
}

.intro-logo-wrap.intro-logo-traveler {
  left: var(--intro-origin-x) !important;
  top: var(--intro-origin-y) !important;
  width: var(--intro-start-size) !important;
  height: var(--intro-start-size) !important;
  background: rgba(255,255,255,.24) !important;
  border: 1px solid rgba(140,105,166,.18) !important;
  box-shadow:
    0 10px 24px rgba(122,90,145,.10),
    0 0 34px rgba(166,126,190,.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transform-origin: center center !important;
  animation: elaIntroTravelExactV10 3.05s cubic-bezier(.18,.86,.18,1) both !important;
  will-change: transform, width, height, opacity !important;
}

.intro-logo-wrap.intro-logo-traveler::before {
  inset: -34px !important;
  background:
    radial-gradient(circle,
      rgba(174,134,203,.38) 0%,
      rgba(174,134,203,.20) 28%,
      rgba(174,134,203,.09) 50%,
      rgba(174,134,203,.035) 66%,
      transparent 78%) !important;
  filter: blur(13px) !important;
  animation: elaIntroSmokeV10 3.05s ease both !important;
}

.intro-logo-wrap.intro-logo-traveler img {
  width: var(--intro-start-img-size) !important;
  height: var(--intro-start-img-size) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  animation: elaIntroImageExactV10 3.05s cubic-bezier(.18,.86,.18,1) both !important;
}

.intro-copy {
  margin-top: clamp(190px, 28vh, 260px) !important;
  animation: introCopyCleanV10 3.05s ease both !important;
}

@keyframes elaIntroTravelExactV10 {
  0% {
    width: var(--intro-start-size);
    height: var(--intro-start-size);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.86);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    width: var(--intro-start-size);
    height: var(--intro-start-size);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.01);
  }
  88% {
    width: var(--intro-fab-size);
    height: var(--intro-fab-size);
    opacity: 1;
    transform: translate(calc(-50% + var(--intro-travel-x)), calc(-50% + var(--intro-travel-y))) scale(1);
  }
  100% {
    width: var(--intro-fab-size);
    height: var(--intro-fab-size);
    opacity: 1;
    transform: translate(calc(-50% + var(--intro-travel-x)), calc(-50% + var(--intro-travel-y))) scale(1);
  }
}

@keyframes elaIntroImageExactV10 {
  0%, 50% {
    width: var(--intro-start-img-size);
    height: var(--intro-start-img-size);
  }
  88%, 100% {
    width: var(--intro-fab-img-size);
    height: var(--intro-fab-img-size);
  }
}

@keyframes elaIntroSmokeV10 {
  0% { opacity: 0; transform: scale(.78); filter: blur(10px); }
  14%, 50% { opacity: .78; transform: scale(1); filter: blur(13px); }
  88%, 100% { opacity: .48; transform: scale(.82); filter: blur(10px); }
}

@keyframes introCopyCleanV10 {
  0%, 12% { opacity: 0; transform: translateY(8px); }
  22%, 55% { opacity: 1; transform: translateY(0); }
  76%, 100% { opacity: 0; transform: translateY(-6px); }
}

@media (max-width: 760px) {
  :root {
    --intro-start-size: 164px;
    --intro-start-img-size: 126px;
  }

  .intro-copy {
    margin-top: clamp(170px, 27vh, 232px) !important;
  }
}

@media (max-width: 560px) {
  :root {
    --intro-start-size: 148px;
    --intro-start-img-size: 116px;
  }

  .intro-copy {
    margin-top: clamp(150px, 25vh, 206px) !important;
  }
}


/* ==========================================================
   V11 — ajuste final da intro: logo desce diminuindo e encaixa no FAB
   ========================================================== */
:root {
  --intro-origin-x: 50vw;
  --intro-origin-y: 35vh;
  --intro-start-size: 164px;
  --intro-start-img-size: 128px;
  --intro-copy-y: 52vh;
  --intro-fab-x: 50vw;
  --intro-fab-y: calc(100vh - 66px);
  --intro-fab-size: 104px;
  --intro-fab-img-size: 84px;
}

body.is-intro-running {
  overflow: hidden;
}

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: block !important;
  padding: 0 !important;
  background: rgba(252, 248, 252, .74) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .52s ease, visibility .52s ease;
  overflow: hidden;
}

.intro-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 32%, rgba(234,220,242,.88), transparent 27%),
    radial-gradient(circle at 80% 16%, rgba(255,255,255,.70), transparent 24%),
    linear-gradient(180deg, rgba(252,248,252,.96) 0%, rgba(248,243,250,.94) 100%);
}

.intro-glow {
  position: absolute;
  left: 50%;
  top: var(--intro-origin-y);
  width: min(62vw, 460px);
  height: min(62vw, 460px);
  border-radius: 999px;
  background: rgba(151, 117, 176, .12);
  filter: blur(26px);
  transform: translate(-50%, -50%) scale(.88);
  opacity: .85;
  animation: none !important;
  transition: top 1.18s cubic-bezier(.18,.86,.18,1), transform 1.18s cubic-bezier(.18,.86,.18,1), opacity .72s ease;
}

.intro-screen.is-flying .intro-glow {
  top: var(--intro-fab-y);
  transform: translate(-50%, -50%) scale(.34);
  opacity: .12;
}

.intro-logo-wrap.intro-logo-traveler {
  position: fixed !important;
  left: var(--intro-origin-x) !important;
  top: var(--intro-origin-y) !important;
  width: var(--intro-start-size) !important;
  height: var(--intro-start-size) !important;
  margin: 0 !important;
  z-index: 4;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.24) !important;
  border: 1px solid rgba(140,105,166,.18) !important;
  box-shadow: 0 18px 42px rgba(122, 90, 145, .14), 0 0 34px rgba(166,126,190,.14) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: visible !important;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
  animation: none !important;
  will-change: left, top, width, height, transform, opacity;
  transition:
    left 1.18s cubic-bezier(.18,.86,.18,1),
    top 1.18s cubic-bezier(.18,.86,.18,1),
    width 1.18s cubic-bezier(.18,.86,.18,1),
    height 1.18s cubic-bezier(.18,.86,.18,1),
    box-shadow .72s ease,
    opacity .24s ease;
}

.intro-logo-wrap.intro-logo-traveler::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle, rgba(166,126,190,.22) 0%, rgba(166,126,190,.12) 36%, rgba(166,126,190,.05) 54%, transparent 72%);
  filter: blur(16px);
  opacity: .70;
  transition: inset 1.18s cubic-bezier(.18,.86,.18,1), opacity .72s ease, filter .72s ease;
}

.intro-logo-wrap.intro-logo-traveler::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 42%, transparent 72%);
  filter: blur(5px);
  opacity: .44;
  transition: opacity .72s ease;
}

.intro-logo-wrap.intro-logo-traveler img {
  width: var(--intro-start-img-size) !important;
  height: var(--intro-start-img-size) !important;
  object-fit: contain;
  display: block;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50%;
  animation: none !important;
  transition: width 1.18s cubic-bezier(.18,.86,.18,1), height 1.18s cubic-bezier(.18,.86,.18,1);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.intro-screen.is-flying .intro-logo-wrap.intro-logo-traveler {
  left: var(--intro-fab-x) !important;
  top: var(--intro-fab-y) !important;
  width: var(--intro-fab-size) !important;
  height: var(--intro-fab-size) !important;
  box-shadow: 0 10px 22px rgba(122, 90, 145, .08), 0 0 30px rgba(166,126,190,.18) !important;
}

.intro-screen.is-flying .intro-logo-wrap.intro-logo-traveler::before {
  inset: -18px;
  opacity: .76;
  filter: blur(14px);
}

.intro-screen.is-flying .intro-logo-wrap.intro-logo-traveler img {
  width: var(--intro-fab-img-size) !important;
  height: var(--intro-fab-img-size) !important;
}

.intro-copy {
  position: fixed !important;
  left: 50% !important;
  top: var(--intro-copy-y) !important;
  width: min(90vw, 420px) !important;
  margin: 0 !important;
  padding: 0 18px !important;
  z-index: 3;
  text-align: center;
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1;
  animation: none !important;
  transition: opacity .45s ease, transform .45s ease;
}

.intro-screen.is-flying .intro-copy {
  opacity: 0;
  transform: translateX(-50%) translateY(10px) !important;
  pointer-events: none;
}

.intro-screen.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.intro-screen:not(.is-hidden) ~ .fab-nav,
.intro-screen:not(.is-hidden) ~ .wa {
  opacity: 0 !important;
  pointer-events: none !important;
}

.intro-screen.is-hidden ~ .fab-nav,
.intro-screen.is-hidden ~ .wa {
  opacity: 1 !important;
}

.logo-fab {
  overflow: visible !important;
  isolation: isolate;
  animation: elaFabSoftPresenceV11 3.8s ease-in-out infinite !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.logo-fab::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
  border: 0 !important;
  background: radial-gradient(circle, rgba(166,126,190,.25) 0%, rgba(166,126,190,.15) 32%, rgba(166,126,190,.06) 50%, transparent 72%);
  filter: blur(14px);
  opacity: .70;
  animation: elaFabSmokeGlowV11 3.8s ease-in-out infinite;
}

.logo-fab::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 42%, transparent 72%);
  filter: blur(5px);
  opacity: .48;
  animation: elaFabInnerHazeV11 3.8s ease-in-out infinite;
}

.fab-nav.is-open .logo-fab,
.logo-fab:hover {
  transform: translate(-50%, -50%) scale(1.022) !important;
}

.logo-fab:active {
  transform: translate(-50%, -50%) scale(1.014) !important;
}

@keyframes elaFabSoftPresenceV11 {
  0%, 100% {
    box-shadow: 0 10px 22px rgba(122, 90, 145, .08), 0 0 18px rgba(140,105,166,.08);
  }
  50% {
    box-shadow: 0 14px 30px rgba(122, 90, 145, .13), 0 0 38px rgba(166,126,190,.22);
  }
}

@keyframes elaFabSmokeGlowV11 {
  0%, 100% { opacity: .44; transform: scale(.92); filter: blur(13px); }
  50% { opacity: .98; transform: scale(1.10); filter: blur(17px); }
}

@keyframes elaFabInnerHazeV11 {
  0%, 100% { opacity: .30; transform: scale(.98); }
  50% { opacity: .62; transform: scale(1.04); }
}

@media (max-width: 560px) {
  .intro-title {
    font-size: 1.9rem;
  }

  .intro-text {
    font-size: .9rem;
  }
}


/* =========================================================
   V12 — Polimento visual final: CTAs, caixas iniciais e brilho
   ========================================================= */

.hero .actions {
  gap: 14px !important;
  margin-top: 2px;
}

.hero .actions .btn {
  position: relative;
  overflow: hidden;
  min-height: 56px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  letter-spacing: .01em;
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
}

.hero .actions .btn::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 28%, transparent 52%);
  transform: translateX(-130%);
  opacity: .55;
  transition: transform .65s ease;
}

.hero .actions .btn:hover::after {
  transform: translateX(130%);
}

.hero .actions .btn:hover {
  transform: translateY(-3px) scale(1.01) !important;
}

.hero .actions .btn:active {
  transform: translateY(-1px) scale(.985) !important;
}

.hero .actions .btn-primary {
  border: 1px solid rgba(255,255,255,.58) !important;
  background:
    linear-gradient(135deg, #a983c2 0%, #805e99 58%, #6f4d88 100%) !important;
  box-shadow:
    0 18px 36px rgba(128,93,153,.25),
    0 0 0 7px rgba(234,220,242,.42),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.hero .actions .btn-secondary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,239,250,.92)) !important;
  color: var(--primary-dark) !important;
  border: 1px solid rgba(140,105,166,.24) !important;
  box-shadow:
    0 12px 26px rgba(103,78,121,.10),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  opacity: 1 !important;
}

.hero .actions .btn-secondary::before {
  content: '✦';
  margin-right: 8px;
  font-size: .82rem;
  color: var(--primary);
  opacity: .78;
}

.hero .hero-points {
  gap: 12px !important;
  margin-top: 22px !important;
}

.hero .hero-point {
  position: relative;
  min-height: 82px;
  padding: 17px 15px 15px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at top center, rgba(234,220,242,.72), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,240,250,.90)) !important;
  border: 1px solid rgba(140,105,166,.20) !important;
  box-shadow:
    0 16px 28px rgba(103,78,121,.08),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  color: var(--primary-dark) !important;
  font-size: .9rem !important;
  line-height: 1.42 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .hero-point::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 9px;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(140,105,166,.08), rgba(140,105,166,.58), rgba(140,105,166,.08));
}

.hero .hero-point::after {
  content: '';
  position: absolute;
  inset: auto 14px 11px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(140,105,166,.14), transparent);
  pointer-events: none;
}

.logo-fab {
  animation: elaFabSoftPresenceV12 3.05s ease-in-out infinite !important;
}

.logo-fab::before {
  inset: -34px !important;
  background:
    radial-gradient(circle, rgba(179,135,205,.66) 0%, rgba(166,126,190,.42) 24%, rgba(166,126,190,.22) 43%, rgba(166,126,190,.10) 60%, transparent 78%) !important;
  filter: blur(20px) !important;
  opacity: .92 !important;
  animation: elaFabSmokeGlowV12 3.05s ease-in-out infinite !important;
}

.logo-fab::after {
  inset: -17px !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.50) 0%, rgba(234,220,242,.36) 38%, rgba(166,126,190,.16) 58%, transparent 76%) !important;
  filter: blur(9px) !important;
  opacity: .74 !important;
  animation: elaFabInnerHazeV12 3.05s ease-in-out infinite !important;
}

@keyframes elaFabSoftPresenceV12 {
  0%, 100% {
    box-shadow:
      0 10px 22px rgba(122, 90, 145, .10),
      0 0 22px rgba(166,126,190,.18),
      0 0 0 1px rgba(140,105,166,.18);
  }
  50% {
    box-shadow:
      0 16px 32px rgba(122, 90, 145, .18),
      0 0 48px rgba(166,126,190,.42),
      0 0 76px rgba(166,126,190,.22),
      0 0 0 1px rgba(140,105,166,.25);
  }
}

@keyframes elaFabSmokeGlowV12 {
  0%, 100% {
    opacity: .54;
    transform: scale(.88);
    filter: blur(18px);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
    filter: blur(24px);
  }
}

@keyframes elaFabInnerHazeV12 {
  0%, 100% {
    opacity: .42;
    transform: scale(.96);
  }
  50% {
    opacity: .92;
    transform: scale(1.08);
  }
}

@media (max-width: 560px) {
  .hero .actions .btn {
    min-height: 54px !important;
    padding: 0 20px !important;
  }

  .hero .hero-points {
    gap: 10px !important;
    margin-top: 18px !important;
  }

  .hero .hero-point {
    min-height: 68px;
    padding: 16px 13px 14px !important;
    font-size: .86rem !important;
    border-radius: 18px !important;
  }

  .logo-fab::before {
    inset: -28px !important;
    filter: blur(18px) !important;
  }
}


/* =========================================================
   V13 — Primeira dobra mais compacta + botão flutuante mais clicável
   Ajustes apenas estéticos
   ========================================================= */

.hero {
  padding: 34px 0 10px !important;
}

.hero-grid {
  gap: 38px !important;
}

.hero-copy {
  max-width: 650px;
}

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

.hero .title {
  margin-bottom: 10px !important;
}

.hero .desc {
  max-width: 610px;
  margin: 0 0 16px !important;
  line-height: 1.58 !important;
}

.hero .actions {
  margin-top: 0 !important;
  gap: 12px !important;
}

.hero .hero-points {
  margin-top: 16px !important;
  gap: 10px !important;
}

.hero .hero-point {
  min-height: 66px !important;
  padding: 14px 14px 12px !important;
  border-radius: 19px !important;
  font-size: .86rem !important;
  line-height: 1.34 !important;
  background:
    radial-gradient(circle at top center, rgba(234,220,242,.54), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,242,250,.88)) !important;
  box-shadow:
    0 10px 22px rgba(103,78,121,.055),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
}

.hero .hero-point::before {
  top: 8px !important;
  width: 26px !important;
  height: 2px !important;
  opacity: .72;
}

.hero .hero-point::after {
  opacity: .55;
}

/* Botão flutuante: presença mais clara sem parecer pesado */
.logo-fab {
  overflow: visible !important;
  border: 1px solid rgba(140,105,166,.30) !important;
  background: rgba(255,255,255,.30) !important;
  box-shadow:
    0 14px 30px rgba(122,90,145,.16),
    0 0 0 1px rgba(255,255,255,.62),
    0 0 36px rgba(164,119,194,.34) !important;
  animation: elaFabClickablePresenceV13 2.45s ease-in-out infinite !important;
}

.logo-fab::before {
  content: '' !important;
  position: absolute !important;
  inset: -42px !important;
  border-radius: 50% !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle, rgba(176,131,205,.82) 0%, rgba(176,131,205,.50) 22%, rgba(176,131,205,.23) 46%, rgba(176,131,205,.10) 64%, transparent 78%) !important;
  filter: blur(22px) !important;
  opacity: .92 !important;
  animation: elaFabSmokeGlowV13 2.45s ease-in-out infinite !important;
}

.logo-fab::after {
  content: '' !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: 50% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border: 1px solid rgba(166,126,190,.32) !important;
  background: radial-gradient(circle, rgba(255,255,255,.28), rgba(234,220,242,.16) 50%, transparent 72%) !important;
  filter: blur(4px) !important;
  opacity: .9 !important;
  animation: elaFabClickableRingV13 2.45s ease-in-out infinite !important;
}

.fab-nav.is-open .logo-fab,
.logo-fab:hover {
  transform: translate(-50%, -50%) scale(1.055) !important;
  box-shadow:
    0 18px 34px rgba(122,90,145,.20),
    0 0 0 1px rgba(255,255,255,.70),
    0 0 54px rgba(164,119,194,.48) !important;
}

.logo-fab:active {
  transform: translate(-50%, -50%) scale(1.035) !important;
}

@keyframes elaFabClickablePresenceV13 {
  0%, 100% {
    box-shadow:
      0 12px 26px rgba(122,90,145,.14),
      0 0 0 1px rgba(255,255,255,.58),
      0 0 26px rgba(164,119,194,.28);
  }
  50% {
    box-shadow:
      0 18px 36px rgba(122,90,145,.22),
      0 0 0 1px rgba(255,255,255,.74),
      0 0 56px rgba(164,119,194,.58),
      0 0 88px rgba(164,119,194,.28);
  }
}

@keyframes elaFabSmokeGlowV13 {
  0%, 100% {
    opacity: .58;
    transform: scale(.88);
    filter: blur(20px);
  }
  50% {
    opacity: 1;
    transform: scale(1.20);
    filter: blur(27px);
  }
}

@keyframes elaFabClickableRingV13 {
  0%, 100% {
    opacity: .48;
    transform: scale(.98);
  }
  50% {
    opacity: .98;
    transform: scale(1.13);
  }
}

@media (max-width: 980px) {
  .hero {
    padding: 24px 0 8px !important;
  }

  .hero-grid {
    gap: 28px !important;
  }

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

@media (max-width: 560px) {
  .hero {
    padding-top: 14px !important;
    padding-bottom: 4px !important;
  }

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

  .hero .title {
    margin-bottom: 8px !important;
  }

  .hero .desc {
    margin-bottom: 13px !important;
    line-height: 1.56 !important;
  }

  .hero .actions {
    gap: 10px !important;
  }

  .hero .actions .btn {
    min-height: 51px !important;
  }

  .hero .hero-points {
    margin-top: 13px !important;
    gap: 8px !important;
  }

  .hero .hero-point {
    min-height: 56px !important;
    padding: 13px 12px 11px !important;
    border-radius: 17px !important;
    font-size: .84rem !important;
  }

  .hero .hero-point::before {
    top: 7px !important;
    width: 22px !important;
  }

  .logo-fab::before {
    inset: -38px !important;
    filter: blur(22px) !important;
  }
}


/* =========================================================
   V14 — Narrativa visual da primeira dobra
   Ajustes de conexão entre promessa, benefícios e imagem
   ========================================================= */

.hero .desc {
  max-width: 660px !important;
}

.benefits-label {
  margin: 14px 0 9px;
  color: var(--primary-dark);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .02em;
  opacity: .90;
}

.hero .hero-points {
  margin-top: 0 !important;
}

.hero .hero-point {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
  min-height: 54px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(249,243,251,.76)) !important;
  border: 1px solid rgba(140,105,166,.15) !important;
  box-shadow:
    0 10px 22px rgba(103,78,121,.045),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
  font-size: .84rem !important;
  line-height: 1.32 !important;
}

.hero .hero-point::before,
.hero .hero-point::after {
  display: none !important;
}

.hero-point-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.92), rgba(234,220,242,.72));
  border: 1px solid rgba(140,105,166,.16);
  color: var(--primary);
  box-shadow: 0 8px 18px rgba(103,78,121,.06);
  font-size: .86rem;
  line-height: 1;
}

.visual-kicker {
  margin: 0 auto 11px;
  max-width: 420px;
  text-align: center;
  color: var(--primary-dark);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.35rem, 2.2vw, 1.72rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  opacity: .92;
}

.visual-kicker::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  border-radius: 999px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, rgba(140,105,166,.45), transparent);
}

@media (max-width: 980px) {
  .benefits-label {
    text-align: center;
    margin-top: 13px;
  }

  .hero .hero-point {
    justify-content: center !important;
    text-align: center !important;
  }

  .visual-kicker {
    margin-top: 2px;
  }
}

@media (max-width: 560px) {
  .benefits-label {
    margin: 11px 0 8px;
    font-size: .82rem;
  }

  .hero .hero-point {
    min-height: 50px !important;
    padding: 10px 13px !important;
    gap: 9px !important;
    font-size: .82rem !important;
  }

  .hero-point-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    font-size: .78rem;
  }

  .visual-kicker {
    max-width: 330px;
    margin-bottom: 9px;
    font-size: 1.32rem;
  }

  .visual-kicker::after {
    width: 42px;
    margin-top: 8px;
  }
}


/* =========================================================
   V15 — Coesão da primeira dobra, benefícios mais clean
   e base visual mais intencional para o menu flutuante
   ========================================================= */

.hero {
  position: relative;
  overflow: clip;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
}

.hero::before {
  width: 190px;
  height: 190px;
  left: -86px;
  top: 118px;
  background: radial-gradient(circle, rgba(232,216,241,.78) 0%, rgba(232,216,241,.38) 44%, transparent 72%);
}

.hero::after {
  width: 220px;
  height: 220px;
  right: -92px;
  top: 42px;
  background: radial-gradient(circle, rgba(241,231,247,.96) 0%, rgba(241,231,247,.42) 46%, transparent 74%);
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-grid {
  gap: clamp(26px, 4vw, 44px) !important;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero .eyebrow,
.hero .title,
.hero .desc,
.visual-kicker,
.section-heading h2,
.closing .script,
.closing h2 {
  text-wrap: balance;
}

.hero .desc,
.section-heading p,
.journey-copy p,
.carousel-heading p,
.closing .sub2 {
  text-wrap: pretty;
}

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

.hero .title {
  margin: 0 0 16px !important;
  max-width: 10ch;
  line-height: .96 !important;
}

.hero .desc {
  max-width: 31ch !important;
  margin: 0 auto 18px !important;
  font-size: clamp(1.02rem, 1.45vw, 1.14rem) !important;
  line-height: 1.52 !important;
}

.hero .actions {
  width: min(100%, 670px);
  justify-content: center !important;
  gap: 14px !important;
}

.hero .actions .btn {
  flex: 1 1 250px;
  max-width: 320px;
}

.benefits-label {
  margin: 18px 0 12px !important;
  font-size: .84rem !important;
  letter-spacing: .05em !important;
  text-transform: uppercase;
  opacity: .86;
}

.hero .hero-points {
  width: min(100%, 720px);
  gap: 12px !important;
}

.hero .hero-point {
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-height: 58px !important;
  padding: 14px 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,241,250,.82)) !important;
  border: 1px solid rgba(140,105,166,.13) !important;
  box-shadow:
    0 12px 24px rgba(103,78,121,.05),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.hero .hero-point span:last-child {
  flex: 1;
}

.hero-point-icon {
  position: relative;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,234,247,.88)) !important;
  border: 1px solid rgba(140,105,166,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 8px 16px rgba(103,78,121,.04) !important;
  color: transparent !important;
  font-size: 0 !important;
}

.hero-point-icon::before,
.hero-point-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hero-point:nth-child(1) .hero-point-icon::before {
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140,105,166,.18), rgba(140,105,166,.96), rgba(140,105,166,.18));
  box-shadow: 0 0 16px rgba(140,105,166,.14);
}

.hero-point:nth-child(2) .hero-point-icon::before {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(140,105,166,.52);
  box-shadow: inset 0 0 0 3px rgba(234,220,242,.95), 0 0 12px rgba(140,105,166,.08);
}

.hero-point:nth-child(3) .hero-point-icon::before {
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140,105,166,.16), rgba(140,105,166,.92), rgba(140,105,166,.16));
}

.hero-point:nth-child(3) .hero-point-icon::after {
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140,105,166,.16), rgba(140,105,166,.92), rgba(140,105,166,.16));
  transform: translate(-50%, -50%) rotate(90deg);
}

.visual-kicker {
  margin: 2px auto 12px !important;
  max-width: 450px !important;
}

.visual-kicker::after {
  width: 64px !important;
  margin-top: 12px !important;
}

.fab-nav {
  width: 136px;
  height: 136px;
}

.fab-nav::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 124px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(224,208,235,.28), rgba(255,255,255,.84), rgba(224,208,235,.28));
  border: 1px solid rgba(140,105,166,.09);
  box-shadow: 0 10px 26px rgba(122,90,145,.10), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: .88;
  pointer-events: none;
}

.logo-fab {
  box-shadow:
    0 12px 26px rgba(122, 90, 145, .10),
    0 0 30px rgba(166,126,190,.16),
    0 0 60px rgba(174,134,203,.08) !important;
}

@media (max-width: 980px) {
  .hero::before {
    left: -96px;
    top: 92px;
  }

  .hero::after {
    right: -108px;
    top: 24px;
  }

  .hero-copy {
    max-width: 680px;
  }

  .hero .desc {
    max-width: 34ch !important;
  }

  .hero .hero-points {
    max-width: 520px;
  }

  .hero .hero-point {
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 14px !important;
  }

  .hero::before {
    width: 150px;
    height: 150px;
    left: -82px;
    top: 116px;
  }

  .hero::after {
    width: 176px;
    height: 176px;
    right: -92px;
    top: 28px;
  }

  .hero .title {
    max-width: 11ch;
    margin-bottom: 14px !important;
  }

  .hero .desc {
    max-width: 18.8em !important;
    font-size: .98rem !important;
    margin-bottom: 16px !important;
  }

  .hero .actions {
    gap: 12px !important;
  }

  .hero .actions .btn {
    max-width: none;
  }

  .benefits-label {
    margin: 16px 0 10px !important;
    font-size: .78rem !important;
  }

  .hero .hero-points {
    gap: 10px !important;
  }

  .hero .hero-point {
    min-height: 56px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    gap: 10px !important;
  }

  .hero-point-icon {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .visual-kicker {
    max-width: 305px !important;
    margin-bottom: 10px !important;
    font-size: 1.26rem !important;
  }

  .visual-kicker::after {
    width: 54px !important;
    margin-top: 10px !important;
  }

  .fab-nav {
    width: 112px;
    height: 112px;
  }

  .fab-nav::before {
    width: 102px;
    height: 16px;
    bottom: 8px;
  }
}


/* =========================================================
   V16 — correção do polimento anterior
   Impede os CTAs da primeira dobra de virarem blocos circulares
   e mantém a proposta visual mais clean sem distorções.
   ========================================================= */

.hero .title {
  max-width: none !important;
}

.hero .desc {
  max-width: 36ch !important;
}

.hero .actions {
  width: min(100%, 660px) !important;
  align-items: center !important;
}

.hero .actions .btn {
  flex: 0 1 320px !important;
  max-width: 320px !important;
  min-height: 54px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 999px !important;
  padding: 0 24px !important;
}

.btn-primary,
.btn-secondary {
  height: auto !important;
  aspect-ratio: auto !important;
}

@media (max-width: 980px) {
  .hero .title {
    max-width: none !important;
  }

  .hero .desc {
    max-width: 35ch !important;
  }
}

@media (max-width: 560px) {
  .hero .title {
    max-width: none !important;
    font-size: 2.8rem !important;
    line-height: .94 !important;
  }

  .hero .desc {
    max-width: 20.6em !important;
    font-size: .98rem !important;
  }

  .hero .actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .hero .actions .btn {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    min-height: 54px !important;
    height: auto !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
  }

  .hero .btn-primary {
    box-shadow:
      0 16px 30px rgba(128,93,153,.20),
      0 0 0 4px rgba(140,105,166,.055) !important;
  }

  .hero .btn-secondary {
    box-shadow:
      0 10px 22px rgba(103,78,121,.045),
      inset 0 1px 0 rgba(255,255,255,.72) !important;
  }
}


/* =========================================================
   V17 — Atmosfera visual premium na primeira dobra
   Névoas laterais, textura perolada e detalhes orgânicos sutis
   ========================================================= */

.hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 18%, rgba(230, 212, 241, .34), transparent 24%),
    radial-gradient(circle at 92% 16%, rgba(244, 232, 249, .56), transparent 25%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .34), transparent 42%);
}

.hero::before {
  width: 250px !important;
  height: 250px !important;
  left: -126px !important;
  top: 74px !important;
  background:
    radial-gradient(circle,
      rgba(196, 160, 218, .26) 0%,
      rgba(232, 216, 241, .28) 34%,
      rgba(246, 239, 249, .12) 58%,
      transparent 78%) !important;
  filter: blur(24px) !important;
  opacity: .86;
}

.hero::after {
  width: 280px !important;
  height: 280px !important;
  right: -138px !important;
  top: 18px !important;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.80) 0%,
      rgba(235, 219, 244, .36) 38%,
      rgba(203, 170, 224, .16) 62%,
      transparent 80%) !important;
  filter: blur(28px) !important;
  opacity: .92;
}

.hero .container::before,
.hero .container::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
  opacity: .42;
}

.hero .container::before {
  width: 116px;
  height: 116px;
  left: -24px;
  top: 54px;
  border-radius: 42% 58% 50% 50%;
  border: 1px solid rgba(140, 105, 166, .13);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-24deg);
  filter: blur(.1px);
}

.hero .container::after {
  width: 132px;
  height: 132px;
  right: -30px;
  top: 32px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(140,105,166,.10) 43% 45%, transparent 46% 100%),
    radial-gradient(circle at 72% 26%, rgba(140,105,166,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 42%, rgba(140,105,166,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 54%, rgba(140,105,166,.08) 0 2px, transparent 3px);
}

.hero-copy::before,
.hero-copy::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
  opacity: .34;
}

.hero-copy {
  position: relative;
}

.hero-copy::before {
  width: 46px;
  height: 46px;
  left: 2%;
  top: 26%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,.92) 0 25%, rgba(229,213,239,.44) 26% 48%, transparent 49%);
  box-shadow:
    28px -22px 0 -19px rgba(140,105,166,.20),
    52px 18px 0 -22px rgba(140,105,166,.15);
  filter: blur(.2px);
}

.hero-copy::after {
  width: 56px;
  height: 2px;
  right: 4%;
  top: 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(140,105,166,.20), transparent);
  box-shadow: 16px 24px 0 rgba(140,105,166,.055);
  transform: rotate(-18deg);
}

.header {
  background:
    linear-gradient(180deg, rgba(252,248,252,.88), rgba(252,248,252,.68)) !important;
  border-bottom: 1px solid rgba(140,105,166,.055) !important;
}

.header.is-scrolled {
  background:
    linear-gradient(180deg, rgba(252,248,252,.96), rgba(252,248,252,.86)) !important;
}

.header-inner {
  position: relative;
}

.header-inner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140,105,166,.12), transparent);
  pointer-events: none;
}

.hero .desc {
  position: relative;
}

.hero .desc::after {
  content: '';
  display: block;
  width: 72px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(140,105,166,.34), transparent);
  opacity: .72;
}

@media (max-width: 980px) {
  .hero .container::before {
    left: -58px;
    top: 62px;
    opacity: .28;
  }

  .hero .container::after {
    right: -68px;
    top: 28px;
    opacity: .30;
  }

  .hero-copy::before,
  .hero-copy::after {
    opacity: .24;
  }
}

@media (max-width: 560px) {
  .hero {
    background:
      radial-gradient(circle at 2% 20%, rgba(230, 212, 241, .30), transparent 28%),
      radial-gradient(circle at 102% 14%, rgba(244, 232, 249, .64), transparent 30%),
      linear-gradient(180deg, rgba(252,248,252,.08), rgba(248,243,250,.18));
  }

  .hero::before {
    width: 178px !important;
    height: 178px !important;
    left: -106px !important;
    top: 112px !important;
    filter: blur(22px) !important;
    opacity: .78;
  }

  .hero::after {
    width: 206px !important;
    height: 206px !important;
    right: -126px !important;
    top: 22px !important;
    filter: blur(24px) !important;
    opacity: .88;
  }

  .hero .container::before {
    width: 88px;
    height: 88px;
    left: -52px;
    top: 78px;
    opacity: .32;
  }

  .hero .container::after {
    width: 88px;
    height: 88px;
    right: -48px;
    top: 44px;
    opacity: .28;
  }

  .hero-copy::before {
    left: -5%;
    top: 31%;
    transform: scale(.78);
    opacity: .23;
  }

  .hero-copy::after {
    right: -5%;
    top: 20%;
    transform: rotate(-18deg) scale(.78);
    opacity: .24;
  }

  .hero .desc::after {
    width: 58px;
    margin-top: 12px;
  }

  .header {
    background:
      linear-gradient(180deg, rgba(252,248,252,.94), rgba(252,248,252,.78)) !important;
  }
}


/* =========================================================
   V18 — Florais abstratos e textura perolada mais presentes
   Mantém a estética leve, sem adicionar conteúdo ou alterar funções.
   ========================================================= */

body {
  background:
    radial-gradient(circle at 8% 5%, rgba(234, 220, 242, .70), transparent 18%),
    radial-gradient(circle at 96% 7%, rgba(255, 255, 255, .86), transparent 17%),
    radial-gradient(circle at 8% 34%, rgba(241, 230, 247, .68), transparent 20%),
    radial-gradient(circle at 92% 38%, rgba(232, 216, 241, .50), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.42) 0%, transparent 32%, rgba(234,220,242,.22) 66%, transparent 100%),
    linear-gradient(180deg, #fcf8fc 0%, #f8f3fa 100%) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .30;
  background:
    linear-gradient(115deg, transparent 0 23%, rgba(255,255,255,.55) 24%, transparent 25% 100%),
    linear-gradient(62deg, transparent 0 34%, rgba(140,105,166,.045) 35%, transparent 36% 100%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.58) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 26%, rgba(255,255,255,.44) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 72%, rgba(255,255,255,.38) 0 1px, transparent 2px);
  background-size: 420px 420px, 360px 360px, 190px 190px, 230px 230px, 260px 260px;
  mix-blend-mode: soft-light;
}

.hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.36), transparent 38%),
    radial-gradient(circle at 7% 17%, rgba(225, 206, 238, .44), transparent 26%),
    radial-gradient(circle at 94% 14%, rgba(247, 238, 250, .74), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,.48), transparent 34%),
    linear-gradient(180deg, rgba(252,248,252,.18), rgba(248,243,250,.20)) !important;
}

.hero::before {
  width: 340px !important;
  height: 340px !important;
  left: -186px !important;
  top: 40px !important;
  opacity: .94 !important;
  background:
    radial-gradient(circle,
      rgba(190, 150, 216, .22) 0%,
      rgba(232, 216, 241, .34) 36%,
      rgba(255,255,255,.18) 58%,
      transparent 78%) !important;
  filter: blur(32px) !important;
}

.hero::after {
  width: 370px !important;
  height: 370px !important;
  right: -198px !important;
  top: 2px !important;
  opacity: .92 !important;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.80) 0%,
      rgba(236, 220, 245, .40) 35%,
      rgba(196, 160, 218, .16) 58%,
      transparent 78%) !important;
  filter: blur(34px) !important;
}

.hero-grid {
  position: relative;
  z-index: 1;
}

.hero-grid::before,
.hero-grid::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.hero-grid::before {
  width: 148px;
  height: 220px;
  left: -44px;
  top: 54px;
  opacity: .46;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 48% 18%, rgba(140,105,166,.18) 0 3px, transparent 4px),
    radial-gradient(ellipse at 62% 32%, rgba(140,105,166,.13) 0 3px, transparent 4px),
    radial-gradient(ellipse at 40% 47%, rgba(140,105,166,.11) 0 2px, transparent 3px),
    radial-gradient(ellipse at 58% 62%, rgba(140,105,166,.10) 0 2px, transparent 3px),
    linear-gradient(166deg, transparent 0 26%, rgba(140,105,166,.15) 27%, transparent 28% 100%);
  transform: rotate(-14deg);
  filter: blur(.1px);
}

.hero-grid::after {
  width: 152px;
  height: 210px;
  right: -46px;
  top: 24px;
  opacity: .38;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 48% 20%, rgba(140,105,166,.13) 0 2px, transparent 3px),
    radial-gradient(ellipse at 34% 36%, rgba(140,105,166,.13) 0 3px, transparent 4px),
    radial-gradient(ellipse at 60% 51%, rgba(140,105,166,.10) 0 2px, transparent 3px),
    radial-gradient(ellipse at 42% 68%, rgba(140,105,166,.10) 0 2px, transparent 3px),
    linear-gradient(18deg, transparent 0 36%, rgba(140,105,166,.12) 37%, transparent 38% 100%);
  transform: rotate(18deg);
  filter: blur(.1px);
}

.hero .container::before {
  width: 140px !important;
  height: 140px !important;
  left: -38px !important;
  top: 42px !important;
  opacity: .52 !important;
  border-color: rgba(140,105,166,.16) !important;
  box-shadow:
    28px 18px 0 -26px rgba(140,105,166,.18),
    72px 62px 0 -66px rgba(140,105,166,.14);
}

.hero .container::after {
  width: 154px !important;
  height: 154px !important;
  right: -44px !important;
  top: 32px !important;
  opacity: .46 !important;
  background:
    linear-gradient(136deg, transparent 0 40%, rgba(140,105,166,.12) 41% 43%, transparent 44% 100%),
    radial-gradient(circle at 70% 22%, rgba(140,105,166,.15) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 42%, rgba(140,105,166,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 56%, rgba(140,105,166,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 68%, rgba(255,255,255,.58) 0 3px, transparent 4px) !important;
}

.hero-copy::before {
  opacity: .28 !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.96) 0 25%, rgba(229,213,239,.54) 26% 48%, transparent 49%) !important;
  box-shadow:
    30px -20px 0 -19px rgba(140,105,166,.18),
    54px 18px 0 -22px rgba(140,105,166,.14),
    -18px 36px 0 -23px rgba(255,255,255,.74) !important;
}

.hero-copy::after {
  opacity: .30 !important;
  width: 72px !important;
  background: linear-gradient(90deg, transparent, rgba(140,105,166,.22), transparent) !important;
  box-shadow:
    16px 24px 0 rgba(140,105,166,.07),
    -28px 40px 0 rgba(255,255,255,.42) !important;
}

.header {
  background:
    linear-gradient(180deg, rgba(252,248,252,.92), rgba(252,248,252,.72)) !important;
  box-shadow: 0 10px 28px rgba(103,78,121,.035) !important;
}

.header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .30;
  background:
    radial-gradient(circle at 11% 50%, rgba(232,216,241,.44), transparent 18%),
    radial-gradient(circle at 92% 30%, rgba(255,255,255,.70), transparent 16%);
}

.image-card,
.carousel-box,
.card,
.journey-wrap,
.investment,
.closing {
  position: relative;
  overflow: hidden;
}

.image-card::before,
.carousel-box::before,
.card::before,
.journey-wrap::before,
.investment::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(118deg, transparent 0 32%, rgba(255,255,255,.66) 33%, transparent 35% 100%),
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.52), transparent 22%);
}

@media (max-width: 980px) {
  .hero-grid::before {
    left: -86px;
    top: 72px;
    opacity: .36;
  }

  .hero-grid::after {
    right: -92px;
    top: 48px;
    opacity: .30;
  }
}

@media (max-width: 560px) {
  body::before {
    opacity: .24;
    background-size: 330px 330px, 280px 280px, 160px 160px, 190px 190px, 220px 220px;
  }

  .hero::before {
    width: 236px !important;
    height: 236px !important;
    left: -154px !important;
    top: 98px !important;
    opacity: .88 !important;
    filter: blur(28px) !important;
  }

  .hero::after {
    width: 260px !important;
    height: 260px !important;
    right: -164px !important;
    top: 14px !important;
    opacity: .92 !important;
    filter: blur(30px) !important;
  }

  .hero-grid::before {
    width: 112px;
    height: 172px;
    left: -82px;
    top: 116px;
    opacity: .34;
    transform: rotate(-18deg);
  }

  .hero-grid::after {
    width: 114px;
    height: 164px;
    right: -86px;
    top: 72px;
    opacity: .28;
    transform: rotate(18deg);
  }

  .hero .container::before {
    width: 104px !important;
    height: 104px !important;
    left: -64px !important;
    top: 80px !important;
    opacity: .40 !important;
  }

  .hero .container::after {
    width: 108px !important;
    height: 108px !important;
    right: -64px !important;
    top: 64px !important;
    opacity: .36 !important;
  }

  .header::before {
    opacity: .22;
  }

  .image-card::before,
  .carousel-box::before,
  .card::before,
  .journey-wrap::before,
  .investment::before {
    opacity: .18;
  }
}


/* =========================================================
   V19 — ajustes finais: remove base sob FAB,
   reforça brilho lilás e adiciona surgimento suave no scroll
   ========================================================= */

/* Remove a forma/pílula inferior que estava grudada sob o botão flutuante */
.fab-nav::before {
  display: none !important;
  content: none !important;
}

/* Brilho lilás mais intenso e mais perceptível ao redor do botão */
.logo-fab {
  box-shadow:
    0 14px 30px rgba(122, 90, 145, .14),
    0 0 34px rgba(166,126,190,.28),
    0 0 84px rgba(174,134,203,.18) !important;
  animation: elaFabCloudPulseV19 2.75s ease-in-out infinite !important;
}

.logo-fab::before {
  inset: -46px !important;
  opacity: .94 !important;
  background:
    radial-gradient(circle,
      rgba(174,134,203,.48) 0%,
      rgba(174,134,203,.32) 25%,
      rgba(174,134,203,.18) 43%,
      rgba(174,134,203,.08) 58%,
      transparent 76%) !important;
  filter: blur(20px) !important;
  animation: elaFabSmokeGlowV19 2.75s ease-in-out infinite !important;
}

.logo-fab::after {
  inset: -14px !important;
  opacity: .72 !important;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.48) 0%,
      rgba(234,220,242,.24) 42%,
      transparent 74%) !important;
  filter: blur(8px) !important;
  animation: elaFabInnerHazeV19 2.75s ease-in-out infinite !important;
}

@keyframes elaFabCloudPulseV19 {
  0%, 100% {
    box-shadow:
      0 12px 26px rgba(122, 90, 145, .12),
      0 0 28px rgba(166,126,190,.22),
      0 0 64px rgba(174,134,203,.12);
  }
  50% {
    box-shadow:
      0 18px 36px rgba(122, 90, 145, .18),
      0 0 48px rgba(166,126,190,.38),
      0 0 112px rgba(174,134,203,.24);
  }
}

@keyframes elaFabSmokeGlowV19 {
  0%, 100% {
    opacity: .62;
    transform: scale(.90);
    filter: blur(18px);
  }
  50% {
    opacity: 1;
    transform: scale(1.16);
    filter: blur(24px);
  }
}

@keyframes elaFabInnerHazeV19 {
  0%, 100% {
    opacity: .38;
    transform: scale(.96);
  }
  50% {
    opacity: .78;
    transform: scale(1.07);
  }
}

/* Entrada suave em degradê dos blocos abaixo da primeira imagem */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(8px);
  clip-path: inset(18% 0 0 0 round 22px);
  transition:
    opacity .82s ease,
    transform .82s cubic-bezier(.2,.8,.2,1),
    filter .82s ease,
    clip-path .82s ease;
  will-change: opacity, transform, filter, clip-path;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  clip-path: inset(0 0 0 0 round 0);
}

.scroll-reveal:nth-of-type(2) { transition-delay: .04s; }
.scroll-reveal:nth-of-type(3) { transition-delay: .08s; }
.scroll-reveal:nth-of-type(4) { transition-delay: .10s; }

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .logo-fab,
  .logo-fab::before,
  .logo-fab::after {
    animation: none !important;
  }
}

@media (max-width: 560px) {
  .logo-fab::before {
    inset: -38px !important;
    filter: blur(19px) !important;
  }

  .scroll-reveal {
    transform: translate3d(0, 22px, 0);
    filter: blur(7px);
    clip-path: inset(14% 0 0 0 round 20px);
  }
}


/* =========================================================
   V20 — hero mais aberta lateralmente + scroll reveal mais leve
   ========================================================= */

/* Abre a composição da primeira dobra para não parecer tão estreita/linear */
.hero .desc {
  max-width: 48ch !important;
  line-height: 1.5 !important;
}

.hero .desc::after {
  margin-top: 12px !important;
}

.hero .actions {
  width: min(100%, 560px) !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: auto;
  margin-right: auto;
}

.hero .actions .btn {
  width: 100% !important;
  max-width: 460px !important;
  flex: 0 0 auto !important;
  min-height: 54px !important;
}

.hero .btn-primary {
  box-shadow:
    0 18px 34px rgba(128,93,153,.22),
    0 0 0 5px rgba(140,105,166,.05) !important;
}

.hero .btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,255,.80)) !important;
}

/* Surgimento no scroll mais rápido e leve: sem blur/clip pesado */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: none !important;
  clip-path: none !important;
  transition:
    opacity .46s ease,
    transform .46s cubic-bezier(.22,.72,.18,1) !important;
  will-change: opacity, transform;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: none !important;
  clip-path: none !important;
}

.scroll-reveal:nth-of-type(2),
.scroll-reveal:nth-of-type(3),
.scroll-reveal:nth-of-type(4) {
  transition-delay: 0s !important;
}

@media (max-width: 980px) {
  .hero .desc {
    max-width: 40ch !important;
  }

  .hero .actions {
    width: min(100%, 600px) !important;
  }

  .hero .actions .btn {
    max-width: 520px !important;
  }
}

@media (max-width: 560px) {
  .hero .desc {
    max-width: 22.2em !important;
    line-height: 1.48 !important;
  }

  .hero .actions {
    width: 100% !important;
    gap: 11px !important;
  }

  .hero .actions .btn {
    max-width: none !important;
    min-height: 53px !important;
  }

  .scroll-reveal {
    transform: translate3d(0, 10px, 0);
    transition:
      opacity .38s ease,
      transform .38s cubic-bezier(.22,.72,.18,1) !important;
  }
}


/* =========================================================
   V21 — visualização em tela cheia das mídias do carrossel
   ========================================================= */

.carousel-expand {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 9;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(140,105,166,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(251,246,253,.88));
  color: var(--primary-dark);
  box-shadow:
    0 12px 26px rgba(103,78,121,.10),
    inset 0 1px 0 rgba(255,255,255,.80);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.carousel-expand::after {
  content: '↗';
  margin-left: 8px;
  font-size: .88rem;
  line-height: 1;
}

.carousel-expand:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 32px rgba(103,78,121,.14),
    0 0 24px rgba(166,126,190,.14),
    inset 0 1px 0 rgba(255,255,255,.86);
}

.carousel-expand:active {
  transform: translateY(0) scale(.98);
}

.carousel-box.is-single .carousel-expand {
  display: inline-flex;
}

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}

.media-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.media-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(80,58,94,.76), rgba(26,18,31,.92));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.media-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 1180px);
  height: min(92vh, 820px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow:
    0 30px 90px rgba(18,12,24,.35),
    inset 0 1px 0 rgba(255,255,255,.20);
  overflow: hidden;
}

.media-lightbox-stage {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 58px 72px 26px;
}

.media-lightbox-stage img,
.media-lightbox-stage video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(18,12,24,.28);
  background: rgba(255,255,255,.10);
}

.media-lightbox-stage video {
  width: min(100%, 1040px);
}

.media-lightbox-close,
.media-lightbox-nav {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.86);
  color: var(--primary-dark);
  box-shadow: 0 14px 34px rgba(18,12,24,.20);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.media-lightbox-close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 700;
}

.media-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 58px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 800;
}

.media-lightbox-prev { left: 18px; }
.media-lightbox-next { right: 18px; }

.media-lightbox-close:hover,
.media-lightbox-nav:hover {
  background: rgba(255,255,255,.96);
  box-shadow:
    0 18px 38px rgba(18,12,24,.24),
    0 0 26px rgba(166,126,190,.18);
}

.media-lightbox-close:active {
  transform: scale(.96);
}

.media-lightbox-nav:active {
  transform: translateY(-50%) scale(.96);
}

.media-lightbox-footer {
  min-height: 52px;
  padding: 12px 20px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(255,255,255,.82);
  font-size: .82rem;
  font-weight: 700;
  background: rgba(18,12,24,.16);
  border-top: 1px solid rgba(255,255,255,.12);
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .carousel-expand {
    right: 16px;
    bottom: 16px;
    min-height: 38px;
    padding: 0 13px;
    font-size: .76rem;
  }

  .media-lightbox {
    padding: 10px;
  }

  .media-lightbox-panel {
    width: 100%;
    height: min(90vh, 760px);
    border-radius: 24px;
  }

  .media-lightbox-stage {
    padding: 56px 16px 18px;
  }

  .media-lightbox-stage img,
  .media-lightbox-stage video {
    border-radius: 16px;
  }

  .media-lightbox-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }

  .media-lightbox-nav {
    width: 40px;
    height: 48px;
    font-size: 1.55rem;
    background: rgba(255,255,255,.80);
  }

  .media-lightbox-prev { left: 10px; }
  .media-lightbox-next { right: 10px; }

  .media-lightbox-footer {
    min-height: 48px;
    padding: 10px 14px;
    gap: 10px;
    font-size: .76rem;
  }
}

@media (max-width: 560px) {
  .carousel-expand {
    right: 14px;
    bottom: 14px;
  }

  .media-lightbox-stage {
    padding-left: 10px;
    padding-right: 10px;
  }

  .media-lightbox-footer span:last-child {
    display: none;
  }
}


/* =========================================================
   V22 — texto inicial mais amplo, fundo perolado discreto
   e botão "Ampliar" do carrossel com mais destaque
   ========================================================= */

/* Texto principal da primeira dobra: mais editorial, mais largo e menos vertical */
.hero .desc {
  position: relative !important;
  z-index: 1;
  width: min(100%, 820px) !important;
  max-width: 820px !important;
  margin: 0 auto 19px !important;
  padding: 11px clamp(12px, 2.4vw, 22px) 12px !important;
  border-radius: 30px;
  font-size: clamp(1rem, 1.38vw, 1.12rem) !important;
  line-height: 1.48 !important;
  text-align: center;
  background:
    radial-gradient(ellipse at 18% 24%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.36) 28%, transparent 58%),
    radial-gradient(ellipse at 82% 74%, rgba(234,220,242,.58) 0%, rgba(234,220,242,.20) 38%, transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.20), rgba(252,248,252,.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 12px 34px rgba(122,90,145,.035);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.hero .desc::before {
  content: '';
  position: absolute;
  inset: -10px -12px;
  z-index: -1;
  border-radius: 38px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.84), transparent 28%),
    radial-gradient(circle at 88% 70%, rgba(226,208,238,.44), transparent 34%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  opacity: .62;
  filter: blur(13px);
  pointer-events: none;
}

.hero .desc::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: min(170px, 42vw);
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(140,105,166,.34), rgba(255,255,255,.86), rgba(140,105,166,.28), transparent);
  opacity: .72;
  pointer-events: none;
}

.hero .desc strong {
  font-weight: 800 !important;
  color: #6f4d85 !important;
}

/* Botão "Ampliar": mais visível, com cara clara de ação */
.carousel-expand {
  right: 22px !important;
  bottom: 22px !important;
  min-height: 46px !important;
  padding: 0 19px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.38), transparent 30%),
    linear-gradient(135deg, #9b74b5 0%, #7e5a99 100%) !important;
  color: #fff !important;
  box-shadow:
    0 16px 30px rgba(103,78,121,.22),
    0 0 0 5px rgba(140,105,166,.09),
    0 0 34px rgba(166,126,190,.24),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  font-size: .86rem !important;
  letter-spacing: .03em !important;
  text-transform: none;
  overflow: visible;
}

.carousel-expand::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(circle, rgba(166,126,190,.34) 0%, rgba(166,126,190,.16) 42%, transparent 72%);
  filter: blur(8px);
  opacity: .78;
  pointer-events: none;
  animation: elaExpandPulseV22 2.7s ease-in-out infinite;
}

.carousel-expand::after {
  content: '↗' !important;
  margin-left: 9px !important;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: .84rem !important;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}

.carousel-expand:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 20px 38px rgba(103,78,121,.27),
    0 0 0 6px rgba(140,105,166,.11),
    0 0 44px rgba(166,126,190,.32),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}

.carousel-expand:active {
  transform: translateY(-1px) scale(.985) !important;
}

@keyframes elaExpandPulseV22 {
  0%, 100% {
    opacity: .46;
    transform: scale(.96);
  }
  50% {
    opacity: .98;
    transform: scale(1.06);
  }
}

@media (max-width: 980px) {
  .hero .desc {
    max-width: min(92vw, 720px) !important;
  }
}

@media (max-width: 560px) {
  .hero .desc {
    width: calc(100vw - 26px) !important;
    max-width: calc(100vw - 26px) !important;
    margin-left: 50% !important;
    transform: translateX(-50%);
    padding: 10px 10px 12px !important;
    border-radius: 26px;
    font-size: .955rem !important;
    line-height: 1.43 !important;
  }

  .hero .desc::before {
    inset: -8px -8px;
    border-radius: 32px;
    filter: blur(11px);
  }

  .hero .desc::after {
    width: 132px;
    bottom: -5px;
  }

  .carousel-expand {
    right: 14px !important;
    bottom: 14px !important;
    min-height: 42px !important;
    padding: 0 15px !important;
    font-size: .80rem !important;
  }

  .carousel-expand::after {
    width: 20px;
    height: 20px;
    margin-left: 8px !important;
    font-size: .78rem !important;
  }
}


/* =========================================================
   AJUSTE FINAL V23 — benefícios menores que os botões principais
   Mantém os 3 cards de benefícios mais compactos e visualmente
   menores que os botões "Quero participar" e "Ver detalhes".
   ========================================================= */

.hero .hero-points {
  width: min(84%, 480px) !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 9px !important;
}

.hero .hero-point {
  min-height: 50px !important;
  padding: 10px 13px !important;
  border-radius: 17px !important;
  font-size: .81rem !important;
}

.hero .hero-point-icon {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  border-radius: 11px !important;
}

@media (min-width: 761px) {
  .hero .hero-points {
    width: min(76%, 560px) !important;
    max-width: 560px !important;
  }
}

@media (max-width: 560px) {
  .hero .hero-points {
    width: min(84%, 480px) !important;
    max-width: 480px !important;
  }
}

/* =========================================================
   V25 — ajustes finais da primeira tela
   Base: public_html.zip atual enviado pelo usuário.
   Alterações:
   1. Caixa do texto principal mais discreta e clean.
   2. Cabeçalho fixo no topo.
   3. Marca centralizada no cabeçalho com logo à esquerda do texto.
   4. Remoção visual consolidada do CTA primário no hero via index.php.
   5. Botão "Ver detalhes" com mais destaque na primeira dobra.
   ========================================================= */

/* Cabeçalho fixo sem acompanhar o fluxo da página */
body {
  padding-top: 88px !important;
}

.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 80 !important;
  background: rgba(252,248,252,.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(140,105,166,.08) !important;
  box-shadow: 0 10px 28px rgba(103,78,121,.045) !important;
}

.header-inner {
  justify-content: center !important;
}

.brand-with-logo {
  width: auto !important;
  justify-content: center !important;
  align-items: center !important;
}

.brand-text {
  text-align: left !important;
}

/* Caixa do texto inicial mais leve e menos chamativa */
.hero .desc {
  position: relative !important;
  width: min(92%, 640px) !important;
  max-width: 640px !important;
  margin: 0 auto 16px !important;
  padding: 11px 18px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.42) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  box-shadow:
    0 10px 24px rgba(103,78,121,.035),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  color: var(--text) !important;
  line-height: 1.46 !important;
}

/* Remove o excesso ornamental da caixa antiga */
.hero .desc::before,
.hero .desc::after {
  display: none !important;
}

/* Como o botão principal do hero foi removido no index,
   o "Ver detalhes" assume papel de CTA principal da primeira dobra */
.hero .actions {
  width: min(92%, 650px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

.hero .actions .btn-secondary {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  min-height: 56px !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.42) !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.32), transparent 30%),
    linear-gradient(135deg, #9f7ab8 0%, #7e5a99 100%) !important;
  box-shadow:
    0 17px 34px rgba(128,93,153,.20),
    0 0 0 5px rgba(140,105,166,.055),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
  opacity: 1 !important;
  letter-spacing: .01em !important;
}

.hero .actions .btn-secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 20px 40px rgba(128,93,153,.24),
    0 0 0 6px rgba(140,105,166,.07),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.hero .actions .btn-secondary:active {
  transform: translateY(-1px) scale(.99) !important;
}

/* Pequeno refinamento de ritmo após remover o primeiro CTA */
.benefits-label {
  margin-top: 16px !important;
}

/* Responsivo */
@media (max-width: 760px) {
  body {
    padding-top: 82px !important;
  }

  .header-inner {
    min-height: 82px !important;
    padding: 10px 0 !important;
  }

  .brand-with-logo {
    gap: 12px !important;
  }

  .brand-logo {
    width: 52px !important;
    height: 52px !important;
  }

  .brand h1 {
    font-size: 2.15rem !important;
  }

  .brand span {
    font-size: .86rem !important;
  }

  .hero {
    padding-top: 18px !important;
  }

  .hero .desc {
    width: min(92%, 640px) !important;
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    padding: 10px 14px !important;
    border-radius: 22px !important;
    font-size: .955rem !important;
    line-height: 1.43 !important;
  }

  .hero .actions {
    width: 92% !important;
  }

  .hero .actions .btn-secondary {
    width: 100% !important;
    max-width: none !important;
    min-height: 54px !important;
  }
}

@media (max-width: 420px) {
  body {
    padding-top: 80px !important;
  }

  .header-inner {
    min-height: 80px !important;
  }

  .brand-logo {
    width: 48px !important;
    height: 48px !important;
  }

  .brand h1 {
    font-size: 2rem !important;
  }

  .brand span {
    font-size: .82rem !important;
  }

  .hero .desc {
    width: min(93%, 620px) !important;
    max-width: 93% !important;
  }
}

/* =========================================================
   V29 — correção mobile segura
   Base absoluta: public_html (2)(2).zip enviado pelo usuário.
   Objetivo: preservar desktop, corrigir mobile e manter intro/FAB.
   ========================================================= */

/* Ramos florais abstratos — CSS puro, sem imagens, sem emoji.
   Aplicação segura: pseudo-elemento fixo atrás do conteúdo. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  background:
    radial-gradient(ellipse 30px 9px at 7% 17%, rgba(140,105,166,.12) 0%, rgba(140,105,166,.045) 48%, transparent 72%),
    radial-gradient(ellipse 24px 8px at 11% 23%, rgba(140,105,166,.095) 0%, rgba(140,105,166,.038) 50%, transparent 74%),
    radial-gradient(ellipse 20px 7px at 5% 29%, rgba(140,105,166,.08) 0%, rgba(140,105,166,.030) 50%, transparent 72%),
    linear-gradient(128deg, transparent 0 9.7%, rgba(140,105,166,.048) 9.9% 10.1%, transparent 10.32% 100%),

    radial-gradient(ellipse 32px 10px at 93% 16%, rgba(140,105,166,.11) 0%, rgba(140,105,166,.042) 48%, transparent 72%),
    radial-gradient(ellipse 24px 8px at 88% 23%, rgba(140,105,166,.09) 0%, rgba(140,105,166,.034) 50%, transparent 74%),
    radial-gradient(ellipse 20px 7px at 95% 31%, rgba(140,105,166,.075) 0%, rgba(140,105,166,.028) 50%, transparent 72%),
    linear-gradient(52deg, transparent 0 10.2%, rgba(140,105,166,.045) 10.35% 10.58%, transparent 10.75% 100%),

    radial-gradient(circle at 0% 10%, rgba(234,220,242,.22), transparent 19%),
    radial-gradient(circle at 100% 20%, rgba(234,220,242,.20), transparent 21%);
  background-repeat: no-repeat;
  background-size:
    250px 310px, 250px 310px, 250px 310px, 400px 500px,
    260px 330px, 260px 330px, 260px 330px, 400px 500px,
    100% 100%, 100% 100%;
  background-position:
    left top, left top, left top, left top,
    right top, right top, right top, right top,
    center, center;
}

/* Camadas seguras: não altera position de intro, FAB, WhatsApp ou lightbox. */
.header,
main {
  position: relative;
  z-index: 2;
}

.intro-screen {
  position: fixed !important;
  z-index: 120 !important;
}

.fab-nav {
  position: fixed !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  z-index: 45 !important;
  pointer-events: none !important;
}

.logo-fab,
.fab-nav.is-open .fab-item {
  pointer-events: auto !important;
}

.wa {
  position: fixed !important;
  right: 14px !important;
  bottom: 18px !important;
  z-index: 40 !important;
}

.media-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 300 !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.media-lightbox.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Cabeçalho parado no topo, sem acompanhar o scroll */
body {
  padding-top: 0 !important;
}

.header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  z-index: 20 !important;
  box-shadow: none !important;
}

.header.is-scrolled {
  box-shadow: none !important;
  background: rgba(252,248,252,.76) !important;
}

.header-inner {
  justify-content: center !important;
}

.brand-with-logo {
  width: auto !important;
  justify-content: center !important;
  align-items: center !important;
}

.brand-text {
  text-align: left !important;
}

/* Benefícios iniciais sem emojis/símbolos. Detalhe inferior limpo. */
.hero .hero-point {
  position: relative !important;
  overflow: hidden !important;
  min-height: 50px !important;
  padding: 12px 14px 15px !important;
  border-radius: 17px !important;
}

.hero .hero-point-icon {
  display: none !important;
}

.hero .hero-point span {
  width: 100% !important;
  text-align: center !important;
}

.hero .hero-point::before {
  display: none !important;
}

.hero .hero-point::after {
  content: '' !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 7px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(140,105,166,.20), rgba(140,105,166,.55), rgba(140,105,166,.20), transparent) !important;
  opacity: .76 !important;
}

/* CTA "Ver detalhes" com destaque, sem afetar outros botões */
.hero .actions .btn-secondary {
  color: #fff !important;
  border-color: rgba(255,255,255,.42) !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.34), transparent 30%),
    linear-gradient(135deg, #a37cbd 0%, #7e5a99 100%) !important;
  box-shadow:
    0 18px 36px rgba(128,93,153,.22),
    0 0 0 5px rgba(140,105,166,.065),
    0 0 34px rgba(166,126,190,.18),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  opacity: 1 !important;
}

.hero .actions .btn-secondary:hover {
  transform: translateY(-2px) !important;
}

/* Botão Ampliar: mantém formato pill no mobile e desktop */
.carousel-box {
  position: relative !important;
}

.carousel-expand {
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 12 !important;
  min-height: 44px !important;
  height: 44px !important;
  width: auto !important;
  max-width: calc(100% - 36px) !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.40), transparent 32%),
    linear-gradient(135deg, #9f78ba 0%, #7e5a99 100%) !important;
  color: #fff !important;
  box-shadow:
    0 16px 32px rgba(103,78,121,.22),
    0 0 0 5px rgba(140,105,166,.08),
    0 0 32px rgba(166,126,190,.22),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
  font-size: .84rem !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.carousel-expand::before {
  content: '' !important;
  position: absolute !important;
  inset: -8px !important;
  border-radius: inherit !important;
  z-index: -1 !important;
  background: radial-gradient(circle, rgba(166,126,190,.28), rgba(166,126,190,.11) 42%, transparent 72%) !important;
  filter: blur(8px) !important;
  opacity: .70 !important;
  pointer-events: none !important;
}

.carousel-expand::after {
  content: '↗' !important;
  margin-left: 9px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-size: .82rem !important;
  line-height: 1 !important;
}

/* Lightbox: nunca aparece aberto fora do estado .is-open */
body.lightbox-open {
  overflow: hidden !important;
}

.media-lightbox:not(.is-open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.media-lightbox.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.media-lightbox-backdrop {
  position: absolute !important;
  inset: 0 !important;
}

.media-lightbox-panel {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.media-lightbox-stage {
  touch-action: pan-y !important;
  cursor: grab !important;
}

.media-lightbox-stage.is-dragging {
  cursor: grabbing !important;
}

.media-lightbox-stage img,
.media-lightbox-stage video {
  user-select: none !important;
  -webkit-user-select: none !important;
  object-fit: contain !important;
}

/* Mobile: corrige o que bugou sem afetar o desktop */
@media (max-width: 760px) {
  body {
    padding-top: 0 !important;
  }

  body::before {
    opacity: .30;
  }

  .header {
    position: relative !important;
    top: auto !important;
  }

  .header-inner {
    min-height: auto !important;
    padding: 12px 0 !important;
    justify-content: center !important;
  }

  .brand-with-logo {
    gap: 12px !important;
  }

  .fab-nav {
    bottom: 14px !important;
  }

  .wa {
    right: 10px !important;
    bottom: 14px !important;
  }

  .carousel-expand {
    right: 12px !important;
    bottom: 12px !important;
    min-height: 40px !important;
    height: 40px !important;
    width: auto !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    display: inline-flex !important;
  }

  .carousel-expand::after {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin-left: 7px !important;
    font-size: .76rem !important;
  }

  .media-lightbox {
    position: fixed !important;
    inset: 0 !important;
    padding: 10px !important;
  }

  .media-lightbox-panel {
    width: 100% !important;
    height: min(88vh, 760px) !important;
    border-radius: 24px !important;
  }

  .media-lightbox-stage {
    padding: 56px 18px 24px !important;
  }
}

@media (max-width: 560px) {
  body::before {
    opacity: .26;
    background-size:
      210px 280px, 210px 280px, 210px 280px, 360px 460px,
      220px 300px, 220px 300px, 220px 300px, 360px 460px,
      100% 100%, 100% 100%;
  }
}

/* =========================================================
   V30 — cabeçalho inteligente e detalhes em gaveta
   Base absoluta: public_html (3).zip enviado pelo usuário.
   ========================================================= */

/* Cabeçalho colado no topo, mas com comportamento inteligente:
   some ao rolar para baixo e aparece ao rolar para cima. */
body {
  padding-top: var(--header-space, 88px) !important;
}

.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 85 !important;
  background: rgba(252,248,252,.88) !important;
  border-bottom: 1px solid rgba(140,105,166,.08) !important;
  box-shadow: 0 10px 28px rgba(103,78,121,.045) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition:
    transform .34s cubic-bezier(.22,.72,.18,1),
    opacity .24s ease,
    background .22s ease,
    box-shadow .22s ease !important;
  will-change: transform;
}

.header.is-hidden {
  transform: translateY(calc(-100% - 12px)) !important;
  opacity: .98 !important;
  pointer-events: none !important;
}

.header.is-scrolled {
  background: rgba(252,248,252,.94) !important;
  box-shadow: 0 12px 30px rgba(103,78,121,.065) !important;
}

.header-inner {
  justify-content: center !important;
}

.brand-with-logo {
  width: auto !important;
  justify-content: center !important;
  align-items: center !important;
}

.brand-text {
  text-align: left !important;
}

/* Botão Ver detalhes passa a controlar a gaveta */
.hero .actions .btn-secondary[aria-expanded] {
  position: relative;
}

.hero .actions .btn-secondary[aria-expanded]::after {
  content: '↓' !important;
  margin-left: 10px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  transition: transform .25s ease !important;
}

.hero .actions .btn-secondary[aria-expanded="true"]::after {
  transform: rotate(180deg) !important;
}

/* Gaveta de detalhes */
.details-drawer {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition:
    max-height .58s cubic-bezier(.22,.72,.18,1),
    opacity .34s ease,
    transform .42s cubic-bezier(.22,.72,.18,1),
    visibility .34s ease,
    padding .42s ease;
}

.details-drawer.is-open {
  max-height: 1400px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  padding-top: 24px !important;
  padding-bottom: 26px !important;
}

.details-drawer > .container {
  transform: translateY(-6px);
  transition: transform .42s cubic-bezier(.22,.72,.18,1);
}

.details-drawer.is-open > .container {
  transform: translateY(0);
}

/* Mantém o destino visual da gaveta bonito no mobile e desktop */
.details-drawer .section-heading {
  margin-bottom: 18px !important;
}

.details-drawer .cards {
  align-items: stretch !important;
}

@media (max-width: 760px) {
  body {
    padding-top: var(--header-space, 78px) !important;
  }

  .header {
    position: fixed !important;
  }

  .header-inner {
    min-height: auto !important;
    padding: 11px 0 !important;
    justify-content: center !important;
  }

  .brand-logo {
    width: 50px !important;
    height: 50px !important;
  }

  .brand h1 {
    font-size: 2.05rem !important;
  }

  .brand span {
    font-size: .82rem !important;
  }

  .details-drawer.is-open {
    padding-top: 18px !important;
    padding-bottom: 20px !important;
  }
}

@media (max-width: 420px) {
  body {
    padding-top: var(--header-space, 74px) !important;
  }

  .brand-logo {
    width: 46px !important;
    height: 46px !important;
  }

  .brand h1 {
    font-size: 1.92rem !important;
  }

  .brand span {
    font-size: .78rem !important;
  }
}

/* =========================================================
   V31 — gaveta funcional e fluidez mobile
   Base absoluta: public_html (4).zip enviado pelo usuário.
   ========================================================= */

/* Gaveta real da seção "Ver detalhes" */
.details-drawer {
  display: grid !important;
  grid-template-rows: 0fr !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  transform: translateY(-8px) !important;
  filter: none !important;
  clip-path: none !important;
  transition:
    grid-template-rows .55s cubic-bezier(.22,.72,.18,1),
    opacity .28s ease,
    transform .38s cubic-bezier(.22,.72,.18,1),
    visibility .28s ease,
    padding .38s ease !important;
}

.details-drawer > .container {
  min-height: 0 !important;
  overflow: hidden !important;
  transform: translateY(-8px) !important;
  transition: transform .42s cubic-bezier(.22,.72,.18,1) !important;
}

.details-drawer.is-open {
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  transform: translateY(0) !important;
  filter: none !important;
  clip-path: none !important;
  padding-top: 24px !important;
  padding-bottom: 26px !important;
}

.details-drawer.is-open > .container {
  transform: translateY(0) !important;
}

/* Evita conflito com o scroll reveal na gaveta */
.details-drawer.scroll-reveal,
.details-drawer.scroll-reveal.is-visible,
.details-drawer.is-open.scroll-reveal {
  filter: none !important;
  clip-path: none !important;
}

/* Estado visual do botão que abre a gaveta */
.hero .actions .btn-secondary[aria-controls="detalhes"]::after {
  content: '↓' !important;
  margin-left: 10px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  transition: transform .25s ease !important;
}

.hero .actions .btn-secondary[aria-expanded="true"]::after {
  transform: rotate(180deg) !important;
}

/* Fluidez: reduz efeitos caros no mobile sem empobrecer o visual */
@media (max-width: 760px) {
  .scroll-reveal {
    filter: none !important;
    clip-path: none !important;
    transform: translate3d(0, 12px, 0) !important;
    transition:
      opacity .38s ease,
      transform .38s cubic-bezier(.22,.72,.18,1) !important;
    will-change: opacity, transform !important;
  }

  .scroll-reveal.is-visible {
    transform: translate3d(0, 0, 0) !important;
  }

  body::before {
    position: absolute !important;
    min-height: 100vh !important;
    opacity: .22 !important;
    filter: none !important;
  }

  .details-drawer.is-open {
    padding-top: 18px !important;
    padding-bottom: 20px !important;
  }
}

/* Reduz animações de brilho em aparelhos com preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  .details-drawer,
  .details-drawer > .container,
  .header {
    transition: none !important;
  }
}

/* =========================================================
   V32 — gaveta real abaixo do botão e vídeos corrigidos
   Base absoluta: public_html (5)(2).zip.
   ========================================================= */

/* A gaveta fica fisicamente abaixo do botão "Ver detalhes" */
.hero-copy {
  position: relative !important;
}

.hero-details-drawer {
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: 0fr !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
  transition:
    grid-template-rows .54s cubic-bezier(.22,.72,.18,1),
    opacity .28s ease,
    transform .40s cubic-bezier(.22,.72,.18,1),
    visibility .28s ease,
    margin .34s ease !important;
}

.hero-details-drawer > .container {
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  transform: translateY(-8px) !important;
  transition: transform .42s cubic-bezier(.22,.72,.18,1) !important;
}

.hero-details-drawer.is-open {
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  margin-top: 16px !important;
  margin-bottom: 4px !important;
}

.hero-details-drawer.is-open > .container {
  transform: translateY(0) !important;
}

/* Aparência compacta da seção dentro da gaveta */
.hero-details-drawer .section-heading {
  margin: 0 auto 14px !important;
  max-width: 660px !important;
}

.hero-details-drawer .section-heading .pill {
  width: auto !important;
  min-height: 34px !important;
  margin-bottom: 10px !important;
}

.hero-details-drawer .section-heading h2 {
  font-size: clamp(1.72rem, 3.1vw, 2.35rem) !important;
}

.hero-details-drawer .section-heading p {
  font-size: .94rem !important;
}

.hero-details-drawer .cards {
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.hero-details-drawer .card {
  padding: 18px !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 36px rgba(103,78,121,.07) !important;
}

.hero-details-drawer ul.clean {
  gap: 8px !important;
}

.hero-details-drawer ul.clean li {
  font-size: .9rem !important;
}

/* O botão mostra claramente que abre/fecha a gaveta */
.hero .actions .btn-secondary[aria-controls="detalhes"]::after {
  content: '↓' !important;
  margin-left: 10px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  transition: transform .25s ease !important;
}

.hero .actions .btn-secondary[aria-expanded="true"]::after {
  transform: rotate(180deg) !important;
}

/* Se alguma gaveta antiga sobrar fora da hero, ela não aparece */
.details-drawer:not(.hero-details-drawer) {
  display: none !important;
}

/* Vídeos no carrossel normal: proporção e renderização estáveis */
.carousel-viewport {
  overflow: hidden !important;
}

.carousel-track {
  align-items: stretch !important;
}

.carousel-slide {
  overflow: hidden !important;
  display: block !important;
}

.carousel-slide img,
.carousel-slide video {
  width: 100% !important;
  height: 430px !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 22px !important;
  background: #efe5f5 !important;
}

.carousel-slide video {
  pointer-events: auto !important;
  aspect-ratio: auto !important;
}

.carousel-slide.has-video::after {
  top: 14px !important;
  left: 14px !important;
  z-index: 3 !important;
}

/* Fluidez geral */
.carousel-track,
.media-lightbox-stage img,
.media-lightbox-stage video,
.header,
.logo-fab {
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (max-width: 980px) {
  .hero-details-drawer .cards {
    grid-template-columns: 1fr !important;
  }

  .carousel-slide img,
  .carousel-slide video {
    height: 360px !important;
  }
}

@media (max-width: 760px) {
  .hero-details-drawer {
    width: min(100%, 520px) !important;
  }

  .hero-details-drawer.is-open {
    margin-top: 14px !important;
  }

  .hero-details-drawer .card {
    padding: 16px 14px !important;
  }

  .hero-details-drawer .section-heading h2 {
    font-size: 1.75rem !important;
  }

  .hero-details-drawer .section-heading p {
    font-size: .9rem !important;
  }

  .carousel-slide img,
  .carousel-slide video {
    height: 300px !important;
    border-radius: 18px !important;
  }

  .scroll-reveal {
    filter: none !important;
    clip-path: none !important;
    transform: translate3d(0, 12px, 0) !important;
    transition:
      opacity .34s ease,
      transform .34s cubic-bezier(.22,.72,.18,1) !important;
  }

  .scroll-reveal.is-visible {
    transform: translate3d(0, 0, 0) !important;
  }
}

@media (max-width: 560px) {
  .carousel-slide img,
  .carousel-slide video {
    height: 240px !important;
  }

  .carousel-slide.has-video::after {
    top: 10px !important;
    left: 10px !important;
  }
}

/* =========================================================
   V33 — fluidez da gaveta e vídeo do carrossel normal
   Base absoluta: public_html (6).zip.
   ========================================================= */

/* Gaveta com altura calculada em JS: mais fluida que grid-template-rows */
.hero-details-drawer {
  display: block !important;
  width: min(100%, 760px) !important;
  max-height: 0 !important;
  margin: 0 auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  transform: translate3d(0, -6px, 0) !important;
  pointer-events: none !important;
  will-change: max-height, opacity, transform !important;
  transition:
    max-height .42s cubic-bezier(.22,.72,.18,1),
    opacity .22s ease,
    transform .34s cubic-bezier(.22,.72,.18,1),
    visibility .22s ease,
    margin .30s ease !important;
}

.hero-details-drawer > .container {
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: translate3d(0, -4px, 0) !important;
  transition: transform .34s cubic-bezier(.22,.72,.18,1) !important;
  will-change: transform !important;
}

.hero-details-drawer.is-open {
  max-height: var(--details-drawer-height, 1100px) !important;
  margin-top: 14px !important;
  margin-bottom: 4px !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

.hero-details-drawer.is-open > .container {
  transform: translate3d(0, 0, 0) !important;
}

.hero-details-drawer .card,
.hero-details-drawer .section-heading {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Carrossel normal: vídeo com play customizado estável */
.carousel-slide.has-video {
  position: relative !important;
  overflow: hidden !important;
}

.carousel-slide.has-video video {
  width: 100% !important;
  height: 430px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 22px !important;
  background: #efe5f5 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  pointer-events: auto !important;
}

.carousel-slide.has-video.is-playing::after {
  opacity: .22 !important;
}

.carousel-video-play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 6 !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.52) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.48), transparent 34%),
    linear-gradient(135deg, rgba(163,124,189,.96), rgba(126,90,153,.96)) !important;
  color: #fff !important;
  box-shadow:
    0 18px 42px rgba(103,78,121,.28),
    0 0 0 7px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition:
    transform .20s ease,
    opacity .20s ease,
    box-shadow .20s ease !important;
}

.carousel-video-play span {
  display: block !important;
  transform: translateX(2px) !important;
  font-size: 1.32rem !important;
  line-height: 1 !important;
}

.carousel-video-play:hover {
  transform: translate(-50%, -50%) scale(1.045) !important;
}

.carousel-video-play:active {
  transform: translate(-50%, -50%) scale(.98) !important;
}

.carousel-slide.has-video.is-playing .carousel-video-play {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.carousel-slide.has-video.is-paused .carousel-video-play {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Quando os controles nativos forem ativados após o play, ficam contidos no vídeo */
.carousel-slide.has-video video[controls] {
  object-fit: contain !important;
  background: #1b1321 !important;
}

/* Fluidez geral sem remover nada */
.carousel-track,
.carousel-slide,
.carousel-box,
.hero-details-drawer,
.header,
.logo-fab {
  will-change: transform;
}

@media (max-width: 980px) {
  .carousel-slide.has-video video {
    height: 360px !important;
  }
}

@media (max-width: 760px) {
  .hero-details-drawer {
    width: min(100%, 520px) !important;
    transition:
      max-height .36s cubic-bezier(.22,.72,.18,1),
      opacity .20s ease,
      transform .30s cubic-bezier(.22,.72,.18,1),
      visibility .20s ease,
      margin .26s ease !important;
  }

  .carousel-slide.has-video video {
    height: 300px !important;
    border-radius: 18px !important;
  }

  .carousel-video-play {
    width: 58px !important;
    height: 58px !important;
  }

  .carousel-video-play span {
    font-size: 1.18rem !important;
  }

  .logo-fab::before,
  .logo-fab::after {
    animation-duration: 4.8s !important;
  }
}

@media (max-width: 560px) {
  .carousel-slide.has-video video {
    height: 240px !important;
  }

  .carousel-video-play {
    width: 54px !important;
    height: 54px !important;
  }
}

/* =========================================================
   V34 — fluidez geral, gaveta refinada e swipe nos vídeos
   Base absoluta: public_html (7).zip.
   ========================================================= */

/* Remove a setinha do botão "Ver detalhes" */
.hero .actions .btn-secondary[aria-controls="detalhes"]::after {
  content: none !important;
  display: none !important;
}

/* Gaveta mais suave: menos efeitos simultâneos e aceleração por GPU */
.hero-details-drawer {
  contain: layout paint !important;
  transform: translate3d(0, -4px, 0) !important;
  transition:
    max-height .32s cubic-bezier(.22,.72,.18,1),
    opacity .18s ease,
    transform .28s cubic-bezier(.22,.72,.18,1),
    visibility .18s ease,
    margin .24s ease !important;
  will-change: max-height, opacity, transform !important;
}

.hero-details-drawer > .container {
  transform: translate3d(0, -3px, 0) !important;
  transition: transform .28s cubic-bezier(.22,.72,.18,1) !important;
  will-change: transform !important;
}

.hero-details-drawer.is-open {
  transform: translate3d(0, 0, 0) !important;
}

.hero-details-drawer.is-open > .container {
  transform: translate3d(0, 0, 0) !important;
}

/* Vídeo do carrossel: swipe funciona sobre a área do vídeo quando pausado */
.carousel-slide.has-video {
  position: relative !important;
  touch-action: pan-y !important;
}

.carousel-slide.has-video::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  background: transparent !important;
  pointer-events: auto !important;
}

.carousel-slide.has-video.is-playing::before {
  pointer-events: none !important;
}

.carousel-video-play {
  z-index: 7 !important;
}

.carousel-slide.has-video video {
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
}

/* O selo de vídeo continua acima da mídia, mas não impede o arraste */
.carousel-slide.has-video::after {
  pointer-events: none !important;
}

/* Scroll reveal mais leve: remove blur e clip-path, que travavam no mobile */
.scroll-reveal {
  filter: none !important;
  clip-path: none !important;
  transform: translate3d(0, 14px, 0) !important;
  transition:
    opacity .34s ease,
    transform .34s cubic-bezier(.22,.72,.18,1) !important;
  will-change: opacity, transform !important;
}

.scroll-reveal.is-visible {
  transform: translate3d(0, 0, 0) !important;
}

/* Fundo floral mais barato para renderizar durante scroll */
body::before {
  position: absolute !important;
  min-height: 100vh !important;
  opacity: .24 !important;
  filter: none !important;
  will-change: auto !important;
}

/* Reduz custo de sombras/animações contínuas sem remover o botão */
.logo-fab::before,
.logo-fab::after {
  animation-duration: 5.2s !important;
  will-change: opacity, transform !important;
}

.header {
  will-change: transform !important;
}

/* Evita excesso de will-change permanente em elementos grandes */
.carousel-box,
.carousel-slide,
.carousel-track {
  backface-visibility: hidden !important;
}

@media (max-width: 760px) {
  .hero-details-drawer {
    transition:
      max-height .28s cubic-bezier(.22,.72,.18,1),
      opacity .16s ease,
      transform .24s cubic-bezier(.22,.72,.18,1),
      visibility .16s ease,
      margin .22s ease !important;
  }

  .scroll-reveal {
    transform: translate3d(0, 10px, 0) !important;
    transition:
      opacity .28s ease,
      transform .28s cubic-bezier(.22,.72,.18,1) !important;
  }

  body::before {
    opacity: .18 !important;
  }
}

@media (max-width: 560px) {
  .logo-fab::before,
  .logo-fab::after {
    animation-duration: 5.8s !important;
  }
}

/* =========================================================
   V35 — fluidez máxima da gaveta e do site
   Base absoluta: public_html (8).zip.
   ========================================================= */

/* Gaveta: anima height real via JS, mais estável que max-height grande */
.hero-details-drawer {
  height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  margin: 0 auto !important;
  transform: translate3d(0, -4px, 0) !important;
  contain: layout paint !important;
  will-change: height, opacity, transform !important;
  transition:
    height .30s cubic-bezier(.22,.72,.18,1),
    opacity .18s ease,
    transform .26s cubic-bezier(.22,.72,.18,1),
    visibility .18s ease,
    margin .22s ease !important;
}

.hero-details-drawer > .container {
  transform: translate3d(0, -3px, 0) !important;
  transition: transform .26s cubic-bezier(.22,.72,.18,1) !important;
  will-change: transform !important;
}

.hero-details-drawer.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
  transform: translate3d(0, 0, 0) !important;
}

.hero-details-drawer.is-open > .container {
  transform: translate3d(0, 0, 0) !important;
}

.hero-details-drawer.is-animating {
  pointer-events: none !important;
}

.hero-details-drawer.is-open:not(.is-animating) {
  pointer-events: auto !important;
}

/* Remove definitivamente a setinha no Ver detalhes */
.hero .actions .btn-secondary[aria-controls="detalhes"]::after {
  content: none !important;
  display: none !important;
}

/* Swipe em vídeos: o overlay transparente recebe o gesto em vez do vídeo travar o pointer */
.carousel-slide.has-video::before {
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

.carousel-slide.has-video.is-playing::before {
  pointer-events: auto !important;
}

.carousel-video-play {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.carousel-slide.has-video video {
  pointer-events: none !important;
  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
}

/* Vídeo normal do carrossel mais estável */
.carousel-slide.has-video video,
.carousel-slide img {
  contain: paint !important;
}

/* Scroll reveal mais barato: sem blur/clip-path/layout caro */
.scroll-reveal {
  filter: none !important;
  clip-path: none !important;
  transform: translate3d(0, 10px, 0) !important;
  transition:
    opacity .28s ease,
    transform .28s cubic-bezier(.22,.72,.18,1) !important;
  will-change: opacity, transform !important;
}

.scroll-reveal.is-visible {
  transform: translate3d(0, 0, 0) !important;
}

/* Performance: seções fora da tela ficam mais leves em navegadores compatíveis */
@supports (content-visibility: auto) {
  .carousel-section,
  main > .section:not(.details-drawer) {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }
}

/* Evita custo alto durante scroll em fundos e brilhos contínuos */
body::before {
  position: absolute !important;
  min-height: 100vh !important;
  opacity: .18 !important;
  filter: none !important;
  will-change: auto !important;
}

.header {
  will-change: transform !important;
}

.carousel-track {
  will-change: transform !important;
  backface-visibility: hidden !important;
}

.carousel-slide,
.carousel-box,
.image-card,
.card {
  backface-visibility: hidden !important;
}

/* Brilho do FAB preservado, porém menos custoso */
.logo-fab::before,
.logo-fab::after {
  will-change: opacity, transform !important;
  animation-duration: 5.8s !important;
}

/* Mobile: transições ainda mais curtas para sensação de resposta imediata */
@media (max-width: 760px) {
  .hero-details-drawer {
    transition:
      height .26s cubic-bezier(.22,.72,.18,1),
      opacity .16s ease,
      transform .22s cubic-bezier(.22,.72,.18,1),
      visibility .16s ease,
      margin .20s ease !important;
  }

  .scroll-reveal {
    transform: translate3d(0, 8px, 0) !important;
    transition:
      opacity .24s ease,
      transform .24s cubic-bezier(.22,.72,.18,1) !important;
  }

  body::before {
    opacity: .14 !important;
  }

  .logo-fab::before,
  .logo-fab::after {
    animation-duration: 6.2s !important;
  }

  .header {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
}

/* Preferência de redução de movimento sem quebrar layout */
@media (prefers-reduced-motion: reduce) {
  .hero-details-drawer,
  .hero-details-drawer > .container,
  .scroll-reveal,
  .header,
  .carousel-track {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* =========================================================
   V36 — correção definitiva da gaveta e fluidez final
   Base absoluta: public_html (9).zip.
   ========================================================= */

/* 
   Correção principal:
   a V35 tinha height: 0 !important; e o JS tentava aplicar height por style.
   Esta versão usa variável CSS em pixels, sempre calculada pelo JS,
   então a gaveta abre inteira e com transição estável.
*/
.hero-details-drawer {
  height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  margin: 0 auto !important;
  transform: translate3d(0, -4px, 0) !important;
  pointer-events: none !important;
  contain: layout paint !important;
  will-change: height, opacity, transform !important;
  transition:
    height .34s cubic-bezier(.22,.72,.18,1),
    opacity .18s ease,
    transform .26s cubic-bezier(.22,.72,.18,1),
    visibility .18s ease,
    margin .22s ease !important;
}

.hero-details-drawer.is-open {
  height: var(--details-drawer-height, 820px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

.hero-details-drawer > .container {
  width: 100% !important;
  overflow: visible !important;
  transform: translate3d(0, -3px, 0) !important;
  transition: transform .26s cubic-bezier(.22,.72,.18,1) !important;
  will-change: transform !important;
}

.hero-details-drawer.is-open > .container {
  transform: translate3d(0, 0, 0) !important;
}

/* Mantém o botão Ver detalhes limpo, sem setinha */
.hero .actions .btn-secondary[aria-controls="detalhes"]::after {
  content: none !important;
  display: none !important;
}

/* Fluidez extra sem remover elementos */
.scroll-reveal {
  filter: none !important;
  clip-path: none !important;
  transform: translate3d(0, 8px, 0) !important;
  transition:
    opacity .24s ease,
    transform .24s cubic-bezier(.22,.72,.18,1) !important;
}

.scroll-reveal.is-visible {
  transform: translate3d(0, 0, 0) !important;
}

/* Mantém o carrossel e vídeos com aceleração, sem mexer na lógica que já ficou boa */
.carousel-track,
.carousel-slide.has-video video,
.carousel-video-play,
.media-lightbox-stage img,
.media-lightbox-stage video,
.header,
.logo-fab {
  backface-visibility: hidden !important;
  transform: translateZ(0);
}

/* Fundo e brilhos com custo menor no celular */
body::before {
  position: absolute !important;
  min-height: 100vh !important;
  filter: none !important;
  will-change: auto !important;
}

@supports (content-visibility: auto) {
  .carousel-section,
  main > .section:not(.details-drawer) {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }
}

@media (max-width: 760px) {
  .hero-details-drawer {
    transition:
      height .30s cubic-bezier(.22,.72,.18,1),
      opacity .16s ease,
      transform .22s cubic-bezier(.22,.72,.18,1),
      visibility .16s ease,
      margin .20s ease !important;
  }

  body::before {
    opacity: .13 !important;
  }

  .logo-fab::before,
  .logo-fab::after {
    animation-duration: 6.2s !important;
  }

  .header {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
}

/* =========================================================
   V37 — cache automático e fluidez final refinada
   Base absoluta: public_html (10).zip.
   ========================================================= */

/* Gaveta Ver detalhes: usa altura real calculada no JS.
   Evita corte, evita max-height exagerado e reduz repaints. */
.hero-details-drawer {
  height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  margin: 0 auto !important;
  transform: translate3d(0, -3px, 0) !important;
  pointer-events: none !important;
  contain: layout paint !important;
  will-change: height, opacity, transform !important;
  transition:
    height .28s cubic-bezier(.22,.72,.18,1),
    opacity .16s ease,
    transform .24s cubic-bezier(.22,.72,.18,1),
    visibility .16s ease,
    margin .20s ease !important;
}

.hero-details-drawer.is-open {
  height: var(--details-drawer-height, 860px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

.hero-details-drawer > .container {
  width: 100% !important;
  overflow: visible !important;
  transform: translate3d(0, -2px, 0) !important;
  transition: transform .24s cubic-bezier(.22,.72,.18,1) !important;
}

.hero-details-drawer.is-open > .container {
  transform: translate3d(0, 0, 0) !important;
}

/* O botão Ver detalhes permanece sem setinha */
.hero .actions .btn-secondary[aria-controls="detalhes"]::after {
  content: none !important;
  display: none !important;
}

/* Scroll reveal mais leve: sem blur e sem clip-path, que são caros no mobile */
.scroll-reveal {
  filter: none !important;
  clip-path: none !important;
  transform: translate3d(0, 8px, 0) !important;
  transition:
    opacity .24s ease,
    transform .24s cubic-bezier(.22,.72,.18,1) !important;
  will-change: opacity, transform !important;
}

.scroll-reveal.is-visible {
  transform: translate3d(0, 0, 0) !important;
}

/* Evita excesso de will-change permanente em blocos grandes */
.card,
.image-card,
.carousel-box,
.carousel-slide {
  will-change: auto !important;
  backface-visibility: hidden !important;
}

/* Mantém aceleração apenas onde há movimento real */
.header,
.carousel-track,
.media-lightbox-stage img,
.media-lightbox-stage video,
.logo-fab {
  backface-visibility: hidden !important;
  transform: translateZ(0);
}

/* Fundo floral e brilho com custo menor durante rolagem */
body::before {
  position: absolute !important;
  min-height: 100vh !important;
  opacity: .14 !important;
  filter: none !important;
  will-change: auto !important;
}

.logo-fab::before,
.logo-fab::after {
  animation-duration: 6.4s !important;
  will-change: opacity, transform !important;
}

/* Seções fora da tela: mais leves nos navegadores compatíveis */
@supports (content-visibility: auto) {
  .carousel-section,
  main > .section:not(.details-drawer) {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }
}

/* Mobile recebe transições mais curtas e menos filtros */
@media (max-width: 760px) {
  .hero-details-drawer {
    transition:
      height .24s cubic-bezier(.22,.72,.18,1),
      opacity .14s ease,
      transform .20s cubic-bezier(.22,.72,.18,1),
      visibility .14s ease,
      margin .18s ease !important;
  }

  .scroll-reveal {
    transform: translate3d(0, 6px, 0) !important;
    transition:
      opacity .20s ease,
      transform .20s cubic-bezier(.22,.72,.18,1) !important;
  }

  .header {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  body::before {
    opacity: .10 !important;
  }

  .logo-fab::before,
  .logo-fab::after {
    animation-duration: 7s !important;
  }
}

/* Respeita redução de movimento sem quebrar funcionalidade */
@media (prefers-reduced-motion: reduce) {
  .hero-details-drawer,
  .hero-details-drawer > .container,
  .scroll-reveal,
  .header,
  .carousel-track,
  .logo-fab::before,
  .logo-fab::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* =========================================================
   V38 — gaveta mais fluida e CTA mais clicável
   Base absoluta: public_html (11).zip.
   ========================================================= */

/* Botão "Ver detalhes" com aparência mais clicável, sem setinha */
.hero .actions .btn-secondary[aria-controls="detalhes"] {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  min-height: 58px !important;
  transform: translate3d(0, 0, 0) !important;
  box-shadow:
    0 18px 38px rgba(128,93,153,.25),
    0 0 0 5px rgba(140,105,166,.07),
    0 0 34px rgba(166,126,190,.20),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  transition:
    transform .20s ease,
    box-shadow .22s ease,
    filter .22s ease !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"]::after {
  content: none !important;
  display: none !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"]::before {
  content: '' !important;
  position: absolute !important;
  inset: -7px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle, rgba(166,126,190,.22), rgba(166,126,190,.08) 44%, transparent 72%) !important;
  filter: blur(9px) !important;
  opacity: .78 !important;
  transform: scale(.96) !important;
  transition:
    opacity .24s ease,
    transform .24s ease,
    filter .24s ease !important;
  pointer-events: none !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"]:hover {
  transform: translate3d(0, -2px, 0) !important;
  box-shadow:
    0 22px 44px rgba(128,93,153,.29),
    0 0 0 6px rgba(140,105,166,.085),
    0 0 42px rgba(166,126,190,.25),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"]:hover::before {
  opacity: 1 !important;
  transform: scale(1.02) !important;
  filter: blur(11px) !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"]:active {
  transform: translate3d(0, -1px, 0) scale(.992) !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"][aria-expanded="true"] {
  box-shadow:
    0 14px 30px rgba(128,93,153,.20),
    0 0 0 4px rgba(140,105,166,.055),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}

/* Gaveta mais natural: altura calculada pelo JS + conteúdo entrando suavemente */
.hero-details-drawer {
  height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  margin: 0 auto !important;
  transform: translate3d(0, -4px, 0) !important;
  pointer-events: none !important;
  contain: layout paint !important;
  will-change: height, opacity, transform !important;
  transition:
    height .36s cubic-bezier(.18,.78,.18,1),
    opacity .18s ease,
    transform .30s cubic-bezier(.18,.78,.18,1),
    visibility .18s ease,
    margin .26s ease !important;
}

.hero-details-drawer.is-open {
  height: var(--details-drawer-height, 860px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

.hero-details-drawer > .container {
  transform: translate3d(0, -8px, 0) scale(.992) !important;
  opacity: .88 !important;
  transition:
    transform .34s cubic-bezier(.18,.78,.18,1),
    opacity .24s ease !important;
  will-change: transform, opacity !important;
}

.hero-details-drawer.is-open > .container {
  transform: translate3d(0, 0, 0) scale(1) !important;
  opacity: 1 !important;
}

/* Durante a transição, impede cliques acidentais que causam sensação de engasgo */
.hero-details-drawer.is-animating {
  pointer-events: none !important;
}

/* Mobile: resposta um pouco mais curta para parecer instantânea */
@media (max-width: 760px) {
  .hero .actions .btn-secondary[aria-controls="detalhes"] {
    min-height: 56px !important;
  }

  .hero .actions .btn-secondary[aria-controls="detalhes"]::before {
    inset: -6px !important;
    filter: blur(8px) !important;
  }

  .hero-details-drawer {
    transition:
      height .30s cubic-bezier(.18,.78,.18,1),
      opacity .16s ease,
      transform .24s cubic-bezier(.18,.78,.18,1),
      visibility .16s ease,
      margin .20s ease !important;
  }

  .hero-details-drawer > .container {
    transform: translate3d(0, -6px, 0) scale(.996) !important;
    transition:
      transform .28s cubic-bezier(.18,.78,.18,1),
      opacity .20s ease !important;
  }

  .hero-details-drawer.is-open > .container {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}

/* =========================================================
   V39 — CTA Ver detalhes mais chamativo
   Base absoluta: public_html (12).zip.
   Efeitos:
   1. Pulso de brilho lilás externo.
   2. Reflexo diagonal interno.
   3. Estado aberto mais claro/pressionado.
   ========================================================= */

/* Botão Ver detalhes: destaque premium e clicável */
.hero .actions .btn-secondary[aria-controls="detalhes"] {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 58px !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.36), transparent 30%),
    linear-gradient(135deg, #a77fc0 0%, #7f599b 100%) !important;
  box-shadow:
    0 18px 38px rgba(128,93,153,.25),
    0 0 0 5px rgba(140,105,166,.07),
    0 0 34px rgba(166,126,190,.20),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    transform .20s ease,
    box-shadow .24s ease,
    background .24s ease,
    filter .24s ease !important;
}

/* Mantém sem setinha */
.hero .actions .btn-secondary[aria-controls="detalhes"]::after {
  content: none !important;
  display: none !important;
}

/* Pulso externo lilás */
.hero .actions .btn-secondary[aria-controls="detalhes"]::before {
  content: '' !important;
  position: absolute !important;
  inset: -10px !important;
  z-index: -2 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle, rgba(176,132,205,.34), rgba(176,132,205,.13) 42%, transparent 72%) !important;
  filter: blur(11px) !important;
  opacity: .78 !important;
  transform: scale(.94) !important;
  pointer-events: none !important;
  animation: elaDetailsPulseV39 3.2s ease-in-out infinite !important;
}

/* Reflexo diagonal interno */
.hero .actions .btn-secondary[aria-controls="detalhes"] span,
.hero .actions .btn-secondary[aria-controls="detalhes"] {
  z-index: 1 !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"] .cta-shine {
  display: none !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"]::marker {
  display: none !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"] > * {
  position: relative !important;
  z-index: 2 !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"] {
  --details-shine-x: -140%;
}

.hero .actions .btn-secondary[aria-controls="detalhes"]::selection {
  background: transparent !important;
}

/* Pseudo interno extra usando box-shadow inset + animação por background-position */
.hero .actions .btn-secondary[aria-controls="detalhes"] {
  background-image:
    linear-gradient(115deg, transparent 0%, transparent 34%, rgba(255,255,255,.28) 44%, rgba(255,255,255,.52) 50%, rgba(255,255,255,.22) 56%, transparent 66%, transparent 100%),
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.36), transparent 30%),
    linear-gradient(135deg, #a77fc0 0%, #7f599b 100%) !important;
  background-size:
    240% 100%,
    100% 100%,
    100% 100% !important;
  background-position:
    -145% 0,
    center,
    center !important;
  animation:
    elaDetailsPulseV39 3.2s ease-in-out infinite,
    elaDetailsShineV39 4.6s ease-in-out infinite !important;
}

/* Hover/active: parece realmente clicável */
.hero .actions .btn-secondary[aria-controls="detalhes"]:hover {
  transform: translate3d(0, -2px, 0) !important;
  box-shadow:
    0 22px 44px rgba(128,93,153,.29),
    0 0 0 6px rgba(140,105,166,.085),
    0 0 42px rgba(166,126,190,.25),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
  filter: saturate(1.04) !important;
}

.hero .actions .btn-secondary[aria-controls="detalhes"]:active {
  transform: translate3d(0, -1px, 0) scale(.992) !important;
}

/* Estado aberto: fica levemente pressionado e mais calmo */
.hero .actions .btn-secondary[aria-controls="detalhes"][aria-expanded="true"] {
  background-image:
    linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,.18) 48%, transparent 62%, transparent 100%),
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(135deg, #9a72b5 0%, #76538f 100%) !important;
  box-shadow:
    0 12px 28px rgba(128,93,153,.18),
    0 0 0 4px rgba(140,105,166,.052),
    inset 0 2px 7px rgba(61,37,75,.10),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  transform: translate3d(0, 0, 0) scale(.996) !important;
  animation: elaDetailsPulseOpenV39 3.8s ease-in-out infinite !important;
}

/* Animações */
@keyframes elaDetailsPulseV39 {
  0%, 100% {
    box-shadow:
      0 18px 38px rgba(128,93,153,.25),
      0 0 0 5px rgba(140,105,166,.07),
      0 0 30px rgba(166,126,190,.17),
      inset 0 1px 0 rgba(255,255,255,.34);
  }

  50% {
    box-shadow:
      0 20px 42px rgba(128,93,153,.29),
      0 0 0 7px rgba(140,105,166,.10),
      0 0 46px rgba(176,132,205,.29),
      inset 0 1px 0 rgba(255,255,255,.38);
  }
}

@keyframes elaDetailsPulseOpenV39 {
  0%, 100% {
    box-shadow:
      0 12px 28px rgba(128,93,153,.18),
      0 0 0 4px rgba(140,105,166,.052),
      inset 0 2px 7px rgba(61,37,75,.10),
      inset 0 1px 0 rgba(255,255,255,.28);
  }

  50% {
    box-shadow:
      0 14px 30px rgba(128,93,153,.20),
      0 0 0 5px rgba(140,105,166,.065),
      inset 0 2px 8px rgba(61,37,75,.11),
      inset 0 1px 0 rgba(255,255,255,.30);
  }
}

@keyframes elaDetailsShineV39 {
  0%, 58% {
    background-position:
      -145% 0,
      center,
      center;
  }

  78%, 100% {
    background-position:
      145% 0,
      center,
      center;
  }
}

/* Mobile: mantém chamativo, mas sem pesar */
@media (max-width: 760px) {
  .hero .actions .btn-secondary[aria-controls="detalhes"] {
    min-height: 56px !important;
    animation:
      elaDetailsPulseV39 3.8s ease-in-out infinite,
      elaDetailsShineV39 5.4s ease-in-out infinite !important;
  }

  .hero .actions .btn-secondary[aria-controls="detalhes"]::before {
    inset: -7px !important;
    filter: blur(8px) !important;
    opacity: .60 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .actions .btn-secondary[aria-controls="detalhes"],
  .hero .actions .btn-secondary[aria-controls="detalhes"]::before {
    animation: none !important;
  }
}

/* =========================================================
   V40 — carrossel desktop e lightbox desktop refinados
   Base absoluta: public_html (13).zip.
   Objetivo: melhorar exibição desktop sem alterar o mobile.
   ========================================================= */

/* Desktop: carrossel normal com mídia inteira visível e proporção elegante */
@media (min-width: 1024px) {
  .carousel-section {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }

  .carousel-section .container {
    max-width: 1120px !important;
  }

  .carousel-heading {
    margin-bottom: 20px !important;
  }

  .carousel-box {
    width: min(100%, 1060px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 14px !important;
    border-radius: 34px !important;
    background:
      radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,239,248,.97)) !important;
    border: 1px solid rgba(140,105,166,.13) !important;
    box-shadow:
      0 24px 60px rgba(103,78,121,.095),
      inset 0 1px 0 rgba(255,255,255,.70) !important;
  }

  .carousel-viewport {
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.76), rgba(246,239,248,.48) 48%, rgba(235,222,244,.40) 100%) !important;
    overflow: hidden !important;
  }

  .carousel-track {
    align-items: stretch !important;
  }

  .carousel-slide {
    min-width: 100% !important;
    flex: 0 0 100% !important;
    display: grid !important;
    place-items: center !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 520px !important;
    max-height: min(68vh, 640px) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.50), rgba(245,238,249,.62)) !important;
    overflow: hidden !important;
  }

  .carousel-slide img,
  .carousel-slide.has-video video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 50% 44%, rgba(255,255,255,.78), rgba(239,229,245,.58) 58%, rgba(226,210,237,.42) 100%) !important;
  }

  .carousel-slide.has-image img {
    pointer-events: none !important;
  }

  .carousel-slide.has-video::before {
    z-index: 4 !important;
  }

  .carousel-video-play {
    width: 70px !important;
    height: 70px !important;
    z-index: 8 !important;
  }

  .carousel-video-play span {
    font-size: 1.42rem !important;
  }

  .carousel-arrow {
    width: 50px !important;
    height: 56px !important;
    font-size: 1.65rem !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow:
      0 18px 36px rgba(103,78,121,.14),
      inset 0 1px 0 rgba(255,255,255,.82) !important;
  }

  .carousel-arrow.prev {
    left: 24px !important;
  }

  .carousel-arrow.next {
    right: 24px !important;
  }

  .carousel-expand {
    right: 24px !important;
    bottom: 24px !important;
    z-index: 12 !important;
  }

  .carousel-dots {
    margin-top: 16px !important;
  }
}

/* Desktop amplo: reduz altura se a tela for mais baixa */
@media (min-width: 1024px) and (max-height: 760px) {
  .carousel-slide {
    min-height: 440px !important;
    max-height: 58vh !important;
  }
}

/* Lightbox desktop: imagem/vídeo sempre inteiros, centralizados e sem crop */
@media (min-width: 1024px) {
  .media-lightbox {
    padding: clamp(22px, 3vw, 42px) !important;
  }

  .media-lightbox-backdrop {
    background:
      radial-gradient(circle at 50% 45%, rgba(94,66,111,.76), rgba(24,16,29,.94) 72%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .media-lightbox-panel {
    width: min(92vw, 1240px) !important;
    height: min(88vh, 820px) !important;
    max-height: 820px !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 56px !important;
    border-radius: 32px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.09)) !important;
    overflow: hidden !important;
  }

  .media-lightbox-stage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding:
      clamp(58px, 7vh, 76px)
      clamp(76px, 7vw, 104px)
      clamp(28px, 4vh, 38px) !important;
    overflow: hidden !important;
  }

  .media-lightbox-stage img,
  .media-lightbox-stage video {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 22px !important;
    box-shadow:
      0 24px 70px rgba(18,12,24,.32),
      0 0 0 1px rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.08) !important;
  }

  .media-lightbox-stage video {
    width: min(100%, 1080px) !important;
    height: auto !important;
    max-height: calc(88vh - 170px) !important;
    background: #150e1b !important;
  }

  .media-lightbox-stage.is-video video {
    width: min(100%, 1080px) !important;
  }

  .media-lightbox-close {
    top: 20px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 8 !important;
  }

  .media-lightbox-nav {
    width: 52px !important;
    height: 64px !important;
    z-index: 8 !important;
    background: rgba(255,255,255,.90) !important;
  }

  .media-lightbox-prev {
    left: 24px !important;
  }

  .media-lightbox-next {
    right: 24px !important;
  }

  .media-lightbox-footer {
    min-height: 56px !important;
    padding: 12px 22px !important;
    background: rgba(18,12,24,.18) !important;
  }
}

/* Desktop ultrawide: evita que o carrossel fique grande demais */
@media (min-width: 1440px) {
  .carousel-section .container {
    max-width: 1180px !important;
  }

  .carousel-box {
    width: min(100%, 1080px) !important;
  }

  .carousel-slide {
    min-height: 560px !important;
    max-height: 660px !important;
  }
}

/* =========================================================
   V41 — correção definitiva do carrossel desktop
   Base absoluta: public_html (15).zip.
   Mobile preservado: tudo abaixo começa em 761px.
   ========================================================= */

/*
  Erro corrigido:
  as regras antigas de desktop ainda deixavam o carrossel depender de
  aspect-ratio + min/max-height e de object-fit herdado. Em telas desktop
  intermediárias isso criava cortes/deslocamentos. Agora o palco da mídia
  tem altura explícita e a mídia fica centralizada com object-fit: contain.
*/
@media (min-width: 761px) {
  .carousel-section {
    padding-top: 18px !important;
    padding-bottom: 26px !important;
  }

  .carousel-section .container {
    max-width: 1160px !important;
  }

  .carousel-box {
    width: min(100%, 1080px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 14px !important;
    border-radius: 34px !important;
    background:
      radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,239,248,.97)) !important;
    border: 1px solid rgba(140,105,166,.13) !important;
    box-shadow:
      0 24px 60px rgba(103,78,121,.095),
      inset 0 1px 0 rgba(255,255,255,.70) !important;
  }

  .carousel-viewport {
    width: 100% !important;
    height: clamp(430px, 54vw, 620px) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.80), rgba(246,239,248,.52) 48%, rgba(235,222,244,.42) 100%) !important;
  }

  .carousel-track {
    height: 100% !important;
    align-items: stretch !important;
  }

  .carousel-slide {
    min-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.54), rgba(245,238,249,.66)) !important;
  }

  .carousel-slide img,
  .carousel-slide.has-video video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 50% 44%, rgba(255,255,255,.78), rgba(239,229,245,.58) 58%, rgba(226,210,237,.42) 100%) !important;
    transform: none !important;
  }

  .carousel-slide.has-video video {
    pointer-events: none !important;
  }

  .carousel-slide.has-video::before {
    z-index: 4 !important;
  }

  .carousel-slide.has-video::after {
    z-index: 5 !important;
  }

  .carousel-video-play {
    width: 70px !important;
    height: 70px !important;
    z-index: 8 !important;
  }

  .carousel-video-play span {
    font-size: 1.42rem !important;
  }

  .carousel-arrow {
    width: 50px !important;
    height: 56px !important;
    font-size: 1.65rem !important;
    z-index: 14 !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow:
      0 18px 36px rgba(103,78,121,.14),
      inset 0 1px 0 rgba(255,255,255,.82) !important;
  }

  .carousel-arrow.prev {
    left: 24px !important;
  }

  .carousel-arrow.next {
    right: 24px !important;
  }

  .carousel-expand {
    right: 24px !important;
    bottom: 24px !important;
    z-index: 15 !important;
  }

  .carousel-dots {
    margin-top: 16px !important;
  }
}

/* Desktop com pouca altura: mantém o carrossel elegante sem cortar mídia */
@media (min-width: 761px) and (max-height: 760px) {
  .carousel-viewport {
    height: clamp(360px, 58vh, 500px) !important;
  }
}

/* Desktop amplo */
@media (min-width: 1440px) {
  .carousel-section .container {
    max-width: 1200px !important;
  }

  .carousel-box {
    width: min(100%, 1100px) !important;
  }

  .carousel-viewport {
    height: clamp(520px, 42vw, 660px) !important;
  }
}

/*
  Lightbox desktop:
  antes o palco e a mídia tinham medidas genéricas, e a mídia podia parecer
  deslocada/cortada. Agora o palco tem caixa previsível e imagem/vídeo ocupam
  essa caixa com contain, sempre centralizados.
*/
@media (min-width: 761px) {
  .media-lightbox {
    padding: clamp(18px, 2.4vw, 36px) !important;
  }

  .media-lightbox-backdrop {
    background:
      radial-gradient(circle at 50% 45%, rgba(94,66,111,.76), rgba(24,16,29,.94) 72%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .media-lightbox-panel {
    width: min(94vw, 1240px) !important;
    height: min(88vh, 820px) !important;
    max-height: 820px !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 56px !important;
    border-radius: 32px !important;
    overflow: hidden !important;
  }

  .media-lightbox-stage {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding:
      clamp(54px, 6.2vh, 70px)
      clamp(66px, 6vw, 94px)
      clamp(26px, 3.5vh, 36px) !important;
    overflow: hidden !important;
  }

  .media-lightbox-stage img,
  .media-lightbox-stage video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 22px !important;
    transform: none !important;
    box-shadow:
      0 24px 70px rgba(18,12,24,.32),
      0 0 0 1px rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.08) !important;
  }

  .media-lightbox-stage.is-video video {
    background: #150e1b !important;
  }

  .media-lightbox-close {
    top: 20px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 8 !important;
  }

  .media-lightbox-nav {
    width: 52px !important;
    height: 64px !important;
    z-index: 8 !important;
    background: rgba(255,255,255,.90) !important;
  }

  .media-lightbox-prev {
    left: 24px !important;
  }

  .media-lightbox-next {
    right: 24px !important;
  }

  .media-lightbox-footer {
    min-height: 56px !important;
    padding: 12px 22px !important;
    background: rgba(18,12,24,.18) !important;
  }
}

/* Telas desktop estreitas: reduz padding lateral do lightbox, mas ainda sem alterar mobile */
@media (min-width: 761px) and (max-width: 1023px) {
  .media-lightbox-stage {
    padding: 58px 54px 28px !important;
  }

  .media-lightbox-prev {
    left: 14px !important;
  }

  .media-lightbox-next {
    right: 14px !important;
  }
}

/* =========================================================
   V42 — carrossel desktop em moldura vertical
   Base absoluta: public_html (16).zip.
   Mobile preservado: somente min-width 761px.
   ========================================================= */

/*
  Correção aplicada:
  As mídias do carrossel são predominantemente verticais.
  O desktop estava forçando um palco horizontal/largo. Mesmo com object-fit,
  isso criava sensação de corte, deslocamento e composição errada.
  Agora o desktop usa uma moldura vertical centralizada, parecida com a leitura
  que já funciona bem no mobile.
*/
@media (min-width: 761px) {
  .carousel-section {
    padding-top: 18px !important;
    padding-bottom: 28px !important;
  }

  .carousel-section .container {
    max-width: 1180px !important;
  }

  .carousel-heading {
    max-width: 760px !important;
    margin-bottom: 20px !important;
  }

  .carousel-box {
    width: min(100%, 720px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 16px !important;
    border-radius: 34px !important;
    background:
      radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,239,248,.97)) !important;
    border: 1px solid rgba(140,105,166,.13) !important;
    box-shadow:
      0 24px 60px rgba(103,78,121,.095),
      inset 0 1px 0 rgba(255,255,255,.70) !important;
  }

  .carousel-viewport {
    width: min(100%, 520px) !important;
    height: clamp(620px, 78vh, 780px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.86), rgba(246,239,248,.58) 48%, rgba(235,222,244,.42) 100%) !important;
  }

  .carousel-track {
    height: 100% !important;
    align-items: stretch !important;
  }

  .carousel-slide {
    min-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.62), rgba(245,238,249,.70)) !important;
  }

  .carousel-slide img,
  .carousel-slide.has-video video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 50% 44%, rgba(255,255,255,.82), rgba(239,229,245,.58) 58%, rgba(226,210,237,.42) 100%) !important;
    transform: none !important;
  }

  .carousel-slide.has-video video {
    pointer-events: none !important;
  }

  .carousel-video-play {
    width: 70px !important;
    height: 70px !important;
    z-index: 8 !important;
  }

  .carousel-video-play span {
    font-size: 1.42rem !important;
  }

  .carousel-arrow {
    width: 50px !important;
    height: 56px !important;
    font-size: 1.65rem !important;
    z-index: 14 !important;
    background: rgba(255,255,255,.93) !important;
    box-shadow:
      0 18px 36px rgba(103,78,121,.14),
      inset 0 1px 0 rgba(255,255,255,.82) !important;
  }

  .carousel-arrow.prev {
    left: 28px !important;
  }

  .carousel-arrow.next {
    right: 28px !important;
  }

  .carousel-expand {
    right: 30px !important;
    bottom: 28px !important;
    z-index: 15 !important;
  }

  .carousel-dots {
    margin-top: 16px !important;
  }
}

/* Desktop com pouca altura: reduz a moldura sem voltar ao corte */
@media (min-width: 761px) and (max-height: 820px) {
  .carousel-viewport {
    width: min(100%, 460px) !important;
    height: clamp(520px, 70vh, 640px) !important;
  }

  .carousel-box {
    width: min(100%, 660px) !important;
  }
}

/* Desktop amplo: mantém a moldura elegante, sem esticar demais */
@media (min-width: 1440px) {
  .carousel-box {
    width: min(100%, 740px) !important;
  }

  .carousel-viewport {
    width: min(100%, 540px) !important;
    height: clamp(660px, 72vh, 820px) !important;
  }
}

/*
  Lightbox desktop:
  Em vez de transformar imagem/vídeo em uma caixa 100%x100%, agora a mídia
  fica com width/height auto e limites máximos. Isso elimina a sensação de
  deslocamento e preserva a proporção real.
*/
@media (min-width: 761px) {
  .media-lightbox {
    padding: clamp(18px, 2.6vw, 38px) !important;
  }

  .media-lightbox-panel {
    width: min(94vw, 1180px) !important;
    height: min(90vh, 860px) !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 56px !important;
    border-radius: 32px !important;
    overflow: hidden !important;
  }

  .media-lightbox-stage {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding:
      clamp(56px, 6vh, 72px)
      clamp(64px, 6vw, 96px)
      clamp(28px, 4vh, 40px) !important;
    overflow: hidden !important;
  }

  .media-lightbox-stage img,
  .media-lightbox-stage video {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 22px !important;
    transform: none !important;
    box-shadow:
      0 24px 70px rgba(18,12,24,.32),
      0 0 0 1px rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.08) !important;
  }

  .media-lightbox-stage.is-video video {
    width: min(100%, 980px) !important;
    height: auto !important;
    max-height: 100% !important;
    background: #150e1b !important;
  }

  .media-lightbox-stage.is-image img {
    max-width: min(100%, 760px) !important;
    max-height: 100% !important;
  }

  .media-lightbox-close {
    top: 20px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 8 !important;
  }

  .media-lightbox-nav {
    width: 52px !important;
    height: 64px !important;
    z-index: 8 !important;
    background: rgba(255,255,255,.90) !important;
  }

  .media-lightbox-prev {
    left: 24px !important;
  }

  .media-lightbox-next {
    right: 24px !important;
  }

  .media-lightbox-footer {
    min-height: 56px !important;
    padding: 12px 22px !important;
  }
}