/* Tipografías */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Poppins:wght@500;700&display=swap');

:root{ --esi-text:#2A2A2A; }

.esi-videos-wrap{ width:100%; }
.esi-videos-toolbar{ display:flex; gap:12px; align-items:center; margin:12px 0 20px; flex-wrap:wrap; }
.esi-videos-toolbar input[type=search],
.esi-videos-toolbar select{ padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-family:Nunito, Arial, sans-serif; font-size:14px; color:var(--esi-text); }
.esi-videos-more{ text-align:center; margin:16px 0; }
.esi-videos-more .esi-load-more{ padding:10px 16px; border:1px solid #ddd; border-radius:8px; background:#fff; cursor:pointer; }

/* Grid responsive con flexbox */
.esi-videos-grid{ display:flex; flex-wrap:wrap; gap:16px; justify-content:flex-start; }

/* Cards fijas pequeñas (3 por fila en desktop) */
.esi-card{
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  min-height: 360px;
  box-sizing: border-box;
  display:flex; flex-direction:column;
  border:1px solid #eee; border-radius:16px; overflow:hidden; background:#fff;
}
@media (max-width:1024px){
  .esi-card{ flex:0 0 calc(50% - 16px); max-width:calc(50% - 16px); }
}
@media (max-width:640px){
  .esi-card{ flex:0 0 100%; max-width:100%; }
}

.esi-card-media{ position:relative; aspect-ratio:16/9; background:#000; }
.esi-card-media iframe,.esi-card-media video{ width:100%; height:100%; display:block; }

.esi-card-body{ padding:14px; color:var(--esi-text); flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.esi-card-title{ margin:0 0 6px; font-family:Poppins, Arial, sans-serif; font-size:16px; line-height:1.3; color:var(--esi-text);} 
.esi-card-desc{ margin:0 0 10px; font-family:Nunito, Arial, sans-serif; font-size:14px; color:var(--esi-text);} 
.esi-card-meta{ display:flex; justify-content:space-between; font-family:Nunito, Arial, sans-serif; font-size:12px; opacity:.8; }