:root {
  --bg: #03080b;
  --panel: #071117;
  --line: #17404a;
  --text: #f2f8f9;
  --muted: #a7bcc1;
  --accent: #3bd8ed;
  --mint: #39e7a3;
  font-family: "IBM Plex Sans", Arial, sans-serif;
}

html { background: var(--bg); }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", Arial, sans-serif;
}
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 1450px;
  background:
    linear-gradient(180deg, #03080b55 0%, #03080b28 28%, #03080bc4 76%, #03080b 100%),
    url("fundo-clonador.png") center top / 100% auto no-repeat;
  pointer-events: none;
}
body::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 50% 25% at 50% 580px, #082b3344, transparent 80%);
  pointer-events: none;
}
::selection { background: var(--mint); color: #00120e; }
[hidden] { display: none !important; }

.shell { width: min(calc(100% - 48px), 1060px); }
.hero { padding: 30px 0 36px; }
.identity {
  width: clamp(184px, 24vw, 256px);
  height: clamp(184px, 24vw, 256px);
  margin: 0 auto 19px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 18px 28px #03161b) drop-shadow(0 0 24px #09daef24);
}
.identity img { display: block; width: 100%; height: auto; }
.hero.is-condensed { padding: 16px 0 22px; }
.hero.is-condensed .identity { width: 160px; height: 160px; margin-bottom: 0; }
.hero h1,
.gate h2,
.bridge,
.below h2,
.detail h3,
.final-cta h3 { font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; }
.hero h1 {
  max-width: 980px;
  font-size: clamp(2.35rem, 4.8vw, 4.45rem);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -.055em;
  text-shadow: 0 4px 26px #000b;
}
.hero .sub {
  max-width: 710px;
  margin-top: 25px;
  color: #d0e0e1;
  font-size: clamp(1.09rem, 1.75vw, 1.32rem);
  font-weight: 400;
  line-height: 1.57;
  text-shadow: 0 3px 18px #000c;
}

.gate {
  position: relative;
  max-width: 820px;
  padding: 32px;
  margin-bottom: 56px;
  border: 1px solid #28606a;
  border-radius: 4px;
  background: linear-gradient(135deg, #0b1920ef, #061016f5 70%);
  box-shadow: 0 22px 70px #000c, inset 0 1px #7ce7ee25;
  overflow: hidden;
}
.gate::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 52%, var(--mint));
}
.gate::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 42px;
  border-right: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  opacity: .7;
  pointer-events: none;
}
.gate-head { margin-bottom: 22px; align-items: baseline; }
.index {
  color: var(--accent);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .86rem;
  letter-spacing: .08em;
}
.gate h2 { font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.65rem); }
.options { gap: 11px; }
.option {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 82px;
  padding: 17px 19px;
  border-radius: 3px;
  border-color: #244851;
  background: #07151b;
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.36;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.option-number {
  align-self: flex-start;
  flex: none;
  color: var(--accent);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .81rem;
  letter-spacing: .08em;
  padding-top: 2px;
  opacity: .9;
}
.option:hover {
  background: #0c2730;
  border-color: #45c9d6;
  transform: translateY(-1px);
}
.option[aria-pressed=true] {
  background: linear-gradient(110deg, #123e43, #0c2428);
  border-color: var(--mint);
  box-shadow: inset 3px 0 var(--mint);
}
.option[aria-pressed=true] .option-number { color: var(--mint); }
.continue {
  display: block;
  min-width: 195px;
  min-height: 55px;
  margin: 22px 0 0 auto;
  padding: 12px 26px;
  border: 1px solid #70f5db;
  border-radius: 3px;
  background: linear-gradient(105deg, var(--accent), var(--mint));
  color: #031116;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  box-shadow: 0 10px 30px #0bcdb024;
  transition: filter .2s, transform .2s;
}
.continue:hover { filter: brightness(1.13); transform: translateY(-2px); }
.loading { padding: 8px 0 4px; }
.loading-status {
  min-height: 2em;
  margin: 0 0 20px;
  color: #edfdfb;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 500;
}
.loading-track {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 1px solid #2b6870;
  border-radius: 2px;
  background: #030d11;
}
.loading-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--mint));
  box-shadow: 0 0 18px #43ead4;
}
.loading-percent {
  display: block;
  margin-top: 11px;
  color: var(--accent);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .85rem;
  text-align: right;
}

.film { max-width: 820px; margin-bottom: 52px; }
html.vsl-locked,
body.vsl-locked { overflow: hidden; overscroll-behavior: none; }
body.vsl-locked { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; }
body.vsl-locked main { height: 100%; }
body.vsl-locked main > .shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.vsl-locked .hero { flex: none; }
body.vsl-locked .film {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: 920px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
body.vsl-locked .bridge { flex: none; }
body.vsl-locked .player-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.vsl-locked .player-frame video {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}
.bridge {
  border-left-color: var(--mint);
  color: #e6fdfa;
  font-weight: 500;
  letter-spacing: -.02em;
}
.player-frame {
  padding: 5px;
  border: 1px solid #38bbca;
  border-radius: 4px;
  background: linear-gradient(135deg, #0c343e, #02080b 36%, #0b4232);
  box-shadow: 0 28px 90px #000e, 0 0 32px #0ad8e228;
}
.player-frame::before { border-radius: 3px; border-color: #9ef8ff16; }
.player-frame video { border-radius: 1px; background: #000; }
.player-frame video { cursor: pointer; }
.play-toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid #8cf9ec;
  border-radius: 50%;
  background: #05181cdb;
  color: #c9fff8;
  box-shadow: 0 0 0 8px #29dacf1b, 0 0 36px #22efd473;
  cursor: pointer;
  transition: opacity .2s, filter .2s;
}
.play-toggle:hover { filter: brightness(1.2); }
.play-toggle svg { width: 30px; height: 30px; }
.player-frame.is-warning .play-toggle { display: none; }
.pause-warning {
  position: absolute;
  z-index: 4;
  inset: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 34%, #5913279c, transparent 52%), #05080bf2;
  color: #fff3f1;
  text-align: center;
}
.pause-warning::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .27;
  background: repeating-linear-gradient(180deg, transparent 0 5px, #f24c5940 6px, transparent 7px);
  pointer-events: none;
}
.warning-symbol {
  position: relative;
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 0 19px #ff2d55ab);
  animation: warning-glitch 2.8s infinite;
}
.warning-symbol svg { display: block; width: 100%; height: 100%; }
.warning-text {
  position: relative;
  max-width: 560px;
  margin: 0;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: clamp(1.15rem, 2.5vw, 1.8rem);
  font-weight: 600;
  line-height: 1.34;
  text-shadow: 2px 0 #ff304460, -2px 0 #29d9e740;
}
.resume-video {
  position: relative;
  min-height: 48px;
  padding: 10px 24px;
  border: 1px solid #ff6270;
  border-radius: 3px;
  background: #210f18;
  color: #fff3f1;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.resume-video:hover { background: #431524; }
.watch-progress {
  flex: none;
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #22616a;
  border-radius: 2px;
  background: #061318;
  pointer-events: none;
}
.watch-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--mint));
  box-shadow: 0 0 13px #40e9d8;
}
@keyframes warning-glitch {
  0%, 88%, 100% { transform: translate(0); filter: drop-shadow(0 0 19px #ff2d55ab); }
  89% { transform: translate(3px, -1px); filter: drop-shadow(-4px 0 #f43f5e); }
  90% { transform: translate(-3px, 1px); filter: drop-shadow(4px 0 #33d2e0); }
  91% { transform: translate(1px, 0); filter: drop-shadow(0 0 19px #ff2d55ab); }
}
.vsl-cta {
  display: block;
  width: min(100%, 340px);
  margin: 26px auto 0;
  padding: 16px 24px;
  border: 1px solid #70f5db;
  border-radius: 3px;
  background: linear-gradient(105deg, var(--accent), var(--mint));
  color: #031116;
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  animation: cta-pulse 1.9s ease-in-out infinite;
}
.vsl-cta:hover { filter: brightness(1.13); }
body.vsl-locked .vsl-cta { flex: none; margin: 18px auto 4px; }
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px #32e7ce74); }
  50% { transform: scale(1.035); filter: drop-shadow(0 0 22px #38ead3bd); }
}

.below {
  position: relative;
  border-top: 1px solid #1d4a50;
  background: linear-gradient(180deg, #061015, #03080b 290px);
}
.below::before {
  content: "";
  position: absolute;
  top: -1px;
  left: calc(50% - 30px);
  width: 60px;
  height: 2px;
  background: var(--mint);
  box-shadow: 0 0 18px var(--mint);
}
.below-kicker { color: var(--accent); font-family: ui-monospace, Consolas, monospace; }
.below h2 { font-weight: 500; }
.details { gap: 0 34px; }
.detail {
  min-height: 128px;
  padding: 25px 4px 26px;
  border: 0;
  border-bottom: 1px solid #20434a;
  border-radius: 0;
  background: transparent;
}
.detail h3 { font-weight: 500; }
.detail p { color: #9fb5b9; }
.faq-list { display: grid; gap: 14px; margin-top: 22px; counter-reset: faq; }
.faq-item {
  counter-increment: faq;
  overflow: hidden;
  border: 1px solid #24535a;
  border-radius: 12px;
  background: linear-gradient(115deg, #0d2228, #071419);
  box-shadow: 0 10px 30px #0004, inset 0 1px #ffffff0a;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.faq-item:hover { border-color: #3a8990; transform: translateY(-2px); }
.faq-item[open] { border-color: #38b6ac; box-shadow: 0 14px 36px #0006, 0 0 24px #39e7a317; }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 16px 20px;
  color: #e4f3f0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: counter(faq, decimal-leading-zero);
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid #286e72;
  border-radius: 8px;
  background: #103139;
  color: var(--mint);
  font: 600 .76rem ui-monospace, Consolas, monospace;
}
.faq-item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 1px solid #286e72;
  border-radius: 50%;
  color: var(--mint);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.faq-item p { margin: 0 20px 20px; padding: 16px 0 0 52px; border-top: 1px solid #24535a; }
.final-cta {
  margin-top: 32px;
  border-color: #277477;
  border-radius: 3px;
  background: linear-gradient(110deg, #0b2b34, #0a1d20);
}
.footer-banner { width: min(100%, 620px); margin: 38px auto 0; }
.footer-banner img { display: block; width: 100%; height: auto; }
.foot { border-top-color: #1d3e43; color: #79a0a3; }

@media(max-width:700px) {
  .shell { width: min(calc(100% - 32px), 1060px); }
  body::before {
    height: 1050px;
    background:
      linear-gradient(180deg, #03080b22, #03080ba0 56%, #03080b 100%),
      url("fundo-clonador.png") 20% top / auto 830px no-repeat;
  }
  .hero { padding: 22px 0 27px; }
  .identity { width: 166px; height: 166px; margin-bottom: 16px; }
  .hero.is-condensed { padding: 12px 0 16px; }
  .hero.is-condensed .identity { width: 128px; height: 128px; }
  .hero h1 { font-size: clamp(2.2rem, 8.4vw, 3.2rem); line-height: 1.09; }
  .hero .sub { font-size: 1.08rem; line-height: 1.48; margin-top: 19px; }
  .gate { padding: 22px 18px 25px; margin-bottom: 38px; }
  .gate-head { gap: 12px; align-items: flex-start; }
  .gate h2 { font-size: 1.32rem; }
  .option { min-height: 70px; padding: 14px 14px; gap: 13px; }
  .continue { width: 100%; }
  .film { margin-bottom: 40px; }
  .pause-warning { gap: 10px; padding: 14px; }
  .warning-symbol { width: 64px; height: 64px; }
  .warning-text { font-size: clamp(1rem, 4vw, 1.25rem); line-height: 1.24; }
  .resume-video { min-height: 42px; }
  .details { gap: 0; }
}

@media(prefers-reduced-motion:reduce) {
  .option:hover { transform: none; }
  .continue:hover { transform: none; }
  .warning-symbol { animation: none; }
  .vsl-cta { animation: none; filter: drop-shadow(0 0 10px #32e7ce74); }
}

@media(max-height:650px) {
  body.vsl-locked .hero.is-condensed { padding: 6px 0 10px; }
  body.vsl-locked .hero.is-condensed .identity { width: 96px; height: 96px; }
  body.vsl-locked .bridge { margin-bottom: 10px; font-size: 1rem; line-height: 1.25; }
  .pause-warning { gap: 7px; padding: 10px; }
  .warning-symbol { width: 48px; height: 48px; }
  .warning-text { font-size: .98rem; }
}