:root{--azul:#2F6BFF;--fundo:#03060F;--noite:#050816;--ciano:#22D3EE;--gelo:#EEF3FF;--nevoa:#C6D4FF;--mut:#A9B5D6;--linha:#1B2752}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:manipulation;-webkit-text-size-adjust:100%}
a,button,summary{-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 70% at 50% 90%,#0B2A6B,var(--fundo) 70%) var(--fundo);color:var(--gelo);font-family:'Instrument Sans',system-ui,sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ciano);outline-offset:3px}
.wrap{position:relative;z-index:1;width:min(1160px,100%);margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.disp{font-family:'Sora',system-ui,sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.05}
#espaco{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;display:block;opacity:0;transition:opacity 1.1s ease}
#espaco.on{opacity:1}
main,.pe{position:relative;z-index:1}

.marca{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.marca img{width:36px;height:36px}
.btn{display:inline-block;background:linear-gradient(135deg,#2F6BFF,#16A5F0);box-shadow:0 0 0 1px rgba(165,238,255,.35) inset,0 12px 44px -10px rgba(47,107,255,.95);color:#fff;font-weight:700;font-size:19px;text-align:center;text-decoration:none;padding:19px 34px;border-radius:999px;transition:transform .15s}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn:active{transform:scale(.98)}
.btn-mini{font-size:16px;padding:10px 20px}

/* Topo */
.topo{position:relative;padding:20px 0 56vh;overflow:hidden}
.barra{display:flex;align-items:center;justify-content:space-between}
.topo-grid{display:grid;gap:48px;margin-top:52px}
h1{font-size:clamp(32px,12.2vw,72px);line-height:1.08;color:var(--gelo);text-shadow:0 2px 18px rgba(3,6,15,.95),0 0 60px rgba(34,211,238,.4)}
h1 span{display:block;white-space:nowrap}
.sub{font-size:clamp(18px,5.4vw,21px);line-height:1.4;font-weight:500;margin:22px 0 28px;max-width:30em}

/* Prints: arrastar para o lado */
.prints{min-width:0}
.prints h2,h1,.sub{text-shadow:0 2px 18px rgba(3,6,15,.95),0 0 44px rgba(3,6,15,.9)}
.prints h2{font-size:clamp(24px,6.6vw,34px);line-height:1.15;text-align:center;margin-bottom:20px;text-wrap:balance}
.trilho{--s:min(64vw,270px);position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 -20px}
.trilho::-webkit-scrollbar{display:none}
.trilho img{flex:0 0 var(--s);width:var(--s);height:auto;scroll-snap-align:center;scroll-snap-stop:always;border-radius:20px;box-shadow:0 0 0 1px rgba(165,238,255,.16),0 18px 40px -18px rgba(5,8,22,.7);opacity:.5;transition:opacity .35s ease}
.trilho img.ativa{opacity:1}
.trilho.salto img{transition:none}
.ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px;font-size:16px;font-weight:600}
.ctrl button{width:46px;height:46px;border:1px solid rgba(165,238,255,.4);border-radius:50%;background:rgba(5,10,30,.7);color:#fff;font-size:20px;cursor:pointer}
.ilus{font-size:13px;color:#A9B5D6;text-align:center;margin-top:12px}

/* Noite: curva de planeta subindo sobre o azul */
.dentro{position:relative;padding:84px 0 88px;background:linear-gradient(transparent,rgba(3,6,15,.78) 110px,rgba(3,6,15,.78) calc(100% - 110px),transparent)}
.dentro h2{font-size:clamp(40px,9vw,64px)}
.itens{margin-top:16px}
.item{padding:24px 0;border-bottom:1px solid var(--linha)}
.item h3{font-size:clamp(32px,7.4vw,44px);color:var(--ciano)}
.item p{font-size:19px;line-height:1.4;color:#C5CFEA;margin-top:8px}
.call{font-size:17px;color:var(--mut);margin-top:24px}

.perfil{display:grid;gap:52px;margin-top:80px}
.perfil h2{font-size:clamp(34px,7.6vw,44px)}
.perfil ul{list-style:none;margin-top:20px;display:grid;gap:12px}
.perfil li{position:relative;padding-left:30px;font-size:19px;line-height:1.35}
.perfil li:before{position:absolute;left:0;top:0;font-weight:700}
.sim li:before{content:"✓";color:var(--ciano)}
.nao li{color:var(--mut)}
.nao li:before{content:"✕"}

/* Ingresso */
.fim{position:relative;padding:72px 0}
.ticket{--corte:50%;--ax:0;--ay:var(--corte);--bx:100%;--by:var(--corte);position:relative;overflow:hidden;color:var(--noite);background:var(--gelo);border-radius:28px;
 -webkit-mask:radial-gradient(circle 20px at var(--ax) var(--ay),#0000 97%,#000),radial-gradient(circle 20px at var(--bx) var(--by),#0000 97%,#000);-webkit-mask-composite:source-in;mask:radial-gradient(circle 20px at var(--ax) var(--ay),#0000 97%,#000),radial-gradient(circle 20px at var(--bx) var(--by),#0000 97%,#000);mask-composite:intersect}
.corpo{padding:34px 26px 30px}
.ticket h2{font-size:clamp(46px,12.4vw,76px);line-height:1;margin-top:28px}
.ticket ul{list-style:none;margin-top:22px;display:grid;gap:4px;font-size:19px;font-weight:500}
.canhoto{position:relative;padding:28px 26px 32px;text-align:center}
.canhoto:before{content:"";position:absolute;left:26px;right:26px;top:0;border-top:3px dashed #AFBEEA}
.preco{font-size:64px;line-height:1}
.preco small{font-size:.42em;letter-spacing:0}
.canhoto .btn{display:block;margin-top:20px}
.g{font-size:15px;color:#3C466B;margin-top:14px}

/* Perguntas */
.faq{position:relative;padding:0 0 72px}
.faq .wrap{background:rgba(3,6,15,.72);border-radius:28px;padding-top:32px;padding-bottom:20px}
.faq h2{font-size:clamp(40px,9vw,64px);margin-bottom:16px}
details{border-bottom:1px solid rgba(165,238,255,.22)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-size:20px;font-weight:600}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:26px;line-height:1}
details[open] summary:after{content:"–"}
details p{padding-bottom:20px;color:var(--gelo);max-width:40em}

.pe{background:rgba(3,6,15,.9);color:var(--mut);font-size:14px;padding:26px 0 max(26px,env(safe-area-inset-bottom))}
.pe .wrap{display:flex;flex-direction:column;gap:6px}

/* Página de obrigado */
.obrigado{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-start;overflow:hidden;padding:48px 0}
.obrigado h1{font-size:clamp(42px,11vw,88px);margin-top:44px}
.passos{list-style:none;margin-top:28px;display:grid;gap:6px;font-size:18px;font-weight:500}

/* Celular: espaços mais curtos e títulos proporcionais à tela */
@media (max-width:699px){
  body{font-size:17px}
  .topo{padding:16px 0 72px}
  .topo-grid{gap:40px;margin-top:36px}
  h1{line-height:1.1}
  .sub{margin:16px 0 22px}
  .prints h2{margin-bottom:16px}
  .ctrl{margin-top:12px}
  .ilus{margin-top:8px}
  .dentro{padding:48px 0 44px}
  .item{padding:18px 0}
  .item h3{font-size:clamp(25px,7vw,30px)}
  .item p,.perfil li{font-size:17px}
  .dentro h2,.faq h2{font-size:clamp(30px,8.4vw,36px)}
  .call{font-size:16px;margin-top:16px}
  .perfil{gap:36px;margin-top:44px}
  .perfil h2{font-size:clamp(26px,7vw,30px)}
  .perfil ul{margin-top:14px;gap:10px}
  .perfil li{padding-left:26px}
  .fim{padding:28px 0 36px}
  .corpo{padding:28px 22px 24px}
  .ticket h2{font-size:clamp(32px,9.4vw,38px);margin-top:20px}
  .ticket ul{font-size:17px;margin-top:14px}
  .canhoto{padding:22px 22px 26px}
  .canhoto:before{left:22px;right:22px}
  .preco{font-size:56px}
  .canhoto .btn{margin-top:14px}
  .faq{padding:0 16px 44px}
  .faq .wrap{padding:24px 18px 8px;border-radius:24px}
  .faq h2{margin-bottom:8px}
  summary{font-size:18px;padding:15px 0}
  details p{font-size:16px;padding-bottom:16px}
  .pe{padding:20px 0 max(20px,env(safe-area-inset-bottom));text-align:center}
  .pe .wrap{align-items:center}

  /* Tudo no eixo do meio; só o cabeçalho e as perguntas seguem alinhados às bordas */
  h1{font-size:clamp(28px,9.3vw,60px)}
  h1 .l2{display:inline}
  .topo-grid>div:first-child,.obrigado .wrap{text-align:center}
  .sub{margin-left:auto;margin-right:auto}
  .dentro h2,.faq h2,.item,.call,.perfil>div,.corpo{text-align:center}
  .perfil ul,.corpo ul{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
  .perfil ul{text-align:left}
  .corpo .marca,.obrigado .marca{justify-content:center}
  .passos{width:fit-content;margin-left:auto;margin-right:auto;text-align:left}
}
@media (max-width:519px){
  .btn-topo{display:block}
}
@media (min-width:700px){
  h1 .l2{display:inline}
  .wrap{padding:0 max(40px,env(safe-area-inset-right)) 0 max(40px,env(safe-area-inset-left))}
  .ticket{border-radius:36px}
  .corpo{padding:48px}
  .canhoto{padding:36px 48px 40px}
  .canhoto:before{left:48px;right:48px}
  .perfil{grid-template-columns:1fr 1fr}
  .pe .wrap{flex-direction:row;justify-content:space-between;gap:24px}
  .trilho{margin:0 -40px}
}
@media (min-width:1000px){
  body{font-size:19px}
  .topo{padding:28px 0 46vh}
  .marca{font-size:20px}
  .marca img{width:44px;height:44px}
  .topo-grid{grid-template-columns:1.3fr .7fr;gap:64px;align-items:center;margin-top:76px}
  h1{font-size:min(5.6vw,82px)}
  .sub{font-size:clamp(20px,1.7vw,24px);margin:28px 0 34px}
  .prints h2{font-size:clamp(22px,2vw,28px)}
  .trilho{margin:0}
  .btn{font-size:20px;padding:21px 38px}
  .btn-mini{font-size:16px;padding:10px 22px}
  .dentro{padding:130px 0}
  .itens{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:36px}
  .item{border-bottom:0;border-top:1px solid var(--linha)}
  .call{margin-top:12px}
  .perfil{margin-top:100px;gap:80px}
  .fim{padding:110px 0}
  .ticket{--ax:var(--corte);--ay:0;--bx:var(--corte);--by:100%;display:grid;grid-template-columns:1.5fr 1fr}
  .corpo{padding:60px}
  .canhoto{display:flex;flex-direction:column;justify-content:center;padding:48px 44px}
  .canhoto:before{left:0;right:auto;top:32px;bottom:32px;border-top:0;border-left:3px dashed #AFBEEA}
    .preco{font-size:80px}
  .faq{padding-bottom:110px}
  .faq .wrap{width:min(860px,100%)}
}
@media (min-width:1700px){
  .wrap{width:min(1440px,100%)}
  body{font-size:21px}
  h1{font-size:100px}
  .topo-grid{grid-template-columns:1.35fr .65fr}
  .item p,.perfil li{font-size:22px}
}
/* Celular deitado: mantém o carrossel inteiro na tela */
@media (max-height:520px) and (min-width:560px) and (max-width:999px){
  .trilho{--s:200px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.trilho img,#espaco{transition:none}
}