/* ============================================================
   OptiBi — Estilos propios
   Complementa Tailwind; evitar duplicar utilidades de Tailwind aquí.
   ============================================================ */

/* --- Base --- */
body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
}

/* --- Iconos Material Symbols --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* --- Bento Grid (sección de soluciones) --- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* --- Tarjetas de servicio --- */
.service-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
  transform: translateY(-4px);
}

/* --- Estado inicial para animación de entrada (JS lo activa) --- */
.service-card.animate-hidden {
  opacity: 0;
  transform: translateY(40px);
}

.service-card.animate-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}