body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f7f9fc;
  scroll-behavior: smooth;
}

h1,h2,h3,h4,h5,h6 { margin: 0; }
a { text-decoration: none; color: inherit; }

/* ===== HEADER ===== */
header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
  background: linear-gradient(90deg, #74ACDF 0%, #0072BB 100%);
  color: white;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.logo-text-container { display:flex; align-items:center; gap:20px; }
.logo-left { max-height:80px; border-radius:14px; }
.header-text { display:flex; flex-direction:column; justify-content:center; }
.header-text h1 { font-size:1.8rem; font-weight:700; letter-spacing:1px; }
.header-text h2 { font-size:1rem; font-weight:500; color:white; margin-top:3px; }
.header-text p { font-size:0.9rem; margin-top:5px; line-height:1.4; color:#f1faff; }

.main-nav { display:flex; gap:20px; transition:max-height 0.5s ease; }
.main-nav a { color:white; font-weight:600; transition: color 0.3s, transform 0.3s; }
.main-nav a:hover { color:#ff6f00; transform:scale(1.05); }
.hamburger { display:none; font-size:2rem; background:none; border:none; color:white; cursor:pointer; z-index:101; }

/* ===== HERO ===== */
.hero {
  height:75vh;
  background: url('https://www.unet3.com/Imagenes/servidores.jpeg') center/cover no-repeat;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-overlay { background: rgba(0,0,0,0.55); width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.hero-content { text-align:center; color:white; max-width:700px; padding:0 20px; animation: fadeInUp 1.5s ease; }
.hero-content h2 { font-size:2.5rem; margin-bottom:15px; }
.hero-content p { font-size:1.2rem; margin-bottom:25px; }
.hero-content button {
  background:#ff6f00; border:none; padding:12px 30px; font-size:1rem; border-radius:8px;
  color:white; cursor:pointer; transition:0.3s;
}
.hero-content button:hover { background:#ffa733; transform:translateY(-3px); }

/* ===== SECCIONES CON FONDO FIJO ===== */
.fondo-secciones {
  padding:60px 20px;
  text-align:center;
  max-width:1200px;
  margin:0 auto;
  background: url('https://www.unet3.com/Imagenes/fondo-servicios.jpg') center/cover no-repeat fixed;
  position: relative;
  color: #333;
  overflow:hidden;
}

.fondo-secciones::before {
  content:"";
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background: rgba(255,255,255,0.7);
  z-index:1;
  pointer-events:none;
  backdrop-filter: blur(4px);
}

.fondo-secciones h2, .fondo-secciones p, .fondo-secciones .services, .fondo-secciones form {
  position: relative; z-index:2;
}

.services { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:25px; margin-top:30px; }
.service {
  background: rgba(255,255,255,0.85); border-radius:12px; padding:25px;
  box-shadow:0 4px 15px rgba(0,0,0,0.1); transition:0.3s; color:#333;
}
.service:hover { transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.15); }

/* ===== FORMULARIO ===== */
#contacto form { display:flex; flex-direction:column; gap:15px; max-width:600px; margin:0 auto; }
#contacto input, #contacto textarea {
  padding:12px 15px; border-radius:8px; border:1px solid #ccc; font-size:1rem; transition:0.3s;
}
#contacto input:focus, #contacto textarea:focus {
  border-color:#0072BB; outline:none; box-shadow:0 0 8px rgba(0,114,187,0.3);
}

/* ===== BOTONES DEL FORMULARIO ===== */
.botones-contacto {
  display:flex;
  justify-content:center;
  gap:15px;
  margin-top:10px;
}

#contacto button,
.btn-whatsapp {
  display:inline-block;
  padding:12px 25px;
  font-size:1rem;
  border-radius:8px;
  cursor:pointer;
  transition:0.3s;
  font-weight:600;
  text-align:center;
}

#contacto button {
  background:#ff6f00;
  border:none;
  color:white;
}
#contacto button:hover {
  background:#ffa733;
  transform:translateY(-2px);
}

.btn-whatsapp {
  background:#25D366;
  color:white;
  text-decoration:none;
  border:none;
}
.btn-whatsapp:hover {
  background:#1ebe5d;
  transform:translateY(-2px);
}

footer {
  text-align:center; padding:20px;
  background: linear-gradient(90deg,#0072BB 0%,#74ACDF 100%);
  color:white; font-size:0.9rem;
}

@keyframes fadeInUp { 0%{opacity:0;transform:translateY(30px);} 100%{opacity:1;transform:translateY(0);} }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .hero-content h2 { font-size:2rem; }
  .hero-content p { font-size:1rem; }
}
@media (max-width:768px) {
  .main-nav {
    position:absolute; top:65px; right:0; background: linear-gradient(90deg,#74ACDF 0%,#0072BB 100%);
    flex-direction:column; width:200px; max-height:0; overflow:hidden; border-radius:0 0 10px 10px;
    transition:max-height 0.5s ease; z-index:100;
  }
  .main-nav.open { max-height:500px; }
  .main-nav a { padding:15px 20px; border-bottom:1px solid rgba(255,255,255,0.2); }
  .hamburger { display:block; }
  .services { grid-template-columns:1fr; }
  .hero { height:60vh; }
  .hero-content h2 { font-size:1.8rem; }
  .hero-content p { font-size:1rem; }
  .botones-contacto { flex-direction:column; }
}
.botones-contacto {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 15px;
  flex-wrap: wrap;
}

.botones-contacto button {
  flex: 1;
  min-width: 160px;
  background-color: #0056b3;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.botones-contacto button:hover {
  background-color: #003f88;
  transform: translateY(-2px);
}

.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #25D366;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  flex: 1;
  min-width: 160px;
  transition: 0.3s;
}

.btn-whatsapp:hover {
  background-color: #1ebe5d;
  transform: translateY(-2px);
}

.icono-whatsapp {
  width: 22px;
  height: 22px;
}