/* ==========================================================================
   PLANOS — três cartões com ancoragem pelo topo
   ========================================================================== */
.planos{
  display:grid;
  grid-template-columns:1fr 1.12fr;   /* o destaque ganha mais largura */
  gap:26px;
  align-items:center;                  /* o destaque cresce para os dois lados */
  justify-content:center;
  max-width:800px;
  margin:0 auto;
}

.plano{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1.6px solid var(--border-color,#e2e8f0);
  border-radius:20px;
  padding:30px 26px 26px;
  text-align:left;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.plano:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.07)}

/* o do meio: o alvo */
.plano--destaque{
  border:2.6px solid var(--text-dark,#1a1a1a);
  background:var(--primary-color,#FFDC00);
  box-shadow:0 12px 34px -10px rgba(26,26,26,.28);
  padding:42px 30px 30px;
  transform:scale(1.03);
  z-index:2;
}
.plano--destaque:hover{transform:scale(1.03) translateY(-3px);box-shadow:0 18px 40px -12px rgba(26,26,26,.32)}

/* o de entrada recua um pouco, para o contraste ficar claro */
.plano:not(.plano--destaque){background:#fff}
.plano:not(.plano--destaque) .plano-valor{font-size:2.4rem;color:#3a3a42}

/* Fita: pílula preta flutuando sobre a borda de cima do card */
.plano-fita{
  position:absolute;
  top:0;left:50%;
  transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:7px;
  background:var(--text-dark,#1a1a1a);
  color:var(--primary-color,#FFDC00);
  font-family:var(--font-title,Poppins),sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 22px;
  border-radius:9999px;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(26,26,26,.32);
}
.plano-fita::before{
  content:"★";
  font-size:12px;
  letter-spacing:0;
  line-height:1;
}

.plano-nome{
  font-family:var(--font-title,Poppins),sans-serif;font-weight:800;
  font-size:1.18rem;color:var(--text-dark,#1a1a1a);letter-spacing:-.01em;
}
.plano-para{font-size:.86rem;color:#8a8a92;margin-top:4px;min-height:2.6em;line-height:1.45}

.plano-preco{margin:18px 0 4px}
.plano-de{display:block;font-size:.82rem;color:#a9a9b2}
.plano-de s{text-decoration-thickness:1.5px}
.plano-valor{
  display:block;
  font-family:var(--font-title,Poppins),sans-serif;font-weight:900;
  font-size:2.7rem;line-height:1;letter-spacing:-1.5px;color:var(--text-dark,#1a1a1a);
}
.plano--destaque .plano-valor{font-size:3.4rem}
.plano-cond{display:block;font-size:.76rem;color:#9a9aa2;margin-top:6px}

.plano-itens{list-style:none;margin:22px 0 24px;padding:0;flex:1 1 auto}
.plano-itens li{
  position:relative;padding-left:25px;margin-bottom:11px;
  font-size:.88rem;line-height:1.5;color:#555;
}
.plano-itens li::before{
  content:"✓";position:absolute;left:0;top:-1px;
  color:#3fa35f;font-weight:700;font-size:.95rem;
}
.plano-itens li.novo::before{content:"★";color:var(--primary-shadow,#c9a800)}
.plano-itens li.fora{color:#b8b8bf}
.plano-itens li.fora::before{content:"–";color:#ccc;font-weight:600}
.plano-itens strong{color:var(--text-dark,#1a1a1a);font-weight:600}

.plano-btn{
  display:block;text-align:center;text-decoration:none;
  font-family:var(--font-title,Poppins),sans-serif;font-weight:800;font-size:.98rem;
  border-radius:9999px;padding:16px 18px;
  background:#f4f4f0;color:var(--text-dark,#1a1a1a);
  border:1.6px solid var(--border-color,#e2e8f0);
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
}
.plano-btn:hover{background:#ecece6}
.plano--destaque .plano-btn{
  background:var(--primary-color,#FFDC00);border-color:transparent;
  box-shadow:0 6px 0 var(--primary-shadow,#c9a800);
  font-size:1.04rem;padding:18px 18px;
}
.plano--destaque .plano-btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--primary-shadow,#c9a800)}
.plano--destaque .plano-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--primary-shadow,#c9a800)}

.plano-selo{margin-top:11px;text-align:center;font-size:.74rem;color:#a0a0a8}

/* rodapé comum aos três */
.planos-pe{
  max-width:740px;margin:26px auto 0;text-align:center;
  font-size:.86rem;color:#777;line-height:1.65;
}
.planos-pe strong{color:var(--text-dark,#1a1a1a)}

@media(max-width:900px){
  .planos{grid-template-columns:1fr;max-width:440px;gap:20px}
  .plano--destaque{order:-1;transform:none;padding:38px 26px 26px}
  .plano--destaque:hover{transform:translateY(-3px)}
  .plano-para{min-height:0}
}


/* ---------- Destaque em amarelo sólido ----------
   Com o card amarelo, o botão inverte para preto: senão some no fundo. */
.plano--destaque .plano-nome,
.plano--destaque .plano-valor,
.plano--destaque .plano-itens strong{color:#1a1a1a}

.plano--destaque .plano-para{color:#7a6a08}
.plano--destaque .plano-de{color:#8a7500}
.plano--destaque .plano-de s{color:#8a7500}
.plano--destaque .plano-cond{color:#8a7500}
.plano--destaque .plano-itens li{color:#3d3616}
.plano--destaque .plano-itens li::before{color:#1a1a1a}
.plano--destaque .plano-itens li.novo::before{content:"★";color:#1a1a1a}
.plano--destaque .plano-selo{color:#8a7500}

.plano--destaque .plano-fita{
  background:#1a1a1a;color:var(--primary-color,#FFDC00);
}

.plano--destaque .plano-btn{
  background:#1a1a1a;color:#fff;border-color:transparent;
  box-shadow:0 6px 0 rgba(0,0,0,.35);
  font-size:1.04rem;padding:18px 18px;
}
.plano--destaque .plano-btn:hover{background:#000;transform:translateY(2px);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.plano--destaque .plano-btn:active{transform:translateY(6px);box-shadow:0 0 0 rgba(0,0,0,.35)}