/* ==========================================================================
   HERO.CSS
   Primera sección del sitio. Fondo navy continuo con el header (misma
   superficie), grilla de fondo tipo plano técnico, y un panel visual
   con el motivo de "instrumento de precisión" (anillos concéntricos +
   nodo orbitando) en vez de fotografía — la curaduría de fotografía
   real ocurre en una entrega dedicada a Evidencia y Resultados.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--qa-navy-950);
  color: var(--color-text-inverse);
  min-height: clamp(560px, 84vh, 800px);
  display: flex;
  align-items: center;
  padding-block: var(--space-9);
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(111, 216, 203, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 216, 203, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
}

.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,22,37,0.90) 0%, rgba(8,22,37,0.80) 45%, rgba(8,22,37,0.94) 100%);
}

.hero__bg::after {
  /* Resplandor suave detrás del panel visual, refuerza el foco de
     atención sin usar una foto */
  content: '';
  position: absolute;
  top: 10%;
  right: -10%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(31, 169, 154, 0.14) 0%, transparent 70%);
}

.hero__container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__container {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-8);
  }
}

/* --------------------------------------------------------------------
   CONTENIDO DE TEXTO
   -------------------------------------------------------------------- */

.hero__content {
  max-width: 620px;
}

.hero__eyebrow {
  /* Usa el componente .eyebrow de components.css, con color adaptado
     al fondo oscuro del Hero */
  color: var(--qa-cyan-300);
}

.hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-5);
}

.hero__title-accent {
  color: var(--qa-cyan-300);
}

.hero__subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--qa-steel-200);
  max-width: 52ch;
  margin-bottom: var(--space-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* El botón secundario necesita ajuste de color sobre fondo oscuro:
   su variante por defecto (components.css) está pensada para fondo
   claro, aquí se invierte */
.hero .btn--secondary {
  color: var(--color-text-inverse);
  border-color: var(--qa-navy-500);
}

.hero .btn--secondary:hover {
  background-color: var(--qa-navy-800);
  border-color: var(--qa-navy-800);
}

/* --------------------------------------------------------------------
   PANEL VISUAL — "instrumento de precisión"
   Anillos concéntricos animados + nodo orbitando + lecturas técnicas.
   Sustituye a una fotografía en este primer impacto: es una pieza
   gráfica propia, no un ícono de librería externa.
   -------------------------------------------------------------------- */

.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 440px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bracket-size);
}

.hero__instrument {
  width: 100%;
  height: 100%;
}

/* Anillo exterior: rotación continua muy lenta */
.hero__instrument .ring-outer {
  transform-origin: center;
  animation: qa-rotate 60s linear infinite;
}

/* Anillo interior: rotación inversa, más rápida */
.hero__instrument .ring-inner {
  transform-origin: center;
  animation: qa-rotate-reverse 40s linear infinite;
}

/* Nodo que orbita sobre el anillo exterior (referencia abstracta a un
   sensor de la futura Plataforma SCO V2.0 — sin afirmar que existe hoy) */
.hero__instrument .orbit-node {
  transform-origin: center;
  animation: qa-rotate 14s linear infinite;
}

/* Latido extremadamente sutil de la gota central — amplitud mínima
   a propósito (opacidad y escala casi imperceptibles): la intención
   es transmitir "sistema vivo", nunca competir con el texto del Hero. */
.hero__instrument .core-droplet {
  transform-origin: 100px 96px;
  animation: qa-pulse-subtle 5s var(--ease-standard) infinite;
}

@keyframes qa-pulse-subtle {
  0%, 100% { transform: scale(1);     opacity: 0.92; }
  50%      { transform: scale(1.035); opacity: 1; }
}

@keyframes qa-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes qa-rotate-reverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* Lecturas técnicas alrededor del instrumento — categorías, no cifras
   inventadas (ver Fase 1: no inventar datos de resultados) */
.hero__readout {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qa-steel-200);
  background-color: rgba(8, 22, 37, 0.6);
  border: 1px solid var(--qa-navy-700);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.hero__readout--tl { top: 4%;    left: -6%; }
.hero__readout--tr { top: 14%;   right: -10%; }
.hero__readout--bl { bottom: 10%; left: -12%; }

.hero__readout--dev {
  color: #F4CE8C;
  border-color: var(--color-status-dev);
  background-color: rgba(226, 163, 59, 0.14);
}

.hero__readout .icon {
  width: 0.9rem;
  height: 0.9rem;
}

@media (max-width: 1023.98px) {
  .hero__readout--tl,
  .hero__readout--tr,
  .hero__readout--bl {
    display: none; /* en mobile el panel se simplifica: solo el instrumento */
  }
}

/* --------------------------------------------------------------------
   INDICADOR DE SCROLL
   -------------------------------------------------------------------- */

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--qa-steel-200); /* Hero es fondo oscuro: texto claro */
}

.hero__scroll-cue .icon {
  animation: qa-bounce 2s var(--ease-standard) infinite;
}

@keyframes qa-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (min-width: 768px) {
  .hero__scroll-cue {
    display: flex;
  }
}

/* --------------------------------------------------------------------
   ANIMACIÓN DE ENTRADA (al cargar la página, no al hacer scroll —
   el Hero está siempre visible desde el primer instante)
   -------------------------------------------------------------------- */

.hero__eyebrow,
.hero__title,
.hero__subtitle,
.hero__actions,
.hero__visual {
  animation: qa-fade-up var(--duration-slower) var(--ease-entrance) both;
}

.hero__eyebrow  { animation-delay: 0ms; }
.hero__title    { animation-delay: 90ms; }
.hero__subtitle { animation-delay: 180ms; }
.hero__actions  { animation-delay: 270ms; }
.hero__visual   { animation-delay: 200ms; }

@keyframes qa-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------
   RESPONSIVE — HERO
   -------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .hero {
    min-height: auto;
    padding-block: var(--space-8);
    text-align: left;
  }

  .hero__title {
    font-size: var(--text-4xl);
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  .hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}