body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #1c1c1c;
color: #e0e0e0;
}

.hero {
background: linear-gradient(135deg, #080808, #363636);
color: #ffffff;
padding: 100px 20px;
}

.hero h1 {
text-shadow: 2px 2px 4px #777777;
}

.seccion {
padding: 70px 20px;
background-color: #1c1c1c;
}

.seccion-gris {
background-color: #303030;
}

.seccion h2 {
font-weight: bold;
color: #f0f0f0;
}

.tarjeta {
background-color: #383838;
color: #e0e0e0;
padding: 30px;
border-radius: 15px;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
border: 1px solid #505050;
}

.tarjeta h3 {
font-weight: bold;
margin-bottom: 15px;
color: #ffffff;
}

#carruselPokemon {
max-width: 900px;
margin: auto;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.carousel-item img {
width: 100%;
height: 500px;
object-fit: contain;
background-color: #181818;
}

.carousel-caption {
background-color: rgba(15, 15, 15, 0.85);
border-radius: 15px;
padding: 15px;
margin-bottom: 25px;
}

.carousel-caption h3 {
font-size: 35px;
font-weight: bold;
color: #f0f0f0;
}

.carousel-control-prev,
.carousel-control-next {
width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 45px;
height: 45px;
background-color: rgba(0, 0, 0, 0.75);
border-radius: 50%;
padding: 10px;
}

.carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #bdbdbd;
}

.footer {
background-color: #080808;
color: #e0e0e0;
text-align: center;
padding: 25px;
border-top: 1px solid #444444;
}

@media (max-width: 768px) {
.hero {
padding: 70px 15px;
}

.hero h1 {
    font-size: 40px;
}

.carousel-item img {
    height: 300px;
}

.carousel-caption h3 {
    font-size: 25px;
}

.carousel-caption p {
    font-size: 14px;
}

}