/* ========================================================================
   KORU NEXUS — Precios Page Styles
   ======================================================================== */

.page-hero {
  padding-top: calc(var(--space-3xl) + 2rem);
  padding-bottom: var(--space-2xl);
  position: relative;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(0,217,192,0.06) 0%, transparent 50%);
}

/* ========================================================================
   Pricing Toggle
   ======================================================================== */
.pricing-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px;
  margin-top: var(--space-lg);
}

.pricing-toggle__btn {
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-smooth);
}

.pricing-toggle__btn.is-active {
  background: var(--clr-primary);
  color: var(--clr-bg);
}

.pricing-toggle__btn:hover:not(.is-active) {
  color: var(--clr-white);
}

/* ========================================================================
   Comparison Table
   ======================================================================== */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.comparison-table th,
.comparison-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.comparison-table th {
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
  color: var(--clr-white);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  background: rgba(255,255,255,0.03);
  position: sticky;
  top: 0;
}

.comparison-table td {
  color: var(--clr-text-muted);
}

.comparison-table tr:hover td {
  background: rgba(255,255,255,0.02);
}

.comparison-table .highlight-col {
  background: rgba(0, 217, 192, 0.04);
  border-left: 1px solid rgba(0,217,192,0.1);
  border-right: 1px solid rgba(0,217,192,0.1);
}

.comparison-table th.highlight-col {
  color: var(--clr-primary);
  background: rgba(0, 217, 192, 0.08);
}

/* 4-column pricing override */
@media (max-width: 1024px) {
  [style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  [style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* Highlighted price text in comparison table */
.price-highlight {
  color: var(--clr-primary);
}

/* ── Light mode: pricing-toggle ── */
[data-theme="light"] .pricing-toggle {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .pricing-toggle__btn.is-active {
  color: #0D0D1A;
}
[data-theme="light"] .comparison-table th.highlight-col {
  color: #007a6a;
}
[data-theme="light"] .price-highlight {
  color: #007a6a;
}