/*
Theme Name: HIFIBR Clean
Template: hello-elementor
Version: 3.0 Off-White Final
Description: HIFIBR - Off-white #FEFCF8 + Cards brancos + Hero Dark
*/

/* ===== BASE OFF-WHITE ===== */
:root {
  --hifi-bg: #FEFCF8;
  --hifi-card: #FFFFFF;
  --hifi-border: #f1ece4;
  --hifi-text: #1c1917;
  --hifi-muted: #57534e;
  --hifi-dark: #0f172a;
  --hifi-red: #ef4444;
}

html, body {
  background: var(--hifi-bg);
}

body, .site, #content, main {
  background-color: var(--hifi-bg);
  color: var(--hifi-text);
}

/* ===== HEADER - branco puro flutuando ===== */
.site-header, header, #masthead {
  background: var(--hifi-card);
  border-bottom: 1px solid var(--hifi-border);
}

/* ===== HERO - mantém DARK como no seu print (perfeito) ===== */
.hero, 
.elementor-section:first-of-type,
.e-con:first-of-type {
  background: var(--hifi-dark) !important;
}

.hero h1, .hero p {
  color: #fff;
}

/* ===== CARDS - branco puro sobre off-white ===== */
.iem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.iem-card,
.elementor-widget-container {
  background: var(--hifi-card);
  border: 1px solid var(--hifi-border);
  border-radius: 16px;
}

.iem-card {
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  transition: transform .2s ease, box-shadow .2s ease;
}

.iem-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

/* Tipografia */
.iem-card h3 { color: var(--hifi-text); }
.iem-card p { color: var(--hifi-muted); }

/* ===== RESPONSIVO ===== */
@media (max-width: 900px) {
  .iem-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .iem-grid { grid-template-columns: 1fr; }
}