/* Estilos generales */
.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  flex-wrap: wrap;
  background-image: url(../images/imagen_2.jpg);
  background-size: cover;
}

.main h1 {
  font-size: 40px;
  font-family: "Times New Roman", Times, serif;
  text-shadow: 2px 2px 2px #fff, 2px 2px 2px #fff, 2px 2px 2px #fff;
  font-style: italic;
}

/* Estilos para contenedor de tarjetas */
.container__cards {
  border: 1px solid #000000;
  border-radius: 30px;
  box-shadow: 10px 10px #81959785;
  width: 100%;
  height: 400px;
  margin: 5px;
  display: flex;
  justify-content: space-evenly;
  box-sizing: border-box;
  backdrop-filter: blur(20px);
  flex-wrap: wrap; /* Para que las tarjetas se ajusten en pantallas pequeñas */
}

.active {
  margin-top: 20px;
}

/* Estilos para tarjetas */
.card {
  border: 1px solid #000000;
  border-radius: 20px;
  width: 18%;
  height: 350px;
  margin-top: 20px;
  background-color: #fff;
  box-sizing: border-box;
  transition: 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.card_0 { box-shadow: 5px 5px 5px 5px #915a12e1; }
.card_1 { box-shadow: 5px 5px 5px 5px #913e3e80; }
.card_2 { box-shadow: 5px 5px 5px 5px #42438083; }
.card_3 { box-shadow: 5px 5px 5px 5px #3d884198; }
.card_4 { box-shadow: 5px 5px 5px 5px #807b4288; }
.card_5 { box-shadow: 5px 5px 5px 5px #7b4b7c88; }
.card_6 { box-shadow: 5px 5px 5px 5px #396e6686; }
.card_7 { box-shadow: 5px 5px 5px 5px #41537c85; }
.card_8 { box-shadow: 5px 5px 5px 5px #77744286; }
.card_9 { box-shadow: 5px 5px 5px 5px #1f4117e1; }

.card::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  width: 100%;
  height: 400px;
  clip-path: circle(50% at 50% 0%);
  transform: translateX(-50%);
  transition: clip-path 0.5s ease-in-out, background 0.5s ease-in-out;
}

.card_0::before, .content .content__a_0 { background-color: #915a12e1; }
.card_1::before, .content .content__a_1 { background-color: #911212e1; }
.card_2::before, .content .content__a_2 { background-color: #090b77e1; }
.card_3::before, .content .content__a_3 { background-color: #129118e1; }
.card_4::before, .content .content__a_4 { background-color: #918912e1; }
.card_5::before, .content .content__a_5 { background-color: #8d1291e1; }
.card_6::before, .content .content__a_6 { background-color: #12917ce1; }
.card_7::before, .content .content__a_7 { background-color: #123a91e1; }
.card_8::before, .content .content__a_8 { background-color: #f1e648; }
.card_9::before, .content .content__a_9 { background-color: #1f4117e1; }

.card_0:hover::before { clip-path: circle(100%); background-color: #915a12e1; }
.card_1:hover::before { clip-path: circle(100%); background-color: #911212e1; }
.card_2:hover::before { clip-path: circle(100%); background-color: #090b77e1; }
.card_3:hover::before { clip-path: circle(100%); background-color: #129118e1; }
.card_4:hover::before { clip-path: circle(100%); background-color: #918912e1; }
.card_5:hover::before { clip-path: circle(100%); background-color: #8d1291e1; }
.card_6:hover::before { clip-path: circle(100%); background-color: #12917ce1; }
.card_7:hover::before { clip-path: circle(100%); background-color: #123a91e1; }
.card_8:hover::before { clip-path: circle(100%); background-color: #f1e648; }
.card_9:hover::before { clip-path: circle(100%); background-color: #1f4117e1; }

.card h1 {
  font-size: 25px;
  font-family: "Times New Roman", Times, serif;
  text-shadow: 2px 2px 2px #000000, 2px 2px 2px #000000;
  text-align: center;
  text-decoration: underline;
  position: absolute;
  top: 20px;
  z-index: 1;
  color: #fff;
}

.content {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 10px;
  z-index: 1;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.content strong {
  font-family: 'Times New Roman', Times, serif;
  font-size: larger;
  text-shadow: 2px 2px 2px #fff;
}

.container__cards .card .content a {
  position: relative;
  display: inline-block;
  width: 50%;
  padding: 10px 20px;
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  margin-top: 10px;
  text-align: center;
  transition: .8s ease-in-out;
  align-self: center;
  text-shadow: 2px 2px 2px #000000, 2px 2px 2px #000000;
}

.container__cards:hover .card {
  filter: blur(20px);
  transform: scale(0.9);
  opacity: 0.5;
}
.container__cards .card:hover {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

.container__cards .card:hover .content a {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .2),
              -1px -1px 2px rgba(255, 255, 255, .4);
}

.container__cards .card .content a:active {
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .1),
              inset 5px 5px 5px rgba(0, 0, 0, .04),
              inset -5px -5px 5px rgba(255, 255, 255, .07),
              inset -1px -1px 2px rgba(255, 255, 255, .4);
}

/* Media queries para responsividad */
@media (max-width: 1200px) {
  .card {
    width: 30%;
  }
  .container__cards{
    height: auto;
  }
}

@media (max-width: 768px) {
  .card {
    width: 45%;
  }
  .container__cards{
    height: auto;
  }
}

@media (max-width: 480px) {
  .container__cards{
    height: auto;
  }
  
  .card {
    width: 90%;
  }
}