:root{
    --atl-bg:#F1F1F1;
    --atl-bg-secondary:#E7E7E7;
    --atl-primary:#FC6401;
    --atl-accent:#FFC247;
    --atl-text-dark:#1d2025;
    --atl-text-muted:#8a8a8a;
    --font-satoshi:'Satoshi', sans-serif;
    --font-geist:'Geist', sans-serif;
}

.atl-container{
    max-width:1140px;
    margin:0 auto;
    padding:0 24px;
}

/* ===== Breadcrumb ===== */
.blog-breadcrumb{
    font-family:var(--font-geist);
    font-size:12.5px;
    color:var(--atl-text-muted);
    margin-bottom:18px;
}
.blog-breadcrumb a{ color:var(--atl-text-muted); }
.blog-breadcrumb a:hover{ color:var(--atl-primary); }
.blog-breadcrumb span{ margin:0 6px; }

/* ===== Banner ===== */
.blog-banner{
    background:linear-gradient(135deg, var(--atl-bg-secondary) 0%, #eeeeee 100%);
    padding:64px 0 56px;
    border-bottom:1px solid var(--atl-bg-secondary);
}
.blog-banner h1{
    color:var(--atl-text-dark);
    font-family:var(--font-satoshi);
    font-size:42px;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0 0 12px;
}
.blog-banner p{
    color:var(--atl-text-muted);
    font-family:var(--font-satoshi);
    font-weight:400;
    font-size:16px;
    max-width:520px;
}

/* ===== Sección grid ===== */
.blog-grid-section{
    padding:55px 0 90px;
}

/* ===== Artículo destacado ===== */
.featured-card{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:0;
    background:#ffffff;
    border:1px solid var(--atl-bg-secondary);
    border-radius:20px;
    overflow:hidden;
    margin-bottom:52px;
    color:inherit;
    box-shadow:0 1px 3px rgba(29,32,37,.04);
    transition:box-shadow .25s ease, transform .25s ease;
}
.featured-card:hover{
    box-shadow:0 22px 44px rgba(29,32,37,.12);
    transform:translateY(-3px);
}
.featured-image{
    position:relative;
    min-height:320px;
    background:var(--atl-bg-secondary);
}
.featured-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.featured-image-fallback{
    height:100%;
    min-height:320px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-satoshi);
    font-weight:700;
    font-size:34px;
    color:var(--atl-text-dark);
    background:
        radial-gradient(circle at 20% 20%, rgba(252,100,1,.10), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(255,194,71,.18), transparent 45%),
        var(--atl-bg-secondary);
}
.featured-body{
    padding:40px 44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.destacado-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-geist);
    font-size:11.5px;
    font-weight:500;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--atl-primary);
    background:rgba(252,100,1,.08);
    padding:5px 12px;
    border-radius:20px;
    width:fit-content;
    margin-bottom:14px;
}
.featured-body .blog-cat{
    margin-bottom:10px;
}
.featured-body h2{
    font-family:var(--font-satoshi);
    font-size:28px;
    font-weight:700;
    line-height:1.28;
    color:var(--atl-text-dark);
    margin:0 0 14px;
}
.featured-body p{
    font-family:var(--font-satoshi);
    font-size:15px;
    line-height:1.7;
    color:var(--atl-text-muted);
    margin:0 0 20px;
}
.featured-body .blog-meta{
    margin-bottom:18px;
}
.featured-body .leer-mas{
    font-family:var(--font-geist);
    font-weight:500;
    font-size:14px;
    color:var(--atl-text-dark);
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.featured-card:hover .leer-mas{
    color:var(--atl-primary);
}

/* ===== Filtros ===== */
.atl-filtros{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:36px;
}
.atl-filtro-btn{
    border:1px solid var(--atl-bg-secondary);
    background:#ffffff;
    color:var(--atl-text-dark);
    font-family:var(--font-geist);
    font-size:13px;
    font-weight:500;
    padding:9px 18px;
    border-radius:30px;
    cursor:pointer;
    transition:all .2s ease;
}
.atl-filtro-btn:hover{
    border-color:var(--atl-primary);
    color:var(--atl-primary);
}
.atl-filtro-btn.active{
    background:var(--atl-primary);
    border-color:var(--atl-primary);
    color:#ffffff;
}

/* ===== Grid de tarjetas ===== */
.blog-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}
.blog-card{
    display:block;
    background:#ffffff;
    border:1px solid var(--atl-bg-secondary);
    border-radius:16px;
    overflow:hidden;
    color:inherit;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(29,32,37,.10);
    border-color:transparent;
}
.blog-card-image{
    height:180px;
    background:var(--atl-bg-secondary);
}
.blog-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.blog-card-fallback{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-satoshi);
    font-weight:700;
    font-size:22px;
    color:var(--atl-text-dark);
    background:
        radial-gradient(circle at 25% 25%, rgba(252,100,1,.10), transparent 50%),
        var(--atl-bg-secondary);
}
.blog-card-body{
    padding:22px;
}
.blog-cat{
    display:inline-block;
    font-family:var(--font-geist);
    font-size:11px;
    font-weight:500;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--atl-primary);
    margin-bottom:10px;
}
.blog-card h3{
    color:var(--atl-text-dark);
    font-family:var(--font-satoshi);
    font-size:18px;
    font-weight:700;
    margin:0 0 10px;
    line-height:1.35;
}
.blog-card p{
    color:var(--atl-text-muted);
    font-family:var(--font-satoshi);
    font-weight:400;
    font-size:14px;
    line-height:1.6;
    margin:0 0 16px;
}
.blog-meta{
    font-family:var(--font-geist);
    font-size:12px;
    color:var(--atl-text-muted);
}

.blog-empty{
    text-align:center;
    color:var(--atl-text-muted);
    font-family:var(--font-satoshi);
    padding:60px 0;
}

/* ===== Artículo individual ===== */
.post-header{
    padding:44px 0 8px;
}
.post-header .blog-cat{
    margin-bottom:14px;
}
.post-header h1{
    color:var(--atl-text-dark);
    font-family:var(--font-satoshi);
    font-size:36px;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.25;
    margin:0 0 18px;
    max-width:820px;
}
.post-meta{
    font-family:var(--font-geist);
    font-size:13px;
    color:var(--atl-text-muted);
}
.post-cover{
    width:100%;
    max-height:460px;
    object-fit:cover;
    border-radius:18px;
    margin:32px 0;
    background:var(--atl-bg-secondary);
}
.post-layout{
    display:grid;
    grid-template-columns:1fr 230px;
    gap:50px;
    align-items:start;
}
.post-content{
    padding-bottom:60px;
    font-family:var(--font-satoshi);
    font-weight:400;
    font-size:17px;
    line-height:1.9;
    color:var(--atl-text-dark);
}
.post-content h2{
    color:var(--atl-text-dark);
    font-family:var(--font-satoshi);
    font-weight:700;
    font-size:24px;
    margin-top:38px;
}
.post-content h3{
    color:var(--atl-text-dark);
    font-family:var(--font-satoshi);
    font-weight:500;
    font-size:20px;
    margin-top:30px;
}
.post-content img{
    max-width:100%;
    border-radius:12px;
    margin:22px 0;
}
.post-content a{
    color:var(--atl-primary);
    text-decoration:underline;
}
.post-content ul, .post-content ol{
    padding-left:22px;
}

.post-back{
    display:inline-block;
    margin-bottom:20px;
    color:var(--atl-text-muted);
    font-family:var(--font-geist);
    font-size:14px;
}
.post-back:hover{
    color:var(--atl-primary);
}

/* ===== Barra lateral: compartir ===== */
.post-sidebar{
    position:sticky;
    top:96px;
    padding-top:44px;
}
.share-label{
    font-family:var(--font-geist);
    font-size:12px;
    font-weight:500;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--atl-text-muted);
    margin-bottom:14px;
}
.share-buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.share-buttons a{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-geist);
    font-size:13.5px;
    font-weight:500;
    color:var(--atl-text-dark);
    background:#ffffff;
    border:1px solid var(--atl-bg-secondary);
    padding:10px 14px;
    border-radius:10px;
    transition:border-color .2s ease, color .2s ease;
}
.share-buttons a:hover{
    border-color:var(--atl-primary);
    color:var(--atl-primary);
}

/* ===== Relacionados ===== */
.related-section{
    border-top:1px solid var(--atl-bg-secondary);
    padding:50px 0 70px;
}
.related-section h2{
    font-family:var(--font-satoshi);
    font-size:22px;
    font-weight:700;
    color:var(--atl-text-dark);
    margin:0 0 26px;
}

/* ===== Paginación ===== */
.blog-pagination{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:50px;
}
.blog-pagination a, .blog-pagination span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:8px;
    font-family:var(--font-geist);
    font-size:14px;
    font-weight:500;
    color:var(--atl-text-dark);
    border:1px solid var(--atl-bg-secondary);
    background:#ffffff;
}
.blog-pagination a:hover{
    border-color:var(--atl-primary);
    color:var(--atl-primary);
}
.blog-pagination .activo{
    background:var(--atl-primary);
    border-color:var(--atl-primary);
    color:#ffffff;
}

/* ===== Responsive ===== */
@media (max-width:900px){
    .blog-grid{ grid-template-columns:1fr 1fr; }
    .featured-card{ grid-template-columns:1fr; }
    .featured-image, .featured-image-fallback{ min-height:220px; }
    .post-layout{ grid-template-columns:1fr; }
    .post-sidebar{ position:static; padding-top:0; }
    .share-buttons{ flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:575px){
    .blog-grid{ grid-template-columns:1fr; }
    .blog-banner h1{ font-size:28px; }
    .featured-body{ padding:26px; }
    .featured-body h2{ font-size:22px; }
    .post-header h1{ font-size:26px; }
}