.speaker-banner {
  background-image: url("../imgs/banner-shawn.png");
  aspect-ratio: 1440/625;
  background-size: contain;
  background-position: center;
}
.title-conferencia{
  font-family: var(--font-family-text);
  font-weight: light;
  font-size: 44px;
}
.speaker-main-text{
  font-family: var(--font-family-text);
  font-weight: light;
  font-size: 16px;
  line-height: 23px;
}

.speaker-banner p {
  font-size: 1.1rem;
  color: #333; /* Un gris oscuro para el texto introductorio */
  line-height: 1.6;
}

.speaker-tabs {
  margin-bottom: 76px!important;
  padding-left: 44px;
  padding-right: 44px;
}

.speaker-tabs .nav-item .nav-link.active {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid; /* Borde visible para todas */
  margin-bottom: 5px;
}

#sobre-pane .description{
  border-left: 2px solid var(--color-gold);
  padding-left: 27px;
  margin-left: 20px;
  box-sizing: border-box;
}

.text-white{
  font-family: var(--font-family-text);
  font-size: 18px;
}

.title-section-speakers{
  color: var(--color-bg-dark)!important;
  font-size: 33px;
  margin-bottom: 65px;
}

.bg-speaker{
  background-image: url("../imgs/bg-speakers-yellow.png");
  aspect-ratio: 995/331;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 95%;
  height: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.speaker-details-section{
  padding-top: 110px;
}
.speaker-details-section .accordion-button:after{
  display: none;
}
.accordion-button:not(.collapsed){
  box-shadow: none;
}
.accordion-item{
  font-size: 18px;

}
/* Estilos para el acordeón (ejemplo, puedes personalizarlos más) */
.speaker-details-section .accordion-item {
  background-color: transparent; /* Un poco más claro que el fondo de la sección */
  margin-bottom: 16px;
  border-radius: 16px;
  border: 1px solid var(--color-titanium);

}
.accordion-item:first-of-type>.accordion-header .accordion-button{
  border-radius: 16px;
}
.accordion-header{
  border: none;
}
.speaker-details-section .accordion-button {
  background-color: transparent;
  color: var(--color-titanium);
  font-weight: var(--fw-medium);
  border-radius: 16px;
  font-family: var(--font-family-text);
  border: 1px solid transparent!important;
}

.speaker-details-section .accordion-button:not(.collapsed) {
  color: var(--color-gold);
  background-color: var(--color-bg-dark); /* Un poco más oscuro cuando está activo */
  /* box-shadow: inset 0 -1px 0 rgba(255,255,255,.125); */
}

.speaker-details-section .accordion-button:focus {
  box-shadow: 0 0 0 1px rgba(transparent); /* Sombra con color lime al enfocar */
  border-color: transparent;
}

.speaker-details-section .accordion-button::before {
  background-image: url(../imgs/arrow-close.png);
}

.speaker-details-section .accordion-button:not(.collapsed)::before {
    background-image: url(../imgs/arrow-open.png);
    /* transition: all .3s ease-in-out; */
    transform: rotate(25deg)!important;
}

.speaker-details-section .accordion-body {
  color: var(--color-titanium);
  padding: 1.25rem;
  background-color: transparent;
  border-radius: 16px;
  font-family: var(--font-family-text);
}

.speaker-tabs .nav-link{
 font-family: var(--font-family-text);
 text-transform: uppercase;
}

/* Media Queries */
.speaker-main-title{
  font-size:49px;
  line-height: 58px;
  color: var(--color-titanium);
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Estilos para pantallas extra grandes aquí */
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199.98px) {
  
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 991.98px) {
  .title-conferencia{
    font-size: 26px
  }
  .speaker-banner .row > div {
    text-align: center; /* Centrar contenido del banner en tablets */
  }
  .speaker-banner img {
    margin-bottom: 20px;
  }

  .speaker-tabs .nav-item .nav-link {
    font-size: 0.9rem; /* Reducir tamaño de fuente de pestañas */
    padding: 0.5rem 0.8rem;
  }
  .speaker-main-title {
    font-size: 2.5rem; /* Ajustar título principal dentro de las pestañas */
    line-height: 32px;
    text-align: start!important;
  }
}

.nav-tabs{
  border-bottom: none!important;
  color: var(--color-titanium)!important;
  justify-content: space-between!important;
  flex-wrap: nowrap;
}

.nav-tabs .nav-link.active{
  color: var(--color-gold)!important;
}

.nav-tabs .nav-link:hover{
  color: var(--color-gold)!important;
}
.hero-four{
  padding-top: 96px
}
.my-subtitle{
  font-family: var(--font-family-text);
}
.my-subtitle.bold{
  font-family: unset;
}
.accordion-button::before {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-left: 24px;
  margin-right: 16px;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: 40px;
  background-position: center;
  transition: var(--bs-accordion-btn-icon-transition);
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767.98px) {
  .tema-conferencia{
    min-height: 50px!important;
    margin-bottom: 34px!important;
  }
  .card-speaker{
    margin-bottom: 20px;
  }
  #sobre-pane .description {
    margin-left: 8px!important;
    margin-right: 8px!important;
  }
  .speaker-banner {
    background-image: url("../imgs/banner-shawn-mobile.png")!important;
    aspect-ratio: 375/515!important;
    display: flex; 
  }
  .text-gold{
    display: block!important;
  }
  .speaker-details-section{
    padding-top: 22px;
  }
  .speaker-details-section .row > div[class*="col-lg-"] {
    text-align: center; /* Centrar contenido de la primera pestaña */
  }
  .conocemas-links {
    justify-content: start; /* Centrar enlaces de 'Conoce más' */
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .speaker-main-title {
    font-size: 2rem; /* Ajustar título principal dentro de las pestañas */
    text-align: center;
    margin-left: 12px!important;
    margin-right: 12px!important;
  }
  #sobre-pane .col-lg-7 p {
    text-align: start; /* Justificar texto para mejor lectura */
  }
  .speaker-tabs {
    flex-direction: column; /* Pestañas en vertical */
    margin-bottom: 76px!important;
  }
  .speaker-tabs .nav-item .nav-link {
    width: 100%!important;
    text-align: center;
    border-bottom: 1px solid var(--color-gold) !important; /* Borde visible para todas */
    margin-bottom: 5px;
  }
  .speaker-tabs .nav-item .nav-link.active {
     background-color: var(--color-gold);
     color: var(--color-bg-dark);
  }
  .title-conferencia{   
    font-size: 26px!important;
  }
}
.text-gold{
  color: var(--color-gold);
  text-align: center;
  margin-bottom: 64px;
  font-family: var(--font-family-text);
  display: none;
}
.tema-conferencia{
  margin-bottom: 64px;
  min-height: 200px;
}
.tema-conferencia img{
  margin-bottom: 20px;
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
.title-section-speakers{
  margin-bottom: 45px!important;

}
.hero-four{
  background-image: url("../imgs/save-the-date-banner-mobile.webp")!important; 
  background-size: cover;
  padding-top: 179px;
  padding-bottom: 77px;
  padding-left: 8px;
}
.mb-45{
  margin-bottom: 0!important;
}
.card-speaker{
  margin-bottom: 40px;
}
  .speaker-main-title {
    font-size: 1.8rem; /* Ajustar título principal dentro de las pestañas */
  }
  .tema-conferencia h5 {
    font-size: 1rem; /* Ajustar tamaño de temas de conferencia */
  }
  .speaker-details-section .accordion-button {
    font-size: 0.9rem; /* Ajustar tamaño de fuente botones acordeón */
    padding: 0.8rem 1rem;
  }
}

.dynamic-title {
  /* Desktop Grande (por defecto, > 1199.98px) */
  font-size: 4.84375rem; /* 77.5px */
}

@media (max-width: 1199.98px) {
  .speaker-main-title{
    font-size: 2rem;
    line-height: 42px;
  }
  #sobre-pane p{
    font-size: 16px;
    line-height: 1;
  }
  /* Desktop Normal (992px - 1199.98px) */
  .dynamic-title {
    font-size: 3.4375rem; /* Ejemplo: 55px */
  }
}

@media (max-width: 991.98px) {
  /* Tablet (768px - 991.98px) */
  .dynamic-title {
    font-size: 2.5rem; /* Ejemplo: 40px */
  }
}

@media (max-width: 767.98px) {
  /* Móvil (< 767.98px) */
  .dynamic-title {
    font-size: 1.625rem; /* 26px */
  }
}