/* MARK: Fondos dinámicos */
.bg-none {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
}


.bg-morado {
    background-image: url('../assets/images/BG-morado.png');
}

.bg-morado-mobile {
    background-image: url('../assets/images/BG-morado-mobile.png');
}

.bg-gris {
    background-image: url('../assets/images/BG-gris.png');
}

.bg-gris-mobile {
    background-image: url('../assets/images/BG-gris-mobile.png');
}

.bg-rosa-mobile {
    background-image: url('../assets/images/BG-rosa-mobile.png');
    background-position: center 244px;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-gris-mangenta {
    background-image: url('../assets/images/bg-gris-mangenta.png');
}

.bg-amarillo {
    background-image: url('../assets/images/BG-amarillo.png');
}

.bg-amarillo-mobile {
    background-image: url('../assets/images/BG-amarillo-mobile.png');
}

.bg-amarillo-opacy {
    background-image: url('../assets/images/BG-amarillo-opacy.png');
}

.bg-amarillo-mobile-opacy {
    background-image: url('../assets/images/BG-amarillo-mobile-opacy.png');
}

.bg-azul {
    background-image: url('../assets/images/BG-blue.png');
}

.bg-azul-mobile {
    background-image: url('../assets/images/BG-blue-mobile.png');
}

.no-bg {
    background: none !important;
    background-image: none !important;
    background-color: #fff !important; /* O el color que prefieras */
  }
  
  
body {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: scroll;
    transition: background-image 0.5s ease-in-out;
    min-height: 100vh;
}
/* MARK: demas estilos */
.home__title {
    font-family: bree;
    font-size: 28px;
    line-height: 36px;
    margin: 0;
}

.home__txt {
    font-size: 16px;
    margin-bottom: 20px
}

.home__line {
    width: 100%;
    margin: auto;
    height: 2px;
    background-color: #CEC9C6
}

.home__msg {
    display: none;
    color: #fff;
    background-color: #C91A0F;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    margin-bottom: 42px;
}

.question {
    color: #252A2D;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 24px;
}

.progress__label {
    margin-top: 8px;
    margin-bottom: 24px;
}

.progress__bar {
    width: 100%;
    margin: auto;
    height: 5px;
    border-radius: 92px;
    background-color: #CEC9C6
}

.progress__line {
    background-color: #CE0058;
    width: 0;
    height: 100%;
    border-radius: 92px;
    border-radius: 20px;
}

.progress__line.p30 {
    width: 30%
}

.progress__line.p60 {
    width: 60%
}

.progress__line.p50 {
    width: 50%
}

.progress__line.p80 {
    width: 90%
}

.progress__line.p100 {
    width: 100%
}

.question__content {
    display: none
}

#q1 {
    display: block
}

.answer {
    /* font-size:14px; */
    border-radius: 6px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 3px 6px #00000021;
    margin-bottom: 20px;
    cursor: pointer
}


.material-symbols-outlined {
    font-size: 24px;
    margin-right: 2px;
}


.select-container {
    position: relative;
    display: inline-block;
    width: 32%;
    /* Para que los 3 selects ocupen una línea */
    margin-right: 2%;
    /* Espaciado entre ellos */
}

.select-container:last-child {
    margin-right: 0;
    /* Evita margen extra en el último select */
}

.select-container select {
    width: 100%;
    padding: 8px 30px 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    appearance: none;
    /* Ocultar la flecha por defecto */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    font-size: 16px;
}

.select-container i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-80%);
    pointer-events: none;
    /* Evita que el icono interfiera con el clic */
    color: #7f7f7f;
}

/* Estilo para el contenedor del select */
.select-container {
    position: relative;
    display: inline-block;
    width: 100%;
    /* Se adapta al ancho del contenedor */
}

/* Estilo para el select */
.select-container select {
    width: 100%;
    padding: 8px 30px 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    appearance: none;
    opacity: 1 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    font-size: 16px;
}

/* Ícono dentro del select */
.select-container i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-80%);
    pointer-events: none;
    /* Evita que el icono interfiera con el clic */
    color: #7f7f7f;
}


.inter-font {
    font-family: 'Inter', sans-serif;

}

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


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

.rosa-bg {
    background-position: center 244px !important;
}

.header-back-icons {
    display: flex !important;
    align-items: center !important;
    position: relative;
    /* Necesario para que el icono se posicione dentro de este contenedor */
}

.header-back-icons div#btnBack:last-child {
    position: absolute;
    right: 0;
    /* Siempre pegado a la derecha */
    margin-bottom: 15px;
    cursor: pointer;
}


.header-back-icons div#btnBack span {
    color: #141414;
}



/* Mark: forms habilitar y deshabilitar*/
/* Ocultar los íconos nativos en Safari para inputs tipo "tel" */
input[type="tel"]::-webkit-contacts-auto-fill-button,
input[type="tel"]::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

input[type="checkbox"] {
    -webkit-appearance: checkbox; /* Fuerza estilo nativo pero consistente */
    appearance: checkbox;
    height: 16px;
    width: 16px;
  }
  

.campoFormulario input:disabled,
.select-container select:disabled,
.disableForm:disabled {
    color: #5E6A71 !important;
    background-color: #D8DADA !important;
}

.campoFormulario input:disabled::placeholder,
.campoFormulario input:disabled::-webkit-input-placeholder,
.campoFormulario input:disabled:-ms-input-placeholder,
.select-container select:disabled::placeholder,
.select-container select:disabled::-webkit-input-placeholder,
.select-container select:disabled:-ms-input-placeholder,
.disableForm:disabled::placeholder,
.disableForm:disabled::-webkit-input-placeholder,
.disableForm:disabled:-ms-input-placeholder {
    color: #5E6A71 !important;
}

.radio-button input.genero:disabled+label.genero {
    background-color: #F3F3F2 !important;
    border: 1px solid #D8DADA !important;
    color: #949C9F !important;
}

.carousel-prev.inactive {
    background-color: #D8D8D8;
    color: #333;
}

.carousel-next.inactive {
    background-color: #D8D8D8;
    color: #333;
}

.carousel-prev:not(.inactive),
.carousel-next:not(.inactive) {
    background-color: #CE0058;
    color: white;
}

/* MARK: Posición del botón según visibilidad */
.btn-fixed {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 999;
}

.btn-relative {
    position: relative;
}



/* MARK: Estilos adaptados para secciones específicas */
/* Estilos generales del título */
.home__title {
    font-weight: bold;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {

    .home__title,
    .question {
        text-align: center;
    }
}

/* Estilos por defecto para .main */
.main {
    background: rgb(255, 255, 255);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* En mobile (menos de 768px), quitar fondo y sombra */
@media screen and (max-width: 767px) {
    .main {
        background: none !important;
        box-shadow: none !important;
    }
}

/* MARK: Estilos aplicados cuando q4_1 o q4_2 están visibles */
.main-no-style {
    background: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
}

.main-default-style {
    background: #fff !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
}

.wrapper-custom {
    max-width: 1240px;
    display: flex;
    justify-content: center;
}

.card-flex-auto {
    flex: auto !important;
}

.text-center {
    text-align: center !important;
}

.flex-column-center {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
}


/* MAIN default (se restaura si no hay q4_1 o q4_2 visibles) */
.main-default-style {
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* MAIN sin estilo cuando q4_1 o q4_2 están visibles */
.main-no-style {
    background: none;
    box-shadow: none;
    max-width: 100%;
    width: 100%;
}

/* WRAPPER personalizado */
.wrapper-custom {
    max-width: 1240px;
    display: flex;
    justify-content: center;
}

/* Centrado de texto */
.text-center {
    text-align: center;
}

/* Cards del carrusel con flex automático */
.card-flex-auto {
    flex: auto;
}

/* Flex column centrado */
.flex-column-center {
    flex-direction: column;
    text-align: center;
}

/* Q3_2 grid para escritorio */
.grid-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
}

/* Q3_2 estilo para mobile (fallback si no hay grid) */
.flex-column-form {
    display: flex;
    flex-direction: column;
}

/* Elementos que ocupan las dos columnas en escritorio */
.span-2-columns {
    grid-column: span 2 !important;
}

/* Ancho de .main dentro de q3_2 para escritorio */
.main-40-width {
    max-width: 40% !important;
}



/* MARK: Estilos grid forms */

@media (min-width: 1024px) {
    #q3_2 .d-flex.flex-column.pt-3 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0px;
    }
  
    #q3_2 .progress,
    #q3_2 .progress__label,
    #q3_2 .home__line,
    #q3_2 .question,
    #q3_2 .contenidoGeneralForm {
      grid-column: span 2;
    }
  
    #q3_2 .main {
      max-width: 40%;
    }
  }
  
  /* En pantallas menores a 1024px, solo si quieres asegurarte del fallback */
  @media (max-width: 1023px) {
    #q3_2 .d-flex.flex-column.pt-3 {
      display: flex;
      flex-direction: column;
    }
  
    #q3_2 .main {
      max-width: 500px;
    }
  }

div.imgAvisoUp {
    content: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}