/*──────────────────────────  PRICING  ─────────────────────────*/
.pricing-modern{
  background: var(--c-background);
  padding: 5rem 1rem;
  text-align: center;
  transition: background var(--transition);
}
.pricing-header h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: .5rem;
  color: var(--c-text-primary);
  transition: color var(--transition);
}
.pricing-header p {
  font-weight: 400;
  max-width: 700px;
  margin: 0 auto 1.5rem auto;
  color: var(--c-text-muted);
  line-height: 1.5;
  transition: color var(--transition);
}

/* === Toggle de períodos === */
.toggle-buttons {
  display: inline-flex;
  background: var(--c-surface-darker);
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 3rem;
  transition: background var(--transition);
}
.toggle-buttons button {
  font-family: inherit;
  padding: .6rem 1.5rem;
  border: none;
  background: transparent;
  font-weight: 600;
  cursor: pointer;
  color: var(--c-text-primary);
  transition: background var(--transition), color var(--transition);
}
.toggle-buttons button:hover {background: color-mix(in srgb, var(--c-surface-darker) 80%, var(--c-text-primary) 10%);}
.toggle-buttons .active {background: var(--c-primary); color: var(--c-primary-text-on);}

/* === Grid de tarjetas === */
.pricing-cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1100px; margin: auto;}
.pricing-card {
  background: var(--c-surface);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 14px var(--c-shadow-color);
  transition: transform .3s, box-shadow .3s, background var(--transition);
  position: relative;
  text-align: center;
}
.pricing-card:hover {transform: translateY(-4px); box-shadow: 0 8px 24px color-mix(in srgb, var(--c-shadow-color) 150%, transparent);}
.pricing-card.popular {border: 2px solid var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-glow); transition: border-color var(--transition), box-shadow var(--transition);}
.ribbon {
  font-family: inherit;
  position: absolute;
  top: -12px;
  right: -12px;
  background: var(--c-primary);
  color: var(--c-primary-text-on);
  font-size: .75rem;
  font-weight: 600;
  padding: .4rem .8rem;
  border-radius: 20px;
  box-shadow: 0 4px 12px var(--c-shadow-color);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.plan-header h3 {font-size: 1.4rem; font-weight: 600; margin-bottom: .3rem; color: var(--c-text-primary); transition: color var(--transition);}
.plan-header .price {font-family: inherit; font-size: 2rem; color: var(--c-primary); font-weight: 800; margin-bottom: .4rem; transition: color var(--transition);}
.plan-header .period {font-family: inherit; font-size: .9rem; color: var(--c-text-muted); transition: color var(--transition);}
.plan-target {font-family: inherit; font-size: .95rem; font-weight: 400; color: var(--c-text-muted); margin-bottom: 1.5rem; line-height: 1.4; transition: color var(--transition);}

.plan-features {list-style: none; padding: 0; margin: 0 auto 2rem; max-width: 240px; text-align: left;}
.plan-features li {
  position: relative;
  padding-left: 28px;
  margin-bottom: .8rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-text-primary);
  line-height: 1.4;
  word-break: break-word;
  width: 100%;
  transition: color var(--transition);
}

.plan-features li .icon {position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; transition: background-color var(--transition);}
.icon.check {
  background-color: var(--c-icon-check);
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M6.0004 10.8001L3.2004 8.0001L2.2667 8.9334L6.0004 12.6668L14.0004 4.6668L13.0671 3.7334L6.0004 10.8001Z"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M6.0004 10.8001L3.2004 8.0001L2.2667 8.9334L6.0004 12.6668L14.0004 4.6668L13.0671 3.7334L6.0004 10.8001Z"/></svg>') no-repeat center / contain;
}
.icon.cross {
  background-color: var(--c-icon-cross);
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4.646 4.646L8 8m0 0l3.354 3.354M8 8L4.646 11.354M8 8l3.354-3.354" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4.646 4.646L8 8m0 0l3.354 3.354M8 8L4.646 11.354M8 8l3.354-3.354" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat center / contain;
}

.btn-plan {
  font-family: inherit;
  background: var(--c-primary);
  color: var(--c-primary-text-on);
  padding: .8rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: background var(--transition), color var(--transition);
}
.btn-plan:hover {background: var(--c-primary-dark);}

@media (max-width: 600px) {
  .plan-features {max-width: 100%;}
}

/* === CARDS (Old, might be unused or for different context) === */
/* These styles were present in the original components.css, keeping them grouped with pricing */
.cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; max-width: 1200px; margin: auto; text-align: left;}
.card {background: var(--c-surface); color: var(--c-text-primary); border-radius: 16px; padding: 2rem; position: relative; display: flex; flex-direction: column; gap: 1rem; transition: background var(--transition), color var(--transition);}
.card h3 {font-size: 1.3rem; color: var(--c-primary-dark); transition: color var(--transition);}
.card .price {font-size: 1.8rem; font-weight: 700; color: var(--c-primary-dark); transition: color var(--transition);}
.card .price-note {font-size: .9rem; color: var(--c-text-secondary); transition: color var(--transition);}
.card .plan-desc {font-size: .95rem; color: var(--c-text-secondary); transition: color var(--transition);}
.features-list {list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: .7rem; font-size: .95rem;}
.card--popular {border: 2px solid var(--c-primary); transition: border-color var(--transition);}