/* Site institucional — design "papel & código": tons de papel quente + índigo/violeta, vidro fosco, transições suaves. Sem fontes/scripts externos (LGPD: nenhuma requisição a terceiros). */
:root {
  --tinta: #0b1020; --tinta-2: #1a2140; --texto: #2b3252; --suave: #5b6488; --linha: #e6e1d7;
  --papel: #faf7f2; --papel-2: #f3eee5; --branco: #fff;
  --indigo: #4f46e5; --violeta: #7c3aed; --coral: #fb7185; --menta: #34d399; --ambar: #f59e0b;
  --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: 84px; }
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%; 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; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); 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: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pular { position: absolute; left: -999px; } .pular:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 99; }

/* ---------- barra de navegação ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.nav.rolou { background: rgba(250, 247, 242, .82); 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: flex; align-items: center; gap: 12px; color: var(--branco); font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; }
.marca:hover { text-decoration: none; }
.marca img { width: 38px; height: 38px; }
.marca small { display: block; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; opacity: .8; font-weight: 600; margin-top: 2px; }
.nav.rolou .marca, .nav.claro .marca { color: var(--tinta); }
.menu { display: flex; gap: 26px; align-items: center; }
.menu a { color: rgba(255, 255, 255, .86); font-weight: 600; font-size: .94rem; }
.nav.rolou .menu a:not(.btn), .nav.claro .menu a:not(.btn) { color: var(--texto); }
.menu a:hover { text-decoration: none; color: var(--coral); }
.hamb { display: none; background: none; border: 0; color: inherit; font-size: 1.6rem; cursor: pointer; }
.nav.rolou .hamb, .nav.claro .hamb { color: var(--tinta); }
@media (max-width: 900px) {
  .hamb { display: block; color: #fff; }
  .menu { position: fixed; inset: 72px 0 auto 0; background: var(--tinta); flex-direction: column; padding: 20px; gap: 14px; transform: translateY(-140%); transition: transform .3s; }
  .menu.aberto { transform: none; } .menu a { color: #fff !important; }
}

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: .98rem; border: 2px solid transparent; cursor: pointer; 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, .4); 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, .3); background: transparent; }

/* ---------- hero ---------- */
.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 .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.hero .wrap > div { min-width: 0; }
.hero h1 { color: #fff; }
.hero p.lead { font-size: 1.22rem; color: rgba(255, 255, 255, .82); max-width: 34em; }
.hero .acoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero .selo { display: inline-flex; gap: 8px; align-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); 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; }
.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: #6b7394; background: #fff; padding: 2px 12px; border-radius: 6px; }
.janela img { width: 100%; }
.flutua { position: absolute; background: rgba(255, 255, 255, .95); 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; }
.f1 { left: -28px; top: 14%; } .f1 b { background: var(--indigo); }
.f2 { right: -14px; top: 46%; animation-delay: -2s; } .f2 b { background: var(--menta); }
.f3 { left: 8%; bottom: -22px; animation-delay: -4s; } .f3 b { background: var(--coral); }
@keyframes flutuar { 50% { transform: translateY(-12px); } }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; } .janela { transform: none; } .f1, .f2 { display: none; } .hero { padding-top: 120px; } }
.onda { display: block; width: 100%; height: 70px; margin-top: -1px; }

/* ---------- faixa de números ---------- */
.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; }
.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 ---------- */
section { padding: 96px 0; }
.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, .8); }
.escuro h2, .escuro h3 { color: #fff; } .escuro .cab p { color: rgba(255, 255, 255, .65); }
.escuro .etiqueta { color: #c7d2fe; background: rgba(199, 210, 254, .12); }

.cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cartao { 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; }
.cartao::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.cartao:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: #d9d3ff; }
.cartao:hover::after { transform: scaleX(1); }
.cartao .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.45rem; margin-bottom: 16px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); }
.cartao p { color: var(--suave); font-size: .96rem; margin: 0; }
.cartao ul { margin: 12px 0 0; padding-left: 18px; color: var(--suave); font-size: .92rem; }
@media (max-width: 980px) { .cartoes { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .cartoes { grid-template-columns: 1fr; } }

/* ---------- caso DotBox: vitrine de telas ---------- */
.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 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: var(--menta); font-weight: 800; }
.moldura { 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; }
@media (max-width: 900px) { .caso { grid-template-columns: 1fr; gap: 28px; } .caso.inverso .texto { order: 0; } }

/* ---------- linha do tempo ---------- */
.linha-tempo { position: relative; display: grid; gap: 22px; padding-left: 34px; }
.linha-tempo::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: linear-gradient(var(--indigo), var(--coral)); }
.passo { position: relative; background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; padding: 18px 22px; }
.passo::before { content: ""; position: absolute; left: -34px; top: 22px; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 4px solid var(--indigo); }
.passo h3 { margin-bottom: 4px; } .passo p { margin: 0; color: var(--suave); font-size: .95rem; }
.passo .fase { font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: var(--violeta); text-transform: uppercase; }

/* ---------- integrações (faixa em movimento) ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .trilho { display: flex; gap: 18px; width: max-content; animation: correr 38s linear infinite; }
.marquee:hover .trilho { animation-play-state: paused; }
.selo-int { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); color: #fff; padding: 16px 26px; border-radius: 14px; font-weight: 700; white-space: nowrap; font-size: 1.05rem; }
.selo-int small { display: block; font-weight: 500; color: rgba(255, 255, 255, .55); font-size: .72rem; letter-spacing: .04em; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- segurança ---------- */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.seg .item { padding: 22px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.seg .item h3 { font-size: 1rem; } .seg .item p { font-size: .9rem; margin: 0; color: rgba(255, 255, 255, .65); }
@media (max-width: 980px) { .seg { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .seg { grid-template-columns: 1fr; } }

/* ---------- processo / sobre / faq / contato ---------- */
.processo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: p; }
.processo .p { background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; padding: 22px 18px; counter-increment: p; }
.processo .p::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; }
.processo .p p { font-size: .9rem; color: var(--suave); margin: 0; }
@media (max-width: 980px) { .processo { grid-template-columns: 1fr 1fr; } }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .duas { grid-template-columns: 1fr; } }
details { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; 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; gap: 12px; }
summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--indigo); transition: transform .25s; } details[open] summary::after { transform: rotate(45deg); }
details p { margin: 12px 0 0; color: var(--suave); }
.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 h2 { color: #fff; } .contato p { color: rgba(255, 255, 255, .85); }
.contato .cx { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); border-radius: 18px; padding: 24px; backdrop-filter: blur(8px); }
.contato .cx a { color: #fff; font-weight: 700; } .contato .cx p { margin-bottom: .6em; }
@media (max-width: 860px) { .contato { grid-template-columns: 1fr; padding: 32px; } }
.rodape { background: var(--tinta); color: rgba(255, 255, 255, .7); padding: 56px 0 30px; font-size: .92rem; }
.rodape a { color: rgba(255, 255, 255, .85); } .rodape .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 30px; }
.rodape h4 { color: #fff; font-size: .95rem; margin-bottom: 12px; } .rodape li { list-style: none; margin-bottom: 8px; } .rodape ul { padding: 0; margin: 0; }
.rodape .marca { color: #fff; margin-bottom: 14px; }
.rodape .fim { border-top: 1px solid rgba(255, 255, 255, .12); 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, 3rem); } .pagina h2 { font-size: 1.45rem; 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: #6b4e00; }
.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 ---------- */
.rev { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.rev.visivel { opacity: 1; transform: none; }
.rev.d1 { transition-delay: .08s; } .rev.d2 { transition-delay: .16s; } .rev.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .rev { opacity: 1; transform: none; } html { scroll-behavior: auto; } }
@media print { .nav, .hero::before, .flutua { display: none; } .rev { opacity: 1; transform: none; } }

/* ---------- mini quadro (ilustração do hero, feita em HTML/CSS: sem dados reais) ---------- */
.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: #7a82a3; }
.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: #5b6488; 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: #7a82a3; 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; }
.moldura img, .janela img { height: auto; }