@charset "utf-8";
@font-face {
    font-family: "font1";
    src: url( "../fonts/1.ttf") format("truetype");
	font-display: swap;
}
@font-face {
    font-family: "font2";
    src: url( "../fonts/2.ttf") format("truetype");
	font-display: swap;
}
@font-face {
    font-family: "font3";
    src: url("../fonts/3.ttf") format("truetype");
	font-display: swap;
}
@font-face {
    font-family: "font4";
    src: url("../fonts/4.ttf") format("truetype");
	font-display: swap;
}
@font-face {
    font-family: "font5";
    src: url("../fonts/5.ttf") format("truetype");
	font-display: swap;
}
@font-face {
    font-family: "font6";
    src: url("../fonts/6.ttf") format("truetype");
	font-display: swap;
}
@font-face {
    font-family: "font7";
    src: url("../fonts/7.ttf") format("truetype");
	font-display: swap;
}
@font-face {
    font-family: "font8";
    src: url("../fonts/8.ttf") format("truetype");
	font-display: swap;
}


/* =========================
   VARIABLES
========================= */
:root{
  --negro:#000;
  --blanco:#fff;
  --amarillo:#ffc010;
  --gris:#666;
  --gris-claro:#ccc;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;

  --shadow-sm:0 4px 10px rgba(0,0,0,.15);
  --shadow-md:0 8px 18px rgba(0,0,0,.25);

  --t:.25s ease;

  --text-sm: clamp(14px,1vw,18px);
  --text: clamp(15px,1.3vw,20px);
  --text-lg: clamp(18px,2vw,28px);
  --h3: clamp(24px,3vw,42px);
  --h2: clamp(35px,5vw,96px);
  --hero: clamp(55px,5.3vw,160px);
}


body {
	margin: 0px;
    padding: 0px;
    width: 100%;
    text-decoration: none;/* Esto puede ayudar a evitar el desbordamiento horizontal */
	min-height: 650px;
	padding-left: 0%;
	padding-top: 0%;
}

/* ===============================
SECCION PRESTAMOS
=============================== */

.beneficios-prestamos{
  width:100%;
  padding:70px 20px;
  background:#f6f8fb;
  box-sizing:border-box;
}

/* ===== TITULO ===== */

.segmento-horizontal{
  max-width:1100px;
  margin:0 auto 50px;
  text-align:center;
}

.segmento-horizontal h2{
  font-size:32px;
  margin-bottom:15px;
  color:#111;
}

.segmento-horizontal p{
  font-size:18px;
  color:#555;
  max-width:700px;
  margin:auto;
  line-height:1.6;
}

/* ===== BLOQUES ===== */

.bloques-container{
  max-width:1100px;
  margin:auto;
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  justify-content:center;
}

.bloque{
  flex:1 1 300px;
  max-width:340px;
  background:#fff;
  padding:35px 25px;
  border-radius:12px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
}

#bloques span{
  font-size: var(--hero);
  color:#ff0080;
  display:block;
  margin-bottom:15px;
}

#bloques h2{
  font-family: font4;
  font-size: var(--h2);
  margin-bottom:10px;
}

#bloques h3{
  font-family: font4;
  font-size: var(--text-lg);
  margin-bottom:10px;
  line-height: 150%;
}

#bloques p{
  font-family: font2;
  font-size: var(--text);
  margin-bottom:10px;
  line-height: 150%;
}

#baner span{
  font-size: var(--text-lg);
  color:#ff0080;
  vertical-align: middle;
  line-height: 120%;

}







/* ===== SEGMENTO HORIZONTAL ===== */

.segmento-horizontal{
  max-width:1100px;
  margin:50px auto 50px;
  text-align:center;
}

.segmento-horizontal h2{
  font-size:34px;
  color:#111;
  margin-bottom:15px;
}

.segmento-horizontal p{
  font-size:18px;
  color:#555;
  line-height:1.6;
}

/* ===== BLOQUES ===== */

.bloques-container{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

.bloque{
  background:#fff;
  padding:30px;
  border-radius:15px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0, 0, 0, 0.267);
  transition:.3s ease;
}

.bloque:hover{
  transform:translateY(-5px);
}

.bloque h3{
  font-size:22px;
  margin-bottom:12px;
  color:#111;
}

.bloque p{
  font-size:16px;
  color:#666;
  line-height:1.5;
}





.vistah {
	display: block;
}
.vistav {
	display: none;
}
.div80 {
	width: 78%;
	padding: 1%;
	float: left;
}
.div70 {
	width: 68%;
	padding: 1%;
	float: left;
}
.div60 {
	width: 52%;
	padding: 4%;
	float: left;
}
.div50 {
	width: 48%;
	padding: 1%;
	float: left;
}
.div40 {
	width: 38%;
	padding: 1%;
	float: left;
	text-align: center;
	margin-top: 4%;
}
.div30 {
	width: 28%;
	padding: 1%;
	float: left;
}
.div20 {
	width: 20%;
	float: left;
	margin-left: 4.16%;
	text-align: center;
	background-color: #254a5d;
}
.div15 {
	width: 15%;
	padding: 0%;
	float: left;
	border-radius: 10px;
	background-color: #fff;
	margin-left: 4.16%;
	text-align: center;
	height: 450px;
}
.div10 {
	width: 8%;
	padding: 1%;
	float: left;
	color: aqua;
	padding-top: 2%;
}


.pie h2 {
    font-family: font1;
	font-size: 0.8vw;   
	color: #000;
	line-height: 160%;
}

.pie p {
    font-size: 1.3vw;   
	color: #000;
	line-height: 160%;
}

.boton_consultar {
    background-color: #ff0080;
    border: none;
    color: white;
    padding: 3%;
    text-decoration: none;
    margin: 3%;
    cursor: pointer;
    text-align: center;
    border-radius: 10px;
    width: 50%;
    font-family: font2;
    font-size: 1.2vw;
}
#baner h1 {
    color: #fff;
    font-size: var(--hero);  
	line-height: 120%;
	font-family: font7;
	margin: 0% 20% 0% 3%;
	text-shadow: -3px 3px 10px #666;
}
#baner h2 {
    color:#fff;
	text-shadow: -2px 2px 4px #333;
    font-size: var(--text);
	letter-spacing: 0.1vw;
	font-family: font4;
	margin-left: 3%;
	border-radius: 8px;
}
#baner h3 {
    color:#fff;
	text-shadow: 2px 2px 2px #000;
    font-size: var(--text);
	letter-spacing: 2px;
	font-family: font1;
	margin-left: 4%;
}
#baner h4 {
	color:#fff;
    font-size: 1vw;
	letter-spacing: 2px;
	font-family: font3;
	margin-left: 3%;
	text-shadow: 1px 1px 2px #000;
}
#baner h5 {
	color: #fff;
	font-family: font1;
	font-size: 0.7vw;
	letter-spacing: 0.1vw;
	line-height: 200%;
}
input {
	padding: 4%;
	font-family: font3;
	font-size: var(--text-sm);
	border-radius: 8px;
	color: #000;
	text-align: left;
	alignment-adjust: central;
	width: 60%;
	margin: 1%;
	border: 0px;
	letter-spacing: 0.05em;
}
select {
	padding: 4%;
	font-family: font3;
	font-size: var(--text-sm);
	border-radius: 8px;
	color: #000;
	text-align: left;
	alignment-adjust: central;
	width: 68%;
	margin: 1%;
	letter-spacing: 0.05em;   
    border: 0px
}

textarea {
	padding: 20px;
	font-family: font1;
	font-size: 1.2vw;
	border-radius: 10px;
	color: #666;
	text-align: left;
	alignment-adjust: central;
	width: 50%;
	margin: 8px;
    font-weight: bolder;
    box-shadow: -3px 3px 8px #666;
    border: 0px
}

#baner {
	background-size: cover;
	height: 680px;
	background-attachment: fixed;
	padding-left: 0%;
	padding-top: 0%;
	background-image: url(../img/fondohome.webp);
}
.pie {
	width: 96%;
	padding: 2%;
	float: left;
	text-align: left;
	background-color: #888;
}



/* ===== MOBILE ===== */

@media(max-width:768px){

  .beneficios-prestamos{
    padding:50px 15px;
  }

  .bloques-container{
    gap:20px;
  }

  .bloque{
    max-width:100%;
  }

}


/* ===== TABLET ===== */

@media (max-width:900px){

  .bloques-container{
    grid-template-columns:repeat(2,1fr);
  }

}

/* ===== MOBILE ===== */

@media (max-width:600px){



}

@media (max-width: 767px) {

.segmento-horizontal h2{
    font-size:26px;
}

.segmento-horizontal p{
    font-size:16px;
}

.bloques-container{
    grid-template-columns:1fr;
}
  
body {
	margin: 0px;
    padding: 0px;
    width: 100%;
    overflow-x: hidden; /* Esto puede ayudar a evitar el desbordamiento horizontal */
	background-color: #fff;
}
.vistah {
	display: none;
}
.vistav {
	display: block;
}
.pie {
	width: 96%;
	padding: 2%;
	float: left;
	text-align: left;
	background-color: #888;
	padding-top: 15%;

}
.div100 {
	width: 98%;
	padding: 1%;
	float: left;
	text-align: left;
	height: 3800px;
}
.div80 {
	width: 98%;
	padding: 1%;
	float: left;
}
.div70 {
	width: 90%;
	padding: 5%;
	float: left;
}
.div60 {
	width: 90%;
	padding: 5%;
	float: left;
}
.div50 {
	width: 90%;
	padding: 5%;
	float: left;
}
.div40 {
	width: 90%;
	padding: 5%;
	float: left;
	text-align: center;
	margin-top: 4%;
	background-color: #fff;
}
.div30 {
	width: 90%;
	padding: 5%;
	float: left;
	margin-top: -70px;
}
.div20 planes {
	width: 90%;
	padding: 5%;
	float: left;
}
.div20 {
	width: 80%;
	padding: 5%;
	float: left;
	margin-bottom: 10px;

}
.titulo_principal h1 {
    text-align: center;
    font-size: 8vw;
    color: #4F9E49;
    font-family: font3;
	padding-top: 15px;
	text-shadow: -2px 2px 2px #000;  
}
.pie h2 {
    font-family: font1;
	font-size: 2vw;   
	color: #000;
	line-height: 160%;
}
.pie p {
    font-size: 4vw;   
	color: #000;
	line-height: 160%;
}
.boton_consultar {
    background-color: #ff0080;
    font-size: var(--text-lg);
    border: none;
    color: white;
    padding: 4%;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    border-radius: 8px;
    width: 55%;
    font-family: font3;
	margin-top: 5%;
}
#parrafo h3 {
    font-size: 1vw; 
    font-weight: bold;
	color: #666;
}
#baner{
    height: 1700px;

    /* ❌ elimina imagen */
    background-image: none !important;

    /* ✅ color azul */
    background-color: #000;

    /* evita comportamiento desktop */
    background-attachment: scroll;
}
#baner h1 {
    color: #fff;
    text-shadow: 3px 3px 5px #000;
    font-size: var(--hero);
	line-height: 130%;
	font-family: font8;
	margin: 5% 0% 2% 0%;
}

#baner h2 {
	color:#fff;
    font-size: var(--text);
	letter-spacing: 1.5px;
	font-family: font1;
}
#baner h3 {
    color: #E9E579;
    font-size: var(--h2);    
    font-family: font3;
	padding-left: 2%;
	letter-spacing: 2px;
}

#baner h4 {
	color:#fff;
	text-shadow: 1.5px 1px 1px #000;
    font-size: 3.5vw;
	letter-spacing: 2px;
	font-family: font1;
	margin-left: 3%;
	margin-top: 4%;
}

#baner span{
  font-size: var(--text-lg);
  color:#ff0080;
  vertical-align: middle;
}
#baner h5 {
	color: #fff;
	font-family: font1;
	font-size: 3vw;
	letter-spacing: 0.2vw;
}
input {
	padding: 20px;
	font-family: font3;
	font-size: var(--text-lg);
	border-radius: 10px;
	color: #666;
	text-align: left;
	alignment-adjust: central;
	width: 60vw;
	margin: 8px;
    border: 0px
	}
select {
	padding: 20px;
	font-family: font3;
	font-size: 17px;
	border-radius: 10px;
	color: #666;
	text-align: left;
	alignment-adjust: central;
	width: 70vw;
	margin: 8px;
    border: 0px
	}    
#bloques span{
	font-size: var(--hero);
	color:#ff0080;
	margin-bottom:15px;
	}
#bloques h2{
  font-family: font4;
  font-size: var(--h2);
  margin-bottom:10px;
}
#bloques h3{
  font-family: font4;
  font-size: var(--h3);
  margin-bottom:10px;
  line-height: 120%;
}
#bloques p{
	font-size: var(--text);
	color:#333;
	font-family: font3;
	}
}