/* ============================================================================
   qirava-page-hero.css — Cabecera "tech-noir" compartida para las páginas
   internas (Productos, Servicios, Educación, Nosotros). Da a todo el sitio la
   MISMA identidad que la HOME rediseñada: fondo azul→verde profundo, nodos de
   pipeline vivos, y la SEÑAL de marca (no la píldora eyebrow genérica).
   Solo usa tokens --q-* reales del portal. Sin imágenes de personas.
   ============================================================================ */

.qp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 84px);
  /* Base tech-noir: azul profundo → verde de marca, coherente con el hero video. */
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(34, 211, 238, 0.20), transparent 60%),
    radial-gradient(900px 520px at 92% 8%, rgba(62, 133, 81, 0.26), transparent 58%),
    linear-gradient(135deg, #070C22 0%, #0B1230 46%, #0A1A26 100%);
  color: #fff;
}
/* Malla de nodos del pipeline (eco de la HOME), sutil, detrás del contenido. */
.qp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(134, 193, 169, 0.16) 1.4px, transparent 1.6px),
    radial-gradient(rgba(34, 211, 238, 0.10) 1.4px, transparent 1.6px);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,0.35) 46%, transparent 78%);
          mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,0.35) 46%, transparent 78%);
}
/* Halo de brillo de marca arriba-derecha. */
.qp-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -140px;
  top: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 62%);
  pointer-events: none;
}

.qp-hero .wrap {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--q-space-6, 28px);
}
.qp-hero__inner { max-width: 62ch; }
.qp-hero__inner--center { max-width: 66ch; margin: 0 auto; text-align: center; }

.qp-hero h1 {
  margin: 0 0 var(--q-space-4, 18px);
  font-family: var(--q-font-display, Sora), sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.07;
  color: #fff;
  text-wrap: balance;
}
.qp-hero .qp-hero__lead {
  margin: 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--q-font-sans, Inter), sans-serif;
  font-size: clamp(1.02rem, 2vw, 1.16rem);
  line-height: 1.6;
}
.qp-hero__inner--center .qp-hero__lead { margin-left: auto; margin-right: auto; }
.qp-hero .hl { color: var(--q-cyan, #22D3EE); }

/* CTAs del hero (sobre oscuro). */
.qp-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--q-space-6, 28px); }
.qp-hero__inner--center .qp-hero__ctas { justify-content: center; }
.qp-hero .qp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px;
  border-radius: var(--q-radius-xl, 14px);
  font-family: var(--q-font-sans, Inter), sans-serif; font-weight: 800;
  text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.qp-hero .qp-btn--primary {
  background: var(--q-gradient-primary, linear-gradient(135deg, #22D3EE, #3E8551));
  color: #06121A; box-shadow: 0 10px 26px rgba(34, 211, 238, 0.28);
}
.qp-hero .qp-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(34, 211, 238, 0.36); }
.qp-hero .qp-btn--ghost {
  background: rgba(255, 255, 255, 0.06); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.qp-hero .qp-btn--ghost:hover { background: rgba(255, 255, 255, 0.13); }
.qp-hero .qp-btn:focus-visible { outline: 3px solid var(--q-cyan, #22D3EE); outline-offset: 3px; }

/* ── SEÑAL DE MARCA (idéntico criterio a la HOME): nodo vivo + wordmark en
   versalitas + promesa; NO es una píldora eyebrow. ───────────────────────── */
.qp-signal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--q-space-5, 22px);
}
.qp-hero__inner--center .qp-signal { justify-content: center; }
.qp-signal__pulse {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--q-cyan, #22D3EE);
  box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .qp-signal__pulse { animation: qp-signal-pulse 2.4s ease-out infinite; }
}
@keyframes qp-signal-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
.qp-signal__brand {
  font-family: var(--q-font-display, Sora), sans-serif; font-weight: 800;
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.qp-signal__tag {
  position: relative; padding-left: 13px;
  font-family: var(--q-font-sans, Inter), sans-serif; font-weight: 500;
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.8);
}
.qp-signal__tag::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.9), rgba(134, 193, 169, 0.5));
}
@media (max-width: 520px) {
  .qp-signal { flex-wrap: wrap; gap: 8px 10px; }
  .qp-signal__tag { padding-left: 0; }
  .qp-signal__tag::before { display: none; }
}

/* Chips de recorrido rápido bajo el hero (anclas internas). */
.qp-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--q-space-6, 26px); }
.qp-hero__inner--center .qp-hero__chips { justify-content: center; }
.qp-hero__chips a {
  font-family: var(--q-font-sans, Inter), sans-serif; font-size: 0.86rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.92); text-decoration: none;
  padding: 7px 15px; border-radius: var(--q-radius-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05);
  transition: background 140ms ease, border-color 140ms ease;
}
.qp-hero__chips a:hover { background: rgba(34, 211, 238, 0.16); border-color: rgba(34, 211, 238, 0.5); }