:root{
    --hbsh5-navy:#0f2f3f;
    --hbsh5-navy-dark:#09212d;
    --hbsh5-navy-soft:#1b485d;
    --hbsh5-gold:#c9952f;
    --hbsh5-gold-light:#efd69c;
    --hbsh5-paper:#fffdf9;
    --hbsh5-bg:#f5f2ec;
    --hbsh5-text:#17313f;
    --hbsh5-muted:#667780;
    --hbsh5-line:#e8e2d8;
    --hbsh5-shadow:0 24px 70px rgba(10,35,47,.16);
}

body{
    background:
        radial-gradient(circle at 12% 18%,rgba(201,149,47,.08),transparent 28%),
        linear-gradient(180deg,#f8f6f1 0%,var(--hbsh5-bg) 100%);
}

.hbsh5-single{
    width:100%;
    padding-bottom:72px;
    overflow:hidden;
    color:var(--hbsh5-text);
    font-family:"Segoe UI",Arial,sans-serif;
}

.hbsh5-hero{
    position:relative;
    width:100%;
    min-height:360px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:linear-gradient(135deg,var(--hbsh5-navy-dark),var(--hbsh5-navy-soft));
}

.hbsh5-hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:42%;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(5,21,29,.42));
}

.hbsh5-hero-image{
    display:block;
    width:100%;
    height:auto;
    max-height:720px;
    object-fit:contain;
    object-position:center;
    background:var(--hbsh5-navy-dark);
}

.hbsh5-hero-fallback{
    width:100%;
    min-height:500px;
    background:
        radial-gradient(circle at 70% 28%,rgba(239,214,156,.2),transparent 28%),
        linear-gradient(135deg,var(--hbsh5-navy-soft),var(--hbsh5-navy-dark));
}

.hbsh5-story-shell{
    position:relative;
    z-index:3;
    width:min(1160px,calc(100% - 48px));
    margin:-88px auto 0;
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.78);
    border-radius:26px;
    background:rgba(255,255,255,.98);
    box-shadow:var(--hbsh5-shadow);
}

.hbsh5-meta-panel{
    position:relative;
    padding:48px 28px;
    border-right:1px solid var(--hbsh5-line);
    background:linear-gradient(180deg,#fbfaf7 0%,#f5f1e9 100%);
}

.hbsh5-meta-panel::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:5px;
    background:linear-gradient(90deg,var(--hbsh5-gold),var(--hbsh5-gold-light));
}

.hbsh5-meta-item{
    display:flex;
    gap:13px;
    align-items:flex-start;
    padding:0 0 25px;
    margin-bottom:25px;
    border-bottom:1px solid var(--hbsh5-line);
}

.hbsh5-meta-icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,149,47,.22);
    border-radius:12px;
    background:#fff;
    box-shadow:0 7px 18px rgba(14,47,63,.07);
    font-size:16px;
}

.hbsh5-meta-item small,
.hbsh5-meta-item strong{
    display:block;
}

.hbsh5-meta-item small{
    margin-bottom:5px;
    color:#8a969c;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.hbsh5-meta-item strong{
    color:#2c414c;
    font-size:13px;
    line-height:1.5;
}

.hbsh5-share > span{
    display:block;
    margin-bottom:13px;
    color:#596b75;
    font-size:12px;
    font-weight:800;
    letter-spacing:.03em;
}

.hbsh5-share-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.hbsh5-share-buttons a,
.hbsh5-share-buttons button{
    width:41px;
    height:41px;
    min-width:41px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:13px;
    color:#fff;
    cursor:pointer;
    text-decoration:none;
    font-size:18px;
    font-weight:900;
    line-height:1;
    box-shadow:0 8px 18px rgba(0,0,0,.13);
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.hbsh5-share-buttons a:hover,
.hbsh5-share-buttons button:hover{
    transform:translateY(-3px);
    filter:brightness(1.04);
    box-shadow:0 12px 23px rgba(0,0,0,.2);
}

.hbsh5-share-facebook{background:#1877f2!important;}
.hbsh5-share-whatsapp{background:#25d366!important;}
.hbsh5-share-instagram{
    background:radial-gradient(circle at 30% 110%,#ffd600 0 15%,#ff7a00 30%,#ff0169 55%,#d300c5 78%,#7638fa 100%)!important;
}
.hbsh5-copy-link{background:#34495e!important;}

.hbsh5-story-content{
    position:relative;
    padding:64px clamp(34px,6vw,82px) 70px;
    background:
        radial-gradient(circle at 96% 3%,rgba(201,149,47,.07),transparent 19%),
        #fff;
}

.hbsh5-mobile-meta{
    display:none;
}

.hbsh5-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--hbsh5-gold);
    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.hbsh5-eyebrow::before{
    content:"";
    width:28px;
    height:2px;
    border-radius:99px;
    background:var(--hbsh5-gold);
}

.hbsh5-story-content h1{
    max-width:850px;
    margin:13px 0 21px;
    color:var(--hbsh5-text);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(42px,5.3vw,68px);
    font-weight:700;
    letter-spacing:-.035em;
    line-height:1.06;
}

.hbsh5-title-divider{
    display:flex;
    align-items:center;
    gap:13px;
    max-width:340px;
    margin:0 0 35px;
}

.hbsh5-title-divider span{
    height:1px;
    flex:1;
    background:linear-gradient(90deg,transparent,var(--hbsh5-gold));
}

.hbsh5-title-divider span:last-child{
    background:linear-gradient(90deg,var(--hbsh5-gold),transparent);
}

.hbsh5-title-divider b{
    color:var(--hbsh5-gold);
    font-size:18px;
    filter:drop-shadow(0 3px 5px rgba(201,149,47,.22));
}

.hbsh5-body{
    max-width:820px;
    color:#465a65;
    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    line-height:1.9;
}

.hbsh5-body p{
    margin:0 0 1.42em;
}

.hbsh5-body p:first-child::first-letter{
    float:left;
    margin:8px 10px 0 0;
    color:var(--hbsh5-gold);
    font-size:3.25em;
    font-weight:700;
    line-height:.75;
}

.hbsh5-body a{
    color:var(--hbsh5-navy-soft);
    text-decoration-color:var(--hbsh5-gold-light);
    text-underline-offset:3px;
}

.hbsh5-body img{
    max-width:100%;
    height:auto;
    margin:15px auto 28px;
    border-radius:18px;
    box-shadow:0 18px 42px rgba(11,39,52,.14);
}

.hbsh5-body blockquote{
    margin:34px 0;
    padding:24px 28px;
    border-left:4px solid var(--hbsh5-gold);
    border-radius:0 14px 14px 0;
    background:#fbf8f1;
}

.hbsh5-quote{
    position:relative;
    margin:40px 0;
    padding:34px 62px;
    overflow:hidden;
    border:1px solid #eadfc9;
    border-radius:18px;
    background:
        radial-gradient(circle at 95% 0,rgba(201,149,47,.12),transparent 32%),
        linear-gradient(135deg,#fffdf8,#f9f4e9);
    color:#344955;
    text-align:center;
    font-family:Georgia,"Times New Roman",serif;
    font-size:21px;
    font-style:italic;
    line-height:1.7;
    box-shadow:0 15px 35px rgba(201,149,47,.08);
}

.hbsh5-quote p{margin:0;}

.hbsh5-quote-mark{
    position:absolute;
    top:5px;
    left:20px;
    color:var(--hbsh5-gold);
    font-family:Georgia,serif;
    font-size:58px;
    line-height:1;
    opacity:.75;
}

.hbsh5-quote-end{
    top:auto;
    right:20px;
    bottom:-15px;
    left:auto;
}

.hbsh5-cta{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    gap:26px;
    align-items:center;
    margin-top:48px;
    padding:38px;
    overflow:hidden;
    border:1px solid #e7dcc7;
    border-radius:20px;
    background:
        radial-gradient(circle at 100% 0,rgba(239,214,156,.3),transparent 33%),
        linear-gradient(135deg,#fffdf8,#f8f1e5);
    box-shadow:0 16px 38px rgba(14,47,63,.08);
}

.hbsh5-cta-icon{
    width:82px;
    height:82px;
    display:grid;
    place-items:center;
    border:5px solid rgba(255,255,255,.15);
    border-radius:50%;
    background:linear-gradient(145deg,var(--hbsh5-navy-soft),var(--hbsh5-navy-dark));
    color:#fff;
    font-size:38px;
    box-shadow:0 12px 28px rgba(9,33,45,.2);
}

.hbsh5-cta h2{
    margin:0 0 9px;
    color:var(--hbsh5-text);
    font-family:Georgia,"Times New Roman",serif;
    font-size:28px;
    line-height:1.2;
}

.hbsh5-cta p{
    margin:0 0 19px;
    color:#5c6d75;
    line-height:1.65;
}

.hbsh5-cta a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:12px 22px;
    border-radius:11px;
    background:linear-gradient(135deg,#d4a23c,var(--hbsh5-gold));
    color:#fff;
    box-shadow:0 9px 21px rgba(201,149,47,.26);
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-decoration:none;
    text-transform:uppercase;
    transition:transform .2s ease,box-shadow .2s ease;
}

.hbsh5-cta a:hover{
    transform:translateY(-2px);
    box-shadow:0 13px 27px rgba(201,149,47,.34);
}

.hbsh5-story-navigation{
    width:min(1160px,calc(100% - 48px));
    margin:24px auto 0;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:18px;
    padding:18px 22px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:18px;
    background:rgba(255,255,255,.94);
    box-shadow:0 13px 35px rgba(8,31,42,.09);
}

.hbsh5-story-navigation a{
    color:var(--hbsh5-text);
    text-decoration:none;
    transition:color .2s ease,transform .2s ease;
}

.hbsh5-story-navigation a:hover{
    color:var(--hbsh5-gold);
}

.hbsh5-nav-side a{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:12px;
    align-items:center;
}

.hbsh5-nav-side span{
    grid-row:1/3;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--hbsh5-line);
    border-radius:50%;
    background:#fbfaf7;
    font-size:21px;
}

.hbsh5-nav-side small,
.hbsh5-nav-side strong{
    display:block;
}

.hbsh5-nav-side small,
.hbsh5-all-stories small{
    color:#7b898f;
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.hbsh5-nav-side strong{
    margin-top:3px;
    font-size:13px;
    line-height:1.3;
}

.hbsh5-nav-right{text-align:right;}
.hbsh5-nav-right a{grid-template-columns:1fr auto;}
.hbsh5-nav-right span{grid-column:2;}

.hbsh5-all-stories{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:7px 14px;
    border-right:1px solid var(--hbsh5-line);
    border-left:1px solid var(--hbsh5-line);
}

.hbsh5-all-stories span{
    font-size:24px;
}

@media (prefers-reduced-motion:no-preference){
    .hbsh5-story-shell{
        animation:hbsh5Rise .55s ease-out both;
    }
    @keyframes hbsh5Rise{
        from{opacity:0;transform:translateY(18px);}
        to{opacity:1;transform:translateY(0);}
    }
}

/* TABLET */
@media (max-width:980px){
    .hbsh5-hero{min-height:245px;}
    .hbsh5-hero-image{max-height:560px;}

    .hbsh5-story-shell{
        width:min(900px,calc(100% - 34px));
        margin-top:-58px;
        grid-template-columns:1fr;
        border-radius:22px;
    }

    .hbsh5-meta-panel{display:none;}

    .hbsh5-mobile-meta{
        display:flex;
        flex-wrap:wrap;
        gap:12px 20px;
        margin-bottom:30px;
        padding:13px 15px;
        border:1px solid var(--hbsh5-line);
        border-radius:11px;
        background:#fbfaf7;
        color:#687980;
        font-size:12px;
    }

    .hbsh5-story-content{padding:50px 46px 55px;}

    .hbsh5-story-navigation{
        width:min(900px,calc(100% - 34px));
    }
}

/* TELÉFONO */
@media (max-width:640px){
    .hbsh5-single{padding-bottom:34px;}

    .hbsh5-hero{
        min-height:180px;
        padding:0;
    }

    .hbsh5-hero::after{height:25%;}
    .hbsh5-hero-image{max-height:410px;}

    .hbsh5-story-shell{
        width:calc(100% - 18px);
        margin-top:-25px;
        border-radius:17px;
    }

    .hbsh5-story-content{
        padding:31px 21px 36px;
    }

    .hbsh5-mobile-meta{
        justify-content:center;
        gap:8px 14px;
        margin-bottom:25px;
        padding:11px;
        font-size:10px;
        text-align:center;
    }

    .hbsh5-eyebrow{
        display:flex;
        justify-content:center;
        font-size:10px;
        text-align:center;
    }

    .hbsh5-eyebrow::before{display:none;}

    .hbsh5-story-content h1{
        margin-top:10px;
        font-size:clamp(34px,10vw,45px);
        line-height:1.08;
        text-align:center;
    }

    .hbsh5-title-divider{
        max-width:260px;
        margin-right:auto;
        margin-bottom:29px;
        margin-left:auto;
    }

    .hbsh5-body{
        font-size:17px;
        line-height:1.78;
    }

    .hbsh5-body p:first-child::first-letter{
        margin-top:6px;
        font-size:2.75em;
    }

    .hbsh5-body img{
        border-radius:13px;
    }

    .hbsh5-quote{
        margin:30px 0;
        padding:29px 34px;
        border-radius:14px;
        font-size:17px;
    }

    .hbsh5-quote-mark{
        left:10px;
        font-size:45px;
    }

    .hbsh5-quote-end{right:10px;left:auto;}

    .hbsh5-cta{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:36px;
        padding:28px 21px;
        text-align:center;
    }

    .hbsh5-cta-icon{
        width:70px;
        height:70px;
        margin:auto;
        font-size:32px;
    }

    .hbsh5-cta h2{font-size:24px;}

    .hbsh5-story-navigation{
        width:calc(100% - 18px);
        grid-template-columns:1fr auto 1fr;
        gap:8px;
        padding:12px 9px;
        border-radius:14px;
    }

    .hbsh5-nav-side span{
        width:29px;
        height:29px;
        font-size:17px;
    }

    .hbsh5-nav-side a{column-gap:6px;}
    .hbsh5-nav-side strong{font-size:10px;}

    .hbsh5-nav-side small,
    .hbsh5-all-stories small{
        font-size:7px;
    }

    .hbsh5-all-stories{
        padding:5px 8px;
    }

    .hbsh5-all-stories span{font-size:19px;}
}

@media (max-width:390px){
    .hbsh5-story-content{padding-right:17px;padding-left:17px;}
    .hbsh5-story-content h1{font-size:32px;}
    .hbsh5-mobile-meta{font-size:9px;}
    .hbsh5-nav-side strong{display:none;}
}