/**
 * ===================================================
 * © 2025 YUYAY Ltda. - yuyay.fin.ec
 * Sistema: Pagína Web
 * Versión: 2.5
 * Desarrollador: [Leonardo Verdugo Crespo - Sistemas]
 * Última modificación: 24/06/2024
 * ===================================================
 */
.contenedor-secundario {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.slide-tarjeta{
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  
}


.slide-tipo {
  overflow: hidden;
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slidest {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

.slidet {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeSlide 0.6s ease;
  padding: 20px;
}

.slidet img {
  width: 100%;
  height: 80%;
  object-fit: cover;
  border-radius: 0.75rem;
}

.slidet:nth-child(1) {
  background-color: #ffffff; /* Azul claro */
}
.slidet:nth-child(2) {
  background-color: #ffffff; /* Verde claro */
}
.slidet:nth-child(3) {
  background-color: #ffffff; /* Amarillo claro */
}
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.info-slide {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px;
  font-size: 15px;
  border-bottom: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

.etiqueta {
  font-weight: bold;
  flex: 1;
}

.valor {
  flex: 1;
  text-align: right;
  color: #333;
}
/* BOTONES*/
.contenedor-botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contenedor-botones button {
  padding: 10px 16px;
  background-color: #4998c5;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
  color: white;
}

.contenedor-botones button:hover {
  background-color: #8a8b8b;
}

/*BOTONES ANTERIORES*/

.botones {
  flex-direction:column ;
  justify-content: space-between;
  margin-top: 1rem;

}

.botones button {
  padding: 8px 16px;
  background-color: #4998c5;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline;
  transition: background-color 0.3s ease;
}

.botones button:hover {
  background-color: #8a8b8b;
}

/* Tarjeta de Información */
.tarjeta.info {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.contenido-info h3 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.contenido-info p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

.contenido-info span {
  font-weight: 500;
}


/*-----------------------*/


/*SIMULADOR*/


.info-card, .result-card {
  background: url('../img/fondos.jpg') no-repeat center center/cover;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  max-width: 500px;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  height: 600px;
  align-items: center;
}

.formulario-card {
  background: url('../img/fondos.jpg') no-repeat center center/cover;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  width: 600px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
 
}

/* Contenedor principal (asegúrate que tenga ancho fijo si quieres unificado) */
.info-card,
.result-card {
  max-width: 500px; /* o el valor que estés usando */
}
/* Slide de info*/
.info-slide, .slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;  
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
  background-color: white;
  border-radius: 8px;
  color: #000;
  font-weight: bold;
  margin-bottom: 12px;
  min-height: 50px; /* Puedes ajustar este valor si deseas más o menos alto */
}

.slide-in-left {
  animation-delay: 0s;
}

.slide-in-left.delay-1 {
  animation-delay: 0.3s;
}

.slide-in-left.delay-2 {
  animation-delay: 0.6s;
}
#titulo-credito,
#resumen-credito {
  color: rgb(255, 255, 255);
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 1rem;
}


@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Animación combinada: entrada + zoom + glow */


.gif-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 60%;
  height: 100px; /* o ajusta según el tamaño que quieras */
  margin-top: 1rem;
  margin-left: 50px;
}
.gif-container img {
  width: 60%;
  height: 80%;
  border-radius: 8px;
  animation: fadeIn 1s ease-in;
  align-items: end;
}
  
/* Gig de la tarjeta del result-card*/

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}