.carrousel {
  display: flex;
  width: 100%;
  overflow: hidden;
  /* Para evitar que el contenido se desborde */
  background-color: #FFF0DF;
}

.carrousel .texto {
  width: 60%;
  box-sizing: border-box;
  /* Para incluir el padding en el ancho */
  padding: 20px;
  /* Espacio interior */
}

.carrousel .img {
  width: 40%;
  box-sizing: border-box;
  /* Para incluir el padding en el ancho */
  padding: 20px 0px;
  /* Espacio interior */
}

.carrousel .texto {
  padding-top: 4em;
  padding-left: 15%;
}



.carrousel .texto h3 {
  margin: 0;
  /* Eliminar el margen por defecto del h3 */
  margin-top: 30px;
  color: #FCAC41;
  font-size: 32px;
  font-weight: bold;
}

.carrousel .img {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 350px;
}

.carrousel .img img {
  max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
  display: block;
}




ul.ul-gold {
  list-style-type: disc;
  color: #FECB90;
  font-size: 18px;
  padding-left: 20px;
  margin-top:2rem;
}

.texto .ul-gold li {
  margin-bottom: 10px;
  color: #B7B7B8;
}

.texto .ul-gold li.active {
  color: black;
}


ul.ul-gold li {
  position: relative;
  padding-left: 25px;
  color: black;
}

ul.ul-gold li::before {
  content: "●";
  color: #FBCB92;
  display: inline-block;
  width: 10px;
  text-align: center;
  position: absolute;
  left: 0;
}

ul.ul-gold li.active::before {
  color: #FCAC41;
}
.content .logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.logo-wp {
  width: 150px;
}

.carrousel .logo{
  width:100px;
}

span.dot.active{
  background-color:#FCAC41 ;
}

span.dot {
  background-color:#FBCB92;
}


ul.list-plan li {
  list-style-type: disc; 
  margin-left: 20px;
  
 
}

img.next-slide, img.prev-slide{
  height:100px;
  cursor:pointer;
}



/* Segundo carousel */

  .carousel-container {
    display: flex;
    overflow-x: hidden;
    width: 100%;
    align-items: center;
    justify-content: center;
  
  }

  .carousel-slide {
    flex: 0 0 100%;
    display: flex;
  }

  .content {
    flex: 1;
    padding: 20px;
  }

  .carousel-controls {
    margin-top: 10px;
    text-align: center;
  }

  .carousel-controls span {
    cursor: pointer;
    margin: 0 10px;
  }

  .carousel-dots {
    text-align: center;
    margin-top: 10px;
  }

  .carousel-dots span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FBCB92;
    margin: 0 5px;
    cursor: pointer;
  }

  .carousel-controls .prev-slide,
  .carousel-controls .next-slide {
    background: none;
    color: #FBCB92;

  }



  #a {
    padding: 25px 0;
  }



  /* TODO: Capaz esto se puede abstraer para no repetir código */
  .carousel-slide .content img {
    max-width: 100%;
    max-height: 500px;

    height: auto;
    display: block;
  }

  .content:first-child {
    display:flex;
    justify-content: center;
    align-items: end;
  }




  .carousel-slide {
    display: flex;

  }

  .carousel-slide .content {
    flex: 1;
    padding: 0px 20px 0px 20px;
  }

  .carousel-slide .content:first-child {
    padding-left: 15%;
    flex-basis: 60%;
  }

  .carousel-slide .content:last-child {
    flex-basis: 60%;
    padding-right: 15%;
  }


  .carousel-slide>.content>h3 {
    margin: 0;

    /* Eliminar el margen por defecto del h3 */
    margin-top: 3rem;
    color: #FCAC41;
    font-size: 32px;
    font-weight: bold;
  }

  .content ul {
    margin-top: 1rem;
    font-size: 18px;  
    
  }



  .carousel-container .carousel-dots {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    margin: 0 5px;
    cursor: pointer;
  }

  .span.dot.active {
    background-color: black
  }

  .carousel-controls .prev-slide,
  .carousel-controls .next-slide {

    padding: 20px;
    font-size: 32px;
    font-weight: bold;

  }

  .carousel-container {
    position: relative;
  }

  .carousel-controls {
    position: absolute;
    display: flex;
    justify-content: space-between;
    /* Alinea las flechas al centro horizontalmente */
    align-items: center;
    width: 100%;
    z-index:4;

  }

  ul.ul-black {
    list-style-type: disc;
    color: #FECB90;
    font-size: 18px;
    padding-left: 20px;
    margin-top:2rem;
  }
  
  .texto .ul-black li {
    margin-bottom: 10px;
    color: #B7B7B8;
  }
  
  .texto .ul-black li.active {
    color: black;
  }
  
  
  ul.ul-black li {
    position: relative;
    padding-left: 25px;
    color: black;
  }
  
  ul.ul-black li::before {
    content: "●";
    color: #c3c3c3;
    display: inline-block;
    width: 10px;
    text-align: center;
    position: absolute;
    left: 0;
  }
  
  ul.ul-black li.active::before {
    color: #000000;
  }

  .content .logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.5rem;
  }


  /* Responsive primer carousel */

  @media (max-width:959px) {
    .carrousel .img img {
      max-height: 400px;
    }

    .texto {
      padding: 0 40px;
      margin-bottom: 40px;
    }

    .carrousel {
      display: flex;
      flex-direction: column-reverse;

    }

    .h3.tituloPlan.tituloPlanGold {
      margin-top: 0;
    }

    .carrousel .texto h3 {
      margin-top: 0;
      
    }


    .carrousel .texto {
      padding-left: 0;
      width: 100%;
      padding-top: 0;
      padding: 0px 40px;
    }

    .carrousel .img {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      margin-top: 2rem;
    }


    ul.ul-black {
      display: flex;
      flex-direction: column;
      padding-left: 50px;
    

    }

    ul.ul-black li {
      margin: 0;
    }
  }

  @media screen and (max-width:430px) {
    ul.ul-black {
      padding-left: 0px;
    }
  }



  /* Responsive segundo carousel */

  @media (max-width: 959px) {
    .content {
      flex-basis: auto;
      padding: 0;
      text-align: center;
      height: auto;
    }

    .carousel-slide {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: auto;
    }

    .carousel-slide .content {
      padding: 0;

    }

    .carousel-controls {
      z-index: 4;
    }
    .carousel-controls {
      z-index: 4;
    }

    h3.tituloPlan.tituloPlanGold {
      text-align: center;
    }

    ul.list-plan {
      text-align: center;
      padding: 0 80px;
    }

    .content ul {
      margin-top: 20px;
    }

    .carousel-slide .content {
      flex-basis: auto;
      padding: 0px 20px;
    }

    .carousel-controls {
      top: 200px;
      width: 100%;
    }
    .carousel-controls {
      top: 200px;
      width: 100%;
    }



    .carousel-slide .content:last-child {
      padding: 0 20px;
      flex-basis: auto;
    }

    .carousel-slide .content:first-child {
      padding: 0;
      flex-basis: auto;
    }


    span.next-slide {
      background: none;
    }

    .carousel-slide>.content>h3 {
      margin-top: 20px;
    }


    .carousel-container {
      padding-top: 0;
      /* height: 900px; */
    
    }


    .carousel-slide .content img {
      max-height: 330px;
    }

    .content:last-child {
      height: 542px;
    }
  }

  @media (max-width:480px) {
    ul.list-plan {
      padding: 0 40px;
    }

    ul.ul-gold {
      align-items: normal;
    } 

    ul.ul-gold li {
      font-size: 1rem;
    }

    .carousel-slide>.content>h3 {
      font-size: 18.5px;
    }
    .list-plan li {
      font-size: 14px;
    }
    .carrousel .texto h3{
      font-size: 20px;  
    }
  }

  @media (max-width:320px) {
    .carousel-controls {
      width: 110%;
    }
    .carousel-controls {
      width: 110%;
    }
  } 
  
  
  /* Segundo carousel black */

  .carousel-slide-black {
    flex: 0 0 100%;
    display: flex;
  }

 /* TODO: Capaz esto se puede abstraer para no repetir código */
    .carousel-slide-black .content img {
      max-width: 100%;
      max-height: 500px;
  
      height: auto;
      display: block;
    }

    .carousel-slide-black {
      display: flex;
  
    }
  
    .carousel-slide-black .content {
      flex: 1;
      padding: 0px 20px 0px 20px;
    }
  
    .carousel-slide-black .content:first-child {
      padding-left: 15%;
      flex-basis: 40%;
    }
  
    .carousel-slide-black .content:last-child {
      flex-basis: 60%;
      padding-right: 15%;
    }
  
  
    .carousel-slide-black>.content>h3 {
      margin: 0;
      margin-top: 30px;
      color: #323232;
      font-size: 32px;
      font-weight: bold;
    }   

    .carousel-dots-b {
      text-align: center;
      margin-top: 10px;
    }
  
    .carousel-dots-b span {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #c3c3c3;
      margin: 0 5px;
      cursor: pointer;
    }

    .carousel-container .carousel-dots-b {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: black;
      margin: 0 5px;
      cursor: pointer;
    }

    .carousel-dots-b span.active {
      background-color: #000000; /* Color de fondo cuando está activo */
  }
  
  .carousel-controls-b {
    margin-top: 10px;
    text-align: center;
  }

  .carousel-controls-b span {
    cursor: pointer;
    margin: 0 10px;
  }

  .carousel-controls-b .prev-slide,
  .carousel-controls-b .next-slide {
    background: none;
    color: #080808;

  }
  .carousel-controls-b .prev-slide,
  .carousel-controls-b .next-slide {

    padding: 20px;
    font-size: 32px;
    font-weight: bold;

  }


  .carousel-controls-b {
    position: absolute;
    display: flex;
    justify-content: space-between;
    /* Alinea las flechas al centro horizontalmente */
    align-items: center;
    width: 100%;
    z-index:4;

  }

  .carrousel-b {
    display: flex;
    width: 100%;
    overflow: hidden;
    /* Para evitar que el contenido se desborde */
    background-color: #F3F3F3;
  }

.carrousel-b .texto {
    width: 60%;
    box-sizing: border-box;
    /* Para incluir el padding en el ancho */
    padding: 20px;
    /* Espacio interior */
  }
  
  .carrousel-b .img {
    width: 40%;
    box-sizing: border-box;
    /* Para incluir el padding en el ancho */
    padding: 20px 0px;
    /* Espacio interior */
  }
  
  .carrousel-b .texto {
    padding-top: 4em;
    padding-left: 15%;
  }
  
  
  
  .carrousel-b .texto h3 {
    margin: 0;
    /* Eliminar el margen por defecto del h3 */
    margin-top: 30px;
    color: #323232;
    font-size: 32px;
    font-weight: bold;
  }
  
  .carrousel-b .img {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 350px;
  }
  
  .carrousel-b .img img {
    max-width: 100%;
    max-height: 500px;
    width: auto;
    height: auto;
    display: block;
  }

 



.watch-video-b {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
  color: #323232;
  font-size: 32px;
  font-weight: bold;
}

  @media (max-width:959px) {
    .carrousel-b .img img {
      max-height: 400px;
      padding-left: 30px;
    }

    .texto {
      padding: 0 40px;
      margin-bottom: 40px;
    }

    .carrousel-b {
      display: flex;
      flex-direction: column-reverse;

    }

    .h3.tituloPlan.tituloPlanGold {
      margin-top: 0;
    }

    .carrousel-b .texto h3 {
      margin-top: 0;
      
    }


    .carrousel-b .texto {
      padding-left: 0;
      width: 100%;
      padding-top: 0;
      padding: 0px 40px;
    }

    .carrousel-b .img {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      margin-top: 2rem;
    }


    ul.ul-gold {
      display: flex;
      flex-direction: column;
      padding-left: 50px;
    }

    ul.ul-gold li {
      margin: 0;
    }
  }
  
  @media (max-width:480px) {
    ul.list-plan {
      padding: 0 40px;
    }

    ul.ul-gold {
      align-items: normal;
    } 

    ul.ul-gold li {
      font-size: 1rem;
    }

    .carousel-slide-black>.content>h3 {
      font-size: 18.5px;
    }
    .list-plan li {
      font-size: 14px;
    }
    .carrousel-b .texto h3{
      font-size: 20px;  
    }
  }

  @media screen and (max-width:430px) {
    ul.ul-gold {
      padding-left: 0px;
    }

    .carousel-slide-black .content img {
      max-height: 330px;
  }
}

  @media (max-width:320px) {
    .carousel-controls-b {
      width: 110%;
    }
    .carousel-controls-b {
      width: 110%;
    }

  }

  /* Segundo carousel black */

  /* Estilos para el modal */
  .modal-black {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
  }
  
  .modal-content-b {
    position: relative;
    background-color: white;
    padding: 20px;
    width: 80%;
    max-width: 760px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  }
  
  .modal-content-b iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
  }
  
  .close-b {
    position: absolute;
    top: 10px;
    right: 3px;
    font-size: 30px;
    cursor: pointer;
    color: black;
  }
  
  .landing-wizard-b {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  .noselectVideoWizard-black {
    position: absolute;
    font-size: 40px;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .solo-turnos-video-b {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 32px;
    padding-bottom: 100px;
  }
  
  .img-b {
    max-width: 40%;
  }
  
  @media screen and (max-width: 790px) {
    .img-b {
      max-width: 65%;
    }
  }
  
  @media (max-width: 768px) {
    .modal-content-b {
      width: 95%;
      padding: 10px;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    }
  
    .modal-content-b iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
  
    .close-b {
      top: 5px;
      right: 10px;
      font-size: 24px;
    }
  }
  
  /* 💥 Agregado: evita scroll del body cuando el modal está abierto */
  .no-scroll {
    overflow: hidden !important;
    position: fixed !important;
    width: 100%;
    touch-action: none;
    -ms-touch-action: none;
  }
  
  
  


.primary-black {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
  color: #323232;
  font-size: 32px;
  font-weight: bold;
}

.carousel-slide-black .content .logos img {
  max-width: 10%;
  height: auto;
}

@media screen and (max-width:1270px) {
  .carousel-slide-black .content .logos img {
    max-width: 15%;
    height: auto;
  }
}

@media screen and (max-width:955px) {
  .carousel-slide-black .content .logos img {
    max-width: 10%;
    height: auto;
  }
}

@media screen and (max-width:570px) {
  .carousel-slide-black .content .logos img {
    max-width: 20%;
    height: auto;
  }
}

@media screen and (max-width: 970px) {
  .carousel-slide-black{
    flex-direction: column;
  }

  .carousel-slide-black .content:last-child{
    padding: 0px 25px 0px 25px;
  }
}