/* VARIABLES DE COLOR KUVVA */
:root {
    /* Azul Pizarra */
    --kuvva-blue: #37475A; 
    /* Verde Menta (Ajustado para web) */
    --kuvva-mint: #5EEad4;
    /* Verde Menta Claro para fondos */
    --kuvva-mint-light: #e0fcf8;
    /* Fuente Principal */
    --font-primary: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-primary);
    color: var(--kuvva-blue);
}

/* TEXTO Y COLORES */
.text-kuvva-blue { color: var(--kuvva-blue) !important; }
.text-kuvva-mint { color: var(--kuvva-mint) !important; }
.bg-kuvva-blue { background-color: var(--kuvva-blue) !important; }
.bg-kuvva-mint { background-color: var(--kuvva-mint) !important; }
.bg-kuvva-mint-light { background-color: var(--kuvva-mint-light) !important; }

/* ============ ESTILOS DEL LOGO RESPONSIVO ============ */

/* 1. Estilo base (para celulares y tablets pequeñas) */
/* El logo se mantendrá prudente para no romper el menú móvil */
.navbar-brand img {
    max-height: 45px; /* Altura máxima en móvil */
    width: auto;      /* Mantiene la proporción para que no se estire */
    height: auto;
    transition: max-height 0.3s ease; /* Suaviza el cambio si agrandas la ventana */
}

/* 2. Estilo para ESCRITORIO (Pantallas más anchas de 992px) */
/* Aquí es donde ocurre la magia: cuando la pantalla es grande, el logo crece */
@media (min-width: 992px) {
    .navbar-brand img {
        max-height: 75px; /* ¡Aquí ajustas el tamaño final de escritorio! */
    }
    /* Ajustamos un poco el padding del menú para que el logo grande respire */
    .navbar {
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
    }
}
/* ===================================================== */

/* BOTONES PERSONALIZADOS */
.btn-kuvva {
    background-color: var(--kuvva-blue);
    color: var(--kuvva-mint);
    font-weight: 700;
    border: 2px solid var(--kuvva-blue);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.btn-kuvva:hover {
    background-color: transparent;
    color: var(--kuvva-blue);
}

.btn-kuvva-outline {
    background-color: transparent;
    color: var(--kuvva-blue);
    font-weight: 700;
    border: 2px solid var(--kuvva-blue);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
}
.btn-kuvva-outline:hover {
    background-color: var(--kuvva-blue);
    color: white;
}

.btn-kuvva-mint {
    background-color: var(--kuvva-mint);
    color: var(--kuvva-blue);
    font-weight: 800;
    border: none;
    border-radius: 50px;
    transition: transform 0.2s ease;
}
.btn-kuvva-mint:hover {
    transform: translateY(-3px);
    color: var(--kuvva-blue);
    box-shadow: 0 10px 20px rgba(94, 234, 212, 0.4) !important;
}

/* HERO SECTION */
.hero-section {
    /* IMPORTANTE: Asegúrate de subir tu foto 'fondo-hero.jpg' */
    background: linear-gradient(rgba(55, 71, 90, 0.85), rgba(55, 71, 90, 0.9)), url('fondo-hero.jpg');
    background-size: cover;
    background-position: center;
    min-height: 85vh;
    padding-top: 80px; /* Espacio para el navbar fijo */
}

/* SECCIONES */
.problem-list i {
    font-size: 1.2rem;
}

.benefit-box {
    transition: transform 0.3s ease;
}
.benefit-box:hover {
    transform: translateY(-5px);
}

/* PRICING CARDS */
.pricing-card {
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.1)!important;
}
.popular-plan {
    border: 3px solid var(--kuvva-mint) !important;
    transform: scale(1.05);
}
.popular-plan:hover {
    transform: scale(1.08) translateY(-10px);
}
.pricing-list li {
    font-size: 1.05rem;
}

/* RESPONSIVE AJUSTES */
@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
    }
    .display-4 {
        font-size: 2.5rem;
    }
    .popular-plan {
        transform: scale(1);
    }
}