body {
  body {
  min-height: 100vh;
  width: 100%;
  background: url("background.jpg") no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Evita scroll lateral */
  font-family: 'Roboto', sans-serif;
}

}
.card {
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: 210px 210px 80px;
  grid-template-areas: "image" "text" "stats";

  border-radius: 18px;
  background: rgb(245, 242, 242);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
  font-family: roboto;
  text-align: center;
  

  transition: 0.5s ease;
  cursor: pointer;
  margin:30px;
}
.card-image {
  grid-area: image;
  background: url("img1.webp");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}

.card-text {
  grid-area: text;
  margin: 25px;
}
.card-text .date {
  color: rgb(255, 7, 110);
  font-size:13px;
}
.card-text p {
  color: grey;
  font-size:15px;
  font-weight: 300;
}
.card-text h2 {
  margin-top:0px;
  font-size:28px;
}
.card-stats {
  grid-area: stats; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background: rgb(26, 172, 140);
}
.card-stats .stat {
  padding:10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
}
.card-stats .border {
  border-left: 1px solid rgb(234, 245, 242);
  border-right: 1px solid rgb(234, 245, 242);
}
.card-stats .value{
  font-size:22px;
  font-weight: 500;
}
.card-stats .value sup{
  font-size:12px;
}
.card-stats .type{
  font-size:11px;
  font-weight: 300;
  text-transform: uppercase;
}
.card:hover {
  transform: scale(1.15);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}

/*card2*/
.card-image.card2 {
  grid-area: image;
  background: url("img2.avif");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}
.card-text.card2 .date {
  color: rgb(196, 199, 9);
}
.card-stats.card2 .border {
  border-left: 1px solid rgb(221, 222, 183);
  border-right: 1px solid rgb(221, 222, 183);
}
.card-stats.card2 {
  background: rgb(196, 199, 9);
}
/*card3*/
.card-image.card3 {
   grid-area: image;
  background: url("img3.jpeg");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}
.card-text.card3 .date {
  color: rgb(0, 189, 63);
}
.card-stats.card3 .border {
  border-left: 1px solid rgb(14, 122, 50);
  border-right: 1px solid rgb(14, 122, 50);
}
.card-stats.card3 {
  background: rgb(0, 189, 63);
}
/*card4*/
.card-image.card4 {
   grid-area: image;
  background: url("img4.webp");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}
.card-text.card4 .date {
  color: rgb(251, 11, 11);
}
.card-stats.card4 .border {
  border-left: 1px solid rgb(14, 122, 50);
  border-right: 1px solid rgb(14, 122, 50);
}
.card-stats.card4 {
  background: rgb(251, 11, 11);
}

/*card5*/
.card-image.card5 {
  grid-area: image;
  background: url("img5.jpg");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}
.card-text.card5 .date {
  color: rgb(180, 0, 189);
}
.card-stats.card5 .border {
  border-left: 1px solid rgb(14, 122, 50);
  border-right: 1px solid rgb(14, 122, 50);
}
.card-stats.card5 {
  background: rgb(180, 0, 189);
}
/*card6*/
.card-image.card6 {
   grid-area: image;
  background: url("img6.jpg");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}
.card-text.card6 .date {
  color: rgb(179, 0, 255);
}
.card-stats.card6 .border {
  border-left: 1px solid rgb(14, 122, 50);
  border-right: 1px solid rgb(14, 122, 50);
}
.card-stats.card6 {
  background: rgb(179, 0, 255);
}
/*card7*/
.card-image.card7 {
 grid-area: image;
  background: url("img7.jpg");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}
.card-text.card7 .date {
  color: rgb(7, 10, 189);
}
.card-stats.card7 .border {
  border-left: 1px solid rgb(7, 10, 189);
  border-right: 1px solid rgb(7, 10, 189);
}
.card-stats.card7 {
  background: rgb(11, 6, 86);
}


.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

/* Botón de regreso estilizado */
.btn-back {
  display: inline-block;
  padding: 10px 25px;
  font-weight: 600;
  color: white;
  background-color: black;
  border: 2px solid blue;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  user-select: none;
}

/* Efecto hover */
.btn-back:hover {
  background-color: blue;
  color: white;
  border-color: blue;
}

/* Posición centrada abajo de la pantalla */
.fixed-bottom {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}




/* Responsivo para tablets */
@media (max-width: 600px) {
  .card {
    grid-template-columns: 100%;
    grid-template-rows: 200px auto auto;
    width: 90%;
  }
}

/* Responsivo para celulares */
@media (max-width: 400px) {
  .card {
    width: 100%;
    margin: 10px 0;
    transform: none !important; /* Quita zoom al hacer hover en móvil */
  }

  .card:hover {
    transform: none;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6);
  }
}