/* css/home.css — página inicial (hero e cards) e KPIs funcionais */

.home-hero { text-align: center; padding: 40px 20px 30px; }
.home-hero h2 { font-size: 30px; font-weight: 700; margin: 12px 0 8px; letter-spacing: -.02em; }
.home-hero p { font-size: 15px; color: var(--muted); max-width: 650px; margin: 0 auto; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 30px; }
.home-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: all .2s ease; text-align: left; position: relative; }
.home-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
.home-card-icon { width: 48px; height: 48px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.home-card h3 { margin: 0; font-size: 18px; font-weight: 600; }
.home-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.home-card .badge-lock { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 12px; background: var(--soft); color: var(--muted); border: 1px solid var(--line); }

.func-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.func-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; border-top: 3px solid var(--ext); }
.func-kpi .top-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.func-kpi .val { font-size: 26px; font-weight: 700; margin: 6px 0 2px; letter-spacing: -.02em; }
/* ==========================================================================
   AJUSTES MODO CLARO (LIGHT MODE) - LOGO CENTRAL (HERO)
   ========================================================================== */
:root[data-mode="light"] .home-hero .logo-cognition {
  background-color: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 12px;
  padding: 8px 16px; /* Reduzido para não esmagar a logo */
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 6%, transparent);
  box-sizing: border-box;
  background-size: 0 0 !important; 
  position: relative;
}
:root[data-mode="light"] .home-hero .logo-cognition::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background-image: inherit;
  background-size: 80%; /* Tamanho excelente para respirar */
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0px 2px 5px color-mix(in srgb, var(--ink) 65%, transparent));
}