﻿#paquetes {
  --pkg-radius: 16px;
  --pkg-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  --pkg-shadow-hover: 0 18px 42px rgba(15, 23, 42, 0.12);
}

#paquetes .tabs-container {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
}

#paquetes .pricing-grid,
#paquetes .b2b-grid {
  gap: clamp(20px, 3vw, 34px);
}

#paquetes .pricing-card {
  --pkg-accent: #64748b;
  --pkg-accent-strong: #334155;
  --pkg-soft: #f8fafc;
  --pkg-soft-2: #eef2f7;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--pkg-accent) 20%, #e2e8f0);
  border-top: 5px solid var(--pkg-accent);
  border-radius: var(--pkg-radius);
  background: #ffffff;
  box-shadow: var(--pkg-shadow);
  transform: none;
}

#paquetes .pricing-card::before {
  display: none;
}

#paquetes .pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pkg-shadow-hover);
}

#paquetes .pack-basic {
  --pkg-accent: #10b981;
  --pkg-accent-strong: #047857;
  --pkg-soft: #ecfdf5;
  --pkg-soft-2: #d1fae5;
}

#paquetes .pack-pro {
  --pkg-accent: #2563eb;
  --pkg-accent-strong: #1d4ed8;
  --pkg-soft: #eff6ff;
  --pkg-soft-2: #dbeafe;
  transform: none;
}

#paquetes .pack-pro:hover {
  transform: translateY(-3px);
}

#paquetes .pack-elite {
  --pkg-accent: #f59e0b;
  --pkg-accent-strong: #b45309;
  --pkg-soft: #fffbeb;
  --pkg-soft-2: #fde68a;
}

#paquetes .pack-b2b-pro {
  --pkg-accent: #7c3aed;
  --pkg-accent-strong: #5b21b6;
  --pkg-soft: #f5f3ff;
  --pkg-soft-2: #ede9fe;
}

#paquetes .pricing-card .card-header,
#paquetes .pricing-card .price,
#paquetes .pricing-card .cpu-compat,
#paquetes .pricing-card .pricing-features,
#paquetes .pricing-card .alert-box,
#paquetes .pricing-card .info-note,
#paquetes .pricing-card .warranty-note,
#paquetes .pricing-card .liquid-metal-note,
#paquetes .pricing-card .package-guarantee,
#paquetes .pricing-card button,
#paquetes .pricing-card .b2b-calc {
  position: relative;
  z-index: 1;
}

#paquetes .pricing-card .card-header h3 {
  color: #0f172a;
  font-size: clamp(1.22rem, 1.9vw, 1.52rem);
  letter-spacing: 0;
}

#paquetes .pricing-card .card-header p {
  color: #475569;
  font-weight: 600;
}

#paquetes .popular-tag {
  z-index: 2;
  background: var(--pkg-accent-strong) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--pkg-accent) 22%, transparent);
  letter-spacing: 0;
}

#paquetes .price {
  display: grid;
  gap: 2px;
  padding: 12px 0 16px;
  margin: 14px 0 18px;
  border-bottom: 1px solid #e2e8f0;
}

#paquetes .price h4,
#paquetes .price .price-val {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 !important;
  color: #0f172a !important;
  font-family: var(--font-main);
  font-size: clamp(2.18rem, 4vw, 3rem) !important;
  font-weight: 760 !important;
  line-height: 0.98;
}

#paquetes .price .currency,
#paquetes .price .price-val .currency,
#paquetes .price h4 .currency {
  color: var(--pkg-accent-strong) !important;
  font-size: clamp(0.82rem, 1.2vw, 1rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

#paquetes .price .price-prefix {
  color: #64748b;
  font-size: clamp(0.95rem, 1.35vw, 1.08rem) !important;
  font-weight: 650 !important;
  line-height: 1.1;
}

#paquetes .price .price-main {
  color: #0f172a;
  font-size: clamp(2.18rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 0.98;
}

#paquetes .price > span {
  color: #64748b !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

#paquetes .b2b-calc {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 7px;
  color: var(--pkg-accent-strong) !important;
  background: color-mix(in srgb, var(--pkg-accent) 11%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--pkg-accent) 26%, #ffffff);
  border-radius: 999px;
  padding: 6px 10px;
  font-style: normal;
  font-weight: 700;
}

#paquetes .b2b-calc::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pkg-accent);
}

#paquetes .cpu-compat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  padding: 0 0 18px;
  margin: 0 0 20px;
}

#paquetes .cpu-compat .comp-title {
  color: #64748b;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  margin: 4px 0 0;
  order: 2;
}

#paquetes .cpu-brand {
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
  margin: 0 !important;
  order: 3;
}

#paquetes .cpu-pills {
  gap: 6px;
  margin: 0 !important;
  order: 3;
}

#paquetes .pill {
  border-radius: 999px;
  border: 0;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 9px;
}

#paquetes .pill.gray {
  background: #f1f5f9;
  color: #334155;
}

#paquetes .pill.blue {
  background: #dbeafe;
  color: #1d4ed8;
}

#paquetes .pill.brown {
  background: #fef3c7;
  color: #92400e;
}

#paquetes .usage-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 800;
  order: 1;
  margin-bottom: 3px;
}

#paquetes .usage-dot.green {
  background: color-mix(in srgb, #10b981 11%, #ffffff);
  color: #047857;
}

#paquetes .usage-dot.blue {
  background: color-mix(in srgb, #2563eb 10%, #ffffff);
  color: #1d4ed8;
}

#paquetes .usage-dot.red {
  background: color-mix(in srgb, #f59e0b 13%, #ffffff);
  color: #b45309;
}

#paquetes .pricing-features {
  margin: 0 0 20px;
  padding: 0;
}

#paquetes .pricing-features::before {
  content: "Incluye:";
  display: block;
  margin-bottom: 9px;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 800;
}

#paquetes .pricing-features li {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 0;
  margin-bottom: 0;
  padding: 9px 0;
  color: #1e293b;
  font-weight: 600;
}

#paquetes .pricing-features li:last-child {
  border-bottom: 0;
}

#paquetes .pricing-features li i,
#paquetes .pricing-features li .fa-icon,
#paquetes .usage-dot i,
#paquetes .usage-dot .fa-icon {
  color: var(--pkg-accent-strong);
  fill: var(--pkg-accent-strong);
}

#paquetes .alert-box,
#paquetes .info-note,
#paquetes .warranty-note,
#paquetes .liquid-metal-note {
  align-items: flex-start;
  border: 0;
  border-left: 3px solid currentColor;
  border-radius: 8px;
  box-shadow: none;
  gap: 8px;
  line-height: 1.45;
  margin: 0 0 10px;
  padding: 9px 11px;
}

#paquetes .alert-box-info,
#paquetes .info-note {
  background: #f0f9ff;
  color: #1e3a8a;
}

#paquetes .alert-box-success,
#paquetes .warranty-note {
  background: #f0fdf4;
  color: #065f46;
}

#paquetes .alert-box-warning,
#paquetes .liquid-metal-note {
  background: #fff7ed;
  color: #92400e;
}

#paquetes .alert-box__icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

#paquetes .package-guarantee details {
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  background: #ffffff;
  transition: background 0.18s ease;
}

#paquetes .package-guarantee {
  margin: 12px 0 18px;
}

#paquetes .package-guarantee::before {
  content: "GarantÃ­a y preguntas frecuentes";
  display: block;
  margin-bottom: 4px;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 800;
}

#paquetes .package-guarantee summary {
  color: #0f172a;
  list-style: none;
  padding: 11px 0;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
}

#paquetes .package-guarantee summary::-webkit-details-marker {
  display: none;
}

#paquetes .package-guarantee summary::after {
  content: "+";
  float: right;
  color: var(--pkg-accent-strong);
  font-weight: 800;
  transition: transform 0.18s ease;
}

#paquetes .package-guarantee details[open] {
  background: color-mix(in srgb, var(--pkg-accent) 4%, #ffffff);
}

#paquetes .package-guarantee details[open] summary::after {
  transform: rotate(45deg);
}

#paquetes .package-guarantee p {
  color: #475569;
  font-size: 0.88rem;
  line-height: 1.55;
  margin: -2px 0 11px;
}

#paquetes .pricing-card .btn {
  background: var(--pkg-accent-strong) !important;
  border: 1px solid var(--pkg-accent-strong) !important;
  border-radius: 12px;
  color: #ffffff !important;
  font-weight: 800;
  min-height: 48px;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#paquetes .pricing-card .btn:hover {
  background: var(--pkg-accent) !important;
  border-color: var(--pkg-accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--pkg-accent) 20%, transparent);
}

#paquetes .pricing-card .pulse {
  animation: none;
}

@media (max-width: 768px) {
  #paquetes .pricing-card {
    border-radius: 16px;
    padding: 28px 20px;
  }

  #paquetes .price h4,
  #paquetes .price .price-val {
    font-size: 2.25rem !important;
  }

  #paquetes .pricing-features li {
    padding: 8px;
  }
}
