/* ================= RESET ================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins',sans-serif;
color:#333;
line-height:1.6;
}


/* =========================
FONTS
========================= */

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


/* =========================
   VARIABLES
========================= */
:root{
  --color-primary:#0399d4;
  --color-secondary:#4ec738;
  --color-dark:#222;
  --color-gray:#f2f2f2;
  --color-white:#ffffff;


  --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(40px,5.5vw,160px);
}



/* ================= GLOBAL ================= */

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

.btn{
display:inline-block;
background:#6bd0ff;
color:#fff;
padding:14px 26px;
border-radius:6px;
text-decoration:none;
font-weight:600;
margin: 5% 25% 0% 25%;
transition:.3s;
width: 50%;
}

.btn:hover{
background:#f720da;
}

/* ================= HERO ================= */

.hero{
  position:relative;
  background-image:url("../img/baner.jpg");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  min-height:90vh;
  display:flex;
  flex-direction:column;   /* ✅ MOBILE: uno debajo del otro */
  justify-content:center;
  align-items:center;
  gap:40px;
  color:#fff;
  text-align:center;
}

.overlay{
  position:absolute;
  inset:0;

  /* Degradé celeste a azul */
  background:linear-gradient(
    180deg,
    rgba(230, 242, 250, 0.40) 10%,   /* celeste */
    rgba(5, 39, 90, 0.95) 100%     /* azul */
  );
}

.hero-content{
position:relative;
z-index:2;
}

.hero h1{
font-size: var(--hero);
font-family: font7;
line-height: 100%;
}

.beneficios{
list-style:none;
margin:20px 0;
}

.beneficios li{
margin:6px 0;
}

/* ================= DESKTOP ================= */

@media(min-width:1024px){

.hero{
height:100vh;
}

.hero-content{
max-width:600px;
}
}

/* ================= LOGOS ================= */

.logos{
background:#f4f4f4;
padding:40px 0;
}

.logos-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
align-items:center;
text-align:center;
}

.logos img{
max-width:140px;
margin:auto;
}


/* ================= carousel ================= */

.carousel-section{
background:#f5f5f5;
padding:30px 0;
overflow:hidden;
}

/* CONTENEDOR */
.carousel{
width:100%;
display:flex;
justify-content:center;
overflow:hidden;
}

/* TRACK */
.carousel-track{
display:flex;
align-items:center;
gap:70px;
width:max-content;
animation:infiniteScroll 15s linear infinite;
}

/* SLIDES */
.slide{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
margin-left: 2%;
}

.slide2{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
margin-left: 2%;
}

.slide img{
height:35px;
width:auto;
opacity:.85;
transition:.3s;
}

.slide2 img{
height:140px;
width:auto;
opacity:.85;
transition:.3s;
border-radius: 50px;
}

.slide img:hover{
opacity:1;
transform:scale(1.06);
}

/* ANIMACIÓN CONTINUA PERFECTA */
@keyframes infiniteScroll{
from{
transform:translateX(0);
}
to{
transform:translateX(-50%);
}
}

/* MOBILE */
@media(max-width:768px){

.carousel-track{
gap:40px;
animation-duration:20s;
}

.slide img{
height:34px;
}

}

/* ================= ASESORAMIENTO ================= */

.asesoramiento{
padding:70px 0;
}

.asesor-grid{
display:grid;
gap:40px;
}

.texto h2{
color:#1089b8;
margin-bottom:20px;
}

/* ================= FORM ================= */

.form-box{
  background: rgba(14, 126, 201, 0.9);
  color:#fff;
  padding:28px;
  border-radius:12px;
  width:360px;
  height:550px; /* 🔥 reducido */
  display:flex;
  flex-direction:column;
  margin: auto;
  margin-top: 5%;
}

.form-box form{
  display:flex;
  flex-direction:column;
  gap:14px; /* ✅ separación real entre inputs */
  height:100%;
}

.asesoramiento h2{
  color: #0399d4;
}

.form-box h3{
  font-size: var(--text);
  margin-bottom:8px;
}

.form-box p{
   font-size: var(--text);
   margin-bottom: 4%;
}

.form-box input,
.form-box textarea,
.form-box select{
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:8px;
  font-size:var(--text-sm);
  font-family:font3;
  display:block;
}

.form-box textarea{
  height:100px;
  resize:none;
}

.form-box button{
  width:160px;
  padding:12px;
  background:var(--color-secondary);
  border:none;
  color:#fff;
  border-radius:8px;
  cursor:pointer;
  font-size:var(--text);

  margin: auto auto 0 auto; /* 🔥 centrado horizontal + abajo */
}
/* ================= CTA ================= */

.cta{
background:#f7f7f7;
padding:80px 0;
}

.cta-grid{
display:grid;
gap:40px;
align-items:center;
}

.cta-text h2{
font-size:clamp(26px,4vw,40px);
color:#2b67b1;
}

.blue{

padding: 0%;
}

/* ================= FOOTER ================= */

footer{
background:#148ec9;
color:#fff;
text-align:center;
padding:20px;

}

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

@media(min-width:768px){

.logos-grid{
grid-template-columns:repeat(4,1fr);
}

.asesor-grid{
grid-template-columns:1fr 1fr;
}

.cta-grid{
grid-template-columns:1fr 1fr;
}

.hero{
text-align:left;
}

.hero-content{
grid-template-columns:1fr 1fr;
}

.hero{
  flex-direction:row;      /* ✅ Desktop lado a lado */
  justify-content:space-between;
  align-items:center;
  text-align:left;
}

.hero-content{
  width:50%;
}

}