:root {
  --bs-dark-rgb: 8, 31, 91; /* #081F5B in RGB */
  --bs-body-color: #081F5B;
  --bs-primary: #081F5B !important;
  --bs-primary-rgb: 8, 31, 91;
}

body {
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;;
  color: #081F5B !important;
}
h1 {
  font-weight: 700;
  font-size: 64px;
}
h2 {
  font-weight: 700;
  font-size: 32px;
}
h3 {
  font-weight: 700;
  font-size: 24px;
}
h4 {
  font-weight: 700;
  font-size: 20px;
}
h5{
  font-weight: 400;
  font-size: 16px;
}

p {
  font-weight: 400;
  font-size: 14px;
}

.font-weight-regular {
  font-weight: 400;
}
.font-weight-bold {
  font-weight: 700;
}
.font-weight-light {
  font-weight: 300;
}

.font-size-14{
  font-size: 14px !important;
}
.translate-y-10 {
  transform: translateY(10%) !important;
}

.bg-primary {
  background-color: #081F5B !important;
}
.secondary-color{
  color: #406DE2 !important;
}
/*Errors*/
span.error {
  color: #ED3237;
}

/* Modal */
.modal-back {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  z-index: 7777777;
}
.kill-gfx {
  width: 22px;
  height: 22px;
  background-position: -89px -4450px;
  display: inline-block;
  position: absolute;
  right: -4px;
  top: -8px;
  cursor: pointer;
}
.modal-holder {
  position: fixed;
  background: #fff;
  box-shadow: 0 4px 3px -3px #000;
  z-index: 9999999;
}
.modal-holder .mensaje {
  color: #006FB9;
  font-family: 'latoregular', sans-serif;
  font-size: 24px;
  margin-bottom: 34px;
}
.modal-holder .icon-correcto {
  margin-bottom: 32px;
}
.modal-holder .btn-azul {
  font-size: 18px;
}
.modal-formulario {
  background-color: transparent;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  border: 0;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.39);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.39);
  box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.39);
}
.modal-formulario .card{
  border:0;
  border-color: #FFF;
}
.modal-formulario .card-body {
  background-color: #FFFFFF;
  -webkit-border-top-left-radius: 16px;
  -webkit-border-top-right-radius: 16px;
  -moz-border-radius-topleft: 16px;
  -moz-border-radius-topright: 16px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 2rem;
  border-color: #FFF;
}
.modal-formulario .card-footer {
  background-color: #FFFFFF;
  -webkit-border-bottom-right-radius: 16px;
  -webkit-border-bottom-left-radius: 16px;
  -moz-border-radius-bottomright: 16px;
  -moz-border-radius-bottomleft: 16px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-color: #FFF;
}

.resultado-simulador-inversion {
  display: none;
}

/*TODO Remove this*/
/*.paso-1{
  display: none;
}*/


.linea-cantidad {
  background-color: #6B6D77;
  height: 2px;
  width: 80%;
  margin: 0 auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.resultado-simulador-inversion .list-group .list-group-item {
  border: none;
  background-color: transparent;
}

.resultado-simulador-inversion .tabla-datos {
  width:100%;
}

.tabla-datos-resultado-simulador{
  display: none;
}

.blue-link {
  color:#081F5B !important;
  text-decoration: underline;
}
.blue-link:hover {
  color:#406DE2 !important;
  text-decoration: underline;
}



/*Investment simulator radio buttons*/
/* Estilos específicos para el btn-group dentro de sim-productive-investment-container */
.sim-productive-investment-container .btn-group {
    border:1px solid #081F5B;
    border-radius: 0.375rem;
    overflow: hidden;
}

/* Estilos para los botones dentro del btn-group */
.sim-productive-investment-container .btn-group .btn {
  font-size: 16px !important;
  padding: 1rem;
}

/* Botones sin seleccionar */
.sim-productive-investment-container .btn-group .btn-check + .btn {
    background-color: #F2F7FE;
    color: #081F5B;
    border: none;
    border-right: 1px solid #081F5B;
}

/* Último botón sin borde derecho */
.sim-productive-investment-container .btn-group .btn-check + .btn:last-of-type {
    border-right: none;
}

/* Botón seleccionado (checked) */
.sim-productive-investment-container .btn-group .btn-check:checked + .btn {
    background-color: #081F5B;
    color: #ffffff;
    border: none;
}

/* Hover en botones no seleccionados */
.sim-productive-investment-container .btn-group .btn-check:not(:checked) + .btn:hover {
    background-color: #e0ebfc;
}

/* Focus para accesibilidad */
.sim-productive-investment-container .btn-group .btn-check:focus + .btn {
    box-shadow: 0 0 0 0.2rem rgba(8, 31, 91, 0.25);
}

/*Desc investment pills */
.desc-productive-investment-container .nav-pills .nav-link.active {
  border-bottom: 3px solid #EF3238 !important;
}

.desc-productive-investment-container .nav-pills .nav-link {
  color:#FFF;
  background-color: #081F5B;;
  position:relative;
  border: 1px solid #081F5B !important;
  border-radius: 0;
}

/*Investment modes Vertical pills*/
.investment-modes-container .nav-pills .nav-link.active {
  border-radius: 0;
  background-color: #081F5B !important;
  color: #FFF;
}

.investment-modes-container .nav-pills .nav-link {
  color:#081F5B;
  border-radius: 0;
  position:relative;
}

.investment-modes-container .nav-pills button {
  border-right: 1px solid #D9D9D9;
  border-top: 1px solid #D9D9D9;
  border-radius: 0;
}

.investment-modes-container .nav-pills .nav-link.active::after {
  content: "\f231";           
  font-family: "bootstrap-icons";
  font-size: 20px;
  color:#081F5B;
  position:absolute;
  right: -12px;
  top:5px;
}

/*Progress bar investment simulator*/
.days-progress-container {
    max-width: 100%;
    padding: 5px;
}

.progress-wrapper {
    position: relative;
    height: 5px;
    background-color: #D9D9D9;
    border-radius: 25px;
    overflow: visible;
    margin-bottom: 10px;
}

.progress-fill {
    height: 5px;
    background: linear-gradient(90deg, #406DE2 0%, #8CC0FF 50.96%, #ED3237 100%);
    transition: width 0.4s ease;
    border-radius: 5px;
    position: relative;
}

.progress-indicator {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: #ED3237;
    border-radius: 50%;
    transition: all 0.4s ease;
    opacity: 0;
}

.progress-fill.active .progress-indicator {
    opacity: 1;
}

.days-markers {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.day-marker {
    position: relative;
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 10px 5px;
    transition: all 0.3s ease;
}

.day-marker:hover {
    transform: scale(1.05);
}

.day-marker .marker-label {
    font-size: 14px;
    color: #6B6D77;
    transition: color 0.3s ease;
}

.day-marker.active .marker-label {
    color: #081F5B;
    font-weight: 700;
}

/*Ends progress bar investment simulator*/

.navbar-background {
  background-color: #081F5B;
}
.digital-experience-section {
  background-color: #fff;
}

.digital-experience-container {
  max-width: 800px;
}

.digital-experience-title{
  font-size: 60px;
}
.digital-experience-subtitle{
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(250.21deg, #081F5B 44.95%, #406DE2 88.31%);
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text;
  color: transparent; 

}

.digital-experience-grow{
  position: absolute;
  top: 100px;
  left: -40px;
  z-index: 1;
}
.digital-experience-level{
  position: absolute;
  bottom: 100px;
  right: 100px;
  z-index:1;
}

.digital-experience-img-store{
  max-height: 43px;
}

/* Ajuste de líneas SVG */
.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(46%) translateY(2%);
  width: 100%;
  height: 100%;
  pointer-events: none;

}

/* Lista de features */
.features-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.feature-item p {
  font-size: 20px;
  font-weight: 400;
  margin:0rem;
}

.icon-box {
  width: 65px;
  height: 65px;
  border: 2px solid #D9D9D9; /* gris por defecto */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 65px;
  min-height: 65px;
  transition: border 0.5s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.icon-box.active {
  border: 2px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(90deg, #406DE2 4.61%, rgba(239, 50, 56, 0.67) 36.25%, #8CC0FF 70.19%, #406DE2 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.icon-box img {
  width: 42px;
  height: 42px;
}


.ticker-section{
  background: linear-gradient(360deg, #081F5B -41.03%, #406DE2 100%);
  height: 40px;
}

.ticker-section ul {
  gap: 4rem;
  list-style: none;
}

.ticker-section ul li {
  color: #FFF;
  position: relative;
  padding-right: 1rem;
  font-size: 15px;
}
.ticker-section ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -2rem;
  top: 10%;               /* opcional: bajar un poco la línea */
  height: 80%;            /* para que no toque los bordes */
  border-right: 1px solid #ccc; /* color del separador */
}
.update-date-section{
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.update-date-text{
  color: #6B6D77;
  font-size: 12px;
}

.our-products-section {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 100,0 100,65 0,45" fill="%23081F5B"/></svg>') no-repeat;
  background-size: 100% 100%;
  min-height: 40px; /* Asegúrate de que tenga altura */
}

.our-products-container {
  max-width: 800px;
}

.our-products-minicard {
  width: 124px;              
  height: 226px;             
  flex: 0 0 auto;            
  border-radius: 15px;
  padding: 10px;             
  font-size: 14px;           
  background: 
    linear-gradient(#081F5B, #081F5B) padding-box, 
    linear-gradient(90deg, #406DE2 4.61%, #BAD7FF 69.27%, #8CC0FF 100%) border-box;
  border: 1px solid transparent; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-align: center;
  display: flex;             
  flex-direction: column;
  justify-content: center;
}

.our-products-minicard img {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease;
}
.our-products-minicard:hover img {
  filter: drop-shadow(0 0 8px #8CC0FF) brightness(1.2);
  transform: scale(1.05);
}
.our-products-minicard h5{
    font-size:15px;
}

.our-products-minicard a:active, 
.our-products-minicard a:hover, 
.our-products-minicard a:visited,
.our-products-minicard a:link {
  text-decoration: none;
}

/* scroll horizontal en mobile */
.our-products-scroll {
  gap: .5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.our-products-scroll::-webkit-scrollbar {
  display: none;
}

.card-our-products {
  background-color: #FFF;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 2px;
  font-size: 20px;
  cursor:pointer;
}

.chevron-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 2rem;
  padding: 0.4rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

.chevron-btn.left { left: 5px; }
.chevron-btn.right { right: 5px; }

.card-our-products-text{
  font-size:16px
}

.our-company-section {
  background-color: #EBECED;
}

.our-company-container {
  max-width: 800px;
}
.our-company-card{
  min-height: 220px;
  cursor: pointer;

}
.our-company-card p{
  font-size: 16px;
}
.our-company-icon {
  width: 40px;
  height: 40px;
}
.our-company-chevron{
  font-size: 25px;
}
.our-company-background{
  background-image: url('../img/body-our-company-bg.png');
  background-repeat: no-repeat;
  min-height: 105px;
}
.our-services-background{
  background-image: url('../img/body-our-services-bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 105px;
}
.desc-productive-investment-container{
  max-width: 800px;
}
.investment-modes-container {
  max-width: 800px;
}
.investment-modes-background{
  background-image: url('../img/body-investment-modes-bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 105px;
}
.investment-modes-icon{
  width:70px;
  height:70px;
}

.sim-productive-investment-container{
  max-width: 800px;
}

.sim-productive-investment-containe-result{
  max-width: 800px;
}

.fees-container{
  max-width: 800px;
}

.footer-container {
  max-width: 800px;
}

.list-footer{
    padding-left: 0;
    list-style: none;
}

.list-footer li > a:link,
.list-footer li > a:active {
  text-decoration: none;
}

.list-footer li > a:visited span,
.list-footer li > a:hover span{
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #406DE2;
  text-underline-offset: 3px;   
}

.list-footer li a {
  display: inline-flex;       
  gap: 6px;                   
  text-decoration: none;
  margin-top: 8px;
}
/*
.list-footer li a span {
  text-decoration: underline solid #406DE2;  
  text-underline-offset: 3px;           
}
*/

.list-footer li a::before {
  content: "\f285";           
  font-family: "bootstrap-icons";
  font-size: 12px;
  flex-shrink: 0; 
  text-decoration: none;  
}

.list-footer-contact{
  padding-left: 0;
  list-style: none;
}

.list-footer-contact li{
  margin-top: 8px;
}

.list-footer-contact li a {
  display: inline-flex;       
  gap: 6px;                   
  text-decoration: none;
  margin-top: 8px;
}

.list-footer-contact li > a:link,
.list-footer-contact li > a:active {
  text-decoration: none;
}

.list-footer-contact li > a:visited span,
.list-footer-contact li > a:hover span{
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #406DE2;
  text-underline-offset: 3px;   
}

.footer-link  a:active a:visited {
  text-decoration: none;
}

.container-hero-banner{
  max-width: 100%;
  min-height: 474px;
  padding-left: 0px; 
  padding-right: 0px;
}

.container-hero-row{
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.container-header{
  max-width: 900px;
  
 }

.hero-banner {
  position: relative;
  height: 474px;
  overflow: hidden;
}

.hero-banner .hero-bg {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 100%;       
  min-width: 1440px; 
  transform: translateX(-50%); 
}

.hero-banner .hero-side {
  position: absolute;
  top: 0;
  right: 0;
  height: 494px;
  width: auto;
  object-fit: contain;
  z-index: 1;
}

.hero-banner .hero-side.banner1{
  top: -20px;
  right: -70px;
}

.hero-banner .hero-side.banner2{
  top: -20px;
  right: -70px;
}

.hero-banner .hero-side.banner3{
  top: -20px;
  left: 10px;
}

.hero-banner .hero-side.banner4{
  top: -20px;
  left: 10px;
}

.hero-banner .hero-side.banner5{
  top: -20px;
  right: -70px;
}

.hero-banner .hero-side.banner6{
  top: -20px;
  right: -70px;
}

.hero-banner .banner-mobile{
  display: none;
}


.hero-banner-info-card{
  background-color: rgba(255, 255, 255, 0.28);
  border: none;
  border-radius: 45px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  max-width: 450px;
  position:absolute;
  z-index:2;
  top: 50%;
  transform: translateY(-50%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); /* soporte Safari */
}
.card-info-tooltip{
  background-color: #081F5B;
  color: #FFF;
  border-radius: 45px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding:3px 10px;
  position:absolute;
  top:-10px;
  left:20px;
  z-index:2;
  font-size: 16px;
}

.hero-banner-title{
  color: #FFF;
}

.hero-banner-subtitle{
  font-size: 20px;
  color: #FFF;
}

.hero-banner-legal{
  font-size:8px;
  color:#081F5B;
}

.hero-banner-button{
  background-color: #FFF;
  color: #081F5B;
  border-radius: 8px;
  padding: 10px 25px;
  font-size: 20px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hero-banner-button:hover, .hero-banner-button:active{
  background-color: #081F5B !important;
  color: #FFF;
  border-radius: 8px;
  padding: 10px 25px;
  font-size: 20px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel .carousel-indicators button {
  background-color: #D9D9D9;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin-left: 10px;
  margin-right: 10px;
  opacity: 1;
 }

 .carousel .carousel-indicators button.active {
  background-color: #FFF;
 }

 
.navbar{
 background-image: url('../img/navbar-background.png');
    
}
.navbar .nav-link {
  color: #ffffff !important; 
  border-radius: 8px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 14px;
}

.navbar .nav-item {
  border-left: 2px solid #041440; 
  margin-left: 1rem;
  padding-left: 1rem; 
}

.navbar .nav-link:hover {
  color: #081F5B !important;  
  background-color: #FFF !important;
  border-radius:8px;
}

.navbar .nav-link.active {
  color: #FFF !important;  
  border-bottom: 2px solid #406DE2; 
}
.mega-menu-title{
  color:#BAD7FF;
  margin-bottom: 15px;
  margin-top: 15px;
}
.mega-menu-item{
  color:#FFF;
  display: block;              
  position: relative;          
  padding-left: 30px;          
  margin-bottom: 6px;          
  cursor: pointer;
  font-weight: 300;    
  line-height: 1rem;    
}
.mega-menu-item:active,  .mega-menu-item:visited, .mega-menu-item:link{
  text-decoration: none;
}
.mega-menu-item:hover{
  text-decoration: underline;
}

.mega-menu-title img.icon {
  width: 24px;
  height: 24px;
  margin-right: 4px;
  vertical-align: bottom;
}
/*
.mega-menu-item::before {
  content: "";
  position: relative;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;                
  height: 4px;
  background-color: #FFF;   
  border-radius: 50%;
}*/
.mega-menu hr{
  color:#BAD7FF;
  opacity: 1;

}
.mega-menu {
  display: none;
  position: absolute;       
  top: 100%;            
  left: 50%;
  transform: translateX(-50%);
  width: 888px;
  background: #081F5B;
  border-radius: 8px;
  z-index: 1000;
}

.mega-menu.show {
  display: block;
}

.body-content-primary-button{
  background-color: #081F5B;
  color: #FFF;
  border-radius: 8px;
  padding: 10px 25px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.body-content-primary-button:hover, .body-content-primary-button:active{
  background-color: #FFF !important;
  color: #081F5B;
}

.btn.body-content-secondary-button.disabled{
  background-color: #D9D9D9 !important;
  color: #6B6D77;
}

.body-content-secondary-button{
  background-color: #20538A;
  color: #FFF;
  border-radius: 8px;
  padding: 10px 25px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.body-content-secondary-button:hover, .body-content-secondary-button:active{
  background-color: #081F5B !important;
}

.btn.body-content-secondary-button.disabled{
  background-color: #D9D9D9 !important;
  color: #6B6D77;
}

.body-content-tertiary-button{
  background-color: #FFF;
  color: #081F5B;
  border-radius: 8px;
  padding: 10px 25px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.body-content-tertiary-button:hover, .body-content-tertiary-button:active{
  background-color: #20538A !important;
  color: #FFF;
}

.btn.body-content-tertiary-button.disabled{
  background-color: #D9D9D9 !important;
  color: #6B6D77;
}


/* WhatsApp Button Styles */
.whatsapp-float {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-float:hover {
    background-color: #36c169;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.whatsapp-float:active {
    transform: scale(1.05);
}

/* WhatsApp Icon */
.whatsapp-icon {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* Pulse animation (optional) */
.whatsapp-float.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Tooltip (optional) */
.whatsapp-float::before {
    content: "¿En que te podemos ayudar?";
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.whatsapp-float::after {
    content: "";
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid #333;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.whatsapp-float:hover::before,
.whatsapp-float:hover::after {
    opacity: 1;
}

.img-fluid-md-up {
  max-width: none;
  height: auto;
}



/* Mensaje de Cookies */
.cc-cookies {
  background-color:#081F5B;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  padding: 10px 5%;
  position: fixed;
  height: 160px;
  width: 100%;
  z-index: 99999;
}
.cc-cookies a.cc-cookie-accept,
.cc-cookies a.cc-cookie-decline {
  background-color:#7396BE;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  width: 185px;
  height: 43px;
}
.cc-cookies a.cc-cookie-accept {
  background-color:#FFFFFF;
  color:#081F5B;
  margin-left: 32px;
}
.cc-cookies > p {
  margin-bottom: 0;
  margin-right: 45px;
}
.cc-cookies > p > .liga {
  color: #FFFFFF;
}
.cc-cookies .sprite.icon-bandera-blanca {
  margin-right: 63px;
}

/* Blue informative table*/
.table-informative-blue tr td {
  background-color: #081F5B;
  color: #FFFFFF;
}

.rainbow-title {
  background: linear-gradient(
    90deg,
    #406DE2 4.61%,
    rgba(239, 50, 56, 0.67) 36.25%,
    #8CC0FF 70.19%,
    #406DE2 100%
  );
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
  background-clip: text; 
  color: transparent; 
}

.round-blue-numbers{
  background-color: #081F5B;
  color: #FFFFFF;
  font-size: 16px;
  height:25px;
  width:25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3px;
}

/* Fees */
.fees-section{
  background-image: url('../img/fees-background.png');
  background-repeat: no-repeat;
  background-size:100%;
  min-height: 80px;
  padding-top: 8rem;
}

.fees-desc{
  font-size: 20px;
  color: #000;
  font-weight: 400;
  line-height: 1.4rem;
}
.fees-desc-gray{
  font-size: 20px;
  color: #6B6D77;
  font-weight: 400;
  line-height: 1.4rem;
}
.fees-data-table .tabla-datos {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.fees-data-table .tabla-datos thead{
  background-color: #081F5B;
  color: #FFF;
  border-bottom: 10px solid #FFF;
}

.fees-data-table .tabla-datos thead th{
  border: none; 
  border-right: 1px solid #ddd;
  padding:5px;
}

.fees-data-table .tabla-datos tbody{
  color: #6B6D77;
  font-size: 16px;
  font-weight: 400;
}

.fees-data-table .tabla-datos tbody td{
  border :1px solid #d9d9d9;

}

.fees-data-table .tabla-datos tbody  td:last-child{
  border-right :none;
}

.fees-data-table .tabla-datos tbody  td:first-child{
  border-left :none;
}

.fees-data-table .tabla-datos tr td {
  padding:5px;
}
.texto-cat{
  font-size: 14px;
  font-weight: 400;
  color:#6B6D77;
  line-height: 1.2rem;
}

.fees-linea-horizontal{
  height:2px;
  border:none;
  background-color: #D9D9D9;
}

.fees-blue-table tbody tr td {
  padding:1rem !important;
}
/***********************************/
/* grid en desktop */
@media (min-width: 992px) {
  .our-products-scroll {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: .4rem;
    overflow: visible;
  }
}

/***********************************/
@media(max-width:991px) {
  .cc-cookies {
    flex-direction: column;
    height: auto;
  }
  .cc-cookies .sprite.icon-bandera-blanca {
    margin: 0;
  }
  .cc-cookie-decline {
    margin-bottom: 16px;
  }
  .cc-cookies a.cc-cookie-accept {
    margin-left: 0;
  }
  .navbar-collapse {
      background: #081F5B;
      margin: 1rem .1rem 1rem .1rem;
      padding: 1rem;
      border-radius: 0 0 12px 12px;
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  }

  .navbar .nav-item {
      border-left: none;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #BAD7FF;
  }

  .navbar .nav-item:last-child {
      border-bottom: none;
  }

  .navbar-toggler{
    border: none !important;
  }

  .navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M1 7h39M1 15h29M1 23h29'/%3e%3c/svg%3e");
  }

  .navbar-toggler:focus{
    box-shadow: none !important;
  }

  .navbar .nav-link {
      margin: 0;
      padding: 1rem 0 1rem 2rem;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .navbar .nav-link:hover {
      background-color: rgba(255, 255, 255, 0.0) !important;
      color: #ffffff !important;
  }

  /* Hide desktop mega menus on mobile */
  .mega-menu {
      display: none !important;
  }

  /* Mobile dropdown styles */
  .mobile-dropdown {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.15s ease-in-out;
      margin: 1rem 0;
  }

  .mobile-dropdown.show {
      max-height: 600px;
      padding: 1rem;
  }

  .mobile-dropdown-section {
      margin-bottom: 1.5rem;
  }

  .mobile-dropdown-section:last-child {
      margin-bottom: 0;
  }

  .mobile-dropdown-title {
      color: #BAD7FF;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
  }

  .mobile-dropdown-title img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
  }

  .mobile-dropdown-item {
      color: #ffffff;
      text-decoration: none;
      font-size: 14px;
      line-height: 1.4;
      padding: 0.4rem 0;
      display: block;
      padding-left: 28px;
      position: relative;
      transition: color 0.2s ease;
  }

  .mobile-dropdown-item:hover {
      color: #BAD7FF;
      text-decoration: none;
  }

  .mobile-dropdown-item::before {
      content: "•";
      position: absolute;
      left: 16px;
      color: #BAD7FF;
  }

  .dropdown-separator {
      height: 1px;
      background: linear-gradient(90deg, transparent, #BAD7FF, transparent);
      margin: 1rem 0;
  }

  .chevron-icon {
      transition: transform 0.3s ease;
      font-size: 1.2em;
  }

  .nav-link[aria-expanded="true"] .chevron-icon {
      transform: rotate(90deg);
  }
}

 /**************************************/
/* Apply only on medium (≥768px) and up */
@media (min-width: 768px) {
  .about-asp-img {
    min-width: 380px;
    min-height: 252px;
  }

}

/**************************************/
/* Apply only on small (≥576px) and up */
@media (max-width: 768px) {

  .our-company-background{
  background-image: url('../img/body-our-company-bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 80px;
  }

  .our-services-background{
  background-image: url('../img/body-our-services-bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 80px;
  }

  .about-asp-img {
    width: 100%;
    height: auto;
  }

  .hero-banner{
    height: auto;
    margin-bottom: 20px;
  }

  .hero-banner-info-card{
    transform: translateY(10px);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px); /* soporte Safari */
    max-width: 100%;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
    margin-bottom: 1rem;
    margin-top:1rem;
    position: relative;
  }
  .translate-y-10 {
  transform: translateY(1%) !important;
  }

  .hero-banner-button{
    width: 98%;
  }

  .hero-banner .hero-side {
    display: none;
  }
  .hero-banner .banner-mobile{
    display: inline-block;
  }

  .hero-banner-subtitle {
    font-size: 18px;
  }

  .carousel-indicators{
    position:relative;
    height: 15px;
  }
  .carousel .carousel-indicators button.active {
    background-color:#081F5B;
  }
  .ticker-section ul{
    gap:2rem;
  }
  .ticker-section ul li:not(:last-child)::after {
    right:-1rem;
  }

  .ticker-section ul li {
    text-align: center;
    font-size: 14px;
  }

  .ticker-section ul li span {
    display: block;     /* fuerza a bajar debajo del texto fijo */
    font-size: 14px;    /* opcional: más pequeño en móvil */
  }

  .ticker-section {
    height: auto; /* deja que crezca si son 2 líneas */
    padding: 4px 0; /* un poco de espacio */
  }

  .digital-experience-title{
    font-size: 40px;
  }
  .digital-experience-subtitle{
    font-size: 30px;
  }

  .card-info-tooltip{
    left:50%;
    transform: translateX(-50%);
    min-width: max-content; 
  }

  .whatsapp-float {
      width: 55px;
      height: 55px;
      bottom: 15px;
      right: 15px;
      font-size: 26px;
  }
  
  .whatsapp-icon {
      width: 28px;
      height: 28px;
  }
}
/**************************************/
@media (max-width:576px){
  .digital-experience-title{
    font-size: 24px;
  }
  .digital-experience-subtitle{
    font-size: 24px;
  }
  .img-fluid-md-up {
    max-width: 100%;
    height: auto;
  }
}

/***************************************/
@media (min-width: 1200px) {
  .container-hero-banner{
    max-width: 1240px;
  }

  .hero-banner .hero-side.banner1{
    top: -20px;
    right: 0px;
  }

  .hero-banner .hero-side.banner2{
    top: -20px;
    right: 0px;
  }

  .hero-banner .hero-side.banner3{
    top: -20px;
    left: 10px;
  }

  .hero-banner .hero-side.banner4{
    top: -20px;
    left: 10px;
  }

  .hero-banner .hero-side.banner5{
    top: -20px;
    right:0px;
  }

  .hero-banner .hero-side.banner6{
    top: -20px;
    right: 0px;
  }
}