* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;

}

/* ============================================================ */
/* SECCIÓN Y GRID */
/* ============================================================ */
.banners-section {
  padding: 48px 24px;
}

.banners-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ============================================================ */
/* BANNER BASE */
/* ============================================================ */
.promo-banner {
  position: relative;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.promo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
}

/* Degradado de color propio + oscurecido a la izquierda para
   que el texto blanco siempre se lea bien */
.promo-overlay {
  position: absolute;
  inset: 0;
}

.promo-blue .promo-overlay {
  background: linear-gradient(
    90deg,
    #0a2a52 0%,
    #0d3a78 38%,
    rgba(13, 58, 120, 0.55) 65%,
    rgba(13, 58, 120, 0.15) 100%
  );
}

.promo-green .promo-overlay {
  background: linear-gradient(
    90deg,
    #06241f 0%,
    #0c3f36 38%,
    rgba(12, 63, 54, 0.55) 65%,
    rgba(12, 63, 54, 0.15) 100%
  );
}

/* ============================================================ */
/* CONTENIDO DE TEXTO */
/* ============================================================ */
.promo-content {
  position: relative;
  z-index: 1;
  padding: 0 28px;
  max-width: 320px;
}

.promo-content h3 {
  color: #ffffff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}

.promo-content p {
  color: #e4ecf5;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 16px;
}

/* ============================================================ */
/* BOTONES */
/* ============================================================ */
.promo-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 7px;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.promo-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.promo-btn-blue {
  background: #1ba9e0;
}

.promo-btn-green {
  background: #1d8f5e;
}

/* ============================================================ */
/* RESPONSIVE */
/* ============================================================ */
@media (max-width: 760px) {
  .banners-grid {
    grid-template-columns: 1fr;
  }

  .promo-banner {
    height: 220px;
  }
}

@media (max-width: 460px) {
  .promo-content {
    max-width: 100%;
  }

  .promo-content h3 {
    font-size: 17px;
  }
}