body { font-family: 'Montserrat', sans-serif; }
:root { --blascor-blue: #3a56a3; --blascor-yellow: #fff212; }

/* Sobrescritas de cores (Idealmente configurar no tailwind.config.js) */
.bg-blue-600 { background-color: var(--blascor-blue) !important; }
.text-blue-600, .text-blue-700, .text-blue-800 { color: var(--blascor-blue) !important; }
.border-blue-300 { border-color: var(--blascor-blue) !important; }
.bg-yellow-400 { background-color: var(--blascor-yellow) !important; }
.hover\:bg-yellow-300:hover { background-color: var(--blascor-yellow) !important; }
.text-yellow-800, .text-yellow-700 { color: var(--blascor-yellow) !important; }

/* Cor Blascor Azul */
.bg-blascor-blue { background-color: #3a56a3; }

/* ================================================================
  ESTILOS GLOBAIS (Idealmente mover para um CSS global no base.html)
================================================================ */

/* Menu / Drawer */
#submenu-utilitarios,
#submenu-produtos {
  background-color: #3a56a3 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}
#menu-utilitarios:hover > a,
#menu-produtos:hover > a { color: var(--blascor-yellow); }
#submenu-utilitarios a:hover,
#submenu-produtos a:hover { color: var(--blascor-yellow) !important; }

#mobile-drawer {
  background-color: #3a56a3;
  box-shadow: -4px 0 12px rgba(0,0,0,0.3);
  border-left: 2px solid #fff212;
  transition: transform 0.3s ease;
}
.translate-x-full { transform: translateX(100%); }
.translate-x-0 { transform: translateX(0); }
.transition-transform { transition: transform 0.3s ease; }
html, body { max-width: 100%; overflow-x: hidden; }
body.drawer-open { overflow: hidden; }
body.drawer-open #drawer-overlay { display: block; }
#drawer-overlay { display: none; background-color: rgba(0, 0, 0, 0.5); position: fixed; inset: 0; z-index: 30; } /* Estilo do overlay */
.hover\:text-blascor-yellow:hover { color: var(--blascor-yellow) !important; }

/* =====================================================
  ESTILOS DO CARROSSEL DE REVIEWS (SWIPER.JS)
===================================================== */

/* Dá espaço para as bolinhas de paginação abaixo do carrossel */
#reviews-swiper {
  padding-bottom: 50px;
}

/* Cor da bolinha inativa */
.swiper-pagination-bullet {
  background-color: #ccc;
  opacity: 0.8;
  width: 10px;
  height: 10px;
  transition: background-color 0.3s ease;
}

/* Cor da bolinha ativa (azul da Blascor) */
.swiper-pagination-bullet-active {
  background-color: var(--blascor-blue) !important;
  opacity: 1;
}

/* Garante que os cards dentro do slide ocupem a altura disponível */
.swiper-slide {
  height: auto; /* Permite que a altura seja definida pelo conteúdo */
}
.swiper-slide > div {
  height: 100%; /* Faz o card interno ocupar 100% da altura do slide */
}

/* Ajustes para o embed do Instagram */
.instagram-media {
  min-width: 1px !important; /* Evita bug de largura mínima */
  width: 100% !important;    /* Ocupa a largura do card */
  margin: 0 auto !important; /* Centraliza se houver espaço sobrando */
}