/* ════════════════════════════════════════════════════════════════════════
   TRIXEL — planes.css
   Página de Planes y Precios. Tarjetas con imagen de referencia (Unsplash),
   color escalado por precio (más caro = más llamativo) y desglose de pagos.
   Reutiliza variables de base.css y el look de tarjetas del home.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero interior (alineado a la izquierda, estilo profesional) ─────────── */
/* Ojo: .plans-hero comparte elemento con .container, así que NO limitamos su
   ancho aquí — debe conservar el mismo borde izquierdo que la grilla de
   tarjetas. El ancho de lectura se acota solo en el párrafo (__lead). */
.plans-hero {
  text-align: left;
  padding-top: var(--sp-3);
}
.plans-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
}
.plans-hero__subtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--c-violet-dark);
  margin: 0 0 var(--sp-4);
}
.plans-hero__lead {
  max-width: 62ch;
  margin: 0;
  color: var(--c-text-soft);
  font-size: var(--fs-md);
}

/* ── Grid de planes ──────────────────────────────────────────────────────── */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: stretch;
}

/* ── Tarjeta base ────────────────────────────────────────────────────────── */
.plan {
  --plan-accent: var(--c-violet);
  --plan-accent-dark: var(--c-violet-dark);
  --plan-tint: var(--c-violet-tint);
  --plan-surface: var(--c-white);
  --plan-on-surface: var(--c-text);

  display: flex;
  flex-direction: column;
  background: var(--plan-surface);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--plan-accent);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 20px rgba(20, 18, 28, 0.12);
  overflow: hidden;
  transition: box-shadow var(--t-base);
}
.plan:hover {
  box-shadow: var(--sh-lg);
}

/* ── Imagen de referencia (Unsplash) ─────────────────────────────────────── */
.plan__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--plan-tint);
  overflow: hidden;
}
.plan__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Velo de color de marca sobre la imagen para amarrar cada tarjeta a su tono. */
.plan__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--plan-accent) 55%, transparent) 100%);
  mix-blend-mode: multiply;
  opacity: 0.9;
}
.plan__media.is-empty { display: grid; place-items: center; }
.plan__media.is-empty::after { display: none; }

/* Etiqueta de audiencia sobre la imagen (ej. "Terapeutas y despachos"). */
.plan__audience {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-3);
  z-index: 1;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-white);
  background: rgba(20, 18, 28, 0.55);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

/* ── Cuerpo ──────────────────────────────────────────────────────────────── */
.plan__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-6);
}
.plan__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--plan-accent-dark);
  margin-bottom: var(--sp-4);
}

/* ── Precio + desglose de pagos ──────────────────────────────────────────── */
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--sp-2);
}
.plan__price-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-text);
}
.plan__price-currency { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-dim); }
.plan__pay {
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}
.plan__pay strong { color: var(--plan-accent-dark); }

/* Aviso de descuento por pago de contado. */
.plan__discount {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--plan-accent-dark);
  background: var(--plan-tint);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: var(--sp-5);
  line-height: 1.4;
}
.plan__discount svg { width: 16px; height: 16px; flex-shrink: 0; }
/* En la tarjeta oscura (t6) el aviso usa el dorado sobre fondo translúcido. */
.plan--t6 .plan__discount { color: #F4C24E; }

.plan__divider {
  height: 1px;
  background: var(--c-border);
  margin-bottom: var(--sp-5);
}

/* ── Lista de "incluye" ──────────────────────────────────────────────────── */
.plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  flex: 1;
}
.plan__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  line-height: 1.45;
}
.plan__feature-ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--plan-tint);
  color: var(--plan-accent-dark);
  display: grid;
  place-items: center;
}
.plan__feature-ico svg { width: 12px; height: 12px; }

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.plan__cta {
  margin-top: auto;
  width: 100%;
  background: var(--plan-accent);
  color: var(--c-white);
  border: 1px solid var(--plan-accent);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--plan-accent) 80%, transparent);
}
.plan__cta:hover {
  background: var(--plan-accent-dark);
  border-color: var(--plan-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--plan-accent) 90%, transparent);
}

/* ═════════════════════════════════════════════════════════════════════════
   ESCALA DE COLOR POR PRECIO
   Del más económico (neutro/cian claro) al más caro (más saturado e intenso).
   Los 3 primeros son suaves; los últimos, llamativos.
   ═════════════════════════════════════════════════════════════════════════ */

/* 1 · Landing — $4,000 · el más accesible → cian de marca, suave */
.plan--t1 {
  --plan-accent: #34B3C9;
  --plan-accent-dark: #1F8598;
  --plan-tint: #E4F5F8;
}

/* 2 · Profesional con Agenda — $6,000 → verde-azulado */
.plan--t2 {
  --plan-accent: #22B8A6;
  --plan-accent-dark: #16897B;
  --plan-tint: #E1F6F2;
}

/* 3 · Sitio Profesional — $8,000 → azul */
.plan--t3 {
  --plan-accent: #3B82F6;
  --plan-accent-dark: #2563C9;
  --plan-tint: #E6EEFE;
}

/* 4 · Sitio Corporativo — $14,000 → índigo/violeta */
.plan--t4 {
  --plan-accent: #7C5CFC;
  --plan-accent-dark: #5B3FD6;
  --plan-tint: #ECE7FE;
}

/* 5 · E-Commerce Profesional — $24,000 → magenta/rosa */
.plan--t5 {
  --plan-accent: #E0489B;
  --plan-accent-dark: #B92F7C;
  --plan-tint: #FCE6F1;
}

/* 6 · E-Commerce Corporativo — $46,000 · el más caro → dorado premium sobre
   superficie oscura para máximo protagonismo. */
.plan--t6 {
  --plan-accent: #E8A517;
  --plan-accent-dark: #C6870A;
  --plan-tint: rgba(232, 165, 23, 0.16);
  --plan-surface: var(--c-graphite);
  --plan-on-surface: var(--c-warm-white);
  border-color: var(--c-graphite-2);
  box-shadow: 0 18px 50px rgba(20, 18, 28, 0.28);
}
.plan--t6 .plan__name { color: #F4C24E; }
.plan--t6 .plan__price-amount { color: var(--c-white); }
.plan--t6 .plan__price-currency { color: rgba(255, 255, 255, 0.6); }
.plan--t6 .plan__pay { color: rgba(255, 255, 255, 0.78); }
.plan--t6 .plan__pay strong { color: #F4C24E; }
.plan--t6 .plan__divider { background: rgba(255, 255, 255, 0.14); }
.plan--t6 .plan__feature { color: rgba(255, 255, 255, 0.82); }
.plan--t6 .plan__feature-ico {
  background: rgba(232, 165, 23, 0.20);
  color: #F4C24E;
}
.plan--t6 .plan__cta { color: var(--c-graphite); }
.plan--t6 .plan__cta:hover { color: var(--c-graphite); }

/* 7 · Gimnasios — $60,000 · el más caro del catálogo → verde del brochure de
   gimnasios sobre superficie oscura, mismo tratamiento premium que el t6. */
.plan--t7 {
  --plan-accent: #12B886;
  --plan-accent-dark: #0C8F6B;
  --plan-tint: rgba(18, 184, 134, 0.16);
  --plan-surface: var(--c-graphite);
  --plan-on-surface: var(--c-warm-white);
  border-color: var(--c-graphite-2);
  box-shadow: 0 18px 50px rgba(20, 18, 28, 0.28);
}
.plan--t7 .plan__name { color: #63D6B4; }
.plan--t7 .plan__price-amount { color: var(--c-white); }
.plan--t7 .plan__price-currency { color: rgba(255, 255, 255, 0.6); }
.plan--t7 .plan__pay { color: rgba(255, 255, 255, 0.78); }
.plan--t7 .plan__pay strong { color: #63D6B4; }
.plan--t7 .plan__discount { color: #63D6B4; }
.plan--t7 .plan__divider { background: rgba(255, 255, 255, 0.14); }
.plan--t7 .plan__feature { color: rgba(255, 255, 255, 0.82); }
.plan--t7 .plan__feature-ico {
  background: rgba(18, 184, 134, 0.20);
  color: #63D6B4;
}
/* Texto oscuro sobre el verde: en blanco el contraste es 2.55:1 (ilegible);
   con el grafito sube a 6.5:1. Mismo criterio que el dorado del t6. */
.plan--t7 .plan__cta { color: var(--c-graphite); }
.plan--t7 .plan__cta:hover { color: var(--c-white); }

/* ── Nota al pie de la sección ───────────────────────────────────────────── */
.plans-note {
  text-align: center;
  max-width: 60ch;
  margin: var(--sp-8) auto 0;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .plans-grid { grid-template-columns: 1fr; }
}