/* planos.css — seção de planos residenciais PrimeNet (estilo premium) */

:root{
  --pn-roxo:#4B0053;
  --pn-roxo-escuro:#2B0031;
  --pn-borda:#3B003F;
}

/* CARD BASE */
.section-planos-res .plano-card{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  padding:1.9rem 1.8rem 1.6rem;
  box-shadow:0 16px 40px rgba(15,23,42,.14);
  border:1px solid #e3e4f0;
  background:#ffffff;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center; /* centraliza conteúdo dentro do card */
}

/* Barrinha roxa no topo */
.section-planos-res .plano-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  height:5px;
  width:100%;
  background:linear-gradient(90deg, var(--pn-roxo) 0%, #a855f7 40%, #ffd100 100%);
}

/* ============================
   PLANO EM DESTAQUE (painel)
   ============================ */
/* quando marcar "Plano em destaque" no admin (is_featured = 1) */
.section-planos-res .plano-card.plano-card--featured{
  position:relative;
  z-index:1;
  border-color:#f7b500;
  /* sombra normal + aura dourada animada */
  box-shadow:
    0 0 0 0 rgba(247,181,0,0.0),
    0 18px 40px rgba(15,23,42,.18);
  animation: prime-feature-pulse 2.8s ease-in-out infinite;
}

/* animação: dourado “rodando” em volta (aura que vai e volta)
   + plano em destaque SEMPRE um pouco maior */
@keyframes prime-feature-pulse{
  0%{
    box-shadow:
      0 0 0 0 rgba(247,181,0,0.0),
      0 18px 40px rgba(15,23,42,.18);
    transform:translateY(-2px) scale(1.05);
  }
  50%{
    box-shadow:
      0 0 0 9px rgba(247,181,0,0.75),
      0 24px 52px rgba(15,23,42,.26);
    transform:translateY(-7px) scale(1.09);
  }
  100%{
    box-shadow:
      0 0 0 0 rgba(247,181,0,0.0),
      0 18px 40px rgba(15,23,42,.18);
    transform:translateY(-2px) scale(1.05);
  }
}

/* garante que nenhum experimento antigo atrapalhe */
.section-planos-res .plano-card.plano-card--featured::after{
  content:none !important;
}

/* Em telas pequenas o destaque não cresce tanto */
@media (max-width: 900px){
  @keyframes prime-feature-pulse{
    0%{
      box-shadow:
        0 0 0 0 rgba(247,181,0,0.0),
        0 18px 40px rgba(15,23,42,.18);
      transform:translateY(-2px) scale(1.0);
    }
    50%{
      box-shadow:
        0 0 0 9px rgba(247,181,0,0.75),
        0 24px 52px rgba(15,23,42,.26);
      transform:translateY(-7px) scale(1.02);
    }
    100%{
      box-shadow:
        0 0 0 0 rgba(247,181,0,0.0),
        0 18px 40px rgba(15,23,42,.18);
      transform:translateY(-2px) scale(1.0);
    }
  }
}

/* Título 100/200/300/500/700 mega */
.section-planos-res .plano-speed{
  font-weight:500;
  letter-spacing:-.5px;
  color:#1f2a44;
  text-align:center;
  font-size: clamp(2.2rem, 2.7vw + .6rem, 3.2rem);
  margin:.2rem 0 .8rem 0;
  text-transform:capitalize; /* 1000 mega -> 1000 Mega */
}

/* Linha divisória */
.section-planos-res .plano-card hr{
  border:0;
  border-top:1px solid #e5e7ef;
  margin:.6rem 0 1.2rem;
  width:100%;
}

/* PREÇO DESTACADO em “pílula” premium */
.section-planos-res .plano-price{
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content:center;
  gap: .35rem;
  line-height: 1;
  margin: .4rem 0 1.2rem 0;
  padding: .65rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(124,58,237,.08),
    rgba(255,209,0,.06)
  );
  box-shadow: 0 10px 25px rgba(15,23,42,.12);
  color:#1f2937;
}

/* Centraliza a pílula dentro do card */
.section-planos-res .plano-price{
  margin-left:auto;
  margin-right:auto;
}

/* Valores */
.section-planos-res .plano-price .plano-currency{
  font-size: 1rem;
  font-weight: 600;
  transform: translateY(-2px);
  opacity: .9;
}

.section-planos-res .plano-price .val-int{
  font-size: 3.3rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: #4B0053;
}

.section-planos-res .plano-price .val-dec{
  font-size: 1.7rem;
  font-weight: 800;
  transform: translateY(-4px);
  color: #4B0053;
}

.section-planos-res .plano-price .plano-per{
  font-size: .9rem;
  color: #6b7280;
  transform: translateY(-2px);
}

/* LISTA COM ÍCONES — sem bolinhas extras */
.section-planos-res .plano-list{
  list-style:none;
  margin:.4rem 0 1.6rem 0;
  padding:0;
  width:100%;
}

/* mata qualquer bolinha genérica (::before) que venha de outro CSS */
.section-planos-res .plano-list li::before{
  content:none !important;
}

.section-planos-res .plano-list li{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:.45rem 0;
  color:#334155;
  font-size:1rem;
}

/* Apenas o SVG, sem círculo de fundo */
.section-planos-res .plano-list .feat-icon{
  width:auto;
  height:auto;
  background:none;
  border:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.section-planos-res .plano-list .feat-icon svg{
  width:14px;
  height:14px;
  stroke:#4B0053;
  stroke-width:2;
  fill:none;
}

/* BOTÕES QUADRADOS (base) */
.btn-square{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:1rem 1.2rem;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  text-align:center;
  transition:transform .06s ease, opacity .2s ease, box-shadow .2s ease;
}

.btn-principal{
  background:#27002C;
  color:#fff;
  border-color:var(--pn-borda);
  box-shadow:0 8px 20px rgba(43,0,49,.25);
  text-transform:uppercase;
}
.btn-principal:hover{
  transform:translateY(-1px);
  opacity:.95;
}

/* BOTÃO WHATSAPP — texto realmente centralizado */
.btn-whats{
  margin-top:.8rem;
  background:#FFD100;
  color:#111827;
  border-color:#e6c200;
  box-shadow:0 8px 18px rgba(255,209,0,.25);
  text-transform:uppercase;

  font-size:0.95rem;
  font-weight:800;
  line-height:1;

  height:54px;
  position:relative;           /* para posicionar o ícone */
  display:flex;
  align-items:center;
  justify-content:center;      /* centraliza SOMENTE o texto */

  white-space:nowrap;          /* não quebra em duas linhas */
}
.btn-whats:hover{
  transform:translateY(-1px);
  opacity:.92;
}

/* Ícone fixo na direita, fora do fluxo */
.btn-whats .zap{
  width:18px;
  height:18px;
  display:inline-block;
  background:url('../img/icons/whatsapp.svg') no-repeat center/contain;

  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
}

/* CENTRALIZAR APPS & BENEFÍCIOS E CENTRAL DE SERVIÇOS */

/* Centraliza os títulos */
.apps-beneficios-title,
.central-servicos-title {
  text-align: center;
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Centraliza o grid embaixo dos títulos */
.apps-beneficios-grid,
.central-servicos-grid {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* Ajusta cada card para ter alinhamento igual */
.apps-beneficios-grid .beneficio-item,
.central-servicos-grid .servico-item {
  max-width: 380px;
}

/* ============================
   GRID DOS PLANOS
   ============================ */

/* Desktop: SEMPRE 5 cards lado a lado */
.section-planos-res .planos-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:1.5rem;
  align-items:stretch;
}

/* Tablet grande: 3 por linha */
@media (max-width:1200px){
  .section-planos-res .planos-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* Tablet / médio: 2 por linha */
@media (max-width:900px){
  .section-planos-res .planos-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 por linha */
@media (max-width:640px){
  .section-planos-res .planos-grid{
    grid-template-columns:1fr;
  }
}