/* ==========================================================================
   Replica da pagina da O2 Outsourcing (BPO Financeiro)
   Original: https://o2outsourcingbpofinanceiro.com.br/
   Todos os valores aqui foram MEDIDOS na original (captura de estilos
   computados em 1440, 1024 e 390, em _original/fonte/computado-*.json) ou
   lidos da folha da original (_original/fonte/css/styles.css).
   Nada foi estimado a olho.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fichas de cor, tipografia e movimento
   A original usa oklch em tudo; mantido igual, porque converter para hex
   muda a cor renderizada em tela de gamut largo.
   -------------------------------------------------------------------------- */
:root {
  /* marca */
  --marca-primaria: oklch(34% .115 273);
  --marca-primaria-escura: oklch(24% .09 273);
  --marca-secundaria: oklch(74% .155 133);
  --marca-destaque: oklch(55% .135 140);
  --marca-tinta-clara: oklch(96.5% .016 140);

  /* superficies e texto */
  --fundo: oklch(99% .003 260);
  --fundo-suave: oklch(96.5% .005 260);
  --texto: oklch(26% .03 273);
  --cartao: oklch(100% 0 0);
  --suave: oklch(95.5% .006 260);
  --texto-apagado: oklch(50% .022 273);

  /* botao de acao */
  --cta: oklch(56% .14 140);
  --cta-hover: oklch(50% .13 140);
  --cta-texto: oklch(99% .005 140);
  --destaque-texto: oklch(99% .005 140);

  /* linhas */
  --borda: oklch(91.5% .006 260);
  --fio: oklch(89.5% .007 260);
  --campo: oklch(87.5% .008 260);
  --anel: var(--marca-destaque);

  /* bloco escuro ("ink") */
  --escuro: oklch(23.5% .085 273);
  --escuro-texto: oklch(97.5% .004 260);
  --escuro-apagado: oklch(78% .02 273);
  --escuro-borda: oklch(36% .06 273);

  /* tipografia */
  --fonte: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --fonte-titulo: Manrope, Inter, ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  /* movimento (medido: 0,18s para micro-interacao, 0,48s para conteudo) */
  --suavizacao: cubic-bezier(.22, .61, .36, 1);
  --dur-micro: .18s;
  --dur-conteudo: .48s;

  --raio: .375rem;      /* rounded-lg */
  --raio-m: .25rem;     /* rounded-md = var(--raio) - 2px, medido 4px */
}

/* --------------------------------------------------------------------------
   2. Reinicio
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--borda); /* a original herda a cor da borda em TUDO */
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
  font-size: 17px;   /* medido */
  line-height: 1.65; /* medido */
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  letter-spacing: -.02em;
  text-wrap: balance;
  font-size: inherit;
  font-weight: inherit;
}

p { margin: 0; }

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--anel);
  outline-offset: 2px;
}

.so-leitor { /* sr-only */
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Grade e ritmo vertical
   .caixa  = container-o2: 1180px de teto, 1,25rem de respiro, 2,5rem a partir
             de 768px. Medido: conteudo em x170 numa janela de 1440
             ((1440-1180)/2 = 130 de margem + 40 de respiro).
   .secao-y = padding vertical de 3,75rem, 5,25rem a partir de 768px.
   -------------------------------------------------------------------------- */
.caixa {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.secao-y {
  padding-block: 3.75rem;
}

@media (width >= 768px) {
  .caixa { padding-inline: 2.5rem; }
  .secao-y { padding-block: 5.25rem; }
}

/* --------------------------------------------------------------------------
   4. Tipografia de titulo e apoio
   Os clamp sao os da original, nao aproximacoes: em 1440 o h1 mede 50,4px
   (1.35rem + 2.2vw = 21,6 + 31,68 = 53,28 -> limitado pelo teto 3,15rem).
   -------------------------------------------------------------------------- */
.titulo-1 {
  font-size: clamp(2.05rem, 1.35rem + 2.2vw, 3.15rem);
  font-weight: 800;
  line-height: 1.08;
}

.titulo-2 {
  font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.35rem);
  font-weight: 800;
  line-height: 1.14;
}

.titulo-3 {
  font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
}

/* chapeu da secao */
.rotulo {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marca-destaque);
  font-size: .8125rem;
  font-weight: 600;
}

/* largura de leitura */
.medida { max-width: 62ch; }
.medida-curta { max-width: 52ch; }

.apagado { color: var(--texto-apagado); }
.realce { color: var(--marca-secundaria); }

/* --------------------------------------------------------------------------
   5. Movimento
   Inventario medido na original:
   - .revelar: opacidade 0 -> 1 e translateY(20px) -> 0, 0,48s, por
     IntersectionObserver, com atraso proprio por elemento (--atraso).
   - .cresce-y / .cresce-x: linha de conexao que escala de 0 a 1.
   Nao ha nenhuma animacao em laco (so spin/pulse do kit, nao usados).
   -------------------------------------------------------------------------- */
/* Cartao que sobe 3px no ponteiro fino. Fica ANTES do .revelar de proposito:
   na folha da original o .interactive-card tambem vem antes do .reveal, e os
   cartoes que tem as duas classes acabam com a transicao do reveal (0,48s em
   opacity e transform). Inverter a ordem muda o hover de 10 cartoes. */
.cartao-vivo {
  transition: transform var(--dur-micro) var(--suavizacao),
              border-color var(--dur-micro) var(--suavizacao),
              box-shadow var(--dur-micro) var(--suavizacao);
}

@media (hover: hover) and (pointer: fine) {
  .cartao-vivo:hover {
    border-color: color-mix(in oklab, var(--marca-primaria) 30%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -18px rgba(20, 32, 96, .5);
  }
}

.revelar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-conteudo) var(--suavizacao),
              transform var(--dur-conteudo) var(--suavizacao);
  transition-delay: var(--atraso, 0s);
  will-change: opacity, transform;
}

.revelar[data-visivel="true"] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.cresce-y {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform var(--dur-conteudo) var(--suavizacao);
  transition-delay: var(--atraso, 0s);
}

.cresce-x {
  transform-origin: 0;
  transform: scaleX(0);
  transition: transform var(--dur-conteudo) var(--suavizacao);
  transition-delay: var(--atraso, 0s);
}

.cresce-y[data-visivel="true"],
.cresce-x[data-visivel="true"],
.revelar[data-visivel="true"] .cresce-y,
.revelar[data-visivel="true"] .cresce-x {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .revelar,
  .cresce-x,
  .cresce-y {
    opacity: 1 !important;
    transform: none !important;
  }
  .cartao-vivo:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   6. Botoes
   Medido: 44px de altura no cabecalho (padding 0 24px, 16px/24px),
   52px no heroi (padding 0 28px, 17px/28,05px), raio 4px (0,375rem).
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-m);
  font-weight: 600;
  text-align: center;
  transition: background-color var(--dur-micro) var(--suavizacao),
              transform var(--dur-micro) var(--suavizacao),
              box-shadow var(--dur-micro) var(--suavizacao);
}

.btn-cta {
  background-color: var(--cta);
  color: var(--cta-texto);
  box-shadow: 0 1px 2px rgba(20, 32, 96, .12);
}

.btn-cta:hover {
  background-color: var(--cta-hover);
  box-shadow: 0 6px 16px -8px rgba(20, 32, 96, .45);
  transform: translateY(-1px);
}

.btn-cta:active {
  transform: translateY(0);
  transition-duration: 75ms;
}

/* tamanho do cabecalho. A entrelinha vem junto com o corpo (text-sm e
   text-base trazem a sua), senao a caixa herda o 1,65 do corpo da pagina. */
.btn-cabecalho {
  min-height: 44px;
  padding-inline: 1rem;
  font-size: .875rem;
  line-height: 1.25rem;
}

@media (width >= 640px) {
  .btn-cabecalho {
    padding-inline: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* tamanho grande, usado no heroi e nas chamadas */
.btn-grande {
  min-height: 52px;
  padding-inline: 1.75rem;
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   7. Cabecalho fixo
   Medido: 73px de altura (logo de 52px + 10px de respiro em cima e embaixo),
   fundo --fundo, borda de baixo transparente ate rolar.
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--fundo);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--suavizacao),
              border-color .3s var(--suavizacao),
              box-shadow .3s var(--suavizacao);
}

.cabecalho[data-rolado="true"] {
  /* medido: a troca acontece a partir de 24px de rolagem */
  background-color: color-mix(in oklab, var(--fundo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--borda);
  box-shadow: 0 1px 12px -8px rgba(20, 32, 96, .5);
}

.cabecalho > .caixa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: .5rem;
}

@media (width >= 640px) {
  .cabecalho > .caixa { padding-block: .625rem; }
}

.cabecalho-marca {
  display: flex;
  min-width: 0;
  align-items: center;
}

/* a imagem tem proporcao propria (719x781): altura fixa e largura automatica,
   nunca as duas, senao o logo distorce e empurra a pagina inteira. */
.cabecalho-logo {
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
  align-self: flex-start;
  object-fit: contain;
  height: 44px;
  transition: height .3s var(--suavizacao);
}

.cabecalho[data-rolado="true"] .cabecalho-logo { height: 40px; }

/* Medido no pacote da original: ABAIXO de 768px, assim que a pagina rola, a
   chamada do cabecalho some e deixa de receber clique - quem assume e a barra
   fixa de baixo. Acima de 768px ela continua visivel. Nenhuma medicao de caixa
   pega isso, porque a caixa nao muda: so a opacidade. */
@media (width < 768px) {
  .cabecalho[data-rolado="true"] .btn-cabecalho {
    pointer-events: none;
    opacity: 0;
  }
}

/* medido: a chamada do cabecalho transiciona SO a opacidade - o
   transition-opacity da original sobrescreve a transicao do botao, entao o
   hover dela e instantaneo */
.btn-cabecalho {
  transition: opacity var(--dur-micro) var(--suavizacao);
}

@media (width >= 640px) {
  .cabecalho-logo { height: 52px; }
  .cabecalho[data-rolado="true"] .cabecalho-logo { height: 42px; }
}

/* --------------------------------------------------------------------------
   8. Faixas de secao
   A original alterna tres fundos: claro (--fundo), suave (--fundo-suave) e
   escuro (--escuro), com fios de 1px entre elas.
   -------------------------------------------------------------------------- */
.secao-clara  { background-color: var(--fundo); }
.secao-suave  { background-color: var(--fundo-suave); }
.secao-tinta  { background-color: var(--marca-tinta-clara); }

.secao-escura {
  background-color: var(--escuro);
  color: var(--escuro-texto);
}

.secao-linha-baixo { border-bottom: 1px solid var(--borda); }
.secao-linha-cima  { border-top: 1px solid var(--borda); }

/* --------------------------------------------------------------------------
   9. Secao 1 - heroi
   Medido em 1440: caixa de 1180 com 40px de respiro, duas colunas de
   549,078 e 486,906 (1.06fr / 0.94fr) com 64px de vao, 56px em cima e embaixo.
   Abaixo de 1024 vira uma coluna so, com 40px de vao.
   -------------------------------------------------------------------------- */
.heroi {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.25rem;
}

@media (width >= 768px) {
  .heroi { padding-block: 3.5rem; }
}

@media (width >= 1024px) {
  .heroi {
    grid-template-columns: 1.06fr .94fr;
    align-items: center;
    gap: 4rem;
  }
}

.heroi-texto,
.heroi-painel { min-width: 0; }

.heroi-titulo {
  margin-top: 1rem;
  max-width: 24ch;
}

.heroi-lede {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
}

@media (width >= 640px) {
  .heroi-lede {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.heroi-acao { margin-top: 1.75rem; }

.heroi-nota {
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.25rem;
}

/* --- o quadro "Estrutura Financeira O2" --- */
.quadro {
  overflow: hidden;
  border-radius: 10px;             /* rounded-xl = var(--raio) + 4px */
  border: 1px solid var(--borda);
  background-color: var(--cartao);
}

.quadro-cabeca {
  border-bottom: 1px solid var(--fio);
  background-color: var(--marca-tinta-clara);
  padding: 1rem 1.5rem;
}

.quadro-chapeu {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--marca-primaria);
}

.quadro-corpo {
  position: relative;
  padding: 1.75rem 1.5rem;
}

.quadro-pe {
  border-top: 1px solid var(--fio);
  background-color: var(--fundo-suave);
  padding: 1rem 1.5rem;
}

@media (width >= 640px) {
  .quadro-cabeca,
  .quadro-corpo,
  .quadro-pe { padding-inline: 2rem; }
}

/* linha vertical que liga os tres passos; cresce de cima para baixo */
.passo-linha {
  position: absolute;
  top: 3rem;
  bottom: 3rem;
  left: 2.4rem;
  width: 1px;
  background-image: linear-gradient(
    var(--marca-secundaria) 0%,
    var(--marca-destaque) 50%,
    var(--marca-primaria) 100%);
}

@media (width >= 640px) {
  .passo-linha { left: 3.15rem; }
}

.passos > li:not(:last-child) { margin-block-end: 1.25rem; }

.passo {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.passo-num {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--fio);
  border-radius: 2147483647px;
  background-color: var(--fundo);
  font-family: var(--fonte-titulo);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 800;
  color: var(--marca-primaria);
}

.passo-corpo {
  min-width: 0;
  padding-top: .125rem;
}

.passo-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 700;
}

.passo-desc {
  font-size: .95rem;
  color: var(--texto-apagado);
}

.pilares {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  font-size: .8125rem;
  color: var(--texto-apagado);
}

.pilar {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.pilar-ponto { color: var(--fio); }

/* --------------------------------------------------------------------------
   10. Secao 2 - duas citacoes curtas
   Medido em 1440: duas colunas iguais com 32px de vao, 28px em cima e embaixo
   (py-7, md:py-8 = 32px), fio de 2px a esquerda na cor de destaque.
   -------------------------------------------------------------------------- */
.citacoes {
  display: grid;
  gap: 1.25rem;
  padding-block: 1.75rem;
}

@media (width >= 640px) {
  .citacoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media (width >= 768px) {
  .citacoes { padding-block: 2rem; }
}

.citacao {
  min-width: 0;
  border-left: 2px solid var(--marca-destaque);
  padding-left: 1rem;
}

.citacao-fala {
  font-size: .95rem;
  line-height: 1.375;
}

/* medido: em 640+ so o corpo muda; a entrelinha continua 1,375 (22px),
   porque na original o leading-snug vem depois do text-base na cascata. */
@media (width >= 640px) {
  .citacao-fala { font-size: 1rem; }
}

.citacao-autor {
  margin-top: .5rem;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--texto-apagado);
}

/* --------------------------------------------------------------------------
   11. Secao 3 - o painel financeiro de exemplo
   -------------------------------------------------------------------------- */
.painel-intro {
  margin-inline: auto;
  max-width: 42rem;
  text-align: center;
}

.painel-titulo { margin-top: .75rem; }

.painel-lede {
  margin-inline: auto;
  margin-top: 1rem;
}

.painel-fora { margin-top: 2.5rem; }

.painel {
  overflow: hidden;
  border-radius: 14px;              /* rounded-2xl = var(--raio) + 8px */
  border: 1px solid var(--borda);
  background-color: var(--cartao);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .25);
}

.painel-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background-color: var(--escuro);
  color: var(--escuro-texto);
  padding: .75rem 1.25rem;
}

.painel-barra-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.painel-marca {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  color: var(--marca-destaque);
}

/* o " Outsourcing · " so aparece a partir de 640px */
.so-largo { display: none; }

@media (width >= 640px) {
  .so-largo { display: inline; }
}

.painel-selo {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 2147483647px;
  background-color: var(--marca-destaque);
  color: var(--destaque-texto);
  padding: .25rem .75rem;
  font-size: .6875rem;
  font-weight: 600;
}

.painel-corpo { padding: 1rem; }

@media (width >= 640px) {
  .painel-corpo { padding: 1.75rem; }
}

.painel-h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}

@media (width >= 640px) {
  .painel-h3 { font-size: 1.25rem; }
}

.painel-sub {
  margin-top: .25rem;
  font-size: .75rem;
  line-height: 1rem;
  color: var(--texto-apagado);
}

.indicadores {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

@media (width >= 1024px) {
  .indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.indicador {
  border-radius: 10px;
  background-color: var(--suave);
  padding: 1rem;
}

.indicador-rotulo {
  font-size: .75rem;
  line-height: 1rem;
  color: var(--texto-apagado);
}

.indicador-valor {
  margin-top: .25rem;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 800;
  color: var(--texto);
}

@media (width >= 640px) {
  .indicador-valor {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.indicador-valor-destaque { color: var(--marca-destaque); }

.indicador-nota {
  margin-top: .25rem;
  font-size: .6875rem;
  color: var(--texto-apagado);
}

.graficos {
  margin-top: 1.25rem;
  display: grid;
  gap: 1rem;
}

@media (width >= 1024px) {
  .graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.grafico-caixa {
  border-radius: 10px;
  border: 1px solid var(--borda);
  padding: .75rem;
}

@media (width >= 640px) {
  .grafico-caixa { padding: 1rem; }
}

.grafico-titulo {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.legenda {
  margin-top: .25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  font-size: .6875rem;
  color: var(--texto-apagado);
}

.legenda-item {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

.legenda-bolinha {
  width: .5rem;
  height: .5rem;
  border-radius: 2147483647px;
}

.bolinha-primaria { background-color: var(--marca-primaria); }
.bolinha-apagada  { background-color: var(--texto-apagado); }
.bolinha-destaque { background-color: var(--marca-destaque); }

.grafico-area { margin-top: .75rem; }

/* --- os dois vetores --- */
.grafico {
  height: auto;
  width: 100%;
}

.traco-borda         { stroke: var(--borda); }
.grafico-rotulo      { fill: var(--texto-apagado); font-size: 9px; }
.grafico-rotulo-mini { fill: var(--texto-apagado); font-size: 8.5px; }
.grafico-valor       { fill: var(--texto); font-size: 9px; font-weight: 600; }
.preenche-cartao     { fill: var(--cartao); }
.preenche-primaria   { fill: var(--marca-primaria); }
.preenche-destaque   { fill: var(--marca-destaque); }
.cor-primaria        { color: var(--marca-primaria); }
.cor-apagada         { color: var(--texto-apagado); }
.cor-destaque        { color: var(--marca-destaque); }

/* --------------------------------------------------------------------------
   12. Secao 4 - o custo de crescer com o financeiro interno
   -------------------------------------------------------------------------- */
.cresce-titulo { max-width: 18ch; }

.cresce-grade {
  margin-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
}

@media (width >= 1024px) {
  .cresce-grade {
    grid-template-columns: .9fr 1.1fr;
    gap: 4rem;
  }
}

.cresce-lista {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
}

.cresce-lista > li:not(:last-child) { margin-block-end: .25rem; }

@media (width >= 640px) {
  .cresce-lista { font-size: 1.875rem; }
}

.cresce-lede {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.cresce-remate {
  margin-top: 2rem;
  border-left: 2px solid var(--marca-destaque);
  padding-left: 1rem;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.ciclo-rotulo {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--texto-apagado);
}

.ciclo {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

@media (width >= 640px) {
  .ciclo {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
  }
}

.ciclo-item {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.ciclo-chip {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .75rem;
  border-radius: var(--raio-m);
  border: 1px solid var(--fio);
  background-color: var(--fundo);
  padding: .75rem 1rem;
}

@media (width >= 640px) {
  .ciclo-chip { width: auto; }
}

.num-marca {
  font-family: var(--fonte-titulo);
  letter-spacing: .06em;
  color: var(--marca-destaque);
  font-size: .8125rem;
  font-weight: 800;
}

.ciclo-nome {
  font-family: var(--fonte-titulo);
  font-size: .975rem;
  font-weight: 700;
}

/* a seta so existe a partir de 640px, quando o ciclo vira uma fila */
.ciclo-seta {
  display: none;
  color: var(--fio);
}

@media (width >= 640px) {
  .ciclo-seta { display: inline; }
}

.saida-grade {
  margin-top: 3.5rem;
  border-top: 1px solid var(--fio);
  padding-top: 3rem;
  display: grid;
  gap: 2rem;
}

@media (width >= 1024px) {
  .saida-grade {
    grid-template-columns: 1.1fr .9fr;
    gap: 4rem;
  }
}

.saida-lede {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.saida-lista {
  margin-top: 1.5rem;
  border-left: 2px solid var(--marca-secundaria);
  padding-left: 1.25rem;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 800;
}

.saida-lista > li:not(:last-child) { margin-block-end: .5rem; }

@media (width >= 640px) {
  .saida-lista { font-size: 2rem; }
}

.saida-nota {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.saida-nota-2 { margin-top: .75rem; }

.saida-remate {
  margin-top: 1.5rem;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 800;
}

@media (width >= 1024px) {
  .saida-coluna { padding-top: .5rem; }
}

/* --------------------------------------------------------------------------
   13. Secao 5 - a faixa escura "talvez precise de uma estrutura"
   -------------------------------------------------------------------------- */
.estrutura-titulo { max-width: 20ch; }

.estrutura-remate {
  margin-top: 1.25rem;
  font-family: var(--fonte-titulo);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 800;
  color: var(--marca-secundaria);
}

@media (width >= 640px) {
  .estrutura-remate {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.estrutura-grade {
  margin-top: 3rem;
  border-top: 1px solid var(--escuro-borda);
  padding-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
}

@media (width >= 1024px) {
  .estrutura-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
  }
}

.estrutura-texto {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--escuro-apagado);
}

.estrutura-texto-2 { margin-top: 1rem; }

.pecas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.peca-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.peca {
  border-radius: var(--raio-m);
  border: 1px solid var(--escuro-borda);
  padding: .5rem .75rem;
  font-family: var(--fonte-titulo);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.peca-mais {
  display: none;
  color: var(--escuro-apagado);
}

@media (width >= 640px) {
  .peca-mais { display: inline; }
}

.estrutura-fecho {
  margin-top: 2rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.estrutura-fecho-forte {
  margin-top: .5rem;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   14. Secao 6 - o mecanismo: tres sistemas
   -------------------------------------------------------------------------- */
.mecanismo-titulo { margin-top: 1rem; }

.mecanismo-lede {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* fio "01 -> 02 -> 03": os dois tracos crescem de 0 ate a largura cheia */
.mecanismo-fio {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.fio-grad {
  height: 1px;
  flex: 1 1 0%;
}

.fio-grad-ida {
  background-image: linear-gradient(to right in oklab,
    var(--marca-secundaria) 0%, var(--marca-primaria) 100%);
}

.fio-grad-volta {
  background-image: linear-gradient(to right in oklab,
    var(--marca-primaria) 0%, var(--marca-secundaria) 100%);
}

.fio-selo {
  font-family: var(--fonte-titulo);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--marca-primaria);
}

.sistemas {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
}

@media (width >= 1024px) {
  .sistemas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sistema {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background-color: var(--cartao);
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(20, 32, 96, .04);
}

@media (width >= 640px) {
  .sistema { padding: 1.75rem; }
}

.sistema-fita {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  border-radius: 10px 10px 0 0;
  background-image: linear-gradient(to right in oklab,
    var(--marca-secundaria) 0%, var(--marca-primaria) 100%);
}

.sistema-cabeca {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}

.sistema-num {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 800;
  color: color-mix(in oklab, var(--marca-primaria) 25%, transparent);
}

.sistema-titulo { min-width: 0; }

.sistema-frase {
  margin-top: 1rem;
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  line-height: 1.375;
  font-weight: 700;
  color: var(--marca-secundaria);
}

.sistema-apoio {
  margin-top: .75rem;
  font-size: .95rem;
  color: var(--texto-apagado);
}

.sistema-lista {
  margin-top: auto;
  display: grid;
  gap: .25rem 1.25rem;
  border-top: 1px solid var(--fio);
  padding-top: 1.25rem;
  font-size: .875rem;
  color: var(--texto-apagado);
}

.sistema-item { min-width: 0; }

@media (width >= 640px) {
  .sistema-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width >= 1024px) {
  .sistema-lista { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   15. Secao 7 - "nao e terceirizar tarefas"
   -------------------------------------------------------------------------- */
.nao-titulo { max-width: 20ch; }

.nao-remate {
  margin-top: .75rem;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--marca-secundaria);
}

@media (width >= 640px) {
  .nao-remate {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.nao-texto {
  margin-top: 2rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.nao-texto-2 { margin-top: .75rem; }

.nao-citacao {
  margin-top: 2.5rem;
  border-left: 2px solid var(--marca-destaque);
  padding-left: 1.5rem;
}

.nao-citacao-fala {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.375;
  font-weight: 700;
}

@media (width >= 640px) {
  .nao-citacao-fala { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   16. Secao 8 - implantacao
   -------------------------------------------------------------------------- */
.implant-titulo {
  margin-top: 1rem;
  max-width: 20ch;
}

.trilha-zero {
  margin-top: 2.5rem;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background-color: var(--fundo-suave);
  padding: 1.5rem;
}

@media (width >= 640px) {
  .trilha-zero { padding: 2rem; }
}

.trilha-rotulo {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--texto-apagado);
}

.trilha {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  font-size: .95rem;
}

.trilha-item {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.trilha-seta { color: var(--fio); }

/* a linha do tempo das quatro etapas */
.etapas {
  position: relative;
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}

@media (width >= 768px) {
  .etapas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.etapas-fio {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background-image: linear-gradient(to right in oklab,
    var(--marca-secundaria) 0%, var(--marca-destaque) 50%, var(--marca-primaria) 100%);
}

@media (width >= 768px) {
  .etapas-fio { display: block; }
}

.etapa {
  position: relative;
  padding-top: 1.25rem;
  border-left: 2px solid var(--fio);
  padding-left: 1.25rem;
}

@media (width >= 768px) {
  .etapa {
    padding-top: 1.75rem;
    border-left: 0;
    padding-left: 0;
  }
}

.etapa-ponto {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: .625rem;
  height: .625rem;
  transform: translateY(-50%);
  border-radius: 2147483647px;
  background-color: var(--marca-primaria);
}

@media (width >= 768px) {
  .etapa-ponto { display: block; }
}

.etapa-titulo {
  margin-top: .25rem;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.etapa-desc {
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--texto-apagado);
}

.etapa-extra {
  margin-top: .5rem;
  font-size: .875rem;
  color: color-mix(in oklab, var(--texto-apagado) 85%, transparent);
}

/* o bloco "Cerca de 15 dias" */
.prazo {
  margin-top: 3.5rem;
  display: grid;
  align-items: center;
  gap: 2rem;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background-color: var(--marca-tinta-clara);
  padding: 1.75rem;
}

@media (width >= 640px) {
  .prazo { padding: 2.5rem; }
}

@media (width >= 768px) {
  .prazo {
    grid-template-columns: auto 1fr;
    gap: 3.5rem;
  }
}

.prazo-numero {
  font-family: var(--fonte-titulo);
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--marca-primaria);
}

@media (width >= 640px) {
  .prazo-numero { font-size: 3.75rem; }
}

.prazo-asterisco {
  vertical-align: super;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--marca-destaque);
}

.prazo-texto {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.prazo-nota {
  margin-top: .75rem;
  font-size: .875rem;
  line-height: 1.25rem;
}

/* "internalizar x implantar" + chamada */
.virada {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}

@media (width >= 768px) {
  .virada {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.virada-antes {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--texto-apagado);
}

.virada-depois {
  margin-top: .25rem;
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--marca-secundaria);
}

@media (width >= 640px) {
  .virada-depois { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   17. Secao 9 - confianca (faixa escura)
   -------------------------------------------------------------------------- */
.rotulo-claro {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--marca-secundaria);
}

.confianca-titulo { margin-top: 1rem; }

.confianca-frase {
  margin-top: 1.25rem;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

@media (width >= 640px) {
  .confianca-frase {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.confianca-nota {
  margin-top: .5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--escuro-apagado);
}

.confianca-grade {
  margin-top: 3rem;
  border-top: 1px solid var(--escuro-borda);
  padding-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
}

@media (width >= 1024px) {
  .confianca-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
  }
}

.perguntas > li:not(:last-child) { border-bottom: 1px solid var(--escuro-borda); }

.pergunta {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1rem;
}

.pergunta-traco {
  margin-top: .75rem;
  height: 1px;
  width: 1.25rem;
  flex-shrink: 0;
  background-color: var(--marca-secundaria);
}

.pergunta-texto {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.confianca-forte {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.confianca-apoio {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--escuro-apagado);
}

.confianca-remate {
  margin-top: 2.5rem;
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
}

@media (width >= 640px) {
  .confianca-remate { font-size: 2.75rem; }
}

.confianca-marca { color: var(--marca-secundaria); }

.confianca-fecho {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--escuro-apagado);
}

.confianca-remate + .confianca-fecho { margin-top: 1.5rem; }

.seguranca {
  margin-top: 3.5rem;
  border-top: 1px solid var(--escuro-borda);
  padding-top: 2.5rem;
}

.rotulo-claro-2 { margin-top: 0; }

.seguranca-titulo {
  margin-top: .75rem;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

@media (width >= 640px) {
  .seguranca-titulo {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.garantias {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
}

@media (width >= 640px) {
  .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width >= 1024px) {
  .garantias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.garantia {
  border-radius: 10px;
  border: 1px solid var(--escuro-borda);
  background-color: color-mix(in oklab, var(--escuro-texto) 5%, transparent);
  padding: 1.25rem;
  /* A original declara transition-colors de 0,2s aqui, mas esses seis cartoes
     tambem sao .reveal, e na folha dela o reveal vem depois: o valor que
     realmente vale e o do reveal (opacidade e transform em 0,48s), e a troca de
     cor na borda acontece sem transicao. Medido, nao suposto. */
}

.garantia:hover {
  border-color: color-mix(in oklab, var(--marca-secundaria) 60%, transparent);
}

.garantia-icone {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 2147483647px;
  background-color: var(--marca-secundaria);
  color: var(--escuro);
}

.icone {
  width: 1rem;
  height: 1rem;
}

.garantia-titulo {
  margin-top: 1rem;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}

.garantia-desc {
  margin-top: .375rem;
  font-size: .875rem;
  line-height: 1.625;
  color: var(--escuro-apagado);
}

/* --------------------------------------------------------------------------
   18. Secao 10 - provas de confianca
   -------------------------------------------------------------------------- */
.provas-grade {
  display: grid;
  gap: 2.5rem;
}

@media (width >= 1024px) {
  .provas-grade {
    grid-template-columns: .82fr 1.18fr;
    gap: 4rem;
  }
}

.provas-titulo {
  margin-top: 1rem;
  max-width: 16ch;
}

.provas-lede {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.provas {
  display: grid;
  gap: 1rem;
}

@media (width >= 640px) {
  .provas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.prova { min-width: 0; }

.prova-cartao {
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background-color: var(--cartao);
  padding: 1.5rem;
}

.prova-fita {
  margin-bottom: 1rem;
  height: 4px;
  width: 2rem;
  border-radius: 2147483647px;
  background-color: var(--marca-destaque);
}

.prova-fala {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  line-height: 1.375;
  font-weight: 600;
}

.prova-autor {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-apagado);
}

/* --------------------------------------------------------------------------
   19. Secao 11 - o que voce esta acessando
   -------------------------------------------------------------------------- */
.acesso-grade {
  display: grid;
  gap: 2.5rem;
}

@media (width >= 1024px) {
  .acesso-grade {
    grid-template-columns: .8fr 1.2fr;
    gap: 5rem;
  }
}

.acesso-titulo { max-width: 14ch; }

.acessos {
  display: grid;
  column-gap: 3rem;
  border-top: 1px solid var(--fio);
}

@media (width >= 640px) {
  .acessos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.acesso-item {
  border-bottom: 1px solid var(--fio);
  padding-block: 1.25rem;
}

.acesso-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 700;
}

.acesso-desc {
  margin-top: .25rem;
  margin-left: 0;
  font-size: .975rem;
  color: var(--texto-apagado);
}

/* --------------------------------------------------------------------------
   20. Secao 12 - comparacao
   -------------------------------------------------------------------------- */
.comp-titulo {
  margin-top: 1rem;
  max-width: 22ch;
}

.comp-grade {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}

@media (width >= 768px) {
  .comp-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.comp-caixa {
  border-radius: 10px;
  border: 1px solid var(--borda);
  background-color: var(--fundo);
  padding: 1.75rem;
}

.comp-caixa-o2 {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in oklab, var(--marca-primaria) 25%, transparent);
  background-color: var(--cartao);
}

.comp-fita {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background-image: linear-gradient(to right in oklab,
    var(--marca-secundaria) 0%, var(--marca-primaria) 100%);
}

.comp-cabeca {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--texto-apagado);
}

.comp-cabeca-o2 { color: var(--marca-primaria); }

.comp-sub {
  margin-top: .25rem;
  font-size: .875rem;
  line-height: 1.25rem;
  color: var(--texto-apagado);
}

.comp-lista { margin-top: 1.25rem; }

.comp-lista > li:not(:last-child) { border-bottom: 1px solid var(--fio); }

.comp-item {
  padding-block: .625rem;
  font-size: .95rem;
  color: var(--texto-apagado);
}

.comp-item-o2 {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block: .625rem;
  font-size: .95rem;
  font-weight: 500;
}

.comp-traco {
  height: 1px;
  width: .75rem;
  flex-shrink: 0;
  background-color: var(--marca-destaque);
}

.comp-fecho { margin-top: 2.5rem; }

.comp-nota {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--texto-apagado);
}

.comp-nota-2 { margin-top: .5rem; }

/* frase de efeito, repetida em varias secoes */
.afirmacao {
  font-family: var(--fonte-titulo);
  text-wrap: balance;
  font-size: clamp(1.25rem, 1.05rem + .75vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin-top: 1.5rem;
}

.afirmacao-destaque { color: var(--marca-secundaria); }
.afirmacao-2 { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   21. Secao 13 - para quem e
   -------------------------------------------------------------------------- */
.publico-grade {
  display: grid;
  gap: 3rem;
}

@media (width >= 1024px) {
  .publico-grade {
    grid-template-columns: .95fr 1.05fr;
    gap: 5rem;
  }
}

.publico-titulo { max-width: 16ch; }

.criterios > li:not(:last-child) { margin-block-end: 1rem; }

.criterio {
  display: flex;
  gap: .75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.icone-check {
  margin-top: .375rem;
  flex-shrink: 0;
  color: var(--marca-destaque);
}

.criterio-texto { min-width: 0; }

.setores {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-top: 1px solid var(--fio);
  padding-top: 2rem;
}

.setor {
  border-radius: 2147483647px;
  border: 1px solid var(--fio);
  padding: .375rem .75rem;
  font-size: .875rem;
  line-height: 1.25rem;
  color: var(--texto-apagado);
}

/* --------------------------------------------------------------------------
   22. Secao 14 - quem conduz
   -------------------------------------------------------------------------- */
.conduz-grade {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

@media (width >= 1024px) {
  .conduz-grade {
    grid-template-columns: 1.05fr .95fr;
    gap: 4rem;
  }
}

.conduz-titulo {
  margin-top: 1rem;
  max-width: 20ch;
}

.conduz-nome {
  margin-top: 1.5rem;
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.conduz-cargo {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--texto-apagado);
}

.conduz-bio {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.625;
}

.credenciais { margin-top: 2rem; }

.credenciais > li:not(:last-child) { margin-block-end: 1rem; }

.credencial {
  display: flex;
  gap: .75rem;
  font-size: .9375rem;
  line-height: 1.375;
}

.credencial-ponto {
  margin-top: .45rem;
  width: .375rem;
  height: .375rem;
  flex-shrink: 0;
  border-radius: 2147483647px;
  background-color: var(--marca-destaque);
}

.credencial-texto { min-width: 0; }

.conduz-foto {
  margin-inline: auto;
  width: 100%;
  max-width: 440px;
}

.retrato {
  border-radius: 14px;
  border: 1px solid var(--borda);
  background-color: var(--fundo-suave);
  padding: .75rem;
}

/* a foto tem proporcao propria (864x864): quadrado e largura cheia, sem altura fixa */
.retrato-imagem {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.retrato-legenda {
  padding: 1rem .25rem .25rem;
  font-size: .8125rem;
  line-height: 1.375;
  color: var(--texto-apagado);
}

.retrato-nome {
  font-weight: 600;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   23. Secao 15 - conversa de diagnostico
   -------------------------------------------------------------------------- */
.diag { scroll-margin-top: 5rem; }

.diag-grade {
  display: grid;
  gap: 2.5rem;
}

@media (width >= 1024px) {
  .diag-grade {
    grid-template-columns: 1fr .95fr;
    gap: 5rem;
  }
}

/* no celular o formulario vem primeiro; no desktop o texto volta para a esquerda */
.diag-texto { order: 2; }
.diag-formulario { order: 1; }

@media (width >= 1024px) {
  .diag-texto { order: 1; }
  .diag-formulario { order: 2; }
}

.diag-titulo { max-width: 18ch; }

.diag-lede {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.diag-lede-2 { margin-top: 1rem; }

.diag-h3 {
  margin-top: 2.5rem;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.diag-passos { margin-top: 1.5rem; }

.diag-passos > li:not(:last-child) { margin-block-end: .75rem; }

.diag-passo {
  display: flex;
  gap: .75rem;
  font-size: 1.0625rem;
}

.diag-num {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--marca-destaque);
}

.diag-passo-texto { min-width: 0; }

.formulario {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background-color: var(--cartao);
  box-shadow: 0 2px 10px rgba(20, 32, 96, .05);
}

.formulario-cabeca {
  border-bottom: 1px solid var(--fio);
  background-color: var(--marca-tinta-clara);
  padding: 1rem 1.5rem;
}

.formulario-chapeu {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--marca-primaria);
}

.formulario-corpo { padding: 1.5rem; }

@media (width >= 640px) {
  .formulario-cabeca { padding-inline: 2rem; }
  .formulario-corpo { padding: 2rem; }
}

.formulario form > *:not(:last-child) { margin-block-end: 1.25rem; }

.campo-rotulo {
  display: block;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--texto);
}

.campo {
  margin-top: .5rem;
  min-height: 48px;
  width: 100%;
  border-radius: var(--raio-m);
  border: 1px solid var(--campo);
  background-color: var(--fundo);
  padding: .625rem .875rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--texto);
  outline: none;
  transition: color, background-color, border-color, outline-color,
              text-decoration-color, fill, stroke ;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.campo::placeholder { color: var(--texto-apagado); }
.campo:focus { border-color: var(--marca-destaque); }

/* armadilha para robo: fora da tela, nunca preenchida por gente */
.armadilha {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  opacity: 0;
}

.btn-enviar {
  display: flex;
  min-height: 52px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-m);
  background-color: var(--cta);
  padding: .75rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cta-texto);
  transition: color, background-color, border-color, outline-color,
              text-decoration-color, fill, stroke ;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.btn-enviar:hover { background-color: var(--cta-hover); }

/* --------------------------------------------------------------------------
   24. Rodape
   -------------------------------------------------------------------------- */
.rodape {
  border-top: 1px solid var(--borda);
  background-color: var(--fundo-suave);
  padding-block: 2.5rem;
}

.rodape-caixa {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: .875rem;
  line-height: 1.25rem;
  color: var(--texto-apagado);
}

.rodape-linha {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (width >= 640px) {
  .rodape-linha {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.rodape-logo {
  width: auto;
  max-width: 100%;
  height: 44px;
  flex-shrink: 0;
  align-self: flex-start;
  object-fit: contain;
  opacity: .9;
}

.rodape-legal {
  border-top: 1px solid var(--borda);
  padding-top: 1.25rem;
  font-size: .75rem;
  line-height: 1.625;
}

.rodape-endereco { margin-top: .25rem; }

/* --------------------------------------------------------------------------
   25. Flutuantes: barra fixa no celular e o botao da Aline
   Medido: a barra so existe abaixo de 768px e aparece quando a rolagem passa
   de 85% da altura da janela e a secao #diagnostico nao esta na tela.
   -------------------------------------------------------------------------- */
.barra-fixa {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  border-top: 1px solid var(--borda);
  background-color: color-mix(in oklab, var(--fundo) 95%, transparent);
  backdrop-filter: blur(8px);
  padding: .75rem 1rem;
  pointer-events: none;
  transform: translateY(100%);
  opacity: 0;
  transition: opacity var(--dur-micro) var(--suavizacao),
              transform var(--dur-micro) var(--suavizacao);
}

.barra-fixa[data-visivel="true"] {
  pointer-events: auto;
  transform: none;
  opacity: 1;
}

@media (width >= 768px) {
  .barra-fixa { display: none; }
}

.barra-fixa-botao {
  display: flex;
  min-height: 48px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-m);
  background-color: var(--cta);
  padding-inline: 1.25rem;
  font-size: 1rem;
  line-height: 1.5rem;   /* text-base traz a propria entrelinha */
  font-weight: 600;
  color: var(--cta-texto);
  transition: color, background-color, border-color, outline-color,
              text-decoration-color, fill, stroke ;
  transition-duration: var(--dur-micro);
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.barra-fixa-botao:hover { background-color: var(--cta-hover); }

.aline {
  position: fixed;
  bottom: 5rem;
  right: 1rem;
  z-index: 40;
}

@media (width >= 768px) {
  .aline {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

.aline-botao {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: 2147483647px;
  border: 2px solid var(--marca-destaque);
  background-color: var(--cartao);
  padding: .25rem 1rem .25rem .25rem;
  box-shadow: 0 10px 24px -10px rgba(20, 32, 96, .5);
  transition: transform, translate, scale, rotate;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.aline-botao:hover { transform: translateY(-2px); }

.aline-avatar { position: relative; }

.aline-foto {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 2147483647px;
  object-fit: cover;
}

.aline-pontinho {
  position: absolute;
  bottom: 0;
  right: 0;
  width: .75rem;
  height: .75rem;
  border-radius: 2147483647px;
  border: 2px solid var(--cartao);
  background-color: var(--marca-destaque);
}

.aline-texto {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--texto);
}

/* --- o dialogo que o botao da Aline abre -------------------------------- */
/* Medido no estado aberto da original: 340px de largura (ou a janela menos
   2rem), 12px acima do botao, e entra com o quadro o2-step-in. */
@keyframes o2-entrada {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

.aline-dialogo {
  margin-bottom: .75rem;
  width: min(340px, calc(100vw - 2rem));
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background-color: var(--cartao);
  box-shadow: 0 18px 40px -16px rgba(20, 32, 96, .45);
  animation: o2-entrada var(--dur-conteudo) var(--suavizacao) both;
}

.aline-cabeca {
  display: flex;
  align-items: center;
  gap: .75rem;
  background-color: var(--escuro);
  color: var(--escuro-texto);
  padding: .75rem 1rem;
}

.aline-cabeca-foto {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 2147483647px;
  object-fit: cover;
}

.aline-cabeca-texto {
  flex: 1 1 0%;
  line-height: 1.25;
}

.aline-cabeca-nome {
  font-size: .875rem;
  font-weight: 600;
}

.aline-cabeca-nota {
  font-size: .75rem;
  opacity: .8;
}

.aline-fechar {
  border-radius: .25rem;
  padding: .25rem;
  display: flex;
}

.aline-fechar:hover {
  background-color: color-mix(in oklab, var(--escuro-texto) 10%, transparent);
}

.icone-x {
  width: 1.25rem;
  height: 1.25rem;
}

.aline-form {
  max-height: 60vh;
  overflow-y: auto;
  padding: 1rem;
}

.aline-form > *:not(:last-child) { margin-block-end: .75rem; }

.aline-saudacao {
  border-radius: var(--raio);
  background-color: var(--fundo-suave);
  padding: .5rem .75rem;
  font-size: .875rem;
  line-height: 1.25rem;
  color: var(--texto);
}

.aline-rotulo {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--texto);
}

.aline-campo {
  margin-top: .25rem;
  min-height: 44px;
  width: 100%;
  border-radius: var(--raio-m);
  border: 1px solid var(--campo);
  background-color: var(--fundo);
  padding-inline: .75rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--texto);
  outline: none;
}

.aline-campo:focus { border-color: var(--marca-destaque); }

.aline-enviar {
  display: flex;
  min-height: 48px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-m);
  background-color: var(--cta);
  padding-inline: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cta-texto);
  transition: color, background-color, border-color, outline-color,
              text-decoration-color, fill, stroke ;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.aline-enviar:hover { background-color: var(--cta-hover); }