[data-bs-theme=light]{
    --theme-base-rgb: var(--bs-light-rgb);
    --theme-invert-rgb: var(--bs-dark-rgb);
    --theme-alpha: 0.93;
    --theme-panel-bg: rgba(var(--theme-base-rgb),0.55);
    --theme-panel-color: var(--bs-gray-600);
    --theme-panel-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    --theme-form-control-bg:rgba(var(--theme-base-rgb),0.35);
    --theme-card-bg:rgba(var(--bs-secondary-rgb),0.2);
    --theme-bg:var(--bs-gray-900);
    --theme-color:var(--bs-gray-800);
    --theme-color-rgb: 52, 58, 64;

}

[data-bs-theme=dark] {
    --theme-base-rgb: var(--bs-dark-rgb);
    --theme-invert-rgb: var(--bs-light-rgb);
    --theme-alpha: 0.93;
    --theme-panel-bg: rgba(var(--theme-base-rgb),0.75);
    --theme-panel-color: var(--bs-gray-500);
    --theme-panel-shadow: 0 2px 2px rgba(0, 0, 0, .4);
    --theme-form-control-bg:rgba(var(--theme-base-rgb),0.5);
    --theme-card-bg:rgba(var(--bs-secondary-rgb),0.2);
    --theme-bg:var(--bs-gray-900);
    --theme-color:var(--bs-gray-100);
    --theme-color-rgb:var(--bs-light-rgb);
}

:root{
    /*hsl(354, 72%, 43%);*/
    --bs-primary: #bd1f2e; 
    --bs-primary-rgb: 190, 30, 45;
/*  --bs-primary-text-emphasis: hsl(354, 72%, 17%);
    --bs-primary-bg-subtle: hsl(354, 72%, 89%);
    --bs-primary-border-subtle: hsl(354, 72%, 81%);*/
    /*hsl(228, 2%, 51%);*/
    --bs-secondary: #808185; 
    --bs-secondary-rgb: 128, 129, 133;    
    /*--bs-secondary-text-emphasis: hsl(228, 2%, 20%);
    --bs-secondary-bg-subtle: hsl(228, 2%, 89%); 
    --bs-secondary-border-subtle: hsl(228, 2%, 78%);*/

    --bs-font-serif: "EB Garamond",serif; /*graramond monsertat source serif and source sans*/
    --bs-font-sans-serif: "Source Sans 3",sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1.1rem;


    --bs-border-width: 2px;
    --bs-border-color: var(--bs-secondary-border-subtle);
    --bs-border-color-rgb: var(--bs-secondary-rgb);
    --bs-border-color-focus: var(--bs-secondary);
    --bs-border-radius-xxl: 1.5rem;

    --bs-body-bg: var(--theme-bg);
    --bs-body-color: var(--theme-color);
    --bs-body-color-rgb: var(--theme-color-rgb);
    /*
    --bs-emphasis-color: hwb(108 18% 35%);
    --bs-emphasis-color-rgb: 125, 0, 125;
    */
}

html,body,main,section{position:relative;}

#logotipo{width: 250px;filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5)) brightness(1.1);}

@media (prefers-reduced-motion: reduce) {
    .collapsing{transition:height .35s ease}
    .carousel-item {transition: transform 0.6s ease-in-out;}
    .carousel-fade .active.carousel-item-end {transition: opacity 0s 0.6s;}
}


.btn-primary{--bs-btn-color:rgba(255,255,255,var(--bs-text-opacity,1));--bs-btn-bg:rgba(var(--bs-primary-rgb),var(--bs-bg-opacity,.9));--bs-btn-hover-bg:rgba(var(--bs-primary-rgb),.75);--bs-btn-active-bg:rgba(var(--bs-primary-rgb),.55);--bs-btn-border-color:rgba(var(--bs-primary-rgb),var(--bs-border-opacity,.9));--bs-btn-hover-border-color:rgba(var(--bs-primary-rgb),1);--bs-btn-active-border-color:var(--bs-primary);--bs-btn-disabled-bg:var(--bs-primary);--bs-btn-disabled-border-color:var(--bs-primary);--bs-btn-focus-shadow-rgb:var(--bs-primary-rgb)}
.btn-outline-primary{--bs-btn-color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity,1));--bs-btn-border-color:rgba(var(--bs-primary-rgb),var(--bs-border-opacity,.9));--bs-btn-hover-border-color:rgba(var(--bs-primary-rgb),1);--bs-btn-active-border-color:var(--bs-primary);--bs-btn-bg:transparent;--bs-btn-hover-bg:rgba(var(--bs-primary-rgb),.8);--bs-btn-active-bg:rgba(var(--bs-primary-rgb),.55);--bs-btn-disabled-color:var(--bs-primary);--bs-btn-disabled-border-color:var(--bs-primary);--bs-btn-focus-shadow-rgb:var(--bs-primary-rgb)}
.btn-secondary{--bs-btn-color:rgba(255,255,255,var(--bs-text-opacity,1));--bs-btn-bg:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity,.9));--bs-btn-hover-bg:rgba(var(--bs-secondary-rgb),.75);--bs-btn-active-bg:rgba(var(--bs-secondary-rgb),.55);--bs-btn-border-color:rgba(var(--bs-secondary-rgb),var(--bs-border-opacity,.9));--bs-btn-hover-border-color:rgba(var(--bs-secondary-rgb),1);--bs-btn-active-border-color:var(--bs-secondary);--bs-btn-disabled-bg:var(--bs-secondary);--bs-btn-disabled-border-color:var(--bs-secondary);--bs-btn-focus-shadow-rgb:var(--bs-secondary-rgb)}
.btn-outline-secondary{--bs-btn-color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity,1));--bs-btn-border-color:rgba(var(--bs-secondary-rgb),var(--bs-border-opacity,.9));--bs-btn-hover-border-color:rgba(var(--bs-secondary-rgb),1);--bs-btn-active-border-color:var(--bs-secondary);--bs-btn-bg:transparent;--bs-btn-hover-bg:rgba(var(--bs-secondary-rgb),.75);--bs-btn-active-bg:rgba(var(--bs-secondary-rgb),.55);--bs-btn-disabled-color:var(--bs-secondary);--bs-btn-disabled-border-color:var(--bs-secondary);--bs-btn-focus-shadow-rgb:var(--bs-secondary-rgb)}
.btn-custom{--bs-btn-custom:var(--theme-base-rgb);--bs-btn-text:var(--theme-base-rgb);--bs-btn-color:rgba(var(--bs-btn-text),var(--bs-text-opacity,1));--bs-btn-hover-color:var(--bs-btn-text);--bs-btn-active-color:var(--bs-btn-text);--bs-btn-bg:rgba(var(--bs-btn-custom),var(--bs-bg-opacity,.9));--bs-btn-hover-bg:rgba(var(--bs-btn-custom),.75);--bs-btn-active-bg:rgba(var(--bs-btn-custom),.55);--bs-btn-border-color:rgba(var(--bs-btn-custom),var(--bs-border-opacity,.9));--bs-btn-hover-border-color:rgba(var(--bs-btn-custom),1);--bs-btn-active-border-color:rgb(var(--bs-btn-custom));--bs-btn-disabled-color:rgb(var(--bs-btn-custom));--bs-btn-disabled-border-color:rgb(var(--bs-btn-custom));--bs-btn-focus-shadow-rgb:var(--bs-btn-custom)}
.btn-outline-custom{--bs-btn-custom:var(--theme-base-rgb);--bs-btn-text:var(--theme-base-rgb);--bs-btn-color:rgba(var(--bs-btn-text),var(--bs-text-opacity,1));--bs-btn-hover-color:var(--bs-btn-text);--bs-btn-active-color:var(--bs-btn-text);--bs-btn-border-color:rgba(var(--bs-btn-custom),var(--bs-border-opacity,.9));--bs-btn-hover-border-color:rgba(var(--bs-btn-custom),1);--bs-btn-active-border-color:rgb(var(--bs-btn-custom));--bs-btn-bg:transparent;--bs-btn-hover-bg:rgba(var(--bs-btn-custom),.75);--bs-btn-active-bg:rgba(var(--bs-btn-custom),.55);--bs-btn-disabled-color:rgb(var(--bs-btn-custom));--bs-btn-disabled-border-color:rgb(var(--bs-btn-custom));--bs-btn-focus-shadow-rgb:var(--bs-btn-custom)}
.btn-switch {
	font-size: 1rem;
	line-height: 1rem;
	padding: .25rem .25rem;
    --bs-btn-color: var(--bs-navbar-color);
    --bs-btn-hover-color: var(--bs-navbar-hover-color)

}


/*.bg-pattern{background-image:url("/images/pattern.svg");background-size:700px 700px;background-position:center center}*/
.bg-pattern::before{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background-image:url("/images/mask.svg");background-size:700px 700px;background-position:center center;opacity:.5}
.bg-theme{background-color:rgba(var(--theme-base-rgb),var(--bs-bg-opacity))}
.bg-invert{background-color:rgba(var(--theme-invert-rgb),var(--bs-bg-opacity))}
.bg-alpha{--bs-bg-opacity:var(--theme-alpha)}
.bg-blend{mix-blend-mode: var(--blend,multiply);}

.link-theme{
    color: rgba(var(--bs-body-color-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: rgba(var(--bs-body-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: rgba(var(--bs-body-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.text-theme {color: rgba(var(--theme-base-rgb), var(--bs-text-opacity, 1)) !important;}
.text-invert{color: rgba(var(--theme-invert-rgb), var(--bs-text-opacity, 1)) !important;}
.text-justify{text-align:justify;text-justify:inter-word}

/*forms*/
.form-icon:before{position:absolute;top:50%;margin-top:-.5rem;right:1rem;z-index:1}
.form-control {
    --bs-border-color:transparent;
    --bs-border-color-focus:transparent;
    color: var(--bs-light);
    background-color: var(--theme-form-control-bg);
    --bs-border-radius:var(--bs-border-radius-lg);
}
.form-select:focus,.form-control:focus{
    box-shadow:none;
    border-color:var(--bs-border-color-focus);
    background-color: var(--theme-form-control-bg);
    color: var(--bs-light);
}


.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label{
    color: rgba(var(--bs-light-rgb), .60);
}
/*sacar el fondo al label bs5.3*/
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    display: none;
}

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus,
.form-control.is-valid:focus, .was-validated .form-control:valid:focus{
    box-shadow:none;
}

.form-control.is-valid, .was-validated .form-control:valid,
.form-control.is-invalid, .was-validated .form-control:invalid{
    background-image: none;
}


/*iguala un campo comun por mas que este disabled bs5.3*/
.form-floating>.ng-blank:disabled~label, .form-floating>:disabled~label {color:rgba(var(--bs-body-color-rgb),.65)}

/*carousel*/
.carousel-caption{padding:0;bottom:3rem;left:10%;right:10%;}
.carousel-indicators  {list-style-type:none;}
.carousel-indicators li{background-color:rgb(var(--theme-base-rgb))!important;height:.5rem!important;width:.5rem!important;border-radius:50%;opacity:.5;cursor:pointer}
.carousel-indicators li:hover,.carousel-indicators li.active{opacity:.8}
.carousel-control-next,.carousel-control-prev{width:3rem}
/*parche para el salto de aniamacion*/
.carousel-fade{--carousel-transition-duration:.4s}	
.carousel-fade .active.carousel-item-start,.carousel-fade .active.carousel-item-end{transition: opacity 0.3s 0.1s;}
.carousel-none .carousel-item{transition:none;animation: none;transform: none;}
/*.carousel-none .active.carousel-item-start,.carousel-none .active.carousel-item-end{transition-delay:0s;}*/




/*slides*/
.slide{
    
    --height:560px;
    --transition: all 0.6s ease 0.1s;
}
.slide .layer{position:absolute;top:0;left:0;width:100%;height:100%;}
@media (min-width: 768px) { 
    .layer-md {position:absolute;top:0;left:0;width:100%;height:100%;}
}
@media (min-width: 992px) { 
    .layer-lg {position:absolute;top:0;left:0;width:100%;height:100%;}
}

.slide .image {
	height: var(--height);
	width: 100%;
	background-position: center center;
	background-size: cover;
    background-image: var(--image,none);
}
.slide .media{
    width: 100%;
    height: var(--height);
}
.slide .media video{
    width: 100%;
    height: calc(var(--height) + 0px);
    object-fit: cover;
}
/*
@media (min-width:1200px){.slide .media video{height:calc(var(--height) + 30px)}}
@media (min-width:1400px){.slide .media video{height:calc(var(--height) + 90px)}}
*/


.slide .over .image {
    background-color: rgba(0,0,0,0.3); background-blend-mode: multiply; 
}
.slide .over:hover .image {
    background-color: rgba(0, 0, 0, 0.15) !important;
}




/*effects*/
.slide .mask {
    mask-image: url("/images/mask.svg");
    mask-size: 700px 700px;
    mask-position: center center;
    transition: var(--transition);
}
.slide .pattern{
    mask-image: url("/images/mask-inverter.svg");
    mask-size: 700px 700px;
    mask-position: center center;
    background-color: rgb(var(--bg-color-rgb,var(--theme-base-rgb)));
    opacity: var(--bs-bg-opacity,1);
    transition: var(--transition);
}

/*mezlca una copia de la imagen con mask*/
.slide .image-add::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    transition: var(--transition);
    opacity: var(--bs-bg-opacity,1);
    background-position: center center;
    background-size: cover;
    background-image: var(--image);
    z-index: 1;
}

/*mezcla con un color de fondo agregado */
.slide .pattern-add::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    transition: var(--transition);
    opacity: var(--bs-bg-opacity,1);
    mask-image: url("/images/mask-inverter.svg");
    mask-size: 700px 700px;
    mask-position: center center;
    background-color: rgb(var(--bg-color-rgb,var(--theme-base-rgb)));
    z-index: 1;
    mix-blend-mode: var(--blend,normal);
}
 
/*trasnsitions*/
.slide .animate.fade-to{--from:0;--to:.5;visibility:hidden;opacity:var(--f,var(--from))}
.slide .active .animate.fade-to,.slide .active.animate.fade-to{opacity:var(--t,var(--to));visibility:visible;animation:none}

.slide .over-fade{cursor: pointer;transition: var(--transition);}
.slide .over-fade:hover{opacity:var(--over,0) !important}

/*trasnsitions add*/
.slide .animate.fade-add{--from:0;--to:0.5}
.slide .animate.fade-add.image-add{--f:calc(1 - var(--from));--t:calc(1 - var(--to))}
.slide .animate.fade-add::before{opacity:var(--f,var(--from))}
.slide .active .animate.fade-add::before,.slide .active.animate.fade-add::before{opacity:var(--t,var(--to))}

.slide .animate.zoom-add::before{opacity: var(--from,--bs-bg-opacity); transform: translate(1.2);}
.slide .active .animate.zoom-add::before{opacity: var(--to,--bs-bg-opacity); transform: scale(1);}
.slide .animate.left-add::before{opacity: var(--from,--bs-bg-opacity); mask-position:100% center;}
.slide .active .animate.left-add::before{opacity: var(--to,--bs-bg-opacity); mask-position:center center;}

.slide .over-add{cursor: pointer;transition: var(--transition);}
.slide .over-add.image-add{--o:calc(1 - var(--over,0));} /*se pone apuesto porque es invertido*/
.slide .over-add:hover::before{opacity:var(--o,var(--over,0)) !important}

/*animations*/
/*las animaciones se pueden iniciar al cargar la pagina, las transiciones solo ante cambiso de estado*/
.slide .init{animation:init 1s ease-in .5s forwards;animation-iteration-count:1}@keyframes init{0%{opacity:0;}100%{opacity:1}}

/*mask*/ /*pueden producir doble animacion separada de la imagen*/
.slide .animate.top-mask{opacity: var(--from,--bs-bg-opacity); mask-position:center -150%;}
.slide .active .animate.top-mask{opacity: var(--to,--bs-bg-opacity); mask-position:center center;}
.slide .animate.left-mask{opacity: var(--from,--bs-bg-opacity); mask-position:100% center;}
.slide .active .animate.left-mask{opacity: var(--to,--bs-bg-opacity); mask-position:center center;}
.slide .animate.zoom-mask{opacity: var(--from,--bs-bg-opacity); mask-size: 900px 900px;}
.slide .active .animate.zoom-mask{opacity: var(--to,--bs-bg-opacity); mask-size: 700px 700px;}

/**cards**/
.cards .card{
    background-color: var(--theme-card-bg) !important;
    border: 0;
    overflow: hidden;
    border-radius: var(--bs-border-radius-xxl);
}
.cards .btn-switch .icon-up:before{transition:.2s ease-in-out}
.cards .btn-switch.collapsed .icon-up:before{transform:rotate(-180deg)}

.cards .card-image {
    position: relative;
    height: 300px;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s ease;
    cursor: pointer;
}
.cards .card-wrapper {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
}
.cards .card-over:hover .card-image {
    transform: scale(1.2); /* Escala al hacer hover */
}

.cards .card-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--bg-color-rgb,var(--theme-base-rgb)),0.3);
    mix-blend-mode:overlay;
    transition: background-color 0.5s ease;
    z-index: 1;
}

.cards .card-over:hover .card-image::before {
    background-color: rgba(var(--bg-color-rgb,var(--theme-base-rgb)),0.1);
}



/*NAV*/
#navigation .navbar-brand {
    padding: 0;
    margin: 10px 0px;
    transition: all 0.5s ease 0s;
    width: 200px;
    height: 40px;
    background-image: url(/images/logo.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;

}
#navigation.reduce .navbar-brand {
    width: 150px;
    height: 30px;
    margin: 7px 0px;
}
#navigation .navbar {
    background-color: transparent;
    transition: all 0.5s ease 0s;
    --bs-navbar-color: var(--theme-panel-color);
    /*--bs-navbar-hover-color: var(--theme-panel-color);*/
    --bs-navbar-active-color: var(--bs-primary);  
    /*--bs-navbar-nav-link-padding-x: 0.5rem;*/
}
#navigation.sticky .navbar {
    background-color: rgba(var(--theme-base-rgb), 1);
    transition: all 0.5s ease 0s;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}
#navigation.reduce .navbar {
    background-color: rgba(var(--theme-base-rgb), 0.95)
}

#navigation .navbar-nav{
    background-color: var(--theme-panel-bg);
    box-shadow: var(--theme-panel-shadow);
    transition: background 0.5s ease 0s;
    border-top: 4px solid transparent;
    /*text-transform: uppercase;*/
    --bs-nav-underline-gap:0rem;
    --bs-nav-underline-border-width: 3px;
    --bs-nav-link-padding-y: 0.5rem; 
    --bs-nav-link-padding-x: 0rem; 
}
@media (max-width: 768px) { 
    #navigation .navbar{
        background-color: rgba(var(--theme-base-rgb),1);
        box-shadow: var(--theme-panel-shadow);
        
    }
    #navigation .navbar-nav{
        box-shadow: none;
        background-color: transparent;    
    }
}
#navigation.sticky .navbar-nav{box-shadow:none;background-color:transparent}
#navigation .navbar-nav .nav-link:not(.active):focus{ border-bottom-color: transparent; color: var(--bs-navbar-color);}
#navigation #switch-menu span:before{content:'\e800'}
#navigation #switch-menu.collapsed span:before{content:'\f0c9'}
#navigation .btn-switch {
    --bs-btn-color: var(--bs-navbar-color);
    --bs-btn-hover-color: var(--bs-navbar-hover-color)

}
/*PRELOADER*/
#preloader{background-color:var(--bs-dark);position:fixed;display:block;left:0;bottom:0;right:0;top:0;margin: 0;z-index:9997}
#preloader::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(var(--theme-base-rgb),var(--theme-alpha));z-index:9998}
#preloader.hide{opacity:0;visibility:hidden;}
#preloader .center{left:50%;top:50%;position:absolute;text-align:center;z-index: 9999;}
#preloader .spinner{margin-top:-24px;margin-left:-24px;position:relative;width:48px;height:48px;background:var(--bs-primary);transform:rotateX(65deg) rotate(45deg);color:rgba(var(--bs-primary-rgb),.5);animation:layers1 1s linear infinite alternate}
@keyframes layers1{0%{box-shadow:0 0 0 0}90%,100%{box-shadow:15px 15px 0 0}}
