/*
 * 15-widget-flutuante.css
 * Seção: Widget flutuante de conversão (CTA + legenda), position: fixed
 * Fonte: docs/recon-conteudo-estrutura.md, docs/recon-visual-tokens.md
 *        (--widget-width, --widget-height, --widget-radius, --widget-bg)
 *
 * Ver comentários AMBÍGUO em sections/15-widget-flutuante.html sobre a decisão de
 * usar um sub-painel escuro interno para o texto permanecer legível
 * sobre o container branco externo.
 *
 * REBRAND: barra de progresso removida (sem métrica real de "ingressos vendidos" —
 * ver docs/copy-notas-15-widget-flutuante.md). Sem a barra, o painel interno (.info)
 * caiu de 2 linhas (barra + texto) para 1 (só a legenda). O token global --widget-height
 * (75px, fora do escopo deste agente — não editado) foi pensado para o conteúdo antigo de
 * 2 linhas; com 1 linha, o botão CTA (43px) + padding (16px) definem a altura real (~59px).
 * Troquei `height: var(--widget-height)` fixo por `height: auto` + `min-height: 59px` local
 * (não deriva de token) para o widget encolher ao conteúdo em vez de sobrar espaço morto.
 *
 * CORREÇÃO QA (rodada de correções pós-QA):
 * 1) `.floating-widget__caption` cortava em ellipsis em 430px/375px porque a caixa da
 *    legenda ficou estreita demais para a frase completa — troquei nowrap+ellipsis por
 *    quebra normal (2 linhas) nesses breakpoints. Ver bloco `.floating-widget__caption`
 *    dentro de `@media (max-width: 430px)` (o ajuste é herdado por 375px por cascata —
 *    ver nota lá).
 * 2) Widget fixo sobrepunha o copyright do rodapé perto do fim da página (1024/430/375px)
 *    e a faixa de credenciais do hero em 1440px (ver nota "SOBREPOSIÇÃO COM HERO" abaixo).
 *    Resolvido via `.floating-widget--hidden` (opacity/pointer-events), alternada por um
 *    IntersectionObserver em `script.js` (função `initFloatingWidgetOverlapGuard`) que
 *    observa tanto o `<footer>` quanto `.hero-credenciais`.
 *
 * SOBREPOSIÇÃO COM HERO (investigação, item 3 do QA): a faixa de credenciais do hero
 * (`.hero-credenciais`, em sections/02-hero.html/.css) NÃO é fixed/sticky — está em fluxo
 * normal, colada ao rodapé da seção .hero (ver `.hero { padding-bottom: 0 }` em
 * 02-hero.css). Ajustar z-index não resolveria nada aqui: os dois elementos vivem em
 * stacking contexts independentes (.floating-widget é `position: fixed`, a faixa é
 * `position: relative` dentro do fluxo do documento) — trocar a ordem de z-index só
 * decidiria QUEM fica por cima, não eliminaria a sobreposição espacial. A causa raiz real
 * é que, em 1440px, a altura do hero (título grande + vídeo 614×480 + paddings) faz a
 * faixa de credenciais cair perto do fim da viewport inicial em alturas de tela comuns
 * (ex.: 1440×900) — exatamente a região onde o widget fixo (bottom/right 24px) sempre
 * fica. Como isso depende da ALTURA da viewport (não da largura), não é algo que uma
 * media query max-width resolveria de forma confiável — por isso a correção é a mesma
 * lógica de ocultação por IntersectionObserver usada para o rodapé: o widget fica oculto
 * enquanto `.hero-credenciais` estiver visível na tela (ou seja, só aparece depois que o
 * usuário rola além do hero), e reaparece ao rolar de volta para cima antes do hero.
 *
 * NOVO (2026-08-11): `.whatsapp-floating` — segundo popup flutuante, pedido adicional do
 * cliente, DISTINTO do `.floating-widget` acima (widget de aplicação). Propósito único:
 * levar o lead direto para o WhatsApp comercial. Fica no canto OPOSTO da tela
 * (inferior esquerdo, `.floating-widget` é inferior direito) para nunca sobrepor o widget
 * de aplicação, com z-index 890 (< 900) para não competir visualmente com ele. Reaproveita
 * a mesma receita de hover do `.floating-widget__cta` (clarear + translateY) para manter
 * consistência visual com o resto do site, e o mesmo `data-anim="fade-up"` (reveal via
 * `initScrollReveal` em script.js — função genérica, não precisou de JS novo).
 *
 * Sem IntersectionObserver aqui: o cliente pediu para só resolver overlap com ajuste de
 * `bottom` caso ele sobreponha o rodapé/o outro widget visualmente, em vez de replicar a
 * lógica JS complexa do overlap-guard. O único overlap real identificado foi com o próprio
 * `.floating-widget` no breakpoint 768px (onde ele vira uma barra full-width, `left/right:
 * 16px`) — resolvido subindo o `bottom` do `.whatsapp-floating` nesse breakpoint (e nos
 * menores) o suficiente para ficar acima da barra, em vez de ao lado dela.
 */

.floating-widget {
  position: fixed;
  right: 24px; /* estimado — offset exato não extraído no recon */
  bottom: 24px; /* estimado */
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  width: var(--widget-width);
  max-width: calc(100vw - 24px);
  height: auto;
  min-height: 59px; /* botão CTA (43px) + padding vertical (8px x2) — ver nota REBRAND acima */
  padding: 8px;
  background-color: var(--widget-bg);
  border-radius: var(--widget-radius);
  /* recon: "sem box-shadow detectável no computed style" — propositalmente sem shadow */
  transition: opacity 0.3s ease; /* ver .floating-widget--hidden + script.js */
}

/* --- Ocultação perto do rodapé / da faixa de credenciais do hero (correção QA) ---
   `!important` aqui é DELIBERADO (1º uso no projeto, ver docs/CONVENCOES.md se algo
   disser o contrário) — não é um atalho de preguiça, é a única forma correta de resolver
   este conflito específico:

   O widget também tem data-anim="fade-up" (reveal de entrada via GSAP/ScrollTrigger, ver
   initScrollReveal em script.js). O GSAP escreve `style.opacity` diretamente como inline
   style no elemento, e o dispara de forma ASSÍNCRONA — só quando o ScrollTrigger cruza o
   ponto de gatilho durante o scroll, o que pode acontecer bem DEPOIS da nossa
   IntersectionObserver já ter marcado o widget como oculto. Testado na prática: sem
   `!important`, a animação de entrada do GSAP sobrescreve `style.opacity` de volta para 1
   enquanto o widget deveria continuar oculto (a classe fica presente, mas o valor
   computado de opacity volta a 1 — bug confirmado em QA visual com agent-browser).
   Como inline style SEMPRE vence uma regra de stylesheet sem `!important` (independente
   de especificidade), e não há como prever/interceptar o timing exato do GSAP, a única
   forma robusta de garantir que "oculto" sempre vença é usando `!important` aqui. Por
   isso script.js (initFloatingWidgetOverlapGuard) só alterna esta classe — nunca escreve
   `style.opacity` diretamente. */
.floating-widget--hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- Botão CTA "Solicitar minha aplicação" --- */

.floating-widget__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  height: var(--botao-height-sm);
  padding: var(--botao-padding);
  border-radius: var(--botao-radius-sm);
  background-color: var(--cor-cta-dourado);
  color: var(--cor-cta-dourado-texto);
  font-size: var(--fs-botao);
  font-weight: var(--fw-botao);
  line-height: var(--lh-botao);
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.floating-widget__cta:hover {
  background-color: var(--cor-cta-dourado-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
}

.floating-widget__cta:focus-visible {
  outline: 2px solid var(--cor-fundo-claro);
  outline-offset: 3px;
}

.floating-widget__cta-icon {
  flex-shrink: 0;
}

/* --- Painel de legenda (fundo escuro, ver nota AMBÍGUO) ---
   Antes continha barra de progresso + texto (2 linhas); agora só a legenda estática
   "Vagas limitadas · Processo por aplicação" (1 linha) — ver nota REBRAND no topo do arquivo. */

.floating-widget__info {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  padding: 10px 16px;
  border-radius: calc(var(--widget-radius) - 8px);
  background-color: var(--cor-fundo-preto-puro);
}

.floating-widget__caption {
  font-size: 13px; /* estimado — não catalogado separadamente no recon visual */
  font-weight: var(--peso-regular);
  color: var(--cor-texto-branco);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
 * Popup flutuante "Falar com o time" — WhatsApp (novo, ver nota
 * "NOVO (2026-08-11)" no topo do arquivo). Botão circular compacto, mesmo
 * fundo/hover dourado padronizado dos outros CTAs do site.
 * ============================================================ */

.whatsapp-floating {
  position: fixed;
  left: 24px; /* lado oposto ao .floating-widget (right: 24px) — evita sobreposição */
  bottom: 24px;
  z-index: 890; /* levemente menor que .floating-widget (900) — não compete visualmente */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--cor-cta-dourado);
  color: var(--cor-cta-dourado-texto);
  box-shadow: 0 6px 16px rgba(15, 34, 29, 0.28);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Mesma receita de hover já usada em .floating-widget__cta (clarear + subir),
   reaproveitada aqui para consistência visual entre os dois popups flutuantes. */
.whatsapp-floating:hover {
  background-color: var(--cor-cta-dourado-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.35);
}

.whatsapp-floating:focus-visible {
  outline: 2px solid var(--cor-fundo-claro);
  outline-offset: 3px;
}

.whatsapp-floating__icon {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * RESPONSIVO — em mobile o widget ocupa proporcionalmente mais espaço da tela
 * (comportamento confirmado em docs/recon-conteudo-estrutura.md, item 2 das
 * Observações Gerais)
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .floating-widget {
    width: min(var(--widget-width), 90vw);
  }
}

@media (max-width: 768px) {
  .floating-widget {
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    max-width: none;
  }

  /* .floating-widget passa a ser uma barra full-width (left/right: 16px) neste
     breakpoint — .whatsapp-floating sairia por baixo dela se mantivesse
     bottom: 24px. Sobe o offset para ficar acima da barra em vez de colidir
     (altura estimada da barra ~59px + respiro ~16px). */
  .whatsapp-floating {
    left: 16px;
    bottom: 92px;
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 430px) {
  .floating-widget {
    right: 12px;
    bottom: 12px;
    left: 12px;
    height: auto;
    padding: 6px;
    gap: 8px;
  }

  /* Legenda do .floating-widget pode quebrar em 2 linhas aqui (ver regra
     .floating-widget__caption abaixo), aumentando a altura da barra — sobe
     mais um pouco o offset do .whatsapp-floating por segurança. */
  .whatsapp-floating {
    left: 12px;
    bottom: 100px;
    width: 48px;
    height: 48px;
  }

  .floating-widget__cta {
    padding: 10px 12px 10px 16px;
    font-size: 13px;
  }

  .floating-widget__info {
    padding: 8px 12px;
  }

  /* CORREÇÃO QA: a legenda completa ("Vagas limitadas · Processo por aplicação") não
     cabe em 1 linha na largura estreita do painel `.info` em 430px, e o nowrap+ellipsis
     da regra base cortava o texto (ex.: "...Processo p..."). Em vez de cortar, deixamos
     quebrar em 2 linhas — a altura do widget já é `height: auto` (ver nota REBRAND no
     topo do arquivo), então o painel/widget crescem para acomodar a 2ª linha sem clipar
     nada. Essa regra também vale para 375px por cascata (a media query abaixo só ajusta
     o font-size, sem reintroduzir nowrap/ellipsis). */
  .floating-widget__caption {
    font-size: 11px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.35;
  }
}

@media (max-width: 375px) {
  .floating-widget {
    padding: 5px;
    gap: 6px;
  }

  .floating-widget__cta {
    height: 38px;
    padding: 8px 10px 8px 14px;
  }

  .floating-widget__caption {
    font-size: 10px;
    /* white-space/overflow/text-overflow herdados da regra em @media (max-width: 430px)
       acima (375px também casa com max-width: 430px) — não repetir aqui. */
  }

  /* .whatsapp-floating: left/bottom/tamanho herdados da regra em
     @media (max-width: 430px) acima (375px também casa com aquela query) —
     só um ajuste fino de tamanho para telas bem estreitas. */
  .whatsapp-floating {
    width: 44px;
    height: 44px;
  }
}