/* === CONFIGURACIÓN GENERAL === */
body {
    background-color: #1a1a1a; /* Fondo casi negro */
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    margin: 0;
    padding-top: 20px;
}

/* Título Principal */
h1 {
    color: #e74c3c; /* Rojo deportivo */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

/* Subtítulo gris */
.subtitulo {
    color: #bbb;
    margin-bottom: 40px;
    font-size: 1.1em;
}

/* === CONTENEDOR DE LA GALERÍA === */
.galeria-contenedor {
    display: flex;
    justify-content: center; /* Centra todo */
    flex-wrap: wrap;         /* ¡IMPORTANTE! Esto permite que bajen a la siguiente línea */
    gap: 30px;               /* Espacio entre tarjetas */
    padding-bottom: 60px;    /* Espacio abajo para que no choque con el footer */
    max-width: 1200px;       /* Ancho máximo para que no se estire demasiado */
    margin: 0 auto;          /* Centra el bloque entero en la pantalla */
}

/* === TARJETA DEL AUTO === */
.tarjeta-auto {
    background-color: #2d2d2d; /* Gris oscuro tarjeta */
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.6); /* Sombra elegante */
    width: 300px;
    transition: transform 0.3s ease; /* Suaviza la animación */
    
    /* Para organizar el texto en columna vertical */
    display: flex;
    flex-direction: column; 
    align-items: center;
}

/* Efecto al pasar el mouse */
.tarjeta-auto:hover {
    transform: translateY(-10px); /* Se eleva 10 píxeles */
}

/* Imagen del auto */
.tarjeta-auto img {
    width: 100%;
    height: 180px;
    object-fit: cover; /* Recorta la foto perfecto */
    border-radius: 8px;
}

/* Nombre del auto */
.tarjeta-auto h3 {
    margin: 15px 0 5px 0;
    font-size: 1.4em;
    color: #fff;
}

/* === DETALLES (Motor, Precio, Botón) === */

/* Texto del motor/potencia */
.datos {
    color: #888;
    font-size: 0.9em;
    margin: 5px 0;
}

/* Precio en verde */
.precio {
    color: #2ecc71; 
    font-weight: bold;
    font-size: 1.2em;
    margin: 10px 0 20px 0;
}

/* Botón Rojo */
.boton {
    background-color: #e74c3c;
    color: white;
    padding: 10px 30px;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.9em;
    transition: background 0.3s; /* Animación de color */
}

.boton:hover {
    background-color: #c0392b; /* Rojo más oscuro al tocar */
}

/* === PIE DE PÁGINA (FOOTER) === */
footer {
    background-color: #111;
    padding: 30px;
    color: #555;
    font-size: