:root {
  --color-bg: #0b0c10;
  --color-dark: #111;
  --color-gold: #d4af37;
  --color-blue: #00aaff;
  --color-text: #ffffff;
  --color-gray: #cccccc;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--color-bg);
  border-bottom: 1px solid #222;
}
.logo img { 
	width: 400px; 
	height: auto;   /* mantiene la proporción */
	}
.nav { display: flex; gap: 1rem; 
		height: 20px;
     }
.nav a { color: var(--color-text); 
		 text-decoration: none; 
	   }
/* Botón CTA del menú */
.nav .cta {
  background-color: #007bff; /* o el color corporativo que uses */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 2.6rem 1.2rem; /* 🔹 aumenta el alto del botón */
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2; /* mejora la alineación del texto */
  display: inline-flex;
  align-items: center; /* centra verticalmente el texto */
  justify-content: center;
}
.cta:hover { background: var(--color-gold); 
			color: #000; 
			}
.menu-toggle { display: none; }

/* Hero */
/* Header (menú superior) */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 2rem; /* reduce el alto del header */
  background-color: var(--color-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Logo */
.header .logo img {
  height: auto; /* tamaño más compacto del logo 38px */
  vertical-align: middle;
}

/* Navegación */
.nav a {
  margin: 0 0.8rem;
  font-size: 0.95rem;
}

/* Botón CTA del menú */
.nav .cta {
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}


/* Hero (banner principal) */
.hero {
  height: 10vh; /* reduce la altura del banner */
  padding: 1.5rem 1rem; /* menos espacio interno */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Título del banner */
.hero h1 {
  font-size: 2rem; /* tamaño más pequeño del título */
  line-height: 1.2; /* menos espacio entre líneas */
  margin-bottom: 0.5rem; /* reduce separación con el párrafo */
}

/* Párrafo del banner */
.hero p {
  font-size: 1rem; /* texto más compacto */
  margin-bottom: 1rem;
}
hero p { color: var(--color-gray); }

/* Servicios */
.servicios {
  padding: 4rem 1rem;
  margin-top: -5rem; /* 🔹 agrega espacio arriba del bloque */
  text-align: center;
}

.servicios h2 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.servicios .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.card:hover { transform: translateY(-5px); }
.card img { width: 50px; margin-bottom: 1rem; filter: drop-shadow(0 0 5px var(--color-blue)); }
.card h3 { color: var(--color-gold); }
.card p { color: var(--color-gray); }

/* Contacto */ 
.contacto {
  padding: 2rem 1rem; /* menos espacio interno */
  margin-top: 1rem;   /* reduce la distancia desde los servicios */
  background-color: var(--color-dark);
  text-align: center;
}

.contacto h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.contacto .contact-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.form input, .form textarea {
  width: 100%; margin-bottom: 1rem; padding: 0.5rem;
  border: none; border-radius: 4px;
}
.form button { background: var(--color-blue); color: var(--color-text); }
.whatsapp {
  background: #25D366; color: #fff; border: none;
  padding: 0.8rem 1.5rem; border-radius: 6px;
}
header img {
  width: auto;   /* o el tamaño que quieras */
  height: auto;   /* mantiene la proporción */
}

/* Footer */
.footer {
  text-align: center;
  padding: 2rem;
  border-top: 1px solid #222;
}
.footer .tagline {
  color: var(--color-gold);
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .nav { display: none; flex-direction: column; background: #111; padding: 1rem; }
  .nav.active { display: flex; }
  .menu-toggle { 
				display: block; 
				background: none; 
				border: none; 
				font-size: 1.5rem; 
				color: #fff; }
  .cards, .contact-grid { flex-direction: column; align-items: center; }
}
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}
.service {
  background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
  border: 1px solid #0044cc;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 0 20px rgba(0, 68, 204, 0.6), inset 0 0 10px rgba(255,215,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), inset 0 0 15px rgba(0,68,204,0.4);
}