/* Vieja implementación que provoca desbordamientos */
/* 
body{
	padding-top: 50px;
}
html,
body { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
}

body {
  display: table;
  width: 100%;
}


.clase-general{
  display: table-row;
}

 footer {
   background-color: #f5f5f5;
   height: 60px;
   text-align: center;
   margin-top: 20px ;
 } */

/* Corrección */

  html, body {
    height: 100%;
    margin: 0;
  }
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }


  main {
    flex: 1 0 auto;
  }

  /* footer {
    padding: 1rem;
    background: #222;
    color: white;
  } */

  /* Footer */
footer {
  display: flex; /* Habilitar flexbox */
  justify-content: space-between; /* Distribuir elementos horizontalmente */
  align-items: center; /* Alinear elementos verticalmente */
  /* padding: 1rem; */
  background: #222;
  color: white;
  flex-wrap: wrap; /* Permitir que los elementos se ajusten en varias líneas si es necesario */
}

footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Asegura que los elementos no se desborden */
}

footer .row{
  width: 100%;
}

/* Agregar un media query para pantallas pequeñas */

footer .col-md-4 {
  flex: 1; /* Asegura que las columnas tengan el mismo ancho */
  text-align: center; /* Centra el contenido dentro de cada columna */
}

footer .col-md-12 {
  text-align: center; /* Centra el contenido en pantallas pequeñas */
}

@media (max-width: 767px) { 
  
  footer .col-md-4 {
    margin: 0.5rem 0; /* Agrega espacio entre las columnas en pantallas pequeñas */
  }

  footer .col-md-12 {
    margin-top: 1rem;
  }

}