/* ============================================================
   BEDEEL UI_03 R3
   VISUAL DEPTH / COLOR SYSTEM / IMAGE LAYERS
   ============================================================ */

:root{

    --bd-coral:#ee6758;
    --bd-coral-2:#ff7868;

    --bd-blue:#4f86f7;
    --bd-blue-soft:rgba(79,134,247,.14);

    --bd-teal:#38bda8;
    --bd-teal-soft:rgba(56,189,168,.13);

    --bd-amber:#edae55;
    --bd-amber-soft:rgba(237,174,85,.14);

    --bd-violet:#9b7bea;
    --bd-violet-soft:rgba(155,123,234,.13);

    --bd-green:#58bd7c;
    --bd-green-soft:rgba(88,189,124,.12);

    --bd-pink:#d977a5;
    --bd-pink-soft:rgba(217,119,165,.12);

    --bd-surface-0:#070708;
    --bd-surface-1:#0d0d0f;
    --bd-surface-2:#121215;
    --bd-surface-3:#17171b;
    --bd-surface-4:#1d1d21;

    --bd-stroke:rgba(255,255,255,.075);
}

/* ============================================================
   GLOBAL DEPTH
   ============================================================ */

body.np4-public{
    position:relative;

    background:
        radial-gradient(
            circle at 15% 12%,
            rgba(79,134,247,.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(155,123,234,.05),
            transparent 23%
        ),
        radial-gradient(
            circle at 50% 0%,
            rgba(238,103,88,.07),
            transparent 30%
        ),
        #070708 !important;
}

body.np4-public::before{
    content:"";

    position:fixed;
    z-index:-1;

    width:780px;
    height:780px;

    top:80px;
    right:-280px;

    opacity:.045;

    pointer-events:none;

    background:
        url("/assets/bedeel/ChatGPT%20Image%2017%20sept%202026,%2003_09_48%20p.m..png")
        center / cover
        no-repeat;

    filter:
        grayscale(1)
        contrast(1.15);
}

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

.np4-header{
    background:
        linear-gradient(
            180deg,
            rgba(12,12,14,.96),
            rgba(7,7,8,.91)
        ) !important;

    border-bottom:
        1px solid rgba(255,255,255,.065) !important;
}

.np4-search{
    background:
        linear-gradient(
            180deg,
            #151519,
            #101013
        ) !important;

    border-color:
        rgba(255,255,255,.09) !important;
}

.np4-search:focus-within{
    border-color:
        rgba(79,134,247,.45) !important;

    box-shadow:
        0 0 0 3px rgba(79,134,247,.07),
        0 10px 30px rgba(0,0,0,.20) !important;
}

/* ============================================================
   LEFT NAV
   ============================================================ */

.np4-left-nav>a{
    position:relative;

    overflow:hidden;
}

.np4-left-nav>a::after{
    content:"";

    position:absolute;

    width:70px;
    height:70px;

    right:-35px;
    top:-35px;

    border-radius:50%;

    opacity:0;

    transition:.18s ease;
}

.np4-left-nav>a:hover::after{
    opacity:1;
}

.np4-left-nav>a:nth-child(1)::after{
    background:rgba(238,103,88,.13);
}

.np4-left-nav>a:nth-child(2)::after{
    background:rgba(79,134,247,.12);
}

.np4-left-nav>a:nth-child(3)::after{
    background:rgba(56,189,168,.12);
}

.np4-left-nav>a:nth-child(4)::after{
    background:rgba(155,123,234,.12);
}

.np4-left-nav>a:nth-child(1) i{
    color:var(--bd-coral) !important;
}

.np4-left-nav>a:nth-child(2) i{
    color:var(--bd-blue) !important;
}

.np4-left-nav>a:nth-child(3) i{
    color:var(--bd-teal) !important;
}

.np4-left-nav>a:nth-child(4) i{
    color:var(--bd-violet) !important;
}

.np4-left-nav>a.is-active{
    background:
        linear-gradient(
            90deg,
            rgba(238,103,88,.12),
            rgba(238,103,88,.025)
        ) !important;
}

/* ============================================================
   SECTORS
   ============================================================ */

.np4-sectors a:nth-of-type(1) span{
    background:var(--bd-blue) !important;
}

.np4-sectors a:nth-of-type(2) span{
    background:var(--bd-amber) !important;
}

.np4-sectors a:nth-of-type(3) span{
    background:var(--bd-teal) !important;
}

.np4-sectors a:nth-of-type(4) span{
    background:var(--bd-violet) !important;
}

.np4-sectors a:nth-of-type(5) span{
    background:var(--bd-green) !important;
}

.np4-sectors a:nth-of-type(6) span{
    background:var(--bd-pink) !important;
}

/* ============================================================
   LEFT CTA
   TU EMPRESA TAMBIEN TIENE UNA RED
   ============================================================ */

.np4-left-cta{
    position:relative;

    overflow:hidden;

    padding:0 0 15px !important;

    border:
        1px solid rgba(255,255,255,.085) !important;

    border-radius:19px !important;

    background:
        linear-gradient(
            180deg,
            #131316,
            #0d0d0f
        ) !important;

    box-shadow:
        0 24px 55px rgba(0,0,0,.26) !important;
}

.np4-left-cta::before{
    content:"";

    position:absolute;

    width:160px;
    height:160px;

    right:-80px;
    bottom:-80px;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(79,134,247,.16),
            transparent 68%
        );
}

.np4-left-cta-art{
    position:relative;

    height:145px !important;

    margin:
        0
        0
        15px !important;

    overflow:hidden;

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

    background:
        linear-gradient(
            180deg,
            rgba(5,5,7,.02),
            rgba(5,5,7,.80)
        ),
        url("/assets/bedeel/public/networking.jpg")
        center / cover
        no-repeat !important;
}

.np4-left-cta-art::before{
    content:"";

    display:block !important;

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 20% 25%,
            rgba(79,134,247,.20),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            transparent 40%,
            rgba(238,103,88,.15)
        );
}

.np4-left-cta-art::after{
    content:"";

    display:block !important;

    position:absolute;

    width:76px;
    height:76px;

    right:15px;
    bottom:12px;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(238,103,88,.26),
            rgba(238,103,88,.04) 60%,
            transparent 62%
        );

    box-shadow:
        0 0 0 12px rgba(255,255,255,.025);
}

.np4-left-cta>strong,
.np4-left-cta>p,
.np4-left-cta>a{
    position:relative;
    z-index:2;

    margin-left:15px !important;
    margin-right:15px !important;
}

.np4-left-cta>strong{
    display:block;

    max-width:165px;

    font-size:13px !important;
    line-height:1.25 !important;

    letter-spacing:-.025em;
}

.np4-left-cta>p{
    color:#89858a !important;

    font-size:8px !important;
    line-height:1.55 !important;
}

.np4-left-cta>a{
    min-height:38px;

    background:
        linear-gradient(
            135deg,
            #ee6758,
            #f17868
        ) !important;

    box-shadow:
        0 11px 28px rgba(238,103,88,.20) !important;
}

/* ============================================================
   HERO
   ============================================================ */

.np4-hero{
    position:relative;

    border-color:
        rgba(255,255,255,.09) !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.34) !important;
}

.np4-hero::after{
    content:"";

    position:absolute;
    z-index:2;

    width:260px;
    height:260px;

    right:-95px;
    top:-95px;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(79,134,247,.12),
            rgba(155,123,234,.04) 45%,
            transparent 70%
        );
}

.np4-hero-media>img{
    filter:
        saturate(.74)
        contrast(1.08)
        brightness(.69) !important;
}

.np4-hero-overlay{
    background:
        linear-gradient(
            90deg,
            rgba(5,5,6,.95),
            rgba(6,6,7,.74) 43%,
            rgba(6,6,7,.19) 78%
        ),
        linear-gradient(
            0deg,
            rgba(5,5,6,.70),
            transparent 52%
        ) !important;
}

.np4-hero-copy>span{
    color:#ff7667 !important;
}

.np4-hero-copy h1 strong{
    background:
        linear-gradient(
            90deg,
            #ff7667,
            #f4a369
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent !important;
}

.np4-hero-actions>a:nth-child(1) i{
    color:var(--bd-amber) !important;

    background:
        var(--bd-amber-soft) !important;
}

.np4-hero-actions>a:nth-child(2) i{
    color:var(--bd-teal) !important;

    background:
        var(--bd-teal-soft) !important;
}

.np4-hero-actions>a:nth-child(3) i{
    color:var(--bd-blue) !important;

    background:
        var(--bd-blue-soft) !important;
}

/* ============================================================
   STORIES / SECTORS
   ============================================================ */

.np4-story-image{
    border-color:
        rgba(255,255,255,.09) !important;

    box-shadow:
        0 16px 35px rgba(0,0,0,.20);
}

.np4-story-image>img{
    filter:
        saturate(.84)
        brightness(.82)
        contrast(1.03) !important;
}

.np4-story:nth-child(1) .np4-story-avatar{
    background:
        linear-gradient(
            145deg,
            #4f86f7,
            #3563bc
        ) !important;
}

.np4-story:nth-child(2) .np4-story-avatar{
    background:
        linear-gradient(
            145deg,
            #9b7bea,
            #7559bc
        ) !important;
}

.np4-story:nth-child(3) .np4-story-avatar{
    background:
        linear-gradient(
            145deg,
            #38bda8,
            #268b7d
        ) !important;
}

.np4-story:nth-child(4) .np4-story-avatar{
    background:
        linear-gradient(
            145deg,
            #edae55,
            #bf7f2e
        ) !important;
}

.np4-story:nth-child(1):hover .np4-story-image{
    border-color:
        rgba(79,134,247,.55) !important;
}

.np4-story:nth-child(2):hover .np4-story-image{
    border-color:
        rgba(155,123,234,.55) !important;
}

.np4-story:nth-child(3):hover .np4-story-image{
    border-color:
        rgba(56,189,168,.55) !important;
}

.np4-story:nth-child(4):hover .np4-story-image{
    border-color:
        rgba(237,174,85,.55) !important;
}

/* MAS EMPRESAS */

.np4-story:nth-child(5) .np4-story-image{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(8,8,10,.24),
            rgba(8,8,10,.86)
        ),
        url("/assets/bedeel/public/team.jpg")
        center / cover
        no-repeat !important;
}

.np4-story:nth-child(5) .np4-story-image::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(56,189,168,.20),
            transparent 45%
        );
}

.np4-story-lock{
    z-index:2;

    color:#fff !important;

    border:
        1px solid rgba(255,255,255,.16);

    background:
        rgba(8,8,10,.68) !important;

    backdrop-filter:blur(10px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.25);
}

/* ============================================================
   FEED - CARD COLORS BY TYPE
   ============================================================ */

.np4-post{
    position:relative;

    background:
        linear-gradient(
            180deg,
            #111114,
            #0d0d0f
        ) !important;
}

.np4-post:nth-child(1){
    box-shadow:
        inset 3px 0 0 rgba(237,174,85,.60),
        0 22px 65px rgba(0,0,0,.16) !important;
}

.np4-post:nth-child(2){
    box-shadow:
        inset 3px 0 0 rgba(56,189,168,.52),
        0 22px 65px rgba(0,0,0,.16) !important;
}

.np4-post:nth-child(3){
    box-shadow:
        inset 3px 0 0 rgba(155,123,234,.55),
        0 22px 65px rgba(0,0,0,.16) !important;
}

.np4-post:nth-child(1) .np4-post-avatar{
    background:
        linear-gradient(
            145deg,
            #edae55,
            #b97828
        ) !important;
}

.np4-post:nth-child(2) .np4-post-avatar{
    background:
        linear-gradient(
            145deg,
            #38bda8,
            #238775
        ) !important;
}

.np4-post:nth-child(3) .np4-post-avatar{
    background:
        linear-gradient(
            145deg,
            #9b7bea,
            #6c50ae
        ) !important;
}

.np4-post:nth-child(1) .np4-post-image-copy>span{
    color:#f0b05c !important;
}

.np4-post:nth-child(2) .np4-post-image-copy>span{
    color:#50cbb6 !important;
}

.np4-post:nth-child(3) .np4-post-image-copy>span{
    color:#aa8af3 !important;
}

.np4-post-image>img{
    filter:
        saturate(.78)
        brightness(.82)
        contrast(1.04) !important;

    transition:
        transform .35s ease,
        filter .35s ease;
}

.np4-post:hover .np4-post-image>img{
    transform:scale(1.015);

    filter:
        saturate(.92)
        brightness(.86)
        contrast(1.04) !important;
}

.np4-post-tags span:nth-child(1){
    color:#aaa7a3 !important;
}

.np4-post-tags span:nth-child(2){
    color:#8fb0ef !important;
}

.np4-post-tags span:nth-child(3){
    color:#9dd6c9 !important;
}

/* ============================================================
   FEED ACTIONS
   ============================================================ */

.np4-post-actions>a:nth-child(1):hover{
    color:#ef7c94 !important;
}

.np4-post-actions>a:nth-child(2):hover{
    color:#4f86f7 !important;
}

.np4-post-actions>a:nth-child(3):hover{
    color:#38bda8 !important;
}

.np4-post-actions>a:last-child{
    color:#ef7465 !important;
}

/* ============================================================
   LOCKED OPPORTUNITIES
   ============================================================ */

.np4-locked-feed{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(13,13,16,.98),
            rgba(18,15,19,.90)
        ) !important;
}

.np4-locked-feed::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.11;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(8,8,10,.88),
            rgba(8,8,10,.45)
        ),
        url("/assets/bedeel/public/meeting.jpg")
        center / cover
        no-repeat;
}

.np4-locked-feed>*{
    position:relative;
    z-index:1;
}

.np4-locked-title>span{
    color:#4f86f7 !important;

    background:
        rgba(79,134,247,.12) !important;
}

.np4-locked-title small{
    color:#9b7bea !important;
}

.np4-locked-feed>a{
    background:
        linear-gradient(
            90deg,
            #e96254,
            #f07965
        ) !important;
}

/* ============================================================
   RIGHT RAIL - DISCOVERY
   ============================================================ */

.np4-right-discover{
    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(79,134,247,.07),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #111114,
            #0c0c0e
        ) !important;
}

.np4-right-discover::before{
    content:"";

    position:absolute;

    width:110px;
    height:110px;

    right:-55px;
    top:-55px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(79,134,247,.14),
            transparent 68%
        );
}

.np4-right-discover header small{
    color:#77a1f5 !important;
}

.np4-right-discover>a:nth-of-type(1) .np4-right-avatar{
    background:
        linear-gradient(
            145deg,
            #4f86f7,
            #325cb2
        ) !important;
}

.np4-right-discover>a:nth-of-type(2) .np4-right-avatar{
    background:
        linear-gradient(
            145deg,
            #38bda8,
            #217e70
        ) !important;
}

.np4-right-discover>a:nth-of-type(3) .np4-right-avatar{
    background:
        linear-gradient(
            145deg,
            #9b7bea,
            #6750a4
        ) !important;
}

.np4-right-discover>a:nth-of-type(1)>b{
    color:#6e9af8 !important;
}

.np4-right-discover>a:nth-of-type(2)>b{
    color:#55cdb9 !important;
}

.np4-right-discover>a:nth-of-type(3)>b{
    color:#ac91ef !important;
}

/* ============================================================
   RIGHT PHOTO
   ============================================================ */

.np4-right-photo{
    position:relative;

    border-color:
        rgba(255,255,255,.10) !important;
}

.np4-right-photo::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    box-shadow:
        inset 0 0 55px rgba(0,0,0,.42);
}

.np4-right-photo>img{
    filter:
        saturate(.88)
        brightness(.78)
        contrast(1.03) !important;
}

.np4-right-photo small{
    color:#f0ae59 !important;
}

/* ============================================================
   RIGHT LOCKED
   ============================================================ */

.np4-right-locked{
    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(56,189,168,.07),
            transparent 40%
        ),
        #101012 !important;
}

.np4-right-locked>span{
    color:#38bda8 !important;

    background:
        rgba(56,189,168,.11) !important;
}

/* ============================================================
   ADD DIFFERENT PANEL TONES
   ============================================================ */

.np4-hero{
    background:#101011 !important;
}

.np4-stories{
    position:relative;
}

.np4-feed-header{
    position:relative;
}

.np4-feed-header::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:44px;
    height:2px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--bd-coral),
            var(--bd-amber)
        );
}

/* ============================================================
   SMALL AMBIENT LIGHTS
   ============================================================ */

.np4-main::before{
    content:"";

    position:absolute;
    pointer-events:none;
}

.np4-post,
.np4-right-discover,
.np4-left-cta,
.np4-locked-feed{
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.np4-post:hover,
.np4-right-discover:hover,
.np4-left-cta:hover{
    border-color:
        rgba(255,255,255,.13) !important;
}

/* ============================================================
   KEEP CORAL AS BRAND
   ============================================================ */

.np4-register,
.np4-left-cta>a,
.np4-locked-feed>a{
    color:#fff !important;
}

/* ============================================================
   LIGHT MODE - STILL TEMPORARY
   ============================================================ */

:root[data-theme="light"] .np4-left-cta,
:root[data-theme="light"] .np4-post,
:root[data-theme="light"] .np4-right-discover,
:root[data-theme="light"] .np4-right-locked{
    background:#fff !important;
}

/* ============================================================
   R3 SIGNATURE
   ============================================================ */

html::before{
    content:"BEDEEL_UI03_R3_PUBLIC";
    display:none;
}