:root {
  /* Ajusta a tu paleta global si ya existen en style.css */
  --footer: #0a2540;
  --white: #fff;
  --overlay: rgba(0, 0, 0, 0.45);
}

footer {
  background: var(--footer);
  color: var(--white);
}

#hero {
  min-height: 50vh;
  background: linear-gradient(var(--overlay), var(--overlay)),
    url("../img/kint_contacto.jpeg") center/cover no-repeat;
}
#hero .display-4 {
  margin-bottom: 0.5rem;
}
#hero .lead {
  font-size: 1.1rem;
}

.contact-block.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.contact-block.show {
  opacity: 1;
  transform: translateY(0);
}

/* Accesibilidad: foco visible */
.form-control:focus,
.btn:focus,
#mobile-toggle:focus {
  outline: 2px solid rgba(13, 110, 253, 0.6); /* Bootstrap primary */
  outline-offset: 2px;
}

/* Respeto a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .contact-block.hidden {
    transition: none;
    transform: none;
    opacity: 1;
  }
}