/* ==========================================================================
   Vinnu Digital, folha de estilo unica
   Paleta, tipografia e grafismo conforme brandbook v1.0
   Direcao visual: superficie escura como sistema, luz como leitura
   ========================================================================== */

@font-face{font-family:'Poppins';src:url('assets/fonts/poppins-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('assets/fonts/poppins-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --azul:#004AAD;
  --azul-profundo:#002A63;
  --azul-claro:#3E7BD6;
  --azul-nevoa:#E8F0FB;
  --ciano:#00D4FF;
  --grafite:#14181F;
  --texto:#5A6272;
  --cinza-marca:#A6A6A6;
  --neve:#F2F4F7;
  --branco:#FFFFFF;

  --linha-escura:rgba(255,255,255,.10);
  --linha-clara:#E3E8EF;
  --texto-escuro:rgba(255,255,255,.72);

  --fonte-titulo:'Poppins',Calibri,Arial,sans-serif;
  --fonte-texto:'Inter',Calibri,Arial,sans-serif;

  --wrap:1200px;
  --r-btn:8px;
  --r-card:14px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:104px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--grafite);color:var(--texto);
  font-family:var(--fonte-texto);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-align:left}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ciano);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s3)}
.skip{position:absolute;left:-9999px;top:0;background:var(--azul);color:#fff;padding:12px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
.topbar{height:6px;background:linear-gradient(90deg,var(--azul) 0%,var(--azul) 62%,var(--ciano) 100%)}

/* ---------------------------------------------------- Malha tecnica
   Grade fina de 64px, usada apenas sobre superficie escura */
.mesh{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--linha-escura) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linha-escura) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 20% 0%,#000 0%,transparent 72%);
  opacity:.5}

/* ---------------------------------------------------- Tipografia */
.display{font-family:var(--fonte-titulo);font-weight:600;color:var(--branco);
  font-size:clamp(40px,6.4vw,72px);line-height:1.04;letter-spacing:-.022em;margin:0;max-width:16ch}
.t1{font-family:var(--fonte-titulo);font-weight:600;font-size:clamp(30px,3.8vw,44px);
  line-height:1.1;letter-spacing:-.015em;color:var(--azul-profundo);margin:0}
.t2{font-family:var(--fonte-titulo);font-weight:600;font-size:clamp(24px,2.6vw,32px);
  line-height:1.15;letter-spacing:-.01em;color:var(--azul-profundo);margin:0}
.t3{font-family:var(--fonte-titulo);font-weight:500;font-size:19px;line-height:1.25;
  color:var(--azul-profundo);margin:0 0 var(--s1)}
.escuro .t1,.escuro .t2,.escuro .t3{color:var(--branco)}
p{margin:0 0 var(--s2);max-width:68ch}
.lead{font-size:19px;max-width:60ch}
.apoio{font-size:12px;line-height:1.45}

/* Etiqueta com o ponto da marca */
.tag{display:flex;align-items:center;gap:10px;font-family:var(--fonte-titulo);font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--azul);margin:0 0 var(--s3)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--azul);flex:0 0 auto}
.escuro .tag{color:var(--ciano)}
.escuro .tag::before{background:var(--ciano);box-shadow:0 0 12px rgba(0,212,255,.8)}

.rule{display:block;width:72px;height:3px;background:var(--azul);border-radius:2px;margin:var(--s3) 0}
.rule--cyan{background:var(--ciano);box-shadow:0 0 16px rgba(0,212,255,.55)}

/* ---------------------------------------------------- Superficies */
.sec{padding:var(--s7) 0;position:relative}
.claro{background:var(--branco);color:var(--texto)}
.neve{background:var(--neve);color:var(--texto)}
.escuro{background:var(--grafite);color:var(--texto-escuro);overflow:hidden}
.escuro p{color:var(--texto-escuro)}
.borda-topo{border-top:1px solid var(--linha-escura)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);position:relative}
.grid>*,.tri>*,.stats>*,.split__cols>*,.etapas>*{min-width:0}
h1,h2,h3,h4,p,li,dd,dt{overflow-wrap:break-word}
.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}

/* ---------------------------------------------------- Header */
.header{position:sticky;top:0;z-index:100;background:rgba(20,24,31,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linha-escura)}
.header__in{display:flex;align-items:center;gap:var(--s4);min-height:88px;padding-top:16px;padding-bottom:16px}
.header__logo{display:block;line-height:0}
.header__logo img{width:120px;height:auto}
.header__logo:hover{text-decoration:none}
.nav{display:flex;gap:var(--s4);margin-left:auto}
.nav a{font-size:15px;color:rgba(255,255,255,.7);position:relative;padding:6px 0}
.nav a:hover{color:var(--branco);text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ciano);
  transform:scaleX(0);transform-origin:left;transition:transform .22s}
.nav a:hover::after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-mob{display:none;flex-direction:column;padding:var(--s2) var(--s3) var(--s3);
  background:var(--grafite);border-top:1px solid var(--linha-escura)}
.nav-mob a{padding:14px 0;color:rgba(255,255,255,.85);border-bottom:1px solid var(--linha-escura)}
.nav-mob.open{display:flex}

/* ---------------------------------------------------- Botoes */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fonte-titulo);font-weight:500;font-size:16px;line-height:1;
  padding:17px 28px;border-radius:var(--r-btn);background:var(--azul);color:var(--branco);
  border:1.5px solid var(--azul);transition:background .18s,border-color .18s,box-shadow .18s;white-space:nowrap}
.btn:hover{background:#0055c6;border-color:#0055c6;text-decoration:none;box-shadow:0 0 0 4px rgba(0,74,173,.22)}
.btn--sm{padding:11px 18px;font-size:14px}
.btn--outline{background:transparent;color:var(--azul);border-color:var(--azul)}
.btn--outline:hover{background:var(--azul);color:var(--branco);box-shadow:none}
.btn--ghost{background:transparent;color:var(--branco);border-color:rgba(255,255,255,.34)}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:var(--branco);box-shadow:none}
.btn--light{background:var(--branco);color:var(--azul-profundo);border-color:var(--branco)}
.btn--light:hover{background:var(--azul-nevoa);border-color:var(--azul-nevoa);box-shadow:none}

/* ---------------------------------------------------- Hero */
.hero{position:relative;background:var(--grafite);overflow:hidden;
  padding:calc(var(--s7) + 16px) 0 var(--s7)}
.hero__glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 460px at 12% -10%,rgba(0,74,173,.62),transparent 68%),
    radial-gradient(520px 380px at 78% 8%,rgba(0,42,99,.75),transparent 70%),
    radial-gradient(340px 240px at 40% 96%,rgba(0,212,255,.10),transparent 72%)}
.hero__in{position:relative}
.hero__sub{font-size:19px;max-width:54ch;color:rgba(255,255,255,.74);margin:var(--s4) 0 var(--s5)}
.hero__cta{display:flex;gap:var(--s2);flex-wrap:wrap}

/* Gesto da marca: o ponto que vira linha */
.conductor{display:flex;align-items:center;margin:var(--s5) 0 0}
.conductor__dot{width:13px;height:13px;border-radius:50%;background:var(--ciano);flex:0 0 auto;
  box-shadow:0 0 18px rgba(0,212,255,.9)}
.conductor__line{height:2px;width:min(420px,52vw);
  background:linear-gradient(90deg,var(--ciano),rgba(0,212,255,0));transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
  .conductor__dot{animation:pop .45s ease-out both}
  .conductor__line{animation:draw .85s .3s cubic-bezier(.22,.61,.36,1) both}
}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Barra de indicadores do hero */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6);
  padding-top:var(--s4);border-top:1px solid var(--linha-escura)}
.stats div{max-width:32ch}
.stats dt{font-family:var(--fonte-titulo);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ciano);margin-bottom:6px}
.stats dd{margin:0;font-size:15px;color:rgba(255,255,255,.7)}

/* ---------------------------------------------------- Cartoes */
.card{background:var(--branco);border:1px solid var(--linha-clara);border-radius:var(--r-card);
  padding:var(--s4);position:relative;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--azul-claro);transform:translateY(-2px)}
.card--mist{background:var(--azul-nevoa);border-color:transparent}
.card--mist:hover{transform:none;border-color:transparent}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)}
.card__n{font-family:var(--fonte-titulo);font-weight:600;font-size:12px;letter-spacing:.16em;
  color:var(--azul-claro);display:block;margin-bottom:var(--s2)}

.dots{list-style:none;margin:0;padding:0}
.dots li{position:relative;padding-left:24px;margin-bottom:12px}
.dots li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--azul)}
.dots--gray li::before{background:var(--cinza-marca)}
.dots li:last-child{margin-bottom:0}
.escuro .dots li::before{background:var(--ciano)}

/* ---------------------------------------------------- Metodo, linha condutora ligando as etapas */
.trilho{position:relative;margin-top:var(--s6)}
.trilho__linha{position:absolute;left:0;right:0;top:6px;height:2px;background:var(--linha-escura)}
.trilho__linha::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ciano),rgba(0,212,255,.15));
  transform:scaleX(0);transform-origin:left}
.trilho.on .trilho__linha::after{transform:scaleX(1);transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.etapas{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin:0;padding:0}
.etapas li{position:relative;padding-top:var(--s4)}
.etapas li::before{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--grafite);border:2px solid var(--ciano)}
.etapas__n{display:block;font-family:var(--fonte-titulo);font-weight:600;font-size:12px;
  letter-spacing:.18em;color:var(--ciano);margin-bottom:var(--s1)}
.etapas p{font-size:15px;margin:0;color:rgba(255,255,255,.68)}

/* ---------------------------------------------------- Divisao da operacao */
.split{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--linha-clara)}
.split__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s4)}
.split__note{margin-top:var(--s5);padding:var(--s3) var(--s3) var(--s3) var(--s4);
  border-left:3px solid var(--azul);background:var(--azul-nevoa);border-radius:0 var(--r-card) var(--r-card) 0;
  color:var(--grafite);max-width:66ch}
.nota{margin-top:var(--s5);background:var(--azul-nevoa);border:0;border-left:3px solid var(--azul);
  border-radius:0 var(--r-card) var(--r-card) 0;padding:var(--s4)}
.nota p{color:var(--grafite)}
.nota strong{color:var(--azul-profundo)}

/* ---------------------------------------------------- Frase ancora */
.ancora{position:relative;background:var(--azul-profundo);overflow:hidden;padding:var(--s7) 0}
.ancora__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 380px at 82% 20%,rgba(0,212,255,.16),transparent 70%)}
.ancora p{position:relative;font-family:var(--fonte-titulo);font-weight:500;color:var(--branco);
  font-size:clamp(24px,3.4vw,38px);line-height:1.24;letter-spacing:-.01em;margin:0;max-width:22ch}

/* ---------------------------------------------------- Lancamentos */
.lanc{position:relative;background:var(--grafite);overflow:hidden;padding:var(--s7) 0}
.lanc__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 420px at 88% 50%,rgba(0,74,173,.45),transparent 70%)}

/* ---------------------------------------------------- Chamada final */
.cta{background:linear-gradient(120deg,var(--azul-profundo),var(--azul));padding:var(--s7) 0;position:relative;overflow:hidden}
.cta .t1{color:var(--branco);max-width:20ch;margin-bottom:var(--s3)}
.cta p{color:rgba(255,255,255,.85);font-size:18px;max-width:56ch;margin-bottom:var(--s5)}

/* ---------------------------------------------------- Rodape */
.footer{background:var(--grafite);border-top:1px solid var(--linha-escura);
  color:rgba(255,255,255,.62);padding:var(--s6) 0 var(--s4);font-size:15px}
.footer__in{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:var(--s5)}
.footer__brand img{width:148px;margin-bottom:var(--s2)}
.footer__brand p{font-size:14px;margin:0;color:rgba(255,255,255,.55);max-width:34ch}
.footer__nav,.footer__contact{display:flex;flex-direction:column;gap:10px}
.footer a{color:rgba(255,255,255,.8)}
.footer a:hover{color:var(--ciano)}
.footer__legal{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--linha-escura)}
.footer__legal p{font-size:12px;line-height:1.45;color:rgba(255,255,255,.45);margin:0;max-width:none}

/* ---------------------------------------------------- Botao flutuante */
.float{position:fixed;right:22px;bottom:22px;z-index:130;width:58px;height:58px;border-radius:50%;
  background:var(--azul);color:var(--branco);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08) inset;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s,background .2s,box-shadow .2s}
.float.show{opacity:1;visibility:visible;transform:none}
.float:hover{background:#0055c6;text-decoration:none;box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 0 4px rgba(0,212,255,.25)}

/* ---------------------------------------------------- Responsivo */
@media (max-width:960px){
  :root{--s7:72px;--s6:52px}
  .nav{display:none}
  .burger{display:block}
  .header .btn--sm{display:none}
  .grid{grid-template-columns:1fr;gap:var(--s4)}
  .col-5,.col-6,.col-7{grid-column:auto}
  .tri{grid-template-columns:1fr;gap:var(--s2)}
  .etapas{grid-template-columns:1fr;gap:var(--s5)}
  .trilho__linha{left:6px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .trilho__linha::after{background:linear-gradient(180deg,var(--ciano),rgba(0,212,255,.18));
    transform:scaleY(0);transform-origin:top center}
  .trilho.on .trilho__linha::after{transform:scaleY(1)}
  .etapas li{padding-top:0;padding-left:38px;border-top:0}
  .etapas li::before{top:5px;left:0}
  .split__cols{grid-template-columns:1fr;gap:var(--s4)}
  .footer__in{grid-template-columns:1fr;gap:var(--s4)}
  .stats{grid-template-columns:1fr;gap:var(--s3)}
}
@media (max-width:560px){
  .etapas{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
  .float{right:16px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
  .trilho .trilho__linha::after{transform:scaleX(1)}
}

/* ==========================================================================
   Pagina de contato, destino do link da bio
   ========================================================================== */
.bio{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;background:var(--grafite);padding:var(--s6) 0}
.bio__glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 520px at 50% -12%,rgba(0,74,173,.55),transparent 65%),
    radial-gradient(520px 400px at 50% 112%,rgba(0,212,255,.14),transparent 70%)}
.bio__in{position:relative;max-width:520px;margin:0 auto;width:100%;padding:0 var(--s3)}
.bio__logo{width:150px;margin-bottom:var(--s5)}
.bio h1{font-family:var(--fonte-titulo);font-weight:600;color:var(--branco);
  font-size:clamp(30px,7vw,40px);line-height:1.1;letter-spacing:-.015em;margin:0}
.bio__sub{color:rgba(255,255,255,.7);margin:var(--s3) 0 var(--s5);max-width:40ch}
.bio__acoes{display:flex;flex-direction:column;gap:var(--s2)}
.bio__acoes .btn{width:100%;padding:20px 24px;font-size:17px;gap:12px}
.bio__rodape{position:relative;margin-top:var(--s6);padding-top:var(--s3);
  border-top:1px solid var(--linha-escura);display:flex;flex-wrap:wrap;gap:var(--s3);
  align-items:center;justify-content:space-between}
.bio__rodape a{color:rgba(255,255,255,.72);font-size:15px}
.bio__rodape a:hover{color:var(--ciano)}
.bio__legal{width:100%;font-size:12px;line-height:1.45;color:rgba(255,255,255,.4);margin:0}

/* Web: o card ganha um pouco mais de respiro e a caixa de acoes usa a largura
   como um card real, em vez do bloco mobile so esticado no meio da tela */
@media (min-width:700px){
  .bio{padding:var(--s7) var(--s3)}
  .bio__in{max-width:600px;padding:var(--s6) var(--s5);
    background:rgba(255,255,255,.03);border:1px solid var(--linha-escura);
    border-radius:var(--r-card)}
  .bio__logo{width:170px}
  .bio h1{font-size:clamp(34px,4vw,44px)}
  .bio__sub{font-size:17px}
}