/* Plenum — responsividade global */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  max-width: 100vw;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* SVGs: só limitar largura. height:auto quebra ícones e diagramas com width/height fixos */
svg {
  max-width: 100%;
}

/* Faixa de logos de clientes: mantém altura controlada */
img[src^="/logos/"],
.flex.w-max.items-center img {
  width: auto !important;
  max-width: min(140px, 38vw) !important;
  height: 26px !important;
  max-height: 26px !important;
  object-fit: contain !important;
}

.flex.w-max.items-center > div {
  margin-right: 1.75rem !important;
}

@media (min-width: 640px) {
  img[src^="/logos/"],
  .flex.w-max.items-center img {
    max-width: 200px !important;
    height: 36px !important;
    max-height: 36px !important;
  }

  .flex.w-max.items-center > div {
    margin-right: 3.5rem !important;
  }
}

@media (min-width: 1024px) {
  img[src^="/logos/"],
  .flex.w-max.items-center img {
    max-width: 240px !important;
    height: 40px !important;
    max-height: 40px !important;
  }

  .flex.w-max.items-center > div {
    margin-right: 5rem !important;
  }
}

/* Header mais compacto no mobile */
@media (max-width: 1023px) {
  header.mx-auto,
  header.site-header {
    gap: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    flex-wrap: nowrap !important;
  }

  header img[src="/logo-wordmark.svg"],
  header img[alt="Plenum"] {
    width: 96px !important;
    max-width: 96px !important;
    height: auto !important;
    max-height: 22px !important;
  }

  header img[src="/logo-mark.svg"] {
    width: 26px !important;
    max-width: 26px !important;
    height: auto !important;
    max-height: 23px !important;
  }

  header a.rounded-full {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  /* Esconde "Entrar" para caber logo + menu + CTA principal */
  header > div.flex > a:first-child {
    display: none !important;
  }

  header a.rounded-full {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }
}

/* Menu superior fixo ao rolar */
.site-header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}

.site-header-bar.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(16, 16, 16, 0.08);
  box-shadow: 0 10px 30px -18px rgba(20, 15, 12, 0.28);
}

.site-header-bar .site-header,
.site-header-bar header.site-header {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  transition: padding 0.25s ease;
}

/* Logo menor ao rolar */
.site-header-bar header img[src="/logo-mark.svg"],
.site-header-bar header img[src="/logo-wordmark.svg"],
.site-header-bar header img[alt="Plenum"] {
  transition: width 0.25s ease, max-width 0.25s ease, max-height 0.25s ease, height 0.25s ease;
}

.site-header-bar.is-scrolled header {
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
}

.site-header-bar.is-scrolled header img[src="/logo-mark.svg"] {
  width: 28px !important;
  max-width: 28px !important;
  max-height: 25px !important;
  height: auto !important;
}

.site-header-bar.is-scrolled header img[src="/logo-wordmark.svg"],
.site-header-bar.is-scrolled header img[alt="Plenum"] {
  width: 100px !important;
  max-width: 100px !important;
  max-height: 22px !important;
  height: auto !important;
}

@media (max-width: 1023px) {
  .site-header-bar.is-scrolled header img[src="/logo-mark.svg"] {
    width: 22px !important;
    max-width: 22px !important;
    max-height: 20px !important;
  }

  .site-header-bar.is-scrolled header img[src="/logo-wordmark.svg"],
  .site-header-bar.is-scrolled header img[alt="Plenum"] {
    width: 84px !important;
    max-width: 84px !important;
    max-height: 18px !important;
  }
}

.site-header-spacer {
  width: 100%;
  flex: none;
}

/* Funil / CRM reel: scroll horizontal suave (desktop/tablet) */
.no-scrollbar {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.rl-vp {
  max-width: 100%;
}

/* Menu mobile */
.mobile-nav-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(16, 16, 16, 0.12);
  background: #fff;
  color: #101010;
  flex-shrink: 0;
  cursor: pointer;
}

.mobile-nav-btn svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 1023px) {
  .mobile-nav-btn {
    display: inline-flex;
  }
}

.mobile-nav-panel {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 60;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0.75rem 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(16, 16, 16, 0.08);
  box-shadow: 0 18px 40px -24px rgba(20, 15, 12, 0.35);
}

.mobile-nav-panel.is-open {
  display: block;
}

.mobile-nav-panel nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mobile-nav-panel a {
  display: block;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  color: #101010;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus-visible {
  background: #f3eeff;
  color: #743cec;
}

/* Espaçamento mais compacto no mobile */
@media (max-width: 1023px) {
  .hero-orbit {
    display: none !important;
  }

  section.dot-grid.relative.flex.min-h-dvh {
    min-height: auto !important;
    padding-bottom: 1.25rem !important;
  }

  /* Menos padding vertical nas seções */
  section.px-5.py-16,
  section.py-16,
  section[class*="py-16"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  section[class*="pt-16"],
  section[class*="pt-12"] {
    padding-top: 2.25rem !important;
  }

  section[class*="pb-16"],
  section[class*="pb-12"],
  section[class*="pb-8"] {
    padding-bottom: 2.25rem !important;
  }

  #tools {
    padding-top: 2rem !important;
    padding-bottom: 1.75rem !important;
  }

  #tools .grid {
    gap: 1.5rem !important;
  }

  /*
    O diagrama usa transform:scale, que não reduz o espaço no layout.
    Recuperamos a altura “fantasma” com margem negativa.
  */
  #tools .relative.h-\[408px\] {
    transform-origin: center top !important;
    margin-bottom: -150px !important;
  }

  #ads-loop,
  #ia {
    padding-top: 1.75rem !important;
    padding-bottom: 2rem !important;
  }

  #reviews {
    padding-top: 2.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  #cta {
    padding-bottom: 2.25rem !important;
  }

  footer.flex.justify-center {
    padding-top: 2.5rem !important;
    padding-bottom: 1.75rem !important;
  }

  /* Funil CRM: escala para caber na tela (sem scroll horizontal) */
  .no-scrollbar.relative.overflow-x-auto {
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto;
  }

  .relative.min-w-\[900px\],
  .relative.min-w-\[900px\].lg\:min-w-0,
  div.min-w-\[900px\] {
    min-width: 0 !important;
    width: 100% !important;
  }

  .rl-vp {
    width: 100% !important;
    max-width: 100% !important;
    /* NÃO forçar height — o JS calcula com scale */
  }

  .rl-stage {
    transform-origin: top left !important;
  }

  .rl-app {
    border-radius: 12px !important;
    box-shadow: 0 18px 40px -28px rgba(20, 15, 12, 0.45) !important;
  }

  /* Menos espaço após o carrossel de logos */
  .dot-grid.px-5.pb-4.pt-2,
  div.dot-grid.px-5 {
    padding-top: 0.35rem !important;
    padding-bottom: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  #tools .relative.h-\[408px\] {
    margin-bottom: -175px !important;
  }

  section[class*="py-16"],
  section.px-5.py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Preview do CRM um pouco mais “respirável” no celular estreito */
  section .rl-vp {
    margin-inline: 0;
  }
}

@media (max-width: 640px) {
  h1,
  h2 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Títulos que forçam nowrap no desktop */
  .md\:whitespace-nowrap,
  [class*="md:whitespace-nowrap"] {
    white-space: normal !important;
  }

  /* Botões de CTA em coluna em telas muito estreitas */
  .mt-9.flex.flex-wrap,
  .mt-10.flex.flex-wrap,
  .mt-12.flex.flex-wrap {
    flex-direction: column;
    align-items: stretch !important;
  }

  .mt-9.flex.flex-wrap > a,
  .mt-10.flex.flex-wrap > a,
  .mt-12.flex.flex-wrap > a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Menos margem acima de títulos de seção */
  section h2.mt-6,
  .mt-6.max-w-\[760px\],
  header.mx-auto .mt-6 {
    margin-top: 1rem !important;
  }

  section .mt-12,
  section .mt-14,
  .mt-12.lg\:mt-16 {
    margin-top: 1.5rem !important;
  }
}

/* Cards e grids genéricos */
@media (max-width: 640px) {
  .rounded-\[28px\],
  .rounded-3xl {
    border-radius: 1.25rem !important;
  }

  footer .grid.grid-cols-2 {
    gap: 1.75rem !important;
  }

  /* Formulário de contato */
  #form {
    padding: 1.25rem !important;
  }

  aside.flex.flex-col.rounded-2xl {
    padding: 1.25rem !important;
  }
}

/* Evita texto cortado em badges/pills */
@media (max-width: 640px) {
  .inline-flex.items-center.gap-2.rounded-full {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Tabs "Origem / Anúncio / Desempenho": cabem no mobile */
@media (max-width: 767px) {
  /* Flex + overflow-hidden cortava o scroll: libera encolhimento */
  section.flex.flex-col.items-center.overflow-hidden > .mx-auto.w-full {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .no-scrollbar.mt-10.flex.justify-start.overflow-x-auto,
  .no-scrollbar.mt-10.flex.overflow-x-auto {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  [role="tablist"].inline-flex,
  [role="tablist"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0.25rem !important;
    border-radius: 1rem !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  [role="tablist"] [role="tab"],
  [role="tablist"] button {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}

@media (min-width: 768px) {
  [role="tablist"],
  .flex.items-center.gap-1.rounded-full {
    max-width: 100%;
  }
}

/* Depoimentos / carrossel */
@media (max-width: 640px) {
  [aria-label="Depoimentos de clientes"] img,
  [aria-label*="Depoimento"] img {
    width: 100% !important;
    height: auto !important;
    max-height: 280px;
    object-fit: cover;
  }
}

/* CTA final */
@media (max-width: 640px) {
  #cta,
  section#cta > div,
  [id="cta"] > div {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    border-radius: 1.35rem !important;
  }
}

/* Tablet: equilibra paddings */
@media (min-width: 641px) and (max-width: 1023px) {
  header.mx-auto {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}


/* Integrações: diagrama de conexões */
svg.h-\[90px\],
svg.mt-4.h-\[90px\] {
  height: 90px !important;
  width: 100% !important;
  max-width: 100%;
  display: block;
  flex-shrink: 0;
}

/* Ícones da grade de integrações mantêm tamanho intrínseco */
.grid.grid-cols-3 svg,
.grid.sm\:grid-cols-5 svg,
.sm\:grid-cols-5 svg {
  width: auto;
  height: auto;
  max-width: none;
  flex-shrink: 0;
}


/* Card Grow Business (Sobre) */
section .max-w-\[980px\].overflow-hidden.rounded-3xl.px-8.py-12 {
  background: #743CEC !important;
}