/*
*
*  * EENDA
*  * Marketing, Desarrollo & Consulting
*  * www.eenda.com
*  * © 2025
*
*/

:root{

	--header-height:80px;

	/* Colores */
	--color-primary:rgba(10, 57, 248, 1);
	--color-primary-light:rgba(10, 57, 248, .15);
	--color-secondary:rgba(11, 38, 33, 1);
	--color-secondary-light:rgba(11, 38, 33, .15);
	--color-tertiary:rgba(248, 203, 116, 1);
	--color-tertiary-light:rgba(248, 203, 116, .15);
	--color-light: rgba(255, 255, 255, 1);
	--color-light-opacity: rgba(255, 255, 255, .25);
	--color-gray: rgba(246, 246, 246, 1);
	--color-darkgray: rgba(144, 144, 144, 1);
	--color-black: rgba(0, 0, 0, 1);
	--color-black-light: rgba(125, 125, 125, 1);
	--color-black-opacity: rgba(0, 0, 0, .075);

	/* Tipografías y tamaños */
	--font-primary: 'Inter', sans-serif;
	--font-size-base:106.25%;

	/* Radio del borde */
	--border-radius-defalt:50px;
	--border-radius-lg:40px;
	--border-radius-md:20px;
	--border-radius-sm:10px;
	--border-radius-xs:5px;

	--shadow-default:0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	--shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);
	--shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

	/* Tamaño general de iconos */
	--size-icon-default: 22px;
	--size-icon-lg: 48px;
	--size-icon-md: 36px;
	--size-icon-sm: 28px;
	--size-icon-xs: 16px;

    /* Tamaño sidebars */
    --sidebar-collapsed: 0;
    --sidebar-expanded: 280px;
}

html {
	scroll-padding-top: var(--header-height);
	scroll-behavior: smooth; /* opcional, para scroll suave */
}

html, body{
	font-weight:300;
	font-size:var(--font-size-base);
	font-family:var(--font-primary);
	color:var(--color-secondary);
}

/* Custom Bootstraps */
.btn-primary{
    background:var(--color-primary);
    border-color:var(--color-primary);
}

.cta{
    .btn-primary{
        display:inline-flex;
        align-items: center;
        padding:.2rem 1.5rem .2rem .2rem;
        font-weight:500;
        text-transform: uppercase;
        border:0;
        transition:all .3s;

        &:hover{
            background:var(--color-tertiary);
            color:var(--color-black);

            .icon{
                background:var(--color-black);
                color:var(--color-light);

                svg{
                    fill: var(--color-light);
                }
            }
        }

        .icon{
            display:inline-flex;
            margin-right:1rem;
            width:36px; height:36px;
            align-items: center;
            justify-content: center;
            background:var(--color-light);
            color:var(--color-primary);
            border-radius:50%;
            transition:all .3s;

            svg{
                max-height:20px;
                max-width:18px;
                fill: var(--color-primary);
            }
        }
    }
}

.cta-mobile{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position:fixed;
    bottom:30px; right:30px;
    z-index: 9999;
    width:auto;
    padding:0;
    border:1px solid var(--color-light-opacity);
    border-top-left-radius: var(--border-radius-defalt) !important;
    border-bottom-left-radius: var(--border-radius-defalt) !important;

    [class^='cta']{
        &:first-child{
            a{
                border-top-left-radius: var(--border-radius-defalt) !important;
                border-bottom-left-radius: var(--border-radius-defalt) !important;
            }
        }

        &.go-to-top{
            display:none;

            &.is_visible{
                display:block;
            }
        }

        a{
            padding:.75rem 2rem;
            display:block;
            text-decoration: none;
            transition:all .3s ease-in;
            background:var(--color-primary);

            i{
                transition:all .3s ease-in;
            }

            &:hover i{
                color:var(--color-light);
            }
        }
    }
}


header{
    position:sticky;
    top:0;
    z-index:1999;

    &.compact{
        box-shadow: 0 2px 5px rgba(0, 0, 0, .1);

        .header-top-bar{
		    background:var(--color-light);

            h1{
                font-size:80%;
            }

            .nav-link{
                font-size:80%;

                svg{
                    width:var(--size-icon-default-xs) !important;
                    height:var(--size-icon-default-xs) !important;
                }
            }
        }

        .header{
            .logo{
                max-width: 140px;
                max-height: 50px;
            }

            .navbar{
                padding:.5rem 0;

                #navbar-main{
                    
                    .nav-item{
                        
                        .nav-link{
                            font-size:90%;
                        }
                    }
                }
            }
        }
    }

	.header-top-bar{
		background:var(--color-light);

		*{
			color:var(--color-dark);
            transition:all .3s;
		}

		h1{
			margin:0;
			padding:0;
			font-weight:400;
			font-size:1rem;
			color:var(--color-dark);
		}

		.nav:not(.nav-social) .nav-item{
			display:flex;
			align-items: center;
			padding:.75rem 0;

			+ .nav-item::before{
				float: left;
				margin-left:1rem;
				padding: 0 .5rem;
				width:1px; height:15px;
				border-left:1px dashed var(--color-black-light);
				content: ""
			}

			.nav-link{
				padding:0;
				font-weight:400;
			}
		}

		.nav-social{
			.nav-link{
                i{
                    font-size:150%;
                }
			}
		}
	}

	.header{
		background:var(--color-primary);

        *{
            transition:all .3s;
        }

		.logo{
			max-width:280px;
			max-height:100px;
            transition:all .3s;
		}

		.navbar{
			padding:1rem 0;

			#navbar-main{
				
				.nav-item{
					margin:0 .5rem;
					padding:0;

					.nav-link{
						padding:.25rem 1.25rem;
						font-weight:400;
						border-radius:var(--border-radius-defalt);
						color:var(--color-light);
						transition:all .4s;

						&:hover,
						&.show{
							background:var(--color-light-opacity);
							color:var(--color-light);
						}
						
						&.active{
							font-weight:700;
							color:var(--color-primary);
						}

						&.active::after{
							display: block;
							content: "";
							width: 100%;
						}

						&.nav-link-featured{
							background:var(--color-light);
							color:var(--color-black);
							border-radius: var(--border-radius-defalt);
							transition:all .3s;
						}
					}
				}
			}
		}
	}
}

.sidebar-container{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--sidebar-expanded);
    transform: translateX(-100%);
    overflow:hidden;
    background: var(--color-tertiary);
    z-index: 2000;
    pointer-events: none;
    transition: all .2s ease-in;

    .sidebar-panel{
        position: relative;
        width: var(--sidebar-expanded);
        height: 100%;
        padding: 1.25rem;
        overflow-y: auto;

        .navbar-nav{
            list-style: none;
            margin:0;
            padding:0;

            .nav-item{
                padding:0;
                margin-bottom:.25rem;
                transition: background .3s;

                .nav-link{
                    padding:.25rem .5rem;
                    color:var(--color-black);
                    text-decoration: none;

                    &:hover,
                    &.show{
                        background: var(--color-light-opacity);
                        color:var(--color-primary);
                    }
                }

                .dropdown-menu{
                    margin:0;
                    padding:0;
                    background:var(--color-black-opacity);
                    border:0;
                    border-radius:0;
                }
            }
        }
    }

    &.is-open{
        transform: translateX(0);
        pointer-events: auto;

        .sidebar-panel{
            transform: translateX(0);
        }
    }
}

/* Backdrop separado (tu clase) */
.sidebar-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    z-index: 1049;
    transition: opacity .2s ease;

    &.is_visible{
        pointer-events: auto;
    }
}

main{

    .hero{
        padding:3rem 0 0 0;

        h2{
            margin:0 0 2rem 0;
            font-weight:700;
            font-size:2.5rem;
            line-height: 120%;
        }

        p{
            margin:0 0 2rem 0;
            line-height: 150%;
        }
    }

    .main{
        padding:5rem 0;

        &:nth-of-type(even){
            background:var(--color-gray);
        }

        &:nth-of-type(odd){
            background:var(--color-light);
        }

        .card-group{
            margin-right:-1.5rem;
            margin-left:-1.5rem;
            
            .card{
                padding-right:1.5rem;
                padding-left:1.5rem;
                background:none;
                border:0;
                border-right:1px dashed var(--color-black);
                border-radius:0;
                text-align: center;
                transition:all .4s;

                &:last-child{
                    border-right:0;
                }

                .card-content{
                    border-radius:var(--border-radius-md);
                    transition:all .4s;
                }

                &:hover{
                    .card-content{
                        background:var(--color-light);
                    }

                    .card-title{
                        color:var(--color-primary) !important;
                    }

                    .card-icon{

                       i{
                            transform: translateY(-.5rem);
                            color:var(--color-primary);
                        }
                    }
                }

                .card-icon{
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    padding:0;
                    margin:1rem auto;
                    width:72px; height:72px;
                    text-align: center;

                    svg{
                        margin:auto;
                        max-width:100%;
                        max-height:100%;
                        transition:all .3s ease-in;
                    }

                    & *{
                        transition: all 0.3s ease;
                    }
                }

                .card-body{
                    padding-top:0;
                    background:none;
                    border:0;
                    border-radius:0;
                    color:var(--color-black-light);

                    & *{
                        transition: all 0.3s ease;
                    }

                    .card-title{
                        margin-top:1rem;
                        font-weight:400;
                        font-size:1rem;
                        color:var(--color-black);
                    }
                }
            }
        }

        .main-title{
            margin:0 0 .25rem 0;
            font-weight:700;
            font-size:.85rem;
            color:var(--color-primary);
            text-transform: uppercase;

            a{
                color:inherit;
                text-decoration:inherit;
            }
        }

        .main-subtitle{
            margin:0 0 5rem 0;
            font-weight:700;
            font-size:2rem;
            color:var(--color-black);
        }

        .card-default{
            border:1px solid var(--color-gray);
            border-radius:var(--border-radius-sm);

            .card-icon{
                display:flex;
                align-items:center;
                justify-content:center;
                padding:1rem;
                margin:auto;
                width:96px; height:96px;
                text-align: center;
                border-bottom-right-radius:var(--border-radius-sm);
                border-bottom-left-radius:var(--border-radius-sm);
                transition:all .3s ease-in;

                svg{
                    margin:auto;
                    max-width:100%;
                    max-height:100%;
                    transition:all .3s ease-in;
                }
            }

            .card-img-overlay{
                
                span{
                    display:inline-block;
                    padding:.1rem .5rem;
                    opacity:.75;
                    background:var(--color-black);
                    font-weight:600;
                    font-size:.85rem;
                    color:var(--color-light);
                    border-radius:var(--border-radius-xs);
                }
            }

            .card-body{
                padding:0 2rem 1rem 2rem;

                .card-title{
                    margin-top:2rem;
                    font-weight:600;
                }
            }

            .card-footer{
                padding:.75rem 2rem;
                background:inherit;
                border:0;
                border-bottom:8px solid transparent;
                transition:all .3s ease-in;

                a{
                    font-weight:600;
                    color:var(--color-primary);
                    text-decoration: none;
                }
            }

            &:hover{
                .card-icon{
                    background:var(--color-primary);
                    fill:var(--color-light);
                }

                .card-footer{
                    border-bottom: 8px solid var(--color-primary);
                }
            }
        }

        .list-group{
            margin:0;
            padding:0;
            border:0;
            border-radius:0;

            .list-group-item{
                padding:.5rem 0;
                margin-bottom:0;
                background:none;
                border:0;
                font-weight:700;
                font-size:1.15rem;

                &::before{
                    position:relative;
		            top:2.5px;
                    content:"\f058";
                    margin-right:.5rem;
                    font-family: 'Line Awesome Free';
                    font-size:1.5rem;
                    color:var(--color-primary);
                }
            }
        }

        &.call-to-action{
            background: var(--color-tertiary);

            .cta{
                .btn-primary{
                    background:var(--color-black);

                    .icon{
                        color:var(--color-black);
                    }

                    &:hover{
                        color:var(--color-light);
                        background:var(--color-primary);

                        .icon{
                            background:var(--color-light);
                            color:var(--color-black);
                        }
                    }
                }
            }

            svg{
                width:100%; height:100%;
            }
        }

        .owl-custom-nav{
            display: flex;
            justify-content: center;
            gap: 20px;

            button{
                display:flex;
                width:60px; height:60px;
                align-items: center;
                justify-content: center;
                border:0;
                background:var(--color-primary);
                border-radius:50%;
                color:var(--color-light);

                &.owl-prev::before{
                    content:"\f060";
                    font-weight:900;
                    font-family: 'Line Awesome Free';
                    font-size:2rem;
                    color:var(--color-light);
                }

                &.owl-next::before{
                    content:"\f061";
                    font-weight:900;
                    font-family: 'Line Awesome Free';
                    font-size:2rem;
                    color:var(--color-light);
                }
            }
        }

        .owl-custom-item{

            .owl-custom-item-image{
                img{
                    border-radius:var(--border-radius-sm);
                }
            }

            .owl-custom-item-content{
                position: absolute;
                bottom: 0;
                left:0;
                padding: 1rem;
                width: 100%;
                background-color: var(--color-black);
                color:var(--color-light);
                transform: translate(0, 170%);
                transition: all 0.5s ease;
                border-bottom-left-radius:var(--border-radius-sm);
                border-bottom-right-radius: var(--border-radius-sm);

                p{
                    margin-bottom:0;
                }
            }

            &:hover{
                .owl-custom-item-content{
                    transform:translate(0, 0);
                }
            }
        }

    }
}

footer{
    padding:1rem 0;
    background:var(--color-primary);
    font-weight:500;
    font-size:.85rem;

    p{
        margin-bottom:0;
        color:var(--color-light);
    }

    .nav{

        .nav-item{
            display: flex;
            align-items: center;
            padding: .75rem 0;

            .nav-link{
                opacity:.5;
                color:var(--color-light);
                transition:all .3s ease-in;

                &:hover{
                    opacity:1;
                }
            }

            & + .nav-item::before{
                float: left;
                margin-left: .5rem;
                padding: 0 .25rem;
                width: 1px;
                height: 15px;
                border-left: 1px dashed var(--color-light);
                opacity:.25;
                content: "";
            }
        }
    }
}