/* ================================
   HEADER - ESTILO BASE
================================== */

.bg-img {
  background-image: url('/images/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mask {
  background-color: var(--header-mask-color);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  
}

.header-title {
  font-family: 'Product Sans';
  font-size: 3em;
  font-weight: bolder;
  color: var(--text-color);
  
}

.shadowed {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}


/* ================================
     RESPONSIVE HEADER TITLE
================================== */

@media (max-width: 768px) {
  .header-title {
    font-size: 2em;
    padding: 0 1rem;
    text-align: center;
  }
}
