/* ── pricing.css — Pricing / Membresía section ── */

/* Two-column layout: sidebar + plans grid */
.pricing__layout {
  display: grid;
  grid-template-columns: 3fr 9fr;
}

/* Left sidebar */
.pricing__sidebar {
  border-right: var(--border-thin);
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pricing__sidebar-eyebrow {
  margin-bottom: var(--space-md);
}

.pricing__sidebar-heading {
  font-size: clamp(2rem, 4vw, 4rem);
  margin-bottom: var(--space-md);
}

.pricing__plan-count-label {
  color: #888;
  margin-bottom: var(--space-sm);
}

.pricing__plan-count {
  font-size: 4rem;
  font-weight: 900;
  color: var(--neon);
  line-height: 1;
}

/* Plans grid (3 columns) */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Individual pricing card */
.pricing-card {
  padding: var(--space-lg);
  background: var(--black);
  border-right: var(--border-thin);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.1s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:last-child {
  border-right: none;
}

/* Card elements */
.pricing-card .card-tag {
  color: #888;
  transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card .card-index {
  color: var(--neon);
  transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card .card-title {
  color: var(--white);
  transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card .card-price {
  color: var(--neon);
  transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card .card-period {
  color: #888;
  transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card .card-tagline {
  color: var(--white);
  opacity: 0.55;
  transition:
    color 0.1s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.1s;
}
.pricing-card .card-divider {
  border-top: var(--border-thin);
  transition: border-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card .card-feature {
  color: var(--white);
  font-size: 0.95rem;
  transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card .card-feature-arrow {
  color: var(--neon);
  transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card title typography */
.pricing__card-title {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

/* Price amount */
.pricing__amount {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  font-family: var(--font-display);
}

/* Price period (/ DÍA, / MES) */
.pricing__period {
  margin-top: 0.3rem;
}

/* Price container */
.pricing__price-wrap {
  margin-bottom: var(--space-lg);
}

/* Card tagline */
.pricing__tagline {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: var(--space-lg);
  min-height: 4.5rem;
}

/* Feature list */
.pricing__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pricing__feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* CTA button inside card */
.pricing-card .plan-btn {
  display: block;
  margin-top: var(--space-lg);
  border: 1px solid var(--gray-border);
  padding: 0.85rem 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  background: transparent;
  transition:
    background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.1s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card .plan-btn:hover {
  background: var(--black);
  color: var(--neon);
  border-color: var(--black);
}
.pricing-card .plan-btn:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.pricing-card .plan-btn:active {
  background: #111;
}

/* Card hover — flip everything to black-on-neon */
.pricing-card:hover {
  background-color: var(--neon);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(221, 251, 0, 0.15);
  transition:
    background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .card-tag {
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .card-index {
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .card-title {
  color: var(--black);
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .card-price {
  color: var(--black);
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .card-period {
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .card-tagline {
  color: var(--black);
  opacity: 0.6;
  transition:
    color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s;
}
.pricing-card:hover .card-divider {
  border-color: rgba(0, 0, 0, 0.2);
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .card-feature {
  color: var(--black);
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .card-feature-arrow {
  color: var(--black);
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .plan-btn {
  background: var(--black);
  color: var(--neon);
  border-color: var(--black);
  transition:
    background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .plan-btn:hover {
  background: #222;
  color: var(--neon);
}
.pricing-card:hover .plan-btn:active {
  background: #111;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .pricing__layout {
    grid-template-columns: 1fr !important;
  }
  .pricing__layout > div:first-child {
    border-right: none !important;
    border-bottom: var(--border-thin);
  }
  #membresia .reveal-stagger {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pricing-card {
    border-right: none !important;
    border-bottom: var(--border-thin);
  }
  .pricing-card:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  #membresia .reveal-stagger {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  .pricing-section > div:first-child {
    display: none;
  }
  #membresia {
    scroll-margin-top: 60px;
  }
}