/* ===== CONFIGURACIÓN GENERAL ===== */
*{ margin: 0; padding: 0; box-sizing: border-box; 
    
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: #121212; /* Fondo oscuro */
  color: #FFFFFF; /* Texto claro */
  line-height: 1.6;
}

/* ===== HEADER ===== */
header {
  display: flex; justify-content: space-between; align-items: center;
  background-color: #1A1A1A; /* Fondo del header */
  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: 500; 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;
  /* Aquí va la imagen de fondo del hero */

  background-image: url("../imagenes/herodis.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.1) 0%, rgba(0,0,0,0.8) 100%);
  z-index:0;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: 0; /* solo desde abajo */
  left: 0;
  width: 100%;
  height: 40%; /* controla qué tanto sube el degradado */
  background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, #1F1F1F 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 DISEÑO ===== */
.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); }

/* 🔧 Ajuste para igualar tamaño de imágenes y nivel del texto */
.servicio img {
  width:100%;
  height:220px; /* Tamaño uniforme para todas las imágenes */
  object-fit:cover; /* Recorta proporcionalmente sin deformar */
  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;
}
.contacto h2 { font-size:2rem; color:#00AEEF; margin-bottom:20px; }
.contacto p { margin-bottom:20px; color:#CCC; }
.contacto img { width:150px; margin-top:20px; }

/* ===== FOOTER ===== */
footer {
  background-color:#1A1A1A; text-align:center; padding:20px;
}
footer p { color:#CCC; margin-bottom:10px; }
footer .redes a {
  color:#00AEEF; margin:0 10px; text-decoration:none; transition:color 0.3s;
}
footer .redes a:hover { color:#00FF88; }