:root{
    --hpe-navy:#09265f;
    --hpe-blue:#1277df;
    --hpe-green:#079f83;
    --hpe-green-light:#e7f7f3;
    --hpe-bg:#f5f9fc;
    --hpe-border:#e1e9f2;
    --hpe-muted:#6d7c98;
    --hpe-shadow:0 8px 28px rgba(18,49,92,.07);
}

/* ==========================================================
   PÁGINA
   ========================================================== */

html,
body{
    background:
        radial-gradient(circle at 100% 0%,rgba(15,181,143,.08),transparent 26%),
        #f6fafc !important;
}

body{
    color:#21375e !important;
}

@media(min-width:1200px){
    .container,
    .container-fluid{
        width:94% !important;
        max-width:94% !important;
    }
}

/* ==========================================================
   HEADER HPE
   ========================================================== */

.he-shell-header{
    min-height:84px !important;
    background:#fff !important;
    border-bottom:1px solid #e7edf4 !important;
    box-shadow:0 4px 22px rgba(18,48,88,.055) !important;
}

.he-shell-header .container,
.he-shell-header .container-fluid{
    min-height:84px !important;
}

.he-brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:285px;
    text-decoration:none !important;
}

.he-brand-mark{
    width:78px;
    height:48px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(135deg,#082b68 0%,#147ec7 57%,#43d9ad 100%);

    color:#fff;
    font-size:23px;
    font-weight:950;
    font-style:italic;
    letter-spacing:-2px;

    box-shadow:0 7px 18px rgba(18,105,180,.18);
}

.he-brand-copy{
    line-height:1.04;
}

.he-brand-copy strong{
    display:block;
    color:#09265f;
    font-size:17px;
    font-weight:900;
}

.he-brand-copy span{
    display:block;
    color:#09265f;
    font-size:14px;
    font-weight:750;
}

.he-brand-copy small{
    display:block;
    margin-top:3px;
    color:#079f83;
    font-size:7px;
    font-weight:900;
    letter-spacing:.9px;
    text-transform:uppercase;
}

.he-header-center{
    flex:1 1 auto;
    max-width:590px;
    margin:0 28px;
}

.he-search{
    width:100%;
    min-height:47px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:0 15px;

    background:#f8fbfd;

    border:1px solid #dce7ef;
    border-radius:11px;
}

.he-search span{
    color:var(--hpe-navy);
    font-size:17px;
}

.he-search input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#415575;
    font-size:13px;
}

.he-search input::placeholder{
    color:#7d8ca6;
}

.he-user-zone{
    display:flex;
    align-items:center;
    gap:14px;
}

.he-notification{
    position:relative;
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#09265f;
    font-size:20px;
}

.he-notification::after{
    content:"2";

    position:absolute;
    right:0;
    top:-2px;

    width:18px;
    height:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#df2027;
    color:#fff;

    font-size:10px;
    font-weight:900;
}

.he-account-display{
    display:flex;
    align-items:center;
    gap:10px;
}

.he-account-avatar{
    width:44px;
    height:44px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg,#0ca386,#077f70);

    color:#fff;
    font-size:18px;
    font-weight:900;
}

.he-account-copy strong{
    display:block;
    color:#09265f;
    font-size:14px;
    line-height:1.15;
}

.he-account-copy small{
    display:block;
    margin-top:2px;
    color:#73829d;
    font-size:11px;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.he-shell-sidebar{
    background:#fff !important;
    border-right:1px solid #edf1f5 !important;
    padding:14px 12px !important;
}

.he-shell-sidebar .nav{
    gap:4px !important;
}

.he-shell-sidebar .nav-link{
    position:relative;

    min-height:47px !important;

    display:flex !important;
    align-items:center !important;

    padding:11px 13px !important;

    border:0 !important;
    border-radius:10px !important;

    color:#273b65 !important;

    font-size:14px !important;
    font-weight:650 !important;

    transition:.18s ease;
}

.he-shell-sidebar .nav-link:hover{
    background:#f0f8f6 !important;
    color:#09265f !important;
}

.he-shell-sidebar .nav-link.active,
.he-shell-sidebar .active > .nav-link{
    background:
        linear-gradient(90deg,#e4f7f2,#eef9f6) !important;

    color:#09265f !important;

    font-weight:850 !important;
}

.he-shell-sidebar .nav-link.active::before,
.he-shell-sidebar .active > .nav-link::before{
    content:"";

    position:absolute;

    left:-12px;
    top:9px;
    bottom:9px;

    width:3px;

    background:#0aa184;

    border-radius:3px;
}

.he-shell-sidebar hr{
    opacity:.35;
}

.he-sidebar-help{
    margin-top:20px;
    padding:17px;

    background:#f4fbf9;

    border:1px solid #deeee9;
    border-radius:14px;
}

.he-sidebar-help .icon{
    font-size:29px;
    margin-bottom:8px;
}

.he-sidebar-help strong{
    display:block;
    color:#09265f;
    font-size:14px;
}

.he-sidebar-help p{
    margin:5px 0 12px;

    color:#6f8099;
    font-size:12px;
    line-height:1.35;
}

.he-sidebar-help a{
    display:flex;
    justify-content:center;

    padding:9px 11px;

    background:#fff;

    border:1px solid #cfdde7;
    border-radius:8px;

    color:#09265f;

    font-size:12px;
    font-weight:800;

    text-decoration:none;
}

.he-sidebar-idea{
    margin:22px 8px 0;
    padding:0 5px;

    color:#09265f;

    font-size:12px;
    line-height:1.45;
}

.he-sidebar-idea b{
    display:block;
    margin-bottom:5px;
    color:#09265f;
}

.he-sidebar-idea::before{
    content:"⚡";

    display:block;

    margin-bottom:5px;

    color:#079f83;

    font-size:27px;
}

/* ==========================================================
   CONTENIDO
   ========================================================== */

.he-dashboard{
    max-width:none !important;
}

.he-welcome{
    min-height:162px !important;

    padding:25px 28px !important;

    background:
        radial-gradient(circle at 93% 20%,rgba(25,187,146,.16),transparent 20%),
        radial-gradient(circle at 84% 80%,rgba(25,187,146,.09),transparent 26%),
        linear-gradient(90deg,#fff 0%,#f6fbfd 64%,#e8f8f3 100%) !important;

    border-radius:17px !important;
}

.he-welcome .he-title{
    font-size:39px !important;
}

.he-welcome::after{
    content:"Tu sitio web\A puede llegar muy lejos" !important;

    white-space:pre;

    right:45px !important;
    bottom:auto !important;
    top:34px !important;

    width:230px !important;
    height:auto !important;

    background:none !important;

    color:#365d91 !important;

    font-size:18px !important;
    font-weight:500 !important;
    font-style:italic !important;
    line-height:1.35 !important;

    transform:rotate(-6deg) !important;
}

.he-stat{
    min-height:94px !important;
    padding:16px !important;
}

.he-section,
.he-plan,
.he-stat,
.he-quick a{
    box-shadow:0 6px 22px rgba(20,49,90,.055) !important;
}

.he-grid-2{
    grid-template-columns:minmax(0,2fr) minmax(300px,.82fr) !important;
}

.he-banner{
    min-height:300px !important;
}

.he-plans{
    gap:14px !important;
}

.he-plan{
    min-height:325px !important;
}

.he-plan.featured{
    transform:none !important;
}

.he-section-head{
    min-height:54px !important;
}

.he-section-head h3{
    font-size:17px !important;
}

.he-quick{
    margin-top:2px !important;
}

.he-quick a{
    min-height:58px !important;
}

/* ==========================================================
   OCULTAR MARCA ORIGINAL
   ========================================================== */

.he-hide-original-brand{
    display:none !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1200px){
    .he-header-center{
        display:none;
    }

    .he-brand{
        min-width:0;
    }

    .he-welcome::after{
        display:none !important;
    }
}

@media(max-width:991px){
    .he-shell-header{
        min-height:auto !important;
    }

    .he-user-zone{
        display:none;
    }

    .he-shell-sidebar{
        padding:8px !important;
    }
}