Vetore Consultoria — Cibersegurança & Infraestrutura de TI

Apresentação

Conheça nossas soluções

Uma apresentação rápida com tudo que oferecemos. Toque no botão para começar.

Apresentação Vetore

Conheça as soluções em 1 minuto

8 slides · 1 min · com música ambiente opcional

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vetore Consultoria — Apresentação</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,300;9..144,0,600;9..144,1,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0B1728;--navy-mid:#152238;--navy-light:#1E3351;
  --teal:#1D9E75;--teal-l:#2BBFA0;--teal-xl:#7EDFC4;
  --white:#fff;--gray:#8A98A8;--cream:#F0F7F4;
  --dur:700ms; /* transition duration */
}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
body{font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}

/* ══ STAGE ══ */
#stage{
  position:fixed;inset:0;
  display:flex;align-items:stretch;
}

/* ══ SLIDES ══ */
.slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:clamp(2rem,5vw,5rem);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) ease;
  overflow:hidden;
}
.slide.active{opacity:1;pointer-events:auto}
.slide.active .anim{animation:fadeUp .7s ease both}
.slide.active .anim-1{animation-delay:.1s}
.slide.active .anim-2{animation-delay:.25s}
.slide.active .anim-3{animation-delay:.4s}
.slide.active .anim-4{animation-delay:.55s}
.slide.active .anim-5{animation-delay:.7s}

@keyframes fadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ══ PROGRESS BAR ══ */
#progress-track{
  position:fixed;bottom:0;left:0;right:0;height:3px;
  background:rgba(255,255,255,.1);z-index:100;
}
#progress-fill{
  height:100%;background:var(--teal);
  transition:width .3s linear;width:0%;
}

/* ══ CONTROLS ══ */
#controls{
  position:fixed;bottom:16px;right:20px;z-index:200;
  display:flex;gap:10px;align-items:center;
}
.ctrl-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(11,23,40,.7);backdrop-filter:blur(8px);
  color:var(--white);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.ctrl-btn:hover{background:var(--teal);border-color:var(--teal)}
#slide-counter{
  font-size:11px;color:rgba(255,255,255,.4);
  font-family:'DM Sans',sans-serif;letter-spacing:.06em;
}
#music-icon{font-size:16px}

/* ══ SLIDE TYPES ══ */

/* — DARK — */
.s-dark{background:var(--navy)}
.s-dark-mid{background:var(--navy-mid)}

/* — LIGHT — */
.s-light{background:var(--cream);color:var(--navy)}

/* — TEAL — */
.s-teal{background:var(--teal)}

/* ── decorative grid ── */
.grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:70px 70px;
}
.grid-bg-light{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(11,23,40,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,23,40,.06) 1px,transparent 1px);
  background-size:60px 60px;
}

/* ── glow blob ── */
.blob{position:absolute;pointer-events:none;border-radius:50%;filter:blur(80px);opacity:.35}
.blob-tl{width:45vw;height:45vw;top:-10%;left:-8%;background:var(--teal)}
.blob-br{width:35vw;height:35vw;bottom:-8%;right:-5%;background:var(--teal-l)}
.blob-c{width:40vw;height:40vw;top:20%;left:30%;background:var(--teal)}

/* ── left accent bar ── */
.bar-l{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--teal)}
.bar-l-light{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--teal)}

/* ── section chip ── */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(29,158,117,.15);border:1px solid rgba(29,158,117,.4);
  color:var(--teal-l);padding:.3rem 1rem;border-radius:100px;
  font-size:clamp(.65rem,.8vw,.75rem);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:clamp(1rem,2.5vw,1.75rem);
}
.chip::before{content:'';width:6px;height:6px;background:var(--teal);border-radius:50%}

.chip-dark{
  background:rgba(11,23,40,.25);border:1px solid rgba(11,23,40,.2);
  color:var(--navy-light);
}
.chip-dark::before{background:var(--navy)}

/* ── headings ── */
.h-xl{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(2.6rem,7vw,6rem);
  line-height:1.05;letter-spacing:-.03em;
  color:var(--white);
}
.h-xl em{font-style:italic;color:var(--teal-l)}
.h-xl .teal{color:var(--teal-l)}

.h-lg{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.1;letter-spacing:-.02em;color:var(--white);
}
.h-lg em{font-style:italic;color:var(--teal-l)}
.h-lg-dark{color:var(--navy)}
.h-lg-dark em{color:var(--teal)}

.h-md{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(1.6rem,3.5vw,3rem);
  line-height:1.15;letter-spacing:-.015em;color:var(--white);
}
.h-md em{font-style:italic;color:var(--teal-l)}

.sub{
  font-size:clamp(.9rem,1.5vw,1.15rem);
  color:var(--gray);line-height:1.7;
  max-width:620px;margin-top:.75rem;
}
.sub-dark{color:rgba(11,23,40,.6)}
.sub-white{color:rgba(255,255,255,.75)}

/* ── divider line ── */
.line{
  width:60px;height:3px;background:var(--teal);
  border-radius:2px;margin:1.5rem 0;
  transform-origin:left;
}
.slide.active .line{animation:lineGrow .6s .3s ease both}

/* ── bullet list ── */
.blist{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-top:1.5rem;max-width:680px;width:100%}
.blist li{
  display:flex;align-items:flex-start;gap:.9rem;
  font-size:clamp(.88rem,1.2vw,1.05rem);color:var(--gray);line-height:1.6;
}
.blist li::before{
  content:'';min-width:7px;height:7px;border-radius:50%;
  background:var(--teal);margin-top:.45rem;flex-shrink:0;
}
.blist-dark li{color:rgba(11,23,40,.7)}
.blist-dark li::before{background:var(--teal)}

/* ── number pills ── */
.pill-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.75rem;max-width:800px}
.pill{
  background:rgba(29,158,117,.12);border:1px solid rgba(29,158,117,.25);
  border-radius:8px;padding:.7rem 1.25rem;
  display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:140px;
}
.pill-num{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(1.4rem,2.5vw,2rem);color:var(--teal-l);line-height:1;
}
.pill-label{font-size:clamp(.75rem,.9vw,.85rem);color:var(--gray);line-height:1.4}

/* ── card row ── */
.card-row{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:1.75rem;max-width:900px;width:100%}
.card{
  flex:1;min-width:180px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:1.4rem 1.25rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.card-light{background:var(--white);border-color:rgba(29,158,117,.2);
  box-shadow:0 2px 20px rgba(11,23,40,.07)}
.card-top{
  width:36px;height:36px;border-radius:8px;
  background:var(--teal-glow, rgba(29,158,117,.15));
  border:1px solid rgba(29,158,117,.3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.card-top svg{width:16px;height:16px;stroke:var(--teal-l);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h4{font-size:clamp(.85rem,1.1vw,.95rem);font-weight:600;color:var(--white)}
.card-light h4{color:var(--navy)}
.card p{font-size:clamp(.75rem,.9vw,.82rem);color:var(--gray);line-height:1.6}
.card-light p{color:rgba(11,23,40,.6)}

/* ── two-col layout ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;max-width:1100px;width:100%}
.two-col-3{display:grid;grid-template-columns:1fr 2fr;gap:clamp(2rem,5vw,5rem);align-items:center;max-width:1100px;width:100%}

/* ── big stat ── */
.big-stat{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(4rem,12vw,10rem);
  line-height:1;color:var(--teal-l);letter-spacing:-.04em;
}
.big-stat-label{font-size:clamp(.8rem,1.2vw,1rem);color:var(--gray);letter-spacing:.06em;text-transform:uppercase;margin-top:.5rem}

/* ── tag strip ── */
.tag-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tag{
  background:rgba(29,158,117,.1);border:1px solid rgba(29,158,117,.25);
  color:var(--teal-l);padding:.3rem .85rem;border-radius:6px;
  font-size:clamp(.7rem,.85vw,.8rem);letter-spacing:.04em;
}

/* ── logo mark ── */
.logo-mark{
  display:block;flex-shrink:0;
}
.logo-text-wrap{display:flex;align-items:center;gap:12px}
.logo-name{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:.02em}
.logo-sub{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-l);margin-top:2px}

/* ── center text block ── */
.center{text-align:center;display:flex;flex-direction:column;align-items:center}

/* ── PPFF grid ── */
.ppff-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1rem;margin-top:1.75rem;max-width:700px;width:100%
}
.ppff-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:1.25rem 1.25rem;
}
.ppff-letter{
  font-family:'Fraunces',serif;font-weight:600;font-size:2.5rem;
  color:var(--teal-l);line-height:1;
}
.ppff-name{font-size:.95rem;font-weight:500;color:var(--white);margin-top:.35rem}
.ppff-desc{font-size:.8rem;color:var(--gray);margin-top:.3rem;line-height:1.5}

/* ── nist ring ── */
.nist-ring{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;
  margin-top:1.5rem;max-width:680px;width:100%;
}
.nist-fn{
  border-radius:10px;padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:.35rem;
}
.nist-fn-label{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;
}
.nist-fn-desc{font-size:.78rem;color:rgba(255,255,255,.7);line-height:1.5}

/* ── ig steps ── */
.ig-row{display:flex;gap:1rem;margin-top:1.5rem;max-width:850px;width:100%;align-items:stretch}
.ig-card{
  flex:1;border-radius:12px;padding:1.25rem 1.1rem;
  display:flex;flex-direction:column;gap:.5rem;
  border-top:4px solid;
}
.ig-badge{
  display:inline-block;padding:.2rem .7rem;border-radius:100px;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;width:fit-content;
}
.ig-title{font-size:.9rem;font-weight:600;color:var(--white)}
.ig-desc{font-size:.78rem;color:var(--gray);line-height:1.5}

/* responsive */
@media(max-width:700px){
  .two-col,.two-col-3{grid-template-columns:1fr}
  .card-row{flex-direction:column}
  .ppff-grid{grid-template-columns:1fr}
  .nist-ring{grid-template-columns:repeat(2,1fr)}
  .ig-row{flex-direction:column}
}

/* ── MOBILE RESPONSIVO (dentro do iframe) ── */
@media(max-width:600px){
  /* Tipografia fluida mais agressiva em telas pequenas */
  .h-xl { font-size: clamp(1.5rem,7vw,2.8rem) !important; }
  .h-lg  { font-size: clamp(1.3rem,6vw,2.2rem) !important; }
  .h-md  { font-size: clamp(1.1rem,5vw,1.8rem) !important; }
  .sub   { font-size: clamp(.8rem,3.5vw,.95rem) !important; }
  .chip  { font-size: clamp(.55rem,2.5vw,.7rem) !important; letter-spacing:.05em !important; }
  .section-label { font-size: .65rem !important; }

/* Layouts: tudo em coluna */
  .two-col, .two-col-3 { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .ppff-grid { grid-template-columns: 1fr 1fr !important; gap: .6rem !important; }
  .nist-ring { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; }
  .ig-row    { flex-direction: column !important; gap: .6rem !important; }
  .card-row  { flex-direction: column !important; }
  .pill-row  { gap: .5rem !important; }
  .pill      { padding: .5rem .8rem !important; }
  .pill-num  { font-size: 1.2rem !important; }

/* Slides: padding menor */
  .slide { padding: clamp(.75rem,3vw,1.5rem) !important; }

/* Cards compactos */
  .card  { padding: .9rem !important; }
  .ppff-card { padding: .9rem !important; }
  .ppff-letter { font-size: 1.8rem !important; }
  .ppff-name   { font-size: .82rem !important; }
  .ppff-desc   { font-size: .7rem !important; }

/* Nist functions */
  .nist-fn { padding: .65rem .7rem !important; }
  .nist-fn-label { font-size: .6rem !important; }
  .nist-fn-desc  { font-size: .68rem !important; }

/* IG cards */
  .ig-card { padding: .9rem !important; }
  .ig-title { font-size: .82rem !important; }
  .ig-desc  { font-size: .7rem !important; }

/* Logo */
  .logo-name  { font-size: clamp(.9rem,4vw,1.2rem) !important; }
  .logo-sub   { font-size: .5rem !important; }
  .logo-mark  { width: clamp(28px,7vw,38px) !important; height: clamp(28px,7vw,38px) !important; }

/* Tag strip */
  .tag { font-size: .6rem !important; padding: .2rem .6rem !important; }
  .tag-strip { gap: .3rem !important; margin-top: .8rem !important; }

/* Bullet list */
  .blist li { font-size: .78rem !important; gap: .6rem !important; }

/* Stats */
  .big-stat { font-size: clamp(2.5rem,10vw,5rem) !important; }

/* Hero metrics */
  .hero-metrics { gap: .8rem !important; margin-top: 1.2rem !important; }
  .metric-num   { font-size: 1rem !important; }
  .metric-label { font-size: .55rem !important; }

/* Controls */
  #controls { bottom: 8px !important; right: 8px !important; gap: 6px !important; }
  .ctrl-btn { width: 30px !important; height: 30px !important; font-size: 11px !important; }
  #slide-counter { font-size: 9px !important; }

/* Line divider */
  .line { margin: .75rem 0 !important; }
}

/* Telas muito pequenas (< 380px) */
@media(max-width:380px){
  .h-xl { font-size: clamp(1.25rem,6vw,1.8rem) !important; }
  .ppff-grid { grid-template-columns: 1fr !important; }
  .nist-ring { grid-template-columns: 1fr !important; }
  .slide { padding: .6rem !important; }
}

/* PORTRAIT em celular: conteúdo ainda mais compacto e legível */
@media (max-width:600px) and (orientation:portrait){
  .slide {
    padding: 1rem .8rem !important;
    justify-content: flex-start !important;
    padding-top: 12vh !important;
  }
  .h-xl { font-size: clamp(1.4rem,8vw,2.2rem) !important; }
  .h-lg { font-size: clamp(1.2rem,7vw,1.8rem) !important; }
  .h-md { font-size: clamp(1.05rem,6vw,1.5rem) !important; }
  .sub  { font-size: clamp(.78rem,3.5vw,.92rem) !important; line-height:1.5 !important; }
  .chip { margin-bottom: .8rem !important; }
  .line { margin: .6rem 0 !important; width: 40px !important; height: 2px !important; }
  .blist { margin-top: .8rem !important; gap: .55rem !important; }
  .blist li { font-size: .76rem !important; line-height: 1.4 !important; }
  .ppff-grid, .nist-ring { gap: .5rem !important; }
  .pill-row { margin-top: 1rem !important; flex-direction: column !important; gap: .4rem !important; }
  .pill { padding: .55rem .85rem !important; }
  .card-row { gap: .55rem !important; margin-top: 1rem !important; }
  .tag-strip { gap: .25rem !important; }
  .tag { font-size: .58rem !important; padding: .15rem .5rem !important; }
  .big-stat { font-size: 3rem !important; }
  .hero-metrics { gap: .65rem !important; margin-top: .9rem !important; }
  .metric-num { font-size: .9rem !important; }
}

</style>
</head>
<body>
<div id="stage">

<div class="slide s-dark active" id="s1">
  <div class="grid-bg"></div>
  <div class="blob blob-tl" style="opacity:.2"></div>
  <div class="blob blob-br" style="opacity:.15"></div>
  <div class="center">
    <div class="logo-text-wrap anim anim-1">
      <svg class="logo-mark" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:clamp(40px,5vw,56px);height:clamp(40px,5vw,56px);flex-shrink:0"><line x1="10" y1="10" x2="32" y2="50" stroke="#4A6CF7" stroke-width="8" stroke-linecap="round"/><line x1="32" y1="50" x2="54" y2="10" stroke="#1D9E75" stroke-width="8" stroke-linecap="round"/><circle cx="54" cy="10" r="8" fill="#2BBFA0"/></svg>
      <div>
        <div class="logo-name" style="color:var(--white)">Vetore</div>
        <div class="logo-sub">Consultoria</div>
      </div>
    </div>
    <div class="line anim anim-2"></div>
    <h1 class="h-xl anim anim-2" style="text-align:center;max-width:800px">
      Segurança que <em>protege</em><br>e governa o seu negócio
    </h1>
    <p class="sub anim anim-3" style="text-align:center">
      Cibersegurança · GRC · Infraestrutura de TI
    </p>
    <div class="tag-strip anim anim-4" style="justify-content:center;margin-top:2rem">
      <span class="tag">NIST CSF 2.0</span>
      <span class="tag">CIS Controls v8</span>
      <span class="tag">Hardening</span>
      <span class="tag">EDR / XDR</span>
      <span class="tag">SonicWall</span>
      <span class="tag">Veeam Backup</span>
    </div>
  </div>
</div>

<div class="slide s-dark-mid" id="s2">
  <div class="grid-bg"></div>
  <div class="bar-l"></div>
  <div class="two-col-3">
    <div>
      <div class="chip anim anim-1">Fundamento</div>
      <h2 class="h-lg anim anim-2">A cibersegurança é baseada em <em>quatro pilares.</em></h2>
      <div class="line"></div>
      <p class="sub anim anim-3">Toda organização que sofre um incidente apresenta falha em pelo menos um deles.</p>
    </div>
    <div class="ppff-grid">
      <div class="ppff-card anim anim-2">
        <div class="ppff-letter">P</div>
        <div class="ppff-name">Pessoas</div>
        <div class="ppff-desc">Cultura, conscientização e capacitação de equipes</div>
      </div>
      <div class="ppff-card anim anim-3">
        <div class="ppff-letter">P</div>
        <div class="ppff-name">Processos</div>
        <div class="ppff-desc">Políticas, procedimentos e fluxos de resposta</div>
      </div>
      <div class="ppff-card anim anim-4">
        <div class="ppff-letter">T</div>
        <div class="ppff-name">Tecnologia</div>
        <div class="ppff-desc">Tecnologias, controles técnicos e automação</div>
      </div>
      <div class="ppff-card anim anim-5">
        <div class="ppff-letter">F</div>
        <div class="ppff-name">Fornecedores</div>
        <div class="ppff-desc">Gestão de terceiros e cadeia de suprimentos</div>
      </div>
    </div>
  </div>
</div>

<div class="slide s-dark" id="s3">
  <div class="blob blob-c" style="opacity:.12;width:60vw;height:60vw;left:10%"></div>
  <div class="center">
    <div class="chip anim anim-1">Diagnóstico de Maturidade</div>
    <h2 class="h-xl anim anim-2" style="text-align:center;max-width:760px">
      Você sabe onde sua empresa<br><em>está exposta?</em>
    </h2>
    <p class="sub anim anim-3" style="text-align:center;max-width:560px">
      Um assessment de maturidade revela lacunas reais — antes que um atacante as descubra por você.
    </p>
  </div>
</div>

<div class="slide s-dark-mid" id="s4">
  <div class="grid-bg"></div>
  <div class="bar-l"></div>
  <div class="two-col">
    <div>
      <div class="chip anim anim-1">Assessment</div>
      <h2 class="h-md anim anim-2">O que o diagnóstico <em>entrega</em></h2>
      <div class="line"></div>
      <ul class="blist anim anim-3">
        <li>Mapeamento do nível de maturidade atual por domínio</li>
        <li>Identificação de lacunas e exposições críticas</li>
        <li>Plano de ação priorizado por risco e impacto real</li>
        <li>Alinhamento com NIST CSF 2.0 e CIS Controls v8</li>
      </ul>
    </div>
    <div class="center anim anim-3">
      <div class="big-stat">5</div>
      <div class="big-stat-label">Níveis de maturidade avaliados</div>
      <div style="margin-top:2rem;display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:260px">
        <div style="display:flex;align-items:center;gap:.75rem">
          <div style="height:6px;flex:1;background:rgba(29,158,117,.2);border-radius:3px;overflow:hidden">
            <div style="height:100%;width:20%;background:var(--teal)"></div></div>
          <span style="font-size:.75rem;color:var(--gray);white-space:nowrap">Inicial</span>
        </div>
        <div style="display:flex;align-items:center;gap:.75rem">
          <div style="height:6px;flex:1;background:rgba(29,158,117,.2);border-radius:3px;overflow:hidden">
            <div style="height:100%;width:40%;background:var(--teal)"></div></div>
          <span style="font-size:.75rem;color:var(--gray);white-space:nowrap">Básico</span>
        </div>
        <div style="display:flex;align-items:center;gap:.75rem">
          <div style="height:6px;flex:1;background:rgba(29,158,117,.2);border-radius:3px;overflow:hidden">
            <div style="height:100%;width:60%;background:var(--teal)"></div></div>
          <span style="font-size:.75rem;color:var(--gray);white-space:nowrap">Intermediário</span>
        </div>
        <div style="display:flex;align-items:center;gap:.75rem">
          <div style="height:6px;flex:1;background:rgba(29,158,117,.2);border-radius:3px;overflow:hidden">
            <div style="height:100%;width:80%;background:var(--teal)"></div></div>
          <span style="font-size:.75rem;color:var(--gray);white-space:nowrap">Avançado</span>
        </div>
        <div style="display:flex;align-items:center;gap:.75rem">
          <div style="height:6px;flex:1;background:rgba(29,158,117,.2);border-radius:3px;overflow:hidden">
            <div style="height:100%;width:100%;background:var(--teal-l)"></div></div>
          <span style="font-size:.75rem;color:var(--gray);white-space:nowrap">Otimizado</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="slide s-dark" id="s5">
  <div class="blob blob-tl" style="opacity:.15"></div>
  <div class="center">
    <div class="chip anim anim-1">CIS Controls v8</div>
    <h2 class="h-xl anim anim-2" style="text-align:center;max-width:720px">
      <em>18 salvaguardas.</em><br>1 método comprovado.
    </h2>
    <p class="sub anim anim-3" style="text-align:center;max-width:540px">
      Proteger sua empresa não exige orçamento ilimitado — exige prioridade e estrutura.
    </p>
    <div class="pill-row anim anim-4" style="justify-content:center">
      <div class="pill" style="flex:none;min-width:130px">
        <div class="pill-num">IG1</div>
        <div class="pill-label">Base essencial para qualquer empresa</div>
      </div>
      <div class="pill" style="flex:none;min-width:130px">
        <div class="pill-num">IG2</div>
        <div class="pill-label">Para empresas em crescimento</div>
      </div>
      <div class="pill" style="flex:none;min-width:130px">
        <div class="pill-num">IG3</div>
        <div class="pill-label">Para ambientes críticos</div>
      </div>
    </div>
  </div>
</div>

<div class="slide s-dark-mid" id="s6">
  <div class="grid-bg"></div>
  <div class="bar-l"></div>
  <div style="max-width:960px;width:100%">
    <div class="chip anim anim-1">Grupos de Implementação</div>
    <h2 class="h-md anim anim-2">Evolução <em>progressiva</em> em segurança</h2>
    <div class="ig-row">
      <div class="ig-card anim anim-2" style="background:rgba(29,158,117,.08);border-top-color:#1D9E75">
        <div class="ig-badge" style="background:rgba(29,158,117,.2);color:var(--teal-l)">IG1</div>
        <div class="ig-title">Higiene Cibernética Essencial</div>
        <div class="ig-desc">Inventário de ativos · Controle de acesso · Proteção de dados · Configuração segura · Gestão de contas</div>
      </div>
      <div class="ig-card anim anim-3" style="background:rgba(29,158,117,.05);border-top-color:#1A7A5A">
        <div class="ig-badge" style="background:rgba(29,158,117,.15);color:var(--teal-l)">IG2</div>
        <div class="ig-title">Para Empresas em Crescimento</div>
        <div class="ig-desc">Gestão de logs · Defesa contra malware · Monitoramento de rede · Segurança de aplicações</div>
      </div>
      <div class="ig-card anim anim-4" style="background:rgba(29,158,117,.03);border-top-color:#0F5440">
        <div class="ig-badge" style="background:rgba(29,158,117,.1);color:var(--teal-l)">IG3</div>
        <div class="ig-title">Para Ambientes Críticos</div>
        <div class="ig-desc">Testes de penetração · Resposta a incidentes · Gestão de fornecedores · Conscientização avançada</div>
      </div>
    </div>
  </div>
</div>

<div class="slide s-dark" id="s7">
  <div class="blob blob-br" style="opacity:.18"></div>
  <div class="center">
    <div class="chip anim anim-1">NIST CSF 2.0</div>
    <h2 class="h-xl anim anim-2" style="text-align:center;max-width:760px">
      <em>6 funções.</em><br>1 programa completo de segurança.
    </h2>
    <p class="sub anim anim-3" style="text-align:center;max-width:520px">
      O NIST Cybersecurity Framework é o mapa para construir uma postura de segurança duradoura.
    </p>
  </div>
</div>

<div class="slide s-dark-mid" id="s8">
  <div class="grid-bg"></div>
  <div class="bar-l"></div>
  <div style="max-width:900px;width:100%">
    <div class="chip anim anim-1">As seis funções do NIST CSF 2.0</div>
    <h2 class="h-md anim anim-2" style="margin-bottom:.5rem">Um ciclo <em>contínuo</em> de proteção</h2>
    <div class="nist-ring anim anim-3">
      <div class="nist-fn" style="background:rgba(94,96,206,.2);border:1px solid rgba(94,96,206,.3)">
        <div class="nist-fn-label" style="color:#8B8FE8">Govern</div>
        <div class="nist-fn-desc">Estratégia, políticas e responsabilidades</div>
      </div>
      <div class="nist-fn" style="background:rgba(72,149,239,.2);border:1px solid rgba(72,149,239,.3)">
        <div class="nist-fn-label" style="color:#7BBDF5">Identify</div>
        <div class="nist-fn-desc">Mapeamento de ativos e riscos</div>
      </div>
      <div class="nist-fn" style="background:rgba(29,158,117,.2);border:1px solid rgba(29,158,117,.3)">
        <div class="nist-fn-label" style="color:var(--teal-l)">Protect</div>
        <div class="nist-fn-desc">Controles técnicos e administrativos</div>
      </div>
      <div class="nist-fn" style="background:rgba(247,127,0,.2);border:1px solid rgba(247,127,0,.3)">
        <div class="nist-fn-label" style="color:#F5A623">Detect</div>
        <div class="nist-fn-desc">Identificação de eventos e ameaças</div>
      </div>
      <div class="nist-fn" style="background:rgba(214,40,40,.2);border:1px solid rgba(214,40,40,.3)">
        <div class="nist-fn-label" style="color:#F08080">Respond</div>
        <div class="nist-fn-desc">Contenção e mitigação de incidentes</div>
      </div>
      <div class="nist-fn" style="background:rgba(74,78,105,.3);border:1px solid rgba(74,78,105,.4)">
        <div class="nist-fn-label" style="color:#A0A4C0">Recover</div>
        <div class="nist-fn-desc">Restauração e aprendizado contínuo</div>
      </div>
    </div>
  </div>
</div>

<div class="slide s-dark" id="s9">
  <div class="grid-bg"></div>
  <div class="bar-l"></div>
  <div class="two-col" style="max-width:1000px">
    <div>
      <div class="chip anim anim-1">NIST CSF × NIST RMF</div>
      <h2 class="h-md anim anim-2">Dois frameworks.<br><em>Papéis diferentes.</em></h2>
      <div class="line"></div>
      <p class="sub anim anim-3">Eles se complementam — não competem.</p>
    </div>
    <div style="display:flex;flex-direction:column;gap:1rem">
      <div class="card anim anim-2" style="border-left:3px solid #8B8FE8">
        <h4 style="color:#8B8FE8;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase">NIST CSF — Estratégico</h4>
        <p>Define <strong style="color:var(--white)">o que fazer</strong>. Organiza o programa de segurança nas seis funções. Escala para qualquer organização.</p>
      </div>
      <div class="card anim anim-3" style="border-left:3px solid var(--teal)">
        <h4 style="color:var(--teal-l);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase">NIST RMF — Operacional</h4>
        <p>Define <strong style="color:var(--white)">como fazer</strong>. Processo de 6 etapas para gestão de riscos em sistemas específicos: Preparar · Categorizar · Selecionar · Implementar · Avaliar · Autorizar.</p>
      </div>
    </div>
  </div>
</div>

<div class="slide s-dark" id="s10">
  <div class="blob blob-tl" style="opacity:.12"></div>
  <div class="center">
    <div class="chip anim anim-1">Infraestrutura Segura</div>
    <h2 class="h-xl anim anim-2" style="text-align:center;max-width:740px">
      Segurança começa<br>na <em>configuração.</em>
    </h2>
    <p class="sub anim anim-3" style="text-align:center;max-width:520px">
      Um servidor mal configurado é uma porta aberta — mesmo com firewall e antivírus ativos.
    </p>
  </div>
</div>

<div class="slide s-dark-mid" id="s11">
  <div class="grid-bg"></div>
  <div class="bar-l"></div>
  <div class="two-col">
    <div>
      <div class="chip anim anim-1">Hardening</div>
      <h2 class="h-md anim anim-2">O que fazemos<br><em>na prática</em></h2>
      <div class="line"></div>
      <ul class="blist anim anim-3">
        <li>Desativação de serviços e portas desnecessárias</li>
        <li>Políticas de senha e autenticação fortes</li>
        <li>Restrição de acessos privilegiados (PAM)</li>
        <li>Configuração de logs de auditoria</li>
        <li>Aplicação de patches de segurança</li>
        <li>Baseline CIS Benchmark para Linux e Windows</li>
      </ul>
    </div>
    <div class="center anim anim-3">
      <div style="background:var(--navy-light);border:1px solid rgba(29,158,117,.2);border-radius:14px;padding:1.75rem 2rem;max-width:280px;width:100%">
        <div style="font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem">Surface de ataque</div>
        <div style="display:flex;flex-direction:column;gap:.6rem">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <span style="font-size:.82rem;color:var(--gray)">Antes do hardening</span>
            <span style="font-size:.82rem;color:#F08080;font-weight:600">Alta ▲</span>
          </div>
          <div style="height:3px;background:rgba(240,128,128,.3);border-radius:2px;overflow:hidden">
            <div style="height:100%;width:88%;background:#F08080;border-radius:2px"></div>
          </div>
          <div style="display:flex;justify-content:space-between;align-items:center;margin-top:.5rem">
            <span style="font-size:.82rem;color:var(--gray)">Após o hardening</span>
            <span style="font-size:.82rem;color:var(--teal-l);font-weight:600">Baixa ▼</span>
          </div>
          <div style="height:3px;background:rgba(29,158,117,.2);border-radius:2px;overflow:hidden">
            <div style="height:100%;width:22%;background:var(--teal);border-radius:2px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="slide s-dark" id="s12">
  <div class="blob blob-br" style="opacity:.15"></div>
  <div class="center">
    <div class="chip anim anim-1">Backup & Recuperação</div>
    <h2 class="h-xl anim anim-2" style="text-align:center;max-width:760px">
      Perder dados não é mais<br>uma questão de <em>se</em> — é de <em>quando.</em>
    </h2>
    <p class="sub anim anim-3" style="text-align:center;max-width:520px">
      E com o Veeam Community Edition, não há desculpa para estar desprotegido.
    </p>
  </div>
</div>

<div class="slide s-dark-mid" id="s13">
  <div class="grid-bg"></div>
  <div class="bar-l"></div>
  <div class="two-col">
    <div>
      <div class="chip anim anim-1">Veeam Community Edition</div>
      <h2 class="h-md anim anim-2">Backup <em>profissional.</em><br>Custo zero.</h2>
      <div class="line"></div>
      <ul class="blist anim anim-3">
        <li>Proteção de até <strong style="color:var(--white)">10 workloads</strong> sem custo</li>
        <li>VMs, servidores físicos e instâncias em nuvem</li>
        <li>Backup automatizado com compressão e deduplicação</li>
        <li>Recuperação rápida — granular ou completa</li>
        <li>Sem limite de tempo. Sem trial. Licença permanente.</li>
      </ul>
    </div>
    <div class="anim anim-3" style="display:flex;flex-direction:column;gap:1rem">
      <div style="background:rgba(29,158,117,.1);border:1px solid rgba(29,158,117,.25);border-radius:12px;padding:1.5rem">
        <div style="font-family:'Fraunces',serif;font-size:2.5rem;font-weight:300;color:var(--teal-l);line-height:1">10</div>
        <div style="font-size:.8rem;color:var(--gray);margin-top:.3rem">workloads protegidos gratuitamente</div>
      </div>
      <div style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1.5rem">
        <div style="font-family:'Fraunces',serif;font-size:2.5rem;font-weight:300;color:var(--white);line-height:1">R$ 0</div>
        <div style="font-size:.8rem;color:var(--gray);margin-top:.3rem">para começar a proteger seus dados hoje</div>
      </div>
    </div>
  </div>
</div>

<div class="slide s-dark" id="s14">
  <div class="blob blob-c" style="opacity:.1;background:#4895EF"></div>
  <div class="center">
    <div class="chip anim anim-1">Segurança de Rede</div>
    <h2 class="h-xl anim anim-2" style="text-align:center;max-width:760px">
      Sua rede começa a ser protegida<br>na <em>borda.</em>
    </h2>
    <p class="sub anim anim-3" style="text-align:center;max-width:520px">
      Um firewall bem configurado é a primeira e mais crítica linha de defesa da sua infraestrutura.
    </p>
  </div>
</div>

<div class="slide s-dark-mid" id="s15">
  <div class="grid-bg"></div>
  <div class="bar-l"></div>
  <div class="two-col">
    <div>
      <div class="chip anim anim-1">Firewall SonicWall</div>
      <h2 class="h-md anim anim-2">Alta performance.<br><em>Controle total.</em></h2>
      <div class="line"></div>
      <ul class="blist anim anim-3">
        <li>Inspeção profunda de pacotes (DPI) em tempo real</li>
        <li>Filtragem de conteúdo e proteção contra ameaças</li>
        <li>VPN site-to-site e acesso remoto seguro</li>
        <li>Gerenciamento centralizado e relatórios de auditoria</li>
        <li>Escalável: de PMEs a ambientes corporativos complexos</li>
      </ul>
    </div>
    <div class="card-row anim anim-3" style="flex-direction:column">
      <div class="card" style="border-left:3px solid var(--teal-l)">
        <h4>Implantação</h4>
        <p>Instalação física, configuração de regras e políticas de acesso conforme as necessidades do negócio</p>
      </div>
      <div class="card" style="border-left:3px solid rgba(255,255,255,.2)">
        <h4>Otimização</h4>
        <p>Revisão de regras existentes, eliminação de brechas e alinhamento às boas práticas de segurança</p>
      </div>
    </div>
  </div>
</div>

<div class="slide s-dark" id="s16">
  <div class="blob blob-tl" style="opacity:.15;background:#D62828"></div>
  <div class="center">
    <div class="chip anim anim-1">Detecção & Resposta</div>
    <h2 class="h-xl anim anim-2" style="text-align:center;max-width:760px">
      Antivírus não é mais<br><em>suficiente.</em>
    </h2>
    <p class="sub anim anim-3" style="text-align:center;max-width:520px">
      As ameaças modernas exigem visibilidade em tempo real — em todo endpoint e em toda a superfície de ataque.
    </p>
  </div>
</div>

<div class="slide s-dark-mid" id="s17">
  <div class="grid-bg"></div>
  <div class="bar-l"></div>
  <div class="two-col">
    <div>
      <div class="chip anim anim-1">EDR / XDR</div>
      <h2 class="h-md anim anim-2">Além do antivírus.<br><em>Visibilidade real.</em></h2>
      <div class="line"></div>
      <ul class="blist anim anim-3">
        <li><strong style="color:var(--white)">EDR</strong> — Detecção e resposta em endpoints com análise comportamental</li>
        <li><strong style="color:var(--white)">XDR</strong> — Visibilidade estendida: endpoint, rede, nuvem e e-mail integrados</li>
        <li>Investigação de ameaças com telemetria completa</li>
        <li>Resposta automatizada e contenção em tempo real</li>
        <li>Redução do tempo de detecção (MTTD) e resposta (MTTR)</li>
      </ul>
    </div>
    <div class="anim anim-3">
      <div style="background:var(--navy-light);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.75rem;max-width:300px">
        <div style="font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:1.25rem">EDR vs Antivírus tradicional</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;font-size:.8rem;text-align:center">
          <div style="color:var(--gray);padding:.5rem;border-radius:6px;background:rgba(255,255,255,.03)">Antivírus</div>
          <div style="color:var(--teal-l);padding:.5rem;border-radius:6px;background:rgba(29,158,117,.1)">EDR / XDR</div>
          <div style="color:var(--gray);font-size:.75rem;padding:.4rem">Assinaturas conhecidas</div>
          <div style="color:rgba(255,255,255,.8);font-size:.75rem;padding:.4rem">Análise comportamental</div>
          <div style="color:var(--gray);font-size:.75rem;padding:.4rem">Reativo</div>
          <div style="color:rgba(255,255,255,.8);font-size:.75rem;padding:.4rem">Proativo & em tempo real</div>
          <div style="color:var(--gray);font-size:.75rem;padding:.4rem">Endpoint isolado</div>
          <div style="color:rgba(255,255,255,.8);font-size:.75rem;padding:.4rem">Visão unificada</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="slide s-dark" id="s18">
  <div class="grid-bg"></div>
  <div class="blob blob-tl" style="opacity:.2"></div>
  <div class="blob blob-br" style="opacity:.12"></div>
  <div class="center">
    <div class="logo-text-wrap anim anim-1">
      <svg class="logo-mark" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:clamp(40px,5vw,56px);height:clamp(40px,5vw,56px);flex-shrink:0"><line x1="10" y1="10" x2="32" y2="50" stroke="#4A6CF7" stroke-width="8" stroke-linecap="round"/><line x1="32" y1="50" x2="54" y2="10" stroke="#1D9E75" stroke-width="8" stroke-linecap="round"/><circle cx="54" cy="10" r="8" fill="#2BBFA0"/></svg>
      <div>
        <div class="logo-name" style="color:var(--white)">Vetore</div>
        <div class="logo-sub">Consultoria</div>
      </div>
    </div>
    <h2 class="h-lg anim anim-2" style="text-align:center;margin-top:1.5rem;max-width:700px">
      Pessoas. Processos.<br>Tecnologia. <em>Fornecedores.</em>
    </h2>
    <p class="sub anim anim-3" style="text-align:center;max-width:520px">
      Esses são os quatro pilares da sua postura de segurança.<br>Nós ajudamos a fortalecer todos eles.
    </p>
    <div class="line anim anim-3" style="margin:1.75rem auto"></div>
    <div class="anim anim-4" style="display:flex;flex-direction:column;align-items:center;gap:.5rem">
      <span style="font-size:clamp(1rem,2vw,1.3rem);color:var(--white);font-weight:500">contato@vetoreconsultoria.eti.br</span>
      <span style="color:var(--gray);font-size:.9rem">+55 (16) 99703-2226  ·  Ribeirão Preto, SP</span>
    </div>
  </div>
</div>

</div>

<div id="progress-track"><div id="progress-fill"></div></div>

<div id="controls">
  <span id="slide-counter">1 / 18</span>
  <button class="ctrl-btn" id="prevBtn" title="Anterior">‹</button>
  <button class="ctrl-btn" id="pauseBtn" title="Pausar/Retomar">⏸</button>
  <button class="ctrl-btn" id="nextBtn" title="Próximo">›</button>
  <button class="ctrl-btn" id="musicBtn" title="Música">🔊</button>
</div>

const fill    = document.getElementById('progress-fill');
const counter = document.getElementById('slide-counter');

function goTo(n, noReset) {
  document.getElementById('s' + current).classList.remove('active');
  current = ((n - 1 + TOTAL) % TOTAL) + 1;
  document.getElementById('s' + current).classList.add('active');
  counter.textContent = current + ' / ' + TOTAL;
  if (!noReset) { elapsed = 0; fill.style.width = '0%'; }
}

/* keyboard */
document.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight' || e.key === ' ') { elapsed = 0; goTo(current + 1); }
  if (e.key === 'ArrowLeft') { elapsed = 0; goTo(current - 1); }
  if (e.key === 'p' || e.key === 'P') document.getElementById('pauseBtn').click();
});

startTick();

/* ══ WEB AUDIO — MÚSICA AMBIENTE ══ */
let audioCtx = null;
let musicOn  = false;
const nodes  = [];

function startMusic() {
  audioCtx = new (window.AudioContext || window.webkitAudioContext)();

/* reverb simples via convolver */
  const conv = audioCtx.createConvolver();
  const len  = audioCtx.sampleRate * 2.5;
  const buf  = audioCtx.createBuffer(2, len, audioCtx.sampleRate);
  for (let c = 0; c < 2; c++) {
    const d = buf.getChannelData(c);
    for (let i = 0; i < len; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / len, 2.2);
  }
  conv.buffer = buf;

const masterGain = audioCtx.createGain();
  masterGain.gain.setValueAtTime(0, audioCtx.currentTime);
  masterGain.gain.linearRampToValueAtTime(0.28, audioCtx.currentTime + 3);
  masterGain.connect(audioCtx.destination);
  conv.connect(masterGain);

/* pad notas — acorde Am7 calmo */
  const chord = [
    110.00, 130.81, 164.81, 196.00, 246.94, /* A2 C3 E3 G3 B3 */
    220.00, 261.63, 329.63, 392.00,          /* oitava acima */
    440.00, 523.25,                           /* A4 C5 */
  ];

chord.forEach((freq, i) => {
    const osc  = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    const flt  = audioCtx.createBiquadFilter();

osc.type = i % 3 === 0 ? 'sine' : i % 3 === 1 ? 'triangle' : 'sine';
    osc.frequency.value = freq;

/* vibrato lento */
    const lfo = audioCtx.createOscillator();
    const lfog = audioCtx.createGain();
    lfo.frequency.value = 0.12 + i * 0.03;
    lfog.gain.value = 0.4;
    lfo.connect(lfog);
    lfog.connect(osc.frequency);
    lfo.start();

flt.type = 'lowpass';
    flt.frequency.value = 1800;
    flt.Q.value = 0.5;

/* vol aleatório e fade in escalonado */
    gain.gain.setValueAtTime(0, audioCtx.currentTime);
    gain.gain.linearRampToValueAtTime(
      (0.04 + Math.random() * 0.03) / (1 + i * 0.05),
      audioCtx.currentTime + 2 + i * 0.4
    );

osc.connect(flt);
    flt.connect(gain);
    gain.connect(conv);
    gain.connect(masterGain);

osc.start();
    nodes.push(osc, lfo, gain);
  });

/* low rumble suave */
  const sub = audioCtx.createOscillator();
  const subG = audioCtx.createGain();
  sub.frequency.value = 55;
  sub.type = 'sine';
  subG.gain.setValueAtTime(0, audioCtx.currentTime);
  subG.gain.linearRampToValueAtTime(0.06, audioCtx.currentTime + 3);
  sub.connect(subG);
  subG.connect(masterGain);
  sub.start();
  nodes.push(sub, subG);

nodes.push(masterGain, conv);
}

document.getElementById('musicBtn').onclick = () => {
  musicOn = !musicOn;
  document.getElementById('musicBtn').textContent = musicOn ? '🔇' : '🔊';
  if (musicOn) startMusic(); else stopMusic();
};
</script>
</body>
</html>

Segurança que protege e governa o seu negócio

Cibersegurança deixou de ser um problema de TI.
Tornou-se uma decisão de negócio.

Soluções integradas para cada desafio

Diagnóstico de Segurança

CIS Controls

NIST CSF 2.0

Infraestrutura Segura

Gestão de Riscos

Treinamento & Conscientização

Backup com Veeam Community

Firewall SonicWall

EDR / XDR

Conheça nossas soluções

Apresentação Vetore

Especialistas em segurança e infraestrutura de TI

Vamos conversar sobre o seu projeto

Segurança que protege e governa o seu negócio

Cibersegurança deixou de ser um problema de TI.Tornou-se uma decisão de negócio.

Soluções integradas para cada desafio

Diagnóstico de Segurança

CIS Controls

NIST CSF 2.0

Infraestrutura Segura

Gestão de Riscos

Treinamento & Conscientização

Backup com Veeam Community

Firewall SonicWall

EDR / XDR

Conheça nossas soluções

Apresentação Vetore

Especialistas em segurança e infraestrutura de TI

Vamos conversar sobre o seu projeto

Cibersegurança deixou de ser um problema de TI.
Tornou-se uma decisão de negócio.