:root{
  --azul-1:#015aaa;
  --azul-2:#0a3f8f;
  --rojo:#e51c21;
  --fondo:#f7f9fc;
  --texto:#1f2d3d;
  --muted:#556674;
}

*{
  box-sizing:border-box;
}

html,body{
  height:100%;
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--fondo);
}

.hero{
  min-height:100vh;
  display:flex;
  position:relative;
  overflow:hidden;
}

/* ---------------- LEFT ---------------- */

.left{
  width:55%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px;
  z-index:3;
}

.inner{
  max-width:560px;
}

.logo-box{
  margin-bottom: 20px;
}

.logo-box img{
  max-width: 320px;
  height: auto;
}
.logo-box{
  text-align: center;
}

.brand{
  text-align: center;    
  font-size:12px;
  letter-spacing:2px;
  color:#6c7a89;
  text-align: center;
}

h1{
  font-size:54px;
  margin:10px 0 5px;
}

h2{
  font-size:20px;
  color:var(--azul-1);
  margin-bottom:20px;
}

.lead{
  color:var(--muted);
  line-height:1.7;
  margin-bottom:32px;
}

.btn-cta{
  padding:14px 34px;
  border-radius:40px;
  border:2px solid var(--azul-1);
  color:var(--azul-1);
  text-decoration:none;
  font-weight:600;
  transition:.2s;
}

.btn-cta:hover{
  background:var(--azul-1);
  color:white;
}

/* ---------------- CURVA ---------------- */

.visual{
  position:absolute;
  right:-18vw;
  top:50%;
  transform:translateY(-50%);
  width:75vw;
  height:120vh;
  background:linear-gradient(160deg,var(--azul-1),var(--azul-2));
  border-radius:45% 55% 55% 45% / 50% 40% 60% 50%;
  z-index:1;
}

.visual::before,
.visual::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.05);
}

.visual::before{
  width:300px;
  height:300px;
  top:10%;
  left:15%;
}

.visual::after{
  width:220px;
  height:220px;
  bottom:15%;
  right:12%;
}

.dot-a,.dot-b,.dot-c{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.03);
}

.dot-a{width:140px;height:140px;left:20%;top:60%}
.dot-b{width:180px;height:180px;right:15%;top:20%}
.dot-c{width:100px;height:100px;right:25%;bottom:20%}

/* ---------------- DOTS BLANCOS ---------------- */

.bg-dot{
  position:absolute;
  border-radius:50%;
  background:rgba(1,90,170,.06);
  z-index:2;
}

.dot-1{width:200px;height:200px;left:80px;top:60px}
.dot-2{width:120px;height:120px;left:220px;top:260px}
.dot-3{width:140px;height:140px;left:130px;bottom:140px}

/* ---------------- CARD ---------------- */

.info-card{
  position:absolute;
  right:12%;
  top:50%;
  transform:translateY(-50%);
  background:white;
  width:420px;
  padding:26px;
  border-radius:16px;
  box-shadow:0 35px 70px rgba(0,0,0,.15);
  z-index:4;
}

.info-card h3{
  color:var(--azul-1);
  margin-top:0;
}

.info-card ul{
  list-style:none;
  padding:0;
}

.info-card li{
  margin-bottom:12px;
}

.info-card li::before{
  content:"✓ ";
  color:var(--azul-1);
  font-weight:bold;
}

.note{
  color:var(--rojo);
  font-size:13px;
}

/* ---------------- RESPONSIVE ---------------- */

@media(max-width:980px){
  .hero{flex-direction:column}
  .left{width:100%;padding:60px 30px}
  .visual{
    position:relative;
    width:100%;
    height:350px;
    right:auto;
    top:auto;
    transform:none;
    border-radius:0;
  }
  .info-card{
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    margin:20px auto;
  }
  h1{font-size:40px}
}