/* 
  Virtus Ads - Custom Overrides
  Autor: Vinícius Bastos (https://midias.me)
  Data: 07/03/2026 17:35
  
  Customizações sobre os assets compilados:
  - Ocultar badge "Agência de Tráfego Pago" da Hero
  - Ocultar seção de métricas (100+, R$3,5M+, R$25M+)
*/

/* Ocultar o badge "Agência de Tráfego Pago" */
.inline-flex.items-center.gap-2.px-4.py-2.border.border-white\/20.rounded-full.text-xs.tracking-widest.uppercase {
  display: none !important;
}

/* Ocultar seção de métricas (grid 3 cols) */
.grid.grid-cols-1.sm\:grid-cols-3.gap-8.pt-16.animate-fade-in-up {
  display: none !important;
}

/* Remover bloco branco do container do Google Meu Negócio */
.flex.items-center.gap-4.mb-8>.w-16.h-16.bg-white {
  background: transparent !important;
  width: 3rem !important;
  height: 3rem !important;
}

.flex.items-center.gap-4.mb-8>.w-16.h-16.bg-white img {
  width: 100% !important;
  height: 100% !important;
}

/* ============================================================
   Scroll Video (sequência de frames do notebook)
   Animação atrás da Hero -> fim da 3a seção (#services)
   ============================================================ */

/* Container fixo que fica atrás do conteúdo */
#virtus-scroll-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#virtus-scroll-video .vsv-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Scrim escuro para legibilidade do texto sobre a cena */
#virtus-scroll-video .vsv-scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.3;
  will-change: opacity;
}

/* Torna transparentes as 3 primeiras seções para a animação aparecer.
   As seções seguintes mantêm bg-black e cobrem o canvas naturalmente. */
#hero > section.bg-black,
#social-proof > section.bg-black,
#services > section.bg-black {
  background-color: transparent !important;
}

/* Garante o conteúdo acima do canvas */
#hero, #social-proof, #services {
  position: relative;
  z-index: 1;
}

/* Mantém o respiro lateral da hero */
#hero .z-10.max-w-6xl {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* ============================================================
   Box com fundo blur (glassmorphism) nos conteúdos da hero
   ============================================================ */
#hero .text-center {
  background: rgba(10, 10, 10, 0.35) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  padding: 2.5rem !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   Hero alinhada à esquerda no desktop (>= 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  #hero .text-center {
    text-align: center !important;
  }
  /* parágrafo centralizado */
  #hero .text-center > p.mx-auto,
  #hero .text-center > p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Container da hero alinhado ao restante do site (max-w-7xl, centrado) */
  #hero .z-10.max-w-6xl {
    max-width: 80rem !important;   /* = max-w-7xl das demais seções */
    width: 100% !important;        /* evita encolher no flex justify-center */
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Box ocupa 50% da largura, centralizado na hero */
  #hero .text-center {
    max-width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Fontes menores na hero */
  #hero h1 {
    font-size: 2.75rem !important;   /* ~44px (era 72px) */
    line-height: 1.1 !important;
  }
  #hero .text-center > p {
    font-size: 1rem !important;      /* ~16px (era 20px) */
  }
  #hero .text-center > p.italic,
  #hero .text-center > p.font-light {
    font-size: 1.25rem !important;   /* ~20px (era 24px) */
  }
}

/* ============================================================
   Seção "Nossos Serviços" (#services)
   Cards com box blur (glassmorphism) + 5 colunas no desktop
   ============================================================ */
#services .group.bg-black {
  background-color: rgba(10, 10, 10, 0.35) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1024px) {
  #services .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   Carrossel de marcas (#social-proof) - fonte mais clara
   ============================================================ */
#social-proof span.text-white\/50 {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Remove os degradês (fade) das bordas esquerda/direita do carrossel */
#social-proof .bg-gradient-to-r.from-black,
#social-proof .bg-gradient-to-l.from-black {
  display: none !important;
}

/* ============================================================
   Seção "Como funciona nosso acompanhamento" (#process)
   Steps em 4 colunas no desktop
   ============================================================ */
@media (min-width: 768px) {
  #process .grid.md\:grid-cols-2 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Mobile: logo centralizado no navbar + esconder menu sanduíche
   (a navegação fica na barra inferior flutuante) + fundo do topo em blur */
@media (max-width: 1023px) {
  nav #virtus-mobile-toggle { display: none !important; }
  nav .flex.items-center.justify-between.h-20 { justify-content: center !important; }
  nav.fixed {
    background-color: rgba(0, 0, 0, 0.3) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
  }
}

/* Mobile: stats (#results) e steps (#process) em 2 colunas + largura útil */
@media (max-width: 767px) {
  #results .grid.lg\:grid-cols-4,
  #process .grid.md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* mais largura para o conteúdo: reduz padding/gap e ajusta fontes grandes */
  #results .grid.lg\:grid-cols-4 { gap: 0.75rem !important; }
  #results .grid.lg\:grid-cols-4 > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  #results .grid.lg\:grid-cols-4 .font-serif.text-4xl {
    font-size: 1.7rem !important;
    line-height: 1.1 !important;
  }
  #process .grid.md\:grid-cols-2 > div { padding: 0.9rem !important; }
  #process .grid.md\:grid-cols-2 .font-serif.text-6xl { font-size: 2.25rem !important; }
}

/* ============================================================
   Equipe (#team): nome e cargo sobre a foto
   ============================================================ */
#team .group > div:last-child {
  position: relative;
}
/* nome */
#team .group > div:last-child > h3 {
  position: absolute !important;
  left: 1rem;
  right: 1rem;
  top: -5rem;
  margin: 0 !important;
  z-index: 2;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
/* cargo */
#team .group > div:last-child > p:first-of-type {
  position: absolute !important;
  left: 1rem;
  right: 1rem;
  top: -3.3rem;
  margin: 0 !important;
  z-index: 2;
  color: rgba(255, 255, 255, 0.8) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
/* ícones de contato (hover) -> topo do card, sem fundo */
#team .group [class*="bottom-4"] {
  top: 1rem !important;
  bottom: auto !important;
}
#team .group [class*="bottom-4"] a {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ============================================================
   Tema CLARO nas seções:
   #results (Especialistas em Meta/Google Ads),
   #process (Como funciona nosso acompanhamento),
   #final-cta (Se você chegou até aqui...)
   ============================================================ */

/* Fundo cinza claro + imagem de fundo das seções */
#results > section,
#process > section,
#final-cta > section {
  background-color: #ececec !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
#results > section {
  background-image: url('./images/bg-results.png') !important;
}
#process > section {
  background-image: url('./images/bg-process.png') !important;
}
#final-cta > section {
  background-image: url('./images/bg-final-cta.png') !important;
  background-position: center !important;
}

/* Texto branco -> escuro (hierarquia) */
#results [class*="text-white"],
#process [class*="text-white"],
#final-cta [class*="text-white"] { color: #1f1f1f !important; }

#results .text-white\/80, #results .text-white\/70, #results .text-white\/60,
#process .text-white\/80, #process .text-white\/70, #process .text-white\/60,
#final-cta .text-white\/80, #final-cta .text-white\/70, #final-cta .text-white\/60 {
  color: #4a4a4a !important;
}

#results .text-white\/50, #results .text-white\/40,
#process .text-white\/50, #process .text-white\/40,
#final-cta .text-white\/50, #final-cta .text-white\/40 {
  color: #6a6a6a !important;
}

/* Números/elementos decorativos muito tênues (classe exata text-white/5) */
#results .text-white\/5,
#process .text-white\/5,
#final-cta .text-white\/5 {
  color: rgba(0, 0, 0, 0.08) !important;
}

/* Bordas claras -> escuras tênues */
#results [class*="border-white"],
#process [class*="border-white"],
#final-cta [class*="border-white"] {
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Overlays/divisórias/blocos bg-white/X -> sem fundo (mostra o cinza da seção) */
#results [class*="bg-white/"],
#process [class*="bg-white/"],
#final-cta [class*="bg-white/"] {
  background-color: transparent !important;
}

/* Superfícies internas (ícones, cards, células) -> sem fundo (mostra o cinza) */
#results > section .bg-black,
#process > section .bg-black,
#final-cta > section .bg-black {
  background-color: transparent !important;
}

/* Botão primário branco -> escuro */
#results > section .bg-white,
#process > section .bg-white,
#final-cta > section .bg-white {
  background-color: #141414 !important;
}
#results .text-black,
#process .text-black,
#final-cta .text-black { color: #ffffff !important; }

/* ============================================================
   Modal de contato (lead + WhatsApp)
   ============================================================ */
.virtus-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.virtus-modal.is-open { display: flex; }
.virtus-modal-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #0d0d0f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  color: #fff;
}
.virtus-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.virtus-modal-close:hover { color: #fff; }
.virtus-modal-head { display: flex; align-items: center; gap: 0.6rem; color: #25d366; }
.virtus-modal-head h3 { font-size: 1.4rem; margin: 0; color: #fff; }
.virtus-modal-sub { color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; margin: 0.4rem 0 1.25rem; }
.virtus-modal input,
.virtus-modal textarea {
  width: 100%;
  margin: 0 0 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  padding: 0.65rem 0.8rem;
  color: #fff;
  font: inherit;
}
.virtus-modal input:focus,
.virtus-modal textarea:focus { outline: none; border-color: #25d366; }
.virtus-modal-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  background: #25d366;
  color: #07261a;
  font-weight: 700;
  border: none;
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
}
.virtus-modal-submit:hover { background: #1fb858; }
.virtus-modal-submit:disabled { opacity: 0.6; cursor: default; }
.virtus-modal-feedback { font-size: 0.85rem; min-height: 1.1rem; margin-bottom: 0.5rem; }
.virtus-modal-feedback.is-ok { color: #3dd68c; }
.virtus-modal-feedback.is-error { color: #ff6b6b; }

/* Botão flutuante WhatsApp (mobile) */
.virtus-fab {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 90;
  width: 3.5rem;
  height: 3.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
  cursor: pointer;
  animation: virtus-fab-in 0.4s ease;
}
.virtus-fab:hover { background: #1fb858; }
@keyframes virtus-fab-in { from { transform: scale(0); } to { transform: scale(1); } }
/* FAB verde só no desktop (no mobile usamos a barra inferior) */
@media (min-width: 1024px) {
  .virtus-fab { display: inline-flex; }
}
.virtus-contact-trigger svg,
.virtus-modal-submit svg,
.virtus-fab svg { flex-shrink: 0; }

/* ============================================================
   Barra flutuante inferior (mobile) — ícones + texto, fundo blur
   ============================================================ */
.virtus-bottombar { display: none; }
@media (max-width: 1023px) {
  .virtus-bottombar {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 90;
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.4rem 0.35rem;
    border-radius: 0;
    background: rgba(10, 10, 12, 0.6);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .virtus-bottombar::-webkit-scrollbar { display: none; }
  .virtus-bottombar-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.4rem 0.55rem;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .virtus-bottombar-item:hover,
  .virtus-bottombar-item:focus { color: #fff; }
  .virtus-bottombar-item svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
  .virtus-bottombar-item.is-wpp {
    color: #25d366;
    position: sticky;
    left: 0;
    background: rgba(10, 10, 12, 0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 0;
  }
  /* espaço para a barra não cobrir o rodapé */
  body { padding-bottom: 5rem; }
}

/* ============================================================
   FAQ (acordeão)
   ============================================================ */
.virtus-faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.virtus-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  padding: 1.25rem 0;
  cursor: pointer;
}
.virtus-faq-q .virtus-faq-icon { transition: transform 0.3s ease; flex-shrink: 0; }
.virtus-faq-item.is-open .virtus-faq-q .virtus-faq-icon { transform: rotate(45deg); }
.virtus-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}
.virtus-faq-a-inner { padding: 0 0 1.25rem; }