/* Estilos exclusivos da /gravame (carregado depois de base.css, components.css e home.css). Usa so as variaveis e
   os componentes da home; nada aqui afeta outras paginas (tudo escopado por classes .g-* ou #plans-grid desta pagina). */

/* ---------- Hero: linha de preco abaixo do botao ---------- */
.g-preco-linha {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--ink-2);
  text-align: center;
}

/* ---------- "Gravame em 30 segundos" ---------- */
.g-blocos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.g-bloco {
  background: #fbf8f1;
  border: 1px solid rgba(27, 42, 65, 0.15);
  border-top: 3px solid var(--stamp-red);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}

.g-bloco h3 { font-size: 1.1rem; }

.g-bloco p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* ---------- "Carro com gravame pode ser comprado?" ---------- */
.g-pode {
  max-width: 760px;
}

.g-pode p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 1.02rem;
}

/* ---------- "O que voce recebe": exemplos do resultado ---------- */
.g-exemplos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.g-exemplo {
  position: relative;
  background: #fbf8f1;
  border: 1px solid rgba(27, 42, 65, 0.15);
  border-radius: var(--radius-sm);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.g-exemplo-tag {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px dashed var(--ink-3);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}

.g-exemplo .stamp { align-self: flex-start; }

.g-exemplo h3 { font-size: 1.05rem; }

.g-exemplo p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.93rem;
}

.g-exemplo-nota {
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 0.85rem;
}

/* ---------- Cards dos planos (so nesta pagina) ---------- */
.g-lista-itens {
  list-style: none;
  margin: 18px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.g-lista-itens li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
}

.g-lista-itens li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--seal-green);
}

.g-nao-inclui {
  margin: 0 0 22px;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.g-mais {
  margin: 18px 0 0;
  font-weight: 600;
  font-size: 0.92rem;
}

/* Descricao da Completa legivel no fundo escuro (a da home usa cor clara de menos contraste) */
#plans-grid .plan-folder.is-featured .plan-desc,
#plans-grid .plan-folder.is-featured .g-mais,
#plans-grid .plan-folder.is-featured .g-lista-itens li {
  color: var(--paper);
}

#plans-grid .plan-folder.is-featured .g-lista-itens li::before {
  color: var(--amber);
}

.g-toggle {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 22px;
  color: var(--paper);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  cursor: pointer;
}

.g-completa-extras[hidden] { display: none; }

.g-seguro {
  margin: 28px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* ---------- Fechamento: campo da placa repetido ---------- */
.g-fechamento {
  max-width: 440px;
  margin: 0 auto;
}

.g-fechamento .section-head {
  text-align: center;
  margin: 0 auto 32px;
}

/* ---------- Botao fixo no celular ---------- */
.g-sticky {
  display: none;
}

@media (max-width: 860px) {
  .g-blocos,
  .g-exemplos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body { padding-bottom: 76px; }

  .g-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    /* direita livre para o botao flutuante do WhatsApp (fixo no canto) nao cobrir o botao */
    padding: 10px 84px calc(10px + env(safe-area-inset-bottom)) 16px;
    background: rgba(var(--paper-rgb), 0.96);
    border-top: 1px solid rgba(27, 42, 65, 0.2);
    transform: translateY(110%);
    transition: transform 0.2s ease;
  }

  .g-sticky.is-visible { transform: translateY(0); }
}