/* ============================================
   SECCIÓN MISIÓN Y VISIÓN
   Sigue el patrón de las demás secciones (badge + section-title
   + grid de tarjetas). Usa las variables de marca de style.css.
   ============================================ */

.mission-vision-section {
  background: transparent;
}

.mission-vision-section .mv-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--primario-suave, #0E2A30);
  color: var(--primary-dark, #14B8A6);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Tarjetas Misión / Visión */
.mv-card {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-xl, 16px);
  padding: var(--spacing-xl, 32px);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base, 0.3s ease),
              box-shadow var(--transition-base, 0.3s ease),
              border-color var(--transition-base, 0.3s ease);
}

.mv-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-brand-hover);
  box-shadow: var(--shadow-hover);
}

.mv-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: var(--radius-lg, 12px);
  background: var(--brand-gradient);
  color: #0A0A0A;
  font-size: 1.6rem;
}

.mv-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--texto-principal, #F1F5F9);
  margin-bottom: 12px;
}

.mv-card p {
  color: var(--texto-secundario, #CBD5E1);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
}

/* Responsive: en móvil las tarjetas se apilan (lo maneja el grid de Bootstrap),
   solo ajustamos el padding para pantallas pequeñas */
@media (max-width: 575.98px) {
  .mv-card {
    padding: var(--spacing-lg, 24px);
  }
  .mv-icon {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
  }
}