.Color-white { color: #fff; text-decoration: none;}
.Color-white-b { color: #fff; font-weight: bold; text-decoration: none;}
.Color-grey { color: #ccc; text-decoration: none;}
.Color-grey-b { color: #ccc; font-weight: bold; text-decoration: none;}
.Color-black { color: #1b2235; text-decoration: none;}
.Color-black-b { color: #1b2235; font-weight: bold; text-decoration: none;}
.Text-c-black {font-size: 12px; color: #1b2235; font-weight: bold; text-decoration: none;}

.text-justify { text-align: justify;  }

.Link-dark-b {font-size: 14px; font-weight: bold; color: #1b2235; text-decoration: none; transition: color 0.3s ease;  }
.Link-dark-b:link {font-size: 14px; font-weight: bold;  color: #1b2235; text-decoration: none; transition: color 0.3s ease;  }
  
.Link-dark {font-size: 12px; color: #1b2235; text-decoration: none; transition: color 0.3s ease;  }
.Link-dark:link {font-size: 12px; color: #1b2235; text-decoration: none; transition: color 0.3s ease;  }  

.Link-dark-b:hover, .Link-dark:hover {color: #2c3345; text-decoration: none; }  
.Link-dark-b:focus, .Link-dark:focus {outline: none; text-decoration: none; border-bottom: 2px solid #0f1524;  }

.p-m-1r { padding: 4px; margin: 1rem; }   
.c-m-inputs { margin: 10px 0px;}
/*** Contenedor principal ***/ 
.Content-app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;max-width: 1440px;
  height: auto;
  margin: 0 auto;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
}
.Box-Content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  margin: 40px auto;
  overflow: hidden;
}
.Box-head {
  position:fixed;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 40px;
  margin: 0 auto;
  padding: 4px 10px;
  overflow: hidden;
  z-index: 10000; 
  background-color: #0060ff;
}
.Box-row {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%; 
  align-items: center;
  justify-content:space-between;
}
.Box-row-l {
  position: relative;
  display: flex;
  width: 50%;
  height: 100%;  
  align-items: center;
  justify-content: flex-start;   
}
.Box-row-r {
  position: relative;
  display: flex;
  width: 50%;
  height: 100%; 
  align-items: center;
  justify-content: flex-end;  
}
.Box-img {
  object-fit: contain;
  width: 100px;
  height: 30px;
}
.logo-container {
  width: 100%;
  height: auto; 
}
/* Estilos del botón */
.button-modern {
  background-color: #ffffff;
  color: #1b2235;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.button-modern:hover {  background-color: #1b2235;   color: #fff;  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);  transform: scale(1.05);}
.button-modern:active {  transform: scale(0.95);  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}

/* Estilos del botón */
.button-action {
  background-color: #ffffff;
  color: #1b2235;
  padding: 7px 10px;
  margin: 10px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button-action:hover {
  background-color: #1b2235; 
  color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
}

.button-action:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.Content-head {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 450px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  background-color: #0060ff;
}

.section-body-one {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 600px;
  height: auto;
  min-height: 100%;
  padding: 0px 10px;
  align-items: center;
  justify-content: center;   
}

.InfoText-body {
  font-size: clamp(2.25rem,5.5vw,5rem);
  font-weight: bold; 
  line-height: 1;
  text-align: center;
}
.responseBox-body {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    padding: 4px 1rem;
    margin: 10px auto;
    align-items: center;
    justify-content: flex-start;
    border-radius: 10px;
    background-color: #010922;  
}
.section-body-one {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 600px;
  height: auto;
  min-height: 400px;
  padding: 0px 10px;
  align-items: center;
  justify-content: center;   
}
.section-body-two {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 0px 10px;
  align-items: center;
  justify-content: center;   
}
.picture {
  background-image: url('https://creodinero.com/images/investor.png');  
  background-position: right bottom; 
  background-repeat: no-repeat;  
  background-size: 300px; 
}
/* Estilos del contenedor principal */
.Section-list {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 300px;
  padding: 1rem;  
}
.Cinta-title,
.Cinta-subtitle {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 4px 10px;
  align-items: center;
  justify-content: center;   
}
.Cinta-title { 
  font-size: clamp(2rem,2.5vw,2rem);
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
.Cinta-subtitle { 
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}

.List-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 1rem;
  justify-content: space-around;
  gap: 10px;
}
.Items-cards {
  min-width: 140px;
  height: auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  align-items: center;
  justify-content: center; 
  transition: transform 0.2s;
}
.Items-cards:hover {  transform: scale(1.05); }
/** Secction one **/
.Section-one {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 400px;
  padding: 1rem;
}
.Title-Section {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  padding: 1rem;
  margin: 0 auto;
  align-items: center;
  justify-content: center; 
}
.hero-title>span:nth-child(1) { color: #313231; text-decoration: none;}
.hero-title>span:nth-child(2) { color: #00c8ff; text-decoration: none;}
.hero-title>span:nth-child(3) { color: #313231; text-decoration: none;}
.hero-title {  font-size: 3rem;  font-weight: bold;  line-height: 1.2;  text-align: center; margin: 0 auto;  padding: 20px;} 
/* Contenedor padre */
.parent-container {
  display: flex;
  flex-wrap: wrap; /* Permite que los hijos se ajusten según el espacio */
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Estilo general para los hijos */
.child-card {
  background-color: #fff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra paralela */
  border-radius: 8px;
  width: calc(33.33% - 20px); /* Ocupa un tercio del espacio en pantallas grandes */
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Cabecera de cada tarjeta */
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* Icono en la cabecera */
.card-icon {
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Título en la cabecera */
.card-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

/* Cuerpo de la tarjeta */
.card-body {
  font-size: 1rem;
  color: #666;
  line-height: 1.5;
}



/*** Footer ***/
.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 40px;
  padding: 20px;
  background-color: #0060ff;
}
/* Estilos básicos */
.login-form {
  width: 350px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-group {  margin-bottom: 10px;}
.form-group label {  display: block; font-size: 0.8rem;  margin-bottom: 4px;  color: #595858;}
.form-group input {  width: 100%;  padding: 10px;  border: 1px solid #ccc;  border-radius: 4px;}
.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #1b2235;
}
.submit-btn {
  width: 100%;
  padding: 12px;
  background-color: #1b2235;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
.submit-btn:hover {  background-color: #0e111c;}

/* Caja de mensaje */
.message-box {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 15px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  z-index: 1000;
  max-width: 300px;
  text-align: center;
}
.message-box.success {  background-color: green;}
.message-box.error {  background-color: red;}
.message-box.info {  background-color: blue;}
.phone-group {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Espacio entre el select y el input */
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.5rem;
  background-color: #fff;
  max-width: 400px; /* Ajusta el tamaño del grupo */
  margin: auto; /* Centrar */
}

.country-code-select {
  border: none;
  outline: none;
  padding: 0.4rem;
  border-right: 1px solid #ccc;
  background-color: transparent;
  font-size: 0.7rem;
  border-radius: 4px 0 0 4px;
  flex-shrink: 0;
}

.phone-group input {
  border: none;
  outline: none;
  padding: 0.4rem;
  font-size: 0.7rem;
  flex-grow: 1;
  border-radius: 0 4px 4px 0;
}

.phone-group:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

.Box-login {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 500px;
  height: auto;
  padding: 10px 20px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;  
}
.Content-back {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 10px 20px;
  align-items: flex-start;
  justify-content: center; 
}
.content-links-left,
.content-links-right {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 4px;
}
.content-links-right {  align-items: flex-end;  justify-content: center;}
.content-links-left {  align-items: flex-start;  justify-content: center; }


/** Section tranquilidad **/
.Section-tranqiulity {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0px;  
  opacity: 0; /* Comienza oculta */
  transform: translateY(50px); /* Inicia desplazada */
  transition: opacity 0.8s ease, transform 0.8s ease; /* Suavizado */
  background-color: #fff;
}

.Section-tranqiulity--active {
  opacity: 1; /* Visible cuando es activa */
  transform: translateY(0); /* En su posición final */
}

.tranqiulity-wrapper {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.text-content {
  flex: 1;
  text-align: left;
}

.title {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.3;
}

.title .highlight {
  color: #fc6905; /* Azul resaltado */
}

.description {
  font-size: 1rem;
  margin-top: 1rem;
  color: #555;
}

.image-content {
  flex: 1;
}

.responsive-image {
  width: 350px;
  height: auto; 
}

/*** Boton Whatsapp ***/
.iFloatBtn {
  position: fixed;
  display: flex;
  flex-direction: row;
  width: auto;
  height: auto;
  right: 10px;
  bottom: 20px; 
  padding: 5px; 
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 11000; 
} 

.FloatBtn {
    position: fixed;
    width: 45px;
    height: auto;
    right: 10px;
    bottom: 40px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 10px;
    background-color: rgb(7, 247, 39, 0.7);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    z-index: 10; 
  } 
  .widsize-wa {
    width: 25px;
    height: auto;
  }
  .ImgSize-wa {
    width: 70px;
    height: auto;
  }
  .ImgSize-wa:hover {
    width: 75px;
    height: auto;
  }

  .circle-link {
    display: flex;
    width: auto; height: auto; 
    overflow: hidden;
  }
  .iFloatBtn-msg {
    position: relative;
    display: flex;
    width: auto;
    height: auto; 
    margin: 0px 2px;
    padding: 5px 10px;
    border-radius: 10px;
    align-items: center; justify-content: center;
    background-color: #4dc856;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    transition: all .3s ease-in-out;
  }
  .iFloatBtn-btn {
    position: relative;
    display: flex;
    width: auto;
    height: auto; padding: 0 0;
    border-radius: 50%;
    align-items: center; justify-content: center; 
    /*** background-color: rgb(7, 247, 39, 0.7); ***/ 
  } 
  .TxBtn-w { color: #fff; font-size: 12px;  font-family: 'Roboto', sans-serif; text-decoration:none !important; } 
  .TxBtn-n { color: #131722; font-size: 12px; font-family: 'Roboto', sans-serif; text-decoration:none !important; } 
   
  .transicion-div {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease, max-height 0.5s ease;
  }
  
  .transicion-div.mostrar {
    opacity: 1;
    max-height: 100px; /* Ajusta la altura máxima según tus necesidades */
  }
  
  .boton-con-div-mostrado .transicion-div {
    max-height: 100px; /* Ajusta la altura máxima según tus necesidades */
  }


/* Adaptación para pantallas móviles */
@media (max-width: 750px) {  

  .parent-container {
    flex-direction: column; /* Cambia a columna */
    align-items: center;
  }

  .child-card {
    width: 100%; /* Ocupa el 90% del ancho en móviles */
  }
  .hero-title {
    font-size: 3rem; 
  }
  .Box-head {padding: 4px 4px;}
  .Content-head {
    min-height: 300px; 
  }  
  .section-body-one {     width: 100%;      }
  /* Estilos del botón */
  .button-modern {    padding: 4px 7px;    font-size: 12px;    border-radius: 2px;  }
  .picture {
    background-image: url('https://creodinero.com/images/investor-m.png'); 
    background-position: right bottom; 
    background-repeat: no-repeat;  
    background-size: 150px; 
  }

  .Box-login { 
    width: 100%; 
    padding: 0px 4px; 
  }

}

/* Ajuste para móviles */
@media (max-width: 520px) {
  
    /* Section tranquilidad*/
    .Section-tranqiulity { 
      flex-direction: column;
  }

  .tranqiulity-wrapper {
      flex-direction: column;
      gap: 1.5rem;
  }

  .title {
      font-size: 1.5rem;
      text-align: center;
  }

  .description {
      font-size: 0.9rem;
      text-align: center;
  }

  .image-content {
      text-align: center;
  }
  
  .responsive-image {
    width: 70%;
    height: auto; 
  }

  .hero-title {
    font-size: 2rem; 
    padding: 10px; 
  }
}