/* Casinos de la portada renderizados desde /api/casinos (los edita el panel /paneladmin).
   Reemplazan los carteles que antes estaban hardcodeados en index.html. Es un mirror del
   estilo de Nahu (mismas medidas/fuentes) pero parametrizado por color: --neon = luces del
   cartel, --btn = color del botón. Usa color-mix() para derivar los glows del color elegido.
   NOTA para Nahu: las reglas viejas .pm-hero-promo / .php-* / .casino-bar* de index.css
   quedaron sin uso; se pueden borrar. */

/* ---- Contenedor del hero (donde estaban los .pm-hero-promo) ---- */
.pmc-hero-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }

/* ---- Cartel grande (hero) ---- */
.pmc-hero {
  --neon: #ff2fa8;
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px;
  width: min(860px, 94vw); padding: 16px 32px; border-radius: 16px; text-decoration: none;
  background: rgba(10, 6, 12, 0.55);
  border: 2px solid color-mix(in srgb, var(--neon) 85%, transparent);
  backdrop-filter: blur(4px);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--neon) 35%, transparent),
    0 0 46px color-mix(in srgb, var(--neon) 18%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--neon) 12%, transparent);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pmc-hero:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--neon) 55%, transparent),
    0 0 70px color-mix(in srgb, var(--neon) 30%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--neon) 20%, transparent);
}
/* Logo ACOTADO en alto y ancho: una imagen grande/cuadrada (ej. foto subida) NO agranda
   la tarjeta — se encaja dentro de una caja de ~120x46 conservando proporción. */
.pmc-logo { max-width: 120px; max-height: 46px; width: auto; height: auto; justify-self: start; object-fit: contain; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--neon) 50%, transparent)); }
.pmc-logo.plate { max-height: 54px; background: #fff; border-radius: 10px; padding: 6px 10px; }
.pmc-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pmc-perks li { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; letter-spacing: 3px; text-align: center; }
.pmc-cyan  { color: #23e5e5; text-shadow: 0 0 12px rgba(35, 229, 229, 0.55); }
.pmc-white { color: #f2eef7; text-shadow: 0 0 10px rgba(255, 255, 255, 0.35); }
.pmc-ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 16px; border-radius: 999px; background: #14090f;
  border: 1px solid color-mix(in srgb, var(--neon) 85%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 35%, transparent);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 2px;
  color: #f5c96b; text-shadow: 0 0 10px rgba(245, 201, 107, 0.5);
}
.pmc-hero .pmc-btn { justify-self: end; }

/* ---- Barra (recomendados) ---- */
.pmc-bar {
  --neon: #7c3aed;
  display: flex; align-items: center; gap: 26px; padding: 20px 28px; border-radius: 18px;
  text-decoration: none; text-align: left;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--neon) 30%, transparent) 0%,
    color-mix(in srgb, var(--neon) 7%, transparent) 45%,
    rgba(19, 17, 24, 0) 72%), #131118;
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.pmc-bar:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); }
.pmc-bar-logo { width: 230px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pmc-bar-logo img { max-height: 58px; max-width: 100%; width: auto; object-fit: contain; border-radius: 8px; }
.pmc-bar-logo.plate img { background: #fff; border-radius: 10px; padding: 9px 14px; max-height: 46px; }
.pmc-bar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pmc-bar-main { font-family: 'Inter', sans-serif; font-size: 15.5px; font-weight: 700; color: #fff; }
.pmc-bar-sub  { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: #8a8496; }

/* ---- Botón (compartido hero + barra) ----
   "neón" = fuente grafiti Bangers con outline (mismo look que el .pm-btn original de
   Nahu en el hero). "relleno" = Inter en pill sólido (mismo look que .casino-bar-cta). */
.pmc-btn {
  --btn: #ff2fa8;
  flex-shrink: 0; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.pmc-hero:hover .pmc-btn, .pmc-bar:hover .pmc-btn { transform: translateY(-1px) scale(1.03); }

.pmc-btn[data-style="neon"] {
  height: 46px; padding: 0 30px; border-radius: 12px;
  font-family: 'Bangers', 'Bebas Neue', sans-serif; font-size: 20px; font-weight: 400;
  letter-spacing: 2.5px; text-transform: none;
  color: color-mix(in srgb, var(--btn) 45%, #fff);
  background: color-mix(in srgb, var(--btn) 8%, transparent);
  border: 2px solid color-mix(in srgb, var(--btn) 85%, transparent);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--btn) 35%, transparent),
    0 0 40px color-mix(in srgb, var(--btn) 16%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--btn) 16%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--btn) 75%, transparent);
  backdrop-filter: blur(6px);
}
.pmc-hero:hover .pmc-btn[data-style="neon"], .pmc-bar:hover .pmc-btn[data-style="neon"] {
  color: #fff; background: color-mix(in srgb, var(--btn) 18%, transparent);
}

.pmc-btn[data-style="solid"] {
  padding: 13px 32px; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--btn) 78%, #fff 12%), var(--btn));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--btn) 38%, transparent);
}

/* ---- Mobile: hero y barra se apilan (igual criterio que Nahu) ---- */
@media (max-width: 720px) {
  .pmc-bar { flex-direction: column; text-align: center; gap: 14px; padding: 20px; }
  .pmc-bar-logo { width: auto; }
  .pmc-bar-info { align-items: center; }
  .pmc-bar .pmc-btn { width: 100%; text-align: center; }
}
@media (max-width: 640px) {
  .pmc-hero { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 16px; }
  .pmc-logo { width: 110px; }
  .pmc-perks li { font-size: 12px; letter-spacing: 2px; }
  .pmc-ribbon { font-size: 9px; letter-spacing: 1.5px; top: -11px; }
  .pmc-hero .pmc-btn { justify-self: center; width: 100%; text-align: center; }
}