html{
  scroll-behavior:smooth;
}

body{

  background:
  linear-gradient(
  to bottom,
  #050505,
  #111111,
  #1b1b1b
  );

  color:white;

  font-family:'Poppins', sans-serif;

  text-align:center;

  margin:0;

  padding:0;
}

header{

  position:sticky;

  top:0;

  background:rgba(0,0,0,0.9);

  backdrop-filter:blur(10px);

  padding:20px;

  z-index:1000;

  border-bottom:1px solid rgba(255,140,0,0.3);
}

h1{
  font-size:34px;
  color:#ff8c00;
  margin-bottom:15px;
  letter-spacing:2px;
  text-shadow:0 0 20px rgba(255,140,0,.4);
}

nav{

  display:flex;

  justify-content:center;

  gap:25px;

  flex-wrap:wrap;

  margin-top:15px;
}

nav a{

  color:white;

  text-decoration:none;

  font-weight:bold;

  transition:0.3s;
}

nav a:hover{
  color:#ff8c00;
}

.hero{
  padding:60px 20px;
  min-height:80vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.hero h2{
  font-size:3rem;
  color:white;
  margin-bottom:20px;
  letter-spacing:1px;
  font-weight:700;
  text-transform:uppercase;
  text-shadow:0 0 20px rgba(255,140,0,.3);
}

.hero p{

  font-size:20px;

  color:#ccc;

  margin-bottom:40px;
}

.extra{
  margin-top:20px;
  color:#ffb347;
  font-size:1rem;
  line-height:1.8;
  font-weight:600;
}

.hero img{

  width:100%;

  max-width:600px;

  border-radius:25px;

  box-shadow:0 10px 30px rgba(0,0,0,0.5);

  margin-bottom:30px;
}

.btn{

  display:inline-block;

  padding:18px 40px;

  background:#ff8c00;

  color:black;

  text-decoration:none;

  font-weight:bold;

  border-radius:18px;

  transition:0.3s;

  box-shadow:0 0 25px rgba(255,140,0,0.4);
}

.btn:hover{

  transform:scale(1.05);

  box-shadow:0 0 35px rgba(255,140,0,0.7);
}

.servicios{

  padding:80px 20px;
}

.servicios h2{

  font-size:50px;

  color:#ff8c00;

  margin-bottom:50px;
}

.cards{

  display:flex;

  justify-content:center;

  gap:30px;

  flex-wrap:wrap;
}

.card{

  width:280px;

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,140,0,0.2);

  border-radius:25px;

  padding:35px 25px;

  backdrop-filter:blur(10px);

  transition:0.3s;

  box-shadow:0 0 25px rgba(0,0,0,0.5);
}

.card:hover{

  transform:translateY(-10px);

  border-color:#ff8c00;

  box-shadow:0 0 30px rgba(255,140,0,0.4);
}

.card h3{

  font-size:30px;

  margin-bottom:20px;

  color:#ff8c00;
}

.card p{

  color:#ccc;

  font-size:18px;
}

.galeria{

  padding:80px 20px;
}

.galeria h2{

  font-size:50px;

  color:#ff8c00;

  margin-bottom:50px;
}

.imagenes{

  display:flex;

  justify-content:center;

  gap:15px;

  flex-wrap:wrap;
}

.galeria img{

  width:90%;

  max-width:320px;

  height:200px;

  object-fit:cover;

  border-radius:20px;

  margin:10px auto;

  display:block;
}

.imagenes img:hover{

  transform:scale(1.05);

  box-shadow:0 0 30px rgba(255,140,0,0.4);
}

footer{

  padding:70px 20px;

  background:#0a0a0a;

  border-top:1px solid rgba(255,140,0,0.2);

  margin-top:80px;
}

footer h2{

  color:#ff8c00;

  font-size:45px;

  margin-bottom:30px;
}

footer p{

  color:#ccc;

  font-size:18px;

  margin:10px 0;
}

.whatsapp{

  position:fixed;

  bottom:20px;

  right:20px;

  background:#ff8c00;

  color:black;

  padding:15px 20px;

  border-radius:15px;

  text-decoration:none;

  font-weight:bold;

  box-shadow:0 0 25px rgba(255,140,0,0.5);

  transition:0.3s;

  z-index:999;
}

.whatsapp:hover{

  transform:scale(1.05);

  box-shadow:0 0 35px rgba(255,140,0,0.8);
}

.stats{
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
  padding:70px 20px;
}

.stat{
  background:#1b1b1b;
  padding:25px;
  border-radius:20px;
  min-width:180px;
}

.stat h3{
  color:#ff5500;
  font-size:2rem;
}

.porque,
.testimonios,
.cta{
  padding:80px 20px;
  text-align:center;
}

.cta{
  background:rgba(255,85,0,.08);
}

.cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:25px;
}