/*================================
GENERAL
==================================*/
/* @import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap"); */
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../../Libraries/webfonts/RobotoCondensed-Regular.ttf') format('truetype');
}
*{
    font-family: 'Roboto Condensed', sans-serif;
}
ul, ol{
    list-style: none;
}
.seccion-acerca-cotiza ul, .seccion-seg-vehicular ul, .general-servProd ul{
    list-style: disc !important;
}
a:visited, a:link, a:focus, a:hover, a:active{
    list-style: none;
    text-decoration: none; 
}
.bold{
    font-weight: bold;
}
.bg-azulGPS{
    background-color: #025192;
}
.bg-azulGPS2{
    background-color: #06B0F5;
}
.bg-crema{
    background-color: #f9f8f7;
}
.texto-azulGPS{
    color: #025192;
}
.texto-azulGPS2{
    color: #06B0F5;
}
.indice-titulo{
    padding-left: 15px;
    border-left: 5px solid #06B0F5;
}
.indice-tituloB{
    padding-left: 15px;
    border-left: 5px solid #ffff;
}
.relativo{
    position: relative;
}
.absoluto{
    position: absolute;
}
.centrar-vertical{
    top: 50%;
    transform: translateY(-50%);
}
.centrar-horizontal{
    left: 50%;
    transform: translateX(-50%);
}
.overflow-hidden{
    overflow: hidden;
}
.borde-30{
    border-radius: 30px;
}
.btn-azulGPS{
    cursor: pointer;
    background-color: #025192;
    border: none;
    border-radius: 30px;
    color: white;
    padding: 7px 20px;
    transition: 0.2s all ease-in-out;
}
.btn-azulGPS:hover{
    background-color: #06B0F5;
    color: white;
}
.btn-azulGPS2{
    cursor: pointer;
    background-color: #06B0F5;
    border: none;
    border-radius: 30px;
    color: white;
    padding: 7px 20px;
    transition: 0.2s all ease-in-out;
}
.btn-azulGPS2:hover{
    background-color: #025192;
    color: white;
}
.bg-foto{
    background-color: rgba(255, 255, 255, 0.5);
    background: url(../src/img/circuitsBackground.png);
    /* opacity: 0.5; */
    /* z-index: 1; */
    background-repeat:repeat;
    /* background-size: cover; */
}
/* ─── Fondos ─────────────────────────────────────────────────────────────── */
.soBgDarkBlue{
    background-color: #025192;
}
.soBgLightBlue{
    background-color: #06B0F5;
    color: #ffff;
}
/* ─── Tipografias ────────────────────────────────────────────────────────── */
.soBold{
    font-weight: bold;
}
.soTextDarkBlue{
    color: #025192 !important;
}
.soTextLightBlue{
    color: #06B0F5 !important;
}
/* ─── Botones ────────────────────────────────────────────────────────────── */
.soBtnDisabled{
    background-color: #e9ecef;
    opacity: 1;
    color: white;
    border: none;
    cursor: not-allowed
}
.soBtnDarkBlue{
    border: none;
    background-color: #025192;
    color: white;
    padding: 0.375rem 0.75rem;

    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition-duration: 0.3s;
    transition-property: transform;
}
.soBtnDarkBlue:hover{
    transform: scale(0.9);
    color: white;
}
.soBtnLightBlue{
    border: none;
    background-color: #06B0F5;
    color: white;
    padding: 0.375rem 0.75rem;

    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition-duration: 0.3s;
    transition-property: transform;
}
.soBtnLightBlue:hover{
    transform: scale(0.9);
    color: white;
}
.hvrSombra {
    display: inline-block !important;
    vertical-align: middle !important;
    transform: perspective(1px) translateZ(0) !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0) !important;
    transition-duration: 0.3s !important;
    transition-property: box-shadow !important;
}
.hvrSombra:hover, .hvrSombra:focus, .hvrSombra:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5) !important;
}
.soBtnWhite{
    border: none;
    background-color: white;
    color: #025192;
    padding: 0.375rem 0.75rem;

    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition-duration: 0.3s;
    transition-property: transform;
}
.soBtnWhite:hover{
    transform: scale(0.9);
    color: #025192;
}
.soBtnTransparent{
    border: none;
    background-color: transparent;
    padding: 0.375rem 0.75rem;
    color: white;
}
.soBtnDanger{
    background-color: #dc3545;
    padding: 0.375rem 0.75rem;
    color: white;

    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition: 0.3s all ease-in-out;

}
.soBtnDanger:hover{
    background-color: #72111b;
    color: white;
}
.soBtnShowHide{
    border: 1px solid #ced4da;
    border-left: none;
    background-color: white;
    color: #ced4da;
    /* padding: 0.375rem 0.75rem; */

    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
}
/* ─── Estilos ────────────────────────────────────────────────────────────── */
#inputNit::-webkit-inner-spin-button, 
#inputNit::-webkit-outer-spin-button,
#telClienteCotiza::-webkit-inner-spin-button, 
#telClienteCotiza::-webkit-outer-spin-button,
#SoTCCtto::-webkit-inner-spin-button, 
#SoTCCtto::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

#inputNit, #SoTCCtto, #telClienteCotiza {
    -moz-appearance: textfield;
}

.soRounded{
    border-radius: 10px !important;
}
.soRoundedR{
    border-top-right-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
    padding-left: calc(1em + 0.25em) !important;
    padding-right: calc(1em + 0.25em) !important;
}
.soRoundedL{
    border-top-left-radius: 9999px !important;
    border-bottom-left-radius: 9999px !important;
    padding-left: calc(1em + 0.25em) !important;
    padding-right: calc(1em + 0.25em) !important;
}
.soBorder30{
    border-radius: 30px;
}
.soBorder20{
    border-radius: 20px;
}
.soBorder10{
    border-radius: 10px;
}
.soBorder30B{
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.soBorder30T{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.soBorder20B{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.soBorder20T{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.soBorder20R{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.soBorder20Corner{
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.soBoxShadow{
    /* box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02); */
    box-shadow: 10px 10px 0px 0px #025192;
}
[disabled]{
    cursor: not-allowed;
}
select{
    cursor: pointer;
}
/* ─── soDropdowns ──────────────────────────────────────────────────────────── */
.soDropbtn {
    border: none;
}
.soDropdown {
    position: relative;
    display: inline-block;
}
.soDropContent {
    display: none;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    background-color: #ffff;
    min-width: 250px;
    box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
    z-index: 2000;
}
.soDropContentR {
    display: none;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    right: 0;
    background-color: #ffff;
    min-width: 800px;
    box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
    z-index: 1;
}
.soDropContentR.show {
    display: block;
}
.soDropContent a, .soDropContentR a {
    color: black;
    padding: 0.375rem 0.75rem;
    text-decoration: none;
    display: block;
}
.soDropContent a:hover, .soDropContentR a:hover {
    background-color: #06B0F5;
    color: white;
}
.soDropdown:hover .soDropContent, .soDropdown:hover .soDropContentR {
    display: block;
}
/*================================
FUENTES
==================================*/
p, b, a{
    font-size: 16px;
}
h2{
    font-size: 36px;
}
h5{
    font-size: 20px;
}
h1{
    font-size: 48px;
}
/* -------- */

/*================================
FOOTER
==================================*/
/* SIEMPRE ABAJO */
body{
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
}
.seccion-footer .footer-superior, .seccion-footer .footer-superior a{
    color: white;
}
.redes i{
    background-color: white;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    padding: 20px;
    margin-right: 10px;
}
.redes i:hover{
    background-color: #06B0F5;
    color: white;
}
.mapa{
    height: 225px;
}
.mapa img{
    transition: 0.5s all ease-in-out;
}
.mapa img:hover{
    transform: scale(1.1);
}
.atencion-cliente a:hover{
    color: #06B0F5;
}
/*================================
ICONO WHATSAPP
==================================*/
.whatsapp{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    font-size:30px;
	box-shadow: 2px 2px 3px #999;
    z-index:100;
}
.whatsapp:hover {
	text-decoration: none;
	color: #25d366;
    background-color:#fff;
}
.icono-whatsapp{
	margin-top:16px;
}
.soStore{
	position:fixed;
	width:60px;
	height:60px;
	/* bottom:40px; */
	bottom:110px;
	right:40px;
    /* left: 40px; */
	background-color:#06B0F5;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    font-size:30px;
	box-shadow: 2px 2px 3px #999;
    z-index:100;
}
.soStore:hover {
	text-decoration: none;
    color: white;
    background-color:#025192;
}
/*================================
CABECERA
==================================*/
img.logo-barra-nav{
    width: 90%;
}
img.icono-idioma{
    height: 25px;
    width: 22px;
}
header .dropdown-menu, .contenedor-filtros .dropdown-menu{
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    padding: 10px;
    border: none;
    border-radius: 30px;
}
header .dropdown-item{
    padding-left: var(--bs-navbar-nav-link-padding-x);
}
header.cabecera{
    min-height: auto;
    position: relative;
}
header .fondo-cabecera{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
header .fondo-cabecera img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
header .fondo-cabecera::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(7 40 96 / 80%);
}
.nav-link{
    color: white;
}
.nav-link:hover{
    color: #06B0F5;
}
.contenedor-logo{
    width: 250px;
    overflow: hidden;
}
/* .contenedor-logo img{
    filter: invert(50%);
} */
.barra-inferior{
    z-index: 2;
}
.dropdown-item{
    font-weight: bold;
    color: #025192;
    transition: 0.1s all ease-in-out;
}
.dropdown-item:hover{
    color: white;
    background: #06B0F5;
    border-radius: 15px;
}
.btn-carrito-cabecera{
    background: none;
    color: white;
    border: none;
}
/*================================
MENU HAMBURGUESA ANIMADO
==================================*/
.navbar-toggler {
    padding: 0;
    width: 37px;
    height: 42px;
    transition: all .3s;
    border: none;
}
.navbar-toggler:focus {
    box-shadow: none;
}
 .navbar-toggler span {
    display: block;
    width: 35px;
    height: 4px;
    background-color: #ffffff;
    margin: 7px 0;
    transition: all 0.3s;
    position: relative;
    border-radius: 5px;
    transition: all .3s;
}
 .navbar-toggler span::before,
 .navbar-toggler span::after {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    top: -10px;
    border-radius: 5px;
    transition: all .3s;
}
 .navbar-toggler span::after {
    top: 10px;
}
 .navbar-toggler[aria-expanded="true"] {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
 .navbar-toggler[aria-expanded="true"] span {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
 .navbar-toggler[aria-expanded="true"] span::before,
 .navbar-toggler[aria-expanded="true"] span::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 0;
}
 .navbar-toggler[aria-expanded="true"] .s-1 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0;
    margin-bottom: -4px;
}
 .navbar-toggler[aria-expanded="true"] .s-2 {
    display: none;
}
 .navbar-toggler[aria-expanded="true"] .s-3 {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: 0;
    margin-top: -4px;
}
 .navbar-toggler[aria-expanded="false"] .s-1,
 .navbar-toggler[aria-expanded="false"] .s-2,
 .navbar-toggler[aria-expanded="false"] .s-3 {
    -webkit-transform: none;
    transform: none;
}
/*================================
MODAL CLIENTES
==================================*/
.modal-dialog{
    width: 420px;
}
.modal-content{
    border: none;
    border-radius: 20px;
    overflow: hidden;
    font-family: 'Roboto Condensed', sans-serif;
}
.modal-content a, .modal-content a:hover{
    text-decoration: none;
}
.modal-header{
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    height: 150px;
}
.modal-header img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.modal-header .close {
    display: none;
}
.modal-footer{
    border: none;
    justify-content: space-between;
}
.modal .input-group-text{
    border:none;
    background: none;
}
.QapTcha .bgSlider {
    height: auto;
}
.soBtnClose{
    position: absolute;
    right: 20px;
    top: 20px;
}
/*================================
TOOLTIP
==================================*/
  .tooltip-container {
    margin: 0 auto;
    display: inline-block;
  }
  
  .tooltip-container {
    position: relative;
    cursor: pointer;
  }
  
  .tooltip-one {
    padding: 18px 32px;
    background: #025192;
    color: #ffff;
    position: absolute;
    min-width: 400px;
    border-radius: 20px;
    text-align: center;
    filter: drop-shadow(0 3px 5px #ccc);
    line-height: 1.5;
    display: none;
    bottom: 170px;
    left: 50%;
    transform: translatex(-50%);
  }
  
  .tooltip-one:after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin-left: -9px;
    width: 18px;
    height: 18px;
    background: #025192;
    transform: rotate(45deg);
  }
  
  .tooltip-trigger:hover + .tooltip-one {
    display: block;
  }
/*================================
INICIO SLIDER - NOVEDADES
==================================*/
/* .contenedor-novedades{
    width: 100%;
}
.img-novedades{
    width: 70%;
    right: 0;
    bottom: 0;
} */
/* CARRUSEL */
.carousel{
    padding-inline: 100px;
    height: 80vh;
    width: 80vw;
    text-align: center;
}
.columna-swiper{
    transition: 0.5s all ease-in-out;
    z-index: 2;
}
.carousel-item h2{
    text-transform: capitalize;
    font-weight: bold;
    color: #ffffff;
}
.carousel-item p, .carousel-item a{
    color: #ffffff;
}
.detail-box{
    height: 400px;
    object-fit: cover;
    
}
.videosPubli{
    border-radius: 20px;
    object-fit: contain;
    background-color: black;
    width: 60%;
    height: 100%;
}
/*================================
INICIO NUESTROS SERVICIOS
==================================*/
.seccion-nuestros-servicios a, .seccion-videos-capVirtuales a,
.seccion-productos a{
    cursor: pointer;
    bottom: 20px;
    left: 20px;
}
.seccion-nuestros-servicios .box{
    height: 430px;
    width: 320px;
    background-color: white;
}
/* .seccion-nuestros-servicios h5, .seccion-nuestros-servicios h2,
.seccion-acerca-cotiza h2, .seccion-acerca-cotiza h5{
    font-weight: bold;
} */
/* .seccion-nuestros-servicios h2, .seccion-acerca-cotiza h2{
    padding-left: 15px;
    border-left: 5px solid #06B0F5;
} */
.img-card-servicios{
    height: 200px;
}
.caja-img-card-servicios{
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 21% 90%, 15% 100%, 9% 90%, 0 90%);
}
.contenido-card-servicios, .contenido-card-capacitaciones, .contenido-card-productos{
    padding: 20px;
}
/*================================
INICIO ACERCA-COTIZA
==================================*/
.seccion-acerca-cotiza .img-porque{
    width: 45px;
}
.img-porque img{
    width: 100%;
}
.seccion-acerca-cotiza input[type=number]::-webkit-inner-spin-button, 
.seccion-acerca-cotiza input[type=number]::-webkit-outer-spin-button,
#modalClientes input[type=number]::-webkit-inner-spin-button, 
#modalClientes input[type=number]::-webkit-outer-spin-button,
.seccion-contacto input[type=number]::-webkit-inner-spin-button, 
.seccion-contacto input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

.inputValido{
    border-color: green;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url(../src/img/chulo.webp);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.inputError{
    border-color: red;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url(../src/img/equis.webp);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.inputObligatorio{
    /* border-color: red; */
    padding-right: calc(1.5em + 0.75rem);
    background-image: url(../src/img/asterisco.webp);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.errorValidacion{
    color: red;
}

/*================================
SERVICIOS
==================================*/
.contenedor-conteo-pasajeros, .general-segVehicular, .contenedor-control-flota,
.contenedor-seguridad, .seccion-contacto, .seccion-nuestros-servicios, .general-aplicaciones{
    background-color: #f9f8f7;
}
.seccion-seg-vehicular h5, .seccion-conteo-pasajeros h5,
.seccion-control-flota h5, .seccion-seguridad h5,
.seccion-contacto h5{
    margin: 0;
}
.burbuja{
    width: 100%;
    height: 150px;
    background-color: white;
    border-radius: 100px;
    box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
}
.img-burbujas{
    height: 90px;
    width: 90px;
    font-size: 50px;
    border: 5px solid #025192;
    color: #025192;
    border-radius: 100%;
    overflow: hidden;
}
/*================================
CONTACTO
==================================*/
.seccion-contacto .pasos{
    border-radius: 30px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.img-pasos{
    width: 20%;
}
.img-contacto{
    font-size: xx-large;
}
.img-contacto .fa-envelope{
    color: #025192;
}
.img-contacto .fa-phone{
    color: #028A0F;
}
.img-contacto .fa-instagram{
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
}

/*================================
APLICACIONES
==================================*/
.aplicacion{
    background-color: white;
    width: 100%;
    transition: 0.2s all ease-in-out;
    padding: 10px 20px;
}
.aplicacion:hover{
    transform: scale(1.05);
}
.img-aplicacion{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.contenedor-img-aplicacion{
    width: 50%;
    height: 120px;
}
.contenedor-img-empresa{
    width: 20%;
}
.img-empresa{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* SUBIR FACTURA */
/* .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}
.inputfile-7 + label {
    color: #025192;
}
.inputfile-7 + label {
    border: 1px solid #06B0F5;
    background-color: #fff;
    padding: 0;
    border-radius: 30px;
}
.inputfile-7:focus + label,
.inputfile-7.has-focus + label,
.inputfile-7 + label:hover {
    border-color: #025192;
}
.inputfile-7 + label span,
.inputfile-7 + label strong {
    padding: 7px 20px;
}
.inputfile-7 + label span {
    width: 200px;
    min-height: 1em;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
}
.inputfile-7 + label strong {
    cursor: pointer;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    height: 100%;
    color: #fff;
    background-color: #06B0F5;
    display: inline-block;
}
.inputfile-7:focus + label strong,
.inputfile-7.has-focus + label strong,
.inputfile-7 + label:hover strong {
    background-color: #025192;
} */

.caja-img-card-servProd{
    height: 100%;
}
.cont-img-product{
    /* width: 300px; */
    height: 300px;
}
.cont-img-product img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}
/*================================
CAPACITACIONES
==================================*/
.cont-img-pagos img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.containerCapVirtuales, .containerProd, .containerServ{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    align-items: flex-start;
    /* padding: 5px 0; */
    height: 550px;
}
.containerCapVirtuales .videoList, .containerProd .productList, .containerServ .servList{
    /* background: white; */
    border-radius: 20px;
    padding-right: 20px;
    height: 100%;
    overflow-y: scroll;
}
.containerCapVirtuales .videoList::-webkit-scrollbar, .containerProd .productList::-webkit-scrollbar, .containerServ .servList::-webkit-scrollbar{
    width: 7px;
}
.containerCapVirtuales .videoList::-webkit-scrollbar-track, .containerProd .productList::-webkit-scrollbar-track, .containerServ .servList::-webkit-scrollbar-track{
    background: #ccc;
    border-radius: 20px;
}
.containerCapVirtuales .videoList::-webkit-scrollbar-thumb, .containerProd .productList::-webkit-scrollbar-thumb, .containerServ .servList::-webkit-scrollbar-thumb{
    background: #025192;
    border-radius: 20px;
}
.containerCapVirtuales .videoList .vid video{
    width: 100px;
    border-radius: 5px;
}
.containerCapVirtuales .videoList .vid, .containerProd .productList .prdct, .containerServ .servList .serv{
    height: 80px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    border-radius: 20px;
    cursor: pointer;
    transition-duration: 0.3s;
    transition-property: transform;
}
.containerCapVirtuales .videoList .vid:hover, .containerProd .productList .prdct:hover, .containerServ .servList .serv:hover{
    transform: scale(0.9);
}
.containerCapVirtuales .videoList .vid.active, .containerProd .productList .prdct.active, .containerServ .servList .serv.active{
    background: #025192;
    color: white;
    box-shadow: 10px 10px 0px 0px #06B0F5;
}
#wmStatic{
    top: 50% !important;
    left: 50% !important;
    user-select: none;
    pointer-events: none;
}
#wmCopy{
    user-select: none;
    pointer-events: none;
}
.caja-img-card-capacitaciones{
    /* height: 200px; */
    height: 80%;
}
.img-card-capacitaciones{
    width: 100%;
    height: 100%;
    /* height: 60%; */
    object-fit: contain;
    background-color: black;
}
.seccion-videos-capVirtuales .box{
    transition: 0.3s all ease-in-out;
    height: 100%;
    /* height: 320px; */
    /* width: 320px; */
}
.contenido-card-capacitaciones {
    /* max-height: 120px; */
    height: 120px;
    /* overflow-y: scroll; */
    /* overflow-x: hidden; */
}
.img-card-capacitaciones .vjs-control-bar{

    background: #025192;
    z-index: 1000;

}
.img-card-capacitaciones .vjs-big-play-button{

    background: #06B0F5;
    z-index: 1000;
    border-radius: 30px;

}
.img-card-capacitaciones .vjs-big-play-button:hover{

    background: #025192;

}
/*================================
PAGINAS DE ERROR
==================================*/
.no-encontrado{
    color:#025192;
}
.no-encontrado h1{
    font-size: 300px;
    text-shadow: 8px 8px 1px #dadada;
}
/*================================
PAGOS
==================================*/
.sticky-top {
    z-index: 1;
}
.caja-pagos{
    background-color: white;
    border-radius: 30px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);;
}
.caja-bordes-pagos{
    height: 100%;
    width: 100%;
    border-radius: 10px;
    border: 1px dashed #06B0F5;
}
.btn-medioPago{
    border: none;
    width: 100%;
    height: 10vh;
    text-align: left;
    background-color: #f9f8f7;
}
.contenedor-img-tarjetas{
    width: 25%;
    height: 100%;
}
.contenedor-img-tarjetas img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.contenedor-img-pse{
    width: 90px;
    height: 90px;
}
.contenedor-img-pse img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.seleccionTarjeta .form-check-input {
    width: 90px;
    height: 50px;
    margin-top: 0.25em;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #ced4da;
    cursor: pointer;
    appearance: none;
}
.seleccionTarjeta .form-check-input.visa {
    background-image: url(https://1000marcas.net/wp-content/uploads/2019/12/Visa-Logo-2005.webp);
}
.seleccionTarjeta .form-check-input.mastercard {
    background-image: url(https://newsroom.mastercard.com/latin-america/files/2016/07/Linkedin_MC.webp);
}
.seleccionTarjeta .form-check-input.dinersclub {
    background-image: url(https://1000marcas.net/wp-content/uploads/2020/08/Diners-Club-International-logo.webp);
}
.seleccionTarjeta .form-check-input.aExpress {
    background-image: url(https://assets.stackry.com/Amex/Amex.webp);
}
#tarjetaCredito .form-check-input:checked {

    background-color: white;
    outline:5px solid #06b1f57e;
    
}
#tarjetaCredito .form-check-input:hover {

    outline:5px solid #06b1f57e;
    
}
#tarjetaCredito .form-check-input[type=radio] {
    border-radius: 10px;
}
.sticky-top {
    top: 20px;
}
/*================================
ALERTAS SUAVES
==================================*/
.swal2-popup {
    border-radius: 30px !important;
}
.swal2-styled.swal2-confirm {
    font-weight: bold;
    background-color: #06B0F5 !important;
    border: none !important;
    border-radius: 30px !important;
    color: white;
    padding: 8px 20px !important;
    transition: 0.2s all ease-in-out;
}
.swal2-styled.swal2-cancel{
    font-weight: bold;
    border: none !important;
    border-radius: 30px !important;
    color: white;
    padding: 8px 20px !important;
    transition: 0.2s all ease-in-out;
}
.swal2-styled.swal2-deny{
    font-weight: bold;
    border: none !important;
    border-radius: 30px !important;
    color: white;
    padding: 8px 20px !important;
    transition: 0.2s all ease-in-out;
}
/*============================================
DISEÑO RESPONSIVO
=============================================*/
@media (min-width:1408px){
 
}
/*============================================
lg-Tablet Horizontal (1024 px)
=============================================*/
@media (max-width:1407px) and (min-width:1216px){


}
/*============================================
md-Tablet Vertical (768 px)
=============================================*/
@media (max-width:1215px) and (min-width:1024px){
    .containerCapVirtuales{
        grid-template-columns: 1.5fr 1fr;
        height: 400px;
    }

}
/*============================================
sm-Movil Horizontal (576 px)
=============================================*/
@media (max-width:1023px) and (min-width:769px){

    p, b, a{
        font-size: 16px;
    }
    h2{
        font-size: 32px;
    }
    h5{
        font-size: 20px;
    }
    h1{
        font-size: 40px;
    }
    .containerCapVirtuales{
        grid-template-columns: 1fr;
        height: 930px;
    }
    .seccion-videos-capVirtuales .box{
        /* width: 300px; */
        height: 400px;
    }

}
/*============================================
Movil Vertical (320 px)
=============================================*/
@media (max-width:768px) {

    p, b, a, li{
        font-size: 14px;
    }
    h2{
        font-size: 28px;
    }
    h5{
        font-size: 18px;
    }
    h1{
        font-size: 32px;
    }
    .contenedor-logo{
        width: 150px;
    }
    .carousel{
        padding-inline: 40px;
        height: 50vh;
        width: 100vw;
    }
    .redes{

        justify-content: center;

    }
    .whatsapp{
        bottom:20px;
        right:20px;
    }
    .soStore{
        bottom:90px;
        right:20px;
    }
    .seccion-nuestros-servicios .box{
        height: 300px;
        width: 300px;
    }
    .img-card-servicios {
        height: 130px;
    }
    .burbuja{
        height: 100px;
    }
    .img-burbujas{
        height: 60px;
        width: 60px;
        font-size: 25px;
    }
    .tooltip-one {
        bottom: 80px;
        min-width: 350px;
    }
    .modal-dialog{
        width: auto;
    }
    .contenedor-img-empresa {
        width: 30%;
    }
    .seccion-videos-capVirtuales .box{
        /* width: 300px; */
        height: 400px;
    }
    .containerCapVirtuales{
        grid-template-columns: 1fr;
        padding: 24px;
        height: 760px;
    }
    /* .contenido-card-capacitaciones { */
        /* max-height: 120px; */
        /* height: 150px;
        overflow-y: scroll; */
        /* overflow-x: hidden; */
    /* } */
    /* .caja-img-card-capacitaciones {
        height: 130px;
    } */

}

/*=======+
DRAG FILE
+========*/
  .drop-container {
    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    padding: 20px;
    border-radius: 10px;
    border: 2px dashed #025192;
    color: #444;
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
  }
  
  .drop-container:hover,
  .drop-container.drag-active {
    background: #eee;
  }
  
  .drop-container:hover .drop-title,
  .drop-container.drag-active .drop-title {
    color: #025192;
  }
  
  .drop-title {
    color: #444;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: color .2s ease-in-out;
  }
  
  input[type=file] {
    width: 80%;
    max-width: 100%;
    color: #444;
    padding: 5px;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #555;
  }
  
  input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #06B0F5;
    padding: 10px 20px;
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
  }
  
  input[type=file]::file-selector-button:hover {
    background: #025192;
  }