.elementor-4472 .elementor-element.elementor-element-2275c6d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-4472:not(.elementor-motion-effects-element-type-background), body.elementor-page-4472 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#010450;}/* Start custom CSS for html, class: .elementor-element-3f42c9a */:root{
  --bni-red: #CF2030;
  --ink: #0E0F12;
  --muted: #60646C;
  --bg: #0B0B0D;
  --card: #121318;
  --line: rgba(255,255,255,.10);
  --soft: rgba(207,32,48,.14);
  --white: #FFFFFF;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --max: 1120px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: rgba(255,255,255,.92);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(207,32,48,.28), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
              var(--bg);
  line-height: 1.55;
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity: .95; }

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(11,11,13,.68);
  border-bottom: 1px solid var(--line);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
}
.brand__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--bni-red);
  box-shadow: 0 0 0 6px rgba(207,32,48,.18);
}
.brand__name{ color: var(--white); }
.brand__sep{ color: rgba(255,255,255,.35); }
.brand__sub{ color: rgba(255,255,255,.7); font-weight: 600; }

.nav{
  display:flex;
  gap: 10px;
  align-items:center;
}
.nav a{
  color: rgba(255,255,255,.78);
  font-weight: 650;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.nav a:hover{
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 750;
  border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn--primary{
  background: var(--bni-red);
  color: var(--white);
  box-shadow: 0 14px 34px rgba(207,32,48,.28);
}
.btn--primary:hover{ background: #D72635; }

.btn--ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

.btn--soft{
  background: var(--soft);
  border-color: rgba(207,32,48,.35);
  color: rgba(255,255,255,.92);
}
.btn--soft:hover{
  border-color: rgba(207,32,48,.55);
}

.btn--wide{ min-width: 170px; }

.hero{
  padding: 58px 0 30px;
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
  align-items: start;
}

.badge{
  display:inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  font-weight: 700;
  margin: 0 0 14px 0;
}

h1{
  margin: 0 0 12px 0;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.6px;
}

.lead{
  margin: 0 0 18px 0;
  font-size: 18px;
  color: rgba(255,255,255,.78);
  max-width: 70ch;
}

.hero__cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 18px;
}

.mini-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mini-stats__item{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 12px 12px;
}
.mini-stats__kpi{
  display:block;
  font-weight: 850;
  color: rgba(255,255,255,.92);
}
.mini-stats__txt{
  display:block;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  margin-top: 4px;
}

.card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 18px 18px;
}
.card__title{
  margin: 0 0 10px 0;
  font-size: 16px;
  letter-spacing: .2px;
}
.card__p{
  margin: 0 0 14px 0;
  color: rgba(255,255,255,.76);
}
.card__list{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,.82);
}
.divider{
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}
.card__small{
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

.section{
  padding: 44px 0;
}
.section--alt{
  background: rgba(255,255,255,.02);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

h2{
  margin: 0 0 10px 0;
  font-size: 28px;
  letter-spacing: -0.3px;
}
.sub{
  margin: 0 0 18px 0;
  color: rgba(255,255,255,.68);
  max-width: 80ch;
}

.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.mt{ margin-top: 16px; }

.panel{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(18,19,24,.65);
  padding: 18px 18px;
}
.panel h3{
  margin: 0 0 8px 0;
  font-size: 18px;
}
.panel p{
  margin: 0 0 10px 0;
  color: rgba(255,255,255,.75);
}

.linkpanel{
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.linkpanel:hover{
  transform: translateY(-2px);
  border-color: rgba(207,32,48,.45);
  background: rgba(255,255,255,.04);
}

.panel--icon .icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(207,32,48,.16);
  border: 1px solid rgba(207,32,48,.35);
  margin-bottom: 10px;
}

.bullets{
  margin: 12px 0 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.74);
}
.bullets li{ margin: 8px 0; }

.steps{
  margin: 12px 0 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.74);
}
.steps li{ margin: 8px 0; }

.callout{
  border: 1px solid rgba(207,32,48,.30);
  background: rgba(207,32,48,.10);
  border-radius: 14px;
  padding: 14px 14px;
  color: rgba(255,255,255,.86);
}
.small{
  margin: 10px 0 0 0;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

.case{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding: 18px 18px;
}
.case h3{ margin: 0 0 8px 0; }
.case p{ margin: 0 0 12px 0; color: rgba(255,255,255,.74); }
.case__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
}

.cta{
  padding: 34px 0 56px;
}
.cta__inner{
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(207,32,48,.35);
  background: linear-gradient(180deg, rgba(207,32,48,.20), rgba(255,255,255,.03));
  box-shadow: 0 18px 50px rgba(207,32,48,.10);
  padding: 22px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}
.cta__inner p{
  margin: 6px 0 0 0;
  color: rgba(255,255,255,.75);
}
.cta__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer{
  border-top: 1px solid var(--line);
  padding: 22px 0 34px;
  color: rgba(255,255,255,.72);
}
.footer__inner{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer__muted{
  margin: 0;
  color: rgba(255,255,255,.55);
}

@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .nav{ display:none; }
}

@media (max-width: 720px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .mini-stats{ grid-template-columns: 1fr; }
  .cta__inner{ flex-direction: column; align-items: flex-start; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2275c6d *//* =========================
   OVERRIDE: CAIXAS BRANCAS + MOBILE-FIRST
   Fundo do site: #010450
   ========================= */

:root{
  --bg: #010450;           /* teu fundo */
  --surface: #ffffff;      /* caixas brancas */
  --text: #0b1220;         /* texto principal nas caixas */
  --text2: #334155;        /* texto secundário nas caixas */
  --stroke: rgba(15, 23, 42, .12);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.20);
}

/* Fundo */
body{
  background: var(--bg);
}

/* Títulos e textos fora das caixas no fundo azul */
h1, h2{
  color: rgba(255,255,255,.95);
}
.lead, .sub{
  color: rgba(255,255,255,.78);
}

/* CAIXAS: panel, case, card, mini-stats */
.panel,
.case,
.card,
.mini-stats__item{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Textos dentro das caixas */
.panel p,
.case p,
.card__p,
.bullets,
.steps,
.small{
  color: var(--text2) !important;
}

.panel h3,
.case h3,
.card__title,
.mini-stats__kpi{
  color: var(--text) !important;
}

/* Chips/tags dentro das caixas brancas */
.chip,
.tag{
  background: rgba(1, 4, 80, .06) !important;
  border: 1px solid rgba(1, 4, 80, .14) !important;
  color: #010450 !important;
}

/* Callout dentro de caixa branca */
.callout{
  background: rgba(1, 4, 80, .06) !important;
  border: 1px solid rgba(1, 4, 80, .18) !important;
  color: var(--text) !important;
}

/* Botões com alvo de toque confortável (mobile) */
.btn{
  min-height: 48px;                 /* bom pra dedo */
  padding: 14px 18px;
  font-size: 16px;
}

/* Mobile-first: tudo em 1 coluna, com mais espaço */
@media (max-width: 720px){
  .container{
    width: calc(100% - 28px);
  }

  .hero{
    padding: 34px 0 18px;
  }

  h1{
    font-size: 34px;
    line-height: 1.05;
  }

  h2{
    font-size: 24px;
  }

  .lead{
    font-size: 16px;
    line-height: 1.55;
  }

  .grid-2,
  .grid-3,
  .mini-stats{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .panel,
  .case,
  .card,
  .mini-stats__item{
    padding: 16px !important;
    border-radius: 16px;
  }

  .nav{
    display: none; /* mantém limpo no celular */
  }

  .hero__cta{
    gap: 10px;
  }

  .btn--wide{
    width: 100%;
  }

  .cta__actions{
    width: 100%;
  }
  .cta__actions .btn{
    width: 100%;
  }
}

/* Extra: deixa os cards clicáveis com feedback melhor */
.linkpanel{
  -webkit-tap-highlight-color: transparent;
}
.linkpanel:active{
  transform: scale(0.99);
}/* End custom CSS */
/* Start custom CSS *//* =========================
   FIX: TÍTULOS BRANCOS NO FUNDO AZUL + CTA FINAL BRANCO
   (cole no FINAL do CSS)
   ========================= */

/* 1) Títulos e textos que ficam no FUNDO (fora das caixas) */
.section > .container > h2,
.section > .container > h1,
.hero__copy h1,
.hero__copy h2{
  color: rgba(255,255,255,.96) !important;
}

.section > .container > .sub,
.section > .container > p,
.hero__copy .lead{
  color: rgba(255,255,255,.78) !important;
}

/* Se teu H2 tem alguma classe ou herança estranha, isso aqui garante */
#sumario h2,
#o-que-saber h2,
#persona h2,
#apps h2,
#usabilidade h2,
#cuidados h2,
#aplicar h2,
#famosas h2{
  color: rgba(255,255,255,.96) !important;
}

/* 2) CTA final (Vídeo da apresentação) vira CAIXA BRANCA de verdade */
.cta__inner{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.20) !important;
}

.cta__inner h2{
  color: #0b1220 !important;
}

.cta__inner p{
  color: #334155 !important;
}

/* 3) Botão fantasma no CTA final (pra ficar legível no branco) */
.cta__inner .btn--ghost{
  background: rgba(1, 4, 80, .06) !important;
  border-color: rgba(1, 4, 80, .18) !important;
  color: #010450 !important;
}

/* 4) Ajuste fino mobile: CTA empilhado e botões 100% */
@media (max-width: 720px){
  .cta__inner{
    padding: 16px !important;
  }
  .cta__actions{
    width: 100% !important;
  }
  .cta__actions .btn{
    width: 100% !important;
  }
}/* End custom CSS */