.centro{
    display: flex;
    justify-content: center;
    align-items: center;
}

h3{
    color:rgb(26, 255, 0);
}
.text-white {
          color: white !important;
    text-shadow: 3px 2px 3px witeh;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Asegura que la fila no se desborde */
.row {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

.suplementacion{
       display: flex;
       flex-wrap: wrap;
       display: flex;
       width: 100%;
       justify-content: center;
       /* margin-right: 0px; */
       /* margin-left: 0px; */
}
/* Ajustes para móviles */


/* Contenedor padre para centrar todo */
.contenedor-suplementacion {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* Estilos de la foto */
.foto-ajustada {
    width: 100%;          /* En móviles ocupará el 90% del ancho */
    max-width: 600px;    /* No pasará de 500px en pantallas grandes */
    height: auto;
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: block;
}

/* Ajuste específico para pantallas muy pequeñas */
@media (max-width: 576px) {
    .foto-ajustada {
        width: 95%;      /* Aún más grande en móviles pequeños */
    }
}


@media (max-width: 576px) {
    .h5 {
        font-size: 0.9rem !important; /* Título más pequeño en móvil */
    }
    
    /* Evita que los rellenos grandes rompan el layout */
    .gym-class-box {
        padding: 10px !important;
    }

    @media (max-width: 1024px) {
    /* Quitamos cualquier estilo de lista por defecto */
    .lista-visible {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .lista-visible li {
        /* Columna de 35px para el icono y el resto para el texto */
        align-items: start !important;
        margin-bottom: 15px !important;
        line-height: 1.4;
        font-size: 1rem;
    }

    /* Estilo para el icono (mancuerna o viñeta) */
    .lista-visible i.icono-listado {
        margin: 0 !important;
        padding-top: 4px; /* Alineación manual para que quede a la altura de la letra */
        font-size: 1.2rem !important;
        display: flex !important;
        justify-content: center;
    }

.suplementacion{
       display: flex;
       flex-wrap: wrap;
       display: flex;
       justify-content: center;
       width: 120%
       /* margin-right: 0px; */
       /* margin-left: 0px; */

}
.col-6 {
    flex: 0 0 50%;
    max-width: 450px;
}
}
/* MÓVIL: agrandarla un poco */
@media (max-width: 767px){
  .suplementacion{
    width: 115%;          /* agranda */
    margin-left: -7.5%;   /* centra si se sale */
  }
}

/* TABLET: agrandarla un poco menos */
@media (min-width: 768px) and (max-width: 991px){
  .suplementacion{
    width: 108%;
    margin-left: -4%;
  }
}

}