
/* HPI+ Solutions — Etapa 1: Estabilidade visual V28.4
   Camada técnica mínima. Não altera o design aprovado da V27.8. */

/* O atributo hidden sempre deve vencer regras de layout antigas. */
[hidden] {
  display: none !important;
}

/* Evita estouro horizontal causado por mídia ou componentes dinâmicos. */
img,
video,
iframe,
svg {
  max-width: 100%;
}

/* Garante dimensões estáveis do logo sem modificar a proporção aprovada. */
.brand img {
  object-fit: contain;
  flex: 0 0 auto;
}

/* Impede que textos longos quebrem cards e diálogos. */
.card,
.page-hero-content,
.hpi-message-bubble,
.crm-dialog,
.crm-table-wrap {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Campos claros nunca recebem texto invisível de regras antigas. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea,
select {
  color: #111827;
  -webkit-text-fill-color: #111827;
  caret-color: #111827;
}

input[type="password"] {
  color: #111827;
  -webkit-text-fill-color: #111827;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
}

/* Preserva proporção das imagens hero e reduz mudanças de layout. */
.page-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Corrige foco visível sem trocar aparência padrão dos componentes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(45, 214, 218, .38);
  outline-offset: 3px;
}

/* Evita animações desconfortáveis e instabilidades em dispositivos lentos. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
