@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* ===== CONFIGURACIÓN GENERAL ===== */
*{margin:0; padding:0; box-sizing:border-box; 
    
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: #121212;
  color: #FFFFFF;
  line-height: 1.6;
}

/* ===== HEADER ===== */
header {
  display: flex; justify-content: space-between; align-items: center;
  background-color: #1A1A1A;
  padding: 15px 40px; flex-wrap: wrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.logo { display: flex; align-items: center; }
.logo img { height: 50px; margin-right: 10px; }
.nombre-empresa { color: #FFF; font-size: 1.5rem; font-weight: bold; }

nav ul { list-style: none; display: flex; gap: 20px; }
nav a { color: #00AEEF; text-decoration: none; font-weight: 600; transition: color 0.3s; }
nav a:hover { color: #00FF88; }

.btn-cotiza {
  background-color: #00FF88; color: #1F1F1F;
  padding: 10px 20px; border-radius: 5px;
  text-decoration: none; font-weight: bold;
  transition: background-color 0.3s;
}
.btn-cotiza:hover { background-color: #00AEEF; color: #FFF; }

/* ===== HERO ===== */
.hero {
  position: relative; text-align: center; padding: 100px 20px; color: #FFF;
  background-image: url("../imagenes/herotec.png");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hero::before {
  content:""; position:absolute; top:0; left:0; right:0; bottom:0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.9) 100%);
  z-index:0;
}
.hero-contenido { position: relative; z-index: 1; }
.hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
.hero p { font-size: 1.2rem; margin-bottom: 30px; }
.botones-hero { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.btn-contacto {
  background-color:#007BFF; color:#FFF; padding:10px 20px;
  border-radius:5px; text-decoration:none; font-weight:bold;
  transition: background-color 0.3s;
}
.btn-contacto:hover { background-color:#00FF88; color:#1F1F1F; }

/* ===== SECCIÓN TECNOLOGÍA ===== */
.tecnologia {
  padding:60px 20px; text-align:center; position:relative; background-color:#181818;
}
.tecnologia::before {
  content:""; position:absolute; top:0; left:0; right:0; bottom:0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.9) 100%);
  z-index:0;
}
.tecnologia h2, .servicios-contenedor { position:relative; z-index:1; }
.tecnologia h2 { font-size:2rem; margin-bottom:40px; color:#00AEEF; }

.servicios-contenedor {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px;
}
.servicio {
  background-color:rgba(44,44,44,0.9); border-radius:10px; padding:20px;
  transition:transform 0.3s;
}
.servicio:hover { transform:translateY(-5px); }
.servicio img { width:100%; border-radius:10px; margin-bottom:15px; }
.servicio h3 { color:#00FF88; margin-bottom:10px; }
.servicio p { font-size:0.95rem; color:#CCC; }

/* ===== SECCIÓN CONTACTO ===== */
.contacto {
  text-align: center;
  padding: 60px 20px;
  font-family: 'Roboto', sans-serif; /* fuente estilo WhatsApp */
  color: white; /* letras blancas */
}

.contacto a {
  color: white;       /* enlaces en blanco */
  text-decoration: none; /* quitar subrayado */
  
}

.contacto a:hover {
  color: #25D366; /* verde WhatsApp al pasar el mouse */
}

.whatsapp-link {
  margin-top: 5px;
  font-family: 'Roboto', sans-serif; /* fuente estilo WhatsApp */
  color: white; /* texto blanco */
  text-decoration: none; /* quitar subrayado */
  text-shadow: 0 0 5px rgba(37, 211, 102, 0.6); /* brillo verde suave */
}

.whatsapp-link:hover {
  color: #25D366; /* verde WhatsApp al pasar el mouse */
  text-shadow: 0 0 8px rgba(37, 211, 102, 0.8); /* más intenso al hover */
}
footer p {
  text-align: right;
  color: white; /* opcional, si quieres mantenerlo en blanco */
  font-family: 'Roboto', sans-serif; /* opcional, para mantener la misma fuente */
}