/* ===================================================================== */
/*           Estilos Inspirados en la "HUD Speed App"                    */
/* ===================================================================== */

/* Variables de Color para fácil personalización */
:root {
    --bg-outer: #e9eaf1; /* Gris azulado muy claro del fondo */
    --bg-app: #000000;   /* Negro puro para el velocímetro */
    --accent-green: #32ff7e; /* Verde neón brillante */
    --accent-glow: #99ffdd;  /* Cian/Menta pálido para el brillo del botón */
    --button-bg: #4a5568;    /* Gris/Azul oscuro para el botón */
    --text-primary: #ffffff; /* Blanco puro */
    --text-dark: #1a202c;     /* Negro/Gris oscuro para el texto del subtítulo */
    --dial-color: #f0f0f0;   /* Blanco ligeramente apagado para el dial */
}


/* General Body Styles */
body {
    font-family: 'Roboto', 'Helvetica Neue', sans-serif; /* Fuente ultra legible */
    overflow-x: hidden;
    background: linear-gradient(to bottom, var(--bg-outer), #f5f7fa);
    color: var(--text-dark);
}

/* Font Imports */
h1, h2, h3, .font-orbitron {
    font-family: 'Roboto', sans-serif;
    font-weight: 800; /* Tipografía muy audaz */
    text-transform: uppercase;
}

/* Background Animations - No son necesarias para este diseño minimalista */
.animate-gradient-shift, .animate-blob {
    animation: none;
    background: none;
}

/* Pulse Glow - Adaptado para el brillo del botón */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 15px rgba(153, 255, 221, 0.4), 0 0 5px rgba(153, 255, 221, 0.6); }
    50% { box-shadow: 0 0 30px rgba(153, 255, 221, 0.7), 0 0 10px rgba(153, 255, 221, 1); }
    100% { box-shadow: 0 0 15px rgba(153, 255, 221, 0.4), 0 0 5px rgba(153, 255, 221, 0.6); }
}

.animate-pulse-glow {
    animation: pulse-glow 4s infinite alternate;
}

/* Text Animations (sin cambios) */
@keyframes fade-in-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fade-in-up 1s ease-out forwards; }


/* Card Styles - Para el contenedor principal del velocímetro */
.feature-card {
    background: var(--bg-app);
    border-radius: 40px; /* Esquinas muy redondeadas */
    box-shadow: 0 20px 60px rgba(74, 85, 104, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
}

/* Glassmorphism no aplica, se unifica con el estilo de tarjeta */
.glass-effect {
    background: var(--bg-app);
    border-radius: 40px;
}

/* Text Styles */
/* Para el número grande de la velocidad */
.text-speedometer {
    font-family: 'Roboto Mono', monospace; /* Fuente monoespaciada para números */
    font-size: 8rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
/* Para el "km/h" */
.text-speed-unit {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* Button Styles */
/* Botón principal "HUD SPEED" con brillo */
.btn-primary {
    border-radius: 9999px;
    padding: 1rem 3rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    background-color: var(--button-bg);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Aplicamos la animación de brillo directamente */
    animation: pulse-glow 4s infinite alternate;
}

.btn-primary:hover {
    transform: scale(1.05);
}

/* El estilo del velocímetro es complejo y usualmente se hace con SVG o Canvas. */
/* Aquí hay algunas clases de ejemplo para los elementos si los creas con HTML/CSS. */
.speedometer-dial {
    width: 300px;
    height: 300px;
    border: 15px solid var(--dial-color);
    border-radius: 50%;
    border-color: var(--dial-color) var(--dial-color) transparent transparent;
    transform: rotate(135deg);
    position: relative;
}
.speedometer-needle {
    width: 2px;
    height: 140px;
    background: #888;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    /* La rotación se controlaría con JS */
    transform: translateX(-50%) rotate(0deg); 
}
.speedometer-hub {
    width: 25px;
    height: 25px;
    background: var(--accent-green);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px var(--accent-green);
}