/* Reset y body */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Roboto',sans-serif;line-height:1.6;color:#333;}
a{text-decoration:none;}

/* Contenedor */
.container{width:90%; max-width:1200px; margin:0 auto;}

/* Hero */
header {
  background: url('images/hero.png') center center/cover no-repeat fixed;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  text-align: center;
  padding: 1rem;
}
header::after{
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.5);
}
header .hero-content{position:relative; z-index:1;}
header h1{font-size:3rem; margin-bottom:20px;}
header p{font-size:1.2rem; margin-bottom:30px;}
.btn-primary{background:#00aaff;color:#fff;padding:12px 25px;border-radius:5px;font-weight:bold;transition:0.3s;}
.btn-primary:hover{background:#0088cc;}

/* Secciones */
section{padding:80px 0;}
h2{text-align:center;margin-bottom:50px;color:#00aaff;}

/* Servicios */
.services{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px; justify-items:center;}
.service-card{background:#f5f5f5; padding:25px; border-radius:10px; text-align:center; transition:0.3s;}
.service-card:hover{transform:translateY(-5px);}
.service-card i{margin-bottom:15px; color:#00aaff;}

/* Sobre Nosotros */
.about{display:flex; flex-wrap:wrap; gap:30px; align-items:center;}
.about img{width:100%; max-width:500px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.2);}
.about-text{flex:1;}

/* Testimonios */
.testimonials{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px;}
.testimonial-card{background:#00aaff10; padding:25px; border-radius:10px; text-align:center;}

/* Contacto */
.contact form {max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:15px;}
.contact input, .contact textarea{padding:15px; border:1px solid #ccc; border-radius:8px; width:100%; font-size:1rem; transition:0.3s;}
.contact input:focus, .contact textarea:focus{border-color:#00aaff; outline:none;}
.contact button{padding:15px; border:none; border-radius:8px; background:#00aaff; color:#fff; font-size:1rem; font-weight:bold; cursor:pointer; transition:0.3s;}
.contact button:hover{background:#0088cc;}

/* WhatsApp flotante */
.whatsapp-float{position:fixed; bottom:25px; right:25px; z-index:1000;}
.whatsapp-float img{width:60px; height:60px;}

/* Portfolio Mockups */
.mockups{display:flex; flex-wrap:wrap; justify-content:center; gap:40px;}
.mockup{border-radius:30px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,0.2); text-align:center;}
.mockup img{width:100%; height:auto;}
.mockup p{margin-top:10px; font-weight:bold;}

/* Footer */
footer{background:#333; color:#fff; text-align:center; padding:25px 0;}

/* Animaciones leves al aparecer */
.scroll-fade{
  opacity:0;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.scroll-fade.show{
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media(max-width:768px){
  header h1{font-size:2rem;}
  .about{flex-direction:column;}
}