/* BANNER PRINCIPAL */

.hero{
  height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;

  /* Fondo premium */
  background:
    linear-gradient(rgba(19,78,74,.85), rgba(0,0,0,.85)),
    url('https://maicito.com/images/2021/02/15/obtener-con-agilidad-un-prestamo-credito-de-libre-inversion-con-garantia-hipotecaria-Financiera-Maicito1.jpg');
    
  background-size:cover;
  background-position:center;
  color:white;
}

.hero-content{
  max-width:800px;
  animation:fadeIn 1s ease-in-out;
}

.hero h1{
  font-size:3.2rem;
  font-weight:700;
  color:#bfa46f; /* dorado */
}

.hero h2{
  font-size:2rem;
  margin:10px 0;
}

.hero p{
  margin:20px 0;
  font-size:1.1rem;
  opacity:.9;
}

/* BOTONES */
.hero-buttons{
  margin-top:20px;
}

.btn-primary{
  background:#bfa46f;
  color:#134e4a;
  padding:14px 25px;
  border-radius:8px;
  text-decoration:none;
  margin:5px;
  display:inline-block;
  font-weight:600;
  transition:.3s;
}

.btn-primary:hover{
  transform:translateY(-3px);
}

.btn-secondary{
  border:2px solid white;
  color:white;
  padding:14px 25px;
  border-radius:8px;
  text-decoration:none;
  margin:5px;
  display:inline-block;
  transition:.3s;
}

.btn-secondary:hover{
  background:white;
  color:#134e4a;
}

/* ANIMACION */
@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* RESPONSIVE */
@media(max-width:768px){
  .hero h1{
    font-size:2.2rem;
  }

  .hero h2{
    font-size:1.5rem;
  }
}

					/* REQUISITOS */

.requisitos{
  background:#ffffff;
  padding:80px 20px;
  text-align:center;
}

.container{
  max-width:1100px;
  margin:auto;
}

.requisitos h2{
  font-size:2.3rem;
  color:#134e4a;
  margin-bottom:10px;
}

.subtitulo{
  color:#555;
  margin-bottom:50px;
}

.requisitos-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:30px;
}

.req-card{
  background:#fff;
  border-radius:14px;
  padding:30px 20px;
  box-shadow:0 8px 25px rgba(0,0,0,.06);
  transition:.3s;
}

.req-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(0,0,0,.1);
}

/* ICONO */
.icono{
  width:70px;
  height:70px;
  margin:0 auto 15px;
  background:rgba(191,164,111,.15);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.icono i{
  font-size:28px;
  color:#bfa46f; /* dorado */
}

/* TEXTO */
.req-card h3{
  color:#134e4a;
  font-size:1.1rem;
}

/* RESPONSIVE */
@media(max-width:600px){
  .requisitos-grid{
    grid-template-columns:1fr;
  }
}

/* ESTADO INICIAL */
.req-card{
  opacity:0;
  transform:translateY(40px);
  transition:all .6s ease;
}

/* CUANDO SE ACTIVA */
.req-card.active{
  opacity:1;
  transform:translateY(0);
}

					/* USO DEL PRÉSTAMO */
.uso{
  background:linear-gradient(180deg,#ffffff,#f1f5f9);
  padding: 120px 50px;
  text-align:center;
}

.container{
  max-width:1100px;
  margin:auto;
}

/* TITULO */
.uso h2{
  font-size:2.6rem;
  color:#134e4a;
}

.subtitulo{
  color:#555;
  margin-bottom:60px;
  font-size:1.1rem;
}

/* GRID */
.uso-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

/* CARD */
.uso-card{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  border-radius:18px;
  padding:35px 20px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  
  /* ANIMACION BASE */
  opacity:0;
  transform:translateY(40px) scale(.95);
  transition:all .6s cubic-bezier(.22,1,.36,1);
}

/* ACTIVO */
.uso-card.active{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* HOVER PRO */
.uso-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}

/* ICONO */
.uso-card i{
  font-size:30px;
  color:#bfa46f;
  margin-bottom:15px;
  transition:.3s;
}

/* GLOW */
.uso-card:hover i{
  text-shadow:0 0 12px rgba(191,164,111,.6);
}

/* TEXTO */
.uso-card h3{
  color:#134e4a;
}

/* CARD CENTRAL */
.destacado{
  grid-column:2 / 4;
}

/* RESPONSIVE */
@media(max-width:1024px){
  .uso-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .destacado{
    grid-column:auto;
  }
}

@media(max-width:600px){
  .uso-grid{
    grid-template-columns:1fr;
  }
}

					/* SIMULADOR */
.simulador{
  background:#134e4a;
  padding:50px 20px;
  display:flex;
  justify-content:center;
}

/* CARD */
.sim-card{
  width:100%;
  max-width:420px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  padding:40px;
  border-radius:20px;
  color:white;
  box-shadow:0 25px 60px rgba(0,0,0,.25);
}

/* TITULOS */
.sim-card h2{
  text-align:center;
}

.sim-card p{
  text-align:center;
  opacity:.8;
  margin-bottom:30px;
}

/* CAMPOS */
.campo{
  margin-bottom:25px;
}

.campo label{
  font-size:14px;
  opacity:.8;
}

.valor{
  font-size:20px;
  font-weight:600;
  margin:8px 0;
  color:#ffd700;
}

/* SLIDER */
input[type=range]{
  width:100%;
  appearance:none;
  height:6px;
  background:#ddd;
  border-radius:10px;
  outline:none;
}

/* BARRA ACTIVA */
input[type=range]::-webkit-slider-thumb{
  appearance:none;
  width:18px;
  height:18px;
  background:#bfa46f;
  border-radius:50%;
  cursor:pointer;
  transition:.2s;
}

input[type=range]::-webkit-slider-thumb:hover{
  transform:scale(1.2);
}

/* RESULTADO */
.resultado{
  margin-top:30px;
  padding:25px;
  border-radius:15px;
  background:rgba(255,255,255,.1);
  text-align:center;
}

.resultado h3{
  font-size:32px;
  margin:10px 0;
  color:#ffd700;
  transition:.3s;
}

.resultado span{
  font-size:12px;
  opacity:.7;
}

					/* ¿CÓMO FUNCIONA? */
.proceso{
  padding:120px 20px;
  text-align:center;
}

.container{
  max-width:1200px;
  margin:auto;
}

/* TITULOS */
.proceso h2{
  font-size:2.8rem;
  color:#134e4a;
}

.subtitulo{
  color:#555;
  margin-bottom:80px;
  font-size:1.1rem;
}

/* TIMELINE */
.timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

/* LINEA BASE */
.linea{
  position:absolute;
  top:55px;
  left:5%;
  width:90%;
  height:4px;
  background:#e5e7eb;
  border-radius:10px;
  overflow:hidden;
}

/* LINEA ANIMADA */
.linea::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#bfa46f,#d4af37);
  transition:width 1.2s ease;
}

.linea.activa::after{
  width:100%;
}

/* STEP */
.step{
  position:relative;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);
  border-radius:20px;
  padding:40px 20px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 20px 40px rgba(0,0,0,.05);

  opacity:0;
  transform:translateY(50px) scale(.95);
  transition:all .7s cubic-bezier(.22,1,.36,1);
}

/* ACTIVO */
.step.active{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* NUMERO */
.num{
  position:absolute;
  top:-25px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,#bfa46f,#d4af37);
  color:white;
  padding:8px 14px;
  border-radius:20px;
  font-size:14px;
  font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}

/* ICONO */
.step i{
  font-size:30px;
  color:#134e4a;
  margin:20px 0;
  transition:.3s;
}

/* TEXTO */
.step h3{
  color:#134e4a;
  margin-bottom:10px;
}

.step p{
  color:#666;
  font-size:14px;
}

/* HOVER PRO */
.step:hover{
  transform:translateY(-12px) scale(1.03);
  box-shadow:0 30px 60px rgba(0,0,0,.15);
}

.step:hover i{
  color:#bfa46f;
  text-shadow:0 0 12px rgba(191,164,111,.6);
}

/* RESPONSIVE */
@media(max-width:1024px){
  .timeline{
    grid-template-columns:repeat(2,1fr);
  }

  .linea{
    display:none;
  }
}

@media(max-width:600px){
  .timeline{
    grid-template-columns:1fr;
  }
}

					/* ¿QUIÉNES SOMOS? */
.about-section{
  background:linear-gradient(180deg,#ffffff,#f5f7fa);
  padding:120px 20px;
  margin-top: -100px;
}

.wrapper{
  max-width:1100px;
  margin:auto;
}

/* HEADER */
.about-header{
  text-align:center;
  margin-bottom:70px;
}

.about-header h2{
  font-size:2.7rem;
  color:#134e4a;
}

.about-header p{
  color:#555;
  margin-top:10px;
  font-size:1.1rem;
}

/* GRID */
.about-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:30px;
}

/* CARD */
.about-card{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);
  border-radius:20px;
  padding:40px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 20px 40px rgba(0,0,0,.05);

  opacity:0;
  transform:translateY(50px) scale(.96);
  transition:all .7s cubic-bezier(.22,1,.36,1);
}

/* ACTIVO */
.about-card.active{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* TITULOS */
.about-card h3{
  color:#134e4a;
  margin-bottom:15px;
  position:relative;
}

/* LINEA DORADA */
.about-card h3::after{
  content:"";
  display:block;
  width:40px;
  height:3px;
  background:#bfa46f;
  margin-top:8px;
  border-radius:10px;
}

/* TEXTO */
.about-card p{
  color:#555;
  line-height:1.6;
  margin-bottom:10px;
}

/* HOVER */
.about-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 30px 60px rgba(0,0,0,.12);
}

/* RESPONSIVE */
@media(max-width:900px){
  .about-grid{
    grid-template-columns:1fr;
  }
}

					/* SOLUCIONES Y BENEFICIOS */

.finance-section{
  background:#1f5b52; /* tu color */
  padding:180px 20px;
  color:white;
}

.finance-container{
  max-width:1100px;
  margin:auto;
}

/* INTRO */
.finance-intro{
  text-align:center;
  margin-bottom:70px;
  margin-top: -100px;

  opacity:0;
  transform:translateY(40px);
  transition:.7s cubic-bezier(.22,1,.36,1);
}

.finance-intro.active{
  opacity:1;
  transform:translateY(0);
}

.finance-intro h2{
  font-size:2.7rem;
  margin-bottom:20px;
}

.finance-intro p{
  max-width:700px;
  margin:auto;
  opacity:.85;
  line-height:1.6;
}

/* FRASE DESTACADA */
.highlight{
  margin-top:25px;
  font-size:1.3rem;
  font-weight:600;
  color:#ffd700;
  text-shadow:0 0 10px rgba(255,215,0,.5);
}

/* GRID */
.finance-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

/* CARDS */
.finance-card{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  padding:35px 25px;
  border-radius:18px;
  text-align:center;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 50px rgba(0,0,0,.25);

  opacity:0;
  transform:translateY(50px) scale(.95);
  transition:.6s cubic-bezier(.22,1,.36,1);
}

.finance-card.active{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* ICONOS */
.finance-card i{
  font-size:28px;
  color:#bfa46f;
  margin-bottom:15px;
  transition:.3s;
}

/* TITULO */
.finance-card h3{
  margin-bottom:10px;
}

/* TEXTO */
.finance-card p{
  font-size:14px;
  opacity:.8;
}

/* HOVER PRO */
.finance-card:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}

.finance-card:hover i{
  text-shadow:0 0 12px rgba(191,164,111,.7);
}

/* RESPONSIVE */
@media(max-width:1024px){
  .finance-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .finance-grid{
    grid-template-columns:1fr;
  }
}

.req-card{
  padding: 30px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  text-align: center;
}

.req-list{
  margin-top: 15px;
  padding-left: 0;
  list-style-position: inside;
  list-style: none;
}

.req-list li{
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.req-list{
  margin-top: 15px;
  padding-left: 0;
  list-style: none;
}

.req-list li{
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
}

.req-list li::before{
  content: "✔";
  color: #444444;
  margin-right: 8px;
  font-weight: bold;
}

.req-list{
  margin-top: 15px;
  padding-left: 0;
  list-style: none;
}

.req-list li{
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
}

.req-list li::before{
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #16a34a;
  margin-right: 8px;
}