/* ===== Vitrine "FX" (2026-10-02): visual escuro e tecnológico com efeitos, por cima do vitrine.css.
   Mesmo conteúdo; só muda a cara. Efeitos em js/vitrine-fx.js. Leve: sem desfoque de fundo
   (backdrop-filter) e sem 3D pesado — tudo com transform/opacity. ===== */
/* paleta profissional (tecnologia, não "barbearia"): azul-violeta + ciano, fonte moderna sem caixa-alta */
.fx:not(.vt--rose) { --cor: #5b5cff; --cor-texto: #fff; }
.fx {
  --fx-grad: linear-gradient(90deg, #7b5cff, #4f7cff 45%, #22d3ee);
  --titulo: "Plus Jakarta Sans", "Figtree", system-ui, sans-serif;
  --fx-fundo: #070b16; --fx-fundo2: #0b1222; --fx-cartao: #0f1830; --fx-borda: rgba(150, 175, 230, .14);
  --fx-texto: #eef2fb; --fx-suave: #a4b0c8; --fx-azul: #22d3ee; --fx-brilho: rgba(91, 92, 255, .55);
  background: var(--fx-fundo); color: var(--fx-texto);
}
.fx.vt--rose { --fx-grad: linear-gradient(90deg, #c2607a, #e9a6b8 50%, #f3c9c1); --fx-fundo: #12090d; --fx-fundo2: #1a0e13; --fx-cartao: #221219; --fx-borda: rgba(240, 190, 205, .14); --fx-texto: #fbf1f3; --fx-suave: #d2b5bc; --fx-azul: #e9a6b8; --fx-brilho: rgba(194, 96, 122, .55); }
.fx h1, .fx h2, .fx h3 { color: var(--fx-texto); text-transform: none; letter-spacing: -.025em; font-weight: 800; }
.fx .vt-hero h1 { line-height: 1.02; font-size: clamp(42px, 6.4vw, 78px); }
.fx h2 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.1; }
.fx h3 { font-size: 22px; }
.fx .vt-dor strong, .fx .vt-dores__fim, .fx .vt-plano__valor strong, .fx .vt-planos__gratis { font-family: var(--titulo); text-transform: none; letter-spacing: -.02em; }
.fx .vt-marca { font-family: var(--titulo); text-transform: none; font-weight: 800; letter-spacing: -.02em; font-size: 26px; }
.fx .vt-marca span { background: var(--fx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx .vt-marca small { text-transform: uppercase; }
.fx .vt-dores__fim, .fx .vt-planos__gratis { background: var(--fx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx .btn--cor { background: var(--fx-grad); border-color: transparent; color: #fff; }
.fx .vt-num { background: var(--fx-grad); }
.fx .vt-plano__selo { background: var(--fx-grad); }
.fx .vt-lista li::before { background: var(--fx-grad); }
.fx .vt-sub, .fx .vt-lead, .fx .vt-passos p, .fx .vt-recursos p, .fx .vt-plano__sub, .fx .vt-faq p, .fx .vt-ramo p, .fx .vt-preco__nota, .fx .vt-garantias, .fx .vt-temas figcaption { color: var(--fx-suave); }
.fx .listras { display: none; }

/* camadas do fundo: aurora que respira + grade em perspectiva + brilho que segue o mouse */
.fx-fundo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-aurora { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .5; will-change: transform; }
.fx-aurora--a { left: -20vmax; top: -25vmax; background: radial-gradient(closest-side, var(--fx-brilho), transparent); animation: fx-flutua 18s ease-in-out infinite; }
.fx-aurora--b { right: -25vmax; top: 10vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--fx-azul) 45%, transparent), transparent); animation: fx-flutua 22s ease-in-out infinite reverse; }
@keyframes fx-flutua { 50% { transform: translate(8vmax, 6vmax) scale(1.1); } }
.fx-grade { position: absolute; left: -50%; right: -50%; bottom: -10vh; height: 70vh; transform-origin: 50% 100%; transform: perspective(600px) rotateX(68deg);
  background: linear-gradient(color-mix(in srgb, var(--fx-azul) 30%, transparent) 1px, transparent 1px) 0 0 / 60px 60px,
              linear-gradient(90deg, color-mix(in srgb, var(--fx-azul) 30%, transparent) 1px, transparent 1px) 0 0 / 60px 60px;
  -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); opacity: .35; animation: fx-anda 3s linear infinite; }
@keyframes fx-anda { to { background-position: 0 60px, 0 0; } }
.fx-luz { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .06), transparent); will-change: transform; }
.fx > *:not(.fx-fundo) { position: relative; z-index: 1; }
.fx .vt-barra { position: sticky; z-index: 20; }

/* topo */
.fx .vt-barra { background: rgba(7, 11, 22, .82); border-bottom: 1px solid var(--fx-borda); transition: padding .3s, background .3s; }
.fx .vt-barra.fx-rolou { background: rgba(7, 11, 22, .96); padding-top: 8px; padding-bottom: 8px; }
.fx.vt--rose .vt-barra { background: rgba(18, 9, 13, .85); }
.fx .vt-nav a { color: var(--fx-suave); position: relative; }
.fx .vt-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--cor); transform: scaleX(0); transition: transform .25s; transform-origin: left; }
.fx .vt-nav a:hover { color: #fff; } .fx .vt-nav a:hover::after { transform: scaleX(1); }

/* botões */
.fx .btn { will-change: transform; transition: transform .2s, box-shadow .2s, border-color .2s; }
.fx .btn--cor { box-shadow: 0 10px 30px -8px var(--fx-brilho), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
.fx .btn--cor:hover { box-shadow: 0 14px 40px -6px var(--fx-brilho), 0 0 0 1px rgba(255, 255, 255, .2) inset; }
.fx .vt-btn-claro, .fx .btn--linha { background: rgba(255, 255, 255, .04); color: var(--fx-texto); border-color: var(--fx-borda); }
.fx .vt-btn-claro:hover, .fx .btn--linha:hover { border-color: var(--cor); }

/* hero */
.fx .vt-hero { padding-top: 84px; padding-bottom: 96px; min-height: calc(100svh - 64px); }
.fx .vt-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); background: color-mix(in srgb, var(--cor) 10%, transparent); }
.fx .vt-selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); box-shadow: 0 0 10px var(--cor); animation: fx-pisca 1.6s infinite; }
@keyframes fx-pisca { 50% { opacity: .3; } }
.fx .vt-hero h1 em { background: linear-gradient(90deg, #7b5cff, #4f7cff, #22d3ee, #7b5cff); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: fx-brilha 5s linear infinite; }
@keyframes fx-brilha { to { background-position: -200% 0; } }
.fx.vt--rose .vt-hero h1 em { background-image: linear-gradient(90deg, #c2607a, #f3c9c1, #e9a6b8, #c2607a); }
.js-fx .vt-hero h1 em { opacity: 0; animation: fx-brilha 5s linear infinite, fx-entra .9s ease .75s forwards; }
.js-fx .fx-palavra { display: inline-block; opacity: 0; transform: translateY(.6em) rotateX(-60deg); transform-origin: 50% 100%; animation: fx-sobe .8s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 70ms + .15s); }
@keyframes fx-sobe { to { opacity: 1; transform: none; } }
.fx .vt-hero__celulares { perspective: 1200px; }
.fx .fx-palco { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 6deg)); transition: transform .4s ease-out; }
.fx .vt-hero__celulares .cel--frente { transform: translateZ(60px) rotate(-3deg); }
.fx .vt-hero__celulares .cel--tras { transform: translateZ(-40px) rotate(4deg); }
.fx .cel { background: #05070f; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 0 60px -20px var(--fx-brilho); }
/* avisos flutuando em volta dos celulares */
.fx-aviso { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; font: 600 13px/1.25 var(--texto); color: #fff; white-space: nowrap;
  background: rgba(15, 24, 48, .94); border: 1px solid var(--fx-borda); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); animation: fx-boia 5s ease-in-out infinite; transform: translateZ(120px); }
.fx-aviso small { display: block; font-weight: 400; color: var(--fx-suave); font-size: 11.5px; }
.fx-aviso i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-style: normal; font-size: 15px; background: color-mix(in srgb, var(--cor) 22%, transparent); }
.fx-aviso--1 { left: -6%; top: 18%; } .fx-aviso--2 { right: -4%; top: 46%; animation-delay: -1.7s; } .fx-aviso--3 { left: 8%; bottom: 6%; animation-delay: -3.2s; }
@keyframes fx-boia { 50% { translate: 0 -12px; } }
.js-fx .fx-aviso { opacity: 0; animation: fx-boia 5s ease-in-out infinite, fx-entra .7s ease forwards; }
.js-fx .fx-aviso--1 { animation-delay: -0s, .9s; } .js-fx .fx-aviso--2 { animation-delay: -1.7s, 1.5s; } .js-fx .fx-aviso--3 { animation-delay: -3.2s, 2.1s; }
@keyframes fx-entra { to { opacity: 1; } }

/* faixa que corre com os recursos */
.fx-faixa { overflow: hidden; border-block: 1px solid var(--fx-borda); background: rgba(255, 255, 255, .02); padding: 14px 0; }
.fx-faixa__trilho { display: flex; gap: 40px; width: max-content; animation: fx-corre 32s linear infinite; font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fx-suave); }
.fx-faixa__trilho span::before { content: "◆"; color: var(--cor); margin-right: 14px; font-size: 10px; vertical-align: 1px; }
@keyframes fx-corre { to { transform: translateX(-50%); } }

/* seções e cartões */
.fx .vt-dores, .fx .vt-secao--escura, .fx .vt-rodape { background: transparent; }
.fx .vt-secao--caixa { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .025) 20%, rgba(255, 255, 255, .025) 80%, transparent); }
.fx .vt-dor, .fx .vt-recursos div, .fx .vt-plano, .fx .vt-faq details, .fx .vt-ramo, .fx .vt-preco {
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), var(--fx-cartao); border: 1px solid var(--fx-borda); color: var(--fx-texto); }
.fx .vt-dor p, .fx .vt-recursos p { color: var(--fx-suave); }
.fx .vt-dor strong, .fx .vt-recursos strong, .fx .vt-ramo strong { color: #fff; }
.fx .vt-lista li { color: var(--fx-suave); } .fx .vt-lista strong { color: #fff; }
.fx .vt-lista li::before { box-shadow: 0 0 12px var(--cor); }
.fx .vt-lista--clara li { color: var(--fx-suave); } .fx .vt-lista--clara strong { color: #fff; }
.fx .vt-num { box-shadow: 0 0 18px var(--fx-brilho); }
.fx .vt-passos h3 { color: #fff; }
.fx .vt-faq summary { color: #fff; }
.fx .vt-ramo--texto { background: linear-gradient(135deg, color-mix(in srgb, var(--cor) 35%, var(--fx-cartao)), var(--fx-cartao)); }
.fx .vt-ramo__ir { color: var(--cor); }

/* inclinação 3D com o mouse (variáveis vindas do JS) + brilho que segue o cursor */
.fx .fx-tilt { transform: perspective(900px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)) translateZ(0); transition: transform .25s ease-out, border-color .3s, box-shadow .3s; position: relative; overflow: hidden; }
.fx .fx-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .09), transparent 45%); }
.fx .fx-tilt:hover { border-color: color-mix(in srgb, var(--cor) 55%, transparent); }
.fx .fx-tilt:hover::after { opacity: 1; }
.fx .cel.fx-tilt, .fx .vt-plano.fx-tilt { overflow: visible; }

/* planos: destaque com borda de luz girando */
.fx .vt-plano--destaque { border-color: transparent; box-shadow: 0 30px 70px -30px var(--fx-brilho); isolation: isolate; }
.fx .vt-plano--destaque::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--ang, 0deg), var(--cor), var(--fx-azul), transparent 40%, var(--cor)); animation: fx-gira 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes fx-gira { to { --ang: 360deg; } }
.fx .vt-plano__valor strong { color: #fff; }
.fx .vt-plano li::before { color: var(--cor); }

/* final */
.fx .vt-final { background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--cor) 45%, transparent), transparent 70%); border-top: 1px solid var(--fx-borda); }
.fx .vt-rodape { border-top: 1px solid var(--fx-borda); color: var(--fx-suave); }

/* entrada ao rolar (com perspectiva) */
.js-fx .fx-revela { opacity: 0; transform: perspective(1000px) translateY(60px) rotateX(18deg); transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); }
.js-fx .fx-revela.fx-visivel { opacity: 1; transform: none; }
.js-fx .cel.fx-revela { transform: perspective(1000px) translateY(70px) rotateY(-25deg) rotateX(12deg); }
.js-fx .cel.fx-revela.fx-visivel { transform: none; }

@media (max-width: 900px) {
  .fx-aviso { font-size: 12px; padding: 8px 11px; } .fx-aviso i { width: 26px; height: 26px; }
  .fx-aviso--1 { left: 0; top: 8%; } .fx-aviso--2 { right: 0; top: 50%; } .fx-aviso--3 { left: 2%; bottom: 2%; }
  /* no celular: giro 3D mais suave (sem caixa cortando) e avisos por dentro da tela */
  .fx .fx-palco { transform: rotateY(-9deg) rotateX(4deg); }
  .fx .vt-hero__celulares .cel--frente { transform: translateZ(30px) rotate(-3deg); }
  .fx .vt-hero__celulares .cel--tras { transform: translateZ(-20px) rotate(4deg); }
  .fx-aviso { transform: translateZ(60px); font-size: 11.5px; }
  .fx-aviso--1 { left: 2px; top: 4%; } .fx-aviso--2 { right: 2px; top: 44%; } .fx-aviso--3 { left: 2px; bottom: 6%; }
  .fx .vt-hero { min-height: 0; padding-top: 48px; }
}
@media (hover: none) { .fx .fx-tilt { transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .fx *, .fx *::before, .fx *::after, .fx-fundo * { animation: none !important; transition: none !important; }
  .js-fx .fx-revela, .js-fx .fx-palavra, .js-fx .fx-aviso { opacity: 1 !important; transform: none !important; }
}
/* depois de aparecer, a inclinação com o mouse volta a valer */
.js-fx .fx-tilt.fx-revela.fx-visivel, .js-fx .cel.fx-tilt.fx-revela.fx-visivel { transform: perspective(900px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)); }
.js-fx .fx-tilt.fx-revela.fx-visivel { transition: opacity .8s ease, transform .25s ease-out, border-color .3s; }
.js-fx { overflow-x: clip; } /* entradas em 3D não podem criar rolagem lateral no celular */

/* celulares lado a lado: cada um no tamanho da própria tela (sem esticar a moldura preta) */
.fx .vt-painel__celulares, .fx .vt-passos li, .fx .vt-temas { align-items: start; }
.fx .vt-painel__celulares .cel, .fx .vt-temas .cel { align-self: start; height: auto; }