input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
  padding: 15px;
}

.pt-3 {
  padding-top: 10px;
  ;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.overflow-auto {
  overflow: auto;
}

.campoFormulario {
  width: 50%;
  /*padding: 5px 10px 5px 0px;*/
  padding: 5px;
  font-family: 'Inter';
  color: black;
  margin: 1.8% 0%;
}

.campoFormulario p {
  font-size: 14px;
}

.campoFormulario input {
  background-color: #ffffff;
  border-radius: 5px;
}

.campoFormulario input:focus {
  background-color: #ffffff;
  outline: none;
  border-radius: 5px;
}

.campoFormulario {
  width: 100%;
}

.camposObligatorios {
  color: #5E6A71;
}

.camposObligatoriosText {
  float: left;
  color: #83786F;
  font-size: 14px;
  margin: 28px 0px 24px;
}

.camposObligatoriosText {
  margin-right: 15px;
}

.selectedForm {
  background-color: #ffffff;
  border-radius: 5px;
}

.selectedForm:focus {
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #e70c6b;
  border-radius: 5px;
}

.selectFecha {
  background-image:
    linear-gradient(45deg, transparent 50%, #ce0058 50%),
    linear-gradient(135deg, #ce0058 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  appearance: none;
  width: 32.4%;
  /*DYMM*/
}

.selectFecha option:checked {
  background: black;
  color: white;
}

.disableForm {
  background-color: #EDECF0 !important;
  border: 0px;
}

.mensajeCampoError {
  color: #C91A0F;
  margin-bottom: 0px;
  display: none;
  float: left;
  font-size: 12px !important;
}

.inputError {
  border: 1px solid #C91A0F !important;
}

/*GENERO*/

.radio-button {
  margin: 10px;
}

.radio-display {
  display: flex;
  justify-content: space-between;
}

.radio-button input[type="radio"] {
  opacity: 0;
  position: absolute;
  width: 0;
}

.radio-button label.genero {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #D8DADA;
  border-radius: 36px;
  cursor: pointer;
  color: #252A2D;
  width: 100%;
  height: 56px;
  margin: 4px;
  text-align: center;
  /* Asegura que el texto esté centrado */
}


.radio-button label.genero:hover {
  background-color: #ffffff;
  border: 1px solid #D8DADA;
  color: #252A2D;
}


.radio-button input[type="radio"]:focus+label.genero {
  border: 1px #444;
}

.radio-button input[type="radio"]:checked+label.genero {
  background-color: #FEE0EC;
  border: 1px solid #CE0058;
  color: #910048;
}



/* fondo oscuro detrás del modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Fondo oscuro */
}

/* contenido del modal (la caja blanca) */
.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 70%;
  max-width: 400px;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* botón de cerrar */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #CE0058;
  text-decoration: none;
  cursor: pointer;
}



/*MARK: carrousel */


#previous-winners {
  overflow-x: hidden;
  width: 100%;
}

#previous-winners h2 {
  font-weight: 600;
  font-size: 30px;
  line-height: 42px;
  color: var(--deep-pink);
  margin-top: 0;
  margin-bottom: 16px;
}

#previous-winners span.font-inter {
  display: block;
  color: var(--charcoal-gray);
  margin-bottom: 40px;
}

#previous-winners .carousel {
  padding-block: 24px;
  display: flex;
  column-gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

#previous-winners .carousel .card {
  flex: 0 0 80%;
  scroll-snap-align: start;
  border-radius: 6px;
  overflow: hidden;
  width: 344px;
  box-shadow: 0px 3px 6px #00000029;

}

#previous-winners .carousel .card .thumbnail {
  display: flex;
  height: 187px;
  justify-content: center;
  align-items: center;
}

#previous-winners .carousel .card:nth-child(1) .thumbnail {
  background-image: url("../assets/images/dile-si-a-un-credito-extra.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center 40%;
}

#previous-winners .carousel .card:nth-child(2) .thumbnail {
  background-image: url("../assets/images/credito-individual.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center 40%;
}

#previous-winners .carousel .card:nth-child(3) .thumbnail {
  background-image: url("../assets/images/imagen_3.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center 40%;
}


/* Imagen para "Cuenta a mi favor" */
.thumbnail.cuenta-a-mi-favor {
  background-image: url("../assets/images/cuenta-a-mi-favor.jpg") !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Imagen para "Inversiones" */
.thumbnail.inversiones {
  background-image: url("../assets/images/inversiones.jpg") !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


/* Imagenes para credito individual */
.thumbnail.crece-mejora-individual {
  background-image: url("../assets/images/dile-si-a-un-credito-extra.jpg") !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Imagen para "Inversiones" */
.thumbnail.credito-emergencia-individual {
  background-image: url("../assets/images/credito-de-emergencia.jpg") !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}



#previous-winners .carousel .card .thumbnail .play_button-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

#previous-winners .carousel .card .thumbnail .play_button-circle .play_button {
  width: 0;
  height: 0;
  margin-left: 2px;
  /* padding-left: 10px; */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 12px solid white;
}

#previous-winners .carousel .card .card_footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--charcoal-gray);
  font-family: "Inter", sans-serif;
  padding: 40px 24px;
}

#previous-winners .carousel .card .card_footer .card_footer-name {
  font-weight: 700;
  font-size: 18px;
}

#previous-winners .carousel .card .card_footer .card_footer-description {
  font-weight: 400;
}

#previous-winners .grid {
  display: none;
}

/*MARK: FOOTER*/


/* Ocultar en dispositivos móviles */
@media (max-width: 1024px) {
  .desktop-footer {
      display: none;
  }
}

/* Estilos del footer */
.desktop-footer {

  width: 100%;
  text-align: center;
  padding: 32px 20px 20px 20px;
  margin: 32px 0px 32px 0px;
  background-color: #fff;
  font-size: 14px;
  display: flex;
  height: 180px;
  border-top: 1px solid #EFEFEF;
  justify-content: center;
}

.footer-content {
  max-width: 600px;
  width: 100%;
}

/* Centrar el texto y los elementos */
.footer-content p {
  text-align: center;
  margin: 5px 0;
  font-size: 14px;
}

/* Ajuste para centrar el logo "Una empresa de GENTERA" */
.footer-content p img {
  vertical-align: middle;
  display: inline-block;
  margin-left: 5px;
  transform: translate(-4px, -6px);
}

/* Estilos de los enlaces */
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 17px;
}

.footer-link {
  color: #CE0058;
  text-decoration: underline solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: 0.3s ease;
}

.footer-link:hover {
  opacity: 0.8;
}



/* MARK: DESKTOP */
@media (min-width: 1024px) {
  #previous-winners {
    padding: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #previous-winners h2 {
    font-size: 48px;
    line-height: 56px;
    max-width: 600px;
    text-align: center;
    margin-bottom: 48px;
  }

  #previous-winners span.font-inter {
    font-size: 18px;
    margin-bottom: 72px;
  }

  #previous-winners .carousel {
    display: none;
  }

  #previous-winners .grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    width: 100%;
  }

  #previous-winners .grid .card {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 3px 6px #00000029;
  }

  #previous-winners .grid .card .thumbnail {
    display: flex;
    height: 256px;
    justify-content: center;
    align-items: center;
  }

  #previous-winners .grid .card:nth-child(1) .thumbnail {
    background-image: url("../assets/images/imagen_1.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center 40%;
  }

  #previous-winners .grid .card:nth-child(2) .thumbnail {
    background-image: url("../assets/images/imagen_2.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center 40%;
  }

  #previous-winners .grid .card:nth-child(3) .thumbnail {
    background-image: url("../assets/images/imagen_3.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center 40%;
  }

  #previous-winners .grid .card .thumbnail .play_button-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
  }

  #previous-winners .grid .card .thumbnail .play_button-circle .play_button {
    width: 0;
    height: 0;
    margin-left: 5px;
    border-top: 9.5px solid transparent;
    border-bottom: 9.5px solid transparent;
    border-left: 18px solid white;
  }

  #previous-winners .grid .card .card_footer {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    padding: 40px;
    font-family: "Inter", sans-serif;
    color: var(--charcoal-gray);
  }

  #previous-winners .grid .card .card_footer .card_footer-name {
    font-weight: 700;
    font-size: 20px;
  }
}