/*
Theme Name: Empreende 2.0 Experience Theme
Theme URI: https://papojuridico.com.br/lp-imersao-empreende
Author: Gustavo Zinatto S / Antigravity
Author URI: https://papojuridico.com.br/
Description: Tema premium e interativo guiado por scroll para empresários de alto nível - Empreende 2.0 Experience.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: empreende-experience

DESIGN DE EXPERIÊNCIA CINEMATOGRÁFICA PREMIUM 
Estilo personalizado para Vértice - O Encontro de Legados
*/

:root {
  /* Paleta de Cores de Luxo Reais (Centralized Colors) */
  --bg-color: #15100D;          /* Warm Obsidian (Fundo Principal) */
  --bg-darker: #1C1512;         /* Earthy Deep Brown (Fundo Secundário, Cards) */
  --gold-primary: #CBB8A0;      /* Bespoke Champagne Gold (Acento, Bordas, Links) */
  --gold-bright: #F5EFE7;       /* Alabaster Silk / Cream (Texto Principal, Hover, Títulos) */
  --charcoal-shadow: #1F1713;   /* Charcoal Shadow (Contraste no topo do dourado) */
  
  --text-color: #F5EFE7;        /* Alabaster Silk / Cream */
  --text-dim: rgba(245, 239, 231, 0.75);
  --text-muted: rgba(245, 239, 231, 0.4);
  
  /* Cores Adicionais do Sistema */
  --color-border: rgba(226, 203, 176, 0.08);
  --color-border-hover: rgba(226, 203, 176, 0.25);
  --color-card-bg: var(--bg-darker);
  
  /* Tipografia (Centralized Typography & Scale) */
  --font-serif: "Cormorant Garamond", "Playfair Display", "Didot", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  /* Font Sizes using clamp() for Fluid Responsiveness */
  --font-size-title: clamp(2.3rem, 4.4vw, 4rem);
  --font-size-subtitle: clamp(1.1rem, 1.4vw, 1.25rem);
  --font-size-text: clamp(0.9rem, 1.1vw, 1rem);
  --font-size-label: clamp(0.7rem, 0.85vw, 0.8rem);

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.15em;
  --letter-spacing-widest: 0.28em;

  /* Grid & Layout System (Centralized Layout Constants) */
  --container-max-width: 1400px;
  --container-padding: clamp(1.5rem, 5vw, 8vw);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* Spacing Scale using clamp() for Fluid Spacing across Desktop, Tablet, Mobile */
  --space-xs: clamp(0.5rem, 0.8vw, 0.75rem);
  --space-sm: clamp(0.75rem, 1.2vw, 1.1rem);
  --space-md: clamp(1.2rem, 2vw, 2.2rem);
  --space-lg: clamp(2rem, 3.5vw, 3.5rem);
  --space-xl: clamp(3rem, 5vw, 5.5rem);
  --space-2xl: clamp(4.5rem, 8vw, 8rem);
  
  /* Espaçamento e Suavidade */
  --transition-smooth: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* GLOBAL DESIGN SYSTEM CLASSES */
.section-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-title) !important;
  line-height: var(--line-height-tight) !important;
  color: var(--gold-bright) !important;
  font-weight: 300 !important;
}

.section-subtitle {
  font-family: var(--font-sans);
  font-size: var(--font-size-subtitle) !important;
  line-height: var(--line-height-normal) !important;
  color: var(--text-dim) !important;
  font-weight: 300 !important;
}

.section-text {
  font-family: var(--font-sans);
  font-size: var(--font-size-text) !important;
  line-height: var(--line-height-relaxed) !important;
  color: var(--text-dim) !important;
  font-weight: 300 !important;
}

.section-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-label) !important;
  font-weight: 600 !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
}

/* Base Container */
.section-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  box-sizing: border-box;
}

/* Base Card */
.base-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--space-md);
  transition: var(--transition-smooth);
}
.base-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* Reset Geral e Otimização */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-sans);
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-primary) var(--bg-color);
  scroll-behavior: auto; /* Controlado pelo GSAP/ScrollTrigger */
}

/* Custom Scrollbar for Desktop */
@media (min-width: 1025px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-color);
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.2);
    border-radius: 3px;
    transition: var(--transition-fast);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--gold-primary);
  }
}

/* Global Scrollbar Hiding for Mobile / Tablet */
@media (max-width: 1024px) {
  *, html, body, #app-container, main, section, div {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  *::-webkit-scrollbar,
  *::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
  }
}

body {
  overflow-x: hidden;
  background-color: var(--bg-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 
 * AMBIENT BACKGROUND GLOW 
 * Cria uma iluminação de fundo quente, sutil e atmosférica (estilo eclipse)
 */
.ambient-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(203, 184, 160, 0.09) 0%,
    rgba(21, 16, 13, 0) 70%
  );
  transform: scale(1);
  opacity: 0.8;
  will-change: transform, opacity;
}

/* CONTAINER PRINCIPAL */
#app-container {
  position: relative;
  width: 100%;
  z-index: 2;
}

/* 
 * ETAPA 01 — SEÇÃO DE INTRODUÇÃO (SCROLL PINNED)
 * Altura aumentada de 175vh para desacelerar as transições e dar mais peso cinematográfico
 */
.intro-section {
  position: relative;
  width: 100%;
  height: 160vh; 
  background-color: transparent;
}

@media (max-width: 991px) {
  .intro-section {
    height: 130vh !important; /* Altura responsiva ideal para mobile e tablet, garantindo fluidez cinematográfica */
  }
}

/* Viewport fixa que mantém os elementos centralizados durante o scroll do container de 300vh */
.intro-viewport {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 
 * PRIMEIRO MOMENTO: TEXTO CENTRAL 
 */
.text-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 48rem; /* Excelente largura cinematográfica */
  padding: 0 2rem;
  text-align: center;
  pointer-events: none;
  z-index: 10;
  opacity: 0; /* Controlado via GSAP */
  will-change: transform, opacity, filter;
}

/* Unified Design System for Cinematic Titles */
.cinematic-text,
.section-title,
.manifesto-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 4.4vw, 3.8rem); /* Monumental, refined size */
  line-height: 1.35; /* Perfect line-height spacing for luxury layouts */
  letter-spacing: -0.015em;
  color: var(--text-color);
  text-shadow: 0 4px 30px rgba(21, 16, 13, 0.65);
}

.accent-highlight,
.accent-serif {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400; /* Levemente mais encorpado para realçar o brilho */
  color: #E2CBB0; /* High legibility fallback */
  background: linear-gradient(135deg, #FFFDF9 0%, #E2CBB0 50%, #B8966E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important; /* Solves WebKit text-clip text-shadow mask bug */
}

/* 
 * SEGUNDO MOMENTO: LOGOTIPO OFICIAL 
 */
.logo-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 52rem; /* Aumentado para valorizar o logotipo unificado horizontal */
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  opacity: 0; /* Controlado via GSAP */
  will-change: transform, opacity, filter;
}

@media (max-width: 1024px) {
  .logo-wrapper {
    max-width: min(90vw, 42rem) !important;
    padding: 0 1.5rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  .logo-wrapper {
    max-width: min(90vw, 22rem) !important;
    padding: 0 1rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Novo Logotipo Unificado em Vetor */
.brand-logo-unified {
  width: 100%;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 4px 30px rgba(226, 203, 176, 0.18));
  opacity: 0.95;
}

/* Brasão Vetorial Dourado */
.emblem-svg {
  width: clamp(130px, 16vw, 190px);
  height: clamp(130px, 16vw, 190px);
  filter: drop-shadow(0 4px 15px rgba(212, 175, 55, 0.15));
  margin-bottom: 2rem;
}

/* Brilhos sutis no brasão */
.crest-poly-outer {
  animation: strokePulse 6s ease-in-out infinite alternate;
}
.crest-poly-inner {
  animation: strokePulse 4s ease-in-out infinite alternate-reverse;
}

@keyframes strokePulse {
  0% {
    stroke-width: 1.25px;
    filter: drop-shadow(0 0 1px rgba(212, 175, 55, 0.2));
  }
  100% {
    stroke-width: 1.75px;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5));
  }
}

.logo-brand {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  letter-spacing: 0.38em;
  text-indent: 0.38em; /* Compensa o espaçamento da última letra para centralizar perfeitamente */
  color: var(--text-color);
  background: linear-gradient(to right, #ffffff 0%, var(--gold-bright) 40%, var(--gold-primary) 70%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.75rem;
  text-align: center;
}

.logo-subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.6rem, 1.2vw, 0.75rem);
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  color: var(--text-muted);
  text-align: center;
}

/* 
 * INDICADOR DE SCROLL 
 */
.scroll-indicator {
  position: absolute !important;
  bottom: 6.5rem !important; /* Espaçamento sofisticado mais distante do bottom */
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.9rem !important;
  pointer-events: none !important;
  z-index: 25 !important;
  width: max-content !important;
  text-align: center !important;
  margin: 0 auto !important;
  transform: none !important;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#transition-scroll-indicator,
#target-scroll-indicator {
  opacity: 0;
  transition: none !important;
}

.scroll-text {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  color: var(--text-muted);
  white-space: nowrap !important;
}

.mouse-icon {
  width: 18px;
  height: 28px;
  border: 1px solid rgba(232, 230, 227, 0.2);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
  background-color: rgba(6, 5, 5, 0.4);
  backdrop-filter: blur(4px);
}

.wheel {
  width: 2px;
  height: 5px;
  background-color: var(--gold-primary);
  border-radius: 1px;
  animation: scrollWheelAnim 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes scrollWheelAnim {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  80% { transform: translateY(8px); opacity: 0; }
  100% { opacity: 0; }
}

/* 
 * SEÇÃO DE TRANSIÇÃO CONTÍNUA — CAPÍTULO II (EDITORIAL REDESIGN)
 */
.narrative-section {
  position: relative;
  width: 100%;
  padding: 5rem 8% 2.5rem 8%;
  background-color: var(--bg-color);
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(232, 230, 227, 0.03);
}

.section-content {
  width: 100%;
  max-width: 82rem;
  display: flex;
  flex-direction: column;
}

/* Narrative Header Grid: Title Left, Text Right */
.narrative-header-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
  align-items: end;
}

@media (min-width: 992px) {
  .narrative-header-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 6rem;
  }
}

.narrative-header-left {
  display: flex;
  flex-direction: column;
}

.narrative-header-right {
  display: flex;
  flex-direction: column;
}

.narrative-main-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.15;
  color: var(--text-color);
  letter-spacing: -0.02em;
  margin: 0;
}

.intro-desc-text {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.15vw, 1.125rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 48rem;
}

/* Narrative Collage & Topics Grid */
.narrative-collage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 4rem;
}

@media (min-width: 992px) {
  .narrative-collage-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 6rem;
  }
}

/* Left Side: Large Featured Image with premium thin frame */
.collage-left-image {
  width: 100%;
}

.collage-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid rgba(232, 203, 176, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  background-color: rgba(20, 16, 13, 0.5);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.collage-image-frame:hover {
  border-color: rgba(232, 203, 176, 0.25);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85);
}

.collage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease;
  filter: saturate(0.9) brightness(0.95);
}

.collage-image-frame:hover .collage-img {
  transform: scale(1.04);
  filter: saturate(1) brightness(1.02);
}

/* Right Side Content */
.collage-right-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Specs list styled elegantly like an editorial article */
.specs-list-wrapper {
  display: flex;
  flex-direction: column;
}

.spec-row-new {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(245, 239, 231, 0.05);
  transition: border-color 0.4s ease, transform 0.4s ease;
}

.spec-row-new:first-child {
  border-top: 1px solid rgba(245, 239, 231, 0.05);
}

.spec-row-new:hover {
  border-color: rgba(232, 203, 176, 0.15);
  transform: translateX(4px);
}

/* Gold Icons instead of Numbers */
.spec-icon-wrapper-new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(232, 203, 176, 0.03);
  border: 1px solid rgba(232, 203, 176, 0.08);
  color: var(--gold-primary);
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.spec-row-new:hover .spec-icon-wrapper-new {
  transform: scale(1.08) rotate(5deg);
  background-color: rgba(232, 203, 176, 0.08);
  border-color: rgba(232, 203, 176, 0.25);
  color: var(--gold-bright);
}

.spec-icon-new {
  width: 1.1rem;
  height: 1.1rem;
}

.spec-details-new {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.spec-label-new {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.spec-value-new {
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  font-weight: 300;
  color: var(--text-color);
  line-height: 1.5;
}

/* Clickable Maps Link style */
.spec-link-maps {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.spec-link-maps:hover {
  color: var(--gold-bright);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Secondary smaller offset image to create asymmetry */
.collage-secondary-image {
  align-self: flex-end;
  width: 80%;
  margin-top: -1rem;
}

.collage-image-frame-small {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid rgba(232, 203, 176, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
  background-color: rgba(20, 16, 13, 0.5);
  transition: border-color 0.5s ease;
}

.collage-image-frame-small:hover {
  border-color: rgba(232, 203, 176, 0.2);
}

.collage-img-small {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  filter: saturate(0.85) brightness(0.9);
}

.collage-image-frame-small:hover .collage-img-small {
  transform: scale(1.05);
  filter: saturate(1.0) brightness(1.0);
}

/* CTA Container at bottom */
.narrative-cta-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 2.5rem;
}

/* Continuity indicator placed at the end */
.narrative-scroll-indicator {
  position: relative;
  margin: 3rem auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  pointer-events: none;
  z-index: 5;
}

/* Responsive updates for Narrative Section & General Design System */
@media (max-width: 991px) {
  .narrative-section {
    padding: 5rem 6% 3rem 6%;
  }
  
  .narrative-header-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  
  .narrative-main-title {
    font-size: clamp(1.6rem, 4.5vw, 2.2rem);
    text-align: left;
  }
  
  .intro-desc-text {
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 100%;
  }
  
  .narrative-collage-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
  }
  
  .collage-image-frame {
    max-width: 650px;
    margin: 0 auto;
  }
  
  .narrative-cta-container {
    margin-top: 2rem;
    justify-content: center;
  }
  
  .narrative-scroll-indicator {
    margin: 2rem auto 0 auto;
  }
  
  /* Tablet Title Sizing in Design System */
  .section-title,
  .manifesto-title,
  .cinematic-text,
  .different-title,
  .target-title,
  .attendees-title,
  .stories-title,
  .tickets-title,
  .creator-title,
  .faq-title,
  .ending-title {
    font-size: clamp(1.8rem, 4.5vw, 2.4rem) !important;
    line-height: 1.25 !important;
  }

  /* Garante centralização perfeita do título cinematográfico no primeiro momento (Intro) */
  .text-wrapper {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 48rem !important;
    padding: 0 2.5rem !important;
  }

  .cinematic-text {
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .narrative-section {
    padding: 3.5rem 5% 2.2rem 5%;
  }
  
  .narrative-header-grid {
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  .intro-desc-text {
    font-size: 0.88rem;
    line-height: 1.4;
  }
  
  .narrative-collage-grid {
    gap: 1.8rem;
    margin-bottom: 2rem;
  }
  
  .spec-row-new {
    padding: 1.2rem 0;
    gap: 1.4rem;
  }
  
  .spec-icon-wrapper-new {
    width: 2.2rem;
    height: 2.2rem;
  }
  
  .spec-icon-new {
    width: 1rem;
    height: 1rem;
  }
  
  .spec-value-new {
    font-size: 0.92rem;
  }
  
  .narrative-cta-container {
    margin-top: 1.5rem;
  }
  
  .narrative-scroll-indicator {
    margin: 1.5rem auto 0 auto;
  }
  
  /* Mobile Spacing Adjustments for Sections (Design System) */
  .different-section,
  .experience-section,
  .target-section,
  .attendees-section,
  .stories-section,
  .tickets-section,
  .creator-section,
  .faq-section {
    padding: 4rem 0 !important;
  }
  
  .different-container,
  .experience-container,
  .target-container,
  .attendees-container,
  .stories-container,
  .tickets-container,
  .creator-container,
  .faq-container {
    padding: 0 5vw !important;
    gap: 3rem !important;
  }
}

/* 
 * RESPONSIVIDADE INTERMEDIÁRIA & DESKTOP (Grid de Duas Colunas)
 */
@media (min-width: 768px) {
  .section-grid {
    grid-template-columns: 1.25fr 0.85fr;
    gap: 6rem;
  }
}

@media (min-width: 1200px) {
  .section-grid {
    gap: 8rem;
  }
}

/* 
 * PREFERS-REDUCED-MOTION (REQUISITO TÉCNICO)
 * Desativa transformações pesadas, blurs exagerados e timers interativos 
 * se o visitante tiver preferência por menos movimentos ativada.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-delay: -1s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  
  .ambient-glow {
    display: none !important;
  }
  
  .text-wrapper, .logo-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    margin: 4rem auto !important;
  }
  
  .intro-section {
    height: auto !important;
  }
  
  .intro-viewport {
    position: relative !important;
    height: auto !important;
    flex-direction: column !important;
    padding: 6rem 2rem !important;
  }
  
  .scroll-indicator {
    display: flex !important;
    bottom: 4.5rem !important;
    gap: 0.5rem !important;
    align-items: center !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
    width: max-content !important;
  }
  .scroll-text {
    font-size: 0.55rem !important;
    letter-spacing: 0.2em !important;
    text-indent: 0.2em !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .mouse-icon {
    width: 14px !important;
    height: 22px !important;
    border-radius: 8px !important;
    padding-top: 3px !important;
  }
  .wheel {
    width: 2px !important;
    height: 4px !important;
  }
}

/* 
 * BOTÃO DE ALTO PRESTÍGIO 
 * Botão premium de alta sofisticação com efeito de brilho passeante (shimmer sweep)
 */
.cta-wrapper {
  margin-top: 2.5rem;
  opacity: 0; /* Controlado por GSAP de forma elegante */
  will-change: transform, opacity;
}

.btn-prestige {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.35rem 3.2rem;
  background-color: var(--gold-primary);
  color: var(--charcoal-shadow);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(245, 239, 231, 0.15);
  border-radius: 0px; /* Estética minimalista rigorosa */
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(21, 16, 13, 0.3);
  align-self: flex-start;
  will-change: transform, box-shadow;
}

.btn-text {
  position: relative;
  z-index: 3;
  transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* O brilho passeante (Sheen) - Tornando o efeito mais suave e sutil */
.btn-sheen {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 2;
  animation: shineSweep 6.5s ease-in-out infinite; /* Mais lento e delicado */
}

/* Transições ao passar o mouse de forma muito sutil e requintada */
.btn-prestige:hover {
  background-color: var(--gold-bright);
  color: #15100D; /* Fundo escuro real para contraste absoluto */
  border-color: var(--gold-bright);
  transform: translateY(-2px); /* Elevação sutil */
  box-shadow: 0 8px 25px rgba(203, 184, 160, 0.15); /* Sombra mais refinada */
}

.btn-prestige:hover .btn-sheen {
  animation: shineSweepHover 1.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.btn-prestige:active {
  transform: translateY(0px);
  box-shadow: 0 4px 12px rgba(203, 184, 160, 0.1);
}

/* Animações de brilho passeante */
@keyframes shineSweep {
  0% {
    left: -150%;
  }
  24% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

@keyframes shineSweepHover {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}

/* -------------------------------------------------------------
 * SEÇÃO MANIFESTO (ETAPA 02)
 * ------------------------------------------------------------- */
.manifesto-section {
  position: relative;
  width: 100%;
  min-height: auto;
  background-color: var(--bg-color);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 0;
  box-sizing: border-box;
}

.manifesto-viewport {
  position: relative;
  width: 100%;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 8vw;
  box-sizing: border-box;
}

.manifesto-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  gap: 2.8rem;
  position: relative;
  z-index: 10;
}

.manifesto-title-container {
  position: relative;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.manifesto-label {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold-primary);
  margin-bottom: 1rem;
  text-align: inherit;
}

.manifesto-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  font-weight: 300;
  line-height: 1.15; /* Decreased line spacing between lines of the title as requested */
  margin: 0 auto;
  color: var(--text-color);
  padding: 0 1rem;
}

.manifesto-single-container {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  z-index: 10;
}

.manifesto-single-text {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-dim);
  text-align: center;
}

.manifesto-divider {
  width: 60px;
  height: 1px;
  background-color: rgba(203, 184, 160, 0.25);
  margin: 2.5rem auto 0 auto;
}

.text-gold {
  color: var(--gold-primary);
}

/* Responsividade Adaptativa do Manifesto */
@media (max-width: 991px) {
  .manifesto-section {
    padding: 2.5rem 0;
  }

  .manifesto-viewport {
    height: auto !important;
    min-height: auto !important;
    padding: 0 2rem !important;
  }

  .manifesto-content-wrapper {
    max-width: 100% !important;
    gap: 2rem !important;
  }

  .manifesto-title-container {
    text-align: center !important;
  }

  .manifesto-title {
    font-size: clamp(1.8rem, 5vw, 2.8rem) !important;
    line-height: 1.15 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .manifesto-single-container {
    max-width: 100% !important;
  }

  .manifesto-single-text {
    font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  .manifesto-section {
    padding: 2rem 0;
  }

  .manifesto-viewport {
    padding: 0 1.5rem !important;
  }

  .manifesto-content-wrapper {
    gap: 1.5rem !important;
  }

  .manifesto-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.2 !important;
  }

  .manifesto-single-text {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }
}

/* -------------------------------------------------------------
 * ETAPA 03: TRANSIÇÃO PARA A EXPERIÊNCIA VISUAL (SEÇÃO 5)
 * ------------------------------------------------------------- */
/* -------------------------------------------------------------
 * ETAPA 03: TRANSIÇÃO PARA A EXPERIÊNCIA VISUAL (SEÇÃO 5)
 * ------------------------------------------------------------- */
.gallery-section {
  position: relative;
  width: 100%;
  height: 100vh; /* Apenas 100vh para evitar espaçamento duplo com o pin */
  background-color: var(--bg-color);
  overflow: hidden;
  
  /* Variáveis de layout para a moldura, sincronizadas reativamente */
  --gallery-width: 55vw;
  --gallery-height: 35vw;
  --gallery-radius: 12px;
  --gallery-gap: 10vw;
}

@media (max-width: 991px) {
  .gallery-section {
    --gallery-width: 50vw;
    --gallery-height: 75vw; /* Formato vertical requintado para Tablet */
    --gallery-radius: 12px;
    --gallery-gap: 12vw;
  }
}

@media (max-width: 768px) {
  .gallery-section {
    --gallery-width: 78vw; /* Tamanho discretamente aumentado em ~12% (anterior era 70vw) */
    --gallery-height: 117vw; /* Tamanho discretamente aumentado em ~12% (anterior era 105vw) */
    --gallery-radius: 8px;
    --gallery-gap: 15vw;
  }
}

.gallery-viewport {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--bg-color);
}

/* Moldura Central Física Fina e Elegante */
.gallery-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--gallery-width) + 4px);
  height: calc(var(--gallery-height) + 4px);
  border: 2px solid rgba(226, 203, 176, 0.45); /* Borda dourada sutil do prestígio */
  border-radius: calc(var(--gallery-radius) + 2px);
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.95);
  will-change: opacity, transform;
}

/* Janela de Recorte Perfeito - Ocupa 100% da viewport, mas com overflow visible para que vizinhos apareçam */
.gallery-clipper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  z-index: 10;
}

/* Track horizontal de Imagens */
.gallery-track {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  gap: var(--gallery-gap);
  will-change: transform;
}

/* Wrapper individual de cada Imagem */
.gallery-item-wrapper {
  position: relative;
  width: var(--gallery-width);
  height: var(--gallery-height);
  border-radius: var(--gallery-radius);
  overflow: hidden;
  flex-shrink: 0;
  will-change: transform, filter, opacity, width, height, border-radius;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(226, 203, 176, 0.15); /* Borda elegante para cada card */
  background-clip: padding-box;
}

/* Imagens da Galeria */
.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
  background-clip: padding-box;
}

/* Alternância de Imagem Desktop vs Mobile via CSS puro (Media Queries) */
.desktop-image {
  display: block;
}
.mobile-image {
  display: none;
}

@media (max-width: 991px) {
  .desktop-image {
    display: none;
  }
  .mobile-image {
    display: block;
  }
}

/* -------------------------------------------------------------
 * AJUSTES GERAIS DE BOTÃO E ÍCONE DIAGONAL
 * ------------------------------------------------------------- */
.btn-icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.65rem;
  position: relative;
  z-index: 3;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-prestige:hover .btn-icon {
  transform: translate(3px, -3px);
}

/* -------------------------------------------------------------
 * ETAPA 04: SEÇÃO DIFERENCIAL (SEÇÃO 6)
 * ------------------------------------------------------------- */
.different-section {
  position: relative;
  width: 100%;
  padding: 14vh 0;
  background-color: var(--bg-color);
  border-top: 1px solid rgba(226, 203, 176, 0.08);
  overflow: hidden;
}

.different-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 8vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8vh;
}

.different-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
}

.different-title {
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 4.4vw, 4rem);
  line-height: 1.25;
  color: var(--text-color);
  margin: 0;
}

/* Grid de Cards Diferenciais (Adaptado para 5 tópicos de forma assimétrica e editorial) */
.different-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.5rem;
}

.different-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition: var(--transition-smooth);
  will-change: transform, border-color, box-shadow;
}

.different-card.card-span-2 {
  grid-column: span 2;
}

.different-card.card-span-3 {
  grid-column: span 3;
}

/* Unified premium card hover style inside design system */
.different-card:hover,
.experience-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-hover);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

.card-image-wrapper {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-bottom: 1px solid rgba(226, 203, 176, 0.05);
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.different-card:hover .card-image,
.experience-card:hover .exp-image {
  transform: scale(1.06);
}

.card-content {
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex-grow: 1;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-number {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold-primary);
  opacity: 0.9;
}

.card-title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 400;
  color: var(--text-color);
  line-height: 1.35;
}

.card-text {
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 1.05vw, 0.98rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-dim);
}

/* Responsividade Diferencial */
@media (max-width: 1024px) {
  .different-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .different-card.card-span-2,
  .different-card.card-span-3 {
    grid-column: span 1;
  }
  
  .different-card:nth-child(5) {
    grid-column: span 2;
  }
}

/* APENAS NO TABLET (de 768px até 1024px): Imagem à esquerda/direita alternando e textos ao lado */
@media (min-width: 768px) and (max-width: 1024px) {
  .different-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  
  .different-card.card-span-2,
  .different-card.card-span-3,
  .different-card:nth-child(5) {
    grid-column: span 1 !important;
  }
  
  .different-card {
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 260px !important;
  }
  
  .different-card:nth-child(even) {
    flex-direction: row-reverse !important;
  }
  
  .card-image-wrapper {
    width: 42% !important;
    height: auto !important;
    min-height: 100% !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(226, 203, 176, 0.05) !important;
    flex-shrink: 0 !important;
  }
  
  .different-card:nth-child(even) .card-image-wrapper {
    border-right: none !important;
    border-left: 1px solid rgba(226, 203, 176, 0.05) !important;
  }
  
  .card-content {
    width: 58% !important;
    padding: 2.5rem !important;
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  .transition-phrase {
    font-size: clamp(2.2rem, 5.2vw, 3.2rem) !important;
  }

  .different-section {
    padding: 8vh 0;
  }
  
  .different-container {
    padding: 0 6vw;
    gap: 5vh;
  }
  
  .different-header {
    gap: 1rem;
  }
  
  .different-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .different-card.card-span-2,
  .different-card.card-span-3,
  .different-card:nth-child(5) {
    grid-column: span 1;
  }
  
  .card-image-wrapper {
    height: 180px;
  }
  
  .card-content {
    padding: 1.8rem;
  }
}

/* -------------------------------------------------------------
 * ETAPA 05: SEÇÃO DE TRANSIÇÃO MONUMENTAL (SEÇÃO 7)
 * ------------------------------------------------------------- */
.transition-section {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-color) !important;
  overflow: hidden;
  z-index: 20 !important;
}

.transition-viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color) !important;
  z-index: 15 !important;
}

.transition-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  height: 90vh;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(226, 203, 176, 0.035) 0%, rgba(21, 16, 13, 0) 70%);
}

.transition-phrases-container {
  position: relative;
  width: 100%;
  max-width: 82rem;
  height: 100%;
  padding: 0 8vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.transition-phrase {
  position: absolute;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6.5vw, 5.8rem); /* Aumentado um pouco para Desktop e Tablet */
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-color);
  text-align: center;
  text-shadow: 0 4px 30px rgba(21, 16, 13, 0.85);
  opacity: 0;
  pointer-events: none;
  width: 100%;
  max-width: 1000px;
  display: block;
}

.split-word {
  display: inline-block;
  white-space: nowrap;
  will-change: transform, opacity, filter;
}

/* ==========================================================================
   SEÇÃO: O QUE VOCÊ VAI VIVER (ESTILO EDITORIAL DE LUXO)
   ========================================================================== */
.experience-section {
  padding: 10rem 0 12rem 0; /* Espaçamento controlado elegante */
  background-color: var(--bg-color);
  position: relative;
  border-top: 1px solid rgba(226, 203, 176, 0.04);
}

.experience-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3.5rem; /* Reduzido para aproximar o título dos cards e evitar grandes vãos */
}

.experience-header {
  text-align: center;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem; /* Espaçamento horizontal e vertical mais compacto, sofisticado e equilibrado */
  align-items: stretch;
}

.experience-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-darker);
  border: 1px solid rgba(226, 203, 176, 0.03);
  border-radius: 8px; /* Combinado com o design system de 8px */
  overflow: hidden;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, border-color, box-shadow;
}

.exp-image-wrapper {
  position: relative;
  width: 100%;
  height: 380px; /* Dominância fotográfica (~65% da altura total) */
  overflow: hidden;
}

.exp-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%) contrast(105%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-content {
  padding: 2.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  flex-grow: 1;
}

.exp-card-title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.6vw, 1.45rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-color);
  letter-spacing: 0.01em;
}

.exp-card-text {
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 0.95vw, 0.92rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-dim);
}

/* Responsividade Adaptativa Seção Experience */
@media (max-width: 1024px) {
  .experience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
  .exp-image-wrapper {
    height: 320px;
  }
}

@media (max-width: 640px) {
  .experience-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .exp-image-wrapper {
    height: 280px;
  }
  .experience-container {
    gap: 2.5rem;
  }
  .experience-section {
    padding: 6rem 0;
  }
}

/* ==========================================================================
   NOVA SEÇÃO: O EVENTO É O CONTEÚDO (MANIFESTO DE CONTEÚDO)
   ========================================================================== */
.content-manifesto-section {
  width: 100%;
  padding: 10rem 0;
  background-color: var(--bg-color);
  position: relative;
  border-top: 1px solid rgba(226, 203, 176, 0.04);
}

.content-manifesto-container {
  width: 90%;
  max-width: 900px; /* Layout focado, editorial e intimista */
  margin: 0 auto;
}

.content-manifesto-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
}

.content-manifesto-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-color);
  margin: 0;
  text-shadow: 0 4px 30px rgba(21, 16, 13, 0.65);
}

.content-manifesto-divider {
  width: 80px;
  height: 1px;
  background-color: rgba(226, 203, 176, 0.2);
  margin: 0 auto;
}

.content-manifesto-text-block {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  max-width: 800px;
}

.content-manifesto-p {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-dim);
  margin: 0;
}

.content-manifesto-p.p-highlight {
  color: var(--text-color);
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  font-weight: 400;
}

.narrative-desc-divider {
  width: 60px;
  height: 1px;
  background-color: rgba(226, 203, 176, 0.15);
  margin-top: 1.8rem;
}

@media (max-width: 991px) {
  .content-manifesto-section {
    padding: 6rem 0 !important;
  }
  .narrative-desc-divider {
    margin-top: 1.2rem;
  }
}

/* ==========================================================================
   SEÇÃO: PARA QUEM É O EMPREENDE EXPERIENCE (SEÇÃO 9)
   ========================================================================== */
.target-section {
  position: relative;
  width: 100%;
  height: auto;
  padding: 8rem 0;
  overflow: visible;
  background-color: var(--bg-color);
  border-top: 1px solid rgba(226, 203, 176, 0.04);
  border-bottom: 1px solid rgba(226, 203, 176, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.target-viewport {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.target-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 4rem;
  height: auto;
  box-sizing: border-box;
}

.target-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: auto;
}

.target-title {
  max-width: 100%;
  text-align: left;
  line-height: 1.25;
  padding-left: 0.5rem;
}

.target-right {
  position: relative;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.target-text-wrapper {
  position: relative;
  width: 100%;
  max-width: 650px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.target-text {
  position: relative;
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: var(--text-color);
  opacity: 1;
  display: block;
  text-align: left;
  border-left: 2px solid rgba(226, 203, 176, 0.15);
  padding-left: 1.25rem;
}

.target-text strong {
  font-weight: 600;
  color: #E2CBB0;
}

.target-text .accent-highlight {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: #E2CBB0 !important;
  background: none !important;
  -webkit-text-fill-color: #E2CBB0 !important;
  -webkit-background-clip: initial !important;
}

#target-scroll-indicator {
  display: none !important;
}

@media (max-width: 991px) {
  .target-section {
    height: auto !important;
    padding: 5rem 0 !important;
    overflow: visible !important;
  }

  .target-viewport {
    height: auto !important;
  }

  .target-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 6vw !important;
    box-sizing: border-box !important;
    gap: 2rem !important;
  }

  .target-left {
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
  }

  .target-title {
    max-width: 100% !important;
    font-size: clamp(2rem, 5.5vw, 3rem) !important;
    text-align: left !important;
    line-height: 1.25 !important;
    padding-left: 0 !important;
  }

  .target-right {
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .target-text-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
  }

  .target-text {
    position: relative !important;
    width: 100% !important;
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    color: var(--text-color) !important;
    text-align: left !important;
    display: block !important;
    opacity: 1 !important;
    padding-left: 1rem !important;
  }

  #target-scroll-indicator {
    display: none !important;
  }
}

/* ==========================================================================
   ETAPA 08: QUEM ESTARÁ NO EMPREENDE EXPERIENCE (SEÇÃO 10)
   ========================================================================== */
/* ==========================================================================
   ETAPA 08: QUEM ESTARÁ NO EMPREENDE EXPERIENCE (SEÇÃO 10)
   ========================================================================== */
.attendees-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-color);
  padding: 8rem 0;
}

.attendees-viewport {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.attendees-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.attendees-header {
  width: 100%;
  text-align: center;
  z-index: 10;
  box-sizing: border-box;
}

.attendees-title {
  text-align: center;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-color);
}

.attendees-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.attendee-card {
  position: relative;
  aspect-ratio: 2/3;
  width: 210px;
  max-width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(226, 203, 176, 0.1);
  background-color: var(--bg-darker);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, border-color, box-shadow;
}

.attendee-card:hover {
  transform: translateY(-4px);
  border-color: rgba(226, 203, 176, 0.45);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.75), 0 5px 15px rgba(226, 203, 176, 0.08);
}

.attendee-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.attendee-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* Cuidado para não cortar os rostos das pessoas */
  filter: contrast(1.05);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.attendee-card:hover .attendee-image {
  transform: scale(1.02);
}

.attendee-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(21, 16, 13, 0.98) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
  z-index: 5;
}

.attendee-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  letter-spacing: 0.15em;
  color: #FFFDF9;
  text-transform: uppercase;
  text-align: center;
  margin: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  line-height: 1.4;
  pointer-events: none;
}

/* Locked / Surprise Guest Overlays */
.attendee-card.attendee-locked {
  border-color: rgba(226, 203, 176, 0.15);
}

.attendee-card.attendee-locked .attendee-image {
  filter: blur(15px) grayscale(50%) brightness(0.45);
  transform: scale(1.01);
}

.attendee-card.attendee-locked .attendee-overlay,
.attendee-card.attendee-locked .attendee-name {
  display: none !important;
}

.attendee-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  z-index: 8;
  background: rgba(21, 16, 13, 0.2);
}

.lock-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(226, 203, 176, 0.06);
  border: 1px solid rgba(226, 203, 176, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.attendee-card.attendee-locked:hover .lock-icon-wrapper {
  background: rgba(226, 203, 176, 0.12);
  border-color: rgba(226, 203, 176, 0.3);
  transform: scale(1.05);
}

.lock-icon {
  width: 18px;
  height: 18px;
}

.lock-status-text {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--gold-primary);
  text-transform: uppercase;
  opacity: 0.75;
}

/* Pagination Dots on Desktop */
.attendees-dots {
  display: none !important;
}

/* Responsive adjustments for Attendees Section (Grid / Mobile Swipe Carousel) */
@media (max-width: 991px) {
  .attendees-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
    z-index: 20 !important;
  }

  .attendee-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: rgba(226, 203, 176, 0.25) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
  }

  .attendee-dot.active {
    background-color: var(--gold-primary) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 0 10px rgba(226, 203, 176, 0.5) !important;
  }

  .attendees-section {
    padding: 5rem 0 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .attendees-viewport {
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .attendees-container {
    gap: 2.5rem;
  }

  .attendees-display {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 1.5rem !important;
    padding: 1rem 2rem 3rem 2rem !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }

  .attendees-display::-webkit-scrollbar {
    display: none !important;
  }

  .attendee-card {
    width: 240px !important;
    max-width: none !important;
    height: 360px !important;
    aspect-ratio: auto !important;
    scroll-snap-align: center !important;
  }
}

/* ==========================================================================
   NOVA SEÇÃO: O EMPREENDE CHEGOU ATÉ AQUI (BEYOND SECTION)
   ========================================================================== */
.beyond-section {
  width: 100%;
  position: relative;
  overflow: visible;
  background-color: var(--bg-color);
  border-top: 1px solid rgba(226, 203, 176, 0.04);
  padding: 6rem 0;
}

.beyond-viewport {
  width: 100%;
  min-height: 80vh;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.beyond-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 5rem;
  align-items: center;
  box-sizing: border-box;
}

.beyond-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Video Player Component (Beyond Section) */
.video-player-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(226, 203, 176, 0.2);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  background: #000000;
}

.video-cover-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-cover-wrapper:hover .video-cover-image {
  transform: scale(1.04);
}

.video-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 16, 13, 0.2) 0%, rgba(21, 16, 13, 0.65) 100%);
  transition: opacity 0.4s ease;
}

.play-btn {
  position: absolute;
  z-index: 5;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(226, 203, 176, 0.15);
  border: 1.5px solid rgba(226, 203, 176, 0.6);
  color: #FFFDF9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(226, 203, 176, 0.2);
  outline: none;
}

.play-btn:hover {
  transform: scale(1.12);
  background: var(--gold-primary);
  border-color: var(--gold-primary);
  color: var(--bg-color);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 35px rgba(226, 203, 176, 0.5);
}

.play-icon {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}

.video-iframe-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #000000;
  overflow: hidden;
}

.video-iframe-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000000;
}

/* Hide all native video controls completely */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}

.video-play-pause-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

.play-btn-overlay {
  pointer-events: none;
  transform: scale(0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(226, 203, 176, 0.3);
}

.video-iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  margin-top: 0;
  border: none;
  display: block;
  background: #000000;
  pointer-events: none;
}

@media (max-width: 768px) {
  .video-iframe-wrapper iframe {
    height: 100%;
    margin-top: 0;
  }
}

.beyond-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  width: 100%;
}

.beyond-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-color);
  text-shadow: 0 4px 30px rgba(21, 16, 13, 0.65);
  margin: 0;
}

/* Beyond Indicators (Grid 2x2) */
.beyond-indicators {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.2rem 2rem;
  width: 100%;
}

.story-indicator-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.indicator-number-wrapper {
  display: flex;
  align-items: baseline;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gold-primary);
  background: linear-gradient(135deg, #FFFDF9 0%, #E2CBB0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

.indicator-prefix {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  margin-right: 2px;
}

.indicator-label {
  font-family: var(--font-sans);
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  font-weight: 300;
  color: var(--text-dim);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* Responsividade da Seção Beyond */
@media (max-width: 991px) {
  .beyond-section {
    padding: 4rem 0;
  }

  .beyond-container {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  
  .beyond-viewport {
    min-height: auto;
  }
  
  .beyond-left {
    order: 1;
  }
  
  .beyond-right {
    order: 2;
  }
}

/* ==========================================================================
   ETAPA 09: HISTÓRIAS QUE COMEÇARAM DENTRO DO EMPREENDE (SEÇÃO 11)
   ========================================================================== */
.stories-section {
  width: 100%;
  position: relative;
  overflow-x: hidden;
  background-color: var(--bg-color);
  border-bottom: 1px solid rgba(226, 203, 176, 0.04);
  padding: 6rem 0;
}

.stories-viewport {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.stories-container-centered {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
  box-sizing: border-box;
}

.stories-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  max-width: 820px;
  margin: 0 auto;
}

.stories-title-centered {
  text-align: center !important;
  margin: 0 auto !important;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-color);
  text-shadow: 0 4px 30px rgba(21, 16, 13, 0.65);
}

.stories-desc-centered {
  text-align: center !important;
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-dim);
  max-width: 720px;
  margin: 0 auto !important;
}

/* Global Scrollbar Hiding for Mobile / Tablet */
@media (max-width: 1024px) {
  html, body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
}

/* Testimonials Carousel */
.testimonials-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;
}

.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(18, 14, 11, 0.88);
  border: 1px solid rgba(226, 203, 176, 0.35);
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.carousel-nav-prev {
  left: 12px;
}

.carousel-nav-next {
  right: 12px;
}

.carousel-nav-btn svg {
  width: 22px;
  height: 22px;
}

.carousel-nav-btn:hover {
  background: var(--gold-primary);
  color: var(--bg-color);
  border-color: var(--gold-primary);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 20px rgba(226, 203, 176, 0.4);
}

.testimonials-carousel-track {
  display: flex;
  gap: 1.8rem;
  overflow: visible;
  width: max-content;
  padding: 1rem 0 2rem 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  touch-action: pan-y;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.testimonials-carousel-track::-webkit-scrollbar,
.testimonials-carousel-track::-webkit-scrollbar-thumb,
.testimonials-carousel-track::-webkit-scrollbar-track,
.testimonials-carousel-track::-webkit-scrollbar-corner {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: transparent !important;
}

.testimonial-card {
  flex: 0 0 auto;
  width: 320px;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-card:hover {
  transform: translateY(-4px);
}

.testimonial-card-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Dots */
.testimonials-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(226, 203, 176, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.testimonial-dot.active {
  background-color: var(--gold-primary);
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(226, 203, 176, 0.5);
}

@media (max-width: 1024px) {
  .testimonials-carousel-track {
    gap: 1.25rem;
    padding: 1rem 0 1.5rem 0;
  }

  .testimonial-card {
    width: 290px;
  }

  .carousel-nav-btn {
    width: 44px;
    height: 44px;
    background: rgba(24, 18, 14, 0.95);
    border: 1.5px solid rgba(226, 203, 176, 0.5);
    color: var(--gold-bright);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), 0 0 14px rgba(226, 203, 176, 0.25);
    z-index: 25;
  }

  .carousel-nav-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5px;
  }

  .carousel-nav-prev {
    left: 8px;
  }

  .carousel-nav-next {
    right: 8px;
  }
}

@media (max-width: 640px) {
  .stories-section {
    padding: 3.5rem 0;
  }

  .stories-container-centered {
    width: 100%;
    gap: 2rem;
  }

  .testimonials-carousel-track {
    gap: 1rem;
    padding: 1rem 0 1.5rem 0;
  }

  .testimonial-card {
    width: 260px;
    max-width: 78vw;
  }

  .testimonial-card-img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .carousel-nav-btn {
    width: 42px;
    height: 42px;
    background: rgba(28, 20, 15, 0.96);
    border: 1.5px solid rgba(226, 203, 176, 0.6);
    color: var(--gold-bright);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.88), 0 0 18px rgba(226, 203, 176, 0.3);
    z-index: 25;
  }

  .carousel-nav-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5px;
  }

  .carousel-nav-prev {
    left: 4px;
  }

  .carousel-nav-next {
    right: 4px;
  }
}

.video-nav-dot:hover .dot-label {
  color: var(--text-dim);
}

/* Responsividade de Luxo */
@media (max-width: 991px) {
  .stories-container {
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 6rem 0;
    overflow-y: auto;
    height: auto;
  }
  
  .stories-viewport {
    height: auto;
    min-height: 100vh;
  }
}

@media (max-width: 768px) {
  .attendees-viewport {
    padding: 4vh 0;
  }
  
  .attendee-name {
    margin-top: 1rem;
    letter-spacing: 0.1em;
    font-size: 1rem;
  }

  .stories-container {
    gap: 3rem;
  }

  .stories-left {
    gap: 2.5rem;
  }

  .stories-indicators {
    gap: 1.8rem;
  }
  
  .play-btn {
    width: 60px;
    height: 60px;
  }
  
  .play-icon {
    width: 20px;
    height: 20px;
  }
}

/* ==========================================================================
   ETAPA 10: ESCOLHA SUA EXPERIÊNCIA (SEÇÃO 12)
   ========================================================================== */
.tickets-section {
  width: 100%;
  position: relative;
  overflow: visible;
  background-color: var(--bg-color);
  border-top: 1px solid rgba(226, 203, 176, 0.04);
}

.tickets-viewport {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10vh 0;
}

.tickets-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6vh;
  box-sizing: border-box;
}

.tickets-header {
  text-align: center;
  z-index: 10;
  max-width: 700px;
}

.tickets-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-color);
  text-shadow: 0 4px 30px rgba(21, 16, 13, 0.65);
  margin: 0;
}

.tickets-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  font-weight: 300;
  color: var(--text-dim);
  text-align: center;
  max-width: 600px;
  margin: 1.5rem auto 0 auto;
  line-height: 1.6;
  z-index: 10;
}

.tickets-cards {
  display: flex;
  justify-content: center;
  gap: 4rem;
  width: 100%;
  max-width: 1050px;
  align-items: stretch;
}

.ticket-card {
  position: relative;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 3.8rem 3.5rem 3.8rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  text-align: center;
  transition: var(--transition-smooth);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
  will-change: transform, box-shadow, border-color;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
}

.ticket-card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ticket-tag {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold-primary);
  text-transform: uppercase;
  margin-bottom: 1.0rem;
  display: inline-block;
}

.ticket-tag.vip-tag {
  background: linear-gradient(90deg, #FFFDF9 0%, #CBB8A0 60%, #9B7E5D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Card Experience Standard */
.ticket-card.experience {
  background-color: #12100E;
  border: 1px solid rgba(203, 184, 160, 0.15);
}

.ticket-card.experience:hover {
  transform: translateY(-8px);
  border-color: rgba(203, 184, 160, 0.35);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
}

/* Card Experience VIP (Warm, Gold-Obsidian Premium Layout, No Blue) */
.ticket-card.vip {
  background: linear-gradient(180deg, #1C1714 0%, #0D0B0A 100%);
  border: 1px solid rgba(203, 184, 160, 0.35);
  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.95), 0 0 50px rgba(203, 184, 160, 0.12);
  z-index: 2;
}

.ticket-card.vip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-primary) 50%, transparent 100%);
  opacity: 0.85;
  transition: opacity 0.6s ease;
}

.ticket-card.vip:hover {
  transform: translateY(-8px);
  border-color: rgba(203, 184, 160, 0.7);
  box-shadow: 0 50px 110px -20px rgba(0, 0, 0, 0.98), 0 0 60px rgba(203, 184, 160, 0.2);
}

.ticket-card.vip:hover::before {
  opacity: 1;
}

.ticket-name {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 3.2vw, 2.9rem);
  font-weight: 300;
  color: var(--text-color);
  margin-top: 0;
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}

.ticket-card.vip .ticket-name {
  background: linear-gradient(135deg, #FFFDF9 0%, #CBB8A0 60%, #9B7E5D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ticket-description {
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 1.1vw, 1.0rem);
  font-weight: 300;
  color: var(--text-dim);
  max-width: 320px;
  margin: 0 auto 1.5rem auto;
  line-height: 1.5;
}

.ticket-card.vip .ticket-description {
  color: var(--text-color);
  opacity: 0.9;
}

.ticket-price-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.8rem 0 1rem 0; /* Reduced to bring texts and button closer */
}

.ticket-price-label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ticket-price-value {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  color: var(--text-color);
  line-height: 1.1;
  margin: 0.3rem 0;
}

.ticket-price-value.gold-text {
  background: linear-gradient(135deg, #FFFDF9 0%, #CBB8A0 60%, #9B7E5D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ticket-price-sub {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-dim);
}

.ticket-divider {
  width: 60px;
  height: 1px;
  background-color: rgba(203, 184, 160, 0.25);
  margin: 1.2rem auto 3.2rem auto;
}

.ticket-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem 0; /* Reduced from 2.2rem to pull button closer */
  display: flex;
  flex-direction: column;
  gap: 0.65rem; /* Decreased line spacing between topics */
  width: 100%;
}

.vip-benefits-header {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-primary);
  margin-top: -1.0rem;
  margin-bottom: 0.8rem;
  text-align: left;
  line-height: 1.4;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  text-align: left;
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.35;
}

.ticket-card.vip .benefit-item {
  color: var(--text-color);
}

.benefit-icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  color: var(--gold-primary);
}

.benefit-icon.vip-icon {
  color: var(--gold-primary);
}

/* For special list items in VIP such as "Apenas 10 vagas" */
.benefit-item.highlight-vip {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gold-primary);
}

.ticket-btn-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

/* Button styled inside ticket */
.ticket-btn {
  width: 100%;
  max-width: 100%; /* Make button take up full available width of card */
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

/* Responsividade da Seção */
@media (max-width: 991px) {
  .tickets-viewport {
    height: auto;
    min-height: 100vh;
  }
  .tickets-container {
    padding: 8vh 0;
    gap: 4vh;
  }
  .tickets-cards {
    display: flex;
    justify-content: center;
    gap: 2rem;
    max-width: 740px;
    margin: 0 auto;
    width: 100%;
  }
  .ticket-card {
    padding: 3rem 2rem;
  }
}

@media (max-width: 768px) {
  .tickets-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
  }
  .ticket-card {
    padding: 4.5rem 2.5rem;
  }
}

/* ==========================================================================
   ETAPA 11: QUEM ESTÁ POR TRÁS DO EMPREENDE EXPERIENCE (SEÇÃO 13)
   ========================================================================== */
.creator-section {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background-color: var(--bg-color);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.creator-viewport {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4.5rem 0 3rem 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.creator-image-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  transform: none;
  top: 0;
  left: 0;
}

.creator-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: grayscale(15%) contrast(1.08);
}

.creator-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none !important; /* Fully transparent on desktop to remove image background shadow */
  opacity: 1;
  z-index: 2;
  pointer-events: none;
}

/* Base Desktop Layout (Width total divided into two containers) */
.creator-grid-container {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 4%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
  z-index: 5;
  position: relative;
}

.creator-header-container {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  z-index: 10;
  padding: 0;
  box-sizing: border-box;
}

.creator-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-color);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
  margin: 0;
  text-align: left;
  max-width: 460px;
}

.creator-content-container {
  position: relative;
  width: 100%;
  max-width: 460px;
  z-index: 10;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 0;
  box-sizing: border-box;
}

.creator-text {
  position: relative;
  width: 100%;
  margin: 0;
  opacity: 1;
  visibility: visible;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  line-height: 1.45;
  color: var(--text-color);
  text-align: left;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9);
  max-width: 460px;
}

@media (min-width: 1367px) {
  .creator-viewport {
    align-items: flex-start !important;
    padding-top: 4rem !important;
  }

  .creator-grid-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }
  
  .creator-header-container {
    max-width: 460px !important;
  }
  
  .creator-content-container {
    max-width: 460px !important;
  }
  
  .creator-image {
    object-position: 85% center !important; /* Positions Ludmila beautifully to the right, avoiding text overlap */
  }
}

/* Ajuste exclusivo para Ultrawide / Widescreen: aumenta o espaçamento da esquerda para não sobrepor a imagem */
@media (min-width: 1500px) {
  .creator-grid-container {
    padding-left: 8vw !important;
  }
}

@media (min-width: 1700px) {
  .creator-grid-container {
    padding-left: 12vw !important;
  }
}

/* Responsividade Responsável: Tablet, Laptops e Telas Médias (max-width: 1366px) */
@media (max-width: 1366px) {
  .creator-section,
  .creator-viewport {
    height: auto !important;
    min-height: 100vh !important;
    padding: 0 !important;
  }

  .creator-viewport {
    display: flex !important;
    align-items: flex-end !important; /* Alinha o bloco de texto para baixo da seção */
    justify-content: center !important;
    padding: 6rem 3vw 3.5rem 3vw !important;
  }
  
  /* Sombra sutil na parte de baixo dos textos sem cobrir a imagem inteira */
  .creator-overlay {
    background: linear-gradient(to bottom, rgba(10, 8, 7, 0) 0%, rgba(10, 8, 7, 0.35) 30%, rgba(10, 8, 7, 0.82) 65%, rgba(10, 8, 7, 1.0) 100%) !important;
  }

  .creator-grid-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 1.8rem !important;
    padding: 0 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .creator-header-container {
    padding-left: 0 !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
  }

  /* Title ganha largura total e sombra sutil para destaque */
  .creator-title {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
    text-align: left !important;
    max-width: 100% !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.95), 0 4px 30px rgba(0, 0, 0, 0.95) !important;
  }
  
  .creator-title br {
    display: none !important;
  }

  .creator-content-container {
    align-items: flex-start !important;
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  .creator-text {
    font-size: clamp(0.95rem, 1.8vw, 1.12rem) !important;
    line-height: 1.55 !important;
    text-align: left !important;
    max-width: 100% !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.95), 0 4px 30px rgba(0, 0, 0, 0.95) !important;
  }
}

/* Responsividade Responsável: Mobile (max-width: 576px) */
@media (max-width: 576px) {
  .creator-section,
  .creator-viewport {
    height: auto !important;
    min-height: 100vh !important; /* Corrected: Full height section to prevent squishing */
    padding: 0 !important;
  }

  .creator-viewport {
    display: flex !important;
    align-items: flex-end !important; /* Align content container to the bottom of the section */
    justify-content: center !important;
    padding: 4.5rem 1.5rem 1.8rem 1.5rem !important; /* Brought content closer to the bottom on mobile */
  }

  /* Sombra gradiente que sobe mais alto e fica super escura na base para leitura perfeita */
  .creator-overlay {
    background: linear-gradient(to bottom, rgba(10, 8, 7, 0) 0%, rgba(10, 8, 7, 0.55) 25%, rgba(10, 8, 7, 0.88) 55%, rgba(10, 8, 7, 1.0) 100%) !important;
  }

  .creator-grid-container {
    gap: 1rem !important; /* Diminui os espaçamentos gerais */
    align-items: flex-start !important;
    text-align: left !important;
  }

  .creator-title {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.2rem !important;
    text-align: left !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.95), 0 4px 30px rgba(0, 0, 0, 0.95) !important;
  }

  .creator-content-container {
    gap: 0.8rem !important; /* Espaçamento reduzido entre os parágrafos */
    align-items: flex-start !important;
  }

  .creator-text {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 4px 24px rgba(0, 0, 0, 0.95) !important;
  }
}

/* ==========================================================================
   ETAPA 12: PERGUNTAS FREQUENTES
   ========================================================================== */
.faq-section {
  width: 100%;
  position: relative;
  background-color: var(--bg-color);
  overflow: visible;
  padding: 8rem 0;
}

.faq-viewport {
  width: 100%;
  height: auto;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 8vw;
}

.faq-container {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
  max-width: 860px;
  align-items: center;
  position: relative;
  margin: 0 auto;
}

.faq-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.faq-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-color);
  margin: 0;
  text-align: center;
}

.faq-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  width: 100%;
}

.faq-questions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.faq-item {
  border: 1px solid rgba(226, 203, 176, 0.08);
  background-color: rgba(226, 203, 176, 0.01);
  border-radius: 12px;
  width: 100%;
  overflow: hidden;
  will-change: background-color, border-color;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 1.8rem;
}

.faq-item:hover {
  border-color: rgba(226, 203, 176, 0.25);
  background-color: rgba(226, 203, 176, 0.03);
}

.faq-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 1.6rem 0;
  cursor: pointer;
  text-align: left;
  user-select: none;
  transition: opacity 0.3s ease;
}

.faq-question {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.2vw, 1.35rem);
  font-weight: 400;
  color: #FFFDF9;
  margin: 0;
  line-height: 1.4;
  pointer-events: none;
  letter-spacing: -0.01em;
  transition: color 0.4s ease;
}

.faq-item:hover .faq-question {
  color: var(--gold-primary);
}

.faq-icon-wrapper {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(226, 203, 176, 0.15);
  background-color: rgba(226, 203, 176, 0.02);
  color: rgba(255, 253, 249, 0.4);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item:hover .faq-icon-wrapper {
  border-color: rgba(226, 203, 176, 0.45);
  background-color: rgba(226, 203, 176, 0.06);
  color: var(--gold-primary);
}

.faq-icon {
  width: 12px;
  height: 12px;
  stroke-width: 2;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.faq-answer {
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.7;
  padding: 0 0 1.6rem 0;
  margin: 0;
  text-align: left;
}

.faq-answer p {
  margin: 0;
}

/* Responsividade Adaptativa */
@media (max-width: 768px) {
  .faq-section {
    padding: 6rem 0;
  }

  .faq-viewport {
    padding: 0 6vw;
  }

  .faq-container {
    gap: 3rem;
  }

  .faq-item {
    padding: 0 1.2rem;
  }
}

/* ==========================================================================
   ETAPA 13: ENCERRAMENTO DA EXPERIÊNCIA (CLÍMAX)
   ========================================================================== */
.ending-section {
  width: 100%;
  position: relative;
  background-color: #050608;
  overflow: visible;
}

.ending-viewport {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.ending-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.ending-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.28) contrast(1.02);
  transform: scale(1.05);
  will-change: transform;
}

.ending-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(12, 13, 18, 0.35) 0%, rgba(5, 6, 8, 0.9) 100%);
  z-index: 2;
}

.ending-container {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  width: 100%;
  padding: 0 2.5rem;
  box-sizing: border-box;
}

.ending-logo-wrapper {
  margin-bottom: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.ending-brand-logo {
  width: 400px;
  max-width: 100%;
  height: auto;
  opacity: 0.95;
}

.ending-main-text {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.4vw, 1.45rem);
  font-weight: 300;
  color: #FFFDF9;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 25px rgba(0, 0, 0, 0.85);
  margin: 0 auto;
  max-width: 820px;
}

/* Estilo para as palavras splitadas */
#ending-title .split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}

#ending-title .accent-highlight {
  background: linear-gradient(135deg, #FFFDF9 0%, #E2CBB0 60%, #B8966E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

/* Divisória Elegante de Local // Data e Horário */
.ending-details-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  max-width: 680px;
  margin: 3.2rem 0 3.8rem 0;
}

.divider-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(226, 203, 176, 0) 0%, rgba(226, 203, 176, 0.45) 20%, rgba(226, 203, 176, 0.45) 80%, rgba(226, 203, 176, 0) 100%);
}

.divider-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 1.05vw, 1.1rem);
  color: var(--gold-primary);
  letter-spacing: 0.08em;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.divider-sep {
  opacity: 0.5;
  color: #FFFDF9;
}

.ending-action {
  width: auto;
  opacity: 0;
  transform: scale(0.95);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}

.ending-btn {
  display: inline-block;
  padding: 1.3rem 3.5rem;
  background-color: var(--gold-primary);
  color: #0c0d12;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid var(--gold-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.ending-btn:hover {
  background-color: transparent;
  color: var(--gold-primary);
  border-color: var(--gold-primary);
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(226, 203, 176, 0.22);
}

/* RODAPÉ SIMPLES */
.footer-simple {
  width: 100%;
  background-color: #050608;
  border-top: 1px solid rgba(226, 203, 176, 0.12);
  padding: 3rem 2.5rem;
  position: relative;
  z-index: 4;
  box-sizing: border-box;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.footer-brand-logo {
  width: 180px;
  max-width: 100%;
  height: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.footer-brand-logo:hover {
  opacity: 1;
}

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

.footer-link {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 400;
}

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

.footer-link-separator {
  color: rgba(226, 203, 176, 0.25);
  font-size: 0.85rem;
}

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

.footer-social-link {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
}

.footer-social-link:hover {
  color: var(--gold-primary);
}

.footer-info {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-dim);
  opacity: 0.8;
}

/* Responsividade Adaptativa */
@media (max-width: 991px) {
  .ending-container {
    padding: 0 3rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ending-container {
    padding: 0 5rem !important; /* Aumenta as margens laterais no tablet */
  }
}

@media (max-width: 768px) {
  .ending-section {
    height: auto !important;
    padding: 6rem 0;
  }

  .ending-viewport {
    height: auto !important;
    position: relative !important;
    top: auto !important;
    overflow: visible !important;
    padding: 0 6vw;
  }

  .ending-container {
    padding: 0;
    max-width: 100%;
  }

  .ending-details-row {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2rem;
    margin: 2.2rem auto 2.8rem auto;
    width: fit-content;
    padding: 1rem 1.2rem;
  }

  .ending-detail-separator {
    display: block;
  }

  .btn-prestige {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .footer-simple {
    padding: 4rem 1.5rem;
  }

  .footer-container {
    flex-direction: column;
    text-align: center;
    gap: 2.2rem;
  }
}

/* NOVOS ESTILOS DE LOGO E DETALHES */
.ending-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 auto;
}

.ending-arrow-svg {
  width: 58px;
  height: auto;
  opacity: 0.95;
}

.ending-brand-text-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.ending-brand-text-stack .brand-text-top {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  color: #FFFDF9;
  font-weight: 300;
  line-height: 1;
}

.ending-brand-text-stack .brand-text-middle {
  font-family: var(--font-sans);
  font-size: 2.3rem;
  letter-spacing: 0.04em;
  color: #FFFDF9;
  font-weight: 800;
  line-height: 1.1;
  margin: 0.15rem 0;
}

.ending-brand-text-stack .brand-text-bottom {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  color: #FFFDF9;
  font-weight: 400;
  line-height: 1;
  opacity: 0.85;
}

/* Detalhes Row (Local, Data e Horário) */
.ending-details-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 1.8rem;
  width: fit-content;
  max-width: 90%;
  margin: 2.8rem auto 3.6rem auto;
  padding: 1rem 2rem;
  border-top: 1px solid rgba(255, 253, 249, 0.15);
  border-bottom: 1px solid rgba(255, 253, 249, 0.15);
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  color: rgba(255, 253, 249, 0.85);
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

#ending-title, #ending-title .split-word {
  font-family: var(--font-sans) !important;
}

.ending-detail-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.ending-detail-icon {
  width: 20px;
  height: 20px;
  color: var(--gold-primary);
  opacity: 0.9;
}

.ending-detail-text {
  letter-spacing: 0.02em;
}

.ending-detail-separator {
  color: var(--gold-primary);
  opacity: 0.85;
  font-size: 0.75rem;
}

/* Footer Logo Estilos */
.footer-logo-container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.footer-arrow-svg {
  width: 26px;
  height: auto;
  opacity: 0.9;
}

.footer-brand-text-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.footer-brand-text-stack .brand-text-top {
  font-family: var(--font-sans);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  color: #FFFFFF;
  font-weight: 300;
  line-height: 1;
}

.footer-brand-text-stack .brand-text-middle {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  font-weight: 800;
  line-height: 1;
}

/* Redirecionamento Social Ícones */
.footer-social-icon {
  width: 22px;
  height: 22px;
  color: var(--text-dim);
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
}

.footer-social-link:hover .footer-social-icon {
  color: var(--gold-primary);
  transform: translateY(-2px);
}

/* ==========================================================================
   AJUSTES DE RESPONSIVIDADE PARA CARROSSEIS E ENCERRAMENTO (TABLET & MOBILE)
   ========================================================================== */

@media (max-width: 991px) {
  /* Alinhamento e centralização perfeita dos carrosseis de imagem */
  .attendees-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .attendees-frame {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    top: 56% !important; /* Move para cima sincronizado para reduzir o vão com o título */
  }

  .attendees-display {
    left: 50% !important;
    top: 56% !important; /* Sincronizado com a moldura */
  }

  .gallery-viewport, .gallery-clipper {
    padding: 0 !important;
    margin: 0 !important;
  }

  .gallery-frame {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .gallery-track {
    left: 50% !important;
  }
}

@media (max-width: 991px) {
  /* Última Seção (Encerramento) Mobile & Tablet */
  .ending-brand-logo {
    width: 190px !important;
    max-width: 75vw !important;
    height: auto !important;
    margin: 0 auto 1.5rem auto !important;
  }

  .ending-main-text {
    font-size: clamp(0.95rem, 3.2vw, 1.15rem) !important;
    line-height: 1.65 !important;
    padding: 0 1.5rem !important;
    margin: 0 auto !important;
    max-width: 600px !important;
  }

  .ending-details-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.8rem !important;
    margin: 1.8rem auto 2.2rem auto !important;
    width: 100% !important;
    max-width: 280px !important;
    padding: 1rem 0 !important;
    border-top: 1px solid rgba(255, 253, 249, 0.15) !important;
    border-bottom: 1px solid rgba(255, 253, 249, 0.15) !important;
  }

  .ending-detail-separator {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .ending-brand-logo {
    width: 160px !important;
    max-width: 70vw !important;
  }
  .ending-main-text {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    padding: 0 1rem !important;
  }
}

/* ==========================================================================
   SEÇÃO MOVIMENTOS DA EXPERIÊNCIA (ETAPA 03B)
   ========================================================================== */
.movements-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.movements-viewport {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 3rem 2rem;
  box-sizing: border-box;
}

.movements-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.movements-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.movements-label {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold-primary);
}

.movements-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text-color);
  margin: 0;
  text-align: center;
}

.movements-timeline-container {
  position: relative;
  width: 100%;
  padding: 1.5rem 0 1rem 0;
  --movement-img-height: 144px;
  --movement-img-width: 240px;
}

@media (min-width: 992px) {
  .movements-timeline-container {
    --movement-img-height: 168px;
    --movement-img-width: 280px;
  }
}

@media (min-width: 1200px) {
  .movements-timeline-container {
    --movement-img-height: 204px;
    --movement-img-width: 340px;
  }
}

/* Horizontal track behind nodes (Desktop only) */
.movements-line-track {
  position: absolute;
  top: calc(1.5rem + var(--movement-img-height) + 1.2rem + 25px); /* Altura exata: Padding (1.5rem) + Imagem + Margem Imagem (1.2rem) + Centro do nó (25px) */
  left: 16.66%; /* Center of first col */
  right: 16.66%; /* Center of last col */
  height: 2px;
  background: rgba(226, 203, 176, 0.08);
  z-index: 1;
}

.movements-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-primary), var(--gold-bright));
  box-shadow: 0 0 15px rgba(226, 203, 176, 0.4);
}

.movements-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  position: relative;
  z-index: 2;
}

.movement-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Container de Imagens nos Movimentos (Design System Responsivo) */
.movement-image-container {
  display: none; /* Escondido por padrão, exibido nos layouts adequados */
}

@media (min-width: 992px) {
  .movement-image-container.desktop-only {
    display: block;
    width: var(--movement-img-width);
    height: var(--movement-img-height); /* Altura física dinâmica para alinhamento impecável da linha do timeline */
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(226, 203, 176, 0.12);
    overflow: hidden;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.6);
    background: var(--bg-darker);
    margin-bottom: 1.2rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 3;
  }

  .movement-image-container.desktop-only:hover {
    border-color: var(--gold-primary);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -5px rgba(226, 203, 176, 0.15);
  }
}

.movement-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.movement-image-container:hover .movement-image {
  transform: scale(1.06);
}

.movement-node-wrapper {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 3; /* Força posicionamento acima da linha do timeline */
}

.movement-node {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(203, 184, 160, 0.15);
  background-color: #15100D; /* Fundo sólido para ocultar completamente a linha do timeline (Não vazados) */
  position: relative;
  z-index: 3; /* Força posicionamento acima da linha do timeline */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(203, 184, 160, 0.45);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, border-color, box-shadow, background-color, color;
}

.movement-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.movement-step-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  font-weight: 300;
  color: var(--text-color);
  margin: 0;
}

.movement-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.movement-items-list li {
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 1.1vw, 0.98rem);
  font-weight: 300;
  color: var(--text-dim);
  will-change: transform, opacity, filter;
}

/* ==========================================================================
   Responsividade: Linha Vertical no Mobile e Tablet
   ========================================================================== */
@media (max-width: 991px) {
  .movements-viewport {
    min-height: auto;
    padding: 6rem 2rem;
  }

  .movements-container {
    gap: 3.5rem;
  }

  .movements-timeline-container {
    padding: 1rem 0;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Vertical track on left of mobile container */
  .movements-line-track {
    top: 25px;
    bottom: 25px;
    left: 25px;
    right: auto;
    width: 2px;
    height: calc(100% - 50px);
  }

  .movements-line-fill {
    width: 100%;
    height: 0%;
  }

  .movements-columns {
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
  }

  .movement-col {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 2rem;
  }

  .movement-node-wrapper {
    margin-bottom: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 3; /* Renderiza acima do track da linha vertical no mobile */
  }

  .movement-node {
    background-color: #15100D; /* Fundo sólido para ocultar completamente a linha do timeline no mobile */
    z-index: 3;
  }

  .movement-image-container.mobile-only {
    display: block;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 16/10;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(226, 203, 176, 0.12);
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    background: var(--bg-darker);
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 3;
  }

  .movement-content {
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
    padding-top: 0.5rem;
  }

  .movement-items-list {
    align-items: flex-start;
    text-align: left;
    gap: 0.65rem;
  }
}

@media (max-width: 576px) {
  .movements-viewport {
    padding: 4.5rem 1.25rem;
  }

  .movement-col {
    gap: 1.25rem;
  }

  .movement-node {
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
    background-color: #15100D;
    z-index: 3;
  }

  .movements-line-track {
    left: 22px;
  }

  .movement-content {
    padding-top: 0.4rem;
  }
}