/* =====================================================================
   SUPERMERCADO UNITY — DESIGN SYSTEM
   ===================================================================== */

:root {
  --unity-verde: #1E8449;
  --unity-verde-escuro: #145A32;
  --unity-verde-claro: #EAF7EF;
  --unity-vermelho: #C0392B;
  --unity-vermelho-escuro: #922B21;
  --unity-amarelo: #F4B400;
  --unity-branco: #FFFFFF;
  --unity-cinza-claro: #F5F6F7;
  --unity-cinza-medio: #E4E7EA;
  --unity-cinza-escuro: #2C3438;
  --unity-texto: #2C3438;
  --unity-sombra: 0 10px 30px rgba(0,0,0,.08);
  --unity-sombra-hover: 0 16px 40px rgba(0,0,0,.14);
  --unity-radius: 18px;
  --unity-radius-sm: 10px;
  --unity-font: 'Poppins', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--unity-font);
  color: var(--unity-texto);
  background: var(--unity-branco);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* ---------- Utilitários ---------- */
.text-verde { color: var(--unity-verde) !important; }
.text-vermelho { color: var(--unity-vermelho) !important; }
.bg-verde { background: var(--unity-verde) !important; }
.bg-verde-claro { background: var(--unity-verde-claro) !important; }
.bg-vermelho { background: var(--unity-vermelho) !important; }
.bg-cinza { background: var(--unity-cinza-claro) !important; }
.section-padding { padding: 72px 0; }
.rounded-unity { border-radius: var(--unity-radius) !important; }

/* ---------- Botões ---------- */
.btn-unity-primario {
  background: var(--unity-verde);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(30,132,73,.35);
  transition: all .25s ease;
}
.btn-unity-primario:hover { background: var(--unity-verde-escuro); color:#fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(30,132,73,.45); }

.btn-unity-secundario {
  background: var(--unity-vermelho);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(192,57,43,.35);
  transition: all .25s ease;
}
.btn-unity-secundario:hover { background: var(--unity-vermelho-escuro); color:#fff; transform: translateY(-2px); }

.btn-outline-unity {
  border: 2px solid var(--unity-verde);
  color: var(--unity-verde);
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: 600;
  background: transparent;
  transition: all .25s ease;
}
.btn-outline-unity:hover { background: var(--unity-verde); color: #fff; }

/* ---------- Topo utilitário (telefone / whatsapp / horário) ---------- */
.top-bar {
  background: var(--unity-verde-escuro);
  color: #fff;
  font-size: .85rem;
  padding: 6px 0;
}
.top-bar a { color: #fff; opacity: .95; }
.top-bar a:hover { opacity: 1; text-decoration: underline; }

/* ---------- Header fixo ---------- */
.header-unity {
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.header-unity .logo { font-weight: 800; font-size: 1.5rem; color: var(--unity-verde); }
.header-unity .logo span { color: var(--unity-vermelho); }

.header-unity .nav-link {
  font-weight: 600;
  color: var(--unity-texto) !important;
  position: relative;
  padding: 10px 14px !important;
}
.header-unity .nav-link:hover { color: var(--unity-verde) !important; }

.busca-header {
  border-radius: 50px;
  overflow: hidden;
  border: 2px solid var(--unity-cinza-medio);
}
.busca-header input { border: none; }
.busca-header input:focus { box-shadow: none; }
.busca-header button { background: var(--unity-verde); color: #fff; border: none; padding: 0 18px; }

/* Mega menu */
.mega-menu {
  border-radius: var(--unity-radius);
  box-shadow: var(--unity-sombra-hover);
  border: none;
  padding: 24px;
}
.mega-menu h6 { color: var(--unity-verde); font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .5px; }
.mega-menu a.dropdown-item { border-radius: 8px; padding: 8px 12px; }
.mega-menu a.dropdown-item:hover { background: var(--unity-verde-claro); color: var(--unity-verde-escuro); }

/* ---------- Hero / Slider ---------- */
.hero-slider { position: relative; }
.hero-slide {
  height: 78vh;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
}
.hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,90,50,.75) 0%, rgba(20,90,50,.25) 55%, transparent 100%);
}
.hero-slide .container { position: relative; z-index: 2; }
.hero-slide h1 { font-size: 3rem; font-weight: 800; color: #fff; }
.hero-slide p { font-size: 1.25rem; color: #f0f0f0; max-width: 560px; }

/* ---------- Cards de categoria / corredores ---------- */
.card-departamento {
  border: none;
  border-radius: var(--unity-radius);
  overflow: hidden;
  box-shadow: var(--unity-sombra);
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
}
.card-departamento:hover { transform: translateY(-8px); box-shadow: var(--unity-sombra-hover); }
.card-departamento img { height: 190px; object-fit: cover; width: 100%; transition: transform .5s ease; }
.card-departamento:hover img { transform: scale(1.08); }
.card-departamento .card-body { padding: 20px; }
.card-departamento .card-title { font-weight: 700; color: var(--unity-verde-escuro); }

/* ---------- Cards de promoção / etiqueta ---------- */
.card-promocao {
  border: none;
  border-radius: var(--unity-radius);
  background: #fff;
  box-shadow: var(--unity-sombra);
  position: relative;
  overflow: hidden;
  transition: transform .3s ease;
}
.card-promocao:hover { transform: translateY(-6px); }
.card-promocao .etiqueta {
  position: absolute; top: 14px; left: 14px;
  background: var(--unity-vermelho);
  color: #fff; font-weight: 700; font-size: .75rem;
  padding: 6px 14px; border-radius: 50px;
  text-transform: uppercase;
  z-index: 2;
}
.card-promocao .preco-de { text-decoration: line-through; color: #999; font-size: .9rem; }
.card-promocao .preco-por { color: var(--unity-vermelho); font-size: 1.6rem; font-weight: 800; }
.card-promocao img { height: 160px; object-fit: cover; width: 100%; }

/* ---------- Seção Institucional / Diferenciais ---------- */
.diferencial-item { text-align: center; padding: 24px 12px; }
.diferencial-item .icone {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--unity-verde-claro);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 2rem; color: var(--unity-verde);
}

/* ---------- Encarte / Blog ---------- */
.card-blog { border: none; border-radius: var(--unity-radius); overflow: hidden; box-shadow: var(--unity-sombra); transition: transform .3s ease; }
.card-blog:hover { transform: translateY(-6px); }
.card-blog img { height: 200px; object-fit: cover; width: 100%; }

/* ---------- Rodapé ---------- */
.footer-unity { background: var(--unity-cinza-escuro); color: #dfe3e5; }
.footer-unity h6 { color: #fff; font-weight: 700; margin-bottom: 18px; }
.footer-unity a { color: #b7bfc3; }
.footer-unity a:hover { color: #fff; }
.footer-unity .social-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 8px; transition: background .2s ease;
}
.footer-unity .social-icon:hover { background: var(--unity-verde); }
.footer-bottom { background: #202628; padding: 16px 0; font-size: .85rem; }

/* ---------- Whatsapp Flutuante ---------- */
.whats-flutuante {
  position: fixed; bottom: 24px; right: 24px; z-index: 1050;
  width: 62px; height: 62px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.whats-flutuante:hover { transform: scale(1.08); color: #fff; }

/* ---------- Animações ---------- */
.fade-in-up { animation: fadeInUp .7s ease both; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(30px); transition: all .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
  .hero-slide { height: 60vh; }
  .hero-slide h1 { font-size: 2rem; }
  .section-padding { padding: 48px 0; }
}