/* Movimento e capas do site da Furtado Academy (vem depois do site.css).
   Tudo aqui anima só transform e opacity. O movimento.js liga o html.anim (sem JS nada fica escondido),
   pausa o que sai da tela (.pausa) e a aba escondida (html.oculto); o html.sem-mov desliga tudo. */

/* ---------------------------------------------------------------- revelar ao rolar (em cascata pelo --i) */
/* é uma animação que roda uma vez (backwards): terminada, não segura o transform e o hover dos cartões fica livre */
html.anim:not(.sem-mov) [data-revela]:not(.visto) { opacity: 0; }
html.anim:not(.sem-mov) [data-revela].visto { animation: revela .7s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
html.anim:not(.sem-mov) [data-revela="esq"].visto { animation-name: revela-esq; }
html.anim:not(.sem-mov) [data-revela="dir"].visto { animation-name: revela-dir; }
@keyframes revela { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); } }
@keyframes revela-esq { from { opacity: 0; transform: translate3d(-36px, 0, 0); } }
@keyframes revela-dir { from { opacity: 0; transform: translate3d(36px, 0, 0); } }
.pausa, .pausa *, html.oculto * { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- barra de leitura e topo */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--red), var(--gold), var(--gold-hi)); pointer-events: none; }
.topo { transition: background-color .3s ease, border-color .3s ease; }
html.rolou .topo { background: rgba(13,9,9,.95); border-bottom-color: var(--line-2); }

/* ---------------------------------------------------------------- botões: o brilho que passa e o toque */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s ease, filter .2s ease, box-shadow .3s ease, background-color .3s ease; }
.btn::after { content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 64%); transform: translateX(-120%); }
.btn.linha::after { background: linear-gradient(110deg, transparent 30%, rgba(227,200,143,.22) 48%, transparent 64%); }
@media (hover: hover) {
  .btn:hover::after { transform: translateX(120%); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .btn:not(.linha):hover { box-shadow: 0 14px 36px rgba(181,38,45,.45), inset 0 1px 0 rgba(255,255,255,.2); }
}
.btn:active { transform: scale(.97); }

/* ---------------------------------------------------------------- cartões: a luz que segue o cursor */
:is(.cartao, .produto, .cartao-img, .passo, .extras > div, .parametros > div, .metricas > div, .meu-produto, .numeros > div) { position: relative; isolation: isolate; transition: border-color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
:is(.cartao, .produto, .cartao-img, .passo, .extras > div, .parametros > div, .metricas > div, .meu-produto, .numeros > div)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(201,164,92,.14), transparent 45%); }
@media (hover: hover) and (pointer: fine) {
  :is(.cartao, .produto, .cartao-img, .passo, .extras > div, .parametros > div, .metricas > div, .meu-produto, .numeros > div):hover { border-color: var(--line-2); box-shadow: 0 22px 50px rgba(0,0,0,.45); }
  :is(.cartao, .cartao-img, .passo, .extras > div, .parametros > div, .metricas > div, .numeros > div):hover { transform: translateY(-4px); }
  :is(.cartao, .produto, .cartao-img, .passo, .extras > div, .parametros > div, .metricas > div, .meu-produto, .numeros > div):hover::after { opacity: 1; }
}
:is(.cartao, .cartao-img, .opcao):active { transform: scale(.99); }

/* prints: o leve zoom ao passar */
.tela img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (pointer: fine) { .recurso figure:hover .tela img, .cartao-img:hover .tela img, .bt-print:hover .tela img { transform: scale(1.035); } }

/* ---------------------------------------------------------------- as capas dos produtos (um componente só) */
.capa { --c1: #8E1A1F; --c2: #C9A45C; --c3: #E3C88F; --sobe: #EDE7E2; --desce: #B5262D; --fundo1: #1d1012; --fundo2: #0d0909; --brilho: rgba(142,26,31,.6); --aura: rgba(201,164,92,.38);
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; isolation: isolate; container-type: inline-size;
  background: radial-gradient(120% 90% at 88% 0%, var(--brilho), transparent 60%), linear-gradient(160deg, var(--fundo1), var(--fundo2));
  border: 1px solid rgba(201,164,92,.3); box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.capa.mexendo { transition: transform .15s linear; }
.capa--ea { --c2: #9c8682; --c3: #F2A0A4; --brilho: rgba(181,38,45,.62); --aura: rgba(242,160,164,.22); --fundo1: #1b1314; --fundo2: #0c0a0a; border-color: rgba(181,38,45,.42); }
.capa--gold { --c1: #C9A45C; --c3: #FFE7A8; --sobe: #E3C88F; --desce: #8a6a35; --brilho: rgba(201,164,92,.5); --aura: rgba(255,231,168,.3); --fundo1: #21180c; --fundo2: #0d0a07; border-color: rgba(227,200,143,.48); }
.capa-palco { position: absolute; inset: 0; pointer-events: none; }
.capa-grade { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000, transparent); mask-image: radial-gradient(80% 70% at 60% 40%, #000, transparent); }
.capa-aura { position: absolute; width: 70%; aspect-ratio: 1; left: 42%; top: -38%; border-radius: 50%; background: radial-gradient(circle, var(--aura), transparent 62%); animation: aura 9s ease-in-out infinite alternate; }
@keyframes aura { to { transform: translate3d(-20%, 24%, 0) scale(1.18); } }
.capa-velas { position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; opacity: .5; }
.capa-velas .v { transform-box: fill-box; transform-origin: 50% 100%; }
.capa-velas .sobe { fill: var(--sobe); stroke: var(--sobe); }
.capa-velas .desce { fill: var(--desce); stroke: var(--desce); }
.capa-velas .ultima { animation: respira 1.6s ease-in-out infinite; }
@keyframes respira { 50% { opacity: .3; } }
html.anim:not(.sem-mov) .capa-velas .v { transform: scaleY(0); transition: transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 22ms); }
html.anim:not(.sem-mov) .velas-vistas .v { transform: none; }
.capa-faixas { position: absolute; width: 30%; left: 2%; bottom: -14%; opacity: .09; }
.capa-faixas path { fill: var(--c3); }
.capa-tela { position: absolute; z-index: 2; width: 72%; right: -3%; bottom: -10%; height: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); box-shadow: -24px 30px 60px rgba(0,0,0,.6);
  transform: perspective(900px) rotateY(-16deg) rotateX(7deg) rotateZ(2deg); transform-origin: 100% 100%; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (pointer: fine) { .capa:hover .capa-tela { transform: perspective(900px) rotateY(-8deg) rotateX(3deg) rotateZ(1deg) translate3d(0, -8px, 0); } }
.capa-nome { position: absolute; z-index: 3; left: 6%; top: 9%; display: grid; gap: 6px; max-width: 64%; }
.capa-sel { font: 600 clamp(8px, 2.2cqi, 12px)/1.25 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--c3); }
.capa-nome b { font: 800 clamp(16px, 7.4cqi, 54px)/1 var(--t); color: #fff; letter-spacing: -.02em; text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.capa-nome b em { font-style: normal; color: var(--c3); }
.capa-chips { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  font: 600 clamp(9px, 2.3cqi, 13.5px) var(--f); color: #fff; background: rgba(18,12,13,.86); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.45); animation: flutua 6s ease-in-out infinite; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c3); box-shadow: 0 0 10px var(--c3); flex: none; }
.chip.c1 { left: 6%; top: 46%; } .chip.c2 { left: 10%; top: 64%; animation-delay: -2s; } .chip.c3 { right: 5%; top: 8%; animation-delay: -4s; }
@keyframes flutua { 50% { transform: translate3d(0, -7px, 0); } }
.capa-brilho { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.1), transparent 40%); }
@media (hover: hover) and (pointer: fine) { .capa:hover .capa-brilho { opacity: 1; } }

/* a capa grande no topo das páginas de produto */
.hero figure.capa-hero { margin-top: 28px; }
.capa-hero .capa { aspect-ratio: 16 / 8; }
.capa-hero .capa-tela { width: 64%; right: 2%; bottom: -13%; }
.capa-hero .chip { padding: 8px 14px; }
@media (max-width: 640px) {
  .capa-hero .capa { aspect-ratio: 4 / 3.4; }
  .capa-hero .capa-tela { width: 88%; right: -8%; bottom: -16%; }
  .capa-hero .chip.c2 { display: none; } .capa-hero .capa-nome { max-width: 80%; }
}

/* na vitrine: a capa no lugar do print */
.produto-capa { position: relative; display: block; padding: 14px 14px 0; text-decoration: none !important; }
.produto-capa .capa { border-radius: 14px; }
.produto-capa .chip.c2, .produto-capa .chip.c3, .produto-capa .capa-sel { display: none; }
.produto-capa .capa-nome { top: 11%; max-width: 70%; }
.produto-capa .chip.c1 { top: 38%; }
.produto-capa .produto-fita { top: auto; bottom: 12px; left: 26px; z-index: 6; }

/* ---------------------------------------------------------------- loja: a abertura */
.loja-hero { overflow: clip; padding-bottom: clamp(48px, 7vw, 88px); }
.loja-hero .wrap { grid-template-columns: 1.02fr 1fr; align-items: center; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 960px) { .loja-hero .wrap { grid-template-columns: 1fr; } }
.hero-txt { display: grid; gap: 22px; align-content: start; }
.hero-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bolha { position: absolute; border-radius: 50%; }
.bolha.b1 { width: 620px; height: 620px; right: -160px; top: -220px; background: radial-gradient(circle, rgba(181,38,45,.42), transparent 62%); animation: deriva 16s ease-in-out infinite alternate; }
.bolha.b2 { width: 480px; height: 480px; left: -180px; bottom: -220px; background: radial-gradient(circle, rgba(201,164,92,.22), transparent 62%); animation: deriva 19s ease-in-out infinite alternate-reverse; }
@keyframes deriva { to { transform: translate3d(-90px, 70px, 0) scale(1.15); } }
.velas-fundo { position: absolute; left: 0; bottom: 0; width: 100%; height: 52%; opacity: .1; }
.velas-fundo .sobe { fill: #EDE7E2; stroke: #EDE7E2; } .velas-fundo .desce { fill: #B5262D; stroke: #B5262D; }
.velas-fundo .v { transform-box: fill-box; transform-origin: 50% 100%; }
.holofote { position: absolute; z-index: 0; left: 0; top: 0; width: 700px; height: 700px; margin: -350px 0 0 -350px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(circle, rgba(227,200,143,.09), transparent 60%); transform: translate3d(var(--hx, 60vw), var(--hy, 30vh), 0); }
.loja-hero:hover .holofote { opacity: 1; }
.loja-hero h1 .ouro { background: linear-gradient(100deg, var(--gold), var(--gold-hi) 45%, #fff6dd 55%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pilha { position: relative; z-index: 1; height: clamp(380px, 40vw, 500px); }
.pilha-item { position: absolute; width: 62%; animation: flutua-pilha 8s ease-in-out infinite; }
.pilha-item:nth-child(1) { left: 0; top: 0; --r: -5deg; z-index: 1; animation-delay: -1s; }
.pilha-item:nth-child(2) { right: 0; top: 27%; --r: 4deg; z-index: 2; animation-delay: -3.5s; }
.pilha-item:nth-child(3) { left: 7%; bottom: 0; --r: -2deg; z-index: 3; animation-delay: -6s; }
.pilha .capa-sel { display: none; }
.pilha .capa-nome { max-width: 70%; top: 10%; }
.pilha-item > a { display: block; transform: rotate(var(--r)); transition: transform .6s cubic-bezier(.2,.7,.2,1); text-decoration: none !important; }
@media (hover: hover) and (pointer: fine) { .pilha-item:hover { z-index: 5; } .pilha-item:hover > a { transform: rotate(0deg) scale(1.04); } }
@keyframes flutua-pilha { 50% { transform: translate3d(0, -12px, 0); } }
.pilha .capa-tela { width: 66%; }
.pilha .chip.c2, .pilha .chip.c3 { display: none; }
@media (max-width: 960px) {
  .pilha { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
  .pilha-item { position: relative; width: auto; inset: auto !important; }
  .pilha-item > a { transform: none; }
  .pilha .chip, .pilha .capa-sel { display: none; }
}
@media (max-width: 520px) { .pilha { grid-template-columns: 1fr 1fr; } .pilha-item:nth-child(3) { display: none; } }

/* ---------------------------------------------------------------- a faixa que corre */
.corre { position: relative; z-index: 2; overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(90deg, var(--bg2), var(--s1), var(--bg2)); padding: 16px 0; }
.corre::before, .corre::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.corre::before { left: 0; background: linear-gradient(90deg, var(--bg2), transparent); }
.corre::after { right: 0; background: linear-gradient(-90deg, var(--bg2), transparent); }
.corre-trilho { display: flex; width: max-content; animation: corre 46s linear infinite; }
.corre-trilho > div { display: flex; gap: 44px; padding-right: 44px; }
.corre span { display: inline-flex; align-items: center; gap: 44px; white-space: nowrap; font: 600 12.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.corre span::after { content: ""; width: 8px; height: 8px; background: var(--red); transform: skewX(-27deg); }
.corre span b { color: var(--gold-hi); font-weight: 600; }
@keyframes corre { to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) { .corre:hover .corre-trilho { animation-play-state: paused; } }

/* ---------------------------------------------------------------- os números que contam */
.numeros-sec { padding-block: clamp(40px, 6vw, 72px); }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) { .numeros { grid-template-columns: 1fr 1fr; } }
.numeros > div { padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--s1), var(--bg2)); display: grid; gap: 6px; }
.numeros b { font: 800 clamp(38px, 5vw, 56px)/1 var(--t); letter-spacing: -.03em; background: linear-gradient(180deg, #fff, var(--gold-hi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numeros span { color: var(--muted); font-size: 14.5px; }

/* títulos: o traço dourado corre ao aparecer */
html.anim:not(.sem-mov) .sec-topo .label::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2,.7,.2,1) .25s; }
html.anim:not(.sem-mov) .sec-topo.visto .label::before { transform: none; }

/* ---------------------------------------------------------------- sem movimento */
html.sem-mov *, html.sem-mov *::before, html.sem-mov *::after { animation: none !important; transition: none !important; }
html.sem-mov .capa { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .corre-trilho, .chip, .capa-aura, .bolha, .pilha-item, .capa-velas .ultima { animation: none !important; }
}