/* ============================================================
   CUSTOM.CSS – FlowSenso
   Layout refinado, sem scroll horizontal e com boas práticas.
   ============================================================ */

/* -------------------------------
   Variables (Design Tokens)
-------------------------------- */
:root {
  --brand-500: #0d6efd;
  --muted: #6c757d;
  --bg: #ffffff;
  --radius: .75rem;
  --shadow-sm: 0 6px 20px rgba(15,23,42,0.06);
  --container-max: 1200px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* -------------------------------
   Global Reset / Behavior
-------------------------------- */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  color: #0f1724;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove qualquer SCROLL horizontal */
html, body {
  overflow-x: hidden;
}

/* -------------------------------
   Bootstrap Adjustments
-------------------------------- */
@media (min-width: 1200px) {
  .container { 
    max-width: var(--container-max); 
  }
}

/* Correção para evitar overflow lateral por sombras */
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden;
}

/* -------------------------------
   Utility Colors
-------------------------------- */
.text-muted { 
  color: var(--muted) !important; 
}

/* -------------------------------
   Components
-------------------------------- */
.card-ghost {
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden; /* evita "vazar" sombra */
}

.card {
  border-radius: .9rem;
}

/* -------------------------------
   Typography
-------------------------------- */
h1, h2, h3 {
  color: #0b1220;
}

.lead {
  color: var(--muted);
}

/* -------------------------------
   Buttons
-------------------------------- */
.btn-primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.btn-primary:hover {
  filter: brightness(.95);
}

/* -------------------------------
   Sections default spacing
-------------------------------- */
section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* -------------------------------
   HOW SECTION (estilo consistente)
-------------------------------- */
#how .card-ghost {
  min-height: 220px; 
  display: flex; 
  flex-direction: column;
}

#how .icon-circle {
  width: 56px; 
  height: 56px; 
  border-radius: 12px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  background: linear-gradient(180deg, rgba(13,110,253,0.08), rgba(13,110,253,0.04));
  box-shadow: 0 6px 18px rgba(13,110,253,0.06);
}

#how h5 {
  font-size: 1.05rem; 
  color: #0b1220;
}

@media (max-width: 767px) {
  #how .icon-circle {
    width: 48px; 
    height: 48px;
  }
}

/* -------------------------------
   Branding (logo)
-------------------------------- */
.navbar-brand img {
  filter: none;
}

.navbar-brand .site-logo { 
  height: 36px; 
  width: auto; 
}
@media (min-width: 992px){
  .navbar-brand .site-logo { height: 40px; }
}