/* ==========================================================================
   SpeakPro institucional: ajustes de layout (26/10/2026)

   Carregado DEPOIS do inst.css nas três línguas (index, en, es). Tudo aqui
   vale só em tela estreita e corrige o que apareceu no teste no iPhone:

     1. dobra 1: o botão laranja ficava ACIMA do título; agora a ordem é
        título, rapaz, botão. O rapaz passa na FRENTE da barra do balão.
     2. "carregando": o rapaz do microfone encosta na faixa navy do
        "Bridge the gap", em vez de flutuar com um vão branco.
     3. a onda que atravessa: as duas metades alinhadas à esquerda e a
        corda em pé entre elas, de cima pra baixo, pra leitura ser
        "o que a pessoa quer dizer -> o que chega".
     4. "Bridge the gap" e "Let's bridge the gap" sempre numa linha só: a
        letra encolhe com a tela em vez de jogar o "gap" pra linha de baixo.
     5. o marca-texto em título que quebra linha: menos altura no bloco e
        um pouco mais de entrelinha, pra linha de baixo não cobrir a de cima.

     6. no computador, o mesmo rapaz do microfone: a foto é ancorada no PÉ
        da linha, encostando na faixa, em vez de pendurada no topo.

   Tudo aqui é sobrescrita: o inst.css continua intacto, e cada bloco diz
   em que largura vale.
   ========================================================================== */

/* ---- 1. dobra 1 ---------------------------------------------------------- */
@media (max-width: 1199px) {
  /* o botão encosta no rapaz e passa NA FRENTE dele: a base da foto fica
     um pouco atrás do botão */
  .hbal__acao { order: 3; position: relative; z-index: 4; margin: calc(-1 * clamp(26px, 6vw, 40px)) 0 0; }
  .hbal__pessoa {
    position: relative;
    z-index: 3;                         /* na frente da barra do balão (z 2) */
    width: min(100%, 380px);
    margin: clamp(6px, 2vw, 16px) auto 0;
  }
  .hbal__palco { padding-bottom: clamp(28px, 5vw, 44px); }
}

/* ---- 2. o rapaz do microfone encosta na faixa navy ----------------------- */
@media (max-width: 899px) {
  .iponte__miolo--topo { padding-bottom: 0; }
  .iabre { margin-bottom: 0; gap: clamp(14px, 3vw, 24px); }
  .iabre__foto { position: relative; z-index: 1; }
  .iabre__foto img { max-height: 330px; margin-bottom: -4px; }   /* o pé entra na faixa, que cobre ele */
}

/* ---- 6. computador: o rapaz do microfone encosta na faixa ---------------- */
@media (min-width: 900px) {
  .iabre { margin-bottom: 0; }
  .iabre__foto { display: block; align-self: end; height: auto; }
  .iabre__foto img { display: block; margin: 0 0 -8px auto; max-height: none; }   /* 8 px entram na faixa, que cobre o pé */
}

/* ---- 3. a onda que atravessa, em pé -------------------------------------- */
@media (max-width: 759px) {
  .opon { gap: 6px; }
  .opon__lado, .opon__lado--b { text-align: left; }
  .opon__onda, .opon__lado--b .opon__onda { justify-content: flex-start; max-width: 320px; }
  .opon__vao { width: 44px; height: 64px; margin: 0 0 0 6px; }
  /* a corda continua sendo desenhada na horizontal pelo JS; aqui ela só
     gira: a travessia que ia da esquerda pra direita passa a descer */
  .opon__corda { width: 64px; max-width: none; height: 44px; transform: translate(-10px, 10px) rotate(90deg); transform-origin: center; }
  .opon__leg { margin-top: 8px; }
}

/* ---- 4. Bridge the gap numa linha só ------------------------------------- */
@media (max-width: 520px) {
  .bgap { white-space: nowrap; font-size: clamp(1.4rem, 8vw, 2.1rem); }
  .bgap__medida { font-size: .26em; }
}
@media (max-width: 760px) {
  .bgap--cta { white-space: nowrap; font-size: clamp(1.1rem, 6.8vw, 1.875rem); --vao: clamp(1.2em, 4vw, 3.4em); }
}

/* ---- 5. marca-texto em título que quebra linha --------------------------- */
@media (max-width: 760px) {
  .hb__bt { line-height: 1.18; }
  .hb__bt .mark { padding-top: .05em; padding-bottom: .07em; }
}

/* foto do "Programa contínuo 360º" no celular: a faixa é baixa e larga, e
   com o enquadramento do topo só aparecia a parede. Desce o foco pra
   mostrar as cabeças das três pessoas inteiras. */
@media (max-width: 559px) {
  .fcard__foto--headset { --enqv: 22%; }
}

/* as faixas que passam (perfis e logos) no Safari: sem o esfumado das
   pontas, e quem move é o assets/js/faixas-safari.js. No Chrome, no Firefox
   e no Android continua como era. */
@supports (-webkit-touch-callout: none) or (hanging-punctuation: first) {
  .marquee,
  .icli--roda .icli__trilho {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* títulos com quebra de linha forçada (ex.: "Acompanhamento contínuo / ou
   quick win"): a caixa azul da segunda linha não encosta na primeira */
.hb__bt:has(br),
.inst-claro .iform__head .hb__bt:has(br) { line-height: 1.3; }
.hb__bt:has(br) .mark { padding-top: .05em; padding-bottom: .07em; }

/* ==========================================================================
   O convite pro Potential Check (fim da dobra "O treino acontece..."):
   a pergunta em duas linhas, mais respiro, e o botão com um brilho que
   pulsa devagar e a seta que dá um empurrãozinho, pra chamar o clique.
   ========================================================================== */
.iponte__txt .iponte__tres-bloco p.iponte__convite { margin-top: clamp(40px, 5vw, 64px); }
.iponte__cta { margin-top: clamp(22px, 2.6vw, 32px); position: relative; animation: cta-brilho 2.4s ease-in-out infinite; }
.iponte__cta .hbal__seta { display: inline-block; animation: cta-seta 2.4s ease-in-out infinite; }
.iponte__cta:hover { animation: none; }
.iponte__cta:hover .hbal__seta { animation: none; }
@keyframes cta-brilho {
  0%, 100% { box-shadow: 0 0 0 0 rgba(75, 75, 255, .45); }
  60% { box-shadow: 0 0 0 16px rgba(75, 75, 255, 0); }
}
@keyframes cta-seta {
  0%, 55%, 100% { transform: translateX(0); }
  70% { transform: translateX(6px); }
  85% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .iponte__cta, .iponte__cta .hbal__seta { animation: none; }
}