/* --- HOJA DE ESTILOS PARA NIVUU --- */
/* 1. VARIABLES Y ESTILOS GLOBALES
------------------------------------*/
/* Para usar la fuente 'Poppins', asegúrate de agregar esto en el de tu HTML:
*/
:root {
--primary-color: #0d6efd; /* Azul principal de Bootstrap */
--secondary-color: #6c757d; /* Gris secundario */
--dark-color: #212529; /* Texto oscuro principal */
--light-bg: #f8f9fa; /* Fondo claro de secciones */
--font-family-base: 'Poppins', sans-serif;
}
html {
/* Habilita el desplazamiento suave al hacer clic en los enlaces del menú */
scroll-behavior: smooth;
}
body {
font-family: var(--font-family-base);
line-height: 1.7;
color: var(--dark-color);
}
h1, h2, h3, h4, h5, h6 {
/* Hacemos los títulos un poco más llamativos */
font-weight: 700;
}
/* 2. HEADER Y NAVEGACIÓN
------------------------------------*/
.navbar .nav-link {
font-weight: 600;
color: var(--secondary-color);
transition: color 0.3s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
/* Resalta el enlace al pasar el mouse */
color: var(--primary-color);
}
.header.shadow-sm {
/* Aseguramos que el header se vea bien y sea funcional */
background-color: #ffffff;
position: sticky;
top: 0;
z-index: 1020; /* Se asegura de que esté por encima de otros elementos */
}
/* 3. SECCIONES ESPECÍFICAS
------------------------------------*/
/* Sección Hero (Principal) */
.hero-section {
padding: 6rem 0; /* Aumenta el espacio vertical para más impacto */
}
.hero-section h1 {
line-height: 1.2;
}
/* Animación sutil para la imagen del dashboard */
.hero-section .img-fluid {
animation: floatAnimation 4s ease-in-out infinite;
}
@keyframes floatAnimation {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
/* Sección de Clientes */
.clients-section img {
max-height: 45px; /* Unifica el tamaño máximo */
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.3s ease-in-out;
}
.clients-section img:hover {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.1);
}
/* Sección de Características y Precios */
.features-section .card,
.pricing-section .card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.features-section .card:hover,
.pricing-section .card:hover {
transform: translateY(-8px); /* Efecto de "levantarse" */
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}
/* Da más énfasis al plan recomendado */
.pricing-section .card.border-primary {
transform: scale(1.05);
}
.pricing-section .card.border-primary:hover {
transform: scale(1.08) translateY(-8px);
}
/* Sección de Testimonios */
.testimonials-section .carousel-control-prev-icon,
.testimonials-section .carousel-control-next-icon {
/* Hacemos más visibles los controles del carrusel */
background-color: rgba(0, 0, 0, 0.4);
border-radius: 50%;
padding: 1.5rem;
}
.testimonials-section .avatar {
width: 80px;
height: 80px;
object-fit: cover;
}
/* Sección CTA Final */
.cta-final-section .btn-light {
font-weight: bold;
color: var(--primary-color);
transition: transform 0.2s ease;
}
.cta-final-section .btn-light:hover {
transform: scale(1.05);
}
/* 4. FOOTER
------------------------------------*/
footer a.link-secondary:hover {
color: #ffffff !important;
text-decoration: underline !important;
}
footer .border-top {
border-color: #444 !important; /* Hacemos la línea divisoria un poco más visible */
}
/* 5. AJUSTES RESPONSIVOS
------------------------------------*/
@media (max-width: 991px) {
/* Centra los botones del menú en móvil */
.navbar-nav .nav-item .btn {
width: 100%;
margin-top: 0.5rem;
margin-left: 0 !important;
}
}
@media (max-width: 768px) {
.hero-section {
padding: 4rem 0;
text-align: center;
}
.hero-section .text-lg-start {
text-align: center !important;
}
.hero-section .btn {
margin-bottom: 0.5rem;
}
}