@charset "utf-8";

:root {
    --heading-font-family: "Figtree", sans-serif;
    --font-family:  "Figtree", sans-serif;
    --font-size: 1rem;
	--font-hero: 4.5rem;
    --font-weight: 400;
    --font-style: normal;
	--line-height: 1.6;
	--color-primary: #652d91;
	--color-primary-hover: #8C44C4;	
	--color-primary-dark:#4D1777;
	--color-secondary:#80C423;
	--color-secondary-hover:#649620;	
	--text-footer:#fff;
	--rounded: 8px;
	--soft-bg-blue: aliceblue;
	--soft-bg-grey: #F7F9FA;
	--bg-submenus: #dfe8eb;
	--bg-tables:#e9ecef;
	--bg-footer:#f3f3f3;
	--box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	--bg-hero-page:#f0f5f7;
	--acento1:#E3ECF2;
	--acento2:#F6F1F9;
	--acento3:#F1F5EB;
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Material Icons"), url("../fonts/material-design-icons.woff2") format("woff2");
}

@font-face {
    font-family: "Material Icons Outlined";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Material Icons Outlined"), url("../fonts/material-design-icons-outlined.woff2") format("woff2");
}
/*TRANSICIONES*/
/* Transición customizada para el offcanvas */
.offcanvas-end {
  transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out;
}

.offcanvas.show {
  opacity: 1;
}

.offcanvas {
  opacity: 0;
}

/*UI*/
.wrap-colors{ display: flex; gap:1.5rem; text-align: center}
.color-box{ text-align: center}
.circle-shape{ height: 50px; width: 50px; border-radius: 25px }
.color-primary{ background-color: var(--color-primary)}
.color-primary-hover{ background-color: var(--color-primary-hover)}
.color-secondary{background-color: var(--color-secondary)}
.color-secondary-hover{background-color: var(--color-secondary-hover)}
.color-accent1{ background-color: var(--acento1)!important}
.color-accent2{ background-color: var(--acento2)!important}
.color-accent3{ background-color: var(--acento3)!important}
.container{ max-width: 1440px }
.bg-gradient-blue {background: #E7EFF3;
background: linear-gradient(48deg, rgba(231, 239, 243, 1) 0%, rgba(255, 255, 255, 1) 100%);}
.bg-gradient-grey {background: #f2f2f2;
background: linear-gradient(48deg, rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);}
/*general*/
body {font-family: var(--heading-font-family)!important; font-size: var(--font-size); } 
label{font-weight: 600} 
a { color: var(--color-primary)!important;}
a:link{ text-decoration: none}
.text-bold{font-weight: 700;}
.text-right{text-align: right}
footer{ background-color: var(--bg-footer); padding: 3.1rem 0;}
footer li{list-style: none!important; padding-bottom: .2rem}
footer *{ color: var(--text-footer)!important; font-weight: 600; text-decoration: none!important}
.section{ padding: 3.5rem 0}
.hero-section{ background-color: var(--bg-hero-page)}
.bg-soft2{background-color: var(--soft-bg-grey)}
.bg-submenu{ background: var(--bg-submenus)}
.min-w350p{ min-width: 350px}
.min-w500p{ min-width: 500px}
.no-bg{background: none!important}
.w-auto{width: auto!important;}
.dropdown-menu[data-bs-popper]{right: 0}/* se corrige el ancho del dropdown*/
.text-left{text-align: left!important;}
.card-inline{ display: flex; flex-direction: row!important; align-items: center}
.wrap-paginacion{ display: flex; justify-content: center}
.front-ui .text-bg-primary{ background-color: var(--color-primary)!important}
/*HEADINGS*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-weight: 700!important; font-family: var(--heading-font-family);}
/*buttons*/
.submenu .btn, .nav-link{display: flex!important; flex-direction: row; align-items: center;}
.btn{ font-family: var(--font-family)!important; font-weight: 600!important; padding: 1rem!important }
.btn-primary{ background-color: var(--color-primary)!important; border: none!important; color: #fff!important; border-radius: var(--rounded)!important;}
.btn-primary:hover{background-color: var(--color-primary-hover)!important}
.btn-secondary{border-radius: var(--rounded)!important; background-color: var(--color-secondary)!important; border:none!important; color: #000!important}
.btn-outline-primary{ border: 1px solid var(--color-primary)!important; border-radius: var(--rounded)!important; color: var(--color-primary)}
.btn-outline-primary:hover{background-color: #fff!important; color: var(--color-primary-hover)!important}
.btn.active, .btn.show, .btn:first-child:active{/*background-color: #fff!important*/}
.navbar-toggler{ border: none!important; color: var(--color-primary)!important; background-color: var(--color-primary)!important; padding: 1rem!important; margin-right: 1rem!important; border-radius: var(--rounded)!important}
.navbar-toggler-icon{ background-image: url("../img/hamburguer-lines.svg")!important; }
.opciones-submenu{ display: flex; flex-direction: row; gap:1rem; justify-content: space-between; align-items: center;}
.opciones-submenu .wrap-search{ display: flex}
.navbar-nav .btn-outline-primary, .navbar-nav .btn-outline-light{align-items: center; display: flex}
.main-nav-inline .navbar-nav{column-gap: 1.2rem} 

.btn-link{color: #000!important; text-decoration: none!important}
.btn-link:hover{color: var(--color-primary)!important; }
.top-head .btn-outline-primary{display: flex; align-items: center}
.btn-light { color: var(--color-primary)!important}
/* Icons */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons.material-icons-outlined {
    font-family: 'Material Icons Outlined';
}

.material-icons.md-18 {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
}

.material-icons.md-20 {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
}

.material-icons.md-22 {
    font-size: 1.375rem;
    width: 1.375rem;
    height: 1.375rem;
}

.material-icons.md-24 {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
}

.material-icons.md-26 {
    font-size: 1.625rem;
    width: 1.625rem;
    height: 1.625rem;
}

.material-icons.md-28 {
    font-size: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
}

.material-icons.md-32 {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
}

.material-icons.md-36 {
    font-size: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
}

.material-icons.md-40 {
    font-size: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
}

.material-icons.md-48 {
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
}

.material-icons.md-60 {
    font-size: 3.75rem;
    width: 3.875rem;
    height: 3.75rem;
}

.material-icons.md-72 {
    font-size: 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
}

/*HEADER*/
.wrap-head-tit{ border-left: 1px solid #000; margin-left: 1rem; padding-left: 1rem; text-transform: uppercase}
.wrap-head-tit h1{ margin-bottom: 0}

/*MAIN MENU*/
.navbar{ }
.main-nav{ background-color: var(--color-primary)!important; padding: .85rem 0!important}
.main-nav li{ padding-left: .5rem; padding-right: .5rem}
.main-nav a.nav-link{ color: #fff!important; font-weight: 600; font-size: 1.1em!important; position: relative;}
.main-nav .dropdown-item{white-space: normal}
.main-nav a:hover{color: #10100F!important}
.main-nav a.active, .admin .main-nav a.active{color: #fff!important;}
.main-nav a.active::after{content: ""; background-color: var(--color-secondary); height: 5px; position: absolute; width: 100%; bottom: -0.85rem}
.admin .navbar-toggler{ color: #fff!important}
.admin .main-nav a.active::after{content: ""; background-color: var(--color-secondary); height: 5px; position: absolute; width: 100%; bottom: -0.85rem}
.main-nav-inline{/*padding: .85rem 0!important;*/ border-bottom: 5px solid var(--color-primary)}
.main-nav-inline .nav-link { color: #000!important; font-weight: 700; font-size: 1.2rem}
.main-nav-inline .navbar-brand{ border-right: 1px solid #ccc; padding-right: 1rem!important; margin-right: 1rem;}
.navbar-brand{padding: 1.1rem 0!important; display: block}
.front-ui .navbar-brand{padding: 0 0 1.5rem 0!important; display: block}
.header-top-links{ display: flex; gap:1.2rem; align-items: center; font-size: .9rem}
.header-top-links a{display: flex; align-items: center}
.top-head{ justify-content: flex-end}
.top-head .dropdown-menu li{ padding-left: .8rem;  padding-right: .8rem; display: block}
.top-head .dropdown-item{border: none; font-weight: 600; border-radius: var(--rounded)!important; text-transform: uppercase; text-align: center; margin-bottom: .5em; font-size: .8em}
.top-head .dropdown-item:hover{color: var(--color-primary)!important;}
.btn.show, .btn:first-child:active{background-color: var(--acento3)!important}
.dropdown-item.active, .dropdown-item:active{background-color: var(--acento3)!important}
.top-head .btn-outline-primary{ margin-left: 3.75rem!important; min-width: 130px}
.top-head .dropdown-menu.show{ padding: 1rem!important; border: none!important; box-shadow: var(--box-shadow)}
.bg-soft{background-color: var(--soft-bg-blue);}
.custom-card{border: none!important; box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;}
.shadowed-box{box-shadow: var(--box-shadow)}
.wrap-form{margin-top:6vh; padding: 2rem 3rem; width: 500px;margin-bottom:6vh;}
.wrap-form-registro{margin-top:8vh; padding: 2rem 0; margin: 0 auto;}
.header-top{ padding: .5rem 0}
.wrap-icon{text-align: center; }
.righ-col{ display: flex; flex-direction: column; align-content:center;}
.d-flex-col{ flex-direction: column}
.steps{ width: 100%; display: flex; justify-content: center; position: relative; grid-gap: 1rem}
.numberStep{ border: 1px solid #9ec5fe; border-radius: 1rem; text-align: center; background-color: #fff; position: relative; height: 2rem; width: 3rem; 
	padding-top: .5rem}
.wrap-step{display: flex; flex-direction: column; justify-content: center; text-align: center; margin-left: 1rem; margin-right: 1rem; font-weight: 700}
.steps{margin: 1.5rem 0}
.steps::before{ content: ""; width: 100%; background-color: #000; margin-top: 1.25rem; position: absolute; z-index: 0; height: 1px}
.muted *{ color: #ccc;}
.muted .numberStep{border: none; font-weight: 400}
.admin footer{ padding: 2rem 0; text-align: center}
.hero-section .btn-link{ border-bottom-left-radius: 0px; border-bottom-right-radius: 0px}
.top-head{ text-align: right; padding-top: .7rem;}
a.current{ font-weight: 700}
.offcanvas{ background: url("../img/bg-login-admin.png") bottom right no-repeat; background-size: 150%}
.offcanvas-body .nav-link{display: flex!important; flex-direction: row; justify-content: space-between; padding: 1rem 0; color: var(--color-primary)}
blockquote{ padding: 1rem;}
blockquote p{ padding: 1rem 0}
/*TABLES*/
.custom-table{ border: 1px solid var(--acento2)!important;  }
.custom-table thead{font-size: 1.2rem}
.custom-table thead th{ background-color: var(--bg-tables)!important; border-bottom: 2px solid var(--color-primary)}
.custom-table2 .btn{font-size: 1rem!important}
.custom-table2 .material-symbols-sharp{color: var(--color-primary)!important}
.custom-table2 th{ color: var(--color-primary)!important}
.custom-table2 th p{color: #000}

/*PAGINADOR*/
.paginador{ display: flex; align-items: center; justify-content: space-between;}
.active .page-link{ background-color: var(--color-primary)!important; color: #fff!important; border:1px solid var(--color-primary)!important}
.page-link{ }
.filters{display: flex; flex-direction: row; align-items: center; gap: 1rem;}
.inline label{padding-bottom: 0; margin-bottom: 0; }

/*PLANS*/
.wrap-category-plan{padding: 2rem 0; /*border-bottom: 1px solid #000;*/ padding-left: 1rem; padding-right: 1rem; border-radius: 0px}
.wrap-category-plan .card:hover{ background-color: #f0f5f7; border-radius: 12px; border: 1px solid #dee7eb}
.wrap-category-plan .card{ border: none; box-shadow: var(--box-shadow); margin-bottom: 1.5rem}
.big-number{ font-size: 3rem; color: var(--color-primary); font-weight: 700; line-height:2.8rem}
.number-report{ border-bottom: 1px solid #ccc; padding-bottom: 1rem}
.vigencia{ border-right: 1px solid #ccc}
.vigencia, .descargas{padding: .5rem 0}
.vigencia .available, .descargas .available{font-weight: 700}
.price-tag{ font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; margin-top: 1rem}
.wrap-plan{ display: flex; gap:1rem; border-bottom: 1px solid #ccc}
.wrap-plan .vigencia, .wrap-plan .descargas{display: flex; width: 50%; flex-direction: column}
.icon-wrap{ border: 3px solid #ccc; padding: 1rem; display: block; border-radius: 1rem; color: var(--color-primary)}
.benefits {flex-direction: row; column-gap: 1rem; justify-content: center}
.benefits .card{ border: none; background-color: transparent; width: 30%}
.benefits .card-body{ display: flex; align-items: center}
.benefits .card-body .desc-wrap{ margin-left: 1rem}
.desc-plan, .desc-wrap{ font-size: 1rem}
.desc-wrap{ font-weight: 600;}
.single-login{ background: url("../img/bg-admin.jpg") center center no-repeat; background-size: cover}
.single-login .wrap-form{margin-top: 18vh; margin-bottom:9vh;}
.single-login footer{ background-color: rgba(229,229,229,0.50); padding: 1rem; margin-bottom: 0; }
.single-login footer *{color: #000!important}

/*TABS*/
.horizontal .nav-link{ padding: 1rem; font-weight: 700; font-size: 1.2rem}
.tabs-vertical .nav-link{ padding: 1rem; border: 2px solid var(--color-primary); border-radius: var(--rounded); margin-bottom: .7rem; font-weight: 600}
.tabs-vertical .nav-link.active{background-color: var(--color-primary-hover)!important; color: #fff!important}

.tabs-vertical .nav-link:hover{ background-color: var(--color-primary-hover); color: #fff!important}
.tabs-vertical .nav-link a{ color: var(--color-primary); font-weight: 600}
/*SLIDER*/
.intro {
    position: relative;
    min-height: 35rem;
    z-index: 1;
}
.intro-slider, .intro-item{ min-height: 30vh}
.intro-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5rem 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
}

.intro-item .container {
    position: relative;
    z-index: 3;
}

.intro-item::after {
    content: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: 0.7;
}

.intro-item .section-desc {
    margin-top: 1.75rem;
}

.intro-content {
    width: 100%;
    max-width: 50rem;
    padding: 0 0 3.75rem 1.5rem;
}

.intro-content.intro-content-center {
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

.intro-content.intro-content-center .intro-btns {
    justify-content: center;
}

.intro-btns {
    margin-top: 2rem;
}

.intro-box {
    width: 100%;
    max-width: 31.25rem;
    padding: 3rem 3rem 3rem 4.375rem;
    background-color: var(--primary-color);
    border-radius: var(--el-border-radius);
    box-shadow: var(--el-box-shadow);
}

.intro-item-img-right {
    position: absolute;
    right: 0;
    width: 70%;
    height: 100%;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.intro-item-img-right::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
    opacity: 0.07;
}
.slider1{ /*background-image: url("../img/s1.jpg");*/ }

/*CARRUSEL*/
.carousel {
  background: transparent;
}

.carousel-cell {
  width: 30%;
  height: 250px;
  margin-right: 10px;
  border-radius: 5px;
padding: 1rem;
 
  
}
.camaras-aliadas .carousel-cell {
  width: 30%;
  height: 150px;
  margin-right: 10px;
  border-radius: 5px;
padding: 1rem;
 
  
}
.camaras-aliadas .carousel-cell .card{
	height: 100%;
	
}
.c360 .card img{ max-height: 70px}

/*ACCORDION*/
.accordion-button:not(.collapsed){font-weight: 700; background-color: var(--acento1)!important; color:var(--color-primary)!important }
.accordion-item .material-icons{color: var(--color-primary)}

/*ADMIN*/
.inner-admin{overflow-x: hidden}
.inner-admin header{ display: flex; flex-direction: row; align-items: center; border-bottom: 3px solid var(--color-primary); justify-content: space-between;       
      padding: 0 1rem;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1040; background-color: #fff}
.inner-admin header .wrap-head-tit{border: none}
.inner-admin .show>.nav-link{background-color: var(--acento2)!important; margin-bottom: .8rem}
.inner-admin .nav-link{ padding: 1rem 0; }
.side-nav{position: fixed; width: 230px}
.layout {
      display: flex;
      margin-top: 86px;
    }

    .sidebar {
      background-color: var(--acento1);
      color: var(--color-primary);
      transition: width 0.3s ease-in-out;
      min-height: calc(100vh - 86px);
      overflow-x: hidden;
    }

    .sidebar-expanded {
      width: 250px;
    }

    .sidebar-collapsed {
      width: 70px;
    }

    .sidebar .nav-link {
      color: white;
      display: flex;
      align-items: center;
      transition: padding 0.3s ease-in-out;
    }

    .sidebar .nav-icon {
      width: 30px;
      text-align: center;
    }

    .sidebar .nav-text {
      margin-left: 10px;
      white-space: nowrap;
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }

    .sidebar-collapsed .nav-text {
      opacity: 0;
    }

    .sidebar .collapse .nav-link {
      padding-left: 2.5rem;
    }
	      .sidebar-collapsed .collapse {
      display: none !important;
    }
	  .sidebar-collapsed .show{}
    .content {
      flex-grow: 1;
      transition: margin-left 0.3s ease-in-out;
    }

/*FOOTER*/
footer{ background-color: var(--color-primary-dark); margin-bottom: 0; padding-bottom: 0}
.top-footer{ padding: 1.5rem 0}
.top-footer *{ color: #fff}
.bottom-footer{ background-color: var(--color-secondary); padding: .7rem 0; }
.bottom-footer *{color: #000!important; font-weight: 400!important}
.nav-footer .navbar-nav{ display: flex; flex-direction: row; gap:1rem; justify-content: space-between}
.data-footer, .data-footer a{ flex-direction: row; display: flex; padding: .6rem 0; gap:.7rem}
.wrap-links{ display: flex; gap:1.5rem; flex-direction: row; padding: .7rem 0}
.slogan{ padding: 1.5rem 0}
.cta-end{ background-color: var(--acento1)}
footer .dropdown-item, .top-footer .dropdown-item{color: var(--color-primary)!important}
/*HOME*/
.wrap-cards{}
.wrap-cards .card{ padding: 1rem; border-radius: var(--rounded); border: none!important; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}
.wrap-search{ display: flex; flex-direction: row;}
.wrap-search .btn{display: flex}
.header-link{ gap:.5rem}
.bg-box1{background-color: var(--acento1)!important; background-image: url("../img/bg-ic-1.png"); background-repeat: no-repeat; background-position: left}
.bg-box2{background-color: var(--acento2)!important; background-image: url("../img/bg-ic-2.png"); background-repeat: no-repeat; background-position: left}
.bg-box3{background-color: var(--acento3)!important; background-image: url("../img/bg-ic-3.png"); background-repeat: no-repeat; background-position: left}
.shortcuts{ position: relative; margin-top: -8rem; z-index: 10}
.who{padding: 0px;}
.testimonials .card{ padding: 1rem; border-radius: var(--rounded); border: none!important; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}	
.camaras-aliadas .card{ text-align: center}
.head-section h2{margin-bottom: 1.5rem}
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f2f2f2+58,ffffff+100 */
.who{background: linear-gradient(to right,  #ffffff 0%,#f2f2f2 58%,#ffffff 100%)}
.why .modules{padding: 1.5rem 0}
.why .card{text-align: center; padding: 1rem; height: 100%}
.why .card img{max-width: 170px!important}
.modules{justify-content: space-between}

/*QUE ES COMPITE 360*/
.main-banner{ background-size: cover!important; padding: 5rem 0; position: relative}
.section-bg{}
.main-banner .section-bg::before{ background-color: rgba(0,0,0,0.65); position: absolute; z-index: 0; left: 0; right: 0; top: 0; content: ""; width:100%; height: 100%}
.main-banner .hero-text{ font-size: var(--font-hero); font-weight: 700; line-height: normal; position: relative}
.main-banner .hero-text, .main-banner h1, .main-banner .container{position: relative}
.main-banner .container *{color: #fff}
.wrap-shortcuts{ display: flex; justify-content: center; flex-direction: row}
.wrap-shortcuts a{ display: flex; gap:.7rem; font-weight: 400!important}
.wrap-users{ text-align: center; padding: 4rem 1rem;}
.wrap-users h3{position: relative; color: #fff; border-radius: var(--rounded)}
.u1{ background: url("../img/user1.jpg") no-repeat; background-size: cover;}
.u2{ background: url("../img/user2.jpg") no-repeat; background-size: cover;}
.u3{ background: url("../img/user3.jpg") no-repeat; background-size: cover;}
.u4{ background: url("../img/user4.jpg") no-repeat; background-size: cover;}
.wrap-users::before{ background-color: rgba(101,45,145,0.75); content:""; position: absolute; z-index: 0; top:0; left: 0; height: 100%; width: 100%; border-radius: var(--rounded)}

/*CASOS DE EXITO*/
.wrap-testimonials .card{ margin-bottom: 1.5rem; background-color: var(--soft-bg-grey); border: none; box-shadow: var(--box-shadow)}
.wrap-testimonials .card:hover{background-color: #fff;}
.wrap-testimonials .card p, .highlighted-testimonial .card p{ font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"; margin-bottom: 1.5rem}
.highlighted-testimonial .card{ background-color: transparent; border: none; border-left: 3px solid var(--color-primary); padding-left: 2rem}
.highlighted-testimonial .card p{font-weight: 500; font-size: 1.5rem}
.blockquote-footer{ border-top:1px solid #ccc; padding-top: .7rem}

/*RESULTADOS DE BUSQUEDA*/
.wrap-result{ padding: 1rem;}
.wrap-result{}
.wrap-result:hover{ background-color: var(--acento1)}
.wrap-result .short-desc{ display: flex!important; gap:1rem; flex-direction: row}
.wrap-result .short-desc .small{font-size: 1em!important; padding-bottom: .7rem}
.info-company{ padding: 2rem; text-align: center}
.info-company img{ max-width: 300px}
.empresas .modal-header{ background-color: var(--acento1)}
.empresas .short-desc .small{display: flex; flex-direction: row; margin-bottom: .7rem; gap:1rem; align-items: center}
.data-empresa{display: flex; flex-direction: column; }
.text-bg-neutro{ background-color: transparent; color: #000!important; border: 1px solid #000}
.empresas .modal-header{background-image: url("../img/bg-enterprise.svg"); background-repeat: no-repeat; background-position: -20% -10%}
.empresas .modal-title{padding-left: 9rem }

/*LOGIN*/
.bg-login{ background: url("../img/bg-login-admin.png") no-repeat; background-position: right center; background-size: 70%}

/* BACK TO TOP */
    #backTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none; /* Oculto por defecto */
      z-index: 9999;
      border-radius: 50%;
      padding: 12px 16px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }

/*RESPONSIVE*/
@media (max-width: 767.98px) {
	.main-banner .hero-text{ font-size: calc(1.525rem + 3.3vw)}
	.nav-footer .navbar-nav{ flex-direction: column; }
	.top-head{ justify-content: space-around!important; text-align: center}
	.navbar-brand{ text-align: center}
	.main-nav{ text-align: center; margin-top: 1rem;}
	.main-nav-inline .navbar-brand{ border-right: none; }
	.navbar-toggler{ }
	.top-head .btn-outline-primary{margin-left: 0!important}
	.offcanvas-body .nav-link{ font-size: 1rem; font-weight: 600; color: #000!important}
	footer .text-right{text-align: left!important; border-top: 1px solid #000; padding-top: 1rem }
	footer ul{margin-top: .2rem; border-top: 1px solid #000; padding-top: 1rem }
	.benefits .card{ width: 100%;}
	.wrap-form-registro{max-width: 100%}
	.min-w350p, .min-width500p{ min-width: auto}
	.submenu .show .nav-item{ margin-top: .5rem; margin-bottom: .5rem}
	.submenu .navbar-toggler{ margin-left: 1rem}
	.opciones-submenu{ flex-direction: column}
	.opciones-submenu .btn-primary{ justify-content: center}
	.opciones-submenu .wrap-search{ display: flex; flex-direction: column}
	.wrap-btn{flex-direction: row; display: flex; justify-content: center}
	.card-inline{ flex-direction: column!important;}
	.carousel-cell {width: 90%;height: 300px;}
	.intro-content{ text-align: center}
	.position-fixed{display: none}
	.wrap-colors{flex-direction: column}
	.color-box{ display: flex; flex-direction: row; gap:1rem; align-items: center}
	.inner-admin{overflow-x: auto}
	.sidebar {
        position: absolute;
        left: -250px;
        top: 86px;
        z-index: 1030;
      }

      .sidebar.show {
        left: 0;
      }

      .content {
        margin-left: 0 !important;
      }
	.wrap-shortcuts a{ flex-direction: column; align-items: center}
	.wrap-result .short-desc{ flex-direction: column; gap:0px; }
	.wrap-result .short-desc .small{ margin-bottom: 0; padding-bottom: 0px}
	.empresas .modal-header{background-position: -45% 100%; background-size: 50%}
.empresas .modal-title{padding-left: 3.3rem }
	.empresas .p-5{ padding: 1.8rem!important}
	.bg-login{ background-position: right center; background-size: 100%}
	.camaras-aliadas .carousel-cell{ width: 50%}
	.wrap-cards .card, .wrap-cards .col-lg-4{margin-bottom: 1rem}
	.who{ background: transparent;}
	.wrap-content-section{margin-bottom: 1rem}
	.bottom-footer *{ text-align: center}
	.cta-end .head-section { text-align: center!important; padding: 1.5rem}
	.offcanvas{ background-color: var(--acento1)}
	
}
@media (min-width:768px) and (max-width: 992px) { 
	.empresas .modal-header{background-position: -55% 100%; background-size: 60%}
	.empresas .modal-title{padding-left: 3.5rem }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1440px!important;
    }
}