/* ============================================================
   Canal de Ouvidoria — Construtora Sucesso
   Tema fiel ao original (Soft UI Dashboard / Bootstrap 5)
   ============================================================ */

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: #67748e;
  background: #fff;
}
h1, h2, h3, h4, h5, h6 { color: #344767; font-weight: 700; }
a { color: #e60b13; text-decoration: none; }
a:hover { color: #b30910; }

/* ---------- utilitários que existem no Soft UI e não no Bootstrap ---------- */
.mt-6 { margin-top: 4.5rem !important; }
/* no original, o hero fica com os 500px do min-height inline (a classe
   min-vh-75 do tema deles não aplica altura); replicamos o mesmo resultado */
.min-vh-75 { min-height: 500px; }
.z-index-3 { z-index: 3; }

/* ---------- sombras suaves (Soft UI) ---------- */
.card { border: none; border-radius: 1rem; }
.shadow-lg {
  box-shadow: 0 8px 26px -4px rgba(20, 20, 20, .15),
              0 8px 9px -5px rgba(20, 20, 20, .06) !important;
}

/* ---------- botões (Soft UI) ---------- */
.btn {
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-radius: .5rem;
  padding: .65rem 1.5rem;
  border: none;
  transition: all .15s ease-in;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { transform: none; }
.bg-gradient-info {
  background-image: linear-gradient(310deg, #2152ff 0%, #21d4fd 100%);
  color: #fff !important;
}
.bg-gradient-info:hover { box-shadow: 0 4px 12px rgba(33, 82, 255, .35); color: #fff; }
.bg-gradient-info.active { filter: brightness(.88); box-shadow: inset 0 2px 6px rgba(0,0,0,.2); }
.bg-gradient-secondary {
  background-image: linear-gradient(310deg, #627594 0%, #a8b8d8 100%);
  color: #fff !important;
}
.bg-gradient-success {
  background-image: linear-gradient(310deg, #17ad37 0%, #84dc14 100%);
  color: #fff !important;
}
.bg-gradient-success:hover { box-shadow: 0 4px 12px rgba(23, 173, 55, .4); color: #fff; }
.btn-dark-flat { background-color: #333; color: #fff !important; }
.btn-dark-flat:hover { background-color: #1f1f1f; box-shadow: 0 4px 12px rgba(0,0,0,.3); }

/* ---------- hero da página de atendimento ---------- */
.page-header {
  position: relative;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: 50% 58%;
  padding: 0;
}
.page-header .mask {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.page-header .container { position: relative; z-index: 2; }

/* ---------- ondas em movimento (idênticas ao original / Soft UI) ---------- */
.waves {
  position: relative;
  width: 100%;
  height: 16vh;
  min-height: 100px;
  max-height: 150px;
  margin-bottom: -7px;
}
.moving-waves > use {
  animation: move-forever 40s cubic-bezier(.55, .5, .45, .5) infinite;
}
.moving-waves > use:nth-child(1) { animation-delay: -2s;  animation-duration: 11s; }
.moving-waves > use:nth-child(2) { animation-delay: -4s;  animation-duration: 13s; }
.moving-waves > use:nth-child(3) { animation-delay: -3s;  animation-duration: 15s; }
.moving-waves > use:nth-child(4) { animation-delay: -4s;  animation-duration: 20s; }
.moving-waves > use:nth-child(5) { animation-delay: -4s;  animation-duration: 25s; }
.moving-waves > use:nth-child(6) { animation-delay: -3s;  animation-duration: 32s; }
@keyframes move-forever {
  0%   { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}
@media (max-width: 767.98px) {
  .waves { height: 40px; min-height: 40px; }
}

/* ---------- formulário (Soft UI) ---------- */
.form-label {
  font-size: .875rem;
  font-weight: 700;
  color: #344767;
  margin-bottom: .35rem;
}
.form-control {
  border: 1px solid #d2d6da;
  border-radius: .5rem;
  padding: .55rem .75rem;
  font-size: .875rem;
  color: #495057;
}
.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #d0d0d0;
  outline: 0;
  box-shadow: 0 0 0 2px #ececec;
}
.form-text { font-size: .78rem; color: #8392ab; }
.form-check-input:checked { background-color: #2152ff; border-color: #2152ff; }
.form-check-label { font-size: .875rem; }
textarea.form-control { min-height: 110px; }

/* ---------- ilustrações da home ---------- */
.section-1 .img-1 { width: auto; height: 380px; }
.img-2 { width: 500px; height: auto; }
@media only screen and (max-width: 987px) {
  .section-1 { margin-top: 4rem !important; gap: 2rem !important; }
  .section-1 .img-1 { width: 95%; height: auto; }
  .img-2 { width: 100%; height: auto; }
  .navbar-brand .title { display: none; }
}

/* ---------- cartões de contato ---------- */
.contact-icon-box {
  padding: .9rem 1.4rem;
  border: 1px solid #dee2e6;
  border-radius: .75rem;
  color: #344767;
}

footer .text-sm { font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  .moving-waves > use { animation: none; }
  .btn, .btn:hover { transition: none; transform: none; }
}