/* Custom styles that extend the Tailwind utility classes used across index.html */

body {
    background-color: #000000;
    color: #e2e2e2;
    scroll-behavior: smooth;
}

.precision-border {
    border: 1px solid #262626;
    transition: border-color 0.3s ease;
}

.precision-border:hover {
    border-color: #e11d48;
}

.racing-red-gradient {
    background: linear-gradient(90deg, #be0037 0%, #e11d48 100%);
}

.technical-stripe {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* Section background images: swap the file in /images to change the photo, no HTML edits needed */
.hero-background {
    background-image: url('../images/hero-background.jpg');
}

.workshop-background {
    background-image: url('../images/workshop-background.jpg');
}

/* Specialty cards (Aceites y Lubricantes / Llantas / Repuestos / Taller).
   background-color is the fallback: to go back to a plain black card, just delete
   (or comment out) the background-image line below and keep the color. */
.card-bg-lubricantes {
    background-color: #000000;
    background-image: url('../images/card-lubricantes.jpg');
}

.card-bg-llantas {
    background-color: #000000;
    background-image: url('../images/card-llantas.jpg');
}

.card-bg-repuestos {
    background-color: #000000;
    background-image: url('../images/card-repuestos.jpg');
}

.card-bg-taller {
    background-color: #000000;
    background-image: url('../images/card-taller.jpg');
}