/* =========================================================
   JASB — estilo compartilhado das páginas internas
   ========================================================= */
:root {
    --noite: #14161b;
    --noite-2: #1c1f26;
    --roxo: #1e8fcf;
    --roxo-vivo: #5ab4e4;
    --lilas: #8fd0f2;
    --lilas-claro: #e6f4fc;
    --tinta: #15171c;
    --tinta-2: #42464f;
    --tinta-3: #6f747d;
    --linha: #e5e8ec;
    --fundo: #ffffff;
    --fundo-2: #f5f6f8;
    --azul: #2a9ad6;
    --verde: #6cba50;
    --laranja: #f2801e;
    --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
    --texto: 'Inter', system-ui, sans-serif;
    --container: 1280px;
    --ease: cubic-bezier(.22, 1, .36, 1);
}


/* ---------- Variações de cor da logo por seção ---------- */
.cor-azul    { --roxo: #1e8fcf; --roxo-vivo: #5ab4e4; --lilas: #8fd0f2; --lilas-claro: #e6f4fc; }
.cor-verde   { --roxo: #4f9a33; --roxo-vivo: #6cba50; --lilas: #a6dc8f; --lilas-claro: #ebf6e5; }
.cor-laranja { --roxo: #e0700f; --roxo-vivo: #f2801e; --lilas: #ffbe85; --lilas-claro: #fdf0e3; }
.cor-rosa    { --roxo: #a24f94; --roxo-vivo: #b663a8; --lilas: #e3a9da; --lilas-claro: #f7eaf4; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--texto); color: var(--tinta-2); background: var(--fundo); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--roxo); color: #fff; }

.container { width: min(calc(100% - 56px), var(--container)); margin-inline: auto; position: relative; z-index: 1; }
.secao { padding: 130px 0; position: relative; overflow: hidden; overflow: clip; }
.secao-cinza { background: var(--fundo-2); }
.secao-escura { background: var(--noite); color: rgba(255,255,255,.7); }

/* ---------- Tipografia ---------- */
.rotulo { display: inline-flex; align-items: center; gap: 12px; font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--roxo); }
.rotulo::before { content: ""; width: 40px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #5ab4e4 0 25%, #b663a8 25% 50%, #6cba50 50% 75%, #f2801e 75%); transform-origin: left; transition: transform 1s var(--ease) .2s; }
.claro .rotulo, .secao-escura .rotulo { color: var(--lilas); }
.titulo { font-family: var(--display); font-weight: 700; color: var(--tinta); font-size: clamp(2.3rem, 4.8vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; }
.titulo .tom { color: var(--roxo); }
.claro .titulo, .secao-escura .titulo { color: #fff; }
.claro .titulo .tom, .secao-escura .titulo .tom { color: var(--lilas); }
.lead { font-size: 1.1rem; line-height: 1.8; color: var(--tinta-3); }
.secao-escura .lead, .claro .lead { color: rgba(255,255,255,.66); }
.cabecalho { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: end; margin-bottom: 70px; }
.cabecalho .titulo { margin-top: 22px; }
.cabecalho.centro { display: block; text-align: center; max-width: 820px; margin-inline: auto; }
.cabecalho.centro .lead { margin-top: 22px; }

/* ---------- Botões ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 58px; padding: 0 30px; border-radius: 999px; overflow: hidden; border: 0; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: .98rem; letter-spacing: -.01em; transition: transform .4s var(--ease), color .4s var(--ease); isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover::before { transform: none; }
.btn .seta { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; transition: transform .4s var(--ease); }
.btn:hover .seta { transform: rotate(-45deg); }
.btn-primario { background: var(--roxo); color: #fff; }
.btn-primario::before { background: var(--noite); }
.btn-primario .seta { background: rgba(255,255,255,.16); }
.btn-branco { background: #fff; color: var(--tinta); }
.btn-branco::before { background: var(--lilas); }
.btn-branco .seta { background: var(--lilas-claro); color: var(--roxo); }
.btn-vidro { color: #fff; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-vidro::before { background: #fff; }
.btn-vidro:hover { color: var(--tinta); }
.btn-escuro { background: var(--tinta); color: #fff; }
.btn-escuro::before { background: var(--roxo); }
.btn-zap { background: #25d366; color: #fff; }
.btn-zap::before { background: var(--noite); }
.btn-contorno { border: 1px solid var(--linha); color: var(--tinta); background: #fff; }
.btn-contorno::before { background: var(--tinta); }
.btn-contorno:hover { color: #fff; }

/* ---------- Topo das páginas internas ---------- */
.topo-pagina { position: relative; min-height: 88vh; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--noite); color: #fff; }
.topo-pagina.curto { min-height: 0; padding: 200px 0 110px; align-items: center; }
.topo-midia { position: absolute; inset: 0; will-change: transform; }
.topo-midia img, .topo-midia video { width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1%, -1%); } }
.topo-sombra { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,27,.6) 0%, rgba(20,22,27,.2) 35%, rgba(20,22,27,.45) 60%, rgba(20,22,27,.95) 100%), linear-gradient(90deg, rgba(20,22,27,.7), rgba(20,22,27,0) 70%); }
.topo-conteudo { position: relative; z-index: 2; padding: 180px 0 100px; will-change: transform, opacity; }
.topo-pagina.curto .topo-conteudo { padding: 0; }
.trilha { display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.6); margin-bottom: 26px; }
.trilha a:hover { color: #fff; }
.trilha i { font-size: .6rem; }
.topo-pagina h1 { font-family: var(--display); font-weight: 700; color: #fff; font-size: clamp(3rem, 8vw, 7.6rem); line-height: .95; letter-spacing: -.045em; max-width: 1100px; }
.topo-pagina.curto h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); }
.topo-pagina h1 .tom { color: var(--lilas); }
.topo-rodape { margin-top: 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.topo-desc { max-width: 560px; font-size: 1.12rem; line-height: 1.7; color: rgba(255,255,255,.8); }
.topo-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.topo-fundo-formas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* ---------- Texto dividido (animação letra a letra) ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; white-space: nowrap; }
.js .wi { display: inline-block; transform: translateY(115%) rotate(12deg); transform-origin: left bottom; opacity: 0; transition: transform 1.2s var(--ease), opacity .8s var(--ease); transition-delay: calc(var(--i, 0) * 26ms); }
.js .split.ativo .wi { transform: none; opacity: 1; }
.tom .wi { background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, var(--roxo) 0%, var(--roxo) 40%, #8fd0f2 50%, var(--roxo) 60%, var(--roxo) 100%); }
.claro .tom .wi, .secao-escura .tom .wi, .topo-pagina .tom .wi { background-image: linear-gradient(100deg, var(--lilas) 0%, var(--lilas) 40%, #fff 50%, var(--lilas) 60%, var(--lilas) 100%); }
.split.ativo .tom .wi { -webkit-text-fill-color: transparent; animation: brilho 4.5s ease-in-out infinite; animation-delay: calc(1.5s + var(--i) * 40ms); }
@keyframes brilho { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* ---------- Entradas ---------- */
.js [data-anim] { opacity: 0; transition: opacity 1.3s var(--ease), transform 1.4s var(--ease), clip-path 1.6s var(--ease); transition-delay: var(--d, 0s); }
.js [data-anim="sobe"] { transform: translateY(80px); }
.js [data-anim="zoom"] { transform: scale(.9); }
.js [data-anim="esquerda"] { transform: translateX(-90px); }
.js [data-anim="direita"] { transform: translateX(90px); }
.js [data-anim="cortina"] { opacity: 1; clip-path: inset(100% 0 0 0); }
.js [data-anim="cortina-lado"] { opacity: 1; clip-path: inset(0 100% 0 0); }
.js [data-anim].ativo { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.js .rotulo::before { transform: scaleX(0); }
.js .rotulo.ativo::before, .js .ativo .rotulo::before { transform: scaleX(1); }
.js [data-grupo] > * { opacity: 0; transform: translateY(50px) scale(.96); transition: opacity 1s var(--ease), transform 1.1s var(--ease), box-shadow .4s, border-color .4s, background .4s; transition-delay: calc(var(--k, 0) * 70ms); }
.js [data-grupo].ativo > * { opacity: 1; transform: none; }

/* ---------- Manchas flutuantes ---------- */
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; z-index: 0; animation: flutua 16s ease-in-out infinite alternate; }
.blob.b1 { width: 420px; height: 420px; background: #d6eefb; top: 8%; right: -120px; }
.blob.b2 { width: 340px; height: 340px; background: #d7ecfa; bottom: 6%; left: -120px; animation-duration: 20s; animation-delay: -6s; }
.blob.b3 { width: 380px; height: 380px; background: #1e8fcf; opacity: .35; top: 20%; left: -140px; animation-duration: 18s; }
.blob.b4 { width: 300px; height: 300px; background: #2a9ad6; opacity: .25; bottom: 10%; right: -80px; animation-duration: 22s; }
@keyframes flutua { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, -50px) scale(1.12); } 66% { transform: translate(-40px, 40px) scale(.92); } 100% { transform: translate(30px, 70px) scale(1.06); } }

/* ---------- Faixa rolando ---------- */
.marquee { overflow: hidden; padding: 40px 0; border-bottom: 1px solid var(--linha); background: #fff; }
.marquee-trilho { display: flex; width: max-content; will-change: transform; }
.marquee-grupo { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.marquee-item { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 5.6rem); letter-spacing: -.045em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px #cfd6dc; white-space: nowrap; transition: color .4s, -webkit-text-stroke-color .4s; }
.marquee-item:hover { color: var(--roxo); -webkit-text-stroke-color: var(--roxo); }
.marquee-sep { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px; background: conic-gradient(var(--azul) 0 25%, var(--verde) 0 50%, var(--laranja) 0 75%, var(--roxo-vivo) 0); }

/* ---------- Imagens com movimento ---------- */
.moldura { position: relative; overflow: hidden; border-radius: 26px; background: var(--fundo-2); }
.moldura img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.moldura.parallax img { position: absolute; left: 0; top: -12%; height: 124%; }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 2500; pointer-events: none; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1.5px solid var(--roxo); display: grid; place-items: center; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .4s, border-color .4s, opacity .3s; opacity: 0; }
.cursor span { font-family: var(--display); font-weight: 700; font-size: .78rem; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--ease); letter-spacing: .04em; }
.cursor.ativo { opacity: 1; }
.cursor.link { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: rgba(30,143,207,.12); }
.cursor.ver { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--roxo); border-color: var(--roxo); }
.cursor.ver span { opacity: 1; transform: none; }
.cursor.escuro { border-color: #fff; }
.cursor.escuro.link { background: rgba(255,255,255,.12); }
@media (hover: none), (max-width: 920px) { .cursor { display: none; } }

/* ---------- Chamada final ---------- */
.cta-final { position: relative; overflow: hidden; color: #fff; padding: 160px 0; background: var(--noite); }
.cta-final .cta-bg { position: absolute; left: 0; right: 0; top: -20%; height: 140%; will-change: transform; }
.cta-final .cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-final::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,22,27,.93) 0%, rgba(20,22,27,.72) 55%, rgba(20,22,27,.5) 100%); }
.cta-final .container { z-index: 2; }
.cta-final .titulo { font-size: clamp(2.6rem, 6vw, 5.6rem); }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
    .cabecalho { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) {
    .container { width: min(calc(100% - 36px), var(--container)); }
    .secao { padding: 92px 0; }
    .topo-conteudo { padding: 130px 0 80px; }
    .topo-pagina.curto { padding: 140px 0 80px; }
    .topo-pagina h1 { font-size: clamp(2.6rem, 12.5vw, 3.8rem); }
    .topo-acoes { width: 100%; }
    .topo-acoes .btn { flex: 1 1 100%; }
    .cta-final { padding: 110px 0; }
    .blob { width: 260px !important; height: 260px !important; }
}