/* Imperium Black — "A Coroação". Tokens em DESIGN.md */
:root {
  --void: #050505; --ink: #0D0B09; --line: #2A2318;
  --gold: #F7731F; --gold-hot: #FF9149; --gold-deep: #C24A06;
  --cream: #ECE4D3; --muted: #9A8E78;
  --f-display: 'Cinzel', 'Times New Roman', serif;
  --f-acento: 'Kaushan Script', 'Brush Script MT', cursive;
  --f-texto: 'Manrope', system-ui, sans-serif;
  --m: max(20px, 6vw);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { scroll-behavior: auto; }
body { background: var(--void); color: var(--cream); font: 400 17px/1.65 var(--f-texto); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
em { font-family: var(--f-acento); font-style: normal; font-weight: 400; color: var(--gold-hot); letter-spacing: .02em; text-transform: uppercase; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 4px; border-radius: 4px; }

/* ---------- tipografia base ---------- */
.rotulo { font: 600 12px/1 var(--f-display); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 14px; }
.rotulo::before { content: ''; width: 42px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.romano { font: 600 13px/1 var(--f-display); letter-spacing: .12em; color: var(--gold-hot); }
.secao__titulo, .ato__titulo { font: 600 clamp(34px, 5vw, 76px)/1.1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.secao__titulo em, .ato__titulo em { font-size: 1em; }

/* ---------- botões ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border-radius: 2px;
  font: 600 14px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; transition: translate .4s var(--ease), box-shadow .4s var(--ease); }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); translate: -120% 0; transition: translate .8s var(--ease); }
.btn:hover::after { translate: 120% 0; }
.btn:hover { translate: 0 -2px; }
.btn--ouro { background: linear-gradient(135deg, var(--gold-hot), var(--gold) 45%, var(--gold-deep)); color: #0b0906; box-shadow: 0 10px 40px -12px rgba(247,115,31,.6); }
.btn--contorno { border: 1px solid rgba(247,115,31,.6); color: var(--gold-hot); }
.btn--contorno:hover { background: rgba(247,115,31,.08); }
.btn--texto { color: var(--cream); padding-inline: 8px; }
.btn--texto::after { display: none; }
.link-ouro { display: inline-block; margin-top: 26px; color: var(--gold-hot); font-weight: 600; letter-spacing: .04em; border-bottom: 1px solid rgba(247,115,31,.4); padding-bottom: 4px; transition: border-color .3s, color .3s; }
.link-ouro:hover { color: #fff; border-color: var(--gold-hot); }

/* ---------- abertura ---------- */
.abertura { position: fixed; inset: 0; z-index: 100; background: var(--void); display: grid; place-items: center; pointer-events: none; }
.abertura__anel { position: absolute; width: min(46vw, 260px); }
.abertura__anel circle { fill: none; stroke: var(--gold); stroke-width: .8; stroke-dasharray: 340; stroke-dashoffset: 340; transform: rotate(-90deg); transform-origin: center; }
.abertura__logo { width: min(40vw, 228px); mix-blend-mode: lighten; opacity: 0; }
.sem-js .abertura, .reduz .abertura { display: none; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--m);
  background: linear-gradient(180deg, rgba(5,5,5,.85), rgba(5,5,5,0)); transition: background .4s; }
.nav.solida { background: rgba(5,5,5,.88); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(247,115,31,.14); }
.nav__marca { display: flex; align-items: center; gap: 12px; font: 600 15px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; }
.nav__marca img { width: 44px; mix-blend-mode: lighten; }
.nav__marca b { color: var(--gold); font-weight: 600; margin-left: .35em; }
.nav__links { display: flex; gap: 34px; font: 600 12px/1 var(--f-display); letter-spacing: .24em; text-transform: uppercase; }
.nav__links a { position: relative; padding: 6px 0; color: rgba(236,228,211,.82); transition: color .3s; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); scale: 0 1; transform-origin: left; transition: scale .4s var(--ease); }
.nav__links a:hover { color: var(--gold-hot); } .nav__links a:hover::after { scale: 1 1; }
.nav__zap { padding: 12px 22px; font-size: 12px; }

/* ---------- cenas com vídeo dirigido pela rolagem ---------- */
.cena { position: relative; }
.cena__palco { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.cena__canvas, .cena__fallback, .cena__fallback img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cena__canvas { z-index: 1; opacity: 0; }
.cena.pronta .cena__canvas { opacity: 1; }
.cena.pronta .cena__fallback { visibility: hidden; }
.cena__fallback { z-index: 0; }
.cena__veu { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.55) 34%, rgba(5,5,5,0) 62%), linear-gradient(0deg, rgba(5,5,5,.9), rgba(5,5,5,0) 38%); }
.cena__veu--lado { background: linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.6) 36%, rgba(5,5,5,0) 60%); }
.cena--direita .cena__veu--lado { background: linear-gradient(270deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.6) 36%, rgba(5,5,5,0) 60%); }
.cena__veu--baixo { background: linear-gradient(0deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.7) 34%, rgba(5,5,5,0) 62%); }

/* hero */
.hero__texto { position: absolute; z-index: 3; left: var(--m); bottom: 13vh; max-width: min(760px, 88vw); }
.hero__titulo { font: 600 clamp(44px, 7.6vw, 128px)/1.08 var(--f-display); letter-spacing: .015em; text-transform: uppercase; margin: 24px 0 22px; }
.hero__titulo .linha { display: block; }
.hero__titulo em { font-size: 1em; }
.hero__sub { max-width: 520px; color: rgba(236,228,211,.82); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__final { position: absolute; z-index: 3; right: var(--m); bottom: 16vh; text-align: right; font: 600 clamp(26px, 3.4vw, 54px)/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .02em; opacity: 0;
  text-shadow: 0 6px 40px rgba(0,0,0,.8); }
.hero__rolar { position: absolute; z-index: 3; left: 50%; bottom: 26px; translate: -50% 0; display: grid; justify-items: center; gap: 10px; font: 600 10px/1 var(--f-display); letter-spacing: .4em; text-transform: uppercase; color: var(--muted); }
.hero__rolar span { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: gota 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes gota { 0% { scale: 1 0; } 50% { scale: 1 1; } 100% { scale: 1 1; opacity: 0; } }

/* manifesto */
.manifesto { padding: 26vh var(--m) 22vh; display: grid; justify-items: center; text-align: center; gap: 64px;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(247,115,31,.08), transparent 70%); }
.manifesto__frase { max-width: 1100px; font: 600 clamp(28px, 4.2vw, 62px)/1.22 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.manifesto__frase em { display: block; margin-top: .3em; font-size: 1em; }
.pilares { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 48px; font: 600 13px/1 var(--f-display); letter-spacing: .38em; text-transform: uppercase; color: var(--muted); }
.pilares .romano { margin-right: 14px; color: var(--gold); }

/* atos */
.ato { position: absolute; z-index: 3; left: var(--m); top: 50%; translate: 0 -50%; max-width: min(520px, 86vw); }
.cena--direita .ato { left: auto; right: var(--m); }
.ato__titulo { margin: 22px 0 22px; }
.ato__texto { color: rgba(236,228,211,.82); }

/* serviços */
.servicos { padding: 22vh var(--m) 18vh; }
.servicos__topo { display: grid; gap: 24px; margin-bottom: 9vh; max-width: 900px; }
.cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; }
.cartao { display: grid; gap: 10px; }
.cartao figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(247,115,31,.22); margin-bottom: 14px; }
.cartao figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,5,5,.55), transparent 45%); }
.cartao img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.cartao:hover img { scale: 1.05; }
.cartao h3 { font: 600 24px/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.cartao p { color: var(--muted); font-size: 16px; }
.cartao__cta { margin-top: 4px; color: var(--gold-hot); font-weight: 600; font-size: 14px; letter-spacing: .06em; }
.cartao:hover .cartao__cta { color: #fff; }
.bancada { margin-top: 16vh; display: grid; grid-template-columns: 1.3fr 1fr; gap: 6vw; align-items: center; }
.bancada img { border: 1px solid rgba(247,115,31,.2); }
.bancada__texto { display: grid; gap: 18px; }
.bancada__frase { font: 600 clamp(28px, 3.2vw, 48px)/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.bancada__apoio { color: rgba(236,228,211,.82); }
.produtos { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.produtos li { border: 1px solid rgba(247,115,31,.5); color: var(--gold-hot); padding: 8px 14px; font: 600 12px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; }
.bancada__uso { grid-column: 1 / -1; margin-top: 4vh; }

/* coroa */
.cena--coroa .cena__palco { background: #000; }
.cena--coroa .cena__fallback { object-fit: contain; padding: 14vh 0 34vh; mix-blend-mode: lighten; }
.coroa__texto { position: absolute; z-index: 3; left: 0; right: 0; bottom: 9vh; text-align: center; display: grid; justify-items: center; gap: 18px; padding: 0 var(--m); }
.coroa__texto .rotulo::before { display: none; }

/* visite */
.visite__cartao { position: absolute; z-index: 3; left: var(--m); bottom: 8vh; max-width: 640px; }
.dados { display: grid; grid-template-columns: repeat(3, auto); gap: 18px 40px; margin-top: 26px; }
.dados dt { font: 600 11px/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.dados dd { font-size: 15px; color: rgba(236,228,211,.88); }
.dados small { color: var(--muted); }
.dados a { color: var(--gold-hot); font-weight: 600; }

/* rodapé */
.rodape { padding: 14vh var(--m) 34px; border-top: 1px solid var(--line); display: grid; gap: 44px; background: var(--ink); }
.rodape__marca { display: flex; align-items: center; gap: 22px; }
.rodape__marca img { width: 92px; mix-blend-mode: lighten; }
.rodape__marca p { font: 600 clamp(22px, 2.6vw, 38px)/1.2 var(--f-display); text-transform: uppercase; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 14px 40px; color: var(--muted); }
.rodape__links a:hover { color: var(--gold-hot); }
.rodape__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.assinatura a { transition: opacity .3s; }
.assinatura a:hover { opacity: .8; text-decoration: underline; text-underline-offset: 4px; }
.assinatura b { font-weight: 600; color: var(--gold); }
.assinatura span { color: var(--gold); }

/* flutuantes */
.zap-flutuante { position: fixed; z-index: 40; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-hot), var(--gold) 50%, var(--gold-deep)); box-shadow: 0 12px 30px -8px rgba(247,115,31,.7); transition: translate .4s var(--ease); }
.zap-flutuante:hover { translate: 0 -3px; }
.zap-flutuante svg { width: 28px; fill: #0b0906; }
.anel-progresso { position: fixed; z-index: 39; right: 25px; bottom: 25px; width: 52px; pointer-events: none; transform: rotate(-90deg); }
.anel-progresso circle { fill: none; stroke-width: 1.4; }
.anel-progresso .trilho { stroke: rgba(247,115,31,.18); }
.anel-progresso .fio { stroke: var(--gold-hot); stroke-dasharray: 163.4; stroke-dashoffset: 163.4; }
.anel-progresso { right: 19px; bottom: 19px; width: 64px; }

/* mapa */
.local { display: grid; grid-template-columns: 1fr 1.15fr; gap: 6vw; align-items: center; padding: 16vh var(--m); background: var(--void); }
.local__txt { display: grid; gap: 22px; justify-items: start; }
.local__end { font-size: 20px; color: rgba(236,228,211,.9); max-width: 30ch; }
.mapa { position: relative; display: block; aspect-ratio: 4/3; width: 100%; overflow: hidden; border: 1px solid rgba(247,115,31,.45); border-radius: 22px; background: var(--ink); box-shadow: 0 30px 80px -30px rgba(247,115,31,.35); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; filter: grayscale(.2) contrast(1.05); }
.mapa::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(5,5,5,.7), transparent 45%); pointer-events: none; }
.mapa__btn { position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 14px 24px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-hot), var(--gold) 45%, var(--gold-deep)); color: #0b0906; font-weight: 700; font-size: 15px; box-shadow: 0 14px 34px -12px rgba(247,115,31,.8); transition: transform .4s var(--ease); }
.mapa__btn svg { width: 20px; fill: currentColor; }
.mapa:hover .mapa__btn { transform: translateX(-50%) translateY(-3px); }

/* computador: dados maiores */
@media (min-width: 761px) {
  .visite__cartao { max-width: 1040px; }
  .dados dd, .dados dt { text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 2px #000; }
  .dados { gap: 22px 52px; margin-top: 30px; }
  .dados dt { font-size: 14px; margin-bottom: 12px; }
  .dados dd { font-size: 21px; line-height: 1.5; }
  .dados small { font-size: 18px; color: var(--gold-hot); }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { padding: 14px 18px; }
  .nav__links { display: none; }
  .nav__marca span { display: none; }
  .nav__zap { padding: 11px 18px; }
  .cena__veu { background: linear-gradient(0deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.75) 40%, rgba(5,5,5,0) 70%); }
  .cena__veu--lado, .cena--direita .cena__veu--lado { background: linear-gradient(0deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.8) 45%, rgba(5,5,5,0) 72%); }
  .cena--hero .cena__veu { background: linear-gradient(180deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.35) 30%, rgba(5,5,5,0) 44%), linear-gradient(0deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.82) 46%, rgba(5,5,5,0) 74%); }
  .hero__texto { bottom: 10vh; }
  .hero__final { left: 18px; right: 18px; text-align: left; top: 16vh; bottom: auto; }
  .hero__rolar { display: none; }
  .ato, .cena--direita .ato { left: 18px; right: 18px; top: auto; bottom: 7vh; translate: none; }
  .cartoes { grid-template-columns: 1fr; gap: 48px; }
  .bancada { grid-template-columns: 1fr; }
  .dados { grid-template-columns: 1fr; gap: 16px; }
  .visite__cartao { left: 18px; right: 18px; bottom: 5vh; }
  .rodape__base { flex-direction: column; text-align: center; gap: 16px; }
  .rodape__marca { flex-direction: column; text-align: center; }
  .cena--coroa .cena__fallback { padding: 16vh 8vw 40vh; }
  .visite__cartao .ato__titulo { font-size: 30px; margin: 14px 0 6px; }
  .visite__cartao .dados { margin-top: 12px; gap: 10px; }
  .visite__cartao .dados dt { margin-bottom: 4px; }
  .visite__cartao .dados dd { font-size: 14px; line-height: 1.45; }
  .visite__cartao .hero__ctas { margin-top: 18px; }
  .visite__cartao { bottom: 3vh; }
  .local { grid-template-columns: 1fr; gap: 34px; padding: 12vh 18px; }
  .local__end { font-size: 17px; }
  .mapa { aspect-ratio: 4/4.4; }
  .mapa__btn { font-size: 14px; padding: 12px 18px; }
}
@media (min-width: 761px) and (max-width: 1100px) { .cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hero__rolar span { animation: none; } .btn, .cartao img { transition: none; } }
.hero__texto .rotulo { text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 2px #000; }
@media (max-width: 760px) { .hero__texto .rotulo { color: var(--gold-hot); letter-spacing: .24em; } }

.selo { max-width: 640px; color: rgba(236,228,211,.85); border-left: 2px solid var(--gold); padding-left: 18px; }
.selo b { color: var(--gold-hot); font-weight: 600; }
.cartoes { display: flex; flex-wrap: wrap; justify-content: center; }
.cartao { width: calc((100% - 64px) / 3); }
@media (min-width: 761px) and (max-width: 1100px) { .cartao { width: calc((100% - 32px) / 2); } }
@media (max-width: 760px) { .cartao { width: 100%; } }

.bancada img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }