/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root{
  /* --- [COLORES] --- */
  --color-verde:#7CDA81;
  --color-verde-rgba:101, 240, 140;
  --color-naranja:#F09F65;
  --color-morado:#433295;
  --color-morado-rgb:67,50,149;
  --color-morado-claro:#5F48CA;
  --color-morado-obscuro:#250D97;
  --color-azul:#2F04FF;
  --color-azul-rgba:0, 123, 236;
  --color-gris:#464354;
  --color-gris-claro:#7D7D7D;
  --color-blanco:#FFFFFF;
  --color-casi-blanco:#F4F2FF;
  --color-negro:#000;

  --textos:var(--color-gris);
  --textos-claros:var(--color-blanco);
  --textos-obscuros:var(--color-negro);
  --links-claros:var(--color-naranja);
  --links-obscuros:var(--color-verde);
  --gradiente-morado:linear-gradient(180deg, var(--color-naranja) 0%, var(--color-azul) 100%);
  --gradiente-morado-horizontal:linear-gradient(90deg, rgba(78,56,193,1) 0%, rgba(95,71,205,1) 35%, rgba(60,33,177,1) 100%);
  --gradiente-azul:linear-gradient(180deg, rgba(var(--color-verde-rgba), 0.80) 0%, rgba(var(--color-azul-rgba),0.80) 100%);
  
  /* --- [Tamaños] --- */
  --fbig:74px;
  --fmedium:38px;
  --fnormal:22px;
  --fsmall:18px;
  --padding-header:70px;
  --padding-normal:60px;

  /* --- [Dejadas por compatibilidad] --- */
  --acento:#d1d704;
  --primario:#1a191a;
  --primario-obscuro:#141611;
  --primario-opacity:rgba(26,25,26,0.8);
  --secundario:#ebebeb;
  --terciario: #f7b032;
  --font-small:14px;
  --font-xsmall:10px;
  --font-big:42px;
  --font-large:32px;
}

body{font-family: 'Poppins',sans-serif;color:var(--textos);font-size:var(--fnormal);line-height:1.4em;}
body:not(.vista-index){background: rgba(var(--color-morado-rgb), 1);}
body:not(.vista-index) #header+#main{margin-top:var(--padding-header);background:#FFF;}

a{text-decoration:none;color:var(--color-naranja);}
a:hover{color:var(--color-morado);}
a.hover-claro:hover{color:var(--color-blanco);}
img{max-width:100%;max-height:100%;object-position:center;object-fit:contain;}

.min-vh-50{min-height:50vh;}
.min-vh-60{min-height:60vh;}
.min-vh-70{min-height:70vh;}
.max-w-700{max-width:700px;}
.right-0{right:0!important;}
.click{cursor:pointer;}
.padding-header{padding-top:var(--padding-header);}
.img-filter-green,.img-filter-green-active.active{filter:sepia(1) hue-rotate(90deg);transition:all 0.5s linear;}

.txt-blanco{color:var(--color-blanco);}
.txt-verde{color:var(--color-verde);}
.txt-azul{color:var(--color-azul);}
.txt-gris-claro{color:var(--color-gris-claro);}
.bg-azul{background-color:var(--color-azul);}
.bg-image{background: none no-repeat center center scroll transparent;background-size:cover;}
.bg-image-contain{background-size:contain;}
.bg-image-rightcenter{background-position:right center;}
.bg-morado{background-color:var(--color-morado);}
.bg-morado-claro{background-color:var(--color-morado-claro);}
.bg-negro{background-color:var(--color-negro);}
.bg-blanco{background-color:var(--color-blanco);}
.bg-casi-blanco{background-color:var(--color-casi-blanco);}

.bg-gradiente{position:relative;overflow:hidden;}
.bg-gradiente:before{
  border-radius: 100%;
  content:"";
  position:absolute;
  left:0%;
  top:-50%;
  filter:blur(70px);
  width:100%;
  height:100%;
  z-index:0;
}
.bg-gradiente.gradient-right:before{left:30%;}
.bg-gradiente > *{position:relative;z-index:1;}
.bg-gradiente-azul{background-color:var(--color-azul);position:relative;overflow:hidden;}
.bg-gradiente-azul:before{background-color:rgba(var(--color-verde-rgba), 0.80);}
.bg-gradiente-morado{background-color:var(--color-morado);}
.bg-gradiente-morado:before{background-image:var(--gradiente-morado);}

.super-titulo{font-size:var(--fbig);}
.titulo{font-size:var(--fmedium);font-weight:600;text-transform:uppercase;}
.lead{font-family:'Inter',sans-serif;font-size:var(--fnormal);}
.font-secundaria{font-family:'Inter',sans-serif;}
.font-medium{font-size:var(--fmedium);line-height:var(--fmedium);}
.font-big{font-size:var(--fbig);}
.font-italic{font-style:italic;}

.btn{border-radius:50rem !important;}
.btn-obscuro{color:var(--color-blanco);background-color:var(--color-negro);border-color:var(--color-negro);}
.btn.btn-obscuro:hover {
  color: var(--textos-claros);
  background-color: var(--color-morado);
  border-color: var(--color-morado);
}
.btn:hover{color:var(--color-morado-claro);}
.fullheight-withheader{height:calc(100vh - var(--padding-header));}
.vertical-center{position:relative;top:50%;transform:translate(0%, -50%);}
.vertical-carrusel{
  height: 400px;
  flex-wrap: nowrap;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  overflow: scroll;
}
.scrollbar-hidden{
  -ms-overflow-style:none;
  scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  scrollbar-width: thin;
}
.scrollbar-hidden::-webkit-scrollbar,
.scrollbar-hidden::-webkit-scrollbar:horizontal{
  -webkit-appearance:;none;
  width:0;
}

.circle:before{
  background: var(--color, var(--color-morado-claro));
  border-radius: 100%;
  content:"";
  display: inline-block;
  position: relative;
  width: var(--data-size, 132px);
  height: var(--data-size, 132px);
  z-index:2;
}
.circle[data-centrado="true"]{position:relative;text-align:center;width:100%;}
.circle[data-sombra="true"]::after {
  background: var(--color-sombra, var(--color-morado-obscuro));
  content: "";
  top: calc(100% - 5px);
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  filter: blur(7px);
  height: 15px;
  width: var(--data-size, 132px);
  z-index:1;
}

.back-to-top{
  background:var(--primario);
  bottom:65px;
  border-radius:4px;
  position:fixed;
  opacity:0;
  right:15px;
  width:40px;
  height:40px;
  visibility:hidden;
  transition:all 0.4s;
  z-index:996;
}
.back-to-top i{font-size:28px;line-height:0;color:var(--textos-claros);}
.back-to-top:hover{background:var(--acento);color:var(--textos-claros);}
.back-to-top.active{visibility: visible;opacity: 1;}


#header {
  background: rgba(var(--color-morado-rgb), var(--opacity,0));
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, calc(var(--opacity,0) / 2));
  height: 70px;
  z-index: 997;
}
#header .logo h1 {
  font-size: 28px;
  margin: 0;
  line-height: 0;
  font-weight: 600;
  letter-spacing: 1px;
}
#header .logo h1 a, #header .logo h1 a:hover {
  color: #3c4133;
  text-decoration: none;
}
#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
}

/* Menú Desktop */
.navbar{padding: 0;}
.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}
.navbar li{position: relative;}
.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: var(--fsmall);
  color:var(--textos-claros);
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i, .navbar a:focus i{font-size: 12px;line-height: 0;margin-left: 5px;}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a{color:var(--acento);}
.navbar .resaltado{background:var(--primario);padding-right:20px;margin-left:30px;border-radius:50px;color: #fff;}
.navbar .resaltado > a{color:#FFF;}
.navbar .resaltado:hover{background:#9fc658;}
.navbar .resaltado:hover > a{color:#000;}

.navbar .lang .bx-lg{font-size:20px;}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  right: 0px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a{
  color:var(--acento);
  padding: 10px 20px;
  font-size: 15px;
  text-transform: none;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: var(--primario);
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

/* Menú Movil */
.mobile-nav-toggle {
  color:var(--textos-claros);
  font-size: 20px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x{color:var(--textos-claros);}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(34, 36, 29, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #3c4133;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: var(--primario);
}

.navbar-mobile .resaltado {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: none;
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: var(--primario);
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

#footer{font-size:var(--fsmall);}
.social-links a{
  color: var(--color-blanco);
  background: var(--color-gris-claro);
  border-radius: 100%;
  width: calc(var(--fsmall) * 1.7);
  height: calc(var(--fsmall) * 1.7);
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.breadcrumb-hero{padding:1.5em 0em;}
.breadcrumbs ol{
  display:flex;
  list-style: none;
  padding: 0px;
  font-size:medium;
}
.breadcrumbs ol li::before{
  content: "/";
  padding: 0em 0.3em;
  font-size: x-small;
}
.breadcrumbs ol li:first-child::before{content: "";}

button:not([class]){
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  border-radius: 50rem !important;
  color: #198754;
  border-color: #198754;
}
.Pagina > .container{padding-bottom: 1em;}
.escenario{touch-action:none;pointer-events:none;}
.escenario .base{
  background:var(--gradiente-morado-horizontal);
  height:35vh;
  width:60vh;
  max-width:95%;
  margin:0px auto;
  position:relative;
  z-index:1;
}
.escenario .base::before {
  content:"";
  background:var(--color-morado-claro);
  border-top:1px solid var(--color-morado-obscuro);
  border-radius:100%;
  position: absolute;
  left:0px;
  top:-14%;  height: 30%;
  width:100%;
}
.escenario .telefono{
  transform: translateX(-50%) rotate(10deg);
  height:50vh;
  width:60vh;
  max-width:95%;
  position: absolute;
  left:50%;
  bottom:100%;
  z-index:2;
}
.escenario .telefono img{position:relative;z-index:10;}
.escenario .telefono .video-embed{
  background:#000;
  position: absolute;
  height:100%;
  top:0px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  width:100%;
  mask:url(../images/mascara.webp);
  mask-repeat:no-repeat;
  mask-size:contain;
  mask-position:top center;
  border-radius: 1.8rem;
  overflow:hidden;
}
.escenario .telefono .video-embed iframe{
  display:none;
  height:100%;
  width:800%;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
}
.escenario .telefono .video-embed:after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;}
.escenario .texto{
  color:var(--textos-claros);
  font-size:var(--font-big);
  top:50%;
  position:relative;
  z-index:999;
}