/* Overlay oscuro detrás del banner */
#banner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6); /* oscurece el fondo */
  display: none; /* oculto al inicio */
  z-index: 9998; /* justo debajo del banner */
}

/* Banner centrado y ancho */
#call-to-action {
  position: fixed;
  top: 50%;   /* centro vertical */
  left: 50%;  /* centro horizontal */
  transform: translate(-50%, -50%); /* ajuste perfecto al centro */
  width: 95%; /* ancho casi completo */
  max-width: 1200px; /* límite máximo para pantallas grandes */
  background: transparent; /* sin fondo */
  box-shadow: none; /* sin sombra */
  display: none; /* oculto al inicio */
  z-index: 9999; /* encima del overlay */
  animation: fadeIn 0.5s ease forwards;
}

.cta-wrapper {
  display: flex; /* horizontal */
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px; /* espacio interno */
  position: relative;
}

.cta-content {
  flex: 1;
  margin-right: 20px;
}

.cta-image img {
  max-height: 250px; /* imagen más grande */
  border-radius: 6px;
}

.cta-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: red; /* X en rojo */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}