/* DotBox Software — site institucional. Visual "papel & código": degradê índigo/violeta/rosa, curvas suaves, seções animadas. Sem fontes/scripts/imagens de terceiros (LGPD).
   Todo o conteúdo já está no HTML: as animações (revelar ao rolar, contadores, cartões flutuantes) são só enfeite — se falharem, o texto e os números corretos continuam visíveis. */
:root {
  --tinta: #0b1020; --tinta-2: #1a2140; --texto: #2b3252; --suave: #565d7a; --linha: #e6e1d7;
  --papel: #faf7f2; --papel-2: #f3eee5; --branco: #fff;
  --indigo: #4f46e5; --violeta: #7c3aed; --coral: #fb7185; --menta: #34d399; --ambar: #f59e0b;
  --roxo: #6d4aff;
  --grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #db2777 120%);
  --raio: 18px; --sombra: 0 10px 30px -12px rgba(30, 27, 75, .25); --sombra-forte: 0 30px 60px -20px rgba(30, 27, 75, .45);
  --fonte: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; font-family: var(--fonte); color: var(--texto); background: var(--papel); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--tinta); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { width: min(1160px, 92%); margin: 0 auto; }
.pequeno { font-size: .88rem; color: var(--suave); }
.etiqueta { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); background: rgba(79, 70, 229, .09); padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.grad { background: linear-gradient(90deg, #a5b4fc 0%, #c4b5fd 45%, #f9a8d4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 99; } .pular:focus { left: 8px; background: #fff; color: var(--tinta); padding: 10px 14px; border-radius: 8px; box-shadow: var(--sombra); }
.i { width: 1.3em; height: 1.3em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .escuro :focus-visible, .rodape :focus-visible, .contato :focus-visible, .menu :focus-visible { outline-color: #fff; }

/* ---------- barra de navegação (vidro fosco ao rolar) ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.nav.rolou, .nav.claro { background: rgba(250, 247, 242, .9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linha); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.marca { display: inline-flex; align-items: center; }
.marca:hover { text-decoration: none; }
.marca img { height: 46px; width: auto; }
.nav .l-clara { display: none; }
.nav.rolou .l-clara, .nav.claro .l-clara { display: block; } .nav.rolou .l-escura, .nav.claro .l-escura { display: none; }
.menu { display: flex; gap: 22px; align-items: center; }
.menu a:not(.btn) { color: rgba(255, 255, 255, .92); font-weight: 600; font-size: .92rem; padding: 6px 2px; }
.nav.rolou .menu a:not(.btn), .nav.claro .menu a:not(.btn) { color: var(--texto); }
.menu a:not(.btn):hover { text-decoration: none; color: var(--coral); }
.hamb { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 8px; border-radius: 8px; line-height: 0; }
.hamb .i { width: 28px; height: 28px; }
.nav.rolou .hamb, .nav.claro .hamb { color: var(--tinta); }
@media (max-width: 1060px) {
  .hamb { display: block; }
  .menu { position: fixed; inset: 72px 0 auto 0; background: var(--tinta); flex-direction: column; align-items: stretch; padding: 16px 20px 22px; gap: 4px; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; box-shadow: var(--sombra-forte); border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .menu.aberto { transform: none; opacity: 1; visibility: visible; }
  .menu a:not(.btn) { color: #fff !important; padding: 12px 6px; font-size: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .menu .btn { margin-top: 10px; justify-content: center; }
}

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: .98rem; border: 2px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.3; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-p { background: var(--grad); color: #fff !important; box-shadow: 0 12px 26px -10px rgba(124, 58, 237, .8); }
.btn-p:hover { box-shadow: 0 18px 32px -10px rgba(124, 58, 237, .9); }
.btn-s { color: #fff !important; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); backdrop-filter: blur(6px); }
.btn-s:hover { background: rgba(255, 255, 255, .18); }
.btn-e { color: var(--indigo) !important; border-color: rgba(79, 70, 229, .4); background: transparent; }
.btn-b { background: #fff; color: var(--tinta) !important; }
.btn-b:hover { background: #f1ecff; }

/* ---------- topo (hero): degradê, pontos, curva e quadro animado ---------- */
.hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(1200px 600px at 85% -10%, rgba(219, 39, 119, .35), transparent 60%), radial-gradient(900px 600px at 0% 20%, rgba(79, 70, 229, .55), transparent 60%), var(--tinta); padding: 150px 0 110px; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .13) 1.2px, transparent 1.2px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 85%); pointer-events: none; }
.hero .bolha { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; animation: deriva 14s ease-in-out infinite alternate; }
.hero .b1 { width: 380px; height: 380px; background: #6d4aff; left: -120px; top: 40%; } .hero .b2 { width: 320px; height: 320px; background: #db2777; right: -90px; top: -60px; animation-delay: -6s; opacity: .35; }
@keyframes deriva { to { transform: translate(40px, -30px) scale(1.12); } }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.hero .wrap > div, .hero .wrap > figure { min-width: 0; }
.hero h1 { color: #fff; }
.hero p.lead { font-size: 1.2rem; color: rgba(255, 255, 255, .86); max-width: 34em; }
.hero .acoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero .nota { margin: 14px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .75); }
.hero .selo { display: inline-flex; gap: 8px; align-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); padding: 7px 14px; border-radius: 999px; font-size: .85rem; margin-bottom: 22px; backdrop-filter: blur(6px); }
.hero .selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 4px rgba(52, 211, 153, .25); animation: pulso 2s infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }
.palco { position: relative; perspective: 1400px; margin: 0; }
.janela { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--sombra-forte); transform: rotateY(-9deg) rotateX(4deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); border: 1px solid rgba(255, 255, 255, .25); }
.palco:hover .janela { transform: rotateY(-2deg) rotateX(1deg); }
.janela .barra { display: flex; gap: 6px; align-items: center; background: #eef0f7; padding: 9px 12px; }
.janela .barra i { width: 10px; height: 10px; border-radius: 50%; background: #d3d7e6; }
.janela .barra i:nth-child(1) { background: #ff6b6b; } .janela .barra i:nth-child(2) { background: #ffd166; } .janela .barra i:nth-child(3) { background: #4ade80; }
.janela .barra span { margin-left: 10px; font-size: .72rem; color: #5b6488; background: #fff; padding: 2px 12px; border-radius: 6px; }
.flutua { position: absolute; background: rgba(255, 255, 255, .96); color: var(--tinta); border-radius: 14px; padding: 12px 16px; box-shadow: var(--sombra-forte); font-size: .85rem; font-weight: 600; display: flex; gap: 10px; align-items: center; animation: flutuar 6s ease-in-out infinite; }
.flutua b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; }
.flutua .i { width: 16px; height: 16px; stroke-width: 2.4; }
.f1 { left: -28px; top: 14%; } .f1 b { background: var(--indigo); }
.f2 { right: -14px; top: 46%; animation-delay: -2s; } .f2 b { background: #059669; }
.f3 { left: 8%; bottom: 50px; animation-delay: -4s; } .f3 b { background: #e11d48; }
@keyframes flutuar { 50% { transform: translateY(-12px); } }
.palco figcaption { margin-top: 26px; font-size: .84rem; color: rgba(255, 255, 255, .78); display: flex; gap: 8px; align-items: center; }
.palco figcaption b { background: rgba(255, 255, 255, .14); border-radius: 6px; padding: 2px 8px; font-weight: 700; color: #fff; }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; } .janela { transform: none; } .f1, .f2 { display: none; } .hero { padding-top: 120px; } .f3 { bottom: 34px; } }
.onda { display: block; width: 100%; height: 70px; margin-top: -1px; }
.hero .onda { position: absolute; left: 0; bottom: -1px; }

/* quadro (ilustração em HTML/CSS com dados fictícios) */
.mini { background: #f6f7fb; padding: 14px; color: var(--tinta); }
.mini-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: .78rem; } .mini-topo b { font-size: .95rem; } .mini-topo span { color: #5b6488; }
.mini-quadro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mini .col { background: #eceef6; border-radius: 10px; padding: 8px; min-height: 250px; }
.mini h5 { margin: 0 0 8px; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: #454d6e; display: flex; justify-content: space-between; } .mini h5 em { font-style: normal; background: #fff; border-radius: 999px; padding: 0 7px; }
.mini .cd { position: relative; background: #fff; border-radius: 9px; padding: 8px 8px 8px 12px; margin-bottom: 7px; box-shadow: 0 1px 0 rgba(20, 20, 60, .06); font-size: .68rem; line-height: 1.3; transition: transform .3s; }
.palco:hover .mini .cd:nth-child(2) { transform: translateY(-3px); }
.mini .cd b { display: block; font-size: .72rem; } .mini .cd small { color: #5b6488; font-size: .62rem; }
.mini .cd i { position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; }
.mini .t1 { background: #6366f1; } .mini .t2 { background: #fb7185; } .mini .t3 { background: #34d399; } .mini .t4 { background: #f59e0b; } .mini .t5 { background: #22d3ee; }
.mini .prog { display: block; height: 4px; background: #e5e7f3; border-radius: 4px; margin-top: 6px; } .mini .prog u { display: block; height: 100%; border-radius: 4px; background: var(--grad); animation: encher 3s ease-in-out infinite alternate; }
@keyframes encher { from { filter: saturate(.7); } to { filter: saturate(1.4); } }
.mini .cd.ok { opacity: .75; }

/* ---------- faixa de números (contadores animados) ---------- */
.numeros { margin-top: -40px; position: relative; z-index: 3; }
.numeros .grade { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--branco); border-radius: 22px; box-shadow: var(--sombra); overflow: hidden; }
.numeros .n { padding: 26px 22px; text-align: center; border-right: 1px solid var(--linha); }
.numeros .n:last-child { border: 0; }
.numeros strong { display: block; font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numeros span { font-size: .9rem; color: var(--suave); }
@media (max-width: 800px) { .numeros .grade { grid-template-columns: 1fr 1fr; } .numeros .n { border-bottom: 1px solid var(--linha); } }

/* ---------- seções e curvas ---------- */
section { padding: 96px 0; position: relative; }
.cab { max-width: 760px; margin-bottom: 48px; }
.cab.centro { margin-left: auto; margin-right: auto; text-align: center; }
.cab p { font-size: 1.1rem; color: var(--suave); }
.papel-2 { background: var(--papel-2); }
.escuro { background: var(--tinta); color: rgba(255, 255, 255, .85); }
.escuro h2, .escuro h3 { color: #fff; } .escuro .cab p { color: rgba(255, 255, 255, .78); }
.escuro .etiqueta { color: #ddd6fe; background: rgba(199, 210, 254, .14); }
.curva { position: absolute; left: 0; bottom: -1px; width: 100%; height: 56px; display: block; }
.c-papel { color: var(--papel); } .c-papel-2 { color: var(--papel-2); } .c-tinta { color: var(--tinta); }
.com-curva { padding-bottom: 130px; }
.faixa-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 44px; padding: 22px 26px; background: #fff; border: 1px solid #ddd6ff; border-radius: var(--raio); box-shadow: var(--sombra); }
.faixa-cta p { margin: 0; font-weight: 700; color: var(--tinta); }

/* ---------- para quem é ---------- */
.aviso-escala { max-width: 900px; margin: 0 auto 40px; text-align: center; font-size: 1.12rem; color: var(--texto); }
.aviso-escala strong { color: var(--tinta); }
.perfis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.perfil, .grupo { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px; transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden; }
.perfil { display: flex; flex-direction: column; }
.perfil::after, .grupo::after, .seg .item::after, .passos li::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.perfil:hover, .grupo:hover, .seg .item:hover, .passos li:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: #d9d3ff; }
.perfil:hover::after, .grupo:hover::after, .seg .item:hover::after, .passos li:hover::after { transform: scaleX(1); }
.perfil .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); color: var(--indigo); }
.perfil .ico .i { width: 26px; height: 26px; }
.perfil h3 { font-size: 1.18rem; }
.perfil p { color: var(--suave); font-size: .96rem; }
.perfil h4 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); margin: 6px 0 8px; }
.perfil ul { margin: 0; padding: 0; list-style: none; font-size: .94rem; }
.perfil li { padding: 6px 0 6px 26px; position: relative; border-top: 1px dashed var(--linha); }
.perfil li::before { content: "✓"; position: absolute; left: 3px; top: 6px; color: #059669; font-weight: 800; }
.avaliacao { margin-top: 26px; text-align: center; color: var(--suave); }
@media (max-width: 980px) { .perfis { grid-template-columns: 1fr; } }

/* ---------- o sistema: capturas em molduras (visual restaurado) ---------- */
.caso { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.caso + .caso { margin-top: 90px; } .caso.inverso .texto { order: 2; }
.caso .texto h3 { font-size: 1.6rem; }
.caso .texto p { color: var(--suave); }
.caso .texto ul { list-style: none; padding: 0; margin: 18px 0 0; }
.caso .texto li { padding: 9px 0 9px 30px; position: relative; border-bottom: 1px dashed var(--linha); }
.caso .texto li::before { content: "✓"; position: absolute; left: 0; color: #059669; font-weight: 800; }
.moldura { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra-forte); border: 1px solid var(--linha); background: #fff; transition: transform .5s; }
.moldura:hover { transform: scale(1.02) rotate(-.4deg); }
.moldura .barra { display: flex; gap: 6px; padding: 9px 12px; background: #eef0f7; }
.moldura .barra i { width: 10px; height: 10px; border-radius: 50%; background: #cfd4e6; }
.moldura .barra i:nth-child(1) { background: #ff6b6b; } .moldura .barra i:nth-child(2) { background: #ffd166; } .moldura .barra i:nth-child(3) { background: #4ade80; }
.moldura a.img { display: block; position: relative; max-height: 470px; overflow: hidden; }
.moldura a.img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, rgba(255, 255, 255, .95)); pointer-events: none; }
.moldura a.img img { width: 100%; }
.moldura .amp { position: absolute; right: 12px; bottom: 12px; z-index: 2; background: rgba(11, 16, 32, .9); color: #fff; font-size: .8rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; }
.moldura .amp .i { width: 1.1em; height: 1.1em; }
.moldura figcaption { padding: 12px 16px; font-size: .85rem; color: var(--suave); border-top: 1px solid var(--linha); background: #fff; }
@media (max-width: 900px) { .caso { grid-template-columns: 1fr; gap: 28px; } .caso.inverso .texto { order: 0; } .moldura a.img { max-height: 380px; } }

/* ---------- recursos em três conjuntos ---------- */
.grupos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.grupo > h3 { font-size: 1.2rem; margin-bottom: 14px; }
.rec { display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; padding: 14px 0; border-top: 1px solid var(--linha); }
.rec > .i { grid-row: span 2; width: 26px; height: 26px; color: var(--violeta); margin-top: 2px; }
.rec h4 { font-size: 1rem; margin: 0 0 4px; }
.rec p { margin: 0; font-size: .93rem; color: var(--suave); }
.marca-estado { display: inline-block; margin-left: 6px; vertical-align: 1px; }
.diferenciais { margin-top: 28px; background: var(--tinta); color: rgba(255, 255, 255, .86); border-radius: var(--raio); padding: 30px 32px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: start; background-image: radial-gradient(600px 300px at 100% 0%, rgba(219, 39, 119, .25), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(79, 70, 229, .4), transparent 60%); }
.diferenciais h3 { color: #fff; font-size: 1.3rem; } .diferenciais p { color: rgba(255, 255, 255, .82); margin: 0; }
.diferenciais .etiqueta { background: rgba(255, 255, 255, .12); color: #ddd6fe; }
.diferenciais .dois { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.diferenciais .dois > div { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 16px; }
.diferenciais h4 { color: #fff; display: flex; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 1rem; } .diferenciais .dois p { font-size: .92rem; }
@media (max-width: 980px) { .grupos { grid-template-columns: 1fr; } .diferenciais { grid-template-columns: 1fr; padding: 24px; } }
@media (max-width: 620px) { .diferenciais .dois { grid-template-columns: 1fr; } }

/* ---------- integrações (grade estática, rótulos em texto) ---------- */
.integ-grupos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.integ-grupo { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--raio); padding: 24px; backdrop-filter: blur(6px); transition: transform .25s, background .25s; }
.integ-grupo:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
.integ-grupo > h3 { font-size: 1.1rem; margin-bottom: 4px; } .integ-grupo > p { color: rgba(255, 255, 255, .72); font-size: .92rem; margin-bottom: 12px; }
.integ { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.integ b { display: block; color: #fff; font-size: 1rem; } .integ small { display: block; color: rgba(255, 255, 255, .7); font-size: .84rem; line-height: 1.4; }
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex: none; }
.estado .i { width: 1em; height: 1em; stroke-width: 2.4; }
.estado.ok { background: rgba(52, 211, 153, .18); color: #86efac; } .estado.em { background: rgba(251, 191, 36, .18); color: #fcd34d; } .estado.ev { background: #ede9fe; color: #5b21b6; }
.integ-aviso { margin-top: 22px; font-size: .9rem; color: rgba(255, 255, 255, .72); text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
@media (max-width: 980px) { .integ-grupos { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .integ { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* ---------- origem ---------- */
.origem { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.marcos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: m; }
.marcos li { counter-increment: m; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 16px 18px 16px 62px; position: relative; }
.marcos li::before { content: counter(m); position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; display: grid; place-items: center; }
.marcos strong { display: block; color: var(--tinta); } .marcos span { font-size: .93rem; color: var(--suave); }
.origem .destaque { border-left: 4px solid var(--violeta); padding: 4px 0 4px 18px; font-size: 1.08rem; color: var(--tinta); font-weight: 600; }
@media (max-width: 900px) { .origem { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- segurança ---------- */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.seg .item { padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--linha); box-shadow: 0 6px 18px -14px rgba(30, 27, 75, .35); position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.seg .item .i { color: var(--violeta); width: 28px; height: 28px; margin-bottom: 10px; }
.seg .item h3 { font-size: 1.02rem; } .seg .item p { font-size: .92rem; margin: 0; color: var(--suave); }
.seg-nota { margin-top: 22px; text-align: center; color: var(--suave); }
@media (max-width: 980px) { .seg { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .seg { grid-template-columns: 1fr; } }

/* ---------- como começar ---------- */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: p; list-style: none; padding: 0; margin: 0; }
.passos li { background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; padding: 22px 18px; counter-increment: p; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.passos li::before { content: counter(p); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; margin-bottom: 12px; }
.passos h3 { font-size: 1.05rem; } .passos p { font-size: .92rem; color: var(--suave); margin: 0; }
.vias { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.via { border-radius: var(--raio); padding: 24px; background: var(--branco); border: 1px solid var(--linha); }
.via h3 { margin-bottom: 6px; } .via p { margin: 0; color: var(--suave); font-size: .95rem; }
.via.sob-medida { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border-color: #d9d3ff; }
.via .etiqueta { margin-bottom: 8px; }
@media (max-width: 980px) { .passos { grid-template-columns: 1fr 1fr; } .vias { grid-template-columns: 1fr; } } @media (max-width: 560px) { .passos { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
details { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 0 20px; margin-bottom: 10px; transition: box-shadow .2s; }
details[open] { box-shadow: var(--sombra); }
summary { cursor: pointer; font-weight: 700; color: var(--tinta); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--indigo); flex: none; transition: transform .25s; } details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 16px; color: var(--texto); }

/* ---------- contato ---------- */
.contato { background: var(--grad); color: #fff; border-radius: 28px; padding: 56px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; box-shadow: var(--sombra-forte); }
.contato > * { min-width: 0; }
.contato h2 { color: #fff; } .contato p { color: #fff; }
.contato .acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.form-contato { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 24px; }
.form-contato .campo-full { grid-column: 1 / -1; }
.form-contato label { display: block; font-size: .82rem; font-weight: 700; color: rgba(255, 255, 255, .92); margin-bottom: 5px; }
.form-contato input, .form-contato textarea, .form-contato select { width: 100%; font: inherit; font-size: .95rem; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .96); color: var(--tinta); resize: vertical; }
.form-contato input::placeholder, .form-contato textarea::placeholder { color: var(--suave); }
.acoes-form { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 560px) { .form-contato { grid-template-columns: 1fr; } .form-contato .campo-full { grid-column: 1; } .acoes-form .btn { width: 100%; } }
.contato .cx { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); border-radius: 18px; padding: 24px; backdrop-filter: blur(8px); }
.contato .cx a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .contato .cx p { margin-bottom: .7em; }
.contato .pequeno { color: rgba(255, 255, 255, .92); }
.contato .copiado { font-size: .85rem; color: #fff; min-height: 1.3em; margin: 6px 0 0; }
@media (max-width: 860px) { .contato { grid-template-columns: 1fr; padding: 32px 22px; } }

/* ---------- WhatsApp: botão flutuante e botão do contato ---------- */
.i.cheio { fill: currentColor; stroke: none; }
.zap { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: inline-flex; align-items: center; gap: 0; height: 60px; min-width: 60px; padding: 0 18px; border-radius: 999px; background: #0e7c41; color: #fff; box-shadow: 0 10px 28px -8px rgba(14, 124, 65, .75); animation: zap-flutua 3.2s ease-in-out infinite; transition: gap .25s, padding .25s, background .2s; }
.zap:hover, .zap:focus-visible { text-decoration: none; background: #0b6b38; gap: 10px; padding: 0 22px 0 18px; }
.zap::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25d366; animation: zap-onda 2.4s ease-out infinite; pointer-events: none; }
.zap .i { width: 28px; height: 28px; }
.zap-txt { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: .95rem; transition: max-width .25s; }
.zap:hover .zap-txt, .zap:focus-visible .zap-txt { max-width: 180px; }
.zap:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #0e7c41; }
@keyframes zap-flutua { 50% { transform: translateY(-8px); } }
@keyframes zap-onda { from { transform: scale(1); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.btn-zap { background: #0e7c41; color: #fff !important; border-color: rgba(255, 255, 255, .55); }
.btn-zap:hover { background: #0b6b38; }
@media print { .zap { display: none; } }
@media (max-width: 720px) { .zap { right: 14px; bottom: 14px; height: 56px; min-width: 56px; padding: 0 16px; } .contato .acoes .btn-zap { width: 100%; } }

/* ---------- rodapé ---------- */
.rodape { background: var(--tinta); color: rgba(255, 255, 255, .78); padding: 56px 0 30px; font-size: .92rem; }
.rodape a { color: rgba(255, 255, 255, .92); } .rodape .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 30px; }
.rodape h3 { color: #fff; font-size: .95rem; margin-bottom: 12px; } .rodape li { list-style: none; margin-bottom: 8px; } .rodape ul { padding: 0; margin: 0; }
.rodape .marca { margin-bottom: 14px; }
.rodape .pequeno { color: rgba(255, 255, 255, .72); }
.rodape .fim { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; }
@media (max-width: 800px) { .rodape .cols { grid-template-columns: 1fr 1fr; } }

/* ---------- páginas de texto (privacidade, termos, segurança) ---------- */
.pagina { padding: 130px 0 70px; } .pagina .conteudo { max-width: 820px; }
.pagina h1 { font-size: clamp(2rem, 4vw, 2.8rem); } .pagina h2 { font-size: 1.4rem; margin-top: 2em; } .pagina li { margin-bottom: .4em; }
.aviso { background: #fff8e6; border: 1px solid #f4d58d; border-radius: 12px; padding: 14px 18px; font-size: .92rem; color: #5e4300; }
.tabela { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1em 0; } .tabela th, .tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; } .tabela th { background: var(--papel-2); }

/* ---------- entrada suave ao rolar ---------- */
/* Só esconde quando há JavaScript habilitado; se o script não rodar em 3 s, o CSS mostra tudo sozinho (nunca fica conteúdo invisível). */
@media (scripting: enabled) {
  .rev { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); animation: revelar .01s 3s forwards; }
  html.js-ok .rev { animation: none; }
  .rev.visivel { opacity: 1; transform: none; animation: none; }
  .rev.d1 { transition-delay: .08s; } .rev.d2 { transition-delay: .16s; } .rev.d3 { transition-delay: .24s; }
}
@keyframes revelar { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .rev { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } .janela { transform: none; } }
@media print { .nav, .hero::before, .flutua, .bolha { display: none; } .rev { opacity: 1; transform: none; } }

/* ================= HUB DE PRODUTOS (página inicial) e página do ERP =================
   Cada produto tem uma cor própria (--acc). As ilustrações são HTML/CSS com dados fictícios e são só enfeite: o texto do produto está sempre no HTML. */
.c-azul { color: #eef4ff; }
.voltar { display: inline-block; margin-bottom: 16px; color: rgba(255, 255, 255, .88); font-weight: 600; font-size: .9rem; }
.voltar:hover { color: #fff; }
.hero .nota a, .hero .ja-cliente a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hero .ja-cliente { margin-top: 8px; }

/* ---------- topo do hub: os quatro produtos em órbita ---------- */
.orbita { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin: 0 auto; }
.orbita .anel { position: absolute; inset: 16%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .3); animation: gira 70s linear infinite; }
.orbita::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(109, 74, 255, .5), rgba(219, 39, 119, .16) 65%, transparent); filter: blur(10px); animation: respira 6s ease-in-out infinite alternate; }
.sat { position: absolute; width: 0; height: 0; }
.s-1 { left: 50%; top: 0; } .s-2 { left: 100%; top: 50%; } .s-3 { left: 50%; top: 100%; } .s-4 { left: 0; top: 50%; }
.sat .cartao { position: absolute; left: -54px; top: -40px; width: 108px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #fff; border-radius: 18px; box-shadow: var(--sombra-forte); animation: gira 70s linear infinite reverse; }
.sat .cartao img { width: 38px; height: 38px; }
.sat .cartao b { font-size: .86rem; color: var(--tinta); letter-spacing: -.01em; }
.ico-erp { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #4f46e5, #db2777); }
.ico-erp .i { width: 22px; height: 22px; }
.nucleo { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, .12), var(--sombra-forte); }
.nucleo img { width: 50px; height: auto; }
.nucleo::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: zap-onda 3s ease-out infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes respira { to { transform: scale(1.08); opacity: .75; } }
@media (max-width: 980px) { .orbita { width: min(380px, 100%); margin-top: 8px; } }
@media (max-width: 420px) { .sat .cartao { left: -46px; top: -34px; width: 92px; height: 68px; border-radius: 15px; } .sat .cartao img, .ico-erp { width: 30px; height: 30px; } .sat .cartao b { font-size: .78rem; } .nucleo { width: 92px; height: 92px; margin: -46px 0 0 -46px; } .nucleo img { width: 40px; } }

/* ---------- "por onde começar": quatro verbos, quatro caminhos ---------- */
.escolhas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.escolha { --cor: var(--indigo); display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 22px; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); color: var(--texto); position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.escolha::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--cor); }
.escolha:hover { text-decoration: none; transform: translateY(-6px); box-shadow: var(--sombra); border-color: var(--cor); }
.escolha .verbo { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--tinta); line-height: 1.1; }
.escolha .pergunta { flex: 1; color: var(--suave); font-size: .98rem; }
.escolha .prod { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--linha); font-weight: 700; color: var(--tinta); }
.escolha .prod img { width: 28px; height: 28px; }
.escolha .prod::after { content: "→"; margin-left: auto; color: var(--cor); font-size: 1.2rem; transition: transform .25s; }
.escolha:hover .prod::after { transform: translateX(5px); }
.mini-ico { width: 28px; height: 28px; border-radius: 8px; } .mini-ico .i { width: 17px; height: 17px; }
.e-editbox { --cor: #ef765e; } .e-emvitrine { --cor: #1769e0; } .e-vynio { --cor: #5b3df5; } .e-erp { --cor: #7c3aed; }
@media (max-width: 980px) { .escolhas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .escolhas { grid-template-columns: 1fr; } }

/* ---------- uma seção por produto ---------- */
.produto { --acc: var(--indigo); }
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.p-grid > * { min-width: 0; }
.p-grid.inverso .texto { order: 2; }
.produto h2 { font-size: clamp(1.7rem, 3.1vw, 2.45rem); }
.p-editbox { --acc: #c2410c; background: radial-gradient(700px 420px at 100% 0%, rgba(241, 185, 82, .24), transparent 62%), radial-gradient(600px 420px at 0% 100%, rgba(239, 118, 94, .16), transparent 62%), var(--papel); }
.p-emvitrine { --acc: #1769e0; background: radial-gradient(700px 420px at 0% 0%, rgba(23, 105, 224, .16), transparent 62%), radial-gradient(500px 360px at 100% 100%, rgba(18, 208, 230, .14), transparent 62%), #eef4ff; }
.p-vynio { --acc: #5b3df5; background: radial-gradient(800px 500px at 95% 8%, rgba(18, 208, 230, .22), transparent 60%), radial-gradient(700px 520px at 0% 95%, rgba(91, 61, 245, .5), transparent 60%), var(--tinta); }
.p-erp { --acc: var(--indigo); }
.logo-chip { display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 10px 18px; box-shadow: 0 10px 22px -14px rgba(30, 27, 75, .5); margin-bottom: 18px; }
.logo-chip em { font-style: normal; font-weight: 800; letter-spacing: .1em; font-size: .78rem; text-transform: uppercase; color: var(--acc); }
.logo-prod { height: 44px; width: auto; max-width: 100%; } .logo-prod.logo-erp { height: 58px; }
.produto .etiqueta { color: var(--acc); background: rgba(255, 255, 255, .7); border: 1px solid rgba(30, 27, 75, .1); display: table; }
.p-vynio .etiqueta { color: #c7d2fe; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.destaque-p { font-size: 1.1rem; color: var(--texto); }
.pontos { list-style: none; padding: 0; margin: 18px 0 20px; }
.pontos li { padding: 9px 0 9px 30px; position: relative; border-bottom: 1px dashed var(--linha); }
.pontos li::before { content: "✓"; position: absolute; left: 2px; color: #059669; font-weight: 800; }
.oferta { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 11px 14px; border-radius: 12px; font-size: .93rem; font-weight: 600; background: rgba(23, 105, 224, .09); border: 1px solid rgba(23, 105, 224, .25); color: #0f3f8a; }
.oferta .i { color: #059669; margin-top: 2px; width: 1.2em; height: 1.2em; }
.produto .acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.p-editbox .btn-p { background: #173949; box-shadow: 0 12px 26px -10px rgba(23, 57, 73, .75); }
.p-editbox .btn-e { color: #173949 !important; border-color: rgba(23, 57, 73, .4); }
.p-emvitrine .btn-p { background: linear-gradient(135deg, #1769e0, #0b4fb8); box-shadow: 0 12px 26px -10px rgba(23, 105, 224, .8); }
.p-emvitrine .btn-e { color: #1156b3 !important; border-color: rgba(23, 105, 224, .45); }
.p-vynio .btn-p { background: linear-gradient(135deg, #5b3df5, #0070ea); box-shadow: 0 12px 26px -10px rgba(91, 61, 245, .9); }
.p-vynio .destaque-p { color: rgba(255, 255, 255, .9); }
.p-vynio .pontos li { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .92); } .p-vynio .pontos li::before { color: var(--menta); }
.p-vynio .oferta { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); color: #fff; } .p-vynio .oferta .i { color: var(--menta); }
.ja-cliente-hub { margin: 14px 0 0; }
.vis { position: relative; margin: 0; padding: 56px 0 8px; }
.vis figcaption { margin-top: 18px; text-align: center; font-size: .84rem; color: var(--suave); }
.p-vynio .vis figcaption { color: rgba(255, 255, 255, .75); }
.produto .flutua { z-index: 3; }
.f-e1 { right: -6px; top: 0; } .f-v1 { left: 0; top: 0; } .f-v2 { right: -30px; bottom: 26px; animation-delay: -3s; }
.f-y1 { left: 0; top: 0; } .f-y2 { right: -26px; bottom: 70px; animation-delay: -3s; }
.f-g1 { right: -8px; top: 0; } .f-g2 { left: 4%; bottom: 44px; animation-delay: -3s; }
.f-e1 b { background: #ef765e; } .f-v1 b { background: #1769e0; } .f-v2 b { background: #0e7c41; } .f-y1 b { background: #5b3df5; } .f-y2 b { background: #0070ea; } .f-g1 b { background: #059669; } .f-g2 b { background: #e11d48; }

/* EditBox: editor + caixa personalizada girando */
.v-edit { display: grid; grid-template-columns: 1.05fr .95fr; gap: 14px; align-items: center; }
.v-edit figcaption { grid-column: 1 / -1; margin-top: 4px; }
.ed-card { background: #fff; border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra-forte); overflow: hidden; transform: rotate(-2.5deg); }
.ed-barra { display: flex; gap: 6px; align-items: center; background: #eef0f7; padding: 9px 12px; }
.ed-barra i { width: 10px; height: 10px; border-radius: 50%; background: #cfd4e6; } .ed-barra i:nth-child(1) { background: #ff6b6b; } .ed-barra i:nth-child(2) { background: #ffd166; } .ed-barra i:nth-child(3) { background: #4ade80; }
.ed-barra span { margin-left: 8px; font-size: .78rem; font-weight: 700; color: #173949; }
.ed-corpo { padding: 16px; display: grid; gap: 4px; }
.ed-rotulo { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5b6488; }
.ed-campo { display: flex; align-items: center; border: 1.5px solid #cfd8e3; border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; font-weight: 700; color: #173949; }
.cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; background: #ef765e; animation: piscar 1s steps(2, start) infinite; }
@keyframes piscar { to { visibility: hidden; } }
.ed-pill { display: inline-flex; align-items: center; justify-self: start; gap: 6px; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: #e3f6ec; color: #046c4e; font-weight: 700; font-size: .8rem; }
.ed-pill .i { width: 14px; height: 14px; stroke-width: 2.6; }
.cena { position: relative; display: grid; place-items: center; height: 280px; perspective: 900px; }
.cubo { --s: 132px; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(-30deg); animation: gira-cubo 18s linear infinite; }
.face { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; border: 3px solid #173949; border-radius: 6px; background: linear-gradient(160deg, #fff8e8, #fde0d6); backface-visibility: hidden; }
.face.fr { transform: translateZ(calc(var(--s) / 2)); } .face.tr { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.face.ld { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: #f1b952; } .face.le { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background: #ef765e; }
.face.topo { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: #173949; }
.face b { font-size: 1.12rem; color: #173949; } .face small { font-size: .78rem; font-weight: 700; color: #b23a0c; }
.cena .sombra { position: absolute; bottom: 20px; width: 118px; height: 16px; border-radius: 50%; background: rgba(23, 57, 73, .22); filter: blur(7px); }
@keyframes gira-cubo { to { transform: rotateX(-22deg) rotateY(330deg); } }
@media (max-width: 520px) { .v-edit { grid-template-columns: 1fr; } .cena { height: 220px; } }

/* celular (Em Vitrine e Vynio) */
.fone { width: min(280px, 80%); margin: 0 auto; padding: 10px; border-radius: 36px; background: #0b1020; box-shadow: var(--sombra-forte); position: relative; transform: rotate(2deg); transition: transform .5s; }
.vis:hover .fone { transform: rotate(0); }
.fone::before { content: ""; position: absolute; top: 17px; left: 50%; width: 64px; height: 6px; margin-left: -32px; border-radius: 6px; background: #252c4d; z-index: 2; }
.fone-tela { border-radius: 27px; background: #fff; overflow: hidden; min-height: 440px; padding: 30px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.vt-topo { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--tinta); }
.vt-logo { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #1769e0, #12d0e6); }
.vt-topo em { margin-left: auto; font-style: normal; font-size: .66rem; color: #5b6488; }
.vt-faixa { background: #e4efff; color: #0f4fa8; font-weight: 700; font-size: .7rem; padding: 7px 10px; border-radius: 10px; text-align: center; }
.vt-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vt-prod { border: 1px solid #e3e9f5; border-radius: 12px; padding: 6px; font-size: .72rem; line-height: 1.3; color: var(--tinta); }
.vt-prod i { display: block; height: 64px; border-radius: 8px; margin-bottom: 6px; }
.vt-prod small { display: block; color: #5b6488; font-size: .62rem; }
.g1 { background: linear-gradient(135deg, #ffd6e0, #ffb3c6); } .g2 { background: linear-gradient(135deg, #cfe6ff, #8ec5ff); } .g3 { background: linear-gradient(135deg, #ffeab0, #ffd166); } .g4 { background: linear-gradient(135deg, #d6f6e6, #9be3c0); }
.vt-zap { margin-top: auto; display: flex; gap: 6px; align-items: center; justify-content: center; padding: 10px; border-radius: 999px; background: #0e7c41; color: #fff; font-weight: 700; font-size: .78rem; animation: pulsa 2.6s ease-in-out infinite; }
.vt-zap .i { width: 16px; height: 16px; }
@keyframes pulsa { 50% { transform: scale(1.04); } }
.p-vynio .fone { background: #05071a; box-shadow: 0 30px 60px -20px rgba(18, 208, 230, .4); }
.p-vynio .fone-tela { align-items: center; color: #fff; background: linear-gradient(170deg, #5b3df5 0%, #0070ea 62%, #12d0e6 125%); }
.vy-perfil { display: grid; justify-items: center; text-align: center; gap: 2px; margin-bottom: 6px; }
.vy-avatar { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: #5b3df5; font-size: 1.5rem; font-weight: 800; box-shadow: 0 0 0 5px rgba(255, 255, 255, .3); }
.vy-perfil b { margin-top: 6px; font-size: .98rem; } .vy-perfil small { font-size: .66rem; opacity: .92; }
.vy-link { display: block; width: 100%; text-align: center; padding: 9px; border-radius: 999px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .55); font-weight: 700; font-size: .78rem; animation: sobe 5s ease-in-out infinite; }
.vy-link:nth-of-type(2) { animation-delay: -1.2s; } .vy-link:nth-of-type(3) { animation-delay: -2.4s; } .vy-link:nth-of-type(4) { animation-delay: -3.6s; }
@keyframes sobe { 50% { transform: translateY(-3px); background: rgba(255, 255, 255, .3); } }
.vy-qr { width: 66px; height: 66px; margin-top: auto; padding: 5px; border-radius: 10px; background: #fff; color: #0b1020; }

/* ERP: o quadro de pedidos */
.v-erp { perspective: 1400px; }
.v-erp .janela { transform: rotateY(8deg) rotateX(3deg); }
.v-erp:hover .janela { transform: rotateY(2deg) rotateX(1deg); }
.mini-quadro.tres { grid-template-columns: repeat(3, 1fr); }
.v-erp .mini .col { min-height: 220px; }

@media (max-width: 900px) { .p-grid { grid-template-columns: 1fr; gap: 30px; } .p-grid.inverso .texto { order: 0; } .v-erp .janela { transform: none; } }
@media (max-width: 720px) { .logo-prod { height: 38px; } .produto .acoes .btn { width: 100%; } .fone-tela { min-height: 410px; } }
@media (prefers-reduced-motion: reduce) { .cubo { animation: none; } .orbita .anel, .sat .cartao { animation: none; } }

/* ---------- celular / tablet: nada pode passar da largura da tela ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
svg, video, canvas { max-width: 100%; }
@media (max-width: 720px) {
  .wrap { width: calc(100% - 32px); }
  section { padding: 64px 0; } .com-curva { padding-bottom: 100px; }
  .hero { padding: 108px 0 76px; } .hero p.lead { font-size: 1.05rem; }
  .hero .acoes .btn { width: 100%; }
  .flutua { display: none; } .palco figcaption { margin-top: 14px; }
  .mini { padding: 10px; }
  .mini-quadro { grid-template-columns: 1fr 1fr; } .mini .col:nth-child(n+3) { display: none; } .mini .col { min-height: 210px; }
  .numeros { margin-top: -28px; } .numeros strong { font-size: 1.7rem; } .numeros .n { padding: 18px 12px; }
  .cab { margin-bottom: 30px; } .cab p { font-size: 1rem; }
  .caso { gap: 22px; } .caso + .caso { margin-top: 56px; }
  .contato { border-radius: 20px; } .contato .acoes .btn, .faixa-cta .btn { width: 100%; }
  .rodape .cols { grid-template-columns: 1fr; gap: 22px; } .rodape .fim { flex-direction: column; }
  .pagina { padding-top: 104px; }
  .tabela { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  h2 { overflow-wrap: anywhere; }
  .marca img { height: 40px; }
  .curva { height: 36px; }
}