/* Fuente Bree - Regular */
@font-face {
     font-family: 'Bree';
     src: url('../assets/fonts/Bree/BreeRegular.otf') format('opentype');
     font-weight: normal;
     font-style: normal;
}

/* Fuente Bree - Bold */
@font-face {
     font-family: 'Bree';
     src: url('../assets/fonts/Bree/BreeBold.otf') format('opentype');
     font-weight: bold;
     font-style: normal;
}

/* Fuente Bree - ExtraBold */
@font-face {
     font-family: 'Bree';
     src: url('../assets/fonts/Bree/BreeExtrabold.otf') format('opentype');
     font-weight: 800;
     font-style: normal;
}

/* Fuente Bree - Light */
@font-face {
     font-family: 'Bree';
     src: url('../assets/fonts/Bree/BreeLight.otf') format('opentype');
     font-weight: 300;
     font-style: normal;
}

/* Fuente Bree - Thin */
@font-face {
     font-family: 'Bree';
     src: url('../assets/fonts/Bree/BreeThin.otf') format('opentype');
     font-weight: 200;
     font-style: normal;
}

/* Fuente Bree - Semibold */
@font-face {
     font-family: 'Bree';
     src: url('../assets/fonts/Bree/BreeSemibold.otf') format('opentype');
     font-weight: 600;
     font-style: normal;
}

/* Fuente Bree - Oblique */
@font-face {
     font-family: 'Bree Oblique';
     src: url('../assets/fonts/Bree/BreeOblique_Reg.otf') format('opentype');
     font-weight: normal;
     font-style: oblique;
}


/* Fuente Inter - Regular */
@font-face {
     font-family: 'Inter';
     src: url('../assets/fonts/INTER/Inter-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}

/* Fuente Inter - Bold */
@font-face {
     font-family: 'Inter';
     src: url('../assets/fonts/INTER/Inter-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
}

/* Fuente Inter - ExtraBold */
@font-face {
     font-family: 'Inter';
     src: url('../assets/fonts/INTER/Inter-ExtraBold.ttf') format('truetype');
     font-weight: 800;
     font-style: normal;
}

/* Fuente Inter - Black */
@font-face {
     font-family: 'Inter';
     src: url('../assets/fonts/INTER/Inter-Black.ttf') format('truetype');
     font-weight: 900;
     font-style: normal;
}

/* Fuente Inter - Light */
@font-face {
     font-family: 'Inter';
     src: url('../assets/fonts/INTER/Inter-Light.ttf') format('truetype');
     font-weight: 300;
     font-style: normal;
}

/* Fuente Inter - ExtraLight */
@font-face {
     font-family: 'Inter';
     src: url('../assets/fonts/INTER/Inter-ExtraLight.ttf') format('truetype');
     font-weight: 200;
     font-style: normal;
}

/* Fuente Inter - SemiBold */
@font-face {
     font-family: 'Inter';
     src: url('../assets/fonts/INTER/Inter-SemiBold.ttf') format('truetype');
     font-weight: 600;
     font-style: normal;
}

/* Fuente Inter - Medium */
@font-face {
     font-family: 'Inter';
     src: url('../assets/fonts/INTER/Inter-Medium.ttf') format('truetype');
     font-weight: 500;
     font-style: normal;
}

/* Fuente Inter - Thin */
@font-face {
     font-family: 'Inter';
     src: url('../assets/fonts/INTER/Inter-Thin.ttf') format('truetype');
     font-weight: 100;
     font-style: normal;
}

@font-face {
     font-family: 'Material Symbols Outlined';
     src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v230/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
     font-weight: normal;
     font-style: normal;
}


.material-symbols-outlined {
     font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
     font-family: 'Material Symbols Outlined';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
     display: inline-block;
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
}

@media (min-width: 1400px) {

     .container,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl,
     .container-xxl {
          max-width: 1000px !important;
     }
}


html,
body {
     height: 100%;
     margin: 0;
     display: flex;
     flex-direction: column;
}

.main-content {
     flex: 1;
     /* Esto hace que el contenedor principal ocupe el espacio disponible y empuje el footer hacia abajo */
}


h1,
h2,
h3,
h4,
h5 {
     font-family: 'Bree', sans-serif;
     color: #CA0059 !important;
}

/* Estilos por defecto */
h1 {
     font-size: 48px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-bottom: 24px;
}

h2 {
     font-weight: 500;
     font-size: 32px;
     margin-bottom: 24px;
}

/* Estilos para mobile */
@media (max-width: 768px) {

     h1 {
          font-size: 32px;
          margin-bottom: 16px;
     }
}


/* Estilos para mobile */
@media (max-width: 768px) {

     h2 {
          font-size: 24px;
          margin-bottom: 16px;
     }
}



h3 {
     font-weight: 500;
}

h4 {
     font-weight: normal;
     font-size: 18px;
}


h5 {
     font-weight: normal;
     font-size: 14px;
}

p {
     font-family: 'Inter', sans-serif !important;
     color: #252A2D;
     font-family: Inter;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 28px;
     letter-spacing: 0px;
}

@media (max-width: 768px) {
     p {
         font-size: 16px;
         line-height: 28px; /* Este valor se mantiene igual */
     }
 }

.flow-text-p {
     font-family: 'Inter', sans-serif;
     color: #252A2D;
     font-size: 24px;
     letter-spacing: 0px;
     line-height: 40px;
}

/* Estilos para dispositivos móviles (máximo 768px de ancho) */
@media (max-width: 768px) {
     .flow-text-p {
          font-size: 16px;
          line-height: 29px;
     }
}

/* Para pantallas móviles */
@media (max-width: 768px) {
     .flow-text-p {
          font-size: 16px;
          letter-spacing: 0px;
     }
}

p.bold,
span.bold {
     font-weight: bold;
     letter-spacing: 0px;
}

p.light,
span.light {
     font-weight: 300;
     letter-spacing: 0px;
}

p.thin,
span.thin {
     font-weight: 100;
}

/* Estilos para el header */
.custom-header {
     background: white;
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     /* Drop Shadow */
     padding: 10px 0;
     text-align: center;
     height: 72px;
}


section:not(:last-child)::after {
     content: "";
     display: block;
     border-top: 4px solid #F6F6F6;
}

section.no-border::after {
     border-top: none !important;
 }

.logo {
     max-width: 180px;
     /* Ajusta el tamaño del logo */
}

.hide {
     display: none;
}


.p-tab-next-step {
     color: #908A8A;
     text-align: right;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-bottom: 24px;
}


.tabs {
     margin-top: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
}

/* Solo en pantallas pequeñas */
@media (max-width: 768px) {
     .tabs {
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          justify-content: flex-start;
          padding-left: 15px;
          /* Ajustado para que siempre mantenga 15px del borde */
          padding-right: 16px;
          margin-bottom: 24px;
     }


     .tabs::-webkit-scrollbar {
          display: none;
          /* Oculta la barra de scroll en WebKit (Chrome, Safari, etc.) */
     }

     .tabs {
          scrollbar-width: none;
          /* Oculta la barra de scroll en Firefox */
     }

     .tab-item {
          /* Para que cada tab ocupe solo lo necesario y no fuerce un salto de línea */
          flex: 0 0 auto;
     }
}


.tab-item {
     /* Medidas y estilo inactivo por defecto */
     display: inline-flex;
     justify-content: center;
     align-items: center;
     width: auto;
     font-size: 14px;
     height: 28px;
     padding-left: 16px;
     padding-right: 15px;
     border-radius: 40px;

     /* Inactivo */
     border: 1px solid #ABABAB;
     background: #E8E8E8;
     color: #ABABAB;

     text-decoration: none;
     /* Quita el subrayado de los <a> */
     font-family: sans-serif;
     /* Por ejemplo */
}

/* Cuando el tab está activo */
.tab-item.active {
     border: 1px solid #CA0059;
     background: #FFE0EE;
     color: #CA0059;
}

.mt-5 {
     margin-top: 40px !important;
}



.button {
     width: 324px;
     height: 52px;
     border-radius: 25.5px;
     font-size: 16px;
     font-weight: 500;
     text-align: center;
     border: none;
     cursor: not-allowed;
     background: #CA0059;
     color: #FFFFFF;
     transition: 0.3s;
}

.button:hover {
     background: #960048;
}


.button-high {
     width: 324px;
     height: 52px;
     border-radius: 25.5px;
     font-size: 16px;
     font-weight: 500;
     text-align: center;
     border: none;
     cursor: not-allowed;
     background: #CA0059;
     color: #FFFFFF;
     transition: 0.3s;
}

.button-high .active {
     background: #CA0059;
     color: #FFFFFF;
     cursor: pointer;
}

/* Ancho del 100% solo en móviles (hasta 767px de ancho) */
@media (max-width: 767px) {
     .button-high {
          width: 100%;
     }
}


.button-low {
     width: 324px;
     height: 52px;
     border-radius: 25.5px;
     font-size: 16px;
     font-weight: 500;
     text-align: center;
     border: none;
     cursor: not-allowed;
     border: 1px solid #CA0059;
     background: #ffffff;
     color: #CA0059;
     transition: 0.3s;
}

.button-low:hover {
     border: 1px solid #960048;
     color: #960048;
}

@media (max-width: 767px) {
     .button-low {
          width: 100%;
     }
}

.button-low:disabled {
     color: #908A8A;
     border: 1px solid #908A8A;
     background: #ffffff;
     /* Manteniendo el fondo blanco */
     cursor: not-allowed;
     /* Ya está en tu estilo base */
     opacity: 1;
     /* Asegura que no se reduzca la opacidad */
}



.btn-agregar {
     color: #189CE9;
     font-size: 14px;
     font-family: 'Inter', sans-serif;
     text-decoration: underline;
     background: transparent;
     border: none;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 0;
     transition: color 0.2s ease;
     /* Transición suave al hacer hover */
}

.btn-agregar:hover {
     color: #0D84CC;
     font-weight: 500;
     background: transparent;
}


.btn-guardar-compartir {
     display: inline-flex;
     align-items: center;
     border: none;
     background: transparent;
     color: #189CE9 !important;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     padding: 0;
     transition: color 0.2s ease;
}


.btn-guardar-compartir span {
     color: #189CE9 !important;
     font-size: 14px;
}


.btn-guardar-compartir:hover {
     color: #107ac7;
     /* Un tono más oscuro para el hover */
}

.btn-guardar-compartir .icono-compartir {
     width: 20px;
     height: 20px;
     margin-left: 8px;
}


.link-button-back {
     display: flex;
     text-decoration: none;
     color: #83786F;
}


.outlined-text-field,
.filled-text-field,
.standard-text-field {
     position: relative;
     margin: 20px 0;
}

.outlined-text-field input,
.filled-text-field input,
.standard-text-field input {
     width: 318px;
     height: 56px;
     padding: 10px 10px 10px 30px;
     border: 1px solid #AFB3B6;
     ;
     border-radius: 4px;
     outline: none;
     font-size: 16px;
     appearance: textfield;
     display: flex;
     align-items: center;
}

/* Estilos del label */
.outlined-text-field label,
.filled-text-field label,
.standard-text-field label {
     position: absolute;
     top: 14px;
     left: 16px;
     /* Ajustar posición para no chocar con el símbolo */
     font-size: 16px;
     color: #798388;
     transition: 0.2s ease-in-out;
     pointer-events: none;
}

/* Mueve el label arriba cuando hay foco o el usuario escribió */
.outlined-text-field input:focus+label,
.outlined-text-field input:not(:placeholder-shown)+label {
     top: -8px;
     left: 8px;
     font-size: 12px;
     background: #ffffff;
     padding: 0 4px;
}

/* Ajustes adicionales */
.filled-text-field input {
     background-color: #e0e0e0;
     border: none;
}

.standard-text-field input {
     border: none;
     border-bottom: 2px solid #AFB3B6;
     border-radius: 0;
}

.disabled input {
     background: #ddd;
     border: 2px solid #aaa;
     cursor: not-allowed;
}

.error input {
     border-color: red;
}

.error-message {
     color: red;
     font-size: 12px;
     margin-top: 4px;
}

/* Ajustes para el input con símbolo de moneda */
.currency-wrapper {
     position: relative;
     display: inline-block;
}

/* El símbolo "$" ahora estará a la izquierda dentro del input */
.currency-wrapper span {
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 16px;
     color: #060606;
     opacity: 0;
     /* Ocultar por defecto */
     transition: opacity 0.2s ease-in-out;
     pointer-events: none;
}

/* Mostrar el símbolo "$" solo cuando hay focus o un número escrito */
.currency-wrapper input:focus~span,
.currency-wrapper input:not(:placeholder-shown)~span {
     opacity: 1;
}

/* Evitar que el número se solape con el símbolo */
.currency-wrapper input {
     padding-left: 25px;
     /* Espacio para el símbolo */
}

/* Ocultar las flechas en inputs de tipo número */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
}

.subtitle-01 {
     color: #625C5C;
     text-align: center;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
}

.grid-container {
     width: 100%;
     margin: 0 auto;
}

@media (min-width: 769px) {
     .grid-container {
          max-width: 440px;
     }
}

.grid-container-2 {
     width: 100%;
     margin: 0 auto;
}

@media (min-width: 769px) {
     .grid-container-2 {
          max-width: 440px;
     }
}

.trash-icon {
     cursor: pointer;
     width: 20px;
     height: 20px;
     margin-left: 10px;
}

.total-section {
     text-align: right;
     margin-left: 20px;
     justify-content: center;
     display: flex;
     align-items: center;
}

.total-section p {
     margin: 2px 0;
     font-size: 14px;
     font-weight: 700;
}

.total-section strong {
     color: #d50057;
}

.info-input {
     display: flex;
     margin-right: 16px;
     justify-content: center;
     flex-flow: column;
     align-items: center;
     width: 80px;
}

.input-seciont-add {
     display: flex;
     justify-content: center;
}

.total-seciton-p {
     display: flex;
     justify-content: center;
}

.total-seciton-p .total-section {
     margin-right: 24px;
}

.total-seciton-p .total-section p {
     color: #CA0059;
     text-align: center;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
}

.total-seciton-p .number-section span {
     font-family: Inter;
     font-size: 14px;
     text-align: right;
}



.color-total-day {
     color: #CA0059 !important;
     font-weight: 700;
}


@media (max-width: 768px) {
     .input-seciont-add {
          display: flex;
          flex-direction: column;
          /* Apila los elementos verticalmente */
          align-items: flex-start;
          gap: 12px;
     }

     .input-seciont-add .d-flex.align-items-center {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 8px;
     }

     .info-input {
          display: flex;
          align-items: center;
          gap: 8px;
          width: 35%;
     }

     .info-input img {
          width: 24px;
     }

     .info-input span {
          font-size: 14px;
     }

     .outlined-text-field.currency-wrapper {
          flex-grow: 1;
     }

     .outlined-text-field input {
          width: 100%;
          font-size: 14px;
          padding: 24px;
     }

     .trash-icon {
          width: 20px;
          height: 20px;
          cursor: pointer;
     }

     .total-section {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: right;
          margin-left: auto;
          margin-right: auto;
          max-width: 300px;
          margin-bottom: 32px;
     }


     /* Sección de totales */
     .total-seciton-p {
          display: flex;
          justify-content: center;
     }

     .total-seciton-p .number-section {
          text-align: left;
          /* Asegura que el texto dentro no se centre */
     }

     .total-seciton-p .number-section p {
          font-size: 14px;
          font-weight: 600;
          color: #444444;
          margin: 4px 0;
     }

     .total-seciton-p .number-section span {
          font-size: 14px;
          color: #000000;
     }
}


.btn-agregar {
     display: block;
     margin: 0 auto;
     margin-top: 16px;
}


.hormiga-text {
     color: #625C5C;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}

.text-variant-01 {
     color: #625C5C;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}

.responsive-text {
     text-align: center;
     /* Por defecto, en móvil */
}

@media (min-width: 768px) {
     .responsive-text {
          text-align: left;
     }
}

.m-top-20 {
     margin-top: 0px;
}

@media (min-width: 768px) {
     .m-top-20 {
          margin-top: 50px;
     }
}


.custom-container {
     width: 100%;
     margin: 0 auto;
     padding: 0 15px;
     /* Asegura espacio lateral en móviles */
}

@media (min-width: 1400px) {
     .custom-container {
          max-width: 612px;
     }
}


.custom-container-2 {
     width: 100%;
     margin: 0 auto;
     padding: 0 15px;
     /* Asegura espacio lateral en móviles */
}

@media (min-width: 1400px) {
     .custom-container-2 {
          max-width: 812px;
     }
}

.text-prd {
     color: #060606;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}

.custom-link {
     color: #189CE9;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-skip-ink: none;
     text-decoration-thickness: auto;
     text-underline-offset: auto;
     text-underline-position: from-font;
}


@media (max-width: 767.98px) {
     .botones-container {
          display: flex;
          flex-direction: column;
     }

     .botones-container .btn-guardar-compartir {
          order: 1;
     }

     .botones-container p {
          order: 2;
          margin-top: 16px;
     }

     .botones-container #reiniciarButton {
          order: 3;
     }
}


.variable-text-strong {
     color: #625C5C;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
}


.number-text-progres {
     margin-top: 24px;
     color: #625C5C;
     text-align: center;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
}


.text-dream-head {
     margin-top: 8px;
     color: #908A8A;
     text-align: center;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}


/* Estilos para el botón de cerrar personalizado */
.btn-close-custom {
     background: none;
     border: none;
     position: absolute;
     top: 10px;
     right: 10px;
     width: 30px;
     height: 30px;
     cursor: pointer;
}

.btn-close-custom img {
     width: 100%;
     height: auto;
     transition: transform 0.2s ease-in-out;
}

.btn-close-custom img:hover {
     transform: scale(1.1);
}


@media (min-width: 576px) {
     .modal-sm {
          --bs-modal-width: 427px;
     }
}


.text-share-media {
     font-size: 24px !important;
}


.gasto-btn img {
     width: 24px;
     height: 24px;
}

.dream-icon img {
     width: 24px;
     height: 24px;
     margin-top: 20px;
}


/* Estilos para el footer */
.custom-footer {
     background: white;
     padding: 20px 0;
     border-top: 1px solid #D8DADA;
     text-align: center;
     width: 100%;
     margin-top: auto;
     /* Esto mantiene el footer pegado abajo */
}

/* Logo de Compartamos Banco */
.footer-logo {
     max-width: 120px;
     transform: translate(0, -4px);
     /* Ajusta la posición */
}

/* Contenedor de la empresa */
.empresa-text {
     color: #333;
     font-size: 14px;
     margin-bottom: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 8px;
     gap: 8px;
}

/* Logo de Gentera dentro del texto */
.footer-gentera-logo {
     max-width: 70px;
     height: auto;
     display: inline-block;
     vertical-align: middle;
}

/* Estilos para los enlaces */
.footer-link {
     color: #CE0058;
     font-size: 14px;
     text-decoration: underline;
}

.footer-link:hover {
     color: #960048;
}


/* Quitar el comportamiento fijo en móviles */
@media (max-width: 767px) {
     .custom-footer {
          position: static;
          /* Hace que no sea fijo en móviles */
          margin-top: 60px;
          /* Evita separación innecesaria */
     }
}

.dream-text-done {
     color: #625C5C;
     text-align: center;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
}


.bk-color-main {
     background: radial-gradient(
         319.58% 141.42% at 0% 0%,
         rgba(206, 0, 88, 0.00) 0%,
         rgba(206, 0, 88, 0.05) 100%
     ), #ce00591a; /* Mantiene el color base con opacidad */
 }
 

.bk-color-terapia {
     background-color: #F0EFEF;
     /* Reduce la opacidad del elemento y su contenido */
}


.card {
     background: white !important;
     border-radius: 16px !important;
     box-shadow: 1px 3px 12px #00000014 !important;
     border: 1px solid transparent !important;
}

.card-section-space {
     padding: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
}

.card-section-space img {
     width: 100px;
}



.bottom-nav {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: white;
     padding: 15px 0;
     box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
     text-align: center;
     z-index: 1000;
}

.bottom-nav .button {
     width: 90%;
     max-width: 350px;
}

.footer-margin-bottom {
     margin-bottom: 100px;
}

.texto-escritorio {
     text-align: center;
}

.text-start {
     text-align: left !important;
}


/* En móviles se alinea a la izquierda */
@media (max-width: 768px) {
     .texto-escritorio {
          text-align: left;
          margin-left: 0;
          line-height: 25px;
          /* Asegura que no haya margen a la izquierda */
     }
}


.img-icon {
     width: 48px;
     height: 48px;
     object-fit: contain;
     /* Opcional, para ajustar la imagen */
     margin: 0 auto;
     /* Centra la imagen */
}

@media (min-width: 992px) {
     .img-icon {
          width: 64px;
          height: 64px;
     }
}


.text-icon {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
     font-weight: 600;
}

.text-icon span {
     font-size: 18px;
     color: #CE0058;
     margin-left: 4px;

}


.custom-accordion-item {
     border: none;
     margin-bottom: 1rem;
     border-radius: 8px;
     overflow: hidden;
     background-color: #fff;
     border-radius: 16px !important;
     box-shadow: 1px 3px 12px #00000014 !important;
     border: 1px solid transparent !important;
}

.accordion-body p {
     font-size: 14px;
}

.custom-accordion-button {
     display: flex;
     align-items: center;
     gap: 1rem;
     background-color: #fff;
     border: none;
     border-radius: 8px;
     padding: 1rem;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     color: #000;
}

.custom-accordion-button .step-toggle-icon {
     transition: transform 0.3s ease;
     /* Transición para suavizar la rotación */
}

.custom-accordion-button:not(.collapsed) .step-toggle-icon {
     transform: rotate(45deg);
     /* Rota 45° cuando está abierto */
}


.custom-accordion-button::after {
     display: none;
}


.step-icon {
     width: 40px;
     height: 40px;
     object-fit: contain;
}


.step-info {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
}


.step-badge {
     font-family: 'Inter', sans-serif !important;
     font-size: 0.75rem;
     color: #CE0058;
     min-width: 60px;
     background-color: #FEE0EC;
     padding: 0.2rem 0.5rem;
     border-radius: 16px;
     margin-bottom: 0.25rem;
     display: inline-block;
     text-align: center;
}


.step-title {
     font-weight: 600;
     font-size: 14px;
     color: #252A2D;
     font-family: 'Inter', sans-serif !important;
}

/* Ícono de Material a la derecha (add_circle) */
.step-toggle-icon {
     font-size: 24px;
     transition: transform 0.3s ease;
}

/* Cuando se añade la clase "rotated", rota 45 grados */
.step-toggle-icon.rotated {
     transform: rotate(45deg);
}

/* Opcional: cambio de color al expandir */
.custom-accordion-button:not(.collapsed) {
     background-color: #fdfdfd;
     /* o el color que desees */
     box-shadow: none;
}


.cursor-p {
     cursor: pointer;
}

.mt-40 {
     margin-top: 40px;
}

.p-text-14 {
     font-size: 14px;
     line-height: 24px;
}

.line-height-28 {
     line-height: 28px;
}

.w-150 {
     width: 150px;
}

@media (min-width: 576px) {
     .modal-dialog {
          max-width: 50%;
          margin-right: auto;
          margin-left: auto;
     }
}

.vertical-steps {
     max-width: 400px;
     margin: 0 auto;
}

.step-item {
     position: relative;
     padding: 1rem 2rem;
}

.step-number {
     font-family: 'Bree', sans-serif;
     position: absolute;
     top: 3px;
     left: 13px;
     width: 40px;
     height: 40px;
     background-color: #ffffff;
     color: #CE0058;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     font-weight: bold;
}

.step-content {
     margin-left: 39px;
     text-align: left;
     transform: translate(0px, -8px);
}

.step-item::after {
     content: "";
     position: absolute;
     top: 3rem;
     left: 2rem;
     width: 3px;
     border-radius: 15px;
     height: calc(100% - 3rem);
     background-color: #CE0058;
}

.step-item:last-child::after {
     display: none;
}

@media (min-width: 768px) {
     .vertical-steps {
          display: none;
     }
}

/* Estilos para la versión escritorio (se muestra a partir de md) */
@media (min-width: 768px) {

     /* Contenedor general de cada paso (opcional si quieres algo extra) */
     .step-desktop {
          /* Ejemplo de margen o padding extra */
          /* padding: 1rem 0; */
     }

     /* Círculo blanco con el número */
     .circle-number {
          font-family: 'Bree', sans-serif;
          width: 40px;
          height: 40px;
          background-color: #ffffff;
          /* Círculo blanco */
          color: #CE0058;
          /* Color del número */
          border-radius: 50%;
          display: inline-flex;
          /* Para centrar vertical y horizontalmente */
          align-items: center;
          justify-content: center;
          font-size: 1.25rem;
          font-weight: bold;
          margin-bottom: 0.5rem;
          /* Espacio entre el círculo y el título */
          /* Opcional: si quieres un borde de color */
          /* border: 2px solid #CE0058; */
     }

     /* Asegúrate de alinear el texto a la izquierda */
     .text-left {
          text-align: left;
     }
}


.subtitle-12 {
     font-size: 18px;
     font-weight: 700;
     font-family: 'Inter', sans-serif;
     color: #252A2D;
     text-align: left;
}


.bk-color-gradient {
     background: radial-gradient(
         118.94% 141.42% at 0% 0%,
         rgba(206, 0, 88, 0.00) 0%,
         rgba(206, 0, 88, 0.10) 50.52%,
         rgba(255, 163, 0, 0.10) 78.13%,
         rgba(255, 163, 0, 0.00) 99.48%
     );
 }
 
 /* En escritorio (pantallas mayores a 1024px), el gradiente se mantiene */
 @media screen and (min-width: 1024px) {
     .bk-color-gradient {
         background: radial-gradient(
             118.94% 141.42% at 0% 0%,
             rgba(206, 0, 88, 0.00) 0%,
             rgba(206, 0, 88, 0.10) 50.52%,
             rgba(255, 163, 0, 0.10) 78.13%,
             rgba(255, 163, 0, 0.00) 99.48%
         );
     }
 }
 
 

.info-text {
     color: #252A2D;
     font-family: 'Inter', sans-serif !important;
     font-size: 16px;
}

.carousel {
     display: flex;
     justify-content: center; /* Centra los items */
     align-items: center; /* Centra verticalmente (si es necesario) */
     overflow: hidden; /* Para evitar scroll innecesario */
     width: 100%;
     position: relative;
 }
 
 .carousel-item {
     position: relative;
     display: none;
     width: 95%; /* Ajusta el tamaño de los items */
     max-width: 500px; /* Ajusta el máximo si es necesario */
     margin: 0 auto; /* Centra horizontalmente */
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transition: transform 0.6s ease-in-out;
 }
 
 .carousel-item.active { 
     display: block; /* Muestra el item activo */
 }