/* Raposa — correções responsivas para celular.
   Aplicam-se por cima do CSS gerado pelo Framer quando widths fixas de desktop
   escapam o viewport ou quando badges absolute sobrepõem texto. */

/* Previne scroll horizontal global em qualquer viewport. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* ---------- Hero da home — ajuste de tamanho ----------
   O novo copy "Pare de abrir 7 abas para gerenciar seus anúncios." é ~16%
   mais longo. Para garantir 2 linhas em desktop (1ª frase em uma linha, 2ª
   após o \n), aumentamos a largura do container e reduzimos o font-size
   nos breakpoints desktop/wide-tablet. */

@media (min-width: 1440px) {
  .framer-1u6gzqb-container,
  .framer-1u6gzqb-container h1,
  .framer-1u6gzqb-container h2,
  .framer-1u6gzqb-container h3 {
    max-width: 1300px !important;
    width: 1300px !important;
  }
  .framer-1u6gzqb-container h1,
  .framer-1u6gzqb-container h2,
  .framer-1u6gzqb-container h3 {
    font-size: 56px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .framer-1u6gzqb-container,
  .framer-1u6gzqb-container h1,
  .framer-1u6gzqb-container h2,
  .framer-1u6gzqb-container h3 {
    max-width: 1200px !important;
    width: 1200px !important;
  }
  .framer-1u6gzqb-container h1,
  .framer-1u6gzqb-container h2,
  .framer-1u6gzqb-container h3 {
    font-size: 52px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .framer-1u6gzqb-container,
  .framer-1u6gzqb-container h1,
  .framer-1u6gzqb-container h2,
  .framer-1u6gzqb-container h3 {
    max-width: 960px !important;
    width: 960px !important;
  }
  .framer-1u6gzqb-container h1,
  .framer-1u6gzqb-container h2,
  .framer-1u6gzqb-container h3 {
    font-size: 40px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
}
@media (min-width: 810px) and (max-width: 1023.98px) {
  .framer-1u6gzqb-container h1,
  .framer-1u6gzqb-container h2,
  .framer-1u6gzqb-container h3 {
    font-size: 38px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
}

/* ---------- Home ( / ) ---------- */

/* Hero — ilustração da raposinha (mascote).
   ESTRATÉGIA: o fox original (framer-1si10j9) é absolute dentro do Hero UI card,
   o que prende-o ao dashboard. Escondemos esse elemento e adicionamos um novo
   .raposa-hero-mascot como filho natural do container de texto (framer-o4isqv),
   depois das CTAs. Assim ele herda o gap do flex column (24px) automaticamente
   e fica "junto" do texto sem sobrepor. */

/* Esconde o fox original (absolute dentro do Hero UI card) */
.framer-KQHpZ .framer-1si10j9 {
  display: none !important;
}

/* Novo mascote, filho natural do container de texto do hero */
.framer-KQHpZ .framer-o4isqv > .raposa-hero-mascot {
  flex: none;
  width: 180px;
  height: auto;
  margin-top: 8px;
  pointer-events: none;
  user-select: none;
  line-height: 0;
}
.framer-KQHpZ .framer-o4isqv > .raposa-hero-mascot img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 810px) and (max-width: 1279.98px) {
  .framer-KQHpZ .framer-o4isqv > .raposa-hero-mascot {
    width: 150px;
  }
}
@media (max-width: 809.98px) {
  .framer-KQHpZ .framer-o4isqv > .raposa-hero-mascot {
    width: 120px;
    margin-top: 4px;
  }
}

/* Hero H1 — "trabalha" e traço laranja.
   O span interno que envolve "trabalha" e o span aria-hidden do traço laranja
   têm font-size/height com valor PX inline no HTML. Quando reduzimos o h1 em
   viewports desktop (veja queries acima), o resto do h1 encolhe mas esses
   spans ficam no tamanho original — por isso "trabalha" aparece maior que o
   resto. Aqui forçamos herança para o font-size e escalamos o traço laranja
   em em (a proporção original é ~0.8em = height / font-size). */
.framer-1u6gzqb-container h1 span,
.framer-1u6gzqb-container h1 span span {
  font-size: inherit !important;
}
.framer-1u6gzqb-container h1 span[aria-hidden="true"] {
  height: 0.8em !important;
}

/* Hero row de CTAs "Rodar auditoria" + "Testar grátis" e badge superior.
   No design original do Framer essas larguras são fixas em 400~450px;
   em <=480px isso cai fora do viewport. */
@media (max-width: 480px) {
  /* Badge "Para marcas que investem sério em mídia paga" */
  .framer-6owxfh-container,
  .framer-dFsYP,
  .framer-c8cr8 {
    max-width: calc(100vw - 32px) !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Texto dentro do badge — permite quebra e reduz fonte */
  .framer-dFsYP p,
  .framer-dFsYP .framer-text,
  .framer-6owxfh-container p,
  .framer-6owxfh-container .framer-text {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  /* Botão "Rodar auditoria gratuita" e seu container */
  .framer-kx9voc,
  .framer-1az257g-container,
  .framer-1az257g {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Botão "Testar grátis" e todos seus wrappers */
  .framer-r5ils4-container,
  .framer-r5ils4 {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Containers de ambas CTAs — força texto a caber */
  .framer-kx9voc .framer-GoepU,
  .framer-r5ils4-container .framer-GoepU,
  .framer-1az257g-container .framer-GoepU {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Linha das duas CTAs (container real = framer-kx9voc):
     empilha em coluna e força children a 100%. */
  .framer-kx9voc {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: calc(100vw - 48px) !important;
  }
  .framer-kx9voc > *,
  .framer-kbfg0u-container,
  .framer-r5ils4-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Anchors (buttons) dentro — dão largura total */
  .framer-kx9voc .framer-GoepU {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  /* Cards de métricas com badges ("Novidade!", tag "semana") que clipam */
  .framer-no1pyt,
  .framer-um8tc8,
  .framer-1ncenzp {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ---------- Contato ---------- */

@media (max-width: 480px) {
  /* Bloco "Atendimento seg-sex" + email — largura fixa 401px */
  .framer-vigbg-container,
  .framer-gnDxS,
  .framer-1nkf1du-container {
    max-width: calc(100vw - 32px) !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Flex row com fotos + texto — empilha para texto não overflow */
  .framer-gnDxS {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .framer-gnDxS > * {
    max-width: 100% !important;
    text-align: center !important;
  }
  .framer-gnDxS p, .framer-gnDxS .framer-text {
    white-space: normal !important;
    word-break: normal !important;
  }
}

/* ---------- Carreiras ---------- */

/* Hero H1 com 3 linhas de texto — garante que "Faça parte da Raposa."
   caiba em uma linha sem quebrar o período. */
@media (max-width: 480px) {
  .framer-1ko2bos h1, .framer-1ko2bos h2, .framer-1ko2bos h3,
  .framer-1tsne02 h1, .framer-1tsne02 h2, .framer-1tsne02 h3 {
    font-size: clamp(24px, 7.8vw, 38px) !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}
@media (max-width: 360px) {
  .framer-1ko2bos h1, .framer-1ko2bos h2, .framer-1ko2bos h3,
  .framer-1tsne02 h1, .framer-1tsne02 h2, .framer-1tsne02 h3 {
    font-size: 22px !important;
  }
}

/* ---------- Geral: badges absolute que sobrepõem títulos ---------- */

/* Qualquer elemento absolute com texto curto — evita sobreposição em mobile
   forçando posicionamento relativo quando viewport é pequeno. Seletores
   específicos ainda vencem, esta é só uma rede de segurança em tamanhos de
   título empilhados. */
@media (max-width: 480px) {
  /* Badges flutuantes sobre títulos (ex.: "Demonstração" ao lado do H2) */
  [data-framer-name="Tag"][style*="position: absolute"],
  [data-framer-name="Badge"][style*="position: absolute"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 8px auto !important;
    display: inline-flex !important;
  }

  /* Qualquer link/botão com classe framer-GoepU (botão estilizado Framer) */
  .framer-GoepU {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Larguras fixas inline maiores que viewport — clamp */
  [class*="framer-"][style*="width: 3"],
  [class*="framer-"][style*="width: 4"] {
    max-width: 100% !important;
  }
}

/* ---------- Blog / datas ---------- */

@media (max-width: 480px) {
  /* Datas do blog que ficam em linha com a imagem e overflow */
  [data-framer-name="Container"] time {
    word-break: keep-all !important;
    white-space: normal !important;
  }
}

/* ---------- Seção de auditoria (#auditoria-raposa) ---------- */

@media (max-width: 480px) {
  #auditoria-raposa .ra-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  #auditoria-raposa .ra-wrap {
    padding: 0 4px !important;
  }
}

/* ---------- Testemunhos / atribuição de autores ---------- */

/* Labels "Fulano + Cargo" dentro de cards de testimonial e quote blocks.
   Em mobile, forçar quebra e largura confortável. */
@media (max-width: 480px) {
  .framer-1ievy6x, .framer-1ievy6x .framer-text,
  .framer-1jusbef, .framer-1jusbef .framer-text,
  .framer-1nlyvs1, .framer-1nlyvs1 .framer-text,
  .framer-f04214, .framer-5149q8 {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* ---------- Esconder botão de editar do Framer (editor bar) ---------- */
#__framer-editorbar-button,
[id^="__framer-editorbar"],
[aria-labelledby="__framer-editorbar-label"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}