/* HEADER */


html {
    overflow-y: scroll !important;
}

:root {
            --accent-color: #007bff;
            --text-dark: #1a1a1a;
        }
        body { background-color: #fcfcfc; }
        
        .navbar {
            background-color: #ffffff !important;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .navbar-brand {
            font-weight: 800;
            font-size: 1.5rem;
            color: var(--text-dark) !important;
            text-transform: lowercase;
            letter-spacing: -1px;
        }

        .nav-link {
            color: var(--text-dark) !important;
            font-weight: 500;
            font-size: 1rem;
            padding: 10px 15px !important;
        }

        /* Estilo del botón contacto en DESCRITORIO */
        @media (min-width: 992px) {
            .btn-contacto {
                background-color: var(--accent-color);
                color: white !important;
                border-radius: 50px; 
                padding: 10px 25px !important;
                font-weight: 600;
                border: none;
                margin-left: 15px;
            }
            .btn-contacto:hover {
                background-color: #0056b3;
                transform: translateY(-2px);
            }
        }

        /* Ajustes para MÓVIL */
        @media (max-width: 991px) {
            .navbar-nav {
                padding: 20px 0;
            }
            .nav-link {
                border-bottom: 1px solid #f8f9fa;
            }
            .search-mobile {
                margin-right: 15px;
                color: var(--text-dark);
                font-size: 1.2rem;
            }
        }

        .search-icon {
            color: var(--text-dark);
            text-decoration: none;
        }


/* INDEX */

    /* Estilo para el Badge Naranja (como en la imagen) */
    .bg-orange {
        background-color: #ff6b35;
        padding: 5px 10px;
        font-weight: bold;
        border-radius: 4px;
    }

    /* Tarjeta personalizada con imagen de fondo */
    .post-card-custom {
        height: 350px;
        background-size: cover;
        background-position: center;
        border-radius: 12px;
        position: relative;
        display: flex;
        align-items: flex-end;
        padding: 30px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .post-card-custom:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    /* Contenido sobre la imagen */
    .post-content-overlay {
        z-index: 2;
        width: 100%;
    }

    /* Efecto de oscurecimiento gradual para que el texto se lea bien */
    .post-card-custom::before {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%);
        z-index: 1;
    }



    /* ==========================================
   ESTILOS ADICIONALES PARA JUEGO DE GRIDS (INDEX)
   ========================================== */

/* Forzar badge naranja idéntico al mockup */
.bg-orange {
    background-color: #ff6b35 !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    padding: 4px 8px !important;
    border-radius: 3px !important;
}

/* Ajustes a la tarjeta grande (Top 2 posts) */
.post-card-custom {
    height: 380px; /* Incrementado para mejor proporción */
    background-size: cover;
    background-position: center;
    border-radius: 8px; /* Bordes ligeramente más suaves */
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 25px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Gradiente de fondo oscuro refinado para legibilidad del texto superior */
.post-card-custom::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
}

.post-content-overlay {
    z-index: 2;
    width: 100%;
}

.post-content-overlay h2 a:hover {
    color: #ff6b35 !important;
}

/* Tarjetas inferiores (Grid de 3 columnas) */
.custom-card-normal {
    transition: transform 0.2s ease;
    background: transparent !important;
}

.custom-card-normal:hover {
    transform: translateY(-3px);
}

.custom-card-img {
    height: 160px;
    object-fit: cover;
    border-radius: 6px !important;
}

/* Forzar que los títulos largos no rompan el diseño en el grid inferior */
.h-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #1a1a1a;
}

/* Ajustes de imágenes en el sidebar */
.object-fit-cover {
    object-fit: cover;
}

.style-title-sidebar {
    font-size: 0.88rem !important;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}


/* Controlar las imágenes que se insertan dentro del contenido del post */
.post-content img {
    max-width: 80% !important; /* Fuerza a que no supere el 80% del ancho del post */
    height: auto !important;    /* Mantiene la proporción de la imagen sin deformarla */
    display: block;             /* Permite centrar la imagen */
    margin: 2rem auto;          /* Centra la imagen horizontalmente y le da espacio arriba/abajo */
    border-radius: 8px;         /* Opcional: le da un toque redondeado suave para que quede estética */
}