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

body{
  font-family:Arial, Helvetica, sans-serif;
  color:#0f2640;
}

.hero{
  height:calc(100vh - 60px);
  min-height:600px;
  background-image:url("img/fondo.png");
  background-size:cover;
  background-position:center right;
  position:relative;
  overflow:hidden;
}

.overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.95) 50%,
        rgba(255,255,255,.70) 65%,
        rgba(255,255,255,.25) 80%,
        rgba(255,255,255,0) 100%
    );
}

.contenido{
  position:relative;
  z-index:2;
  max-width:760px;
  height:100%;
  padding:40px 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.logo{
  width:420px;
  max-width:100%;
  margin-bottom:45px;
}

h1{
    font-size:46px;
    line-height:1.15;
    max-width:700px;
    margin-bottom:30px;
    font-weight:700;
    color:#0f2640;
}

.descripcion{
    max-width:650px;
    font-size:18px;
    line-height:1.55;
    color:#333;
    margin-bottom:35px;
}

.estado{
  background:white;
  border-radius:18px;
  padding:30px 35px;
  box-shadow:0 8px 25px rgba(0,0,0,.12);
}

.estado h2{
  font-size:30px;
  margin-bottom:15px;
}
.estado p{
    font-size:18px;
    line-height:1.55;
    color:#333;
}

footer{
  height:60px;
  background:#0f2640;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

@media(max-width:800px){
  .contenido{
    padding:35px 25px;
  }

  h1{
    font-size:42px;
  }

  .descripcion{
    font-size:21px;
  }

  .estado p{
    font-size:19px;
  }
}

@media(max-height:800px){
  .contenido{
    padding-top:25px;
    padding-bottom:25px;
  }

  .logo{
    width:280px;
    margin-bottom:25px;
  }

  h1{
    font-size:38px;
    margin-bottom:20px;
  }

  .descripcion{
    font-size:18px;
    margin-bottom:25px;
  }

  .estado{
    padding:22px 28px;
  }

  .estado p{
    font-size:18px;
    line-height:1.55;
  }
}