/* ============================================================
   Gamma CNC — Banner Promocional Reutilizable (ES/EN)
   Estilo limpio, responsivo y a prueba de layouts flex/grid.
   ============================================================ */

/* 🔧 Neutraliza crecimiento si el padre es flex/grid */
#promo-anchor,
#gamma-promo-banner {
  flex: 0 0 auto !important;   /* no crecer en contenedores flex */
  align-self: center;           /* centrado vertical cuando aplica */
  width: 100%;
  max-width: 920px;             /* tope visual recomendado */
  margin: 16px auto;
  box-sizing: border-box;
}

/* ============================================================
   🔹 Banner con IMAGEN (principal)
   - Mantiene proporción 8:3 (1600x600).
   - Limita altura para evitar “ventanas” enormes.
   ============================================================ */
.promo-banner-img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 8 / 3;          /* fija proporción del banner */
  height: auto;                 /* deja que la proporción mande */
  min-height: 180px;            /* no demasiado chico en móvil */
  max-height: 320px;            /* límite para desktop */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);

  /* Imagen de fondo */
  background-color: #000;       /* fondo de seguridad */
  background-repeat: no-repeat;
  background-size: cover;       /* llena sin deformar; puede recortar */
  background-position: center 45%; /* sube un poco el foco (ajusta 40–55%) */
}

/* Capa de oscurecimiento para legibilidad del texto */
.promo-banner-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.2));
}

/* Contenido superpuesto (si usas título/CTA) */
.promo-banner-img .promo-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  color: #fff;
}

.promo-banner-img .promo-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.promo-banner-img .promo-cta {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(2px);
}

/* Hover suave (desktop) */
.promo-banner-img:hover::before {
  background: linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0.25));
  transition: background 0.35s ease;
}
.promo-banner-img:hover .promo-cta {
  background: rgba(255,255,255,0.25);
  transform: scale(1.04);
  transition: all 0.25s ease;
}

/* ============================================================
   🔹 Banner de SOLO TEXTO (fallback u offline)
   ============================================================ */
.promo-banner {
  display: block;
  width: 100%;
  max-width: 920px;
  margin: 16px auto;
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;
  font-size: 0.95rem;
  color: #222;
  background: linear-gradient(to right, #f8f8f8, #ffffff);
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  box-sizing: border-box;
}
.promo-banner a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

/* ============================================================
   🔹 Responsivo
   ============================================================ */
@media (min-width: 768px) {
  .promo-banner-img {
    max-height: 360px;          /* un poco más de respiro en desktop */
    background-position: center 50%;
  }
  .promo-banner-img .promo-title { font-size: 1.25rem; }
  .promo-banner-img .promo-cta { font-size: 1rem; padding: 8px 16px; }
}

@media (max-width: 480px) {
  .promo-banner-img .promo-title { font-size: 1rem; }
  .promo-banner-img .promo-cta { font-size: 0.85rem; padding: 5px 10px; }
}

/* ============================================================
   🔹 Accesibilidad
   ============================================================ */
#gamma-promo-banner { outline: none; }

/* ============================================================
   🔁 (Opcional) MODO CONTAIN — ver toda la imagen sin recortes
   Descomenta este bloque si prefieres bandas / relleno lateral.
   ============================================================ */
/*
.promo-banner-img {
  background-size: contain;
  background-position: center center;
  background-color: #000;  // mantiene elegante el relleno
}
*/