/* 1. Hover del boton "Ver Ahora" = mismo cyan que usan las flechas del carrusel */
.bl-card .elementor-button {
transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease !important;
}
.bl-card .elementor-button:hover,
.bl-card .elementor-button:focus {
background: rgb(0,195,255) !important;
border-color: rgb(0,195,255) !important;
box-shadow: 0 0 14px rgba(0,195,255,.65), 0 0 30px rgba(0,195,255,.35) !important;
}
.bl-card .elementor-button:hover .elementor-button-text,
.bl-card .elementor-button:focus .elementor-button-text,
.bl-card .elementor-button:hover .elementor-button-content-wrapper,
.bl-card .elementor-button:focus .elementor-button-content-wrapper {
color: #03121a !important;
}

/* 2. Tipografia elegante y consistente para los badges EP / Finalizado-En Emision */
.bla-caps-tag,
.bla-estado-tag {
font-family: 'Instrument Sans', 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: .3px !important;
}
/* Especificidad extra: le gana al reset de modo oscuro que tiene mas ancestros/elementos */
body.bla-dark-content .elementor-loop-container .e-loop-item .elementor-widget-text-editor .bla-caps-tag,
body.bla-dark-content .elementor-loop-container .e-loop-item .elementor-widget-text-editor .bla-estado-tag,
body.bla-dark-content .e-loop-item .elementor-widget-text-editor .bla-caps-tag,
body.bla-dark-content .e-loop-item .elementor-widget-text-editor .bla-estado-tag,
.bla-caps-tag,
.bla-estado-tag {
text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.35) !important;
}

/* 3. Badge TOP 10 (mismo croma que Episodio Nuevo, esquina opuesta) */
.bla-top10-badge {
position: absolute;
top: 0;
right: 0;
z-index: 6;
display: inline-flex;
align-items: center;
gap: 5px;
background: linear-gradient(135deg, #5D4EDB 0%, #6C8FE0 100%);
color: #fff;
font-family: 'Instrument Sans', 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
padding: 7px 14px;
border-radius: 0 10px 0 10px;
letter-spacing: .4px;
box-shadow: 0 2px 6px rgba(0,0,0,.4);
pointer-events: none;
line-height: 1.2;
}
.bla-top10-icon {
/* Ajuste optico: la corona ocupa su caja de borde a borde y los numeros tienen
   aire de fuente arriba/abajo, asi que aunque el flex las centra por bounding-box,
   se percibe mas abajo. La subimos un poco para que se vea centrada de verdad. */
transform: translateY(-1.5px);
}
@media (max-width: 767px) {
.bla-top10-badge { font-size: 10.5px; padding: 6px 12px; border-radius: 0 8px 0 8px; }
}

/* 4. Badge "Coming [fecha]" (Proximos Estrenos) - mismo croma que Episodio Nuevo, esquina inferior */
.bla-coming-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 6;
  background: linear-gradient(135deg, #5D4EDB 0%, #6C8FE0 100%);
  color: #fff;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px 9px 16px;
  border-radius: 0 10px 0 10px;
  letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  pointer-events: none;
  line-height: 1.2;
}
.swiper-slide:hover .bla-coming-badge,
.e-loop-item:hover .bla-coming-badge,
.bl-card:hover .bla-coming-badge {
  border-bottom-left-radius: 0 !important;
}
@media (max-width: 767px) {
  .bla-coming-badge { font-size: 10.5px; padding: 6px 12px 8px 14px; border-radius: 0 8px 0 0; }
}

/* 5. Fix: el poster pierde el border-radius superior-solo al pasar el mouse
   sobre el boton Ver Ahora/Continuar (la regla nativa de Elementor solo
   aplica ese estado al :hover del propio widget de imagen, no al de toda
   la tarjeta), causando un borde redondeado feo entre portada y overlay. */
.bl-card:hover .elementor-element-b4536f5 > .elementor-widget-container,
.swiper-slide:hover .bl-card .elementor-element-b4536f5 > .elementor-widget-container,
.e-loop-item:hover .bl-card .elementor-element-b4536f5 > .elementor-widget-container {
  border-radius: 10px 10px 0 0 !important;
}