/* KraneChile — estilos globales complementarios a Bootstrap.
   La identidad visual base (azul + oscuro) usa las clases nativas de
   Bootstrap (btn-primary, bg-dark, text-primary, etc.) a propósito,
   para mantener un solo lenguaje de color consistente en todo el sitio. */

html {
  scroll-behavior: smooth;
}

a {
  transition: color .15s ease;
}

:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* Efecto de elevación reutilizable para tarjetas (catálogo, dashboard, home) */
.transition-hover {
  transition: transform .2s ease, box-shadow .2s ease;
}

.transition-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12) !important;
}

/* ==========================================
   IDENTIDAD DISTINTIVA: tipografía industrial + grilla técnica
   ========================================== */

/* Titulares con tipografía condensada/pesada, no el sans-serif por
   defecto de Bootstrap — se aplica a los títulos principales del sitio. */
.titular-krane {
  font-family: 'Big Shoulders Display', Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 0.95;
}

/* Textura de fondo tipo plano técnico/blueprint, sutil, para secciones
   oscuras (hero). Un solo elemento distintivo, sin sobrecargar el resto. */
.fondo-tecnico {
  position: relative;
}

.fondo-tecnico::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#1E2740 1px, transparent 1px),
    linear-gradient(90deg, #1E2740 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
  pointer-events: none;
}

.fondo-tecnico > * {
  position: relative;
  z-index: 1;
}

/* Offset dinámico para tarjetas "sticky" bajo el header (ver base.html, que
   calcula --navbar-height real con JS). El valor fijo de respaldo (90px) es
   solo por si el JS aún no corrió en el primer render. */
.sticky-bajo-navbar {
  position: sticky;
  top: calc(var(--navbar-height, 90px) + 12px);
}