/*
 * 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;
  }
}

/* =============================================================================
 * PAGINA B — TESTE A/B — pop-up flutuante de investimento (só mobile/tablet)
 * ===========================================================================
 * Badge fixo no canto inferior direito, flutuando ACIMA da barra
 * .floating-widget (que vira full-width neste breakpoint), com o valor real
 * (R$16.800 / 12x R$1.400) — pedido do cliente (2026-08-19): o preço precisa
 * "acompanhar a página" (fixo, não um bloco que passa e some) e aparecer "na
 * cara" no celular. [ATUALIZAÇÃO 2026-08-19] Estava no canto SUPERIOR
 * direito — pedido do cliente para mover para o canto INFERIOR direito,
 * mesmo princípio do .whatsapp-floating (inferior esquerdo): os offsets de
 * `bottom` abaixo são os MESMOS já usados por .whatsapp-floating em cada
 * breakpoint (92px/100px), só que no lado direito, para o card não ficar
 * embaixo da barra .floating-widget quando ela vira full-width. Escondido em
 * telas largas (≥769px) — nelas o preço aparece no header (ver .header-preco
 * em 01-header.css) e mais abaixo, junto ao Corpo Docente, como já era.
 * ------------------------------------------------------------------------- */

.preco-popup {
  display: none;
}

@media (max-width: 768px) {
  .preco-popup {
    display: block;
    position: fixed;
    bottom: 92px;
    right: 16px;
    z-index: 950; /* abaixo do header (1000), acima do conteúdo e do .floating-widget (900) */
    width: 176px;
    background-color: var(--cor-fundo-escuro-base);
    border: 1px solid var(--cor-cta-dourado);
    border-radius: var(--card-feature-radius);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
    /* Entrada com leve atraso (a página já carregou, o header já assentou) —
       não usa o sistema de scroll-reveal [data-anim] porque este elemento é
       fixed e já está "visível" na viewport desde o primeiro frame; o que
       queremos é o efeito de pop chamando atenção, não revelar no scroll. */
    animation: preco-popup-entrada 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
  }

  .preco-popup--fechado {
    display: none;
  }

  .preco-popup__fechar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--cor-texto-branco);
    opacity: 0.7;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    z-index: 1;
  }

  .preco-popup__fechar:hover,
  .preco-popup__fechar:focus-visible {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.16);
  }

  .preco-popup__link {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 14px;
    text-decoration: none;
    color: var(--cor-texto-branco);
  }

  .preco-popup__cabecalho {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-right: 20px; /* não passar por baixo do botão de fechar */
  }

  .preco-popup__icone {
    flex: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(212, 175, 55, 0.14);
    color: var(--cor-cta-dourado);
  }

  .preco-popup__icone svg {
    width: 14px;
    height: 14px;
  }

  .preco-popup__label {
    font-size: 10.5px;
    font-weight: var(--fw-footer);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--cor-cta-dourado);
  }

  .preco-popup__valor {
    font-size: 23px;
    font-weight: var(--peso-semibold);
    line-height: 1.1;
    color: var(--cor-texto-branco);
  }

  .preco-popup__parcela {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--cor-texto-branco);
    opacity: 0.7;
  }

  .preco-popup__cta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12.5px;
    font-weight: var(--peso-medio);
    color: var(--cor-cta-dourado);
  }

  .preco-popup__cta svg {
    flex: none;
    transition: transform 0.2s ease;
  }

  .preco-popup__link:hover .preco-popup__cta svg,
  .preco-popup__link:focus-visible .preco-popup__cta svg {
    transform: translateX(2px);
  }
}

@media (max-width: 430px) {
  /* Mesmo motivo do .whatsapp-floating no mesmo breakpoint: a legenda do
     .floating-widget pode quebrar em 2 linhas aqui, aumentando a altura da
     barra — sobe mais um pouco o offset por segurança (92px → 100px). */
  .preco-popup {
    bottom: 100px;
    right: 12px;
  }
}

@media (max-width: 375px) {
  .preco-popup {
    width: 160px;
  }

  .preco-popup__valor {
    font-size: 21px;
  }
}

@keyframes preco-popup-entrada {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}