/* ==========================================================
   BASE · Mobile (por defecto, 360px)
   ========================================================== */
.promo-banner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: var(--size-space-24, 24px) var(--size-space-12, 12px);
}

/* Modificadores de tema */
.promo-banner--dark {
  background-color: var(--Color-Surface-General-Inverse,#00402A);
  color: #fff;
}

.promo-banner--light {
  background-color: #fff;
  color: #0b3d2e;
}

/* Imágenes laterales: ocultas en móvil */
.promo-banner__media {
  display: none;
  align-items: flex-end;
}

.promo-banner__media--left {
  justify-content: flex-start;
}

.promo-banner__media--right {
  justify-content: flex-end;
}

.promo-banner__image {
  display: block;
  max-width: 100%;
  height: 100px;
  min-width: 250px;
  max-width: 250px;
  width: 250px;
}

/* Contenido */
.promo-banner__content {
  text-align: center;
}

.promo-banner__title {
  margin: 0;
  padding-bottom: 0;
  color: var(--Color-Content-General-Inverse, #FFFFFF);
}

.promo-banner__highlight {
  color: var(--Color-Content-General-Inverse, #FFFFFF);
}

/* Claim: oculto en móvil */
.promo-banner__claim {
  display: none;
  margin: 0;
}

/* ==========================================================
   576px
   ========================================================== */
@media (min-width: 576px) {
  .promo-banner__claim {
    display: block;
    margin-top: 0.5rem;
  }
}

/* ==========================================================
   768px · aparecen las imágenes laterales
   ========================================================== */
@media (min-width: 768px) {

}

/* ==========================================================
   992px
   ========================================================== */
@media (min-width: 992px) {
    .promo-banner__media {
      display: flex;
    }
  .promo-banner__media--right .promo-banner__image{
      padding: 16px;
  }
  .promo-banner {
    grid-template-columns: 1fr 2fr 1fr; /* izquierda | contenido | derecha */
    gap: 12px;
    padding: 1.5rem 2rem;
  }
  .promo-banner {
    padding: 0;
  }

  .promo-banner__claim {
    margin-top: 0;
  }
}

/* ==========================================================
   1200px · Desktop
   ========================================================== */
@media (min-width: 1200px) {
  .promo-banner {
      gap: 0px;
  }
}

/* ==========================================================
   1920px · Pantallas grandes
   ========================================================== */
@media (min-width: 1920px) {
  .promo-banner {
    grid-template-columns: 1fr 1.5fr 1fr;
  }
}