/* ==========================================================================
   INDEX.CSS - Específico para la página de inicio
   ========================================================================== */

.hero-index { 
    background: #F8FAFC;
    background: linear-gradient(0deg, rgba(248, 250, 252, 1) 0%, rgba(237, 243, 255, 1) 100%);
    padding: 100px 0; }
.hero-content { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }

.hero-main h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.4; letter-spacing: -1.5px; margin-bottom: 25px; margin-top: 0px; color: #000; max-width: 800px; }
.hero-desc { font-size: 1.4rem; color: var(--text-muted); line-height: 1.5; max-width: 550px; margin-bottom: 35px; }

.btn-hero { display: inline-block; padding: 14px 28px; background: var(--dark); color: #fff !important; border-radius: 50px; font-weight: 600; transition: 0.3s; }
.btn-hero:hover { transform: scale(1.05); background: var(--primary); }

.hero-latest-sidebar { background: rgba(255, 255, 255, 0.5); padding: 30px; border-radius: 20px; border: 1px solid rgba(59, 130, 246, 0.1); }
.sidebar-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--primary); font-weight: 800; margin-bottom: 25px; }

.mini-entry { display: block; padding: 15px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: 0.2s; }
.mini-entry:last-child { border: none; }
.mini-entry h3 { font-size: 1.1rem; margin: 5px 0; line-height: 1.3; color: #000; }
.mini-cat { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.mini-fecha { font-size: 0.8rem; color: var(--text-muted); }
.mini-entry:hover h3 { color: var(--primary); }

@media (max-width: 992px) {
    .hero-index { padding: 0; border-bottom: none; }
    .hero-content { grid-template-columns: 1fr; gap: 40px; }
    .hero-main h1 { font-size: 3rem; letter-spacing: -1.5px; margin-top: 10px; }
}