/* ============================================================================
   landing-video-hero.css — HERO de la HOME con SECUENCIA DE 6 IMÁGENES.
   ----------------------------------------------------------------------------
   Encargo CEO (2026-08-16): fuera el video mp4 y fuera el SVG animado de
   "palitos" (pipeline/flujo). El hero abre con una SECUENCIA de 6 fotografías
   reales que cuenta una historia y hacen cross-fade automático entre sí, con el
   TITULAR "Materializamos tu idea en tecnología" SOBRE el hero (scrim de
   contraste), como en la versión previa al mp4.

   Narrativa de las 6 imágenes (orden 1→6):
     1. Un profesional, solo, frente a su problema.
     2. Llega Qirava: primera reunión con él.
     3. Le mostramos el plan (bocetos / wireframes en la pared de vidrio).
     4. Implementamos la tecnología con él (dashboard en pantalla).
     5. El cliente queda contento con lo que funciona.
     6. Resultados para los dos (crecimiento en el tablero).

   Reglas de gobierno respetadas:
   - Paleta NUESTRA: solo tokens --q-* reales del portal para el copy y el scrim.
   - Accesibilidad: prefers-reduced-motion NO anima (deja fija la 1ª imagen);
     botón de pausa/play siempre disponible.
   - Contraste: scrim (velo) legible bajo el titular sobre cualquier fotograma.
   - Self-contained: solo assets locales (webp), sin red externa.

   El cross-fade y la pausa los gobierna landing-video-hero.js.
   ============================================================================ */

/* ── Contenedor full-bleed ─────────────────────────────────────────────────
   Rompe el ancho del .wrap para ocupar el viewport de entrada. Altura cómoda
   (no aspect-ratio fijo) para que quepan las fotos y el titular encima. */
.qh-video-hero {
  position: relative;
  isolation: isolate;                 /* contiene los z-index del media/scrim */
  width: 100%;
  min-height: clamp(560px, 78vh, 720px);
  display: flex;
  align-items: center;                /* copy centrado vertical */
  overflow: hidden;
  padding: var(--q-space-16) 0;
  background: var(--q-ink);           /* respaldo tech-noir mientras carga */
}

/* ── Capa de MEDIA (secuencia de imágenes + scrim) ─────────────────────────
   Absolutamente posicionada, cubre todo el hero, detrás del contenido. */
.qh-video-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* ── Secuencia de imágenes (cross-fade) ────────────────────────────────────
   Las 6 fotos van apiladas; solo la .is-active se ve. El JS rota la clase y el
   CSS hace el fundido cruzado por opacidad. */
.qh-hero-seq { position: absolute; inset: 0; }
.qh-hero-seq__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* llena el hero sin deformar */
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
  will-change: opacity;
}
.qh-hero-seq__slide.is-active { opacity: 1; }

/* ── SCRIM de contraste ────────────────────────────────────────────────────
   Velo que oscurece IZQUIERDA (donde vive el copy) y la base, para que el
   titular blanco se lea sobre cualquier fotograma. Las fotos ya son oscuras;
   este velo garantiza el contraste AA. */
.qh-video-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 6, 10, 0.78) 0%, rgba(5, 6, 10, 0.55) 34%, rgba(5, 6, 10, 0.12) 66%, rgba(5, 6, 10, 0) 100%),
    linear-gradient(180deg, rgba(5, 6, 10, 0) 40%, rgba(5, 6, 10, 0.45) 100%);
}

/* ── COPY sobre el hero ────────────────────────────────────────────────────
   Titular + lead + señal de marca + CTAs, encima de las imágenes. Colores
   claros fijos (el copy vive sobre fotos oscuras en cualquier tema del sitio). */
.qh-video-hero .wrap {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--q-space-6);
  width: 100%;
}
.qh-video-hero__copy { max-width: 640px; }
.qh-video-hero__copy .hero-tag {
  display: inline-block;
  margin: 0 0 var(--q-space-4);
  font-family: var(--q-font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7FD8C6;                     /* verde/cian de marca on-dark */
}
.qh-video-hero__copy h1 {
  margin: 0 0 var(--q-space-5);
  font-family: var(--q-font-display, "Sora", Inter, sans-serif);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.qh-video-hero__copy .lead {
  margin: 0 0 var(--q-space-7);
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  color: rgba(233, 238, 245, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}
.qh-video-hero .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-4);
  row-gap: var(--q-space-3);
}

/* ── Botón de PAUSA / PLAY de la secuencia ─────────────────────────────────
   Siempre disponible (requisito de accesibilidad). Esquina inferior derecha,
   discreto pero con área táctil cómoda. */
.qh-hero-seq__toggle {
  position: absolute;
  right: var(--q-space-5);
  bottom: var(--q-space-5);
  z-index: 3;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--q-radius-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(8, 10, 16, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.qh-hero-seq__toggle:hover { background: rgba(8, 10, 16, 0.72); border-color: rgba(255, 255, 255, 0.6); }
.qh-hero-seq__toggle:focus-visible { outline: 2px solid #7FD8C6; outline-offset: 2px; }
.qh-hero-seq__toggle:active { transform: scale(0.94); }

/* Ícono: dos barras (pausa) por defecto; triángulo (play) cuando está en pausa.
   Se dibuja con pseudo-elementos para no depender de assets. */
.qh-hero-seq__toggle-icon { position: relative; width: 14px; height: 14px; display: block; }
/* Estado REPRODUCIENDO → mostrar icono de PAUSA (dos barras) */
.qh-hero-seq__toggle-icon::before,
.qh-hero-seq__toggle-icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 14px;
  background: currentColor;
  border-radius: 1px;
}
.qh-hero-seq__toggle-icon::before { left: 2px; }
.qh-hero-seq__toggle-icon::after  { right: 2px; }
/* Estado PAUSADO (aria-pressed=true) → mostrar icono de PLAY (triángulo) */
.qh-hero-seq__toggle[aria-pressed="true"] .qh-hero-seq__toggle-icon::after { display: none; }
.qh-hero-seq__toggle[aria-pressed="true"] .qh-hero-seq__toggle-icon::before {
  left: 3px;
  top: 0;
  width: 0;
  height: 0;
  background: transparent;
  border-radius: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────────
   Móvil: hero más alto proporcionalmente (la foto ultrawide se recorta al
   centro, donde están las personas) y CTAs a ancho completo apilados. */
@media (max-width: 640px) {
  .qh-video-hero { min-height: 86vh; padding: var(--q-space-12) 0; }
  .qh-video-hero__copy .lead { margin-bottom: var(--q-space-6); }
  .qh-video-hero .hero-ctas { flex-direction: column; align-items: stretch; }
  .qh-video-hero .hero-ctas .btn-primary,
  .qh-video-hero .hero-ctas .btn-secondary { width: 100%; text-align: center; }
  /* Scrim un poco más parejo en móvil (el copy ocupa todo el ancho). */
  .qh-video-hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 6, 10, 0.28) 0%, rgba(5, 6, 10, 0.5) 55%, rgba(5, 6, 10, 0.72) 100%);
  }
}

/* ── ACCESIBILIDAD: prefers-reduced-motion ─────────────────────────────────
   Sin cross-fade: se queda fija la 1ª imagen. El JS además detiene la rotación
   y refleja el estado en el botón de pausa. */
@media (prefers-reduced-motion: reduce) {
  .qh-hero-seq__slide { transition: none; }
}

/* ============================================================================
   Sección de la ILUSTRACIÓN heredada, DEBAJO del hero (se conserva).
   ============================================================================ */
.qh-pipeline-illus .wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--q-space-6);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--q-space-12);
  align-items: center;
}
.qh-pipeline-illus__art { width: 100%; height: auto; max-width: 560px; display: block; margin: 0 auto; }
.qh-pipeline-illus__copy h2 {
  margin: 0 0 var(--q-space-4);
  font-family: var(--q-font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--q-ink);
}
.qh-pipeline-illus__copy p {
  margin: 0;
  max-width: 42ch;
  color: var(--q-muted-2);
  font-size: 1.06rem;
  line-height: 1.55;
}
@media (max-width: 860px) {
  .qh-pipeline-illus .wrap { grid-template-columns: 1fr; gap: var(--q-space-8); }
  .qh-pipeline-illus__art { order: -1; max-width: 420px; }
}