/* Blog y categorías: estilos exclusivos del archivo editorial. */

.sh-page-wrap { padding: 22px 0 72px; background: var(--hg-bg); }
.sh-breadcrumbs-bar { display:flex; align-items:center; gap:8px; margin:0 0 16px; color:var(--hg-muted); font-size:.9rem; }
.sh-breadcrumbs-bar a { color:var(--hg-navy); font-weight:700; }
.sh-breadcrumbs-bar .sep { color:#94a3b8; }

.sh-blog-hero {
    margin-bottom: 28px;
    padding: 36px 40px;
    border-bottom: 4px solid var(--hg-gold);
    border-radius: var(--hg-radius-lg);
    background: linear-gradient(135deg, var(--hg-navy-dark), var(--hg-blue));
    box-shadow: 0 14px 34px rgba(7,29,69,.14);
    color: #fff;
}
.sh-blog-hero-layout { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
.sh-blog-hero-copy { max-width:650px; }
.sh-blog-hero-badge { display:inline-block; margin-bottom:12px; padding:5px 14px; border:1px solid rgba(242,182,4,.4); border-radius:999px; background:rgba(242,182,4,.18); color:var(--hg-gold); font-size:.75rem; font-weight:800; }
.sh-blog-hero-title { margin:0 0 10px; color:#fff; font:900 clamp(1.9rem,3vw,2.4rem)/1.05 var(--hg-font-sans); text-transform:uppercase; }
.sh-archive-hero-desc { color:#cbd5e1; line-height:1.6; }
.sh-archive-hero-desc p { margin:0; }

.sh-blog-search { position:relative; width:100%; max-width:320px; }
.sh-blog-search input { width:100%; height:48px; padding:0 50px 0 20px; border:0; border-radius:999px; outline:0; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.15); color:var(--hg-navy); font:500 .95rem var(--hg-font-sans); }
.sh-blog-search button { position:absolute; top:5px; right:5px; display:flex; width:38px; height:38px; align-items:center; justify-content:center; border:0; border-radius:50%; background:var(--hg-gold); color:var(--hg-navy); cursor:pointer; }

.sh-blog-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:28px; }
.sh-blog-listing { min-width:0; }

.sh-blog-featured-card { display:grid; grid-template-columns:minmax(300px,46%) 1fr; margin-bottom:30px; overflow:hidden; border:1px solid var(--hg-border); border-radius:var(--hg-radius-lg); background:#fff; box-shadow:0 10px 30px rgba(7,29,69,.08); }
.sh-blog-featured-img-wrap, .sh-blog-img-wrap { position:relative; overflow:hidden; background:#eef2f7; }
.sh-blog-featured-img-wrap { min-height:330px; }
.sh-blog-featured-img-wrap img, .sh-blog-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.sh-blog-featured-card:hover img, .sh-blog-card:hover img { transform:scale(1.035); }
.sh-blog-featured-content { display:flex; flex-direction:column; justify-content:center; padding:34px; }
.sh-blog-meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:12px; color:#64748b; font-size:.8rem; font-weight:650; }
.sh-prod-category-badge, .sh-blog-badge-overlay { border-radius:999px; background:var(--hg-gold); color:var(--hg-navy); font-weight:800; }
.sh-prod-category-badge { padding:5px 10px; }
.sh-blog-badge-overlay { position:absolute; top:14px; left:14px; padding:6px 11px; font-size:.72rem; text-transform:uppercase; }
.sh-blog-featured-title { margin:0 0 14px; font:900 clamp(1.55rem,2.4vw,2.15rem)/1.12 var(--hg-font-sans); }
.sh-blog-featured-title a, .sh-blog-title a { color:var(--hg-navy); }
.sh-blog-featured-title a:hover, .sh-blog-title a:hover { color:var(--hg-blue); }
.sh-blog-excerpt { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; color:#64748b; line-height:1.65; }
.sh-blog-featured-excerpt { height:auto; -webkit-line-clamp:4; }
.sh-blog-featured-action { margin-top:18px; }
.sh-blog-read-full { padding:10px 24px; font-size:.9rem; }

.sh-blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.sh-blog-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid var(--hg-border); border-radius:18px; background:#fff; box-shadow:0 7px 22px rgba(7,29,69,.06); transition:transform .25s ease, box-shadow .25s ease; }
.sh-blog-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(7,29,69,.11); }
.sh-blog-img-wrap { aspect-ratio:16/10; }
.sh-blog-body { display:flex; flex:1; flex-direction:column; padding:20px; }
.sh-blog-title { margin:0 0 10px; font:850 1.15rem/1.25 var(--hg-font-sans); }
.sh-blog-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; border-top:1px solid #f1f5f9; }
.sh-blog-author { color:var(--hg-navy); font-size:.8rem; font-weight:700; }

a.sh-blog-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f2b604 0%, #e5aa00 100%) !important;
    color: #071d45 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(242, 182, 4, 0.32) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

a.sh-blog-card-btn svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    stroke: #071d45 !important;
    transition: transform 0.25s ease, stroke 0.25s ease !important;
}

a.sh-blog-card-btn:hover,
.sh-blog-card:hover a.sh-blog-card-btn {
    background: linear-gradient(135deg, #071d45 0%, #0c2b80 100%) !important;
    color: #f2b604 !important;
    transform: scale(1.06) !important;
    box-shadow: 0 6px 16px rgba(7, 29, 69, 0.25) !important;
}

a.sh-blog-card-btn:hover svg,
.sh-blog-card:hover a.sh-blog-card-btn svg {
    stroke: #f2b604 !important;
    transform: none !important;
}

.sh-blog-pagination { margin-top:42px; text-align:center; }
.sh-blog-pagination .page-numbers { display:inline-flex; min-width:40px; height:40px; align-items:center; justify-content:center; margin:3px; padding:0 12px; border:1px solid var(--hg-border); border-radius:10px; background:#fff; color:var(--hg-navy); font-weight:750; }
.sh-blog-pagination .page-numbers.current, .sh-blog-pagination .page-numbers:hover { border-color:var(--hg-gold); background:var(--hg-gold); }
.sh-blog-sidebar { position:sticky; top:104px; display:grid; gap:20px; }
.sh-blog-sidebar-card { padding:22px; border:1px solid var(--hg-border); border-radius:18px; background:#fff; box-shadow:0 7px 22px rgba(7,29,69,.06); }
.sh-blog-sidebar-title { margin:0 0 16px; padding-bottom:11px; border-bottom:3px solid var(--hg-gold); color:var(--hg-navy); font:850 1.05rem/1.2 var(--hg-font-sans); text-transform:uppercase; }
.sh-blog-category-list { display:grid; gap:7px; }
.sh-blog-category-list a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; color:#475569; font-size:.88rem; font-weight:700; }
.sh-blog-category-list a span:last-child { display:flex; min-width:26px; height:24px; align-items:center; justify-content:center; padding:0 7px; border-radius:999px; background:#eef2f7; color:var(--hg-navy); font-size:.75rem; }
.sh-blog-category-list a:hover, .sh-blog-category-list a.active { background:var(--hg-navy); color:#fff; }
.sh-blog-category-list a:hover span:last-child, .sh-blog-category-list a.active span:last-child { background:var(--hg-gold); color:var(--hg-navy); }
.sh-blog-recent-list { display:grid; gap:14px; }
.sh-blog-recent-list a { display:grid; grid-template-columns:58px 1fr; align-items:center; gap:12px; color:var(--hg-navy); }
.sh-blog-recent-list img { width:58px; height:58px; border-radius:9px; object-fit:cover; background:#eef2f7; }
.sh-blog-recent-list strong { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:.85rem; line-height:1.25; }
.sh-blog-recent-list small { display:block; margin-top:4px; color:#94a3b8; font-size:.72rem; }
.sh-blog-archive-list { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.sh-blog-archive-list li { padding:9px 2px; border-bottom:1px solid #eef2f7; color:#94a3b8; font-size:.84rem; }
.sh-blog-archive-list li:last-child { border-bottom:0; }
.sh-blog-archive-list a { color:#475569; font-weight:700; }
.sh-blog-archive-list a:hover { color:var(--hg-blue); }
.sh-blog-empty { padding:60px 20px; border:1px solid var(--hg-border); border-radius:var(--hg-radius-lg); background:#fff; text-align:center; }
.sh-blog-empty p { color:#64748b; }
.sh-blog-home-link { margin-top:16px; }

@media (max-width:960px) {
    .sh-blog-layout { grid-template-columns:1fr; }
    .sh-blog-sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sh-blog-sidebar-card:last-child { grid-column:1 / -1; }
    .sh-blog-featured-card { grid-template-columns:1fr; }
    .sh-blog-featured-img-wrap { min-height:280px; aspect-ratio:16/8; }
    .sh-blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
    .sh-page-wrap { padding:16px 0 52px; }
    .sh-blog-hero { padding:26px 22px; }
    .sh-blog-search { max-width:none; }
    .sh-blog-featured-content { padding:24px 20px; }
    .sh-blog-grid { grid-template-columns:1fr; }
    .sh-blog-sidebar { grid-template-columns:1fr; }
    .sh-blog-sidebar-card:last-child { grid-column:auto; }
    .sh-blog-featured-content, .sh-blog-card-content, .sh-blog-sidebar-card { min-width:0; padding-right:18px; padding-left:18px; }
    .sh-blog-featured-title, .sh-blog-title { overflow-wrap:anywhere; }
    .sh-blog-search { max-width:none; }
}

/* ==========================================================================
   ESTILOS DE ENTRADA INDIVIDUAL DE BLOG (SINGLE POST)
   ========================================================================== */
.sh-single-post-hero {
    max-width: 880px;
    margin: 0 auto 32px;
}

.sh-single-post-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 650;
}

.sh-single-post-h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 900;
    color: #071d45;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0;
}

.sh-single-post-container {
    max-width: 880px;
    margin: 0 auto 48px;
    background: #ffffff;
    border: 1px solid rgba(7, 29, 69, 0.08);
    border-radius: 20px;
    padding: clamp(24px, 4vw, 44px);
    box-shadow: 0 12px 36px rgba(7, 29, 69, 0.06);
    box-sizing: border-box;
}

.sh-single-post-img-main {
    width: 100%;
    max-height: 520px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 36px;
    background: #f8fafc;
}

.sh-single-post-img-main img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

.sh-single-post-content {
    font-family: 'Outfit', sans-serif;
    font-size: 1.08rem;
    line-height: 1.8;
    color: #334155;
}

.sh-single-post-content p {
    margin-bottom: 22px;
}

.sh-single-post-content h2,
.sh-single-post-content h3,
.sh-single-post-content h4 {
    font-family: 'Outfit', sans-serif;
    color: #071d45;
    font-weight: 850;
    margin: 36px 0 16px;
    line-height: 1.25;
}

.sh-single-post-content h2 { font-size: 1.7rem; }
.sh-single-post-content h3 { font-size: 1.4rem; }

.sh-single-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 4px 18px rgba(7, 29, 69, 0.08);
}

.sh-single-post-content ul,
.sh-single-post-content ol {
    margin: 0 0 24px 20px;
    padding: 0;
}

.sh-single-post-content li {
    margin-bottom: 8px;
}

.sh-single-post-content blockquote {
    margin: 28px 0;
    padding: 20px 24px;
    background: #f8fafc;
    border-left: 4px solid #f2b604;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #071d45;
    font-size: 1.1rem;
}

.sh-post-author-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid #e2e8f0;
}

.sh-btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f2b604 0%, #e5aa00 100%);
    color: #071d45;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(242, 182, 4, 0.3);
    transition: all 0.25s ease;
}

.sh-btn-gold:hover {
    background: linear-gradient(135deg, #071d45 0%, #0c2b80 100%);
    color: #f2b604;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(7, 29, 69, 0.25);
}