/* ===========================
   BLOG — INDICE (blog.html)
=========================== */
.blog-page{
    min-height:100vh;
    padding:130px 0 100px;
    background:var(--bg-primary);
}

.blog-hero{
    width:90%;
    max-width:900px;
    margin:0 auto 50px;
    text-align:center;
}

.blog-hero h1{
    font-size:clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
    font-weight:800;
    color:var(--text-primary);
    margin-bottom:14px;
}

.blog-hero p{
    color:var(--text-muted);
    font-size:16px;
    line-height:1.7;
    max-width:640px;
    margin:0 auto;
}

.blog-grid{
    width:90%;
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
}

.blog-card{
    background:var(--surface-2);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:var(--transition-fast);
    display:flex;
    flex-direction:column;
    text-decoration:none;
}

.blog-card:hover{
    transform:translateY(-8px);
    border-color:var(--border-accent);
    box-shadow:0 20px 45px var(--glow-soft);
}

.blog-thumb{
    height:150px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    color:rgba(255,255,255,.85);
    background:linear-gradient(135deg, #10254d, #081325);
}

.blog-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(45,169,255,.35), transparent 60%);
}

.blog-category{
    position:absolute;
    top:14px;
    left:14px;
    background:rgba(5,8,22,.75);
    color:var(--accent-tertiary);
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:6px 12px;
    border-radius:50px;
    z-index:2;
}

.blog-body{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}

.blog-body h3{
    font-size:18px;
    font-weight:700;
    color:var(--text-primary);
    line-height:1.4;
}

.blog-body p{
    color:var(--text-muted);
    font-size:14px;
    line-height:1.6;
}

.blog-read-more{
    margin-top:auto;
    padding-top:10px;
    color:var(--accent-secondary);
    font-size:14px;
    font-weight:700;
}

/* ===========================
   BLOG — ARTICULO (blog/*.html)
=========================== */
.article-page{
    min-height:100vh;
    padding:130px 0 100px;
    background:var(--bg-primary);
}

.article-container{
    width:90%;
    max-width:780px;
    margin:0 auto;
}

.article-breadcrumb{
    font-size:13px;
    color:var(--text-muted);
    margin-bottom:20px;
}

.article-breadcrumb a{
    color:var(--text-muted);
    text-decoration:none;
}

.article-breadcrumb a:hover{
    color:var(--accent-secondary);
}

.article-header h1{
    font-size:clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem);
    font-weight:800;
    color:var(--text-primary);
    line-height:1.3;
    margin-bottom:14px;
}

.article-meta{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    color:var(--text-muted);
    font-size:13px;
    margin-bottom:36px;
}

.article-meta span{
    display:flex;
    align-items:center;
    gap:6px;
}

.article-content pre{
    background:var(--surface-1);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-md);
    padding:18px 20px;
    overflow-x:auto;
    margin:0 0 20px;
}

.article-content code{
    font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size:13.5px;
    color:#8fd3ff;
}

.article-content p code,
.article-content li code{
    background:var(--surface-1);
    padding:2px 6px;
    border-radius:4px;
}

.article-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    background:linear-gradient(135deg, rgba(45,169,255,.12), rgba(45,169,255,.03));
    border:1px solid var(--border-accent);
    border-radius:var(--radius-lg);
    padding:26px 30px;
    margin:36px 0;
}

.article-cta-text h4{
    color:var(--text-primary);
    font-size:17px;
    font-weight:700;
    margin-bottom:6px;
}

.article-cta-text p{
    color:var(--text-muted);
    font-size:14px;
    margin:0;
}

@media (max-width: 900px){
    .blog-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 600px){
    .blog-grid{ grid-template-columns:1fr; }
    .article-cta{ flex-direction:column; align-items:flex-start; }
}