/* -----------------------------
   BASE VISUAL QHITECH SL
   Paleta: Azul tech + Verde éxito + Amarillo acento
   Fuente sugerida: Inter
----------------------------- */

:root {
  --color-primario: #005C99;         /* Azul metálico */
  --color-secundario: #FF6F00;       /* Naranja acento */
  --color-acento: #FFA000;           /* Naranja claro */
  --color-texto: #000000;            /* Texto negro */
  --color-claro: #ffffff;            /* Blanco puro */
  --color-fondo: #F7F9FB;            /* Fondo claro neutro */
  --color-sombra: rgba(0, 0, 0, 0.05); /* Sombra ligera */

  --color-cabecera: #000000;         /* Fondo negro para cabecera */
  --color-logo: var(--color-secundario);   /* Naranja para logo */
  --color-menu: var(--color-secundario);   /* Naranja para menú */
}

/* Reset básico */
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--color-claro);
  color: var(--color-texto);
  line-height: 1.6;
}

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

/* BANNER */
.top-banner {
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: block;
}
.top-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CABECERA NEGRA + LOGO NARANJA + MENÚ NARANJA */
.site-header {
  background-color: var(--color-cabecera); /* Negro */
  padding: 2rem 0 1rem;
  text-align: center;
}

.logo {
  display: block;
  margin: 0 auto 1rem;
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--color-logo); /* Naranja */
  text-decoration: none;
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.main-nav a {
  color: var(--color-menu); /* Naranja */
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: background 0.3s, color 0.3s;
}

.main-nav a:hover {
  background: var(--color-acento);
  color: var(--color-claro); /* Blanco */
}

/* Responsive navegación */
@media (max-width: 600px) {
  .main-nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* HERO */
.hero {
  background: var(--color-primario);
  color: var(--color-claro);
  text-align: center;
  padding: 4rem 1rem;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.hero .btn {
  display: inline-block;
  margin-top: 1rem;
}

/* TITULOS Y BOTONES */
.section-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--color-primario);
}

.btn {
  background: var(--color-secundario);
  color: var(--color-claro);
  padding: 0.75rem 1.5rem;
  border: none;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s;
}
.btn:hover {
  background: #029a85;
}

/* SECCIONES */
.grid-3 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 2rem;
}

.bloque {
  background: var(--color-fondo);
  padding: 1.5rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 6px var(--color-sombra);
}
.bloque-icono {
  max-width: 60px;
  margin-bottom: 1rem;
}

.about {
  background: var(--color-claro);
  padding: 4rem 1rem;
}
.about-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.about-imagen img {
  max-width: 100%;
  border-radius: 12px;
}

/* CTA */
.cta-final {
  background: var(--color-primario);
  color: var(--color-claro);
  text-align: center;
  padding: 3rem 1rem;
  position: relative;
}
.cta-img {
  max-width: 300px;
  margin: 2rem auto;
  display: block;
  border-radius: 12px;
}
.site-footer {
  background: var(--color-cabecera);
  color: var(--color-claro);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
}

custom.js
/*
 * custom.js - Script base para QHItech SL
 * Mejora de UX, animaciones suaves y comportamiento responsive
 */

document.addEventListener('DOMContentLoaded', function () {
  // Scroll suave para anclas
  const links = document.querySelectorAll('a[href^="#"]');
  links.forEach(link => {
    link.addEventListener('click', function (e) {
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        e.preventDefault();
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });

  // Agregar clase al scroll (por ejemplo, sticky o fondo en header)
  const header = document.querySelector('.site-header');
  if (header) {
    window.addEventListener('scroll', function () {
      if (window.scrollY > 80) {
        header.classList.add('scrolled');
      } else {
        header.classList.remove('scrolled');
      }
    });
  }

  // TOGGLE MOBILE MENU (si usas hamburguesa en futuro)
  const menuToggle = document.querySelector('.menu-toggle');
  const mainNav = document.querySelector('.main-nav');

  if (menuToggle && mainNav) {
    menuToggle.addEventListener('click', function () {
      mainNav.classList.toggle('open');
    });
  }
});