/* ==========================================================================
   HERO — DIGART Studio
   Pattern: Hero

   Referencia documental:
     project/10-HOME-BLUEPRINT.md (3. Hero)
     project/11-HOME-WIREFRAME.md (3. Hero)
     project/12-HOME-MOCKUP.md (3.3 Hero)
     project/13-UI-DESIGN-SYSTEM.md (4.2 Contenedores, Capítulo 9 Estados,
     Capítulo 10 Motion, Capítulo 11 Responsive)
     D-015 (Metodología oficial de implementación de Patterns)

   Este archivo consume exclusivamente los Design Tokens (tokens.css) y la
   infraestructura de Layout (layout.css, .l-full-width). No declara
   valores independientes de color, tipografía, espaciado, tiempo, easing,
   z-index, sombra ni punto de quiebre.

   Segunda implementación (Implementación visual, D-015): distribución
   editorial, fondo y overlay de transición (Design Tokens Overlay, 3.1),
   jerarquía tipográfica del título y el texto de apoyo, indicador de
   desplazamiento y activación del movimiento de Aparición mediante
   .hero--ready, ya aplicado por hero.js. El tratamiento visual de los
   CTA lo resuelve el Componente oficial Button v1.0 (button.css,
   13-UI-DESIGN-SYSTEM.md 8.1), ya integrado en este Pattern. Quedan
   fuera del alcance de este archivo, por depender de Componentes
   oficiales aún no implementados o de definición documental pendiente:
   los estilos definitivos del logotipo y la navegación (Topbar) y los
   indicadores de confianza (sin ubicación documentada todavía). Tampoco
   incluye fotografía o video de fondo definitivo, JavaScript ni reglas
   Responsive específicas.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   .hero combina la clase .l-full-width (layout.css) con las propiedades
   propias del Pattern: altura de viewport completa y contexto de
   posicionamiento para las capas superpuestas descritas en el Wireframe
   (3, "Todos los elementos se organizan sobre un mismo plano compositivo
   mediante capas superpuestas"). El único elemento que permanece en el
   flujo normal (.hero__container) queda centrado verticalmente.
   -------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------
   2. Container
   .hero__container agrupa el bloque editorial (título, texto de apoyo
   y acciones) dentro del primer tercio horizontal del viewport descrito
   en el Wireframe (3, "Distribución").

   margin-inline-start replica el margen izquierdo que .l-container ya
   aplica en el resto del sitio (centrado hasta --breakpoint-desktop con
   inset --space-6), calculado a partir de los mismos Tokens sin
   redeclarar sus valores en Foundations, para que el bloque editorial
   del Hero comparta el mismo eje horizontal que el logotipo del Header
   (Componente global, .l-container) en cualquier ancho de viewport
   (H-003, Calibración visual del Hero). Se utiliza margin y no padding
   para que el desplazamiento no compita con max-width por el ancho
   disponible del propio contenedor (box-sizing: border-box, reset.css).

   position: relative (sin z-index, no autorizado en este archivo) sitúa
   el bloque editorial en la capa de pintado de los posicionados: al ir
   después de .hero__background y .hero__overlay en el marcado, se pinta
   y recibe el puntero por encima de ambas capas, conforme al plano
   compositivo de capas superpuestas del Wireframe (3). Sin esta regla,
   el contenido en flujo normal se pinta debajo de cualquier hermano
   posicionado: el bloque editorial queda oculto tras el fondo/overlay y
   los CTA no reciben Hover ni Active (remediación INC-QA-1, Sprint
   R-07). No altera el centrado vertical ni el flujo del contenedor.

   max-width recalibrado (H-004, Calibración final del Hero): el valor
   fijo anterior (calc(--breakpoint-desktop / 1.5) ≈ 853px) se percibía
   proporcionalmente cada vez más pequeño cuanto más ancho el viewport,
   al no escalar con él. clamp(48rem, 56vw, --breakpoint-desktop) crece
   con el viewport (56vw) entre un piso legible (48rem) y el ancho
   máximo de lectura ya usado como referencia en el resto del sitio
   (--breakpoint-desktop, 1280px), evitando tanto un bloque angosto en
   Desktop como líneas de texto excesivamente largas en UltraWide.
   -------------------------------------------------------------------- */
.hero__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline-end: var(--space-6);
  margin-inline-start: max(
    var(--space-6),
    calc((100vw - var(--breakpoint-desktop)) / 2 + var(--space-6))
  );
  margin-block-start: calc(var(--space-7) + var(--space-5));
  max-width: clamp(48rem, 56vw, var(--breakpoint-desktop));
}

/* --------------------------------------------------------------------
   3. Elements
   -------------------------------------------------------------------- */

/* Área de montaje del recurso visual principal (fotografía o video de
   fondo): fondo de transición mediante el tono inverso de Background,
   coherente con el mismo tratamiento cinematográfico ya usado en DIGART
   Reel, sosteniendo la composición mientras no existe el recurso
   audiovisual definitivo (Blueprint 3, Wireframe 3). */
.hero__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-background-inverse);
}

/* El <img> no heredaba ningún tamaño propio: quedaba anclado a su
   tamaño intrínseco (max-width: 100%; height: auto, reset.css),
   dejando un vacío a la derecha en viewports más anchos que dicho
   tamaño intrínseco (H-003). width/height: 100% + object-fit: cover
   fuerza la fotografía a cubrir por completo .hero__background, mismo
   criterio ya aplicado al resto de fotografías editoriales del sitio. */
.hero__background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa de apoyo a la legibilidad del bloque editorial sobre la
   fotografía o video de fondo: consume exclusivamente la categoría
   oficial Overlay (tokens.css, 3.1; 13-UI-DESIGN-SYSTEM.md 6.7-6.8),
   derivada de la Escala de Neutros, sin declarar color ni opacidad
   propios. Nivel Default: uso general para la superposición sobre
   foto/video, mismo criterio ya aplicado en DIGART Reel. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay-default);
}

/* Tamaño recalibrado (H-004): sustituye el clamp() propio anterior
   (tope fijo en 4rem, alcanzado ya a partir de ~1600px y sin crecer
   más allá en UltraWide) por el Token --font-size-hero ya existente en
   tokens.css (clamp(2.25rem, 1.6rem + 2.6vw, 4.5rem)), diseñado
   específicamente para este nivel jerárquico y con mayor techo de
   escala, en lugar de declarar un valor tipográfico independiente
   (13-UI-DESIGN-SYSTEM.md 13.3, Consumo del Sistema). */
.hero__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.08;
  color: var(--color-text-inverse);
}

.hero__support-text {
  font-family: var(--font-family-primary);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.65;
  color: var(--color-text-inverse);
  max-width: 580px;
}

/* Área de montaje del grupo de acciones: distribuye el CTA principal y
   el CTA secundario en un mismo eje horizontal (Wireframe 3, Esquema
   espacial "CTA   BTN"). */
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-block-start: var(--space-4);
}

/* Área de montaje de los indicadores de confianza. Sin posición ni
   estilo propio: el Blueprint y el Wireframe Oficiales no documentan su
   ubicación espacial; queda pendiente de una definición documental
   posterior. */
.hero__trust-indicators {
}

/* Indicador de desplazamiento, próximo al borde inferior izquierdo
   conforme al esquema espacial del Wireframe (3, "SCR"): una forma
   mínima y neutra (sin iconografía, Cap. 7 aún sin implementar) que
   reserva su presencia visual. Sin movimiento propio: el desplazamiento
   del usuario (Blueprint 3, "Interacción") no tiene todavía un
   disparador funcional real en main.js (handleScroll permanece vacío),
   por lo que no se activa ninguna animación para evitar un movimiento
   sin propósito comunicativo (13-UI-DESIGN-SYSTEM.md 10.5). */
.hero__scroll-indicator {
  position: absolute;
  inset-block-end: var(--space-6);
  inset-inline-start: var(--space-6);
  width: var(--border-width-thick);
  height: var(--space-6);
  border-radius: var(--border-radius-full);
  background-color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------
   4. Variants
   El Pattern no define variantes en el Blueprint, Wireframe ni Mockup
   oficiales de la Home; sección reservada sin reglas.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. States
   Estado base (Default) representado por las reglas de Root, Container
   y Elements. Los estados de interacción (Hover, Focus, Active) de los
   CTA los resuelve el Componente oficial Button v1.0 (button.css), ya
   integrado en este Pattern. Los de la navegación, así como los estados
   de proceso del Sistema de Estados (Cap. 9), se incorporarán junto con
   el Componente oficial de Navegación; sección reservada sin reglas
   adicionales.

   Excepción: .hero ya declara display: flex de forma incondicional en
   Root, por lo que el atributo nativo [hidden] requiere esta única
   regla para conservar su efecto (el origen Autor prevalece sobre la
   hoja de estilos por defecto del User Agent) mientras el módulo hero.js
   controla la revelación inicial del Pattern.
   -------------------------------------------------------------------- */
.hero[hidden] {
  display: none;
}

/* --------------------------------------------------------------------
   6. Motion Hooks
   Activa el movimiento de Aparición del Pattern (Blueprint 3,
   "Interacción"; Wireframe 3, "Comportamiento": "transición continua")
   mediante su disparador funcional real ya existente: hero.js aplica
   la clase .hero--ready inmediatamente después de retirar el atributo
   hidden (reveal()), el mismo mecanismo ya activado para la
   Desaparición de Loading Screen mediante .loading-screen--success.
   La Desaparición del Pattern (Blueprint 3, "Transición" hacia "Todo
   comienza con una idea") no se activa: hero.js no aplica ningún
   estado previo a un ocultamiento del Pattern, y esta implementación no
   modifica JavaScript. Las microinteracciones de los CTA (Mockup 3.3,
   "Interacción") las resuelve el Componente oficial Button v1.0
   (button.css, 8.1), ya integrado en este Pattern, y no se preparan en
   este archivo.
   -------------------------------------------------------------------- */
.hero {
  opacity: 0;
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard);
}

.hero--ready {
  opacity: 1;
}

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css.
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px
   Corrección local RWD-09: el grupo de acciones abandona el eje
   horizontal Desktop, cuyo ancho combinado excedía el viewport en
   móviles y provocaba el recorte del botón secundario bajo el
   overflow: hidden del Root. Los botones se apilan verticalmente y
   ocupan el ancho disponible del bloque editorial mediante layout del
   Pattern; su tratamiento visual, estados y motion siguen viviendo
   íntegros en el Componente Button v1.0 (button.css). El orden
   narrativo (titular, texto de apoyo, botón principal, botón
   secundario) ya coincide con el orden del marcado y la fotografía de
   fondo conserva su object-fit: cover sin cambios. Se aplica desde el
   régimen ≤768px, el mismo que cubre la franja de móviles reales
   376px–430px conforme a la infraestructura corregida (RWD-08). */
@media (max-width: 768px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
}