/* ==========================================================================
   SpeakPro para empresas

   Mesma linguagem visual da página de vendas: fundo navy, dobras claras
   alternadas, laranja só no que leva ao contato, azul elétrico nas marcas.
   Aqui ficam só os blocos que não existem na página de vendas.
   ========================================================================== */

/* ---- capa ---------------------------------------------------------------- */

.ih {
  position: relative;
  padding-top: clamp(34px, 5vw, 70px);
  background:
    radial-gradient(68% 70% at 12% 0%, #33338a 0%, rgba(51, 51, 138, 0) 60%),
    radial-gradient(70% 70% at 100% 16%, rgba(100, 0, 175, .36) 0%, rgba(100, 0, 175, 0) 62%),
    var(--navy);
  color: #c0c0e2;
  overflow: hidden;
}

.ih__inner {
  padding-bottom: clamp(30px, 4.4vw, 52px);
  text-align: center;
}

.ih__titulo {
  margin: 10px auto 0;
  max-width: 20ch;
  color: var(--white);
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.ih__titulo b { font-weight: 800; color: var(--white); }

.ih__linha {
  margin: clamp(16px, 2.4vw, 24px) auto 0;
  max-width: 56ch;
  font-size: clamp(1rem, .95rem + .4vw, 1.1875rem);
  line-height: 1.6;
}
.ih__linha b { color: var(--white); font-weight: 700; }

.ih__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 3.4vw, 36px);
}

.ih__btn { padding: 16px 32px; font-size: var(--t-sm); }

.ih__btn2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 255, 255, .3);
  color: #e4e4ff;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.ih__btn2:hover,
.ih__btn2:focus-visible {
  color: var(--white);
  border-color: var(--electric);
  background: rgba(75, 75, 255, .16);
}
.ih__btn2-ico { display: grid; place-items: center; width: 18px; height: 18px; }
.ih__btn2-ico svg { width: 18px; height: 18px; }

.ih__selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: clamp(24px, 3.4vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-xs);
  color: #a8a8d2;
}
.ih__selos li { display: inline-flex; align-items: baseline; gap: 6px; }
.ih__selos b { color: var(--white); font-weight: 800; }

.ih__quebra { display: none; }
@media (min-width: 760px) { .ih__quebra { display: inline; } }

/* ---- a frase ------------------------------------------------------------- */

.ifrase {
  padding-block: clamp(44px, 6vw, 86px);
  background: #f4f4fb;
  text-align: center;
}
.ifrase__txt {
  margin: 0 auto;
  max-width: 24ch;
  color: var(--navy);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
}
.ifrase__sub {
  margin: 16px auto 0;
  max-width: 56ch;
  color: var(--grey-1);
  font-size: var(--t-base);
  line-height: 1.6;
}

/* ---- o problema ---------------------------------------------------------- */

.iprob {
  padding-block: clamp(46px, 6.4vw, 92px);
  background:
    radial-gradient(60% 60% at 90% 0%, rgba(100, 0, 175, .28) 0%, rgba(100, 0, 175, 0) 60%),
    var(--navy);
  color: #c0c0e2;
}

.iprob__head { text-align: center; margin-bottom: clamp(26px, 3.4vw, 42px); }

.iprob__lista {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) { .iprob__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.iprob__card {
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.iprob__card:hover {
  transform: translateY(-3px);
  border-color: var(--electric);
  background: rgba(75, 75, 255, .12);
}
.iprob__card h3 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.015em;
}
.iprob__card p { margin: 0; font-size: var(--t-sm); line-height: 1.6; }

/* ---- o método ------------------------------------------------------------ */

.imet {
  padding-block: clamp(46px, 6.4vw, 92px);
  background: #f4f4fb;
  color: var(--grey-1);
}
.imet__head { text-align: center; margin-bottom: clamp(26px, 3.6vw, 44px); }
.imet__head .hb__bt {
  font-size: clamp(1rem, .9rem + .55vw, 1.3125rem);
  line-height: 1.45;
}

/* O MARCA-TEXTO ARREDONDADO
   Vale pra página inteira, pros onze da marcação não ficarem metade com
   canto vivo e metade sem. O box-decoration-break clona o raio em cada
   linha quando a frase quebra em duas. */
.mark {
  padding: .14em .4em;
  border-radius: .35em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* o chapéu da dobra usa o bloco de código da 01: o flex dele alinharia a
   linha inteira, então aqui ele volta a ser um bloco de texto normal */
.imet__head .chapeu-code { display: inline-flex; margin-bottom: clamp(14px, 1.8vw, 22px); }
.imet .hb__bt { color: var(--navy); }
.imet .hb__chapeu { color: var(--royal); }
.imet__linha {
  margin: 14px auto 0;
  max-width: 58ch;
  font-size: var(--t-base);
  line-height: 1.6;
}

/* A SEGUNDA METADE DA DOBRA
   "Como nós trabalhamos" e "Quem treina o seu time" viraram uma dobra só.
   O sub-chapéu não leva número: o número é da dobra inteira, não da metade.
   A linha em cima é a emenda entre os dois movimentos. */
.imet__sub {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  color: var(--grey-2);
}
/* a emenda entre as duas metades da dobra passou pro corpo: o cabeçalho
   da segunda metade não existe mais */
.imet .iequipe__corpo {
  margin-top: clamp(44px, 5.6vw, 76px);
  padding-top: clamp(40px, 5vw, 68px);
  border-top: 1px solid rgba(35, 35, 80, .12);
}
/* mesma divisão e mesmo gap do bloco de cima: aí a régua dos pilares cai
   exatamente na borda esquerda da caixa "Nós treinamos" */
@media (min-width: 900px) {
  .imet .iequipe__corpo {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(14px, 2vw, 22px);
  }
}
.imet .iequipe__foto + * { margin-top: 10px; }
/* a foto estava longe demais. A moldura tem proporção fixa e corta; a
   imagem entra em cover com um zoom por cima, ancorada no rosto. O corte
   mora na moldura e não no <figure>, senão ele levaria a legenda junto. */
.imet .iequipe__moldura {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: clamp(12px, 1.2vw, 18px);
}
.imet .iequipe__moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 42%;
  transform: scale(1.3);
}

.imet__cols {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 760px) { .imet__cols { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

.imet__col {
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid rgba(35, 35, 80, .12);
}
.imet__col--sim { border: 2px solid var(--electric); box-shadow: 0 18px 44px rgba(40, 40, 180, .14); }

.imet__rot {
  margin: 0 0 14px;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.imet__col--nao .imet__rot { color: var(--grey-2); }
.imet__col--sim .imet__rot { color: var(--royal); }

.imet__col ul { margin: 0; padding: 0; list-style: none; }
.imet__col li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 26px;
  font-size: var(--t-sm);
  line-height: 1.55;
}
.imet__col li:last-child { margin-bottom: 0; }
.imet__col--nao li { color: var(--grey-2); }
.imet__col--sim li { color: var(--navy); }
.imet__col li::before {
  content: "";
  position: absolute;
  left: 0; top: .34em;
  width: 16px; height: 16px;
  border-radius: 50%;
}
.imet__col--nao li::before { background: rgba(150, 150, 150, .28); }
.imet__col--sim li::before { background: var(--teal); }

/* o x e o visto desenhados dentro das bolinhas */
.imet__col li::after {
  content: "";
  position: absolute;
  left: 4px; top: .34em;
  width: 8px; height: 8px;
  margin-top: 4px;
}
.imet__col--nao li::after {
  background:
    linear-gradient(45deg, transparent 42%, var(--grey-2) 42%, var(--grey-2) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--grey-2) 42%, var(--grey-2) 58%, transparent 58%);
}
.imet__col--sim li::after {
  width: 9px; height: 5px;
  margin-top: 3px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
}

/* ---- formatos ------------------------------------------------------------ */

.iform {
  padding-block: clamp(46px, 6.4vw, 92px);
  background:
    radial-gradient(60% 60% at 10% 0%, #33338a 0%, rgba(51, 51, 138, 0) 58%),
    var(--navy);
  color: #c0c0e2;
}
.iform__head { text-align: center; margin-bottom: clamp(28px, 3.6vw, 44px); }
.iform__head .chapeu-code { display: inline-flex; margin-bottom: clamp(14px, 1.8vw, 22px); }
.iform__linha { margin: 14px auto 0; max-width: 58ch; font-size: var(--t-base); line-height: 1.6; }

.iform__lista {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}
@media (min-width: 900px) { .iform__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.iform__card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .17);
  background: rgba(255, 255, 255, .05);
}
.iform__card--destaque {
  border: 2px solid var(--electric);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(75, 75, 255, .2) 0%, rgba(75, 75, 255, 0) 62%),
    rgba(255, 255, 255, .06);
}

.iform__rot {
  margin: 0 0 10px;
  color: #9a9aff;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.iform__card h3 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.4375rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.iform__desc { margin: 0 0 16px; font-size: var(--t-sm); line-height: 1.6; }

.iform__itens { margin: 0 0 18px; padding: 0; list-style: none; }
.iform__itens li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 20px;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: #b4b4dc;
}
.iform__itens li::before {
  content: "";
  position: absolute;
  left: 2px; top: .6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.iform__preco {
  margin: auto 0 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--t-sm);
  color: #a8a8d2;
}
.iform__preco b {
  display: block;
  color: var(--orange);
  font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.iform__preco span { display: block; margin-top: 2px; }

.iform__btn {
  display: block;
  padding: 13px 20px;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 255, 255, .28);
  color: var(--white);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.iform__btn:hover,
.iform__btn:focus-visible {
  color: var(--white);
  border-color: var(--electric);
  background: var(--electric);
}
.iform__card--destaque .iform__btn { background: var(--orange); border-color: var(--orange); }
.iform__card--destaque .iform__btn:hover { background: #e04e00; border-color: #e04e00; }

.iform__nota {
  margin: clamp(22px, 3vw, 32px) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: var(--t-sm);
  color: #a8a8d2;
}
.iform__nota a { color: #9a9aff; font-weight: 700; text-decoration: underline; }
.iform__nota a:hover { color: var(--white); }

/* ---- resultados ---------------------------------------------------------- */

.ires {
  padding-top: clamp(46px, 6.4vw, 92px);
  background: var(--navy);
  color: #c0c0e2;
}
.ires__head { text-align: center; margin-bottom: clamp(26px, 3.4vw, 40px); }
/* a dobra 04 é a única de fundo navy: o royal do chapéu some ali, então o
   texto vira branco. O quadrinho do número e o cursor continuam elétricos,
   que é o que dá contraste em cima do escuro. */
.ires__head .chapeu-code {
  display: inline-flex;
  margin-bottom: clamp(14px, 1.8vw, 22px);
  color: var(--white);
}
.ires__head .chapeu-code__sinal { color: rgba(255, 255, 255, .5); }

.ires__videos {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 clamp(34px, 4.6vw, 60px);
  padding: 0;
  list-style: none;
}
@media (min-width: 820px) { .ires__videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ires__videos .video {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
}
.ires__quem { margin: 12px 0 0; font-size: var(--t-xs); line-height: 1.5; }
.ires__quem b { display: block; color: var(--white); font-size: var(--t-sm); font-weight: 700; }
.ires__quem span { color: #a8a8d2; }

/* ---- contato ------------------------------------------------------------- */

.icta {
  padding-block: clamp(46px, 6.4vw, 92px);
  background:
    radial-gradient(70% 80% at 18% 0%, #33338a 0%, rgba(51, 51, 138, 0) 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(100, 0, 175, .4) 0%, rgba(100, 0, 175, 0) 62%),
    var(--navy);
  color: #c0c0e2;
}

.icta__caixa { text-align: center; }

.icta__titulo {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.icta__linha {
  margin: 16px auto 0;
  max-width: 54ch;
  font-size: var(--t-base);
  line-height: 1.6;
}

.icta__vias {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 860px);
  margin: clamp(26px, 3.6vw, 40px) auto 0;
}
@media (min-width: 760px) { .icta__vias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.icta__via {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: var(--white);
  text-align: left;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.icta__via:hover,
.icta__via:focus-visible {
  transform: translateY(-3px);
  color: var(--white);
  border-color: var(--electric);
  background: rgba(75, 75, 255, .16);
}
.icta__via--zap:hover { border-color: var(--teal); background: rgba(0, 200, 160, .14); }

.icta__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(75, 75, 255, .2);
  color: #b4b4ff;
}
.icta__via--zap .icta__ico { background: rgba(0, 200, 160, .18); color: var(--teal); }
.icta__ico svg { width: 21px; height: 21px; }

.icta__txt { min-width: 0; font-size: var(--t-xs); line-height: 1.45; }
.icta__txt b { display: block; font-size: var(--t-sm); font-weight: 700; }
.icta__txt span { color: #a8a8d2; word-break: break-word; }

.icta__pe {
  margin: clamp(22px, 3vw, 30px) 0 0;
  font-size: var(--t-xs);
  color: #8a8ab0;
}

/* ---- ajustes nos blocos herdados da página de vendas --------------------- */

/* aqui não existe barra fixa de compra, então o rodapé não precisa do pé alto */
.site-footer { padding-bottom: clamp(28px, 4vw, 48px); }

/* a faixa de fotos encosta no fim da capa */
.ih .faixa { margin-top: 0; }

/* ==========================================================================
   Camada "business"

   A página de vendas precisa de brilho porque disputa atenção. Aqui quem
   lê é RH, gestor e diretoria, e eles confiam no que parece organizado.
   Então: menos aura, mais estrutura. Fundo chapado, seções numeradas,
   cantos mais retos, régua fina separando as dobras e o azul da marca
   entrando em bloco sólido, não em degradê.
   ========================================================================== */

/* ---- logo só da SpeakPro no cabeçalho ----------------------------------- */

.site-header--venda .site-header__logo img.inst-logo {
  width: clamp(120px, 12vw, 158px);
  height: auto;
  border-radius: 0;
  background: none;
  padding: 0;
}

/* ---- fundos chapados ----------------------------------------------------- */

.ih,
.iprob,
.iform,
.ires,
.icta {
  background-image: none;
  background-color: var(--navy);
}

/* uma única luz, bem contida, atrás da capa */
.ih {
  background-image: linear-gradient(180deg, #2a2a66 0%, var(--navy) 62%);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ifrase, .imet { background-color: var(--white); }

/* régua fina entre as dobras escuras */
.iprob, .iform, .icta { border-top: 1px solid rgba(255, 255, 255, .1); }

/* ---- capa alinhada à esquerda, como relatório --------------------------- */

@media (min-width: 860px) {
  .ih__inner { text-align: left; }
  .ih__titulo, .ih__linha { margin-inline: 0; }
  .ih__titulo { max-width: 18ch; }
  .ih__acoes, .ih__selos { justify-content: flex-start; }
}

.ih__selos {
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 18px;
}
.ih__selos li {
  padding: 2px 22px;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.ih__selos li:first-child { padding-left: 0; }
.ih__selos li:last-child { border-right: 0; }
@media (max-width: 560px) {
  .ih__selos { flex-direction: column; gap: 8px; }
  .ih__selos li { padding: 0; border-right: 0; }
}

/* ---- cabeçalhos de seção numerados -------------------------------------- */

.inum {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.inum__n {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding: 3px 7px;
  background: var(--electric);
  color: var(--white);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.imet .inum__n { background: var(--royal); }

/* as dobras ficam alinhadas à esquerda, com régua em cima */
@media (min-width: 860px) {
  .iprob__head,
  .imet__head,
  .iform__head,
  .ires__head,
  .mentores__head {
    text-align: left;
    padding-top: 22px;
    border-top: 2px solid rgba(255, 255, 255, .16);
  }
  .imet__head { border-top-color: rgba(35, 35, 80, .18); }
  .iprob__head .hb__bt,
  .imet__head .hb__bt,
  .iform__head .hb__bt,
  .ires__head .hb__bt,
  .mentores__head .hb__bt { max-width: 30ch; }
  /* o marcador não pode quebrar no meio: ele é um bloco só */
  .iprob__head .hb__bt { max-width: 38ch; }
  .imet__linha, .iform__linha { margin-inline: 0; }
}

/* ---- cantos mais retos, sem brilho --------------------------------------- */

.iprob__card,
.iform__card,
.imet__col,
.icta__via {
  border-radius: 6px;
  box-shadow: none;
}
.iform__card--destaque { background-image: none; background-color: rgba(255, 255, 255, .07); }
.imet__col--sim { box-shadow: none; }

/* o hover vira um traço de cor na lateral, em vez de fundo colorido */
.iprob__card,
.icta__via { position: relative; overflow: hidden; }
.iprob__card::before,
.icta__via::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--electric);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .26s cubic-bezier(.22, .8, .3, 1);
}
.iprob__card:hover::before,
.icta__via:hover::before { transform: scaleY(1); }
.iprob__card:hover,
.icta__via:hover {
  transform: none;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .3);
}
.icta__via--zap::before { background: var(--teal); }
.icta__via--zap:hover { background: rgba(255, 255, 255, .08); }

/* ---- a frase e o contato, mais sóbrios ---------------------------------- */

.ifrase { border-bottom: 1px solid rgba(35, 35, 80, .1); }
.ifrase__txt { max-width: 26ch; }

.icta__caixa { text-align: left; }
.icta__linha { margin-inline: 0; }
.icta__vias { margin-inline: 0; }
@media (max-width: 560px) {
  .icta__caixa { text-align: center; }
  .icta__linha { margin-inline: auto; }
}

/* ---- capa em duas colunas: texto e uma foto do estúdio ------------------ */

.ih__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  padding-bottom: clamp(30px, 4.4vw, 54px);
}
@media (min-width: 980px) {
  .ih__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.ih__inner { padding-bottom: 0; }

.ih__foto { display: none; margin: 0; }
@media (min-width: 980px) {
  .ih__foto { display: block; }
}
.ih__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .18);
}
.ih__foto figcaption {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--electric);
  color: #a8a8d2;
  font-size: var(--t-xs);
  line-height: 1.5;
}

/* em tela estreita o botão do topo vira "Contato", senão estoura a barra */
.nav-quero__curto { display: none; }
@media (max-width: 620px) {
  .nav-quero__txt { display: none; }
  .nav-quero__curto { display: inline; }
}

/* os três selos cabem numa linha só dentro da coluna de texto */
@media (min-width: 980px) {
  .ih__selos li { padding: 2px 14px; font-size: .75rem; }
}

/* ==========================================================================
   Quem já passou por aqui

   Os nomes entram como texto, não como logo: logo de terceiro em site
   precisa de autorização de uso de marca, e nome escrito não precisa.
   ========================================================================== */

.icli {
  padding-block: clamp(32px, 4.4vw, 56px);
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.icli__rot {
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  color: #8a8ab0;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

.icli__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px) clamp(20px, 3.4vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.icli__lista li {
  color: rgba(255, 255, 255, .72);
  font-size: clamp(1rem, .9rem + .7vw, 1.4375rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  transition: color .18s ease;
}
.icli__lista li:hover { color: var(--white); }

/* ---- botão de troca de idioma ------------------------------------------- */

.lang-sw {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  border: 2px solid rgba(255, 255, 255, .28);
  color: #e4e4ff;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.lang-sw:hover,
.lang-sw:focus-visible {
  color: var(--white);
  border-color: var(--electric);
  background: rgba(75, 75, 255, .18);
}
@media (max-width: 420px) {
  .lang-sw { min-width: 34px; padding: 7px 8px; font-size: .625rem; }
}

/* ==========================================================================
   Versão clara da institucional

   A página de vendas vive no escuro porque precisa de impacto. Aqui o
   fundo vira branco: empresa grande lê melhor em claro, e sobra espaço
   pra respirar. O navy continua, mas em faixas escolhidas: as pessoas
   (mentores), a prova (resultados) e o fechamento. Isso dá ritmo em vez
   de uma parede clara do começo ao fim.
   ========================================================================== */

body.inst-claro { background: var(--white); }

/* ---- cabeçalho claro ----------------------------------------------------- */

.inst-claro .site-header--venda.site-header--branco {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(35, 35, 80, .12);
  backdrop-filter: saturate(1.2) blur(8px);
}
.inst-claro .site-header--venda.site-header--branco .site-nav a:not(.btn):not(.nav-aluno) { color: var(--navy); }
.inst-claro .site-header--venda.site-header--branco .site-nav a:not(.btn):not(.nav-aluno):hover { color: var(--royal); }
.inst-claro .site-header--venda.site-header--branco a.nav-aluno,
.inst-claro .site-header--venda.site-header--branco .nav-toggle,
.inst-claro .lang-sw {
  color: var(--navy);
  border-color: rgba(35, 35, 80, .24);
  background: transparent;
}
.inst-claro .site-header--venda.site-header--branco a.nav-aluno:hover,
.inst-claro .site-header--venda.site-header--branco .nav-toggle:hover,
.inst-claro .lang-sw:hover {
  color: var(--royal);
  border-color: var(--royal);
  background: rgba(75, 75, 255, .08);
}
.inst-claro .site-header--venda .site-header__logo img.inst-logo { width: clamp(118px, 12vw, 150px); }

/* o painel do menu no celular também fica claro */
.inst-claro .site-header--venda .site-nav { background: var(--white); }
/* ...mas na linha horizontal, não: o cabeçalho é translúcido de propósito
   (branco a 94% com blur), e um retângulo branco sólido atrás das palavras
   aparecia recortado em cima de qualquer dobra escura que passasse por
   baixo. 1340px é onde o menu deixa de ser painel. */
@media (min-width: 1340px) {
  .inst-claro .site-header--venda .site-nav {
    background: transparent;
    border-top: 0;
    box-shadow: none;
  }
}

/* ---- dobras claras ------------------------------------------------------- */

.inst-claro .ih,
.inst-claro .iprob,
.inst-claro .icli,
.inst-claro .iform {
  background: var(--white);
  background-image: none;
  color: var(--grey-1);
  border-color: rgba(35, 35, 80, .1);
}
.inst-claro .ih { border-bottom: 1px solid rgba(35, 35, 80, .1); }
.inst-claro .ifrase { background: #f4f4fb; }

.inst-claro .ih__titulo,
.inst-claro .iprob .hb__bt,
.inst-claro .iform .hb__bt,
.inst-claro .iprob__card h3,
.inst-claro .iform__card h3 { color: var(--navy); }

.inst-claro .ih__titulo b { color: var(--navy); }
.inst-claro .ih__linha,
.inst-claro .iform__linha,
.inst-claro .iprob__card p,
.inst-claro .iform__desc { color: var(--grey-1); }
.inst-claro .ih__linha b { color: var(--navy); }

.inst-claro .ih__selos { border-top-color: rgba(35, 35, 80, .14); color: var(--grey-2); }
.inst-claro .ih__selos li { border-right-color: rgba(35, 35, 80, .14); }
.inst-claro .ih__selos b { color: var(--navy); }

.inst-claro .ih__btn2 { color: var(--navy); border-color: rgba(35, 35, 80, .24); }
.inst-claro .ih__btn2:hover { color: var(--royal); border-color: var(--royal); background: rgba(75, 75, 255, .08); }

.inst-claro .ih__foto img { border-color: rgba(35, 35, 80, .14); }
.inst-claro .ih__foto figcaption { color: var(--grey-2); }

/* cartões claros, com borda fina em vez de fundo */
.inst-claro .iprob__card,
.inst-claro .iform__card {
  background: var(--white);
  border: 1px solid rgba(35, 35, 80, .14);
}
.inst-claro .iprob__card:hover,
.inst-claro .iform__card:hover { background: #f8f8fd; border-color: rgba(35, 35, 80, .28); }
.inst-claro .iform__card--destaque {
  border: 2px solid var(--electric);
  background: #f7f7ff;
}
.inst-claro .iform__itens li { color: var(--grey-1); }
.inst-claro .iform__preco { color: var(--grey-2); border-top-color: rgba(35, 35, 80, .14); }
.inst-claro .iform__btn { color: var(--navy); border-color: rgba(35, 35, 80, .24); }
.inst-claro .iform__btn:hover { color: var(--white); background: var(--electric); border-color: var(--electric); }
.inst-claro .iform__card--destaque .iform__btn { color: var(--white); }
.inst-claro .iform__nota { color: var(--grey-2); }
.inst-claro .iform__nota a { color: var(--royal); }
.inst-claro .iform__nota a:hover { color: var(--navy); }

/* a faixa de clientes em claro */
.inst-claro .icli { border-top: 1px solid rgba(35, 35, 80, .1); border-bottom: 1px solid rgba(35, 35, 80, .1); }
.inst-claro .icli__rot { color: var(--grey-2); }
.inst-claro .icli__lista li { color: rgba(35, 35, 80, .62); }
.inst-claro .icli__lista li:hover { color: var(--navy); }

/* os chapéus e as réguas de seção */
.inst-claro .iprob .hb__chapeu,
.inst-claro .iform .hb__chapeu { color: var(--royal); }
.inst-claro .iprob__head,
.inst-claro .iform__head { border-top-color: rgba(35, 35, 80, .18); }

/* o traço de cor que entra no hover continua, só muda o fundo */
.inst-claro .iprob__card:hover { background: #f8f8fd; }

/* ---- as faixas que continuam escuras ------------------------------------ */
/* mentores, resultados e o fechamento: as pessoas e a prova aparecem
   melhor no escuro, e as três faixas dão ritmo à página. */

/* o FAQ também fica claro: o painel ganha borda pra não sumir no branco */
.inst-claro .faq-sec { background: #f4f4fb; }
.inst-claro .faq-sec .faq__painel {
  border: 1px solid rgba(35, 35, 80, .14);
  box-shadow: 0 20px 50px rgba(35, 35, 80, .08);
}

/* ==========================================================================
   Camada "apresentação"

   Traz pro site a linguagem da apresentação empresarial: cantos retos,
   foto sangrando até a borda, bloco de cor sólido, marcador quadrado e o
   traço grosso do balão virando a quina. Nada aqui muda conteúdo, só a
   forma: é a mesma marca falando do mesmo jeito em dois suportes.
   ========================================================================== */

/* a margem que alinha os blocos sangrados com o miolo da página */
body.inst-claro { --margem-inst: max(24px, calc((100vw - 1120px) / 2)); }

/* ---- cantos retos --------------------------------------------------------- */

.inst-claro .iprob__card,
.inst-claro .iform__card,
.inst-claro .imet__col,
.inst-claro .icta__via,
.inst-claro .ih__foto img,
.inst-claro .faq-sec .faq__painel,
.inst-claro .ires__videos .video,
.inst-claro .mentor__foto,
.inst-claro .mentor__foto img { border-radius: 0; }

.inst-claro .ih__btn,
.inst-claro .ih__btn2,
.inst-claro .iform__btn { border-radius: 2px; }

/* ---- a capa: foto sangrando na borda direita ----------------------------- */

@media (min-width: 980px) {
  .inst-claro .ih { padding-top: 0; }
  .inst-claro .ih__grade {
    width: 100%;
    max-width: none;
    padding: 0;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 0;
    align-items: stretch;
  }
  .inst-claro .ih__inner {
    padding: clamp(60px, 7vw, 104px) clamp(40px, 5vw, 80px) clamp(60px, 7vw, 104px) var(--margem-inst);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .inst-claro .ih__foto { position: relative; height: 100%; }
  .inst-claro .ih__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
  .inst-claro .ih__foto figcaption {
    position: absolute;
    left: 0; bottom: 0;
    margin: 0;
    padding: 14px 20px;
    background: var(--navy);
    border: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .75rem;
    max-width: 80%;
  }
}

/* o traço do balão, igual ao da apresentação */
.inst-claro .ih::after {
  content: "";
  position: absolute;
  left: var(--margem-inst);
  bottom: 42px;
  width: 190px;
  height: 10px;
  background: var(--electric);
}
@media (max-width: 979px) { .inst-claro .ih::after { display: none; } }

/* ---- a frase: dois blocos sólidos, como no slide ------------------------- */

.inst-claro .ifrase {
  padding: 0;
  background: var(--white);
  border-bottom: 0;
}
.inst-claro .ifrase .wrap { width: 100%; max-width: none; padding: 0; }
.inst-claro .ifrase__txt,
.inst-claro .ifrase__sub { max-width: none; text-align: left; }

.inst-claro .ifrase__txt {
  background: var(--electric);
  color: var(--white);
  padding: clamp(40px, 5vw, 72px) var(--margem-inst);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
}
.inst-claro .ifrase__txt .mark { background: var(--white); color: var(--royal); }
.inst-claro .ifrase__sub {
  margin: 0;
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
  padding: clamp(28px, 3.4vw, 44px) var(--margem-inst);
  font-size: var(--t-base);
}

/* ---- marcador quadrado, como nos bullets da apresentação ----------------- */

.inst-claro .iform__itens li::before,
.inst-claro .imet__col--sim li::before {
  border-radius: 0;
  width: 12px; height: 12px;
  top: .42em;
}
.inst-claro .iform__itens li::before { background: var(--electric); }
.inst-claro .imet__col--sim li::before { background: var(--electric); }
.inst-claro .imet__col--sim li::after { display: none; }
.inst-claro .imet__col--nao li::before { border-radius: 0; width: 12px; height: 12px; top: .42em; background: rgba(150,150,150,.4); }
.inst-claro .imet__col--nao li::after { display: none; }

/* o número da seção vira bloco cheio, do tamanho do da apresentação */
.inst-claro .inum__n { border-radius: 0; padding: 4px 9px; letter-spacing: .1em; }

/* ---- formatos: cartão com faixa de cor em cima --------------------------- */

.inst-claro .iform__card { border-top: 6px solid var(--navy); }
.inst-claro .iform__card--destaque { border: 1px solid rgba(35,35,80,.14); border-top: 6px solid var(--electric); background: #f7f7ff; }
.inst-claro .iform__rot { color: var(--royal); }

/* ---- os mentores em faixa escura com foto quadrada ----------------------- */

.inst-claro .mentor__foto img { aspect-ratio: 4 / 3; object-fit: cover; }

/* os três selos numa linha só dentro da coluna da capa */
@media (min-width: 980px) {
  .inst-claro .ih__selos li { padding: 2px 11px; font-size: .6875rem; }
}

/* ---- foto sangrando no topo do cartão de formato ------------------------ */

.iform__foto {
  display: block;
  flex: none;
  width: calc(100% + 2 * clamp(22px, 2.6vw, 30px));
  margin: calc(-1 * clamp(22px, 2.6vw, 30px)) calc(-1 * clamp(22px, 2.6vw, 30px)) clamp(20px, 2.2vw, 26px);
  height: 190px;
  object-fit: cover;
  object-position: center 28%;
}
.inst-claro .iform__card { padding-top: 0; overflow: hidden; }
.inst-claro .iform__card .iform__rot { margin-top: 0; }

/* cada foto tem o seu enquadramento: o rosto não pode ficar cortado */
.iform__card:nth-child(1) .iform__foto { object-position: center 38%; }
.iform__card:nth-child(2) .iform__foto { object-position: center 10%; }
.iform__card:nth-child(3) .iform__foto { object-position: center 32%; }

/* os nomes das empresas viram links, mas sem cara de link */
.icli__lista a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}
.inst-claro .icli__lista a:hover,
.inst-claro .icli__lista a:focus-visible { color: var(--royal); }
.icli__lista span { cursor: default; }

/* a logo entra no lugar do nome quando o arquivo existir */
.icli__logo[hidden] { display: none; }
.icli__logo {
  display: block;
  height: clamp(22px, 2.4vw, 32px);
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: .72;
  transition: opacity .18s ease;
}
.icli__lista a:hover .icli__logo { opacity: 1; }
.icli__nome[hidden] { display: none; }

/* ajuste óptico depois de aparar o vazio de cada arquivo */
.icli__logo[src*="o-boticario"] { height: clamp(16px, 1.8vw, 22px); }
.icli__logo[src*="britania"]    { height: clamp(18px, 2vw, 24px); }
.icli__logo[src*="tractian"]    { height: clamp(17px, 1.9vw, 23px); }
.icli__logo[src*="ab-inbev"]    { height: clamp(18px, 2vw, 25px); }

/* ==========================================================================
   Faixa de clientes em movimento

   Sem JS, ou com "reduzir movimento" ligado no sistema, a faixa continua
   sendo a lista centralizada de sempre. O JS só liga a esteira quando
   pode: aí ele duplica a lista e a fita anda sozinha, em loop.
   ========================================================================== */

.icli__trilho { overflow: hidden; }

/* o espaço entre logos é o mesmo dentro da lista e entre as duas cópias,
   senão a emenda do loop aparece */
.icli {
  --icli-vao: clamp(26px, 4vw, 64px);
  --icli-dur: 60s;
}

.icli--roda .icli__lista {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0 var(--icli-vao);
  width: max-content;
  padding-right: var(--icli-vao);
}

.icli--roda .icli__trilho {
  /* some nas duas pontas pra fita não terminar num corte seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.icli__fita {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: icli-anda var(--icli-dur) linear infinite;
}

@keyframes icli-anda {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* passou o mouse ou chegou com o teclado: a fita para, pra dar pra clicar */
.icli__trilho:hover .icli__fita,
.icli__fita:focus-within { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .icli__fita { animation: none; }
  .icli--roda .icli__lista { flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ==========================================================================
   DOBRA 1: a capa com o balão

   O balão é o vetor da apresentação empresarial, o traço original, sem
   redesenho nenhum. A única mudança no arquivo foi esticar a barra de
   baixo pra muito longe à esquerda, pra ela sair da tela em qualquer
   largura.

   No desenho, a barra de baixo começa a 70% da altura e a ponta do
   rabinho termina a 98,5%. É isso que manda no espaço que o texto tem lá
   em cima e no pé que a dobra precisa deixar embaixo.
   ========================================================================== */

.hbal {
  --bal-dir: clamp(14px, 2.6vw, 48px);  /* respiro entre o balão e a borda */
  --hbal-pe: clamp(40px, 5.5vw, 90px);  /* o pé da dobra */
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #eaeaf3 0%, #f6f6fa 40%, var(--white) 76%);
  color: var(--grey-1);
  isolation: isolate;
}

.hbal__palco {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(30px, 4vw, 54px) var(--margem-inst) var(--hbal-pe);
}

/* ---- o balão ------------------------------------------------------------- */
/* É o vetor da apresentação, inteiro. O SVG preenche a caixa e o
   preserveAspectRatio "xMaxYMid slice" faz duas coisas: a escala segue a
   ALTURA da caixa (então a espessura do traço fica sempre na proporção
   certa do desenho) e o canto de cima fica grudado na direita. A barra de
   baixo, que no arquivo foi esticada pra muito longe à esquerda, some pela
   borda da tela em qualquer largura.

   No desenho original a barra de baixo fica a 70% da altura. Isso é o que
   manda no espaço que sobra pro texto lá em cima. */

.bal-caixa {
  position: absolute;
  /* acima da foto: é a barra do balão que cobre a base do rapaz. O texto,
     em z-index 3, continua na frente dos dois */
  z-index: 2;
  left: 0;
  right: var(--bal-dir);
  top: var(--bal-topo, 24px);
  /* a altura vem do JS: o balão termina logo abaixo do marcador. Como a
     espessura do traço é uma proporção da altura do desenho, quanto menor
     o balão, mais fino o traço. Ele é fundo, não moldura. */
  height: var(--bal-alt, 360px);
  color: var(--electric);
  pointer-events: none;
}
.bal { display: block; width: 100%; height: 100%; }

/* ---- a pessoa ------------------------------------------------------------ */

.hbal__pessoa { display: none; margin: 0; z-index: 1; }
.hbal__pessoa img { display: block; width: 100%; height: auto; }

/* ---- o texto ------------------------------------------------------------- */

.hbal__texto {
  position: relative;
  z-index: 3;

}

.hbal__titulo {
  margin: 0;
  padding-right: var(--bal-guarda, 0px);
  font-size: clamp(1.6rem, .5rem + 2.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.hbal__titulo span { display: block; }
.hbal__l1, .hbal__l2 { color: var(--electric); }

.hbal__p1 {
  margin: clamp(20px, 2.8vw, 36px) 0 0;
  padding-right: var(--bal-guarda, 0px);
  font-size: clamp(1rem, .9rem + .55vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--electric);
}
.hbal__frase { display: block; max-width: 30em; color: var(--grey-1); }

/* o botão cai logo abaixo da barra do balão: a margem vem do JS, que mede
   onde a barra termina de verdade em cada largura */
.hbal__acao {
  margin: var(--bal-abaixo, 64px) 0 0;
  text-align: center;
}
@media (min-width: 1200px) {
  /* atravessa as duas colunas. A margem negativa à direita compensa o
     padding do palco, que nessa largura é zero à esquerda e cheio à
     direita: sem ela o centro cairia fora do centro da tela */
  .hbal__acao {
    grid-column: 1 / -1;
    margin-right: calc(-1 * var(--margem-inst));
  }
}
.hbal__seta { transition: transform .16s ease; }
.btn:hover .hbal__seta { transform: translateX(4px); }

/* o botão fecha o diagnóstico: a pessoa marcou, leu o veredito, e aí tem
   pra onde ir */
.iquiz__acao {
  margin: clamp(26px, 3.2vw, 40px) 0 0;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) { .hbal__seta { transition: none; } }

/* o marca-texto: bloco navy, texto branco */
.marcador {
  display: inline-block;
  position: relative;
  margin-top: .4em;
  padding: .18em .55em .24em;
  color: var(--white);
  isolation: isolate;
}
.marcador > span { display: inline-block; }
.marcador::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--electric);
  border-radius: 6px;
  transform-origin: left center;
}

.hbal__p2 {
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  max-width: 30em;
  font-size: clamp(1rem, .9rem + .55vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--electric);
}
.hbal__p2 b { color: var(--electric); font-weight: 800; }



.hbal__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(22px, 2.8vw, 34px);
}
.hbal__btn { padding: 16px 30px; font-size: var(--t-sm); border-radius: 2px; }
.hbal__btn2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border: 2px solid rgba(35, 35, 80, .22);
  border-radius: 2px;
  color: var(--navy);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.hbal__btn2:hover,
.hbal__btn2:focus-visible { color: var(--royal); border-color: var(--royal); background: rgba(75, 75, 255, .08); }
.hbal__btn2-ico { display: grid; place-items: center; width: 18px; height: 18px; }
.hbal__btn2-ico svg { width: 18px; height: 18px; }

/* ---- a régua de provas, debaixo do balão --------------------------------- */
/* Cada item é marcado com a quina do balão: o mesmo traço grosso virando o
   canto, em miniatura. São dois itens e não três porque "100% online" e
   "presencial" não são duas informações, são uma só: onde a gente atende. */

.selos { background: var(--white); }

.hbal__selos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  margin: 0;
  padding: clamp(34px, 4.4vw, 60px) var(--margem-inst) clamp(26px, 3.4vw, 44px);
  list-style: none;
}

/* Os dois selos lidos como duas linhas de código: o número em mono e,
   embaixo, a descrição com // na frente e o cursor piscando no fim. É o
   mesmo desenho da legenda da foto do método. A quina do balão saiu: o //
   já faz o trabalho de marcar o começo da linha, e os dois juntos
   poluíam. */
/* com três selos, dois deles quebram o título em duas linhas. A coluna vira
   flex pra empurrar a linha de código pro pé: assim as três linhas com //
   ficam na mesma altura, mesmo com títulos de tamanhos diferentes. */
.hbal__selos li { position: relative; display: flex; flex-direction: column; }
.hbal__selos li .chapeu-code { margin-top: auto; }

.hbal__selos b {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  color: var(--navy);
  font-size: clamp(1.1875rem, .92rem + .95vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* escrito com o seletor do pai porque .chapeu-code sozinho perde pra
   qualquer regra de parágrafo com dois níveis que exista no arquivo */
.hbal__selos .chapeu-code {
  margin: 0;
  font-size: clamp(.6875rem, .64rem + .18vw, .78125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--grey-2);
}
.hbal__selos .chapeu-code__txt { color: var(--grey-1); }

/* dois selos cabiam lado a lado com folga; com três, a faixa precisa de
   um passo intermediário, senão a terceira linha de código quebra no meio */
@media (min-width: 700px) {
  .hbal__selos {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: center;
    gap: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 90px);
  }
}
@media (min-width: 1040px) {
  .hbal__selos {
    grid-template-columns: repeat(3, minmax(0, auto));
    gap: clamp(32px, 4.4vw, 76px);
  }
}

/* ---- tela grande: pessoa à esquerda, texto dentro do balão --------------- */

@media (min-width: 1200px) {
  .hbal__palco {
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    column-gap: clamp(20px, 2.6vw, 44px);
    align-items: end;
    min-height: clamp(460px, 40vw, 620px);
    padding-top: clamp(30px, 4.4vw, 72px);
    padding-bottom: var(--hbal-pe);
    padding-left: 0;
  }
  .hbal__pessoa {
    /* Fora do fluxo: assim o tamanho dele não empurra a altura da dobra.
       A altura é o que manda, e é calculada pra mão levantada ficar ACIMA
       da linha do balão (a mão começa a 53,5% da altura da foto). O pé
       encosta na régua de números e a largura sai da proporção. */
    display: block;
    position: absolute;
    bottom: var(--pessoa-base, 0px);
    right: calc(100% - (100% - var(--margem-inst) - 44px) * .5 + 24px);
    height: var(--pessoa-alt, 500px);
    /* a largura SAI da altura pela proporção do arquivo. Sem isto o
       navegador calcula a largura pelo espaço que sobra e achata a foto. */
    aspect-ratio: 1500 / 1058;
    width: auto;
    max-width: none;
    margin: 0;
  }
  .hbal__pessoa picture { display: block; width: 100%; height: 100%; }
  .hbal__pessoa img { width: 100%; height: 100%; object-fit: contain; }

  /* a pessoa passa por trás da régua de números, como atrás de um balcão */
  .hbal__selos { background: var(--white); border-top: 1px solid rgba(35, 35, 80, .09); }
  .hbal__texto {
    /* o texto fica no alto: é embaixo dele que o rabinho do balão precisa
       de espaço, e é o que dá o respiro da dobra */
    grid-column: 2;          /* a foto saiu do fluxo, então o texto é fixado aqui */
    align-self: start;
    max-width: 44rem;
    padding-top: clamp(26px, 4vw, 64px);
  }
  /* no desktop o bloco todo fica dentro do balão, então tudo se afasta
     da lateral dele. A medida vem do JS, que lê o desenho na tela. */
  .hbal__p2, .hbal__acoes { padding-right: var(--bal-guarda, 0px); }
}

/* ---- tela estreita: texto em cima, pessoa embaixo ------------------------ */

@media (max-width: 1199px) {
  .hbal__texto { order: 1; }
  /* no celular só o título e a pergunta ficam dentro do balão: o resto
     do bloco já está abaixo da barra, e usa a largura inteira */
  .hbal__pessoa {
    order: 2;
    display: block;
    align-self: center;
    justify-self: center;
    width: min(100%, 420px);
    margin: clamp(18px, 4vw, 30px) auto calc(-1 * clamp(20px, 6vw, 56px));
  }
  .hbal__palco { padding-bottom: clamp(24px, 4vw, 40px); }
}

/* ==========================================================================
   A animação da dobra 1

   Nada se mexe antes de a classe .hbal--pronta entrar, e ela só entra se o
   navegador roda o script. Sem isso, a dobra aparece pronta.
   ========================================================================== */

.hbal--pronta .hbal__l1,
.hbal--pronta .hbal__l2,
.hbal--pronta .hbal__frase,
.hbal--pronta .marcador,
.hbal--pronta .hbal__p2,
.hbal--pronta .hbal__acoes,
.hbal--pronta .hbal__acao,
.hbal--pronta .hbal__pessoa,
.hbal--pronta .hbal__selos { opacity: 0; }

.hbal--pronta .marcador::before { transform: scaleX(0); }

/* O DESENHO DO BALÃO
   O traço é um vetor só, então ele não pode "crescer" sozinho. Quem revela
   ele é uma máscara feita de seis retângulos, um por trecho, e cada
   retângulo abre no sentido em que a mão desenharia aquele pedaço:

     m1 barra de cima .... abre da esquerda pra direita
     m2 lateral direita .. abre de cima pra baixo
     m3 toco de baixo .... abre da direita pra esquerda
     m4 descida do rabo .. abre de cima pra baixo
     m5 volta do rabo .... abre da direita pra esquerda
     m6 barra comprida ... abre da direita pra esquerda, até sair da tela

   No fim os seis juntos cobrem o desenho inteiro. */

.hbal--pronta .bal rect { transform-box: fill-box; }
.hbal--pronta .bal__m1 { transform: scaleX(0); transform-origin: right center; }
.hbal--pronta .bal__m2 { transform: scaleY(0); transform-origin: center bottom; }
.hbal--pronta .bal__m3 { transform: scaleX(0); transform-origin: left center; }
.hbal--pronta .bal__m4 { transform: scaleY(0); transform-origin: center top; }
.hbal--pronta .bal__m5 { transform: scaleX(0); transform-origin: left center; }
.hbal--pronta .bal__m6 { transform: scaleX(0); transform-origin: left center; }

/* a ordem é a da varredura: a barra comprida corre da esquerda, o pé do
   balão se desenha da esquerda pra direita, o rabinho cai, a lateral sobe
   e a barra de cima fecha voltando pra esquerda */
.hbal--entra .bal__m6 { animation: hbal-cresce-x .70s cubic-bezier(.3,0,.2,1)  .05s both; }
.hbal--entra .bal__m5 { animation: hbal-cresce-x .14s linear                   .74s both; }
.hbal--entra .bal__m4 { animation: hbal-cresce-y .16s linear                   .86s both; }
.hbal--entra .bal__m3 { animation: hbal-cresce-x .14s linear                  1.00s both; }
.hbal--entra .bal__m2 { animation: hbal-cresce-y .30s cubic-bezier(.4,0,.25,1) 1.12s both; }
.hbal--entra .bal__m1 { animation: hbal-cresce-x .26s cubic-bezier(.4,0,.2,1)  1.40s both; }

@keyframes hbal-cresce-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hbal-cresce-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* o texto sobe junto com o traço */
.hbal--entra .hbal__l1     { animation: hbal-sobe .5s ease-out  .30s both; }
.hbal--entra .hbal__l2     { animation: hbal-sobe .5s ease-out  .44s both; }
.hbal--entra .hbal__frase  { animation: hbal-sobe .5s ease-out  .70s both; }
.hbal--entra .hbal__p2     { animation: hbal-sobe .5s ease-out 1.12s both; }
.hbal--entra .hbal__acoes  { animation: hbal-sobe .5s ease-out 1.34s both; }
.hbal--entra .hbal__pessoa { animation: hbal-foto .75s cubic-bezier(.2,.7,.3,1) .85s both; }
.hbal--entra .hbal__selos  { animation: hbal-sobe .5s ease-out 1.60s both; }

@keyframes hbal-sobe {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes hbal-foto {
  from { opacity: 0; transform: translate3d(-26px, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

/* O MARCA-TEXTO POR ÚLTIMO: a caneta passa da esquerda pra direita e as
   palavras aparecem logo atrás da ponta dela. */
.hbal--entra .marcador { opacity: 1; }
.hbal--entra .marcador::before { animation: hbal-caneta .62s cubic-bezier(.45,0,.25,1) 1.74s both; }
.hbal--entra .marcador > span  { animation: hbal-acende .62s cubic-bezier(.45,0,.25,1) 1.78s both; }

/* o botão entra depois que a caneta termina de riscar: 1,78 + 0,62 = 2,40 */
.hbal--entra .hbal__acao { animation: hbal-sobe .5s ease-out 2.45s both; }

@keyframes hbal-caneta { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hbal-acende {
  from { clip-path: inset(-40% 100% -40% 0); }
  to   { clip-path: inset(-40% -12% -40% 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hbal--pronta .hbal__l1, .hbal--pronta .hbal__l2, .hbal--pronta .hbal__frase,
  .hbal--pronta .marcador, .hbal--pronta .hbal__p2, .hbal--pronta .hbal__acoes,
  .hbal--pronta .hbal__acao,
  .hbal--pronta .hbal__pessoa, .hbal--pronta .hbal__selos { opacity: 1; }
  .hbal--pronta .bal rect { transform: none; }
  .hbal--pronta .marcador::before { transform: none; }
  .hbal--entra .bal rect, .hbal--entra .hbal__l1,
  .hbal--entra .hbal__l2, .hbal--entra .hbal__frase, .hbal--entra .hbal__p2,
  .hbal--entra .hbal__acoes, .hbal--entra .hbal__acao,
  .hbal--entra .hbal__pessoa, .hbal--entra .hbal__selos,
  .hbal--entra .marcador::before, .hbal--entra .marcador > span { animation: none; }
}

/* em telas de 360px o cabeçalho ainda estourava 9px: o seletor de idioma
   e o botão de contato apertam mais um pouco */
@media (max-width: 420px) {
  .site-header--venda .site-header__inner { padding-inline: 14px; gap: 6px; }
  .site-header--venda .site-header__logo img { width: 92px; height: auto; }
  .site-header--venda .site-header__acoes { gap: 5px; }
  .site-header--venda a.nav-quero { padding: 7px 7px; letter-spacing: 0; font-size: .625rem; }
  .lang-sw { min-width: 30px; padding: 7px 6px; }
  .site-header--venda .nav-toggle,
  .nav-aluno--mobile { padding: 8px 9px; }
}



/* em tela estreita o título corre como uma frase só, em vez de duas linhas
   fixas que quebravam feio */
@media (max-width: 720px) {
  .hbal__titulo span { display: inline; }
  .hbal__titulo { text-wrap: balance; }
}

/* quebra de linha que só vale da largura média pra cima */
.quebra-md { display: none; }
@media (min-width: 720px) { .quebra-md { display: inline; } }

/* ==========================================================================
   O MARCA-TEXTO, EM QUALQUER DOBRA

   O da dobra 1 virou o padrão da página: bloco azul elétrico, texto branco,
   canto de 6px, e a caneta passando da esquerda pra direita com as palavras
   acendendo atrás dela. Aqui ele deixa de ser peça do herói e passa a valer
   em qualquer título, com a animação disparando quando a dobra entra na tela.
   ========================================================================== */

.marcador--espera::before { transform: scaleX(0); }
.marcador--espera > span  { clip-path: inset(-40% 100% -40% 0); }

.marcador--risca::before { animation: hbal-caneta .62s cubic-bezier(.45,0,.25,1) both; }
.marcador--risca > span  { animation: hbal-acende .62s cubic-bezier(.45,0,.25,1) .04s both; }

@media (prefers-reduced-motion: reduce) {
  .marcador--espera::before { transform: none; }
  .marcador--espera > span  { clip-path: none; }
  .marcador--risca::before, .marcador--risca > span { animation: none; }
}

/* dentro de um título o marcador herda o tamanho e o peso da linha */
h2 .marcador, h3 .marcador { font: inherit; letter-spacing: inherit; }

/* ==========================================================================
   SOTAQUE "CODE"

   Os chapéus de seção passam a ser escritos em fonte monoespaçada, com um
   sinal de maior na frente e um cursor piscando no fim. É o único lugar da
   página com outra fonte, e de propósito: a monoespaçada marca "isto é um
   rótulo de sistema", não um texto de leitura.

   Usamos a monoespaçada do próprio sistema. Não baixa arquivo nenhum, e é
   exatamente a fonte que a pessoa já vê quando olha código na máquina dela.
   ========================================================================== */

:root {
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

.chapeu-code {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(12px, 1.6vw, 20px);
  font-family: var(--mono);
  font-size: clamp(.72rem, .66rem + .2vw, .8125rem);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--royal);
  line-height: 1.2;
}

.chapeu-code__n {
  flex: none;
  padding: 3px 7px 4px;
  background: var(--electric);
  color: var(--white);
  font-weight: 700;
  letter-spacing: .02em;
}

.chapeu-code__sinal { flex: none; color: var(--grey-2); font-weight: 700; }

.chapeu-code__txt { min-width: 0; }

/* o cursor: bloco piscando, do tamanho de um caractere */
.chapeu-code__cursor {
  flex: none;
  width: .6em;
  height: 1.05em;
  background: var(--electric);
  opacity: 0;
}
.chapeu-code--digitando .chapeu-code__cursor,
.chapeu-code--pronto .chapeu-code__cursor { opacity: 1; animation: pisca 1.05s steps(1, end) infinite; }


@keyframes pisca { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .chapeu-code__cursor { display: none; }
}

/* ==========================================================================
   DOBRA 2: A PONTE

   Duas margens e um vão. O vão aparece vazio, a ponte se constrói da
   esquerda pra direita, e aí o balão da marca atravessa e fica do outro
   lado. É a mesma história do texto, contada em movimento.

   Tudo em caixa e barra, nada de imagem: assim os dois rótulos são texto
   de verdade e a peça acompanha qualquer largura.
   ========================================================================== */

.iponte { background: #fafafa; overflow: hidden; }

.iponte__faixa {
  /* z-index acima do bloco de cima: é a faixa que cobre o pé da foto,
     não o contrário */
  position: relative;
  z-index: 2;
  background: var(--navy);
  color: var(--white);
  padding: clamp(34px, 4.6vw, 66px) var(--margem-inst);
}
.iponte__titulo {
  margin: 0;
  color: var(--white);
  font-size: clamp(2.1rem, 1rem + 3.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.iponte__miolo { padding: clamp(40px, 5.5vw, 80px) var(--margem-inst) clamp(44px, 6vw, 88px); }
/* o par de abertura fecha mais apertado embaixo: quem dá o respiro dali
   pra baixo é a faixa navy, que tem o padding dela */
.iponte__miolo--topo { padding-bottom: clamp(28px, 3.6vw, 52px); }

/* o par de abertura precisa de duas colunas de verdade, então o bloco
   deixou de ser uma coluna estreita de texto. Quem segura a medida agora é
   cada peça, não o container. */
.iponte__txt { max-width: 66rem; margin: 0; }
.iponte__txt p {
  margin: 0;
  font-size: clamp(1.05rem, .95rem + .7vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--grey-1);
}
.iponte__txt p + p { margin-top: clamp(10px, 1.2vw, 16px); }

/* o dado agora vive no miolo claro, não na faixa navy, e usa o mesmo
   bloco de código dos cards da dobra anterior */
.iponte__dado {
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding: clamp(12px, 1.4vw, 16px) clamp(13px, 1.5vw, 18px);
  border-left: 2px solid var(--orange);
  border-radius: 0 3px 3px 0;
  background: rgba(35, 35, 80, .04);
}
.iponte__txt .iponte__dado-txt {
  margin: 0;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: -.005em;
  color: var(--grey-1);
}
.iponte__txt .iponte__dado-txt b { color: var(--electric); font-weight: 700; }
.iponte__txt .iponte__fonte {
  display: block;
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--orange);
}
.iponte__txt .iponte__fonte-sinal { margin-right: .55em; color: var(--grey-2); font-weight: 700; }

/* o método: entra depois do dado, com um filete à esquerda que faz as vezes
   da ponte. Corpo mais leve que o bloco de cima, porque aqui a gente está
   explicando, não martelando. */
.iponte__metodo {
  max-width: 42rem;
  margin: clamp(26px, 3.2vw, 38px) 0 0;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--electric);
}
.iponte__txt .iponte__metodo p {
  font-size: clamp(.9375rem, .88rem + .35vw, 1.125rem);
  font-weight: 500;
  line-height: 1.62;
  color: var(--grey-1);
}
.iponte__txt .iponte__metodo p + p { margin-top: clamp(12px, 1.4vw, 18px); }
.iponte__txt .iponte__metodo b { color: var(--navy); font-weight: 800; }

/* ---- a peça ------------------------------------------------------------- */

.ponte {
  --margem-alt: clamp(54px, 7vw, 96px);   /* altura das margens */
  --trilho: clamp(10px, 1.1vw, 16px);     /* espessura da ponte */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: 0;
  max-width: 1120px;
  margin-inline: auto;
}

.ponte__lado { display: flex; flex-direction: column; min-width: 0; }

.ponte__rot {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: clamp(.68rem, .6rem + .34vw, .875rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--grey-1);
}
.ponte__lado--b .ponte__rot { text-align: right; }

/* as duas margens são sólidas e da mesma cor: o problema não é nenhum dos
   dois lados, é a distância entre eles */
.ponte__bloco { height: var(--margem-alt); background: var(--navy); }

/* o vão: a parte de baixo é o buraco, a de cima é por onde se atravessa */
.ponte__vao { position: relative; height: var(--margem-alt); }

/* a ponte que se constrói */
.ponte__trilho {
  position: absolute;
  left: -2px; right: -2px; top: 0;
  height: var(--trilho);
  background: var(--electric);
  transform: scaleX(0);
  transform-origin: left center;
}

/* a marca d'água do vão: tracejado mostrando a distância antes da ponte */
.ponte__vao::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--trilho) / 2 - 1px);
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(35,35,80,.26) 0 7px, transparent 7px 15px);
}

/* o balão que atravessa */
.ponte__bolha {
  position: absolute;
  bottom: calc(100% - var(--trilho) + 1px);
  left: 0;
  width: clamp(30px, 3vw, 44px);
  height: clamp(26px, 2.6vw, 38px);
  color: var(--navy);
  opacity: 0;
}
.ponte__bolha::before {
  content: "";
  position: absolute;
  inset: 0 0 24% 0;
  background: currentColor;
  border-radius: 4px;
}
.ponte__bolha::after {
  content: "";
  position: absolute;
  right: 24%;
  bottom: 0;
  width: 0; height: 0;
  border-left: clamp(8px, .8vw, 12px) solid currentColor;
  border-bottom: clamp(7px, .7vw, 10px) solid transparent;
}

/* ---- a construção ------------------------------------------------------- */

.iponte--monta .ponte__trilho {
  animation: ponte-cresce .85s cubic-bezier(.35,0,.2,1) .25s both;
}
.iponte--monta .ponte__bolha {
  animation: ponte-atravessa 1.1s cubic-bezier(.5,0,.3,1) 1.05s both;
}
.iponte--monta .ponte__vao::before {
  animation: ponte-some .5s ease-out .6s both;
}

@keyframes ponte-cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ponte-some   { from { opacity: 1; } to { opacity: 0; } }
@keyframes ponte-atravessa {
  0%   { opacity: 0; left: 0;    transform: translate(-50%, 0); }
  12%  { opacity: 1; }
  45%  { transform: translate(-50%, -22%); }
  100% { opacity: 1; left: 96%; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ponte__trilho { transform: none; }
  .ponte__bolha { opacity: 1; left: 96%; transform: translate(-50%, 0); }
  .ponte__vao::before { opacity: 0; }
  .iponte--monta .ponte__trilho,
  .iponte--monta .ponte__bolha,
  .iponte--monta .ponte__vao::before { animation: none; }
}

@media (max-width: 560px) {
  .ponte { grid-template-columns: minmax(0, 1fr) minmax(60px, .8fr) minmax(0, 1fr); }
  .ponte__rot { font-size: .66rem; letter-spacing: .04em; }
}

/* ---- os ícones dos cards de dor ----------------------------------------- */
/* Traço fino, canto reto, mesma linguagem do "code" dos chapéus: são sinais,
   não ilustrações. Cada um mostra a cena do card, não um conceito abstrato. */

.iprob__ico {
  display: block;
  width: clamp(26px, 2.4vw, 32px);
  height: auto;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  color: var(--electric);
  flex: none;
}
.iprob__card:hover .iprob__ico { color: var(--royal); }

/* ==========================================================================
   "A FALA NÃO ACOMPANHA", DITO PELA FORMA

   A frase tem duas metades que não chegam juntas. A competência entra na
   hora. A fala entra depois, vindo de trás, mais devagar, e o marcador
   ainda leva um tempo pra fechar atrás dela.

   Quem lê espera. E essa espera é exatamente o que a frase diz: uma parte
   chegou, a outra está atrasada. O atraso não ilustra a ideia, ele é a
   ideia acontecendo na tela.
   ========================================================================== */

.hbt--atraso { display: block; }
.atraso__a, .atraso__b { display: block; }
.atraso__b { margin-top: .12em; }

.hbt--atraso--espera .atraso__a { opacity: 0; }
.hbt--atraso--espera .atraso__b { opacity: 0; }

/* a competência chega na hora */
.hbt--atraso--entra .atraso__a { animation: atraso-chega .45s cubic-bezier(.3,0,.2,1) both; }

/* a fala vem de trás, mais devagar, e atrasada */
.hbt--atraso--entra .atraso__b { animation: atraso-alcanca .48s cubic-bezier(.2,0,.12,1) .30s both; }

/* e o marcador só fecha depois que ela chega */
.marcador--tarde.marcador--risca::before { animation-duration: .58s; animation-delay: .62s; }
.marcador--tarde.marcador--risca > span  { animation-duration: .58s; animation-delay: .68s; }

/* a pergunta do "modo carregando" só entra depois que a fala alcança */
.hbt--atraso--espera ~ .iprob__pergunta { opacity: 0; }
.hbt--atraso--entra  ~ .iprob__pergunta { animation: atraso-chega .5s cubic-bezier(.3,0,.2,1) 1.35s both; }

@keyframes atraso-chega {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes atraso-alcanca {
  from { opacity: 0; transform: translate3d(-34px, 0, 0); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hbt--atraso--espera .atraso__a,
  .hbt--atraso--espera .atraso__b { opacity: 1; }
  .hbt--atraso--entra .atraso__a,
  .hbt--atraso--entra .atraso__b { animation: none; }
  .hbt--atraso--espera ~ .iponte__pergunta { opacity: 1; }
  .hbt--atraso--entra  ~ .iponte__pergunta { animation: none; }
  .hbt--atraso--espera ~ .iprob__pergunta { opacity: 1; }
  .hbt--atraso--entra  ~ .iprob__pergunta { animation: none; }
}

/* ==========================================================================
   O CARREGANDO ENTRE AS DUAS METADES DA FRASE

   "A competência técnica é alta" chega na hora. Aí aparece o rodinha de
   carregamento, aquele de doze traços do Mac, e ele gira. A página fica
   esperando a segunda metade da frase carregar.

   É a coisa mais literal que dá pra fazer: a fala está processando. E a
   espera que a pessoa sente lendo é a mesma que ela sente na call.
   ========================================================================== */




/* o item do menu que leva pro treinamento online: é a outra oferta, então
   ganha um traço embaixo pra não se confundir com âncora da própria página */
.site-header--venda .site-nav a.nav-curso {
  position: relative;
  color: var(--royal);
  font-weight: 700;
}
.site-header--venda .site-nav a.nav-curso::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--electric);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
.site-header--venda .site-nav a.nav-curso:hover::after,
.site-header--venda .site-nav a.nav-curso:focus-visible::after { transform: scaleX(1); }

/* ---- o dado dentro do card ---------------------------------------------- */
/* Fica depois da cena, nunca antes: a pessoa reconhece primeiro, e aí o
   número confirma. Fonte sempre visível, com ano. Fonte sem data é quem
   está escondendo alguma coisa. */

.iprob__dado {
  margin-top: clamp(16px, 1.8vw, 22px);
  padding: clamp(12px, 1.4vw, 16px) clamp(13px, 1.5vw, 18px);
  border-left: 2px solid var(--orange);
  border-radius: 0 3px 3px 0;
  background: rgba(35, 35, 80, .04);
}
.iprob__dado-txt {
  margin: 0;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: -.005em;
  color: var(--grey-1);
}
.iprob__dado-txt b { color: var(--electric); font-weight: 700; }
.iprob__fonte {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--orange);
}
.iprob__fonte-sinal { margin-right: .55em; color: var(--grey-2); font-weight: 700; }

/* a regra .inst-claro .iprob__card p pinta todo parágrafo do card de cinza.
   Estas duas trazem de volta a cor certa do bloco de pesquisa. */
.inst-claro .iprob__card p.iprob__fonte { color: var(--orange); }
.inst-claro .iprob__card p.iprob__dado-txt { color: var(--grey-1); }

/* ==========================================================================
   "BRIDGE THE GAP" COM O GAP DENTRO DA FRASE

   A frase começa partida: "Bridge the" de um lado, "gap." do outro, e um
   vão aberto no meio. Dentro do vão aparece a medida do problema, 52
   pontos, com os traços de cota como num desenho técnico. Aí a ponte se
   constrói e o vão fecha: a frase vira "Bridge the gap." inteira.

   A frase faz o que ela diz. Antes de ser lida, ela é vista.
   ========================================================================== */

.bgap {
  --vao: clamp(2.6em, 7vw, 5.2em);
  margin: 0;
  color: var(--white);
  font-size: clamp(2.1rem, 1rem + 3.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  white-space: nowrap;
}
.bgap__a, .bgap__b { display: inline-block; vertical-align: baseline; }

.bgap__vao {
  position: relative;
  display: inline-block;
  width: .3em;
  height: 1em;
  vertical-align: baseline;
}

/* a cota: os dois traços verticais e a medida no meio */
.bgap__medida {
  position: absolute;
  left: 50%;
  bottom: 118%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .26em;
  font-weight: 600;
  letter-spacing: .04em;
  color: #9a9ac4;
  white-space: nowrap;
  opacity: 0;
}
.bgap__medida::before,
.bgap__medida::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.1em;
  height: 1px;
  background: currentColor;
}
.bgap__medida::before { right: calc(100% + .5em); }
.bgap__medida::after  { left: calc(100% + .5em); }

/* a ponte que atravessa o vão */
.bgap__traco {
  position: absolute;
  left: 0; right: 0;
  bottom: .08em;
  height: .09em;
  background: var(--electric);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- a construção ------------------------------------------------------- */

.bgap--espera { visibility: hidden; }

.bgap--abre .bgap__vao   { animation: bgap-vao 3.5s cubic-bezier(.4,0,.2,1) both; }
.bgap--abre .bgap__medida { animation: bgap-medida 3.5s ease both; }
.bgap--abre .bgap__traco { animation: bgap-traco 3.5s cubic-bezier(.35,0,.2,1) both; }
.bgap--abre .bgap__a     { animation: bgap-palavra .5s ease-out both; }
.bgap--abre .bgap__b     { animation: bgap-palavra .5s ease-out .12s both; }

@keyframes bgap-palavra {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* o vão abre, fica aberto o tempo da medida, e fecha */
@keyframes bgap-vao {
  0%, 8%   { width: .3em; }
  22%, 72% { width: var(--vao); }
  100%     { width: .3em; }
}
/* a medida aparece com o vão e sai antes dele fechar */
@keyframes bgap-medida {
  0%, 22%  { opacity: 0; }
  32%, 62% { opacity: 1; }
  72%, 100% { opacity: 0; }
}
/* a ponte atravessa o vão aberto e fica */
@keyframes bgap-traco {
  0%, 26%  { transform: scaleX(0); }
  44%, 100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bgap--espera { visibility: visible; }
  .bgap--abre .bgap__vao, .bgap--abre .bgap__medida,
  .bgap--abre .bgap__traco, .bgap--abre .bgap__a,
  .bgap--abre .bgap__b { animation: none; }
  .bgap__traco { transform: scaleX(1); }
  .bgap__medida { opacity: 0; }
}

/* a nota com a fonte do dado, embaixo do título */
.iponte__nota {
  margin: clamp(18px, 2.4vw, 30px) 0 0;
  color: #b8b8d8;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.6;
}
.iponte__nota b { color: var(--white); font-weight: 800; }
.iponte__fonte {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--orange);
}
.iponte__fonte-sinal { margin-right: .55em; color: #8a8ab0; font-weight: 700; }

/* O MESMO TÍTULO NO FECHO DA PÁGINA
   Ele reusa a peça da dobra de cima: o vão que abre, o traço que atravessa
   e o ponto elétrico no fim. Só o corpo é o da dobra de contato, e o vão é
   menor porque a primeira metade aqui tem três palavras em vez de duas. */
.bgap--cta {
  --vao: clamp(1.8em, 5vw, 3.4em);
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.08;
}

@media (max-width: 520px) {
  .bgap { white-space: normal; }
  .bgap__medida { font-size: .3em; }
}
/* a frase do fecho é mais comprida, então ela precisa poder quebrar antes */
@media (max-width: 760px) { .bgap--cta { white-space: normal; } }

/* ==========================================================================
   A PERGUNTA COM A RODINHA

   A rodinha de carregamento fica girando pra sempre ao lado da pergunta.
   Não é uma animação que termina: é o estado. "Sempre no modo carregando"
   é literalmente o que a peça faz enquanto a pessoa lê.
   ========================================================================== */

.iprob__pergunta {
  display: flex;
  align-items: center;
  gap: .65em;
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-size: clamp(1rem, .92rem + .5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--grey-1);
}

.girando {
  position: relative;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  color: var(--electric);
}
.girando i {
  position: absolute;
  left: 45.5%;
  top: 4%;
  width: 10%;
  height: 27%;
  background: currentColor;
  border-radius: 1.5px;
  transform-origin: 50% 170%;
  animation: traco-gira 1.05s linear infinite;
}
.girando i:nth-child(1)  { transform: rotate(0deg);   animation-delay: 0s; }
.girando i:nth-child(2)  { transform: rotate(30deg);  animation-delay: -.9625s; }
.girando i:nth-child(3)  { transform: rotate(60deg);  animation-delay: -.875s; }
.girando i:nth-child(4)  { transform: rotate(90deg);  animation-delay: -.7875s; }
.girando i:nth-child(5)  { transform: rotate(120deg); animation-delay: -.70s; }
.girando i:nth-child(6)  { transform: rotate(150deg); animation-delay: -.6125s; }
.girando i:nth-child(7)  { transform: rotate(180deg); animation-delay: -.525s; }
.girando i:nth-child(8)  { transform: rotate(210deg); animation-delay: -.4375s; }
.girando i:nth-child(9)  { transform: rotate(240deg); animation-delay: -.35s; }
.girando i:nth-child(10) { transform: rotate(270deg); animation-delay: -.2625s; }
.girando i:nth-child(11) { transform: rotate(300deg); animation-delay: -.175s; }
.girando i:nth-child(12) { transform: rotate(330deg); animation-delay: -.0875s; }

/* o traço aceso é o que "gira": cada um acende e apaga com um atraso */
@keyframes traco-gira {
  0%   { opacity: 1; }
  100% { opacity: .14; }
}

@media (prefers-reduced-motion: reduce) {
  .girando i { animation: none; opacity: .5; }
  .girando i:nth-child(1) { opacity: 1; }
}

/* a palavra "carregando" pisca no mesmo compasso da rodinha: as duas estão
   no mesmo estado, esperando uma coisa que não chega */
.carregando {
  color: var(--electric);
  font-weight: 800;
  animation: pulsa-carregando 1.05s ease-in-out infinite;
}
@keyframes pulsa-carregando {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .carregando { animation: none; }
}

/* ==========================================================================
   A FAIXA DE CUSTO EM HORAS

   Vem depois dos quatro cards, nunca antes. A ordem importa: primeiro a
   pessoa se reconhece na cena, depois ela vê a conta. Número grande,
   explicação pequena embaixo, fonte em mono. Cada número carrega a
   própria fonte porque vêm de dois estudos diferentes, e misturar fonte
   numa nota só no pé seria desonesto.

   Fundo claro de propósito: a seção da ponte, logo depois, é navy cheia.
   Dois blocos escuros seguidos cansam a leitura.
   ========================================================================== */

.icusto {
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(24px, 3vw, 38px) clamp(20px, 3vw, 40px);
  border: 1px solid rgba(35, 35, 80, .12);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  background: #fbfbfe;
}

.icusto__chapeu {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--grey-2);
}
.icusto__sinal { color: var(--orange); font-weight: 700; margin-right: .4em; }

/* ---- as três faixas de dado --------------------------------------------- */
/* Três bandas, foto de um lado e o dado do outro, alternando o lado pra não
   virar lista. Fundo branco: a estrutura veio da referência, a estética é a
   da marca. Nenhum número aqui depende de input, então nenhum deles pode
   sair fraco. */

.dados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2px, .4vw, 4px);
  border: 1px solid rgba(35, 35, 80, .12);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(35, 35, 80, .12);
}

.dado {
  display: grid;
  gap: 0;
  background: #fff;
}
@media (min-width: 860px) {
  /* 60% da medida antiga, que era clamp(220px, 27vw, 400px) */
  .dado { grid-template-columns: clamp(132px, 16.2vw, 240px) minmax(0, 1fr); align-items: stretch; }

}

/* quadradas: o recorte vai pro conteúdo, não pro layout. A margem recua a
   foto da borda da banda, e aí o canto redondo tem onde existir */
.dado__foto {
  position: relative;
  margin: clamp(14px, 1.6vw, 22px);
  /* center, não stretch: esticada pela banda, a altura virava largura pelo
     aspect-ratio e a foto saía da coluna */
  align-self: center;
  aspect-ratio: 1;
  border-radius: clamp(12px, 1.2vw, 18px);
  overflow: hidden;
}
@media (max-width: 859px) { .dado__foto { aspect-ratio: 16 / 9; } }
.dado__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dado__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 14px);
  padding: clamp(24px, 3vw, 42px) clamp(22px, 2.8vw, 40px);
}

.dado__num {
  margin: 0;
  font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.625rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--electric);
}
.dado__num b { font-weight: 800; color: var(--royal); font-variant-numeric: tabular-nums; }

/* a unidade vive na mesma linha do número e no mesmo tamanho: o título é
   uma frase só. Sem nowrap, porque no tamanho cheio ela precisa poder
   quebrar em vez de estourar a coluna. */
.dado__unid {
  display: inline;
  /* sem margem: o espaço entre "dias" e "por ano" já vem do HTML, e os
     dois juntos abriam um vão duplo */
  font-weight: 500;
  color: var(--electric);
}

/* O SORTEIO
   O número gira antes de cair. O tabular-nums do .dado__num b segura a
   largura, senão a linha inteira treme a cada dígito. */
.dado__num b { display: inline-block; }
.dado__num b.is-girando { color: var(--grey-2); }
.dado__num b.is-caiu { animation: num-cai .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes num-cai { 0% { transform: scale(1.14); } 100% { transform: scale(1); } }
.dado__txt { margin: 0; max-width: 32rem; font-size: var(--t-sm); font-weight: 500; line-height: 1.55; color: var(--grey-1); }

/* a faixa 1: o calendário entra embaixo do número, na largura do texto */
.dado__ano { max-width: 30rem; }
.dado__eixo {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.dado__grade { display: grid; grid-template-columns: repeat(45, minmax(0, 1fr)); gap: 2px; }
.dado__col { display: grid; gap: 1px; }
.dado__c {
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgba(35, 35, 80, .22);
  border-radius: 1px;
}
/* o dia perdido nasce igual aos outros e só depois acende, na sua vez */
.dado__c.is-perdida {
  transition: background .16s ease, border-color .16s ease;
  transition-delay: var(--d, 0s);
}
.grade--acesa .dado__c.is-perdida { border-color: var(--orange); background: var(--orange); }

/* a faixa 3: as duas ondas */
.onda {
  margin-top: clamp(2px, .5vw, 6px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(4px, .8vw, 8px);
}
.onda__rot {
  margin: 0;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--grey-2);
  white-space: nowrap;
}
.onda__barras { display: flex; align-items: center; gap: 2px; height: 26px; }
.onda__barras i {
  display: block;
  flex: none;
  width: 3px;
  height: var(--h, 50%);
  border-radius: 2px;
  background: rgba(35, 35, 80, .26);
  transform-origin: center;
}
.onda__barras--cheia i { background: var(--orange); }
/* a altura é o dado, o scaleY é a vida: as duas animam sem se atrapalhar */
.onda--viva .onda__barras i {
  animation: onda-fala var(--d, 1.2s) ease-in-out infinite alternate;
  animation-delay: var(--ad, 0s);
}
@keyframes onda-fala { from { transform: scaleY(.5); } to { transform: scaleY(1); } }

.gente { display: flex; gap: 8px; margin: 0; }
/* todos nascem em contorno; o fill e o stroke animam juntos, porque
   `stroke: none` não tem como transicionar */
.gente__fig {
  width: auto;
  height: clamp(28px, 3.2vw, 36px);
  fill: transparent;
  stroke: rgba(35, 35, 80, .3);
  stroke-width: 2;
  transition: fill .4s ease, stroke .4s ease;
  transition-delay: var(--d, 0s);
}
.gente--acesa .gente__fig.is-cheia { fill: var(--orange); stroke: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  .dado__num b.is-caiu { animation: none; }
  .gente__fig.is-cheia { fill: var(--orange); stroke: var(--orange); transition: none; }
  .dado__c.is-perdida { border-color: var(--orange); background: var(--orange); transition: none; }
  .onda__barras i { animation: none; transform: none; }
}

.icusto__fonte {
  margin: 0;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--orange);
}
.icusto__fonte .icusto__sinal { margin-right: .55em; color: var(--grey-2); font-weight: 700; }


/* ==========================================================================
   DOBRA 03 . QUEM TREINA O SEU TIME

   Antes eram três pessoas com foto e bio. Mas o atendimento pra empresa é
   feito pela equipe, não pelos três sócios, então prometer rosto era
   prometer o que a gente nem sempre entrega. Agora a dobra responde outra
   pergunta, que é a que o comprador corporativo realmente faz: em cima de
   que esse pessoal foi treinado?

   Quatro frentes, numeradas, do lado de uma foto que mostra o método em vez
   de mostrar gente sorrindo.
   ========================================================================== */

.iequipe { padding: clamp(56px, 7vw, 104px) 0; background: #fff; }

/* o .hb__bt nasce branco, pra viver em seção escura. Aqui o fundo é claro. */
.iequipe .hb__bt { color: var(--navy); }
.iequipe .hb__chapeu { color: var(--grey-2); }

.iequipe__head { max-width: 46rem; }
.iequipe__linha {
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-size: clamp(1rem, .94rem + .4vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--grey-1);
}
.iequipe__linha b { color: var(--navy); font-weight: 800; }

.iequipe__corpo {
  margin-top: clamp(34px, 4.5vw, 64px);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 900px) {
  .iequipe__corpo { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); align-items: start; }
}

.iequipe__foto { margin: 0; }
.iequipe__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* a legenda virou bloco de código: // na frente, cursor piscando no fim.
   A margem do .chapeu-code--barra fica embaixo; aqui ela precisa ser em
   cima, porque a legenda vem depois da foto. */
.iequipe__foto figcaption {
  margin: 12px 0 0;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--grey-2);
}
.iequipe__foto figcaption .chapeu-code__txt { color: var(--grey-1); }

.iequipe__pilares {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
}
.iequipe__pilares li {
  padding-left: clamp(16px, 2vw, 22px);
  border-left: 2px solid var(--orange);
}

.iequipe__n {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--orange);
}
.iequipe__pilares h3 {
  margin: 0 0 8px;
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--navy);
}
.iequipe__pilares li > p:last-child {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.6;
  color: var(--grey-1);
}

/* ==========================================================================
   DOBRA 04 . FORMATOS

   Antes eram três cards iguais, com foto de banco de imagens em cima. Agora
   são bandas alternadas, no mesmo desenho do deck: a pessoa recortada de um
   lado, o colchete da marca atrás dela, e o texto do outro. A alternância
   esquerda/direita é o que faz a seção não cansar, porque são quatro ofertas
   seguidas.

   O preço fica na página, de propósito. Quem tem budget acelera, quem não
   tem se autoexclui antes de ocupar a agenda de ninguém. O tratamento é
   tipográfico, não é selo: rótulo pequeno em mono, número grande em navy,
   unidade embaixo em cinza. Preço gritado parece desconto.
   ========================================================================== */

.iform { padding: clamp(56px, 7vw, 104px) 0; background: #fff; }
.iform .hb__bt { color: var(--navy); }
.iform .hb__chapeu { color: var(--grey-2); }

/* a seção antiga era navy e centralizada. Agora é branca e alinhada à
   esquerda, como as outras dobras. */
.iform__head { max-width: 46rem; text-align: left; margin-bottom: 0; }
.iform__linha {
  margin: clamp(16px, 2vw, 24px) 0 0;
  max-width: 44rem;
  font-size: clamp(1rem, .94rem + .4vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--grey-1);
}

.iform__lista {
  list-style: none;
  margin: clamp(34px, 4.5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  /* explícito, senão a regra antiga de três colunas, lá em cima, volta */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 76px);
}
@media (min-width: 900px) { .iform__lista { grid-template-columns: minmax(0, 1fr); } }

/* ---- a banda ------------------------------------------------------------ */

.fb, .fsolo {
  position: relative;
  display: grid;
  gap: clamp(26px, 3.4vw, 48px);
  align-items: center;
}
@media (min-width: 880px) {
  .fb, .fsolo { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
  .fb--a .fb__texto { order: 2; }
  .fb--a .fb__foto  { order: 1; }
}

.fb__n {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.fb__n span {
  display: inline-grid;
  place-items: center;
  min-width: 2em;
  padding: .25em .5em;
  background: var(--electric);
  color: var(--white);
  font-weight: 700;
  letter-spacing: .04em;
}

.fb__titulo {
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.375rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--electric);
}
/* o destaque navy do deck: caixa escura atrás da palavra-chave */
.mark--navy {
  display: inline;
  padding: .04em .22em;
  background: var(--navy);
  color: var(--white);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.fb__itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fb__itens li {
  position: relative;
  padding-left: 1.5em;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.55;
  color: var(--grey-1);
}
.fb__itens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .6em;
  height: .6em;
  background: var(--orange);
}

/* ---- o pé: preço e botão ------------------------------------------------ */

.fb__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(22px, 2.8vw, 32px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid rgba(35, 35, 80, .12);
}
.fb__preco { margin: 0; display: grid; gap: 2px; }
.fb__preco-rot {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.fb__preco-n {
  font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.fb__preco-un { font-size: var(--t-xs); font-weight: 500; color: var(--grey-1); }

.fb__btn {
  display: inline-flex;
  align-items: center;
  padding: .85em 1.5em;
  /* a borda transparente reserva o mesmo espaço da variante de contorno:
     sem ela o botão sólido fica 4px mais baixo e desalinha os pés do par */
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
.fb__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.fb__btn--linha {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.fb__btn--linha:hover { background: var(--navy); color: var(--white); }

/* ---- a foto e o colchete ------------------------------------------------ */

.fb__foto, .fsolo__foto {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: clamp(260px, 30vw, 420px);
}
.fb__foto img, .fsolo__foto img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: clamp(260px, 30vw, 420px);
  height: auto;
}

/* o colchete da marca: barra embaixo, lateral à direita e o rabinho */
.fb__balao {
  position: absolute;
  inset: 16% 4% 20% 14%;
  border: 0 solid var(--electric);
  border-right-width: 12px;
  border-bottom-width: 12px;
}
.fb__balao::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: -12px;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 19px solid var(--electric);
}
/* nas bandas com a foto à esquerda o colchete espelha */
.fb--a .fb__balao {
  inset: 16% 14% 20% 4%;
  border-right-width: 0;
  border-left-width: 12px;
}
.fb--a .fb__balao::after { right: auto; left: 18%; }

/* ==========================================================================
   OS DOIS TRILHOS DE FORMATO

   Antes eram quatro cards em fila, numerados 01 a 03 mais um "+". A fila
   fingia uma ordem que não existe e obrigava a pessoa a ler os quatro pra
   descobrir qual era ela. Agora ela se identifica primeiro, individual ou
   time, e só depois escolhe a profundidade. Dentro de cada trilho a leitura
   vai da porta de entrada pro mais fundo, da esquerda pra direita.
   ========================================================================== */

.ftrilho { margin-top: clamp(34px, 4.5vw, 60px); }
.ftrilho + .ftrilho { margin-top: clamp(48px, 6vw, 84px); }

/* o rótulo do trilho usa o mesmo bloco de código do resto da página */
.ftrilho .chapeu-code--barra {
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding-bottom: clamp(10px, 1.2vw, 14px);
  border-bottom: 1px solid rgba(35, 35, 80, .14);
}

.ftrilho__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  align-items: stretch;
}
@media (min-width: 820px) {
  .ftrilho__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fcard {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid rgba(35, 35, 80, .12);
  border-radius: 8px;
  background: #fff;
}
/* o pé desce pro fim do card mesmo quando a lista de itens é mais curta,
   pra que os dois preços do trilho fiquem na mesma linha */
.fcard__texto { display: flex; flex-direction: column; flex: 1; }
.fcard .fb__pe {
  margin-top: auto;
  /* empilhado sempre: largura de preço e de botão variam por card, e com
     wrap dois empilhavam e dois não, desalinhando os pés do trilho */
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 20px);
}

.fcard__foto {
  position: relative;
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* altura fixa, não mínima: as quatro fotos têm proporções diferentes e
     com min-height cada moldura ficava de um tamanho, desalinhando os pés */
  height: clamp(170px, 19vw, 240px);
}
.fcard__foto img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: clamp(170px, 19vw, 240px);
  height: auto;
}
/* o colchete da marca encolhe junto com a moldura */
.fcard .fb__balao {
  inset: 12% 6% 12% 10%;
  border-right-width: 9px;
  border-bottom-width: 9px;
}
.fcard .fb__balao::after {
  right: 16%;
  bottom: -9px;
  border-left-width: 10px;
  border-right-width: 10px;
  border-top-width: 15px;
}

.fcard .fb__titulo {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
}
.fcard__sub {
  margin: 6px 0 clamp(16px, 2vw, 22px);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--grey-2);
}

/* ---- a faixa do treinamento individual ---------------------------------- */

.fsolo {
  margin-top: clamp(40px, 5vw, 76px);
  padding: clamp(28px, 3.6vw, 52px) clamp(24px, 3.2vw, 48px);
  border: 1px solid rgba(35, 35, 80, .12);
  border-radius: 6px;
  background: #fbfbfe;
}
.fsolo__linha {
  margin: 0;
  max-width: 34rem;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.6;
  color: var(--grey-1);
}
.fsolo .fb__balao { border-color: var(--navy); }
.fsolo .fb__balao::after { border-top-color: var(--navy); }

@media (max-width: 879px) {
  .fb__balao { inset: 10% 2% 10% 6%; border-right-width: 9px; border-bottom-width: 9px; }
  .fb--a .fb__balao { inset: 10% 6% 10% 2%; border-left-width: 9px; }
}

/* ==========================================================================
   O AUTODIAGNÓSTICO

   Vem depois de Quem treina e antes de Formatos, de propósito. É a dobradiça
   da página: quem marcou três de cinco acabou de admitir o problema pra si
   mesmo, e é essa pessoa que lê a oferta inteira logo abaixo.

   As cinco cenas são diferentes das dos cards da dobra 02 de propósito. Se
   fossem as mesmas, seria repetição a duas dobras de distância.

   O veredito é texto, não número calculado: nada aqui pode gerar um
   resultado fraco, e nada aqui promete resultado nenhum.
   ========================================================================== */

/* o link do botão do hero cai um pouco acima da dobra, pra ela entrar
   inteira em vez de encostar no topo embaixo do cabeçalho fixo */
#contato { scroll-margin-top: clamp(176px, 20vh, 220px); }

.iquiz { padding: clamp(50px, 6vw, 88px) 0; background: #fafafa; }
/* dentro da dobra 01 ele perde o fundo e o respiro de baixo: quem dá o
   fundo e fecha a dobra é o bloco do custo, logo abaixo */
.iquiz--dentro {
  /* sem recuo lateral: a caixa ocupa a mesma largura da grade de cards
     logo acima, ou seja os dois cards mais o vão entre eles */
  padding: clamp(40px, 5vw, 72px) 0 0;
  background: none;
}

.iquiz__caixa {
  padding: clamp(26px, 3.4vw, 50px);
  border: 1px solid rgba(35, 35, 80, .12);
  border-left: 3px solid var(--electric);
  border-radius: 4px;
  background: #fff;
}
.iquiz .hb__bt { margin: 0; color: var(--navy); }
.iquiz__texto { max-width: 42rem; }
.iquiz__linha {
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.6;
  color: var(--grey-1);
}

.quiz__lista {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.quiz__item label {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 16px);
  padding: clamp(13px, 1.5vw, 17px) clamp(12px, 1.4vw, 16px);
  border-radius: 3px;
  cursor: pointer;
  transition: background .16s ease;
}
.quiz__item label:hover { background: rgba(35, 35, 80, .035); }
.quiz__item input { position: absolute; opacity: 0; width: 0; height: 0; }

.quiz__marca {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: .1em;
  border: 2px solid rgba(35, 35, 80, .28);
  border-radius: 3px;
  background: #fff;
  transition: background .16s ease, border-color .16s ease;
}
.quiz__item input:checked + .quiz__marca { border-color: var(--orange); background: var(--orange); }
/* o tique: um L de borda girado 45 graus, que é o jeito mais limpo de
   desenhar um visto sem ícone nenhum */
.quiz__item input:checked + .quiz__marca::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.quiz__item input:focus-visible + .quiz__marca { outline: 2px solid var(--electric); outline-offset: 2px; }

.quiz__txt {
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--grey-1);
}
.quiz__item input:checked ~ .quiz__txt { color: var(--navy); font-weight: 700; }

.quiz__saida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(22px, 2.8vw, 32px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(35, 35, 80, .12);
}
.quiz__placar {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .35em;
  font-variant-numeric: tabular-nums;
}
.quiz__placar b {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--grey-2);
  transition: color .2s ease;
}
.is-cheio .quiz__placar b { color: var(--orange); }
.quiz__placar span {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--grey-2);
}
/* a mesma mono dos chapéus de código: o veredito é saída de máquina, não
   mais uma frase do texto corrido */
.quiz__veredito {
  flex: 1 1 18rem;
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(.8125rem, .78rem + .28vw, .9375rem);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.65;
  color: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .quiz__item label, .quiz__marca, .quiz__placar b { transition: none; }
}

/* ---- a foto do card de custo -------------------------------------------- */
/* A dobra estava só com número e quadradinho. Uma pessoa real, no gesto de
   quem precisa pedir pra repetir, dá rosto ao que os 42 dias significam.
   Usa o mesmo colchete da marca dos Formatos, pra não inventar outro
   vocabulário visual. */

.icusto__linha { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 820px) {
  .icusto__linha { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); align-items: center; }
}
.icusto__col { min-width: 0; }

.icusto__foto {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.icusto__foto img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: clamp(200px, 22vw, 300px);
  height: auto;
}

/* o chapéu da dobra de custo usa o mesmo chapéu-código das outras, mas com
   // no lugar do número, e o // em laranja porque é a marca da seção */
.chapeu-code--barra { margin-bottom: clamp(18px, 2.2vw, 28px); }
.chapeu-code--barra .chapeu-code__sinal { color: var(--orange); letter-spacing: -.05em; }

/* os números das três faixas em laranja, a mesma cor dos quadradinhos, das
   ondas e das silhuetas que eles resumem. Número e marca na mesma cor é o
   que faz os dois serem lidos como a mesma informação. */
.dado__num b { color: var(--orange); }

/* o fecho da frase dos 42 dias: o que o número significa, em navy */
.dado__txt b { color: var(--navy); font-weight: 800; }

/* o ponto final de "gap." em elétrico, como no deck */
.bgap__ponto { font-style: normal; color: var(--electric); }

/* ---- a abertura do miolo da ponte -------------------------------------- */
/* Empilhado: a constatação, a pergunta, a animação. Nessa ordem porque é a
   ordem em que a pessoa precisa entender: o que acontece, se acontece com
   ela, e o que exatamente se perde no caminho. */

/* a abertura inteira centralizada, no mesmo eixo da ponte que vem abaixo */
.iponte .hb__bt {
  margin: 0;
  text-align: center;
  color: var(--navy);
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2.0625rem);
  line-height: 1.16;
}

/* mesmo tamanho da frase de cima: as duas são a abertura, e uma menor que
   a outra fazia a pergunta parecer legenda */
/* o seletor precisa da classe do pai porque `.iponte__txt p` zera margem de
   todo parágrafo ali dentro e ganharia desta regra na especificidade */
.iponte__txt .iponte__pergunta {
  /* a rodinha fica em cima da frase, não do lado: assim ela é lida como o
     estado da coisa toda, e não como um marcador de item */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5em;
  margin: clamp(50px, 7.5vw, 96px) 0 0;
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2.0625rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--grey-1);
}
/* a pergunta entra depois da frase do lado, igual era antes */
.hbt--atraso--espera ~ .iponte__pergunta { opacity: 0; }
.hbt--atraso--entra  ~ .iponte__pergunta { animation: atraso-chega .5s cubic-bezier(.3,0,.2,1) 1.35s both; }

/* centralizado e em duas linhas, logo abaixo da ponte que acabou de ser
   construída: a frase vira legenda do desenho, não mais um parágrafo solto */
.iponte__vao {
  max-width: none;
  margin: 0 auto clamp(30px, 4vw, 46px);
  text-align: center;
  font-size: clamp(1.0625rem, .98rem + .6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--grey-1);
}

/* ---- as três frentes de treino ------------------------------------------ */

/* as três coisas saíram de dentro da barra elétrica e viraram bloco
   próprio: centralizado na dobra, com o texto encostado à esquerda */
.iponte__tres-bloco {
  max-width: min(100%, 64rem);
  margin: clamp(30px, 4vw, 48px) auto 0;
  text-align: center;
}
/* mesmo corpo da pergunta do topo da dobra: as duas são a mesma voz, uma
   abrindo e a outra fechando */
.iponte__txt .iponte__tres-bloco p {
  margin: 0 auto;
  /* duas linhas parelhas em vez de uma órfã no fim */
  text-wrap: balance;
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2.0625rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--grey-1);
}
.iponte__txt .iponte__foco b { color: var(--navy); font-weight: 700; }
.iponte__tres {
  list-style: none;
  margin: clamp(20px, 2.6vw, 32px) 0 0;
  padding: 0;
  counter-reset: tres;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  /* o vão precisa ser maior que o crescimento do hover (7% da pílula vira
     uns 10px de cada lado), senão a que cresce encosta na vizinha */
  gap: clamp(16px, 2vw, 26px);
  text-align: left;
}
.iponte__tres li {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .45em 1em .45em .5em;
  border: 1px solid rgba(35, 35, 80, .16);
  border-radius: 999px;
  background: #fff;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--navy);
}
/* um zoom curto no hover: a pílula cresce no próprio eixo, então as
   vizinhas não se mexem */
.iponte__tres li {
  transition: transform .18s cubic-bezier(.2, .8, .3, 1),
              border-color .18s ease,
              box-shadow .18s ease;
}
/* sem zoom no hover: as três pílulas são leitura, não botão, e o salto de
   escala sugeria que dava pra clicar */
.iponte__tres li:hover {
  border-color: rgba(75, 75, 255, .45);
  box-shadow: 0 8px 20px rgba(35, 35, 80, .1);
}
@media (prefers-reduced-motion: reduce) {
  .iponte__tres li { transition: none; }
  .iponte__tres li:hover { transform: none; }
}

.iponte__tres li::before {
  counter-increment: tres;
  content: counter(tres);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--electric);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
}

/* ==========================================================================
   A ONDA QUE ATRAVESSA

   O desenho anterior mostrava que existe uma distância. Este mostra o que se
   perde na travessia, que é outra coisa e é a que importa.

   Esquerda: a onda cheia, o que a pessoa quer dizer. Direita: a mesma onda,
   só que com um terço das barras zeradas e o resto em 30% da altura. Quando
   a ponte se desenha e o pulso atravessa, a onda da direita cresce até ficar
   idêntica à da esquerda.

   É a mesma linguagem de onda da faixa "3x menos", de propósito: duas peças
   em dobras diferentes falando a mesma língua visual.
   ========================================================================== */

.opon {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: center;
}
@media (min-width: 760px) {
  .opon { grid-template-columns: minmax(0, 1fr) clamp(70px, 10vw, 150px) minmax(0, 1fr); }
}

.opon__rot {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey-2);
}
/* cada metade se vira pro vão: a da esquerda termina nele, a da direita
   começa nele. Assim a ponte liga duas ondas em vez de boiar no meio. */
.opon__lado { text-align: right; }
.opon__lado--b { text-align: left; }

.opon__onda {
  display: flex;
  align-items: center;
  gap: 2px;
  height: clamp(44px, 5.5vw, 68px);
}
.opon__onda { justify-content: flex-end; }
.opon__lado--b .opon__onda { justify-content: flex-start; }

.opon__onda i {
  display: block;
  flex: 1 1 auto;
  min-width: 2px;
  max-width: 5px;
  border-radius: 2px;
  background: var(--orange);
  height: var(--h);
}
/* o lado que recebe começa picotado e baixo, em cinza */
/* AS DUAS ONDAS FALAM O TEMPO TODO
   Cada barra tem a própria duração e começa num ponto diferente do ciclo,
   então o conjunto cintila como medidor de áudio ao vivo em vez de pulsar
   em bloco. A altura (o quanto chega) é outra coisa, e vive na propriedade
   height: aqui é só o transform, então as duas coisas convivem.

   A barra que está em 0 do lado que recebe continua em 0: escalar zero
   dá zero, e é exatamente o que a gente quer dizer. */
.opon__onda i {
  transform-origin: center;
  animation: opon-fala var(--d, .7s) ease-in-out infinite alternate;
  animation-delay: var(--ad, 0s);
}
@keyframes opon-fala { from { transform: scaleY(.58); } to { transform: scaleY(1); } }

.opon__onda--chega i {
  height: var(--p);
  background: rgba(35, 35, 80, .3);
  transition: height .5s cubic-bezier(.2, .8, .3, 1), background .5s ease;
  transition-delay: 0s;   /* na volta pro estado ruim, tudo cai junto e rápido */
}
.opon--liga .opon__onda--chega i {
  height: var(--h);
  background: var(--orange);
  transition-delay: calc(.86s + var(--i) * 12ms);
}

/* ---- a corda e o pulso ------------------------------------------------- */
/* A linha entre as duas ondas é uma corda esticada, sempre visível. Quando a
   travessia começa, um pulso sai da esquerda e corre até a direita,
   deformando a corda na passagem. O desenho é refeito quadro a quadro em JS,
   porque um pulso de corda é a linha mudando de forma, não um ponto
   deslizando por cima dela. */

.opon__vao { position: relative; }
.opon__corda { display: block; width: 100%; height: 44px; overflow: visible; }
.opon__fio {
  fill: none;
  stroke: var(--electric);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- as legendas: a de baixo troca quando a ponte fecha ----------------- */

.opon__leg {
  position: relative;
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--grey-2);
  min-height: 1.4em;
}
.opon__antes, .opon__depois {
  display: block;
  transition: opacity .4s ease;
}
.opon__depois {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  color: var(--orange);
  font-weight: 600;
}
.opon--liga .opon__antes  { opacity: 0; transition-delay: 1s; }
.opon--liga .opon__depois { opacity: 1; transition-delay: 1.15s; }

@media (prefers-reduced-motion: reduce) {
  .opon__onda--chega i { height: var(--h); background: var(--orange); transition: none; }
  .opon__onda i { animation: none; transform: none; }
  .opon__antes { opacity: 0; }
  .opon__depois { opacity: 1; }
}

/* A ABERTURA DA DOBRA
   A foto entra ao lado do par título mais pergunta. O texto continua
   centralizado dentro da própria coluna: a centralização era uma decisão
   de antes e a foto não precisa desfazer ela. */
.iabre {
  display: grid;
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  margin-bottom: clamp(10px, 1.4vw, 18px);
}
.iabre__foto { margin: 0; display: flex; justify-content: center; }
.iabre__foto img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: clamp(150px, 16vw, 230px);
  height: auto;
}

/* o bloco das larguras vem DEPOIS da regra base de propósito: as duas têm
   a mesma especificidade, então quem ganha é a última */
@media (min-width: 900px) {
  .iabre {
    /* largura fixa na coluna da foto: é ela que define a altura da imagem,
       que é quase quadrada. Com fr a altura ficava refém do texto ao lado. */
    grid-template-columns: minmax(0, 1fr) clamp(330px, 34vw, 495px);
    align-items: stretch;
  }
  /* a foto encosta na borda direita e começa no topo do título. Ela é mais
     alta que a linha de propósito: o excedente derrama pra baixo e a faixa
     navy, que tem z-index maior, cobre o pé dela. */
  .iabre__foto {
    justify-content: flex-end;
    align-items: flex-start;
    overflow: visible;
    /* altura zero pra foto sair da conta da linha: senão ela empurra a
       linha pra baixo junto e nunca alcança a faixa */
    align-self: start;
    height: 0;
  }
  .iabre__foto img {
    max-height: none;
    max-width: 100%;
    height: auto;
    /* os 10% a mais de altura sobem: o pé continua onde estava, dentro da
       faixa, e o teto passa da primeira linha do título */
    margin-top: calc(-1 * clamp(32px, 3.3vw, 48px));
  }
  /* sem respiro embaixo: quem separa daqui pra baixo é a própria faixa */
  .iponte__miolo--topo { padding-bottom: 0; }
}
/* empilhado, a foto já cai depois da pergunta pela ordem do HTML */
@media (max-width: 899px) {
  .iabre__foto img { max-height: 260px; }
}

/* a animação precisa de ar dos dois lados: ela é a pausa entre a pergunta
   e a resposta, não mais uma linha de texto */
.opon { margin: clamp(26px, 3.6vw, 48px) 0 clamp(30px, 4vw, 54px); }

/* ---- os seis ícones da marca, do lado do método ------------------------- */
/* Já existiam em assets/img/icones, usados no site antigo. Aqui eles fazem
   o que o texto diz: as seis frentes que o treino toca. Dois por linha, ao
   lado do bloco, pra não virar uma fileira decorativa. */

.iponte__fundo {
  display: grid;
  gap: clamp(26px, 3.4vw, 50px);
  align-items: start;
}
/* meio a meio: aí a barra elétrica do método cai no eixo central da dobra.
   A ordem no HTML continua texto-primeiro: empilhado no celular, o argumento
   vem antes da ilustração. */
@media (min-width: 900px) {
  .iponte__fundo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: clamp(26px, 3.2vw, 38px);
    /* estica: com o recuo do chapéu em cima, a caixa do texto passa a ter
       exatamente a altura da malha de ícones, e a barra elétrica acompanha */
    align-items: stretch;
  }
  .iponte__fundo .iponte__metodo {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .iponte__fundo .iconas-bloco  { order: 1; }
  /* o texto arranca na linha de cima da malha, não na do chapéu: a conta é
     a altura do chapéu (corpo x entrelinha) mais a margem dele */
  .iponte__fundo .iponte__metodo {
    order: 2;
    margin-top: calc(clamp(.72rem, .66rem + .2vw, .8125rem) * 1.2 + clamp(18px, 2.2vw, 28px));
  }
}

/* o seletor precisa do pai: `.iponte__txt p` tem especificidade maior e
   estava reescrevendo o tamanho do rótulo */
/* empilhado, o bloco acompanha o recuo do texto do método; na coluna
   lateral ele usa a largura toda da coluna */
@media (max-width: 899px) {
  .iconas-bloco { max-width: 42rem; padding-left: clamp(16px, 2vw, 24px); }
}
/* o seletor precisa do pai: `.iponte__txt p` zera a margem de qualquer p */
.iponte__fundo .chapeu-code--barra {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: clamp(.72rem, .66rem + .2vw, .8125rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--royal);
}

/* o gap de 1px sobre um fundo cinza vira a malha: uma linha só entre as
   células, nunca duas encostadas */
.iconas {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ic;
  display: grid;
  /* fluxo por coluna: 01 em cima, 02 embaixo, 03 em cima, 04 embaixo... */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 1px;
  background: rgba(35, 35, 80, .13);
  border: 1px solid rgba(35, 35, 80, .13);
  border-radius: 14px;
  overflow: hidden;
}
/* no celular duas colunas, pra legenda não quebrar em três linhas */
@media (max-width: 559px) {
  /* no celular o fluxo volta por linha: em coluna, a leitura daria
     01-04 / 02-05 / 03-06, que não é ordem nenhuma */
  .iconas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}
.iconas li {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 10px;
  padding: clamp(18px, 2.2vw, 24px) 8px clamp(14px, 1.8vw, 18px);
  opacity: 0;
  transform: translateY(14px) scale(.94);
  transition: opacity .45s ease, transform .55s cubic-bezier(.18, .9, .25, 1.08);
  transition-delay: calc(var(--n, 1) * 70ms);
}
.iconas-bloco.is-in .iconas li { opacity: 1; transform: none; }

/* o ícone chega aceso em azul elétrico e esfria pro cinza de repouso.
   Sem fill-mode: no fim da animação ele volta pro CSS normal, e aí o
   hover continua funcionando. */
.iconas-bloco.is-in .iconas__ic {
  animation: ic-acende .95s cubic-bezier(.2, .8, .3, 1);
  animation-delay: calc(var(--n, 1) * 70ms + .08s);
}
@keyframes ic-acende {
  0%   { background: var(--electric); transform: scale(.78); }
  40%  { background: var(--electric); transform: scale(1.08); }
  100% { background: var(--grey-1);   transform: scale(1); }
}

/* o número entra depois do ícone, deslizando da esquerda */
.iconas-bloco.is-in .iconas li::before {
  animation: num-entra .45s ease-out both;
  animation-delay: calc(var(--n, 1) * 70ms + .3s);
}
@keyframes num-entra { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
.iconas li::before {
  counter-increment: ic;
  content: "0" counter(ic);
  position: absolute;
  top: 7px;
  left: 9px;
  font-family: var(--mono);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--orange);
}

/* os svg são de uma cor só, então dá pra usar como máscara e pintar com a
   cor da marca em vez de deixar um png preto desbotado */
.iconas__ic {
  display: block;
  width: clamp(40px, 11vw, 52px);
  aspect-ratio: 1;
  background: var(--grey-1);
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
  transition: background .25s ease, transform .3s cubic-bezier(.2, .8, .3, 1);
}
.iconas li:hover .iconas__ic { background: var(--electric); transform: translateY(-3px) scale(1.06); }

.i-voz     { --ic: url(../img/icones/voz.svg); }
.i-ouvido  { --ic: url(../img/icones/ouvido.svg); }
.i-mente   { --ic: url(../img/icones/mente.svg); }
.i-encaixe { --ic: url(../img/icones/encaixe.svg); }
.i-fala    { --ic: url(../img/icones/fala.svg); }
.i-foco    { --ic: url(../img/icones/foco.svg); }

.iconas span {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--grey-1);
}

@media (prefers-reduced-motion: reduce) {
  .iconas li { opacity: 1; transform: none; transition: none; }
  .iconas li:hover .iconas__ic { transform: none; }
  .iconas-bloco.is-in .iconas__ic,
  .iconas-bloco.is-in .iconas li::before { animation: none; }
}

.iponte__vao-b { display: block; }

/* ==========================================================================
   O TÍTULO DE FORMATOS NA VOZ DA ABERTURA

   "Do quick win ao acompanhamento contínuo." usa o mesmo corpo e a mesma cor
   de "Sente que a comunicação em inglês está sempre no modo carregando?".
   Vai no fim do arquivo de propósito: `.inst-claro .iform .hb__bt` pinta o
   título de navy com especificidade 0,3,0, então a regra que corrige a cor
   precisa empatar nisso E vir depois.
   ========================================================================== */

.iform__head .hb__bt,
.inst-claro .iform__head .hb__bt {
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2.0625rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--grey-1);
}

/* ==========================================================================
   AS FOTOS DOS FORMATOS, MAIORES E SEM O COLCHETE

   O colchete do balão disputava atenção com a foto num espaço pequeno. Sem
   ele, a foto pode crescer e ocupar a largura inteira do card.
   ========================================================================== */

.fcard__foto {
  /* sangra até a borda do card: a foto é recorte, então o branco das laterais
     some e ela ganha os 2x do padding de largura */
  margin-inline: calc(-1 * clamp(22px, 2.6vw, 34px));
  margin-bottom: clamp(16px, 2vw, 24px);
  height: clamp(210px, 25vw, 330px);
}
.fcard__foto img {
  max-height: clamp(210px, 25vw, 330px);
  /* a altura é quem manda: assim as quatro chegam juntas na mesma linha de
     base, e a largura sai da proporção de cada arquivo */
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: center bottom;
}

/* ==========================================================================
   O FAQ: cada pergunta é um botão

   Antes eram linhas de texto com o triângulo do navegador. Agora é uma
   caixa clicável com o sinal de mais à direita, que vira × quando abre, e
   azul elétrico no hover.
   ========================================================================== */

.faq-sec .faq {
  display: block;
  margin: 0 0 10px;
  border: 1px solid rgba(35, 35, 80, .14);
  background: var(--white);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-sec .faq summary {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(14px, 1.6vw, 19px) clamp(15px, 1.8vw, 22px);
  cursor: pointer;
  list-style: none;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  transition: color .18s ease, background-color .18s ease;
}
.faq-sec .faq summary::-webkit-details-marker { display: none; }
.faq-sec .faq summary::marker { content: ""; }

/* o quadradinho com o sinal de mais, do lado direito */
.faq-sec .faq summary::after {
  content: "+";
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: clamp(26px, 2.6vw, 31px);
  height: clamp(26px, 2.6vw, 31px);
  border: 1px solid rgba(35, 35, 80, .22);
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  color: var(--grey-1);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              transform .25s cubic-bezier(.2, .8, .3, 1);
}

.faq-sec .faq:hover { border-color: var(--electric); box-shadow: 0 8px 22px rgba(75, 75, 255, .13); }
.faq-sec .faq summary:hover,
.faq-sec .faq summary:focus-visible { color: var(--electric); background-color: rgba(75, 75, 255, .05); }
.faq-sec .faq summary:hover::after,
.faq-sec .faq summary:focus-visible::after {
  background-color: var(--electric);
  border-color: var(--electric);
  color: var(--white);
}

.faq-sec .faq[open] { border-color: rgba(75, 75, 255, .55); }
.faq-sec .faq[open] summary { color: var(--electric); }
.faq-sec .faq[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--electric);
  border-color: var(--electric);
  color: var(--white);
}

.faq-sec .faq__corpo {
  padding: 0 clamp(15px, 1.8vw, 22px) clamp(16px, 1.9vw, 22px);
  border-top: 1px solid rgba(35, 35, 80, .1);
}
.faq-sec .faq__corpo p {
  margin: clamp(13px, 1.5vw, 17px) 0 0;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--grey-1);
}

@media (prefers-reduced-motion: reduce) {
  .faq-sec .faq,
  .faq-sec .faq summary,
  .faq-sec .faq summary::after { transition: none; }
}

/* ==========================================================================
   O SELETOR DE IDIOMA

   Bandeira, código e um menu com as três línguas. As bandeiras são SVG e
   não emoji: emoji de bandeira não desenha no Windows, que é onde está boa
   parte de quem abre a página.
   ========================================================================== */

.lang { position: relative; flex: none; }

.lang__botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(35, 35, 80, .22);
  border-radius: 2px;
  background: transparent;
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.lang__botao:hover,
.lang__botao:focus-visible,
.lang__botao[aria-expanded="true"] {
  border-color: var(--electric);
  color: var(--electric);
  background-color: rgba(75, 75, 255, .06);
}

.lang__fl { flex: none; width: 18px; height: 12.6px; display: block; }
.lang__cod { flex: none; }

/* a setinha: triângulo que vira pra cima quando o menu abre */
.lang__seta {
  flex: none;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4.5px solid currentColor;
  transition: transform .2s ease;
}
.lang__botao[aria-expanded="true"] .lang__seta { transform: rotate(180deg); }

.lang__lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 128px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid rgba(35, 35, 80, .16);
  background: var(--white);
  box-shadow: 0 14px 34px rgba(35, 35, 80, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.lang.is-aberto .lang__lista { opacity: 1; visibility: visible; transform: none; }

.lang__lista a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--grey-1);
  transition: background-color .15s ease, color .15s ease;
}
.lang__lista a:hover,
.lang__lista a:focus-visible { background-color: rgba(75, 75, 255, .08); color: var(--electric); }
.lang__lista a.is-atual { color: var(--navy); background-color: rgba(35, 35, 80, .05); }

@media (prefers-reduced-motion: reduce) {
  .lang__lista, .lang__seta, .lang__botao { transition: none; }
}

/* ==========================================================================
   OS CARDS DE FORMATO VIRARAM CARD COM FOTO AO LADO

   A foto volta com o fundo dela e passa a ocupar uma coluna inteira do
   card, sangrando até a borda arredondada. O texto fica na outra coluna,
   em branco. Isto substitui o desenho anterior, de recorte centralizado
   com colchete atrás: o bloco inteiro vem no fim do arquivo pra ganhar das
   regras de cima por ordem, já que a especificidade é a mesma.
   ========================================================================== */

/* um card por linha até caber dois lado a lado COM a foto do lado: com a
   quebra antiga, em 820px, a coluna de texto ficava com 200px */
.ftrilho__lista { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1060px) {
  .ftrilho__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  border: 1px solid rgba(35, 35, 80, .13);
  border-radius: clamp(14px, 1.5vw, 20px);
  overflow: hidden;
  background: var(--white);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fcard:hover { border-color: rgba(75, 75, 255, .35); box-shadow: 0 14px 34px rgba(35, 35, 80, .1); }

@media (min-width: 560px) {
  .fcard { grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr); }
}

.fcard__foto {
  position: relative;
  margin: 0;
  display: block;
  height: auto;
  min-height: clamp(190px, 22vw, 250px);
  background: #eef0f7;
}
.fcard__foto picture { display: block; height: 100%; }
.fcard__foto img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  /* o enquadramento de cada foto: a pessoa principal não está no mesmo
     lugar nas quatro, e a coluna é estreita */
  object-position: var(--enq, 50%) var(--enqv, 50%);
}
/* as quatro fotos têm a pessoa em lugares diferentes do quadro, e a coluna
   é estreita e alta: cada uma precisa do seu enquadramento pra o rosto não
   sair do corte */
.fcard__foto--notebook  { --enq: 56%; --enqv: 38%; }
.fcard__foto--executiva { --enq: 46%; --enqv: 32%; }
.fcard__foto--crachas   { --enq: 86%; --enqv: 22%; }
.fcard__foto--headset   { --enq: 88%; --enqv: 2%; }

/* no empilhado a foto é uma faixa; do lado, ela estica até o pé do card */
@media (max-width: 559px) {
  .fcard__foto { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (min-width: 560px) {
  .fcard__foto { height: 100%; }
}

.fcard__texto { padding: clamp(20px, 2.4vw, 30px); }

@media (prefers-reduced-motion: reduce) {
  .fcard { transition: none; }
}

/* ---- ajustes finais das dobras 04 e 05 ----------------------------------- */

/* o título de Resultados ganha o mesmo corpo das outras dobras. A cor não
   acompanha: a dobra é navy, e cinza ali não se lê. */
.ires__head .hb__bt,
.inst-claro .ires .hb__bt {
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2.0625rem);
  font-weight: 700;
  /* mais aberto que as outras dobras de propósito: aqui o marca-texto cobre
     duas linhas, e os dois retângulos se encostavam com entrelinha de 1,18.
     É a mesma medida do título da dobra 02, que tem o mesmo problema. */
  line-height: 1.45;
  color: var(--white);
}

/* o chapéu do FAQ é bloco de código como os outros; o painel é alinhado à
   esquerda, mas o inline-flex evita que o flex estique a linha inteira */
.faq__painel .chapeu-code {
  display: inline-flex;
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  color: var(--royal);
}

/* o título do card de formato cabe numa linha na coluna estreita */
.fcard .fb__titulo { font-size: clamp(1.25rem, 1.05rem + .65vw, 1.5rem); }
@media (min-width: 560px) {
  .fcard { grid-template-columns: minmax(140px, .75fr) minmax(0, 1.25fr); }
}

/* ---- o cabeçalho com as abas longas -------------------------------------- */
/* "Nuestro entrenamiento" e "Preguntas frecuentes" são mais longas que as
   abas em português, e a linha do cabeçalho estourava a tela em 1440. Entre
   a quebra do menu horizontal e 1520px tudo encolhe um pouco e o botão usa
   o rótulo curto. Vale pros três idiomas, pra linha não mudar de desenho. */
@media (min-width: 1000px) and (max-width: 1559px) {
  .inst-claro .site-header--venda .site-nav { gap: clamp(8px, .9vw, 14px); }
  .inst-claro .site-header--venda .site-nav a:not(.btn) { font-size: .8125rem; }
  .inst-claro .site-header--venda .site-header__acoes { gap: 8px; }
}

/* a quebra de linha escrita à mão dentro do selo.

   O <br> não serve aqui: o script que digita a frase escreve em textContent,
   que ignora HTML, e a tag sumiria na primeira letra. Com pre-line, a quebra
   é um \n no próprio texto, que o slice() do script carrega junto. */
.hbal__selos .chapeu-code__txt { white-space: pre-line; }


/* ---- o caminho de volta da dobra de contato ------------------------------ */
/* Só aparece pra quem chegou aqui por um salto de botão: o JS tira o hidden
   no clique. Discreto de propósito, porque a ação principal da dobra é
   falar com a gente, não voltar. */
/* ==========================================================================
   O "BRIDGE THE GAP" DA FAIXA, EM LOOP

   O da dobra de contato continua acontecendo uma vez só: lá a frase é o
   fecho, e repetir tiraria o peso dela. Aqui na faixa o desenho é a própria
   explicação do que a gente faz, então ele se repete.

   A coreografia foi reescrita pra fechar o ciclo: o vão abre, a medida
   aparece e sai, a ponte atravessa, tudo descansa aberto por um tempo
   longo, a ponte recolhe e o vão fecha. O quadro 100% é idêntico ao 0%,
   senão o laço dá um salto visível na virada.
   ========================================================================== */

.bgap--abre.bgap--laco .bgap__vao    { animation: bgap-vao-loop 4.5s cubic-bezier(.4,0,.2,1) infinite both; }
.bgap--abre.bgap--laco .bgap__medida { animation: bgap-medida-loop 4.5s ease infinite both; }
.bgap--abre.bgap--laco .bgap__traco  { animation: bgap-traco-loop 4.5s cubic-bezier(.4,0,.2,1) infinite both; }

/* A COREOGRAFIA DO LAÇO, em 4,5s

     0,08s  o vão abre e a palavra "gap" vai pra longe. Sem traço nenhum.
     0,40s  fica aberta, e a cota mede o vazio.
     1,10s  o traço sai da esquerda e corre até alcançar a palavra.
     1,45s  alcançou. Fica parado encostado nela por 0,6s, que é o tempo de
            a leitura registrar que a ponte chegou do outro lado.
     2,05s  começa a encolher, e a palavra volta junto com ele. O traço é
            absolute com left:0 e right:0 dentro do vão, então encolher o
            vão encolhe o traço: é isso que dá a leitura de puxão, em vez
            de a palavra voltar sozinha.
     2,45s  fechado. Dois segundos parado e recomeça.

   O quadro 100% é igual ao 0% nos três, senão a virada do laço salta. */

@keyframes bgap-vao-loop {
  0%, 1.8%      { width: .3em; }
  8.9%, 45.6%   { width: var(--vao); }
  54.4%, 100%   { width: .3em; }
}
@keyframes bgap-medida-loop {
  0%, 8.9%      { opacity: 0; }
  12%, 20.5%    { opacity: 1; }
  24.4%, 100%   { opacity: 0; }
}
@keyframes bgap-traco-loop {
  0%, 24.4%     { transform: scaleX(0); }
  32.2%, 45.6%  { transform: scaleX(1); }   /* alcança e espera 0,6s */
  54.4%, 54.5%  { transform: scaleX(1); }   /* puxa junto com o vão */
  54.6%, 100%   { transform: scaleX(0); }   /* some com o vão já fechado */
}

/* Fora da tela o laço congela, pra não gastar quadro à toa.
   Precisa das três classes: a regra de cima usa o atalho `animation`, que
   reescreve play-state pra running, e com menos peso de seletor a pausa
   nunca chegava a valer. */
.bgap--abre.bgap--laco.bgap--pausa .bgap__vao,
.bgap--abre.bgap--laco.bgap--pausa .bgap__medida,
.bgap--abre.bgap--laco.bgap--pausa .bgap__traco { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .bgap--abre.bgap--laco .bgap__vao,
  .bgap--abre.bgap--laco .bgap__medida,
  .bgap--abre.bgap--laco .bgap__traco { animation: none; }
}

/* ==========================================================================
   OS SEIS ÍCONES VIRARAM BOTÃO

   Cada um explica, no bloco de texto ao lado, o que aquela palavra quer
   dizer na prática. O <li> continua sendo a caixa (é dele a numeração e a
   borda da grade) e o botão assume o recheio, pra a área de clique ser o
   quadrado inteiro e não só o texto.
   ========================================================================== */

.iconas li { padding: 0; }

.iconas__bt {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(18px, 2.2vw, 24px) 8px clamp(14px, 1.8vw, 18px);
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}
/* o hover não pinta a célula: só acende o ícone de azul e troca o texto
   do lado. O fundo mudando junto fazia a grade inteira piscar enquanto o
   mouse atravessava os seis */
.iconas__bt:hover .iconas__ic { background: var(--electric); }
.iconas__bt:focus-visible { outline: 2px solid var(--electric); outline-offset: -2px; }

/* o escolhido fica marcado enquanto a explicação dele está na tela */
.iconas li.is-ativo { background: rgba(75, 75, 255, .08); }
.iconas li.is-ativo .iconas__ic { background: var(--electric); }
.iconas li.is-ativo .iconas__bt { font-weight: 700; }

/* ---- o bloco de texto que recebe a explicação --------------------------- */

/* a dica de que dá pra clicar, na mesma voz dos chapéus de código */
.iponte__dica {
  display: flex;
  gap: 8px;
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--grey-2);
  text-transform: uppercase;
}
.iponte__dica span { flex: none; color: var(--orange); font-weight: 700; letter-spacing: -.05em; }

/* O título da explicação: o nome do ícone, em laranja. O elétrico já está
   no ícone aceso ao lado, e repetir a mesma cor nos dois tirava a leitura
   de "esse texto é sobre aquele ícone".

   O seletor é longo de propósito: `.iponte__txt .iponte__metodo p` (lá em
   cima, na linha 1807) pinta todo parágrafo deste bloco de cinza, e tem
   três classes mais um elemento. Pra a cor do título valer, aqui precisa
   de peso maior, não só de vir depois. */
.iponte__txt .iponte__metodo p.iponte__expl-t {
  margin: 0 0 .5em;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--orange);
}
/* a troca entra com um respiro, pra ficar claro que o texto mudou */
.iponte__metodo.is-explicando { animation: expl-entra .32s ease-out both; }
@keyframes expl-entra {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .iponte__metodo.is-explicando { animation: none; }
}

/* a dica muda conforme o aparelho: com mouse a troca é no hover, em tela de
   toque não existe hover de verdade e o gesto é o toque mesmo */
.iponte__dica--mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .iponte__dica--mouse { display: inline; }
  .iponte__dica--toque { display: none; }
}

/* espiando com o mouse: só o ícone acende. O fundo fica reservado pro
   clique, que é o que fixa a explicação */
.iconas li.is-vendo .iconas__ic { background: var(--electric); }


/* ==========================================================================
   O MENU HORIZONTAL DESCE ATÉ 1000px

   O padrão do site vira botão "Menu" abaixo de 1340px, porque lá os links
   são frases. Aqui as seis abas são curtas, e com o botão de contato fora
   da barra sobra espaço: dá pra mostrar a lista inteira, antes do seletor
   de idioma, em qualquer tela de notebook. Abaixo de 1000 ela não cabe mais
   sem apertar a logo, e aí volta a ser painel.
   ========================================================================== */

@media (min-width: 1000px) and (max-width: 1339px) {
  .inst-claro .site-header--venda .nav-toggle { display: none; }

  .inst-claro .site-header--venda .site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    order: 2;
    width: auto;
    margin: 0 16px 0 auto;
    padding: 0;
    gap: clamp(8px, .9vw, 14px);
    background: transparent;
    border-top: 0;
    box-shadow: none;
  }
  .inst-claro .site-header--venda .site-header__acoes { order: 3; margin-left: 0; }

  .inst-claro .site-header--venda .site-nav a:not(.btn) {
    width: auto;
    padding: 6px 2px;
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
  }
  .inst-claro .site-header--venda .site-nav a:not(.btn):hover {
    color: var(--royal);
    border-bottom-color: var(--orange);
  }
}

/* ==========================================================================
   As três faixas de perfis aparecendo inteiras

   A .perfilzona fecha a dobra com uma margem negativa: a seção seguinte
   sobe por cima dela pra encostar no azul sem costura. O problema é que
   essa sobreposição comia a terceira faixa de pílulas: das três, só
   apareciam duas e um fiozinho da última.

   A correção é dar à faixa um respiro embaixo do tamanho exato da margem
   negativa. O azul continua terminando colado na seção de baixo, porque
   quem define esse encontro é a margem, e as três faixas passam a caber
   acima da linha onde a sobreposição começa.
   ========================================================================== */

.inst-claro .perfilzona {
  padding-bottom: calc(clamp(26px, 3.4vw, 42px) + clamp(52px, 6vw, 92px));
}

/* ==========================================================================
   O BOTÃO DE VOLTAR AO TOPO

   Mora no mesmo canto do WhatsApp, logo acima dele, no lugar que o
   "voltar pra onde eu estava" ocupa quando existe. Os dois nunca aparecem
   juntos: quem decide isso é o ao-topo.js.

   É um disco branco com um anel em volta, e o anel é o quanto da página já
   foi lido. O disco claro em vez de um bolo de azul marinho porque ele fica
   na tela durante toda a leitura: pesado ali vira mancha. O azul elétrico
   do anel é o único acento, e ele cresce enquanto a pessoa desce. No hover
   esse anel vira laranja, que é o único movimento de cor do botão.

   A seta é desenhada em SVG, não é a seta de teclado da fonte: assim a
   espessura dela combina com a do anel em qualquer tamanho de tela. O traço
   é o mesmo da seta do "Assista ao vídeo" da página do curso, de cabeça pra
   cima: 2,5 de espessura numa caixa de 24, que na tela dá os mesmos dois
   pixels de risco.

   A âncora da dobra "Quem nós ajudamos" ganha respiro no topo porque o
   cabeçalho fica fixo: sem isso o título entraria embaixo dele.
   ========================================================================== */

#quem { scroll-margin-top: clamp(96px, 12vh, 132px); }

.ao-topo {
  position: fixed;
  right: 22px;
  bottom: calc(22px + 54px + 12px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(35, 35, 80, .18);
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ao-topo__anel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* o zero do arco é o topo do círculo, não a direita */
  transform: rotate(-90deg);
  pointer-events: none;
}
.ao-topo__trilho {
  fill: none;
  stroke: rgba(35, 35, 80, .14);
  stroke-width: 2.5;
}
.ao-topo__arco {
  fill: none;
  stroke: var(--electric);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke .18s ease;
}

.ao-topo__seta {
  position: relative;
  width: 21px;
  height: 21px;
}

/* no hover muda só o anel, de azul pra laranja. O disco continua branco:
   inverter o fundo inteiro era um susto pra um botão que a pessoa encosta
   sem querer enquanto rola a página */
.ao-topo:hover,
.ao-topo:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(35, 35, 80, .22);
}
.ao-topo:hover .ao-topo__arco,
.ao-topo:focus-visible .ao-topo__arco { stroke: var(--orange); }

.ao-topo[hidden] { display: none; }

@media (max-width: 700px) {
  .ao-topo {
    right: 12px;
    bottom: calc(88px + 46px + 12px + env(safe-area-inset-bottom, 0px));
    width: 42px;
    height: 42px;
  }
  .ao-topo__seta { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .ao-topo { transition: none; }
}

/* ==========================================================================
   O CANTO FLUTUANTE NÃO ENCOSTA NO RODAPÉ

   No fim da página os dois botões fixos caíam em cima da última faixa do
   rodapé: no desktop, em "Preferências de cookies"; no celular e no tablet,
   nos @ das redes. Duas correções juntas, porque uma só não resolvia.

   A primeira é descer o par alguns pixels, que foi o que a Laissa pediu:
   eles ficam mais colados no canto e saem da altura das linhas de texto.

   A segunda é dar ao rodapé um respiro embaixo do tamanho do par. Descer os
   botões sozinho não bastava: a última faixa do rodapé é a última coisa da
   página, então ela sempre terminaria debaixo deles. Com o respiro, a faixa
   sobe e o canto fica livre.
   ========================================================================== */

.inst-claro .zap-flutua { bottom: 14px; }
.inst-claro .ao-topo { bottom: calc(14px + 54px + 12px); }

/* o respiro é a altura do par inteiro: 48 da seta, 12 de folga, 54 do zap,
   os 14 do canto e uma margem de sobra. Menos que isso e a seta, que fica
   mais alta que o zap, ainda alcança a última faixa do rodapé */
.inst-claro .site-footer { padding-bottom: 142px; }

@media (max-width: 700px) {
  .inst-claro .zap-flutua { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .inst-claro .ao-topo { bottom: calc(80px + 46px + 12px + env(safe-area-inset-bottom, 0px)); }
  .inst-claro .site-footer { padding-bottom: calc(205px + env(safe-area-inset-bottom, 0px)); }
}