/* =========================================================
   mbq_front - layout mockup (page builder)
   - grid 2 columnas
   - main transparente
   - sidebar con tarjetas blancas tipo noticias
   - EXCEPCION: SOLO contribuidores populares en crema (#f6efe3)
========================================================= */

/* base spacing */
.mbqFront .mbqWrap{
  padding-left:12px;
  padding-right:12px;
}

/* layout columns */
.mbqFront .mbqColumns{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:22px;
  align-items:start;
}

.mbqFront .mbqMain,
.mbqFront .mbqSidebar{
  min-width:0;
}

/* secciones del page builder sin estilos propios */
.mbqFront .mbqSection{
  background:transparent !important;
  padding:0 !important;
  box-shadow:none !important;
  border:none !important;
}

/* =========================================================
   CONTENEDOR PADRE LOGROS (wrapper externo)
========================================================= */

.mbqBottomColLogros{
  background:linear-gradient(135deg,#efe4f5 0%, #ffffff 100%);
  border-radius:24px;
  padding:22px;

  box-shadow:
    0 20px 45px rgba(107,43,122,0.12),
    0 6px 18px rgba(0,0,0,0.05);

  border:1px solid rgba(139,47,163,0.10);

  position:relative;
  overflow:visible;
}

/* separacion interna entre widgets si hubiese mas */
.mbqBottomColLogros .ipsWidget{
  margin-bottom:18px;
}

/* elimina fondo duplicado si el widget ya tiene fondo */
.mbqBottomColLogros .mbqAchWidget{
  background:transparent;
  box-shadow:none;
  border:none;
  padding:0;
}

/* =========================================================
   SECCIÓN FINAL (LOGROS + NEWSLETTER)
   - Va DEBAJO del sidebar y DEBAJO de los artículos
   - Dos columnas iguales
========================================================= */

.mbqFront .mbqBottomGrid{
  margin-top:40px;
}

.mbqFront .mbqBottomColumns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.mbqFront .mbqBottomCol{
  min-width:0;
}

/* responsive */
@media (max-width:900px){
  .mbqFront .mbqBottomColumns{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   NEWSLETTER — icono en el título
========================================================= */

.mbqFront .mbqBottomCol.mbqNewsletterCard .mbqNewsletterTitle{
  display:flex;
  align-items:center;
  gap:8px;
}

.mbqFront .mbqBottomCol.mbqNewsletterCard .mbqNewsletterTitleIcon{
  font-size:18px;
  color:#7b1fa2;
  background:#e8dff3;
  padding:6px;
  border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}



/* =========================================================
   reset ips widgets (main): sin fondos, sin bordes, sin sombras
   nota: sidebar se re-estiliza más abajo con tarjetas blancas
========================================================= */

.mbqFront .ipsBox,
.mbqFront .ipsWidget,
.mbqFront .ipsWidget_inner,
.mbqFront .cWidgetContainer,
.mbqFront .ipsPad,
.mbqFront .ipsWidget > div,
.mbqFront .ipsBox > div{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}

/* headers ips: quitar fondo azul */
.mbqFront .ipsWidget_title,
.mbqFront .ipsType_sectionHead{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* padding interno por defecto (main) */
.mbqFront .ipsWidget_inner{
  padding:0 !important;
}

/* ocultar cajas vacías */
.mbqFront .ipsBox:empty{
  display:none !important;
}


/* =========================================================
   sidebar: tarjetas blancas uniformes (igual que noticias)
   EXCEPCION: contenedor contribuidores populares (crema)
========================================================= */

.mbqFront .mbqSidebar,
.mbqFront .mbqSidebar .ipsAreaBackground{
  background:transparent !important;
}

/* tarjeta blanca por defecto en sidebar */
.mbqFront .mbqSidebar .ipsBox,
.mbqFront .mbqSidebar .ipsWidget,
.mbqFront .mbqSidebar .ipsWidget_inner{
  background:#ffffff !important;
  border:none !important;
  border-radius:16px !important;
  box-shadow:0 10px 25px rgba(0,0,0,0.08) !important;
}

/* padding dentro de tarjetas sidebar */
.mbqFront .mbqSidebar .ipsWidget_inner{
  padding:16px !important;
}

/* =========================================================
   NEWSLETTER — estilos internos (mockup mejorado)
   * Sin fondo en sidebar
   * Tipografía mejorada
   * Icono más elegante
   * Botón premium
========================================================= */

.mbqNewsletter{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* título */
.mbqNewsletterTitle{
  margin:0;
  padding:0;
  font-weight:900;
  font-size:18px;
  letter-spacing:-0.3px;
  color:#2b1034;
  text-transform:lowercase;
}

/* cuerpo */
.mbqNewsletterBody{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* icono */
.mbqNewsletterIcon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#7b1fa2,#d05ce3);
  color:#fff;
  font-size:22px;
  box-shadow:0 12px 24px rgba(0,0,0,0.18);
}

/* texto */
.mbqNewsletterText{
  color:#5a5560;
  font-size:14px;
  line-height:1.55;
  font-weight:400;
}

/* botón premium */
.mbqNewsletterBtn{
  display:flex;
  justify-content:center;
  align-items:center;
  background:#7b1fa2;
  color:#fff !important;
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  letter-spacing:0.3px;
  text-decoration:none !important;
  transition:all .18s ease;
  box-shadow:0 8px 18px rgba(123,31,162,0.25);
}

.mbqNewsletterBtn:hover{
  background:#5e1780;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(123,31,162,0.35);
}

/* =========================================================
   NEWSLETTER — tarjeta premium SOLO en mbqBottomCol
   Fondo mejorado + botón más pequeño + spacing
========================================================= */

.mbqFront .mbqBottomCol.mbqNewsletterCard{
  background:#f0e9f7; /* nuevo fondo más suave y elegante */
  border-radius:20px;
  padding:26px;
  border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 14px 32px rgba(0,0,0,0.10);
}

/* =========================================================
   NEWSLETTER — título igual al bloque LOGROS
========================================================= */

/* =========================================================
   NEWSLETTER — icono en el título (estilo Logros)
========================================================= */

.mbqFront .mbqBottomCol.mbqNewsletterCard .mbqNewsletterTitle{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px 0 !important;
  padding:0 !important;
  font-weight:900 !important;
  font-size:18px !important;
  letter-spacing:-0.3px !important;
  color:#2b1034 !important;
  text-transform:lowercase !important;
}

/* icono estilo Logros */
.mbqFront .mbqBottomCol.mbqNewsletterCard .mbqNewsletterTitleIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#fff;
  background:linear-gradient(135deg,#7b1fa2,#d05ce3);
  padding:10px;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}


/* icono */
.mbqFront .mbqBottomCol.mbqNewsletterCard .ipsType_veryLarge i{
  background:linear-gradient(135deg,#7b1fa2,#d05ce3);
  color:#fff;
  padding:14px;
  border-radius:16px;
  font-size:20px;
  box-shadow:0 12px 24px rgba(0,0,0,0.18);
}

/* texto */
.mbqFront .mbqBottomCol.mbqNewsletterCard .ipsWidget_inner{
  padding:0 !important;
}

.mbqFront .mbqBottomCol.mbqNewsletterCard .ipsWidget_inner p{
  color:#5a5560;
  font-size:14px;
  line-height:1.55;
  margin-bottom:14px; /* espacio entre texto y botón */
}

/* botón premium reducido */
.mbqFront .mbqBottomCol.mbqNewsletterCard .ipsButton{
  background:#7b1fa2 !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:10px 14px !important; /* botón más pequeño */
  font-weight:800 !important;
  font-size:12px !important; /* tamaño reducido */
  letter-spacing:0.2px;
  border:none !important;
  box-shadow:0 6px 14px rgba(123,31,162,0.25);
  transition:all .18s ease;
}

.mbqFront .mbqBottomCol.mbqNewsletterCard .ipsButton:hover{
  background:#5e1780 !important;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(123,31,162,0.35);
}


/* =========================================================
   SOLO: contribuidores populares en color crema
   (marca el wrapper del bloque con class="mbqTopContrib")
========================================================= */

.mbqFront .mbqSidebar .mbqTopContrib{
  background-color:#f6efe3 !important;
}

.mbqFront .mbqSidebar .mbqTopContrib .ipsWidget_inner,
.mbqFront .mbqSidebar .mbqTopContrib #elTopContributors_content,
.mbqFront .mbqSidebar .mbqTopContrib #elTopContributors_content.ipsWidget_inner{
  background:transparent !important;
}

/* opcional: que el padding lo controle tu bloque */
.mbqFront .mbqSidebar .mbqTopContrib .ipsWidget_inner{
  padding:0 !important;
}


/* =========================================================
   responsive general
========================================================= */

@media (max-width:768px){
  .mbqFront .mbqColumns{
    grid-template-columns:1fr;
  }
}