/* ===== IMPORTAÇÕES GLOBAIS ===== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* ===== FONTES ===== */
.font-jakarta {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.font-poppins {
  font-family: 'Poppins', sans-serif !important;
}

.font-inter {
  font-family: 'Inter', sans-serif !important;
}

/* ===== CORES PRIMÁRIAS ===== */
/* 
  VARIÁVEIS CSS GLOBAIS - Use em qualquer lugar!
  
  Cores Primárias:
  var(--color-primary)     → #008bff (padrão)
  var(--color-primary-50)  → #e6f4ff (mais claro)
  var(--color-primary-900) → #001f33 (mais escuro)
  var(--color-gray-theme)  → #52525B
  
  Exemplo de uso:
  color: var(--color-primary);
  background-color: var(--color-primary-100);
*/
:root {
  --color-primary: #008bff;
  --color-primary-50: #e6f4ff;
  --color-primary-100: #b3ddff;
  --color-primary-200: #80c7ff;
  --color-primary-300: #4db0ff;
  --color-primary-400: #1a9aff;
  --color-primary-500: #008bff;
  --color-primary-600: #0070cc;
  --color-primary-700: #005599;
  --color-primary-800: #003a66;
  --color-primary-900: #001f33;
  --color-gray-theme: #52525B;
}

/* Estilos Customizados Qualitronix */

/* Cores Primárias Personalizadas */
.text-primary {
  color: #008bff !important;
}

.bg-primary {
  background-color: #008bff !important;
}

.border-primary {
  border-color: #008bff !important;
}

.hover\:text-primary:hover {
  color: #008bff !important;
}

.hover\:bg-primary:hover {
  background-color: #008bff !important;
}

.hover\:bg-primary-dark:hover {
  background-color: #0070cc !important;
}

/* Cores de fundo com variações */
.bg-primary-light {
  background-color: #b3ddff !important;
}

.bg-primary-dark {
  background-color: #0070cc !important;
}

/* Texto com variações */
.text-primary-light {
  color: #4db0ff !important;
}

.text-primary-dark {
  color: #005599 !important;
}

/* Transições suaves */
* {
  transition-duration: 200ms;
}

html {
  scroll-behavior: smooth;
}

/* Container */
.container {
  max-width: 1200px;
}

/* Utilities */
.shadow-primary {
  box-shadow: 0 4px 14px 0 rgba(0, 139, 255, 0.39);
}

.ring-primary {
  --tw-ring-color: #008bff;
}

.product-cta {
  cursor: pointer;
}

.product-cta__label {
  position: relative;
  display: inline-block;
}

.product-cta:hover .product-cta__label::after {
  transform: scaleX(1);
}

.product-cta__label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* Cards de categoria agora usam apenas classes Tailwind - CSS removido */

/* ===== ESTILIZAÇÃO DO CONTEÚDO DO BLOG ===== */
.blog-content {
  /* Resetar estilos padrão do WordPress */
}

.blog-content h1 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #3F3E3E !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}

@media (min-width: 768px) {
  .blog-content h1 {
    font-size: 2rem !important;
  }
}

.blog-content h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #3F3E3E !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.875rem !important;
}

@media (min-width: 768px) {
  .blog-content h2 {
    font-size: 1.75rem !important;
  }
}

.blog-content h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #3F3E3E !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}

@media (min-width: 768px) {
  .blog-content h3 {
    font-size: 1.5rem !important;
  }
}

.blog-content h4 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #3F3E3E !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.625rem !important;
}

@media (min-width: 768px) {
  .blog-content h4 {
    font-size: 1.25rem !important;
  }
}

.blog-content h5 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #3F3E3E !important;
  margin-top: 1.125rem !important;
  margin-bottom: 0.5rem !important;
}

@media (min-width: 768px) {
  .blog-content h5 {
    font-size: 1.125rem !important;
  }
}

.blog-content h6 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #3F3E3E !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
}

@media (min-width: 768px) {
  .blog-content h6 {
    font-size: 1rem !important;
  }
}

.blog-content p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #71717A !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
}

.blog-content a {
  color: #008bff !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.blog-content a:hover {
  color: #0070cc !important;
}

.blog-content ul,
.blog-content ol {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: #71717A !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  padding-left: 2rem !important;
}

.blog-content ul {
  list-style-type: disc !important;
}

.blog-content ol {
  list-style-type: decimal !important;
}

.blog-content li {
  margin-bottom: 0.5rem !important;
}

.blog-content strong,
.blog-content b {
  font-weight: 700 !important;
  color: #3F3E3E !important;
}

.blog-content em,
.blog-content i {
  font-style: italic !important;
}

.blog-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.blog-content blockquote {
  border-left: 4px solid #008bff !important;
  padding-left: 1.5rem !important;
  margin-left: 0 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  font-style: italic !important;
  color: #52525B !important;
}

.blog-content code {
  background-color: #F8FAFC !important;
  padding: 0.125rem 0.375rem !important;
  border-radius: 4px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 0.875rem !important;
  color: #008bff !important;
}

.blog-content pre {
  background-color: #F8FAFC !important;
  padding: 1rem !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.blog-content pre code {
  background-color: transparent !important;
  padding: 0 !important;
}

.blog-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.blog-content th,
.blog-content td {
  border: 1px solid #E8E8E8 !important;
  padding: 0.75rem !important;
  text-align: left !important;
}

.blog-content th {
  background-color: #F8FAFC !important;
  font-weight: 600 !important;
  color: #3F3E3E !important;
}

.blog-content hr {
  border: none !important;
  border-top: 1px solid #E8E8E8 !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* ===== CARROSSEL DE DEPOIMENTOS ===== */
.testimonial-carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.testimonial-slides-wrapper {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.testimonial-slides-container {
  display: flex;
  will-change: transform;
  width: 100%;
}

.testimonial-slide {
  transition: none;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 100%;
}

.testimonial-slide > div {
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.testimonial-nav {
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 30 !important;
}

.testimonial-nav img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ===== CARROSSEL DA GALERIA (PÁGINA SOBRE) ===== */
/* Mobile: Carrossel */
.gallery-carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

#gallery-carousel-track {
  display: flex;
  width: 100%;
}

.gallery-slide {
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.gallery-slide img {
  max-width: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Desktop: Layout original (sem carrossel) */
@media (min-width: 768px) {
  .gallery-carousel-wrapper {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #gallery-carousel-track {
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .gallery-slide {
    min-width: auto !important;
    max-width: 320px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  .gallery-slide img {
    object-fit: cover !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
  }
}