/* Home v2: camada visual por cima do style.css (so a home usa este arquivo).
   Cor de destaque unica: --primary (azul da marca). Para desfazer, remova o
   <link> deste arquivo e o <script> do home-v2.js no index.php. */

body.v2 { --accent: var(--primary); --accent-soft: rgba(59,130,246,.16); --shadow-card: 0 1px 2px rgba(14,21,38,.05), 0 12px 32px -12px rgba(14,21,38,.18); }

/* ---------- Efeitos de base ---------- */
.v2 .btn { transition: background .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease; }
.v2 .btn:hover { transform: translateY(-2px) scale(1.02); }
.v2 .btn.primary { box-shadow: 0 10px 28px -10px rgba(59,130,246,.7); }
.v2 .hl, .v2 .hero h1 span { color: var(--accent); }
.v2 .eyebrow::before { background: var(--accent); }

/* Navbar: translucida no topo, solida depois de rolar */
.v2 header { background: rgba(14,21,38,.35); transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.v2 header.scrolled { background: rgba(14,21,38,.94); }

/* Scroll reveal um pouco mais marcado */
.v2 .reveal { transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.v2 .reveal.is-visible { transform: none; }

/* ---------- Decoracao (sempre atras do conteudo) ---------- */
.v2 .hero, .v2 .dark-sec { position: relative; overflow: hidden; isolation: isolate; }
.v2 .deco { position: absolute; z-index: -1; pointer-events: none; }
.v2 .deco-glow { width: 560px; height: 560px; border-radius: 50%; left: -160px; top: -140px; background: radial-gradient(circle, rgba(59,130,246,.38), rgba(59,130,246,0) 68%); }
.v2 .deco-glow.right { left: auto; right: -180px; top: auto; bottom: -200px; }

/* ---------- Hero ---------- */
.v2 .hero { background: radial-gradient(1200px 600px at 80% -10%, #16224a 0%, var(--navy-950) 60%); padding-top: 96px; margin-top: -68px; }
.v2 .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.v2 .hero-inner { max-width: none; }
.v2 .hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; }
.v2 .badge { color: var(--on-dark); border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.12); }
.v2 .badge .material-symbols-outlined { color: var(--accent); }

.v2 .hero-visual { position: relative; height: 430px; perspective: 1400px; }
.v2 .mock-tilt { position: absolute; inset: 20px 0 20px 20px; transform: perspective(1200px) rotateY(-14deg) rotateX(6deg); transform-style: preserve-3d; }
.v2 .mock-win { height: 100%; border-radius: 18px; background: linear-gradient(160deg, #1a2748, #0f1830); border: 1px solid rgba(147,160,188,.22); box-shadow: 0 40px 80px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(59,130,246,.12), 0 0 80px -10px rgba(59,130,246,.45); overflow: hidden; }
.v2 .mock-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(147,160,188,.14); }
.v2 .mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(147,160,188,.35); }
.v2 .mock-bar i:first-child { background: var(--accent); }
.v2 .mock-body { display: flex; height: calc(100% - 34px); }
.v2 .mock-side { width: 54px; padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid rgba(147,160,188,.12); }
.v2 .mock-side b { height: 22px; border-radius: 7px; background: rgba(147,160,188,.16); }
.v2 .mock-side b:first-child { background: var(--accent); }
.v2 .mock-main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.v2 .mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v2 .mock-kpis div { padding: 12px; border-radius: 12px; background: rgba(147,160,188,.09); border: 1px solid rgba(147,160,188,.12); }
.v2 .mock-kpis span { display: block; height: 6px; width: 55%; border-radius: 4px; background: rgba(147,160,188,.35); }
.v2 .mock-kpis strong { display: block; height: 14px; width: 80%; border-radius: 5px; background: rgba(231,234,242,.8); margin-top: 10px; }
.v2 .mock-kpis div:first-child strong { background: var(--accent); }
.v2 .mock-chart { flex: 1; display: flex; align-items: flex-end; gap: 9px; padding: 14px; border-radius: 12px; background: rgba(147,160,188,.07); border: 1px solid rgba(147,160,188,.1); min-height: 110px; }
.v2 .mock-chart i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), rgba(59,130,246,.25)); transform-origin: bottom; animation: barGrow 1.1s cubic-bezier(.2,.7,.2,1) both; }
.v2 .mock-chart i:nth-child(2) { animation-delay: .06s; } .v2 .mock-chart i:nth-child(3) { animation-delay: .12s; } .v2 .mock-chart i:nth-child(4) { animation-delay: .18s; } .v2 .mock-chart i:nth-child(5) { animation-delay: .24s; } .v2 .mock-chart i:nth-child(6) { animation-delay: .3s; } .v2 .mock-chart i:nth-child(7) { animation-delay: .36s; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.v2 .mock-lines { display: grid; gap: 8px; }
.v2 .mock-lines em { height: 8px; border-radius: 4px; background: rgba(147,160,188,.18); }
.v2 .mock-lines em:nth-child(2) { width: 82%; } .v2 .mock-lines em:nth-child(3) { width: 64%; }

.v2 .float-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.95); box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); animation: floaty 6s ease-in-out infinite; }
.v2 .float-chip .material-symbols-outlined { font-size: 18px; color: var(--accent); }
.v2 .float-chip.c1 { left: -18px; top: 52px; }
.v2 .float-chip.c2 { right: -6px; top: 150px; animation-delay: -2s; }
.v2 .float-chip.c3 { left: 40px; bottom: 6px; animation-delay: -4s; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

.v2 .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; }
.v2 .stat { padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(147,160,188,.16);  transition: transform .25s ease, border-color .25s ease; }
.v2 .stat:hover { transform: translateY(-3px); border-color: rgba(59,130,246,.55); }
.v2 .stat strong { display: block; font-family: "Manrope", sans-serif; font-size: 1.35rem; color: #fff; line-height: 1.2; }
.v2 .stat span { display: block; margin-top: 4px; font-size: 13px; color: var(--on-dark-muted); }

/* Marquee dos sistemas */
.v2 .proof-strip { margin-top: 48px; padding: 24px 0 30px; }
.v2 .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.v2 .marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.v2 .marquee:hover .marquee-track { animation-play-state: paused; }
.v2 .marquee .proof-logos { flex-wrap: nowrap; gap: 72px; padding-right: 72px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Secoes ---------- */
.v2 .section-head h2 { letter-spacing: -.015em; }
.v2 .section-head h2 .hl { color: var(--accent); }
.v2 .dark-sec { background: var(--navy-950); color: var(--on-dark); }
.v2 .dark-sec .section-head h2, .v2 .dark-sec h2 { color: #fff; }
.v2 .dark-sec .section-head p, .v2 .dark-sec p { color: var(--on-dark-muted); }
.v2 .dark-sec .container { position: relative; }

.v2 .portfolio-card, .v2 .service-card, .v2 .benefit-card, .v2 .home-post { box-shadow: var(--shadow-card); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.v2 .portfolio-card:hover, .v2 .service-card:hover, .v2 .benefit-card:hover, .v2 .home-post:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 2px 4px rgba(14,21,38,.05), 0 24px 48px -16px rgba(59,130,246,.35); border-color: var(--accent); }
.v2 .service-icon { background: var(--accent-soft); color: var(--accent); }
.v2 #portfolio { position: relative; overflow: hidden; }
.v2 #portfolio::before { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.10), transparent 70%); pointer-events: none; }
.v2 #portfolio .container { position: relative; }

/* Destaque MaxiERP */
.v2 .feature-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.v2 .feature h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
.v2 .feature p { margin-top: 16px; font-size: 16.5px; max-width: 56ch; }
.v2 .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.v2 .chips span { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: var(--accent-soft); border: 1px solid rgba(59,130,246,.5); }
.v2 .feature-visual { position: relative; min-height: 360px; display: grid; place-items: center; }
.v2 .feature-visual::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.55), transparent 68%); }
.v2 .stack { position: relative; width: 300px; height: 300px; transform: perspective(1000px) rotateY(-16deg) rotateX(8deg); }
.v2 .stack-card { position: absolute; inset: 0; border-radius: 20px; border: 1px solid rgba(147,160,188,.25); background: linear-gradient(160deg, #1a2748, #0f1830); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.v2 .stack-card.s3 { transform: translate(34px, -34px); opacity: .45; }
.v2 .stack-card.s2 { transform: translate(17px, -17px); opacity: .75; }
.v2 .stack-card.s1 { overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 60px -8px rgba(59,130,246,.55); }
.v2 .mock-rows { padding: 14px 16px; display: grid; gap: 12px; }
.v2 .mock-rows div { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.v2 .mock-rows b { height: 9px; flex: 1; border-radius: 5px; background: rgba(147,160,188,.28); }
.v2 .mock-rows em { width: 44px; height: 9px; border-radius: 5px; background: rgba(231,234,242,.7); }
.v2 .mock-total { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
.v2 .mock-total strong { width: 70px; height: 14px; border-radius: 6px; background: rgba(255,255,255,.85); }

/* Como funciona (slider) */
.v2 .steps { position: relative; }
.v2 .steps-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 18px; scroll-padding-left: 2px; }
.v2 .steps-track::-webkit-scrollbar { display: none; }
.v2 .step-card { flex: 0 0 calc((100% - 54px) / 4); min-width: 250px; scroll-snap-align: start; padding: 28px 24px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(147,160,188,.18);  transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.v2 .step-card:hover { transform: translateY(-6px); border-color: rgba(59,130,246,.6); background: rgba(59,130,246,.10); }
.v2 .step-num { display: inline-block; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--accent); margin-bottom: 14px; }
.v2 .step-card h3 { color: #fff; font-size: 1.15rem; margin-bottom: 8px; }
.v2 .step-card p { font-size: 14.5px; line-height: 1.6; color: var(--on-dark-muted); }
.v2 .steps-ctrl { display: flex; align-items: center; gap: 22px; margin-top: 8px; }
.v2 .steps-progress { flex: 1; height: 4px; border-radius: 4px; background: rgba(147,160,188,.2); overflow: hidden; }
.v2 .steps-progress span { display: block; height: 100%; width: 25%; border-radius: 4px; background: var(--accent); transition: width .35s ease, margin-left .35s ease; }
.v2 .steps-btns { display: flex; gap: 10px; }
.v2 .steps-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(147,160,188,.4); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.v2 .steps-btn:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }

/* CTA final com glow */
.v2 .cta-final { position: relative; overflow: hidden; isolation: isolate; }
.v2 .cta-final::before { content: ""; position: absolute; z-index: -1; width: 640px; height: 640px; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.30), transparent 68%); }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .v2 .hero-grid, .v2 .feature-grid { grid-template-columns: 1fr; gap: 32px; }
  .v2 .hero-visual { height: 340px; max-width: 520px; margin: 0 auto; width: 100%; }
  .v2 .stats-row { grid-template-columns: repeat(2, 1fr); }
  .v2 .step-card { flex-basis: calc((100% - 18px) / 2); }
  .v2 .feature-visual { min-height: 320px; }
}
@media (max-width: 600px) {
  .v2 .hero { padding-top: 84px; }
  .v2 .hero-visual { height: 290px; }
  .v2 .float-chip { font-size: 12px; padding: 8px 11px; }
  .v2 .float-chip.c1 { left: -4px; } .v2 .float-chip.c2 { right: -2px; top: 120px; }
  .v2 .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .v2 .stat { padding: 14px; } .v2 .stat strong { font-size: 1.05rem; }
  .v2 .step-card { flex-basis: 84%; }
  .v2 .stack { width: 240px; height: 250px; }
  .v2 .marquee .proof-logos { gap: 48px; padding-right: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2 .marquee-track, .v2 .float-chip, .v2 .mock-chart i { animation: none; }
  .v2 .reveal { transition: none; transform: none; opacity: 1; }
  .v2 .deco, .v2 .float-chip { translate: none !important; }
}

/* Parallax na pagina inteira: brilhos de fundo nas secoes claras e no rodape */
.v2 .section, .v2 footer { position: relative; overflow: hidden; isolation: isolate; }
.v2 .deco-soft { width: 520px; height: 520px; border-radius: 50%; top: 8%; background: radial-gradient(circle, rgba(59,130,246,.13), rgba(59,130,246,0) 68%); }
.v2 .deco-soft.right { right: -200px; }
.v2 .deco-soft.left { left: -200px; }
.v2 footer .deco-glow { width: 480px; height: 480px; left: auto; right: -160px; top: -200px; opacity: .6; }
.v2 #portfolio::before { display: none; }

/* ================= Acabamento premium ================= */
.v2 ::selection { background: rgba(59,130,246,.35); color: #fff; }
.v2 :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Barra de progresso de leitura */
.v2-progress { position: fixed; z-index: 100; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #60a5fa, var(--accent)); pointer-events: none; }

/* Tipografia e ritmo */
.v2 .section { padding: 104px 0; }
.v2 .section-head { margin-bottom: 56px; }
.v2 .section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.12; letter-spacing: -.022em; }
.v2 .section-head p { font-size: 17px; line-height: 1.65; }
.v2 .eyebrow { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(59,130,246,.35); background: var(--accent-soft); color: var(--primary-hover); letter-spacing: .12em; }
.v2 .eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.v2 .dark-sec .eyebrow, .v2 .cta-final .eyebrow { color: #93c5fd; }

/* Botoes: gradiente sutil, brilho interno e seta que avanca */
.v2 .btn { border-radius: 12px; padding: 14px 24px; letter-spacing: .005em; }
.v2 .btn.primary { background: linear-gradient(180deg, #4f94f8, #2f6fe0); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px -10px rgba(59,130,246,.75); }
.v2 .btn.primary:hover { background: linear-gradient(180deg, #5b9dfa, #3478ec); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 16px 34px -10px rgba(59,130,246,.9); }
.v2 .btn .material-symbols-outlined { transition: transform .25s ease; }
.v2 .btn:hover .material-symbols-outlined { transform: translateX(4px); }
.v2 .btn.ghost { border-color: rgba(231,234,242,.35); }
.v2 .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Cartoes: acento unico, borda fina, spotlight que acompanha o mouse */
.v2 .portfolio-tag { color: var(--primary-hover); letter-spacing: .08em; }
.v2 .portfolio-card, .v2 .service-card, .v2 .benefit-card, .v2 .home-post { border-radius: 20px; border-color: rgba(20,27,44,.08); background: #fff; }
.v2 .section.alt .service-card { background: #fff; }
.v2 .portfolio-card { border-top-color: rgba(59,130,246,.55); }
.v2 .tilt-card { position: relative; overflow: hidden; }
.v2 .tilt-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%), rgba(59,130,246,.16), transparent 62%); }
.v2 .tilt-card:hover::after { opacity: 1; }
.v2 .step-card.tilt-card::after { background: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%), rgba(96,165,250,.22), transparent 62%); }
.v2 .service-icon, .v2 .benefit-icon { border-radius: 12px; }

/* Faixa de sistemas: logos em monocromia, cor so no hover */
.v2 .marquee img { filter: brightness(0) invert(1); opacity: .62; transition: opacity .3s ease, filter .3s ease, transform .3s ease; }
.v2 .marquee a:hover img { opacity: 1; filter: none; transform: scale(1.08); }
.v2 .marquee .proof-text-logo { opacity: .75; transition: opacity .3s ease; }
.v2 .marquee .proof-text-logo:hover { opacity: 1; }

/* FAQ mais limpo */
.v2 .faq-item { border-radius: 16px; box-shadow: 0 1px 2px rgba(14,21,38,.04); transition: box-shadow .3s ease, border-color .3s ease; }
.v2 .faq-item[open], .v2 .faq-item:hover { border-color: rgba(59,130,246,.45); box-shadow: 0 14px 30px -18px rgba(59,130,246,.45); }

/* Titulos do hero com mais presenca */
.v2 .hero h1 { font-size: clamp(2.4rem, 4.8vw, 3.8rem); }
.v2 .hero p.lead { font-size: 18.5px; line-height: 1.65; }
.v2 .badge { backdrop-filter: none; }