/*
 * 11-garantias-preco.css
 * Seção: Garantias (checklist, 5 itens) + Investimento (processo de aplicação)
 *
 * Fundo da seção: preto (--cor-fundo-preto-puro), com um card branco grande
 * (--cor-fundo-claro) por cima, contendo 2 colunas: Garantias (esquerda) e
 * box de Investimento em fundo escuro (direita), conforme
 * docs/recon-conteudo-estrutura.md #10 e docs/recon-visual-tokens.md.
 *
 * Reuso de token: o card usa var(--oportunidade-card-radius) (24px) como
 * radius do card branco grande — mesmo valor extraído no recon para este
 * bloco, ainda que o nome do token tenha sido cunhado para a seção 12.
 *
 * [ADAPTADO — IMPORTANTE] A coluna direita não é mais uma tabela de preço com
 * 3 lotes/Hotmart/barra de progresso (copy real não tem preço público — ver
 * comentário no HTML e docs/copy-notas-11-garantias-preco.md). Todo o CSS de
 * lotes/badge de lote/preço riscado/progresso/selo Hotmart foi removido.
 * O `.garantias-preco__price-box` agora é uma composição centralizada
 * (badge + ícone + texto + CTA + nota) com `justify-content: center` para
 * ocupar com elegância a altura da coluna de Garantias ao lado — que ficou
 * mais curta (5 itens em vez de 7) mas ainda mais alta que o novo conteúdo
 * de texto+CTA sozinho. Ver nota de balanceamento visual no fim do arquivo.
 */

.garantias-preco {
  background-color: var(--cor-fundo-preto-puro);
}

.garantias-preco__card {
  background-color: var(--cor-fundo-claro);
  border-radius: var(--oportunidade-card-radius);
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* align-items: start (em vez do stretch padrão de grid): permite que as
     2 colunas tenham alturas independentes, condição necessária para o
     sticky abaixo (.garantias-preco__coluna--preco) ter espaço de sobra
     para "acompanhar" o scroll enquanto a coluna de Garantias, ao lado,
     passa por baixo dela — mesmo padrão de referência confirmado
     visualmente no site da PUCRS Online (coluna de Investimento sticky ao
     lado da grade de disciplinas), adaptado para esta seção. */
  align-items: start;
  /* overflow: hidden removido — quebraria o position: sticky da coluna de
     Investimento abaixo (um ancestral com overflow != visible vira o
     "container de scroll" de referência do elemento sticky, prendendo-o
     aos limites deste card em vez de deixá-lo acompanhar o scroll da
     página). Não fazia clipping visual necessário: o card tem fundo branco
     uniforme e o price-box já tem seu próprio border-radius. */
}

.garantias-preco__coluna {
  padding: var(--premiacao-card-padding);
}

/* ---------------------------------------------------------------------------
 * Coluna esquerda — Garantias
 * ------------------------------------------------------------------------- */

.garantias-preco__logo {
  font-size: var(--fs-lista-corpo);
  font-weight: var(--fw-card-titulo);
  color: var(--cor-texto-quase-preto);
  margin-bottom: 24px;
}

.garantias-preco__logo-hash {
  color: var(--cor-destaque-em-claro);
}

.garantias-preco__titulo {
  font-size: var(--fs-h2-garantia);
  font-weight: var(--fw-h2-garantia);
  line-height: var(--lh-h2-garantia);
  color: var(--cor-azul-marinho);
  margin-bottom: 32px;
}

.garantias-preco__titulo em {
  font-style: italic;
  font-weight: var(--peso-semibold);
}

.garantias-preco__checklist {
  display: flex;
  flex-direction: column;
}

.garantias-preco__check-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* 20px (antes 16px): a lista caiu de 7 para 5 itens (copy real), então cada
     item ganha um pouco mais de respiro vertical — ajuda a coluna de
     Garantias a preencher a altura do card com a mesma proporção elegante de
     antes, em vez de ficar visualmente "curta" ao lado da nova coluna de
     Investimento (bem mais simples que a antiga tabela de preço). */
  padding-block: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.garantias-preco__check-item:last-child {
  border-bottom: none;
}

.garantias-preco__check-icone {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1.5px solid var(--cor-azul-marinho);
  color: var(--cor-azul-marinho);
}

.garantias-preco__check-icone svg {
  width: 16px;
  height: 16px;
}

.garantias-preco__check-texto {
  font-size: var(--fs-lista-corpo);
  font-weight: var(--fw-lista-corpo);
  line-height: var(--lh-lista-corpo);
  color: var(--cor-texto-cinza-escuro);
}

/* ---------------------------------------------------------------------------
 * Coluna direita — Box de Investimento (fundo escuro dentro do card branco)
 *
 * [ADAPTADO — IMPORTANTE] Substitui a antiga tabela de 3 lotes + Hotmart +
 * barra de progresso (sem equivalente real — copy não tem preço público).
 * Composição centralizada (badge → ícone → texto → divisor → CTA → nota),
 * com `justify-content: center` no box para distribuir o conteúdo, agora bem
 * mais enxuto, ao longo de toda a altura que a coluna ainda herda da coluna
 * de Garantias (5 itens) ao lado — em vez de deixar o conteúdo "flutuando"
 * pequeno no topo com um vão vazio embaixo.
 * ------------------------------------------------------------------------- */

.garantias-preco__coluna--preco {
  /* Sticky: a coluna de Investimento acompanha o scroll (fica "grudada" a
     --header-fixo-altura-total + 24px do topo) enquanto a coluna de
     Garantias, ao lado, passa por baixo dela — mesma técnica já usada em
     .vivencia__coluna-fixa (styles/sections/07-vivencia.css), confirmada
     visualmente como o comportamento do card de Investimento no site da
     PUCRS Online (referência do cliente, 2026-08-13). Como as 2 colunas têm
     alturas parecidas nesta seção, o efeito de "acompanhar" é sutil aqui —
     ele fica bem mais evidente quando a coluna ao lado é mais alta.
     align-self: start é necessário porque .garantias-preco__card ganhou
     align-items: start (grid não estica mais as colunas por padrão). */
  position: sticky;
  top: calc(var(--header-fixo-altura-total) + 24px);
  align-self: start;
  display: flex;
  align-items: stretch;
}

.garantias-preco__price-box {
  width: 100%;
  background-color: var(--cor-fundo-escuro-base); /* estimado — recon cita ~#0D0700/#0F0F0F */
  border-radius: var(--card-feature-radius);
  padding: var(--card-feature-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

/* Fundo neutro (mesmo tint branco-translúcido já usado em
   .como-funciona__icone, styles/sections/10-como-funciona.css) em vez de um
   tint dourado hardcoded — mantém a cor de marca só via var(--cor-*), que
   é o que o repaint de marca (tokens.css) sabe atualizar automaticamente. */
.garantias-preco__badge-processo {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cor-destaque-em-verde);
  color: var(--cor-destaque-em-verde);
  font-size: var(--fs-footer);
  font-weight: var(--fw-footer);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--botao-radius-sm);
}

/* Ícone decorativo (documento + check), substitui o número de preço em
   destaque removido — elemento visual coerente com a marca, sem inventar
   nenhum dado numérico. Mesmo tint neutro de fundo do ponto acima. */
.garantias-preco__price-icone {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--cor-destaque-em-verde);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--cor-destaque-em-verde);
}

.garantias-preco__price-icone svg {
  width: 28px;
  height: 28px;
}

.garantias-preco__price-texto {
  max-width: 380px;
  font-size: var(--fs-lista-corpo);
  font-weight: var(--fw-lista-corpo);
  line-height: var(--lh-lista-corpo);
  color: var(--cor-texto-cinza-claro);
}

.garantias-preco__price-divisor {
  width: 40px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
}

.garantias-preco__cta-btn {
  width: 100%;
  height: var(--botao-height-lg);
  max-width: var(--botao-width-lg);
  margin-inline: auto;
  background-color: var(--cor-cta-dourado);
  color: var(--cor-cta-dourado-texto);
  font-size: var(--fs-botao);
  font-weight: var(--fw-botao);
  line-height: var(--lh-botao);
  border-radius: calc(var(--botao-height-lg) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

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

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

.garantias-preco__price-nota {
  font-size: var(--fs-footer);
  font-weight: var(--fw-footer);
  color: var(--cor-texto-cinza-claro);
}

/* ---------------------------------------------------------------------------
 * Responsivo
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .garantias-preco__coluna {
    padding: 40px 32px;
  }

  .garantias-preco__titulo {
    font-size: 30px;
    line-height: 38px;
  }
}

@media (max-width: 768px) {
  .garantias-preco__card {
    grid-template-columns: 1fr;
  }

  .garantias-preco__coluna {
    padding: 32px 24px;
  }

  /* Colunas empilham em fluxo normal — sem espaço horizontal para o sticky
     lado a lado (mesmo ponto de quebra estrutural de .vivencia__coluna-fixa
     em styles/sections/07-vivencia.css). */
  .garantias-preco__coluna--preco {
    position: static;
    top: auto;
  }
}

@media (max-width: 430px) {
  .garantias-preco__coluna {
    padding: 28px 20px;
  }

  .garantias-preco__cta-btn {
    max-width: 100%;
  }

  .garantias-preco__price-icone {
    width: 56px;
    height: 56px;
  }

  .garantias-preco__price-icone svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 375px) {
  .garantias-preco__titulo {
    font-size: 26px;
    line-height: 33px;
  }
}