/* ==========================================================================
   VYVA HOMES - MASTER STYLESHEET (VERSÃO 1)
   Cores: Preto #000000 dominante, Branco #FFFFFF, Detalhes #E8590C
   Tipografia: Syne (Headings - sem ExtraBold) + Raleway (Body & Labels)
   ========================================================================== */

/* --- 1. DESIGN TOKENS & VARIÁVEIS GLOBAIS --- */
:root {
  --color-black: #000000;
  --color-dark-surface: #0a0b0e;
  --color-dark-card: #111318;
  --color-dark-border: rgba(255, 255, 255, 0.1);
  --color-dark-border-hover: rgba(232, 89, 12, 0.5);
  
  --color-white: #ffffff;
  --color-white-muted: #b4bac8;
  --color-white-subtle: #767d8f;

  --color-orange: #E8590C;
  --color-orange-hover: #d24e08;
  --color-orange-glow: rgba(232, 89, 12, 0.28);
  --color-orange-soft: rgba(232, 89, 12, 0.12);

  --font-heading: 'Syne', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --nav-height: 86px;
  --container-max: 1320px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-full: 8px;

  --ease-roll: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 2. RESET & BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: auto;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background-color: #0a0a0c; /* Fundo escuro para destacar os pontos da matriz */
  color: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Background Interativo Dot Matrix Warp */
#matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

button, input, select {
  font-family: inherit;
  border: none;
  outline: none;
}

/* Containers */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.2rem, 4vw, 2.5rem);
  padding-right: clamp(1.2rem, 4vw, 2.5rem);
}

.text-orange {
  color: var(--color-orange);
}

/* --- 3. PRELOADER --- */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

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

.preloader__logo {
  width: 160px;
  margin-bottom: 1.5rem;
  animation: preloaderPulse 1.8s infinite ease-in-out;
}

.preloader__bar {
  width: 140px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.preloader__bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-orange);
  animation: preloaderSlide 1.4s infinite ease;
}

@keyframes preloaderPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes preloaderSlide {
  0% { left: -100%; }
  50% { left: 0%; }
  100% { left: 100%; }
}

/* --- 4. ROLLING TEXT BUTTONS (CLEAN & MINIMALIST) --- */
.btn-roll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.8rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.btn-roll__inner {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 1.25em;
  overflow: hidden;
}

.btn-roll__text {
  display: block;
  line-height: 1.25em;
  transition: transform 0.45s var(--ease-roll);
  will-change: transform;
  white-space: nowrap;
}

.btn-roll__text--clone {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.btn-roll:hover .btn-roll__text {
  transform: translateY(-100%);
}

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

/* Variants */
.btn-roll--primary {
  background-color: var(--color-orange);
  color: var(--color-white);
  box-shadow: 0 4px 20px var(--color-orange-glow);
}

.btn-roll--primary:hover {
  background-color: var(--color-orange-hover);
  box-shadow: 0 8px 30px rgba(232, 89, 12, 0.45);
}

.btn-roll--primary .btn-roll__text--clone {
  color: var(--color-white);
}

/* ==========================================================================
   BUTTON LIGHTING: .button-lighting / .button-litghting
   Efeito inspirado no circuit-card para botões com preenchimento:
   - Estado normal: preenchimento rico em degradê sutil com borda refinada
   - Ao passar o mouse (:hover):
     1. Acende atrás (halo difuso expandido em degradê âmbar/laranja)
     2. A borda anima mexendo (feixe de luz rotativo com vértice branco puro)
   ========================================================================== */
.button-lighting,
.button-litghting {
  --bl-border-width: 1.5px;
  --bl-duration: 2.8s;

  position: relative;
  isolation: isolate;
  overflow: visible !important;
  background: radial-gradient(130% 90% at 50% 15%, #ff7828 0%, #e8590c 70%, #d04a04 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* O texto do botão fica sempre acima do efeito */
.button-lighting .btn-roll__inner,
.button-litghting .btn-roll__inner {
  position: relative;
  z-index: 3;
}

/* 1. Borda Animada Mexendo no Hover (estritamente no perímetro de 1.5px) */
.button-lighting::before,
.button-litghting::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--bl-border-width));
  border-radius: inherit;
  padding: var(--bl-border-width);
  background: conic-gradient(
    from var(--gradient-angle),
    transparent 0deg,
    transparent 60deg,
    rgba(232, 89, 12, 0.2) 90deg,
    rgba(255, 140, 50, 0.85) 130deg,
    #ffffff 180deg,                     /* Luz branca pura no vértice */
    rgba(255, 140, 50, 0.85) 230deg,
    rgba(232, 89, 12, 0.2) 270deg,
    transparent 300deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255, 140, 50, 0.85));
  animation: lighting-move-sweep var(--bl-duration) linear infinite;
  animation-play-state: paused;
  transition: opacity 0.35s ease;
}

/* 2. Acende Atrás (Halo difuso de fundo inspirado no circuit-card) */
.button-lighting::after,
.button-litghting::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 140, 50, 0.85) 0%,
    rgba(232, 89, 12, 0.70) 50%,
    transparent 78%
  );
  filter: blur(14px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transform: scale(0.92);
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}

/* Estado de Hover: O botão acende atrás e a border anima mexendo */
.button-lighting:hover,
.button-litghting:hover {
  background: radial-gradient(130% 90% at 50% 15%, #ff893d 0%, #f06417 65%, #dd5006 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(232, 89, 12, 0.35);
}

.button-lighting:hover::before,
.button-litghting:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.button-lighting:hover::after,
.button-litghting:hover::after {
  opacity: 1;
  transform: scale(1.15);
  filter: blur(16px);
}

.btn-roll--outline {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
}

.btn-roll--outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--color-orange);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.btn-roll--outline .btn-roll__text--clone {
  color: var(--color-orange);
}

.btn-roll--white {
  background: var(--color-white);
  color: var(--color-black);
}

.btn-roll--white:hover {
  background: #f0f0f2;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

.btn-roll--white .btn-roll__text--clone {
  color: var(--color-orange);
}

/* --- 4.1 PROGRESSIVE BLUR EXCLUSIVO ATRÁS DA NAVBAR (SINCRONIZADO COM O SCROLL) --- */
.navbar .progressive-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 140px;
  pointer-events: none;
  z-index: -1; /* Exatamente atrás dos links, botões e logo da navbar */
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

.navbar.is-scrolled .progressive-blur {
  opacity: 1;
}

.navbar.is-hidden .progressive-blur {
  opacity: 0;
  visibility: hidden;
}

.progressive-blur > div {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Camada 1: Blur sutil no início da transição */
.progressive-blur > div:nth-child(1) {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 25%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 25%);
}

/* Camada 2 */
.progressive-blur > div:nth-child(2) {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 50%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 50%);
}

/* Camada 3 */
.progressive-blur > div:nth-child(3) {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 75%);
}

/* Camada 4: Blur médio */
.progressive-blur > div:nth-child(4) {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
}

/* Camada 5: Blur máximo no extremo da borda */
.progressive-blur > div:nth-child(5) {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

/* --- 5. NAVBAR PERSISTENTE --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 1000;
  display: flex;
  align-items: center;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: transform 0.35s var(--ease-smooth), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, height 0.3s ease;
  transform: translateY(0);
}

/* Sombra Overlay Gradiente quando a navbar está transparente: 45% cima pra 0% baixo, preto #000000 */
.navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 140px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: -2;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.navbar.is-scrolled::before {
  opacity: 0;
}

.navbar.is-scrolled {
  background-color: #000000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 76px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.navbar.is-hidden {
  transform: translateY(-140px);
}

.navbar__wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.navbar__brand {
  display: flex;
  align-items: center;
}

.navbar__brand-logo {
  height: 28px;
  width: auto;
  transition: transform 0.3s ease;
}

.navbar__brand:hover .navbar__brand-logo {
  transform: scale(1.02);
}

.navbar__menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2.2rem;
}

.navbar__item {
  position: relative;
}

.navbar__link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white-muted);
  transition: color 0.25s ease;
  position: relative;
  padding: 0.4rem 0;
}

.navbar__link:hover, .navbar__link.is-active {
  color: var(--color-white);
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--color-orange);
  transition: width 0.3s var(--ease-smooth);
}

.navbar__link:hover::after {
  width: 100%;
}

/* Dropdown Soluções */
.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  padding: 0.8rem 0;
  min-width: 200px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.navbar__item:hover .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}

.navbar__dropdown-link {
  display: block;
  padding: 0.6rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-white-muted);
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.navbar__dropdown-link:hover {
  background-color: rgba(232, 89, 12, 0.1);
  color: var(--color-orange);
  padding-left: 1.7rem;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  background: none;
  cursor: pointer;
  z-index: 1001;
}

.navbar__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- 6. SEÇÃO 01 - HERO COM BACKGROUND VIDEO FULLSCREEN --- */
.hero {
  position: relative;
  z-index: 2;
  background-color: var(--color-black);
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--nav-height);
  padding-bottom: 5rem;
}

.hero__video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background-color: #0a0b0e;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  background-color: #0a0b0e;
}


.hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 1rem;
  background: rgba(232, 89, 12, 0.14);
  border: 1px solid rgba(232, 89, 12, 0.4);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 1.5rem;
  backdrop-filter: blur(8px);
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-orange);
  box-shadow: 0 0 10px var(--color-orange);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 6.2vw, 5.5rem);
  font-weight: 700; /* Syne Bold - sem extra bold */
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

.hero__typewriter {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 2.5rem;
}

@media (min-width: 992px) {
  .hero__typewriter {
    font-size: 2.4rem;
  }
}

#typewriter-text::after {
  content: '|';
  color: var(--color-orange);
  animation: blinkCursor 0.75s infinite;
  margin-left: 4px;
}

@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* --- 7. MOTOR DE RESERVAS INTEGRADO NA HERO (65px da base da Hero) --- */
.hero__booking-wrap {
  position: absolute;
  bottom: 65px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 20;
}

.booking-bar {
  background: rgba(14, 16, 22, 0.88);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.4rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 1rem;
  align-items: center;
}

.booking-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.5rem 0.8rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.booking-item:last-of-type {
  border-right: none;
}

.booking-item__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.booking-item__input, .booking-item__select {
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}

.booking-item__select option {
  background: #111318;
  color: #ffffff;
}

.booking-item__input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}

/* --- 8. LOOPING TICKER (MARQUEE) --- */
.ticker-section {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  padding: 1.8rem 0;
  background-color: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerScroll 24s linear infinite;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 1.8rem;
  padding: 0 1.2rem;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.ticker-item span.dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-orange);
  border-radius: 50%;
  display: inline-block;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   08.0 SEÇÃO DE ESTATÍSTICAS / STATISTICS (ODOMETER EFFECT)
   Desde 2019 (Dallas - Texas) | Cidades 22+ (EUA - Brasil) | Mais de 21 mil (Atendimentos)
   ========================================================================== */
.section-stats {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 5.5rem 0 5rem 0;
  background: transparent;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: flex-start;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-card__label {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-white);
  line-height: 1.2;
}

.stat-card__divider {
  width: 55px;
  height: 2px;
  background-color: var(--color-orange);
  margin: 0.75rem 0 1.25rem 0;
  border-radius: 1px;
}

.stat-card__value {
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 5.5vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-white);
  line-height: 1.15;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}

.stat-card__symbol {
  font-family: var(--font-heading);
  font-size: 0.85em;
  font-weight: 700;
  color: var(--color-white);
  margin-left: 1px;
  line-height: 1;
}

.stat-card__symbol--text {
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-left: 0.18em;
}

.stat-card__subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-white-muted);
  margin-top: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ODOMETER EFFECT CSS (ROLETAS DE DÍGITOS) */
.odometer {
  display: inline-flex;
  align-items: baseline;
  line-height: 1.15;
}

.odometer-digit {
  display: inline-block;
  height: 1.15em;
  line-height: 1.15em;
  overflow: hidden;
  vertical-align: top;
  position: relative;
}

.odometer-ribbon {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform: translateY(0%);
}

.odometer-ribbon span {
  display: block;
  height: 1.15em;
  line-height: 1.15em;
  text-align: center;
}

/* Responsividade da Seção de Estatísticas */
@media (max-width: 820px) {
  .section-stats {
    padding: 3.8rem 0 3.8rem 0;
  }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .stat-card__divider {
    margin: 0.6rem 0 1rem 0;
  }
  .stat-card__value {
    font-size: clamp(3rem, 11vw, 4.2rem);
  }
}

/* --- 8.1 CIRCUITO INTELIGENTE VYVA DECOR (CHIP CENTRAL DO SISTEMA) --- */
.section-circuit {
  padding: 6rem 0 7rem 0;
  position: relative;
  z-index: 2;
  background: transparent;
  overflow-x: hidden;
}

.section-circuit .section-header {
  margin-bottom: 2.2rem;
}

.section-circuit .section-header__title {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section-circuit .section-header__desc {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

/* Barra de Sequência de Abas do Ecossistema (Design Fiel à Referência) */
.ecosystem-tabs-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 3.6rem auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 1rem;
}

.ecosystem-tabs-wrap::-webkit-scrollbar {
  display: none;
}

.ecosystem-tabs {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  border-bottom: 2px solid rgba(255, 255, 255, 0.22);
  min-width: max-content;
}

.ecosystem-tab {
  background: transparent;
  border: none;
  padding: 0.85rem 2.2rem 1.15rem 2.2rem;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: all 0.25s ease;
  user-select: none;
}

.ecosystem-tab__label {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s ease;
  white-space: nowrap;
}

.ecosystem-tab:hover .ecosystem-tab__label {
  color: rgba(255, 255, 255, 0.85);
}

.ecosystem-tab.is-active .ecosystem-tab__label {
  color: #FFFFFF !important;
}

.ecosystem-tab__line {
  position: absolute;
  bottom: -2px; /* Alinha perfeitamente sobre a linha cinza base */
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  border-radius: 2px 2px 0 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

.ecosystem-tab.is-active .ecosystem-tab__line {
  height: 3.5px;
  background: var(--color-orange); /* #E8590C */
  box-shadow: 0 0 14px rgba(232, 89, 12, 0.7), 0 2px 6px rgba(232, 89, 12, 0.4);
}

.circuit-wrapper {
  width: 100%;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 0.5rem 2rem 0.5rem;
}

.circuit-wrapper::-webkit-scrollbar {
  height: 6px;
}

.circuit-wrapper::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
}

.circuit-wrapper::-webkit-scrollbar-thumb {
  background: rgba(232, 89, 12, 0.4);
  border-radius: var(--radius-sm);
}

.circuit-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(105px, auto) 130px minmax(105px, auto);
  gap: 3.5rem 2.8rem;
  align-items: center;
  max-width: 1080px;
  min-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.circuit-svg,
.circuit-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.circuit-svg {
  z-index: 1;
  overflow: visible;
}

.circuit-canvas {
  z-index: 3;
}

/* ==========================================================================
   REGISTRO HOUDINI DA PROPRIEDADE DE ÂNGULO
   (Permite interpolação nativa acelerada por GPU do conic-gradient)
   ========================================================================== */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ==========================================================================
   EFEITO UTILITÁRIO REUTILIZÁVEL: .lighting-move-border
   Feixe de luz rotativo em 360° estritamente na borda (miolo 100% oco)
   Preserva integralmente o fundo, blur e padding do elemento hospedeiro.
   Cores: Tons de Laranja e Branco (#ffffff / #E8590C)
   ========================================================================== */
.lighting-move-border,
.about-box {
  --lmb-border-width: 1.5px;
  --lmb-duration: 7s;
  --lmb-color-start: rgba(232, 89, 12, 0.15);
  --lmb-color-mid: rgba(232, 89, 12, 0.70);
  --lmb-color-high: rgba(255, 140, 50, 0.95);
  --lmb-color-apex: #ffffff;
  --lmb-glow: rgba(232, 89, 12, 0.55);

  position: relative;
  isolation: isolate;
}

.lighting-move-border::before,
.about-box::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--lmb-border-width));
  border-radius: inherit;
  padding: var(--lmb-border-width);
  background: conic-gradient(
    from var(--gradient-angle),
    transparent 0deg,
    transparent 70deg,
    var(--lmb-color-start) 100deg,
    var(--lmb-color-mid) 130deg,
    var(--lmb-color-high) 160deg,
    var(--lmb-color-apex) 185deg,      /* Foco de luz branca pura no vértice */
    var(--lmb-color-high) 210deg,
    var(--lmb-color-mid) 240deg,
    var(--lmb-color-start) 270deg,
    transparent 300deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 5px var(--lmb-glow));
  animation: lighting-move-sweep var(--lmb-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Variante de Hover: O feixe rotativo acende e corre ao passar o mouse */
.lighting-move-border-hover {
  --lmb-border-width: 1.5px;
  --lmb-duration: 5s;
  --lmb-color-start: rgba(232, 89, 12, 0.15);
  --lmb-color-mid: rgba(232, 89, 12, 0.70);
  --lmb-color-high: rgba(255, 140, 50, 0.95);
  --lmb-color-apex: #ffffff;
  --lmb-glow: rgba(232, 89, 12, 0.65);

  position: relative;
  isolation: isolate;
}

.lighting-move-border-hover::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--lmb-border-width));
  border-radius: inherit;
  padding: var(--lmb-border-width);
  background: conic-gradient(
    from var(--gradient-angle),
    transparent 0deg,
    transparent 70deg,
    var(--lmb-color-start) 100deg,
    var(--lmb-color-mid) 130deg,
    var(--lmb-color-high) 160deg,
    var(--lmb-color-apex) 185deg,      /* Foco de luz branca pura no vértice */
    var(--lmb-color-high) 210deg,
    var(--lmb-color-mid) 240deg,
    var(--lmb-color-start) 270deg,
    transparent 300deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 6px var(--lmb-glow));
  opacity: 0;
  animation: lighting-move-sweep var(--lmb-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-play-state: paused;
  transition: opacity 0.4s ease;
}

/* No Desktop: Ativação EXCLUSIVA no :hover */
.lighting-move-border-hover:hover::before {
  opacity: 1;
  animation-play-state: running;
}

@keyframes lighting-move-sweep {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

.circuit-line {
  fill: none;
  stroke: rgba(232, 89, 12, 0.3);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(232, 89, 12, 0.25));
}

.circuit-pin {
  fill: var(--color-orange);
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(232, 89, 12, 0.4));
}

/* Posicionamento no Grid */
.circuit-card--top-left {
  grid-column: 1;
  grid-row: 1;
}

.circuit-card--top-center {
  grid-column: 2;
  grid-row: 1;
}

.circuit-card--top-right {
  grid-column: 3;
  grid-row: 1;
}

.circuit-chip-slot {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circuit-card--bottom-left {
  grid-column: 1;
  grid-row: 3;
}

.circuit-card--bottom-center {
  grid-column: 2;
  grid-row: 3;
}

.circuit-card--bottom-right {
  grid-column: 3;
  grid-row: 3;
}

/* Cards do Circuito - Borda Ativa no Card Todo (Estática / Sem Rotação) */
.circuit-card {
  --card-bg: #0d0f17;
  --border-radius: var(--radius-md); /* 8px */
  --glow-intensity: 0.45;

  position: relative;
  isolation: isolate;
  border-radius: var(--border-radius);
  border: 1px solid transparent;

  /* Camadas de background:
     1ª camada: Fundo interno com wash bronze/âmbar suave recortado no padding-box (tampa o miolo)
     2ª camada: Borda ativa no card todo em degradê suave de âmbar, laranja e branco (estática) */
  background: 
    radial-gradient(130% 90% at 50% 12%, rgba(68, 44, 30, 0.65) 0%, rgba(18, 20, 28, 0.96) 65%, #0d0e14 100%) padding-box,
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 170, 80, 0.70) 25%,
      rgba(232, 89, 12, 0.55) 50%,
      rgba(255, 140, 50, 0.70) 75%,
      rgba(255, 255, 255, 0.75) 100%
    ) border-box;

  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 2.2rem 1.6rem;
  min-height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s ease;
  user-select: none;
}

/* Halo Difuso Suave no Card (Pulsa dinamicamente com a chegada dos fótons) */
.circuit-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--border-radius);
  background: radial-gradient(
    circle at 50% 40%,
    rgba(232, 89, 12, 0.28) 0%,
    rgba(255, 140, 50, 0.35) 45%,
    transparent 75%
  );
  filter: blur(16px);
  opacity: var(--glow-intensity);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.circuit-card:hover {
  transform: translateY(-4px);
  --glow-intensity: 0.8;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 30px rgba(232, 89, 12, 0.30);
}

.circuit-card.is-receiving {
  --glow-intensity: 0.95;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 35px rgba(255, 140, 50, 0.45);
}

.circuit-card__title {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.4vw, 1.15rem);
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.4;
  letter-spacing: -0.01em;
  transition: opacity 0.22s ease, transform 0.22s ease;
  will-change: opacity, transform;
}

/* Chip Central (Processador do Sistema) com Bordas Houdini em Luz Suave */
.circuit-chip {
  --duration: 5.5s;
  --glow-intensity: 0.65;

  position: relative;
  isolation: isolate;
  width: 104px;
  height: 104px;
  border-radius: var(--radius-sm); /* 8px */
  border: 1.5px solid transparent;

  background:
    radial-gradient(circle at center, #fff6f0 0%, #fee1cf 45%, #fcab73 80%, #ea5c10 100%) padding-box,
    conic-gradient(
      from var(--gradient-angle),
      transparent 0deg,
      transparent 80deg,
      rgba(232, 89, 12, 0.25) 120deg,
      rgba(255, 140, 50, 0.85) 160deg,
      rgba(255, 255, 255, 1) 190deg,      /* Luz branca pura no vértice */
      rgba(255, 170, 80, 0.85) 220deg,
      rgba(232, 89, 12, 0.25) 250deg,
      transparent 280deg,
      transparent 360deg
    ) border-box,
    linear-gradient(rgba(232, 89, 12, 0.4), rgba(232, 89, 12, 0.4)) border-box;

  animation: circuit-border-sweep var(--duration) linear infinite;
  box-shadow: 0 0 35px rgba(232, 89, 12, 0.45), 0 0 70px rgba(232, 89, 12, 0.18), inset 0 0 16px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s ease;
  user-select: none;
}

.circuit-chip::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-sm);
  background: conic-gradient(
    from var(--gradient-angle),
    transparent 0deg,
    transparent 80deg,
    rgba(232, 89, 12, 0.20) 120deg,
    rgba(255, 140, 50, 0.55) 160deg,
    rgba(255, 255, 255, 0.85) 190deg,
    rgba(255, 170, 80, 0.55) 220deg,
    rgba(232, 89, 12, 0.20) 250deg,
    transparent 280deg,
    transparent 360deg
  );
  filter: blur(14px);
  opacity: var(--glow-intensity);
  z-index: -1;
  pointer-events: none;
  animation: circuit-border-sweep var(--duration) linear infinite;
  transition: opacity 0.35s ease;
}

.circuit-chip:hover {
  transform: scale(1.06);
  --glow-intensity: 0.85;
  box-shadow: 0 0 50px rgba(232, 89, 12, 0.65), 0 0 95px rgba(232, 89, 12, 0.35), inset 0 0 22px rgba(255, 255, 255, 0.95);
}

.circuit-chip__core {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
}

.circuit-chip__brand {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.circuit-chip__name {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1a0800;
}

.circuit-chip__sub {
  font-family: var(--font-body);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #551c00;
  margin-top: 3px;
}

.circuit-chip__pulse {
  position: absolute;
  inset: -8px;
  border: 1.2px solid rgba(232, 89, 12, 0.7);
  border-radius: 12px;
  opacity: 0;
  animation: chipRadiation 2.8s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

@keyframes chipRadiation {
  0% {
    transform: scale(0.92);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.38);
    opacity: 0;
  }
}

/* Keyframes de Rotação Suave do Ângulo Houdini */
@keyframes circuit-border-sweep {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

/* --- 9. SEÇÃO 03 - 4 CARDS PRINCIPAIS --- */
.section-cards {
  padding: 7rem 0;
  position: relative;
  z-index: 2;
  background: transparent;
}

.section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 4.5rem auto;
}

.section-header__tag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 0.8rem;
  display: inline-block;
}

.section-header__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.section-header__desc {
  font-size: 1rem;
  color: var(--color-white-muted);
  line-height: 1.7;
}

/* --- 9. SEÇÃO FOTOS LOCAIS - MOSAICO COM PARALLAX EXTERNO --- */
.section-local-photos {
  padding: 4.5rem 0 6rem 0;
  position: relative;
  z-index: 2;
  background: transparent;
}

/* Grid Mosaico */
.editorial-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.8vw, 36px);
}

.editorial-row {
  display: grid;
  grid-template-columns: 1.56fr 1fr;
  gap: clamp(22px, 2.8vw, 36px);
  align-items: stretch;
}

.editorial-row.reverse {
  grid-template-columns: 1fr 1.56fr;
}

/* ==========================================================================
   ESTRUTURA DO CARD DO MOSAICO (Fixo no Grid)
   ========================================================================== */
.card-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-outer {
  position: relative;
  width: 100%;
  height: 100%;
  transform: none;
}

/* ==========================================================================
   CARD DE FOTO DO MOSAICO (Parallax na Imagem Interna: 10% cima / 10% baixo)
   ========================================================================== */
.card-inner-box {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #0c0e14;
  border-radius: var(--radius-md); /* 8px */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.card-inner-box:hover {
  border-color: rgba(232, 89, 12, 0.35);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(232, 89, 12, 0.15);
}

/* Alturas do Mosaico fieis à referência (Linha 1 e Linha 2 alinhadas horizontalmente) */
.row-1 .card-inner-box {
  height: clamp(290px, 34vw, 440px);
}

.row-2 .card-inner-box {
  height: clamp(340px, 40vw, 515px);
}

.card-img-wrapper {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.card-img-wrapper img,
.card-img-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsividade */
@media (max-width: 920px) {
  .editorial-row,
  .editorial-row.reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .editorial-grid {
    gap: 24px;
  }

  .row-1 .card-inner-box,
  .row-2 .card-inner-box {
    height: clamp(260px, 62vw, 380px);
  }
}

/* ==========================================================================
   03.1 CARROSSEL HORIZONTAL GALLERY (GSAP SCROLLTRIGGER PIN & SCRUB)
   Fiel à demo oficial GSAP. Trava na seção e rola horizontalmente com o scroll.
   Blindado com min-height e posicionamento isolado para evitar qualquer salto.
   ========================================================================== */
.section-horiz-gallery {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  z-index: 2;
  box-sizing: border-box;
  padding: 4rem 0;
}

.horiz-gallery__container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.horiz-gallery__header {
  width: 100%;
  margin-bottom: 2.5rem;
}

.horiz-gallery__header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.horiz-gallery__titles {
  max-width: 680px;
}

.horiz-gallery__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.01em;
  margin: 0.4rem 0 0.6rem 0;
  line-height: 1.2;
}

.horiz-gallery__subheading {
  font-size: 0.95rem;
  color: var(--color-white-muted);
  line-height: 1.6;
}

/* Controles de Navegação: Setas + Tracker */
.horiz-gallery__controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.horiz-gallery__arrows {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.horiz-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(14, 16, 22, 0.7);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.horiz-nav-btn:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
  background: rgba(232, 89, 12, 0.15);
  transform: scale(1.06);
}

.horiz-nav-btn:active {
  transform: scale(0.94);
}

.horiz-gallery__tracker {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.tracker-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-orange);
  font-weight: 600;
}

.horiz-gallery__progress-track {
  width: 140px;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.horiz-gallery__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-orange);
  transform-origin: left;
  transform: scaleX(0.2);
  box-shadow: 0 0 10px rgba(232, 89, 12, 0.6);
  transition: transform 0.2s ease-out;
}

/* Área do Carrossel */
.horiz-gallery-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  padding: 1.2rem 0;
}

.horiz-gallery-strip {
  display: flex;
  gap: 2rem;
  padding-left: max(40px, calc((100vw - 1380px) / 2 + 40px));
  padding-right: max(40px, calc((100vw - 1380px) / 2 + 40px));
  will-change: transform;
  width: max-content;
}

.horiz-card {
  position: relative;
  width: clamp(320px, 26vw, 400px);
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  transition: transform 0.4s var(--ease-smooth), border-color 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  background: #0c0e14;
}

.horiz-card:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 89, 12, 0.55);
  box-shadow: 0 28px 55px rgba(0, 0, 0, 0.85), 0 0 30px rgba(232, 89, 12, 0.25);
}

.horiz-card__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.horiz-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.horiz-card:hover .horiz-card__img {
  transform: scale(1.08);
}

.horiz-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(10, 11, 14, 0.94) 100%);
  z-index: 2;
  pointer-events: none;
}

.horiz-card__badge {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  pointer-events: none;
}

.horiz-card__num {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  opacity: 0.85;
  letter-spacing: 0.05em;
}

.horiz-card__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange);
  background: rgba(10, 11, 14, 0.7);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.horiz-card__content {
  position: relative;
  z-index: 5;
}

.horiz-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.8vw, 1.55rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.25;
  margin-bottom: 1.1rem;
  letter-spacing: -0.01em;
}

.horiz-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}

.horiz-card__btn:hover {
  color: var(--color-white);
  transform: translateX(4px);
}

@media (max-width: 920px) {
  .horiz-gallery__header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .horiz-gallery__controls {
    width: 100%;
    justify-content: space-between;
  }
  .horiz-card {
    width: 340px;
  }
}

@media (max-width: 768px) {
  .section-horiz-gallery {
    padding: 4.5rem 0;
  }
  .horiz-gallery-strip {
    padding-left: 20px;
    padding-right: 20px;
    gap: 1.2rem;
  }
  .horiz-card {
    width: 76vw;
    max-width: 320px;
    padding: 1.5rem;
  }
  .horiz-card__title {
    font-size: 1.2rem;
  }
}

/* --- 10. SEÇÃO 04 - VYVA EXPERIENCE (8 PILARES) --- */
.section-experience {
  padding: 7rem 0;
  background: transparent;
  position: relative;
  z-index: 2;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.experience-card {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.6rem;
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.experience-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
}

.experience-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 89, 12, 0.35);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.6);
}

.experience-card:hover::before {
  transform: scaleX(1);
}

.experience-card__tag {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-white);
  margin-bottom: 0.8rem;
}

.experience-card__desc {
  font-size: 0.88rem;
  color: var(--color-white-muted);
  line-height: 1.6;
}

/* ==========================================================================
   GSAP SWIPE SLIDER - PILARES DE EXPERIÊNCIA (#experiencia)
   Fiel à mecânica de Sliding Panels / Counter-Sliding (.outer + .inner)
   Com suporte a gestos de arrasto touch/mouse, botões e pills de navegação
   ========================================================================== */
.section-swipe-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #0a0a0c;
  z-index: 2;
  user-select: none;
  cursor: grab;
  touch-action: pan-y;
}

.section-swipe-slider:active {
  cursor: grabbing;
}

/* Barra Superior de Pills de Navegação */
.swipe-slider-nav-wrap {
  position: absolute;
  top: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: calc(100% - 2rem);
  max-width: 1100px;
  pointer-events: auto;
}

.swipe-slider-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-orange, #e8590c);
  margin-bottom: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.swipe-dots-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(14, 16, 22, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.swipe-dot {
  background: transparent;
  border: 1px solid transparent;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.swipe-dot:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.swipe-dot.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(232, 89, 12, 0.85) 0%, rgba(189, 67, 3, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 15px rgba(232, 89, 12, 0.45);
}

/* Container do Viewport do Slider */
.swipe-slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Estrutura do Slide com Dupla Camada (.outer + .inner) */
.swipe-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: visible;
  z-index: 0;
}

.swipe-slide.is-active {
  z-index: 1;
}

.swipe-slide__outer,
.swipe-slide__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}

.swipe-slide__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  will-change: transform;
}

/* Gradiente de Proteção e Profundidade */
.swipe-slide__overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at center, rgba(10, 11, 14, 0.35) 0%, rgba(10, 11, 14, 0.82) 100%),
    linear-gradient(180deg, rgba(10, 11, 14, 0.6) 0%, transparent 35%, transparent 65%, rgba(10, 11, 14, 0.8) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Conteúdo Central do Slide */
.swipe-slide__content {
  position: relative;
  z-index: 4;
  max-width: 900px;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.swipe-slide__pill-tag {
  display: inline-block;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange, #e8590c);
  background: rgba(10, 11, 14, 0.78);
  padding: 6px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.swipe-slide__title {
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-size: clamp(3.6rem, 9.5vw, 8rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 1.2rem 0;
  text-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.9),
    0 2px 10px rgba(0, 0, 0, 0.6);
}

.swipe-slide__subtitle {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.8rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}

/* Barra Inferior com Contador e Botões de Navegação */
.swipe-bottom-controls {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  pointer-events: auto;
}

.swipe-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 18px;
  background: rgba(14, 16, 22, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}

.swipe-counter--mobile {
  display: none !important;
}

.swipe-counter__current {
  color: var(--color-orange, #e8590c);
  font-size: 1.25rem;
}

.swipe-counter__divider {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

.swipe-counter__total {
  color: rgba(255, 255, 255, 0.7);
}

.swipe-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.swipe-btn {
  min-width: 130px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.swipe-btn .btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  .section-swipe-slider {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
  }
  .swipe-slider-nav-wrap {
    top: 1.5rem;
    gap: 0.75rem;
  }

  /* Oculta as pills de navegação dos pilares no mobile conforme solicitado */
  .section-swipe-slider nav[aria-label="Seleção rápida de pilares"],
  .section-swipe-slider .swipe-dots-nav {
    display: none !important;
  }

  /* Exibe o contador de pilares no lugar do nav no topo */
  .swipe-counter--mobile {
    display: inline-flex !important;
  }

  /* Oculta o contador original do rodapé no mobile */
  .swipe-bottom-controls .swipe-counter--desktop {
    display: none !important;
  }

  /* Centraliza a barra de controles e as ações de navegação (Anterior / Próximo) ao meio */
  .swipe-bottom-controls {
    bottom: 1.5rem;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center !important;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .swipe-counter {
    padding: 6px 14px;
    font-size: 0.9rem;
  }
  .swipe-counter__current {
    font-size: 1.15rem;
  }

  .swipe-nav-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
    width: auto;
  }

  .swipe-btn {
    min-width: 115px;
    padding: 10px 18px;
    font-size: 0.85rem;
  }
}

/* --- 11. SEÇÃO 05 - QUEM SOMOS + PROOF POINTS --- */
.section-about {
  padding: 7rem 0;
  position: relative;
  z-index: 2;
  background: transparent;
}

.about-box {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  background: radial-gradient(circle at 75% 50%, rgba(226, 130, 78, 0.28) 0%, rgba(168, 92, 52, 0.14) 42%, rgba(14, 16, 22, 0.9) 78%);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.about-intro,
.about-video-col,
.metrics-grid {
  position: relative;
  z-index: 2;
}

.about-intro {
  max-width: 580px;
  margin-bottom: 0;
}

.about-intro__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--color-white);
  margin-bottom: 1.2rem;
}

.about-intro__text {
  font-size: 1.02rem;
  color: var(--color-white-muted);
  line-height: 1.78;
}

.about-video-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-video-card {
  position: relative;
  width: 100%;
  max-width: 310px;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  background: #0a0b0e;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  outline: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease;
}

.about-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.78), 0 0 34px rgba(232, 89, 12, 0.2);
}

.about-video-media {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  z-index: 0;
}

.about-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transform: scale(1.002);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-video-card:hover .about-video-thumb {
  transform: scale(1.045);
}

@media (max-width: 900px) {
  .about-box {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-intro {
    max-width: 100%;
  }

  .about-video-card {
    max-width: 280px;
  }
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 3rem;
}

.metric-item {
  display: flex;
  flex-direction: column;
}

.metric-item__num {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  color: var(--color-orange);
  line-height: 1;
  margin-bottom: 0.6rem;
}

.metric-item__label {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-white-muted);
  line-height: 1.5;
}

/* --- 12. SEÇÃO 06 - OUR FOOTPRINT (GSAP INFINITE CARD SLIDER) --- */
.section-footprint {
  padding: 6.5rem 0 7rem;
  background: transparent;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.container--footprint {
  max-width: 1540px;
  width: 100%;
}

/* ==========================================================================
   06. OUR FOOTPRINT - SEÇÃO DO SLIDER INFINITO 3D (DESTINOS SEAMLESS LOOP)
   ========================================================================== */
.section-destinos-slider,
.section-reels-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 0 60px;
  user-select: none;
  -webkit-user-select: none;
}

.destinos-slider-header,
.reels-slider-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
  margin-bottom: 10px;
}

.destinos-slider-tag,
.reels-slider-tag {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange, #e8590c);
  margin-bottom: 12px;
}

.destinos-slider-title,
.reels-slider-title {
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-weight: 600;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 10px;
  text-align: center;
}

.destinos-slider-subtitle,
.reels-slider-subtitle {
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 1rem;
  color: #94a3b8;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.destinos-gallery-container,
.reels-gallery-container {
  position: relative;
  width: 100%;
  height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  margin-top: 25px;
  touch-action: pan-y;
}

.destinos-cards-list,
.reels-cards-list {
  position: absolute;
  width: clamp(260px, 20vw, 315px);
  aspect-ratio: 3 / 5;
  height: auto;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  padding: 0;
  margin: 0;
  cursor: grab;
  touch-action: pan-y;
}

.destinos-cards-list:active,
.reels-cards-list:active {
  cursor: grabbing;
}

.destinos-cards-list li,
.reels-cards-list li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 5;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 14px;
  border: none;
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.75),
    0 0 25px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  will-change: transform, opacity;
  transform-origin: center center;
  transition: box-shadow 0.3s ease;
}

.destinos-cards-list li:hover,
.reels-cards-list li:hover {
  box-shadow: 
    0 25px 55px rgba(0, 0, 0, 0.85),
    0 0 30px rgba(232, 89, 12, 0.3);
}

/* Card central em foco ativo com destaque e iluminação */
.destinos-cards-list li.is-center,
.reels-cards-list li.is-center {
  cursor: pointer;
  border: none;
  box-shadow: 
    0 28px 65px rgba(0, 0, 0, 0.9),
    0 0 35px rgba(232, 89, 12, 0.45);
}

/* Efeito Lighting-Border rotativo em 360° estritamente no card central */
.destinos-cards-list li::before,
.reels-cards-list li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--gradient-angle),
    transparent 0deg,
    transparent 70deg,
    rgba(232, 89, 12, 0.20) 100deg,
    rgba(232, 89, 12, 0.75) 130deg,
    rgba(255, 140, 50, 0.95) 160deg,
    #ffffff 185deg,      /* Vértice de luz branca pura */
    rgba(255, 140, 50, 0.95) 210deg,
    rgba(232, 89, 12, 0.75) 240deg,
    rgba(232, 89, 12, 0.20) 270deg,
    transparent 300deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 0 8px rgba(232, 89, 12, 0.85));
  opacity: 0;
  animation: lighting-move-sweep 4.5s linear infinite;
  animation-play-state: paused;
  transition: opacity 0.4s ease;
}

.destinos-cards-list li.is-center::before,
.destinos-cards-list li.lighting-border::before,
.destinos-cards-list li.lighting-move-border::before,
.reels-cards-list li.is-center::before,
.reels-cards-list li.lighting-border::before,
.reels-cards-list li.lighting-move-border::before {
  opacity: 1;
  animation-play-state: running;
}

.destinos-card__overlay {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(14, 16, 15, 0.92) 100%);
  pointer-events: none;
  z-index: 2;
  transition: background 0.3s ease;
}

.destinos-card:hover .destinos-card__overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(14, 16, 15, 0.95) 100%);
}

.destinos-card__badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 4;
  pointer-events: none;
}

.destinos-card__content {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 4;
  pointer-events: none;
}

.destinos-card .horiz-card__tag {
  display: inline-block;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange);
  background: rgba(10, 11, 14, 0.75);
  padding: 5px 12px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.destinos-card__name {
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-size: clamp(1.25rem, 1.6vw, 1.65rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.015em;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* Botões Anterior e Próximo */
.destinos-actions,
.reels-actions {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 20;
}

.destinos-btn-prev,
.destinos-btn-next,
.reels-btn-prev,
.reels-btn-next {
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--font-body, 'Raleway', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.destinos-btn-prev .btn-text,
.destinos-btn-next .btn-text,
.reels-btn-prev .btn-text,
.reels-btn-next .btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.Magnetic-Button-glass {
  background: rgba(14, 16, 22, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.Magnetic-Button-glass:hover {
  background: rgba(232, 89, 12, 0.15);
  border-color: rgba(232, 89, 12, 0.5);
  color: #ffffff;
  transform: translateY(-2px);
}

.Magnetic-Button-solid {
  background: linear-gradient(135deg, #e8590c 0%, #bd4303 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(232, 89, 12, 0.35);
}

.Magnetic-Button-solid:hover {
  box-shadow: 0 12px 30px rgba(232, 89, 12, 0.55);
  transform: translateY(-2px);
}

.drag-proxy {
  visibility: hidden;
  position: absolute;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  .section-destinos-slider,
  .section-reels-slider {
    padding: 70px 0 25px;
  }
  .destinos-cards-list,
  .reels-cards-list {
    width: clamp(220px, 62vw, 260px);
    aspect-ratio: 3 / 5;
    height: auto;
    top: 38%;
  }
  .destinos-gallery-container,
  .reels-gallery-container {
    height: 540px;
  }
  .destinos-actions,
  .reels-actions {
    bottom: 15px;
    gap: 12px;
  }
  .destinos-btn-prev,
  .destinos-btn-next,
  .reels-btn-prev,
  .reels-btn-next {
    min-width: 120px;
    padding: 10px 18px;
    font-size: 0.85rem;
    border-radius: 8px;
  }
}

/* --- 13. SEÇÃO 07 - CORPORATE + PROPRIETÁRIOS --- */
.section-b2b {
  padding: 7rem 0;
  background: transparent;
  position: relative;
  z-index: 2;
}

.b2b-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.b2b-col {
  background: radial-gradient(circle at 80% 20%, rgba(232, 89, 12, 0.12) 0%, rgba(14, 16, 22, 0.85) 70%);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  padding: 2.8rem 2rem;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* No Desktop: Destaque de borda e sombra ativados apenas no :hover */
.b2b-col:hover {
  border-color: transparent;
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.85), 0 0 30px rgba(232, 89, 12, 0.22);
}

@media (min-width: 993px) {
  .b2b-col:hover {
    transform: translateY(-6px);
  }
}

.b2b-col > * {
  position: relative;
  z-index: 2;
}

.b2b-col__tag {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 0.8rem;
}

.b2b-col__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.9vw, 1.85rem);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.8rem;
  line-height: 1.25;
}

.b2b-col__subtitle {
  font-size: 0.94rem;
  color: var(--color-white-muted);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.b2b-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2.5rem;
  flex: 1;
}

.b2b-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--color-white);
  line-height: 1.45;
}

.b2b-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.b2b-col .btn-roll {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* --- 14. SEÇÃO 08 - DESTINOS RESERVÁVEIS & CTA FINAL --- */
.section-cta-final {
  padding: 8rem 0;
  background: transparent;
  text-align: center;
  position: relative;
  z-index: 2;
}

.final-cta-box {
  max-width: 820px;
  margin: 0 auto;
}

.final-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}

.final-cta-desc {
  font-size: 1.1rem;
  color: var(--color-white-muted);
  max-width: 600px;
  margin: 0 auto 2.8rem auto;
  line-height: 1.7;
}

/* --- 15. SEÇÃO 09 - FOOTER --- */
.footer {
  background-color: var(--color-black);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5rem 0 2.5rem 0;
  position: relative;
  z-index: 10;
}

.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer__brand-logo {
  height: 32px;
  width: auto;
  margin-bottom: 1.2rem;
}

.footer__brand-desc {
  font-size: 0.92rem;
  color: var(--color-white-muted);
  line-height: 1.7;
  max-width: 320px;
}

.footer__col-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 1.4rem;
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__link {
  font-size: 0.88rem;
  color: var(--color-white-muted);
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer__link:hover {
  color: var(--color-orange);
  transform: translateX(4px);
}

/* Bloco de Endereços dos Escritórios Globais */
.footer__offices {
  margin-bottom: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__offices-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer__offices-title svg {
  color: var(--color-orange);
}

.footer__offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.footer__office-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 1.5rem 1.6rem;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.footer__office-card:hover {
  border-color: rgba(232, 89, 12, 0.4);
  background-color: rgba(255, 255, 255, 0.045);
}

.footer__office-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.footer__office-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin: 0;
}

.footer__office-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange);
  background: rgba(232, 89, 12, 0.12);
  border: 1px solid rgba(232, 89, 12, 0.28);
  padding: 3px 8px;
  border-radius: 4px;
}

.footer__office-address {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-white-muted);
  margin: 0;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 2rem;
  font-size: 0.82rem;
  color: var(--color-white-subtle);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__bottom-links {
  display: flex;
  gap: 1.8rem;
}

.footer__bottom-links a:hover {
  color: var(--color-white);
}

/* --- 16. RESPONSIVIDADE --- */
@media (max-width: 1024px) {
  .circuit-board {
    min-width: 0;
    max-width: 100%;
    gap: 2.5rem 1.5rem;
    padding: 1rem 0.5rem;
  }
  .circuit-card {
    padding: 1.5rem 1rem;
  }
  .circuit-chip {
    width: 88px;
    height: 88px;
  }
  .booking-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .booking-item:nth-of-type(2) {
    border-right: none;
  }
  .booking-bar .btn-roll {
    grid-column: span 2;
  }
  .cards-grid, .b2b-grid {
    grid-template-columns: 1fr;
  }
  .experience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .navbar__menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 340px;
    height: 100vh;
    background: #0a0b0e;
    flex-direction: column;
    align-items: flex-start;
    padding: 6rem 2.5rem 3rem 2.5rem;
    gap: 1.5rem;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8);
    transition: right 0.4s var(--ease-smooth);
    z-index: 1000;
  }

  .navbar__menu.is-open {
    right: 0;
  }

  .navbar__toggle {
    display: flex;
  }

  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: calc(var(--nav-height) + 1.2rem);
    padding-bottom: 2rem;
    overflow: hidden;
  }

  .hero__content {
    margin: auto 0;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .hero__typewriter {
    margin-bottom: 0;
    font-size: clamp(1.2rem, 5.2vw, 1.8rem);
    min-height: 2.2em;
    padding: 0 0.5rem;
    width: 100%;
  }

  .hero__booking-wrap {
    position: relative;
    bottom: 0;
    left: auto;
    transform: none;
    margin-top: auto;
    width: 100%;
    padding: 0 1rem;
    z-index: 20;
  }

  /* Layout Mobile do Motor de Reservas fiel ao mockup: Card escuro sólido, grid 2x2, sem divisórias */
  .booking-bar {
    background: #1c1f26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.6rem 1.4rem 1.4rem;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.75);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 1.4rem;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }

  .booking-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 !important;
    border: none !important;
    position: relative;
  }

  .booking-item__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8590c;
    margin-bottom: 2px;
  }

  .booking-item__input,
  .booking-item__select {
    background: transparent;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: clamp(0.92rem, 3.8vw, 1rem);
    font-weight: 500;
    line-height: 1.35;
    border: none;
    outline: none;
    padding: 0;
    width: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .booking-item__select option {
    background: #1c1f26;
    color: #ffffff;
  }

  .booking-item__input::-webkit-datetime-edit {
    color: #ffffff;
    padding: 0;
  }

  .booking-item__input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  .booking-item__input::-webkit-datetime-edit-text {
    color: rgba(255, 255, 255, 0.85);
    padding: 0 1px;
  }

  .booking-item__input::-webkit-datetime-edit-month-field,
  .booking-item__input::-webkit-datetime-edit-day-field,
  .booking-item__input::-webkit-datetime-edit-year-field {
    color: rgba(255, 255, 255, 0.85);
  }

  .booking-item__input::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .booking-bar .btn-roll {
    grid-column: span 2;
    width: 100%;
    height: 52px;
    border-radius: 12px;
    background: radial-gradient(130% 90% at 50% 15%, #ff7828 0%, #e8590c 70%, #d04a04 100%);
    box-shadow: 0 10px 25px rgba(232, 89, 12, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .booking-bar .btn-roll .btn-roll__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .booking-bar .btn-roll .btn-roll__text {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    width: 100%;
    text-align: center;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }

  .experience-grid {
    grid-template-columns: 1fr;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer__offices {
    margin-bottom: 2.5rem;
    padding-top: 2rem;
  }

  .footer__offices-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .footer__office-card {
    padding: 1.25rem 1.3rem;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Seção Ecossistema / Circuito no Mobile: 100% de largura, sem vazamento lateral */
  .section-circuit {
    padding: 3.5rem 0 4.5rem 0;
    overflow-x: hidden;
  }

  .section-circuit .section-header {
    margin-bottom: 1.8rem;
  }

  .section-circuit .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Abas do ecossistema: 4 abas centralizadas e ajustadas à largura da tela (sem sair da tela) */
  .ecosystem-tabs-wrap {
    justify-content: center;
    padding: 0 0.25rem;
    margin-bottom: 1.8rem;
    overflow-x: visible;
    width: 100%;
    box-sizing: border-box;
  }

  .ecosystem-tabs {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .ecosystem-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.6rem 0.2rem 0.85rem 0.2rem;
    text-align: center;
  }

  .ecosystem-tab__label {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }

  .circuit-wrapper {
    overflow-x: hidden;
    padding: 0.5rem 0 1rem 0;
    width: 100%;
  }

  .circuit-board {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.5rem 0;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 76px 84px 76px !important;
    gap: 1.8rem 0.45rem;
  }

  /* Todos os cards com tamanho exatamente uniforme no mobile */
  .circuit-card {
    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    min-width: 0 !important;
    padding: 0.4rem 0.25rem !important;
    border-radius: 8px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }

  .circuit-card__content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .circuit-card__title {
    width: 100%;
    font-size: clamp(0.66rem, 2.3vw, 0.78rem);
    line-height: 1.25;
    text-align: center;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .circuit-chip-slot {
    height: 84px;
  }

  .circuit-chip {
    width: 68px;
    height: 68px;
  }

  .circuit-chip__name {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }

  .circuit-chip__sub {
    font-size: 0.4rem;
    letter-spacing: 0.09em;
  }
}

@media (max-width: 420px) {
  .destinos-card {
    width: 260px;
    height: 260px;
    padding: 1.5rem;
  }

  .booking-bar {
    padding: 1.4rem 1.1rem 1.2rem;
    column-gap: 1rem;
    row-gap: 1.2rem;
  }

  .booking-item__label {
    font-size: 0.68rem;
  }

  .booking-item__input,
  .booking-item__select {
    font-size: 0.92rem;
  }

  .circuit-board {
    grid-template-rows: 72px 76px 72px !important;
    gap: 1.6rem 0.35rem;
  }

  /* Mantém todos os cards com altura idêntica de 72px em telas pequenas */
  .circuit-card {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 0.35rem 0.2rem !important;
  }

  .circuit-card__title {
    font-size: clamp(0.62rem, 2.5vw, 0.7rem);
    line-height: 1.2;
  }

  .circuit-chip-slot {
    height: 76px;
  }

  .circuit-chip {
    width: 64px;
    height: 64px;
  }

  .circuit-chip__name {
    font-size: 0.74rem;
  }

  .circuit-chip__sub {
    font-size: 0.36rem;
  }
}

/* ==========================================================================
   17. BOTÃO FIXO DE CONTATO RADIAL (FAB GSAP)
   ========================================================================== */
.radial-wrap {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 60px;
  height: 60px;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Anel pulsante de chamada em tons de laranja */
.pulse-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--color-orange);
  box-shadow: 0 0 22px rgba(232, 89, 12, 0.45);
  pointer-events: none;
  animation: fabPulse 2.4s infinite cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

@keyframes fabPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.85;
  }
  65% {
    transform: scale(1.52);
    opacity: 0;
  }
  100% {
    transform: scale(1.58);
    opacity: 0;
  }
}

/* Botão Principal Disparador - Tons Quentes de Laranja & Fogo */
.fab-btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: radial-gradient(130% 90% at 35% 25%, #ff8c3a 0%, #e8590c 55%, #bd4303 100%);
  color: var(--color-white);
  box-shadow: 0 10px 28px rgba(232, 89, 12, 0.55), 0 4px 14px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 0;
  outline: none;
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s ease;
  user-select: none;
}

.fab-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 36px rgba(232, 89, 12, 0.75), 0 6px 18px rgba(0, 0, 0, 0.7);
}

.fab-btn:active {
  transform: scale(0.95);
}

/* Ícones de Transição: Chat <-> X */
.fab-icon {
  position: absolute;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-chat {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.icon-close {
  opacity: 0;
  transform: scale(0.2) rotate(90deg);
}

/* Botões Internos Ejetáveis (Mola Elástica GSAP) */
.fab-item {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  z-index: 5;
  will-change: transform, opacity;
}

/* Cores Oficiais das Plataformas */
.fab-item--whatsapp {
  background: #25D366;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
}

.fab-item--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 8px 20px rgba(214, 36, 159, 0.45);
}

.fab-item--phone {
  background: #007AFF;
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.45);
}

.fab-item--email {
  background: #EA4335;
  box-shadow: 0 8px 20px rgba(234, 67, 53, 0.45);
}

/* Tooltip Informativo ao Passar o Mouse */
.fab-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  background: rgba(10, 11, 14, 0.94);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fab-item:hover .fab-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .radial-wrap {
    bottom: 24px;
    right: 24px;
  }
}

/* ==========================================================================
   18. SEÇÃO DE VÍDEO INSTITUCIONAL & MODAL COM OVERLAY BLUR
   - Botão de play com lighting-move-border ativado ao passar o mouse no vídeo
   - Ao clicar, abre o vídeo centralizado na tela com background blur por trás
   ========================================================================== */
.section-video-showcase {
  position: relative;
  padding: 2rem 0 6.5rem;
  z-index: 2;
}

.video-showcase-card {
  --lmb-border-width: 1.5px;
  --lmb-duration: 4.5s;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: #0a0b0e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease,
              border-color 0.4s ease;
  outline: none;
}

.video-showcase-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 89, 12, 0.3);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.82), 0 0 42px rgba(232, 89, 12, 0.16);
}

.video-showcase-media {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
}

.video-showcase-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.002);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}

.video-showcase-card:hover .video-showcase-thumb {
  transform: scale(1.045);
}

.video-showcase-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(6, 7, 10, 0.18) 0%,
    rgba(6, 7, 10, 0.48) 100%
  );
  transition: background 0.45s ease;
  pointer-events: none;
}

.video-showcase-card:hover .video-showcase-overlay,
.about-video-card:hover .video-showcase-overlay {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(6, 7, 10, 0.08) 0%,
    rgba(6, 7, 10, 0.35) 100%
  );
}

/* Botão de Play Centralizado — Estilo Sólido #fabBtn + lighting-move-border no hover */
.video-play-btn {
  --lmb-border-width: 2.2px;
  --lmb-duration: 2.4s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: radial-gradient(130% 90% at 35% 25%, #ff8c3a 0%, #e8590c 55%, #bd4303 100%);
  color: var(--color-white);
  box-shadow: 0 10px 28px rgba(232, 89, 12, 0.55), 0 4px 14px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  outline: none;
  user-select: none;
  transition: transform 0.35s var(--ease-smooth),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.video-play-btn__icon {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  transition: transform 0.35s var(--ease-smooth);
}

.video-play-btn__icon svg {
  display: block;
}

/* Halo difuso laranja atrás do botão de play */
.video-play-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 140, 50, 0.85) 0%,
    rgba(232, 89, 12, 0.65) 50%,
    transparent 76%
  );
  filter: blur(16px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transform: scale(0.88);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Ao passar o mouse no vídeo ou botão, acende o lighting-move-border */
.video-modal-trigger:hover .video-play-btn,
.video-modal-trigger:focus-visible .video-play-btn,
.video-showcase-card:hover .video-play-btn,
.about-video-card:hover .video-play-btn,
.video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 14px 36px rgba(232, 89, 12, 0.75), 0 6px 18px rgba(0, 0, 0, 0.7);
}

.video-modal-trigger:hover .video-play-btn::before,
.video-modal-trigger:focus-visible .video-play-btn::before,
.video-showcase-card:hover .video-play-btn::before,
.about-video-card:hover .video-play-btn::before,
.video-play-btn:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.video-modal-trigger:hover .video-play-btn::after,
.video-modal-trigger:focus-visible .video-play-btn::after,
.video-showcase-card:hover .video-play-btn::after,
.about-video-card:hover .video-play-btn::after,
.video-play-btn:hover::after {
  opacity: 1;
  transform: scale(1.18);
}

.video-modal-trigger:hover .video-play-btn__icon,
.video-showcase-card:hover .video-play-btn__icon,
.about-video-card:hover .video-play-btn__icon {
  transform: scale(1.06);
}

/* ==========================================================================
   MODAL DE VÍDEO CENTRALIZADO + OVERLAY DE BACKGROUND BLUR
   ========================================================================== */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.4s ease;
}

.video-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 9, 0.76);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  cursor: pointer;
}

.video-modal-dialog {
  --lmb-border-width: 1.5px;
  --lmb-duration: 6s;
  position: relative;
  z-index: 2;
  width: min(92vw, 1080px);
  aspect-ratio: 16 / 9;
  background: #050608;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.92), 0 0 55px rgba(232, 89, 12, 0.2);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-modal-dialog.is-vertical {
  width: auto;
  height: min(85vh, 780px);
  max-width: 92vw;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
}

.video-modal-overlay.is-active .video-modal-dialog {
  transform: scale(1) translateY(0);
}

.video-modal-frame-wrap {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #000000;
}

.video-modal-frame-wrap iframe,
.video-modal-frame-wrap video {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  background: #000000;
  outline: none;
}

.video-modal-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15, 17, 23, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.video-modal-close:hover {
  transform: scale(1.08);
  background: rgba(232, 89, 12, 0.25);
  border-color: rgba(232, 89, 12, 0.6);
}

@media (max-width: 768px) {
  .section-video-showcase {
    padding: 1rem 0 4.5rem;
  }

  .video-showcase-card {
    border-radius: var(--radius-lg);
  }

  .video-play-btn {
    width: 60px;
    height: 60px;
  }

  .video-play-btn__icon svg {
    width: 24px;
    height: 24px;
  }

  .video-modal-overlay {
    padding: 1rem;
  }

  .video-modal-dialog {
    width: 100%;
    border-radius: 8px;
  }

  .video-modal-dialog.is-vertical {
    width: auto;
    height: min(80vh, 640px);
    max-width: 90vw;
  }

  .video-modal-close {
    top: -46px;
    width: 38px;
    height: 38px;
  }
}

/* ==========================================================================
   DESATIVAÇÃO DE HOVER EFFECTS / ANIMAÇÕES EM BOTÕES NO MOBILE
   Remove animações ativadas por hover que pesam em touch devices sem mouse
   ========================================================================== */
@media (max-width: 768px), (hover: none) {
  /* 1. Desativa feixe rotativo de borda e halo difuso do button-lighting */
  .button-lighting::before,
  .button-litghting::before,
  .button-lighting:hover::before,
  .button-litghting:hover::before {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
  }

  .button-lighting::after,
  .button-litghting::after,
  .button-lighting:hover::after,
  .button-litghting:hover::after {
    display: none !important;
    opacity: 0 !important;
    transform: none !important;
    filter: none !important;
  }

  .button-lighting:hover,
  .button-litghting:hover {
    transform: none !important;
    box-shadow: 0 4px 18px var(--color-orange-glow) !important;
  }

  /* 2. Desativa rolagem mecânica do texto do btn-roll no hover */
  .btn-roll:hover .btn-roll__text {
    transform: none !important;
  }

  .btn-roll:hover,
  .btn-roll--primary:hover,
  .btn-roll--outline:hover,
  .btn-roll--white:hover {
    transform: none !important;
  }

  .btn-roll--primary:hover {
    background-color: var(--color-orange) !important;
    box-shadow: 0 4px 18px var(--color-orange-glow) !important;
  }

  /* 3. Desativa saltos de transform e sombras excessivas em botões diversos */
  .Magnetic-Button-glass:hover,
  .Magnetic-Button-solid:hover,
  .swipe-btn:hover,
  .destinos-btn-prev:hover,
  .destinos-btn-next:hover,
  .reels-btn-prev:hover,
  .reels-btn-next:hover,
  .horiz-nav-btn:hover,
  .horiz-card__btn:hover,
  .fab-btn:hover {
    transform: none !important;
  }

  /* 4. Desativa animações de hover nos botões de play e modal de vídeo */
  .video-modal-trigger:hover .video-play-btn,
  .video-showcase-card:hover .video-play-btn,
  .about-video-card:hover .video-play-btn,
  .video-play-btn:hover {
    transform: translate(-50%, -50%) !important;
  }

  .video-modal-trigger:hover .video-play-btn::before,
  .video-showcase-card:hover .video-play-btn::before,
  .about-video-card:hover .video-play-btn::before,
  .video-play-btn:hover::before {
    opacity: 0 !important;
    animation: none !important;
  }

  .video-modal-trigger:hover .video-play-btn::after,
  .video-showcase-card:hover .video-play-btn::after,
  .about-video-card:hover .video-play-btn::after,
  .video-play-btn:hover::after {
    opacity: 0 !important;
    transform: none !important;
  }

  .video-modal-close:hover {
    transform: none !important;
  }
}



/* ==========================================================================
   MOBILE — SEM SCROLL EFFECT / OTIMIZAÇÕES DE PERFORMANCE
   - #experiencia: sem pin/scrub; navegação só por botões ou arrasto lateral
   - #galeria-turismo: sem pin/scrub; scroll horizontal nativo por arrasto
   - #implantacao (.circuit-wrapper): versão leve (sem blur/filters/animações pesadas)
   ========================================================================== */
@media (max-width: 768px) {
  /* ---- #experiencia: controles mais visíveis (subidos ~25%, ainda na parte baixa) ---- */
  .section-swipe-slider {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    max-height: none;
  }

  .section-swipe-slider .swipe-bottom-controls {
    bottom: 25%;
  }

  /* ---- #galeria-turismo: arrastar para os lados (scroll horizontal nativo) ---- */
  .section-horiz-gallery {
    min-height: 0;
  }

  .horiz-gallery-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    cursor: grab;
  }

  .horiz-gallery-wrapper::-webkit-scrollbar {
    display: none;
  }

  .horiz-gallery-strip {
    transform: none !important;
    will-change: auto;
  }

  .horiz-card {
    scroll-snap-align: start;
  }

  /* ---- #implantacao: circuito leve ---- */
  .circuit-wrapper {
    overflow-x: hidden;
    contain: layout paint;
  }

  /* Cards: sem backdrop-filter, sem halo blur, sombra simples e sem transições de transform */
  .circuit-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
    transition: none;
  }

  .circuit-card::after {
    display: none;
  }

  .circuit-card:hover,
  .circuit-card.is-receiving {
    transform: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  }

  .circuit-card__title {
    will-change: auto;
  }

  /* Chip: borda estática (sem animação Houdini do conic-gradient a cada frame) e sombras leves */
  .circuit-chip {
    --gradient-angle: 150deg;
    animation: none;
    box-shadow: 0 0 18px rgba(232, 89, 12, 0.45), inset 0 0 10px rgba(255, 255, 255, 0.7);
    transition: none;
  }

  .circuit-chip::after {
    animation: none;
    filter: none;
    opacity: 0;
  }

  .circuit-chip:hover {
    transform: none;
  }

  /* SVG: remove drop-shadow filters das trilhas e pinos */
  .circuit-line,
  .circuit-pin {
    filter: none;
  }

  /* ---- #corporate: no mobile ativa o lighting-border e sombra ao pousar na tela (sem mouse) ---- */
  .b2b-col.is-inview,
  .b2b-col.is-active,
  .section-b2b.is-inview .b2b-col {
    border-color: transparent;
    box-shadow: 0 26px 55px rgba(0, 0, 0, 0.85), 0 0 30px rgba(232, 89, 12, 0.22);
  }

  .b2b-col.lighting-move-border-hover.is-inview::before,
  .b2b-col.lighting-move-border-hover.is-active::before,
  .section-b2b.is-inview .b2b-col.lighting-move-border-hover::before {
    opacity: 1;
    animation-play-state: running;
  }
}