.no-js body {
  background-color: #fff;
  color: #010101;
}

.js body {
  background-color: #fff;
  color: #010101;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: #FFFFFF;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: rgba(0, 0, 0);
}

body.dark-mode::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0);
}

body.dark-mode::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #FFFFFF;
}

/* Estilo del cuerpo de la página */
body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.6;
  background-color: #fff;
  color: #010101;
}

/* Modo oscuro */
body.dark-mode {
  background-color: #010101;
  color: #ffffff;
}

.open-sans-<uniquifier> {
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth"100;
}

/* Encabezados en modo claro */
h1,
h2,
h3,
h4{
 color: #000000;
  /* Hereda el color del cuerpo */
}

/* Encabezados en modo oscuro */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #ffffff;
  /* O cualquier otro color que prefieras para el modo oscuro */
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.80em;
   font-weight: 600;
}
 

h5 {
  font-size: 1.05em;
  /* Aproximadamente 20px */
  font-weight: 400;
}

h6 {
  font-size: 1.20em;
  font-weight: 400;
}




@media (max-width: 768px) {
 h5 {
  font-size: 12px;
  /* Aproximadamente 20px */
  font-weight: 400;
}

h6 {
  font-size: 12px;
  font-weight: 400;
}
}

/* Párrafos */
p {
  margin-bottom: 15px;
}

/* Enlaces */
a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}



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




/* Imágenes */
img {
  max-width: 100%;
  height: auto;
}

/* Listas */
ul {
  list-style-type: none;
}

ul li {
  padding: 5px 0;
}

/* Diseño de columnas simple */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 195px;

}

.col-1 {
  flex: 0 0 8.33%;
    background-color: #C00;
}

.col-2 {
  flex: 0 0 16.66%;
}

.col-3 {
  flex: 0 0 25%;
}

.col-4 {
  flex: 0 0 33.33%;
}

.col-6 {
  flex: 0 0 50%;
}

.col-12 {
  flex: 0 0 100%;
}


/* Botones */
button,
.btn {
  display: inline-block;
  background-color: #FFF;
  padding: 5px 10px;
  text-align: center;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover,
.btn:hover {
  background-color: none;
}



.dark-mode-btn {
  position: absolute;
  top: 16px;
  left: 10px;
  color: #666;
  background-color: none;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: .5em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

.dark-mode-btn:hover {
  color: #444;
}

/* Icono de sol y luna */
.dark-mode-btn i {
  font-size: 1.5em;
}

/* Modo oscuro en el botón */
body.dark-mode .dark-mode-btn {
  color: #FFF;
  background-color: #010101;
}

body.dark-mode .dark-mode-btn:hover {
  color: #444;
}

/* Footer */

ul.social-icons-23 {
  margin-top: 18px;
  z-index: 900;
  margin-bottom: 16px;
}

.social-icons-23 li {
  vertical-align: top;
  display: inline;
  height: 100px;
}

.social-icons-23 img {
  vertical-align: top;
  display: inline;
  max-width: 26px;
  margin: 2px;
}

/* Elimina los estilos predeterminados de la lista */
ul.social-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Alinea los ítems en fila */
  justify-content: center; /* Centra los íconos horizontalmente */
}

ul.social-icons li {
  margin: 0 10px; /* Espacio entre cada ícono */
}

.foot p {
  font-size: 50%;
  color: #666;
}

.foot ul li a i {
  font-size: 24px; /* Ajusta el tamaño del ícono */
  color: #000;     /* Color predeterminado */
  margin-right: 10px; /* Espacio entre íconos */
}

.foot ul li a i:hover {
  color: #666;  /* Cambia el color al hacer hover */
}

body.dark-mode .foot ul li a i {
  font-size: 24px; /* Ajusta el tamaño del ícono */
  color: #FFF;     /* Color predeterminado */
  margin-right: 10px; /* Espacio entre íconos */
}

body.dark-mode .foot ul li a i:hover {
  color: #666;  /* Cambia el color al hacer hover */
}

.fab.fa-twitter{
  font-family:sans-serif;
}
.fab.fa-twitter::before{
  content:"𝕏";
  font-size:1.2em;
}

.fa6-brands--threads {
  display: inline-block;
  width: 0.88em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M331.5 235.7c2.2.9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6v-.5c.5-71.5 17.1-128.6 49.4-169.6c36.3-46.1 90.3-69.7 160.5-70.2h.3c70.3.5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8h-.7c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6.4 99.9 39.5 103.7 107.7l-.2.2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6.1-14.4.4c-42.9 2.4-57.2 23.2-56.2 41.8z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}



@media only screen and (min-width: 1170px) {


 h5 {
    font-size: 1.25em;
    /* Aproximadamente 20px */
    font-weight: 400;
  }

  h6 {
    font-size: 1em;
  }

}
@media (max-width: 768px) {
  .dark-mode-btn i {
    font-size: 1.5em;
  }



  .row {
    flex-direction: column;
  }
}

body.dark-mode .pagination .prev, .pagination .next, .pagination .page {
    display: inline-block;
    width: 26px;
    height: 26px;
    text-align: center;
    margin: 0 2px;
    cursor: pointer;
    font-size: 12px;
    border: 1.5px solid #C00;
    color: #FFF;
    background-color: #000;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 4px;
}

body.dark-mode .pagination .page:hover, .pagination .prev:hover, .pagination .next:hover {
    background-color: #333; /* Cambia el color de fondo */
    color: #666; /* Cambia el color del texto */
}

body.dark-mode .pagination .active {
    background-color: #C00;
    color: white;
}