/*
 * house-hero.css: cabecera oscura con lienzo de partículas.
 *
 * Lo comparten el acceso (variante a panel completo) y el inicio (variante en
 * caja). Valores en house.css; house/js/particulas.js reescribe
 * --house-hero-inicio, --house-hero-fin y --house-acento-oscuro en el propio
 * elemento según la hora. Sin JS manda el degradado de reposo de house.css.
 *
 * Marcado:
 *   <div class="house-hero house-hero--caja|house-hero--pleno">
 *     <canvas class="house-hero__lienzo" aria-hidden="true"></canvas>
 *     <div class="house-hero__contenido">...</div>
 *   </div>
 */

.house-hero {
  position: relative;
  overflow: hidden;
  color: var(--house-tinta);
  background-color: var(--house-hero-fin);
  background-image:
    linear-gradient(135deg, var(--house-hero-inicio) 0%, var(--house-hero-fin) 100%),
    repeating-linear-gradient(0deg, var(--house-trama) 0, var(--house-trama) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, var(--house-trama) 0, var(--house-trama) 1px, transparent 1px, transparent 40px);
  transition: background-color .6s linear;
}

.house-hero__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* el puntero lo escucha el contenedor, no el lienzo */
}

.house-hero__contenido {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Panel completo: la mitad de la pantalla de acceso. */
.house-hero--pleno {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--house-aire-amplio);
}

/* En caja: cabecera del inicio, dentro del container. Radio de .card.
   El borde es sólido (no el translúcido de .card) a propósito: medido en
   oscuro y de noche, el hero y el fondo de página daban ratio 1,01 y el
   borde translúcido 1,13; el sólido 1,72. */
.house-hero--caja {
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--house-radio);
  padding: var(--house-aire-ancho);
  margin-bottom: var(--house-aire-ancho);
}

/* Tabler pinta los textos de apoyo para fondo claro; el hero es oscuro a
   cualquier hora. */
.house-hero .text-secondary { color: var(--house-tinta-suave) !important; }
.house-hero .page-pretitle { color: var(--house-tinta-tenue); }
.house-hero .page-title { color: var(--house-tinta); }

/* lg de Tabler */
@media (max-width: 991.98px) {
  .house-hero--pleno { flex: 0 0 auto; min-height: var(--house-hero-alto-movil); padding: var(--house-aire-ancho); }
  .house-hero--caja { padding: var(--house-aire); }
}

@media (prefers-reduced-motion: reduce) {
  .house-hero__lienzo { opacity: .5; }
  .house-hero { transition: none; }
}