:root {
  --black-color: #000000;
  --white-color: #ffffff;
  --green-color: #00b129;
  --green-color-90: rgba(0, 177, 41, .9);
  --blue-color: #4acbfd;
  --blue-color-25: rgba(136, 201, 255, .25);
}

/* Para navegadores webkit como Chrome y Safari */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.6);}
::-webkit-scrollbar-thumb {background-color: var(--blue-color); border-radius: 10px;}
.scrollable {scrollbar-width: thin; scrollbar-color: var(--blue-color) rgba(0, 0, 0, 0.6); }

/*Text Size*/
.tx-title {
  font-size: clamp(20px, 2vw, 42px);
}

/*Text Colors*/
.tx-white {
  color: var(--white-color) !important;
}
.tx-black {
  color: var(--black-color) !important;
}

.tx-undederline{text-decoration: underline;}

/*Background*/
.bg-general {
  background-image: url(../images/material/bg-corteva.webp) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.bg-white {
  background: var(--white-color);
}
.bg-green {
  background: var(--green-color-90);
}

/*Forms*/
div.form-control {
  padding: .375rem .375rem;
}
.form-control {
  border-radius: 3px;
}
.form-control:focus,
.form-control-area:focus,
.form-control-numero:focus {
  border-color: var(--blue-color);
  box-shadow: 0 0 0 .25rem var(--blue-color-25);
  outline: none!important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.form-control-numero {
  border: none !important;
}
.form-control-area::placeholder {
  color: var(--white-color);
}
.form-control-area {
  background-color: var(--blue-color);
  border: none !important;
  color: var(--white-color) !important;
  text-align: center !important;
  width: 15%;
  max-width: 14%;
}

.form-control-numero {
  width: 85%;
  max-width: 84%;
}

/*Question Divs*/
#question-section{min-height: 56vh;}
.show-question {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.show-question.question-active {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}


/*Form Classes*/
.required-fiel{color: red;}
/* Formulario para opciones de respuesta */
.respuesta-container {
  display: flex;
  justify-content: center;
  border: 2px solid white;
  border-radius: 1px;
  padding: 5px;
  gap: 5px;
  width: 100%; /* Ajustar el tamaño según lo necesario */
  margin: 0 auto;
}

input[type="radio"].btn-input {
  display: none;
}


input[type="radio"].btn-input:checked + .product-label::before {
  background-color: #4acbfd;
}

.respuesta-option {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 5px 0;
  cursor: pointer;
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

input[type="radio"]:checked + .respuesta-option {
  background-color: #80c5ff; /* Color azul como el de la opción "Sí" seleccionada */
}

/* Estilos para selección de productos */
.product-selection {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.product-label {
  font-size: 20px;
}

input[type="radio"].btn-input + .product-label::before {
  content: '';
  display: inline-flex;
  margin: auto;
  width: 20px;
  height: 20px;
  border: 4px solid white;
  border-radius: 50%;
  margin-right: 10px;
  background-color: transparent;
}

input[type="radio"].btn-input:checked + .product-label::after {
  background-color: #80c5ff;
}

input[type="radio"].btn-input + .product-label {
  transition: background-color 0.3s ease;
}

.modal-transparent{background-color: transparent!important;border: 0px solid transparent;}
div#loaderModal {
  background: rgba(0, 0, 0, 0.8); /* Un fondo semitransparente opcional */
  backdrop-filter: blur(5px);
}

/*BTNs*/
.btn-atras,
.btn-siguiente {
  border: none;
  background: none;
  padding: 10px 50px;
  border-radius: 3px;
  color: black;
  border: 1px solid var(--blue-color);
  transition: color 0.3s ease;
}
.btn-siguiente {
  background-color: var(--blue-color);
}

.btn-siguiente:disabled { 
  color: darkgray; /* Color del texto cuando está deshabilitado */
  cursor: not-allowed;
  transition: color 0.3s ease;
}

/*Timeline*/
.timeline {
  position: relative;
  width: 5px;
  height: 400px; /* Ajusta según el tamaño necesario */
  max-height: 50vh;
  background-color: #00a0e4; /* Color de la línea */
  border-radius: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-left: 10%;}

.circle {
  width: 20px;
  height: 20px;
  background-color: #00a0e4; /* Color azul de los círculos */
  border-radius: 50%;
  border: 5px solid transparent;
  transition: all 0.5s ease; /* Suaviza la transformación */
}

.active {
  transform: scale(1.25); /* Aumenta el tamaño en 25% */
  background-color: white; /* Cambia el fondo a blanco */
  border-color: #00a0e4;
}

.circle:not(.active):hover {
  background-color: #007ba1; /* Cambia el color al hacer hover en los inactivos */
}

/*Prefooter*/
img.img-prefooter {
  width: 40%;
  max-width: 270px;
  min-width: 130px;
}

.mob {
  display: none;
}

body {
  font-family: 'Gilroy-Regular';
  background: black;
}

a,
a:hover {
  color: var(--bs-body-color);
  text-decoration: none;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1;
  min-height: 100vh;
}

/*Footer*/

#footer {
  background-color: var(--black-color);
  padding: 4vw 5vw !important;
}

.logo-rrss {
  padding-right: 10px;
  width: 2.3vw;
}

.logo-footer {
  width: 11vw;
  float: right;
}

/*Start Celular CSS*/
@media screen and (max-width: 900px) {
    .desk {
        display: none;
    }
    .mob {
        display: inline-flex;
    }


    #question-section{min-height: 56vh;}
    .tx-title{font-size: 15px;}

    /*Form*/
    .form-control-area {
        width: 40%;
    }
    .form-control-numero {
        width: 55%;
    }
    .btn-atras,
    .btn-siguiente {
        padding: 5px 20px;
    }

    .pl-btn {
        padding-left: 1.5rem !important;
    }
    .pr-btn {
        padding-right: 1.5rem !important;
    }

    /*Forms*/
    .form-control,.btn-siguiente,.btn-atras,.respuesta-option {
      font-size: 12px;
    }
    .product-label{font-size: 13px;}
    .product-selection {
      display: grid;
      grid-template-columns: repeat(1, 1fr); /* Tres columnas para la primera fila */
      gap: 10px; /* Espacio entre los elementos */
    }

    .product-selection-1 {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
    }
  
  .product-row {
      display: flex;
      justify-content: center; /* Centra los elementos dentro de esta fila */
      gap: 10px; /* Espacio entre los elementos */
  }
  
  .form-control-area {
    width: 30%;
    max-width: 29%;
  }
  
  .form-control-numero {
    width: 70%;
    max-width: 69%;
  }
  
  .product-item {
      display: flex; /* Para centrar el contenido en el label */
      align-items: center; /* Centra verticalmente los elementos dentro del label */
      justify-content: center; /* Centra horizontalmente los elementos dentro del label */
      padding: 10px; /* Espaciado alrededor de cada opción */
      background-color: var(--blue-color); /* Cambia según el color que desees */
      border-radius: 5px; /* Bordes redondeados para cada opción */
      cursor: pointer; /* Cambia el cursor a puntero */
      transition: background-color 0.3s; /* Transición suave para el color de fondo */
  }
  
  .btn-input {
      display: none; /* Oculta el input, pero permite la interacción con el label */
  }
  
  .product-item input:checked + .product-label {
      font-weight: bold; /* Resalta la opción seleccionada */
      color: white; /* Cambia el color del texto cuando está seleccionado */
  }

  input[type="radio"].btn-input:checked + .product-label::before {
      background-color: #0ca528;
  }

    /*Timeline*/
    .timeline {
        margin-left: 10px;
    }

    /*Footer*/
    #footer {
        padding: 3vw 3vw !important;
    }
    .logo-rrss {
        width: 7vw;
    }
    .logo-footer {
        width: 27vw;
    }
}

/*Start Fonts*/
.Gilroy-Light {
  font-family: 'Gilroy-Light' !important;
}
@font-face {
  font-family: 'Gilroy-Light';
  src: url("../fonts/Gilroy-Light.otf");
  font-weight: normal;
  font-style: normal;
}

.Gilroy-Medium {
  font-family: 'Gilroy-Medium' !important;
}
@font-face {
  font-family: 'Gilroy-Medium';
  src: url("../fonts/Gilroy-Medium.otf");
  font-weight: normal;
  font-style: normal;
}

.Gilroy-Regular {
  font-family: 'Gilroy-Regular' !important;
}
@font-face {
  font-family: 'Gilroy-Regular';
  src: url("../fonts/Gilroy-Regular.otf");
  font-weight: normal;
  font-style: normal;
}

.Gilroy-SemiBold {
  font-family: 'Gilroy-SemiBold' !important;
}
@font-face {
  font-family: 'Gilroy-SemiBold';
  src: url("../fonts/Gilroy-SemiBold.ttf");
  font-weight: normal;
  font-style: normal;
}

.Gilroy-Bold {
  font-family: 'Gilroy-Bold' !important;
}
@font-face {
  font-family: 'Gilroy-Bold';
  src: url("../fonts/Gilroy-Bold.otf");
  font-weight: normal;
  font-style: normal;
}

.Gilroy-ExtraBold {
  font-family: 'Gilroy-ExtraBold' !important;
}
@font-face {
  font-family: 'Gilroy-ExtraBold';
  src: url("../fonts/Gilroy-ExtraBold.otf");
  font-weight: normal;
  font-style: normal;
}

.Raleway-Bold {
  font-family: 'Raleway-Bold' !important;
}
@font-face {
  font-family: 'Raleway-Bold';
  src: url("../fonts/Raleway-Bold.ttf");
  font-weight: normal;
  font-style: normal;
}
/*End Fonts*/