/* assets/css/site.css
   Base visual Qitech (hero + header premium + logos + footer)
*/

/* =========================
   HERO OVERLAY (global)
   - brillo a la DERECHA para no lavar el logo
========================= */
.hero-overlay{
  background:
    radial-gradient(900px circle at 82% 20%, rgba(59,153,217,0.16), transparent 55%),
    linear-gradient(90deg,
      rgba(26, 42, 58, 0.92) 0%,
      rgba(27, 34, 50, 0.80) 55%,
      rgba(27, 34, 50, 0.92) 100%
    );
}
/* =========================
   BOTONES (sistema)
   - mismo look en todo el sitio
========================= */
.q-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  border-radius:9999px;            /* pill real */
  padding: 1rem 2rem;              /* py-4 px-8 */
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:11px;
  line-height:1;
  font-weight:300;                 /* Panton light */
  transition: all .2s ease;
  border: 1px solid transparent;
  text-decoration:none;
  white-space:nowrap;
}

.q-btn--primary{
  background:#3B99D9;
  color: rgba(255,255,255,0.96);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 16px 40px rgba(59,153,217,0.26);
}
.q-btn--primary:hover{
  filter: brightness(0.97);
  border-color: rgba(255,255,255,0.25);
}

.q-btn--ghost-dark{
  background: rgba(255,255,255,0.00);
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.30);
}
.q-btn--ghost-dark:hover{
  background: rgba(255,255,255,0.10);
}

.q-btn--ghost-light{
  background:#fff;
  color:#000;
  border-color: rgba(148,163,184,0.35); /* slate-ish */
}
.q-btn--ghost-light:hover{
  background:#f8fafc;
}

.q-btn--dark{
  background:#000;
  color: rgba(255,255,255,0.96);
  border-color: rgba(148,163,184,0.35);
}
.q-btn--dark:hover{
  filter: brightness(0.96);
}

/* (Opcional) overlay solo para HOME si querés mantener el viejo */
.hero-overlay-home{
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.52) 58%,
    rgba(0, 0, 0, 0.14) 100%
  );
}

/* =========================
   HEADER premium: blur + tono hero (sin gris)
   Requiere:
   - <header id="siteHeader" ...>
   - .q-header, .q-header__bar, .q-header__overlay, .q-header__shade, .q-header__logo, .q-header__tagline
========================= */

/* Transiciones suaves */
.q-header{ transition: padding 220ms ease; }
.q-header__bar{ transition: background-color 220ms ease, background-image 220ms ease, backdrop-filter 220ms ease, box-shadow 220ms ease; }
.q-header__logo{ transition: height 220ms ease, opacity 220ms ease; }
.q-header__tagline{ transition: opacity 220ms ease, transform 220ms ease; }
.q-header__overlay{ transition: opacity 220ms ease; }
.q-header__shade{ transition: opacity 220ms ease, background-color 220ms ease; }

/* ARRIBA: tinta azul fuerte (mata el “gris” del blur) */
#siteHeader .q-header__bar{
  background-color: rgba(10, 22, 38, 0.92) !important;
  background-image: linear-gradient(
    180deg,
    rgba(10, 22, 38, 0.92) 0%,
    rgba(7, 14, 26, 0.86) 100%
  ) !important;

  /* 🔥 afuera blur (el culpable del gris) */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-bottom: none !important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 14px 40px rgba(0,0,0,0.22);
}

/* SCROLLEADO */
#siteHeader.q-header--shrink .q-header__bar{
  background-color: rgba(6, 10, 18, 0.92) !important;
  background-image: none !important;

  /* sin blur también */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 18px 52px rgba(0,0,0,0.28);
}

#siteHeader.q-header--shrink .q-header__overlay{ opacity: 0.12 !important; }
#siteHeader.q-header--shrink .q-header__shade{ background-color: rgba(0,0,0,0.32) !important; }

#siteHeader.q-header--shrink .q-header__logo{
  height: 2.05rem;
  opacity: 0.96;
}

/* Header: estado sólido al scroll (sutil, premium) */
#siteHeader.q-header--solid .q-header__shade{
  opacity: 1;
}
#siteHeader .q-header__shade{
  opacity: 0.55; /* base */
  transition: opacity .2s ease;
}

#siteHeader.q-header--shrink .q-header__tagline{
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
}
/* =========================
   HERO BRAND WASH (consistente)
   - asegura el “azul Qitech” aunque cambie la foto
========================= */
.q-hero-brand{
  position: relative;
}
.q-hero-brand::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px circle at 20% 15%, rgba(59,153,217,0.10), transparent 55%);
  z-index: 1;
}
.q-hero-brand::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.92), rgba(0,0,0,0.88), rgba(0,0,0,0.95));
  z-index: 1;
}
/* =========================
   CTA “pro”: legible + brillo sutil (sin tapar el texto)
========================= */
.q-cta{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.q-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 9999px;
  pointer-events:none;

  /* brillo suave, NO blanco pleno */
  background: radial-gradient(
    180px circle at 30% 20%,
    rgba(255,255,255,0.22),
    transparent 62%
  );
  opacity: .55;
  z-index: 0;
}

.q-cta > span{
  position: relative;
  z-index: 1;
}

/* Si alguna regla rara te deja el texto “lavado”, lo blindamos */
.q-cta, .q-cta span{ color: rgba(255,255,255,0.92); }

/* =========================
   LOGOS: auto
========================= */
.q-logo{ display: block; }

.q-logo-on-dark{
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.q-logo-on-light{
  filter: none;
  opacity: 0.95;
}

/* =========================
   FOOTER (oscuro)
========================= */
.q-footer{
  position: relative;
  background:
    radial-gradient(900px circle at 82% 20%, rgba(59,153,217,0.10), transparent 55%),
    linear-gradient(90deg,
      rgba(26, 42, 58, 0.92) 0%,
      rgba(17, 24, 39, 0.92) 55%,
      rgba(27, 34, 50, 0.92) 100%
    );
  border-top: 1px solid rgba(255,255,255,0.08);
}

.q-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.0));
}

.q-footer a{ color: rgba(255,255,255,0.80); }
.q-footer a:hover{ color: rgba(255,255,255,0.96); }

.q-footer .muted{ color: rgba(255,255,255,0.58); }
.q-footer .muted-2{ color: rgba(255,255,255,0.42); }

/* ==========================================================================
   CORRECCIÓN DE ESPACIADO (Header Fijo vs Contenido)
   - Esto asegura que el contenido NO quede tapado por el header.
   - Aplica a todas las páginas interiores automáticamente.
   ========================================================================== */

/* 1. Regla Global para el cuerpo de la página */
body {
  /* Aseguramos que el scroll no sea brusco */
  scroll-behavior: smooth;
}

/* 2. Padding automático para el contenido principal
   NOTA: Si usas una etiqueta <main> en tus páginas interiores (lo ideal),
   esto lo arregla solo. Si no, puedes agregar la clase .page-content al div principal.
*/
main, .page-content, .pt-header-fix {
  padding-top: 140px; /* Móvil: Espacio suficiente para header + un poco de aire */
}

/* Ajuste para Desktop (Header más alto = más espacio) */
@media (min-width: 1024px) {
  main, .page-content, .pt-header-fix {
    padding-top: 180px; /* Desktop: Aire generoso, estilo Enterprise */
  }
}

/* 3. EXCEPCIÓN: El Home (index.php) y Landings con Hero Full Screen
   Estas páginas suelen tener su propia imagen de fondo que DEBE ir detrás del header.
   Por lo tanto, reseteamos el padding a 0 para que el fondo suba.
   
   IMPORTANTE: En index.php, asegúrate de que el <section id="top"> tenga
   la clase "hero-fullscreen" o ajusta el padding manualmente como hicimos antes (pt-32).
*/
body.home main, 
main.hero-fullscreen {
  padding-top: 0 !important;
}

/* 4. Ajuste de Anclas (Scroll Offset)
   Esto es VITAL. Si haces clic en "Contacto" y baja hasta el form,
   el header fijo suele tapar el título del formulario. Esto lo evita.
*/
html {
  scroll-padding-top: 120px; /* El navegador frenará el scroll 120px antes del objetivo */
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: 160px;
  }
}