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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:#07111f;
  color:#111;
  line-height:1.5;
}

img{
  max-width:100%;
  display:block;
}

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

.btn{
  display:inline-block;
  background:#00A651;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  padding:16px 34px;
  border-radius:8px;
  transition:.25s;
}

.btn:hover{
  background:#008C45;
  transform:translateY(-2px);
}

/* HERO */

.hero{
  min-height:100vh;
  background:
    linear-gradient(rgba(10,20,30,0.5), rgba(0,0,0,0.5)),
    url("https://www.silicon.com.py/pixelgo/img/bg-hero.jpg") center/cover no-repeat;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}

.hero-overlay{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-logo{
  width:240px;
  height:auto;
  margin-bottom:70px;
}

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

.hero h1{
  font-size:72px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-2px;
  margin-bottom:30px;
}

.hero p{
  max-width:760px;
  margin:0 auto 40px;
  font-size:23px;
  color:#dce8ff;
}

/* SECCIONES */

.section{
  padding:90px 20px;
}

.section h2,
.cta h2{
  font-size:42px;
  text-align:center;
  margin-bottom:45px;
  line-height:1.15;
}

.light{
  background:#f5f7fb;
  color:#111;
}

.dark{
  background:#07111f;
  color:#fff;
}

/* GRIDS */

.grid{
  display:grid;
  gap:28px;
}

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

.grid.three{
  grid-template-columns:repeat(3, 1fr);
}

/* CARDS */

.card,
.info-card,
.plan{
  border-radius:20px;
}

.card{
  background:#fff;
  padding:24px;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.card img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:22px;
}

.card h3{
  font-size:24px;
  margin-bottom:10px;
}

.card p{
  color:#4d5a6a;
}

.info-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  padding:28px;
  font-size:22px;
  font-weight:700;
  text-align:center;
}

.mini{
  min-height:180px;
}

/* FONDOS */

.beneficios{
  background:
    linear-gradient(rgba(10,20,30,0.5), rgba(0,0,0,0.5)),
    url("https://www.silicon.com.py/pixelgo/img/bg-beneficios.jpg") center/cover no-repeat;
}

.realtime{
  background:
    linear-gradient(rgba(10,20,30,0.5), rgba(255,255,255,0.8)),
    url("https://www.silicon.com.py/pixelgo/img/bg-realtime.jpg") center/cover no-repeat;
}

.planes{
  background:
    linear-gradient(rgba(10,20,30,0.5), rgba(0,0,0,0.5)),
    url("https://www.silicon.com.py/pixelgo/img/bg-planes.jpg") center/cover no-repeat;
}

/* PLANES */

.plan{
  background:#fff;
  color:#111;
  text-align:center;
  padding:38px 28px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.plan h3{
  font-size:28px;
  text-transform:uppercase;
}

.price{
  font-size:38px;
  color:#00A651;
  font-weight:900;
  margin:18px 0;
}

.plan p{
  color:#4d5a6a;
  margin:8px 0;
}

.featured{
  border:4px solid #00A651;
  transform:scale(1.04);
}

/* CTA */

.cta{
  padding:100px 20px;
  text-align:center;
  color:#fff;
  background:
    linear-gradient(rgba(5,15,30,.84), rgba(5,15,30,.84)),
    url("https://www.silicon.com.py/pixelgo/img/bg-contacto.jpg") center/cover no-repeat;
}

.cta h2{
  max-width:850px;
  margin:0 auto 35px;
}

/* FOOTER */

footer{
  background:#020812;
  color:#c9d6e8;
  text-align:center;
  padding:50px 20px;
}

footer img{
  width:150px;
  margin:0 auto 25px;
}

footer p{
  margin:6px 0;
}

/* RESPONSIVE */

@media(max-width:900px){
  .grid.two,
  .grid.three{
    grid-template-columns:1fr;
  }

  .hero-logo{
    width:180px;
    margin-bottom:55px;
  }

  .hero h1{
    font-size:52px;
  }

  .hero p{
    font-size:20px;
  }

  .featured{
    transform:none;
  }
}

@media(max-width:600px){
  .hero{
    padding:30px 18px;
  }

  .hero-logo{
    width:150px;
    margin-bottom:45px;
  }

  .hero h1{
    font-size:40px;
  }

  .hero p{
    font-size:18px;
  }

  .section{
    padding:65px 18px;
  }

  .section h2,
  .cta h2{
    font-size:32px;
  }

  .btn{
    width:100%;
    max-width:320px;
  }
}