/* ==========================================================================
   POAB — vitrine de planos e telas de cobrança. Complementa poab.css.
   ========================================================================== */

.faixa-fundador {
  display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(185, 143, 52, .22), rgba(91, 18, 32, .10));
  border: 1px solid rgba(185, 143, 52, .55); border-left: 5px solid var(--ouro);
  border-radius: var(--raio); padding: 1rem 1.2rem; margin-bottom: 1.6rem;
}
.faixa-fundador strong:first-child {
  font-family: var(--serif); font-size: 1.15rem; color: var(--vinho);
}
.faixa-fundador span { color: #5c451a; font-size: .95rem; }

.grade-planos {
  display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  margin-bottom: 1.8rem;
}
.cartao-plano { display: flex; flex-direction: column; position: relative; margin-bottom: 0; }
.cartao-plano h2 { font-size: 1.2rem; margin-bottom: .2rem; }
.cartao-fundador { border-color: var(--ouro); box-shadow: 0 18px 38px -26px rgba(185, 143, 52, .8); }
.cartao-destaque {
  border-color: var(--ouro); border-width: 2px;
  box-shadow: 0 22px 44px -24px rgba(91, 18, 32, .55);
  background: linear-gradient(180deg, rgba(185, 143, 52, .10), transparent 42%);
}
.cartao-plano .etiqueta-breve {
  display: inline-block; align-self: flex-start; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--vinho);
  background: rgba(185, 143, 52, .18); border: 1px solid rgba(185, 143, 52, .5);
  border-radius: 999px; padding: .15rem .6rem; margin-bottom: .45rem;
}
.cartao-plano .nota-marca { font-size: .78rem; margin-bottom: .8rem; }
.preco-plano {
  font-family: var(--serif); font-size: 2.3rem; line-height: 1.1; color: var(--vinho);
  margin: .2rem 0 .5rem;
}
.preco-plano .por { font-family: var(--sans); font-size: .95rem; color: var(--tinta-suave); }
.cartao-plano .lista-marcada { margin-bottom: .6rem; }
.lista-limites { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista-limites li {
  position: relative; padding-left: 1.35rem; font-size: .88rem; color: var(--tinta-suave);
  margin-bottom: .25rem;
}
.lista-limites li::before {
  content: "×"; position: absolute; left: .15rem; color: var(--vermelho); font-weight: 700;
}
.form-checkout { margin-top: auto; }
.cartao-plano .btn { margin-top: auto; }

.aviso-plano {
  display: block; font-size: .82rem; color: var(--vermelho); margin-top: .5rem;
}
.opcao-bloqueada { opacity: .82; }
.opcao-bloqueada .opcao-numero { color: var(--tinta-suave); }

/* Porta de entrada: a Bateria de 20 é o cartão em destaque de /simulados/novo.
   Quem decide o destaque é o servidor (`planos.TAMANHO_PADRAO`); aqui é só a
   pintura. */
.cartao-opcao { position: relative; display: flex; flex-direction: column; }
.etiqueta-destaque {
  display: inline-block; align-self: flex-start; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--vinho);
  background: rgba(185, 143, 52, .18); border: 1px solid rgba(185, 143, 52, .5);
  border-radius: 999px; padding: .15rem .6rem; margin-bottom: .45rem;
}
/* Vitrine pública da 2ª fase (/fase2 para quem ainda não tem conta). */
.chip-prazo {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem;
  color: var(--vinho); background: rgba(185, 143, 52, .14);
  border: 1px solid rgba(185, 143, 52, .45); border-radius: 999px;
  padding: .25rem .8rem; margin-top: .6rem;
}
.lista-areas-vitrine {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .45rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.lista-areas-vitrine li {
  border-bottom: 1px solid var(--areia-3); padding-bottom: .35rem;
}

/* Chamada de volta ao produto, no topo do painel. */
.cartao-bateria {
  border-left: 5px solid var(--ouro);
  background: linear-gradient(120deg, rgba(185, 143, 52, .12), transparent 58%);
}
.cartao-bateria h2 { margin-bottom: .3rem; }
.form-bateria { margin-top: .8rem; }

.tempo-estimado {
  font-family: var(--sans); font-size: .85rem; font-weight: 400; color: var(--tinta-suave);
  white-space: nowrap;
}

.selo-plano {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--vinho);
  border: 1px solid rgba(185, 143, 52, .5); border-radius: 999px; padding: .2rem .7rem;
  background: rgba(185, 143, 52, .12);
}

.tabela-eventos td { font-size: .84rem; }
.linha-cortesia { background: rgba(185, 143, 52, .1); }
.cartao-alerta-estorno { border-left: 4px solid var(--vermelho); }
.cartao-alerta-estorno .contador {
  font-family: var(--sans); font-size: .8rem; background: var(--vermelho); color: #fff;
  border-radius: 999px; padding: .15rem .6rem; margin-left: .4rem;
}

@media (max-width: 560px) {
  .preco-plano { font-size: 2rem; }
  .faixa-fundador { flex-direction: column; gap: .3rem; }
}