/* -------------  Global ------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

/* ------------ LISTADO ------------ */
.blog-wrapper{
    width:min(100%,1200px);
    margin-inline:auto;
    padding:0 20px 60px;
    font-family:'Inter',sans-serif;
}

/* Hero slider */
.blog-hero{
    position:relative;
    height:340px;
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin-bottom:48px;
}
.blog-hero__slide{
    background-size:cover;
    background-position:center;
}
.blog-hero__overlay{
    display:flex;
    align-items:flex-end;
    height:100%;
    padding:44px;
    background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.6) 90%);
    text-decoration:none;
    color:#ffffff;
}
.blog-hero__overlay h3{
    font-weight:800;
    font-size:40px;
    line-height:1.15;
    margin:0;
    text-shadow:0 2px 4px rgba(0,0,0,.35);
}

/* Hero arrows */
.blog-hero__prev,
.blog-hero__next{
    position: absolute;
    z-index: 30;
    top: -80px;
    width: 40px;
    height: 40px;
    border: 2px solid #003a79;
    border-radius: 50%;
    background: #ffffff00;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease,border-color .2s ease;
}
.blog-hero__prev{right:72px}
.blog-hero__next{right:20px}
.blog-hero__prev::before,
.blog-hero__next::before{
    content:'';
    width:10px;height:10px;
    border-top:3px solid #003a79;
    border-right:3px solid #003a79;
    transform:rotate(-135deg);
    transition:border-color .2s ease;
}
.blog-hero__next::before{transform:rotate(45deg)}
.blog-hero__prev:hover,
.blog-hero__next:hover{
    background:#003a79;border-color:#003a79;
}
.blog-hero__prev:hover::before,
.blog-hero__next:hover::before{border-color:#fff}

/* Filters */
.blog-filters{
    display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px;
}
.blog-filters button{
    font-weight:600;font-size:14px;line-height:1;
    border:1px solid #013978;
    background:#fff;color:#013978;
    border-radius:25px;padding:8px 20px;
    cursor:pointer;transition:.15s ease-in-out;
}
.blog-filters button:hover,
.blog-filters .active{background:#013978;color:#fff}

/* Cards grid */
body .blog-card a{
	text-decoration:none!important;
}

.blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:36px 32px;
}
.blog-card{
    background:#fff;border-radius:#013978;overflow:hidden;
    display:flex;flex-direction:column;
    transition:transform .25s ease,box-shadow .25s ease;
	border-radius:20px;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 6px 12px rgba(0,0,0,.12)}
.blog-card a{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.blog-card__thumb{aspect-ratio:4/3;overflow:hidden}
.blog-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius: 20px!important;}
.blog-card__date{font-weight:600;font-size:12px;line-height:1;color:#8e8e8e;margin:14px 18px 4px;display:block}
.blog-card__title{font-weight:700;font-size:18px;line-height:1.3;margin:0 18px 10px;color:#013978}
.blog-card__excerpt{font-size:14px;line-height:1.55;margin:0 18px 18px;color:#4a4a4a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__readmore{margin:0 18px 22px;margin-top:auto;font-weight:700;font-size:14px;line-height:1;color:#ff7a02}

/* Post counter */
.blog-counter{text-align:center;margin:50px 0 0;font-weight:600;font-size:14px;line-height:1;color:#8e8e8e}

/* ------------ SINGLE ------------ */
.single-blog{width:min(100%,900px);margin-inline:auto;padding:0 20px 60px;font-family:'Inter',sans-serif}
.single-blog__thumb{border-radius:20px;overflow:hidden;max-height:400px;margin:0 0 50px}
.single-blog__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.single-blog__meta{font-weight:400;font-size:14px;line-height:1;color:#cacaca;margin:0 0 14px}
.single-blog__meta a{color:#003a79}
.single-blog__title{font-weight:800;font-size:42px;line-height:1.15;margin:0 0 34px;max-width:840px;color:#003a79}
.single-blog__content{font-size:16px;line-height:1.75;max-width:780px;color:#3a3a3a}

/* Breakpoints */
@media(max-width:1024px){
    .blog-hero{height:300px}
    .blog-hero__overlay h3{font-size:32px}
}
@media(max-width:768px){
    .blog-hero{height:240px}
    .blog-hero__overlay h3{font-size:26px}
    .blog-card__title{font-size:16px}
    .blog-hero__prev,.blog-hero__next{width:32px;height:32px}
}
@media(max-width:600px){
    .blog-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}