/* Banda de llamada a la acción */
.me-banda__box {
  display: grid; gap: 1.75rem; align-items: center;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: var(--me-radius-lg);
  background: var(--me-color-bg);   /* crema de la página (22-oct; antes blanco) */
  border: 1px solid var(--me-color-border);
}
.me-section--gris .me-banda__box { border-color: transparent; }
.me-section--negro .me-banda__box { background: var(--me-color-blanco); border-color: transparent; } /* sobre negro, la tarjeta sigue blanca */
.me-section--negro .me-banda__box .me-banda__title { color: var(--me-color-text); }
.me-banda__title { margin-bottom: .6rem; font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
.me-banda__text { margin: 0; max-width: 60ch; font-size: var(--me-fs-lead); color: var(--me-color-muted); }

@media (min-width: 1025px) {
  .me-banda__box { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
  .me-banda__btns { justify-content: flex-end; }
}

/* Botón secundario dentro de la tarjeta blanca: oscuro aunque la sección sea negra */
.me-section--negro .me-banda__box .me-btn--ghost { border-color: var(--me-color-negro); color: var(--me-color-negro); }
.me-section--negro .me-banda__box .me-btn--ghost:hover { background: var(--me-color-negro); color: var(--me-color-blanco); }

/* Tarjeta celeste (widget → "Color de la tarjeta", pedido del equipo 1-oct): el mismo celeste de
   los botones, con textos en blanco como ellos. El botón principal pasa a negro para no perderse
   sobre el celeste. Contraste blanco/celeste 2,9:1 (ver nota de los botones). */
.me-banda .me-banda__box--celeste { background: var(--me-color-cta); border-color: transparent; }
.me-banda .me-banda__box--celeste .me-banda__title { color: var(--me-color-blanco); }
.me-banda .me-banda__box--celeste .me-banda__text { color: rgba(255, 255, 255, .92); }
.me-banda .me-banda__box--celeste .me-btn:not(.me-btn--ghost) { background: var(--me-color-negro); border-color: var(--me-color-negro); color: var(--me-color-blanco); }
.me-banda .me-banda__box--celeste .me-btn:not(.me-btn--ghost):hover { background: var(--me-color-blanco); border-color: var(--me-color-blanco); color: var(--me-color-negro); }
.me-banda .me-banda__box--celeste .me-btn--ghost { border-color: var(--me-color-blanco); color: var(--me-color-blanco); }
.me-banda .me-banda__box--celeste .me-btn--ghost:hover { background: var(--me-color-blanco); color: var(--me-color-negro); }

/* Mancha en una esquina (widget → "Mancha de puntos animados en una esquina", 1-oct): asoma por
   detrás de la tarjeta, abajo a un lado. Forma orgánica e irregular: 5 lóbulos desplazados que se
   desvanecen antes del borde del lienzo. */
.me-banda--mancha { position: relative; overflow: hidden; }
.me-banda--mancha > .me-container { position: relative; z-index: 1; }
.me-banda__mancha { display: none; }
@media (min-width: 768px) {
  .me-banda__mancha { display: block; position: absolute; z-index: 0; pointer-events: none; bottom: 0; width: min(38%, 520px); height: 88%; }
  .me-banda__mancha--izquierda { left: 0; }
  .me-banda__mancha--derecha { right: 0; transform: scaleX(-1); }   /* la misma forma, en espejo */
  .me-banda__mancha .me-puntos {
    display: block; width: 100%; height: 100%;
    -webkit-mask-image: radial-gradient(ellipse 34% 30% at 34% 68%, black 55%, transparent 100%), radial-gradient(ellipse 22% 26% at 16% 44%, black 48%, transparent 100%), radial-gradient(ellipse 24% 18% at 62% 82%, black 45%, transparent 100%), radial-gradient(ellipse 14% 16% at 44% 30%, black 40%, transparent 100%), radial-gradient(ellipse 12% 13% at 78% 60%, black 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 34% 30% at 34% 68%, black 55%, transparent 100%), radial-gradient(ellipse 22% 26% at 16% 44%, black 48%, transparent 100%), radial-gradient(ellipse 24% 18% at 62% 82%, black 45%, transparent 100%), radial-gradient(ellipse 14% 16% at 44% 30%, black 40%, transparent 100%), radial-gradient(ellipse 12% 13% at 78% 60%, black 35%, transparent 100%);
  }
}