/* Estilos para la sección de Blog */
.blog-section {
    padding: 80px 0;
    background-color: #fff;
}

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

.blog-header h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
    position: relative;
}

.blog-header h2::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #6ad3ea;
    border-radius: 50%;
    margin-left: 5px;
    position: relative;
    top: -15px;
}

.blog-header p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
}

.blog-posts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.blog-card {
    background-color: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.blog-image {
    height: 200px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-info {
    padding: 20px;
    background-color: #e6f7fc;
}

.blog-date {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.blog-info h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
    min-height: 50px;
}

.blog-link {
    display: inline-block;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.blog-link:hover {
    color: #6a1b9a;
}

.blog-button-container {
    text-align: center;
    margin-top: 20px;
}

.btn-blog {
    display: inline-block;
    padding: 12px 30px;
    background-color: transparent;
    color: #333;
    border: 2px solid #333;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-blog:hover {
    background-color: #6a1b9a;
    color: #fff;
    border-color: #6a1b9a;
}

/* Estilos responsivos */
@media (max-width: 992px) {
    .blog-posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .practicas-content {
        flex-direction: column;
        text-align: center;
    }

    .practicas-texto {
        margin-bottom: 30px;
    }

    .blog-posts {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}
/* ============================================================
   Estilos de la página de índice del blog (blog/blog.html)
   ============================================================ */
.hdr{display:flex;justify-content:space-between;align-items:center}
.hdr-logo{display:flex;align-items:center;gap:12px}
.hdr-logo img{height:40px;border-radius:6px}
.hdr-logo span{color:#fff;font-weight:700;font-size:16px}
.hdr-logo em{color:#00d4ff;font-style:normal}
.hdr-nav{display:flex;gap:24px;align-items:center}
.hdr-nav a{color:rgba(255,255,255,.7);font-size:14px;font-weight:500;transition:color .2s}
.hdr-nav a:hover{color:#fff}
.btn-mat{background:#ff6b35;color:#fff;padding:8px 18px;border-radius:8px;font-weight:700;font-size:13px;transition:background .2s}
.btn-mat:hover{background:#ff855a}
.blog-hero{background:linear-gradient(135deg,#0f1626 0%,#1a2540 100%);padding:60px 0 50px;color:#fff;text-align:center}
.blog-hero h1{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;margin-bottom:14px}
.blog-hero h1 span{color:#00d4ff}
.blog-hero p{font-size:1.05rem;opacity:.8;max-width:560px;margin:0 auto}
.cats{padding:32px 0 0}
.cat-list{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cat-btn{padding:8px 18px;border-radius:99px;border:1.5px solid #e2e8f0;font-size:13px;font-weight:600;color:#475569;cursor:pointer;transition:all .2s;background:#fff}
.cat-btn:hover,.cat-btn.active{background:#0f1626;color:#00d4ff;border-color:#0f1626}
.articles{padding:40px 0 80px}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.article-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #e2e8f0;transition:box-shadow .2s,transform .2s}
.article-card:hover{box-shadow:0 8px 30px rgba(15,23,42,.1);transform:translateY(-4px)}
.card-cat{display:inline-block;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.cat-salidas{background:#ede9fe;color:#4f46e5}
.cat-fp{background:#dcfce7;color:#16a34a}
.cat-tech{background:#fff7ed;color:#f97316}
.cat-madrid{background:#fef3c7;color:#d97706}
.cat-guia{background:#ffe4e6;color:#e11d48}
.card-body{padding:22px}
.card-body h2{font-size:1.05rem;font-weight:700;color:#0f172a;margin-bottom:8px;line-height:1.4}
.card-body p{font-size:13.5px;color:#475569;line-height:1.6;margin-bottom:16px}
.card-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#94a3b8}
.read-more{color:#4f46e5;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:4px;transition:gap .2s}
.read-more:hover{gap:8px}
.blog-index-footer{background:#0f1626;color:rgba(255,255,255,.6);padding:40px 0 20px}
.blog-index-footer .footer-bottom{text-align:center;font-size:12px;margin-top:20px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
@media(max-width:900px){.articles-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.articles-grid{grid-template-columns:1fr}.hdr-nav{display:none}}

/* ── Estilos faltantes del índice del blog ─────────────────── */
*{box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#f8fafc;color:#0f172a;margin:0;line-height:1.75}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.site-header{background:#0f1626;padding:14px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.4)}
footer{background:#0f1626;color:rgba(255,255,255,.55);padding:28px 0;text-align:center;font-size:13px}
footer a{color:#00d4ff}
.footer-bottom{margin-top:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;font-size:12px}

/* ── Card covers — banner visual por categoría ─────────────── */
.card-cover{height:120px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card-cover i{font-size:2.8rem;color:rgba(255,255,255,0.3)}
.cover-salidas{background:linear-gradient(135deg,#4f46e5 0%,#6d28d9 100%)}
.cover-fp{background:linear-gradient(135deg,#16a34a 0%,#15803d 100%)}
.cover-tech{background:linear-gradient(135deg,#f97316 0%,#ea580c 100%)}
.cover-madrid{background:linear-gradient(135deg,#d97706 0%,#b45309 100%)}
.cover-guia{background:linear-gradient(135deg,#e11d48 0%,#be123c 100%)}