@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #1d1d1d !important;
        --secondary-color: #2e2e2e !important;
        --yellow-color: #e92a41 !important;
    }

    body {
        background-color: var(--primary-color-dark) !important;
        color: white;
    }

    .logo-dark {
        display: block !important;
    }

    .logo {
        display: none;
    }
}

:root {
    --primary-color: #e92a41;
    --secondary-color: #c2283a;
    --yellow-color: #ffff00;
    --primary-color-dark: #1d1d1d;

    --prehistoria: #f86d31;
    --antigua: #30a5e8;
    --medieval: #f8b229;
    --moderna: #f11c35; 
    --contemporanea: #2e8b57; 
}

@view-transition {
    navigation: auto;
}

@font-face {
    font-family: BreeSerif;
    src: url("/fonts/BreeSerif-Regular.ttf")
      format("truetype");
  }
  
  @font-face {
    font-family: HatschSans;
    src: url("https://cdn.glitch.global/9a357997-c721-4619-8b51-c5bb42844312/HatschSans.otf?v=1679725680887")
      format("truetype");
  }
  
  @font-face {
    font-family: Roboto;
    src: url("/fonts/RobotoSlab-Regular.ttf")
      format("truetype");
  }

body {
    background-color: var(--primary-color);
    font-family: Roboto;
    color: white;
    padding: 0;
}

button {
  background-color: var(--primary-color);
  border: 1px solid rgb(246, 210, 214, 0.75);
  border-radius: 1rem;
  color: white;
  width: fit-content;
  padding: 0.5rem 2rem;
  font: 300 1rem Roboto;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0.2rem 0.2rem 0.5rem rgb(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
  transition: 0.2s ease;
  user-select: none;
}

button:hover {
  scale: 1.025;
}

button:active {
  scale: 1;
}

button::before {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(119,119,119,0) 0%, rgba(255,255,255,0.3) 50%, rgba(119,119,119,0) 100%);
  mask-image: linear-gradient(120deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  position: absolute;
  top: 0;
  left: -100%;
  transition: 1s ease;
}

button:hover::before {
  left: 100%;
}

@keyframes brillo-boton {
  0% {
      left: -100%;
  }
  25% {
      left: 150%;
  }
  100% {
      left: 150%;
  }
  
}




a {
    text-decoration: none;
    color: white;
}

a:hover {
    color: white;
}



.contenedor-portada {
  display: flex;
  width: 100%;
  height: 900px;
  justify-content: center;
  gap: 1rem;
}

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

#version {
  background-color: var(--yellow-color);
  color: var(--primary-color);
  font-family: Roboto;
  width: fit-content;
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin-bottom: 1rem;
}

.contenedor-titulo p {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    color: white;
    padding-left: 1rem;
    padding-right: 1rem;
}

.contenedor-logo {
  width: 100%;
  height: 150px;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  margin-top: 3rem;
  display: flex;
}

.contenedor-logo span{
  position: relative;
  height: 100%;
}

.contenedor-logo span img {
  height: 100%;
}

.contenedor-logo span::before {
  content: "";
  height: 37%;
  background-color: var(--primary-color);
  position: absolute;
  bottom: 14%;
  left: 8%;
  z-index: 9;
  animation: square1 4s ease infinite;
  width: 1%;
}

.contenedor-logo span::after {
  width: 1%;
  height: 37%;
  background-color: var(--primary-color);
  position: absolute;
  top: 11%;
  right: 13%;
  z-index: 9;
  animation: square2 4s ease infinite;
  content: "";
}

.logo-dark {
    display: none;
}

  @keyframes square1 {
    0% {
      
    }
  
    50% {
      left: 23%;
    }
  
    100% {
      
    }
  }
  
  @keyframes square2 {
    0% {
      
    }
  
    50% {
      right: 28%;
    }
  
    100% {
      
    }
  }

.contenedor-cartas-carrusel {
  display: flex;
  width: 100%;
}

.contenedor-lateral-cartas:first-child {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
  overflow: hidden;
  background-color: transparent;
  z-index: -1;
  opacity: 0.5;
}

.contenedor-lateral-cartas:last-child {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
  overflow: hidden;
  background-color: transparent;
  z-index: -1;
  opacity: 0.5;
}

.inner-contenedor-cartas-lateral-1, .inner-contenedor-cartas-lateral-2 {
  height: calc(var(--height) * var(--quantity));
  background-color: transparent;
  z-index: -1;
  gap: 0;
  position: relative;
  width: 280px;
}



.inner-contenedor-cartas-lateral-1 .card-contenido {
  background-color: #c2283a;
  position: absolute;
  animation: scrollInfinite 20s linear infinite;
  top: 100%;
  margin: 15px;
  animation-delay: calc( -1 *(20s / var(--quantity)) * (var(--position) - 1));
}


@keyframes scrollInfinite {
    0% {
        top: 100%;
    }
    100% {
        top: calc(var(--height) * -1);
    }
  
}

.inner-contenedor-cartas-lateral-2 .card-contenido {
  background-color: #c2283a;
  position: absolute;
  animation: scrollInfinite2 20s linear infinite;
  top: 100%;
  margin: 15px;
  animation-delay: calc(-1 *(20s / var(--quantity)) * (var(--position) - 1));
}

@keyframes scrollInfinite2 {
    0% {
      top: calc(var(--height) * -1);
    }
    100% {
        
      top: 100%;
    }
  
}




  

.carousel-container {
    max-width: 800px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

.carousel-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
    border-radius: 2rem;
}
.carousel {
    display: flex;
    height: 350px;
    min-width: 200px;
    transition: transform 0.5s ease-in-out;
    
}
.carousel div {
    width: 100%;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.25);
}

.carousel div h1 {
    font-size: 1.5rem;
    font-family: BreeSerif;
    font-weight: 900;
    margin: 0;
}

.carousel div p {
  font-size: 1rem;
  font-family: Roboto;
  font-weight: 300;
  text-align: left;
  padding: 0;
  margin: 0;
}

.carousel div a {
  font-size: 1rem;
  font-family: Roboto;
  font-weight: 300;
  text-align: left;
  width: fit-content;
  border-radius: 1rem;
  margin-top: 0.5rem;
  padding: 0.2rem 0.5rem 0.2rem 0.5rem; 
  background-color: #e92a41;
}

.carousel div img {
    width: 120%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.indicators {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap: 10px;
    background-color: var(--primary-color);
}

.indicator {
    width: 100%;
    border-radius: 1rem;
    height: 150px;
    cursor: pointer;
    opacity: 0.6;
    background-color: #c2283a;
    transition: opacity 0.3s;
}

.indicator.active {
    opacity: 1;
    border: 2px solid #000;
}

#buscador {
  height: 1rem;
  border-radius: 0.5rem;
  border: 0;
  padding: 1rem;
  font: 300 1rem Roboto;
  color: white;
  background-color: var(--primary-color);
  transition: 0.2s ease;
  outline: 1px solid rgba(255, 255, 255, 0.5);
}

#buscador:hover {
  filter: brightness(1.05);
}

#buscador::placeholder {
  color: white;
  opacity: 0.5;
}

#buscador:focus {
  outline: 1px solid #971b2a;
  box-shadow: inset 0rem 0rem 0.5rem rgb(0, 0, 0, 0.2);
}

.contenedor-articulos {
    display: flex;
    flex-direction: column;
    height: auto;
    width: auto;
    justify-content: center;
    align-items: center;
    margin: 0 1rem 0rem 1rem;
    border-radius: 2rem;
    gap: 1rem;
    overflow: hidden;
    padding-top: 4rem;
    background-color: var(--secondary-color);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
    position: relative;
}

.contenedor-articulos::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(180deg, transparent 0%, var(--backgroundColor) 100%);
  opacity: 0.25;
  pointer-events: none;

}

#contenedor-articulos-fondo {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.1;
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  border-radius: 2rem;
  pointer-events: none;
}

.contenedor-periodos {
    z-index: 9;
    display: flex;
    height: auto;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    
}

.contenedor-periodos button {
    z-index: 999999;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    font-family: BreeSerif;
    border-radius: 1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    background-color: var(--primary-color);
    cursor: pointer;
    transition: 0.2s ease;
    overflow: hidden;
    filter: brightness(75%);

}

.contenedor-periodos button.active {
  filter: brightness(100%);
  scale: 1.1;
  outline: 1px solid white;
}
.contenedor-periodos button.active p::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  transition: 1s ease;
}

.contenedor-periodos button p {
  font-size: 1rem;
  text-align: center;
  text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.25);
  margin: 0;
  user-select: none;
}

.contenedor-periodos button img {
  height: 75px;
  opacity: 0.1;
  filter: brightness(0);
  position: absolute;
  z-index: -1;
}

#prehistoria {
  background-color: #f86d31;
}

#edad-antigua {
  background-color: #30a5e8;
}

#edad-medieval {
  background-color: #f8b229;
}

#edad-moderna {
  background-color: #f11c35;
}

#contemporanea {
  background-color: #2e8b57;
}

.contenedor-cartas {
    display: none;
    opacity: 0;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 650px;
    max-width: 1200px;
    gap: 1rem;
    padding: 2rem;
    padding-top: 0;
    z-index: 999;
}

.contenedor-cartas.active {
    display: flex;
    opacity: 1;
}

.card-contenido {
  color: white;
  scale: 0;
  box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.3s ease, scale 0.5s ease;
  width: 250px;
  height: 300px;
  background-color: var(--primary-color);
  border-radius: 2rem;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-style: preserve-3d;
  transform: perspective(1000px);
  outline: 2px solid transparent;
}

.card-contenido:hover {
  transition: all 0s linear;
  outline: 3px solid rgba(255, 255, 255, 0.65);
}
  
  .card-contenido.active {
    scale: 1;
    opacity: 1;
  }
  
.card-contenido-etiqueta {
  position: relative;
  bottom: 0;
  text-align: center;
  pointer-events: none;
  transition: 0.3s ease;
  transform: translateZ(30px);
  z-index: 0;
}

.card-contenido-etiqueta h1{
  text-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 1);
  font: 900 2rem BreeSerif;
  line-height: 1;
  margin: 0;
}

.card-contenido-descripcion {
  font: 300 0.8rem Roboto;
  margin: 0;
  position: absolute;
  bottom: 0;
  z-index: 9;
  text-align: center;
  transform: translateZ(30px);
  margin-bottom: 1rem;
  opacity: 0;
  transition: 0.3s ease;
}

.card-contenido-etiqueta span {
  opacity: 0;
  transition: 0.3s ease;
  font: 1rem Roboto;
}

  .card-contenido:hover .card-contenido-etiqueta {
    bottom: 35%;
  }
  
  .card-contenido:hover span {
    opacity: 1;
  }

  .card-contenido:hover .card-contenido-descripcion {
    opacity: 1;
  }



@keyframes scale-infinite {
  from {
    transform: scale(1);
  } to {
    transform: scale(1.25);
  }
}
  
.card-contenido-img {
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
  
.card-contenido-img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: center;
  animation: scale-infinite 10s infinite linear alternate;
  animation-play-state: paused;
}

.card-contenido:hover .card-contenido-img img {
  animation-play-state: running;
}
  #gif-humo {
    position: absolute;
    width: 150%;
    opacity: 0;
    z-index: 9;
    pointer-events: none;
    transition: 0.2s ease;
    transform: translateZ(15px);
    filter: drop-shadow(0.5vw 0.5vw 1vw black);
  }
  
  #revolucion-industrial:hover #gif-humo {
    opacity: 0.25;
  }
  
  .personaje-img {
    position: absolute;
    height: 100%;
    bottom: 0;
    opacity: 0;
    z-index: 9;
    transition: 0.3s ease;
    transform: translateZ(0px);
    filter: drop-shadow(0.1vw 0.1vw 0.5vw rgb(0,0,0, 50%));
  }
  
  .card-contenido:hover .personaje-img {
    height: 105%;
    opacity: 1;
    scale: 1;
    transform: translateZ(15px) translateY(0%);
  }

.contenedor-timeline {
  width: 100%;
  height: 400px;
  position: relative;
  z-index: 9;
}

.contenedor-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.contenedor-timeline iframe {
  width: 100%;
  height: 100%;
  border: none;
}
  
.contenedor-aplicaciones {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
  justify-content: center;
  align-items: center;
}

.contenedor-titulo-aplicaciones {
  display: flex;
  width: 100%;
  height: 150px;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  margin-top: 2rem;
  text-align: center;
}

.contenedor-app {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.aplicaciones {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  flex-direction: column;
  align-items: center;
}

.aplicaciones h1 {
  font-size: 1rem;
  font-weight: 300;
  font-family: Roboto;
  text-align: center;
}

.app {
  width: 200px;
  height: 200px;
  background-color: var(--secondary-color);
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.25);
  transition: 0.2s ease;
}

.app img {
  height: 90%;
  transition: all 0.2s ease;
}

.app:hover {
  scale: 1.05;
}

.app:hover img {
  height: 110%;
}

#mapas-interactivos {
  background-color: #ee712d;
  background-image: url("/icons/mapa-interactivos.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}

#mapas-interactivos img {
  align-self: flex-end;
}

#historia-3d {
  background-color: #30a5e8;
}

#historia-3d:hover img {
  animation-play-state: running;
}

#historia-3d img {
  animation: float 3s linear infinite;
  animation-play-state: paused;
}


#cuestionarios {
  background-color: #f7c10f;
}

#juegos {
  background-color: #66a329;
}

#guessgame {
  background-color: #6e1299;
}

#guessgame img {
  filter: invert(1) opacity(0.5);
}

#tareas {
  background-color: #3c56cc;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px);
  }
}

.contenedor-acerca-de {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background-color: var(--secondary-color);
}

.contenedor-acerca-de img {
  height: 200px;
  border-radius: 100%;
}

.acerca-de {
  display: flex;
  flex-direction: column;
  max-width: 850px;
}

.acerca-de h1 {
  font-size: 2rem;
  font-family: BreeSerif;
}

.redes-sociales {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.redes-sociales span {
  font-size: 1rem;
  font-family: Roboto;
  width: fit-content;
  align-items: center;
  display: flex;
  gap: 0.5rem;
  transition: 0.2s ease;
  position: relative;
  border: 0.1rem solid white;
  border-color: transparent;
  cursor: pointer;
  user-select: none;
  opacity: 0.5;
}

.redes-sociales span img {
  height: 2rem;
  border-radius: 0;
}

.redes-sociales span:hover {
  opacity: 1;
}

.redes-sociales span:active {
  scale: 0.9;
}

footer {
  width: 100%;
  height: auto;
  background-color: var(--red);
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
}

.container-footer-1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.container-footer-2 {
  display: flex;
  justify-content: center;
  background-color: rgb(0 0 0 / 0.2);
  padding: 1rem;
  text-align: center;
}

.container-footer-2 p {
  margin: 0;
}

.footer-container {
  min-width: 500px;
  min-height: 500px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.footer-1 {
  justify-content: space-between;
}

.footer-1 p {
  max-width: 300px;
}

.footer-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-3 { 
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

.footer-3 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-articulo-recomendado {
  height: 350px;
  max-width: 400px;
  background-color: var(--secondarycolor);
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
  display: flex;
  box-shadow: 0px 0px 1rem rgba(0,0,0,0.5);
  background-image: var(--fondo);
  position: relative;
  outline: 1px solid rgba(255, 255, 255, 0.3);
}

.card-articulo-recomendado::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 1rem;
}

.card-articulo-recomendado-texto {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  position: relative;
}

.card-articulo-recomendado-img {
  width: 100%;
  height: 100%;
  border-radius: 1rem 1rem 0 0;
  position: relative;
}

.card-articulo-recomendado-img img {
  height: 110%;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  left: 0;
}


.card-articulo-recomendado h1 {
  font-size: 2rem;
  font-family: BreeSerif;
  font-weight: 600;
  color: white;
}

.card-articulo-recomendado p {
  font-size: 1rem;
  font-family: Roboto;
  color: white;
}

.contenedor-logo-footer {
  width: 100%;
  height: 100px;
  pointer-events: auto;
  display: flex;
}

.contenedor-logo-footer span{
  position: relative;
  height: 100%;
  cursor: pointer;
}

.contenedor-logo-footer span img {
  height: 100%;
}

.contenedor-logo-footer span::before {
  content: "";
  height: 37%;
  background-color: var(--primary-color);
  position: absolute;
  bottom: 14%;
  left: 8%;
  z-index: 99999;
  width: 1%;
  transition: 0.3s ease;
}

.contenedor-logo-footer span::after {
  width: 1%;
  height: 37%;
  background-color: var(--primary-color);
  position: absolute;
  top: 11%;
  right: 13%;
  z-index: 99999;
  content: "";
  transition: 0.3s ease;
}

.contenedor-logo-footer span:hover::before {
  left: 23%;
}

.contenedor-logo-footer span:hover::after {
  right: 28%;
}

@media screen and (max-width: 768px) {
    button {
      font-size: 0.8rem;
    }

    header {
        height: 75px;
    }

    .art {
      height: fit-content
    }

    nav ul li {
        font-size: 10px;
    }

    .contenedor-portada {
        height: 600px;
    }

    .inner-contenedor-cartas-lateral-1, .inner-contenedor-cartas-lateral-2 {
      display: none;
    }

    .contenedor-logo {
      width: 100%;
      height: 100px;
      justify-content: center;
      align-items: center;
      pointer-events: auto;
      margin-top: 3rem;
      display: flex;
    }

    .carousel-container {
      width: 80%;
    }

    .carousel {
        height: 200px;
    }

    .carousel div {
      padding: 1rem;
  }

    .carousel div h1 {
        font-size: 1rem;
    }

    .carousel div p {
        font-size: 0.75rem;
    }

    .indicators {
      display: flex;
      flex-wrap: wrap;
    }

    .indicator {
        height: 75px;
        width: 30%;
    }

    .contenedor-periodos {
      position: sticky;
      z-index: 999;
      top: 0;
      padding-top: 90px;
      padding-bottom: 10px;
    }

    .contenedor-articulos {
        padding: 0 0 0rem 0;
    }

    .contenedor-cartas {
        padding: 0rem;
        align-content: flex-start;
        min-height: auto;
    }

    .card-contenido {
        width: 150px;
        height: 150px;
        border-radius: 1rem;
    }

    .card-contenido-img {
        height: 100%;
        width: 100%;
        border-radius: 1rem;
    }

    .card-contenido-etiqueta {
      position: relative;
      text-align: center;
      pointer-events: none;
      transition: 0.3s ease;
      transform: translateZ(0px);
      z-index: 0;
      margin-bottom: 1rem;
    }
    
    .card-contenido-etiqueta h1{
      font: 900 1.25rem BreeSerif;
      line-height: 1;
      margin: 0;
      text-shadow: 0rem 0rem 0rem rgba(0, 0, 0,);
    }
    
    .card-contenido-etiqueta span {
      opacity: 1;
      transition: 0.3s ease;
      font: 0.8rem Roboto;
    }
    
      .card-contenido:hover .card-contenido-etiqueta {
        bottom: 0;
      }
      
      .card-contenido:hover span {
        opacity: 1;
      }

    .contenedor-periodos span {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
        border-radius: 1rem;
    }

    .contenedor-periodos span p {
        font-size: 0.5rem;
  
    }

    .contenedor-periodos span img {
        height: 20px;
        display: none;
    }

    .aplicaciones {
        padding: 0rem;
    }

    .app {
        width: 100px;
        height: 100px;
    }

    .footer-container {
      min-width: 100%;
    }

    .footer-1 {
      min-height: 100%;
    }

    .footer-2 {
      min-height: 100%;
    }

    .footer-3 {
      min-height: 100%;
    }

    .card-articulo-recomendado {
      height: 250px;
      max-width: 300px;
    }

    .card-articulo-recomendado h1 {
      font-size: 1rem;
    }

    .card-articulo-recomendado p {
      font-size: 0.8rem;
    }
}