/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: "Open Sans", sans-serif;
  color: #444444;
  overflow-x: hidden;
}

.img-responsive {
  width: 100%;
}

a {
  color: #40a4df;
  text-decoration: none;
}

a:hover {
  color: #40a4df;
  text-decoration: none;
}

#wrapper .wow {
  opacity: 1 !important;
  visibility: visible !important;
}

#main {
  overflow-y: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
}

.verde {
  color: #40a4df;
  text-transform: uppercase;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #40a4df;
  border-top-color: #d2f9eb;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

html::-webkit-scrollbar {
  width: 0.5rem;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: #40a4df;
  border-radius: 5rem;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  left: 15px;
  bottom: 15px;
  z-index: 996;
  background: #40a4df;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #053c6b;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 80px;
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  background: rgba(3, 59, 106, 0.9);
}

#header.header-transparent {
  background: transparent;
}

#header.header-scrolled {
  background: rgba(3, 59, 106, 0.9);
  height: 60px;
}

#header .logo h1 {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
}

#header .logo h1 a,
#header .logo h1 a:hover {
  color: #fff;
  text-decoration: none;
}

#header .logo img {
  padding: 10px 0;
  margin: 0;
  max-height: 80px;
}

.header-scrolled .logo img {
  max-height: 65px !important;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  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: 15px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar > ul > li > a:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 3px;
  left: 30px;
  background-color: #40a4df;
  visibility: hidden;
  width: 0px;
  transition: all 0.3s ease-in-out 0s;
}

.navbar a:hover:before,
.navbar li:hover > a:before,
.navbar .active:before {
  visibility: visible;
  width: 25px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: #fff;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 30px;
  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;
  border-radius: 4px;
}

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

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #061743;
}

.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: #40a4df;
}

.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;
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(2, 60, 106, 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;
  border-radius: 8px;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
  width: auto !important;
}

.navbar-mobile > ul > li > a:before {
  left: 20px;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #033b6a;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: #033b6a;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  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: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.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: #40a4df;
}

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#hero {
  /* background: linear-gradient(78deg, #ffffff, #1281bf, #0c395d, #ffffff); */
  /* background-size: 400% 400%; */
  /* animation: gradientBG 15s ease infinite; */
  position: relative;
  padding: 120px 0 0 0;
  overflow: hidden;
  background-image: url(../../imagenes/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#hero {
  width: 100%;

  position: relative;
  padding: 120px 0 0 0;
}

#hero .btn-primary-gradient::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(25deg);
  animation: shine 4s infinite;
}

#hero .container {
  position: relative;
  z-index: 3;
}

#hero canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#hero .btn-primary-gradient {
  position: relative;
  overflow: hidden;
}

.contiene-texto {
  margin: 0;
}

@media (max-width: 768px) {
  .contiene-texto {
    margin: 0 auto;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }
  100% {
    transform: translateX(100%) rotate(25deg);
  }
}

#typing {
  white-space: nowrap;
  color: #013f70;
}

#typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: currentColor;
  animation: typing-caret 1s steps(1, end) infinite;
  vertical-align: -0.15em;
}
@keyframes typing-caret {
  50% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  #typing {
    white-space: normal; /* permite que haga wrap */
    word-break: break-word; /* corta palabras largas si es necesario */
    max-width: 300px;
    margin: 0 auto;
  }
}

/* Fondo animado con particles.js clásico */
#particles-js {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#hero h1 {
  margin: 0 0 20px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: rgba(255, 255, 255, 0.8);
}

#hero h1 span {
  color: #fff;
  border-bottom: 4px solid #40a4df;
}

#hero h2 {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
  font-size: 24px;
}

#hero .btn-get-started {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 50px;
  transition: 0.5s;
  color: #fff;
  background: #40a4df;
}

#hero .btn-get-started:hover {
  background: #40a4df;
}

#hero .animado {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@-webkit-keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}

.hero-waves {
  display: block;
  margin-top: 60px;
  width: 100%;
  height: 60px;
  z-index: 5;
  position: relative;
}

.wave1 use {
  -webkit-animation: move-forever1 10s linear infinite;
  animation: move-forever1 10s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave2 use {
  -webkit-animation: move-forever2 8s linear infinite;
  animation: move-forever2 8s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave3 use {
  -webkit-animation: move-forever3 6s linear infinite;
  animation: move-forever3 6s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

@-webkit-keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}

@-webkit-keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

@-webkit-keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: #f5f5ff;
}

.section-title {
  padding-bottom: 40px;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0 0 5px 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #aaaaaa;
  font-family: "Poppins", sans-serif;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: #40a4df;
  margin: 4px 10px;
}

.section-title p {
  margin: 0;
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  color: #033b6a;
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 20px 0;
  background-color: #fafaff;
  min-height: 40px;
  margin-top: 80px;
}

.breadcrumbs h2 {
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li + li {
  padding-left: 10px;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #6c757d;
  content: "/";
}

h3 {
  color: #033b6a;
  margin-bottom: 15px;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about {
  padding: 40px 0 0 0;
  position: relative;
}

section.about:before {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-left-dec.png);
  left: 0px;
  top: -40px;
  width: 593px;
  height: 352px;
  z-index: -1;
}

section.about:after {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-right-dec.png);
  bottom: -40px;
  width: 632px;
  height: 352px;
  z-index: -1;
  right: -52px;
}

.about .icon-boxes h3 {
  color: #033b6a;
  margin-bottom: 15px;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
}

.about .icon-box {
  margin-top: 40px;
}

.about .icon-box .icon {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border: 2px solid #41a4df;
  border-radius: 50px;
  transition: 0.5s;
  margin-bottom: 20px;
}

.about .icon-box .icon i {
  color: #40a4df;
  font-size: 32px;
  color: white;
}

.about .icon-box:hover .icon {
  background: #40a4df;
  border-color: #40a4df;
  color: white;
}

.about .icon-box:hover svg {
  color: white;
}

.about .icon-box:hover .icon i {
  color: #fff;
}

.about .icon-box:hover .icon svg {
  color: #fff;
}

.about .icon-box .title {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 18px;
}

.about .icon svg {
  color: #38aad7;
  width: 48px;
  height: 48px;
  font-weight: 400;
}

.about .icon:hover svg,
.about .icon:active svg,
.about .icon:focus svg {
  color: white;
}

.about .icon-box .title a {
  color: #343a40;
  transition: 0.3s;
}

.about .icon-box .title a:hover {
  color: #40a4df;
}

.about .icon-box .description {
  line-height: 24px;
  font-size: 14px;
}

.about .video-box {
  background: url("../img/about.png") center center no-repeat;
  background-size: contain;
  min-height: 300px;
}

.about .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(#033b6a 50%, rgba(63, 67, 253, 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.about .play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.about .play-btn::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate-btn 2s;
  animation: pulsate-btn 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(63, 67, 253, 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.about .play-btn:hover::after {
  border-left: 15px solid #033b6a;
  transform: scale(20);
}

.about .play-btn:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  -webkit-animation: none;
  animation: none;
  border-radius: 0;
}

@-webkit-keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

.icon-box {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features {
  position: relative;
}

section.features:before {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-left-dec.png);
  left: 0px;
  top: -40px;
  width: 593px;
  height: 352px;
  z-index: -1;
}

section.features:after {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-right-dec.png);
  right: 0px;
  bottom: -40px;
  width: 632px;
  height: 352px;
  z-index: -1;
}

.features .icon-box {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f5f5ff;
  transition: ease-in-out 0.3s;
  justify-content: center;
  align-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
}

.features .icon-box i {
  font-size: 32px;
  padding-right: 10px;
  line-height: 1;
}

.features .icon-box h3 {
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 16px;
}

.features .icon-box h3 a {
  color: #033b6a;
  transition: ease-in-out 0.3s;
}

.features .icon-box h3 a:hover {
  color: #061743;
}

.features .icon-box:hover {
  background: #ebebff;
}

/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
  background: #f5f5ff;
  padding: 70px 0 60px;
}

.counts .count-box {
  padding: 30px 30px 25px 30px;
  width: 100%;
  position: relative;
  text-align: center;
  background: #fff;
}

.counts .count-box i {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  background: #40a4df;
  padding: 12px;
  color: #fff;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: 48px;
  height: 48px;
}

.counts .count-box span {
  font-size: 36px;
  display: block;
  font-weight: 600;
  color: #033b6a;
}

.counts .count-box p {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
}

/*--------------------------------------------------------------
# Details
--------------------------------------------------------------*/
.details .content + .content {
  margin-top: 100px;
}

.details .content h3 {
  font-weight: 600;
  font-size: 26px;
  color: #033b6a;
}

.details .content ul {
  list-style: none;
  padding: 0;
}

.details .content ul li {
  padding-bottom: 10px;
}

.details .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #40a4df;
}

.details .content p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/
.gallery .gallery-item {
  overflow: hidden;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.gallery .gallery-item img {
  transition: all ease-in-out 0.4s;
}

.gallery .gallery-item:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials {
  padding: 80px 0;
  background: url("../img/cta-bg.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}

.testimonials::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(6, 23, 67, 0.8);
}

.testimonials .section-header {
  margin-bottom: 40px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  text-align: center;
  color: #fff;
}

.testimonials .testimonial-item .testimonial-img {
  width: 100px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.15);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #fff;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #ddd;
  margin: 0 0 15px 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: rgba(255, 255, 255, 0.4);
  font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
  color: #eee;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.4);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #40a4df;
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
  background: #fff;
}

.team .member {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.team .member .pic {
  border-radius: 4px;
  overflow: hidden;
}

.team .member img {
  transition: all ease-in-out 0.4s;
}

.team .member:hover img {
  transform: scale(1.1);
}

.team .member .member-info {
  position: absolute;
  bottom: -80px;
  left: 0px;
  right: 0px;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.team .member h4 {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 16px;
  color: #061743;
  position: relative;
  padding-bottom: 10px;
}

.team .member h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: #0d12fc;
  bottom: 0;
  left: calc(50% - 25px);
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: #061743;
}

.team .member .social {
  margin-top: 10px;
}

.team .member .social a {
  transition: color 0.3s;
  color: #061743;
}

.team .member .social a:hover {
  color: #40a4df;
}

.team .member .social i {
  font-size: 16px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
  padding: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.pricing h3 {
  font-weight: 400;
  margin: -20px -20px 20px -20px;
  padding: 20px 15px;
  font-size: 16px;
  font-weight: 600;
  color: #777777;
  background: #f8f8f8;
}

.pricing h4 {
  font-size: 36px;
  color: #40a4df;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: 20px;
}

.pricing h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing h4 span {
  color: #bababa;
  font-size: 16px;
  font-weight: 300;
}

.pricing ul {
  padding: 0;
  list-style: none;
  color: #444444;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing ul li {
  padding-bottom: 16px;
}

.pricing ul i {
  color: #40a4df;
  font-size: 18px;
  padding-right: 4px;
}

.pricing ul .na {
  color: #ccc;
  text-decoration: line-through;
}

.pricing .btn-wrap {
  margin: 20px -20px -20px -20px;
  padding: 20px 15px;
  background: #f8f8f8;
  text-align: center;
}

.pricing .btn-buy {
  background: #40a4df;
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 50px;
  color: #fff;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  transition: 0.3s;
}

.pricing .btn-buy:hover {
  background: #149f6e;
}

.pricing .featured h3 {
  color: #fff;
  background: #40a4df;
}

.pricing .advanced {
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
  background: #40a4df;
  color: #fff;
}

/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq .faq-list {
  padding: 0;
}

.faq .faq-list ul {
  padding: 0;
  list-style: none;
}

.faq .faq-list li + li {
  margin-top: 15px;
}

.faq .faq-list li {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  position: relative;
}

.faq .faq-list a {
  display: block;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding: 0 30px;
  outline: none;
  cursor: pointer;
}

.faq .faq-list .icon-help {
  font-size: 24px;
  position: absolute;
  right: 0;
  left: 20px;
  color: #40a4df;
}

.faq .faq-list .icon-show,
.faq .faq-list .icon-close {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
}

.faq .faq-list p {
  margin-bottom: 0;
  padding: 10px 0 0 0;
}

.faq .faq-list .icon-show {
  display: none;
}

.faq .faq-list a.collapsed {
  color: #343a40;
}

.faq .faq-list a.collapsed:hover {
  color: #40a4df;
}

.faq .faq-list a.collapsed .icon-show {
  display: inline-block;
}

.faq .faq-list a.collapsed .icon-close {
  display: none;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
  width: 100%;
  background: #fff;
}

.contact .info i {
  font-size: 20px;
  color: #033b6a;
  float: left;
  width: 44px;
  height: 44px;
  background: #f0f0ff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #033b6a;
}

.contact .info p {
  padding: 0 0 0 60px;
  margin-bottom: 0;
  font-size: 14px;
  color: #033b6a;
}

.contact .info .email,
.contact .info .phone {
  margin-top: 40px;
}

.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i {
  background: #40a4df;
  color: #fff;
}

.contact .php-email-form {
  width: 100%;
  background: #fff;
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br + br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

.contact .php-email-form input {
  height: 44px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
}

.contact .php-email-form button[type="submit"] {
  background: #40a4df;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type="submit"]:hover {
  background: #40a4df;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #013c6a;
  padding: 0 0 30px 0;
  color: #fff;
  font-size: 14px;
  position: relative;
  z-index: 20;
}

#footer .footer-top {
  padding: 60px 0 0px 0;
}

#footer .footer-top .footer-info {
  margin-bottom: 15px;
  background: #013c6a;
  color: #fff;
  text-align: center;
  padding: 0px 20px;
}

#footer .footer-top .footer-info h3 {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}

#footer .footer-top .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Montserrat", sans-serif;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #40a4df;
  color: #fff;
  text-decoration: none;
}

#footer .footer-top h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #61ebba;
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: #fff;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
  color: #4be8b0;
  letter-spacing: 1px;
  box-shadow: none;
}

#footer .footer-top .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px 6px 15px;
  position: relative;
  border-radius: 50px;
}

#footer .footer-top .footer-newsletter form input[type="email"] {
  border: 0;
  padding: 4px;
  width: calc(100% - 110px);
}

#footer .footer-top .footer-newsletter form input[type="submit"] {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #40a4df;
  color: #fff;
  transition: 0.3s;
  border-radius: 50px;
}

#footer .footer-top .footer-newsletter form input[type="submit"]:hover {
  background: #013c6a;
}

#footer .copyright {
  border-top: 1px solid #010479;
  text-align: center;
  padding-top: 30px;
}

#footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #fff;
}

#footer p,
#footer ul,
#footer li {
  width: 100% !important;
}

.btn.btn-primary-gradient,
.btn.btn-secondary-gradient::after {
  background: linear-gradient(to bottom right, #4ccef5, #07508b);
}

.btn.btn-primary-gradient,
.btn.btn-secondary-gradient {
  position: relative;
  overflow: hidden;
  border: none;
  color: #ffffff;
  z-index: 1;
  margin-bottom: 5px;
}

.btn-secondary {
  position: relative;
  overflow: hidden;
  border: 1px solid white;
  color: #ffffff;
  z-index: 1;
  margin-bottom: 5px;
  background: transparent;
}

.btn-terciary {
  position: relative;
  overflow: hidden;
  border: 1px solid white;
  color: #07508b;
  z-index: 1;
  background-color: white;
  margin-bottom: 5px;
}

.btn-terciary:hover,
.btn-terciary:active,
.btn-terciary:focus {
  border: 1px solid white;
  text-decoration: none !important;
  color: white;
  background: linear-gradient(to bottom right, #4ccef5, #07508b);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  border: 1px solid white;
  background: #3cb1dd;
  text-decoration: none !important;
}

.navbar > ul > li > a.btn.btn-primary-gradient:before,
.navbar > ul > li > a.btn.btn-secondary:before {
  display: none;
}

.apps a img {
  max-height: 50px;
  margin-right: 15px;
}

@keyframes lightning {
  0%,
  50%,
  100% {
    box-shadow: 0 0 5px #fff;
  }

  25% {
    box-shadow: 0 0 20px #fff;
  }

  75% {
    box-shadow: 0 0 30px #fff, 0 0 50px #fff;
  }
}

.btn-effect-7:hover {
  animation: lightning 1.5s infinite;
}

.btn-effect-17::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 300%;
  height: 300%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: transform 0.5s ease-out;
  z-index: 0;
}

.btn-effect-17:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.scrolldown {
  position: absolute;
  left: 0%;
  bottom: 12%;
}

.scrolldown .scroll {
  border-radius: 100px;
  width: 25px;
  height: 45px;
  position: absolute;
  left: 50%;
  margin: 0 0 0 -15px;
  display: inline-block;
  border: 1px solid #fff;
  z-index: 99;
}

.scrolldown .scroll:after {
  background: #fff;
  border-radius: 300px;
  width: 4px;
  height: 9px;
  position: absolute;
  top: 10px;
  left: 50%;
  margin: 0 0 0 -2px;
  display: block;
  content: " ";
  -webkit-animation: wiggle 0.5s linear 0s infinite alternate;
  -moz-animation: wiggle 0.5s linear 0s infinite alternate;
  -o-animation: wiggle 0.5s linear 0s infinite alternate;
  animation: wiggle 0.5s linear 0s infinite alternate;
}

/* animation keyfrem */
@-webkit-keyframes wiggle {
  from {
    top: 10px;
  }

  to {
    top: 20px;
  }
}

@-moz-keyframes wiggle {
  from {
    top: 10px;
  }

  to {
    top: 20px;
  }
}

@-o-keyframes wiggle {
  from {
    top: 10px;
  }

  to {
    top: 20px;
  }
}

@keyframes wiggle {
  from {
    top: 10px;
  }

  to {
    top: 20px;
  }
}

.gradient-text {
  background: linear-gradient(90deg, #40a4df 0, #013f70 60%);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  -webkit-text-fill-color: #fff0;
}

.gradient-text-white {
  background: linear-gradient(90deg, #0480c9 0, #8ad3fd 60%);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  -webkit-text-fill-color: #fff0;
}

/* Flip button para índices */

:root {
  --shadow: 0px 4px 8px 0 rgba(21, 21, 21, 0.2);
}

/*#indices*/

/* ====== ESTILOS SECTION INDICES ====== */
#indices {
  position: relative;
  padding: 60px 0;
  background-image: url(../../imagenes/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  overflow: hidden;
}

/* Títulos */
#indices h3,
#indices h4 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
  line-height: 1.5;
}

#indices p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #f1f1f1;
}

#indices .chart-slide h4,
#indices .chart-slide p {
  color: #043c70 !important;
}

#indices .btn {
  font-size: 0.9rem;
  padding: 10px 25px;
  border-radius: 50px;
}

/* Grilla principal */
#indices .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 992px) {
  #indices .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

/* Cards */
#indices .investment-card-left .relative {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
  overflow: visible;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

#indices .investment-card-right .relative {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(15px);
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);
  transition: all 0.5s ease;
  overflow: visible;
  min-height: 560px;
  display: flex;
  flex-direction: column;
}

#indices .investment-card-left .relative:hover,
#indices .investment-card-right .relative:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Logos flotantes */
#indices .bouncing-logo {
  animation: bounce 4s infinite ease-in-out;
  color: #000;
  box-shadow: 0 4px 12px #00000026, 0 0 0 1px #ffffff1a;
  border-radius: 9999px;
  width: 3rem;
  height: 3rem;
  font-size: 10px;
  position: absolute;
}
#indices .bouncing-logo img {
  width: 100%;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

#indices #logos-container .bouncing-logo:nth-child(1) {
  animation-delay: 0s;
}
#indices #logos-container .bouncing-logo:nth-child(2) {
  animation-delay: 0.3s;
}
#indices #logos-container .bouncing-logo:nth-child(3) {
  animation-delay: 0.6s;
}
#indices #logos-container .bouncing-logo:nth-child(4) {
  animation-delay: 0.9s;
}
#indices #logos-container .bouncing-logo:nth-child(5) {
  animation-delay: 1.2s;
}
#indices #logos-container .bouncing-logo:nth-child(6) {
  animation-delay: 1.5s;
}
#indices #logos-container .bouncing-logo:nth-child(7) {
  animation-delay: 1.8s;
}
#indices #logos-container .bouncing-logo:nth-child(8) {
  animation-delay: 2.1s;
}
#indices #logos-container .bouncing-logo:nth-child(9) {
  animation-delay: 2.4s;
}
#indices #logos-container .bouncing-logo:nth-child(10) {
  animation-delay: 2.7s;
}

/* Carousel derecho */
#indices #chart-carousel {
  position: relative;
  flex: 1;
  background: transparent !important;
  border: 0px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#indices .chart-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  flex-direction: column;
}

/* #indices .chart-slide:nth-child(1) {
  animation: carousel 12s infinite;
  animation-delay: 0s;
}
#indices .chart-slide:nth-child(2) {
  animation: carousel 12s infinite;
  animation-delay: 4s;
} */
/* #indices .chart-slide:nth-child(3) {
  animation: carousel 12s infinite;
  animation-delay: 8s;
} */

@keyframes carousel {
  0%,
  30% {
    opacity: 1;
  }
  33%,
  100% {
    opacity: 0;
  }
}

#indices .chart-slide:first-child {
  opacity: 1;
}

/* TERMINA INDICES */

/*MEDIA QUERIES*/

@media (max-width: 992px) {
  #click:checked ~ ul {
    left: 0;
  }

  .left h2 {
    font-size: 40px;
  }

  .left h2 span {
    font-size: 42px;
  }

  .left p {
    font-size: 14px;
  }

  .card-3d-wrap {
    width: 350px;
  }
}

@media (max-width: 768px) {
  .left,
  .right {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .left {
    display: grid;
    place-items: center;
  }

  .left h2 {
    text-align: center;
  }
}

@media (max-width: 400px) {
  .left h2 {
    font-size: 28px;
  }

  .left h2 span {
    font-size: 30px;
  }

  .card-3d-wrap {
    width: 300px;
  }
}

.top-light {
  position: absolute;
  left: 0;
  right: 0;
  top: -42px;
  margin: auto;
  width: 284px;
  height: 6px;
  border-radius: 10px;
  background: #fffef9;
  box-shadow: 0 0px 1px 1px #40a4df, 0 0px 2px 1px #40a4df,
    0 2px 6px 1px #40a4df, 0 4px 12px 0px #40a4df, 0 12px 20px 10px #40a4df;
}

@keyframes rotate360 {
  to {
    rotate: 360deg;
  }
}

@keyframes wobble {
  0% {
    transform: translateX(10px) translateY(20px) rotate(-3deg) scale(1);
  }

  20% {
    transform: translateX(-44px) translateY(-8px) rotate(6deg) scale(1.02);
  }

  60% {
    transform: translateX(32px) translateY(18px) rotate(-8deg) scale(1);
  }

  80% {
    transform: translateX(-42px) translateY(-22px) rotate(12deg) scale(0.94);
  }

  100% {
    transform: translateX(10px) translateY(20px) rotate(-3deg) scale(1);
  }
}

.accents {
  user-select: none;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 20%;
}

.acc-card {
  width: 457px;
  height: 500px;
  background: #eee1;
  opacity: 0.8;
  z-index: -1;
  position: absolute;
  left: -18px;
  right: 0;
  top: -10%;
  margin: auto;
  border-radius: 16px;
  box-shadow: inset 0 2px 2px 0 #e0c9b266, inset 0 -2px 2px 0 #0004;
  backdrop-filter: blur(4px);
  transition: all 0.1s linear;
  transform-origin: 20% 80%;
}

.acc-card:nth-child(1) {
  animation: wobble 18s ease-in-out infinite;
}

.acc-card:nth-child(2) {
  animation: wobble 22s ease-in-out -6s infinite reverse;
}

.acc-card:nth-child(3) {
  animation: wobble 26s ease-in-out -18s infinite;
}

.light {
  --bgref: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487 487'%3E%3Ccircle cx='243' cy='243.5' r='233' style='fill:none; opacity:.1; stroke:%23aaa; stroke-linecap:round; stroke-miterlimit:10; stroke-width:18px;'/%3E%3Ccircle cx='243.5' cy='243.5' r='243' style='fill:none; stroke:%23111; stroke-linecap:round; stroke-miterlimit:10;'/%3E%3Ccircle cx='243' cy='243.5' r='222' style='fill:none; stroke:%23111; stroke-linecap:round; stroke-miterlimit:10;'/%3E%3Cpath d='m10,243.5C10,114.82,114.32,10.5,243,10.5' style='fill:none; stroke:%23ddd; stroke-linecap:round; stroke-miterlimit:10; stroke-width:18px;'/%3E%3C/svg%3E");
  position: absolute;
  left: --85px;
  right: calc(0% + 300px);
  top: 264px;
  margin: auto;
  width: 164px;
  height: 164px;
  z-index: -2;
  background-image: var(--bgref);
  animation: rotate360 22s linear infinite;
}

.light::before,
.light::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: var(--bgref);
  filter: blur(3px);
  scale: 1.01;
}

.light::after {
  filter: blur(8px);
}

.light.sm {
  width: 100px;
  height: 100px;
  left: calc(0% + 385px);
  right: 0;
  top: 62px;
  bottom: 0;
  animation: rotate360 18s linear -10s infinite;
}

@media screen and (max-width: 600px) {
  .acc-card {
    height: 480px !important;
    width: 300px !important;
    left: 5% !important;
  }

  .accents {
    top: 30%;
  }

  .light,
  .light.sm {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  h3.gradient-text {
    font-size: 35px !important;
    line-height: 1.2 !important;
  }
  h3.gradient-text-white {
    font-size: 35px !important;
    line-height: 1.2 !important;
  }
}

/* Comienza carousel de beneficios */

.beneficios {
  background: linear-gradient(-45deg, #0173b1, #024578, #1a66a2, #40a4df);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  position: relative;
  overflow: hidden;
}

:root {
  --glow-primary: rgba(56, 189, 248, 0.7);
  --glow-secondary: rgba(94, 234, 212, 0.6);
  --neon-pink: rgba(236, 72, 153, 0.8);
  --neon-blue: rgba(59, 130, 246, 0.8);
  --neon-green: rgba(16, 185, 129, 0.8);
}

@keyframes gridMove {
  0% {
    background-position: 0px 0px;
    opacity: 0.5;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    background-position: 40px 40px;
    opacity: 0.5;
  }
}

.carousel-container {
  width: 100%;
  max-width: 1100px;
  position: relative;
  perspective: 2000px;
  padding: 3rem 0;
  z-index: 10;
}

.carousel-track {
  display: flex;
  transition: transform 0.75s cubic-bezier(0.21, 0.61, 0.35, 1);
  transform-style: preserve-3d;
}

.carousel-card {
  min-width: 320px;
  max-width: 320px;
  margin: 0 25px;
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.85),
    rgba(15, 23, 42, 0.9)
  );
  border-radius: 1.2rem;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5), 0 0 30px rgba(56, 189, 248, 0.2);
  transition: all 0.6s cubic-bezier(0.21, 0.61, 0.35, 1);
  transform-origin: center center;
  position: relative;
  border: 1px solid rgba(94, 234, 212, 0.2);
}

/* Holographic border effect */
.carousel-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    45deg,
    transparent 0%,
    var(--neon-blue) 25%,
    var(--neon-green) 50%,
    var(--neon-pink) 75%,
    transparent 100%
  );
  z-index: -1;
  border-radius: 1.3rem;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: borderGlow 6s linear infinite;
}

@keyframes borderGlow {
  0% {
    background-position: 0% 50%;
    opacity: 0.3;
  }

  50% {
    background-position: 100% 50%;
    opacity: 0.5;
  }

  100% {
    background-position: 0% 50%;
    opacity: 0.3;
  }
}

.carousel-card.is-active::before {
  opacity: 1;
  background-size: 300% 300%;
}

.carousel-card:not(.is-active) {
  transform: scale(0.8) rotateY(35deg) translateZ(-100px);
  opacity: 0.45;
  filter: saturate(0.6) brightness(0.7);
}

.carousel-card.is-prev {
  transform-origin: right center;
  transform: scale(0.75) rotateY(45deg) translateX(-80px) translateZ(-150px);
}

.carousel-card.is-next {
  transform-origin: left center;
  transform: scale(0.75) rotateY(-45deg) translateX(80px) translateZ(-150px);
}

.carousel-card.is-active {
  transform: scale(1) rotateY(0) translateZ(0);
  opacity: 1;
  z-index: 20;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 40px var(--glow-primary),
    inset 0 0 20px rgba(56, 189, 248, 0.1);
  filter: saturate(1.2) brightness(1.1);
}

.card-image-container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

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

.items-center {
  align-items: center;
}

.w-16 {
  width: 4rem;
}

.flex {
  display: flex;
}

.h-16 {
  height: 4rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.5s ease;
}

.carousel-card.is-active .card-image {
  transform: scale(1.05);
}

/* HUD overlay effect on images */
.card-image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.1), transparent 70%),
    radial-gradient(
      circle at 80% 20%,
      rgba(94, 234, 212, 0.15),
      transparent 50%
    );
  pointer-events: none;
}

/* Scan line effect */
.card-image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(6, 182, 212, 0.05) 0px,
    rgba(6, 182, 212, 0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
  opacity: 0.5;
  z-index: 5;
}

.card-content {
  padding: 1.75rem;
  color: #f1f5f9;
}

.carousel-card.is-active .card-title::after {
  opacity: 0.8;
}

/* Futuristic navigation buttons */
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(12, 74, 110, 0.3);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.4);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}

.carousel-button:hover {
  background-color: rgba(14, 165, 233, 0.3);
  color: #e0f2fe;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

.carousel-button:active {
  transform: translateY(-50%) scale(0.95);
}

/* Button hover effect */
.carousel-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(circle, var(--neon-blue), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.carousel-button:hover::before {
  opacity: 0.7;
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

.carousel-button.prev {
  left: -24px;
}

.carousel-button.next {
  right: -24px;
}

/* Indicator dots */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
}

.indicator {
  width: 24px;
  height: 4px;
  background: rgba(56, 189, 248, 0.2);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

/* Tech details overlay */
.tech-details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.21, 0.61, 0.35, 1);
  z-index: 25;
}

.carousel-card.is-active:hover .tech-details {
  transform: translateY(0);
}

.is-far-next {
  transform: scale(0.8) rotateY(-45deg) translateZ(-100px) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .carousel-button {
    width: 40px;
    height: 40px;
  }

  .carousel-button.prev {
    left: 5px;
  }

  .carousel-button.next {
    right: 5px;
  }

  .carousel-card {
    min-width: 260px;
    max-width: 260px;
    margin: 0 15px;
  }

  .carousel-card:not(.is-active) {
    transform: scale(0.85) rotateY(25deg);
  }

  .carousel-card.is-prev {
    transform: scale(0.8) rotateY(30deg) translateX(-40px);
  }

  .carousel-card.is-next {
    transform: scale(0.8) rotateY(-30deg) translateX(40px);
  }
}

.p-8 {
  padding: 2rem 2rem 4rem 2rem;
}

.p-8 .icono {
  border-radius: 25px;
}

.p-8 .icono.celeste {
  background-color: #47b4f9;
}

.p-8 .icono.verde {
  background-color: #42da87;
}

.p-8 .icono.naranja {
  background-color: #fbb22c;
}

.p-8 .icono.violeta {
  background-color: #938af9;
}

.p-8 .icono.rosa {
  background-color: #ee77de;
}

.p-8 h3 {
  font-size: 24px;
  line-height: 1.5;
}

.p-8 p {
  color: white;
}

/* Comienza institucional */

.institucional {
  position: relative;
  padding: 40px 0;
}

section.institucional:before {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-left-dec.png);
  left: 0px;
  top: -40px;
  width: 593px;
  height: 352px;
  z-index: -1;
}

section.institucional:after {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-right-dec.png);
  right: -40px;
  bottom: -40px;
  width: 632px;
  height: 352px;
  z-index: -1;
}

#slider {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

.slider-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 5;
  padding: 20px;
}

/* Columnas: izquierda (textos) y derecha (pedro) */
.slider-inner .col-left {
  width: 40%;
}

.slider-inner .col-right {
  width: 70%;
  position: relative;
}

/* Contenido slider */
#slider-content {
  position: relative;
  z-index: 10;
  color: white;
  text-align: left;
}

#slider-content h2 {
  background: linear-gradient(90deg, #40a4df 0, #013f70 60%);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  -webkit-text-fill-color: #fff0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  margin: 20px 0 60px;
}

@media screen and (min-width: 800px) {
  #slider-content h2 {
    font-size: 48px;
    line-height: 56px;
  }
}

#slider-content p,
#slider-content ul,
#slider-content li {
  color: #444444;
  padding-right: 5%;
}

#slider-content ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  display: flex;
}

#slider-content ul li i {
  background: linear-gradient(90deg, #40a4df 0, #218fe8 60%);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  -webkit-text-fill-color: #fff0;
  font-size: 18px;
  font-weight: 700;
}

#slider-content span {
  display: none;
}

#slider-content .meta {
  font-family: "Arial", sans-serif;
  font-size: 11px;
  letter-spacing: 5px;
  color: #88888a;
  text-transform: uppercase;
  position: relative;
}

@media screen and (min-width: 800px) {
  #slider-content .meta {
    font-size: 13px;
  }
}

#slider-content .meta:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  right: -55px;
  width: 45px;
  height: 2px;
  background-color: #393d40;
}

#slider-content #slide-status {
  margin-top: 10px;
  font-size: 18px;
  color: #40a4df;
  text-transform: uppercase;
  font-weight: 600;
}

@media screen and (min-width: 800px) {
  #slider-content #slide-status {
    font-size: 18px;
    color: #40a4df;
    text-transform: uppercase;
    font-weight: 600;
  }
}

@media screen and (max-height: 900px) {
  #slider {
    height: 100vh;
  }
}

@media screen and (max-height: 800px) {
  #slider {
    height: 100vh;
  }
}

@media screen and (max-height: 600px) {
  #slider {
    height: 160vh;
  }
}

@media screen and (max-height: 400px) {
  #slider {
    height: 250vh;
  }
}

@media screen and (max-height: 200px) {
  #slider {
    height: 350vh;
  }
}

/* Paginación */
#pagination {
  z-index: 20;
  position: absolute;
}

#pagination button {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  margin: 30px 0;
  padding: 0;
  background: #208fe7;
  opacity: 0.2;
  cursor: pointer;
  outline: none;
  position: relative;
}

#pagination button:hover {
  opacity: 0.5;
}

#pagination button.active {
  opacity: 1;
}

#pagination button:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(108, 230, 93, 0.3);
  opacity: 0;
  transition: all 0.4s ease-in-out;
}

#pagination button.active:before {
  width: 300%;
  height: 300%;
  opacity: 1;
}

/* Contenedor pedro */
#pedro {
  position: relative;
  top: 0%;
  right: -100px;
  transform: translateY(0%);
  width: 100%;
  height: 650px;
  overflow: hidden;
  z-index: 15;
}

#pedro canvas {
  display: block;
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Media query para móviles */
@media screen and (max-width: 768px) {
  .slider-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 10px;
  }

  .slider-inner .col-left {
    width: 100%;
    order: 2;
    margin-bottom: 30px;
  }

  .slider-inner .col-right {
    width: 100%;
    order: 3;
    height: 600px; /* Altura fija controlada para mobile */
    margin-top: 0;
  }

  #pagination {
    order: 1;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: row;
  }

  #pagination button {
    margin: 0 10px;
  }

  #slider {
    height: auto; /* Altura automática */
    padding: 20px 0;
  }

  #slider-content {
    width: 100%;
    margin: 0;
    position: relative;
    top: 0;
    transform: none;
  }

  #slider-content h2 {
    font-size: 36px;
    line-height: 44px;
  }

  #slider-content p,
  ul,
  li {
    width: 100%;
  }

  #slider-content ul {
    flex-direction: column;
  }

  #pedro {
    width: 100%;
    height: 600px; /* Altura controlada */
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #pedro canvas {
    position: absolute !important;
    max-width: 90% !important;
    max-height: 90% !important;
    width: auto !important;
    height: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* =======================================
   Noticias - Fondo animado y tarjetas
   ======================================= */

.noticias {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.text-container {
  position: relative;
  width: 100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  pointer-events: auto;
}

.text-inner {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* =======================================
   Variables de color y animaciones
   ======================================= */
:root {
  --color-card: #111111;
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-border: rgba(255, 255, 255, 0.1);
  --primary-red: #ff6b6b;
  --glow-blur: 60px;
}

@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveVertical {
  0% {
    transform: translateY(-50%);
  }

  50% {
    transform: translateY(50%);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes moveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }

  50% {
    transform: translateX(50%) translateY(10%);
  }

  100% {
    transform: translateX(-50%) translateY(-10%);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.3;
    transform: scale(0.9);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }

  100% {
    opacity: 0.3;
    transform: scale(0.9);
  }
}

/* =======================================
   Fondo animado
   ======================================= */
.gradient-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(40deg, rgb(1 60 106), rgb(1 60 106));
  overflow: hidden;
}

.gradients-container {
  filter: url(#goo) blur(40px);
  width: 100%;
  height: 100%;
}

.g1,
.g2,
.g3,
.g4,
.g5,
.interactive {
  position: absolute;
  mix-blend-mode: hard-light;
  opacity: 1;
}

.g1 {
  background: radial-gradient(
    circle at center,
    rgba(18, 113, 255, 0.8) 0,
    rgba(18, 113, 255, 0) 50%
  );
  width: 80%;
  height: 80%;
  top: calc(50% - 40%);
  left: calc(50% - 40%);
  transform-origin: center;
  animation: moveVertical 30s ease infinite;
}

.g2 {
  background: radial-gradient(
    circle at center,
    rgba(221, 74, 255, 0.8) 0,
    rgba(221, 74, 255, 0) 50%
  );
  width: 80%;
  height: 80%;
  top: calc(50% - 40%);
  left: calc(50% - 40%);
  transform-origin: calc(50% - 400px);
  animation: moveInCircle 20s reverse infinite;
}

.g3 {
  background: radial-gradient(
    circle at center,
    rgba(100, 220, 255, 0.8) 0,
    rgba(100, 220, 255, 0) 50%
  );
  width: 80%;
  height: 80%;
  top: calc(50% - 40% + 200px);
  left: calc(50% - 40% - 500px);
  transform-origin: calc(50% + 400px);
  animation: moveInCircle 40s linear infinite;
}

.g4 {
  background: radial-gradient(
    circle at center,
    rgba(200, 50, 50, 0.8) 0,
    rgba(200, 50, 50, 0) 50%
  );
  width: 80%;
  height: 80%;
  top: calc(50% - 40%);
  left: calc(50% - 40%);
  transform-origin: calc(50% - 200px);
  animation: moveHorizontal 40s ease infinite;
  opacity: 0.7;
}

.g5 {
  background: radial-gradient(
    circle at center,
    rgba(180, 180, 50, 0.8) 0,
    rgba(180, 180, 50, 0) 50%
  );
  width: 160%;
  height: 160%;
  top: calc(50% - 80%);
  left: calc(50% - 80%);
  transform-origin: calc(50% - 800px) calc(50% + 200px);
  animation: moveInCircle 20s ease infinite;
}

.interactive {
  background: radial-gradient(
    circle at center,
    rgba(140, 100, 255, 0.8) 0,
    rgba(140, 100, 255, 0) 50%
  );
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  opacity: 0.7;
}

/* =======================================
   Contenido de tarjetas
   ======================================= */

#noticias .magnetic-glow-demo {
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

#noticias .card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 cards por fila */
  gap: 2rem;
}

#noticias .icono {
  border-radius: 25px;
  border: 4px solid rgba(255, 255, 255, 0.45);
}

#noticias .icono.celeste {
  background-color: #47b4f9;
}

#noticias .icono.rosa {
  background-color: #ee77de;
}

#noticias .icono.verde {
  background-color: #42da87;
}

#noticias .icono.violeta {
  background-color: #938af9;
}

#noticias .icono.naranja {
  background-color: #fbb22c;
}

#noticias .icono.cyan {
  background-color: #0be3e1;
}

#noticias .icono.amarillo {
  background-color: #e9c70b;
}

#noticias .icono.rojo {
  background-color: #ff6b6b;
}

@keyframes liftUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}
.hover-lift {
  transform: translateY(-8px);
  transition: transform 0.3s ease;
}

/* Glow card general */
#noticias .glow-card {
  position: relative;
  background-color: rgba(255, 255, 255, 0.35);
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  transition: transform 0.3s ease;
  border-radius: 25px;
}

/* #noticias .glow-card:hover {
  transform: translateY(-8px);
} */

#noticias .card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#noticias .card-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#noticias .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

#noticias .glow-card:hover .card-img img {
  transform: scale(1.05);
}

#noticias .card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--primary-red);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  z-index: 3;
}

#noticias .card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#noticias .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

#noticias .card-text {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

#noticias .card-actions {
  margin-top: auto;
}

#noticias .card-btn {
  display: block;
  width: 100%;
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
}

#noticias .card-btn.primary {
  background-color: #0a0a0a;
  color: var(--color-text-primary);
}

#noticias .card-btn.primary:hover {
  background-color: #1a1a1a;
}

/* =======================================
   Profile card específico
   ======================================= */
#noticias .profile-content {
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#noticias .profile-img {
  margin: 25px auto 1rem;
  position: relative;
  z-index: 3;
}

#noticias .profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#noticias .profile-job {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  padding: 0px 15px;
}

#noticias .profile-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1.5rem 0;
  padding: 0 1rem;
  position: absolute;
  right: 20px;
}

#noticias .stat {
  text-align: center;
}

#noticias .stat-value {
  font-size: 1.25rem;
  font-weight: 600;
}

#noticias .stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Glow effects */
#noticias .glow-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

#noticias .magnetic-glow .glow-effect {
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    var(--glow-color, rgba(93, 139, 244, 0.5)) 0%,
    transparent 55%
  );
  filter: blur(var(--glow-blur));
  mix-blend-mode: screen;
}

#noticias .magnetic-glow .glow-card:hover .glow-effect {
  opacity: 1;
}

#noticias .outline-glow .glow-card {
  box-shadow: 0 0 0 1px var(--color-border);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#noticias .outline-glow .glow-card:hover {
  box-shadow: 0 0 0 2px var(--glow-color, rgba(93, 139, 244, 0.5)),
    0 0 30px 2px var(--glow-color, rgba(93, 139, 244, 0.25));
}

#noticias .outline-glow .glow-effect {
  display: none;
}

#noticias .pulse-glow .glow-card {
  transition: transform 0.3s ease;
}

#noticias .pulse-glow .glow-card:hover .glow-effect {
  opacity: 1;
  animation: pulse 2s infinite;
}

/* Glow por tarjeta */
#noticias .glow-card:nth-child(1) {
  --glow-color: rgba(93, 139, 244, 0.5);
}

#noticias .glow-card:nth-child(2) {
  --glow-color: rgba(255, 107, 107, 0.5);
}

#noticias .glow-card:nth-child(3) {
  --glow-color: rgba(72, 219, 251, 0.5);
}

#noticias .glow-card:nth-child(4) {
  --glow-color: rgba(29, 209, 161, 0.5);
}

/* Media queries */
@media (max-width: 1360px) {
  #noticias .magnetic-glow-demo {
    padding: 1rem;
  }

  #noticias .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #noticias .card-img {
    height: 180px;
  }

  @media (max-width: 921px) {
    #noticias .magnetic-glow-demo {
      padding: 1rem;
    }

    #noticias .card-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    #noticias .card-img {
      height: 180px;
    }
  }
}
@media (max-width: 768px) {
  #noticias .magnetic-glow-demo {
    padding: 1rem;
  }

  #noticias .card-grid {
    grid-template-columns: 1fr;
  }

  #noticias .card-img {
    height: 180px;
  }
}

/* Nuevo pasador de cotizaciones horizontal  */

/* Ticker infinito */
@keyframes scrollTicker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.animate-scroll-ticker {
  display: flex;
  gap: 1rem;
  animation: scrollTicker 20s linear infinite;
}

/* ===============================
   Cada tarjeta individual
   =============================== */
.ticker-card {
  min-width: 200px;
  background: transparent;
  border-radius: 0px;
  padding: 0rem;
  border-right: 0px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  cursor: default;
  color: #ffffff;
}

.ticker-card:hover {
  border-color: rgba(191, 219, 254, 0.6);
  box-shadow: 0 8px 20px rgba(71, 180, 249, 0.25);
  transform: translateY(-4px) scale(1.05);
}

/* ===============================
   Header de cada tarjeta
   =============================== */
.ticker-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.ticker-card .card-header h3 {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0;
  color: #ffffff; /* título blanco */
}

.ticker-card .card-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.925rem;
  font-weight: 500;
  padding: 0.15rem 0.35rem;
  border-radius: 0.5rem;
  background: rgba(29, 51, 111, 0.45); /* badge translúcido */
  color: #ffffff;
}
.ticker-card .card-badge.positive,
.ticker-card .card-badge.negative,
.ticker-card .card-badge.neutral {
  background: linear-gradient(180deg, #69dce5, #1c7bf3);
}

.ticker-card .card-badge svg {
  width: 1.45rem;
  height: 1.45rem;
  stroke: #ffffff; /* iconos blancos */
}

.ticker-card .card-badge.neutral {
  background: linear-gradient(180deg, #69dce5, #1c7bf3);
}
.ticker-card .card-badge.positive {
  background: linear-gradient(180deg, #12878f, #007a66);
}
.ticker-card .card-badge.negative {
  background: linear-gradient(180deg, #ff6b6b, #c53030);
}

.ticker-card .card-value.neutral {
  color: #ffffff; /* gris para sin cambios */
}
.ticker-card .card-value.positive {
  color: #00ffcc; /* verde neon sutil */
}
.ticker-card .card-value.negative {
  color: #ff6b6b; /* rojo suave sutil */
}

.positive .card-badge span {
  color: #00ffcc; /* verde neon sutil sobre azul */
}

.negative .card-badge span {
  color: #ff6b6b; /* rojo suave sobre azul */
}

.neutral .card-badge span {
  color: #a0aec0; /* gris sobre azul para sin cambios */
}

/* ===============================
   Valor principal de la tarjeta
   =============================== */
.ticker-card .card-value {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  text-align: center;
  color: #ffffff;
}

/* ===============================
   Precios de compra / venta
   =============================== */
.card-prices {
  display: flex;
  justify-content: space-between;
  font-size: 0.725rem;
  color: #e0e7ff; /* gris muy claro para los precios */
  margin-right: 10px;
}

.price-box .label {
  color: #c7d2fe; /* gris intermedio */
  margin-bottom: 0.125rem;
}

.price-box .amount {
  font-weight: 600;
  color: #ffffff; /* monto principal */
}

/* ===============================
   Animación de hover y glow sutil
   =============================== */
.ticker-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.3s ease;
}

.ticker-card:hover::after {
  box-shadow: 0 0 12px rgba(28, 123, 243, 0.5);
}

/* ===============================
   Scroll infinito y responsive
   =============================== */
.animate-scroll-ticker > .ticker-card:nth-child(n) {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .ticker-card {
    min-width: 150px;
    padding: 0.5rem;
  }

  .ticker-card .card-header h3 {
    font-size: 0.625rem;
  }

  .ticker-card .card-badge {
    font-size: 0.5rem;
    padding: 0.1rem 0.25rem;
  }

  .ticker-card .card-value {
    font-size: 0.75rem;
  }

  .card-prices {
    font-size: 0.5rem;
  }
}

:root {
  --primary: #40a4df;
  --secondary: #013c6a;
  --light: #f6f7f8;
  --dark: #010a35;
}

.testimonial {
  position: relative;
}

.testimonial:before {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-left-dec.png);
  left: 0px;
  top: -40px;
  width: 593px;
  height: 352px;
  z-index: -1;
}

.testimonial:after {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-right-dec.png);
  right: 0px;
  bottom: -40px;
  width: 632px;
  height: 352px;
  z-index: -1;
}

/* Contenedores laterales */
.testimonial-side {
  position: relative;
  min-height: 300px;
}
.testimonial-side img.side-img {
  position: absolute;
  border-radius: 50%;
  width: 60px;
}

/* Posicionamiento simple para tres imágenes */
.testimonial-left img:nth-child(1) {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}
.testimonial-left img:nth-child(2) {
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
}
.testimonial-left img:nth-child(3) {
  bottom: 10%;
  right: 10%;
}

.testimonial-right img:nth-child(1) {
  bottom: 10%;
  right: 10%;
}
.testimonial-right img:nth-child(2) {
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
}
.testimonial-right img:nth-child(3) {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

/* Pulse animación */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.pulse {
  animation: pulse 1.5s infinite;
}

/* Carousel */
.testimonial-carousel .testimonial-item {
  padding: 30px;
  background: transparent;
  border-radius: 10px;
}
.testimonial h5 {
  font-weight: 600;
  color: #013c6a;
}
.testimonial-img {
  width: 100px;
  border-radius: 50%;
  margin: 0 auto 1rem auto;
  width: 100px !important;
  height: 100px;
  border-radius: 100px;
}
.testimonial-carousel .owl-nav {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
/* Flechas */
.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
  margin: 0 5px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--primary);
  border-radius: 50%;
  font-size: 22px;
  transition: 0.5s;
}
.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
  background: var(--secondary);
}

@media (max-width: 768px) {
  #hero h1,
  #hero h2 {
    text-align: center;
  }
  #hero span {
    text-align: center;
    display: block !important;
  }
  #hero .botonera {
    flex-direction: column;
  }
  #hero .botonera a {
    margin: 10px 0;
  }
  #hero .apps {
    flex-direction: column;
  }
  #hero .apps a {
    margin: 10px 0;
  }
}

/* index con video */

.main-banner {
  position: relative;
}

#bg-video {
  min-width: 100%;
  min-height: 100vh;
  max-width: 100%;
  max-height: 100vh;
  object-fit: cover;
  z-index: -1;
}

#bg-video::-webkit-media-controls {
  display: none !important;
}
.video-overlay {
  width: 100vw;
  height: 100vh;
  background: black;
  opacity: 0.65;
  position: absolute;
  display: block;
  overflow: hidden;
  z-index: 1;
  left: 0;
  top: 0;
}
.video-text {
  width: 100vw;
  height: 100vh;
  opacity: 1;
  position: absolute;
  display: block;
  overflow: hidden;
  z-index: 2;
  left: 0;
  top: 20%;
}

/* Comienza animacion celular hero */

#hero .card {
  flex-direction: inherit;
  min-width: inherit;
  word-wrap: inherit;
  background-color: transparent;
  background-clip: inherit;
  border: 0px;
  border-radius: 0px;
}

/* Contenedor 3D */
#hero .scene {
  perspective: 1000px;
  width: 100%;
  height: 500px;
  position: relative;
}

#hero .card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* suaviza la vuelta */
}

/* Mockup principal */
#hero .mockup {
  width: 60%;
  transform: translateZ(40px);
  z-index: 1;
}

/* Tarjeta flotante con animación fluida */
#hero .floating {
  background: rgba(255, 255, 255, 0.85);
  padding: 10px;
  border-radius: 5px;
}
#hero .floating1.animate {
  position: absolute;
  width: 20%;
  top: 20%;
  left: 10%;
  transform: translate3d(0, 0, 120px); /* Z inicial */
  z-index: 2;
  animation: floaty 2s ease-in-out infinite alternate;
}

#hero .floating2.animate {
  position: absolute;
  width: 20%;
  top: 40%;
  right: 10%;
  transform: translate3d(0, 0, 120px); /* Z inicial */
  z-index: 2;
  animation: floaty 2s ease-in-out infinite alternate;
}

#hero .floating3.animate {
  position: absolute;
  width: 20%;
  top: 65%;
  left: 40%;
  transform: translate3d(0, 0, 120px); /* Z inicial */
  z-index: 2;
  animation: floaty 2s ease-in-out infinite alternate;
}

#hero .floating4.animate {
  position: absolute;
  width: 20%;
  top: 75%;
  right: 12%;
  transform: translate3d(0, 0, 120px); /* Z inicial */
  z-index: 2;
  animation: floaty 2s ease-in-out infinite alternate;
}
#hero .floating5.animate {
  position: absolute;
  width: 20%;
  top: 10%;
  right: 15%;
  transform: translate3d(0, 0, 120px); /* Z inicial */
  z-index: 2;
  animation: floaty 2s ease-in-out infinite alternate;
}
#hero .floating6.animate {
  position: absolute;
  width: 20%;
  top: 35%;
  left: 35%;
  transform: translate3d(0, 0, 120px); /* Z inicial */
  z-index: 2;
  animation: floaty 2s ease-in-out infinite alternate;
}
#hero .floating7.animate {
  position: absolute;
  width: 20%;
  top: 45%;
  left: 5%;
  transform: translate3d(0, 0, 120px); /* Z inicial */
  z-index: 2;
  animation: floaty 2s ease-in-out infinite alternate;
}
#hero .floating8.animate {
  position: absolute;
  width: 20%;
  top: 80%;
  left: 10%;
  transform: translate3d(0, 0, 120px); /* Z inicial */
  z-index: 2;
  animation: floaty 2s ease-in-out infinite alternate;
}

@keyframes floaty {
  0% {
    transform: translate3d(0, -10px, 120px);
  }
  50% {
    transform: translate3d(0, 0px, 120px);
  }
  100% {
    transform: translate3d(0, 10px, 120px);
  }
}

@media (max-width: 768px) {
  #indices .investment-card-right .relative {
    min-height: 400px !important;
    margin-top: 40px;
  }
}

.internas {
  padding-top: 80px !important;
}

/* Contacto */

a:hover,
a:focus,
a:active,
.form-control:focus,
.form-control:active,
.form-control:hover,
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled),
.btn-success.focus,
.btn-success:focus,
button:hover,
button:active,
button:focus,
.btn-success,
.btn,
[type="button"],
[type="reset"],
[type="submit"],
button,
.btn:hover,
.btn:active,
.btn:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

textarea.form-control {
  min-height: 140px;
  margin-bottom: 20px;
}

.no-margin {
  margin: 0px !important;
}

.help-block.with-errors {
  color: #313875;
  margin-top: 5px;
}

.alert-success {
  color: #fff;
  background-color: transparent;
  border-color: #f1f0f5;
}
.alert-dismissable .close,
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0px;
  color: white;
  font-weight: 300;
  background: black;
  border: 0;
}
.alert {
  position: relative;
  padding: 2rem;
  margin-bottom: 1rem;
  border: 0px solid transparent;
  border-radius: 0px;
}

.text-muted {
  color: #313875;
}
.history-text p.text-muted {
  color: #313875;
}
.messages {
  background: black;
  color: white;
}

.btn.disabled,
.btn[disabled],
.btn-send,
.btn-success,
fieldset[disabled] .btn {
  background: #44c0d8;
  color: #161717;
  text-transform: uppercase;
  width: 165px;
  border: none;
  height: 46px;
  cursor: pointer;
  font-size: calc(12px + 0.4vw);
  opacity: 1;
  line-height: 1;
  border-radius: 50px;
}
.btn.disabled:hover,
.btn.disabled:active,
.btn.disabled:focus,
.btn-success:hover,
.btn-success:active,
.btn-success:focus,
.btn[disabled]:hover,
.btn[disabled]:active,
.btn[disabled]:focus,
fieldset[disabled] .btn:hover,
fieldset[disabled] .btn:active,
fieldset[disabled] .btn:focus,
.btn-send:hover,
.btn-send:active,
.btn-send:focus {
  background: #313875;
  color: white;
  opacity: 1;
  border-radius: 50px;
}

.alert-danger {
  color: black;
  background-color: #f1f0f5;
  border-color: #f1f0f5;
}
.form-group {
  margin-top: 10px;
  margin-bottom: 10px;
}
.form-group input {
  min-height: 45px;
  border-color: #e8e8e8;
}

/* .d-none {
    display: none!important;
} */

.nice-select.wide {
  width: 100%;
  border-radius: 0;
}
.input-group-addon {
  position: absolute;
  right: 10px;
  z-index: 1;
  top: 8px;
}

/* Termina Contacto */

/* Internas texto e imagen */

.interna-institucional {
  position: relative;
  padding: 40px 0;
}

section.interna-institucional:before {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-left-dec.png);
  left: 0px;
  top: -40px;
  width: 593px;
  height: 352px;
  z-index: -1;
}

section.interna-institucional:after {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-right-dec.png);
  right: -40px;
  bottom: -40px;
  width: 632px;
  height: 352px;
  z-index: -1;
}

#content h2 {
  background: linear-gradient(90deg, #40a4df 0, #013f70 60%);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  -webkit-text-fill-color: #fff0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  margin: 20px 0 60px;
}

@media screen and (min-width: 800px) {
  #content h2 {
    font-size: 48px;
    line-height: 56px;
  }
}

#content p,
#content ul,
#content li {
  color: #444444;
  padding-right: 5%;
}

#content ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  display: flex;
  width: 100%;
}

#content ul li i {
  background: linear-gradient(90deg, #40a4df 0, #218fe8 60%);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  -webkit-text-fill-color: #fff0;
  font-size: 18px;
  font-weight: 700;
}

#content span {
  display: none;
}

#content .meta {
  font-family: "Arial", sans-serif;
  font-size: 11px;
  letter-spacing: 5px;
  color: #88888a;
  text-transform: uppercase;
  position: relative;
}

@media screen and (min-width: 800px) {
  #content .meta {
    font-size: 13px;
  }
}

#content .meta:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  right: -55px;
  width: 45px;
  height: 2px;
  background-color: #393d40;
}

#content #slide-status {
  margin-top: 10px;
  font-size: 18px;
  color: #40a4df;
  text-transform: uppercase;
  font-weight: 600;
}

.interna-institucional h5 {
  color: #1c4e79;
  font-weight: 600;
}
.bg-fintech-primary {
  background: linear-gradient(90deg, #40a4df 0, #013f70 60%);
  margin-right: 20px;
  height: 40px;
  position: relative;
  color: white;
  font-size: 24px;
  width: 40px;
  line-height: 24px;
  border-radius: 50px;
}

.tarjeta-apertura {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tarjeta-header {
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
}
.tarjeta-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.tarjeta-header p {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
}

.tarjeta-body {
  padding: 1.5rem;
  flex: 1;
}
.lista-apertura {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block !important;
}

.lista-apertura li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.lista-apertura li i {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
  margin-top: 2px;
}

.tarjeta-footer {
  padding: 1.5rem;
  border-top: 1px solid #eee;
}
.btn-apertura {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: #0066cc;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.3s;
}
.btn-apertura:hover {
  background: #004a99;
}

.custom-card {
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  text-align: left;
}

.custom-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.custom-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.custom-card-header .icon {
  height: 32px;
  width: 32px;
  color: #40a4df; /* azul fintech */
  margin-right: 12px;
}

.custom-card-header h5 {
  font-weight: 600;
  color: #1c4e79; /* gris oscuro */
  margin: 0;
}

.custom-card p {
  color: #4b5563; /* gris medio */
  margin: 0;
}

/* Popup overlay */
.login-popup {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  padding: 20px;
}

/* activo */
.login-popup.active {
  display: flex;
}

/* evitar scroll del body cuando está abierto */
body.modal-open {
  overflow: hidden;
}

/* cuadro */
.login-content {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(135deg, #f8fbff, #e6f0ff);
  border-radius: 16px;
  padding: 36px;
  position: relative;
  box-shadow: 0 12px 30px rgba(4, 15, 40, 0.4);
  animation: popupIn 0.22s ease;
}

/* cerrar */
.close-popup {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #1f2937;
}

/* contenidos */
.login-box h2 {
  text-align: center;
  margin: 0 0 18px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0b3b6f;
}

.login-box p {
  text-align: center;
  font-size: 0.9rem;
  color: #334155;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 14px;
}

.input-group label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: #334155;
}

.input-group input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.input-group input:focus {
  outline: none;
  border-color: #0b3b6f;
  box-shadow: 0 0 0 2px rgba(11, 59, 111, 0.2);
}

/* botón */
.btn-login {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(90deg, #0b63d6, #003f8a);
  color: #fff;
  font-weight: 600;
  margin-top: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-login:hover {
  background: linear-gradient(90deg, #003f8a, #0b63d6);
}

/* links extras */
.extra-links {
  text-align: center;
  margin-top: 12px;
  font-size: 0.9rem;
  color: #374151;
}

.extra-links a {
  color: #0b3b6f;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s;
}

.extra-links a:hover {
  color: #003f8a;
  text-decoration: underline;
}

/* Animación popup */
@keyframes popupIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/**********************
Ws botón redondo con tooltip ws-tooltip
***********************/
#chat-ws-redondo.ws.tooltip {
  position: fixed;
  bottom: 13px;
  right: 40px;
  width: 60px;
  height: 60px;
  border-radius: 50% !important;
  cursor: pointer;
  display: block;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(91, 91, 91, 0.5);
  box-shadow: 0px 0px 20px 0px rgba(91, 91, 91, 0.5);
  z-index: 999;
  background: #1ca550;
  padding: 8px 11px;
  opacity: 1;
}

#chat-ws-redondo.ws.tooltip img {
  padding-left: 0px;
  padding-top: 0px;
  width: 100%;
}

#chat-ws-redondo.ws.tooltip i {
  font-size: 44px;
  color: white;
}

.ws.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #1ca550;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ws.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1ca550 transparent transparent transparent;
}

.ws.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/**********************
Blog Novedades
***********************/

.sec-blog {
  padding: 40px 0 0 0;
  position: relative;
}

section.sec-blog:before {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-left-dec.png);
  left: 0px;
  top: -40px;
  width: 593px;
  height: 352px;
  z-index: -1;
}

section.sec-blog:after {
  position: absolute;
  content: "";
  background-image: url(../../imagenes/testimonials-right-dec.png);
  bottom: -40px;
  width: 632px;
  height: 352px;
  z-index: -1;
  right: -52px;
}

.sec-blog .inner-descripe h4,
.sec-blog .inner-descripe .h4 {
  color: #54565a;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 15px;
  line-height: 28px;
}
.sec-blog .blog-item h4,
.sec-blog .blog-item .h4 {
  color: #013c6a !important;
}
.sec-blog .blog-item h4 a,
.sec-blog .blog-item .h4 a {
  color: #013c6a !important;
  font-weight: 600;
}
.sec-blog .blog-item .hov-img0 {
  display: block;
  overflow: hidden;
}
.sec-blog .blog-item .hov-img0 img {
  width: 100%;
}
.sec-blog .blog-item .stext-107 {
  font-size: 13px;
  line-height: 1.923;
}
.sec-blog .blog-item .stext-108 {
  font-size: 14px;
  line-height: 1.4143;
  color: #888;
}
.sec-blog .blog-item .stext-108 a {
  color: #013c6a !important;
}

.sec-blog .blog-item p:last-child {
  margin-bottom: 0;
}

.zoom {
  display: block;
  overflow: hidden;
}
.zoom img {
  transform: scale(1);
  transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.zoom:hover img {
  transform: scale(1.1);
  opacity: 0.9;
}
.m-r-3,
.m-lr-3,
.m-all-3 {
  margin-right: 3px;
}
.cl4 {
  color: #999;
}
.cl5 {
  color: #222;
}
.sec-blog .blog-item h4,
.sec-blog .blog-item .h4 {
  color: #333 !important;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.imagen-equipo {
  border-radius: 100%;
  margin-bottom: 20px;
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 10px solid #40a5df;
}
.titulo-imagen {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .titulo-imagen {
    flex-direction: column;
  }
}

/*--------------------------------------------------------------
# Dólares
--------------------------------------------------------------*/
.dolares {
  padding: 80px 0;
  position: relative;
}

.dolares-content {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 15px;
  backdrop-filter: blur(8px);
  margin-top: 30px;
}

.dolares-tabs {
  border-bottom: 0px;
  margin-bottom: 25px;
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.dolares-tabs .nav-link {
  color: #033b6a;
  font-weight: 600;
  border: none;
  background: transparent;
  border-radius: 50px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.dolares-tabs .nav-link:hover {
  background: rgba(64, 164, 223, 0.1);
  color: #40a4df;
}

.dolares-tabs .nav-link.active {
  background: linear-gradient(90deg, #40a4df, #013f70);
  color: #fff;
  box-shadow: 0 0 10px rgba(64, 164, 223, 0.4);
}

.dolares-tab-content {
  min-height: 180px;
  text-align: left;
  padding: 5px;
  border-radius: 12px;
  background: #fff;
  border: 0px;
  animation: fadeIn 0.6s ease;
}

.loading-msg {
  color: #033b6a;
  font-size: 16px;
  opacity: 0.8;
}

.loaded-content h4 {
  color: #40a4df;
  font-weight: 700;
  margin-bottom: 10px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*--------------------------------------------------------------
# Dólares - Columna Izquierda
--------------------------------------------------------------*/

/* Caja principal de la columna izquierda */
.dolares-left {
  border: 1px solid #e2e2f5;
  border-radius: 12px;
  padding: 15px;
  background-color: white;
}

/* Título principal */
.dolares-left h2 {
  font-size: 1.25rem; /* 20px aprox */
  font-weight: 700;
  color: #033b6a;
  margin-bottom: 15px;
}

/* Contenedor de los dos cuadros de Compra/Venta */
.dolares-left .compra-venta {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

/* Cada cuadro individual de Compra o Venta */
.dolares-left .compra-venta .cuadro {
  flex: 1;
  background-color: #f9fafb;
  border-radius: 10px;
  padding: 12px;
  text-align: left;
}

/* Título pequeño dentro de cada cuadro (Compra / Venta) */
.dolares-left .compra-venta .cuadro .titulo-cuadro {
  font-size: 0.875rem; /* 14px aprox */
  color: #666666;
  margin-bottom: 5px;
}

/* Valor grande dentro del cuadro */
.dolares-left .compra-venta .cuadro .valor-cuadro {
  font-size: 1.5rem; /* 24px aprox */
  font-weight: 700;
  color: #033b6a;
}

/* Cuadro de Variación diaria */
.dolares-left .variacion-diaria {
  background-color: #f9fafb;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 15px;
}

/* Título pequeño de Variación diaria */
.dolares-left .variacion-diaria .titulo-cuadro {
  font-size: 0.875rem;
  color: #666666;
  margin-bottom: 5px;
}

/* Valor con flecha y porcentaje */
.dolares-left .variacion-diaria .valor-cuadro {
  display: flex;
  align-items: left;
  gap: 10px;
  font-weight: 700;
  font-size: 1.25rem;
}

/* Estados de variación */
.dolares-left .variacion-diaria.positive .valor-cuadro {
  color: #22c55e; /* verde */
}

.dolares-left .variacion-diaria.negative .valor-cuadro {
  color: #ef4444; /* rojo */
}

.dolares-left .variacion-diaria.neutral .valor-cuadro {
  color: #6b7280; /* gris */
}

/* Porcentaje al lado sin negrita */
.dolares-left .variacion-diaria .porcentaje {
  font-weight: 400;
  font-size: 1rem;
}

/* Flecha de variación */
.dolares-left .variacion-diaria .flecha {
  font-size: 1.5rem;
  line-height: 1;
}

/* Cuadro Spread */
.dolares-left .spread {
  background-color: #f9fafb;
  border-radius: 10px;
  padding: 12px;
}

/* Título Spread */
.dolares-left .spread .titulo-cuadro {
  font-size: 0.875rem;
  color: #666666;
  margin-bottom: 5px;
}

/* Valor Spread */
.dolares-left .spread .valor-cuadro {
  color: #7c3aed; /* violeta */
  font-weight: 700;
  font-size: 1.25rem;
}

/* Porcentaje Spread al lado sin negrita */
.dolares-left .spread .porcentaje {
  font-weight: 400;
  font-size: 0.9rem;
  margin-left: 5px;
}

/* Fecha de actualización */
.dolares-left .fecha-actualizacion {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding: 10px;
  background-color: #f9fafb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #6b7280;
}

.dolares-left .fecha-actualizacion svg {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
}

/*--------------------------------------------------------------
# Dólares - Columna derecha
--------------------------------------------------------------*/
.dolares-right {
  background-color: white;
  border-radius: 16px;
  border: 1px solid #e2e2f5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-bottom: 20px;
}

.dolares-right h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #033b6a;
  margin-bottom: 20px;
  margin-top: 0;
}

.dolares-right p {
  color: #555;
  font-size: 16px;
  line-height: 1.6;
}

/* Si luego agregás gráficos o tablas */
.dolares-right .chart-container {
  width: 100%;
  height: 300px;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e2f5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*--------------------------------------------------------------
# Dólares - Info horizontal debajo de columnas
--------------------------------------------------------------*/
.dolares-info {
  background-color: #ffffff;
  border: 1px solid #e2e2f5;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-top: 20px;
}

.dolares-info .info-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dolares-info .info-icon {
  flex-shrink: 0;
  color: #40a4df;
  width: 28px;
  height: 28px;
  margin-top: 2px;
}

.dolares-info .info-text {
  flex: 1;
}

.dolares-info h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #033b6a;
  margin-bottom: 8px;
  margin-top: 0;
}

.dolares-info p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Spinner de carga */
.loading-msg {
  text-align: center;
  padding: 40px 20px;
}

.loading-msg .spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.3em;
}

.loading-msg p {
  color: #6b7280;
  font-size: 1rem;
  margin-top: 15px;
}

/*--------------------------------------------------------------
# Gráfico Histórico del Dólar
--------------------------------------------------------------*/
.historical-chart-wrapper {
  width: 100%;
}

/* Controles de período */
.chart-period-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  justify-content: center;
}

.period-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.3s ease;
}

.period-btn:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #374151;
}

.period-btn.active {
  background: linear-gradient(90deg, #40a4df, #013f70);
  border-color: #40a4df;
  color: #fff;
  box-shadow: 0 2px 8px rgba(64, 164, 223, 0.3);
}

/* Selector de fechas personalizado */
.custom-date-selector {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.date-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.date-input-group {
  flex: 1;
  min-width: 150px;
}

.date-input-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 6px;
}

.date-input-group input[type="date"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #374151;
  transition: border-color 0.3s ease;
}

.date-input-group input[type="date"]:focus {
  outline: none;
  border-color: #40a4df;
  box-shadow: 0 0 0 3px rgba(64, 164, 223, 0.1);
}

.apply-custom-dates {
  background: #40a4df;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.apply-custom-dates:hover {
  background: #3089c4;
}

/* Contenedor del canvas */
.chart-canvas-wrapper {
  position: relative;
  height: 450px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.chart-canvas-wrapper:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.chart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.chart-loading p {
  margin-top: 15px;
  color: #6b7280;
  font-size: 0.95rem;
}

/* Leyenda del gráfico */
.chart-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-block;
}

.legend-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

/* Responsive */
@media (max-width: 768px) {
  .chart-period-controls {
    justify-content: flex-start;
  }

  .period-btn {
    font-size: 0.8rem;
    padding: 6px 12px;
  }

  .chart-canvas-wrapper {
    height: 300px;
    padding: 12px;
  }

  .date-inputs {
    flex-direction: column;
  }

  .date-input-group {
    width: 100%;
  }
}