/* =========================================================
   KYNOX SYSTEMS — PRECIOS / PROMO
   Este archivo se carga DESPUÉS de styles.css y projects-panel.css
   para que ningún estilo anterior pise estos cambios.
   ========================================================= */

/* ---------- OFERTA -50% PORTADA ---------- */
.promo-stat strong {
  color: #ffbd4a !important;
  text-shadow:
    0 0 7px rgba(255, 189, 74, 0.72),
    0 0 18px rgba(255, 189, 74, 0.28) !important;
}

.promo-stat span {
  color: #ffd58a !important;
}


/* =========================================================
   BASIC + ADVANCED
   El contorno se aplica A LAS LETRAS/NÚMEROS, no crea una caja.
   ========================================================= */

.price-grid .price-card:nth-child(1) .price strong,
.price-grid .price-card:nth-child(2) .price strong {
  color: #ffffff !important;

  /* Contorno azul visible */
  -webkit-text-stroke: 1.15px #249cff;
  paint-order: stroke fill;

  /* Refuerzo del contorno para que se vea bien en Chrome */
  text-shadow:
     1px  0    0 #249cff,
    -1px  0    0 #249cff,
     0    1px  0 #249cff,
     0   -1px  0 #249cff,
     1px  1px  0 rgba(36,156,255,.70),
    -1px -1px  0 rgba(36,156,255,.70),
     0    0    8px rgba(36,156,255,.60),
     0    0   18px rgba(36,156,255,.28) !important;

  transition:
    text-shadow .22s ease,
    transform .22s ease;
}

.price-grid .price-card:nth-child(1):hover .price strong,
.price-grid .price-card:nth-child(2):hover .price strong {
  text-shadow:
     1px  0    0 #2aa5ff,
    -1px  0    0 #2aa5ff,
     0    1px  0 #2aa5ff,
     0   -1px  0 #2aa5ff,
     1px  1px  0 rgba(42,165,255,.85),
    -1px -1px  0 rgba(42,165,255,.85),
     0    0   10px rgba(42,165,255,.78),
     0    0   24px rgba(42,165,255,.42) !important;
}


/* =========================================================
   PREMIUM
   No hace falta añadir "MÁS COMPLETO" en el HTML.
   La chapita se genera sola desde CSS.
   ========================================================= */

/* Si quedó una chapita manual de pruebas, la ocultamos. */
.premium-badge {
  display: none !important;
}

.price-grid .price-card:nth-child(3) {
  border: 1px solid rgba(255, 191, 68, .82) !important;

  box-shadow:
    inset 0 0 52px rgba(255, 191, 68, .025),
    0 0 0 1px rgba(255, 191, 68, .035),
    0 0 20px rgba(255, 191, 68, .10) !important;

  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

/* Chapita automática */
.price-grid .price-card:nth-child(3)::before {
  content: "MÁS COMPLETO";
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;

  padding: 5px 8px;
  border: 1px solid rgba(255, 193, 77, .75);
  border-radius: 6px;

  background: rgba(255, 193, 77, .085);
  color: #ffc64f;

  font-size: 7px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .055em;

  box-shadow:
    inset 0 0 12px rgba(255, 193, 77, .025),
    0 0 13px rgba(255, 193, 77, .10);
}

.price-grid .price-card:nth-child(3):hover {
  border-color: #ffc44d !important;

  box-shadow:
    inset 0 0 58px rgba(255, 193, 77, .045),
    0 0 0 1px rgba(255, 193, 77, .06),
    0 0 30px rgba(255, 193, 77, .17) !important;

  transform: translateY(-3px);
}

/* Presupuesto personalizado: blanco con detalle dorado muy sutil */
.price-grid .price-card:nth-child(3) .custom-price {
  color: #fffaf0 !important;
  text-shadow:
    0 0 8px rgba(255, 193, 77, .20),
    0 0 18px rgba(255, 193, 77, .08) !important;
}


/* ---------- MÓVIL ---------- */
@media (max-width: 620px) {
  .price-grid .price-card:nth-child(1) .price strong,
  .price-grid .price-card:nth-child(2) .price strong {
    -webkit-text-stroke: .85px #249cff;
    text-shadow:
       1px  0   0 #249cff,
      -1px  0   0 #249cff,
       0    1px 0 #249cff,
       0   -1px 0 #249cff,
       0    0   9px rgba(36,156,255,.45) !important;
  }
}