/* ============================================================
   POKÉMON DELUXE — Seção de planos
   ------------------------------------------------------------
   Markup próprio (fora do bundle compilado). Estilos totalmente
   auto-contidos: não dependem das classes do bundle, então
   continuam funcionando mesmo se ele for regerado.
   Linguagem visual: amarelo #FFCB05 + borda/sombra sólida preta.
   ============================================================ */
.planos {
  --amarelo: #ffcb05;
  --tinta: #1a1a1a;
  --verde: #10b981;
  --verde-esc: #059669;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f1f5f9;
  padding: 3rem 1rem 3.5rem;
  scroll-margin-top: 1rem;
}

/* ---------- cabeçalho ---------- */
.planos-head { max-width: 640px; margin: 0 auto 2rem; text-align: center }
.planos-eyebrow {
  display: inline-block; background: var(--amarelo); color: var(--tinta);
  font-weight: 900; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .35rem .9rem; border-radius: 999px; border: 2px solid var(--tinta);
  box-shadow: 0 3px 0 var(--tinta);
}
.planos-head h2 {
  margin: .9rem 0 .4rem; color: var(--tinta);
  font-size: clamp(1.5rem, 5.5vw, 2.2rem); font-weight: 900;
  line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase;
}
.planos-head p { margin: 0; color: #64748b; font-weight: 700; font-size: .95rem }

/* ---------- grade ---------- */
.planos-grid {
  max-width: 1060px; margin: 0 auto;
  display: grid; gap: 1.1rem; grid-template-columns: 1fr;
  align-items: stretch;
}

/* ---------- card ---------- */
.plano {
  display: flex; flex-direction: column; text-align: center;
  background: #fff; border: 4px solid var(--tinta); border-radius: 1.25rem;
  box-shadow: 0 6px 0 var(--tinta);
  padding: 1.6rem 1.25rem 1.35rem;
}
.plano-nome {
  margin: 0; color: var(--tinta);
  font-size: 1.25rem; font-weight: 900; line-height: 1.15; text-transform: uppercase;
}
.plano-sub {
  margin: .15rem 0 1rem; color: #64748b;
  font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
}
.plano-lista {
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  display: grid; gap: .5rem; text-align: left; flex: 1 0 auto;
}
.plano-lista li {
  position: relative; padding-left: 1.6rem;
  color: #334155; font-weight: 700; font-size: .85rem; line-height: 1.35;
}
/* check verde desenhado em CSS (sem depender de ícone do bundle) */
.plano-lista li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/.62rem no-repeat;
}

/* ---------- preço ---------- */
.plano-preco {
  margin: 0 0 1rem; padding: .85rem .6rem;
  background: #f8fafc; border: 2px solid #e2e8f0; border-radius: .9rem;
}
.plano-de {
  display: block; color: #94a3b8; font-weight: 800; font-size: .8rem;
  text-decoration: line-through;
}
.plano-preco b {
  display: block; margin-top: .1rem; color: var(--verde);
  font-size: 2.3rem; font-weight: 900; line-height: 1.05; letter-spacing: -.03em;
}

/* ---------- botão ---------- */
.plano-cta {
  display: block; width: 100%; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta); background: var(--amarelo);
  border: 4px solid var(--tinta); border-radius: 1rem;
  padding: .95rem .8rem; box-shadow: 0 6px 0 var(--tinta);
  transition: transform .12s ease, box-shadow .12s ease;
}
.plano-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--tinta) }
.plano-cta:active { transform: translateY(6px); box-shadow: none }

/* ---------- card em destaque ---------- */
.plano--destaque {
  background: var(--tinta); border-color: var(--amarelo);
  box-shadow: 0 6px 0 var(--amarelo), 0 0 40px -10px rgba(255, 203, 5, .55);
}
.plano--destaque .plano-nome { color: #fff }
.plano--destaque .plano-sub { color: var(--amarelo) }
.plano--destaque .plano-lista li { color: #e2e8f0 }
.plano--destaque .plano-preco {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18);
}
.plano--destaque .plano-preco b { color: var(--amarelo) }
.plano-selo {
  display: inline-block; align-self: center; margin: -1.9rem 0 .8rem;
  background: var(--verde); color: #fff; white-space: nowrap;
  font-weight: 900; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .35rem 1rem; border-radius: 999px;
  border: 3px solid var(--tinta); box-shadow: 0 3px 0 var(--tinta);
}
.plano--destaque .plano-cta { background: var(--amarelo); border-color: var(--amarelo) }
.plano--destaque .plano-cta:hover { box-shadow: 0 8px 0 rgba(255, 203, 5, .55) }

/* ---------- rodapé da seção ---------- */
.planos-selo {
  max-width: 640px; margin: 1.8rem auto 0; text-align: center;
  color: #64748b; font-weight: 800; font-size: .82rem; line-height: 1.6;
}

/* ---------- desktop ---------- */
@media (min-width: 860px) {
  .planos { padding: 4rem 1.5rem }
  .planos-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem }
  /* o destaque cresce um pouco e ganha respiro para o selo */
  .plano--destaque { transform: scale(1.04) }
  .plano-selo { margin-top: -2.1rem }
}