/* ============================================
   DESTRUCREACION - BLOG STYLES
   Estilos exclusivos de la pagina /blog
   ============================================ */

/* HERO BLOG (compacto) */
.hero-blog {
    padding: 8rem 2rem 3rem; text-align: center;
    position: relative; overflow: hidden;
}
.hero-blog::before {
    content: ''; position: absolute; top: -40%; right: -20%;
    width: 60vw; height: 60vw;
    background: radial-gradient(circle, var(--blue-glow) 0%, transparent 70%);
    pointer-events: none;
}
.hero-blog .hero-container {
    max-width: 700px; margin: 0 auto; position: relative; z-index: 2;
}
.hero-blog h1 {
    font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700; line-height: 1.2; margin-bottom: 0.5rem; letter-spacing: -1px;
}
.hero-blog h1 em { font-style: normal; color: var(--blue); }
.hero-blog-sub {
    font-size: 1.05rem; color: var(--cream-dim); max-width: 500px; margin: 0 auto;
}

/* BLOG CONTENT */
.blog-section { border-top: 1px solid var(--dark-border); }
.blog-embed {
    padding: 2.5rem; background: var(--dark-card);
    border: 1px solid var(--dark-border); border-radius: 12px;
    min-height: 400px; margin-bottom: 2rem;
}
.blog-placeholder {
    font-family: var(--font-display); font-size: 0.8rem;
    color: var(--cream-dim); text-align: center; letter-spacing: 1px;
    padding: 3rem 0;
}
.blog-link {
    text-align: center; margin-top: 1.5rem;
}

/* RESPONSIVE - BLOG */
@media (max-width: 768px) {
    .hero-blog { padding: 7rem 1.5rem 2.5rem; }
}