/* style.css - Tech Blog Minimalist Dark Theme */

/* Fuente base Space Grotesk para look moderno */
body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #0a0a0a;
    color: #e0e0e0;
    letter-spacing: -0.2px;
}

/* Color acento principal basado en #9c545f pero más vibrante */
.text-accent {
    color: #c46b7a !important;
}

.bg-accent {
    background-color: #9c545f !important;
}

.btn-accent {
    background-color: #9c545f;
    border-color: #9c545f;
    color: white;
}

.btn-accent:hover {
    background-color: #b86372;
    border-color: #b86372;
    color: white;
}

/* Navbar y texto de marca */
.brand-text {
    letter-spacing: -0.5px;
}

/* Logotipo en blanco usando filtro CSS para mayor visibilidad sobre fondo oscuro */
.logo-img, .logo-img-footer {
    filter: brightness(0) invert(1);
    transition: filter 0.2s ease;
}

/* Hover sutil para mantener efecto */
.navbar-brand:hover .logo-img {
    filter: brightness(0) invert(1);
}

/* Fondo gradiente sutil para header */
.bg-gradient-dark {
    background: linear-gradient(180deg, #0a0a0a 0%, #121212 100%);
}

/* Imágenes modernas: bordes redondeados, sombra y efecto hover */
.modern-img {
    border-radius: 1.5rem;
    box-shadow: 0 12px 24px rgba(0,0,0,0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    filter: brightness(0.9) contrast(1.1);
}

.modern-img:hover {
    transform: scale(1.02);
    box-shadow: 0 18px 32px rgba(157, 84, 95, 0.25);
}

/* Cards personalizadas (si se usan más) */
.card {
    border-radius: 1.5rem;
    background-color: #121212;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Links en nav y animaciones */
.nav-link {
    font-weight: 500;
    transition: color 0.2s;
}

.nav-link:hover {
    color: #c46b7a !important;
}

/* Listas con iconos */
.list-unstyled i.bi-dot {
    vertical-align: middle;
    line-height: 1;
}

/* Ajustes tipográficos para buen contraste */
h1, h2, h3, h4 {
    color: #ffffff;
    font-weight: 600;
}

p {
    color: #cccccc;
}

/* Footer logo ajuste */
.logo-img-footer {
    opacity: 0.9;
}

/* Badge estilo pills */
.badge {
    padding: 0.5em 1em;
    border-radius: 2rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Responsive spacing */
@media (max-width: 768px) {
    .display-5 {
        font-size: 2.2rem;
    }
}