:root{
  --azul-principal:#1F3C88;
  --azul-secundario:#2E5BFF;
  --blanco:#FFFFFF;
  --gris-oscuro:#333333;
  --gris-claro:#F4F6F9;
}

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

/* FONDO GLOBAL */
body{
  font-family:'Inter', sans-serif;
  color:var(--gris-oscuro);
  background:
    linear-gradient(rgba(255, 255, 255, 0.53),rgba(255, 255, 255, 0.37)),
    url('../imgs/Imagen2.png');
  background-size:cover;
  background-position:center;
  background-attachment:fixed; /* efecto moderno al hacer scroll */
}

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


/* logo negro tradex */
.hero-logo{
  width: 300px;        
  max-width: 85%;
  display:block;
  margin:0 auto 20px;
}

.hero-title{
  font-family:'Montserrat', sans-serif;
  font-size:46px;
  margin-bottom:18px;
}


/* SCROLL MODERNO */
html{scroll-behavior:smooth;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#e6e9f2;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--azul-secundario),var(--azul-principal));
  border-radius:10px;
}

/* HEADER */
/* ===== HEADER MEJORADO ===== */

header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(31, 61, 136, 0.849);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
}

.logo img{
  height:34px;
}

nav a{
  color:white;
  text-decoration:none;
  margin-left:28px;
  font-family:'Inter',sans-serif;
  font-weight:500;
  position:relative;
  transition:.3s;
}

nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0%;
  height:2px;
  background:#2E5BFF;
  transition:.3s;
}

nav a:hover::after{
  width:100%;
}

/* logo blanco */
.logo img{height:30px;}

nav a{
  color:white;
  text-decoration:none;
  margin-left:22px;
  font-weight:600;
  font-family:'Poppins', sans-serif;
  position:relative;
}

nav a::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:0;
  width:0%;
  height:2px;
  background:white;
  transition:.3s;
}
nav a:hover::after{width:100%;}

/* HERO */
.hero{
  text-align:center;
  padding:120px 20px 90px;
  color:var(--azul-principal);
}

.hero h1{
  font-family:'Montserrat', sans-serif;
  font-size:46px;
  margin-bottom:18px;
}

.hero p{max-width:760px;margin:auto;font-size:19px;}

.btn{
  display:inline-block;
  margin-top:30px;
  background:linear-gradient(135deg,var(--azul-secundario),var(--azul-principal));
  color:white;
  padding:15px 32px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 10px 25px rgba(46,91,255,.35);
  transition:.25s;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(46,91,255,.45);
}

/* SECCIONES CON TARJETAS MÁS MODERNAS */
.imagen-grande,
.beneficios,
.contacto{
  background:rgba(255, 255, 255, 0.559);
  backdrop-filter:blur(6px);
  margin:40px auto;
  border-radius:18px;
  padding:70px 0;
}


.titulo-ecosistema{
  text-align:center;
  font-family:'Montserrat', sans-serif;
  color:var(--azul-principal);
  font-size:30px;
  margin-bottom:35px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.3;
}

.imagen-grande img{
  display: block;
  margin: 0 auto;
  margin-left: 120px;
  box-shadow:0 20px 50px rgba(0,0,0,0.18);
}

.marketplace{
  background: rgba(255, 255, 255, 0.559);
  backdrop-filter: blur(6px);
  margin:40px auto;
  border-radius:18px;
  padding:70px 0;
  text-align:center;
}

.titulo-marketplace{
  font-family:'Montserrat', sans-serif;
  color:var(--azul-principal);
  font-size:30px;
  max-width:900px;
  margin:0 auto 35px;
  line-height:1.3;
}

.marketplace-img{
  width:100%;
  max-width:950px;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,0.18);
}

.beneficios h2{
  text-align:center;
  font-family:'Montserrat';
  margin-bottom:45px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}

/* TARJETAS MEJORADAS */
.card{
  background:white;
  padding:28px 26px;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:.25s ease;
  border:1px solid rgba(46,91,255,.08);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--azul-secundario),var(--azul-principal));
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.card h3{
  font-family:'Poppins';
  margin-bottom:12px;
  color:var(--azul-principal);
  font-size:17px;
}

.card p{line-height:1.6;}

.contacto{text-align:center;}

/* FOOTER */
.footer{
  background:rgba(31,60,136,.95);
  color:white;
  text-align:center;
  padding:28px 0;
  margin-top:40px;
}