@import url(https://db.onlinewebfonts.com/c/e0c19db670e1b9ed25b23945f1b548dd?family=Usual);
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/*
Bienvenido a Pitágoras Cloud
Proyecto: SATECHI V26R7
Fecha: 03/04/2025

*/

:root {    
    --dealblue : #30456c;   
    --dealblue20 : #22314c;   
    --white: #ffffff;
 
}

/*******************************/
/*******************************/
/* FUENTES IMPORTADAS  */
/*******************************/
/*******************************/


.usualfont {
    font-family: "Usual"; /*Usada en el menu de navegación, y en el body */
}

.urbanistfont { 
    font-family: "Urbanist", sans-serif; /*Usada en los títulos de Productos */
}

.jakartafont {
    font-family: "Plus Jakarta Sans", sans-serif; /*Usada en Selectores de Opciones y */
    font-optical-sizing: auto;    
    font-style: normal;
}

.textshadow {
  text-shadow: 1px 1px 2px #000000;
}

/*******************************/
/*******************************/
/* BODY  */
/*******************************/
/*******************************/


body {
    font-family: "Usual" !important; /*Usada en el menu de navegación, y en el body */
    font-size: 0.9rem;
    font-weight: normal;
    
}

/*******************************/
/*******************************/
/*TIPOGRAFIA H1-H4  */
/*******************************/
/*******************************/





/*******************************/
/*******************************/
/*HEADER & LOGO   */
/*******************************/
/*******************************/

/*Envolvente Principal*/
/*----------------------------------*/
#sp-header {
  height: 70px !important;    
  padding: 0 !important; 
  margin: 0 !important;
  background: transparent !important;
  z-index: 9999;
  position: relative;
  top: 54px;
}
/*Componente Top (Ticker y Slider) */
/*----------------------------------*/
#sp-topcomponent {
  z-index: 10;
  position: relative;
  top: 0;
  margin-top: -70px;
}
/*Header Sticky*/
/*----------------------------------*/
#sp-header.header-sticky {
    position: fixed;
    z-index: 9999;
    top: 20px;
    left: 0;
    width: 100%;
    animation: spFadeInDown .8s !important;
}

/*Contenedor del Header*/
/*----------------------------------*/
#sp-header .container {
  display: flex;  
  display: -webkit-flex; /* Safari */     
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap; /* Safari */    
  -moz-flex-flow: row wrap; 
  -o-flex-flow: row wrap; /* Safari */
  margin: 0px auto !important;
  max-width: 1300px !important;
  padding: 0px;       
  background:transparent;
  width: 96%;
  box-shadow: 0 3px 3px rgba(0,0,0,0.05);
  background: var(--white);
  border-radius: 15px;  
  height: 70px !important;
}

/*Clases Hijas del Header Container*/
/*----------------------------------*/
#sp-logo {width: 25% !important; margin: 0 !important; padding: 0 !important;}
#sp-menu {width: 50% !important; margin: 0 !important; padding: 0 !important;}
#sp-usermenu {width: 25% !important; margin: 0 !important; padding: 0 !important;}


/*Geometría del Logo*/
/*----------------------------------*/
#sp-logo .logo, #sp-logo .logo a {
  width: 100% !important;
  text-align: left !important;
  height: 70px !important;
}
#sp-logo .logo a {
  padding-left: 25px;
}

#sp-logo img {
  height: 50px !important;
  width: auto !important;
  margin: 10px auto ;
  line-height: 70px !important;
}

/*******************************/
/*******************************/
/*MENU & OFFCANVAS   */
/*******************************/
/*******************************/

/*Menu y Megamenu */
/*----------------------------------*/
.sp-megamenu-parent > li > a {
  text-transform: uppercase !important;
  font-size: 1rem !important;
  font-family: "Usual" !important; /*Usada en el menu de navegación, y en el body */
  font-weight: 700;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 70px !important;
}
ul.sp-megamenu-parent {
    margin: 0 auto !important;
}

/*Off Canvas Menu*/
/*----------------------------------*/    
#offcanvas-toggler {
    display: inline-flex;
    align-items: center;
    height: 70px !important;
    line-height: 70px !important;
    font-size: 20px;
    float: right;
    margin-left: 10px !important; 
    margin-right: 10% !important;
}
.offcanvas-inner .menu-child li {
  margin: 10px auto !important;  
}
.offcanvas-inner .menu-child li a {  
  font-size: 120% !important;
}

.offcanvas-menu {
  background: #ffffff;
}

.offcanvas-inner .offcanvaslogo img {
  height: 50px !important;
  width: auto !important;
  margin: 0 auto;
}

/*User Menu*/
/*----------------------------------*/    
.topUsermenu, .topUsermenu .sp-module-content, 
.topUsermenu .mod-custom {
  display: inline-flex !important;
}
.topUsermenu {
  height: 70px;
  padding-top: 24px;
}



/*******************************/
/*******************************/
/*TICKER & TOPBAR  */
/*******************************/
/*******************************/

/*Top Ticker Bar*/
.toptickerbar {
  height: 36px !important;
  overflow: hidden !important;
}

.toptickerbar .usualfont {
  font-family: "Usual"; /*Usada en el menu de navegación, y en el body */ 
}

/*Posicionamiento relativo del header ticker y header slider*/
#sp-topcomponent {

}
/*----------------------------------*/    


/*******************************/
/*******************************/
/*BREADCRUMB  */
/*******************************/
/*******************************/

ol.mod-breadcrumbs.breadcrumb {
  max-width: 1200px;
  margin: 0 auto !important;
  background: transparent !important;
}

.mod-breadcrumbs__wrapper {
  margin: 0 !important;
}
/*******************************/
/*******************************/
/******PAGINA LOGIN  ******/
/*******************************/
/*******************************/

.pitagorasLogin .sclogin-joomla-login.vertical {
  margin: 80px auto 150px !important;
  padding: 40px !important;
  max-width: 400px !important;
  background: var(--white);
  border-radius: 10px !important;
}

@media (max-width: 767px) {
  .pitagorasLogin .sclogin-joomla-login.vertical {
    margin: 0px auto 80px !important;
  }
}

.sclogin-joomla-login .sclogin-passkey-button, 
.sclogin-joomla-login .input-group-text.btn,
.sp-pagebuilder-page-edit {
  display: none !important;
  opacity: 0 !important;
  width: 0px !important;
  height: 0px !important;
}
/*******************************/
/*SCLOGIN MODO MODAL*/
/*******************************/
.sclogin-modal .modal-lg {
    max-width: 400px;
    margin-top: 4rem !important;
}
/*******************************/
/*SCLOGIN LOGOUT DESIGN*/
/*******************************/
#sp-top2 .sp-module {
  
}
.sclogin.sourcecoast {
  display: flex;  
    display: -webkit-flex; /* Safari */     
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap; /* Safari */    
    -moz-flex-flow: row wrap; 
    -o-flex-flow: row wrap; /* Safari */
    margin: 0px auto !important;
    padding: 0px;       
    background:transparent;
    width: 100%;
}
.sclogin-greeting {
  margin-right:10px;
}



.alert-success {  
  display: none !important;
  height: 0 !important;

}

/*******************************/
/*******************************/
/*MEGA MENU  */
/*******************************/
/*******************************/

/*Configuración de todos los Dropdown Megamenus*/

.sp-dropdown.sp-dropdown-main {
  position: absolute !important;  
  animation: spFadeInDown .4s !important;
}
/*1. - Megamenushop*/
.megamenushop .sp-dropdown.sp-dropdown-main {  
  left: -460% !important; 
}
/*2. - Megamenublog*/
.megamenublog .sp-dropdown.sp-dropdown-main {  
  left: -570% !important;  
}



/*Wrapper*/
.megamenu-wrapper iframe, .megamenu-wrapper iframe body {
  border-radius: 1rem !important;
}

.sp-dropdown-inner {
  background: transparent !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
}


/*Links de menus */
.sp-dropdown-inner a {
  color: #fff !important;
}

.separator {
  font-weight: 500 !important;
  font-size: 0.86rem !important;
  color: #fff;
  padding-bottom: 6px !important;
  border-bottom: #cece solid 1px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
.separator img { 
  display: inline !important;
  max-width: 40px;
  margin-right: 5px;
}

ul.sp-dropdown-items {
  margin-top: 14px !important;
}

.iconmenu img {
  max-width: 22px;
  margin-right: 7px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
  padding: 3px 0 !important;
}


.sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
    font-size: 0.9rem;
    line-height: 1;
    display: inline-block;
    padding: 7px 0;
    cursor: pointer;
}

/*******************************/
/*******************************/
/*PAGE TITLE  */
/*******************************/
/*******************************/
/*BACKGROUND: Blue Stripe*/
.blueStripe .sp-page-title, .blueStripe #sp-top-bar,
.blueStripe #pitagorasChannelMap {  
  background: radial-gradient(100% 225% at 100% 0%, #FF0000 0%, #000000 100%), linear-gradient(236deg, #00C2FF 0%, #000000 100%), linear-gradient(135deg, #CDFFEB 0%, #CDFFEB 36%, #009F9D 36%, #009F9D 60%, #07456F 60%, #07456F 67%, #0F0A3C 67%, #0F0A3C 100%) !important;
  background-blend-mode: overlay, hard-light, normal !important;
}

/*BACKGROUND: Descend Sun*/
.DescendSun .sp-page-title, .DescendSun #sp-top-bar,
.DescendSun #pitagorasChannelMap {  
  background: linear-gradient(121.28deg, #31BC00 0%, #000000 100%), linear-gradient(180deg, #5200FF 0%, #1A0050 100%), linear-gradient(341.1deg, #FF0000 7.52%, #1700A4 77.98%), radial-gradient(49.82% 80.51% at 49.82% 50%, #5A0069 0%, #FF3D00 100%), radial-gradient(50% 72.12% at 50% 50%, #EB00FF 0%, #110055 100%);
  background-blend-mode: color-dodge, overlay, difference, difference, normal;
}
/*BACKGROUND: Coffee Script*/
.Coffeescript .sp-page-title, .Coffeescript #sp-top-bar,
.Coffeescript #pitagorasChannelMap {  
  background: linear-gradient(60deg, #2B2E4A 0%, #2B2E4A 30%, #E84545 calc(30% + 1px), #E84545 60%, #903749 calc(60% + 1px), #903749 70%, #53354A calc(70% + 1px), #53354A 100%);
}

/*BACKGROUND: Warm Welcome*/
.WarmWelcome .sp-page-title, .WarmWelcome #sp-top-bar,
.WarmWelcome #pitagorasChannelMap {  
  background: linear-gradient(245deg, #000000 0%, #FDFF96 100%), linear-gradient(245deg, #0038FF 0%, #000000 100%), radial-gradient(100% 225% at 100% 0%, #4200FF 0%, #001169 100%), linear-gradient(245deg, #000000 0%, #FFB800 100%), radial-gradient(115% 107% at 40% 100%, #EAF5FF 0%, #EAF5FF 40%, #A9C6DE calc(40% + 1px), #A9C6DE 70%, #247E6C calc(70% + 2px), #247E6C 85%, #E4C666 calc(85% + 2px), #E4C666 100%), linear-gradient(65deg, #083836 0%, #083836 40%, #66D37E calc(40% + 1px), #66D37E 60%, #C6E872 calc(60% + 1px), #C6E872 100%);
  background-blend-mode: overlay, screen, overlay, hard-light, overlay, normal;
}

/*BACKGROUND: Crossroads*/
.Crossroads .sp-page-title, .Crossroads #sp-top-bar,
.Crossroads #pitagorasChannelMap {    
  background: linear-gradient(130deg, #ad90c1 0%, rgb(3, 0, 84) 100%), linear-gradient(130deg, #09007b 0%, rgba(15, 0, 66, 0) 30%), linear-gradient(129.96deg, rgb(255, 47, 47) 10.43%, rgb(0, 4, 96) 92.78%), radial-gradient(100% 246.94% at 100% 0%, rgb(255, 255, 255) 0%, rgba(37, 0, 66, 0.8) 100%), linear-gradient(121.18deg, rgb(20, 0, 255) 0.45%, rgb(27, 0, 62) 100%), linear-gradient(154.03deg, rgb(206, 0, 0) 0%, rgb(255, 0, 61) 74.04%), linear-gradient(341.1deg, rgb(178, 91, 186) 7.52%, rgb(16, 0, 119) 77.98%), linear-gradient(222.34deg, rgb(169, 0, 0) 12.99%, rgb(0, 255, 224) 87.21%), linear-gradient(150.76deg, rgb(183, 213, 0) 15.35%, rgb(34, 0, 170) 89.57%);
  background-blend-mode: overlay, normal, overlay, color-burn, screen, overlay, difference, difference, normal;
}

/*BACKGROUND: ObedientShade*/
.ObedientShade .sp-page-title, .ObedientShade #sp-top-bar,
.ObedientShade #pitagorasChannelMap {    
  background: linear-gradient(125deg, #00FF57 0%, #010033 40%, #460043 70%, #F0FFC5 100%), linear-gradient(55deg, #0014C9 0%, #410060 100%), linear-gradient(300deg, #FFC700 0%, #001AFF 100%), radial-gradient(135% 215% at 115% 40%, #393939 0%, #393939 40%, #849561 calc(40% + 1px), #849561 60%, #EED690 calc(60% + 1px), #EED690 80%, #ECEFD8 calc(80% + 1px), #ECEFD8 100%), linear-gradient(125deg, #282D4F 0%, #282D4F 40%, #23103A calc(40% + 1px), #23103A 70%, #A0204C calc(70% + 1px), #A0204C 88%, #FF6C00 calc(88% + 1px), #FF6C00 100%);
  background-blend-mode: overlay, screen, overlay, overlay, normal;  
}

.sp-page-title .sp-page-title-heading {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    font-family: "Inter" !important;
}

.sp-page-title .sp-page-title-sub-heading {
    font-size: 0.92rem !important;
    font-weight: 400 !important;    
    margin-top: 15px !important;
    line-height: 1.5 !important;
    color: #dfdfdf !important;
    font-family: "Inter" !important;
}

.sp-page-title {
    padding: 40px 0 !important; 
}





