[data-bs-theme=light] {
    --bs-text-dark: #262352;
    --bdb-text-secundary-color: 38, 35, 82;
    --bdb-text-color: 38, 35, 82;
    --bdb-link-color-rgb: 38, 35, 82;
    --bdb-link-opacity: 1;
    --bdb-link-hover-opacity: 0.7;
    --bs-heading-color: #262352;
    --bs-scrolltop-bg-color: #eac9a2;
}

.btn-bdb {
    --bdb-btn-color: 38, 35, 82;
    --bdb-btn-bg: 234, 201, 162;
    --bdb-btn-border-color: 234, 201, 162;
    --bdb-btn-hover-color: 38, 35, 82;
    --bdb-btn-hover-bg: 214, 180, 139;
    --bdb-btn-hover-border-color: 214, 180, 139;
    --bs-btn-focus-shadow-rgb: 68, 174, 116;
    --bdb-btn-active-color: 38, 35, 82;
    --bdb-btn-active-bg: 214, 180, 139;
    --bdb-btn-active-border-color: 214, 180, 139;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bdb-btn-disabled-color: 38, 35, 82;
    --bdb-btn-disabled-bg: 234, 201, 162;
    --bdb-btn-disabled-border-color: 234, 201, 162;
}
.btn-bdb.btn-header {
    --bdb-btn-bg: 255, 255, 255;
    --bdb-btn-border-color: 255, 255, 255;
    --bdb-btn-hover-bg: 255, 255, 255;
    --bdb-btn-hover-border-color: 255, 255, 255;
    --bdb-btn-active-bg: 255, 255, 255;
    --bdb-btn-active-border-color: 255, 255, 255;
}

body, html {
    font-size: 13px !important;
    font-weight: 400;
    font-family: Helvetica, sans-serif;
}
body {
    color: rgb(var(--bdb-text-color));
}

a {
    color: rgba(var(--bdb-link-color-rgb), var(--bdb-link-opacity, 1));
}
a:hover {
    color: rgba(var(--bdb-link-color-rgb), var(--bdb-link-hover-opacity, 1));
}

[data-kt-sticky-enabled="true"] .nav-link {
    color: rgb(var(--bdb-text-color)) !important;
}

.landing-dark-bg {
    background-color: rgb(38, 35, 82) !important;
}

.landing-header, .landing-hero-text {
    z-index: 2;
    position: relative;
}
.bdb-secundary-color {
    color: rgb(var(--bdb-text-secundary-color));
}
.btn.btn-bdb {
    color: rgba(var(--bdb-btn-color), 1);
    border-color: rgba(var(--bdb-btn-bg), 1);
    background-color: rgba(var(--bdb-btn-bg), 1);
}
.btn.btn-bdb:hover {
    color: rgba(var(--bdb-btn-hover-color), 1);
    background-color: rgba(var(--bdb-btn-hover-bg), 1);
    border-color: rgba(var(--bdb-btn-hover-border-color), 1);
}
.btn.btn-bdb:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}
.btn.btn-bdb:active {
    color: rgba(var(--bdb-btn-active-color), 1);
    background-color: rgba(var(--bdb-btn-active-bg), 1);
    border-color: rgba(var(--bdb-btn-active-border-color), 1);
    box-shadow: var(--bs-btn-active-shadow);
}
.btn.btn-bdb:disabled {
    color: rgba(var(--bdb-btn-disabled-color), 1);
    background-color: rgba(var(--bdb-btn-disabled-bg), 1);
    border-color: rgba(var(--bdb-btn-disabled-border-color), 1);
}

.hand-mobile {
  max-width: 50%; /* Ajusta el tamaño de la imagen */
  position: absolute;
  bottom: 0px; /* Ajusta para sobresalir ligeramente por encima del fondo */
  z-index: 10; /* Asegura que la mano esté por encima del contenido */
}

.bg-yellow {
  background-color: #fef4de; /* Color de fondo ocre */
}

.number-how-it-works {
    color: #f1d697;
}

.card figure {
  position: relative;
  width: 100%;
  padding-top: 100%; /* Esto asegura que el contenedor sea cuadrado, ya que el padding-top es un porcentaje de la anchura */
  overflow: hidden; /* Esto asegura que la imagen no sobresalga del contenedor */
}

.card figure img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen llene el contenedor manteniendo la proporción */
  object-position: center; /* Centra la imagen dentro del contenedor */
  transform: translate(-50%, -50%); /* Asegura que la imagen esté centrada */
}