/* ============================================================
   EXPOEMA 2026 — ATIVAÇÃO INTERATIVA | EQUIPAR × 9D STUDIO
   Developed by 9D Studio — 9d.com.br
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

/* ── Variables ────────────────────────────────────────── */
:root {
  --bg:          #14100b;
  --bg-soft:     #1d1710;
  --bg-card:     rgba(243,233,216,0.045);
  --bg-card-2:   rgba(243,233,216,0.075);

  --text:        #f3e9d8;
  --text-dim:    #ab947b;
  --text-dimmer: #6d5b48;

  --gold:        #c9963f;
  --gold-2:      #e6bd6d;
  --gold-dark:   #8a6224;
  --gold-glow:   rgba(201,150,63,0.16);
  --gold-line:   rgba(201,150,63,0.28);

  --wood:        #6b4526;
  --line:        rgba(243,233,216,0.08);

  --radius:      16px;
  --radius-sm:   10px;
  --transition:  0.75s cubic-bezier(0.65,0,0.35,1);
}

/* ── Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
svg { display: block; }
a { color: inherit; text-decoration: none; }

/* ── Background ───────────────────────────────────────── */
#bgCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.glow-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 48% at 18% 26%, rgba(138,98,36,0.20), transparent 70%),
    radial-gradient(42% 58% at 84% 74%, rgba(107,69,38,0.18), transparent 70%),
    radial-gradient(60% 50% at 50% 50%, rgba(12,8,4,0.45), transparent 82%);
}

/* Textura sutil de grão */
.grain-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(rgba(243,233,216,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ── Presentation ─────────────────────────────────────── */
.presentation { position: fixed; inset: 0; z-index: 1; overflow: hidden; }

.slides-track {
  display: flex;
  width: 500%;
  height: 100%;
  transition: transform var(--transition);
  will-change: transform;
}

.slide {
  width: 20%;
  height: 100%;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slide-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  padding: 3.2rem 4.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide-bg-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ── Decorações ───────────────────────────────────────── */
.deco-dot {
  position: absolute; border-radius: 50%;
  background: var(--gold);
}
.deco-star {
  position: absolute; color: var(--gold); opacity: 0.18;
}
.deco-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--gold-line);
  opacity: 0.35;
}

@keyframes floatA { 0%,100%{transform:translate(0,0)} 50%{transform:translate(12px,-18px)} }
@keyframes floatB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-14px,14px)} }
@keyframes floatC { 0%,100%{transform:translate(0,0)} 50%{transform:translate(9px,16px)} }
.float-a { animation: floatA 11s ease-in-out infinite; }
.float-b { animation: floatB 14s ease-in-out infinite; }
.float-c { animation: floatC  9s ease-in-out infinite; }

/* ── Navegação ────────────────────────────────────────── */
.nav-btn {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 40;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(20,16,11,0.55);
  backdrop-filter: blur(8px);
  color: var(--text-dim);
  transition: all 0.3s ease;
}
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn:hover { color: var(--gold-2); border-color: var(--gold-line); background: rgba(201,150,63,0.12); }
.nav-prev { left: 26px; }
.nav-next { right: 26px; }
.nav-btn.hidden { opacity: 0; pointer-events: none; }

.slide-dots {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 40; display: flex; gap: 11px; align-items: center;
}
.dot-btn {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dimmer);
  transition: all 0.35s ease;
}
.dot-btn:hover { background: var(--text-dim); }
.dot-btn.active { width: 30px; border-radius: 5px; background: var(--gold); }

.deck-footer {
  position: fixed; bottom: 28px; right: 34px; z-index: 40;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dimmer);
}

/* ── Cabeçalho de slide ───────────────────────────────── */
.slide-brand {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 2.1rem;
}
.slide-brand img { height: 21px; width: auto; opacity: 0.82; }
.slide-brand .brand-9d { height: 25px; }
.brand-sep { width: 1px; height: 20px; background: var(--line); }

.slide-number {
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.34em;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.slide-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 4.1vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.text-gold {
  color: var(--gold-2);
}

.slide-desc {
  font-size: clamp(0.9rem, 1.06vw, 1.02rem);
  font-weight: 300;
  color: var(--text-dim);
  max-width: 60ch;
  line-height: 1.62;
}

.slide-header { margin-bottom: 2.3rem; }

/* ── Animações de entrada ─────────────────────────────── */
.anim-up, .anim-fade, .anim-left {
  opacity: 0;
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22,1,0.36,1);
}
.anim-up   { transform: translateY(28px); }
.anim-left { transform: translateX(-26px); }
.slide.animated .anim-up,
.slide.animated .anim-fade,
.slide.animated .anim-left { opacity: 1; transform: none; }

.d1 { transition-delay: 0.10s } .d2 { transition-delay: 0.20s }
.d3 { transition-delay: 0.30s } .d4 { transition-delay: 0.40s }
.d5 { transition-delay: 0.50s } .d6 { transition-delay: 0.60s }
.d7 { transition-delay: 0.70s } .d8 { transition-delay: 0.80s }

/* ============================================================
   SLIDE 1 — CAPA
   ============================================================ */
.cover-layout {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 3rem;
  align-items: center;
}

.cover-logos {
  display: flex; align-items: center; gap: 26px;
  margin-bottom: 2.6rem;
}
.cover-logos img { width: auto; }
.cover-logos .logo-9d { height: 52px; }
.cover-logos .logo-eq { height: 30px; }
.brand-sep-lg { width: 1px; height: 44px; background: var(--line); }

.cover-eyebrow {
  display: flex; align-items: center; gap: 13px;
  font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  margin-bottom: 1.5rem;
}
.eyebrow-line { width: 42px; height: 1px; background: var(--gold-line); }

.cover-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 6.6vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: 1.7rem;
}
.cover-title .line-gold {
  display: block;
  color: var(--gold-2);
}

.cover-event {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1.1rem;
}

.cover-date {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.88rem; font-weight: 400;
  color: var(--text-dim);
  padding: 0.62rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg-card);
}
.cover-date .dot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

.cover-right {
  position: relative;
  display: grid; place-items: center;
}
.plaque-glow {
  position: absolute; width: 90%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--gold-glow), transparent 66%);
  filter: blur(20px);
}
.plaque-img {
  position: relative;
  width: 100%;
  max-width: 500px;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,0.62));
}
@keyframes plaqueFloat { 0%,100%{transform:translateY(0) rotate(-1.2deg)} 50%{transform:translateY(-14px) rotate(-0.4deg)} }
.plaque-float { animation: plaqueFloat 8s ease-in-out infinite; }

/* ============================================================
   SLIDE 2 — O TOTEM
   ============================================================ */
.totem-row {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 26px;
  margin-bottom: 2.1rem;
}
.totem-shot {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), border-color 0.45s;
}
.totem-shot img {
  height: 40vh;
  min-height: 250px;
  width: auto;
  object-fit: cover;
}
.totem-shot::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,16,11,0.78), transparent 42%);
  pointer-events: none;
}
.totem-shot:hover { transform: translateY(-7px); border-color: var(--gold-line); }
.totem-cap {
  position: absolute; bottom: 13px; left: 15px; right: 15px;
  z-index: 2;
  font-size: 0.75rem; font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
}
.totem-cap span { display: block; color: var(--text-dim); font-weight: 300; font-size: 0.7rem; margin-top: 2px; }

.spec-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}
.spec-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg-card);
  font-size: 0.775rem;
  color: var(--text-dim);
}
.spec-chip b { color: var(--text); font-weight: 500; }
.spec-chip .chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* ============================================================
   SLIDE 3 — DINÂMICA
   ============================================================ */
.dyn-layout {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: 3.4rem;
  align-items: center;
}
.dyn-photo {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 26px 52px rgba(0,0,0,0.58);
}
.dyn-photo img { width: 100%; height: 62vh; min-height: 340px; object-fit: cover; object-position: 70% center; }
.dyn-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,16,11,0.55), transparent 45%);
}

.steps-list { display: flex; flex-direction: column; gap: 1.05rem; margin-bottom: 2rem; }
.step-item {
  display: flex; gap: 17px; align-items: flex-start;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  transition: border-color 0.4s, background 0.4s;
}
.step-item:hover { border-color: var(--gold-line); background: var(--bg-card-2); }
.step-badge {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: rgba(201,150,63,0.10);
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem; font-weight: 500;
  color: var(--gold-2);
  text-transform: lowercase;
}
.step-text h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.98rem; font-weight: 500;
  letter-spacing: 0.045em; text-transform: uppercase;
  margin-bottom: 0.28rem;
}
.step-text p { font-size: 0.845rem; font-weight: 300; color: var(--text-dim); line-height: 1.56; }

.test-link {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 0.95rem 1.5rem;
  border-radius: 100px;
  border: 1px solid var(--gold-line);
  background: linear-gradient(135deg, rgba(201,150,63,0.16), rgba(201,150,63,0.05));
  transition: all 0.35s ease;
}
.test-link:hover { border-color: var(--gold); background: linear-gradient(135deg, rgba(201,150,63,0.27), rgba(201,150,63,0.09)); transform: translateY(-2px); }
.test-link svg { width: 19px; height: 19px; color: var(--gold-2); flex-shrink: 0; }
.test-link-txt { display: flex; flex-direction: column; }
.test-link-txt strong {
  font-family: 'Oswald', sans-serif;
  font-size: 0.83rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text);
}
.test-link-txt span { font-size: 0.76rem; color: var(--gold-2); font-weight: 300; }

/* ============================================================
   SLIDE 4 — TELÃO / SLIDESHOW
   ============================================================ */
.wall-layout { display: grid; grid-template-columns: 0.86fr 1fr; gap: 3rem; align-items: center; }

.live-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0.42rem 0.92rem;
  border-radius: 100px;
  border: 1px solid rgba(214,90,60,0.4);
  background: rgba(214,90,60,0.12);
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #e08a68; font-weight: 600;
  margin-bottom: 1.1rem;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #e0603a;
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(224,96,58,0.55)} 50%{opacity:0.55;box-shadow:0 0 0 7px rgba(224,96,58,0)} }

.wall-points { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.7rem; }
.wall-point { display: flex; gap: 12px; align-items: flex-start; font-size: 0.865rem; font-weight: 300; color: var(--text-dim); line-height: 1.55; }
.wall-point svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.wall-point b { color: var(--text); font-weight: 500; }

/* Palco do slideshow */
.stage {
  position: relative;
  height: 63vh;
  min-height: 360px;
  perspective: 1500px;
  display: grid;
  place-items: center;
}
.stage-photo {
  position: absolute;
  width: 34%;
  aspect-ratio: 9 / 16;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 22px 44px rgba(0,0,0,0.6);
  transition: transform 1.05s cubic-bezier(0.4,0,0.2,1),
              opacity 1.05s ease,
              filter 1.05s ease;
  will-change: transform, opacity;
}
.stage-photo img { width: 100%; height: 100%; object-fit: cover; }

.stage-photo[data-slot="0"] { transform: translateX(0) scale(1.24) rotateY(0deg);        opacity: 1;    filter: none;              z-index: 50; }
.stage-photo[data-slot="1"] { transform: translateX(185px) scale(0.86) rotateY(-20deg);  opacity: 0.62; filter: blur(1.6px) brightness(0.66); z-index: 40; }
.stage-photo[data-slot="2"] { transform: translateX(305px) scale(0.64) rotateY(-27deg);  opacity: 0.30; filter: blur(3.2px) brightness(0.5);  z-index: 30; }
.stage-photo[data-slot="3"] { transform: translateX(-305px) scale(0.64) rotateY(27deg);  opacity: 0.30; filter: blur(3.2px) brightness(0.5);  z-index: 30; }
.stage-photo[data-slot="4"] { transform: translateX(-185px) scale(0.86) rotateY(20deg);  opacity: 0.62; filter: blur(1.6px) brightness(0.66); z-index: 40; }

.stage-photo[data-slot="0"]::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 13px;
  border: 1px solid var(--gold-line);
  box-shadow: 0 0 34px var(--gold-glow) inset;
  pointer-events: none;
}

.stage-caption {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0.46rem 1.0rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(20,16,11,0.86);
  backdrop-filter: blur(8px);
  font-size: 0.72rem; color: var(--text-dim); white-space: nowrap;
}
.stage-caption b { color: var(--gold-2); font-weight: 500; }

/* ============================================================
   SLIDE 5 — INVESTIMENTO
   ============================================================ */
.price-layout { display: grid; grid-template-columns: 0.82fr 1fr; gap: 3.2rem; align-items: center; }

.price-box {
  padding: 2.2rem 2rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(201,150,63,0.13), rgba(201,150,63,0.03));
  position: relative;
  overflow: hidden;
}
.price-box::before {
  content: '';
  position: absolute; top: -40%; right: -30%;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--gold-glow), transparent 68%);
  filter: blur(10px);
}
.price-label {
  position: relative;
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  margin-bottom: 0.9rem;
}
.price-value {
  position: relative;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.55rem;
}
.price-value small { font-size: 0.42em; font-weight: 400; color: var(--text-dim); margin-right: 0.28em; vertical-align: 0.32em; }
.price-period {
  position: relative;
  font-size: 0.86rem; color: var(--text-dim); font-weight: 300;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.15rem;
}
.price-terms { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.price-term { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8rem; }
.price-term span { color: var(--text-dimmer); }
.price-term b { color: var(--text); font-weight: 500; text-align: right; }

.incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.9rem; }
.incl-col h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.62rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.95rem;
}
.incl-col.excl h4 { color: var(--text-dimmer); }
.incl-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.incl-col li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.815rem; font-weight: 300; color: var(--text-dim); line-height: 1.5;
}
.incl-col li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3.5px; color: var(--gold); }
.incl-col.excl li svg { color: var(--text-dimmer); }
.incl-col li b { color: var(--text); font-weight: 500; }

.team-strip {
  display: flex; gap: 12px; margin-top: 1.6rem;
}
.team-card {
  flex: 1;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.team-card .team-role {
  font-family: 'Oswald', sans-serif;
  font-size: 0.83rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); margin-bottom: 0.2rem;
}
.team-card .team-desc { font-size: 0.755rem; font-weight: 300; color: var(--text-dim); line-height: 1.45; }

/* ── Acessibilidade ───────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Responsivo ───────────────────────────────────────── */
@media (max-width: 1200px) {
  .slide-inner { padding: 2.6rem 3rem; }
  .dyn-layout, .wall-layout, .price-layout, .cover-layout { gap: 2.2rem; }
}
@media (max-width: 980px) {
  .cover-layout, .dyn-layout, .wall-layout, .price-layout { grid-template-columns: 1fr; }
  .cover-right, .dyn-photo { display: none; }
  .incl-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .totem-shot img { height: 30vh; min-height: 180px; }
  .stage { height: 44vh; }
  .nav-prev { left: 12px; } .nav-next { right: 12px; }
}