:root {
    --vp-cyan: #00aeef;
    --vp-blue: #0065a3;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Navbar */
.navbar-brand img {
    max-height: 50px; /* Ajuste para que el logo se vea bien */
}

/* Botones Primarios */
.btn-primary {
    background-color: var(--vp-cyan);
    border-color: var(--vp-cyan);
}

.btn-primary:hover {
    background-color: var(--vp-blue);
    border-color: var(--vp-blue);
}

/* Texto Primario */
.text-primary {
    color: var(--vp-blue) !important;
}

.text-info {
    color: var(--vp-cyan) !important;
}

/* Hero Section con gradiente sobre imagen */
.hero-section {
    background: linear-gradient(rgba(0, 101, 163, 0.7), rgba(0, 174, 239, 0.7)), url('https://images.unsplash.com/photo-1548839140-29a749e1cf4d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
    background-size: cover;
    background-position: center;
    height: 80vh; /* 80% del alto de la pantalla */
}

/* Animación suave para las tarjetas */
.hover-card {
    transition: transform 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-10px);
}