@media (max-width: 992px) {
        p {
          font-size: 1.2em;
        }
      }

      @media (max-width: 900px) {
    .centrado{
        height: 100%;
    }
      }



      @media (max-width: 767.98px) {
        .portada {
          height: 100%;
        }

        h1.titulo-principal {
          font-size: 3.2em;
        }

        p {
          font-size: 1.1em;
        }
        article.bg {
          height: auto;
        }

        article.chat{
          background-size: contain;
        }
        .centrado{
          height: auto;
        }

        audio{ width: 80%;}
        .cara{ width: 50%;}


      }

      @media (max-width: 575.98px) {
        .fondo {
          padding: 4em .7em 5em;
        }

        h1.titulo-principal {
          font-size: 2.7em;
        }

        img.mapa{
          max-width: 100%;
          padding: 1em;
        }


        img.foto-perfil {
          width: 60px;
        }

        h4.nom {
          font-size: 17px;
        }

        h6.cargo {
          font-size: 13px;
        }
        .inicio2{
            margin: 1.5em auto;
          max-width: 260px;
text-align: center;
float: none;
        }

        .titulo-boton {
    text-align: center;
  }

        h5.reflexion, h5.analisis{
          font-size: 1.1em;
          line-height: 1.3;
        }

        .perfiles{
          padding: 2em 0;
          margin: 0 -15px;
        flex-wrap: nowrap;
        }

        .explicacion{
          margin: 7em .5em;
        }

      }

      @media only screen and (max-width: 480px) {
        article.chat .item-right .badge-secondary {
          margin-right: -5rem;
        }
        article.chat .item-left .badge-secondary {
          margin-left: -5rem;
        }
        article.chat .item-chat .badge {
          max-width: 15rem;
        }
        audio {
          width: 150px;
          display: block;
          margin: 0 20px;
        }
        .perfil{
          max-width: 220px;
        }
      }

        @media only screen and (max-width: 439.98px) {
          .perfil{
            max-width: 180px;
          }
        }

        @media only screen and (max-width: 359.98px) {
          .perfil{
            max-width: 180px;
          }
        }

      @media (max-width: 321px) {

        h1.titulo-principal {
          font-size: 2.5em;
        }
        h4.nom {
          font-size: 17px;
        }

        h6.cargo {
          font-size: 12px;
        }
      }