/* ================================================================
   planos.css — Seção Planos de Liberdade Visual
   Dr. Rogério Furtado — Oftalmologista
================================================================ */

#planos {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 5rem);
  background: var(--bg-mid);
  position: relative;
  overflow: hidden;
}

#planos::before {
  content: '';
  position: absolute;
  top: -200px; left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,163,122,0.04) 0%, transparent 65%);
  pointer-events: none;
}

.planos-inner { max-width: 1440px; margin-inline: auto; }

.planos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0,163,122,0.05);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.plano-card {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--cyan-border);
  margin: -1px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s, background 0.4s, transform 0.4s var(--ease-out-expo), box-shadow 0.4s;
}

.plano-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-lens);
  pointer-events: none;
}

.plano-card--destaque {
  border-color: rgba(0,163,122,0.4);
  background: rgba(0,163,122,0.04);
}

.plano-card--destaque::after {
  content: 'Mais escolhido';
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cyan);
  padding: 0.3rem 0.75rem;
  z-index: 1;
}

@media (hover: hover) {
  .plano-card:hover {
    border-color: rgba(0,163,122,0.45);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 56px rgba(0,163,122,0.09), 0 0 0 1px rgba(0,163,122,0.08);
  }
}

.plano-card__tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
}

.plano-card__name {
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 700;
  color: var(--silver);
  line-height: 1.15;
  margin-bottom: 0.85rem;
}

.plano-card__liberdade {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 1.25rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--cyan-border);
  background: var(--cyan-ghost);
  display: inline-block;
  position: relative;
  z-index: 1;
}

.plano-card__desc {
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--silver-dim);
  font-weight: 300;
  flex: 1;
  margin-bottom: 1.75rem;
  position: relative;
  z-index: 1;
}

.plano-card__cta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  position: relative;
  z-index: 1;
  transition: gap 0.3s var(--ease-out-expo);
  /* reset para quando usado como <button> */
  background: none;
  border: none;
  padding: 0.6rem 0;
  min-height: 48px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}

.plano-card:hover .plano-card__cta { gap: 0.9rem; }