/* ===================================================================
   TRIMESTRÃO INEVITÁVEL — ESTR #100
   Identidade herdada do universo Sim Inevitável (Triwer)
   =================================================================== */

:root{
  --bg:          #FFFCF4;
  --bg-warm:     #F2EBDB;
  --card-bg:     #FDFAF5;
  --ink:         #2A0200;
  --ink-soft:    #4A2418;
  --muted:       #87672A;
  --white-soft:  #F4EFE8;

  --gold-1:      #B28431;
  --gold-2:      #D5AE66;
  --gold-3:      #F4EFE8;
  --gold-gradient: linear-gradient(85.41deg, #B28431 -3.48%, #D5AE66 20.83%, #F6EDDD 52.17%, #D5AE66 79.18%, #B28431 100.25%);

  --red:         #E52222;
  --red-dark:    #C00000;
  --rule:        #E1C3A1;

  --night:       #120b07;
  --panel:       rgba(35,24,17,.76);
  --line:        rgba(213,174,102,.26);
  --copy:        rgba(246,237,221,.72);

  --serif: 'Crimson Pro', Georgia, serif;
  --sans:  'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-in: cubic-bezier(.5,0,.75,0);
  --dur-s: 200ms;
  --dur-m: 500ms;
  --dur-l: 750ms;

  --wrap: 880px;
  --wrap-narrow: 660px;
  --gutter: 20px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; background:none; border:none; cursor:pointer; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
blockquote{ margin:0; }

.noise{
  position: fixed; inset:0; pointer-events:none; z-index:1; opacity:.035; mix-blend-mode:multiply;
  background-image: radial-gradient(circle at 1px 1px, #000 1px, transparent 0);
  background-size: 3px 3px;
}

/* ---------- Layout ---------- */
.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow{ max-width: var(--wrap-narrow); }

.section{
  position: relative;
  padding: 110px 0;
  background: var(--bg);
}
.section--warm{ background: var(--bg-warm); }
.section--night{ background: var(--night); color: var(--copy); }
.section--night .wrap{ position:relative; z-index:2; }

/* ---------- Typography helpers ---------- */
.kicker{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin: 0 0 16px;
}
.kicker--night{ color: var(--gold-2); }

.h2{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  color: var(--ink);
}
.h2--night{ color: var(--gold-3); }
.h2 em, .h2--night em{ font-style: italic; color: var(--gold-2); font-weight: 500; }

.lede{
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 44px;
}
.lede--night{ color: var(--copy); }

.prose{ max-width: 700px; }
.prose p{ margin: 0 0 22px; color: var(--ink-soft); font-size: 16.5px; }
.prose--night p{ color: var(--copy); }
.prose > *:last-child{ margin-bottom:0; }

.prose blockquote, blockquote.quote-highlight{
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--gold-1);
  border-left: 2px solid var(--rule);
  padding: 4px 0 4px 22px;
  margin: 34px 0;
}
.quote--night{ color: var(--gold-2); border-left-color: var(--line); }
.quote--big{ font-size: clamp(20px,2.6vw,28px); max-width: 620px; margin: 46px auto; text-align:center; border:none; padding:0; }

blockquote.quote-highlight{
  text-align:center; max-width: 620px; margin: 36px auto; font-size: clamp(19px,2.4vw,24px);
  border:none; padding:0;
}

.insight{
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 22px 26px;
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 30px;
}
.insight strong{ color: var(--gold-1); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; display:block; margin-bottom:8px; }
.insight--night{ background: var(--panel); border-color: var(--line); color: var(--copy); }
.insight--night strong{ color: var(--gold-2); }

/* Insight bloqueado -- revela com efeito de "decodificação" ao clicar */
.insight{ padding:0; overflow:hidden; }
.insight-lock-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding: 20px 22px; background:
    repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(178,132,49,.07) 9px, rgba(178,132,49,.07) 18px);
  font-family: var(--mono); font-size:11.5px; letter-spacing:.08em; color: var(--gold-1); text-transform:uppercase;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.insight--night .insight-lock-btn{ color: var(--gold-2); }
.insight-lock-btn:hover{ background:
    repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(178,132,49,.14) 9px, rgba(178,132,49,.14) 18px); }
.insight-lock-glyph{ font-size:13px; }
.insight-lock-cursor{ animation: blinkCursor 1s step-end infinite; }
@keyframes blinkCursor{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
.insight-real{ display:none; padding: 22px 26px; }
.is-unlocking .insight-real{ display:block; animation: insightGlitchIn 480ms steps(7) forwards; }
.is-unlocking .insight-lock-btn{ display:none; }
@keyframes insightGlitchIn{
  0%{ clip-path: inset(0 0 94% 0); transform: translateX(-6px); opacity:.4; }
  15%{ clip-path: inset(45% 0 40% 0); transform: translateX(4px); }
  30%{ clip-path: inset(8% 0 70% 0); transform: translateX(-3px); }
  45%{ clip-path: inset(75% 0 4% 0); transform: translateX(3px); }
  60%{ clip-path: inset(15% 0 50% 0); transform: translateX(-1px); }
  80%{ clip-path: inset(0 0 10% 0); transform: translateX(1px); opacity:1; }
  100%{ clip-path: inset(0 0 0 0); transform:none; opacity:1; }
}
.insight-scramble{ font-family: var(--sans); }
@media (prefers-reduced-motion: reduce){
  .insight-lock-cursor{ animation:none; }
  .is-unlocking .insight-real{ animation:none; }
}

.case{ font-size: 15.5px; margin-bottom: 30px !important; }
.case-tag{
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--gold-1);
  border: 1px solid var(--gold-1); border-radius: 99px; padding: 2px 8px; margin-right: 8px; vertical-align: 2px;
}
.case--night .case-tag{ color: var(--gold-2); border-color: var(--gold-2); }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin: 30px 0 38px; }
.chip{
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  border: 1px solid var(--gold-1); color: var(--ink-soft); border-radius: 99px; padding: 6px 14px;
  background: var(--card-bg);
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition: opacity var(--dur-s) linear; transform: none !important; }
}

/* ===================================================================
   TRILHA (fio condutor)
   =================================================================== */
.trail{
  position: fixed; left: 28px; top: 50%; transform: translateY(-50%);
  z-index: 40; height: min(60vh, 560px); width: 40px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-m) var(--ease);
}
.trail.is-active{ opacity: 1; }
.trail-track{ position: relative; height: 100%; width: 2px; margin: 0 auto; background: rgba(178,132,49,.22); border-radius: 2px; }
.trail-fill{ position:absolute; top:0; left:0; width:100%; height:0%; background: var(--gold-gradient); border-radius:2px; }
.trail-ball{
  position:absolute; left:50%; top:0%; width:14px; height:14px; border-radius:50%;
  transform: translate(-50%,-50%) scale(1);
  background: radial-gradient(circle at 35% 30%, #F6EDDD, var(--gold-2) 55%, var(--gold-1) 100%);
  box-shadow: 0 0 10px rgba(213,174,102,.6);
  transition: top 120ms linear, transform var(--dur-m) var(--ease);
}
.trail-marker{ position:absolute; left:50%; top: var(--pos); transform: translate(-50%,-50%); display:flex; align-items:center; gap:8px; }
.trail-marker-dot{ width:6px; height:6px; border-radius:50%; background: rgba(178,132,49,.4); display:block; transition: background var(--dur-s) var(--ease); }
.trail-marker.is-past .trail-marker-dot{ background: var(--gold-2); }
.trail-marker-label{
  position:absolute; left:16px; top:50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: .15em; color: var(--muted); white-space:nowrap;
}
@media (max-width: 1023px){ .trail{ display:none; } }

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: var(--night); color: var(--white-soft); text-align:center;
  padding: 100px 20px; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 50% at 50% 20%, rgba(213,174,102,.14), transparent 70%);
  pointer-events:none;
}
.hero-inner{ position:relative; max-width: 680px; margin:0 auto; }

.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform:uppercase;
  color: var(--gold-2); border: 1px solid rgba(213,174,102,.35); border-radius: 99px; padding: 7px 14px;
  margin-bottom: 40px; opacity:0; animation: fadeIn var(--dur-m) var(--ease) 200ms forwards;
}
.hero-badge-pulse{ width:6px; height:6px; border-radius:50%; background: var(--gold-2); box-shadow: 0 0 0 0 rgba(213,174,102,.6); animation: pulseDot 2s ease-out infinite; }

/* Lottie containers (used across sections) */
.lottie-box{ display:inline-block; }
.lottie-box--pulse{ width:22px; height:22px; margin-right:2px; }
.lottie-box--icon{ width:40px; height:40px; margin: 0 0 6px -3px; }
.lottie-box svg{ width:100%; height:100%; }

.speech{
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 26px 24px; max-width: 460px; margin: 0 auto 46px;
  backdrop-filter: blur(14px);
  opacity:0; transform: translateY(14px) scale(.97);
  animation: speechIn var(--dur-l) var(--ease) 450ms forwards;
}
.speech-tail{ position:absolute; left:38px; bottom:-9px; width:18px; height:18px; background: var(--panel); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform: rotate(45deg); border-radius: 0 0 4px 0; }
.speech-eyebrow{ display:flex; align-items:center; gap:7px; font-family: var(--mono); font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-2); margin-bottom: 12px; }
.speech-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold-2); }
.voice-track{ display:flex; align-items:flex-end; gap:3px; height: 20px; margin-bottom: 14px; }
.voice-track span{ flex:1; background: var(--gold-2); opacity:.55; border-radius: 2px; animation: voiceWave 1.1s ease-in-out infinite; }
.voice-track span:nth-child(odd){ animation-duration: 1.3s; }
.voice-track span:nth-child(3n){ animation-duration: .9s; animation-delay: .15s; }
.voice-track span:nth-child(4n){ animation-delay: .3s; }
.speech-text{ margin:0; font-size: 14.5px; line-height:1.55; color: var(--white-soft); text-align:left; }

.hero-title{ font-family: var(--serif); font-weight:600; font-size: clamp(34px, 6.4vw, 62px); line-height:1.06; letter-spacing:-0.01em; margin: 0 0 22px; color: var(--gold-3);
  opacity:0; animation: fadeUp var(--dur-l) var(--ease) 750ms forwards; }
.hero-title em{ font-style: italic; color: var(--gold-2); font-weight:500; }
.hero-kicker{ display:block; font-family: var(--mono); font-size: 13px; letter-spacing:.22em; text-transform:uppercase; color: var(--muted); margin-bottom: 14px; }
.hero-sub{ font-size: 16.5px; color: var(--copy); max-width: 480px; margin: 0 auto 52px; line-height:1.6;
  opacity:0; animation: fadeUp var(--dur-l) var(--ease) 950ms forwards; }

.hero-scroll{ display:inline-flex; flex-direction:column; align-items:center; gap:10px; font-family: var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-2);
  opacity:0; animation: fadeIn var(--dur-m) var(--ease) 1300ms forwards; }
.hero-scroll svg{ animation: bounceDown 1.6s ease-in-out infinite; }

@keyframes fadeIn{ to{ opacity:1; } }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
.hero-title, .hero-sub{ transform: translateY(16px); }
@keyframes speechIn{ to{ opacity:1; transform: translateY(0) scale(1); } }
@keyframes pulseDot{ 0%{ box-shadow: 0 0 0 0 rgba(213,174,102,.55);} 70%{ box-shadow: 0 0 0 8px rgba(213,174,102,0);} 100%{ box-shadow: 0 0 0 0 rgba(213,174,102,0);} }
@keyframes voiceWave{ 0%,100%{ height:20%; } 50%{ height:100%; } }
@keyframes bounceDown{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }

@media (prefers-reduced-motion: reduce){
  .hero-badge,.speech,.hero-title,.hero-sub,.hero-scroll{ animation: none !important; opacity:1 !important; transform:none !important; }
  .voice-track span, .hero-badge-pulse, .hero-scroll svg{ animation: none !important; }
}

/* ===================================================================
   S01 — MINEFIELD
   =================================================================== */
.minefield{ margin: 44px 0; }
.minefield-svg{ width:100%; height:auto; }
.minefield-svg .mine-icon{ color: var(--gold-1); opacity:0; transform-origin: center; transform-box: fill-box; }
.minefield-svg.is-live .mine-icon{ animation: minePop .45s var(--ease) forwards; }
.minefield-svg .mine-icon:nth-of-type(1){ animation-delay: .05s; }
.minefield-svg .mine-icon:nth-of-type(2){ animation-delay: .15s; }
.minefield-svg .mine-icon:nth-of-type(3){ animation-delay: .25s; }
.minefield-svg .mine-icon:nth-of-type(4){ animation-delay: .35s; }
.minefield-svg .mine-icon:nth-of-type(5){ animation-delay: .45s; }
@keyframes minePop{ from{ opacity:0; } to{ opacity:1; } }
.minefield-svg #freePath.is-live{ animation: drawPath 1s var(--ease) .5s forwards; }
@keyframes drawPath{ to{ stroke-dashoffset:0; } }

/* ===================================================================
   S02 — FICHA (tabs)
   =================================================================== */
.ficha{ background: var(--card-bg); border: 1px solid var(--rule); border-radius: 16px; overflow:hidden; margin: 38px 0 42px; }
.ficha-tabs{ display:flex; border-bottom: 1px solid var(--rule); }
.ficha-tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding: 16px 10px; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent;
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.ficha-tab svg{ opacity:.7; transition: opacity var(--dur-s) var(--ease); }
.ficha-tab:hover{ background: rgba(178,132,49,.06); color: var(--ink-soft); }
.ficha-tab.active{ color: var(--gold-1); border-bottom-color: var(--gold-1); font-weight:600; }
.ficha-tab.active svg{ opacity:1; }
.ficha-panel{ padding: 26px 28px 30px; animation: panelIn var(--dur-s) var(--ease); }
@keyframes panelIn{ from{ opacity:0; transform: translateX(8px);} to{ opacity:1; transform:none;} }
.ficha-head{ font-family: var(--serif); font-size: 20px; font-weight:600; color: var(--ink); margin-bottom:10px; }
.ficha-panel p{ color: var(--ink-soft); margin: 0 0 12px; }
.ficha-panel blockquote{ font-family: var(--serif); font-style: italic; color: var(--gold-1); font-size:16px; margin:0; }

/* Pasta de arquivo -- case do aluno, abre e o documento sai de dentro */
.folder-wrap{ margin: 40px 0 10px; }
.folder{
  position:relative; width:100%; max-width:340px; height:96px; cursor:pointer;
}
.folder-tab{
  position:absolute; top:0; left:18px; transform: translateY(-60%);
  background: var(--gold-2); color:#2a1a05; font-family: var(--mono); font-size:9.5px; letter-spacing:.1em;
  padding:5px 12px 6px; border-radius:4px 4px 0 0; z-index:1;
}
.folder-back{
  position:absolute; inset:0 6px 0 0; top:6px; background: var(--bg-warm); border:1px solid var(--rule); border-radius:8px;
}
.folder-front{
  position:absolute; inset:0 0 0 6px; background: var(--card-bg); border:1px solid var(--rule); border-radius:8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transform-origin: bottom center; transition: transform 550ms cubic-bezier(.5,0,.15,1), opacity 450ms ease 100ms, box-shadow var(--dur-s) var(--ease);
  box-shadow: 0 8px 20px rgba(178,132,49,.14);
}
.folder:hover .folder-front{ box-shadow: 0 12px 26px rgba(178,132,49,.22); }
.folder-clip{ color: var(--gold-1); }
.folder-front-label{ font-family: var(--mono); font-size:10px; letter-spacing:.08em; color: var(--muted); text-transform:uppercase; }
.folder.is-open .folder-front{ transform: perspective(700px) rotateX(-108deg); opacity:0; }

.folder-doc-wrap{
  display:grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms cubic-bezier(.16,.84,.44,1) 120ms;
}
.folder-doc-wrap.is-open{ grid-template-rows: 1fr; }
.folder-doc-inner{ overflow:hidden; min-height:0; }
.folder-doc-wrap .folder-doc-inner > *:first-child{ padding-top:26px; }

/* ===================================================================
   S03 — map intro
   =================================================================== */
.map-intro{ position:relative; margin: 40px 0 34px; }
.progress-svg{ width:100%; height:auto; display:block; }
.map-intro #introLine.is-live{ animation: drawLine .9s var(--ease) forwards; }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }
.map-intro-nodes{ display:flex; justify-content:space-between; margin-top:-10px; }
.map-node{ font-family: var(--mono); font-size:11px; letter-spacing:.14em; color: var(--muted); opacity:0; transition: opacity var(--dur-s) var(--ease), color var(--dur-s) var(--ease); }
.map-node.is-live{ opacity:1; color: var(--gold-1); }

/* ===================================================================
   S04 — ROTAS
   =================================================================== */
.routes{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin: 34px 0 0; }
.route{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background: var(--card-bg); border: 1px solid var(--rule); border-radius: 14px; padding: 34px 20px 22px;
  text-align:left; transition: border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.route:hover{ border-color: var(--gold-1); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(178,132,49,.14); }
.route.is-active{ border-color: var(--gold-1); background: #FBF3E3; }
.route-icon{ color: var(--gold-1); }

/* Rota 2 -- estrela cintilando em loop */
.sparkle-main{ transform-origin: 12px 12px; transform-box: fill-box; animation: sparklePulse 2.2s ease-in-out infinite; }
.sparkle-mini{ transform-origin: center; transform-box: fill-box; opacity:0; animation: sparkleMini 2.2s ease-in-out infinite; }
.sparkle-mini--b{ animation-delay: 1.1s; }
@keyframes sparklePulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.16); } }
@keyframes sparkleMini{ 0%,70%,100%{ opacity:0; transform: scale(.4); } 85%{ opacity:1; transform: scale(1); } }

/* Rota 3 -- ímã atraindo partículas em loop */
.magnet-spark{ opacity:0; animation: magnetPull 2.6s ease-in infinite; }
.magnet-spark--b{ animation-delay: 1.1s; }
@keyframes magnetPull{
  0%{ opacity:0; }
  10%{ opacity:1; }
  85%{ opacity:.9; cx:12; cy:7; }
  100%{ opacity:0; cx:12; cy:7; }
}
@media (prefers-reduced-motion: reduce){
  .sparkle-main, .sparkle-mini, .magnet-spark{ animation:none !important; opacity: .8; }
}
.route-label{ font-weight:600; font-size: 14.5px; color: var(--ink); }
.route-hint{ font-family: var(--mono); font-size:10px; letter-spacing:.1em; color: var(--muted); text-transform:uppercase; }
.route--warn{ border-color: rgba(213,174,102,.6); }
.route-detail{ background: var(--card-bg); border:1px solid var(--gold-1); border-radius:14px; padding:26px 26px; margin-top:22px; overflow:hidden; }
.route-detail-body p{ color: var(--ink-soft); margin:0 0 14px; }
.route-detail-body blockquote{ font-family: var(--serif); font-style:italic; color:var(--gold-1); margin:0; }

/* Selo de cera — cada rota é uma "carta lacrada" */
.route-seal{
  position:absolute; top:-14px; left:20px; width:30px; height:30px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold-1) 75%);
  box-shadow: 0 3px 8px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.35);
  transition: transform 450ms cubic-bezier(.34,1.56,.64,1), opacity 350ms ease;
  z-index: 2;
}
.route-seal::before{ content:'◆'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#3a2408; font-size:11px; }
.route--warn .route-seal{ background: radial-gradient(circle at 35% 30%, #e8a35c, var(--red-dark) 85%); }
.route.is-active .route-seal{ transform: scale(0) rotate(70deg); opacity:0; }

/* ===================================================================
   S05 — SCOPE (rifle vs sniper)
   =================================================================== */
.scope{ margin: 40px 0; }
.scope-svg{ width:100%; height:auto; }
.scope-label{ font-family: var(--mono); font-size:11px; letter-spacing:.16em; }
.scope-divider{ stroke: #D5AE66; stroke-dasharray: 4 6; opacity: .2; }

/* Silhueta do fuzil (mesma base nos dois lados, cor muda por lado) */
.gun-icon{ transform-box: fill-box; }
.gun-icon--rifle path{ fill: #87672A; }
.gun-icon--sniper path{ fill: #D5AE66; }
.recoil-shake{ transform-origin: center; }

/* RIFLE: rajada — tremor, clarão de boca e impactos dispersos no alvo */
.scope-svg.is-live .gun-icon--rifle .recoil-shake{ animation: rifleRecoil 2.4s ease-in-out infinite; }
@keyframes rifleRecoil{
  0%,4%,12.5%,16.5%,25%,29%,37.5%,41.5%,50%,54%,62.5%,66.5%,100%{ transform: translate(0,0) rotate(0); }
  1%,13.5%,26%,38.5%,51%,63.5%{ transform: translate(-3px,1px) rotate(-2deg); }
}
.muzzle-flash{ opacity: 0; transform-box: fill-box; transform-origin: center; }
.scope-svg.is-live .muzzle-flash--rifle{ animation: muzzleFlicker 2.4s ease-out infinite; }
@keyframes muzzleFlicker{
  0%,4%,12.5%,16.5%,25%,29%,37.5%,41.5%,50%,54%,62.5%,66.5%,100%{ opacity:0; transform:scale(.6); }
  1%,13.5%,26%,38.5%,51%,63.5%{ opacity:1; transform:scale(1.2); }
}

.target-group .ring{ fill:none; stroke:#87672A; opacity:.45; }
.target-group--sniper .ring{ stroke:#D5AE66; }
.hit{ fill:#B28431; opacity:0; transform-box: fill-box; transform-origin: center; }
.hit--sniper{ fill:#D5AE66; }
.scope-svg.is-live .hit--rifle{ animation: hitPop 2.4s ease-out infinite; animation-delay: var(--hd); }
@keyframes hitPop{
  0%{ opacity:0; transform:scale(2.2); }
  6%{ opacity:1; transform:scale(1); }
  60%{ opacity:1; transform:scale(1); }
  68%{ opacity:0; transform:scale(.4); }
  100%{ opacity:0; }
}

/* SNIPER: parado, mira carrega devagar, um único tiro certeiro no alvo */
.scope-mount{ fill:none; stroke:#D5AE66; stroke-width:2; }
.scope-lens{ fill:#120b07; opacity:.6; }
.scope-svg.is-live .scope-lens{ animation: scopeGlow 4s ease-in-out infinite; }
@keyframes scopeGlow{
  0%,70%{ opacity:.6; }
  85%{ opacity:1; }
  100%{ opacity:.6; }
}
.sniper-tracer{ stroke:#F6EDDD; stroke-width:1.6; stroke-linecap:round; opacity:0; stroke-dasharray:130; stroke-dashoffset:130; }
.scope-svg.is-live .sniper-tracer{ animation: sniperFire 4s ease-out infinite; }
@keyframes sniperFire{
  0%,78%{ opacity:0; stroke-dashoffset:130; }
  80%{ opacity:1; }
  92%{ stroke-dashoffset:0; opacity:1; }
  96%{ opacity:0; stroke-dashoffset:0; }
  100%{ opacity:0; }
}
.hit--sniper{ opacity:.85; }
.scope-svg.is-live .hit--sniper{ animation: sniperImpact 4s ease-out infinite; }
@keyframes sniperImpact{
  0%,88%{ transform:scale(1); opacity:.85; }
  92%{ transform:scale(1.8); opacity:1; }
  96%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(1); opacity:.85; }
}

@media (prefers-reduced-motion: reduce){
  .recoil-shake, .muzzle-flash--rifle, .hit--rifle, .scope-lens, .sniper-tracer{ animation:none !important; }
  .muzzle-flash--rifle, .sniper-tracer{ opacity:0 !important; }
  .hit--rifle{ opacity:1 !important; transform:scale(1) !important; }
  .hit--sniper{ opacity:1 !important; transform:scale(1) !important; }
}

/* Ficha de investigação — case da Sasha/Mepar */
.case-file{
  position:relative; background: var(--panel); border:1px solid var(--line); border-radius:14px;
  padding: 30px 32px; margin: 40px 0; backdrop-filter: blur(6px);
}
.case-file-corners i{ position:absolute; width:16px; height:16px; border-color: var(--gold-2); opacity:.7; }
.case-file-corners i:nth-child(1){ top:10px; left:10px; border-top:1.5px solid; border-left:1.5px solid; }
.case-file-corners i:nth-child(2){ top:10px; right:10px; border-top:1.5px solid; border-right:1.5px solid; }
.case-file-corners i:nth-child(3){ bottom:10px; left:10px; border-bottom:1.5px solid; border-left:1.5px solid; }
.case-file-corners i:nth-child(4){ bottom:10px; right:10px; border-bottom:1.5px solid; border-right:1.5px solid; }
.case-file-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.case-file-stamp{
  font-family: var(--mono); font-size:10px; letter-spacing:.12em; color: var(--red);
  border:1px solid var(--red); border-radius:99px; padding:4px 12px; transform: rotate(-3deg);
}
.case-file-id{ font-family: var(--mono); font-size:10px; letter-spacing:.1em; color: var(--muted); }
.case-file-target{ margin-bottom:16px; }
.case-file-label{ display:block; font-family: var(--mono); font-size:10px; letter-spacing:.12em; color: var(--gold-2); text-transform:uppercase; margin-bottom:6px; }
.case-file-target strong{ font-family: var(--serif); font-size:19px; color: var(--gold-3); font-weight:600; }
.case-file-text{ color: var(--copy); font-size:15.5px; margin:0 0 20px; }
.case-file-text em{ color: var(--gold-2); font-style:italic; }
.case-file-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.case-file-tag{ font-family: var(--mono); font-size:10px; letter-spacing:.08em; color: var(--gold-2); border:1px solid var(--line); border-radius:99px; padding:5px 12px; }
.case-file-quote{ margin:0 !important; }

/* ===================================================================
   S06 — PATHS
   =================================================================== */
.paths{ display:flex; gap:12px; flex-wrap:wrap; margin: 0 0 30px; }
.path-toggle{
  font-family: var(--mono); font-size:12px; letter-spacing:.06em;
  border:1px solid var(--gold-1); color: var(--ink-soft); border-radius:99px; padding:9px 18px;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.path-toggle[aria-pressed="true"]{ background: var(--gold-1); color:#fff; }

/* Slider arrastável — escolha entre Caminho 1 / Caminho 2 */
.path-slider{ display:flex; align-items:center; gap:16px; margin: 0 0 38px; user-select:none; }
.path-slider-label{ font-family: var(--mono); font-size:11px; letter-spacing:.08em; color: var(--muted); text-transform:uppercase; white-space:nowrap; transition: color var(--dur-s) var(--ease); }
.path-slider-label.is-active{ color: var(--gold-1); font-weight:600; }
.path-slider-track{ position:relative; flex:1; height:8px; background: var(--bg-warm); border:1px solid var(--rule); border-radius:99px; }
.path-slider-fill{ position:absolute; top:-1px; left:-1px; height:8px; border-radius:99px; background: var(--gold-gradient); width:50%; transition: width 300ms var(--ease); }
.path-slider-handle{
  position:absolute; top:50%; left:50%; width:34px; height:34px; border-radius:50%;
  background: var(--card-bg); border:2px solid var(--gold-1); color: var(--gold-1);
  display:flex; align-items:center; justify-content:center;
  transform: translate(-50%,-50%); cursor:grab; touch-action: pan-y;
  box-shadow: 0 4px 12px rgba(178,132,49,.25);
  transition: left 300ms var(--ease), box-shadow var(--dur-s) var(--ease);
}
.path-slider-handle:active{ cursor:grabbing; box-shadow: 0 2px 18px rgba(178,132,49,.4); }
.path-slider-handle:focus-visible{ outline:2px solid var(--gold-1); outline-offset:3px; }
.path-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
.path-card{
  background: var(--card-bg); border:1px solid var(--rule); border-radius:16px; padding:26px;
  transform: perspective(800px) rotateY(4deg) scale(1); opacity:.6;
  transition: transform 400ms var(--ease), opacity 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease), background 400ms var(--ease);
}
.path-card:nth-child(2){ transform: perspective(800px) rotateY(-4deg) scale(1); }
.path-card.reveal.is-visible{ transform: perspective(800px) rotateY(0) scale(1); opacity:.72; }
.path-card.is-highlight{
  border-color: var(--gold-1); background: #FBF3E3; opacity:1;
  box-shadow: 0 14px 30px rgba(178,132,49,.22); transform: perspective(800px) rotateY(0) scale(1.02);
}
.path-card h3{ font-family: var(--serif); font-size:19px; margin: 4px 0 12px; }
.path-card p{ color: var(--ink-soft); font-size:14.8px; margin:0 0 10px; }
.path-fit strong{ color: var(--gold-1); }
.path-card blockquote{ font-family: var(--serif); font-style:italic; color: var(--gold-1); margin:10px 0 0; font-size:14.5px; }
.path-track svg{ transition: filter var(--dur-s) var(--ease); }

/* ===================================================================
   S07 — DOSSIER GRID
   =================================================================== */
.dossier-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin: 36px 0 42px; }
.dossier-card{
  position:relative; background: var(--card-bg); border:1px solid var(--rule); border-radius:14px; padding:22px 20px;
  transform: scale(.92); opacity:0; transition: transform var(--dur-s) cubic-bezier(.34,1.56,.64,1), opacity var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.dossier-card.is-visible{ transform: scale(1); opacity:1; }
.dossier-card:hover{ box-shadow: 0 12px 26px rgba(178,132,49,.16); }
.dossier-stamp{
  position:absolute; top:14px; right:14px; font-family: var(--mono); font-size:10px; letter-spacing:.1em;
  color: var(--gold-1); border:1px solid var(--gold-1); border-radius:99px; padding:3px 10px; transform: rotate(4deg);
}
.dossier-card h3{ font-family: var(--serif); font-size:17px; margin: 4px 24px 6px 0; }
.dossier-channel{ font-family: var(--mono); font-size:10.5px; letter-spacing:.05em; color: var(--muted); margin:0 0 10px; }
.dossier-card p:not(.dossier-channel){ font-size:14px; color: var(--ink-soft); margin:0 0 14px; }
.dossier-metric{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; border-top:1px dashed var(--rule); padding-top:10px; }
.dossier-metric strong{ color: var(--gold-1); }

/* ===================================================================
   S08 — ENVELOPE + CARTA LACRADA
   =================================================================== */
.envelope-wrap{ margin: 36px 0 10px; display:flex; flex-direction:column; align-items:center; }
.envelope{
  position:relative; width:100%; max-width:420px; height:190px;
  background: var(--card-bg); border:1px solid var(--rule); border-radius:10px;
  box-shadow: 0 16px 34px rgba(178,132,49,.16);
  overflow:hidden; cursor:pointer;
}
.envelope-flap{
  position:absolute; top:0; left:0; right:0; height:52%;
  background: linear-gradient(160deg, var(--bg-warm), var(--card-bg));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom:1px solid var(--rule);
  transform-origin: top center;
  transition: transform 650ms cubic-bezier(.5,0,.15,1), opacity 500ms ease 150ms;
  z-index:3;
}
.envelope.is-open .envelope-flap{ transform: scaleY(0.02) translateY(2px); opacity:0; }
.envelope-seal{
  position:absolute; top:30%; left:50%; width:44px; height:44px; border-radius:50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 35% 30%, #e0473f, var(--red-dark) 85%);
  color: var(--gold-3); display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow: 0 4px 10px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.3);
  z-index:5; transition: transform 420ms cubic-bezier(.34,1.56,.64,1), opacity 350ms ease;
}
.envelope.is-open .envelope-seal{ transform: translate(-50%,-50%) scale(0) rotate(90deg); opacity:0; }
.envelope-body-label{
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  font-family: var(--mono); font-size:11px; letter-spacing:.12em; color: var(--muted); text-transform:uppercase;
}
.envelope-hint{ margin:14px 0 0; font-family: var(--mono); font-size:10.5px; letter-spacing:.1em; color: var(--gold-1); text-transform:uppercase; text-align:center; }
.envelope.is-open ~ .envelope-hint{ opacity:0; height:0; margin:0; overflow:hidden; }

.envelope-letter-wrap{
  display:grid; grid-template-rows: 0fr; transition: grid-template-rows 650ms cubic-bezier(.16,.84,.44,1) 150ms;
  width:100%;
}
.envelope-letter-wrap.is-open{ grid-template-rows: 1fr; }
.envelope-letter-inner{
  overflow:hidden; min-height:0;
}
.envelope-letter-wrap .envelope-letter-inner > *{
  padding-top: 30px;
}
.letter-dateline{ font-family: var(--serif); font-style:italic; color: var(--gold-1); font-size:15px; margin:0 0 18px; text-align:center; }

/* ===================================================================
   S08b — ARCHIVE (conteúdo dentro da carta)
   =================================================================== */
.archive{ display:flex; flex-direction:column; gap:16px; margin: 30px 0; }
.archive-item{ display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--rule); }
.archive-month{ font-family: var(--mono); font-size:12px; letter-spacing:.1em; color: var(--gold-1); flex-shrink:0; width:44px; }
.archive-item p{ margin:0; color: var(--ink-soft); }
.big-number{ font-family: var(--serif); font-size: clamp(30px,5vw,44px); color: var(--gold-1); text-align:center; margin: 30px 0; font-weight:600; }
.big-number span{ display:block; font-family: var(--sans); font-size:14px; color: var(--muted); font-weight:400; margin-top:8px; }

/* ===================================================================
   S09 — SNOWBALL
   =================================================================== */
.snowball-stage{ margin: 30px 0; }
.snowball-svg{ width:100%; height:auto; }
#snowball{ transition: r 200ms linear; }
.calendar-strip{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top: 34px; padding-top:26px; border-top:1px solid var(--line); }
.calendar-tag{ font-family: var(--mono); font-size:11px; letter-spacing:.1em; color: var(--gold-2); border:1px solid var(--line); border-radius:99px; padding:5px 12px; }
.calendar-strip p{ margin:8px 0 0; width:100%; color: var(--copy); font-size:13.5px; }

/* ===================================================================
   S10 — PLANO DE AÇÃO
   =================================================================== */
.section--plan{ padding-bottom: 130px; }
.plan-head{ text-align:center; max-width:560px; margin:0 auto 60px; }
.plan-head .kicker, .plan-head .h2{ text-align:center; }
.plan-progress{ display:flex; align-items:center; gap:14px; margin-top:24px; justify-content:center; }
.plan-progress-bar{ width:180px; height:4px; border-radius:99px; background: rgba(213,174,102,.2); overflow:hidden; }
.plan-progress-fill{ height:100%; width:0%; background: var(--gold-gradient); transition: width var(--dur-m) var(--ease); }
#planCount{ font-family: var(--mono); font-size:11px; letter-spacing:.06em; color: var(--gold-2); }

.plan-steps{ display:flex; flex-direction:column; gap:16px; max-width: 760px; margin: 0 auto 60px; }
.plan-step{
  background: var(--panel); border:1px solid var(--line); border-radius:16px;
  transition: box-shadow var(--dur-s) var(--ease);
}
.plan-step.is-done{ box-shadow: 0 0 0 2px rgba(213,174,102,.5), 0 0 24px rgba(213,174,102,.18); }
.plan-step-head{
  width:100%; display:grid; grid-template-columns: 44px 30px 1fr 24px; gap:18px; align-items:center;
  padding:22px 26px; text-align:left; cursor:pointer;
}
.plan-num{ font-family: var(--mono); font-size:22px; color: var(--gold-2); opacity:.55; }
.plan-icon{ color: var(--gold-2); }
.plan-step-head h3{ font-family: var(--serif); font-size:18px; color: var(--gold-3); margin:0; }
.plan-step-toggle{ position:relative; width:16px; height:16px; justify-self:end; }
.plan-step-toggle::before, .plan-step-toggle::after{
  content:''; position:absolute; background: var(--gold-2); border-radius:2px; transition: transform 350ms var(--ease);
}
.plan-step-toggle::before{ top:7px; left:0; width:16px; height:2px; }
.plan-step-toggle::after{ top:0; left:7px; width:2px; height:16px; }
.plan-step-head[aria-expanded="true"] .plan-step-toggle::after{ transform: rotate(90deg) scaleY(0); }
.plan-body{
  display:grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease);
}
.plan-step-head[aria-expanded="true"] + .plan-body{ grid-template-rows: 1fr; }
.plan-body-inner{ overflow:hidden; min-height:0; padding: 0 26px; }
.plan-step-head[aria-expanded="true"] + .plan-body .plan-body-inner{ padding-bottom:24px; }
.plan-body p{ margin:0 0 10px; font-size:14.5px; color: var(--copy); line-height:1.65; }
.plan-label{ font-family: var(--mono); font-size:10px; letter-spacing:.1em; color: var(--gold-2); margin-right:6px; }

.checklist{ max-width:560px; margin:0 auto; background: var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px 30px; }
.checklist h3{ font-family: var(--serif); color: var(--gold-3); font-size:18px; margin:0 0 18px; text-align:center; }
.checklist li{ border-bottom:1px solid var(--line); }
.checklist li:last-child{ border-bottom:none; }
.checklist label{ display:flex; align-items:flex-start; gap:12px; padding:12px 2px; cursor:pointer; }
.checklist input[type="checkbox"]{
  appearance:none; width:18px; height:18px; border:1.4px solid var(--gold-2); border-radius:5px; flex-shrink:0; margin-top:1px;
  position:relative; transition: background var(--dur-s) var(--ease);
}
.checklist input[type="checkbox"]:checked{ background: var(--gold-2); }
.checklist input[type="checkbox"]:checked::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#1b0d07; }
.checklist span{ font-size:14.5px; color: var(--copy); }
.checklist input:checked ~ span{ color: var(--gold-3); text-decoration: line-through; text-decoration-color: rgba(213,174,102,.5); }

#confettiOverlay{ position:fixed; inset:0; z-index:200; pointer-events:none; display:flex; align-items:flex-start; justify-content:center; }
#confettiOverlay svg{ width:min(90vw, 500px) !important; height:auto !important; }

/* ===================================================================
   S11 — FECHAMENTO
   =================================================================== */
.video-frame{ position:relative; margin: 40px 0; padding: 18px; }
.video-label{ display:block; text-align:center; font-family: var(--mono); font-size:10px; letter-spacing:.16em; color: var(--gold-1); margin-bottom:14px; text-transform:uppercase; }
.video-frame-corners i{ position:absolute; width:22px; height:22px; opacity:0; }
.video-frame-corners i:nth-child(1){ top:0; left:0; border-top:2px solid var(--gold-1); border-left:2px solid var(--gold-1); }
.video-frame-corners i:nth-child(2){ top:0; right:0; border-top:2px solid var(--gold-1); border-right:2px solid var(--gold-1); }
.video-frame-corners i:nth-child(3){ bottom:0; left:0; border-bottom:2px solid var(--gold-1); border-left:2px solid var(--gold-1); }
.video-frame-corners i:nth-child(4){ bottom:0; right:0; border-bottom:2px solid var(--gold-1); border-right:2px solid var(--gold-1); }
.video-frame.is-visible .video-frame-corners i{ animation: cornerIn .4s var(--ease) forwards; }
.video-frame.is-visible .video-frame-corners i:nth-child(2){ animation-delay:.1s; }
.video-frame.is-visible .video-frame-corners i:nth-child(3){ animation-delay:.2s; }
.video-frame.is-visible .video-frame-corners i:nth-child(4){ animation-delay:.3s; }
@keyframes cornerIn{ from{ opacity:0; } to{ opacity:1; } }
.video-embed{ position:relative; padding-top:56.25%; border-radius:8px; overflow:hidden; background:#000; opacity:0; transition: opacity var(--dur-m) var(--ease) .5s; }
.video-frame.is-visible .video-embed{ opacity:1; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.ps-note{ max-width:620px; margin: 40px auto 0; padding-top:24px; border-top:1px dashed var(--rule); }
.ps-tag{ font-family: var(--mono); font-size:10px; letter-spacing:.1em; color: var(--muted); border:1px solid var(--rule); border-radius:99px; padding:2px 9px; margin-right:8px; }
.ps-note p{ display:inline; font-size:13.5px; color: var(--muted); }

.final-sigil{ display:flex; justify-content:center; margin: 60px 0 10px; }
.final-sigil span{ width:10px; height:10px; border:1px solid var(--gold-1); transform:rotate(45deg); position:relative; }
.final-sigil span::after{ content:''; position:absolute; inset:3px; background: var(--gold-2); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 780px){
  .section{ padding: 80px 0; }
  .routes{ grid-template-columns: 1fr; }
  .path-grid{ grid-template-columns: 1fr; }
  .dossier-grid{ grid-template-columns: 1fr 1fr; }
  .path-card{ transform:none !important; }
}
@media (max-width: 520px){
  .dossier-grid{ grid-template-columns: 1fr; }
  .ficha-tab span, .ficha-tab{ font-size:12px; }
  .ficha-tab{ padding:14px 6px; }
  .plan-step-head{ grid-template-columns: 28px 26px 1fr 18px; padding:18px 18px; gap:12px; }
  .plan-step-head h3{ font-size:15.5px; }
  .plan-body-inner{ padding: 0 18px; }
  .plan-step-head[aria-expanded="true"] + .plan-body .plan-body-inner{ padding-bottom:18px; }
  .path-slider-label{ font-size:9.5px; }
  .envelope{ height:170px; }
}