/* Scoped with .ms-ponentes-wrapper / .ms-container in markup */
.ms-ponentes-wrapper { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color:#333; }
.ms-container { max-width:1800px; margin:auto; background:#fff; padding:30px; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.08); }
.ms-container h1 { text-align:center; margin-bottom:40px; color:#D5A213; font-size:2.3rem; padding-bottom:50px; }

/* layout */
.ms-speakers-section { display:flex !important; gap:40px; align-items:flex-start; min-height:70vh; }
.ms-speakers-list { flex:2; display:flex; flex-wrap:wrap; gap:15px; align-content:flex-start; border-right:1px solid #e0e0e0; padding-right:30px; max-height:80vh; overflow-y:auto; }
.ms-speakers-list::-webkit-scrollbar { width:8px; }
.ms-speakers-list::-webkit-scrollbar-track { background:#f4f7f9; border-radius:4px; }
.ms-speakers-list::-webkit-scrollbar-thumb { background:#bdc3c7; border-radius:4px; }

.speaker-item { flex-basis: calc(50% - 8px); display:flex; align-items:center; cursor:pointer; padding:10px; border:1px solid #e0e0e0; border-radius:8px; transition:all .3s; background:#fff; }
.speaker-item img { width:50px; height:50px; border-radius:50%; margin-right:15px; object-fit:cover; border:2px solid #ccc; }
.speaker-item span { font-size:0.95rem; }
.speaker-item:hover { border-color:#3498db; transform: translateY(-4px); box-shadow:0 4px 15px rgba(0,0,0,0.07); }
.speaker-item.active { background:#eaf5ff; color:#3498db; font-weight:bold; transform: translateY(-4px); box-shadow:0 4px 15px rgba(0,0,0,0.07); }

/* mobile info hidden by default */
.speaker-info-mobile { display:none; }

/* right panel */
.speaker-display { flex:3; padding-left:20px; }
.speaker-info-desktop { display:none; }
.speaker-info-desktop.active { display:block; animation: fadeIn .5s ease-in-out; }
@keyframes fadeIn { from{opacity:0; transform:translateY(15px);} to{opacity:1; transform:translateY(0);} }

.speaker-photo-large { width:200px; height:200px; border-radius:50%; object-fit:cover; margin-bottom:25px; float:left; margin-right:40px; }
.speaker-display h2 { font-size:2.2rem; margin:0; color:#2c3e50; }
.speaker-title { color:#7f8c8d; font-style:italic; font-size:1.25rem; margin-bottom:25px; display:block; }
.speaker-bio { color:#555; font-size:1.1rem; clear:both; padding-top:15px; text-align:justify; }
.speaker-bio p { margin-bottom:1em; }

/* responsive */
@media (max-width:1200px) {
  .ms-speakers-section { flex-direction:column !important; gap:0; min-height:auto; }
  .ms-speakers-list { flex-direction:column; border-right:none; padding-right:0; max-height:none; overflow-y:visible; gap:0; }
  .speaker-item { flex-basis:100%; border:none; border-bottom:1px solid #e0e0e0; border-radius:0; box-shadow:none; transform:none !important; }
  .speaker-display { display:none; }
  .speaker-info-mobile { display:block; max-height:0; overflow:hidden; padding:0; transition: max-height .4s ease-out, padding .4s; font-size:.95rem; text-align:justify; }
  .speaker-info-mobile.active { max-height:800px; padding-top:5px; padding-bottom:5px; }
  .speaker-info-mobile.active p { font-size:13px; }
}