/* --- estilos.css: MINIMALISMO PROFESIONAL (NIVEL PRO) --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800&family=Lato:wght@300;400;700&display=swap');

/* --- 1. BASE SOLIDA --- */
html, body { height: 100%; margin: 0; padding: 0; }

body {
    font-family: 'Lato', sans-serif; /* Texto muy legible */
    background-color: #f8f9fa; /* No blanco puro, sino gris perla muy suave */
    color: #343a40;
    display: flex; flex-direction: column;
    min-height: 100vh;
    padding-bottom: 90px; /* Espacio barra móvil */
}

main { flex: 1; display: flex; flex-direction: column; }

/* TÍTULOS CON CARÁCTER */
h1, h2, h3, h4, .navbar-brand { 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700;
    letter-spacing: -0.5px; 
}

/* --- 2. NAVBAR (ENCABEZADO DE LUJO) --- */
.navbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); /* Sombra sutil premium */
    padding-top: 5px; padding-bottom: 5px;
}
.nav-link {
    font-size: 0.85rem; 
    font-weight: 700; 
    color: #555 !important;
    text-transform: uppercase; 
    letter-spacing: 1px;
    padding: 12px 20px !important; 
    border-radius: 6px;
    transition: all 0.3s ease;
}
.nav-link:hover {
    color: #D81B60 !important;
    background-color: rgba(216, 27, 96, 0.04) !important;
}
.navbar-toggler { border: 2px solid #D81B60 !important; border-radius: 8px; transition: 0.3s; }

/* --- 3. BOTONES "PILL" (SÓLIDOS Y ELEGANTES) --- */
.btn-pill { 
    border-radius: 50px; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; 
    text-transform: uppercase;
    letter-spacing: 0.5px; 
    padding: 15px 30px; /* Más grandes y clicables */
    border: none;
    position: relative;
    overflow: hidden;
}

/* EFECTOS DE BOTONES */
.btn-turquesa { background-color: #009688; color: white; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 150, 136, 0.2); }
.btn-turquesa:hover { background-color: #00796b; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 150, 136, 0.3); color: white; }

.btn-violeta { background-color: #6200EA; color: white; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(98, 0, 234, 0.2); }
.btn-violeta:hover { background-color: #4a00b0; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(98, 0, 234, 0.3); color: white; }

.btn-azul { background-color: #00B0FF; color: white; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 176, 255, 0.2); }
.btn-azul:hover { background-color: #0091ea; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 176, 255, 0.3); color: white; }

/* --- 4. BARRA MÓVIL (DISEÑO APP) --- */
.mobile-bar { 
    background: #fff; 
    border-top: 1px solid #f0f0f0; 
    height: 75px; 
    z-index: 9999; 
    padding: 0 8px; 
    box-shadow: 0 -10px 30px rgba(0,0,0,0.05); /* Sombra hacia arriba */
}
.app-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-decoration: none !important; font-size: 0.7rem; font-weight: 700; font-family: 'Montserrat', sans-serif;
    width: 100%; height: 55px; border-radius: 12px; margin: 0 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.app-link i { font-size: 1.5rem; margin-bottom: 4px; }

/* ESTADOS ACTIVOS MÓVIL */
.link-inicio { color: #aaa; }
.link-inicio.active { background-color: #D81B60; color: white !important; box-shadow: 0 5px 15px rgba(216, 27, 96, 0.3); }
.link-inicio:not(.active) i { color: #D81B60; }

.link-galeria { color: #aaa; }
.link-galeria.active { background-color: #6200EA; color: white !important; box-shadow: 0 5px 15px rgba(98, 0, 234, 0.3); }
.link-galeria:not(.active) i { color: #651FFF; }

.link-aula { color: #aaa; }
.link-aula.active { background-color: #00E5FF; color: #000 !important; box-shadow: 0 5px 15px rgba(0, 229, 255, 0.3); }
.link-aula:not(.active) i { color: #00B0FF; }

/* --- 5. TARJETAS (CARDS) DE ALTO NIVEL --- */
.card-animada {
    background: #fff; 
    border: 1px solid rgba(0,0,0,0.03); /* Borde casi invisible */
    border-radius: 16px; 
    padding: 40px 30px; 
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Curva suave */
    border-bottom: 4px solid #f0f0f0; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

@media (min-width: 992px) {
    .card-animada:hover { 
        transform: translateY(-8px); 
        box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
        border-color: transparent;
    }
    .hover-turquesa:hover { border-bottom-color: #009688; }
    .hover-violeta:hover { border-bottom-color: #6200EA; }
    .hover-azul:hover { border-bottom-color: #00B0FF; }
    
    .card-animada:hover .icon-box { 
        transform: scale(1.1); 
    }
}

/* Colores Texto */
.text-magenta { color: #D81B60 !important; }
.text-turquesa { color: #009688 !important; }
.bg-turquesa-light { background-color: rgba(0, 150, 136, 0.06); color: #009688; }
.text-violeta { color: #6200EA !important; }
.bg-violeta-light { background-color: rgba(98, 0, 234, 0.06); color: #6200EA; }
.text-azul { color: #00B0FF !important; }
.bg-azul-light { background-color: rgba(0, 176, 255, 0.06); color: #00B0FF; }

.icon-box { 
    width: 80px; height: 80px; 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    margin: 0 auto 25px; 
    font-size: 2rem; 
    transition: 0.4s; 
}

/* FOOTER */
footer { 
    background-color: #111; 
    color: #888; 
    font-size: 0.8rem; 
    padding: 30px 0; 
    margin-top: auto; 
    letter-spacing: 0.5px;
}