/* ==========================================================
 * CN WPA — Banner Hero (reutilizable)
 * - Aumentamos especificidad para que Elementor/tema no lo pise
 * ========================================================== */

.cn-hero {
  position: relative;
  /*border: 1px solid rgba(0,0,0,.08);*/
  border-radius: 18px;
  background: rgba(97, 111, 92, .07);
  background-image: var(--cn-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 18px;
  margin: 0 0 18px;
}

/*
 * Si hay imagen de fondo, aplicamos una capa clara para asegurar
 * legibilidad del texto.
 */
.cn-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .78);
  border-radius: inherit;
  pointer-events: none;
}

.cn-hero .cn-hero__inner {
  position: relative;
}

.cn-hero--sticky {
  position: sticky;
  top: 18px;
  z-index: 2;
}

/* Más especificidad (h2 + clase) para kits de Elementor */
.cn-hero h2.cn-hero__title {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.15;
}

.cn-hero p.cn-hero__subtitle {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  opacity: .9;
}

.cn-hero .cn-hero__btn {
  border-radius: 12px;
}


@media (max-width: 580px) {
  .cn-hero {
    padding: 12px;
    margin: 0 0 12px;
  }

  .cn-hero h2.cn-hero__title {
    font-size: 18px;
  }

  .cn-hero p.cn-hero__subtitle {
    font-size: 11px;
  }

  .cn-hero .cn-hero__btn {
    padding: 8px 16px;
    font-size: 12px;
  }

}