/* ======================================================
   CABECERA DE EVENTO — formularios públicos
   ------------------------------------------------------
   La usan el formulario de inscripción de CIMA
   (formulario/registro_publico.html) y el de compra de
   boletos (ticketeria/comprar.html), con la plantilla
   components/cabecera_evento.html. Si cambia una, cambian
   las dos: por eso es un componente y no dos copias.

   - Mide lo mismo que la tarjeta del formulario (700 px).
     A ese ancho el banner (banner_boleto, 1200×360) entra
     entero con su proporción.
   - En pantallas estrechas la foto va anclada ARRIBA A LA
     DERECHA y se recorta la izquierda: esa esquina es donde
     los organizadores ponen su logo.
   - El velo oscurece solo abajo a la izquierda, donde va el
     texto.
   - La franja de fecha y lugar lleva la misma foto
     difuminada, no un azul oscuro liso.
   Sin banner queda en gris oscuro y la banda mide su texto.
   ====================================================== */

.cab-evento {
  --banner: none;
  max-width: 700px; width: 100%; margin: 0 auto 40px;
  border-radius: 14px; overflow: hidden;
  color: #fff; background: #111827;
  box-sizing: border-box;
}
.cab-evento__banda {
  padding: 32px; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 150px; box-sizing: border-box;
  background-color: #1f2937;
  background-image: linear-gradient(120deg, #1f2937 0%, #111827 55%, #0a0f1a 100%);
}
.cab-evento--imagen .cab-evento__banda {
  /* El alto sale del ancho de la tarjeta (máx. 700 px, 20 px de margen a cada
     lado) por 0,3, la proporción del banner. NO usar aspect-ratio con
     min-height: el mínimo se traslada al ancho, la caja se ensancha más que la
     tarjeta y el recorte se come justo la derecha, donde va el logo. */
  height: max(170px, calc(min(700px, 100vw - 40px) * 0.3));
  background-image:
    linear-gradient(15deg, rgba(10,15,26,.85) 0%, rgba(10,15,26,.4) 30%, rgba(10,15,26,0) 58%),
    var(--banner);
  background-size: cover; background-position: right top; background-repeat: no-repeat;
}
.cab-evento__cliente {
  font-size: .85rem; color: #e5e7eb; font-weight: 500; letter-spacing: .3px;
  text-transform: uppercase;
}
.cab-evento__nombre {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.15;
  margin: 4px 0 0; letter-spacing: -.5px; text-wrap: balance; max-width: 22ch;
  color: #fff;
}
.cab-evento__datos {
  display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 14px 32px;
  border-top: 1px solid rgba(255,255,255,.08); background: #111827;
  font-size: .9rem; color: #f3f4f6; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.cab-evento--imagen .cab-evento__datos {
  position: relative; isolation: isolate; background: transparent;
  border-top-color: rgba(255,255,255,.12);
  /* Sin esto el desenfoque, que se sale 40 px, tapa el título de arriba. */
  overflow: hidden;
}
.cab-evento--imagen .cab-evento__datos::before {
  /* La misma foto, desenfocada. Se sale 40 px por cada lado para que el
     desenfoque no deje un borde claro; la franja recorta lo que sobra. */
  content: ""; position: absolute; inset: -40px; z-index: -1;
  background-image: linear-gradient(rgba(10,15,26,.45), rgba(10,15,26,.45)), var(--banner);
  background-size: cover; background-position: center bottom;
  filter: blur(18px) saturate(1.15);
}
.cab-evento__dato { display: flex; gap: 8px; align-items: center; }
.cab-evento__dato svg { flex-shrink: 0; opacity: .8; }

@media (max-width: 640px) {
  .cab-evento__banda { padding: 24px 20px 18px; min-height: 130px; }
  .cab-evento--imagen .cab-evento__banda { height: max(160px, calc((100vw - 32px) * 0.3)); }
  .cab-evento__datos { padding: 12px 20px; flex-direction: column; gap: 8px; }
}