/* ==========================================================================
   GTAWebTax — efeitos de rolagem (teste com o motor scrollcraft)
   Só acrescenta: o visual do site continua vindo de site.css.
   ========================================================================== */
:root {
    /* o motor usa estes tokens; ficam na paleta da marca */
    --sc-canvas: #f5f8fc; --sc-surface: #ffffff;
    --sc-ink: #0f172a; --sc-ink-soft: #5b6b82;
    --sc-accent: #22d3ee; --sc-accent-ink: #061325;
    --sc-font-display: 'Poppins', 'Inter', sans-serif;
    --sc-font-text: 'Inter', system-ui, sans-serif;
}
/* o motor define fundo/fonte do body; o site manda */
body { background: var(--fundo); color: var(--texto); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; letter-spacing: normal; }
[data-sc-progress] { display: none; } /* o site já tem a barra de progresso dele */

/* ------------------------------------------------------------ hero em camadas */
.hero-camada { position: absolute; inset: -80px 0; pointer-events: none; }
.hero-camada #particulas { pointer-events: auto; }
.hero-camada--frente { will-change: transform; }

/* ------------------------------------------------------------ a virada (pin) */
.virada { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%); color: #fff; }
.virada-palco {
    height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 80px);
    align-items: center; padding: calc(var(--topo) + 20px) max(20px, calc((100vw - 1200px) / 2)) 40px; overflow: hidden;
}
.virada-texto { position: relative; min-height: 9em; }
.virada-linha {
    position: absolute; inset: 0 0 auto 0; margin: 0; font: 600 clamp(26px, 3.6vw, 46px)/1.15 'Poppins', sans-serif; letter-spacing: -.02em;
    max-width: 18ch; text-wrap: balance;
}
.virada-linha--fecho { color: var(--ciano); }

/* ---------- profundidade 3D: tudo nasce no fundo e vem para a frente com a rolagem (--sc-p do motor) */
.virada-palco { perspective: 1000px; perspective-origin: 50% 45%; }
.virada-tributos, .virada-grupo, .virada-texto { transform-style: preserve-3d; }
.virada-tributos { position: relative; z-index: 1; display: grid; gap: 28px; }
.virada-texto { z-index: 1; }
.virada-grupo { display: flex; flex-wrap: wrap; gap: 12px; }
.virada-grupo span {
    position: relative; display: inline-block; font: 700 clamp(16px, 1.8vw, 22px) 'Poppins', sans-serif; padding: 12px 20px; border-radius: 14px;
    background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -30px rgba(0,0,0,.8);
}
/* chão em perspectiva que corre na direção de quem lê */
.virada-chao {
    position: absolute; left: -50%; right: -50%; bottom: -10%; height: 90%; pointer-events: none;
    background-image: linear-gradient(rgba(34,211,238,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.16) 1px, transparent 1px);
    background-size: 80px 80px; background-position: 0 calc(var(--sc-p, 0) * 1600px);
    transform: rotateX(78deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 75%); mask-image: linear-gradient(to top, #000 10%, transparent 75%);
}
@media (prefers-reduced-motion: no-preference) {
    /* os cinco atuais: vêm do fundo, são riscados e passam voando pela câmera */
    .virada-grupo--sai span {
        --e: clamp(0, (var(--sc-p, 0) + .12 - var(--i) * .03) * 6, 1);        /* chegada */
        --t: clamp(0, (var(--sc-p, 0) - .14 - var(--i) * .035) * 5, 1);       /* risco */
        --f: clamp(0, (var(--sc-p, 0) - .3 - var(--i) * .03) * 4, 1);         /* saída pela frente */
        transform: translate3d(0, 0, calc((1 - var(--e)) * -1200px + var(--f) * 900px)) rotateX(calc((1 - var(--e)) * 30deg));
        opacity: calc(var(--e) * (1 - var(--f)) * (1 - var(--t) * .3));
        filter: blur(calc((1 - var(--e)) * 6px + var(--f) * 8px));
    }
    /* os novos: nascem lá no fundo e chegam à frente, um de cada vez */
    .virada-grupo--entra span {
        --t: clamp(0, (var(--sc-p, 0) - .2 - var(--i) * .05) * 5, 1);
        transform: translate3d(0, calc((1 - var(--t)) * -40px), calc((1 - var(--t)) * -1600px)) rotateY(calc((1 - var(--t)) * -25deg));
        opacity: var(--t); filter: blur(calc((1 - var(--t)) * 10px));
        background: rgba(34,211,238,calc(.04 + var(--t) * .12)); box-shadow: inset 0 0 0 1px rgba(34,211,238,calc(.15 + var(--t) * .45)), 0 30px 60px -30px rgba(34,211,238,.5);
    }
    /* as frases: cada uma vem do fundo e, ao sair, passa pela câmera */
    .virada-linha > span {
        --e: clamp(0, (var(--sc-p, 0) - var(--a)) / .07, 1);
        --s: clamp(0, (var(--sc-p, 0) - var(--b) + .1) / .1, 1);
        display: block; transform-origin: 0 50%;
        transform: translate3d(0, 0, calc((1 - var(--e)) * -700px + var(--s) * 420px)) rotateX(calc((1 - var(--e)) * 14deg));
        filter: blur(calc((1 - var(--e)) * 4px + var(--s) * 5px));
    }
    .virada-linha { transform-style: preserve-3d; }
}
.virada-grupo--sai span::after {
    content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; border-radius: 2px; background: #f87171;
    transform: scaleX(var(--t, 0)); transform-origin: left;
}

/* ------------------------------------------------------------ serviços (pan) */
.servicos-act { background: #fff; }
.servicos-palco { height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: var(--topo); }
.servicos-trilho { gap: 56px; align-items: stretch; padding: 0 max(20px, calc((100vw - 1200px) / 2)); }
.servicos-trilho > * { flex: 0 0 auto; }
.servicos-lead { width: min(420px, 82vw); align-self: center; padding-right: 20px; }
.servicos-lead h2 { font-size: clamp(28px, 3.4vw, 44px); }
.servicos-lead p { color: var(--texto-suave); font-size: 17px; }
.servicos-trilho .servico { width: clamp(280px, 26vw, 340px); max-height: calc(100svh - var(--topo) - 60px); }
.servicos-trilho .servico.destaque-reforma { width: clamp(300px, 38vw, 500px); }
.servicos-fim { width: min(360px, 82vw); align-self: center; padding-left: 10px; }
.servicos-fim p { font: 600 20px/1.35 'Poppins', sans-serif; margin-bottom: 20px; }
/* ---------- serviços em 3D: o título vem do fundo quando a seção entra; os cartões giram como um carrossel
   (--entrada e --d/--ad são escritos por site-scroll.js) */
.servicos-palco { perspective: 1300px; }
.servicos-trilho { transform-style: preserve-3d; position: relative; }
@media (prefers-reduced-motion: no-preference) {
    .servicos-lead {
        transform: translate3d(0, 0, calc((1 - var(--entrada, 1)) * -1100px)) rotateY(calc((1 - var(--entrada, 1)) * 28deg));
        opacity: calc(.15 + var(--entrada, 1) * .85); filter: blur(calc((1 - var(--entrada, 1)) * 8px));
    }
    .servicos-trilho .servico, .servicos-fim {
        transform: translate3d(0, 0, calc(var(--ad, 0) * -300px + (1 - var(--entrada, 1)) * -900px)) rotateY(calc(var(--d, 0) * -28deg)) !important;
        opacity: calc(1 - var(--ad, 0) * .5);
        transition: box-shadow .35s, border-color .35s;
    }
}
@media (max-width: 640px) {
    .servicos-trilho { align-items: center; }
    .servicos-trilho .servico, .servicos-trilho .servico.destaque-reforma { width: 82vw; }
    .servicos-trilho .servico p { font-size: 14px; }
}

/* ------------------------------------------------------------ linha do tempo (pin) */
.linha-act { position: relative; background: linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 100%); color: #fff; }
.linha-act .cabecalho-secao p { color: rgba(255,255,255,.7); }
.linha-palco { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--topo) + 16px) 0 24px; }
.linha-palco > .container { width: min(1200px, 100% - 40px); }
/* sem fixar (tela pequena): volta a ser uma seção comum */
.linha-act:not([data-sc-act]) .linha-palco { padding: 90px 0; }
.linha-act .detalhe-ano { min-height: 0; }
.linha-act[data-sc-act] .detalhe-ano { transition: opacity .3s; }

/* ------------------------------------------------------------ chamada final */
.chamada[data-sc-spotlight]::after {
    background: radial-gradient(520px circle at calc(var(--sc-mx, .5) * 100%) calc(var(--sc-my, .5) * 100%), rgba(255,255,255,.22), transparent 60%);
}

@media (max-width: 920px) {
    .virada-palco { grid-template-columns: 1fr; align-content: center; gap: 34px; }
    .virada-texto { min-height: 6.5em; }
    .virada-linha { font-size: clamp(24px, 6.4vw, 34px); max-width: none; }
}

/* ------------------------------------------------------------ tour da plataforma (pin)
   A janela do sistema fica fixa e gira de leve em 3D; cada tela nasce no fundo e vem
   para a frente na sua faixa da rolagem (--a..--b em --sc-p). */
.tour-act { background: radial-gradient(900px 500px at 80% 30%, rgba(37,99,235,.28), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; }
.tour-palco {
    height: 100vh; height: 100svh; display: grid; grid-template-columns: .9fr 1.25fr; gap: clamp(24px, 4vw, 70px); align-items: center;
    padding: calc(var(--topo) + 16px) max(20px, calc((100vw - 1240px) / 2)) 30px; overflow: hidden;
}
.tour-legendas { position: relative; z-index: 2; }
.tour-legendas .etiqueta { color: var(--ciano); background: rgba(34,211,238,.12); }
.tour-legendas-pilha { position: relative; min-height: 15em; margin: 14px 0 22px; }
.tour-legenda { position: absolute; inset: 0 0 auto 0; }
.tour-legenda h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 14px; text-wrap: balance; }
.tour-legenda p { font-size: clamp(15px, 1.25vw, 18px); color: rgba(255,255,255,.78); max-width: 46ch; }
.tour-acoes { display: flex; gap: 12px; flex-wrap: wrap; }

.tour-janela-wrap { perspective: 1400px; perspective-origin: 30% 50%; }
.tour-janela {
    position: relative; border-radius: 20px; background: #0d2342; overflow: hidden; transform-style: preserve-3d;
    box-shadow: 0 60px 120px -40px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.12), 0 0 80px -20px rgba(34,211,238,.25);
}
.tour-janela .topo-app { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,.05); font-size: 12px; color: rgba(255,255,255,.6); }
.tour-janela .topo-app i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); }
.tour-janela .topo-app i:nth-child(1) { background: #ff6b6b; } .tour-janela .topo-app i:nth-child(2) { background: #ffd166; } .tour-janela .topo-app i:nth-child(3) { background: #06d6a0; }
.tour-janela .topo-app span { margin-left: 8px; }
.tour-corpo { display: grid; grid-template-columns: 170px 1fr; height: clamp(320px, 52vh, 460px); }
.tour-menu { padding: 16px 12px; background: rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.6); }
.tour-menu span {
    --on: calc(clamp(0, (var(--sc-p, 0) - var(--a)) / .03, 1) * (1 - clamp(0, (var(--sc-p, 0) - var(--b)) / .03, 1)));
    padding: 9px 10px; border-radius: 9px; white-space: nowrap;
    background: rgba(34,211,238, calc(var(--on) * .16)); color: rgba(255,255,255, calc(.6 + var(--on) * .4));
    box-shadow: inset 3px 0 0 rgba(34,211,238, var(--on));
}
.tour-telas { position: relative; perspective: 900px; overflow: hidden; }
.tour-tela {
    --e: clamp(0, (var(--sc-p, 0) - var(--a)) / .05, 1);
    --s: clamp(0, (var(--sc-p, 0) - var(--b)) / .05, 1);
    position: absolute; inset: 0; padding: 20px 22px; font-size: 13px;
    opacity: calc(var(--e) * (1 - var(--s)));
    transform: translate3d(0, 0, calc((1 - var(--e)) * -600px + var(--s) * 260px)) rotateX(calc((1 - var(--e)) * 10deg));
    filter: blur(calc((1 - var(--e)) * 6px + var(--s) * 6px));
}
.tour-tela h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); margin-bottom: 14px; font-weight: 600; }
.tt-linha { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.72); }
.tt-linha b { color: #fff; font-weight: 600; }
.tour-tela .ok { color: #7dffb3; } .tour-tela .alerta { color: #ffd166; } .tour-tela .info { color: #8ae9fb; }
.tt-arrasta { margin-top: 16px; padding: 16px; border-radius: 12px; border: 1.5px dashed rgba(34,211,238,.45); text-align: center; color: #8ae9fb; font-size: 12.5px; }
.tt-barras { display: flex; align-items: flex-end; gap: 10px; height: 62%; padding-top: 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.tt-ano { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tt-pilha { flex: 1; width: 100%; display: flex; gap: 3px; align-items: flex-end; }
.tt-pilha span { flex: 1; border-radius: 5px 5px 2px 2px; transform-origin: bottom; transform: scaleY(var(--e)); }
.tt-pilha .velho, .tt-legenda .velho::before { background: linear-gradient(180deg, #f59e0b, #ef4444); }
.tt-pilha .novo, .tt-legenda .novo::before { background: var(--degrade); }
.tt-ano small { font-size: 11px; color: rgba(255,255,255,.55); }
.tt-legenda { display: flex; gap: 16px; align-items: center; margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.7); }
.tt-legenda span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tt-legenda em { margin-left: auto; font-style: normal; color: rgba(255,255,255,.4); }
.tt-cartao { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; margin-bottom: 10px; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tt-cartao b { color: #fff; } .tt-cartao span:nth-of-type(1) { grid-column: 1; color: rgba(255,255,255,.6); font-size: 12px; }
.tt-cartao span:nth-of-type(2) { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 600; }
.tt-msg { max-width: 82%; padding: 11px 14px; border-radius: 14px; margin-bottom: 10px; line-height: 1.45; }
.tt-msg.eu { margin-left: auto; background: var(--degrade); color: #fff; border-bottom-right-radius: 4px; }
.tt-msg.ia { background: rgba(255,255,255,.08); color: rgba(255,255,255,.88); border-bottom-left-radius: 4px; }
.tt-digitando { display: inline-flex; gap: 5px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.08); }
.tt-digitando i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); animation: piscar 1.2s infinite; }
.tt-digitando i:nth-child(2) { animation-delay: .2s; } .tt-digitando i:nth-child(3) { animation-delay: .4s; }
@media (prefers-reduced-motion: no-preference) {
    /* a janela chega do fundo e gira devagar enquanto o tour avança */
    .tour-janela {
        --e: clamp(0, (var(--sc-p, 0) + .08) / .12, 1);
        transform: translate3d(0, 0, calc((1 - var(--e)) * -700px)) rotateY(calc(-16deg + var(--sc-p, 0) * 22deg)) rotateX(calc(4deg - var(--sc-p, 0) * 4deg));
    }
}
@media (prefers-reduced-motion: reduce) { .tour-tela { filter: none; transform: none; } }
@media (max-width: 920px) {
    .tour-palco { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 18px; padding-top: calc(var(--topo) + 10px); }
    .tour-legendas-pilha { min-height: 9.5em; margin: 8px 0 0; }
    .tour-legenda h2 { font-size: 22px; margin-bottom: 8px; }
    .tour-legenda p { font-size: 14px; }
    .tour-acoes { display: none; }
    .tour-corpo { grid-template-columns: 1fr; height: 40vh; height: 40svh; }
    .tour-menu { display: none; }
    .tour-tela { font-size: 12px; padding: 14px; }
}