/* ------------------------------------------------------------------------------
   Vetom Studio — ajustes do site em cima do modelo (css/style.css), herdados do site do Vozz Studio
   Cores: ciano #2EE6FF + azul-marinho (as do ícone do programa)
------------------------------------------------------------------------------- */
:root{
  --ciano: #2EE6FF;
  --ciano-claro: #9cf4ff;
  --marinho: #0b1d4a;
  --marinho-medio: #13306e;
  --marinho-fundo: #071433;
  --quase-preto: #050c1f;
  --texto-claro: rgba(255,255,255,0.78);
}

/* o pagePiling põe cada seção numa camada (a 1ª fica na camada = nº de seções); com 11 seções ela passava
   por cima do cabeçalho (camada 10 do tema). Cabeçalho, rodapé e barrinha acima das seções, abaixo do menu (110). */
.navbar-desctop, .navbar-bottom, .progress-nav{ z-index: 50; }
img.w-100{ height: auto; }   /* as imagens têm width/height no HTML (evita pulo ao carregar) */
.border-radius{ border-radius: 14px; }
.foto-sombra{ box-shadow: 0 30px 60px -25px rgba(11,29,74,0.55); }

/* ---------- Barra do topo ---------- */
.marca{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.marca img{ width: 40px; height: 40px; border-radius: 10px; }
.marca b{ font-weight: 400; }
.navbar-white .marca b{ color: var(--ciano); }

/* tudo alinhado no meio da barra, em qualquer largura de tela
   (antes, em telas largas, o logo e os textos desciam e a linha de baixo passava por eles) */
.navbar-desctop{ display: flex; align-items: center; }
.navbar-desctop > .position-relative{ display: flex; align-items: center; height: 100%; }
.navbar-desctop .navbar-brand.marca{
  position: relative;
  top: auto;
  float: none;
  flex: 0 0 auto;
  margin: 0 4rem 0 0;
}
.navbar-desctop .container{
  display: flex!important;
  align-items: center;
  justify-content: flex-start!important;   /* o Bootstrap espalhava os itens até o botão do menu */
  gap: 3.5rem;
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.navbar-desctop .phone,
.navbar-desctop .email{ float: none; top: auto; margin: 0; }
.navbar-desctop .toggler{
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  margin-left: auto;
}
.selo-teste{
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
}
.navbar-white .selo-teste{ color: var(--ciano); }

.navbar-white:not(.fixed) .navbar-nav-desctop > .active > a,
.navbar-white:not(.fixed) .navbar-nav-desctop > li > .active,
.navbar-white:not(.fixed) .navbar-nav-desctop > li:hover > a,
.navbar-white:not(.fixed) .social-icons ion-icon:hover{
  color: var(--ciano);
}
.social-icons ion-icon{ font-size: 1.5rem; }

/* menu lateral */
.menu-marca{
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: 'Karla', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2.5rem;
}
.menu-marca img{ border-radius: 12px; }
.menu-marca b{ color: var(--ciano); font-weight: 400; }
.navbar-nav-mobile li a:hover,
.navbar-nav-mobile li a.active{ color: var(--ciano)!important; }

/* ---------- Seções escuras ---------- */
.fundo-hero,
.fundo-escuro{
  background:
    radial-gradient(1100px 650px at 80% 35%, rgba(46, 150, 255, 0.32), transparent 62%),
    radial-gradient(800px 500px at 5% 95%, rgba(46, 230, 255, 0.07), transparent 60%),
    linear-gradient(160deg, #0d2257 0%, var(--marinho-fundo) 55%, var(--quase-preto) 100%)!important;
}
.fundo-escuro .intro,
.fundo-hero .intro{ position: relative; z-index: 1; }

/* barras de som animadas (o "equalizador" do fundo) */
.eq{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 2.5%;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.eq span{
  flex: 1;
  height: 12%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, var(--ciano), rgba(46, 230, 255, 0.1));
  animation: eq-sobe 1.2s ease-in-out infinite alternate;
}
@keyframes eq-sobe{
  from{ height: 8%; }
  to{ height: var(--h, 70%); }
}
.eq-baixo{ height: 14vh; opacity: 0.14; }

/* ---------- 1. Início ---------- */
.hero-kicker{
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ciano);
}
.hero-titulo{
  font-size: 5.2rem;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
#home h1 + .line{
  margin-top: 2.2rem;
  width: 6rem;
}
.hero-texto{
  margin-top: 1.8rem;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--texto-claro);
  max-width: 33rem;
}
.hero-botoes{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}
.btn-contorno{
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: #fff!important;
}
.btn-contorno:hover,
.btn-contorno:focus{
  background: transparent;
  border-color: var(--ciano);
  color: var(--ciano)!important;
}

/* a tela do programa numa "janela" inclinada */
.janela-app{
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #15171c;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 50px 90px -30px rgba(0,0,0,0.8),
    0 0 0 1px rgba(46,230,255,0.12),
    0 0 80px rgba(46,230,255,0.10);
  transform: perspective(1800px) rotateY(-11deg) rotateX(4deg);
  transition: transform 0.7s ease, box-shadow 0.7s ease;
  cursor: zoom-in;
}
.janela-app:hover{
  transform: perspective(1800px) rotateY(-4deg) rotateX(1deg);
  box-shadow:
    0 50px 90px -30px rgba(0,0,0,0.8),
    0 0 0 1px rgba(46,230,255,0.3),
    0 0 110px rgba(46,230,255,0.16);
}
.janela-barra{
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: #0f1014;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font: 700 13px/1 'Karla', sans-serif;
  color: #bdbdbd;
}
.janela-barra i{
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a3d45;
}
.janela-barra i:first-child{ background: #ff5f57; }
.janela-barra i:nth-child(2){ background: #febc2e; }
.janela-barra i:nth-child(3){ background: #28c840; margin-right: 8px; }
.janela-barra img{ width: 18px; height: 18px; border-radius: 4px; }
.janela-app > img{ display: block; width: 100%; height: auto; }

/* ---------- Seções claras ---------- */
mark{
  color: inherit;
  padding: 0 0.12em;
  background: linear-gradient(transparent 58%, var(--ciano) 58%, var(--ciano) 92%, transparent 92%);
}
.rotulo{
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- 2. O que é ---------- */
.texto-sobre{ font-size: 1.08rem; line-height: 1.8; max-width: 32rem; }
.lista-caixa-alta p{
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #343434;
  margin-bottom: 0.7rem;
  padding-left: 1.4rem;
  position: relative;
}
.lista-caixa-alta p:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--ciano);
  box-shadow: 0 0 0 2px #000;
}
.numero-menor{ font-size: 4.4rem; letter-spacing: -0.03em; }
#o-que-e .experience-info{
  left: auto;
  right: -1rem;
  transform: none;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: #fff;
  padding: 1.5rem 2rem 1.5rem 1.8rem;   /* respiro nas bordas do bloco branco */
  border-radius: 14px;
  box-shadow: 0 20px 40px -20px rgba(11,29,74,0.45);
}
#o-que-e .experience-text{ font-size: 0.82rem; letter-spacing: 0.05em; left: 0; }

/* ---------- 3. Como funciona ---------- */
.marca-dagua{
  position: absolute;
  right: -6vw;
  top: 50%;
  width: 62vh;
  height: 62vh;
  transform: translateY(-50%);
  background: url('../img/vetom-icone-512.png') center/contain no-repeat;
  opacity: 0.07;
  filter: saturate(0.6);
  pointer-events: none;
}
.passo-numero{
  display: inline-block;
  font-family: 'Karla', sans-serif;
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--ciano);
}
.passo-rotulo{
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ciano);
  margin-bottom: 0.4rem;
}
#como-funciona .row-experience{ color: var(--texto-claro); line-height: 1.7; }
#como-funciona .row-experience,
#como-funciona .row-experience:first-child{ padding-top: 1.6rem; padding-bottom: 1.6rem; }
#como-funciona .row-experience:first-child{ padding-top: 0; }

/* ---------- 4. Recursos ---------- */
.colagem .photo-icon{
  width: 110px;
  border-radius: 18px;
  border: 3px solid var(--ciano);
  z-index: 2;
}
.colagem .photo-icon-2{ width: 92px; }
.lista-recursos{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.6rem;
}
.lista-recursos li{
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #4a4a4a;
  line-height: 1.35;
}
.lista-recursos b{ color: #000; }
.lista-recursos ion-icon{
  flex: 0 0 auto;
  font-size: 1.25rem;
  padding: 0.55rem;
  border-radius: 12px;
  background: var(--marinho);
  color: var(--ciano);
}

/* ---------- 5. Telas ---------- */
#telas{ background: var(--quase-preto); }
.bg-changer:after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,12,31,0.94) 0%, rgba(5,12,31,0.80) 45%, rgba(5,12,31,0.62) 100%),
    linear-gradient(to top, rgba(5,12,31,0.85), transparent 40%);
}
.project-box{
  background: rgba(7,20,51,0.35);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  border-color: rgba(255,255,255,0.35);
  border-radius: 12px;
  cursor: zoom-in;
}
@media (min-width: 768px){
  .project-box{ padding-bottom: 42%; }
}
.project-lupa{
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  font-size: 1.4rem;
  color: #fff;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.project-box:hover .project-lupa{ color: #000; opacity: 1; }

/* ---------- 6. O que precisa ---------- */
.row-precisa{ margin-top: -1rem; }
.col-precisa{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: 2.2rem;
}
.col-precisa ion-icon{
  font-size: 1.7rem;
  padding: 0.8rem;
  border-radius: 16px;
  background: var(--marinho);
  color: var(--ciano);
  margin-bottom: 0.8rem;
  transition: transform 0.3s ease;
}
.col-precisa:hover ion-icon{ transform: translateY(-4px) rotate(-4deg); }
.col-precisa strong{
  font-family: 'Karla', sans-serif;
  font-size: 1.15rem;
  color: #000;
}
.col-precisa span{ color: #767676; line-height: 1.5; }

/* ---------- 7. Perguntas ---------- */
.fundo-perguntas .icon-quote{
  font-family: 'Karla', sans-serif;
  font-weight: 800;
  font-size: 10rem;
  margin-top: -1rem;
  text-shadow: 0 0 60px rgba(46,230,255,0.35);
}
.carousel-testimonials p{ color: var(--texto-claro); font-size: 1.1rem; line-height: 1.8; }
.carousel-testimonials .h4{ line-height: 1.35; }
#perguntas .owl-prev:hover,
#perguntas .owl-next:hover{ color: var(--ciano)!important; }

/* ---------- 8. Para quem é ---------- */
.news-row figure{ margin: 0; }
.news-row .image-link{ border-radius: 12px; cursor: zoom-in; }
.news-row figcaption p.size-sm{ letter-spacing: 0.16em; color: #000; font-weight: 700; }
.news-row figcaption p.size-sm:before{
  content: '';
  display: inline-block;
  width: 1.6rem;
  height: 3px;
  background: var(--ciano);
  vertical-align: middle;
  margin-right: 0.6rem;
}
.news-row figcaption h4{ margin-bottom: 0.6rem; }

/* ---------- 9. Quero testar ---------- */
.fundo-contato .form-control{
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.35);
  padding-left: 0.2rem;
}
.fundo-contato .form-control:focus{ border-bottom-color: var(--ciano); }
.fundo-contato .form-control::placeholder{ color: rgba(255,255,255,0.55); }
.btn-whatsapp{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.btn-whatsapp ion-icon{ font-size: 1.3rem; }
.icone-titulo{ color: var(--ciano); vertical-align: -0.15em; font-size: 1.5rem; }
.numero-whatsapp{ color: #fff!important; border-bottom: 2px solid var(--ciano); }
.numero-whatsapp:hover{ color: var(--ciano)!important; text-decoration: none; }
#success-message{ color: var(--ciano); }
#error-message{ color: #ff9a8a; }

/* ---------- Plugin Vozz VS ---------- */
.lista-vs{ list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; display: grid; gap: 0.7rem; }
.lista-vs li{ display: flex; align-items: center; gap: 0.8rem; color: var(--texto-claro); }
.lista-vs ion-icon{ flex: none; font-size: 1.2rem; padding: 0.5rem; border-radius: 12px; background: rgba(46,230,255,0.1); color: var(--ciano); }
.canais-vs{ display: grid; gap: 1.4rem; }
.canal{
  padding: 1.1rem 1.3rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(7,20,51,0.55);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8);
}
.canal-rotulo{ font-family: 'Karla', sans-serif; font-weight: 700; color: #fff; margin-bottom: 0.7rem; }
.canal-rotulo b{
  display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-right: 0.5rem;
  border-radius: 8px; background: var(--ciano); color: #04122e;
}
.canal-onda{ height: 70px; display: flex; align-items: center; gap: 3px; }
.canal-click span{ flex: 1; height: 26%; border-radius: 2px; background: rgba(46,230,255,0.45); }
.canal-click span.forte{ height: 70%; background: var(--ciano); box-shadow: 0 0 12px rgba(46,230,255,0.5); }
.canal-playback span{ flex: 1; border-radius: 2px; background: linear-gradient(to top, #3d7bff, #9cc3ff); }
.canal-destino{ margin-top: 0.7rem; color: var(--texto-claro); font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; }
.canal-destino ion-icon{ color: var(--ciano); font-size: 1.15rem; }

/* ---------- Em breve: versão web ---------- */
.texto-embreve{ color: var(--texto-claro); font-size: 1.1rem; line-height: 1.8; max-width: 32rem; }
.aparelhos{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.6rem;
}
.aparelho{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  color: #fff;
}
.aparelho span{ display: inline-flex; align-items: center; gap: 0.35rem; }
.aparelho ion-icon{ font-size: 1.05rem; width: 1.05rem; height: 1.05rem; }
.aparelho-tela{
  position: relative;
  border: 3px solid rgba(255,255,255,0.85);
  border-radius: 18px;
  background: linear-gradient(160deg, #13306e, #071433);
  box-shadow: 0 0 0 1px rgba(46,230,255,0.25), 0 20px 50px -20px rgba(0,0,0,0.8), 0 0 50px rgba(46,230,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aparelho-celular .aparelho-tela{ width: 92px; height: 176px; border-radius: 20px; }
.aparelho-tablet .aparelho-tela{ width: 150px; height: 206px; }
.aparelho-ipad .aparelho-tela{ width: 250px; height: 180px; }
.barras-mini{ display: flex; align-items: center; gap: 5px; height: 46%; }
.barras-mini i{
  width: 6px;
  border-radius: 3px;
  background: var(--ciano);
  height: 30%;
  animation: eq-sobe 1.1s ease-in-out infinite alternate;
}
.barras-mini i:nth-child(2n){ animation-duration: 0.8s; --h: 90%; }
.barras-mini i:nth-child(3n){ animation-duration: 1.4s; --h: 60%; }
.barras-mini i:nth-child(4n){ animation-duration: 0.95s; --h: 100%; }
.nota-aparelhos{ text-align: center; color: var(--texto-claro); margin-top: 1.4rem; font-size: 0.95rem; letter-spacing: 0.04em; }
@media (max-width: 767px){
  .aparelhos{ gap: 0.8rem; }
  .aparelho-celular .aparelho-tela{ width: 62px; height: 118px; }
  .aparelho-tablet .aparelho-tela{ width: 96px; height: 132px; }
  .aparelho-ipad .aparelho-tela{ width: 150px; height: 108px; }
}

/* ---------- Lightbox das telas ---------- */
.mfp-bg{ background: var(--quase-preto); opacity: 0.92; }
.mfp-title{ font-family: 'Karla', sans-serif; font-size: 1rem; color: #fff; }
.mfp-counter{ color: var(--ciano); }
.mfp-fade.mfp-bg{ opacity: 0; transition: all 0.2s ease-out; }
.mfp-fade.mfp-bg.mfp-ready{ opacity: 0.92; }
.mfp-fade.mfp-bg.mfp-removing{ opacity: 0; }
.mfp-fade.mfp-wrap .mfp-content{ opacity: 0; transition: all 0.2s ease-out; }
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{ opacity: 1; }
.mfp-fade.mfp-wrap.mfp-removing .mfp-content{ opacity: 0; }

/* ---------- Telas menores ---------- */
@media (max-width: 1199px){
  .hero-titulo{ font-size: 4.4rem; }
}
@media (max-width: 991px){
  .janela-app{ transform: none; }
  .janela-app:hover{ transform: none; }
  .hero-titulo{ font-size: 4rem; }
  .marca-dagua{ display: none; }
  .lista-recursos{ grid-template-columns: 1fr; }
  #o-que-e .experience-info{ right: 0.5rem; }
}
@media (max-width: 767px){
  h2, .h2{ font-size: 2.1rem; }
  .hero-titulo{ font-size: 3.3rem; }
  .hero-texto{ font-size: 1.05rem; }
  .marca{ font-size: 1.35rem; }
  .marca img{ width: 34px; height: 34px; }
  .passo-numero{ font-size: 3.2rem; }
  .numero-menor{ font-size: 3.4rem; }
  .fundo-perguntas .icon-quote{ font-size: 6rem; }
  .colagem .photo-icon{ width: 76px; border-width: 2px; border-radius: 14px; }
  .colagem .photo-icon-2{ width: 66px; left: 6px; }
  .colagem .photo-icon-3{ right: 6px; }
  .progress-nav{ display: none; }             /* no celular a barrinha da direita encostava no texto */
  .col-precisa{ margin-top: 1.6rem; }
  .col-precisa ion-icon{ font-size: 1.4rem; padding: 0.65rem; margin-bottom: 0.5rem; }
  .col-precisa strong{ font-size: 1rem; }
  .col-precisa span{ font-size: 0.9rem; }
  .row-experience{ text-align: left; }
  #o-que-e .experience-info{ position: relative; left: 0; right: 0; top: 0; margin-top: -3rem; display: inline-block; }
}
@media (prefers-reduced-motion: reduce){
  .eq span{ animation: none; height: var(--h, 40%); }
  .janela-app, .janela-app:hover{ transition: none; }
}

/* Vozz Studio Leve (comparação na home) */
.texto-leve{ max-width: 760px; color: rgba(255,255,255,.85); }
.tabela-leve{ border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; max-width: 980px; }
.tabela-leve-linha{ display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 1rem; align-items: center;
  padding: .7rem 1.1rem; border-top: 1px solid rgba(255,255,255,.08); }
.tabela-leve-linha:first-child{ border-top: 0; }
.tabela-leve-topo{ background: rgba(255,255,255,.06); }
.tabela-leve-preco{ background: rgba(46,230,255,.06); }
.tabela-leve-linha > span{ color: rgba(255,255,255,.78); }
.tabela-leve-linha b{ font-weight: 600; }
.tabela-leve-linha small{ display: block; font-size: .78rem; font-weight: 400; color: rgba(255,255,255,.6); }
.tabela-leve-linha ion-icon{ font-size: 1.35rem; color: var(--ciano); vertical-align: middle; }
.tabela-leve-linha ion-icon.nao{ color: rgba(255,255,255,.35); }
.nota-leve{ color: rgba(255,255,255,.75); font-size: .95rem; max-width: 760px; }
@media (max-width: 575px){
  .tabela-leve-linha{ grid-template-columns: 1fr 1fr; gap: .35rem 1rem; }
  .tabela-leve-linha > span{ grid-column: 1 / -1; font-weight: 600; color: #fff; }
  .tabela-leve-topo > span{ display: none; }
}

/* ---------- Celular e tablet: barra do topo da home ----------
   Os itens não cabiam e empurravam o menu (☰) para fora da tela; e o conteúdo das seções passava
   por baixo da barra transparente. Agora: menu a 15px da borda e fundo da cor da seção (roxo ou branco). */
@media (max-width: 991px){
  .navbar-desctop{
    padding-right: 15px;
    background: rgba(255,255,255,0.97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background-color .3s ease;
  }
  .navbar-desctop.navbar-white{ background: rgba(9,22,56,0.97); }
  .navbar-desctop .navbar-brand.marca{ margin-right: auto; min-width: 0; }
  .navbar-desctop .toggler{ margin-left: 0; }
  .navbar-desctop .container{ display: none!important; }   /* frase e selo: não cabem (a frase já aparece na seção) */
}
@media (max-width: 400px){
  .navbar-desctop .marca{ font-size: 1.2rem; }
  .navbar-desctop .marca img{ width: 30px; height: 30px; }
}
@media (max-width: 359px){
  .navbar-desctop .nav-loja-link{ display: none; }        /* "Loja" continua no menu */
}


/* ==============================================================================
   Vetom Studio — peças próprias
   ============================================================================== */
:root{ --ciano: #2EE6FF; --azul: #3d7bff; }

/* fundo do topo: grade de pontos (prancheta) + manchas de luz */
.grade-fundo{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
.mancha{ position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none; z-index: 0; }
.mancha-1{ width: 380px; height: 380px; background: var(--ciano); right: 8%; top: 12%; animation: flutua 14s ease-in-out infinite alternate; }
.mancha-2{ width: 300px; height: 300px; background: var(--azul); right: 30%; bottom: 6%; animation: flutua 18s ease-in-out infinite alternate-reverse; }
@keyframes flutua{ from{ transform: translate(0,0) scale(1); } to{ transform: translate(-40px, 30px) scale(1.12); } }
@media (prefers-reduced-motion: reduce){ .mancha{ animation: none; } }

.selo-beta{ display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #04122e; background: var(--ciano); padding: .3rem .7rem; border-radius: 999px; }

/* grade de plugins */
.grade-plugins{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.plugin-card{ display: flex; gap: .9rem; align-items: flex-start; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 1rem 1.1rem; }
.plugin-card ion-icon{ flex: none; font-size: 1.35rem; padding: .55rem; border-radius: 12px; background: rgba(46,230,255,0.1); color: var(--ciano); }
.plugin-card b{ display: block; color: #fff; font-size: 1rem; margin-bottom: .2rem; }
.plugin-card span{ display: block; color: rgba(255,255,255,0.68); font-size: .86rem; line-height: 1.45; }
.plugin-card.destaque{ border-color: rgba(46,230,255,0.45); background: rgba(46,230,255,0.07); }

/* modelos prontos (miniaturas) */
.grade-modelos{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; max-width: 980px; }
.grade-modelos a{ display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); transition: transform .2s; }
.grade-modelos a:hover{ transform: translateY(-4px); }
.grade-modelos img{ display: block; width: 100%; height: auto; }
@media (max-width: 991px){ .grade-modelos{ grid-template-columns: repeat(3, 1fr); } }
.nichos{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.nichos span{ font-size: .82rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); }
.nichos span.pronto{ background: var(--ciano); border-color: var(--ciano); color: #04122e; font-weight: 700; }

/* passos do teste */
.passos-teste{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.passos-teste div{ background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 1.2rem; color: rgba(255,255,255,.75); }
.passos-teste b{ display: block; font-family: "Karla", sans-serif; font-size: 2rem; color: var(--ciano); line-height: 1; margin-bottom: .6rem; }
.passos-teste strong{ display: block; color: #fff; margin-bottom: .3rem; }
@media (max-width: 991px){ .passos-teste{ grid-template-columns: 1fr 1fr; } }
.botoes-teste{ display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ---------- páginas internas (pedir acesso, baixar, opinião) ---------- */
body.pagina-interna{ background: #f6f8fc; color: #333; }
.topo-interno{ background: linear-gradient(160deg, #0d2257, #071433); padding: 14px 0; }
.topo-interno-linha{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topo-interno .marca{ color: #fff; text-decoration: none; font-family: "Karla", sans-serif; }
.topo-interno .marca b{ color: var(--ciano); }
.topo-interno-links{ display: flex; gap: 1.4rem; flex-wrap: wrap; }
.topo-interno-links a{ color: rgba(255,255,255,.8); font-weight: 700; font-size: .92rem; }
.topo-interno-links a:hover{ color: var(--ciano); text-decoration: none; }
.conteudo-interno{ min-height: 70vh; }
.pagina-simples{ padding: 70px 0 90px; }
.pagina-simples h1{ font-size: 3rem; margin-bottom: 1.2rem; }
.pagina-simples mark{ background: linear-gradient(transparent 58%, var(--ciano) 58%, var(--ciano) 92%, transparent 92%); padding: 0; color: inherit; }
.lead-interno{ font-size: 1.12rem; line-height: 1.7; color: #444; }
.nota-interna{ color: #666; }
.rotulo{ font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #3d7bff; }
.lista-passos{ list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .8rem; }
.lista-passos li{ display: flex; gap: .8rem; align-items: center; font-weight: 600; }
.lista-passos span{ flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #0b1d4a; color: var(--ciano); font-weight: 800; }
.cartao-interno{ background: #fff; border-radius: 18px; padding: 2rem; box-shadow: 0 24px 60px -30px rgba(11,29,74,.35); border: 1px solid #e6eaf3; }
.cartao-ok{ text-align: center; }
.cartao-ok > ion-icon{ font-size: 3.4rem; color: #19b37a; }
.cartao-ok h2{ margin: .6rem 0 .8rem; }
.form-interno{ display: grid; gap: 1rem; }
.form-interno label{ display: grid; gap: .35rem; font-weight: 700; font-size: .9rem; color: #2b2f3a; margin: 0; }
.form-interno input:not([type=checkbox]):not([type=radio]), .form-interno textarea, .form-interno select{
  width: 100%; font: inherit; font-weight: 400; padding: .7rem .85rem; border: 1px solid #d4dae6; border-radius: 10px; background: #fbfcfe; color: #222; }
.form-interno input:focus, .form-interno textarea:focus, .form-interno select:focus{ outline: none; border-color: #3d7bff; box-shadow: 0 0 0 3px rgba(61,123,255,.15); }
.form-interno .marcar{ display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
.form-interno .marcar input{ margin-top: .3rem; }
.grade-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 575px){ .grade-2{ grid-template-columns: 1fr; } .pagina-simples h1{ font-size: 2.3rem; } }
.campo-chave{ font-family: Consolas, monospace !important; font-size: .82rem !important; word-break: break-all; }
.btn-grande{ font-size: 1.05rem; padding: 1rem 2rem; margin: .4rem 0 1.4rem; }
.lista-instalar{ text-align: left; padding-left: 1.2rem; color: #444; line-height: 1.6; display: grid; gap: .5rem; }
.aviso{ padding: .8rem 1rem; border-radius: 10px; margin: 0 0 1rem; font-weight: 600; }
.aviso-erro{ background: #ffe9e7; color: #a32116; border: 1px solid #ffc9c3; }
.aviso-ok{ background: #e5f8ef; color: #12734d; border: 1px solid #bfeed8; }
.recursos-usados{ border: 1px solid #e1e6f0; border-radius: 12px; padding: .8rem 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .8rem; }
.recursos-usados legend{ font-size: .9rem; font-weight: 700; width: auto; padding: 0 .4rem; margin: 0; }
.recursos-usados .marcar{ font-size: .88rem; }
.estrelas-campo{ display: flex; align-items: center; gap: 1rem; font-weight: 700; font-size: .9rem; }
.estrelas{ display: inline-flex; flex-direction: row-reverse; }
.estrelas input{ position: absolute; opacity: 0; pointer-events: none; }
.estrelas label{ font-size: 2rem; color: #cfd5e2; cursor: pointer; padding: 0 .1rem; margin: 0; }
.estrelas label:hover, .estrelas label:hover ~ label, .estrelas input:checked ~ label{ color: #f5b301; }
.texto-legal{ max-width: 760px; }
.texto-legal h2{ font-size: 1.4rem; margin-top: 2rem; }
.rodape-interno{ background: #071433; color: rgba(255,255,255,.6); padding: 26px 0; font-size: .88rem; }
.rodape-interno p{ margin: .2rem 0; }
.rodape-interno a{ color: var(--ciano); }
.pagina-interna .btn{ background: #0b1d4a; color: #fff; border: 0; }
.pagina-interna .btn:hover{ background: var(--ciano); color: #04122e; }
.pagina-home .nav-loja{ display: flex; align-items: center; gap: .2rem; margin-right: 1.4rem; font-family: 'Karla', sans-serif; }
.pagina-home .nav-loja-link{ font-weight: 700; font-size: .95rem; padding: .4rem .7rem; border-radius: 999px; color: #343434; transition: all .25s; white-space: nowrap; }
.pagina-home .nav-loja-link:hover{ color: #000; background: var(--ciano); text-decoration: none; }
.pagina-home .nav-loja-icone{ position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #343434; }
.pagina-home .nav-loja-icone ion-icon{ font-size: 1.45rem; }
.pagina-home .nav-loja-icone:hover{ color: #000; background: rgba(0,0,0,.05); }
.pagina-home .navbar-white:not(.fixed) .nav-loja-link, .pagina-home .navbar-white:not(.fixed) .nav-loja-icone{ color: #fff; }
.pagina-home .navbar-white:not(.fixed) .nav-loja-link:hover{ color: #000; }
.pagina-home .navbar-white:not(.fixed) .nav-loja-icone:hover{ color: var(--ciano); background: rgba(255,255,255,.08); }
@media (max-width: 1199px){ .pagina-home .nav-loja{ margin-right: .7rem; } .pagina-home .nav-loja-link{ padding: .35rem .5rem; font-size: .88rem; } }